@won-ui/core/dist/index.mjs

학습을 위한 ui library 입니다.

// src/Button/Button.style.ts
import { css } from "@emotion/react";
import { wonColor } from "@won-ui/styles";
var getVariantStyle = (color, variant) => {
  const variants = {
    filled: css`
      border: 2px solid transparent;
      box-shadow: 0px 3px 3px ${color[20]};
      background-color: ${color[60]};
      color: ${color[10]};
    `,
    light: css`
      border: 2px solid transparent;
      box-shadow: 0px 3px 3px ${color[20]};
      background-color: ${color[10]};
      color: ${color[60]};
    `,
    outline: css`
      border: 1px solid ${color[60]};
      box-shadow: 0px 3px 3px ${color[20]};
      background-color: transparent;
      color: ${color[60]};
    `,
    borderless: css`
      border: 2px solid transparent;
      background-color: transparent;
      box-shadow: none;
      color: ${color[60]};
    `
  };
  return variants[variant];
};
var buttonStyle = (theme, variant, disalbed) => {
  const color = wonColor[theme];
  const variantStyle = getVariantStyle(color, variant);
  return [
    variantStyle,
    css`
      box-sizing: border-box;
      font-family: Charcoal, sans-serif;
      outline: 0;
      padding: 0 15px;
      height: 30px;
      border-radius: 6px;
      font-weight: bold;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
      letter-spacing: 0.5px;
      transition: transform 0.1s ease 0s;

      &:active {
        transform: translateY(3px);
      }

      &:disabled {
        border: none;
        box-shadow: none;
        transform: none;
        pointer-events: none;
        color: ${color[10]};
        background-color: ${color[20]};
      }
    `
  ];
};

// src/Button/Button.tsx
import { jsxDEV } from "@emotion/react/jsx-dev-runtime";
function Button({
  className,
  type = "button",
  disabled = false,
  color = "blue",
  children,
  variant = "filled",
  ...restProps
}) {
  return /* @__PURE__ */ jsxDEV("button", {
    className,
    css: buttonStyle(color, variant, disabled),
    disabled,
    type,
    ...restProps,
    children
  }, void 0, false, {
    fileName: "src/Button/Button.tsx",
    lineNumber: 23,
    columnNumber: 5
  }, this);
}
Button.displayName = "WON-Button";

// src/Checkbox/Checkbox.tsx
import { useUniqueId } from "@won-ui/hooks";

// ../../node_modules/phosphor-react/dist/lib/index.esm.js
import { createContext } from "react";
var IconContext = /* @__PURE__ */ createContext({
  color: "currentColor",
  size: "1em",
  weight: "regular",
  mirrored: false
});
var renderPathForWeight = function renderPathForWeight2(weight, color, pathsByWeight6) {
  var path = pathsByWeight6.get(weight);
  if (!!path)
    return path(color);
  console.error('Unsupported icon weight. Choose from "thin", "light", "regular", "bold", "fill", or "duotone".');
  return null;
};

// ../../node_modules/phosphor-react/dist/lib/IconBase.esm.js
import React, { forwardRef, useContext } from "react";

// ../../node_modules/phosphor-react/dist/_virtual/_rollupPluginBabelHelpers.js
function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null)
    return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;
  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0)
      continue;
    target[key] = source[key];
  }
  return target;
}

// ../../node_modules/phosphor-react/dist/lib/IconBase.esm.js
var IconBase = /* @__PURE__ */ forwardRef(function(props, ref) {
  var alt = props.alt, color = props.color, size = props.size, weight = props.weight, mirrored = props.mirrored, children = props.children, renderPath11 = props.renderPath, restProps = _objectWithoutPropertiesLoose(props, ["alt", "color", "size", "weight", "mirrored", "children", "renderPath"]);
  var _useContext = useContext(IconContext), _useContext$color = _useContext.color, contextColor = _useContext$color === void 0 ? "currentColor" : _useContext$color, contextSize = _useContext.size, _useContext$weight = _useContext.weight, contextWeight = _useContext$weight === void 0 ? "regular" : _useContext$weight, _useContext$mirrored = _useContext.mirrored, contextMirrored = _useContext$mirrored === void 0 ? false : _useContext$mirrored, restContext = _objectWithoutPropertiesLoose(_useContext, ["color", "size", "weight", "mirrored"]);
  return React.createElement("svg", Object.assign({
    ref,
    xmlns: "http://www.w3.org/2000/svg",
    width: size != null ? size : contextSize,
    height: size != null ? size : contextSize,
    fill: color != null ? color : contextColor,
    viewBox: "0 0 256 256",
    transform: mirrored || contextMirrored ? "scale(-1, 1)" : void 0
  }, restContext, restProps), !!alt && React.createElement("title", null, alt), children, React.createElement("rect", {
    width: "256",
    height: "256",
    fill: "none"
  }), renderPath11(weight != null ? weight : contextWeight, color != null ? color : contextColor));
});
IconBase.displayName = "IconBase";
var IconBase_esm_default = IconBase;

