@shoplflow/base 0.7.0 → 0.7.1

package/dist/components/Modal/Modal.types.d.ts

@@ -41,10 +41,6 @@ export interface ModalBodyOptionProps {
     height?: number;
     sizeVar?: ModalSizeType;
 }
-export declare const MODAL_BODY_KEY: unique symbol;
-export interface ModalBodyType extends React.FC<ModalBodyProps> {
-    [MODAL_BODY_KEY]?: boolean;
-}
 export interface ModalFooterProps extends ModalFooterOptionProps, ChildrenProps {
 }
 export interface ModalFooterOptionProps {

package/dist/components/Modal/ModalBody.d.ts

@@ -1,3 +1,3 @@
-import type { ModalBodyType } from './Modal.types';
-declare const ModalBody: ModalBodyType;
+import type { ModalBodyProps } from './Modal.types';
+declare const ModalBody: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, }: ModalBodyProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 export default ModalBody;

package/dist/components/Modal/ModalContainer.d.ts

@@ -1,3 +1,3 @@
 import type { ModalContainerProps } from './Modal.types';
-declare const ModalContainer: ({ children, outsideClick, ...rest }: ModalContainerProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const ModalContainer: ({ children, outsideClick, sizeVar, ...rest }: ModalContainerProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 export default ModalContainer;

package/dist/components/Modal/index.d.ts

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

package/package.json

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