@officesdk/design 0.1.13 → 0.1.15

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,33 @@ 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;
@@ -2014,7 +2081,17 @@ var InputWrapper2 = styled.div`
       boxShadow = sizeConfig?.boxShadowActive || "none";
     }
   }
-  if ($lineType === "outlined") {
+  if ($lineType === "borderless") {
+    return `
+        border: none;
+        background: transparent;
+        box-shadow: none;
+
+        &:hover:not(:disabled) {
+          background: transparent;
+        }
+      `;
+  } else if ($lineType === "outlined") {
     return `
         border: 1px solid ${borderColor};
         background: ${background};
@@ -2644,34 +2721,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();
@@ -3005,6 +3054,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`
@@ -3372,6 +3501,7 @@ var DropdownButtonContainer = styled.button`
       padding: ${sizeConfig.padding};
       gap: ${sizeConfig.gap};
       font-size: ${sizeConfig.fontSize};
+      border-radius: ${sizeConfig.borderRadius};
     `;
 }}
 
@@ -3383,7 +3513,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}`;
@@ -3392,7 +3521,6 @@ var DropdownButtonContainer = styled.button`
   return `
       background: ${background};
       border: ${border};
-      border-radius: ${borderRadius};
       color: ${color};
 
       &:hover:not(:disabled) {
@@ -3556,90 +3684,372 @@ 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"};
+        background: ${config?.background?.hover || "rgba(65, 70, 75, 0.05)"};
+      `;
+}}
+  }
 
-      svg, img {
-        width: 100%;
-        height: 100%;
-      }
-    `;
+  .od-menu-item-active,
+  .od-menu-item-selected {
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.active || "rgba(65, 70, 75, 0.1)"};
+      `;
 }}
-`;
+  }
+
+  .od-menu-item-disabled {
+    cursor: not-allowed;
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.disabled || "transparent"};
+      `;
+}}
+  }
+
+  .od-menu-item-disabled:hover {
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.disabled || "transparent"};
+      `;
+}}
+  }
+
+  /* SubMenu */
+  .od-menu-submenu {
+    position: relative;
+    list-style: none;
+  }
+
+  .od-menu-submenu-title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    user-select: none;
+
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        padding: ${config?.layout?.padding || "6px 12px"};
+        background: ${config?.background?.normal || "transparent"};
+      `;
+}}
+  }
+
+  .od-menu-submenu-title:hover {
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.hover || "rgba(65, 70, 75, 0.05)"};
+      `;
+}}
+  }
+
+  .od-menu-submenu-open > .od-menu-submenu-title {
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.active || "rgba(65, 70, 75, 0.1)"};
+      `;
+}}
+  }
+
+  .od-menu-submenu-disabled .od-menu-submenu-title {
+    cursor: not-allowed;
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.disabled || "transparent"};
+      `;
+}}
+  }
+
+  /* Submenu popup */
+  .od-menu-submenu-popup {
+    position: absolute;
+    z-index: 1050;
+  }
+
+  /* Submenu popup positioning - add 5px gap */
+  .od-menu-submenu-placement-rightTop,
+  .od-menu-submenu-placement-rightBottom {
+    padding-left: 5px;
+  }
+
+  .od-menu-submenu-placement-leftTop,
+  .od-menu-submenu-placement-leftBottom {
+    padding-right: 5px;
+  }
+
+  .od-menu-submenu > .od-menu {
+    ${() => {
+  const dropdownConfig = theme2.components?.dropdown;
+  const menuConfig = theme2.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)"};
+      `;
+}}
+  }
+
+  /* Item Group */
+  .od-menu-item-group-title {
+    padding: 8px 12px 4px;
+    user-select: none;
+    list-style: none;
+
+    ${() => {
+  const config = theme2.components?.menu?.groupTitle;
+  return `
+        font-size: ${config?.fontSize || "12px"};
+        font-weight: ${config?.fontWeight || "500"};
+        color: ${config?.color || "rgba(65, 70, 75, 0.6)"};
+        line-height: 20px;
+      `;
+}}
+  }
+
+  .od-menu-item-group-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Divider */
+  .od-menu-item-divider {
+    overflow: hidden;
+    line-height: 0;
+    list-style: none;
+
+    ${() => {
+  const config = theme2.components?.menu?.divider;
+  return `
+        height: ${config?.height || "1px"};
+        background: ${config?.background || "rgba(65, 70, 75, 0.1)"};
+        margin: ${config?.margin || "4px 0"};
+      `;
+}}
+  }
+
+  /* Animation */
+  .od-menu-submenu-inline {
+    border: 0;
+    box-shadow: none;
+  }
+
+  .od-menu-submenu-inline > .od-menu {
+    padding: 0;
+    border: 0;
+    box-shadow: none;
+  }
+
+  /* Collapse animation */
+  .od-menu-submenu-inline-collapsed {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+
+  .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;
@@ -3762,6 +4172,9 @@ var Menu = ({
   className,
   style
 }) => {
+  useEffect(() => {
+    styleManager.inject("od-menu-styles", MenuGlobalStyles);
+  }, []);
   const [searchValue, setSearchValue] = useState("");
   const handleSearch = (value) => {
     setSearchValue(value);
@@ -3921,6 +4334,9 @@ var Dropdown = ({
   getPopupContainer,
   ...rest
 }) => {
+  useEffect(() => {
+    styleManager.inject("od-dropdown-styles", DropdownGlobalStyles);
+  }, []);
   const [internalVisible, setInternalVisible] = useState(defaultVisible);
   const isControlled = controlledVisible !== void 0;
   const isVisible = isControlled ? controlledVisible : internalVisible;
@@ -3948,313 +4364,34 @@ var Dropdown = ({
 };
 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)"};
-      `;
-}}
-  }
-
-  .od-menu-item-active,
-  .od-menu-item-selected {
-    ${() => {
-  const config = theme2.components?.menu?.menuItem;
-  return `
-        background: ${config?.background?.active || "rgba(65, 70, 75, 0.1)"};
-      `;
-}}
-  }
-
-  .od-menu-item-disabled {
-    cursor: not-allowed;
-    ${() => {
-  const config = theme2.components?.menu?.menuItem;
-  return `
-        background: ${config?.background?.disabled || "transparent"};
-      `;
-}}
-  }
-
-  .od-menu-item-disabled:hover {
-    ${() => {
-  const config = theme2.components?.menu?.menuItem;
-  return `
-        background: ${config?.background?.disabled || "transparent"};
-      `;
-}}
-  }
-
-  /* SubMenu */
-  .od-menu-submenu {
-    position: relative;
-    list-style: none;
-  }
-
-  .od-menu-submenu-title {
-    position: relative;
-    display: flex;
-    align-items: center;
-    margin: 0;
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-    user-select: none;
-
-    ${() => {
-  const config = theme2.components?.menu?.menuItem;
-  return `
-        padding: ${config?.layout?.padding || "6px 12px"};
-        background: ${config?.background?.normal || "transparent"};
-      `;
-}}
-  }
-
-  .od-menu-submenu-title:hover {
-    ${() => {
-  const config = theme2.components?.menu?.menuItem;
-  return `
-        background: ${config?.background?.hover || "rgba(65, 70, 75, 0.05)"};
-      `;
-}}
-  }
-
-  .od-menu-submenu-open > .od-menu-submenu-title {
-    ${() => {
-  const config = theme2.components?.menu?.menuItem;
-  return `
-        background: ${config?.background?.active || "rgba(65, 70, 75, 0.1)"};
-      `;
-}}
-  }
-
-  .od-menu-submenu-disabled .od-menu-submenu-title {
-    cursor: not-allowed;
-    ${() => {
-  const config = theme2.components?.menu?.menuItem;
-  return `
-        background: ${config?.background?.disabled || "transparent"};
-      `;
-}}
-  }
-
-  /* Submenu popup */
-  .od-menu-submenu-popup {
-    position: absolute;
-    z-index: 1050;
-  }
-
-  /* Submenu popup positioning - add 5px gap */
-  .od-menu-submenu-placement-rightTop,
-  .od-menu-submenu-placement-rightBottom {
-    padding-left: 5px;
-  }
-
-  .od-menu-submenu-placement-leftTop,
-  .od-menu-submenu-placement-leftBottom {
-    padding-right: 5px;
-  }
-
-  .od-menu-submenu > .od-menu {
-    ${() => {
-  const dropdownConfig = theme2.components?.dropdown;
-  const menuConfig = theme2.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)"};
-      `;
-}}
-  }
-
-  /* Item Group */
-  .od-menu-item-group-title {
-    padding: 8px 12px 4px;
-    user-select: none;
-    list-style: none;
-
-    ${() => {
-  const config = theme2.components?.menu?.groupTitle;
-  return `
-        font-size: ${config?.fontSize || "12px"};
-        font-weight: ${config?.fontWeight || "500"};
-        color: ${config?.color || "rgba(65, 70, 75, 0.6)"};
-        line-height: 20px;
-      `;
-}}
-  }
-
-  .od-menu-item-group-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  /* Divider */
-  .od-menu-item-divider {
-    overflow: hidden;
-    line-height: 0;
-    list-style: none;
-
-    ${() => {
-  const config = theme2.components?.menu?.divider;
-  return `
-        height: ${config?.height || "1px"};
-        background: ${config?.background || "rgba(65, 70, 75, 0.1)"};
-        margin: ${config?.margin || "4px 0"};
-      `;
-}}
-  }
-
-  /* Animation */
-  .od-menu-submenu-inline {
-    border: 0;
-    box-shadow: none;
-  }
-
-  .od-menu-submenu-inline > .od-menu {
-    padding: 0;
-    border: 0;
-    box-shadow: none;
-  }
-
-  /* Collapse animation */
-  .od-menu-submenu-inline-collapsed {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  }
-
-  .od-menu-submenu-inline-collapsed-active {
-    max-height: 1000px;
-  }
-`;
-
 // 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,
@@ -4265,10 +4402,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";
 
@@ -4339,10 +4473,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