@officesdk/design 0.2.4 → 0.2.6

package/dist/components/esm/index.js

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom';
-import React3, { forwardRef, useState, createContext, useEffect, useMemo, useRef, useCallback, useContext } from 'react';
-import { ArrowRightIcon, CloseIcon, SearchIcon, ErrorIcon, WarningIcon, InfoIcon, SuccessIcon, CheckIcon, ChevronDownIcon } from '@officesdk/design/icons';
+import React3, { forwardRef, useState, useEffect, createContext, useCallback, useContext, useMemo, useRef } from 'react';
+import { ArrowRightIcon, CloseIcon, SearchIcon, ErrorIcon, WarningIcon, InfoIcon, SuccessIcon, CheckIcon, ArrowDownIcon } from '@officesdk/design/icons';
 import { lightTheme } from '@officesdk/design/theme';
 import baseStyled, { createGlobalStyle as createGlobalStyle$1 } from 'styled-components';
 import RcTooltip from 'rc-tooltip';
@@ -1278,15 +1278,355 @@ var init_Slider2 = __esm({
     init_valueMap();
   }
 });
-var NumberInputContainer, InputWrapper, UnitText, StyledInput, ButtonGroup, StepButton, UpArrow, DownArrow, NumberInput;
+var ToastContext, ToastWrapper2, ToastContainer2, useToast;
+var init_ToastContainer = __esm({
+  "src/Toast/ToastContainer.tsx"() {
+    init_styled();
+    init_Toast();
+    ToastContext = createContext(null);
+    ToastWrapper2 = styled.div`
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+
+  ${({ $placement, theme: theme2 }) => {
+      const offset = theme2.components?.toast?.offset || { vertical: "24px", horizontal: "24px" };
+      const vertical = offset.vertical || "24px";
+      const horizontal = offset.horizontal || "24px";
+      const styles = {
+        "top-right": `
+        top: ${vertical};
+        right: ${horizontal};
+      `,
+        "top-left": `
+        top: ${vertical};
+        left: ${horizontal};
+      `,
+        "top-center": `
+        top: ${vertical};
+        left: 50%;
+        transform: translateX(-50%);
+      `,
+        "bottom-right": `
+        bottom: ${vertical};
+        right: ${horizontal};
+      `,
+        "bottom-left": `
+        bottom: ${vertical};
+        left: ${horizontal};
+      `,
+        "bottom-center": `
+        bottom: ${vertical};
+        left: 50%;
+        transform: translateX(-50%);
+      `
+      };
+      return styles[$placement] || styles["top-right"];
+    }}
+`;
+    ToastContainer2 = ({
+      placement = "top-right",
+      maxCount = 5,
+      defaultDuration = 3e3,
+      children
+    }) => {
+      const [toasts, setToasts] = useState([]);
+      const showToast = 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 = useCallback((id) => {
+        setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
+      }, []);
+      const success = useCallback((message, options) => {
+        return showToast({ ...options, variant: "success", message });
+      }, [showToast]);
+      const info = useCallback((message, options) => {
+        return showToast({ ...options, variant: "info", message });
+      }, [showToast]);
+      const error = useCallback((message, options) => {
+        return showToast({ ...options, variant: "error", message });
+      }, [showToast]);
+      const warn = useCallback((message, options) => {
+        return showToast({ ...options, variant: "warn", message });
+      }, [showToast]);
+      const loading = useCallback((message, options) => {
+        return showToast({ ...options, variant: "loading", message });
+      }, [showToast]);
+      const contextValue = {
+        showToast,
+        hideToast,
+        success,
+        info,
+        error,
+        warn,
+        loading
+      };
+      return /* @__PURE__ */ React3.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React3.createElement(ToastWrapper2, { $placement: placement }, toasts.map((toast2) => /* @__PURE__ */ React3.createElement(
+        Toast,
+        {
+          key: toast2.id,
+          ...toast2,
+          onClose: () => hideToast(toast2.id)
+        }
+      ))));
+    };
+    useToast = () => {
+      const context = useContext(ToastContext);
+      if (!context) {
+        throw new Error("useToast must be used within ToastContainer");
+      }
+      return context;
+    };
+    ToastContainer2.displayName = "ToastContainer";
+  }
+});
+var UIConfigContext, UIConfigProvider, useUIConfig;
+var init_UIConfigProvider = __esm({
+  "src/UIConfigProvider/UIConfigProvider.tsx"() {
+    init_IconProvider();
+    init_ToastContainer();
+    init_configManager();
+    init_context();
+    UIConfigContext = createContext(null);
+    UIConfigProvider = ({ config, children }) => {
+      useEffect(() => {
+        registerGlobalContext({
+          theme: config.theme,
+          render: config.renderFunction
+        });
+        initUIConfig(config);
+      }, [config]);
+      const { icons = {} } = config;
+      const toastConfig = {
+        maxCount: config.toast?.maxCount ?? 5,
+        defaultDuration: config.toast?.defaultDuration ?? 3e3
+      };
+      return /* @__PURE__ */ React3.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React3.createElement(IconProvider, { icons }, /* @__PURE__ */ React3.createElement(
+        ToastContainer2,
+        {
+          maxCount: toastConfig.maxCount,
+          defaultDuration: toastConfig.defaultDuration
+        },
+        children
+      )));
+    };
+    useUIConfig = () => {
+      const context = useContext(UIConfigContext);
+      return context || getUIConfig();
+    };
+    UIConfigProvider.displayName = "UIConfigProvider";
+  }
+});
+
+// src/UIConfigProvider/createUIConfig.ts
+var createUIConfig, mergeUIConfig;
+var init_createUIConfig = __esm({
+  "src/UIConfigProvider/createUIConfig.ts"() {
+    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
+        }
+      };
+    };
+    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;
+    };
+  }
+});
+
+// src/UIConfigProvider/index.ts
+var init_UIConfigProvider2 = __esm({
+  "src/UIConfigProvider/index.ts"() {
+    init_UIConfigProvider();
+    init_createUIConfig();
+    init_configManager();
+  }
+});
+
+// src/utils/numberLocale.ts
+var localeConfigCache, getNumberLocaleConfig, formatNumber, formatNumberForEdit, parseLocalizedNumber;
+var init_numberLocale = __esm({
+  "src/utils/numberLocale.ts"() {
+    localeConfigCache = /* @__PURE__ */ new Map();
+    getNumberLocaleConfig = (locale) => {
+      const cached = localeConfigCache.get(locale);
+      if (cached) {
+        return cached;
+      }
+      try {
+        const formatter = new Intl.NumberFormat(locale);
+        const parts = formatter.formatToParts(1234.5);
+        const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+        const group = parts.find((p) => p.type === "group")?.value ?? ",";
+        const config = {
+          decimalSeparator: decimal,
+          thousandsSeparator: group
+        };
+        localeConfigCache.set(locale, config);
+        return config;
+      } catch {
+        const fallback = {
+          decimalSeparator: ".",
+          thousandsSeparator: ","
+        };
+        return fallback;
+      }
+    };
+    formatNumber = (value, locale, precision) => {
+      try {
+        const options = {};
+        if (precision !== void 0) {
+          options.minimumFractionDigits = precision;
+          options.maximumFractionDigits = precision;
+        }
+        return new Intl.NumberFormat(locale, options).format(value);
+      } catch {
+        if (precision !== void 0) {
+          return value.toFixed(precision);
+        }
+        return String(value);
+      }
+    };
+    formatNumberForEdit = (value, locale, precision) => {
+      const config = getNumberLocaleConfig(locale);
+      let str;
+      if (precision !== void 0) {
+        str = value.toFixed(precision);
+      } else {
+        str = String(value);
+      }
+      if (config.decimalSeparator !== ".") {
+        str = str.replace(".", config.decimalSeparator);
+      }
+      return str;
+    };
+    parseLocalizedNumber = (value, locale) => {
+      if (!value || value.trim() === "") {
+        return null;
+      }
+      const config = getNumberLocaleConfig(locale);
+      let normalized = value.trim();
+      if (config.thousandsSeparator === "." && config.decimalSeparator === ",") {
+        normalized = normalized.replace(/\./g, "");
+        normalized = normalized.replace(",", ".");
+      } else if (config.decimalSeparator === ",") {
+        normalized = normalized.replace(/[\s\u00A0\u202F]/g, "");
+        normalized = normalized.replace(",", ".");
+      } else if (config.thousandsSeparator === "," && config.decimalSeparator === ".") {
+        normalized = normalized.replace(/,/g, "");
+      } else {
+        if (config.thousandsSeparator) {
+          const escapedThousands = config.thousandsSeparator.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          normalized = normalized.replace(new RegExp(escapedThousands, "g"), "");
+        }
+        if (config.decimalSeparator !== ".") {
+          normalized = normalized.replace(config.decimalSeparator, ".");
+        }
+      }
+      const parsed = parseFloat(normalized);
+      return isNaN(parsed) ? null : parsed;
+    };
+  }
+});
+var getDecimalPlaces, precisionAdd, precisionSubtract, NumberInputContainer, InputWrapper, UnitText, StyledInput, ButtonGroup, StepButton, UpArrow, DownArrow, NumberInput;
 var init_NumberInput = __esm({
   "src/NumberInput/NumberInput.tsx"() {
     init_styled();
+    init_UIConfigProvider2();
+    init_numberLocale();
+    getDecimalPlaces = (num) => {
+      const str = String(num);
+      const decimalIndex = str.indexOf(".");
+      if (decimalIndex === -1) return 0;
+      return str.length - decimalIndex - 1;
+    };
+    precisionAdd = (a, b) => {
+      const precision = Math.max(getDecimalPlaces(a), getDecimalPlaces(b));
+      const multiplier = Math.pow(10, precision);
+      return Math.round(a * multiplier + b * multiplier) / multiplier;
+    };
+    precisionSubtract = (a, b) => {
+      const precision = Math.max(getDecimalPlaces(a), getDecimalPlaces(b));
+      const multiplier = Math.pow(10, precision);
+      return Math.round(a * multiplier - b * multiplier) / multiplier;
+    };
     NumberInputContainer = styled.div`
   display: inline-flex;
   align-items: center;
   background: white;
-  border: 1px solid;
   border-radius: ${({ theme: theme2, $size }) => theme2.components.inputNumber[$size].borderRadius};
   flex-shrink: 0;
 
@@ -1298,26 +1638,47 @@ var init_NumberInput = __esm({
     width: 80px;
   `}
 
-  ${({ $disabled, $alert, $isFocused, theme: theme2 }) => {
+  ${({ $disabled, $alert, $isFocused, $lineType, theme: theme2 }) => {
+      if ($lineType === "borderless") {
+        return `
+        border: none;
+        background: transparent;
+        ${$disabled ? "cursor: not-allowed;" : ""}
+      `;
+      }
+      if ($lineType === "underlined") {
+        const borderColor = $disabled ? theme2.colors.palettes.transparency["10"] : $alert ? theme2.colors.palettes.red["6"] : $isFocused ? theme2.colors.palettes.transparency["30"] : "transparent";
+        return `
+        border: none;
+        border-bottom: 1px solid ${borderColor};
+        border-radius: 0;
+        ${$disabled ? "cursor: not-allowed;" : ""}
+        ${!$disabled && !$isFocused && !$alert ? `
+          &:hover {
+            border-bottom-color: ${theme2.colors.palettes.transparency["20"]};
+          }
+        ` : ""}
+      `;
+      }
       if ($disabled) {
         return `
-        border-color: ${theme2.colors.palettes.transparency["10"]};
+        border: 1px solid ${theme2.colors.palettes.transparency["10"]};
         cursor: not-allowed;
       `;
       }
       if ($alert) {
         return `
-        border-color: ${theme2.colors.palettes.red["6"]};
+        border: 1px solid ${theme2.colors.palettes.red["6"]};
       `;
       }
       if ($isFocused) {
         return `
-        border-color: ${theme2.colors.palettes.transparency["30"]};
+        border: 1px solid ${theme2.colors.palettes.transparency["30"]};
         box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
       `;
       }
       return `
-      border-color: ${theme2.colors.palettes.transparency["10"]};
+      border: 1px solid ${theme2.colors.palettes.transparency["10"]};
 
       &:hover {
         border-color: ${theme2.colors.palettes.transparency["20"]};
@@ -1396,18 +1757,40 @@ var init_NumberInput = __esm({
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-left: 1px solid;
   flex-shrink: 0;
+  position: relative;
+
+  ${({ $disabled, $alert, $lineType, theme: theme2 }) => {
+      if ($lineType === "borderless" || $lineType === "underlined") {
+        return "";
+      }
+      const borderColor = $disabled ? theme2.colors.palettes.transparency["10"] : $alert ? theme2.colors.palettes.red["6"] : theme2.colors.palettes.transparency["10"];
+      return `border-left: 1px solid ${borderColor};`;
+    }}
 
-  ${({ $disabled, $alert, theme: theme2 }) => {
+  /* Centered divider line between buttons */
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 1px;
+    pointer-events: none;
+    background-color: ${({ $disabled, $alert, $lineType, theme: theme2 }) => {
+      if ($lineType === "borderless" || $lineType === "underlined") {
+        return "transparent";
+      }
       if ($disabled) {
-        return `border-color: ${theme2.colors.palettes.transparency["10"]};`;
+        return theme2.colors.palettes.transparency["10"];
       }
       if ($alert) {
-        return `border-color: ${theme2.colors.palettes.red["6"]};`;
+        return theme2.colors.palettes.red["6"];
       }
-      return `border-color: ${theme2.colors.palettes.transparency["10"]};`;
-    }}
+      return theme2.colors.palettes.transparency["10"];
+    }};
+  }
 `;
     StepButton = styled.button`
   flex: 1 1 50%;
@@ -1422,15 +1805,6 @@ var init_NumberInput = __esm({
   min-height: 0;
   overflow: hidden;
 
-  ${({ $position, $alert, $disabled, theme: theme2 }) => {
-      if ($position === "up") {
-        return `
-        border-bottom: 1px solid ${$disabled ? theme2.colors.palettes.transparency["10"] : $alert ? theme2.colors.palettes.red["6"] : theme2.colors.palettes.transparency["10"]};
-      `;
-      }
-      return "";
-    }}
-
   ${({ $disabled, theme: theme2 }) => {
       if ($disabled) {
         return `
@@ -1471,13 +1845,20 @@ var init_NumberInput = __esm({
       parser,
       unit,
       placeholder,
+      showStepButtons = true,
+      showStepButtonsTrigger = "normal",
+      lineType = "outlined",
+      useThousandsSeparator = false,
       onChange,
       className,
       style
     }) => {
+      const config = useUIConfig();
+      const locale = config?.locale ?? "en-US";
       const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
       const [displayValue, setDisplayValue] = useState("");
       const [isFocused, setIsFocused] = useState(false);
+      const [isHovered, setIsHovered] = useState(false);
       const inputRef = useRef(null);
       const value = controlledValue !== void 0 ? controlledValue : internalValue;
       const formatValue = useCallback(
@@ -1488,28 +1869,49 @@ var init_NumberInput = __esm({
           if (formatter) {
             return formatter(val);
           }
-          if (precision !== void 0) {
-            return val.toFixed(precision);
+          if (useThousandsSeparator) {
+            return formatNumber(val, locale, precision);
+          }
+          return formatNumberForEdit(val, locale, precision);
+        },
+        [formatter, precision, locale, useThousandsSeparator]
+      );
+      const formatValueForEdit = useCallback(
+        (val) => {
+          if (val === void 0) {
+            return "";
+          }
+          if (formatter) {
+            return formatter(val);
           }
-          return String(val);
+          return formatNumberForEdit(val, locale, precision);
         },
-        [formatter, precision]
+        [formatter, precision, locale]
       );
       const parseValue = useCallback(
         (displayVal) => {
           if (parser) {
             return parser(displayVal);
           }
-          const parsed = parseFloat(displayVal);
-          return isNaN(parsed) ? null : parsed;
+          return parseLocalizedNumber(displayVal, locale);
         },
-        [parser]
+        [parser, locale]
       );
       useEffect(() => {
         if (!isFocused) {
           setDisplayValue(formatValue(value));
         }
       }, [value, isFocused, formatValue]);
+      const applyPrecision = useCallback(
+        (val) => {
+          if (val === void 0 || precision === void 0) {
+            return val;
+          }
+          const multiplier = Math.pow(10, precision);
+          return Math.round(val * multiplier) / multiplier;
+        },
+        [precision]
+      );
       const clampValue = useCallback(
         (val) => {
           if (val === void 0) {
@@ -1532,13 +1934,23 @@ var init_NumberInput = __esm({
       const increment = useCallback(() => {
         if (disabled) return;
         const currentValue = value ?? 0;
-        handleValueChange(currentValue + step);
-      }, [disabled, value, step, handleValueChange]);
+        const newValue = precisionAdd(currentValue, step);
+        handleValueChange(newValue);
+        if (isFocused) {
+          const clampedValue = clampValue(newValue);
+          setDisplayValue(formatValueForEdit(clampedValue));
+        }
+      }, [disabled, value, step, handleValueChange, isFocused, clampValue, formatValueForEdit]);
       const decrement = useCallback(() => {
         if (disabled) return;
         const currentValue = value ?? 0;
-        handleValueChange(currentValue - step);
-      }, [disabled, value, step, handleValueChange]);
+        const newValue = precisionSubtract(currentValue, step);
+        handleValueChange(newValue);
+        if (isFocused) {
+          const clampedValue = clampValue(newValue);
+          setDisplayValue(formatValueForEdit(clampedValue));
+        }
+      }, [disabled, value, step, handleValueChange, isFocused, clampValue, formatValueForEdit]);
       const handleInputChange = useCallback((e) => {
         setDisplayValue(e.target.value);
       }, []);
@@ -1551,20 +1963,17 @@ var init_NumberInput = __esm({
         } else {
           const parsed = parseValue(trimmedValue);
           if (parsed !== null) {
-            handleValueChange(parsed);
+            const preciseValue = applyPrecision(parsed);
+            handleValueChange(preciseValue);
           } else {
             setDisplayValue(formatValue(value));
           }
         }
-      }, [displayValue, parseValue, handleValueChange, value, formatValue]);
+      }, [displayValue, parseValue, handleValueChange, value, formatValue, applyPrecision]);
       const handleFocus = useCallback(() => {
         setIsFocused(true);
-        if (value !== void 0) {
-          setDisplayValue(String(value));
-        } else {
-          setDisplayValue("");
-        }
-      }, [value]);
+        setDisplayValue(formatValueForEdit(value));
+      }, [value, formatValueForEdit]);
       const handleKeyDown = useCallback(
         (e) => {
           if (e.key === "ArrowUp") {
@@ -1579,6 +1988,12 @@ var init_NumberInput = __esm({
         },
         [increment, decrement]
       );
+      const handleMouseEnter = useCallback(() => {
+        setIsHovered(true);
+      }, []);
+      const handleMouseLeave = useCallback(() => {
+        setIsHovered(false);
+      }, []);
       return /* @__PURE__ */ React3.createElement(
         NumberInputContainer,
         {
@@ -1586,8 +2001,11 @@ var init_NumberInput = __esm({
           $disabled: disabled,
           $alert: alert,
           $isFocused: isFocused,
+          $lineType: lineType,
           className,
-          style
+          style,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave
         },
         /* @__PURE__ */ React3.createElement(InputWrapper, null, /* @__PURE__ */ React3.createElement(
           StyledInput,
@@ -1605,12 +2023,10 @@ var init_NumberInput = __esm({
             $disabled: disabled
           }
         ), unit && /* @__PURE__ */ React3.createElement(UnitText, { $size: size, $disabled: disabled }, unit)),
-        /* @__PURE__ */ React3.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React3.createElement(
+        showStepButtons && (showStepButtonsTrigger !== "hover" || isHovered || isFocused) && /* @__PURE__ */ React3.createElement(ButtonGroup, { $alert: alert, $disabled: disabled, $lineType: lineType }, /* @__PURE__ */ React3.createElement(
           StepButton,
           {
             type: "button",
-            $position: "up",
-            $alert: alert,
             $disabled: disabled,
             onClick: increment,
             disabled,
@@ -1621,8 +2037,6 @@ var init_NumberInput = __esm({
           StepButton,
           {
             type: "button",
-            $position: "down",
-            $alert: alert,
             $disabled: disabled,
             onClick: decrement,
             disabled,
@@ -2712,124 +3126,7 @@ init_Icon2();
 
 // src/Toast/index.ts
 init_Toast();
-
-// src/Toast/ToastContainer.tsx
-init_styled();
-init_Toast();
-var ToastContext = createContext(null);
-var ToastWrapper2 = styled.div`
-  position: fixed;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  pointer-events: none;
-
-  > * {
-    pointer-events: auto;
-  }
-
-  ${({ $placement, theme: theme2 }) => {
-  const offset = theme2.components?.toast?.offset || { vertical: "24px", horizontal: "24px" };
-  const vertical = offset.vertical || "24px";
-  const horizontal = offset.horizontal || "24px";
-  const styles = {
-    "top-right": `
-        top: ${vertical};
-        right: ${horizontal};
-      `,
-    "top-left": `
-        top: ${vertical};
-        left: ${horizontal};
-      `,
-    "top-center": `
-        top: ${vertical};
-        left: 50%;
-        transform: translateX(-50%);
-      `,
-    "bottom-right": `
-        bottom: ${vertical};
-        right: ${horizontal};
-      `,
-    "bottom-left": `
-        bottom: ${vertical};
-        left: ${horizontal};
-      `,
-    "bottom-center": `
-        bottom: ${vertical};
-        left: 50%;
-        transform: translateX(-50%);
-      `
-  };
-  return styles[$placement] || styles["top-right"];
-}}
-`;
-var ToastContainer2 = ({
-  placement = "top-right",
-  maxCount = 5,
-  defaultDuration = 3e3,
-  children
-}) => {
-  const [toasts, setToasts] = useState([]);
-  const showToast = 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 = useCallback((id) => {
-    setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
-  }, []);
-  const success = useCallback((message, options) => {
-    return showToast({ ...options, variant: "success", message });
-  }, [showToast]);
-  const info = useCallback((message, options) => {
-    return showToast({ ...options, variant: "info", message });
-  }, [showToast]);
-  const error = useCallback((message, options) => {
-    return showToast({ ...options, variant: "error", message });
-  }, [showToast]);
-  const warn = useCallback((message, options) => {
-    return showToast({ ...options, variant: "warn", message });
-  }, [showToast]);
-  const loading = useCallback((message, options) => {
-    return showToast({ ...options, variant: "loading", message });
-  }, [showToast]);
-  const contextValue = {
-    showToast,
-    hideToast,
-    success,
-    info,
-    error,
-    warn,
-    loading
-  };
-  return /* @__PURE__ */ React3.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React3.createElement(ToastWrapper2, { $placement: placement }, toasts.map((toast2) => /* @__PURE__ */ React3.createElement(
-    Toast,
-    {
-      key: toast2.id,
-      ...toast2,
-      onClose: () => hideToast(toast2.id)
-    }
-  ))));
-};
-var useToast = () => {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within ToastContainer");
-  }
-  return context;
-};
-ToastContainer2.displayName = "ToastContainer";
-
-// src/Toast/index.ts
+init_ToastContainer();
 init_toastManager();
 
 // src/Tabs/Tabs.tsx
@@ -2856,10 +3153,12 @@ var TabList = styled.div`
   height: 100%;
 
 
-  ${({ $variant, theme: theme2 }) => {
+  ${({ $variant, $justify, theme: theme2 }) => {
   const variantConfig = theme2.components.tab[$variant];
+  const justifyContent = $variant === "line" ? $justify === "center" ? "center" : $justify === "end" ? "flex-end" : "flex-start" : "flex-start";
   return `
       gap: ${variantConfig.layout.gap};
+      justify-content: ${justifyContent};
     `;
 }}
 
@@ -2990,6 +3289,7 @@ var Tabs = ({
   variant = "line",
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   size: _size = "large",
+  justify = "start",
   onChange,
   className,
   style,
@@ -3010,7 +3310,7 @@ var Tabs = ({
     },
     [controlledActiveKey, onChange]
   );
-  return /* @__PURE__ */ React3.createElement(TabContainer, { $variant: variant, className, style }, /* @__PURE__ */ React3.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(TabContainer, { $variant: variant, className, style }, /* @__PURE__ */ React3.createElement(TabList, { $variant: variant, $justify: justify, role: "tablist" }, items.map((item) => /* @__PURE__ */ React3.createElement(
     TabItem,
     {
       key: item.key,
@@ -3225,6 +3525,8 @@ var TooltipGlobalStyles = createGlobalStyle$1`
     line-height: ${() => getGlobalTheme().components.tooltip.black.lineHeight};
     font-weight: ${() => getGlobalTheme().components.tooltip.black.fontWeight};
     max-width: ${() => getGlobalTheme().components.tooltip.black.maxWidth};
+    white-space: normal;
+    word-wrap: break-word;
     text-align: left;
     text-decoration: none;
   }
@@ -3244,6 +3546,9 @@ var TooltipGlobalStyles = createGlobalStyle$1`
     font-size: ${() => getGlobalTheme().components.tooltip.white.small.fontSize};
     line-height: ${() => getGlobalTheme().components.tooltip.white.small.lineHeight};
     font-weight: ${() => getGlobalTheme().components.tooltip.white.small.fontWeight};
+    max-width: ${() => getGlobalTheme().components.tooltip.white.small.maxWidth};
+    white-space: normal;
+    word-wrap: break-word;
     text-align: left;
     text-decoration: none;
   }
@@ -3263,6 +3568,9 @@ var TooltipGlobalStyles = createGlobalStyle$1`
     font-size: ${() => getGlobalTheme().components.tooltip.white.large.fontSize};
     line-height: ${() => getGlobalTheme().components.tooltip.white.large.lineHeight};
     font-weight: ${() => getGlobalTheme().components.tooltip.white.large.fontWeight};
+    max-width: ${() => getGlobalTheme().components.tooltip.white.large.maxWidth};
+    white-space: normal;
+    word-wrap: break-word;
     text-align: left;
     text-decoration: none;
   }
@@ -3654,7 +3962,7 @@ var ToolbarButton = ({
         },
         renderIcon(),
         renderLabel(),
-        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ChevronDownIcon, null))
+        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ArrowDownIcon, null))
       )
     );
   }
@@ -3690,7 +3998,7 @@ var ToolbarButton = ({
           onClick: handleDropdownClick,
           disabled
         },
-        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ChevronDownIcon, null))
+        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ArrowDownIcon, null))
       )
     );
   }
@@ -3883,6 +4191,7 @@ var DropdownButton2 = forwardRef(
     style,
     textStyle,
     onClick,
+    children,
     ...rest
   }, ref) => {
     const effectiveSize = size || (variant === "framed" ? "large" : "medium");
@@ -3912,7 +4221,7 @@ var DropdownButton2 = forwardRef(
         ...rest
       },
       iconElement && /* @__PURE__ */ React3.createElement(IconWrapper5, { $size: effectiveSize }, iconElement),
-      /* @__PURE__ */ React3.createElement(TextContent, { $disabled: disabled, $hasValue: hasValue, style: textStyle }, value || placeholder),
+      children ? children : /* @__PURE__ */ React3.createElement(TextContent, { $disabled: disabled, $hasValue: hasValue, style: textStyle }, value || placeholder),
       /* @__PURE__ */ React3.createElement(IndicatorWrapper, { $size: effectiveSize, $open: open, $disabled: disabled }, indicatorIcon || /* @__PURE__ */ React3.createElement(ArrowRightIcon, null))
     );
   }
@@ -4959,110 +5268,8 @@ var Loading = ({
 };
 Loading.displayName = "Loading";
 
-// src/UIConfigProvider/UIConfigProvider.tsx
-init_IconProvider();
-init_configManager();
-init_context();
-var UIConfigContext = createContext(null);
-var UIConfigProvider = ({ config, children }) => {
-  useEffect(() => {
-    registerGlobalContext({
-      theme: config.theme,
-      render: config.renderFunction
-    });
-    initUIConfig(config);
-  }, [config]);
-  const { icons = {} } = config;
-  const toastConfig = {
-    maxCount: config.toast?.maxCount ?? 5,
-    defaultDuration: config.toast?.defaultDuration ?? 3e3
-  };
-  return /* @__PURE__ */ React3.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React3.createElement(IconProvider, { icons }, /* @__PURE__ */ React3.createElement(
-    ToastContainer2,
-    {
-      maxCount: toastConfig.maxCount,
-      defaultDuration: toastConfig.defaultDuration
-    },
-    children
-  )));
-};
-var useUIConfig = () => {
-  const context = useContext(UIConfigContext);
-  return context || getUIConfig();
-};
-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;
-};
-
-// src/UIConfigProvider/index.ts
-init_configManager();
-
 // src/index.ts
+init_UIConfigProvider2();
 init_styled();
 init_context();