// ../../node_modules/phosphor-react/dist/icons/CaretLeft.esm.js
import React2, { forwardRef as forwardRef2 } from "react";
var pathsByWeight = /* @__PURE__ */ new Map();
pathsByWeight.set("bold", function(color) {
  return React2.createElement(React2.Fragment, null, React2.createElement("polyline", {
    points: "160 208 80 128 160 48",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "24"
  }));
});
pathsByWeight.set("duotone", function(color) {
  return React2.createElement(React2.Fragment, null, React2.createElement("polygon", {
    points: "160 208 80 128 160 48 160 208",
    opacity: "0.2"
  }), React2.createElement("polygon", {
    points: "160 208 80 128 160 48 160 208",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "16"
  }));
});
pathsByWeight.set("fill", function() {
  return React2.createElement(React2.Fragment, null, React2.createElement("path", {
    d: "M163.1,40.6a8.4,8.4,0,0,0-8.8,1.7l-80,80a8.1,8.1,0,0,0,0,11.4l80,80A8.3,8.3,0,0,0,160,216a8.5,8.5,0,0,0,3.1-.6A8,8,0,0,0,168,208V48A8,8,0,0,0,163.1,40.6Z"
  }));
});
pathsByWeight.set("light", function(color) {
  return React2.createElement(React2.Fragment, null, React2.createElement("polyline", {
    points: "160 208 80 128 160 48",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "12"
  }));
});
pathsByWeight.set("thin", function(color) {
  return React2.createElement(React2.Fragment, null, React2.createElement("polyline", {
    points: "160 208 80 128 160 48",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "8"
  }));
});
pathsByWeight.set("regular", function(color) {
  return React2.createElement(React2.Fragment, null, React2.createElement("polyline", {
    points: "160 208 80 128 160 48",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "16"
  }));
});
var renderPath = function renderPath2(weight, color) {
  return renderPathForWeight(weight, color, pathsByWeight);
};
var CaretLeft = /* @__PURE__ */ forwardRef2(function(props, ref) {
  return React2.createElement(IconBase_esm_default, Object.assign({
    ref
  }, props, {
    renderPath
  }));
});
CaretLeft.displayName = "CaretLeft";
var CaretLeft_esm_default = CaretLeft;

// ../../node_modules/phosphor-react/dist/icons/CaretRight.esm.js
import React3, { forwardRef as forwardRef3 } from "react";
var pathsByWeight2 = /* @__PURE__ */ new Map();
pathsByWeight2.set("bold", function(color) {
  return React3.createElement(React3.Fragment, null, React3.createElement("polyline", {
    points: "96 48 176 128 96 208",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "24"
  }));
});
pathsByWeight2.set("duotone", function(color) {
  return React3.createElement(React3.Fragment, null, React3.createElement("polygon", {
    points: "96 48 176 128 96 208 96 48",
    opacity: "0.2"
  }), React3.createElement("polygon", {
    points: "96 48 176 128 96 208 96 48",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "16"
  }));
});
pathsByWeight2.set("fill", function() {
  return React3.createElement(React3.Fragment, null, React3.createElement("path", {
    d: "M181.7,122.3l-80-80a8.4,8.4,0,0,0-8.8-1.7A8,8,0,0,0,88,48V208a8,8,0,0,0,4.9,7.4,8.5,8.5,0,0,0,3.1.6,8.3,8.3,0,0,0,5.7-2.3l80-80A8.1,8.1,0,0,0,181.7,122.3Z"
  }));
});
pathsByWeight2.set("light", function(color) {
  return React3.createElement(React3.Fragment, null, React3.createElement("polyline", {
    points: "96 48 176 128 96 208",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "12"
  }));
});
pathsByWeight2.set("thin", function(color) {
  return React3.createElement(React3.Fragment, null, React3.createElement("polyline", {
    points: "96 48 176 128 96 208",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "8"
  }));
});
pathsByWeight2.set("regular", function(color) {
  return React3.createElement(React3.Fragment, null, React3.createElement("polyline", {
    points: "96 48 176 128 96 208",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "16"
  }));
});
var renderPath3 = function renderPath4(weight, color) {
  return renderPathForWeight(weight, color, pathsByWeight2);
};
var CaretRight = /* @__PURE__ */ forwardRef3(function(props, ref) {
  return React3.createElement(IconBase_esm_default, Object.assign({
    ref
  }, props, {
    renderPath: renderPath3
  }));
});
CaretRight.displayName = "CaretRight";
var CaretRight_esm_default = CaretRight;

// ../../node_modules/phosphor-react/dist/icons/Check.esm.js
import React4, { forwardRef as forwardRef4 } from "react";
var pathsByWeight3 = /* @__PURE__ */ new Map();
pathsByWeight3.set("bold", function(color) {
  return React4.createElement(React4.Fragment, null, React4.createElement("polyline", {
    points: "216 72 104 184 48 128",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "24"
  }));
});
pathsByWeight3.set("duotone", function(color) {
  return React4.createElement(React4.Fragment, null, React4.createElement("polyline", {
    points: "216 72 104 184 48 128",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "16"
  }));
});
pathsByWeight3.set("fill", function() {
  return React4.createElement(React4.Fragment, null, React4.createElement("path", {
    d: "M104,192a8.5,8.5,0,0,1-5.7-2.3l-56-56a8.1,8.1,0,0,1,11.4-11.4L104,172.7,210.3,66.3a8.1,8.1,0,0,1,11.4,11.4l-112,112A8.5,8.5,0,0,1,104,192Z"
  }));
});
pathsByWeight3.set("light", function(color) {
  return React4.createElement(React4.Fragment, null, React4.createElement("polyline", {
    points: "216 72 104 184 48 128",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "12"
  }));
});
pathsByWeight3.set("thin", function(color) {
  return React4.createElement(React4.Fragment, null, React4.createElement("polyline", {
    points: "216 72 104 184 48 128",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "8"
  }));
});
pathsByWeight3.set("regular", function(color) {
  return React4.createElement(React4.Fragment, null, React4.createElement("polyline", {
    points: "216 72 104 184 48 128",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "16"
  }));
});
var renderPath5 = function renderPath6(weight, color) {
  return renderPathForWeight(weight, color, pathsByWeight3);
};
var Check = /* @__PURE__ */ forwardRef4(function(props, ref) {
  return React4.createElement(IconBase_esm_default, Object.assign({
    ref
  }, props, {
    renderPath: renderPath5
  }));
});
Check.displayName = "Check";
var Check_esm_default = Check;

