@officesdk/design 0.1.6 → 0.1.8

package/dist/components/esm/index.js

@@ -1,62 +1,590 @@
-import React12, { forwardRef, useState, createContext, useRef, useCallback, useEffect, useContext } from 'react';
+import React3, { forwardRef, useState, createContext, useEffect, useRef, useCallback, useContext } from 'react';
 import baseStyled, { createGlobalStyle } from 'styled-components';
 import RcTooltip from 'rc-tooltip';
 import 'rc-tooltip/assets/bootstrap.css';
+import ReactDOM from 'react-dom';
 
-// 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, IconProvider, useIconRegistry;
+var init_IconProvider = __esm({
+  "src/Icon/IconProvider.tsx"() {
+    IconContext = createContext(null);
+    IconProvider = ({
+      icons,
+      children
+    }) => {
+      return /* @__PURE__ */ React3.createElement(IconContext.Provider, { value: icons }, children);
+    };
+    useIconRegistry = () => {
+      return useContext(IconContext);
+    };
+    IconProvider.displayName = "IconProvider";
   }
-};
+});
+var IconContainer, Icon;
+var init_Icon = __esm({
+  "src/Icon/Icon.tsx"() {
+    init_styled();
+    init_IconProvider();
+    IconContainer = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ $size }) => typeof $size === "number" ? `${$size}px` : $size};
+  height: ${({ $size }) => typeof $size === "number" ? `${$size}px` : $size};
+  color: ${({ $color }) => $color};
+  flex-shrink: 0;
+  line-height: 1;
 
