@likelion-design/ui 0.1.7 → 1.0.0

package/dist/index.js

@@ -1,407 +1,2 @@
-"use strict";
-var __create = Object.create;
-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 __getProtoOf = Object.getPrototypeOf;
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  ActionButton: () => ActionButton,
-  Button: () => Button,
-  Header: () => Header,
-  IconButton: () => IconButton,
-  Page: () => Page
-});
-module.exports = __toCommonJS(src_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 })
-    })
-  );
-};
-
-// 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"
-      }
-    )
-  ] }) })
-] }) });
-
-// src/stories/Page.tsx
-var import_react = __toESM(require("react"));
-
-// src/stories/page.module.css
-var page_default = {};
-
-// src/stories/Page.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Page = () => {
-  const [user, setUser] = import_react.default.useState();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("article", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      Header,
-      {
-        user,
-        onLogin: () => setUser({ name: "Jane Doe" }),
-        onLogout: () => setUser(void 0),
-        onCreateAccount: () => setUser({ name: "Jane Doe" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { className: page_default["storybook-page"], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { children: "Pages in Storybook" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { children: [
-        "We recommend building UIs with a",
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "a",
-          {
-            href: "https://componentdriven.org",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "component-driven" })
-          }
-        ),
-        " ",
-        "process starting with atomic components and ending with pages."
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: 'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories' }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { children: [
-        "Get a guided tutorial on component-driven development at",
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "a",
-          {
-            href: "https://storybook.js.org/tutorials/",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            children: "Storybook tutorials"
-          }
-        ),
-        ". Read more in the",
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "a",
-          {
-            href: "https://storybook.js.org/docs",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            children: "docs"
-          }
-        ),
-        "."
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: page_default["tip-wrapper"], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: page_default["tip"], children: "Tip" }),
-        " Adjust the width of the canvas with the",
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "svg",
-          {
-            width: "10",
-            height: "10",
-            viewBox: "0 0 12 12",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "path",
-              {
-                d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",
-                id: "a",
-                fill: "#999"
-              }
-            ) })
-          }
-        ),
-        "Viewports addon in the toolbar"
-      ] })
-    ] })
-  ] });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ActionButton,
-  Button,
-  Header,
-  IconButton,
-  Page
-});
+"use strict";var xo=Object.create;var O=Object.defineProperty,yo=Object.defineProperties,vo=Object.getOwnPropertyDescriptor,Io=Object.getOwnPropertyDescriptors,ko=Object.getOwnPropertyNames,$=Object.getOwnPropertySymbols,wo=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty,ro=Object.prototype.propertyIsEnumerable;var ao=(o,e,t)=>e in o?O(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,h=(o,e)=>{for(var t in e||(e={}))J.call(e,t)&&ao(o,t,e[t]);if($)for(var t of $(e))ro.call(e,t)&&ao(o,t,e[t]);return o},k=(o,e)=>yo(o,Io(e));var y=(o,e)=>{var t={};for(var a in o)J.call(o,a)&&e.indexOf(a)<0&&(t[a]=o[a]);if(o!=null&&$)for(var a of $(o))e.indexOf(a)<0&&ro.call(o,a)&&(t[a]=o[a]);return t};var _o=(o,e)=>{for(var t in e)O(o,t,{get:e[t],enumerable:!0})},io=(o,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of ko(e))!J.call(o,i)&&i!==t&&O(o,i,{get:()=>e[i],enumerable:!(a=vo(e,i))||a.enumerable});return o};var F=(o,e,t)=>(t=o!=null?xo(wo(o)):{},io(e||!o||!o.__esModule?O(t,"default",{value:o,enumerable:!0}):t,o)),Co=o=>io(O({},"__esModule",{value:!0}),o);var Do={};_o(Do,{ActionButton:()=>U,Button:()=>U,Chip:()=>V,ChipGroup:()=>q,Dialog:()=>X,IconButton:()=>co,Tab:()=>j,TabGroup:()=>W,useDialog:()=>to});module.exports=Co(Do);var no=F(require("react"));var D=l=>{var n=l,{variant:o,decoration:e="none",as:t,children:a,className:i=""}=n,c=y(n,["variant","decoration","as","children","className"]);let s=(()=>{if(o.startsWith("heading-")){let u=o.split("-")[1];return u.startsWith("d")?"h1":u}return o.startsWith("subtitle-")?"h3":"p"})(),r=t||s,b=["typography",`typography--${o}`,e!=="none"&&`typography--decoration-${e}`,i].filter(Boolean).join(" ");return no.default.createElement(r,h({className:b},c),a)};var w=require("react/jsx-runtime"),U=u=>{var m=u,{size:o="medium",color:e="primary",type:t="solid",state:a="enabled",label:i,prefixIcon:c,suffixIcon:l,loading:n=!1,className:s="",disabled:r}=m,b=y(m,["size","color","type","state","label","prefixIcon","suffixIcon","loading","className","disabled"]);let f=r||a==="disabled",g=a;t==="ghost"?(a==="hovered"||a==="loading"||n)&&(g="enabled"):g=n?"loading":a;let p=["action-button",`action-button--${o}`,`action-button--${e}`,`action-button--${t}`,`action-button--${g}`,s].filter(Boolean).join(" "),x=o==="xlarge"?"heading-h6":o==="large"||o==="medium"?"subtitle-p2":"subtitle-p3";return(0,w.jsxs)("button",k(h({type:"button",className:p,disabled:f},b),{children:[(0,w.jsxs)("span",{className:"action-button__content",children:[c&&(0,w.jsx)("span",{className:"action-button__prefix-icon",children:c}),(0,w.jsx)("p",{className:"action-button__label",children:(0,w.jsx)(D,{variant:x,children:i})}),l&&(0,w.jsx)("span",{className:"action-button__suffix-icon",children:l})]}),n&&t!=="ghost"&&(0,w.jsx)("span",{className:"action-button__spinner","aria-hidden":"true",children:(0,w.jsx)("svg",{className:"action-button__spinner-svg",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,w.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,w.jsx)("animate",{attributeName:"stroke-dasharray",dur:"2s",values:"0 40;40 40;0 40",repeatCount:"indefinite"}),(0,w.jsx)("animate",{attributeName:"stroke-dashoffset",dur:"2s",values:"0;-40;-80",repeatCount:"indefinite"})]})})})]}))};var Y=require("react/jsx-runtime"),co=u=>{var m=u,{size:o="large",color:e="primary",type:t="solid",state:a="enabled",icon:i,className:c="",disabled:l,htmlType:n="button",style:s,customColor:r}=m,b=y(m,["size","color","type","state","icon","className","disabled","htmlType","style","customColor"]);let f=l||a==="disabled",g=t==="weak",p=g&&f?"enabled":a,x=r?"":g?`icon-button--weak-${e}`:`icon-button--${e}`,B=g?"icon-button--weak":`icon-button--${t}`,S=["icon-button",`icon-button--${o}`,x,B,`icon-button--${p}`,c].filter(Boolean).join(" "),d=g&&f,v=h(h({},(r==null?void 0:r.background)&&{backgroundColor:r.background}),(r==null?void 0:r.color)&&{color:r.color});return(0,Y.jsx)("button",k(h({type:n,className:S,disabled:f,style:h(h(h({},s),v),d?{opacity:0,pointerEvents:"none"}:{})},b),{children:(0,Y.jsx)("span",{className:"icon-button__icon",children:i})}))};var z=F(require("react"));var Z=require("react/jsx-runtime"),lo=l=>{var n=l,{type:o="number",variant:e="primary",value:t,maxValue:a=99,className:i=""}=n,c=y(n,["type","variant","value","maxValue","className"]);let s=["badge",`badge--${e}`,`badge--${o}`,i].filter(Boolean).join(" "),r=o==="number"&&t!==void 0?typeof t=="number"&&t>a?`${a}+`:String(t):null;return(0,Z.jsx)("span",k(h({className:s},c),{children:o==="number"&&r&&(0,Z.jsx)(D,{variant:"subtitle-p3",as:"span",children:r})}))};var M=require("react/jsx-runtime"),j=b=>{var u=b,{type:o="round",size:e="large",badge:t=!1,label:a,mode:i=!1,className:c="",selected:l,disabled:n=!1,onClick:s}=u,r=y(u,["type","size","badge","label","mode","className","selected","disabled","onClick"]);let[m,f]=(0,z.useState)(!1),g=l!==void 0,p=g?l:m,x=d=>{n||(g||f(v=>!v),s==null||s(d))},B=n?"disabled":p?"pressed":"enabled",S=["tab",`tab--${o}`,`tab--${e}`,`tab--${B}`,i&&"tab--dark",c].filter(Boolean).join(" ");return(0,M.jsxs)("button",k(h({type:"button",className:S,"aria-pressed":p,disabled:n,onClick:x},r),{children:[(0,M.jsx)("span",{className:"tab__label",children:a}),t&&(0,M.jsx)(lo,{type:"dot",variant:"primary",className:"tab__badge","aria-label":"\uC54C\uB9BC"})]}))},W=({value:o,defaultValue:e,onChange:t,type:a="round",size:i="large",mode:c=!1,disabled:l=!1,children:n,className:s=""})=>{let[r,b]=z.default.useState(e),u=o!==void 0,m=u?o:r,f=["tab-group",`tab-group--${a}`,`tab-group--${i}`,c&&"tab-group--dark",l&&"tab-group--disabled",s].filter(Boolean).join(" "),g=z.default.Children.map(n,p=>{var x,B,S;if(z.default.isValidElement(p)&&p.type===j){let d=p.props.value;if(d===void 0)return console.warn("Tab.Group \uB0B4\uBD80\uC758 Tab\uC740 value prop\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."),p;let v=m===d;return z.default.cloneElement(p,{type:(x=p.props.type)!=null?x:a,size:(B=p.props.size)!=null?B:i,mode:(S=p.props.mode)!=null?S:c,selected:v,disabled:l||p.props.disabled,role:"tab","aria-selected":v,onClick:T=>{var _,A;u||b(d),t==null||t(d),(A=(_=p.props).onClick)==null||A.call(_,T)}})}return p});return(0,M.jsx)("div",{className:f,role:"tablist",children:g})};W.displayName="TabGroup";j.Group=W;var P=F(require("react"));var L=F(require("react"),1);function Bo(i,a){var c=i,{title:o,titleId:e}=c,t=y(c,["title","titleId"]);return L.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:a,"aria-labelledby":e},t),o?L.createElement("title",{id:e},o):null,L.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m4.5 12.75 6 6 9-13.5"}))}var So=L.forwardRef(Bo),oo=So;var C=require("react/jsx-runtime"),V=S=>{var d=S,{type:o="solid",size:e="medium",variant:t="primary",value:a,onChange:i,checked:c,defaultChecked:l=!1,selectedValue:n,selectedValues:s,label:r,prefixIcon:b,suffixIcon:u,showClose:m=!1,onClose:f,className:g="",disabled:p,onClick:x}=d,B=y(d,["type","size","variant","value","onChange","checked","defaultChecked","selectedValue","selectedValues","label","prefixIcon","suffixIcon","showClose","onClose","className","disabled","onClick"]);let[v,T]=P.default.useState(l),_=c!==void 0,A=P.default.useMemo(()=>_?c:n!=null?n===a:s!==void 0?s.includes(a):v,[_,c,n,s,a,v]),R=b||o==="outline"&&A&&!b&&(0,C.jsx)(oo,{className:"chip__check-icon",style:{width:e==="small"?"14px":"16px",height:e==="small"?"14px":"16px"}}),E=!!R,eo=!!(u||m),uo=E&&eo?"chip--has-prefix-suffix":E?"chip--has-prefix":eo?"chip--has-suffix":"chip--no-icon",mo=["chip",`chip--${o}`,`chip--${e}`,`chip--${t}`,uo,A&&"chip--checked",p&&"chip--disabled",g].filter(Boolean).join(" "),go=H=>{p||(!_&&n===void 0&&s===void 0&&T(bo=>!bo),i&&i(a),x==null||x(H))},ho=H=>{H.stopPropagation(),f&&!p&&f(H)};return(0,C.jsxs)("button",k(h({type:"button",className:mo,disabled:p,onClick:go,"aria-pressed":A},B),{children:[R&&(0,C.jsx)("span",{className:"chip__prefix-icon",children:R}),(0,C.jsx)(D,{variant:e==="small"?"body-p3":"body-p2",children:r}),u&&!m&&(0,C.jsx)("span",{className:"chip__suffix-icon",children:u}),m&&(0,C.jsx)("button",{type:"button",className:"chip__close-button",onClick:ho,disabled:p,"aria-label":"Close",children:(0,C.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,C.jsx)("path",{d:"M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM10.7803 5.21973C10.4874 4.92683 10.0126 4.92683 9.71973 5.21973L8 6.93945L6.28027 5.21973C5.98738 4.92683 5.51262 4.92683 5.21973 5.21973C4.92683 5.51262 4.92683 5.98738 5.21973 6.28027L6.93945 8L5.21973 9.71973C4.92683 10.0126 4.92683 10.4874 5.21973 10.7803C5.51262 11.0732 5.98738 11.0732 6.28027 10.7803L8 9.06055L9.71973 10.7803C10.0126 11.0732 10.4874 11.0732 10.7803 10.7803C11.0732 10.4874 11.0732 10.0126 10.7803 9.71973L9.06055 8L10.7803 6.28027C11.0732 5.98738 11.0732 5.51262 10.7803 5.21973Z",fill:"currentColor",fillOpacity:"0.56"})})})]}))},q=({value:o,defaultValue:e,onChange:t,multiple:a=!1,type:i="solid",size:c="medium",variant:l="primary",disabled:n=!1,children:s,className:r=""})=>{let[b,u]=P.default.useState(()=>e!=null?e:a?[]:""),m=o!==void 0,f=m?o:b,g=d=>{if(a){let v=Array.isArray(f)?f:[],T=v.includes(d)?v.filter(_=>_!==d):[...v,d];m||u(T),t==null||t(d)}else m||u(d),t==null||t(d)},p=a?void 0:f,x=a?f:void 0,B=["chip-group",r].filter(Boolean).join(" "),S=P.default.Children.map(s,d=>{var v,T,_;return P.default.isValidElement(d)&&d.type===V?d.props.value===void 0?(console.warn("Chip.Group \uB0B4\uBD80\uC758 Chip\uC740 value prop\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."),d):P.default.cloneElement(d,{type:(v=d.props.type)!=null?v:i,size:(T=d.props.size)!=null?T:c,variant:(_=d.props.variant)!=null?_:l,selectedValue:p,selectedValues:x,onChange:K=>{var R,E;g(K),(E=(R=d.props).onChange)==null||E.call(R,K)},disabled:n||d.props.disabled}):d});return(0,C.jsx)("div",{className:B,children:S})};q.displayName="ChipGroup";V.Group=q;var G=F(require("react")),fo=require("react-dom");var N=require("react"),so=(0,N.createContext)(null),ht=so.Provider;function Q(o){return(0,N.useSyncExternalStore)(i=>{let c=window.matchMedia(o);return c.addEventListener("change",i),()=>c.removeEventListener("change",i)},()=>window.matchMedia(o).matches,()=>!1)}function po(){var c,l,n,s;let o=(0,N.useContext)(so),e=Q("(min-width: 375px) and (max-width: 743px)"),t=Q("(min-width: 744px) and (max-width: 1279px)"),a=Q("(min-width: 1280px)"),i=Q("(max-width: 743px)");return{isMobile:(c=o==null?void 0:o.isMobile)!=null?c:e,isTablet:(l=o==null?void 0:o.isTablet)!=null?l:t,isDesktop:(n=o==null?void 0:o.isDesktop)!=null?n:a,isUnderTablet:(s=o==null?void 0:o.isUnderTablet)!=null?s:i}}var I=require("react/jsx-runtime"),X=u=>{var m=u,{open:o=!0,variant:e="confirm",align:t,title:a,description:i,icon:c,actionItems:l,footerLayout:n="horizontal",onActionClose:s,className:r=""}=m,b=y(m,["open","variant","align","title","description","icon","actionItems","footerLayout","onActionClose","className"]);let{isUnderTablet:f}=po();if(!o)return null;let g=t!=null?t:e==="alert"?"left":"center";console.log(e,f);let p=["dialog",`dialog--${e}`,`dialog--${g}`,f?"is-mobile":"",r].filter(Boolean).join(" "),x=["dialog__footer",`dialog__footer--${n}`].filter(Boolean).join(" ");return(0,I.jsxs)("div",k(h({className:p},b),{children:[(c||a)&&(0,I.jsxs)("div",{className:"dialog__header",children:[c&&(0,I.jsx)("span",{className:"dialog__icon",children:c}),a&&(0,I.jsx)(D,{variant:f?"subtitle-p1":"heading-h6",children:a})]}),i&&(0,I.jsx)("div",{className:"dialog__body",children:(0,I.jsx)("div",{className:"body-p2",children:i})}),l&&l.length>0&&(0,I.jsx)("div",{className:x,children:To(f,e,l,n,s)})]}))},To=(o,e,t,a,i)=>{let c=a==="vertical"?"dialog__actions--vertical":"dialog__actions--horizontal",l=e==="confirm"?"100%":"auto",n=e==="alert"?o?"small":"medium":"large",s=e==="alert"?"outline":"solid";return(0,I.jsx)("div",{className:`dialog__actions ${c}`,children:t.map((r,b)=>{var m,f,g;let u=()=>{var p,x;(p=r.onClick)==null||p.call(r),((x=r.closeOnClick)==null||x)&&i&&i()};return(0,I.jsx)(U,{size:(m=r.size)!=null?m:n,color:(f=r.color)!=null?f:"neutral",type:(g=r.type)!=null?g:s,label:r.label,prefixIcon:r.prefixIcon,suffixIcon:r.suffixIcon,loading:r.loading,disabled:r.disabled,onClick:u,style:{width:l}},`${r.label}-${b}`)})})};function to(){let[o,e]=G.default.useState(null),t=G.default.useRef(void 0),a=l=>{e(l)},i=()=>{var l;(l=t.current)==null||l.call(t),e(null)};return G.default.useEffect(()=>{var s;if(!((s=o==null?void 0:o.closeOnEsc)!=null?s:!0))return;let n=r=>{r.key==="Escape"&&i()};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[o==null?void 0:o.closeOnEsc]),G.default.useEffect(()=>{t.current=o==null?void 0:o.onClose},[o==null?void 0:o.onClose]),{openDialog:a,closeDialog:i,DialogContainer:()=>{if(!o)return null;let u=o,{actionItems:l,footerLayout:n="horizontal",closeOnOverlayClick:s=!0}=u,r=y(u,["actionItems","footerLayout","closeOnOverlayClick"]),b=(0,I.jsxs)("div",{className:"dialog-overlay",role:"presentation",children:[(0,I.jsx)("button",{type:"button",className:"dialog-overlay__backdrop","aria-label":"Close dialog",onClick:s?i:void 0}),(0,I.jsx)("div",{className:"dialog-overlay__content",role:"dialog","aria-modal":"true",children:(0,I.jsx)(X,k(h({},r),{open:!0,actionItems:l,footerLayout:n,onActionClose:i}))})]});return(0,fo.createPortal)(b,document.body)}}}0&&(module.exports={ActionButton,Button,Chip,ChipGroup,Dialog,IconButton,Tab,TabGroup,useDialog});
 //# sourceMappingURL=index.js.map