@shoplflow/base 0.24.6 → 0.24.8

package/dist/index.js

@@ -1,11 +1,11 @@
-import * as React3 from 'react';
-import React3__default, { createContext, forwardRef, useState, useEffect, useId, useCallback, useContext, useMemo } from 'react';
-import styled6 from '@emotion/styled';
+import * as React2 from 'react';
+import React2__default, { forwardRef, createContext, useState, useEffect, useId, useCallback, useContext, useMemo } from 'react';
+import styled5 from '@emotion/styled';
 import { motion, AnimatePresence } from 'framer-motion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
-import { noop, OutSideClick, useParentElementClick, useResizeObserver, isNullOrUndefined } from '@shoplflow/utils';
 import { css } from '@emotion/react';
+import { noop, OutSideClick, useParentElementClick, useResizeObserver, isNullOrUndefined } from '@shoplflow/utils';
 import Scrollbars from 'react-custom-scrollbars-2';
 import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/react';
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
@@ -154,7 +154,7 @@ var fadeInOut = {
     }
   }
 };
-var BackDropStyled = styled6(motion.div)`
+var BackDropStyled = styled5(motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -180,126 +180,73 @@ var BackDrop = ({ children }) => {
   );
 };
 var BackDrop_default = BackDrop;
-var ModalHandlerContext = createContext({
-  addModal: noop,
-  removeModal: noop
-});
-var ModalContext = createContext([]);
-var SpaceMarginWrapper = styled6(motion.div)`
+var getSizeBySizeVariant = (size2) => {
+  switch (size2) {
+    case "XS":
+      return "18px";
+    case "S":
+      return "24px";
+    case "M":
+      return "32px";
+    case "L":
+      return "48px";
+    case "XL":
+      return "72px";
+    default:
+      return "32px";
+  }
+};
+var StyledAvatar = styled5.picture`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ sizeVar }) => getSizeBySizeVariant(sizeVar)};
+  height: ${({ sizeVar }) => getSizeBySizeVariant(sizeVar)};
   position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+`;