-// src/utils/styled.ts
-var wrapWithTheme = (component) => {
-  if (component && typeof component === "object") {
-    component.defaultProps = {
-      ...component.defaultProps,
-      get theme() {
-        return getGlobalTheme();
+  svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+    Icon = ({
+      name,
+      src,
+      children,
+      size = 16,
+      color = "currentColor",
+      alt = "icon",
+      className,
+      style,
+      onClick
+    }) => {
+      const registry = useIconRegistry();
+      let iconElement = children;
+      if (!iconElement && src) {
+        iconElement = /* @__PURE__ */ React3.createElement(
+          "img",
+          {
+            src,
+            alt,
+            style: { width: "100%", height: "100%", display: "block" }
+          }
+        );
+      }
+      if (!iconElement && name && registry) {
+        const IconComponent = registry[name];
+        if (IconComponent) {
+          iconElement = /* @__PURE__ */ React3.createElement(IconComponent, null);
+        } else if (process.env.NODE_ENV !== "production") {
+          console.warn(`Icon "${name}" not found in registry. Make sure IconProvider is set up.`);
+        }
+      }
+      if (!iconElement) {
+        if (process.env.NODE_ENV !== "production" && !children && !name && !src) {
+          console.warn('Icon: one of "name", "src", or "children" must be provided');
+        }
+        return null;
       }
+      return /* @__PURE__ */ React3.createElement(
+        IconContainer,
+        {
+          $size: size,
+          $color: color,
+          className,
+          style,
+          onClick
+        },
+        iconElement
+      );
     };
+    Icon.displayName = "Icon";
   }
-  return component;
-};
-var styledFunction = (tag) => {
-  return wrapWithTheme(baseStyled(tag));
-};
-var styledWithBase = Object.assign(styledFunction, baseStyled);
-Object.keys(baseStyled).forEach((key) => {
-  const originalMethod = baseStyled[key];
-  if (typeof originalMethod === "function") {
-    styledWithBase[key] = (...args) => {
-      const component = originalMethod(...args);
-      return wrapWithTheme(component);
+});
+
+// src/Icon/index.ts
+var init_Icon2 = __esm({
+  "src/Icon/index.ts"() {
+    init_Icon();
+    init_IconProvider();
+  }
+});
+var ToastContainer, IconWrapper, ContentWrapper, Message, Description, ActionGroup, SuccessIcon, InfoIcon, ErrorIcon, WarnIcon, CloseIconSvg, Toast;
+var init_Toast = __esm({
+  "src/Toast/Toast.tsx"() {
+    init_styled();
+    init_Icon2();
+    init_Button2();
+    init_context();
+    ToastContainer = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid;
+  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
+
+  ${({ theme: 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 = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ $hasDescription }) => {
+      const size = $hasDescription ? "28px" : "18px";
+      return `
+      width: ${size};
+      height: ${size};
+    `;
+    }}
+`;
+    ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: ${({ $hasDescription }) => $hasDescription ? "column" : "row"};
+  align-items: ${({ $hasDescription }) => $hasDescription ? "flex-start" : "center"};
+  gap: ${({ $hasDescription }) => $hasDescription ? "2px" : "0"};
+  flex: 1;
+`;
+    Message = styled.span`
+  font-size: 13px;
+  line-height: 20px;
+  color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["100"]};
+`;
+    Description = styled.span`
+  font-size: 12px;
+  line-height: 20px;
+  color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["60"]};
+`;
+    ActionGroup = styled.div`
+  display: flex;
+  gap: 2px;
+  align-items: center;
+`;
+    SuccessIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React3.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+    InfoIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#5ba0e7" }), /* @__PURE__ */ React3.createElement("path", { d: "M10 9V14M10 6H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+    ErrorIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#e95555" }), /* @__PURE__ */ React3.createElement("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+    WarnIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#ebe361" }), /* @__PURE__ */ React3.createElement("path", { d: "M10 6V11M10 14H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
+    CloseIconSvg = () => /* @__PURE__ */ React3.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("path", { d: "M9 3L3 9M3 3L9 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }));
+    Toast = ({
+      variant = "info",
+      message,
+      description,
+      mainButtonText,
+      onMainButtonClick,
+      secondaryButtonText,
+      onSecondaryButtonClick,
+      closable = false,
+      onClose,
+      duration = 0,
+      icon,
+      showIcon = true,
+      className,
+      style
+    }) => {
+      const [visible, setVisible] = useState(true);
+      useEffect(() => {
+        if (duration > 0) {
+          const timer = setTimeout(() => {
+            setVisible(false);
+            onClose?.();
+          }, duration);
+          return () => clearTimeout(timer);
+        }
+      }, [duration, onClose]);
+      const handleClose = () => {
+        setVisible(false);
+        onClose?.();
+      };
+      if (!visible) {
+        return null;
+      }
+      const getIconElement = () => {
+        if (icon) {
+          return icon;
+        }
+        const theme2 = getGlobalTheme();
+        const themeIconUrl = theme2?.components?.toast?.[variant]?.icon?.url;
+        if (themeIconUrl) {
+          return /* @__PURE__ */ React3.createElement(Icon, { src: themeIconUrl });
+        }
+        const defaultIcons = {
+          success: /* @__PURE__ */ React3.createElement(SuccessIcon, null),
+          info: /* @__PURE__ */ React3.createElement(InfoIcon, null),
+          error: /* @__PURE__ */ React3.createElement(ErrorIcon, null),
+          warn: /* @__PURE__ */ React3.createElement(WarnIcon, null)
+        };
+        return defaultIcons[variant];
+      };
+      const iconElement = getIconElement();
+      const hasDescription = !!description;
+      const hasActions = !!(mainButtonText || secondaryButtonText || closable);
+      return /* @__PURE__ */ React3.createElement(
+        ToastContainer,
+        {
+          $variant: variant,
+          className,
+          style,
+          role: "alert",
+          "aria-live": "polite"
+        },
+        showIcon && /* @__PURE__ */ React3.createElement(IconWrapper, { $variant: variant, $hasDescription: hasDescription }, iconElement),
+        /* @__PURE__ */ React3.createElement(ContentWrapper, { $hasDescription: hasDescription }, /* @__PURE__ */ React3.createElement(Message, null, message), description && /* @__PURE__ */ React3.createElement(Description, null, description)),
+        hasActions && /* @__PURE__ */ React3.createElement(ActionGroup, null, mainButtonText && onMainButtonClick && /* @__PURE__ */ React3.createElement(
+          Button,
+          {
+            variant: "text",
+            colorType: "guidance",
+            size: "small",
+            onClick: onMainButtonClick
+          },
+          mainButtonText
+        ), secondaryButtonText && onSecondaryButtonClick && /* @__PURE__ */ React3.createElement(
+          Button,
+          {
+            variant: "text",
+            colorType: "default",
+            size: "small",
+            onClick: onSecondaryButtonClick
+          },
+          secondaryButtonText
+        ), closable && /* @__PURE__ */ React3.createElement(
+          Button,
+          {
+            variant: "icon",
+            colorType: "default",
+            size: "small",
+            onClick: handleClose,
+            "aria-label": "Close",
+            icon: /* @__PURE__ */ React3.createElement(CloseIconSvg, null),
+            iconBordered: false
+          }
+        ))
+      );
     };
+    Toast.displayName = "Toast";
   }
 });
-var styled = styledWithBase;
 
-// src/Button/Button.tsx
-var IconWrapper = styled.span`
+// src/Toast/toastManager.tsx
+var toastManager_exports = {};
+__export(toastManager_exports, {
+  toast: () => toast,
+  toastManager: () => toastManager
+});
+var ToastWrapper, ToastManager, toastManager, toast;
+var init_toastManager = __esm({
+  "src/Toast/toastManager.tsx"() {
+    init_Toast();
+    init_styled();
+    ToastWrapper = styled.div`
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+
+  ${({ $placement, theme: 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.createElement(React3.Fragment, null, this.toasts.map((toast2) => {
+          return /* @__PURE__ */ React3.createElement(ToastWrapper, { key: toast2.id, $placement: toast2.placement || "top-center" }, /* @__PURE__ */ React3.createElement(Toast, { ...toast2, onClose: () => this.hide(toast2.id) }));
+        }));
+        this.renderFunc(element, this.container);
+      }
+      /**
+       * Configure toast container
+       */
+      configure(config) {
+        this.config = { ...this.config, ...config };
+        this.render();
+      }
+      /**
+       * Show a toast
+       */
+      show(props) {
+        this.initialize();
+        const id = `toast-${Date.now()}-${Math.random()}`;
+        const newToast = {
+          ...props,
+          id,
+          duration: props.duration ?? this.config.defaultDuration
+        };
+        this.toasts = [...this.toasts, newToast].slice(-(this.config.maxCount || 5));
+        this.render();
+        return id;
+      }
+      /**
+       * Hide a toast by id
+       */
+      hide(id) {
+        this.toasts = this.toasts.filter((toast2) => toast2.id !== id);
+        this.render();
+      }
+      /**
+       * Hide all toasts
+       */
+      hideAll() {
+        this.toasts = [];
+        this.render();
+      }
+      /**
+       * Show success toast
+       */
+      success(message, options) {
+        return this.show({ ...options, variant: "success", message });
+      }
+      /**
+       * Show info toast
+       */
+      info(message, options) {
+        return this.show({ ...options, variant: "info", message });
+      }
+      /**
+       * Show error toast
+       */
+      error(message, options) {
+        return this.show({ ...options, variant: "error", message });
+      }
+      /**
+       * Show warning toast
+       */
+      warn(message, options) {
+        return this.show({ ...options, variant: "warn", message });
+      }
+      /**
+       * Destroy the toast container
+       */
+      destroy() {
+        if (this.container) {
+          if (this.renderFunc) {
+            this.renderFunc(/* @__PURE__ */ React3.createElement(React3.Fragment, null), this.container);
+          }
+          if (this.container.parentNode) {
+            this.container.parentNode.removeChild(this.container);
+          }
+          this.container = null;
+        }
+        this.toasts = [];
+      }
+      /**
+       * Get current toasts
+       */
+      getToasts() {
+        return this.toasts;
+      }
+      /**
+       * Clear all toasts (for testing)
+       */
+      clear() {
+        this.toasts = [];
+        this.render();
+      }
+    };
+    toastManager = new ToastManager();
+    toast = {
+      configure: (config) => toastManager.configure(config),
+      show: (props) => toastManager.show(props),
+      hide: (id) => toastManager.hide(id),
+      hideAll: () => toastManager.hideAll(),
+      success: (message, options) => toastManager.success(message, options),
+      info: (message, options) => toastManager.info(message, options),
+      error: (message, options) => toastManager.error(message, options),
+      warn: (message, options) => toastManager.warn(message, options),
+      destroy: () => toastManager.destroy()
+    };
+  }
+});
+
+// src/utils/context.ts
+var context_exports = {};
+__export(context_exports, {
+  getGlobalRenderFunction: () => getGlobalRenderFunction,
+  getGlobalTheme: () => getGlobalTheme,
+  registerGlobalContext: () => registerGlobalContext
+});
+var globalTheme, registerGlobalTheme, getGlobalTheme, globalRenderFunction, getGlobalRenderFunction, registerGlobalContext;
+var init_context = __esm({
+  "src/utils/context.ts"() {
+    globalTheme = {};
+    registerGlobalTheme = (theme2) => {
+      Object.assign(globalTheme, { ...globalTheme, ...theme2 });
+    };
+    getGlobalTheme = () => {
+      return globalTheme;
+    };
+    globalRenderFunction = null;
+    getGlobalRenderFunction = () => globalRenderFunction;
+    registerGlobalContext = (context) => {
+      if (context.theme) {
+        registerGlobalTheme(context.theme);
+      }
+      if (context.render) {
+        globalRenderFunction = context.render;
+        if (typeof window !== "undefined") {
+          setTimeout(() => {
+            Promise.resolve().then(() => (init_toastManager(), toastManager_exports)).then(({ toastManager: toastManager2 }) => {
+              toastManager2.setRenderFunction(context.render);
+            }).catch(() => {
+            });
+          }, 0);
+        }
+      }
+    };
+  }
+});
+var wrapWithTheme, styledFunction, styledWithBase, styled;
+var init_styled = __esm({
+  "src/utils/styled.ts"() {
+    init_context();
+    wrapWithTheme = (component) => {
+      if (component && typeof component === "object") {
+        component.defaultProps = {
+          ...component.defaultProps,
+          get theme() {
+            return getGlobalTheme();
+          }
+        };
+      }
+      return component;
+    };
+    styledFunction = (tag) => {
+      return wrapWithTheme(baseStyled(tag));
+    };
+    styledWithBase = Object.assign(styledFunction, baseStyled);
+    Object.keys(baseStyled).forEach((key) => {
+      const originalMethod = baseStyled[key];
+      if (typeof originalMethod === "function") {
+        styledWithBase[key] = (...args) => {
+          const component = originalMethod(...args);
+          return wrapWithTheme(component);
+        };
+      }
+    });
+    styled = styledWithBase;
+  }
+});
+var IconWrapper2, TextWrapper, IconOnlyWrapper, StyledButton, Button;
+var init_Button = __esm({
+  "src/Button/Button.tsx"() {
+    init_styled();
+    init_Icon2();
+    IconWrapper2 = styled.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ $size, $position, theme: theme2 }) => {
-  const sizeConfig = theme2.components.button[$size || "medium"];
-  const marginSide = $position === "before" ? "margin-right" : "margin-left";
-  return `
+  ${({ $size, $iconPlacement, theme: 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};
@@ -67,9 +595,39 @@ var IconWrapper = styled.span`
         display: block;
       }
     `;
-}}
+    }}
+`;
+    TextWrapper = styled.span`
+  ${({ $size, theme: theme2 }) => {
+      const buttonConfig = theme2.components.button[$size || "medium"];
+      const sizeConfig = buttonConfig?.withIcon || buttonConfig;
+      return `
+      padding: ${sizeConfig.textPadding || "0"};
+    `;
+    }}
+`;
+    IconOnlyWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ $size, theme: 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 = styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -79,31 +637,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};
@@ -131,17 +690,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};
@@ -170,40 +729,46 @@ var StyledButton = styled.button`
         cursor: not-allowed;
       }
     `;
-}}
+    }}
 `;
-var Button = ({
-  variant = "solid",
-  colorType = "default",
-  size = "medium",
-  disabled = false,
-  loading = false,
-  fullWidth = false,
-  iconBefore,
-  iconAfter,
-  iconBordered = false,
-  children,
-  ...rest
-}) => {
-  const isIconOnly = variant === "icon" || !children && !!(iconBefore || iconAfter);
-  const iconOnlyContent = iconBefore || iconAfter;
-  return /* @__PURE__ */ React12.createElement(
-    StyledButton,
-    {
-      $variant: variant,
-      $colorType: colorType,
-      $size: size,
-      $fullWidth: fullWidth,
-      $isIconOnly: isIconOnly,
-      $iconBordered: iconBordered,
-      disabled: disabled || loading,
+    Button = ({
+      variant = "solid",
+      colorType = "default",
+      size = "medium",
+      disabled = false,
+      loading = false,
+      fullWidth = false,
+      icon,
+      iconPlacement = "before",
+      iconBordered = false,
+      children,
       ...rest
-    },
-    loading ? /* @__PURE__ */ React12.createElement(React12.Fragment, null, "Loading...") : isIconOnly ? iconOnlyContent : /* @__PURE__ */ React12.createElement(React12.Fragment, null, iconBefore && /* @__PURE__ */ React12.createElement(IconWrapper, { $size: size, $position: "before" }, iconBefore), children, iconAfter && /* @__PURE__ */ React12.createElement(IconWrapper, { $size: size, $position: "after" }, iconAfter))
-  );
-};
-Button.displayName = "Button";
-var SliderContainer = styled.div`
+    }) => {
+      return /* @__PURE__ */ React3.createElement(
+        StyledButton,
+        {
+          $variant: variant,
+          $colorType: colorType,
+          $size: size,
+          $fullWidth: fullWidth,
+          $iconBordered: iconBordered,
+          disabled: disabled || loading,
+          ...rest
+        },
+        loading ? /* @__PURE__ */ React3.createElement(TextWrapper, { $size: size }, "Loading...") : variant === "icon" ? (
+          // Icon variant: render icon with onlyIcon wrapper (uses onlyIcon config)
+          /* @__PURE__ */ React3.createElement(IconOnlyWrapper, { $size: size }, typeof icon === "string" ? /* @__PURE__ */ React3.createElement(Icon, { src: icon }) : icon || children)
+        ) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, icon && iconPlacement === "before" && /* @__PURE__ */ React3.createElement(IconWrapper2, { $size: size, $iconPlacement: "before" }, typeof icon === "string" ? /* @__PURE__ */ React3.createElement(Icon, { src: icon }) : icon), /* @__PURE__ */ React3.createElement(TextWrapper, { $size: size }, children), icon && iconPlacement === "after" && /* @__PURE__ */ React3.createElement(IconWrapper2, { $size: size, $iconPlacement: "after" }, typeof icon === "string" ? /* @__PURE__ */ React3.createElement(Icon, { src: icon }) : icon))
+      );
+    };
+    Button.displayName = "Button";
+  }
+});
+var SliderContainer, SliderTrack, SliderFill, SliderThumb, Slider;
+var init_Slider = __esm({
+  "src/Slider/Slider.tsx"() {
+    init_styled();
+    SliderContainer = styled.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -212,7 +777,7 @@ var SliderContainer = styled.div`
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   user-select: none;
 `;
-var SliderTrack = styled.div`
+    SliderTrack = styled.div`
   position: absolute;
   left: 0;
   right: 0;
@@ -222,7 +787,7 @@ var SliderTrack = styled.div`
   top: 50%;
   transform: translateY(-50%);
 `;
-var SliderFill = styled.div`
+    SliderFill = styled.div`
   position: absolute;
   left: 0;
   height: 2px;
@@ -232,7 +797,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 = styled.div`
   position: absolute;
   width: 10px;
   height: 10px;
@@ -256,131 +821,144 @@ var SliderThumb = styled.div`
     }
   `}
 `;
-var Slider = ({
-  value: controlledValue,
-  defaultValue = 0,
-  min = 0,
-  max = 100,
-  step = 1,
-  disabled = false,
-  onChange,
-  onDragStart,
-  onDragEnd,
-  className,
-  style
-}) => {
-  const [internalValue, setInternalValue] = useState(
-    controlledValue ?? defaultValue
-  );
-  const [isDragging, setIsDragging] = useState(false);
-  const containerRef = useRef(null);
-  const value = controlledValue !== void 0 ? controlledValue : internalValue;
-  const percentage = (value - min) / (max - min) * 100;
-  const updateValue = useCallback(
-    (clientX) => {
-      if (!containerRef.current || disabled) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const offsetX = clientX - rect.left;
-      const newPercentage = Math.max(0, Math.min(100, offsetX / rect.width * 100));
-      const rawValue = newPercentage / 100 * (max - min) + min;
-      const steppedValue = Math.round(rawValue / step) * step;
-      const clampedValue = Math.max(min, Math.min(max, steppedValue));
-      if (controlledValue === void 0) {
-        setInternalValue(clampedValue);
-      }
-      onChange?.(clampedValue);
-    },
-    [min, max, step, disabled, controlledValue, onChange]
-  );
-  const handleMouseDown = useCallback(
-    (e) => {
-      if (disabled) return;
-      e.preventDefault();
-      setIsDragging(true);
-      onDragStart?.();
-      updateValue(e.clientX);
-    },
-    [disabled, onDragStart, updateValue]
-  );
-  useEffect(() => {
-    if (!isDragging) return;
-    const handleMouseMove = (e) => {
-      updateValue(e.clientX);
-    };
-    const handleMouseUp = () => {
-      setIsDragging(false);
-      onDragEnd?.();
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, updateValue, onDragEnd]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (disabled) return;
-      let newValue = value;
-      switch (e.key) {
-        case "ArrowLeft":
-        case "ArrowDown":
-          e.preventDefault();
-          newValue = Math.max(min, value - step);
-          break;
-        case "ArrowRight":
-        case "ArrowUp":
-          e.preventDefault();
-          newValue = Math.min(max, value + step);
-          break;
-        case "Home":
-          e.preventDefault();
-          newValue = min;
-          break;
-        case "End":
-          e.preventDefault();
-          newValue = max;
-          break;
-        default:
-          return;
-      }
-      if (controlledValue === void 0) {
-        setInternalValue(newValue);
-      }
-      onChange?.(newValue);
-    },
-    [disabled, value, min, max, step, controlledValue, onChange]
-  );
-  return /* @__PURE__ */ React12.createElement(
-    SliderContainer,
-    {
-      ref: containerRef,
-      $disabled: disabled,
+    Slider = ({
+      value: controlledValue,
+      defaultValue = 0,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      onChange,
+      onDragStart,
+      onDragEnd,
       className,
-      style,
-      onMouseDown: handleMouseDown,
-      onKeyDown: handleKeyDown,
-      tabIndex: disabled ? -1 : 0,
-      role: "slider",
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-valuenow": value,
-      "aria-disabled": disabled
-    },
-    /* @__PURE__ */ React12.createElement(SliderTrack, { $disabled: disabled }),
-    /* @__PURE__ */ React12.createElement(SliderFill, { $percentage: percentage, $disabled: disabled }),
-    /* @__PURE__ */ React12.createElement(
-      SliderThumb,
-      {
-        $percentage: percentage,
-        $disabled: disabled,
-        $isDragging: isDragging
-      }
-    )
-  );
-};
-Slider.displayName = "Slider";
-var NumberInputContainer = styled.div`
+      style
+    }) => {
+      const [internalValue, setInternalValue] = useState(
+        controlledValue ?? defaultValue
+      );
+      const [isDragging, setIsDragging] = useState(false);
+      const containerRef = useRef(null);
+      const value = controlledValue !== void 0 ? controlledValue : internalValue;
+      const percentage = (value - min) / (max - min) * 100;
+      const updateValue = useCallback(
+        (clientX) => {
+          if (!containerRef.current || disabled) return;
+          const rect = containerRef.current.getBoundingClientRect();
+          const offsetX = clientX - rect.left;
+          const newPercentage = Math.max(0, Math.min(100, offsetX / rect.width * 100));
+          const rawValue = newPercentage / 100 * (max - min) + min;
+          const steppedValue = Math.round(rawValue / step) * step;
+          const clampedValue = Math.max(min, Math.min(max, steppedValue));
+          if (controlledValue === void 0) {
+            setInternalValue(clampedValue);
+          }
+          onChange?.(clampedValue);
+        },
+        [min, max, step, disabled, controlledValue, onChange]
+      );
+      const handleMouseDown = useCallback(
+        (e) => {
+          if (disabled) return;
+          e.preventDefault();
+          setIsDragging(true);
+          onDragStart?.();
+          updateValue(e.clientX);
+        },
+        [disabled, onDragStart, updateValue]
+      );
+      useEffect(() => {
+        if (!isDragging) return;
+        const handleMouseMove = (e) => {
+          updateValue(e.clientX);
+        };
+        const handleMouseUp = () => {
+          setIsDragging(false);
+          onDragEnd?.();
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+          document.removeEventListener("mousemove", handleMouseMove);
+          document.removeEventListener("mouseup", handleMouseUp);
+        };
+      }, [isDragging, updateValue, onDragEnd]);
+      const handleKeyDown = useCallback(
+        (e) => {
+          if (disabled) return;
+          let newValue = value;
+          switch (e.key) {
+            case "ArrowLeft":
+            case "ArrowDown":
+              e.preventDefault();
+              newValue = Math.max(min, value - step);
+              break;
+            case "ArrowRight":
+            case "ArrowUp":
+              e.preventDefault();
+              newValue = Math.min(max, value + step);
+              break;
+            case "Home":
+              e.preventDefault();
+              newValue = min;
+              break;
+            case "End":
+              e.preventDefault();
+              newValue = max;
+              break;
+            default:
+              return;
+          }
+          if (controlledValue === void 0) {
+            setInternalValue(newValue);
+          }
+          onChange?.(newValue);
+        },
+        [disabled, value, min, max, step, controlledValue, onChange]
+      );
+      return /* @__PURE__ */ React3.createElement(
+        SliderContainer,
+        {
+          ref: containerRef,
+          $disabled: disabled,
+          className,
+          style,
+          onMouseDown: handleMouseDown,
+          onKeyDown: handleKeyDown,
+          tabIndex: disabled ? -1 : 0,
+          role: "slider",
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          "aria-disabled": disabled
+        },
+        /* @__PURE__ */ React3.createElement(SliderTrack, { $disabled: disabled }),
+        /* @__PURE__ */ React3.createElement(SliderFill, { $percentage: percentage, $disabled: disabled }),
+        /* @__PURE__ */ React3.createElement(
+          SliderThumb,
+          {
+            $percentage: percentage,
+            $disabled: disabled,
+            $isDragging: isDragging
+          }
+        )
+      );
+    };
+    Slider.displayName = "Slider";
+  }
+});
+
+// src/Slider/index.ts
+var init_Slider2 = __esm({
+  "src/Slider/index.ts"() {
+    init_Slider();
+  }
+});
+var NumberInputContainer, InputWrapper, UnitText, StyledInput, ButtonGroup, StepButton, UpArrow, DownArrow, NumberInput;
+var init_NumberInput = __esm({
+  "src/NumberInput/NumberInput.tsx"() {
+    init_styled();
+    NumberInputContainer = styled.div`
   display: inline-flex;
   align-items: center;
   background: white;
@@ -397,24 +975,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 {
@@ -422,9 +1000,9 @@ var NumberInputContainer = styled.div`
         box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
       }
     `;
-}}
+    }}
 `;
-var InputWrapper = styled.div`
+    InputWrapper = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
@@ -432,7 +1010,7 @@ var InputWrapper = styled.div`
   min-width: 0;
   gap: 4px;
 `;
-var UnitText = styled.span`
+    UnitText = styled.span`
   flex-shrink: 0;
   font-family: 'PingFang SC', sans-serif;
   font-weight: 400;
@@ -450,7 +1028,7 @@ var UnitText = styled.span`
     color: ${theme2.colors.palettes.gray["120"]};
   `}
 `;
-var StyledInput = styled.input`
+    StyledInput = styled.input`
   width: 100%;
   border: none;
   outline: none;
@@ -490,7 +1068,7 @@ var StyledInput = styled.input`
     -moz-appearance: textfield;
   }
 `;
-var ButtonGroup = styled.div`
+    ButtonGroup = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -498,16 +1076,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 = styled.button`
   flex: 1 1 50%;
   display: flex;
   align-items: center;
@@ -521,205 +1099,218 @@ 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 "";
-}}
-
-  ${({ $disabled, theme: theme2 }) => {
-  if ($disabled) {
-    return `
-        cursor: not-allowed;
-        opacity: 0.4;
-      `;
-  }
-  return `
-      &:hover {
-        background-color: ${theme2.colors.palettes.transparency["5"]};
       }
