@shoplflow/base 0.9.0 → 0.11.3

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

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

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

@@ -1,3 +0,0 @@
-import type { ModalFooterType } from './Modal.types';
-declare const ModalFooter: ModalFooterType;
-export default ModalFooter;

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

@@ -1,3 +0,0 @@
-import type { ModalHeaderType } from './Modal.types';
-declare const ModalHeader: ModalHeaderType;
-export default ModalHeader;

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

@@ -1,7 +0,0 @@
-export declare const Modal: {
-    Container: ({ children, outsideClick, ...rest }: import("./Modal.types").ModalContainerProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
-    Header: import("./Modal.types").ModalHeaderType;
-    Body: import("./Modal.types").ModalBodyType;
-    Footer: import("./Modal.types").ModalFooterType;
-};
-export * from './Modal.types';

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

@@ -1,12 +0,0 @@
-import type { MotionStackComponentType, StackComponentType } from './Stack.types';
-interface StackType extends StackComponentType {
-    Vertical: StackComponentType;
-    Horizontal: StackComponentType;
-}
-export declare const Stack: StackType;
-interface MotionStackType extends MotionStackComponentType {
-    Vertical: MotionStackComponentType;
-    Horizontal: MotionStackComponentType;
-}
-export declare const MotionStack: MotionStackType;
-export default Stack;

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import type { StackOptionProps } from './Stack.types';
-export declare const StyledStack: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & StackOptionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,52 +0,0 @@
-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>;
-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 interface StackProps extends StackOptionProps, ChildrenProps {
-}
-export 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;
-}

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

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

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

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

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import type { TextOptionProps } from './Text.types';
-export declare const StyledText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & TextOptionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -1,23 +0,0 @@
-import type { CSSProperties, HTMLAttributes } from 'react';
-import type { ColorTokens, TypographyTokens } from '../../styles';
-import type { ChildrenProps, RenderConfigProps } from '../../utils/type/ComponentProps';
-export interface TextOptionProps {
-    /**
-     * 타이포그레피를 설정합니다.
-     */
-    typography?: TypographyTokens;
-    color?: ColorTokens;
-    /**
-     * 텍스트를 몇 줄까지 보여줄지를 설정합니다.
-     */
-    lineClamp?: number;
-    whiteSpace?: CSSProperties['whiteSpace'];
-    display?: CSSProperties['display'];
-    textAlign?: CSSProperties['textAlign'];
-    textOverflow?: CSSProperties['textOverflow'];
-    textDecorations?: CSSProperties['textDecoration'];
-    opacity?: CSSProperties['opacity'];
-    wordBreak?: CSSProperties['wordBreak'];
-}
-export interface TextProps extends TextOptionProps, ChildrenProps, RenderConfigProps, Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
-}

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

@@ -1,2 +0,0 @@
-export { default as Text } from './Text';
-export * from './Text.types';

package/dist/components/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Stack';
-export * from './Text';
-export * from './Modal';
-export * from './BackDrop';
-export * from './Chips';

package/dist/hooks/index.d.ts

@@ -1,6 +0,0 @@
-export * from './useDomain';
-export * from './useHandleModal';
-export * from './useModalValue';
-export * from './useModalStore';
-export * from './useOutsideClick';
-export * from './useResizeObserver';

package/dist/hooks/useDomain.d.ts

@@ -1,6 +0,0 @@
-import type { DomainType } from '../types/Domain';
-type UseDomainProps = {
-    domain?: DomainType;
-};
-export declare const useDomain: ({ domain }: UseDomainProps) => void;
-export {};

package/dist/hooks/useHandleModal.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const useHandleModal: () => {
-    addModal: (modal: import("react").ReactNode, id?: string | undefined) => void;
-    removeModal: (props?: import("./useModalStore").RemoveModalProps | undefined) => void;
-};

package/dist/hooks/useModalStore.d.ts

@@ -1,15 +0,0 @@
-import type { ReactNode } from 'react';
-export type ModalStateType = {
-    component: ReactNode;
-    id?: string;
-};
-export type RemoveModalProps = {
-    id?: string;
-    deps?: number;
-};
-export type UseModalStore = {
-    modal: ModalStateType[];
-    addModal: (modal: ReactNode, id?: string) => void;
-    removeModal: (props?: RemoveModalProps) => void;
-};
-export declare const useModalStore: import("zustand").UseBoundStore<import("zustand").StoreApi<UseModalStore>>;

package/dist/hooks/useModalValue.d.ts

@@ -1,3 +0,0 @@
-export declare const useModalValue: () => {
-    modal: import("./useModalStore").ModalStateType[];
-};

package/dist/hooks/useOnToggle.d.ts

@@ -1,11 +0,0 @@
-/**
- * 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/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/index.mjs

@@ -1,179 +0,0 @@
-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: 20000;
-  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="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`
-      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;
-  header: 64px;
-`,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

@@ -1,8 +0,0 @@
-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

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

package/dist/styles/index.d.ts

@@ -1,9 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

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

package/dist/types/Domain.d.ts

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

package/dist/utils/getNextColor.d.ts

@@ -1,11 +0,0 @@
-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

@@ -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];