@shoplflow/base 0.46.16 → 0.46.18

package/dist/index.cjs

@@ -328,9 +328,6 @@ exports.AvatarSizeVariants = {
   XL: "XL"
 };
 
-// src/components/Avatar/version.ts
-exports.AVATAR_VERSION = "2.1.2";
-
 // src/styles/tokens.ts
 var fontWeightRegular = "var(--font-weight-regular)";
 var fontWeightMedium = "var(--font-weight-medium)";
@@ -606,9 +603,6 @@ exports.MotionStack = framerMotion.motion(Stack);
 exports.MotionStack.Vertical = framerMotion.motion(Stack.Vertical);
 exports.MotionStack.Horizontal = framerMotion.motion(Stack.Horizontal);
 exports.Stack = Stack;
-
-// src/components/Stack/version.ts
-exports.STACK_VERSION = "2.0.1";
 exports.StyledStackContainer = styled6__default.default.div`
   display: flex;
   width: ${({ width }) => width};
@@ -689,9 +683,6 @@ exports.MotionStackContainer = framerMotion.motion(StackContainer);
 exports.MotionStackContainer.Vertical = framerMotion.motion(StackContainer.Vertical);
 exports.MotionStackContainer.Horizontal = framerMotion.motion(StackContainer.Horizontal);
 exports.StackContainer = StackContainer;
-
-// src/components/StackContainer/version.ts
-exports.STACK_CONTAINER_VERSION = "2.0.1";
 var setEllipsis = (maxLines) => {
   return react$1.css`
     display: -webkit-box;