+      return "";
+    }}
 
-      &:active {
-        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.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
-var DownArrow = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M7 9.5L3.5 5.5H10.5L7 9.5Z", fill: "currentColor" }));
-var NumberInput = ({
-  value: controlledValue,
-  defaultValue = 0,
-  min = -Infinity,
-  max = Infinity,
-  step = 1,
-  size = "large",
-  disabled = false,
-  alert = false,
-  precision,
-  formatter,
-  parser,
-  unit,
-  onChange,
-  className,
-  style
-}) => {
-  const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
-  const [displayValue, setDisplayValue] = useState("");
-  const [isFocused, setIsFocused] = useState(false);
-  const inputRef = useRef(null);
-  const value = controlledValue !== void 0 ? controlledValue : internalValue;
-  const formatValue = useCallback(
-    (val) => {
-      if (formatter) {
-        return formatter(val);
-      }
-      if (precision !== void 0) {
-        return val.toFixed(precision);
-      }
-      return String(val);
-    },
-    [formatter, precision]
-  );
-  const parseValue = useCallback(
-    (displayVal) => {
-      if (parser) {
-        return parser(displayVal);
-      }
-      const parsed = parseFloat(displayVal);
-      return isNaN(parsed) ? null : parsed;
-    },
-    [parser]
-  );
-  useEffect(() => {
-    if (!isFocused) {
-      setDisplayValue(formatValue(value));
-    }
-  }, [value, isFocused, formatValue]);
-  const clampValue = useCallback(
-    (val) => {
-      return Math.max(min, Math.min(max, val));
-    },
-    [min, max]
-  );
-  const handleValueChange = useCallback(
-    (newValue) => {
-      const clampedValue = clampValue(newValue);
-      if (controlledValue === void 0) {
-        setInternalValue(clampedValue);
+  ${({ $disabled, theme: theme2 }) => {
+      if ($disabled) {
+        return `
+        cursor: not-allowed;
+        opacity: 0.4;
+      `;
       }
-      onChange?.(clampedValue);
-    },
-    [clampValue, controlledValue, onChange]
-  );
-  const increment = useCallback(() => {
-    if (disabled) return;
-    handleValueChange(value + step);
-  }, [disabled, value, step, handleValueChange]);
-  const decrement = useCallback(() => {
-    if (disabled) return;
-    handleValueChange(value - step);
-  }, [disabled, value, step, handleValueChange]);
-  const handleInputChange = useCallback((e) => {
-    setDisplayValue(e.target.value);
-  }, []);
-  const handleBlur = useCallback(() => {
-    setIsFocused(false);
-    const parsed = parseValue(displayValue);
-    if (parsed !== null) {
-      handleValueChange(parsed);
-    } else {
-      setDisplayValue(formatValue(value));
-    }
-  }, [displayValue, parseValue, handleValueChange, value, formatValue]);
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-    setDisplayValue(String(value));
-  }, [value]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        increment();
-      } else if (e.key === "ArrowDown") {
-        e.preventDefault();
-        decrement();
-      } else if (e.key === "Enter") {
-        inputRef.current?.blur();
+      return `
+      &:hover {
+        background-color: ${theme2.colors.palettes.transparency["5"]};
       }
-    },
-    [increment, decrement]
-  );
-  return /* @__PURE__ */ React12.createElement(
-    NumberInputContainer,
-    {
-      $size: size,
-      $disabled: disabled,
-      $alert: alert,
-      $isFocused: isFocused,
+
+      &:active {
+        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"]};
+  }
+`;
+    UpArrow = () => /* @__PURE__ */ React3.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
+    DownArrow = () => /* @__PURE__ */ React3.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("path", { d: "M7 9.5L3.5 5.5H10.5L7 9.5Z", fill: "currentColor" }));
+    NumberInput = ({
+      value: controlledValue,
+      defaultValue = 0,
+      min = -Infinity,
+      max = Infinity,
+      step = 1,
+      size = "large",
+      disabled = false,
+      alert = false,
+      precision,
+      formatter,
+      parser,
+      unit,
+      onChange,
       className,
       style
-    },
-    /* @__PURE__ */ React12.createElement(InputWrapper, null, /* @__PURE__ */ React12.createElement(
-      StyledInput,
-      {
-        ref: inputRef,
-        type: "text",
-        value: displayValue,
-        onChange: handleInputChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onKeyDown: handleKeyDown,
-        disabled,
-        $size: size,
-        $disabled: disabled
-      }
-    ), unit && /* @__PURE__ */ React12.createElement(UnitText, { $size: size, $disabled: disabled }, unit)),
-    /* @__PURE__ */ React12.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React12.createElement(
-      StepButton,
-      {
-        type: "button",
-        $position: "up",
-        $alert: alert,
-        $disabled: disabled,
-        onClick: increment,
-        disabled,
-        tabIndex: -1
-      },
-      /* @__PURE__ */ React12.createElement(UpArrow, null)
-    ), /* @__PURE__ */ React12.createElement(
-      StepButton,
-      {
-        type: "button",
-        $position: "down",
-        $alert: alert,
-        $disabled: disabled,
-        onClick: decrement,
-        disabled,
-        tabIndex: -1
-      },
-      /* @__PURE__ */ React12.createElement(DownArrow, null)
-    ))
-  );
-};
-NumberInput.displayName = "NumberInput";
+    }) => {
+      const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
+      const [displayValue, setDisplayValue] = useState("");
+      const [isFocused, setIsFocused] = useState(false);
+      const inputRef = useRef(null);
+      const value = controlledValue !== void 0 ? controlledValue : internalValue;
+      const formatValue = useCallback(
+        (val) => {
+          if (formatter) {
+            return formatter(val);
+          }
+          if (precision !== void 0) {
+            return val.toFixed(precision);
+          }
+          return String(val);
+        },
+        [formatter, precision]
+      );
+      const parseValue = useCallback(
+        (displayVal) => {
+          if (parser) {
+            return parser(displayVal);
+          }
+          const parsed = parseFloat(displayVal);
+          return isNaN(parsed) ? null : parsed;
+        },
+        [parser]
+      );
+      useEffect(() => {
+        if (!isFocused) {
+          setDisplayValue(formatValue(value));
+        }
+      }, [value, isFocused, formatValue]);
+      const clampValue = useCallback(
+        (val) => {
+          return Math.max(min, Math.min(max, val));
+        },
+        [min, max]
+      );
+      const handleValueChange = useCallback(
+        (newValue) => {
+          const clampedValue = clampValue(newValue);
+          if (controlledValue === void 0) {
+            setInternalValue(clampedValue);
+          }
+          onChange?.(clampedValue);
+        },
+        [clampValue, controlledValue, onChange]
+      );
+      const increment = useCallback(() => {
+        if (disabled) return;
+        handleValueChange(value + step);
+      }, [disabled, value, step, handleValueChange]);
+      const decrement = useCallback(() => {
+        if (disabled) return;
+        handleValueChange(value - step);
+      }, [disabled, value, step, handleValueChange]);
+      const handleInputChange = useCallback((e) => {
+        setDisplayValue(e.target.value);
+      }, []);
+      const handleBlur = useCallback(() => {
+        setIsFocused(false);
+        const parsed = parseValue(displayValue);
+        if (parsed !== null) {
+          handleValueChange(parsed);
+        } else {
+          setDisplayValue(formatValue(value));
+        }
+      }, [displayValue, parseValue, handleValueChange, value, formatValue]);
+      const handleFocus = useCallback(() => {
+        setIsFocused(true);
+        setDisplayValue(String(value));
+      }, [value]);
+      const handleKeyDown = useCallback(
+        (e) => {
+          if (e.key === "ArrowUp") {
+            e.preventDefault();
+            increment();
+          } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            decrement();
+          } else if (e.key === "Enter") {
+            inputRef.current?.blur();
+          }
+        },
+        [increment, decrement]
+      );
+      return /* @__PURE__ */ React3.createElement(
+        NumberInputContainer,
+        {
+          $size: size,
+          $disabled: disabled,
+          $alert: alert,
+          $isFocused: isFocused,
+          className,
+          style
+        },
+        /* @__PURE__ */ React3.createElement(InputWrapper, null, /* @__PURE__ */ React3.createElement(
+          StyledInput,
+          {
+            ref: inputRef,
+            type: "text",
+            value: displayValue,
+            onChange: handleInputChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            disabled,
+            $size: size,
+            $disabled: disabled
+          }
+        ), unit && /* @__PURE__ */ React3.createElement(UnitText, { $size: size, $disabled: disabled }, unit)),
+        /* @__PURE__ */ React3.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React3.createElement(
+          StepButton,
+          {
+            type: "button",
+            $position: "up",
+            $alert: alert,
+            $disabled: disabled,
+            onClick: increment,
+            disabled,
+            tabIndex: -1
+          },
+          /* @__PURE__ */ React3.createElement(UpArrow, null)
+        ), /* @__PURE__ */ React3.createElement(
+          StepButton,
+          {
+            type: "button",
+            $position: "down",
+            $alert: alert,
+            $disabled: disabled,
+            onClick: decrement,
+            disabled,
+            tabIndex: -1
+          },
+          /* @__PURE__ */ React3.createElement(DownArrow, null)
+        ))
+      );
+    };
+    NumberInput.displayName = "NumberInput";
+  }
+});
 
