@shoplflow/base 0.45.12 → 0.45.14

package/dist/index.cjs

@@ -426,7 +426,9 @@ var spacing02 = "var(--spacing02)";
 var spacing04 = "var(--spacing04)";
 var spacing06 = "var(--spacing06)";
 var spacing08 = "var(--spacing08)";
+var spacing10 = "var(--spacing10)";
 var spacing12 = "var(--spacing12)";
+var spacing14 = "var(--spacing14)";
 var spacing16 = "var(--spacing16)";
 var spacing20 = "var(--spacing20)";
 var spacing24 = "var(--spacing24)";
@@ -438,7 +440,9 @@ exports.spacingTokens = {
   spacing04,
   spacing06,
   spacing08,
+  spacing10,
   spacing12,
+  spacing14,
   spacing16,
   spacing20,
   spacing24,
@@ -3261,7 +3265,9 @@ var Dropdown = ({
   trigger,
   popper,
   option = "CLICK",
-  width = "100%"
+  width = "100%",
+  offset: offset4 = 4,
+  placement
 }) => {
   const [triggerRef, setTriggerRef] = React3.useState(null);
   const [size2, setSize] = React3.useState({ width: 0, height: 0 });
@@ -3283,8 +3289,9 @@ var Dropdown = ({
   return /* @__PURE__ */ jsxRuntime.jsx(StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxRuntime.jsxs(
     exports.Popper,
     {
-      offset: 4,
-      autoPlacement: {
+      offset: offset4,
+      placement,
+      autoPlacement: placement ? void 0 : {
         allowedPlacements: ["bottom-start", "top-start"]
       },
       children: [
@@ -3630,7 +3637,7 @@ exports.TreeItem[exports.TREE_SYMBOL_KEY] = true;
 Tree.Item = exports.TreeItem;
 exports.Tree = Tree;
 var StyledInput = styled6__default.default.input`
-  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "4px 0 4px 12px"};
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 8px" : "4px 12px"};
   background-color: transparent;
   display: flex;
   min-width: ${({ minWidth }) => minWidth || "64px"};
@@ -3654,6 +3661,7 @@ var StyledInput = styled6__default.default.input`
     padding: 4px 8px;
     text-align: center;
     -moz-appearance: textfield;
+    appearance: textfield;
   }
 
   *,
@@ -3663,10 +3671,27 @@ var StyledInput = styled6__default.default.input`
   }
 `;
 var RightElementWrapper2 = styled6__default.default.div`
+  padding: ${({ sizeVar, type, initialType }) => {
+  if (initialType === "password" || type === "password") {
+    return "0";
+  }
+  return sizeVar === "S" ? "0 8px 0 0" : "0 12px 0 0";
+}};
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0 8px 0 0;
+  height: 100%;
+`;
+var ClearIconButton = styled6__default.default(StyledIconButton)`
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: ${exports.colorTokens.neutral0} !important;
+
+  &:hover {
+    background-color: ${exports.colorTokens.neutral100} !important;
+  }
 `;
 var Wrapper = styled6__default.default.div`
   display: flex;
@@ -3675,9 +3700,9 @@ var Wrapper = styled6__default.default.div`
   align-items: center;
   gap: 2px;
 `;
-var TextCounter = ({ currentLength, maxLength }) => {
+var TextCounter = ({ currentLength, maxLength, isError }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "caption_400", color: "neutral400", children: currentLength }),
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "caption_400", color: isError ? "red300" : "neutral400", children: currentLength }),
     /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "caption_400", color: "neutral350", children: "/" }),
     /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "caption_400", color: "neutral350", children: maxLength })
   ] });
@@ -3759,7 +3784,6 @@ var InputWrapper = styled6__default.default.label`
   borderRadius
 })};
   justify-content: space-between;
-  gap: ${({ gap, sizeVar }) => gap || (sizeVar === "S" ? "4px" : "8px")};
   border: 1px solid ${(props) => getBorderColorByStatus2(props)};
   background-color: ${exports.colorTokens.neutral0};
   overflow: hidden;
@@ -3803,7 +3827,8 @@ var Input = React3.forwardRef(
       rightSource,
       minWidth,
       gap,
-      initIsFocused
+      initIsFocused,
+      rightSourceStyle
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3826,7 +3851,8 @@ var Input = React3.forwardRef(
       "rightSource",
       "minWidth",
       "gap",
-      "initIsFocused"
+      "initIsFocused",
+      "rightSourceStyle"
     ]);
     const [text, setText] = React3.useState("");
     const [isFocused, setIsFocused] = React3.useState(Boolean(initIsFocused));
@@ -3943,36 +3969,38 @@ var Input = React3.forwardRef(
         gap,
         sizeVar,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            StyledInput,
-            __spreadValues({
-              onFocus: handleOnFocus,
-              onBlur: handleOnBlur,
-              onChange: handleOnChange,
-              onKeyDown: handleOnKeyDown,
-              maxLength,
-              disabled,
-              value: text,
-              type,
-              id: uniqueId,
-              ref: refs,
-              minWidth,
-              sizeVar,
-              className: "body1_400" + (className ? ` ${className}` : "")
-            }, rest)
-          ),
-          !(type === "number") && /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper2, { children: [
-            maxLength && isFocused && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }),
-            onClear && isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) }),
-            initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              StyledInput,
+              __spreadValues({
+                onFocus: handleOnFocus,
+                onBlur: handleOnBlur,
+                onChange: handleOnChange,
+                onKeyDown: handleOnKeyDown,
+                maxLength,
+                disabled,
+                value: text,
+                type,
+                id: uniqueId,
+                ref: refs,
+                minWidth,
+                sizeVar,
+                className: "body1_400" + (className ? ` ${className}` : "")
+              }, rest)
+            ),
+            onClear && isHovered && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(ClearIconButton, { sizeVar, onClick: handleOnClear, styleVar: "GHOST", isHovered: false, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) })
+          ] }),
+          !(type === "number") && (Boolean(maxLength && isFocused) || Boolean(initialType === "password") || Boolean(rightSource)) && /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper2, { type, sizeVar, initialType, style: rightSourceStyle, children: [
+            maxLength && isFocused && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength, isError }),
+            initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
               exports.Icon,
               {
                 color: "neutral600",
                 iconSource: assetFunction(type === "password" ? "ViewOffIcon" : "ViewOnIcon")
               }
-            ) })
-          ] }),
-          rightSource && rightSource
+            ) }),
+            rightSource && rightSource
+          ] })
         ]
       }
     );
@@ -6654,13 +6682,20 @@ var NumberCombobox = (_a) => {
         sizeVar,
         width,
         ref: inputRef,
-        type: "number",
+        type: "text",
+        inputMode: "numeric",
         style: { textAlign: "left", paddingRight: "0px" },
         className: _className,
         gap: "4px",
         initIsFocused: isOpen,
         value,
-        onChange,
+        onChange: (e) => {
+          const numericValue = e.target.value.replace(/[^\d]/g, "");
+          if (e.target.value !== numericValue) {
+            e.target.value = numericValue;
+          }
+          onChange == null ? void 0 : onChange(e);
+        },
         onFocus: () => {
           setIsOpen(true);
         },
@@ -6707,7 +6742,8 @@ var NumberCombobox = (_a) => {
           }
           onBlur == null ? void 0 : onBlur(event);
         },
-        rightSource: /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer.Horizontal, { padding: "0px 4px 0px 0px", children: /* @__PURE__ */ jsxRuntime.jsx(
+        rightSourceStyle: { padding: "4px" },
+        rightSource: /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer.Horizontal, { children: /* @__PURE__ */ jsxRuntime.jsx(
           exports.IconButton,
           {
             sizeVar: "XS",

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, CSSProperties, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref, ChangeEvent } from 'react';
+import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, CSSProperties, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref, ChangeEvent } from 'react';
 import { $Values } from '@shoplflow/utils';
 import { IconSource } from '@shoplflow/shopl-assets';
 import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
@@ -97,7 +97,9 @@ declare const spacingTokens: {
     spacing04: string;
     spacing06: string;
     spacing08: string;
+    spacing10: string;
     spacing12: string;
+    spacing14: string;
     spacing16: string;
     spacing20: string;
     spacing24: string;
@@ -269,6 +271,7 @@ interface RightElementProps {
      * 텍스트를 기준으로 오른쪽에 위치할 ReactElement를 설정합니다.
      */
     rightSource?: ReactElement;
+    rightSourceStyle?: CSSProperties;
 }
 interface LeftAndRightElementProps extends RightElementProps, LeftElementProps {
 }
@@ -954,6 +957,8 @@ interface DropdownOptionProps {
     option?: DropdownOptionVariantType;
     width?: CSSProperties['width'];
     disabled?: boolean;
+    placement?: Placement;
+    offset?: OffsetOptions;
 }
 interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
     /**
@@ -986,7 +991,7 @@ interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButto
 }
 
 declare const Dropdown: {
-    ({ isOpen: initialIsOpen, trigger, popper, option, width, }: DropdownProps): react_jsx_runtime.JSX.Element;
+    ({ isOpen: initialIsOpen, trigger, popper, option, width, offset, placement, }: DropdownProps): react_jsx_runtime.JSX.Element;
     Button: React__default.ForwardRefExoticComponent<DropdownTriggerButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
     Content: ({ children, width: initialWidth, type, onClick, ...rest }: DropdownContentProps) => react_jsx_runtime.JSX.Element;
 };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, CSSProperties, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref, ChangeEvent } from 'react';
+import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, CSSProperties, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, HTMLAttributes, ComponentPropsWithRef, ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent, Ref, ChangeEvent } from 'react';
 import { $Values } from '@shoplflow/utils';
 import { IconSource } from '@shoplflow/shopl-assets';
 import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
@@ -97,7 +97,9 @@ declare const spacingTokens: {
     spacing04: string;
     spacing06: string;
     spacing08: string;
+    spacing10: string;
     spacing12: string;
+    spacing14: string;
     spacing16: string;
     spacing20: string;
     spacing24: string;
@@ -269,6 +271,7 @@ interface RightElementProps {
      * 텍스트를 기준으로 오른쪽에 위치할 ReactElement를 설정합니다.
      */
     rightSource?: ReactElement;
+    rightSourceStyle?: CSSProperties;
 }
 interface LeftAndRightElementProps extends RightElementProps, LeftElementProps {
 }
@@ -954,6 +957,8 @@ interface DropdownOptionProps {
     option?: DropdownOptionVariantType;
     width?: CSSProperties['width'];
     disabled?: boolean;
+    placement?: Placement;
+    offset?: OffsetOptions;
 }
 interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
     /**
@@ -986,7 +991,7 @@ interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButto
 }
 
 declare const Dropdown: {
-    ({ isOpen: initialIsOpen, trigger, popper, option, width, }: DropdownProps): react_jsx_runtime.JSX.Element;
+    ({ isOpen: initialIsOpen, trigger, popper, option, width, offset, placement, }: DropdownProps): react_jsx_runtime.JSX.Element;
     Button: React__default.ForwardRefExoticComponent<DropdownTriggerButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
     Content: ({ children, width: initialWidth, type, onClick, ...rest }: DropdownContentProps) => react_jsx_runtime.JSX.Element;
 };

package/dist/index.js

@@ -399,7 +399,9 @@ var spacing02 = "var(--spacing02)";
 var spacing04 = "var(--spacing04)";
 var spacing06 = "var(--spacing06)";
 var spacing08 = "var(--spacing08)";
+var spacing10 = "var(--spacing10)";
 var spacing12 = "var(--spacing12)";
+var spacing14 = "var(--spacing14)";
 var spacing16 = "var(--spacing16)";
 var spacing20 = "var(--spacing20)";
 var spacing24 = "var(--spacing24)";
@@ -411,7 +413,9 @@ var spacingTokens = {
   spacing04,
   spacing06,
   spacing08,
+  spacing10,
   spacing12,
+  spacing14,
   spacing16,
   spacing20,
   spacing24,
@@ -3234,7 +3238,9 @@ var Dropdown = ({
   trigger,
   popper,
   option = "CLICK",
-  width = "100%"
+  width = "100%",
+  offset: offset4 = 4,
+  placement
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const [size2, setSize] = useState({ width: 0, height: 0 });
@@ -3256,8 +3262,9 @@ var Dropdown = ({
   return /* @__PURE__ */ jsx(StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxs(
     Popper_default,
     {
-      offset: 4,
-      autoPlacement: {
+      offset: offset4,
+      placement,
+      autoPlacement: placement ? void 0 : {
         allowedPlacements: ["bottom-start", "top-start"]
       },
       children: [
@@ -3603,7 +3610,7 @@ TreeItem[TREE_SYMBOL_KEY] = true;
 Tree.Item = TreeItem;
 var Tree_default = Tree;
 var StyledInput = styled6.input`
-  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "4px 0 4px 12px"};
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 8px" : "4px 12px"};
   background-color: transparent;
   display: flex;
   min-width: ${({ minWidth }) => minWidth || "64px"};
@@ -3627,6 +3634,7 @@ var StyledInput = styled6.input`
     padding: 4px 8px;
     text-align: center;
     -moz-appearance: textfield;
+    appearance: textfield;
   }
 
   *,
@@ -3636,10 +3644,27 @@ var StyledInput = styled6.input`
   }
 `;
 var RightElementWrapper2 = styled6.div`
+  padding: ${({ sizeVar, type, initialType }) => {
+  if (initialType === "password" || type === "password") {
+    return "0";
+  }
+  return sizeVar === "S" ? "0 8px 0 0" : "0 12px 0 0";
+}};
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0 8px 0 0;
+  height: 100%;
+`;
+var ClearIconButton = styled6(StyledIconButton)`
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: ${colorTokens.neutral0} !important;
+
+  &:hover {
+    background-color: ${colorTokens.neutral100} !important;
+  }
 `;
 var Wrapper = styled6.div`
   display: flex;
@@ -3648,9 +3673,9 @@ var Wrapper = styled6.div`
   align-items: center;
   gap: 2px;
 `;
-var TextCounter = ({ currentLength, maxLength }) => {
+var TextCounter = ({ currentLength, maxLength, isError }) => {
   return /* @__PURE__ */ jsxs(Wrapper, { children: [
-    /* @__PURE__ */ jsx(Text_default, { typography: "caption_400", color: "neutral400", children: currentLength }),
+    /* @__PURE__ */ jsx(Text_default, { typography: "caption_400", color: isError ? "red300" : "neutral400", children: currentLength }),
     /* @__PURE__ */ jsx(Text_default, { typography: "caption_400", color: "neutral350", children: "/" }),
     /* @__PURE__ */ jsx(Text_default, { typography: "caption_400", color: "neutral350", children: maxLength })
   ] });
@@ -3732,7 +3757,6 @@ var InputWrapper = styled6.label`
   borderRadius
 })};
   justify-content: space-between;
-  gap: ${({ gap, sizeVar }) => gap || (sizeVar === "S" ? "4px" : "8px")};
   border: 1px solid ${(props) => getBorderColorByStatus2(props)};
   background-color: ${colorTokens.neutral0};
   overflow: hidden;
@@ -3776,7 +3800,8 @@ var Input = forwardRef(
       rightSource,
       minWidth,
       gap,
-      initIsFocused
+      initIsFocused,
+      rightSourceStyle
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3799,7 +3824,8 @@ var Input = forwardRef(
       "rightSource",
       "minWidth",
       "gap",
-      "initIsFocused"
+      "initIsFocused",
+      "rightSourceStyle"
     ]);
     const [text, setText] = useState("");
     const [isFocused, setIsFocused] = useState(Boolean(initIsFocused));
@@ -3916,36 +3942,38 @@ var Input = forwardRef(
         gap,
         sizeVar,
         children: [
-          /* @__PURE__ */ jsx(
-            StyledInput,
-            __spreadValues({
-              onFocus: handleOnFocus,
-              onBlur: handleOnBlur,
-              onChange: handleOnChange,
-              onKeyDown: handleOnKeyDown,
-              maxLength,
-              disabled,
-              value: text,
-              type,
-              id: uniqueId,
-              ref: refs,
-              minWidth,
-              sizeVar,
-              className: "body1_400" + (className ? ` ${className}` : "")
-            }, rest)
-          ),
-          !(type === "number") && /* @__PURE__ */ jsxs(RightElementWrapper2, { children: [
-            maxLength && isFocused && /* @__PURE__ */ jsx(TextCounter_default, { currentLength: String(text).length, maxLength }),
-            onClear && isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", children: /* @__PURE__ */ jsx(Icon_default, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) }),
-            initialType === "password" && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+            /* @__PURE__ */ jsx(
+              StyledInput,
+              __spreadValues({
+                onFocus: handleOnFocus,
+                onBlur: handleOnBlur,
+                onChange: handleOnChange,
+                onKeyDown: handleOnKeyDown,
+                maxLength,
+                disabled,
+                value: text,
+                type,
+                id: uniqueId,
+                ref: refs,
+                minWidth,
+                sizeVar,
+                className: "body1_400" + (className ? ` ${className}` : "")
+              }, rest)
+            ),
+            onClear && isHovered && Boolean(String(text).length > 0) && /* @__PURE__ */ jsx(ClearIconButton, { sizeVar, onClick: handleOnClear, styleVar: "GHOST", isHovered: false, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) })
+          ] }),
+          !(type === "number") && (Boolean(maxLength && isFocused) || Boolean(initialType === "password") || Boolean(rightSource)) && /* @__PURE__ */ jsxs(RightElementWrapper2, { type, sizeVar, initialType, style: rightSourceStyle, children: [
+            maxLength && isFocused && /* @__PURE__ */ jsx(TextCounter_default, { currentLength: String(text).length, maxLength, isError }),
+            initialType === "password" && /* @__PURE__ */ jsx(IconButton_default, { sizeVar, onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsx(
               Icon_default,
               {
                 color: "neutral600",
                 iconSource: assetFunction(type === "password" ? "ViewOffIcon" : "ViewOnIcon")
               }
-            ) })
-          ] }),
-          rightSource && rightSource
+            ) }),
+            rightSource && rightSource
+          ] })
         ]
       }
     );
@@ -6627,13 +6655,20 @@ var NumberCombobox = (_a) => {
         sizeVar,
         width,
         ref: inputRef,
-        type: "number",
+        type: "text",
+        inputMode: "numeric",
         style: { textAlign: "left", paddingRight: "0px" },
         className: _className,
         gap: "4px",
         initIsFocused: isOpen,
         value,
-        onChange,
+        onChange: (e) => {
+          const numericValue = e.target.value.replace(/[^\d]/g, "");
+          if (e.target.value !== numericValue) {
+            e.target.value = numericValue;
+          }
+          onChange == null ? void 0 : onChange(e);
+        },
         onFocus: () => {
           setIsOpen(true);
         },
@@ -6680,7 +6715,8 @@ var NumberCombobox = (_a) => {
           }
           onBlur == null ? void 0 : onBlur(event);
         },
-        rightSource: /* @__PURE__ */ jsx(StackContainer_default.Horizontal, { padding: "0px 4px 0px 0px", children: /* @__PURE__ */ jsx(
+        rightSourceStyle: { padding: "4px" },
+        rightSource: /* @__PURE__ */ jsx(StackContainer_default.Horizontal, { children: /* @__PURE__ */ jsx(
           IconButton_default,
           {
             sizeVar: "XS",

package/dist/styles/global.css

@@ -16,7 +16,9 @@
   --spacing04: 4px;
   --spacing06: 6px;
   --spacing08: 8px;
+  --spacing10: 10px;
   --spacing12: 12px;
+  --spacing14: 14px;
   --spacing16: 16px;
   --spacing20: 20px;
   --spacing24: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.45.12",
+  "version": "0.45.14",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -99,8 +99,8 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.10",
-    "@shoplflow/shopl-assets": "^0.12.33",
-    "@shoplflow/utils": "^0.7.2"
+    "@shoplflow/utils": "^0.7.2",
+    "@shoplflow/shopl-assets": "^0.12.33"
   },
   "homepage": "https://github.com/shopl/shoplflow#readme",
   "scripts": {