xmlui 0.10.20 → 0.10.21

package/dist/metadata/{collectedComponentMetadata-Dg7P-zOz.mjs → collectedComponentMetadata-MFUg6aSX.mjs}

@@ -1,7 +1,7 @@
 var _a;
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { forwardRef, useState, useEffect, useId, cloneElement, useRef, useInsertionEffect, useCallback, useContext, useLayoutEffect, useMemo, createContext, useTransition, memo, useDeferredValue, useImperativeHandle, createElement, useReducer, isValidElement, Fragment as Fragment$1, Children, startTransition } from "react";
+import React__default, { forwardRef, useState, useEffect, useId, cloneElement, useRef, useInsertionEffect, useCallback, useContext, useLayoutEffect, useMemo, createContext, useTransition, memo, useDeferredValue, createElement, useReducer, isValidElement, Fragment as Fragment$1, Children, startTransition } from "react";
 import { throttle, get, isEmpty, cloneDeep, omit, omitBy, isUndefined, noop as noop$2, isEqual, isArray, isNumber, set, isPlainObject, isString as isString$1, isNil, union, uniq, orderBy as orderBy$1, isObject, groupBy, sortBy, merge, defaultTo, capitalize, unset, setWith, keyBy, pick, isNaN as isNaN$1 } from "lodash-es";
 import { formatDistanceToNow, parse, format, parseISO, isValid, isToday, isYesterday, isTomorrow, isThisWeek, formatRelative, isThisYear, isSameDay, differenceInMinutes } from "date-fns";
 import classnames from "classnames";
