@shoplflow/base 0.24.6 → 0.24.8

package/dist/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var React3 = require('react');
-var styled6 = require('@emotion/styled');
+var React2 = require('react');
+var styled5 = require('@emotion/styled');
 var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom$1 = require('react-dom');
-var utils = require('@shoplflow/utils');
 var react$1 = require('@emotion/react');
+var utils = require('@shoplflow/utils');
 var Scrollbars = require('react-custom-scrollbars-2');
 var react = require('@floating-ui/react');
 var reactDom = require('@floating-ui/react-dom');
@@ -33,8 +33,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
-var styled6__default = /*#__PURE__*/_interopDefault(styled6);
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var styled5__default = /*#__PURE__*/_interopDefault(styled5);
 var Scrollbars__default = /*#__PURE__*/_interopDefault(Scrollbars);
 var ShoplAssets__namespace = /*#__PURE__*/_interopNamespace(ShoplAssets);
 var HadaAssets__namespace = /*#__PURE__*/_interopNamespace(HadaAssets);
@@ -143,13 +143,13 @@ var require_classnames = __commonJS({
   }
 });
 exports.useDomain = (domain = "SHOPL") => {
-  const [domainType, setDomainType] = React3.useState(void 0);
-  React3.useEffect(() => {
+  const [domainType, setDomainType] = React2.useState(void 0);
+  React2.useEffect(() => {
     if (domain) {
       setDomainType(domain);
     }
   }, [domain]);
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     if (!domainType) {
       return;
     }
@@ -179,7 +179,7 @@ var fadeInOut = {
     }
   }
 };
-var BackDropStyled = styled6__default.default(framerMotion.motion.div)`
+var BackDropStyled = styled5__default.default(framerMotion.motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -205,126 +205,73 @@ var BackDrop = ({ children }) => {
   );
 };
 var BackDrop_default = BackDrop;
-var ModalHandlerContext = React3.createContext({
-  addModal: utils.noop,
-  removeModal: utils.noop
-});
-var ModalContext = React3.createContext([]);
-var SpaceMarginWrapper = styled6__default.default(framerMotion.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__default.default.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__default.default.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__default.default.img`
   width: 100%;
   height: 100%;
 `;
-var ModalPortal = () => {
-  const modal = React3.useContext(ModalContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactDom$1.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: modal.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(BackDrop_default, { children: /* @__PURE__ */ jsxRuntime.jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
-    document.body
-  ) });
-};
-exports.ModalProvider = ModalPortal;
-var ModalProvider = ({ children }) => {
-  const [openedModals, setOpenedModals] = React3.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(utils.isNullOrUndefined(deps));
-    const isIncludeDeps = Boolean(Boolean(!utils.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 = React3.useMemo(() => ({ addModal, removeModal }), []);
-  React3.useEffect(() => {
-    if (openedModals.length === 1) {
-      document.body.style.cssText = "overflow:hidden";
-      return () => {
-        document.body.style.cssText = "overflow:unset";
-      };
-    }
-  }, [openedModals.length]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsxRuntime.jsx(ModalHandlerContext.Provider, { value: dispatch, children }) });
-};
-var ModalProvider_default = ModalProvider;
-var PopperPortal = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactDom$1.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        id: "popper-portal-key",
-        style: {
-          zIndex: 20001,
-          position: "relative"
-        }
-      }
-    ),
-    document.body
-  ) });
-};
-var PopperPortal_default = PopperPortal;
-var ShoplflowProvider = ({ children, domain = "SHOPL" }) => {
-  exports.useDomain(domain);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ModalProvider_default, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PopperPortal_default, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(exports.ModalProvider, {}),
-    children
+var StyledAvatarBadge = styled5__default.default.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__ */ jsxRuntime.jsxs(StyledAvatarContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatar, __spreadProps(__spreadValues({ "data-shoplflow": "Avatar" }, rest), { children: /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarImage, { src: src != null ? src : AvatarNone_default }) })),
+    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarBadge, { children: badge })
   ] });
 };
-exports.ShoplflowProvider = ShoplflowProvider;
-exports.useHandleModal = () => {
-  const { addModal, removeModal } = React3.useContext(ModalHandlerContext);
-  return {
-    addModal,
-    removeModal
-  };
-};
-exports.useModalValue = () => {
-  const modal = React3.useContext(ModalContext);
-  return {
-    modal
-  };
+exports.Avatar = Avatar;
+
+// src/components/Avatar/Avatar.types.ts
+exports.AvatarSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M",
+  L: "L",
+  XL: "XL"
 };
 
 // src/styles/tokens.ts
@@ -518,75 +465,9 @@ exports.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__default.default.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__default.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: fit-content;
-  height: fit-content;
-  position: relative;
-`;
-var StyledAvatarImage = styled6__default.default.img`
-  width: 100%;
-  height: 100%;
-`;
-var StyledAvatarBadge = styled6__default.default.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__ */ jsxRuntime.jsxs(StyledAvatarContainer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatar, __spreadProps(__spreadValues({ "data-shoplflow": "Avatar" }, rest), { children: /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarImage, { src: src != null ? src : AvatarNone_default }) })),
-    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarBadge, { children: badge })
-  ] });
-};
-exports.Avatar = Avatar;
 