-// src/Button/SpinButton.tsx
-var SpinButtonWrapper = styled.div`
+// src/NumberInput/index.ts
+var init_NumberInput2 = __esm({
+  "src/NumberInput/index.ts"() {
+    init_NumberInput();
+  }
+});
+var SpinButtonWrapper, SliderWrapper, SpinButton;
+var init_SpinButton = __esm({
+  "src/Button/SpinButton.tsx"() {
+    init_styled();
+    init_Slider2();
+    init_NumberInput2();
+    SpinButtonWrapper = styled.div`
   display: inline-flex;
   align-items: center;
   gap: ${({ $showSlider }) => $showSlider ? "0" : "0"};
   width: ${({ $showSlider }) => $showSlider ? "100%" : "auto"};
 `;
-var SliderWrapper = styled.div`
+    SliderWrapper = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
@@ -727,63 +1318,79 @@ var SliderWrapper = styled.div`
   padding-right: ${({ $size }) => $size === "small" ? "83px" : "72px"};
   min-width: 0;
 `;
-var SpinButton = ({
-  value: controlledValue,
-  defaultValue = 0,
-  min = -Infinity,
-  max = Infinity,
-  step = 1,
-  size = "large",
-  disabled = false,
-  alert = false,
-  showSlider = false,
-  precision,
-  formatter,
-  parser,
-  onChange,
-  className,
-  style
-}) => {
-  const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
-  const value = controlledValue !== void 0 ? controlledValue : internalValue;
-  const handleValueChange = useCallback(
-    (newValue) => {
-      if (newValue === null) return;
-      if (controlledValue === void 0) {
-        setInternalValue(newValue);
-      }
-      onChange?.(newValue);
-    },
-    [controlledValue, onChange]
-  );
-  return /* @__PURE__ */ React12.createElement(SpinButtonWrapper, { $showSlider: showSlider, className, style }, showSlider && /* @__PURE__ */ React12.createElement(SliderWrapper, { $size: size }, /* @__PURE__ */ React12.createElement(
-    Slider,
-    {
-      value,
-      min,
-      max,
-      step,
-      disabled,
-      onChange: handleValueChange
-    }
-  )), /* @__PURE__ */ React12.createElement(
-    NumberInput,
-    {
-      value,
-      min,
-      max,
-      step,
-      size,
-      disabled,
-      alert,
+    SpinButton = ({
+      value: controlledValue,
+      defaultValue = 0,
+      min = -Infinity,
+      max = Infinity,
+      step = 1,
+      size = "large",
+      disabled = false,
+      alert = false,
+      showSlider = false,
       precision,
       formatter,
       parser,
-      onChange: handleValueChange
-    }
-  ));
-};
-SpinButton.displayName = "SpinButton";
+      onChange,
+      className,
+      style
+    }) => {
+      const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue);
+      const value = controlledValue !== void 0 ? controlledValue : internalValue;
+      const handleValueChange = useCallback(
+        (newValue) => {
+          if (newValue === null) return;
+          if (controlledValue === void 0) {
+            setInternalValue(newValue);
+          }
+          onChange?.(newValue);
+        },
+        [controlledValue, onChange]
+      );
+      return /* @__PURE__ */ React3.createElement(SpinButtonWrapper, { $showSlider: showSlider, className, style }, showSlider && /* @__PURE__ */ React3.createElement(SliderWrapper, { $size: size }, /* @__PURE__ */ React3.createElement(
+        Slider,
+        {
+          value,
+          min,
+          max,
+          step,
+          disabled,
+          onChange: handleValueChange
+        }
+      )), /* @__PURE__ */ React3.createElement(
+        NumberInput,
+        {
+          value,
+          min,
+          max,
+          step,
+          size,
+          disabled,
+          alert,
+          precision,
+          formatter,
+          parser,
+          onChange: handleValueChange
+        }
+      ));
+    };
+    SpinButton.displayName = "SpinButton";
+  }
+});
+
+// src/Button/index.ts
+var init_Button2 = __esm({
+  "src/Button/index.ts"() {
+    init_Button();
+    init_SpinButton();
+  }
+});
+
+// src/index.ts
+init_Button2();
+
+// src/Switch/Switch.tsx
+init_styled();
 var SwitchContainer = styled.label`
   position: relative;
   display: inline-block;
@@ -928,7 +1535,7 @@ var Switch = ({
   const handleBlur = useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(
     SwitchContainer,
     {
       $size: size,
@@ -937,7 +1544,7 @@ var Switch = ({
       className,
       style
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       HiddenInput,
       {
         type: "checkbox",
@@ -948,7 +1555,7 @@ var Switch = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       Track,
       {
         $size: size,
@@ -957,7 +1564,7 @@ var Switch = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       Thumb,
       {
         $size: size,
@@ -969,6 +1576,9 @@ var Switch = ({
   );
 };
 Switch.displayName = "Switch";
+
+// src/Radio/Radio.tsx
+init_styled();
 var RadioContainer = styled.label`
   position: relative;
   display: inline-block;
