"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ExperimentalAvatar } from "./Avatar.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { MaybeButtonOrLink } from "../atoms/ButtonOrLink/MaybeButtonOrLink.js";
const ExperimentalAddress = forwardRef(
  ({ variant, size, avatar, className, style, children, ...props }, ref) => {
    const { polyfillAttributes, polyfillElement } = useCSSPropsPolyfill("address", { variant, size });
    return /* @__PURE__ */ jsxs(
      "span",
      {
        className: classNames(["gds-address flex h-max -:w-max -:max-w-full", className]),
        ...getCSSPropsAttributes("address", { variant, size }, style),
        ...polyfillAttributes,
        children: [
          polyfillElement,
          /* @__PURE__ */ jsxs(
            MaybeButtonOrLink,
            {
              ref,
              className: `
            group/address flex grow items-center rounded-full border border-transparent text-white/88 transition
            disabled:text-white/32
            clickable-hocus-visible:text-white
            clickable-active:text-white/64
            clickable-active:transition-none
            @prop-size-small/address:gap-1
            @prop-size-medium/address:gap-1.5
            @prop-size-large/address:gap-2
            @prop-variant-primary/address:m-[-5px]
            @prop-variant-primary/address:p-1
            @prop-variant-primary/address:text-white/88
            @prop-variant-secondary/address:m-[-5px]
            @prop-variant-secondary/address:p-1
            @prop-variant-secondary/address:text-white/48
            @prop-variant-secondary/address:clickable-hocus-visible:text-white/88
            @prop-variant-secondary/address:clickable-active:text-white/64
            @prop-variant-enclosed/address:border-white/8
            @prop-variant-enclosed/address:bg-white/4
            @prop-variant-enclosed/address:disabled:border-transparent
            @prop-variant-enclosed/address:clickable-hocus-visible:border-white/16
            @prop-variant-enclosed/address:clickable-hocus-visible:bg-white/8
            @prop-variant-enclosed/address:clickable-active:border-white/8
            @prop-variant-enclosed/address:clickable-active:bg-white/4
            @prop-variant-enclosed/address:@prop-size-small/address:h-6
            @prop-variant-enclosed/address:@prop-size-small/address:pe-2
            @prop-variant-enclosed/address:@prop-size-small/address:ps-1
            @prop-variant-enclosed/address:@prop-size-medium/address:h-8
            @prop-variant-enclosed/address:@prop-size-medium/address:pe-2
            @prop-variant-enclosed/address:@prop-size-medium/address:ps-1
            @prop-variant-enclosed/address:@prop-size-large/address:h-10
            @prop-variant-enclosed/address:@prop-size-large/address:pe-3
            @prop-variant-enclosed/address:@prop-size-large/address:ps-2
          `,
              ...props,
              children: [
                /* @__PURE__ */ jsx(
                  ExperimentalAvatar,
                  {
                    type: "wallet",
                    src: avatar,
                    alt: "",
                    className: `
              transition
              @prop-size-small/address:prop-size-xsmall
              @prop-size-medium/address:prop-size-small
              @prop-size-large/address:prop-size-medium
              @prop-variant-primary/address:group-disabled/address:opacity-32
              @prop-variant-secondary/address:group-disabled/address:opacity-32
              @prop-variant-enclosed/address:-ms-px
              @prop-size-large/address:@prop-variant-enclosed/address:prop-size-small
            `
                  }
                ),
                children ? /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: `
                text-p14 truncate
                @prop-size-small/address:text-p12
                @prop-variant-primary/address:@prop-size-large/address:text-p16
                @prop-variant-secondary/address:@prop-size-large/address:text-p16
              `,
                    children
                  }
                ) : null
              ]
            }
          )
        ]
      }
    );
  }
);
ExperimentalAddress.displayName = "ExperimentalAddress";
export {
  ExperimentalAddress
};
