@shoplflow/base 0.9.0 → 0.11.3

package/dist/index.cjs

@@ -1,179 +1,1755 @@
-"use strict";var oe=Object.create;var O=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var ae=(o,t)=>{for(var e in t)O(o,e,{get:t[e],enumerable:!0})},io=(o,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of te(t))!ne.call(o,r)&&r!==e&&O(o,r,{get:()=>t[r],enumerable:!(a=ee(t,r))||a.enumerable});return o};var c=(o,t,e)=>(e=o!=null?oe(re(o)):{},io(t||!o||!o.__esModule?O(e,"default",{value:o,enumerable:!0}):e,o)),ie=o=>io(O({},"__esModule",{value:!0}),o);var dr={};ae(dr,{ChipButton:()=>Qo,ChipButtonSizeVariants:()=>no,ChipButtonStyleVariants:()=>ro,ChipToggle:()=>Zo,ChipToggleSizeVariants:()=>nr,ChipToggleStyleVariants:()=>J,MODAL_BODY_KEY:()=>q,MODAL_FOOTER_KEY:()=>w,MODAL_HEADER_KEY:()=>B,Modal:()=>rr,ModalProvider:()=>H,ModalSize:()=>Oo,MotionStack:()=>U,ShoplflowProvider:()=>To,Stack:()=>ko,StyledChip:()=>Q,StyledChipButton:()=>to,StyledStack:()=>K,Text:()=>M,borderRadiusTokens:()=>f,boxShadowTokens:()=>z,colorTokens:()=>i,fontWeightTokens:()=>So,spacingTokens:()=>R,typographyTokens:()=>bo,useDomain:()=>W,useHandleModal:()=>pe,useModalStore:()=>g,useModalValue:()=>se,useOutsideClick:()=>so,useResizeObserver:()=>Y});module.exports=ie(dr);var V=c(require("react"),1);var P=require("react"),W=({domain:o="SHOPL"})=>{let[t,e]=(0,P.useState)(void 0);(0,P.useEffect)(()=>{o&&e(o)},[o]),(0,P.useEffect)(()=>{t&&(document.documentElement.dataset.shoplflow=t?.toLowerCase())},[t])};var S=c(require("react"),1);var po=require("zustand"),g=(0,po.create)(o=>({modal:[],addModal:(t,e)=>o(a=>({modal:[...a.modal,{component:t,id:e}]})),removeModal:t=>{let{id:e,deps:a=1}=t||{id:void 0,deps:0},r=!!(e&&String(a)),s=!!e,l=!e&&!a,p=!!String(a)&&!e;if(r)throw new Error("id\uC640 deps\uB294 \uB3D9\uC2DC\uC5D0 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");if(s){o(n=>({modal:[...n.modal.filter(m=>m.id!==e)]}));return}if(l||a===1){o(n=>({modal:[...n.modal.slice(0,-1)]}));return}if(p){o(n=>({modal:[...n.modal.slice(0,-a+1)]}));return}}}));var pe=()=>{let o=g(e=>e.addModal),t=g(e=>e.removeModal);return{addModal:o,removeModal:t}};var se=()=>({modal:g(t=>t.modal)});var T=require("react"),so=(o,t)=>{let e=t??(0,T.useRef)(null),a=(0,T.useCallback)(r=>{e.current?.parentNode&&!e.current?.contains(r.target)&&o(r.target)},[e,o]);return(0,T.useEffect)(()=>{let r=e.current?.parentNode;if(r)return r.addEventListener("click",a),()=>{r.removeEventListener("click",a)}},[e,a]),{ref:e}},lo=so;var D=require("react"),Y=(o,t={trackWidth:!0,trackHeight:!0})=>{let[e,a]=(0,D.useState)({width:0,height:0});return(0,D.useEffect)(()=>{let r=new ResizeObserver(s=>{s.forEach(l=>{if(l.target===o){let{width:p,height:n}=l.contentRect,d={...e};t.trackWidth&&p!==e.width&&(d.width=p),t.trackHeight&&n!==e.height&&(d.height=n),(d.width!==e.width||d.height!==e.height)&&a(d)}})});return r.observe(o),()=>{r.disconnect()}},[o,t.trackWidth,t.trackHeight,e]),e};var yo=c(require("react"),1);var co={initial:{opacity:0},animate:{opacity:1,transition:{duration:.1}},exit:{opacity:0,transition:{duration:.1}}};var mo=c(require("@emotion/styled"),1),fo=require("framer-motion"),uo=(0,mo.default)(fo.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 le=({children:o})=>yo.default.createElement(uo,{variants:co,initial:"initial",animate:"animate",exit:"exit"},o),go=le;var ho=require("react-dom"),L=require("framer-motion"),xo=c(require("@emotion/styled"),1),de=(0,xo.default)(L.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%;
-`,ce=()=>{let o=g(t=>t.modal);return S.default.createElement(S.default.Fragment,null,(0,ho.createPortal)(S.default.createElement(L.AnimatePresence,null,o.map((t,e)=>S.default.createElement(go,{key:e},S.default.createElement(de,null,t.component)))),document.body))},H=ce;var me=({children:o,domain:t="SHOPL"})=>(W({domain:t}),V.default.createElement(V.default.Fragment,null,V.default.createElement(H,null),o)),To=me;var fe="var(--font-weight-regular)",ue="var(--font-weight-medium)",ye="var(--font-weight-bold)",So={fontWeightRegular:fe,fontWeightMedium:ue,fontWeightBold:ye},ge="var(--border-radius04)",he="var(--border-radius06)",xe="var(--border-radius08)",Te="var(--border-radius12)",Se="var(--border-radius16)",be="var(--border-radius20)",f={borderRadius04:ge,borderRadius06:he,borderRadius08:xe,borderRadius12:Te,borderRadius16:Se,borderRadius20:be},Me="var(--coolgray300)",ke="var(--coolgray200)",ve="var(--coolgray100)",Ce="var(--coolgray50)",Pe="var(--navy400)",_e="var(--navy300)",Be="var(--neutral0)",we="var(--neutral100)",Ee="var(--neutral150)",$e="var(--neutral200)",Oe="var(--neutral300)",De="var(--neutral350)",Le="var(--neutral400)",He="var(--neutral500)",Ve="var(--neutral600)",Re="var(--neutral700)",ze="var(--neutral400_5)",Ae="var(--red300)",Ne="var(--red200)",Xe="var(--red100)",Fe="var(--ocean300)",Ie="var(--ocean200)",We="var(--ocean100)",Ye="var(--purple400)",Ke="var(--purple300)",je="var(--purple100)",Ue="var(--yellow300)",Ze="var(--yellow200)",Ge="var(--yellow100)",qe="var(--green300)",Je="var(--green200)",Qe="var(--green100)",ot="var(--shopl400)",et="var(--shopl300)",tt="var(--shopl200)",rt="var(--shopl150)",nt="var(--shopl100)",at="var(--hada400)",it="var(--hada300)",pt="var(--hada200)",st="var(--hada150)",lt="var(--hada100)",dt="var(--background)",ct="var(--primary100)",mt="var(--primary150)",ft="var(--primary200)",ut="var(--primary300)",yt="var(--primary400)",i={coolgray300:Me,coolgray200:ke,coolgray100:ve,coolgray50:Ce,navy400:Pe,navy300:_e,neutral0:Be,neutral100:we,neutral150:Ee,neutral200:$e,neutral300:Oe,neutral350:De,neutral400:Le,neutral500:He,neutral600:Ve,neutral700:Re,neutral400_5:ze,red300:Ae,red200:Ne,red100:Xe,ocean300:Fe,ocean200:Ie,ocean100:We,purple400:Ye,purple300:Ke,purple100:je,yellow300:Ue,yellow200:Ze,yellow100:Ge,green300:qe,green200:Je,green100:Qe,shopl400:ot,shopl300:et,shopl200:tt,shopl150:rt,shopl100:nt,hada400:at,hada300:it,hada200:pt,hada150:st,hada100:lt,background:dt,primary100:ct,primary150:mt,primary200:ft,primary300:ut,primary400:yt},gt="var(--spacing04)",ht="var(--spacing06)",xt="var(--spacing08)",Tt="var(--spacing12)",St="var(--spacing16)",bt="var(--spacing20)",Mt="var(--spacing24)",kt="var(--spacing30)",vt="var(--spacing32)",Ct="var(--spacing40)",R={spacing04:gt,spacing06:ht,spacing08:xt,spacing12:Tt,spacing16:St,spacing20:bt,spacing24:Mt,spacing30:kt,spacing32:vt,spacing40:Ct},Pt="var(--dropShadow)",z={dropShadow:Pt},_t=".heading1_700",Bt=".heading1_400",wt=".heading2_700",Et=".heading2_400",$t=".heading3_700",Ot=".heading3_400",Dt=".title1_700",Lt=".title1_400",Ht=".title2_700",Vt=".title2_500",Rt=".title2_400",zt=".body1_700",At=".body1_500",Nt=".body1_400",Xt=".body2_700",Ft=".body2_500",It=".body2_400",Wt=".body3_400",Yt=".body3_500",Kt=".caption_400",bo={heading1_700:_t,heading1_400:Bt,heading2_700:wt,heading2_400:Et,heading3_700:$t,heading3_400:Ot,title1_700:Dt,title1_400:Lt,title2_700:Ht,title2_500:Vt,title2_400:Rt,body1_700:zt,body1_500:At,body1_400:Nt,body2_700:Xt,body2_500:Ft,body2_400:It,body3_400:Wt,body3_500:Yt,caption_400:Kt};var A=c(require("react"),1),N=require("framer-motion");var Mo=c(require("@emotion/styled"),1);var K=Mo.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&&R[o]};
-  flex-wrap: ${({flexWrap:o})=>o};
-  flex: ${({flex:o})=>o};
-  background: ${({background:o})=>o?i[o]:"transparent"};
-  border-radius: ${({radius:o})=>o&&f[o]};
-  animation: 0.2s all ease-in-out;
-`;var j=o=>(0,A.forwardRef)(function({as:e="div",spacing:a=o?.spacing??"spacing08",direction:r=o?.direction??"column",align:s=o?.align??"flex-start",justify:l=o?.justify??"flex-start",width:p=o?.width??"initial",height:n=o?.height??"initial",flexWrap:d=o?.flexWrap??"initial",flex:m=o?.flex??"initial",radius:y=o?.radius,background:v=o?.background,...C},x){return A.default.createElement(K,{as:e,spacing:a,ref:x,direction:r,align:s,justify:l,width:p,height:n,flexWrap:d,flex:m,background:v,radius:y,...C},C.children)}),b=j();b.Vertical=j({direction:"column"});b.Horizontal=j({direction:"row"});var U=(0,N.motion)(b);U.Vertical=(0,N.motion)(b.Vertical);U.Horizontal=(0,N.motion)(b.Horizontal);var ko=b;var X=c(require("react"),1);var _=require("@emotion/react"),vo=c(require("@emotion/styled"),1);var jt=o=>_.css`
-    display: -webkit-box;
-    line-clamp: ${o};
-    -webkit-line-clamp: ${o};
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `,Co=vo.default.span`
-  display: ${({display:o})=>o&&o};
-  align-items: center;
-  color: ${({color:o})=>o&&i[o]};
-  ${({lineClamp:o})=>o&&jt(o)};
-  text-align: ${({textAlign:o})=>o&&o};
-  white-space: ${({whiteSpace:o})=>o&&o};
-  ${({textDecorations:o})=>o&&_.css`
-      text-decoration: ${o};
-    `};
-  ${({opacity:o})=>o&&_.css`
-      opacity: ${o};
-    `}
-  ${({wordBreak:o})=>o&&_.css`
-      word-break: ${o};
-    `};
-`;var Ut=(0,X.forwardRef)(({children:o,typography:t="body1_400",whiteSpace:e,color:a="neutral700",display:r="inline-block",textAlign:s="start",className:l,...p},n)=>X.default.createElement(Co,{ref:n,whiteSpace:e,className:l?`${t} ${l}`:t,color:a,display:r,textAlign:s,...p},o)),M=Ut;var u=c(require("react"),1);var k=c(require("@emotion/styled"),1),Z=require("@emotion/react");var Zt=400,Gt=500,qt=560,Po=640,Jt=768,Qt=1040,or=1280,G=o=>{switch(o){case"XXS":return Zt;case"XS":return Gt;case"S":return qt;case"M":return Po;case"L":return Jt;case"XL":return Qt;case"XXL":return or;default:return Po}},er=o=>o?Z.css`
-      padding-top: 16px;
-      padding-bottom: 24px;
-    `:Z.css`
-    padding-top: 24px;
-    padding-bottom: 24px;
-  `,_o=k.default.div`
-  display: flex;
-  flex-direction: column;
-  border-radius: ${f.borderRadius08};
-  background: ${i.neutral0};
-  box-shadow: ${z.dropShadow};
-  overflow: hidden;
-  flex-grow: 1;
-  height: initial;
-  height: ${({height:o})=>o}px;
-  max-height: 1200px;
-  width: ${({sizeVar:o})=>G(o)}px;
-  max-width: ${({sizeVar:o})=>G(o)}px;
-`,Bo=k.default.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px 12px 24px;
-  gap: 10px;
-  header: 64px;
-`,wo=k.default.div`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  flex-direction: column;
-  background: ${i.neutral0};
-  min-height: ${({height:o})=>o};
-  flex: 1;
-  ${({isIncludeHeader:o})=>er(o)}
-`,Eo=k.default.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: ${({sizeVar:o})=>G(o)}px;
-  box-sizing: border-box;
-  padding: 0 24px;
-  overflow: hidden;
-  background: ${i.neutral0};
-`,$o=k.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 ${i.neutral300};
-  background: ${i.neutral0};
-`;var Oo=(p=>(p.XXS="XXS",p.XS="XS",p.S="S",p.M="M",p.L="L",p.XL="XL",p.XXL="XXL",p))(Oo||{}),B=Symbol("MODAL_HEADER"),q=Symbol("MODAL_BODY"),w=Symbol("MODAL_FOOTER");var Do=function(){};var tr=({children:o,outsideClick:t=Do,...e})=>{let a=u.default.useRef(null);lo(t,a);let r=u.default.Children.toArray(o),s=r.find(n=>{if(!u.default.isValidElement(n)||n.type[B])return n}),l=r.find(n=>{if(!u.default.isValidElement(n)||n.type[w])return n}),p=u.Children.map(r,n=>u.default.isValidElement(n)?u.default.cloneElement(n,{isIncludeHeader:!!s,isIncludeFooter:!!l,sizeVar:e.sizeVar,height:e.height}):n);return u.default.createElement(_o,{ref:a,...e},p)},Lo=tr;var Ho=c(require("react"),1);var Vo=({children:o})=>Ho.default.createElement($o,null,o);Vo[w]=!0;var Ro=Vo;var h=c(require("react"),1);var zo=c(require("react-custom-scrollbars-2"),1);var Ao=({children:o,isIncludeHeader:t=!1,isIncludeFooter:e=!1,sizeVar:a,height:r})=>{let{height:s}=Y(document.body,{trackHeight:!0}),l=64,p=64,n=64,d=(0,h.useCallback)(()=>{let x=0;return t&&(x+=l),e&&(x+=p),x},[e,t]),m=(0,h.useMemo)(()=>d(),[d]),y=()=>r?r-m:"100%",v=s-n-m,C=1200-n-m;return h.default.createElement(wo,{isIncludeHeader:t,height:y()},h.default.createElement(zo.default,{id:"scrollbar",autoHeight:!r,autoHeightMin:y(),autoHeightMax:s>1200?C:v,autoHide:!0,autoHideTimeout:1e3,autoHideDuration:200,style:{height:"100%",overflow:"hidden"}},h.default.createElement(Eo,{isIncludeHeader:t,sizeVar:a},o)))};Ao[q]=!0;var No=Ao;var Xo=c(require("react"),1);var Fo=({children:o})=>Xo.default.createElement(Bo,null,o);Fo[B]=!0;var Io=Fo;var rr={Container:Lo,Header:Io,Body:No,Footer:Ro};var oo=c(require("react"),1);var E=require("react"),Wo=(o,t)=>{let[e,a]=(0,E.useState)(!1),r=o!==void 0,s=()=>{!r&&a(l=>!l)};return(0,E.useEffect)(()=>{r&&a(o)},[r,o]),(0,E.useEffect)(()=>{t&&a(t)},[t,r]),[e,s]};var J={SOLID:"SOLID"},nr={S:"S",XS:"XS"};var Ko=c(require("@emotion/styled"),1),I=require("@emotion/react");var Yo=require("@emotion/react"),F=o=>{if(o)return Yo.css`
-    opacity: 50%;
-    cursor: not-allowed;
-  `};var jo=o=>{switch(o){case"XS":return"body3_400";case"S":return"body2_400";default:return"body2_400"}},ar=({isSelected:o,color:t,radius:e})=>I.css`
-  padding: 7px 12px;
-  gap: 4px;
-  background: ${i.neutral150};
-  border-radius: ${f.borderRadius06};
-  & > span {
-    color: ${i.neutral400};
-  }
-  &:hover {
-    background: ${i.neutral200};
-  }
-
-  ${e&&I.css`
-    border-radius: ${f.borderRadius16};
-  `};
-  ${o&&I.css`
-    background: ${i[t]};
-    & > span {
-      color: ${i.neutral0};
-    }
-    &:hover {
-      background: ${i[t]};
-    }
-  `};
-`,Q=Ko.default.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  width: fit-content;
-  user-select: none;
-  cursor: pointer;
-  ${o=>o.styleVar==="SOLID"&&ar(o)};
-  ${({disabled:o})=>F(o)};
-`;var Uo=require("@shoplflow/utils"),ir=({text:o,isSelected:t,defaultSelected:e,color:a="neutral600",styleVar:r=J.SOLID,sizeVar:s,leftSource:l,rightSource:p,onClick:n=Uo.noop,disabled:d=!1,...m})=>{let[y,v]=Wo(t,e);return oo.default.createElement(Q,{...m,color:a,isSelected:y,styleVar:r,sizeVar:s,onClick:x=>{!d&&v(),!d&&n&&n(x)},disabled:d},l,oo.default.createElement(M,{typography:jo(s)},o),p)},Zo=ir;var ao=c(require("react"),1);var Go=c(require("@emotion/styled"),1),$=require("@emotion/react");var eo=(o,t=1)=>{let e=o.replace(/[0-9]|_/g,""),a=o.replace(/[a-z]|_/g,""),r=Number(a)+100*t,s=`${e}${r}`,l=Object.keys(i).filter(m=>m.includes(e)).sort((m,y)=>Number(m.replace(/[a-z]|_/g,""))-Number(y.replace(/[a-z]|_/g,""))),n=Object.keys(i).find(m=>m===s),d=l[l.length-1];return n||d};var qo=o=>{switch(o){case"XS":return"caption_400";case"S":return"body3_400";default:return"body3_400"}},pr=({color:o})=>$.css`
-  background: ${i.neutral0};
-  border: 1px solid ${i[o]};
-  border-radius: ${f.borderRadius20};
-  &:hover {
-    border: 1px solid ${i[eo(o,2)]};
-  }
-  & > span {
-    color: ${i[eo(o,4)]};
-  }
-`,sr=o=>{switch(o){case"XS":return $.css`
-        padding: 4px 8px;
-      `;case"S":return $.css`
-        padding: 7px 12px;
-      `;default:return $.css`
-        padding: 7px 12px;
-      `}},to=Go.default.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  width: fit-content;
-  gap: 4px;
-  cursor: pointer;
-  background: ${({background:o})=>o&&i[o]};
-  ${({sizeVar:o})=>sr(o)};
-  ${o=>o.styleVar==="LINE"&&pr(o)};
-  ${({disabled:o})=>F(o)};
-`;var Jo=require("@shoplflow/utils");var ro={LINE:"LINE"},no={S:"S",XS:"XS"};var lr=({styleVar:o=ro.LINE,color:t="neutral200",sizeVar:e=no.S,text:a,onClick:r=Jo.noop,disabled:s=!1,...l})=>ao.default.createElement(to,{styleVar:o,color:t,...l,onClick:n=>{!s&&r(n)},disabled:s},ao.default.createElement(M,{typography:qo(e)},a)),Qo=lr;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,spacingTokens,typographyTokens,useDomain,useHandleModal,useModalStore,useModalValue,useOutsideClick,useResizeObserver});
+"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