@shoplflow/base 0.5.0 → 0.6.0

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

@@ -0,0 +1,3 @@
+import type { ChipButtonProps } from './ChipButton.types';
+declare const ChipButton: ({ styleVar, color, sizeVar, text, onClick, disabled, ...rest }: ChipButtonProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export default ChipButton;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { TypographyTokens } from '../../../styles';
+import type { ChipButtonProps } from './ChipButton.types';
+export declare const getLineTypographyBySizeVar: (sizeVar: ChipButtonProps['sizeVar']) => TypographyTokens;
+export declare const StyledChipButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ChipButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

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

@@ -0,0 +1,16 @@
+import type { ColorTokenProps, LeftAndRightElementProps, SizeVariantProps, StyleVariantProps, TextProps, DisableProps, BackgroundColorProps } from '../../../utils/type/ComponentProps';
+import type { $Values } from '@shoplflow/utils';
+import type { HTMLAttributes } from 'react';
+export declare const ChipButtonStyleVariants: {
+    readonly LINE: "LINE";
+};
+export declare const ChipButtonSizeVariants: {
+    readonly S: "S";
+    readonly XS: "XS";
+};
+export type ChipButtonStyleVariantType = $Values<typeof ChipButtonStyleVariants>;
+export type ChipButtonSizeVariantType = $Values<typeof ChipButtonSizeVariants>;
+export interface ChipButtonProps extends ChipButtonOptionProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'>, TextProps, DisableProps, LeftAndRightElementProps, SizeVariantProps<ChipButtonSizeVariantType>, StyleVariantProps<ChipButtonStyleVariantType>, ColorTokenProps, BackgroundColorProps {
+}
+export interface ChipButtonOptionProps {
+}

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

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

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

@@ -0,0 +1,3 @@
+import type { ChipToggleProps } from './ChipToggle.types';
+declare const ChipToggle: ({ text, isSelected, defaultSelected, color, styleVar, sizeVar, leftSource, rightSource, onClick, disabled, ...rest }: ChipToggleProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export default ChipToggle;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ChipToggleProps } from './ChipToggle.types';
+import type { TypographyTokens } from '../../../styles';
+export declare const getLineTypographyBySizeVar: (sizeVar: ChipToggleProps['sizeVar']) => TypographyTokens;
+export declare const StyledChip: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ChipToggleProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

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

@@ -0,0 +1,16 @@
+import type { $Values } from '../../../utils/type/$values';
+import type { ColorTokenProps, SizeVariantProps, StyleVariantProps, LeftAndRightElementProps, TextProps, SelectedProps, RadiusBooleanProps, DefaultSelectedProps, DisableProps } from '../../../utils/type/ComponentProps';
+import type { HTMLAttributes } from 'react';
+export declare const ChipToggleStyleVariants: {
+    readonly SOLID: "SOLID";
+};
+export declare const ChipToggleSizeVariants: {
+    readonly S: "S";
+    readonly XS: "XS";
+};
+export type ChipToggleStyleVariantType = $Values<typeof ChipToggleStyleVariants>;
+export type ChipToggleSizeVariantType = $Values<typeof ChipToggleSizeVariants>;
+export interface ChipToggleProps extends ChipToggleOptionProps, SelectedProps, DefaultSelectedProps, ColorTokenProps, StyleVariantProps<ChipToggleStyleVariantType>, SizeVariantProps<ChipToggleSizeVariantType>, LeftAndRightElementProps, RadiusBooleanProps, TextProps, DisableProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'> {
+}
+export interface ChipToggleOptionProps {
+}

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

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

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

@@ -0,0 +1,2 @@
+export * from './ChipToggle';
+export * from './ChipButton';

package/dist/components/index.d.ts

@@ -2,3 +2,4 @@ export * from './Stack';
 export * from './Text';
 export * from './Modal';
 export * from './BackDrop';
+export * from './Chips';

package/dist/global.css

@@ -10,6 +10,7 @@
   --border-radius08: 8px;
   --border-radius12: 12px;
   --border-radius16: 16px;
+  --border-radius20: 20px;
   --spacing04: 4px;
   --spacing06: 6px;
   --spacing08: 8px;

package/dist/hooks/useOnToggle.d.ts

@@ -0,0 +1,11 @@
+/**
+ * toggle 기능을 추상화한 hook입니다.
+ * selected, defaultSelected를 받아서 토글을 관리하는 hook입니다.
+ * selected가 있으면 controlled, 없으면 uncontrolled로 동작합니다.
+ * defaultSelected가 있으면 초기값으로 설정됩니다.
+ * @param {boolean} selected
+ * @param {boolean} defaultSelected
+ * @return {[boolean, (() => void)]}
+ */
+export type UseOnToggle = (selected?: boolean, defaultSelected?: boolean) => [boolean, () => void];
+export declare const useOnToggle: UseOnToggle;