@@ -34,12 +34,10 @@ import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import { visit } from "unist-util-visit";
 import { useQuery, useInfiniteQuery, QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { FixedSizeList } from "react-window";
-import AutoSizer from "react-virtualized-auto-sizer";
+import { Virtualizer } from "virtua";
 import { useReactTable, getPaginationRowModel, getCoreRowModel, flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { RenderPropSticky } from "react-sticky-el";
-import { Virtualizer } from "virtua";
 import * as HoverCard from "@radix-ui/react-hover-card";
 import Papa from "papaparse";
 import { Root as Root$1, List, Trigger as Trigger$1, Content as Content$1 } from "@radix-ui/react-tabs";
@@ -3717,6 +3715,576 @@ function extractPaddings(extractValue, props) {
     paddingBottom: paddingBottom || paddingVertical || padding
   };
 }
+function hashString(str) {
+  let hash = 5381;
+  let i = str.length;
+  while (i) {
+    hash = hash * 33 ^ str.charCodeAt(--i);
+  }
+  let s = (hash >>> 0).toString(36);
+  return s;
+}
+function toKebabCase(str) {
+  if (str.startsWith("--")) {
+    return str;
+  }
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+function stableJSONStringify(obj) {
+  return JSON.stringify(obj);
+}
+class StyleRegistry {
+  constructor() {
+    this.cache = /* @__PURE__ */ new Map();
+    this.rootClasses = /* @__PURE__ */ new Set();
+    this.injected = /* @__PURE__ */ new Set();
+    this.refCounts = /* @__PURE__ */ new Map();
+    this.ssrHashes = /* @__PURE__ */ new Set();
+  }
+  register(styles2) {
+    const key = stableJSONStringify(styles2);
+    const styleHash = hashString(key);
+    const cachedEntry = this.cache.get(styleHash);
+    if (cachedEntry) {
+      return cachedEntry;
+    }
+    const className = `css-${styleHash}`;
+    const css = this._generateCss(`.${className}`, styles2);
+    const entry = { className, styleHash, css };
+    this.cache.set(styleHash, entry);
+    return entry;
+  }
+  /**
+   * [PRIVATE] Recursively generates CSS rules from a style object.
+   * This is the new, more powerful engine.
+   * @param selector - The CSS selector for the current context (e.g., '.css-123' or '&:hover').
+   * @param styles - The style object to process.
+   * @returns A string of CSS rules.
+   */
+  _generateCss(selector, styles2) {
+    const directProps = [];
+    const nestedRules = [];
+    for (const key in styles2) {
+      const value = styles2[key];
+      if (typeof value === "object" && value !== null) {
+        nestedRules.push(this._processNestedRule(selector, key, value));
+      } else {
+        directProps.push(`${toKebabCase(key)}:${value};`);
+      }
+    }
+    let finalCss = "";
+    if (directProps.length > 0) {
+      finalCss += `${selector} {${directProps.join("")}}`;
+    }
+    finalCss += nestedRules.join("");
+    return finalCss;
+  }
+  _processNestedRule(parentSelector, nestedKey, nestedStyles) {
+    if (nestedKey.startsWith("@")) {
+      return `${nestedKey}{${this._generateCss(parentSelector, nestedStyles)}}`;
+    }
+    const newSelector = nestedKey.replace(/&/g, parentSelector);
+    return this._generateCss(newSelector, nestedStyles);
+  }
+  getSsrStyles() {
+    const allCss = Array.from(this.cache.values()).map((entry) => entry.css).join("");
+    return `@layer dynamic {${allCss}}`;
+  }
+  /**
+   * Adds a class name to be applied to the <html> tag.
+   */
+  addRootClasses(classNames) {
+    classNames.forEach((className) => {
+      this.rootClasses.add(className);
+    });
+  }
+  /**
+   * Returns a space-separated string of all collected html classes.
+   */
+  getRootClasses() {
+    return Array.from(this.rootClasses).join(" ");
+  }
+  // NEW: A helper to safely get the current reference count.
+  getRefCount(styleHash) {
+    return this.refCounts.get(styleHash) || 0;
+  }
+  /**
+   * Increments the reference count for a given style hash.
+   */
+  incrementRef(styleHash) {
+    const newCount = (this.refCounts.get(styleHash) || 0) + 1;
+    this.refCounts.set(styleHash, newCount);
+  }
+  /**
+   * Decrements the reference count for a given style hash.
+   * @returns {number} The new reference count.
+   */
+  decrementRef(styleHash) {
+    const currentCount = this.refCounts.get(styleHash) || 0;
+    const newCount = Math.max(0, currentCount - 1);
+    if (newCount > 0) {
+      this.refCounts.set(styleHash, newCount);
+    } else {
+      this.refCounts.delete(styleHash);
+    }
+    return newCount;
+  }
+}
+const IndexerContext = React__default.createContext({
+  indexing: false
+});
+function useIndexerContext() {
+  return useContext(IndexerContext);
+}
+const StyleContext = createContext(null);
+function StyleProvider({
+  children,
+  styleRegistry = new StyleRegistry(),
+  forceNew = false
+  // Optional prop to force a new registry
+}) {
+  const parentRegistry = useContext(StyleContext);
+  const [registry] = useState(() => {
+    const newRegistry = styleRegistry;
+    if (typeof window !== "undefined") {
+      const ssrTag = document.querySelector('style[data-style-registry="true"]');
+      const ssrHashes = ssrTag == null ? void 0 : ssrTag.getAttribute("data-ssr-hashes");
+      if (ssrHashes) {
+        let hashes = ssrHashes.split(",");
+        newRegistry.ssrHashes = new Set(hashes);
+        newRegistry.injected = new Set(hashes);
+      }
+    }
+    return newRegistry;
+  });
+  if (parentRegistry && !forceNew) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(StyleContext.Provider, { value: registry, children });
+}
+function useStyleRegistry() {
+  const registry = useContext(StyleContext);
+  if (registry === null) {
+    throw new Error("Component must be used within a StyleProvider");
+  }
+  return registry;
+}
+function useComponentStyle(styles2) {
+  const rootStyle = useMemo(() => {
+    return !styles2 || Object.keys(styles2).length === 0 ? EMPTY_OBJECT : {
+      "&": styles2
+      // "@container style(--screenSize: 1) or @container style(--screenSize: 2) ... etc": responsiveSizes,
+    };
+  }, [styles2]);
+  return useStyles(rootStyle);
+}
+const StyleInjectionTargetContext = createContext(null);
+function useDomRoot() {
+  const domRoot = useContext(StyleInjectionTargetContext);
+  return domRoot;
+}
+function useStyles(styles2, { prepend } = EMPTY_OBJECT) {
+  const { indexing } = useIndexerContext();
+  const domRoot = useDomRoot();
+  const injectionTarget = typeof document === "undefined" ? null : domRoot instanceof ShadowRoot ? domRoot : document.head;
+  const registry = useStyleRegistry();
+  const { className, styleHash } = useMemo(() => {
+    if (indexing || !styles2 || styles2 === EMPTY_OBJECT || Object.keys(styles2).length === 0) {
+      return { className: void 0, styleHash: void 0 };
+    }
+    return registry.register(styles2);
+  }, [indexing, registry, styles2]);
+  useInsertionEffect(() => {
+    if (!styleHash || registry.injected.has(styleHash)) {
+      return;
+    }
+    const { css } = registry.cache.get(styleHash) || {};
+    if (css) {
+      const styleElement = document.createElement("style");
+      styleElement.setAttribute("data-style-hash", styleHash);
+      styleElement.innerHTML = `@layer dynamic {
+${css}
+}`;
+      if (prepend) {
+        injectionTarget.insertBefore(styleElement, injectionTarget.firstChild.nextSibling);
+      } else {
+        injectionTarget.appendChild(styleElement);
+      }
+      registry.injected.add(styleHash);
+    }
+  }, [registry, styleHash, injectionTarget]);
+  useEffect(() => {
+    if (!styleHash) {
+      return;
+    }
+    registry.incrementRef(styleHash);
+    return () => {
+      registry.decrementRef(styleHash);
+      setTimeout(() => {
+        var _a2;
+        if (registry.getRefCount(styleHash) === 0 && !registry.ssrHashes.has(styleHash)) {
+          registry.injected.delete(styleHash);
+          (_a2 = injectionTarget.querySelector(`style[data-style-hash="${styleHash}"]`)) == null ? void 0 : _a2.remove();
+        }
+      }, 0);
+    };
+  }, [injectionTarget, registry, styleHash]);
+  return className;
+}
+const THEME_VAR_PREFIX = "xmlui";
+const themeVarCapturesRegex = /(\$[a-zA-Z][a-zA-Z0-9-_]*)/g;
+const booleanRegex = /^(true|false)$/;
+const starSizeRegex = /^\d*\*$/;
+const defaultCompResult = {
+  cssProps: {},
+  issues: /* @__PURE__ */ new Set()
+};
+function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
+  const result = {
+    cssProps: {},
+    issues: /* @__PURE__ */ new Set()
+  };
+  if (!!getOrientation(layoutContext)) {
+    result.cssProps.flexShrink = 0;
+  }
+  collectCss("width");
+  const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
+  if (horizontalStarSize !== null) {
+    result.cssProps.flex = horizontalStarSize;
+    result.cssProps.flexShrink = 1;
+  }
+  collectCss("minWidth");
+  collectCss("maxWidth");
+  collectCss("height");
+  const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
+  if (verticalStarSize !== null) {
+    result.cssProps.flex = verticalStarSize;
+    result.cssProps.flexShrink = 1;
+  }
+  collectCss("minHeight");
+  collectCss("maxHeight");
+  collectCss("top");
+  collectCss("right");
+  collectCss("bottom");
+  collectCss("left");
+  collectCss("gap");
+  collectCss("padding");
+  const paddingHorizontal = transformLayoutValue("paddingHorizontal");
+  if (paddingHorizontal) {
+    result.cssProps.paddingLeft = paddingHorizontal;
+    result.cssProps.paddingRight = paddingHorizontal;
+  }
+  collectCss("paddingRight");
+  collectCss("paddingLeft");
+  const paddingVertical = transformLayoutValue("paddingVertical");
+  if (paddingVertical) {
+    result.cssProps.paddingTop = paddingVertical;
+    result.cssProps.paddingBottom = paddingVertical;
+  }
+  collectCss("paddingTop");
+  collectCss("paddingBottom");
+  collectCss("margin");
+  const marginHorizontal = transformLayoutValue("marginHorizontal");
+  if (marginHorizontal) {
+    result.cssProps.marginLeft = marginHorizontal;
+    result.cssProps.marginRight = marginHorizontal;
+  }
+  collectCss("marginRight");
+  collectCss("marginLeft");
+  const marginVertical = transformLayoutValue("marginVertical");
+  if (marginVertical) {
+    result.cssProps.marginTop = marginVertical;
+    result.cssProps.marginBottom = marginVertical;
+  }
+  collectCss("marginTop");
+  collectCss("marginBottom");
+  collectCss("border");
+  const horizontalBorder = transformLayoutValue("borderHorizontal");
+  if (horizontalBorder) {
+    result.cssProps.borderLeft = horizontalBorder;
+    result.cssProps.borderRight = horizontalBorder;
+  }
+  collectCss("borderRight");
+  collectCss("borderLeft");
+  const verticalBorder = transformLayoutValue("borderVertical");
+  if (verticalBorder) {
+    result.cssProps.borderTop = verticalBorder;
+    result.cssProps.borderBottom = verticalBorder;
+  }
+  collectCss("borderTop");
+  collectCss("borderBottom");
+  collectCss("borderColor");
+  collectCss("borderStyle");
+  collectCss("borderWidth");
+  collectCss("borderRadius");
+  collectCss("radiusTopLeft", "borderTopLeftRadius");
+  collectCss("radiusTopRight", "borderTopRightRadius");
+  collectCss("radiusBottomLeft", "borderBottomLeftRadius");
+  collectCss("radiusBottomRight", "borderBottomRightRadius");
+  collectCss("color");
+  collectCss("fontFamily");
+  collectCss("fontSize");
+  collectCss("fontWeight");
+  collectCss("fontStyle");
+  collectCss("fontVariant");
+  collectCss("lineBreak");
+  collectCss("textDecoration");
+  collectCss("textDecorationLine");
+  collectCss("textDecorationColor");
+  collectCss("textDecorationStyle");
+  collectCss("textDecorationThickness");
+  collectCss("textIndent");
+  collectCss("textShadow");
+  collectCss("textUnderlineOffset");
+  collectCss("userSelect");
+  collectCss("letterSpacing");
+  collectCss("textTransform");
+  collectCss("lineHeight");
+  collectCss("textAlign");
+  collectCss("textAlignLast");
+  collectCss("textWrap");
+  collectCss("wordBreak");
+  collectCss("wordSpacing");
+  collectCss("wordWrap");
+  collectCss("writingMode");
+  collectCss("backgroundColor");
+  collectCss("background");
+  collectCss("boxShadow");
+  collectCss("direction");
+  collectCss("overflowX");
+  collectCss("overflowY");
+  collectCss("zIndex");
+  collectCss("opacity");
+  collectCss("zoom");
+  collectCss("cursor");
+  collectCss("whiteSpace");
+  collectCss("transform");
+  collectCss("outline");
+  collectCss("outlineWidth");
+  collectCss("outlineColor");
+  collectCss("outlineStyle");
+  collectCss("outlineOffset");
+  const wrapContent = transformLayoutValue("wrapContent");
+  if (wrapContent) {
+    result.cssProps.flexWrap = wrapContent === "true" ? "wrap" : "nowrap";
+  }
+  collectCss("canShrink", "flexShrink");
+  const canShrink = transformLayoutValue("canShrink");
+  if (canShrink) {
+    result.cssProps.flexShrink = canShrink === "true" ? 1 : 0;
+  }
+  if (isEmpty(result.cssProps) && isEmpty(result.issues)) {
+    return defaultCompResult;
+  }
+  return result;
+  function transformLayoutValue(prop) {
+    var _a2, _b;
+    const defValue = resolveSingleValue();
+    if (((_a2 = layoutContext == null ? void 0 : layoutContext.mediaSize) == null ? void 0 : _a2.sizeIndex) !== void 0) {
+      const sizeIndex = (_b = layoutContext.mediaSize) == null ? void 0 : _b.sizeIndex;
+      const xsValue = resolveSingleValue("xs");
+      const smValue = resolveSingleValue("sm");
+      const mdValue = resolveSingleValue("md");
+      const lgValue = resolveSingleValue("lg");
+      const xlValue = resolveSingleValue("xl");
+      const xxlValue = resolveSingleValue("xxl");
+      let mergedValue;
+      switch (sizeIndex) {
+        case 0:
+          mergedValue = xsValue ?? smValue ?? mdValue;
+          break;
+        case 1:
+          mergedValue = smValue ?? mdValue;
+          break;
+        case 2:
+          mergedValue = mdValue;
+          break;
+        case 3:
+          mergedValue = lgValue;
+          break;
+        case 4:
+          mergedValue = xlValue ?? lgValue;
+          break;
+        case 5:
+          mergedValue = xxlValue ?? xlValue ?? lgValue;
+          break;
+      }
+      return mergedValue ?? defValue;
+    }
+    return defValue;
+    function resolveSingleValue(sizeTag = "") {
+      const fullProp = sizeTag ? `${prop}-${sizeTag}` : prop;
+      let singleInput = layoutProps[fullProp];
+      if (singleInput == void 0) {
+        return;
+      }
+      if (typeof singleInput === "string") {
+        singleInput = singleInput.trim();
+      } else {
+        singleInput = singleInput.toString();
+      }
+      const value = singleInput ? singleInput.replace(
+        themeVarCapturesRegex,
+        (match) => toCssVar(match.trim())
+      ) : void 0;
+      if (singleInput !== value) {
+        return value;
+      }
+      const propPatterns = layoutPatterns[prop];
+      if (!propPatterns || propPatterns.length === 0) {
+        return value;
+      }
+      for (const pattern of propPatterns) {
+        if (pattern.test(value)) {
+          return value;
+        }
+      }
+      result.issues.add(fullProp);
+      return value;
+    }
+  }
+  function collectCss(prop, propCssName = "") {
+    const value = transformLayoutValue(prop);
+    if (value) {
+      result.cssProps[propCssName || prop] = value;
+    }
+  }
+  function getHorizontalStarSize(size, layoutContext2) {
+    if (!size) return null;
+    const orientation = getOrientation(layoutContext2);
+    return orientation === "horizontal" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
+  }
+  function getVerticalStarSize(size, layoutContext2) {
+    if (!size) return null;
+    const orientation = getOrientation(layoutContext2);
+    return orientation === "vertical" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
+  }
+  function getStarSizeNumber(input2) {
+    if (starSizeRegex.test(input2)) {
+      const numberPart = input2.slice(0, -1);
+      return numberPart === "" ? 1 : parseInt(numberPart, 10);
+    }
+    return null;
+  }
+  function getOrientation(layoutContext2) {
+    if (!layoutContext2) return;
+    let orientation = (layoutContext2 == null ? void 0 : layoutContext2.type) === "Stack" && (layoutContext2 == null ? void 0 : layoutContext2.orientation);
+    return orientation == null ? void 0 : orientation.toString();
+  }
+}
+function toCssVar(c) {
+  return `var(--${THEME_VAR_PREFIX}-${c.substring(1)})`;
+}
+const layoutPatterns = {
+  // --- Dimensions
+  width: [],
+  minWidth: [],
+  maxWidth: [],
+  height: [],
+  minHeight: [],
+  maxHeight: [],
+  gap: [],
+  // --- Positions
+  top: [],
+  right: [],
+  bottom: [],
+  left: [],
+  // --- Border
+  border: [],
+  borderTop: [],
+  borderRight: [],
+  borderBottom: [],
+  borderLeft: [],
+  borderColor: [],
+  borderStyle: [],
+  borderWidth: [],
+  borderHorizontal: [],
+  borderVertical: [],
+  // --- Border radius
+  borderRadius: [],
+  radiusTopLeft: [],
+  radiusTopRight: [],
+  radiusBottomLeft: [],
+  radiusBottomRight: [],
+  // --- Padding
+  padding: [],
+  paddingHorizontal: [],
+  paddingVertical: [],
+  paddingTop: [],
+  paddingRight: [],
+  paddingBottom: [],
+  paddingLeft: [],
+  // --- Margin
+  margin: [],
+  marginHorizontal: [],
+  marginVertical: [],
+  marginTop: [],
+  marginRight: [],
+  marginBottom: [],
+  marginLeft: [],
+  // --- Other
+  backgroundColor: [],
+  background: [],
+  boxShadow: [],
+  direction: [],
+  overflowX: [],
+  overflowY: [],
+  zIndex: [],
+  opacity: [],
+  // --- Typography
+  color: [],
+  fontFamily: [],
+  fontSize: [],
+  fontWeight: [],
+  fontStyle: [booleanRegex],
+  fontVariant: [],
+  lineBreak: [],
+  textDecoration: [],
+  userSelect: [],
+  letterSpacing: [],
+  textTransform: [],
+  lineHeight: [],
+  textAlign: [],
+  textWrap: [],
+  textAlignLast: [],
+  textIndent: [],
+  textShadow: [],
+  wordBreak: [],
+  wordSpacing: [],
+  wordWrap: [],
+  writingMode: [],
+  // --- Content rendering
+  wrapContent: [],
+  canShrink: [],
+  // --- Other
+  cursor: [],
+  zoom: [],
+  whiteSpace: [],
+  textDecorationLine: [],
+  textDecorationColor: [],
+  textDecorationStyle: [],
+  textDecorationThickness: [],
+  textUnderlineOffset: [],
+  transform: [],
+  // --- Outline
+  outline: [],
+  outlineWidth: [],
+  outlineColor: [],
+  outlineStyle: [],
+  outlineOffset: [],
+  // --- Animation
+  transition: []
+};
+const customVariantCache = /* @__PURE__ */ new Map();
+function setCustomVariantCache(variant, entry) {
+  customVariantCache.set(variant, {
+    ...entry,
+    createdAt: Date.now()
+  });
+}
+function hasCustomVariantCache(variant) {
+  return customVariantCache.has(variant);
+}
 const defaultProps$1d = {
   maxLines: 0,
   preserveLinebreaks: false,
@@ -3757,6 +4325,56 @@ const Text = forwardRef(function Text2({
     if (!variant || !TextVariantElement[variant]) return "div";
     return TextVariantElement[variant];
   }, [variant]);
+  const isCustomVariant = useMemo(() => {
+    return variant && !TextVariantElement[variant];
+  }, [variant]);
+  const variantSpec = useMemo(
+    () => {
+      if (!isCustomVariant) return EMPTY_OBJECT;
+      const subject = `-Text-${variant}`;
+      const cssInput = {
+        color: toCssVar(`$textColor${subject}`),
+        "font-family": toCssVar(`$fontFamily${subject}`),
+        "font-size": toCssVar(`$fontSize${subject}`),
+        "font-style": toCssVar(`$fontStyle${subject}`),
+        "font-weight": toCssVar(`$fontWeight${subject}`),
+        "font-stretch": toCssVar(`$fontStretch${subject}`),
+        "text-decoration-line": toCssVar(`$textDecorationLine${subject}`),
+        "text-decoration-color": toCssVar(`$textDecorationColor${subject}`),
+        "text-decoration-style": toCssVar(`$textDecorationStyle${subject}`),
+        "text-decoration-thickness": toCssVar(`$textDecorationThickness${subject}`),
+        "text-underline-offset": toCssVar(`$textUnderlineOffset${subject}`),
+        "line-height": toCssVar(`$lineHeight${subject}`),
+        "background-color": toCssVar(`$backgroundColor${subject}`),
+        "text-transform": toCssVar(`$textTransform${subject}`),
+        "letter-spacing": toCssVar(`$letterSpacing${subject}`),
+        "word-spacing": toCssVar(`$wordSpacing${subject}`),
+        "text-shadow": toCssVar(`$textShadow${subject}`),
+        "text-indent": toCssVar(`$textIndent${subject}`),
+        "text-align": toCssVar(`$textAlign${subject}`),
+        "text-align-last": toCssVar(`$textAlignLast${subject}`),
+        "word-break": toCssVar(`$wordBreak${subject}`),
+        "word-wrap": toCssVar(`$wordWrap${subject}`),
+        direction: toCssVar(`$direction${subject}`),
+        "writing-mode": toCssVar(`$writingMode${subject}`),
+        "line-break": toCssVar(`$lineBreak${subject}`)
+      };
+      return cssInput;
+    },
+    [isCustomVariant, variant]
+  );
+  const customVariantClassName = useComponentStyle(variantSpec);
+  useEffect(() => {
+    if (isCustomVariant && variant && customVariantClassName) {
+      if (!hasCustomVariantCache(variant)) {
+        setCustomVariantCache(variant, {
+          className: customVariantClassName,
+          cssText: ""
+          // Will be populated when CSS generation is implemented
+        });
+      }
+    }
+  }, [isCustomVariant, variant, customVariantClassName]);
   const overflowClasses = useMemo(() => {
     const classes = {};
     if (!overflowMode) {
@@ -3812,7 +4430,8 @@ const Text = forwardRef(function Text2({
       className: classnames(
         syntaxHighlightClasses,
         styles$1d.text,
-        styles$1d[variant || "default"],
+        // Use custom variant className if it's a custom variant, otherwise use predefined variant style
+        isCustomVariant ? customVariantClassName : styles$1d[variant || "default"],
         {
           [styles$1d.preserveLinebreaks]: preserveLinebreaks2,
           ...overflowClasses,
@@ -4213,453 +4832,109 @@ const passwordInputComponentRenderer = createComponentRenderer(
   }
 );
 const wrapper$l = "_wrapper_1h2jx_14";
-const root$3 = "_root_1h2jx_17";
-const styles$1c = {
-  wrapper: wrapper$l,
-  root: root$3
-};
-const parsedHVarCache = {};
-function parseHVar(input2) {
-  if (parsedHVarCache[input2] !== void 0) {
-    return parsedHVarCache[input2];
-  }
-  const parts = input2.split(/-[A-Z]+/);
-  if (parts.length !== 2) {
-    parsedHVarCache[input2] = null;
-    return parsedHVarCache[input2];
-  }
-  const firstPart = parts[0];
-  const classessParts = firstPart.split(":");
-  const attribute = classessParts[classessParts.length - 1];
-  const classes = classessParts.length > 1 ? classessParts.slice(0, classessParts.length - 1) : [];
-  const secondPart = input2.substring(firstPart.length + 1);
-  const [compName, ...rest] = secondPart.split("-");
-  const traitsAndStates = secondPart.substring(compName.length).split("--");
-  const states = [];
-  const traits = [];
-  traitsAndStates.forEach((part) => {
-    if (!part.includes("-") && part) {
-      states.push(part);
-    } else {
-      part.split("-").forEach((trait) => {
-        if (trait) {
-          traits.push(trait);
-        }
-      });
-    }
-  });
-  parsedHVarCache[input2] = {
-    classes,
-    attribute,
-    component: compName,
-    traits,
-    states
-  };
-  return parsedHVarCache[input2];
-}
-function createCombinations(arr = []) {
-  const stateCombinations = [];
-  for (let i = 1; i <= arr.length; i++) {
-    for (let j = 0; j <= arr.length - i; j++) {
-      stateCombinations.push(arr.slice(j, j + i));
-    }
-  }
-  return stateCombinations.sort((a, b) => b.length - a.length);
-}
-function matchThemeVar(themeVar, availableThemeVars = []) {
-  const hvar = parseHVar(themeVar);
-  if (!hvar) {
-    return;
-  }
-  const stateCombinations = createCombinations(hvar.states);
-  const traitCombinations = createCombinations(hvar.traits);
-  const sortedTraitCombinations = [];
-  traitCombinations.forEach((traitComb) => {
-    let result = "";
-    traitComb.forEach((t) => {
-      result = `${result}-${t}`;
-    });
-    sortedTraitCombinations.push(result);
-  });
-  sortedTraitCombinations.push("");
-  const sortedStateCombinations = [];
-  stateCombinations.forEach((stateComb) => {
-    let result = "";
-    stateComb.forEach((s) => {
-      result = `${result}--${s}`;
-    });
-    sortedStateCombinations.push(result);
-  });
-  sortedStateCombinations.push("");
-  const componentParts = [hvar.component, ...hvar.classes];
-  const from = [];
-  sortedStateCombinations.forEach((stateComb) => {
-    sortedTraitCombinations.forEach((traitComb) => {
-      componentParts.forEach((componentPart) => {
-        from.push(`${hvar.attribute}-${componentPart}${traitComb}${stateComb}`);
-      });
-    });
-  });
-  let matchedValue;
-  for (let i = availableThemeVars.length - 1; i >= 0; i--) {
-    const themeVars2 = availableThemeVars[i];
-    let foundValue = from.find((themeVar2) => themeVars2[themeVar2] !== void 0);
-    if (foundValue) {
-      matchedValue = foundValue;
-      break;
-    }
-  }
-  const forValue = from[0];
-  return {
-    forValue,
-    matchedValue,
-    from
-  };
-}
-const THEME_VAR_PREFIX = "xmlui";
-const themeVarCapturesRegex = /(\$[a-zA-Z][a-zA-Z0-9-_]*)/g;
-const booleanRegex = /^(true|false)$/;
-const starSizeRegex = /^\d*\*$/;
-const defaultCompResult = {
-  cssProps: {},
-  issues: /* @__PURE__ */ new Set()
-};
-function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
-  const result = {
-    cssProps: {},
-    issues: /* @__PURE__ */ new Set()
-  };
-  if (!!getOrientation(layoutContext)) {
-    result.cssProps.flexShrink = 0;
-  }
-  collectCss("width");
-  const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
-  if (horizontalStarSize !== null) {
-    result.cssProps.flex = horizontalStarSize;
-    result.cssProps.flexShrink = 1;
-  }
-  collectCss("minWidth");
-  collectCss("maxWidth");
-  collectCss("height");
-  const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
-  if (verticalStarSize !== null) {
-    result.cssProps.flex = verticalStarSize;
-    result.cssProps.flexShrink = 1;
-  }
-  collectCss("minHeight");
-  collectCss("maxHeight");
-  collectCss("top");
-  collectCss("right");
-  collectCss("bottom");
-  collectCss("left");
-  collectCss("gap");
-  collectCss("padding");
-  const paddingHorizontal = transformLayoutValue("paddingHorizontal");
-  if (paddingHorizontal) {
-    result.cssProps.paddingLeft = paddingHorizontal;
-    result.cssProps.paddingRight = paddingHorizontal;
-  }
-  collectCss("paddingRight");
-  collectCss("paddingLeft");
-  const paddingVertical = transformLayoutValue("paddingVertical");
-  if (paddingVertical) {
-    result.cssProps.paddingTop = paddingVertical;
-    result.cssProps.paddingBottom = paddingVertical;
-  }
-  collectCss("paddingTop");
-  collectCss("paddingBottom");
-  collectCss("margin");
-  const marginHorizontal = transformLayoutValue("marginHorizontal");
-  if (marginHorizontal) {
-    result.cssProps.marginLeft = marginHorizontal;
-    result.cssProps.marginRight = marginHorizontal;
-  }
-  collectCss("marginRight");
-  collectCss("marginLeft");
-  const marginVertical = transformLayoutValue("marginVertical");
-  if (marginVertical) {
-    result.cssProps.marginTop = marginVertical;
-    result.cssProps.marginBottom = marginVertical;
-  }
-  collectCss("marginTop");
-  collectCss("marginBottom");
-  collectCss("border");
-  const horizontalBorder = transformLayoutValue("borderHorizontal");
-  if (horizontalBorder) {
-    result.cssProps.borderLeft = horizontalBorder;
-    result.cssProps.borderRight = horizontalBorder;
-  }
-  collectCss("borderRight");
-  collectCss("borderLeft");
-  const verticalBorder = transformLayoutValue("borderVertical");
-  if (verticalBorder) {
-    result.cssProps.borderTop = verticalBorder;
-    result.cssProps.borderBottom = verticalBorder;
-  }
-  collectCss("borderTop");
-  collectCss("borderBottom");
-  collectCss("borderColor");
-  collectCss("borderStyle");
-  collectCss("borderWidth");
-  collectCss("borderRadius");
-  collectCss("radiusTopLeft", "borderTopLeftRadius");
-  collectCss("radiusTopRight", "borderTopRightRadius");
-  collectCss("radiusBottomLeft", "borderBottomLeftRadius");
-  collectCss("radiusBottomRight", "borderBottomRightRadius");
-  collectCss("color");
-  collectCss("fontFamily");
-  collectCss("fontSize");
-  collectCss("fontWeight");
-  collectCss("fontStyle");
-  collectCss("fontVariant");
-  collectCss("lineBreak");
-  collectCss("textDecoration");
-  collectCss("textDecorationLine");
-  collectCss("textDecorationColor");
-  collectCss("textDecorationStyle");
-  collectCss("textDecorationThickness");
-  collectCss("textIndent");
-  collectCss("textShadow");
-  collectCss("textUnderlineOffset");
-  collectCss("userSelect");
-  collectCss("letterSpacing");
-  collectCss("textTransform");
-  collectCss("lineHeight");
-  collectCss("textAlign");
-  collectCss("textAlignLast");
-  collectCss("textWrap");
-  collectCss("wordBreak");
-  collectCss("wordSpacing");
-  collectCss("wordWrap");
-  collectCss("writingMode");
-  collectCss("backgroundColor");
-  collectCss("background");
-  collectCss("boxShadow");
-  collectCss("direction");
-  collectCss("overflowX");
-  collectCss("overflowY");
-  collectCss("zIndex");
-  collectCss("opacity");
-  collectCss("zoom");
-  collectCss("cursor");
-  collectCss("whiteSpace");
-  collectCss("transform");
-  collectCss("outline");
-  collectCss("outlineWidth");
-  collectCss("outlineColor");
-  collectCss("outlineStyle");
-  collectCss("outlineOffset");
-  const wrapContent = transformLayoutValue("wrapContent");
-  if (wrapContent) {
-    result.cssProps.flexWrap = wrapContent === "true" ? "wrap" : "nowrap";
-  }
-  collectCss("canShrink", "flexShrink");
-  const canShrink = transformLayoutValue("canShrink");
-  if (canShrink) {
-    result.cssProps.flexShrink = canShrink === "true" ? 1 : 0;
+const root$3 = "_root_1h2jx_17";
+const styles$1c = {
+  wrapper: wrapper$l,
+  root: root$3
+};
+const parsedHVarCache = {};
+function parseHVar(input2) {
+  if (parsedHVarCache[input2] !== void 0) {
+    return parsedHVarCache[input2];
   }
-  if (isEmpty(result.cssProps) && isEmpty(result.issues)) {
-    return defaultCompResult;
+  const parts = input2.split(/-[A-Z]+/);
+  if (parts.length !== 2) {
+    parsedHVarCache[input2] = null;
+    return parsedHVarCache[input2];
   }
-  return result;
-  function transformLayoutValue(prop) {
-    var _a2, _b;
-    const defValue = resolveSingleValue();
-    if (((_a2 = layoutContext == null ? void 0 : layoutContext.mediaSize) == null ? void 0 : _a2.sizeIndex) !== void 0) {
-      const sizeIndex = (_b = layoutContext.mediaSize) == null ? void 0 : _b.sizeIndex;
-      const xsValue = resolveSingleValue("xs");
-      const smValue = resolveSingleValue("sm");
-      const mdValue = resolveSingleValue("md");
-      const lgValue = resolveSingleValue("lg");
-      const xlValue = resolveSingleValue("xl");
-      const xxlValue = resolveSingleValue("xxl");
-      let mergedValue;
-      switch (sizeIndex) {
-        case 0:
-          mergedValue = xsValue ?? smValue ?? mdValue;
-          break;
-        case 1:
-          mergedValue = smValue ?? mdValue;
-          break;
-        case 2:
-          mergedValue = mdValue;
-          break;
-        case 3:
-          mergedValue = lgValue;
-          break;
-        case 4:
-          mergedValue = xlValue ?? lgValue;
-          break;
-        case 5:
-          mergedValue = xxlValue ?? xlValue ?? lgValue;
-          break;
-      }
-      return mergedValue ?? defValue;
-    }
-    return defValue;
-    function resolveSingleValue(sizeTag = "") {
-      const fullProp = sizeTag ? `${prop}-${sizeTag}` : prop;
-      let singleInput = layoutProps[fullProp];
-      if (singleInput == void 0) {
-        return;
-      }
-      if (typeof singleInput === "string") {
-        singleInput = singleInput.trim();
-      } else {
-        singleInput = singleInput.toString();
-      }
-      const value = singleInput ? singleInput.replace(
-        themeVarCapturesRegex,
-        (match) => toCssVar(match.trim())
-      ) : void 0;
-      if (singleInput !== value) {
-        return value;
-      }
-      const propPatterns = layoutPatterns[prop];
-      if (!propPatterns || propPatterns.length === 0) {
-        return value;
-      }
-      for (const pattern of propPatterns) {
-        if (pattern.test(value)) {
-          return value;
+  const firstPart = parts[0];
+  const classessParts = firstPart.split(":");
+  const attribute = classessParts[classessParts.length - 1];
+  const classes = classessParts.length > 1 ? classessParts.slice(0, classessParts.length - 1) : [];
+  const secondPart = input2.substring(firstPart.length + 1);
+  const [compName, ...rest] = secondPart.split("-");
+  const traitsAndStates = secondPart.substring(compName.length).split("--");
+  const states = [];
+  const traits = [];
+  traitsAndStates.forEach((part) => {
+    if (!part.includes("-") && part) {
+      states.push(part);
+    } else {
+      part.split("-").forEach((trait) => {
+        if (trait) {
+          traits.push(trait);
         }
-      }
-      result.issues.add(fullProp);
-      return value;
+      });
     }
-  }
-  function collectCss(prop, propCssName = "") {
-    const value = transformLayoutValue(prop);
-    if (value) {
-      result.cssProps[propCssName || prop] = value;
+  });
+  parsedHVarCache[input2] = {
+    classes,
+    attribute,
+    component: compName,
+    traits,
+    states
+  };
+  return parsedHVarCache[input2];
+}
+function createCombinations(arr = []) {
+  const stateCombinations = [];
+  for (let i = 1; i <= arr.length; i++) {
+    for (let j = 0; j <= arr.length - i; j++) {
+      stateCombinations.push(arr.slice(j, j + i));
     }
   }
-  function getHorizontalStarSize(size, layoutContext2) {
-    if (!size) return null;
-    const orientation = getOrientation(layoutContext2);
-    return orientation === "horizontal" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
-  }
-  function getVerticalStarSize(size, layoutContext2) {
-    if (!size) return null;
-    const orientation = getOrientation(layoutContext2);
-    return orientation === "vertical" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
+  return stateCombinations.sort((a, b) => b.length - a.length);
+}
+function matchThemeVar(themeVar, availableThemeVars = []) {
+  const hvar = parseHVar(themeVar);
+  if (!hvar) {
+    return;
   }
-  function getStarSizeNumber(input2) {
-    if (starSizeRegex.test(input2)) {
-      const numberPart = input2.slice(0, -1);
-      return numberPart === "" ? 1 : parseInt(numberPart, 10);
+  const stateCombinations = createCombinations(hvar.states);
+  const traitCombinations = createCombinations(hvar.traits);
+  const sortedTraitCombinations = [];
+  traitCombinations.forEach((traitComb) => {
+    let result = "";
+    traitComb.forEach((t) => {
+      result = `${result}-${t}`;
+    });
+    sortedTraitCombinations.push(result);
+  });
+  sortedTraitCombinations.push("");
+  const sortedStateCombinations = [];
+  stateCombinations.forEach((stateComb) => {
+    let result = "";
+    stateComb.forEach((s) => {
+      result = `${result}--${s}`;
+    });
+    sortedStateCombinations.push(result);
+  });
+  sortedStateCombinations.push("");
+  const componentParts = [hvar.component, ...hvar.classes];
+  const from = [];
+  sortedStateCombinations.forEach((stateComb) => {
+    sortedTraitCombinations.forEach((traitComb) => {
+      componentParts.forEach((componentPart) => {
+        from.push(`${hvar.attribute}-${componentPart}${traitComb}${stateComb}`);
+      });
+    });
+  });
+  let matchedValue;
+  for (let i = availableThemeVars.length - 1; i >= 0; i--) {
+    const themeVars2 = availableThemeVars[i];
+    let foundValue = from.find((themeVar2) => themeVars2[themeVar2] !== void 0);
+    if (foundValue) {
+      matchedValue = foundValue;
+      break;
     }
-    return null;
-  }
-  function getOrientation(layoutContext2) {
-    if (!layoutContext2) return;
-    let orientation = (layoutContext2 == null ? void 0 : layoutContext2.type) === "Stack" && (layoutContext2 == null ? void 0 : layoutContext2.orientation);
-    return orientation == null ? void 0 : orientation.toString();
   }
+  const forValue = from[0];
+  return {
+    forValue,
+    matchedValue,
+    from
+  };
 }
-function toCssVar(c) {
-  return `var(--${THEME_VAR_PREFIX}-${c.substring(1)})`;
-}
-const layoutPatterns = {
-  // --- Dimensions
-  width: [],
-  minWidth: [],
-  maxWidth: [],
-  height: [],
-  minHeight: [],
-  maxHeight: [],
-  gap: [],
-  // --- Positions
-  top: [],
-  right: [],
-  bottom: [],
-  left: [],
-  // --- Border
-  border: [],
-  borderTop: [],
-  borderRight: [],
-  borderBottom: [],
-  borderLeft: [],
-  borderColor: [],
-  borderStyle: [],
-  borderWidth: [],
-  borderHorizontal: [],
-  borderVertical: [],
-  // --- Border radius
-  borderRadius: [],
-  radiusTopLeft: [],
-  radiusTopRight: [],
-  radiusBottomLeft: [],
-  radiusBottomRight: [],
-  // --- Padding
-  padding: [],
-  paddingHorizontal: [],
-  paddingVertical: [],
-  paddingTop: [],
-  paddingRight: [],
-  paddingBottom: [],
-  paddingLeft: [],
-  // --- Margin
-  margin: [],
-  marginHorizontal: [],
-  marginVertical: [],
-  marginTop: [],
-  marginRight: [],
-  marginBottom: [],
-  marginLeft: [],
-  // --- Other
-  backgroundColor: [],
-  background: [],
-  boxShadow: [],
-  direction: [],
-  overflowX: [],
-  overflowY: [],
-  zIndex: [],
-  opacity: [],
-  // --- Typography
-  color: [],
-  fontFamily: [],
-  fontSize: [],
-  fontWeight: [],
-  fontStyle: [booleanRegex],
-  fontVariant: [],
-  lineBreak: [],
-  textDecoration: [],
-  userSelect: [],
-  letterSpacing: [],
-  textTransform: [],
-  lineHeight: [],
-  textAlign: [],
-  textWrap: [],
-  textAlignLast: [],
-  textIndent: [],
-  textShadow: [],
-  wordBreak: [],
-  wordSpacing: [],
-  wordWrap: [],
-  writingMode: [],
-  // --- Content rendering
-  wrapContent: [],
-  canShrink: [],
-  // --- Other
-  cursor: [],
-  zoom: [],
-  whiteSpace: [],
-  textDecorationLine: [],
-  textDecorationColor: [],
-  textDecorationStyle: [],
-  textDecorationThickness: [],
-  textUnderlineOffset: [],
-  transform: [],
-  // --- Outline
-  outline: [],
-  outlineWidth: [],
-  outlineColor: [],
-  outlineStyle: [],
-  outlineOffset: [],
-  // --- Animation
-  transition: []
-};
 function isThemeVarName(varName) {
   return typeof varName === "string" && (varName == null ? void 0 : varName.startsWith("$"));
 }
@@ -6498,222 +6773,6 @@ const XmlUiRedThemeDefinition = {
   themeVars: { ...redThemeColors }
 };
 const ThemeToneKeys = ["light", "dark"];
-function hashString(str) {
-  let hash = 5381;
-  let i = str.length;
-  while (i) {
-    hash = hash * 33 ^ str.charCodeAt(--i);
-  }
-  let s = (hash >>> 0).toString(36);
-  return s;
-}
-function toKebabCase(str) {
-  if (str.startsWith("--")) {
-    return str;
-  }
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
-function stableJSONStringify(obj) {
-  return JSON.stringify(obj);
-}
-class StyleRegistry {
-  constructor() {
-    this.cache = /* @__PURE__ */ new Map();
-    this.rootClasses = /* @__PURE__ */ new Set();
-    this.injected = /* @__PURE__ */ new Set();
-    this.refCounts = /* @__PURE__ */ new Map();
-    this.ssrHashes = /* @__PURE__ */ new Set();
-  }
-  register(styles2) {
-    const key = stableJSONStringify(styles2);
-    const styleHash = hashString(key);
-    const cachedEntry = this.cache.get(styleHash);
-    if (cachedEntry) {
-      return cachedEntry;
-    }
-    const className = `css-${styleHash}`;
-    const css = this._generateCss(`.${className}`, styles2);
-    const entry = { className, styleHash, css };
-    this.cache.set(styleHash, entry);
-    return entry;
-  }
-  /**
-   * [PRIVATE] Recursively generates CSS rules from a style object.
-   * This is the new, more powerful engine.
-   * @param selector - The CSS selector for the current context (e.g., '.css-123' or '&:hover').
-   * @param styles - The style object to process.
-   * @returns A string of CSS rules.
-   */
-  _generateCss(selector, styles2) {
-    const directProps = [];
-    const nestedRules = [];
-    for (const key in styles2) {
-      const value = styles2[key];
-      if (typeof value === "object" && value !== null) {
-        nestedRules.push(this._processNestedRule(selector, key, value));
-      } else {
-        directProps.push(`${toKebabCase(key)}:${value};`);
-      }
-    }
-    let finalCss = "";
-    if (directProps.length > 0) {
-      finalCss += `${selector} {${directProps.join("")}}`;
-    }
-    finalCss += nestedRules.join("");
-    return finalCss;
-  }
-  _processNestedRule(parentSelector, nestedKey, nestedStyles) {
-    if (nestedKey.startsWith("@")) {
-      return `${nestedKey}{${this._generateCss(parentSelector, nestedStyles)}}`;
-    }
-    const newSelector = nestedKey.replace(/&/g, parentSelector);
-    return this._generateCss(newSelector, nestedStyles);
-  }
-  getSsrStyles() {
-    const allCss = Array.from(this.cache.values()).map((entry) => entry.css).join("");
-    return `@layer dynamic {${allCss}}`;
-  }
-  /**
-   * Adds a class name to be applied to the <html> tag.
-   */
-  addRootClasses(classNames) {
-    classNames.forEach((className) => {
-      this.rootClasses.add(className);
-    });
-  }
-  /**
-   * Returns a space-separated string of all collected html classes.
-   */
-  getRootClasses() {
-    return Array.from(this.rootClasses).join(" ");
-  }
-  // NEW: A helper to safely get the current reference count.
-  getRefCount(styleHash) {
-    return this.refCounts.get(styleHash) || 0;
-  }
-  /**
-   * Increments the reference count for a given style hash.
-   */
-  incrementRef(styleHash) {
-    const newCount = (this.refCounts.get(styleHash) || 0) + 1;
-    this.refCounts.set(styleHash, newCount);
-  }
-  /**
-   * Decrements the reference count for a given style hash.
-   * @returns {number} The new reference count.
-   */
-  decrementRef(styleHash) {
-    const currentCount = this.refCounts.get(styleHash) || 0;
-    const newCount = Math.max(0, currentCount - 1);
-    if (newCount > 0) {
-      this.refCounts.set(styleHash, newCount);
-    } else {
-      this.refCounts.delete(styleHash);
-    }
-    return newCount;
-  }
-}
-const IndexerContext = React__default.createContext({
-  indexing: false
-});
-function useIndexerContext() {
-  return useContext(IndexerContext);
-}
-const StyleContext = createContext(null);
-function StyleProvider({
-  children,
-  styleRegistry = new StyleRegistry(),
-  forceNew = false
-  // Optional prop to force a new registry
-}) {
-  const parentRegistry = useContext(StyleContext);
-  const [registry] = useState(() => {
-    const newRegistry = styleRegistry;
-    if (typeof window !== "undefined") {
-      const ssrTag = document.querySelector('style[data-style-registry="true"]');
-      const ssrHashes = ssrTag == null ? void 0 : ssrTag.getAttribute("data-ssr-hashes");
-      if (ssrHashes) {
-        let hashes = ssrHashes.split(",");
-        newRegistry.ssrHashes = new Set(hashes);
-        newRegistry.injected = new Set(hashes);
-      }
-    }
-    return newRegistry;
-  });
-  if (parentRegistry && !forceNew) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(StyleContext.Provider, { value: registry, children });
-}
-function useStyleRegistry() {
-  const registry = useContext(StyleContext);
-  if (registry === null) {
-    throw new Error("Component must be used within a StyleProvider");
-  }
-  return registry;
-}
-function useComponentStyle(styles2) {
-  const rootStyle = useMemo(() => {
-    return !styles2 || Object.keys(styles2).length === 0 ? EMPTY_OBJECT : {
-      "&": styles2
-      // "@container style(--screenSize: 1) or @container style(--screenSize: 2) ... etc": responsiveSizes,
-    };
-  }, [styles2]);
-  return useStyles(rootStyle);
-}
-const StyleInjectionTargetContext = createContext(null);
-function useDomRoot() {
-  const domRoot = useContext(StyleInjectionTargetContext);
-  return domRoot;
-}
-function useStyles(styles2, { prepend } = EMPTY_OBJECT) {
-  const { indexing } = useIndexerContext();
-  const domRoot = useDomRoot();
-  const injectionTarget = typeof document === "undefined" ? null : domRoot instanceof ShadowRoot ? domRoot : document.head;
-  const registry = useStyleRegistry();
-  const { className, styleHash } = useMemo(() => {
-    if (indexing || !styles2 || styles2 === EMPTY_OBJECT || Object.keys(styles2).length === 0) {
-      return { className: void 0, styleHash: void 0 };
-    }
-    return registry.register(styles2);
-  }, [indexing, registry, styles2]);
-  useInsertionEffect(() => {
-    if (!styleHash || registry.injected.has(styleHash)) {
-      return;
-    }
-    const { css } = registry.cache.get(styleHash) || {};
-    if (css) {
-      const styleElement = document.createElement("style");
-      styleElement.setAttribute("data-style-hash", styleHash);
-      styleElement.innerHTML = `@layer dynamic {
-${css}
-}`;
-      if (prepend) {
-        injectionTarget.insertBefore(styleElement, injectionTarget.firstChild.nextSibling);
-      } else {
-        injectionTarget.appendChild(styleElement);
-      }
-      registry.injected.add(styleHash);
-    }
-  }, [registry, styleHash, injectionTarget]);
-  useEffect(() => {
-    if (!styleHash) {
-      return;
-    }
-    registry.incrementRef(styleHash);
-    return () => {
-      registry.decrementRef(styleHash);
-      setTimeout(() => {
-        var _a2;
-        if (registry.getRefCount(styleHash) === 0 && !registry.ssrHashes.has(styleHash)) {
-          registry.injected.delete(styleHash);
-          (_a2 = injectionTarget.querySelector(`style[data-style-hash="${styleHash}"]`)) == null ? void 0 : _a2.remove();
-        }
-      }, 0);
-    };
-  }, [injectionTarget, registry, styleHash]);
-  return className;
-}
 function useCompiledTheme(activeTheme, activeTone, themes = EMPTY_ARRAY, resources = EMPTY_OBJECT, resourceMap = EMPTY_OBJECT) {
   const componentRegistry = useComponentRegistry();
   const { componentThemeVars, componentDefaultThemeVars } = componentRegistry;
@@ -8391,6 +8450,7 @@ function App({
   name,
   className,
   applyDefaultContentPadding,
+  registerComponentApi,
   ...rest
 }) {
   const { getThemeVar } = useTheme();
@@ -8858,7 +8918,7 @@ const AppMd = createMetadata({
     }
   }
 });
-function AppNode({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) {
+function AppNode({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler, registerComponentApi }) {
   const processedNavRef = useRef(false);
   const layoutType = useMemo(
     () => extractValue(node.props.layout),
@@ -9074,6 +9134,7 @@ function AppNode({ node, extractValue, renderChild: renderChild2, className, loo
       navPanelDef: NavPanel3,
       logoContentDef: node.props.logoTemplate,
       renderChild: renderChild2,
+      registerComponentApi,
       children: [
         renderedContent,
         /* @__PURE__ */ jsx(SearchIndexCollector, { Pages: Pages2, renderChild: renderChild2 })
@@ -9205,7 +9266,7 @@ function PageIndexer({
 const appRenderer = createComponentRenderer(
   COMP$1t,
   AppMd,
-  ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
+  ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler, registerComponentApi }) => {
     return /* @__PURE__ */ jsx(
       AppNode,
       {
@@ -9213,7 +9274,8 @@ const appRenderer = createComponentRenderer(
         renderChild: renderChild2,
         extractValue,
         className,
-        lookupEventHandler
+        lookupEventHandler,
+        registerComponentApi
       }
     );
   }
@@ -14224,7 +14286,6 @@ const Form = forwardRef(function({
   ...rest
 }, ref) {
   const formRef = useRef(null);
-  useImperativeHandle(ref, () => formRef.current);
   const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = useState(false);
   const requestModalFormClose = useModalFormClose();
   const isEnabled2 = enabled2 && !formState.submitInProgress;
@@ -25549,7 +25610,7 @@ function hierarchyToNative(hierarchyData, fieldConfig) {
     treeItemsById
   };
 }
-const TreeRow = memo(({ index, style: style2, data }) => {
+const TreeRow = memo(({ index, data }) => {
   const {
     nodes,
     toggleNode,
@@ -25606,7 +25667,7 @@ const TreeRow = memo(({ index, style: style2, data }) => {
   );
   const nodeWithState = treeItem;
   const isLoading = nodeWithState.loadingState === "loading";
-  return /* @__PURE__ */ jsx("div", { style: { ...style2, width: "auto", minWidth: "100%", display: "flex" }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", display: "flex" }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: classnames(styles$D.rowWrapper, {
@@ -25734,7 +25795,6 @@ const TreeComponent = memo((props) => {
     iconCollapsed = defaultProps$E.iconCollapsed,
     iconExpanded = defaultProps$E.iconExpanded,
     iconSize = defaultProps$E.iconSize,
-    itemHeight = defaultProps$E.itemHeight,
     animateExpand = defaultProps$E.animateExpand,
     expandRotation = defaultProps$E.expandRotation,
     onItemClick,
@@ -26197,10 +26257,6 @@ const TreeComponent = memo((props) => {
     animateExpand,
     expandRotation
   ]);
-  const getItemKey = useCallback((index, data2) => {
-    const node = data2.nodes[index];
-    return (node == null ? void 0 : node.key) || (node == null ? void 0 : node.id) || `fallback-${index}`;
-  }, []);
   const treeApiMethods = useMemo(() => {
     return {
       // Expansion methods
@@ -26376,14 +26432,14 @@ const TreeComponent = memo((props) => {
             (item2) => String(item2.key) === String(nodeId)
           );
           if (nodeIndex >= 0 && listRef.current) {
-            listRef.current.scrollToItem(nodeIndex, "center");
+            listRef.current.scrollToIndex(nodeIndex, { align: "center" });
           }
         }, 0);
       },
       scrollToItem: (nodeId) => {
         const nodeIndex = findNodeIndexById(nodeId);
         if (nodeIndex >= 0 && listRef.current) {
-          listRef.current.scrollToItem(nodeIndex, "center");
+          listRef.current.scrollToIndex(nodeIndex, { align: "center" });
         }
       },
       appendNode: (parentNodeId, nodeData) => {
@@ -26700,19 +26756,8 @@ const TreeComponent = memo((props) => {
       onFocus: handleTreeFocus,
       onBlur: handleTreeBlur,
       onKeyDown: handleKeyDown,
-      children: /* @__PURE__ */ jsx(AutoSizer, { children: ({ width, height }) => /* @__PURE__ */ jsx(
-        FixedSizeList,
-        {
-          ref: listRef,
-          height,
-          itemCount: itemData.nodes.length,
-          itemData,
-          itemSize: itemHeight,
-          itemKey: getItemKey,
-          width,
-          children: TreeRow
-        }
-      ) })
+      style: { height: "100%", overflow: "auto" },
+      children: /* @__PURE__ */ jsx(Virtualizer, { ref: listRef, children: flatTreeData.map((node, index) => /* @__PURE__ */ jsx(TreeRow, { index, data: itemData }, node.key)) })
     }
   );
 });
@@ -27507,7 +27552,7 @@ const TextMd = createMetadata({
       `The text to be displayed. This value can also be set via nesting the text into the \`${COMP$14}\` component.`
     ),
     variant: {
-      description: "An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context.",
+      description: "An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context. In addition to predefined variants, you can specify custom variant names and style them using theme variables with the pattern `{cssProperty}-Text-{variantName}` (e.g., `textColor-Text-brandTitle`, `fontSize-Text-highlight`). See the documentation for a complete list of supported CSS properties.",
       availableValues: variantOptionsMd
     },
     maxLines: d(
@@ -29984,7 +30029,6 @@ const IFrame = memo(forwardRef(function IFrame2({
   ...rest
 }, ref) {
   const iframeRef = useRef(null);
-  useImperativeHandle(ref, () => iframeRef.current, []);
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
       postMessage: (message, targetOrigin = "*") => {
@@ -35873,7 +35917,6 @@ const DateInput = forwardRef(function DateInputNative({
       return null;
     }
   }, [day2, month2, year2]);
-  useImperativeHandle(ref, () => dateInputRef.current);
   useEffect(() => {
     if (registerComponentApi) {
       registerComponentApi({
@@ -37200,7 +37243,6 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
     const s24 = (second2 || "00").padStart(2, "0");
     return `${h24}:${m24}:${s24}`;
   }, [hour2, minute2, second2, amPm, is12HourFormat]);
-  useImperativeHandle(ref, () => timeInputRef.current);
   useEffect(() => {
     if (registerComponentApi) {
       registerComponentApi({
@@ -37947,7 +37989,6 @@ const Timer = forwardRef(function Timer2({
     isPaused: () => isPaused,
     isRunning: () => isRunning && !isPaused
   }), [pause, resume, isPaused, isRunning]);
-  useImperativeHandle(forwardedRef, () => timerApi, [timerApi]);
   useEffect(() => {
     if (registerComponentApi) {
       registerComponentApi(timerApi);
@@ -46842,7 +46883,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.10.20";
+const version = "0.10.21";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -51588,7 +51629,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-ZyyFNOpL.mjs");
+      const { initMock } = await import("./initMock-Dw9wrVkQ.mjs");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -51605,7 +51646,7 @@ function ApiInterceptorProvider({
           if (define_process_env_default$2.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-Dql7QGw2.mjs") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-ZyyFNOpL.mjs")
+              import("./initMock-Dw9wrVkQ.mjs")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -51642,7 +51683,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-Dql7QGw2.mjs"),
-            import("./initMock-ZyyFNOpL.mjs")
+            import("./initMock-Dw9wrVkQ.mjs")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);