+var StyledAvatarContainer = styled5.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-grow: 1;
-  z-index: 101;
-  padding: 32px 20px;
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+`;
+var StyledAvatarImage = styled5.img`
   width: 100%;
   height: 100%;
 `;
-var ModalPortal = () => {
-  const modal = useContext(ModalContext);
-  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(
-    /* @__PURE__ */ jsx(AnimatePresence, { children: modal.map((item, index) => /* @__PURE__ */ jsx(BackDrop_default, { children: /* @__PURE__ */ jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
-    document.body
-  ) });
-};
-var ModalPortal_default = ModalPortal;
-var ModalProvider = ({ children }) => {
-  const [openedModals, setOpenedModals] = useState([]);
-  const addModal = (component, id) => {
-    setOpenedModals((modals) => {
-      if (modals) {
-        return [...modals, { component, id }];
-      }
-      return [{ component, id }];
-    });
-  };
-  const removeModal = (props) => {
-    const { id, deps } = props || {
-      id: void 0,
-      deps: void 0
-    };
-    const isIncludeAllProps = Boolean(id && deps);
-    const isIncludeId = Boolean(id);
-    const isNotIncludeAllProps = !id && Boolean(isNullOrUndefined(deps));
-    const isIncludeDeps = Boolean(Boolean(!isNullOrUndefined(deps)) && !id);
-    if (isIncludeAllProps) {
-      throw new Error("id\uC640 deps\uB294 \uB3D9\uC2DC\uC5D0 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
-    }
-    if (isIncludeId) {
-      setOpenedModals((modal) => {
-        const filterModal = modal.filter((modal2) => modal2.id !== id);
-        return [...filterModal];
-      });
-      return;
-    }
-    if (isNotIncludeAllProps || deps === 1) {
-      setOpenedModals((modal) => {
-        const removeModal2 = modal.slice(0, -1);
-        return [...removeModal2];
-      });
-      return;
-    }
-    if (isIncludeDeps) {
-      if (deps === 0 || deps === void 0) {
-        return;
-      }
-      setOpenedModals((modal) => {
-        const removeDeps = modal.slice(0, -deps);
-        return [...removeDeps];
-      });
-      return;
-    }
-  };
-  const dispatch = useMemo(() => ({ addModal, removeModal }), []);
-  useEffect(() => {
-    if (openedModals.length === 1) {
-      document.body.style.cssText = "overflow:hidden";
-      return () => {
-        document.body.style.cssText = "overflow:unset";
-      };
-    }
-  }, [openedModals.length]);
-  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsx(ModalHandlerContext.Provider, { value: dispatch, children }) });
-};
-var ModalProvider_default = ModalProvider;
-var PopperPortal = () => {
-  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: "popper-portal-key",
-        style: {
-          zIndex: 20001,
-          position: "relative"
-        }
-      }
-    ),
-    document.body
-  ) });
-};
-var PopperPortal_default = PopperPortal;
-var ShoplflowProvider = ({ children, domain = "SHOPL" }) => {
-  useDomain(domain);
-  return /* @__PURE__ */ jsxs(ModalProvider_default, { children: [
-    /* @__PURE__ */ jsx(PopperPortal_default, {}),
-    /* @__PURE__ */ jsx(ModalPortal_default, {}),
-    children
+var StyledAvatarBadge = styled5.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: fit-content;
+  bottom: 0;
+  right: 0;
+`;
+
+// src/assets/mocks/AvatarNone.png
+var AvatarNone_default = "./AvatarNone-F5VQQNT7.png";
+var Avatar = (_a) => {
+  var _b = _a, { src, badge } = _b, rest = __objRest(_b, ["src", "badge"]);
+  return /* @__PURE__ */ jsxs(StyledAvatarContainer, { children: [
+    /* @__PURE__ */ jsx(StyledAvatar, __spreadProps(__spreadValues({ "data-shoplflow": "Avatar" }, rest), { children: /* @__PURE__ */ jsx(StyledAvatarImage, { src: src != null ? src : AvatarNone_default }) })),
+    /* @__PURE__ */ jsx(StyledAvatarBadge, { children: badge })
   ] });
 };
-var ShoplflowProvider_default = ShoplflowProvider;
-var useHandleModal = () => {
-  const { addModal, removeModal } = useContext(ModalHandlerContext);
-  return {
-    addModal,
-    removeModal
-  };
-};
-var useModalValue = () => {
-  const modal = useContext(ModalContext);
-  return {
-    modal
-  };
+var Avatar_default = Avatar;
+
+// src/components/Avatar/Avatar.types.ts
+var AvatarSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M",
+  L: "L",
+  XL: "XL"
 };
 
 // src/styles/tokens.ts
@@ -493,75 +440,9 @@ var typographyTokens = {
   caption_700,
   caption_400
 };
-var getSizeBySizeVariant = (size2) => {
-  switch (size2) {
-    case "XS":
-      return "18px";
-    case "S":
-      return "24px";
-    case "M":
-      return "32px";
-    case "L":
-      return "48px";
-    case "XL":
-      return "72px";
-    default:
-      return "32px";
-  }
-};
-var StyledAvatar = styled6.picture`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${({ sizeVar }) => getSizeBySizeVariant(sizeVar)};
-  height: ${({ sizeVar }) => getSizeBySizeVariant(sizeVar)};
-  position: relative;
-  overflow: hidden;
-  border-radius: 50%;
-`;
-var StyledAvatarContainer = styled6.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: fit-content;
-  height: fit-content;
-  position: relative;
-`;
-var StyledAvatarImage = styled6.img`
-  width: 100%;
-  height: 100%;
-`;
-var StyledAvatarBadge = styled6.div`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: fit-content;
-  height: fit-content;
-  bottom: 0;
-  right: 0;
-`;
-
-// src/assets/mocks/AvatarNone.png
-var AvatarNone_default = "./AvatarNone-F5VQQNT7.png";
-var Avatar = (_a) => {
-  var _b = _a, { src, badge } = _b, rest = __objRest(_b, ["src", "badge"]);
-  return /* @__PURE__ */ jsxs(StyledAvatarContainer, { children: [
-    /* @__PURE__ */ jsx(StyledAvatar, __spreadProps(__spreadValues({ "data-shoplflow": "Avatar" }, rest), { children: /* @__PURE__ */ jsx(StyledAvatarImage, { src: src != null ? src : AvatarNone_default }) })),
-    /* @__PURE__ */ jsx(StyledAvatarBadge, { children: badge })
-  ] });
-};
-var Avatar_default = Avatar;
 
-// src/components/Avatar/Avatar.types.ts
-var AvatarSizeVariants = {
-  XS: "XS",
-  S: "S",
-  M: "M",
-  L: "L",
-  XL: "XL"
-};
-var StyledStack = styled6.div`
+// src/components/Stack/Stack.styled.ts
+var StyledStack = styled5.div`
   display: flex;
   width: ${({ width }) => width};
   max-width: ${({ maxWidth }) => maxWidth};
@@ -643,7 +524,7 @@ var setEllipsis = (maxLines) => {
     text-overflow: ellipsis;
   `;
 };
