"use client";
import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ExperimentalAvatarGroupContext } from "./Avatar.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
const ExperimentalAvatarGroup = forwardRef(
  ({ type = "wallet", size, className, style, children, ...props }, forwardedRef) => {
    const [propsPolyfillForwardedRef, propsPolyfillAttributes] = useCSSPropsPolyfill(
      "avatar-group",
      { size },
      { ref: forwardedRef }
    );
    return /* @__PURE__ */ jsx(ExperimentalAvatarGroupContext.Provider, { value: { type }, children: /* @__PURE__ */ jsx(
      "span",
      {
        ref: propsPolyfillForwardedRef,
        "data-type": type,
        className: classNames([
          `group/avatar-group gds-avatar-group block
            -:w-max
            -:max-w-full`,
          className
        ]),
        ...getCSSPropsAttributes("avatar", { size }, {
          ...style,
          "--mask-wallet": `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M1,1L0,1L0,0L1,-0C0.826,0.099 0.709,0.286 0.709,0.5C0.709,0.714 0.826,0.901 1,1Z' /%3E%3C/svg%3E")`,
          "--mask-subgraph": `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M0.841,1L0,1L0,0L0.841,0C0.812,0.024 0.794,0.061 0.794,0.102L0.794,0.898C0.794,0.939 0.812,0.976 0.841,1Z' /%3E%3C/svg%3E")`,
          "--mask-subgraph-small": `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M0.841,1L0,1L0,0L0.841,0C0.804,0.046 0.782,0.104 0.782,0.167L0.782,0.833C0.782,0.896 0.804,0.954 0.841,1Z'/%3E%3C/svg%3E")`,
          "--mask-subgraph-large": `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M0.795,1L0,1L0,0L0.795,0C0.779,0.023 0.769,0.052 0.769,0.083L0.769,0.917C0.769,0.948 0.779,0.977 0.795,1Z' /%3E%3C/svg%3E")`,
          "--mask-subgraph-xlarge": `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M0.804,1L0,1L0,0L0.804,-0C0.772,0.032 0.752,0.076 0.752,0.125L0.752,0.875C0.752,0.924 0.772,0.968 0.804,1Z' /%3E%3C/svg%3E")`
        }),
        ...propsPolyfillAttributes,
        ...props,
        children: /* @__PURE__ */ jsx(
          "span",
          {
            dir: "ltr",
            className: `
              flex *:shrink last:*:shrink-0
              not-last:*:[mask-position:right]
              not-last:*:[mask-size:auto_100%]
              group-data-[type=subgraph]/avatar-group:not-last:*:[mask-image:var(--mask-subgraph)]
              group-data-[type=wallet]/avatar-group:not-last:*:[mask-image:var(--mask-wallet)]
              group-data-[type=subgraph]/avatar-group:nested-cluster:prop-shape-square
              group-data-[type=wallet]/avatar-group:nested-cluster:prop-shape-circle
              @prop-size-xsmall/avatar-group:*:prop-size-xsmall
              @prop-size-xsmall/avatar-group:group-data-[type=subgraph]/avatar-group:not-first:*:ml-[-2px]
              @prop-size-xsmall/avatar-group:group-data-[type=wallet]/avatar-group:not-first:*:ml-[-3px]
              @prop-size-small/avatar-group:*:prop-size-small
              @prop-size-small/avatar-group:group-data-[type=subgraph]/avatar-group:not-first:*:ml-[-3px]
              @prop-size-small/avatar-group:group-data-[type=wallet]/avatar-group:not-first:*:ml-[-5px]
              @prop-size-small/avatar-group:group-data-[type=subgraph]/avatar-group:not-last:*:[mask-image:var(--mask-subgraph-small)]
              @prop-size-medium/avatar-group:*:prop-size-medium
              @prop-size-medium/avatar-group:group-data-[type=subgraph]/avatar-group:not-first:*:ml-[-4px]
              @prop-size-medium/avatar-group:group-data-[type=wallet]/avatar-group:not-first:*:ml-[-7px]
              @prop-size-large/avatar-group:*:prop-size-large
              @prop-size-large/avatar-group:group-data-[type=subgraph]/avatar-group:not-first:*:ml-[-8px]
              @prop-size-large/avatar-group:group-data-[type=wallet]/avatar-group:not-first:*:ml-[-11px]
              @prop-size-large/avatar-group:group-data-[type=subgraph]/avatar-group:not-last:*:[mask-image:var(--mask-subgraph-large)]
              @prop-size-xlarge/avatar-group:*:prop-size-xlarge
              @prop-size-xlarge/avatar-group:group-data-[type=subgraph]/avatar-group:not-first:*:ml-[-12px]
              @prop-size-xlarge/avatar-group:group-data-[type=wallet]/avatar-group:not-first:*:ml-[-15px]
              @prop-size-xlarge/avatar-group:group-data-[type=subgraph]/avatar-group:not-last:*:[mask-image:var(--mask-subgraph-xlarge)]
            `,
            children
          }
        )
      }
    ) });
  }
);
ExperimentalAvatarGroup.displayName = "ExperimentalAvatarGroup";
export {
  ExperimentalAvatarGroup
};
