@officesdk/design 0.2.0 → 0.2.2

package/dist/components/index.js

@@ -1,2485 +0,0 @@
-'use strict';
-
-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 React12__default = /*#__PURE__*/_interopDefault(React12);
-var styled3__default = /*#__PURE__*/_interopDefault(styled3);
-var RcTooltip__default = /*#__PURE__*/_interopDefault(RcTooltip);
-
-// src/Button/Button.tsx
-var IconWrapper = styled3__default.default.span`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  ${({ $size, $position, theme }) => {
-  const sizeConfig = theme.components.button[$size || "medium"];
-  const marginSide = $position === "before" ? "margin-right" : "margin-left";
-  return `
-      width: ${sizeConfig.iconSize.width};
-      height: ${sizeConfig.iconSize.height};
-      ${marginSide}: ${sizeConfig.iconGap};
-
-      svg, img {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-    `;
-}}
-`;
-var StyledButton = styled3__default.default.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  outline: none;
-  border: none;
-  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
-
-  /* Size variants */
-  ${({ $size, $isIconOnly, theme }) => {
-  const sizeConfig = theme.components.button[$size || "medium"];
-  if ($isIconOnly) {
-    return `
-        padding: 0;
-        width: ${sizeConfig.height};
-        height: ${sizeConfig.height};
-        border-radius: ${sizeConfig.borderRadius};
-      `;
-  }
-  return `
-      padding: ${sizeConfig.padding};
-      font-size: ${sizeConfig.fontSize};
-      line-height: ${sizeConfig.lineHeight};
-      border-radius: ${sizeConfig.borderRadius};
-      min-height: ${sizeConfig.height};
-    `;
-}}
-
-  /* Variant and color type styles */
-  ${({ $variant, $colorType, $isIconOnly, $iconBordered, theme }) => {
-  if ($variant === "icon" || $isIconOnly) {
-    const baseVariant = $iconBordered ? "outlined" : "text";
-    const styles2 = theme.components.button[baseVariant]["default"];
-    return `
-        background: ${styles2.background};
-        color: ${styles2.color};
-        border: 1px solid ${styles2.borderColor};
-        box-shadow: ${styles2.boxShadow};
-
-        &:hover:not(:disabled) {
-          background: ${styles2.backgroundHover};
-          color: ${styles2.colorHover};
-          border-color: ${styles2.borderColorHover};
-          box-shadow: ${styles2.boxShadowHover};
-        }
-
-        &:active:not(:disabled) {
-          background: ${styles2.backgroundActive};
-          color: ${styles2.colorActive};
-          border-color: ${styles2.borderColorActive};
-          box-shadow: ${styles2.boxShadowActive};
-        }
-
-        &:disabled {
-          background: ${styles2.backgroundDisabled};
-          color: ${styles2.colorDisabled};
-          border-color: ${styles2.borderColorDisabled};
-          box-shadow: ${styles2.boxShadowDisabled};
-          cursor: not-allowed;
-        }
-      `;
-  }
-  const variant = $variant || "solid";
-  const colorType = $colorType || "default";
-  if (colorType === "status" && variant !== "text") {
-    console.warn(`colorType 'status' is only available for 'text' variant. Falling back to 'default'.`);
-  }
-  const effectiveColorType = colorType === "status" && variant !== "text" ? "default" : colorType;
-  const styles = theme.components.button[variant][effectiveColorType];
-  return `
-      background: ${styles.background};
-      color: ${styles.color};
-      border: 1px solid ${styles.borderColor};
-      box-shadow: ${styles.boxShadow};
-      font-weight: ${styles.fontWeight};
-
-      &:hover:not(:disabled) {
-        background: ${styles.backgroundHover};
-        color: ${styles.colorHover};
-        border-color: ${styles.borderColorHover};
-        box-shadow: ${styles.boxShadowHover};
-      }
-
-      &:active:not(:disabled) {
-        background: ${styles.backgroundActive};
-        color: ${styles.colorActive};
-        border-color: ${styles.borderColorActive};
-        box-shadow: ${styles.boxShadowActive};
-      }
-
-      &:disabled {
-        background: ${styles.backgroundDisabled};
-        color: ${styles.colorDisabled};
-        border-color: ${styles.borderColorDisabled};
-        box-shadow: ${styles.boxShadowDisabled};
-        cursor: not-allowed;
-      }
-    `;
-}}
-`;
-var Button = ({
-  variant = "solid",
-  colorType = "default",
-  size = "medium",
-  disabled = false,
-  loading = false,
-  fullWidth = false,
-  iconBefore,
-  iconAfter,
-  iconBordered = false,
-  children,
-  ...rest
-}) => {
-  const isIconOnly = variant === "icon" || !children && !!(iconBefore || iconAfter);
-  const iconOnlyContent = iconBefore || iconAfter;
-  return /* @__PURE__ */ React12__default.default.createElement(
-    StyledButton,
-    {
-      $variant: variant,
-      $colorType: colorType,
-      $size: size,
-      $fullWidth: fullWidth,
-      $isIconOnly: isIconOnly,
-      $iconBordered: iconBordered,
-      disabled: disabled || loading,
-      ...rest
-    },
-    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";
-var SliderContainer = styled3__default.default.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 18px;
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-  user-select: none;
-`;
-var SliderTrack = styled3__default.default.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: ${({ theme }) => theme.colors.palettes.transparency["20"]};
-  border-radius: 1000px;
-  top: 50%;
-  transform: translateY(-50%);
-`;
-var SliderFill = styled3__default.default.div`
-  position: absolute;
-  left: 0;
-  height: 2px;
-  border-radius: 1px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: ${({ $percentage }) => $percentage}%;
-  background: ${({ $disabled, theme }) => $disabled ? theme.colors.palettes.transparency["10"] : theme.colors.palettes.gray["100"]};
-`;
-var SliderThumb = styled3__default.default.div`
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: ${({ $disabled, theme }) => $disabled ? theme.colors.palettes.transparency["30"] : theme.colors.palettes.blue["5"]};
-  left: ${({ $percentage }) => $percentage}%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "grab"};
-  transition: ${({ $isDragging }) => $isDragging ? "none" : "left 0.1s ease"};
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
-
-  ${({ $disabled }) => !$disabled && `
-    &:hover {
-      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
-    }
-
-    &:active {
-      cursor: grabbing;
-      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
-    }
-  `}
-`;
-var Slider = ({
-  value: controlledValue,
-  defaultValue = 0,
-  min = 0,
-  max = 100,
-  step = 1,
-  disabled = false,
-  onChange,
-  onDragStart,
-  onDragEnd,
-  className,
-  style
-}) => {
-  const [internalValue, setInternalValue] = React12.useState(
-    controlledValue ?? defaultValue
-  );
-  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 = React12.useCallback(
-    (clientX) => {
-      if (!containerRef.current || disabled) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const offsetX = clientX - rect.left;
-      const newPercentage = Math.max(0, Math.min(100, offsetX / rect.width * 100));
-      const rawValue = newPercentage / 100 * (max - min) + min;
-      const steppedValue = Math.round(rawValue / step) * step;
-      const clampedValue = Math.max(min, Math.min(max, steppedValue));
-      if (controlledValue === void 0) {
-        setInternalValue(clampedValue);
-      }
-      onChange?.(clampedValue);
-    },
-    [min, max, step, disabled, controlledValue, onChange]
-  );
-  const handleMouseDown = React12.useCallback(
-    (e) => {
-      if (disabled) return;
-      e.preventDefault();
-      setIsDragging(true);
-      onDragStart?.();
-      updateValue(e.clientX);
-    },
-    [disabled, onDragStart, updateValue]
-  );
-  React12.useEffect(() => {
-    if (!isDragging) return;
-    const handleMouseMove = (e) => {
-      updateValue(e.clientX);
-    };
-    const handleMouseUp = () => {
-      setIsDragging(false);
-      onDragEnd?.();
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, updateValue, onDragEnd]);
-  const handleKeyDown = React12.useCallback(
-    (e) => {
-      if (disabled) return;
-      let newValue = value;
-      switch (e.key) {
-        case "ArrowLeft":
-        case "ArrowDown":
-          e.preventDefault();
-          newValue = Math.max(min, value - step);
-          break;
-        case "ArrowRight":
-        case "ArrowUp":
-          e.preventDefault();
-          newValue = Math.min(max, value + step);
-          break;
-        case "Home":
-          e.preventDefault();
-          newValue = min;
-          break;
-        case "End":
-          e.preventDefault();
-          newValue = max;
-          break;
-        default:
-          return;
-      }
-      if (controlledValue === void 0) {
-        setInternalValue(newValue);
-      }
-      onChange?.(newValue);
-    },
-    [disabled, value, min, max, step, controlledValue, onChange]
-  );
-  return /* @__PURE__ */ React12__default.default.createElement(
-    SliderContainer,
-    {
-      ref: containerRef,
-      $disabled: disabled,
-      className,
-      style,
-      onMouseDown: handleMouseDown,
-      onKeyDown: handleKeyDown,
-      tabIndex: disabled ? -1 : 0,
-      role: "slider",
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-valuenow": value,
-      "aria-disabled": disabled
-    },
-    /* @__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,
-        $disabled: disabled,
-        $isDragging: isDragging
-      }
-    )
-  );
-};
-Slider.displayName = "Slider";
-var NumberInputContainer = styled3__default.default.div`
-  display: inline-flex;
-  align-items: center;
-  background: white;
-  border: 1px solid;
-  border-radius: 2px;
-  flex-shrink: 0;
-
-  ${({ $size }) => $size === "small" ? `
-    height: 24px;
-    width: 72px;
-  ` : `
-    height: 32px;
-    width: 80px;
-  `}
-
-  ${({ $disabled, $alert, $isFocused, theme }) => {
-  if ($disabled) {
-    return `
-        border-color: ${theme.colors.palettes.transparency["10"]};
-        cursor: not-allowed;
-      `;
-  }
-  if ($alert) {
-    return `
-        border-color: ${theme.colors.palettes.red["6"]};
-      `;
-  }
-  if ($isFocused) {
-    return `
-        border-color: ${theme.colors.palettes.transparency["30"]};
-        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
-      `;
-  }
-  return `
-      border-color: ${theme.colors.palettes.transparency["10"]};
-
-      &:hover {
-        border-color: ${theme.colors.palettes.transparency["20"]};
-        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
-      }
-    `;
-}}
-`;
-var InputWrapper = styled3__default.default.div`
-  flex: 1;
-  display: flex;
-  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%;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-family: 'PingFang SC', sans-serif;
-  font-weight: 400;
-  line-height: 20px;
-  padding: 0;
-  margin: 0;
-
-  ${({ $size }) => $size === "small" ? `
-    font-size: 12px;
-  ` : `
-    font-size: 13px;
-  `}
-
-  ${({ $disabled, theme }) => $disabled ? `
-    color: ${theme.colors.palettes.transparency["30"]};
-    cursor: not-allowed;
-  ` : `
-    color: ${theme.colors.palettes.gray["120"]};
-  `}
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.palettes.transparency["30"]};
-  }
-
-  /* Remove number input arrows */
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  &[type='number'] {
-    appearance: textfield;
-    -moz-appearance: textfield;
-  }
-`;
-var ButtonGroup = styled3__default.default.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  border-left: 1px solid;
-  flex-shrink: 0;
-
-  ${({ $disabled, $alert, theme }) => {
-  if ($disabled) {
-    return `border-color: ${theme.colors.palettes.transparency["10"]};`;
-  }
-  if ($alert) {
-    return `border-color: ${theme.colors.palettes.red["6"]};`;
-  }
-  return `border-color: ${theme.colors.palettes.transparency["10"]};`;
-}}
-`;
-var StepButton = styled3__default.default.button`
-  flex: 1 1 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 1px 8px;
-  outline: none;
-  min-height: 0;
-  overflow: hidden;
-
-  ${({ $position, $alert, $disabled, theme }) => {
-  if ($position === "up") {
-    return `
-        border-bottom: 1px solid ${$disabled ? theme.colors.palettes.transparency["10"] : $alert ? theme.colors.palettes.red["6"] : theme.colors.palettes.transparency["10"]};
-      `;
-  }
-  return "";
-}}
-
-  ${({ $disabled, theme }) => {
-  if ($disabled) {
-    return `
-        cursor: not-allowed;
-        opacity: 0.4;
-      `;
-  }
-  return `
-      &:hover {
-        background-color: ${theme.colors.palettes.transparency["5"]};
-      }
-
-      &:active {
-        background-color: ${theme.colors.palettes.transparency["10"]};
-      }
-    `;
-}}
-
-  svg {
-    width: 14px;
-    height: 14px;
-    fill: ${({ $disabled, theme }) => $disabled ? theme.colors.palettes.transparency["30"] : theme.colors.palettes.gray["120"]};
-  }
-`;
-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,
-  max = Infinity,
-  step = 1,
-  size = "large",
-  disabled = false,
-  alert = false,
-  precision,
-  formatter,
-  parser,
-  unit,
-  onChange,
-  className,
-  style
-}) => {
-  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 = React12.useCallback(
-    (val) => {
-      if (formatter) {
-        return formatter(val);
-      }
-      if (precision !== void 0) {
-        return val.toFixed(precision);
-      }
-      return String(val);
-    },
-    [formatter, precision]
-  );
-  const parseValue = React12.useCallback(
-    (displayVal) => {
-      if (parser) {
-        return parser(displayVal);
-      }
-      const parsed = parseFloat(displayVal);
-      return isNaN(parsed) ? null : parsed;
-    },
-    [parser]
-  );
-  React12.useEffect(() => {
-    if (!isFocused) {
-      setDisplayValue(formatValue(value));
-    }
-  }, [value, isFocused, formatValue]);
-  const clampValue = React12.useCallback(
-    (val) => {
-      return Math.max(min, Math.min(max, val));
-    },
-    [min, max]
-  );
-  const handleValueChange = React12.useCallback(
-    (newValue) => {
-      const clampedValue = clampValue(newValue);
-      if (controlledValue === void 0) {
-        setInternalValue(clampedValue);
-      }
-      onChange?.(clampedValue);
-    },
-    [clampValue, controlledValue, onChange]
-  );
-  const increment = React12.useCallback(() => {
-    if (disabled) return;
-    handleValueChange(value + step);
-  }, [disabled, value, step, handleValueChange]);
-  const decrement = React12.useCallback(() => {
-    if (disabled) return;
-    handleValueChange(value - step);
-  }, [disabled, value, step, handleValueChange]);
-  const handleInputChange = React12.useCallback((e) => {
-    setDisplayValue(e.target.value);
-  }, []);
-  const handleBlur = React12.useCallback(() => {
-    setIsFocused(false);
-    const parsed = parseValue(displayValue);
-    if (parsed !== null) {
-      handleValueChange(parsed);
-    } else {
-      setDisplayValue(formatValue(value));
-    }
-  }, [displayValue, parseValue, handleValueChange, value, formatValue]);
-  const handleFocus = React12.useCallback(() => {
-    setIsFocused(true);
-    setDisplayValue(String(value));
-  }, [value]);
-  const handleKeyDown = React12.useCallback(
-    (e) => {
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        increment();
-      } else if (e.key === "ArrowDown") {
-        e.preventDefault();
-        decrement();
-      } else if (e.key === "Enter") {
-        inputRef.current?.blur();
-      }
-    },
-    [increment, decrement]
-  );
-  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,
-      min,
-      max,
-      step,
-      disabled,
-      onChange: handleValueChange
-    }
-  )), /* @__PURE__ */ React12__default.default.createElement(
-    NumberInput,
-    {
-      value,
-      min,
-      max,
-      step,
-      size,
-      disabled,
-      alert,
-      precision,
-      formatter,
-      parser,
-      onChange: handleValueChange
-    }
-  ));
-};
-SpinButton.displayName = "SpinButton";
-var SwitchContainer = styled3__default.default.label`
-  position: relative;
-  display: inline-block;
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-
-  ${({ $size, theme }) => {
-  const sizeConfig = theme.components.switch[$size];
-  return `
-      width: ${sizeConfig.container.width};
-      height: ${sizeConfig.container.height};
-    `;
-}}
-`;
-var HiddenInput = styled3__default.default.input`
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-`;
-var Track = styled3__default.default.div`
-  position: absolute;
-  inset: 0;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transition: ${({ theme }) => theme.components.switch.transition || "all 0.2s ease"};
-
-  ${({ $size, theme }) => {
-  const sizeConfig = theme.components.switch[$size];
-  return `
-      border-radius: ${sizeConfig.track.borderRadius};
-      width: ${sizeConfig.track.width};
-      height: ${sizeConfig.track.height};
-    `;
-}}
-
-  ${({ $checked, $disabled, theme }) => {
-  const stateConfig = $checked ? theme.components.switch.on : theme.components.switch.off;
-  if ($disabled) {
-    return `
-        background: ${stateConfig.track.backgroundDisabled};
-        box-shadow: ${stateConfig.track.boxShadowDisabled};
-      `;
-  }
-  return `
-      background: ${stateConfig.track.background};
-      box-shadow: ${stateConfig.track.boxShadow};
-    `;
-}}
-
-  ${({ $disabled, $checked, theme }) => {
-  if ($disabled) return "";
-  const stateConfig = $checked ? theme.components.switch.on : theme.components.switch.off;
-  return `
-      :hover {
-        background: ${stateConfig.track.backgroundHover};
-        box-shadow: ${stateConfig.track.boxShadowHover};
-      }
-    `;
-}}
-`;
-var Thumb = styled3__default.default.div`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  border-style: solid;
-  box-sizing: border-box;
-  transition: ${({ theme }) => theme.components.switch.transition || "all 0.2s ease"};
-
-  ${({ $size, $checked, theme }) => {
-  const sizeConfig = theme.components.switch[$size];
-  const thumbSize = sizeConfig.thumb.size;
-  const thumbOffset = sizeConfig.thumb.offset;
-  const thumbBorderRadius = sizeConfig.thumb.borderRadius;
-  const thumbBorderWidth = sizeConfig.thumb.borderWidth;
-  return `
-      width: ${thumbSize};
-      height: ${thumbSize};
-      border-radius: ${thumbBorderRadius};
-      border-width: ${thumbBorderWidth};
-      ${$checked ? "right" : "left"}: ${thumbOffset};
-    `;
-}}
-
-  ${({ $checked, $disabled, theme }) => {
-  const stateConfig = $checked ? theme.components.switch.on : theme.components.switch.off;
-  if ($disabled) {
-    return `
-        background: ${stateConfig.thumb.backgroundDisabled};
-        border-color: ${stateConfig.thumb.borderColorDisabled};
-        box-shadow: ${stateConfig.thumb.boxShadowDisabled};
-      `;
-  }
-  return `
-      background: ${stateConfig.thumb.background};
-      border-color: ${stateConfig.thumb.borderColor};
-      box-shadow: ${stateConfig.thumb.boxShadow};
-    `;
-}}
-
-  ${({ $disabled, $checked, theme }) => {
-  if ($disabled) return "";
-  const stateConfig = $checked ? theme.components.switch.on : theme.components.switch.off;
-  return `
-      :hover & {
-        background: ${stateConfig.thumb.backgroundHover};
-        border-color: ${stateConfig.thumb.borderColorHover};
-        box-shadow: ${stateConfig.thumb.boxShadowHover};
-      }
-    `;
-}}
-`;
-var Switch = ({
-  checked: controlledChecked,
-  defaultChecked = false,
-  size = "large",
-  disabled = false,
-  onChange,
-  className,
-  style
-}) => {
-  const [internalChecked, setInternalChecked] = React12.useState(
-    controlledChecked ?? defaultChecked
-  );
-  const [isFocused, setIsFocused] = React12.useState(false);
-  const checked = controlledChecked !== void 0 ? controlledChecked : internalChecked;
-  const handleChange = React12.useCallback(
-    (e) => {
-      if (disabled) return;
-      const newChecked = e.target.checked;
-      if (controlledChecked === void 0) {
-        setInternalChecked(newChecked);
-      }
-      onChange?.(newChecked);
-    },
-    [disabled, controlledChecked, onChange]
-  );
-  const handleFocus = React12.useCallback(() => {
-    setIsFocused(true);
-  }, []);
-  const handleBlur = React12.useCallback(() => {
-    setIsFocused(false);
-  }, []);
-  return /* @__PURE__ */ React12__default.default.createElement(
-    SwitchContainer,
-    {
-      $size: size,
-      $checked: checked,
-      $disabled: disabled,
-      className,
-      style
-    },
-    /* @__PURE__ */ React12__default.default.createElement(
-      HiddenInput,
-      {
-        type: "checkbox",
-        checked,
-        onChange: handleChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        disabled
-      }
-    ),
-    /* @__PURE__ */ React12__default.default.createElement(
-      Track,
-      {
-        $size: size,
-        $checked: checked,
-        $disabled: disabled,
-        $isFocused: isFocused
-      }
-    ),
-    /* @__PURE__ */ React12__default.default.createElement(
-      Thumb,
-      {
-        $size: size,
-        $checked: checked,
-        $disabled: disabled,
-        $isFocused: isFocused
-      }
-    )
-  );
-};
-Switch.displayName = "Switch";
-var RadioContainer = styled3__default.default.label`
-  position: relative;
-  display: inline-block;
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-
-  ${({ theme }) => {
-  const sizeConfig = theme.components.radio.small;
-  return `
-      width: ${sizeConfig.size};
-      height: ${sizeConfig.size};
-    `;
-}}
-`;
-var HiddenInput2 = styled3__default.default.input`
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-`;
-var RadioOuter = styled3__default.default.div`
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  border: 1px solid;
-  transition: all 0.2s ease;
-
-  ${({ $checked, $disabled, theme }) => {
-  if ($disabled) {
-    const stateConfig = $checked ? theme.components.radio.checked : theme.components.radio.unchecked;
-    return `
-        background: ${stateConfig.backgroundDisabled};
-        border-color: ${stateConfig.borderColorDisabled};
-      `;
-  }
-  if ($checked) {
-    const checkedConfig = theme.components.radio.checked;
-    return `
-        background: ${checkedConfig.background};
-        border-color: ${checkedConfig.borderColor};
-      `;
-  }
-  const uncheckedConfig = theme.components.radio.unchecked;
-  return `
-      background: ${uncheckedConfig.background};
-      border-color: ${uncheckedConfig.borderColor};
-    `;
-}}
-
-  ${({ $disabled, $checked, theme }) => {
-  if ($disabled) return "";
-  const stateConfig = $checked ? theme.components.radio.checked : theme.components.radio.unchecked;
-  return `
-      ${RadioContainer}:hover & {
-        background: ${stateConfig.backgroundHover};
-        border-color: ${stateConfig.borderColorHover};
-      }
-
-      ${RadioContainer}:active & {
-        border-color: ${stateConfig.borderColorActive};
-      }
-    `;
-}}
-`;
-var RadioInner = styled3__default.default.div`
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 50%;
-  background: white;
-  opacity: ${({ $checked }) => $checked ? 1 : 0};
-  transition: opacity 0.2s ease;
-
-  ${({ theme }) => {
-  const dotSize = theme.components.radio.small.dotSize;
-  return `
-      width: ${dotSize};
-      height: ${dotSize};
-    `;
-}}
-`;
-var Radio = ({
-  checked: controlledChecked,
-  defaultChecked = false,
-  disabled = false,
-  value,
-  name,
-  id,
-  onChange,
-  className,
-  style
-}) => {
-  const [internalChecked, setInternalChecked] = React12.useState(
-    controlledChecked ?? defaultChecked
-  );
-  const [isFocused, setIsFocused] = React12.useState(false);
-  const checked = controlledChecked !== void 0 ? controlledChecked : internalChecked;
-  const handleChange = React12.useCallback(
-    (e) => {
-      if (disabled) return;
-      const newChecked = e.target.checked;
-      if (controlledChecked === void 0) {
-        setInternalChecked(newChecked);
-      }
-      onChange?.(e);
-    },
-    [disabled, controlledChecked, onChange]
-  );
-  const handleFocus = React12.useCallback(() => {
-    setIsFocused(true);
-  }, []);
-  const handleBlur = React12.useCallback(() => {
-    setIsFocused(false);
-  }, []);
-  return /* @__PURE__ */ React12__default.default.createElement(
-    RadioContainer,
-    {
-      $disabled: disabled,
-      className,
-      style
-    },
-    /* @__PURE__ */ React12__default.default.createElement(
-      HiddenInput2,
-      {
-        type: "radio",
-        id,
-        checked,
-        value,
-        name,
-        onChange: handleChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        disabled
-      }
-    ),
-    /* @__PURE__ */ React12__default.default.createElement(
-      RadioOuter,
-      {
-        $checked: checked,
-        $disabled: disabled,
-        $isFocused: isFocused
-      }
-    ),
-    /* @__PURE__ */ React12__default.default.createElement(
-      RadioInner,
-      {
-        $checked: checked,
-        $disabled: disabled
-      }
-    )
-  );
-};
-Radio.displayName = "Radio";
-var CheckboxContainer = styled3__default.default.label`
-  position: relative;
-  display: inline-block;
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-
-  ${({ theme }) => {
-  const sizeConfig = theme.components.checkbox.small;
-  return `
-      width: ${sizeConfig.size};
-      height: ${sizeConfig.size};
-    `;
-}}
-`;
-var HiddenInput3 = styled3__default.default.input`
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-`;
-var CheckboxBox = styled3__default.default.div`
-  position: absolute;
-  inset: 1px;
-  border: 1px solid;
-  transition: all 0.2s ease;
-
-  ${({ theme }) => {
-  const sizeConfig = theme.components.checkbox.small;
-  return `
-      border-radius: ${sizeConfig.borderRadius};
-    `;
-}}
-
-  ${({ $checked, $indeterminate, $disabled, theme }) => {
-  if ($disabled) {
-    const stateConfig = $checked || $indeterminate ? theme.components.checkbox.checked : theme.components.checkbox.unchecked;
-    return `
-        background: ${stateConfig.backgroundDisabled};
-        border-color: ${stateConfig.borderColorDisabled};
-      `;
-  }
-  if ($checked) {
-    const checkedConfig = theme.components.checkbox.checked;
-    return `
-        background: ${checkedConfig.background};
-        border-color: ${checkedConfig.borderColor};
-      `;
-  }
-  if ($indeterminate) {
-    const indeterminateConfig = theme.components.checkbox.indeterminate;
-    return `
-        background: ${indeterminateConfig.background};
-        border-color: ${indeterminateConfig.borderColor};
-      `;
-  }
-  const uncheckedConfig = theme.components.checkbox.unchecked;
-  return `
-      background: ${uncheckedConfig.background};
-      border-color: ${uncheckedConfig.borderColor};
-    `;
-}}
-
-  ${({ $disabled, $checked, $indeterminate, theme }) => {
-  if ($disabled) return "";
-  const stateConfig = $checked || $indeterminate ? theme.components.checkbox.checked : theme.components.checkbox.unchecked;
-  return `
-      ${CheckboxContainer}:hover & {
-        background: ${stateConfig.backgroundHover};
-        border-color: ${stateConfig.borderColorHover};
-      }
-
-      ${CheckboxContainer}:active & {
-        border-color: ${stateConfig.borderColorActive};
-      }
-    `;
-}}
-`;
-var IconWrapper2 = styled3__default.default.div`
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  opacity: ${({ $visible }) => $visible ? 1 : 0};
-  transition: opacity 0.2s ease;
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ${({ theme }) => {
-  const iconSize = theme.components.checkbox.small.iconSize;
-  return `
-      width: ${iconSize.width};
-      height: ${iconSize.height};
-    `;
-}}
-
-  svg, img {
-    display: block;
-  }
-`;
-var DefaultIndeterminateIcon = styled3__default.default.div`
-  width: 8px;
-  height: 2px;
-  background: white;
-`;
-var Checkbox = ({
-  checked: controlledChecked,
-  defaultChecked = false,
-  indeterminate = false,
-  disabled = false,
-  value,
-  name,
-  id,
-  onChange,
-  className,
-  style
-}) => {
-  const [internalChecked, setInternalChecked] = React12.useState(
-    controlledChecked ?? defaultChecked
-  );
-  const [isFocused, setIsFocused] = React12.useState(false);
-  const inputRef = React12.useRef(null);
-  const checked = controlledChecked !== void 0 ? controlledChecked : internalChecked;
-  React12.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
-  const handleChange = React12.useCallback(
-    (e) => {
-      if (disabled) return;
-      const newChecked = e.target.checked;
-      if (controlledChecked === void 0) {
-        setInternalChecked(newChecked);
-      }
-      onChange?.(e);
-    },
-    [disabled, controlledChecked, onChange]
-  );
-  const handleFocus = React12.useCallback(() => {
-    setIsFocused(true);
-  }, []);
-  const handleBlur = React12.useCallback(() => {
-    setIsFocused(false);
-  }, []);
-  return /* @__PURE__ */ React12__default.default.createElement(
-    CheckboxContainer,
-    {
-      $disabled: disabled,
-      className,
-      style
-    },
-    /* @__PURE__ */ React12__default.default.createElement(
-      HiddenInput3,
-      {
-        ref: inputRef,
-        type: "checkbox",
-        id,
-        checked,
-        value,
-        name,
-        onChange: handleChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        disabled
-      }
-    ),
-    /* @__PURE__ */ React12__default.default.createElement(
-      CheckboxBox,
-      {
-        $checked: checked,
-        $indeterminate: indeterminate,
-        $disabled: disabled,
-        $isFocused: isFocused
-      }
-    ),
-    !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";
-var InputWrapper2 = styled3__default.default.div`
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  position: relative;
-  transition: all 0.2s ease;
-
-  ${({ $size, theme }) => {
-  const size = $size || "medium";
-  const sizeConfig = theme.components.input.outlined[size];
-  return `
-      height: ${sizeConfig.height};
-      border-radius: ${sizeConfig.borderRadius};
-      padding: ${sizeConfig.padding};
-      font-size: ${sizeConfig.fontSize};
-      line-height: ${sizeConfig.lineHeight};
-    `;
-}}
-
-  ${({ $error, $disabled, $readOnly, $isFocused, theme, $size }) => {
-  const stateConfig = theme.components.input.outlined.state;
-  let borderColor = stateConfig.borderColor;
-  let background = stateConfig.background;
-  let boxShadow = "none";
-  if ($disabled) {
-    borderColor = stateConfig.borderColorDisabled;
-    background = stateConfig.backgroundDisabled;
-  } else if ($readOnly) {
-    borderColor = stateConfig.borderColorReadonly;
-    background = stateConfig.backgroundReadonly;
-  } else if ($error) {
-    borderColor = stateConfig.borderColorError;
-    background = stateConfig.backgroundActive;
-  } else if ($isFocused) {
-    borderColor = stateConfig.borderColorActive;
-    background = stateConfig.backgroundActive;
-    const size = $size || "medium";
-    boxShadow = theme.components.input.outlined[size].boxShadowActive;
-  }
-  return `
-      border: 1px solid ${borderColor};
-      background: ${background};
-      box-shadow: ${boxShadow};
-
-      &:hover:not(:disabled) {
-        ${!$disabled && !$readOnly && !$isFocused ? `
-          border-color: ${stateConfig.borderColorHover};
-          background: ${stateConfig.backgroundHover};
-        ` : ""}
-      }
-    `;
-}}
-
-  ${({ $disabled }) => $disabled && `
-    cursor: not-allowed;
-    opacity: 1;
-  `}
-`;
-var StyledInput2 = styled3__default.default.input`
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  font-family: inherit;
-  color: ${({ theme }) => theme.components.input.outlined.state.borderColorActive};
-
-  ${({ $size, theme }) => {
-  const size = $size || "medium";
-  const sizeConfig = theme.components.input.outlined[size];
-  return `
-      font-size: ${sizeConfig.fontSize};
-      line-height: ${sizeConfig.lineHeight};
-    `;
-}}
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.palettes.transparency["30"]};
-  }
-
-  ${({ $disabled, theme }) => $disabled && `
-    cursor: not-allowed;
-    color: ${theme.colors.palettes.transparency["30"]};
-  `}
-
-  ${({ $readOnly }) => $readOnly && `
-    cursor: default;
-  `}
-`;
-var PrefixNode = styled3__default.default.div`
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  margin-right: 4px;
-
-  ${({ $size, theme }) => {
-  const size = $size || "medium";
-  const sizeConfig = theme.components.input.outlined[size];
-  return `
-      svg, img {
-        width: ${sizeConfig.iconSize.width};
-        height: ${sizeConfig.iconSize.height};
-      }
-    `;
-}}
-`;
-var SuffixNode = styled3__default.default.div`
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  margin-left: 4px;
-
-  ${({ $size, theme }) => {
-  const size = $size || "medium";
-  const sizeConfig = theme.components.input.outlined[size];
-  return `
-      svg, img {
-        width: ${sizeConfig.iconSize.width};
-        height: ${sizeConfig.iconSize.height};
-      }
-    `;
-}}
-`;
-var Input = React12.forwardRef(
-  ({
-    size = "medium",
-    error = false,
-    disabled = false,
-    readOnly = false,
-    prefixNode,
-    suffixNode,
-    className,
-    style,
-    onFocus,
-    onBlur,
-    ...rest
-  }, ref) => {
-    const [isFocused, setIsFocused] = React12.useState(false);
-    const handleFocus = (e) => {
-      setIsFocused(true);
-      onFocus?.(e);
-    };
-    const handleBlur = (e) => {
-      setIsFocused(false);
-      onBlur?.(e);
-    };
-    return /* @__PURE__ */ React12__default.default.createElement(
-      InputWrapper2,
-      {
-        $size: size,
-        $error: error,
-        $disabled: !!disabled,
-        $readOnly: !!readOnly,
-        $isFocused: isFocused,
-        className,
-        style
-      },
-      prefixNode && /* @__PURE__ */ React12__default.default.createElement(PrefixNode, { $size: size }, prefixNode),
-      /* @__PURE__ */ React12__default.default.createElement(
-        StyledInput2,
-        {
-          ref,
-          $size: size,
-          $disabled: !!disabled,
-          $readOnly: !!readOnly,
-          disabled,
-          readOnly,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          ...rest
-        }
-      ),
-      suffixNode && /* @__PURE__ */ React12__default.default.createElement(SuffixNode, { $size: size }, suffixNode)
-    );
-  }
-);
-Input.displayName = "Input";
-var SearchIconWrapper = styled3__default.default.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  ${({ $size, theme }) => {
-  const sizeConfig = theme.components.input.outlined[$size === "extraLarge" ? "extraLarge" : "large"];
-  return `
-      width: ${sizeConfig.iconSize.width};
-      height: ${sizeConfig.iconSize.height};
-    `;
-}}
-
-  svg {
-    width: 100%;
-    height: 100%;
-    color: ${({ theme }) => theme.colors.palettes.transparency["100"]};
-  }
-`;
-var ClearButton = styled3__default.default.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  outline: none;
-  transition: opacity 0.2s ease;
-
-  ${({ $size, theme }) => {
-  const sizeConfig = theme.components.input.outlined[$size === "extraLarge" ? "extraLarge" : "large"];
-  return `
-      width: ${sizeConfig.iconSize.width};
-      height: ${sizeConfig.iconSize.height};
-    `;
-}}
-
-  svg {
-    width: 100%;
-    height: 100%;
-    color: ${({ theme }) => theme.colors.palettes.transparency["100"]};
-  }
-
-  &:hover {
-    opacity: 0.7;
-  }
-
-  &:active {
-    opacity: 0.5;
-  }
-`;
-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",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-), /* @__PURE__ */ React12__default.default.createElement(
-  "path",
-  {
-    d: "M14 14L11.1 11.1",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-));
-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",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-), /* @__PURE__ */ React12__default.default.createElement(
-  "path",
-  {
-    d: "M4 4L12 12",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-));
-var SearchInput = React12.forwardRef(
-  ({
-    size = "extraLarge",
-    clearable = true,
-    onClear,
-    searchIcon,
-    value,
-    defaultValue,
-    onChange,
-    disabled,
-    readOnly,
-    ...rest
-  }, ref) => {
-    const [internalValue, setInternalValue] = React12.useState(defaultValue || "");
-    const isControlled = value !== void 0;
-    const currentValue = isControlled ? value : internalValue;
-    const handleChange = (e) => {
-      if (!isControlled) {
-        setInternalValue(e.target.value);
-      }
-      onChange?.(e);
-    };
-    const handleClear = () => {
-      if (!isControlled) {
-        setInternalValue("");
-      }
-      onClear?.();
-    };
-    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,
-        onClick: handleClear,
-        type: "button",
-        tabIndex: -1
-      },
-      /* @__PURE__ */ React12__default.default.createElement(DefaultCloseIcon, null)
-    ) : null;
-    return /* @__PURE__ */ React12__default.default.createElement(
-      Input,
-      {
-        ref,
-        size,
-        prefixNode,
-        suffixNode,
-        value: isControlled ? value : internalValue,
-        onChange: handleChange,
-        disabled,
-        readOnly,
-        ...rest
-      }
-    );
-  }
-);
-SearchInput.displayName = "SearchInput";
-var IconContext = React12.createContext(null);
-var IconProvider = ({
-  icons,
-  children
-}) => {
-  return /* @__PURE__ */ React12__default.default.createElement(IconContext.Provider, { value: icons }, children);
-};
-var useIconRegistry = () => {
-  return React12.useContext(IconContext);
-};
-IconProvider.displayName = "IconProvider";
-
-// src/Icon/Icon.tsx
-var IconContainer = styled3__default.default.span`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: ${({ $size }) => typeof $size === "number" ? `${$size}px` : $size};
-  height: ${({ $size }) => typeof $size === "number" ? `${$size}px` : $size};
-  color: ${({ $color }) => $color};
-  flex-shrink: 0;
-  line-height: 1;
-
-  svg {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-`;
-var Icon = ({
-  name,
-  src,
-  children,
-  size = 16,
-  color = "currentColor",
-  alt = "icon",
-  className,
-  style,
-  onClick
-}) => {
-  const registry = useIconRegistry();
-  let iconElement = children;
-  if (!iconElement && src) {
-    iconElement = /* @__PURE__ */ React12__default.default.createElement(
-      "img",
-      {
-        src,
-        alt,
-        style: { width: "100%", height: "100%", display: "block" }
-      }
-    );
-  }
-  if (!iconElement && name && registry) {
-    const IconComponent = registry[name];
-    if (IconComponent) {
-      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.`);
-    }
-  }
-  if (!iconElement) {
-    if (process.env.NODE_ENV !== "production" && !children && !name && !src) {
-      console.warn('Icon: one of "name", "src", or "children" must be provided');
-    }
-    return null;
-  }
-  return /* @__PURE__ */ React12__default.default.createElement(
-    IconContainer,
-    {
-      $size: size,
-      $color: color,
-      className,
-      style,
-      onClick
-    },
-    iconElement
-  );
-};
-Icon.displayName = "Icon";
-var ToastContainer = styled3__default.default.div`
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid;
-  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
-
-  ${({ theme }) => {
-  const baseConfig = theme.components.toast;
-  return `
-      padding: ${baseConfig.padding};
-      border-radius: ${baseConfig.borderRadius};
-      font-size: ${baseConfig.fontSize};
-      font-weight: ${baseConfig.fontWeight};
-    `;
-}}
-
-  ${({ $variant, theme }) => {
-  const variantConfig = theme.components.toast[$variant];
-  return `
-      background: ${variantConfig.background};
-      border-color: ${variantConfig.borderColor};
-    `;
-}}
-`;
-var IconWrapper3 = styled3__default.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  ${({ $variant, theme }) => {
-  const iconConfig = theme.components.toast[$variant].icon;
-  return `
-      width: ${iconConfig.size.width};
-      height: ${iconConfig.size.height};
-    `;
-}}
-`;
-var Message = styled3__default.default.span`
-  flex: 1;
-  line-height: 20px;
-  color: ${({ theme }) => theme.colors.palettes.gray["120"]};
-`;
-var ActionButton = styled3__default.default.button`
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  outline: none;
-
-  ${({ $variant, theme }) => {
-  const buttonConfig = theme.components.toast[$variant].button;
-  return `
-      font-size: ${buttonConfig.fontSize};
-      font-weight: ${buttonConfig.fontWeight};
-      color: ${buttonConfig.color};
-      margin-left: ${buttonConfig.gap};
-    `;
-}}
-
-  &:hover {
-    opacity: 0.8;
-  }
-
-  &:active {
-    opacity: 0.6;
-  }
-`;
-var CloseButton = styled3__default.default.button`
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${({ theme }) => theme.colors.palettes.gray["60"]};
-  flex-shrink: 0;
-  outline: none;
-
-  &:hover {
-    color: ${({ theme }) => theme.colors.palettes.gray["100"]};
-  }
-
-  &:active {
-    color: ${({ theme }) => theme.colors.palettes.gray["120"]};
-  }
-`;
-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,
-  actionText,
-  onAction,
-  closable = false,
-  onClose,
-  duration = 0,
-  icon,
-  showIcon = true,
-  className,
-  style
-}) => {
-  const [visible, setVisible] = React12.useState(true);
-  React12.useEffect(() => {
-    if (duration > 0) {
-      const timer = setTimeout(() => {
-        setVisible(false);
-        onClose?.();
-      }, duration);
-      return () => clearTimeout(timer);
-    }
-  }, [duration, onClose]);
-  const handleClose = () => {
-    setVisible(false);
-    onClose?.();
-  };
-  if (!visible) {
-    return null;
-  }
-  const defaultIcons = {
-    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__ */ React12__default.default.createElement(
-    ToastContainer,
-    {
-      $variant: variant,
-      className,
-      style,
-      role: "alert",
-      "aria-live": "polite"
-    },
-    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,
-        onClick: onAction,
-        type: "button"
-      },
-      actionText
-    ),
-    closable && /* @__PURE__ */ React12__default.default.createElement(
-      CloseButton,
-      {
-        onClick: handleClose,
-        type: "button",
-        "aria-label": "Close"
-      },
-      /* @__PURE__ */ React12__default.default.createElement(CloseIconSvg, null)
-    )
-  );
-};
-Toast.displayName = "Toast";
-var ToastContext = React12.createContext(null);
-var ToastWrapper = styled3__default.default.div`
-  position: fixed;
-  top: 24px;
-  right: 24px;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  pointer-events: none;
-
-  > * {
-    pointer-events: auto;
-  }
-`;
-var ToastContainer2 = ({
-  maxCount = 5,
-  defaultDuration = 3e3,
-  children
-}) => {
-  const [toasts, setToasts] = React12.useState([]);
-  const showToast = React12.useCallback((props) => {
-    const id = `toast-${Date.now()}-${Math.random()}`;
-    const newToast = {
-      ...props,
-      id,
-      duration: props.duration ?? defaultDuration
-    };
-    setToasts((prev) => {
-      const updated = [...prev, newToast];
-      return updated.slice(-maxCount);
-    });
-    return id;
-  }, [maxCount, defaultDuration]);
-  const hideToast = React12.useCallback((id) => {
-    setToasts((prev) => prev.filter((toast) => toast.id !== id));
-  }, []);
-  const success = React12.useCallback((message, options) => {
-    return showToast({ ...options, variant: "success", message });
-  }, [showToast]);
-  const info = React12.useCallback((message, options) => {
-    return showToast({ ...options, variant: "info", message });
-  }, [showToast]);
-  const error = React12.useCallback((message, options) => {
-    return showToast({ ...options, variant: "error", message });
-  }, [showToast]);
-  const warn = React12.useCallback((message, options) => {
-    return showToast({ ...options, variant: "warn", message });
-  }, [showToast]);
-  const contextValue = {
-    showToast,
-    hideToast,
-    success,
-    info,
-    error,
-    warn
-  };
-  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,
-      ...toast,
-      onClose: () => hideToast(toast.id)
-    }
-  ))));
-};
-var useToast = () => {
-  const context = React12.useContext(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within ToastContainer");
-  }
-  return context;
-};
-ToastContainer2.displayName = "ToastContainer";
-var TabContainer = styled3__default.default.div`
-  display: flex;
-  flex-direction: column;
-`;
-var TabList = styled3__default.default.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-
-  ${({ $variant, theme }) => {
-  const variantConfig = theme.components.tab[$variant];
-  return `
-      gap: ${variantConfig.layout.gap};
-    `;
-}}
-
-  ${({ $variant }) => {
-  if ($variant === "line") {
-    return `
-        border-bottom: 2px solid rgba(65, 70, 75, 0.1);
-      `;
-  }
-  return "";
-}}
-`;
-var TabItem = styled3__default.default.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border: none;
-  outline: none;
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-  transition: all 0.2s ease;
-  position: relative;
-  white-space: nowrap;
-
-  ${({ theme }) => {
-  const sizeConfig = theme.components.tab.large;
-  return `
-      height: ${sizeConfig.height};
-      padding: ${sizeConfig.padding};
-      font-size: ${sizeConfig.fontSize};
-      line-height: ${sizeConfig.lineHeight};
-      border-radius: ${sizeConfig.borderRadius};
-      font-weight: ${sizeConfig.fontWeight};
-    `;
-}}
-
-  ${({ $variant, $active, $disabled, theme }) => {
-  const variantConfig = theme.components.tab[$variant];
-  const itemConfig = variantConfig.item;
-  if ($disabled) {
-    return `
-        background: ${itemConfig.backgroundDisabled};
-        border-color: ${itemConfig.borderColorDisabled};
-        color: ${itemConfig.colorDisabled};
-      `;
-  }
-  if ($active) {
-    return `
-        background: ${itemConfig.backgroundActive};
-        border-color: ${itemConfig.borderColorActive};
-        color: ${itemConfig.colorActive};
-      `;
-  }
-  return `
-      background: ${itemConfig.background};
-      border-color: ${itemConfig.borderColor};
-      color: ${itemConfig.color};
-    `;
-}}
-
-  ${({ $variant, $disabled, theme }) => {
-  if ($disabled) return "";
-  const variantConfig = theme.components.tab[$variant];
-  const itemConfig = variantConfig.item;
-  return `
-      &:hover {
-        background: ${itemConfig.backgroundHover};
-        border-color: ${itemConfig.borderColorHover};
-        color: ${itemConfig.colorHover};
-      }
-    `;
-}}
-
-  ${({ $variant, $active }) => {
-  if ($variant === "line" && $active) {
-    return `
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: -2px;
-          left: 0;
-          right: 0;
-          height: 2px;
-          background: currentColor;
-        }
-      `;
-  }
-  if ($variant === "card") {
-    return `
-        border: 1px solid;
-        ${$active ? `
-          border-bottom-color: transparent;
-          margin-bottom: -1px;
-        ` : ""}
-      `;
-  }
-  return "";
-}}
-`;
-var Tabs = ({
-  items,
-  activeKey: controlledActiveKey,
-  defaultActiveKey,
-  variant = "line",
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  size: _size = "large",
-  onChange,
-  className,
-  style
-}) => {
-  const [internalActiveKey, setInternalActiveKey] = React12.useState(
-    controlledActiveKey ?? defaultActiveKey ?? items[0]?.key ?? ""
-  );
-  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey;
-  const handleTabClick = React12.useCallback(
-    (key, disabled) => {
-      if (disabled) return;
-      if (controlledActiveKey === void 0) {
-        setInternalActiveKey(key);
-      }
-      onChange?.(key);
-    },
-    [controlledActiveKey, onChange]
-  );
-  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,
-      $variant: variant,
-      $active: activeKey === item.key,
-      $disabled: item.disabled || false,
-      onClick: () => handleTabClick(item.key, item.disabled),
-      role: "tab",
-      "aria-selected": activeKey === item.key,
-      "aria-disabled": item.disabled,
-      disabled: item.disabled,
-      type: "button"
-    },
-    item.icon && /* @__PURE__ */ React12__default.default.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__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(" ");
-  const tooltipProps = {
-    overlay: overlay ?? overlayContent,
-    placement,
-    trigger,
-    destroyTooltipOnHide: false,
-    overlayClassName: combinedClassName,
-    ...getPopupContainer && { getPopupContainer },
-    ...rest
-  };
-  return /* @__PURE__ */ React12__default.default.createElement(RcTooltip__default.default, { ...tooltipProps }, children);
-};
-Tooltip.displayName = "Tooltip";
-var paddingDistance = "5px";
-var positionDistance = "0";
-var TooltipGlobalStyles = styled3.createGlobalStyle`
-  .rc-tooltip {
-    opacity: 1;
-  }
-
-  .rc-tooltip-hidden {
-    display: none;
-  }
-
-  .rc-tooltip-placement-top,
-  .rc-tooltip-placement-topLeft,
-  .rc-tooltip-placement-topRight {
-    padding-bottom: ${paddingDistance};
-  }
-
-  .rc-tooltip-placement-right,
-  .rc-tooltip-placement-rightTop,
-  .rc-tooltip-placement-rightBottom {
-    padding-left: ${paddingDistance};
-  }
-
-  .rc-tooltip-placement-bottom,
-  .rc-tooltip-placement-bottomLeft,
-  .rc-tooltip-placement-bottomRight {
-    padding-top: ${paddingDistance};
-  }
-
-  .rc-tooltip-placement-left,
-  .rc-tooltip-placement-leftTop,
-  .rc-tooltip-placement-leftBottom {
-    padding-right: ${paddingDistance};
-  }
-
-  .rc-tooltip-inner {
-    word-wrap: break-word;
-    min-height: unset;
-  }
-
-  .rc-tooltip-arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  .rc-tooltip.rc-tooltip-zoom-enter,
-  .rc-tooltip.rc-tooltip-zoom-leave {
-    display: block;
-  }
-
-  .rc-tooltip-zoom-enter,
-  .rc-tooltip-zoom-appear {
-    opacity: 0;
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
-    animation-play-state: paused;
-  }
-
-  .rc-tooltip-zoom-leave {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
-    animation-play-state: paused;
-  }
-
-  .rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
-  .rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
-    animation-name: rcToolTipZoomIn;
-    animation-play-state: running;
-  }
-
-  .rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
-    animation-name: rcToolTipZoomOut;
-    animation-play-state: running;
-  }
-
-  @keyframes rcToolTipZoomIn {
-    0% {
-      opacity: 0;
-      transform-origin: 50% 50%;
-      transform: scale(0, 0);
-    }
-    100% {
-      opacity: 1;
-      transform-origin: 50% 50%;
-      transform: scale(1, 1);
-    }
-  }
-
-  @keyframes rcToolTipZoomOut {
-    0% {
-      opacity: 1;
-      transform-origin: 50% 50%;
-      transform: scale(1, 1);
-    }
-    100% {
-      opacity: 0;
-      transform-origin: 50% 50%;
-      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 UIConfigContext = React12.createContext(null);
-var UIConfigProvider = ({
-  config,
-  children
-}) => {
-  const {
-    theme,
-    icons = {},
-    toast = {}
-  } = config;
-  const toastConfig = {
-    maxCount: toast.maxCount ?? 5,
-    defaultDuration: toast.defaultDuration ?? 3e3
-  };
-  const Provider = styled3.ThemeProvider;
-  const TooltipStyles = TooltipGlobalStyles;
-  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,
-      defaultDuration: toastConfig.defaultDuration
-    },
-    children
-  ))));
-};
-var useUIConfig = () => {
-  const context = React12.useContext(UIConfigContext);
-  if (!context) {
-    throw new Error("useUIConfig must be used within UIConfigProvider");
-  }
-  return context;
-};
-UIConfigProvider.displayName = "UIConfigProvider";
-
-// src/UIConfigProvider/createUIConfig.ts
-var createUIConfig = (config) => {
-  return {
-    // Theme is required
-    theme: config.theme,
-    // Icons with default
-    icons: config.icons ?? {},
-    // Toast with defaults
-    toast: {
-      maxCount: config.toast?.maxCount ?? 5,
-      defaultDuration: config.toast?.defaultDuration ?? 3e3,
-      position: config.toast?.position ?? "top-right",
-      offset: {
-        x: config.toast?.offset?.x ?? 24,
-        y: config.toast?.offset?.y ?? 24
-      }
-    },
-    // Locale with default
-    locale: config.locale ?? "en-US",
-    // I18n with defaults
-    i18n: {
-      toast: {
-        closeLabel: config.i18n?.toast?.closeLabel ?? "Close"
-      },
-      button: {
-        loadingText: config.i18n?.button?.loadingText ?? "Loading..."
-      },
-      common: {
-        confirm: config.i18n?.common?.confirm ?? "Confirm",
-        cancel: config.i18n?.common?.cancel ?? "Cancel",
-        ok: config.i18n?.common?.ok ?? "OK"
-      }
-    },
-    // Z-index with defaults
-    zIndex: {
-      toast: config.zIndex?.toast ?? 9999,
-      modal: config.zIndex?.modal ?? 1e4,
-      dropdown: config.zIndex?.dropdown ?? 1e3,
-      tooltip: config.zIndex?.tooltip ?? 1001
-    },
-    // Animation with defaults
-    animation: {
-      duration: config.animation?.duration ?? 200,
-      easing: config.animation?.easing ?? "cubic-bezier(0.4, 0, 0.2, 1)",
-      disabled: config.animation?.disabled ?? false
-    },
-    // A11y with defaults
-    a11y: {
-      announceMessages: config.a11y?.announceMessages ?? true,
-      focusVisible: config.a11y?.focusVisible ?? true,
-      reduceMotion: config.a11y?.reduceMotion ?? false
-    }
-  };
-};
-var mergeUIConfig = (baseConfig, ...configs) => {
-  const merged = configs.reduce((acc, config) => ({
-    ...acc,
-    ...config,
-    toast: { ...acc.toast, ...config.toast },
-    i18n: { ...acc.i18n, ...config.i18n },
-    zIndex: { ...acc.zIndex, ...config.zIndex },
-    animation: { ...acc.animation, ...config.animation },
-    a11y: { ...acc.a11y, ...config.a11y }
-  }), baseConfig);
-  return merged;
-};
-
-exports.Button = Button;
-exports.Checkbox = Checkbox;
-exports.Icon = Icon;
-exports.IconProvider = IconProvider;
-exports.Input = Input;
-exports.NumberInput = NumberInput;
-exports.Radio = Radio;
-exports.SearchInput = SearchInput;
-exports.Slider = Slider;
-exports.SpinButton = SpinButton;
-exports.Switch = Switch;
-exports.Tabs = Tabs;
-exports.Toast = Toast;
-exports.ToastContainer = ToastContainer2;
-exports.Tooltip = Tooltip;
-exports.UIConfigProvider = UIConfigProvider;
-exports.createUIConfig = createUIConfig;
-exports.mergeUIConfig = mergeUIConfig;
-exports.useIconRegistry = useIconRegistry;
-exports.useToast = useToast;
-exports.useUIConfig = useUIConfig;
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map