@shoplflow/base 0.25.4 → 0.26.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var React2 = require('react');
-var styled5 = require('@emotion/styled');
+var React3 = require('react');
+var styled6 = require('@emotion/styled');
 var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom$1 = require('react-dom');
@@ -34,8 +34,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
-var styled5__default = /*#__PURE__*/_interopDefault(styled5);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var styled6__default = /*#__PURE__*/_interopDefault(styled6);
 var Scrollbars__default = /*#__PURE__*/_interopDefault(Scrollbars);
 var ShoplAssets__namespace = /*#__PURE__*/_interopNamespace(ShoplAssets);
 var HadaAssets__namespace = /*#__PURE__*/_interopNamespace(HadaAssets);
@@ -144,13 +144,13 @@ var require_classnames = __commonJS({
   }
 });
 exports.useDomain = (domain = "SHOPL") => {
-  const [domainType, setDomainType] = React2.useState(void 0);
-  React2.useEffect(() => {
+  const [domainType, setDomainType] = React3.useState(void 0);
+  React3.useEffect(() => {
     if (domain) {
       setDomainType(domain);
     }
   }, [domain]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!domainType) {
       return;
     }
@@ -180,7 +180,7 @@ var fadeInOut = {
     }
   }
 };
-var BackDropStyled = styled5__default.default(framerMotion.motion.div)`
+var BackDropStyled = styled6__default.default(framerMotion.motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -222,7 +222,7 @@ var getSizeBySizeVariant = (size2) => {
       return "32px";
   }
 };
-var StyledAvatar = styled5__default.default.picture`
+var StyledAvatar = styled6__default.default.picture`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -232,7 +232,7 @@ var StyledAvatar = styled5__default.default.picture`
   overflow: hidden;
   border-radius: 50%;
 `;
-var StyledAvatarContainer = styled5__default.default.div`
+var StyledAvatarContainer = styled6__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -240,11 +240,11 @@ var StyledAvatarContainer = styled5__default.default.div`
   height: fit-content;
   position: relative;
 `;
-var StyledAvatarImage = styled5__default.default.img`
+var StyledAvatarImage = styled6__default.default.img`
   width: 100%;
   height: 100%;
 `;
-var StyledAvatarBadge = styled5__default.default.div`
+var StyledAvatarBadge = styled6__default.default.div`
   position: absolute;
   display: flex;
   align-items: center;
@@ -474,7 +474,7 @@ exports.typographyTokens = {
 };
 
 // src/components/Stack/Stack.styled.ts
-exports.StyledStack = styled5__default.default.div`
+exports.StyledStack = styled6__default.default.div`
   display: flex;
   width: ${({ width }) => width};
   max-width: ${({ maxWidth }) => maxWidth};
@@ -492,7 +492,7 @@ exports.StyledStack = styled5__default.default.div`
   border-radius: ${({ radius }) => radius && exports.borderRadiusTokens[radius]};
   animation: 0.2s all ease-in-out;
 `;
-var createStackComponent = (stackOption) => React2.forwardRef(function Stack2(_h, ref) {
+var createStackComponent = (stackOption) => React3.forwardRef(function Stack2(_h, ref) {
   var _i = _h, {
     as = "div",
     spacing = stackOption == null ? void 0 : stackOption.spacing,
@@ -546,6 +546,86 @@ exports.MotionStack = framerMotion.motion(Stack);
 exports.MotionStack.Vertical = framerMotion.motion(Stack.Vertical);
 exports.MotionStack.Horizontal = framerMotion.motion(Stack.Horizontal);
 exports.Stack = Stack;
+exports.StyledStackContainer = styled6__default.default.div`
+  display: flex;
+  width: ${({ width }) => width};
+  max-width: ${({ maxWidth }) => maxWidth};
+  min-width: ${({ minWidth }) => minWidth};
+  height: ${({ height }) => height};
+  max-height: ${({ maxHeight }) => maxHeight};
+  min-height: ${({ minHeight }) => minHeight};
+  flex-direction: ${({ direction }) => direction};
+  align-items: ${({ align }) => align};
+  justify-content: ${({ justify }) => justify};
+  gap: ${({ spacing }) => spacing && exports.spacingTokens[spacing]};
+  flex-wrap: ${({ flexWrap }) => flexWrap};
+  flex: ${({ flex }) => flex};
+  padding: ${({ padding }) => padding};
+  margin: ${({ margin }) => margin};
+  background: ${({ background: background2 }) => background2 ? exports.colorTokens[background2] : "transparent"};
+  border-radius: ${({ radius }) => radius && exports.borderRadiusTokens[radius]};
+  animation: 0.2s all ease-in-out;
+`;
+var createStackComponent2 = (stackOption) => React3.forwardRef(function Stack2(_j, ref) {
+  var _k = _j, {
+    as = "div",
+    spacing = stackOption == null ? void 0 : stackOption.spacing,
+    direction = ((_a) => (_a = stackOption == null ? void 0 : stackOption.direction) != null ? _a : "column")(),
+    align = ((_b) => (_b = stackOption == null ? void 0 : stackOption.align) != null ? _b : "flex-start")(),
+    justify = ((_c) => (_c = stackOption == null ? void 0 : stackOption.justify) != null ? _c : "flex-start")(),
+    width = ((_d) => (_d = stackOption == null ? void 0 : stackOption.width) != null ? _d : "initial")(),
+    height = ((_e) => (_e = stackOption == null ? void 0 : stackOption.height) != null ? _e : "initial")(),
+    flexWrap = ((_f) => (_f = stackOption == null ? void 0 : stackOption.flexWrap) != null ? _f : "initial")(),
+    flex = ((_g) => (_g = stackOption == null ? void 0 : stackOption.flex) != null ? _g : "initial")(),
+    radius = stackOption == null ? void 0 : stackOption.radius,
+    margin = ((_h) => (_h = stackOption == null ? void 0 : stackOption.margin) != null ? _h : "initial")(),
+    padding = ((_i) => (_i = stackOption == null ? void 0 : stackOption.padding) != null ? _i : "initial")(),
+    background: background2 = stackOption == null ? void 0 : stackOption.background
+  } = _k, rest = __objRest(_k, [
+    "as",
+    "spacing",
+    "direction",
+    "align",
+    "justify",
+    "width",
+    "height",
+    "flexWrap",
+    "flex",
+    "radius",
+    "margin",
+    "padding",
+    "background"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    exports.StyledStackContainer,
+    __spreadProps(__spreadValues({
+      as,
+      spacing,
+      ref,
+      direction,
+      align,
+      justify,
+      width,
+      height,
+      flexWrap,
+      flex,
+      background: background2,
+      radius,
+      margin,
+      padding
+    }, rest), {
+      "data-shoplflow": "Stack",
+      children: rest.children
+    })
+  );
+});
+var StackContainer = createStackComponent2();
+StackContainer.Vertical = createStackComponent2({ direction: "column" });
+StackContainer.Horizontal = createStackComponent2({ direction: "row" });
+exports.MotionStackContainer = framerMotion.motion(StackContainer);
+exports.MotionStackContainer.Vertical = framerMotion.motion(StackContainer.Vertical);
+exports.MotionStackContainer.Horizontal = framerMotion.motion(StackContainer.Horizontal);
+exports.StackContainer = StackContainer;
 var setEllipsis = (maxLines) => {
   return react$1.css`
     display: -webkit-box;
@@ -557,7 +637,7 @@ var setEllipsis = (maxLines) => {
     text-overflow: ellipsis;
   `;
 };
-var StyledText = styled5__default.default.span`
+var StyledText = styled6__default.default.span`
   display: ${({ display }) => display && display};
   align-items: center;
   color: ${({ color }) => color && exports.colorTokens[color]};
@@ -574,7 +654,7 @@ var StyledText = styled5__default.default.span`
       word-break: ${wordBreak};
     `};
 `;
-var Text = React2.forwardRef(
+var Text = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -655,6 +735,16 @@ var getModalBodyTopBottomPadding = (isIncludeHeader) => {
     padding-bottom: 24px;
   `;
 };
+var getFullScreenModal = () => {
+  return react$1.css`
+    min-height: 100vh;
+    max-height: 100vh;
+    width: 100vw;
+    max-width: 100vw;
+    border-radius: 0;
+    box-shadow: none;
+  `;
+};
 var checkMaxHeight = (height, viewport) => {
   const topBottomMargin = 64;
   if (height > 1200) {
@@ -665,7 +755,7 @@ var checkMaxHeight = (height, viewport) => {
   }
   return height - topBottomMargin;
 };
-var Container = styled5__default.default.div`
+var Container = styled6__default.default.div`
   display: flex;
   flex-direction: column;
   border-radius: ${exports.borderRadiusTokens.borderRadius08};
@@ -676,10 +766,16 @@ var Container = styled5__default.default.div`
   height: ${({ height, viewport }) => height ? `${checkMaxHeight(height, viewport)}px` : "initial"};
   min-height: 180px;
   max-height: 1200px;
+
   width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
   max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
+  ${({ sizeVar }) => sizeVar && window.innerWidth <= getModalWidthFromSize(sizeVar) + 40 && react$1.css`
+      width: ${window.innerWidth - 40}px;
+      max-width: ${window.innerWidth - 40}px;
+    `};
+  ${({ sizeVar }) => sizeVar === "FULL" && getFullScreenModal()};
 `;
-var HeaderContainer = styled5__default.default.div`
+var HeaderContainer = styled6__default.default.div`
   display: flex;
   width: 100%;
   min-height: 64px;
@@ -688,7 +784,7 @@ var HeaderContainer = styled5__default.default.div`
   padding: 12px 16px 12px 24px;
   gap: 10px;
 `;
-var BodyContainer = styled5__default.default.div`
+var BodyContainer = styled6__default.default.div`
   display: flex;
   width: 100%;
   height: 100%;
@@ -701,7 +797,7 @@ var BodyContainer = styled5__default.default.div`
   flex: 1;
   ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
 `;
-var ModalBodyContainerInner = styled5__default.default.div`
+var ModalBodyContainerInner = styled6__default.default.div`
   display: grid;
   align-self: stretch;
   flex-direction: column;
@@ -710,7 +806,7 @@ var ModalBodyContainerInner = styled5__default.default.div`
   height: 100%;
   box-sizing: border-box;
 `;
-var ModalBodyContent = styled5__default.default.div`
+var ModalBodyContent = styled6__default.default.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -718,7 +814,7 @@ var ModalBodyContent = styled5__default.default.div`
   padding: 0 24px;
   background: ${exports.colorTokens.neutral0};
 `;
-var FooterContainer = styled5__default.default.div`
+var FooterContainer = styled6__default.default.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -739,13 +835,14 @@ exports.ModalSize = {
   L: "L",
   XL: "XL",
   XXL: "XXL",
-  XXXL: "XXXL"
+  XXXL: "XXXL",
+  FULL: "FULL"
 };
 exports.MODAL_HEADER_KEY = Symbol("MODAL_HEADER");
 exports.MODAL_FOOTER_KEY = Symbol("MODAL_FOOTER");
 var useViewportSizeObserver = () => {
-  const [size2, setSize] = React2.useState({ width: window.innerWidth, height: window.innerHeight });
-  React2.useEffect(() => {
+  const [size2, setSize] = React3.useState({ width: window.innerWidth, height: window.innerHeight });
+  React3.useEffect(() => {
     const handleResize = () => {
       setSize({ width: window.innerWidth, height: window.innerHeight });
     };
@@ -760,9 +857,9 @@ var ModalContainer = (_a) => {
   const { height: windowHeight } = useViewportSizeObserver();
   const topBottomMargin = 64;
   const heightWidthMargin = height ? height + topBottomMargin : void 0;
-  const childrenArray = React2__namespace.default.Children.toArray(children);
+  const childrenArray = React3__namespace.default.Children.toArray(children);
   const findHeader = childrenArray.find((child) => {
-    if (!React2__namespace.default.isValidElement(child)) {
+    if (!React3__namespace.default.isValidElement(child)) {
       return child;
     }
     if (child.type[exports.MODAL_HEADER_KEY]) {
@@ -770,18 +867,18 @@ var ModalContainer = (_a) => {
     }
   });
   const findFooter = childrenArray.find((child) => {
-    if (!React2__namespace.default.isValidElement(child)) {
+    if (!React3__namespace.default.isValidElement(child)) {
       return child;
     }
     if (child.type[exports.MODAL_FOOTER_KEY]) {
       return child;
     }
   });
-  const addPropInChildren = React2__namespace.default.Children.map(childrenArray, (child) => {
-    if (!React2__namespace.default.isValidElement(child)) {
+  const addPropInChildren = React3__namespace.default.Children.map(childrenArray, (child) => {
+    if (!React3__namespace.default.isValidElement(child)) {
       return child;
     }
-    return React2__namespace.default.cloneElement(child, {
+    return React3__namespace.default.cloneElement(child, {
       isIncludeHeader: Boolean(findHeader),
       isIncludeFooter: Boolean(findFooter),
       sizeVar: rest.sizeVar,
@@ -796,17 +893,17 @@ var ModalFooter = ({ children }) => {
 };
 ModalFooter[exports.MODAL_FOOTER_KEY] = true;
 var ModalFooter_default = ModalFooter;
-var ScrollArea = React2.forwardRef((_a, ref) => {
+var ScrollArea = React3.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  const scrollRef = React2.useRef(null);
+  const scrollRef = React3.useRef(null);
   const mergeRef = utils.useMergeRefs(scrollRef, ref);
-  const [windowWidth, setWindowWidth] = React2.useState(window.innerWidth);
-  const [windowHeight, setWindowHeight] = React2.useState(window.innerHeight);
-  const onResize = React2.useCallback(() => {
+  const [windowWidth, setWindowWidth] = React3.useState(window.innerWidth);
+  const [windowHeight, setWindowHeight] = React3.useState(window.innerHeight);
+  const onResize = React3.useCallback(() => {
     setWindowWidth(window.innerWidth);
     setWindowHeight(window.innerHeight);
   }, []);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     window.addEventListener("resize", onResize);
     return () => {
       window.removeEventListener("resize", onResize);
@@ -838,7 +935,7 @@ var ModalBody = ({
   const headerHeight = 64;
   const footerHeight = 64;
   const topBottomMargin = 64;
-  const getHeaderFooterHeight = React2.useCallback(() => {
+  const getHeaderFooterHeight = React3.useCallback(() => {
     let result = 0;
     if (isIncludeHeader) {
       result += headerHeight;
@@ -848,7 +945,7 @@ var ModalBody = ({
     }
     return result;
   }, [isIncludeFooter, isIncludeHeader]);
-  const headerFooterHeight = React2.useMemo(() => getHeaderFooterHeight(), [getHeaderFooterHeight]);
+  const headerFooterHeight = React3.useMemo(() => getHeaderFooterHeight(), [getHeaderFooterHeight]);
   const setAutoHeightMin = () => {
     if (modalContainerHeight) {
       if (modalContainerHeight <= 1200) {
@@ -864,6 +961,9 @@ var ModalBody = ({
   };
   const setAutoHeightMax = () => {
     if (modalContainerHeight) {
+      if (sizeVar === "FULL") {
+        return windowHeight;
+      }
       if (modalContainerHeight > 1200) {
         return 1200 - topBottomMargin - headerFooterHeight;
       }
@@ -914,28 +1014,28 @@ var ModalHeader = ({ children }) => {
 };
 ModalHeader[exports.MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
-exports.ModalHandlerContext = React2.createContext({
+exports.ModalHandlerContext = React3.createContext({
   addModal: utils.noop,
   removeModal: utils.noop
 });
-exports.ModalContext = React2.createContext([]);
+exports.ModalContext = React3.createContext([]);
 
 // src/components/Modal/hooks/useModalValue.ts
 exports.useModalValue = () => {
-  const modal = React2.useContext(exports.ModalContext);
+  const modal = React3.useContext(exports.ModalContext);
   return {
     modal
   };
 };
 exports.useHandleModal = () => {
-  const { addModal, removeModal } = React2.useContext(exports.ModalHandlerContext);
+  const { addModal, removeModal } = React3.useContext(exports.ModalHandlerContext);
   return {
     addModal,
     removeModal
   };
 };
 var ModalProvider = ({ children }) => {
-  const [openedModals, setOpenedModals] = React2.useState([]);
+  const [openedModals, setOpenedModals] = React3.useState([]);
   const addModal = (component, id) => {
     setOpenedModals((modals) => {
       if (modals) {
@@ -981,8 +1081,8 @@ var ModalProvider = ({ children }) => {
       return;
     }
   };
-  const dispatch = React2.useMemo(() => ({ addModal, removeModal }), []);
-  React2.useEffect(() => {
+  const dispatch = React3.useMemo(() => ({ addModal, removeModal }), []);
+  React3.useEffect(() => {
     if (openedModals.length !== 1) {
       return;
     }
@@ -991,7 +1091,7 @@ var ModalProvider = ({ children }) => {
       document.body.style.cssText = "overflow:unset";
     };
   }, [openedModals.length]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const closeAllModals = () => {
       setOpenedModals([]);
     };
@@ -1011,7 +1111,7 @@ exports.Modal = {
   Body: ModalBody_default,
   Footer: ModalFooter_default
 };
-var SwitchContainer = styled5__default.default.div`
+var SwitchContainer = styled6__default.default.div`
   width: 32px;
   height: 32px;
   border-radius: 6px;
@@ -1024,7 +1124,7 @@ var SwitchContainer = styled5__default.default.div`
     background: ${({ isDisabled }) => !isDisabled && exports.colorTokens.neutral400_5};
   }
 `;
-var StyledSwitch = styled5__default.default.input`
+var StyledSwitch = styled6__default.default.input`
   appearance: none;
   border: none;
   border-radius: 12px;
@@ -1065,17 +1165,17 @@ var StyledSwitch = styled5__default.default.input`
   }
 `;
 var useOnToggle = (selected, defaultSelected) => {
-  const [isToggle, setIsToggle] = React2.useState(false);
+  const [isToggle, setIsToggle] = React3.useState(false);
   const isControlled = selected !== void 0;
   const handleToggle = () => {
     !isControlled && setIsToggle((prev) => !prev);
   };
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (isControlled) {
       setIsToggle(selected);
     }
   }, [isControlled, selected]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!isControlled && defaultSelected !== void 0) {
       setIsToggle(defaultSelected);
     }
@@ -1174,7 +1274,7 @@ var solidStyle = ({
     }
   `};
 `;
-var StyledChip = styled5__default.default.button`
+var StyledChip = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1304,7 +1404,7 @@ var getStyleBySizeVar = (sizeVar) => {
       `;
   }
 };
-var StyledChipButton = styled5__default.default.button`
+var StyledChipButton = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1423,7 +1523,7 @@ var getStyleBySizeVar2 = (sizeVar) => {
       `;
   }
 };
-var StyledButton = styled5__default.default.button`
+var StyledButton = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1437,7 +1537,7 @@ var StyledButton = styled5__default.default.button`
   ${({ sizeVar }) => getStyleBySizeVar2(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
 `;
-var Button = React2.forwardRef(
+var Button = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       styleVar = "PRIMARY",
@@ -1576,7 +1676,7 @@ var getStyleByStyleVar2 = (styleVar, color, isHovered) => {
       `;
   }
 };
-var StyledIconButton = styled5__default.default.button`
+var StyledIconButton = styled6__default.default.button`
   display: flex;
   flex-shrink: 0;
   border-radius: ${exports.borderRadiusTokens.borderRadius06};
@@ -1592,10 +1692,10 @@ var StyledIconButton = styled5__default.default.button`
     height: 20px;
   }
 `;
-var IconButton = React2.forwardRef(
+var IconButton = React3.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] = React2.useState(false);
+    const [isHovered, setIsHovered] = React3.useState(false);
     const handleOnMouseEnter = (e) => {
       setIsHovered(true);
       onMouseEnter && onMouseEnter(e);
@@ -1654,7 +1754,7 @@ var alertStyle = react$1.css`
     fill: ${exports.colorTokens.red300};
   }
 `;
-var StyledCallout = styled5__default.default.div`
+var StyledCallout = styled6__default.default.div`
   display: flex;
   justify-content: flex-start;
   align-items: start;
@@ -1664,14 +1764,14 @@ var StyledCallout = styled5__default.default.div`
   ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
   ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
 `;
-var StyledCalloutIcon = styled5__default.default.svg`
+var StyledCalloutIcon = styled6__default.default.svg`
   display: flex;
   height: 20px;
   min-height: 20px;
   width: 20px;
   min-width: 20px;
 `;
-styled5__default.default.div`
+styled6__default.default.div`
   padding: 2px 0;
 `;
 var Callout = (_a) => {
@@ -1694,13 +1794,13 @@ exports.CalloutTypes = {
   INFORMATION: "INFORMATION",
   ALERT: "ALERT"
 };
-var StyledPopper = styled5__default.default.div`
+var StyledPopper = styled6__default.default.div`
   width: ${({ width }) => width != null ? width : "fit-content"};
   height: ${({ height }) => height && height};
 `;
-var PopperContext = React2.createContext(null);
+var PopperContext = React3.createContext(null);
 var usePopper = () => {
-  const context = React2__namespace.useContext(PopperContext);
+  const context = React3__namespace.useContext(PopperContext);
   if (context === null) {
     throw new Error("usePopper must be used within a PopperProvider");
   }
@@ -1728,7 +1828,7 @@ function mergeRefs(...refs) {
   };
 }
 function useMergeRefs2(...refs) {
-  return React2.useMemo(() => mergeRefs(...refs), refs);
+  return React3.useMemo(() => mergeRefs(...refs), refs);
 }
 var Popper = ({
   placement,
@@ -1738,7 +1838,7 @@ var Popper = ({
   middlewares,
   children
 }) => {
-  const [isOpen, setIsOpen] = React2.useState(false);
+  const [isOpen, setIsOpen] = React3.useState(false);
   const _a = reactDom.useFloating({
     strategy,
     placement,
@@ -1759,18 +1859,18 @@ var Popper = ({
     }
   );
 };
-exports.PopperTrigger = React2.forwardRef(
+exports.PopperTrigger = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, isOpen = false } = _b, rest = __objRest(_b, ["children", "isOpen"]);
     const { setReference, setIsOpen } = usePopper();
     const refs = useMergeRefs2(ref, setReference);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
     return /* @__PURE__ */ jsxRuntime.jsx(StyledPopper, __spreadProps(__spreadValues({ ref: refs, "data-shoplflow": "Popper" }, rest), { children }));
   }
 );
-exports.PopperPortal = React2.forwardRef(
+exports.PopperPortal = React3.forwardRef(
   ({ children, animation: initialAnimation }, ref) => {
     const { floatingStyles, setFloating, isOpen } = usePopper();
     const animation = initialAnimation != null ? initialAnimation : fadeInOut;
@@ -1856,10 +1956,10 @@ var getDropdownIconSizeBySizeVar = (size2) => {
       `;
   }
 };
-var StyledDropdown = styled5__default.default.div`
+var StyledDropdown = styled6__default.default.div`
   width: ${({ width }) => width};
 `;
-var StyledDropdownContent = styled5__default.default.div`
+var StyledDropdownContent = styled6__default.default.div`
   display: flex;
   flex-direction: column;
   background: ${exports.colorTokens.neutral0};
@@ -1868,7 +1968,7 @@ var StyledDropdownContent = styled5__default.default.div`
   border-radius: 6px;
   box-shadow: ${exports.boxShadowTokens.dropShadow};
 `;
-var StyledDropdownButton = styled5__default.default.button`
+var StyledDropdownButton = styled6__default.default.button`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1883,16 +1983,16 @@ var StyledDropdownButton = styled5__default.default.button`
       cursor: not-allowed;
     `}
 `;
-var DropdownButtonIcon = styled5__default.default(framerMotion.motion.div)`
+var DropdownButtonIcon = styled6__default.default(framerMotion.motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
 
   ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
 `;
-var DropdownContext = React2.createContext(null);
+var DropdownContext = React3.createContext(null);
 var useDropdown = () => {
-  const context = React2.useContext(DropdownContext);
+  const context = React3.useContext(DropdownContext);
   if (context === null) {
     throw new Error("useDropdown must be used within a DropdownProvider");
   }
@@ -1936,7 +2036,7 @@ var getStyleByType = ({
     max-height: ${maxHeight != null ? maxHeight : "initial"};
   `;
 };
-var InputWrapper = styled5__default.default.label`
+var InputWrapper = styled6__default.default.label`
   position: relative;
   display: flex;
   align-items: center;
@@ -1980,7 +2080,7 @@ var getIconSize = (size2) => {
       return "fit-content";
   }
 };
-exports.StyledIcon = styled5__default.default.svg`
+exports.StyledIcon = styled6__default.default.svg`
   width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
   min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
   height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
@@ -1989,16 +2089,16 @@ exports.StyledIcon = styled5__default.default.svg`
     fill: ${({ color }) => color && exports.colorTokens[color]};
   }
 `;
-var Icon = React2.forwardRef((_a, ref) => {
+var Icon = React3.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 = React2.forwardRef(
+var DropdownButton = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, { width = "100%", onClick, sizeVar = "M", isError, placeholder, value, disabled, leftSource } = _b, rest = __objRest(_b, ["width", "onClick", "sizeVar", "isError", "placeholder", "value", "disabled", "leftSource"]);
     const { isOpen, setIsOpen } = useDropdown();
-    const [isHovered, setIsHovered] = React2.useState(false);
+    const [isHovered, setIsHovered] = React3.useState(false);
     const handleOnClick = (e) => {
       if (!disabled) {
         onClick && onClick(e);
@@ -2081,10 +2181,10 @@ var Dropdown = ({
   option = "CLICK",
   width = "100%"
 }) => {
-  const [triggerRef, setTriggerRef] = React2.useState(null);
-  const [size2, setSize] = React2.useState({ width: 0, height: 0 });
-  const [isOpen, setIsOpen] = React2.useState(false);
-  React2.useEffect(() => {
+  const [triggerRef, setTriggerRef] = React3.useState(null);
+  const [size2, setSize] = React3.useState({ width: 0, height: 0 });
+  const [isOpen, setIsOpen] = React3.useState(false);
+  React3.useEffect(() => {
     if (triggerRef) {
       setSize({
         width: triggerRef.offsetWidth,
@@ -2092,7 +2192,7 @@ var Dropdown = ({
       });
     }
   }, [triggerRef]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (initialIsOpen === void 0) {
       return;
     }
@@ -2115,7 +2215,7 @@ var Dropdown = ({
 Dropdown.Button = DropdownButton;
 Dropdown.Content = DropdownContent;
 exports.Dropdown = Dropdown;
-var Container2 = styled5__default.default.div`
+var Container2 = styled6__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2123,7 +2223,7 @@ var Container2 = styled5__default.default.div`
   height: 24px;
   padding: 4px;
 `;
-var IconButton2 = styled5__default.default.button`
+var IconButton2 = styled6__default.default.button`
   display: flex;
   width: 16px;
   height: 16px;
@@ -2143,7 +2243,7 @@ var IconButton2 = styled5__default.default.button`
   }
 `;
 var MUNUS_BUTTON_SYMBOL_KEY = Symbol("SHOPLFLOW_MUNUS_BUTTON");
-var MinusButton = React2.forwardRef((_a, ref) => {
+var MinusButton = React3.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(
@@ -2230,7 +2330,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
       return "";
   }
 };
-var StyledCheckbox = styled5__default.default.button`
+var StyledCheckbox = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2245,7 +2345,7 @@ var StyledCheckbox = styled5__default.default.button`
   ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var Container3 = styled5__default.default.button`
+var Container3 = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2274,7 +2374,7 @@ var Checkbox = (_a) => {
     "styleVar"
   ]);
   const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
-  const [isHovered, toggleHovered] = React2.useState(false);
+  const [isHovered, toggleHovered] = React3.useState(false);
   const handleMouseLeave = (e) => {
     toggleHovered(false);
     onMouseLeave && onMouseLeave(e);
@@ -2331,7 +2431,7 @@ var getSelectedStyle = (isHovered) => {
     `}
   `;
 };
-var StyledRadio = styled5__default.default.div`
+var StyledRadio = styled6__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2353,7 +2453,7 @@ var StyledRadio = styled5__default.default.div`
   ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var Container4 = styled5__default.default.button`
+var Container4 = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2366,7 +2466,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] = React2.useState(false);
+  const [isHovered, toggleHovered] = React3.useState(false);
   const handleMouseLeave = (e) => {
     toggleHovered(false);
     onMouseLeave && onMouseLeave(e);
@@ -2430,7 +2530,7 @@ var getFontStylesBySizeVar = (sizeVar) => {
       return "body1_400";
   }
 };
-var StyledMenu = styled5__default.default.li`
+var StyledMenu = styled6__default.default.li`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -2473,7 +2573,7 @@ var Menu = (_a) => {
     "disabled"
   ]);
   const [selected, handleToggle] = useOnToggle(isSelected, defaultSelected);
-  const LeftSourceClone = leftSource ? React2__namespace.default.cloneElement(leftSource, __spreadProps(__spreadValues({}, rest), {
+  const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadProps(__spreadValues({}, rest), {
     isSelected
   })) : leftSource;
   const handleOnClick = (e) => {
@@ -2505,7 +2605,7 @@ exports.MenuSizeVariants = {
   S: "S",
   M: "M"
 };
-var StyledList = styled5__default.default.li`
+var StyledList = styled6__default.default.li`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -2520,7 +2620,7 @@ var StyledList = styled5__default.default.li`
     background: ${exports.colorTokens.neutral100};
   }
 `;
-var StyledText2Rows = styled5__default.default.div`
+var StyledText2Rows = styled6__default.default.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2528,7 +2628,7 @@ var StyledText2Rows = styled5__default.default.div`
 `;
 var List = (_a) => {
   var _b = _a, { children, leftSource, rightSource } = _b, rest = __objRest(_b, ["children", "leftSource", "rightSource"]);
-  const LeftSourceClone = leftSource ? React2__namespace.default.cloneElement(leftSource, __spreadValues({}, rest)) : leftSource;
+  const LeftSourceClone = leftSource ? React3__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.");
   }
@@ -2630,7 +2730,7 @@ var getColorsByStyleVariant = (styleVariant, color = "neutral700") => {
       `;
   }
 };
-var StyledTag = styled5__default.default.div`
+var StyledTag = styled6__default.default.div`
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -2673,7 +2773,7 @@ exports.TagSizeVariants = {
   S: "S",
   M: "M"
 };
-var StyledInput = styled5__default.default.input`
+var StyledInput = styled6__default.default.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
   display: flex;
@@ -2706,13 +2806,13 @@ var StyledInput = styled5__default.default.input`
     box-sizing: inherit;
   }
 `;
-var RightElementWrapper = styled5__default.default.div`
+var RightElementWrapper = styled6__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0 8px 0 0;
 `;
-var Wrapper = styled5__default.default.div`
+var Wrapper = styled6__default.default.div`
   display: flex;
   width: 100%;
   justify-content: flex-end;
@@ -2727,7 +2827,7 @@ var TextCounter = ({ currentLength, maxLength }) => {
   ] });
 };
 var TextCounter_default = TextCounter;
-React2.createContext({
+React3.createContext({
   domain: "SHOPL",
   handleToggleTheme: () => {
   }
@@ -2751,7 +2851,7 @@ var getNumberLimitRange = (value, min, max) => {
   }
   return String(value);
 };
-var Input = React2.forwardRef(
+var Input = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onFocus,
@@ -2784,20 +2884,20 @@ var Input = React2.forwardRef(
       "className",
       "width"
     ]);
-    const [text, setText] = React2.useState("");
-    const [isFocused, setIsFocused] = React2.useState(false);
-    const [type, setType] = React2.useState(initialType);
-    const [isHovered, setIsHovered] = React2.useState(false);
-    const uniqueId = React2.useId();
-    const inputRef = React2__namespace.default.useRef(null);
+    const [text, setText] = React3.useState("");
+    const [isFocused, setIsFocused] = React3.useState(false);
+    const [type, setType] = React3.useState(initialType);
+    const [isHovered, setIsHovered] = React3.useState(false);
+    const uniqueId = React3.useId();
+    const inputRef = React3__namespace.default.useRef(null);
     const refs = useMergeRefs2(ref, inputRef);
-    const convertToString = React2.useCallback((value2) => {
+    const convertToString = React3.useCallback((value2) => {
       if (typeof value2 !== "number") {
         return typeof value2 === "string" ? value2 : value2.join("");
       }
       return String(value2);
     }, []);
-    const sliceText = React2.useCallback(
+    const sliceText = React3.useCallback(
       (value2) => {
         if (maxLength && value2.length > maxLength) {
           return value2.slice(0, maxLength);
@@ -2847,14 +2947,14 @@ var Input = React2.forwardRef(
         setType("password");
       }
     };
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (defaultValue !== void 0) {
         const convertString = convertToString(defaultValue);
         const slicedText = sliceText(convertString);
         setText(slicedText);
       }
     }, [convertToString, defaultValue, maxLength, sliceText]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       var _a2;
       if (value !== void 0) {
         const convertString = convertToString(value);
@@ -2863,7 +2963,7 @@ var Input = React2.forwardRef(
         setText(slicedText);
       }
     }, [convertToString, maxLength, sliceText, value]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       setType(initialType);
     }, [initialType]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2914,7 +3014,7 @@ var Input = React2.forwardRef(
   }
 );
 exports.Input = Input;
-var StyledInputButton = styled5__default.default.div`
+var StyledInputButton = styled6__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2929,7 +3029,7 @@ var StyledInputButton = styled5__default.default.div`
       cursor: not-allowed;
     `}
 `;
-var StyledInputButtonContent = styled5__default.default.input`
+var StyledInputButtonContent = styled6__default.default.input`
   display: flex;
   width: 100%;
   border: none;
@@ -2939,7 +3039,7 @@ var StyledInputButtonContent = styled5__default.default.input`
     color: ${exports.colorTokens.neutral350};
   }
 `;
-var InputButton = React2.forwardRef(
+var InputButton = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -2963,10 +3063,10 @@ var InputButton = React2.forwardRef(
       "width"
     ]);
     var _a2, _b2;
-    const [text, setText] = React2.useState((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
-    const [isHovered, setIsHovered] = React2.useState(false);
-    const prevValue = React2.useRef((_b2 = value != null ? value : defaultValue) != null ? _b2 : "");
-    const convertToString = React2.useCallback((value2) => {
+    const [text, setText] = React3.useState((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
+    const [isHovered, setIsHovered] = React3.useState(false);
+    const prevValue = React3.useRef((_b2 = value != null ? value : defaultValue) != null ? _b2 : "");
+    const convertToString = React3.useCallback((value2) => {
       if (typeof value2 !== "number") {
         return typeof value2 === "string" ? value2 : value2.join("");
       }
@@ -2991,7 +3091,7 @@ var InputButton = React2.forwardRef(
     const handleOnMouseLeave = () => {
       setIsHovered(false);
     };
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (prevValue.current === value) {
         return;
       }
@@ -3001,7 +3101,7 @@ var InputButton = React2.forwardRef(
         prevValue.current = convertString;
       }
     }, [convertToString, value]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (prevValue.current === value) {
         return;
       }
@@ -3031,7 +3131,7 @@ var InputButton = React2.forwardRef(
   }
 );
 exports.InputButton = InputButton;
-var BottomElementWrapper = styled5__default.default.div`
+var BottomElementWrapper = styled6__default.default.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -3039,7 +3139,7 @@ var BottomElementWrapper = styled5__default.default.div`
   gap: 8px;
   background-color: ${exports.colorTokens.neutral0};
 `;
-var StyledTextarea = styled5__default.default.textarea`
+var StyledTextarea = styled6__default.default.textarea`
   padding: 8px 12px 0 12px;
   background-color: transparent;
   resize: none;
@@ -3052,7 +3152,7 @@ var StyledTextarea = styled5__default.default.textarea`
     color: ${exports.colorTokens.neutral350};
   }
 `;
-var TextArea = React2.forwardRef(
+var TextArea = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -3085,9 +3185,9 @@ var TextArea = React2.forwardRef(
       "height",
       "className"
     ]);
-    const [text, setText] = React2.useState("");
-    const [isFocused, setIsFocused] = React2.useState(false);
-    const [isHovered, setIsHovered] = React2.useState(false);
+    const [text, setText] = React3.useState("");
+    const [isFocused, setIsFocused] = React3.useState(false);
+    const [isHovered, setIsHovered] = React3.useState(false);
     const handleOnMouseEnter = () => {
       setIsHovered(true);
     };
@@ -3112,7 +3212,7 @@ var TextArea = React2.forwardRef(
       }
       return String(value2);
     };
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (defaultValue) {
         const convertString = convertToString(defaultValue);
         if (maxLength && convertString.length > maxLength) {
@@ -3121,7 +3221,7 @@ var TextArea = React2.forwardRef(
         setText(convertString);
       }
     }, [defaultValue, maxLength]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (value) {
         const convertString = convertToString(value);
         if (maxLength && convertString.length > maxLength) {
@@ -3130,7 +3230,7 @@ var TextArea = React2.forwardRef(
         setText(convertToString(value));
       }
     }, [maxLength, value]);
-    const uniqueId = React2.useId();
+    const uniqueId = React3.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(
       InputWrapper,
       {
@@ -3170,7 +3270,7 @@ var TextArea = React2.forwardRef(
   }
 );
 exports.TextArea = TextArea;
-var StyledSelectInputButton = styled5__default.default.div`
+var StyledSelectInputButton = styled6__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -3211,7 +3311,7 @@ var SelectInputButton = (_a) => {
     "width",
     "rightSource"
   ]);
-  const [isHovered, setIsHovered] = React2.useState(false);
+  const [isHovered, setIsHovered] = React3.useState(false);
   const handleOnClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -3264,7 +3364,7 @@ var SelectInputButton = (_a) => {
   );
 };
 exports.SelectInputButton = SelectInputButton;
-var StyledTooltipContent = styled5__default.default.div`
+var StyledTooltipContent = styled6__default.default.div`
   background-color: ${exports.colorTokens.neutral700};
   padding: 4px 8px;
   max-width: 240px;
@@ -3290,11 +3390,11 @@ var Tooltip = (_a) => {
     "triggerRef",
     "portalRef"
   ]);
-  const [isOpen, setIsOpen] = React2.useState(false);
-  const showHandler = React2.useCallback(() => {
+  const [isOpen, setIsOpen] = React3.useState(false);
+  const showHandler = React3.useCallback(() => {
     setIsOpen(true);
   }, []);
-  const hideHandler = React2.useCallback(() => {
+  const hideHandler = React3.useCallback(() => {
     setIsOpen(false);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, __spreadProps(__spreadValues({ offset: offset3, placement, middlewares: [core.flip(), core.shift({ padding: 5 })] }, popperProps), { children: [
@@ -3315,19 +3415,19 @@ var Tooltip = (_a) => {
 };
 Tooltip.Content = TooltipContent;
 exports.Tooltip = Tooltip;
-var SpaceMarginWrapper = styled5__default.default(framerMotion.motion.div)`
+var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-grow: 1;
   z-index: 101;
-  padding: 32px 20px;
+  //padding: 32px 20px;
   width: 100%;
   height: 100%;
 `;
 var ModalPortal = () => {
-  const modal = React2.useContext(exports.ModalContext);
+  const modal = React3.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