// ../../node_modules/phosphor-react/dist/icons/DotsThree.esm.js
import React5, { forwardRef as forwardRef5 } from "react";
var pathsByWeight4 = /* @__PURE__ */ new Map();
pathsByWeight4.set("bold", function() {
  return React5.createElement(React5.Fragment, null, React5.createElement("circle", {
    cx: "128",
    cy: "128",
    r: "16"
  }), React5.createElement("circle", {
    cx: "64",
    cy: "128",
    r: "16"
  }), React5.createElement("circle", {
    cx: "192",
    cy: "128",
    r: "16"
  }));
});
pathsByWeight4.set("duotone", function() {
  return React5.createElement(React5.Fragment, null, React5.createElement("circle", {
    cx: "128",
    cy: "128",
    r: "12"
  }), React5.createElement("circle", {
    cx: "192",
    cy: "128",
    r: "12"
  }), React5.createElement("circle", {
    cx: "64",
    cy: "128",
    r: "12"
  }));
});
pathsByWeight4.set("fill", function() {
  return React5.createElement(React5.Fragment, null, React5.createElement("path", {
    d: "M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm52-12a12,12,0,1,0,12,12A12,12,0,0,0,192,116ZM64,116a12,12,0,1,0,12,12A12,12,0,0,0,64,116Z"
  }));
});
pathsByWeight4.set("light", function() {
  return React5.createElement(React5.Fragment, null, React5.createElement("circle", {
    cx: "128",
    cy: "128",
    r: "10"
  }), React5.createElement("circle", {
    cx: "64",
    cy: "128",
    r: "10"
  }), React5.createElement("circle", {
    cx: "192",
    cy: "128",
    r: "10"
  }));
});
pathsByWeight4.set("thin", function() {
  return React5.createElement(React5.Fragment, null, React5.createElement("circle", {
    cx: "128",
    cy: "128",
    r: "8"
  }), React5.createElement("circle", {
    cx: "64",
    cy: "128",
    r: "8"
  }), React5.createElement("circle", {
    cx: "192",
    cy: "128",
    r: "8"
  }));
});
pathsByWeight4.set("regular", function() {
  return React5.createElement(React5.Fragment, null, React5.createElement("circle", {
    cx: "128",
    cy: "128",
    r: "12"
  }), React5.createElement("circle", {
    cx: "192",
    cy: "128",
    r: "12"
  }), React5.createElement("circle", {
    cx: "64",
    cy: "128",
    r: "12"
  }));
});
var renderPath7 = function renderPath8(weight, color) {
  return renderPathForWeight(weight, color, pathsByWeight4);
};
var DotsThree = /* @__PURE__ */ forwardRef5(function(props, ref) {
  return React5.createElement(IconBase_esm_default, Object.assign({
    ref
  }, props, {
    renderPath: renderPath7
  }));
});
DotsThree.displayName = "DotsThree";
var DotsThree_esm_default = DotsThree;

// ../../node_modules/phosphor-react/dist/icons/X.esm.js
import React6, { forwardRef as forwardRef6 } from "react";
var pathsByWeight5 = /* @__PURE__ */ new Map();
pathsByWeight5.set("bold", function(color) {
  return React6.createElement(React6.Fragment, null, React6.createElement("line", {
    x1: "200",
    y1: "56",
    x2: "56",
    y2: "200",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "24"
  }), React6.createElement("line", {
    x1: "200",
    y1: "200",
    x2: "56",
    y2: "56",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "24"
  }));
});
pathsByWeight5.set("duotone", function(color) {
  return React6.createElement(React6.Fragment, null, React6.createElement("line", {
    x1: "200",
    y1: "56",
    x2: "56",
    y2: "200",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "16"
  }), React6.createElement("line", {
    x1: "200",
    y1: "200",
    x2: "56",
    y2: "56",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "16"
  }));
});
pathsByWeight5.set("fill", function() {
  return React6.createElement(React6.Fragment, null, React6.createElement("path", {
    d: "M139.3,128l66.4-66.3a8.1,8.1,0,0,0-11.4-11.4L128,116.7,61.7,50.3A8.1,8.1,0,0,0,50.3,61.7L116.7,128,50.3,194.3a8.1,8.1,0,0,0,0,11.4,8.2,8.2,0,0,0,11.4,0L128,139.3l66.3,66.4a8.2,8.2,0,0,0,11.4,0,8.1,8.1,0,0,0,0-11.4Z"
  }));
});
pathsByWeight5.set("light", function(color) {
  return React6.createElement(React6.Fragment, null, React6.createElement("line", {
    x1: "200",
    y1: "56",
    x2: "56",
    y2: "200",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "12"
  }), React6.createElement("line", {
    x1: "200",
    y1: "200",
    x2: "56",
    y2: "56",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "12"
  }));
});
pathsByWeight5.set("thin", function(color) {
  return React6.createElement(React6.Fragment, null, React6.createElement("line", {
    x1: "200",
    y1: "56",
    x2: "56",
    y2: "200",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "8"
  }), React6.createElement("line", {
    x1: "200",
    y1: "200",
    x2: "56",
    y2: "56",
    fill: "none",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "8"
  }));
});
pathsByWeight5.set("regular", function(color) {
  return React6.createElement(React6.Fragment, null, React6.createElement("line", {
    x1: "200",
    y1: "56",
    x2: "56",
    y2: "200",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "16"
  }), React6.createElement("line", {
    x1: "200",
    y1: "200",
    x2: "56",
    y2: "56",
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "16"
  }));
});
var renderPath9 = function renderPath10(weight, color) {
  return renderPathForWeight(weight, color, pathsByWeight5);
};
var X = /* @__PURE__ */ forwardRef6(function(props, ref) {
  return React6.createElement(IconBase_esm_default, Object.assign({
    ref
  }, props, {
    renderPath: renderPath9
  }));
});
X.displayName = "X";
var X_esm_default = X;

