@officesdk/design 0.1.0 → 0.1.2

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';
@@ -137,14 +137,12 @@ var Button = ({
   iconBefore,
   iconAfter,
   iconBordered = false,
-  onClick,
   children,
-  className,
-  style
+  ...rest
 }) => {
   const isIconOnly = variant === "icon" || !children && !!(iconBefore || iconAfter);
   const iconOnlyContent = iconBefore || iconAfter;
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     StyledButton,
     {
       $variant: variant,
@@ -154,11 +152,9 @@ var Button = ({
       $isIconOnly: isIconOnly,
       $iconBordered: iconBordered,
       disabled: disabled || loading,
-      onClick,
-      className,
-      style
+      ...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";
@@ -310,7 +306,7 @@ var Slider = ({
     },
     [disabled, value, min, max, step, controlledValue, onChange]
   );
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     SliderContainer,
     {
       ref: containerRef,
@@ -326,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,
@@ -339,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;
@@ -405,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%;
@@ -442,6 +441,7 @@ var StyledInput = styled3.input`
   }
 
   &[type='number'] {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
 `;
@@ -508,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,
@@ -519,10 +519,10 @@ var SpinButton = ({
   size = "large",
   disabled = false,
   alert = false,
-  showSlider = false,
   precision,
   formatter,
   parser,
+  unit,
   onChange,
   className,
   style
@@ -613,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,
@@ -621,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`
@@ -808,7 +883,7 @@ var Switch = ({
   const handleBlur = useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     SwitchContainer,
     {
       $size: size,
@@ -817,7 +892,7 @@ var Switch = ({
       className,
       style
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       HiddenInput,
       {
         type: "checkbox",
@@ -828,7 +903,7 @@ var Switch = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       Track,
       {
         $size: size,
@@ -837,7 +912,7 @@ var Switch = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       Thumb,
       {
         $size: size,
@@ -964,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",
@@ -985,7 +1060,7 @@ var Radio = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       RadioOuter,
       {
         $checked: checked,
@@ -993,7 +1068,7 @@ var Radio = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       RadioInner,
       {
         $checked: checked,
@@ -1149,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,
@@ -1171,7 +1246,7 @@ var Checkbox = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       CheckboxBox,
       {
         $checked: checked,
@@ -1180,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";
@@ -1334,7 +1409,7 @@ var Input = forwardRef(
       setIsFocused(false);
       onBlur?.(e);
     };
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(
       InputWrapper2,
       {
         $size: size,
@@ -1345,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,
@@ -1360,7 +1435,7 @@ var Input = forwardRef(
           ...rest
         }
       ),
-      suffixNode && /* @__PURE__ */ React11.createElement(SuffixNode, { $size: size }, suffixNode)
+      suffixNode && /* @__PURE__ */ React12.createElement(SuffixNode, { $size: size }, suffixNode)
     );
   }
 );
@@ -1420,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",
@@ -1429,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",
@@ -1439,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",
@@ -1448,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",
@@ -1486,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,
@@ -1495,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,
@@ -1519,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);
@@ -1557,7 +1632,7 @@ var Icon = ({
   const registry = useIconRegistry();
   let iconElement = children;
   if (!iconElement && src) {
-    iconElement = /* @__PURE__ */ React11.createElement(
+    iconElement = /* @__PURE__ */ React12.createElement(
       "img",
       {
         src,
@@ -1569,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.`);
     }
@@ -1580,7 +1655,7 @@ var Icon = ({
     }
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     IconContainer,
     {
       $size: size,
@@ -1684,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,
@@ -1720,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,
@@ -1735,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,
@@ -1746,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)
     )
   );
 };
@@ -1815,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,
@@ -1969,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,
@@ -1983,20 +2058,44 @@ 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
   ))));
 };
 Tabs.displayName = "Tab";
