@shoplflow/base 0.6.0 → 0.7.0

package/dist/components/Chips/ChipButton/index.d.ts

@@ -1,3 +1,2 @@
 export { default as ChipButton } from './ChipButton';
-export * from './ChipButton.styled';
 export * from './ChipButton.types';

package/dist/components/Chips/ChipToggle/index.d.ts

@@ -1,3 +1,2 @@
 export { default as ChipToggle } from './ChipToggle';
-export * from './ChipToggle.styled';
 export * from './ChipToggle.types';

package/dist/index.cjs

@@ -1,4 +1,4 @@
-"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)`
+"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})},no=(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)):{},no(t||!o||!o.__esModule?O(e,"default",{value:o,enumerable:!0}):e,o)),ie=o=>no(O({},"__esModule",{value:!0}),o);var dr={};ae(dr,{ChipButton:()=>Qo,ChipButtonSizeVariants:()=>to,ChipButtonStyleVariants:()=>eo,ChipToggle:()=>Uo,ChipToggleSizeVariants:()=>nr,ChipToggleStyleVariants:()=>J,MODAL_BODY_KEY:()=>q,MODAL_FOOTER_KEY:()=>w,MODAL_HEADER_KEY:()=>B,Modal:()=>rr,ModalProvider:()=>L,ModalSize:()=>Eo,MotionStack:()=>U,ShoplflowProvider:()=>ho,Stack:()=>bo,StyledStack:()=>K,Text:()=>M,borderRadiusTokens:()=>f,boxShadowTokens:()=>z,colorTokens:()=>i,fontWeightTokens:()=>xo,spacingTokens:()=>R,typographyTokens:()=>To,useDomain:()=>W,useHandleModal:()=>pe,useModalStore:()=>g,useModalValue:()=>se,useOutsideClick:()=>io,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 ao=require("zustand"),g=(0,ao.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)),p=!!e,l=!e&&!a,s=!!String(a)&&!e;if(r)throw new Error("id\uC640 deps\uB294 \uB3D9\uC2DC\uC5D0 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");if(p){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(s){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"),io=(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}},po=io;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(p=>{p.forEach(l=>{if(l.target===o){let{width:s,height:n}=l.contentRect,d={...e};t.trackWidth&&s!==e.width&&(d.width=s),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 fo=c(require("react"),1);var so={initial:{opacity:0},animate:{opacity:1,transition:{duration:.1}},exit:{opacity:0,transition:{duration:.1}}};var lo=c(require("@emotion/styled"),1),co=require("framer-motion"),mo=(0,lo.default)(co.motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9,7 +9,7 @@
   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)`
+`;var le=({children:o})=>fo.default.createElement(mo,{variants:so,initial:"initial",animate:"animate",exit:"exit"},o),uo=le;var yo=require("react-dom"),H=require("framer-motion"),go=c(require("@emotion/styled"),1),de=(0,go.default)(H.motion.div)`
   position: relative;
   display: flex;
   align-items: center;
@@ -19,7 +19,7 @@
   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`
+`,ce=()=>{let o=g(t=>t.modal);return S.default.createElement(S.default.Fragment,null,(0,yo.createPortal)(S.default.createElement(H.AnimatePresence,null,o.map((t,e)=>S.default.createElement(uo,{key:e},S.default.createElement(de,null,t.component)))),document.body))},L=ce;var me=({children:o,domain:t="SHOPL"})=>(W({domain:t}),V.default.createElement(V.default.Fragment,null,V.default.createElement(L,null),o)),ho=me;var fe="var(--font-weight-regular)",ue="var(--font-weight-medium)",ye="var(--font-weight-bold)",xo={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)",Ce="var(--coolgray100)",ve="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)",He="var(--neutral400)",Le="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:Ce,coolgray50:ve,navy400:Pe,navy300:_e,neutral0:Be,neutral100:we,neutral150:Ee,neutral200:$e,neutral300:Oe,neutral350:De,neutral400:He,neutral500:Le,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)",Ct="var(--spacing32)",vt="var(--spacing40)",R={spacing04:gt,spacing06:ht,spacing08:xt,spacing12:Tt,spacing16:St,spacing20:bt,spacing24:Mt,spacing30:kt,spacing32:Ct,spacing40:vt},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",Ht=".title1_400",Lt=".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",To={heading1_700:_t,heading1_400:Bt,heading2_700:wt,heading2_400:Et,heading3_700:$t,heading3_400:Ot,title1_700:Dt,title1_400:Ht,title2_700:Lt,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 So=c(require("@emotion/styled"),1);var K=So.default.div`
   display: flex;
   width: ${({width:o})=>o};
   height: ${({height:o})=>o};
@@ -32,14 +32,14 @@
   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`
+`;var j=o=>(0,A.forwardRef)(function({as:e="div",spacing:a=o?.spacing??"spacing08",direction:r=o?.direction??"column",align:p=o?.align??"flex-start",justify:l=o?.justify??"flex-start",width:s=o?.width??"initial",height:n=o?.height??"initial",flexWrap:d=o?.flexWrap??"initial",flex:m=o?.flex??"initial",radius:y=o?.radius,background:C=o?.background,...v},x){return A.default.createElement(K,{as:e,spacing:a,ref:x,direction:r,align:p,justify:l,width:s,height:n,flexWrap:d,flex:m,background:C,radius:y,...v},v.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 bo=b;var X=c(require("react"),1);var _=require("@emotion/react"),Mo=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`
+  `,ko=Mo.default.span`
   display: ${({display:o})=>o&&o};
   align-items: center;
   color: ${({color:o})=>o&&i[o]};
@@ -55,13 +55,13 @@
   ${({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="inherit",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`
+`;var Ut=(0,X.forwardRef)(({children:o,typography:t="body1_400",whiteSpace:e,color:a="neutral700",display:r="inline-block",textAlign:p="inherit",className:l,...s},n)=>X.default.createElement(ko,{ref:n,whiteSpace:e,className:l?`${t} ${l}`:t,color:a,display:r,textAlign:p,...s},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,Co=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 Co;case"L":return Jt;case"XL":return Qt;case"XXL":return or;default:return Co}},er=o=>o?Z.css`
       padding-top: 16px;
       padding-bottom: 24px;
     `:Z.css`
     padding-top: 24px;
     padding-bottom: 24px;
-  `,_o=k.default.div`
+  `,vo=k.default.div`
   display: flex;
   flex-direction: column;
   border-radius: ${f.borderRadius08};
@@ -74,14 +74,14 @@
   max-height: 1200px;
   width: ${({sizeVar:o})=>G(o)}px;
   max-width: ${({sizeVar:o})=>G(o)}px;
-`,Bo=k.default.div`
+`,Po=k.default.div`
   display: flex;
   width: 100%;
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px 12px 24px;
   gap: 10px;
-`,wo=k.default.div`
+`,_o=k.default.div`
   display: flex;
   width: 100%;
   height: 100%;
@@ -91,7 +91,7 @@
   min-height: ${({height:o})=>o};
   flex: 1;
   ${({isIncludeHeader:o})=>er(o)}
-`,Eo=k.default.div`
+`,Bo=k.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -100,7 +100,7 @@
   padding: 0 24px;
   overflow: hidden;
   background: ${i.neutral0};
-`,$o=k.default.div`
+`,wo=k.default.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -110,10 +110,10 @@
   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`
+`;var Eo=(s=>(s.XXS="XXS",s.XS="XS",s.S="S",s.M="M",s.L="L",s.XL="XL",s.XXL="XXL",s))(Eo||{}),B=Symbol("MODAL_HEADER"),q=Symbol("MODAL_BODY"),w=Symbol("MODAL_FOOTER");var $o=function(){};var tr=({children:o,outsideClick:t=$o,...e})=>{let a=u.default.useRef(null);po(t,a),console.debug("ModalContainer",e),console.debug("children",o);let r=u.default.Children.toArray(o),p=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}),s=u.Children.map(r,n=>u.default.isValidElement(n)?u.default.cloneElement(n,{isIncludeHeader:!!p,isIncludeFooter:!!l,sizeVar:e.sizeVar,height:e.height}):n);return u.default.createElement(vo,{ref:a,...e},s)},Oo=tr;var Do=c(require("react"),1);var Ho=({children:o})=>Do.default.createElement(wo,null,o);Ho[w]=!0;var Lo=Ho;var h=c(require("react"),1);var Vo=c(require("react-custom-scrollbars-2"),1);var Ro=({children:o,isIncludeHeader:t=!1,isIncludeFooter:e=!1,sizeVar:a,height:r})=>{let{height:p}=Y(document.body,{trackHeight:!0});console.debug("windowHeight",p),console.debug("isIncludeFooter",e),console.debug("isIncludeHeader",t),console.debug("sizeVar",a);let l=64,s=64,n=64,d=(0,h.useCallback)(()=>{let x=0;return t&&(x+=l),e&&(x+=s),x},[e,t]),m=(0,h.useMemo)(()=>d(),[d]),y=()=>r?r-m:"100%",C=p-n-m,v=1200-n-m;return h.default.createElement(_o,{isIncludeHeader:t,height:y()},h.default.createElement(Vo.default,{id:"scrollbar",autoHeight:!r,autoHeightMin:y(),autoHeightMax:p>1200?v:C,autoHide:!0,autoHideTimeout:1e3,autoHideDuration:200,style:{height:"100%",overflow:"hidden"}},h.default.createElement(Bo,{isIncludeHeader:t,sizeVar:a},o)))};Ro[q]=!0;var zo=Ro;var Ao=c(require("react"),1);var No=({children:o})=>Ao.default.createElement(Po,null,o);No[B]=!0;var Xo=No;var rr={Container:Oo,Header:Xo,Body:zo,Footer:Lo};var Q=c(require("react"),1);var E=require("react"),Fo=(o,t)=>{let[e,a]=(0,E.useState)(!1),r=o!==void 0,p=()=>{!r&&a(l=>!l)};return(0,E.useEffect)(()=>{r&&a(o)},[r,o]),(0,E.useEffect)(()=>{t&&a(t)},[t,r]),[e,p]};var J={SOLID:"SOLID"},nr={S:"S",XS:"XS"};var Wo=c(require("@emotion/styled"),1),I=require("@emotion/react");var Io=require("@emotion/react"),F=o=>{if(o)return Io.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`
+  `};var Yo=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};
@@ -137,7 +137,7 @@
       background: ${i[t]};
     }
   `};
-`,Q=Ko.default.button`
+`,Ko=Wo.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -147,15 +147,15 @@
   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`
+`;var jo=require("@shoplflow/utils"),ir=({text:o,isSelected:t,defaultSelected:e,color:a="neutral600",styleVar:r=J.SOLID,sizeVar:p,leftSource:l,rightSource:s,onClick:n=jo.noop,disabled:d=!1,...m})=>{let[y,C]=Fo(t,e);return Q.default.createElement(Ko,{...m,color:a,isSelected:y,styleVar:r,sizeVar:p,onClick:x=>{!d&&C(),!d&&n&&n(x)},disabled:d},l,Q.default.createElement(M,{typography:Yo(p)},o),s)},Uo=ir;var ro=c(require("react"),1);var Zo=c(require("@emotion/styled"),1),$=require("@emotion/react");var oo=(o,t=1)=>{let e=o.replace(/[0-9]|_/g,""),a=o.replace(/[a-z]|_/g,""),r=Number(a)+100*t,p=`${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===p),d=l[l.length-1];return n||d};var Go=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)]};
+    border: 1px solid ${i[oo(o,2)]};
   }
   & > span {
-    color: ${i[eo(o,4)]};
+    color: ${i[oo(o,4)]};
   }
 `,sr=o=>{switch(o){case"XS":return $.css`
         padding: 4px 8px;
@@ -163,7 +163,7 @@
         padding: 7px 12px;
       `;default:return $.css`
         padding: 7px 12px;
-      `}},to=Go.default.button`
+      `}},qo=Zo.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -175,4 +175,4 @@
   ${({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});
+`;var Jo=require("@shoplflow/utils");var eo={LINE:"LINE"},to={S:"S",XS:"XS"};var lr=({styleVar:o=eo.LINE,color:t="neutral200",sizeVar:e=to.S,text:a,onClick:r=Jo.noop,disabled:p=!1,...l})=>ro.default.createElement(qo,{styleVar:o,color:t,...l,onClick:n=>{!p&&r(n)},disabled:p},ro.default.createElement(M,{typography:Go(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,StyledStack,Text,borderRadiusTokens,boxShadowTokens,colorTokens,fontWeightTokens,spacingTokens,typographyTokens,useDomain,useHandleModal,useModalStore,useModalValue,useOutsideClick,useResizeObserver});

package/dist/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "license": "Apache-2.0",
   "module": "dist/index.mjs",