@shoplflow/base 0.46.15 → 0.46.17

package/dist/index.js

@@ -301,9 +301,6 @@ var AvatarSizeVariants = {
   XL: "XL"
 };
 
-// src/components/Avatar/version.ts
-var AVATAR_VERSION = "2.1.2";
-
 // src/styles/tokens.ts
 var fontWeightRegular = "var(--font-weight-regular)";
 var fontWeightMedium = "var(--font-weight-medium)";
@@ -579,9 +576,6 @@ var MotionStack = motion(Stack);
 MotionStack.Vertical = motion(Stack.Vertical);
 MotionStack.Horizontal = motion(Stack.Horizontal);
 var Stack_default = Stack;
-
-// src/components/Stack/version.ts
-var STACK_VERSION = "2.0.1";
 var StyledStackContainer = styled6.div`
   display: flex;
   width: ${({ width }) => width};
@@ -662,9 +656,6 @@ var MotionStackContainer = motion(StackContainer);
 MotionStackContainer.Vertical = motion(StackContainer.Vertical);
 MotionStackContainer.Horizontal = motion(StackContainer.Horizontal);
 var StackContainer_default = StackContainer;
-
-// src/components/StackContainer/version.ts
-var STACK_CONTAINER_VERSION = "2.0.1";
 var setEllipsis = (maxLines) => {
   return css`
     display: -webkit-box;
@@ -705,7 +696,8 @@ var Text = forwardRef(
       textAlign = "start",
       textOverflow,
       className,
-      as
+      as,
+      wordBreak = "keep-all"
     } = _b, rest = __objRest(_b, [
       "children",
       "typography",
@@ -715,7 +707,8 @@ var Text = forwardRef(
       "textAlign",
       "textOverflow",
       "className",
-      "as"
+      "as",
+      "wordBreak"
     ]);
     return /* @__PURE__ */ jsx(
       StyledText,
@@ -727,6 +720,7 @@ var Text = forwardRef(
         display,
         textAlign,
         textOverflow,
+        wordBreak,
         as
       }, rest), {
         "data-shoplflow": "Text",
@@ -736,9 +730,6 @@ var Text = forwardRef(
   }
 );
 var Text_default = Text;
-
-// src/components/Text/version.ts
-var TEXT_VERSION = "2.0.2";
 var MODAL_SIZE_XXS = 400;
 var MODAL_SIZE_XS = 500;
 var MODAL_SIZE_S = 560;
@@ -882,7 +873,7 @@ var FooterContainer = styled6.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 ${colorTokens.neutral300};
   background: ${colorTokens.neutral0};
@@ -985,8 +976,8 @@ var ModalContainer = (_a) => {
   return /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: /* @__PURE__ */ jsx(ModalOptionContextProvider, { children: addPropInChildren }) }));
 };
 var ModalContainer_default = ModalContainer;
-var ModalFooter = ({ children }) => {
-  return /* @__PURE__ */ jsx(FooterContainer, { children });
+var ModalFooter = ({ children, padding }) => {
+  return /* @__PURE__ */ jsx(FooterContainer, { padding, children });
 };
 ModalFooter[MODAL_FOOTER_KEY] = true;
 var ModalFooter_default = ModalFooter;
@@ -1019,9 +1010,6 @@ var ScrollArea = forwardRef((_a, ref) => {
   ) });
 });
 var ScrollArea_default = ScrollArea;
