@officesdk/design 0.1.1 → 0.2.0

package/dist/components/index.mjs

@@ -1,4 +1,4 @@
-import React11, { forwardRef, useState, createContext, useRef, useCallback, useEffect, useContext } from 'react';
+import React12, { forwardRef, useState, createContext, useRef, useCallback, useEffect, useContext } from 'react';
 import styled3, { createGlobalStyle, ThemeProvider } from 'styled-components';
 import RcTooltip from 'rc-tooltip';
 import 'rc-tooltip/assets/bootstrap.css';
@@ -142,7 +142,7 @@ var Button = ({
 }) => {
   const isIconOnly = variant === "icon" || !children && !!(iconBefore || iconAfter);
   const iconOnlyContent = iconBefore || iconAfter;
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     StyledButton,
     {
       $variant: variant,
@@ -154,7 +154,7 @@ var Button = ({
       disabled: disabled || loading,
       ...rest
     },
-    loading ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, "Loading...") : isIconOnly ? iconOnlyContent : /* @__PURE__ */ React11.createElement(React11.Fragment, null, iconBefore && /* @__PURE__ */ React11.createElement(IconWrapper, { $size: size, $position: "before" }, iconBefore), children, iconAfter && /* @__PURE__ */ React11.createElement(IconWrapper, { $size: size, $position: "after" }, iconAfter))
+    loading ? /* @__PURE__ */ React12.createElement(React12.Fragment, null, "Loading...") : isIconOnly ? iconOnlyContent : /* @__PURE__ */ React12.createElement(React12.Fragment, null, iconBefore && /* @__PURE__ */ React12.createElement(IconWrapper, { $size: size, $position: "before" }, iconBefore), children, iconAfter && /* @__PURE__ */ React12.createElement(IconWrapper, { $size: size, $position: "after" }, iconAfter))
   );
 };
 Button.displayName = "Button";
