@shoplflow/base 0.4.0 → 0.6.0

package/dist/index.d.ts

@@ -1,212 +1,5 @@
-import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
-import * as React from 'react';
-import React__default, { ElementType, ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, CSSProperties } from 'react';
-import { CustomDomComponent } from 'framer-motion';
-import * as _emotion_styled from '@emotion/styled';
-import * as _emotion_react from '@emotion/react';
-
-type DomainType = 'SHOPL' | 'HADA';
-
-interface ShoplflowProviderProps {
-    domain?: DomainType;
-    children: React__default.ReactNode;
-}
-declare const ShoplflowProvider: ({ children, domain }: ShoplflowProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-
-type UseDarkModeProps = {
-    domain?: DomainType;
-};
-declare function useDomain({ domain }: UseDarkModeProps): null;
-
-declare const fontWeightTokens: {
-    fontWeightRegular: string;
-    fontWeightMedium: string;
-    fontWeightBold: string;
-};
-declare const borderRadiusTokens: {
-    borderRadius04: string;
-    borderRadius06: string;
-    borderRadius08: string;
-    borderRadius12: string;
-    borderRadius16: string;
-};
-declare const colorTokens: {
-    coolgray300: string;
-    coolgray200: string;
-    coolgray100: string;
-    coolgray50: string;
-    navy400: string;
-    navy300: string;
-    neutral0: string;
-    neutral100: string;
-    neutral150: string;
-    neutral200: string;
-    neutral300: string;
-    neutral350: string;
-    neutral400: string;
-    neutral500: string;
-    neutral600: string;
-    neutral700: string;
-    neutral400_5: string;
-    red300: string;
-    red200: string;
-    red100: string;
-    ocean300: string;
-    ocean200: string;
-    ocean100: string;
-    purple400: string;
-    purple300: string;
-    purple100: string;
-    yellow300: string;
-    yellow200: string;
-    yellow100: string;
-    green300: string;
-    green200: string;
-    green100: string;
-    shopl400: string;
-    shopl300: string;
-    shopl200: string;
-    shopl150: string;
-    shopl100: string;
-    hada400: string;
-    hada300: string;
-    hada200: string;
-    hada150: string;
-    hada100: string;
-    background: string;
-    primary100: string;
-    primary150: string;
-    primary200: string;
-    primary300: string;
-    primary400: string;
-};
-declare const spacingTokens: {
-    spacing04: string;
-    spacing06: string;
-    spacing08: string;
-    spacing12: string;
-    spacing16: string;
-    spacing20: string;
-    spacing24: string;
-    spacing30: string;
-    spacing32: string;
-    spacing40: string;
-};
-declare const boxShadowTokens: {
-    dropShadow: string;
-};
-declare const typographyTokens: {
-    heading1_700: string;
-    heading1_400: string;
-    heading2_700: string;
-    heading2_400: string;
-    heading3_700: string;
-    heading3_400: string;
-    title1_700: string;
-    title1_400: string;
-    title2_700: string;
-    title2_500: string;
-    title2_400: string;
-    body1_700: string;
-    body1_500: string;
-    body1_400: string;
-    body2_700: string;
-    body2_500: string;
-    body2_400: string;
-    body3_400: string;
-    body3_500: string;
-    caption_400: string;
-};
-
-type ColorTokens = keyof typeof colorTokens;
-type SpacingTokens = keyof typeof spacingTokens;
-type BorderRadiusTokens = keyof typeof borderRadiusTokens;
-type BoxShadowTokens = keyof typeof boxShadowTokens;
-type FontWeightTokens = keyof typeof fontWeightTokens;
-type TypographyTokens = keyof typeof typographyTokens;
-
-type StringElementType = ElementType & string;
-type HTMLPropsWithOutRef<T extends StringElementType> = ComponentPropsWithoutRef<T>;
-type RenderConfigProps = {
-    /**
-     * 랜더하려고 하는 HTML tag로 변환할 수 있습니다.
-     *
-     * 예를 들어 a tag로 변환한다면 as='a'로 작성해주세요.
-     *
-     * @see https://emotion.sh/docs/styled#as-prop
-     */
-    as?: StringElementType;
-};
-interface ChildrenProps<Children = React__default.ReactNode> {
-    /**
-     * 컴포넌트 내부에 들어갈 children을 설정합니다.
-     */
-    children?: Children;
-}
-
-type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithOutRef<T>;
-type StackComponentType = <T extends StringElementType = 'div'>(props: StackGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
-type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithOutRef<T> & StackProps>;
-interface StackProps extends StackOptionProps, ChildrenProps {
-}
-interface StackOptionProps {
-    /**
-     * 요소들의 align-items 값
-     */
-    align?: CSSProperties['alignItems'];
-    /**
-     * 요소들의 justify-content 값
-     */
-    justify?: CSSProperties['justifyContent'];
-    /**
-     * 요소들의 flex-direction 값
-     * (값: row, column)
-     */
-    direction?: CSSProperties['flexDirection'];
-    /**
-     * 요소들 사이의 간격
-     */
-    spacing?: SpacingTokens;
-    /**
-     * flex-wrap 설정
-     */
-    flexWrap?: CSSProperties['flexWrap'];
-    /**
-     * width 설정
-     */
-    width?: CSSProperties['width'];
-    /**
-     * height 설정
-     */
-    height?: CSSProperties['height'];
-    /**
-     * flex 설정
-     */
-    flex?: CSSProperties['flex'];
-    /**
-     * background 설정
-     */
-    background?: ColorTokens;
-    /**
-     * border-radius 설정
-     */
-    radius?: BorderRadiusTokens;
-}
-
-interface StackType extends StackComponentType {
-    Vertical: StackComponentType;
-    Horizontal: StackComponentType;
-}
-declare const Stack: StackType;
-interface MotionStackType extends MotionStackComponentType {
-    Vertical: MotionStackComponentType;
-    Horizontal: MotionStackComponentType;
-}
-declare const MotionStack: MotionStackType;
-
-declare const StyledStack: _emotion_styled.StyledComponent<{
-    theme?: _emotion_react.Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & StackOptionProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
-export { BorderRadiusTokens, BoxShadowTokens, ColorTokens, FontWeightTokens, MotionStack, MotionStackComponentType, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledStack, TypographyTokens, borderRadiusTokens, colorTokens, fontWeightTokens, spacingTokens, typographyTokens, useDomain };
+export * from './providers';
+export * from './hooks';
+export * from './styles';
+export * from './providers';
+export * from './components';

package/dist/index.mjs

@@ -0,0 +1,178 @@
+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;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  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)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  z-index: 101;
+  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`
+  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]};
+  flex-wrap: ${({flexWrap:o})=>o};
+  flex: ${({flex:o})=>o};
+  background: ${({background:o})=>o?i[o]:"transparent"};
+  border-radius: ${({radius:o})=>o&&m[o]};
+  animation: 0.2s all ease-in-out;
+`;var D=o=>Pt(function({as:e="div",spacing:a=o?.spacing??"spacing08",direction:n=o?.direction??"column",align: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;
+  `,j=Bt.span`
+  display: ${({display:o})=>o&&o};
+  align-items: center;
+  color: ${({color:o})=>o&&i[o]};
+  ${({lineClamp:o})=>o&&wt(o)};
+  text-align: ${({textAlign:o})=>o&&o};
+  white-space: ${({whiteSpace:o})=>o&&o};
+  ${({textDecorations:o})=>o&&k`
+      text-decoration: ${o};
+    `};
+  ${({opacity:o})=>o&&k`
+      opacity: ${o};
+    `}
+  ${({wordBreak:o})=>o&&k`
+      word-break: ${o};
+    `};
+`;var Ot=$t(({children:o,typography:t="body1_400",whiteSpace:e,color:a="neutral700",display:n="inline-block",textAlign:s="inherit",className:l,...p},r)=>Et.createElement(j,{ref:r,whiteSpace:e,className:l?`${t} ${l}`:t,color:a,display:n,textAlign:s,...p},o)),b=Ot;import g,{Children as Xt}from"react";import M from"@emotion/styled";import{css as U}from"@emotion/react";var Dt=400,Lt=500,Ht=560,Z=640,Vt=768,Rt=1040,zt=1280,L=o=>{switch(o){case"XXS":return Dt;case"XS":return Lt;case"S":return Ht;case"M":return Z;case"L":return Vt;case"XL":return Rt;case"XXL":return zt;default:return Z}},At=o=>o?U`
+      padding-top: 16px;
+      padding-bottom: 24px;
+    `:U`
+    padding-top: 24px;
+    padding-bottom: 24px;
+  `,G=M.div`
+  display: flex;
+  flex-direction: column;
+  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})=>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;
+`,J=M.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  flex-direction: column;
+  background: ${i.neutral0};
+  min-height: ${({height:o})=>o};
+  flex: 1;
+  ${({isIncludeHeader:o})=>At(o)}
+`,Q=M.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${({sizeVar:o})=>L(o)}px;
+  box-sizing: border-box;
+  padding: 0 24px;
+  overflow: hidden;
+  background: ${i.neutral0};
+`,oo=M.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 24px;
+  gap: 12px;
+  border-top: 1px solid ${i.neutral300};
+  background: ${i.neutral0};
+`;var 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/providers/ShoplflowProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DomainType } from '../types/Domain';
+export interface ShoplflowProviderProps {
+    domain?: DomainType;
+    children: React.ReactNode;
+}
+declare const ShoplflowProvider: ({ children, domain }: ShoplflowProviderProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export default ShoplflowProvider;

package/dist/providers/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ShoplflowProvider } from './ShoplflowProvider';
+export type { ShoplflowProviderProps } from './ShoplflowProvider';
+export { default as ModalProvider } from '../portal/ModalPortal';

package/dist/styles/index.d.ts

@@ -0,0 +1,9 @@
+import { borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, spacingTokens, typographyTokens } from './tokens';
+type ColorTokens = keyof typeof colorTokens;
+type SpacingTokens = keyof typeof spacingTokens;
+type BorderRadiusTokens = keyof typeof borderRadiusTokens;
+type BoxShadowTokens = keyof typeof boxShadowTokens;
+type FontWeightTokens = keyof typeof fontWeightTokens;
+type TypographyTokens = keyof typeof typographyTokens;
+export type { ColorTokens, SpacingTokens, BorderRadiusTokens, FontWeightTokens, TypographyTokens, BoxShadowTokens };
+export { colorTokens, spacingTokens, fontWeightTokens, borderRadiusTokens, typographyTokens, boxShadowTokens };

package/dist/styles/tokens.d.ts

@@ -0,0 +1,100 @@
+export declare const fontWeightTokens: {
+    fontWeightRegular: string;
+    fontWeightMedium: string;
+    fontWeightBold: string;
+};
+export declare const borderRadiusTokens: {
+    borderRadius04: string;
+    borderRadius06: string;
+    borderRadius08: string;
+    borderRadius12: string;
+    borderRadius16: string;
+    borderRadius20: string;
+};
+export declare const colorTokens: {
+    coolgray300: string;
+    coolgray200: string;
+    coolgray100: string;
+    coolgray50: string;
+    navy400: string;
+    navy300: string;
+    neutral0: string;
+    neutral100: string;
+    neutral150: string;
+    neutral200: string;
+    neutral300: string;
+    neutral350: string;
+    neutral400: string;
+    neutral500: string;
+    neutral600: string;
+    neutral700: string;
+    neutral400_5: string;
+    red300: string;
+    red200: string;
+    red100: string;
+    ocean300: string;
+    ocean200: string;
+    ocean100: string;
+    purple400: string;
+    purple300: string;
+    purple100: string;
+    yellow300: string;
+    yellow200: string;
+    yellow100: string;
+    green300: string;
+    green200: string;
+    green100: string;
+    shopl400: string;
+    shopl300: string;
+    shopl200: string;
+    shopl150: string;
+    shopl100: string;
+    hada400: string;
+    hada300: string;
+    hada200: string;
+    hada150: string;
+    hada100: string;
+    background: string;
+    primary100: string;
+    primary150: string;
+    primary200: string;
+    primary300: string;
+    primary400: string;
+};
+export declare const spacingTokens: {
+    spacing04: string;
+    spacing06: string;
+    spacing08: string;
+    spacing12: string;
+    spacing16: string;
+    spacing20: string;
+    spacing24: string;
+    spacing30: string;
+    spacing32: string;
+    spacing40: string;
+};
+export declare const boxShadowTokens: {
+    dropShadow: string;
+};
+export declare const typographyTokens: {
+    heading1_700: string;
+    heading1_400: string;
+    heading2_700: string;
+    heading2_400: string;
+    heading3_700: string;
+    heading3_400: string;
+    title1_700: string;
+    title1_400: string;
+    title2_700: string;
+    title2_500: string;
+    title2_400: string;
+    body1_700: string;
+    body1_500: string;
+    body1_400: string;
+    body2_700: string;
+    body2_500: string;
+    body2_400: string;
+    body3_400: string;
+    body3_500: string;
+    caption_400: string;
+};

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

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

package/dist/types/Domain.d.ts

@@ -0,0 +1 @@
+export type DomainType = 'SHOPL' | 'HADA';

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/noop.d.ts

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

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

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