import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { I as Icon } from './Icon-Bcil6aBo.js';
import { S as Spinner } from './Spinner-CpEm3Lud.js';
import { c as cx } from './index-SvGbrGuT.js';
import { s as styles } from './Button.module-DwCq9XU0.js';
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
import { useTrackingId } from './useTrackingId.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';

const Button = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      children,
      className,
      appearance = "secondary",
      size = "medium",
      icon,
      loading = false,
      disabled,
      style,
      type = "button",
      ...rest
    } = componentProps;
    const data = {
      children: childrenToString(props.children),
      appearance,
      icon,
      size,
      type
    };
    const trackingId = useTrackingId({
      name: "Button",
      data,
      hasOverride: !!props["data-tracking-id"]
    });
    const iconBefore = (icon2) => {
      if (typeof icon2 === "object" && "before" in icon2) {
        return /* @__PURE__ */ jsx(
          Icon,
          {
            className: styles["icon"],
            inherit: true,
            "aria-hidden": true,
            svg: icon2.before
          }
        );
      }
      if (icon2 && typeof icon2 !== "object") {
        return /* @__PURE__ */ jsx(
          Icon,
          {
            className: styles["icon"],
            inherit: true,
            "aria-hidden": true,
            svg: icon2,
            size: !children && !size.includes("small") ? "large" : "medium"
          }
        );
      }
      return;
    };
    const buttonClassNames = cx(className, styles["button"], {
      [styles["appearance-primary"]]: appearance === "primary",
      [styles["appearance-secondary"]]: appearance === "secondary",
      [styles["appearance-ghost"]]: appearance === "ghost",
      [styles["danger-secondary"]]: appearance === "danger-secondary",
      [styles["danger-primary"]]: appearance === "danger",
      [styles["size-xsmall"]]: size === "xsmall",
      [styles["size-small"]]: size === "small",
      [styles["size-medium"]]: size === "medium",
      [styles["size-large"]]: size === "large",
      [styles["type-icon"]]: !children,
      [styles["loading"]]: loading
    });
    const styleCombined = {
      ...style,
      ...layoutStyles
    };
    return /* @__PURE__ */ jsxs(
      "button",
      {
        "data-tracking-id": trackingId,
        className: buttonClassNames,
        type,
        disabled: disabled || loading,
        "aria-busy": loading ? true : void 0,
        "data-anv": "button",
        style: styleCombined,
        ref,
        ...rest,
        children: [
          loading ? /* @__PURE__ */ jsx(Spinner, { inherit: true, size: "small", className: styles["loading-spinner"] }) : icon ? iconBefore(icon) : null,
          children,
          typeof icon === "object" && "after" in icon ? /* @__PURE__ */ jsx(
            Icon,
            {
              className: styles["icon"],
              inherit: true,
              "aria-hidden": true,
              svg: icon.after
            }
          ) : null
        ]
      }
    );
  }
);
Button.displayName = "Button";

export { Button as B };
//# sourceMappingURL=Button-DrNDkO2f.js.map