-
-// src/components/ScrollArea/version.ts
-var SCROLL_AREA_VERSION = "2.0.1";
 var useModalOption = () => {
   const context = useContext(ModalOptionContext);
   if (!context) {
@@ -1268,9 +1256,6 @@ var ModalProvider = ({ children }) => {
 };
 var ModalProvider_default = ModalProvider;
 
-// src/components/Modal/version.ts
-var MODAL_VERSION = "2.0.1";
-
 // src/components/Modal/index.ts
 var Modal = {
   Container: ModalContainer_default,
@@ -1280,9 +1265,6 @@ var Modal = {
   Bottom: ModalBottom,
   Footer: ModalFooter_default
 };
-
-// src/components/BackDrop/version.ts
-var BACK_DROP_VERSION = "2.0.1";
 var getContainerStylesBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "S":
@@ -1442,9 +1424,6 @@ var SwitchSizeVariants = {
   M: "M"
 };
 
-// src/components/Switch/version.ts
-var SWITCH_VERSION = "2.0.1";
-
 // src/components/Chips/ChipToggle/ChipToggle.types.ts
 var ChipToggleStyleVariants = {
   SOLID: "SOLID"
@@ -1566,70 +1545,63 @@ var ChipToggle = (_a) => {
   );
 };
 var ChipToggle_default = ChipToggle;
-
-// src/utils/getNextColor.ts
-var getNextColor = (color, step = 1) => {
-  const colorName = color.replace(/[0-9]|_/g, "");
-  const colorTokenKeys = Object.keys(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 }) => css`
-  background: ${colorTokens.neutral0};
-  border: 1px solid ${colorTokens[color]};
-  border-radius: ${borderRadiusTokens.borderRadius20};
-  &:hover {
-    border: 1px solid ${colorTokens[getNextColor(color, 2)]};
-  }
-  & > span {
-    color: ${colorTokens[getNextColor(color, 4)]};
-  }
-`;
+var defaultSelectedBackground = (sizeVar) => sizeVar === "XS" ? colorTokens.neutral400_5 : colorTokens.neutral150;
+var lineStyle = ({ sizeVar, $isSelected, $selectedBackground, $selectedBorderColor }) => {
+  const selectedBg = $selectedBackground ? colorTokens[$selectedBackground] : defaultSelectedBackground(sizeVar);
+  const selectedBorder = $selectedBorderColor ? colorTokens[$selectedBorderColor] : colorTokens.neutral300;
+  return css`
+    border: 1px solid ${colorTokens.neutral300};
+    border-radius: 999px;
+    background: ${colorTokens.neutral0};
+
+    & > span {
+      color: ${colorTokens.neutral400};
+    }
+
+    &:hover {
+      background: ${colorTokens.neutral400_5};
+    }
+
+    ${$isSelected && css`
+      background: ${selectedBg};
+      border-color: ${selectedBorder};
+
+      & > span {
+        color: ${colorTokens.neutral700};
+      }
+
+      &:hover {
+        background: ${selectedBg};
+        border-color: ${selectedBorder};
+      }
+    `}
+  `;
+};
 var getStyleBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "XS":
       return css`
-        padding: 4px 8px;
+        padding: 4px 6px;
       `;
     case "S":
       return css`
-        padding: 7px 12px;
+        min-height: 32px;
+        padding: 6px 10px;
       `;
     default:
       return css`
-        padding: 7px 12px;
+        min-height: 32px;
+        padding: 6px 10px;
       `;
   }
 };
@@ -1640,12 +1612,16 @@ var StyledChipButton = styled6.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 && colorTokens[background2]};
+  ${({ background: background2 }) => background2 && css`
+      background: ${colorTokens[background2]};
+    `}
 `;
 
 // src/components/Chips/ChipButton/ChipButton.types.ts
@@ -1662,36 +1638,85 @@ var ChipButton = (_a) => {
     color = "neutral200",
     sizeVar = ChipButtonSizeVariants.S,
     text,
+    children,
+    leftSource,
+    rightSource,
     onClick = 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__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     StyledChipButton,
     __spreadProps(__spreadValues({
       styleVar,
       color
     }, rest), {
+      $isSelected: isSelected,
+      $selectedBackground: selectedBackground,
+      $selectedBorderColor: selectedBorderColor,
       onClick: handleOnClick,
       disabled,
       "data-shoplflow": "ChipButton",
-      children: /* @__PURE__ */ jsx(Text_default, { typography: getLineTypographyBySizeVar2(sizeVar), children: text })
+      children: [
+        leftSource,
+        children || /* @__PURE__ */ jsx(Text_default, { typography: getLineTypographyBySizeVar2(sizeVar), children: text }),
+        !children && count && /* @__PURE__ */ jsx(Text_default, { typography: getLineTypographyBySizeVar2(sizeVar), children: count }),
+        rightSource
+      ]
     })
   );
 };
 var ChipButton_default = ChipButton;
 
-// src/components/Chips/version.ts
-var 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(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 = getDomain();
   const secondaryBorderColor = domain === "hada" ? colorTokens.hada150 : colorTokens.neutral350;
@@ -2183,9 +2208,6 @@ var PopperPortal = forwardRef(
 Popper.Trigger = PopperTrigger;
 Popper.Portal = PopperPortal;
 var Popper_default = Popper;
-
-// src/components/Popper/version.ts
-var POPPER_VERSION = "2.0.1";
 var Container2 = styled6.div`
   display: flex;
   align-items: center;
