"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Button_exports = {};
__export(Button_exports, {
  Base: () => Base,
  ButtonExpand: () => ButtonExpand,
  ButtonUnstyled: () => ButtonUnstyled,
  buttonSizeStyle: () => buttonSizeStyle,
  default: () => Button_default
});
module.exports = __toCommonJS(Button_exports);
var import_react = __toESM(require("react"));
var import_styled_components = __toESM(require("styled-components"));
var import_styled = __toESM(require("../../styled"));
var import_styled_system = require("styled-system");
var import_fontFamily = __toESM(require("../../../styles/styled/fontFamily"));
var import_theme = require("../../../styles/theme");
var import_helpers = require("../../../styles/helpers");
var import_ChevronBottomMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium"));
const IconContainer = import_styled_components.default.div`
  display: inline-block;
  ${(p) => `${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
  padding-top: 0.2em;
`;
const getVariantColors = (p) => ({
  main: {
    outline: `
        border-color: ${p.theme.colors.neutral.c100};
        color: ${p.theme.colors.neutral.c100};
        background-color: transparent;
        &:hover, &:focus {
          background-color: ${(0, import_helpers.rgba)(p.theme.colors.neutral.c100, 0.03)};
        }
        &:active {
          background-color: ${(0, import_helpers.rgba)(p.theme.colors.neutral.c100, 0.05)};
        }
      `,
    filled: `
        color: ${p.theme.colors.neutral.c00};
        background-color: ${p.theme.colors.neutral.c100};
        &:hover, &:focus {
          background-color: ${p.theme.colors.neutral.c90};
        }
      `
  },
  shade: `
      border-color: ${p.theme.colors.neutral.c40};
      color: ${p.theme.colors.neutral.c100};
      &:focus {
        border-color: ${p.theme.colors.primary.c80};
      }

      &:hover, &:focus {
        background-color: ${p.theme.colors.neutral.c20};
      }

      &:active {
        background-color: ${p.theme.colors.neutral.c30};
      }
    `,
  error: {
    outline: `
      border-color: ${p.theme.colors.error.c50};
      color: ${p.theme.colors.error.c50};
      background-color: transparent;
      &:hover {
        background-color: ${(0, import_helpers.rgba)(p.theme.colors.error.c50, 0.02)};
      }
      &:active {
        background-color: ${(0, import_helpers.rgba)(p.theme.colors.error.c50, 0.05)};
      }
    `,
    filled: `
      color: ${p.theme.colors.neutral.c00};
      background-color: ${p.theme.colors.error.c50};
      &:hover {
        background-color: ${p.theme.colors.error.c40};
      }
    `
  },
  neutral: `
    color: ${p.theme.colors.neutral.c100};
    background-color: ${p.theme.colors.neutral.c30};
    &:hover {
      background-color: ${p.theme.colors.neutral.c40};
    }
  `,
  color: {
    outline: `
      border-color: ${p.theme.colors.primary.c80};
      color: ${p.theme.colors.primary.c80};
      background-color: transparent;
      &:hover {
        background-color: ${(0, import_helpers.rgba)(p.theme.colors.primary.c100, 0.02)};
      }
      &:active {
        background-color: ${(0, import_helpers.rgba)(p.theme.colors.primary.c100, 0.05)};
      }
    `,
    filled: `
      color: ${p.theme.colors.neutral.c00};
      background-color: ${p.theme.colors.primary.c80};
      &:hover {
        background-color: ${p.theme.colors.primary.c70};
      }
    `
  },
  disabled: {
    outline: `
        border-color: ${p.theme.colors.neutral.c50};
        color: ${p.theme.colors.neutral.c50};
        background-color: transparent;
        &:focus, &:hover {
          box-shadow: none;
        }
      `,
    filled: `
        color: ${p.theme.colors.neutral.c50};
        background-color: ${p.theme.colors.neutral.c30};
        &:focus, &:hover {
          box-shadow: none;
        }
      `
  },
  default: `
    color: ${p.theme.colors.neutral.c100};
    background-color: transparent;
    &:hover {
      text-decoration: underline;
    }
  `
});
const ButtonUnstyled = import_styled.default.button`
  all: unset;
  cursor: pointer;

  &:disabled {
    cursor: default;
  }
`;
const Base = import_styled.default.button.attrs((p) => ({
  fontFamily: "Inter",
  fontSize: p.fontSize ?? 4
}))`
  background-color: transparent;
  border-color: transparent;
  border-radius: ${(p) => p.theme.space[13]}px;
  border-style: solid;
  border-width: ${(p) => p.outline || p.variant === "shade" ? 1 : 0}px;
  font-weight: 600;
  ${(0, import_styled_system.compose)(import_fontFamily.default, import_styled_system.fontSize, import_styled_system.border)};
  line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  ${(p) => buttonSizeStyle[p.size || "medium"]}
  text-overflow: ellipsis;
  white-space: ${(p) => p.whiteSpace ? p.whiteSpace : "nowrap"};
  max-width: 100%;
  position: relative;
  cursor: ${(p) => p.disabled ? "default" : "pointer"};
  &:active {
    box-shadow: 0 0 0 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
  }
  &:focus, &:hover {
    box-shadow: 0 0 0 2px ${(p) => (0, import_helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
  }

  ${(p) => {
  const variants = getVariantColors(p);
  if (p.disabled) {
    return p.outline || p.variant === "shade" ? variants.disabled.outline : variants.disabled.filled;
  }
  const variant = p.variant ?? "default";
  switch (variant) {
    case "main":
      return p.outline ? variants.main.outline : variants.main.filled;
    case "shade":
      return variants.shade;
    case "error":
      return p.outline ? variants.error.outline : variants.error.filled;
    case "color":
      return p.outline ? variants.color.outline : variants.color.filled;
    case "neutral":
      return variants.neutral;
    case "default":
    default:
      return variants.default;
  }
}}
  ${(p) => p.iconButton ? import_styled_components.css`
          width: ${p.theme.space[12]}px;
          padding: 0;
          ${IconContainer} {
            margin: 0;
          }
        ` : ""}
  ${(p) => p.theme.transition(["background-color", "color", "border-color", "box-shadow"], "0.2s")}
`;
const ContentContainer = import_styled_components.default.div``;
const Button = ({ Icon, iconPosition = "right", iconSize = 16, children, onClick, ...props }, ref) => {
  const iconNodeSize = iconSize || import_theme.fontSizes[props.fontSize ?? 4];
  const IconNode = (0, import_react.useMemo)(() => Icon && /* @__PURE__ */ import_react.default.createElement(Icon, { size: iconNodeSize }), [iconNodeSize, Icon]);
  return /* @__PURE__ */ import_react.default.createElement(Base, { ...props, ref, iconButton: !(Icon == null) && !children, onClick }, iconPosition === "right" ? /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, children) : null, IconNode && /* @__PURE__ */ import_react.default.createElement(IconContainer, { iconPosition }, IconNode), iconPosition === "left" ? /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, children) : null);
};
const ButtonWithRef = import_react.default.forwardRef(Button);
const StyledButtonExpand = (0, import_styled_components.default)(ButtonWithRef).attrs((props) => ({
  Icon: props.Icon != null || import_ChevronBottomMedium.default,
  iconPosition: props.iconPosition || "right"
}))`
  ${IconContainer} {
    transition: transform 0.25s;
    ${(p) => p.expanded ? "transform: rotate(180deg)" : ""}
  }
`;
function ButtonExpand({ onToggle, onClick, ...props }, ref) {
  const [expanded, setExpanded] = (0, import_react.useState)(false);
  return /* @__PURE__ */ import_react.default.createElement(
    StyledButtonExpand,
    {
      ...props,
      ref,
      expanded,
      onClick: (event) => {
        setExpanded((expanded2) => !expanded2);
        onToggle != null && onToggle(!expanded);
        onClick != null && onClick(event);
      }
    }
  );
}
const buttonSizeStyle = {
  small: {
    padding: "0 20px",
    height: "32px"
  },
  medium: {
    padding: "0 24px",
    height: "40px"
  },
  large: {
    padding: "0 28px",
    height: "48px"
  }
};
Button.Unstyled = ButtonUnstyled;
Button.Expand = import_react.default.forwardRef(ButtonExpand);
ButtonWithRef.Unstyled = Button.Unstyled;
ButtonWithRef.Expand = Button.Expand;
var Button_default = ButtonWithRef;
//# sourceMappingURL=index.js.map
