@sia-ui/react-web 0.3.2 → 0.5.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createContext, forwardRef, useRef, useImperativeHandle, useEffect, memo, useContext, useState, useId, useMemo, useCallback, useLayoutEffect, Children, isValidElement, cloneElement, Fragment as Fragment$1 } from 'react';
-import { cn, toneClass, formatCurrency, parseCurrency, formatTimeAgo, formatDate, normalizeIdentifier, truncate, formatDateTime, formatNumber } from '@sia-ui/utils';
-import { useDisclosureState, overlayStack, navContains, useHoverIntent, navLeaves, navSome, useComponentDefaults, useSiaLocale, computeFloatingPosition, useAccordionState, navPath, filterNavTree, navKeyForPath, paginationItems, useTableQuery, useSliderState, useLocalForm, useSession, useToasts, toastStore, toast, useRovingIndex } from '@sia-ui/headless';
+import { cn, toneClass, looseIncludes, formatCurrency, parseCurrency, formatTimeAgo, formatDate, normalizeIdentifier, truncate, formatDateTime, formatNumber } from '@sia-ui/utils';
+import { useDisclosureState, overlayStack, navContains, useHoverIntent, navLeaves, navSome, useComponentDefaults, useSiaLocale, computeFloatingPosition, useAccordionState, navPath, filterNavTree, navKeyForPath, paginationItems, useTableQuery, useSliderState, useLocalForm, hasFormErrors, useSession, useToasts, toastStore, toast, readSubmitError, useRovingIndex } from '@sia-ui/headless';
 export { toast, toastStore } from '@sia-ui/headless';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useOutsideClick, Portal, useMediaQuery, usePortal, useControllableState } from '@sia-ui/react';
@@ -115,6 +115,12 @@ function InfoIcon(props) {
     /* @__PURE__ */ jsx("path", { d: "M12 11v5M12 7.5h.01" })
   ] });
 }
