"use client";
import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
const ExperimentalIcon = forwardRef(
  ({ alt, size, color, className, style, children, ...props }, forwardedRef) => {
    return /* @__PURE__ */ jsx(
      "span",
      {
        ref: forwardedRef,
        role: alt ? "img" : void 0,
        "aria-label": alt || void 0,
        className: classNames([
          `gds-icon flex aspect-square items-center justify-center fill-current
          will-change-transform           ${/* Fix icons wobbling in Safari when rendered on top of opacity/background transitions */
          ""}
          -:w-[var(--gds-icon-size)]      ${/* Unimportant to allow sizing icons with `size-*` utilities */
          ""}
          -:h-max
          -:shrink-0
          -:text-[var(--gds-icon-color)]  ${/* Unimportant to allow coloring icons with `text-*` utilities */
          ""}
          --:*:w-full                     ${/* Less important than the `-:w` above to avoid conflicting with the size of a nested icon */
          ""}
          nested-icon:default-size-[100%] ${/* Ensure a nested icon scales to fit this wrapper by default */
          ""}
          is-[.gds-Icon]:**:[--gds-Icon-size-default:100%]`,
          className
        ]),
        ...getCSSPropsAttributes("icon", { size, color }, style),
        ...props,
        children
      }
    );
  }
);
ExperimentalIcon.displayName = "ExperimentalIcon";
Object.assign(ExperimentalIcon, { isGdsIcon: true });
export {
  ExperimentalIcon
};