@@ -2499,9 +2521,6 @@ var Radio = (_a) => {
 Radio[RADIO_SYMBOL_KEY] = true;
 var Radio_default = Radio;
 
-// src/components/ControlButtons/version.ts
-var CONTROL_BUTTONS_VERSION = "2.0.3";
-
 // src/components/Menu/Menu.styled.ts
 var getStylesBySizeVar = (sizeVar) => {
   switch (sizeVar) {
@@ -2610,9 +2629,6 @@ var MenuSizeVariants = {
   S: "S",
   M: "M"
 };
-
-// src/components/Menu/version.ts
-var MENU_VERSION = "2.0.1";
 var DropdownButtonContext = createContext(null);
 var useDropdownButtonContext = () => {
   const context = useContext(DropdownButtonContext);
@@ -2662,9 +2678,6 @@ var Icon = forwardRef((_a, ref) => {
   return /* @__PURE__ */ jsx(StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon" }));
 });
 var Icon_default = Icon;
-
-// src/components/Icon/version.ts
-var ICON_VERSION = "2.0.1";
 var DropdownButtonMenu = (_a) => {
   var _b = _a, { onClick, children } = _b, rest = __objRest(_b, ["onClick", "children"]);
   const { setIsOpen } = useDropdownButtonContext();
@@ -2982,9 +2995,6 @@ var SplitButtonStyleVariants = {
   PRIMARY: "PRIMARY",
   SECONDARY: "SECONDARY"
 };
-
-// src/components/Buttons/version.ts
-var BUTTONS_VERSION = "2.0.4";
 var informationStyle = css`
   background: ${colorTokens.neutral400_5};
   & > svg > circle {
@@ -3116,9 +3126,6 @@ var CalloutTypes = {
   CAUTION: "CAUTION",
   ALERT: "ALERT"
 };
-
-// src/components/Callout/version.ts
-var CALLOUT_VERSION = "2.1.5";
 var StyledDropdown = styled6.div`
   width: ${({ width }) => width};
 `;
@@ -3141,6 +3148,8 @@ var useDropdown = () => {
 };
 var getDropdownHeightBySizeVar = (size2) => {
   switch (size2) {
+    case "XS":
+      return "24px";
     case "M":
     case "L":
       return "40px";
@@ -3152,6 +3161,8 @@ var getDropdownHeightBySizeVar = (size2) => {
 };
 var getDropdownFontSizeBySizeVar = (size2) => {
   switch (size2) {
+    case "XS":
+      return "caption_400";
     case "L":
       return "body2_700";
     case "M":
@@ -3162,8 +3173,18 @@ var getDropdownFontSizeBySizeVar = (size2) => {
       return "body1_400";
   }
 };
-var getDropdownStyleBySizeVar = (size2) => {
+var getDropdownStyleBySizeVar = (size2, styleVar) => {
+  if (styleVar === "GHOST" && size2 === "S") {
+    return css`
+      padding-left: 8px;
+      padding-right: 4px;
+    `;
+  }
   switch (size2) {
+    case "XS":
+      return css`
+        padding: 0 2px 0 6px;
+      `;
     case "S":
       return css`
         padding: 0 8px;
@@ -3185,18 +3206,24 @@ var getDropdownStyleBySizeVar = (size2) => {
       `;
   }
 };
-var getDisabledStyle2 = (disabled) => {
+var getDisabledStyle2 = ({
+  disabled,
+  styleVar
+}) => {
   if (disabled) {
     return css`
       cursor: not-allowed;
-      background: ${colorTokens.neutral100};
+      background: ${styleVar === "GHOST" ? "transparent" : colorTokens.neutral100};
       svg > path {
-        fill: ${colorTokens.neutral400} !important;
+        fill: ${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 colorTokens.red300;
@@ -3213,7 +3240,14 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar
   }
   return colorTokens.neutral300;
 };
-var getButtonWrapperStyleBySizeVar = ({ sizeVar, isFocused }) => {
+var getButtonWrapperStyleBySizeVar = ({ sizeVar, isFocused, isHovered, styleVar }) => {
+  if (styleVar === "GHOST") {
+    return css`
+      background-color: ${isHovered || isFocused ? colorTokens.neutral400_5 : "transparent"};
+      border-width: 0;
+      border-radius: 6px;
+    `;
+  }
   switch (sizeVar) {
     case "L":
       return css`
@@ -3268,7 +3302,7 @@ var StyledDropdownButtonWrapper = styled6.div`
   width
 })};
   ${(props) => getButtonWrapperStyleBySizeVar(props)};
-  ${({ disabled }) => getDisabledStyle2(disabled)};
+  ${({ disabled, styleVar }) => getDisabledStyle2({ disabled, styleVar })};
 
   ${({ hasValue }) => getClearIconHoverStyle(hasValue)}
 `;
@@ -3282,8 +3316,8 @@ var StyledDropdownButton = styled6.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;
@@ -3295,10 +3329,15 @@ var DropdownButtonIcon = styled6.div`
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  min-width: 22px;
+  ${({ sizeVar, styleVar }) => styleVar === "GHOST" ? css`
+          width: 18px;
+          min-width: 18px;
+        ` : css`
+          min-width: ${sizeVar === "XS" ? "18px" : "22px"};
+        `}
   height: 100%;
 
-  ${({ disabled }) => getDisabledStyle2(disabled)};
+  ${({ disabled, styleVar }) => getDisabledStyle2({ disabled, styleVar })};
 `;
 var DropdownTriggerButton = forwardRef(
   (_a, ref) => {
@@ -3306,6 +3345,7 @@ var DropdownTriggerButton = forwardRef(
       width = "100%",
       onClick,
       sizeVar = "M",
+      styleVar = "NORMAL",
       isError,
       placeholder,
       value,
@@ -3317,6 +3357,7 @@ var DropdownTriggerButton = forwardRef(
       "width",
       "onClick",
       "sizeVar",
+      "styleVar",
       "isError",
       "placeholder",
       "value",
@@ -3329,7 +3370,7 @@ var DropdownTriggerButton = forwardRef(
     const [isHovered, setIsHovered] = useState(false);
     const handleOnClick = (e) => {
       if (!disabled) {
-        onClick && onClick(e);
+        onClick == null ? void 0 : onClick(e);
         setIsOpen(!isOpen);
       }
     };
@@ -3343,15 +3384,20 @@ var DropdownTriggerButton = 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 ? cloneElement(leftSource, __spreadProps(__spreadValues({}, leftSource.props), { disabled })) : leftSource;
     const RightSourceClone = rightSource ? cloneElement(rightSource, __spreadProps(__spreadValues({}, rightSource.props), { disabled })) : rightSource;
     return /* @__PURE__ */ jsxs(
@@ -3365,17 +3411,19 @@ var DropdownTriggerButton = forwardRef(
         width,
         isError,
         sizeVar,
+        styleVar,
         height: getDropdownHeightBySizeVar(sizeVar),
         hasValue: Boolean(value),
+        onClick: handleOnClick,
         children: [
           /* @__PURE__ */ jsxs(
             StyledDropdownButton,
             __spreadProps(__spreadValues({
               ref,
-              onClick: handleOnClick,
               disabled
             }, rest), {
               sizeVar,
+              styleVar,
               "data-shoplflow": "Dropdown-Content-Area",
               children: [
                 /* @__PURE__ */ jsxs(Stack_default.Horizontal, { width: "100%", spacing: "spacing04", align: "center", children: [
@@ -3384,19 +3432,19 @@ var DropdownTriggerButton = forwardRef(
                     Text_default,
                     {
                       typography: getDropdownFontSizeBySizeVar(sizeVar),
-                      color: getTextColor({ value, disabled }),
+                      color: getTextColor(),
                       textOverflow: "ellipsis",
                       lineClamp: 1,
                       children: placeholder
                     }
                   )
                 ] }),
-                onClear && sizeVar !== "L" && /* @__PURE__ */ jsx(IconButton_default, { sizeVar, styleVar: "GHOST", onClick: handleOnClear, className: "dropdown-clear-icon", children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DeleteIcon, color: "neutral350", sizeVar: "S" }) })
+                onClear && sizeVar !== "L" && sizeVar !== "XS" && /* @__PURE__ */ jsx(IconButton_default, { sizeVar, styleVar: "GHOST", onClick: handleOnClear, className: "dropdown-clear-icon", children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DeleteIcon, color: "neutral350", sizeVar: "S" }) })
               ]
             })
           ),
           RightSourceClone && /* @__PURE__ */ jsx(StackContainer_default, { padding: "0 6px 0 0", children: RightSourceClone }),
-          /* @__PURE__ */ jsx(DropdownButtonIcon, { sizeVar, "data-shoplflow": "Dropdown-Button-Icon-Area", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(DropdownButtonIcon, { sizeVar, styleVar, "data-shoplflow": "Dropdown-Button-Icon-Area", children: /* @__PURE__ */ jsx(
             motion.div,
             {
               animate: {
@@ -3405,14 +3453,8 @@ var DropdownTriggerButton = forwardRef(
               transition: {
                 duration: 0.2
               },
-              children: /* @__PURE__ */ jsx(
-                Icon_default,
-                {
-                  iconSource: DownArrowSolidXsmallIcon,
-                  color: sizeVar === "L" ? "neutral700" : "neutral400",
-                  sizeVar: "XS"
-                }
-              )
+              style: { cursor: disabled ? "not-allowed" : "pointer" },
+              children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DownArrowSolidXsmallIcon, color: getChevronColor(), sizeVar: "XS" })
             }
           ) })
         ]
@@ -3493,9 +3535,6 @@ var DropdownOptionVariants = {
   OUTSIDE_CLICK: "OUTSIDE_CLICK",
   NONE: "NONE"
 };
-
-// src/components/Dropdown/version.ts
-var DROPDOWN_VERSION = "2.0.1";
 var StyledList = styled6.li`
   display: flex;
   flex-direction: row;
@@ -3537,9 +3576,6 @@ var Text2Rows = ({ title, subTitle }) => {
 };
 List.Text2Rows = Text2Rows;
 var List_default = List;
-
-// src/components/List/version.ts
-var LIST_VERSION = "2.0.2";
 var getTypographyBySize = (size2) => {
   switch (size2) {
     case "XS":
@@ -3667,9 +3703,6 @@ var TagSizeVariants = {
   S: "S",
   M: "M"
 };
-
-// src/components/Tag/version.ts
-var TAG_VERSION = "2.0.1";
 var StyledTree = styled6(motion.ul)`
   display: flex;
   flex-direction: column;
@@ -3827,9 +3860,6 @@ var TreeItem = (_a) => {
 TreeItem[TREE_SYMBOL_KEY] = true;
 Tree.Item = TreeItem;
 var Tree_default = Tree;
-
-// src/components/Tree/version.ts
-var TREE_VERSION = "2.0.1";
 var StyledInput = styled6.input`
   padding: ${({ sizeVar }) => sizeVar === "S" ? "0 8px" : "4px 12px"};
   background-color: transparent;
@@ -4614,9 +4644,6 @@ var SelectInputButton = (_a) => {
   );
 };
 var SelectInputButton_default = SelectInputButton;
-
-// src/components/Inputs/version.ts
-var INPUTS_VERSION = "2.0.1";
 var StyledTooltipContent = styled6.div`
   background-color: ${colorTokens.neutral700};
   padding: 4px 8px;
@@ -4692,9 +4719,6 @@ var Tooltip = (_a) => {
 };
 Tooltip.Content = TooltipContent;
 var Tooltip_default = Tooltip;
-
-// src/components/Tooltip/version.ts
-var TOOLTIP_VERSION = "2.0.1";
 var TabsContext = createContext(null);
 var useTabs = () => {
   const context = useContext(TabsContext);
@@ -4959,15 +4983,45 @@ var TabSizeVariants = {
   M: "M",
   L: "L"
 };
-
-// src/components/Tabs/version.ts
-var TABS_VERSION = "2.0.1";
 var PaginationWrapper = styled6.div`
   display: flex;
   align-items: center;
   width: 100%;
   justify-content: space-between;
 
+  /* Shopl: Figma pagenation bar — 양끝은 흐름 배치, 네비는 바 전체 기준 absolute 중앙 (node 13760:25910) */
+  ${({ $centerNav }) => $centerNav && 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;
@@ -5091,7 +5145,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__ */ jsxs(PaginationWrapper, __spreadProps(__spreadValues({ className: responsiveClassName }, rest), { children: [
+  return /* @__PURE__ */ jsxs(PaginationWrapper, __spreadProps(__spreadValues({ $centerNav: !isHadaDomain, className: responsiveClassName }, rest), { children: [
     leftSource ? leftSource : /* @__PURE__ */ jsx("div", {}),
     /* @__PURE__ */ jsxs(StyledPagination, { className: responsiveClassName, "data-shoplflow": "Pagination", children: [
       !isXSSize && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsx(Icon_default, { iconSource: FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
@@ -5119,9 +5173,6 @@ var Pagination = (_a) => {
 };
 Pagination.SizeSelector = PaginationSizeSelector_default;
 var Pagination_default = Pagination;
-
-// src/components/Pagination/version.ts
-var PAGINATION_VERSION = "2.0.1";
 var getLabelStyleBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "S": {
@@ -5290,9 +5341,6 @@ var ToggleButtonSizeVariants = {
   S: "S",
   M: "M"
 };
-
-// src/components/ToggleButton/version.ts
-var TOGGLE_BUTTON_VERSION = "2.0.2";
 var SmallStyledDayDatepickerWrapper = styled6.div`
   display: flex;
   width: 280px;
@@ -6848,9 +6896,6 @@ var WeekDatepicker = ({
   ] });
 };
 var WeekDatepicker_default = WeekDatepicker;
-
-// src/components/Datepickers/version.ts
-var DATEPICKERS_VERSION = "2.0.3";
 var StyledNumberCombobox = styled6.div``;
 var IconWrapper2 = styled6(motion.div)`
   display: flex;
@@ -7042,9 +7087,6 @@ var NumberComboboxSizeVariants = {
   S: "S",
   M: "M"
 };
-
-// src/components/Comboboxs/version.ts
-var COMBOBOXS_VERSION = "2.0.1";
 var animation = keyframes`
   0% {
     transform: translateX(-100%);
@@ -7094,9 +7136,6 @@ var Skeleton = ({ styleVar = "rectangle", width = "50px", height = "20px" }) =>
 };
 var Skeleton_default = Skeleton;
 
-// src/components/Skeleton/version.ts
-var SKELETON_VERSION = "2.0.1";
-
 // src/components/Slider/Slider.types.ts
 var SLIDER_Z_INDEX = {
   THUMB_BUTTON: 10
@@ -7385,9 +7424,6 @@ var Slider = ({
   ] }) });
 };
 var Slider_default = Slider;
-
-// src/components/Slider/version.ts
-var SLIDER_VERSION = "2.0.1";
 var SearchBarContext = createContext({});
 var useSearchBarContext = () => useContext(SearchBarContext);
 var SearchBarProvider = ({
@@ -7612,9 +7648,6 @@ var SearchBar = (_a) => {
 SearchBar.Category = SearchBarCategory;
 SearchBar.Input = SearchBarInput;
 
-// src/components/SearchBar/version.ts
-var SEARCH_BAR_VERSION = "2.0.1";
-
 // src/components/SearchBar/index.ts
 var SearchBar2 = SearchBar;
 SearchBar2.Category = SearchBarCategory;
@@ -7673,4 +7706,4 @@ classnames/index.js:
   *)
 */
 
-export { AVATAR_VERSION, AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, BACK_DROP_VERSION, BUTTONS_VERSION, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CALLOUT_VERSION, CHECKBOX_SYMBOL_KEY, CHIPS_VERSION, COMBOBOXS_VERSION, CONTROL_BUTTONS_VERSION, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DATEPICKERS_VERSION, DROPDOWN_VERSION, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, DropdownOptionVariants, HelperText_default as HelperText, ICON_VERSION, INPUTS_VERSION, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, LIST_VERSION, List_default as List, MENU_VERSION, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MODAL_VERSION, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, PAGINATION_VERSION, POPPER_VERSION, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, SCROLL_AREA_VERSION, SEARCH_BAR_VERSION, SKELETON_VERSION, SLIDER_VERSION, SLIDER_Z_INDEX, STACK_CONTAINER_VERSION, STACK_VERSION, SWITCH_VERSION, ScrollArea_default as ScrollArea, SearchBar2 as SearchBar, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Skeleton_default as Skeleton, Slider_default as Slider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, SwitchSizeVariants, TABS_VERSION, TAG_VERSION, TEXT_VERSION, TOGGLE_BUTTON_VERSION, TOOLTIP_VERSION, TREE_SYMBOL_KEY, TREE_VERSION, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, DropdownOptionVariants, HelperText_default as HelperText, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, SLIDER_Z_INDEX, ScrollArea_default as ScrollArea, SearchBar2 as SearchBar, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Skeleton_default as Skeleton, Slider_default as Slider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, SwitchSizeVariants, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };