@officesdk/design 0.1.6 → 0.1.9

package/dist/components/esm/index.js

@@ -1,62 +1,595 @@
-import React12, { forwardRef, useState, createContext, useRef, useCallback, useEffect, useContext } from 'react';
+import React3, { forwardRef, useState, createContext, useEffect, useRef, useCallback, useContext, useMemo } from 'react';
 import baseStyled, { createGlobalStyle } from 'styled-components';
 import RcTooltip from 'rc-tooltip';
 import 'rc-tooltip/assets/bootstrap.css';
-
-// src/Button/Button.tsx
-
-// src/utils/context.ts
-var globalTheme = {};
-var registerGlobalTheme = (theme2) => {
-  Object.assign(globalTheme, { ...globalTheme, ...theme2 });
+import RcMenu, { Divider as Divider$1, ItemGroup, SubMenu, MenuItem } from 'rc-menu';
+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;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
-var getGlobalTheme = () => {
-  return globalTheme;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-var registerGlobalContext = (context) => {
-  if (context.theme) {
-    registerGlobalTheme(context.theme);
+var IconContext, IconProvider, useIconRegistry;
+var init_IconProvider = __esm({
+  "src/Icon/IconProvider.tsx"() {
+    IconContext = createContext(null);
+    IconProvider = ({
+      icons,
+      children
+    }) => {
+      return /* @__PURE__ */ React3.createElement(IconContext.Provider, { value: icons }, children);
+    };
+    useIconRegistry = () => {
+      return useContext(IconContext);
+    };
+    IconProvider.displayName = "IconProvider";
   }
-};
+});
+var IconContainer, Icon;
+var init_Icon = __esm({
+  "src/Icon/Icon.tsx"() {
+    init_styled();
+    init_IconProvider();
+    IconContainer = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ $size }) => typeof $size === "number" ? `${$size}px` : $size};
+  height: ${({ $size }) => typeof $size === "number" ? `${$size}px` : $size};
+  color: ${({ $color }) => $color};
+  flex-shrink: 0;
+  line-height: 1;
 
-// src/utils/styled.ts
-var wrapWithTheme = (component) => {
-  if (component && typeof component === "object") {
-    component.defaultProps = {
-      ...component.defaultProps,
-      get theme() {
-        return getGlobalTheme();
+  svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+    Icon = ({
+      name,
+      src,
+      children,
+      size = 16,
+      color = "currentColor",
+      alt = "icon",
+      className,
+      style,
+      onClick
+    }) => {
+      const registry = useIconRegistry();
+      let iconElement = children;
+      if (!iconElement && src) {
+        iconElement = /* @__PURE__ */ React3.createElement(
+          "img",
+          {
+            src,
+            alt,
+            style: { width: "100%", height: "100%", display: "block" }
+          }
+        );
       }
+      if (!iconElement && name && registry) {
+        const IconComponent = registry[name];
+        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.`);
+        }
+      }
+      if (!iconElement) {
+        if (process.env.NODE_ENV !== "production" && !children && !name && !src) {
+          console.warn('Icon: one of "name", "src", or "children" must be provided');
+        }
+        return null;
+      }
+      return /* @__PURE__ */ React3.createElement(
+        IconContainer,
+        {
+          $size: size,
+          $color: color,
+          className,
+          style,
+          onClick
+        },
+        iconElement
+      );
     };
+    Icon.displayName = "Icon";
   }
-  return component;
-};
-var styledFunction = (tag) => {
-  return wrapWithTheme(baseStyled(tag));
-};
-var styledWithBase = Object.assign(styledFunction, baseStyled);
-Object.keys(baseStyled).forEach((key) => {
-  const originalMethod = baseStyled[key];
-  if (typeof originalMethod === "function") {
-    styledWithBase[key] = (...args) => {
-      const component = originalMethod(...args);
-      return wrapWithTheme(component);
+});
+
+// src/Icon/index.ts
+var init_Icon2 = __esm({
+  "src/Icon/index.ts"() {
+    init_Icon();
+    init_IconProvider();
+  }
+});
+var ToastContainer, IconWrapper, ContentWrapper, Message, Description, ActionGroup, SuccessIcon, InfoIcon, ErrorIcon, WarnIcon, CloseIconSvg, Toast;
+var init_Toast = __esm({
+  "src/Toast/Toast.tsx"() {
+    init_styled();
+    init_Icon2();
+    init_Button2();
+    init_context();
+    ToastContainer = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid;
+  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
+
+  ${({ theme: theme3 }) => {
+      const baseConfig = theme3.components.toast;
+      return `
+      padding: ${baseConfig.padding};
+      border-radius: ${baseConfig.borderRadius};
+      font-size: ${baseConfig.fontSize};
+      font-weight: ${baseConfig.fontWeight};
+    `;
+    }}
+
+  ${({ $variant, theme: theme3 }) => {
+      const variantConfig = theme3.components.toast[$variant];
+      return `
+      background: ${variantConfig.background};
+      border-color: ${variantConfig.borderColor};
+    `;
+    }}
+`;
+    IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ $hasDescription }) => {
+      const size = $hasDescription ? "28px" : "18px";
+      return `
+      width: ${size};
+      height: ${size};
+    `;
+    }}
+`;
+    ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: ${({ $hasDescription }) => $hasDescription ? "column" : "row"};
+  align-items: ${({ $hasDescription }) => $hasDescription ? "flex-start" : "center"};
+  gap: ${({ $hasDescription }) => $hasDescription ? "2px" : "0"};
+  flex: 1;
+`;
+    Message = styled.span`
+  font-size: 13px;
+  line-height: 20px;
+  color: ${({ theme: theme3 }) => theme3.colors.palettes.gray["100"]};
+`;
+    Description = styled.span`
+  font-size: 12px;
+  line-height: 20px;
+  color: ${({ theme: theme3 }) => theme3.colors.palettes.transparency["60"]};
+`;
+    ActionGroup = styled.div`
+  display: flex;
+  gap: 2px;
+  align-items: center;
+`;
+    SuccessIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React3.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+    InfoIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#5ba0e7" }), /* @__PURE__ */ React3.createElement("path", { d: "M10 9V14M10 6H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+    ErrorIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#e95555" }), /* @__PURE__ */ React3.createElement("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+    WarnIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#ebe361" }), /* @__PURE__ */ React3.createElement("path", { d: "M10 6V11M10 14H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+    CloseIconSvg = () => /* @__PURE__ */ React3.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("path", { d: "M9 3L3 9M3 3L9 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }));
+    Toast = ({
+      variant = "info",
+      message,
+      description,
+      mainButtonText,
+      onMainButtonClick,
+      secondaryButtonText,
+      onSecondaryButtonClick,
+      closable = false,
+      onClose,
+      duration = 0,
+      icon,
+      showIcon = true,
+      className,
+      style
+    }) => {
+      const [visible, setVisible] = useState(true);
+      useEffect(() => {
+        if (duration > 0) {
+          const timer = setTimeout(() => {
+            setVisible(false);
+            onClose?.();
+          }, duration);
+          return () => clearTimeout(timer);
+        }
+      }, [duration, onClose]);
+      const handleClose = () => {
+        setVisible(false);
+        onClose?.();
+      };
+      if (!visible) {
+        return null;
+      }
+      const getIconElement = () => {
+        if (icon) {
+          return icon;
+        }
+        const theme3 = getGlobalTheme();
+        const themeIconUrl = theme3?.components?.toast?.[variant]?.icon?.url;
+        if (themeIconUrl) {
+          return /* @__PURE__ */ React3.createElement(Icon, { src: themeIconUrl });
+        }
+        const defaultIcons = {
+          success: /* @__PURE__ */ React3.createElement(SuccessIcon, null),
+          info: /* @__PURE__ */ React3.createElement(InfoIcon, null),
+          error: /* @__PURE__ */ React3.createElement(ErrorIcon, null),
+          warn: /* @__PURE__ */ React3.createElement(WarnIcon, null)
+        };
+        return defaultIcons[variant];
+      };
+      const iconElement = getIconElement();
+      const hasDescription = !!description;
+      const hasActions = !!(mainButtonText || secondaryButtonText || closable);
+      return /* @__PURE__ */ React3.createElement(
+        ToastContainer,
+        {
+          $variant: variant,
+          className,
+          style,
+          role: "alert",
+          "aria-live": "polite"
+        },
+        showIcon && /* @__PURE__ */ React3.createElement(IconWrapper, { $variant: variant, $hasDescription: hasDescription }, iconElement),
+        /* @__PURE__ */ React3.createElement(ContentWrapper, { $hasDescription: hasDescription }, /* @__PURE__ */ React3.createElement(Message, null, message), description && /* @__PURE__ */ React3.createElement(Description, null, description)),
+        hasActions && /* @__PURE__ */ React3.createElement(ActionGroup, null, mainButtonText && onMainButtonClick && /* @__PURE__ */ React3.createElement(
+          Button,
+          {
+            variant: "text",
+            colorType: "guidance",
+            size: "small",
+            onClick: onMainButtonClick
+          },
+          mainButtonText
+        ), secondaryButtonText && onSecondaryButtonClick && /* @__PURE__ */ React3.createElement(
+          Button,
+          {
+            variant: "text",
+            colorType: "default",
+            size: "small",
+            onClick: onSecondaryButtonClick
+          },
+          secondaryButtonText
+        ), closable && /* @__PURE__ */ React3.createElement(
+          Button,
+          {
+            variant: "icon",
+            colorType: "default",
+            size: "small",
+            onClick: handleClose,
+            "aria-label": "Close",
+            icon: /* @__PURE__ */ React3.createElement(CloseIconSvg, null),
+            iconBordered: false
+          }
+        ))
+      );
+    };
+    Toast.displayName = "Toast";
+  }
+});
+
+// src/Toast/toastManager.tsx
+var toastManager_exports = {};
+__export(toastManager_exports, {
+  toast: () => toast,
+  toastManager: () => toastManager
+});
+var ToastWrapper, ToastManager, toastManager, toast;
+var init_toastManager = __esm({
+  "src/Toast/toastManager.tsx"() {
+    init_Toast();
+    init_styled();
+    ToastWrapper = styled.div`
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+
+  ${({ $placement, theme: theme3 }) => {
+      const offset = theme3.components?.toast?.offset || { vertical: "24px", horizontal: "24px" };
+      const vertical = offset.vertical || "24px";
+      const horizontal = offset.horizontal || "24px";
+      const styles = {
+        "top-right": `
+        top: ${vertical};
+        right: ${horizontal};
+      `,
+        "top-left": `
+        top: ${vertical};
+        left: ${horizontal};
+      `,
+        "top-center": `
+        top: ${vertical};
+        left: 50%;
+        transform: translateX(-50%);
+      `,
+        "bottom-right": `
+        bottom: ${vertical};
+        right: ${horizontal};
+      `,
+        "bottom-left": `
+        bottom: ${vertical};
+        left: ${horizontal};
+      `,
+        "bottom-center": `
+        bottom: ${vertical};
+        left: 50%;
+        transform: translateX(-50%);
+      `
+      };
+      return styles[$placement] || styles["top-right"];
+    }}
+`;
+    ToastManager = class {
+      constructor() {
+        this.toasts = [];
+        this.container = null;
+        this.renderFunc = null;
+        this.config = {
+          placement: "top-right",
+          maxCount: 5,
+          defaultDuration: 3e3
+        };
+        this.tryGetRenderFunction();
+      }
+      /**
+       * Try to get render function from global context
+       */
+      tryGetRenderFunction() {
+        if (typeof window !== "undefined") {
+          Promise.resolve().then(() => (init_context(), context_exports)).then(({ getGlobalRenderFunction: getGlobalRenderFunction2 }) => {
+            const renderFunc = getGlobalRenderFunction2();
+            if (renderFunc) {
+              this.renderFunc = renderFunc;
+            }
+          }).catch(() => {
+          });
+        }
+      }
+      /**
+       * Set render function (from registerGlobalContext)
+       */
+      setRenderFunction(renderFunc) {
+        this.renderFunc = renderFunc;
+      }
+      /**
+       * Initialize the toast container
+       */
+      initialize() {
+        if (this.container) return;
+        if (!this.renderFunc) {
+          console.warn("Toast render function not set. Please call registerGlobalContext first.");
+          return;
+        }
+        this.container = document.createElement("div");
+        this.container.id = "officesdk-toast-container";
+        document.body.appendChild(this.container);
+        this.render();
+      }
+      /**
+       * Render toasts to DOM
+       */
+      render() {
+        if (!this.container || !this.renderFunc) return;
+        const element = /* @__PURE__ */ React3.createElement(React3.Fragment, null, this.toasts.map((toast2) => {
+          return /* @__PURE__ */ React3.createElement(ToastWrapper, { key: toast2.id, $placement: toast2.placement || "top-center" }, /* @__PURE__ */ React3.createElement(Toast, { ...toast2, onClose: () => this.hide(toast2.id) }));
+        }));
+        this.renderFunc(element, this.container);
+      }
+      /**
+       * Configure toast container
+       */
+      configure(config) {
+        this.config = { ...this.config, ...config };
+        this.render();
+      }
+      /**
+       * Show a toast
+       */
+      show(props) {
+        this.initialize();
+        const id = `toast-${Date.now()}-${Math.random()}`;
+        const newToast = {
+          ...props,
+          id,
+          duration: props.duration ?? this.config.defaultDuration
+        };
+        this.toasts = [...this.toasts, newToast].slice(-(this.config.maxCount || 5));
+        this.render();
+        return id;
+      }
+      /**
+       * Hide a toast by id
+       */
+      hide(id) {
+        this.toasts = this.toasts.filter((toast2) => toast2.id !== id);
+        this.render();
+      }
+      /**
+       * Hide all toasts
+       */
+      hideAll() {
+        this.toasts = [];
+        this.render();
+      }
+      /**
+       * Show success toast
+       */
+      success(message, options) {
+        return this.show({ ...options, variant: "success", message });
+      }
+      /**
+       * Show info toast
+       */
+      info(message, options) {
+        return this.show({ ...options, variant: "info", message });
+      }
+      /**
+       * Show error toast
+       */
+      error(message, options) {
+        return this.show({ ...options, variant: "error", message });
+      }
+      /**
+       * Show warning toast
+       */
+      warn(message, options) {
+        return this.show({ ...options, variant: "warn", message });
+      }
+      /**
+       * Destroy the toast container
+       */
+      destroy() {
+        if (this.container) {
+          if (this.renderFunc) {
+            this.renderFunc(/* @__PURE__ */ React3.createElement(React3.Fragment, null), this.container);
+          }
+          if (this.container.parentNode) {
+            this.container.parentNode.removeChild(this.container);
+          }
+          this.container = null;
+        }
+        this.toasts = [];
+      }
+      /**
+       * Get current toasts
+       */
+      getToasts() {
+        return this.toasts;
+      }
+      /**
+       * Clear all toasts (for testing)
+       */
+      clear() {
+        this.toasts = [];
+        this.render();
+      }
+    };
+    toastManager = new ToastManager();
+    toast = {
+      configure: (config) => toastManager.configure(config),
+      show: (props) => toastManager.show(props),
+      hide: (id) => toastManager.hide(id),
+      hideAll: () => toastManager.hideAll(),
+      success: (message, options) => toastManager.success(message, options),
+      info: (message, options) => toastManager.info(message, options),
+      error: (message, options) => toastManager.error(message, options),
+      warn: (message, options) => toastManager.warn(message, options),
+      destroy: () => toastManager.destroy()
     };
   }
 });
-var styled = styledWithBase;
 
-// src/Button/Button.tsx
-var IconWrapper = styled.span`
+// src/utils/context.ts
+var context_exports = {};
+__export(context_exports, {
+  getGlobalRenderFunction: () => getGlobalRenderFunction,
+  getGlobalTheme: () => getGlobalTheme,
+  registerGlobalContext: () => registerGlobalContext
+});
+var globalTheme, registerGlobalTheme, getGlobalTheme, globalRenderFunction, getGlobalRenderFunction, registerGlobalContext;
+var init_context = __esm({
+  "src/utils/context.ts"() {
+    globalTheme = {};
+    registerGlobalTheme = (theme3) => {
+      Object.assign(globalTheme, { ...globalTheme, ...theme3 });
+    };
+    getGlobalTheme = () => {
+      return globalTheme;
+    };
+    globalRenderFunction = null;
+    getGlobalRenderFunction = () => globalRenderFunction;
+    registerGlobalContext = (context) => {
+      if (context.theme) {
+        registerGlobalTheme(context.theme);
+      }
+      if (context.render) {
+        globalRenderFunction = context.render;
+        if (typeof window !== "undefined") {
+          setTimeout(() => {
+            Promise.resolve().then(() => (init_toastManager(), toastManager_exports)).then(({ toastManager: toastManager2 }) => {
+              toastManager2.setRenderFunction(context.render);
+            }).catch(() => {
+            });
+          }, 0);
+        }
+      }
+    };
+  }
+});
+var wrapWithTheme, styledFunction, styledWithBase, styled;
+var init_styled = __esm({
+  "src/utils/styled.ts"() {
+    init_context();
+    wrapWithTheme = (component) => {
+      if (component && typeof component === "object") {
+        component.defaultProps = {
+          ...component.defaultProps,
+          get theme() {
+            return getGlobalTheme();
+          }
+        };
+      }
+      return component;
+    };
+    styledFunction = (tag) => {
+      return wrapWithTheme(baseStyled(tag));
+    };
+    styledWithBase = Object.assign(styledFunction, baseStyled);
+    Object.keys(baseStyled).forEach((key) => {
+      const originalMethod = baseStyled[key];
+      if (typeof originalMethod === "function") {
+        styledWithBase[key] = (...args) => {
+          const component = originalMethod(...args);
+          return wrapWithTheme(component);
+        };
+      }
+    });
+    styled = styledWithBase;
+  }
+});
+var IconWrapper2, TextWrapper, IconOnlyWrapper, StyledButton, Button;
+var init_Button = __esm({
+  "src/Button/Button.tsx"() {
+    init_styled();
+    init_Icon2();
+    IconWrapper2 = styled.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ $size, $position, theme: theme2 }) => {
-  const sizeConfig = theme2.components.button[$size || "medium"];
-  const marginSide = $position === "before" ? "margin-right" : "margin-left";
-  return `
+  ${({ $size, $iconPlacement, theme: theme3 }) => {
+      const buttonConfig = theme3.components.button[$size || "medium"];
+      const sizeConfig = buttonConfig?.withIcon || buttonConfig;
+      const marginSide = $iconPlacement === "before" ? "margin-right" : "margin-left";
+      return `
       width: ${sizeConfig.iconSize.width};
       height: ${sizeConfig.iconSize.height};
       ${marginSide}: ${sizeConfig.iconGap};
@@ -67,9 +600,39 @@ var IconWrapper = styled.span`
         display: block;
       }
     `;
-}}
+    }}
+`;
+    TextWrapper = styled.span`
+  ${({ $size, theme: theme3 }) => {
+      const buttonConfig = theme3.components.button[$size || "medium"];
+      const sizeConfig = buttonConfig?.withIcon || buttonConfig;
+      return `
+      padding: ${sizeConfig.textPadding || "0"};
+    `;
+    }}
+`;
+    IconOnlyWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ $size, theme: theme3 }) => {
+      const buttonConfig = theme3.components.button[$size || "medium"];
+      const sizeConfig = buttonConfig?.onlyIcon || buttonConfig;
+      return `
+      width: ${sizeConfig.iconSize?.width || "14px"};
+      height: ${sizeConfig.iconSize?.height || "14px"};
+
+      svg, img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    `;
+    }}
 `;
-var StyledButton = styled.button`
+    StyledButton = styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -79,31 +642,32 @@ var StyledButton = styled.button`
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 
   /* Size variants */
-  ${({ $size, $isIconOnly, theme: theme2 }) => {
-  const sizeConfig = theme2.components.button[$size || "medium"];
-  if ($isIconOnly) {
-    return `
-        padding: 0;
-        width: ${sizeConfig.height};
-        height: ${sizeConfig.height};
-        border-radius: ${sizeConfig.borderRadius};
+  ${({ $size, $variant, theme: theme3 }) => {
+      const sizeName = $size || "medium";
+      const buttonConfig = theme3.components.button[sizeName];
+      if ($variant === "icon") {
+        const sizeConfig2 = buttonConfig?.onlyIcon || buttonConfig;
+        return `
+        padding: ${sizeConfig2.padding || "7px"};
+        border-radius: ${sizeConfig2.borderRadius || theme3.borderRadius.small};
       `;
-  }
-  return `
+      }
+      const sizeConfig = buttonConfig?.withIcon || buttonConfig;
+      return `
       padding: ${sizeConfig.padding};
       font-size: ${sizeConfig.fontSize};
       line-height: ${sizeConfig.lineHeight};
       border-radius: ${sizeConfig.borderRadius};
       min-height: ${sizeConfig.height};
     `;
-}}
+    }}
 
   /* Variant and color type styles */
-  ${({ $variant, $colorType, $isIconOnly, $iconBordered, theme: theme2 }) => {
-  if ($variant === "icon" || $isIconOnly) {
-    const baseVariant = $iconBordered ? "outlined" : "text";
-    const styles2 = theme2.components.button[baseVariant]["default"];
-    return `
+  ${({ $variant, $colorType, $iconBordered, theme: theme3 }) => {
+      if ($variant === "icon") {
+        const baseVariant = $iconBordered ? "outlined" : "text";
+        const styles2 = theme3.components.button[baseVariant]["default"];
+        return `
         background: ${styles2.background};
         color: ${styles2.color};
         border: 1px solid ${styles2.borderColor};
@@ -131,17 +695,17 @@ var StyledButton = styled.button`
           cursor: not-allowed;
         }
       `;
-  }
-  const variant = $variant || "solid";
-  const colorType = $colorType || "default";
-  if (colorType === "status" && variant !== "text") {
-    console.warn(
-      `colorType 'status' is only available for 'text' variant. Falling back to 'default'.`
-    );
-  }
-  const effectiveColorType = colorType === "status" && variant !== "text" ? "default" : colorType;
-  const styles = theme2.components.button[variant][effectiveColorType];
-  return `
+      }
+      const variant = $variant || "solid";
+      const colorType = $colorType || "default";
+      if (colorType === "status" && variant !== "text") {
+        console.warn(
+          `colorType 'status' is only available for 'text' variant. Falling back to 'default'.`
+        );
+      }
+      const effectiveColorType = colorType === "status" && variant !== "text" ? "default" : colorType;
+      const styles = theme3.components.button[variant][effectiveColorType];
+      return `
       background: ${styles.background};
       color: ${styles.color};
       border: 1px solid ${styles.borderColor};
@@ -170,40 +734,46 @@ var StyledButton = styled.button`
         cursor: not-allowed;
       }
     `;
-}}
+    }}
 `;
-var Button = ({
-  variant = "solid",
-  colorType = "default",
-  size = "medium",
-  disabled = false,
-  loading = false,
-  fullWidth = false,
-  iconBefore,
-  iconAfter,
-  iconBordered = false,
-  children,
-  ...rest
-}) => {
-  const isIconOnly = variant === "icon" || !children && !!(iconBefore || iconAfter);
-  const iconOnlyContent = iconBefore || iconAfter;
-  return /* @__PURE__ */ React12.createElement(
-    StyledButton,
-    {
-      $variant: variant,
-      $colorType: colorType,
-      $size: size,
-      $fullWidth: fullWidth,
-      $isIconOnly: isIconOnly,
-      $iconBordered: iconBordered,
-      disabled: disabled || loading,
+    Button = ({
+      variant = "solid",
+      colorType = "default",
+      size = "medium",
+      disabled = false,
+      loading = false,
+      fullWidth = false,
+      icon,
+      iconPlacement = "before",
+      iconBordered = false,
+      children,
       ...rest
-    },
-    loading ? /* @__PURE__ */ React12.createElement(React12.Fragment, null, "Loading...") : isIconOnly ? iconOnlyContent : /* @__PURE__ */ React12.createElement(React12.Fragment, null, iconBefore && /* @__PURE__ */ React12.createElement(IconWrapper, { $size: size, $position: "before" }, iconBefore), children, iconAfter && /* @__PURE__ */ React12.createElement(IconWrapper, { $size: size, $position: "after" }, iconAfter))
-  );
-};
-Button.displayName = "Button";
-var SliderContainer = styled.div`
+    }) => {
+      return /* @__PURE__ */ React3.createElement(
+        StyledButton,
+        {
+          $variant: variant,
+          $colorType: colorType,
+          $size: size,
+          $fullWidth: fullWidth,
+          $iconBordered: iconBordered,
+          disabled: disabled || loading,
+          ...rest
+        },
+        loading ? /* @__PURE__ */ React3.createElement(TextWrapper, { $size: size }, "Loading...") : variant === "icon" ? (
+          // Icon variant: render icon with onlyIcon wrapper (uses onlyIcon config)
+          /* @__PURE__ */ React3.createElement(IconOnlyWrapper, { $size: size }, typeof icon === "string" ? /* @__PURE__ */ React3.createElement(Icon, { src: icon }) : icon || children)
+        ) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, icon && iconPlacement === "before" && /* @__PURE__ */ React3.createElement(IconWrapper2, { $size: size, $iconPlacement: "before" }, typeof icon === "string" ? /* @__PURE__ */ React3.createElement(Icon, { src: icon }) : icon), /* @__PURE__ */ React3.createElement(TextWrapper, { $size: size }, children), icon && iconPlacement === "after" && /* @__PURE__ */ React3.createElement(IconWrapper2, { $size: size, $iconPlacement: "after" }, typeof icon === "string" ? /* @__PURE__ */ React3.createElement(Icon, { src: icon }) : icon))
+      );
+    };
+    Button.displayName = "Button";
+  }
+});
+var SliderContainer, SliderTrack, SliderFill, SliderThumb, Slider;
+var init_Slider = __esm({
+  "src/Slider/Slider.tsx"() {
+    init_styled();
+    SliderContainer = styled.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -212,17 +782,17 @@ var SliderContainer = styled.div`
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   user-select: none;
 `;
-var SliderTrack = styled.div`
+    SliderTrack = styled.div`
   position: absolute;
   left: 0;
   right: 0;
   height: 2px;
-  background: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["20"]};
+  background: ${({ theme: theme3 }) => theme3.colors.palettes.transparency["20"]};
   border-radius: 1000px;
   top: 50%;
   transform: translateY(-50%);
 `;
-var SliderFill = styled.div`
+    SliderFill = styled.div`
   position: absolute;
   left: 0;
   height: 2px;
@@ -230,14 +800,14 @@ var SliderFill = styled.div`
   top: 50%;
   transform: translateY(-50%);
   width: ${({ $percentage }) => $percentage}%;
-  background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["10"] : theme2.colors.palettes.gray["100"]};
+  background: ${({ $disabled, theme: theme3 }) => $disabled ? theme3.colors.palettes.transparency["10"] : theme3.colors.palettes.gray["100"]};
 `;
-var SliderThumb = styled.div`
+    SliderThumb = styled.div`
   position: absolute;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["30"] : theme2.colors.palettes.blue["5"]};
+  background: ${({ $disabled, theme: theme3 }) => $disabled ? theme3.colors.palettes.transparency["30"] : theme3.colors.palettes.blue["5"]};
   left: ${({ $percentage }) => $percentage}%;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -256,131 +826,144 @@ var SliderThumb = styled.div`
     }
   `}
 `;
-var Slider = ({
-  value: controlledValue,
-  defaultValue = 0,
-  min = 0,
-  max = 100,
-  step = 1,
-  disabled = false,
-  onChange,
-  onDragStart,
-  onDragEnd,
-  className,
-  style
-}) => {
-  const [internalValue, setInternalValue] = useState(
-    controlledValue ?? defaultValue
-  );
-  const [isDragging, setIsDragging] = useState(false);
-  const containerRef = useRef(null);
-  const value = controlledValue !== void 0 ? controlledValue : internalValue;
-  const percentage = (value - min) / (max - min) * 100;
-  const updateValue = useCallback(
-    (clientX) => {
-      if (!containerRef.current || disabled) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const offsetX = clientX - rect.left;
-      const newPercentage = Math.max(0, Math.min(100, offsetX / rect.width * 100));
-      const rawValue = newPercentage / 100 * (max - min) + min;
-      const steppedValue = Math.round(rawValue / step) * step;
-      const clampedValue = Math.max(min, Math.min(max, steppedValue));
-      if (controlledValue === void 0) {
-        setInternalValue(clampedValue);
-      }
-      onChange?.(clampedValue);
-    },
-    [min, max, step, disabled, controlledValue, onChange]
-  );
-  const handleMouseDown = useCallback(
-    (e) => {
-      if (disabled) return;
-      e.preventDefault();
-      setIsDragging(true);
-      onDragStart?.();
-      updateValue(e.clientX);
-    },
-    [disabled, onDragStart, updateValue]
-  );
-  useEffect(() => {
-    if (!isDragging) return;
-    const handleMouseMove = (e) => {
-      updateValue(e.clientX);
-    };
-    const handleMouseUp = () => {
-      setIsDragging(false);
-      onDragEnd?.();
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, updateValue, onDragEnd]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (disabled) return;
-      let newValue = value;
-      switch (e.key) {
-        case "ArrowLeft":
-        case "ArrowDown":
-          e.preventDefault();
-          newValue = Math.max(min, value - step);
-          break;
-        case "ArrowRight":
-        case "ArrowUp":
-          e.preventDefault();
-          newValue = Math.min(max, value + step);
-          break;
-        case "Home":
-          e.preventDefault();
-          newValue = min;
-          break;
-        case "End":
-          e.preventDefault();
-          newValue = max;
-          break;
-        default:
-          return;
-      }
-      if (controlledValue === void 0) {
-        setInternalValue(newValue);
-      }
-      onChange?.(newValue);
-    },
-    [disabled, value, min, max, step, controlledValue, onChange]
-  );
-  return /* @__PURE__ */ React12.createElement(
-    SliderContainer,
-    {
-      ref: containerRef,
-      $disabled: disabled,
+    Slider = ({
+      value: controlledValue,
+      defaultValue = 0,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      onChange,
+      onDragStart,
+      onDragEnd,
       className,
-      style,
-      onMouseDown: handleMouseDown,
-      onKeyDown: handleKeyDown,
-      tabIndex: disabled ? -1 : 0,
-      role: "slider",
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-valuenow": value,
-      "aria-disabled": disabled
-    },
-    /* @__PURE__ */ React12.createElement(SliderTrack, { $disabled: disabled }),
-    /* @__PURE__ */ React12.createElement(SliderFill, { $percentage: percentage, $disabled: disabled }),
-    /* @__PURE__ */ React12.createElement(
-      SliderThumb,
-      {
-        $percentage: percentage,
-        $disabled: disabled,
-        $isDragging: isDragging
-      }
-    )
-  );
-};
-Slider.displayName = "Slider";
-var NumberInputContainer = styled.div`
+      style
+    }) => {
+      const [internalValue, setInternalValue] = useState(
+        controlledValue ?? defaultValue
+      );
+      const [isDragging, setIsDragging] = useState(false);
+      const containerRef = useRef(null);
+      const value = controlledValue !== void 0 ? controlledValue : internalValue;
+      const percentage = (value - min) / (max - min) * 100;
+      const updateValue = useCallback(
+        (clientX) => {
+          if (!containerRef.current || disabled) return;
+          const rect = containerRef.current.getBoundingClientRect();
+          const offsetX = clientX - rect.left;
+          const newPercentage = Math.max(0, Math.min(100, offsetX / rect.width * 100));
+          const rawValue = newPercentage / 100 * (max - min) + min;
+          const steppedValue = Math.round(rawValue / step) * step;
+          const clampedValue = Math.max(min, Math.min(max, steppedValue));
+          if (controlledValue === void 0) {
+            setInternalValue(clampedValue);
+          }
+          onChange?.(clampedValue);
+        },
+        [min, max, step, disabled, controlledValue, onChange]
+      );
+      const handleMouseDown = useCallback(
+        (e) => {
+          if (disabled) return;
+          e.preventDefault();
+          setIsDragging(true);
+          onDragStart?.();
+          updateValue(e.clientX);
+        },
+        [disabled, onDragStart, updateValue]
+      );
+      useEffect(() => {
+        if (!isDragging) return;
+        const handleMouseMove = (e) => {
+          updateValue(e.clientX);
+        };
+        const handleMouseUp = () => {
+          setIsDragging(false);
+          onDragEnd?.();
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+          document.removeEventListener("mousemove", handleMouseMove);
+          document.removeEventListener("mouseup", handleMouseUp);
+        };
+      }, [isDragging, updateValue, onDragEnd]);
+      const handleKeyDown = useCallback(
+        (e) => {
+          if (disabled) return;
+          let newValue = value;
+          switch (e.key) {
+            case "ArrowLeft":
+            case "ArrowDown":
+              e.preventDefault();
+              newValue = Math.max(min, value - step);
+              break;
+            case "ArrowRight":
+            case "ArrowUp":
+              e.preventDefault();
+              newValue = Math.min(max, value + step);
+              break;
+            case "Home":
+              e.preventDefault();
+              newValue = min;
+              break;
+            case "End":
+              e.preventDefault();
+              newValue = max;
+              break;
+            default:
+              return;
+          }
+          if (controlledValue === void 0) {
+            setInternalValue(newValue);
+          }
+          onChange?.(newValue);
+        },
+        [disabled, value, min, max, step, controlledValue, onChange]
+      );
+      return /* @__PURE__ */ React3.createElement(
+        SliderContainer,
+        {
+          ref: containerRef,
+          $disabled: disabled,
+          className,
+          style,
+          onMouseDown: handleMouseDown,
+          onKeyDown: handleKeyDown,
+          tabIndex: disabled ? -1 : 0,
+          role: "slider",
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          "aria-disabled": disabled
+        },
+        /* @__PURE__ */ React3.createElement(SliderTrack, { $disabled: disabled }),
+        /* @__PURE__ */ React3.createElement(SliderFill, { $percentage: percentage, $disabled: disabled }),
+        /* @__PURE__ */ React3.createElement(
+          SliderThumb,
+          {
+            $percentage: percentage,
+            $disabled: disabled,
+            $isDragging: isDragging
+          }
+        )
+      );
+    };
+    Slider.displayName = "Slider";
+  }
+});
+
+// src/Slider/index.ts
+var init_Slider2 = __esm({
+  "src/Slider/index.ts"() {
+    init_Slider();
+  }
+});
+var NumberInputContainer, InputWrapper, UnitText, StyledInput, ButtonGroup, StepButton, UpArrow, DownArrow, NumberInput;
+var init_NumberInput = __esm({
+  "src/NumberInput/NumberInput.tsx"() {
+    init_styled();
+    NumberInputContainer = styled.div`
   display: inline-flex;
   align-items: center;
   background: white;
@@ -396,35 +979,35 @@ var NumberInputContainer = styled.div`
     width: 80px;
   `}
 
-  ${({ $disabled, $alert, $isFocused, theme: theme2 }) => {
-  if ($disabled) {
-    return `
-        border-color: ${theme2.colors.palettes.transparency["10"]};
+  ${({ $disabled, $alert, $isFocused, theme: theme3 }) => {
+      if ($disabled) {
+        return `
+        border-color: ${theme3.colors.palettes.transparency["10"]};
         cursor: not-allowed;
       `;
-  }
-  if ($alert) {
-    return `
-        border-color: ${theme2.colors.palettes.red["6"]};
+      }
+      if ($alert) {
+        return `
+        border-color: ${theme3.colors.palettes.red["6"]};
       `;
-  }
-  if ($isFocused) {
-    return `
-        border-color: ${theme2.colors.palettes.transparency["30"]};
+      }
+      if ($isFocused) {
+        return `
+        border-color: ${theme3.colors.palettes.transparency["30"]};
         box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
       `;
-  }
-  return `
-      border-color: ${theme2.colors.palettes.transparency["10"]};
+      }
+      return `
+      border-color: ${theme3.colors.palettes.transparency["10"]};
 
       &:hover {
-        border-color: ${theme2.colors.palettes.transparency["20"]};
+        border-color: ${theme3.colors.palettes.transparency["20"]};
         box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
       }
     `;
-}}
+    }}
 `;
-var InputWrapper = styled.div`
+    InputWrapper = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
@@ -432,7 +1015,7 @@ var InputWrapper = styled.div`
   min-width: 0;
   gap: 4px;
 `;
-var UnitText = styled.span`
+    UnitText = styled.span`
   flex-shrink: 0;
   font-family: 'PingFang SC', sans-serif;
   font-weight: 400;
@@ -444,13 +1027,13 @@ var UnitText = styled.span`
     font-size: 13px;
   `}
 
-  ${({ $disabled, theme: theme2 }) => $disabled ? `
-    color: ${theme2.colors.palettes.transparency["30"]};
+  ${({ $disabled, theme: theme3 }) => $disabled ? `
+    color: ${theme3.colors.palettes.transparency["30"]};
   ` : `
-    color: ${theme2.colors.palettes.gray["120"]};
+    color: ${theme3.colors.palettes.gray["120"]};
   `}
 `;
-var StyledInput = styled.input`
+    StyledInput = styled.input`
   width: 100%;
   border: none;
   outline: none;
@@ -467,15 +1050,15 @@ var StyledInput = styled.input`
     font-size: 13px;
   `}
 
-  ${({ $disabled, theme: theme2 }) => $disabled ? `
-    color: ${theme2.colors.palettes.transparency["30"]};
+  ${({ $disabled, theme: theme3 }) => $disabled ? `
+    color: ${theme3.colors.palettes.transparency["30"]};
     cursor: not-allowed;
   ` : `
-    color: ${theme2.colors.palettes.gray["120"]};
+    color: ${theme3.colors.palettes.gray["120"]};
   `}
 
   &::placeholder {
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["30"]};
+    color: ${({ theme: theme3 }) => theme3.colors.palettes.transparency["30"]};
   }
 
   /* Remove number input arrows */
@@ -490,24 +1073,24 @@ var StyledInput = styled.input`
     -moz-appearance: textfield;
   }
 `;
-var ButtonGroup = styled.div`
+    ButtonGroup = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
   border-left: 1px solid;
   flex-shrink: 0;
 
-  ${({ $disabled, $alert, theme: theme2 }) => {
-  if ($disabled) {
-    return `border-color: ${theme2.colors.palettes.transparency["10"]};`;
-  }
-  if ($alert) {
-    return `border-color: ${theme2.colors.palettes.red["6"]};`;
-  }
-  return `border-color: ${theme2.colors.palettes.transparency["10"]};`;
-}}
+  ${({ $disabled, $alert, theme: theme3 }) => {
+      if ($disabled) {
+        return `border-color: ${theme3.colors.palettes.transparency["10"]};`;
+      }
+      if ($alert) {
+        return `border-color: ${theme3.colors.palettes.red["6"]};`;
+      }
+      return `border-color: ${theme3.colors.palettes.transparency["10"]};`;
+    }}
 `;
-var StepButton = styled.button`
+    StepButton = styled.button`
   flex: 1 1 50%;
   display: flex;
   align-items: center;
@@ -520,206 +1103,219 @@ var StepButton = styled.button`
   min-height: 0;
   overflow: hidden;
 
-  ${({ $position, $alert, $disabled, theme: theme2 }) => {
-  if ($position === "up") {
-    return `
-        border-bottom: 1px solid ${$disabled ? theme2.colors.palettes.transparency["10"] : $alert ? theme2.colors.palettes.red["6"] : theme2.colors.palettes.transparency["10"]};
+  ${({ $position, $alert, $disabled, theme: theme3 }) => {
+      if ($position === "up") {
+        return `
+        border-bottom: 1px solid ${$disabled ? theme3.colors.palettes.transparency["10"] : $alert ? theme3.colors.palettes.red["6"] : theme3.colors.palettes.transparency["10"]};
       `;
-  }
-  return "";
-}}
+      }
+      return "";
+    }}
 
-  ${({ $disabled, theme: theme2 }) => {
-  if ($disabled) {
-    return `
+  ${({ $disabled, theme: theme3 }) => {
+      if ($disabled) {
+        return `
         cursor: not-allowed;
         opacity: 0.4;
       `;
-  }
-  return `
+      }
+      return `
       &:hover {
-        background-color: ${theme2.colors.palettes.transparency["5"]};
+        background-color: ${theme3.colors.palettes.transparency["5"]};
       }
 
       &:active {
-        background-color: ${theme2.colors.palettes.transparency["10"]};
+        background-color: ${theme3.colors.palettes.transparency["10"]};
       }
     `;
-}}
+    }}
 
   svg {
     width: 14px;
     height: 14px;
-    fill: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["30"] : theme2.colors.palettes.gray["120"]};
+    fill: ${({ $disabled, theme: theme3 }) => $disabled ? theme3.colors.palettes.transparency["30"] : theme3.colors.palettes.gray["120"]};
   }
 `;
-var UpArrow = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
-var DownArrow = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M7 9.5L3.5 5.5H10.5L7 9.5Z", fill: "currentColor" }));
-var NumberInput = ({
-  value: controlledValue,
-  defaultValue = 0,
-  min = -Infinity,
-  max = Infinity,
-  step = 1,
-  size = "large",
-  disabled = false,
-  alert = false,
-  precision,
-  formatter,
-  parser,
-  unit,
-  onChange,
-  className,
-  style
-}) => {
-  const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
-  const [displayValue, setDisplayValue] = useState("");
-  const [isFocused, setIsFocused] = useState(false);
-  const inputRef = useRef(null);
-  const value = controlledValue !== void 0 ? controlledValue : internalValue;
-  const formatValue = useCallback(
-    (val) => {
-      if (formatter) {
-        return formatter(val);
-      }
-      if (precision !== void 0) {
-        return val.toFixed(precision);
-      }
-      return String(val);
-    },
-    [formatter, precision]
-  );
-  const parseValue = useCallback(
-    (displayVal) => {
-      if (parser) {
-        return parser(displayVal);
-      }
-      const parsed = parseFloat(displayVal);
-      return isNaN(parsed) ? null : parsed;
-    },
-    [parser]
-  );
-  useEffect(() => {
-    if (!isFocused) {
-      setDisplayValue(formatValue(value));
-    }
-  }, [value, isFocused, formatValue]);
-  const clampValue = useCallback(
-    (val) => {
-      return Math.max(min, Math.min(max, val));
-    },
-    [min, max]
-  );
-  const handleValueChange = useCallback(
-    (newValue) => {
-      const clampedValue = clampValue(newValue);
-      if (controlledValue === void 0) {
-        setInternalValue(clampedValue);
-      }
-      onChange?.(clampedValue);
-    },
-    [clampValue, controlledValue, onChange]
-  );
-  const increment = useCallback(() => {
-    if (disabled) return;
-    handleValueChange(value + step);
-  }, [disabled, value, step, handleValueChange]);
-  const decrement = useCallback(() => {
-    if (disabled) return;
-    handleValueChange(value - 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);
-    } else {
-      setDisplayValue(formatValue(value));
-    }
-  }, [displayValue, parseValue, handleValueChange, value, formatValue]);
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-    setDisplayValue(String(value));
-  }, [value]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        increment();
-      } else if (e.key === "ArrowDown") {
-        e.preventDefault();
-        decrement();
-      } else if (e.key === "Enter") {
-        inputRef.current?.blur();
-      }
-    },
-    [increment, decrement]
-  );
-  return /* @__PURE__ */ React12.createElement(
-    NumberInputContainer,
-    {
-      $size: size,
-      $disabled: disabled,
-      $alert: alert,
-      $isFocused: isFocused,
+    UpArrow = () => /* @__PURE__ */ React3.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
+    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,
+      min = -Infinity,
+      max = Infinity,
+      step = 1,
+      size = "large",
+      disabled = false,
+      alert = false,
+      precision,
+      formatter,
+      parser,
+      unit,
+      onChange,
       className,
       style
-    },
-    /* @__PURE__ */ React12.createElement(InputWrapper, null, /* @__PURE__ */ React12.createElement(
-      StyledInput,
-      {
-        ref: inputRef,
-        type: "text",
-        value: displayValue,
-        onChange: handleInputChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onKeyDown: handleKeyDown,
-        disabled,
-        $size: size,
-        $disabled: disabled
-      }
-    ), unit && /* @__PURE__ */ React12.createElement(UnitText, { $size: size, $disabled: disabled }, unit)),
-    /* @__PURE__ */ React12.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React12.createElement(
-      StepButton,
-      {
-        type: "button",
-        $position: "up",
-        $alert: alert,
-        $disabled: disabled,
-        onClick: increment,
-        disabled,
-        tabIndex: -1
-      },
-      /* @__PURE__ */ React12.createElement(UpArrow, null)
-    ), /* @__PURE__ */ React12.createElement(
-      StepButton,
-      {
-        type: "button",
-        $position: "down",
-        $alert: alert,
-        $disabled: disabled,
-        onClick: decrement,
-        disabled,
-        tabIndex: -1
-      },
-      /* @__PURE__ */ React12.createElement(DownArrow, null)
-    ))
-  );
-};
-NumberInput.displayName = "NumberInput";
+    }) => {
+      const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
+      const [displayValue, setDisplayValue] = useState("");
+      const [isFocused, setIsFocused] = useState(false);
+      const inputRef = useRef(null);
+      const value = controlledValue !== void 0 ? controlledValue : internalValue;
+      const formatValue = useCallback(
+        (val) => {
+          if (formatter) {
+            return formatter(val);
+          }
+          if (precision !== void 0) {
+            return val.toFixed(precision);
+          }
+          return String(val);
+        },
+        [formatter, precision]
+      );
+      const parseValue = useCallback(
+        (displayVal) => {
+          if (parser) {
+            return parser(displayVal);
+          }
+          const parsed = parseFloat(displayVal);
+          return isNaN(parsed) ? null : parsed;
+        },
+        [parser]
+      );
+      useEffect(() => {
+        if (!isFocused) {
+          setDisplayValue(formatValue(value));
+        }
+      }, [value, isFocused, formatValue]);
+      const clampValue = useCallback(
+        (val) => {
+          return Math.max(min, Math.min(max, val));
+        },
+        [min, max]
+      );
+      const handleValueChange = useCallback(
+        (newValue) => {
+          const clampedValue = clampValue(newValue);
+          if (controlledValue === void 0) {
+            setInternalValue(clampedValue);
+          }
+          onChange?.(clampedValue);
+        },
+        [clampValue, controlledValue, onChange]
+      );
+      const increment = useCallback(() => {
+        if (disabled) return;
+        handleValueChange(value + step);
+      }, [disabled, value, step, handleValueChange]);
+      const decrement = useCallback(() => {
+        if (disabled) return;
+        handleValueChange(value - 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);
+        } else {
+          setDisplayValue(formatValue(value));
+        }
+      }, [displayValue, parseValue, handleValueChange, value, formatValue]);
+      const handleFocus = useCallback(() => {
+        setIsFocused(true);
+        setDisplayValue(String(value));
+      }, [value]);
+      const handleKeyDown = useCallback(
+        (e) => {
+          if (e.key === "ArrowUp") {
+            e.preventDefault();
+            increment();
+          } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            decrement();
+          } else if (e.key === "Enter") {
+            inputRef.current?.blur();
+          }
+        },
+        [increment, decrement]
+      );
+      return /* @__PURE__ */ React3.createElement(
+        NumberInputContainer,
+        {
+          $size: size,
+          $disabled: disabled,
+          $alert: alert,
+          $isFocused: isFocused,
+          className,
+          style
+        },
+        /* @__PURE__ */ React3.createElement(InputWrapper, null, /* @__PURE__ */ React3.createElement(
+          StyledInput,
+          {
+            ref: inputRef,
+            type: "text",
+            value: displayValue,
+            onChange: handleInputChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            disabled,
+            $size: size,
+            $disabled: disabled
+          }
+        ), unit && /* @__PURE__ */ React3.createElement(UnitText, { $size: size, $disabled: disabled }, unit)),
+        /* @__PURE__ */ React3.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React3.createElement(
+          StepButton,
+          {
+            type: "button",
+            $position: "up",
+            $alert: alert,
+            $disabled: disabled,
+            onClick: increment,
+            disabled,
+            tabIndex: -1
+          },
+          /* @__PURE__ */ React3.createElement(UpArrow, null)
+        ), /* @__PURE__ */ React3.createElement(
+          StepButton,
+          {
+            type: "button",
+            $position: "down",
+            $alert: alert,
+            $disabled: disabled,
+            onClick: decrement,
+            disabled,
+            tabIndex: -1
+          },
+          /* @__PURE__ */ React3.createElement(DownArrow, null)
+        ))
+      );
+    };
+    NumberInput.displayName = "NumberInput";
+  }
+});
 
-// src/Button/SpinButton.tsx
-var SpinButtonWrapper = styled.div`
+// src/NumberInput/index.ts
+var init_NumberInput2 = __esm({
+  "src/NumberInput/index.ts"() {
+    init_NumberInput();
+  }
+});
+var SpinButtonWrapper, SliderWrapper, SpinButton;
+var init_SpinButton = __esm({
+  "src/Button/SpinButton.tsx"() {
+    init_styled();
+    init_Slider2();
+    init_NumberInput2();
+    SpinButtonWrapper = styled.div`
   display: inline-flex;
   align-items: center;
   gap: ${({ $showSlider }) => $showSlider ? "0" : "0"};
   width: ${({ $showSlider }) => $showSlider ? "100%" : "auto"};
 `;
-var SliderWrapper = styled.div`
+    SliderWrapper = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
@@ -727,70 +1323,86 @@ var SliderWrapper = styled.div`
   padding-right: ${({ $size }) => $size === "small" ? "83px" : "72px"};
   min-width: 0;
 `;
-var SpinButton = ({
-  value: controlledValue,
-  defaultValue = 0,
-  min = -Infinity,
-  max = Infinity,
-  step = 1,
-  size = "large",
-  disabled = false,
-  alert = false,
-  showSlider = false,
-  precision,
-  formatter,
-  parser,
-  onChange,
-  className,
-  style
-}) => {
-  const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
-  const value = controlledValue !== void 0 ? controlledValue : internalValue;
-  const handleValueChange = useCallback(
-    (newValue) => {
-      if (newValue === null) return;
-      if (controlledValue === void 0) {
-        setInternalValue(newValue);
-      }
-      onChange?.(newValue);
-    },
-    [controlledValue, onChange]
-  );
-  return /* @__PURE__ */ React12.createElement(SpinButtonWrapper, { $showSlider: showSlider, className, style }, showSlider && /* @__PURE__ */ React12.createElement(SliderWrapper, { $size: size }, /* @__PURE__ */ React12.createElement(
-    Slider,
-    {
-      value,
-      min,
-      max,
-      step,
-      disabled,
-      onChange: handleValueChange
-    }
-  )), /* @__PURE__ */ React12.createElement(
-    NumberInput,
-    {
-      value,
-      min,
-      max,
-      step,
-      size,
-      disabled,
-      alert,
+    SpinButton = ({
+      value: controlledValue,
+      defaultValue = 0,
+      min = -Infinity,
+      max = Infinity,
+      step = 1,
+      size = "large",
+      disabled = false,
+      alert = false,
+      showSlider = false,
       precision,
       formatter,
       parser,
-      onChange: handleValueChange
-    }
-  ));
-};
-SpinButton.displayName = "SpinButton";
+      onChange,
+      className,
+      style
+    }) => {
+      const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
+      const value = controlledValue !== void 0 ? controlledValue : internalValue;
+      const handleValueChange = useCallback(
+        (newValue) => {
+          if (newValue === null) return;
+          if (controlledValue === void 0) {
+            setInternalValue(newValue);
+          }
+          onChange?.(newValue);
+        },
+        [controlledValue, onChange]
+      );
+      return /* @__PURE__ */ React3.createElement(SpinButtonWrapper, { $showSlider: showSlider, className, style }, showSlider && /* @__PURE__ */ React3.createElement(SliderWrapper, { $size: size }, /* @__PURE__ */ React3.createElement(
+        Slider,
+        {
+          value,
+          min,
+          max,
+          step,
+          disabled,
+          onChange: handleValueChange
+        }
+      )), /* @__PURE__ */ React3.createElement(
+        NumberInput,
+        {
+          value,
+          min,
+          max,
+          step,
+          size,
+          disabled,
+          alert,
+          precision,
+          formatter,
+          parser,
+          onChange: handleValueChange
+        }
+      ));
+    };
+    SpinButton.displayName = "SpinButton";
+  }
+});
+
+// src/Button/index.ts
+var init_Button2 = __esm({
+  "src/Button/index.ts"() {
+    init_Button();
+    init_SpinButton();
+  }
+});
+
+// src/index.ts
+init_Button2();
+
+// src/Switch/Switch.tsx
+init_styled();
 var SwitchContainer = styled.label`
   position: relative;
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
 
-  ${({ $size, theme: theme2 }) => {
-  const sizeConfig = theme2.components.switch[$size];
+  ${({ $size, theme: theme3 }) => {
+  const sizeConfig = theme3.components.switch[$size];
   return `
       width: ${sizeConfig.container.width};
       height: ${sizeConfig.container.height};
@@ -810,10 +1422,10 @@ var Track = styled.div`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  transition: ${({ theme: theme2 }) => theme2.components.switch.transition || "all 0.2s ease"};
+  transition: ${({ theme: theme3 }) => theme3.components.switch.transition || "all 0.2s ease"};
 
-  ${({ $size, theme: theme2 }) => {
-  const sizeConfig = theme2.components.switch[$size];
+  ${({ $size, theme: theme3 }) => {
+  const sizeConfig = theme3.components.switch[$size];
   return `
       border-radius: ${sizeConfig.track.borderRadius};
       width: ${sizeConfig.track.width};
@@ -821,8 +1433,8 @@ var Track = styled.div`
     `;
 }}
 
-  ${({ $checked, $disabled, theme: theme2 }) => {
-  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
+  ${({ $checked, $disabled, theme: theme3 }) => {
+  const stateConfig = $checked ? theme3.components.switch.on : theme3.components.switch.off;
   if ($disabled) {
     return `
         background: ${stateConfig.track.backgroundDisabled};
@@ -835,9 +1447,9 @@ var Track = styled.div`
     `;
 }}
 
-  ${({ $disabled, $checked, theme: theme2 }) => {
+  ${({ $disabled, $checked, theme: theme3 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
+  const stateConfig = $checked ? theme3.components.switch.on : theme3.components.switch.off;
   return `
       :hover {
         background: ${stateConfig.track.backgroundHover};
@@ -852,10 +1464,10 @@ var Thumb = styled.div`
   transform: translateY(-50%);
   border-style: solid;
   box-sizing: border-box;
-  transition: ${({ theme: theme2 }) => theme2.components.switch.transition || "all 0.2s ease"};
+  transition: ${({ theme: theme3 }) => theme3.components.switch.transition || "all 0.2s ease"};
 
-  ${({ $size, $checked, theme: theme2 }) => {
-  const sizeConfig = theme2.components.switch[$size];
+  ${({ $size, $checked, theme: theme3 }) => {
+  const sizeConfig = theme3.components.switch[$size];
   const thumbSize = sizeConfig.thumb.size;
   const thumbOffset = sizeConfig.thumb.offset;
   const thumbBorderRadius = sizeConfig.thumb.borderRadius;
@@ -869,8 +1481,8 @@ var Thumb = styled.div`
     `;
 }}
 
-  ${({ $checked, $disabled, theme: theme2 }) => {
-  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
+  ${({ $checked, $disabled, theme: theme3 }) => {
+  const stateConfig = $checked ? theme3.components.switch.on : theme3.components.switch.off;
   if ($disabled) {
     return `
         background: ${stateConfig.thumb.backgroundDisabled};
@@ -885,9 +1497,9 @@ var Thumb = styled.div`
     `;
 }}
 
-  ${({ $disabled, $checked, theme: theme2 }) => {
+  ${({ $disabled, $checked, theme: theme3 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
+  const stateConfig = $checked ? theme3.components.switch.on : theme3.components.switch.off;
   return `
       :hover & {
         background: ${stateConfig.thumb.backgroundHover};
@@ -928,7 +1540,7 @@ var Switch = ({
   const handleBlur = useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(
     SwitchContainer,
     {
       $size: size,
@@ -937,7 +1549,7 @@ var Switch = ({
       className,
       style
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       HiddenInput,
       {
         type: "checkbox",
@@ -948,7 +1560,7 @@ var Switch = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       Track,
       {
         $size: size,
@@ -957,7 +1569,7 @@ var Switch = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       Thumb,
       {
         $size: size,
@@ -969,13 +1581,16 @@ var Switch = ({
   );
 };
 Switch.displayName = "Switch";
+
+// src/Radio/Radio.tsx
+init_styled();
 var RadioContainer = styled.label`
   position: relative;
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
 
-  ${({ theme: theme2 }) => {
-  const sizeConfig = theme2.components.radio.small;
+  ${({ theme: theme3 }) => {
+  const sizeConfig = theme3.components.radio.small;
   return `
       width: ${sizeConfig.size};
       height: ${sizeConfig.size};
@@ -996,31 +1611,31 @@ var RadioOuter = styled.div`
   border: 1px solid;
   transition: all 0.2s ease;
 
-  ${({ $checked, $disabled, theme: theme2 }) => {
+  ${({ $checked, $disabled, theme: theme3 }) => {
   if ($disabled) {
-    const stateConfig = $checked ? theme2.components.radio.checked : theme2.components.radio.unchecked;
+    const stateConfig = $checked ? theme3.components.radio.checked : theme3.components.radio.unchecked;
     return `
         background: ${stateConfig.backgroundDisabled};
         border-color: ${stateConfig.borderColorDisabled};
       `;
   }
   if ($checked) {
-    const checkedConfig = theme2.components.radio.checked;
+    const checkedConfig = theme3.components.radio.checked;
     return `
         background: ${checkedConfig.background};
         border-color: ${checkedConfig.borderColor};
       `;
   }
-  const uncheckedConfig = theme2.components.radio.unchecked;
+  const uncheckedConfig = theme3.components.radio.unchecked;
   return `
       background: ${uncheckedConfig.background};
       border-color: ${uncheckedConfig.borderColor};
     `;
 }}
 
-  ${({ $disabled, $checked, theme: theme2 }) => {
+  ${({ $disabled, $checked, theme: theme3 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked ? theme2.components.radio.checked : theme2.components.radio.unchecked;
+  const stateConfig = $checked ? theme3.components.radio.checked : theme3.components.radio.unchecked;
   return `
       ${RadioContainer}:hover & {
         background: ${stateConfig.backgroundHover};
@@ -1043,8 +1658,8 @@ var RadioInner = styled.div`
   opacity: ${({ $checked }) => $checked ? 1 : 0};
   transition: opacity 0.2s ease;
 
-  ${({ theme: theme2 }) => {
-  const dotSize = theme2.components.radio.small.dotSize;
+  ${({ theme: theme3 }) => {
+  const dotSize = theme3.components.radio.small.dotSize;
   return `
       width: ${dotSize};
       height: ${dotSize};
@@ -1084,14 +1699,14 @@ var Radio = ({
   const handleBlur = useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(
     RadioContainer,
     {
       $disabled: disabled,
       className,
       style
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       HiddenInput2,
       {
         type: "radio",
@@ -1105,7 +1720,7 @@ var Radio = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       RadioOuter,
       {
         $checked: checked,
@@ -1113,7 +1728,7 @@ var Radio = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       RadioInner,
       {
         $checked: checked,
@@ -1123,13 +1738,16 @@ var Radio = ({
   );
 };
 Radio.displayName = "Radio";
+
+// src/Checkbox/Checkbox.tsx
+init_styled();
 var CheckboxContainer = styled.label`
   position: relative;
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
 
-  ${({ theme: theme2 }) => {
-  const sizeConfig = theme2.components.checkbox.small;
+  ${({ theme: theme3 }) => {
+  const sizeConfig = theme3.components.checkbox.small;
   return `
       width: ${sizeConfig.size};
       height: ${sizeConfig.size};
@@ -1149,45 +1767,45 @@ var CheckboxBox = styled.div`
   border: 1px solid;
   transition: all 0.2s ease;
 
-  ${({ theme: theme2 }) => {
-  const sizeConfig = theme2.components.checkbox.small;
+  ${({ theme: theme3 }) => {
+  const sizeConfig = theme3.components.checkbox.small;
   return `
       border-radius: ${sizeConfig.borderRadius};
     `;
 }}
 
-  ${({ $checked, $indeterminate, $disabled, theme: theme2 }) => {
+  ${({ $checked, $indeterminate, $disabled, theme: theme3 }) => {
   if ($disabled) {
-    const stateConfig = $checked || $indeterminate ? theme2.components.checkbox.checked : theme2.components.checkbox.unchecked;
+    const stateConfig = $checked || $indeterminate ? theme3.components.checkbox.checked : theme3.components.checkbox.unchecked;
     return `
         background: ${stateConfig.backgroundDisabled};
         border-color: ${stateConfig.borderColorDisabled};
       `;
   }
   if ($checked) {
-    const checkedConfig = theme2.components.checkbox.checked;
+    const checkedConfig = theme3.components.checkbox.checked;
     return `
         background: ${checkedConfig.background};
         border-color: ${checkedConfig.borderColor};
       `;
   }
   if ($indeterminate) {
-    const indeterminateConfig = theme2.components.checkbox.indeterminate;
+    const indeterminateConfig = theme3.components.checkbox.indeterminate;
     return `
         background: ${indeterminateConfig.background};
         border-color: ${indeterminateConfig.borderColor};
       `;
   }
-  const uncheckedConfig = theme2.components.checkbox.unchecked;
+  const uncheckedConfig = theme3.components.checkbox.unchecked;
   return `
       background: ${uncheckedConfig.background};
       border-color: ${uncheckedConfig.borderColor};
     `;
 }}
 
-  ${({ $disabled, $checked, $indeterminate, theme: theme2 }) => {
+  ${({ $disabled, $checked, $indeterminate, theme: theme3 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked || $indeterminate ? theme2.components.checkbox.checked : theme2.components.checkbox.unchecked;
+  const stateConfig = $checked || $indeterminate ? theme3.components.checkbox.checked : theme3.components.checkbox.unchecked;
   return `
       ${CheckboxContainer}:hover & {
         background: ${stateConfig.backgroundHover};
@@ -1200,7 +1818,7 @@ var CheckboxBox = styled.div`
     `;
 }}
 `;
-var IconWrapper2 = styled.div`
+var IconWrapper3 = styled.div`
   position: absolute;
   left: 50%;
   top: 50%;
@@ -1212,8 +1830,8 @@ var IconWrapper2 = styled.div`
   align-items: center;
   justify-content: center;
 
-  ${({ theme: theme2 }) => {
-  const iconSize = theme2.components.checkbox.small.iconSize;
+  ${({ theme: theme3 }) => {
+  const iconSize = theme3.components.checkbox.small.iconSize;
   return `
       width: ${iconSize.width};
       height: ${iconSize.height};
@@ -1269,14 +1887,14 @@ var Checkbox = ({
   const handleBlur = useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(
     CheckboxContainer,
     {
       $disabled: disabled,
       className,
       style
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       HiddenInput3,
       {
         ref: inputRef,
@@ -1291,7 +1909,7 @@ var Checkbox = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       CheckboxBox,
       {
         $checked: checked,
@@ -1300,33 +1918,62 @@ var Checkbox = ({
         $isFocused: isFocused
       }
     ),
-    !indeterminate && /* @__PURE__ */ React12.createElement(IconWrapper2, { $visible: checked }, /* @__PURE__ */ React12.createElement("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "#fff" }, /* @__PURE__ */ React12.createElement("path", { d: "M1.05426 3.16164L0 4.27945L3.50904 8L10 1.11781L8.94573 0L3.50904 5.76438L1.05426 3.16164Z" }))),
-    indeterminate && /* @__PURE__ */ React12.createElement(IconWrapper2, { $visible: indeterminate }, /* @__PURE__ */ React12.createElement(DefaultIndeterminateIcon, null))
+    !indeterminate && /* @__PURE__ */ React3.createElement(IconWrapper3, { $visible: checked }, /* @__PURE__ */ React3.createElement("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "#fff" }, /* @__PURE__ */ React3.createElement("path", { d: "M1.05426 3.16164L0 4.27945L3.50904 8L10 1.11781L8.94573 0L3.50904 5.76438L1.05426 3.16164Z" }))),
+    indeterminate && /* @__PURE__ */ React3.createElement(IconWrapper3, { $visible: indeterminate }, /* @__PURE__ */ React3.createElement(DefaultIndeterminateIcon, null))
   );
 };
 Checkbox.displayName = "Checkbox";
+
+// src/index.ts
+init_Slider2();
+
+// src/Input/Input.tsx
+init_styled();
+var InputContainer = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  ${({ $size, $lineType, theme: theme3 }) => {
+  const size = $size || "medium";
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  if (!sizeConfig) return "";
+  return `
+      height: ${sizeConfig.height};
+    `;
+}}
+`;
 var InputWrapper2 = styled.div`
   display: inline-flex;
   align-items: center;
   width: 100%;
   box-sizing: border-box;
   position: relative;
+  flex: 1;
   transition: all 0.2s ease;
 
-  ${({ $size, theme: theme2 }) => {
+  ${({ $size, $lineType, theme: theme3 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme2.components.input.outlined[size];
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  if (!sizeConfig) return "";
   return `
       height: ${sizeConfig.height};
-      border-radius: ${sizeConfig.borderRadius};
       padding: ${sizeConfig.padding};
-      font-size: ${sizeConfig.fontSize};
-      line-height: ${sizeConfig.lineHeight};
+      gap: ${sizeConfig.gap || "4px"};
+      ${$lineType === "outlined" ? `
+        border-radius: ${sizeConfig.borderRadius};
+      ` : ""}
     `;
 }}
 
-  ${({ $error, $disabled, $readOnly, $isFocused, theme: theme2, $size }) => {
-  const stateConfig = theme2.components.input.outlined.state;
+  ${({ $error, $disabled, $readOnly, $isFocused, $lineType, theme: theme3, $size }) => {
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const stateConfig = typeConfig?.state;
+  if (!stateConfig) return "";
   let borderColor = stateConfig.borderColor;
   let background = stateConfig.background;
   let boxShadow = "none";
@@ -1334,36 +1981,69 @@ var InputWrapper2 = styled.div`
     borderColor = stateConfig.borderColorDisabled;
     background = stateConfig.backgroundDisabled;
   } else if ($readOnly) {
-    borderColor = stateConfig.borderColorReadonly;
-    background = stateConfig.backgroundReadonly;
+    borderColor = stateConfig.borderColorReadonly || stateConfig.borderColor;
+    background = stateConfig.backgroundReadonly || stateConfig.background;
   } else if ($error) {
     borderColor = stateConfig.borderColorError;
-    background = stateConfig.backgroundActive;
+    background = $lineType === "outlined" ? stateConfig.backgroundActive : stateConfig.background;
   } else if ($isFocused) {
     borderColor = stateConfig.borderColorActive;
     background = stateConfig.backgroundActive;
-    const size = $size || "medium";
-    boxShadow = theme2.components.input.outlined[size].boxShadowActive;
+    if ($lineType === "outlined") {
+      const size = $size || "medium";
+      const sizeConfig = typeConfig?.[size];
+      boxShadow = sizeConfig?.boxShadowActive || "none";
+    }
   }
-  return `
-      border: 1px solid ${borderColor};
-      background: ${background};
-      box-shadow: ${boxShadow};
+  if ($lineType === "outlined") {
+    return `
+        border: 1px solid ${borderColor};
+        background: ${background};
+        box-shadow: ${boxShadow};
 
-      &:hover:not(:disabled) {
-        ${!$disabled && !$readOnly && !$isFocused ? `
-          border-color: ${stateConfig.borderColorHover};
-          background: ${stateConfig.backgroundHover};
-        ` : ""}
-      }
-    `;
+        &:hover:not(:disabled) {
+          ${!$disabled && !$readOnly && !$isFocused ? `
+            border-color: ${stateConfig.borderColorHover};
+            background: ${stateConfig.backgroundHover};
+          ` : ""}
+        }
+      `;
+  } else {
+    return `
+        background: ${background};
+        border-bottom: 1px solid ${$error ? borderColor : $isFocused ? borderColor : "transparent"};
+
+        &:hover:not(:disabled) {
+          ${!$disabled && !$isFocused && !$error ? `
+            border-bottom-color: ${stateConfig.borderColorHover};
+          ` : ""}
+        }
+      `;
+  }
 }}
 
   ${({ $disabled }) => $disabled && `
     cursor: not-allowed;
-    opacity: 1;
+    opacity: ${$disabled ? "0.6" : "1"};
   `}
 `;
+var ContentBlock = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+
+  ${({ $size, $lineType, theme: theme3 }) => {
+  const size = $size || "medium";
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  if (!sizeConfig) return "";
+  return `
+      padding: ${sizeConfig.contentPadding || "0"};
+      gap: ${sizeConfig.gap || "4px"};
+    `;
+}}
+`;
 var StyledInput2 = styled.input`
   flex: 1;
   border: none;
@@ -1373,24 +2053,31 @@ var StyledInput2 = styled.input`
   padding: 0;
   margin: 0;
   font-family: inherit;
-  color: ${({ theme: theme2 }) => theme2.components.input.outlined.state.borderColorActive};
 
-  ${({ $size, theme: theme2 }) => {
+  ${({ $size, $lineType, $disabled, theme: theme3 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme2.components.input.outlined[size];
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  const stateConfig = typeConfig?.state;
+  if (!sizeConfig || !stateConfig) return "";
+  const textColor = $disabled ? stateConfig.textColorDisabled : stateConfig.textColorNormal;
   return `
       font-size: ${sizeConfig.fontSize};
       line-height: ${sizeConfig.lineHeight};
+      color: ${textColor};
     `;
 }}
 
   &::placeholder {
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["30"]};
+    color: ${({ $isFocused, $lineType, theme: theme3 }) => {
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const stateConfig = typeConfig?.state;
+  return $isFocused ? stateConfig?.placeholderColorHover || "rgba(65, 70, 75, 0.3)" : stateConfig?.placeholderColorNormal || "rgba(65, 70, 75, 0.3)";
+}};
   }
 
-  ${({ $disabled, theme: theme2 }) => $disabled && `
+  ${({ $disabled }) => $disabled && `
     cursor: not-allowed;
-    color: ${theme2.colors.palettes.transparency["30"]};
   `}
 
   ${({ $readOnly }) => $readOnly && `
@@ -1401,11 +2088,12 @@ var PrefixNode = styled.div`
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
-  margin-right: 4px;
 
-  ${({ $size, theme: theme2 }) => {
+  ${({ $size, $lineType, theme: theme3 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme2.components.input.outlined[size];
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  if (!sizeConfig) return "";
   return `
       svg, img {
         width: ${sizeConfig.iconSize.width};
@@ -1418,11 +2106,12 @@ var SuffixNode = styled.div`
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
-  margin-left: 4px;
 
-  ${({ $size, theme: theme2 }) => {
+  ${({ $size, $lineType, theme: theme3 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme2.components.input.outlined[size];
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  if (!sizeConfig) return "";
   return `
       svg, img {
         width: ${sizeConfig.iconSize.width};
@@ -1431,21 +2120,87 @@ var SuffixNode = styled.div`
     `;
 }}
 `;
+var ClearButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  transition: opacity 0.2s ease;
+
+  ${({ $size, $lineType, theme: theme3 }) => {
+  const size = $size || "medium";
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  const clearIconSize = sizeConfig?.clearIcon?.size;
+  if (!clearIconSize) return "";
+  return `
+      width: ${clearIconSize.width};
+      height: ${clearIconSize.height};
+
+      svg {
+        width: ${clearIconSize.width};
+        height: ${clearIconSize.height};
+      }
+    `;
+}}
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+`;
+var AlertLine = styled.div`
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: ${({ theme: theme3 }) => theme3.colors?.palettes?.red?.["6"] || "#E95555"};
+`;
+var DefaultClearIcon = () => /* @__PURE__ */ React3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3.createElement(
+  "path",
+  {
+    d: "M8.00148 8.56042L11.3306 11.8884L11.8961 11.3226L8.56774 7.99531L11.8641 4.70566L11.299 4.1394L8.00196 7.42971L4.70055 4.12939L4.13495 4.69517L7.4357 7.99483L4.10889 11.3149L4.674 11.8812L8.00148 8.56042Z",
+    fill: "#41464B",
+    fillOpacity: "0.6"
+  }
+));
 var Input = forwardRef(
   ({
+    lineType = "outlined",
     size = "medium",
     error = false,
     disabled = false,
     readOnly = false,
     prefixNode,
     suffixNode,
+    clearable = false,
+    onClear,
+    clearIcon,
     className,
     style,
     onFocus,
     onBlur,
+    value,
+    onChange,
     ...rest
   }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(
+      value !== void 0 ? value : rest.defaultValue || ""
+    );
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const hasValue = !!currentValue && String(currentValue).length > 0;
     const handleFocus = (e) => {
       setIsFocused(true);
       onFocus?.(e);
@@ -1454,435 +2209,151 @@ var Input = forwardRef(
       setIsFocused(false);
       onBlur?.(e);
     };
-    return /* @__PURE__ */ React12.createElement(
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    };
+    const handleClear = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      if (onChange && ref && "current" in ref && ref.current) {
+        const syntheticEvent = {
+          target: { ...ref.current, value: "" },
+          currentTarget: ref.current
+        };
+        onChange(syntheticEvent);
+      }
+      onClear?.();
+    };
+    const shouldShowClearButton = clearable && hasValue && !disabled && !readOnly;
+    const clearButtonNode = shouldShowClearButton ? /* @__PURE__ */ React3.createElement(
+      ClearButton,
+      {
+        type: "button",
+        $size: size,
+        $lineType: lineType,
+        onClick: handleClear,
+        "aria-label": "Clear",
+        tabIndex: -1
+      },
+      clearIcon || /* @__PURE__ */ React3.createElement(DefaultClearIcon, null)
+    ) : null;
+    return /* @__PURE__ */ React3.createElement(InputContainer, { $size: size, $lineType: lineType, className, style }, /* @__PURE__ */ React3.createElement(
       InputWrapper2,
       {
         $size: size,
+        $lineType: lineType,
         $error: error,
         $disabled: !!disabled,
         $readOnly: !!readOnly,
-        $isFocused: isFocused,
-        className,
-        style
+        $isFocused: isFocused
       },
-      prefixNode && /* @__PURE__ */ React12.createElement(PrefixNode, { $size: size }, prefixNode),
-      /* @__PURE__ */ React12.createElement(
+      prefixNode && /* @__PURE__ */ React3.createElement(PrefixNode, { $size: size, $lineType: lineType }, prefixNode),
+      /* @__PURE__ */ React3.createElement(ContentBlock, { $size: size, $lineType: lineType }, /* @__PURE__ */ React3.createElement(
         StyledInput2,
         {
           ref,
           $size: size,
+          $lineType: lineType,
           $disabled: !!disabled,
           $readOnly: !!readOnly,
+          $isFocused: isFocused,
           disabled,
           readOnly,
+          value: currentValue,
+          onChange: handleChange,
           onFocus: handleFocus,
           onBlur: handleBlur,
           ...rest
         }
-      ),
-      suffixNode && /* @__PURE__ */ React12.createElement(SuffixNode, { $size: size }, suffixNode)
-    );
+      ), clearButtonNode),
+      suffixNode && /* @__PURE__ */ React3.createElement(SuffixNode, { $size: size, $lineType: lineType }, suffixNode)
+    ), lineType === "underlined" && error && /* @__PURE__ */ React3.createElement(AlertLine, null));
   }
 );
 Input.displayName = "Input";
+
+// src/Input/SearchInput.tsx
+init_styled();
+init_Icon2();
+init_context();
 var SearchIconWrapper = styled.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ $size, theme: theme2 }) => {
-  const sizeConfig = theme2.components.input.outlined[$size === "extraLarge" ? "extraLarge" : "large"];
-  return `
-      width: ${sizeConfig.iconSize.width};
-      height: ${sizeConfig.iconSize.height};
-    `;
-}}
-
   svg {
     width: 100%;
     height: 100%;
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["100"]};
+    color: ${({ theme: theme3 }) => theme3.colors?.palettes?.transparency?.["100"] || "#41464b"};
   }
 `;
-var ClearButton = styled.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  outline: none;
-  transition: opacity 0.2s ease;
-
-  ${({ $size, theme: theme2 }) => {
-  const sizeConfig = theme2.components.input.outlined[$size === "extraLarge" ? "extraLarge" : "large"];
-  return `
-      width: ${sizeConfig.iconSize.width};
-      height: ${sizeConfig.iconSize.height};
-    `;
-}}
-
-  svg {
-    width: 100%;
-    height: 100%;
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["100"]};
-  }
-
-  &:hover {
-    opacity: 0.7;
-  }
-
-  &:active {
-    opacity: 0.5;
-  }
-`;
-var DefaultSearchIcon = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement(
-  "path",
-  {
-    d: "M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-), /* @__PURE__ */ React12.createElement(
-  "path",
-  {
-    d: "M14 14L11.1 11.1",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-));
-var DefaultCloseIcon = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement(
-  "path",
-  {
-    d: "M12 4L4 12",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-), /* @__PURE__ */ React12.createElement(
-  "path",
-  {
-    d: "M4 4L12 12",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-));
+var DefaultSearchIcon = () => /* @__PURE__ */ React3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.92359 14.0468C9.40656 14.0468 10.7664 13.5197 11.826 12.6426L13.0034 13.8199C12.8604 14.2604 12.9638 14.7635 13.3138 15.1134L14.4012 16.2008C14.8981 16.6977 15.7036 16.6977 16.2004 16.2008C16.6973 15.704 16.6973 14.8985 16.2004 14.4017L15.113 13.3143C14.7549 12.9562 14.2364 12.8562 13.7887 13.0143L12.6234 11.849C13.5122 10.7862 14.0471 9.41727 14.0471 7.92343C14.0471 4.54158 11.3055 1.80005 7.92359 1.80005C4.54165 1.80005 1.80005 4.54158 1.80005 7.92343C1.80005 11.3053 4.54165 14.0468 7.92359 14.0468ZM7.92359 12.6968C10.56 12.6968 12.6971 10.5597 12.6971 7.92343C12.6971 5.2872 10.56 3.15005 7.92359 3.15005C5.2872 3.15005 3.15005 5.2872 3.15005 7.92343C3.15005 10.5597 5.2872 12.6968 7.92359 12.6968Z", fill: "#41464B" }));
 var SearchInput = forwardRef(
   ({
-    size = "extraLarge",
+    lineType = "outlined",
+    size = "medium",
     clearable = true,
     onClear,
     searchIcon,
-    value,
-    defaultValue,
-    onChange,
-    disabled,
-    readOnly,
     ...rest
   }, ref) => {
-    const [internalValue, setInternalValue] = useState(defaultValue || "");
-    const isControlled = value !== void 0;
-    const currentValue = isControlled ? value : internalValue;
-    const handleChange = (e) => {
-      if (!isControlled) {
-        setInternalValue(e.target.value);
+    const getSearchIconElement = () => {
+      if (searchIcon !== void 0) {
+        if (typeof searchIcon === "string") {
+          return /* @__PURE__ */ React3.createElement(Icon, { src: searchIcon });
+        }
+        return searchIcon;
       }
-      onChange?.(e);
-    };
-    const handleClear = () => {
-      if (!isControlled) {
-        setInternalValue("");
+      const theme3 = getGlobalTheme();
+      const themeIconUrl = theme3?.components?.inputSearch?.searchIcon?.url;
+      if (themeIconUrl) {
+        return /* @__PURE__ */ React3.createElement(Icon, { src: themeIconUrl });
       }
-      onClear?.();
+      return /* @__PURE__ */ React3.createElement(DefaultSearchIcon, null);
     };
-    const prefixNode = /* @__PURE__ */ React12.createElement(SearchIconWrapper, { $size: size }, searchIcon || /* @__PURE__ */ React12.createElement(DefaultSearchIcon, null));
-    const suffixNode = clearable && currentValue && !disabled && !readOnly ? /* @__PURE__ */ React12.createElement(
-      ClearButton,
-      {
-        $size: size,
-        onClick: handleClear,
-        type: "button",
-        tabIndex: -1
-      },
-      /* @__PURE__ */ React12.createElement(DefaultCloseIcon, null)
-    ) : null;
-    return /* @__PURE__ */ React12.createElement(
+    const prefixNode = /* @__PURE__ */ React3.createElement(SearchIconWrapper, null, getSearchIconElement());
+    return /* @__PURE__ */ React3.createElement(
       Input,
       {
         ref,
+        lineType,
         size,
         prefixNode,
-        suffixNode,
-        value: isControlled ? value : internalValue,
-        onChange: handleChange,
-        disabled,
-        readOnly,
+        clearable,
+        onClear,
         ...rest
       }
     );
   }
 );
 SearchInput.displayName = "SearchInput";
-var IconContext = createContext(null);
-var IconProvider = ({
-  icons,
-  children
-}) => {
-  return /* @__PURE__ */ React12.createElement(IconContext.Provider, { value: icons }, children);
-};
-var useIconRegistry = () => {
-  return useContext(IconContext);
-};
-IconProvider.displayName = "IconProvider";
-
-// src/Icon/Icon.tsx
-var IconContainer = styled.span`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: ${({ $size }) => typeof $size === "number" ? `${$size}px` : $size};
-  height: ${({ $size }) => typeof $size === "number" ? `${$size}px` : $size};
-  color: ${({ $color }) => $color};
-  flex-shrink: 0;
-  line-height: 1;
-
-  svg {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-`;
-var Icon = ({
-  name,
-  src,
-  children,
-  size = 16,
-  color = "currentColor",
-  alt = "icon",
-  className,
-  style,
-  onClick
-}) => {
-  const registry = useIconRegistry();
-  let iconElement = children;
-  if (!iconElement && src) {
-    iconElement = /* @__PURE__ */ React12.createElement(
-      "img",
-      {
-        src,
-        alt,
-        style: { width: "100%", height: "100%", display: "block" }
-      }
-    );
-  }
-  if (!iconElement && name && registry) {
-    const IconComponent = registry[name];
-    if (IconComponent) {
-      iconElement = /* @__PURE__ */ React12.createElement(IconComponent, null);
-    } else if (process.env.NODE_ENV !== "production") {
-      console.warn(`Icon "${name}" not found in registry. Make sure IconProvider is set up.`);
-    }
-  }
-  if (!iconElement) {
-    if (process.env.NODE_ENV !== "production" && !children && !name && !src) {
-      console.warn('Icon: one of "name", "src", or "children" must be provided');
-    }
-    return null;
-  }
-  return /* @__PURE__ */ React12.createElement(
-    IconContainer,
-    {
-      $size: size,
-      $color: color,
-      className,
-      style,
-      onClick
-    },
-    iconElement
-  );
-};
-Icon.displayName = "Icon";
-var ToastContainer = styled.div`
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid;
-  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
-
-  ${({ theme: theme2 }) => {
-  const baseConfig = theme2.components.toast;
-  return `
-      padding: ${baseConfig.padding};
-      border-radius: ${baseConfig.borderRadius};
-      font-size: ${baseConfig.fontSize};
-      font-weight: ${baseConfig.fontWeight};
-    `;
-}}
-
-  ${({ $variant, theme: theme2 }) => {
-  const variantConfig = theme2.components.toast[$variant];
-  return `
-      background: ${variantConfig.background};
-      border-color: ${variantConfig.borderColor};
-    `;
-}}
-`;
-var IconWrapper3 = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  ${({ $variant, theme: theme2 }) => {
-  const iconConfig = theme2.components.toast[$variant].icon;
-  return `
-      width: ${iconConfig.size.width};
-      height: ${iconConfig.size.height};
-    `;
-}}
-`;
-var Message = styled.span`
-  flex: 1;
-  line-height: 20px;
-  color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["120"]};
-`;
-var ActionButton = styled.button`
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  outline: none;
-
-  ${({ $variant, theme: theme2 }) => {
-  const buttonConfig = theme2.components.toast[$variant].button;
-  return `
-      font-size: ${buttonConfig.fontSize};
-      font-weight: ${buttonConfig.fontWeight};
-      color: ${buttonConfig.color};
-      margin-left: ${buttonConfig.gap};
-    `;
-}}
-
-  &:hover {
-    opacity: 0.8;
+var UnderlinedInput = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React3.createElement(Input, { ...props, lineType: "underlined", ref });
   }
+);
+UnderlinedInput.displayName = "UnderlinedInput";
 
-  &:active {
-    opacity: 0.6;
-  }
-`;
-var CloseButton = styled.button`
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["60"]};
-  flex-shrink: 0;
-  outline: none;
+// src/index.ts
+init_NumberInput2();
+init_Icon2();
 
-  &:hover {
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["100"]};
-  }
+// src/Toast/index.ts
+init_Toast();
 
-  &:active {
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["120"]};
-  }
-`;
-var SuccessIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React12.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
-var InfoIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#5ba0e7" }), /* @__PURE__ */ React12.createElement("path", { d: "M10 9V14M10 6H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var ErrorIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#e95555" }), /* @__PURE__ */ React12.createElement("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var WarnIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#ebe361" }), /* @__PURE__ */ React12.createElement("path", { d: "M10 6V11M10 14H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var CloseIconSvg = () => /* @__PURE__ */ React12.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M9 3L3 9M3 3L9 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }));
-var Toast = ({
-  variant = "info",
-  message,
-  actionText,
-  onAction,
-  closable = false,
-  onClose,
-  duration = 0,
-  icon,
-  showIcon = true,
-  className,
-  style
-}) => {
-  const [visible, setVisible] = useState(true);
-  useEffect(() => {
-    if (duration > 0) {
-      const timer = setTimeout(() => {
-        setVisible(false);
-        onClose?.();
-      }, duration);
-      return () => clearTimeout(timer);
-    }
-  }, [duration, onClose]);
-  const handleClose = () => {
-    setVisible(false);
-    onClose?.();
-  };
-  if (!visible) {
-    return null;
-  }
-  const defaultIcons = {
-    success: /* @__PURE__ */ React12.createElement(SuccessIcon, null),
-    info: /* @__PURE__ */ React12.createElement(InfoIcon, null),
-    error: /* @__PURE__ */ React12.createElement(ErrorIcon, null),
-    warn: /* @__PURE__ */ React12.createElement(WarnIcon, null)
-  };
-  const iconElement = icon || defaultIcons[variant];
-  return /* @__PURE__ */ React12.createElement(
-    ToastContainer,
-    {
-      $variant: variant,
-      className,
-      style,
-      role: "alert",
-      "aria-live": "polite"
-    },
-    showIcon && /* @__PURE__ */ React12.createElement(IconWrapper3, { $variant: variant }, iconElement),
-    /* @__PURE__ */ React12.createElement(Message, null, message),
-    actionText && onAction && /* @__PURE__ */ React12.createElement(
-      ActionButton,
-      {
-        $variant: variant,
-        onClick: onAction,
-        type: "button"
-      },
-      actionText
-    ),
-    closable && /* @__PURE__ */ React12.createElement(
-      CloseButton,
-      {
-        onClick: handleClose,
-        type: "button",
-        "aria-label": "Close"
-      },
-      /* @__PURE__ */ React12.createElement(CloseIconSvg, null)
-    )
-  );
-};
-Toast.displayName = "Toast";
+// src/Toast/ToastContainer.tsx
+init_styled();
+init_Toast();
 var ToastContext = createContext(null);
-var ToastWrapper = styled.div`
+var ToastWrapper2 = styled.div`
   position: fixed;
-  top: 24px;
-  right: 24px;
   z-index: 9999;
   display: flex;
   flex-direction: column;
@@ -1892,8 +2363,44 @@ var ToastWrapper = styled.div`
   > * {
     pointer-events: auto;
   }
+
+  ${({ $placement, theme: theme3 }) => {
+  const offset = theme3.components?.toast?.offset || { vertical: "24px", horizontal: "24px" };
+  const vertical = offset.vertical || "24px";
+  const horizontal = offset.horizontal || "24px";
+  const styles = {
+    "top-right": `
+        top: ${vertical};
+        right: ${horizontal};
+      `,
+    "top-left": `
+        top: ${vertical};
+        left: ${horizontal};
+      `,
+    "top-center": `
+        top: ${vertical};
+        left: 50%;
+        transform: translateX(-50%);
+      `,
+    "bottom-right": `
+        bottom: ${vertical};
+        right: ${horizontal};
+      `,
+    "bottom-left": `
+        bottom: ${vertical};
+        left: ${horizontal};
+      `,
+    "bottom-center": `
+        bottom: ${vertical};
+        left: 50%;
+        transform: translateX(-50%);
+      `
+  };
+  return styles[$placement] || styles["top-right"];
+}}
 `;
 var ToastContainer2 = ({
+  placement = "top-right",
   maxCount = 5,
   defaultDuration = 3e3,
   children
@@ -1913,7 +2420,7 @@ var ToastContainer2 = ({
     return id;
   }, [maxCount, defaultDuration]);
   const hideToast = useCallback((id) => {
-    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
   }, []);
   const success = useCallback((message, options) => {
     return showToast({ ...options, variant: "success", message });
@@ -1935,12 +2442,12 @@ var ToastContainer2 = ({
     error,
     warn
   };
-  return /* @__PURE__ */ React12.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React12.createElement(ToastWrapper, null, toasts.map((toast) => /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React3.createElement(ToastWrapper2, { $placement: placement }, toasts.map((toast2) => /* @__PURE__ */ React3.createElement(
     Toast,
     {
-      key: toast.id,
-      ...toast,
-      onClose: () => hideToast(toast.id)
+      key: toast2.id,
+      ...toast2,
+      onClose: () => hideToast(toast2.id)
     }
   ))));
 };
@@ -1952,6 +2459,12 @@ var useToast = () => {
   return context;
 };
 ToastContainer2.displayName = "ToastContainer";
+
+// src/Toast/index.ts
+init_toastManager();
+
+// src/Tabs/Tabs.tsx
+init_styled();
 var TabContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -1961,8 +2474,8 @@ var TabList = styled.div`
   align-items: center;
   position: relative;
 
-  ${({ $variant, theme: theme2 }) => {
-  const variantConfig = theme2.components.tab[$variant];
+  ${({ $variant, theme: theme3 }) => {
+  const variantConfig = theme3.components.tab[$variant];
   return `
       gap: ${variantConfig.layout.gap};
     `;
@@ -1989,8 +2502,8 @@ var TabItem = styled.button`
   position: relative;
   white-space: nowrap;
 
-  ${({ theme: theme2 }) => {
-  const sizeConfig = theme2.components.tab.large;
+  ${({ theme: theme3 }) => {
+  const sizeConfig = theme3.components.tab.large;
   return `
       height: ${sizeConfig.height};
       padding: ${sizeConfig.padding};
@@ -2001,8 +2514,8 @@ var TabItem = styled.button`
     `;
 }}
 
-  ${({ $variant, $active, $disabled, theme: theme2 }) => {
-  const variantConfig = theme2.components.tab[$variant];
+  ${({ $variant, $active, $disabled, theme: theme3 }) => {
+  const variantConfig = theme3.components.tab[$variant];
   const itemConfig = variantConfig.item;
   if ($disabled) {
     return `
@@ -2025,9 +2538,9 @@ var TabItem = styled.button`
     `;
 }}
 
-  ${({ $variant, $disabled, theme: theme2 }) => {
+  ${({ $variant, $disabled, theme: theme3 }) => {
   if ($disabled) return "";
-  const variantConfig = theme2.components.tab[$variant];
+  const variantConfig = theme3.components.tab[$variant];
   const itemConfig = variantConfig.item;
   return `
       &:hover {
@@ -2089,7 +2602,7 @@ var Tabs = ({
     },
     [controlledActiveKey, onChange]
   );
-  return /* @__PURE__ */ React12.createElement(TabContainer, { className, style }, /* @__PURE__ */ React12.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(TabContainer, { className, style }, /* @__PURE__ */ React3.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React3.createElement(
     TabItem,
     {
       key: item.key,
@@ -2103,7 +2616,7 @@ var Tabs = ({
       disabled: item.disabled,
       type: "button"
     },
-    item.icon && /* @__PURE__ */ React12.createElement("span", null, item.icon),
+    item.icon && /* @__PURE__ */ React3.createElement("span", null, item.icon),
     item.label
   ))));
 };
@@ -2120,7 +2633,7 @@ var Tooltip = ({
   getPopupContainer,
   ...rest
 }) => {
-  const overlayContent = React12.useMemo(() => /* @__PURE__ */ React12.createElement("div", null, content), [content]);
+  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(" ");
@@ -2133,9 +2646,12 @@ var Tooltip = ({
     ...getPopupContainer && { getPopupContainer },
     ...rest
   };
-  return /* @__PURE__ */ React12.createElement(RcTooltip, { ...tooltipProps, prefixCls: "od-tooltip" }, children);
+  return /* @__PURE__ */ React3.createElement(RcTooltip, { ...tooltipProps, prefixCls: "od-tooltip" }, children);
 };
 Tooltip.displayName = "Tooltip";
+
+// src/Tooltip/globalStyle.ts
+init_context();
 var theme = getGlobalTheme();
 var arrowSize = 5;
 var paddingDistance = `${arrowSize}px`;
@@ -2465,6 +2981,9 @@ var TooltipGlobalStyles = createGlobalStyle`
     border-bottom-color: ${() => theme.components.tooltip.white.large.background};
   }
 `;
+
+// src/ToolbarButton/ToolbarButton.tsx
+init_styled();
 var ToolbarButtonContainer = styled.div`
   display: inline-flex;
   align-items: center;
@@ -2473,8 +2992,8 @@ var ToolbarButtonContainer = styled.div`
   transition: border-color 0.15s ease;
   box-sizing: border-box;
 
-  ${({ $disabled, $active, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, $active, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         border-color: ${config.border.borderColorDisabled};
@@ -2518,16 +3037,16 @@ var MainButton = styled.button`
   outline: none;
   transition: background-color 0.15s ease;
 
-  ${({ $hasLabel, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $hasLabel, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       height: ${config.layout.height};
       padding: ${$hasLabel ? config.layout.content.padding : config.layout.padding};
     `;
 }}
 
-  ${({ $disabled, $active, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, $active, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         cursor: not-allowed;
@@ -2558,16 +3077,16 @@ var IconWrapper4 = styled.span`
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       width: ${config.layout.content.iconSize.width};
       height: ${config.layout.content.iconSize.height};
     `;
 }}
 
-  ${({ $disabled, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return $disabled ? `
     color: ${config.color.colorDisabled};
   ` : `
@@ -2585,8 +3104,8 @@ var LabelText = styled.span`
   font-family: 'PingFang SC', sans-serif;
   white-space: nowrap;
 
-  ${({ theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       font-size: ${config.typography.fontSize};
       font-weight: ${config.typography.fontWeight};
@@ -2595,8 +3114,8 @@ var LabelText = styled.span`
     `;
 }}
 
-  ${({ $disabled, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return $disabled ? `
     color: ${config.color.colorDisabled};
   ` : `
@@ -2613,16 +3132,16 @@ var DropdownButton = styled.button`
   border: none;
   transition: background-color 0.15s ease;
 
-  ${({ theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       height: ${config.layout.height};
       padding: 5px 0;
     `;
 }}
 
-  ${({ $disabled, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         cursor: not-allowed;
@@ -2648,16 +3167,16 @@ var DropdownArrow = styled.span`
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       width: ${config.layout.dropdown.iconSize.width};
       height: ${config.layout.dropdown.iconSize.height};
     `;
 }}
 
-  ${({ $disabled, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return $disabled ? `
     color: ${config.color.colorDisabled};
   ` : `
@@ -2672,15 +3191,15 @@ var Divider = styled.div`
   width: 1px;
   transition: background-color 0.15s ease;
 
-  ${({ theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       height: ${config.layout.height};
     `;
 }}
 
-  ${({ $disabled, $active, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, $active, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         background-color: ${config.border.borderColorDisabled};
@@ -2696,7 +3215,7 @@ var Divider = styled.div`
     `;
 }}
 `;
-var ArrowIcon = () => /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React12.createElement(
+var ArrowIcon = () => /* @__PURE__ */ React3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3.createElement(
   "path",
   {
     d: "M8.1858 9.79353C8.08649 9.90387 7.91346 9.90387 7.81415 9.79353L4.77549 6.41724C4.6307 6.25636 4.74487 6 4.96132 6L11.0386 6C11.2551 6 11.3693 6.25636 11.2245 6.41724L8.1858 9.79353Z",
@@ -2726,7 +3245,7 @@ var ToolbarButton = ({
     onDropdownClick?.(e);
   };
   if (!splitDropdown && hasDropdown) {
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React3.createElement(
       ToolbarButtonContainer,
       {
         className,
@@ -2734,7 +3253,7 @@ var ToolbarButton = ({
         $disabled: disabled,
         $active: active
       },
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React3.createElement(
         MainButton,
         {
           $disabled: disabled,
@@ -2743,14 +3262,14 @@ var ToolbarButton = ({
           onClick: handleMainClick,
           disabled
         },
-        icon && /* @__PURE__ */ React12.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React12.createElement(LabelText, { $disabled: disabled }, label),
-        /* @__PURE__ */ React12.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React12.createElement(ArrowIcon, null))
+        icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
+        label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label),
+        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ArrowIcon, null))
       )
     );
   }
   if (splitDropdown && hasDropdown) {
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React3.createElement(
       ToolbarButtonContainer,
       {
         className,
@@ -2758,7 +3277,7 @@ var ToolbarButton = ({
         $disabled: disabled,
         $active: active
       },
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React3.createElement(
         MainButton,
         {
           $disabled: disabled,
@@ -2767,11 +3286,11 @@ var ToolbarButton = ({
           onClick: handleMainClick,
           disabled
         },
-        icon && /* @__PURE__ */ React12.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React12.createElement(LabelText, { $disabled: disabled }, label)
+        icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
+        label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label)
       ),
-      /* @__PURE__ */ React12.createElement(Divider, { $disabled: disabled, $active: active }),
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React3.createElement(Divider, { $disabled: disabled, $active: active }),
+      /* @__PURE__ */ React3.createElement(
         DropdownButton,
         {
           $disabled: disabled,
@@ -2780,11 +3299,11 @@ var ToolbarButton = ({
           onClick: handleDropdownClick,
           disabled
         },
-        /* @__PURE__ */ React12.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React12.createElement(ArrowIcon, null))
+        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ArrowIcon, null))
       )
     );
   }
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(
     ToolbarButtonContainer,
     {
       className,
@@ -2792,7 +3311,7 @@ var ToolbarButton = ({
       $disabled: disabled,
       $active: active
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       MainButton,
       {
         $disabled: disabled,
@@ -2801,43 +3320,939 @@ var ToolbarButton = ({
         onClick: handleMainClick,
         disabled
       },
-      icon && /* @__PURE__ */ React12.createElement(IconWrapper4, { $disabled: disabled }, icon),
-      label && /* @__PURE__ */ React12.createElement(LabelText, { $disabled: disabled }, label)
+      icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
+      label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label)
     )
   );
 };
 ToolbarButton.displayName = "ToolbarButton";
-var UIConfigContext = createContext(null);
-var UIConfigProvider = ({ config, children }) => {
-  registerGlobalContext({ theme: config.theme });
-  const { icons = {}, toast = {} } = config;
-  const toastConfig = {
-    maxCount: toast.maxCount ?? 5,
-    defaultDuration: toast.defaultDuration ?? 3e3
-  };
-  const TooltipStyles = TooltipGlobalStyles;
-  return /* @__PURE__ */ React12.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React12.createElement(TooltipStyles, null), /* @__PURE__ */ React12.createElement(IconProvider, { icons }, /* @__PURE__ */ React12.createElement(
-    ToastContainer2,
-    {
-      maxCount: toastConfig.maxCount,
-      defaultDuration: toastConfig.defaultDuration
-    },
-    children
-  )));
-};
-var useUIConfig = () => {
-  const context = useContext(UIConfigContext);
-  if (!context) {
-    throw new Error("useUIConfig must be used within UIConfigProvider");
+
+// src/dropdown/DropdownButton.tsx
+init_styled();
+init_Icon2();
+var DropdownButtonContainer = styled.button`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  font-family: 'PingFang SC', sans-serif;
+
+  ${({ $size, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  const sizeConfig = config?.size?.[$size];
+  if (!sizeConfig) return "";
+  return `
+      height: ${sizeConfig.height};
+      padding: ${sizeConfig.padding};
+      gap: ${sizeConfig.gap};
+      font-size: ${sizeConfig.fontSize};
+    `;
+}}
+
+  ${({ $variant, $disabled, $error, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  if (!config) return "";
+  let background = config.background.normal;
+  if ($disabled) {
+    background = config.background.disabled;
   }
-  return context;
-};
-UIConfigProvider.displayName = "UIConfigProvider";
+  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}`;
+  }
+  const color = $disabled ? config.color.disabled : config.color.normal;
+  return `
+      background: ${background};
+      border: ${border};
+      border-radius: ${borderRadius};
+      color: ${color};
 
-// src/UIConfigProvider/createUIConfig.ts
-var createUIConfig = (config) => {
-  return {
-    // Theme is required
+      &:hover:not(:disabled) {
+        background: ${config.background.hover};
+        ${$variant === "framed" && !$error ? `
+          border-color: ${theme3.colors?.palettes?.transparency?.["20"]};
+        ` : ""}
+      }
+
+      &:active:not(:disabled) {
+        background: ${config.background.active};
+        ${$variant === "framed" && !$error ? `
+          border-color: ${theme3.colors?.palettes?.transparency?.["30"]};
+        ` : ""}
+      }
+    `;
+}}
+
+  ${({ $disabled }) => $disabled && `
+    cursor: not-allowed;
+  `}
+`;
+var IconWrapper5 = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ $size, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  const sizeConfig = config?.size?.[$size];
+  if (!sizeConfig) return "";
+  return `
+      width: ${sizeConfig.iconSize.width};
+      height: ${sizeConfig.iconSize.height};
+
+      svg, img {
+        width: ${sizeConfig.iconSize.width};
+        height: ${sizeConfig.iconSize.height};
+      }
+    `;
+}}
+
+  ${({ theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  return `
+      color: ${config?.color?.normal || "#41464b"};
+    `;
+}}
+`;
+var TextContent = styled.div`
+  flex: 1;
+  min-width: 0; /* Important: allows flex item to shrink below content size */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  line-height: 20px;
+
+  ${({ $hasValue, $disabled, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  const color = $disabled ? config?.color?.disabled : config?.color?.normal;
+  return `
+      color: ${color};
+      ${!$hasValue ? `opacity: 0.3;` : ""}
+    `;
+}}
+`;
+var IndicatorWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+
+  ${({ $size, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  const sizeConfig = config?.size?.[$size];
+  if (!sizeConfig) return "";
+  return `
+      width: ${sizeConfig.indicatorSize.width};
+      height: ${sizeConfig.indicatorSize.height};
+    `;
+}}
+
+  ${({ $open, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton?.indicator;
+  const rotate = config?.rotate || "90deg";
+  return `
+      transform: rotate(${$open ? rotate : 0});
+    `;
+}}
+
+  ${({ $disabled, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton?.indicator?.opacity;
+  const opacity = $disabled ? config?.disabled || "0.3" : config?.normal || "1";
+  return `
+      opacity: ${opacity};
+      color: ${theme3.components?.dropdownButton?.color?.normal || "#41464b"};
+    `;
+}}
+`;
+var DefaultArrowIcon = () => /* @__PURE__ */ React3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3.createElement(
+  "path",
+  {
+    d: "M11.5975 8.81186C11.7113 8.91146 11.7113 9.08854 11.5975 9.18814L7.72713 12.5747C7.56548 12.7161 7.3125 12.6013 7.3125 12.3866L7.3125 5.61344C7.3125 5.39865 7.56548 5.28386 7.72713 5.4253L11.5975 8.81186Z",
+    fill: "#41464B"
+  }
+));
+var DropdownButton2 = forwardRef(
+  ({
+    variant = "framed",
+    size,
+    value,
+    placeholder = "Select...",
+    icon,
+    indicatorIcon,
+    open = false,
+    disabled = false,
+    error = false,
+    className,
+    style,
+    textStyle,
+    onClick,
+    ...rest
+  }, ref) => {
+    const effectiveSize = size || (variant === "framed" ? "large" : "medium");
+    const hasValue = !!value;
+    const getIconElement = () => {
+      if (!icon) return null;
+      if (typeof icon === "string") {
+        return /* @__PURE__ */ React3.createElement(Icon, { src: icon });
+      }
+      return icon;
+    };
+    const iconElement = getIconElement();
+    return /* @__PURE__ */ React3.createElement(
+      DropdownButtonContainer,
+      {
+        ref,
+        type: "button",
+        $variant: variant,
+        $size: effectiveSize,
+        $disabled: disabled,
+        $open: open,
+        $error: error,
+        disabled,
+        onClick,
+        className,
+        style,
+        ...rest
+      },
+      iconElement && /* @__PURE__ */ React3.createElement(IconWrapper5, { $size: effectiveSize }, iconElement),
+      /* @__PURE__ */ React3.createElement(TextContent, { $disabled: disabled, $hasValue: hasValue, style: textStyle }, value || placeholder),
+      /* @__PURE__ */ React3.createElement(IndicatorWrapper, { $size: effectiveSize, $open: open, $disabled: disabled }, indicatorIcon || /* @__PURE__ */ React3.createElement(DefaultArrowIcon, null))
+    );
+  }
+);
+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)"};
+    `;
+}}
+
+  /* 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
+}) => {
+  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)"};
+      `;
+}}
+  }
+
+  .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_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
+  });
+  const toastConfig = {
+    maxCount: toast2.maxCount ?? 5,
+    defaultDuration: toast2.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(
+    ToastContainer2,
+    {
+      maxCount: toastConfig.maxCount,
+      defaultDuration: toastConfig.defaultDuration
+    },
+    children
+  )));
+};
+var useUIConfig = () => {
+  const context = useContext(UIConfigContext);
+  if (!context) {
+    throw new Error("useUIConfig must be used within UIConfigProvider");
+  }
+  return context;
+};
+UIConfigProvider.displayName = "UIConfigProvider";
+
+// src/UIConfigProvider/createUIConfig.ts
+var createUIConfig = (config) => {
+  return {
+    // Theme is required
     theme: config.theme,
     // Icons with default
     icons: config.icons ?? {},
@@ -2901,6 +4316,10 @@ var mergeUIConfig = (baseConfig, ...configs) => {
   return merged;
 };
 
-export { Button, Checkbox, Icon, IconProvider, Input, NumberInput, Radio, SearchInput, Slider, SpinButton, Switch, Tabs, Toast, ToastContainer2 as ToastContainer, ToolbarButton, Tooltip, UIConfigProvider, createUIConfig, getGlobalTheme, mergeUIConfig, styled, useIconRegistry, useToast, useUIConfig };
+// 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map