"use strict";
const jsxRuntime = require("react/jsx-runtime");
const assert = require("assert");
const dedent = require("dedent");
const React = require("react");
const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const styles_lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs = require("../private/AvoidWidowIcon/AvoidWidowIcon.cjs");
const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
const styles_lib_components_private_touchable_virtualTouchable_cjs = require("../private/touchable/virtualTouchable.cjs");
const styles_lib_components_Box_BackgroundContext_cjs = require("../Box/BackgroundContext.cjs");
const styles_lib_css_negativeMargin_negativeMargin_cjs = require("../../css/negativeMargin/negativeMargin.cjs");
const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("../../../../side-effects/lib/components/BraidProvider/BraidProvider.cjs");
const styles_lib_components_Button_Button_css_cjs = require("./Button.css.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
const ActionsContext = React.createContext(null);
const boxShadowForVariant = {
  default: "borderField",
  disabled: "borderNeutralLight",
  focus: "outlineFocus",
  formAccent: "borderFormAccent",
  critical: "borderCritical"
};
const FieldOverlay = ({ variant, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(
  styles_lib_components_Accordion_AccordionItem_cjs.Overlay,
  {
    component: "span",
    borderRadius: "standard",
    boxShadow: boxShadowForVariant[variant],
    transition: "fast",
    ...restProps
  }
);
const validBleedComponents = ["div", "span"];
const Bleed = ({
  space,
  horizontal,
  vertical,
  top,
  bottom,
  left,
  right,
  children,
  component = "div",
  data,
  ...restProps
}) => /* @__PURE__ */ jsxRuntime.jsx(
  styles_lib_components_Box_Box_cjs.Box,
  {
    component,
    display: component === "span" ? "block" : void 0,
    className: [
      styles_lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("top", top || vertical || space),
      styles_lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("bottom", bottom || vertical || space),
      styles_lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("left", left || horizontal || space),
      styles_lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("right", right || horizontal || space)
    ],
    ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
    children: /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Box_Box_cjs.Box,
      {
        component,
        display: component === "span" ? "block" : void 0,
        position: "relative",
        children
      }
    )
  }
);
const buttonVariants = [
  "solid",
  "ghost",
  "soft",
  "transparent"
];
const buttonTones = [
  "formAccent",
  "brandAccent",
  "critical",
  "neutral"
];
const variants = {
  solid: {
    formAccent: {
      textTone: void 0,
      background: "formAccent",
      backgroundHover: "formAccentHover",
      backgroundActive: "formAccentActive",
      boxShadow: void 0
    },
    brandAccent: {
      textTone: void 0,
      background: "brandAccent",
      backgroundHover: "brandAccentHover",
      backgroundActive: "brandAccentActive",
      boxShadow: void 0
    },
    critical: {
      textTone: void 0,
      background: "critical",
      backgroundHover: "criticalHover",
      backgroundActive: "criticalActive",
      boxShadow: void 0
    },
    neutral: {
      textTone: void 0,
      background: { light: "neutral", dark: "neutralSoft" },
      backgroundHover: { light: "neutralSoftHover", dark: "neutralHover" },
      backgroundActive: { light: "neutralSoftActive", dark: "neutralActive" },
      boxShadow: void 0
    }
  },
  soft: {
    formAccent: {
      textTone: "formAccent",
      background: { light: "formAccentSoft", dark: "customDark" },
      backgroundHover: "formAccentSoftHover",
      backgroundActive: "formAccentSoftActive",
      boxShadow: void 0
    },
    brandAccent: {
      textTone: "brandAccent",
      background: { light: "brandAccentSoft", dark: "customDark" },
      backgroundHover: "brandAccentSoftHover",
      backgroundActive: "brandAccentSoftActive",
      boxShadow: void 0
    },
    critical: {
      textTone: "critical",
      background: { light: "criticalSoft", dark: "customDark" },
      backgroundHover: "criticalSoftHover",
      backgroundActive: "criticalSoftActive",
      boxShadow: void 0
    },
    neutral: {
      textTone: "neutral",
      background: { light: "neutralSoft", dark: "customDark" },
      backgroundHover: "neutralSoftHover",
      backgroundActive: "neutralSoftActive",
      boxShadow: void 0
    }
  },
  transparent: {
    formAccent: {
      textTone: "formAccent",
      background: void 0,
      backgroundHover: "formAccentSoftHover",
      backgroundActive: "formAccentSoftActive",
      boxShadow: void 0
    },
    brandAccent: {
      textTone: "brandAccent",
      background: void 0,
      backgroundHover: "brandAccentSoftHover",
      backgroundActive: "brandAccentSoftActive",
      boxShadow: void 0
    },
    critical: {
      textTone: "critical",
      background: void 0,
      backgroundHover: "criticalSoftHover",
      backgroundActive: "criticalSoftActive",
      boxShadow: void 0
    },
    neutral: {
      textTone: "neutral",
      background: void 0,
      backgroundHover: "neutralSoftHover",
      backgroundActive: "neutralSoftActive",
      boxShadow: void 0
    }
  },
  ghost: {
    formAccent: {
      textTone: "formAccent",
      background: void 0,
      backgroundHover: "formAccentSoftHover",
      backgroundActive: "formAccentSoftActive",
      boxShadow: "borderFormAccent"
    },
    brandAccent: {
      textTone: "brandAccent",
      background: void 0,
      backgroundHover: "brandAccentSoftHover",
      backgroundActive: "brandAccentSoftActive",
      boxShadow: "borderBrandAccent"
    },
    critical: {
      textTone: "critical",
      background: void 0,
      backgroundHover: "criticalSoftHover",
      backgroundActive: "criticalSoftActive",
      boxShadow: "borderCritical"
    },
    neutral: {
      textTone: "neutral",
      background: void 0,
      backgroundHover: "neutralSoftHover",
      backgroundActive: "neutralSoftActive",
      boxShadow: "borderNeutral"
    }
  }
};
const ButtonLoader = () => /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Box_Box_cjs.Box, { "aria-hidden": true, component: "span", display: "inlineBlock", children: [
  /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "span", className: styles_lib_components_Button_Button_css_cjs.loadingDot, children: "." }),
  /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "span", className: styles_lib_components_Button_Button_css_cjs.loadingDot, children: "." }),
  /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "span", className: styles_lib_components_Button_Button_css_cjs.loadingDot, children: "." })
] });
const transparentPaddingX = "small";
const buttonRadius = "standard";
const resolveToneAndVariant = ({
  variant: variantProp,
  tone: toneProp,
  legacy
}) => {
  if (legacy) {
    return {
      variant: variantProp ?? "solid",
      tone: toneProp ?? "formAccent"
    };
  }
  const fallbackVariant = toneProp ? "solid" : "ghost";
  return {
    variant: variantProp ?? fallbackVariant,
    tone: toneProp ?? "neutral"
  };
};
const ButtonOverlays = ({
  variant: variantProp,
  tone: toneProp,
  keyboardFocusable = true,
  forceActive = false,
  radius = buttonRadius
}) => {
  const { variant, tone } = resolveToneAndVariant({
    variant: variantProp,
    tone: toneProp,
    legacy: sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy
  });
  const stylesForVariant = variants[variant][tone];
  const colorContrast = styles_lib_components_Box_BackgroundContext_cjs.useColorContrast();
  const lightness = styles_lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    keyboardFocusable ? /* @__PURE__ */ jsxRuntime.jsx(
      FieldOverlay,
      {
        borderRadius: radius,
        variant: "focus",
        onlyVisibleForKeyboardNavigation: true,
        className: styles_lib_components_Button_Button_css_cjs.focusOverlay
      }
    ) : null,
    /* @__PURE__ */ jsxRuntime.jsx(
      FieldOverlay,
      {
        borderRadius: radius,
        background: stylesForVariant.backgroundHover && typeof stylesForVariant.backgroundHover !== "string" ? colorContrast(stylesForVariant.backgroundHover) : stylesForVariant.backgroundHover,
        className: [
          styles_lib_components_Button_Button_css_cjs.hoverOverlay,
          variant !== "solid" && lightness.lightMode === "dark" ? styles_lib_components_Button_Button_css_cjs.invertedBackgroundsLightMode.hover : null,
          variant !== "solid" && lightness.darkMode === "dark" ? styles_lib_components_Button_Button_css_cjs.invertedBackgroundsDarkMode.hover : null
        ]
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(
      FieldOverlay,
      {
        borderRadius: radius,
        background: stylesForVariant.backgroundActive && typeof stylesForVariant.backgroundActive !== "string" ? colorContrast(stylesForVariant.backgroundActive) : stylesForVariant.backgroundActive,
        className: [
          forceActive ? styles_lib_components_Button_Button_css_cjs.forceActive : void 0,
          styles_lib_components_Button_Button_css_cjs.activeOverlay,
          variant !== "solid" && lightness.lightMode === "dark" ? styles_lib_components_Button_Button_css_cjs.invertedBackgroundsLightMode.active : null,
          variant !== "solid" && lightness.darkMode === "dark" ? styles_lib_components_Button_Button_css_cjs.invertedBackgroundsDarkMode.active : null
        ]
      }
    ),
    stylesForVariant.boxShadow ? /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Box_Box_cjs.Box,
      {
        component: "span",
        boxShadow: stylesForVariant.boxShadow,
        borderRadius: radius,
        position: "absolute",
        inset: 0,
        pointerEvents: "none"
      }
    ) : null
  ] });
};
const ButtonText = ({
  children,
  loading,
  size: sizeProp,
  icon,
  iconPosition = "leading",
  variant: variantProp,
  tone: toneProp,
  bleed
}) => {
  const { variant, tone } = resolveToneAndVariant({
    variant: variantProp,
    tone: toneProp,
    legacy: sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy
  });
  const lightness = styles_lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
  const actionsContext = React.useContext(ActionsContext);
  const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
  const size = sizeProp ?? (actionsContext == null ? void 0 : actionsContext.size) ?? "standard";
  const stylesForVariant = variants[variant][tone];
  const shouldReducePaddingX = size === "small" || variant === "transparent";
  const labelPaddingXForTheme = isLegacyTheme ? "medium" : "gutter";
  const labelPaddingX = shouldReducePaddingX ? transparentPaddingX : labelPaddingXForTheme;
  assert__default.default(
    !icon || icon.props.size === void 0 && icon.props.tone === void 0,
    "Icons cannot set the 'size' or 'tone' prop when passed to a Button component"
  );
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_Box_Box_cjs.Box,
    {
      component: "span",
      position: "relative",
      display: "flex",
      justifyContent: "center",
      flexWrap: "wrap",
      overflow: "hidden",
      pointerEvents: "none",
      paddingX: labelPaddingX,
      className: styles_lib_components_Button_Button_css_cjs.padToMinHeight,
      background: tone === "neutral" && variant !== "solid" ? {
        lightMode: lightness.lightMode === "light" ? "customLight" : "customDark",
        darkMode: lightness.darkMode === "light" ? "customLight" : "customDark"
      } : void 0,
      children: /* @__PURE__ */ jsxRuntime.jsxs(
        styles_lib_components_Accordion_AccordionItem_cjs.Text,
        {
          tone: stylesForVariant.textTone,
          weight: "medium",
          align: "center",
          size,
          children: [
            icon && iconPosition === "leading" ? /* @__PURE__ */ jsxRuntime.jsx(
              styles_lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs.AvoidWidowIcon,
              {
                iconPosition,
                space: "xsmall",
                className: shouldReducePaddingX || bleed ? null : styles_lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("left", "xxsmall"),
                children: icon
              }
            ) : null,
            children,
            loading ? /* @__PURE__ */ jsxRuntime.jsx(ButtonLoader, {}) : null,
            !loading && icon && iconPosition === "trailing" ? /* @__PURE__ */ jsxRuntime.jsx(
              styles_lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs.AvoidWidowIcon,
              {
                iconPosition,
                space: "xsmall",
                className: shouldReducePaddingX || bleed ? null : styles_lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("right", "xxsmall"),
                children: icon
              }
            ) : null
          ]
        }
      )
    }
  );
};
const useButtonStyles = ({
  variant: variantProp,
  size: sizeProp,
  tone: toneProp,
  loading,
  radius = buttonRadius,
  bleed
}) => {
  const { variant, tone } = resolveToneAndVariant({
    variant: variantProp,
    tone: toneProp,
    legacy: sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy
  });
  const actionsContext = React.useContext(ActionsContext);
  const size = sizeProp ?? (actionsContext == null ? void 0 : actionsContext.size) ?? "standard";
  const stylesForVariant = variants[variant][tone];
  const colorConstrast = styles_lib_components_Box_BackgroundContext_cjs.useColorContrast();
  const lightness = styles_lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
  return {
    borderRadius: radius,
    width: "full",
    position: "relative",
    display: "block",
    transform: { active: "touchable" },
    transition: "touchable",
    outline: "none",
    textAlign: "center",
    userSelect: "none",
    cursor: !loading ? "pointer" : void 0,
    background: stylesForVariant.background && typeof stylesForVariant.background !== "string" ? colorConstrast(stylesForVariant.background) : stylesForVariant.background,
    className: [
      variant === "soft" && lightness.lightMode === "dark" ? styles_lib_components_Button_Button_css_cjs.invertedBackgroundsLightMode.soft : null,
      variant === "soft" && lightness.darkMode === "dark" ? styles_lib_components_Button_Button_css_cjs.invertedBackgroundsDarkMode.soft : null,
      styles_lib_components_Button_Button_css_cjs.root,
      size === "small" ? styles_lib_components_private_touchable_virtualTouchable_cjs.virtualTouchable({ xAxis: false }) : null,
      size === "standard" ? styles_lib_components_Button_Button_css_cjs.standard : styles_lib_components_Button_Button_css_cjs.small,
      bleed ? styles_lib_components_Button_Button_css_cjs.bleedVerticallyToCapHeight : null
    ]
  };
};
const ButtonContainer = ({
  children,
  bleed,
  variant = "solid"
}) => bleed && variant === "transparent" ? /* @__PURE__ */ jsxRuntime.jsx(Bleed, { horizontal: transparentPaddingX, children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
const Button = React.forwardRef(
  ({
    onClick,
    children,
    size,
    tone,
    icon,
    iconPosition,
    bleedY,
    bleed,
    variant,
    loading,
    type = "button",
    id,
    tabIndex,
    onKeyUp,
    onKeyDown,
    "aria-haspopup": ariaHasPopup,
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-describedby": ariaDescribedBy,
    "aria-label": ariaLabel,
    data,
    ...restProps
  }, ref) => {
    if (process.env.NODE_ENV !== "production") {
      if (typeof bleedY !== "undefined") {
        console.warn(
          dedent__default.default`
            The "bleedY" prop has been deprecated and will be removed in a future version. Use "bleed" instead.
               <Button
              %c-   bleedY
              %c+   bleed
               %c/>
          `,
          "color: red",
          "color: green",
          "color: inherit"
        );
      }
    }
    return /* @__PURE__ */ jsxRuntime.jsx(ButtonContainer, { bleed, variant, children: /* @__PURE__ */ jsxRuntime.jsxs(
      styles_lib_components_Box_Box_cjs.Box,
      {
        component: "button",
        ref,
        id,
        type,
        tabIndex,
        onKeyUp,
        onKeyDown,
        "aria-haspopup": ariaHasPopup,
        "aria-controls": ariaControls,
        "aria-expanded": ariaExpanded,
        "aria-describedby": ariaDescribedBy,
        "aria-label": ariaLabel,
        onClick,
        disabled: loading,
        ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
        ...useButtonStyles({
          variant,
          tone,
          size,
          bleed: bleed || bleedY,
          loading
        }),
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(ButtonOverlays, { variant, tone }),
          /* @__PURE__ */ jsxRuntime.jsx(
            ButtonText,
            {
              variant,
              tone,
              size,
              loading,
              icon,
              iconPosition,
              bleed,
              children
            }
          )
        ]
      }
    ) });
  }
);
Button.displayName = "Button";
exports.ActionsContext = ActionsContext;
exports.Bleed = Bleed;
exports.Button = Button;
exports.ButtonContainer = ButtonContainer;
exports.ButtonOverlays = ButtonOverlays;
exports.ButtonText = ButtonText;
exports.FieldOverlay = FieldOverlay;
exports.buttonTones = buttonTones;
exports.buttonVariants = buttonVariants;
exports.useButtonStyles = useButtonStyles;
exports.validBleedComponents = validBleedComponents;
