import {
  Loading
} from "./chunk-YNCTWF7N.js";
import {
  UnstyledButton
} from "./chunk-5NUOBJXP.js";
import {
  Tooltip
} from "./chunk-RO7YTILY.js";
import {
  Icon
} from "./chunk-DMPXNHDT.js";
import {
  getFocusOutline
} from "./chunk-HGZGGJQB.js";
import {
  Link
} from "./chunk-SWMGDTQN.js";
import {
  renderTypography
} from "./chunk-KAMBSKAE.js";
import {
  select
} from "./chunk-YMNSXZ5D.js";
import {
  applyTypography
} from "./chunk-2C7DZIDY.js";
import {
  getBackgroundColor,
  isThemeOrColorKey
} from "./chunk-VAH342U2.js";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-W7FAWX6T.js";

// src/components/Button.tsx
import { css, useTheme } from "@emotion/react";
import styled from "@emotion/styled";
import { uniqueId } from "lodash-es";
import {
  forwardRef,
  Fragment,
  useRef
} from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var buttonKinds = [
  "secondary",
  "primary",
  "ghost",
  "transparent",
  "green33",
  "green37",
  "purple55",
  "blue43",
  "blue39",
  "linkLight",
  "danger",
  "warning",
  "tertiary",
  "quaternary",
  "roundSingleChar",
  "roundIcon",
  "gray",
  "grayGradient",
  "gray99",
  "white21",
  "locked",
  "warningLight"
];
function resolveBackgroundColorKey(theme, kind, defaultKey) {
  var _a;
  const defaultBackgroundColorKey = (_a = theme.buttons.kinds[kind]) == null ? void 0 : _a[defaultKey];
  let backgroundColorKey = defaultBackgroundColorKey;
  if (!backgroundColorKey && isThemeOrColorKey(kind)) {
    backgroundColorKey = kind;
  }
  const defaultBackgroundColor = theme.buttons[defaultKey];
  const backgroundColor = getBackgroundColor(
    theme,
    backgroundColorKey,
    defaultBackgroundColor
  );
  return backgroundColor;
}
function resolveProp(prop, kind, defaultKey, theme) {
  var _a;
  return (
    /** props may be unset for a given kind but theme defaults always exist,
     * so this will always resolve a value: */
    prop || ((_a = theme.buttons.kinds[kind]) == null ? void 0 : _a[defaultKey]) || theme.buttons[defaultKey]
  );
}
function resolveProps(props, theme) {
  const isSingleCharRoundButton = Boolean(
    props.text && props.text.length === 1 && !props.icon
  );
  const isRoundIconButton = Boolean(!props.text && props.icon);
  const defaultKind = isSingleCharRoundButton ? "roundSingleChar" : isRoundIconButton ? "roundIcon" : "secondary";
  const _a = props, {
    kind = defaultKind,
    size: sizeProp,
    paddingY: paddingYType = "regular",
    borderRadius,
    typography: typographyProp
  } = _a, rest = __objRest(_a, [
    "kind",
    "size",
    "paddingY",
    "borderRadius",
    "typography"
  ]);
  const size = resolveProp(sizeProp, kind, "defaultSize", theme);
  const defaultPaddingsY = resolveProp(null, kind, "defaultPaddingsY", theme);
  const defaultPaddingY = defaultPaddingsY[size];
  const defaultPaddingsX = resolveProp(null, kind, "defaultPaddingsX", theme);
  const defaultPaddingX = defaultPaddingsX[size];
  const backgroundColor = resolveBackgroundColorKey(
    theme,
    kind,
    "defaultBackgroundColor"
  );
  const borderColor = resolveBackgroundColorKey(
    theme,
    kind,
    "defaultBorderColor"
  );
  const hoverBackgroundColor = resolveBackgroundColorKey(
    theme,
    kind,
    "defaultHoverBackgroundColor"
  );
  const hoverBorderColor = resolveBackgroundColorKey(
    theme,
    kind,
    "defaultHoverBorderColor"
  );
  const activeBackgroundColor = resolveBackgroundColorKey(
    theme,
    kind,
    "defaultActiveBackgroundColor"
  );
  const activeBorderColor = resolveBackgroundColorKey(
    theme,
    kind,
    "defaultActiveBorderColor"
  );
  const typography = {
    type: (typographyProp == null ? void 0 : typographyProp.type) || resolveProp(null, kind, "defaultTypographyType", theme),
    color: (typographyProp == null ? void 0 : typographyProp.color) || resolveProp(null, kind, "defaultColor", theme),
    size
  };
  return __spreadProps(__spreadValues({}, rest), {
    kind,
    size,
    typography,
    paddingY: typeof defaultPaddingY === "number" ? defaultPaddingY : defaultPaddingY[paddingYType],
    paddingX: defaultPaddingX,
    borderRadius: kind === "roundSingleChar" || kind === "roundIcon" ? 999 : resolveProp(borderRadius, kind, "defaultBorderRadius", theme),
    backgroundColor,
    borderColor,
    hoverBackgroundColor,
    hoverBorderColor,
    activeBackgroundColor,
    activeBorderColor
  });
}
var Button = forwardRef((props, ref) => {
  const theme = useTheme();
  const {
    kind,
    typography,
    size,
    paddingX,
    paddingY,
    text,
    to,
    id,
    hash,
    externalLink,
    filename,
    toParams,
    onClick,
    onMouseEnter,
    onMouseDown,
    onMouseUp,
    onMouseLeave,
    onFocus,
    onBlur,
    icon,
    backgroundColor,
    borderColor,
    hoverBackgroundColor,
    hoverBorderColor,
    activeBackgroundColor,
    activeBorderColor,
    iconSide = "left",
    loading = false,
    loadingKind = "primary",
    fullWidth = false,
    spaceBetween = false,
    disabled = false,
    mt = 0,
    ml = 0,
    mb = 0,
    type = "button",
    newTab = false,
    zIndex = void 0,
    tooltipText,
    borderRadius
  } = resolveProps(props, theme);
  const tooltipId = useRef(uniqueId());
  const defaultIconWidth = size === "ExtraSmall" ? 12 : 16;
  let currentIcon = null;
  if (loading) {
    currentIcon = /* @__PURE__ */ jsx(
      ButtonIcon,
      {
        iconSide,
        text,
        typography,
        kind,
        paddingX,
        children: /* @__PURE__ */ jsx(Loading, { size: defaultIconWidth, center: false, kind: loadingKind })
      }
    );
  } else if (icon) {
    currentIcon = /* @__PURE__ */ jsx(
      ButtonIcon,
      {
        iconSide,
        text,
        typography,
        kind,
        paddingX,
        children: /* @__PURE__ */ jsx(
          Icon,
          __spreadProps(__spreadValues({}, icon), {
            width: icon.width || defaultIconWidth,
            square: icon.square === void 0 ? true : icon.square,
            color: icon.color || typography.color
          })
        )
      }
    );
  }
  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      "div",
      __spreadProps(__spreadValues({}, tooltipText ? { "data-tooltip-id": tooltipId.current } : {}), {
        css: {
          display: "flex",
          alignItems: "center",
          justifyContent: spaceBetween ? "space-between" : "center",
          gap: "8px"
        },
        children: [
          iconSide === "left" && currentIcon,
          text && /* @__PURE__ */ jsx(
            "div",
            {
              css: {
                textOverflow: "ellipsis",
                overflow: "hidden"
              },
              children: renderTypography(typography.type, {
                children: text,
                color: typography.color,
                size: typography.size
              })
            }
          ),
          iconSide === "right" && currentIcon
        ]
      })
    ),
    tooltipText ? /* @__PURE__ */ jsx(Tooltip, { id: tooltipId.current, content: tooltipText }) : null
  ] });
  const commonProps = {
    id,
    kind,
    type,
    typography,
    onClick,
    onMouseEnter,
    onMouseDown,
    onMouseUp,
    onMouseLeave,
    onFocus,
    onBlur,
    fullWidth,
    iconSide,
    paddingX,
    paddingY,
    backgroundColor,
    borderColor,
    hoverBackgroundColor,
    hoverBorderColor,
    activeBackgroundColor,
    activeBorderColor,
    isLoading: loading,
    disabled: disabled || loading,
    css: {
      marginTop: mt ? typeof mt === "number" ? `${mt}px` : "auto" : void 0,
      marginLeft: ml ? typeof ml === "number" ? `${ml}px` : "auto" : void 0,
      marginBottom: mb ? typeof mb === "number" ? `${mb}px` : "auto" : void 0
    },
    newTab,
    borderRadius,
    zIndex
  };
  if (to) {
    return /* @__PURE__ */ jsx(
      ButtonLink,
      __spreadProps(__spreadValues({}, commonProps), {
        to,
        params: toParams,
        hash,
        ref,
        children: content
      })
    );
  }
  return externalLink ? /* @__PURE__ */ jsx(
    ButtonHrefLink,
    __spreadProps(__spreadValues({}, commonProps), {
      href: externalLink,
      download: filename,
      target: "_blank",
      ref,
      children: content
    })
  ) : /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, commonProps), { ref, children: content }));
});
Button.displayName = "Button";
var buttonStyle = ({
  paddingX,
  paddingY,
  kind,
  theme,
  disabled,
  isLoading,
  typography,
  fullWidth,
  zIndex,
  iconSide,
  borderColor: borderColorProp,
  borderRadius,
  backgroundColor,
  hoverBackgroundColor,
  hoverBorderColor,
  activeBackgroundColor,
  activeBorderColor
}) => {
  const borderColor = borderColorProp || backgroundColor;
  return css`
    display: inline-flex;
    opacity: ${disabled && !isLoading ? 0.2 : 1};
    transition: opacity 0.2s;
    position: relative;

    ${zIndex && `z-index: ${zIndex};`}

    ${applyTypography(
    theme,
    typography.type,
    typography.size,
    typography.color
  )}

    &:focus-visible {
      outline: ${getFocusOutline({ theme })};
      /* Slightly different offset for buttons so the outline is visible: */
      outline-offset: 0px;
    }

    width: ${fullWidth ? "100%" : "fit-content"};

    & > * {
      width: 100%;
      text-align: center;
      white-space: nowrap;
      background-color: ${backgroundColor};
      box-sizing: content-box;
      border: 1px solid;
      border-color: ${borderColor};
      border-radius: ${typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius};
      padding: ${paddingY}px ${paddingX}px;
      transition:
        background-color 0.2s ease-out,
        border-color 0.2s ease-out;

      &:hover {
        background-color: ${hoverBackgroundColor};
        border-color: ${hoverBorderColor};
      }

      &:active {
        background-color: ${activeBackgroundColor};
        border-color: ${activeBorderColor};
      }
    }
  `;
};
var ButtonIcon = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  ${({ iconSide, paddingX }) => `${iconSide}: ${paddingX}px;`}
`;
var LinkWithoutTypography = forwardRef((props, ref) => {
  return /* @__PURE__ */ jsx(Link, __spreadProps(__spreadValues({}, props), { ref }));
});
var StyledButton = styled(UnstyledButton)`
  ${(props) => buttonStyle(props)}
`;
var ButtonLink = styled(LinkWithoutTypography)`
  ${(props) => buttonStyle(props)}
`;
var ButtonHrefLink = styled.a`
  ${(props) => buttonStyle(props)}
`;
var ButtonSelector = (prepend = "", append = "") => `${prepend}*:is(${select(StyledButton)}, ${select(ButtonLink)}, ${select(
  ButtonHrefLink
)})${append}`;

export {
  buttonKinds,
  Button,
  StyledButton,
  ButtonSelector
};