-var StyledText = styled6.span`
+var StyledText = styled5.span`
   display: ${({ display }) => display && display};
   align-items: center;
   color: ${({ color }) => color && colorTokens[color]};
@@ -738,7 +619,7 @@ var getModalBodyTopBottomPadding = (isIncludeHeader) => {
     padding-bottom: 24px;
   `;
 };
-var Container = styled6.div`
+var Container = styled5.div`
   display: flex;
   flex-direction: column;
   border-radius: ${borderRadiusTokens.borderRadius08};
@@ -752,7 +633,7 @@ var Container = styled6.div`
   width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
   max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
 `;
-var HeaderContainer = styled6.div`
+var HeaderContainer = styled5.div`
   display: flex;
   width: 100%;
   min-height: 64px;
@@ -761,7 +642,7 @@ var HeaderContainer = styled6.div`
   padding: 12px 16px 12px 24px;
   gap: 10px;
 `;
-var BodyContainer = styled6.div`
+var BodyContainer = styled5.div`
   display: flex;
   width: 100%;
   height: 100%;
@@ -773,7 +654,7 @@ var BodyContainer = styled6.div`
   flex: 1;
   ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
 `;
-var ModalBodyContainerInner = styled6.div`
+var ModalBodyContainerInner = styled5.div`
   display: grid;
   align-self: stretch;
   flex-direction: column;
@@ -782,7 +663,7 @@ var ModalBodyContainerInner = styled6.div`
   height: calc(100%);
   box-sizing: border-box;
 `;
-var ModalBodyContent = styled6.div`
+var ModalBodyContent = styled5.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -790,7 +671,7 @@ var ModalBodyContent = styled6.div`
   padding: 0 24px;
   background: ${colorTokens.neutral0};
 `;
-var FooterContainer = styled6.div`
+var FooterContainer = styled5.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -817,9 +698,9 @@ var MODAL_FOOTER_KEY = Symbol("MODAL_FOOTER");
 var ModalContainer = (_a) => {
   var _b = _a, { children, outsideClick = noop } = _b, rest = __objRest(_b, ["children", "outsideClick"]);
   const ref = useParentElementClick(outsideClick);
-  const childrenArray = React3__default.Children.toArray(children);
+  const childrenArray = React2__default.Children.toArray(children);
   const findHeader = childrenArray.find((child) => {
-    if (!React3__default.isValidElement(child)) {
+    if (!React2__default.isValidElement(child)) {
       return child;
     }
     if (child.type[MODAL_HEADER_KEY]) {
@@ -827,18 +708,18 @@ var ModalContainer = (_a) => {
     }
   });
   const findFooter = childrenArray.find((child) => {
-    if (!React3__default.isValidElement(child)) {
+    if (!React2__default.isValidElement(child)) {
       return child;
     }
     if (child.type[MODAL_FOOTER_KEY]) {
       return child;
     }
   });
-  const addPropInChildren = React3__default.Children.map(childrenArray, (child) => {
-    if (!React3__default.isValidElement(child)) {
+  const addPropInChildren = React2__default.Children.map(childrenArray, (child) => {
+    if (!React2__default.isValidElement(child)) {
       return child;
     }
-    return React3__default.cloneElement(child, {
+    return React2__default.cloneElement(child, {
       isIncludeHeader: Boolean(findHeader),
       isIncludeFooter: Boolean(findFooter),
       sizeVar: rest.sizeVar,
@@ -913,6 +794,85 @@ var ModalHeader = ({ children }) => {
 };
 ModalHeader[MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
+var ModalHandlerContext = createContext({
+  addModal: noop,
+  removeModal: noop
+});
+var ModalContext = createContext([]);
+
+// src/components/Modal/hooks/useModalValue.ts
+var useModalValue = () => {
+  const modal = useContext(ModalContext);
+  return {
+    modal
+  };
+};
+var useHandleModal = () => {
+  const { addModal, removeModal } = useContext(ModalHandlerContext);
+  return {
+    addModal,
+    removeModal
+  };
+};
+var ModalProvider = ({ children }) => {
+  const [openedModals, setOpenedModals] = useState([]);
+  const addModal = (component, id) => {
+    setOpenedModals((modals) => {
+      if (modals) {
+        return [...modals, { component, id }];
+      }
+      return [{ component, id }];
+    });
+  };
+  const removeModal = (props) => {
+    const { id, deps } = props || {
+      id: void 0,
+      deps: void 0
+    };
+    const isIncludeAllProps = Boolean(id && deps);
+    const isIncludeId = Boolean(id);
+    const isNotIncludeAllProps = !id && Boolean(isNullOrUndefined(deps));
+    const isIncludeDeps = Boolean(Boolean(!isNullOrUndefined(deps)) && !id);
+    if (isIncludeAllProps) {
+      throw new Error("id\uC640 deps\uB294 \uB3D9\uC2DC\uC5D0 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
+    }
+    if (isIncludeId) {
+      setOpenedModals((modal) => {
+        const filterModal = modal.filter((modal2) => modal2.id !== id);
+        return [...filterModal];
+      });
+      return;
+    }
+    if (isNotIncludeAllProps || deps === 1) {
+      setOpenedModals((modal) => {
+        const removeModal2 = modal.slice(0, -1);
+        return [...removeModal2];
+      });
+      return;
+    }
+    if (isIncludeDeps) {
+      if (deps === 0 || deps === void 0) {
+        return;
+      }
+      setOpenedModals((modal) => {
+        const removeDeps = modal.slice(0, -deps);
+        return [...removeDeps];
+      });
+      return;
+    }
+  };
+  const dispatch = useMemo(() => ({ addModal, removeModal }), []);
+  useEffect(() => {
+    if (openedModals.length === 1) {
+      document.body.style.cssText = "overflow:hidden";
+      return () => {
+        document.body.style.cssText = "overflow:unset";
+      };
+    }
+  }, [openedModals.length]);
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsx(ModalHandlerContext.Provider, { value: dispatch, children }) });
+};
+var ModalProvider_default = ModalProvider;
 
 // src/components/Modal/index.ts
 var Modal = {
@@ -921,7 +881,7 @@ var Modal = {
   Body: ModalBody_default,
   Footer: ModalFooter_default
 };
-var SwitchContainer = styled6.div`
+var SwitchContainer = styled5.div`
   width: 32px;
   height: 32px;
   border-radius: 6px;
@@ -934,7 +894,7 @@ var SwitchContainer = styled6.div`
     background: ${({ isDisabled }) => !isDisabled && colorTokens.neutral400_5};
   }
 `;
-var StyledSwitch = styled6.input`
+var StyledSwitch = styled5.input`
   appearance: none;
   border: none;
   border-radius: 12px;
@@ -1084,7 +1044,7 @@ var solidStyle = ({
     }
   `};
 `;
-var StyledChip = styled6.button`
+var StyledChip = styled5.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1214,7 +1174,7 @@ var getStyleBySizeVar = (sizeVar) => {
       `;
   }
 };
-var StyledChipButton = styled6.button`
+var StyledChipButton = styled5.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1333,7 +1293,7 @@ var getStyleBySizeVar2 = (sizeVar) => {
       `;
   }
 };
-var StyledButton = styled6.button`
+var StyledButton = styled5.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1483,7 +1443,7 @@ var getStyleByStyleVar2 = (styleVar, color, isHovered) => {
       `;
   }
 };
-var StyledIconButton = styled6.button`
+var StyledIconButton = styled5.button`
   display: flex;
   flex-shrink: 0;
   border-radius: ${borderRadiusTokens.borderRadius06};
@@ -1561,7 +1521,7 @@ var alertStyle = css`
     fill: ${colorTokens.red300};
   }
 `;
-var StyledCallout = styled6.div`
+var StyledCallout = styled5.div`
   display: flex;
   justify-content: flex-start;
   align-items: start;
@@ -1571,12 +1531,12 @@ var StyledCallout = styled6.div`
   ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
   ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
 `;
-var StyledCalloutIcon = styled6.svg`
+var StyledCalloutIcon = styled5.svg`
   display: flex;
   min-height: 20px;
   min-width: 20px;
 `;
-styled6.div`
+styled5.div`
   padding: 2px 0;
 `;
 var Callout = (_a) => {
@@ -1599,13 +1559,13 @@ var CalloutTypes = {
   INFORMATION: "INFORMATION",
   ALERT: "ALERT"
 };
-var StyledPopper = styled6.div`
+var StyledPopper = styled5.div`
   width: ${({ width }) => width != null ? width : "fit-content"};
   height: ${({ height }) => height && height};
 `;
 var PopperContext = createContext(null);
 var usePopper = () => {
-  const context = React3.useContext(PopperContext);
+  const context = React2.useContext(PopperContext);
   if (context === null) {
     throw new Error("usePopper must be used within a PopperProvider");
   }
@@ -1669,7 +1629,7 @@ var PopperTrigger = forwardRef(
     return /* @__PURE__ */ jsx(StyledPopper, __spreadProps(__spreadValues({ ref: refs, "data-shoplflow": "Popper" }, rest), { children }));
   }
 );
-var PopperPortal2 = forwardRef(
+var PopperPortal = forwardRef(
   ({ children, animation: initialAnimation }, ref) => {
     const { floatingStyles, setFloating, isOpen } = usePopper();
     const animation = initialAnimation != null ? initialAnimation : fadeInOut;
@@ -1688,7 +1648,7 @@ var PopperPortal2 = forwardRef(
   }
 );
 Popper.Trigger = PopperTrigger;
-Popper.Portal = PopperPortal2;
+Popper.Portal = PopperPortal;
 var Popper_default = Popper;
 var getDropdownHeightBySizeVar = (size2) => {
   switch (size2) {
@@ -1751,10 +1711,10 @@ var getDropdownIconSizeBySizeVar = (size2) => {
       `;
   }
 };
-var StyledDropdown = styled6.div`
+var StyledDropdown = styled5.div`
   width: ${({ width }) => width};
 `;
-var StyledDropdownContent = styled6.div`
+var StyledDropdownContent = styled5.div`
   display: flex;
   flex-direction: column;
   background: ${colorTokens.neutral0};
@@ -1763,7 +1723,7 @@ var StyledDropdownContent = styled6.div`
   border-radius: 6px;
   box-shadow: ${boxShadowTokens.dropShadow};
 `;
-var StyledDropdownButton = styled6.button`
+var StyledDropdownButton = styled5.button`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1778,7 +1738,7 @@ var StyledDropdownButton = styled6.button`
       cursor: not-allowed;
     `}
 `;
-var DropdownButtonIcon = styled6(motion.div)`
+var DropdownButtonIcon = styled5(motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1807,7 +1767,7 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   }
   return colorTokens.neutral300;
 };
-var InputWrapper = styled6.label`
+var InputWrapper = styled5.label`
   display: flex;
   align-items: center;
   width: ${({ width }) => width != null ? width : "100%"};
@@ -1853,7 +1813,7 @@ var getIconSize = (size2) => {
       return "24px";
   }
 };
-var StyledIcon = styled6.svg`
+var StyledIcon = styled5.svg`
   width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
   min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
   height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
@@ -1896,16 +1856,7 @@ var DropdownButton = forwardRef(
         height: getDropdownHeightBySizeVar(sizeVar),
         children: /* @__PURE__ */ jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
           leftSource && leftSource,
-          value ? /* @__PURE__ */ jsx(
-            Text_default,
-            {
-              typography: getDropdownFontSizeBySizeVar(sizeVar),
-              color: "neutral700",
-              textOverflow: "ellipsis",
-              lineClamp: 1,
-              children: value
-            }
-          ) : /* @__PURE__ */ jsx(
+          value || /* @__PURE__ */ jsx(
             Text_default,
             {
               typography: getDropdownFontSizeBySizeVar(sizeVar),
@@ -1996,12 +1947,12 @@ var Dropdown = ({
 Dropdown.Button = DropdownButton;
 Dropdown.Content = DropdownContent;
 var Dropdown_default = Dropdown;
-var Container2 = styled6.div`
+var Container2 = styled5.div`
   width: 32px;
   height: 32px;
   padding: 7px;
 `;
-var IconButton2 = styled6.button`
+var IconButton2 = styled5.button`
   display: flex;
   width: 16px;
   height: 16px;
@@ -2108,7 +2059,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
       return "";
   }
 };
-var StyledCheckbox = styled6.button`
+var StyledCheckbox = styled5.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2123,7 +2074,7 @@ var StyledCheckbox = styled6.button`
   ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var Container3 = styled6.button`
+var Container3 = styled5.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2209,7 +2160,7 @@ var getSelectedStyle = (isHovered) => {
     `}
   `;
 };
-var StyledRadio = styled6.div`
+var StyledRadio = styled5.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2231,7 +2182,7 @@ var StyledRadio = styled6.div`
   ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var Container4 = styled6.button`
+var Container4 = styled5.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2308,7 +2259,7 @@ var getFontStylesBySizeVar = (sizeVar) => {
       return "body1_400";
   }
 };
-var StyledMenu = styled6.li`
+var StyledMenu = styled5.li`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -2351,7 +2302,7 @@ var Menu = (_a) => {
     "disabled"
   ]);
   const [selected, handleToggle] = useOnToggle(isSelected, defaultSelected);
-  const LeftSourceClone = leftSource ? React3__default.cloneElement(leftSource, __spreadProps(__spreadValues({}, rest), {
+  const LeftSourceClone = leftSource ? React2__default.cloneElement(leftSource, __spreadProps(__spreadValues({}, rest), {
     isSelected
   })) : leftSource;
   const handleOnClick = (e) => {
@@ -2383,7 +2334,7 @@ var MenuSizeVariants = {
   S: "S",
   M: "M"
 };
-var StyledList = styled6.li`
+var StyledList = styled5.li`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -2398,7 +2349,7 @@ var StyledList = styled6.li`
     background: ${colorTokens.neutral100};
   }
 `;
-var StyledText2Rows = styled6.div`
+var StyledText2Rows = styled5.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2406,7 +2357,7 @@ var StyledText2Rows = styled6.div`
 `;
 var List = (_a) => {
   var _b = _a, { children, leftSource, rightSource } = _b, rest = __objRest(_b, ["children", "leftSource", "rightSource"]);
-  const LeftSourceClone = leftSource ? React3__default.cloneElement(leftSource, __spreadValues({}, rest)) : leftSource;
+  const LeftSourceClone = leftSource ? React2__default.cloneElement(leftSource, __spreadValues({}, rest)) : leftSource;
   if (!children && rightSource) {
     throw new Error("RightSource\uB294 children\uC774 \uD544\uC218\uB85C \uD3EC\uD568\uB418\uC5B4\uC57C\uD569\uB2C8\uB2E4.");
   }
@@ -2508,7 +2459,7 @@ var getColorsByStyleVariant = (styleVariant, color = "neutral700") => {
       `;
   }
 };
-var StyledTag = styled6.div`
+var StyledTag = styled5.div`
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -2551,7 +2502,7 @@ var TagSizeVariants = {
   S: "S",
   M: "M"
 };
-var StyledInput = styled6.input`
+var StyledInput = styled5.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
   width: 100%;
@@ -2572,13 +2523,13 @@ var StyledInput = styled6.input`
     -moz-appearance: textfield;
   }
 `;
-var RightElementWrapper = styled6.div`
+var RightElementWrapper = styled5.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0 8px 0 0;
 `;
-var Wrapper = styled6.div`
+var Wrapper = styled5.div`
   display: flex;
   width: 100%;
   justify-content: flex-end;
@@ -2644,7 +2595,7 @@ var Input = forwardRef(
     const [type, setType] = useState("text");
     const [isHovered, setIsHovered] = useState(false);
     const uniqueId = useId();
-    const inputRef = React3__default.useRef(null);
+    const inputRef = React2__default.useRef(null);
     const refs = useMergeRefs(ref, inputRef);
     const convertToString = useCallback((value2) => {
       if (typeof value2 !== "number") {
@@ -2782,7 +2733,7 @@ var Input = forwardRef(
   }
 );
 var Input_default = Input;
-var StyledInputButton = styled6.div`
+var StyledInputButton = styled5.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2797,7 +2748,7 @@ var StyledInputButton = styled6.div`
       cursor: not-allowed;
     `}
 `;
-var StyledInputButtonContent = styled6.input`
+var StyledInputButtonContent = styled5.input`
   display: flex;
   width: 100%;
   border: none;
@@ -2874,7 +2825,7 @@ var InputButton = forwardRef(
   }
 );
 var InputButton_default = InputButton;
-var BottomElementWrapper = styled6.div`
+var BottomElementWrapper = styled5.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -2882,7 +2833,7 @@ var BottomElementWrapper = styled6.div`
   gap: 8px;
   background-color: ${colorTokens.neutral0};
 `;
-var StyledTextarea = styled6.textarea`
+var StyledTextarea = styled5.textarea`
   padding: 8px 12px 0 12px;
   background-color: transparent;
   resize: none;
@@ -3010,7 +2961,7 @@ var TextArea = forwardRef(
   }
 );
 var TextArea_default = TextArea;
-var StyledSelectInputButton = styled6.div`
+var StyledSelectInputButton = styled5.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -3103,6 +3054,50 @@ var SelectInputButton = (_a) => {
   );
 };
 var SelectInputButton_default = SelectInputButton;
+var SpaceMarginWrapper = styled5(motion.div)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  z-index: 101;
+  padding: 32px 20px;
+  width: 100%;
+  height: 100%;
+`;
+var ModalPortal = () => {
+  const modal = useContext(ModalContext);
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: modal.map((item, index) => /* @__PURE__ */ jsx(BackDrop_default, { children: /* @__PURE__ */ jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
+    document.body
+  ) });
+};
+var ModalPortal_default = ModalPortal;
+var PopperPortal2 = () => {
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: "popper-portal-key",
+        style: {
+          zIndex: 20001,
+          position: "relative"
+        }
+      }
+    ),
+    document.body
+  ) });
+};
+var PopperPortal_default = PopperPortal2;
+var ShoplflowProvider = ({ children, domain = "SHOPL" }) => {
+  useDomain(domain);
+  return /* @__PURE__ */ jsxs(ModalProvider_default, { children: [
+    /* @__PURE__ */ jsx(PopperPortal_default, {}),
+    /* @__PURE__ */ jsx(ModalPortal_default, {}),
+    children
+  ] });
+};
+var ShoplflowProvider_default = ShoplflowProvider;
 /*! Bundled license information:
 
 classnames/index.js:
@@ -3113,6 +3108,6 @@ classnames/index.js:
   *)
 */
 
-export { Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map