+var Tooltip = ({
+  content,
+  variant = "black",
+  size = "small",
+  children,
+  placement = "top",
+  trigger = ["hover"],
+  overlay,
+  overlayClassName,
+  getPopupContainer,
+  ...rest
+}) => {
+  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(" ");
+  const tooltipProps = {
+    overlay: overlay ?? overlayContent,
+    placement,
+    trigger,
+    destroyTooltipOnHide: false,
+    overlayClassName: combinedClassName,
+    ...getPopupContainer && { getPopupContainer },
+    ...rest
+  };
+  return /* @__PURE__ */ React12.createElement(RcTooltip, { ...tooltipProps }, children);
+};
+Tooltip.displayName = "Tooltip";
+var paddingDistance = "5px";
+var positionDistance = "0";
 var TooltipGlobalStyles = createGlobalStyle`
   .rc-tooltip {
-    position: absolute;
-    z-index: 1070;
-    display: block;
-    visibility: visible;
-    font-size: 12px;
-    line-height: 1.5;
-    opacity: 0;
+    opacity: 1;
   }
 
   .rc-tooltip-hidden {
@@ -2006,65 +2105,30 @@ var TooltipGlobalStyles = createGlobalStyle`
   .rc-tooltip-placement-top,
   .rc-tooltip-placement-topLeft,
   .rc-tooltip-placement-topRight {
-    padding-bottom: 8px;
+    padding-bottom: ${paddingDistance};
   }
 
   .rc-tooltip-placement-right,
   .rc-tooltip-placement-rightTop,
   .rc-tooltip-placement-rightBottom {
-    padding-left: 8px;
+    padding-left: ${paddingDistance};
   }
 
   .rc-tooltip-placement-bottom,
   .rc-tooltip-placement-bottomLeft,
   .rc-tooltip-placement-bottomRight {
-    padding-top: 8px;
+    padding-top: ${paddingDistance};
   }
 
   .rc-tooltip-placement-left,
   .rc-tooltip-placement-leftTop,
   .rc-tooltip-placement-leftBottom {
-    padding-right: 8px;
+    padding-right: ${paddingDistance};
   }
 
   .rc-tooltip-inner {
-    /* istanbul ignore next - styled-components CSS generation */
-    ${({ $variant, $size, theme }) => {
-  if ($variant === "black") {
-    const config = theme.components.tooltip.black;
-    return `
-          background: ${config.background};
-          border: 1px solid ${config.borderColor};
-          color: ${config.color};
-          border-radius: ${config.borderRadius};
-          padding: ${config.padding};
-          box-shadow: ${config.boxShadow};
-          font-size: ${config.fontSize};
-          line-height: ${config.lineHeight};
-          font-weight: ${config.fontWeight};
-          max-width: ${config.maxWidth};
-          text-align: left;
-          text-decoration: none;
-          word-wrap: break-word;
-        `;
-  } else {
-    const sizeConfig = theme.components.tooltip.white[$size || "small"];
-    return `
-          background: ${sizeConfig.background};
-          border: 1px solid ${sizeConfig.borderColor};
-          color: ${sizeConfig.color};
-          border-radius: ${sizeConfig.borderRadius};
-          padding: ${sizeConfig.padding};
-          box-shadow: ${sizeConfig.boxShadow};
-          font-size: ${sizeConfig.fontSize};
-          line-height: ${sizeConfig.lineHeight};
-          font-weight: ${sizeConfig.fontWeight};
-          text-align: left;
-          text-decoration: none;
-          word-wrap: break-word;
-        `;
-  }
-}}
+    word-wrap: break-word;
+    min-height: unset;
   }
 
   .rc-tooltip-arrow {
@@ -2075,48 +2139,6 @@ var TooltipGlobalStyles = createGlobalStyle`
     border-style: solid;
   }
 
-  /* istanbul ignore next - styled-components CSS generation */
-  ${({ $variant, theme }) => {
-  const bgColor = $variant === "black" ? theme.components?.tooltip?.black?.background : theme.components?.tooltip?.white?.small?.background;
-  return `
-      .rc-tooltip-placement-top .rc-tooltip-arrow,
-      .rc-tooltip-placement-topLeft .rc-tooltip-arrow,
-      .rc-tooltip-placement-topRight .rc-tooltip-arrow {
-        bottom: 3px;
-        margin-left: -5px;
-        border-width: 5px 5px 0;
-        border-top-color: ${bgColor};
-      }
-
-      .rc-tooltip-placement-right .rc-tooltip-arrow,
-      .rc-tooltip-placement-rightTop .rc-tooltip-arrow,
-      .rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
-        left: 3px;
-        margin-top: -5px;
-        border-width: 5px 5px 5px 0;
-        border-right-color: ${bgColor};
-      }
-
-      .rc-tooltip-placement-left .rc-tooltip-arrow,
-      .rc-tooltip-placement-leftTop .rc-tooltip-arrow,
-      .rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
-        right: 3px;
-        margin-top: -5px;
-        border-width: 5px 0 5px 5px;
-        border-left-color: ${bgColor};
-      }
-
-      .rc-tooltip-placement-bottom .rc-tooltip-arrow,
-      .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
-      .rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
-        top: 3px;
-        margin-left: -5px;
-        border-width: 0 5px 5px;
-        border-bottom-color: ${bgColor};
-      }
-    `;
-}}
-
   .rc-tooltip.rc-tooltip-zoom-enter,
   .rc-tooltip.rc-tooltip-zoom-leave {
     display: block;
@@ -2174,20 +2196,161 @@ var TooltipGlobalStyles = createGlobalStyle`
       transform: scale(0, 0);
     }
   }
