@officesdk/design 0.1.14 → 0.1.16

package/dist/components/cjs/index.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var React3 = require('react');
+var ReactDOM = require('react-dom');
+var designTheme = require('@officesdk/design-theme');
 var baseStyled = require('styled-components');
 var RcTooltip = require('rc-tooltip');
 require('rc-tooltip/assets/bootstrap.css');
@@ -9,17 +11,16 @@ var VirtualList = require('rc-virtual-list');
 require('rc-menu/assets/index.css');
 var RcDropdown = require('rc-dropdown');
 require('rc-dropdown/assets/index.css');
-var ReactDOM = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React3__default = /*#__PURE__*/_interopDefault(React3);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var baseStyled__default = /*#__PURE__*/_interopDefault(baseStyled);
 var RcTooltip__default = /*#__PURE__*/_interopDefault(RcTooltip);
 var RcMenu__default = /*#__PURE__*/_interopDefault(RcMenu);
 var VirtualList__default = /*#__PURE__*/_interopDefault(VirtualList);
 var RcDropdown__default = /*#__PURE__*/_interopDefault(RcDropdown);
-var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -46,11 +47,54 @@ var init_IconProvider = __esm({
     exports.IconProvider.displayName = "IconProvider";
   }
 });
+var globalConfig, globalIconRegistry, globalToastConfig, createDefaultRenderFunction; exports.initUIConfig = void 0; exports.getUIConfig = void 0; exports.getGlobalIconRegistry = void 0; exports.getGlobalToastConfig = void 0;
+var init_configManager = __esm({
+  "src/UIConfigProvider/configManager.ts"() {
+    init_context();
+    globalConfig = null;
+    globalIconRegistry = null;
+    globalToastConfig = null;
+    createDefaultRenderFunction = () => {
+      return (element, container) => {
+        if ("createRoot" in ReactDOM__default.default) {
+          const { createRoot } = ReactDOM__default.default;
+          const root = createRoot(container);
+          root.render(element);
+        } else {
+          ReactDOM__default.default.render(element, container);
+        }
+      };
+    };
+    exports.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
+      };
+    };
+    exports.getUIConfig = () => {
+      return globalConfig;
+    };
+    exports.getGlobalIconRegistry = () => {
+      return globalIconRegistry;
+    };
+    exports.getGlobalToastConfig = () => {
+      return globalToastConfig;
+    };
+  }
+});
 var IconContainer; exports.Icon = void 0;
 var init_Icon = __esm({
   "src/Icon/Icon.tsx"() {
     init_styled();
     init_IconProvider();
+    init_configManager();
     IconContainer = exports.styled.span`
   display: inline-flex;
   align-items: center;
@@ -78,7 +122,9 @@ var init_Icon = __esm({
       style,
       onClick
     }) => {
-      const registry = exports.useIconRegistry();
+      const contextRegistry = exports.useIconRegistry();
+      const globalRegistry = exports.getGlobalIconRegistry();
+      const registry = contextRegistry || globalRegistry;
       let iconElement = children;
       if (!iconElement && src) {
         iconElement = /* @__PURE__ */ React3__default.default.createElement(
@@ -95,7 +141,9 @@ var init_Icon = __esm({
         if (IconComponent) {
           iconElement = /* @__PURE__ */ React3__default.default.createElement(IconComponent, null);
         } else if (process.env.NODE_ENV !== "production") {
-          console.warn(`Icon "${name}" not found in registry. Make sure IconProvider is set up.`);
+          console.warn(
+            `Icon "${name}" not found in registry. Make sure IconProvider is set up or call initUIConfig() with icons.`
+          );
         }
       }
       if (!iconElement) {
@@ -523,14 +571,36 @@ var context_exports = {};
 __export(context_exports, {
   getGlobalRenderFunction: () => getGlobalRenderFunction,
   getGlobalTheme: () => exports.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; exports.getGlobalTheme = void 0; var globalRenderFunction, getGlobalRenderFunction, registerGlobalContext;
 var init_context = __esm({
   "src/utils/context.ts"() {
-    globalTheme = {};
+    globalTheme = designTheme.lightTheme;
     registerGlobalTheme = (theme3) => {
-      Object.assign(globalTheme, { ...globalTheme, ...theme3 });
+      deepMerge(
+        globalTheme,
+        theme3
+      );
     };
     exports.getGlobalTheme = () => {
       return globalTheme;
@@ -1152,7 +1222,7 @@ var init_NumberInput = __esm({
     DownArrow = () => /* @__PURE__ */ React3__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement("path", { d: "M7 9.5L3.5 5.5H10.5L7 9.5Z", fill: "currentColor" }));
     exports.NumberInput = ({
       value: controlledValue,
-      defaultValue = 0,
+      defaultValue,
       min = -Infinity,
       max = Infinity,
       step = 1,
@@ -1163,6 +1233,7 @@ var init_NumberInput = __esm({
       formatter,
       parser,
       unit,
+      placeholder,
       onChange,
       className,
       style
@@ -1174,6 +1245,9 @@ var init_NumberInput = __esm({
       const value = controlledValue !== void 0 ? controlledValue : internalValue;
       const formatValue = React3.useCallback(
         (val) => {
+          if (val === void 0) {
+            return "";
+          }
           if (formatter) {
             return formatter(val);
           }
@@ -1201,6 +1275,9 @@ var init_NumberInput = __esm({
       }, [value, isFocused, formatValue]);
       const clampValue = React3.useCallback(
         (val) => {
+          if (val === void 0) {
+            return void 0;
+          }
           return Math.max(min, Math.min(max, val));
         },
         [min, max]
@@ -1217,27 +1294,39 @@ var init_NumberInput = __esm({
       );
       const increment = React3.useCallback(() => {
         if (disabled) return;
-        handleValueChange(value + step);
+        const currentValue = value ?? 0;
+        handleValueChange(currentValue + step);
       }, [disabled, value, step, handleValueChange]);
       const decrement = React3.useCallback(() => {
         if (disabled) return;
-        handleValueChange(value - step);
+        const currentValue = value ?? 0;
+        handleValueChange(currentValue - step);
       }, [disabled, value, step, handleValueChange]);
       const handleInputChange = React3.useCallback((e) => {
         setDisplayValue(e.target.value);
       }, []);
       const handleBlur = React3.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 = React3.useCallback(() => {
         setIsFocused(true);
-        setDisplayValue(String(value));
+        if (value !== void 0) {
+          setDisplayValue(String(value));
+        } else {
+          setDisplayValue("");
+        }
       }, [value]);
       const handleKeyDown = React3.useCallback(
         (e) => {
@@ -1274,6 +1363,7 @@ var init_NumberInput = __esm({
             onBlur: handleBlur,
             onKeyDown: handleKeyDown,
             disabled,
+            placeholder,
             $size: size,
             $disabled: disabled
           }
@@ -1332,7 +1422,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;
 `;
     exports.SpinButton = ({
@@ -1355,8 +1445,12 @@ var init_SpinButton = __esm({
       const [internalValue, setInternalValue] = React3.useState(controlledValue ?? defaultValue);
       const value = controlledValue !== void 0 ? controlledValue : internalValue;
       const handleValueChange = React3.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);
           }
@@ -2666,34 +2760,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__default.default.useMemo(() => /* @__PURE__ */ React3__default.default.createElement("div", null, content), [content]);
-  const variantClass = `tooltip-variant-${variant}`;
-  const sizeClass = variant === "white" ? `tooltip-size-${size}` : "";
-  const combinedClassName = [variantClass, sizeClass, overlayClassName].filter(Boolean).join(" ");
-  const tooltipProps = {
-    overlay: overlay ?? overlayContent,
-    placement,
-    trigger,
-    destroyTooltipOnHide: false,
-    overlayClassName: combinedClassName,
-    ...getPopupContainer && { getPopupContainer },
-    ...rest
-  };
-  return /* @__PURE__ */ React3__default.default.createElement(RcTooltip__default.default, { ...tooltipProps, prefixCls: "od-tooltip" }, children);
-};
-Tooltip.displayName = "Tooltip";
 
 // src/Tooltip/globalStyle.ts
 init_context();
@@ -3027,6 +3093,86 @@ var TooltipGlobalStyles = baseStyled.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__default.default.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
+}) => {
+  React3.useEffect(() => {
+    styleManager.inject("od-tooltip-styles", TooltipGlobalStyles);
+  }, []);
+  const overlayContent = React3__default.default.useMemo(() => /* @__PURE__ */ React3__default.default.createElement("div", null, content), [content]);
+  const variantClass = `tooltip-variant-${variant}`;
+  const sizeClass = variant === "white" ? `tooltip-size-${size}` : "";
+  const combinedClassName = [variantClass, sizeClass, overlayClassName].filter(Boolean).join(" ");
+  const tooltipProps = {
+    overlay: overlay ?? overlayContent,
+    placement,
+    trigger,
+    destroyTooltipOnHide: false,
+    overlayClassName: combinedClassName,
+    ...getPopupContainer && { getPopupContainer },
+    ...rest
+  };
+  return /* @__PURE__ */ React3__default.default.createElement(RcTooltip__default.default, { ...tooltipProps, prefixCls: "od-tooltip" }, children);
+};
+Tooltip.displayName = "Tooltip";
+
 // src/ToolbarButton/ToolbarButton.tsx
 init_styled();
 var ToolbarButtonContainer = exports.styled.div`
@@ -3394,6 +3540,7 @@ var DropdownButtonContainer = exports.styled.button`
       padding: ${sizeConfig.padding};
       gap: ${sizeConfig.gap};
       font-size: ${sizeConfig.fontSize};
+      border-radius: ${sizeConfig.borderRadius};
     `;
 }}
 
@@ -3405,7 +3552,6 @@ var DropdownButtonContainer = exports.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}`;
@@ -3414,7 +3560,6 @@ var DropdownButtonContainer = exports.styled.button`
   return `
       background: ${background};
       border: ${border};
-      border-radius: ${borderRadius};
       color: ${color};
 
       &:hover:not(:disabled) {
@@ -3578,501 +3723,110 @@ DropdownButton2.displayName = "DropdownButton";
 // src/dropdown/Menu.tsx
 init_styled();
 init_Icon2();
-var MenuContainer = exports.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 = exports.getGlobalTheme();
+var DropdownGlobalStyles = baseStyled.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 = exports.styled.div`
-  padding: 8px 12px;
-  border-bottom: 1px solid ${({ theme: theme3 }) => theme3.colors?.palettes?.transparency?.["10"]};
-`;
-var SearchIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3__default.default.createElement(
-  "path",
-  {
-    d: "M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
+var MenuGlobalStyles = baseStyled.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__default.default.createElement(
-  "path",
-  {
-    d: "M14 14L11.1 11.1",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
+
+  .od-menu-hidden {
+    display: none;
   }
-));
-var MenuItemContent = exports.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 = exports.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 = exports.styled.div`
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-width: 0;
-`;
-var LabelText2 = exports.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 = exports.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 = exports.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 = exports.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__default.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3__default.default.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__default.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3__default.default.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] = React3.useState("");
-  const handleSearch = (value) => {
-    setSearchValue(value);
-    onSearch?.(value);
-  };
-  const filteredItems = React3.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__default.default.createElement(IconContainer2, { $size: size }, typeof item.icon === "string" ? /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { src: item.icon }) : item.icon) : null;
-    return /* @__PURE__ */ React3__default.default.createElement(MenuItemContent, { $size: size }, iconElement, /* @__PURE__ */ React3__default.default.createElement(ContentBlock2, null, /* @__PURE__ */ React3__default.default.createElement(LabelText2, { $size: size, $disabled: !!item.disabled }, item.label), item.description && /* @__PURE__ */ React3__default.default.createElement(DescriptionText, { $size: size, $disabled: !!item.disabled }, item.description)), /* @__PURE__ */ React3__default.default.createElement(
-      ActiveIconContainer,
-      {
-        $size: size,
-        $visible: shouldShowActiveIcon,
-        $placeholder: shouldReserveSpace && !shouldShowActiveIcon
-      },
-      shouldShowActiveIcon && /* @__PURE__ */ React3__default.default.createElement(CheckmarkIcon, null)
-    ), item.children && item.children.length > 0 && /* @__PURE__ */ React3__default.default.createElement(NextLevelIconContainer, { $size: size }, /* @__PURE__ */ React3__default.default.createElement(ArrowIcon2, null)));
-  };
-  const renderItem = (item) => {
-    if (item.type === "divider") {
-      return /* @__PURE__ */ React3__default.default.createElement(RcMenu.Divider, { key: item.key });
-    }
-    if (item.type === "group") {
-      return /* @__PURE__ */ React3__default.default.createElement(RcMenu.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__default.default.createElement(
-        RcMenu.SubMenu,
-        {
-          key: item.key,
-          title: renderMenuItemContent(item, reserveActiveIconSpace),
-          disabled: item.disabled,
-          popupOffset: [5, 0]
-        },
-        item.children.map((child) => renderMenuItem(child))
-      );
-    }
-    return /* @__PURE__ */ React3__default.default.createElement(
-      RcMenu.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__default.default.createElement(MenuContainer, { className, style }, searchable && /* @__PURE__ */ React3__default.default.createElement(SearchBoxContainer, null, /* @__PURE__ */ React3__default.default.createElement(
-    Input,
-    {
-      lineType: "underlined",
-      size: "small",
-      placeholder: searchPlaceholder,
-      value: searchValue,
-      onChange: (e) => handleSearch(e.target.value),
-      clearable: true,
-      onClear: () => handleSearch(""),
-      prefixNode: /* @__PURE__ */ React3__default.default.createElement(SearchIcon, null)
-    }
-  )), virtual && filteredItems.length > 10 ? /* @__PURE__ */ React3__default.default.createElement(
-    VirtualList__default.default,
-    {
-      data: filteredItems,
-      height: maxHeight,
-      itemHeight,
-      itemKey: "key",
-      fullHeight: false,
-      style: { width: "100%" }
-    },
-    (item) => /* @__PURE__ */ React3__default.default.createElement(
-      RcMenu__default.default,
-      {
-        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__default.default.createElement(
-    RcMenu__default.default,
-    {
-      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] = React3.useState(defaultVisible);
-  const isControlled = controlledVisible !== void 0;
-  const isVisible = isControlled ? controlledVisible : internalVisible;
-  const handleVisibleChange = (visible) => {
-    if (!isControlled) {
-      setInternalVisible(visible);
-    }
-    onVisibleChange?.(visible);
-  };
-  return /* @__PURE__ */ React3__default.default.createElement(
-    RcDropdown__default.default,
-    {
-      overlay: overlay || /* @__PURE__ */ React3__default.default.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 = exports.getGlobalTheme();
-var DropdownGlobalStyles = baseStyled.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 = baseStyled.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)"};
+      `;
 }}
   }
 
@@ -4245,38 +3999,438 @@ var MenuGlobalStyles = baseStyled.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 = exports.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 = exports.styled.div`
+  padding: 8px 12px;
+  border-bottom: 1px solid ${({ theme: theme3 }) => theme3.colors?.palettes?.transparency?.["10"]};
+`;
+var SearchIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3__default.default.createElement(
+  "path",
+  {
+    d: "M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+), /* @__PURE__ */ React3__default.default.createElement(
+  "path",
+  {
+    d: "M14 14L11.1 11.1",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+var MenuItemContent = exports.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 = exports.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 = exports.styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-width: 0;
+`;
+var LabelText2 = exports.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 = exports.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 = exports.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 = exports.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__default.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3__default.default.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__default.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3__default.default.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
+}) => {
+  React3.useEffect(() => {
+    styleManager.inject("od-menu-styles", MenuGlobalStyles);
+  }, []);
+  const [searchValue, setSearchValue] = React3.useState("");
+  const handleSearch = (value) => {
+    setSearchValue(value);
+    onSearch?.(value);
+  };
+  const filteredItems = React3.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__default.default.createElement(IconContainer2, { $size: size }, typeof item.icon === "string" ? /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { src: item.icon }) : item.icon) : null;
+    return /* @__PURE__ */ React3__default.default.createElement(MenuItemContent, { $size: size }, iconElement, /* @__PURE__ */ React3__default.default.createElement(ContentBlock2, null, /* @__PURE__ */ React3__default.default.createElement(LabelText2, { $size: size, $disabled: !!item.disabled }, item.label), item.description && /* @__PURE__ */ React3__default.default.createElement(DescriptionText, { $size: size, $disabled: !!item.disabled }, item.description)), /* @__PURE__ */ React3__default.default.createElement(
+      ActiveIconContainer,
+      {
+        $size: size,
+        $visible: shouldShowActiveIcon,
+        $placeholder: shouldReserveSpace && !shouldShowActiveIcon
+      },
+      shouldShowActiveIcon && /* @__PURE__ */ React3__default.default.createElement(CheckmarkIcon, null)
+    ), item.children && item.children.length > 0 && /* @__PURE__ */ React3__default.default.createElement(NextLevelIconContainer, { $size: size }, /* @__PURE__ */ React3__default.default.createElement(ArrowIcon2, null)));
+  };
+  const renderItem = (item) => {
+    if (item.type === "divider") {
+      return /* @__PURE__ */ React3__default.default.createElement(RcMenu.Divider, { key: item.key });
+    }
+    if (item.type === "group") {
+      return /* @__PURE__ */ React3__default.default.createElement(RcMenu.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__default.default.createElement(
+        RcMenu.SubMenu,
+        {
+          key: item.key,
+          title: renderMenuItemContent(item, reserveActiveIconSpace),
+          disabled: item.disabled,
+          popupOffset: [5, 0]
+        },
+        item.children.map((child) => renderMenuItem(child))
+      );
+    }
+    return /* @__PURE__ */ React3__default.default.createElement(
+      RcMenu.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__default.default.createElement(MenuContainer, { className, style }, searchable && /* @__PURE__ */ React3__default.default.createElement(SearchBoxContainer, null, /* @__PURE__ */ React3__default.default.createElement(
+    Input,
+    {
+      lineType: "underlined",
+      size: "small",
+      placeholder: searchPlaceholder,
+      value: searchValue,
+      onChange: (e) => handleSearch(e.target.value),
+      clearable: true,
+      onClear: () => handleSearch(""),
+      prefixNode: /* @__PURE__ */ React3__default.default.createElement(SearchIcon, null)
+    }
+  )), virtual && filteredItems.length > 10 ? /* @__PURE__ */ React3__default.default.createElement(
+    VirtualList__default.default,
+    {
+      data: filteredItems,
+      height: maxHeight,
+      itemHeight,
+      itemKey: "key",
+      fullHeight: false,
+      style: { width: "100%" }
+    },
+    (item) => /* @__PURE__ */ React3__default.default.createElement(
+      RcMenu__default.default,
+      {
+        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__default.default.createElement(
+    RcMenu__default.default,
+    {
+      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
+}) => {
+  React3.useEffect(() => {
+    styleManager.inject("od-dropdown-styles", DropdownGlobalStyles);
+  }, []);
+  const [internalVisible, setInternalVisible] = React3.useState(defaultVisible);
+  const isControlled = controlledVisible !== void 0;
+  const isVisible = isControlled ? controlledVisible : internalVisible;
+  const handleVisibleChange = (visible) => {
+    if (!isControlled) {
+      setInternalVisible(visible);
+    }
+    onVisibleChange?.(visible);
+  };
+  return /* @__PURE__ */ React3__default.default.createElement(
+    RcDropdown__default.default,
+    {
+      overlay: overlay || /* @__PURE__ */ React3__default.default.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 = React3.createContext(null);
 var UIConfigProvider = ({ config, children }) => {
-  const { icons = {}, toast: toast2 = {} } = config;
-  const renderFunction = (element, container) => {
-    if ("createRoot" in ReactDOM__default.default) {
-      const { createRoot } = ReactDOM__default.default;
-      const root = createRoot(container);
-      root.render(element);
-    } else {
-      ReactDOM__default.default.render(element, container);
-    }
-  };
-  registerGlobalContext({
-    theme: config.theme,
-    render: renderFunction
-  });
+  React3.useEffect(() => {
+    const renderFunction = (element, container) => {
+      if ("createRoot" in ReactDOM__default.default) {
+        const { createRoot } = ReactDOM__default.default;
+        const root = createRoot(container);
+        root.render(element);
+      } else {
+        ReactDOM__default.default.render(element, container);
+      }
+    };
+    registerGlobalContext({
+      theme: config.theme,
+      render: renderFunction
+    });
+    exports.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__default.default.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React3__default.default.createElement(TooltipStyles, null), /* @__PURE__ */ React3__default.default.createElement(MenuStyles, null), /* @__PURE__ */ React3__default.default.createElement(DropdownStyles, null), /* @__PURE__ */ React3__default.default.createElement(exports.IconProvider, { icons }, /* @__PURE__ */ React3__default.default.createElement(
+  return /* @__PURE__ */ React3__default.default.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React3__default.default.createElement(exports.IconProvider, { icons }, /* @__PURE__ */ React3__default.default.createElement(
     ToastContainer2,
     {
       maxCount: toastConfig.maxCount,
@@ -4287,10 +4441,7 @@ var UIConfigProvider = ({ config, children }) => {
 };
 var useUIConfig = () => {
   const context = React3.useContext(UIConfigContext);
-  if (!context) {
-    throw new Error("useUIConfig must be used within UIConfigProvider");
-  }
-  return context;
+  return context || exports.getUIConfig();
 };
 UIConfigProvider.displayName = "UIConfigProvider";
 
@@ -4361,6 +4512,9 @@ var mergeUIConfig = (baseConfig, ...configs) => {
   return merged;
 };
 
+// src/UIConfigProvider/index.ts
+init_configManager();
+
 // src/index.ts
 init_styled();
 init_context();