@@ -1084,14 +1694,14 @@ var Radio = ({
   const handleBlur = useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(
     RadioContainer,
     {
       $disabled: disabled,
       className,
       style
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       HiddenInput2,
       {
         type: "radio",
@@ -1105,7 +1715,7 @@ var Radio = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       RadioOuter,
       {
         $checked: checked,
@@ -1113,7 +1723,7 @@ var Radio = ({
         $isFocused: isFocused
       }
     ),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       RadioInner,
       {
         $checked: checked,
@@ -1123,6 +1733,9 @@ var Radio = ({
   );
 };
 Radio.displayName = "Radio";
+
+// src/Checkbox/Checkbox.tsx
+init_styled();
 var CheckboxContainer = styled.label`
   position: relative;
   display: inline-block;
@@ -1200,7 +1813,7 @@ var CheckboxBox = styled.div`
     `;
 }}
 `;
-var IconWrapper2 = styled.div`
+var IconWrapper3 = styled.div`
   position: absolute;
   left: 50%;
   top: 50%;
@@ -1269,14 +1882,14 @@ var Checkbox = ({
   const handleBlur = useCallback(() => {
     setIsFocused(false);
   }, []);
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(
     CheckboxContainer,
     {
       $disabled: disabled,
       className,
       style
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       HiddenInput3,
       {
         ref: inputRef,
@@ -1291,7 +1904,7 @@ var Checkbox = ({
         disabled
       }
     ),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       CheckboxBox,
       {
         $checked: checked,
@@ -1300,11 +1913,17 @@ var Checkbox = ({
         $isFocused: isFocused
       }
     ),
-    !indeterminate && /* @__PURE__ */ React12.createElement(IconWrapper2, { $visible: checked }, /* @__PURE__ */ React12.createElement("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "#fff" }, /* @__PURE__ */ React12.createElement("path", { d: "M1.05426 3.16164L0 4.27945L3.50904 8L10 1.11781L8.94573 0L3.50904 5.76438L1.05426 3.16164Z" }))),
-    indeterminate && /* @__PURE__ */ React12.createElement(IconWrapper2, { $visible: indeterminate }, /* @__PURE__ */ React12.createElement(DefaultIndeterminateIcon, null))
+    !indeterminate && /* @__PURE__ */ React3.createElement(IconWrapper3, { $visible: checked }, /* @__PURE__ */ React3.createElement("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "#fff" }, /* @__PURE__ */ React3.createElement("path", { d: "M1.05426 3.16164L0 4.27945L3.50904 8L10 1.11781L8.94573 0L3.50904 5.76438L1.05426 3.16164Z" }))),
+    indeterminate && /* @__PURE__ */ React3.createElement(IconWrapper3, { $visible: indeterminate }, /* @__PURE__ */ React3.createElement(DefaultIndeterminateIcon, null))
   );
 };
 Checkbox.displayName = "Checkbox";
+
+// src/index.ts
+init_Slider2();
+
+// src/Input/Input.tsx
+init_styled();
 var InputWrapper2 = styled.div`
   display: inline-flex;
   align-items: center;
@@ -1454,7 +2073,7 @@ var Input = forwardRef(
       setIsFocused(false);
       onBlur?.(e);
     };
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React3.createElement(
       InputWrapper2,
       {
         $size: size,
@@ -1465,8 +2084,8 @@ var Input = forwardRef(
         className,
         style
       },
-      prefixNode && /* @__PURE__ */ React12.createElement(PrefixNode, { $size: size }, prefixNode),
-      /* @__PURE__ */ React12.createElement(
+      prefixNode && /* @__PURE__ */ React3.createElement(PrefixNode, { $size: size }, prefixNode),
+      /* @__PURE__ */ React3.createElement(
         StyledInput2,
         {
           ref,
@@ -1480,11 +2099,14 @@ var Input = forwardRef(
           ...rest
         }
       ),
-      suffixNode && /* @__PURE__ */ React12.createElement(SuffixNode, { $size: size }, suffixNode)
+      suffixNode && /* @__PURE__ */ React3.createElement(SuffixNode, { $size: size }, suffixNode)
     );
   }
 );
 Input.displayName = "Input";
+
+// src/Input/SearchInput.tsx
+init_styled();
 var SearchIconWrapper = styled.div`
   display: inline-flex;
   align-items: center;
@@ -1540,7 +2162,7 @@ var ClearButton = styled.button`
     opacity: 0.5;
   }
 `;
-var DefaultSearchIcon = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement(
+var DefaultSearchIcon = () => /* @__PURE__ */ React3.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement(
   "path",
   {
     d: "M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z",
@@ -1549,7 +2171,7 @@ var DefaultSearchIcon = () => /* @__PURE__ */ React12.createElement("svg", { vie
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }
-), /* @__PURE__ */ React12.createElement(
+), /* @__PURE__ */ React3.createElement(
   "path",
   {
     d: "M14 14L11.1 11.1",
@@ -1559,7 +2181,7 @@ var DefaultSearchIcon = () => /* @__PURE__ */ React12.createElement("svg", { vie
     strokeLinejoin: "round"
   }
 ));
-var DefaultCloseIcon = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement(
+var DefaultCloseIcon = () => /* @__PURE__ */ React3.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement(
   "path",
   {
     d: "M12 4L4 12",
@@ -1568,7 +2190,7 @@ var DefaultCloseIcon = () => /* @__PURE__ */ React12.createElement("svg", { view
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }
-), /* @__PURE__ */ React12.createElement(
+), /* @__PURE__ */ React3.createElement(
   "path",
   {
     d: "M4 4L12 12",
@@ -1606,8 +2228,8 @@ var SearchInput = forwardRef(
       }
       onClear?.();
     };
-    const prefixNode = /* @__PURE__ */ React12.createElement(SearchIconWrapper, { $size: size }, searchIcon || /* @__PURE__ */ React12.createElement(DefaultSearchIcon, null));
-    const suffixNode = clearable && currentValue && !disabled && !readOnly ? /* @__PURE__ */ React12.createElement(
+    const prefixNode = /* @__PURE__ */ React3.createElement(SearchIconWrapper, { $size: size }, searchIcon || /* @__PURE__ */ React3.createElement(DefaultSearchIcon, null));
+    const suffixNode = clearable && currentValue && !disabled && !readOnly ? /* @__PURE__ */ React3.createElement(
       ClearButton,
       {
         $size: size,
@@ -1615,9 +2237,9 @@ var SearchInput = forwardRef(
         type: "button",
         tabIndex: -1
       },
-      /* @__PURE__ */ React12.createElement(DefaultCloseIcon, null)
+      /* @__PURE__ */ React3.createElement(DefaultCloseIcon, null)
     ) : null;
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React3.createElement(
       Input,
       {
         ref,
@@ -1634,255 +2256,20 @@ var SearchInput = forwardRef(
   }
 );
 SearchInput.displayName = "SearchInput";
-var IconContext = createContext(null);
-var IconProvider = ({
-  icons,
-  children
-}) => {
-  return /* @__PURE__ */ React12.createElement(IconContext.Provider, { value: icons }, children);
-};
-var useIconRegistry = () => {
-  return useContext(IconContext);
-};
-IconProvider.displayName = "IconProvider";
-
-// src/Icon/Icon.tsx
-var IconContainer = styled.span`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: ${({ $size }) => typeof $size === "number" ? `${$size}px` : $size};
-  height: ${({ $size }) => typeof $size === "number" ? `${$size}px` : $size};
-  color: ${({ $color }) => $color};
-  flex-shrink: 0;
-  line-height: 1;
-
-  svg {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-`;
-var Icon = ({
-  name,
-  src,
-  children,
-  size = 16,
-  color = "currentColor",
-  alt = "icon",
-  className,
-  style,
-  onClick
-}) => {
-  const registry = useIconRegistry();
-  let iconElement = children;
-  if (!iconElement && src) {
-    iconElement = /* @__PURE__ */ React12.createElement(
-      "img",
-      {
-        src,
-        alt,
-        style: { width: "100%", height: "100%", display: "block" }
-      }
-    );
-  }
-  if (!iconElement && name && registry) {
-    const IconComponent = registry[name];
-    if (IconComponent) {
-      iconElement = /* @__PURE__ */ React12.createElement(IconComponent, null);
-    } else if (process.env.NODE_ENV !== "production") {
-      console.warn(`Icon "${name}" not found in registry. Make sure IconProvider is set up.`);
-    }
-  }
-  if (!iconElement) {
-    if (process.env.NODE_ENV !== "production" && !children && !name && !src) {
-      console.warn('Icon: one of "name", "src", or "children" must be provided');
-    }
-    return null;
-  }
-  return /* @__PURE__ */ React12.createElement(
-    IconContainer,
-    {
-      $size: size,
-      $color: color,
-      className,
-      style,
-      onClick
-    },
-    iconElement
-  );
-};
-Icon.displayName = "Icon";
-var ToastContainer = styled.div`
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid;
-  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
-
-  ${({ theme: theme2 }) => {
-  const baseConfig = theme2.components.toast;
-  return `
-      padding: ${baseConfig.padding};
-      border-radius: ${baseConfig.borderRadius};
-      font-size: ${baseConfig.fontSize};
-      font-weight: ${baseConfig.fontWeight};
-    `;
-}}
-
-  ${({ $variant, theme: theme2 }) => {
-  const variantConfig = theme2.components.toast[$variant];
-  return `
-      background: ${variantConfig.background};
-      border-color: ${variantConfig.borderColor};
-    `;
-}}
-`;
-var IconWrapper3 = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  ${({ $variant, theme: theme2 }) => {
-  const iconConfig = theme2.components.toast[$variant].icon;
-  return `
-      width: ${iconConfig.size.width};
-      height: ${iconConfig.size.height};
-    `;
-}}
-`;
-var Message = styled.span`
-  flex: 1;
-  line-height: 20px;
-  color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["120"]};
-`;
-var ActionButton = styled.button`
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  outline: none;
-
-  ${({ $variant, theme: theme2 }) => {
-  const buttonConfig = theme2.components.toast[$variant].button;
-  return `
-      font-size: ${buttonConfig.fontSize};
-      font-weight: ${buttonConfig.fontWeight};
-      color: ${buttonConfig.color};
-      margin-left: ${buttonConfig.gap};
-    `;
-}}
-
-  &:hover {
-    opacity: 0.8;
-  }
 
-  &:active {
-    opacity: 0.6;
-  }
-`;
-var CloseButton = styled.button`
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["60"]};
-  flex-shrink: 0;
-  outline: none;
+// src/index.ts
+init_NumberInput2();
+init_Icon2();
 
-  &:hover {
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["100"]};
-  }
+// src/Toast/index.ts
+init_Toast();
 
-  &:active {
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["120"]};
-  }
-`;
-var SuccessIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React12.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
-var InfoIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#5ba0e7" }), /* @__PURE__ */ React12.createElement("path", { d: "M10 9V14M10 6H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var ErrorIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#e95555" }), /* @__PURE__ */ React12.createElement("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var WarnIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#ebe361" }), /* @__PURE__ */ React12.createElement("path", { d: "M10 6V11M10 14H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
-var CloseIconSvg = () => /* @__PURE__ */ React12.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M9 3L3 9M3 3L9 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }));
-var Toast = ({
-  variant = "info",
-  message,
-  actionText,
-  onAction,
-  closable = false,
-  onClose,
-  duration = 0,
-  icon,
-  showIcon = true,
-  className,
-  style
-}) => {
-  const [visible, setVisible] = useState(true);
-  useEffect(() => {
-    if (duration > 0) {
-      const timer = setTimeout(() => {
-        setVisible(false);
-        onClose?.();
-      }, duration);
-      return () => clearTimeout(timer);
-    }
-  }, [duration, onClose]);
-  const handleClose = () => {
-    setVisible(false);
-    onClose?.();
-  };
-  if (!visible) {
-    return null;
-  }
-  const defaultIcons = {
-    success: /* @__PURE__ */ React12.createElement(SuccessIcon, null),
-    info: /* @__PURE__ */ React12.createElement(InfoIcon, null),
-    error: /* @__PURE__ */ React12.createElement(ErrorIcon, null),
-    warn: /* @__PURE__ */ React12.createElement(WarnIcon, null)
-  };
-  const iconElement = icon || defaultIcons[variant];
-  return /* @__PURE__ */ React12.createElement(
-    ToastContainer,
-    {
-      $variant: variant,
-      className,
-      style,
-      role: "alert",
-      "aria-live": "polite"
-    },
-    showIcon && /* @__PURE__ */ React12.createElement(IconWrapper3, { $variant: variant }, iconElement),
-    /* @__PURE__ */ React12.createElement(Message, null, message),
-    actionText && onAction && /* @__PURE__ */ React12.createElement(
-      ActionButton,
-      {
-        $variant: variant,
-        onClick: onAction,
-        type: "button"
-      },
-      actionText
-    ),
-    closable && /* @__PURE__ */ React12.createElement(
-      CloseButton,
-      {
-        onClick: handleClose,
-        type: "button",
-        "aria-label": "Close"
-      },
-      /* @__PURE__ */ React12.createElement(CloseIconSvg, null)
-    )
-  );
-};
-Toast.displayName = "Toast";
+// src/Toast/ToastContainer.tsx
+init_styled();
+init_Toast();
 var ToastContext = createContext(null);
-var ToastWrapper = styled.div`
+var ToastWrapper2 = styled.div`
   position: fixed;
-  top: 24px;
-  right: 24px;
   z-index: 9999;
   display: flex;
   flex-direction: column;
@@ -1892,8 +2279,44 @@ 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
@@ -1913,7 +2336,7 @@ var ToastContainer2 = ({
     return id;
   }, [maxCount, defaultDuration]);
   const hideToast = useCallback((id) => {
-    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
   }, []);
   const success = useCallback((message, options) => {
     return showToast({ ...options, variant: "success", message });
@@ -1935,12 +2358,12 @@ var ToastContainer2 = ({
     error,
     warn
   };
-  return /* @__PURE__ */ React12.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React12.createElement(ToastWrapper, null, toasts.map((toast) => /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React3.createElement(ToastWrapper2, { $placement: placement }, toasts.map((toast2) => /* @__PURE__ */ React3.createElement(
     Toast,
     {
-      key: toast.id,
-      ...toast,
-      onClose: () => hideToast(toast.id)
+      key: toast2.id,
+      ...toast2,
+      onClose: () => hideToast(toast2.id)
     }
   ))));
 };
@@ -1952,6 +2375,12 @@ var useToast = () => {
   return context;
 };
 ToastContainer2.displayName = "ToastContainer";
+
+// src/Toast/index.ts
+init_toastManager();
+
+// src/Tabs/Tabs.tsx
+init_styled();
 var TabContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -2089,7 +2518,7 @@ var Tabs = ({
     },
     [controlledActiveKey, onChange]
   );
-  return /* @__PURE__ */ React12.createElement(TabContainer, { className, style }, /* @__PURE__ */ React12.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(TabContainer, { className, style }, /* @__PURE__ */ React3.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React3.createElement(
     TabItem,
     {
       key: item.key,
@@ -2103,7 +2532,7 @@ var Tabs = ({
       disabled: item.disabled,
       type: "button"
     },
-    item.icon && /* @__PURE__ */ React12.createElement("span", null, item.icon),
+    item.icon && /* @__PURE__ */ React3.createElement("span", null, item.icon),
     item.label
   ))));
 };
@@ -2120,7 +2549,7 @@ var Tooltip = ({
   getPopupContainer,
   ...rest
 }) => {
-  const overlayContent = React12.useMemo(() => /* @__PURE__ */ React12.createElement("div", null, content), [content]);
+  const overlayContent = React3.useMemo(() => /* @__PURE__ */ React3.createElement("div", null, content), [content]);
   const variantClass = `tooltip-variant-${variant}`;
   const sizeClass = variant === "white" ? `tooltip-size-${size}` : "";
   const combinedClassName = [variantClass, sizeClass, overlayClassName].filter(Boolean).join(" ");
@@ -2133,9 +2562,12 @@ var Tooltip = ({
     ...getPopupContainer && { getPopupContainer },
     ...rest
   };
-  return /* @__PURE__ */ React12.createElement(RcTooltip, { ...tooltipProps, prefixCls: "od-tooltip" }, children);
+  return /* @__PURE__ */ React3.createElement(RcTooltip, { ...tooltipProps, prefixCls: "od-tooltip" }, children);
 };
 Tooltip.displayName = "Tooltip";
+
+// src/Tooltip/globalStyle.ts
+init_context();
 var theme = getGlobalTheme();
 var arrowSize = 5;
 var paddingDistance = `${arrowSize}px`;
@@ -2465,6 +2897,9 @@ var TooltipGlobalStyles = createGlobalStyle`
     border-bottom-color: ${() => theme.components.tooltip.white.large.background};
   }
 `;
+
+// src/ToolbarButton/ToolbarButton.tsx
+init_styled();
 var ToolbarButtonContainer = styled.div`
   display: inline-flex;
   align-items: center;
@@ -2696,7 +3131,7 @@ var Divider = styled.div`
     `;
 }}
 `;
-var ArrowIcon = () => /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React12.createElement(
+var ArrowIcon = () => /* @__PURE__ */ React3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3.createElement(
   "path",
   {
     d: "M8.1858 9.79353C8.08649 9.90387 7.91346 9.90387 7.81415 9.79353L4.77549 6.41724C4.6307 6.25636 4.74487 6 4.96132 6L11.0386 6C11.2551 6 11.3693 6.25636 11.2245 6.41724L8.1858 9.79353Z",
@@ -2726,7 +3161,7 @@ var ToolbarButton = ({
     onDropdownClick?.(e);
   };
   if (!splitDropdown && hasDropdown) {
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React3.createElement(
       ToolbarButtonContainer,
       {
         className,
@@ -2734,7 +3169,7 @@ var ToolbarButton = ({
         $disabled: disabled,
         $active: active
       },
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React3.createElement(
         MainButton,
         {
           $disabled: disabled,
@@ -2743,14 +3178,14 @@ var ToolbarButton = ({
           onClick: handleMainClick,
           disabled
         },
-        icon && /* @__PURE__ */ React12.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React12.createElement(LabelText, { $disabled: disabled }, label),
-        /* @__PURE__ */ React12.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React12.createElement(ArrowIcon, null))
+        icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
+        label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label),
+        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ArrowIcon, null))
       )
     );
   }
   if (splitDropdown && hasDropdown) {
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React3.createElement(
       ToolbarButtonContainer,
       {
         className,
@@ -2758,7 +3193,7 @@ var ToolbarButton = ({
         $disabled: disabled,
         $active: active
       },
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React3.createElement(
         MainButton,
         {
           $disabled: disabled,
@@ -2767,11 +3202,11 @@ var ToolbarButton = ({
           onClick: handleMainClick,
           disabled
         },
-        icon && /* @__PURE__ */ React12.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React12.createElement(LabelText, { $disabled: disabled }, label)
+        icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
+        label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label)
       ),
-      /* @__PURE__ */ React12.createElement(Divider, { $disabled: disabled, $active: active }),
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React3.createElement(Divider, { $disabled: disabled, $active: active }),
+      /* @__PURE__ */ React3.createElement(
         DropdownButton,
         {
           $disabled: disabled,
@@ -2780,11 +3215,11 @@ var ToolbarButton = ({
           onClick: handleDropdownClick,
           disabled
         },
-        /* @__PURE__ */ React12.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React12.createElement(ArrowIcon, null))
+        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ArrowIcon, null))
       )
     );
   }
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(
     ToolbarButtonContainer,
     {
       className,
@@ -2792,7 +3227,7 @@ var ToolbarButton = ({
       $disabled: disabled,
       $active: active
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React3.createElement(
       MainButton,
       {
         $disabled: disabled,
@@ -2801,22 +3236,38 @@ var ToolbarButton = ({
         onClick: handleMainClick,
         disabled
       },
-      icon && /* @__PURE__ */ React12.createElement(IconWrapper4, { $disabled: disabled }, icon),
-      label && /* @__PURE__ */ React12.createElement(LabelText, { $disabled: disabled }, label)
+      icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
+      label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label)
     )
   );
 };
 ToolbarButton.displayName = "ToolbarButton";
+
+// src/UIConfigProvider/UIConfigProvider.tsx
+init_IconProvider();
+init_context();
 var UIConfigContext = 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) {
+      const { createRoot } = ReactDOM;
+      const root = createRoot(container);
+      root.render(element);
+    } else {
+      ReactDOM.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.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React12.createElement(TooltipStyles, null), /* @__PURE__ */ React12.createElement(IconProvider, { icons }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React3.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React3.createElement(TooltipStyles, null), /* @__PURE__ */ React3.createElement(IconProvider, { icons }, /* @__PURE__ */ React3.createElement(
     ToastContainer2,
     {
       maxCount: toastConfig.maxCount,
@@ -2901,6 +3352,10 @@ var mergeUIConfig = (baseConfig, ...configs) => {
   return merged;
 };
 
-export { Button, Checkbox, Icon, IconProvider, Input, NumberInput, Radio, SearchInput, Slider, SpinButton, Switch, Tabs, Toast, ToastContainer2 as ToastContainer, ToolbarButton, Tooltip, UIConfigProvider, createUIConfig, getGlobalTheme, mergeUIConfig, styled, useIconRegistry, useToast, useUIConfig };
+// src/index.ts
+init_styled();
+init_context();
+
+export { Button, Checkbox, Icon, IconProvider, Input, NumberInput, Radio, SearchInput, Slider, SpinButton, Switch, Tabs, Toast, ToastContainer2 as ToastContainer, ToolbarButton, Tooltip, UIConfigProvider, createUIConfig, getGlobalTheme, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map