@shoplflow/base 0.9.0 → 0.10.0

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ChildrenProps, SizeVariantProps } from '../../utils/type/ComponentProps';
-import type { $Values } from '../../utils/type/$values';
+import type { $Values } from '@shoplflow/utils';
 export declare enum ModalSize {
     XXS = "XXS",
     XS = "XS",

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

@@ -1,10 +1,10 @@
 import type { ComponentPropsWithRef, CSSProperties, ReactElement } from 'react';
 import type { CustomDomComponent } from 'framer-motion';
 import type { BorderRadiusTokens, ColorTokens, SpacingTokens } from '../../styles';
-import type { ChildrenProps, HTMLPropsWithOutRef, RenderConfigProps, StringElementType } from '../../utils/type/ComponentProps';
-export type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithOutRef<T>;
+import type { ChildrenProps, HTMLPropsWithoutRef, RenderConfigProps, StringElementType } from '../../utils/type/ComponentProps';
+export type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
 export type StackComponentType = <T extends StringElementType = 'div'>(props: StackGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
-export type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithOutRef<T> & StackProps>;
+export type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackProps>;
 export interface StackProps extends StackOptionProps, ChildrenProps {
 }
 export interface StackOptionProps {

package/dist/components/Text/Text.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { TextProps } from './Text.types';
-declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<unknown>>;
 export default Text;

package/dist/hooks/index.d.ts

@@ -2,5 +2,3 @@ export * from './useDomain';
 export * from './useHandleModal';
 export * from './useModalValue';
 export * from './useModalStore';
-export * from './useOutsideClick';
-export * from './useResizeObserver';

package/dist/hooks/useDomain.d.ts

@@ -3,4 +3,5 @@ type UseDomainProps = {
     domain?: DomainType;
 };
 export declare const useDomain: ({ domain }: UseDomainProps) => void;
+export declare const getDomain: () => "shopl" | "hada";
 export {};

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

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

package/dist/utils/type/ComponentProps.d.ts

@@ -5,11 +5,8 @@ import type { BorderRadiusTokens, ColorTokens } from '../../styles';
  * HTML 태그에 대한 타입
  */
 export type StringElementType = ElementType & string;
-/**
- * Ref를 제외한 HTMLProps를 반환합니다.
- * Generic으로 HTML 태그를 받습니다.
- */
-export type HTMLPropsWithOutRef<T extends StringElementType> = ComponentPropsWithoutRef<T>;
+export type HTMLPropsWithoutRef<T extends StringElementType> = ComponentPropsWithoutRef<T>;
+export type PolymorphicRef<T extends React.ElementType> = React.ComponentPropsWithRef<T>['ref'];
 export interface DisableProps {
     /**
      * 비활성화 여부를 설정합니다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "license": "Apache-2.0",
   "module": "dist/index.mjs",
@@ -64,7 +64,8 @@
     "react-dom": "^18.2.0",
     "storybook": "^7.4.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.3",
+    "@shoplflow/utils": "^0.2.0"
   },
   "eslintConfig": {
     "extends": [
@@ -76,7 +77,7 @@
     "framer-motion": "^9.1.7",
     "react-custom-scrollbars-2": "^4.5.0",
     "zustand": "^4.4.1",
-    "@shoplflow/utils": "^0.1.0"
+    "@shoplflow/utils": "^0.2.0"
   },
   "scripts": {
     "type-check": "tsc --noEmit || true",

package/dist/hooks/useOutsideClick.d.ts

@@ -1,14 +0,0 @@
-import type React from 'react';
-/**
- * @description
- * outsideClick 이벤트를 감지하는 hook
- * return되는 ref를 컴포넌트에 적용하거나 외부에서 생성한 ref를 기준으로 부모 요소를 클릭하는 경우 outsideClick 함수를 실행합니다.
- * 외부에서 생성한 ref를 사용할 경우 initialRef를 통해 ref를 전달해야 합니다.
- *
- * @param onClickOutside
- * @param initialRef
- */
-export declare const useOutsideClick: <T extends HTMLElement>(onClickOutside: (target: EventTarget | null) => void, initialRef?: React.RefObject<T> | undefined) => {
-    ref: React.RefObject<T>;
-};
-export default useOutsideClick;

package/dist/hooks/useResizeObserver.d.ts

@@ -1,9 +0,0 @@
-type ResizeOptions = {
-    trackWidth?: boolean;
-    trackHeight?: boolean;
-};
-export declare const useResizeObserver: <T extends HTMLElement>(element: T, options?: ResizeOptions) => {
-    width: number;
-    height: number;
-};
-export {};

package/dist/utils/noop.d.ts

@@ -1 +0,0 @@
-export declare const noop: () => void;

package/dist/utils/type/$values.d.ts

@@ -1 +0,0 @@
-export type $Values<T extends object> = T[keyof T];