@ostack.tech/ui 0.9.1 → 0.9.2

package/dist/ostack-ui.js

@@ -1,15 +1,16 @@
-import { forwardRef, createContext, useContext, useCallback, useRef, useEffect, useId, useMemo, useState, memo, Fragment as Fragment$1, isValidElement, cloneElement, Children, useImperativeHandle, startTransition, useLayoutEffect as useLayoutEffect$1, createElement, useDeferredValue, useSyncExternalStore } from "react";
+import * as React from "react";
+import { forwardRef, createContext, useContext, useCallback, useRef, useEffect, useId, useMemo, useState, memo, Fragment as Fragment$1, isValidElement, cloneElement, Children, useImperativeHandle, startTransition, useLayoutEffect as useLayoutEffect$2, useDeferredValue, useSyncExternalStore } from "react";
 import { tinykeys, parseKeybinding } from "tinykeys";
 import fromExponential from "from-exponential";
 import { isValid, isDate, addMonths, isAfter, isBefore, startOfMonth, setMonth, getYear, setYear, startOfYear, format, isSameYear, getMonth, max, min, lastDayOfMonth, parseISO, parse, isWithinInterval, isEqual } from "date-fns";
-import { createStore, useStore, create } from "zustand";
+import { createStore, useStore as useStore$1, create } from "zustand";
 import { shallow } from "zustand/shallow";
 import { removeNumericFormat, numericFormatter, NumericFormat } from "react-number-format";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { faArrowRight, faArrowLeft, faArrowDown, faArrowUp, faClose, faTriangleExclamation, faCircleExclamation, faCircleCheck, faCircleInfo, faChevronUp, faChevronDown, faRedo, faCircleQuestion, faSortDown, faSortUp, faAsterisk, faMinus, faCheck, faFilter, faSearch, faChevronLeft, faChevronRight, faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { ErrorBoundary as ErrorBoundary$1 } from "react-error-boundary";
 import { useErrorBoundary } from "react-error-boundary";
-import { AlertDialog as AlertDialog$1, Dialog as Dialog$1, Slot as Slot$1, Portal as Portal$1, Tooltip as Tooltip$1, Toast as Toast$1, Collapsible as Collapsible$1, Popover as Popover$1, Label as Label$1, Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, Separator as Separator$1, Tabs as Tabs$1 } from "radix-ui";
+import { AlertDialog as AlertDialog$1, Dialog as Dialog$1, Slot as Slot$1, Portal as Portal$1, Tooltip as Tooltip$1, Toast as Toast$1, Collapsible as Collapsible$1, Popover as Popover$1, Label as Label$1, Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, Separator as Separator$2, Tabs as Tabs$1 } from "radix-ui";
 import { subscribeWithSelector } from "zustand/middleware";
 import { I as IS_APPLE } from "./chunks/platformUtils-C3IHCr90.js";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -18,7 +19,6 @@ import { locale as locale2 } from "./locales/en-US.js";
 import { locale as locale3, locale as locale4 } from "./locales/fr-FR.js";
 import { locale as locale5, locale as locale6 } from "./locales/pt-PT.js";
 import { useDayPicker, DayPicker } from "react-day-picker";
-import { Command } from "cmdk";
 import { useShallow } from "zustand/react/shallow";
 import { useVirtualizer, observeElementRect } from "@tanstack/react-virtual";
 import { faCalendar } from "@fortawesome/free-regular-svg-icons";
@@ -41,7 +41,7 @@ function PrefixProvider({ prefix, children }) {
   return prefix === void 0 ? children : /* @__PURE__ */ jsx(PrefixContext.Provider, { value: prefix, children });
 }
 function usePrefix() {
-  const defaultPrefix = useStore(
+  const defaultPrefix = useStore$1(
     defaultPrefixStore,
     ({ defaultPrefix: defaultPrefix2 }) => defaultPrefix2
   );
@@ -421,7 +421,7 @@ function useCreateDataTableContext({
   defaultLimit,
   limit,
   onLimitChange,
-  defaultFilter,
+  defaultFilter: defaultFilter2,
   filter,
   onFilterChange,
   defaultSortBy,
@@ -470,7 +470,7 @@ function useCreateDataTableContext({
           () => [get().pageOffset(), get().limit, get().totalCount()],
           (pageOffset, limit2, totalCount) => totalCount == null ? void 0 : Math.min(totalCount - pageOffset, limit2)
         ),
-        filter: filter ?? defaultFilter,
+        filter: filter ?? defaultFilter2,
         sortBy: initialSortBy,
         sortDirection: sortDirection ?? defaultSortDirection ?? (initialSortBy !== null && columns[initialSortBy].defaultSortDirection || "asc"),
         selectedRows: [
@@ -851,7 +851,7 @@ function useFieldContext() {
   return useContext(FieldContext);
 }
 function useFieldStore(selector) {
-  return useStore(useFieldContext() ?? EMPTY_STORE, selector);
+  return useStore$1(useFieldContext() ?? EMPTY_STORE, selector);
 }
 function useFieldControlId() {
   return useFieldStore((state) => state.controlId);
@@ -1021,7 +1021,7 @@ function useTableContext() {
 }
 function useTableNumberOfColumns() {
   const { store } = useTableContext();
-  return useStore(store, (state) => state.numberOfColumns);
+  return useStore$1(store, (state) => state.numberOfColumns);
 }
 const TableHeadContext = createContext(false);
 function useIsInTableHead() {
@@ -1801,10 +1801,12 @@ const IconButton = forwardRef(function IconButton2({
   ) : button;
 });
 const CloseButton = forwardRef(
-  function CloseIconButton({ icon, label, tooltipContent = null, className, ...otherProps }, forwardedRef) {
+  function CloseIconButton({ icon, label, className, ...otherProps }, forwardedRef) {
     const prefix = usePrefix();
     const [locale7] = useLocale();
-    label ??= locale7.CloseButton.label;
+    if (label === void 0) {
+      label = locale7.CloseButton.label;
+    }
     return /* @__PURE__ */ jsx(
       IconButton,
       {
@@ -1813,7 +1815,6 @@ const CloseButton = forwardRef(
         circle: true,
         icon: icon ?? faClose,
         label,
-        tooltipContent,
         ...otherProps,
         ref: forwardedRef
       }
@@ -2301,7 +2302,7 @@ function useCreateDocumentTitleStore(breadcrumbs) {
   return store;
 }
 function useDocumentTitleStore(selector) {
-  return useStore(useContext(DocumentTitleContext) ?? EMPTY_STORE, selector);
+  return useStore$1(useContext(DocumentTitleContext) ?? EMPTY_STORE, selector);
 }
 function DocumentTitle({ title, children }) {
   const context = useContext(DocumentTitleProviderContext);
@@ -2717,11 +2718,11 @@ const CollapsibleContext = createContext(
   null
 );
 function useCollapsibleContext() {
-  const dataTableContext = useContext(CollapsibleContext);
-  if (!dataTableContext) {
+  const collapsibleContent = useContext(CollapsibleContext);
+  if (!collapsibleContent) {
     throw new Error("Collapsible context not in scope.");
   }
-  return dataTableContext;
+  return collapsibleContent;
 }
 const Collapsible = forwardRef(function Collapsible2({
   defaultOpen,
@@ -2774,6 +2775,14 @@ const CollapsibleTrigger = forwardRef(function CollapsibleTrigger2({ children, .
   );
   return /* @__PURE__ */ jsx(Collapsible$1.Trigger, { ...props, asChild: true, ref: forwardedRef, children: typeof children === "function" ? children(open) : children });
 });
+const AlertContext = createContext(null);
+function useAlertContext() {
+  const alertContext = useContext(AlertContext);
+  if (!alertContext) {
+    throw new Error("Alert context not in scope.");
+  }
+  return alertContext;
+}
 const SEVERITY_ICON = {
   neutral: null,
   info: faCircleInfo,
@@ -2784,6 +2793,7 @@ const SEVERITY_ICON = {
 const Alert = forwardRef(function Alert2({
   variant = "subtle",
   severity = "info",
+  announce = "off",
   defaultOpen = true,
   open,
   onOpenChange,
@@ -2798,11 +2808,16 @@ const Alert = forwardRef(function Alert2({
   closeButtonProps,
   children,
   className,
+  role,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const [titleId, setTitleId] = useState();
   const accent = severity === "info" ? "primary" : severity;
-  return /* @__PURE__ */ jsx(
+  const actualRole = role ?? (announce === "assertive" ? "alert" : announce === "polite" ? "status" : void 0);
+  return /* @__PURE__ */ jsx(AlertContext, { value: { setTitleId }, children: /* @__PURE__ */ jsx(
     Collapsible,
     {
       defaultOpen,
@@ -2827,7 +2842,9 @@ const Alert = forwardRef(function Alert2({
                     className
                   ),
                   "data-accent": accent,
-                  role: "alert",
+                  role: actualRole,
+                  "aria-label": ariaLabel,
+                  "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 && (actualRole === "alert" || actualRole === "status") ? titleId : void 0),
                   ...otherProps,
                   ref: forwardedRef,
                   children: [
@@ -2844,7 +2861,10 @@ const Alert = forwardRef(function Alert2({
                       "div",
                       {
                         ...contentProps,
-                        className: cx(prefix("alert__content"), contentProps?.className),
+                        className: cx(
+                          prefix("alert__content"),
+                          contentProps?.className
+                        ),
                         children
                       }
                     ),
@@ -2880,22 +2900,33 @@ const Alert = forwardRef(function Alert2({
         }
       )
     }
-  );
+  ) });
 });
 const AlertTitle = forwardRef(function AlertTitle2({
   as = "div",
   asChild,
+  id,
   className,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const generatedId = useId();
+  const actualId = id ?? prefix(`alert-title-${generatedId}`);
+  const { setTitleId } = useAlertContext();
+  const ref = useCallback(
+    (el) => {
+      setTitleId(el ? actualId : void 0);
+    },
+    [actualId, setTitleId]
+  );
   const As = asChild ? Slot : as;
   return /* @__PURE__ */ jsx(
     As,
     {
+      id: actualId,
       className: cx(prefix("alert__title"), className),
       ...otherProps,
-      ref: forwardedRef
+      ref: combineEventHandlers(ref, forwardedRef)
     }
   );
 });
@@ -3812,7 +3843,7 @@ const Table = forwardRef(
 );
 function ColumnWidths() {
   const { store } = useTableContext();
-  const columnWidths2 = useStore(store, (state) => state.columnWidths);
+  const columnWidths2 = useStore$1(store, (state) => state.columnWidths);
   return columnWidths2 && /* @__PURE__ */ jsx("colgroup", { children: columnWidths2.map((width, i) => /* @__PURE__ */ jsx("col", { style: width != null ? { width } : void 0 }, i)) });
 }
 const TableBody = forwardRef(
@@ -4412,7 +4443,7 @@ const DataTable = forwardRef(
     defaultLimit = 10,
     limit,
     onLimitChange,
-    defaultFilter = "",
+    defaultFilter: defaultFilter2 = "",
     filter,
     onFilterChange,
     defaultSortBy = null,
@@ -4463,7 +4494,7 @@ const DataTable = forwardRef(
       defaultLimit,
       limit,
       onLimitChange,
-      defaultFilter,
+      defaultFilter: defaultFilter2,
       filter,
       onFilterChange,
       defaultSortBy,
@@ -4659,12 +4690,12 @@ function useCheckboxGroupContext() {
 }
 function useIsCheckedInGroup(checkboxValue) {
   const store = useCheckboxGroupContext()?.store ?? EMPTY_STORE;
-  const handleCheckedChange = useStore(
+  const handleCheckedChange = useStore$1(
     store,
     (state) => state.actions?.handleCheckedChange
   );
   return [
-    useStore(store, (state) => state.value?.includes(checkboxValue)),
+    useStore$1(store, (state) => state.value?.includes(checkboxValue)),
     useMemo(
       () => handleCheckedChange && ((checked) => handleCheckedChange(checkboxValue, checked)),
       [checkboxValue, handleCheckedChange]
@@ -4675,13 +4706,13 @@ function useIsRequiredInGroup() {
   const context = useCheckboxGroupContext();
   const store = context?.store ?? EMPTY_STORE;
   const required = context?.required;
-  return useStore(store, (state) => required && state.value.length === 0);
+  return useStore$1(store, (state) => required && state.value.length === 0);
 }
 function useCheckboxGroupDescriptionIds(checkboxId) {
   const context = useCheckboxGroupContext();
   const store = context?.store ?? EMPTY_STORE;
   const descriptionIds = context?.descriptionIds;
-  const isFirstCheckbox = useStore(
+  const isFirstCheckbox = useStore$1(
     store,
     (state) => state.firstCheckboxId === checkboxId
   );
@@ -5071,16 +5102,16 @@ const DATA_TABLE_SELECTION_COLUMN_WIDTH = 42;
 function useDataTableSelectionColumn() {
   const prefix = usePrefix();
   const { displayMode, rowKey, showSelectionColumn, store } = useDataTableContext();
-  const [selectedRows] = useStore(store, (state) => state.selectedRows);
-  const disabledSelections = useStore(
+  const [selectedRows] = useStore$1(store, (state) => state.selectedRows);
+  const disabledSelections = useStore$1(
     store,
     (state) => state.disabledSelections
   );
-  const { selectRows, unselectRows } = useStore(
+  const { selectRows, unselectRows } = useStore$1(
     store,
     (state) => state.actions
   );
-  const allCheckedStatus = useStore(
+  const allCheckedStatus = useStore$1(
     store,
     useShallow((state) => {
       if (state.loading || !showSelectionColumn) {
@@ -5174,7 +5205,7 @@ const DataTableRow = memo(
       const { rowKey, renderCell, generatedId, estimatedRowHeight, store } = useDataTableContext();
       const selectionColumn = useDataTableSelectionColumn();
       const dataTableSelectionColumnId = useDataTableSelectionColumnId();
-      const leafColumns2 = useStore(
+      const leafColumns2 = useStore$1(
         store,
         useShallow(
           (state) => selectionColumn ? {
@@ -5183,9 +5214,9 @@ const DataTableRow = memo(
           } : state.leafColumns
         )
       );
-      const headCount = useStore(store, (state) => state.headCount);
-      const filter = useStore(store, (state) => state.filter);
-      const selected = useStore(
+      const headCount = useStore$1(store, (state) => state.headCount);
+      const filter = useStore$1(store, (state) => state.filter);
+      const selected = useStore$1(
         store,
         (state) => row && state.selectedRows[0].has(getRowKey(row, rowKey))
       );
@@ -5274,8 +5305,8 @@ function DataTableEmptyOrLoadingRows({
 }) {
   const prefix = usePrefix();
   const { showSelectionColumn, renderRow, store, apiRef } = useDataTableContext();
-  const loading = useStore(store, (state) => state.loading);
-  const loadingCount = useStore(store, (state) => state.loadingCount);
+  const loading = useStore$1(store, (state) => state.loading);
+  const loadingCount = useStore$1(store, (state) => state.loadingCount);
   const numberOfColumns2 = (useTableNumberOfColumns() ?? 1) + (showSelectionColumn ? 1 : 0);
   useImperativeHandle(
     apiRef,
@@ -5339,11 +5370,11 @@ function PagedDataTableRows() {
     ),
     [goTo, store]
   );
-  const pageOffset = useStore(
+  const pageOffset = useStore$1(
     store,
     (state) => showAllRows ? 0 : state.pageOffset()
   );
-  const rowsWindow = useStore(
+  const rowsWindow = useStore$1(
     store,
     useShallow(
       (state) => state.rowsWindow(
@@ -5370,8 +5401,8 @@ function ScrolledDataTableRows({
     apiRef,
     store
   } = useDataTableContext();
-  const tableHeadHeight = useStore(store, (state) => state.tableHeadHeight);
-  const bodyCount = useStore(store, (state) => state.bodyCount());
+  const tableHeadHeight = useStore$1(store, (state) => state.tableHeadHeight);
+  const bodyCount = useStore$1(store, (state) => state.bodyCount());
   const virtualizer = useVirtualizer({
     count: bodyCount,
     getScrollElement: useCallback(() => scrollableRef.current, [scrollableRef]),
@@ -5462,7 +5493,7 @@ function ScrolledDataTableRows({
   const virtualItems = virtualizer.getVirtualItems();
   const firstVirtualItem = virtualItems[0];
   const lastVirtualItem = virtualItems[virtualItems.length - 1];
-  const rowsWindow = useStore(
+  const rowsWindow = useStore$1(
     store,
     useShallow(
       (state) => state.rowsWindow(firstVirtualItem?.index ?? 0, virtualItems.length)
@@ -5524,7 +5555,7 @@ function ScrolledDataTableRows({
 }
 const DataTableBody = forwardRef(function DataTableBody2({ emptyMessage, emptyMessageProps, scrollableRef, ...otherProps }, forwardedRef) {
   const { displayMode, store } = useDataTableContext();
-  const isEmptyOrLoading = useStore(
+  const isEmptyOrLoading = useStore$1(
     store,
     (state) => state.loading || state.totalCount() === 0
   );
@@ -5539,10 +5570,10 @@ const DataTableBody = forwardRef(function DataTableBody2({ emptyMessage, emptyMe
     !isEmptyOrLoading && (displayMode === "paged" ? /* @__PURE__ */ jsx(PagedDataTableRows, {}) : /* @__PURE__ */ jsx(ScrolledDataTableRows, { scrollableRef }))
   ] });
 });
-const useLayoutEffect = typeof document !== "undefined" ? useLayoutEffect$1 : () => {
+const useLayoutEffect$1 = typeof document !== "undefined" ? useLayoutEffect$2 : () => {
 };
 function useMeasure(element, setMeasurement) {
-  useLayoutEffect(() => {
+  useLayoutEffect$1(() => {
     if (!element) {
       setMeasurement(void 0);
       return;
@@ -5560,7 +5591,7 @@ function useMeasure(element, setMeasurement) {
 }
 const DataTableFoot = forwardRef(function DataTableFoot2({ showWhenEmpty, ...otherProps }, forwardedRef) {
   const { store } = useDataTableContext();
-  const shouldShow = useStore(
+  const shouldShow = useStore$1(
     store,
     (state) => showWhenEmpty || !state.loading && (state.totalCount() ?? 0) > 0
   );
@@ -5579,7 +5610,7 @@ const DataTableHead = forwardRef(function DataTableHead2({ rowProps, ...otherPro
   const { generatedId, store } = useDataTableContext();
   const selectionColumn = useDataTableSelectionColumn();
   const dataTableSelectionColumnId = useDataTableSelectionColumnId();
-  const columns = useStore(
+  const columns = useStore$1(
     store,
     useShallow(
       (state) => selectionColumn ? {
@@ -5588,9 +5619,9 @@ const DataTableHead = forwardRef(function DataTableHead2({ rowProps, ...otherPro
       } : state.columns
     )
   );
-  const sortBy = useStore(store, (state) => state.sortBy);
-  const sortDirection = useStore(store, (state) => state.sortDirection);
-  const { setSort } = useStore(store, (state) => state.actions);
+  const sortBy = useStore$1(store, (state) => state.sortBy);
+  const sortDirection = useStore$1(store, (state) => state.sortDirection);
+  const { setSort } = useStore$1(store, (state) => state.actions);
   const [tableHeadEl, setTableHeadEl] = useState(null);
   useMeasure(
     tableHeadEl,
@@ -5678,7 +5709,7 @@ const DataTableContent = forwardRef(function DataTable2({
   const scrollableRef = useRef(null);
   const { height: scrollbarHeight } = useScrollbarSize();
   const rowHeight = typeof estimatedRowHeight === "number" ? estimatedRowHeight : estimatedRowHeight(0);
-  const maxHeight = useStore(
+  const maxHeight = useStore$1(
     store,
     (state) => displayMode === "scrolled" && !state.loading && (state.totalCount() ?? 0) > state.limit ? (state.tableHeadHeight ?? rowHeight) + (state.tableFootHeight ?? 0) + rowHeight * state.limit + // TODO: Only add this if the container overflows horizontally
     scrollbarHeight : void 0
@@ -5755,12 +5786,12 @@ const DataTableFilter = forwardRef(function DataTableFilter2({
   ariaLabel ??= locale7.DataTableFilter["aria-label"];
   placeholder ??= locale7.DataTableFilter.placeholder;
   const { store } = useDataTableContext();
-  const filter = useStore(store, (state) => state.filter);
+  const filter = useStore$1(store, (state) => state.filter);
   const handleFilterChange = (value) => {
     startTransition(() => store.getState().actions.setFilter(value));
   };
   return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsx(
-    Input,
+    Input$1,
     {
       placeholder,
       showClearButton: "auto",
@@ -5794,11 +5825,11 @@ const PagedDataTablePagination = forwardRef(function PagedDataTablePagination2({
 }, forwardedRef) {
   const prefix = usePrefix();
   const { store } = useDataTableContext();
-  const totalCount = useStore(store, (state) => state.totalCount());
-  const limit = useStore(store, (state) => state.limit);
-  const { setOffset } = useStore(store, (state) => state.actions);
+  const totalCount = useStore$1(store, (state) => state.totalCount());
+  const limit = useStore$1(store, (state) => state.limit);
+  const { setOffset } = useStore$1(store, (state) => state.actions);
   const setOffsetWithTransition = (offset) => startTransition(() => setOffset(offset));
-  const currentPage = useStore(store, (state) => state.currentPage());
+  const currentPage = useStore$1(store, (state) => state.currentPage());
   const numberOfPages = Math.ceil((totalCount ?? 0) / limit);
   const lastPage = Math.max(0, numberOfPages - 1);
   return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsxs(
@@ -5872,12 +5903,12 @@ const PagedDataTablePagination = forwardRef(function PagedDataTablePagination2({
 const ScrolledDataTablePagination = forwardRef(function ScrolledDataTablePagination2({ rowsRange, preferRightAlignment, className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   const { store } = useDataTableContext();
-  const totalCount = useStore(store, (state) => state.totalCount());
-  const scrolledRangeStart = useStore(
+  const totalCount = useStore$1(store, (state) => state.totalCount());
+  const scrolledRangeStart = useStore$1(
     store,
     (state) => state.scrolledRangeStart
   );
-  const scrolledRangeEnd = useStore(store, (state) => state.scrolledRangeEnd);
+  const scrolledRangeEnd = useStore$1(store, (state) => state.scrolledRangeEnd);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5947,8 +5978,8 @@ const DataTableRowsPerPage = forwardRef(function DataTableRowsPerPage2({
   const [locale7] = useLocale();
   label ??= locale7.DataTableRowsPerPage.label;
   const { store } = useDataTableContext();
-  const limit = useStore(store, (state) => state.limit);
-  const { setLimit } = useStore(store, (state) => state.actions);
+  const limit = useStore$1(store, (state) => state.limit);
+  const { setLimit } = useStore$1(store, (state) => state.actions);
   const optionsIncludingLimit = limitOptions.includes(limit) ? [...limitOptions] : [...limitOptions, limit];
   optionsIncludingLimit.sort((v1, v2) => v1 - v2);
   const selectId = prefix(`data-table-rows-per-page-${useId()}`);
@@ -5999,7 +6030,7 @@ const DataTableSelectionTrigger = forwardRef(function DataTableSelectionTrigger2
 }, forwardedRef) {
   const prefix = usePrefix();
   const { store } = useDataTableContext();
-  const hasSelected = useStore(store, (state) => state.selectedRows.length > 0);
+  const hasSelected = useStore$1(store, (state) => state.selectedRows.length > 0);
   const handleClick = useCallback(
     (event) => {
       onClick(Array.from(store.getState().selectedRows[0]).sort(), event);
@@ -6023,7 +6054,7 @@ const DataTableSelectionTrigger = forwardRef(function DataTableSelectionTrigger2
 const REQUIRED_TAGS = ["INPUT", "SELECT", "TEXTAREA"];
 const READ_ONLY_TAGS = ["INPUT", "TEXTAREA"];
 const NON_READONLY_INPUT_TYPES = ["file", "color"];
-const Input = forwardRef(
+const Input$1 = forwardRef(
   function Input2({
     asChild,
     type,
@@ -6039,6 +6070,7 @@ const Input = forwardRef(
     startAdornment,
     endAdornment,
     showClearButton,
+    clearDescription,
     clearButtonLabel,
     onValueChange,
     onBlurToOutside,
@@ -6163,6 +6195,7 @@ const Input = forwardRef(
       }
     }, [inputEl]);
     const hasClearButton = !disabled && !loading && !readOnly && (showClearButton === true || showClearButton === "auto" && (isControlled ? (value?.toString() ?? "")?.length > 0 : shouldShowClearButton));
+    const clearDescriptionId = hasClearButton && clearDescription && prefix(`control-clear-${generatedId}`);
     const { cssVars, dataAttrs } = responsiveValuesToCssVarsAndDataAttrs(
       "control",
       { align }
@@ -6263,7 +6296,8 @@ const Input = forwardRef(
                             loadingDescriptionId,
                             errorMessageIds,
                             ariaDescribedBy,
-                            descriptionIds
+                            descriptionIds,
+                            clearDescriptionId
                           ),
                           ...otherProps,
                           ref: combinedInputRef
@@ -6318,13 +6352,14 @@ const Input = forwardRef(
           )
         }
       ),
-      loadingDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: loadingDescriptionId, children: loadingDescription })
+      loadingDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: loadingDescriptionId, children: loadingDescription }),
+      clearDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: clearDescriptionId, children: clearDescription })
     ] });
   }
 );
 const InputWithContainerRef = forwardRef(function InputWithContainerRef2({ inputRef, containerProps, ...otherProps }, forwardedRef) {
   return /* @__PURE__ */ jsx(
-    Input,
+    Input$1,
     {
       containerProps: {
         ...containerProps,
@@ -6549,6 +6584,852 @@ const MenuListItem = forwardRef(
     );
   }
 );
+var SCORE_CONTINUE_MATCH = 1, SCORE_SPACE_WORD_JUMP = 0.9, SCORE_NON_SPACE_WORD_JUMP = 0.8, SCORE_CHARACTER_JUMP = 0.17, SCORE_TRANSPOSITION = 0.1, PENALTY_SKIPPED = 0.999, PENALTY_CASE_MISMATCH = 0.9999, PENALTY_NOT_COMPLETE = 0.99;
+var IS_GAP_REGEXP = /[\\\/_+.#"@\[\(\{&]/, COUNT_GAPS_REGEXP = /[\\\/_+.#"@\[\(\{&]/g, IS_SPACE_REGEXP = /[\s-]/, COUNT_SPACE_REGEXP = /[\s-]/g;
+function commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, stringIndex, abbreviationIndex, memoizedResults) {
+  if (abbreviationIndex === abbreviation.length) {
+    if (stringIndex === string.length) {
+      return SCORE_CONTINUE_MATCH;
+    }
+    return PENALTY_NOT_COMPLETE;
+  }
+  var memoizeKey = `${stringIndex},${abbreviationIndex}`;
+  if (memoizedResults[memoizeKey] !== void 0) {
+    return memoizedResults[memoizeKey];
+  }
+  var abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);
+  var index = lowerString.indexOf(abbreviationChar, stringIndex);
+  var highScore = 0;
+  var score, transposedScore, wordBreaks, spaceBreaks;
+  while (index >= 0) {
+    score = commandScoreInner(
+      string,
+      abbreviation,
+      lowerString,
+      lowerAbbreviation,
+      index + 1,
+      abbreviationIndex + 1,
+      memoizedResults
+    );
+    if (score > highScore) {
+      if (index === stringIndex) {
+        score *= SCORE_CONTINUE_MATCH;
+      } else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
+        score *= SCORE_NON_SPACE_WORD_JUMP;
+        wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP);
+        if (wordBreaks && stringIndex > 0) {
+          score *= Math.pow(PENALTY_SKIPPED, wordBreaks.length);
+        }
+      } else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
+        score *= SCORE_SPACE_WORD_JUMP;
+        spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP);
+        if (spaceBreaks && stringIndex > 0) {
+          score *= Math.pow(PENALTY_SKIPPED, spaceBreaks.length);
+        }
+      } else {
+        score *= SCORE_CHARACTER_JUMP;
+        if (stringIndex > 0) {
+          score *= Math.pow(PENALTY_SKIPPED, index - stringIndex);
+        }
+      }
+      if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {
+        score *= PENALTY_CASE_MISMATCH;
+      }
+    }
+    if (score < SCORE_TRANSPOSITION && lowerString.charAt(index - 1) === lowerAbbreviation.charAt(abbreviationIndex + 1) || lowerAbbreviation.charAt(abbreviationIndex + 1) === lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428
+    lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex)) {
+      transposedScore = commandScoreInner(
+        string,
+        abbreviation,
+        lowerString,
+        lowerAbbreviation,
+        index + 1,
+        abbreviationIndex + 2,
+        memoizedResults
+      );
+      if (transposedScore * SCORE_TRANSPOSITION > score) {
+        score = transposedScore * SCORE_TRANSPOSITION;
+      }
+    }
+    if (score > highScore) {
+      highScore = score;
+    }
+    index = lowerString.indexOf(abbreviationChar, index + 1);
+  }
+  memoizedResults[memoizeKey] = highScore;
+  return highScore;
+}
+function formatInput(string) {
+  return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ");
+}
+function commandScore(string, abbreviation, aliases) {
+  string = aliases && aliases.length > 0 ? `${string + " " + aliases.join(" ")}` : string;
+  return commandScoreInner(
+    string,
+    abbreviation,
+    formatInput(string),
+    formatInput(abbreviation),
+    0,
+    0,
+    {}
+  );
+}
+const GROUP_SELECTOR = `[cmdk-group=""]`;
+const GROUP_ITEMS_SELECTOR = `[cmdk-group-items=""]`;
+const GROUP_HEADING_SELECTOR = `[cmdk-group-heading=""]`;
+const ITEM_SELECTOR = `[cmdk-item=""]`;
+const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`;
+const SELECT_EVENT = `cmdk-item-select`;
+const VALUE_ATTR = `data-value`;
+const defaultFilter = (value, search, keywords) => commandScore(value, search, keywords);
+const CommandContext = React.createContext(void 0);
+const useCommand = () => React.useContext(CommandContext);
+const StoreContext = React.createContext(void 0);
+const useStore = () => React.useContext(StoreContext);
+const GroupContext = React.createContext(void 0);
+const Command = React.forwardRef(
+  (props, forwardedRef) => {
+    const state = useLazyRef(() => ({
+      /** Value of the search query. */
+      search: "",
+      /** Currently selected item value. */
+      value: props.value ?? props.defaultValue ?? "",
+      /** Currently selected item id. */
+      selectedItemId: void 0,
+      filtered: {
+        /** The count of all visible items. */
+        count: 0,
+        /** Map from visible item id to its search score. */
+        items: /* @__PURE__ */ new Map(),
+        /** Set of groups with at least one visible item. */
+        groups: /* @__PURE__ */ new Set()
+      }
+    }));
+    const allItems = useLazyRef(() => /* @__PURE__ */ new Set());
+    const allGroups = useLazyRef(() => /* @__PURE__ */ new Map());
+    const ids = useLazyRef(
+      () => /* @__PURE__ */ new Map()
+    );
+    const listeners = useLazyRef(() => /* @__PURE__ */ new Set());
+    const propsRef = useAsRef(props);
+    const {
+      asChild,
+      label,
+      children,
+      value,
+      onValueChange,
+      filter,
+      shouldFilter,
+      loop,
+      disablePointerSelection = false,
+      ...etc
+    } = props;
+    const listId = React.useId();
+    const labelId = React.useId();
+    const inputId = React.useId();
+    const listInnerRef = React.useRef(null);
+    const schedule = useScheduleLayoutEffect();
+    useLayoutEffect(() => {
+      if (value !== void 0) {
+        const v = value.trim();
+        state.current.value = v;
+        store.emit();
+      }
+    }, [value]);
+    useLayoutEffect(() => {
+      setTimeout(() => {
+        schedule(6, scrollSelectedIntoView);
+      });
+    }, []);
+    const store = React.useMemo(() => {
+      return {
+        subscribe: (cb) => {
+          listeners.current.add(cb);
+          return () => listeners.current.delete(cb);
+        },
+        snapshot: () => {
+          return state.current;
+        },
+        setState: (key, value2, opts) => {
+          if (Object.is(state.current[key], value2)) return;
+          state.current[key] = value2;
+          if (key === "search") {
+            filterItems();
+            sort();
+            schedule(1, selectFirstItem);
+          } else if (key === "value") {
+            if (document.activeElement.hasAttribute("cmdk-input") || document.activeElement.hasAttribute("cmdk-root")) {
+              const input = document.getElementById(inputId);
+              if (input) input.focus();
+              else document.getElementById(listId)?.focus();
+            }
+            schedule(7, () => {
+              state.current.selectedItemId = opts.id;
+              store.emit();
+            });
+            if (!opts.disableScrollIntoView) {
+              schedule(5, () => scrollSelectedIntoView(opts.id));
+            }
+            if (propsRef.current?.value !== void 0) {
+              const newValue = value2 ?? "";
+              propsRef.current.onValueChange?.(newValue);
+              return;
+            }
+          }
+          store.emit();
+        },
+        emit: () => {
+          listeners.current.forEach((l) => l());
+        }
+      };
+    }, []);
+    const context = React.useMemo(
+      () => ({
+        // Keep id → {value, keywords} mapping up-to-date
+        value: (id, value2, keywords) => {
+          if (value2 !== ids.current.get(id)?.value) {
+            ids.current.set(id, { value: value2, keywords });
+            state.current.filtered.items.set(id, score(value2, keywords));
+            schedule(2, () => {
+              sort();
+              store.emit();
+            });
+          }
+        },
+        // Track item lifecycle (mount, unmount)
+        item: (id, groupId) => {
+          allItems.current.add(id);
+          if (groupId) {
+            if (!allGroups.current.has(groupId)) {
+              allGroups.current.set(groupId, /* @__PURE__ */ new Set([id]));
+            } else {
+              allGroups.current.get(groupId).add(id);
+            }
+          }
+          schedule(3, () => {
+            filterItems();
+            sort();
+            if (!state.current.value) {
+              selectFirstItem();
+            }
+            store.emit();
+          });
+          return () => {
+            ids.current.delete(id);
+            allItems.current.delete(id);
+            state.current.filtered.items.delete(id);
+            const selectedItem = getSelectedItem();
+            schedule(4, () => {
+              filterItems();
+              if (selectedItem?.getAttribute("id") === id) selectFirstItem();
+              store.emit();
+            });
+          };
+        },
+        // Track group lifecycle (mount, unmount)
+        group: (id) => {
+          if (!allGroups.current.has(id)) {
+            allGroups.current.set(id, /* @__PURE__ */ new Set());
+          }
+          return () => {
+            ids.current.delete(id);
+            allGroups.current.delete(id);
+          };
+        },
+        filter: () => {
+          return propsRef.current.shouldFilter;
+        },
+        label: label || props["aria-label"],
+        getDisablePointerSelection: () => {
+          return propsRef.current.disablePointerSelection;
+        },
+        listId,
+        inputId,
+        labelId,
+        listInnerRef
+      }),
+      []
+    );
+    function score(value2, keywords) {
+      const filter2 = propsRef.current?.filter ?? defaultFilter;
+      return value2 ? filter2(value2, state.current.search, keywords) : 0;
+    }
+    function sort() {
+      if (!state.current.search || // Explicitly false, because true | undefined is the default
+      propsRef.current.shouldFilter === false) {
+        return;
+      }
+      const scores = state.current.filtered.items;
+      const groups = [];
+      state.current.filtered.groups.forEach((value2) => {
+        const items = allGroups.current.get(value2);
+        let max2 = 0;
+        items.forEach((item) => {
+          const score2 = scores.get(item);
+          max2 = Math.max(score2, max2);
+        });
+        groups.push([value2, max2]);
+      });
+      const listInsertionElement = listInnerRef.current;
+      getValidItems().sort((a, b) => {
+        const valueA = a.getAttribute("id");
+        const valueB = b.getAttribute("id");
+        return (scores.get(valueB) ?? 0) - (scores.get(valueA) ?? 0);
+      }).forEach((item) => {
+        const group = item.closest(GROUP_ITEMS_SELECTOR);
+        if (group) {
+          group.appendChild(
+            item.parentElement === group ? item : item.closest(`${GROUP_ITEMS_SELECTOR} > *`)
+          );
+        } else {
+          listInsertionElement.appendChild(
+            item.parentElement === listInsertionElement ? item : item.closest(`${GROUP_ITEMS_SELECTOR} > *`)
+          );
+        }
+      });
+      groups.sort((a, b) => b[1] - a[1]).forEach((group) => {
+        const element = listInnerRef.current?.querySelector(
+          `${GROUP_SELECTOR}[${VALUE_ATTR}="${encodeURIComponent(group[0])}"]`
+        );
+        element?.parentElement.appendChild(element);
+      });
+    }
+    function selectFirstItem() {
+      const item = getValidItems().find(
+        (item2) => item2.getAttribute("aria-disabled") !== "true"
+      );
+      const value2 = item?.getAttribute(VALUE_ATTR);
+      store.setState("value", value2 || void 0, {
+        id: item?.getAttribute("id")
+      });
+    }
+    function filterItems() {
+      if (!state.current.search || // Explicitly false, because true | undefined is the default
+      propsRef.current.shouldFilter === false) {
+        state.current.filtered.count = allItems.current.size;
+        return;
+      }
+      state.current.filtered.groups = /* @__PURE__ */ new Set();
+      let itemCount = 0;
+      for (const id of allItems.current) {
+        const value2 = ids.current.get(id)?.value ?? "";
+        const keywords = ids.current.get(id)?.keywords ?? [];
+        const rank = score(value2, keywords);
+        state.current.filtered.items.set(id, rank);
+        if (rank > 0) itemCount++;
+      }
+      for (const [groupId, group] of allGroups.current) {
+        for (const itemId of group) {
+          if (state.current.filtered.items.get(itemId) > 0) {
+            state.current.filtered.groups.add(groupId);
+            break;
+          }
+        }
+      }
+      state.current.filtered.count = itemCount;
+    }
+    function scrollSelectedIntoView(itemId) {
+      const item = itemId ? document.getElementById(itemId) : getSelectedItem();
+      if (item) {
+        if (item.parentElement?.firstChild === item) {
+          item.closest(GROUP_SELECTOR)?.querySelector(GROUP_HEADING_SELECTOR)?.scrollIntoView({ block: "nearest" });
+        }
+        item.scrollIntoView({ block: "nearest" });
+      }
+    }
+    function getSelectedItem() {
+      return listInnerRef.current?.querySelector(
+        `${ITEM_SELECTOR}[data-selected]`
+      );
+    }
+    function getValidItems() {
+      return Array.from(
+        listInnerRef.current?.querySelectorAll(VALID_ITEM_SELECTOR) || []
+      );
+    }
+    function updateSelectedToIndex(index) {
+      const items = getValidItems();
+      const item = items[index];
+      if (item)
+        store.setState("value", item.getAttribute(VALUE_ATTR), {
+          id: item.getAttribute("id")
+        });
+    }
+    function updateSelectedByItem(change) {
+      const selected = getSelectedItem();
+      const items = getValidItems();
+      const index = selected ? items.findIndex((item) => item === selected) : -1;
+      let newIndex = index === -1 ? change > 0 ? 0 : items.length - 1 : index + change;
+      if (propsRef.current?.loop) {
+        newIndex = newIndex < 0 ? items.length - 1 : newIndex >= items.length ? 0 : newIndex;
+      } else {
+        newIndex = Math.max(0, Math.min(newIndex, items.length - 1));
+      }
+      let newSelected = items[newIndex];
+      if (newSelected)
+        store.setState("value", newSelected.getAttribute(VALUE_ATTR), {
+          id: newSelected.getAttribute("id")
+        });
+    }
+    function updateSelectedByGroup(change) {
+      const selected = getSelectedItem();
+      let group = selected?.closest(GROUP_SELECTOR);
+      let item;
+      while (group && !item) {
+        group = change > 0 ? findNextSibling(group, GROUP_SELECTOR) : findPreviousSibling(group, GROUP_SELECTOR);
+        item = group?.querySelector(VALID_ITEM_SELECTOR);
+      }
+      if (item) {
+        store.setState("value", item.getAttribute(VALUE_ATTR), {
+          id: item.getAttribute("id")
+        });
+      } else {
+        updateSelectedByItem(change);
+      }
+    }
+    const last = () => updateSelectedToIndex(getValidItems().length - 1);
+    const next = (e) => {
+      e.preventDefault();
+      if (e.metaKey) {
+        last();
+      } else if (e.altKey) {
+        updateSelectedByGroup(1);
+      } else {
+        updateSelectedByItem(1);
+      }
+    };
+    const prev = (e) => {
+      e.preventDefault();
+      if (e.metaKey) {
+        updateSelectedToIndex(0);
+      } else if (e.altKey) {
+        updateSelectedByGroup(-1);
+      } else {
+        updateSelectedByItem(-1);
+      }
+    };
+    const As = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsxs(
+      As,
+      {
+        ref: forwardedRef,
+        tabIndex: -1,
+        ...etc,
+        "cmdk-root": "",
+        onKeyDown: (e) => {
+          etc.onKeyDown?.(e);
+          const isComposing = e.nativeEvent.isComposing || e.keyCode === 229;
+          if (e.defaultPrevented || isComposing) {
+            return;
+          }
+          switch (e.key) {
+            case "ArrowDown": {
+              next(e);
+              break;
+            }
+            case "ArrowUp": {
+              prev(e);
+              break;
+            }
+            case "Home": {
+              e.preventDefault();
+              updateSelectedToIndex(0);
+              break;
+            }
+            case "End": {
+              e.preventDefault();
+              last();
+              break;
+            }
+            case "Enter": {
+              e.preventDefault();
+              const item = getSelectedItem();
+              if (item) {
+                const event = new Event(SELECT_EVENT);
+                item.dispatchEvent(event);
+              }
+            }
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              "cmdk-label": "",
+              htmlFor: context.inputId,
+              id: context.labelId,
+              style: srOnlyStyles,
+              children: label
+            }
+          ),
+          SlottableWithNestedChildren(props, (child) => /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(CommandContext.Provider, { value: context, children: child }) }))
+        ]
+      }
+    );
+  }
+);
+const Item = React.forwardRef(
+  (props, forwardedRef) => {
+    const id = React.useId();
+    const ref = React.useRef(null);
+    const groupContext = React.useContext(GroupContext);
+    const context = useCommand();
+    const propsRef = useAsRef(props);
+    const forceMount = propsRef.current?.forceMount ?? groupContext?.forceMount;
+    useLayoutEffect(() => {
+      if (!forceMount) {
+        return context.item(id, groupContext?.id);
+      }
+    }, [forceMount]);
+    const value = useValue(
+      id,
+      ref,
+      [props.value, props.children, ref],
+      props.keywords
+    );
+    const store = useStore();
+    const selected = useCmdk(
+      (state) => state.value && state.value === value.current
+    );
+    const render = useCmdk(
+      (state) => forceMount ? true : context.filter() === false ? true : !state.search ? true : state.filtered.items.get(id) > 0
+    );
+    React.useEffect(() => {
+      const element = ref.current;
+      if (!element || props.disabled) return;
+      element.addEventListener(SELECT_EVENT, onSelect);
+      return () => element.removeEventListener(SELECT_EVENT, onSelect);
+    }, [render, props.onSelect, props.disabled]);
+    function onSelect() {
+      select();
+      propsRef.current.onSelect?.(value.current);
+    }
+    function select() {
+      store.setState("value", value.current, {
+        id,
+        disableScrollIntoView: true
+      });
+    }
+    const combinedRef = useCombinedRef(ref, forwardedRef);
+    if (!render) return null;
+    const {
+      asChild,
+      disabled,
+      value: _,
+      onSelect: __,
+      forceMount: ___,
+      keywords: ____,
+      ...etc
+    } = props;
+    const As = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      As,
+      {
+        ref: combinedRef,
+        id,
+        "cmdk-item": "",
+        role: "option",
+        "aria-disabled": Boolean(disabled) || void 0,
+        "aria-selected": Boolean(selected) || void 0,
+        "data-disabled": boolDataAttr(disabled),
+        "data-selected": boolDataAttr(selected),
+        ...etc,
+        onPointerMove: disabled || context.getDisablePointerSelection() ? void 0 : select,
+        onClick: disabled ? void 0 : onSelect,
+        children: props.children
+      }
+    );
+  }
+);
+const Group = React.forwardRef(
+  (props, forwardedRef) => {
+    const { asChild, heading, children, forceMount, ...etc } = props;
+    const id = React.useId();
+    const ref = React.useRef(null);
+    const headingRef = React.useRef(null);
+    const headingId = React.useId();
+    const context = useCommand();
+    const render = useCmdk(
+      (state) => forceMount ? true : context.filter() === false ? true : !state.search ? true : state.filtered.groups.has(id)
+    );
+    useLayoutEffect(() => {
+      return context.group(id);
+    }, []);
+    useValue(id, ref, [props.value, props.heading, headingRef]);
+    const contextValue = React.useMemo(
+      () => ({ id, forceMount }),
+      [forceMount]
+    );
+    const combinedRef = useCombinedRef(ref, forwardedRef);
+    const As = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsxs(
+      As,
+      {
+        ref: combinedRef,
+        "cmdk-group": "",
+        role: "presentation",
+        hidden: render ? void 0 : true,
+        ...etc,
+        children: [
+          heading && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: headingRef,
+              "cmdk-group-heading": "",
+              "aria-hidden": true,
+              id: headingId,
+              children: heading
+            }
+          ),
+          SlottableWithNestedChildren(props, (child) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "cmdk-group-items": "",
+              role: "group",
+              "aria-labelledby": heading ? headingId : void 0,
+              children: /* @__PURE__ */ jsx(GroupContext.Provider, { value: contextValue, children: child })
+            }
+          ))
+        ]
+      }
+    );
+  }
+);
+const Separator$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { asChild, alwaysRender, ...etc } = props;
+    const ref = React.useRef(null);
+    const render = useCmdk((state) => !state.search);
+    const combinedRef = useCombinedRef(ref, forwardedRef);
+    if (!alwaysRender && !render) return null;
+    const As = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(As, { ref: combinedRef, "cmdk-separator": "", role: "separator", ...etc });
+  }
+);
+const Input = React.forwardRef(
+  (props, forwardedRef) => {
+    const { asChild, onValueChange, ...etc } = props;
+    const isControlled = props.value != null;
+    const store = useStore();
+    const search = useCmdk((state) => state.search);
+    const selectedItemId = useCmdk((state) => state.selectedItemId);
+    const context = useCommand();
+    React.useEffect(() => {
+      if (props.value != null) {
+        store.setState("search", props.value);
+      }
+    }, [props.value]);
+    const As = asChild ? Slot : "input";
+    return /* @__PURE__ */ jsx(
+      As,
+      {
+        ref: forwardedRef,
+        "cmdk-input": "",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: false,
+        "aria-autocomplete": "list",
+        role: "combobox",
+        "aria-expanded": true,
+        "aria-controls": context.listId,
+        "aria-labelledby": context.labelId,
+        "aria-activedescendant": selectedItemId,
+        id: context.inputId,
+        type: "text",
+        value: isControlled ? props.value : search,
+        ...etc,
+        onChange: (e) => {
+          if (!isControlled) {
+            store.setState("search", e.target.value);
+          }
+          onValueChange?.(e.target.value);
+        }
+      }
+    );
+  }
+);
+const List = React.forwardRef(
+  (props, forwardedRef) => {
+    const { asChild, children, label = "Suggestions", ...etc } = props;
+    const ref = React.useRef(null);
+    const height = React.useRef(null);
+    const selectedItemId = useCmdk((state) => state.selectedItemId);
+    const context = useCommand();
+    React.useEffect(() => {
+      if (height.current && ref.current) {
+        const el = height.current;
+        const wrapper = ref.current;
+        let animationFrame;
+        const observer = new ResizeObserver(() => {
+          animationFrame = requestAnimationFrame(() => {
+            const height2 = el.offsetHeight;
+            wrapper.style.setProperty(
+              `--cmdk-list-height`,
+              height2.toFixed(1) + "px"
+            );
+          });
+        });
+        observer.observe(el);
+        return () => {
+          cancelAnimationFrame(animationFrame);
+          observer.unobserve(el);
+        };
+      }
+    }, []);
+    const combinedRef = useCombinedRef(ref, forwardedRef);
+    const combinedListSizerRef = useCombinedRef(height, context.listInnerRef);
+    const As = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      As,
+      {
+        ref: combinedRef,
+        "cmdk-list": "",
+        role: "listbox",
+        tabIndex: -1,
+        "aria-activedescendant": selectedItemId,
+        "aria-label": label,
+        id: context.listId,
+        ...etc,
+        children: SlottableWithNestedChildren(props, (child) => /* @__PURE__ */ jsx("div", { ref: combinedListSizerRef, "cmdk-list-sizer": "", children: child }))
+      }
+    );
+  }
+);
+const Empty = React.forwardRef(
+  (props, forwardedRef) => {
+    const render = useCmdk((state) => state.filtered.count === 0);
+    if (!render) return null;
+    const { asChild, ...etc } = props;
+    const As = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(As, { ref: forwardedRef, "cmdk-empty": "", role: "presentation", ...etc });
+  }
+);
+const Loading = React.forwardRef(
+  (props, forwardedRef) => {
+    const { asChild, progress, children, label = "Loading...", ...etc } = props;
+    const As = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      As,
+      {
+        ref: forwardedRef,
+        "cmdk-loading": "",
+        role: "progressbar",
+        "aria-valuenow": progress,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label,
+        ...etc,
+        children: SlottableWithNestedChildren(props, (child) => /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: child }))
+      }
+    );
+  }
+);
+const pkg = Object.assign(Command, {
+  List,
+  Item,
+  Input,
+  Group,
+  Separator: Separator$1,
+  Empty,
+  Loading
+});
+function findNextSibling(el, selector) {
+  let sibling = el.nextElementSibling;
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling;
+    sibling = sibling.nextElementSibling;
+  }
+}
+function findPreviousSibling(el, selector) {
+  let sibling = el.previousElementSibling;
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling;
+    sibling = sibling.previousElementSibling;
+  }
+}
+function useAsRef(data) {
+  const ref = React.useRef(data);
+  useLayoutEffect(() => {
+    ref.current = data;
+  });
+  return ref;
+}
+const useLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function useLazyRef(fn) {
+  const ref = React.useRef();
+  if (ref.current === void 0) {
+    ref.current = fn();
+  }
+  return ref;
+}
+function useCmdk(selector) {
+  const store = useStore();
+  const cb = () => selector(store.snapshot());
+  return React.useSyncExternalStore(store.subscribe, cb, cb);
+}
+function useValue(id, ref, deps, aliases = []) {
+  const valueRef = React.useRef();
+  const context = useCommand();
+  useLayoutEffect(() => {
+    const value = (() => {
+      for (const part of deps) {
+        if (typeof part === "string") {
+          return part.trim();
+        }
+        if (typeof part === "object" && "current" in part) {
+          if (part.current) {
+            return part.current.textContent?.trim();
+          }
+          return valueRef.current;
+        }
+      }
+    })();
+    const keywords = aliases.map((alias) => alias.trim());
+    context.value(id, value, keywords);
+    ref.current?.setAttribute(VALUE_ATTR, value);
+    valueRef.current = value;
+  });
+  return valueRef;
+}
+const useScheduleLayoutEffect = () => {
+  const [s, ss] = React.useState();
+  const fns = useLazyRef(() => /* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    fns.current.forEach((f) => f());
+    fns.current = /* @__PURE__ */ new Map();
+  }, [s]);
+  return (id, cb) => {
+    fns.current.set(id, cb);
+    ss({});
+  };
+};
+function renderChildren(children) {
+  const childrenType = children.type;
+  if (typeof childrenType === "function") return childrenType(children.props);
+  else if ("render" in childrenType) return childrenType.render(children.props);
+  else return children;
+}
+function SlottableWithNestedChildren({ asChild, children }, render) {
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(
+      renderChildren(children),
+      { ref: children.ref },
+      render(children.props.children)
+    );
+  }
+  return render(children);
+}
+const srOnlyStyles = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: "0",
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  borderWidth: "0"
+};
 const CommandMenu = forwardRef(
   function CommandMenu2({
     variant,
@@ -6602,7 +7483,7 @@ const CommandMenu = forwardRef(
       }
     );
     return /* @__PURE__ */ jsxs(
-      Command,
+      pkg,
       {
         label,
         className: cx(prefix("command-menu"), className),
@@ -6610,13 +7491,13 @@ const CommandMenu = forwardRef(
         ref: forwardedRef,
         children: [
           /* @__PURE__ */ jsx(
-            Command.Input,
+            pkg.Input,
             {
               asChild: true,
               value: searchValue,
               onValueChange: onSearchValueChange,
               children: /* @__PURE__ */ jsx(
-                Input,
+                Input$1,
                 {
                   variant: "cell",
                   placeholder: searchPlaceholder,
@@ -6651,9 +7532,9 @@ const CommandMenu = forwardRef(
               variant,
               iconPlacement,
               asChild: true,
-              children: /* @__PURE__ */ jsxs(Command.List, { label: listLabel, children: [
+              children: /* @__PURE__ */ jsxs(pkg.List, { label: listLabel, children: [
                 loading && /* @__PURE__ */ jsx(
-                  Command.Loading,
+                  pkg.Loading,
                   {
                     label: loadingLabel,
                     progress: loadingProgress,
@@ -6674,7 +7555,7 @@ const CommandMenu = forwardRef(
                   }
                 ),
                 !loading && /* @__PURE__ */ jsx(
-                  Command.Empty,
+                  pkg.Empty,
                   {
                     ...emptyMessageProps,
                     className: cx(
@@ -6763,7 +7644,7 @@ const CommandMenuDialog = forwardRef(function CommandMenuDialog2({
 const CommandMenuGroup = forwardRef(function CommandMenuGroup2({ label, className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   return /* @__PURE__ */ jsx(
-    Command.Group,
+    pkg.Group,
     {
       ...otherProps,
       heading: label,
@@ -6839,7 +7720,7 @@ const CommandMenuItem = forwardRef(function CommandMenuItem2({
       keybindsProps,
       asChild: true,
       children: /* @__PURE__ */ jsx(
-        Command.Item,
+        pkg.Item,
         {
           disabled,
           ...otherProps,
@@ -6861,6 +7742,7 @@ function useCreateSelectContext({
   status,
   disabled,
   readOnly,
+  valueTagCloseButtonLabel,
   valueTagProps
 }) {
   const store = useConstant(
@@ -6891,6 +7773,7 @@ function useCreateSelectContext({
       status,
       disabled,
       readOnly,
+      valueTagCloseButtonLabel,
       valueTagProps,
       store
     }),
@@ -6902,6 +7785,7 @@ function useCreateSelectContext({
       status,
       store,
       value,
+      valueTagCloseButtonLabel,
       valueTagProps
     ]
   );
@@ -6933,7 +7817,7 @@ const Option = memo(
       onOptionSelect,
       store
     } = useSelectContext();
-    const { registerOption, unregisterOption } = useStore(
+    const { registerOption, unregisterOption } = useStore$1(
       store,
       (state) => state.actions
     );
@@ -6962,7 +7846,7 @@ const Option = memo(
         value: textValue,
         onSelect: onOptionSelect,
         selected,
-        "aria-checked": selected,
+        "aria-selected": selected || void 0,
         disabled,
         color,
         icon: selected ? faCheck : void 0,
@@ -7042,7 +7926,8 @@ const Tag = forwardRef(function Tag2({
         {
           ...containerProps,
           className: cx(prefix("tag__container"), containerProps?.className),
-          children: /* @__PURE__ */ jsxs(
+          asChild: true,
+          children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs(
             As,
             {
               className: cx(
@@ -7080,7 +7965,7 @@ const Tag = forwardRef(function Tag2({
                 ) })
               ]
             }
-          )
+          ) })
         }
       )
     }
@@ -7095,10 +7980,11 @@ function SelectMultipleValue() {
     status,
     disabled,
     readOnly,
+    valueTagCloseButtonLabel,
     valueTagProps,
     store
   } = useSelectContext();
-  useStore(store, (state) => state.actions.getOptionState(value));
+  useStore$1(store, (state) => state.actions.getOptionState(value));
   const handleCloseValueTag = useCallback(
     (tagValue, evt) => {
       evt.preventDefault();
@@ -7110,7 +7996,7 @@ function SelectMultipleValue() {
     () => Array.from(new Set(value)),
     [value]
   );
-  const valuesOptionStates = useStore(
+  const valuesOptionStates = useStore$1(
     store,
     useShallow(
       (state) => valuesToRender.map((v) => state.actions.getOptionState(v))
@@ -7124,57 +8010,65 @@ function SelectMultipleValue() {
     [valuesOptionStates]
   );
   const valuesTags = useMemo(
-    () => valuesToRender.map((v, i) => {
-      const optionState = valuesOptionStates[i];
-      return optionState && /* @__PURE__ */ createElement(
-        Tag,
-        {
-          variant: "subtle",
-          ...valueTagProps,
-          showCloseButton: !optionState.disabled,
-          closeButtonProps: {
-            asChild: true,
-            children: /* @__PURE__ */ jsx("span", {}),
-            type: void 0,
-            tabIndex: -1,
-            role: "button",
-            disabled,
-            "data-disabled": disabled ? "" : void 0,
-            // Prevent element from gaining focus
-            onMouseDown: (evt) => evt.preventDefault(),
-            onClick: (evt) => handleCloseValueTag(v, evt),
-            ...valueTagProps?.closeButtonProps
-          },
-          key: v,
-          color: optionState.color ?? controlStatusToAccent(status, "primary"),
-          className: cx(
-            prefix("select__value-tag"),
-            valueTagProps?.className
-          ),
-          containerProps: {
-            className: cx(
-              prefix("select__value-tag-container"),
-              valueTagProps?.containerProps?.className
-            ),
-            ...valueTagProps?.containerProps
-          },
-          contentProps: {
+    () => intersperse(
+      valuesToRender.map((v, i) => {
+        const optionState = valuesOptionStates[i];
+        return optionState && /* @__PURE__ */ jsx(
+          Tag,
+          {
+            variant: "subtle",
+            ...valueTagProps,
+            showCloseButton: !optionState.disabled,
+            closeButtonProps: {
+              label: null,
+              tooltipContent: valueTagCloseButtonLabel,
+              asChild: true,
+              children: /* @__PURE__ */ jsx("span", {}),
+              type: void 0,
+              disabled,
+              "data-disabled": boolDataAttr(disabled),
+              // Prevent element from gaining focus
+              onMouseDown: (evt) => evt.preventDefault(),
+              onClick: (evt) => handleCloseValueTag(v, evt),
+              // Override collapsible aria properties
+              "aria-controls": void 0,
+              "aria-expanded": void 0,
+              // Override tooltip aria properties
+              "aria-describedby": void 0,
+              ...valueTagProps?.closeButtonProps
+            },
+            color: optionState.color ?? controlStatusToAccent(status, "primary"),
             className: cx(
-              prefix("select__value-tag-content"),
-              valueTagProps?.contentProps?.className
+              prefix("select__value-tag"),
+              valueTagProps?.className
             ),
-            ...valueTagProps?.contentProps
+            containerProps: {
+              className: cx(
+                prefix("select__value-tag-container"),
+                valueTagProps?.containerProps?.className
+              ),
+              ...valueTagProps?.containerProps
+            },
+            contentProps: {
+              className: cx(
+                prefix("select__value-tag-content"),
+                valueTagProps?.contentProps?.className
+              ),
+              ...valueTagProps?.contentProps
+            },
+            children: optionState.content
           },
-          "aria-hidden": true
-        },
-        optionState.content
-      );
-    }),
+          v
+        );
+      }),
+      (i) => /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " }, `separator-${i}`)
+    ),
     [
       disabled,
       handleCloseValueTag,
       prefix,
       status,
+      valueTagCloseButtonLabel,
       valueTagProps,
       valuesOptionStates,
       valuesToRender
@@ -7182,15 +8076,12 @@ function SelectMultipleValue() {
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     valuesToRender.length > 0 && readOnly && valuesList,
-    valuesToRender.length > 0 && !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { children: valuesList }),
-      valuesTags
-    ] })
+    valuesToRender.length > 0 && !readOnly && valuesTags
   ] });
 }
 function SelectSingleValue() {
   const { value, store } = useSelectContext();
-  return useStore(
+  return useStore$1(
     store,
     (state) => state.actions.getOptionState(value)?.content
   );
@@ -7219,12 +8110,15 @@ const Select = forwardRef(function Select2({
   startAdornment,
   endAdornment,
   showClearButton = "auto",
+  clearDescription,
+  searchLabel,
   optionsLabel,
   loadingOptions,
   loadingOptionsLabel,
   loadingOptionsProgress,
   showSpinner = loading || loadingOptions,
   emptyMessage,
+  valueTagCloseButtonLabel,
   valueTagMaxWidth,
   onKeyDown,
   onBlurToOutside,
@@ -7240,17 +8134,27 @@ const Select = forwardRef(function Select2({
   popoverProps,
   commandMenuProps,
   style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   children,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const { cssVarStyle } = useCssVars();
   const [locale7] = useLocale();
+  placeholder ??= locale7.Select.placeholder;
+  searchLabel ??= locale7.Select.searchLabel;
   searchPlaceholder ??= locale7.Select.searchPlaceholder;
   emptyMessage ??= locale7.Select.emptyMessage;
+  valueTagCloseButtonLabel ??= locale7.Select.valueTagCloseButtonLabel;
   optionsLabel ??= locale7.Select.optionsLabel;
   loadingOptionsLabel ??= locale7.Select.loadingOptionsLabel;
-  const { cssVarStyle } = useCssVars();
+  clearDescription ??= locale7.Select.clearDescription;
   const labelId = useFieldLabelId();
+  const dataTableColumnLabelId = useDataTableColumnLabelId();
+  const generatedId = useId();
+  const codeId = code ? codeProps?.id ?? prefix(`select-code-${generatedId}`) : void 0;
+  const valueId = valueProps?.id ?? prefix(`select-value-${generatedId}`);
   const { printHidden } = usePrintClassNames();
   const [open, setOpen] = useControllableState(
     defaultOpen ?? false,
@@ -7271,6 +8175,7 @@ const Select = forwardRef(function Select2({
   const isEmpty = multiple ? actualValue.length === 0 : actualValue === "";
   const buttonRef = useRef(null);
   const popoverRef = useRef(null);
+  const searchRef = useRef(null);
   const handleContainerPointerDown = useCallback(
     (evt) => {
       evt.preventDefault();
@@ -7288,6 +8193,11 @@ const Select = forwardRef(function Select2({
         const newValue = actualValue.includes(optionValue) ? actualValue.filter((v) => v !== optionValue) : [...actualValue, optionValue];
         setValue(newValue);
         onValueChange?.(newValue);
+        if (open) {
+          searchRef.current?.focus();
+        } else {
+          buttonRef.current?.focus();
+        }
       } else {
         if (optionValue !== actualValue) {
           setValue(optionValue);
@@ -7303,6 +8213,7 @@ const Select = forwardRef(function Select2({
       multiple,
       onSearchValueChange,
       onValueChange,
+      open,
       setOpen,
       setSearchValue,
       setValue
@@ -7347,6 +8258,7 @@ const Select = forwardRef(function Select2({
     status,
     disabled: disabled || loading,
     readOnly,
+    valueTagCloseButtonLabel,
     valueTagProps
   });
   const registeringOptionsSelectContext = useMemo(
@@ -7360,6 +8272,10 @@ const Select = forwardRef(function Select2({
   );
   const combinedButtonRef = useCombinedRef(buttonRef, forwardedRef);
   const combinedPopoverRef = useCombinedRef(popoverRef, popoverProps?.ref);
+  const combinedSearchRef = useCombinedRef(
+    searchRef,
+    commandMenuProps?.searchProps?.ref
+  );
   return /* @__PURE__ */ jsxs(SelectContext.Provider, { value: selectContext, children: [
     /* @__PURE__ */ jsx(SelectContext.Provider, { value: registeringOptionsSelectContext, children }),
     /* @__PURE__ */ jsxs(
@@ -7372,8 +8288,6 @@ const Select = forwardRef(function Select2({
             PopoverTrigger,
             {
               className: cx(prefix("select"), className),
-              role: "combobox",
-              "aria-autocomplete": "none",
               "data-multiple": boolDataAttr(multiple),
               "data-limit-value-tags-width": boolDataAttr(valueTagMaxWidth != null),
               onKeyDown: combineEventHandlers(onKeyDown, handleKeyDown),
@@ -7417,9 +8331,10 @@ const Select = forwardRef(function Select2({
                     endAdornment
                   ] }),
                   showClearButton: showClearButton === "auto" ? !isEmpty : showClearButton,
+                  clearDescription,
                   onBlurToOutside: handleControlBlur,
                   rootProps,
-                  codeProps,
+                  codeProps: { ...codeProps, id: codeId },
                   containerProps: {
                     // Propagate open state to container for styling purposes
                     ...{ "data-state": showOpen ? "open" : "closed" },
@@ -7446,6 +8361,13 @@ const Select = forwardRef(function Select2({
                     ),
                     ref: combinedClearButtonRef
                   },
+                  ...open ? {} : { "aria-controls": void 0 },
+                  "aria-label": ariaLabel,
+                  "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 ? combineAriaIds(
+                    codeId,
+                    labelId ?? dataTableColumnLabelId,
+                    valueId
+                  ) : void 0),
                   spinnerProps: {
                     ...spinnerProps,
                     className: cx(prefix("select__spinner"), spinnerProps?.className)
@@ -7455,8 +8377,10 @@ const Select = forwardRef(function Select2({
                     "span",
                     {
                       ...valueProps,
+                      id: valueId,
                       className: cx(prefix("select__value"), valueProps?.className),
                       children: [
+                        /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " }),
                         isEmpty && placeholder,
                         !isEmpty && !multiple && /* @__PURE__ */ jsx(SelectSingleValue, {}),
                         !isEmpty && multiple && /* @__PURE__ */ jsx(SelectMultipleValue, {})
@@ -7489,6 +8413,7 @@ const Select = forwardRef(function Select2({
                   ...commandMenuProps,
                   searchPlaceholder,
                   emptyMessage,
+                  label: searchLabel,
                   listLabel: optionsLabel,
                   loading: loadingOptions,
                   loadingLabel: loadingOptionsLabel,
@@ -7499,7 +8424,10 @@ const Select = forwardRef(function Select2({
                     onSearchValueChange,
                     setSearchValue
                   ),
-                  searchProps: { "aria-labelledby": labelId },
+                  searchProps: {
+                    ...commandMenuProps?.searchProps,
+                    ref: combinedSearchRef
+                  },
                   listProps: {
                     "aria-multiselectable": multiple ? true : void 0,
                     ...commandMenuProps?.listProps
@@ -10056,7 +10984,7 @@ const Feedback = forwardRef(
     const [locale7] = useLocale();
     visuallyHiddenPrefix ??= locale7.Feedback.visuallyHiddenPrefix;
     const { onAddFeedback, onRemoveFeedback } = useFeedbackPopoverContext() ?? {};
-    useLayoutEffect(() => {
+    useLayoutEffect$1(() => {
       onAddFeedback?.(type);
       return () => onRemoveFeedback?.(type);
     }, [onAddFeedback, onRemoveFeedback, type]);
@@ -10674,7 +11602,7 @@ const NumericInput = forwardRef(function NumericInput2({
       thousandSeparator: groupDigits ? groupSeparator : "",
       isAllowed,
       allowNegative,
-      customInput: Input,
+      customInput: Input$1,
       getInputRef: forwardedRef,
       ...otherProps
     }
@@ -10747,7 +11675,7 @@ const Output = forwardRef(
   }, forwardedRef) {
     const prefix = usePrefix();
     return /* @__PURE__ */ jsx(
-      Input,
+      Input$1,
       {
         showSpinner,
         "aria-busy": pending || void 0,
@@ -10892,6 +11820,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
   showSpinner = loading,
   code,
   showClearButton,
+  clearDescription,
   clearButtonLabel,
   onBlurToOutside,
   codeProps,
@@ -10917,6 +11846,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
   const [locale7] = useLocale();
   loadingDescription ??= locale7.Input.loadingDescription;
   clearButtonLabel ??= locale7.Input.clearButtonLabel;
+  clearDescription ??= locale7.RadioGroup.clearDescription;
   const labelId = useFieldLabelId();
   const dataTableColumnLabelId = useDataTableColumnLabelId();
   const descriptionIds = useFieldDescriptionIds();
@@ -10964,6 +11894,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
     radioGroupRef.current?.focus();
   }, [handleValueChange]);
   const hasClearButton = !disabled && !loading && !readOnly && (showClearButton === true || showClearButton === "auto" && (value?.length ?? 0) > 0);
+  const clearDescriptionId = hasClearButton && clearDescription && prefix(`control-clear-${generatedId}`);
   const handleKeyDown = useCallback(
     (evt) => {
       if (hasClearButton && (evt.code === "Delete" || evt.code === "Backspace")) {
@@ -11001,7 +11932,8 @@ const RadioGroup = forwardRef(function RadioGroup2({
             loadingDescriptionId,
             errorMessageIds,
             ariaDescribedBy,
-            descriptionIds
+            descriptionIds,
+            clearDescriptionId
           ),
           onFocus: combineEventHandlers(onFocus, handleControlFocus),
           onBlur: combineEventHandlers(onBlur, handleControlBlur),
@@ -11089,7 +12021,8 @@ const RadioGroup = forwardRef(function RadioGroup2({
                 ]
               }
             ),
-            loadingDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: loadingDescriptionId, children: loadingDescription })
+            loadingDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: loadingDescriptionId, children: loadingDescription }),
+            clearDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: clearDescriptionId, children: clearDescription })
           ]
         }
       )
@@ -11099,7 +12032,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
 const Separator = forwardRef(function Separator2({ className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   return /* @__PURE__ */ jsx(
-    Separator$1.Root,
+    Separator$2.Root,
     {
       className: cx(prefix("separator"), className),
       ...otherProps,
@@ -11323,7 +12256,7 @@ function useTabsContext() {
 function useRegisterTabLabel(value, label) {
   const { showAllTabsWhilePrinting, store } = useTabsContext();
   const needsRegisteredTabLabels = usePrinting() && showAllTabsWhilePrinting;
-  const { registerTabLabel } = useStore(store, (state) => state.actions);
+  const { registerTabLabel } = useStore$1(store, (state) => state.actions);
   useEffect(() => {
     if (needsRegisteredTabLabels) {
       return registerTabLabel(value, label);
@@ -11332,13 +12265,13 @@ function useRegisterTabLabel(value, label) {
 }
 function useTabLabel(value) {
   const { store } = useTabsContext();
-  return useStore(store, (state) => state.actions.getTabLabel(value));
+  return useStore$1(store, (state) => state.actions.getTabLabel(value));
 }
 const Tab = forwardRef(function Tab2({ value, status, tabInnerProps, className, children, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   const { variant, store } = useTabsContext();
   const stringValue = value.toString();
-  const isActive = useStore(store, (state) => state.activeTab === stringValue);
+  const isActive = useStore$1(store, (state) => state.activeTab === stringValue);
   useRegisterTabLabel(stringValue, children);
   const tabRef = useRef(null);
   useEffect(() => {
@@ -11579,8 +12512,8 @@ function TabListScrollButton({
 }) {
   const prefix = usePrefix();
   const { store } = useTabsContext();
-  const showScrollButtons = useStore(store, (state) => state.showScrollButtons);
-  const shouldDisable = useStore(
+  const showScrollButtons = useStore$1(store, (state) => state.showScrollButtons);
+  const shouldDisable = useStore$1(
     store,
     ({ scrollPosition }) => scrollPosition && (side === "left" ? scrollPosition.left === 0 : scrollPosition.right <= 1)
   );
@@ -11639,7 +12572,7 @@ const TextArea = forwardRef(
   function TextArea2({ rows, ...props }, forwardedRef) {
     const isInTableCell = useIsInTableCell();
     rows ??= isInTableCell ? 1 : DEFAULT_ROWS;
-    return /* @__PURE__ */ jsx(Input, { asChild: true, ...props, children: /* @__PURE__ */ jsx("textarea", { rows, ref: forwardedRef }) });
+    return /* @__PURE__ */ jsx(Input$1, { asChild: true, ...props, children: /* @__PURE__ */ jsx("textarea", { rows, ref: forwardedRef }) });
   }
 );
 function useMediaQuery(query, options) {
@@ -11778,7 +12711,7 @@ function createLocationStore() {
 function useLocation(selector) {
   locationStore ??= createLocationStore();
   useEffect(() => locationStore.getState().actions.subscribe(), []);
-  return useStore(
+  return useStore$1(
     locationStore,
     ({ location: location2 }) => selector ? selector(location2) : location2
   );
@@ -11937,7 +12870,7 @@ export {
   HelperText,
   Icon,
   IconButton,
-  Input,
+  Input$1 as Input,
   InputWithContainerRef,
   Keybinds,
   Keyboard,
@@ -12064,7 +12997,7 @@ export {
   useIsInTableCell,
   useKeyboardShortcut,
   useLatestValues,
-  useLayoutEffect,
+  useLayoutEffect$1 as useLayoutEffect,
   useLocale,
   useLocation,
   useMeasure,