@officesdk/design 0.1.5 → 0.1.8

package/dist/components/cjs/index.js

@@ -1,70 +1,599 @@
 'use strict';
 
-var React12 = require('react');
+var React3 = require('react');
 var baseStyled = require('styled-components');
 var RcTooltip = require('rc-tooltip');
 require('rc-tooltip/assets/bootstrap.css');
+var ReactDOM = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React12__default = /*#__PURE__*/_interopDefault(React12);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 var baseStyled__default = /*#__PURE__*/_interopDefault(baseStyled);
 var RcTooltip__default = /*#__PURE__*/_interopDefault(RcTooltip);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
-// src/Button/Button.tsx
-
-// src/utils/context.ts
-var globalTheme = {};
-var registerGlobalTheme = (theme2) => {
-  Object.assign(globalTheme, { ...globalTheme, ...theme2 });
+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; exports.IconProvider = void 0; exports.useIconRegistry = void 0;
+var init_IconProvider = __esm({
+  "src/Icon/IconProvider.tsx"() {
+    IconContext = React3.createContext(null);
+    exports.IconProvider = ({
+      icons,
+      children
+    }) => {
+      return /* @__PURE__ */ React3__default.default.createElement(IconContext.Provider, { value: icons }, children);
+    };
+    exports.useIconRegistry = () => {
+      return React3.useContext(IconContext);
+    };
+    exports.IconProvider.displayName = "IconProvider";
   }
-};
+});
+var IconContainer; exports.Icon = void 0;
+var init_Icon = __esm({
+  "src/Icon/Icon.tsx"() {
+    init_styled();
+    init_IconProvider();
+    IconContainer = exports.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;
+  }
+`;
+    exports.Icon = ({
+      name,
+      src,
+      children,
+      size = 16,
+      color = "currentColor",
+      alt = "icon",
+      className,
+      style,
+      onClick
+    }) => {
+      const registry = exports.useIconRegistry();
+      let iconElement = children;
+      if (!iconElement && src) {
+        iconElement = /* @__PURE__ */ React3__default.default.createElement(
+          "img",
+          {
+            src,
+            alt,
+            style: { width: "100%", height: "100%", display: "block" }
+          }
+        );
       }
+      if (!iconElement && name && registry) {
+        const IconComponent = registry[name];
+        if (IconComponent) {
+          iconElement = /* @__PURE__ */ React3__default.default.createElement(IconComponent, null);
+        } else if (process.env.NODE_ENV !== "production") {
+          console.warn(`Icon "${name}" not found in registry. Make sure IconProvider is set up.`);
+        }
+      }
+      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__default.default.createElement(
+        IconContainer,
+        {
+          $size: size,
+          $color: color,
+          className,
+          style,
+          onClick
+        },
+        iconElement
+      );
     };
+    exports.Icon.displayName = "Icon";
   }
-  return component;
-};
-var styledFunction = (tag) => {
-  return wrapWithTheme(baseStyled__default.default(tag));
-};
-var styledWithBase = Object.assign(styledFunction, baseStyled__default.default);
-Object.keys(baseStyled__default.default).forEach((key) => {
-  const originalMethod = baseStyled__default.default[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; exports.Toast = void 0;
+var init_Toast = __esm({
+  "src/Toast/Toast.tsx"() {
+    init_styled();
+    init_Icon2();
+    init_Button2();
+    init_context();
+    ToastContainer = exports.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};
+    `;
+    }}
+`;
+    IconWrapper = exports.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 = exports.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 = exports.styled.span`
+  font-size: 13px;
+  line-height: 20px;
+  color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["100"]};
+`;
+    Description = exports.styled.span`
+  font-size: 12px;
+  line-height: 20px;
+  color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["60"]};
+`;
+    ActionGroup = exports.styled.div`
+  display: flex;
+  gap: 2px;
+  align-items: center;
+`;
+    SuccessIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React3__default.default.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+    InfoIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#5ba0e7" }), /* @__PURE__ */ React3__default.default.createElement("path", { d: "M10 9V14M10 6H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+    ErrorIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#e95555" }), /* @__PURE__ */ React3__default.default.createElement("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+    WarnIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#ebe361" }), /* @__PURE__ */ React3__default.default.createElement("path", { d: "M10 6V11M10 14H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+    CloseIconSvg = () => /* @__PURE__ */ React3__default.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement("path", { d: "M9 3L3 9M3 3L9 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }));
+    exports.Toast = ({
+      variant = "info",
+      message,
+      description,
+      mainButtonText,
+      onMainButtonClick,
+      secondaryButtonText,
+      onSecondaryButtonClick,
+      closable = false,
+      onClose,
+      duration = 0,
+      icon,
+      showIcon = true,
+      className,
+      style
+    }) => {
+      const [visible, setVisible] = React3.useState(true);
+      React3.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 theme2 = exports.getGlobalTheme();
+        const themeIconUrl = theme2?.components?.toast?.[variant]?.icon?.url;
+        if (themeIconUrl) {
+          return /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { src: themeIconUrl });
+        }
+        const defaultIcons = {
+          success: /* @__PURE__ */ React3__default.default.createElement(SuccessIcon, null),
+          info: /* @__PURE__ */ React3__default.default.createElement(InfoIcon, null),
+          error: /* @__PURE__ */ React3__default.default.createElement(ErrorIcon, null),
+          warn: /* @__PURE__ */ React3__default.default.createElement(WarnIcon, null)
+        };
+        return defaultIcons[variant];
+      };
+      const iconElement = getIconElement();
+      const hasDescription = !!description;
+      const hasActions = !!(mainButtonText || secondaryButtonText || closable);
+      return /* @__PURE__ */ React3__default.default.createElement(
+        ToastContainer,
+        {
+          $variant: variant,
+          className,
+          style,
+          role: "alert",
+          "aria-live": "polite"
+        },
+        showIcon && /* @__PURE__ */ React3__default.default.createElement(IconWrapper, { $variant: variant, $hasDescription: hasDescription }, iconElement),
+        /* @__PURE__ */ React3__default.default.createElement(ContentWrapper, { $hasDescription: hasDescription }, /* @__PURE__ */ React3__default.default.createElement(Message, null, message), description && /* @__PURE__ */ React3__default.default.createElement(Description, null, description)),
+        hasActions && /* @__PURE__ */ React3__default.default.createElement(ActionGroup, null, mainButtonText && onMainButtonClick && /* @__PURE__ */ React3__default.default.createElement(
+          exports.Button,
+          {
+            variant: "text",
+            colorType: "guidance",
+            size: "small",
+            onClick: onMainButtonClick
+          },
+          mainButtonText
+        ), secondaryButtonText && onSecondaryButtonClick && /* @__PURE__ */ React3__default.default.createElement(
+          exports.Button,
+          {
+            variant: "text",
+            colorType: "default",
+            size: "small",
+            onClick: onSecondaryButtonClick
+          },
+          secondaryButtonText
+        ), closable && /* @__PURE__ */ React3__default.default.createElement(
+          exports.Button,
+          {
+            variant: "icon",
+            colorType: "default",
+            size: "small",
+            onClick: handleClose,
+            "aria-label": "Close",
+            icon: /* @__PURE__ */ React3__default.default.createElement(CloseIconSvg, null),
+            iconBordered: false
+          }
+        ))
+      );
+    };
+    exports.Toast.displayName = "Toast";
+  }
+});
+
+// src/Toast/toastManager.tsx
+var toastManager_exports = {};
+__export(toastManager_exports, {
+  toast: () => exports.toast,
+  toastManager: () => toastManager
+});
+var ToastWrapper, ToastManager, toastManager; exports.toast = void 0;
+var init_toastManager = __esm({
+  "src/Toast/toastManager.tsx"() {
+    init_Toast();
+    init_styled();
+    ToastWrapper = exports.styled.div`
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+
+  ${({ $placement, theme: theme2 }) => {
+      const offset = theme2.components?.toast?.offset || { vertical: "24px", horizontal: "24px" };
+      const vertical = offset.vertical || "24px";
+      const horizontal = offset.horizontal || "24px";
+      const styles = {
+        "top-right": `
+        top: ${vertical};
+        right: ${horizontal};
+      `,
+        "top-left": `
+        top: ${vertical};
+        left: ${horizontal};
+      `,
+        "top-center": `
+        top: ${vertical};
+        left: 50%;
+        transform: translateX(-50%);
+      `,
+        "bottom-right": `
+        bottom: ${vertical};
+        right: ${horizontal};
+      `,
+        "bottom-left": `
+        bottom: ${vertical};
+        left: ${horizontal};
+      `,
+        "bottom-center": `
+        bottom: ${vertical};
+        left: 50%;
+        transform: translateX(-50%);
+      `
+      };
+      return styles[$placement] || styles["top-right"];
+    }}
+`;
+    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__default.default.createElement(React3__default.default.Fragment, null, this.toasts.map((toast2) => {
+          return /* @__PURE__ */ React3__default.default.createElement(ToastWrapper, { key: toast2.id, $placement: toast2.placement || "top-center" }, /* @__PURE__ */ React3__default.default.createElement(exports.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__default.default.createElement(React3__default.default.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();
+    exports.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: () => exports.getGlobalTheme,
+  registerGlobalContext: () => registerGlobalContext
+});
+var globalTheme, registerGlobalTheme; exports.getGlobalTheme = void 0; var globalRenderFunction, getGlobalRenderFunction, registerGlobalContext;
+var init_context = __esm({
+  "src/utils/context.ts"() {
+    globalTheme = {};
+    registerGlobalTheme = (theme2) => {
+      Object.assign(globalTheme, { ...globalTheme, ...theme2 });
+    };
+    exports.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; exports.styled = void 0;
+var init_styled = __esm({
+  "src/utils/styled.ts"() {
+    init_context();
+    wrapWithTheme = (component) => {
+      if (component && typeof component === "object") {
+        component.defaultProps = {
+          ...component.defaultProps,
+          get theme() {
+            return exports.getGlobalTheme();
+          }
+        };
+      }
+      return component;
+    };
+    styledFunction = (tag) => {
+      return wrapWithTheme(baseStyled__default.default(tag));
+    };
+    styledWithBase = Object.assign(styledFunction, baseStyled__default.default);
+    Object.keys(baseStyled__default.default).forEach((key) => {
+      const originalMethod = baseStyled__default.default[key];
+      if (typeof originalMethod === "function") {
+        styledWithBase[key] = (...args) => {
+          const component = originalMethod(...args);
+          return wrapWithTheme(component);
+        };
+      }
+    });
+    exports.styled = styledWithBase;
+  }
+});
+var IconWrapper2, TextWrapper, IconOnlyWrapper, StyledButton; exports.Button = void 0;
+var init_Button = __esm({
+  "src/Button/Button.tsx"() {
+    init_styled();
+    init_Icon2();
+    IconWrapper2 = exports.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: theme2 }) => {
+      const buttonConfig = theme2.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};
@@ -75,9 +604,39 @@ var IconWrapper = styled.span`
         display: block;
       }
     `;
-}}
+    }}
+`;
+    TextWrapper = exports.styled.span`
+  ${({ $size, theme: theme2 }) => {
+      const buttonConfig = theme2.components.button[$size || "medium"];
+      const sizeConfig = buttonConfig?.withIcon || buttonConfig;
+      return `
+      padding: ${sizeConfig.textPadding || "0"};
+    `;
+    }}
+`;
+    IconOnlyWrapper = exports.styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ $size, theme: theme2 }) => {
+      const buttonConfig = theme2.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 = exports.styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -87,31 +646,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: theme2 }) => {
+      const sizeName = $size || "medium";
+      const buttonConfig = theme2.components.button[sizeName];
+      if ($variant === "icon") {
+        const sizeConfig2 = buttonConfig?.onlyIcon || buttonConfig;
+        return `
+        padding: ${sizeConfig2.padding || "7px"};
+        border-radius: ${sizeConfig2.borderRadius || theme2.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: theme2 }) => {
+      if ($variant === "icon") {
+        const baseVariant = $iconBordered ? "outlined" : "text";
+        const styles2 = theme2.components.button[baseVariant]["default"];
+        return `
         background: ${styles2.background};
         color: ${styles2.color};
         border: 1px solid ${styles2.borderColor};
@@ -139,17 +699,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 = theme2.components.button[variant][effectiveColorType];
+      return `
       background: ${styles.background};
       color: ${styles.color};
       border: 1px solid ${styles.borderColor};
@@ -178,40 +738,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__default.default.createElement(
-    StyledButton,
-    {
-      $variant: variant,
-      $colorType: colorType,
-      $size: size,
-      $fullWidth: fullWidth,
-      $isIconOnly: isIconOnly,
-      $iconBordered: iconBordered,
-      disabled: disabled || loading,
+    exports.Button = ({
+      variant = "solid",
+      colorType = "default",
+      size = "medium",
+      disabled = false,
+      loading = false,
+      fullWidth = false,
+      icon,
+      iconPlacement = "before",
+      iconBordered = false,
+      children,
       ...rest
-    },
-    loading ? /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, "Loading...") : isIconOnly ? iconOnlyContent : /* @__PURE__ */ React12__default.default.createElement(React12__default.default.Fragment, null, iconBefore && /* @__PURE__ */ React12__default.default.createElement(IconWrapper, { $size: size, $position: "before" }, iconBefore), children, iconAfter && /* @__PURE__ */ React12__default.default.createElement(IconWrapper, { $size: size, $position: "after" }, iconAfter))
-  );
-};
-Button.displayName = "Button";
-var SliderContainer = styled.div`
+    }) => {
+      return /* @__PURE__ */ React3__default.default.createElement(
+        StyledButton,
+        {
+          $variant: variant,
+          $colorType: colorType,
+          $size: size,
+          $fullWidth: fullWidth,
+          $iconBordered: iconBordered,
+          disabled: disabled || loading,
+          ...rest
+        },
+        loading ? /* @__PURE__ */ React3__default.default.createElement(TextWrapper, { $size: size }, "Loading...") : variant === "icon" ? (
+          // Icon variant: render icon with onlyIcon wrapper (uses onlyIcon config)
+          /* @__PURE__ */ React3__default.default.createElement(IconOnlyWrapper, { $size: size }, typeof icon === "string" ? /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { src: icon }) : icon || children)
+        ) : /* @__PURE__ */ React3__default.default.createElement(React3__default.default.Fragment, null, icon && iconPlacement === "before" && /* @__PURE__ */ React3__default.default.createElement(IconWrapper2, { $size: size, $iconPlacement: "before" }, typeof icon === "string" ? /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { src: icon }) : icon), /* @__PURE__ */ React3__default.default.createElement(TextWrapper, { $size: size }, children), icon && iconPlacement === "after" && /* @__PURE__ */ React3__default.default.createElement(IconWrapper2, { $size: size, $iconPlacement: "after" }, typeof icon === "string" ? /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { src: icon }) : icon))
+      );
+    };
+    exports.Button.displayName = "Button";
+  }
+});
+var SliderContainer, SliderTrack, SliderFill, SliderThumb; exports.Slider = void 0;
+var init_Slider = __esm({
+  "src/Slider/Slider.tsx"() {
+    init_styled();
+    SliderContainer = exports.styled.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -220,7 +786,7 @@ var SliderContainer = styled.div`
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   user-select: none;
 `;
-var SliderTrack = styled.div`
+    SliderTrack = exports.styled.div`
   position: absolute;
   left: 0;
   right: 0;
@@ -230,7 +796,7 @@ var SliderTrack = styled.div`
   top: 50%;
   transform: translateY(-50%);
 `;
-var SliderFill = styled.div`
+    SliderFill = exports.styled.div`
   position: absolute;
   left: 0;
   height: 2px;
@@ -240,7 +806,7 @@ var SliderFill = styled.div`
   width: ${({ $percentage }) => $percentage}%;
   background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["10"] : theme2.colors.palettes.gray["100"]};
 `;
-var SliderThumb = styled.div`
+    SliderThumb = exports.styled.div`
   position: absolute;
   width: 10px;
   height: 10px;
@@ -264,131 +830,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] = React12.useState(
-    controlledValue ?? defaultValue
-  );
-  const [isDragging, setIsDragging] = React12.useState(false);
-  const containerRef = React12.useRef(null);
-  const value = controlledValue !== void 0 ? controlledValue : internalValue;
-  const percentage = (value - min) / (max - min) * 100;
-  const updateValue = React12.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 = React12.useCallback(
-    (e) => {
-      if (disabled) return;
-      e.preventDefault();
-      setIsDragging(true);
-      onDragStart?.();
-      updateValue(e.clientX);
-    },
-    [disabled, onDragStart, updateValue]
-  );
-  React12.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 = React12.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__default.default.createElement(
-    SliderContainer,
-    {
-      ref: containerRef,
-      $disabled: disabled,
+    exports.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__default.default.createElement(SliderTrack, { $disabled: disabled }),
-    /* @__PURE__ */ React12__default.default.createElement(SliderFill, { $percentage: percentage, $disabled: disabled }),
-    /* @__PURE__ */ React12__default.default.createElement(
-      SliderThumb,
-      {
-        $percentage: percentage,
-        $disabled: disabled,
-        $isDragging: isDragging
-      }
-    )
-  );
-};
-Slider.displayName = "Slider";
-var NumberInputContainer = styled.div`
+      style
+    }) => {
+      const [internalValue, setInternalValue] = React3.useState(
+        controlledValue ?? defaultValue
+      );
+      const [isDragging, setIsDragging] = React3.useState(false);
+      const containerRef = React3.useRef(null);
+      const value = controlledValue !== void 0 ? controlledValue : internalValue;
+      const percentage = (value - min) / (max - min) * 100;
+      const updateValue = React3.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 = React3.useCallback(
+        (e) => {
+          if (disabled) return;
+          e.preventDefault();
+          setIsDragging(true);
+          onDragStart?.();
+          updateValue(e.clientX);
+        },
+        [disabled, onDragStart, updateValue]
+      );
+      React3.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 = React3.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__default.default.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__default.default.createElement(SliderTrack, { $disabled: disabled }),
+        /* @__PURE__ */ React3__default.default.createElement(SliderFill, { $percentage: percentage, $disabled: disabled }),
+        /* @__PURE__ */ React3__default.default.createElement(
+          SliderThumb,
+          {
+            $percentage: percentage,
+            $disabled: disabled,
+            $isDragging: isDragging
+          }
+        )
+      );
+    };
+    exports.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; exports.NumberInput = void 0;
+var init_NumberInput = __esm({
+  "src/NumberInput/NumberInput.tsx"() {
+    init_styled();
+    NumberInputContainer = exports.styled.div`
   display: inline-flex;
   align-items: center;
   background: white;
@@ -405,24 +984,24 @@ var NumberInputContainer = styled.div`
   `}
 
   ${({ $disabled, $alert, $isFocused, theme: theme2 }) => {
-  if ($disabled) {
-    return `
+      if ($disabled) {
+        return `
         border-color: ${theme2.colors.palettes.transparency["10"]};
         cursor: not-allowed;
       `;
-  }
-  if ($alert) {
-    return `
+      }
+      if ($alert) {
+        return `
         border-color: ${theme2.colors.palettes.red["6"]};
       `;
-  }
-  if ($isFocused) {
-    return `
+      }
+      if ($isFocused) {
+        return `
         border-color: ${theme2.colors.palettes.transparency["30"]};
         box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
       `;
-  }
-  return `
+      }
+      return `
       border-color: ${theme2.colors.palettes.transparency["10"]};
 
       &:hover {
@@ -430,9 +1009,9 @@ var NumberInputContainer = styled.div`
         box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
       }
     `;
-}}
+    }}
 `;
-var InputWrapper = styled.div`
+    InputWrapper = exports.styled.div`
   flex: 1;
   display: flex;
   align-items: center;
@@ -440,7 +1019,7 @@ var InputWrapper = styled.div`
   min-width: 0;
   gap: 4px;
 `;
-var UnitText = styled.span`
+    UnitText = exports.styled.span`
   flex-shrink: 0;
   font-family: 'PingFang SC', sans-serif;
   font-weight: 400;
@@ -458,7 +1037,7 @@ var UnitText = styled.span`
     color: ${theme2.colors.palettes.gray["120"]};
   `}
 `;
-var StyledInput = styled.input`
+    StyledInput = exports.styled.input`
   width: 100%;
   border: none;
   outline: none;
@@ -498,7 +1077,7 @@ var StyledInput = styled.input`
     -moz-appearance: textfield;
   }
 `;
-var ButtonGroup = styled.div`
+    ButtonGroup = exports.styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -506,16 +1085,16 @@ var ButtonGroup = styled.div`
   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"]};`;