// src/Stack/Stack.style.ts
import { css as css2 } from "@emotion/react";
var stackStyle = ({
  direction,
  align,
  justify
}) => css2`
  display: flex;
  flex-direction: ${direction};
  align-items: ${align};
  justify-content: ${justify};
  position: relative;
`;

// src/Stack/Stack.tsx
import { jsxDEV as jsxDEV2 } from "@emotion/react/jsx-dev-runtime";
function Stack({
  className,
  direction = "row",
  align = "center",
  justify = "center",
  children,
  ...restProps
}) {
  return /* @__PURE__ */ jsxDEV2("div", {
    css: stackStyle({ direction, align, justify }),
    className,
    ...restProps,
    children
  }, void 0, false, {
    fileName: "src/Stack/Stack.tsx",
    lineNumber: 21,
    columnNumber: 5
  }, this);
}
Stack.displayName = "WON-Stack";

// src/Checkbox/Checkbox.style.ts
import { css as css3 } from "@emotion/react";
import { black, wonColor as wonColor2 } from "@won-ui/styles";
var checkboxStyle = (theme) => {
  let color = {
    ...black,
    10: "white"
  };
  if (theme)
    color = wonColor2[theme];
  return {
    checkboxWrapper: css3`
      position: relative;
      width: 16px;
      height: 16px;
      .won-check-icon {
        color: ${color[10]};
        position: absolute;
        pointer-events: none;
      }
    `,
    checkboxInput: css3`
      position: absolute;
      cursor: pointer;
      appearance: none;
      background-color: ${color[10]};
      border: 1px solid ${color[30]};
      padding: 0px;
      margin: 0px;
      width: inherit;
      height: inherit;
      border-radius: 4px;
      :checked {
        background-color: ${color[60]};
        border: 1px solid transparent;
      }
    `,
    labelWrapper: css3`
      padding-left: 15px;
    `,
    label: css3`
      font-family: Charcoal, sans-serif;
      display: inline-flex;
      position: relative;
      cursor: pointer;
      font-size: 16px;
      user-select: none;
      align-items: center;
    `
  };
};

// src/Checkbox/Checkbox.tsx
import { jsxDEV as jsxDEV3 } from "@emotion/react/jsx-dev-runtime";
function Checkbox({
  className,
  id,
  label,
  disabled = false,
  color,
  ...restProps
}) {
  const uniqueId = useUniqueId(id);
  return /* @__PURE__ */ jsxDEV3(Stack, {
    direction: "row",
    justify: "flex-start",
    className,
    ...restProps,
    children: [
      /* @__PURE__ */ jsxDEV3("span", {
        css: checkboxStyle(color).checkboxWrapper,
        children: [
          /* @__PURE__ */ jsxDEV3("input", {
            type: "checkbox",
            role: "checkbox",
            id: uniqueId,
            css: checkboxStyle(color).checkboxInput
          }, void 0, false, {
            fileName: "src/Checkbox/Checkbox.tsx",
            lineNumber: 28,
            columnNumber: 9
          }, this),
          /* @__PURE__ */ jsxDEV3(Check_esm_default, {
            className: "won-check-icon",
            size: 16,
            weight: "bold"
          }, void 0, false, {
            fileName: "src/Checkbox/Checkbox.tsx",
            lineNumber: 34,
            columnNumber: 9
          }, this)
        ]
      }, void 0, true, {
        fileName: "src/Checkbox/Checkbox.tsx",
        lineNumber: 27,
        columnNumber: 7
      }, this),
      /* @__PURE__ */ jsxDEV3("div", {
        css: checkboxStyle(color).labelWrapper,
        children: /* @__PURE__ */ jsxDEV3("label", {
          css: checkboxStyle(color).label,
          htmlFor: uniqueId,
          children: label
        }, void 0, false, {
          fileName: "src/Checkbox/Checkbox.tsx",
          lineNumber: 37,
          columnNumber: 9
        }, this)
      }, void 0, false, {
        fileName: "src/Checkbox/Checkbox.tsx",
        lineNumber: 36,
        columnNumber: 7
      }, this)
    ]
  }, void 0, true, {
    fileName: "src/Checkbox/Checkbox.tsx",
    lineNumber: 26,
    columnNumber: 5
  }, this);
}
Checkbox.displayName = "WON-Checkbox";

// src/Heading/Heading.style.ts
import { css as css4 } from "@emotion/react";
var heading = css4`
  font-family: Charcoal, sans-serif;
  margin: 0;
`;

// src/Heading/Heading.tsx
import { jsxDEV as jsxDEV4 } from "@emotion/react/jsx-dev-runtime";
function Heading({ level = 1, children, ...restProps }) {
  const HeadingComponent = `h${level}`;
  return /* @__PURE__ */ jsxDEV4(HeadingComponent, {
    css: heading,
    ...restProps,
    children
  }, void 0, false, {
    fileName: "src/Heading/Heading.tsx",
    lineNumber: 11,
    columnNumber: 5
  }, this);
}
Heading.displayName = "WON-Heading";

// src/IconActivator/IconActivator.style.ts
import { css as css5 } from "@emotion/react";
import { wonColor as wonColor3 } from "@won-ui/styles";
var IconActivatorStyle = (theme, hasBorder) => {
  const color = wonColor3[theme];
  return css5`
    appearance: none;
    border: 1px solid ${hasBorder ? color[20] : "transparent"};
    box-sizing: border-box;
    height: 25px;
    width: 25px;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.1s ease-out;
    color: ${color[40]};
    outline: 0;
    background-color: transparent;

    &:hover {
      color: ${color[40]};
      background-color: ${color[10]};
    }

    &:focus {
      color: ${color[60]};
      border-color: ${color[40]};
      background-color: ${color[20]}
    }
  `;
};