package/dist/index.cjs

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

package/dist/index.mjs

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

package/dist/styles/tokens.d.ts

@@ -9,6 +9,7 @@ export declare const borderRadiusTokens: {
     borderRadius08: string;
     borderRadius12: string;
     borderRadius16: string;
+    borderRadius20: string;
 };
 export declare const colorTokens: {
     coolgray300: string;

package/dist/styles/utils/getDisabledStyle.d.ts

@@ -0,0 +1 @@
+export declare const getDisabledStyle: (disabled?: boolean) => import("@emotion/react").SerializedStyles | undefined;

package/dist/utils/getNextColor.d.ts

@@ -0,0 +1,11 @@
+import type { ColorTokens } from '../styles';
+/**
+ * 인자로 받은 색상의 다음 색상을 반환합니다.
+ * step을 통해 다음 색상의 단계를 설정할 수 있습니다.
+ * 만약 다음 색상이 없다면 가장 높은 단계의 색상을 반환합니다.
+ * 100단위만 반환하며 50, _5와 같이 예외적인 색상은 반환하지 않습니다.
+ * @param {ColorTokens} color
+ * @param {number} step
+ * @return {ColorTokens}
+ */
+export declare const getNextColor: (color: ColorTokens, step?: number) => ColorTokens;

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

@@ -1,8 +1,50 @@
 import type { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from 'react';
 import type React from 'react';
-import type { ColorTokens } from '../../styles';
+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 interface DisableProps {
+    /**
+     * 비활성화 여부를 설정합니다.
+     */
+    disabled?: boolean;
+}
+export interface SelectedProps {
+    /**
+     * 선택 여부를 설정합니다.
+     */
+    isSelected?: boolean;
+}
+export interface DefaultSelectedProps {
+    /**
+     * 기본 선택 여부를 설정합니다.
+     *
+     * SelectedProps보다 우선적으로 적용됩니다.
+     */
+    defaultSelected?: boolean;
+}
+/**
+ * RadiusBooleanProps는 RadiusProps와 함께 사용할 수 없습니다.
+ */
+export interface RadiusBooleanProps {
+    /**
+     * Radius를 토글할 수 있는 옵션입니다.
+     */
+    radius?: boolean;
+}
+export interface RadiusProps {
+    /**
+     * Radius를 설정합니다.
+     */
+    radius?: BorderRadiusTokens;
+}
 export type RenderConfigProps = {
     /**
      * 랜더하려고 하는 HTML tag로 변환할 수 있습니다.
@@ -31,15 +73,16 @@ export interface ChildrenProps<Children = React.ReactNode> {
      */
     children?: Children;
 }
-export interface DisableProps {
+export interface TextProps {
     /**
-     * 비활성화 여부를 설정합니다.
+     * 텍스트를 설정합니다.
      */
-    disabled?: boolean;
+    text?: string;
 }
 export interface ColorTokenProps {
     /**
      * 텍스트 혹은 아이콘의 색상을 설정합니다.
+     * styleVar이 있는 경우 메인색상을 설정합니다.
      */
     color?: ColorTokens;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "license": "Apache-2.0",
   "module": "dist/index.mjs",
@@ -43,7 +43,6 @@
     "@storybook/addon-links": "^7.4.1",
     "@storybook/addon-mdx-gfm": "^7.4.1",
     "@storybook/addon-measure": "^7.4.1",
-    "@storybook/addon-onboarding": "^1.0.8",
     "@storybook/addon-outline": "^7.4.1",
     "@storybook/addon-toolbars": "^7.4.1",
     "@storybook/addon-viewport": "^7.4.1",
@@ -73,14 +72,17 @@
     ]
   },
   "dependencies": {
+    "classnames": "^2.3.2",
     "framer-motion": "^9.1.7",
     "react-custom-scrollbars-2": "^4.5.0",
-    "zustand": "^4.4.1"
+    "zustand": "^4.4.1",
+    "@shoplflow/utils": "^0.1.0"
   },
   "scripts": {
-    "build:tokens": "node scripts/generate-tokens.cjs",
     "type-check": "tsc --noEmit || true",
+    "build:tokens": "node scripts/generate-tokens.cjs",
     "build:package": "node build.js",
+    "build:component": "scripts/generate-component.sh",
     "build:storybook": "storybook build",
     "build": "pnpm run build:package && pnpm run build:storybook",
     "dev:stories": "storybook dev -p 6007",