@taskon/widget-react 0.0.1-beta.6 → 0.0.1-beta.7

package/dist/chunks/{WidgetShell-D7yC894Y.js → ThemeProvider-CulHkqqY.js}

@@ -1,175 +1,861 @@
 import * as React from "react";
-import { useState, useMemo, useCallback, useEffect, forwardRef } from "react";
-import { createWidgetApi, parseWidgetConfig } from "@taskon/core";
-import { h as useTaskOnContext, s as useLayoutEffect2, q as useCallbackRef$1, k as useComposedRefs, P as Primitive, m as useControllableState, j as createContextScope, n as Presence, r as Portal$1, o as composeEventHandlers, l as createSlot$1, D as DismissableLayer, w as createContext2, x as useTaskOnPortalContainer, y as composeRefs, T as ThemeProvider } from "./ThemeProvider-mXLdLSkq.js";
+import { createContext, useContext, useMemo, useState, useRef, useEffect } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import '../WidgetShell.css';function cloudThemeToReactTheme(cloud) {
-  const isDual = cloud.colorMode.type === "dual";
-  const modeStrategy = isDual ? cloud.colorMode.dualVariant : "auto";
-  let mode;
-  if (cloud.colorMode.type === "dual") {
-    mode = cloud.colorMode.dualVariant === "auto" ? "auto" : "light";
-  } else {
-    mode = cloud.colorMode.type;
-  }
-  const mapColorToSeed = (color) => ({
-    colorPrimary: color.primaryColor,
-    colorSecondary: color.secondaryColor,
-    colorSuccess: color.successColor,
-    colorWarning: color.warningColor,
-    colorError: color.errorColor,
-    colorLink: color.linkColor,
-    colorTextOnPrimary: color.textInPrimaryButton,
-    colorText: color.textColor,
-    colorBgBase: color.backgroundColor
-  });
-  const mapSpacingToSeed = () => {
-    const base = Math.max(1, Number(cloud.spacing.sizeBaseStep) || 1);
-    const unit = Math.max(1, Number(cloud.spacing.sizeChangeUnit) || 1);
-    return {
-      spacingBaseStep: base,
-      spacingChangeUnit: unit
+import * as ReactDOM from "react-dom";
+import ReactDOM__default from "react-dom";
+import '../ThemeProvider.css';const ThemeContext = createContext(null);
+const ThemePortalContainerContext = createContext(void 0);
+function useTaskOnTheme() {
+  const theme = useContext(ThemeContext);
+  if (!theme) {
+    throw new Error("useTaskOnTheme must be used within a ThemeProvider");
+  }
+  return theme;
+}
+function useTaskOnPortalContainer() {
+  const container = useContext(ThemePortalContainerContext);
+  if (container !== void 0) {
+    return container;
+  }
+  if (typeof document !== "undefined") {
+    return document.body;
+  }
+  return null;
+}
+const TaskOnContext = createContext(null);
+function useTaskOnContext() {
+  const context = useContext(TaskOnContext);
+  if (!context) {
+    throw new Error("useTaskOnContext must be used within a TaskOnProvider");
+  }
+  return context;
+}
+function useTaskOnAuth() {
+  const context = useTaskOnContext();
+  return useMemo(
+    () => ({
+      // User state
+      userId: context.userId,
+      isLoggedIn: context.isLoggedIn,
+      isInitializing: context.isInitializing,
+      isSessionReady: context.isSessionReady,
+      // Unified login
+      login: context.login,
+      // Logout
+      logout: context.logout,
+      // Request login (triggers config.onRequestLogin)
+      requestLogin: context.requestLogin
+    }),
+    [
+      context.userId,
+      context.isLoggedIn,
+      context.isInitializing,
+      context.isSessionReady,
+      context.login,
+      context.logout,
+      context.requestLogin
+    ]
+  );
+}
+function isSupportedLocale(locale) {
+  return locale === "en" || locale === "ko" || locale === "ja" || locale === "ru" || locale === "es";
+}
+function warnUnsupportedLocale(locale, widgetId) {
+  if (process.env.NODE_ENV !== "production" && !isSupportedLocale(locale)) {
+    console.warn(
+      `[widget-react] Locale "${locale}" is not fully supported in ${widgetId}. Falling back to English. Supported locales: en, ko, ja, ru, es`
+    );
+  }
+}
+const localeCache = /* @__PURE__ */ new Map();
+const DEFAULT_LOCALE = "en";
+function useWidgetLocale(options) {
+  const { widgetId, defaultMessages, loadMessages } = options;
+  const { locale } = useTaskOnContext();
+  const getInitialState = () => {
+    if (locale === DEFAULT_LOCALE) {
+      return { messages: defaultMessages, isLoading: false };
+    }
+    const cacheKey = `${widgetId}-${locale}`;
+    if (localeCache.has(cacheKey)) {
+      return { messages: localeCache.get(cacheKey), isLoading: false };
+    }
+    return { messages: defaultMessages, isLoading: true };
+  };
+  const [state, setState] = useState(getInitialState);
+  const loadMessagesRef = useRef(loadMessages);
+  loadMessagesRef.current = loadMessages;
+  const defaultMessagesRef = useRef(defaultMessages);
+  defaultMessagesRef.current = defaultMessages;
+  useEffect(() => {
+    if (locale === DEFAULT_LOCALE) {
+      setState({ messages: defaultMessagesRef.current, isLoading: false });
+      return;
+    }
+    warnUnsupportedLocale(locale, widgetId);
+    const cacheKey = `${widgetId}-${locale}`;
+    if (localeCache.has(cacheKey)) {
+      setState({ messages: localeCache.get(cacheKey), isLoading: false });
+      return;
+    }
+    let isMounted = true;
+    setState((prev) => ({ ...prev, isLoading: true }));
+    loadMessagesRef.current(locale).then((module) => {
+      if (isMounted) {
+        const loadedMessages = module.default;
+        localeCache.set(cacheKey, loadedMessages);
+        setState({ messages: loadedMessages, isLoading: false });
+      }
+    }).catch((error) => {
+      console.warn(
+        `[widget-react] Failed to load locale "${locale}" for ${widgetId}, falling back to English:`,
+        error
+      );
+      if (isMounted) {
+        setState({ messages: defaultMessagesRef.current, isLoading: false });
+      }
+    });
+    return () => {
+      isMounted = false;
     };
+  }, [locale, widgetId]);
+  return state;
+}
+function clearLocaleCache() {
+  localeCache.clear();
+}
+async function preloadWidgetLocale(widgetId, locale, loadMessages) {
+  if (locale === DEFAULT_LOCALE) return;
+  const cacheKey = `${widgetId}-${locale}`;
+  if (localeCache.has(cacheKey)) return;
+  try {
+    const module = await loadMessages(locale);
+    localeCache.set(cacheKey, module.default);
+  } catch (error) {
+    console.warn(
+      `[widget-react] Failed to preload locale "${locale}" for ${widgetId}:`,
+      error
+    );
+  }
+}
+function interpolate(template, params) {
+  if (!params) {
+    return template;
+  }
+  return template.replace(/\{(\w+)\}/g, (match, key) => {
+    const value = params[key];
+    if (value === void 0) {
+      return match;
+    }
+    return String(value);
+  });
+}
+function createT(messages) {
+  return (key, params) => {
+    const template = messages[key];
+    if (typeof template !== "string") {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`[widget-react] Missing translation key: ${String(key)}`);
+      }
+      return String(key);
+    }
+    return interpolate(template, params);
   };
-  return {
-    mode,
-    modeStrategy,
-    // Global seed (shape and spacing values applied regardless of mode)
-    seed: {
-      borderRadius: cloud.shape.borderRadius,
-      fontSize: cloud.shape.fontSize,
-      ...mapSpacingToSeed()
-    },
-    // Per-mode color overrides
-    light: {
-      seed: mapColorToSeed(cloud.light)
-    },
-    dark: {
-      seed: mapColorToSeed(cloud.dark)
+}
+function createTFunction(messages) {
+  return (key, params) => {
+    const template = messages[key];
+    if (typeof template !== "string") {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`[widget-react] Missing translation key: ${String(key)}`);
+      }
+      return String(key);
     }
+    return interpolate(template, params);
   };
 }
-function usePagination(options) {
-  const { total, pageSize, initialPage = 0, mode = "pagination" } = options;
-  const [page, setPage] = useState(initialPage);
-  const totalPages = useMemo(() => {
-    return Math.max(1, Math.ceil(total / pageSize));
-  }, [total, pageSize]);
-  const safePage = useMemo(() => {
-    return Math.min(page, totalPages - 1);
-  }, [page, totalPages]);
-  if (safePage !== page) {
-    setPage(safePage);
-  }
-  const hasPrevious = safePage > 0;
-  const hasNext = safePage < totalPages - 1;
-  const goToPage = useCallback(
-    (targetPage) => {
-      const validPage = Math.max(0, Math.min(targetPage, totalPages - 1));
-      setPage(validPage);
-    },
-    [totalPages]
-  );
-  const goToPrevious = useCallback(() => {
-    if (hasPrevious) {
-      setPage((p) => p - 1);
-    }
-  }, [hasPrevious]);
-  const goToNext = useCallback(() => {
-    if (hasNext) {
-      setPage((p) => p + 1);
-    }
-  }, [hasNext]);
-  const reset = useCallback(() => {
-    setPage(0);
-  }, []);
-  const startIndex = safePage * pageSize + 1;
-  const endIndex = Math.min((safePage + 1) * pageSize, total);
-  const hasMore = useMemo(() => {
-    if (mode === "infinite") {
-      return safePage < totalPages - 1;
-    }
-    return hasNext;
-  }, [mode, safePage, totalPages, hasNext]);
-  const loadedCount = useMemo(() => {
-    if (mode === "infinite") {
-      return Math.min((safePage + 1) * pageSize, total);
-    }
-    return endIndex - startIndex + 1;
-  }, [mode, safePage, pageSize, total, startIndex, endIndex]);
-  const loadMore = useCallback(() => {
-    if (mode === "infinite" && hasMore) {
-      setPage((p) => p + 1);
-    }
-  }, [mode, hasMore]);
+function useTranslation(options) {
+  const { messages, isLoading } = useWidgetLocale(options);
+  const t = useMemo(() => createTFunction(messages), [messages]);
   return {
-    page: safePage,
-    totalPages,
-    hasPrevious,
-    hasNext,
-    goToPage,
-    goToPrevious,
-    goToNext,
-    reset,
-    startIndex,
-    endIndex,
-    // Infinite 模式专用
-    loadMore,
-    hasMore,
-    loadedCount
+    t,
+    messages,
+    isLoading
   };
 }
-function useWidgetConfig(widgetId) {
-  const { client } = useTaskOnContext();
-  const [config, setConfig] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!widgetId || !client) {
-      setConfig(null);
-      setIsLoading(false);
-      setError(null);
-      return;
+function createLocaleLoader(defaultMessages, imports) {
+  return (locale) => {
+    if (locale === "en") {
+      return Promise.resolve({ default: defaultMessages });
+    }
+    const importFn = imports[locale];
+    if (importFn) {
+      return importFn();
     }
-    let cancelled = false;
-    setIsLoading(true);
-    setError(null);
-    const api = createWidgetApi(client);
-    api.getWidgetInfo(widgetId).then((info) => {
-      if (!cancelled) {
-        setConfig(parseWidgetConfig(info));
+    return Promise.resolve({ default: defaultMessages });
+  };
+}
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler == null ? void 0 : originalEventHandler(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler == null ? void 0 : ourEventHandler(event);
+    }
+  };
+}
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
       }
-    }).catch((err) => {
-      if (!cancelled) {
-        console.warn("[TaskOn] Failed to load widget config:", err);
-        setError(
-          err instanceof Error ? err.message : "Failed to load widget config"
-        );
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React.useCallback(composeRefs(...refs), refs);
+}
+function createContext2(rootComponentName, defaultContext) {
+  const Context = React.createContext(defaultContext);
+  const Provider = (props) => {
+    const { children, ...context } = props;
+    const value = React.useMemo(() => context, Object.values(context));
+    return /* @__PURE__ */ jsx(Context.Provider, { value, children });
+  };
+  Provider.displayName = rootComponentName + "Provider";
+  function useContext2(consumerName) {
+    const context = React.useContext(Context);
+    if (context) return context;
+    if (defaultContext !== void 0) return defaultContext;
+    throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+  }
+  return [Provider, useContext2];
+}
+function createContextScope(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext3(rootComponentName, defaultContext) {
+    const BaseContext = React.createContext(defaultContext);
+    const index = defaultContexts.length;
+    defaultContexts = [...defaultContexts, defaultContext];
+    const Provider = (props) => {
+      var _a;
+      const { scope, children, ...context } = props;
+      const Context = ((_a = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a[index]) || BaseContext;
+      const value = React.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ jsx(Context.Provider, { value, children });
+    };
+    Provider.displayName = rootComponentName + "Provider";
+    function useContext2(consumerName, scope) {
+      var _a;
+      const Context = ((_a = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a[index]) || BaseContext;
+      const context = React.useContext(Context);
+      if (context) return context;
+      if (defaultContext !== void 0) return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    return [Provider, useContext2];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map((defaultContext) => {
+      return React.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = (scope == null ? void 0 : scope[scopeName]) || scopeContexts;
+      return React.useMemo(
+        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
+        [scope, contexts]
+      );
+    };
+  };
+  createScope.scopeName = scopeName;
+  return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
+}
+function composeContextScopes(...scopes) {
+  const baseScope = scopes[0];
+  if (scopes.length === 1) return baseScope;
+  const createScope = () => {
+    const scopeHooks = scopes.map((createScope2) => ({
+      useScope: createScope2(),
+      scopeName: createScope2.scopeName
+    }));
+    return function useComposedScopes(overrideScopes) {
+      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+        const scopeProps = useScope(overrideScopes);
+        const currentScope = scopeProps[`__scope${scopeName}`];
+        return { ...nextScopes2, ...currentScope };
+      }, {});
+      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
+  };
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React.Children.count(newElement) > 1) return React.Children.only(null);
+          return React.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef$1(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-    }).finally(() => {
-      if (!cancelled) {
-        setIsLoading(false);
+      return React.cloneElement(children, props2);
+    }
+    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
       }
-    });
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef$1(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+var NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive = NODES.reduce((primitive, node) => {
+  const Slot2 = /* @__PURE__ */ createSlot(`Primitive.${node}`);
+  const Node2 = React.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot2 : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+function dispatchDiscreteCustomEvent(target, event) {
+  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
+}
+function useCallbackRef$1(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React.useMemo(() => (...args) => {
+    var _a;
+    return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
+  }, []);
+}
+function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
+  const onEscapeKeyDown = useCallbackRef$1(onEscapeKeyDownProp);
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onEscapeKeyDown(event);
+      }
+    };
+    ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
+  }, [onEscapeKeyDown, ownerDocument]);
+}
+var DISMISSABLE_LAYER_NAME = "DismissableLayer";
+var CONTEXT_UPDATE = "dismissableLayer.update";
+var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
+var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
+var originalBodyPointerEvents;
+var DismissableLayerContext = React.createContext({
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set()
+});
+var DismissableLayer = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      disableOutsidePointerEvents = false,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss,
+      ...layerProps
+    } = props;
+    const context = React.useContext(DismissableLayerContext);
+    const [node, setNode] = React.useState(null);
+    const ownerDocument = (node == null ? void 0 : node.ownerDocument) ?? (globalThis == null ? void 0 : globalThis.document);
+    const [, force] = React.useState({});
+    const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
+    const layers = Array.from(context.layers);
+    const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
+    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
+    const index = node ? layers.indexOf(node) : -1;
+    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+    const pointerDownOutside = usePointerDownOutside((event) => {
+      const target = event.target;
+      const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+      onPointerDownOutside == null ? void 0 : onPointerDownOutside(event);
+      onInteractOutside == null ? void 0 : onInteractOutside(event);
+      if (!event.defaultPrevented) onDismiss == null ? void 0 : onDismiss();
+    }, ownerDocument);
+    const focusOutside = useFocusOutside((event) => {
+      const target = event.target;
+      const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (isFocusInBranch) return;
+      onFocusOutside == null ? void 0 : onFocusOutside(event);
+      onInteractOutside == null ? void 0 : onInteractOutside(event);
+      if (!event.defaultPrevented) onDismiss == null ? void 0 : onDismiss();
+    }, ownerDocument);
+    useEscapeKeydown((event) => {
+      const isHighestLayer = index === context.layers.size - 1;
+      if (!isHighestLayer) return;
+      onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(event);
+      if (!event.defaultPrevented && onDismiss) {
+        event.preventDefault();
+        onDismiss();
+      }
+    }, ownerDocument);
+    React.useEffect(() => {
+      if (!node) return;
+      if (disableOutsidePointerEvents) {
+        if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+          originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+          ownerDocument.body.style.pointerEvents = "none";
+        }
+        context.layersWithOutsidePointerEventsDisabled.add(node);
+      }
+      context.layers.add(node);
+      dispatchUpdate();
+      return () => {
+        if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
+          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+        }
+      };
+    }, [node, ownerDocument, disableOutsidePointerEvents, context]);
+    React.useEffect(() => {
+      return () => {
+        if (!node) return;
+        context.layers.delete(node);
+        context.layersWithOutsidePointerEventsDisabled.delete(node);
+        dispatchUpdate();
+      };
+    }, [node, context]);
+    React.useEffect(() => {
+      const handleUpdate = () => force({});
+      document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+      return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+    }, []);
+    return /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        ...layerProps,
+        ref: composedRefs,
+        style: {
+          pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
+          ...props.style
+        },
+        onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
+        onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
+        onPointerDownCapture: composeEventHandlers(
+          props.onPointerDownCapture,
+          pointerDownOutside.onPointerDownCapture
+        )
+      }
+    );
+  }
+);
+DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
+var BRANCH_NAME = "DismissableLayerBranch";
+var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
+  const context = React.useContext(DismissableLayerContext);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      context.branches.add(node);
+      return () => {
+        context.branches.delete(node);
+      };
+    }
+  }, [context.branches]);
+  return /* @__PURE__ */ jsx(Primitive.div, { ...props, ref: composedRefs });
+});
+DismissableLayerBranch.displayName = BRANCH_NAME;
+function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
+  const handlePointerDownOutside = useCallbackRef$1(onPointerDownOutside);
+  const isPointerInsideReactTreeRef = React.useRef(false);
+  const handleClickRef = React.useRef(() => {
+  });
+  React.useEffect(() => {
+    const handlePointerDown = (event) => {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        let handleAndDispatchPointerDownOutsideEvent2 = function() {
+          handleAndDispatchCustomEvent(
+            POINTER_DOWN_OUTSIDE,
+            handlePointerDownOutside,
+            eventDetail,
+            { discrete: true }
+          );
+        };
+        const eventDetail = { originalEvent: event };
+        if (event.pointerType === "touch") {
+          ownerDocument.removeEventListener("click", handleClickRef.current);
+          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
+          ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
+        } else {
+          handleAndDispatchPointerDownOutsideEvent2();
+        }
+      } else {
+        ownerDocument.removeEventListener("click", handleClickRef.current);
+      }
+      isPointerInsideReactTreeRef.current = false;
+    };
+    const timerId = window.setTimeout(() => {
+      ownerDocument.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
     return () => {
-      cancelled = true;
+      window.clearTimeout(timerId);
+      ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+      ownerDocument.removeEventListener("click", handleClickRef.current);
     };
-  }, [widgetId, client]);
-  return { config, isLoading, error };
-}
-function useResolvedWidgetConfig(widgetId) {
-  const { config, isLoading, error } = useWidgetConfig(widgetId);
-  const cloudTheme = useMemo(() => {
-    if (!(config == null ? void 0 : config.theme)) return void 0;
-    return cloudThemeToReactTheme(config.theme);
-  }, [config == null ? void 0 : config.theme]);
+  }, [ownerDocument, handlePointerDownOutside]);
+  return {
+    // ensures we check React component tree (not just DOM tree)
+    onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
+  };
+}
+function useFocusOutside(onFocusOutside, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
+  const handleFocusOutside = useCallbackRef$1(onFocusOutside);
+  const isFocusInsideReactTreeRef = React.useRef(false);
+  React.useEffect(() => {
+    const handleFocus = (event) => {
+      if (event.target && !isFocusInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event };
+        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+          discrete: false
+        });
+      }
+    };
+    ownerDocument.addEventListener("focusin", handleFocus);
+    return () => ownerDocument.removeEventListener("focusin", handleFocus);
+  }, [ownerDocument, handleFocusOutside]);
+  return {
+    onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
+    onBlurCapture: () => isFocusInsideReactTreeRef.current = false
+  };
+}
+function dispatchUpdate() {
+  const event = new CustomEvent(CONTEXT_UPDATE);
+  document.dispatchEvent(event);
+}
+function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+  const target = detail.originalEvent.target;
+  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
+  if (handler) target.addEventListener(name, handler, { once: true });
+  if (discrete) {
+    dispatchDiscreteCustomEvent(target, event);
+  } else {
+    target.dispatchEvent(event);
+  }
+}
+var Root$1 = DismissableLayer;
+var Branch = DismissableLayerBranch;
+var useLayoutEffect2 = (globalThis == null ? void 0 : globalThis.document) ? React.useLayoutEffect : () => {
+};
+var PORTAL_NAME$1 = "Portal";
+var Portal$1 = React.forwardRef((props, forwardedRef) => {
+  var _a;
+  const { container: containerProp, ...portalProps } = props;
+  const [mounted, setMounted] = React.useState(false);
+  useLayoutEffect2(() => setMounted(true), []);
+  const container = containerProp || mounted && ((_a = globalThis == null ? void 0 : globalThis.document) == null ? void 0 : _a.body);
+  return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+});
+Portal$1.displayName = PORTAL_NAME$1;
+function useStateMachine(initialState, machine) {
+  return React.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+var Presence = (props) => {
+  const { present, children } = props;
+  const presence = usePresence(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
+  const ref = useComposedRefs(presence.ref, getElementRef(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
+};
+Presence.displayName = "Presence";
+function usePresence(present) {
+  const [node, setNode] = React.useState();
+  const stylesRef = React.useRef(null);
+  const prevPresentRef = React.useRef(present);
+  const prevAnimationNameRef = React.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect2(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || (styles == null ? void 0 : styles.display) === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect2(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
   return {
-    functionConfig: (config == null ? void 0 : config.functionConfig) ?? null,
-    cloudTheme,
-    isConfigLoading: isLoading,
-    configError: error
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
   };
 }
+function getAnimationName(styles) {
+  return (styles == null ? void 0 : styles.animationName) || "none";
+}
+function getElementRef(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+var useInsertionEffect = React[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {
+  },
+  caller
+}) {
+  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolledProp;
+  {
+    const isControlledRef = React.useRef(prop !== void 0);
+    React.useEffect(() => {
+      const wasControlled = isControlledRef.current;
+      if (wasControlled !== isControlled) {
+        const from = wasControlled ? "controlled" : "uncontrolled";
+        const to = isControlled ? "controlled" : "uncontrolled";
+        console.warn(
+          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
+        );
+      }
+      isControlledRef.current = isControlled;
+    }, [isControlled, caller]);
+  }
+  const setValue = React.useCallback(
+    (nextValue) => {
+      var _a;
+      if (isControlled) {
+        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+        if (value2 !== prop) {
+          (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, value2);
+        }
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, onChangeRef]
+  );
+  return [value, setValue];
+}
+function useUncontrolledState({
+  defaultProp,
+  onChange
+}) {
+  const [value, setValue] = React.useState(defaultProp);
+  const prevValueRef = React.useRef(value);
+  const onChangeRef = React.useRef(onChange);
+  useInsertionEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React.useEffect(() => {
+    var _a;
+    if (prevValueRef.current !== value) {
+      (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef]);
+  return [value, setValue, onChangeRef];
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
 var useReactId = React[" useId ".trim().toString()] || (() => void 0);
 var count$1 = 0;
 function useId(deterministicId) {
@@ -1263,7 +1949,7 @@ var DialogOverlay = React.forwardRef(
   }
 );
 DialogOverlay.displayName = OVERLAY_NAME;
-var Slot$1 = createSlot$1("DialogOverlay.RemoveScroll");
+var Slot = /* @__PURE__ */ createSlot("DialogOverlay.RemoveScroll");
 var DialogOverlayImpl = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...overlayProps } = props;
@@ -1271,7 +1957,7 @@ var DialogOverlayImpl = React.forwardRef(
     return (
       // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
       // ie. when `Overlay` and `Content` are siblings
-      /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot$1, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx(
         Primitive.div,
         {
           "data-state": getState(context.open),
@@ -1579,496 +2265,547 @@ function Dialog({
     )
   ] }) });
 }
-var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-var use = React[" use ".trim().toString()];
-function isPromiseLike(value) {
-  return typeof value === "object" && value !== null && "then" in value;
+const lightDefaultTokens = {
+  // Primary colors
+  colorPrimary: "#CBFF01",
+  colorPrimaryHover: "#daff2a",
+  colorPrimaryActive: "#a5d900",
+  colorPrimaryBg: "#fdffcd",
+  // Secondary color
+  colorSecondary: "#00FFA3",
+  // Status colors
+  colorSuccess: "#1FCBAF",
+  colorWarning: "#FFB800",
+  colorError: "#FF4D4D",
+  // Background colors (V2)
+  colorBgCanvas: "#FFFFFF",
+  colorBgSurface: "#fafafb",
+  colorBgSurfaceSubtle: "rgba(26, 29, 31, 0.04)",
+  colorBgSurfaceStrong: "rgba(26, 29, 31, 0.06)",
+  colorBgFloating: "#f4f4f4",
+  colorBgMask: "rgba(26, 29, 31, 0.45)",
+  colorBgInset: "#eaebeb",
+  colorSuccessBg: "#1fcbaf1a",
+  colorWarningBg: "#ffb8001a",
+  colorErrorBg: "#ff4d4d1a",
+  colorSecondaryBg: "#00ffa31a",
+  // Text colors
+  colorText: "#1A1D1F",
+  colorTextSecondary: "rgba(26, 29, 31, 0.72)",
+  colorTextTertiary: "rgba(26, 29, 31, 0.6)",
+  colorTextDisabled: "rgba(26, 29, 31, 0.4)",
+  colorLink: "#58AFFF",
+  colorTextOnPrimary: "#000000",
+  // Border colors
+  colorBorder: "rgba(26, 29, 31, 0.1)",
+  colorBorderSecondary: "rgba(26, 29, 31, 0.06)",
+  // Border radius
+  borderRadius: 8,
+  borderRadiusSm: 4,
+  borderRadiusLg: 12,
+  // Font
+  fontSize: 14,
+  fontSizeSm: 12,
+  fontSizeLg: 16,
+  fontSizeXl: 18,
+  fontSizeXxl: 22,
+  fontSizeXxxl: 24,
+  // Spacing
+  spacing: 8,
+  spacingXs: 4,
+  spacingSm: 8,
+  spacingMd: 16,
+  spacingLg: 24,
+  spacingXl: 32
+};
+const darkDefaultTokens = {
+  // Primary colors
+  colorPrimary: "#CBFF01",
+  colorPrimaryHover: "#daff2a",
+  colorPrimaryActive: "#a5d900",
+  colorPrimaryBg: "#1e2600",
+  // Secondary color
+  colorSecondary: "#00FFA3",
+  // Status colors
+  colorSuccess: "#1FCBAF",
+  colorWarning: "#FFB800",
+  colorError: "#FF4D4D",
+  // Background colors (V2)
+  colorBgCanvas: "#1A1D1F",
+  colorBgSurface: "#282b2c",
+  colorBgSurfaceSubtle: "rgba(255, 255, 255, 0.04)",
+  colorBgSurfaceStrong: "rgba(255, 255, 255, 0.12)",
+  colorBgFloating: "#313435",
+  colorBgMask: "rgba(26, 29, 31, 0.6)",
+  colorBgInset: "#3a3d3e",
+  colorSuccessBg: "#1fcbaf26",
+  colorWarningBg: "#ffb80026",
+  colorErrorBg: "#ff4d4d26",
+  colorSecondaryBg: "#00ffa326",
+  // Text colors
+  colorText: "#FFFFFF",
+  colorTextSecondary: "rgba(255, 255, 255, 0.72)",
+  colorTextTertiary: "rgba(255, 255, 255, 0.6)",
+  colorTextDisabled: "rgba(255, 255, 255, 0.4)",
+  colorLink: "#58AFFF",
+  colorTextOnPrimary: "#000000",
+  // Border colors
+  colorBorder: "rgba(255, 255, 255, 0.1)",
+  colorBorderSecondary: "rgba(255, 255, 255, 0.06)",
+  // Border radius
+  borderRadius: 8,
+  borderRadiusSm: 4,
+  borderRadiusLg: 12,
+  // Font
+  fontSize: 14,
+  fontSizeSm: 12,
+  fontSizeLg: 16,
+  fontSizeXl: 18,
+  fontSizeXxl: 22,
+  fontSizeXxxl: 24,
+  // Spacing
+  spacing: 8,
+  spacingXs: 4,
+  spacingSm: 8,
+  spacingMd: 16,
+  spacingLg: 24,
+  spacingXl: 32
+};
+const hueStep = 2;
+const saturationStep = 0.16;
+const saturationStep2 = 0.05;
+const brightnessStep1 = 0.05;
+const brightnessStep2 = 0.15;
+const lightColorCount = 5;
+const darkColorCount = 4;
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result || !result[1] || !result[2] || !result[3]) {
+    return null;
+  }
+  return {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  };
 }
-function isLazyComponent(element) {
-  return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+function rgbToHex(rgb) {
+  const toHex = (n) => {
+    const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return "#" + toHex(rgb.r) + toHex(rgb.g) + toHex(rgb.b);
 }
-// @__NO_SIDE_EFFECTS__
-function createSlot(ownerName) {
-  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React.forwardRef((props, forwardedRef) => {
-    let { children, ...slotProps } = props;
-    if (isLazyComponent(children) && typeof use === "function") {
-      children = use(children._payload);
-    }
-    const childrenArray = React.Children.toArray(children);
-    const slottable = childrenArray.find(isSlottable);
-    if (slottable) {
-      const newElement = slottable.props.children;
-      const newChildren = childrenArray.map((child) => {
-        if (child === slottable) {
-          if (React.Children.count(newElement) > 1) return React.Children.only(null);
-          return React.isValidElement(newElement) ? newElement.props.children : null;
-        } else {
-          return child;
-        }
-      });
-      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
+function rgbToHsv(rgb) {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  let h = 0;
+  const v = max;
+  const s = max === 0 ? 0 : delta / max;
+  if (delta !== 0) {
+    if (max === r) {
+      h = ((g - b) / delta + (g < b ? 6 : 0)) * 60;
+    } else if (max === g) {
+      h = ((b - r) / delta + 2) * 60;
+    } else {
+      h = ((r - g) / delta + 4) * 60;
     }
-    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
-  });
-  Slot2.displayName = `${ownerName}.Slot`;
-  return Slot2;
+  }
+  return { h, s, v };
 }
-var Slot = /* @__PURE__ */ createSlot("Slot");
-// @__NO_SIDE_EFFECTS__
-function createSlotClone(ownerName) {
-  const SlotClone = React.forwardRef((props, forwardedRef) => {
-    let { children, ...slotProps } = props;
-    if (isLazyComponent(children) && typeof use === "function") {
-      children = use(children._payload);
-    }
-    if (React.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
-      const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React.Fragment) {
-        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
-      }
-      return React.cloneElement(children, props2);
-    }
-    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
-  });
-  SlotClone.displayName = `${ownerName}.SlotClone`;
-  return SlotClone;
+function hsvToRgb(hsv) {
+  const h = hsv.h / 60;
+  const s = hsv.s;
+  const v = hsv.v;
+  const i = Math.floor(h) % 6;
+  const f = h - Math.floor(h);
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  let r = 0, g = 0, b = 0;
+  switch (i) {
+    case 0:
+      r = v;
+      g = t;
+      b = p;
+      break;
+    case 1:
+      r = q;
+      g = v;
+      b = p;
+      break;
+    case 2:
+      r = p;
+      g = v;
+      b = t;
+      break;
+    case 3:
+      r = p;
+      g = q;
+      b = v;
+      break;
+    case 4:
+      r = t;
+      g = p;
+      b = v;
+      break;
+    case 5:
+      r = v;
+      g = p;
+      b = q;
+      break;
+  }
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  };
 }
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
-function isSlottable(child) {
-  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+function getHue(hsv, i, isLight) {
+  let hue;
+  if (hsv.h >= 60 && hsv.h <= 240) {
+    hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+  } else {
+    hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+  }
+  if (hue < 0) {
+    hue += 360;
+  } else if (hue >= 360) {
+    hue -= 360;
+  }
+  return hue;
 }
-function mergeProps(slotProps, childProps) {
-  const overrideProps = { ...childProps };
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args) => {
-          const result = childPropValue(...args);
-          slotPropValue(...args);
-          return result;
-        };
-      } else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
-      }
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
-    }
+function getSaturation(hsv, i, isLight) {
+  if (hsv.s === 0) {
+    return hsv.s;
   }
-  return { ...slotProps, ...overrideProps };
+  let saturation;
+  if (isLight) {
+    saturation = hsv.s - saturationStep * i;
+  } else {
+    saturation = hsv.s + saturationStep2 * i;
+  }
+  if (saturation < 0.06) {
+    saturation = 0.06;
+  }
+  if (saturation > 1) {
+    saturation = 1;
+  }
+  return saturation;
 }
-function getElementRef(element) {
-  var _a, _b;
-  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
+function getValue(hsv, i, isLight) {
+  let value;
+  if (isLight) {
+    value = hsv.v + brightnessStep1 * i;
+  } else {
+    value = hsv.v - brightnessStep2 * i;
   }
-  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
+  if (value < 0) {
+    value = 0;
   }
-  return element.props.ref || element.ref;
+  if (value > 1) {
+    value = 1;
+  }
+  return value;
 }
-const Button = forwardRef(
-  ({
-    size = "medium",
-    variant = "primary",
-    loading = false,
-    iconPosition,
-    leftIcon,
-    rightIcon,
-    asChild = false,
-    disabled,
-    className = "",
-    style,
-    children,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    const actualIconPosition = iconPosition || (leftIcon ? "left" : rightIcon ? "right" : void 0);
-    const isIconOnly = actualIconPosition === "only" || !children && (leftIcon || rightIcon);
-    const baseStyles = {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "var(--taskon-spacing-xs)",
-      fontFamily: "inherit",
-      fontWeight: 500,
-      lineHeight: 1.5,
-      border: "none",
-      outline: "none",
-      cursor: disabled || loading ? "not-allowed" : "pointer",
-      transition: "all 0.2s ease-in-out",
-      position: "relative",
-      userSelect: "none",
-      whiteSpace: "nowrap",
-      opacity: disabled ? 0.5 : 1,
-      ...style
-    };
-    const sizeStyles = {
-      small: {
-        fontSize: "var(--taskon-font-size-sm)",
-        padding: isIconOnly ? "var(--taskon-spacing-xs)" : "var(--taskon-spacing-xs) var(--taskon-spacing-sm)",
-        borderRadius: "var(--taskon-border-radius-sm)",
-        minWidth: isIconOnly ? "24px" : "64px",
-        height: "24px"
-      },
-      medium: {
-        fontSize: "var(--taskon-font-size)",
-        padding: isIconOnly ? "var(--taskon-spacing-xs)" : "var(--taskon-spacing-xs) var(--taskon-spacing-md)",
-        borderRadius: "var(--taskon-border-radius)",
-        minWidth: isIconOnly ? "32px" : "80px",
-        height: "32px"
-      },
-      large: {
-        fontSize: "var(--taskon-font-size-lg)",
-        padding: isIconOnly ? "var(--taskon-spacing-sm)" : "var(--taskon-spacing-sm) var(--taskon-spacing-lg)",
-        borderRadius: "var(--taskon-border-radius)",
-        minWidth: isIconOnly ? "40px" : "96px",
-        height: "40px"
-      }
-    };
-    const variantStyles = {
-      primary: {
-        backgroundColor: "var(--taskon-color-primary)",
-        color: "var(--taskon-color-text-on-primary)"
-      },
-      secondary: {
-        backgroundColor: "var(--taskon-color-secondary)",
-        color: "var(--taskon-color-text-on-primary)"
-      },
-      outline: {
-        backgroundColor: "transparent",
-        color: "var(--taskon-color-text)",
-        border: "1px solid var(--taskon-color-border)"
-      },
-      ghost: {
-        backgroundColor: "transparent",
-        color: "var(--taskon-color-text)"
-      },
-      danger: {
-        backgroundColor: "var(--taskon-color-error)",
-        color: "var(--taskon-color-text-on-primary)"
-      }
-    };
-    const hoverStyles = {
-      primary: "hover:bg-[var(--taskon-color-primary-hover)] active:bg-[var(--taskon-color-primary-active)]",
-      secondary: "hover:opacity-90 active:opacity-80",
-      outline: "hover:bg-[var(--taskon-color-bg-surface-strong)] active:bg-[var(--taskon-color-bg-surface-strong)]",
-      ghost: "hover:bg-[var(--taskon-color-bg-surface-strong)] active:bg-[var(--taskon-color-bg-surface-strong)]",
-      danger: "hover:opacity-90 active:opacity-80"
+function generatePalette(primaryColor) {
+  const rgb = hexToRgb(primaryColor);
+  if (!rgb) {
+    return Array(10).fill(primaryColor);
+  }
+  const hsv = rgbToHsv(rgb);
+  const palette = [];
+  for (let i = lightColorCount; i > 0; i--) {
+    const newHsv = {
+      h: getHue(hsv, i, true),
+      s: getSaturation(hsv, i, true),
+      v: getValue(hsv, i, true)
     };
-    const mergedStyle = {
-      ...baseStyles,
-      ...sizeStyles[size],
-      ...variantStyles[variant]
+    palette.push(rgbToHex(hsvToRgb(newHsv)));
+  }
+  palette.push(primaryColor);
+  for (let i = 1; i <= darkColorCount; i++) {
+    const newHsv = {
+      h: getHue(hsv, i, false),
+      s: getSaturation(hsv, i, false),
+      v: getValue(hsv, i, false)
     };
-    const mergedClassName = `${className} ${hoverStyles[variant]}`.trim();
-    const renderLoadingIndicator = () => {
-      if (!loading) return null;
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          style: {
-            display: "inline-block",
-            width: "1em",
-            height: "1em",
-            border: "2px solid currentColor",
-            borderTopColor: "transparent",
-            borderRadius: "50%",
-            animation: "taskon-button-spin 0.6s linear infinite"
-          }
-        }
+    palette.push(rgbToHex(hsvToRgb(newHsv)));
+  }
+  return palette;
+}
+function mixColors(color1, color2, weight) {
+  const rgb1 = hexToRgb(color1);
+  const rgb2 = hexToRgb(color2);
+  if (!rgb1 || !rgb2) return color1;
+  return rgbToHex({
+    r: rgb1.r + (rgb2.r - rgb1.r) * weight,
+    g: rgb1.g + (rgb2.g - rgb1.g) * weight,
+    b: rgb1.b + (rgb2.b - rgb1.b) * weight
+  });
+}
+function withAlpha(color, alpha) {
+  const rgb = hexToRgb(color);
+  if (!rgb) return color;
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+}
+function deriveTokens(seed, mode) {
+  const derived = {};
+  const isLight = mode === "light";
+  if (seed.colorPrimary) {
+    const palette = generatePalette(seed.colorPrimary);
+    derived.colorPrimary = seed.colorPrimary;
+    if (isLight) {
+      derived.colorPrimaryHover = palette[4];
+      derived.colorPrimaryActive = palette[6];
+      derived.colorPrimaryBg = palette[0];
+    } else {
+      derived.colorPrimaryHover = palette[4];
+      derived.colorPrimaryActive = palette[6];
+      derived.colorPrimaryBg = mixColors(seed.colorPrimary, "#000000", 0.85);
+    }
+  }
+  if (seed.colorSecondary) derived.colorSecondary = seed.colorSecondary;
+  if (seed.colorSuccess) derived.colorSuccess = seed.colorSuccess;
+  if (seed.colorWarning) derived.colorWarning = seed.colorWarning;
+  if (seed.colorError) derived.colorError = seed.colorError;
+  if (seed.colorLink) derived.colorLink = seed.colorLink;
+  if (seed.colorText) derived.colorText = seed.colorText;
+  if (seed.colorTextOnPrimary) {
+    derived.colorTextOnPrimary = seed.colorTextOnPrimary;
+  }
+  if (seed.colorText) {
+    derived.colorTextSecondary = withAlpha(seed.colorText, 0.72);
+    derived.colorTextTertiary = withAlpha(seed.colorText, 0.6);
+    derived.colorTextDisabled = withAlpha(seed.colorText, 0.4);
+    derived.colorBorder = withAlpha(seed.colorText, 0.1);
+    derived.colorBorderSecondary = withAlpha(seed.colorText, 0.06);
+  }
+  if (seed.colorBgBase) {
+    derived.colorBgCanvas = seed.colorBgBase;
+    if (seed.colorText) {
+      derived.colorBgSurface = mixColors(
+        seed.colorBgBase,
+        seed.colorText,
+        0.06
       );
-    };
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("style", { children: `
-          @keyframes taskon-button-spin {
-            from {
-              transform: rotate(0deg);
-            }
-            to {
-              transform: rotate(360deg);
-            }
-          }
-        ` }),
-      /* @__PURE__ */ jsxs(
-        Comp,
-        {
-          ref,
-          disabled: disabled || loading,
-          className: mergedClassName,
-          style: mergedStyle,
-          ...props,
-          children: [
-            loading && renderLoadingIndicator(),
-            !loading && leftIcon && actualIconPosition === "left" && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, children: leftIcon }),
-            !isIconOnly && children,
-            !loading && rightIcon && actualIconPosition === "right" && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, children: rightIcon })
-          ]
-        }
-      )
-    ] });
+      derived.colorBgSurfaceSubtle = withAlpha(seed.colorText, 0.04);
+      derived.colorBgSurfaceStrong = withAlpha(seed.colorText, 0.12);
+      derived.colorBgFloating = mixColors(
+        seed.colorBgBase,
+        seed.colorText,
+        0.1
+      );
+      derived.colorBgInset = mixColors(
+        seed.colorBgBase,
+        seed.colorText,
+        0.14
+      );
+      derived.colorBgMask = isLight ? withAlpha(seed.colorText, 0.45) : withAlpha(seed.colorBgBase, 0.6);
+    } else {
+      derived.colorBgSurface = seed.colorBgBase;
+      derived.colorBgFloating = seed.colorBgBase;
+      derived.colorBgInset = seed.colorBgBase;
+    }
   }
-);
-Button.displayName = "Button";
-const defaultPaginationMessages = {
-  previous: "Previous",
-  next: "Next",
-  page: "Page",
-  of: "of",
-  showing: "Showing {start}-{end} of {total}"
+  if (seed.colorSecondary) {
+    derived.colorSecondaryBg = withAlpha(seed.colorSecondary, 0.15);
+  }
+  if (seed.colorSuccess) {
+    derived.colorSuccessBg = withAlpha(seed.colorSuccess, 0.15);
+  }
+  if (seed.colorWarning) {
+    derived.colorWarningBg = withAlpha(seed.colorWarning, 0.15);
+  }
+  if (seed.colorError) {
+    derived.colorErrorBg = withAlpha(seed.colorError, 0.15);
+  }
+  if (seed.borderRadius !== void 0) {
+    derived.borderRadius = seed.borderRadius;
+    derived.borderRadiusSm = Math.max(0, seed.borderRadius - 4);
+    derived.borderRadiusLg = seed.borderRadius + 4;
+  }
+  if (seed.fontSize !== void 0) {
+    derived.fontSize = seed.fontSize;
+    derived.fontSizeSm = seed.fontSize - 2;
+    derived.fontSizeLg = seed.fontSize + 2;
+    derived.fontSizeXl = seed.fontSize + 4;
+    derived.fontSizeXxl = seed.fontSize + 8;
+    derived.fontSizeXxxl = seed.fontSize + 10;
+  }
+  if (seed.spacingBaseStep !== void 0 || seed.spacingChangeUnit !== void 0) {
+    const base = Math.max(1, Number(seed.spacingBaseStep) || 1);
+    const unit = Math.max(1, Number(seed.spacingChangeUnit) || 1);
+    const spacingXs = base;
+    const spacingSm = base + unit;
+    const spacingMd = base + unit * 3;
+    const spacingLg = base + unit * 5;
+    const spacingXl = base + unit * 7;
+    derived.spacing = spacingSm;
+    derived.spacingXs = spacingXs;
+    derived.spacingSm = spacingSm;
+    derived.spacingMd = spacingMd;
+    derived.spacingLg = spacingLg;
+    derived.spacingXl = spacingXl;
+  }
+  return derived;
+}
+function mergeTokens(defaults, derived, override) {
+  return {
+    ...defaults,
+    ...derived,
+    ...override
+  };
+}
+function getSystemThemeMode() {
+  if (typeof window === "undefined") {
+    return "light";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+const defaultTheme = {
+  mode: "dark",
+  compact: false,
+  tokens: darkDefaultTokens
 };
-function ChevronLeftIcon() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: "taskon-pagination-icon",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
-    }
-  );
+function toKebabCase(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
 }
-function ChevronRightIcon() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: "taskon-pagination-icon",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+function tokensToCssVariables(tokens) {
+  const cssVars = {};
+  for (const [key, value] of Object.entries(tokens)) {
+    const cssVarName = `--taskon-${toKebabCase(key)}`;
+    if (typeof value === "number") {
+      cssVars[cssVarName] = `${value}px`;
+    } else {
+      cssVars[cssVarName] = value;
     }
-  );
+  }
+  return cssVars;
 }
-function Pagination({
-  page,
-  totalPages,
-  hasPrevious,
-  hasNext,
-  onPrevious,
-  onNext,
-  messages = defaultPaginationMessages,
-  className = "",
-  showRange,
-  showArrows = true,
-  showButtonText = false,
-  // 默认不显示按钮文字，只显示箭头图标
-  size = "medium"
-}) {
-  if (totalPages <= 1) {
-    return null;
+function resolveTheme(config, systemMode) {
+  if (!config) {
+    return defaultTheme;
   }
-  const rangeText = showRange && messages.showing ? messages.showing.replace("{start}", String(showRange.start)).replace("{end}", String(showRange.end)).replace("{total}", String(showRange.total)) : null;
-  return /* @__PURE__ */ jsxs("div", { className: `taskon-pagination taskon-pagination--${size} ${className}`, children: [
-    rangeText && /* @__PURE__ */ jsx("span", { className: "taskon-pagination-range", children: rangeText }),
-    /* @__PURE__ */ jsxs("div", { className: "taskon-pagination-controls", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size,
-          disabled: !hasPrevious,
-          onClick: onPrevious,
-          "aria-label": messages.previous,
-          leftIcon: showArrows ? /* @__PURE__ */ jsx(ChevronLeftIcon, {}) : void 0,
-          className: "taskon-pagination-btn taskon-pagination-btn--prev",
-          children: showButtonText && messages.previous
-        }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: "taskon-pagination-info", children: [
-        /* @__PURE__ */ jsx("span", { className: "taskon-pagination-info-current", children: page + 1 }),
-        /* @__PURE__ */ jsx("span", { className: "taskon-pagination-info-separator", children: " / " }),
-        /* @__PURE__ */ jsx("span", { className: "taskon-pagination-info-total", children: totalPages })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size,
-          disabled: !hasNext,
-          onClick: onNext,
-          "aria-label": messages.next,
-          rightIcon: showArrows ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : void 0,
-          className: "taskon-pagination-btn taskon-pagination-btn--next",
-          children: showButtonText && messages.next
-        }
-      )
-    ] })
-  ] });
-}
-function Table({
-  columns,
-  data,
-  rowConfig,
-  loading = false,
-  loadingText = "Loading...",
-  empty,
-  striped = false,
-  compact = false,
-  borderless = false,
-  className = "",
-  style
-}) {
-  const tableClassName = [
-    "taskon-table",
-    striped && "taskon-table--striped",
-    compact && "taskon-table--compact",
-    borderless && "taskon-table--borderless"
-  ].filter(Boolean).join(" ");
-  const getRowKey = (rowConfig == null ? void 0 : rowConfig.getRowKey) || ((_, index) => index);
-  const getColumnStyle = (column) => {
-    const style2 = {};
-    if (column.width) {
-      style2.width = typeof column.width === "number" ? `${column.width}px` : column.width;
-    }
-    if (column.minWidth) {
-      style2.minWidth = typeof column.minWidth === "number" ? `${column.minWidth}px` : column.minWidth;
-    }
-    return style2;
-  };
-  const getAlignClassName = (align) => {
-    if (!align || align === "left") return "";
-    return `taskon-table__header--${align}`;
+  let resolvedMode;
+  if (config.mode === "auto") {
+    resolvedMode = systemMode;
+  } else if (config.mode) {
+    resolvedMode = config.mode;
+  } else {
+    resolvedMode = "dark";
+  }
+  const defaultTokens = resolvedMode === "light" ? lightDefaultTokens : darkDefaultTokens;
+  const modeConfig = resolvedMode === "light" ? config.light : config.dark;
+  const mergedSeed = {
+    ...config.seed,
+    ...modeConfig == null ? void 0 : modeConfig.seed
   };
-  const getCellAlignClassName = (align) => {
-    if (!align || align === "left") return "";
-    return `taskon-table__cell--${align}`;
+  const derivedTokens = deriveTokens(mergedSeed, resolvedMode);
+  const mergedMap = {
+    ...config.map,
+    ...modeConfig == null ? void 0 : modeConfig.map
   };
-  const renderHeader = () => /* @__PURE__ */ jsx("thead", { className: "taskon-table__head", children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx(
-    "th",
-    {
-      className: `taskon-table__header ${getAlignClassName(column.align)} ${column.headerClassName || ""}`,
-      style: getColumnStyle(column),
-      children: column.title
-    },
-    column.key
-  )) }) });
-  const renderLoading = () => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { colSpan: columns.length, className: "taskon-table__loading", children: [
-    /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-spinner" }),
-    /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: loadingText })
-  ] }) });
-  const renderEmpty = () => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "taskon-table__empty", children: /* @__PURE__ */ jsxs("div", { className: "taskon-table__empty-content", children: [
-    (empty == null ? void 0 : empty.icon) && /* @__PURE__ */ jsx("div", { className: "taskon-table__empty-icon", children: empty.icon }),
-    (empty == null ? void 0 : empty.title) && /* @__PURE__ */ jsx("p", { className: "taskon-table__empty-title", children: empty.title }),
-    (empty == null ? void 0 : empty.description) && /* @__PURE__ */ jsx("p", { className: "taskon-table__empty-desc", children: empty.description }),
-    !(empty == null ? void 0 : empty.title) && !(empty == null ? void 0 : empty.description) && /* @__PURE__ */ jsx("p", { className: "taskon-table__empty-title", children: "No data" })
-  ] }) }) });
-  const renderRows = () => data.map((row, rowIndex) => {
-    var _a, _b, _c;
-    const rowKey = getRowKey(row, rowIndex);
-    const isHighlighted = ((_a = rowConfig == null ? void 0 : rowConfig.isHighlighted) == null ? void 0 : _a.call(rowConfig, row, rowIndex)) || false;
-    const isDisabled = ((_b = rowConfig == null ? void 0 : rowConfig.isDisabled) == null ? void 0 : _b.call(rowConfig, row, rowIndex)) || false;
-    const isClickable = !!(rowConfig == null ? void 0 : rowConfig.onRowClick);
-    const customRowClassName = ((_c = rowConfig == null ? void 0 : rowConfig.rowClassName) == null ? void 0 : _c.call(rowConfig, row, rowIndex)) || "";
-    const rowClassName = [
-      "taskon-table__row",
-      isHighlighted && "taskon-table__row--highlighted",
-      isDisabled && "taskon-table__row--disabled",
-      isClickable && "taskon-table__row--clickable",
-      customRowClassName
-    ].filter(Boolean).join(" ");
-    const handleRowClick = () => {
-      var _a2;
-      if (isClickable && !isDisabled) {
-        (_a2 = rowConfig == null ? void 0 : rowConfig.onRowClick) == null ? void 0 : _a2.call(rowConfig, row, rowIndex);
-      }
-    };
-    return /* @__PURE__ */ jsx("tr", { className: rowClassName, onClick: handleRowClick, children: columns.map((column) => {
-      const value = row[column.key];
-      const cellContent = column.render ? column.render(value, row, rowIndex) : value;
-      const cellClassName = [
-        "taskon-table__cell",
-        getCellAlignClassName(column.align),
-        column.ellipsis && "taskon-table__cell--ellipsis",
-        column.cellClassName
-      ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ jsx("td", { className: cellClassName, style: getColumnStyle(column), children: cellContent }, column.key);
-    }) }, rowKey);
-  });
-  const renderBody = () => {
-    if (!data || data.length === 0) {
-      if (loading) {
-        return renderLoading();
-      }
-      return renderEmpty();
-    }
-    return renderRows();
+  const finalTokens = mergeTokens(defaultTokens, derivedTokens, mergedMap);
+  return {
+    mode: resolvedMode,
+    compact: config.compact ?? false,
+    tokens: finalTokens
   };
-  return /* @__PURE__ */ jsxs("div", { className: `taskon-table-container ${className}`, style, children: [
-    /* @__PURE__ */ jsxs("table", { className: tableClassName, children: [
-      renderHeader(),
-      /* @__PURE__ */ jsx("tbody", { className: "taskon-table__body", children: renderBody() })
-    ] }),
-    loading && data && data.length > 0 && /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-overlay", children: /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-spinner" }) })
-  ] });
-}
-function WidgetShell({
-  widgetId,
-  isConfigLoading,
-  cloudTheme,
-  themeMode,
-  className,
-  errorMessage,
+}
+function ThemeProvider({
+  theme: themeConfig,
   children
 }) {
-  const resolvedCloudTheme = useMemo(() => {
-    if (!cloudTheme) return void 0;
-    if (!themeMode) return cloudTheme;
-    return {
-      ...cloudTheme,
-      mode: themeMode
+  const [portalContainer, setPortalContainer] = useState(
+    null
+  );
+  const [systemMode, setSystemMode] = useState(
+    () => getSystemThemeMode()
+  );
+  const effectiveMode = themeConfig == null ? void 0 : themeConfig.mode;
+  useEffect(() => {
+    if (effectiveMode !== "auto") {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => {
+      setSystemMode(e.matches ? "dark" : "light");
     };
-  }, [cloudTheme, themeMode]);
-  if (widgetId && isConfigLoading) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("div", { className: `${className}-loading`, children: [
-      /* @__PURE__ */ jsx("div", { className: `${className}-loading-spinner` }),
-      /* @__PURE__ */ jsx("span", { children: "Loading config..." })
-    ] }) });
-  }
-  if (errorMessage) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: `${className}-error`, children: /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: `${className}-error-message`,
-        style: { overflowWrap: "anywhere", wordBreak: "break-word" },
-        children: errorMessage
-      }
-    ) }) });
-  }
-  if (resolvedCloudTheme) {
-    return /* @__PURE__ */ jsx(ThemeProvider, { theme: resolvedCloudTheme, children });
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children });
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [effectiveMode]);
+  const resolvedTheme = useMemo(
+    () => resolveTheme(themeConfig, systemMode),
+    [themeConfig, systemMode]
+  );
+  const cssVariables = useMemo(
+    () => tokensToCssVariables(resolvedTheme.tokens),
+    [resolvedTheme.tokens]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: resolvedTheme, children: /* @__PURE__ */ jsx(ThemePortalContainerContext.Provider, { value: portalContainer, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: cssVariables,
+      "data-taskon-theme": resolvedTheme.mode,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setPortalContainer,
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: 0,
+              height: 0
+            }
+          }
+        ),
+        children
+      ]
+    }
+  ) }) });
 }
 export {
-  Button as B,
+  useFocusGuards as A,
+  Branch as B,
+  DismissableLayer as C,
   Dialog as D,
+  useTaskOnPortalContainer as E,
   FocusScope as F,
-  Pagination as P,
-  ReactRemoveScroll as R,
-  Table as T,
-  WidgetShell as W,
-  usePagination as a,
-  useId as b,
-  cloudThemeToReactTheme as c,
-  useFocusGuards as d,
-  hideOthers as h,
-  useResolvedWidgetConfig as u
+  Primitive as P,
+  Root$1 as R,
+  ThemeProvider as T,
+  useTaskOnTheme as a,
+  useWidgetLocale as b,
+  useTranslation as c,
+  clearLocaleCache as d,
+  createLocaleLoader as e,
+  createT as f,
+  isSupportedLocale as g,
+  useTaskOnContext as h,
+  interpolate as i,
+  composeRefs as j,
+  createContextScope as k,
+  useComposedRefs as l,
+  createSlot as m,
+  useControllableState as n,
+  Presence as o,
+  preloadWidgetLocale as p,
+  composeEventHandlers as q,
+  useCallbackRef$1 as r,
+  Portal$1 as s,
+  dispatchDiscreteCustomEvent as t,
+  useTaskOnAuth as u,
+  useLayoutEffect2 as v,
+  TaskOnContext as w,
+  useId as x,
+  hideOthers as y,
+  ReactRemoveScroll as z
 };