// src/IconActivator/IconActivator.tsx
import { jsxDEV as jsxDEV5 } from "@emotion/react/jsx-dev-runtime";
function IconActivator({
  className,
  style,
  color = "black",
  children,
  hasBorder = true,
  ...restProps
}) {
  return /* @__PURE__ */ jsxDEV5("button", {
    className,
    css: IconActivatorStyle(color, hasBorder),
    type: "button",
    ...restProps,
    children
  }, void 0, false, {
    fileName: "src/IconActivator/IconActivator.tsx",
    lineNumber: 21,
    columnNumber: 5
  }, this);
}
IconActivator.displayName = "WON-IconActivator";

// src/Input/Input.style.ts
import { css as css6 } from "@emotion/react";
import { black as black2, blue, red } from "@won-ui/styles";
var inputContainer = css6`
  position: relative;
`;
var input = css6`
  font-family: Charcoal, sans-serif;
  font-size: 14px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid ${black2[30]};
  transition: border-color 0.1 ease, box-shadow 0.1 ease;

  &:focus {
    outline: none;
    border-color: ${blue[60]};
    box-shadow: 0 0 3px ${blue[10]};
  }

  &:disabled {
    border: 1px solid lightgray;
  }
`;
var errorInput = css6`
  border-color: ${red[50]};
  box-shadow: 0 0 3px ${red[10]};
`;
var withIcon = css6`
  padding-left: 30px;
`;
var iconStyle = css6`
  pointer-events: none;
  position: absolute;
  color: ${black2[60]};
  height: 36px;
  width: 30px;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
`;

// src/Input/Input.tsx
import { jsxDEV as jsxDEV6 } from "@emotion/react/jsx-dev-runtime";
function Input({ className, style, error = false, icon, ...restProps }) {
  return /* @__PURE__ */ jsxDEV6("div", {
    className,
    style,
    css: inputContainer,
    children: [
      icon && /* @__PURE__ */ jsxDEV6("div", {
        css: iconStyle,
        children: icon
      }, void 0, false, {
        fileName: "src/Input/Input.tsx",
        lineNumber: 13,
        columnNumber: 16
      }, this),
      /* @__PURE__ */ jsxDEV6("input", {
        css: [input, error && errorInput, icon && withIcon],
        ...restProps
      }, void 0, false, {
        fileName: "src/Input/Input.tsx",
        lineNumber: 14,
        columnNumber: 7
      }, this)
    ]
  }, void 0, true, {
    fileName: "src/Input/Input.tsx",
    lineNumber: 12,
    columnNumber: 5
  }, this);
}
Input.displayName = "WON-Input";

// src/Text/Text.style.ts
import { css as css7 } from "@emotion/react";
import { wonColor as wonColor4 } from "@won-ui/styles";
var text = css7`
  font-family: Charcoal, sans-serif;
`;
var fontColor = (theme) => css7`
  color: ${wonColor4[theme][60]};
`;
var fontSizes = {
  xs: css7`
    font-size: 12px;
  `,
  sm: css7`
    font-size: 14px;
  `,
  md: css7`
    font-size: 16px;
  `,
  lg: css7`
    font-size: 18px;
  `,
  xl: css7`
    font-size: 20px;
  `
};

// src/Text/Text.tsx
import { jsxDEV as jsxDEV7 } from "@emotion/react/jsx-dev-runtime";
function Text({
  className,
  as: Component = "p",
  size = "md",
  children,
  color = "black",
  ...restProps
}) {
  return /* @__PURE__ */ jsxDEV7(Component, {
    className,
    css: [text, fontSizes[size], fontColor(color)],
    ...restProps,
    children
  }, void 0, false, {
    fileName: "src/Text/Text.tsx",
    lineNumber: 22,
    columnNumber: 5
  }, this);
}
Text.displayName = "WON-Text";

// src/InputBox/InputBox.style.ts
import { css as css8 } from "@emotion/react";
import { black as black3, red as red2 } from "@won-ui/styles";
var inputBox = {
  root: css8`
    font-family: Charcoal, sans-serif;
  `,
  label: css8`
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
    font-weight: bold;
    color: ${black3[30]};
  `,
  required: css8`
    color: ${red2[60]};
  `,
  helperText: css8`
    margin: 3px 0;
    font-size: 14px;
    color: ${black3[30]};
  `,
  errorText: css8`
    color: ${red2[50]};
    font-size: 13px;
    margin: 3px 0;
  `
};

// src/InputBox/InputBox.tsx
import { jsxDEV as jsxDEV8 } from "@emotion/react/jsx-dev-runtime";
function InputBox({
  className,
  id,
  label,
  helperText,
  errorText,
  required = false,
  children,
  ...restProps
}) {
  return /* @__PURE__ */ jsxDEV8("div", {
    className,
    css: inputBox.root,
    ...restProps,
    children: [
      /* @__PURE__ */ jsxDEV8("label", {
        css: inputBox.label,
        htmlFor: id,
        children: [
          label,
          required && /* @__PURE__ */ jsxDEV8(Text, {
            as: "span",
            css: inputBox.required,
            children: "*"
          }, void 0, false, {
            fileName: "src/InputBox/InputBox.tsx",
            lineNumber: 34,
            columnNumber: 11
          }, this)
        ]
      }, void 0, true, {
        fileName: "src/InputBox/InputBox.tsx",
        lineNumber: 31,
        columnNumber: 7
      }, this),
      children,
      helperText && /* @__PURE__ */ jsxDEV8(Text, {
        css: inputBox.helperText,
        children: helperText
      }, void 0, false, {
        fileName: "src/InputBox/InputBox.tsx",
        lineNumber: 40,
        columnNumber: 22
      }, this),
      errorText && /* @__PURE__ */ jsxDEV8(Text, {
        css: inputBox.errorText,
        children: errorText
      }, void 0, false, {
        fileName: "src/InputBox/InputBox.tsx",
        lineNumber: 41,
        columnNumber: 21
      }, this)
    ]
  }, void 0, true, {
    fileName: "src/InputBox/InputBox.tsx",
    lineNumber: 30,
    columnNumber: 5
  }, this);
}
InputBox.displayName = "WON-InputBox";