-}}
+      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"]};`;
+    }}
 `;
-var StepButton = styled.button`
+    StepButton = exports.styled.button`
   flex: 1 1 50%;
   display: flex;
   align-items: center;
@@ -529,22 +1108,22 @@ var StepButton = styled.button`
   overflow: hidden;
 
   ${({ $position, $alert, $disabled, theme: theme2 }) => {
-  if ($position === "up") {
-    return `
+      if ($position === "up") {
+        return `
         border-bottom: 1px solid ${$disabled ? theme2.colors.palettes.transparency["10"] : $alert ? theme2.colors.palettes.red["6"] : theme2.colors.palettes.transparency["10"]};
       `;
-  }
-  return "";
-}}
+      }
+      return "";
+    }}
 
   ${({ $disabled, theme: theme2 }) => {
-  if ($disabled) {
-    return `
+      if ($disabled) {
+        return `
         cursor: not-allowed;
         opacity: 0.4;
       `;
-  }
-  return `
+      }
+      return `
       &:hover {
         background-color: ${theme2.colors.palettes.transparency["5"]};
       }
@@ -553,181 +1132,194 @@ var StepButton = styled.button`
         background-color: ${theme2.colors.palettes.transparency["10"]};
       }
     `;
-}}
+    }}
 
   svg {
     width: 14px;
     height: 14px;
     fill: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["30"] : theme2.colors.palettes.gray["120"]};
   }