+
+  /* Black variant */
+  .tooltip-variant-black .rc-tooltip-inner {
+    background: ${({ theme }) => theme.components.tooltip.black.background};
+    border: 1px solid ${({ theme }) => theme.components.tooltip.black.borderColor};
+    color: ${({ theme }) => theme.components.tooltip.black.color};
+    border-radius: ${({ theme }) => theme.components.tooltip.black.borderRadius};
+    padding: ${({ theme }) => theme.components.tooltip.black.padding};
+    box-shadow: ${({ theme }) => theme.components.tooltip.black.boxShadow};
+    font-size: ${({ theme }) => theme.components.tooltip.black.fontSize};
+    line-height: ${({ theme }) => theme.components.tooltip.black.lineHeight};
+    font-weight: ${({ theme }) => theme.components.tooltip.black.fontWeight};
+    max-width: ${({ theme }) => theme.components.tooltip.black.maxWidth};
+    text-align: left;
+    text-decoration: none;
+  }
+
+  .tooltip-variant-black.rc-tooltip-placement-top .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+    bottom: ${positionDistance};
+    margin-left: -5px;
+    border-width: 5px 5px 0;
+    border-top-color: ${({ theme }) => theme.components.tooltip.black.background};
+  }
+
+  .tooltip-variant-black.rc-tooltip-placement-right .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+    left: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 5px 5px 0;
+    border-right-color: ${({ theme }) => theme.components.tooltip.black.background};
+  }
+
+  .tooltip-variant-black.rc-tooltip-placement-left .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+    right: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 0 5px 5px;
+    border-left-color: ${({ theme }) => theme.components.tooltip.black.background};
+  }
+
+  .tooltip-variant-black.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+    top: ${positionDistance};
+    margin-left: -5px;
+    border-width: 0 5px 5px;
+    border-bottom-color: ${({ theme }) => theme.components.tooltip.black.background};
+  }
+
+  /* White variant - small size */
+  .tooltip-variant-white.tooltip-size-small .rc-tooltip-inner {
+    background: ${({ theme }) => theme.components.tooltip.white.small.background};
+    border: 1px solid ${({ theme }) => theme.components.tooltip.white.small.borderColor};
+    color: ${({ theme }) => theme.components.tooltip.white.small.color};
+    border-radius: ${({ theme }) => theme.components.tooltip.white.small.borderRadius};
+    padding: ${({ theme }) => theme.components.tooltip.white.small.padding};
+    box-shadow: ${({ theme }) => theme.components.tooltip.white.small.boxShadow};
+    font-size: ${({ theme }) => theme.components.tooltip.white.small.fontSize};
+    line-height: ${({ theme }) => theme.components.tooltip.white.small.lineHeight};
+    font-weight: ${({ theme }) => theme.components.tooltip.white.small.fontWeight};
+    text-align: left;
+    text-decoration: none;
+  }
+
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-top .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+    bottom: ${positionDistance};
+    margin-left: -5px;
+    border-width: 5px 5px 0;
+    border-top-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-right .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+    left: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 5px 5px 0;
+    border-right-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-left .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+    right: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 0 5px 5px;
+    border-left-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+    top: ${positionDistance};
+    margin-left: -5px;
+    border-width: 0 5px 5px;
+    border-bottom-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+  }
+
+  /* White variant - large size */
+  .tooltip-variant-white.tooltip-size-large .rc-tooltip-inner {
+    background: ${({ theme }) => theme.components.tooltip.white.large.background};
+    border: 1px solid ${({ theme }) => theme.components.tooltip.white.large.borderColor};
+    color: ${({ theme }) => theme.components.tooltip.white.large.color};
+    border-radius: ${({ theme }) => theme.components.tooltip.white.large.borderRadius};
+    padding: ${({ theme }) => theme.components.tooltip.white.large.padding};
+    box-shadow: ${({ theme }) => theme.components.tooltip.white.large.boxShadow};
+    font-size: ${({ theme }) => theme.components.tooltip.white.large.fontSize};
+    line-height: ${({ theme }) => theme.components.tooltip.white.large.lineHeight};
+    font-weight: ${({ theme }) => theme.components.tooltip.white.large.fontWeight};
+    text-align: left;
+    text-decoration: none;
+  }
+
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-top .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+    bottom: ${positionDistance};
+    margin-left: -5px;
+    border-width: 5px 5px 0;
+    border-top-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-right .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+    left: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 5px 5px 0;
+    border-right-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-left .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+    right: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 0 5px 5px;
+    border-left-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+    top: ${positionDistance};
+    margin-left: -5px;
+    border-width: 0 5px 5px;
+    border-bottom-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+  }
 `;
-var Tooltip = ({
-  content,
-  variant = "black",
-  size = "small",
-  children,
-  placement = "top",
-  trigger = ["hover"],
-  ...rest
-}) => {
-  const GlobalStyles = TooltipGlobalStyles;
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(GlobalStyles, { $variant: variant, $size: size }), /* @__PURE__ */ React11.createElement(RcTooltip, { overlay: /* @__PURE__ */ React11.createElement("div", null, content), placement, trigger, ...rest }, children));
-};
-Tooltip.displayName = "Tooltip";
 var UIConfigContext = createContext(null);
 var UIConfigProvider = ({
   config,
@@ -2203,7 +2366,8 @@ var UIConfigProvider = ({
     defaultDuration: toast.defaultDuration ?? 3e3
   };
   const Provider = ThemeProvider;
-  return /* @__PURE__ */ React11.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React11.createElement(Provider, { theme }, /* @__PURE__ */ React11.createElement(IconProvider, { icons }, /* @__PURE__ */ React11.createElement(
+  const TooltipStyles = TooltipGlobalStyles;
+  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,
@@ -2288,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