// src/Modal/Modal.tsx
import { useClickOutside } from "@won-ui/hooks";
import { createRef } from "react";

// src/Overlay/Overlay.style.ts
import { css as css9 } from "@emotion/react";
var overlayStyle = (blur) => css9`
  backdrop-filter: blur(${blur}px);
  position: absolute;
  inset: 0px;
`;
var baseStyle = (opacity) => css9`
  opacity: ${opacity};
  position: absolute;
  background-color: #000;
  inset: 0px;
`;

// src/Overlay/Overlay.tsx
import { jsxDEV as jsxDEV9 } from "@emotion/react/jsx-dev-runtime";
function Overlay({ opacity = 0.6, blur = 0, ...restProps }) {
  const base = ({ opacity: opacity2 = 0.6, ...restProps2 }) => {
    return /* @__PURE__ */ jsxDEV9("div", {
      css: baseStyle(opacity2),
      ...restProps2
    }, void 0, false, {
      fileName: "src/Overlay/Overlay.tsx",
      lineNumber: 11,
      columnNumber: 12
    }, this);
  };
  if (blur !== 0) {
    return /* @__PURE__ */ jsxDEV9("div", {
      css: overlayStyle(blur),
      ...restProps,
      children: base({ opacity })
    }, void 0, false, {
      fileName: "src/Overlay/Overlay.tsx",
      lineNumber: 16,
      columnNumber: 7
    }, this);
  }
  return base({ opacity, ...restProps });
}
Overlay.displayName = "WON-Overlay";

// src/Modal/Modal.style.ts
import { css as css10 } from "@emotion/react";
var wrapperStyle = css10`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
`;
var modalStyle = (options) => css10`
  position: relative;
  padding: 16px;
  width: ${options == null ? void 0 : options.width}px;
  background-color: #fff;
  z-index: 1;
  border-radius: 8px;
`;
var titleStyle = css10`
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  margin-bottom: 10px;
`;
var bodyStyle = css10`
  padding-top: 10px;
  box-sizing: border-box;
`;

// src/Modal/Modal.tsx
import { jsxDEV as jsxDEV10 } from "@emotion/react/jsx-dev-runtime";
function Modal({
  title,
  isOpen,
  onClose,
  className,
  modalOptions = { width: 500 },
  overlayOptions = { opacity: 0.65, blur: 0 },
  children
}) {
  const modalRef = createRef();
  useClickOutside(modalRef, (e) => {
    if (onClose)
      onClose();
  });
  if (!isOpen)
    return null;
  return /* @__PURE__ */ jsxDEV10("div", {
    css: wrapperStyle,
    className,
    children: [
      /* @__PURE__ */ jsxDEV10("div", {
        ref: modalRef,
        css: modalStyle(modalOptions),
        children: [
          /* @__PURE__ */ jsxDEV10("div", {
            css: titleStyle,
            children: [
              /* @__PURE__ */ jsxDEV10(Text, {
                as: "span",
                children: title
              }, void 0, false, {
                fileName: "src/Modal/Modal.tsx",
                lineNumber: 42,
                columnNumber: 11
              }, this),
              /* @__PURE__ */ jsxDEV10(IconActivator, {
                hasBorder: false,
                onClick: onClose,
                children: /* @__PURE__ */ jsxDEV10(X_esm_default, {
                  weight: "bold"
                }, void 0, false, {
                  fileName: "src/Modal/Modal.tsx",
                  lineNumber: 44,
                  columnNumber: 13
                }, this)
              }, void 0, false, {
                fileName: "src/Modal/Modal.tsx",
                lineNumber: 43,
                columnNumber: 11
              }, this)
            ]
          }, void 0, true, {
            fileName: "src/Modal/Modal.tsx",
            lineNumber: 41,
            columnNumber: 9
          }, this),
          /* @__PURE__ */ jsxDEV10("div", {
            css: bodyStyle,
            children
          }, void 0, false, {
            fileName: "src/Modal/Modal.tsx",
            lineNumber: 47,
            columnNumber: 9
          }, this)
        ]
      }, void 0, true, {
        fileName: "src/Modal/Modal.tsx",
        lineNumber: 40,
        columnNumber: 7
      }, this),
      /* @__PURE__ */ jsxDEV10(Overlay, {
        opacity: overlayOptions.opacity,
        blur: overlayOptions.blur
      }, void 0, false, {
        fileName: "src/Modal/Modal.tsx",
        lineNumber: 49,
        columnNumber: 7
      }, this)
    ]
  }, void 0, true, {
    fileName: "src/Modal/Modal.tsx",
    lineNumber: 39,
    columnNumber: 5
  }, this);
}
Modal.displayName = "WON-Modal";

// src/Pagination/Pagination.tsx
import { usePagination } from "@won-ui/hooks";
import { useMemo as useMemo2 } from "react";

