@shoplflow/base 0.46.11 → 0.46.13

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React3 = require('react');
+var React = require('react');
 var styled6 = require('@emotion/styled');
 var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
@@ -39,7 +39,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled6__default = /*#__PURE__*/_interopDefault(styled6);
 var Scrollbars__default = /*#__PURE__*/_interopDefault(Scrollbars);
 var ShoplAssets__namespace = /*#__PURE__*/_interopNamespace(ShoplAssets);
@@ -161,13 +161,13 @@ var require_classnames = __commonJS({
   }
 });
 exports.useDomain = (domain = "SHOPL") => {
-  const [domainType, setDomainType] = React3.useState(void 0);
-  React3.useEffect(() => {
+  const [domainType, setDomainType] = React.useState(void 0);
+  React.useEffect(() => {
     if (domain) {
       setDomainType(domain);
     }
   }, [domain]);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (!domainType) {
       return;
     }
@@ -329,7 +329,7 @@ exports.AvatarSizeVariants = {
 };
 
 // src/components/Avatar/version.ts
-exports.AVATAR_VERSION = "2.1.1";
+exports.AVATAR_VERSION = "2.1.2";
 
 // src/styles/tokens.ts
 var fontWeightRegular = "var(--font-weight-regular)";
@@ -552,7 +552,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) => React.forwardRef(function Stack2(_h, ref) {
   var _i = _h, {
     as = "div",
     spacing = stackOption == null ? void 0 : stackOption.spacing,
@@ -608,7 +608,7 @@ exports.MotionStack.Horizontal = framerMotion.motion(Stack.Horizontal);
 exports.Stack = Stack;
 
 // src/components/Stack/version.ts
-exports.STACK_VERSION = "2.0.0";
+exports.STACK_VERSION = "2.0.1";
 exports.StyledStackContainer = styled6__default.default.div`
   display: flex;
   width: ${({ width }) => width};
@@ -629,7 +629,7 @@ exports.StyledStackContainer = styled6__default.default.div`
   border-radius: ${({ radius }) => radius && exports.borderRadiusTokens[radius]};
   animation: 0.2s all ease-in-out;
 `;
-var createStackComponent2 = (stackOption) => React3.forwardRef(function Stack2(_j, ref) {
+var createStackComponent2 = (stackOption) => React.forwardRef(function Stack2(_j, ref) {
   var _k = _j, {
     as = "div",
     spacing = stackOption == null ? void 0 : stackOption.spacing,
@@ -691,7 +691,7 @@ exports.MotionStackContainer.Horizontal = framerMotion.motion(StackContainer.Hor
 exports.StackContainer = StackContainer;
 
 // src/components/StackContainer/version.ts
-exports.STACK_CONTAINER_VERSION = "2.0.0";
+exports.STACK_CONTAINER_VERSION = "2.0.1";
 var setEllipsis = (maxLines) => {
   return react$1.css`
     display: -webkit-box;
@@ -721,7 +721,7 @@ var StyledText = styled6__default.default.span`
       word-break: ${wordBreak};
     `};
 `;
-var Text = React3.forwardRef(
+var Text = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -765,7 +765,7 @@ var Text = React3.forwardRef(
 exports.Text = Text;
 
 // src/components/Text/version.ts
-exports.TEXT_VERSION = "2.0.1";
+exports.TEXT_VERSION = "2.0.2";
 var MODAL_SIZE_XXS = 400;
 var MODAL_SIZE_XS = 500;
 var MODAL_SIZE_S = 560;
@@ -933,8 +933,8 @@ exports.ModalSize = {
 exports.MODAL_HEADER_KEY = Symbol("MODAL_HEADER");
 exports.MODAL_FOOTER_KEY = Symbol("MODAL_FOOTER");
 var useViewportSizeObserver = () => {
-  const [size2, setSize] = React3.useState({ width: window.innerWidth, height: window.innerHeight });
-  React3.useEffect(() => {
+  const [size2, setSize] = React.useState({ width: window.innerWidth, height: window.innerHeight });
+  React.useEffect(() => {
     const handleResize = () => {
       setSize({ width: window.innerWidth, height: window.innerHeight });
     };
@@ -943,7 +943,7 @@ var useViewportSizeObserver = () => {
   }, []);
   return size2;
 };
-var ModalOptionContext = React3.createContext({
+var ModalOptionContext = React.createContext({
   topHeight: 0,
   bottomHeight: 0,
   setTopHeight: utils.noop,
@@ -952,12 +952,12 @@ var ModalOptionContext = React3.createContext({
   clearBottomHeight: utils.noop
 });
 var ModalOptionContextProvider = ({ children }) => {
-  const [topHeight, setTopHeight] = React3.useState(0);
-  const [bottomHeight, setBottomHeight] = React3.useState(0);
-  const clearTopHeight = React3.useCallback(() => {
+  const [topHeight, setTopHeight] = React.useState(0);
+  const [bottomHeight, setBottomHeight] = React.useState(0);
+  const clearTopHeight = React.useCallback(() => {
     setTopHeight(0);
   }, []);
-  const clearBottomHeight = React3.useCallback(() => {
+  const clearBottomHeight = React.useCallback(() => {
     setBottomHeight(0);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -981,9 +981,9 @@ var ModalContainer = (_a) => {
   const { height: windowHeight } = useViewportSizeObserver();
   const topBottomMargin = 64;
   const heightWidthMargin = height ? height + topBottomMargin : void 0;
-  const childrenArray = React3__namespace.default.Children.toArray(children);
+  const childrenArray = React__namespace.default.Children.toArray(children);
   const findHeader = childrenArray.find((child) => {
-    if (!React3__namespace.default.isValidElement(child)) {
+    if (!React__namespace.default.isValidElement(child)) {
       return child;
     }
     if (child.type[exports.MODAL_HEADER_KEY]) {
@@ -991,18 +991,18 @@ var ModalContainer = (_a) => {
     }
   });
   const findFooter = childrenArray.find((child) => {
-    if (!React3__namespace.default.isValidElement(child)) {
+    if (!React__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 = React__namespace.default.Children.map(childrenArray, (child) => {
+    if (!React__namespace.default.isValidElement(child)) {
       return child;
     }
-    return React3__namespace.default.cloneElement(child, {
+    return React__namespace.default.cloneElement(child, {
       isIncludeHeader: Boolean(findHeader),
       isIncludeFooter: Boolean(findFooter),
       sizeVar: rest.sizeVar,
@@ -1017,17 +1017,17 @@ var ModalFooter = ({ children }) => {
 };
 ModalFooter[exports.MODAL_FOOTER_KEY] = true;
 var ModalFooter_default = ModalFooter;
-var ScrollArea = React3.forwardRef((_a, ref) => {
+var ScrollArea = React.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  const scrollRef = React3.useRef(null);
+  const scrollRef = React.useRef(null);
   const mergeRef = utils.useMergeRefs(scrollRef, ref);
-  const [windowWidth, setWindowWidth] = React3.useState(window.innerWidth);
-  const [windowHeight, setWindowHeight] = React3.useState(window.innerHeight);
-  const onResize = React3.useCallback(() => {
+  const [windowWidth, setWindowWidth] = React.useState(window.innerWidth);
+  const [windowHeight, setWindowHeight] = React.useState(window.innerHeight);
+  const onResize = React.useCallback(() => {
     setWindowWidth(window.innerWidth);
     setWindowHeight(window.innerHeight);
   }, []);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     window.addEventListener("resize", onResize);
     return () => {
       window.removeEventListener("resize", onResize);
@@ -1048,9 +1048,9 @@ var ScrollArea = React3.forwardRef((_a, ref) => {
 exports.ScrollArea = ScrollArea;
 
 // src/components/ScrollArea/version.ts
-exports.SCROLL_AREA_VERSION = "2.0.0";
+exports.SCROLL_AREA_VERSION = "2.0.1";
 var useModalOption = () => {
-  const context = React3.useContext(ModalOptionContext);
+  const context = React.useContext(ModalOptionContext);
   if (!context) {
     throw new Error(`useModalOption cannot be called outside the ModalOptionProvider`);
   }
@@ -1070,7 +1070,7 @@ var ModalBody = ({
   const headerHeight = 64;
   const footerHeight = 72;
   const topBottomMargin = 64;
-  const getHeaderFooterHeight = React3.useCallback(() => {
+  const getHeaderFooterHeight = React.useCallback(() => {
     let result = 0;
     if (isIncludeHeader) {
       result += headerHeight;
@@ -1080,7 +1080,7 @@ var ModalBody = ({
     }
     return result;
   }, [isIncludeFooter, isIncludeHeader]);
-  const headerFooterHeight = React3.useMemo(() => getHeaderFooterHeight(), [getHeaderFooterHeight]);
+  const headerFooterHeight = React.useMemo(() => getHeaderFooterHeight(), [getHeaderFooterHeight]);
   const setAutoHeightMin = () => {
     if (sizeVar === "FULL") {
       return windowHeight - headerFooterHeight - heightToDeduct;
@@ -1163,9 +1163,9 @@ var ModalHeader = ({ children }) => {
 ModalHeader[exports.MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
 var ModalTop = ({ children }) => {
-  const [topRef, setTopRef] = React3.useState(null);
+  const [topRef, setTopRef] = React.useState(null);
   const { setTopHeight, clearTopHeight } = useModalOption();
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (!topRef || !setTopHeight) {
       return;
     }
@@ -1185,9 +1185,9 @@ var ModalTop = ({ children }) => {
 };
 var ModalTop_default = ModalTop;
 var ModalBottom = ({ children }) => {
-  const [bottomRef, setBottomRef] = React3.useState(null);
+  const [bottomRef, setBottomRef] = React.useState(null);
   const { setBottomHeight, clearBottomHeight } = useModalOption();
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (!bottomRef || !setBottomHeight) {
       return;
     }
@@ -1205,28 +1205,28 @@ var ModalBottom = ({ children }) => {
   }, [bottomRef, setBottomHeight, clearBottomHeight]);
   return /* @__PURE__ */ jsxRuntime.jsx(BottomContainer, { ref: setBottomRef, children });
 };
-exports.ModalHandlerContext = React3.createContext({
+exports.ModalHandlerContext = React.createContext({
   addModal: utils.noop,
   removeModal: utils.noop
 });
-exports.ModalContext = React3.createContext([]);
+exports.ModalContext = React.createContext([]);
 
 // src/components/Modal/hooks/useModalValue.ts
 exports.useModalValue = () => {
-  const modal = React3.useContext(exports.ModalContext);
+  const modal = React.useContext(exports.ModalContext);
   return {
     modal
   };
 };
 exports.useHandleModal = () => {
-  const { addModal, removeModal } = React3.useContext(exports.ModalHandlerContext);
+  const { addModal, removeModal } = React.useContext(exports.ModalHandlerContext);
   return {
     addModal,
     removeModal
   };
 };
 var ModalProvider = ({ children }) => {
-  const [openedModals, setOpenedModals] = React3.useState([]);
+  const [openedModals, setOpenedModals] = React.useState([]);
   const addModal = (component, id, zIndex) => {
     setOpenedModals((modals) => {
       if (modals) {
@@ -1272,8 +1272,8 @@ var ModalProvider = ({ children }) => {
       return;
     }
   };
-  const dispatch = React3.useMemo(() => ({ addModal, removeModal }), []);
-  React3.useEffect(() => {
+  const dispatch = React.useMemo(() => ({ addModal, removeModal }), []);
+  React.useEffect(() => {
     if (openedModals.length !== 1) {
       return;
     }
@@ -1282,7 +1282,7 @@ var ModalProvider = ({ children }) => {
       document.body.style.cssText = "overflow:unset";
     };
   }, [openedModals.length]);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     const closeAllModals = () => {
       setOpenedModals([]);
     };
@@ -1296,7 +1296,7 @@ var ModalProvider = ({ children }) => {
 var ModalProvider_default = ModalProvider;
 
 // src/components/Modal/version.ts
-exports.MODAL_VERSION = "2.0.0";
+exports.MODAL_VERSION = "2.0.1";
 
 // src/components/Modal/index.ts
 exports.Modal = {
@@ -1309,7 +1309,7 @@ exports.Modal = {
 };
 
 // src/components/BackDrop/version.ts
-exports.BACK_DROP_VERSION = "2.0.0";
+exports.BACK_DROP_VERSION = "2.0.1";
 var getContainerStylesBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "S":
@@ -1409,17 +1409,17 @@ var StyledSwitch = styled6__default.default.input`
   }
 `;
 var useOnToggle = (selected, defaultSelected) => {
-  const [isToggle, setIsToggle] = React3.useState(false);
+  const [isToggle, setIsToggle] = React.useState(false);
   const isControlled = selected !== void 0;
   const handleToggle = () => {
     !isControlled && setIsToggle((prev) => !prev);
   };
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (isControlled) {
       setIsToggle(selected);
     }
   }, [isControlled, selected]);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (!isControlled && defaultSelected !== void 0) {
       setIsToggle(defaultSelected);
     }
@@ -1470,7 +1470,7 @@ exports.SwitchSizeVariants = {
 };
 
 // src/components/Switch/version.ts
-exports.SWITCH_VERSION = "2.0.0";
+exports.SWITCH_VERSION = "2.0.1";
 
 // src/components/Chips/ChipToggle/ChipToggle.types.ts
 exports.ChipToggleStyleVariants = {
@@ -1718,7 +1718,7 @@ var ChipButton = (_a) => {
 exports.ChipButton = ChipButton;
 
 // src/components/Chips/version.ts
-exports.CHIPS_VERSION = "2.0.0";
+exports.CHIPS_VERSION = "2.0.1";
 var getStyleByStyleVar = (styleVar, color, disabled) => {
   const domain = exports.getDomain();
   const secondaryBorderColor = domain === "hada" ? exports.colorTokens.hada150 : exports.colorTokens.neutral350;
@@ -1835,7 +1835,7 @@ var LoadingSpinner = ({ color = "neutral0" }) => {
   ] });
 };
 var LoadingSpinner_default = LoadingSpinner;
-var Button = React3.forwardRef(
+var Button = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       styleVar = "PRIMARY",
@@ -2018,7 +2018,7 @@ var StyledIconButton = styled6__default.default.button`
     height: ${({ iconSizeVar }) => getIconSizeFromSizeVar(iconSizeVar)};
   }
 `;
-var IconButton = React3.forwardRef(
+var IconButton = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       styleVar,
@@ -2043,7 +2043,7 @@ var IconButton = React3.forwardRef(
       "isLoading",
       "type"
     ]);
-    const [isHovered, setIsHovered] = React3.useState(false);
+    const [isHovered, setIsHovered] = React.useState(false);
     const handleOnMouseEnter = (e) => {
       setIsHovered(true);
       onMouseEnter && onMouseEnter(e);
@@ -2110,9 +2110,9 @@ var StyledPopper = styled6__default.default.div`
   width: ${({ width }) => width != null ? width : "fit-content"};
   height: ${({ height }) => height && height};
 `;
-var PopperContext = React3.createContext(null);
+var PopperContext = React.createContext(null);
 var usePopper = () => {
-  const context = React3__namespace.useContext(PopperContext);
+  const context = React__namespace.useContext(PopperContext);
   if (context === null) {
     throw new Error("usePopper must be used within a PopperProvider");
   }
@@ -2128,7 +2128,7 @@ function assignRef(ref, value) {
   }
   try {
     ref.current = value;
-  } catch (error) {
+  } catch (_error) {
     throw new Error(`Cannot assign value '${String(value)}' to ref '${String(ref)}'`);
   }
 }
@@ -2140,7 +2140,7 @@ function mergeRefs(...refs) {
   };
 }
 function useMergeRefs2(...refs) {
-  return React3.useMemo(() => mergeRefs(...refs), refs);
+  return React.useMemo(() => mergeRefs(...refs), refs);
 }
 var Popper = ({
   placement,
@@ -2150,7 +2150,7 @@ var Popper = ({
   middlewares,
   children
 }) => {
-  const [isOpen, setIsOpen] = React3.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
   const _a = reactDom.useFloating({
     strategy,
     placement,
@@ -2171,18 +2171,18 @@ var Popper = ({
     }
   );
 };
-exports.PopperTrigger = React3.forwardRef(
+exports.PopperTrigger = React.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, isOpen = false } = _b, rest = __objRest(_b, ["children", "isOpen"]);
     const { setReference, setIsOpen } = usePopper();
     const refs = useMergeRefs2(ref, setReference);
-    React3.useEffect(() => {
+    React.useEffect(() => {
       setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
     return /* @__PURE__ */ jsxRuntime.jsx(StyledPopper, __spreadProps(__spreadValues({ ref: refs, "data-shoplflow": "Popper" }, rest), { children }));
   }
 );
-exports.PopperPortal = React3.forwardRef(
+exports.PopperPortal = React.forwardRef(
   ({ children, animation: initialAnimation, zIndex }, ref) => {
     const { floatingStyles, setFloating, isOpen } = usePopper();
     const animation2 = initialAnimation != null ? initialAnimation : fadeInOut;
@@ -2212,7 +2212,7 @@ Popper.Portal = exports.PopperPortal;
 exports.Popper = Popper;
 
 // src/components/Popper/version.ts
-exports.POPPER_VERSION = "2.0.0";
+exports.POPPER_VERSION = "2.0.1";
 var Container2 = styled6__default.default.div`
   display: flex;
   align-items: center;
@@ -2241,7 +2241,7 @@ var IconButton2 = styled6__default.default.button`
   }
 `;
 var MUNUS_BUTTON_SYMBOL_KEY = Symbol("SHOPLFLOW_MUNUS_BUTTON");
-var MinusButton = React3.forwardRef((_a, ref) => {
+var MinusButton = React.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(
@@ -2363,7 +2363,7 @@ var Container3 = styled6__default.default.button`
   background-color: transparent;
 `;
 exports.CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
-var Checkbox = React3.forwardRef(
+var Checkbox = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       defaultSelected,
@@ -2387,7 +2387,7 @@ var Checkbox = React3.forwardRef(
       "id"
     ]);
     const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
-    const [isHovered, toggleHovered] = React3.useState(false);
+    const [isHovered, toggleHovered] = React.useState(false);
     const handleMouseLeave = (e) => {
       toggleHovered(false);
       onMouseLeave && onMouseLeave(e);
@@ -2448,9 +2448,8 @@ exports.CheckboxStyleVariants = {
   LINE: "LINE"
 };
 var getSelectedStyle = (isHovered) => {
-  const domain = exports.getDomain();
-  const selectedStrokeColor = domain === "hada" ? exports.colorTokens.neutral700 : exports.colorTokens.primary300;
-  const selectedHoverStrokeColor = domain === "hada" ? exports.colorTokens.neutral700 : exports.colorTokens.primary400;
+  const selectedStrokeColor = exports.colorTokens.primary300;
+  const selectedHoverStrokeColor = exports.colorTokens.primary400;
   return react$1.css`
     & > svg > circle {
       stroke: ${selectedStrokeColor};
@@ -2497,7 +2496,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] = React.useState(false);
   const handleMouseLeave = (e) => {
     toggleHovered(false);
     onMouseLeave && onMouseLeave(e);
@@ -2529,7 +2528,7 @@ Radio[exports.RADIO_SYMBOL_KEY] = true;
 exports.Radio = Radio;
 
 // src/components/ControlButtons/version.ts
-exports.CONTROL_BUTTONS_VERSION = "2.0.0";
+exports.CONTROL_BUTTONS_VERSION = "2.0.2";
 
 // src/components/Menu/Menu.styled.ts
 var getStylesBySizeVar = (sizeVar) => {
@@ -2607,7 +2606,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 ? React__namespace.default.cloneElement(leftSource, __spreadProps(__spreadValues({}, rest), {
     isSelected
   })) : leftSource;
   const handleOnClick = (e) => {
@@ -2641,10 +2640,10 @@ exports.MenuSizeVariants = {
 };
 
 // src/components/Menu/version.ts
-exports.MENU_VERSION = "2.0.0";
-exports.DropdownButtonContext = React3.createContext(null);
+exports.MENU_VERSION = "2.0.1";
+exports.DropdownButtonContext = React.createContext(null);
 exports.useDropdownButtonContext = () => {
-  const context = React3.useContext(exports.DropdownButtonContext);
+  const context = React.useContext(exports.DropdownButtonContext);
   if (!context) {
     throw new Error("DropdownButtonContext must be used within a DropdownButton component");
   }
@@ -2686,14 +2685,14 @@ exports.StyledIcon = styled6__default.default.svg`
     fill: ${({ color }) => color && exports.colorTokens[color]};
   }
 `;
-var Icon = React3.forwardRef((_a, ref) => {
+var Icon = React.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;
 
 // src/components/Icon/version.ts
-exports.ICON_VERSION = "2.0.0";
+exports.ICON_VERSION = "2.0.1";
 var DropdownButtonMenu = (_a) => {
   var _b = _a, { onClick, children } = _b, rest = __objRest(_b, ["onClick", "children"]);
   const { setIsOpen } = exports.useDropdownButtonContext();
@@ -2731,7 +2730,7 @@ var DropdownButton = (_a) => {
     "styleVar",
     "floatingZIndex"
   ]);
-  const selector = React3.useRef(`shoplflow-${crypto.randomUUID()}-dropdown-button`).current;
+  const selector = React.useRef(`shoplflow-${crypto.randomUUID()}-dropdown-button`).current;
   const [isOpen, setIsOpen] = utils.useOutsideClick({
     selector: `.${selector}`,
     useOutsideScroll: true
@@ -2880,9 +2879,9 @@ var StyledSplitButton = styled6__default.default.button`
   ${({ sizeVar }) => getStyleBySizeVar3(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-exports.SplitButtonContext = React3.createContext(null);
+exports.SplitButtonContext = React.createContext(null);
 exports.useSplitButtonContext = () => {
-  const context = React3.useContext(exports.SplitButtonContext);
+  const context = React.useContext(exports.SplitButtonContext);
   if (!context) {
     throw new Error("SplitButtonContext must be used within a SplitButton component");
   }
@@ -2933,7 +2932,7 @@ var SplitButton = (_a) => {
     "lineClamp",
     "text"
   ]);
-  const selector = React3.useRef(`shoplflow-${crypto.randomUUID()}-split-button`).current;
+  const selector = React.useRef(`shoplflow-${crypto.randomUUID()}-split-button`).current;
   const [isOpen, setIsOpen] = utils.useOutsideClick({
     selector: `.${selector}`,
     useOutsideScroll: true
@@ -3013,7 +3012,7 @@ exports.SplitButtonStyleVariants = {
 };
 
 // src/components/Buttons/version.ts
-exports.BUTTONS_VERSION = "2.0.3";
+exports.BUTTONS_VERSION = "2.0.4";
 var informationStyle = react$1.css`
   background: ${exports.colorTokens.neutral400_5};
   & > svg > circle {
@@ -3090,7 +3089,7 @@ var BulletHelperText = (_a) => {
 };
 var NormalHelperText = (_a) => {
   var _b = _a, { color, position, children } = _b, rest = __objRest(_b, ["color", "position", "children"]);
-  const getPositionStyle = React3.useCallback(() => {
+  const getPositionStyle = React.useCallback(() => {
     switch (position) {
       case "PRESET-TOP":
         return {
@@ -3147,7 +3146,7 @@ exports.CalloutTypes = {
 };
 
 // src/components/Callout/version.ts
-exports.CALLOUT_VERSION = "2.1.4";
+exports.CALLOUT_VERSION = "2.1.5";
 var StyledDropdown = styled6__default.default.div`
   width: ${({ width }) => width};
 `;
@@ -3160,9 +3159,9 @@ var StyledDropdownContent = styled6__default.default.div`
   border-radius: 6px;
   box-shadow: ${exports.boxShadowTokens.dropShadow};
 `;
-var DropdownContext = React3.createContext(null);
+var DropdownContext = React.createContext(null);
 var useDropdown = () => {
-  const context = React3.useContext(DropdownContext);
+  const context = React.useContext(DropdownContext);
   if (context === null) {
     throw new Error("useDropdown must be used within a DropdownProvider");
   }
@@ -3329,7 +3328,7 @@ var DropdownButtonIcon = styled6__default.default.div`
 
   ${({ disabled }) => getDisabledStyle2(disabled)};
 `;
-var DropdownTriggerButton = React3.forwardRef(
+var DropdownTriggerButton = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       width = "100%",
@@ -3355,7 +3354,7 @@ var DropdownTriggerButton = React3.forwardRef(
       "onClear"
     ]);
     const { isOpen, setIsOpen } = useDropdown();
-    const [isHovered, setIsHovered] = React3.useState(false);
+    const [isHovered, setIsHovered] = React.useState(false);
     const handleOnClick = (e) => {
       if (!disabled) {
         onClick && onClick(e);
@@ -3381,8 +3380,8 @@ var DropdownTriggerButton = React3.forwardRef(
       }
       return "neutral700";
     };
-    const LeftSourceClone = leftSource ? React3.cloneElement(leftSource, __spreadProps(__spreadValues({}, leftSource.props), { disabled })) : leftSource;
-    const RightSourceClone = rightSource ? React3.cloneElement(rightSource, __spreadProps(__spreadValues({}, rightSource.props), { disabled })) : rightSource;
+    const LeftSourceClone = leftSource ? React.cloneElement(leftSource, __spreadProps(__spreadValues({}, leftSource.props), { disabled })) : leftSource;
+    const RightSourceClone = rightSource ? React.cloneElement(rightSource, __spreadProps(__spreadValues({}, rightSource.props), { disabled })) : rightSource;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       StyledDropdownButtonWrapper,
       {
@@ -3480,10 +3479,10 @@ var Dropdown = ({
   offset: offset4 = 4,
   placement
 }) => {
-  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] = React.useState(null);
+  const [size2, setSize] = React.useState({ width: 0, height: 0 });
+  const [isOpen, setIsOpen] = React.useState(false);
+  React.useEffect(() => {
     if (triggerRef) {
       setSize({
         width: triggerRef.offsetWidth,
@@ -3491,7 +3490,7 @@ var Dropdown = ({
       });
     }
   }, [triggerRef, width]);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (initialIsOpen === void 0) {
       return;
     }
@@ -3524,7 +3523,7 @@ exports.DropdownOptionVariants = {
 };
 
 // src/components/Dropdown/version.ts
-exports.DROPDOWN_VERSION = "2.0.0";
+exports.DROPDOWN_VERSION = "2.0.1";
 var StyledList = styled6__default.default.li`
   display: flex;
   flex-direction: row;
@@ -3548,7 +3547,7 @@ var StyledText2Rows = styled6__default.default.div`
 `;
 var List = (_a) => {
   var _b = _a, { children, leftSource, rightSource, style } = _b, rest = __objRest(_b, ["children", "leftSource", "rightSource", "style"]);
-  const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadValues({}, rest)) : leftSource;
+  const LeftSourceClone = leftSource ? React__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.");
   }
@@ -3568,7 +3567,7 @@ List.Text2Rows = exports.Text2Rows;
 exports.List = List;
 
 // src/components/List/version.ts
-exports.LIST_VERSION = "2.0.1";
+exports.LIST_VERSION = "2.0.2";
 var getTypographyBySize = (size2) => {
   switch (size2) {
     case "XS":
@@ -3698,7 +3697,7 @@ exports.TagSizeVariants = {
 };
 
 // src/components/Tag/version.ts
-exports.TAG_VERSION = "2.0.0";
+exports.TAG_VERSION = "2.0.1";
 var StyledTree = styled6__default.default(framerMotion.motion.ul)`
   display: flex;
   flex-direction: column;
@@ -3755,8 +3754,8 @@ var AnimateKey = {
 };
 var Tree = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  const [isMounted, setIsMounted] = React3__namespace.default.useState(false);
-  React3.useEffect(() => {
+  const [isMounted, setIsMounted] = React__namespace.default.useState(false);
+  React.useEffect(() => {
     setIsMounted(true);
   }, []);
   if (!isMounted) {
@@ -3786,14 +3785,14 @@ exports.TreeItem = (_a) => {
     "disabled",
     "onClick"
   ]);
-  const [isOpened, setIsOpened] = React3__namespace.default.useState(initialIsOpen != null ? initialIsOpen : false);
-  const uniqueId = React3.useId();
-  const CloneChildren = React3__namespace.default.Children.map(children, (child) => {
-    if (!React3__namespace.default.isValidElement(child)) {
+  const [isOpened, setIsOpened] = React__namespace.default.useState(initialIsOpen != null ? initialIsOpen : false);
+  const uniqueId = React.useId();
+  const CloneChildren = React__namespace.default.Children.map(children, (child) => {
+    if (!React__namespace.default.isValidElement(child)) {
       return child;
     }
     if (child.type[exports.TREE_SYMBOL_KEY]) {
-      return React3__namespace.default.cloneElement(child, {
+      return React__namespace.default.cloneElement(child, {
         depth: depth + 1
       });
     }
@@ -3809,18 +3808,18 @@ exports.TreeItem = (_a) => {
     }
     return onClick(e);
   };
-  const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadValues(__spreadValues({
+  const LeftSourceClone = leftSource ? React__namespace.default.cloneElement(leftSource, __spreadValues(__spreadValues({
     disabled,
     onClick
   }, rest), leftSource.props)) : leftSource;
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen !== void 0) {
       setIsOpened(isOpen);
     }
   }, [isOpen]);
   const isLastTree = !children && depth > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(StyledTreeItemWrapper, { hasBackground: isOpened || isLastTree, children: [
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React.createElement(
       StyledTreeItem,
       __spreadValues(__spreadProps(__spreadValues({
         disabled,
@@ -3858,7 +3857,7 @@ Tree.Item = exports.TreeItem;
 exports.Tree = Tree;
 
 // src/components/Tree/version.ts
-exports.TREE_VERSION = "2.0.0";
+exports.TREE_VERSION = "2.0.1";
 var StyledInput = styled6__default.default.input`
   padding: ${({ sizeVar }) => sizeVar === "S" ? "0 8px" : "4px 12px"};
   background-color: transparent;
@@ -3937,7 +3936,7 @@ var TextCounter = ({ currentLength, maxLength, isError }) => {
   ] });
 };
 var TextCounter_default = TextCounter;
-React3.createContext({
+React.createContext({
   domain: "SHOPL",
   handleToggleTheme: () => {
   }
@@ -4032,7 +4031,7 @@ var getNumberLimitRange = (value, min, max) => {
   }
   return String(value);
 };
-var Input = React3.forwardRef(
+var Input = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onFocus,
@@ -4085,20 +4084,20 @@ var Input = React3.forwardRef(
       "rightSourceStyle",
       "leftSource"
     ]);
-    const [text, setText] = React3.useState("");
-    const [isFocused, setIsFocused] = React3.useState(Boolean(initIsFocused));
-    const [type, setType] = React3.useState(initialType);
-    const [isHovered, setIsHovered] = React3.useState(false);
-    const uniqueId = React3.useId();
-    const inputRef = React3__namespace.default.useRef(null);
+    const [text, setText] = React.useState("");
+    const [isFocused, setIsFocused] = React.useState(Boolean(initIsFocused));
+    const [type, setType] = React.useState(initialType);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const uniqueId = React.useId();
+    const inputRef = React__namespace.default.useRef(null);
     const refs = useMergeRefs2(ref, inputRef);
-    const convertToString = React3.useCallback((value2) => {
+    const convertToString = React.useCallback((value2) => {
       if (typeof value2 !== "number") {
         return typeof value2 === "string" ? value2 : value2.join("");
       }
       return String(value2);
     }, []);
-    const sliceText = React3.useCallback(
+    const sliceText = React.useCallback(
       (value2) => {
         if (maxLength && value2.length > maxLength) {
           return value2.slice(0, maxLength);
@@ -4154,14 +4153,14 @@ var Input = React3.forwardRef(
         setType("password");
       }
     };
-    React3.useEffect(() => {
+    React.useEffect(() => {
       if (defaultValue !== void 0) {
         const convertString = convertToString(defaultValue);
         const slicedText = sliceText(convertString);
         setText(slicedText);
       }
     }, [convertToString, defaultValue, maxLength, sliceText]);
-    React3.useEffect(() => {
+    React.useEffect(() => {
       var _a2;
       if (value !== void 0) {
         const convertString = convertToString(value);
@@ -4170,11 +4169,11 @@ var Input = React3.forwardRef(
         setText(slicedText);
       }
     }, [convertToString, maxLength, sliceText, value]);
-    React3.useEffect(() => {
+    React.useEffect(() => {
       setType(initialType);
     }, [initialType]);
     const height = sizeVar === "M" ? "40px" : "32px";
-    React3.useEffect(() => {
+    React.useEffect(() => {
       if (typeof initIsFocused === "undefined") {
         return;
       }
@@ -4271,7 +4270,7 @@ var StyledInputButtonContent = styled6__default.default.input`
     color: ${exports.colorTokens.neutral350};
   }
 `;
-var InputButton = React3.forwardRef(
+var InputButton = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -4299,10 +4298,10 @@ var InputButton = React3.forwardRef(
       "width"
     ]);
     var _a2, _b2;
-    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) => {
+    const [text, setText] = React.useState((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
+    const [isHovered, setIsHovered] = React.useState(false);
+    const prevValue = React.useRef((_b2 = value != null ? value : defaultValue) != null ? _b2 : "");
+    const convertToString = React.useCallback((value2) => {
       if (typeof value2 !== "number") {
         return typeof value2 === "string" ? value2 : value2.join("");
       }
@@ -4327,7 +4326,7 @@ var InputButton = React3.forwardRef(
     const handleOnMouseLeave = () => {
       setIsHovered(false);
     };
-    React3.useEffect(() => {
+    React.useEffect(() => {
       if (prevValue.current === value) {
         return;
       }
@@ -4337,7 +4336,7 @@ var InputButton = React3.forwardRef(
         prevValue.current = convertString;
       }
     }, [convertToString, value]);
-    React3.useEffect(() => {
+    React.useEffect(() => {
       if (prevValue.current === value) {
         return;
       }
@@ -4389,9 +4388,9 @@ var StyledTextarea = styled6__default.default.textarea`
     color: ${exports.colorTokens.neutral350};
   }
 `;
-var TextAreaContext = React3.createContext(null);
+var TextAreaContext = React.createContext(null);
 var useTextArea = () => {
-  const context = React3.useContext(TextAreaContext);
+  const context = React.useContext(TextAreaContext);
   if (!context) {
     throw new Error("useTextArea must be used within a TextAreaProvider");
   }
@@ -4404,7 +4403,7 @@ var MaxLength = () => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(StackContainer, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }) });
 };
-var TextArea = React3.forwardRef(
+var TextArea = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -4443,9 +4442,9 @@ var TextArea = React3.forwardRef(
       "leftSource",
       "rightSource"
     ]);
-    const [text, setText] = React3.useState("");
-    const [isFocused, setIsFocused] = React3.useState(false);
-    const [isHovered, setIsHovered] = React3.useState(false);
+    const [text, setText] = React.useState("");
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [isHovered, setIsHovered] = React.useState(false);
     const handleOnMouseEnter = () => {
       setIsHovered(true);
     };
@@ -4470,7 +4469,7 @@ var TextArea = React3.forwardRef(
       }
       return String(value2);
     };
-    React3.useEffect(() => {
+    React.useEffect(() => {
       if (defaultValue) {
         const convertString = convertToString(defaultValue);
         if (maxLength && convertString.length > maxLength) {
@@ -4479,7 +4478,7 @@ var TextArea = React3.forwardRef(
         setText(convertString);
       }
     }, [defaultValue, maxLength]);
-    React3.useEffect(() => {
+    React.useEffect(() => {
       if (value) {
         const convertString = convertToString(value);
         if (maxLength && convertString.length > maxLength) {
@@ -4488,7 +4487,7 @@ var TextArea = React3.forwardRef(
         setText(convertToString(value));
       }
     }, [maxLength, value]);
-    const uniqueId = React3.useId();
+    const uniqueId = React.useId();
     const contextValue = {
       text,
       maxLength
@@ -4587,7 +4586,7 @@ var SelectInputButton = (_a) => {
     "rightSource",
     "sizeVar"
   ]);
-  const [isHovered, setIsHovered] = React3.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
   const handleOnClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -4645,7 +4644,7 @@ var SelectInputButton = (_a) => {
 exports.SelectInputButton = SelectInputButton;
 
 // src/components/Inputs/version.ts
-exports.INPUTS_VERSION = "2.0.0";
+exports.INPUTS_VERSION = "2.0.1";
 var StyledTooltipContent = styled6__default.default.div`
   background-color: ${exports.colorTokens.neutral700};
   padding: 4px 8px;
@@ -4678,14 +4677,14 @@ var Tooltip = (_a) => {
     "triggerWidth",
     "portalRef"
   ]);
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const showHandler = React3.useCallback(() => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const showHandler = React.useCallback(() => {
     if (open === void 0) {
       setIsOpen(true);
     }
     onOpenChange == null ? void 0 : onOpenChange(true);
   }, [open, onOpenChange]);
-  const hideHandler = React3.useCallback(() => {
+  const hideHandler = React.useCallback(() => {
     if (open === void 0) {
       setIsOpen(false);
     }
@@ -4723,10 +4722,10 @@ Tooltip.Content = TooltipContent;
 exports.Tooltip = Tooltip;
 
 // src/components/Tooltip/version.ts
-exports.TOOLTIP_VERSION = "2.0.0";
-exports.TabsContext = React3.createContext(null);
+exports.TOOLTIP_VERSION = "2.0.1";
+exports.TabsContext = React.createContext(null);
 exports.useTabs = () => {
-  const context = React3.useContext(exports.TabsContext);
+  const context = React.useContext(exports.TabsContext);
   if (context === null) {
     throw new Error("useTabs should be used in Tabs");
   }
@@ -4903,12 +4902,12 @@ var Tab = (_a) => {
     "activeColor"
   ]);
   const { activeTab, setActiveTab } = exports.useTabs();
-  const [isHover, setIsHover] = React3.useState(false);
+  const [isHover, setIsHover] = React.useState(false);
   const isActive = value === activeTab;
-  const hoverHandler = React3.useCallback(() => {
+  const hoverHandler = React.useCallback(() => {
     setIsHover(true);
   }, []);
-  const unhoverHandler = React3.useCallback(() => {
+  const unhoverHandler = React.useCallback(() => {
     setIsHover(false);
   }, []);
   const clickHandler = (event) => {
@@ -4958,8 +4957,8 @@ var Tab = (_a) => {
   );
 };
 var Tabs = ({ children, initialTab, onChange }) => {
-  const [activeTab, setActiveTab] = React3.useState(initialTab);
-  React3.useEffect(() => {
+  const [activeTab, setActiveTab] = React.useState(initialTab);
+  React.useEffect(() => {
     if (!onChange || !activeTab) {
       return;
     }
@@ -4990,7 +4989,7 @@ exports.TabSizeVariants = {
 };
 
 // src/components/Tabs/version.ts
-exports.TABS_VERSION = "2.0.0";
+exports.TABS_VERSION = "2.0.1";
 var PaginationWrapper = styled6__default.default.div`
   display: flex;
   align-items: center;
@@ -5150,7 +5149,7 @@ Pagination.SizeSelector = PaginationSizeSelector_default;
 exports.Pagination = Pagination;
 
 // src/components/Pagination/version.ts
-exports.PAGINATION_VERSION = "2.0.0";
+exports.PAGINATION_VERSION = "2.0.1";
 var getLabelStyleBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "S": {
@@ -5221,9 +5220,9 @@ var StyledToggleInnerInput = styled6__default.default.input`
   opacity: 0;
   visibility: hidden;
 `;
-var ToggleButtonContext = React3.createContext(null);
+var ToggleButtonContext = React.createContext(null);
 var useToggleButton = () => {
-  const context = React3.useContext(ToggleButtonContext);
+  const context = React.useContext(ToggleButtonContext);
   if (!context) {
     throw new Error("ToggleInnerButton \uCEF4\uD3EC\uB10C\uD2B8\uB294 ToggleButton \uB0B4\uBD80\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC8FC\uC138\uC694");
   }
@@ -5249,12 +5248,12 @@ var ToggleButton = (_a) => {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonContext.Provider, { value: { fixedWidth, targetName, onChange, selectedValue, sizeVar, disabled }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledToggleButton, __spreadProps(__spreadValues({ "data-shoplflow": "ToggleButton", "aria-disabled": disabled }, rest), { children })) });
 };
-var ToggleInnerRadio = React3.forwardRef(
+var ToggleInnerRadio = React.forwardRef(
   (_a, ref) => {
     var _b = _a, { label, disabled: itemDisabled, value, id } = _b, rest = __objRest(_b, ["label", "disabled", "value", "id"]);
     const { fixedWidth, onChange, targetName, selectedValue, sizeVar, disabled: groupDisabled } = useToggleButton();
     const disabled = groupDisabled || itemDisabled;
-    const labelRef = React3.useRef(null);
+    const labelRef = React.useRef(null);
     let selected = false;
     if (selectedValue && selectedValue === value) {
       selected = true;
@@ -5321,7 +5320,7 @@ exports.ToggleButtonSizeVariants = {
 };
 
 // src/components/ToggleButton/version.ts
-exports.TOGGLE_BUTTON_VERSION = "2.0.1";
+exports.TOGGLE_BUTTON_VERSION = "2.0.2";
 var SmallStyledDayDatepickerWrapper = styled6__default.default.div`
   display: flex;
   width: 280px;
@@ -5905,18 +5904,18 @@ var OptionListItem = styled6__default.default.li`
 `;
 var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeight, onClick }) => {
   var _a;
-  const optionListRef = React3.useRef([]);
-  const parentRef = React3.useRef(null);
-  const simpleBarContentRef = React3.useRef(null);
-  const [isAllRefMounted, setIsAllRefMounted] = React3.useState(false);
+  const optionListRef = React.useRef([]);
+  const parentRef = React.useRef(null);
+  const simpleBarContentRef = React.useRef(null);
+  const [isAllRefMounted, setIsAllRefMounted] = React.useState(false);
   const [isOpened, setIsOpened] = utils.useOutsideClick({
     selector: `.${parentClassName}` || ""
   });
-  React3.useEffect(() => {
+  React.useEffect(() => {
     setIsOpened(isOpened);
   }, []);
   const height = Math.min(((_a = optionList == null ? void 0 : optionList.length) != null ? _a : 0) * 32, Number(parseInt(maxHeight || "0")));
-  React3.useEffect(() => {
+  React.useEffect(() => {
     var _a2, _b, _c, _d, _e, _f, _g;
     if (!isAllRefMounted || !activeValue || !maxHeight) {
       return;
@@ -5974,7 +5973,7 @@ var YearStepper = ({
   });
   const startYear = minDate ? minDate.getFullYear() : 2e3;
   const endYear = maxDate ? maxDate.getFullYear() : 2100;
-  const OptionList2 = React3.useMemo(
+  const OptionList2 = React.useMemo(
     () => Array.from({ length: endYear - startYear + 1 }).fill(0).map((_, index) => ({ value: startYear + index, label: `${startYear + index}` })).sort((a, b) => b.value - a.value),
     [startYear, endYear]
   );
@@ -6322,14 +6321,14 @@ var MonthDatepicker = ({
   onlySingleMonth,
   sizeVar = "M"
 }) => {
-  const [currentDate, setCurrentDate] = React3.useState(initStartDate || /* @__PURE__ */ new Date());
-  const [selectedStartMonthAndYear, setSelectedStartMonthAndYear] = React3.useState(
+  const [currentDate, setCurrentDate] = React.useState(initStartDate || /* @__PURE__ */ new Date());
+  const [selectedStartMonthAndYear, setSelectedStartMonthAndYear] = React.useState(
     initStartDate ? [initStartDate.getMonth() + 1, initStartDate.getFullYear()] : null
   );
-  const [selectedEndMonthAndYear, setSelectedEndMonthAndYear] = React3.useState(
+  const [selectedEndMonthAndYear, setSelectedEndMonthAndYear] = React.useState(
     initEndDate ? [initEndDate.getMonth() + 1, initEndDate.getFullYear()] : null
   );
-  const Months = React3.useMemo(() => {
+  const Months = React.useMemo(() => {
     return Array.from({ length: 12 }).map((_, index) => index + 1);
   }, []);
   const clickMonth = (month, year) => {
@@ -6555,7 +6554,7 @@ var AnnualDatepicker = ({
   handleYearClick,
   disabledYears
 }) => {
-  const [selectedYear, setSelectedYear] = React3.useState(currentYear || (/* @__PURE__ */ new Date()).getFullYear());
+  const [selectedYear, setSelectedYear] = React.useState(currentYear || (/* @__PURE__ */ new Date()).getFullYear());
   const Years = Array.from({ length: endYear - startYear + 1 }).map((_, index) => startYear + index);
   const clickYear = (year) => {
     setSelectedYear(year);
@@ -6714,15 +6713,15 @@ var WeekDatepicker = ({
   onlySingleWeek
 }) => {
   const year = initStartDate ? dateFns.getISOWeekYear(initStartDate) : dateFns.getISOWeekYear(/* @__PURE__ */ new Date());
-  const [currentDate, setCurrentDate] = React3.useState(new Date(year, 5, 5));
-  const [selectedStartWeekAndYear, setSelectedStartWeekAndYear] = React3.useState(
+  const [currentDate, setCurrentDate] = React.useState(new Date(year, 5, 5));
+  const [selectedStartWeekAndYear, setSelectedStartWeekAndYear] = React.useState(
     initStartDate ? [dateFns.getISOWeek(initStartDate || /* @__PURE__ */ new Date()), dateFns.getISOWeekYear(initStartDate || /* @__PURE__ */ new Date())] : null
   );
-  const [selectedEndWeekAndYear, setSelectedEndWeekAndYear] = React3.useState(
+  const [selectedEndWeekAndYear, setSelectedEndWeekAndYear] = React.useState(
     initEndDate ? [dateFns.getISOWeek(initEndDate || /* @__PURE__ */ new Date()), dateFns.getISOWeekYear(initEndDate || /* @__PURE__ */ new Date())] : null
   );
   const selectedYear = currentDate.getFullYear();
-  const Years = React3.useMemo(() => {
+  const Years = React.useMemo(() => {
     return Array.from({ length: getWeeksInYear(selectedYear) }).map((_, index) => {
       return String(index + 1).padStart(2, "0");
     });
@@ -6879,7 +6878,7 @@ var WeekDatepicker = ({
 exports.WeekDatepicker = WeekDatepicker;
 
 // src/components/Datepickers/version.ts
-exports.DATEPICKERS_VERSION = "2.0.2";
+exports.DATEPICKERS_VERSION = "2.0.3";
 var StyledNumberCombobox = styled6__default.default.div``;
 var IconWrapper2 = styled6__default.default(framerMotion.motion.div)`
   display: flex;
@@ -6916,8 +6915,8 @@ var NumberCombobox = (_a) => {
     "className",
     "floatingZIndex"
   ]);
-  const selector = React3.useRef(`shoplflow-${crypto.randomUUID()}-number-combobox`).current;
-  const inputRef = React3.useRef(null);
+  const selector = React.useRef(`shoplflow-${crypto.randomUUID()}-number-combobox`).current;
+  const inputRef = React.useRef(null);
   const [isOpen, setIsOpen] = utils.useOutsideClick({
     selector: `.${selector}`,
     useOutsideScroll: true
@@ -7073,7 +7072,7 @@ exports.NumberComboboxSizeVariants = {
 };
 
 // src/components/Comboboxs/version.ts
-exports.COMBOBOXS_VERSION = "2.0.0";
+exports.COMBOBOXS_VERSION = "2.0.1";
 var animation = react$1.keyframes`
   0% {
     transform: translateX(-100%);
@@ -7124,7 +7123,7 @@ var Skeleton = ({ styleVar = "rectangle", width = "50px", height = "20px" }) =>
 exports.Skeleton = Skeleton;
 
 // src/components/Skeleton/version.ts
-exports.SKELETON_VERSION = "2.0.0";
+exports.SKELETON_VERSION = "2.0.1";
 
 // src/components/Slider/Slider.types.ts
 exports.SLIDER_Z_INDEX = {
@@ -7300,8 +7299,8 @@ var useSlider = ({ bounds, step, range, handleRange, isDisabled = false }) => {
   const { min, max } = bounds;
   validateRange({ min, max, range });
   validateStep({ min, max, step });
-  const trackRef = React3.useRef(null);
-  const updateRange = React3.useCallback(
+  const trackRef = React.useRef(null);
+  const updateRange = React.useCallback(
     (index, newValue) => {
       const newRange = [range.min, range.max];
       if (index === 0) {
@@ -7313,7 +7312,7 @@ var useSlider = ({ bounds, step, range, handleRange, isDisabled = false }) => {
     },
     [range, handleRange]
   );
-  const handleMouseDown = React3.useCallback(
+  const handleMouseDown = React.useCallback(
     (index) => (e) => {
       if (isDisabled) {
         return;
@@ -7338,7 +7337,7 @@ var useSlider = ({ bounds, step, range, handleRange, isDisabled = false }) => {
     },
     [isDisabled, min, max, step, updateRange]
   );
-  const handleClickTrack = React3.useCallback(
+  const handleClickTrack = React.useCallback(
     (e) => {
       if (isDisabled || !trackRef.current) {
         return;
@@ -7357,7 +7356,7 @@ var useSlider = ({ bounds, step, range, handleRange, isDisabled = false }) => {
     },
     [isDisabled, min, max, step, range, updateRange]
   );
-  const positions = React3.useMemo(() => {
+  const positions = React.useMemo(() => {
     const startPosition = getPositionPercentage(0, [range.min, range.max], { min, max });
     const endPosition = getPositionPercentage(1, [range.min, range.max], { min, max });
     const width = endPosition - startPosition;
@@ -7416,9 +7415,9 @@ var Slider = ({
 exports.Slider = Slider;
 
 // src/components/Slider/version.ts
-exports.SLIDER_VERSION = "2.0.0";
-var SearchBarContext = React3.createContext({});
-var useSearchBarContext = () => React3.useContext(SearchBarContext);
+exports.SLIDER_VERSION = "2.0.1";
+var SearchBarContext = React.createContext({});
+var useSearchBarContext = () => React.useContext(SearchBarContext);
 var SearchBarProvider = ({
   children,
   useFlexibleWidth,
@@ -7454,8 +7453,8 @@ var SearchBarInput = (_a) => {
     "maxLength"
   ]);
   const { useFlexibleWidth, isSelected } = useSearchBarContext();
-  const [text, setText] = React3.useState("");
-  const debouncedOnChange = React3.useRef(
+  const [text, setText] = React.useState("");
+  const debouncedOnChange = React.useRef(
     utils.debounce(
       (event) => {
         const newValue = event.target.value;
@@ -7482,11 +7481,11 @@ var SearchBarInput = (_a) => {
       debouncedOnChange(event);
     }
   };
-  const handleOnClear = React3.useCallback(() => {
+  const handleOnClear = React.useCallback(() => {
     setText("");
     onClear == null ? void 0 : onClear();
   }, [onClear]);
-  const handleKeyDown = React3.useCallback(
+  const handleKeyDown = React.useCallback(
     (event) => {
       if (type === "default" && event.key === "Enter") {
         onSearch == null ? void 0 : onSearch(text);
@@ -7494,7 +7493,7 @@ var SearchBarInput = (_a) => {
     },
     [onSearch, text, type]
   );
-  const handleIconClick = React3.useCallback(() => {
+  const handleIconClick = React.useCallback(() => {
     if (type === "default") {
       onSearch == null ? void 0 : onSearch(text);
     }
@@ -7613,10 +7612,10 @@ var SearchBar = (_a) => {
     selector: ".search-bar",
     onClose: () => setIsSelected(false)
   });
-  const handleContainerClick = React3.useCallback(() => {
+  const handleContainerClick = React.useCallback(() => {
     setIsSelected(true);
   }, [setIsSelected]);
-  const containerWidth = React3.useMemo(() => {
+  const containerWidth = React.useMemo(() => {
     if (!useFlexibleWidth) {
       return width;
     }
@@ -7642,7 +7641,7 @@ SearchBar.Category = SearchBarCategory;
 SearchBar.Input = SearchBarInput;
 
 // src/components/SearchBar/version.ts
-exports.SEARCH_BAR_VERSION = "2.0.0";
+exports.SEARCH_BAR_VERSION = "2.0.1";
 
 // src/components/SearchBar/index.ts
 exports.SearchBar = SearchBar;
@@ -7660,7 +7659,7 @@ var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
   height: 100%;
 `;
 var ModalPortal = () => {
-  const modal = React3.useContext(exports.ModalContext);
+  const modal = React.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, { zIndex: item.zIndex, children: /* @__PURE__ */ jsxRuntime.jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
     document.body