-`;
-var UpArrow = () => /* @__PURE__ */ React12__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
-var DownArrow = () => /* @__PURE__ */ React12__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.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] = React12.useState(controlledValue ?? defaultValue);
-  const [displayValue, setDisplayValue] = React12.useState("");
-  const [isFocused, setIsFocused] = React12.useState(false);
-  const inputRef = React12.useRef(null);
-  const value = controlledValue !== void 0 ? controlledValue : internalValue;
-  const formatValue = React12.useCallback(
-    (val) => {
-      if (formatter) {
-        return formatter(val);
-      }
-      if (precision !== void 0) {
-        return val.toFixed(precision);
-      }
-      return String(val);
-    },
-    [formatter, precision]
-  );
-  const parseValue = React12.useCallback(
-    (displayVal) => {
-      if (parser) {
-        return parser(displayVal);
-      }
-      const parsed = parseFloat(displayVal);
-      return isNaN(parsed) ? null : parsed;
-    },
-    [parser]
-  );
-  React12.useEffect(() => {
-    if (!isFocused) {
-      setDisplayValue(formatValue(value));
-    }
-  }, [value, isFocused, formatValue]);
-  const clampValue = React12.useCallback(
-    (val) => {
-      return Math.max(min, Math.min(max, val));
-    },
-    [min, max]
-  );
-  const handleValueChange = React12.useCallback(
-    (newValue) => {
-      const clampedValue = clampValue(newValue);
-      if (controlledValue === void 0) {
-        setInternalValue(clampedValue);
-      }
-      onChange?.(clampedValue);
-    },
-    [clampValue, controlledValue, onChange]
-  );
-  const increment = React12.useCallback(() => {
-    if (disabled) return;
-    handleValueChange(value + step);
-  }, [disabled, value, step, handleValueChange]);
-  const decrement = React12.useCallback(() => {
-    if (disabled) return;
-    handleValueChange(value - step);
-  }, [disabled, value, step, handleValueChange]);
-  const handleInputChange = React12.useCallback((e) => {
-    setDisplayValue(e.target.value);
-  }, []);
-  const handleBlur = React12.useCallback(() => {
-    setIsFocused(false);
-    const parsed = parseValue(displayValue);
-    if (parsed !== null) {
-      handleValueChange(parsed);
-    } else {
-      setDisplayValue(formatValue(value));
-    }
-  }, [displayValue, parseValue, handleValueChange, value, formatValue]);
-  const handleFocus = React12.useCallback(() => {
-    setIsFocused(true);
-    setDisplayValue(String(value));
-  }, [value]);
-  const handleKeyDown = React12.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__default.default.createElement(
-    NumberInputContainer,
-    {
-      $size: size,
-      $disabled: disabled,
-      $alert: alert,
-      $isFocused: isFocused,
+`;
+    UpArrow = () => /* @__PURE__ */ React3__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
+    DownArrow = () => /* @__PURE__ */ React3__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement("path", { d: "M7 9.5L3.5 5.5H10.5L7 9.5Z", fill: "currentColor" }));
+    exports.NumberInput = ({
+      value: controlledValue,
+      defaultValue = 0,
+      min = -Infinity,
+      max = Infinity,
+      step = 1,
+      size = "large",
+      disabled = false,
+      alert = false,
+      precision,
+      formatter,
+      parser,
+      unit,
+      onChange,
       className,
       style
-    },
-    /* @__PURE__ */ React12__default.default.createElement(InputWrapper, null, /* @__PURE__ */ React12__default.default.createElement(
-      StyledInput,
-      {
-        ref: inputRef,
-        type: "text",
-        value: displayValue,
-        onChange: handleInputChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onKeyDown: handleKeyDown,
-        disabled,
-        $size: size,
-        $disabled: disabled
-      }
-    ), unit && /* @__PURE__ */ React12__default.default.createElement(UnitText, { $size: size, $disabled: disabled }, unit)),
-    /* @__PURE__ */ React12__default.default.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React12__default.default.createElement(
-      StepButton,
-      {
-        type: "button",
-        $position: "up",
-        $alert: alert,
-        $disabled: disabled,
-        onClick: increment,
-        disabled,
-        tabIndex: -1
-      },
-      /* @__PURE__ */ React12__default.default.createElement(UpArrow, null)
-    ), /* @__PURE__ */ React12__default.default.createElement(
-      StepButton,
-      {
-        type: "button",
-        $position: "down",
-        $alert: alert,
-        $disabled: disabled,
-        onClick: decrement,
-        disabled,
-        tabIndex: -1
-      },
-      /* @__PURE__ */ React12__default.default.createElement(DownArrow, null)
-    ))
-  );
-};
-NumberInput.displayName = "NumberInput";
+    }) => {
+      const [internalValue, setInternalValue] = React3.useState(controlledValue ?? defaultValue);
+      const [displayValue, setDisplayValue] = React3.useState("");
+      const [isFocused, setIsFocused] = React3.useState(false);
+      const inputRef = React3.useRef(null);
+      const value = controlledValue !== void 0 ? controlledValue : internalValue;
+      const formatValue = React3.useCallback(
+        (val) => {
+          if (formatter) {
+            return formatter(val);
+          }
+          if (precision !== void 0) {
+            return val.toFixed(precision);
+          }
+          return String(val);
+        },
+        [formatter, precision]
+      );
+      const parseValue = React3.useCallback(
+        (displayVal) => {
+          if (parser) {
+            return parser(displayVal);
+          }
+          const parsed = parseFloat(displayVal);
+          return isNaN(parsed) ? null : parsed;
+        },
+        [parser]
+      );
+      React3.useEffect(() => {
+        if (!isFocused) {
+          setDisplayValue(formatValue(value));
+        }
+      }, [value, isFocused, formatValue]);
+      const clampValue = React3.useCallback(
+        (val) => {
+          return Math.max(min, Math.min(max, val));
+        },
+        [min, max]
+      );
+      const handleValueChange = React3.useCallback(
+        (newValue) => {
+          const clampedValue = clampValue(newValue);
+          if (controlledValue === void 0) {
+            setInternalValue(clampedValue);
+          }
+          onChange?.(clampedValue);
+        },
+        [clampValue, controlledValue, onChange]
+      );
+      const increment = React3.useCallback(() => {
+        if (disabled) return;
+        handleValueChange(value + step);
+      }, [disabled, value, step, handleValueChange]);
+      const decrement = React3.useCallback(() => {
+        if (disabled) return;
+        handleValueChange(value - step);
+      }, [disabled, value, step, handleValueChange]);
+      const handleInputChange = React3.useCallback((e) => {
+        setDisplayValue(e.target.value);
+      }, []);
+      const handleBlur = React3.useCallback(() => {
+        setIsFocused(false);
+        const parsed = parseValue(displayValue);
+        if (parsed !== null) {
+          handleValueChange(parsed);
+        } else {
+          setDisplayValue(formatValue(value));
+        }
+      }, [displayValue, parseValue, handleValueChange, value, formatValue]);
+      const handleFocus = React3.useCallback(() => {
+        setIsFocused(true);
+        setDisplayValue(String(value));
+      }, [value]);
+      const handleKeyDown = React3.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__default.default.createElement(
+        NumberInputContainer,
+        {
+          $size: size,
+          $disabled: disabled,
+          $alert: alert,
+          $isFocused: isFocused,
+          className,
+          style
+        },
+        /* @__PURE__ */ React3__default.default.createElement(InputWrapper, null, /* @__PURE__ */ React3__default.default.createElement(
+          StyledInput,
+          {
+            ref: inputRef,
+            type: "text",
+            value: displayValue,
+            onChange: handleInputChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            disabled,
+            $size: size,
+            $disabled: disabled
+          }
+        ), unit && /* @__PURE__ */ React3__default.default.createElement(UnitText, { $size: size, $disabled: disabled }, unit)),
+        /* @__PURE__ */ React3__default.default.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(
+          StepButton,
+          {
+            type: "button",
+            $position: "up",
+            $alert: alert,
+            $disabled: disabled,
+            onClick: increment,
+            disabled,
+            tabIndex: -1
+          },
+          /* @__PURE__ */ React3__default.default.createElement(UpArrow, null)
+        ), /* @__PURE__ */ React3__default.default.createElement(
+          StepButton,
+          {
+            type: "button",
+            $position: "down",
+            $alert: alert,
+            $disabled: disabled,
+            onClick: decrement,
+            disabled,
+            tabIndex: -1
+          },
+          /* @__PURE__ */ React3__default.default.createElement(DownArrow, null)
+        ))
+      );
+    };
+    exports.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; exports.SpinButton = void 0;
+var init_SpinButton = __esm({
+  "src/Button/SpinButton.tsx"() {
+    init_styled();
+    init_Slider2();
+    init_NumberInput2();
+    SpinButtonWrapper = exports.styled.div`
   display: inline-flex;
   align-items: center;
   gap: ${({ $showSlider }) => $showSlider ? "0" : "0"};
   width: ${({ $showSlider }) => $showSlider ? "100%" : "auto"};
 `;
-var SliderWrapper = styled.div`
+    SliderWrapper = exports.styled.div`
   flex: 1;
   display: flex;
   align-items: center;
@@ -735,64 +1327,80 @@ 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] = React12.useState(controlledValue ?? defaultValue);
-  const value = controlledValue !== void 0 ? controlledValue : internalValue;
-  const handleValueChange = React12.useCallback(
-    (newValue) => {
-      if (newValue === null) return;
-      if (controlledValue === void 0) {
-        setInternalValue(newValue);
-      }
-      onChange?.(newValue);
-    },
-    [controlledValue, onChange]
-  );
-  return /* @__PURE__ */ React12__default.default.createElement(SpinButtonWrapper, { $showSlider: showSlider, className, style }, showSlider && /* @__PURE__ */ React12__default.default.createElement(SliderWrapper, { $size: size }, /* @__PURE__ */ React12__default.default.createElement(
-    Slider,
-    {
-      value,
-      min,
-      max,
-      step,
-      disabled,
-      onChange: handleValueChange
-    }
-  )), /* @__PURE__ */ React12__default.default.createElement(
-    NumberInput,
-    {
-      value,
-      min,
-      max,
-      step,
-      size,
-      disabled,
-      alert,
+    exports.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";
-var SwitchContainer = styled.label`
+      onChange,
+      className,
+      style
+    }) => {
+      const [internalValue, setInternalValue] = React3.useState(controlledValue ?? defaultValue);
+      const value = controlledValue !== void 0 ? controlledValue : internalValue;
+      const handleValueChange = React3.useCallback(
+        (newValue) => {
+          if (newValue === null) return;
+          if (controlledValue === void 0) {
+            setInternalValue(newValue);
+          }
+          onChange?.(newValue);
+        },
+        [controlledValue, onChange]
+      );
+      return /* @__PURE__ */ React3__default.default.createElement(SpinButtonWrapper, { $showSlider: showSlider, className, style }, showSlider && /* @__PURE__ */ React3__default.default.createElement(SliderWrapper, { $size: size }, /* @__PURE__ */ React3__default.default.createElement(
+        exports.Slider,
+        {
+          value,
+          min,
+          max,
+          step,
+          disabled,
+          onChange: handleValueChange
+        }
+      )), /* @__PURE__ */ React3__default.default.createElement(
+        exports.NumberInput,
+        {
+          value,
+          min,
+          max,
+          step,
+          size,
+          disabled,
+          alert,
+          precision,
+          formatter,
+          parser,
+          onChange: handleValueChange
+        }
+      ));
+    };
+    exports.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 = exports.styled.label`
   position: relative;
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
@@ -805,14 +1413,14 @@ var SwitchContainer = styled.label`
     `;
 }}
 `;
-var HiddenInput = styled.input`
+var HiddenInput = exports.styled.input`
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
 `;
-var Track = styled.div`
+var Track = exports.styled.div`
   position: absolute;
   inset: 0;
   top: 50%;
@@ -854,7 +1462,7 @@ var Track = styled.div`
     `;
 }}
 `;
-var Thumb = styled.div`
+var Thumb = exports.styled.div`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -914,12 +1522,12 @@ var Switch = ({
   className,
   style
 }) => {
-  const [internalChecked, setInternalChecked] = React12.useState(
+  const [internalChecked, setInternalChecked] = React3.useState(
     controlledChecked ?? defaultChecked
   );
-  const [isFocused, setIsFocused] = React12.useState(false);
+  const [isFocused, setIsFocused] = React3.useState(false);
   const checked = controlledChecked !== void 0 ? controlledChecked : internalChecked;
-  const handleChange = React12.useCallback(
+  const handleChange = React3.useCallback(
     (e) => {
       if (disabled) return;
       const newChecked = e.target.checked;
@@ -930,13 +1538,13 @@ var Switch = ({
     },
     [disabled, controlledChecked, onChange]
   );
-  const handleFocus = React12.useCallback(() => {
+  const handleFocus = React3.useCallback(() => {
     setIsFocused(true);
   }, []);
-  const handleBlur = React12.useCallback(() => {
+  const handleBlur = React3.useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React12__default.default.createElement(
+  return /* @__PURE__ */ React3__default.default.createElement(
     SwitchContainer,
     {
       $size: size,
@@ -945,7 +1553,7 @@ var Switch = ({
       className,
       style
     },
-    /* @__PURE__ */ React12__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement(
       HiddenInput,
       {
         type: "checkbox",
@@ -956,7 +1564,7 @@ var Switch = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React12__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement(
       Track,
       {
         $size: size,
@@ -965,7 +1573,7 @@ var Switch = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React12__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement(
       Thumb,
       {
         $size: size,
@@ -977,7 +1585,10 @@ var Switch = ({
   );
 };
 Switch.displayName = "Switch";
-var RadioContainer = styled.label`
+
+// src/Radio/Radio.tsx
+init_styled();
+var RadioContainer = exports.styled.label`
   position: relative;
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
@@ -990,14 +1601,14 @@ var RadioContainer = styled.label`
     `;
 }}
 `;
-var HiddenInput2 = styled.input`
+var HiddenInput2 = exports.styled.input`
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
 `;
-var RadioOuter = styled.div`
+var RadioOuter = exports.styled.div`
   position: absolute;
   inset: 0;
   border-radius: 50%;
@@ -1041,7 +1652,7 @@ var RadioOuter = styled.div`
     `;
 }}
 `;
-var RadioInner = styled.div`
+var RadioInner = exports.styled.div`
   position: absolute;
   left: 50%;
   top: 50%;
@@ -1070,12 +1681,12 @@ var Radio = ({
   className,
   style
 }) => {
-  const [internalChecked, setInternalChecked] = React12.useState(
+  const [internalChecked, setInternalChecked] = React3.useState(
     controlledChecked ?? defaultChecked
   );
-  const [isFocused, setIsFocused] = React12.useState(false);
+  const [isFocused, setIsFocused] = React3.useState(false);
   const checked = controlledChecked !== void 0 ? controlledChecked : internalChecked;
-  const handleChange = React12.useCallback(
+  const handleChange = React3.useCallback(
     (e) => {
       if (disabled) return;
       const newChecked = e.target.checked;
@@ -1086,20 +1697,20 @@ var Radio = ({
     },
     [disabled, controlledChecked, onChange]
   );
-  const handleFocus = React12.useCallback(() => {
+  const handleFocus = React3.useCallback(() => {
     setIsFocused(true);
   }, []);
-  const handleBlur = React12.useCallback(() => {
+  const handleBlur = React3.useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React12__default.default.createElement(
+  return /* @__PURE__ */ React3__default.default.createElement(
     RadioContainer,
     {
       $disabled: disabled,
       className,
       style
     },
-    /* @__PURE__ */ React12__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement(
       HiddenInput2,
       {
         type: "radio",
@@ -1113,7 +1724,7 @@ var Radio = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React12__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement(
       RadioOuter,
       {
         $checked: checked,
@@ -1121,7 +1732,7 @@ var Radio = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React12__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement(
       RadioInner,
       {
         $checked: checked,
@@ -1131,7 +1742,10 @@ var Radio = ({
   );
 };
 Radio.displayName = "Radio";
-var CheckboxContainer = styled.label`
+
+// src/Checkbox/Checkbox.tsx
+init_styled();
+var CheckboxContainer = exports.styled.label`
   position: relative;
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
@@ -1144,14 +1758,14 @@ var CheckboxContainer = styled.label`
     `;
 }}
 `;
-var HiddenInput3 = styled.input`
+var HiddenInput3 = exports.styled.input`
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
 `;
-var CheckboxBox = styled.div`
+var CheckboxBox = exports.styled.div`
   position: absolute;
   inset: 1px;
   border: 1px solid;
@@ -1208,7 +1822,7 @@ var CheckboxBox = styled.div`
     `;
 }}
 `;
-var IconWrapper2 = styled.div`
+var IconWrapper3 = exports.styled.div`
   position: absolute;
   left: 50%;
   top: 50%;
@@ -1232,7 +1846,7 @@ var IconWrapper2 = styled.div`
     display: block;
   }
 `;
-var DefaultIndeterminateIcon = styled.div`
+var DefaultIndeterminateIcon = exports.styled.div`
   width: 8px;
   height: 2px;
   background: white;
@@ -1249,18 +1863,18 @@ var Checkbox = ({
   className,
   style
 }) => {
-  const [internalChecked, setInternalChecked] = React12.useState(
+  const [internalChecked, setInternalChecked] = React3.useState(
     controlledChecked ?? defaultChecked
   );
-  const [isFocused, setIsFocused] = React12.useState(false);
-  const inputRef = React12.useRef(null);
+  const [isFocused, setIsFocused] = React3.useState(false);
+  const inputRef = React3.useRef(null);
   const checked = controlledChecked !== void 0 ? controlledChecked : internalChecked;
-  React12.useEffect(() => {
+  React3.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
-  const handleChange = React12.useCallback(
+  const handleChange = React3.useCallback(
     (e) => {
       if (disabled) return;
       const newChecked = e.target.checked;
@@ -1271,20 +1885,20 @@ var Checkbox = ({
     },
     [disabled, controlledChecked, onChange]
   );
-  const handleFocus = React12.useCallback(() => {
+  const handleFocus = React3.useCallback(() => {
     setIsFocused(true);
   }, []);
-  const handleBlur = React12.useCallback(() => {
+  const handleBlur = React3.useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React12__default.default.createElement(
+  return /* @__PURE__ */ React3__default.default.createElement(
     CheckboxContainer,
     {
       $disabled: disabled,
       className,
       style
     },
-    /* @__PURE__ */ React12__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement(
       HiddenInput3,
       {
         ref: inputRef,
@@ -1299,7 +1913,7 @@ var Checkbox = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React12__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement(
       CheckboxBox,
       {
         $checked: checked,
@@ -1308,12 +1922,18 @@ var Checkbox = ({
         $isFocused: isFocused
       }
     ),
-    !indeterminate && /* @__PURE__ */ React12__default.default.createElement(IconWrapper2, { $visible: checked }, /* @__PURE__ */ React12__default.default.createElement("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "#fff" }, /* @__PURE__ */ React12__default.default.createElement("path", { d: "M1.05426 3.16164L0 4.27945L3.50904 8L10 1.11781L8.94573 0L3.50904 5.76438L1.05426 3.16164Z" }))),
-    indeterminate && /* @__PURE__ */ React12__default.default.createElement(IconWrapper2, { $visible: indeterminate }, /* @__PURE__ */ React12__default.default.createElement(DefaultIndeterminateIcon, null))
+    !indeterminate && /* @__PURE__ */ React3__default.default.createElement(IconWrapper3, { $visible: checked }, /* @__PURE__ */ React3__default.default.createElement("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "#fff" }, /* @__PURE__ */ React3__default.default.createElement("path", { d: "M1.05426 3.16164L0 4.27945L3.50904 8L10 1.11781L8.94573 0L3.50904 5.76438L1.05426 3.16164Z" }))),
+    indeterminate && /* @__PURE__ */ React3__default.default.createElement(IconWrapper3, { $visible: indeterminate }, /* @__PURE__ */ React3__default.default.createElement(DefaultIndeterminateIcon, null))
   );
 };
 Checkbox.displayName = "Checkbox";
-var InputWrapper2 = styled.div`
+
+// src/index.ts
+init_Slider2();
+
+// src/Input/Input.tsx
+init_styled();
+var InputWrapper2 = exports.styled.div`
   display: inline-flex;
   align-items: center;
   width: 100%;
@@ -1372,7 +1992,7 @@ var InputWrapper2 = styled.div`
     opacity: 1;
   `}
 `;
-var StyledInput2 = styled.input`
+var StyledInput2 = exports.styled.input`
   flex: 1;
   border: none;
   outline: none;
@@ -1405,7 +2025,7 @@ var StyledInput2 = styled.input`
     cursor: default;
   `}
 `;
-var PrefixNode = styled.div`
+var PrefixNode = exports.styled.div`
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
@@ -1422,7 +2042,7 @@ var PrefixNode = styled.div`
     `;
 }}
 `;
-var SuffixNode = styled.div`
+var SuffixNode = exports.styled.div`
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
@@ -1439,7 +2059,7 @@ var SuffixNode = styled.div`
     `;
 }}
 `;
-var Input = React12.forwardRef(
+var Input = React3.forwardRef(
   ({
     size = "medium",
     error = false,
@@ -1453,7 +2073,7 @@ var Input = React12.forwardRef(
     onBlur,
     ...rest
   }, ref) => {
-    const [isFocused, setIsFocused] = React12.useState(false);
+    const [isFocused, setIsFocused] = React3.useState(false);
     const handleFocus = (e) => {
       setIsFocused(true);
       onFocus?.(e);
@@ -1462,7 +2082,7 @@ var Input = React12.forwardRef(
       setIsFocused(false);
       onBlur?.(e);
     };
-    return /* @__PURE__ */ React12__default.default.createElement(
+    return /* @__PURE__ */ React3__default.default.createElement(
       InputWrapper2,
       {
         $size: size,
@@ -1473,8 +2093,8 @@ var Input = React12.forwardRef(
         className,
         style
       },
-      prefixNode && /* @__PURE__ */ React12__default.default.createElement(PrefixNode, { $size: size }, prefixNode),
-      /* @__PURE__ */ React12__default.default.createElement(
+      prefixNode && /* @__PURE__ */ React3__default.default.createElement(PrefixNode, { $size: size }, prefixNode),
+      /* @__PURE__ */ React3__default.default.createElement(
         StyledInput2,
         {
           ref,
@@ -1488,12 +2108,15 @@ var Input = React12.forwardRef(
           ...rest
         }
       ),
-      suffixNode && /* @__PURE__ */ React12__default.default.createElement(SuffixNode, { $size: size }, suffixNode)
+      suffixNode && /* @__PURE__ */ React3__default.default.createElement(SuffixNode, { $size: size }, suffixNode)
     );
   }
 );
 Input.displayName = "Input";
-var SearchIconWrapper = styled.div`
+
+// src/Input/SearchInput.tsx
+init_styled();
+var SearchIconWrapper = exports.styled.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1513,7 +2136,7 @@ var SearchIconWrapper = styled.div`
     color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["100"]};
   }
 `;
-var ClearButton = styled.button`
+var ClearButton = exports.styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1548,7 +2171,7 @@ var ClearButton = styled.button`
     opacity: 0.5;
   }
 `;
-var DefaultSearchIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement(
+var DefaultSearchIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement(
   "path",
   {
     d: "M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z",
@@ -1557,7 +2180,7 @@ var DefaultSearchIcon = () => /* @__PURE__ */ React12__default.default.createEle
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }
-), /* @__PURE__ */ React12__default.default.createElement(
+), /* @__PURE__ */ React3__default.default.createElement(
   "path",
   {
     d: "M14 14L11.1 11.1",
@@ -1567,7 +2190,7 @@ var DefaultSearchIcon = () => /* @__PURE__ */ React12__default.default.createEle
     strokeLinejoin: "round"
   }
 ));
-var DefaultCloseIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement(
+var DefaultCloseIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement(
   "path",
   {
     d: "M12 4L4 12",
@@ -1576,7 +2199,7 @@ var DefaultCloseIcon = () => /* @__PURE__ */ React12__default.default.createElem
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }
-), /* @__PURE__ */ React12__default.default.createElement(
+), /* @__PURE__ */ React3__default.default.createElement(
   "path",
   {
     d: "M4 4L12 12",
@@ -1586,7 +2209,7 @@ var DefaultCloseIcon = () => /* @__PURE__ */ React12__default.default.createElem
     strokeLinejoin: "round"
   }
 ));
-var SearchInput = React12.forwardRef(
+var SearchInput = React3.forwardRef(
   ({
     size = "extraLarge",
     clearable = true,
@@ -1599,7 +2222,7 @@ var SearchInput = React12.forwardRef(
     readOnly,
     ...rest
   }, ref) => {
-    const [internalValue, setInternalValue] = React12.useState(defaultValue || "");
+    const [internalValue, setInternalValue] = React3.useState(defaultValue || "");
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const handleChange = (e) => {
@@ -1614,8 +2237,8 @@ var SearchInput = React12.forwardRef(
       }
       onClear?.();
     };
-    const prefixNode = /* @__PURE__ */ React12__default.default.createElement(SearchIconWrapper, { $size: size }, searchIcon || /* @__PURE__ */ React12__default.default.createElement(DefaultSearchIcon, null));
-    const suffixNode = clearable && currentValue && !disabled && !readOnly ? /* @__PURE__ */ React12__default.default.createElement(
+    const prefixNode = /* @__PURE__ */ React3__default.default.createElement(SearchIconWrapper, { $size: size }, searchIcon || /* @__PURE__ */ React3__default.default.createElement(DefaultSearchIcon, null));
+    const suffixNode = clearable && currentValue && !disabled && !readOnly ? /* @__PURE__ */ React3__default.default.createElement(
       ClearButton,
       {
         $size: size,
@@ -1623,9 +2246,9 @@ var SearchInput = React12.forwardRef(
         type: "button",
         tabIndex: -1
       },
-      /* @__PURE__ */ React12__default.default.createElement(DefaultCloseIcon, null)
+      /* @__PURE__ */ React3__default.default.createElement(DefaultCloseIcon, null)
     ) : null;
-    return /* @__PURE__ */ React12__default.default.createElement(
+    return /* @__PURE__ */ React3__default.default.createElement(
       Input,
       {
         ref,
@@ -1642,255 +2265,20 @@ var SearchInput = React12.forwardRef(
   }
 );
 SearchInput.displayName = "SearchInput";
-var IconContext = React12.createContext(null);
-var IconProvider = ({
-  icons,
-  children
-}) => {
-  return /* @__PURE__ */ React12__default.default.createElement(IconContext.Provider, { value: icons }, children);
-};
-var useIconRegistry = () => {
-  return React12.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__default.default.createElement(
-      "img",
-      {
-        src,
-        alt,
-        style: { width: "100%", height: "100%", display: "block" }
-      }
-    );
-  }
-  if (!iconElement && name && registry) {
-    const IconComponent = registry[name];
-    if (IconComponent) {
-      iconElement = /* @__PURE__ */ React12__default.default.createElement(IconComponent, null);
-    } else if (process.env.NODE_ENV !== "production") {
-      console.warn(`Icon "${name}" not found in registry. Make sure IconProvider is set up.`);
-    }
-  }
-  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__default.default.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;
-  }
 
-  &: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__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React12__default.default.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
-var InfoIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#5ba0e7" }), /* @__PURE__ */ React12__default.default.createElement("path", { d: "M10 9V14M10 6H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var ErrorIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#e95555" }), /* @__PURE__ */ React12__default.default.createElement("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var WarnIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#ebe361" }), /* @__PURE__ */ React12__default.default.createElement("path", { d: "M10 6V11M10 14H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var CloseIconSvg = () => /* @__PURE__ */ React12__default.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12__default.default.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] = React12.useState(true);
-  React12.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__default.default.createElement(SuccessIcon, null),
-    info: /* @__PURE__ */ React12__default.default.createElement(InfoIcon, null),
-    error: /* @__PURE__ */ React12__default.default.createElement(ErrorIcon, null),
-    warn: /* @__PURE__ */ React12__default.default.createElement(WarnIcon, null)
-  };
-  const iconElement = icon || defaultIcons[variant];
-  return /* @__PURE__ */ React12__default.default.createElement(
-    ToastContainer,
-    {
-      $variant: variant,
-      className,
-      style,
-      role: "alert",
-      "aria-live": "polite"
-    },
-    showIcon && /* @__PURE__ */ React12__default.default.createElement(IconWrapper3, { $variant: variant }, iconElement),
-    /* @__PURE__ */ React12__default.default.createElement(Message, null, message),
-    actionText && onAction && /* @__PURE__ */ React12__default.default.createElement(
-      ActionButton,
-      {
-        $variant: variant,
-        onClick: onAction,
-        type: "button"
-      },
-      actionText
-    ),
-    closable && /* @__PURE__ */ React12__default.default.createElement(
-      CloseButton,
-      {
-        onClick: handleClose,
-        type: "button",
-        "aria-label": "Close"
-      },
-      /* @__PURE__ */ React12__default.default.createElement(CloseIconSvg, null)
-    )
-  );
-};
-Toast.displayName = "Toast";
-var ToastContext = React12.createContext(null);
-var ToastWrapper = styled.div`
+// src/Toast/ToastContainer.tsx
+init_styled();
+init_Toast();
+var ToastContext = React3.createContext(null);
+var ToastWrapper2 = exports.styled.div`
   position: fixed;
-  top: 24px;
-  right: 24px;
   z-index: 9999;
   display: flex;
   flex-direction: column;
@@ -1900,14 +2288,50 @@ var ToastWrapper = styled.div`
   > * {
     pointer-events: auto;
   }
+
+  ${({ $placement, theme: theme2 }) => {
+  const offset = theme2.components?.toast?.offset || { vertical: "24px", horizontal: "24px" };
+  const vertical = offset.vertical || "24px";
+  const horizontal = offset.horizontal || "24px";
+  const styles = {
+    "top-right": `
+        top: ${vertical};
+        right: ${horizontal};
+      `,
+    "top-left": `
+        top: ${vertical};
+        left: ${horizontal};
+      `,
+    "top-center": `
+        top: ${vertical};
+        left: 50%;
+        transform: translateX(-50%);
+      `,
+    "bottom-right": `
+        bottom: ${vertical};
+        right: ${horizontal};
+      `,
+    "bottom-left": `
+        bottom: ${vertical};
+        left: ${horizontal};
+      `,
+    "bottom-center": `
+        bottom: ${vertical};
+        left: 50%;
+        transform: translateX(-50%);
+      `
+  };
+  return styles[$placement] || styles["top-right"];
+}}
 `;
 var ToastContainer2 = ({
+  placement = "top-right",
   maxCount = 5,
   defaultDuration = 3e3,
   children
 }) => {
-  const [toasts, setToasts] = React12.useState([]);
-  const showToast = React12.useCallback((props) => {
+  const [toasts, setToasts] = React3.useState([]);
+  const showToast = React3.useCallback((props) => {
     const id = `toast-${Date.now()}-${Math.random()}`;
     const newToast = {
       ...props,
@@ -1920,19 +2344,19 @@ var ToastContainer2 = ({
     });
     return id;
   }, [maxCount, defaultDuration]);
-  const hideToast = React12.useCallback((id) => {
-    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  const hideToast = React3.useCallback((id) => {
+    setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
   }, []);
-  const success = React12.useCallback((message, options) => {
+  const success = React3.useCallback((message, options) => {
     return showToast({ ...options, variant: "success", message });
   }, [showToast]);
-  const info = React12.useCallback((message, options) => {
+  const info = React3.useCallback((message, options) => {
     return showToast({ ...options, variant: "info", message });
   }, [showToast]);
-  const error = React12.useCallback((message, options) => {
+  const error = React3.useCallback((message, options) => {
     return showToast({ ...options, variant: "error", message });
   }, [showToast]);
-  const warn = React12.useCallback((message, options) => {
+  const warn = React3.useCallback((message, options) => {
     return showToast({ ...options, variant: "warn", message });
   }, [showToast]);
   const contextValue = {
@@ -1943,28 +2367,34 @@ var ToastContainer2 = ({
     error,
     warn
   };
-  return /* @__PURE__ */ React12__default.default.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React12__default.default.createElement(ToastWrapper, null, toasts.map((toast) => /* @__PURE__ */ React12__default.default.createElement(
-    Toast,
+  return /* @__PURE__ */ React3__default.default.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React3__default.default.createElement(ToastWrapper2, { $placement: placement }, toasts.map((toast2) => /* @__PURE__ */ React3__default.default.createElement(
+    exports.Toast,
     {
-      key: toast.id,
-      ...toast,
-      onClose: () => hideToast(toast.id)
+      key: toast2.id,
+      ...toast2,
+      onClose: () => hideToast(toast2.id)
     }
   ))));
 };
 var useToast = () => {
-  const context = React12.useContext(ToastContext);
+  const context = React3.useContext(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within ToastContainer");
   }
   return context;
 };
 ToastContainer2.displayName = "ToastContainer";
-var TabContainer = styled.div`
+
+// src/Toast/index.ts
+init_toastManager();
+
+// src/Tabs/Tabs.tsx
+init_styled();
+var TabContainer = exports.styled.div`
   display: flex;
   flex-direction: column;
 `;
-var TabList = styled.div`
+var TabList = exports.styled.div`
   display: flex;
   align-items: center;
   position: relative;
@@ -1985,7 +2415,7 @@ var TabList = styled.div`
   return "";
 }}
 `;
-var TabItem = styled.button`
+var TabItem = exports.styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2083,11 +2513,11 @@ var Tabs = ({
   className,
   style
 }) => {
-  const [internalActiveKey, setInternalActiveKey] = React12.useState(
+  const [internalActiveKey, setInternalActiveKey] = React3.useState(
     controlledActiveKey ?? defaultActiveKey ?? items[0]?.key ?? ""
   );
   const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey;
-  const handleTabClick = React12.useCallback(
+  const handleTabClick = React3.useCallback(
     (key, disabled) => {
       if (disabled) return;
       if (controlledActiveKey === void 0) {
@@ -2097,7 +2527,7 @@ var Tabs = ({
     },
     [controlledActiveKey, onChange]
   );
-  return /* @__PURE__ */ React12__default.default.createElement(TabContainer, { className, style }, /* @__PURE__ */ React12__default.default.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React12__default.default.createElement(
+  return /* @__PURE__ */ React3__default.default.createElement(TabContainer, { className, style }, /* @__PURE__ */ React3__default.default.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React3__default.default.createElement(
     TabItem,
     {
       key: item.key,
@@ -2111,7 +2541,7 @@ var Tabs = ({
       disabled: item.disabled,
       type: "button"
     },
-    item.icon && /* @__PURE__ */ React12__default.default.createElement("span", null, item.icon),
+    item.icon && /* @__PURE__ */ React3__default.default.createElement("span", null, item.icon),
     item.label
   ))));
 };
@@ -2128,7 +2558,7 @@ var Tooltip = ({
   getPopupContainer,
   ...rest
 }) => {
-  const overlayContent = React12__default.default.useMemo(() => /* @__PURE__ */ React12__default.default.createElement("div", null, content), [content]);
+  const overlayContent = React3__default.default.useMemo(() => /* @__PURE__ */ React3__default.default.createElement("div", null, content), [content]);
   const variantClass = `tooltip-variant-${variant}`;
   const sizeClass = variant === "white" ? `tooltip-size-${size}` : "";
   const combinedClassName = [variantClass, sizeClass, overlayClassName].filter(Boolean).join(" ");
@@ -2141,65 +2571,136 @@ var Tooltip = ({
     ...getPopupContainer && { getPopupContainer },
     ...rest
   };
-  return /* @__PURE__ */ React12__default.default.createElement(RcTooltip__default.default, { ...tooltipProps }, children);
+  return /* @__PURE__ */ React3__default.default.createElement(RcTooltip__default.default, { ...tooltipProps, prefixCls: "od-tooltip" }, children);
 };
 Tooltip.displayName = "Tooltip";
-var theme = getGlobalTheme();
-var paddingDistance = "5px";
-var positionDistance = "0";
+
+// src/Tooltip/globalStyle.ts
+init_context();
+var theme = exports.getGlobalTheme();
+var arrowSize = 5;
+var paddingDistance = `${arrowSize}px`;
+var arrowDistance = `${arrowSize}px`;
 var TooltipGlobalStyles = baseStyled.createGlobalStyle`
-  .rc-tooltip {
+  /* Base tooltip container */
+  .od-tooltip {
+    position: absolute;
+    z-index: 1070;
+    display: block;
+    visibility: visible;
+    font-size: 12px;
+    line-height: 1.5;
     opacity: 1;
   }
 
-  .rc-tooltip-hidden {
+  .od-tooltip-hidden {
     display: none;
   }
 
-  .rc-tooltip-placement-top,
-  .rc-tooltip-placement-topLeft,
-  .rc-tooltip-placement-topRight {
+  /* Tooltip content wrapper */
+  .od-tooltip-content {
+    position: relative;
+  }
+
+  /* Tooltip inner content */
+  .od-tooltip-inner {
+    padding: 6px 8px;
+    text-align: left;
+    text-decoration: none;
+    word-wrap: break-word;
+    min-height: unset;
+  }
+
+  /* Tooltip arrow base */
+  .od-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  .od-tooltip-placement-top,
+  .od-tooltip-placement-topLeft,
+  .od-tooltip-placement-topRight {
     padding-bottom: ${paddingDistance};
   }
 
-  .rc-tooltip-placement-right,
-  .rc-tooltip-placement-rightTop,
-  .rc-tooltip-placement-rightBottom {
+  .od-tooltip-placement-right,
+  .od-tooltip-placement-rightTop,
+  .od-tooltip-placement-rightBottom {
     padding-left: ${paddingDistance};
   }
 
-  .rc-tooltip-placement-bottom,
-  .rc-tooltip-placement-bottomLeft,
-  .rc-tooltip-placement-bottomRight {
+  .od-tooltip-placement-bottom,
+  .od-tooltip-placement-bottomLeft,
+  .od-tooltip-placement-bottomRight {
     padding-top: ${paddingDistance};
   }
 
-  .rc-tooltip-placement-left,
-  .rc-tooltip-placement-leftTop,
-  .rc-tooltip-placement-leftBottom {
+  .od-tooltip-placement-left,
+  .od-tooltip-placement-leftTop,
+  .od-tooltip-placement-leftBottom {
     padding-right: ${paddingDistance};
   }
 
-  .rc-tooltip-inner {
-    word-wrap: break-word;
-    min-height: unset;
+  /* Placement specific adjustments - position arrows close to content edge */
+  .od-tooltip-placement-top .od-tooltip-arrow,
+  .od-tooltip-placement-topLeft .od-tooltip-arrow,
+  .od-tooltip-placement-topRight .od-tooltip-arrow {
+    bottom: ${arrowDistance};
+    margin-left: -${arrowSize}px;
   }
 
-  .rc-tooltip-arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
+  .od-tooltip-placement-right .od-tooltip-arrow,
+  .od-tooltip-placement-rightTop .od-tooltip-arrow,
+  .od-tooltip-placement-rightBottom .od-tooltip-arrow {
+    left: ${arrowDistance};
+    margin-top: -${arrowSize}px;
+  }
+
+  .od-tooltip-placement-left .od-tooltip-arrow,
+  .od-tooltip-placement-leftTop .od-tooltip-arrow,
+  .od-tooltip-placement-leftBottom .od-tooltip-arrow {
+    right: ${arrowDistance};
+    margin-top: -${arrowSize}px;
+  }
+
+  .od-tooltip-placement-bottom .od-tooltip-arrow,
+  .od-tooltip-placement-bottomLeft .od-tooltip-arrow,
+  .od-tooltip-placement-bottomRight .od-tooltip-arrow {
+    top: ${arrowDistance};
+    margin-left: -${arrowSize}px;
+  }
+
+  /* Alignment adjustments */
+  .od-tooltip-placement-topLeft .od-tooltip-arrow,
+  .od-tooltip-placement-bottomLeft .od-tooltip-arrow {
+    left: 15%;
+  }
+
+  .od-tooltip-placement-topRight .od-tooltip-arrow,
+  .od-tooltip-placement-bottomRight .od-tooltip-arrow {
+    right: 15%;
+  }
+
+  .od-tooltip-placement-rightTop .od-tooltip-arrow,
+  .od-tooltip-placement-leftTop .od-tooltip-arrow {
+    top: 15%;
+  }
+
+  .od-tooltip-placement-rightBottom .od-tooltip-arrow,
+  .od-tooltip-placement-leftBottom .od-tooltip-arrow {
+    bottom: 15%;
   }
 
-  .rc-tooltip.rc-tooltip-zoom-enter,
-  .rc-tooltip.rc-tooltip-zoom-leave {
+  .od-tooltip.od-tooltip-zoom-enter,
+  .od-tooltip.od-tooltip-zoom-leave {
     display: block;
   }
 
-  .rc-tooltip-zoom-enter,
-  .rc-tooltip-zoom-appear {
+  .od-tooltip-zoom-enter,
+  .od-tooltip-zoom-appear {
     opacity: 0;
     animation-duration: 0.3s;
     animation-fill-mode: both;
@@ -2207,20 +2708,20 @@ var TooltipGlobalStyles = baseStyled.createGlobalStyle`
     animation-play-state: paused;
   }
 
-  .rc-tooltip-zoom-leave {
+  .od-tooltip-zoom-leave {
     animation-duration: 0.3s;
     animation-fill-mode: both;
     animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
     animation-play-state: paused;
   }
 
-  .rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
-  .rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
+  .od-tooltip-zoom-enter.od-tooltip-zoom-enter-active,
+  .od-tooltip-zoom-appear.od-tooltip-zoom-appear-active {
     animation-name: rcToolTipZoomIn;
     animation-play-state: running;
   }
 
-  .rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
+  .od-tooltip-zoom-leave.od-tooltip-zoom-leave-active {
     animation-name: rcToolTipZoomOut;
     animation-play-state: running;
   }
@@ -2252,7 +2753,7 @@ var TooltipGlobalStyles = baseStyled.createGlobalStyle`
   }
 
   /* Black variant */
-  .tooltip-variant-black .rc-tooltip-inner {
+  .tooltip-variant-black .od-tooltip-inner {
     background: ${() => theme.components.tooltip.black.background};
     border: 1px solid ${() => theme.components.tooltip.black.borderColor};
     color: ${() => theme.components.tooltip.black.color};
@@ -2267,44 +2768,44 @@ var TooltipGlobalStyles = baseStyled.createGlobalStyle`
     text-decoration: none;
   }
 
-  .tooltip-variant-black.rc-tooltip-placement-top .rc-tooltip-arrow,
-  .tooltip-variant-black.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
-  .tooltip-variant-black.rc-tooltip-placement-topRight .rc-tooltip-arrow {
-    bottom: ${positionDistance};
-    margin-left: -5px;
-    border-width: 5px 5px 0;
+  .tooltip-variant-black.od-tooltip-placement-top .od-tooltip-arrow,
+  .tooltip-variant-black.od-tooltip-placement-topLeft .od-tooltip-arrow,
+  .tooltip-variant-black.od-tooltip-placement-topRight .od-tooltip-arrow {
+    bottom: ${arrowDistance};
+    margin-left: -${arrowSize}px;
+    border-width: ${arrowSize}px ${arrowSize}px 0;
     border-top-color: ${() => theme.components.tooltip.black.background};
   }
 
-  .tooltip-variant-black.rc-tooltip-placement-right .rc-tooltip-arrow,
-  .tooltip-variant-black.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
-  .tooltip-variant-black.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
-    left: ${positionDistance};
-    margin-top: -5px;
-    border-width: 5px 5px 5px 0;
+  .tooltip-variant-black.od-tooltip-placement-right .od-tooltip-arrow,
+  .tooltip-variant-black.od-tooltip-placement-rightTop .od-tooltip-arrow,
+  .tooltip-variant-black.od-tooltip-placement-rightBottom .od-tooltip-arrow {
+    left: ${arrowDistance};
+    margin-top: -${arrowSize}px;
+    border-width: ${arrowSize}px ${arrowSize}px ${arrowSize}px 0;
     border-right-color: ${() => theme.components.tooltip.black.background};
   }
 
-  .tooltip-variant-black.rc-tooltip-placement-left .rc-tooltip-arrow,
-  .tooltip-variant-black.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
-  .tooltip-variant-black.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
-    right: ${positionDistance};
-    margin-top: -5px;
-    border-width: 5px 0 5px 5px;
+  .tooltip-variant-black.od-tooltip-placement-left .od-tooltip-arrow,
+  .tooltip-variant-black.od-tooltip-placement-leftTop .od-tooltip-arrow,
+  .tooltip-variant-black.od-tooltip-placement-leftBottom .od-tooltip-arrow {
+    right: ${arrowDistance};
+    margin-top: -${arrowSize}px;
+    border-width: ${arrowSize}px 0 ${arrowSize}px ${arrowSize}px;
     border-left-color: ${() => theme.components.tooltip.black.background};
   }
 
-  .tooltip-variant-black.rc-tooltip-placement-bottom .rc-tooltip-arrow,
-  .tooltip-variant-black.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
-  .tooltip-variant-black.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
-    top: ${positionDistance};
-    margin-left: -5px;
-    border-width: 0 5px 5px;
+  .tooltip-variant-black.od-tooltip-placement-bottom .od-tooltip-arrow,
+  .tooltip-variant-black.od-tooltip-placement-bottomLeft .od-tooltip-arrow,
+  .tooltip-variant-black.od-tooltip-placement-bottomRight .od-tooltip-arrow {
+    top: ${arrowDistance};
+    margin-left: -${arrowSize}px;
+    border-width: 0 ${arrowSize}px ${arrowSize}px;
     border-bottom-color: ${() => theme.components.tooltip.black.background};
   }
 
   /* White variant - small size */
-  .tooltip-variant-white.tooltip-size-small .rc-tooltip-inner {
+  .tooltip-variant-white.tooltip-size-small .od-tooltip-inner {
     background: ${() => theme.components.tooltip.white.small.background};
     border: 1px solid ${() => theme.components.tooltip.white.small.borderColor};
     color: ${() => theme.components.tooltip.white.small.color};
@@ -2318,44 +2819,44 @@ var TooltipGlobalStyles = baseStyled.createGlobalStyle`
     text-decoration: none;
   }
 
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-top .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-topRight .rc-tooltip-arrow {
-    bottom: ${positionDistance};
-    margin-left: -5px;
-    border-width: 5px 5px 0;
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-top .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-topLeft .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-topRight .od-tooltip-arrow {
+    bottom: ${arrowDistance};
+    margin-left: -${arrowSize}px;
+    border-width: ${arrowSize}px ${arrowSize}px 0;
     border-top-color: ${() => theme.components.tooltip.white.small.background};
   }
 
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-right .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
-    left: ${positionDistance};
-    margin-top: -5px;
-    border-width: 5px 5px 5px 0;
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-right .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-rightTop .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-rightBottom .od-tooltip-arrow {
+    left: ${arrowDistance};
+    margin-top: -${arrowSize}px;
+    border-width: ${arrowSize}px ${arrowSize}px ${arrowSize}px 0;
     border-right-color: ${() => theme.components.tooltip.white.small.background};
   }
 
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-left .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
-    right: ${positionDistance};
-    margin-top: -5px;
-    border-width: 5px 0 5px 5px;
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-left .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-leftTop .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-leftBottom .od-tooltip-arrow {
+    right: ${arrowDistance};
+    margin-top: -${arrowSize}px;
+    border-width: ${arrowSize}px 0 ${arrowSize}px ${arrowSize}px;
     border-left-color: ${() => theme.components.tooltip.white.small.background};
   }
 
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-bottom .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
-    top: ${positionDistance};
-    margin-left: -5px;
-    border-width: 0 5px 5px;
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-bottom .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-bottomLeft .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.od-tooltip-placement-bottomRight .od-tooltip-arrow {
+    top: ${arrowDistance};
+    margin-left: -${arrowSize}px;
+    border-width: 0 ${arrowSize}px ${arrowSize}px;
     border-bottom-color: ${() => theme.components.tooltip.white.small.background};
   }
 
   /* White variant - large size */
-  .tooltip-variant-white.tooltip-size-large .rc-tooltip-inner {
+  .tooltip-variant-white.tooltip-size-large .od-tooltip-inner {
     background: ${() => theme.components.tooltip.white.large.background};
     border: 1px solid ${() => theme.components.tooltip.white.large.borderColor};
     color: ${() => theme.components.tooltip.white.large.color};
@@ -2369,43 +2870,46 @@ var TooltipGlobalStyles = baseStyled.createGlobalStyle`
     text-decoration: none;
   }
 
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-top .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-topRight .rc-tooltip-arrow {
-    bottom: ${positionDistance};
-    margin-left: -5px;
-    border-width: 5px 5px 0;
-    border-top-color: ${() => theme.components.tooltip.white.large.background};
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-top .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-topLeft .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-topRight .od-tooltip-arrow {
+    bottom: ${arrowDistance};
+    margin-left: -${arrowSize}px;
+    border-width: ${arrowSize}px ${arrowSize}px 0;
+    border-top-color: ${() => theme.components.tooltip.white.large.borderColor};
   }
 
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-right .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
-    left: ${positionDistance};
-    margin-top: -5px;
-    border-width: 5px 5px 5px 0;
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-right .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-rightTop .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-rightBottom .od-tooltip-arrow {
+    left: ${arrowDistance};
+    margin-top: -${arrowSize}px;
+    border-width: ${arrowSize}px ${arrowSize}px ${arrowSize}px 0;
     border-right-color: ${() => theme.components.tooltip.white.large.background};
   }
 
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-left .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
-    right: ${positionDistance};
-    margin-top: -5px;
-    border-width: 5px 0 5px 5px;
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-left .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-leftTop .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-leftBottom .od-tooltip-arrow {
+    right: ${arrowDistance};
+    margin-top: -${arrowSize}px;
+    border-width: ${arrowSize}px 0 ${arrowSize}px ${arrowSize}px;
     border-left-color: ${() => theme.components.tooltip.white.large.background};
   }
 
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-bottom .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
-  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
-    top: ${positionDistance};
-    margin-left: -5px;
-    border-width: 0 5px 5px;
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-bottom .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-bottomLeft .od-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.od-tooltip-placement-bottomRight .od-tooltip-arrow {
+    top: ${arrowDistance};
+    margin-left: -${arrowSize}px;
+    border-width: 0 ${arrowSize}px ${arrowSize}px;
     border-bottom-color: ${() => theme.components.tooltip.white.large.background};
   }
 `;
-var ToolbarButtonContainer = styled.div`
+
+// src/ToolbarButton/ToolbarButton.tsx
+init_styled();
+var ToolbarButtonContainer = exports.styled.div`
   display: inline-flex;
   align-items: center;
   border: 1px solid;
@@ -2449,7 +2953,7 @@ var ToolbarButtonContainer = styled.div`
     `;
 }}
 `;
-var MainButton = styled.button`
+var MainButton = exports.styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2492,7 +2996,7 @@ var MainButton = styled.button`
     `;
 }}
 `;
-var IconWrapper4 = styled.span`
+var IconWrapper4 = exports.styled.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2521,7 +3025,7 @@ var IconWrapper4 = styled.span`
     display: block;
   }
 `;
-var LabelText = styled.span`
+var LabelText = exports.styled.span`
   font-family: 'PingFang SC', sans-serif;
   white-space: nowrap;
 
@@ -2544,7 +3048,7 @@ var LabelText = styled.span`
   `;
 }}
 `;
-var DropdownButton = styled.button`
+var DropdownButton = exports.styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2582,7 +3086,7 @@ var DropdownButton = styled.button`
     `;
 }}
 `;
-var DropdownArrow = styled.span`
+var DropdownArrow = exports.styled.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2608,7 +3112,7 @@ var DropdownArrow = styled.span`
   svg {
   }
 `;
-var Divider = styled.div`
+var Divider = exports.styled.div`
   width: 1px;
   transition: background-color 0.15s ease;
 
@@ -2636,7 +3140,7 @@ var Divider = styled.div`
     `;
 }}
 `;
-var ArrowIcon = () => /* @__PURE__ */ React12__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React12__default.default.createElement(
+var ArrowIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3__default.default.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",
@@ -2666,7 +3170,7 @@ var ToolbarButton = ({
     onDropdownClick?.(e);
   };
   if (!splitDropdown && hasDropdown) {
-    return /* @__PURE__ */ React12__default.default.createElement(
+    return /* @__PURE__ */ React3__default.default.createElement(
       ToolbarButtonContainer,
       {
         className,
@@ -2674,7 +3178,7 @@ var ToolbarButton = ({
         $disabled: disabled,
         $active: active
       },
-      /* @__PURE__ */ React12__default.default.createElement(
+      /* @__PURE__ */ React3__default.default.createElement(
         MainButton,
         {
           $disabled: disabled,
@@ -2683,14 +3187,14 @@ var ToolbarButton = ({
           onClick: handleMainClick,
           disabled
         },
-        icon && /* @__PURE__ */ React12__default.default.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React12__default.default.createElement(LabelText, { $disabled: disabled }, label),
-        /* @__PURE__ */ React12__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React12__default.default.createElement(ArrowIcon, null))
+        icon && /* @__PURE__ */ React3__default.default.createElement(IconWrapper4, { $disabled: disabled }, icon),
+        label && /* @__PURE__ */ React3__default.default.createElement(LabelText, { $disabled: disabled }, label),
+        /* @__PURE__ */ React3__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(ArrowIcon, null))
       )
     );
   }
   if (splitDropdown && hasDropdown) {
-    return /* @__PURE__ */ React12__default.default.createElement(
+    return /* @__PURE__ */ React3__default.default.createElement(
       ToolbarButtonContainer,
       {
         className,
@@ -2698,7 +3202,7 @@ var ToolbarButton = ({
         $disabled: disabled,
         $active: active
       },
-      /* @__PURE__ */ React12__default.default.createElement(
+      /* @__PURE__ */ React3__default.default.createElement(
         MainButton,
         {
           $disabled: disabled,
@@ -2707,11 +3211,11 @@ var ToolbarButton = ({
           onClick: handleMainClick,
           disabled
         },
-        icon && /* @__PURE__ */ React12__default.default.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React12__default.default.createElement(LabelText, { $disabled: disabled }, label)
+        icon && /* @__PURE__ */ React3__default.default.createElement(IconWrapper4, { $disabled: disabled }, icon),
+        label && /* @__PURE__ */ React3__default.default.createElement(LabelText, { $disabled: disabled }, label)
       ),
-      /* @__PURE__ */ React12__default.default.createElement(Divider, { $disabled: disabled, $active: active }),
-      /* @__PURE__ */ React12__default.default.createElement(
+      /* @__PURE__ */ React3__default.default.createElement(Divider, { $disabled: disabled, $active: active }),
+      /* @__PURE__ */ React3__default.default.createElement(
         DropdownButton,
         {
           $disabled: disabled,
@@ -2720,11 +3224,11 @@ var ToolbarButton = ({
           onClick: handleDropdownClick,
           disabled
         },
-        /* @__PURE__ */ React12__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React12__default.default.createElement(ArrowIcon, null))
+        /* @__PURE__ */ React3__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(ArrowIcon, null))
       )
     );
   }
-  return /* @__PURE__ */ React12__default.default.createElement(
+  return /* @__PURE__ */ React3__default.default.createElement(
     ToolbarButtonContainer,
     {
       className,
@@ -2732,7 +3236,7 @@ var ToolbarButton = ({
       $disabled: disabled,
       $active: active
     },
-    /* @__PURE__ */ React12__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement(
       MainButton,
       {
         $disabled: disabled,
@@ -2741,22 +3245,38 @@ var ToolbarButton = ({
         onClick: handleMainClick,
         disabled
       },
-      icon && /* @__PURE__ */ React12__default.default.createElement(IconWrapper4, { $disabled: disabled }, icon),
-      label && /* @__PURE__ */ React12__default.default.createElement(LabelText, { $disabled: disabled }, label)
+      icon && /* @__PURE__ */ React3__default.default.createElement(IconWrapper4, { $disabled: disabled }, icon),
+      label && /* @__PURE__ */ React3__default.default.createElement(LabelText, { $disabled: disabled }, label)
     )
   );
 };
 ToolbarButton.displayName = "ToolbarButton";
-var UIConfigContext = React12.createContext(null);
+
+// src/UIConfigProvider/UIConfigProvider.tsx
+init_IconProvider();
+init_context();
+var UIConfigContext = React3.createContext(null);
 var UIConfigProvider = ({ config, children }) => {
-  registerGlobalContext({ theme: config.theme });
-  const { icons = {}, toast = {} } = config;
+  const { icons = {}, toast: toast2 = {} } = config;
+  const renderFunction = (element, container) => {
+    if ("createRoot" in ReactDOM__default.default) {
+      const { createRoot } = ReactDOM__default.default;
+      const root = createRoot(container);
+      root.render(element);
+    } else {
+      ReactDOM__default.default.render(element, container);
+    }
+  };
+  registerGlobalContext({
+    theme: config.theme,
+    render: renderFunction
+  });
   const toastConfig = {
-    maxCount: toast.maxCount ?? 5,
-    defaultDuration: toast.defaultDuration ?? 3e3
+    maxCount: toast2.maxCount ?? 5,
+    defaultDuration: toast2.defaultDuration ?? 3e3
   };
   const TooltipStyles = TooltipGlobalStyles;
-  return /* @__PURE__ */ React12__default.default.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React12__default.default.createElement(TooltipStyles, null), /* @__PURE__ */ React12__default.default.createElement(IconProvider, { icons }, /* @__PURE__ */ React12__default.default.createElement(
+  return /* @__PURE__ */ React3__default.default.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React3__default.default.createElement(TooltipStyles, null), /* @__PURE__ */ React3__default.default.createElement(exports.IconProvider, { icons }, /* @__PURE__ */ React3__default.default.createElement(
     ToastContainer2,
     {
       maxCount: toastConfig.maxCount,
@@ -2766,7 +3286,7 @@ var UIConfigProvider = ({ config, children }) => {
   )));
 };
 var useUIConfig = () => {
-  const context = React12.useContext(UIConfigContext);
+  const context = React3.useContext(UIConfigContext);
   if (!context) {
     throw new Error("useUIConfig must be used within UIConfigProvider");
   }
@@ -2841,28 +3361,22 @@ var mergeUIConfig = (baseConfig, ...configs) => {
   return merged;
 };
 
-exports.Button = Button;
+// src/index.ts
+init_styled();
+init_context();
+
 exports.Checkbox = Checkbox;
-exports.Icon = Icon;
-exports.IconProvider = IconProvider;
 exports.Input = Input;
-exports.NumberInput = NumberInput;
 exports.Radio = Radio;
 exports.SearchInput = SearchInput;
-exports.Slider = Slider;
-exports.SpinButton = SpinButton;
 exports.Switch = Switch;
 exports.Tabs = Tabs;
-exports.Toast = Toast;
 exports.ToastContainer = ToastContainer2;
 exports.ToolbarButton = ToolbarButton;
 exports.Tooltip = Tooltip;
 exports.UIConfigProvider = UIConfigProvider;
 exports.createUIConfig = createUIConfig;
-exports.getGlobalTheme = getGlobalTheme;
 exports.mergeUIConfig = mergeUIConfig;
-exports.styled = styled;
-exports.useIconRegistry = useIconRegistry;
 exports.useToast = useToast;
 exports.useUIConfig = useUIConfig;
 //# sourceMappingURL=index.js.map