// src/Pagination/Pagination.style.ts
import { css as css11 } from "@emotion/react";
var commonBtnStyle = css11`
  min-width: 32px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
`;
var moreBtnStyle = [
  commonBtnStyle,
  css11`
    margin: 0 2px;
  `
];
var arrowStyle = {
  leftArrow: [
    commonBtnStyle,
    css11`
      padding: 0 3px;
      margin-right: 5px;
    `
  ],
  rightArrow: [
    commonBtnStyle,
    css11`
      padding: 0 3px;
      margin-left: 5px;
    `
  ]
};
var pageBtnStyle = (isSelected) => [
  commonBtnStyle,
  css11`
    margin-right: 2px;
    padding: 0 2px;
    margin: 0 2px;
    font-weight: ${isSelected ? "bold" : "normal"};
  `
];

// src/Pagination/PaginationItem.tsx
import { memo, useCallback, useMemo } from "react";
import { jsxDEV as jsxDEV11 } from "@emotion/react/jsx-dev-runtime";
var PaginationItem = memo(({ pageInfo, ...buttonProps }) => {
  const isMoreButton = useCallback((pageNumber) => {
    if (pageNumber === "left" || pageNumber === "right")
      return true;
    return false;
  }, []);
  const { style, content, variant } = useMemo(() => {
    const style2 = isMoreButton(pageInfo.page) ? moreBtnStyle : pageBtnStyle(pageInfo.selected);
    const content2 = isMoreButton(pageInfo.page) ? /* @__PURE__ */ jsxDEV11(DotsThree_esm_default, {
      size: 24
    }, void 0, false, {
      fileName: "src/Pagination/PaginationItem.tsx",
      lineNumber: 19,
      columnNumber: 51
    }, this) : pageInfo.page;
    let variant2 = "borderless";
    if (!isMoreButton(pageInfo.page))
      variant2 = pageInfo.selected ? "filled" : "outline";
    return {
      style: style2,
      content: content2,
      variant: variant2
    };
  }, [pageInfo]);
  return /* @__PURE__ */ jsxDEV11(Button, {
    css: style,
    variant,
    ...buttonProps,
    children: content
  }, void 0, false, {
    fileName: "src/Pagination/PaginationItem.tsx",
    lineNumber: 30,
    columnNumber: 5
  }, this);
});

// src/Pagination/Pagination.tsx
import { jsxDEV as jsxDEV12 } from "@emotion/react/jsx-dev-runtime";
function Pagination(props) {
  const { color = "blue", position = "center", ...usePaginationOptions } = props;
  const {
    page,
    currentPages,
    maxPageNum,
    pageSize,
    pageSizeOptions,
    handleChangePage,
    handleChangePageSize,
    handleClickNext,
    handleClickPrev,
    handleClickMoreButton
  } = usePagination(usePaginationOptions);
  const paginationPosition = useMemo2(
    () => ({
      left: "flex-start",
      right: "flex-end",
      center: "center"
    })[position],
    [position]
  );
  return /* @__PURE__ */ jsxDEV12(Stack, {
    justify: paginationPosition,
    children: [
      /* @__PURE__ */ jsxDEV12(Stack, {
        children: [
          /* @__PURE__ */ jsxDEV12(Button, {
            css: arrowStyle.leftArrow,
            disabled: page === 1,
            color,
            onClick: handleClickPrev,
            variant: "outline",
            children: /* @__PURE__ */ jsxDEV12(CaretLeft_esm_default, {
              size: 16,
              weight: "bold"
            }, void 0, false, {
              fileName: "src/Pagination/Pagination.tsx",
              lineNumber: 50,
              columnNumber: 11
            }, this)
          }, void 0, false, {
            fileName: "src/Pagination/Pagination.tsx",
            lineNumber: 43,
            columnNumber: 9
          }, this),
          currentPages.map((pageInfo) => /* @__PURE__ */ jsxDEV12(PaginationItem, {
            pageInfo,
            color,
            onClick: typeof pageInfo.page === "number" ? handleChangePage(pageInfo.page) : handleClickMoreButton(pageInfo.page)
          }, pageInfo.page, false, {
            fileName: "src/Pagination/Pagination.tsx",
            lineNumber: 53,
            columnNumber: 11
          }, this)),
          /* @__PURE__ */ jsxDEV12(Button, {
            css: arrowStyle.rightArrow,
            disabled: page === maxPageNum,
            color,
            onClick: handleClickNext,
            variant: "outline",
            children: /* @__PURE__ */ jsxDEV12(CaretRight_esm_default, {
              size: 16,
              weight: "bold"
            }, void 0, false, {
              fileName: "src/Pagination/Pagination.tsx",
              lineNumber: 71,
              columnNumber: 11
            }, this)
          }, void 0, false, {
            fileName: "src/Pagination/Pagination.tsx",
            lineNumber: 64,
            columnNumber: 9
          }, this)
        ]
      }, void 0, true, {
        fileName: "src/Pagination/Pagination.tsx",
        lineNumber: 42,
        columnNumber: 7
      }, this),
      /* @__PURE__ */ jsxDEV12("select", {
        value: pageSize,
        onChange: handleChangePageSize,
        children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxDEV12("option", {
          value: option,
          children: [
            option,
            " / page"
          ]
        }, option, true, {
          fileName: "src/Pagination/Pagination.tsx",
          lineNumber: 77,
          columnNumber: 11
        }, this))
      }, void 0, false, {
        fileName: "src/Pagination/Pagination.tsx",
        lineNumber: 75,
        columnNumber: 7
      }, this)
    ]
  }, void 0, true, {
    fileName: "src/Pagination/Pagination.tsx",
    lineNumber: 41,
    columnNumber: 5
  }, this);
}
Pagination.displayName = "WON-Pagination";

// src/Switch/Switch.tsx
import { useUniqueId as useUniqueId2 } from "@won-ui/hooks";