+function SettingsIcon(props) {
+  return /* @__PURE__ */ jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" })
+  ] });
+}
 function EyeIcon(props) {
   return /* @__PURE__ */ jsxs(IconBase, { ...props, children: [
     /* @__PURE__ */ jsx("path", { d: "M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12Z" }),
@@ -263,13 +269,15 @@ var Drawer = forwardRef(
     closeOnOutsideClick = true,
     closeOnEsc = true,
     children,
+    className,
     ...rest
   }, ref) => {
     const {
       isOpen,
       phase: state,
       open: doOpen,
-      close: doClose
+      close: doClose,
+      toggle
     } = useDisclosureState({
       ...open !== void 0 ? { open } : {},
       defaultOpen,
@@ -278,15 +286,17 @@ var Drawer = forwardRef(
     });
     const drawerRef = useRef(null);
     const zIndexRef = useRef(null);
+    const fermer = useRef(doClose);
+    fermer.current = doClose;
     useImperativeHandle(
       ref,
       () => ({
         open: doOpen,
         close: doClose,
-        toggle: () => isOpen ? doClose() : doOpen(),
+        toggle,
         isOpen: () => isOpen
       }),
-      [isOpen, open]
+      [isOpen, doOpen, doClose, toggle]
     );
     useEffect(() => {
       if (!isOpen) return;
@@ -303,7 +313,7 @@ var Drawer = forwardRef(
       const onKeyDown = (e) => {
         if (!closeOnEsc || e.key !== "Escape") return;
         if (overlayStack.isTop(zIndexRef.current)) {
-          doClose();
+          fermer.current();
         }
       };
       window.addEventListener("keydown", onKeyDown);
@@ -322,6 +332,7 @@ var Drawer = forwardRef(
       "div",
       {
         className: "sia-drawer-root",
+        "data-state": state,
         style: { zIndex: zIndexRef.current ?? void 0 },
         children: [
           /* @__PURE__ */ jsx("div", { className: "sia-drawer-overlay" }),
@@ -336,7 +347,8 @@ var Drawer = forwardRef(
                 "sia-drawer",
                 `sia-drawer-${position}`,
                 `sia-drawer-${size}`,
-                state === "closing" && "is-closing"
+                state === "closing" && "is-closing",
+                className
               ),
               ...rest,
               children
@@ -370,7 +382,7 @@ function DrawerClose() {
       className: "sia-drawer-close",
       onClick: ctx.close,
       "aria-label": "Fermer",
-      children: "\u2715"
+      children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
     }
   );
 }
@@ -603,7 +615,14 @@ function Ligne({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     item.icon && /* @__PURE__ */ jsx("span", { className: "sia-sidebar__icon", "aria-hidden": "true", children: item.icon }),
     /* @__PURE__ */ jsx("span", { className: "sia-sidebar__label", children: item.label }),
-    item.badge !== void 0 && !collapsed && /* @__PURE__ */ jsx("span", { className: "sia-sidebar__badge", children: item.badge }),
+    item.badge !== void 0 && !collapsed && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "sia-sidebar__badge",
+        "data-sia-badge": typeof item.badge === "string" || typeof item.badge === "number" ? String(item.badge) : void 0,
+        children: item.badge
+      }
+    ),
     porteUnePastille && /* @__PURE__ */ jsx("span", { className: "sia-sidebar__dot", "aria-hidden": "true" }),
     aDesEnfants && !collapsed && /* @__PURE__ */ jsx(
       "span",
@@ -765,7 +784,14 @@ function NoeudRail(props) {
         children: /* @__PURE__ */ jsxs("div", { ...panelProps, children: [
           /* @__PURE__ */ jsxs("div", { className: "sia-sidebar-flyout__title", children: [
             item.label,
-            item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "sia-sidebar__badge", children: item.badge })
+            item.badge !== void 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "sia-sidebar__badge",
+                "data-sia-badge": typeof item.badge === "string" || typeof item.badge === "number" ? String(item.badge) : void 0,
+                children: item.badge
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("div", { className: "sia-sidebar-flyout__body", children: enfants.map((enfant) => /* @__PURE__ */ jsx(
             Noeud,
@@ -871,6 +897,50 @@ var BottomTabs = memo(function BottomTabs2({
     )
   ] });
 });
+function AppShellBrand({
+  icon,
+  name,
+  description,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("sia-shell-brand", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "sia-shell-brand__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs("span", { className: "sia-shell-brand__copy", children: [
+      /* @__PURE__ */ jsx("span", { className: "sia-shell-brand__name", children: name }),
+      description !== void 0 && /* @__PURE__ */ jsx("span", { className: "sia-shell-brand__description", children: description })
+    ] })
+  ] });
+}
+function AppShellRailItem({
+  as = "div",
+  icon,
+  label,
+  className,
+  href,
+  type = "button",
+  disabled,
+  ...props
+}) {
+  const Component = as;
+  const elementProps = {
+    ...props,
+    ...as === "a" && href ? { href } : {},
+    ...as === "button" ? { type, disabled } : {}
+  };
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      className: cn("sia-shell-rail-item", className),
+      "aria-label": props["aria-label"] ?? (as !== "div" ? label : void 0),
+      ...elementProps,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sia-shell-rail-item__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "sia-shell-rail-item__label", children: label })
+      ]
+    }
+  );
+}
 function AppShell({
   nav,
   children,
@@ -1013,10 +1083,19 @@ function AppShell({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("main", { className: cn("sia-shell__content", `sia-shell__content--${contentWidth}`), children: [
-            page && /* @__PURE__ */ jsx("div", { className: "sia-shell__page", children: page }),
-            children
-          ] }),
+          /* @__PURE__ */ jsxs(
+            "main",
+            {
+              className: cn(
+                "sia-shell__content",
+                `sia-shell__content--${contentWidth}`
+              ),
+              children: [
+                page && /* @__PURE__ */ jsx("div", { className: "sia-shell__page", children: page }),
+                children
+              ]
+            }
+          ),
           footer && /* @__PURE__ */ jsx("footer", { className: "sia-shell__footer", children: footer })
         ] }),
         compact && montrerOnglets && /* @__PURE__ */ jsx(
@@ -1029,7 +1108,7 @@ function AppShell({
             ...montrerTiroir ? { onMore: () => setTiroirOuvert(true) } : {}
           }
         ),
-        compact && montrerTiroir && /* @__PURE__ */ jsx(
+        compact && montrerTiroir && /* @__PURE__ */ jsxs(
           Drawer,
           {
             open: tiroirOuvert,
@@ -1037,7 +1116,13 @@ function AppShell({
             position: side,
             size: "sm",
             className: "sia-shell__drawer",
-            children: barre
+            children: [
+              /* @__PURE__ */ jsxs(Drawer.Header, { children: [
+                /* @__PURE__ */ jsx(Drawer.Title, { children: "Navigation" }),
+                /* @__PURE__ */ jsx(Drawer.Close, {})
+              ] }),
+              /* @__PURE__ */ jsx(Drawer.Body, { children: barre })
+            ]
           }
         )
       ]
@@ -1938,9 +2023,9 @@ function Calendar({
     if (mode === void 0) setPanelMode(next);
     onPanelChange?.(monthIso(controlledMonth), next);
   };
-  const isDisabled = (date) => Boolean(
+  const isDisabled = useCallback((date) => Boolean(
     disabledDate?.(date) || validRange && (date < validRange[0] || date > validRange[1])
-  );
+  ), [disabledDate, validRange]);
   const selectDate = (date) => {
     if (isDisabled(date)) return;
     if (selectionMode === "range") {
@@ -1974,7 +2059,7 @@ function Calendar({
         ...rangeEdge ? { rangeEdge } : {}
       };
     });
-  }, [year, monthIndex, firstDayOfWeek, disabledDate, validRange, currentValue, currentRange.start, currentRange.end]);
+  }, [year, monthIndex, firstDayOfWeek, isDisabled, currentValue, currentRange.start, currentRange.end]);
   const weekdays = Array.from({ length: 7 }, (_, index) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(new Date(2024, 0, 7 + firstDayOfWeek + index)));
   const monthName = new Intl.DateTimeFormat(locale, { month: "long" }).format(controlledMonth);
   const updateFromString = (next) => setMonth(parseMonth(next));
@@ -2621,6 +2706,8 @@ function Timer({ duration = 6e4, initialValue = 0, direction = "down", running =
   const initial = direction === "down" ? duration : initialValue;
   const [value, setValue] = useState(initial);
   const finishCalled = useRef(false);
+  const latest = useRef({ value, onChange, onFinish });
+  latest.current = { value, onChange, onFinish };
   useEffect(() => {
     setValue(direction === "down" ? duration : initialValue);
     finishCalled.current = false;
@@ -2628,15 +2715,15 @@ function Timer({ duration = 6e4, initialValue = 0, direction = "down", running =
   useEffect(() => {
     if (!running) return;
     const startedAt = Date.now();
-    const base = value;
+    const base = latest.current.value;
     const update = () => {
       const elapsed = Date.now() - startedAt;
       const next = direction === "down" ? Math.max(0, base - elapsed) : base + elapsed;
       setValue(next);
-      onChange?.(next);
+      latest.current.onChange?.(next);
       if (direction === "down" && next === 0 && !finishCalled.current) {
         finishCalled.current = true;
-        onFinish?.();
+        latest.current.onFinish?.();
       }
     };
     update();
@@ -2658,6 +2745,270 @@ function PageHeader({ title, description, eyebrow, actions, className }) {
     actions && /* @__PURE__ */ jsx("div", { className: "sia-page-header__actions", children: actions })
   ] });
 }
+function optionsFromChildren(children) {
+  return Children.toArray(children).flatMap((child) => {
+    if (!isValidElement(child))
+      return [];
+    const value = child.props.value;
+    if (value === void 0) return [];
+    return [{
+      value: String(value),
+      label: child.props.children,
+      ...child.props.disabled !== void 0 ? { disabled: child.props.disabled } : {}
+    }];
+  });
+}
+function optionText(option) {
+  return [option.label, option.description, ...option.keywords ?? []].map((value) => typeof value === "string" || typeof value === "number" ? String(value) : "").join(" ");
+}
+var Select = forwardRef(function Select2({
+  id,
+  name,
+  options,
+  children,
+  value,
+  defaultValue = "",
+  onValueChange,
+  placeholder = "S\xE9lectionner",
+  searchable = false,
+  searchPlaceholder = "Rechercher...",
+  fetcher,
+  debounce = 250,
+  loadingText = "Chargement des options...",
+  emptyText = "Aucun r\xE9sultat",
+  errorText = "Impossible de charger les options",
+  clearable = false,
+  disabled = false,
+  invalid = false,
+  required = false,
+  placement = "bottom-start",
+  renderValue,
+  variant = "default",
+  className,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  ...ariaProps
+}, forwardedRef) {
+  const generatedId = useId();
+  const controlId = id ?? `sia-select-${generatedId.replace(/:/g, "")}`;
+  const listboxId = `${controlId}-listbox`;
+  const triggerRef = useRef(null);
+  const searchRef = useRef(null);
+  const staticOptions = useMemo(
+    () => options ?? optionsFromChildren(children),
+    [children, options]
+  );
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [remoteOptions, setRemoteOptions] = useState([]);
+  const [selectedRemoteOption, setSelectedRemoteOption] = useState();
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const currentValue = value ?? internalValue;
+  const sourceOptions = fetcher ? remoteOptions : staticOptions;
+  const visibleOptions = useMemo(() => {
+    if (fetcher) return sourceOptions;
+    const needle = query.trim();
+    return needle ? sourceOptions.filter((option) => looseIncludes(optionText(option), needle)) : sourceOptions;
+  }, [fetcher, query, sourceOptions]);
+  const selectedOption = [...staticOptions, ...remoteOptions].find(
+    (option) => option.value === currentValue
+  ) ?? (selectedRemoteOption?.value === currentValue ? selectedRemoteOption : void 0);
+  useEffect(() => {
+    if (!open || !fetcher) return;
+    const controller = new AbortController();
+    const timeout = window.setTimeout(async () => {
+      setLoading(true);
+      setLoadError(false);
+      try {
+        const nextOptions = await fetcher(query, controller.signal);
+        if (!controller.signal.aborted) setRemoteOptions(nextOptions);
+      } catch {
+        if (!controller.signal.aborted) setLoadError(true);
+      } finally {
+        if (!controller.signal.aborted) setLoading(false);
+      }
+    }, debounce);
+    return () => {
+      window.clearTimeout(timeout);
+      controller.abort();
+    };
+  }, [debounce, fetcher, open, query]);
+  useEffect(() => {
+    if (!open) return;
+    const selected = visibleOptions.findIndex((option) => option.value === currentValue);
+    setActiveIndex(selected >= 0 ? selected : visibleOptions.findIndex((option) => !option.disabled));
+    if (searchable || fetcher) window.setTimeout(() => searchRef.current?.focus(), 0);
+  }, [currentValue, fetcher, open, searchable, visibleOptions]);
+  const setTriggerRef = (node) => {
+    triggerRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  const changeValue = (nextValue, option) => {
+    if (value === void 0) setInternalValue(nextValue);
+    onValueChange?.(nextValue, option);
+  };
+  const choose = (option) => {
+    if (option.disabled) return;
+    if (fetcher) setSelectedRemoteOption(option);
+    changeValue(option.value, option);
+    setOpen(false);
+    setQuery("");
+    window.setTimeout(() => triggerRef.current?.focus(), 0);
+  };
+  const moveActive = (direction) => {
+    if (!visibleOptions.length) return;
+    let next = activeIndex;
+    for (let count = 0; count < visibleOptions.length; count += 1) {
+      next = (next + direction + visibleOptions.length) % visibleOptions.length;
+      if (!visibleOptions[next]?.disabled) break;
+    }
+    setActiveIndex(next);
+  };
+  const handleKeyDown = (event) => {
+    if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+      event.preventDefault();
+      if (!open) setOpen(true);
+      else moveActive(event.key === "ArrowDown" ? 1 : -1);
+      return;
+    }
+    if (event.key === "Home" && open) {
+      event.preventDefault();
+      setActiveIndex(visibleOptions.findIndex((option) => !option.disabled));
+    } else if (event.key === "End" && open) {
+      event.preventDefault();
+      for (let index = visibleOptions.length - 1; index >= 0; index -= 1) {
+        if (!visibleOptions[index]?.disabled) {
+          setActiveIndex(index);
+          break;
+        }
+      }
+    } else if (event.key === "Enter" && open && activeIndex >= 0) {
+      event.preventDefault();
+      const active = visibleOptions[activeIndex];
+      if (active) choose(active);
+    } else if (event.key === "Escape" && open) {
+      event.preventDefault();
+      setOpen(false);
+      triggerRef.current?.focus();
+    } else if (!open && clearable && currentValue && ["Backspace", "Delete"].includes(event.key)) {
+      event.preventDefault();
+      changeValue("");
+    }
+  };
+  const showSearch = searchable || Boolean(fetcher);
+  const activeOption = activeIndex >= 0 ? visibleOptions[activeIndex] : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "sia-select",
+        variant === "embedded" && "sia-select--embedded",
+        disabled && "sia-select--disabled",
+        className
+      ),
+      children: [
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: setTriggerRef,
+            id: controlId,
+            type: "button",
+            className: cn("sia-select__trigger", invalid && "sia-select__trigger--invalid"),
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": listboxId,
+            "aria-activedescendant": open && activeOption ? `${listboxId}-${activeIndex}` : void 0,
+            "aria-invalid": ariaInvalid ?? (invalid || void 0),
+            "aria-required": ariaRequired ?? (required || void 0),
+            disabled,
+            onClick: () => setOpen((current) => !current),
+            onKeyDown: handleKeyDown,
+            ...ariaProps,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn("sia-select__value", !selectedOption && "sia-select__placeholder"), children: renderValue ? renderValue(selectedOption) : selectedOption?.label ?? placeholder }),
+              /* @__PURE__ */ jsxs("span", { className: "sia-select__actions", children: [
+                clearable && currentValue && !disabled && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "sia-select__clear",
+                    "aria-hidden": "true",
+                    title: "Effacer la s\xE9lection",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      changeValue("");
+                    },
+                    children: /* @__PURE__ */ jsx(XIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(ChevronDownIcon, { className: "sia-select__chevron", "aria-hidden": "true" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Overlay,
+          {
+            open,
+            anchorRef: triggerRef,
+            onOpenChange: setOpen,
+            placement,
+            matchAnchorWidth: true,
+            className: "sia-select__overlay",
+            children: /* @__PURE__ */ jsxs("div", { className: "sia-select__panel", onKeyDown: handleKeyDown, children: [
+              showSearch && /* @__PURE__ */ jsxs("div", { className: "sia-select__search-wrap", children: [
+                /* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: searchRef,
+                    className: "sia-select__search",
+                    value: query,
+                    placeholder: searchPlaceholder,
+                    "aria-label": searchPlaceholder,
+                    onChange: (event) => setQuery(event.target.value)
+                  }
+                ),
+                loading && /* @__PURE__ */ jsx(Spinner, { size: "xs", label: "Chargement" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { id: listboxId, role: "listbox", "aria-busy": loading || void 0, className: "sia-select__options", children: loading && !visibleOptions.length ? /* @__PURE__ */ jsx("div", { className: "sia-select__status", children: loadingText }) : loadError ? /* @__PURE__ */ jsx("div", { className: "sia-select__status sia-select__status--error", children: errorText }) : !visibleOptions.length ? /* @__PURE__ */ jsx("div", { className: "sia-select__status", children: emptyText }) : visibleOptions.map((option, index) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  id: `${listboxId}-${index}`,
+                  type: "button",
+                  role: "option",
+                  "aria-selected": currentValue === option.value,
+                  disabled: option.disabled,
+                  className: cn(
+                    "sia-select__option",
+                    index === activeIndex && "sia-select__option--active"
+                  ),
+                  onMouseEnter: () => setActiveIndex(index),
+                  onClick: () => choose(option),
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "sia-select__option-content", children: [
+                      /* @__PURE__ */ jsx("span", { children: option.label }),
+                      option.description && /* @__PURE__ */ jsx("small", { children: option.description })
+                    ] }),
+                    currentValue === option.value && /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" })
+                  ]
+                },
+                option.value
+              )) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+});
+Select.displayName = "Select";
+var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
 function Pagination({
   page,
   totalPages,
@@ -2668,6 +3019,11 @@ function Pagination({
   jumpTo = false,
   showTotal = false,
   compact = false,
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  pageSizeLabel,
+  renderPageSize,
   ariaLabel,
   className
 }) {
@@ -2678,8 +3034,17 @@ function Pagination({
   const current = Math.min(Math.max(page, 1), Math.max(totalPages, 1));
   const [draft, setDraft] = useState(String(current));
   useEffect(() => setDraft(String(current)), [current]);
-  if (totalPages <= 1) return null;
-  const items = paginationItems(current, totalPages, siblingCount);
+  const tailles = useMemo(() => {
+    if (pageSize === void 0 || pageSizeOptions.includes(pageSize)) {
+      return pageSizeOptions;
+    }
+    return [...pageSizeOptions, pageSize].sort((a, b) => a - b);
+  }, [pageSize, pageSizeOptions]);
+  const choixTaille = pageSize !== void 0 && onPageSizeChange && tailles.length > 0;
+  const plusieursPages = totalPages > 1;
+  const tailleLibelle = pageSizeLabel ?? locale.perPage;
+  if (!plusieursPages && !choixTaille) return null;
+  const items = plusieursPages ? paginationItems(current, totalPages, siblingCount) : [];
   const jump = (event) => {
     event.preventDefault();
     const asked = Number(draft);
@@ -2699,71 +3064,97 @@ function Pagination({
       ),
       "aria-label": ariaLabel ?? "Pagination",
       children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: "sia-pagination__step",
-            disabled: current === 1,
-            "aria-label": previousLabel,
-            onClick: () => onPageChange(current - 1),
-            children: [
-              /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
-              !compact && /* @__PURE__ */ jsx("span", { children: previousLabel })
-            ]
-          }
-        ),
-        items.map(
-          (item) => typeof item === "number" ? /* @__PURE__ */ jsx(
+        plusieursPages && /* @__PURE__ */ jsxs("div", { className: "sia-pagination__pages", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "sia-pagination__step",
+              disabled: current === 1,
+              "aria-label": previousLabel,
+              onClick: () => onPageChange(current - 1),
+              children: [
+                /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+                !compact && /* @__PURE__ */ jsx("span", { children: previousLabel })
+              ]
+            }
+          ),
+          items.map(
+            (item) => typeof item === "number" ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "sia-pagination__page",
+                "aria-current": item === current ? "page" : void 0,
+                onClick: () => onPageChange(item),
+                children: item
+              },
+              item
+            ) : /* @__PURE__ */ jsx("span", { className: "sia-pagination__gap", "aria-hidden": "true", children: "\u2026" }, item)
+          ),
+          /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              className: "sia-pagination__page",
-              "aria-current": item === current ? "page" : void 0,
-              onClick: () => onPageChange(item),
-              children: item
-            },
-            item
-          ) : /* @__PURE__ */ jsx("span", { className: "sia-pagination__gap", "aria-hidden": "true", children: "\u2026" }, item)
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: "sia-pagination__step",
-            disabled: current === totalPages,
-            "aria-label": nextLabel,
-            onClick: () => onPageChange(current + 1),
-            children: [
-              !compact && /* @__PURE__ */ jsx("span", { children: nextLabel }),
-              /* @__PURE__ */ jsx(ChevronRightIcon, {})
-            ]
-          }
-        ),
-        showTotal && /* @__PURE__ */ jsxs("span", { className: "sia-pagination__total", children: [
-          locale.page,
-          " ",
-          current,
-          " / ",
-          totalPages
-        ] }),
-        jumpTo && /* @__PURE__ */ jsxs("form", { className: "sia-pagination__jump", onSubmit: jump, children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: jumpId, children: locale.goToPage }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              id: jumpId,
-              type: "text",
-              inputMode: "numeric",
-              value: draft,
-              "aria-label": locale.goToPage,
-              onChange: (event) => setDraft(event.target.value.replace(/\D/g, "")),
-              onBlur: jump
+              className: "sia-pagination__step",
+              disabled: current === totalPages,
+              "aria-label": nextLabel,
+              onClick: () => onPageChange(current + 1),
+              children: [
+                !compact && /* @__PURE__ */ jsx("span", { children: nextLabel }),
+                /* @__PURE__ */ jsx(ChevronRightIcon, {})
+              ]
             }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "sia-pagination__jump-total", "aria-hidden": "true", children: [
-            "/ ",
+          )
+        ] }),
+        (choixTaille || plusieursPages && (showTotal || jumpTo)) && /* @__PURE__ */ jsxs("div", { className: "sia-pagination__settings", children: [
+          plusieursPages && showTotal && /* @__PURE__ */ jsxs("span", { className: "sia-pagination__total", children: [
+            locale.page,
+            " ",
+            current,
+            " / ",
             totalPages
+          ] }),
+          choixTaille && /* @__PURE__ */ jsx("div", { className: "sia-pagination__size", children: renderPageSize ? renderPageSize({
+            pageSize,
+            options: tailles,
+            onChange: onPageSizeChange,
+            label: tailleLibelle
+          }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: tailleLibelle }),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                variant: "embedded",
+                "aria-label": tailleLibelle,
+                placement: "top-end",
+                value: String(pageSize),
+                options: tailles.map((taille) => ({
+                  value: String(taille),
+                  label: String(taille)
+                })),
+                onValueChange: (valeur) => onPageSizeChange(Number(valeur))
+              }
+            )
+          ] }) }),
+          plusieursPages && jumpTo && /* @__PURE__ */ jsxs("form", { className: "sia-pagination__jump", onSubmit: jump, children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: jumpId, children: locale.goToPage }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: jumpId,
+                type: "text",
+                inputMode: "numeric",
+                value: draft,
+                "aria-label": locale.goToPage,
+                onChange: (event) => setDraft(event.target.value.replace(/\D/g, "")),
+                onBlur: jump
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "sia-pagination__jump-total", "aria-hidden": "true", children: [
+              "/ ",
+              totalPages
+            ] })
           ] })
         ] })
       ]
@@ -3049,6 +3440,7 @@ function DataTable({
   searchKeys,
   searchPlaceholder,
   onSearch,
+  searchDelay = 0,
   layout = "auto",
   maxHeight,
   stickyHeader = false,
@@ -3167,9 +3559,10 @@ function DataTable({
           {
             value: recherche,
             placeholder: searchPlaceholder ?? locale.search,
+            ...onSearch && searchDelay > 0 ? { onSearch, searchDelay } : {},
             onValueChange: (v) => {
               setRecherche(v);
-              onSearch?.(v);
+              if (searchDelay <= 0) onSearch?.(v);
             }
           }
         ),
@@ -3962,255 +4355,6 @@ function DateTimePicker({ value, defaultValue = { date: "", time: "" }, onValueC
     /* @__PURE__ */ jsx(TimePicker, { ...timeProps, value: current.time, minuteStep, secondStep, showSeconds, hourFormat, needConfirm, tone, ...stateProps, "aria-label": "Heure", onValueChange: (time) => update({ ...current, time }) })
   ] });
 }
-function optionsFromChildren(children) {
-  return Children.toArray(children).flatMap((child) => {
-    if (!isValidElement(child))
-      return [];
-    const value = child.props.value;
-    if (value === void 0) return [];
-    return [{
-      value: String(value),
-      label: child.props.children,
-      ...child.props.disabled !== void 0 ? { disabled: child.props.disabled } : {}
-    }];
-  });
-}
-function optionText(option) {
-  return [option.label, option.description, ...option.keywords ?? []].map((value) => typeof value === "string" || typeof value === "number" ? String(value) : "").join(" ").toLocaleLowerCase();
-}
-var Select = forwardRef(function Select2({
-  id,
-  name,
-  options,
-  children,
-  value,
-  defaultValue = "",
-  onValueChange,
-  placeholder = "S\xE9lectionner",
-  searchable = false,
-  searchPlaceholder = "Rechercher...",
-  fetcher,
-  debounce = 250,
-  loadingText = "Chargement des options...",
-  emptyText = "Aucun r\xE9sultat",
-  errorText = "Impossible de charger les options",
-  clearable = false,
-  disabled = false,
-  invalid = false,
-  required = false,
-  placement = "bottom-start",
-  className,
-  "aria-invalid": ariaInvalid,
-  "aria-required": ariaRequired,
-  ...ariaProps
-}, forwardedRef) {
-  const generatedId = useId();
-  const controlId = id ?? `sia-select-${generatedId.replace(/:/g, "")}`;
-  const listboxId = `${controlId}-listbox`;
-  const triggerRef = useRef(null);
-  const searchRef = useRef(null);
-  const staticOptions = useMemo(
-    () => options ?? optionsFromChildren(children),
-    [children, options]
-  );
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const [remoteOptions, setRemoteOptions] = useState([]);
-  const [selectedRemoteOption, setSelectedRemoteOption] = useState();
-  const [loading, setLoading] = useState(false);
-  const [loadError, setLoadError] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const currentValue = value ?? internalValue;
-  const sourceOptions = fetcher ? remoteOptions : staticOptions;
-  const visibleOptions = useMemo(() => {
-    if (fetcher) return sourceOptions;
-    const needle = query.trim().toLocaleLowerCase();
-    return needle ? sourceOptions.filter((option) => optionText(option).includes(needle)) : sourceOptions;
-  }, [fetcher, query, sourceOptions]);
-  const selectedOption = [...staticOptions, ...remoteOptions].find(
-    (option) => option.value === currentValue
-  ) ?? (selectedRemoteOption?.value === currentValue ? selectedRemoteOption : void 0);
-  useEffect(() => {
-    if (!open || !fetcher) return;
-    const controller = new AbortController();
-    const timeout = window.setTimeout(async () => {
-      setLoading(true);
-      setLoadError(false);
-      try {
-        const nextOptions = await fetcher(query, controller.signal);
-        if (!controller.signal.aborted) setRemoteOptions(nextOptions);
-      } catch {
-        if (!controller.signal.aborted) setLoadError(true);
-      } finally {
-        if (!controller.signal.aborted) setLoading(false);
-      }
-    }, debounce);
-    return () => {
-      window.clearTimeout(timeout);
-      controller.abort();
-    };
-  }, [debounce, fetcher, open, query]);
-  useEffect(() => {
-    if (!open) return;
-    setActiveIndex(visibleOptions.findIndex((option) => option.value === currentValue));
-    if (searchable || fetcher) window.setTimeout(() => searchRef.current?.focus(), 0);
-  }, [currentValue, fetcher, open, searchable, visibleOptions]);
-  const setTriggerRef = (node) => {
-    triggerRef.current = node;
-    if (typeof forwardedRef === "function") forwardedRef(node);
-    else if (forwardedRef) forwardedRef.current = node;
-  };
-  const changeValue = (nextValue, option) => {
-    if (value === void 0) setInternalValue(nextValue);
-    onValueChange?.(nextValue, option);
-  };
-  const choose = (option) => {
-    if (option.disabled) return;
-    if (fetcher) setSelectedRemoteOption(option);
-    changeValue(option.value, option);
-    setOpen(false);
-    setQuery("");
-    window.setTimeout(() => triggerRef.current?.focus(), 0);
-  };
-  const moveActive = (direction) => {
-    if (!visibleOptions.length) return;
-    let next = activeIndex;
-    for (let count = 0; count < visibleOptions.length; count += 1) {
-      next = (next + direction + visibleOptions.length) % visibleOptions.length;
-      if (!visibleOptions[next]?.disabled) break;
-    }
-    setActiveIndex(next);
-  };
-  const handleKeyDown = (event) => {
-    if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-      event.preventDefault();
-      if (!open) setOpen(true);
-      else moveActive(event.key === "ArrowDown" ? 1 : -1);
-      return;
-    }
-    if (event.key === "Home" && open) {
-      event.preventDefault();
-      setActiveIndex(visibleOptions.findIndex((option) => !option.disabled));
-    } else if (event.key === "End" && open) {
-      event.preventDefault();
-      for (let index = visibleOptions.length - 1; index >= 0; index -= 1) {
-        if (!visibleOptions[index]?.disabled) {
-          setActiveIndex(index);
-          break;
-        }
-      }
-    } else if (event.key === "Enter" && open && activeIndex >= 0) {
-      event.preventDefault();
-      const active = visibleOptions[activeIndex];
-      if (active) choose(active);
-    } else if (event.key === "Escape" && open) {
-      event.preventDefault();
-      setOpen(false);
-      triggerRef.current?.focus();
-    } else if (!open && clearable && currentValue && ["Backspace", "Delete"].includes(event.key)) {
-      event.preventDefault();
-      changeValue("");
-    }
-  };
-  const showSearch = searchable || Boolean(fetcher);
-  const activeOption = activeIndex >= 0 ? visibleOptions[activeIndex] : void 0;
-  return /* @__PURE__ */ jsxs("div", { className: cn("sia-select", disabled && "sia-select--disabled", className), children: [
-    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue }),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref: setTriggerRef,
-        id: controlId,
-        type: "button",
-        className: cn("sia-select__trigger", invalid && "sia-select__trigger--invalid"),
-        role: "combobox",
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        "aria-controls": listboxId,
-        "aria-activedescendant": open && activeOption ? `${listboxId}-${activeIndex}` : void 0,
-        "aria-invalid": ariaInvalid ?? (invalid || void 0),
-        "aria-required": ariaRequired ?? (required || void 0),
-        disabled,
-        onClick: () => setOpen((current) => !current),
-        onKeyDown: handleKeyDown,
-        ...ariaProps,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: cn("sia-select__value", !selectedOption && "sia-select__placeholder"), children: selectedOption?.label ?? placeholder }),
-          /* @__PURE__ */ jsxs("span", { className: "sia-select__actions", children: [
-            clearable && currentValue && !disabled && /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "sia-select__clear",
-                "aria-hidden": "true",
-                title: "Effacer la s\xE9lection",
-                onClick: (event) => {
-                  event.stopPropagation();
-                  changeValue("");
-                },
-                children: /* @__PURE__ */ jsx(XIcon, {})
-              }
-            ),
-            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "sia-select__chevron", "aria-hidden": "true" })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Overlay,
-      {
-        open,
-        anchorRef: triggerRef,
-        onOpenChange: setOpen,
-        placement,
-        matchAnchorWidth: true,
-        className: "sia-select__overlay",
-        children: /* @__PURE__ */ jsxs("div", { className: "sia-select__panel", onKeyDown: handleKeyDown, children: [
-          showSearch && /* @__PURE__ */ jsxs("div", { className: "sia-select__search-wrap", children: [
-            /* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: searchRef,
-                className: "sia-select__search",
-                value: query,
-                placeholder: searchPlaceholder,
-                "aria-label": searchPlaceholder,
-                onChange: (event) => setQuery(event.target.value)
-              }
-            ),
-            loading && /* @__PURE__ */ jsx(Spinner, { size: "xs", label: "Chargement" })
-          ] }),
-          /* @__PURE__ */ jsx("div", { id: listboxId, role: "listbox", "aria-busy": loading || void 0, className: "sia-select__options", children: loading && !visibleOptions.length ? /* @__PURE__ */ jsx("div", { className: "sia-select__status", children: loadingText }) : loadError ? /* @__PURE__ */ jsx("div", { className: "sia-select__status sia-select__status--error", children: errorText }) : !visibleOptions.length ? /* @__PURE__ */ jsx("div", { className: "sia-select__status", children: emptyText }) : visibleOptions.map((option, index) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              id: `${listboxId}-${index}`,
-              type: "button",
-              role: "option",
-              "aria-selected": currentValue === option.value,
-              disabled: option.disabled,
-              className: cn(
-                "sia-select__option",
-                index === activeIndex && "sia-select__option--active"
-              ),
-              onMouseEnter: () => setActiveIndex(index),
-              onClick: () => choose(option),
-              children: [
-                /* @__PURE__ */ jsxs("span", { className: "sia-select__option-content", children: [
-                  /* @__PURE__ */ jsx("span", { children: option.label }),
-                  option.description && /* @__PURE__ */ jsx("small", { children: option.description })
-                ] }),
-                currentValue === option.value && /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" })
-              ]
-            },
-            option.value
-          )) })
-        ] })
-      }
-    )
-  ] });
-});
-Select.displayName = "Select";
 function MultiSelect({
   id,
   options,
@@ -5197,6 +5341,14 @@ function Field(rawProps) {
 function isGroup(entry) {
   return "group" in entry;
 }
+function formFieldNames(fields) {
+  const noms = [];
+  for (const entree of fields) {
+    if (isGroup(entree)) noms.push(...entree.fields.map((f) => f.name));
+    else noms.push(entree.name);
+  }
+  return noms;
+}
 var VIDE = {};
 function Form({
   fields,
@@ -5221,6 +5373,26 @@ function Form({
     ...onSubmit ? { onSubmit } : {}
   });
   const form = adapter ?? interne;
+  const locale = useSiaLocale();
+  const [echec, setEchec] = useState(null);
+  const envoyer = () => {
+    setEchec(null);
+    form.submit().catch((error) => {
+      const { fields: erreurs, message } = readSubmitError(error);
+      const connus = new Set(formFieldNames(fields));
+      const sousLesChamps = {};
+      const ailleurs = [];
+      for (const [nom, texte] of Object.entries(erreurs)) {
+        if (connus.has(nom)) sousLesChamps[nom] = texte;
+        else ailleurs.push(texte);
+      }
+      form.setErrors(sousLesChamps);
+      if (ailleurs.length > 0) setEchec(ailleurs.join(" "));
+      else if (Object.keys(sousLesChamps).length === 0) {
+        setEchec(message ?? locale.submitError);
+      }
+    });
+  };
   const busy = loading || form.state.isSubmitting;
   const submitDisabled = busy || requireDirty && !form.state.isDirty || requireValid && !form.state.isValid;
   const grille = (nombre) => ({
@@ -5256,7 +5428,7 @@ function Form({
       noValidate: true,
       onSubmit: (event) => {
         event.preventDefault();
-        void form.submit();
+        envoyer();
       },
       children: [
         /* @__PURE__ */ jsx("div", { className: "sia-form-grid", style: grille(columns), children: fields.map(
@@ -5275,6 +5447,15 @@ function Form({
             )
           ] }, entry.group) : rendre(entry)
         ) }),
+        echec && /* @__PURE__ */ jsx(
+          Alert,
+          {
+            tone: "danger",
+            className: "sia-form-error",
+            onDismiss: () => setEchec(null),
+            children: echec
+          }
+        ),
         actions ?? /* @__PURE__ */ jsxs("div", { className: "sia-form-actions", children: [
           showClear && /* @__PURE__ */ jsx(
             Button,
@@ -5310,23 +5491,15 @@ function Descriptions({ items, title, columns = 2, bordered = false, className }
     ] }, item.key)) })
   ] });
 }
-function nomsDeChamps(fields) {
-  const noms = [];
-  for (const entree of fields) {
-    if ("group" in entree) noms.push(...entree.fields.map((f) => f.name));
-    else noms.push(entree.name);
-  }
-  return noms;
-}
 function valeursVides(fields) {
   const valeurs = {};
-  for (const nom of nomsDeChamps(fields)) valeurs[nom] = "";
+  for (const nom of formFieldNames(fields)) valeurs[nom] = "";
   return valeurs;
 }
 function valeursDeLigne(row, fields) {
   const source = row;
   const valeurs = {};
-  for (const nom of nomsDeChamps(fields)) {
+  for (const nom of formFieldNames(fields)) {
     const valeur = source[nom];
     valeurs[nom] = typeof valeur === "string" || typeof valeur === "number" || typeof valeur === "boolean" || Array.isArray(valeur) ? valeur : "";
   }
@@ -5371,11 +5544,12 @@ function CrudDialogs({
             submitText: dialog?.submitText ?? (creation ? "Cr\xE9er" : "Enregistrer"),
             requireDirty: modification,
             onSubmit: async (values) => {
-              await onSubmit?.(values, {
+              const resultat = await onSubmit?.(values, {
                 mode: creation ? "create" : "edit",
                 ...state?.row !== void 0 ? { row: state.row } : {},
                 ...state?.index !== void 0 ? { index: state.index } : {}
               });
+              if (hasFormErrors(resultat)) return resultat;
               onClose();
             }
           },
@@ -5459,6 +5633,7 @@ function CrudPage({
   searchKeys: clesDeRecherche,
   searchPlaceholder,
   onSearch,
+  searchDelay,
   loading = false,
   error,
   onRetry,
@@ -5466,6 +5641,9 @@ function CrudPage({
   page,
   totalPages,
   onPageChange,
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions,
   table,
   children,
   className
@@ -5545,9 +5723,12 @@ function CrudPage({
     if (!extraRowActions) {
       return actionsDeLigne.length > 0 ? actionsDeLigne : void 0;
     }
+    const suppression = actionsDeLigne.filter((a) => a.key === "delete");
+    const autres = actionsDeLigne.filter((a) => a.key !== "delete");
     return (row, index) => [
-      ...actionsDeLigne,
-      ...typeof extraRowActions === "function" ? extraRowActions(row, index) : extraRowActions
+      ...autres,
+      ...typeof extraRowActions === "function" ? extraRowActions(row, index) : extraRowActions,
+      ...suppression
     ];
   }, [actionsDeLigne, extraRowActions]);
   const creation = operations?.create === false ? null : operations?.create ?? {};
@@ -5581,6 +5762,7 @@ function CrudPage({
         ...searchKeys ? { searchKeys } : {},
         ...searchPlaceholder ? { searchPlaceholder } : {},
         ...onSearch ? { onSearch } : {},
+        ...searchDelay !== void 0 ? { searchDelay } : {},
         ...toutesLesActions ? { rowActions: toutesLesActions } : {},
         ...can ? { can } : {},
         loading,
@@ -5643,7 +5825,10 @@ function CrudPage({
         page,
         totalPages,
         onPageChange,
-        showTotal: true
+        showTotal: true,
+        ...pageSize !== void 0 ? { pageSize } : {},
+        ...onPageSizeChange ? { onPageSizeChange } : {},
+        ...pageSizeOptions ? { pageSizeOptions } : {}
       }
     )
   ] });
@@ -6106,6 +6291,14 @@ var PhoneInput = forwardRef(
       [countries, initial, picked, value]
     );
     const national = value.startsWith(country.dial) ? value.slice(country.dial.length) : digitsOnly(value);
+    const options = useMemo(
+      () => countries.map((entry) => ({
+        value: entry.code,
+        label: `${entry.flag} ${entry.label} (${entry.dial})`,
+        keywords: [entry.code]
+      })),
+      [countries]
+    );
     const commit = (next) => {
       if (!controlled) setInternal(next);
       onValueChange?.(next);
@@ -6127,35 +6320,31 @@ var PhoneInput = forwardRef(
           if (country.digits) next = next.slice(0, country.digits);
           commit(next ? `${country.dial}${next}` : "");
         },
-        left: /* @__PURE__ */ jsxs("span", { className: "sia-phone__country", children: [
+        left: lockCountry ? /* @__PURE__ */ jsxs("span", { className: "sia-phone__country", children: [
           /* @__PURE__ */ jsx("span", { className: "sia-phone__flag", "aria-hidden": "true", children: country.flag }),
-          /* @__PURE__ */ jsx("span", { className: "sia-phone__dial", children: country.dial }),
-          !lockCountry && /* @__PURE__ */ jsx(
-            "select",
-            {
-              className: "sia-phone__select",
-              "aria-label": locale.countryCode,
-              value: country.code,
-              disabled,
-              onChange: (event) => {
-                const next = countries.find(
-                  (entry) => entry.code === event.target.value
-                );
-                if (!next) return;
-                setPicked(next.code);
-                commit(national ? `${next.dial}${national}` : "");
-              },
-              children: countries.map((entry) => /* @__PURE__ */ jsxs("option", { value: entry.code, children: [
-                entry.flag,
-                " ",
-                entry.label,
-                " (",
-                entry.dial,
-                ")"
-              ] }, entry.code))
+          /* @__PURE__ */ jsx("span", { className: "sia-phone__dial", children: country.dial })
+        ] }) : /* @__PURE__ */ jsx(
+          Select,
+          {
+            variant: "embedded",
+            searchable: true,
+            className: "sia-phone__country",
+            "aria-label": locale.countryCode,
+            options,
+            value: country.code,
+            disabled: disabled ?? false,
+            renderValue: () => /* @__PURE__ */ jsxs("span", { className: "sia-phone__value", children: [
+              /* @__PURE__ */ jsx("span", { className: "sia-phone__flag", "aria-hidden": "true", children: country.flag }),
+              /* @__PURE__ */ jsx("span", { className: "sia-phone__dial", children: country.dial })
+            ] }),
+            onValueChange: (code) => {
+              const next = countries.find((entry) => entry.code === code);
+              if (!next) return;
+              setPicked(next.code);
+              commit(national ? `${next.dial}${national}` : "");
             }
-          )
-        ] })
+          }
+        )
       }
     );
   }
@@ -7107,4 +7296,4 @@ function YearPicker({ value, defaultValue = (/* @__PURE__ */ new Date()).getFull
   return /* @__PURE__ */ jsx("select", { className: cn("sia-year-picker", className), value, defaultValue: value === void 0 ? defaultValue : void 0, onChange: (event) => onValueChange?.(Number(event.target.value)), children: years.map((year) => /* @__PURE__ */ jsx("option", { value: year, children: year }, year)) });
 }
 
-export { Accordion, Alert, AlertCircleIcon, AmountDisplay, AppShell, ArrowRightIcon, AspectRatio, AsyncState, AuditMeta, AuthLayout, Autocomplete, Avatar, AvatarGroup, Badge, BottomTabs, Breadcrumb, Button, Calendar, CalendarIcon, Can, Card, CardBody, CardFooter, CardHeader, Chart, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, ColorPicker, CommandPalette, ConfirmDialog, Container, ContextMenu, Countdown, CrudDialogs, CrudPage, CurrencyInput, DEFAULT_COUNTRIES, DataTable, DatePicker, DateRangeFilter, DateRangePicker, DateTimePicker, Descriptions, Divider, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DrawerTitle, DropdownMenu, DurationDisplay, EmptyState, EntityMeta, ErrorState, EventCalendar, EyeIcon, EyeOffIcon, Field, FileUpload, FiltersBar, Form, Field as FormField, Heading, HoverCard, IconButton, ImageUpload, InfoIcon, InlineCode, Input, InputNumber, JsonEditor, KpiGrid, Label, MarkdownEditor, MenuList, MiniCalendar, MinusIcon, Modal, MonthPicker, MoreHorizontalIcon, MultiSelect, OtpInput, Overlay, PageHeader, Pagination, PasswordInput, PermissionGate, PhoneInput, PlusIcon, Popover, Progress, QRCode, Radio, RadioButton, RadioGroup, Rating, ReferenceSelect, RelativeTime, RequireSession, ResizablePanel, RichTextEditor, ScrollArea, SearchIcon, SearchInput, Select, Sidebar, Skeleton, Slider, Sparkline, Spinner, Stack, StarIcon, StatCard, Statistic, Steps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, Text, Textarea, TimePicker, TimeRangePicker, Timeline, Timer, ToastProvider, Toaster, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TrashIcon, Tree, TreeSelect, UnsavedChangesGuard, UploadIcon, WeekPicker, XIcon, YearPicker, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, useDataTableQuery, useToast };
+export { Accordion, Alert, AlertCircleIcon, AmountDisplay, AppShell, AppShellBrand, AppShellRailItem, ArrowRightIcon, AspectRatio, AsyncState, AuditMeta, AuthLayout, Autocomplete, Avatar, AvatarGroup, Badge, BottomTabs, Breadcrumb, Button, Calendar, CalendarIcon, Can, Card, CardBody, CardFooter, CardHeader, Chart, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, ColorPicker, CommandPalette, ConfirmDialog, Container, ContextMenu, Countdown, CrudDialogs, CrudPage, CurrencyInput, DEFAULT_COUNTRIES, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangeFilter, DateRangePicker, DateTimePicker, Descriptions, Divider, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DrawerTitle, DropdownMenu, DurationDisplay, EmptyState, EntityMeta, ErrorState, EventCalendar, EyeIcon, EyeOffIcon, Field, FileUpload, FiltersBar, Form, Field as FormField, Heading, HoverCard, IconButton, ImageUpload, InfoIcon, InlineCode, Input, InputNumber, JsonEditor, KpiGrid, Label, MarkdownEditor, MenuList, MiniCalendar, MinusIcon, Modal, MonthPicker, MoreHorizontalIcon, MultiSelect, OtpInput, Overlay, PageHeader, Pagination, PasswordInput, PermissionGate, PhoneInput, PlusIcon, Popover, Progress, QRCode, Radio, RadioButton, RadioGroup, Rating, ReferenceSelect, RelativeTime, RequireSession, ResizablePanel, RichTextEditor, ScrollArea, SearchIcon, SearchInput, Select, SettingsIcon, Sidebar, Skeleton, Slider, Sparkline, Spinner, Stack, StarIcon, StatCard, Statistic, Steps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, Text, Textarea, TimePicker, TimeRangePicker, Timeline, Timer, ToastProvider, Toaster, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TrashIcon, Tree, TreeSelect, UnsavedChangesGuard, UploadIcon, WeekPicker, XIcon, YearPicker, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formFieldNames, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, useDataTableQuery, useToast };