"use client";
import { jsx, jsxs } 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 }, forwardedRef) => {
    const [propsPolyfillRef, propsPolyfillAttributes] = useCSSPropsPolyfill("address", { variant, size });
    return /* @__PURE__ */ jsx(
      "span",
      {
        ref: propsPolyfillRef,
        className: classNames(["gds-address flex -:w-max -:max-w-full +:h-max", className]),
        ...getCSSPropsAttributes("address", { variant, size }, style),
        ...propsPolyfillAttributes,
        children: /* @__PURE__ */ jsxs(
          MaybeButtonOrLink,
          {
            ref: forwardedRef,
            className: `
            group/address flex grow items-center rounded-full border border-transparent text-white transition
            -:*:transition-opacity
            -:*:disabled:opacity-40
            clickable:hover:text-white
            clickable:active:text-space-500
            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-secondary/address:m-[-5px]
            @prop-variant-secondary/address:p-1
            @prop-variant-secondary/address:text-space-500
            @prop-variant-enclosed/address:border-space-1300
            @prop-variant-enclosed/address:bg-space-1500
            @prop-variant-enclosed/address:disabled:border-transparent
            @prop-variant-enclosed/address:clickable:hover:border-space-1200
            @prop-variant-enclosed/address:clickable:hover:bg-space-1400
            @prop-variant-enclosed/address:clickable:active:border-space-1400
            @prop-variant-enclosed/address:clickable:active:bg-space-1600
            @prop-variant-enclosed/address:clickable:active:text-white
            @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: `
              @prop-size-small/address:prop-size-xsmall
              @prop-size-medium/address:prop-size-small
              @prop-size-large/address:prop-size-medium
              @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
};