// src/Switch/Switch.style.ts
import { css as css12 } from "@emotion/react";
import { wonColor as wonColor5 } from "@won-ui/styles";
var wrapperStyle2 = css12`
  display: inline-flex;
  box-sizing: border-box;
  cursor: pointer;
`;
var switchStyle = (theme) => {
  const color = wonColor5[theme];
  return {
    input: css12`
      box-sizing: border-box;
      padding: 0;
      height: 1px;
      appearance: none;
      &:checked + span {
        background-color: ${color[60]};
        border: 1px solid transparent;
        span {
          left: calc((100% - 18px) - 2px);
        }
      }
    `,
    wrapper: css12`
      background-color: ${color[30]};
      border: 1px solid ${color[40]};
      cursor: pointer;
      position: relative;
      border-radius: 10px;
      height: 20px;
      width: 40px;
      margin: 0px;
      display: inline-flex;
      align-items: center;
      user-select: none;
      transition: color 0.2s ease;
    `,
    ball: css12`
      position: absolute;
      border-radius: 8px;
      box-sizing: border-box;
      display: flex;
      height: 18px;
      width: 18px;
      background-color: ${color[10]};
      left: 2px;
      transition: left 0.2s ease-in;
    `
  };
};
var labelStyle = css12`
  font-family: Charcoal, sans-serif;
  padding-left: 14px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  align-self: center;
`;

// src/Switch/Switch.tsx
import { jsxDEV as jsxDEV13 } from "@emotion/react/jsx-dev-runtime";
function Switch({ id, label, color = "blue", ...restProps }) {
  const uniqueId = useUniqueId2(id);
  return /* @__PURE__ */ jsxDEV13("label", {
    css: wrapperStyle2,
    htmlFor: uniqueId,
    ...restProps,
    children: [
      /* @__PURE__ */ jsxDEV13("input", {
        css: switchStyle(color).input,
        type: "checkbox",
        role: "checkbox",
        id: uniqueId
      }, void 0, false, {
        fileName: "src/Switch/Switch.tsx",
        lineNumber: 18,
        columnNumber: 7
      }, this),
      /* @__PURE__ */ jsxDEV13("span", {
        css: switchStyle(color).wrapper,
        children: /* @__PURE__ */ jsxDEV13("span", {
          css: switchStyle(color).ball
        }, void 0, false, {
          fileName: "src/Switch/Switch.tsx",
          lineNumber: 20,
          columnNumber: 9
        }, this)
      }, void 0, false, {
        fileName: "src/Switch/Switch.tsx",
        lineNumber: 19,
        columnNumber: 7
      }, this),
      label && /* @__PURE__ */ jsxDEV13("span", {
        css: labelStyle,
        children: label
      }, void 0, false, {
        fileName: "src/Switch/Switch.tsx",
        lineNumber: 23,
        columnNumber: 9
      }, this)
    ]
  }, void 0, true, {
    fileName: "src/Switch/Switch.tsx",
    lineNumber: 17,
    columnNumber: 5
  }, this);
}
Switch.displayName = "WON-Switch";

// src/Tag/Tag.style.ts
import { css as css13 } from "@emotion/react";
import { wonColor as wonColor6 } from "@won-ui/styles";
var tagStyle = (theme, type) => {
  const color = wonColor6[theme];
  const defaultStyle = css13`
    font-family: Charcoal, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 12px;
    height: 20px;
    border-radius: 10px;
    font-weight: bold;
    letter-spacing: 0.3px;
    border: 2px solid transparent;
  `;
  const tagTypeStyle = {
    light: css13`
      background-color: ${color[10]};
      color: ${color[50]};
    `,
    filled: css13`
      background-color: ${color[60]};
      color: ${color[10]};
    `,
    outline: css13`
      box-sizing: border-box;
      border: 2px solid ${color[60]};
      color: ${color[60]};
    `
  };
  return [defaultStyle, tagTypeStyle[type]];
};

// src/Tag/Tag.tsx
import { jsxDEV as jsxDEV14 } from "@emotion/react/jsx-dev-runtime";
function Tag({
  className,
  color = "black",
  children,
  type = "light",
  ...props
}) {
  return /* @__PURE__ */ jsxDEV14("div", {
    className,
    css: tagStyle(color, type),
    children
  }, void 0, false, {
    fileName: "src/Tag/Tag.tsx",
    lineNumber: 19,
    columnNumber: 5
  }, this);
}
Tag.displayName = "WON-Tag";

// src/TextInput/TextInput.tsx
import { useUniqueId as useUniqueId3 } from "@won-ui/hooks";
import { jsxDEV as jsxDEV15 } from "@emotion/react/jsx-dev-runtime";
function TextInput({
  className,
  id,
  type = "text",
  label,
  errorText,
  helperText,
  value,
  onChange,
  required,
  icon,
  ...restProps
}) {
  const uniqueId = useUniqueId3(id);
  const handleChange = (e) => {
    const { value: value2 } = e.target;
    if (onChange) {
      onChange(value2);
    }
  };
  return /* @__PURE__ */ jsxDEV15(InputBox, {
    className,
    id: uniqueId,
    label,
    helperText,
    errorText,
    required,
    children: /* @__PURE__ */ jsxDEV15(Input, {
      id: uniqueId,
      type,
      value,
      onChange: handleChange,
      icon,
      ...restProps
    }, void 0, false, {
      fileName: "src/TextInput/TextInput.tsx",
      lineNumber: 46,
      columnNumber: 7
    }, this)
  }, void 0, false, {
    fileName: "src/TextInput/TextInput.tsx",
    lineNumber: 38,
    columnNumber: 5
  }, this);
}
TextInput.displayName = "WON-TextInput";
export {
  Button,
  Checkbox,
  Heading,
  IconActivator,
  Input,
  InputBox,
  Modal,
  Overlay,
  Pagination,
  Stack,
  Switch,
  Tag,
  Text,
  TextInput
};