-// src/components/Avatar/Avatar.types.ts
-exports.AvatarSizeVariants = {
-  XS: "XS",
-  S: "S",
-  M: "M",
-  L: "L",
-  XL: "XL"
-};
-exports.StyledStack = styled6__default.default.div`
+// src/components/Stack/Stack.styled.ts
+exports.StyledStack = styled5__default.default.div`
   display: flex;
   width: ${({ width }) => width};
   max-width: ${({ maxWidth }) => maxWidth};
@@ -604,7 +485,7 @@ exports.StyledStack = styled6__default.default.div`
   border-radius: ${({ radius }) => radius && exports.borderRadiusTokens[radius]};
   animation: 0.2s all ease-in-out;
 `;
-var createStackComponent = (stackOption) => React3.forwardRef(function Stack2(_h, ref) {
+var createStackComponent = (stackOption) => React2.forwardRef(function Stack2(_h, ref) {
   var _i = _h, {
     as = "div",
     spacing = stackOption == null ? void 0 : stackOption.spacing,
@@ -668,7 +549,7 @@ var setEllipsis = (maxLines) => {
     text-overflow: ellipsis;
   `;
 };
-var StyledText = styled6__default.default.span`
+var StyledText = styled5__default.default.span`
   display: ${({ display }) => display && display};
   align-items: center;
   color: ${({ color }) => color && exports.colorTokens[color]};
@@ -685,7 +566,7 @@ var StyledText = styled6__default.default.span`
       word-break: ${wordBreak};
     `};
 `;
-var Text = React3.forwardRef(
+var Text = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -763,7 +644,7 @@ var getModalBodyTopBottomPadding = (isIncludeHeader) => {
     padding-bottom: 24px;
   `;
 };
-var Container = styled6__default.default.div`
+var Container = styled5__default.default.div`
   display: flex;
   flex-direction: column;
   border-radius: ${exports.borderRadiusTokens.borderRadius08};
@@ -777,7 +658,7 @@ var Container = styled6__default.default.div`
   width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
   max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
 `;
-var HeaderContainer = styled6__default.default.div`
+var HeaderContainer = styled5__default.default.div`
   display: flex;
   width: 100%;
   min-height: 64px;
@@ -786,7 +667,7 @@ var HeaderContainer = styled6__default.default.div`
   padding: 12px 16px 12px 24px;
   gap: 10px;
 `;
-var BodyContainer = styled6__default.default.div`
+var BodyContainer = styled5__default.default.div`
   display: flex;
   width: 100%;
   height: 100%;
@@ -798,7 +679,7 @@ var BodyContainer = styled6__default.default.div`
   flex: 1;
   ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
 `;
-var ModalBodyContainerInner = styled6__default.default.div`
+var ModalBodyContainerInner = styled5__default.default.div`
   display: grid;
   align-self: stretch;
   flex-direction: column;
@@ -807,7 +688,7 @@ var ModalBodyContainerInner = styled6__default.default.div`
   height: calc(100%);
   box-sizing: border-box;
 `;
-var ModalBodyContent = styled6__default.default.div`
+var ModalBodyContent = styled5__default.default.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -815,7 +696,7 @@ var ModalBodyContent = styled6__default.default.div`
   padding: 0 24px;
   background: ${exports.colorTokens.neutral0};
 `;
-var FooterContainer = styled6__default.default.div`
+var FooterContainer = styled5__default.default.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -842,9 +723,9 @@ exports.MODAL_FOOTER_KEY = Symbol("MODAL_FOOTER");
 var ModalContainer = (_a) => {
   var _b = _a, { children, outsideClick = utils.noop } = _b, rest = __objRest(_b, ["children", "outsideClick"]);
   const ref = utils.useParentElementClick(outsideClick);
-  const childrenArray = React3__namespace.default.Children.toArray(children);
+  const childrenArray = React2__namespace.default.Children.toArray(children);
   const findHeader = childrenArray.find((child) => {
-    if (!React3__namespace.default.isValidElement(child)) {
+    if (!React2__namespace.default.isValidElement(child)) {
       return child;
     }
     if (child.type[exports.MODAL_HEADER_KEY]) {
@@ -852,18 +733,18 @@ var ModalContainer = (_a) => {
     }
   });
   const findFooter = childrenArray.find((child) => {
-    if (!React3__namespace.default.isValidElement(child)) {
+    if (!React2__namespace.default.isValidElement(child)) {
       return child;
     }
     if (child.type[exports.MODAL_FOOTER_KEY]) {
       return child;
     }
   });
-  const addPropInChildren = React3__namespace.default.Children.map(childrenArray, (child) => {
-    if (!React3__namespace.default.isValidElement(child)) {
+  const addPropInChildren = React2__namespace.default.Children.map(childrenArray, (child) => {
+    if (!React2__namespace.default.isValidElement(child)) {
       return child;
     }
-    return React3__namespace.default.cloneElement(child, {
+    return React2__namespace.default.cloneElement(child, {
       isIncludeHeader: Boolean(findHeader),
       isIncludeFooter: Boolean(findFooter),
       sizeVar: rest.sizeVar,
@@ -896,7 +777,7 @@ var ModalBody = ({
   const headerHeight = 64;
   const footerHeight = 64;
   const topBottomMargin = 64;
-  const getHeaderFooterHeight = React3.useCallback(() => {
+  const getHeaderFooterHeight = React2.useCallback(() => {
     let result = 0;
     if (isIncludeHeader) {
       result += headerHeight;
@@ -906,7 +787,7 @@ var ModalBody = ({
     }
     return result;
   }, [isIncludeFooter, isIncludeHeader]);
-  const headerFooterHeight = React3.useMemo(() => getHeaderFooterHeight(), [getHeaderFooterHeight]);
+  const headerFooterHeight = React2.useMemo(() => getHeaderFooterHeight(), [getHeaderFooterHeight]);
   const setAutoHeightMin = () => {
     if (modalContainerHeight) {
       return modalContainerHeight - headerFooterHeight;
@@ -938,6 +819,85 @@ var ModalHeader = ({ children }) => {
 };
 ModalHeader[exports.MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
+exports.ModalHandlerContext = React2.createContext({
+  addModal: utils.noop,
+  removeModal: utils.noop
+});
+exports.ModalContext = React2.createContext([]);
+
+// src/components/Modal/hooks/useModalValue.ts
+exports.useModalValue = () => {
+  const modal = React2.useContext(exports.ModalContext);
+  return {
+    modal
+  };
+};
+exports.useHandleModal = () => {
+  const { addModal, removeModal } = React2.useContext(exports.ModalHandlerContext);
+  return {
+    addModal,
+    removeModal
+  };
+};
+var ModalProvider = ({ children }) => {
+  const [openedModals, setOpenedModals] = React2.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(utils.isNullOrUndefined(deps));
+    const isIncludeDeps = Boolean(Boolean(!utils.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 = React2.useMemo(() => ({ addModal, removeModal }), []);
+  React2.useEffect(() => {
+    if (openedModals.length === 1) {
+      document.body.style.cssText = "overflow:hidden";
+      return () => {
+        document.body.style.cssText = "overflow:unset";
+      };
+    }
+  }, [openedModals.length]);
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsxRuntime.jsx(exports.ModalHandlerContext.Provider, { value: dispatch, children }) });
+};
+var ModalProvider_default = ModalProvider;
 
 // src/components/Modal/index.ts
 exports.Modal = {
@@ -946,7 +906,7 @@ exports.Modal = {
   Body: ModalBody_default,
   Footer: ModalFooter_default
 };
-var SwitchContainer = styled6__default.default.div`
+var SwitchContainer = styled5__default.default.div`
   width: 32px;
   height: 32px;
   border-radius: 6px;
@@ -959,7 +919,7 @@ var SwitchContainer = styled6__default.default.div`
     background: ${({ isDisabled }) => !isDisabled && exports.colorTokens.neutral400_5};
   }
 `;
-var StyledSwitch = styled6__default.default.input`
+var StyledSwitch = styled5__default.default.input`
   appearance: none;
   border: none;
   border-radius: 12px;
@@ -1000,17 +960,17 @@ var StyledSwitch = styled6__default.default.input`
   }
 `;
 var useOnToggle = (selected, defaultSelected) => {
-  const [isToggle, setIsToggle] = React3.useState(false);
+  const [isToggle, setIsToggle] = React2.useState(false);
   const isControlled = selected !== void 0;
   const handleToggle = () => {
     !isControlled && setIsToggle((prev) => !prev);
   };
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     if (isControlled) {
       setIsToggle(selected);
     }
   }, [isControlled, selected]);
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     if (!isControlled && defaultSelected !== void 0) {
       setIsToggle(defaultSelected);
     }
@@ -1109,7 +1069,7 @@ var solidStyle = ({
     }
   `};
 `;
-var StyledChip = styled6__default.default.button`
+var StyledChip = styled5__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1239,7 +1199,7 @@ var getStyleBySizeVar = (sizeVar) => {
       `;
   }
 };
-var StyledChipButton = styled6__default.default.button`
+var StyledChipButton = styled5__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1358,7 +1318,7 @@ var getStyleBySizeVar2 = (sizeVar) => {
       `;
   }
 };
-var StyledButton = styled6__default.default.button`
+var StyledButton = styled5__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1372,7 +1332,7 @@ var StyledButton = styled6__default.default.button`
   ${({ sizeVar }) => getStyleBySizeVar2(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
 `;
-var Button = React3.forwardRef(
+var Button = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       styleVar = "PRIMARY",
@@ -1508,7 +1468,7 @@ var getStyleByStyleVar2 = (styleVar, color, isHovered) => {
       `;
   }
 };
-var StyledIconButton = styled6__default.default.button`
+var StyledIconButton = styled5__default.default.button`
   display: flex;
   flex-shrink: 0;
   border-radius: ${exports.borderRadiusTokens.borderRadius06};
@@ -1524,10 +1484,10 @@ var StyledIconButton = styled6__default.default.button`
     height: 20px;
   }
 `;
-var IconButton = React3.forwardRef(
+var IconButton = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, { styleVar, sizeVar, disabled, children, color, onMouseEnter, onMouseLeave } = _b, rest = __objRest(_b, ["styleVar", "sizeVar", "disabled", "children", "color", "onMouseEnter", "onMouseLeave"]);
-    const [isHovered, setIsHovered] = React3.useState(false);
+    const [isHovered, setIsHovered] = React2.useState(false);
     const handleOnMouseEnter = (e) => {
       setIsHovered(true);
       onMouseEnter && onMouseEnter(e);
@@ -1586,7 +1546,7 @@ var alertStyle = react$1.css`
     fill: ${exports.colorTokens.red300};
   }
 `;
-var StyledCallout = styled6__default.default.div`
+var StyledCallout = styled5__default.default.div`
   display: flex;
   justify-content: flex-start;
   align-items: start;
@@ -1596,12 +1556,12 @@ var StyledCallout = styled6__default.default.div`
   ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
   ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
 `;
-var StyledCalloutIcon = styled6__default.default.svg`
+var StyledCalloutIcon = styled5__default.default.svg`
   display: flex;
   min-height: 20px;
   min-width: 20px;
 `;
-styled6__default.default.div`
+styled5__default.default.div`
   padding: 2px 0;
 `;
 var Callout = (_a) => {
@@ -1624,13 +1584,13 @@ exports.CalloutTypes = {
   INFORMATION: "INFORMATION",
   ALERT: "ALERT"
 };
-exports.StyledPopper = styled6__default.default.div`
+exports.StyledPopper = styled5__default.default.div`
   width: ${({ width }) => width != null ? width : "fit-content"};
   height: ${({ height }) => height && height};
 `;
-var PopperContext = React3.createContext(null);
+var PopperContext = React2.createContext(null);
 var usePopper = () => {
-  const context = React3__namespace.useContext(PopperContext);
+  const context = React2__namespace.useContext(PopperContext);
   if (context === null) {
     throw new Error("usePopper must be used within a PopperProvider");
   }
@@ -1658,7 +1618,7 @@ function mergeRefs(...refs) {
   };
 }
 function useMergeRefs(...refs) {
-  return React3.useMemo(() => mergeRefs(...refs), refs);
+  return React2.useMemo(() => mergeRefs(...refs), refs);
 }
 var Popper = ({
   placement,
@@ -1668,7 +1628,7 @@ var Popper = ({
   middlewares,
   children
 }) => {
-  const [isOpen, setIsOpen] = React3.useState(false);
+  const [isOpen, setIsOpen] = React2.useState(false);
   const { refs, floatingStyles } = reactDom.useFloating({
     strategy,
     placement,
@@ -1683,18 +1643,18 @@ var Popper = ({
   });
   return /* @__PURE__ */ jsxRuntime.jsx(PopperContext.Provider, { value: __spreadProps(__spreadValues({}, refs), { floatingStyles: __spreadProps(__spreadValues({}, floatingStyles), { zIndex: 100 }), isOpen, setIsOpen }), children });
 };
-exports.PopperTrigger = React3.forwardRef(
+exports.PopperTrigger = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, isOpen = false } = _b, rest = __objRest(_b, ["children", "isOpen"]);
     const { setReference, setIsOpen } = usePopper();
     const refs = useMergeRefs(ref, setReference);
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
     return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledPopper, __spreadProps(__spreadValues({ ref: refs, "data-shoplflow": "Popper" }, rest), { children }));
   }
 );
-exports.PopperPortal = React3.forwardRef(
+exports.PopperPortal = React2.forwardRef(
   ({ children, animation: initialAnimation }, ref) => {
     const { floatingStyles, setFloating, isOpen } = usePopper();
     const animation = initialAnimation != null ? initialAnimation : fadeInOut;
@@ -1776,10 +1736,10 @@ exports.getDropdownIconSizeBySizeVar = (size2) => {
       `;
   }
 };
-exports.StyledDropdown = styled6__default.default.div`
+exports.StyledDropdown = styled5__default.default.div`
   width: ${({ width }) => width};
 `;
-exports.StyledDropdownContent = styled6__default.default.div`
+exports.StyledDropdownContent = styled5__default.default.div`
   display: flex;
   flex-direction: column;
   background: ${exports.colorTokens.neutral0};
@@ -1788,7 +1748,7 @@ exports.StyledDropdownContent = styled6__default.default.div`
   border-radius: 6px;
   box-shadow: ${exports.boxShadowTokens.dropShadow};
 `;
-exports.StyledDropdownButton = styled6__default.default.button`
+exports.StyledDropdownButton = styled5__default.default.button`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1803,16 +1763,16 @@ exports.StyledDropdownButton = styled6__default.default.button`
       cursor: not-allowed;
     `}
 `;
-exports.DropdownButtonIcon = styled6__default.default(framerMotion.motion.div)`
+exports.DropdownButtonIcon = styled5__default.default(framerMotion.motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
 
   ${({ sizeVar }) => sizeVar && exports.getDropdownIconSizeBySizeVar(sizeVar)};
 `;
-var DropdownContext = React3.createContext(null);
+var DropdownContext = React2.createContext(null);
 var useDropdown = () => {
-  const context = React3.useContext(DropdownContext);
+  const context = React2.useContext(DropdownContext);
   if (context === null) {
     throw new Error("useDropdown must be used within a DropdownProvider");
   }
@@ -1832,7 +1792,7 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   }
   return exports.colorTokens.neutral300;
 };
-var InputWrapper = styled6__default.default.label`
+var InputWrapper = styled5__default.default.label`
   display: flex;
   align-items: center;
   width: ${({ width }) => width != null ? width : "100%"};
@@ -1878,7 +1838,7 @@ var getIconSize = (size2) => {
       return "24px";
   }
 };
-exports.StyledIcon = styled6__default.default.svg`
+exports.StyledIcon = styled5__default.default.svg`
   width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
   min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
   height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
@@ -1887,16 +1847,16 @@ exports.StyledIcon = styled6__default.default.svg`
     fill: ${({ color }) => color && exports.colorTokens[color]};
   }
 `;
-var Icon = React3.forwardRef((_a, ref) => {
+var Icon = React2.forwardRef((_a, ref) => {
   var _b = _a, { iconSource } = _b, rest = __objRest(_b, ["iconSource"]);
   return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon" }));
 });
 exports.Icon = Icon;
-var DropdownButton = React3.forwardRef(
+var DropdownButton = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, { width, onClick, sizeVar = "M", placeholder, value, disabled, leftSource } = _b, rest = __objRest(_b, ["width", "onClick", "sizeVar", "placeholder", "value", "disabled", "leftSource"]);
     const { isOpen, setIsOpen } = useDropdown();
-    const [isHovered, setIsHovered] = React3.useState(false);
+    const [isHovered, setIsHovered] = React2.useState(false);
     const handleOnClick = (e) => {
       if (!disabled) {
         onClick && onClick(e);
@@ -1921,16 +1881,7 @@ var DropdownButton = React3.forwardRef(
         height: exports.getDropdownHeightBySizeVar(sizeVar),
         children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
           leftSource && leftSource,
-          value ? /* @__PURE__ */ jsxRuntime.jsx(
-            exports.Text,
-            {
-              typography: exports.getDropdownFontSizeBySizeVar(sizeVar),
-              color: "neutral700",
-              textOverflow: "ellipsis",
-              lineClamp: 1,
-              children: value
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
+          value || /* @__PURE__ */ jsxRuntime.jsx(
             exports.Text,
             {
               typography: exports.getDropdownFontSizeBySizeVar(sizeVar),
@@ -1987,10 +1938,10 @@ var Dropdown = ({
   option = "CLICK",
   width = "100%"
 }) => {
-  const [triggerRef, setTriggerRef] = React3.useState(null);
-  const [size2, setSize] = React3.useState({ width: 0, height: 0 });
-  const [isOpen, setIsOpen] = React3.useState(false);
-  React3.useEffect(() => {
+  const [triggerRef, setTriggerRef] = React2.useState(null);
+  const [size2, setSize] = React2.useState({ width: 0, height: 0 });
+  const [isOpen, setIsOpen] = React2.useState(false);
+  React2.useEffect(() => {
     if (triggerRef) {
       setSize({
         width: triggerRef.offsetWidth,
@@ -1998,7 +1949,7 @@ var Dropdown = ({
       });
     }
   }, [triggerRef]);
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     if (initialIsOpen === void 0) {
       return;
     }
@@ -2021,12 +1972,12 @@ var Dropdown = ({
 Dropdown.Button = DropdownButton;
 Dropdown.Content = DropdownContent;
 exports.Dropdown = Dropdown;
-var Container2 = styled6__default.default.div`
+var Container2 = styled5__default.default.div`
   width: 32px;
   height: 32px;
   padding: 7px;
 `;
-var IconButton2 = styled6__default.default.button`
+var IconButton2 = styled5__default.default.button`
   display: flex;
   width: 16px;
   height: 16px;
@@ -2046,7 +1997,7 @@ var IconButton2 = styled6__default.default.button`
   }
 `;
 var MUNUS_BUTTON_SYMBOL_KEY = Symbol("SHOPLFLOW_MUNUS_BUTTON");
-var MinusButton = React3.forwardRef((_a, ref) => {
+var MinusButton = React2.forwardRef((_a, ref) => {
   var _b = _a, { onClick, color = "neutral300" } = _b, rest = __objRest(_b, ["onClick", "color"]);
   return /* @__PURE__ */ jsxRuntime.jsx(Container2, { "data-shoplflow": "minusButton", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({ color, onClick, ref }, rest), { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2133,7 +2084,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
       return "";
   }
 };
-var StyledCheckbox = styled6__default.default.button`
+var StyledCheckbox = styled5__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2148,7 +2099,7 @@ var StyledCheckbox = styled6__default.default.button`
   ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var Container3 = styled6__default.default.button`
+var Container3 = styled5__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2177,7 +2128,7 @@ var Checkbox = (_a) => {
     "styleVar"
   ]);
   const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
-  const [isHovered, toggleHovered] = React3.useState(false);
+  const [isHovered, toggleHovered] = React2.useState(false);
   const handleMouseLeave = (e) => {
     toggleHovered(false);
     onMouseLeave && onMouseLeave(e);
@@ -2234,7 +2185,7 @@ var getSelectedStyle = (isHovered) => {
     `}
   `;
 };
-var StyledRadio = styled6__default.default.div`
+var StyledRadio = styled5__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2256,7 +2207,7 @@ var StyledRadio = styled6__default.default.div`
   ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var Container4 = styled6__default.default.button`
+var Container4 = styled5__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2269,7 +2220,7 @@ exports.RADIO_SYMBOL_KEY = Symbol("SHOPLFLOW_RADIO");
 var Radio = (_a) => {
   var _b = _a, { isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave } = _b, rest = __objRest(_b, ["isSelected", "defaultSelected", "disabled", "onClick", "onMouseEnter", "onMouseLeave"]);
   const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
-  const [isHovered, toggleHovered] = React3.useState(false);
+  const [isHovered, toggleHovered] = React2.useState(false);
   const handleMouseLeave = (e) => {
     toggleHovered(false);
     onMouseLeave && onMouseLeave(e);
@@ -2333,7 +2284,7 @@ exports.getFontStylesBySizeVar = (sizeVar) => {
       return "body1_400";
   }
 };
-exports.StyledMenu = styled6__default.default.li`
+exports.StyledMenu = styled5__default.default.li`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -2376,7 +2327,7 @@ var Menu = (_a) => {
     "disabled"
   ]);
   const [selected, handleToggle] = useOnToggle(isSelected, defaultSelected);
-  const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadProps(__spreadValues({}, rest), {
+  const LeftSourceClone = leftSource ? React2__namespace.default.cloneElement(leftSource, __spreadProps(__spreadValues({}, rest), {
     isSelected
   })) : leftSource;
   const handleOnClick = (e) => {
@@ -2408,7 +2359,7 @@ exports.MenuSizeVariants = {
   S: "S",
   M: "M"
 };
-exports.StyledList = styled6__default.default.li`
+exports.StyledList = styled5__default.default.li`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -2423,7 +2374,7 @@ exports.StyledList = styled6__default.default.li`
     background: ${exports.colorTokens.neutral100};
   }
 `;
-exports.StyledText2Rows = styled6__default.default.div`
+exports.StyledText2Rows = styled5__default.default.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2431,7 +2382,7 @@ exports.StyledText2Rows = styled6__default.default.div`
 `;
 var List = (_a) => {
   var _b = _a, { children, leftSource, rightSource } = _b, rest = __objRest(_b, ["children", "leftSource", "rightSource"]);
-  const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadValues({}, rest)) : leftSource;
+  const LeftSourceClone = leftSource ? React2__namespace.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.");
   }
@@ -2533,7 +2484,7 @@ var getColorsByStyleVariant = (styleVariant, color = "neutral700") => {
       `;
   }
 };
-var StyledTag = styled6__default.default.div`
+var StyledTag = styled5__default.default.div`
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -2576,7 +2527,7 @@ exports.TagSizeVariants = {
   S: "S",
   M: "M"
 };
-var StyledInput = styled6__default.default.input`
+var StyledInput = styled5__default.default.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
   width: 100%;
@@ -2597,13 +2548,13 @@ var StyledInput = styled6__default.default.input`
     -moz-appearance: textfield;
   }
 `;
-var RightElementWrapper = styled6__default.default.div`
+var RightElementWrapper = styled5__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0 8px 0 0;
 `;
-var Wrapper = styled6__default.default.div`
+var Wrapper = styled5__default.default.div`
   display: flex;
   width: 100%;
   justify-content: flex-end;
@@ -2618,7 +2569,7 @@ var TextCounter = ({ currentLength, maxLength }) => {
   ] });
 };
 var TextCounter_default = TextCounter;
-React3.createContext({
+React2.createContext({
   domain: "SHOPL",
   handleToggleTheme: () => {
   }
@@ -2631,7 +2582,7 @@ var assetFunction = (iconName, domainProps) => {
   const ShoplIcon = ShoplAssets__namespace[iconName];
   return domain === "hada" ? HadaIcon : ShoplIcon;
 };
-var Input = React3.forwardRef(
+var Input = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onFocus,
@@ -2664,20 +2615,20 @@ var Input = React3.forwardRef(
       "className",
       "width"
     ]);
-    const [text, setText] = React3.useState("");
-    const [isFocused, setIsFocused] = React3.useState(false);
-    const [type, setType] = React3.useState("text");
-    const [isHovered, setIsHovered] = React3.useState(false);
-    const uniqueId = React3.useId();
-    const inputRef = React3__namespace.default.useRef(null);
+    const [text, setText] = React2.useState("");
+    const [isFocused, setIsFocused] = React2.useState(false);
+    const [type, setType] = React2.useState("text");
+    const [isHovered, setIsHovered] = React2.useState(false);
+    const uniqueId = React2.useId();
+    const inputRef = React2__namespace.default.useRef(null);
     const refs = useMergeRefs(ref, inputRef);
-    const convertToString = React3.useCallback((value2) => {
+    const convertToString = React2.useCallback((value2) => {
       if (typeof value2 !== "number") {
         return typeof value2 === "string" ? value2 : value2.join("");
       }
       return String(value2);
     }, []);
-    const sliceText = React3.useCallback(
+    const sliceText = React2.useCallback(
       (value2) => {
         if (maxLength && value2.length > maxLength) {
           return value2.slice(0, maxLength);
@@ -2686,7 +2637,7 @@ var Input = React3.forwardRef(
       },
       [maxLength]
     );
-    const limitRange = React3.useCallback(
+    const limitRange = React2.useCallback(
       (value2) => {
         if (min && Number(value2) < min) {
           return String(min);
@@ -2743,14 +2694,14 @@ var Input = React3.forwardRef(
         setType("password");
       }
     };
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       if (defaultValue !== void 0) {
         const convertString = convertToString(defaultValue);
         const slicedText = sliceText(convertString);
         setText(slicedText);
       }
     }, [convertToString, defaultValue, maxLength, sliceText]);
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       var _a2;
       if (value !== void 0) {
         const convertString = convertToString(value);
@@ -2759,7 +2710,7 @@ var Input = React3.forwardRef(
         setText(slicedText);
       }
     }, [convertToString, maxLength, sliceText, value]);
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       setType(initialType);
     }, [initialType]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2807,7 +2758,7 @@ var Input = React3.forwardRef(
   }
 );
 exports.Input = Input;
-exports.StyledInputButton = styled6__default.default.div`
+exports.StyledInputButton = styled5__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2822,7 +2773,7 @@ exports.StyledInputButton = styled6__default.default.div`
       cursor: not-allowed;
     `}
 `;
-exports.StyledInputButtonContent = styled6__default.default.input`
+exports.StyledInputButtonContent = styled5__default.default.input`
   display: flex;
   width: 100%;
   border: none;
@@ -2832,12 +2783,12 @@ exports.StyledInputButtonContent = styled6__default.default.input`
     color: ${exports.colorTokens.neutral350};
   }
 `;
-var InputButton = React3.forwardRef(
+var InputButton = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, { value, defaultValue, onChange, onClick, isSelected, disabled = false, rightSource, onClear, width } = _b, rest = __objRest(_b, ["value", "defaultValue", "onChange", "onClick", "isSelected", "disabled", "rightSource", "onClear", "width"]);
-    const [text, setText] = React3.useState("");
-    const [isHovered, setIsHovered] = React3.useState(false);
-    const convertToString = React3.useCallback((value2) => {
+    const [text, setText] = React2.useState("");
+    const [isHovered, setIsHovered] = React2.useState(false);
+    const convertToString = React2.useCallback((value2) => {
       if (typeof value2 !== "number") {
         return typeof value2 === "string" ? value2 : value2.join("");
       }
@@ -2862,19 +2813,19 @@ var InputButton = React3.forwardRef(
     const handleOnMouseLeave = () => {
       setIsHovered(false);
     };
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       if (defaultValue) {
         const convertString = convertToString(defaultValue);
         setText(convertString);
       }
     }, [convertToString, defaultValue]);
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       if (value) {
         const convertString = convertToString(value);
         setText(convertString);
       }
     }, [convertToString, value]);
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       onChange && onChange(convertToString(value != null ? value : ""));
     }, [convertToString, onChange, value]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2899,7 +2850,7 @@ var InputButton = React3.forwardRef(
   }
 );
 exports.InputButton = InputButton;
-var BottomElementWrapper = styled6__default.default.div`
+var BottomElementWrapper = styled5__default.default.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -2907,7 +2858,7 @@ var BottomElementWrapper = styled6__default.default.div`
   gap: 8px;
   background-color: ${exports.colorTokens.neutral0};
 `;
-var StyledTextarea = styled6__default.default.textarea`
+var StyledTextarea = styled5__default.default.textarea`
   padding: 8px 12px 0 12px;
   background-color: transparent;
   resize: none;
@@ -2920,7 +2871,7 @@ var StyledTextarea = styled6__default.default.textarea`
     color: ${exports.colorTokens.neutral350};
   }
 `;
-var TextArea = React3.forwardRef(
+var TextArea = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -2951,9 +2902,9 @@ var TextArea = React3.forwardRef(
       "width",
       "className"
     ]);
-    const [text, setText] = React3.useState("");
-    const [isFocused, setIsFocused] = React3.useState(false);
-    const [isHovered, setIsHovered] = React3.useState(false);
+    const [text, setText] = React2.useState("");
+    const [isFocused, setIsFocused] = React2.useState(false);
+    const [isHovered, setIsHovered] = React2.useState(false);
     const handleOnMouseEnter = () => {
       setIsHovered(true);
     };
@@ -2978,7 +2929,7 @@ var TextArea = React3.forwardRef(
       }
       return String(value2);
     };
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       if (defaultValue) {
         const convertString = convertToString(defaultValue);
         if (maxLength && convertString.length > maxLength) {
@@ -2987,7 +2938,7 @@ var TextArea = React3.forwardRef(
         setText(convertString);
       }
     }, [defaultValue, maxLength]);
-    React3.useEffect(() => {
+    React2.useEffect(() => {
       if (value) {
         const convertString = convertToString(value);
         if (maxLength && convertString.length > maxLength) {
@@ -2996,7 +2947,7 @@ var TextArea = React3.forwardRef(
         setText(convertToString(value));
       }
     }, [maxLength, value]);
-    const uniqueId = React3.useId();
+    const uniqueId = React2.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(
       InputWrapper,
       {
@@ -3035,7 +2986,7 @@ var TextArea = React3.forwardRef(
   }
 );
 exports.TextArea = TextArea;
-var StyledSelectInputButton = styled6__default.default.div`
+var StyledSelectInputButton = styled5__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -3076,7 +3027,7 @@ var SelectInputButton = (_a) => {
     "width",
     "rightSource"
   ]);
-  const [isHovered, setIsHovered] = React3.useState(false);
+  const [isHovered, setIsHovered] = React2.useState(false);
   const handleOnClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -3128,6 +3079,50 @@ var SelectInputButton = (_a) => {
   );
 };
 exports.SelectInputButton = SelectInputButton;
+var SpaceMarginWrapper = styled5__default.default(framerMotion.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 = React2.useContext(exports.ModalContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactDom$1.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: modal.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(BackDrop_default, { children: /* @__PURE__ */ jsxRuntime.jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
+    document.body
+  ) });
+};
+exports.ModalProvider = ModalPortal;
+var PopperPortal2 = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactDom$1.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: "popper-portal-key",
+        style: {
+          zIndex: 20001,
+          position: "relative"
+        }
+      }
+    ),
+    document.body
+  ) });
+};
+var PopperPortal_default = PopperPortal2;
+var ShoplflowProvider = ({ children, domain = "SHOPL" }) => {
+  exports.useDomain(domain);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ModalProvider_default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopperPortal_default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(exports.ModalProvider, {}),
+    children
+  ] });
+};
+exports.ShoplflowProvider = ShoplflowProvider;
 /*! Bundled license information:
 
 classnames/index.js: