xmlui 0.9.11 → 0.9.12

package/dist/xmlui-metadata.mjs

@@ -1,8 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useRef, useInsertionEffect, useCallback, useContext, useEffect, useLayoutEffect, useState, forwardRef, useMemo, useId, createContext, useDeferredValue, useImperativeHandle, memo, Fragment as Fragment$1, cloneElement } from "react";
+import React__default, { useRef, useInsertionEffect, useCallback, useContext, useEffect, useLayoutEffect, useState, forwardRef, useMemo, useId, createContext, useDeferredValue, useImperativeHandle, Children, isValidElement, createElement, cloneElement, Fragment as Fragment$1, memo } from "react";
 import classnames from "classnames";
-import { throttle, omitBy, isUndefined, isEmpty, noop as noop$2, isArray, isNumber, isNil, isEqual, union, uniq, orderBy } from "lodash-es";
+import * as VisuallyHidden$1 from "@radix-ui/react-visually-hidden";
+import { VisuallyHidden as VisuallyHidden$2 } from "@radix-ui/react-visually-hidden";
+import { throttle, omitBy, isUndefined, isEmpty, noop as noop$2, isArray, isNumber, isNil, isNaN as isNaN$1, isEqual, union, uniq, orderBy } from "lodash-es";
 import { NavLink as NavLink$1, Link } from "@remix-run/react";
 import { DayPicker } from "react-day-picker";
 import { parse, format, parseISO, isValid } from "date-fns";
@@ -13,13 +15,13 @@ import produce from "immer";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { createContext as createContext$1, useContextSelector } from "use-context-selector";
 import * as dropzone from "react-dropzone";
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { Portal, Root, Trigger, Value, Icon as Icon$1, Content, ScrollUpButton, Viewport, ScrollDownButton, Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { Popover, PopoverTrigger, PopoverContent, Portal as Portal$1 } from "@radix-ui/react-popover";
 import { Command, CommandInput, CommandList, CommandEmpty, CommandItem, CommandGroup } from "cmdk";
 import * as InnerRadioGroup from "@radix-ui/react-radio-group";
 import TextareaAutosize from "react-textarea-autosize";
 import { Root as Root$1, Track, Range, Thumb } from "@radix-ui/react-slider";
+import { NumberFormatter, NumberParser } from "@internationalized/number";
 import { useReactTable, getPaginationRowModel, getCoreRowModel, flexRender } from "@tanstack/react-table";
 import { observeElementOffset, useVirtualizer } from "@tanstack/react-virtual";
 import * as RAccordion from "@radix-ui/react-accordion";
@@ -66,44 +68,8 @@ const styles$T = {
   ghostSecondary,
   ghostAttention
 };
-function createMetadata({
-  description,
-  shortDescription,
-  specializedFrom,
-  status,
-  props,
-  events,
-  contextVars,
-  apis,
-  nonVisual,
-  opaque,
-  themeVars: themeVars2,
-  themeVarDescriptions,
-  defaultThemeVars,
-  toneSpecificThemeVars,
-  allowArbitraryProps,
-  docFolder,
-  isHtmlTag
-}) {
-  return {
-    description,
-    shortDescription,
-    specializedFrom,
-    status,
-    props,
-    events,
-    contextVars,
-    apis,
-    nonVisual,
-    opaque,
-    themeVars: themeVars2,
-    defaultThemeVars,
-    themeVarDescriptions,
-    toneSpecificThemeVars,
-    allowArbitraryProps,
-    docFolder,
-    isHtmlTag
-  };
+function createMetadata(metadata) {
+  return metadata;
 }
 function d(description, availableValues, valueType, defaultValue, isValid2, isRequired) {
   return { description, isRequired, availableValues, valueType, defaultValue, isValid: isValid2 };
@@ -1049,9 +1015,7 @@ function composeRefs(...refs) {
     }
   };
 }
-function useComposedRefs(...refs) {
-  return React.useCallback(composeRefs(...refs), refs);
-}
+const VisuallyHidden = ({ children, ...props }) => /* @__PURE__ */ jsx(VisuallyHidden$2, { ...props, children });
 const defaultProps$g = {
   type: "button",
   iconPosition: "start",
@@ -1082,6 +1046,7 @@ const Button = React__default.forwardRef(function Button2({
   gap,
   className,
   autoFocus = defaultProps$g.autoFocus,
+  contextualLabel,
   ...rest
 }, ref) {
   const innerRef = useRef(null);
@@ -1129,13 +1094,18 @@ const Button = React__default.forwardRef(function Button2({
       onFocus,
       onBlur,
       children: [
-        iconToLeft && icon,
+        icon && iconToLeft && /* @__PURE__ */ jsx(Fragment, { children: icon }),
         children,
-        !iconToLeft && icon
+        icon && !children && /* @__PURE__ */ jsx(IconLabel, { icon, accessibleName: contextualLabel }),
+        icon && !iconToLeft && /* @__PURE__ */ jsx(Fragment, { children: icon })
       ]
     }
   );
 });
+const IconLabel = ({ icon, accessibleName = "" }) => {
+  const iconProps = icon.props;
+  return /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { children: accessibleName || (iconProps == null ? void 0 : iconProps.name) || (iconProps == null ? void 0 : iconProps.alt) }) });
+};
 const COMP$16 = "Button";
 const ButtonMd = createMetadata({
   description: "Button is an interactive element that triggers an action when clicked.",
@@ -1199,6 +1169,10 @@ const ButtonMd = createMetadata({
       availableValues: alignmentOptionMd,
       type: "string",
       defaultValue: defaultProps$g.contentPosition
+    },
+    contextualLabel: {
+      description: `This optional value is used to provide an accessible name for the ${COMP$16} in the context of its usage.`,
+      type: "string"
     }
   },
   events: {
@@ -1870,7 +1844,7 @@ const TextBox = forwardRef(function TextBox2({
   const handleOnBlur = useCallback(() => {
     onBlur == null ? void 0 : onBlur();
   }, [onBlur]);
-  const focus2 = useCallback(() => {
+  const focus = useCallback(() => {
     var _a;
     (_a = inputRef.current) == null ? void 0 : _a.focus();
   }, []);
@@ -1879,10 +1853,10 @@ const TextBox = forwardRef(function TextBox2({
   });
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
-      focus: focus2,
+      focus,
       setValue
     });
-  }, [focus2, registerComponentApi, setValue]);
+  }, [focus, registerComponentApi, setValue]);
   return /* @__PURE__ */ jsx(
     ItemWithLabel,
     {
@@ -1906,7 +1880,7 @@ const TextBox = forwardRef(function TextBox2({
             [styles$Q.valid]: validationStatus === "valid"
           }),
           tabIndex: -1,
-          onFocus: focus2,
+          onFocus: focus,
           children: [
             /* @__PURE__ */ jsx(Adornment, { text: startText, iconName: startIcon, className: styles$Q.adornment }),
             /* @__PURE__ */ jsx(
@@ -4044,7 +4018,7 @@ const Toggle = forwardRef(function Toggle2({
       innerRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
-  const focus2 = useCallback(() => {
+  const focus = useCallback(() => {
     var _a;
     (_a = innerRef.current) == null ? void 0 : _a.focus();
   }, []);
@@ -4053,10 +4027,10 @@ const Toggle = forwardRef(function Toggle2({
   });
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
-      focus: focus2,
+      focus,
       setValue
     });
-  }, [focus2, registerComponentApi, setValue]);
+  }, [focus, registerComponentApi, setValue]);
   const input2 = useMemo(
     () => /* @__PURE__ */ jsx(
       "input",
@@ -4144,6 +4118,7 @@ const CheckboxMd = createMetadata({
       description: "This property is used to define a custom checkbox input template"
     }
   },
+  childrenAsTemplate: "inputTemplate",
   events: {
     gotFocus: dGotFocus(COMP$X),
     lostFocus: dLostFocus(COMP$X),
@@ -4402,7 +4377,7 @@ const DatePicker = forwardRef(function DatePicker2({
   const handleOnMenuBlur = () => {
     setIsMenuFocused(false);
   };
-  const focus2 = useCallback(() => {
+  const focus = useCallback(() => {
     var _a;
     (_a = referenceElement == null ? void 0 : referenceElement.current) == null ? void 0 : _a.focus();
   }, [referenceElement == null ? void 0 : referenceElement.current]);
@@ -4412,10 +4387,10 @@ const DatePicker = forwardRef(function DatePicker2({
   });
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
-      focus: focus2,
+      focus,
       setValue
     });
-  }, [focus2, registerComponentApi, setValue]);
+  }, [focus, registerComponentApi, setValue]);
   useEffect(() => {
     if (!isButtonFocused && !isMenuFocused) {
       onBlur == null ? void 0 : onBlur();
@@ -4962,7 +4937,7 @@ const FileInput = ({
   const handleOnBlur = useCallback(() => {
     onBlur == null ? void 0 : onBlur();
   }, [onBlur]);
-  const focus2 = useCallback(() => {
+  const focus = useCallback(() => {
     var _a;
     (_a = buttonRef.current) == null ? void 0 : _a.focus();
   }, []);
@@ -4991,10 +4966,10 @@ const FileInput = ({
   });
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
-      focus: focus2,
+      focus,
       open: doOpen
     });
-  }, [focus2, doOpen, registerComponentApi]);
+  }, [focus, doOpen, registerComponentApi]);
   return /* @__PURE__ */ jsx(
     ItemWithLabel,
     {
@@ -5029,7 +5004,7 @@ const FileInput = ({
                   type: "button"
                 }),
                 children: [
-                  /* @__PURE__ */ jsx(VisuallyHidden.Root, { children: /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(VisuallyHidden$1.Root, { children: /* @__PURE__ */ jsx(
                     "input",
                     {
                       ...getInputProps({
@@ -5669,7 +5644,7 @@ const FooterMd = createMetadata({
     [`fontSize-${COMP$Q}`]: "$fontSize-small",
     [`textColor-${COMP$Q}`]: "$textColor-secondary",
     [`maxWidth-content-${COMP$Q}`]: "$maxWidth-content",
-    [`border-${COMP$Q}`]: `1px solid $borderColor`,
+    [`borderTop-${COMP$Q}`]: `1px solid $borderColor`,
     [`padding-${COMP$Q}`]: "$space-2 $space-4",
     light: {
       // --- No light-specific theme vars
@@ -11574,8 +11549,8 @@ const NumberBox = forwardRef(function NumberBox2({
     if (newValue === void 0) return;
     updateValue(newValue, newValue.toString());
   }, [valueStrRep, _step, min, max, integersOnly, updateValue, readOnly2]);
-  useLongPress(upButton.current, handleIncStep);
-  useLongPress(downButton.current, handleDecStep);
+  useLongPress$1(upButton.current, handleIncStep);
+  useLongPress$1(downButton.current, handleDecStep);
   const handleOnBeforeInput = (event) => {
     var _a;
     let shouldPreventDefault = false;
@@ -11705,7 +11680,7 @@ const NumberBox = forwardRef(function NumberBox2({
     setValueStrRep(mapToRepresentation(value));
     onBlur == null ? void 0 : onBlur();
   }, [value, onBlur]);
-  const focus2 = useCallback(() => {
+  const focus = useCallback(() => {
     var _a;
     (_a = inputRef.current) == null ? void 0 : _a.focus();
   }, []);
@@ -11714,10 +11689,10 @@ const NumberBox = forwardRef(function NumberBox2({
   });
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
-      focus: focus2,
+      focus,
       setValue
     });
-  }, [focus2, registerComponentApi, setValue]);
+  }, [focus, registerComponentApi, setValue]);
   return /* @__PURE__ */ jsx(
     ItemWithLabel,
     {
@@ -11816,7 +11791,7 @@ function applyStep(valueStrRep, step, min, max, integersOnly) {
   }
   return clamp(currentValue + step, min, max);
 }
-function useLongPress(elementRef, action, delay = 500) {
+function useLongPress$1(elementRef, action, delay = 500) {
   const timeoutId = useRef(0);
   const intervalId = useRef(0);
   const savedAction = useRef(action);
@@ -11852,7 +11827,92 @@ function useLongPress(elementRef, action, delay = 500) {
     };
   }, [elementRef, action, delay]);
 }
-var NODES = [
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function $6ed0406888f73fc4$var$setRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref !== null && ref !== void 0) ref.current = value;
+}
+function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {
+  return (node) => refs.forEach(
+    (ref) => $6ed0406888f73fc4$var$setRef(ref, node)
+  );
+}
+function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {
+  return useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
+}
+const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  const childrenArray = Children.toArray(children);
+  const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);
+  if (slottable) {
+    const newElement = slottable.props.children;
+    const newChildren = childrenArray.map((child) => {
+      if (child === slottable) {
+        if (Children.count(newElement) > 1) return Children.only(null);
+        return /* @__PURE__ */ isValidElement(newElement) ? newElement.props.children : null;
+      } else return child;
+    });
+    return /* @__PURE__ */ createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+      ref: forwardedRef
+    }), /* @__PURE__ */ isValidElement(newElement) ? /* @__PURE__ */ cloneElement(newElement, void 0, newChildren) : null);
+  }
+  return /* @__PURE__ */ createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+    ref: forwardedRef
+  }), children);
+});
+$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = "Slot";
+const $5e63c961fc1ce211$var$SlotClone = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  if (/* @__PURE__ */ isValidElement(children)) return /* @__PURE__ */ cloneElement(children, {
+    ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
+    ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) : children.ref
+  });
+  return Children.count(children) > 1 ? Children.only(null) : null;
+});
+$5e63c961fc1ce211$var$SlotClone.displayName = "SlotClone";
+const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children }) => {
+  return /* @__PURE__ */ createElement(Fragment$1, null, children);
+};
+function $5e63c961fc1ce211$var$isSlottable(child) {
+  return /* @__PURE__ */ isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
+}
+function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
+  const overrideProps = {
+    ...childProps
+  };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) overrideProps[propName] = (...args) => {
+        childPropValue(...args);
+        slotPropValue(...args);
+      };
+      else if (slotPropValue) overrideProps[propName] = slotPropValue;
+    } else if (propName === "style") overrideProps[propName] = {
+      ...slotPropValue,
+      ...childPropValue
+    };
+    else if (propName === "className") overrideProps[propName] = [
+      slotPropValue,
+      childPropValue
+    ].filter(Boolean).join(" ");
+  }
+  return {
+    ...slotProps,
+    ...overrideProps
+  };
+}
+const $8927f6f2acc4f386$var$NODES = [
   "a",
   "button",
   "div",
@@ -11870,47 +11930,53 @@ var NODES = [
   "svg",
   "ul"
 ];
-var Primitive = NODES.reduce((primitive, node) => {
-  const Slot2 = /* @__PURE__ */ createSlot(`Primitive.${node}`);
-  const Node = React.forwardRef((props, forwardedRef) => {
+const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node) => {
+  const Node = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? Slot2 : node;
-    if (typeof window !== "undefined") {
+    const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
+    useEffect(() => {
       window[Symbol.for("radix-ui")] = true;
-    }
-    return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
+    }, []);
+    return /* @__PURE__ */ createElement(Comp, _extends({}, primitiveProps, {
+      ref: forwardedRef
+    }));
   });
   Node.displayName = `Primitive.${node}`;
-  return { ...primitive, [node]: Node };
+  return {
+    ...primitive,
+    [node]: Node
+  };
 }, {});
-function useCallbackRef(callback) {
-  const callbackRef = React.useRef(callback);
-  React.useEffect(() => {
+function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
     callbackRef.current = callback;
   });
-  return React.useMemo(() => (...args) => {
-    var _a;
-    return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
-  }, []);
+  return useMemo(
+    () => (...args) => {
+      var _callbackRef$current;
+      return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
+    },
+    []
+  );
 }
-var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
-var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
-var EVENT_OPTIONS = { bubbles: false, cancelable: true };
-var FOCUS_SCOPE_NAME = "FocusScope";
-var FocusScope = React.forwardRef((props, forwardedRef) => {
-  const {
-    loop = false,
-    trapped = false,
-    onMountAutoFocus: onMountAutoFocusProp,
-    onUnmountAutoFocus: onUnmountAutoFocusProp,
-    ...scopeProps
-  } = props;
-  const [container2, setContainer] = React.useState(null);
-  const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
-  const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
-  const lastFocusedElementRef = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));
-  const focusScope = React.useRef({
+const $d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
+const $d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
+const $d3863c46a17e8a28$var$EVENT_OPTIONS = {
+  bubbles: false,
+  cancelable: true
+};
+const $d3863c46a17e8a28$export$20e40289641fbbb6 = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
+  const { loop = false, trapped = false, onMountAutoFocus: onMountAutoFocusProp, onUnmountAutoFocus: onUnmountAutoFocusProp, ...scopeProps } = props;
+  const [container1, setContainer] = useState(null);
+  const onMountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onMountAutoFocusProp);
+  const onUnmountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onUnmountAutoFocusProp);
+  const lastFocusedElementRef = useRef(null);
+  const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(
+    forwardedRef,
+    (node) => setContainer(node)
+  );
+  const focusScope = useRef({
     paused: false,
     pause() {
       this.paused = true;
@@ -11919,114 +11985,137 @@ var FocusScope = React.forwardRef((props, forwardedRef) => {
       this.paused = false;
     }
   }).current;
-  React.useEffect(() => {
+  useEffect(() => {
     if (trapped) {
-      let handleFocusIn2 = function(event) {
-        if (focusScope.paused || !container2) return;
+      let handleFocusIn = function(event) {
+        if (focusScope.paused || !container1) return;
         const target2 = event.target;
-        if (container2.contains(target2)) {
-          lastFocusedElementRef.current = target2;
-        } else {
-          focus(lastFocusedElementRef.current, { select: true });
-        }
-      }, handleFocusOut2 = function(event) {
-        if (focusScope.paused || !container2) return;
+        if (container1.contains(target2)) lastFocusedElementRef.current = target2;
+        else $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
+          select: true
+        });
+      }, handleFocusOut = function(event) {
+        if (focusScope.paused || !container1) return;
         const relatedTarget = event.relatedTarget;
         if (relatedTarget === null) return;
-        if (!container2.contains(relatedTarget)) {
-          focus(lastFocusedElementRef.current, { select: true });
-        }
+        if (!container1.contains(relatedTarget)) $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
+          select: true
+        });
       }, handleMutations2 = function(mutations2) {
         const focusedElement = document.activeElement;
         if (focusedElement !== document.body) return;
-        for (const mutation of mutations2) {
-          if (mutation.removedNodes.length > 0) focus(container2);
-        }
+        for (const mutation of mutations2) if (mutation.removedNodes.length > 0) $d3863c46a17e8a28$var$focus(container1);
       };
-      document.addEventListener("focusin", handleFocusIn2);
-      document.addEventListener("focusout", handleFocusOut2);
+      document.addEventListener("focusin", handleFocusIn);
+      document.addEventListener("focusout", handleFocusOut);
       const mutationObserver = new MutationObserver(handleMutations2);
-      if (container2) mutationObserver.observe(container2, { childList: true, subtree: true });
+      if (container1) mutationObserver.observe(container1, {
+        childList: true,
+        subtree: true
+      });
       return () => {
-        document.removeEventListener("focusin", handleFocusIn2);
-        document.removeEventListener("focusout", handleFocusOut2);
+        document.removeEventListener("focusin", handleFocusIn);
+        document.removeEventListener("focusout", handleFocusOut);
         mutationObserver.disconnect();
       };
     }
-  }, [trapped, container2, focusScope.paused]);
-  React.useEffect(() => {
-    if (container2) {
-      focusScopesStack.add(focusScope);
+  }, [
+    trapped,
+    container1,
+    focusScope.paused
+  ]);
+  useEffect(() => {
+    if (container1) {
+      $d3863c46a17e8a28$var$focusScopesStack.add(focusScope);
       const previouslyFocusedElement = document.activeElement;
-      const hasFocusedCandidate = container2.contains(previouslyFocusedElement);
+      const hasFocusedCandidate = container1.contains(previouslyFocusedElement);
       if (!hasFocusedCandidate) {
-        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
-        container2.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
-        container2.dispatchEvent(mountEvent);
+        const mountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
+        container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+        container1.dispatchEvent(mountEvent);
         if (!mountEvent.defaultPrevented) {
-          focusFirst(removeLinks(getTabbableCandidates(container2)), { select: true });
-          if (document.activeElement === previouslyFocusedElement) {
-            focus(container2);
-          }
+          $d3863c46a17e8a28$var$focusFirst($d3863c46a17e8a28$var$removeLinks($d3863c46a17e8a28$var$getTabbableCandidates(container1)), {
+            select: true
+          });
+          if (document.activeElement === previouslyFocusedElement) $d3863c46a17e8a28$var$focus(container1);
         }
       }
       return () => {
-        container2.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+        container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
         setTimeout(() => {
-          const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
-          container2.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
-          container2.dispatchEvent(unmountEvent);
-          if (!unmountEvent.defaultPrevented) {
-            focus(previouslyFocusedElement ?? document.body, { select: true });
-          }
-          container2.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
-          focusScopesStack.remove(focusScope);
+          const unmountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
+          container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+          container1.dispatchEvent(unmountEvent);
+          if (!unmountEvent.defaultPrevented) $d3863c46a17e8a28$var$focus(previouslyFocusedElement !== null && previouslyFocusedElement !== void 0 ? previouslyFocusedElement : document.body, {
+            select: true
+          });
+          container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+          $d3863c46a17e8a28$var$focusScopesStack.remove(focusScope);
         }, 0);
       };
     }
-  }, [container2, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
-  const handleKeyDown = React.useCallback(
-    (event) => {
-      if (!loop && !trapped) return;
-      if (focusScope.paused) return;
-      const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
-      const focusedElement = document.activeElement;
-      if (isTabKey && focusedElement) {
-        const container22 = event.currentTarget;
-        const [first, last] = getTabbableEdges(container22);
-        const hasTabbableElementsInside = first && last;
-        if (!hasTabbableElementsInside) {
-          if (focusedElement === container22) event.preventDefault();
-        } else {
-          if (!event.shiftKey && focusedElement === last) {
-            event.preventDefault();
-            if (loop) focus(first, { select: true });
-          } else if (event.shiftKey && focusedElement === first) {
-            event.preventDefault();
-            if (loop) focus(last, { select: true });
-          }
+  }, [
+    container1,
+    onMountAutoFocus,
+    onUnmountAutoFocus,
+    focusScope
+  ]);
+  const handleKeyDown = useCallback((event) => {
+    if (!loop && !trapped) return;
+    if (focusScope.paused) return;
+    const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
+    const focusedElement = document.activeElement;
+    if (isTabKey && focusedElement) {
+      const container2 = event.currentTarget;
+      const [first, last] = $d3863c46a17e8a28$var$getTabbableEdges(container2);
+      const hasTabbableElementsInside = first && last;
+      if (!hasTabbableElementsInside) {
+        if (focusedElement === container2) event.preventDefault();
+      } else {
+        if (!event.shiftKey && focusedElement === last) {
+          event.preventDefault();
+          if (loop) $d3863c46a17e8a28$var$focus(first, {
+            select: true
+          });
+        } else if (event.shiftKey && focusedElement === first) {
+          event.preventDefault();
+          if (loop) $d3863c46a17e8a28$var$focus(last, {
+            select: true
+          });
         }
       }
-    },
-    [loop, trapped, focusScope.paused]
-  );
-  return /* @__PURE__ */ jsx(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+    }
+  }, [
+    loop,
+    trapped,
+    focusScope.paused
+  ]);
+  return /* @__PURE__ */ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
+    tabIndex: -1
+  }, scopeProps, {
+    ref: composedRefs,
+    onKeyDown: handleKeyDown
+  }));
 });
-FocusScope.displayName = FOCUS_SCOPE_NAME;
-function focusFirst(candidates, { select = false } = {}) {
+function $d3863c46a17e8a28$var$focusFirst(candidates, { select = false } = {}) {
   const previouslyFocusedElement = document.activeElement;
   for (const candidate of candidates) {
-    focus(candidate, { select });
+    $d3863c46a17e8a28$var$focus(candidate, {
+      select
+    });
     if (document.activeElement !== previouslyFocusedElement) return;
   }
 }
-function getTabbableEdges(container2) {
-  const candidates = getTabbableCandidates(container2);
-  const first = findVisible(candidates, container2);
-  const last = findVisible(candidates.reverse(), container2);
-  return [first, last];
+function $d3863c46a17e8a28$var$getTabbableEdges(container2) {
+  const candidates = $d3863c46a17e8a28$var$getTabbableCandidates(container2);
+  const first = $d3863c46a17e8a28$var$findVisible(candidates, container2);
+  const last = $d3863c46a17e8a28$var$findVisible(candidates.reverse(), container2);
+  return [
+    first,
+    last
+  ];
 }
-function getTabbableCandidates(container2) {
+function $d3863c46a17e8a28$var$getTabbableCandidates(container2) {
   const nodes = [];
   const walker = document.createTreeWalker(container2, NodeFilter.SHOW_ELEMENT, {
     acceptNode: (node) => {
@@ -12038,12 +12127,14 @@ function getTabbableCandidates(container2) {
   while (walker.nextNode()) nodes.push(walker.currentNode);
   return nodes;
 }
-function findVisible(elements, container2) {
+function $d3863c46a17e8a28$var$findVisible(elements, container2) {
   for (const element of elements) {
-    if (!isHidden(element, { upTo: container2 })) return element;
+    if (!$d3863c46a17e8a28$var$isHidden(element, {
+      upTo: container2
+    })) return element;
   }
 }
-function isHidden(node, { upTo }) {
+function $d3863c46a17e8a28$var$isHidden(node, { upTo }) {
   if (getComputedStyle(node).visibility === "hidden") return true;
   while (node) {
     if (upTo !== void 0 && node === upTo) return false;
@@ -12052,81 +12143,84 @@ function isHidden(node, { upTo }) {
   }
   return false;
 }
-function isSelectableInput(element) {
+function $d3863c46a17e8a28$var$isSelectableInput(element) {
   return element instanceof HTMLInputElement && "select" in element;
 }
-function focus(element, { select = false } = {}) {
+function $d3863c46a17e8a28$var$focus(element, { select = false } = {}) {
   if (element && element.focus) {
     const previouslyFocusedElement = document.activeElement;
-    element.focus({ preventScroll: true });
-    if (element !== previouslyFocusedElement && isSelectableInput(element) && select)
-      element.select();
+    element.focus({
+      preventScroll: true
+    });
+    if (element !== previouslyFocusedElement && $d3863c46a17e8a28$var$isSelectableInput(element) && select) element.select();
   }
 }
-var focusScopesStack = createFocusScopesStack();
-function createFocusScopesStack() {
+const $d3863c46a17e8a28$var$focusScopesStack = $d3863c46a17e8a28$var$createFocusScopesStack();
+function $d3863c46a17e8a28$var$createFocusScopesStack() {
   let stack = [];
   return {
     add(focusScope) {
       const activeFocusScope = stack[0];
-      if (focusScope !== activeFocusScope) {
-        activeFocusScope == null ? void 0 : activeFocusScope.pause();
-      }
-      stack = arrayRemove(stack, focusScope);
+      if (focusScope !== activeFocusScope) activeFocusScope === null || activeFocusScope === void 0 || activeFocusScope.pause();
+      stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
       stack.unshift(focusScope);
     },
     remove(focusScope) {
-      var _a;
-      stack = arrayRemove(stack, focusScope);
-      (_a = stack[0]) == null ? void 0 : _a.resume();
+      var _stack$;
+      stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
+      (_stack$ = stack[0]) === null || _stack$ === void 0 || _stack$.resume();
     }
   };
 }
-function arrayRemove(array, item) {
-  const updatedArray = [...array];
+function $d3863c46a17e8a28$var$arrayRemove(array, item) {
+  const updatedArray = [
+    ...array
+  ];
   const index = updatedArray.indexOf(item);
-  if (index !== -1) {
-    updatedArray.splice(index, 1);
-  }
+  if (index !== -1) updatedArray.splice(index, 1);
   return updatedArray;
 }
-function removeLinks(items) {
-  return items.filter((item) => item.tagName !== "A");
+function $d3863c46a17e8a28$var$removeLinks(items) {
+  return items.filter(
+    (item) => item.tagName !== "A"
+  );
 }
-const themeVars$m = `'{"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: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: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: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)", "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)", "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_w44f3_13";
-const error$6 = "_error_w44f3_21";
-const warning$6 = "_warning_w44f3_29";
-const valid$6 = "_valid_w44f3_37";
-const selectTrigger = "_selectTrigger_w44f3_46";
-const badgeListContainer = "_badgeListContainer_w44f3_170";
-const badgeList$1 = "_badgeList_w44f3_170";
-const badge$1 = "_badge_w44f3_170";
-const actions$1 = "_actions_w44f3_210";
-const placeholder = "_placeholder_w44f3_216";
-const emptyList = "_emptyList_w44f3_221";
-const selectScrollUpButton = "_selectScrollUpButton_w44f3_231";
-const selectScrollDownButton = "_selectScrollDownButton_w44f3_240";
-const command$1 = "_command_w44f3_249";
-const commandInputContainer = "_commandInputContainer_w44f3_259";
-const commandInput$1 = "_commandInput_w44f3_259";
-const commandList$1 = "_commandList_w44f3_284";
-const selectContent = "_selectContent_w44f3_289";
-const fadeIn = "_fadeIn_w44f3_1";
-const zoomIn = "_zoomIn_w44f3_1";
-const fadeOut = "_fadeOut_w44f3_1";
-const zoomOut = "_zoomOut_w44f3_1";
-const slideInFromTop = "_slideInFromTop_w44f3_1";
-const slideInFromRight = "_slideInFromRight_w44f3_1";
-const slideInFromLeft = "_slideInFromLeft_w44f3_1";
-const slideInFromBottom = "_slideInFromBottom_w44f3_1";
-const multiComboboxOption = "_multiComboboxOption_w44f3_329";
-const selectItem = "_selectItem_w44f3_349";
-const selectItemIndicator = "_selectItemIndicator_w44f3_377";
-const selectViewport = "_selectViewport_w44f3_388";
-const selectEmpty = "_selectEmpty_w44f3_394";
-const loading = "_loading_w44f3_405";
-const srOnly = "_srOnly_w44f3_409";
+const themeVars$m = `'{"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: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: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: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: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)", "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)", "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_nwesf_13";
+const error$6 = "_error_nwesf_21";
+const warning$6 = "_warning_nwesf_29";
+const valid$6 = "_valid_nwesf_37";
+const selectTrigger = "_selectTrigger_nwesf_46";
+const badgeListContainer = "_badgeListContainer_nwesf_170";
+const badgeList$1 = "_badgeList_nwesf_170";
+const badge$1 = "_badge_nwesf_170";
+const actions$1 = "_actions_nwesf_210";
+const placeholder = "_placeholder_nwesf_216";
+const emptyList = "_emptyList_nwesf_221";
+const selectScrollUpButton = "_selectScrollUpButton_nwesf_231";
+const selectScrollDownButton = "_selectScrollDownButton_nwesf_240";
+const command$1 = "_command_nwesf_249";
+const commandInputContainer = "_commandInputContainer_nwesf_259";
+const commandInput$1 = "_commandInput_nwesf_259";
+const commandList$1 = "_commandList_nwesf_284";
+const selectContent = "_selectContent_nwesf_289";
+const fadeIn = "_fadeIn_nwesf_1";
+const zoomIn = "_zoomIn_nwesf_1";
+const fadeOut = "_fadeOut_nwesf_1";
+const zoomOut = "_zoomOut_nwesf_1";
+const slideInFromTop = "_slideInFromTop_nwesf_1";
+const slideInFromRight = "_slideInFromRight_nwesf_1";
+const slideInFromLeft = "_slideInFromLeft_nwesf_1";
+const slideInFromBottom = "_slideInFromBottom_nwesf_1";
+const multiComboboxOption = "_multiComboboxOption_nwesf_329";
+const multiComboboxOptionContent = "_multiComboboxOptionContent_nwesf_329";
+const selectItem = "_selectItem_nwesf_354";
+const selectItemContent = "_selectItemContent_nwesf_369";
+const selectItemIndicator = "_selectItemIndicator_nwesf_391";
+const selectViewport = "_selectViewport_nwesf_402";
+const selectEmpty = "_selectEmpty_nwesf_408";
+const loading = "_loading_nwesf_419";
+const srOnly = "_srOnly_nwesf_423";
 const styles$o = {
   themeVars: themeVars$m,
   selectValue,
@@ -12156,7 +12250,9 @@ const styles$o = {
   slideInFromLeft,
   slideInFromBottom,
   multiComboboxOption,
+  multiComboboxOptionContent,
   selectItem,
+  selectItemContent,
   selectItemIndicator,
   selectViewport,
   selectEmpty,
@@ -12205,7 +12301,7 @@ const SimpleSelect = forwardRef(function SimpleSelect2(props, forwardedRef) {
     options: options2
   } = props;
   const ref = forwardedRef ? composeRefs(triggerRef, forwardedRef) : triggerRef;
-  const stringValue = value ? value + "" : void 0;
+  const stringValue = value != void 0 ? value + "" : null;
   const onValChange = useCallback(
     (val) => {
       var _a;
@@ -12216,8 +12312,6 @@ const SimpleSelect = forwardRef(function SimpleSelect2(props, forwardedRef) {
     },
     [onValueChange, options2]
   );
-  useEffect(() => {
-  }, []);
   return /* @__PURE__ */ jsx(OptionTypeProvider, { Component: SelectOption, children: /* @__PURE__ */ jsxs(Root, { value: stringValue, onValueChange: onValChange, children: [
     /* @__PURE__ */ jsxs(
       Trigger,
@@ -12269,6 +12363,7 @@ const Select = forwardRef(function Select2({
   registerComponentApi,
   emptyListTemplate,
   optionLabelRenderer,
+  optionRenderer,
   valueRenderer,
   style,
   dropdownHeight,
@@ -12323,18 +12418,27 @@ const Select = forwardRef(function Select2({
     updateState({ value: newValue });
     onDidChange(newValue);
   }, [multiSelect, updateState, onDidChange]);
-  const focus2 = useCallback(() => {
+  const focus = useCallback(() => {
     referenceElement == null ? void 0 : referenceElement.focus();
   }, [referenceElement]);
   const setValue = useEvent((newValue) => {
     toggleOption(newValue);
   });
+  const reset = useEvent(() => {
+    if (initialValue !== void 0) {
+      updateState({ value: initialValue });
+      onDidChange(initialValue);
+    } else {
+      clearValue();
+    }
+  });
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
-      focus: focus2,
-      setValue
+      focus,
+      setValue,
+      reset
     });
-  }, [focus2, registerComponentApi, setValue]);
+  }, [focus, registerComponentApi, setValue, reset]);
   const emptyListNode = useMemo(
     () => emptyListTemplate ?? /* @__PURE__ */ jsxs("div", { className: styles$o.selectEmpty, children: [
       /* @__PURE__ */ jsx(Icon, { name: "noresult" }),
@@ -12364,9 +12468,10 @@ const Select = forwardRef(function Select2({
       multiSelect,
       value,
       optionLabelRenderer,
+      optionRenderer,
       onChange: toggleOption
     }),
-    [multiSelect, toggleOption, value, optionLabelRenderer]
+    [multiSelect, toggleOption, value, optionLabelRenderer, optionRenderer]
   );
   return /* @__PURE__ */ jsx(SelectContext.Provider, { value: selectContextValue, children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? /* @__PURE__ */ jsxs(OptionTypeProvider, { Component: HiddenOption, children: [
     children,
@@ -12441,7 +12546,7 @@ const Select = forwardRef(function Select2({
               ]
             }
           ) }),
-          open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, loop: true, trapped: true, children: /* @__PURE__ */ jsx(
+          open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx($d3863c46a17e8a28$export$20e40289641fbbb6, { asChild: true, loop: true, trapped: true, children: /* @__PURE__ */ jsx(
             PopoverContent,
             {
               style: { width, height: dropdownHeight },
@@ -12517,11 +12622,17 @@ const Select = forwardRef(function Select2({
 const ComboboxOption = forwardRef(function Combobox(option, forwardedRef) {
   const id = useId();
   const { label: label2, value, enabled: enabled2 = true, keywords } = option;
-  const { value: selectedValue, onChange, multiSelect, optionLabelRenderer } = useSelect();
+  const {
+    value: selectedValue,
+    onChange,
+    multiSelect,
+    optionLabelRenderer,
+    optionRenderer
+  } = useSelect();
   const selected2 = useMemo(() => {
     return Array.isArray(selectedValue) && multiSelect ? selectedValue.includes(value) : selectedValue === value;
   }, [selectedValue, value, multiSelect]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     CommandItem,
     {
       id,
@@ -12534,10 +12645,10 @@ const ComboboxOption = forwardRef(function Combobox(option, forwardedRef) {
       },
       "data-state": selected2 ? "checked" : void 0,
       keywords,
-      children: [
+      children: /* @__PURE__ */ jsx("div", { className: styles$o.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         optionLabelRenderer ? optionLabelRenderer({ label: label2, value }) : label2,
         selected2 && /* @__PURE__ */ jsx(Icon, { name: "checkmark" })
-      ]
+      ] }) })
     },
     id
   );
@@ -12562,15 +12673,19 @@ const SelectOption = React__default.forwardRef(
   (option, ref) => {
     const { value, label: label2, enabled: enabled2 = true } = option;
     const { onOptionRemove, onOptionAdd } = useOption();
-    const { optionLabelRenderer } = useSelect();
+    const { optionLabelRenderer, optionRenderer } = useSelect();
     useLayoutEffect(() => {
       onOptionAdd(option);
       return () => onOptionRemove(option);
     }, [option, onOptionAdd, onOptionRemove]);
-    return /* @__PURE__ */ jsxs(Item, { ref, className: styles$o.selectItem, value: value + "", disabled: !enabled2, children: [
-      /* @__PURE__ */ jsx(ItemText, { children: optionLabelRenderer ? optionLabelRenderer({ value, label: label2 }) : label2 }),
+    return /* @__PURE__ */ jsx(Item, { ref, className: styles$o.selectItem, value: value + "", disabled: !enabled2, children: /* @__PURE__ */ jsx("div", { className: styles$o.selectItemContent, children: optionRenderer ? optionRenderer({
+      label: /* @__PURE__ */ jsx(ItemText, { children: label2 }),
+      value,
+      enabled: enabled2
+    }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ItemText, { className: styles$o.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label: label2 }) : label2 }),
       /* @__PURE__ */ jsx("span", { className: styles$o.selectItemIndicator, children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) }) })
-    ] });
+    ] }) }) });
   }
 );
 SelectOption.displayName = "SelectOption";
@@ -12877,7 +12992,7 @@ const TextArea = forwardRef(function TextArea2({
     setFocused(false);
     onBlur == null ? void 0 : onBlur();
   };
-  const focus2 = useCallback(() => {
+  const focus = useCallback(() => {
     setTimeout(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -12914,11 +13029,11 @@ const TextArea = forwardRef(function TextArea2({
   }, [value, cursorPosition, inputRef]);
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
-      focus: focus2,
+      focus,
       insert,
       setValue
     });
-  }, [focus2, insert, registerComponentApi, setValue]);
+  }, [focus, insert, registerComponentApi, setValue]);
   const handleEnter = useCallback(
     (e) => {
       var _a, _b;
@@ -13200,7 +13315,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
     ] }),
     [emptyListTemplate]
   );
-  const focus2 = useCallback(() => {
+  const focus = useCallback(() => {
     var _a;
     (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
   }, [inputRef]);
@@ -13209,10 +13324,10 @@ const AutoComplete = forwardRef(function AutoComplete2({
   });
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
-      focus: focus2,
+      focus,
       setValue
     });
-  }, [focus2, registerComponentApi, setValue]);
+  }, [focus, registerComponentApi, setValue]);
   const optionContextValue = useMemo(
     () => ({
       onOptionAdd,
@@ -13583,7 +13698,7 @@ const Slider = forwardRef(
     const handleOnBlur = useCallback(() => {
       onBlur == null ? void 0 : onBlur();
     }, [onBlur]);
-    const focus2 = useCallback(() => {
+    const focus = useCallback(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     }, []);
@@ -13592,10 +13707,10 @@ const Slider = forwardRef(
     });
     useEffect(() => {
       registerComponentApi == null ? void 0 : registerComponentApi({
-        focus: focus2,
+        focus,
         setValue
       });
-    }, [focus2, registerComponentApi, setValue]);
+    }, [focus, registerComponentApi, setValue]);
     const displayValue = localValue.length > 0 ? localValue : [min];
     const valuesText = displayValue.map((v) => valueFormat(v)).join(", ");
     const displayLabel = label2 ? showValues ? `${label2} ${valuesText}` : label2 : showValues ? valuesText : "";
@@ -13736,7 +13851,7 @@ const ColorPicker = forwardRef(
     const handleOnBlur = useCallback(() => {
       onBlur == null ? void 0 : onBlur();
     }, [onBlur]);
-    const focus2 = useCallback(() => {
+    const focus = useCallback(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     }, []);
@@ -13745,10 +13860,10 @@ const ColorPicker = forwardRef(
     });
     useEffect(() => {
       registerComponentApi == null ? void 0 : registerComponentApi({
-        focus: focus2,
+        focus,
         setValue
       });
-    }, [focus2, registerComponentApi, setValue]);
+    }, [focus, registerComponentApi, setValue]);
     return /* @__PURE__ */ jsx(
       ItemWithLabel,
       {
@@ -13899,6 +14014,429 @@ const HelperText = ({ text: text2 = "", status, style }) => {
     }
   );
 };
+const NumberBox22 = forwardRef(function NumberBox222({
+  id,
+  style,
+  value,
+  initialValue,
+  zeroOrPositive = false,
+  min = zeroOrPositive ? 0 : -999999999999999,
+  max = NUMBERBOX_MAX_VALUE,
+  maxFractionDigits = 3,
+  enabled: enabled2 = true,
+  placeholder: placeholder2,
+  step,
+  integersOnly = false,
+  validationStatus = "none",
+  hasSpinBox = true,
+  updateState = noop$1,
+  onDidChange = noop$1,
+  onFocus = noop$1,
+  onBlur = noop$1,
+  registerComponentApi,
+  startText,
+  startIcon,
+  endText,
+  endIcon,
+  autoFocus,
+  readOnly: readOnly2,
+  required: required2,
+  label: label2,
+  labelPosition,
+  labelWidth,
+  labelBreak: labelBreak2
+}, forwardedRef) {
+  const inputRef = useRef(null);
+  const upButton = useRef(null);
+  const downButton = useRef(null);
+  const locale = "en-US";
+  const formatOptions = useMemo(() => {
+    return {
+      useGrouping: false,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: integersOnly ? 0 : maxFractionDigits
+    };
+  }, [maxFractionDigits, integersOnly]);
+  const formatter = useNumberFormatter(locale, formatOptions);
+  const parser = useNumberParser(locale, formatOptions);
+  min = clamp(
+    toUsableNumber(min, true) ?? (zeroOrPositive ? 0 : -999999999999999),
+    zeroOrPositive ? 0 : -999999999999999,
+    NUMBERBOX_MAX_VALUE
+  );
+  max = clamp(
+    toUsableNumber(max, true) ?? (zeroOrPositive ? 0 : -999999999999999),
+    zeroOrPositive ? 0 : -999999999999999,
+    NUMBERBOX_MAX_VALUE
+  );
+  const initializeValue = useCallback(
+    (value2, defaultValue = "") => {
+      return isEmptyLike(value2) || isNaN$1(parser.parse(value2.toString())) ? defaultValue : formatter.format(clamp(+value2, min, max));
+    },
+    [formatter, parser, min, max]
+  );
+  const [valueStrRep, setValueStrRep] = React__default.useState(initializeValue(value));
+  useLayoutEffect(() => {
+    setValueStrRep(initializeValue(value));
+  }, [value, initializeValue]);
+  const onFixCursorPosition = useCursorCorrection(valueStrRep, inputRef);
+  const _step = toUsableNumber(step, true) ?? DEFAULT_STEP;
+  const inputMode = useMemo(() => {
+    const hasDecimals = formatter.resolvedOptions().maximumFractionDigits > 0;
+    return hasDecimals ? "decimal" : "numeric";
+  }, [formatter]);
+  useEffect(() => {
+    updateState({ value: initialValue }, { initial: true });
+  }, [initialValue, updateState]);
+  const clampInputValue = useCallback(
+    (value2) => {
+      return clamp(value2, min, max);
+    },
+    [min, max]
+  );
+  const clampAndSaveInput = useCallback(
+    (value2) => {
+      if (isEmptyLike(value2)) {
+        updateState({ value: null });
+        return;
+      }
+      value2 = value2.toString();
+      if (!value2.length) {
+        updateState({ value: null });
+        return;
+      }
+      let parsedValue = parser.parse(value2);
+      parsedValue = clampInputValue(parsedValue);
+      if (isNaN$1(parsedValue)) {
+        updateState({ value: value2 });
+        return;
+      }
+      setValueStrRep((lastVal) => {
+        const formatted = formatter.format(parsedValue);
+        if (lastVal !== formatted) {
+          return formatted;
+        }
+        return lastVal;
+      });
+      updateState({ value: parsedValue });
+    },
+    [clampInputValue, updateState, parser, formatter]
+  );
+  const increment = useCallback(() => {
+    if (!enabled2) return;
+    if (readOnly2) return;
+    const currentValue = isEmptyLike(value) || isNaN$1(value) ? "0" : value.toString();
+    const newValue = handleChangingValue(currentValue, parser, "increase", _step, min, max);
+    updateState({ value: newValue });
+  }, [value, enabled2, readOnly2, parser, _step, min, max, updateState]);
+  const decrement = useCallback(() => {
+    if (!enabled2) return;
+    if (readOnly2) return;
+    const currentValue = isEmptyLike(value) || isNaN$1(value) ? "0" : value.toString();
+    const newValue = handleChangingValue(currentValue, parser, "decrease", _step, min, max);
+    updateState({ value: newValue });
+  }, [value, enabled2, readOnly2, parser, _step, min, max, updateState]);
+  useLongPress(upButton.current, increment);
+  useLongPress(downButton.current, decrement);
+  const _onBeforeInput = useCallback(
+    (event) => {
+      const target2 = event.target;
+      const nextValue = parser.parse(
+        target2.value.slice(0, target2.selectionStart ?? void 0) + (event.nativeEvent.data ?? "") + target2.value.slice(target2.selectionEnd ?? void 0)
+      ).toString();
+      if (!parser.isValidPartialNumber(nextValue, min, max)) {
+        event.preventDefault();
+      }
+    },
+    [parser, min, max]
+  );
+  const _onChange = useCallback(
+    (event) => {
+      const strValue = event.target.value;
+      let parsed = clampInputValue(parser.parse(event.target.value));
+      if (integersOnly && Number.isInteger(parsed)) {
+        parsed = Math.trunc(parsed);
+      }
+      if (canSynchronizeValue(strValue, locale, formatOptions)) {
+        updateState({ value: parsed });
+      } else {
+        setValueStrRep(strValue);
+      }
+      onFixCursorPosition(event);
+      onDidChange(parsed);
+    },
+    [
+      clampInputValue,
+      parser,
+      onDidChange,
+      locale,
+      formatOptions,
+      onFixCursorPosition,
+      updateState,
+      integersOnly
+    ]
+  );
+  const _onFocus = useCallback(() => {
+    onFocus == null ? void 0 : onFocus();
+  }, [onFocus]);
+  const _onBlur = useCallback(
+    (event) => {
+      const value2 = event.target.value;
+      clampAndSaveInput(value2);
+      onBlur();
+    },
+    [clampAndSaveInput, onBlur]
+  );
+  const _onKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter") {
+        clampAndSaveInput(value);
+      }
+      if (event.code === "ArrowUp") {
+        event.preventDefault();
+        increment();
+      }
+      if (event.code === "ArrowDown") {
+        event.preventDefault();
+        decrement();
+      }
+    },
+    [clampAndSaveInput, increment, decrement, value]
+  );
+  const focus = useCallback(() => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  useEffect(() => {
+    if (autoFocus) {
+      setTimeout(() => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      }, 0);
+    }
+  }, [autoFocus]);
+  const setValue = useEvent((newValue) => {
+    updateState({ value: newValue });
+  });
+  useEffect(() => {
+    registerComponentApi == null ? void 0 : registerComponentApi({
+      focus,
+      setValue
+    });
+  }, [focus, registerComponentApi, setValue]);
+  return /* @__PURE__ */ jsx(
+    ItemWithLabel,
+    {
+      ref: forwardedRef,
+      labelPosition,
+      label: label2,
+      labelWidth,
+      labelBreak: labelBreak2,
+      required: required2,
+      enabled: enabled2,
+      onFocus,
+      onBlur,
+      style,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classnames(styles$p.inputRoot, {
+            [styles$p.readOnly]: readOnly2,
+            [styles$p.disabled]: !enabled2,
+            [styles$p.noSpinBox]: !hasSpinBox,
+            [styles$p.error]: validationStatus === "error",
+            [styles$p.warning]: validationStatus === "warning",
+            [styles$p.valid]: validationStatus === "valid"
+          }),
+          tabIndex: -1,
+          onFocus: () => {
+            var _a;
+            (_a = inputRef.current) == null ? void 0 : _a.focus();
+          },
+          children: [
+            /* @__PURE__ */ jsx(Adornment, { text: startText, iconName: startIcon, className: styles$p.adornment }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id,
+                ref: inputRef,
+                type: "text",
+                placeholder: placeholder2,
+                required: required2,
+                readOnly: readOnly2,
+                disabled: !enabled2,
+                inputMode,
+                className: classnames(styles$p.input),
+                value: valueStrRep,
+                min,
+                max,
+                autoFocus,
+                onBeforeInput: _onBeforeInput,
+                onChange: _onChange,
+                onFocus: _onFocus,
+                onBlur: _onBlur,
+                onKeyDown: _onKeyDown
+              }
+            ),
+            /* @__PURE__ */ jsx(Adornment, { text: endText, iconName: endIcon, className: styles$p.adornment }),
+            hasSpinBox && /* @__PURE__ */ jsxs("div", { className: styles$p.spinnerBox, children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "data-spinner": "up",
+                  type: "button",
+                  variant: "ghost",
+                  themeColor: "secondary",
+                  tabIndex: -1,
+                  className: styles$p.spinnerButton,
+                  disabled: !enabled2 || readOnly2,
+                  ref: upButton,
+                  children: /* @__PURE__ */ jsx(Icon, { name: "chevronup", size: "sm" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "data-spinner": "down",
+                  type: "button",
+                  tabIndex: -1,
+                  variant: "ghost",
+                  themeColor: "secondary",
+                  className: styles$p.spinnerButton,
+                  disabled: !enabled2 || readOnly2,
+                  ref: downButton,
+                  children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown", size: "sm" })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+function useNumberFormatter(locale, options2) {
+  return useMemo(() => {
+    return new NumberFormatter(locale, options2);
+  }, [locale, options2]);
+}
+function useNumberParser(locale, options2) {
+  return useMemo(() => {
+    return new NumberParser(locale, options2);
+  }, [locale, options2]);
+}
+function useLongPress(elementRef, action, delay = 500) {
+  const timeoutId = useRef(0);
+  const intervalId = useRef(0);
+  const savedAction = useRef(action);
+  useEffect(() => {
+    savedAction.current = action;
+  }, [action]);
+  useEffect(() => {
+    const onMouseDown = () => {
+      var _a;
+      (_a = savedAction.current) == null ? void 0 : _a.call(savedAction);
+      timeoutId.current = window.setTimeout(() => {
+        intervalId.current = window.setInterval(() => {
+          var _a2;
+          (_a2 = savedAction.current) == null ? void 0 : _a2.call(savedAction);
+        }, 100);
+      }, delay);
+    };
+    const onMouseUp = () => {
+      clearTimeout(timeoutId.current);
+      clearInterval(intervalId.current);
+    };
+    const onMouseOut = () => {
+      clearTimeout(timeoutId.current);
+      clearInterval(intervalId.current);
+    };
+    elementRef == null ? void 0 : elementRef.addEventListener("mousedown", onMouseDown);
+    elementRef == null ? void 0 : elementRef.addEventListener("mouseup", onMouseUp);
+    elementRef == null ? void 0 : elementRef.addEventListener("mouseout", onMouseOut);
+    return () => {
+      elementRef == null ? void 0 : elementRef.removeEventListener("mousedown", onMouseDown);
+      elementRef == null ? void 0 : elementRef.removeEventListener("mouseup", onMouseUp);
+      elementRef == null ? void 0 : elementRef.removeEventListener("mouseout", onMouseOut);
+    };
+  }, [elementRef, action, delay]);
+}
+function handleChangingValue(value, parser, type, step = 1, min = -999999999999999, max = NUMBERBOX_MAX_VALUE) {
+  const currentInputValue = parser.parse(value ?? "");
+  if (isNaN$1(currentInputValue)) {
+    return min ?? 0;
+  }
+  if (type === "increase") {
+    return clamp(currentInputValue + (step ?? 1), min, max);
+  } else {
+    return clamp(currentInputValue - (step ?? 1), min, max);
+  }
+}
+function canSynchronizeValue(value, locale, options2) {
+  if (value.trim() === "") return true;
+  if (isNaN$1(value)) return false;
+  if (hasLeadingZeros(value, locale, options2)) return false;
+  if (isFloatWithTrailingZeros(value, locale, options2)) return false;
+  if (overMaximumFractionDigits(value, locale, options2)) return false;
+  return true;
+}
+function hasLeadingZeros(input2, locale = "en-US", options2) {
+  var _a, _b;
+  const formatter = new Intl.NumberFormat(locale, options2);
+  const parts = formatter.formatToParts(1234.5);
+  const group = ((_a = parts.find((p) => p.type === "group")) == null ? void 0 : _a.value) || "";
+  const decimal = ((_b = parts.find((p) => p.type === "decimal")) == null ? void 0 : _b.value) || "";
+  const normalized = (group === "" ? input2 : input2.replace(new RegExp(`\\${group}`, "g"), "")).replace(decimal, ".");
+  if (!/^-?\d*\.?\d*$/.test(normalized)) return false;
+  const [integer, fraction] = normalized.split(".");
+  if (!fraction) {
+    return integer.length > 1 && integer.startsWith("0");
+  }
+  const leadingIntegerZeros = integer.startsWith("0") && integer.length >= 1;
+  const leadingFractionZeros = (fraction.match(/^0+/) || [""])[0].length >= 2;
+  return leadingIntegerZeros || leadingFractionZeros;
+}
+function isFloatWithTrailingZeros(input2, locale = "en-US", options2) {
+  var _a, _b;
+  const formatter = new Intl.NumberFormat(locale, options2);
+  const parts = formatter.formatToParts(1234.5);
+  const group = ((_a = parts.find((p) => p.type === "group")) == null ? void 0 : _a.value) || "";
+  const decimal = ((_b = parts.find((p) => p.type === "decimal")) == null ? void 0 : _b.value) || ".";
+  const normalized = (group === "" ? input2 : input2.replace(new RegExp(`\\${group}`, "g"), "")).replace(decimal, ".");
+  if (!/^-?\d*\.?\d*$/.test(normalized)) return false;
+  if (!normalized.includes(".")) return false;
+  const [_, fraction] = normalized.split(".");
+  if (!fraction || fraction.length === 0) return true;
+  return /0+$/.test(fraction);
+}
+function overMaximumFractionDigits(input2, locale = "en-US", options2) {
+  var _a, _b;
+  const formatter = new Intl.NumberFormat(locale, options2);
+  const parts = formatter.formatToParts(1234.5);
+  const group = ((_a = parts.find((p) => p.type === "group")) == null ? void 0 : _a.value) || "";
+  const decimal = ((_b = parts.find((p) => p.type === "decimal")) == null ? void 0 : _b.value) || "";
+  const normalized = (group === "" ? input2 : input2.replace(new RegExp(`\\${group}`, "g"), "")).replace(decimal, ".");
+  if (!/^-?\d*\.?\d*$/.test(normalized)) return false;
+  const [_, fraction] = normalized.split(".");
+  if (!fraction) {
+    return false;
+  }
+  return fraction.length > options2.maximumFractionDigits;
+}
+function useCursorCorrection(value, inputRef) {
+  const position = useRef({
+    beforeStart: 0,
+    beforeEnd: 0
+  });
+  useLayoutEffect(() => {
+    inputRef.current.setSelectionRange(position.current.beforeStart, position.current.beforeEnd);
+  }, [value]);
+  const onInputChange = (event) => {
+    position.current.beforeStart = event.target.selectionStart;
+    position.current.beforeEnd = event.target.selectionEnd;
+  };
+  return onInputChange;
+}
 const DEFAULT_LABEL_POSITIONS = {
   checkbox: "end"
 };
@@ -14044,6 +14582,23 @@ memo(function FormItem2({
       );
       break;
     }
+    case "integer2":
+    case "number2": {
+      formControl = /* @__PURE__ */ jsx(
+        NumberBox22,
+        {
+          ...rest,
+          value,
+          updateState: onStateChange,
+          registerComponentApi,
+          enabled: isEnabled2,
+          min: validations.minValue,
+          max: validations.maxValue,
+          integersOnly: type === "integer2"
+        }
+      );
+      break;
+    }
     case "switch":
     case "checkbox": {
       formControl = /* @__PURE__ */ jsx(
@@ -14588,6 +15143,7 @@ const ItemsMd = createMetadata({
     },
     itemTemplate: dComponent("The component template to display a single item")
   },
+  childrenAsTemplate: "itemTemplate",
   contextVars: {
     $item: dComponent(
       "This value represents the current iteration item while the component renders its children."
@@ -14717,6 +15273,7 @@ const ListMd = createMetadata({
       defaultValue: true
     }
   },
+  childrenAsTemplate: "itemTemplate",
   apis: {
     scrollToTop: d("This method scrolls the list to the top."),
     scrollToBottom: d("This method scrolls the list to the bottom."),
@@ -14737,7 +15294,7 @@ const LogoMd = createMetadata({
   status: "experimental",
   description: `The \`${COMP$H}\` component represents a logo or a brand symbol. Usually, you use this component in the [\`AppHeader\`](./AppHeader.mdx#logotemplate).`
 });
-const themeVars$f = `'{"accentColor-Blockquote": "var(--xmlui-accentColor-Blockquote)", "accentWidth-Blockquote": "var(--xmlui-accentWidth-Blockquote)", "backgroundColor-Admonition": "var(--xmlui-backgroundColor-Admonition)", "paddingLeft-Blockquote": "var(--xmlui-paddingLeft-Blockquote)", "borderRadius-Blockquote": "var(--xmlui-borderRadius-Blockquote)", "marginTop-Blockquote": "var(--xmlui-marginTop-Blockquote)", "marginBottom-Blockquote": "var(--xmlui-marginBottom-Blockquote)", "paddingLeft-Admonition": "var(--xmlui-paddingLeft-Admonition)", "borderRadius-Admonition": "var(--xmlui-borderRadius-Admonition)", "iconSize-Admonition": "var(--xmlui-iconSize-Admonition)", "marginTop-Admonition": "var(--xmlui-marginTop-Admonition)", "marginBottom-Admonition": "var(--xmlui-marginBottom-Admonition)", "marginLeft-Admonition-content": "var(--xmlui-marginLeft-Admonition-content)", "marginTop-HtmlVideo": "var(--xmlui-marginTop-HtmlVideo)", "marginBottom-HtmlVideo": "var(--xmlui-marginBottom-HtmlVideo)"}'`;
+const themeVars$f = `'{"accentColor-Blockquote": "var(--xmlui-accentColor-Blockquote)", "accentWidth-Blockquote": "var(--xmlui-accentWidth-Blockquote)", "backgroundColor-Blockquote": "var(--xmlui-backgroundColor-Blockquote)", "paddingLeft-Blockquote": "var(--xmlui-paddingLeft-Blockquote)", "borderRadius-Blockquote": "var(--xmlui-borderRadius-Blockquote)", "marginTop-Blockquote": "var(--xmlui-marginTop-Blockquote)", "marginBottom-Blockquote": "var(--xmlui-marginBottom-Blockquote)", "backgroundColor-Admonition": "var(--xmlui-backgroundColor-Admonition)", "paddingLeft-Admonition": "var(--xmlui-paddingLeft-Admonition)", "borderRadius-Admonition": "var(--xmlui-borderRadius-Admonition)", "iconSize-Admonition": "var(--xmlui-iconSize-Admonition)", "marginTop-Admonition": "var(--xmlui-marginTop-Admonition)", "marginBottom-Admonition": "var(--xmlui-marginBottom-Admonition)", "marginLeft-Admonition-content": "var(--xmlui-marginLeft-Admonition-content)", "marginTop-HtmlVideo": "var(--xmlui-marginTop-HtmlVideo)", "marginBottom-HtmlVideo": "var(--xmlui-marginBottom-HtmlVideo)"}'`;
 const styles$g = {
   themeVars: themeVars$f
 };
@@ -14778,11 +15335,13 @@ const MarkdownMd = createMetadata({
     }
   },
   defaultThemeVars: {
+    "backgroundColor-Admonition": "$color-warn-300",
     "borderRadius-Admonition": "$space-4",
     "iconSize-Admonition": "1.5rem",
     "padding-Admonition": "1rem",
     "marginBottom-Admonition": "1rem",
     "marginLeft-Admonition-content": ".5rem",
+    "backgroundColor-Blockquote": "$color-warn-200",
     "accentWidth-Blockquote": "3px",
     "accentColor-Blockquote": "$color-surface-500",
     "padding-Blockquote": ".5rem",
@@ -15161,9 +15720,9 @@ const NavPanelMd = createMetadata({
   },
   themeVars: parseScssVar(styles$H.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-${COMP$C}`]: "transparent",
+    [`backgroundColor-${COMP$C}`]: "$backgroundColor",
     [`border-${COMP$C}`]: "0px solid $borderColor",
-    [`paddingHorizontal-${COMP$C}`]: "$space-4",
+    [`paddingHorizontal-${COMP$C}`]: "0",
     [`paddingVertical-logo-${COMP$C}`]: "$space-4",
     [`paddingHorizontal-logo-${COMP$C}`]: "$space-4",
     [`marginBottom-logo-${COMP$C}`]: "$space-4",
@@ -15521,6 +16080,9 @@ const SelectMd = createMetadata({
     optionLabelTemplate: dComponent(
       `This property allows replacing the default template to display an option in the dropdown list.`
     ),
+    optionTemplate: dComponent(
+      `This property allows replacing the default template to display an option in the dropdown list.`
+    ),
     valueTemplate: dComponent(
       `This property allows replacing the default template to display a selected value when multiple selections (\`multiSelect\` is \`true\`) are enabled.`
     ),
@@ -15545,7 +16107,8 @@ const SelectMd = createMetadata({
   apis: {
     focus: dFocus(COMP$t),
     setValue: dSetValueApi(),
-    value: dValue()
+    value: dValue(),
+    reset: d(`This method resets the component to its initial value, or clears the selection if no initial value was provided.`)
   },
   contextVars: {
     $item: d(`This property represents the value of an item in the dropdown list.`),
@@ -15568,6 +16131,8 @@ const SelectMd = createMetadata({
     [`fontSize-${COMP$t}-badge`]: "$fontSize-small",
     [`paddingHorizontal-${COMP$t}-badge`]: "$space-1",
     [`paddingVertical-${COMP$t}-badge`]: "$space-1",
+    [`paddingHorizontal-item-${COMP$t}`]: "$space-2",
+    [`paddingVertical-item-${COMP$t}`]: "$space-2",
     [`opacity-text-item-${COMP$t}--disabled`]: "0.5",
     [`opacity-${COMP$t}--disabled`]: "0.5",
     [`backgroundColor-${COMP$t}-badge--hover`]: "$color-primary-400",
@@ -17607,52 +18172,61 @@ const APICallMd = createMetadata({
 const COMP$a = "DataSource";
 const DataSourceMd = createMetadata({
   status: "stable",
-  description: `The \`${COMP$a}\` component manages fetching data from a web API endpoint. This component automatically manages the complexity of the fetch operation and caching. To manipulate data on the backend, use the [\`APICall\`](./APICall.mdx) component.`,
+  description: `The \`${COMP$a}\` component manages fetching data from an API endpoint. This component automatically manages the complexity of the fetch operation and caching. To manipulate data on the backend, use the [\`APICall\`](./APICall.mdx) component.`,
   props: {
     method: {
-      description: `The method by which the data fetching request is made.`,
+      description: `Set the HTTP method.`,
       defaultValue: "get",
       availableValues: httpMethodNames
     },
-    url: {
-      description: `This property represents the URL to fetch the data.`,
+    id: {
+      description: `Set the ID used by other components to access the retrieved data in the \`value\`property of a \`DataSource\`, or status info in the \`loaded\` and \`error\` properties.`,
       isRequired: true,
       valueType: "string"
     },
-    rawBody: {
-      description: `This property sets the request body to the value provided here without any conversion. Use the \`body\` property if you want the object sent in JSON. When you define \`body\` and \`rawBody\`, the latest one prevails.`,
+    url: {
+      description: `Set the URL.`,
+      isRequired: true,
       valueType: "string"
     },
     body: {
-      description: `This property sets the request body. The object you pass here will be serialized to JSON when sending the request. Use the \`rawBody\` property to send another request body using its native format. When you define \`body\` and \`rawBody\`, the latest one prevails.`
+      description: `Set the request body. The object you pass is serialized as a JSON string.`,
+      valueType: "any"
+    },
+    rawBody: {
+      description: `Set the request body with no serialization. Use it to send a payload  that has already been serialized to a JSON string.`,
+      valueType: "string"
     },
     queryParams: {
-      description: `This property sets the request body. The object you pass here will be serialized to JSON when sending the request. Use the \`rawBody\` property to send another request body using its native format. When you define \`body\` and \`rawBody\`, the latest one prevails.`
+      description: `Append key/value pairs to the URL.`,
+      valueType: "any"
     },
     headers: {
-      description: `You can define request header values as key and value pairs, where the key is the ID of the particular header and the value is that header's value.`
+      description: `Set request headers. Pass an object whose keys are header names and values are header values.`,
+      valueType: "any"
     },
     pollIntervalInSeconds: {
-      description: `By setting this property, you can define periodic data fetching. The \`DataSource\` component will refresh its data according to the time specified as seconds. When the data changes during the refresh, it will trigger the update mechanism of XMLUI and re-render the UI accordingly.`,
+      description: `Set the interval for periodic data fetching. If the data changes on refresh, XMLUI will re-render components that refer directly or indirectly to the \`DataSource\`. `,
       valueType: "number"
     },
     inProgressNotificationMessage: {
-      description: `This property defines the message to display when the data fetch operation is in progress.`,
+      description: `Set the message to display when the data fetch is in progress.`,
       valueType: "string"
     },
     completedNotificationMessage: {
-      description: `This property defines the message to display when the data fetch operation has been completed.`,
+      description: `Set the message to display when the data fetch completes.`,
       valueType: "string"
     },
     errorNotificationMessage: {
-      description: `This property defines the message to display when the data fetch operation results in an error.`,
+      description: `Set the message to display when the there is an error.`,
       valueType: "string"
     },
     resultSelector: {
-      description: `The response of a data-fetching query may include additional information that the UI cannot (or does not intend) to process. With this property, you can define a selector that extracts the data from the response body.`
+      description: `Set an object key to extract a subset of the response data.`,
+      valueType: "string"
     },
     transformResult: {
-      description: "This property accepts a transformation function that receives the data coming from the backend after it has been through the evaluation of the optional `resultSelector` property. The function gets the entire result set and can transform it. The `DataSource` component `value` property will return the data from this function."
+      description: `Set a function to perform a final transformation of the response data.`
     },
     prevPageSelector: {
       description: `When using \`${COMP$a}\` with paging, the response may contain information about the previous and next page. This property defines the selector that extracts the previous page information from the response deserialized to an object.`
@@ -18473,7 +19047,7 @@ function parseXmlUiMarkup(text2) {
       }
     }
     if (eat(SyntaxKind.Equal)) {
-      if (!eat(SyntaxKind.StringLiteral) && !eat(SyntaxKind.Identifier)) {
+      if (!eat(SyntaxKind.StringLiteral)) {
         const attrFollowWithoutIdent = [SyntaxKind.NodeEnd, SyntaxKind.NodeClose];
         errRecover(Diag_Attr_Value_Expected, attrFollowWithoutIdent);
       }
@@ -19503,7 +20077,6 @@ function nodeToComponentDef(node, originalGetText, fileId) {
     const shouldCollapseWhitespace = tagName !== "event" && tagName !== "method";
     const attrs = getAttributes(node2);
     desugarKeyOnlyAttrs(attrs);
-    desugarQuotelessAttrs(attrs, getText);
     parseEscapeCharactersInAttrValues(attrs);
     parseEscapeCharactersInContent(childNodes);
     mergeConsecutiveTexts(childNodes, shouldCollapseWhitespace);
@@ -19872,15 +20445,6 @@ function desugarKeyOnlyAttrs(attrs) {
     }
   }
 }
-function desugarQuotelessAttrs(attrs, getText) {
-  var _a, _b, _c;
-  for (let attr of attrs) {
-    const attrValue = (_a = attr.children) == null ? void 0 : _a[2];
-    if (((_c = (_b = attr.children) == null ? void 0 : _b[2]) == null ? void 0 : _c.kind) === SyntaxKind.Identifier) {
-      attrValue.text = '"' + getText(attrValue) + '"';
-    }
-  }
-}
 function addToNamespaces(namespaceStack, comp, nsKey, value) {
   let nsCommaSeparated = value.split(":");
   if (nsCommaSeparated.length > 2) {
@@ -19952,7 +20516,7 @@ function getNamespaceResolvedComponentName(node, getText, namespaceStack) {
   }
   return resolvedNamespace + "." + name;
 }
-function xmlUiMarkupToComponent(source, fileId = 0, moduleResolver) {
+function xmlUiMarkupToComponent(source, fileId = 0) {
   const { parse: parse2, getText } = createXmlUiParser(source);
   const { node, errors } = parse2();
   if (errors.length > 0) {
@@ -20480,7 +21044,8 @@ const OptionMd = createMetadata({
     ),
     enabled: dEnabled(),
     optionTemplate: d("This property is used to define a custom option template")
-  }
+  },
+  childrenAsTemplate: "optionTemplate"
 });
 const OptionNative = memo((props) => {
   const OptionType = useOptionType();