@shoplflow/base 0.10.0 → 0.11.4

package/dist/index.cjs

@@ -1,179 +1,1755 @@
-"use strict";var Go=Object.create;var $=Object.defineProperty;var qo=Object.getOwnPropertyDescriptor;var Jo=Object.getOwnPropertyNames;var Qo=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var ee=(o,e)=>{for(var t in e)$(o,t,{get:e[t],enumerable:!0})},ro=(o,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Jo(e))!oe.call(o,n)&&n!==t&&$(o,n,{get:()=>e[n],enumerable:!(a=qo(e,n))||a.enumerable});return o};var d=(o,e,t)=>(t=o!=null?Go(Qo(o)):{},ro(e||!o||!o.__esModule?$(t,"default",{value:o,enumerable:!0}):t,o)),te=o=>ro($({},"__esModule",{value:!0}),o);var ir={};ee(ir,{ChipButton:()=>Zo,ChipButtonSizeVariants:()=>eo,ChipButtonStyleVariants:()=>oo,ChipToggle:()=>Yo,ChipToggleSizeVariants:()=>er,ChipToggleStyleVariants:()=>Z,MODAL_BODY_KEY:()=>U,MODAL_FOOTER_KEY:()=>B,MODAL_HEADER_KEY:()=>_,Modal:()=>or,ModalProvider:()=>V,ModalSize:()=>Bo,MotionStack:()=>Y,ShoplflowProvider:()=>fo,Stack:()=>xo,StyledChip:()=>G,StyledChipButton:()=>Q,StyledStack:()=>N,Text:()=>M,borderRadiusTokens:()=>y,boxShadowTokens:()=>H,colorTokens:()=>p,fontWeightTokens:()=>uo,getDomain:()=>re,spacingTokens:()=>O,typographyTokens:()=>go,useDomain:()=>I,useHandleModal:()=>ne,useModalStore:()=>g,useModalValue:()=>ae});module.exports=te(ir);var L=d(require("react"),1);var k=require("react"),I=({domain:o="SHOPL"})=>{let[e,t]=(0,k.useState)(void 0);(0,k.useEffect)(()=>{o&&t(o)},[o]),(0,k.useEffect)(()=>{e&&(document.documentElement.dataset.shoplflow=e?.toLowerCase())},[e])},re=()=>document.documentElement.dataset.shoplflow;var T=d(require("react"),1);var no=require("zustand"),g=(0,no.create)(o=>({modal:[],addModal:(e,t)=>o(a=>({modal:[...a.modal,{component:e,id:t}]})),removeModal:e=>{let{id:t,deps:a=1}=e||{id:void 0,deps:0},n=!!(t&&String(a)),s=!!t,l=!t&&!a,i=!!String(a)&&!t;if(n)throw new Error("id\uC640 deps\uB294 \uB3D9\uC2DC\uC5D0 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");if(s){o(r=>({modal:[...r.modal.filter(m=>m.id!==t)]}));return}if(l||a===1){o(r=>({modal:[...r.modal.slice(0,-1)]}));return}if(i){o(r=>({modal:[...r.modal.slice(0,-a+1)]}));return}}}));var ne=()=>{let o=g(t=>t.addModal),e=g(t=>t.removeModal);return{addModal:o,removeModal:e}};var ae=()=>({modal:g(e=>e.modal)});var lo=d(require("react"),1);var ao={initial:{opacity:0},animate:{opacity:1,transition:{duration:.1}},exit:{opacity:0,transition:{duration:.1}}};var po=d(require("@emotion/styled"),1),io=require("framer-motion"),so=(0,po.default)(io.motion.div)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 20000;
-  width: 100%;
-  height: 100%;
-  background: rgba(51, 51, 51, 0.6);
-`;var pe=({children:o})=>lo.default.createElement(so,{variants:ao,initial:"initial",animate:"animate",exit:"exit"},o),co=pe;var mo=require("react-dom"),E=require("framer-motion"),yo=d(require("@emotion/styled"),1),ie=(0,yo.default)(E.motion.div)`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  z-index: 101;
-  padding: 32px 20px;
-  width: 100%;
-  height: 100%;
-`,se=()=>{let o=g(e=>e.modal);return T.default.createElement(T.default.Fragment,null,(0,mo.createPortal)(T.default.createElement(E.AnimatePresence,null,o.map((e,t)=>T.default.createElement(co,{key:t},T.default.createElement(ie,null,e.component)))),document.body))},V=se;var le=({children:o,domain:e="SHOPL"})=>(I({domain:e}),L.default.createElement(L.default.Fragment,null,L.default.createElement(V,null),o)),fo=le;var de="var(--font-weight-regular)",ce="var(--font-weight-medium)",me="var(--font-weight-bold)",uo={fontWeightRegular:de,fontWeightMedium:ce,fontWeightBold:me},ye="var(--border-radius04)",fe="var(--border-radius06)",ue="var(--border-radius08)",ge="var(--border-radius12)",he="var(--border-radius16)",xe="var(--border-radius20)",y={borderRadius04:ye,borderRadius06:fe,borderRadius08:ue,borderRadius12:ge,borderRadius16:he,borderRadius20:xe},Te="var(--coolgray300)",Se="var(--coolgray200)",Me="var(--coolgray100)",be="var(--coolgray50)",Ce="var(--navy400)",Pe="var(--navy300)",ke="var(--neutral0)",ve="var(--neutral100)",_e="var(--neutral150)",Be="var(--neutral200)",we="var(--neutral300)",De="var(--neutral350)",$e="var(--neutral400)",Ee="var(--neutral500)",Ve="var(--neutral600)",Le="var(--neutral700)",Oe="var(--neutral400_5)",He="var(--red300)",Re="var(--red200)",Ae="var(--red100)",ze="var(--ocean300)",Xe="var(--ocean200)",Fe="var(--ocean100)",Ie="var(--purple400)",Ne="var(--purple300)",We="var(--purple100)",Ye="var(--yellow300)",Ke="var(--yellow200)",je="var(--yellow100)",Ue="var(--green300)",Ze="var(--green200)",Ge="var(--green100)",qe="var(--shopl400)",Je="var(--shopl300)",Qe="var(--shopl200)",ot="var(--shopl150)",et="var(--shopl100)",tt="var(--hada400)",rt="var(--hada300)",nt="var(--hada200)",at="var(--hada150)",pt="var(--hada100)",it="var(--background)",st="var(--primary100)",lt="var(--primary150)",dt="var(--primary200)",ct="var(--primary300)",mt="var(--primary400)",p={coolgray300:Te,coolgray200:Se,coolgray100:Me,coolgray50:be,navy400:Ce,navy300:Pe,neutral0:ke,neutral100:ve,neutral150:_e,neutral200:Be,neutral300:we,neutral350:De,neutral400:$e,neutral500:Ee,neutral600:Ve,neutral700:Le,neutral400_5:Oe,red300:He,red200:Re,red100:Ae,ocean300:ze,ocean200:Xe,ocean100:Fe,purple400:Ie,purple300:Ne,purple100:We,yellow300:Ye,yellow200:Ke,yellow100:je,green300:Ue,green200:Ze,green100:Ge,shopl400:qe,shopl300:Je,shopl200:Qe,shopl150:ot,shopl100:et,hada400:tt,hada300:rt,hada200:nt,hada150:at,hada100:pt,background:it,primary100:st,primary150:lt,primary200:dt,primary300:ct,primary400:mt},yt="var(--spacing04)",ft="var(--spacing06)",ut="var(--spacing08)",gt="var(--spacing12)",ht="var(--spacing16)",xt="var(--spacing20)",Tt="var(--spacing24)",St="var(--spacing30)",Mt="var(--spacing32)",bt="var(--spacing40)",O={spacing04:yt,spacing06:ft,spacing08:ut,spacing12:gt,spacing16:ht,spacing20:xt,spacing24:Tt,spacing30:St,spacing32:Mt,spacing40:bt},Ct="var(--dropShadow)",H={dropShadow:Ct},Pt=".heading1_700",kt=".heading1_400",vt=".heading2_700",_t=".heading2_400",Bt=".heading3_700",wt=".heading3_400",Dt=".title1_700",$t=".title1_400",Et=".title2_700",Vt=".title2_500",Lt=".title2_400",Ot=".body1_700",Ht=".body1_500",Rt=".body1_400",At=".body2_700",zt=".body2_500",Xt=".body2_400",Ft=".body3_400",It=".body3_500",Nt=".caption_400",go={heading1_700:Pt,heading1_400:kt,heading2_700:vt,heading2_400:_t,heading3_700:Bt,heading3_400:wt,title1_700:Dt,title1_400:$t,title2_700:Et,title2_500:Vt,title2_400:Lt,body1_700:Ot,body1_500:Ht,body1_400:Rt,body2_700:At,body2_500:zt,body2_400:Xt,body3_400:Ft,body3_500:It,caption_400:Nt};var R=d(require("react"),1),A=require("framer-motion");var ho=d(require("@emotion/styled"),1);var N=ho.default.div`
-  display: flex;
-  width: ${({width:o})=>o};
-  height: ${({height:o})=>o};
-  flex-direction: ${({direction:o})=>o};
-  align-items: ${({align:o})=>o};
-  justify-content: ${({justify:o})=>o};
-  gap: ${({spacing:o})=>o&&O[o]};
-  flex-wrap: ${({flexWrap:o})=>o};
-  flex: ${({flex:o})=>o};
-  background: ${({background:o})=>o?p[o]:"transparent"};
-  border-radius: ${({radius:o})=>o&&y[o]};
-  animation: 0.2s all ease-in-out;
-`;var W=o=>(0,R.forwardRef)(function({as:t="div",spacing:a=o?.spacing??"spacing08",direction:n=o?.direction??"column",align:s=o?.align??"flex-start",justify:l=o?.justify??"flex-start",width:i=o?.width??"initial",height:r=o?.height??"initial",flexWrap:c=o?.flexWrap??"initial",flex:m=o?.flex??"initial",radius:u=o?.radius,background:C=o?.background,...P},x){return R.default.createElement(N,{as:t,spacing:a,ref:x,direction:n,align:s,justify:l,width:i,height:r,flexWrap:c,flex:m,background:C,radius:u,...P},P.children)}),S=W();S.Vertical=W({direction:"column"});S.Horizontal=W({direction:"row"});var Y=(0,A.motion)(S);Y.Vertical=(0,A.motion)(S.Vertical);Y.Horizontal=(0,A.motion)(S.Horizontal);var xo=S;var Mo=require("react");var v=require("@emotion/react"),To=d(require("@emotion/styled"),1);var Wt=o=>v.css`
-    display: -webkit-box;
-    line-clamp: ${o};
-    -webkit-line-clamp: ${o};
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `,So=To.default.span`
-  display: ${({display:o})=>o&&o};
-  align-items: center;
-  color: ${({color:o})=>o&&p[o]};
-  ${({lineClamp:o})=>o&&Wt(o)};
-  text-align: ${({textAlign:o})=>o&&o};
-  white-space: ${({whiteSpace:o})=>o&&o};
-  ${({textDecorations:o})=>o&&v.css`
-      text-decoration: ${o};
-    `};
-  ${({opacity:o})=>o&&v.css`
-      opacity: ${o};
-    `}
-  ${({wordBreak:o})=>o&&v.css`
-      word-break: ${o};
-    `};
-`;var Yt=(0,Mo.forwardRef)(({children:o,typography:e="body1_400",whiteSpace:t,color:a="neutral700",display:n="inline-block",textAlign:s="start",className:l,as:i,...r},c)=>React.createElement(So,{ref:c,whiteSpace:t,className:l?`${e} ${l}`:e,color:a,display:n,textAlign:s,as:i,...r},o)),M=Yt;var f=d(require("react"),1);var b=d(require("@emotion/styled"),1),K=require("@emotion/react");var Kt=400,jt=500,Ut=560,bo=640,Zt=768,Gt=1040,qt=1280,j=o=>{switch(o){case"XXS":return Kt;case"XS":return jt;case"S":return Ut;case"M":return bo;case"L":return Zt;case"XL":return Gt;case"XXL":return qt;default:return bo}},Jt=o=>o?K.css`
-      padding-top: 16px;
-      padding-bottom: 24px;
-    `:K.css`
-    padding-top: 24px;
-    padding-bottom: 24px;
-  `,Co=b.default.div`
-  display: flex;
-  flex-direction: column;
-  border-radius: ${y.borderRadius08};
-  background: ${p.neutral0};
-  box-shadow: ${H.dropShadow};
-  overflow: hidden;
-  flex-grow: 1;
-  height: initial;
-  height: ${({height:o})=>o}px;
-  max-height: 1200px;
-  width: ${({sizeVar:o})=>j(o)}px;
-  max-width: ${({sizeVar:o})=>j(o)}px;
-`,Po=b.default.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px 12px 24px;
-  gap: 10px;
-  header: 64px;
-`,ko=b.default.div`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  flex-direction: column;
-  background: ${p.neutral0};
-  min-height: ${({height:o})=>o};
-  flex: 1;
-  ${({isIncludeHeader:o})=>Jt(o)}
-`,vo=b.default.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: ${({sizeVar:o})=>j(o)}px;
-  box-sizing: border-box;
-  padding: 0 24px;
-  overflow: hidden;
-  background: ${p.neutral0};
-`,_o=b.default.div`
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 16px 24px;
-  gap: 12px;
-  border-top: 1px solid ${p.neutral300};
-  background: ${p.neutral0};
-`;var Bo=(i=>(i.XXS="XXS",i.XS="XS",i.S="S",i.M="M",i.L="L",i.XL="XL",i.XXL="XXL",i))(Bo||{}),_=Symbol("MODAL_HEADER"),U=Symbol("MODAL_BODY"),B=Symbol("MODAL_FOOTER");var z=require("@shoplflow/utils"),Qt=({children:o,outsideClick:e=z.noop,...t})=>{let a=(0,z.useParentElementClick)(e),n=f.default.Children.toArray(o),s=n.find(r=>{if(!f.default.isValidElement(r)||r.type[_])return r}),l=n.find(r=>{if(!f.default.isValidElement(r)||r.type[B])return r}),i=f.Children.map(n,r=>f.default.isValidElement(r)?f.default.cloneElement(r,{isIncludeHeader:!!s,isIncludeFooter:!!l,sizeVar:t.sizeVar,height:t.height}):r);return f.default.createElement(Co,{ref:a,...t},i)},wo=Qt;var Do=d(require("react"),1);var $o=({children:o})=>Do.default.createElement(_o,null,o);$o[B]=!0;var Eo=$o;var h=d(require("react"),1);var Vo=d(require("react-custom-scrollbars-2"),1),Lo=require("@shoplflow/utils"),Oo=({children:o,isIncludeHeader:e=!1,isIncludeFooter:t=!1,sizeVar:a,height:n})=>{let{height:s}=(0,Lo.useResizeObserver)(document.body,{trackHeight:!0}),l=64,i=64,r=64,c=(0,h.useCallback)(()=>{let x=0;return e&&(x+=l),t&&(x+=i),x},[t,e]),m=(0,h.useMemo)(()=>c(),[c]),u=()=>n?n-m:"100%",C=s-r-m,P=1200-r-m;return h.default.createElement(ko,{isIncludeHeader:e,height:u()},h.default.createElement(Vo.default,{id:"scrollbar",autoHeight:!n,autoHeightMin:u(),autoHeightMax:s>1200?P:C,autoHide:!0,autoHideTimeout:1e3,autoHideDuration:200,style:{height:"100%",overflow:"hidden"}},h.default.createElement(vo,{isIncludeHeader:e,sizeVar:a},o)))};Oo[U]=!0;var Ho=Oo;var Ro=d(require("react"),1);var Ao=({children:o})=>Ro.default.createElement(Po,null,o);Ao[_]=!0;var zo=Ao;var or={Container:wo,Header:zo,Body:Ho,Footer:Eo};var q=d(require("react"),1);var w=require("react"),Xo=(o,e)=>{let[t,a]=(0,w.useState)(!1),n=o!==void 0,s=()=>{!n&&a(l=>!l)};return(0,w.useEffect)(()=>{n&&a(o)},[n,o]),(0,w.useEffect)(()=>{e&&a(e)},[e,n]),[t,s]};var Z={SOLID:"SOLID"},er={S:"S",XS:"XS"};var Io=d(require("@emotion/styled"),1),F=require("@emotion/react");var Fo=require("@emotion/react"),X=o=>{if(o)return Fo.css`
-    opacity: 50%;
-    cursor: not-allowed;
-  `};var No=o=>{switch(o){case"XS":return"body3_400";case"S":return"body2_400";default:return"body2_400"}},tr=({isSelected:o,color:e,radius:t})=>F.css`
-  padding: 7px 12px;
-  gap: 4px;
-  background: ${p.neutral150};
-  border-radius: ${y.borderRadius06};
-  & > span {
-    color: ${p.neutral400};
-  }
-  &:hover {
-    background: ${p.neutral200};
-  }
-
-  ${t&&F.css`
-    border-radius: ${y.borderRadius16};
-  `};
-  ${o&&F.css`
-    background: ${p[e]};
-    & > span {
-      color: ${p.neutral0};
-    }
-    &:hover {
-      background: ${p[e]};
-    }
-  `};
-`,G=Io.default.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  width: fit-content;
-  user-select: none;
-  cursor: pointer;
-  ${o=>o.styleVar==="SOLID"&&tr(o)};
-  ${({disabled:o})=>X(o)};
-`;var Wo=require("@shoplflow/utils"),rr=({text:o,isSelected:e,defaultSelected:t,color:a="neutral600",styleVar:n=Z.SOLID,sizeVar:s,leftSource:l,rightSource:i,onClick:r=Wo.noop,disabled:c=!1,...m})=>{let[u,C]=Xo(e,t);return q.default.createElement(G,{...m,color:a,isSelected:u,styleVar:n,sizeVar:s,onClick:x=>{!c&&C(),!c&&r&&r(x)},disabled:c},l,q.default.createElement(M,{typography:No(s)},o),i)},Yo=rr;var to=d(require("react"),1);var Ko=d(require("@emotion/styled"),1),D=require("@emotion/react");var J=(o,e=1)=>{let t=o.replace(/[0-9]|_/g,""),a=o.replace(/[a-z]|_/g,""),n=Number(a)+100*e,s=`${t}${n}`,l=Object.keys(p).filter(m=>m.includes(t)).sort((m,u)=>Number(m.replace(/[a-z]|_/g,""))-Number(u.replace(/[a-z]|_/g,""))),r=Object.keys(p).find(m=>m===s),c=l[l.length-1];return r||c};var jo=o=>{switch(o){case"XS":return"caption_400";case"S":return"body3_400";default:return"body3_400"}},nr=({color:o})=>D.css`
-  background: ${p.neutral0};
-  border: 1px solid ${p[o]};
-  border-radius: ${y.borderRadius20};
-  &:hover {
-    border: 1px solid ${p[J(o,2)]};
-  }
-  & > span {
-    color: ${p[J(o,4)]};
-  }
-`,ar=o=>{switch(o){case"XS":return D.css`
-        padding: 4px 8px;
-      `;case"S":return D.css`
-        padding: 7px 12px;
-      `;default:return D.css`
-        padding: 7px 12px;
-      `}},Q=Ko.default.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  width: fit-content;
-  gap: 4px;
-  cursor: pointer;
-  background: ${({background:o})=>o&&p[o]};
-  ${({sizeVar:o})=>ar(o)};
-  ${o=>o.styleVar==="LINE"&&nr(o)};
-  ${({disabled:o})=>X(o)};
-`;var Uo=require("@shoplflow/utils");var oo={LINE:"LINE"},eo={S:"S",XS:"XS"};var pr=({styleVar:o=oo.LINE,color:e="neutral200",sizeVar:t=eo.S,text:a,onClick:n=Uo.noop,disabled:s=!1,...l})=>to.default.createElement(Q,{styleVar:o,color:e,...l,onClick:r=>{!s&&n(r)},disabled:s},to.default.createElement(M,{typography:jo(t)},a)),Zo=pr;0&&(module.exports={ChipButton,ChipButtonSizeVariants,ChipButtonStyleVariants,ChipToggle,ChipToggleSizeVariants,ChipToggleStyleVariants,MODAL_BODY_KEY,MODAL_FOOTER_KEY,MODAL_HEADER_KEY,Modal,ModalProvider,ModalSize,MotionStack,ShoplflowProvider,Stack,StyledChip,StyledChipButton,StyledStack,Text,borderRadiusTokens,boxShadowTokens,colorTokens,fontWeightTokens,getDomain,spacingTokens,typographyTokens,useDomain,useHandleModal,useModalStore,useModalValue});
+"use strict";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 20000;\n  width: 100%;\n  height: 100%;\n  background: rgba(51, 51, 51, 0.6);\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n  z-index: 101;\n  padding: 32px 20px;\n  width: 100%;\n  height: 100%;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: ",
+        ";\n  height: ",
+        ";\n  flex-direction: ",
+        ";\n  align-items: ",
+        ";\n  justify-content: ",
+        ";\n  gap: ",
+        ";\n  flex-wrap: ",
+        ";\n  flex: ",
+        ";\n  background: ",
+        ";\n  border-radius: ",
+        ";\n  animation: 0.2s all ease-in-out;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n    display: -webkit-box;\n    line-clamp: ",
+        ";\n    -webkit-line-clamp: ",
+        ";\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  "
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n      text-decoration: ",
+        ";\n    "
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n      opacity: ",
+        ";\n    "
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    var data = _tagged_template_literal([
+        "\n      word-break: ",
+        ";\n    "
+    ]);
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    var data = _tagged_template_literal([
+        "\n  display: ",
+        ";\n  align-items: center;\n  color: ",
+        ";\n  ",
+        ";\n  text-align: ",
+        ";\n  white-space: ",
+        ";\n  ",
+        ";\n  ",
+        "\n  ",
+        ";\n"
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject8() {
+    var data = _tagged_template_literal([
+        "\n      padding-top: 16px;\n      padding-bottom: 24px;\n    "
+    ]);
+    _templateObject8 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject9() {
+    var data = _tagged_template_literal([
+        "\n    padding-top: 24px;\n    padding-bottom: 24px;\n  "
+    ]);
+    _templateObject9 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject10() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  flex-direction: column;\n  border-radius: ",
+        ";\n  background: ",
+        ";\n  box-shadow: ",
+        ";\n  overflow: hidden;\n  flex-grow: 1;\n  height: ",
+        ";\n  min-height: 180px;\n  max-height: 1200px;\n  width: ",
+        "px;\n  max-width: ",
+        "px;\n"
+    ]);
+    _templateObject10 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject11() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: 100%;\n  min-height: 64px;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px 12px 24px;\n  gap: 10px;\n"
+    ]);
+    _templateObject11 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject12() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  flex-direction: column;\n  background: ",
+        ";\n  min-height: 112px;\n  min-height: ",
+        ";\n  flex: 1;\n  ",
+        "\n"
+    ]);
+    _templateObject12 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject13() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: ",
+        "px;\n  box-sizing: border-box;\n  padding: 0 24px;\n  overflow: hidden;\n  background: ",
+        ";\n"
+    ]);
+    _templateObject13 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject14() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 16px 24px;\n  gap: 12px;\n  border-top: 1px solid ",
+        ";\n  background: ",
+        ";\n"
+    ]);
+    _templateObject14 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject15() {
+    var data = _tagged_template_literal([
+        "\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ",
+        ";\n\n  &:hover {\n    background: ",
+        ";\n  }\n"
+    ]);
+    _templateObject15 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject16() {
+    var data = _tagged_template_literal([
+        "\n  appearance: none;\n  border: none;\n  border-radius: 12px;\n  width: 28px;\n  height: 18px;\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: ",
+        ";\n  padding: 2px;\n  margin: 0;\n\n  // slider\n  &:before {\n    content: '';\n    left: 2px;\n    display: block;\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    background: ",
+        ";\n    border-radius: 50%;\n    transition: left 0.2s ease-in-out;\n  }\n\n  // selected\n  &:checked {\n    background: ",
+        ";\n    &:before {\n      left: 12px;\n    }\n  }\n\n  // disabled\n  &:disabled {\n    cursor: auto;\n  }\n"
+    ]);
+    _templateObject16 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject17() {
+    var data = _tagged_template_literal([
+        "\n    opacity: 50%;\n    cursor: not-allowed;\n  "
+    ]);
+    _templateObject17 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject18() {
+    var data = _tagged_template_literal([
+        "\n    border-radius: ",
+        ";\n  "
+    ]);
+    _templateObject18 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject19() {
+    var data = _tagged_template_literal([
+        "\n    background: ",
+        ";\n    & > span {\n      color: ",
+        ";\n    }\n    &:hover {\n      background: ",
+        ";\n    }\n  "
+    ]);
+    _templateObject19 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject20() {
+    var data = _tagged_template_literal([
+        "\n  padding: 7px 12px;\n  gap: 4px;\n  background: ",
+        ";\n  border-radius: ",
+        ";\n  & > span {\n    color: ",
+        ";\n  }\n  &:hover {\n    background: ",
+        ";\n  }\n\n  ",
+        ";\n  ",
+        ";\n"
+    ]);
+    _templateObject20 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject21() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  width: fit-content;\n  user-select: none;\n  cursor: pointer;\n  ",
+        ";\n  ",
+        ";\n"
+    ]);
+    _templateObject21 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject22() {
+    var data = _tagged_template_literal([
+        "\n  background: ",
+        ";\n  border: 1px solid ",
+        ";\n  border-radius: ",
+        ";\n  &:hover {\n    border: 1px solid ",
+        ";\n  }\n  & > span {\n    color: ",
+        ";\n  }\n"
+    ]);
+    _templateObject22 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject23() {
+    var data = _tagged_template_literal([
+        "\n        padding: 4px 8px;\n      "
+    ]);
+    _templateObject23 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject24() {
+    var data = _tagged_template_literal([
+        "\n        padding: 7px 12px;\n      "
+    ]);
+    _templateObject24 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject25() {
+    var data = _tagged_template_literal([
+        "\n        padding: 7px 12px;\n      "
+    ]);
+    _templateObject25 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject26() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  width: fit-content;\n  gap: 4px;\n  cursor: pointer;\n  background: ",
+        ";\n  ",
+        ";\n  ",
+        ";\n  ",
+        ";\n"
+    ]);
+    _templateObject26 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject27() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid ",
+        ";\n        background-color: ",
+        ";\n        :hover {\n          background-color: ",
+        ";\n        }\n      "
+    ]);
+    _templateObject27 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject28() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid ",
+        ";\n        background-color: ",
+        ";\n        :hover {\n          background-color: ",
+        ";\n        }\n      "
+    ]);
+    _templateObject28 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject29() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid ",
+        ";\n        background-color: ",
+        ";\n        :hover {\n          background-color: ",
+        ";\n        }\n      "
+    ]);
+    _templateObject29 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject30() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid transparent;\n        background-color: transparent;\n        :hover {\n          background-color: ",
+        ";\n        }\n      "
+    ]);
+    _templateObject30 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject31() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid ",
+        ";\n        background-color: ",
+        ";\n      "
+    ]);
+    _templateObject31 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject32() {
+    var data = _tagged_template_literal([
+        "\n        min-width: 72px;\n        min-height: 40px;\n      "
+    ]);
+    _templateObject32 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject33() {
+    var data = _tagged_template_literal([
+        "\n        min-width: 54px;\n        min-height: 32px;\n      "
+    ]);
+    _templateObject33 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject34() {
+    var data = _tagged_template_literal([
+        "\n        min-width: 72px;\n        min-height: 40px;\n      "
+    ]);
+    _templateObject34 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject35() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: ",
+        ";\n  border-radius: ",
+        ";\n  padding: 0px ",
+        ";\n  border-radius: ",
+        ";\n  cursor: pointer;\n  ",
+        ";\n  ",
+        ";\n  ",
+        ";\n"
+    ]);
+    _templateObject35 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject36() {
+    var data = _tagged_template_literal([
+        "\n        width: 40px;\n        height: 40px;\n      "
+    ]);
+    _templateObject36 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject37() {
+    var data = _tagged_template_literal([
+        "\n        width: 32px;\n        height: 32px;\n      "
+    ]);
+    _templateObject37 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject38() {
+    var data = _tagged_template_literal([
+        "\n        width: 40px;\n        height: 40px;\n      "
+    ]);
+    _templateObject38 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject39() {
+    var data = _tagged_template_literal([
+        "\n      border: 1px solid ",
+        ";\n    "
+    ]);
+    _templateObject39 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject40() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid ",
+        ";\n      "
+    ]);
+    _templateObject40 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject41() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  flex-shrink: 0;\n  border-radius: ",
+        ";\n  justify-content: center;\n  align-items: center;\n  background-color: ",
+        ";\n  ",
+        ";\n  ",
+        ";\n  ",
+        ";\n  ",
+        ";\n  cursor: pointer;\n  &:hover {\n    background-color: ",
+        ";\n  }\n"
+    ]);
+    _templateObject41 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject42() {
+    var data = _tagged_template_literal([
+        "\n  width: 32px;\n  height: 32px;\n  padding: 7px;\n"
+    ]);
+    _templateObject42 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject43() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: 16px;\n  height: 16px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: ",
+        ";\n  border: none;\n  background: ",
+        ";\n  cursor: pointer;\n  transition:\n    transform 0.1s ease-out,\n    background 0.1s ease;\n\n  &:hover {\n    background: ",
+        ";\n  }\n"
+    ]);
+    _templateObject43 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+var React2 = require("react");
+var zustand = require("zustand");
+var utils = require("@shoplflow/utils");
+var styled5 = require("@emotion/styled");
+var framerMotion = require("framer-motion");
+var jsxRuntime = require("react/jsx-runtime");
+var reactDom = require("react-dom");
+var react = require("@emotion/react");
+var Scrollbars = require("react-custom-scrollbars-2");
+function _interopDefault(e) {
+    return e && e.__esModule ? e : {
+        default: e
+    };
+}
+var React2__default = /*#__PURE__*/ _interopDefault(React2);
+var styled5__default = /*#__PURE__*/ _interopDefault(styled5);
+var Scrollbars__default = /*#__PURE__*/ _interopDefault(Scrollbars);
+// src/hooks/useDomain.ts
+exports.useDomain = function(param) {
+    var _param_domain = param.domain, domain = _param_domain === void 0 ? "SHOPL" : _param_domain;
+    var _React2_useState = _sliced_to_array(React2.useState(void 0), 2), domainType = _React2_useState[0], setDomainType = _React2_useState[1];
+    React2.useEffect(function() {
+        if (domain) {
+            setDomainType(domain);
+        }
+    }, [
+        domain
+    ]);
+    React2.useEffect(function() {
+        if (!domainType) {
+            return;
+        }
+        document.documentElement.dataset.shoplflow = domainType === null || domainType === void 0 ? void 0 : domainType.toLowerCase();
+    }, [
+        domainType
+    ]);
+};
+exports.getDomain = function() {
+    return document.documentElement.dataset.shoplflow;
+};
+exports.useModalStore = zustand.create(function(set) {
+    return {
+        modal: [],
+        addModal: function(modal, id) {
+            return set(function(state) {
+                return {
+                    modal: _to_consumable_array(state.modal).concat([
+                        {
+                            component: modal,
+                            id: id
+                        }
+                    ])
+                };
+            });
+        },
+        removeModal: function(props) {
+            var _ref = props || {
+                id: void 0,
+                deps: void 0
+            }, id = _ref.id, deps = _ref.deps;
+            var isIncludeAllProps = Boolean(id && deps);
+            var isIncludeId = Boolean(id);
+            var isNotIncludeAllProps = !id && Boolean(utils.isNullOrUndefined(deps));
+            var isIncludeDeps = Boolean(Boolean(!utils.isNullOrUndefined(deps)) && !id);
+            if (isIncludeAllProps) {
+                throw new Error("id와 deps는 동시에 사용할 수 없습니다.");
+            }
+            if (isIncludeId) {
+                set(function(state) {
+                    var filterModal = state.modal.filter(function(modal) {
+                        return modal.id !== id;
+                    });
+                    return {
+                        modal: _to_consumable_array(filterModal)
+                    };
+                });
+                return;
+            }
+            if (isNotIncludeAllProps || deps === 1) {
+                set(function(state) {
+                    var removeModal = state.modal.slice(0, -1);
+                    return {
+                        modal: _to_consumable_array(removeModal)
+                    };
+                });
+                return;
+            }
+            if (isIncludeDeps) {
+                if (deps === 0 || deps === void 0) {
+                    return;
+                }
+                set(function(state) {
+                    var removeDeps = state.modal.slice(0, -deps);
+                    return {
+                        modal: _to_consumable_array(removeDeps)
+                    };
+                });
+                return;
+            }
+        }
+    };
+});
+// src/hooks/useHandleModal.ts
+exports.useHandleModal = function() {
+    var addModal = exports.useModalStore(function(state) {
+        return state.addModal;
+    });
+    var removeModal = exports.useModalStore(function(state) {
+        return state.removeModal;
+    });
+    return {
+        addModal: addModal,
+        removeModal: removeModal
+    };
+};
+// src/hooks/useModalValue.ts
+exports.useModalValue = function() {
+    var modal = exports.useModalStore(function(state) {
+        return state.modal;
+    });
+    return {
+        modal: modal
+    };
+};
+// src/animation/fadeInOut.ts
+var fadeInOut = {
+    initial: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.1
+        }
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            duration: 0.1
+        }
+    }
+};
+var BackDropStyled = styled5__default.default(framerMotion.motion.div)(_templateObject());
+var BackDrop = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsxRuntime.jsx(BackDropStyled, {
+        variants: fadeInOut,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        children: children
+    });
+};
+var BackDrop_default = BackDrop;
+var SpaceMarginWrapper = styled5__default.default(framerMotion.motion.div)(_templateObject1());
+var ModalPortal = function() {
+    var modal = exports.useModalStore(function(state) {
+        return state.modal;
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, {
+            children: modal.map(function(item, index) {
+                return /* @__PURE__ */ jsxRuntime.jsx(BackDrop_default, {
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SpaceMarginWrapper, {
+                        children: item.component
+                    })
+                }, index);
+            })
+        }), document.body)
+    });
+};
+exports.ModalProvider = ModalPortal;
+var ShoplflowProvider = function(param) {
+    var children = param.children, _param_domain = param.domain, domain = _param_domain === void 0 ? "SHOPL" : _param_domain;
+    exports.useDomain({
+        domain: domain
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /* @__PURE__ */ jsxRuntime.jsx(exports.ModalProvider, {}),
+            children
+        ]
+    });
+};
+exports.ShoplflowProvider = ShoplflowProvider;
+// src/styles/tokens.ts
+var fontWeightRegular = "var(--font-weight-regular)";
+var fontWeightMedium = "var(--font-weight-medium)";
+var fontWeightBold = "var(--font-weight-bold)";
+exports.fontWeightTokens = {
+    fontWeightRegular: fontWeightRegular,
+    fontWeightMedium: fontWeightMedium,
+    fontWeightBold: fontWeightBold
+};
+var borderRadius04 = "var(--border-radius04)";
+var borderRadius06 = "var(--border-radius06)";
+var borderRadius08 = "var(--border-radius08)";
+var borderRadius12 = "var(--border-radius12)";
+var borderRadius16 = "var(--border-radius16)";
+var borderRadius20 = "var(--border-radius20)";
+exports.borderRadiusTokens = {
+    borderRadius04: borderRadius04,
+    borderRadius06: borderRadius06,
+    borderRadius08: borderRadius08,
+    borderRadius12: borderRadius12,
+    borderRadius16: borderRadius16,
+    borderRadius20: borderRadius20
+};
+var coolgray300 = "var(--coolgray300)";
+var coolgray200 = "var(--coolgray200)";
+var coolgray100 = "var(--coolgray100)";
+var coolgray50 = "var(--coolgray50)";
+var navy400 = "var(--navy400)";
+var navy300 = "var(--navy300)";
+var neutral0 = "var(--neutral0)";
+var neutral100 = "var(--neutral100)";
+var neutral150 = "var(--neutral150)";
+var neutral200 = "var(--neutral200)";
+var neutral300 = "var(--neutral300)";
+var neutral350 = "var(--neutral350)";
+var neutral400 = "var(--neutral400)";
+var neutral500 = "var(--neutral500)";
+var neutral600 = "var(--neutral600)";
+var neutral700 = "var(--neutral700)";
+var neutral400_5 = "var(--neutral400_5)";
+var red300 = "var(--red300)";
+var red200 = "var(--red200)";
+var red100 = "var(--red100)";
+var ocean300 = "var(--ocean300)";
+var ocean200 = "var(--ocean200)";
+var ocean100 = "var(--ocean100)";
+var purple400 = "var(--purple400)";
+var purple300 = "var(--purple300)";
+var purple100 = "var(--purple100)";
+var yellow300 = "var(--yellow300)";
+var yellow200 = "var(--yellow200)";
+var yellow100 = "var(--yellow100)";
+var green300 = "var(--green300)";
+var green200 = "var(--green200)";
+var green100 = "var(--green100)";
+var shopl400 = "var(--shopl400)";
+var shopl300 = "var(--shopl300)";
+var shopl200 = "var(--shopl200)";
+var shopl150 = "var(--shopl150)";
+var shopl100 = "var(--shopl100)";
+var hada400 = "var(--hada400)";
+var hada300 = "var(--hada300)";
+var hada200 = "var(--hada200)";
+var hada150 = "var(--hada150)";
+var hada100 = "var(--hada100)";
+var background = "var(--background)";
+var primary100 = "var(--primary100)";
+var primary150 = "var(--primary150)";
+var primary200 = "var(--primary200)";
+var primary300 = "var(--primary300)";
+var primary400 = "var(--primary400)";
+exports.colorTokens = {
+    coolgray300: coolgray300,
+    coolgray200: coolgray200,
+    coolgray100: coolgray100,
+    coolgray50: coolgray50,
+    navy400: navy400,
+    navy300: navy300,
+    neutral0: neutral0,
+    neutral100: neutral100,
+    neutral150: neutral150,
+    neutral200: neutral200,
+    neutral300: neutral300,
+    neutral350: neutral350,
+    neutral400: neutral400,
+    neutral500: neutral500,
+    neutral600: neutral600,
+    neutral700: neutral700,
+    neutral400_5: neutral400_5,
+    red300: red300,
+    red200: red200,
+    red100: red100,
+    ocean300: ocean300,
+    ocean200: ocean200,
+    ocean100: ocean100,
+    purple400: purple400,
+    purple300: purple300,
+    purple100: purple100,
+    yellow300: yellow300,
+    yellow200: yellow200,
+    yellow100: yellow100,
+    green300: green300,
+    green200: green200,
+    green100: green100,
+    shopl400: shopl400,
+    shopl300: shopl300,
+    shopl200: shopl200,
+    shopl150: shopl150,
+    shopl100: shopl100,
+    hada400: hada400,
+    hada300: hada300,
+    hada200: hada200,
+    hada150: hada150,
+    hada100: hada100,
+    background: background,
+    primary100: primary100,
+    primary150: primary150,
+    primary200: primary200,
+    primary300: primary300,
+    primary400: primary400
+};
+var spacing04 = "var(--spacing04)";
+var spacing06 = "var(--spacing06)";
+var spacing08 = "var(--spacing08)";
+var spacing12 = "var(--spacing12)";
+var spacing16 = "var(--spacing16)";
+var spacing20 = "var(--spacing20)";
+var spacing24 = "var(--spacing24)";
+var spacing30 = "var(--spacing30)";
+var spacing32 = "var(--spacing32)";
+var spacing40 = "var(--spacing40)";
+exports.spacingTokens = {
+    spacing04: spacing04,
+    spacing06: spacing06,
+    spacing08: spacing08,
+    spacing12: spacing12,
+    spacing16: spacing16,
+    spacing20: spacing20,
+    spacing24: spacing24,
+    spacing30: spacing30,
+    spacing32: spacing32,
+    spacing40: spacing40
+};
+var dropShadow = "var(--dropShadow)";
+exports.boxShadowTokens = {
+    dropShadow: dropShadow
+};
+var heading1_700 = ".heading1_700";
+var heading1_400 = ".heading1_400";
+var heading2_700 = ".heading2_700";
+var heading2_400 = ".heading2_400";
+var heading3_700 = ".heading3_700";
+var heading3_400 = ".heading3_400";
+var title1_700 = ".title1_700";
+var title1_400 = ".title1_400";
+var title2_700 = ".title2_700";
+var title2_500 = ".title2_500";
+var title2_400 = ".title2_400";
+var body1_700 = ".body1_700";
+var body1_500 = ".body1_500";
+var body1_400 = ".body1_400";
+var body2_700 = ".body2_700";
+var body2_500 = ".body2_500";
+var body2_400 = ".body2_400";
+var body3_400 = ".body3_400";
+var body3_500 = ".body3_500";
+var caption_400 = ".caption_400";
+exports.typographyTokens = {
+    heading1_700: heading1_700,
+    heading1_400: heading1_400,
+    heading2_700: heading2_700,
+    heading2_400: heading2_400,
+    heading3_700: heading3_700,
+    heading3_400: heading3_400,
+    title1_700: title1_700,
+    title1_400: title1_400,
+    title2_700: title2_700,
+    title2_500: title2_500,
+    title2_400: title2_400,
+    body1_700: body1_700,
+    body1_500: body1_500,
+    body1_400: body1_400,
+    body2_700: body2_700,
+    body2_500: body2_500,
+    body2_400: body2_400,
+    body3_400: body3_400,
+    body3_500: body3_500,
+    caption_400: caption_400
+};
+exports.StyledStack = styled5__default.default.div(_templateObject2(), function(param) {
+    var width = param.width;
+    return width;
+}, function(param) {
+    var height = param.height;
+    return height;
+}, function(param) {
+    var direction = param.direction;
+    return direction;
+}, function(param) {
+    var align = param.align;
+    return align;
+}, function(param) {
+    var justify = param.justify;
+    return justify;
+}, function(param) {
+    var spacing = param.spacing;
+    return spacing && exports.spacingTokens[spacing];
+}, function(param) {
+    var flexWrap = param.flexWrap;
+    return flexWrap;
+}, function(param) {
+    var flex = param.flex;
+    return flex;
+}, function(param) {
+    var background2 = param.background;
+    return background2 ? exports.colorTokens[background2] : "transparent";
+}, function(param) {
+    var radius = param.radius;
+    return radius && exports.borderRadiusTokens[radius];
+});
+var createStackComponent = function(stackOption) {
+    var _stackOption_direction, _stackOption_align, _stackOption_justify, _stackOption_width, _stackOption_height, _stackOption_flexWrap, _stackOption_flex;
+    return React2.forwardRef(function Stack2(_param, ref) {
+        var _param_as = _param.as, as = _param_as === void 0 ? "div" : _param_as, _param_spacing = _param.spacing, spacing = _param_spacing === void 0 ? stackOption === null || stackOption === void 0 ? void 0 : stackOption.spacing : _param_spacing, _param_direction = _param.direction, direction = _param_direction === void 0 ? (_stackOption_direction = stackOption === null || stackOption === void 0 ? void 0 : stackOption.direction) !== null && _stackOption_direction !== void 0 ? _stackOption_direction : "column" : _param_direction, _param_align = _param.align, align = _param_align === void 0 ? (_stackOption_align = stackOption === null || stackOption === void 0 ? void 0 : stackOption.align) !== null && _stackOption_align !== void 0 ? _stackOption_align : "flex-start" : _param_align, _param_justify = _param.justify, justify = _param_justify === void 0 ? (_stackOption_justify = stackOption === null || stackOption === void 0 ? void 0 : stackOption.justify) !== null && _stackOption_justify !== void 0 ? _stackOption_justify : "flex-start" : _param_justify, _param_width = _param.width, width = _param_width === void 0 ? (_stackOption_width = stackOption === null || stackOption === void 0 ? void 0 : stackOption.width) !== null && _stackOption_width !== void 0 ? _stackOption_width : "initial" : _param_width, _param_height = _param.height, height = _param_height === void 0 ? (_stackOption_height = stackOption === null || stackOption === void 0 ? void 0 : stackOption.height) !== null && _stackOption_height !== void 0 ? _stackOption_height : "initial" : _param_height, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? (_stackOption_flexWrap = stackOption === null || stackOption === void 0 ? void 0 : stackOption.flexWrap) !== null && _stackOption_flexWrap !== void 0 ? _stackOption_flexWrap : "initial" : _param_flexWrap, _param_flex = _param.flex, flex = _param_flex === void 0 ? (_stackOption_flex = stackOption === null || stackOption === void 0 ? void 0 : stackOption.flex) !== null && _stackOption_flex !== void 0 ? _stackOption_flex : "initial" : _param_flex, _param_radius = _param.radius, radius = _param_radius === void 0 ? stackOption === null || stackOption === void 0 ? void 0 : stackOption.radius : _param_radius, tmp = _param.background, background2 = tmp === void 0 ? stackOption === null || stackOption === void 0 ? void 0 : stackOption.background : tmp, rest = _object_without_properties(_param, [
+            "as",
+            "spacing",
+            "direction",
+            "align",
+            "justify",
+            "width",
+            "height",
+            "flexWrap",
+            "flex",
+            "radius",
+            "background"
+        ]);
+        return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledStack, _object_spread_props(_object_spread({
+            as: as,
+            spacing: spacing,
+            ref: ref,
+            direction: direction,
+            align: align,
+            justify: justify,
+            width: width,
+            height: height,
+            flexWrap: flexWrap,
+            flex: flex,
+            background: background2,
+            radius: radius
+        }, rest), {
+            children: rest.children
+        }));
+    });
+};
+var Stack = createStackComponent();
+Stack.Vertical = createStackComponent({
+    direction: "column"
+});
+Stack.Horizontal = createStackComponent({
+    direction: "row"
+});
+exports.MotionStack = framerMotion.motion(Stack);
+exports.MotionStack.Vertical = framerMotion.motion(Stack.Vertical);
+exports.MotionStack.Horizontal = framerMotion.motion(Stack.Horizontal);
+exports.Stack = Stack;
+var setEllipsis = function(maxLines) {
+    return react.css(_templateObject3(), maxLines, maxLines);
+};
+var StyledText = styled5__default.default.span(_templateObject7(), function(param) {
+    var display = param.display;
+    return display && display;
+}, function(param) {
+    var color = param.color;
+    return color && exports.colorTokens[color];
+}, function(param) {
+    var lineClamp = param.lineClamp;
+    return lineClamp && setEllipsis(lineClamp);
+}, function(param) {
+    var textAlign = param.textAlign;
+    return textAlign && textAlign;
+}, function(param) {
+    var whiteSpace = param.whiteSpace;
+    return whiteSpace && whiteSpace;
+}, function(param) {
+    var textDecorations = param.textDecorations;
+    return textDecorations && react.css(_templateObject4(), textDecorations);
+}, function(param) {
+    var opacity = param.opacity;
+    return opacity && react.css(_templateObject5(), opacity);
+}, function(param) {
+    var wordBreak = param.wordBreak;
+    return wordBreak && react.css(_templateObject6(), wordBreak);
+});
+var Text = React2.forwardRef(function(_param, ref) {
+    var children = _param.children, _param_typography = _param.typography, typography = _param_typography === void 0 ? "body1_400" : _param_typography, whiteSpace = _param.whiteSpace, _param_color = _param.color, color = _param_color === void 0 ? "neutral700" : _param_color, _param_display = _param.display, display = _param_display === void 0 ? "inline-block" : _param_display, _param_textAlign = _param.textAlign, textAlign = _param_textAlign === void 0 ? "start" : _param_textAlign, className = _param.className, as = _param.as, rest = _object_without_properties(_param, [
+        "children",
+        "typography",
+        "whiteSpace",
+        "color",
+        "display",
+        "textAlign",
+        "className",
+        "as"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledText, _object_spread_props(_object_spread({
+        ref: ref,
+        whiteSpace: whiteSpace,
+        className: className ? "".concat(typography, " ").concat(className) : typography,
+        color: color,
+        display: display,
+        textAlign: textAlign,
+        as: as
+    }, rest), {
+        children: children
+    }));
+});
+exports.Text = Text;
+var MODAL_SIZE_XXS = 400;
+var MODAL_SIZE_XS = 500;
+var MODAL_SIZE_S = 560;
+var MODAL_SIZE_M = 640;
+var MODAL_SIZE_L = 768;
+var MODAL_SIZE_XL = 1040;
+var MODAL_SIZE_XXL = 1280;
+var getModalWidthFromSize = function(size) {
+    switch(size){
+        case "XXS":
+            return MODAL_SIZE_XXS;
+        case "XS":
+            return MODAL_SIZE_XS;
+        case "S":
+            return MODAL_SIZE_S;
+        case "M":
+            return MODAL_SIZE_M;
+        case "L":
+            return MODAL_SIZE_L;
+        case "XL":
+            return MODAL_SIZE_XL;
+        case "XXL":
+            return MODAL_SIZE_XXL;
+        default:
+            return MODAL_SIZE_M;
+    }
+};
+var getModalBodyTopBottomPadding = function(isIncludeHeader) {
+    if (isIncludeHeader) {
+        return react.css(_templateObject8());
+    }
+    return react.css(_templateObject9());
+};
+var Container = styled5__default.default.div(_templateObject10(), exports.borderRadiusTokens.borderRadius08, exports.colorTokens.neutral0, exports.boxShadowTokens.dropShadow, function(param) {
+    var height = param.height;
+    return height ? "".concat(height, "px") : "initial";
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return getModalWidthFromSize(sizeVar);
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return getModalWidthFromSize(sizeVar);
+});
+var HeaderContainer = styled5__default.default.div(_templateObject11());
+var BodyContainer = styled5__default.default.div(_templateObject12(), exports.colorTokens.neutral0, function(param) {
+    var height = param.height;
+    return height;
+}, function(param) {
+    var isIncludeHeader = param.isIncludeHeader;
+    return getModalBodyTopBottomPadding(isIncludeHeader);
+});
+var ModalBodyContent = styled5__default.default.div(_templateObject13(), function(param) {
+    var sizeVar = param.sizeVar;
+    return getModalWidthFromSize(sizeVar);
+}, exports.colorTokens.neutral0);
+var FooterContainer = styled5__default.default.div(_templateObject14(), exports.colorTokens.neutral300, exports.colorTokens.neutral0);
+// src/components/Modal/Modal.types.ts
+exports.ModalSize = /* @__PURE__ */ function(ModalSize2) {
+    ModalSize2["XXS"] = "XXS";
+    ModalSize2["XS"] = "XS";
+    ModalSize2["S"] = "S";
+    ModalSize2["M"] = "M";
+    ModalSize2["L"] = "L";
+    ModalSize2["XL"] = "XL";
+    ModalSize2["XXL"] = "XXL";
+    return ModalSize2;
+}(exports.ModalSize || {});
+exports.MODAL_HEADER_KEY = Symbol("MODAL_HEADER");
+exports.MODAL_FOOTER_KEY = Symbol("MODAL_FOOTER");
+var ModalContainer = function(_param) {
+    var children = _param.children, _param_outsideClick = _param.outsideClick, outsideClick = _param_outsideClick === void 0 ? utils.noop : _param_outsideClick, rest = _object_without_properties(_param, [
+        "children",
+        "outsideClick"
+    ]);
+    var ref = utils.useParentElementClick(outsideClick);
+    var childrenArray = React2__default.default.Children.toArray(children);
+    var findHeader = childrenArray.find(function(child) {
+        if (!React2__default.default.isValidElement(child)) {
+            return child;
+        }
+        if (child.type[exports.MODAL_HEADER_KEY]) {
+            return child;
+        }
+    });
+    var findFooter = childrenArray.find(function(child) {
+        if (!React2__default.default.isValidElement(child)) {
+            return child;
+        }
+        if (child.type[exports.MODAL_FOOTER_KEY]) {
+            return child;
+        }
+    });
+    var addPropInChildren = React2.Children.map(childrenArray, function(child) {
+        if (!React2__default.default.isValidElement(child)) {
+            return child;
+        }
+        return React2__default.default.cloneElement(child, {
+            isIncludeHeader: Boolean(findHeader),
+            isIncludeFooter: Boolean(findFooter),
+            sizeVar: rest.sizeVar,
+            height: rest.height
+        });
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(Container, _object_spread_props(_object_spread({
+        ref: ref
+    }, rest), {
+        children: addPropInChildren
+    }));
+};
+var ModalContainer_default = ModalContainer;
+var ModalFooter = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsxRuntime.jsx(FooterContainer, {
+        children: children
+    });
+};
+ModalFooter[exports.MODAL_FOOTER_KEY] = true;
+var ModalFooter_default = ModalFooter;
+var ModalBody = function(param) {
+    var children = param.children, _param_isIncludeHeader = param.isIncludeHeader, isIncludeHeader = _param_isIncludeHeader === void 0 ? false : _param_isIncludeHeader, _param_isIncludeFooter = param.isIncludeFooter, isIncludeFooter = _param_isIncludeFooter === void 0 ? false : _param_isIncludeFooter, sizeVar = param.sizeVar, modalContainerHeight = param.height;
+    var _utils_useResizeObserver = utils.useResizeObserver(document.body, {
+        trackHeight: true
+    }), windowHeight = _utils_useResizeObserver.height;
+    var headerHeight = 64;
+    var footerHeight = 64;
+    var topBottomMargin = 64;
+    var getHeaderFooterHeight = React2.useCallback(function() {
+        var result = 0;
+        if (isIncludeHeader) {
+            result += headerHeight;
+        }
+        if (isIncludeFooter) {
+            result += footerHeight;
+        }
+        return result;
+    }, [
+        isIncludeFooter,
+        isIncludeHeader
+    ]);
+    var headerFooterHeight = React2.useMemo(function() {
+        return getHeaderFooterHeight();
+    }, [
+        getHeaderFooterHeight
+    ]);
+    var setAutoHeightMin = function() {
+        if (modalContainerHeight) {
+            return modalContainerHeight - headerFooterHeight;
+        } else {
+            return "100%";
+        }
+    };
+    var heightUnderMaxHeight = windowHeight - topBottomMargin - headerFooterHeight;
+    var heightOverMaxHeight = 1200 - topBottomMargin - headerFooterHeight;
+    return /* @__PURE__ */ jsxRuntime.jsx(BodyContainer, {
+        isIncludeHeader: isIncludeHeader,
+        height: setAutoHeightMin(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Scrollbars__default.default, {
+            id: "scrollbar",
+            autoHeight: !modalContainerHeight,
+            autoHeightMin: setAutoHeightMin(),
+            autoHeightMax: windowHeight > 1200 ? heightOverMaxHeight : heightUnderMaxHeight,
+            autoHide: true,
+            autoHideTimeout: 1e3,
+            autoHideDuration: 200,
+            style: {
+                height: "100%",
+                overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, {
+                isIncludeHeader: isIncludeHeader,
+                sizeVar: sizeVar,
+                children: children
+            })
+        })
+    });
+};
+var ModalBody_default = ModalBody;
+var ModalHeader = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsxRuntime.jsx(HeaderContainer, {
+        children: children
+    });
+};
+ModalHeader[exports.MODAL_HEADER_KEY] = true;
+var ModalHeader_default = ModalHeader;
+// src/components/Modal/index.ts
+exports.Modal = {
+    Container: ModalContainer_default,
+    Header: ModalHeader_default,
+    Body: ModalBody_default,
+    Footer: ModalFooter_default
+};
+var SwitchContainer = styled5__default.default.div(_templateObject15(), function(param) {
+    var isDisabled = param.isDisabled;
+    return isDisabled && 0.3;
+}, function(param) {
+    var isDisabled = param.isDisabled;
+    return !isDisabled && exports.colorTokens.neutral400_5;
+});
+var StyledSwitch = styled5__default.default.input(_templateObject16(), exports.colorTokens.neutral350, exports.colorTokens.neutral0, function(param) {
+    var activeColor = param.activeColor;
+    return exports.colorTokens[activeColor];
+});
+var useOnToggle = function(selected, defaultSelected) {
+    var _React2_useState = _sliced_to_array(React2.useState(false), 2), isToggle = _React2_useState[0], setIsToggle = _React2_useState[1];
+    var isControlled = selected !== void 0;
+    var handleToggle = function() {
+        !isControlled && setIsToggle(function(prev) {
+            return !prev;
+        });
+    };
+    React2.useEffect(function() {
+        if (isControlled) {
+            setIsToggle(selected);
+        }
+    }, [
+        isControlled,
+        selected
+    ]);
+    React2.useEffect(function() {
+        if (defaultSelected) {
+            setIsToggle(defaultSelected);
+        }
+    }, [
+        defaultSelected,
+        isControlled
+    ]);
+    return [
+        isToggle,
+        handleToggle
+    ];
+};
+var Switch = function(_param) {
+    var onChange = _param.onChange, isSelected = _param.isSelected, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_activeColor = _param.activeColor, activeColor = _param_activeColor === void 0 ? "primary300" : _param_activeColor, _param_defaultSelected = _param.defaultSelected, defaultSelected = _param_defaultSelected === void 0 ? false : _param_defaultSelected, rest = _object_without_properties(_param, [
+        "onChange",
+        "isSelected",
+        "disabled",
+        "activeColor",
+        "defaultSelected"
+    ]);
+    var _useOnToggle = _sliced_to_array(useOnToggle(isSelected, defaultSelected), 2), isToggled = _useOnToggle[0], handleToggle = _useOnToggle[1];
+    return /* @__PURE__ */ jsxRuntime.jsx(SwitchContainer, {
+        isDisabled: disabled,
+        children: /* @__PURE__ */ jsxRuntime.jsx(StyledSwitch, _object_spread({
+            type: "checkbox",
+            checked: isToggled,
+            disabled: disabled,
+            onChange: function() {
+                handleToggle();
+                onChange && onChange();
+            },
+            activeColor: activeColor
+        }, rest))
+    });
+};
+exports.Switch = Switch;
+// src/components/Chips/ChipToggle/ChipToggle.types.ts
+exports.ChipToggleStyleVariants = {
+    SOLID: "SOLID"
+};
+exports.ChipToggleSizeVariants = {
+    S: "S",
+    XS: "XS"
+};
+var getDisabledStyle = function(disabled) {
+    if (!disabled) {
+        return;
+    }
+    return react.css(_templateObject17());
+};
+// src/components/Chips/ChipToggle/ChipToggle.styled.ts
+var getLineTypographyBySizeVar = function(sizeVar) {
+    switch(sizeVar){
+        case "XS":
+            return "body3_400";
+        case "S":
+            return "body2_400";
+        default:
+            return "body2_400";
+    }
+};
+var solidStyle = function(param) {
+    var isSelected = param.isSelected, color = param.color, radius = param.radius;
+    return react.css(_templateObject20(), exports.colorTokens.neutral150, exports.borderRadiusTokens.borderRadius06, exports.colorTokens.neutral400, exports.colorTokens.neutral200, radius && react.css(_templateObject18(), exports.borderRadiusTokens.borderRadius16), isSelected && react.css(_templateObject19(), exports.colorTokens[color], exports.colorTokens["neutral0"], exports.colorTokens[color]));
+};
+var StyledChip = styled5__default.default.button(_templateObject21(), function(props) {
+    return props.styleVar === "SOLID" && solidStyle(props);
+}, function(param) {
+    var disabled = param.disabled;
+    return getDisabledStyle(disabled);
+});
+var ChipToggle = function(_param) {
+    var text = _param.text, isSelected = _param.isSelected, defaultSelected = _param.defaultSelected, _param_color = _param.color, color = _param_color === void 0 ? "neutral600" : _param_color, _param_styleVar = _param.styleVar, styleVar = _param_styleVar === void 0 ? exports.ChipToggleStyleVariants.SOLID : _param_styleVar, sizeVar = _param.sizeVar, leftSource = _param.leftSource, rightSource = _param.rightSource, _param_onClick = _param.onClick, onClick = _param_onClick === void 0 ? utils.noop : _param_onClick, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, rest = _object_without_properties(_param, [
+        "text",
+        "isSelected",
+        "defaultSelected",
+        "color",
+        "styleVar",
+        "sizeVar",
+        "leftSource",
+        "rightSource",
+        "onClick",
+        "disabled"
+    ]);
+    var _useOnToggle = _sliced_to_array(useOnToggle(isSelected, defaultSelected), 2), isToggled = _useOnToggle[0], handleToggle = _useOnToggle[1];
+    var handleClick = function(e) {
+        !disabled && handleToggle();
+        !disabled && onClick && onClick(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(StyledChip, _object_spread_props(_object_spread({}, rest), {
+        color: color,
+        isSelected: isToggled,
+        styleVar: styleVar,
+        sizeVar: sizeVar,
+        onClick: handleClick,
+        disabled: disabled,
+        children: [
+            leftSource,
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
+                typography: getLineTypographyBySizeVar(sizeVar),
+                children: text
+            }),
+            rightSource
+        ]
+    }));
+};
+exports.ChipToggle = ChipToggle;
+// src/utils/getNextColor.ts
+var getNextColor = function(color) {
+    var step = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1;
+    var colorName = color.replace(/[0-9]|_/g, "");
+    var colorNumber = color.replace(/[a-z]|_/g, "");
+    var nextColorNumber = Number(colorNumber) + 100 * step;
+    var nextColorToken = "".concat(colorName).concat(nextColorNumber);
+    var colorKeysOfColorName = Object.keys(exports.colorTokens).filter(function(colorToken) {
+        return colorToken.includes(colorName);
+    }).sort(function(a, b) {
+        return Number(a.replace(/[a-z]|_/g, "")) - Number(b.replace(/[a-z]|_/g, ""));
+    });
+    var colorTokenKeys = Object.keys(exports.colorTokens);
+    var findColorToken = colorTokenKeys.find(function(colorToken) {
+        return colorToken === nextColorToken;
+    });
+    var lastColorToken = colorKeysOfColorName[colorKeysOfColorName.length - 1];
+    return findColorToken ? findColorToken : lastColorToken;
+};
+// src/components/Chips/ChipButton/ChipButton.styled.ts
+var getLineTypographyBySizeVar2 = function(sizeVar) {
+    switch(sizeVar){
+        case "XS":
+            return "caption_400";
+        case "S":
+            return "body3_400";
+        default:
+            return "body3_400";
+    }
+};
+var lineStyle = function(param) {
+    var color = param.color;
+    return react.css(_templateObject22(), exports.colorTokens.neutral0, exports.colorTokens[color], exports.borderRadiusTokens.borderRadius20, exports.colorTokens[getNextColor(color, 2)], exports.colorTokens[getNextColor(color, 4)]);
+};
+var getStyleBySizeVar = function(sizeVar) {
+    switch(sizeVar){
+        case "XS":
+            return react.css(_templateObject23());
+        case "S":
+            return react.css(_templateObject24());
+        default:
+            return react.css(_templateObject25());
+    }
+};
+var StyledChipButton = styled5__default.default.button(_templateObject26(), function(param) {
+    var background2 = param.background;
+    return background2 && exports.colorTokens[background2];
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return getStyleBySizeVar(sizeVar);
+}, function(props) {
+    return props.styleVar === "LINE" && lineStyle(props);
+}, function(param) {
+    var disabled = param.disabled;
+    return getDisabledStyle(disabled);
+});
+// src/components/Chips/ChipButton/ChipButton.types.ts
+exports.ChipButtonStyleVariants = {
+    LINE: "LINE"
+};
+exports.ChipButtonSizeVariants = {
+    S: "S",
+    XS: "XS"
+};
+var ChipButton = function(_param) {
+    var _param_styleVar = _param.styleVar, styleVar = _param_styleVar === void 0 ? exports.ChipButtonStyleVariants.LINE : _param_styleVar, _param_color = _param.color, color = _param_color === void 0 ? "neutral200" : _param_color, _param_sizeVar = _param.sizeVar, sizeVar = _param_sizeVar === void 0 ? exports.ChipButtonSizeVariants.S : _param_sizeVar, text = _param.text, _param_onClick = _param.onClick, onClick = _param_onClick === void 0 ? utils.noop : _param_onClick, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, rest = _object_without_properties(_param, [
+        "styleVar",
+        "color",
+        "sizeVar",
+        "text",
+        "onClick",
+        "disabled"
+    ]);
+    var handleOnClick = function(e) {
+        !disabled && onClick(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledChipButton, _object_spread_props(_object_spread({
+        styleVar: styleVar,
+        color: color
+    }, rest), {
+        onClick: handleOnClick,
+        disabled: disabled,
+        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
+            typography: getLineTypographyBySizeVar2(sizeVar),
+            children: text
+        })
+    }));
+};
+exports.ChipButton = ChipButton;
+var getStyleByStyleVar = function(styleVar, disabled) {
+    switch(styleVar){
+        case "PRIMARY":
+            return react.css(_templateObject27(), exports.colorTokens.primary400, exports.colorTokens.primary300, !disabled && exports.colorTokens.primary400);
+        case "SECONDARY":
+            return react.css(_templateObject28(), exports.colorTokens.neutral350, exports.colorTokens.neutral0, !disabled && exports.colorTokens.neutral100);
+        case "SOLID":
+            return react.css(_templateObject29(), exports.colorTokens.coolgray100, exports.colorTokens.coolgray50, !disabled && exports.colorTokens.coolgray100);
+        case "GHOST":
+            return react.css(_templateObject30(), !disabled && exports.colorTokens.neutral400_5);
+        default:
+            return react.css(_templateObject31(), exports.colorTokens.primary400, exports.colorTokens.primary300);
+    }
+};
+var getStyleBySizeVar2 = function(sizeVar) {
+    switch(sizeVar){
+        case "M":
+            return react.css(_templateObject32());
+        case "S":
+            return react.css(_templateObject33());
+        default:
+            return react.css(_templateObject34());
+    }
+};
+var StyledButton = styled5__default.default.button(_templateObject35(), exports.spacingTokens.spacing04, exports.borderRadiusTokens.borderRadius06, exports.spacingTokens.spacing12, exports.borderRadiusTokens.borderRadius12, function(param) {
+    var styleVar = param.styleVar, disabled = param.disabled;
+    return getStyleByStyleVar(styleVar, disabled);
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return getStyleBySizeVar2(sizeVar);
+}, function(param) {
+    var disabled = param.disabled;
+    return getDisabledStyle(disabled);
+});
+var Button = React2.forwardRef(function(_param, ref) {
+    var styleVar = _param.styleVar, _param_sizeVar = _param.sizeVar, sizeVar = _param_sizeVar === void 0 ? "M" : _param_sizeVar, style = _param.style, color = _param.color, as = _param.as, children = _param.children, leftSource = _param.leftSource, rightSource = _param.rightSource, rest = _object_without_properties(_param, [
+        "styleVar",
+        "sizeVar",
+        "style",
+        "color",
+        "as",
+        "children",
+        "leftSource",
+        "rightSource"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(StyledButton, _object_spread_props(_object_spread({
+        styleVar: styleVar,
+        sizeVar: sizeVar,
+        className: styleVar,
+        style: style,
+        as: as,
+        ref: ref,
+        color: color
+    }, rest), {
+        children: [
+            leftSource,
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
+                color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
+                typography: sizeVar === "M" ? "body1_400" : "body2_400",
+                children: children
+            }),
+            rightSource
+        ]
+    }));
+});
+exports.Button = Button;
+// src/components/Buttons/Button/Button.types.ts
+exports.buttonSizeVar = {
+    S: "S",
+    M: "M"
+};
+exports.buttonStyleVar = {
+    PRIMARY: "PRIMARY",
+    SECONDARY: "SECONDARY",
+    SOLID: "SOLID",
+    GHOST: "GHOST"
+};
+var getWidthAndHeightFromSizeVar = function(sizeVar) {
+    switch(sizeVar){
+        case "M":
+            return react.css(_templateObject36());
+        case "S":
+            return react.css(_templateObject37());
+        default:
+            return react.css(_templateObject38());
+    }
+};
+var getHoverBackgroundFromStyleVar = function(styleVar) {
+    switch(styleVar){
+        case "SOLID":
+            return exports.colorTokens.neutral100;
+        case "GHOST":
+            return exports.colorTokens.neutral400_5;
+        default:
+            return exports.colorTokens.neutral100;
+    }
+};
+var getBorderByStyleVar = function(styleVar) {
+    if (!styleVar) {
+        return;
+    }
+    if (styleVar === "SOLID") {
+        return react.css(_templateObject39(), exports.colorTokens.neutral200);
+    }
+};
+var StyledIconButton = styled5__default.default.button(_templateObject41(), exports.borderRadiusTokens.borderRadius06, exports.colorTokens.neutral0, function(param) {
+    var styleVar = param.styleVar;
+    if (!styleVar) {
+        return;
+    }
+    if (styleVar === "SOLID") {
+        return react.css(_templateObject40(), exports.colorTokens.neutral200);
+    }
+}, function(param) {
+    var styleVar = param.styleVar;
+    return getBorderByStyleVar(styleVar);
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return getWidthAndHeightFromSizeVar(sizeVar);
+}, function(param) {
+    var disabled = param.disabled;
+    return getDisabledStyle(disabled);
+}, function(param) {
+    var styleVar = param.styleVar, disabled = param.disabled;
+    if (disabled) {
+        return;
+    }
+    return getHoverBackgroundFromStyleVar(styleVar);
+});
+var IconButton = React2.forwardRef(function(_param, ref) {
+    var styleVar = _param.styleVar, sizeVar = _param.sizeVar, disabled = _param.disabled, as = _param.as, children = _param.children, rest = _object_without_properties(_param, [
+        "styleVar",
+        "sizeVar",
+        "disabled",
+        "as",
+        "children"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledIconButton, _object_spread_props(_object_spread({
+        styleVar: styleVar,
+        sizeVar: sizeVar,
+        disabled: disabled,
+        as: as,
+        ref: ref
+    }, rest), {
+        children: children
+    }));
+});
+exports.IconButton = IconButton;
+// src/components/Buttons/IconButton/IconButton.types.ts
+exports.iconButtonSizeVar = {
+    S: "S",
+    M: "M"
+};
+exports.iconButtonStyleVar = {
+    SOLID: "SOLID",
+    GHOST: "GHOST"
+};
+var Container2 = styled5__default.default.div(_templateObject42());
+var IconButton2 = styled5__default.default.button(_templateObject43(), exports.borderRadiusTokens.borderRadius04, function(param) {
+    var color = param.color;
+    return exports.colorTokens[color];
+}, function(param) {
+    var color = param.color;
+    return exports.colorTokens[getNextColor(color, 1)];
+});
+var MinusButton = React2.forwardRef(function(_param, ref) {
+    var onClick = _param.onClick, _param_color = _param.color, color = _param_color === void 0 ? "neutral300" : _param_color, rest = _object_without_properties(_param, [
+        "onClick",
+        "color"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(Container2, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, _object_spread_props(_object_spread({
+            color: color,
+            onClick: onClick,
+            ref: ref
+        }, rest), {
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        d: "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z",
+                        fill: "none"
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z",
+                        fill: "white"
+                    })
+                ]
+            })
+        }))
+    });
+});
+exports.MinusButton = MinusButton; //# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.cjs.map