@@ -306,7 +306,7 @@ var Slider = ({
     },
     [disabled, value, min, max, step, controlledValue, onChange]
   );
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     SliderContainer,
     {
       ref: containerRef,
@@ -322,9 +322,9 @@ var Slider = ({
       "aria-valuenow": value,
       "aria-disabled": disabled
     },
-    /* @__PURE__ */ React11.createElement(SliderTrack, { $disabled: disabled }),
-    /* @__PURE__ */ React11.createElement(SliderFill, { $percentage: percentage, $disabled: disabled }),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(SliderTrack, { $disabled: disabled }),
+    /* @__PURE__ */ React12.createElement(SliderFill, { $percentage: percentage, $disabled: disabled }),
+    /* @__PURE__ */ React12.createElement(
       SliderThumb,
       {
         $percentage: percentage,
@@ -335,23 +335,7 @@ var Slider = ({
   );
 };
 Slider.displayName = "Slider";
-
-// src/Button/SpinButton.tsx
-var SpinButtonWrapper = styled3.div`
-  display: inline-flex;
-  align-items: center;
-  gap: ${({ $showSlider }) => $showSlider ? "0" : "0"};
-  width: ${({ $showSlider }) => $showSlider ? "100%" : "auto"};
-`;
-var SliderWrapper = styled3.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.div`
+var NumberInputContainer = styled3.div`
   display: inline-flex;
   align-items: center;
   background: white;
@@ -401,6 +385,25 @@ var InputWrapper = styled3.div`
   align-items: center;
   padding: 0 8px;
   min-width: 0;
+  gap: 4px;
+`;
+var UnitText = styled3.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.input`
   width: 100%;
@@ -438,6 +441,7 @@ var StyledInput = styled3.input`
   }
 
   &[type='number'] {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
 `;
@@ -504,9 +508,9 @@ var StepButton = styled3.button`
     fill: ${({ $disabled, theme }) => $disabled ? theme.colors.palettes.transparency["30"] : theme.colors.palettes.gray["120"]};
   }
 `;
-var UpArrow = () => /* @__PURE__ */ React11.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
-var DownArrow = () => /* @__PURE__ */ React11.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11.createElement("path", { d: "M7 9.5L3.5 5.5H10.5L7 9.5Z", fill: "currentColor" }));
-var SpinButton = ({
+var UpArrow = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
+var DownArrow = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M7 9.5L3.5 5.5H10.5L7 9.5Z", fill: "currentColor" }));
+var NumberInput = ({
   value: controlledValue,
   defaultValue = 0,
   min = -Infinity,
@@ -515,10 +519,10 @@ var SpinButton = ({
   size = "large",
   disabled = false,
   alert = false,
-  showSlider = false,
   precision,
   formatter,
   parser,
+  unit,
   onChange,
   className,
   style
@@ -609,7 +613,105 @@ var SpinButton = ({
     },
     [increment, decrement]
   );
-  return /* @__PURE__ */ React11.createElement(SpinButtonWrapper, { $showSlider: showSlider, className, style }, showSlider && /* @__PURE__ */ React11.createElement(SliderWrapper, { $size: size }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
+    NumberInputContainer,
+    {
+      $size: size,
+      $disabled: disabled,
+      $alert: alert,
+      $isFocused: isFocused,
+      className,
+      style
+    },
+    /* @__PURE__ */ React12.createElement(InputWrapper, null, /* @__PURE__ */ React12.createElement(
+      StyledInput,
+      {
+        ref: inputRef,
+        type: "text",
+        value: displayValue,
+        onChange: handleInputChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        disabled,
+        $size: size,
+        $disabled: disabled
+      }
+    ), unit && /* @__PURE__ */ React12.createElement(UnitText, { $size: size, $disabled: disabled }, unit)),
+    /* @__PURE__ */ React12.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React12.createElement(
+      StepButton,
+      {
+        type: "button",
+        $position: "up",
+        $alert: alert,
+        $disabled: disabled,
+        onClick: increment,
+        disabled,
+        tabIndex: -1
+      },
+      /* @__PURE__ */ React12.createElement(UpArrow, null)
+    ), /* @__PURE__ */ React12.createElement(
+      StepButton,
+      {
+        type: "button",
+        $position: "down",
+        $alert: alert,
+        $disabled: disabled,
+        onClick: decrement,
+        disabled,
+        tabIndex: -1
+      },
+      /* @__PURE__ */ React12.createElement(DownArrow, null)
+    ))
+  );
+};
+NumberInput.displayName = "NumberInput";
+
+// src/Button/SpinButton.tsx
+var SpinButtonWrapper = styled3.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ $showSlider }) => $showSlider ? "0" : "0"};
+  width: ${({ $showSlider }) => $showSlider ? "100%" : "auto"};
+`;
+var SliderWrapper = styled3.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] = useState(controlledValue ?? defaultValue);
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const handleValueChange = useCallback(
+    (newValue) => {
+      if (newValue === null) return;
+      if (controlledValue === void 0) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [controlledValue, onChange]
+  );
+  return /* @__PURE__ */ React12.createElement(SpinButtonWrapper, { $showSlider: showSlider, className, style }, showSlider && /* @__PURE__ */ React12.createElement(SliderWrapper, { $size: size }, /* @__PURE__ */ React12.createElement(
     Slider,
     {
       value,
@@ -617,47 +719,24 @@ var SpinButton = ({
       max,
       step,
       disabled,
-      onChange: (val) => handleValueChange(val)
+      onChange: handleValueChange
     }
-  )), /* @__PURE__ */ React11.createElement(SpinButtonContainer, { $size: size, $disabled: disabled, $alert: alert, $isFocused: isFocused }, /* @__PURE__ */ React11.createElement(InputWrapper, null, /* @__PURE__ */ React11.createElement(
-    StyledInput,
+  )), /* @__PURE__ */ React12.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.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React11.createElement(
-    StepButton,
-    {
-      type: "button",
-      $position: "up",
-      $alert: alert,
-      $disabled: disabled,
-      onClick: increment,
-      disabled,
-      tabIndex: -1
-    },
-    /* @__PURE__ */ React11.createElement(UpArrow, null)
-  ), /* @__PURE__ */ React11.createElement(
-    StepButton,
-    {
-      type: "button",
-      $position: "down",
-      $alert: alert,
-      $disabled: disabled,
-      onClick: decrement,
-      disabled,
-      tabIndex: -1
-    },
-    /* @__PURE__ */ React11.createElement(DownArrow, null)
-  ))));
+  ));
 };
 SpinButton.displayName = "SpinButton";
 var SwitchContainer = styled3.label`
@@ -804,7 +883,7 @@ var Switch = ({
   const handleBlur = useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     SwitchContainer,
     {
       $size: size,
@@ -813,7 +892,7 @@ var Switch = ({
       className,
       style
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       HiddenInput,
       {
         type: "checkbox",
@@ -824,7 +903,7 @@ var Switch = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       Track,
       {
         $size: size,
@@ -833,7 +912,7 @@ var Switch = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       Thumb,
       {
         $size: size,
@@ -960,14 +1039,14 @@ var Radio = ({
   const handleBlur = useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     RadioContainer,
     {
       $disabled: disabled,
       className,
       style
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       HiddenInput2,
       {
         type: "radio",
@@ -981,7 +1060,7 @@ var Radio = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       RadioOuter,
       {
         $checked: checked,
@@ -989,7 +1068,7 @@ var Radio = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       RadioInner,
       {
         $checked: checked,
@@ -1145,14 +1224,14 @@ var Checkbox = ({
   const handleBlur = useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     CheckboxContainer,
     {
       $disabled: disabled,
       className,
       style
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       HiddenInput3,
       {
         ref: inputRef,
@@ -1167,7 +1246,7 @@ var Checkbox = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       CheckboxBox,
       {
         $checked: checked,
@@ -1176,8 +1255,8 @@ var Checkbox = ({
         $isFocused: isFocused
       }
     ),
-    !indeterminate && /* @__PURE__ */ React11.createElement(IconWrapper2, { $visible: checked }, /* @__PURE__ */ React11.createElement("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "#fff" }, /* @__PURE__ */ React11.createElement("path", { d: "M1.05426 3.16164L0 4.27945L3.50904 8L10 1.11781L8.94573 0L3.50904 5.76438L1.05426 3.16164Z" }))),
-    indeterminate && /* @__PURE__ */ React11.createElement(IconWrapper2, { $visible: indeterminate }, /* @__PURE__ */ React11.createElement(DefaultIndeterminateIcon, null))
+    !indeterminate && /* @__PURE__ */ React12.createElement(IconWrapper2, { $visible: checked }, /* @__PURE__ */ React12.createElement("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "#fff" }, /* @__PURE__ */ React12.createElement("path", { d: "M1.05426 3.16164L0 4.27945L3.50904 8L10 1.11781L8.94573 0L3.50904 5.76438L1.05426 3.16164Z" }))),
+    indeterminate && /* @__PURE__ */ React12.createElement(IconWrapper2, { $visible: indeterminate }, /* @__PURE__ */ React12.createElement(DefaultIndeterminateIcon, null))
   );
 };
 Checkbox.displayName = "Checkbox";
@@ -1330,7 +1409,7 @@ var Input = forwardRef(
       setIsFocused(false);
       onBlur?.(e);
     };
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(
       InputWrapper2,
       {
         $size: size,
@@ -1341,8 +1420,8 @@ var Input = forwardRef(
         className,
         style
       },
-      prefixNode && /* @__PURE__ */ React11.createElement(PrefixNode, { $size: size }, prefixNode),
-      /* @__PURE__ */ React11.createElement(
+      prefixNode && /* @__PURE__ */ React12.createElement(PrefixNode, { $size: size }, prefixNode),
+      /* @__PURE__ */ React12.createElement(
         StyledInput2,
         {
           ref,
@@ -1356,7 +1435,7 @@ var Input = forwardRef(
           ...rest
         }
       ),
-      suffixNode && /* @__PURE__ */ React11.createElement(SuffixNode, { $size: size }, suffixNode)
+      suffixNode && /* @__PURE__ */ React12.createElement(SuffixNode, { $size: size }, suffixNode)
     );
   }
 );
@@ -1416,7 +1495,7 @@ var ClearButton = styled3.button`
     opacity: 0.5;
   }
 `;
-var DefaultSearchIcon = () => /* @__PURE__ */ React11.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11.createElement(
+var DefaultSearchIcon = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.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",
@@ -1425,7 +1504,7 @@ var DefaultSearchIcon = () => /* @__PURE__ */ React11.createElement("svg", { vie
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }
-), /* @__PURE__ */ React11.createElement(
+), /* @__PURE__ */ React12.createElement(
   "path",
   {
     d: "M14 14L11.1 11.1",
@@ -1435,7 +1514,7 @@ var DefaultSearchIcon = () => /* @__PURE__ */ React11.createElement("svg", { vie
     strokeLinejoin: "round"
   }
 ));
-var DefaultCloseIcon = () => /* @__PURE__ */ React11.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11.createElement(
+var DefaultCloseIcon = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement(
   "path",
   {
     d: "M12 4L4 12",
@@ -1444,7 +1523,7 @@ var DefaultCloseIcon = () => /* @__PURE__ */ React11.createElement("svg", { view
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }
-), /* @__PURE__ */ React11.createElement(
+), /* @__PURE__ */ React12.createElement(
   "path",
   {
     d: "M4 4L12 12",
@@ -1482,8 +1561,8 @@ var SearchInput = forwardRef(
       }
       onClear?.();
     };
-    const prefixNode = /* @__PURE__ */ React11.createElement(SearchIconWrapper, { $size: size }, searchIcon || /* @__PURE__ */ React11.createElement(DefaultSearchIcon, null));
-    const suffixNode = clearable && currentValue && !disabled && !readOnly ? /* @__PURE__ */ React11.createElement(
+    const prefixNode = /* @__PURE__ */ React12.createElement(SearchIconWrapper, { $size: size }, searchIcon || /* @__PURE__ */ React12.createElement(DefaultSearchIcon, null));
+    const suffixNode = clearable && currentValue && !disabled && !readOnly ? /* @__PURE__ */ React12.createElement(
       ClearButton,
       {
         $size: size,
@@ -1491,9 +1570,9 @@ var SearchInput = forwardRef(
         type: "button",
         tabIndex: -1
       },
-      /* @__PURE__ */ React11.createElement(DefaultCloseIcon, null)
+      /* @__PURE__ */ React12.createElement(DefaultCloseIcon, null)
     ) : null;
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(
       Input,
       {
         ref,
@@ -1515,7 +1594,7 @@ var IconProvider = ({
   icons,
   children
 }) => {
-  return /* @__PURE__ */ React11.createElement(IconContext.Provider, { value: icons }, children);
+  return /* @__PURE__ */ React12.createElement(IconContext.Provider, { value: icons }, children);
 };
 var useIconRegistry = () => {
   return useContext(IconContext);
@@ -1553,7 +1632,7 @@ var Icon = ({
   const registry = useIconRegistry();
   let iconElement = children;
   if (!iconElement && src) {
-    iconElement = /* @__PURE__ */ React11.createElement(
+    iconElement = /* @__PURE__ */ React12.createElement(
       "img",
       {
         src,
@@ -1565,7 +1644,7 @@ var Icon = ({
   if (!iconElement && name && registry) {
     const IconComponent = registry[name];
     if (IconComponent) {
-      iconElement = /* @__PURE__ */ React11.createElement(IconComponent, null);
+      iconElement = /* @__PURE__ */ React12.createElement(IconComponent, null);
     } else if (process.env.NODE_ENV !== "production") {
       console.warn(`Icon "${name}" not found in registry. Make sure IconProvider is set up.`);
     }
@@ -1576,7 +1655,7 @@ var Icon = ({
     }
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     IconContainer,
     {
       $size: size,
@@ -1680,11 +1759,11 @@ var CloseButton = styled3.button`
     color: ${({ theme }) => theme.colors.palettes.gray["120"]};
   }
 `;
-var SuccessIcon = () => /* @__PURE__ */ React11.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React11.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
-var InfoIcon = () => /* @__PURE__ */ React11.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#5ba0e7" }), /* @__PURE__ */ React11.createElement("path", { d: "M10 9V14M10 6H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var ErrorIcon = () => /* @__PURE__ */ React11.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#e95555" }), /* @__PURE__ */ React11.createElement("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var WarnIcon = () => /* @__PURE__ */ React11.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#ebe361" }), /* @__PURE__ */ React11.createElement("path", { d: "M10 6V11M10 14H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var CloseIconSvg = () => /* @__PURE__ */ React11.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11.createElement("path", { d: "M9 3L3 9M3 3L9 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }));
+var SuccessIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React12.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var InfoIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#5ba0e7" }), /* @__PURE__ */ React12.createElement("path", { d: "M10 9V14M10 6H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+var ErrorIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#e95555" }), /* @__PURE__ */ React12.createElement("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+var WarnIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#ebe361" }), /* @__PURE__ */ React12.createElement("path", { d: "M10 6V11M10 14H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+var CloseIconSvg = () => /* @__PURE__ */ React12.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M9 3L3 9M3 3L9 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }));
 var Toast = ({
   variant = "info",
   message,
@@ -1716,13 +1795,13 @@ var Toast = ({
     return null;
   }
   const defaultIcons = {
-    success: /* @__PURE__ */ React11.createElement(SuccessIcon, null),
-    info: /* @__PURE__ */ React11.createElement(InfoIcon, null),
-    error: /* @__PURE__ */ React11.createElement(ErrorIcon, null),
-    warn: /* @__PURE__ */ React11.createElement(WarnIcon, null)
+    success: /* @__PURE__ */ React12.createElement(SuccessIcon, null),
+    info: /* @__PURE__ */ React12.createElement(InfoIcon, null),
+    error: /* @__PURE__ */ React12.createElement(ErrorIcon, null),
+    warn: /* @__PURE__ */ React12.createElement(WarnIcon, null)
   };
   const iconElement = icon || defaultIcons[variant];
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     ToastContainer,
     {
       $variant: variant,
@@ -1731,9 +1810,9 @@ var Toast = ({
       role: "alert",
       "aria-live": "polite"
     },
-    showIcon && /* @__PURE__ */ React11.createElement(IconWrapper3, { $variant: variant }, iconElement),
-    /* @__PURE__ */ React11.createElement(Message, null, message),
-    actionText && onAction && /* @__PURE__ */ React11.createElement(
+    showIcon && /* @__PURE__ */ React12.createElement(IconWrapper3, { $variant: variant }, iconElement),
+    /* @__PURE__ */ React12.createElement(Message, null, message),
+    actionText && onAction && /* @__PURE__ */ React12.createElement(
       ActionButton,
       {
         $variant: variant,
@@ -1742,14 +1821,14 @@ var Toast = ({
       },
       actionText
     ),
-    closable && /* @__PURE__ */ React11.createElement(
+    closable && /* @__PURE__ */ React12.createElement(
       CloseButton,
       {
         onClick: handleClose,
         type: "button",
         "aria-label": "Close"
       },
-      /* @__PURE__ */ React11.createElement(CloseIconSvg, null)
+      /* @__PURE__ */ React12.createElement(CloseIconSvg, null)
     )
   );
 };
@@ -1811,7 +1890,7 @@ var ToastContainer2 = ({
     error,
     warn
   };
-  return /* @__PURE__ */ React11.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React11.createElement(ToastWrapper, null, toasts.map((toast) => /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React12.createElement(ToastWrapper, null, toasts.map((toast) => /* @__PURE__ */ React12.createElement(
     Toast,
     {
       key: toast.id,
@@ -1965,7 +2044,7 @@ var Tabs = ({
     },
     [controlledActiveKey, onChange]
   );
-  return /* @__PURE__ */ React11.createElement(TabContainer, { className, style }, /* @__PURE__ */ React11.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(TabContainer, { className, style }, /* @__PURE__ */ React12.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React12.createElement(
     TabItem,
     {
       key: item.key,
@@ -1979,7 +2058,7 @@ var Tabs = ({
       disabled: item.disabled,
       type: "button"
     },
-    item.icon && /* @__PURE__ */ React11.createElement("span", null, item.icon),
+    item.icon && /* @__PURE__ */ React12.createElement("span", null, item.icon),
     item.label
   ))));
 };
@@ -1996,7 +2075,7 @@ var Tooltip = ({
   getPopupContainer,
   ...rest
 }) => {
-  const overlayContent = React11.useMemo(() => /* @__PURE__ */ React11.createElement("div", null, content), [content]);
+  const overlayContent = React12.useMemo(() => /* @__PURE__ */ React12.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(" ");
@@ -2009,7 +2088,7 @@ var Tooltip = ({
     ...getPopupContainer && { getPopupContainer },
     ...rest
   };
-  return /* @__PURE__ */ React11.createElement(RcTooltip, { ...tooltipProps }, children);
+  return /* @__PURE__ */ React12.createElement(RcTooltip, { ...tooltipProps }, children);
 };
 Tooltip.displayName = "Tooltip";
 var paddingDistance = "5px";
@@ -2288,7 +2367,7 @@ var UIConfigProvider = ({
   };
   const Provider = ThemeProvider;
   const TooltipStyles = TooltipGlobalStyles;
-  return /* @__PURE__ */ React11.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React11.createElement(Provider, { theme }, /* @__PURE__ */ React11.createElement(TooltipStyles, null), /* @__PURE__ */ React11.createElement(IconProvider, { icons }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React12.createElement(Provider, { theme }, /* @__PURE__ */ React12.createElement(TooltipStyles, null), /* @__PURE__ */ React12.createElement(IconProvider, { icons }, /* @__PURE__ */ React12.createElement(
     ToastContainer2,
     {
       maxCount: toastConfig.maxCount,
@@ -2373,6 +2452,6 @@ var mergeUIConfig = (baseConfig, ...configs) => {
   return merged;
 };
 
-export { Button, Checkbox, Icon, IconProvider, Input, Radio, SearchInput, Slider, SpinButton, Switch, Tabs, Toast, ToastContainer2 as ToastContainer, Tooltip, UIConfigProvider, createUIConfig, mergeUIConfig, useIconRegistry, useToast, useUIConfig };
+export { Button, Checkbox, Icon, IconProvider, Input, NumberInput, Radio, SearchInput, Slider, SpinButton, Switch, Tabs, Toast, ToastContainer2 as ToastContainer, Tooltip, UIConfigProvider, createUIConfig, mergeUIConfig, useIconRegistry, useToast, useUIConfig };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map