@officesdk/design 0.1.1 → 0.1.3

package/dist/components/{index.js → cjs/index.js}

@@ -1,13 +1,13 @@
 'use strict';
 
-var React11 = require('react');
+var React12 = require('react');
 var styled3 = require('styled-components');
 var RcTooltip = require('rc-tooltip');
 require('rc-tooltip/assets/bootstrap.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React11__default = /*#__PURE__*/_interopDefault(React11);
+var React12__default = /*#__PURE__*/_interopDefault(React12);
 var styled3__default = /*#__PURE__*/_interopDefault(styled3);
 var RcTooltip__default = /*#__PURE__*/_interopDefault(RcTooltip);
 
@@ -150,7 +150,7 @@ var Button = ({
 }) => {
   const isIconOnly = variant === "icon" || !children && !!(iconBefore || iconAfter);
   const iconOnlyContent = iconBefore || iconAfter;
-  return /* @__PURE__ */ React11__default.default.createElement(
+  return /* @__PURE__ */ React12__default.default.createElement(
     StyledButton,
     {
       $variant: variant,
@@ -162,7 +162,7 @@ var Button = ({
       disabled: disabled || loading,
       ...rest
     },
-    loading ? /* @__PURE__ */ React11__default.default.createElement(React11__default.default.Fragment, null, "Loading...") : isIconOnly ? iconOnlyContent : /* @__PURE__ */ React11__default.default.createElement(React11__default.default.Fragment, null, iconBefore && /* @__PURE__ */ React11__default.default.createElement(IconWrapper, { $size: size, $position: "before" }, iconBefore), children, iconAfter && /* @__PURE__ */ React11__default.default.createElement(IconWrapper, { $size: size, $position: "after" }, iconAfter))
+    loading ? /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, "Loading...") : isIconOnly ? iconOnlyContent : /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, iconBefore && /* @__PURE__ */ React12__default.default.createElement(IconWrapper, { $size: size, $position: "before" }, iconBefore), children, iconAfter && /* @__PURE__ */ React12__default.default.createElement(IconWrapper, { $size: size, $position: "after" }, iconAfter))
   );
 };
 Button.displayName = "Button";
@@ -232,14 +232,14 @@ var Slider = ({
   className,
   style
 }) => {
-  const [internalValue, setInternalValue] = React11.useState(
+  const [internalValue, setInternalValue] = React12.useState(
     controlledValue ?? defaultValue
   );
-  const [isDragging, setIsDragging] = React11.useState(false);
-  const containerRef = React11.useRef(null);
+  const [isDragging, setIsDragging] = React12.useState(false);
+  const containerRef = React12.useRef(null);
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
   const percentage = (value - min) / (max - min) * 100;
-  const updateValue = React11.useCallback(
+  const updateValue = React12.useCallback(
     (clientX) => {
       if (!containerRef.current || disabled) return;
       const rect = containerRef.current.getBoundingClientRect();
@@ -255,7 +255,7 @@ var Slider = ({
     },
     [min, max, step, disabled, controlledValue, onChange]
   );
-  const handleMouseDown = React11.useCallback(
+  const handleMouseDown = React12.useCallback(
     (e) => {
       if (disabled) return;
       e.preventDefault();
@@ -265,7 +265,7 @@ var Slider = ({
     },
     [disabled, onDragStart, updateValue]
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!isDragging) return;
     const handleMouseMove = (e) => {
       updateValue(e.clientX);
@@ -281,7 +281,7 @@ var Slider = ({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging, updateValue, onDragEnd]);
-  const handleKeyDown = React11.useCallback(
+  const handleKeyDown = React12.useCallback(
     (e) => {
       if (disabled) return;
       let newValue = value;
@@ -314,7 +314,7 @@ var Slider = ({
     },
     [disabled, value, min, max, step, controlledValue, onChange]
   );
-  return /* @__PURE__ */ React11__default.default.createElement(
+  return /* @__PURE__ */ React12__default.default.createElement(
     SliderContainer,
     {
       ref: containerRef,
@@ -330,9 +330,9 @@ var Slider = ({
       "aria-valuenow": value,
       "aria-disabled": disabled
     },
-    /* @__PURE__ */ React11__default.default.createElement(SliderTrack, { $disabled: disabled }),
-    /* @__PURE__ */ React11__default.default.createElement(SliderFill, { $percentage: percentage, $disabled: disabled }),
-    /* @__PURE__ */ React11__default.default.createElement(
+    /* @__PURE__ */ React12__default.default.createElement(SliderTrack, { $disabled: disabled }),
+    /* @__PURE__ */ React12__default.default.createElement(SliderFill, { $percentage: percentage, $disabled: disabled }),
+    /* @__PURE__ */ React12__default.default.createElement(
       SliderThumb,
       {
         $percentage: percentage,
@@ -343,23 +343,7 @@ var Slider = ({
   );
 };
 Slider.displayName = "Slider";
-
-// src/Button/SpinButton.tsx
-var SpinButtonWrapper = styled3__default.default.div`
-  display: inline-flex;
-  align-items: center;
-  gap: ${({ $showSlider }) => $showSlider ? "0" : "0"};
-  width: ${({ $showSlider }) => $showSlider ? "100%" : "auto"};
-`;
-var SliderWrapper = styled3__default.default.div`
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding: ${({ $size }) => $size === "small" ? "7px 0" : "7px 0"};
-  padding-right: ${({ $size }) => $size === "small" ? "83px" : "72px"};
-  min-width: 0;
-`;
-var SpinButtonContainer = styled3__default.default.div`
+var NumberInputContainer = styled3__default.default.div`
   display: inline-flex;
   align-items: center;
   background: white;
@@ -409,6 +393,25 @@ var InputWrapper = styled3__default.default.div`
   align-items: center;
   padding: 0 8px;
   min-width: 0;
+  gap: 4px;
+`;
+var UnitText = styled3__default.default.span`
+  flex-shrink: 0;
+  font-family: 'PingFang SC', sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+
+  ${({ $size }) => $size === "small" ? `
+    font-size: 12px;
+  ` : `
+    font-size: 13px;
+  `}
+
+  ${({ $disabled, theme }) => $disabled ? `
+    color: ${theme.colors.palettes.transparency["30"]};
+  ` : `
+    color: ${theme.colors.palettes.gray["120"]};
+  `}
 `;
 var StyledInput = styled3__default.default.input`
   width: 100%;
@@ -446,6 +449,7 @@ var StyledInput = styled3__default.default.input`
   }
 
   &[type='number'] {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
 `;
@@ -512,9 +516,9 @@ var StepButton = styled3__default.default.button`
     fill: ${({ $disabled, theme }) => $disabled ? theme.colors.palettes.transparency["30"] : theme.colors.palettes.gray["120"]};
   }
 `;
-var UpArrow = () => /* @__PURE__ */ React11__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11__default.default.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
-var DownArrow = () => /* @__PURE__ */ React11__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11__default.default.createElement("path", { d: "M7 9.5L3.5 5.5H10.5L7 9.5Z", fill: "currentColor" }));
-var SpinButton = ({
+var UpArrow = () => /* @__PURE__ */ React12__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
+var DownArrow = () => /* @__PURE__ */ React12__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("path", { d: "M7 9.5L3.5 5.5H10.5L7 9.5Z", fill: "currentColor" }));
+var NumberInput = ({
   value: controlledValue,
   defaultValue = 0,
   min = -Infinity,
@@ -523,20 +527,20 @@ var SpinButton = ({
   size = "large",
   disabled = false,
   alert = false,
-  showSlider = false,
   precision,
   formatter,
   parser,
+  unit,
   onChange,
   className,
   style
 }) => {
-  const [internalValue, setInternalValue] = React11.useState(controlledValue ?? defaultValue);
-  const [displayValue, setDisplayValue] = React11.useState("");
-  const [isFocused, setIsFocused] = React11.useState(false);
-  const inputRef = React11.useRef(null);
+  const [internalValue, setInternalValue] = React12.useState(controlledValue ?? defaultValue);
+  const [displayValue, setDisplayValue] = React12.useState("");
+  const [isFocused, setIsFocused] = React12.useState(false);
+  const inputRef = React12.useRef(null);
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
-  const formatValue = React11.useCallback(
+  const formatValue = React12.useCallback(
     (val) => {
       if (formatter) {
         return formatter(val);
@@ -548,7 +552,7 @@ var SpinButton = ({
     },
     [formatter, precision]
   );
-  const parseValue = React11.useCallback(
+  const parseValue = React12.useCallback(
     (displayVal) => {
       if (parser) {
         return parser(displayVal);
@@ -558,18 +562,18 @@ var SpinButton = ({
     },
     [parser]
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!isFocused) {
       setDisplayValue(formatValue(value));
     }
   }, [value, isFocused, formatValue]);
-  const clampValue = React11.useCallback(
+  const clampValue = React12.useCallback(
     (val) => {
       return Math.max(min, Math.min(max, val));
     },
     [min, max]
   );
-  const handleValueChange = React11.useCallback(
+  const handleValueChange = React12.useCallback(
     (newValue) => {
       const clampedValue = clampValue(newValue);
       if (controlledValue === void 0) {
@@ -579,18 +583,18 @@ var SpinButton = ({
     },
     [clampValue, controlledValue, onChange]
   );
-  const increment = React11.useCallback(() => {
+  const increment = React12.useCallback(() => {
     if (disabled) return;
     handleValueChange(value + step);
   }, [disabled, value, step, handleValueChange]);
-  const decrement = React11.useCallback(() => {
+  const decrement = React12.useCallback(() => {
     if (disabled) return;
     handleValueChange(value - step);
   }, [disabled, value, step, handleValueChange]);
-  const handleInputChange = React11.useCallback((e) => {
+  const handleInputChange = React12.useCallback((e) => {
     setDisplayValue(e.target.value);
   }, []);
-  const handleBlur = React11.useCallback(() => {
+  const handleBlur = React12.useCallback(() => {
     setIsFocused(false);
     const parsed = parseValue(displayValue);
     if (parsed !== null) {
@@ -599,11 +603,11 @@ var SpinButton = ({
       setDisplayValue(formatValue(value));
     }
   }, [displayValue, parseValue, handleValueChange, value, formatValue]);
-  const handleFocus = React11.useCallback(() => {
+  const handleFocus = React12.useCallback(() => {
     setIsFocused(true);
     setDisplayValue(String(value));
   }, [value]);
-  const handleKeyDown = React11.useCallback(
+  const handleKeyDown = React12.useCallback(
     (e) => {
       if (e.key === "ArrowUp") {
         e.preventDefault();
@@ -617,7 +621,105 @@ var SpinButton = ({
     },
     [increment, decrement]
   );
-  return /* @__PURE__ */ React11__default.default.createElement(SpinButtonWrapper, { $showSlider: showSlider, className, style }, showSlider && /* @__PURE__ */ React11__default.default.createElement(SliderWrapper, { $size: size }, /* @__PURE__ */ React11__default.default.createElement(
+  return /* @__PURE__ */ React12__default.default.createElement(
+    NumberInputContainer,
+    {
+      $size: size,
+      $disabled: disabled,
+      $alert: alert,
+      $isFocused: isFocused,
+      className,
+      style
+    },
+    /* @__PURE__ */ React12__default.default.createElement(InputWrapper, null, /* @__PURE__ */ React12__default.default.createElement(
+      StyledInput,
+      {
+        ref: inputRef,
+        type: "text",
+        value: displayValue,
+        onChange: handleInputChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        disabled,
+        $size: size,
+        $disabled: disabled
+      }
+    ), unit && /* @__PURE__ */ React12__default.default.createElement(UnitText, { $size: size, $disabled: disabled }, unit)),
+    /* @__PURE__ */ React12__default.default.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React12__default.default.createElement(
+      StepButton,
+      {
+        type: "button",
+        $position: "up",
+        $alert: alert,
+        $disabled: disabled,
+        onClick: increment,
+        disabled,
+        tabIndex: -1
+      },
+      /* @__PURE__ */ React12__default.default.createElement(UpArrow, null)
+    ), /* @__PURE__ */ React12__default.default.createElement(
+      StepButton,
+      {
+        type: "button",
+        $position: "down",
+        $alert: alert,
+        $disabled: disabled,
+        onClick: decrement,
+        disabled,
+        tabIndex: -1
+      },
+      /* @__PURE__ */ React12__default.default.createElement(DownArrow, null)
+    ))
+  );
+};
+NumberInput.displayName = "NumberInput";
+
+// src/Button/SpinButton.tsx
+var SpinButtonWrapper = styled3__default.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ $showSlider }) => $showSlider ? "0" : "0"};
+  width: ${({ $showSlider }) => $showSlider ? "100%" : "auto"};
+`;
+var SliderWrapper = styled3__default.default.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: ${({ $size }) => $size === "small" ? "7px 0" : "7px 0"};
+  padding-right: ${({ $size }) => $size === "small" ? "83px" : "72px"};
+  min-width: 0;
+`;
+var SpinButton = ({
+  value: controlledValue,
+  defaultValue = 0,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  size = "large",
+  disabled = false,
+  alert = false,
+  showSlider = false,
+  precision,
+  formatter,
+  parser,
+  onChange,
+  className,
+  style
+}) => {
+  const [internalValue, setInternalValue] = React12.useState(controlledValue ?? defaultValue);
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const handleValueChange = React12.useCallback(
+    (newValue) => {
+      if (newValue === null) return;
+      if (controlledValue === void 0) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [controlledValue, onChange]
+  );
+  return /* @__PURE__ */ React12__default.default.createElement(SpinButtonWrapper, { $showSlider: showSlider, className, style }, showSlider && /* @__PURE__ */ React12__default.default.createElement(SliderWrapper, { $size: size }, /* @__PURE__ */ React12__default.default.createElement(
     Slider,
     {
       value,
@@ -625,47 +727,24 @@ var SpinButton = ({
       max,
       step,
       disabled,
-      onChange: (val) => handleValueChange(val)
+      onChange: handleValueChange
     }
-  )), /* @__PURE__ */ React11__default.default.createElement(SpinButtonContainer, { $size: size, $disabled: disabled, $alert: alert, $isFocused: isFocused }, /* @__PURE__ */ React11__default.default.createElement(InputWrapper, null, /* @__PURE__ */ React11__default.default.createElement(
-    StyledInput,
+  )), /* @__PURE__ */ React12__default.default.createElement(
+    NumberInput,
     {
-      ref: inputRef,
-      type: "text",
-      value: displayValue,
-      onChange: handleInputChange,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onKeyDown: handleKeyDown,
+      value,
+      min,
+      max,
+      step,
+      size,
       disabled,
-      $size: size,
-      $disabled: disabled
+      alert,
+      precision,
+      formatter,
+      parser,
+      onChange: handleValueChange
     }
-  )), /* @__PURE__ */ React11__default.default.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React11__default.default.createElement(
-    StepButton,
-    {
-      type: "button",
-      $position: "up",
-      $alert: alert,
-      $disabled: disabled,
-      onClick: increment,
-      disabled,
-      tabIndex: -1
-    },
-    /* @__PURE__ */ React11__default.default.createElement(UpArrow, null)
-  ), /* @__PURE__ */ React11__default.default.createElement(
-    StepButton,
-    {
-      type: "button",
-      $position: "down",
-      $alert: alert,
-      $disabled: disabled,
-      onClick: decrement,
-      disabled,
-      tabIndex: -1
-    },
-    /* @__PURE__ */ React11__default.default.createElement(DownArrow, null)
-  ))));
+  ));
 };
 SpinButton.displayName = "SpinButton";
 var SwitchContainer = styled3__default.default.label`
@@ -790,12 +869,12 @@ var Switch = ({
   className,
   style
 }) => {
-  const [internalChecked, setInternalChecked] = React11.useState(
+  const [internalChecked, setInternalChecked] = React12.useState(
     controlledChecked ?? defaultChecked
   );
-  const [isFocused, setIsFocused] = React11.useState(false);
+  const [isFocused, setIsFocused] = React12.useState(false);
   const checked = controlledChecked !== void 0 ? controlledChecked : internalChecked;
-  const handleChange = React11.useCallback(
+  const handleChange = React12.useCallback(
     (e) => {
       if (disabled) return;
       const newChecked = e.target.checked;
@@ -806,13 +885,13 @@ var Switch = ({
     },
     [disabled, controlledChecked, onChange]
   );
-  const handleFocus = React11.useCallback(() => {
+  const handleFocus = React12.useCallback(() => {
     setIsFocused(true);
   }, []);
-  const handleBlur = React11.useCallback(() => {
+  const handleBlur = React12.useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React11__default.default.createElement(
+  return /* @__PURE__ */ React12__default.default.createElement(
     SwitchContainer,
     {
       $size: size,
@@ -821,7 +900,7 @@ var Switch = ({
       className,
       style
     },
-    /* @__PURE__ */ React11__default.default.createElement(
+    /* @__PURE__ */ React12__default.default.createElement(
       HiddenInput,
       {
         type: "checkbox",
@@ -832,7 +911,7 @@ var Switch = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React11__default.default.createElement(
+    /* @__PURE__ */ React12__default.default.createElement(
       Track,
       {
         $size: size,
@@ -841,7 +920,7 @@ var Switch = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React11__default.default.createElement(
+    /* @__PURE__ */ React12__default.default.createElement(
       Thumb,
       {
         $size: size,
@@ -946,12 +1025,12 @@ var Radio = ({
   className,
   style
 }) => {
-  const [internalChecked, setInternalChecked] = React11.useState(
+  const [internalChecked, setInternalChecked] = React12.useState(
     controlledChecked ?? defaultChecked
   );
-  const [isFocused, setIsFocused] = React11.useState(false);
+  const [isFocused, setIsFocused] = React12.useState(false);
   const checked = controlledChecked !== void 0 ? controlledChecked : internalChecked;
-  const handleChange = React11.useCallback(
+  const handleChange = React12.useCallback(
     (e) => {
       if (disabled) return;
       const newChecked = e.target.checked;
@@ -962,20 +1041,20 @@ var Radio = ({
     },
     [disabled, controlledChecked, onChange]
   );
-  const handleFocus = React11.useCallback(() => {
+  const handleFocus = React12.useCallback(() => {
     setIsFocused(true);
   }, []);
-  const handleBlur = React11.useCallback(() => {
+  const handleBlur = React12.useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React11__default.default.createElement(
+  return /* @__PURE__ */ React12__default.default.createElement(
     RadioContainer,
     {
       $disabled: disabled,
       className,
       style
     },
-    /* @__PURE__ */ React11__default.default.createElement(
+    /* @__PURE__ */ React12__default.default.createElement(
       HiddenInput2,
       {
         type: "radio",
@@ -989,7 +1068,7 @@ var Radio = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React11__default.default.createElement(
+    /* @__PURE__ */ React12__default.default.createElement(
       RadioOuter,
       {
         $checked: checked,
@@ -997,7 +1076,7 @@ var Radio = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React11__default.default.createElement(
+    /* @__PURE__ */ React12__default.default.createElement(
       RadioInner,
       {
         $checked: checked,
@@ -1125,18 +1204,18 @@ var Checkbox = ({
   className,
   style
 }) => {
-  const [internalChecked, setInternalChecked] = React11.useState(
+  const [internalChecked, setInternalChecked] = React12.useState(
     controlledChecked ?? defaultChecked
   );
-  const [isFocused, setIsFocused] = React11.useState(false);
-  const inputRef = React11.useRef(null);
+  const [isFocused, setIsFocused] = React12.useState(false);
+  const inputRef = React12.useRef(null);
   const checked = controlledChecked !== void 0 ? controlledChecked : internalChecked;
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
-  const handleChange = React11.useCallback(
+  const handleChange = React12.useCallback(
     (e) => {
       if (disabled) return;
       const newChecked = e.target.checked;
@@ -1147,20 +1226,20 @@ var Checkbox = ({
     },
     [disabled, controlledChecked, onChange]
   );
-  const handleFocus = React11.useCallback(() => {
+  const handleFocus = React12.useCallback(() => {
     setIsFocused(true);
   }, []);
-  const handleBlur = React11.useCallback(() => {
+  const handleBlur = React12.useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React11__default.default.createElement(
+  return /* @__PURE__ */ React12__default.default.createElement(
     CheckboxContainer,
     {
       $disabled: disabled,
       className,
       style
     },
-    /* @__PURE__ */ React11__default.default.createElement(
+    /* @__PURE__ */ React12__default.default.createElement(
       HiddenInput3,
       {
         ref: inputRef,
@@ -1175,7 +1254,7 @@ var Checkbox = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React11__default.default.createElement(
+    /* @__PURE__ */ React12__default.default.createElement(
       CheckboxBox,
       {
         $checked: checked,
@@ -1184,8 +1263,8 @@ var Checkbox = ({
         $isFocused: isFocused
       }
     ),
-    !indeterminate && /* @__PURE__ */ React11__default.default.createElement(IconWrapper2, { $visible: checked }, /* @__PURE__ */ React11__default.default.createElement("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "#fff" }, /* @__PURE__ */ React11__default.default.createElement("path", { d: "M1.05426 3.16164L0 4.27945L3.50904 8L10 1.11781L8.94573 0L3.50904 5.76438L1.05426 3.16164Z" }))),
-    indeterminate && /* @__PURE__ */ React11__default.default.createElement(IconWrapper2, { $visible: indeterminate }, /* @__PURE__ */ React11__default.default.createElement(DefaultIndeterminateIcon, null))
+    !indeterminate && /* @__PURE__ */ React12__default.default.createElement(IconWrapper2, { $visible: checked }, /* @__PURE__ */ React12__default.default.createElement("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "#fff" }, /* @__PURE__ */ React12__default.default.createElement("path", { d: "M1.05426 3.16164L0 4.27945L3.50904 8L10 1.11781L8.94573 0L3.50904 5.76438L1.05426 3.16164Z" }))),
+    indeterminate && /* @__PURE__ */ React12__default.default.createElement(IconWrapper2, { $visible: indeterminate }, /* @__PURE__ */ React12__default.default.createElement(DefaultIndeterminateIcon, null))
   );
 };
 Checkbox.displayName = "Checkbox";
@@ -1315,7 +1394,7 @@ var SuffixNode = styled3__default.default.div`
     `;
 }}
 `;
-var Input = React11.forwardRef(
+var Input = React12.forwardRef(
   ({
     size = "medium",
     error = false,
@@ -1329,7 +1408,7 @@ var Input = React11.forwardRef(
     onBlur,
     ...rest
   }, ref) => {
-    const [isFocused, setIsFocused] = React11.useState(false);
+    const [isFocused, setIsFocused] = React12.useState(false);
     const handleFocus = (e) => {
       setIsFocused(true);
       onFocus?.(e);
@@ -1338,7 +1417,7 @@ var Input = React11.forwardRef(
       setIsFocused(false);
       onBlur?.(e);
     };
-    return /* @__PURE__ */ React11__default.default.createElement(
+    return /* @__PURE__ */ React12__default.default.createElement(
       InputWrapper2,
       {
         $size: size,
@@ -1349,8 +1428,8 @@ var Input = React11.forwardRef(
         className,
         style
       },
-      prefixNode && /* @__PURE__ */ React11__default.default.createElement(PrefixNode, { $size: size }, prefixNode),
-      /* @__PURE__ */ React11__default.default.createElement(
+      prefixNode && /* @__PURE__ */ React12__default.default.createElement(PrefixNode, { $size: size }, prefixNode),
+      /* @__PURE__ */ React12__default.default.createElement(
         StyledInput2,
         {
           ref,
@@ -1364,7 +1443,7 @@ var Input = React11.forwardRef(
           ...rest
         }
       ),
-      suffixNode && /* @__PURE__ */ React11__default.default.createElement(SuffixNode, { $size: size }, suffixNode)
+      suffixNode && /* @__PURE__ */ React12__default.default.createElement(SuffixNode, { $size: size }, suffixNode)
     );
   }
 );
@@ -1424,7 +1503,7 @@ var ClearButton = styled3__default.default.button`
     opacity: 0.5;
   }
 `;
-var DefaultSearchIcon = () => /* @__PURE__ */ React11__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11__default.default.createElement(
+var DefaultSearchIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement(
   "path",
   {
     d: "M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z",
@@ -1433,7 +1512,7 @@ var DefaultSearchIcon = () => /* @__PURE__ */ React11__default.default.createEle
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }
-), /* @__PURE__ */ React11__default.default.createElement(
+), /* @__PURE__ */ React12__default.default.createElement(
   "path",
   {
     d: "M14 14L11.1 11.1",
@@ -1443,7 +1522,7 @@ var DefaultSearchIcon = () => /* @__PURE__ */ React11__default.default.createEle
     strokeLinejoin: "round"
   }
 ));
-var DefaultCloseIcon = () => /* @__PURE__ */ React11__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11__default.default.createElement(
+var DefaultCloseIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement(
   "path",
   {
     d: "M12 4L4 12",
@@ -1452,7 +1531,7 @@ var DefaultCloseIcon = () => /* @__PURE__ */ React11__default.default.createElem
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }
-), /* @__PURE__ */ React11__default.default.createElement(
+), /* @__PURE__ */ React12__default.default.createElement(
   "path",
   {
     d: "M4 4L12 12",
@@ -1462,7 +1541,7 @@ var DefaultCloseIcon = () => /* @__PURE__ */ React11__default.default.createElem
     strokeLinejoin: "round"
   }
 ));
-var SearchInput = React11.forwardRef(
+var SearchInput = React12.forwardRef(
   ({
     size = "extraLarge",
     clearable = true,
@@ -1475,7 +1554,7 @@ var SearchInput = React11.forwardRef(
     readOnly,
     ...rest
   }, ref) => {
-    const [internalValue, setInternalValue] = React11.useState(defaultValue || "");
+    const [internalValue, setInternalValue] = React12.useState(defaultValue || "");
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const handleChange = (e) => {
@@ -1490,8 +1569,8 @@ var SearchInput = React11.forwardRef(
       }
       onClear?.();
     };
-    const prefixNode = /* @__PURE__ */ React11__default.default.createElement(SearchIconWrapper, { $size: size }, searchIcon || /* @__PURE__ */ React11__default.default.createElement(DefaultSearchIcon, null));
-    const suffixNode = clearable && currentValue && !disabled && !readOnly ? /* @__PURE__ */ React11__default.default.createElement(
+    const prefixNode = /* @__PURE__ */ React12__default.default.createElement(SearchIconWrapper, { $size: size }, searchIcon || /* @__PURE__ */ React12__default.default.createElement(DefaultSearchIcon, null));
+    const suffixNode = clearable && currentValue && !disabled && !readOnly ? /* @__PURE__ */ React12__default.default.createElement(
       ClearButton,
       {
         $size: size,
@@ -1499,9 +1578,9 @@ var SearchInput = React11.forwardRef(
         type: "button",
         tabIndex: -1
       },
-      /* @__PURE__ */ React11__default.default.createElement(DefaultCloseIcon, null)
+      /* @__PURE__ */ React12__default.default.createElement(DefaultCloseIcon, null)
     ) : null;
-    return /* @__PURE__ */ React11__default.default.createElement(
+    return /* @__PURE__ */ React12__default.default.createElement(
       Input,
       {
         ref,
@@ -1518,15 +1597,15 @@ var SearchInput = React11.forwardRef(
   }
 );
 SearchInput.displayName = "SearchInput";
-var IconContext = React11.createContext(null);
+var IconContext = React12.createContext(null);
 var IconProvider = ({
   icons,
   children
 }) => {
-  return /* @__PURE__ */ React11__default.default.createElement(IconContext.Provider, { value: icons }, children);
+  return /* @__PURE__ */ React12__default.default.createElement(IconContext.Provider, { value: icons }, children);
 };
 var useIconRegistry = () => {
-  return React11.useContext(IconContext);
+  return React12.useContext(IconContext);
 };
 IconProvider.displayName = "IconProvider";
 
@@ -1561,7 +1640,7 @@ var Icon = ({
   const registry = useIconRegistry();
   let iconElement = children;
   if (!iconElement && src) {
-    iconElement = /* @__PURE__ */ React11__default.default.createElement(
+    iconElement = /* @__PURE__ */ React12__default.default.createElement(
       "img",
       {
         src,
@@ -1573,7 +1652,7 @@ var Icon = ({
   if (!iconElement && name && registry) {
     const IconComponent = registry[name];
     if (IconComponent) {
-      iconElement = /* @__PURE__ */ React11__default.default.createElement(IconComponent, null);
+      iconElement = /* @__PURE__ */ React12__default.default.createElement(IconComponent, null);
     } else if (process.env.NODE_ENV !== "production") {
       console.warn(`Icon "${name}" not found in registry. Make sure IconProvider is set up.`);
     }
@@ -1584,7 +1663,7 @@ var Icon = ({
     }
     return null;
   }
-  return /* @__PURE__ */ React11__default.default.createElement(
+  return /* @__PURE__ */ React12__default.default.createElement(
     IconContainer,
     {
       $size: size,
@@ -1688,11 +1767,11 @@ var CloseButton = styled3__default.default.button`
     color: ${({ theme }) => theme.colors.palettes.gray["120"]};
   }
 `;
-var SuccessIcon = () => /* @__PURE__ */ React11__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React11__default.default.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
-var InfoIcon = () => /* @__PURE__ */ React11__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#5ba0e7" }), /* @__PURE__ */ React11__default.default.createElement("path", { d: "M10 9V14M10 6H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var ErrorIcon = () => /* @__PURE__ */ React11__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#e95555" }), /* @__PURE__ */ React11__default.default.createElement("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var WarnIcon = () => /* @__PURE__ */ React11__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#ebe361" }), /* @__PURE__ */ React11__default.default.createElement("path", { d: "M10 6V11M10 14H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var CloseIconSvg = () => /* @__PURE__ */ React11__default.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11__default.default.createElement("path", { d: "M9 3L3 9M3 3L9 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }));
+var SuccessIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React12__default.default.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var InfoIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#5ba0e7" }), /* @__PURE__ */ React12__default.default.createElement("path", { d: "M10 9V14M10 6H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+var ErrorIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#e95555" }), /* @__PURE__ */ React12__default.default.createElement("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+var WarnIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#ebe361" }), /* @__PURE__ */ React12__default.default.createElement("path", { d: "M10 6V11M10 14H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+var CloseIconSvg = () => /* @__PURE__ */ React12__default.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("path", { d: "M9 3L3 9M3 3L9 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }));
 var Toast = ({
   variant = "info",
   message,
@@ -1706,8 +1785,8 @@ var Toast = ({
   className,
   style
 }) => {
-  const [visible, setVisible] = React11.useState(true);
-  React11.useEffect(() => {
+  const [visible, setVisible] = React12.useState(true);
+  React12.useEffect(() => {
     if (duration > 0) {
       const timer = setTimeout(() => {
         setVisible(false);
@@ -1724,13 +1803,13 @@ var Toast = ({
     return null;
   }
   const defaultIcons = {
-    success: /* @__PURE__ */ React11__default.default.createElement(SuccessIcon, null),
-    info: /* @__PURE__ */ React11__default.default.createElement(InfoIcon, null),
-    error: /* @__PURE__ */ React11__default.default.createElement(ErrorIcon, null),
-    warn: /* @__PURE__ */ React11__default.default.createElement(WarnIcon, null)
+    success: /* @__PURE__ */ React12__default.default.createElement(SuccessIcon, null),
+    info: /* @__PURE__ */ React12__default.default.createElement(InfoIcon, null),
+    error: /* @__PURE__ */ React12__default.default.createElement(ErrorIcon, null),
+    warn: /* @__PURE__ */ React12__default.default.createElement(WarnIcon, null)
   };
   const iconElement = icon || defaultIcons[variant];
-  return /* @__PURE__ */ React11__default.default.createElement(
+  return /* @__PURE__ */ React12__default.default.createElement(
     ToastContainer,
     {
       $variant: variant,
@@ -1739,9 +1818,9 @@ var Toast = ({
       role: "alert",
       "aria-live": "polite"
     },
-    showIcon && /* @__PURE__ */ React11__default.default.createElement(IconWrapper3, { $variant: variant }, iconElement),
-    /* @__PURE__ */ React11__default.default.createElement(Message, null, message),
-    actionText && onAction && /* @__PURE__ */ React11__default.default.createElement(
+    showIcon && /* @__PURE__ */ React12__default.default.createElement(IconWrapper3, { $variant: variant }, iconElement),
+    /* @__PURE__ */ React12__default.default.createElement(Message, null, message),
+    actionText && onAction && /* @__PURE__ */ React12__default.default.createElement(
       ActionButton,
       {
         $variant: variant,
@@ -1750,19 +1829,19 @@ var Toast = ({
       },
       actionText
     ),
-    closable && /* @__PURE__ */ React11__default.default.createElement(
+    closable && /* @__PURE__ */ React12__default.default.createElement(
       CloseButton,
       {
         onClick: handleClose,
         type: "button",
         "aria-label": "Close"
       },
-      /* @__PURE__ */ React11__default.default.createElement(CloseIconSvg, null)
+      /* @__PURE__ */ React12__default.default.createElement(CloseIconSvg, null)
     )
   );
 };
 Toast.displayName = "Toast";
-var ToastContext = React11.createContext(null);
+var ToastContext = React12.createContext(null);
 var ToastWrapper = styled3__default.default.div`
   position: fixed;
   top: 24px;
@@ -1782,8 +1861,8 @@ var ToastContainer2 = ({
   defaultDuration = 3e3,
   children
 }) => {
-  const [toasts, setToasts] = React11.useState([]);
-  const showToast = React11.useCallback((props) => {
+  const [toasts, setToasts] = React12.useState([]);
+  const showToast = React12.useCallback((props) => {
     const id = `toast-${Date.now()}-${Math.random()}`;
     const newToast = {
       ...props,
@@ -1796,19 +1875,19 @@ var ToastContainer2 = ({
     });
     return id;
   }, [maxCount, defaultDuration]);
-  const hideToast = React11.useCallback((id) => {
+  const hideToast = React12.useCallback((id) => {
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   }, []);
-  const success = React11.useCallback((message, options) => {
+  const success = React12.useCallback((message, options) => {
     return showToast({ ...options, variant: "success", message });
   }, [showToast]);
-  const info = React11.useCallback((message, options) => {
+  const info = React12.useCallback((message, options) => {
     return showToast({ ...options, variant: "info", message });
   }, [showToast]);
-  const error = React11.useCallback((message, options) => {
+  const error = React12.useCallback((message, options) => {
     return showToast({ ...options, variant: "error", message });
   }, [showToast]);
-  const warn = React11.useCallback((message, options) => {
+  const warn = React12.useCallback((message, options) => {
     return showToast({ ...options, variant: "warn", message });
   }, [showToast]);
   const contextValue = {
@@ -1819,7 +1898,7 @@ var ToastContainer2 = ({
     error,
     warn
   };
-  return /* @__PURE__ */ React11__default.default.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React11__default.default.createElement(ToastWrapper, null, toasts.map((toast) => /* @__PURE__ */ React11__default.default.createElement(
+  return /* @__PURE__ */ React12__default.default.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React12__default.default.createElement(ToastWrapper, null, toasts.map((toast) => /* @__PURE__ */ React12__default.default.createElement(
     Toast,
     {
       key: toast.id,
@@ -1829,7 +1908,7 @@ var ToastContainer2 = ({
   ))));
 };
 var useToast = () => {
-  const context = React11.useContext(ToastContext);
+  const context = React12.useContext(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within ToastContainer");
   }
@@ -1959,11 +2038,11 @@ var Tabs = ({
   className,
   style
 }) => {
-  const [internalActiveKey, setInternalActiveKey] = React11.useState(
+  const [internalActiveKey, setInternalActiveKey] = React12.useState(
     controlledActiveKey ?? defaultActiveKey ?? items[0]?.key ?? ""
   );
   const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey;
-  const handleTabClick = React11.useCallback(
+  const handleTabClick = React12.useCallback(
     (key, disabled) => {
       if (disabled) return;
       if (controlledActiveKey === void 0) {
@@ -1973,7 +2052,7 @@ var Tabs = ({
     },
     [controlledActiveKey, onChange]
   );
-  return /* @__PURE__ */ React11__default.default.createElement(TabContainer, { className, style }, /* @__PURE__ */ React11__default.default.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React11__default.default.createElement(
+  return /* @__PURE__ */ React12__default.default.createElement(TabContainer, { className, style }, /* @__PURE__ */ React12__default.default.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React12__default.default.createElement(
     TabItem,
     {
       key: item.key,
@@ -1987,7 +2066,7 @@ var Tabs = ({
       disabled: item.disabled,
       type: "button"
     },
-    item.icon && /* @__PURE__ */ React11__default.default.createElement("span", null, item.icon),
+    item.icon && /* @__PURE__ */ React12__default.default.createElement("span", null, item.icon),
     item.label
   ))));
 };
@@ -2004,7 +2083,7 @@ var Tooltip = ({
   getPopupContainer,
   ...rest
 }) => {
-  const overlayContent = React11__default.default.useMemo(() => /* @__PURE__ */ React11__default.default.createElement("div", null, content), [content]);
+  const overlayContent = React12__default.default.useMemo(() => /* @__PURE__ */ React12__default.default.createElement("div", null, content), [content]);
   const variantClass = `tooltip-variant-${variant}`;
   const sizeClass = variant === "white" ? `tooltip-size-${size}` : "";
   const combinedClassName = [variantClass, sizeClass, overlayClassName].filter(Boolean).join(" ");
@@ -2017,7 +2096,7 @@ var Tooltip = ({
     ...getPopupContainer && { getPopupContainer },
     ...rest
   };
-  return /* @__PURE__ */ React11__default.default.createElement(RcTooltip__default.default, { ...tooltipProps }, children);
+  return /* @__PURE__ */ React12__default.default.createElement(RcTooltip__default.default, { ...tooltipProps }, children);
 };
 Tooltip.displayName = "Tooltip";
 var paddingDistance = "5px";
@@ -2280,7 +2359,7 @@ var TooltipGlobalStyles = styled3.createGlobalStyle`
     border-bottom-color: ${({ theme }) => theme.components.tooltip.white.large.background};
   }
 `;
-var UIConfigContext = React11.createContext(null);
+var UIConfigContext = React12.createContext(null);
 var UIConfigProvider = ({
   config,
   children
@@ -2296,7 +2375,7 @@ var UIConfigProvider = ({
   };
   const Provider = styled3.ThemeProvider;
   const TooltipStyles = TooltipGlobalStyles;
-  return /* @__PURE__ */ React11__default.default.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React11__default.default.createElement(Provider, { theme }, /* @__PURE__ */ React11__default.default.createElement(TooltipStyles, null), /* @__PURE__ */ React11__default.default.createElement(IconProvider, { icons }, /* @__PURE__ */ React11__default.default.createElement(
+  return /* @__PURE__ */ React12__default.default.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React12__default.default.createElement(Provider, { theme }, /* @__PURE__ */ React12__default.default.createElement(TooltipStyles, null), /* @__PURE__ */ React12__default.default.createElement(IconProvider, { icons }, /* @__PURE__ */ React12__default.default.createElement(
     ToastContainer2,
     {
       maxCount: toastConfig.maxCount,
@@ -2306,7 +2385,7 @@ var UIConfigProvider = ({
   ))));
 };
 var useUIConfig = () => {
-  const context = React11.useContext(UIConfigContext);
+  const context = React12.useContext(UIConfigContext);
   if (!context) {
     throw new Error("useUIConfig must be used within UIConfigProvider");
   }
@@ -2386,6 +2465,7 @@ exports.Checkbox = Checkbox;
 exports.Icon = Icon;
 exports.IconProvider = IconProvider;
 exports.Input = Input;
+exports.NumberInput = NumberInput;
 exports.Radio = Radio;
 exports.SearchInput = SearchInput;
 exports.Slider = Slider;