@officesdk/design 0.1.14 → 0.1.16

package/dist/components/esm/index.js

@@ -1,4 +1,6 @@
 import React3, { forwardRef, useState, createContext, useEffect, useRef, useCallback, useContext, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import { lightTheme } from '@officesdk/design-theme';
 import baseStyled, { createGlobalStyle } from 'styled-components';
 import RcTooltip from 'rc-tooltip';
 import 'rc-tooltip/assets/bootstrap.css';
@@ -7,7 +9,6 @@ import VirtualList from 'rc-virtual-list';
 import 'rc-menu/assets/index.css';
 import RcDropdown from 'rc-dropdown';
 import 'rc-dropdown/assets/index.css';
-import ReactDOM from 'react-dom';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -34,11 +35,54 @@ var init_IconProvider = __esm({
     IconProvider.displayName = "IconProvider";
   }
 });
+var globalConfig, globalIconRegistry, globalToastConfig, createDefaultRenderFunction, initUIConfig, getUIConfig, getGlobalIconRegistry, getGlobalToastConfig;
+var init_configManager = __esm({
+  "src/UIConfigProvider/configManager.ts"() {
+    init_context();
+    globalConfig = null;
+    globalIconRegistry = null;
+    globalToastConfig = null;
+    createDefaultRenderFunction = () => {
+      return (element, container) => {
+        if ("createRoot" in ReactDOM) {
+          const { createRoot } = ReactDOM;
+          const root = createRoot(container);
+          root.render(element);
+        } else {
+          ReactDOM.render(element, container);
+        }
+      };
+    };
+    initUIConfig = (config) => {
+      globalConfig = config;
+      const renderFunction = createDefaultRenderFunction();
+      registerGlobalContext({
+        theme: config.theme,
+        render: renderFunction
+      });
+      globalIconRegistry = config.icons || null;
+      globalToastConfig = {
+        maxCount: config.toast?.maxCount ?? 5,
+        defaultDuration: config.toast?.defaultDuration ?? 3e3
+      };
+    };
+    getUIConfig = () => {
+      return globalConfig;
+    };
+    getGlobalIconRegistry = () => {
+      return globalIconRegistry;
+    };
+    getGlobalToastConfig = () => {
+      return globalToastConfig;
+    };
+  }
+});
 var IconContainer, Icon;
 var init_Icon = __esm({
   "src/Icon/Icon.tsx"() {
     init_styled();
     init_IconProvider();
+    init_configManager();
     IconContainer = styled.span`
   display: inline-flex;
   align-items: center;
@@ -66,7 +110,9 @@ var init_Icon = __esm({
       style,
       onClick
     }) => {
-      const registry = useIconRegistry();
+      const contextRegistry = useIconRegistry();
+      const globalRegistry = getGlobalIconRegistry();
+      const registry = contextRegistry || globalRegistry;
       let iconElement = children;
       if (!iconElement && src) {
         iconElement = /* @__PURE__ */ React3.createElement(
@@ -83,7 +129,9 @@ var init_Icon = __esm({
         if (IconComponent) {
           iconElement = /* @__PURE__ */ React3.createElement(IconComponent, null);
         } else if (process.env.NODE_ENV !== "production") {
-          console.warn(`Icon "${name}" not found in registry. Make sure IconProvider is set up.`);
+          console.warn(
+            `Icon "${name}" not found in registry. Make sure IconProvider is set up or call initUIConfig() with icons.`
+          );
         }
       }
       if (!iconElement) {
@@ -511,14 +559,36 @@ var context_exports = {};
 __export(context_exports, {
   getGlobalRenderFunction: () => getGlobalRenderFunction,
   getGlobalTheme: () => getGlobalTheme,
-  registerGlobalContext: () => registerGlobalContext
+  registerGlobalContext: () => registerGlobalContext,
+  registerGlobalTheme: () => registerGlobalTheme
 });
+function deepMerge(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        deepMerge(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+  return deepMerge(target, ...sources);
+}
+function isObject(item) {
+  return item && typeof item === "object" && !Array.isArray(item);
+}
 var globalTheme, registerGlobalTheme, getGlobalTheme, globalRenderFunction, getGlobalRenderFunction, registerGlobalContext;
 var init_context = __esm({
   "src/utils/context.ts"() {
-    globalTheme = {};
+    globalTheme = lightTheme;
     registerGlobalTheme = (theme3) => {
-      Object.assign(globalTheme, { ...globalTheme, ...theme3 });
+      deepMerge(
+        globalTheme,
+        theme3
+      );
     };
     getGlobalTheme = () => {
       return globalTheme;
@@ -1140,7 +1210,7 @@ var init_NumberInput = __esm({
     DownArrow = () => /* @__PURE__ */ React3.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("path", { d: "M7 9.5L3.5 5.5H10.5L7 9.5Z", fill: "currentColor" }));
     NumberInput = ({
       value: controlledValue,
-      defaultValue = 0,
+      defaultValue,
       min = -Infinity,
       max = Infinity,
       step = 1,
@@ -1151,6 +1221,7 @@ var init_NumberInput = __esm({
       formatter,
       parser,
       unit,
+      placeholder,
       onChange,
       className,
       style
@@ -1162,6 +1233,9 @@ var init_NumberInput = __esm({
       const value = controlledValue !== void 0 ? controlledValue : internalValue;
       const formatValue = useCallback(
         (val) => {
+          if (val === void 0) {
+            return "";
+          }
           if (formatter) {
             return formatter(val);
           }
@@ -1189,6 +1263,9 @@ var init_NumberInput = __esm({
       }, [value, isFocused, formatValue]);
       const clampValue = useCallback(
         (val) => {
+          if (val === void 0) {
+            return void 0;
+          }
           return Math.max(min, Math.min(max, val));
         },
         [min, max]
@@ -1205,27 +1282,39 @@ var init_NumberInput = __esm({
       );
       const increment = useCallback(() => {
         if (disabled) return;
-        handleValueChange(value + step);
+        const currentValue = value ?? 0;
+        handleValueChange(currentValue + step);
       }, [disabled, value, step, handleValueChange]);
       const decrement = useCallback(() => {
         if (disabled) return;
-        handleValueChange(value - step);
+        const currentValue = value ?? 0;
+        handleValueChange(currentValue - step);
       }, [disabled, value, step, handleValueChange]);
       const handleInputChange = useCallback((e) => {
         setDisplayValue(e.target.value);
       }, []);
       const handleBlur = useCallback(() => {
         setIsFocused(false);
-        const parsed = parseValue(displayValue);
-        if (parsed !== null) {
-          handleValueChange(parsed);
+        const trimmedValue = displayValue.trim();
+        if (trimmedValue === "") {
+          handleValueChange(void 0);
+          setDisplayValue("");
         } else {
-          setDisplayValue(formatValue(value));
+          const parsed = parseValue(trimmedValue);
+          if (parsed !== null) {
+            handleValueChange(parsed);
+          } else {
+            setDisplayValue(formatValue(value));
+          }
         }
       }, [displayValue, parseValue, handleValueChange, value, formatValue]);
       const handleFocus = useCallback(() => {
         setIsFocused(true);
-        setDisplayValue(String(value));
+        if (value !== void 0) {
+          setDisplayValue(String(value));
+        } else {
+          setDisplayValue("");
+        }
       }, [value]);
       const handleKeyDown = useCallback(
         (e) => {
@@ -1262,6 +1351,7 @@ var init_NumberInput = __esm({
             onBlur: handleBlur,
             onKeyDown: handleKeyDown,
             disabled,
+            placeholder,
             $size: size,
             $disabled: disabled
           }
@@ -1320,7 +1410,7 @@ var init_SpinButton = __esm({
   display: flex;
   align-items: center;
   padding: ${({ $size }) => $size === "small" ? "7px 0" : "7px 0"};
-  padding-right: ${({ $size }) => $size === "small" ? "83px" : "72px"};
+  padding-right: ${({ $size }) => $size === "small" ? "8px" : "8px"};
   min-width: 0;
 `;
     SpinButton = ({
@@ -1343,8 +1433,12 @@ var init_SpinButton = __esm({
       const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
       const value = controlledValue !== void 0 ? controlledValue : internalValue;
       const handleValueChange = useCallback(
-        (newValue) => {
-          if (newValue === null) return;
+        (fixedValue, rawValue) => {
+          const newValue = rawValue === void 0 ? fixedValue ?? 0 : fixedValue ?? 0;
+          if (newValue === null) {
+            onChange?.(null);
+            return;
+          }
           if (controlledValue === void 0) {
             setInternalValue(newValue);
           }
@@ -2654,34 +2748,6 @@ var Tabs = ({
   ))));
 };
 Tabs.displayName = "Tab";
-var Tooltip = ({
-  content,
-  variant = "black",
-  size = "small",
-  children,
-  placement = "top",
-  trigger = ["hover"],
-  overlay,
-  overlayClassName,
-  getPopupContainer,
-  ...rest
-}) => {
-  const overlayContent = React3.useMemo(() => /* @__PURE__ */ React3.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__ */ React3.createElement(RcTooltip, { ...tooltipProps, prefixCls: "od-tooltip" }, children);
-};
-Tooltip.displayName = "Tooltip";
 
 // src/Tooltip/globalStyle.ts
 init_context();
@@ -3015,6 +3081,86 @@ var TooltipGlobalStyles = createGlobalStyle`
   }
 `;
 
+// src/utils/styleManager.ts
+init_context();
+var injectedStyles = /* @__PURE__ */ new Set();
+var styleManager = {
+  /**
+   * Inject global styles on demand
+   * @param id Unique identifier for the style (e.g., 'od-tooltip-styles')
+   * @param StyleComponent The styled component to inject
+   */
+  inject: (id, StyleComponent) => {
+    if (injectedStyles.has(id) || typeof document === "undefined") {
+      return;
+    }
+    if (document.getElementById(id)) {
+      injectedStyles.add(id);
+      return;
+    }
+    const renderFunction = getGlobalRenderFunction();
+    if (!renderFunction) {
+      console.warn(
+        `Style injection failed for "${id}": render function not available. Please call initUIConfig() or use UIConfigProvider first.`
+      );
+      return;
+    }
+    const container = document.createElement("div");
+    container.id = id;
+    document.head.appendChild(container);
+    renderFunction(
+      React3.createElement(StyleComponent),
+      container
+    );
+    injectedStyles.add(id);
+  },
+  /**
+   * Check if styles have been injected
+   */
+  isInjected: (id) => {
+    return injectedStyles.has(id) || typeof document !== "undefined" && !!document.getElementById(id);
+  },
+  /**
+   * Reset injected styles (mainly for testing)
+   */
+  reset: () => {
+    injectedStyles.clear();
+  }
+};
+
+// src/Tooltip/Tooltip.tsx
+var Tooltip = ({
+  content,
+  variant = "black",
+  size = "small",
+  children,
+  placement = "top",
+  trigger = ["hover"],
+  overlay,
+  overlayClassName,
+  getPopupContainer,
+  ...rest
+}) => {
+  useEffect(() => {
+    styleManager.inject("od-tooltip-styles", TooltipGlobalStyles);
+  }, []);
+  const overlayContent = React3.useMemo(() => /* @__PURE__ */ React3.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__ */ React3.createElement(RcTooltip, { ...tooltipProps, prefixCls: "od-tooltip" }, children);
+};
+Tooltip.displayName = "Tooltip";
+
 // src/ToolbarButton/ToolbarButton.tsx
 init_styled();
 var ToolbarButtonContainer = styled.div`
@@ -3382,6 +3528,7 @@ var DropdownButtonContainer = styled.button`
       padding: ${sizeConfig.padding};
       gap: ${sizeConfig.gap};
       font-size: ${sizeConfig.fontSize};
+      border-radius: ${sizeConfig.borderRadius};
     `;
 }}
 
@@ -3393,7 +3540,6 @@ var DropdownButtonContainer = styled.button`
     background = config.background.disabled;
   }
   let border = "none";
-  const borderRadius = config.borderRadius || "4px";
   if ($variant === "framed") {
     const borderColor = $error ? theme3.colors?.palettes?.red?.["6"] : theme3.colors?.palettes?.transparency?.["10"];
     border = `1px solid ${borderColor}`;
@@ -3402,7 +3548,6 @@ var DropdownButtonContainer = styled.button`
   return `
       background: ${background};
       border: ${border};
-      border-radius: ${borderRadius};
       color: ${color};
 
       &:hover:not(:disabled) {
@@ -3566,501 +3711,110 @@ DropdownButton2.displayName = "DropdownButton";
 // src/dropdown/Menu.tsx
 init_styled();
 init_Icon2();
-var MenuContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  min-width: 220px;
 
-  ${({ theme: theme3 }) => {
-  const dropdownConfig = theme3.components?.dropdown;
-  const menuConfig = theme3.components?.menu;
-  return `
-      background: ${dropdownConfig?.background || "#fff"};
-      border: ${menuConfig?.border?.width || "1px"} solid ${menuConfig?.border?.color || "rgba(65, 70, 75, 0.1)"};
-      border-radius: ${menuConfig?.border?.radius || "4px"};
-      box-shadow: ${dropdownConfig?.boxShadow || "0 2px 8px rgba(0, 0, 0, 0.15)"};
-    `;
-}}
+// src/dropdown/globalStyle.ts
+init_context();
+var theme2 = getGlobalTheme();
+var DropdownGlobalStyles = createGlobalStyle`
+  /* Dropdown container */
+  .od-dropdown {
+    position: absolute;
+    z-index: 1050;
+  }
 
-  /* Ensure virtual list container has proper width */
-  .rc-virtual-list {
-    width: 100%;
+  .od-dropdown-hidden {
+    display: none;
   }
 
-  .rc-virtual-list-holder {
-    width: 100%;
+  /* Dropdown slide animations */
+  .od-dropdown-slide-up-enter,
+  .od-dropdown-slide-up-appear {
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+    animation-play-state: paused;
   }
 
-  .rc-virtual-list-holder-inner {
-    width: 100%;
+  .od-dropdown-slide-up-leave {
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+  }
+
+  .od-dropdown-slide-up-enter.od-dropdown-slide-up-enter-active,
+  .od-dropdown-slide-up-appear.od-dropdown-slide-up-appear-active {
+    animation-name: rcDropdownSlideUpIn;
+    animation-play-state: running;
+  }
+
+  .od-dropdown-slide-up-leave.od-dropdown-slide-up-leave-active {
+    animation-name: rcDropdownSlideUpOut;
+    animation-play-state: running;
+  }
+
+  @keyframes rcDropdownSlideUpIn {
+    0% {
+      opacity: 0;
+      transform: scaleY(0.8);
+    }
+    100% {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+  }
+
+  @keyframes rcDropdownSlideUpOut {
+    0% {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scaleY(0.8);
+    }
   }
 `;
-var SearchBoxContainer = styled.div`
-  padding: 8px 12px;
-  border-bottom: 1px solid ${({ theme: theme3 }) => theme3.colors?.palettes?.transparency?.["10"]};
-`;
-var SearchIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3.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"
+var MenuGlobalStyles = createGlobalStyle`
+  /* Base menu container */
+  .od-menu {
+    margin: 0;
+    padding: ${() => theme2.components?.dropdown?.padding || "4px 0"};
+    list-style: none;
+    outline: none;
+    box-shadow: none;
+    background: transparent;
+    border: none;
   }
-), /* @__PURE__ */ React3.createElement(
-  "path",
-  {
-    d: "M14 14L11.1 11.1",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
+
+  .od-menu-hidden {
+    display: none;
   }
-));
-var MenuItemContent = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
 
-  ${({ theme: theme3 }) => {
-  const config = theme3.components?.menu?.menuItem;
+  /* Menu item */
+  .od-menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    user-select: none;
+    list-style: none;
+
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
   return `
-      gap: ${config?.layout?.gap || "8px"};
-    `;
+        padding: ${config?.layout?.padding || "6px 12px"};
+        background: ${config?.background?.normal || "transparent"};
+      `;
 }}
-`;
-var IconContainer2 = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  }
 
-  ${({ theme: theme3 }) => {
-  const iconSize = theme3.components?.menu?.menuItem?.icon?.size;
+  .od-menu-item:hover {
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
   return `
-      width: ${iconSize?.width || "18px"};
-      height: ${iconSize?.height || "18px"};
-
-      svg, img {
-        width: 100%;
-        height: 100%;
-      }
-    `;
-}}
-`;
-var ContentBlock2 = styled.div`
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-width: 0;
-`;
-var LabelText2 = styled.div`
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 20px;
-
-  ${({ $size, $disabled, theme: theme3 }) => {
-  const config = theme3.components?.menu?.menuItem;
-  const sizeConfig = config?.size?.[$size];
-  const colorConfig = config?.label?.color;
-  const fontSize = sizeConfig?.label?.fontSize || "13px";
-  const color = $disabled ? colorConfig?.disabled || "rgba(65, 70, 75, 0.3)" : colorConfig?.normal || "#41464b";
-  return `
-      font-size: ${fontSize};
-      color: ${color};
-    `;
-}}
-`;
-var DescriptionText = styled.div`
-  flex: 0 0 auto;
-  white-space: nowrap;
-  line-height: 20px;
-  text-align: right;
-
-  ${({ $size, $disabled, theme: theme3 }) => {
-  const config = theme3.components?.menu?.menuItem;
-  const sizeConfig = config?.size?.[$size];
-  const colorConfig = config?.description?.color;
-  const fontSize = sizeConfig?.description?.fontSize || "10px";
-  const color = $disabled ? colorConfig?.disabled || "rgba(65, 70, 75, 0.3)" : colorConfig?.normal || "rgba(65, 70, 75, 0.6)";
-  return `
-      font-size: ${fontSize};
-      color: ${color};
-    `;
-}}
-`;
-var ActiveIconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  ${({ $size, theme: theme3 }) => {
-  const sizeConfig = theme3.components?.menu?.menuItem?.size?.[$size];
-  const iconSize = sizeConfig?.activeIcon?.size;
-  return `
-      width: ${iconSize?.width || "18px"};
-      height: ${iconSize?.height || "18px"};
-    `;
-}}
-
-  ${({ $visible, $placeholder }) => {
-  if (!$visible && !$placeholder) {
-    return "display: none;";
-  }
-  if ($placeholder && !$visible) {
-    return "visibility: hidden;";
-  }
-  return "";
-}}
-`;
-var NextLevelIconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  ${({ $size, theme: theme3 }) => {
-  const sizeConfig = theme3.components?.menu?.menuItem?.size?.[$size];
-  const iconSize = sizeConfig?.nextLevelIcon?.size;
-  return `
-      width: ${iconSize?.width || "18px"};
-      height: ${iconSize?.height || "18px"};
-    `;
-}}
-`;
-var CheckmarkIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3.createElement(
-  "path",
-  {
-    d: "M14.25 5.25L7.125 12.375L3.75 9",
-    stroke: "#41464B",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-));
-var ArrowIcon2 = () => /* @__PURE__ */ React3.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3.createElement(
-  "path",
-  {
-    d: "M6.75 4.5L11.25 9L6.75 13.5",
-    stroke: "#41464B",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-));
-var Menu = ({
-  items,
-  selectedKeys = [],
-  openKeys,
-  size = "large",
-  searchable = false,
-  searchPlaceholder = "Enter search content",
-  maxHeight = 300,
-  virtual = false,
-  reserveActiveIconSpace = true,
-  onSelect,
-  onSearch,
-  onOpenChange,
-  className,
-  style
-}) => {
-  const [searchValue, setSearchValue] = useState("");
-  const handleSearch = (value) => {
-    setSearchValue(value);
-    onSearch?.(value);
-  };
-  const filteredItems = useMemo(() => {
-    if (!searchValue) return items;
-    const searchLower = searchValue.toLowerCase();
-    const filterMenuItem = (item) => {
-      if (item.label.toLowerCase().includes(searchLower) || item.description?.toLowerCase().includes(searchLower)) {
-        return item;
-      }
-      if (item.children && item.children.length > 0) {
-        const filteredChildren = item.children.map((child) => filterMenuItem(child)).filter(Boolean);
-        if (filteredChildren.length > 0) {
-          return { ...item, children: filteredChildren };
-        }
-      }
-      return null;
-    };
-    const filterItem = (item) => {
-      if (item.type === "divider") return null;
-      if (item.type === "group") {
-        const filteredChildren = item.children.map((child) => filterMenuItem(child)).filter(Boolean);
-        if (filteredChildren.length > 0) {
-          return { ...item, children: filteredChildren };
-        }
-        return null;
-      }
-      return filterMenuItem(item);
-    };
-    return items.map((item) => filterItem(item)).filter(Boolean);
-  }, [items, searchValue]);
-  const renderMenuItemContent = (item, reserveSpace) => {
-    const isSelected = item.selected || selectedKeys.includes(item.key);
-    const isSelectable = item.selectable !== false;
-    const shouldShowActiveIcon = isSelectable && isSelected;
-    const shouldReserveSpace = reserveSpace || isSelectable;
-    const iconElement = item.icon ? /* @__PURE__ */ React3.createElement(IconContainer2, { $size: size }, typeof item.icon === "string" ? /* @__PURE__ */ React3.createElement(Icon, { src: item.icon }) : item.icon) : null;
-    return /* @__PURE__ */ React3.createElement(MenuItemContent, { $size: size }, iconElement, /* @__PURE__ */ React3.createElement(ContentBlock2, null, /* @__PURE__ */ React3.createElement(LabelText2, { $size: size, $disabled: !!item.disabled }, item.label), item.description && /* @__PURE__ */ React3.createElement(DescriptionText, { $size: size, $disabled: !!item.disabled }, item.description)), /* @__PURE__ */ React3.createElement(
-      ActiveIconContainer,
-      {
-        $size: size,
-        $visible: shouldShowActiveIcon,
-        $placeholder: shouldReserveSpace && !shouldShowActiveIcon
-      },
-      shouldShowActiveIcon && /* @__PURE__ */ React3.createElement(CheckmarkIcon, null)
-    ), item.children && item.children.length > 0 && /* @__PURE__ */ React3.createElement(NextLevelIconContainer, { $size: size }, /* @__PURE__ */ React3.createElement(ArrowIcon2, null)));
-  };
-  const renderItem = (item) => {
-    if (item.type === "divider") {
-      return /* @__PURE__ */ React3.createElement(Divider$1, { key: item.key });
-    }
-    if (item.type === "group") {
-      return /* @__PURE__ */ React3.createElement(ItemGroup, { key: item.key, title: item.label }, item.children.map((child) => renderMenuItem(child)));
-    }
-    return renderMenuItem(item);
-  };
-  const renderMenuItem = (item) => {
-    if (item.children && item.children.length > 0) {
-      return /* @__PURE__ */ React3.createElement(
-        SubMenu,
-        {
-          key: item.key,
-          title: renderMenuItemContent(item, reserveActiveIconSpace),
-          disabled: item.disabled,
-          popupOffset: [5, 0]
-        },
-        item.children.map((child) => renderMenuItem(child))
-      );
-    }
-    return /* @__PURE__ */ React3.createElement(
-      MenuItem,
-      {
-        key: item.key,
-        disabled: item.disabled,
-        onClick: () => {
-          item.onClick?.(item.key);
-          onSelect?.(item.key);
-        }
-      },
-      renderMenuItemContent(item, reserveActiveIconSpace)
-    );
-  };
-  const itemHeight = size === "medium" ? 28 : 36;
-  const menuKey = openKeys?.join(",") || "menu";
-  return /* @__PURE__ */ React3.createElement(MenuContainer, { className, style }, searchable && /* @__PURE__ */ React3.createElement(SearchBoxContainer, null, /* @__PURE__ */ React3.createElement(
-    Input,
-    {
-      lineType: "underlined",
-      size: "small",
-      placeholder: searchPlaceholder,
-      value: searchValue,
-      onChange: (e) => handleSearch(e.target.value),
-      clearable: true,
-      onClear: () => handleSearch(""),
-      prefixNode: /* @__PURE__ */ React3.createElement(SearchIcon, null)
-    }
-  )), virtual && filteredItems.length > 10 ? /* @__PURE__ */ React3.createElement(
-    VirtualList,
-    {
-      data: filteredItems,
-      height: maxHeight,
-      itemHeight,
-      itemKey: "key",
-      fullHeight: false,
-      style: { width: "100%" }
-    },
-    (item) => /* @__PURE__ */ React3.createElement(
-      RcMenu,
-      {
-        key: menuKey,
-        prefixCls: "od-menu",
-        mode: "vertical",
-        selectedKeys,
-        openKeys,
-        onOpenChange,
-        triggerSubMenuAction: "hover",
-        expandIcon: null,
-        style: {
-          border: "none",
-          background: "transparent",
-          padding: 0
-        }
-      },
-      renderItem(item)
-    )
-  ) : /* @__PURE__ */ React3.createElement(
-    RcMenu,
-    {
-      key: menuKey,
-      prefixCls: "od-menu",
-      mode: "vertical",
-      selectedKeys,
-      openKeys,
-      onOpenChange,
-      triggerSubMenuAction: "hover",
-      expandIcon: null,
-      style: {
-        border: "none",
-        background: "transparent"
-      }
-    },
-    filteredItems.map(renderItem)
-  ));
-};
-Menu.displayName = "Menu";
-var Dropdown = ({
-  overlay,
-  trigger = ["click"],
-  placement = "bottomLeft",
-  visible: controlledVisible,
-  defaultVisible = false,
-  onVisibleChange,
-  children,
-  overlayClassName,
-  getPopupContainer,
-  ...rest
-}) => {
-  const [internalVisible, setInternalVisible] = useState(defaultVisible);
-  const isControlled = controlledVisible !== void 0;
-  const isVisible = isControlled ? controlledVisible : internalVisible;
-  const handleVisibleChange = (visible) => {
-    if (!isControlled) {
-      setInternalVisible(visible);
-    }
-    onVisibleChange?.(visible);
-  };
-  return /* @__PURE__ */ React3.createElement(
-    RcDropdown,
-    {
-      overlay: overlay || /* @__PURE__ */ React3.createElement("div", null),
-      trigger,
-      placement,
-      visible: isVisible,
-      onVisibleChange: handleVisibleChange,
-      prefixCls: "od-dropdown",
-      overlayClassName,
-      getPopupContainer,
-      ...rest
-    },
-    children
-  );
-};
-Dropdown.displayName = "Dropdown";
-
-// src/dropdown/globalStyle.ts
-init_context();
-var theme2 = getGlobalTheme();
-var DropdownGlobalStyles = createGlobalStyle`
-  /* Dropdown container */
-  .od-dropdown {
-    position: absolute;
-    z-index: 1050;
-  }
-
-  .od-dropdown-hidden {
-    display: none;
-  }
-
-  /* Dropdown slide animations */
-  .od-dropdown-slide-up-enter,
-  .od-dropdown-slide-up-appear {
-    animation-duration: 0.2s;
-    animation-fill-mode: both;
-    animation-play-state: paused;
-  }
-
-  .od-dropdown-slide-up-leave {
-    animation-duration: 0.2s;
-    animation-fill-mode: both;
-    animation-play-state: paused;
-  }
-
-  .od-dropdown-slide-up-enter.od-dropdown-slide-up-enter-active,
-  .od-dropdown-slide-up-appear.od-dropdown-slide-up-appear-active {
-    animation-name: rcDropdownSlideUpIn;
-    animation-play-state: running;
-  }
-
-  .od-dropdown-slide-up-leave.od-dropdown-slide-up-leave-active {
-    animation-name: rcDropdownSlideUpOut;
-    animation-play-state: running;
-  }
-
-  @keyframes rcDropdownSlideUpIn {
-    0% {
-      opacity: 0;
-      transform: scaleY(0.8);
-    }
-    100% {
-      opacity: 1;
-      transform: scaleY(1);
-    }
-  }
-
-  @keyframes rcDropdownSlideUpOut {
-    0% {
-      opacity: 1;
-      transform: scaleY(1);
-    }
-    100% {
-      opacity: 0;
-      transform: scaleY(0.8);
-    }
-  }
-`;
-var MenuGlobalStyles = createGlobalStyle`
-  /* Base menu container */
-  .od-menu {
-    margin: 0;
-    padding: ${() => theme2.components?.dropdown?.padding || "4px 0"};
-    list-style: none;
-    outline: none;
-    box-shadow: none;
-    background: transparent;
-    border: none;
-  }
-
-  .od-menu-hidden {
-    display: none;
-  }
-
-  /* Menu item */
-  .od-menu-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    margin: 0;
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-    user-select: none;
-    list-style: none;
-
-    ${() => {
-  const config = theme2.components?.menu?.menuItem;
-  return `
-        padding: ${config?.layout?.padding || "6px 12px"};
-        background: ${config?.background?.normal || "transparent"};
-      `;
-}}
-  }
-
-  .od-menu-item:hover {
-    ${() => {
-  const config = theme2.components?.menu?.menuItem;
-  return `
-        background: ${config?.background?.hover || "rgba(65, 70, 75, 0.05)"};
-      `;
+        background: ${config?.background?.hover || "rgba(65, 70, 75, 0.05)"};
+      `;
 }}
   }
 
@@ -4233,38 +3987,438 @@ var MenuGlobalStyles = createGlobalStyle`
     transition: max-height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   }
 
-  .od-menu-submenu-inline-collapsed-active {
-    max-height: 1000px;
-  }
+  .od-menu-submenu-inline-collapsed-active {
+    max-height: 1000px;
+  }
+`;
+
+// src/dropdown/Menu.tsx
+var MenuContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 220px;
+
+  ${({ theme: theme3 }) => {
+  const dropdownConfig = theme3.components?.dropdown;
+  const menuConfig = theme3.components?.menu;
+  return `
+      background: ${dropdownConfig?.background || "#fff"};
+      border: ${menuConfig?.border?.width || "1px"} solid ${menuConfig?.border?.color || "rgba(65, 70, 75, 0.1)"};
+      border-radius: ${menuConfig?.border?.radius || "4px"};
+      box-shadow: ${dropdownConfig?.boxShadow || "0 2px 8px rgba(0, 0, 0, 0.15)"};
+    `;
+}}
+
+  /* Ensure virtual list container has proper width */
+  .rc-virtual-list {
+    width: 100%;
+  }
+
+  .rc-virtual-list-holder {
+    width: 100%;
+  }
+
+  .rc-virtual-list-holder-inner {
+    width: 100%;
+  }
+`;
+var SearchBoxContainer = styled.div`
+  padding: 8px 12px;
+  border-bottom: 1px solid ${({ theme: theme3 }) => theme3.colors?.palettes?.transparency?.["10"]};
+`;
+var SearchIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3.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__ */ React3.createElement(
+  "path",
+  {
+    d: "M14 14L11.1 11.1",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+var MenuItemContent = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  ${({ theme: theme3 }) => {
+  const config = theme3.components?.menu?.menuItem;
+  return `
+      gap: ${config?.layout?.gap || "8px"};
+    `;
+}}
+`;
+var IconContainer2 = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ theme: theme3 }) => {
+  const iconSize = theme3.components?.menu?.menuItem?.icon?.size;
+  return `
+      width: ${iconSize?.width || "18px"};
+      height: ${iconSize?.height || "18px"};
+
+      svg, img {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+}}
+`;
+var ContentBlock2 = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-width: 0;
+`;
+var LabelText2 = styled.div`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+
+  ${({ $size, $disabled, theme: theme3 }) => {
+  const config = theme3.components?.menu?.menuItem;
+  const sizeConfig = config?.size?.[$size];
+  const colorConfig = config?.label?.color;
+  const fontSize = sizeConfig?.label?.fontSize || "13px";
+  const color = $disabled ? colorConfig?.disabled || "rgba(65, 70, 75, 0.3)" : colorConfig?.normal || "#41464b";
+  return `
+      font-size: ${fontSize};
+      color: ${color};
+    `;
+}}
+`;
+var DescriptionText = styled.div`
+  flex: 0 0 auto;
+  white-space: nowrap;
+  line-height: 20px;
+  text-align: right;
+
+  ${({ $size, $disabled, theme: theme3 }) => {
+  const config = theme3.components?.menu?.menuItem;
+  const sizeConfig = config?.size?.[$size];
+  const colorConfig = config?.description?.color;
+  const fontSize = sizeConfig?.description?.fontSize || "10px";
+  const color = $disabled ? colorConfig?.disabled || "rgba(65, 70, 75, 0.3)" : colorConfig?.normal || "rgba(65, 70, 75, 0.6)";
+  return `
+      font-size: ${fontSize};
+      color: ${color};
+    `;
+}}
+`;
+var ActiveIconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ $size, theme: theme3 }) => {
+  const sizeConfig = theme3.components?.menu?.menuItem?.size?.[$size];
+  const iconSize = sizeConfig?.activeIcon?.size;
+  return `
+      width: ${iconSize?.width || "18px"};
+      height: ${iconSize?.height || "18px"};
+    `;
+}}
+
+  ${({ $visible, $placeholder }) => {
+  if (!$visible && !$placeholder) {
+    return "display: none;";
+  }
+  if ($placeholder && !$visible) {
+    return "visibility: hidden;";
+  }
+  return "";
+}}
+`;
+var NextLevelIconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ $size, theme: theme3 }) => {
+  const sizeConfig = theme3.components?.menu?.menuItem?.size?.[$size];
+  const iconSize = sizeConfig?.nextLevelIcon?.size;
+  return `
+      width: ${iconSize?.width || "18px"};
+      height: ${iconSize?.height || "18px"};
+    `;
+}}
 `;
+var CheckmarkIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3.createElement(
+  "path",
+  {
+    d: "M14.25 5.25L7.125 12.375L3.75 9",
+    stroke: "#41464B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+var ArrowIcon2 = () => /* @__PURE__ */ React3.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3.createElement(
+  "path",
+  {
+    d: "M6.75 4.5L11.25 9L6.75 13.5",
+    stroke: "#41464B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+var Menu = ({
+  items,
+  selectedKeys = [],
+  openKeys,
+  size = "large",
+  searchable = false,
+  searchPlaceholder = "Enter search content",
+  maxHeight = 300,
+  virtual = false,
+  reserveActiveIconSpace = true,
+  onSelect,
+  onSearch,
+  onOpenChange,
+  className,
+  style
+}) => {
+  useEffect(() => {
+    styleManager.inject("od-menu-styles", MenuGlobalStyles);
+  }, []);
+  const [searchValue, setSearchValue] = useState("");
+  const handleSearch = (value) => {
+    setSearchValue(value);
+    onSearch?.(value);
+  };
+  const filteredItems = useMemo(() => {
+    if (!searchValue) return items;
+    const searchLower = searchValue.toLowerCase();
+    const filterMenuItem = (item) => {
+      if (item.label.toLowerCase().includes(searchLower) || item.description?.toLowerCase().includes(searchLower)) {
+        return item;
+      }
+      if (item.children && item.children.length > 0) {
+        const filteredChildren = item.children.map((child) => filterMenuItem(child)).filter(Boolean);
+        if (filteredChildren.length > 0) {
+          return { ...item, children: filteredChildren };
+        }
+      }
+      return null;
+    };
+    const filterItem = (item) => {
+      if (item.type === "divider") return null;
+      if (item.type === "group") {
+        const filteredChildren = item.children.map((child) => filterMenuItem(child)).filter(Boolean);
+        if (filteredChildren.length > 0) {
+          return { ...item, children: filteredChildren };
+        }
+        return null;
+      }
+      return filterMenuItem(item);
+    };
+    return items.map((item) => filterItem(item)).filter(Boolean);
+  }, [items, searchValue]);
+  const renderMenuItemContent = (item, reserveSpace) => {
+    const isSelected = item.selected || selectedKeys.includes(item.key);
+    const isSelectable = item.selectable !== false;
+    const shouldShowActiveIcon = isSelectable && isSelected;
+    const shouldReserveSpace = reserveSpace || isSelectable;
+    const iconElement = item.icon ? /* @__PURE__ */ React3.createElement(IconContainer2, { $size: size }, typeof item.icon === "string" ? /* @__PURE__ */ React3.createElement(Icon, { src: item.icon }) : item.icon) : null;
+    return /* @__PURE__ */ React3.createElement(MenuItemContent, { $size: size }, iconElement, /* @__PURE__ */ React3.createElement(ContentBlock2, null, /* @__PURE__ */ React3.createElement(LabelText2, { $size: size, $disabled: !!item.disabled }, item.label), item.description && /* @__PURE__ */ React3.createElement(DescriptionText, { $size: size, $disabled: !!item.disabled }, item.description)), /* @__PURE__ */ React3.createElement(
+      ActiveIconContainer,
+      {
+        $size: size,
+        $visible: shouldShowActiveIcon,
+        $placeholder: shouldReserveSpace && !shouldShowActiveIcon
+      },
+      shouldShowActiveIcon && /* @__PURE__ */ React3.createElement(CheckmarkIcon, null)
+    ), item.children && item.children.length > 0 && /* @__PURE__ */ React3.createElement(NextLevelIconContainer, { $size: size }, /* @__PURE__ */ React3.createElement(ArrowIcon2, null)));
+  };
+  const renderItem = (item) => {
+    if (item.type === "divider") {
+      return /* @__PURE__ */ React3.createElement(Divider$1, { key: item.key });
+    }
+    if (item.type === "group") {
+      return /* @__PURE__ */ React3.createElement(ItemGroup, { key: item.key, title: item.label }, item.children.map((child) => renderMenuItem(child)));
+    }
+    return renderMenuItem(item);
+  };
+  const renderMenuItem = (item) => {
+    if (item.children && item.children.length > 0) {
+      return /* @__PURE__ */ React3.createElement(
+        SubMenu,
+        {
+          key: item.key,
+          title: renderMenuItemContent(item, reserveActiveIconSpace),
+          disabled: item.disabled,
+          popupOffset: [5, 0]
+        },
+        item.children.map((child) => renderMenuItem(child))
+      );
+    }
+    return /* @__PURE__ */ React3.createElement(
+      MenuItem,
+      {
+        key: item.key,
+        disabled: item.disabled,
+        onClick: () => {
+          item.onClick?.(item.key);
+          onSelect?.(item.key);
+        }
+      },
+      renderMenuItemContent(item, reserveActiveIconSpace)
+    );
+  };
+  const itemHeight = size === "medium" ? 28 : 36;
+  const menuKey = openKeys?.join(",") || "menu";
+  return /* @__PURE__ */ React3.createElement(MenuContainer, { className, style }, searchable && /* @__PURE__ */ React3.createElement(SearchBoxContainer, null, /* @__PURE__ */ React3.createElement(
+    Input,
+    {
+      lineType: "underlined",
+      size: "small",
+      placeholder: searchPlaceholder,
+      value: searchValue,
+      onChange: (e) => handleSearch(e.target.value),
+      clearable: true,
+      onClear: () => handleSearch(""),
+      prefixNode: /* @__PURE__ */ React3.createElement(SearchIcon, null)
+    }
+  )), virtual && filteredItems.length > 10 ? /* @__PURE__ */ React3.createElement(
+    VirtualList,
+    {
+      data: filteredItems,
+      height: maxHeight,
+      itemHeight,
+      itemKey: "key",
+      fullHeight: false,
+      style: { width: "100%" }
+    },
+    (item) => /* @__PURE__ */ React3.createElement(
+      RcMenu,
+      {
+        key: menuKey,
+        prefixCls: "od-menu",
+        mode: "vertical",
+        selectedKeys,
+        openKeys,
+        onOpenChange,
+        triggerSubMenuAction: "hover",
+        expandIcon: null,
+        style: {
+          border: "none",
+          background: "transparent",
+          padding: 0
+        }
+      },
+      renderItem(item)
+    )
+  ) : /* @__PURE__ */ React3.createElement(
+    RcMenu,
+    {
+      key: menuKey,
+      prefixCls: "od-menu",
+      mode: "vertical",
+      selectedKeys,
+      openKeys,
+      onOpenChange,
+      triggerSubMenuAction: "hover",
+      expandIcon: null,
+      style: {
+        border: "none",
+        background: "transparent"
+      }
+    },
+    filteredItems.map(renderItem)
+  ));
+};
+Menu.displayName = "Menu";
+var Dropdown = ({
+  overlay,
+  trigger = ["click"],
+  placement = "bottomLeft",
+  visible: controlledVisible,
+  defaultVisible = false,
+  onVisibleChange,
+  children,
+  overlayClassName,
+  getPopupContainer,
+  ...rest
+}) => {
+  useEffect(() => {
+    styleManager.inject("od-dropdown-styles", DropdownGlobalStyles);
+  }, []);
+  const [internalVisible, setInternalVisible] = useState(defaultVisible);
+  const isControlled = controlledVisible !== void 0;
+  const isVisible = isControlled ? controlledVisible : internalVisible;
+  const handleVisibleChange = (visible) => {
+    if (!isControlled) {
+      setInternalVisible(visible);
+    }
+    onVisibleChange?.(visible);
+  };
+  return /* @__PURE__ */ React3.createElement(
+    RcDropdown,
+    {
+      overlay: overlay || /* @__PURE__ */ React3.createElement("div", null),
+      trigger,
+      placement,
+      visible: isVisible,
+      onVisibleChange: handleVisibleChange,
+      prefixCls: "od-dropdown",
+      overlayClassName,
+      getPopupContainer,
+      ...rest
+    },
+    children
+  );
+};
+Dropdown.displayName = "Dropdown";
 
 // src/UIConfigProvider/UIConfigProvider.tsx
 init_IconProvider();
+init_configManager();
 init_context();
 var UIConfigContext = createContext(null);
 var UIConfigProvider = ({ config, children }) => {
-  const { icons = {}, toast: toast2 = {} } = config;
-  const renderFunction = (element, container) => {
-    if ("createRoot" in ReactDOM) {
-      const { createRoot } = ReactDOM;
-      const root = createRoot(container);
-      root.render(element);
-    } else {
-      ReactDOM.render(element, container);
-    }
-  };
-  registerGlobalContext({
-    theme: config.theme,
-    render: renderFunction
-  });
+  useEffect(() => {
+    const renderFunction = (element, container) => {
+      if ("createRoot" in ReactDOM) {
+        const { createRoot } = ReactDOM;
+        const root = createRoot(container);
+        root.render(element);
+      } else {
+        ReactDOM.render(element, container);
+      }
+    };
+    registerGlobalContext({
+      theme: config.theme,
+      render: renderFunction
+    });
+    initUIConfig(config);
+  }, [config]);
+  const { icons = {} } = config;
   const toastConfig = {
-    maxCount: toast2.maxCount ?? 5,
-    defaultDuration: toast2.defaultDuration ?? 3e3
+    maxCount: config.toast?.maxCount ?? 5,
+    defaultDuration: config.toast?.defaultDuration ?? 3e3
   };
-  const TooltipStyles = TooltipGlobalStyles;
-  const MenuStyles = MenuGlobalStyles;
-  const DropdownStyles = DropdownGlobalStyles;
-  return /* @__PURE__ */ React3.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React3.createElement(TooltipStyles, null), /* @__PURE__ */ React3.createElement(MenuStyles, null), /* @__PURE__ */ React3.createElement(DropdownStyles, null), /* @__PURE__ */ React3.createElement(IconProvider, { icons }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React3.createElement(IconProvider, { icons }, /* @__PURE__ */ React3.createElement(
     ToastContainer2,
     {
       maxCount: toastConfig.maxCount,
@@ -4275,10 +4429,7 @@ var UIConfigProvider = ({ config, children }) => {
 };
 var useUIConfig = () => {
   const context = useContext(UIConfigContext);
-  if (!context) {
-    throw new Error("useUIConfig must be used within UIConfigProvider");
-  }
-  return context;
+  return context || getUIConfig();
 };
 UIConfigProvider.displayName = "UIConfigProvider";
 
@@ -4349,10 +4500,13 @@ var mergeUIConfig = (baseConfig, ...configs) => {
   return merged;
 };
 
+// src/UIConfigProvider/index.ts
+init_configManager();
+
 // src/index.ts
 init_styled();
 init_context();
 
-export { Button, Checkbox, Dropdown, DropdownButton2 as DropdownButton, DropdownGlobalStyles, Icon, IconProvider, Input, Menu, MenuGlobalStyles, NumberInput, Radio, SearchInput, Slider, SpinButton, Switch, Tabs, Toast, ToastContainer2 as ToastContainer, ToolbarButton, Tooltip, UIConfigProvider, UnderlinedInput, createUIConfig, getGlobalTheme, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };
+export { Button, Checkbox, Dropdown, DropdownButton2 as DropdownButton, DropdownGlobalStyles, Icon, IconProvider, Input, Menu, MenuGlobalStyles, NumberInput, Radio, SearchInput, Slider, SpinButton, Switch, Tabs, Toast, ToastContainer2 as ToastContainer, ToolbarButton, Tooltip, UIConfigProvider, UnderlinedInput, createUIConfig, getGlobalIconRegistry, getGlobalTheme, getGlobalToastConfig, getUIConfig, initUIConfig, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map