xmlui 0.10.19 → 0.10.21

package/dist/metadata/{collectedComponentMetadata-Cp-9lpnG.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";
@@ -23,9 +23,8 @@ import * as dropzone from "react-dropzone";
 import produce, { createDraft, finishDraft, enableMapSet } from "immer";
 import memoizeOne from "memoize-one";
 import { parseRegExpLiteral } from "@eslint-community/regexpp";
-import { Root, Trigger, Icon as Icon$m, Portal, Content, ScrollUpButton, SelectViewport, ScrollDownButton, Item as Item$1, ItemText, ItemIndicator, SelectItemText } from "@radix-ui/react-select";
-import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "cmdk";
 import { FocusScope } from "@radix-ui/react-focus-scope";
+import { Item as Item$1, ItemText, ItemIndicator, Root, Trigger, Portal, Content, ScrollUpButton, Viewport, ScrollDownButton, SelectItemText } from "@radix-ui/react-select";
 import * as InnerRadioGroup from "@radix-ui/react-radio-group";
 import TextareaAutosize from "react-textarea-autosize";
 import { Root as Root$2, Track, Range, Thumb } from "@radix-ui/react-slider";
@@ -35,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";
@@ -470,18 +467,18 @@ function getElementRef(element) {
   return element.props.ref || element.ref;
 }
 const themeVars$10 = `'{"textColor-FormItemLabel": "var(--xmlui-textColor-FormItemLabel)", "fontFamily-FormItemLabel": "var(--xmlui-fontFamily-FormItemLabel)", "fontSize-FormItemLabel": "var(--xmlui-fontSize-FormItemLabel)", "fontWeight-FormItemLabel": "var(--xmlui-fontWeight-FormItemLabel)", "fontStyle-FormItemLabel": "var(--xmlui-fontStyle-FormItemLabel)", "textTransform-FormItemLabel": "var(--xmlui-textTransform-FormItemLabel)", "textColor-FormItemLabel-required": "var(--xmlui-textColor-FormItemLabel-required)", "fontSize-FormItemLabel-required": "var(--xmlui-fontSize-FormItemLabel-required)", "fontWeight-FormItemLabel-required": "var(--xmlui-fontWeight-FormItemLabel-required)", "fontStyle-FormItemLabel-required": "var(--xmlui-fontStyle-FormItemLabel-required)", "textTransform-FormItemLabel-required": "var(--xmlui-textTransform-FormItemLabel-required)", "textColor-FormItemLabel-requiredMark": "var(--xmlui-textColor-FormItemLabel-requiredMark)"}'`;
-const container$3 = "_container_1tt0f_14";
-const top$1 = "_top_1tt0f_21";
-const end = "_end_1tt0f_26";
-const bottom$1 = "_bottom_1tt0f_32";
-const start = "_start_1tt0f_37";
-const shrinkToLabel = "_shrinkToLabel_1tt0f_43";
-const inputLabel = "_inputLabel_1tt0f_46";
-const disabled$b = "_disabled_1tt0f_59";
-const labelBreak = "_labelBreak_1tt0f_63";
-const required = "_required_1tt0f_68";
-const requiredMark = "_requiredMark_1tt0f_75";
-const itemWithLabel = "_itemWithLabel_1tt0f_79";
+const container$3 = "_container_1pi4w_14";
+const top$1 = "_top_1pi4w_21";
+const end = "_end_1pi4w_26";
+const bottom$1 = "_bottom_1pi4w_32";
+const start = "_start_1pi4w_37";
+const shrinkToLabel = "_shrinkToLabel_1pi4w_43";
+const inputLabel = "_inputLabel_1pi4w_46";
+const disabled$c = "_disabled_1pi4w_59";
+const labelBreak = "_labelBreak_1pi4w_63";
+const required = "_required_1pi4w_68";
+const requiredMark = "_requiredMark_1pi4w_75";
+const itemWithLabel = "_itemWithLabel_1pi4w_79";
 const styles$1j = {
   themeVars: themeVars$10,
   container: container$3,
@@ -491,7 +488,7 @@ const styles$1j = {
   start,
   shrinkToLabel,
   inputLabel,
-  disabled: disabled$b,
+  disabled: disabled$c,
   labelBreak,
   required,
   requiredMark,
@@ -896,10 +893,13 @@ const useEvent = (callback) => {
   useInsertionEffect(() => {
     callbackRef.current = callback;
   }, [callback]);
-  return useCallback((...args) => {
-    const latestFn = callbackRef.current;
-    return latestFn == null ? void 0 : latestFn(...args);
-  }, [callbackRef]);
+  return useCallback(
+    (...args) => {
+      const latestFn = callbackRef.current;
+      return latestFn == null ? void 0 : latestFn(...args);
+    },
+    [callbackRef]
+  );
 };
 function humanFileSize(bytes, si = false, dp = 1) {
   const thresh = si ? 1e3 : 1024;
@@ -1188,7 +1188,7 @@ function distinct(arr) {
 function asyncThrottle(func, wait, options2) {
   const throttled = throttle(
     (resolve, reject, args) => {
-      func(...args).then(resolve).catch(reject);
+      void func(...args).then(resolve).catch(reject);
     },
     wait,
     options2
@@ -1392,10 +1392,7 @@ const useRealBackground = (element) => {
   useEffect(() => {
     return setCounter((prev) => prev + 1);
   }, [activeThemeTone, activeThemeId]);
-  return useMemo(
-    () => element ? realBackgroundColor(element) : "transparent",
-    [element, counter]
-  );
+  return useMemo(() => element ? realBackgroundColor(element) : "transparent", [element]);
 };
 const useStartMargin = (hasOutsideScroll2, parentRef, scrollRef) => {
   const [startMargin, setStartMargin] = useState(0);
@@ -1690,7 +1687,7 @@ function useCustomSvgIconRenderer(resourceUrl) {
     if (!resourceUrl) {
       return;
     }
-    ensureCustomSvgIcon(resourceUrl);
+    void ensureCustomSvgIcon(resourceUrl);
   }, [ensureCustomSvgIcon, resourceUrl]);
   const customSvg = resourceUrl ? customSvgs[resourceUrl] : null;
   const iconRenderer = useCallback(
@@ -1882,7 +1879,6 @@ class StyleLexer {
    * Fetches the next token from the input stream
    */
   fetch() {
-    const lexer = this;
     const input2 = this.input;
     const startPos = this._prefetchedPos || input2.position;
     this._lastFetchPosition = this.input.position;
@@ -1892,6 +1888,19 @@ class StyleLexer {
     let ch = null;
     let useResolver = false;
     let stringWrapper = "";
+    const appendTokenChar = () => {
+      text2 += ch;
+      this._prefetched = null;
+      this._prefetchedPos = null;
+      lastEndPos = input2.position;
+    };
+    const fetchNextChar = () => {
+      if (!this._prefetched) {
+        this._prefetchedPos = input2.position;
+        this._prefetched = input2.get();
+      }
+      return this._prefetched;
+    };
     let phase = 0;
     while (true) {
       ch = fetchNextChar();
@@ -2008,19 +2017,6 @@ class StyleLexer {
       }
       appendTokenChar();
     }
-    function appendTokenChar() {
-      text2 += ch;
-      lexer._prefetched = null;
-      lexer._prefetchedPos = null;
-      lastEndPos = input2.position;
-    }
-    function fetchNextChar() {
-      if (!lexer._prefetched) {
-        lexer._prefetchedPos = input2.position;
-        lexer._prefetched = input2.get();
-      }
-      return lexer._prefetched;
-    }
     function makeToken() {
       if (useResolver) {
         tokenType = styleKeywords[text2] ?? (isIdStart$1(text2[0]) ? StyleTokenType.Identifier : StyleTokenType.Unknown);
@@ -2471,7 +2467,78 @@ class StyleParser {
     const startToken = this._lexer.peek();
     const themeIdNode = this.tryThemeId();
     if (themeIdNode) return themeIdNode;
-    const parser = this;
+    const parseColorParameters = (pars) => {
+      this._lexer.get();
+      this.expectToken(StyleTokenType.LParent, "S007");
+      for (let i = 0; i < pars.length; i++) {
+        const value = this.getNumber();
+        if (value === null) return false;
+        const unit = this._lexer.peek(true);
+        switch (pars[i]) {
+          case "V%":
+            if (unit.type === StyleTokenType.Percentage) {
+              if (value < 0 || value > 100) {
+                this.reportError("S008");
+                return false;
+              }
+              this._lexer.get();
+            } else {
+              if (value < 0 || value > 255) {
+                this.reportError("S009");
+                return false;
+              }
+            }
+            break;
+          case "%":
+            if (unit.type !== StyleTokenType.Percentage || value < 0 || value > 100) {
+              this.reportError("S008");
+              return false;
+            }
+            this._lexer.get();
+            break;
+          case "angle":
+            if (unit.type === StyleTokenType.Angle) {
+              this._lexer.get();
+            }
+            break;
+          case "alpha":
+            if (unit.type === StyleTokenType.Percentage) {
+              if (value < 0 || value > 100) {
+                this.reportError("S008");
+                return false;
+              }
+              this._lexer.get();
+            } else {
+              if (value < 0 || value > 1) {
+                this.reportError("S011");
+                return false;
+              }
+            }
+            break;
+        }
+        if (i === pars.length - 1) continue;
+        let sepToken = this._lexer.peek(true);
+        if (sepToken.type === StyleTokenType.Ws) {
+          this._lexer.get();
+          sepToken = this._lexer.peek(true);
+          if (sepToken.type === StyleTokenType.Comma) {
+            this._lexer.get();
+          }
+        } else {
+          this.expectToken(StyleTokenType.Comma);
+        }
+        sepToken = this._lexer.peek();
+        if (sepToken.type === StyleTokenType.Ws) {
+          this._lexer.get();
+        }
+      }
+      let aSepToken = this._lexer.peek();
+      if (aSepToken.type === StyleTokenType.Ws) {
+        this._lexer.get();
+      }
+      this.expectToken(StyleTokenType.RParent, "S010");
+      return true;
+    };
     switch (startToken.type) {
       case StyleTokenType.ColorName:
         this._lexer.get();
@@ -2523,78 +2590,6 @@ class StyleParser {
         this.reportError("S005", startToken);
         return null;
     }
-    function parseColorParameters(pars) {
-      parser._lexer.get();
-      parser.expectToken(StyleTokenType.LParent, "S007");
-      for (let i = 0; i < pars.length; i++) {
-        const value = parser.getNumber();
-        if (value === null) return false;
-        const unit = parser._lexer.peek(true);
-        switch (pars[i]) {
-          case "V%":
-            if (unit.type === StyleTokenType.Percentage) {
-              if (value < 0 || value > 100) {
-                parser.reportError("S008");
-                return false;
-              }
-              parser._lexer.get();
-            } else {
-              if (value < 0 || value > 255) {
-                parser.reportError("S009");
-                return false;
-              }
-            }
-            break;
-          case "%":
-            if (unit.type !== StyleTokenType.Percentage || value < 0 || value > 100) {
-              parser.reportError("S008");
-              return false;
-            }
-            parser._lexer.get();
-            break;
-          case "angle":
-            if (unit.type === StyleTokenType.Angle) {
-              parser._lexer.get();
-            }
-            break;
-          case "alpha":
-            if (unit.type === StyleTokenType.Percentage) {
-              if (value < 0 || value > 100) {
-                parser.reportError("S008");
-                return false;
-              }
-              parser._lexer.get();
-            } else {
-              if (value < 0 || value > 1) {
-                parser.reportError("S011");
-                return false;
-              }
-            }
-            break;
-        }
-        if (i === pars.length - 1) continue;
-        let sepToken = parser._lexer.peek(true);
-        if (sepToken.type === StyleTokenType.Ws) {
-          parser._lexer.get();
-          sepToken = parser._lexer.peek(true);
-          if (sepToken.type === StyleTokenType.Comma) {
-            parser._lexer.get();
-          }
-        } else {
-          parser.expectToken(StyleTokenType.Comma);
-        }
-        sepToken = parser._lexer.peek();
-        if (sepToken.type === StyleTokenType.Ws) {
-          parser._lexer.get();
-        }
-      }
-      let aSepToken = parser._lexer.peek();
-      if (aSepToken.type === StyleTokenType.Ws) {
-        parser._lexer.get();
-      }
-      parser.expectToken(StyleTokenType.RParent, "S010");
-      return true;
-    }
   }
   getNumber() {
     const token = this._lexer.get();
@@ -3720,213 +3715,834 @@ function extractPaddings(extractValue, props) {
     paddingBottom: paddingBottom || paddingVertical || padding
   };
 }
-const defaultProps$1d = {
-  maxLines: 0,
-  preserveLinebreaks: false,
-  ellipses: true,
-  overflowMode: void 0,
-  breakMode: "normal"
-};
-const Text = forwardRef(function Text2({
-  uid,
-  variant,
-  maxLines = defaultProps$1d.maxLines,
-  style: style2,
-  className,
-  children,
-  preserveLinebreaks: preserveLinebreaks2 = defaultProps$1d.preserveLinebreaks,
-  ellipses = defaultProps$1d.ellipses,
-  overflowMode = defaultProps$1d.overflowMode,
-  breakMode = defaultProps$1d.breakMode,
-  registerComponentApi,
-  ...variantSpecificProps
-}, forwardedRef) {
-  const innerRef = useRef(null);
-  const ref = forwardedRef ? composeRefs(innerRef, forwardedRef) : innerRef;
-  const hasOverflow = useCallback(() => {
-    const element = innerRef.current;
-    if (!element) return false;
-    const hasHorizontalOverflow = element.scrollWidth > element.clientWidth;
-    const hasVerticalOverflow = element.scrollHeight > element.clientHeight;
-    return hasHorizontalOverflow || hasVerticalOverflow;
-  }, []);
-  useEffect(() => {
-    if (registerComponentApi) {
-      registerComponentApi({ hasOverflow });
+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;
     }
-  }, [registerComponentApi, hasOverflow]);
-  const { syntaxHighlightClasses, ...restVariantSpecificProps } = variantSpecificProps;
-  const Element2 = useMemo(() => {
-    if (!variant || !TextVariantElement[variant]) return "div";
-    return TextVariantElement[variant];
-  }, [variant]);
-  const overflowClasses = useMemo(() => {
-    const classes = {};
-    if (!overflowMode) {
-      classes[styles$1d.truncateOverflow] = maxLines > 0;
-      classes[styles$1d.noEllipsis] = !ellipses;
-      return classes;
+    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};`);
+      }
     }
-    switch (overflowMode) {
-      case "none":
-        classes[styles$1d.overflowNone] = true;
-        break;
-      case "scroll":
-        classes[styles$1d.overflowScroll] = true;
-        break;
-      case "ellipsis":
-        classes[styles$1d.truncateOverflow] = true;
-        classes[styles$1d.noEllipsis] = !ellipses;
-        break;
-      case "flow":
-        classes[styles$1d.overflowFlow] = true;
-        break;
+    let finalCss = "";
+    if (directProps.length > 0) {
+      finalCss += `${selector} {${directProps.join("")}}`;
     }
-    return classes;
-  }, [overflowMode, maxLines, ellipses]);
-  const breakClasses = useMemo(() => {
-    const classes = {};
-    if (breakMode) {
-      switch (breakMode) {
-        case "normal":
-          classes[styles$1d.breakNormal] = true;
-          break;
-        case "word":
-          classes[styles$1d.breakWord] = true;
-          break;
-        case "anywhere":
-          classes[styles$1d.breakAnywhere] = true;
-          break;
-        case "keep":
-          classes[styles$1d.breakKeep] = true;
-          break;
-        case "hyphenate":
-          classes[styles$1d.breakHyphenate] = true;
-          break;
-      }
+    finalCss += nestedRules.join("");
+    return finalCss;
+  }
+  _processNestedRule(parentSelector, nestedKey, nestedStyles) {
+    if (nestedKey.startsWith("@")) {
+      return `${nestedKey}{${this._generateCss(parentSelector, nestedStyles)}}`;
     }
-    return classes;
-  }, [breakMode]);
-  return /* @__PURE__ */ jsx(
-    Element2,
-    {
-      ...restVariantSpecificProps,
-      ref,
-      className: classnames(
-        syntaxHighlightClasses,
-        styles$1d.text,
-        styles$1d[variant || "default"],
-        {
-          [styles$1d.preserveLinebreaks]: preserveLinebreaks2,
-          ...overflowClasses,
-          ...breakClasses
-        },
-        className
-      ),
-      style: {
-        ...style2,
-        // Apply maxLines style for "ellipsis" mode and default behavior
-        // "none", "scroll", and "flow" modes ignore maxLines for predictable, reliable behavior
-        ...overflowMode === "ellipsis" || !overflowMode && maxLines ? getMaxLinesStyle(maxLines) : {}
-      },
-      children
+    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 Adornment({ iconName, text: text2, className, onClick, ...rest }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: iconName || text2 ? /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...rest,
-      className: classnames(styles$1e.wrapper, className, {
-        [styles$1e.clickable]: !!onClick
-      }),
-      role: onClick ? "button" : "presentation",
-      onClick,
-      tabIndex: onClick ? 0 : void 0,
-      children: [
-        /* @__PURE__ */ jsx(Icon$l, { name: iconName, style: { color: "inherit" } }),
-        text2 && /* @__PURE__ */ jsx("div", { style: { display: "flex", userSelect: "none" }, children: /* @__PURE__ */ jsx(Text, { style: { fontSize: "inherit" }, children: text2 }) })
-      ]
+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);
+      }
     }
-  ) : null });
+    return newRegistry;
+  });
+  if (parentRegistry && !forceNew) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(StyleContext.Provider, { value: registry, children });
 }
-const defaultProps$1c = {
-  type: "text",
-  value: "",
-  initialValue: "",
-  enabled: true,
-  validationStatus: "none",
-  onDidChange: noop$1,
-  onFocus: noop$1,
-  onBlur: noop$1,
-  onKeyDown: noop$1,
-  updateState: noop$1,
-  passwordVisibleIcon: "eye",
-  passwordHiddenIcon: "eye-off"
-};
-const TextBox = forwardRef(function TextBox2({
-  id,
-  type = defaultProps$1c.type,
-  value = defaultProps$1c.value,
-  updateState = defaultProps$1c.updateState,
-  initialValue = defaultProps$1c.initialValue,
-  style: style2,
-  className,
-  maxLength,
-  enabled: enabled2 = defaultProps$1c.enabled,
-  placeholder: placeholder2,
-  validationStatus = defaultProps$1c.validationStatus,
-  onDidChange = defaultProps$1c.onDidChange,
-  onFocus = defaultProps$1c.onFocus,
-  onBlur = defaultProps$1c.onBlur,
-  onKeyDown = defaultProps$1c.onKeyDown,
-  registerComponentApi,
-  startText,
-  startIcon,
-  endText,
-  endIcon,
-  gap,
-  autoFocus,
-  readOnly: readOnly2,
-  tabIndex,
-  required: required2,
-  showPasswordToggle,
-  passwordVisibleIcon = defaultProps$1c.passwordVisibleIcon,
-  passwordHiddenIcon = defaultProps$1c.passwordHiddenIcon,
-  ...rest
-}, ref) {
-  const inputRef = useRef(null);
-  const [showPassword, setShowPassword] = useState(false);
-  const actualType = type === "password" && showPassword ? "text" : type;
-  const togglePasswordVisibility = useCallback(() => {
-    setShowPassword((prev) => !prev);
-  }, []);
+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 (autoFocus) {
+    if (!styleHash) {
+      return;
+    }
+    registry.incrementRef(styleHash);
+    return () => {
+      registry.decrementRef(styleHash);
       setTimeout(() => {
         var _a2;
-        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+        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);
-    }
-  }, [autoFocus, inputRef]);
-  const [localValue, setLocalValue] = React__default.useState(value);
-  useEffect(() => {
-    setLocalValue(value);
-  }, [value]);
-  useEffect(() => {
-    updateState({ value: initialValue }, { initial: true });
-  }, [initialValue, updateState]);
-  const updateValue = useCallback(
-    (value2) => {
-      setLocalValue(value2);
-      updateState({ value: value2 });
-      onDidChange(value2);
-    },
-    [onDidChange, updateState]
-  );
-  const onInputChange = useCallback(
-    (event) => {
+    };
+  }, [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,
+  ellipses: true,
+  overflowMode: void 0,
+  breakMode: "normal"
+};
+const Text = forwardRef(function Text2({
+  uid,
+  variant,
+  maxLines = defaultProps$1d.maxLines,
+  style: style2,
+  className,
+  children,
+  preserveLinebreaks: preserveLinebreaks2 = defaultProps$1d.preserveLinebreaks,
+  ellipses = defaultProps$1d.ellipses,
+  overflowMode = defaultProps$1d.overflowMode,
+  breakMode = defaultProps$1d.breakMode,
+  registerComponentApi,
+  ...variantSpecificProps
+}, forwardedRef) {
+  const innerRef = useRef(null);
+  const ref = forwardedRef ? composeRefs(innerRef, forwardedRef) : innerRef;
+  const hasOverflow = useCallback(() => {
+    const element = innerRef.current;
+    if (!element) return false;
+    const hasHorizontalOverflow = element.scrollWidth > element.clientWidth;
+    const hasVerticalOverflow = element.scrollHeight > element.clientHeight;
+    return hasHorizontalOverflow || hasVerticalOverflow;
+  }, []);
+  useEffect(() => {
+    if (registerComponentApi) {
+      registerComponentApi({ hasOverflow });
+    }
+  }, [registerComponentApi, hasOverflow]);
+  const { syntaxHighlightClasses, ...restVariantSpecificProps } = variantSpecificProps;
+  const Element2 = useMemo(() => {
+    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) {
+      classes[styles$1d.truncateOverflow] = maxLines > 0;
+      classes[styles$1d.noEllipsis] = !ellipses;
+      return classes;
+    }
+    switch (overflowMode) {
+      case "none":
+        classes[styles$1d.overflowNone] = true;
+        break;
+      case "scroll":
+        classes[styles$1d.overflowScroll] = true;
+        break;
+      case "ellipsis":
+        classes[styles$1d.truncateOverflow] = true;
+        classes[styles$1d.noEllipsis] = !ellipses;
+        break;
+      case "flow":
+        classes[styles$1d.overflowFlow] = true;
+        break;
+    }
+    return classes;
+  }, [overflowMode, maxLines, ellipses]);
+  const breakClasses = useMemo(() => {
+    const classes = {};
+    if (breakMode) {
+      switch (breakMode) {
+        case "normal":
+          classes[styles$1d.breakNormal] = true;
+          break;
+        case "word":
+          classes[styles$1d.breakWord] = true;
+          break;
+        case "anywhere":
+          classes[styles$1d.breakAnywhere] = true;
+          break;
+        case "keep":
+          classes[styles$1d.breakKeep] = true;
+          break;
+        case "hyphenate":
+          classes[styles$1d.breakHyphenate] = true;
+          break;
+      }
+    }
+    return classes;
+  }, [breakMode]);
+  return /* @__PURE__ */ jsx(
+    Element2,
+    {
+      ...restVariantSpecificProps,
+      ref,
+      className: classnames(
+        syntaxHighlightClasses,
+        styles$1d.text,
+        // 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,
+          ...breakClasses
+        },
+        className
+      ),
+      style: {
+        ...style2,
+        // Apply maxLines style for "ellipsis" mode and default behavior
+        // "none", "scroll", and "flow" modes ignore maxLines for predictable, reliable behavior
+        ...overflowMode === "ellipsis" || !overflowMode && maxLines ? getMaxLinesStyle(maxLines) : {}
+      },
+      children
+    }
+  );
+});
+function Adornment({ iconName, text: text2, className, onClick, ...rest }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: iconName || text2 ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: classnames(styles$1e.wrapper, className, {
+        [styles$1e.clickable]: !!onClick
+      }),
+      role: onClick ? "button" : "presentation",
+      onClick,
+      tabIndex: onClick ? 0 : void 0,
+      children: [
+        /* @__PURE__ */ jsx(Icon$l, { name: iconName, style: { color: "inherit" } }),
+        text2 && /* @__PURE__ */ jsx("div", { style: { display: "flex", userSelect: "none" }, children: /* @__PURE__ */ jsx(Text, { style: { fontSize: "inherit" }, children: text2 }) })
+      ]
+    }
+  ) : null });
+}
+const defaultProps$1c = {
+  type: "text",
+  value: "",
+  initialValue: "",
+  enabled: true,
+  validationStatus: "none",
+  onDidChange: noop$1,
+  onFocus: noop$1,
+  onBlur: noop$1,
+  onKeyDown: noop$1,
+  updateState: noop$1,
+  passwordVisibleIcon: "eye",
+  passwordHiddenIcon: "eye-off"
+};
+const TextBox = forwardRef(function TextBox2({
+  id,
+  type = defaultProps$1c.type,
+  value = defaultProps$1c.value,
+  updateState = defaultProps$1c.updateState,
+  initialValue = defaultProps$1c.initialValue,
+  style: style2,
+  className,
+  maxLength,
+  enabled: enabled2 = defaultProps$1c.enabled,
+  placeholder: placeholder2,
+  validationStatus = defaultProps$1c.validationStatus,
+  onDidChange = defaultProps$1c.onDidChange,
+  onFocus = defaultProps$1c.onFocus,
+  onBlur = defaultProps$1c.onBlur,
+  onKeyDown = defaultProps$1c.onKeyDown,
+  registerComponentApi,
+  startText,
+  startIcon,
+  endText,
+  endIcon,
+  gap,
+  autoFocus,
+  readOnly: readOnly2,
+  tabIndex,
+  required: required2,
+  showPasswordToggle,
+  passwordVisibleIcon = defaultProps$1c.passwordVisibleIcon,
+  passwordHiddenIcon = defaultProps$1c.passwordHiddenIcon,
+  ...rest
+}, ref) {
+  const inputRef = useRef(null);
+  const [showPassword, setShowPassword] = useState(false);
+  const actualType = type === "password" && showPassword ? "text" : type;
+  const togglePasswordVisibility = useCallback(() => {
+    setShowPassword((prev) => !prev);
+  }, []);
+  useEffect(() => {
+    if (autoFocus) {
+      setTimeout(() => {
+        var _a2;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      }, 0);
+    }
+  }, [autoFocus, inputRef]);
+  const [localValue, setLocalValue] = React__default.useState(value);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  useEffect(() => {
+    updateState({ value: initialValue }, { initial: true });
+  }, [initialValue, updateState]);
+  const updateValue = useCallback(
+    (value2) => {
+      setLocalValue(value2);
+      updateState({ value: value2 });
+      onDidChange(value2);
+    },
+    [onDidChange, updateState]
+  );
+  const onInputChange = useCallback(
+    (event) => {
       updateValue(event.target.value);
     },
     [updateValue]
@@ -4319,350 +4935,6 @@ function matchThemeVar(themeVar, availableThemeVars = []) {
     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;
-  }
-  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: []
-};
 function isThemeVarName(varName) {
   return typeof varName === "string" && (varName == null ? void 0 : varName.startsWith("$"));
 }
@@ -6501,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;
@@ -7050,8 +7106,8 @@ class ErrorBoundary extends React__default.Component {
    * This method implements the Error Boundaries for the React application.
    * It is invoked if errors occur during the rendering phase of any lifecycle
    * methods or children components.
-   * 
-   * DO NOT DELETE this method! Though it is not referenced directly from the code, 
+   *
+   * DO NOT DELETE this method! Though it is not referenced directly from the code,
    * it is a required part of the React component lifecycle.
    */
   static getDerivedStateFromError(error2) {
@@ -7084,7 +7140,7 @@ class ErrorBoundary extends React__default.Component {
    */
   render() {
     var _a2;
-    return this.state.hasError ? /* @__PURE__ */ jsxs("div", { className: styles$1b.errorOverlay, children: [
+    return this.state.hasError ? /* @__PURE__ */ jsxs("div", { "data-error-boundary": true, className: styles$1b.errorOverlay, children: [
       /* @__PURE__ */ jsx("div", { className: styles$1b.title, children: "There was an error!" }),
       /* @__PURE__ */ jsx("div", { className: styles$1b.errorItem, children: (_a2 = this.state.error) == null ? void 0 : _a2.message })
     ] }) : this.props.children;
@@ -7127,6 +7183,7 @@ const NotificationToast = ({ toastDuration }) => {
 };
 const defaultProps$1b = {
   isRoot: false,
+  applyIf: true,
   toastDuration: 5e3,
   themeVars: EMPTY_OBJECT,
   root: false
@@ -7134,6 +7191,7 @@ const defaultProps$1b = {
 function Theme({
   id,
   isRoot = defaultProps$1b.isRoot,
+  applyIf,
   renderChild: renderChild2,
   node,
   tone,
@@ -7254,6 +7312,13 @@ function Theme({
   if (indexing) {
     return children;
   }
+  const shouldApplyTheme = applyIf ?? defaultProps$1b.applyIf;
+  if (!shouldApplyTheme) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      renderChild2 && renderChild2(node.children),
+      children
+    ] });
+  }
   if (isRoot) {
     const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -7324,6 +7389,12 @@ const ThemeMd = createMetadata({
       void 0,
       "boolean",
       defaultProps$1b.root
+    ),
+    applyIf: d(
+      `This property controls whether the theme wrapper is applied. When true (default), the theme wraps the children. When false, children are rendered unwrapped.`,
+      void 0,
+      "boolean",
+      true
     )
   },
   opaque: true
@@ -7344,6 +7415,7 @@ const themeComponentRenderer = createComponentRenderer(
       {
         id: extractValue.asOptionalString(node.props.themeId),
         isRoot: extractValue.asOptionalBoolean(node.props.root),
+        applyIf: extractValue.asOptionalBoolean(node.props.applyIf),
         layoutContext,
         renderChild: renderChild2,
         tone: themeTone,
@@ -7633,7 +7705,7 @@ const icon$4 = "_icon_8uiju_65";
 const includeHoverIndicator = "_includeHoverIndicator_8uiju_71";
 const displayActive = "_displayActive_8uiju_106";
 const navItemActive = "_navItemActive_8uiju_118";
-const disabled$a = "_disabled_8uiju_153";
+const disabled$b = "_disabled_8uiju_153";
 const vertical$6 = "_vertical_8uiju_157";
 const innerContent$1 = "_innerContent_8uiju_170";
 const navLinkStyles = {
@@ -7644,7 +7716,7 @@ const navLinkStyles = {
   includeHoverIndicator,
   displayActive,
   navItemActive,
-  disabled: disabled$a,
+  disabled: disabled$b,
   vertical: vertical$6,
   innerContent: innerContent$1
 };
@@ -8378,6 +8450,7 @@ function App({
   name,
   className,
   applyDefaultContentPadding,
+  registerComponentApi,
   ...rest
 }) {
   const { getThemeVar } = useTheme();
@@ -8845,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),
@@ -9061,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 })
@@ -9192,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,
       {
@@ -9200,7 +9274,8 @@ const appRenderer = createComponentRenderer(
         renderChild: renderChild2,
         extractValue,
         className,
-        lookupEventHandler
+        lookupEventHandler,
+        registerComponentApi
       }
     );
   }
@@ -9420,14 +9495,16 @@ function AppState({
   registerComponentApi,
   onDidUpdate
 }) {
-  const registerAppState = useAppStateContextPart((value2) => value2.registerAppState);
   const update = useAppStateContextPart((value2) => value2.update);
+  const value = useAppStateContextPart((value2) => {
+    var _a2;
+    return (_a2 = value2 == null ? void 0 : value2.appState) == null ? void 0 : _a2[bucket];
+  });
   useIsomorphicLayoutEffect(() => {
     if (initialValue !== void 0) {
-      registerAppState(bucket, initialValue);
+      update(bucket, initialValue);
     }
-  }, [bucket, initialValue, registerAppState]);
-  const value = useAppStateContextPart((value2) => value2.appState[bucket]);
+  }, [bucket, initialValue]);
   useIsomorphicLayoutEffect(() => {
     updateState({ value });
     if (onDidUpdate) {
@@ -9476,7 +9553,7 @@ const AppStateMd = createMetadata({
       defaultValue: defaultProps$13.bucket
     },
     initialValue: {
-      description: `This property contains the initial state value. Though you can use multiple \`${COMP$1r}\`component instances for the same bucket with their \`initialValue\` set, it may result in faulty app logic. When xmlui instantiates an \`${COMP$1r}\` with an explicit initial value, that value is immediately set. Multiple initial values may result in undesired initialization. By default, the bucked's initial state is undefined.`
+      description: `This property contains the initial state value. Though you can use multiple \`${COMP$1r}\`component instances for the same bucket with their \`initialValue\` set, it may result in faulty app logic. When xmlui instantiates an \`${COMP$1r}\` with an explicit initial value, that value is immediately merged with the existing state. The issue may come from the behavior that \`initialValue\` is set (merged) only when a component mounts. By default, the bucket's initial state is undefined.`
     }
   },
   apis: {
@@ -10034,13 +10111,13 @@ const styles$12 = {
 const themeVars$M = `'{"padding-Link": "var(--xmlui-padding-Link)", "paddingHorizontal-Link": "var(--xmlui-paddingHorizontal-Link, var(--xmlui-padding-Link))", "paddingVertical-Link": "var(--xmlui-paddingVertical-Link, var(--xmlui-padding-Link))", "paddingLeft-Link": "var(--xmlui-paddingLeft-Link, var(--xmlui-paddingHorizontal-Link, var(--xmlui-padding-Link)))", "paddingRight-Link": "var(--xmlui-paddingRight-Link, var(--xmlui-paddingHorizontal-Link, var(--xmlui-padding-Link)))", "paddingTop-Link": "var(--xmlui-paddingTop-Link, var(--xmlui-paddingVertical-Link, var(--xmlui-padding-Link)))", "paddingBottom-Link": "var(--xmlui-paddingBottom-Link, var(--xmlui-paddingVertical-Link, var(--xmlui-padding-Link)))", "padding-icon-Link": "var(--xmlui-padding-icon-Link)", "paddingHorizontal-icon-Link": "var(--xmlui-paddingHorizontal-icon-Link, var(--xmlui-padding-icon-Link))", "paddingVertical-icon-Link": "var(--xmlui-paddingVertical-icon-Link, var(--xmlui-padding-icon-Link))", "paddingLeft-icon-Link": "var(--xmlui-paddingLeft-icon-Link, var(--xmlui-paddingHorizontal-icon-Link, var(--xmlui-padding-icon-Link)))", "paddingRight-icon-Link": "var(--xmlui-paddingRight-icon-Link, var(--xmlui-paddingHorizontal-icon-Link, var(--xmlui-padding-icon-Link)))", "paddingTop-icon-Link": "var(--xmlui-paddingTop-icon-Link, var(--xmlui-paddingVertical-icon-Link, var(--xmlui-padding-icon-Link)))", "paddingBottom-icon-Link": "var(--xmlui-paddingBottom-icon-Link, var(--xmlui-paddingVertical-icon-Link, var(--xmlui-padding-icon-Link)))", "border-Link": "var(--xmlui-border-Link)", "borderHorizontal-Link": "var(--xmlui-borderHorizontal-Link, var(--xmlui-border-Link))", "borderVertical-Link": "var(--xmlui-borderVertical-Link, var(--xmlui-border-Link))", "borderLeft-Link": "var(--xmlui-borderLeft-Link, var(--xmlui-borderHorizontal-Link, var(--xmlui-border-Link)))", "borderRight-Link": "var(--xmlui-borderRight-Link, var(--xmlui-borderHorizontal-Link, var(--xmlui-border-Link)))", "borderTop-Link": "var(--xmlui-borderTop-Link, var(--xmlui-borderVertical-Link, var(--xmlui-border-Link)))", "borderBottom-Link": "var(--xmlui-borderBottom-Link, var(--xmlui-borderVertical-Link, var(--xmlui-border-Link)))", "borderWidth-Link": "var(--xmlui-borderWidth-Link)", "borderHorizontalWidth-Link": "var(--xmlui-borderHorizontalWidth-Link, var(--xmlui-borderWidth-Link))", "borderLeftWidth-Link": "var(--xmlui-borderLeftWidth-Link, var(--xmlui-borderHorizontalWidth-Link, var(--xmlui-borderWidth-Link)))", "borderRightWidth-Link": "var(--xmlui-borderRightWidth-Link, var(--xmlui-borderHorizontalWidth-Link, var(--xmlui-borderWidth-Link)))", "borderVerticalWidth-Link": "var(--xmlui-borderVerticalWidth-Link, var(--xmlui-borderWidth-Link))", "borderTopWidth-Link": "var(--xmlui-borderTopWidth-Link, var(--xmlui-borderVerticalWidth-Link, var(--xmlui-borderWidth-Link)))", "borderBottomWidth-Link": "var(--xmlui-borderBottomWidth-Link, var(--xmlui-borderVerticalWidth-Link, var(--xmlui-borderWidth-Link)))", "borderStyle-Link": "var(--xmlui-borderStyle-Link)", "borderHorizontalStyle-Link": "var(--xmlui-borderHorizontalStyle-Link, var(--xmlui-borderStyle-Link))", "borderLeftStyle-Link": "var(--xmlui-borderLeftStyle-Link, var(--xmlui-borderHorizontalStyle-Link, var(--xmlui-borderStyle-Link)))", "borderRightStyle-Link": "var(--xmlui-borderRightStyle-Link, var(--xmlui-borderHorizontalStyle-Link, var(--xmlui-borderStyle-Link)))", "borderVerticalStyle-Link": "var(--xmlui-borderVerticalStyle-Link, var(--xmlui-borderStyle-Link))", "borderTopStyle-Link": "var(--xmlui-borderTopStyle-Link, var(--xmlui-borderVerticalStyle-Link, var(--xmlui-borderStyle-Link)))", "borderBottomStyle-Link": "var(--xmlui-borderBottomStyle-Link, var(--xmlui-borderVerticalStyle-Link, var(--xmlui-borderStyle-Link)))", "borderColor-Link": "var(--xmlui-borderColor-Link)", "borderHorizontalColor-Link": "var(--xmlui-borderHorizontalColor-Link, var(--xmlui-borderColor-Link))", "borderLeftColor-Link": "var(--xmlui-borderLeftColor-Link, var(--xmlui-borderHorizontalColor-Link, var(--xmlui-borderColor-Link)))", "borderRightColor-Link": "var(--xmlui-borderRightColor-Link, var(--xmlui-borderHorizontalColor-Link, var(--xmlui-borderColor-Link)))", "borderVerticalColor-Link": "var(--xmlui-borderVerticalColor-Link, var(--xmlui-borderColor-Link))", "borderTopColor-Link": "var(--xmlui-borderTopColor-Link, var(--xmlui-borderVerticalColor-Link, var(--xmlui-borderColor-Link)))", "borderBottomColor-Link": "var(--xmlui-borderBottomColor-Link, var(--xmlui-borderVerticalColor-Link, var(--xmlui-borderColor-Link)))", "borderStartStartRadius-Link": "var(--xmlui-borderStartStartRadius-Link, var(--xmlui-borderRadius-Link))", "borderStartEndRadius-Link": "var(--xmlui-borderStartEndRadius-Link, var(--xmlui-borderRadius-Link))", "borderEndStartRadius-Link": "var(--xmlui-borderEndStartRadius-Link, var(--xmlui-borderRadius-Link))", "borderEndEndRadius-Link": "var(--xmlui-borderEndEndRadius-Link, var(--xmlui-borderRadius-Link))", "textColor-Link": "var(--xmlui-textColor-Link)", "fontFamily-Link": "var(--xmlui-fontFamily-Link)", "fontSize-Link": "var(--xmlui-fontSize-Link)", "fontStyle-Link": "var(--xmlui-fontStyle-Link)", "fontVariant-Link": "var(--xmlui-fontVariant-Link)", "fontWeight-Link": "var(--xmlui-fontWeight-Link)", "fontStretch-Link": "var(--xmlui-fontStretch-Link)", "textDecorationLine-Link": "var(--xmlui-textDecorationLine-Link)", "textDecorationColor-Link": "var(--xmlui-textDecorationColor-Link)", "textDecorationStyle-Link": "var(--xmlui-textDecorationStyle-Link)", "textDecorationThickness-Link": "var(--xmlui-textDecorationThickness-Link)", "textUnderlineOffset-Link": "var(--xmlui-textUnderlineOffset-Link)", "lineHeight-Link": "var(--xmlui-lineHeight-Link)", "backgroundColor-Link": "var(--xmlui-backgroundColor-Link)", "textTransform-Link": "var(--xmlui-textTransform-Link)", "letterSpacing-Link": "var(--xmlui-letterSpacing-Link)", "wordSpacing-Link": "var(--xmlui-wordSpacing-Link)", "textShadow-Link": "var(--xmlui-textShadow-Link)", "textIndent-Link": "var(--xmlui-textIndent-Link)", "textAlign-Link": "var(--xmlui-textAlign-Link)", "textAlignLast-Link": "var(--xmlui-textAlignLast-Link)", "wordBreak-Link": "var(--xmlui-wordBreak-Link)", "wordWrap-Link": "var(--xmlui-wordWrap-Link)", "direction-Link": "var(--xmlui-direction-Link)", "writingMode-Link": "var(--xmlui-writingMode-Link)", "lineBreak-Link": "var(--xmlui-lineBreak-Link)", "textColor-Link--active": "var(--xmlui-textColor-Link--active)", "textColor-Link--hover": "var(--xmlui-textColor-Link--hover)", "textColor-Link--hover--active": "var(--xmlui-textColor-Link--hover--active)", "fontWeight-Link--active": "var(--xmlui-fontWeight-Link--active)", "gap-icon-Link": "var(--xmlui-gap-icon-Link)", "textDecorationColor-Link--hover": "var(--xmlui-textDecorationColor-Link--hover)", "textDecorationColor-Link--active": "var(--xmlui-textDecorationColor-Link--active)", "outlineWidth-Link--focus": "var(--xmlui-outlineWidth-Link--focus)", "outlineColor-Link--focus": "var(--xmlui-outlineColor-Link--focus)", "outlineStyle-Link--focus": "var(--xmlui-outlineStyle-Link--focus)", "outlineOffset-Link--focus": "var(--xmlui-outlineOffset-Link--focus)"}'`;
 const container$1 = "_container_1iujp_14";
 const active$3 = "_active_1iujp_75";
-const disabled$9 = "_disabled_1iujp_79";
+const disabled$a = "_disabled_1iujp_79";
 const iconWrapper = "_iconWrapper_1iujp_94";
 const styles$11 = {
   themeVars: themeVars$M,
   container: container$1,
   active: active$3,
-  disabled: disabled$9,
+  disabled: disabled$a,
   iconWrapper
 };
 const defaultProps$$ = {
@@ -10760,10 +10837,10 @@ const checkboxComponentRenderer = createComponentRenderer(
     );
   }
 );
-const themeVars$J = `'{"backgroundColor-ContentSeparator": "var(--xmlui-backgroundColor-ContentSeparator)", "size-ContentSeparator": "var(--xmlui-size-ContentSeparator)"}'`;
-const separator = "_separator_k49rs_14";
-const horizontal$3 = "_horizontal_k49rs_17";
-const vertical$3 = "_vertical_k49rs_21";
+const themeVars$J = `'{"backgroundColor-ContentSeparator": "var(--xmlui-backgroundColor-ContentSeparator)", "size-ContentSeparator": "var(--xmlui-size-ContentSeparator)", "marginTop-ContentSeparator": "var(--xmlui-marginTop-ContentSeparator)", "marginBottom-ContentSeparator": "var(--xmlui-marginBottom-ContentSeparator)", "marginVertical-ContentSeparator": "var(--xmlui-marginVertical-ContentSeparator)", "marginLeft-ContentSeparator": "var(--xmlui-marginLeft-ContentSeparator)", "marginRight-ContentSeparator": "var(--xmlui-marginRight-ContentSeparator)", "marginHorizontal-ContentSeparator": "var(--xmlui-marginHorizontal-ContentSeparator)"}'`;
+const separator = "_separator_13z1k_14";
+const horizontal$3 = "_horizontal_13z1k_21";
+const vertical$3 = "_vertical_13z1k_25";
 const styles$_ = {
   themeVars: themeVars$J,
   separator,
@@ -10817,6 +10894,8 @@ const ContentSeparatorMd = createMetadata({
   defaultThemeVars: {
     [`backgroundColor-${COMP$1k}`]: "$color-surface-200",
     [`size-${COMP$1k}`]: "1px",
+    [`marginVertical-${COMP$1k}`]: "0",
+    [`marginHorizontal-${COMP$1k}`]: "0",
     light: {
       // --- No light-specific theme vars
     },
@@ -10846,7 +10925,7 @@ const adornment$3 = "_adornment_17ucd_56";
 const error$b = "_error_17ucd_59";
 const warning$c = "_warning_17ucd_87";
 const valid$b = "_valid_17ucd_115";
-const disabled$8 = "_disabled_17ucd_143";
+const disabled$9 = "_disabled_17ucd_143";
 const indicator$3 = "_indicator_17ucd_149";
 const datePickerInput = "_datePickerInput_17ucd_150";
 const inlinePickerMenu = "_inlinePickerMenu_17ucd_153";
@@ -10893,7 +10972,7 @@ const styles$Z = {
   error: error$b,
   warning: warning$c,
   valid: valid$b,
-  disabled: disabled$8,
+  disabled: disabled$9,
   indicator: indicator$3,
   datePickerInput,
   inlinePickerMenu,
@@ -11501,7 +11580,7 @@ const DropdownMenuSubContent = "_DropdownMenuSubContent_iu9k6_19";
 const DropdownMenuItem = "_DropdownMenuItem_iu9k6_29";
 const DropdownMenuSubTrigger = "_DropdownMenuSubTrigger_iu9k6_30";
 const active$2 = "_active_iu9k6_53";
-const disabled$7 = "_disabled_iu9k6_63";
+const disabled$8 = "_disabled_iu9k6_63";
 const wrapper$h = "_wrapper_iu9k6_74";
 const DropdownMenuSeparator = "_DropdownMenuSeparator_iu9k6_78";
 const styles$Y = {
@@ -11511,7 +11590,7 @@ const styles$Y = {
   DropdownMenuItem,
   DropdownMenuSubTrigger,
   active: active$2,
-  disabled: disabled$7,
+  disabled: disabled$8,
   wrapper: wrapper$h,
   DropdownMenuSeparator
 };
@@ -12275,7 +12354,7 @@ const FileUploadDropZone = forwardRef(function FileUploadDropZone2({
 }, forwardedRef) {
   const accept = acceptedFileTypes ? acceptedFileTypes.split(",").reduce((acc, type) => ({ ...acc, [type.trim()]: [] }), {}) : void 0;
   const onDrop = useCallback(
-    async (acceptedFiles) => {
+    (acceptedFiles) => {
       if (!acceptedFiles.length) {
         return;
       }
@@ -12791,14 +12870,15 @@ function backendValidationArrived({
   };
 }
 const themeVars$B = `'{"padding-ModalDialog": "var(--xmlui-padding-ModalDialog)", "paddingHorizontal-ModalDialog": "var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog))", "paddingVertical-ModalDialog": "var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog))", "paddingLeft-ModalDialog": "var(--xmlui-paddingLeft-ModalDialog, var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingRight-ModalDialog": "var(--xmlui-paddingRight-ModalDialog, var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingTop-ModalDialog": "var(--xmlui-paddingTop-ModalDialog, var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingBottom-ModalDialog": "var(--xmlui-paddingBottom-ModalDialog, var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog)))", "padding-overlay-ModalDialog": "var(--xmlui-padding-overlay-ModalDialog)", "paddingHorizontal-overlay-ModalDialog": "var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog))", "paddingVertical-overlay-ModalDialog": "var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog))", "paddingLeft-overlay-ModalDialog": "var(--xmlui-paddingLeft-overlay-ModalDialog, var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingRight-overlay-ModalDialog": "var(--xmlui-paddingRight-overlay-ModalDialog, var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingTop-overlay-ModalDialog": "var(--xmlui-paddingTop-overlay-ModalDialog, var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingBottom-overlay-ModalDialog": "var(--xmlui-paddingBottom-overlay-ModalDialog, var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "Dialog:backgroundColor-ModalDialog": "var(--xmlui-backgroundColor-ModalDialog)", "Dialog:backgroundColor-overlay-ModalDialog": "var(--xmlui-backgroundColor-overlay-ModalDialog)", "Dialog:borderRadius-ModalDialog": "var(--xmlui-borderRadius-ModalDialog)", "Dialog:fontFamily-ModalDialog": "var(--xmlui-fontFamily-ModalDialog)", "Dialog:textColor-ModalDialog": "var(--xmlui-textColor-ModalDialog)", "Dialog:minWidth-ModalDialog": "var(--xmlui-minWidth-ModalDialog)", "Dialog:maxWidth-ModalDialog": "var(--xmlui-maxWidth-ModalDialog)", "Dialog:marginBottom-title-ModalDialog": "var(--xmlui-marginBottom-title-ModalDialog)"}'`;
-const overlay$2 = "_overlay_r7ppn_14";
-const fullScreen = "_fullScreen_r7ppn_22";
-const content$6 = "_content_r7ppn_28";
-const overlayBg$1 = "_overlayBg_r7ppn_37";
-const nested = "_nested_r7ppn_43";
-const dialogTitle = "_dialogTitle_r7ppn_78";
-const innerContent = "_innerContent_r7ppn_83";
-const closeButton = "_closeButton_r7ppn_108";
+const overlay$2 = "_overlay_do4x4_14";
+const fullScreen = "_fullScreen_do4x4_22";
+const content$6 = "_content_do4x4_28";
+const overlayBg$1 = "_overlayBg_do4x4_37";
+const nested = "_nested_do4x4_43";
+const contentAnimation = "_contentAnimation_do4x4_74";
+const dialogTitle = "_dialogTitle_do4x4_80";
+const innerContent = "_innerContent_do4x4_85";
+const closeButton = "_closeButton_do4x4_110";
 const styles$S = {
   themeVars: themeVars$B,
   overlay: overlay$2,
@@ -12806,6 +12886,7 @@ const styles$S = {
   content: content$6,
   overlayBg: overlayBg$1,
   nested,
+  contentAnimation,
   dialogTitle,
   innerContent,
   closeButton
@@ -12904,6 +12985,7 @@ const ModalDialog = React__default.forwardRef(
     className,
     onOpen,
     onClose,
+    externalAnimation = true,
     ...rest
   }, ref) => {
     const { root: root2 } = useTheme();
@@ -12952,7 +13034,13 @@ const ModalDialog = React__default.forwardRef(
       {
         ...rest,
         "data-part-id": PART_CONTENT,
-        className: classnames(styles$S.content, className),
+        className: classnames(
+          {
+            [styles$S.contentAnimation]: !externalAnimation
+          },
+          styles$S.content,
+          className
+        ),
         onPointerDownOutside: (event) => {
           if (event.target instanceof Element && (event.target.closest("._debug-inspect-button") !== null || event.target.localName === "com-1password-button")) {
             event.preventDefault();
@@ -13898,7 +13986,7 @@ function useValidation(validations, onValidate, value, dispatch, bindTo, throttl
       if (!ignore) {
         dispatch(fieldValidated(bindTo, partialResult));
         if (partialResult.partial) {
-          (async () => {
+          void (async () => {
             const result = await throttledAsyncValidate(validations, onValidate, deferredValue);
             if (!ignore) {
               dispatch(fieldValidated(bindTo, result));
@@ -13914,7 +14002,7 @@ function useValidation(validations, onValidate, value, dispatch, bindTo, throttl
   );
 }
 function useValidationDisplay(bindTo, value, validationResult, validationMode = defaultValidationMode) {
-  const interactionFlags = useFormContextPart((value2) => value2.interactionFlags[bindTo]) || EMPTY_OBJECT;
+  const interactionFlags = useFormContextPart((value2) => value2 == null ? void 0 : value2.interactionFlags[bindTo]) || EMPTY_OBJECT;
   const forceShowValidationResult = interactionFlags.forceShowValidationResult;
   const focused2 = interactionFlags.focused;
   const afterFirstDirtyBlur = interactionFlags.afterFirstDirtyBlur;
@@ -14198,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;
@@ -14235,7 +14322,7 @@ const Form = forwardRef(function({
   ]);
   const doCancel = useEvent(() => {
     onCancel == null ? void 0 : onCancel();
-    requestModalFormClose();
+    void requestModalFormClose();
   });
   const doSubmit = useEvent(async (event) => {
     var _a2;
@@ -14265,7 +14352,7 @@ const Form = forwardRef(function({
       dispatch(formSubmitted());
       await (onSuccess == null ? void 0 : onSuccess(result));
       if (!keepModalOpenOnSubmit) {
-        requestModalFormClose();
+        void requestModalFormClose();
       }
       if (initialValue === EMPTY_OBJECT) {
         flushSync(() => {
@@ -14445,13 +14532,15 @@ const FormWithContextVar = forwardRef(function({
   const completedNotificationMessage = extractValue.asOptionalString(node.props.completedNotificationMessage) || "";
   const errorNotificationMessage = extractValue.asOptionalString(node.props.errorNotificationMessage) || "";
   const submitUrl = extractValue.asOptionalString(node.props.submitUrl) || extractValue.asOptionalString(node.props._data_url);
+  const itemLabelWidth = extractValue.asOptionalString(node.props.itemLabelWidth);
+  const { cssProps: itemLabelWidthCssProps } = resolveLayoutProps({ width: itemLabelWidth });
   return /* @__PURE__ */ jsx(Slot, { ref, style: style2, children: /* @__PURE__ */ jsx(
     Form,
     {
       keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit),
       itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition),
       itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak),
-      itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth),
+      itemLabelWidth: itemLabelWidthCssProps.width,
       hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty),
       formState,
       dispatch,
@@ -15005,7 +15094,6 @@ class Lexer {
    * Fetches the next token from the input stream
    */
   fetch() {
-    const lexer = this;
     const input2 = this.input;
     const startPos = this._prefetchedPos || input2.position;
     const line2 = input2.line;
@@ -15018,6 +15106,14 @@ class Lexer {
     let lastEndColumn = input2.column;
     let ch = null;
     let useResolver = false;
+    const appendTokenChar = () => {
+      text2 += ch;
+      this._prefetched = null;
+      this._prefetchedPos = null;
+      this._prefetchedColumn = null;
+      lastEndPos = input2.position;
+      lastEndColumn = input2.position;
+    };
     let phase = this.getStartingPhaseThenReset();
     while (true) {
       ch = this.fetchNextChar();
@@ -15606,14 +15702,6 @@ class Lexer {
       }
       appendTokenChar();
     }
-    function appendTokenChar() {
-      text2 += ch;
-      lexer._prefetched = null;
-      lexer._prefetchedPos = null;
-      lexer._prefetchedColumn = null;
-      lastEndPos = input2.position;
-      lastEndColumn = input2.position;
-    }
     function makeToken() {
       if (useResolver) {
         tokenType = resolverHash.get(text2) ?? (isIdStart(text2[0]) && text2[text2.length - 1] !== "'" ? TokenType.Identifier : TokenType.Unknown);
@@ -16722,9 +16810,16 @@ class Parser {
    *   : "finally" blockStatement
    */
   parseTryStatement() {
+    const getBlock = () => {
+      const nextToken2 = this._lexer.peek();
+      if (nextToken2.type !== TokenType.LBrace) {
+        this.reportError("W012", nextToken2);
+        return null;
+      }
+      return this.parseBlockStatement();
+    };
     const startToken = this._lexer.peek();
     let endToken = this._lexer.get();
-    const parser = this;
     const tryB = getBlock();
     let catchB;
     let catchV;
@@ -16776,14 +16871,6 @@ class Parser {
       startToken,
       endToken
     );
-    function getBlock() {
-      const nextToken2 = parser._lexer.peek();
-      if (nextToken2.type !== TokenType.LBrace) {
-        parser.reportError("W012", nextToken2);
-        return null;
-      }
-      return parser.parseBlockStatement();
-    }
   }
   /**
    * Parses a switch statement
@@ -19805,7 +19892,7 @@ function processStatementQueue(statements, evalContext, thread) {
     thread.breakLabelValue = queue.length > 0 ? queue.peek().label : -1;
     let outcome;
     try {
-      (_a2 = evalContext == null ? void 0 : evalContext.onStatementStarted) == null ? void 0 : _a2.call(evalContext, evalContext, queueItem.statement);
+      void ((_a2 = evalContext == null ? void 0 : evalContext.onStatementStarted) == null ? void 0 : _a2.call(evalContext, evalContext, queueItem.statement));
       outcome = processStatement(
         queueItem.statement,
         queueItem.execInfo ?? {},
@@ -19845,7 +19932,7 @@ function processStatementQueue(statements, evalContext, thread) {
         diagInfo.clearToLabels++;
       }
     }
-    (_b = evalContext == null ? void 0 : evalContext.onStatementCompleted) == null ? void 0 : _b.call(evalContext, evalContext, queueItem.statement);
+    void ((_b = evalContext == null ? void 0 : evalContext.onStatementCompleted) == null ? void 0 : _b.call(evalContext, evalContext, queueItem.statement));
     if (queue.length > diagInfo.maxQueueLength) {
       diagInfo.maxQueueLength = queue.length;
     }
@@ -20562,7 +20649,7 @@ function evalAssignment(evaluator, thisStack, expr, evalContext, thread) {
   const rootScope = getRootIdScope(leftValue, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "assignment");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "assignment");
   }
   evaluator(thisStack, leftValue, evalContext, thread);
   thisStack.pop();
@@ -20570,7 +20657,7 @@ function evalAssignment(evaluator, thisStack, expr, evalContext, thread) {
   thisStack.pop();
   const value = evalAssignmentCore(thisStack, expr, evalContext, thread);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "assignment");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "assignment");
   }
   return value;
 }
@@ -20578,13 +20665,13 @@ function evalPreOrPost(evaluator, thisStack, expr, evalContext, thread) {
   const rootScope = getRootIdScope(expr.expr, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "pre-post");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "pre-post");
   }
   evaluator(thisStack, expr.expr, evalContext, thread);
   thisStack.pop();
   const value = evalPreOrPostCore(thisStack, expr, evalContext, thread);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "pre-post");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "pre-post");
   }
   return value;
 }
@@ -20663,11 +20750,11 @@ function evalFunctionInvocation(evaluator, thisStack, expr, evalContext, thread)
   const rootScope = getRootIdScope(expr.obj, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "function-call");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "function-call");
   }
   const value = ((_b = evalContext.options) == null ? void 0 : _b.defaultToOptionalMemberAccess) ? functionObj == null ? void 0 : functionObj.call(currentContext, ...functionArgs) : functionObj.call(currentContext, ...functionArgs);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "function-call");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "function-call");
   }
   setExprValue(expr, { value }, thread);
   thisStack.push(value);
@@ -21839,62 +21926,99 @@ function useLongPress(elementRef, action2, delay2 = 500) {
     };
   }, [elementRef, action2, delay2]);
 }
-const themeVars$y = `'{"padding-item-Select": "var(--xmlui-padding-item-Select)", "paddingHorizontal-item-Select": "var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select))", "paddingVertical-item-Select": "var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select))", "paddingLeft-item-Select": "var(--xmlui-paddingLeft-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingRight-item-Select": "var(--xmlui-paddingRight-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingTop-item-Select": "var(--xmlui-paddingTop-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "paddingBottom-item-Select": "var(--xmlui-paddingBottom-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "padding-Select": "var(--xmlui-padding-Select)", "paddingHorizontal-Select": "var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select))", "paddingVertical-Select": "var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select))", "paddingLeft-Select": "var(--xmlui-paddingLeft-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingRight-Select": "var(--xmlui-paddingRight-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingTop-Select": "var(--xmlui-paddingTop-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "paddingBottom-Select": "var(--xmlui-paddingBottom-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "Input:fontSize-Select-default": "var(--xmlui-fontSize-Select-default)", "Input:textColor-placeholder-Select-default": "var(--xmlui-textColor-placeholder-Select-default)", "Input:textColor-Select-default": "var(--xmlui-textColor-Select-default)", "Input:fontSize-Select-error": "var(--xmlui-fontSize-Select-error)", "Input:textColor-placeholder-Select-error": "var(--xmlui-textColor-placeholder-Select-error)", "Input:textColor-Select-error": "var(--xmlui-textColor-Select-error)", "Input:fontSize-Select-warning": "var(--xmlui-fontSize-Select-warning)", "Input:textColor-placeholder-Select-warning": "var(--xmlui-textColor-placeholder-Select-warning)", "Input:textColor-Select-warning": "var(--xmlui-textColor-Select-warning)", "Input:fontSize-Select-success": "var(--xmlui-fontSize-Select-success)", "Input:textColor-placeholder-Select-success": "var(--xmlui-textColor-placeholder-Select-success)", "Input:textColor-Select-success": "var(--xmlui-textColor-Select-success)", "Input:borderRadius-Select-default": "var(--xmlui-borderRadius-Select-default)", "Input:borderColor-Select-default": "var(--xmlui-borderColor-Select-default)", "Input:borderWidth-Select-default": "var(--xmlui-borderWidth-Select-default)", "Input:borderStyle-Select-default": "var(--xmlui-borderStyle-Select-default)", "Input:backgroundColor-Select-default": "var(--xmlui-backgroundColor-Select-default)", "Input:boxShadow-Select-default": "var(--xmlui-boxShadow-Select-default)", "Input:borderColor-Select-default--hover": "var(--xmlui-borderColor-Select-default--hover)", "Input:backgroundColor-Select-default--hover": "var(--xmlui-backgroundColor-Select-default--hover)", "Input:boxShadow-Select-default--hover": "var(--xmlui-boxShadow-Select-default--hover)", "Input:textColor-Select-default--hover": "var(--xmlui-textColor-Select-default--hover)", "Input:outlineWidth-Select-default--focus": "var(--xmlui-outlineWidth-Select-default--focus)", "Input:outlineColor-Select-default--focus": "var(--xmlui-outlineColor-Select-default--focus)", "Input:outlineStyle-Select-default--focus": "var(--xmlui-outlineStyle-Select-default--focus)", "Input:outlineOffset-Select-default--focus": "var(--xmlui-outlineOffset-Select-default--focus)", "Input:fontSize-placeholder-Select-default": "var(--xmlui-fontSize-placeholder-Select-default)", "Input:borderRadius-Select-error": "var(--xmlui-borderRadius-Select-error)", "Input:borderColor-Select-error": "var(--xmlui-borderColor-Select-error)", "Input:borderWidth-Select-error": "var(--xmlui-borderWidth-Select-error)", "Input:borderStyle-Select-error": "var(--xmlui-borderStyle-Select-error)", "Input:backgroundColor-Select-error": "var(--xmlui-backgroundColor-Select-error)", "Input:boxShadow-Select-error": "var(--xmlui-boxShadow-Select-error)", "Input:borderColor-Select-error--hover": "var(--xmlui-borderColor-Select-error--hover)", "Input:backgroundColor-Select-error--hover": "var(--xmlui-backgroundColor-Select-error--hover)", "Input:boxShadow-Select-error--hover": "var(--xmlui-boxShadow-Select-error--hover)", "Input:textColor-Select-error--hover": "var(--xmlui-textColor-Select-error--hover)", "Input:outlineWidth-Select-error--focus": "var(--xmlui-outlineWidth-Select-error--focus)", "Input:outlineColor-Select-error--focus": "var(--xmlui-outlineColor-Select-error--focus)", "Input:outlineStyle-Select-error--focus": "var(--xmlui-outlineStyle-Select-error--focus)", "Input:outlineOffset-Select-error--focus": "var(--xmlui-outlineOffset-Select-error--focus)", "Input:fontSize-placeholder-Select-error": "var(--xmlui-fontSize-placeholder-Select-error)", "Input:borderRadius-Select-warning": "var(--xmlui-borderRadius-Select-warning)", "Input:borderColor-Select-warning": "var(--xmlui-borderColor-Select-warning)", "Input:borderWidth-Select-warning": "var(--xmlui-borderWidth-Select-warning)", "Input:borderStyle-Select-warning": "var(--xmlui-borderStyle-Select-warning)", "Input:backgroundColor-Select-warning": "var(--xmlui-backgroundColor-Select-warning)", "Input:boxShadow-Select-warning": "var(--xmlui-boxShadow-Select-warning)", "Input:borderColor-Select-warning--hover": "var(--xmlui-borderColor-Select-warning--hover)", "Input:backgroundColor-Select-warning--hover": "var(--xmlui-backgroundColor-Select-warning--hover)", "Input:boxShadow-Select-warning--hover": "var(--xmlui-boxShadow-Select-warning--hover)", "Input:textColor-Select-warning--hover": "var(--xmlui-textColor-Select-warning--hover)", "Input:outlineWidth-Select-warning--focus": "var(--xmlui-outlineWidth-Select-warning--focus)", "Input:outlineColor-Select-warning--focus": "var(--xmlui-outlineColor-Select-warning--focus)", "Input:outlineStyle-Select-warning--focus": "var(--xmlui-outlineStyle-Select-warning--focus)", "Input:outlineOffset-Select-warning--focus": "var(--xmlui-outlineOffset-Select-warning--focus)", "Input:fontSize-placeholder-Select-warning": "var(--xmlui-fontSize-placeholder-Select-warning)", "Input:borderRadius-Select-success": "var(--xmlui-borderRadius-Select-success)", "Input:borderColor-Select-success": "var(--xmlui-borderColor-Select-success)", "Input:borderWidth-Select-success": "var(--xmlui-borderWidth-Select-success)", "Input:borderStyle-Select-success": "var(--xmlui-borderStyle-Select-success)", "Input:backgroundColor-Select-success": "var(--xmlui-backgroundColor-Select-success)", "Input:boxShadow-Select-success": "var(--xmlui-boxShadow-Select-success)", "Input:borderColor-Select-success--hover": "var(--xmlui-borderColor-Select-success--hover)", "Input:backgroundColor-Select-success--hover": "var(--xmlui-backgroundColor-Select-success--hover)", "Input:boxShadow-Select-success--hover": "var(--xmlui-boxShadow-Select-success--hover)", "Input:textColor-Select-success--hover": "var(--xmlui-textColor-Select-success--hover)", "Input:outlineWidth-Select-success--focus": "var(--xmlui-outlineWidth-Select-success--focus)", "Input:outlineColor-Select-success--focus": "var(--xmlui-outlineColor-Select-success--focus)", "Input:outlineStyle-Select-success--focus": "var(--xmlui-outlineStyle-Select-success--focus)", "Input:outlineOffset-Select-success--focus": "var(--xmlui-outlineOffset-Select-success--focus)", "Input:fontSize-placeholder-Select-success": "var(--xmlui-fontSize-placeholder-Select-success)", "opacity-Select--disabled": "var(--xmlui-opacity-Select--disabled)", "Input:backgroundColor-Select--disabled": "var(--xmlui-backgroundColor-Select--disabled)", "Input:textColor-Select--disabled": "var(--xmlui-textColor-Select--disabled)", "Input:borderColor-Select--disabled": "var(--xmlui-borderColor-Select--disabled)", "paddingVertical-Select-badge": "var(--xmlui-paddingVertical-Select-badge)", "paddingHorizontal-Select-badge": "var(--xmlui-paddingHorizontal-Select-badge)", "borderRadius-Select-badge": "var(--xmlui-borderRadius-Select-badge)", "Input:fontSize-Select-badge": "var(--xmlui-fontSize-Select-badge)", "Input:backgroundColor-Select-badge": "var(--xmlui-backgroundColor-Select-badge)", "Input:textColor-Select-badge": "var(--xmlui-textColor-Select-badge)", "Input:backgroundColor-Select-badge--hover": "var(--xmlui-backgroundColor-Select-badge--hover)", "Input:textColor-Select-badge--hover": "var(--xmlui-textColor-Select-badge--hover)", "Input:backgroundColor-Select-badge--active": "var(--xmlui-backgroundColor-Select-badge--active)", "Input:textColor-Select-badge--active": "var(--xmlui-textColor-Select-badge--active)", "Input:textColor-placeholder-Select": "var(--xmlui-textColor-placeholder-Select)", "Input:backgroundColor-menu-Select": "var(--xmlui-backgroundColor-menu-Select)", "Input:borderRadius-menu-Select": "var(--xmlui-borderRadius-menu-Select)", "Input:boxShadow-menu-Select": "var(--xmlui-boxShadow-menu-Select)", "Input:borderWidth-menu-Select": "var(--xmlui-borderWidth-menu-Select)", "Input:borderColor-menu-Select": "var(--xmlui-borderColor-menu-Select)", "backgroundColor-item-Select": "var(--xmlui-backgroundColor-item-Select)", "backgroundColor-item-Select--hover": "var(--xmlui-backgroundColor-item-Select--hover)", "opacity-text-item-Select--disabled": "var(--xmlui-opacity-text-item-Select--disabled)", "fontSize-Select": "var(--xmlui-fontSize-Select)", "backgroundColor-item-Select--active": "var(--xmlui-backgroundColor-item-Select--active)", "textColor-indicator-Select": "var(--xmlui-textColor-indicator-Select)"}'`;
-const selectValue = "_selectValue_11axh_14";
-const error$8 = "_error_11axh_22";
-const warning$9 = "_warning_11axh_30";
-const valid$8 = "_valid_11axh_38";
-const selectTrigger = "_selectTrigger_11axh_46";
-const badgeListContainer = "_badgeListContainer_11axh_175";
-const badgeList$1 = "_badgeList_11axh_175";
-const badge$1 = "_badge_11axh_175";
-const actions$1 = "_actions_11axh_212";
-const placeholder = "_placeholder_11axh_217";
-const emptyList = "_emptyList_11axh_221";
-const selectScrollUpButton = "_selectScrollUpButton_11axh_230";
-const selectScrollDownButton = "_selectScrollDownButton_11axh_238";
-const command$1 = "_command_11axh_246";
-const commandInputContainer = "_commandInputContainer_11axh_255";
-const commandInput$1 = "_commandInput_11axh_255";
-const commandList$1 = "_commandList_11axh_278";
-const selectContent = "_selectContent_11axh_282";
-const fadeIn = "_fadeIn_11axh_1";
-const zoomIn = "_zoomIn_11axh_1";
-const fadeOut = "_fadeOut_11axh_1";
-const zoomOut = "_zoomOut_11axh_1";
-const slideInFromTop = "_slideInFromTop_11axh_1";
-const slideInFromRight = "_slideInFromRight_11axh_1";
-const slideInFromLeft = "_slideInFromLeft_11axh_1";
-const slideInFromBottom = "_slideInFromBottom_11axh_1";
-const multiComboboxOption = "_multiComboboxOption_11axh_323";
-const multiComboboxOptionContent = "_multiComboboxOptionContent_11axh_323";
-const selectItem = "_selectItem_11axh_347";
-const selectItemContent = "_selectItemContent_11axh_362";
-const selectItemIndicator = "_selectItemIndicator_11axh_381";
-const selectViewport = "_selectViewport_11axh_391";
-const selectEmpty = "_selectEmpty_11axh_396";
-const loading = "_loading_11axh_406";
-const srOnly = "_srOnly_11axh_409";
+const SelectContext = createContext({
+  value: null,
+  onChange: (selectedValue) => {
+  },
+  setOpen: (open) => {
+  },
+  setSelectedIndex: (index) => {
+  },
+  options: /* @__PURE__ */ new Set(),
+  optionRenderer: void 0
+});
+function useSelect() {
+  return useContext(SelectContext);
+}
+const OptionContext = createContext({
+  onOptionAdd: () => {
+  },
+  onOptionRemove: () => {
+  }
+});
+function useOption() {
+  return useContext(OptionContext);
+}
+const themeVars$y = `'{"border-Select": "var(--xmlui-border-Select)", "borderHorizontal-Select": "var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select))", "borderVertical-Select": "var(--xmlui-borderVertical-Select, var(--xmlui-border-Select))", "borderLeft-Select": "var(--xmlui-borderLeft-Select, var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select)))", "borderRight-Select": "var(--xmlui-borderRight-Select, var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select)))", "borderTop-Select": "var(--xmlui-borderTop-Select, var(--xmlui-borderVertical-Select, var(--xmlui-border-Select)))", "borderBottom-Select": "var(--xmlui-borderBottom-Select, var(--xmlui-borderVertical-Select, var(--xmlui-border-Select)))", "borderWidth-Select": "var(--xmlui-borderWidth-Select)", "borderHorizontalWidth-Select": "var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select))", "borderLeftWidth-Select": "var(--xmlui-borderLeftWidth-Select, var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderRightWidth-Select": "var(--xmlui-borderRightWidth-Select, var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderVerticalWidth-Select": "var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select))", "borderTopWidth-Select": "var(--xmlui-borderTopWidth-Select, var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderBottomWidth-Select": "var(--xmlui-borderBottomWidth-Select, var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderStyle-Select": "var(--xmlui-borderStyle-Select)", "borderHorizontalStyle-Select": "var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select))", "borderLeftStyle-Select": "var(--xmlui-borderLeftStyle-Select, var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderRightStyle-Select": "var(--xmlui-borderRightStyle-Select, var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderVerticalStyle-Select": "var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select))", "borderTopStyle-Select": "var(--xmlui-borderTopStyle-Select, var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderBottomStyle-Select": "var(--xmlui-borderBottomStyle-Select, var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderColor-Select": "var(--xmlui-borderColor-Select)", "borderHorizontalColor-Select": "var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select))", "borderLeftColor-Select": "var(--xmlui-borderLeftColor-Select, var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select)))", "borderRightColor-Select": "var(--xmlui-borderRightColor-Select, var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select)))", "borderVerticalColor-Select": "var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select))", "borderTopColor-Select": "var(--xmlui-borderTopColor-Select, var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select)))", "borderBottomColor-Select": "var(--xmlui-borderBottomColor-Select, var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select)))", "borderStartStartRadius-Select": "var(--xmlui-borderStartStartRadius-Select, var(--xmlui-borderRadius-Select))", "borderStartEndRadius-Select": "var(--xmlui-borderStartEndRadius-Select, var(--xmlui-borderRadius-Select))", "borderEndStartRadius-Select": "var(--xmlui-borderEndStartRadius-Select, var(--xmlui-borderRadius-Select))", "borderEndEndRadius-Select": "var(--xmlui-borderEndEndRadius-Select, var(--xmlui-borderRadius-Select))", "padding-Select": "var(--xmlui-padding-Select)", "paddingHorizontal-Select": "var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select))", "paddingVertical-Select": "var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select))", "paddingLeft-Select": "var(--xmlui-paddingLeft-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingRight-Select": "var(--xmlui-paddingRight-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingTop-Select": "var(--xmlui-paddingTop-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "paddingBottom-Select": "var(--xmlui-paddingBottom-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "padding-item-Select": "var(--xmlui-padding-item-Select)", "paddingHorizontal-item-Select": "var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select))", "paddingVertical-item-Select": "var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select))", "paddingLeft-item-Select": "var(--xmlui-paddingLeft-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingRight-item-Select": "var(--xmlui-paddingRight-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingTop-item-Select": "var(--xmlui-paddingTop-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "paddingBottom-item-Select": "var(--xmlui-paddingBottom-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "Input:borderRadius-Select-default": "var(--xmlui-borderRadius-Select-default)", "Input:borderColor-Select-default": "var(--xmlui-borderColor-Select-default)", "Input:borderWidth-Select-default": "var(--xmlui-borderWidth-Select-default)", "Input:borderStyle-Select-default": "var(--xmlui-borderStyle-Select-default)", "Input:fontSize-Select-default": "var(--xmlui-fontSize-Select-default)", "Input:backgroundColor-Select-default": "var(--xmlui-backgroundColor-Select-default)", "Input:boxShadow-Select-default": "var(--xmlui-boxShadow-Select-default)", "Input:textColor-Select-default": "var(--xmlui-textColor-Select-default)", "Input:borderColor-Select-default--hover": "var(--xmlui-borderColor-Select-default--hover)", "Input:backgroundColor-Select-default--hover": "var(--xmlui-backgroundColor-Select-default--hover)", "Input:boxShadow-Select-default--hover": "var(--xmlui-boxShadow-Select-default--hover)", "Input:textColor-Select-default--hover": "var(--xmlui-textColor-Select-default--hover)", "Input:outlineWidth-Select-default--focus": "var(--xmlui-outlineWidth-Select-default--focus)", "Input:outlineColor-Select-default--focus": "var(--xmlui-outlineColor-Select-default--focus)", "Input:outlineStyle-Select-default--focus": "var(--xmlui-outlineStyle-Select-default--focus)", "Input:outlineOffset-Select-default--focus": "var(--xmlui-outlineOffset-Select-default--focus)", "Input:textColor-placeholder-Select-default": "var(--xmlui-textColor-placeholder-Select-default)", "Input:fontSize-placeholder-Select-default": "var(--xmlui-fontSize-placeholder-Select-default)", "Input:borderRadius-Select-error": "var(--xmlui-borderRadius-Select-error)", "Input:borderColor-Select-error": "var(--xmlui-borderColor-Select-error)", "Input:borderWidth-Select-error": "var(--xmlui-borderWidth-Select-error)", "Input:borderStyle-Select-error": "var(--xmlui-borderStyle-Select-error)", "Input:fontSize-Select-error": "var(--xmlui-fontSize-Select-error)", "Input:backgroundColor-Select-error": "var(--xmlui-backgroundColor-Select-error)", "Input:boxShadow-Select-error": "var(--xmlui-boxShadow-Select-error)", "Input:textColor-Select-error": "var(--xmlui-textColor-Select-error)", "Input:borderColor-Select-error--hover": "var(--xmlui-borderColor-Select-error--hover)", "Input:backgroundColor-Select-error--hover": "var(--xmlui-backgroundColor-Select-error--hover)", "Input:boxShadow-Select-error--hover": "var(--xmlui-boxShadow-Select-error--hover)", "Input:textColor-Select-error--hover": "var(--xmlui-textColor-Select-error--hover)", "Input:outlineWidth-Select-error--focus": "var(--xmlui-outlineWidth-Select-error--focus)", "Input:outlineColor-Select-error--focus": "var(--xmlui-outlineColor-Select-error--focus)", "Input:outlineStyle-Select-error--focus": "var(--xmlui-outlineStyle-Select-error--focus)", "Input:outlineOffset-Select-error--focus": "var(--xmlui-outlineOffset-Select-error--focus)", "Input:textColor-placeholder-Select-error": "var(--xmlui-textColor-placeholder-Select-error)", "Input:fontSize-placeholder-Select-error": "var(--xmlui-fontSize-placeholder-Select-error)", "Input:borderRadius-Select-warning": "var(--xmlui-borderRadius-Select-warning)", "Input:borderColor-Select-warning": "var(--xmlui-borderColor-Select-warning)", "Input:borderWidth-Select-warning": "var(--xmlui-borderWidth-Select-warning)", "Input:borderStyle-Select-warning": "var(--xmlui-borderStyle-Select-warning)", "Input:fontSize-Select-warning": "var(--xmlui-fontSize-Select-warning)", "Input:backgroundColor-Select-warning": "var(--xmlui-backgroundColor-Select-warning)", "Input:boxShadow-Select-warning": "var(--xmlui-boxShadow-Select-warning)", "Input:textColor-Select-warning": "var(--xmlui-textColor-Select-warning)", "Input:borderColor-Select-warning--hover": "var(--xmlui-borderColor-Select-warning--hover)", "Input:backgroundColor-Select-warning--hover": "var(--xmlui-backgroundColor-Select-warning--hover)", "Input:boxShadow-Select-warning--hover": "var(--xmlui-boxShadow-Select-warning--hover)", "Input:textColor-Select-warning--hover": "var(--xmlui-textColor-Select-warning--hover)", "Input:outlineWidth-Select-warning--focus": "var(--xmlui-outlineWidth-Select-warning--focus)", "Input:outlineColor-Select-warning--focus": "var(--xmlui-outlineColor-Select-warning--focus)", "Input:outlineStyle-Select-warning--focus": "var(--xmlui-outlineStyle-Select-warning--focus)", "Input:outlineOffset-Select-warning--focus": "var(--xmlui-outlineOffset-Select-warning--focus)", "Input:textColor-placeholder-Select-warning": "var(--xmlui-textColor-placeholder-Select-warning)", "Input:fontSize-placeholder-Select-warning": "var(--xmlui-fontSize-placeholder-Select-warning)", "Input:borderRadius-Select-success": "var(--xmlui-borderRadius-Select-success)", "Input:borderColor-Select-success": "var(--xmlui-borderColor-Select-success)", "Input:borderWidth-Select-success": "var(--xmlui-borderWidth-Select-success)", "Input:borderStyle-Select-success": "var(--xmlui-borderStyle-Select-success)", "Input:fontSize-Select-success": "var(--xmlui-fontSize-Select-success)", "Input:backgroundColor-Select-success": "var(--xmlui-backgroundColor-Select-success)", "Input:boxShadow-Select-success": "var(--xmlui-boxShadow-Select-success)", "Input:textColor-Select-success": "var(--xmlui-textColor-Select-success)", "Input:borderColor-Select-success--hover": "var(--xmlui-borderColor-Select-success--hover)", "Input:backgroundColor-Select-success--hover": "var(--xmlui-backgroundColor-Select-success--hover)", "Input:boxShadow-Select-success--hover": "var(--xmlui-boxShadow-Select-success--hover)", "Input:textColor-Select-success--hover": "var(--xmlui-textColor-Select-success--hover)", "Input:outlineWidth-Select-success--focus": "var(--xmlui-outlineWidth-Select-success--focus)", "Input:outlineColor-Select-success--focus": "var(--xmlui-outlineColor-Select-success--focus)", "Input:outlineStyle-Select-success--focus": "var(--xmlui-outlineStyle-Select-success--focus)", "Input:outlineOffset-Select-success--focus": "var(--xmlui-outlineOffset-Select-success--focus)", "Input:textColor-placeholder-Select-success": "var(--xmlui-textColor-placeholder-Select-success)", "Input:fontSize-placeholder-Select-success": "var(--xmlui-fontSize-placeholder-Select-success)", "Input:backgroundColor-Select--disabled": "var(--xmlui-backgroundColor-Select--disabled)", "Input:textColor-Select--disabled": "var(--xmlui-textColor-Select--disabled)", "Input:borderColor-Select--disabled": "var(--xmlui-borderColor-Select--disabled)", "Input:outlineWidth-Select--focus": "var(--xmlui-outlineWidth-Select--focus)", "Input:outlineColor-Select--focus": "var(--xmlui-outlineColor-Select--focus)", "Input:outlineStyle-Select--focus": "var(--xmlui-outlineStyle-Select--focus)", "Input:outlineOffset-Select--focus": "var(--xmlui-outlineOffset-Select--focus)", "Input:textColor-placeholder-Select": "var(--xmlui-textColor-placeholder-Select)", "paddingVertical-Select-badge": "var(--xmlui-paddingVertical-Select-badge)", "paddingHorizontal-Select-badge": "var(--xmlui-paddingHorizontal-Select-badge)", "borderRadius-Select-badge": "var(--xmlui-borderRadius-Select-badge)", "Input:fontSize-Select-badge": "var(--xmlui-fontSize-Select-badge)", "Input:backgroundColor-Select-badge": "var(--xmlui-backgroundColor-Select-badge)", "Input:textColor-Select-badge": "var(--xmlui-textColor-Select-badge)", "Input:backgroundColor-Select-badge--hover": "var(--xmlui-backgroundColor-Select-badge--hover)", "Input:textColor-Select-badge--hover": "var(--xmlui-textColor-Select-badge--hover)", "Input:backgroundColor-Select-badge--active": "var(--xmlui-backgroundColor-Select-badge--active)", "Input:textColor-Select-badge--active": "var(--xmlui-textColor-Select-badge--active)", "Input:backgroundColor-menu-Select": "var(--xmlui-backgroundColor-menu-Select)", "Input:borderRadius-menu-Select": "var(--xmlui-borderRadius-menu-Select)", "Input:boxShadow-menu-Select": "var(--xmlui-boxShadow-menu-Select)", "Input:borderWidth-menu-Select": "var(--xmlui-borderWidth-menu-Select)", "Input:borderColor-menu-Select": "var(--xmlui-borderColor-menu-Select)", "backgroundColor-item-Select": "var(--xmlui-backgroundColor-item-Select)", "backgroundColor-item-Select--active": "var(--xmlui-backgroundColor-item-Select--active)", "backgroundColor-item-Select--hover": "var(--xmlui-backgroundColor-item-Select--hover)", "textColor-item-Select--disabled": "var(--xmlui-textColor-item-Select--disabled)", "opacity-text-item-Select--disabled": "var(--xmlui-opacity-text-item-Select--disabled)", "textColor-indicator-Select": "var(--xmlui-textColor-indicator-Select)"}'`;
+const selectTrigger = "_selectTrigger_1v71t_17";
+const error$8 = "_error_1v71t_54";
+const warning$9 = "_warning_1v71t_80";
+const valid$8 = "_valid_1v71t_106";
+const disabled$7 = "_disabled_1v71t_132";
+const focused$3 = "_focused_1v71t_139";
+const placeholder = "_placeholder_1v71t_145";
+const actions$1 = "_actions_1v71t_162";
+const action$1 = "_action_1v71t_162";
+const emptyList = "_emptyList_1v71t_173";
+const badgeListContainer = "_badgeListContainer_1v71t_185";
+const badgeList$1 = "_badgeList_1v71t_185";
+const inputWrapper$1 = "_inputWrapper_1v71t_198";
+const badge$1 = "_badge_1v71t_185";
+const selectContent = "_selectContent_1v71t_233";
+const command$1 = "_command_1v71t_241";
+const commandInputContainer = "_commandInputContainer_1v71t_246";
+const commandInput$1 = "_commandInput_1v71t_246";
+const commandList$1 = "_commandList_1v71t_265";
+const multiSelectOption = "_multiSelectOption_1v71t_272";
+const multiSelectOptionContent = "_multiSelectOptionContent_1v71t_286";
+const highlighted$1 = "_highlighted_1v71t_295";
+const disabledOption$1 = "_disabledOption_1v71t_301";
+const selectValue = "_selectValue_1v71t_316";
+const selectDropdownContent = "_selectDropdownContent_1v71t_331";
+const fadeIn = "_fadeIn_1v71t_1";
+const zoomIn = "_zoomIn_1v71t_1";
+const fadeOut = "_fadeOut_1v71t_1";
+const zoomOut = "_zoomOut_1v71t_1";
+const slideInFromTop = "_slideInFromTop_1v71t_1";
+const slideInFromRight = "_slideInFromRight_1v71t_1";
+const slideInFromLeft = "_slideInFromLeft_1v71t_1";
+const slideInFromBottom = "_slideInFromBottom_1v71t_1";
+const selectViewport = "_selectViewport_1v71t_364";
+const selectScrollUpButton = "_selectScrollUpButton_1v71t_368";
+const selectScrollDownButton = "_selectScrollDownButton_1v71t_376";
+const selectEmpty = "_selectEmpty_1v71t_384";
+const selectOption = "_selectOption_1v71t_397";
+const selectOptionContent = "_selectOptionContent_1v71t_420";
+const selectOptionIndicator = "_selectOptionIndicator_1v71t_434";
+const loading = "_loading_1v71t_444";
+const srOnly = "_srOnly_1v71t_447";
 const styles$O = {
   themeVars: themeVars$y,
-  selectValue,
+  selectTrigger,
   error: error$8,
   warning: warning$9,
   valid: valid$8,
-  selectTrigger,
+  disabled: disabled$7,
+  focused: focused$3,
+  placeholder,
+  actions: actions$1,
+  action: action$1,
+  emptyList,
   badgeListContainer,
   badgeList: badgeList$1,
+  inputWrapper: inputWrapper$1,
   badge: badge$1,
-  actions: actions$1,
-  placeholder,
-  emptyList,
-  selectScrollUpButton,
-  selectScrollDownButton,
+  selectContent,
   command: command$1,
   commandInputContainer,
   commandInput: commandInput$1,
   commandList: commandList$1,
-  selectContent,
+  multiSelectOption,
+  multiSelectOptionContent,
+  highlighted: highlighted$1,
+  disabledOption: disabledOption$1,
+  selectValue,
+  selectDropdownContent,
   fadeIn,
   zoomIn,
   fadeOut,
@@ -21903,20 +22027,67 @@ const styles$O = {
   slideInFromRight,
   slideInFromLeft,
   slideInFromBottom,
-  multiComboboxOption,
-  multiComboboxOptionContent,
-  selectItem,
-  selectItemContent,
-  selectItemIndicator,
   selectViewport,
+  selectScrollUpButton,
+  selectScrollDownButton,
   selectEmpty,
+  selectOption,
+  selectOptionContent,
+  selectOptionIndicator,
   loading,
   srOnly
 };
-const SelectContext = createContext(null);
-function useSelect() {
-  return useContext(SelectContext);
-}
+const SelectOption = forwardRef(
+  function SelectOption2(option, ref) {
+    const visibleContentRef = useRef(null);
+    const { value, label: label2, enabled: enabled2 = true, children, className } = option;
+    const { value: selectedValue, optionRenderer } = useSelect();
+    const { onOptionRemove, onOptionAdd } = useOption();
+    const opt = useMemo(() => {
+      return {
+        ...option,
+        label: label2 ?? "",
+        keywords: [label2 ?? ""]
+      };
+    }, [option, label2]);
+    useEffect(() => {
+      onOptionAdd(opt);
+      return () => onOptionRemove(opt);
+    }, [opt, onOptionAdd, onOptionRemove]);
+    return /* @__PURE__ */ jsxs(
+      Item$1,
+      {
+        ref,
+        className: classnames(className, styles$O.selectOption),
+        value,
+        textValue: label2,
+        disabled: !enabled2,
+        onClick: (event) => {
+          event.stopPropagation();
+        },
+        "data-state": selectedValue === value && "checked",
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { display: "none" }, children: /* @__PURE__ */ jsx(ItemText, { children: label2 }) }),
+          children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: styles$O.selectOptionContent, ref: visibleContentRef, children }),
+            selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$O.selectOptionIndicator, children: /* @__PURE__ */ jsx(Icon$l, { name: "checkmark" }) })
+          ] }) : optionRenderer ? /* @__PURE__ */ jsx("div", { className: styles$O.selectOptionContent, ref: visibleContentRef, children: optionRenderer(
+            {
+              label: label2,
+              value,
+              enabled: enabled2
+            },
+            selectedValue,
+            false
+          ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: styles$O.selectOptionContent, ref: visibleContentRef, children: label2 }),
+            selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$O.selectItemIndicator, children: /* @__PURE__ */ jsx(Icon$l, { name: "checkmark" }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
 const OptionTypeContext = React__default.createContext(null);
 function useOptionType() {
   return React__default.useContext(OptionTypeContext);
@@ -21927,15 +22098,6 @@ function OptionTypeProvider({
 }) {
   return /* @__PURE__ */ jsx(OptionTypeContext.Provider, { value: Component, children });
 }
-const OptionContext = createContext({
-  onOptionAdd: () => {
-  },
-  onOptionRemove: () => {
-  }
-});
-function useOption() {
-  return useContext(OptionContext);
-}
 function HiddenOption(option) {
   const { label: label2 } = option;
   const { onOptionRemove, onOptionAdd } = useOption();
@@ -21954,18 +22116,6 @@ function HiddenOption(option) {
   }, [opt, onOptionAdd, onOptionRemove]);
   return /* @__PURE__ */ jsx("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.children });
 }
-const defaultProps$L = {
-  enabled: true,
-  placeholder: "",
-  autoFocus: false,
-  searchable: false,
-  multiSelect: false,
-  required: false,
-  inProgress: false,
-  inProgressNotificationMessage: "",
-  readOnly: false,
-  validationStatus: "none"
-};
 const SimpleSelect = forwardRef(
   function SimpleSelect2(props, forwardedRef) {
     const { root: root2 } = useTheme();
@@ -22031,25 +22181,24 @@ const SimpleSelect = forwardRef(
               "div",
               {
                 className: classnames(styles$O.selectValue, {
-                  [styles$O.selectValue]: value !== void 0,
                   [styles$O.placeholder]: value === void 0
                 }),
                 children: selectedOption ? selectedOption.label : readOnly2 ? "" : placeholder2
               }
             ),
-            /* @__PURE__ */ jsx(Icon$m, { asChild: true, children: /* @__PURE__ */ jsx(Icon$l, { name: "chevrondown" }) })
+            /* @__PURE__ */ jsx("span", { className: styles$O.action, children: /* @__PURE__ */ jsx(Icon$l, { name: "chevrondown" }) })
           ]
         }
       ),
       /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsxs(
         Content,
         {
-          className: styles$O.selectContent,
+          className: styles$O.selectDropdownContent,
           position: "popper",
           style: { maxHeight: height, minWidth: width },
           children: [
             /* @__PURE__ */ jsx(ScrollUpButton, { className: styles$O.selectScrollUpButton, children: /* @__PURE__ */ jsx(Icon$l, { name: "chevronup" }) }),
-            /* @__PURE__ */ jsxs(SelectViewport, { className: styles$O.selectViewport, role: "listbox", children: [
+            /* @__PURE__ */ jsxs(Viewport, { className: styles$O.selectViewport, role: "listbox", children: [
               children,
               optionsArray.length === 0 && emptyListNode
             ] }),
@@ -22060,6 +22209,148 @@ const SimpleSelect = forwardRef(
     ] });
   }
 );
+const MultiSelectOption = forwardRef(function MultiSelectOption2(option, forwardedRef) {
+  const id = useId();
+  const {
+    label: label2,
+    value,
+    enabled: enabled2 = true,
+    keywords,
+    readOnly: readOnly2,
+    children,
+    isHighlighted = false,
+    itemIndex
+  } = option;
+  const {
+    value: selectedValue,
+    onChange,
+    multiSelect,
+    setOpen,
+    setSelectedIndex,
+    optionRenderer
+  } = useSelect();
+  const selected2 = useMemo(() => {
+    return Array.isArray(selectedValue) && multiSelect ? selectedValue.map((v) => String(v)).includes(value) : String(selectedValue) === String(value);
+  }, [selectedValue, value, multiSelect]);
+  const handleClick = () => {
+    if (readOnly2) {
+      setOpen(false);
+      return;
+    }
+    if (enabled2) {
+      onChange(value);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      ref: forwardedRef,
+      role: "option",
+      "aria-disabled": !enabled2,
+      "aria-selected": selected2,
+      className: classnames(styles$O.multiSelectOption, {
+        [styles$O.disabledOption]: !enabled2,
+        [styles$O.highlighted]: isHighlighted
+      }),
+      onMouseDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onMouseEnter: () => {
+        if (itemIndex !== void 0 && setSelectedIndex && enabled2) {
+          setSelectedIndex(itemIndex);
+        }
+      },
+      onClick: handleClick,
+      "data-state": selected2 ? "checked" : void 0,
+      children: /* @__PURE__ */ jsx("div", { className: styles$O.multiSelectOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children || label2,
+        selected2 && /* @__PURE__ */ jsx(Icon$l, { name: "checkmark" })
+      ] }) })
+    }
+  );
+});
+const defaultProps$L = {
+  enabled: true,
+  placeholder: "",
+  autoFocus: false,
+  searchable: false,
+  multiSelect: false,
+  required: false,
+  inProgress: false,
+  inProgressNotificationMessage: "",
+  readOnly: false,
+  validationStatus: "none"
+};
+const SelectTriggerValue = ({
+  value,
+  placeholder: placeholder2,
+  readOnly: readOnly2,
+  multiSelect,
+  options: options2,
+  valueRenderer,
+  toggleOption
+}) => {
+  if (multiSelect) {
+    if (Array.isArray(value) && value.length > 0) {
+      return /* @__PURE__ */ jsx("div", { className: styles$O.badgeListContainer, children: /* @__PURE__ */ jsx("div", { className: styles$O.badgeList, children: value.map(
+        (v) => {
+          var _a2;
+          return valueRenderer ? valueRenderer(
+            Array.from(options2).find((o) => o.value === `${v}`),
+            () => {
+              toggleOption(v);
+            }
+          ) : /* @__PURE__ */ jsxs("span", { className: styles$O.badge, children: [
+            (_a2 = Array.from(options2).find((o) => o.value === `${v}`)) == null ? void 0 : _a2.label,
+            /* @__PURE__ */ jsx(
+              Icon$l,
+              {
+                name: "close",
+                size: "sm",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  toggleOption(v);
+                }
+              }
+            )
+          ] }, v);
+        }
+      ) }) });
+    }
+    return /* @__PURE__ */ jsx("span", { placeholder: placeholder2, className: styles$O.placeholder, children: placeholder2 });
+  }
+  if (value !== void 0 && value !== null && value !== "") {
+    const selectedOption = Array.from(options2).find((o) => o.value === value);
+    return /* @__PURE__ */ jsx("div", { className: styles$O.selectValue, children: selectedOption == null ? void 0 : selectedOption.label });
+  }
+  return /* @__PURE__ */ jsx("div", { "aria-placeholder": placeholder2, className: styles$O.placeholder, children: readOnly2 ? "" : placeholder2 || "" });
+};
+const SelectTriggerActions = ({
+  value,
+  multiSelect,
+  enabled: enabled2,
+  readOnly: readOnly2,
+  clearValue,
+  showChevron = true
+}) => {
+  const hasValue = multiSelect ? Array.isArray(value) && value.length > 0 : value !== void 0 && value !== null && value !== "";
+  return /* @__PURE__ */ jsxs("div", { className: styles$O.actions, children: [
+    hasValue && enabled2 && !readOnly2 && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: styles$O.action,
+        onClick: (event) => {
+          event.stopPropagation();
+          clearValue();
+        },
+        children: /* @__PURE__ */ jsx(Icon$l, { name: "close" })
+      }
+    ),
+    showChevron && /* @__PURE__ */ jsx("span", { className: styles$O.action, children: /* @__PURE__ */ jsx(Icon$l, { name: "chevrondown" }) })
+  ] });
+};
 const Select = forwardRef(function Select2({
   // Basic props
   id,
@@ -22095,7 +22386,6 @@ const Select = forwardRef(function Select2({
   children,
   ...rest
 }, forwardedRef) {
-  var _a2;
   const [referenceElement, setReferenceElement] = useState(null);
   const [open, setOpen] = useState(false);
   const [width, setWidth] = useState(0);
@@ -22103,22 +22393,40 @@ const Select = forwardRef(function Select2({
   const { root: root2 } = useTheme();
   const [options2, setOptions] = useState(/* @__PURE__ */ new Set());
   const isInForm = useIsInsideForm();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const filteredOptions = useMemo(() => {
+    if (!searchTerm || searchTerm.trim() === "") {
+      return Array.from(options2);
+    }
+    const searchLower = searchTerm.toLowerCase();
+    return Array.from(options2).filter((option) => {
+      const extendedValue = option.value + " " + option.label + " " + (option.keywords || []).join(" ");
+      return extendedValue.toLowerCase().includes(searchLower);
+    });
+  }, [options2, searchTerm]);
+  useEffect(() => {
+    if (!open) {
+      setSelectedIndex(-1);
+      setSearchTerm("");
+    }
+  }, [open]);
   useEffect(() => {
     if (initialValue !== void 0) {
       updateState({ value: initialValue }, { initial: true });
     }
   }, [initialValue, updateState]);
   useEffect(() => {
-    var _a3;
+    var _a2;
     const current = referenceElement;
-    (_a3 = observer.current) == null ? void 0 : _a3.disconnect();
+    (_a2 = observer.current) == null ? void 0 : _a2.disconnect();
     if (current) {
       observer.current = new ResizeObserver(() => setWidth(current.clientWidth));
       observer.current.observe(current);
     }
     return () => {
-      var _a4;
-      (_a4 = observer.current) == null ? void 0 : _a4.disconnect();
+      var _a3;
+      (_a3 = observer.current) == null ? void 0 : _a3.disconnect();
     };
   }, [referenceElement]);
   const toggleOption = useCallback(
@@ -22137,6 +22445,84 @@ const Select = forwardRef(function Select2({
     updateState({ value: newValue });
     onDidChange(newValue);
   }, [multiSelect, updateState, onDidChange]);
+  const findNextEnabledIndex = useCallback(
+    (currentIndex) => {
+      for (let i = currentIndex + 1; i < filteredOptions.length; i++) {
+        const item2 = filteredOptions[i];
+        if (item2.enabled !== false) {
+          return i;
+        }
+      }
+      for (let i = 0; i <= currentIndex; i++) {
+        const item2 = filteredOptions[i];
+        if (item2.enabled !== false) {
+          return i;
+        }
+      }
+      return -1;
+    },
+    [filteredOptions]
+  );
+  const findPreviousEnabledIndex = useCallback(
+    (currentIndex) => {
+      for (let i = currentIndex - 1; i >= 0; i--) {
+        const item2 = filteredOptions[i];
+        if (item2.enabled !== false) {
+          return i;
+        }
+      }
+      for (let i = filteredOptions.length - 1; i >= currentIndex; i--) {
+        const item2 = filteredOptions[i];
+        if (item2.enabled !== false) {
+          return i;
+        }
+      }
+      return -1;
+    },
+    [filteredOptions]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!open) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setSelectedIndex((prev) => {
+            const nextIndex = findNextEnabledIndex(prev);
+            return nextIndex !== -1 ? nextIndex : prev;
+          });
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setSelectedIndex((prev) => {
+            const prevIndex = findPreviousEnabledIndex(prev);
+            return prevIndex !== -1 ? prevIndex : prev;
+          });
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (selectedIndex >= 0 && selectedIndex < filteredOptions.length) {
+            const selectedItem = filteredOptions[selectedIndex];
+            if (selectedItem.enabled !== false) {
+              toggleOption(selectedItem.value);
+            }
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          setOpen(false);
+          break;
+      }
+    },
+    [
+      open,
+      selectedIndex,
+      filteredOptions,
+      toggleOption,
+      findNextEnabledIndex,
+      findPreviousEnabledIndex
+    ]
+  );
   const focus = useCallback(() => {
     referenceElement == null ? void 0 : referenceElement.focus();
   }, [referenceElement]);
@@ -22188,14 +22574,15 @@ const Select = forwardRef(function Select2({
       value,
       onChange: toggleOption,
       setOpen,
+      setSelectedIndex,
       options: options2,
       optionRenderer
     }),
-    [multiSelect, toggleOption, value, options2]
+    [multiSelect, toggleOption, value, options2, optionRenderer]
   );
   return /* @__PURE__ */ jsx(SelectContext.Provider, { value: selectContextValue, children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? /* @__PURE__ */ jsxs(OptionTypeProvider, { Component: HiddenOption, children: [
     /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         PopoverTrigger,
         {
           ...rest,
@@ -22221,45 +22608,30 @@ const Select = forwardRef(function Select2({
             className
           ),
           autoFocus,
-          children: /* @__PURE__ */ jsxs(Fragment, { children: [
-            multiSelect ? Array.isArray(value) && value.length > 0 ? /* @__PURE__ */ jsx("div", { className: styles$O.badgeListContainer, children: /* @__PURE__ */ jsx("div", { className: styles$O.badgeList, children: value.map(
-              (v) => {
-                var _a3;
-                return valueRenderer ? valueRenderer(
-                  Array.from(options2).find((o) => o.value === `${v}`),
-                  () => {
-                    toggleOption(v);
-                  }
-                ) : /* @__PURE__ */ jsxs("span", { className: styles$O.badge, children: [
-                  (_a3 = Array.from(options2).find((o) => o.value === `${v}`)) == null ? void 0 : _a3.label,
-                  /* @__PURE__ */ jsx(
-                    Icon$l,
-                    {
-                      name: "close",
-                      size: "sm",
-                      onClick: (event) => {
-                        event.stopPropagation();
-                        toggleOption(v);
-                      }
-                    }
-                  )
-                ] }, v);
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectTriggerValue,
+              {
+                value,
+                placeholder: placeholder2,
+                readOnly: readOnly2,
+                multiSelect,
+                options: options2,
+                valueRenderer,
+                toggleOption
               }
-            ) }) }) : /* @__PURE__ */ jsx("span", { placeholder: placeholder2, className: styles$O.placeholder, children: placeholder2 }) : value !== void 0 && value !== null ? /* @__PURE__ */ jsx("div", { children: (_a2 = Array.from(options2).find((o) => o.value === value)) == null ? void 0 : _a2.label }) : /* @__PURE__ */ jsx("span", { "aria-placeholder": placeholder2, className: styles$O.placeholder, children: placeholder2 || "" }),
-            /* @__PURE__ */ jsxs("div", { className: styles$O.actions, children: [
-              multiSelect && Array.isArray(value) && value.length > 0 && /* @__PURE__ */ jsx(
-                Icon$l,
-                {
-                  name: "close",
-                  onClick: (event) => {
-                    event.stopPropagation();
-                    clearValue();
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(Icon$l, { name: "chevrondown" })
-            ] })
-          ] })
+            ),
+            /* @__PURE__ */ jsx(
+              SelectTriggerActions,
+              {
+                value,
+                multiSelect,
+                enabled: enabled2,
+                readOnly: readOnly2,
+                clearValue
+              }
+            )
+          ]
         }
       ),
       open && /* @__PURE__ */ jsx(Portal$1, { container: root2, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, loop: true, trapped: true, children: /* @__PURE__ */ jsx(
@@ -22267,50 +22639,40 @@ const Select = forwardRef(function Select2({
         {
           style: { minWidth: width, height: dropdownHeight },
           className: styles$O.selectContent,
-          children: /* @__PURE__ */ jsxs(
-            Command,
-            {
-              className: styles$O.command,
-              shouldFilter: searchable,
-              filter: (_, search, keywords) => {
-                const lowSearch = search.toLowerCase();
-                for (const kw of keywords) {
-                  if (kw.toLowerCase().includes(lowSearch)) return 1;
+          onKeyDown: handleKeyDown,
+          children: /* @__PURE__ */ jsxs("div", { className: styles$O.command, children: [
+            searchable ? /* @__PURE__ */ jsxs("div", { className: styles$O.commandInputContainer, children: [
+              /* @__PURE__ */ jsx(Icon$l, { name: "search" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  role: "combobox",
+                  className: classnames(styles$O.commandInput),
+                  placeholder: "Search...",
+                  value: searchTerm,
+                  onChange: (e) => setSearchTerm(e.target.value),
+                  autoFocus: true
                 }
-                return 0;
-              },
-              children: [
-                searchable ? /* @__PURE__ */ jsxs("div", { className: styles$O.commandInputContainer, children: [
-                  /* @__PURE__ */ jsx(Icon$l, { name: "search" }),
-                  /* @__PURE__ */ jsx(
-                    CommandInput,
-                    {
-                      className: classnames(styles$O.commandInput),
-                      placeholder: "Search..."
-                    }
-                  )
-                ] }) : (
-                  // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
-                  /* @__PURE__ */ jsx("button", { autoFocus: true, "aria-hidden": "true", className: styles$O.srOnly })
-                ),
-                /* @__PURE__ */ jsxs(CommandList, { className: styles$O.commandList, children: [
-                  inProgress && /* @__PURE__ */ jsx("div", { className: styles$O.loading, children: inProgressNotificationMessage }),
-                  Array.from(options2).map(({ value: value2, label: label2, enabled: enabled22, keywords }) => /* @__PURE__ */ jsx(
-                    ComboboxOption,
-                    {
-                      readOnly: readOnly2,
-                      value: value2,
-                      label: label2,
-                      enabled: enabled22,
-                      keywords
-                    },
-                    value2
-                  )),
-                  !inProgress && /* @__PURE__ */ jsx(CommandEmpty, { children: emptyListNode })
-                ] })
-              ]
-            }
-          )
+              )
+            ] }) : /* @__PURE__ */ jsx("button", { autoFocus: true, "aria-hidden": "true", className: styles$O.srOnly }),
+            /* @__PURE__ */ jsxs("div", { role: "listbox", className: styles$O.commandList, children: [
+              inProgress && /* @__PURE__ */ jsx("div", { className: styles$O.loading, children: inProgressNotificationMessage }),
+              filteredOptions.map(({ value: value2, label: label2, enabled: enabled22, keywords }, index) => /* @__PURE__ */ jsx(
+                MultiSelectOption,
+                {
+                  readOnly: readOnly2,
+                  value: value2,
+                  label: label2,
+                  enabled: enabled22,
+                  keywords,
+                  isHighlighted: selectedIndex === index,
+                  itemIndex: index
+                },
+                value2
+              )),
+              !inProgress && filteredOptions.length === 0 && /* @__PURE__ */ jsx("div", { children: emptyListNode })
+            ] })
+          ] })
         }
       ) }) })
     ] }),
@@ -22341,104 +22703,6 @@ const Select = forwardRef(function Select2({
     children
   ) }) }) });
 });
-const ComboboxOption = forwardRef(function Combobox(option, forwardedRef) {
-  const id = useId();
-  const { label: label2, value, enabled: enabled2 = true, keywords, readOnly: readOnly2, children } = option;
-  const { value: selectedValue, onChange, multiSelect, setOpen, optionRenderer } = useSelect();
-  const selected2 = useMemo(() => {
-    return Array.isArray(selectedValue) && multiSelect ? selectedValue.map((v) => String(v)).includes(value) : String(selectedValue) === String(value);
-  }, [selectedValue, value, multiSelect]);
-  return /* @__PURE__ */ jsx(
-    CommandItem,
-    {
-      id,
-      ref: forwardedRef,
-      disabled: !enabled2,
-      value,
-      className: styles$O.multiComboboxOption,
-      onSelect: () => {
-        if (readOnly2) {
-          setOpen(false);
-          return;
-        }
-        onChange(value);
-      },
-      onClick: (event) => {
-        event.stopPropagation();
-      },
-      "data-state": selected2 ? "checked" : void 0,
-      keywords: [...keywords, label2],
-      children: /* @__PURE__ */ jsx("div", { className: styles$O.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        children || label2,
-        selected2 && /* @__PURE__ */ jsx(Icon$l, { name: "checkmark" })
-      ] }) })
-    },
-    id
-  );
-});
-const SelectOption = React__default.forwardRef(
-  (option, ref) => {
-    var _a2;
-    const visibleContentRef = useRef(null);
-    const { value, label: label2, enabled: enabled2 = true, children, className } = option;
-    const { value: selectedValue, optionRenderer } = useSelect();
-    const { onOptionRemove, onOptionAdd } = useOption();
-    const opt = useMemo(() => {
-      var _a3, _b;
-      return {
-        ...option,
-        label: label2 ?? ((_a3 = visibleContentRef.current) == null ? void 0 : _a3.textContent) ?? "",
-        keywords: [label2 ?? ((_b = visibleContentRef.current) == null ? void 0 : _b.textContent) ?? ""]
-        // Store the rendered ReactNode for dropdown display
-      };
-    }, [option, label2, visibleContentRef.current]);
-    useEffect(() => {
-      onOptionAdd(opt);
-      return () => onOptionRemove(opt);
-    }, [opt, onOptionAdd, onOptionRemove]);
-    return /* @__PURE__ */ jsxs(
-      Item$1,
-      {
-        ref,
-        className: classnames(styles$O.selectItem, className),
-        value,
-        textValue: label2 || ((_a2 = visibleContentRef.current) == null ? void 0 : _a2.textContent),
-        disabled: !enabled2,
-        onClick: (event) => {
-          event.stopPropagation();
-        },
-        onMouseEnter: (event) => {
-          const target2 = event.currentTarget;
-          target2.setAttribute("data-highlighted", "");
-        },
-        onMouseLeave: (event) => {
-          const target2 = event.currentTarget;
-          target2.removeAttribute("data-highlighted");
-        },
-        "data-state": selectedValue === value && "checked",
-        children: [
-          /* @__PURE__ */ jsx("span", { style: { display: "none" }, children: /* @__PURE__ */ jsx(ItemText, { children: label2 }) }),
-          children ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: styles$O.selectItemContent, ref: visibleContentRef, children }),
-            selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$O.selectItemIndicator, children: /* @__PURE__ */ jsx(Icon$l, { name: "checkmark" }) })
-          ] }) : optionRenderer ? /* @__PURE__ */ jsx("div", { className: styles$O.selectItemContent, ref: visibleContentRef, children: optionRenderer(
-            {
-              label: label2,
-              value,
-              enabled: enabled2
-            },
-            selectedValue,
-            false
-          ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: styles$O.selectItemContent, ref: visibleContentRef, children: label2 }),
-            selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$O.selectItemIndicator, children: /* @__PURE__ */ jsx(Icon$l, { name: "checkmark" }) })
-          ] })
-        ]
-      }
-    );
-  }
-);
-SelectOption.displayName = "SelectOption";
 const themeVars$x = `'{"gap-RadioGroupOption": "var(--xmlui-gap-RadioGroupOption)", "borderWidth-RadioGroupOption": "var(--xmlui-borderWidth-RadioGroupOption)", "borderWidth-RadioGroupOption-validation": "var(--xmlui-borderWidth-RadioGroupOption-validation)", "Input:borderColor-RadioGroupOption-default": "var(--xmlui-borderColor-RadioGroupOption-default)", "Input:borderColor-checked-RadioGroupOption": "var(--xmlui-borderColor-checked-RadioGroupOption)", "Input:borderColor-RadioGroupOption-default--hover": "var(--xmlui-borderColor-RadioGroupOption-default--hover)", "Input:borderColor-RadioGroupOption-default--active": "var(--xmlui-borderColor-RadioGroupOption-default--active)", "Input:borderColor-RadioGroupOption--disabled": "var(--xmlui-borderColor-RadioGroupOption--disabled)", "Input:borderColor-RadioGroupOption-error": "var(--xmlui-borderColor-RadioGroupOption-error)", "Input:borderColor-RadioGroupOption-warning": "var(--xmlui-borderColor-RadioGroupOption-warning)", "Input:borderColor-RadioGroupOption-success": "var(--xmlui-borderColor-RadioGroupOption-success)", "Input:backgroundColor-RadioGroupOption-default": "var(--xmlui-backgroundColor-RadioGroupOption-default)", "Input:backgroundColor-checked-RadioGroupOption": "var(--xmlui-backgroundColor-checked-RadioGroupOption)", "Input:backgroundColor-checked-RadioGroupOption--disabled": "var(--xmlui-backgroundColor-checked-RadioGroupOption--disabled)", "Input:color-RadioGroupOption--disabled": "var(--xmlui-color-RadioGroupOption--disabled)", "Input:fontSize-RadioGroupOption": "var(--xmlui-fontSize-RadioGroupOption)", "Input:fontWeight-RadioGroupOption": "var(--xmlui-fontWeight-RadioGroupOption)", "Input:textColor-RadioGroupOption-default": "var(--xmlui-textColor-RadioGroupOption-default)", "Input:textColor-RadioGroupOption-error": "var(--xmlui-textColor-RadioGroupOption-error)", "Input:textColor-RadioGroupOption-warning": "var(--xmlui-textColor-RadioGroupOption-warning)", "Input:textColor-RadioGroupOption-success": "var(--xmlui-textColor-RadioGroupOption-success)", "Input:outlineWidth-RadioGroupOption--focus": "var(--xmlui-outlineWidth-RadioGroupOption--focus)", "Input:outlineColor-RadioGroupOption--focus": "var(--xmlui-outlineColor-RadioGroupOption--focus)", "Input:outlineStyle-RadioGroupOption--focus": "var(--xmlui-outlineStyle-RadioGroupOption--focus)", "Input:outlineOffset-RadioGroupOption--focus": "var(--xmlui-outlineOffset-RadioGroupOption--focus)"}'`;
 const radioGroupContainer = "_radioGroupContainer_fn2iu_14";
 const radioOptionContainer = "_radioOptionContainer_fn2iu_20";
@@ -22987,24 +23251,25 @@ const TextArea = forwardRef(function TextArea2({
     }
   );
 });
-const themeVars$v = `'{"border-AutoComplete": "var(--xmlui-border-AutoComplete)", "borderHorizontal-AutoComplete": "var(--xmlui-borderHorizontal-AutoComplete, var(--xmlui-border-AutoComplete))", "borderVertical-AutoComplete": "var(--xmlui-borderVertical-AutoComplete, var(--xmlui-border-AutoComplete))", "borderLeft-AutoComplete": "var(--xmlui-borderLeft-AutoComplete, var(--xmlui-borderHorizontal-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderRight-AutoComplete": "var(--xmlui-borderRight-AutoComplete, var(--xmlui-borderHorizontal-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderTop-AutoComplete": "var(--xmlui-borderTop-AutoComplete, var(--xmlui-borderVertical-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderBottom-AutoComplete": "var(--xmlui-borderBottom-AutoComplete, var(--xmlui-borderVertical-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderWidth-AutoComplete": "var(--xmlui-borderWidth-AutoComplete)", "borderHorizontalWidth-AutoComplete": "var(--xmlui-borderHorizontalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete))", "borderLeftWidth-AutoComplete": "var(--xmlui-borderLeftWidth-AutoComplete, var(--xmlui-borderHorizontalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderRightWidth-AutoComplete": "var(--xmlui-borderRightWidth-AutoComplete, var(--xmlui-borderHorizontalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderVerticalWidth-AutoComplete": "var(--xmlui-borderVerticalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete))", "borderTopWidth-AutoComplete": "var(--xmlui-borderTopWidth-AutoComplete, var(--xmlui-borderVerticalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderBottomWidth-AutoComplete": "var(--xmlui-borderBottomWidth-AutoComplete, var(--xmlui-borderVerticalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderStyle-AutoComplete": "var(--xmlui-borderStyle-AutoComplete)", "borderHorizontalStyle-AutoComplete": "var(--xmlui-borderHorizontalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete))", "borderLeftStyle-AutoComplete": "var(--xmlui-borderLeftStyle-AutoComplete, var(--xmlui-borderHorizontalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderRightStyle-AutoComplete": "var(--xmlui-borderRightStyle-AutoComplete, var(--xmlui-borderHorizontalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderVerticalStyle-AutoComplete": "var(--xmlui-borderVerticalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete))", "borderTopStyle-AutoComplete": "var(--xmlui-borderTopStyle-AutoComplete, var(--xmlui-borderVerticalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderBottomStyle-AutoComplete": "var(--xmlui-borderBottomStyle-AutoComplete, var(--xmlui-borderVerticalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderColor-AutoComplete": "var(--xmlui-borderColor-AutoComplete)", "borderHorizontalColor-AutoComplete": "var(--xmlui-borderHorizontalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete))", "borderLeftColor-AutoComplete": "var(--xmlui-borderLeftColor-AutoComplete, var(--xmlui-borderHorizontalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderRightColor-AutoComplete": "var(--xmlui-borderRightColor-AutoComplete, var(--xmlui-borderHorizontalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderVerticalColor-AutoComplete": "var(--xmlui-borderVerticalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete))", "borderTopColor-AutoComplete": "var(--xmlui-borderTopColor-AutoComplete, var(--xmlui-borderVerticalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderBottomColor-AutoComplete": "var(--xmlui-borderBottomColor-AutoComplete, var(--xmlui-borderVerticalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderStartStartRadius-AutoComplete": "var(--xmlui-borderStartStartRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "borderStartEndRadius-AutoComplete": "var(--xmlui-borderStartEndRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "borderEndStartRadius-AutoComplete": "var(--xmlui-borderEndStartRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "borderEndEndRadius-AutoComplete": "var(--xmlui-borderEndEndRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "padding-AutoComplete": "var(--xmlui-padding-AutoComplete)", "paddingHorizontal-AutoComplete": "var(--xmlui-paddingHorizontal-AutoComplete, var(--xmlui-padding-AutoComplete))", "paddingVertical-AutoComplete": "var(--xmlui-paddingVertical-AutoComplete, var(--xmlui-padding-AutoComplete))", "paddingLeft-AutoComplete": "var(--xmlui-paddingLeft-AutoComplete, var(--xmlui-paddingHorizontal-AutoComplete, var(--xmlui-padding-AutoComplete)))", "paddingRight-AutoComplete": "var(--xmlui-paddingRight-AutoComplete, var(--xmlui-paddingHorizontal-AutoComplete, var(--xmlui-padding-AutoComplete)))", "paddingTop-AutoComplete": "var(--xmlui-paddingTop-AutoComplete, var(--xmlui-paddingVertical-AutoComplete, var(--xmlui-padding-AutoComplete)))", "paddingBottom-AutoComplete": "var(--xmlui-paddingBottom-AutoComplete, var(--xmlui-paddingVertical-AutoComplete, var(--xmlui-padding-AutoComplete)))", "Input:borderRadius-AutoComplete-default": "var(--xmlui-borderRadius-AutoComplete-default)", "Input:borderColor-AutoComplete-default": "var(--xmlui-borderColor-AutoComplete-default)", "Input:borderWidth-AutoComplete-default": "var(--xmlui-borderWidth-AutoComplete-default)", "Input:borderStyle-AutoComplete-default": "var(--xmlui-borderStyle-AutoComplete-default)", "Input:fontSize-AutoComplete-default": "var(--xmlui-fontSize-AutoComplete-default)", "Input:backgroundColor-AutoComplete-default": "var(--xmlui-backgroundColor-AutoComplete-default)", "Input:boxShadow-AutoComplete-default": "var(--xmlui-boxShadow-AutoComplete-default)", "Input:textColor-AutoComplete-default": "var(--xmlui-textColor-AutoComplete-default)", "Input:borderColor-AutoComplete-default--hover": "var(--xmlui-borderColor-AutoComplete-default--hover)", "Input:backgroundColor-AutoComplete-default--hover": "var(--xmlui-backgroundColor-AutoComplete-default--hover)", "Input:boxShadow-AutoComplete-default--hover": "var(--xmlui-boxShadow-AutoComplete-default--hover)", "Input:textColor-AutoComplete-default--hover": "var(--xmlui-textColor-AutoComplete-default--hover)", "Input:textColor-placeholder-AutoComplete-default": "var(--xmlui-textColor-placeholder-AutoComplete-default)", "Input:fontSize-placeholder-AutoComplete-default": "var(--xmlui-fontSize-placeholder-AutoComplete-default)", "Input:borderRadius-AutoComplete-error": "var(--xmlui-borderRadius-AutoComplete-error)", "Input:borderColor-AutoComplete-error": "var(--xmlui-borderColor-AutoComplete-error)", "Input:borderWidth-AutoComplete-error": "var(--xmlui-borderWidth-AutoComplete-error)", "Input:borderStyle-AutoComplete-error": "var(--xmlui-borderStyle-AutoComplete-error)", "Input:fontSize-AutoComplete-error": "var(--xmlui-fontSize-AutoComplete-error)", "Input:backgroundColor-AutoComplete-error": "var(--xmlui-backgroundColor-AutoComplete-error)", "Input:boxShadow-AutoComplete-error": "var(--xmlui-boxShadow-AutoComplete-error)", "Input:textColor-AutoComplete-error": "var(--xmlui-textColor-AutoComplete-error)", "Input:borderColor-AutoComplete-error--hover": "var(--xmlui-borderColor-AutoComplete-error--hover)", "Input:backgroundColor-AutoComplete-error--hover": "var(--xmlui-backgroundColor-AutoComplete-error--hover)", "Input:boxShadow-AutoComplete-error--hover": "var(--xmlui-boxShadow-AutoComplete-error--hover)", "Input:textColor-AutoComplete-error--hover": "var(--xmlui-textColor-AutoComplete-error--hover)", "Input:textColor-placeholder-AutoComplete-error": "var(--xmlui-textColor-placeholder-AutoComplete-error)", "Input:fontSize-placeholder-AutoComplete-error": "var(--xmlui-fontSize-placeholder-AutoComplete-error)", "Input:borderRadius-AutoComplete-warning": "var(--xmlui-borderRadius-AutoComplete-warning)", "Input:borderColor-AutoComplete-warning": "var(--xmlui-borderColor-AutoComplete-warning)", "Input:borderWidth-AutoComplete-warning": "var(--xmlui-borderWidth-AutoComplete-warning)", "Input:borderStyle-AutoComplete-warning": "var(--xmlui-borderStyle-AutoComplete-warning)", "Input:fontSize-AutoComplete-warning": "var(--xmlui-fontSize-AutoComplete-warning)", "Input:backgroundColor-AutoComplete-warning": "var(--xmlui-backgroundColor-AutoComplete-warning)", "Input:boxShadow-AutoComplete-warning": "var(--xmlui-boxShadow-AutoComplete-warning)", "Input:textColor-AutoComplete-warning": "var(--xmlui-textColor-AutoComplete-warning)", "Input:borderColor-AutoComplete-warning--hover": "var(--xmlui-borderColor-AutoComplete-warning--hover)", "Input:backgroundColor-AutoComplete-warning--hover": "var(--xmlui-backgroundColor-AutoComplete-warning--hover)", "Input:boxShadow-AutoComplete-warning--hover": "var(--xmlui-boxShadow-AutoComplete-warning--hover)", "Input:textColor-AutoComplete-warning--hover": "var(--xmlui-textColor-AutoComplete-warning--hover)", "Input:textColor-placeholder-AutoComplete-warning": "var(--xmlui-textColor-placeholder-AutoComplete-warning)", "Input:fontSize-placeholder-AutoComplete-warning": "var(--xmlui-fontSize-placeholder-AutoComplete-warning)", "Input:borderRadius-AutoComplete-success": "var(--xmlui-borderRadius-AutoComplete-success)", "Input:borderColor-AutoComplete-success": "var(--xmlui-borderColor-AutoComplete-success)", "Input:borderWidth-AutoComplete-success": "var(--xmlui-borderWidth-AutoComplete-success)", "Input:borderStyle-AutoComplete-success": "var(--xmlui-borderStyle-AutoComplete-success)", "Input:fontSize-AutoComplete-success": "var(--xmlui-fontSize-AutoComplete-success)", "Input:backgroundColor-AutoComplete-success": "var(--xmlui-backgroundColor-AutoComplete-success)", "Input:boxShadow-AutoComplete-success": "var(--xmlui-boxShadow-AutoComplete-success)", "Input:textColor-AutoComplete-success": "var(--xmlui-textColor-AutoComplete-success)", "Input:borderColor-AutoComplete-success--hover": "var(--xmlui-borderColor-AutoComplete-success--hover)", "Input:backgroundColor-AutoComplete-success--hover": "var(--xmlui-backgroundColor-AutoComplete-success--hover)", "Input:boxShadow-AutoComplete-success--hover": "var(--xmlui-boxShadow-AutoComplete-success--hover)", "Input:textColor-AutoComplete-success--hover": "var(--xmlui-textColor-AutoComplete-success--hover)", "Input:textColor-placeholder-AutoComplete-success": "var(--xmlui-textColor-placeholder-AutoComplete-success)", "Input:fontSize-placeholder-AutoComplete-success": "var(--xmlui-fontSize-placeholder-AutoComplete-success)", "Input:backgroundColor-AutoComplete--disabled": "var(--xmlui-backgroundColor-AutoComplete--disabled)", "Input:textColor-AutoComplete--disabled": "var(--xmlui-textColor-AutoComplete--disabled)", "Input:borderColor-AutoComplete--disabled": "var(--xmlui-borderColor-AutoComplete--disabled)", "Input:outlineWidth-AutoComplete--focus": "var(--xmlui-outlineWidth-AutoComplete--focus)", "Input:outlineColor-AutoComplete--focus": "var(--xmlui-outlineColor-AutoComplete--focus)", "Input:outlineStyle-AutoComplete--focus": "var(--xmlui-outlineStyle-AutoComplete--focus)", "Input:outlineOffset-AutoComplete--focus": "var(--xmlui-outlineOffset-AutoComplete--focus)", "paddingVertical-AutoComplete-badge": "var(--xmlui-paddingVertical-AutoComplete-badge)", "paddingHorizontal-AutoComplete-badge": "var(--xmlui-paddingHorizontal-AutoComplete-badge)", "borderRadius-AutoComplete-badge": "var(--xmlui-borderRadius-AutoComplete-badge)", "Input:fontSize-AutoComplete-badge": "var(--xmlui-fontSize-AutoComplete-badge)", "Input:backgroundColor-AutoComplete-badge": "var(--xmlui-backgroundColor-AutoComplete-badge)", "Input:textColor-AutoComplete-badge": "var(--xmlui-textColor-AutoComplete-badge)", "Input:backgroundColor-AutoComplete-badge--hover": "var(--xmlui-backgroundColor-AutoComplete-badge--hover)", "Input:textColor-AutoComplete-badge--hover": "var(--xmlui-textColor-AutoComplete-badge--hover)", "Input:backgroundColor-AutoComplete-badge--active": "var(--xmlui-backgroundColor-AutoComplete-badge--active)", "Input:textColor-AutoComplete-badge--active": "var(--xmlui-textColor-AutoComplete-badge--active)", "Input:textColor-placeholder-AutoComplete": "var(--xmlui-textColor-placeholder-AutoComplete)", "Input:backgroundColor-menu-AutoComplete": "var(--xmlui-backgroundColor-menu-AutoComplete)", "Input:borderRadius-menu-AutoComplete": "var(--xmlui-borderRadius-menu-AutoComplete)", "Input:boxShadow-menu-AutoComplete": "var(--xmlui-boxShadow-menu-AutoComplete)", "backgroundColor-item-AutoComplete": "var(--xmlui-backgroundColor-item-AutoComplete)", "backgroundColor-item-AutoComplete--hover": "var(--xmlui-backgroundColor-item-AutoComplete--hover)", "textColor-item-AutoComplete--disabled": "var(--xmlui-textColor-item-AutoComplete--disabled)"}'`;
-const command = "_command_eqfil_14";
-const badgeListWrapper = "_badgeListWrapper_eqfil_20";
-const error$5 = "_error_eqfil_53";
-const warning$6 = "_warning_eqfil_73";
-const valid$5 = "_valid_eqfil_93";
-const disabled$5 = "_disabled_eqfil_113";
-const focused$2 = "_focused_eqfil_120";
-const badgeList = "_badgeList_eqfil_20";
-const inputWrapper = "_inputWrapper_eqfil_133";
-const badge = "_badge_eqfil_20";
-const commandInput = "_commandInput_eqfil_165";
-const actions = "_actions_eqfil_180";
-const action = "_action_eqfil_180";
-const autoCompleteEmpty = "_autoCompleteEmpty_eqfil_188";
-const commandList = "_commandList_eqfil_197";
-const autoCompleteOption = "_autoCompleteOption_eqfil_210";
-const disabledOption = "_disabledOption_eqfil_223";
+const themeVars$v = `'{"border-AutoComplete": "var(--xmlui-border-AutoComplete)", "borderHorizontal-AutoComplete": "var(--xmlui-borderHorizontal-AutoComplete, var(--xmlui-border-AutoComplete))", "borderVertical-AutoComplete": "var(--xmlui-borderVertical-AutoComplete, var(--xmlui-border-AutoComplete))", "borderLeft-AutoComplete": "var(--xmlui-borderLeft-AutoComplete, var(--xmlui-borderHorizontal-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderRight-AutoComplete": "var(--xmlui-borderRight-AutoComplete, var(--xmlui-borderHorizontal-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderTop-AutoComplete": "var(--xmlui-borderTop-AutoComplete, var(--xmlui-borderVertical-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderBottom-AutoComplete": "var(--xmlui-borderBottom-AutoComplete, var(--xmlui-borderVertical-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderWidth-AutoComplete": "var(--xmlui-borderWidth-AutoComplete)", "borderHorizontalWidth-AutoComplete": "var(--xmlui-borderHorizontalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete))", "borderLeftWidth-AutoComplete": "var(--xmlui-borderLeftWidth-AutoComplete, var(--xmlui-borderHorizontalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderRightWidth-AutoComplete": "var(--xmlui-borderRightWidth-AutoComplete, var(--xmlui-borderHorizontalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderVerticalWidth-AutoComplete": "var(--xmlui-borderVerticalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete))", "borderTopWidth-AutoComplete": "var(--xmlui-borderTopWidth-AutoComplete, var(--xmlui-borderVerticalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderBottomWidth-AutoComplete": "var(--xmlui-borderBottomWidth-AutoComplete, var(--xmlui-borderVerticalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderStyle-AutoComplete": "var(--xmlui-borderStyle-AutoComplete)", "borderHorizontalStyle-AutoComplete": "var(--xmlui-borderHorizontalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete))", "borderLeftStyle-AutoComplete": "var(--xmlui-borderLeftStyle-AutoComplete, var(--xmlui-borderHorizontalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderRightStyle-AutoComplete": "var(--xmlui-borderRightStyle-AutoComplete, var(--xmlui-borderHorizontalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderVerticalStyle-AutoComplete": "var(--xmlui-borderVerticalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete))", "borderTopStyle-AutoComplete": "var(--xmlui-borderTopStyle-AutoComplete, var(--xmlui-borderVerticalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderBottomStyle-AutoComplete": "var(--xmlui-borderBottomStyle-AutoComplete, var(--xmlui-borderVerticalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderColor-AutoComplete": "var(--xmlui-borderColor-AutoComplete)", "borderHorizontalColor-AutoComplete": "var(--xmlui-borderHorizontalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete))", "borderLeftColor-AutoComplete": "var(--xmlui-borderLeftColor-AutoComplete, var(--xmlui-borderHorizontalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderRightColor-AutoComplete": "var(--xmlui-borderRightColor-AutoComplete, var(--xmlui-borderHorizontalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderVerticalColor-AutoComplete": "var(--xmlui-borderVerticalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete))", "borderTopColor-AutoComplete": "var(--xmlui-borderTopColor-AutoComplete, var(--xmlui-borderVerticalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderBottomColor-AutoComplete": "var(--xmlui-borderBottomColor-AutoComplete, var(--xmlui-borderVerticalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderStartStartRadius-AutoComplete": "var(--xmlui-borderStartStartRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "borderStartEndRadius-AutoComplete": "var(--xmlui-borderStartEndRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "borderEndStartRadius-AutoComplete": "var(--xmlui-borderEndStartRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "borderEndEndRadius-AutoComplete": "var(--xmlui-borderEndEndRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "padding-AutoComplete": "var(--xmlui-padding-AutoComplete)", "paddingHorizontal-AutoComplete": "var(--xmlui-paddingHorizontal-AutoComplete, var(--xmlui-padding-AutoComplete))", "paddingVertical-AutoComplete": "var(--xmlui-paddingVertical-AutoComplete, var(--xmlui-padding-AutoComplete))", "paddingLeft-AutoComplete": "var(--xmlui-paddingLeft-AutoComplete, var(--xmlui-paddingHorizontal-AutoComplete, var(--xmlui-padding-AutoComplete)))", "paddingRight-AutoComplete": "var(--xmlui-paddingRight-AutoComplete, var(--xmlui-paddingHorizontal-AutoComplete, var(--xmlui-padding-AutoComplete)))", "paddingTop-AutoComplete": "var(--xmlui-paddingTop-AutoComplete, var(--xmlui-paddingVertical-AutoComplete, var(--xmlui-padding-AutoComplete)))", "paddingBottom-AutoComplete": "var(--xmlui-paddingBottom-AutoComplete, var(--xmlui-paddingVertical-AutoComplete, var(--xmlui-padding-AutoComplete)))", "padding-item-AutoComplete": "var(--xmlui-padding-item-AutoComplete)", "paddingHorizontal-item-AutoComplete": "var(--xmlui-paddingHorizontal-item-AutoComplete, var(--xmlui-padding-item-AutoComplete))", "paddingVertical-item-AutoComplete": "var(--xmlui-paddingVertical-item-AutoComplete, var(--xmlui-padding-item-AutoComplete))", "paddingLeft-item-AutoComplete": "var(--xmlui-paddingLeft-item-AutoComplete, var(--xmlui-paddingHorizontal-item-AutoComplete, var(--xmlui-padding-item-AutoComplete)))", "paddingRight-item-AutoComplete": "var(--xmlui-paddingRight-item-AutoComplete, var(--xmlui-paddingHorizontal-item-AutoComplete, var(--xmlui-padding-item-AutoComplete)))", "paddingTop-item-AutoComplete": "var(--xmlui-paddingTop-item-AutoComplete, var(--xmlui-paddingVertical-item-AutoComplete, var(--xmlui-padding-item-AutoComplete)))", "paddingBottom-item-AutoComplete": "var(--xmlui-paddingBottom-item-AutoComplete, var(--xmlui-paddingVertical-item-AutoComplete, var(--xmlui-padding-item-AutoComplete)))", "Input:borderRadius-AutoComplete-default": "var(--xmlui-borderRadius-AutoComplete-default)", "Input:borderColor-AutoComplete-default": "var(--xmlui-borderColor-AutoComplete-default)", "Input:borderWidth-AutoComplete-default": "var(--xmlui-borderWidth-AutoComplete-default)", "Input:borderStyle-AutoComplete-default": "var(--xmlui-borderStyle-AutoComplete-default)", "Input:fontSize-AutoComplete-default": "var(--xmlui-fontSize-AutoComplete-default)", "Input:backgroundColor-AutoComplete-default": "var(--xmlui-backgroundColor-AutoComplete-default)", "Input:boxShadow-AutoComplete-default": "var(--xmlui-boxShadow-AutoComplete-default)", "Input:textColor-AutoComplete-default": "var(--xmlui-textColor-AutoComplete-default)", "Input:borderColor-AutoComplete-default--hover": "var(--xmlui-borderColor-AutoComplete-default--hover)", "Input:backgroundColor-AutoComplete-default--hover": "var(--xmlui-backgroundColor-AutoComplete-default--hover)", "Input:boxShadow-AutoComplete-default--hover": "var(--xmlui-boxShadow-AutoComplete-default--hover)", "Input:textColor-AutoComplete-default--hover": "var(--xmlui-textColor-AutoComplete-default--hover)", "Input:textColor-placeholder-AutoComplete-default": "var(--xmlui-textColor-placeholder-AutoComplete-default)", "Input:fontSize-placeholder-AutoComplete-default": "var(--xmlui-fontSize-placeholder-AutoComplete-default)", "Input:borderRadius-AutoComplete-error": "var(--xmlui-borderRadius-AutoComplete-error)", "Input:borderColor-AutoComplete-error": "var(--xmlui-borderColor-AutoComplete-error)", "Input:borderWidth-AutoComplete-error": "var(--xmlui-borderWidth-AutoComplete-error)", "Input:borderStyle-AutoComplete-error": "var(--xmlui-borderStyle-AutoComplete-error)", "Input:fontSize-AutoComplete-error": "var(--xmlui-fontSize-AutoComplete-error)", "Input:backgroundColor-AutoComplete-error": "var(--xmlui-backgroundColor-AutoComplete-error)", "Input:boxShadow-AutoComplete-error": "var(--xmlui-boxShadow-AutoComplete-error)", "Input:textColor-AutoComplete-error": "var(--xmlui-textColor-AutoComplete-error)", "Input:borderColor-AutoComplete-error--hover": "var(--xmlui-borderColor-AutoComplete-error--hover)", "Input:backgroundColor-AutoComplete-error--hover": "var(--xmlui-backgroundColor-AutoComplete-error--hover)", "Input:boxShadow-AutoComplete-error--hover": "var(--xmlui-boxShadow-AutoComplete-error--hover)", "Input:textColor-AutoComplete-error--hover": "var(--xmlui-textColor-AutoComplete-error--hover)", "Input:textColor-placeholder-AutoComplete-error": "var(--xmlui-textColor-placeholder-AutoComplete-error)", "Input:fontSize-placeholder-AutoComplete-error": "var(--xmlui-fontSize-placeholder-AutoComplete-error)", "Input:borderRadius-AutoComplete-warning": "var(--xmlui-borderRadius-AutoComplete-warning)", "Input:borderColor-AutoComplete-warning": "var(--xmlui-borderColor-AutoComplete-warning)", "Input:borderWidth-AutoComplete-warning": "var(--xmlui-borderWidth-AutoComplete-warning)", "Input:borderStyle-AutoComplete-warning": "var(--xmlui-borderStyle-AutoComplete-warning)", "Input:fontSize-AutoComplete-warning": "var(--xmlui-fontSize-AutoComplete-warning)", "Input:backgroundColor-AutoComplete-warning": "var(--xmlui-backgroundColor-AutoComplete-warning)", "Input:boxShadow-AutoComplete-warning": "var(--xmlui-boxShadow-AutoComplete-warning)", "Input:textColor-AutoComplete-warning": "var(--xmlui-textColor-AutoComplete-warning)", "Input:borderColor-AutoComplete-warning--hover": "var(--xmlui-borderColor-AutoComplete-warning--hover)", "Input:backgroundColor-AutoComplete-warning--hover": "var(--xmlui-backgroundColor-AutoComplete-warning--hover)", "Input:boxShadow-AutoComplete-warning--hover": "var(--xmlui-boxShadow-AutoComplete-warning--hover)", "Input:textColor-AutoComplete-warning--hover": "var(--xmlui-textColor-AutoComplete-warning--hover)", "Input:textColor-placeholder-AutoComplete-warning": "var(--xmlui-textColor-placeholder-AutoComplete-warning)", "Input:fontSize-placeholder-AutoComplete-warning": "var(--xmlui-fontSize-placeholder-AutoComplete-warning)", "Input:borderRadius-AutoComplete-success": "var(--xmlui-borderRadius-AutoComplete-success)", "Input:borderColor-AutoComplete-success": "var(--xmlui-borderColor-AutoComplete-success)", "Input:borderWidth-AutoComplete-success": "var(--xmlui-borderWidth-AutoComplete-success)", "Input:borderStyle-AutoComplete-success": "var(--xmlui-borderStyle-AutoComplete-success)", "Input:fontSize-AutoComplete-success": "var(--xmlui-fontSize-AutoComplete-success)", "Input:backgroundColor-AutoComplete-success": "var(--xmlui-backgroundColor-AutoComplete-success)", "Input:boxShadow-AutoComplete-success": "var(--xmlui-boxShadow-AutoComplete-success)", "Input:textColor-AutoComplete-success": "var(--xmlui-textColor-AutoComplete-success)", "Input:borderColor-AutoComplete-success--hover": "var(--xmlui-borderColor-AutoComplete-success--hover)", "Input:backgroundColor-AutoComplete-success--hover": "var(--xmlui-backgroundColor-AutoComplete-success--hover)", "Input:boxShadow-AutoComplete-success--hover": "var(--xmlui-boxShadow-AutoComplete-success--hover)", "Input:textColor-AutoComplete-success--hover": "var(--xmlui-textColor-AutoComplete-success--hover)", "Input:textColor-placeholder-AutoComplete-success": "var(--xmlui-textColor-placeholder-AutoComplete-success)", "Input:fontSize-placeholder-AutoComplete-success": "var(--xmlui-fontSize-placeholder-AutoComplete-success)", "Input:backgroundColor-AutoComplete--disabled": "var(--xmlui-backgroundColor-AutoComplete--disabled)", "Input:textColor-AutoComplete--disabled": "var(--xmlui-textColor-AutoComplete--disabled)", "Input:borderColor-AutoComplete--disabled": "var(--xmlui-borderColor-AutoComplete--disabled)", "Input:outlineWidth-AutoComplete--focus": "var(--xmlui-outlineWidth-AutoComplete--focus)", "Input:outlineColor-AutoComplete--focus": "var(--xmlui-outlineColor-AutoComplete--focus)", "Input:outlineStyle-AutoComplete--focus": "var(--xmlui-outlineStyle-AutoComplete--focus)", "Input:outlineOffset-AutoComplete--focus": "var(--xmlui-outlineOffset-AutoComplete--focus)", "paddingVertical-AutoComplete-badge": "var(--xmlui-paddingVertical-AutoComplete-badge)", "paddingHorizontal-AutoComplete-badge": "var(--xmlui-paddingHorizontal-AutoComplete-badge)", "borderRadius-AutoComplete-badge": "var(--xmlui-borderRadius-AutoComplete-badge)", "Input:fontSize-AutoComplete-badge": "var(--xmlui-fontSize-AutoComplete-badge)", "Input:backgroundColor-AutoComplete-badge": "var(--xmlui-backgroundColor-AutoComplete-badge)", "Input:textColor-AutoComplete-badge": "var(--xmlui-textColor-AutoComplete-badge)", "Input:backgroundColor-AutoComplete-badge--hover": "var(--xmlui-backgroundColor-AutoComplete-badge--hover)", "Input:textColor-AutoComplete-badge--hover": "var(--xmlui-textColor-AutoComplete-badge--hover)", "Input:backgroundColor-AutoComplete-badge--active": "var(--xmlui-backgroundColor-AutoComplete-badge--active)", "Input:textColor-AutoComplete-badge--active": "var(--xmlui-textColor-AutoComplete-badge--active)", "Input:textColor-placeholder-AutoComplete": "var(--xmlui-textColor-placeholder-AutoComplete)", "Input:borderRadius-menu-AutoComplete": "var(--xmlui-borderRadius-menu-AutoComplete)", "Input:borderWidth-menu-AutoComplete": "var(--xmlui-borderWidth-menu-AutoComplete)", "Input:borderColor-menu-AutoComplete": "var(--xmlui-borderColor-menu-AutoComplete)", "Input:backgroundColor-menu-AutoComplete": "var(--xmlui-backgroundColor-menu-AutoComplete)", "Input:boxShadow-menu-AutoComplete": "var(--xmlui-boxShadow-menu-AutoComplete)", "backgroundColor-item-AutoComplete": "var(--xmlui-backgroundColor-item-AutoComplete)", "backgroundColor-item-AutoComplete--active": "var(--xmlui-backgroundColor-item-AutoComplete--active)", "backgroundColor-item-AutoComplete--hover": "var(--xmlui-backgroundColor-item-AutoComplete--hover)", "textColor-item-AutoComplete--disabled": "var(--xmlui-textColor-item-AutoComplete--disabled)"}'`;
+const command = "_command_1gtkp_14";
+const badgeListWrapper = "_badgeListWrapper_1gtkp_20";
+const error$5 = "_error_1gtkp_51";
+const warning$6 = "_warning_1gtkp_71";
+const valid$5 = "_valid_1gtkp_91";
+const disabled$5 = "_disabled_1gtkp_111";
+const focused$2 = "_focused_1gtkp_118";
+const badgeList = "_badgeList_1gtkp_20";
+const inputWrapper = "_inputWrapper_1gtkp_131";
+const badge = "_badge_1gtkp_20";
+const commandInput = "_commandInput_1gtkp_163";
+const actions = "_actions_1gtkp_178";
+const action = "_action_1gtkp_178";
+const autoCompleteEmpty = "_autoCompleteEmpty_1gtkp_186";
+const commandList = "_commandList_1gtkp_195";
+const autoCompleteOption = "_autoCompleteOption_1gtkp_208";
+const highlighted = "_highlighted_1gtkp_225";
+const disabledOption = "_disabledOption_1gtkp_228";
 const styles$L = {
   themeVars: themeVars$v,
   command,
@@ -23022,8 +23287,9 @@ const styles$L = {
   action,
   autoCompleteEmpty,
   commandList,
-  "fade-in": "_fade-in_eqfil_1",
+  "fade-in": "_fade-in_1gtkp_1",
   autoCompleteOption,
+  highlighted,
   disabledOption
 };
 const AutoCompleteContext = createContext({
@@ -23384,12 +23650,18 @@ const AutoComplete = forwardRef(function AutoComplete2({
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, ref: setReferenceElement, children: /* @__PURE__ */ jsxs(
             "div",
             {
+              ref: forwardedRef,
               style: style2,
               "data-part-id": PART_LIST_WRAPPER,
-              className: classnames(className, styles$L.badgeListWrapper, styles$L[validationStatus], {
-                [styles$L.disabled]: !enabled2,
-                [styles$L.focused]: isFocused
-              }),
+              className: classnames(
+                className,
+                styles$L.badgeListWrapper,
+                styles$L[validationStatus],
+                {
+                  [styles$L.disabled]: !enabled2,
+                  [styles$L.focused]: isFocused
+                }
+              ),
               "aria-expanded": open,
               children: [
                 Array.isArray(selectedValue) && selectedValue.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$L.badgeList, children: selectedValue.map((v, index) => /* @__PURE__ */ jsxs("span", { className: styles$L.badge, children: [
@@ -23567,7 +23839,7 @@ function CreatableItem({ onNewItem, isHighlighted = false }) {
       },
       onClick: handleClick,
       role: "option",
-      "aria-selected": isHighlighted,
+      "aria-selected": false,
       children: `Create "${searchTerm}"`
     }
   );
@@ -23608,7 +23880,7 @@ function AutoCompleteOption(option) {
       id,
       role: "option",
       "aria-disabled": !enabled2,
-      "aria-selected": isHighlighted,
+      "aria-selected": selected2,
       className: classnames(styles$L.autoCompleteOption, {
         [styles$L.disabledOption]: !enabled2,
         [styles$L.highlighted]: isHighlighted
@@ -24030,7 +24302,7 @@ function CodeBlock({
           icon: /* @__PURE__ */ jsx(Icon$l, { name: "copy", "aria-hidden": true }),
           onClick: () => {
             if (!textToCopy) return;
-            navigator.clipboard.writeText(textToCopy);
+            void navigator.clipboard.writeText(textToCopy);
             toast.success("Code copied!");
           }
         }
@@ -25338,7 +25610,7 @@ function hierarchyToNative(hierarchyData, fieldConfig) {
     treeItemsById
   };
 }
-const TreeRow = memo(({ index, style: style2, data }) => {
+const TreeRow = memo(({ index, data }) => {
   const {
     nodes,
     toggleNode,
@@ -25395,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, {
@@ -25523,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,
@@ -25896,7 +26167,7 @@ const TreeComponent = memo((props) => {
           if (currentIndex >= 0) {
             const currentNode = flatTreeData[currentIndex];
             if (currentNode.hasChildren && !currentNode.isExpanded) {
-              toggleNode(currentNode);
+              void toggleNode(currentNode);
             } else if (currentNode.hasChildren && currentNode.isExpanded && currentIndex + 1 < flatTreeData.length) {
               newIndex = currentIndex + 1;
             }
@@ -25908,7 +26179,7 @@ const TreeComponent = memo((props) => {
           if (currentIndex >= 0) {
             const currentNode = flatTreeData[currentIndex];
             if (currentNode.hasChildren && currentNode.isExpanded) {
-              toggleNode(currentNode);
+              void toggleNode(currentNode);
             } else if (currentNode.depth > 0) {
               for (let i = currentIndex - 1; i >= 0; i--) {
                 if (flatTreeData[i].depth < currentNode.depth) {
@@ -25940,7 +26211,7 @@ const TreeComponent = memo((props) => {
               newIndex = currentIndex;
             }
             if (e.key === "Enter" && currentNode.hasChildren) {
-              toggleNode(currentNode);
+              void toggleNode(currentNode);
             }
           }
           handled = true;
@@ -25986,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
@@ -26165,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) => {
@@ -26489,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)) })
     }
   );
 });
@@ -27296,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(
@@ -27683,14 +27939,7 @@ function useRowSelection({
       lastUpdateSourceRef.current = "table";
       (_a3 = syncWithAppState.update) == null ? void 0 : _a3.call(syncWithAppState, { selectedIds: currentSelectionIds });
     }
-  }, [
-    selectedItems,
-    syncWithAppState,
-    appStateSelection,
-    idKey,
-    rowsSelectable,
-    syncState
-  ]);
+  }, [selectedItems, syncWithAppState, appStateSelection, idKey, rowsSelectable, syncState]);
   useEffect(() => {
     if (syncState !== "idle") {
       const resetTimer = requestAnimationFrame(() => {
@@ -27869,7 +28118,7 @@ function useRowSelection({
     }
   });
   useEffect(() => {
-    onSelectionDidChange == null ? void 0 : onSelectionDidChange(selectedItems);
+    void (onSelectionDidChange == null ? void 0 : onSelectionDidChange(selectedItems));
   }, [selectedItems, onSelectionDidChange]);
   const checkAllRows = useEvent((checked) => {
     if (!rowsSelectable) {
@@ -28274,7 +28523,6 @@ const PaginationNative = forwardRef(function PaginationNative2({
           style: style2,
           className,
           labelPosition: orientation === "vertical" ? "top" : "start",
-          isInputTemplateUsed: true,
           children: /* @__PURE__ */ jsx(
             "select",
             {
@@ -29635,6 +29883,7 @@ const modalViewComponentRenderer = createComponentRenderer(
         fullScreen: extractValue.asOptionalBoolean((_a2 = node.props) == null ? void 0 : _a2.fullScreen),
         title: extractValue((_b = node.props) == null ? void 0 : _b.title),
         closeButtonVisible: extractValue.asOptionalBoolean(node.props.closeButtonVisible),
+        externalAnimation: extractValue.asOptionalBoolean(node.props.externalAnimation),
         children: renderChild2(node.children, { type: "Stack" })
       }
     );
@@ -29780,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 = "*") => {
@@ -30823,7 +31071,7 @@ function Queue({
       return;
     }
     let queueItem = queue[0];
-    (async () => {
+    void (async () => {
       await doSingle(queueItem);
     })();
   }, [doComplete, doSingle, prevQueue, queue]);
@@ -31323,26 +31571,26 @@ const ListNative = forwardRef(function DynamicHeightList({
   const tryToFetchPrevPage = useCallback(() => {
     if (virtualizerRef.current && virtualizerRef.current.findStartIndex() < 10 && pageInfo && pageInfo.hasPrevPage && !pageInfo.isFetchingPrevPage && !isFetchingPrevPage.current) {
       isFetchingPrevPage.current = true;
-      (async function doFetch() {
+      void async function doFetch() {
         try {
           await requestFetchPrevPage();
         } finally {
           isFetchingPrevPage.current = false;
         }
-      })();
+      }();
     }
   }, [pageInfo, requestFetchPrevPage]);
   const isFetchingNextPage = useRef(false);
   const tryToFetchNextPage = useCallback(() => {
     if (virtualizerRef.current && virtualizerRef.current.findEndIndex() + 10 > rows.length && pageInfo && pageInfo.hasNextPage && !pageInfo.isFetchingNextPage && !isFetchingNextPage.current) {
       isFetchingNextPage.current = true;
-      (async function doFetch() {
+      void async function doFetch() {
         try {
           await requestFetchNextPage();
         } finally {
           isFetchingNextPage.current = false;
         }
-      })();
+      }();
     }
   }, [rows.length, pageInfo, requestFetchNextPage]);
   const initiallyFetchedExtraPages = useRef(false);
@@ -32238,7 +32486,7 @@ class PollClient {
     this.polling = true;
     this.tries = 0;
     this.abortController = new AbortController();
-    this.poll(this.abortController.signal);
+    void this.poll(this.abortController.signal);
   }
   stopPoll() {
     this.polling = false;
@@ -33064,7 +33312,7 @@ const SelectMd = createMetadata({
     [`backgroundColor-${COMP$E}-badge--hover`]: "$color-primary-400",
     [`backgroundColor-${COMP$E}-badge--active`]: "$color-primary-500",
     [`textColor-item-${COMP$E}--disabled`]: "$color-surface-200",
-    [`textColor-${COMP$E}-badge`]: "$color-surface-50",
+    [`textColor-${COMP$E}-badge`]: "$const-color-surface-50",
     [`backgroundColor-item-${COMP$E}`]: "$backgroundColor-dropdown-item",
     [`backgroundColor-item-${COMP$E}--hover`]: "$backgroundColor-dropdown-item--hover",
     [`backgroundColor-item-${COMP$E}--active`]: "$backgroundColor-dropdown-item--active",
@@ -33677,7 +33925,7 @@ async function invalidateQueries(invalidates, appContext, state) {
     }
     arrayToInvalidate.forEach((invalidate) => {
       var _a3;
-      (_a3 = appContext.queryClient) == null ? void 0 : _a3.invalidateQueries(
+      void ((_a3 = appContext.queryClient) == null ? void 0 : _a3.invalidateQueries(
         new DataLoaderQueryKeyGenerator(
           extractParam(state, invalidate, appContext),
           void 0,
@@ -33685,7 +33933,7 @@ async function invalidateQueries(invalidates, appContext, state) {
           void 0,
           void 0
         ).asPredicate()
-      );
+      ));
     });
   } else {
     await ((_a2 = appContext.queryClient) == null ? void 0 : _a2.invalidateQueries());
@@ -34153,7 +34401,7 @@ async function uploadFile({ appContext, state, lookupAction, uid }, {
       throw e;
     }
   }
-  invalidateQueries(invalidates, appContext, state);
+  void invalidateQueries(invalidates, appContext, state);
   return result;
 }
 const uploadAction = createAction("upload", uploadFile);
@@ -34239,7 +34487,7 @@ function Loader({
     let intervalId;
     if (pollIntervalInSeconds) {
       intervalId = setInterval(() => {
-        refetch();
+        void refetch();
       }, pollIntervalInSeconds * 1e3);
     }
     return () => {
@@ -34273,8 +34521,8 @@ function Loader({
   }, [loaderLoaded2, uid]);
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
-      refetch: async (options2) => {
-        refetch(options2);
+      refetch: (options2) => {
+        void refetch(options2);
       },
       update: async (updater) => {
         var _a2, _b;
@@ -34292,7 +34540,7 @@ function Loader({
         }
         (_b = appContext.queryClient) == null ? void 0 : _b.setQueryData(queryId, newData);
       },
-      addItem: async (element, indexToInsert) => {
+      addItem: (element, indexToInsert) => {
         var _a2, _b;
         const oldData = (_a2 = appContext.queryClient) == null ? void 0 : _a2.getQueryData(queryId);
         const draft = createDraft(oldData);
@@ -34304,10 +34552,10 @@ function Loader({
         const newData = finishDraft(draft);
         (_b = appContext.queryClient) == null ? void 0 : _b.setQueryData(queryId, newData);
       },
-      getItems: async () => {
+      getItems: () => {
         return data;
       },
-      deleteItem: async (element) => {
+      deleteItem: (element) => {
         throw new Error("not implemented");
       }
     });
@@ -34468,7 +34716,9 @@ function MockLoader({
   const waitTime = extractParam(state, loader.props.waitTime, appContext);
   const responseObj = extractParam(state, loader.props.data, appContext);
   const doLoad = useCallback(async () => {
-    waitTime && await asyncWait(waitTime);
+    if (waitTime) {
+      await asyncWait(waitTime);
+    }
     return responseObj;
   }, [responseObj, waitTime]);
   return /* @__PURE__ */ jsx(
@@ -34616,7 +34866,7 @@ function PageableLoader({
     const queryKey2 = thizRef.current;
     return () => {
       var _a2, _b;
-      (_a2 = appContext.queryClient) == null ? void 0 : _a2.cancelQueries(queryKey2);
+      void ((_a2 = appContext.queryClient) == null ? void 0 : _a2.cancelQueries(queryKey2));
       (_b = appContext.queryClient) == null ? void 0 : _b.setQueryData(queryKey2, (old) => {
         if (!old) {
           return old;
@@ -34658,6 +34908,7 @@ function PageableLoader({
   }, [
     data,
     error2,
+    isRefetching,
     loaderError2,
     loaderLoaded2,
     onLoaded,
@@ -34671,7 +34922,7 @@ function PageableLoader({
     let intervalId;
     if (pollIntervalInSeconds) {
       intervalId = setInterval(() => {
-        refetch();
+        void refetch();
       }, pollIntervalInSeconds * 1e3);
     }
     return () => {
@@ -34690,8 +34941,8 @@ function PageableLoader({
     registerComponentApi({
       fetchPrevPage,
       fetchNextPage: stableFetchNextPage,
-      refetch: async (options2) => {
-        refetch(options2);
+      refetch: (options2) => {
+        void refetch(options2);
       },
       update: async (updater) => {
         var _a2, _b;
@@ -34715,7 +34966,7 @@ function PageableLoader({
         const newData = finishDraft(draft);
         (_b = appContext.queryClient) == null ? void 0 : _b.setQueryData(queryId, newData);
       },
-      addItem: async (element, indexToInsert) => {
+      addItem: (element, indexToInsert) => {
         var _a2, _b;
         const oldData = (_a2 = appContext.queryClient) == null ? void 0 : _a2.getQueryData(queryId);
         const draft = createDraft(oldData);
@@ -34730,7 +34981,7 @@ function PageableLoader({
       getItems: () => {
         return data;
       },
-      deleteItem: async (element) => {
+      deleteItem: (element) => {
         throw new Error("not implemented");
       }
     });
@@ -34874,8 +35125,14 @@ function DataLoader({
           }
           const response = await fetch(queryUrl, fetchOptions);
           if (!response.ok) {
-            console.error("[SQL DataLoader] Failed response:", response.status, response.statusText);
-            throw new Error(`Failed to execute SQL query: ${response.status} ${response.statusText}`);
+            console.error(
+              "[SQL DataLoader] Failed response:",
+              response.status,
+              response.statusText
+            );
+            throw new Error(
+              `Failed to execute SQL query: ${response.status} ${response.statusText}`
+            );
           }
           const jsonResult = await response.json();
           if (jsonResult && typeof jsonResult === "object") {
@@ -34903,15 +35160,7 @@ function DataLoader({
         });
       }
     },
-    [
-      api,
-      loader.props,
-      state,
-      url,
-      body,
-      rawBody,
-      appContext
-    ]
+    [api, loader.props, state, url, body, rawBody, appContext]
   );
   const queryId = useMemo(() => {
     return new DataLoaderQueryKeyGenerator(
@@ -34944,7 +35193,7 @@ function DataLoader({
         }
       }
     },
-    [loader.props.inProgressNotificationMessage, loaderInProgressChanged2, loader.props.dataType]
+    [loader.props.inProgressNotificationMessage, loaderInProgressChanged2]
   );
   const loaded = useCallback(
     (data, pageInfo) => {
@@ -34967,7 +35216,7 @@ function DataLoader({
         }
       }
     },
-    [loader.props.completedNotificationMessage, loaderLoaded2, loader.props.dataType]
+    [loader.props.completedNotificationMessage, loaderLoaded2]
   );
   const error2 = useCallback(
     async (error22) => {
@@ -35092,7 +35341,9 @@ const dataLoaderRenderer = createLoaderRenderer(
   }) => {
     var _a2, _b, _c;
     if (!((_a2 = loader.props) == null ? void 0 : _a2.url) || !loader.props.url.trim()) {
-      throw new Error("You must specify a non-empty (not whitespace-only) 'url' property for DataSource");
+      throw new Error(
+        "You must specify a non-empty (not whitespace-only) 'url' property for DataSource"
+      );
     }
     return /* @__PURE__ */ jsx(
       IndexAwareDataLoader,
@@ -35666,7 +35917,6 @@ const DateInput = forwardRef(function DateInputNative({
       return null;
     }
   }, [day2, month2, year2]);
-  useImperativeHandle(ref, () => dateInputRef.current);
   useEffect(() => {
     if (registerComponentApi) {
       registerComponentApi({
@@ -36993,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({
@@ -37740,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);
@@ -39940,26 +40188,31 @@ const AutoCompleteMd = createMetadata({
   },
   themeVars: parseScssVar(styles$L.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-menu-${COMP$j}`]: "$backgroundColor-primary",
+    [`backgroundColor-menu-${COMP$j}`]: "$color-surface-raised",
     [`boxShadow-menu-${COMP$j}`]: "$boxShadow-md",
     [`borderRadius-menu-${COMP$j}`]: "$borderRadius",
     [`borderWidth-menu-${COMP$j}`]: "1px",
     [`borderColor-menu-${COMP$j}`]: "$borderColor",
-    [`backgroundColor-item-${COMP$j}`]: "$backgroundColor-dropdown-item",
-    [`backgroundColor-item-${COMP$j}--hover`]: "$backgroundColor-dropdown-item--active",
-    [`backgroundColor-item-${COMP$j}--active`]: "$backgroundColor-dropdown-item--active",
-    [`minHeight-Input`]: "39px",
     [`backgroundColor-${COMP$j}-badge`]: "$color-primary-500",
     [`fontSize-${COMP$j}-badge`]: "$fontSize-sm",
+    [`paddingHorizontal-${COMP$j}-badge`]: "$space-2_5",
+    [`paddingVertical-${COMP$j}-badge`]: "$space-0_5",
     [`borderRadius-${COMP$j}-badge`]: "$borderRadius",
-    [`paddingHorizontal-${COMP$j}-badge`]: "$space-2",
-    [`paddingVertical-${COMP$j}-badge`]: "$space-1",
-    [`paddingHorizontal-${COMP$j}`]: "$space-1",
+    [`paddingHorizontal-item-${COMP$j}`]: "$space-2",
+    [`paddingVertical-item-${COMP$j}`]: "$space-2",
+    [`paddingHorizontal-${COMP$j}`]: "$space-2",
     [`paddingVertical-${COMP$j}`]: "$space-2",
+    [`opacity-text-item-${COMP$j}--disabled`]: "0.5",
+    [`opacity-${COMP$j}--disabled`]: "0.5",
     [`backgroundColor-${COMP$j}-badge--hover`]: "$color-primary-400",
     [`backgroundColor-${COMP$j}-badge--active`]: "$color-primary-500",
     [`textColor-item-${COMP$j}--disabled`]: "$color-surface-200",
-    [`textColor-${COMP$j}-badge`]: "$const-color-surface-50"
+    [`textColor-${COMP$j}-badge`]: "$const-color-surface-50",
+    [`backgroundColor-item-${COMP$j}`]: "$backgroundColor-dropdown-item",
+    [`backgroundColor-item-${COMP$j}--hover`]: "$backgroundColor-dropdown-item--hover",
+    [`backgroundColor-item-${COMP$j}--active`]: "$backgroundColor-dropdown-item--active",
+    // Default borderColor-Input--disabled is too light so the disabled component is barely visible
+    [`borderColor-${COMP$j}--disabled`]: "initial"
   }
 });
 const autoCompleteComponentRenderer = createComponentRenderer(
@@ -42406,7 +42659,7 @@ function InspectButton$1({
       htmlElement.removeEventListener("mouseenter", mouseenter);
       htmlElement.removeEventListener("mouseleave", mouseleave);
     };
-  }, [inspectId, node, inspectMode, setShowCode]);
+  }, [inspectId, node, inspectMode, setShowCode, setInspectedNode]);
   return /* @__PURE__ */ jsx(Fragment, { children: inspectMode ? null : visible && !!root2 && createPortal(
     /* @__PURE__ */ jsx(
       Button,
@@ -45786,7 +46039,7 @@ const Dialog = ({
   ] });
 };
 const ConfirmationModalContext = React__default.createContext({
-  confirm: async (title2, message, actionLabel) => false
+  confirm: (title2, message, actionLabel) => Promise.resolve(false)
 });
 const useConfirm = () => useContext(ConfirmationModalContext);
 const ConfirmationModalContextProvider = ({ children }) => {
@@ -45808,7 +46061,7 @@ const ConfirmationModalContextProvider = ({ children }) => {
     }
   }, [showConfirmationModal]);
   const handleShow = useCallback(
-    async (title22, message2, actionLabel) => {
+    (title22, message2, actionLabel) => {
       if (typeof title22 === "string") {
         setTitle(title22);
         setButtons([
@@ -46630,7 +46883,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.10.19";
+const version = "0.10.21";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -47137,7 +47390,7 @@ async function evalCalculatedMemberAccessAsync(evaluator, thisStack, expr, evalC
   await completeExprValue(expr.member, thread);
   return evalCalculatedMemberAccessCore(thisStack, expr, evalContext, thread);
 }
-async function evalSequenceAsync(evaluator, thisStack, expr, evalContext, thread) {
+function evalSequenceAsync(evaluator, thisStack, expr, evalContext, thread) {
   if (!expr.exprs || expr.exprs.length === 0) {
     throw new Error(`Missing expression sequence`);
   }
@@ -47249,7 +47502,7 @@ async function evalAssignmentAsync(evaluator, thisStack, expr, evalContext, thre
   const rootScope = getRootIdScope(leftValue, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "assignment");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "assignment");
   }
   await evaluator(thisStack, leftValue, evalContext, thread);
   thisStack.pop();
@@ -47259,7 +47512,7 @@ async function evalAssignmentAsync(evaluator, thisStack, expr, evalContext, thre
   await completeExprValue(expr.expr, thread);
   const value = evalAssignmentCore(thisStack, expr, evalContext, thread);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "assignment");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "assignment");
   }
   return value;
 }
@@ -47267,14 +47520,14 @@ async function evalPreOrPostAsync(evaluator, thisStack, expr, evalContext, threa
   const rootScope = getRootIdScope(expr.expr, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "pre-post");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "pre-post");
   }
   await evaluator(thisStack, expr.expr, evalContext, thread);
   thisStack.pop();
   await completeExprValue(expr.expr, thread);
   const value = evalPreOrPostCore(thisStack, expr, evalContext, thread);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "pre-post");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "pre-post");
   }
   return value;
 }
@@ -47322,8 +47575,8 @@ async function evalFunctionInvocationAsync(evaluator, thisStack, expr, evalConte
         functionArgs.push(...funcArg);
       } else {
         if (arg.type === T_ARROW_EXPRESSION) {
-          const funcArg = await createArrowFunctionAsync(evaluator, arg);
-          const wrappedFunc = async (...args) => {
+          const funcArg = createArrowFunctionAsync(evaluator, arg);
+          const wrappedFunc = (...args) => {
             return funcArg(arg.args, evalContext, thread, ...args);
           };
           functionArgs.push(wrappedFunc);
@@ -47331,7 +47584,7 @@ async function evalFunctionInvocationAsync(evaluator, thisStack, expr, evalConte
           await evaluator([], arg, evalContext, thread);
           const funcArg = await completeExprValue(arg, thread);
           if (funcArg == null ? void 0 : funcArg._ARROW_EXPR_) {
-            const wrappedFuncArg = await createArrowFunctionAsync(evaluator, funcArg);
+            const wrappedFuncArg = createArrowFunctionAsync(evaluator, funcArg);
             const wrappedFunc = (...args) => wrappedFuncArg(funcArg.args, evalContext, thread, ...args);
             functionArgs.push(wrappedFunc);
           } else {
@@ -47360,18 +47613,18 @@ async function evalFunctionInvocationAsync(evaluator, thisStack, expr, evalConte
   const rootScope = getRootIdScope(expr.obj, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "function-call");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "function-call");
   }
   const value = ((_b = evalContext.options) == null ? void 0 : _b.defaultToOptionalMemberAccess) ? functionObj == null ? void 0 : functionObj.call(currentContext, ...functionArgs) : functionObj.call(currentContext, ...functionArgs);
   let returnValue = await completePromise(value);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "function-call");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "function-call");
   }
   setExprValue(expr, { value: returnValue }, thread);
   thisStack.push(returnValue);
   return returnValue;
 }
-async function createArrowFunctionAsync(evaluator, expr) {
+function createArrowFunctionAsync(evaluator, expr) {
   return async (...args) => {
     const runTimeEvalContext = args[1];
     const runtimeThread = args[2];
@@ -47497,7 +47750,7 @@ async function createArrowFunctionAsync(evaluator, expr) {
     return returnValue;
   };
 }
-async function completePromise(input2) {
+function completePromise(input2) {
   const visited = /* @__PURE__ */ new Map();
   return completePromiseInternal(input2);
   async function completePromiseInternal(input22) {
@@ -50112,7 +50365,7 @@ const Animation$1 = forwardRef(function Animation2({
   const [reset, setReset] = useState(false);
   const [count, setCount] = useState(0);
   const times = 1;
-  const animationId = useId();
+  useId();
   const animationSettings = useMemo(
     () => ({
       from: _animation.from,
@@ -50155,9 +50408,9 @@ const Animation$1 = forwardRef(function Animation2({
       onStart,
       onStop,
       reset,
+      once,
       reverse2,
-      toggle,
-      animationId
+      toggle
     ]
   );
   const [springs, api] = useSpring(
@@ -50171,7 +50424,7 @@ const Animation$1 = forwardRef(function Animation2({
   });
   const composedRef = ref ? composeRefs(ref, forwardedRef) : forwardedRef;
   const startAnimation = useCallback(() => {
-    api.start(_animation);
+    void api.start(_animation);
     return () => {
       api.stop();
     };
@@ -50190,7 +50443,7 @@ const Animation$1 = forwardRef(function Animation2({
       children,
       (child, index) => animateWhenInView ? /* @__PURE__ */ jsx(AnimatedComponent, { ...rest, style: animationStyles, ref: composedRef, children: child }, index) : /* @__PURE__ */ jsx(AnimatedComponent, { ...rest, style: springs, ref: forwardedRef, children: child }, index)
     );
-  }, [animateWhenInView, animationStyles, children, springs, rest]);
+  }, [animateWhenInView, animationStyles, children, springs, rest, composedRef, forwardedRef]);
   return content2;
 });
 const tooltipBehavior = {
@@ -50221,12 +50474,11 @@ const animationBehavior = {
     var _a2, _b;
     const { extractValue } = context;
     const animation = extractValue((_a2 = context.node.props) == null ? void 0 : _a2.animation, true);
-    const animationOptions = extractValue(
-      (_b = context.node.props) == null ? void 0 : _b.animationOptions,
-      true
-    );
+    const animationOptions = extractValue((_b = context.node.props) == null ? void 0 : _b.animationOptions, true);
     const parsedOptions = parseAnimationOptions(animationOptions);
-    return /* @__PURE__ */ jsx(Animation$1, { animation: parseAnimation(animation), ...parsedOptions, children: node });
+    return /* @__PURE__ */ jsx(Animation$1, { animation: parseAnimation(animation), ...parsedOptions, children: context.node.type === "ModalDialog" ? cloneElement(node, {
+      externalAnimation: true
+    }) : node });
   }
 };
 const labelBehavior = {
@@ -51220,11 +51472,6 @@ function AppContent({
     root2
   ]);
   const [appState, setAppState] = useState(EMPTY_OBJECT);
-  const registerAppState = useCallback((bucket, initialValue) => {
-    setAppState((prev) => {
-      return { ...prev, [bucket]: initialValue };
-    });
-  }, []);
   const update = useCallback((bucket, patch) => {
     setAppState((prev) => {
       return {
@@ -51238,11 +51485,10 @@ function AppContent({
   }, []);
   const appStateContextValue = useMemo(() => {
     return {
-      registerAppState,
       appState,
       update
     };
-  }, [appState, registerAppState, update]);
+  }, [appState, update]);
   return /* @__PURE__ */ jsx(AppContext.Provider, { value: appContextValue, children: /* @__PURE__ */ jsx(AppStateContext.Provider, { value: appStateContextValue, children: /* @__PURE__ */ jsx(StandaloneComponent, { node: rootContainer, children }) }) });
 }
 function signError(error2) {
@@ -51382,8 +51628,8 @@ function ApiInterceptorProvider({
     if (!interceptor) {
       return;
     }
-    (async () => {
-      const { initMock } = await import("./initMock-C-cnv--V.mjs");
+    void (async () => {
+      const { initMock } = await import("./initMock-Dw9wrVkQ.mjs");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -51396,11 +51642,11 @@ function ApiInterceptorProvider({
     if (!hasParentInterceptorContext) {
       if (interceptor || forceInitialize) {
         let interceptorWorker2;
-        (async () => {
+        void (async () => {
           if (define_process_env_default$2.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
-              useWorker ? import("./apiInterceptorWorker-BmKP8bnq.mjs") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-C-cnv--V.mjs")
+              useWorker ? import("./apiInterceptorWorker-Dql7QGw2.mjs") : Promise.resolve({ createApiInterceptorWorker: () => null }),
+              import("./initMock-Dw9wrVkQ.mjs")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -51434,10 +51680,10 @@ function ApiInterceptorProvider({
         return;
       }
       if (parentInterceptorWorker) {
-        (async () => {
+        void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
-            import("./apiInterceptorWorker-BmKP8bnq.mjs"),
-            import("./initMock-C-cnv--V.mjs")
+            import("./apiInterceptorWorker-Dql7QGw2.mjs"),
+            import("./initMock-Dw9wrVkQ.mjs")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -53932,13 +54178,7 @@ function xmlUiMarkupToComponent(source, fileId = 0) {
   const { parse: parse2, getText } = createXmlUiParser(source);
   const { node, errors } = parse2();
   if (errors.length > 0) {
-    const newlinePositions = [];
-    for (let i = 0; i < source.length; ++i) {
-      if (source[i] === "\n") {
-        newlinePositions.push(i);
-      }
-    }
-    const errorsForDisplay = addDisplayFieldsToErrors(errors, source, newlinePositions);
+    const errorsForDisplay = addDisplayFieldsToErrors(errors, source);
     const erroneousCompoundComponentName = getCompoundCompName(node, getText);
     return { component: null, errors: errorsForDisplay, erroneousCompoundComponentName };
   }
@@ -54234,21 +54474,6 @@ function errReportComponent(errors, fileName, compoundCompName) {
   comp.component = createErrorReportComponent(errors, fileName);
   return comp;
 }
-function offsetToPosition(offset, newlinePositions) {
-  let left2 = 0;
-  let right2 = newlinePositions.length;
-  while (left2 < right2) {
-    const mid = Math.floor((left2 + right2) / 2);
-    if (newlinePositions[mid] < offset) {
-      left2 = mid + 1;
-    } else {
-      right2 = mid;
-    }
-  }
-  let line2 = left2 + 1;
-  let col = left2 === 0 ? offset + 1 : offset - newlinePositions[left2 - 1];
-  return { line: line2, col };
-}
 function getCompoundCompName(node, getText) {
   var _a2, _b, _c, _d, _e, _f;
   const rootTag = (_a2 = node == null ? void 0 : node.children) == null ? void 0 : _a2[0];
@@ -54270,10 +54495,11 @@ function getCompoundCompName(node, getText) {
   }
   return void 0;
 }
-function addDisplayFieldsToErrors(errors, source, newlinePositions) {
+function addDisplayFieldsToErrors(errors, source) {
+  const { offsetToPosForDisplay } = createDocumentCursor(source);
   return errors.map((err) => {
-    const { line: errPosLine, col: errPosCol } = offsetToPosition(err.pos, newlinePositions);
-    const { line: contextStartLine } = offsetToPosition(err.contextPos, newlinePositions);
+    const { line: errPosLine, character: errPosCol } = offsetToPosForDisplay(err.pos);
+    const { line: contextStartLine } = offsetToPosForDisplay(err.contextPos);
     return {
       ...err,
       errPosLine,
@@ -54283,6 +54509,38 @@ function addDisplayFieldsToErrors(errors, source, newlinePositions) {
     };
   });
 }
+function createDocumentCursor(text2) {
+  const newlinePositions = [];
+  for (let i = 0; i < text2.length; ++i) {
+    if (text2[i] === "\n") {
+      newlinePositions.push(i);
+    }
+  }
+  return {
+    offsetToPos,
+    offsetToPosForDisplay
+  };
+  function offsetToPos(offset) {
+    let left2 = 0;
+    let right2 = newlinePositions.length;
+    while (left2 < right2) {
+      const mid = Math.floor((left2 + right2) / 2);
+      if (newlinePositions[mid] < offset) {
+        left2 = mid + 1;
+      } else {
+        right2 = mid;
+      }
+    }
+    let col = left2 === 0 ? offset : offset - newlinePositions[left2 - 1] - 1;
+    return { line: left2, character: col };
+  }
+  function offsetToPosForDisplay(offset) {
+    let pos = offsetToPos(offset);
+    pos.line += 1;
+    pos.character += 1;
+    return pos;
+  }
+}
 const MotionContent = motion.create(SheetPrimitive.Content);
 const overlayVariants = {
   visible: { opacity: 1 },
@@ -54771,7 +55029,7 @@ function NestedApp({
         }
         return null;
       });
-      Promise.all(sheetPromises).then((sheets) => {
+      void Promise.all(sheetPromises).then((sheets) => {
         const validSheets = sheets.filter(Boolean);
         shadowRef.current.adoptedStyleSheets = validSheets;
       });
@@ -54890,7 +55148,10 @@ function NestedApp({
     )
   ] });
 }
-function NestedAppRoot({ children, themeStylesToReset }) {
+function NestedAppRoot({
+  children,
+  themeStylesToReset
+}) {
   const themeVarReset = useMemo(() => {
     const vars2 = {};
     Object.keys(themeStylesToReset).forEach((key) => {
@@ -55029,7 +55290,7 @@ function AppWithCodeViewNative({
                   {
                     className: styles$e.headerButton,
                     onClick: () => {
-                      openPlayground();
+                      void openPlayground();
                     },
                     children: /* @__PURE__ */ jsx(RxOpenInNewWindow, {})
                   }
@@ -56613,21 +56874,21 @@ const FormItem = memo(function FormItem2({
       return safeBindTo;
     }
   }, [bindTo, defaultId, itemIndex, parentFormItemId]);
-  const labelWidthValue = useFormContextPart((value2) => labelWidth || value2.itemLabelWidth);
+  const labelWidthValue = useFormContextPart((value2) => labelWidth || (value2 == null ? void 0 : value2.itemLabelWidth));
   const labelBreakValue = useFormContextPart(
-    (value2) => labelBreak2 !== void 0 ? labelBreak2 : value2.itemLabelBreak
+    (value2) => labelBreak2 !== void 0 ? labelBreak2 : value2 == null ? void 0 : value2.itemLabelBreak
   );
   const labelPositionValue = useFormContextPart(
-    (value2) => labelPosition || value2.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]
+    (value2) => labelPosition || (value2 == null ? void 0 : value2.itemLabelPosition) || DEFAULT_LABEL_POSITIONS[type]
   );
   const initialValueFromSubject = useFormContextPart(
-    (value2) => getByPath(value2.originalSubject, formItemId)
+    (value2) => getByPath(value2 == null ? void 0 : value2.originalSubject, formItemId)
   );
   const initialValue = initialValueFromSubject === void 0 ? initialValueFromProps : initialValueFromSubject;
-  const value = useFormContextPart((value2) => getByPath(value2.subject, formItemId));
-  const validationResult = useFormContextPart((value2) => value2.validationResults[formItemId]);
-  const dispatch = useFormContextPart((value2) => value2.dispatch);
-  const formEnabled = useFormContextPart((value2) => value2.enabled);
+  const value = useFormContextPart((value2) => getByPath(value2 == null ? void 0 : value2.subject, formItemId));
+  const validationResult = useFormContextPart((value2) => value2 == null ? void 0 : value2.validationResults[formItemId]);
+  const dispatch = useFormContextPart((value2) => value2 == null ? void 0 : value2.dispatch);
+  const formEnabled = useFormContextPart((value2) => value2 == null ? void 0 : value2.enabled);
   const isEnabled2 = enabled2 && formEnabled;
   useEffect(() => {
     if (initialValue !== void 0) {
@@ -56897,6 +57158,10 @@ const FormItem = memo(function FormItem2({
     }
   }
   const [animateContainerRef] = useAutoAnimate({ duration: 100 });
+  const isInsideForm = useIsInsideForm();
+  if (!isInsideForm) {
+    throw new Error("FormItem must be used inside a Form");
+  }
   return /* @__PURE__ */ jsx(
     ItemWithLabel,
     {
@@ -56965,7 +57230,7 @@ const filteredValidationSeverityValues = validationSeverityValues.filter(
 const FormItemMd = createMetadata({
   status: "stable",
   allowArbitraryProps: true,
-  description: "`FormItem` wraps individual input controls within a `Form`, providing data binding, validation, labeling, and layout functionality. It connects form controls to the parent form's data model and handles validation feedback automatically.",
+  description: "`FormItem` wraps individual input controls within a `Form`, providing data binding, validation, labeling, and layout functionality. It connects form controls to the parent form's data model and handles validation feedback automatically.\n\n> **Note:** `FormItem` must be used inside a `Form` component.",
   props: {
     bindTo: {
       description: "This property binds a particular input field to one of the attributes of the `Form` data. It names the property of the form's `data` data to get the input's initial value.When the field is saved, its value will be stored in the `data` property with this name. If the property is not set, the input will be bound to an internal data field but not submitted."