@@ -732,7 +723,8 @@ var Text = React.forwardRef(
       textAlign = "start",
       textOverflow,
       className,
-      as
+      as,
+      wordBreak = "keep-all"
     } = _b, rest = __objRest(_b, [
       "children",
       "typography",
@@ -742,7 +734,8 @@ var Text = React.forwardRef(
       "textAlign",
       "textOverflow",
       "className",
-      "as"
+      "as",
+      "wordBreak"
     ]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledText,
@@ -754,6 +747,7 @@ var Text = React.forwardRef(
         display,
         textAlign,
         textOverflow,
+        wordBreak,
         as
       }, rest), {
         "data-shoplflow": "Text",
@@ -763,9 +757,6 @@ var Text = React.forwardRef(
   }
 );
 exports.Text = Text;
-
-// src/components/Text/version.ts
-exports.TEXT_VERSION = "2.0.2";
 var MODAL_SIZE_XXS = 400;
 var MODAL_SIZE_XS = 500;
 var MODAL_SIZE_S = 560;
@@ -909,7 +900,7 @@ var FooterContainer = styled6__default.default.div`
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
-  padding: 16px 24px;
+  padding: ${({ padding }) => padding || "16px 24px"};
   gap: 12px;
   border-top: 1px solid ${exports.colorTokens.neutral300};
   background: ${exports.colorTokens.neutral0};
@@ -1012,8 +1003,8 @@ var ModalContainer = (_a) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: /* @__PURE__ */ jsxRuntime.jsx(ModalOptionContextProvider, { children: addPropInChildren }) }));
 };
 var ModalContainer_default = ModalContainer;
-var ModalFooter = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(FooterContainer, { children });
+var ModalFooter = ({ children, padding }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(FooterContainer, { padding, children });
 };
 ModalFooter[exports.MODAL_FOOTER_KEY] = true;
 var ModalFooter_default = ModalFooter;
@@ -1046,9 +1037,6 @@ var ScrollArea = React.forwardRef((_a, ref) => {
   ) });
 });
 exports.ScrollArea = ScrollArea;
-
-// src/components/ScrollArea/version.ts
-exports.SCROLL_AREA_VERSION = "2.0.1";
 var useModalOption = () => {
   const context = React.useContext(ModalOptionContext);
   if (!context) {
@@ -1295,9 +1283,6 @@ var ModalProvider = ({ children }) => {
 };
 var ModalProvider_default = ModalProvider;
 
-// src/components/Modal/version.ts
-exports.MODAL_VERSION = "2.0.1";
-
 // src/components/Modal/index.ts
 exports.Modal = {
   Container: ModalContainer_default,
@@ -1307,9 +1292,6 @@ exports.Modal = {
   Bottom: ModalBottom,
   Footer: ModalFooter_default
 };
-
-// src/components/BackDrop/version.ts
-exports.BACK_DROP_VERSION = "2.0.1";
 var getContainerStylesBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "S":
@@ -1469,9 +1451,6 @@ exports.SwitchSizeVariants = {
   M: "M"
 };
 
-// src/components/Switch/version.ts
-exports.SWITCH_VERSION = "2.0.1";
-
 // src/components/Chips/ChipToggle/ChipToggle.types.ts
 exports.ChipToggleStyleVariants = {
   SOLID: "SOLID"
@@ -1593,70 +1572,63 @@ var ChipToggle = (_a) => {
   );
 };
 exports.ChipToggle = ChipToggle;
-
-// src/utils/getNextColor.ts
-var getNextColor = (color, step = 1) => {
-  const colorName = color.replace(/[0-9]|_/g, "");
-  const colorTokenKeys = Object.keys(exports.colorTokens);
-  const findColorToken = colorTokenKeys.filter((colorToken) => colorToken.includes(colorName));
-  const extractNumbers = (str) => {
-    const formattedStr = str.replace(/_/g, ".");
-    const regex = /\d+(\.\d+)?/g;
-    const match = formattedStr.match(regex);
-    return match ? parseFloat(match[0]) : 0;
-  };
-  const sortColorToken = findColorToken.sort((a, b) => extractNumbers(a) - extractNumbers(b));
-  const currentIndex = sortColorToken.indexOf(color);
-  let newIndex = currentIndex;
-  let stepCount = 0;
-  while (stepCount < Math.abs(step)) {
-    newIndex += Math.sign(step);
-    if (newIndex < 0 || newIndex >= sortColorToken.length) {
-      break;
-    }
-    if (!sortColorToken[newIndex].endsWith("_5") && !sortColorToken[newIndex].endsWith("50")) {
-      stepCount++;
-    }
-  }
-  newIndex = Math.max(0, Math.min(newIndex, sortColorToken.length - 1));
-  return sortColorToken[newIndex];
-};
-
-// src/components/Chips/ChipButton/ChipButton.styled.ts
 var getLineTypographyBySizeVar2 = (sizeVar) => {
   switch (sizeVar) {
     case "XS":
       return "caption_400";
     case "S":
-      return "body3_400";
+      return "body2_400";
     default:
-      return "body3_400";
+      return "body2_400";
   }
 };
-var lineStyle = ({ color }) => react$1.css`
-  background: ${exports.colorTokens.neutral0};
-  border: 1px solid ${exports.colorTokens[color]};
-  border-radius: ${exports.borderRadiusTokens.borderRadius20};
-  &:hover {
-    border: 1px solid ${exports.colorTokens[getNextColor(color, 2)]};
-  }
-  & > span {
-    color: ${exports.colorTokens[getNextColor(color, 4)]};
-  }
-`;
+var defaultSelectedBackground = (sizeVar) => sizeVar === "XS" ? exports.colorTokens.neutral400_5 : exports.colorTokens.neutral150;
+var lineStyle = ({ sizeVar, $isSelected, $selectedBackground, $selectedBorderColor }) => {
+  const selectedBg = $selectedBackground ? exports.colorTokens[$selectedBackground] : defaultSelectedBackground(sizeVar);
+  const selectedBorder = $selectedBorderColor ? exports.colorTokens[$selectedBorderColor] : exports.colorTokens.neutral300;
+  return react$1.css`
+    border: 1px solid ${exports.colorTokens.neutral300};
+    border-radius: 999px;
+    background: ${exports.colorTokens.neutral0};
+
+    & > span {
+      color: ${exports.colorTokens.neutral400};
+    }
+
+    &:hover {
+      background: ${exports.colorTokens.neutral400_5};
+    }
+
+    ${$isSelected && react$1.css`
+      background: ${selectedBg};
+      border-color: ${selectedBorder};
+
+      & > span {
+        color: ${exports.colorTokens.neutral700};
+      }
+
+      &:hover {
+        background: ${selectedBg};
+        border-color: ${selectedBorder};
+      }
+    `}
+  `;
+};
 var getStyleBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "XS":
       return react$1.css`
-        padding: 4px 8px;
+        padding: 4px 6px;
       `;
     case "S":
       return react$1.css`
-        padding: 7px 12px;
+        min-height: 32px;
+        padding: 6px 10px;
       `;
     default:
       return react$1.css`
-        padding: 7px 12px;
+        min-height: 32px;
+        padding: 6px 10px;
       `;
   }
 };
@@ -1667,12 +1639,16 @@ var StyledChipButton = styled6__default.default.button`
   border: none;
   height: fit-content;
   width: fit-content;
-  gap: 4px;
+  gap: 2px;
+  box-sizing: border-box;
+  overflow: hidden;
   cursor: pointer;
   ${({ sizeVar }) => getStyleBySizeVar(sizeVar)};
   ${(props) => props.styleVar === "LINE" && lineStyle(props)};
   ${({ disabled }) => getDisabledStyle(disabled)};
-  background: ${({ background: background2 }) => background2 && exports.colorTokens[background2]};
+  ${({ background: background2 }) => background2 && react$1.css`
+      background: ${exports.colorTokens[background2]};
+    `}
 `;
 
 // src/components/Chips/ChipButton/ChipButton.types.ts
@@ -1689,36 +1665,85 @@ var ChipButton = (_a) => {
     color = "neutral200",
     sizeVar = exports.ChipButtonSizeVariants.S,
     text,
+    children,
+    leftSource,
+    rightSource,
     onClick = utils.noop,
-    disabled = false
+    disabled = false,
+    isSelected = false,
+    selectedBackground,
+    selectedBorderColor,
+    count
   } = _b, rest = __objRest(_b, [
     "styleVar",
     "color",
     "sizeVar",
     "text",
+    "children",
+    "leftSource",
+    "rightSource",
     "onClick",
-    "disabled"
+    "disabled",
+    "isSelected",
+    "selectedBackground",
+    "selectedBorderColor",
+    "count"
   ]);
   const handleOnClick = (e) => {
     !disabled && onClick(e);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     StyledChipButton,
     __spreadProps(__spreadValues({
       styleVar,
       color
     }, rest), {
+      $isSelected: isSelected,
+      $selectedBackground: selectedBackground,
+      $selectedBorderColor: selectedBorderColor,
       onClick: handleOnClick,
       disabled,
       "data-shoplflow": "ChipButton",
-      children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: getLineTypographyBySizeVar2(sizeVar), children: text })
+      children: [
+        leftSource,
+        children || /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: getLineTypographyBySizeVar2(sizeVar), children: text }),
+        !children && count && /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: getLineTypographyBySizeVar2(sizeVar), children: count }),
+        rightSource
+      ]
     })
   );
 };
 exports.ChipButton = ChipButton;
 
-// src/components/Chips/version.ts
-exports.CHIPS_VERSION = "2.0.1";
+// src/utils/getNextColor.ts
+var getNextColor = (color, step = 1) => {
+  const colorName = color.replace(/[0-9]|_/g, "");
+  const colorTokenKeys = Object.keys(exports.colorTokens);
+  const findColorToken = colorTokenKeys.filter((colorToken) => colorToken.includes(colorName));
+  const extractNumbers = (str) => {
+    const formattedStr = str.replace(/_/g, ".");
+    const regex = /\d+(\.\d+)?/g;
+    const match = formattedStr.match(regex);
+    return match ? parseFloat(match[0]) : 0;
+  };
+  const sortColorToken = findColorToken.sort((a, b) => extractNumbers(a) - extractNumbers(b));
+  const currentIndex = sortColorToken.indexOf(color);
+  let newIndex = currentIndex;
+  let stepCount = 0;
+  while (stepCount < Math.abs(step)) {
+    newIndex += Math.sign(step);
+    if (newIndex < 0 || newIndex >= sortColorToken.length) {
+      break;
+    }
+    if (!sortColorToken[newIndex].endsWith("_5") && !sortColorToken[newIndex].endsWith("50")) {
+      stepCount++;
+    }
+  }
+  newIndex = Math.max(0, Math.min(newIndex, sortColorToken.length - 1));
+  return sortColorToken[newIndex];
+};
+
+// src/components/Buttons/Button/Button.styled.tsx
 var getStyleByStyleVar = (styleVar, color, disabled) => {
   const domain = exports.getDomain();
   const secondaryBorderColor = domain === "hada" ? exports.colorTokens.hada150 : exports.colorTokens.neutral350;
@@ -2210,9 +2235,6 @@ exports.PopperPortal = React.forwardRef(
 Popper.Trigger = exports.PopperTrigger;
 Popper.Portal = exports.PopperPortal;
 exports.Popper = Popper;
-
-// src/components/Popper/version.ts
-exports.POPPER_VERSION = "2.0.1";
 var Container2 = styled6__default.default.div`
   display: flex;
   align-items: center;
@@ -2526,9 +2548,6 @@ var Radio = (_a) => {
 Radio[exports.RADIO_SYMBOL_KEY] = true;
 exports.Radio = Radio;
 
-// src/components/ControlButtons/version.ts
-exports.CONTROL_BUTTONS_VERSION = "2.0.3";
-
 // src/components/Menu/Menu.styled.ts
 var getStylesBySizeVar = (sizeVar) => {
   switch (sizeVar) {
@@ -2637,9 +2656,6 @@ exports.MenuSizeVariants = {
   S: "S",
   M: "M"
 };
-
-// src/components/Menu/version.ts
-exports.MENU_VERSION = "2.0.1";
 exports.DropdownButtonContext = React.createContext(null);
 exports.useDropdownButtonContext = () => {
   const context = React.useContext(exports.DropdownButtonContext);
@@ -2689,9 +2705,6 @@ var Icon = React.forwardRef((_a, ref) => {
   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.1";
 var DropdownButtonMenu = (_a) => {
   var _b = _a, { onClick, children } = _b, rest = __objRest(_b, ["onClick", "children"]);
   const { setIsOpen } = exports.useDropdownButtonContext();
@@ -3009,9 +3022,6 @@ exports.SplitButtonStyleVariants = {
   PRIMARY: "PRIMARY",
   SECONDARY: "SECONDARY"
 };
-
-// src/components/Buttons/version.ts
-exports.BUTTONS_VERSION = "2.0.4";
 var informationStyle = react$1.css`
   background: ${exports.colorTokens.neutral400_5};
   & > svg > circle {
@@ -3143,9 +3153,6 @@ exports.CalloutTypes = {
   CAUTION: "CAUTION",
   ALERT: "ALERT"
 };
-
-// src/components/Callout/version.ts
-exports.CALLOUT_VERSION = "2.1.5";
 var StyledDropdown = styled6__default.default.div`
   width: ${({ width }) => width};
 `;
@@ -3168,6 +3175,8 @@ var useDropdown = () => {
 };
 var getDropdownHeightBySizeVar = (size2) => {
   switch (size2) {
+    case "XS":
+      return "24px";
     case "M":
     case "L":
       return "40px";
@@ -3179,6 +3188,8 @@ var getDropdownHeightBySizeVar = (size2) => {
 };
 var getDropdownFontSizeBySizeVar = (size2) => {
   switch (size2) {
+    case "XS":
+      return "caption_400";
     case "L":
       return "body2_700";
     case "M":
@@ -3189,8 +3200,18 @@ var getDropdownFontSizeBySizeVar = (size2) => {
       return "body1_400";
   }
 };
-var getDropdownStyleBySizeVar = (size2) => {
+var getDropdownStyleBySizeVar = (size2, styleVar) => {
+  if (styleVar === "GHOST" && size2 === "S") {
+    return react$1.css`
+      padding-left: 8px;
+      padding-right: 4px;
+    `;
+  }
   switch (size2) {
+    case "XS":
+      return react$1.css`
+        padding: 0 2px 0 6px;
+      `;
     case "S":
       return react$1.css`
         padding: 0 8px;
@@ -3212,18 +3233,24 @@ var getDropdownStyleBySizeVar = (size2) => {
       `;
   }
 };
-var getDisabledStyle2 = (disabled) => {
+var getDisabledStyle2 = ({
+  disabled,
+  styleVar
+}) => {
   if (disabled) {
     return react$1.css`
       cursor: not-allowed;
-      background: ${exports.colorTokens.neutral100};
+      background: ${styleVar === "GHOST" ? "transparent" : exports.colorTokens.neutral100};
       svg > path {
-        fill: ${exports.colorTokens.neutral400} !important;
+        fill: ${exports.colorTokens.neutral350} !important;
       }
     `;
   }
 };
-var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar }) => {
+var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar, styleVar }) => {
+  if (styleVar === "GHOST") {
+    return "transparent";
+  }
   if (!disabled) {
     if (isError) {
       return exports.colorTokens.red300;
@@ -3240,7 +3267,14 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar
   }
   return exports.colorTokens.neutral300;
 };
-var getButtonWrapperStyleBySizeVar = ({ sizeVar, isFocused }) => {
+var getButtonWrapperStyleBySizeVar = ({ sizeVar, isFocused, isHovered, styleVar }) => {
+  if (styleVar === "GHOST") {
+    return react$1.css`
+      background-color: ${isHovered || isFocused ? exports.colorTokens.neutral400_5 : "transparent"};
+      border-width: 0;
+      border-radius: 6px;
+    `;
+  }
   switch (sizeVar) {
     case "L":
       return react$1.css`
@@ -3295,7 +3329,7 @@ var StyledDropdownButtonWrapper = styled6__default.default.div`
   width
 })};
   ${(props) => getButtonWrapperStyleBySizeVar(props)};
-  ${({ disabled }) => getDisabledStyle2(disabled)};
+  ${({ disabled, styleVar }) => getDisabledStyle2({ disabled, styleVar })};
 
   ${({ hasValue }) => getClearIconHoverStyle(hasValue)}
 `;
@@ -3309,8 +3343,8 @@ var StyledDropdownButton = styled6__default.default.button`
   height: 100%;
   cursor: pointer;
 
-  ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
-  ${({ disabled }) => getDisabledStyle2(disabled)};
+  ${({ sizeVar, styleVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar, styleVar)};
+  ${({ disabled, styleVar }) => getDisabledStyle2({ disabled, styleVar })};
 
   .dropdown-clear-icon {
     display: none;
@@ -3322,10 +3356,15 @@ var DropdownButtonIcon = styled6__default.default.div`
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  min-width: 22px;
+  ${({ sizeVar, styleVar }) => styleVar === "GHOST" ? react$1.css`
+          width: 18px;
+          min-width: 18px;
+        ` : react$1.css`
+          min-width: ${sizeVar === "XS" ? "18px" : "22px"};
+        `}
   height: 100%;
 
-  ${({ disabled }) => getDisabledStyle2(disabled)};
+  ${({ disabled, styleVar }) => getDisabledStyle2({ disabled, styleVar })};
 `;
 var DropdownTriggerButton = React.forwardRef(
   (_a, ref) => {
@@ -3333,6 +3372,7 @@ var DropdownTriggerButton = React.forwardRef(
       width = "100%",
       onClick,
       sizeVar = "M",
+      styleVar = "NORMAL",
       isError,
       placeholder,
       value,
@@ -3344,6 +3384,7 @@ var DropdownTriggerButton = React.forwardRef(
       "width",
       "onClick",
       "sizeVar",
+      "styleVar",
       "isError",
       "placeholder",
       "value",
@@ -3356,7 +3397,7 @@ var DropdownTriggerButton = React.forwardRef(
     const [isHovered, setIsHovered] = React.useState(false);
     const handleOnClick = (e) => {
       if (!disabled) {
-        onClick && onClick(e);
+        onClick == null ? void 0 : onClick(e);
         setIsOpen(!isOpen);
       }
     };
@@ -3370,15 +3411,20 @@ var DropdownTriggerButton = React.forwardRef(
       e.stopPropagation();
       onClear && onClear();
     };
-    const getTextColor = ({ value: value2, disabled: disabled2 }) => {
-      if (disabled2) {
+    const getTextColor = () => {
+      if (disabled)
         return "neutral350";
-      }
-      if (!value2) {
+      if (!value)
         return "neutral400";
-      }
       return "neutral700";
     };
+    const getChevronColor = () => {
+      if (styleVar === "GHOST")
+        return disabled ? "neutral350" : "neutral600";
+      if (sizeVar === "L")
+        return "neutral700";
+      return "neutral350";
+    };
     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(
@@ -3392,17 +3438,19 @@ var DropdownTriggerButton = React.forwardRef(
         width,
         isError,
         sizeVar,
+        styleVar,
         height: getDropdownHeightBySizeVar(sizeVar),
         hasValue: Boolean(value),
+        onClick: handleOnClick,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             StyledDropdownButton,
             __spreadProps(__spreadValues({
               ref,
-              onClick: handleOnClick,
               disabled
             }, rest), {
               sizeVar,
+              styleVar,
               "data-shoplflow": "Dropdown-Content-Area",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { width: "100%", spacing: "spacing04", align: "center", children: [
@@ -3411,19 +3459,19 @@ var DropdownTriggerButton = React.forwardRef(
                     exports.Text,
                     {
                       typography: getDropdownFontSizeBySizeVar(sizeVar),
-                      color: getTextColor({ value, disabled }),
+                      color: getTextColor(),
                       textOverflow: "ellipsis",
                       lineClamp: 1,
                       children: placeholder
                     }
                   )
                 ] }),
-                onClear && sizeVar !== "L" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, styleVar: "GHOST", onClick: handleOnClear, className: "dropdown-clear-icon", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DeleteIcon, color: "neutral350", sizeVar: "S" }) })
+                onClear && sizeVar !== "L" && sizeVar !== "XS" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, styleVar: "GHOST", onClick: handleOnClear, className: "dropdown-clear-icon", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DeleteIcon, color: "neutral350", sizeVar: "S" }) })
               ]
             })
           ),
           RightSourceClone && /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { padding: "0 6px 0 0", children: RightSourceClone }),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownButtonIcon, { sizeVar, "data-shoplflow": "Dropdown-Button-Icon-Area", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownButtonIcon, { sizeVar, styleVar, "data-shoplflow": "Dropdown-Button-Icon-Area", children: /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.div,
             {
               animate: {
@@ -3432,14 +3480,8 @@ var DropdownTriggerButton = React.forwardRef(
               transition: {
                 duration: 0.2
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                exports.Icon,
-                {
-                  iconSource: ShoplAssets.DownArrowSolidXsmallIcon,
-                  color: sizeVar === "L" ? "neutral700" : "neutral400",
-                  sizeVar: "XS"
-                }
-              )
+              style: { cursor: disabled ? "not-allowed" : "pointer" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowSolidXsmallIcon, color: getChevronColor(), sizeVar: "XS" })
             }
           ) })
         ]
@@ -3520,9 +3562,6 @@ exports.DropdownOptionVariants = {
   OUTSIDE_CLICK: "OUTSIDE_CLICK",
   NONE: "NONE"
 };
-
-// src/components/Dropdown/version.ts
-exports.DROPDOWN_VERSION = "2.0.1";
 var StyledList = styled6__default.default.li`
   display: flex;
   flex-direction: row;
@@ -3564,9 +3603,6 @@ exports.Text2Rows = ({ title, subTitle }) => {
 };
 List.Text2Rows = exports.Text2Rows;
 exports.List = List;
-
-// src/components/List/version.ts
-exports.LIST_VERSION = "2.0.2";
 var getTypographyBySize = (size2) => {
   switch (size2) {
     case "XS":
@@ -3694,9 +3730,6 @@ exports.TagSizeVariants = {
   S: "S",
   M: "M"
 };
-
-// src/components/Tag/version.ts
-exports.TAG_VERSION = "2.0.1";
 var StyledTree = styled6__default.default(framerMotion.motion.ul)`
   display: flex;
   flex-direction: column;
@@ -3854,9 +3887,6 @@ exports.TreeItem = (_a) => {
 exports.TreeItem[exports.TREE_SYMBOL_KEY] = true;
 Tree.Item = exports.TreeItem;
 exports.Tree = Tree;
-
-// src/components/Tree/version.ts
-exports.TREE_VERSION = "2.0.1";
 var StyledInput = styled6__default.default.input`
   padding: ${({ sizeVar }) => sizeVar === "S" ? "0 8px" : "4px 12px"};
   background-color: transparent;
@@ -4641,9 +4671,6 @@ var SelectInputButton = (_a) => {
   );
 };
 exports.SelectInputButton = SelectInputButton;
-
-// src/components/Inputs/version.ts
-exports.INPUTS_VERSION = "2.0.1";
 var StyledTooltipContent = styled6__default.default.div`
   background-color: ${exports.colorTokens.neutral700};
   padding: 4px 8px;
@@ -4719,9 +4746,6 @@ var Tooltip = (_a) => {
 };
 Tooltip.Content = TooltipContent;
 exports.Tooltip = Tooltip;
-
-// src/components/Tooltip/version.ts
-exports.TOOLTIP_VERSION = "2.0.1";
 exports.TabsContext = React.createContext(null);
 exports.useTabs = () => {
   const context = React.useContext(exports.TabsContext);
@@ -4986,15 +5010,45 @@ exports.TabSizeVariants = {
   M: "M",
   L: "L"
 };
-
-// src/components/Tabs/version.ts
-exports.TABS_VERSION = "2.0.1";
 var PaginationWrapper = styled6__default.default.div`
   display: flex;
   align-items: center;
   width: 100%;
   justify-content: space-between;
 
+  /* Shopl: Figma pagenation bar — 양끝은 흐름 배치, 네비는 바 전체 기준 absolute 중앙 (node 13760:25910) */
+  ${({ $centerNav }) => $centerNav && react$1.css`
+      position: relative;
+      justify-content: space-between;
+
+      /* div → nav → div 이므로 nth-of-type(2)는 두 번째 div(우측)만 잡힘 → 반드시 nth-child */
+      & > *:nth-child(1) {
+        position: relative;
+        z-index: 2;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+      }
+      & > *:nth-child(2) {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 1;
+        transform: translate(-50%, -50%);
+        width: max-content;
+        max-width: 100%;
+      }
+      & > *:nth-child(3) {
+        position: relative;
+        z-index: 2;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    `}
+
   &.hada-responsive {
     @media (max-width: 720px) {
       justify-content: space-between;
@@ -5118,7 +5172,7 @@ var Pagination = (_a) => {
   const showRightEllipsis = currentPage < pageTotalCount && Math.ceil((currentPage + 1) / pageCount) < Math.ceil(pageTotalCount / pageCount);
   const canPreviousPage = currentPage > 0;
   const canNextPage = currentPage < pageTotalCount - 1;
-  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationWrapper, __spreadProps(__spreadValues({ className: responsiveClassName }, rest), { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationWrapper, __spreadProps(__spreadValues({ $centerNav: !isHadaDomain, className: responsiveClassName }, rest), { children: [
     leftSource ? leftSource : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
     /* @__PURE__ */ jsxRuntime.jsxs(StyledPagination, { className: responsiveClassName, "data-shoplflow": "Pagination", children: [
       !isXSSize && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
@@ -5146,9 +5200,6 @@ var Pagination = (_a) => {
 };
 Pagination.SizeSelector = PaginationSizeSelector_default;
 exports.Pagination = Pagination;
-
-// src/components/Pagination/version.ts
-exports.PAGINATION_VERSION = "2.0.1";
 var getLabelStyleBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "S": {
@@ -5317,9 +5368,6 @@ exports.ToggleButtonSizeVariants = {
   S: "S",
   M: "M"
 };
-
-// src/components/ToggleButton/version.ts
-exports.TOGGLE_BUTTON_VERSION = "2.0.2";
 var SmallStyledDayDatepickerWrapper = styled6__default.default.div`
   display: flex;
   width: 280px;
@@ -5411,7 +5459,7 @@ var SmallStyledDayDatepickerWrapper = styled6__default.default.div`
     &__day-names {
       width: 100%;
       height: 18px;
-      margin: 8px 0 0;
+      margin: 8px 0 8px 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -5812,8 +5860,7 @@ var Header = styled6__default.default.div`
   gap: 8px;
 `;
 var Month = styled6__default.default.p`
-  font-size: 18px;
-  color: ${exports.colorTokens.neutral700};
+  display: flex;
   cursor: pointer;
 `;
 var DatePickerWrapper = styled6__default.default.div`
@@ -5965,6 +6012,7 @@ var YearStepper = ({
   changeYear,
   minDate,
   maxDate,
+  sizeVar = "M",
   className
 }) => {
   const [isOpen, setIsOpen] = utils.useOutsideClick({
@@ -5981,10 +6029,17 @@ var YearStepper = ({
       exports.IconButton,
       {
         styleVar: "GHOST",
-        sizeVar: "S",
+        sizeVar: sizeVar === "S" ? "XS" : "S",
         onClick: decreaseYear,
         disabled: prevYearButtonDisabled || date.getFullYear() === startYear,
-        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.LeftArrowIcon, sizeVar: "XS", color: prevYearButtonDisabled ? "neutral200" : "neutral700" })
+        iconSizeVar: sizeVar === "S" ? "XS" : "S",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          exports.Icon,
+          {
+            iconSource: sizeVar === "S" ? ShoplAssets.LeftArrowXsmallIcon : ShoplAssets.LeftArrowIcon,
+            color: prevYearButtonDisabled ? "neutral200" : "neutral700"
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, { placement: "bottom", middlewares: [core.flip(), core.shift({ padding: 5 })], children: [
@@ -5996,7 +6051,7 @@ var YearStepper = ({
             event.stopPropagation();
             setIsOpen((prev) => !prev);
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "title1_700", children: `${date.getFullYear()}` })
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: sizeVar === "M" ? "title1_700" : "body1_700", children: `${date.getFullYear()}` })
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -6018,10 +6073,17 @@ var YearStepper = ({
       exports.IconButton,
       {
         styleVar: "GHOST",
-        sizeVar: "S",
+        sizeVar: sizeVar === "S" ? "XS" : "S",
         onClick: increaseYear,
         disabled: nextYearButtonDisabled || date.getFullYear() === endYear,
-        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.RightArrowIcon, sizeVar: "XS", color: nextYearButtonDisabled ? "neutral200" : "neutral700" })
+        iconSizeVar: sizeVar === "S" ? "XS" : "S",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          exports.Icon,
+          {
+            iconSource: sizeVar === "S" ? ShoplAssets.RightArrowXsmallIcon : ShoplAssets.RightArrowIcon,
+            color: nextYearButtonDisabled ? "neutral200" : "neutral700"
+          }
+        )
       }
     )
   ] });
@@ -6649,42 +6711,98 @@ var getEachWeekAreaStyle = (props) => {
     `;
   }
 };
+var getWeekContainerStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return react$1.css`
+      width: 280px;
+      max-width: 280px;
+      gap: 8px;
+      padding: 16px;
+    `;
+  }
+  return react$1.css`
+    width: 400px;
+    max-width: 400px;
+    gap: 16px;
+    padding: 16px 24px 24px;
+  `;
+};
+var getWeekAreaStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return react$1.css`
+      grid-row-gap: 0;
+      background-color: ${exports.colorTokens.neutral100};
+    `;
+  }
+  return react$1.css`
+    grid-row-gap: 8px;
+    background-color: ${exports.colorTokens.neutral0};
+  `;
+};
+var getEachWeekAreaStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return react$1.css`
+      height: 32px;
+    `;
+  }
+  return react$1.css`
+    height: 48px;
+  `;
+};
+var getEachWeekDateStyleBySizeVar = (sizeVar) => {
+  if (sizeVar === "S") {
+    return react$1.css`
+      width: 100%;
+      height: 32px;
+      font-size: 12px;
+      line-height: 16px;
+      border-radius: 0;
+    `;
+  }
+  return react$1.css`
+    width: 48px;
+    height: 48px;
+    font-size: 14px;
+    line-height: 48px;
+    border-radius: 50%;
+  `;
+};
 var WeekContainer = styled6__default.default.div`
   display: flex;
   flex-direction: column;
-  width: 400px;
-  max-width: 400px;
-  gap: 16px;
-  padding: 16px 24px 24px;
+
+  ${({ sizeVar }) => getWeekContainerStyleBySizeVar(sizeVar)}
 `;
 var WeekArea = styled6__default.default.div`
   width: 100%;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  grid-row-gap: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+
+  ${({ sizeVar }) => getWeekAreaStyleBySizeVar(sizeVar)}
 `;
 var EachWeekArea = styled6__default.default.div`
   width: 100%;
-  height: 48px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
 
+  ${({ sizeVar }) => getEachWeekAreaStyleBySizeVar(sizeVar)}
   ${(props) => getEachWeekAreaStyle(props)}
 `;
 var EachWeekDate = styled6__default.default.div`
-  width: 48px;
-  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-align: center;
-  font-size: 14px;
-  line-height: 48px;
   padding: 0;
-  border-radius: 50%;
   cursor: pointer;
   position: absolute;
   z-index: 10;
 
+  ${({ sizeVar }) => getEachWeekDateStyleBySizeVar(sizeVar)}
   ${(props) => getEachDateStyle3(props)}
 `;
 function getWeeksInYear(year) {
@@ -6709,7 +6827,8 @@ var WeekDatepicker = ({
   initEndDate,
   minDate,
   maxDate,
-  onlySingleWeek
+  onlySingleWeek,
+  sizeVar = "M"
 }) => {
   const year = initStartDate ? dateFns.getISOWeekYear(initStartDate) : dateFns.getISOWeekYear(/* @__PURE__ */ new Date());
   const [currentDate, setCurrentDate] = React.useState(new Date(year, 5, 5));
@@ -6776,10 +6895,11 @@ var WeekDatepicker = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(WeekContainer, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(WeekContainer, { sizeVar, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       YearStepper_default,
       {
+        sizeVar,
         date: currentDate,
         decreaseYear: () => {
           setCurrentDate(new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate()));
@@ -6796,7 +6916,7 @@ var WeekDatepicker = ({
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(WeekArea, { children: Years.map((each, index) => {
+    /* @__PURE__ */ jsxRuntime.jsx(WeekArea, { sizeVar, children: Years.map((each, index) => {
       const currentYear = currentDate.getFullYear();
       const currentWeek = Number(each);
       const isStart = currentYear === (selectedStartWeekAndYear == null ? void 0 : selectedStartWeekAndYear[1]) && currentWeek === (selectedStartWeekAndYear == null ? void 0 : selectedStartWeekAndYear[0]);
@@ -6853,6 +6973,7 @@ var WeekDatepicker = ({
       return /* @__PURE__ */ jsxRuntime.jsx(
         EachWeekArea,
         {
+          sizeVar,
           inRange,
           isStart,
           isReady,
@@ -6864,7 +6985,7 @@ var WeekDatepicker = ({
             }
             clickWeek(Number(each), currentDate.getFullYear());
           },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(EachWeekDate, { inRange, isStart, isEnd, disabled, children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs(EachWeekDate, { sizeVar, inRange, isStart, isEnd, disabled, children: [
             "W",
             each
           ] })
@@ -6875,9 +6996,6 @@ var WeekDatepicker = ({
   ] });
 };
 exports.WeekDatepicker = WeekDatepicker;
-
-// src/components/Datepickers/version.ts
-exports.DATEPICKERS_VERSION = "2.0.3";
 var StyledNumberCombobox = styled6__default.default.div``;
 var IconWrapper2 = styled6__default.default(framerMotion.motion.div)`
   display: flex;
@@ -7069,9 +7187,6 @@ exports.NumberComboboxSizeVariants = {
   S: "S",
   M: "M"
 };
-
-// src/components/Comboboxs/version.ts
-exports.COMBOBOXS_VERSION = "2.0.1";
 var animation = react$1.keyframes`
   0% {
     transform: translateX(-100%);
@@ -7121,9 +7236,6 @@ var Skeleton = ({ styleVar = "rectangle", width = "50px", height = "20px" }) =>
 };
 exports.Skeleton = Skeleton;
 
-// src/components/Skeleton/version.ts
-exports.SKELETON_VERSION = "2.0.1";
-
 // src/components/Slider/Slider.types.ts
 exports.SLIDER_Z_INDEX = {
   THUMB_BUTTON: 10
@@ -7412,9 +7524,6 @@ var Slider = ({
   ] }) });
 };
 exports.Slider = Slider;
-
-// src/components/Slider/version.ts
-exports.SLIDER_VERSION = "2.0.1";
 var SearchBarContext = React.createContext({});
 var useSearchBarContext = () => React.useContext(SearchBarContext);
 var SearchBarProvider = ({
@@ -7639,9 +7748,6 @@ var SearchBar = (_a) => {
 SearchBar.Category = SearchBarCategory;
 SearchBar.Input = SearchBarInput;
 
-// src/components/SearchBar/version.ts
-exports.SEARCH_BAR_VERSION = "2.0.1";
-
 // src/components/SearchBar/index.ts
 exports.SearchBar = SearchBar;
 exports.SearchBar.Category = SearchBarCategory;