@likelion-design/ui 0.1.7 → 0.1.8

package/dist/Button.js

@@ -1,232 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/stories/Button.tsx
-var Button_exports = {};
-__export(Button_exports, {
-  ActionButton: () => ActionButton,
-  Button: () => Button,
-  IconButton: () => IconButton
-});
-module.exports = __toCommonJS(Button_exports);
-
-// src/stories/button.module.css
-var button_default = {};
-
-// src/stories/Button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var ActionButton = (_a) => {
-  var _b = _a, {
-    size = "medium",
-    variant = "primary",
-    shape = "solid",
-    state = "enabled",
-    children,
-    prefixIcon,
-    suffixIcon,
-    loading = false,
-    className = "",
-    disabled
-  } = _b, props = __objRest(_b, [
-    "size",
-    "variant",
-    "shape",
-    "state",
-    "children",
-    "prefixIcon",
-    "suffixIcon",
-    "loading",
-    "className",
-    "disabled"
-  ]);
-  const isDisabled = disabled || state === "disabled" || loading;
-  const actualState = loading ? "loading" : state;
-  const baseClasses = [
-    button_default["action-button"],
-    button_default[`action-button--${size}`],
-    button_default[`action-button--${variant}`],
-    button_default[`action-button--${shape}`],
-    button_default[`action-button--${actualState}`],
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "button",
-    __spreadProps(__spreadValues({
-      type: "button",
-      className: baseClasses,
-      disabled: isDisabled
-    }, props), {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: button_default["action-button__content"], children: [
-          prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: button_default["action-button__prefix-icon"], children: prefixIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: button_default["action-button__label"], children }),
-          suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: button_default["action-button__suffix-icon"], children: suffixIcon })
-        ] }),
-        loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: button_default["action-button__spinner"], "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "svg",
-          {
-            className: button_default["action-button__spinner-svg"],
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "circle",
-              {
-                className: button_default["action-button__spinner-circle"],
-                cx: "12",
-                cy: "12",
-                r: "10",
-                stroke: "currentColor",
-                strokeWidth: "4",
-                strokeLinecap: "round",
-                strokeDasharray: "32",
-                strokeDashoffset: "32",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "animate",
-                    {
-                      attributeName: "stroke-dasharray",
-                      dur: "2s",
-                      values: "0 40;40 40;0 40",
-                      repeatCount: "indefinite"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "animate",
-                    {
-                      attributeName: "stroke-dashoffset",
-                      dur: "2s",
-                      values: "0;-40;-80",
-                      repeatCount: "indefinite"
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ) })
-      ]
-    })
-  );
-};
-var Button = (_a) => {
-  var _b = _a, {
-    primary = false,
-    size = "medium",
-    backgroundColor,
-    label
-  } = _b, props = __objRest(_b, [
-    "primary",
-    "size",
-    "backgroundColor",
-    "label"
-  ]);
-  const mode = primary ? button_default["storybook-button--primary"] : button_default["storybook-button--secondary"];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    __spreadProps(__spreadValues({
-      type: "button",
-      className: [
-        button_default["storybook-button"],
-        button_default[`storybook-button--${size}`],
-        mode
-      ].join(" "),
-      style: { backgroundColor }
-    }, props), {
-      children: label
-    })
-  );
-};
-var IconButton = (_a) => {
-  var _b = _a, {
-    size = "large",
-    variant = "primary",
-    iconType = "solid",
-    state = "enabled",
-    icon,
-    className = "",
-    disabled,
-    type = "button"
-  } = _b, props = __objRest(_b, [
-    "size",
-    "variant",
-    "iconType",
-    "state",
-    "icon",
-    "className",
-    "disabled",
-    "type"
-  ]);
-  const isDisabled = disabled || state === "disabled";
-  const actualState = iconType === "weak" && isDisabled ? "enabled" : state;
-  const baseClasses = [
-    button_default["icon-button"],
-    button_default[`icon-button--${size}`],
-    button_default[`icon-button--${variant}`],
-    button_default[`icon-button--${iconType}`],
-    button_default[`icon-button--${actualState}`],
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    __spreadProps(__spreadValues({
-      type,
-      className: baseClasses,
-      disabled: isDisabled
-    }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: button_default["icon-button__icon"], children: icon })
-    })
-  );
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ActionButton,
-  Button,
-  IconButton
-});
+"use strict";var b=Object.defineProperty,S=Object.defineProperties,I=Object.getOwnPropertyDescriptor,R=Object.getOwnPropertyDescriptors,$=Object.getOwnPropertyNames,p=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var _=(t,o,e)=>o in t?b(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,d=(t,o)=>{for(var e in o||(o={}))g.call(o,e)&&_(t,e,o[e]);if(p)for(var e of p(o))k.call(o,e)&&_(t,e,o[e]);return t},m=(t,o)=>S(t,R(o));var B=(t,o)=>{var e={};for(var n in t)g.call(t,n)&&o.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&p)for(var n of p(t))o.indexOf(n)<0&&k.call(t,n)&&(e[n]=t[n]);return e};var w=(t,o)=>{for(var e in o)b(t,e,{get:o[e],enumerable:!0})},z=(t,o,e,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of $(o))!g.call(t,s)&&s!==e&&b(t,s,{get:()=>o[s],enumerable:!(n=I(o,s))||n.enumerable});return t};var C=t=>z(b({},"__esModule",{value:!0}),t);var L={};w(L,{ActionButton:()=>P,Button:()=>T,IconButton:()=>A});module.exports=C(L);var a=require("react/jsx-runtime"),P=x=>{var l=x,{size:t="medium",variant:o="primary",shape:e="solid",state:n="enabled",children:s,prefixIcon:c,suffixIcon:i,loading:r=!1,className:y="",disabled:N}=l,u=B(l,["size","variant","shape","state","children","prefixIcon","suffixIcon","loading","className","disabled"]);let f=N||n==="disabled"||r,h=r?"loading":n,v=["action-button",`action-button--${t}`,`action-button--${o}`,`action-button--${e}`,`action-button--${h}`,y].filter(Boolean).join(" ");return(0,a.jsxs)("button",m(d({type:"button",className:v,disabled:f},u),{children:[(0,a.jsxs)("span",{className:"action-button__content",children:[c&&(0,a.jsx)("span",{className:"action-button__prefix-icon",children:c}),(0,a.jsx)("span",{className:"action-button__label",children:s}),i&&(0,a.jsx)("span",{className:"action-button__suffix-icon",children:i})]}),r&&(0,a.jsx)("span",{className:"action-button__spinner","aria-hidden":"true",children:(0,a.jsx)("svg",{className:"action-button__spinner-svg",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,a.jsxs)("circle",{className:"action-button__spinner-circle",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4",strokeLinecap:"round",strokeDasharray:"32",strokeDashoffset:"32",children:[(0,a.jsx)("animate",{attributeName:"stroke-dasharray",dur:"2s",values:"0 40;40 40;0 40",repeatCount:"indefinite"}),(0,a.jsx)("animate",{attributeName:"stroke-dashoffset",dur:"2s",values:"0;-40;-80",repeatCount:"indefinite"})]})})})]}))},T=c=>{var i=c,{primary:t=!1,size:o="medium",backgroundColor:e,label:n}=i,s=B(i,["primary","size","backgroundColor","label"]);let r=t?"storybook-button--primary":"storybook-button--secondary";return(0,a.jsx)("button",m(d({type:"button",className:["storybook-button",`storybook-button--${o}`,r].join(" "),style:{backgroundColor:e}},s),{children:n}))},A=N=>{var u=N,{size:t="large",variant:o="primary",iconType:e="solid",state:n="enabled",icon:s,className:c="",disabled:i,type:r="button"}=u,y=B(u,["size","variant","iconType","state","icon","className","disabled","type"]);let x=i||n==="disabled",l=e==="weak"&&x?"enabled":n,f=["icon-button",`icon-button--${t}`,`icon-button--${o}`,`icon-button--${e}`,`icon-button--${l}`,c].filter(Boolean).join(" ");return(0,a.jsx)("button",m(d({type:r,className:f,disabled:x},y),{children:(0,a.jsx)("span",{className:"icon-button__icon",children:s})}))};0&&(module.exports={ActionButton,Button,IconButton});
 //# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/stories/Button.tsx","../src/stories/button.module.css"],"sourcesContent":["import React from \"react\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonSize = \"xlarge\" | \"large\" | \"medium\" | \"small\";\nexport type ButtonVariant = \"primary\" | \"neutral\" | \"secondary\";\nexport type ButtonShape = \"solid\" | \"outline\" | \"ghost\";\nexport type ButtonState = \"enabled\" | \"hovered\" | \"loading\" | \"disabled\";\n\nexport type IconButtonSize = \"xlarge\" | \"large\" | \"medium\" | \"small\";\nexport type IconButtonVariant = \"primary\" | \"neutral\";\nexport type IconButtonType = \"solid\" | \"outline\" | \"weak\";\nexport type IconButtonState = \"enabled\" | \"hovered\" | \"disabled\";\n\nexport interface ActionButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\"> {\n  /** 버튼 크기 */\n  size?: ButtonSize;\n  /** 버튼 타입 (primary, neutral, secondary) */\n  variant?: ButtonVariant;\n  /** 버튼 모양 (solid, outline, ghost) */\n  shape?: ButtonShape;\n  /** 버튼 상태 */\n  state?: ButtonState;\n  /** 버튼 텍스트 */\n  children: React.ReactNode;\n  /** Prefix 아이콘 */\n  prefixIcon?: React.ReactNode;\n  /** Suffix 아이콘 */\n  suffixIcon?: React.ReactNode;\n  /** 로딩 상태일 때 표시할 스피너 */\n  loading?: boolean;\n}\n\n/** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */\nexport const ActionButton = ({\n  size = \"medium\",\n  variant = \"primary\",\n  shape = \"solid\",\n  state = \"enabled\",\n  children,\n  prefixIcon,\n  suffixIcon,\n  loading = false,\n  className = \"\",\n  disabled,\n  ...props\n}: ActionButtonProps) => {\n  const isDisabled = disabled || state === \"disabled\" || loading;\n  const actualState = loading ? \"loading\" : state;\n\n  const baseClasses = [\n    styles[\"action-button\"],\n    styles[`action-button--${size}`],\n    styles[`action-button--${variant}`],\n    styles[`action-button--${shape}`],\n    styles[`action-button--${actualState}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button\n      type=\"button\"\n      className={baseClasses}\n      disabled={isDisabled}\n      {...props}\n    >\n      <span className={styles[\"action-button__content\"]}>\n        {prefixIcon && (\n          <span className={styles[\"action-button__prefix-icon\"]}>\n            {prefixIcon}\n          </span>\n        )}\n        <span className={styles[\"action-button__label\"]}>{children}</span>\n        {suffixIcon && (\n          <span className={styles[\"action-button__suffix-icon\"]}>\n            {suffixIcon}\n          </span>\n        )}\n      </span>\n      {loading && (\n        <span className={styles[\"action-button__spinner\"]} aria-hidden=\"true\">\n          <svg\n            className={styles[\"action-button__spinner-svg\"]}\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle\n              className={styles[\"action-button__spinner-circle\"]}\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"4\"\n              strokeLinecap=\"round\"\n              strokeDasharray=\"32\"\n              strokeDashoffset=\"32\"\n            >\n              <animate\n                attributeName=\"stroke-dasharray\"\n                dur=\"2s\"\n                values=\"0 40;40 40;0 40\"\n                repeatCount=\"indefinite\"\n              />\n              <animate\n                attributeName=\"stroke-dashoffset\"\n                dur=\"2s\"\n                values=\"0;-40;-80\"\n                repeatCount=\"indefinite\"\n              />\n            </circle>\n          </svg>\n        </span>\n      )}\n    </button>\n  );\n};\n\n// 기존 Button 컴포넌트는 하위 호환성을 위해 유지\nexport interface ButtonProps {\n  /** Is this the principal call to action on the page? */\n  primary?: boolean;\n  /** What background color to use */\n  backgroundColor?: string;\n  /** How large should the button be? */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Button contents */\n  label: string;\n  /** Optional click handler */\n  onClick?: () => void;\n}\n\n/** Primary UI component for user interaction */\nexport const Button = ({\n  primary = false,\n  size = \"medium\",\n  backgroundColor,\n  label,\n  ...props\n}: ButtonProps) => {\n  const mode = primary\n    ? styles[\"storybook-button--primary\"]\n    : styles[\"storybook-button--secondary\"];\n  return (\n    <button\n      type=\"button\"\n      className={[\n        styles[\"storybook-button\"],\n        styles[`storybook-button--${size}`],\n        mode,\n      ].join(\" \")}\n      style={{ backgroundColor }}\n      {...props}\n    >\n      {label}\n    </button>\n  );\n};\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** 버튼 크기 */\n  size?: IconButtonSize;\n  /** 버튼 타입 (primary 또는 neutral) */\n  variant?: IconButtonVariant;\n  /** 버튼 모양 (solid, outline, weak) */\n  iconType?: IconButtonType;\n  /** 버튼 상태 */\n  state?: IconButtonState;\n  /** 아이콘 (Heroicons 또는 React 컴포넌트) */\n  icon: React.ReactNode;\n  /** 아이콘에 대한 접근성 라벨 */\n  \"aria-label\": string;\n}\n\n/** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */\nexport const IconButton = ({\n  size = \"large\",\n  variant = \"primary\",\n  iconType = \"solid\",\n  state = \"enabled\",\n  icon,\n  className = \"\",\n  disabled,\n  type = \"button\",\n  ...props\n}: IconButtonProps) => {\n  const isDisabled = disabled || state === \"disabled\";\n  // weak 타입은 disabled 상태를 가지지 않음\n  const actualState = iconType === \"weak\" && isDisabled ? \"enabled\" : state;\n\n  const baseClasses = [\n    styles[\"icon-button\"],\n    styles[`icon-button--${size}`],\n    styles[`icon-button--${variant}`],\n    styles[`icon-button--${iconType}`],\n    styles[`icon-button--${actualState}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button\n      type={type}\n      className={baseClasses}\n      disabled={isDisabled}\n      {...props}\n    >\n      <span className={styles[\"icon-button__icon\"]}>{icon}</span>\n    </button>\n  );\n};\n","/* 기존 스타일 유지 */\n.storybook-button {\n  display: inline-block;\n  cursor: pointer;\n  border: 0;\n  border-radius: 3em;\n  font-weight: 700;\n  line-height: 1;\n  font-family: \"Nunito Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n}\n.storybook-button--primary {\n  background-color: #555ab9;\n  color: white;\n}\n.storybook-button--secondary {\n  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n  background-color: transparent;\n  color: #333;\n}\n.storybook-button--small {\n  padding: 10px 16px;\n  font-size: 12px;\n}\n.storybook-button--medium {\n  padding: 11px 20px;\n  font-size: 14px;\n}\n.storybook-button--large {\n  padding: 12px 24px;\n  font-size: 16px;\n}\n\n/* ActionButton 스타일 */\n.action-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-family: \"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui,\n    sans-serif;\n  font-weight: 600;\n  border-radius: 8px;\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  min-width: fit-content;\n  white-space: nowrap;\n}\n\n/* Size 스타일 */\n.action-button--xlarge {\n  height: 56px;\n  padding: 0 24px;\n  font-size: 17px;\n  min-width: 34px;\n}\n\n.action-button--large {\n  height: 48px;\n  padding: 0 24px;\n  font-size: 17px;\n  min-width: 34px;\n}\n\n.action-button--medium {\n  height: 36px;\n  padding: 0 20px;\n  font-size: 15px;\n  min-width: 34px;\n}\n\n.action-button--small {\n  height: 28px;\n  padding: 0 16px;\n  font-size: 13px;\n  min-width: 30px;\n}\n\n/* Primary Solid 스타일 */\n.action-button--primary.action-button--solid {\n  background-color: var(--color-semantic-bg-primary);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.action-button--primary.action-button--solid:hover:not(:disabled),\n.action-button--primary.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-primary-hovered);\n}\n\n.action-button--primary.action-button--solid:disabled,\n.action-button--primary.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Primary Outline 스타일 */\n.action-button--primary.action-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.action-button--primary.action-button--outline:hover:not(:disabled),\n.action-button--primary.action-button--outline.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--primary.action-button--outline:disabled,\n.action-button--primary.action-button--outline.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Primary Ghost 스타일 */\n.action-button--primary.action-button--ghost {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--primary.action-button--ghost:hover:not(:disabled),\n.action-button--primary.action-button--ghost.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-primary-weak);\n}\n\n.action-button--primary.action-button--ghost:disabled,\n.action-button--primary.action-button--ghost.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Solid 스타일 */\n.action-button--neutral.action-button--solid {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.action-button--neutral.action-button--solid:hover:not(:disabled),\n.action-button--neutral.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-inverted);\n}\n\n.action-button--neutral.action-button--solid:disabled,\n.action-button--neutral.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Neutral Outline 스타일 */\n.action-button--neutral.action-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.action-button--neutral.action-button--outline:hover:not(:disabled),\n.action-button--neutral.action-button--outline.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--neutral.action-button--outline:disabled,\n.action-button--neutral.action-button--outline.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Ghost 스타일 */\n.action-button--neutral.action-button--ghost {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--neutral.action-button--ghost:hover:not(:disabled),\n.action-button--neutral.action-button--ghost.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--neutral.action-button--ghost:disabled,\n.action-button--neutral.action-button--ghost.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Secondary Solid 스타일 */\n.action-button--secondary.action-button--solid {\n  background-color: var(--color-semantic-bg-normal);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--secondary.action-button--solid:hover:not(:disabled),\n.action-button--secondary.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--secondary.action-button--solid:disabled,\n.action-button--secondary.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Loading 상태 */\n.action-button--loading {\n  position: relative;\n  pointer-events: none;\n}\n\n.action-button--loading .action-button__content {\n  opacity: 0;\n}\n\n.action-button__content {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-button__spinner {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.action-button__spinner-svg {\n  width: 20px;\n  height: 20px;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.action-button__spinner-circle {\n  opacity: 1;\n}\n\n/* 로딩 상태일 때 hovered와 동일한 스타일 적용 */\n.action-button--primary.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-primary-hovered);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.action-button--primary.action-button--outline.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--primary.action-button--ghost.action-button--loading {\n  background-color: var(--color-semantic-bg-primary-weak);\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--neutral.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.action-button--neutral.action-button--outline.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--neutral.action-button--ghost.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--secondary.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n/* 아이콘 스타일 */\n.action-button__prefix-icon,\n.action-button__suffix-icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.action-button--small .action-button__prefix-icon,\n.action-button--small .action-button__suffix-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.action-button--medium .action-button__prefix-icon,\n.action-button--medium .action-button__suffix-icon {\n  width: 18px;\n  height: 18px;\n}\n\n.action-button--large .action-button__prefix-icon,\n.action-button--large .action-button__suffix-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.action-button--xlarge .action-button__prefix-icon,\n.action-button--xlarge .action-button__suffix-icon {\n  width: 24px;\n  height: 24px;\n}\n\n.action-button__label {\n  display: inline-flex;\n  align-items: center;\n}\n\n/* IconButton 스타일 */\n.icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: \"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui,\n    sans-serif;\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n/* Size 스타일 */\n.icon-button--xlarge {\n  width: 56px;\n  height: 56px;\n  border-radius: 8px;\n}\n\n.icon-button--large {\n  width: 48px;\n  height: 48px;\n  border-radius: 6px;\n}\n\n.icon-button--medium {\n  width: 36px;\n  height: 36px;\n  border-radius: 4px;\n}\n\n.icon-button--small {\n  width: 28px;\n  height: 28px;\n  border-radius: 4px;\n}\n\n/* Icon 크기 */\n.icon-button__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.icon-button--xlarge .icon-button__icon,\n.icon-button--large .icon-button__icon {\n  width: 24px;\n  height: 24px;\n}\n\n.icon-button--medium .icon-button__icon {\n  width: 20px;\n  height: 20px;\n}\n\n.icon-button--small .icon-button__icon {\n  width: 16px;\n  height: 16px;\n}\n\n/* Primary Solid 스타일 */\n.icon-button--primary.icon-button--solid {\n  background-color: var(--color-semantic-bg-primary);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.icon-button--primary.icon-button--solid:hover:not(:disabled),\n.icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-primary-hovered);\n}\n\n.icon-button--primary.icon-button--solid:disabled,\n.icon-button--primary.icon-button--solid.icon-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Primary Outline 스타일 */\n.icon-button--primary.icon-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.icon-button--primary.icon-button--outline:hover:not(:disabled),\n.icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.icon-button--primary.icon-button--outline:disabled,\n.icon-button--primary.icon-button--outline.icon-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Primary Weak 스타일 */\n.icon-button--primary.icon-button--weak {\n  background-color: var(--color-semantic-bg-week-primary);\n  color: var(--color-semantic-fg-primary);\n}\n\n.icon-button--primary.icon-button--weak:hover:not(:disabled),\n.icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-week-primary-hovered);\n}\n\n/* Neutral Solid 스타일 */\n.icon-button--neutral.icon-button--solid {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.icon-button--neutral.icon-button--solid:hover:not(:disabled),\n.icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-inverted);\n}\n\n.icon-button--neutral.icon-button--solid:disabled,\n.icon-button--neutral.icon-button--solid.icon-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Neutral Outline 스타일 */\n.icon-button--neutral.icon-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.icon-button--neutral.icon-button--outline:hover:not(:disabled),\n.icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.icon-button--neutral.icon-button--outline:disabled,\n.icon-button--neutral.icon-button--outline.icon-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Weak 스타일 */\n.icon-button--neutral.icon-button--weak {\n  background-color: var(--color-semantic-bg-week-neutral-dark);\n  color: var(--color-semantic-fg-normal);\n}\n\n.icon-button--neutral.icon-button--weak:hover:not(:disabled),\n.icon-button--neutral.icon-button--weak.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-week-neutral-dark-hovered);\n}\n\n/* Weak 타입은 disabled 상태를 가지지 않음 - 어두운 배경일 때 */\n.icon-button--neutral.icon-button--weak.dark {\n  color: var(--color-semantic-fg-white);\n}\n\n.icon-button--neutral.icon-button--weak.dark:hover:not(:disabled),\n.icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(\n    :disabled\n  ) {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/stories/Button.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type ButtonSize = \"xlarge\" | \"large\" | \"medium\" | \"small\";\nexport type ButtonVariant = \"primary\" | \"neutral\" | \"secondary\";\nexport type ButtonShape = \"solid\" | \"outline\" | \"ghost\";\nexport type ButtonState = \"enabled\" | \"hovered\" | \"loading\" | \"disabled\";\n\nexport type IconButtonSize = \"xlarge\" | \"large\" | \"medium\" | \"small\";\nexport type IconButtonVariant = \"primary\" | \"neutral\";\nexport type IconButtonType = \"solid\" | \"outline\" | \"weak\";\nexport type IconButtonState = \"enabled\" | \"hovered\" | \"disabled\";\n\nexport interface ActionButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\"> {\n  /** 버튼 크기 */\n  size?: ButtonSize;\n  /** 버튼 타입 (primary, neutral, secondary) */\n  variant?: ButtonVariant;\n  /** 버튼 모양 (solid, outline, ghost) */\n  shape?: ButtonShape;\n  /** 버튼 상태 */\n  state?: ButtonState;\n  /** 버튼 텍스트 */\n  children: React.ReactNode;\n  /** Prefix 아이콘 */\n  prefixIcon?: React.ReactNode;\n  /** Suffix 아이콘 */\n  suffixIcon?: React.ReactNode;\n  /** 로딩 상태일 때 표시할 스피너 */\n  loading?: boolean;\n}\n\n/** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */\nexport const ActionButton = ({\n  size = \"medium\",\n  variant = \"primary\",\n  shape = \"solid\",\n  state = \"enabled\",\n  children,\n  prefixIcon,\n  suffixIcon,\n  loading = false,\n  className = \"\",\n  disabled,\n  ...props\n}: ActionButtonProps) => {\n  const isDisabled = disabled || state === \"disabled\" || loading;\n  const actualState = loading ? \"loading\" : state;\n\n  const baseClasses = [\n    \"action-button\",\n    `action-button--${size}`,\n    `action-button--${variant}`,\n    `action-button--${shape}`,\n    `action-button--${actualState}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button\n      type=\"button\"\n      className={baseClasses}\n      disabled={isDisabled}\n      {...props}\n    >\n      <span className=\"action-button__content\">\n        {prefixIcon && (\n          <span className=\"action-button__prefix-icon\">{prefixIcon}</span>\n        )}\n        <span className=\"action-button__label\">{children}</span>\n        {suffixIcon && (\n          <span className=\"action-button__suffix-icon\">{suffixIcon}</span>\n        )}\n      </span>\n      {loading && (\n        <span className=\"action-button__spinner\" aria-hidden=\"true\">\n          <svg\n            className=\"action-button__spinner-svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle\n              className=\"action-button__spinner-circle\"\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"4\"\n              strokeLinecap=\"round\"\n              strokeDasharray=\"32\"\n              strokeDashoffset=\"32\"\n            >\n              <animate\n                attributeName=\"stroke-dasharray\"\n                dur=\"2s\"\n                values=\"0 40;40 40;0 40\"\n                repeatCount=\"indefinite\"\n              />\n              <animate\n                attributeName=\"stroke-dashoffset\"\n                dur=\"2s\"\n                values=\"0;-40;-80\"\n                repeatCount=\"indefinite\"\n              />\n            </circle>\n          </svg>\n        </span>\n      )}\n    </button>\n  );\n};\n\n// 기존 Button 컴포넌트는 하위 호환성을 위해 유지\nexport interface ButtonProps {\n  /** Is this the principal call to action on the page? */\n  primary?: boolean;\n  /** What background color to use */\n  backgroundColor?: string;\n  /** How large should the button be? */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Button contents */\n  label: string;\n  /** Optional click handler */\n  onClick?: () => void;\n}\n\n/** Primary UI component for user interaction */\nexport const Button = ({\n  primary = false,\n  size = \"medium\",\n  backgroundColor,\n  label,\n  ...props\n}: ButtonProps) => {\n  const mode = primary\n    ? \"storybook-button--primary\"\n    : \"storybook-button--secondary\";\n  return (\n    <button\n      type=\"button\"\n      className={[\"storybook-button\", `storybook-button--${size}`, mode].join(\n        \" \"\n      )}\n      style={{ backgroundColor }}\n      {...props}\n    >\n      {label}\n    </button>\n  );\n};\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** 버튼 크기 */\n  size?: IconButtonSize;\n  /** 버튼 타입 (primary 또는 neutral) */\n  variant?: IconButtonVariant;\n  /** 버튼 모양 (solid, outline, weak) */\n  iconType?: IconButtonType;\n  /** 버튼 상태 */\n  state?: IconButtonState;\n  /** 아이콘 (Heroicons 또는 React 컴포넌트) */\n  icon: React.ReactNode;\n  /** 아이콘에 대한 접근성 라벨 */\n  \"aria-label\": string;\n}\n\n/** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */\nexport const IconButton = ({\n  size = \"large\",\n  variant = \"primary\",\n  iconType = \"solid\",\n  state = \"enabled\",\n  icon,\n  className = \"\",\n  disabled,\n  type = \"button\",\n  ...props\n}: IconButtonProps) => {\n  const isDisabled = disabled || state === \"disabled\";\n  // weak 타입은 disabled 상태를 가지지 않음\n  const actualState = iconType === \"weak\" && isDisabled ? \"enabled\" : state;\n\n  const baseClasses = [\n    \"icon-button\",\n    `icon-button--${size}`,\n    `icon-button--${variant}`,\n    `icon-button--${iconType}`,\n    `icon-button--${actualState}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button\n      type={type}\n      className={baseClasses}\n      disabled={isDisabled}\n      {...props}\n    >\n      <span className=\"icon-button__icon\">{icon}</span>\n    </button>\n  );\n};\n"],"mappings":"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","names":["Button_exports","__export","ActionButton","Button","IconButton","__toCommonJS","import_jsx_runtime","ActionButton","_a","_b","size","variant","shape","state","children","prefixIcon","suffixIcon","loading","className","disabled","props","__objRest","isDisabled","actualState","baseClasses","__spreadProps","__spreadValues","Button","primary","backgroundColor","label","mode","IconButton","iconType","icon","type"]}

package/dist/Button.mjs

@@ -1,12 +1,2 @@
-import {
-  ActionButton,
-  Button,
-  IconButton
-} from "./chunk-6BR7YIWI.mjs";
-import "./chunk-22Q3FVTV.mjs";
-export {
-  ActionButton,
-  Button,
-  IconButton
-};
+import{a,b,c}from"./chunk-HI5DDIGM.mjs";import"./chunk-SV46H7N2.mjs";export{a as ActionButton,b as Button,c as IconButton};
 //# sourceMappingURL=Button.mjs.map

package/dist/Header.js

@@ -1,160 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/stories/Header.tsx
-var Header_exports = {};
-__export(Header_exports, {
-  Header: () => Header
-});
-module.exports = __toCommonJS(Header_exports);
-
-// src/stories/button.module.css
-var button_default = {};
-
-// src/stories/Button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Button = (_a) => {
-  var _b = _a, {
-    primary = false,
-    size = "medium",
-    backgroundColor,
-    label
-  } = _b, props = __objRest(_b, [
-    "primary",
-    "size",
-    "backgroundColor",
-    "label"
-  ]);
-  const mode = primary ? button_default["storybook-button--primary"] : button_default["storybook-button--secondary"];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    __spreadProps(__spreadValues({
-      type: "button",
-      className: [
-        button_default["storybook-button"],
-        button_default[`storybook-button--${size}`],
-        mode
-      ].join(" "),
-      style: { backgroundColor }
-    }, props), {
-      children: label
-    })
-  );
-};
-
-// src/stories/header.module.css
-var header_default = {};
-
-// src/stories/Header.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Header = ({
-  user,
-  onLogin,
-  onLogout,
-  onCreateAccount
-}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("header", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: header_default["storybook-header"], children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "svg",
-      {
-        width: "32",
-        height: "32",
-        viewBox: "0 0 32 32",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { fill: "none", fillRule: "evenodd", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "path",
-            {
-              d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",
-              fill: "#FFF"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "path",
-            {
-              d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",
-              fill: "#555AB9"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "path",
-            {
-              d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",
-              fill: "#91BAF8"
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { children: "Acme" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: user ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "welcome", children: [
-      "Welcome, ",
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("b", { children: user.name }),
-      "!"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { size: "small", onClick: onLogout, label: "Log out" })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { size: "small", onClick: onLogin, label: "Log in" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      Button,
-      {
-        primary: true,
-        size: "small",
-        onClick: onCreateAccount,
-        label: "Sign up"
-      }
-    )
-  ] }) })
-] }) });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Header
-});
+"use strict";var r=Object.defineProperty,g=Object.defineProperties,h=Object.getOwnPropertyDescriptor,f=Object.getOwnPropertyDescriptors,x=Object.getOwnPropertyNames,i=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var d=(t,e,o)=>e in t?r(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,m=(t,e)=>{for(var o in e||(e={}))c.call(e,o)&&d(t,o,e[o]);if(i)for(var o of i(e))b.call(e,o)&&d(t,o,e[o]);return t},B=(t,e)=>g(t,f(e));var y=(t,e)=>{var o={};for(var a in t)c.call(t,a)&&e.indexOf(a)<0&&(o[a]=t[a]);if(t!=null&&i)for(var a of i(t))e.indexOf(a)<0&&b.call(t,a)&&(o[a]=t[a]);return o};var k=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},N=(t,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of x(e))!c.call(t,s)&&s!==o&&r(t,s,{get:()=>e[s],enumerable:!(a=h(e,s))||a.enumerable});return t};var _=t=>N(r({},"__esModule",{value:!0}),t);var w={};k(w,{Header:()=>z});module.exports=_(w);var u=require("react/jsx-runtime");var l=S=>{var p=S,{primary:t=!1,size:e="medium",backgroundColor:o,label:a}=p,s=y(p,["primary","size","backgroundColor","label"]);let v=t?"storybook-button--primary":"storybook-button--secondary";return(0,u.jsx)("button",B(m({type:"button",className:["storybook-button",`storybook-button--${e}`,v].join(" "),style:{backgroundColor:o}},s),{children:a}))};var n=require("react/jsx-runtime"),z=({user:t,onLogin:e,onLogout:o,onCreateAccount:a})=>(0,n.jsx)("header",{children:(0,n.jsxs)("div",{className:"storybook-header",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:(0,n.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[(0,n.jsx)("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),(0,n.jsx)("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),(0,n.jsx)("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),(0,n.jsx)("h1",{children:"Acme"})]}),(0,n.jsx)("div",{children:t?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("span",{className:"welcome",children:["Welcome, ",(0,n.jsx)("b",{children:t.name}),"!"]}),(0,n.jsx)(l,{size:"small",onClick:o,label:"Log out"})]}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{size:"small",onClick:e,label:"Log in"}),(0,n.jsx)(l,{primary:!0,size:"small",onClick:a,label:"Sign up"})]})})]})});0&&(module.exports={Header});
 //# sourceMappingURL=Header.js.map

package/dist/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/stories/Header.tsx","../src/stories/button.module.css","../src/stories/Button.tsx","../src/stories/header.module.css"],"sourcesContent":["import { Button } from \"./Button\";\nimport styles from \"./header.module.css\";\n\ntype User = {\n  name: string;\n};\n\nexport interface HeaderProps {\n  user?: User;\n  onLogin?: () => void;\n  onLogout?: () => void;\n  onCreateAccount?: () => void;\n}\n\nexport const Header = ({\n  user,\n  onLogin,\n  onLogout,\n  onCreateAccount,\n}: HeaderProps) => (\n  <header>\n    <div className={styles[\"storybook-header\"]}>\n      <div>\n        <svg\n          width=\"32\"\n          height=\"32\"\n          viewBox=\"0 0 32 32\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <g fill=\"none\" fillRule=\"evenodd\">\n            <path\n              d=\"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z\"\n              fill=\"#FFF\"\n            />\n            <path\n              d=\"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z\"\n              fill=\"#555AB9\"\n            />\n            <path\n              d=\"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z\"\n              fill=\"#91BAF8\"\n            />\n          </g>\n        </svg>\n        <h1>Acme</h1>\n      </div>\n      <div>\n        {user ? (\n          <>\n            <span className=\"welcome\">\n              Welcome, <b>{user.name}</b>!\n            </span>\n            <Button size=\"small\" onClick={onLogout} label=\"Log out\" />\n          </>\n        ) : (\n          <>\n            <Button size=\"small\" onClick={onLogin} label=\"Log in\" />\n            <Button\n              primary\n              size=\"small\"\n              onClick={onCreateAccount}\n              label=\"Sign up\"\n            />\n          </>\n        )}\n      </div>\n    </div>\n  </header>\n);\n","/* 기존 스타일 유지 */\n.storybook-button {\n  display: inline-block;\n  cursor: pointer;\n  border: 0;\n  border-radius: 3em;\n  font-weight: 700;\n  line-height: 1;\n  font-family: \"Nunito Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n}\n.storybook-button--primary {\n  background-color: #555ab9;\n  color: white;\n}\n.storybook-button--secondary {\n  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n  background-color: transparent;\n  color: #333;\n}\n.storybook-button--small {\n  padding: 10px 16px;\n  font-size: 12px;\n}\n.storybook-button--medium {\n  padding: 11px 20px;\n  font-size: 14px;\n}\n.storybook-button--large {\n  padding: 12px 24px;\n  font-size: 16px;\n}\n\n/* ActionButton 스타일 */\n.action-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-family: \"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui,\n    sans-serif;\n  font-weight: 600;\n  border-radius: 8px;\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  min-width: fit-content;\n  white-space: nowrap;\n}\n\n/* Size 스타일 */\n.action-button--xlarge {\n  height: 56px;\n  padding: 0 24px;\n  font-size: 17px;\n  min-width: 34px;\n}\n\n.action-button--large {\n  height: 48px;\n  padding: 0 24px;\n  font-size: 17px;\n  min-width: 34px;\n}\n\n.action-button--medium {\n  height: 36px;\n  padding: 0 20px;\n  font-size: 15px;\n  min-width: 34px;\n}\n\n.action-button--small {\n  height: 28px;\n  padding: 0 16px;\n  font-size: 13px;\n  min-width: 30px;\n}\n\n/* Primary Solid 스타일 */\n.action-button--primary.action-button--solid {\n  background-color: var(--color-semantic-bg-primary);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.action-button--primary.action-button--solid:hover:not(:disabled),\n.action-button--primary.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-primary-hovered);\n}\n\n.action-button--primary.action-button--solid:disabled,\n.action-button--primary.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Primary Outline 스타일 */\n.action-button--primary.action-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.action-button--primary.action-button--outline:hover:not(:disabled),\n.action-button--primary.action-button--outline.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--primary.action-button--outline:disabled,\n.action-button--primary.action-button--outline.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Primary Ghost 스타일 */\n.action-button--primary.action-button--ghost {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--primary.action-button--ghost:hover:not(:disabled),\n.action-button--primary.action-button--ghost.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-primary-weak);\n}\n\n.action-button--primary.action-button--ghost:disabled,\n.action-button--primary.action-button--ghost.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Solid 스타일 */\n.action-button--neutral.action-button--solid {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.action-button--neutral.action-button--solid:hover:not(:disabled),\n.action-button--neutral.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-inverted);\n}\n\n.action-button--neutral.action-button--solid:disabled,\n.action-button--neutral.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Neutral Outline 스타일 */\n.action-button--neutral.action-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.action-button--neutral.action-button--outline:hover:not(:disabled),\n.action-button--neutral.action-button--outline.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--neutral.action-button--outline:disabled,\n.action-button--neutral.action-button--outline.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Ghost 스타일 */\n.action-button--neutral.action-button--ghost {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--neutral.action-button--ghost:hover:not(:disabled),\n.action-button--neutral.action-button--ghost.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--neutral.action-button--ghost:disabled,\n.action-button--neutral.action-button--ghost.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Secondary Solid 스타일 */\n.action-button--secondary.action-button--solid {\n  background-color: var(--color-semantic-bg-normal);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--secondary.action-button--solid:hover:not(:disabled),\n.action-button--secondary.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--secondary.action-button--solid:disabled,\n.action-button--secondary.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Loading 상태 */\n.action-button--loading {\n  position: relative;\n  pointer-events: none;\n}\n\n.action-button--loading .action-button__content {\n  opacity: 0;\n}\n\n.action-button__content {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-button__spinner {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.action-button__spinner-svg {\n  width: 20px;\n  height: 20px;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.action-button__spinner-circle {\n  opacity: 1;\n}\n\n/* 로딩 상태일 때 hovered와 동일한 스타일 적용 */\n.action-button--primary.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-primary-hovered);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.action-button--primary.action-button--outline.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--primary.action-button--ghost.action-button--loading {\n  background-color: var(--color-semantic-bg-primary-weak);\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--neutral.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.action-button--neutral.action-button--outline.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--neutral.action-button--ghost.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--secondary.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n/* 아이콘 스타일 */\n.action-button__prefix-icon,\n.action-button__suffix-icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.action-button--small .action-button__prefix-icon,\n.action-button--small .action-button__suffix-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.action-button--medium .action-button__prefix-icon,\n.action-button--medium .action-button__suffix-icon {\n  width: 18px;\n  height: 18px;\n}\n\n.action-button--large .action-button__prefix-icon,\n.action-button--large .action-button__suffix-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.action-button--xlarge .action-button__prefix-icon,\n.action-button--xlarge .action-button__suffix-icon {\n  width: 24px;\n  height: 24px;\n}\n\n.action-button__label {\n  display: inline-flex;\n  align-items: center;\n}\n\n/* IconButton 스타일 */\n.icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: \"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui,\n    sans-serif;\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n/* Size 스타일 */\n.icon-button--xlarge {\n  width: 56px;\n  height: 56px;\n  border-radius: 8px;\n}\n\n.icon-button--large {\n  width: 48px;\n  height: 48px;\n  border-radius: 6px;\n}\n\n.icon-button--medium {\n  width: 36px;\n  height: 36px;\n  border-radius: 4px;\n}\n\n.icon-button--small {\n  width: 28px;\n  height: 28px;\n  border-radius: 4px;\n}\n\n/* Icon 크기 */\n.icon-button__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.icon-button--xlarge .icon-button__icon,\n.icon-button--large .icon-button__icon {\n  width: 24px;\n  height: 24px;\n}\n\n.icon-button--medium .icon-button__icon {\n  width: 20px;\n  height: 20px;\n}\n\n.icon-button--small .icon-button__icon {\n  width: 16px;\n  height: 16px;\n}\n\n/* Primary Solid 스타일 */\n.icon-button--primary.icon-button--solid {\n  background-color: var(--color-semantic-bg-primary);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.icon-button--primary.icon-button--solid:hover:not(:disabled),\n.icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-primary-hovered);\n}\n\n.icon-button--primary.icon-button--solid:disabled,\n.icon-button--primary.icon-button--solid.icon-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Primary Outline 스타일 */\n.icon-button--primary.icon-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.icon-button--primary.icon-button--outline:hover:not(:disabled),\n.icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.icon-button--primary.icon-button--outline:disabled,\n.icon-button--primary.icon-button--outline.icon-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Primary Weak 스타일 */\n.icon-button--primary.icon-button--weak {\n  background-color: var(--color-semantic-bg-week-primary);\n  color: var(--color-semantic-fg-primary);\n}\n\n.icon-button--primary.icon-button--weak:hover:not(:disabled),\n.icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-week-primary-hovered);\n}\n\n/* Neutral Solid 스타일 */\n.icon-button--neutral.icon-button--solid {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.icon-button--neutral.icon-button--solid:hover:not(:disabled),\n.icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-inverted);\n}\n\n.icon-button--neutral.icon-button--solid:disabled,\n.icon-button--neutral.icon-button--solid.icon-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Neutral Outline 스타일 */\n.icon-button--neutral.icon-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.icon-button--neutral.icon-button--outline:hover:not(:disabled),\n.icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.icon-button--neutral.icon-button--outline:disabled,\n.icon-button--neutral.icon-button--outline.icon-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Weak 스타일 */\n.icon-button--neutral.icon-button--weak {\n  background-color: var(--color-semantic-bg-week-neutral-dark);\n  color: var(--color-semantic-fg-normal);\n}\n\n.icon-button--neutral.icon-button--weak:hover:not(:disabled),\n.icon-button--neutral.icon-button--weak.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-week-neutral-dark-hovered);\n}\n\n/* Weak 타입은 disabled 상태를 가지지 않음 - 어두운 배경일 때 */\n.icon-button--neutral.icon-button--weak.dark {\n  color: var(--color-semantic-fg-white);\n}\n\n.icon-button--neutral.icon-button--weak.dark:hover:not(:disabled),\n.icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(\n    :disabled\n  ) {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n","import React from \"react\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonSize = \"xlarge\" | \"large\" | \"medium\" | \"small\";\nexport type ButtonVariant = \"primary\" | \"neutral\" | \"secondary\";\nexport type ButtonShape = \"solid\" | \"outline\" | \"ghost\";\nexport type ButtonState = \"enabled\" | \"hovered\" | \"loading\" | \"disabled\";\n\nexport type IconButtonSize = \"xlarge\" | \"large\" | \"medium\" | \"small\";\nexport type IconButtonVariant = \"primary\" | \"neutral\";\nexport type IconButtonType = \"solid\" | \"outline\" | \"weak\";\nexport type IconButtonState = \"enabled\" | \"hovered\" | \"disabled\";\n\nexport interface ActionButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\"> {\n  /** 버튼 크기 */\n  size?: ButtonSize;\n  /** 버튼 타입 (primary, neutral, secondary) */\n  variant?: ButtonVariant;\n  /** 버튼 모양 (solid, outline, ghost) */\n  shape?: ButtonShape;\n  /** 버튼 상태 */\n  state?: ButtonState;\n  /** 버튼 텍스트 */\n  children: React.ReactNode;\n  /** Prefix 아이콘 */\n  prefixIcon?: React.ReactNode;\n  /** Suffix 아이콘 */\n  suffixIcon?: React.ReactNode;\n  /** 로딩 상태일 때 표시할 스피너 */\n  loading?: boolean;\n}\n\n/** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */\nexport const ActionButton = ({\n  size = \"medium\",\n  variant = \"primary\",\n  shape = \"solid\",\n  state = \"enabled\",\n  children,\n  prefixIcon,\n  suffixIcon,\n  loading = false,\n  className = \"\",\n  disabled,\n  ...props\n}: ActionButtonProps) => {\n  const isDisabled = disabled || state === \"disabled\" || loading;\n  const actualState = loading ? \"loading\" : state;\n\n  const baseClasses = [\n    styles[\"action-button\"],\n    styles[`action-button--${size}`],\n    styles[`action-button--${variant}`],\n    styles[`action-button--${shape}`],\n    styles[`action-button--${actualState}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button\n      type=\"button\"\n      className={baseClasses}\n      disabled={isDisabled}\n      {...props}\n    >\n      <span className={styles[\"action-button__content\"]}>\n        {prefixIcon && (\n          <span className={styles[\"action-button__prefix-icon\"]}>\n            {prefixIcon}\n          </span>\n        )}\n        <span className={styles[\"action-button__label\"]}>{children}</span>\n        {suffixIcon && (\n          <span className={styles[\"action-button__suffix-icon\"]}>\n            {suffixIcon}\n          </span>\n        )}\n      </span>\n      {loading && (\n        <span className={styles[\"action-button__spinner\"]} aria-hidden=\"true\">\n          <svg\n            className={styles[\"action-button__spinner-svg\"]}\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle\n              className={styles[\"action-button__spinner-circle\"]}\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"4\"\n              strokeLinecap=\"round\"\n              strokeDasharray=\"32\"\n              strokeDashoffset=\"32\"\n            >\n              <animate\n                attributeName=\"stroke-dasharray\"\n                dur=\"2s\"\n                values=\"0 40;40 40;0 40\"\n                repeatCount=\"indefinite\"\n              />\n              <animate\n                attributeName=\"stroke-dashoffset\"\n                dur=\"2s\"\n                values=\"0;-40;-80\"\n                repeatCount=\"indefinite\"\n              />\n            </circle>\n          </svg>\n        </span>\n      )}\n    </button>\n  );\n};\n\n// 기존 Button 컴포넌트는 하위 호환성을 위해 유지\nexport interface ButtonProps {\n  /** Is this the principal call to action on the page? */\n  primary?: boolean;\n  /** What background color to use */\n  backgroundColor?: string;\n  /** How large should the button be? */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Button contents */\n  label: string;\n  /** Optional click handler */\n  onClick?: () => void;\n}\n\n/** Primary UI component for user interaction */\nexport const Button = ({\n  primary = false,\n  size = \"medium\",\n  backgroundColor,\n  label,\n  ...props\n}: ButtonProps) => {\n  const mode = primary\n    ? styles[\"storybook-button--primary\"]\n    : styles[\"storybook-button--secondary\"];\n  return (\n    <button\n      type=\"button\"\n      className={[\n        styles[\"storybook-button\"],\n        styles[`storybook-button--${size}`],\n        mode,\n      ].join(\" \")}\n      style={{ backgroundColor }}\n      {...props}\n    >\n      {label}\n    </button>\n  );\n};\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** 버튼 크기 */\n  size?: IconButtonSize;\n  /** 버튼 타입 (primary 또는 neutral) */\n  variant?: IconButtonVariant;\n  /** 버튼 모양 (solid, outline, weak) */\n  iconType?: IconButtonType;\n  /** 버튼 상태 */\n  state?: IconButtonState;\n  /** 아이콘 (Heroicons 또는 React 컴포넌트) */\n  icon: React.ReactNode;\n  /** 아이콘에 대한 접근성 라벨 */\n  \"aria-label\": string;\n}\n\n/** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */\nexport const IconButton = ({\n  size = \"large\",\n  variant = \"primary\",\n  iconType = \"solid\",\n  state = \"enabled\",\n  icon,\n  className = \"\",\n  disabled,\n  type = \"button\",\n  ...props\n}: IconButtonProps) => {\n  const isDisabled = disabled || state === \"disabled\";\n  // weak 타입은 disabled 상태를 가지지 않음\n  const actualState = iconType === \"weak\" && isDisabled ? \"enabled\" : state;\n\n  const baseClasses = [\n    styles[\"icon-button\"],\n    styles[`icon-button--${size}`],\n    styles[`icon-button--${variant}`],\n    styles[`icon-button--${iconType}`],\n    styles[`icon-button--${actualState}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button\n      type={type}\n      className={baseClasses}\n      disabled={isDisabled}\n      {...props}\n    >\n      <span className={styles[\"icon-button__icon\"]}>{icon}</span>\n    </button>\n  );\n};\n",".storybook-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  padding: 15px 20px;\n  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}\n\n.storybook-header svg {\n  display: inline-block;\n  vertical-align: top;\n}\n\n.storybook-header h1 {\n  display: inline-block;\n  vertical-align: top;\n  margin: 6px 0 6px 10px;\n  font-weight: 700;\n  font-size: 20px;\n  line-height: 1;\n}\n\n.storybook-header button + button {\n  margin-left: 10px;\n}\n\n.storybook-header .welcome {\n  margin-right: 10px;\n  color: #333;\n  font-size: 14px;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;;;ACoEM;AAmEC,IAAM,SAAS,CAAC,OAMJ;AANI,eACrB;AAAA,cAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EA3IF,IAuIuB,IAKlB,kBALkB,IAKlB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,OAAO,UACT,eAAO,2BAA2B,IAClC,eAAO,6BAA6B;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT,eAAO,kBAAkB;AAAA,QACzB,eAAO,qBAAqB,IAAI,EAAE;AAAA,QAClC;AAAA,MACF,EAAE,KAAK,GAAG;AAAA,MACV,OAAO,EAAE,gBAAgB;AAAA,OACrB,QARL;AAAA,MAUE;AAAA;AAAA,EACH;AAEJ;;;AC/JA;;;AH6BU,IAAAA,sBAAA;AAfH,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,6CAAC,YACC,wDAAC,SAAI,WAAW,eAAO,kBAAkB,GACvC;AAAA,gDAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,OAAM;AAAA,QAEN,wDAAC,OAAE,MAAK,QAAO,UAAS,WACtB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA;AAAA,UACP;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA;AAAA,UACP;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA;AAAA,UACP;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA,6CAAC,QAAG,kBAAI;AAAA,KACV;AAAA,EACA,6CAAC,SACE,iBACC,8EACE;AAAA,kDAAC,UAAK,WAAU,WAAU;AAAA;AAAA,MACf,6CAAC,OAAG,eAAK,MAAK;AAAA,MAAI;AAAA,OAC7B;AAAA,IACA,6CAAC,UAAO,MAAK,SAAQ,SAAS,UAAU,OAAM,WAAU;AAAA,KAC1D,IAEA,8EACE;AAAA,iDAAC,UAAO,MAAK,SAAQ,SAAS,SAAS,OAAM,UAAS;AAAA,IACtD;AAAA,MAAC;AAAA;AAAA,QACC,SAAO;AAAA,QACP,MAAK;AAAA,QACL,SAAS;AAAA,QACT,OAAM;AAAA;AAAA,IACR;AAAA,KACF,GAEJ;AAAA,GACF,GACF;","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../src/stories/Header.tsx","../src/stories/Button.tsx"],"sourcesContent":["import { Button } from \"./Button\";\n\ntype User = {\n  name: string;\n};\n\nexport interface HeaderProps {\n  user?: User;\n  onLogin?: () => void;\n  onLogout?: () => void;\n  onCreateAccount?: () => void;\n}\n\nexport const Header = ({\n  user,\n  onLogin,\n  onLogout,\n  onCreateAccount,\n}: HeaderProps) => (\n  <header>\n    <div className=\"storybook-header\">\n      <div>\n        <svg\n          width=\"32\"\n          height=\"32\"\n          viewBox=\"0 0 32 32\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <g fill=\"none\" fillRule=\"evenodd\">\n            <path\n              d=\"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z\"\n              fill=\"#FFF\"\n            />\n            <path\n              d=\"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z\"\n              fill=\"#555AB9\"\n            />\n            <path\n              d=\"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z\"\n              fill=\"#91BAF8\"\n            />\n          </g>\n        </svg>\n        <h1>Acme</h1>\n      </div>\n      <div>\n        {user ? (\n          <>\n            <span className=\"welcome\">\n              Welcome, <b>{user.name}</b>!\n            </span>\n            <Button size=\"small\" onClick={onLogout} label=\"Log out\" />\n          </>\n        ) : (\n          <>\n            <Button size=\"small\" onClick={onLogin} label=\"Log in\" />\n            <Button\n              primary\n              size=\"small\"\n              onClick={onCreateAccount}\n              label=\"Sign up\"\n            />\n          </>\n        )}\n      </div>\n    </div>\n  </header>\n);\n","import React from \"react\";\n\nexport type ButtonSize = \"xlarge\" | \"large\" | \"medium\" | \"small\";\nexport type ButtonVariant = \"primary\" | \"neutral\" | \"secondary\";\nexport type ButtonShape = \"solid\" | \"outline\" | \"ghost\";\nexport type ButtonState = \"enabled\" | \"hovered\" | \"loading\" | \"disabled\";\n\nexport type IconButtonSize = \"xlarge\" | \"large\" | \"medium\" | \"small\";\nexport type IconButtonVariant = \"primary\" | \"neutral\";\nexport type IconButtonType = \"solid\" | \"outline\" | \"weak\";\nexport type IconButtonState = \"enabled\" | \"hovered\" | \"disabled\";\n\nexport interface ActionButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\"> {\n  /** 버튼 크기 */\n  size?: ButtonSize;\n  /** 버튼 타입 (primary, neutral, secondary) */\n  variant?: ButtonVariant;\n  /** 버튼 모양 (solid, outline, ghost) */\n  shape?: ButtonShape;\n  /** 버튼 상태 */\n  state?: ButtonState;\n  /** 버튼 텍스트 */\n  children: React.ReactNode;\n  /** Prefix 아이콘 */\n  prefixIcon?: React.ReactNode;\n  /** Suffix 아이콘 */\n  suffixIcon?: React.ReactNode;\n  /** 로딩 상태일 때 표시할 스피너 */\n  loading?: boolean;\n}\n\n/** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */\nexport const ActionButton = ({\n  size = \"medium\",\n  variant = \"primary\",\n  shape = \"solid\",\n  state = \"enabled\",\n  children,\n  prefixIcon,\n  suffixIcon,\n  loading = false,\n  className = \"\",\n  disabled,\n  ...props\n}: ActionButtonProps) => {\n  const isDisabled = disabled || state === \"disabled\" || loading;\n  const actualState = loading ? \"loading\" : state;\n\n  const baseClasses = [\n    \"action-button\",\n    `action-button--${size}`,\n    `action-button--${variant}`,\n    `action-button--${shape}`,\n    `action-button--${actualState}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button\n      type=\"button\"\n      className={baseClasses}\n      disabled={isDisabled}\n      {...props}\n    >\n      <span className=\"action-button__content\">\n        {prefixIcon && (\n          <span className=\"action-button__prefix-icon\">{prefixIcon}</span>\n        )}\n        <span className=\"action-button__label\">{children}</span>\n        {suffixIcon && (\n          <span className=\"action-button__suffix-icon\">{suffixIcon}</span>\n        )}\n      </span>\n      {loading && (\n        <span className=\"action-button__spinner\" aria-hidden=\"true\">\n          <svg\n            className=\"action-button__spinner-svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle\n              className=\"action-button__spinner-circle\"\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"4\"\n              strokeLinecap=\"round\"\n              strokeDasharray=\"32\"\n              strokeDashoffset=\"32\"\n            >\n              <animate\n                attributeName=\"stroke-dasharray\"\n                dur=\"2s\"\n                values=\"0 40;40 40;0 40\"\n                repeatCount=\"indefinite\"\n              />\n              <animate\n                attributeName=\"stroke-dashoffset\"\n                dur=\"2s\"\n                values=\"0;-40;-80\"\n                repeatCount=\"indefinite\"\n              />\n            </circle>\n          </svg>\n        </span>\n      )}\n    </button>\n  );\n};\n\n// 기존 Button 컴포넌트는 하위 호환성을 위해 유지\nexport interface ButtonProps {\n  /** Is this the principal call to action on the page? */\n  primary?: boolean;\n  /** What background color to use */\n  backgroundColor?: string;\n  /** How large should the button be? */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Button contents */\n  label: string;\n  /** Optional click handler */\n  onClick?: () => void;\n}\n\n/** Primary UI component for user interaction */\nexport const Button = ({\n  primary = false,\n  size = \"medium\",\n  backgroundColor,\n  label,\n  ...props\n}: ButtonProps) => {\n  const mode = primary\n    ? \"storybook-button--primary\"\n    : \"storybook-button--secondary\";\n  return (\n    <button\n      type=\"button\"\n      className={[\"storybook-button\", `storybook-button--${size}`, mode].join(\n        \" \"\n      )}\n      style={{ backgroundColor }}\n      {...props}\n    >\n      {label}\n    </button>\n  );\n};\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** 버튼 크기 */\n  size?: IconButtonSize;\n  /** 버튼 타입 (primary 또는 neutral) */\n  variant?: IconButtonVariant;\n  /** 버튼 모양 (solid, outline, weak) */\n  iconType?: IconButtonType;\n  /** 버튼 상태 */\n  state?: IconButtonState;\n  /** 아이콘 (Heroicons 또는 React 컴포넌트) */\n  icon: React.ReactNode;\n  /** 아이콘에 대한 접근성 라벨 */\n  \"aria-label\": string;\n}\n\n/** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */\nexport const IconButton = ({\n  size = \"large\",\n  variant = \"primary\",\n  iconType = \"solid\",\n  state = \"enabled\",\n  icon,\n  className = \"\",\n  disabled,\n  type = \"button\",\n  ...props\n}: IconButtonProps) => {\n  const isDisabled = disabled || state === \"disabled\";\n  // weak 타입은 disabled 상태를 가지지 않음\n  const actualState = iconType === \"weak\" && isDisabled ? \"enabled\" : state;\n\n  const baseClasses = [\n    \"icon-button\",\n    `icon-button--${size}`,\n    `icon-button--${variant}`,\n    `icon-button--${iconType}`,\n    `icon-button--${actualState}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button\n      type={type}\n      className={baseClasses}\n      disabled={isDisabled}\n      {...props}\n    >\n      <span className=\"icon-button__icon\">{icon}</span>\n    </button>\n  );\n};\n"],"mappings":"s6BAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,IAAA,eAAAC,EAAAH,GCmEM,IAAAI,EAAA,6BA+DC,IAAMC,EAAUC,GAMJ,CANI,IAAAC,EAAAD,EACrB,SAAAE,EAAU,GACV,KAAAC,EAAO,SACP,gBAAAC,EACA,MAAAC,CAtIF,EAkIuBJ,EAKlBK,EAAAC,EALkBN,EAKlB,CAJH,UACA,OACA,kBACA,UAGA,IAAMO,EAAON,EACT,4BACA,8BACJ,SACE,OAAC,SAAAO,EAAAC,EAAA,CACC,KAAK,SACL,UAAW,CAAC,mBAAoB,qBAAqBP,CAAI,GAAIK,CAAI,EAAE,KACjE,GACF,EACA,MAAO,CAAE,gBAAAJ,CAAgB,GACrBE,GANL,CAQE,SAAAD,GACH,CAEJ,ED5HU,IAAAM,EAAA,6BAfGC,EAAS,CAAC,CACrB,KAAAC,EACA,QAAAC,EACA,SAAAC,EACA,gBAAAC,CACF,OACE,OAAC,UACC,oBAAC,OAAI,UAAU,mBACb,qBAAC,OACC,oBAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,MAAM,6BAEN,oBAAC,KAAE,KAAK,OAAO,SAAS,UACtB,oBAAC,QACC,EAAE,oFACF,KAAK,OACP,KACA,OAAC,QACC,EAAE,mEACF,KAAK,UACP,KACA,OAAC,QACC,EAAE,iEACF,KAAK,UACP,GACF,EACF,KACA,OAAC,MAAG,gBAAI,GACV,KACA,OAAC,OACE,SAAAH,KACC,oBACE,qBAAC,QAAK,UAAU,UAAU,yBACf,OAAC,KAAG,SAAAA,EAAK,KAAK,EAAI,KAC7B,KACA,OAACI,EAAA,CAAO,KAAK,QAAQ,QAASF,EAAU,MAAM,UAAU,GAC1D,KAEA,oBACE,oBAACE,EAAA,CAAO,KAAK,QAAQ,QAASH,EAAS,MAAM,SAAS,KACtD,OAACG,EAAA,CACC,QAAO,GACP,KAAK,QACL,QAASD,EACT,MAAM,UACR,GACF,EAEJ,GACF,EACF","names":["Header_exports","__export","Header","__toCommonJS","import_jsx_runtime","Button","_a","_b","primary","size","backgroundColor","label","props","__objRest","mode","__spreadProps","__spreadValues","import_jsx_runtime","Header","user","onLogin","onLogout","onCreateAccount","Button"]}

package/dist/Header.mjs

@@ -1,9 +1,2 @@
-import {
-  Header
-} from "./chunk-DDHQ5ZFF.mjs";
-import "./chunk-6BR7YIWI.mjs";
-import "./chunk-22Q3FVTV.mjs";
-export {
-  Header
-};
+import{a}from"./chunk-RYQQG4LH.mjs";import"./chunk-HI5DDIGM.mjs";import"./chunk-SV46H7N2.mjs";export{a as Header};
 //# sourceMappingURL=Header.mjs.map