"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);

// src/components/icon/index.ts
var icon_exports = {};
__export(icon_exports, {
  Icon: () => Icon,
  IconButton: () => IconButton
});
module.exports = __toCommonJS(icon_exports);

// src/components/icon/icon.tsx
var import_react = require("react");

// src/components/icon/icon-styles.ts
var import_styled_components = __toESM(require("styled-components"), 1);
var STROKE_WIDTH_BY_SIZE = {
  12: 1.4,
  14: 1.4,
  16: 1.8,
  18: 1.8,
  20: 1.8,
  24: 1.8
};
var DEFAULT_STROKE_WIDTH = 1.8;
function getStrokeWidth(size) {
  return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;
}
var IconWrapper = import_styled_components.default.span`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: ${({ $color }) => $color ?? "currentColor"};
  flex-shrink: 0;
`;

// src/components/icon/icon.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var DEFAULT_SIZE = 16;
var Icon = (0, import_react.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    IconWrapper,
    {
      ref,
      className,
      $color: color,
      "aria-label": ariaLabel,
      role: ariaLabel ? "img" : void 0,
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
    }
  );
});

// src/components/icon-button/icon-button.tsx
var import_react2 = require("react");

// src/components/icon-button/icon-button-styles.ts
var import_styled_components2 = __toESM(require("styled-components"), 1);

// src/tokens/colors.ts
var colors = {
  // White
  white: "#FFFFFF",
  "white-alpha-85": "rgba(255, 255, 255, 0.85)",
  "white-alpha-40": "rgba(255, 255, 255, 0.40)",
  // Brown
  "brown-10": "#FAF9F8",
  "brown-20": "#F5F3F0",
  "brown-30": "#EEEBE5",
  "brown-40": "#E6E2DA",
  "brown-50": "#CFCBC4",
  "brown-60": "#A19E99",
  "brown-70": "#73716D",
  "brown-80": "#5C5A57",
  "brown-90": "#2E2D2C",
  "brown-100": "#171716",
  "brown-alpha-12": "rgba(23, 23, 22, 0.12)",
  "brown-alpha-20": "rgba(23, 23, 22, 0.20)",
  "brown-alpha-55": "rgba(23, 23, 22, 0.55)",
  "brown-alpha-70": "rgba(23, 23, 22, 0.70)",
  "brown-alpha-80": "rgba(23, 23, 22, 0.80)",
  "brown-alpha-90": "rgba(23, 23, 22, 0.90)",
  // Fuchsia
  "fuchsia-50": "#FAF5FF",
  "fuchsia-300": "#F0ABFC",
  "fuchsia-500": "#D946EF",
  "fuchsia-600": "#C026D3",
  "fuchsia-800": "#86198F",
  // Pink
  "pink-50": "#FDF2F8",
  "pink-400": "#F472B6",
  "pink-600": "#DB2777",
  "pink-800": "#9D174D",
  // Violet
  "violet-50": "#F5F3FF",
  "violet-400": "#A78BFA",
  "violet-600": "#7C3AED",
  "violet-800": "#5B21B6",
  // Indigo
  "indigo-50": "#EEF2FF",
  "indigo-400": "#818CF8",
  "indigo-500": "#6366F1",
  "indigo-600": "#4F46E5",
  "indigo-800": "#3730A3",
  // Cyan
  "cyan-50": "#E7FEFF",
  "cyan-300": "#67E8F9",
  "cyan-600": "#0891B2",
  "cyan-900": "#164E63",
  // Teal
  "teal-50": "#EBFDF9",
  "teal-300": "#5EEAD4",
  "teal-600": "#0D9488",
  // Rose
  "rose-400": "#FB7185",
  // Purple
  "purple-400": "#C084FC",
  // Blue
  "blue-50": "#EFF6FF",
  "blue-100": "#DBEAFE",
  "blue-300": "#93C5FD",
  "blue-400": "#60A5FA",
  "blue-600": "#2563EB",
  "blue-800": "#1E40AF",
  // Sky
  "sky-300": "#7DD3FC",
  // Green
  "green-50": "#ECF9F0",
  "green-100": "#D4F1D9",
  "green-400": "#3DC269",
  "green-700": "#277C43",
  "green-800": "#1C5930",
  // Orange
  "orange-50": "#FFF7ED",
  "orange-100": "#FFEDD5",
  "orange-200": "#FED7AA",
  "orange-500": "#F97316",
  "orange-600": "#EA580C",
  // Red
  "red-50": "#FEF2F2",
  "red-100": "#FEE2E2",
  "red-200": "#FECACA",
  "red-400": "#F7776C",
  "red-500": "#EF4444",
  "red-600": "#DC2626"
};

// src/components/icon-button/icon-button-styles.ts
var PADDING = {
  short: {
    small: "4px",
    medium: "6px"
  },
  long: {
    small: "4px 6px",
    medium: "6px 10px"
  }
};
var BORDER_RADIUS = {
  small: 6,
  medium: 10
};
var intentStyles = {
  secondary: ({ $isSelected }) => import_styled_components2.css`
    background: ${$isSelected ? colors["brown-40"] : "transparent"};
    color: ${colors["brown-100"]};

    &:hover:not(:disabled) {
      background: ${$isSelected ? colors["brown-40"] : colors["brown-20"]};
    }

    &:active:not(:disabled) {
      background: ${colors["brown-40"]};
    }

    &:disabled {
      color: ${colors["brown-50"]};
      background: transparent;
    }
  `,
  primary: () => import_styled_components2.css`
    background: ${colors["brown-100"]};
    color: ${colors.white};

    &:hover:not(:disabled) {
      background: ${colors["brown-90"]};
    }

    &:active:not(:disabled) {
      background: ${colors["brown-90"]};
    }

    &:disabled {
      color: ${colors["brown-50"]};
      background: ${colors["brown-20"]};
    }
  `,
  error: () => import_styled_components2.css`
    background: ${colors["red-500"]};
    color: ${colors.white};

    &:hover:not(:disabled) {
      background: ${colors["red-600"]};
    }

    &:active:not(:disabled) {
      background: ${colors["red-600"]};
    }

    &:disabled {
      color: ${colors["red-200"]};
      background: ${colors["red-100"]};
    }
  `
};
var Button = import_styled_components2.default.button`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: ${({ $size, $variant }) => PADDING[$variant][$size]};
  border: none;
  border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;
  cursor: pointer;
  transition: background-color 100ms ease;

  ${({ $intent, $isSelected }) => intentStyles[$intent]({ $isSelected })}

  &:disabled {
    cursor: not-allowed;
  }
`;

// src/components/icon-button/icon-button.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var ICON_SIZE_BY_BUTTON_SIZE = {
  small: 16,
  medium: 20
};
var IconButton = (0, import_react2.forwardRef)(function IconButton2({
  icon,
  size = "small",
  variant = "short",
  intent = "secondary",
  isSelected = false,
  disabled = false,
  onClick,
  className,
  id,
  as,
  "aria-label": ariaLabel,
  ...rest
}, ref) {
  const isNativeButton = as === void 0 || as === "button";
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    Button,
    {
      ref,
      className,
      id,
      as,
      $size: size,
      $variant: variant,
      $intent: intent,
      $isSelected: isSelected,
      disabled,
      onClick: disabled ? void 0 : onClick,
      "aria-label": ariaLabel,
      ...isNativeButton ? { type: "button" } : {},
      ...rest,
      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
    }
  );
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Icon,
  IconButton
});
//# sourceMappingURL=icon.cjs.map