prime-ui-kit 0.6.0 → 0.7.2

package/dist/index.js

@@ -3914,7 +3914,7 @@ function SelectComboboxRoot({
     defaultValue,
     onChange: handleChange
   });
-  const [selectedLabel, setSelectedLabel] = React37.useState(void 0);
+  const [selectedLabelBinding, setSelectedLabelBinding] = React37.useState(void 0);
   const [isOpen, setIsOpen] = React37.useState(false);
   const [highlightedValue, setHighlightedValue] = React37.useState(void 0);
   const generatedId = React37.useId();
@@ -3925,13 +3925,13 @@ function SelectComboboxRoot({
   selectedValueRef.current = selectedValue;
   const onInitLabel = React37.useCallback((val, label) => {
     if (val === selectedValueRef.current) {
-      setSelectedLabel(label);
+      setSelectedLabelBinding({ value: val, label });
     }
   }, []);
   const onSelect = React37.useCallback(
     (val, label) => {
       setSelectedValue(val);
-      setSelectedLabel(label);
+      setSelectedLabelBinding({ value: val, label });
       setIsOpen(false);
     },
     [setSelectedValue]
@@ -3946,7 +3946,7 @@ function SelectComboboxRoot({
         hasError,
         isOpen,
         selectedValue,
-        selectedLabel,
+        selectedLabelBinding,
         onSelect,
         onClose,
         onOpen,
@@ -4018,8 +4018,8 @@ var SelectTrigger = React37.forwardRef(
 );
 SelectTrigger.displayName = "SelectTrigger";
 function SelectValue({ className }) {
-  const { selectedLabel, selectedValue, placeholder } = useSelectContext();
-  const display = selectedLabel ?? selectedValue ?? placeholder;
+  const { selectedLabelBinding, selectedValue, placeholder } = useSelectContext();
+  const display = selectedLabelBinding && selectedLabelBinding.value === selectedValue ? selectedLabelBinding.label : selectedValue ?? placeholder;
   return /* @__PURE__ */ jsx26(
     "span",
     {
@@ -4155,7 +4155,7 @@ var SelectItem = React37.forwardRef(
     const resolvedLabel = label ?? selectItemTextFromRest(rest) ?? (typeof children === "string" ? children : void 0) ?? value;
     React37.useEffect(() => {
       onInitLabel(value, resolvedLabel);
-    }, [value, resolvedLabel, onInitLabel]);
+    }, [value, resolvedLabel, onInitLabel, selectedValue]);
     const handleClick = () => {
       if (!disabled) onSelect(value, resolvedLabel);
     };
@@ -4782,7 +4782,6 @@ var EyeDropperButton = React38.forwardRef(function EyeDropperButton2({ children,
         className: cx(ColorPicker_default.eyeDropperSquare, className),
         disabled: true,
         mode: "stroke",
-        size: "m",
         tabIndex: -1,
         type,
         variant: "neutral",
@@ -4799,7 +4798,6 @@ var EyeDropperButton = React38.forwardRef(function EyeDropperButton2({ children,
       "aria-label": ariaLabel ?? "\u041F\u0438\u043F\u0435\u0442\u043A\u0430",
       className: cx(ColorPicker_default.eyeDropperSquare, className),
       mode: "stroke",
-      size: "m",
       variant: "neutral",
       onClick: (e) => {
         onClick?.(e);
@@ -4852,10 +4850,88 @@ var ColorPicker = {
 };
 
 // src/components/command-menu/CommandMenu.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 
 // src/components/modal/Modal.tsx
+import * as React40 from "react";
+
+// src/hooks/useModalKeyboard.ts
 import * as React39 from "react";
+function shouldBlockEnterConfirm(target) {
+  if (!target || !(target instanceof HTMLElement)) {
+    return false;
+  }
+  const el = target;
+  if (el.isContentEditable) {
+    return true;
+  }
+  if (el.closest('[contenteditable="true"]')) {
+    return true;
+  }
+  const tag = el.tagName;
+  if (tag === "TEXTAREA") {
+    return true;
+  }
+  if (tag === "SELECT") {
+    return true;
+  }
+  if (tag === "INPUT") {
+    const { type } = el;
+    return type === "checkbox" || type === "radio" || type === "file" || type === "button" || type === "submit" || type === "reset";
+  }
+  return false;
+}
+function useModalKeyboard({
+  open,
+  trapRef,
+  closeOnEscape,
+  onClose,
+  confirmOnEnter,
+  onEnterConfirm,
+  primaryRef
+}) {
+  useEscapeKey({ enabled: closeOnEscape && open, onEscape: onClose });
+  React39.useEffect(() => {
+    if (!open || !confirmOnEnter) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.key !== "Enter" || event.repeat) {
+        return;
+      }
+      const container = trapRef.current;
+      if (!container) {
+        return;
+      }
+      const active = document.activeElement;
+      if (!active || !container.contains(active)) {
+        return;
+      }
+      const header = container.querySelector("header");
+      if (header && event.target instanceof Node && header.contains(event.target)) {
+        return;
+      }
+      if (shouldBlockEnterConfirm(event.target)) {
+        return;
+      }
+      if (onEnterConfirm) {
+        onEnterConfirm(event);
+        return;
+      }
+      const primary = primaryRef.current;
+      if (!primary) {
+        return;
+      }
+      if (active === primary) {
+        return;
+      }
+      event.preventDefault();
+      primary.click();
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [open, confirmOnEnter, onEnterConfirm, primaryRef, trapRef]);
+}
 
 // src/components/modal/Modal.module.css
 var Modal_default = {
@@ -4881,9 +4957,9 @@ var Modal_default = {
 import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
 var MODAL_SHELL_SIZE = "m";
 var [ModalProvider, useModalContext] = createComponentContext("Modal");
-var ModalContentShellContext = React39.createContext(null);
+var ModalContentShellContext = React40.createContext(null);
 function useModalContentShell() {
-  const value = React39.useContext(ModalContentShellContext);
+  const value = React40.useContext(ModalContentShellContext);
   if (value === null) {
     throw new Error(
       "[prime-ui-kit] Modal header block must be used inside the dialog panel (internal)."
@@ -4897,6 +4973,8 @@ function ModalRoot({
   onOpenChange,
   closeOnEscape = true,
   closeOnOverlayClick = true,
+  confirmOnEnter = true,
+  onEnterConfirm,
   children
 }) {
   const [isOpen, setIsOpen] = useControllableState({
@@ -4904,14 +4982,30 @@ function ModalRoot({
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const onOpen = React39.useCallback(() => setIsOpen(true), [setIsOpen]);
-  const onClose = React39.useCallback(() => setIsOpen(false), [setIsOpen]);
-  return /* @__PURE__ */ jsx28(ModalProvider, { value: { open: isOpen, onOpen, onClose, closeOnEscape, closeOnOverlayClick }, children });
+  const primaryActionRef = React40.useRef(null);
+  const onOpen = React40.useCallback(() => setIsOpen(true), [setIsOpen]);
+  const onClose = React40.useCallback(() => setIsOpen(false), [setIsOpen]);
+  return /* @__PURE__ */ jsx28(
+    ModalProvider,
+    {
+      value: {
+        open: isOpen,
+        onOpen,
+        onClose,
+        closeOnEscape,
+        closeOnOverlayClick,
+        confirmOnEnter,
+        onEnterConfirm,
+        primaryActionRef
+      },
+      children
+    }
+  );
 }
 function ModalTrigger({ children }) {
   const { onOpen } = useModalContext();
-  const child = React39.Children.only(children);
-  return React39.cloneElement(child, {
+  const child = React40.Children.only(children);
+  return React40.cloneElement(child, {
     onClick: (event) => {
       child.props.onClick?.(event);
       if (!event.defaultPrevented) {
@@ -4920,10 +5014,13 @@ function ModalTrigger({ children }) {
     }
   });
 }
-function ModalClose({ children }) {
+var ModalClose = React40.forwardRef(function ModalClose2({ children }, forwardedRef) {
   const { onClose } = useModalContext();
-  const child = React39.Children.only(children);
-  return React39.cloneElement(child, {
+  const child = React40.Children.only(children);
+  const childRef = child.ref;
+  const mergedRef = mergeRefs(childRef, forwardedRef);
+  return React40.cloneElement(child, {
+    ref: mergedRef,
     onClick: (event) => {
       child.props.onClick?.(event);
       if (!event.defaultPrevented) {
@@ -4931,6 +5028,24 @@ function ModalClose({ children }) {
       }
     }
   });
+});
+function FooterPrimarySlot({
+  children
+}) {
+  const { primaryActionRef } = useModalContext();
+  const child = React40.Children.only(children);
+  const childRef = child.ref;
+  const mergedRef = mergeRefs(childRef, (node) => {
+    primaryActionRef.current = node;
+  });
+  return React40.cloneElement(child, { ref: mergedRef });
+}
+function ModalFooter({ primary, secondary, extra, className, ...rest }) {
+  return /* @__PURE__ */ jsxs11("footer", { className: cx(Modal_default.footer, className), "data-prime-modal-footer": "", ...rest, children: [
+    secondary,
+    extra,
+    primary != null ? /* @__PURE__ */ jsx28(FooterPrimarySlot, { children: primary }) : null
+  ] });
 }
 function ModalPortal({ children, container }) {
   const { open } = useModalContext();
@@ -4946,7 +5061,7 @@ function ModalOverlay({ className, onClick, children, ...rest }) {
     }
   };
   return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: backdrop overlay; keyboard dismiss handled by useEscapeKey in ModalContent
+    // biome-ignore lint/a11y/noStaticElementInteractions: backdrop overlay; keyboard handled by useModalKeyboard in ModalContent
     /* @__PURE__ */ jsx28(
       "div",
       {
@@ -4971,16 +5086,16 @@ function ModalContent({
   "aria-describedby": ariaDescribedByProp,
   ...rest
 }) {
-  const { open, onClose, closeOnEscape } = useModalContext();
-  const internalTitleId = React39.useId();
-  const internalDescId = React39.useId();
+  const { open, onClose, closeOnEscape, confirmOnEnter, onEnterConfirm, primaryActionRef } = useModalContext();
+  const internalTitleId = React40.useId();
+  const internalDescId = React40.useId();
   const titleId = ariaLabelledByProp ?? internalTitleId;
   const descId = ariaDescribedByProp ?? internalDescId;
-  const [headerState, setHeaderState] = React39.useState(null);
-  const registerHeader = React39.useCallback((state) => {
+  const [headerState, setHeaderState] = React40.useState(null);
+  const registerHeader = React40.useCallback((state) => {
     setHeaderState(state);
   }, []);
-  const shellValue = React39.useMemo(
+  const shellValue = React40.useMemo(
     () => ({ titleId, descId, registerHeader }),
     [titleId, descId, registerHeader]
   );
@@ -4988,8 +5103,16 @@ function ModalContent({
   const ariaDescribedByResolved = ariaDescribedByProp ?? (headerState?.hasDescription ? descId : void 0);
   const trapRef = useFocusTrap({ enabled: open });
   useScrollLock(open);
-  useEscapeKey({ enabled: closeOnEscape && open, onEscape: onClose });
-  React39.useEffect(() => {
+  useModalKeyboard({
+    open,
+    trapRef,
+    closeOnEscape,
+    onClose,
+    confirmOnEnter,
+    onEnterConfirm,
+    primaryRef: primaryActionRef
+  });
+  React40.useEffect(() => {
     if (!open) return;
     const container = trapRef.current;
     if (!container) return;
@@ -5046,7 +5169,7 @@ function ModalHeader({
   const { onClose } = useModalContext();
   const { titleId, descId, registerHeader } = useModalContentShell();
   const hasDescription = description != null && description !== "";
-  React39.useLayoutEffect(() => {
+  React40.useLayoutEffect(() => {
     registerHeader({
       hasDescription
     });
@@ -5089,9 +5212,6 @@ function ModalHeader({
 function ModalBody({ children, className, ...rest }) {
   return /* @__PURE__ */ jsx28("div", { className: cx(Modal_default.body, className), ...rest, children });
 }
-function ModalFooter({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx28("footer", { className: cx(Modal_default.footer, className), ...rest, children });
-}
 function ModalPanel({
   container,
   overlayClassName,
@@ -5113,6 +5233,9 @@ function ModalPanel({
   ...rest
 }) {
   const hasHeader = title != null && title !== "";
+  const footerNode = footer != null ? React40.isValidElement(footer) && footer.type === ModalFooter ? React40.cloneElement(footer, {
+    className: cx(footer.props.className, footerClassName)
+  }) : /* @__PURE__ */ jsx28("footer", { className: cx(Modal_default.footer, footerClassName), children: footer }) : null;
   return /* @__PURE__ */ jsx28(ModalLayer, { className: overlayClassName, container, children: /* @__PURE__ */ jsxs11(
     ModalContent,
     {
@@ -5134,7 +5257,7 @@ function ModalPanel({
           }
         ) : null,
         children != null ? hasHeader ? /* @__PURE__ */ jsx28(ModalBody, { className: bodyClassName, style: bodyStyle, children }) : children : null,
-        footer != null ? /* @__PURE__ */ jsx28(ModalFooter, { className: footerClassName, children: footer }) : null
+        footerNode
       ]
     }
   ) });
@@ -5143,6 +5266,7 @@ var Modal = {
   Root: ModalRoot,
   Trigger: ModalTrigger,
   Close: ModalClose,
+  Footer: ModalFooter,
   Panel: ModalPanel
 };
 
@@ -5190,27 +5314,27 @@ function matchesQuery(entry, query) {
   return hay.includes(q);
 }
 var [CommandMenuProvider, useCommandMenuContext] = createComponentContext("CommandMenu");
-var CommandMenuGroupContext = React40.createContext("");
+var CommandMenuGroupContext = React41.createContext("");
 function CommandMenuRootProvider({ children }) {
-  const listboxId = React40.useId();
-  const inputRef = React40.useRef(null);
-  const itemsRef = React40.useRef(/* @__PURE__ */ new Map());
-  const orderSeqRef = React40.useRef(0);
-  const orderMapRef = React40.useRef(/* @__PURE__ */ new Map());
-  const [version, bump] = React40.useReducer((n) => n + 1, 0);
-  const [search, setSearch] = React40.useState("");
-  const [activeId, setActiveId] = React40.useState(null);
-  React40.useLayoutEffect(() => {
+  const listboxId = React41.useId();
+  const inputRef = React41.useRef(null);
+  const itemsRef = React41.useRef(/* @__PURE__ */ new Map());
+  const orderSeqRef = React41.useRef(0);
+  const orderMapRef = React41.useRef(/* @__PURE__ */ new Map());
+  const [version, bump] = React41.useReducer((n) => n + 1, 0);
+  const [search, setSearch] = React41.useState("");
+  const [activeId, setActiveId] = React41.useState(null);
+  React41.useLayoutEffect(() => {
     orderSeqRef.current = 0;
     orderMapRef.current.clear();
   }, []);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     setSearch("");
     setActiveId(null);
     const id = requestAnimationFrame(() => inputRef.current?.focus());
     return () => cancelAnimationFrame(id);
   }, []);
-  const registerItem = React40.useCallback(
+  const registerItem = React41.useCallback(
     (id, patch) => {
       let order = orderMapRef.current.get(id);
       if (order === void 0) {
@@ -5226,20 +5350,20 @@ function CommandMenuRootProvider({ children }) {
     },
     []
   );
-  const visibleIds = React40.useMemo(() => {
+  const visibleIds = React41.useMemo(() => {
     void version;
     const list = [...itemsRef.current.values()].sort((a, b) => a.order - b.order);
     return list.filter((e) => matchesQuery(e, search)).filter((e) => !e.disabled).map((e) => e.id);
   }, [search, version]);
-  const itemGet = React40.useCallback((id) => itemsRef.current.get(id), []);
-  React40.useLayoutEffect(() => {
+  const itemGet = React41.useCallback((id) => itemsRef.current.get(id), []);
+  React41.useLayoutEffect(() => {
     setActiveId((prev) => {
       if (visibleIds.length === 0) return null;
       if (prev && visibleIds.includes(prev)) return prev;
       return visibleIds[0] ?? null;
     });
   }, [visibleIds]);
-  const moveActive = React40.useCallback(
+  const moveActive = React41.useCallback(
     (delta) => {
       if (visibleIds.length === 0) return;
       setActiveId((prev) => {
@@ -5250,11 +5374,11 @@ function CommandMenuRootProvider({ children }) {
     },
     [visibleIds]
   );
-  const activateSelected = React40.useCallback(() => {
+  const activateSelected = React41.useCallback(() => {
     if (!activeId) return;
     itemsRef.current.get(activeId)?.onSelectRef.current?.();
   }, [activeId]);
-  const value = React40.useMemo(
+  const value = React41.useMemo(
     () => ({
       search,
       setSearch,
@@ -5348,7 +5472,7 @@ function CommandMenuInputRow({
     }
   );
 }
-var CommandMenuInput = React40.forwardRef(
+var CommandMenuInput = React41.forwardRef(
   ({ className, onKeyDown, value: valueProp, onChange, ...rest }, forwardedRef) => {
     const {
       search,
@@ -5362,12 +5486,12 @@ var CommandMenuInput = React40.forwardRef(
       visibleIds
     } = useCommandMenuContext();
     const isControlled = valueProp !== void 0;
-    React40.useEffect(() => {
+    React41.useEffect(() => {
       if (isControlled) {
         setSearch(valueProp !== void 0 && valueProp !== null ? String(valueProp) : "");
       }
     }, [isControlled, valueProp, setSearch]);
-    const setRefs = React40.useCallback(
+    const setRefs = React41.useCallback(
       (node) => {
         inputRef.current = node;
         if (typeof forwardedRef === "function") {
@@ -5435,7 +5559,7 @@ var CommandMenuInput = React40.forwardRef(
   }
 );
 CommandMenuInput.displayName = "CommandMenu.Input";
-var CommandMenuList = React40.forwardRef(
+var CommandMenuList = React41.forwardRef(
   ({ className, children, ...rest }, ref) => {
     const { listboxId } = useCommandMenuContext();
     return /* @__PURE__ */ jsx29(
@@ -5454,7 +5578,7 @@ var CommandMenuList = React40.forwardRef(
 );
 CommandMenuList.displayName = "CommandMenu.List";
 function CommandMenuGroup({ heading, className, children, ...rest }) {
-  const groupId = React40.useId();
+  const groupId = React41.useId();
   const { visibleIds, itemGet } = useCommandMenuContext();
   const hasVisible = visibleIds.some((id) => itemGet(id)?.groupId === groupId);
   return /* @__PURE__ */ jsx29(CommandMenuGroupContext.Provider, { value: groupId, children: /* @__PURE__ */ jsxs12("div", { className: cx(CommandMenu_default.group, className), hidden: hasVisible ? void 0 : true, ...rest, children: [
@@ -5462,7 +5586,7 @@ function CommandMenuGroup({ heading, className, children, ...rest }) {
     children
   ] }) });
 }
-var CommandMenuItem = React40.forwardRef(
+var CommandMenuItem = React41.forwardRef(
   ({
     className,
     value,
@@ -5474,15 +5598,15 @@ var CommandMenuItem = React40.forwardRef(
     onPointerMove,
     ...rest
   }, forwardedRef) => {
-    const id = React40.useId();
+    const id = React41.useId();
     const optionId = `${id}-option`;
-    const groupId = React40.useContext(CommandMenuGroupContext);
+    const groupId = React41.useContext(CommandMenuGroupContext);
     const { registerItem, activeId, setActiveId, visibleIds } = useCommandMenuContext();
-    const onSelectRef = React40.useRef(onSelect);
-    React40.useEffect(() => {
+    const onSelectRef = React41.useRef(onSelect);
+    React41.useEffect(() => {
       onSelectRef.current = onSelect;
     }, [onSelect]);
-    React40.useLayoutEffect(() => {
+    React41.useLayoutEffect(() => {
       return registerItem(id, {
         value,
         keywords,
@@ -5493,8 +5617,8 @@ var CommandMenuItem = React40.forwardRef(
     }, [id, value, keywords, disabled, groupId, registerItem]);
     const filteredIn = visibleIds.includes(id);
     const selected = activeId === id;
-    const listRef = React40.useRef(null);
-    const setRefs = React40.useCallback(
+    const listRef = React41.useRef(null);
+    const setRefs = React41.useCallback(
       (node) => {
         listRef.current = node;
         if (typeof forwardedRef === "function") {
@@ -5505,7 +5629,7 @@ var CommandMenuItem = React40.forwardRef(
       },
       [forwardedRef]
     );
-    React40.useEffect(() => {
+    React41.useEffect(() => {
       if (selected && listRef.current) {
         listRef.current.scrollIntoView?.({ block: "nearest" });
       }
@@ -5567,7 +5691,7 @@ function CommandMenuTagRow({ className, ...rest }) {
 function CommandMenuFooter({ className, ...rest }) {
   return /* @__PURE__ */ jsx29("div", { className: cx(CommandMenu_default.footer, className), ...rest });
 }
-var CommandMenuFooterKeyBox = React40.forwardRef(
+var CommandMenuFooterKeyBox = React41.forwardRef(
   ({ className, children, tone = "default", ...rest }, ref) => {
     const variant = tone === "muted" ? "lighter" : "stroke";
     return /* @__PURE__ */ jsx29(
@@ -5604,7 +5728,7 @@ var CommandMenu = {
 
 // src/components/data-table/DataTable.tsx
 import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
-import * as React41 from "react";
+import * as React42 from "react";
 
 // src/internal/runtimeUnits.ts
 var CSS_PX_SUFFIX = "px";
@@ -5820,11 +5944,11 @@ function DataTableRoot({
   highlightColumnOnHover = false,
   striped = false
 }) {
-  const [hoveredColumnId, setHoveredColumnId] = React41.useState(null);
-  const clearHoveredColumn = React41.useCallback(() => {
+  const [hoveredColumnId, setHoveredColumnId] = React42.useState(null);
+  const clearHoveredColumn = React42.useCallback(() => {
     setHoveredColumnId(null);
   }, []);
-  const setHoveredColumn = React41.useCallback(
+  const setHoveredColumn = React42.useCallback(
     (columnId) => {
       if (highlightColumnOnHover) setHoveredColumnId(columnId);
     },
@@ -5841,19 +5965,19 @@ function DataTableRoot({
     onChange: onPageChange
   });
   const initialVisible = Math.max(1, initialVisibleRows ?? pageSize);
-  const [visibleRowCount, setVisibleRowCount] = React41.useState(initialVisible);
-  const scrollRef = React41.useRef(null);
-  const sentinelRef = React41.useRef(null);
-  React41.useLayoutEffect(() => {
+  const [visibleRowCount, setVisibleRowCount] = React42.useState(initialVisible);
+  const scrollRef = React42.useRef(null);
+  const sentinelRef = React42.useRef(null);
+  React42.useLayoutEffect(() => {
     const viewport = scrollRef.current;
     if (!viewport) return;
     viewport.style.maxHeight = infiniteScroll ? typeof scrollHeight === "number" ? `${scrollHeight}px` : scrollHeight : "";
   }, [infiniteScroll, scrollHeight]);
-  const sortableColumns = React41.useMemo(
+  const sortableColumns = React42.useMemo(
     () => new Set(columns.filter((c) => c.sortable).map((c) => c.id)),
     [columns]
   );
-  const sortedRows = React41.useMemo(() => {
+  const sortedRows = React42.useMemo(() => {
     if (!sortState || !sortableColumns.has(sortState.columnId)) return rows;
     const column = columns.find((item) => item.id === sortState.columnId);
     if (!column) return rows;
@@ -5868,21 +5992,21 @@ function DataTableRoot({
   const safePageSize = Math.max(1, pageSize);
   const totalPages = Math.max(1, Math.ceil(totalRows / safePageSize));
   const safePage = clamp(pageState, 1, totalPages);
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     if (safePage !== pageState) setPageState(safePage);
   }, [pageState, safePage, setPageState]);
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     if (infiniteScroll) {
       setVisibleRowCount(initialVisible);
       return;
     }
     setPageState(1);
   }, [infiniteScroll, initialVisible, setPageState]);
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     if (!infiniteScroll) return;
     setVisibleRowCount((prev) => clamp(prev, initialVisible, Math.max(initialVisible, totalRows)));
   }, [infiniteScroll, initialVisible, totalRows]);
-  const displayedRows = React41.useMemo(() => {
+  const displayedRows = React42.useMemo(() => {
     if (infiniteScroll) {
       return sortedRows.slice(0, visibleRowCount);
     }
@@ -5892,7 +6016,7 @@ function DataTableRoot({
   }, [infiniteScroll, safePage, safePageSize, sortedRows, visibleRowCount]);
   const hasInternalMore = infiniteScroll && displayedRows.length < totalRows;
   const canRequestMore = infiniteScroll && Boolean(onLoadMore) && hasMore && !loadingMore;
-  const handleReachEnd = React41.useCallback(() => {
+  const handleReachEnd = React42.useCallback(() => {
     if (!infiniteScroll) return;
     if (hasInternalMore) {
       setVisibleRowCount((prev) => Math.min(prev + Math.max(1, infiniteBatchSize), totalRows));
@@ -5902,7 +6026,7 @@ function DataTableRoot({
       void onLoadMore();
     }
   }, [canRequestMore, hasInternalMore, infiniteBatchSize, infiniteScroll, onLoadMore, totalRows]);
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     if (!infiniteScroll) return;
     const root = scrollRef.current;
     const target = sentinelRef.current;
@@ -6079,7 +6203,7 @@ var DataTable = {
 
 // src/components/datepicker/Datepicker.tsx
 import { ChevronDown as ChevronDown2, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3 } from "lucide-react";
-import * as React43 from "react";
+import * as React44 from "react";
 import {
   DayPicker,
   getDefaultClassNames,
@@ -6087,14 +6211,14 @@ import {
 } from "react-day-picker";
 
 // src/hooks/useResponsiveMonths.ts
-import * as React42 from "react";
+import * as React43 from "react";
 var DEFAULT_BREAKPOINTS = {
   twoColumns: 520
 };
 function useResponsiveMonths(breakpoints = DEFAULT_BREAKPOINTS, container = null) {
   const { twoColumns } = breakpoints;
-  const [count, setCount] = React42.useState(1);
-  React42.useEffect(() => {
+  const [count, setCount] = React43.useState(1);
+  React43.useEffect(() => {
     if (!container) return;
     let rafId = null;
     const syncByWidth = (width) => {
@@ -6158,9 +6282,9 @@ var Datepicker_default = {
 // src/components/datepicker/Datepicker.tsx
 import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_RESPONSIVE = { twoColumns: 500 };
-var DatepickerSizeContext = React43.createContext(void 0);
+var DatepickerSizeContext = React44.createContext(void 0);
 DatepickerSizeContext.displayName = "DatepickerSizeContext";
-var DatepickerMonthContext = React43.createContext(
+var DatepickerMonthContext = React44.createContext(
   void 0
 );
 DatepickerMonthContext.displayName = "DatepickerMonthContext";
@@ -6223,7 +6347,7 @@ function DatepickerMonthCaption({
   displayIndex,
   ...rest
 }) {
-  const inheritedSize = React43.useContext(DatepickerSizeContext);
+  const inheritedSize = React44.useContext(DatepickerSizeContext);
   const size = inheritedSize ?? "m";
   const { dayPickerProps, goToMonth, previousMonth, nextMonth } = useDayPicker();
   const monthsCount = dayPickerProps.numberOfMonths ?? 1;
@@ -6275,20 +6399,20 @@ function Calendar({
   size: sizeProp,
   ...rest
 }) {
-  const inheritedSize = React43.useContext(DatepickerSizeContext);
-  const monthContext = React43.useContext(DatepickerMonthContext);
+  const inheritedSize = React44.useContext(DatepickerSizeContext);
+  const monthContext = React44.useContext(DatepickerMonthContext);
   const size = sizeProp ?? inheritedSize ?? "m";
   const breakpoints = responsiveBreakpoints ?? DEFAULT_RESPONSIVE;
-  const [containerEl, setContainerEl] = React43.useState(null);
-  const callbackRef = React43.useCallback((node) => {
+  const [containerEl, setContainerEl] = React44.useState(null);
+  const callbackRef = React44.useCallback((node) => {
     setContainerEl(node);
   }, []);
   const responsiveN = useResponsiveMonths(breakpoints, containerEl);
   const numberOfMonths = responsiveMonths === true ? responsiveN : numberOfMonthsProp ?? 1;
-  const [localMonth, setLocalMonth] = React43.useState(() => {
+  const [localMonth, setLocalMonth] = React44.useState(() => {
     return monthProp ?? monthContext?.requestedMonth;
   });
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (monthProp === void 0 && monthContext?.requestedMonth) {
       setLocalMonth(monthContext.requestedMonth);
     }
@@ -6306,7 +6430,7 @@ function Calendar({
   };
   const mergedStyle = style && typeof style === "object" ? { ...style } : {};
   const resolvedMonth = monthProp ?? localMonth;
-  const handleMonthChange = React43.useCallback(
+  const handleMonthChange = React44.useCallback(
     (next) => {
       if (monthProp === void 0) {
         setLocalMonth(next);
@@ -6339,7 +6463,7 @@ function Calendar({
 Calendar.displayName = "Datepicker.Calendar";
 function Shell({ children, className, presets, size = "m" }) {
   const has = presets != null;
-  const [requestedMonth, requestMonth] = React43.useState();
+  const [requestedMonth, requestMonth] = React44.useState();
   return /* @__PURE__ */ jsx32(DatepickerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx32(DatepickerMonthContext.Provider, { value: { requestedMonth, requestMonth }, children: /* @__PURE__ */ jsxs15(
     "div",
     {
@@ -6355,8 +6479,8 @@ function Shell({ children, className, presets, size = "m" }) {
 }
 Shell.displayName = "Datepicker.Shell";
 function Presets(props) {
-  const inheritedSize = React43.useContext(DatepickerSizeContext);
-  const monthContext = React43.useContext(DatepickerMonthContext);
+  const inheritedSize = React44.useContext(DatepickerSizeContext);
+  const monthContext = React44.useContext(DatepickerMonthContext);
   const { className, size: sizeProp } = props;
   const size = sizeProp ?? inheritedSize ?? "m";
   return /* @__PURE__ */ jsx32("div", { className: cx(Datepicker_default.presetsBlock, className), "data-size": size, children: /* @__PURE__ */ jsx32(ButtonGroup.Root, { className: Datepicker_default.presetsGroup, size, children: props.mode === "single" ? props.presets.map((p) => /* @__PURE__ */ jsx32(
@@ -6385,8 +6509,8 @@ function Presets(props) {
 }
 Presets.displayName = "Datepicker.Presets";
 function Time(props) {
-  const baseId = React43.useId();
-  const inheritedSize = React43.useContext(DatepickerSizeContext);
+  const baseId = React44.useId();
+  const inheritedSize = React44.useContext(DatepickerSizeContext);
   if (props.mode === "range") {
     const { from, to, onFromChange, onToChange, labels: labels2, size: sizeProp2 } = props;
     const size2 = sizeProp2 ?? inheritedSize ?? "m";
@@ -6470,7 +6594,7 @@ function Time(props) {
 }
 Time.displayName = "Datepicker.Time";
 function Value({ className, size: sizeProp, tone = "muted", ...rest }) {
-  const inheritedSize = React43.useContext(DatepickerSizeContext);
+  const inheritedSize = React44.useContext(DatepickerSizeContext);
   const size = sizeProp ?? inheritedSize ?? "m";
   return /* @__PURE__ */ jsx32(
     Typography.Root,
@@ -6492,7 +6616,7 @@ var Datepicker = {
 };
 
 // src/components/digit-input/DigitInput.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 
 // src/components/digit-input/DigitInput.module.css
 var DigitInput_default = {
@@ -6528,7 +6652,7 @@ function DigitInputRoot({
   className
 }) {
   const length = lengthProp;
-  const slotKeysRef = React44.useRef(null);
+  const slotKeysRef = React45.useRef(null);
   if (!slotKeysRef.current || slotKeysRef.current.length !== length) {
     slotKeysRef.current = createSlotKeys(length);
   }
@@ -6539,11 +6663,11 @@ function DigitInputRoot({
     defaultValue: defaultNormalized,
     onChange
   });
-  const prevLenRef = React44.useRef(0);
-  React44.useEffect(() => {
+  const prevLenRef = React45.useRef(0);
+  React45.useEffect(() => {
     prevLenRef.current = normalizeDigits(value, length).length;
   }, [length, value]);
-  const commit = React44.useCallback(
+  const commit = React45.useCallback(
     (nextRaw) => {
       const next = normalizeDigits(nextRaw, length);
       const prevLen = prevLenRef.current;
@@ -6556,11 +6680,11 @@ function DigitInputRoot({
     [length, onComplete, setValue]
   );
   const cells = toCells(value, length);
-  const inputRefs = React44.useRef([]);
-  const setInputRef = React44.useCallback((el, index) => {
+  const inputRefs = React45.useRef([]);
+  const setInputRef = React45.useCallback((el, index) => {
     inputRefs.current[index] = el;
   }, []);
-  const focusAt = React44.useCallback((index) => {
+  const focusAt = React45.useCallback((index) => {
     const el = inputRefs.current[index];
     if (el) {
       queueMicrotask(() => el.focus());
@@ -6648,7 +6772,7 @@ DigitInputRoot.displayName = "DigitInputRoot";
 var DigitInput = { Root: DigitInputRoot };
 
 // src/components/drawer/Drawer.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 
 // src/components/drawer/Drawer.module.css
 var Drawer_default = {
@@ -6670,10 +6794,10 @@ var Drawer_default = {
 // src/components/drawer/Drawer.tsx
 import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
 var [DrawerProvider, useDrawerContext] = createComponentContext("Drawer");
-var DrawerChromeSizeContext = React45.createContext(null);
-var DrawerPanelContext = React45.createContext(false);
+var DrawerChromeSizeContext = React46.createContext(null);
+var DrawerPanelContext = React46.createContext(false);
 function useDrawerChromeSize() {
-  const value = React45.useContext(DrawerChromeSizeContext);
+  const value = React46.useContext(DrawerChromeSizeContext);
   if (value === null) {
     throw new Error(
       "[prime-ui-kit] Drawer.Header, Drawer.Title, Drawer.Content and Drawer.Footer must be used inside Drawer.Panel."
@@ -6694,14 +6818,14 @@ function DrawerRoot({
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const onOpen = React45.useCallback(() => setIsOpen(true), [setIsOpen]);
-  const onClose = React45.useCallback(() => setIsOpen(false), [setIsOpen]);
+  const onOpen = React46.useCallback(() => setIsOpen(true), [setIsOpen]);
+  const onClose = React46.useCallback(() => setIsOpen(false), [setIsOpen]);
   return /* @__PURE__ */ jsx34(DrawerProvider, { value: { open: isOpen, onOpen, onClose, closeOnEscape, closeOnOverlayClick }, children });
 }
 function DrawerTrigger({ children }) {
   const { onOpen } = useDrawerContext();
-  const child = React45.Children.only(children);
-  return React45.cloneElement(child, {
+  const child = React46.Children.only(children);
+  return React46.cloneElement(child, {
     onClick: (event) => {
       child.props.onClick?.(event);
       if (!event.defaultPrevented) {
@@ -6712,8 +6836,8 @@ function DrawerTrigger({ children }) {
 }
 function DrawerClose({ children }) {
   const { onClose } = useDrawerContext();
-  const child = React45.Children.only(children);
-  return React45.cloneElement(child, {
+  const child = React46.Children.only(children);
+  return React46.cloneElement(child, {
     onClick: (event) => {
       child.props.onClick?.(event);
       if (!event.defaultPrevented) {
@@ -6769,7 +6893,7 @@ function DrawerPanel({
   const trapRef = useFocusTrap({ enabled: open });
   useScrollLock(open);
   useEscapeKey({ enabled: closeOnEscape && open, onEscape: onClose });
-  React45.useEffect(() => {
+  React46.useEffect(() => {
     if (!open) return;
     const container = trapRef.current;
     if (!container) return;
@@ -6840,7 +6964,7 @@ function DrawerTitle({ children, className, ...rest }) {
   return /* @__PURE__ */ jsx34("h2", { className: cx(Drawer_default.title, className), ...rest, children });
 }
 function DrawerContent(props) {
-  const inPanel = React45.useContext(DrawerPanelContext);
+  const inPanel = React46.useContext(DrawerPanelContext);
   if (!inPanel) {
     return /* @__PURE__ */ jsx34(DrawerPanel, { ...props });
   }
@@ -6867,11 +6991,10 @@ var Drawer = {
 };
 
 // src/components/dropdown/Dropdown.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 
 // src/components/dropdown/Dropdown.module.css
 var Dropdown_default = {
-  inset: "Dropdown_inset",
   content: "Dropdown_content",
   block: "Dropdown_block",
   header: "Dropdown_header",
@@ -6929,7 +7052,7 @@ function handleMenuNavigationKeyDown(e, container) {
 }
 
 // src/components/dropdown/useDropdownPosition.ts
-import * as React46 from "react";
+import * as React47 from "react";
 
 // src/internal/scrollAncestors.ts
 var SCROLLABLE = /^(auto|scroll|overlay)$/;
@@ -6971,8 +7094,8 @@ function useDropdownPosition({
   align,
   sameMinWidthAsTrigger
 }) {
-  const [layout, setLayout] = React46.useState(null);
-  const commit = React46.useCallback(() => {
+  const [layout, setLayout] = React47.useState(null);
+  const commit = React47.useCallback(() => {
     const trigger = triggerRef.current;
     const panel = contentRef.current;
     if (!trigger || !panel) return;
@@ -7007,7 +7130,7 @@ function useDropdownPosition({
     };
     setLayout((prev) => prev && layoutEqual(prev, next) ? prev : next);
   }, [triggerRef, contentRef, side, align, sameMinWidthAsTrigger]);
-  React46.useLayoutEffect(() => {
+  React47.useLayoutEffect(() => {
     if (!open) {
       setLayout(null);
       return;
@@ -7045,9 +7168,9 @@ function useDropdownPosition({
 
 // src/components/dropdown/Dropdown.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
-var DropdownContentSizeContext = React47.createContext("m");
+var DropdownContentSizeContext = React48.createContext("m");
 function useDropdownContentSize() {
-  return React47.useContext(DropdownContentSizeContext);
+  return React48.useContext(DropdownContentSizeContext);
 }
 function dropdownItemIconPx(menuSize) {
   return remToPx(primitiveTokens.icon[menuSize]);
@@ -7059,13 +7182,13 @@ function DropdownRoot({ open, defaultOpen = false, onOpenChange, children }) {
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const id = React47.useId();
+  const id = React48.useId();
   const triggerId = `${id}-trigger`;
   const menuId = `${id}-menu`;
-  const triggerRef = React47.useRef(null);
-  const onClose = React47.useCallback(() => setIsOpen(false), [setIsOpen]);
-  const onToggle = React47.useCallback(() => setIsOpen((v) => !v), [setIsOpen]);
-  const value = React47.useMemo(
+  const triggerRef = React48.useRef(null);
+  const onClose = React48.useCallback(() => setIsOpen(false), [setIsOpen]);
+  const onToggle = React48.useCallback(() => setIsOpen((v) => !v), [setIsOpen]);
+  const value = React48.useMemo(
     () => ({ isOpen, onClose, onToggle, triggerId, menuId, triggerRef }),
     [isOpen, onClose, onToggle, triggerId, menuId]
   );
@@ -7075,9 +7198,9 @@ DropdownRoot.displayName = "DropdownRoot";
 function DropdownTrigger({ children, asChild: _asChild = true }) {
   void _asChild;
   const { isOpen, onToggle, triggerId, menuId, triggerRef } = useDropdownContext();
-  const toggleRef = React47.useRef(onToggle);
+  const toggleRef = React48.useRef(onToggle);
   toggleRef.current = onToggle;
-  const setNode = React47.useCallback(
+  const setNode = React48.useCallback(
     (el) => {
       triggerRef.current = el;
     },
@@ -7085,9 +7208,9 @@ function DropdownTrigger({ children, asChild: _asChild = true }) {
   );
   const child = children;
   const childRef = child.props.ref ?? child.ref;
-  const mergedRef = React47.useMemo(() => mergeRefs(childRef, setNode), [childRef, setNode]);
+  const mergedRef = React48.useMemo(() => mergeRefs(childRef, setNode), [childRef, setNode]);
   const userClick = child.props?.onClick;
-  return React47.cloneElement(child, {
+  return React48.cloneElement(child, {
     ref: mergedRef,
     id: triggerId,
     "aria-expanded": isOpen,
@@ -7110,7 +7233,7 @@ function DropdownContent({
 }) {
   const { isOpen, onClose, triggerRef, menuId, triggerId } = useDropdownContext();
   const overlayPortalLayer = useOverlayPortalLayer();
-  const contentRef = React47.useRef(null);
+  const contentRef = React48.useRef(null);
   const layout = useDropdownPosition({
     open: isOpen,
     triggerRef,
@@ -7120,7 +7243,7 @@ function DropdownContent({
     sameMinWidthAsTrigger
   });
   const trapRef = useFocusTrap({ enabled: isOpen, restoreFocus: true });
-  const ref = React47.useMemo(() => mergeRefs(contentRef, trapRef), [trapRef]);
+  const ref = React48.useMemo(() => mergeRefs(contentRef, trapRef), [trapRef]);
   useEscapeKey({ enabled: isOpen, onEscape: onClose });
   useOutsideClick({
     refs: [triggerRef, contentRef],
@@ -7177,7 +7300,7 @@ function DropdownItem({ onSelect, disabled, destructive, children, className })
   );
 }
 DropdownItem.displayName = "DropdownItem";
-var DropdownItemIcon = React47.forwardRef(
+var DropdownItemIcon = React48.forwardRef(
   ({ as: As = "span", className, children, "aria-hidden": ariaHidden, ...rest }, ref) => {
     const menuSize = useDropdownContentSize();
     const { size: explicitSize, ...iconRest } = rest;
@@ -7266,30 +7389,10 @@ function DropdownHeaderTrailing({
   );
 }
 DropdownHeaderTrailing.displayName = "DropdownHeaderTrailing";
-function DropdownInset({
-  children,
-  className,
-  padding = "x2",
-  gap = "x3",
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx35(
-    "div",
-    {
-      className: cx(Dropdown_default.inset, className),
-      "data-inset-gap": gap,
-      "data-inset-padding": padding,
-      ...rest,
-      children
-    }
-  );
-}
-DropdownInset.displayName = "DropdownInset";
 var Dropdown = {
   Root: DropdownRoot,
   Trigger: DropdownTrigger,
   Content: DropdownContent,
-  Inset: DropdownInset,
   Block: DropdownBlock,
   Header: DropdownHeader,
   HeaderRow: DropdownHeaderRow,
@@ -7305,12 +7408,70 @@ var Dropdown = {
   Separator: DropdownSeparator
 };
 
+// src/components/empty-page/EmptyPage.tsx
+import * as React49 from "react";
+
+// src/components/empty-page/EmptyPage.module.css
+var EmptyPage_default = {
+  root: "EmptyPage_root",
+  iconWrap: "EmptyPage_iconWrap",
+  title: "EmptyPage_title",
+  description: "EmptyPage_description",
+  actions: "EmptyPage_actions"
+};
+
+// src/components/empty-page/EmptyPage.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+var EmptyPageRoot = React49.forwardRef(function EmptyPageRoot2({ size = "m", layout = "default", className, children, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ jsx36(
+    "div",
+    {
+      ref: forwardedRef,
+      className: cx(EmptyPage_default.root, className),
+      ...rest,
+      ...toDataAttributes({
+        size,
+        layout: layout === "fill" ? "fill" : void 0
+      }),
+      children: /* @__PURE__ */ jsx36(ControlSizeProvider, { value: size, children })
+    }
+  );
+});
+EmptyPageRoot.displayName = "EmptyPage.Root";
+function EmptyPageIcon({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx36("div", { className: cx(EmptyPage_default.iconWrap, className), ...rest, children });
+}
+EmptyPageIcon.displayName = "EmptyPage.Icon";
+var EmptyPageTitle = React49.forwardRef(
+  function EmptyPageTitle2({ className, children, ...rest }, forwardedRef) {
+    return /* @__PURE__ */ jsx36("h2", { ref: forwardedRef, className: cx(EmptyPage_default.title, className), ...rest, children });
+  }
+);
+EmptyPageTitle.displayName = "EmptyPage.Title";
+var EmptyPageDescription = React49.forwardRef(
+  function EmptyPageDescription2({ className, children, ...rest }, forwardedRef) {
+    return /* @__PURE__ */ jsx36("p", { ref: forwardedRef, className: cx(EmptyPage_default.description, className), ...rest, children });
+  }
+);
+EmptyPageDescription.displayName = "EmptyPage.Description";
+function EmptyPageActions({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx36("div", { className: cx(EmptyPage_default.actions, className), ...rest, children });
+}
+EmptyPageActions.displayName = "EmptyPage.Actions";
+var EmptyPage = {
+  Root: EmptyPageRoot,
+  Icon: EmptyPageIcon,
+  Title: EmptyPageTitle,
+  Description: EmptyPageDescription,
+  Actions: EmptyPageActions
+};
+
 // src/components/example-frame/ExampleFrame.tsx
 import { Code2, Eye as Eye2, Monitor, Smartphone, Tablet } from "lucide-react";
-import * as React49 from "react";
+import * as React51 from "react";
 
 // src/components/segmented-control/SegmentedControl.tsx
-import * as React48 from "react";
+import * as React50 from "react";
 
 // src/components/segmented-control/SegmentedControl.module.css
 var SegmentedControl_default = {
@@ -7321,7 +7482,7 @@ var SegmentedControl_default = {
 };
 
 // src/components/segmented-control/SegmentedControl.tsx
-import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
 function readCssWidthPx(root, widthExpression) {
   const doc = root.ownerDocument;
   const win = doc.defaultView;
@@ -7349,23 +7510,23 @@ function SegmentedControlRoot({
     defaultValue,
     onChange: onValueChange
   });
-  const [indicator, setIndicator] = React48.useState({
+  const [indicator, setIndicator] = React50.useState({
     left: 0,
     top: 0,
     width: 0,
     height: 0
   });
-  const [animate2, setAnimate] = React48.useState(false);
-  const containerRef = React48.useRef(null);
-  const indicatorRef = React48.useRef(null);
-  const onSelect = React48.useCallback(
+  const [animate2, setAnimate] = React50.useState(false);
+  const containerRef = React50.useRef(null);
+  const indicatorRef = React50.useRef(null);
+  const onSelect = React50.useCallback(
     (nextValue) => {
       setAnimate(true);
       setSelectedValue(nextValue);
     },
     [setSelectedValue]
   );
-  React48.useLayoutEffect(() => {
+  React50.useLayoutEffect(() => {
     const root = containerRef.current;
     if (!root) return;
     const update = () => {
@@ -7402,12 +7563,12 @@ function SegmentedControlRoot({
       ro?.disconnect();
     };
   }, []);
-  React48.useEffect(() => {
+  React50.useEffect(() => {
     if (!animate2) return;
     const id = window.setTimeout(() => setAnimate(false), 320);
     return () => window.clearTimeout(id);
   }, [animate2]);
-  React48.useLayoutEffect(() => {
+  React50.useLayoutEffect(() => {
     const indicatorEl = indicatorRef.current;
     if (!indicatorEl) return;
     indicatorEl.style.transform = `translate3d(${indicator.left}px, ${indicator.top}px, 0)`;
@@ -7438,7 +7599,7 @@ function SegmentedControlRoot({
     if (nextValue) onSelect(nextValue);
   };
   const hasSelection = selectedValue !== "";
-  return /* @__PURE__ */ jsx36(SegmentedControlProvider, { value: { value: selectedValue, onSelect, rootDisabled: disabled }, children: /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsx37(SegmentedControlProvider, { value: { value: selectedValue, onSelect, rootDisabled: disabled }, children: /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: containerRef,
@@ -7451,8 +7612,8 @@ function SegmentedControlRoot({
       "data-size": size,
       "data-animate": animate2 ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsx36(ControlSizeProvider, { value: size, children }),
-        /* @__PURE__ */ jsx36("div", { ref: indicatorRef, className: SegmentedControl_default.indicator, "aria-hidden": "true" })
+        /* @__PURE__ */ jsx37(ControlSizeProvider, { value: size, children }),
+        /* @__PURE__ */ jsx37("div", { ref: indicatorRef, className: SegmentedControl_default.indicator, "aria-hidden": "true" })
       ]
     }
   ) });
@@ -7469,7 +7630,7 @@ function SegmentedControlItem({
   const isDisabled = ctx.rootDisabled || disabled;
   return (
     // biome-ignore lint/a11y/useSemanticElements: compound component intentionally uses role="radio" with roving tabindex
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "button",
       {
         role: "radio",
@@ -7491,7 +7652,7 @@ function SegmentedControlItem({
 }
 SegmentedControlItem.displayName = "SegmentedControl.Item";
 function SegmentedControlIcon({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx36("span", { className: cx(SegmentedControl_default.icon, className), "aria-hidden": "true", ...rest, children });
+  return /* @__PURE__ */ jsx37("span", { className: cx(SegmentedControl_default.icon, className), "aria-hidden": "true", ...rest, children });
 }
 SegmentedControlIcon.displayName = "SegmentedControl.Icon";
 var SegmentedControl = {
@@ -7515,7 +7676,7 @@ var ExampleFrame_default = {
 };
 
 // src/components/example-frame/ExampleFrame.tsx
-import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
 var [ExampleFrameProvider, useExampleFrameContext] = createComponentContext("ExampleFrame");
 function ExampleFrameRoot({
   code,
@@ -7533,14 +7694,14 @@ function ExampleFrameRoot({
   previewLayout = "default",
   themePreset
 }) {
-  const [pane, setPane] = React49.useState("preview");
-  const [uncontrolledViewport, setUncontrolledViewport] = React49.useState(defaultViewport);
-  const [uncontrolledScheme, setUncontrolledScheme] = React49.useState(defaultColorScheme);
+  const [pane, setPane] = React51.useState("preview");
+  const [uncontrolledViewport, setUncontrolledViewport] = React51.useState(defaultViewport);
+  const [uncontrolledScheme, setUncontrolledScheme] = React51.useState(defaultColorScheme);
   const isSchemeControlled = colorSchemeProp !== void 0;
   const colorScheme = isSchemeControlled ? colorSchemeProp : uncontrolledScheme;
   const isViewportControlled = viewportProp !== void 0;
   const viewport = isViewportControlled ? viewportProp : uncontrolledViewport;
-  const setColorScheme = React49.useCallback(
+  const setColorScheme = React51.useCallback(
     (next) => {
       if (!isSchemeControlled) {
         setUncontrolledScheme(next);
@@ -7549,7 +7710,7 @@ function ExampleFrameRoot({
     },
     [isSchemeControlled, onColorSchemeChange]
   );
-  const setViewport = React49.useCallback(
+  const setViewport = React51.useCallback(
     (next) => {
       if (!isViewportControlled) {
         setUncontrolledViewport(next);
@@ -7558,7 +7719,7 @@ function ExampleFrameRoot({
     },
     [isViewportControlled, onViewportChange]
   );
-  const ctxValue = React49.useMemo(
+  const ctxValue = React51.useMemo(
     () => ({
       code,
       language,
@@ -7584,17 +7745,17 @@ function ExampleFrameRoot({
     ]
   );
   let previewChildren = null;
-  React49.Children.forEach(children, (child) => {
-    if (React49.isValidElement(child) && child.type === ExampleFrameStage) {
+  React51.Children.forEach(children, (child) => {
+    if (React51.isValidElement(child) && child.type === ExampleFrameStage) {
       previewChildren = child.props.children ?? null;
     }
   });
   if (previewChildren === null) {
     previewChildren = children;
   }
-  return /* @__PURE__ */ jsx37(ExampleFrameProvider, { value: ctxValue, children: /* @__PURE__ */ jsxs18("div", { className: cx(ExampleFrame_default.root, className), children: [
-    /* @__PURE__ */ jsx37(ExampleFrameToolbar, {}),
-    pane === "preview" ? /* @__PURE__ */ jsx37("div", { className: ExampleFrame_default.previewShell, children: /* @__PURE__ */ jsx37("div", { className: ExampleFrame_default.previewViewport, "data-viewport": viewport, children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(ExampleFrameProvider, { value: ctxValue, children: /* @__PURE__ */ jsxs18("div", { className: cx(ExampleFrame_default.root, className), children: [
+    /* @__PURE__ */ jsx38(ExampleFrameToolbar, {}),
+    pane === "preview" ? /* @__PURE__ */ jsx38("div", { className: ExampleFrame_default.previewShell, children: /* @__PURE__ */ jsx38("div", { className: ExampleFrame_default.previewViewport, "data-viewport": viewport, children: /* @__PURE__ */ jsx38(
       "div",
       {
         className: ExampleFrame_default.previewInner,
@@ -7603,14 +7764,14 @@ function ExampleFrameRoot({
         ...themePreset != null && themePreset !== "" ? { "data-theme-preset": themePreset } : {},
         children: previewChildren
       }
-    ) }) }) : /* @__PURE__ */ jsx37(ExampleFrameCodePane, { themePreset })
+    ) }) }) : /* @__PURE__ */ jsx38(ExampleFrameCodePane, { themePreset })
   ] }) });
 }
 ExampleFrameRoot.displayName = "ExampleFrame.Root";
 function ExampleFrameToolbar() {
   const ctx = useExampleFrameContext();
-  const [copyState, setCopyState] = React49.useState("idle");
-  const handleCopy = React49.useCallback(async () => {
+  const [copyState, setCopyState] = React51.useState("idle");
+  const handleCopy = React51.useCallback(async () => {
     try {
       await navigator.clipboard.writeText(ctx.code);
       setCopyState("copied");
@@ -7636,18 +7797,18 @@ function ExampleFrameToolbar() {
           size: "s",
           children: [
             /* @__PURE__ */ jsxs18(SegmentedControl.Item, { value: "preview", children: [
-              /* @__PURE__ */ jsx37(SegmentedControl.Icon, { children: /* @__PURE__ */ jsx37(Eye2, { size: 14, strokeWidth: 2, "aria-hidden": true }) }),
+              /* @__PURE__ */ jsx38(SegmentedControl.Icon, { children: /* @__PURE__ */ jsx38(Eye2, { size: 14, strokeWidth: 2, "aria-hidden": true }) }),
               "Preview"
             ] }),
             /* @__PURE__ */ jsxs18(SegmentedControl.Item, { value: "code", children: [
-              /* @__PURE__ */ jsx37(SegmentedControl.Icon, { children: /* @__PURE__ */ jsx37(Code2, { size: 14, strokeWidth: 2, "aria-hidden": true }) }),
+              /* @__PURE__ */ jsx38(SegmentedControl.Icon, { children: /* @__PURE__ */ jsx38(Code2, { size: 14, strokeWidth: 2, "aria-hidden": true }) }),
               "Code"
             ] })
           ]
         }
       ),
       /* @__PURE__ */ jsxs18("div", { className: ExampleFrame_default.toolbarLine1End, children: [
-        ctx.showThemeToggle ? /* @__PURE__ */ jsx37(
+        ctx.showThemeToggle ? /* @__PURE__ */ jsx38(
           Button.Root,
           {
             type: "button",
@@ -7656,10 +7817,10 @@ function ExampleFrameToolbar() {
             size: "s",
             onClick: toggleScheme,
             "aria-label": ctx.colorScheme === "light" ? "\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0442\u0451\u043C\u043D\u0443\u044E \u0442\u0435\u043C\u0443" : "\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0441\u0432\u0435\u0442\u043B\u0443\u044E \u0442\u0435\u043C\u0443",
-            children: /* @__PURE__ */ jsx37(Button.Icon, { children: ctx.colorScheme === "light" ? /* @__PURE__ */ jsx37(Icon, { name: "theme.dark", size: "s", tone: "subtle" }) : /* @__PURE__ */ jsx37(Icon, { name: "theme.light", size: "s", tone: "subtle" }) })
+            children: /* @__PURE__ */ jsx38(Button.Icon, { children: ctx.colorScheme === "light" ? /* @__PURE__ */ jsx38(Icon, { name: "theme.dark", size: "s", tone: "subtle" }) : /* @__PURE__ */ jsx38(Icon, { name: "theme.light", size: "s", tone: "subtle" }) })
           }
         ) : null,
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           Button.Root,
           {
             type: "button",
@@ -7668,7 +7829,7 @@ function ExampleFrameToolbar() {
             size: "s",
             onClick: handleCopy,
             "aria-label": copyLabel,
-            children: /* @__PURE__ */ jsx37(Button.Icon, { children: /* @__PURE__ */ jsx37(Icon, { name: "action.copy", size: "s", tone: "subtle" }) })
+            children: /* @__PURE__ */ jsx38(Button.Icon, { children: /* @__PURE__ */ jsx38(Icon, { name: "action.copy", size: "s", tone: "subtle" }) })
           }
         )
       ] })
@@ -7682,15 +7843,15 @@ function ExampleFrameToolbar() {
         size: "s",
         children: [
           /* @__PURE__ */ jsxs18(SegmentedControl.Item, { value: "desktop", children: [
-            /* @__PURE__ */ jsx37(SegmentedControl.Icon, { children: /* @__PURE__ */ jsx37(Monitor, { size: 14, strokeWidth: 2, "aria-hidden": true }) }),
+            /* @__PURE__ */ jsx38(SegmentedControl.Icon, { children: /* @__PURE__ */ jsx38(Monitor, { size: 14, strokeWidth: 2, "aria-hidden": true }) }),
             "Desktop"
           ] }),
           /* @__PURE__ */ jsxs18(SegmentedControl.Item, { value: "tablet", children: [
-            /* @__PURE__ */ jsx37(SegmentedControl.Icon, { children: /* @__PURE__ */ jsx37(Tablet, { size: 14, strokeWidth: 2, "aria-hidden": true }) }),
+            /* @__PURE__ */ jsx38(SegmentedControl.Icon, { children: /* @__PURE__ */ jsx38(Tablet, { size: 14, strokeWidth: 2, "aria-hidden": true }) }),
             "Tablet"
           ] }),
           /* @__PURE__ */ jsxs18(SegmentedControl.Item, { value: "mobile", children: [
-            /* @__PURE__ */ jsx37(SegmentedControl.Icon, { children: /* @__PURE__ */ jsx37(Smartphone, { size: 14, strokeWidth: 2, "aria-hidden": true }) }),
+            /* @__PURE__ */ jsx38(SegmentedControl.Icon, { children: /* @__PURE__ */ jsx38(Smartphone, { size: 14, strokeWidth: 2, "aria-hidden": true }) }),
             "Mobile"
           ] })
         ]
@@ -7703,11 +7864,11 @@ function ExampleFrameCodePane({ themePreset }) {
   const ctx = useExampleFrameContext();
   const trimmed = ctx.code.trimEnd();
   const presetProps = themePreset != null && themePreset !== "" ? { "data-theme-preset": themePreset } : {};
-  return /* @__PURE__ */ jsx37("div", { className: ExampleFrame_default.codePane, "data-theme": ctx.colorScheme, ...presetProps, children: /* @__PURE__ */ jsx37(CodeBlock.Root, { code: trimmed, colorScheme: ctx.colorScheme }) });
+  return /* @__PURE__ */ jsx38("div", { className: ExampleFrame_default.codePane, "data-theme": ctx.colorScheme, ...presetProps, children: /* @__PURE__ */ jsx38(CodeBlock.Root, { code: trimmed, colorScheme: ctx.colorScheme }) });
 }
 ExampleFrameCodePane.displayName = "ExampleFrame.CodePane";
 function ExampleFrameStage({ children }) {
-  return /* @__PURE__ */ jsx37(Fragment5, { children });
+  return /* @__PURE__ */ jsx38(Fragment5, { children });
 }
 ExampleFrameStage.displayName = "ExampleFrame.Stage";
 var ExampleFrame = {
@@ -7716,10 +7877,10 @@ var ExampleFrame = {
 };
 
 // src/components/file-upload/FileUpload.tsx
-import * as React51 from "react";
+import * as React53 from "react";
 
 // src/components/progress-bar/ProgressBar.tsx
-import * as React50 from "react";
+import * as React52 from "react";
 
 // src/components/progress-bar/ProgressBar.module.css
 var ProgressBar_default = {
@@ -7729,18 +7890,18 @@ var ProgressBar_default = {
 };
 
 // src/components/progress-bar/ProgressBar.tsx
-import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
 function clampProgress(value, max) {
   return Math.min(max, Math.max(value, 0));
 }
-var ProgressBarRoot = React50.forwardRef(
+var ProgressBarRoot = React52.forwardRef(
   ({ value, max = 100, label, size = "m", className }, ref) => {
     const safeMax = max > 0 ? max : 100;
     const safeValue = clampProgress(value, safeMax);
-    const labelId = React50.useId();
+    const labelId = React52.useId();
     return /* @__PURE__ */ jsxs19("div", { className: cx(ProgressBar_default.root, className), ...toDataAttributes({ size }), children: [
-      label ? /* @__PURE__ */ jsx38("span", { className: ProgressBar_default.label, id: labelId, children: label }) : null,
-      /* @__PURE__ */ jsx38(
+      label ? /* @__PURE__ */ jsx39("span", { className: ProgressBar_default.label, id: labelId, children: label }) : null,
+      /* @__PURE__ */ jsx39(
         "progress",
         {
           ref,
@@ -7792,26 +7953,26 @@ var FileUpload_default = {
 };
 
 // src/components/file-upload/FileUpload.tsx
-import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
 function FileUploadIcon({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("span", { className: cx(FileUpload_default.iconWrap, className), "aria-hidden": true, ...rest, children });
+  return /* @__PURE__ */ jsx40("span", { className: cx(FileUpload_default.iconWrap, className), "aria-hidden": true, ...rest, children });
 }
 FileUploadIcon.displayName = "FileUpload.Icon";
 function FileUploadTitle({ className, children, tone = "default", ...rest }) {
-  return /* @__PURE__ */ jsx39("p", { className: cx(FileUpload_default.title, tone === "muted" && FileUpload_default.titleMuted, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("p", { className: cx(FileUpload_default.title, tone === "muted" && FileUpload_default.titleMuted, className), ...rest, children });
 }
 FileUploadTitle.displayName = "FileUpload.Title";
 function FileUploadHint({ className, children, ...rest }) {
   const controlSize = useOptionalControlSize() ?? "m";
-  return /* @__PURE__ */ jsx39(Hint.Root, { size: controlSize, className, ...rest, children });
+  return /* @__PURE__ */ jsx40(Hint.Root, { size: controlSize, className, ...rest, children });
 }
 FileUploadHint.displayName = "FileUpload.Hint";
 function FileUploadBrowseLabel({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("span", { className: cx(FileUpload_default.browse, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("span", { className: cx(FileUpload_default.browse, className), ...rest, children });
 }
 FileUploadBrowseLabel.displayName = "FileUpload.BrowseLabel";
-var FileUploadBrowseLink = React51.forwardRef(
-  ({ className, type = "button", onClick, ...rest }, ref) => /* @__PURE__ */ jsx39(
+var FileUploadBrowseLink = React53.forwardRef(
+  ({ className, type = "button", onClick, ...rest }, ref) => /* @__PURE__ */ jsx40(
     "button",
     {
       ref,
@@ -7828,15 +7989,15 @@ var FileUploadBrowseLink = React51.forwardRef(
 );
 FileUploadBrowseLink.displayName = "FileUpload.BrowseLink";
 function FileUploadDropBody({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.dropBody, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.dropBody, className), ...rest, children });
 }
 FileUploadDropBody.displayName = "FileUpload.DropBody";
 function FileUploadActionsRow({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.actionsRow, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.actionsRow, className), ...rest, children });
 }
 FileUploadActionsRow.displayName = "FileUpload.ActionsRow";
-var FileUploadChip = React51.forwardRef(
-  ({ className, type = "button", onClick, ...rest }, ref) => /* @__PURE__ */ jsx39(
+var FileUploadChip = React53.forwardRef(
+  ({ className, type = "button", onClick, ...rest }, ref) => /* @__PURE__ */ jsx40(
     "button",
     {
       ref,
@@ -7853,12 +8014,12 @@ var FileUploadChip = React51.forwardRef(
 );
 FileUploadChip.displayName = "FileUpload.Chip";
 function FileUploadChipLabel({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("span", { className: cx(FileUpload_default.chipLabel, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("span", { className: cx(FileUpload_default.chipLabel, className), ...rest, children });
 }
 FileUploadChipLabel.displayName = "FileUpload.ChipLabel";
 function FileUploadFormatBadge({ format, color = "gray", className }) {
   const label = format.trim().slice(0, 8).toUpperCase();
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "span",
     {
       className: cx(FileUpload_default.formatBadge, className),
@@ -7875,7 +8036,7 @@ function FileUploadItem({
   size = "m",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       className: cx(FileUpload_default.item, className),
@@ -7886,50 +8047,50 @@ function FileUploadItem({
 }
 FileUploadItem.displayName = "FileUpload.Item";
 function FileUploadItemRow({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemRow, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.itemRow, className), ...rest, children });
 }
 FileUploadItemRow.displayName = "FileUpload.ItemRow";
 function FileUploadItemMain({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemMain, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.itemMain, className), ...rest, children });
 }
 FileUploadItemMain.displayName = "FileUpload.ItemMain";
 function FileUploadItemStack({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemStack, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.itemStack, className), ...rest, children });
 }
 FileUploadItemStack.displayName = "FileUpload.ItemStack";
 function FileUploadItemTextGroup({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemTextGroup, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.itemTextGroup, className), ...rest, children });
 }
 FileUploadItemTextGroup.displayName = "FileUpload.ItemTextGroup";
-var FileUploadItemTryAgain = React51.forwardRef(
-  ({ className, type = "button", ...rest }, ref) => /* @__PURE__ */ jsx39("button", { ref, type, className: cx(FileUpload_default.itemTryAgain, className), ...rest })
+var FileUploadItemTryAgain = React53.forwardRef(
+  ({ className, type = "button", ...rest }, ref) => /* @__PURE__ */ jsx40("button", { ref, type, className: cx(FileUpload_default.itemTryAgain, className), ...rest })
 );
 FileUploadItemTryAgain.displayName = "FileUpload.ItemTryAgain";
 function FileUploadItemName({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemName, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.itemName, className), ...rest, children });
 }
 FileUploadItemName.displayName = "FileUpload.ItemName";
 function FileUploadItemMeta({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemMeta, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.itemMeta, className), ...rest, children });
 }
 FileUploadItemMeta.displayName = "FileUpload.ItemMeta";
 function FileUploadItemMetaSep({ className, ...rest }) {
-  return /* @__PURE__ */ jsx39("span", { className: cx(FileUpload_default.itemMetaSep, className), "aria-hidden": true, ...rest, children: "\u2219" });
+  return /* @__PURE__ */ jsx40("span", { className: cx(FileUpload_default.itemMetaSep, className), "aria-hidden": true, ...rest, children: "\u2219" });
 }
 FileUploadItemMetaSep.displayName = "FileUpload.ItemMetaSep";
 function FileUploadItemActions({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemActions, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.itemActions, className), ...rest, children });
 }
 FileUploadItemActions.displayName = "FileUpload.ItemActions";
 function FileUploadItemFooter({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemFooter, className), ...rest, children });
+  return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.itemFooter, className), ...rest, children });
 }
 FileUploadItemFooter.displayName = "FileUpload.ItemFooter";
 function FileUploadItemProgress({ value, max, className, children }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemProgress, className), children: children ?? (value !== void 0 ? /* @__PURE__ */ jsx39(ProgressBar.Root, { value, max }) : null) });
+  return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.itemProgress, className), children: children ?? (value !== void 0 ? /* @__PURE__ */ jsx40(ProgressBar.Root, { value, max }) : null) });
 }
 FileUploadItemProgress.displayName = "FileUpload.ItemProgress";
-var FileUploadRoot = React51.forwardRef(
+var FileUploadRoot = React53.forwardRef(
   ({
     size = "m",
     appearance = "dashed",
@@ -7942,7 +8103,7 @@ var FileUploadRoot = React51.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const [isDragOver, setIsDragOver] = React51.useState(false);
+    const [isDragOver, setIsDragOver] = React53.useState(false);
     const mergeInputRef = useMergedRefs(inputRefProp);
     const handleChange = (e) => {
       const list = e.target.files;
@@ -7971,12 +8132,12 @@ var FileUploadRoot = React51.forwardRef(
       }
     };
     const defaultBody = /* @__PURE__ */ jsxs20("div", { className: FileUpload_default.inner, children: [
-      /* @__PURE__ */ jsx39(FileUploadIcon, { children: /* @__PURE__ */ jsx39(Icon, { name: "action.upload", size, tone: "subtle" }) }),
+      /* @__PURE__ */ jsx40(FileUploadIcon, { children: /* @__PURE__ */ jsx40(Icon, { name: "action.upload", size, tone: "subtle" }) }),
       /* @__PURE__ */ jsxs20("div", { className: FileUpload_default.copy, children: [
-        /* @__PURE__ */ jsx39(FileUploadTitle, { children: "Choose a file or drag & drop it here." }),
-        /* @__PURE__ */ jsx39(FileUploadHint, { children: "JPEG, PNG, PDF, MP4 up to 50 MB." })
+        /* @__PURE__ */ jsx40(FileUploadTitle, { children: "Choose a file or drag & drop it here." }),
+        /* @__PURE__ */ jsx40(FileUploadHint, { children: "JPEG, PNG, PDF, MP4 up to 50 MB." })
       ] }),
-      /* @__PURE__ */ jsx39(FileUploadBrowseLabel, { children: "Browse file" })
+      /* @__PURE__ */ jsx40(FileUploadBrowseLabel, { children: "Browse file" })
     ] });
     return /* @__PURE__ */ jsxs20(
       "label",
@@ -7991,7 +8152,7 @@ var FileUploadRoot = React51.forwardRef(
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "input",
             {
               ref: mergeInputRef,
@@ -8004,7 +8165,7 @@ var FileUploadRoot = React51.forwardRef(
               "aria-disabled": disabled || void 0
             }
           ),
-          /* @__PURE__ */ jsx39(ControlSizeProvider, { value: size, children: children ?? defaultBody })
+          /* @__PURE__ */ jsx40(ControlSizeProvider, { value: size, children: children ?? defaultBody })
         ]
       }
     );
@@ -8038,7 +8199,7 @@ var FileUpload = {
 };
 
 // src/components/kbd/Kbd.tsx
-import * as React52 from "react";
+import * as React54 from "react";
 
 // src/components/kbd/Kbd.module.css
 var Kbd_default = {
@@ -8046,19 +8207,19 @@ var Kbd_default = {
 };
 
 // src/components/kbd/Kbd.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
-var KbdRoot = React52.forwardRef(
+import { jsx as jsx41 } from "react/jsx-runtime";
+var KbdRoot = React54.forwardRef(
   ({ children, className, size: sizeProp, ...rest }, ref) => {
     const controlSurface = useOptionalControlSize();
     const size = sizeProp ?? (controlSurface !== void 0 ? controlSurfaceToInputSize(controlSurface) : "m");
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(
       "kbd",
       {
         ref,
         className: cx(Kbd_default.root, className),
         ...rest,
         ...toDataAttributes({ size }),
-        children: /* @__PURE__ */ jsx40(ControlSizeProvider, { value: size, children })
+        children: /* @__PURE__ */ jsx41(ControlSizeProvider, { value: size, children })
       }
     );
   }
@@ -8068,7 +8229,7 @@ var Kbd = { Root: KbdRoot };
 
 // src/components/notification/Notification.tsx
 import { AlertTriangle, CheckCircle2, Info, X as X3, XCircle } from "lucide-react";
-import * as React53 from "react";
+import * as React55 from "react";
 
 // src/components/notification/Notification.module.css
 var Notification_default = {
@@ -8097,16 +8258,16 @@ var Notification_default = {
 };
 
 // src/components/notification/Notification.tsx
-import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
 function useCountdown(item, paused, onExpire) {
-  const [progress, setProgress] = React53.useState(1);
-  const remainingRef = React53.useRef(item.duration);
-  const lastTsRef = React53.useRef(null);
-  const pausedRef = React53.useRef(paused);
-  const onExpireRef = React53.useRef(onExpire);
+  const [progress, setProgress] = React55.useState(1);
+  const remainingRef = React55.useRef(item.duration);
+  const lastTsRef = React55.useRef(null);
+  const pausedRef = React55.useRef(paused);
+  const onExpireRef = React55.useRef(onExpire);
   pausedRef.current = paused;
   onExpireRef.current = onExpire;
-  React53.useEffect(() => {
+  React55.useEffect(() => {
     if (item.persistent || item.duration <= 0) return;
     remainingRef.current = item.duration;
     lastTsRef.current = null;
@@ -8171,14 +8332,14 @@ function NotificationCard({
         stackExpanded
       }),
       children: [
-        /* @__PURE__ */ jsx41("div", { className: Notification_default.iconWrap, "aria-hidden": "true", children: item.icon ?? /* @__PURE__ */ jsx41(DefaultIcon, { className: Notification_default.icon }) }),
+        /* @__PURE__ */ jsx42("div", { className: Notification_default.iconWrap, "aria-hidden": "true", children: item.icon ?? /* @__PURE__ */ jsx42(DefaultIcon, { className: Notification_default.icon }) }),
         /* @__PURE__ */ jsxs21("div", { className: Notification_default.content, children: [
           /* @__PURE__ */ jsxs21("header", { className: Notification_default.header, children: [
-            /* @__PURE__ */ jsx41("p", { className: Notification_default.title, children: item.title }),
-            item.badge !== void 0 ? /* @__PURE__ */ jsx41("span", { className: Notification_default.badge, children: item.badge }) : null
+            /* @__PURE__ */ jsx42("p", { className: Notification_default.title, children: item.title }),
+            item.badge !== void 0 ? /* @__PURE__ */ jsx42("span", { className: Notification_default.badge, children: item.badge }) : null
           ] }),
-          item.description ? /* @__PURE__ */ jsx41("p", { className: Notification_default.description, children: item.description }) : null,
-          item.action ? /* @__PURE__ */ jsx41("div", { className: Notification_default.actionRow, children: /* @__PURE__ */ jsx41(
+          item.description ? /* @__PURE__ */ jsx42("p", { className: Notification_default.description, children: item.description }) : null,
+          item.action ? /* @__PURE__ */ jsx42("div", { className: Notification_default.actionRow, children: /* @__PURE__ */ jsx42(
             Button.Root,
             {
               type: "button",
@@ -8190,17 +8351,17 @@ function NotificationCard({
             }
           ) }) : null
         ] }),
-        item.closable ? /* @__PURE__ */ jsx41(
+        item.closable ? /* @__PURE__ */ jsx42(
           "button",
           {
             type: "button",
             className: Notification_default.closeButton,
             "aria-label": "Dismiss notification",
             onClick: () => onDismiss(item.id),
-            children: /* @__PURE__ */ jsx41(X3, { "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx42(X3, { "aria-hidden": "true" })
           }
         ) : null,
-        !item.persistent ? /* @__PURE__ */ jsx41("div", { className: Notification_default.progressTrack, "aria-hidden": "true", children: /* @__PURE__ */ jsx41("span", { className: Notification_default.progressValue, style: { transform: `scaleX(${progress})` } }) }) : null
+        !item.persistent ? /* @__PURE__ */ jsx42("div", { className: Notification_default.progressTrack, "aria-hidden": "true", children: /* @__PURE__ */ jsx42("span", { className: Notification_default.progressValue, style: { transform: `scaleX(${progress})` } }) }) : null
       ]
     }
   );
@@ -8208,8 +8369,8 @@ function NotificationCard({
 
 // src/components/notification/NotificationStore.tsx
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
-import * as React54 from "react";
-import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
+import * as React56 from "react";
+import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
 var DEFAULT_DURATION = 5e3;
 var PEEK_VISIBLE = 3;
 var PEEK_PX = 8;
@@ -8236,7 +8397,7 @@ var POSITIONS = [
   "bottom-right"
 ];
 var TYPES = ["success", "error", "warning", "info"];
-var StoreContext = React54.createContext(null);
+var StoreContext = React56.createContext(null);
 function newId() {
   return globalThis.crypto?.randomUUID?.() ?? `ntf-${Date.now()}-${Math.random().toString(16).slice(2)}`;
 }
@@ -8248,10 +8409,10 @@ function NotificationStack({
   items,
   onDismiss
 }) {
-  const [expanded, setExpanded] = React54.useState(false);
-  const collapseTimerRef = React54.useRef(null);
+  const [expanded, setExpanded] = React56.useState(false);
+  const collapseTimerRef = React56.useRef(null);
   const top = isTop(position);
-  const handleHover = React54.useCallback((hovered) => {
+  const handleHover = React56.useCallback((hovered) => {
     if (collapseTimerRef.current !== null) {
       clearTimeout(collapseTimerRef.current);
       collapseTimerRef.current = null;
@@ -8262,14 +8423,14 @@ function NotificationStack({
       collapseTimerRef.current = window.setTimeout(() => setExpanded(false), 100);
     }
   }, []);
-  React54.useEffect(
+  React56.useEffect(
     () => () => {
       if (collapseTimerRef.current !== null) clearTimeout(collapseTimerRef.current);
     },
     []
   );
   const visible = items.filter((n) => !n.dismissing);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     motion.ol,
     {
       layout: true,
@@ -8280,7 +8441,7 @@ function NotificationStack({
       transition: { layout: TWEEN_SLOW },
       onMouseEnter: () => handleHover(true),
       onMouseLeave: () => handleHover(false),
-      children: /* @__PURE__ */ jsx42(AnimatePresence, { children: visible.map((item, index) => /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx43(AnimatePresence, { children: visible.map((item, index) => /* @__PURE__ */ jsx43(
         NotificationStackItem,
         {
           item,
@@ -8296,7 +8457,7 @@ function NotificationStack({
     }
   );
 }
-var NotificationStackItem = React54.memo(function NotificationStackItem2({
+var NotificationStackItem = React56.memo(function NotificationStackItem2({
   item,
   index,
   expanded,
@@ -8311,7 +8472,7 @@ var NotificationStackItem = React54.memo(function NotificationStackItem2({
   const rotateEnter = top ? -45 : 45;
   const rotateExit = top ? 25 : -25;
   const layoutDep = `${item.id}-${index}-${String(expanded)}-${String(hidden)}`;
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     motion.li,
     {
       className: Notification_default.item,
@@ -8347,7 +8508,7 @@ var NotificationStackItem = React54.memo(function NotificationStackItem2({
         transformOrigin: top ? "top center" : "bottom center",
         pointerEvents: hidden ? "none" : "auto"
       },
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx43(
         NotificationCard,
         {
           item,
@@ -8364,7 +8525,7 @@ function NotificationToaster({
   entries,
   onDismiss
 }) {
-  const grouped = React54.useMemo(() => {
+  const grouped = React56.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const entry of entries) {
       if (!map.has(entry.position)) map.set(entry.position, /* @__PURE__ */ new Map());
@@ -8380,18 +8541,18 @@ function NotificationToaster({
     }
     return map;
   }, [entries]);
-  return /* @__PURE__ */ jsx42(Portal, { children: /* @__PURE__ */ jsx42("div", { className: Notification_default.viewport, children: POSITIONS.map((pos) => {
+  return /* @__PURE__ */ jsx43(Portal, { children: /* @__PURE__ */ jsx43("div", { className: Notification_default.viewport, children: POSITIONS.map((pos) => {
     const byType = grouped.get(pos);
     if (!byType?.size) return null;
     const [vertical, horizontal] = pos.split("-");
     const stacks = TYPES.map((type) => ({ type, items: byType.get(type) ?? [] })).filter(
       (s) => s.items.length > 0
     );
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx43(
       "section",
       {
         className: `${Notification_default.zone} ${Notification_default[vertical]} ${Notification_default[horizontal]}`,
-        children: /* @__PURE__ */ jsx42(LayoutGroup, { id: `zone-${pos}`, children: stacks.map((s) => /* @__PURE__ */ jsx42(
+        children: /* @__PURE__ */ jsx43(LayoutGroup, { id: `zone-${pos}`, children: stacks.map((s) => /* @__PURE__ */ jsx43(
           NotificationStack,
           {
             position: pos,
@@ -8410,18 +8571,18 @@ function NotificationProvider({
   position = "top-right",
   max = 5
 }) {
-  const [entries, setEntries] = React54.useState([]);
-  const dismiss = React54.useCallback((id) => {
+  const [entries, setEntries] = React56.useState([]);
+  const dismiss = React56.useCallback((id) => {
     setEntries((prev) => prev.map((n) => n.id === id ? { ...n, dismissing: true } : n));
     window.setTimeout(() => {
       setEntries((prev) => prev.filter((n) => n.id !== id));
     }, DISMISS_CLEANUP_MS);
   }, []);
-  const dismissAll = React54.useCallback(() => {
+  const dismissAll = React56.useCallback(() => {
     setEntries((prev) => prev.map((n) => ({ ...n, dismissing: true })));
     window.setTimeout(() => setEntries([]), DISMISS_CLEANUP_MS);
   }, []);
-  const notify = React54.useCallback(
+  const notify = React56.useCallback(
     (options) => {
       const id = newId();
       const record = {
@@ -8447,29 +8608,29 @@ function NotificationProvider({
     },
     [position, max]
   );
-  const publicItems = React54.useMemo(() => entries.filter((n) => !n.dismissing), [entries]);
-  const value = React54.useMemo(
+  const publicItems = React56.useMemo(() => entries.filter((n) => !n.dismissing), [entries]);
+  const value = React56.useMemo(
     () => ({ items: publicItems, notify, dismiss, dismissAll }),
     [publicItems, notify, dismiss, dismissAll]
   );
   return /* @__PURE__ */ jsxs22(StoreContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx42(NotificationToaster, { entries, onDismiss: dismiss })
+    /* @__PURE__ */ jsx43(NotificationToaster, { entries, onDismiss: dismiss })
   ] });
 }
 function useNotifications() {
-  const ctx = React54.useContext(StoreContext);
+  const ctx = React56.useContext(StoreContext);
   if (!ctx) throw new Error("useNotifications must be used within NotificationProvider");
   return { notify: ctx.notify, dismiss: ctx.dismiss, dismissAll: ctx.dismissAll };
 }
 function useNotificationStore() {
-  const ctx = React54.useContext(StoreContext);
+  const ctx = React56.useContext(StoreContext);
   if (!ctx) throw new Error("useNotificationStore must be used within NotificationProvider");
   return ctx;
 }
 
 // src/components/page-content/PageContent.tsx
-import * as React55 from "react";
+import * as React57 from "react";
 
 // src/components/page-content/PageContent.module.css
 var PageContent_default = {
@@ -8482,10 +8643,10 @@ var PageContent_default = {
 };
 
 // src/components/page-content/PageContent.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
-var PageContentRoot = React55.forwardRef(
+import { jsx as jsx44 } from "react/jsx-runtime";
+var PageContentRoot = React57.forwardRef(
   function PageContentRoot2({ maxWidth = "full", className, children, ...rest }, forwardedRef) {
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx44(
       "div",
       {
         ref: forwardedRef,
@@ -8500,25 +8661,25 @@ var PageContentRoot = React55.forwardRef(
   }
 );
 PageContentRoot.displayName = "PageContent.Root";
-var PageContentSection = React55.forwardRef(
+var PageContentSection = React57.forwardRef(
   function PageContentSection2({ className, children, ...rest }, forwardedRef) {
-    return /* @__PURE__ */ jsx43("section", { ref: forwardedRef, className: cx(PageContent_default.section, className), ...rest, children });
+    return /* @__PURE__ */ jsx44("section", { ref: forwardedRef, className: cx(PageContent_default.section, className), ...rest, children });
   }
 );
 PageContentSection.displayName = "PageContent.Section";
 function PageContentHeader({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx43("div", { className: cx(PageContent_default.header, className), ...rest, children });
+  return /* @__PURE__ */ jsx44("div", { className: cx(PageContent_default.header, className), ...rest, children });
 }
 PageContentHeader.displayName = "PageContent.Header";
-var PageContentTitle = React55.forwardRef(
+var PageContentTitle = React57.forwardRef(
   function PageContentTitle2({ className, children, ...rest }, forwardedRef) {
-    return /* @__PURE__ */ jsx43("h1", { ref: forwardedRef, className: cx(PageContent_default.title, className), ...rest, children });
+    return /* @__PURE__ */ jsx44("h1", { ref: forwardedRef, className: cx(PageContent_default.title, className), ...rest, children });
   }
 );
 PageContentTitle.displayName = "PageContent.Title";
-var PageContentDescription = React55.forwardRef(
+var PageContentDescription = React57.forwardRef(
   function PageContentDescription2({ className, children, measure = "readable", ...rest }, forwardedRef) {
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx44(
       "p",
       {
         ref: forwardedRef,
@@ -8534,7 +8695,7 @@ var PageContentDescription = React55.forwardRef(
 );
 PageContentDescription.displayName = "PageContent.Description";
 function PageContentBody({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx43("div", { className: cx(PageContent_default.body, className), ...rest, children });
+  return /* @__PURE__ */ jsx44("div", { className: cx(PageContent_default.body, className), ...rest, children });
 }
 PageContentBody.displayName = "PageContent.Body";
 var PageContent = {
@@ -8547,17 +8708,17 @@ var PageContent = {
 };
 
 // src/components/popover/Popover.tsx
-import * as React57 from "react";
+import * as React59 from "react";
 
 // src/components/popover/Popover.module.css
 var Popover_default = {
-  content: "Popover_content",
+  popoverScroll: "Popover_popoverScroll",
   popoverInBottom: "Popover_popoverInBottom",
   popoverInTop: "Popover_popoverInTop"
 };
 
 // src/components/popover/usePopoverPosition.ts
-import * as React56 from "react";
+import * as React58 from "react";
 
 // src/components/popover/popoverGeometry.ts
 var POPOVER_MIN_MAX_HEIGHT = 120;
@@ -8584,8 +8745,8 @@ function usePopoverPosition({
   align,
   sameMinWidthAsTrigger
 }) {
-  const [layout, setLayout] = React56.useState(null);
-  const commit = React56.useCallback(() => {
+  const [layout, setLayout] = React58.useState(null);
+  const commit = React58.useCallback(() => {
     const trigger = triggerRef.current;
     const panel = contentRef.current;
     if (!trigger || !panel) return;
@@ -8622,7 +8783,7 @@ function usePopoverPosition({
     };
     setLayout((prev) => prev && layoutEqual2(prev, next) ? prev : next);
   }, [triggerRef, contentRef, side, align, sameMinWidthAsTrigger]);
-  React56.useLayoutEffect(() => {
+  React58.useLayoutEffect(() => {
     if (!open) {
       setLayout(null);
       return;
@@ -8659,7 +8820,7 @@ function usePopoverPosition({
 }
 
 // src/components/popover/Popover.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var [PopoverProvider, usePopoverContext] = createComponentContext("Popover");
 function PopoverRoot({ open, defaultOpen = false, onOpenChange, children }) {
   const [isOpen, setIsOpen] = useControllableState({
@@ -8667,25 +8828,25 @@ function PopoverRoot({ open, defaultOpen = false, onOpenChange, children }) {
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const id = React57.useId();
+  const id = React59.useId();
   const triggerId = `${id}-trigger`;
   const contentId = `${id}-content`;
-  const triggerRef = React57.useRef(null);
-  const onClose = React57.useCallback(() => setIsOpen(false), [setIsOpen]);
-  const onToggle = React57.useCallback(() => setIsOpen((v) => !v), [setIsOpen]);
-  const value = React57.useMemo(
+  const triggerRef = React59.useRef(null);
+  const onClose = React59.useCallback(() => setIsOpen(false), [setIsOpen]);
+  const onToggle = React59.useCallback(() => setIsOpen((v) => !v), [setIsOpen]);
+  const value = React59.useMemo(
     () => ({ isOpen, onClose, onToggle, triggerId, contentId, triggerRef }),
     [isOpen, onClose, onToggle, triggerId, contentId]
   );
-  return /* @__PURE__ */ jsx44(PopoverProvider, { value, children });
+  return /* @__PURE__ */ jsx45(PopoverProvider, { value, children });
 }
 PopoverRoot.displayName = "PopoverRoot";
 function PopoverTrigger({ children, asChild: _asChild = true }) {
   void _asChild;
   const { isOpen, onToggle, triggerId, contentId, triggerRef } = usePopoverContext();
-  const toggleRef = React57.useRef(onToggle);
+  const toggleRef = React59.useRef(onToggle);
   toggleRef.current = onToggle;
-  const setNode = React57.useCallback(
+  const setNode = React59.useCallback(
     (el) => {
       triggerRef.current = el;
     },
@@ -8693,9 +8854,9 @@ function PopoverTrigger({ children, asChild: _asChild = true }) {
   );
   const child = children;
   const childRef = child.props.ref ?? child.ref;
-  const mergedRef = React57.useMemo(() => mergeRefs(childRef, setNode), [childRef, setNode]);
+  const mergedRef = React59.useMemo(() => mergeRefs(childRef, setNode), [childRef, setNode]);
   const userClick = child.props?.onClick;
-  return React57.cloneElement(child, {
+  return React59.cloneElement(child, {
     ref: mergedRef,
     id: triggerId,
     "aria-expanded": isOpen,
@@ -8715,13 +8876,13 @@ function PopoverContent({
   size = "m",
   trapFocus = false,
   insetPadding = "none",
-  insetGap = "none",
+  insetGap = "pad",
   children,
   className
 }) {
   const { isOpen, onClose, triggerRef, contentId, triggerId } = usePopoverContext();
   const overlayPortalLayer = useOverlayPortalLayer();
-  const contentRef = React57.useRef(null);
+  const contentRef = React59.useRef(null);
   const layout = usePopoverPosition({
     open: isOpen,
     triggerRef,
@@ -8734,7 +8895,7 @@ function PopoverContent({
     enabled: isOpen && trapFocus,
     restoreFocus: true
   });
-  const ref = React57.useMemo(() => mergeRefs(contentRef, trapRef), [trapRef]);
+  const ref = React59.useMemo(() => mergeRefs(contentRef, trapRef), [trapRef]);
   useEscapeKey({ enabled: isOpen, onEscape: onClose });
   useOutsideClick({
     refs: [triggerRef, contentRef],
@@ -8743,7 +8904,7 @@ function PopoverContent({
     shouldSuppressOutsideClick: (target) => isPortaledSelectListboxOwnedByContainer(target, contentRef.current)
   });
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx44(Portal, { children: /* @__PURE__ */ jsx44(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(Portal, { children: /* @__PURE__ */ jsx45(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx45(
     ScrollContainer,
     {
       ref,
@@ -8757,7 +8918,7 @@ function PopoverContent({
       "data-size": size,
       "data-inset-padding": insetPadding,
       "data-inset-gap": insetGap,
-      className: cx(Popover_default.content, className),
+      className: cx(Popover_default.popoverScroll, className),
       style: layout?.style,
       children
     }
@@ -8771,7 +8932,7 @@ var Popover = {
 };
 
 // src/components/progress-circle/ProgressCircle.tsx
-import * as React58 from "react";
+import * as React60 from "react";
 
 // src/components/progress-circle/ProgressCircle.module.css
 var ProgressCircle_default = {
@@ -8782,12 +8943,12 @@ var ProgressCircle_default = {
 };
 
 // src/components/progress-circle/ProgressCircle.tsx
-import { jsx as jsx45, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs23 } from "react/jsx-runtime";
 var pc = primitiveTokens.progressCircle;
 function clampProgress2(value, max) {
   return Math.min(max, Math.max(value, 0));
 }
-var ProgressCircleRoot = React58.forwardRef(
+var ProgressCircleRoot = React60.forwardRef(
   ({ value, max = 100, size = "m", label, children, className }, ref) => {
     const safeMax = max > 0 ? max : 100;
     const safeValue = clampProgress2(value, safeMax);
@@ -8821,7 +8982,7 @@ var ProgressCircleRoot = React58.forwardRef(
               "aria-valuemax": safeMax,
               "aria-label": label,
               children: [
-                /* @__PURE__ */ jsx45(
+                /* @__PURE__ */ jsx46(
                   "circle",
                   {
                     cx: center,
@@ -8832,7 +8993,7 @@ var ProgressCircleRoot = React58.forwardRef(
                     strokeWidth
                   }
                 ),
-                /* @__PURE__ */ jsx45(
+                /* @__PURE__ */ jsx46(
                   "circle",
                   {
                     cx: center,
@@ -8849,7 +9010,7 @@ var ProgressCircleRoot = React58.forwardRef(
               ]
             }
           ),
-          children ? /* @__PURE__ */ jsx45("div", { className: ProgressCircle_default.inner, children }) : null
+          children ? /* @__PURE__ */ jsx46("div", { className: ProgressCircle_default.inner, children }) : null
         ]
       }
     );
@@ -8859,7 +9020,7 @@ ProgressCircleRoot.displayName = "ProgressCircleRoot";
 var ProgressCircle = { Root: ProgressCircleRoot };
 
 // src/components/radio/Radio.tsx
-import * as React59 from "react";
+import * as React61 from "react";
 
 // src/components/radio/Radio.module.css
 var Radio_default = {
@@ -8875,9 +9036,9 @@ var Radio_default = {
 };
 
 // src/components/radio/Radio.tsx
-import { jsx as jsx46, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
 var [RadioProvider, useRadioContext] = createComponentContext("Radio");
-var RadioRoot = React59.forwardRef(
+var RadioRoot = React61.forwardRef(
   ({
     id,
     variant = "default",
@@ -8888,14 +9049,14 @@ var RadioRoot = React59.forwardRef(
     children,
     ...inputRest
   }, ref) => {
-    const rawId = React59.useId();
+    const rawId = React61.useId();
     const inputId = id ?? rawId;
     const hintId = `${inputId}-hint`;
     const errorId = `${inputId}-error`;
-    const [hasHint, setHasHint] = React59.useState(false);
-    const [hasError, setHasError] = React59.useState(false);
+    const [hasHint, setHasHint] = React61.useState(false);
+    const [hasError, setHasError] = React61.useState(false);
     const invalid = variant === "error" || hasError;
-    const restInputPropsRef = React59.useRef(inputRest);
+    const restInputPropsRef = React61.useRef(inputRest);
     restInputPropsRef.current = inputRest;
     const parts = [
       ariaDescribedBy,
@@ -8903,11 +9064,11 @@ var RadioRoot = React59.forwardRef(
       hasError ? errorId : void 0
     ].filter(Boolean);
     const describedBy = parts.length > 0 ? parts.join(" ") : void 0;
-    const registerHint = React59.useCallback(() => setHasHint(true), []);
-    const unregisterHint = React59.useCallback(() => setHasHint(false), []);
-    const registerError = React59.useCallback(() => setHasError(true), []);
-    const unregisterError = React59.useCallback(() => setHasError(false), []);
-    const ctxValue = React59.useMemo(
+    const registerHint = React61.useCallback(() => setHasHint(true), []);
+    const unregisterHint = React61.useCallback(() => setHasHint(false), []);
+    const registerError = React61.useCallback(() => setHasError(true), []);
+    const unregisterError = React61.useCallback(() => setHasError(false), []);
+    const ctxValue = React61.useMemo(
       () => ({
         inputId,
         hintId,
@@ -8938,7 +9099,7 @@ var RadioRoot = React59.forwardRef(
         unregisterError
       ]
     );
-    return /* @__PURE__ */ jsx46(RadioProvider, { value: ctxValue, children: /* @__PURE__ */ jsx46(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx47(RadioProvider, { value: ctxValue, children: /* @__PURE__ */ jsx47(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx47(
       "div",
       {
         className: cx(Radio_default.field, className),
@@ -8954,9 +9115,9 @@ var RadioRoot = React59.forwardRef(
   }
 );
 RadioRoot.displayName = "RadioRoot";
-var RadioLabel = React59.forwardRef(function RadioLabel2({ children, className, ...rest }, ref) {
+var RadioLabel = React61.forwardRef(function RadioLabel2({ children, className, ...rest }, ref) {
   const { inputId, inputRef, invalid, disabled, describedBy, restInputPropsRef, size } = useRadioContext();
-  const filterId = React59.useId();
+  const filterId = React61.useId();
   const svgFilterId = `es-radio-${filterId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxs24(
     Label.Root,
@@ -8969,7 +9130,7 @@ var RadioLabel = React59.forwardRef(function RadioLabel2({ children, className,
       ...rest,
       children: [
         /* @__PURE__ */ jsxs24("span", { className: Radio_default.controlCell, children: [
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx47(
             "input",
             {
               ref: inputRef,
@@ -8983,8 +9144,8 @@ var RadioLabel = React59.forwardRef(function RadioLabel2({ children, className,
             }
           ),
           /* @__PURE__ */ jsxs24("svg", { viewBox: "0 0 18 18", className: Radio_default.svg, "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx46("defs", { children: /* @__PURE__ */ jsx46("filter", { id: svgFilterId, children: /* @__PURE__ */ jsx46("feDropShadow", { dx: "0", dy: "1", stdDeviation: "0.5", floodOpacity: "0.10" }) }) }),
-            /* @__PURE__ */ jsx46(
+            /* @__PURE__ */ jsx47("defs", { children: /* @__PURE__ */ jsx47("filter", { id: svgFilterId, children: /* @__PURE__ */ jsx47("feDropShadow", { dx: "0", dy: "1", stdDeviation: "0.5", floodOpacity: "0.10" }) }) }),
+            /* @__PURE__ */ jsx47(
               "circle",
               {
                 cx: "9",
@@ -8994,10 +9155,10 @@ var RadioLabel = React59.forwardRef(function RadioLabel2({ children, className,
                 filter: `url(#${svgFilterId})`
               }
             ),
-            /* @__PURE__ */ jsx46("circle", { cx: "9", cy: "9", r: "4", className: Radio_default.innerCircle })
+            /* @__PURE__ */ jsx47("circle", { cx: "9", cy: "9", r: "4", className: Radio_default.innerCircle })
           ] })
         ] }),
-        children !== void 0 && children !== null ? /* @__PURE__ */ jsx46("span", { className: Radio_default.text, children }) : null
+        children !== void 0 && children !== null ? /* @__PURE__ */ jsx47("span", { className: Radio_default.text, children }) : null
       ]
     }
   );
@@ -9005,13 +9166,13 @@ var RadioLabel = React59.forwardRef(function RadioLabel2({ children, className,
 RadioLabel.displayName = "RadioLabel";
 function RadioHint({ children, className, ...rest }) {
   const { hintId, registerHint, unregisterHint, size, disabled } = useRadioContext();
-  React59.useLayoutEffect(() => {
+  React61.useLayoutEffect(() => {
     registerHint();
     return () => {
       unregisterHint();
     };
   }, [registerHint, unregisterHint]);
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     Hint.Root,
     {
       id: hintId,
@@ -9026,13 +9187,13 @@ function RadioHint({ children, className, ...rest }) {
 RadioHint.displayName = "RadioHint";
 function RadioError({ children, className, ...rest }) {
   const { errorId, registerError, unregisterError, size } = useRadioContext();
-  React59.useLayoutEffect(() => {
+  React61.useLayoutEffect(() => {
     registerError();
     return () => {
       unregisterError();
     };
   }, [registerError, unregisterError]);
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     Hint.Root,
     {
       id: errorId,
@@ -9053,7 +9214,7 @@ var Radio = {
 };
 
 // src/components/segmented-progress-bar/SegmentedProgressBar.tsx
-import * as React60 from "react";
+import * as React62 from "react";
 
 // src/components/segmented-progress-bar/SegmentedProgressBar.module.css
 var SegmentedProgressBar_default = {
@@ -9065,7 +9226,7 @@ var SegmentedProgressBar_default = {
 };
 
 // src/components/segmented-progress-bar/SegmentedProgressBar.tsx
-import { jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
 function clampNonNegative(n) {
   return Number.isFinite(n) && n > 0 ? n : 0;
 }
@@ -9082,15 +9243,15 @@ function buildDistributionDescription(segments, total) {
   });
   return parts.join(", ");
 }
-var SegmentedProgressBarRoot = React60.forwardRef(
+var SegmentedProgressBarRoot = React62.forwardRef(
   ({ segments, label, size = "m", segmentGap = "none", className }, ref) => {
-    const labelId = React60.useId();
-    const descriptionId = React60.useId();
-    const safe = React60.useMemo(
+    const labelId = React62.useId();
+    const descriptionId = React62.useId();
+    const safe = React62.useMemo(
       () => segments.map((s) => ({ ...s, value: clampNonNegative(s.value) })),
       [segments]
     );
-    const total = React60.useMemo(() => safe.reduce((acc, s) => acc + s.value, 0), [safe]);
+    const total = React62.useMemo(() => safe.reduce((acc, s) => acc + s.value, 0), [safe]);
     const distributionText = buildDistributionDescription(safe, total);
     const trackA11y = label ? { "aria-labelledby": labelId, "aria-describedby": descriptionId } : { "aria-label": distributionText };
     return /* @__PURE__ */ jsxs25(
@@ -9099,10 +9260,10 @@ var SegmentedProgressBarRoot = React60.forwardRef(
         className: cx(SegmentedProgressBar_default.root, className),
         ...toDataAttributes({ size, "segment-gap": segmentGap }),
         children: [
-          label ? /* @__PURE__ */ jsx47("span", { className: SegmentedProgressBar_default.label, id: labelId, children: label }) : null,
-          label ? /* @__PURE__ */ jsx47("span", { id: descriptionId, className: SegmentedProgressBar_default.visuallyHidden, children: distributionText }) : null,
-          /* @__PURE__ */ jsx47("div", { ref, className: SegmentedProgressBar_default.track, role: "group", ...trackA11y, children: total > 0 ? safe.map((seg, i) => {
-            return /* @__PURE__ */ jsx47(
+          label ? /* @__PURE__ */ jsx48("span", { className: SegmentedProgressBar_default.label, id: labelId, children: label }) : null,
+          label ? /* @__PURE__ */ jsx48("span", { id: descriptionId, className: SegmentedProgressBar_default.visuallyHidden, children: distributionText }) : null,
+          /* @__PURE__ */ jsx48("div", { ref, className: SegmentedProgressBar_default.track, role: "group", ...trackA11y, children: total > 0 ? safe.map((seg, i) => {
+            return /* @__PURE__ */ jsx48(
               "div",
               {
                 className: SegmentedProgressBar_default.segment,
@@ -9122,7 +9283,7 @@ SegmentedProgressBarRoot.displayName = "SegmentedProgressBarRoot";
 var SegmentedProgressBar = { Root: SegmentedProgressBarRoot };
 
 // src/components/slider/Slider.tsx
-import * as React61 from "react";
+import * as React63 from "react";
 
 // src/components/slider/Slider.module.css
 var Slider_default = {
@@ -9132,7 +9293,7 @@ var Slider_default = {
 };
 
 // src/components/slider/Slider.tsx
-import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
 function clamp2(n, min, max) {
   return Math.min(max, Math.max(min, n));
 }
@@ -9158,7 +9319,7 @@ function SliderRoot({
     defaultValue: clamp2(initialDefault, min, max),
     onChange
   });
-  const id = React61.useId();
+  const id = React63.useId();
   const safeValue = clamp2(value, min, max);
   const applyValueFromInput = (el) => {
     const next = Number.parseFloat(el.value);
@@ -9173,9 +9334,9 @@ function SliderRoot({
   const handleRangeInput = (e) => {
     applyValueFromInput(e.currentTarget);
   };
-  return /* @__PURE__ */ jsx48("div", { className: cx(Slider_default.root, className), ...toDataAttributes({ size }), children: /* @__PURE__ */ jsxs26(ControlSizeProvider, { value: size, children: [
-    label ? /* @__PURE__ */ jsx48("label", { className: Slider_default.label, htmlFor: id, children: label }) : null,
-    /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49("div", { className: cx(Slider_default.root, className), ...toDataAttributes({ size }), children: /* @__PURE__ */ jsxs26(ControlSizeProvider, { value: size, children: [
+    label ? /* @__PURE__ */ jsx49("label", { className: Slider_default.label, htmlFor: id, children: label }) : null,
+    /* @__PURE__ */ jsx49(
       "input",
       {
         id: label ? id : void 0,
@@ -9197,7 +9358,7 @@ SliderRoot.displayName = "SliderRoot";
 var Slider2 = { Root: SliderRoot };
 
 // src/components/stepper/HorizontalStepper.tsx
-import * as React62 from "react";
+import * as React64 from "react";
 
 // src/components/stepper/StepperAlign.module.css
 var StepperAlign_default = {
@@ -9215,10 +9376,10 @@ var StepperAlign_default = {
 };
 
 // src/components/stepper/stepperAlignContext.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var [StepperAlignItemProvider, useStepperAlignItemState] = createComponentContext("StepperAlign.Item");
 function StepperAlignCheckIcon({ className }) {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     "svg",
     {
       className,
@@ -9226,7 +9387,7 @@ function StepperAlignCheckIcon({ className }) {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx49(
+      children: /* @__PURE__ */ jsx50(
         "path",
         {
           fill: "currentColor",
@@ -9238,14 +9399,14 @@ function StepperAlignCheckIcon({ className }) {
 }
 
 // src/components/stepper/HorizontalStepper.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function HorizontalStepperRoot({
   className,
   size = "m",
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx50(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx50("div", { className: cx(StepperAlign_default.hRoot, className), "data-size": size, ...rest, children }) });
+  return /* @__PURE__ */ jsx51(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx51("div", { className: cx(StepperAlign_default.hRoot, className), "data-size": size, ...rest, children }) });
 }
 HorizontalStepperRoot.displayName = "HorizontalStepper.Root";
 function HorizontalStepperSeparatorIcon({
@@ -9254,12 +9415,12 @@ function HorizontalStepperSeparatorIcon({
   ...rest
 }) {
   const Component = as ?? IconChevronRight;
-  return /* @__PURE__ */ jsx50("span", { className: StepperAlign_default.hSeparator, "aria-hidden": "true", children: /* @__PURE__ */ jsx50(Component, { className: cx(StepperAlign_default.hSeparatorIcon, className), strokeWidth: 2, ...rest }) });
+  return /* @__PURE__ */ jsx51("span", { className: StepperAlign_default.hSeparator, "aria-hidden": "true", children: /* @__PURE__ */ jsx51(Component, { className: cx(StepperAlign_default.hSeparatorIcon, className), strokeWidth: 2, ...rest }) });
 }
 HorizontalStepperSeparatorIcon.displayName = "HorizontalStepper.SeparatorIcon";
-var HorizontalStepperItem = React62.forwardRef(
+var HorizontalStepperItem = React64.forwardRef(
   function HorizontalStepperItem2({ state = "default", className, type = "button", children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx50(StepperAlignItemProvider, { value: { state }, children: /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx51(StepperAlignItemProvider, { value: { state }, children: /* @__PURE__ */ jsx51(
       "button",
       {
         ref,
@@ -9282,9 +9443,9 @@ function HorizontalStepperItemIndicator({
   const { state: ctxState } = useStepperAlignItemState();
   const state = stateProp ?? ctxState;
   if (state === "completed") {
-    return /* @__PURE__ */ jsx50("div", { className: cx(StepperAlign_default.hIndicator, className), "data-state": state, ...rest, children: /* @__PURE__ */ jsx50(StepperAlignCheckIcon, { className: StepperAlign_default.hCheck }) });
+    return /* @__PURE__ */ jsx51("div", { className: cx(StepperAlign_default.hIndicator, className), "data-state": state, ...rest, children: /* @__PURE__ */ jsx51(StepperAlignCheckIcon, { className: StepperAlign_default.hCheck }) });
   }
-  return /* @__PURE__ */ jsx50("div", { className: cx(StepperAlign_default.hIndicator, className), "data-state": state, ...rest, children });
+  return /* @__PURE__ */ jsx51("div", { className: cx(StepperAlign_default.hIndicator, className), "data-state": state, ...rest, children });
 }
 HorizontalStepperItemIndicator.displayName = "HorizontalStepper.ItemIndicator";
 var HorizontalStepper = {
@@ -9295,7 +9456,7 @@ var HorizontalStepper = {
 };
 
 // src/components/stepper/Stepper.tsx
-import * as React64 from "react";
+import * as React66 from "react";
 
 // src/components/stepper/Stepper.module.css
 var Stepper_default = {
@@ -9308,15 +9469,15 @@ var Stepper_default = {
 };
 
 // src/components/stepper/VerticalStepper.tsx
-import * as React63 from "react";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import * as React65 from "react";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function VerticalStepperRoot({
   className,
   size = "m",
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx51(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx51("div", { className: cx(StepperAlign_default.vRoot, className), "data-size": size, ...rest, children }) });
+  return /* @__PURE__ */ jsx52(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx52("div", { className: cx(StepperAlign_default.vRoot, className), "data-size": size, ...rest, children }) });
 }
 VerticalStepperRoot.displayName = "VerticalStepper.Root";
 function VerticalStepperArrow({
@@ -9325,12 +9486,12 @@ function VerticalStepperArrow({
   ...rest
 }) {
   const Component = as ?? IconChevronRight;
-  return /* @__PURE__ */ jsx51(Component, { className: cx(StepperAlign_default.vArrow, className), strokeWidth: 2, ...rest });
+  return /* @__PURE__ */ jsx52(Component, { className: cx(StepperAlign_default.vArrow, className), strokeWidth: 2, ...rest });
 }
 VerticalStepperArrow.displayName = "VerticalStepper.Arrow";
-var VerticalStepperItem = React63.forwardRef(
+var VerticalStepperItem = React65.forwardRef(
   function VerticalStepperItem2({ state = "default", className, type = "button", children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx51(StepperAlignItemProvider, { value: { state }, children: /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx52(StepperAlignItemProvider, { value: { state }, children: /* @__PURE__ */ jsx52(
       "button",
       {
         ref,
@@ -9353,9 +9514,9 @@ function VerticalStepperItemIndicator({
   const { state: ctxState } = useStepperAlignItemState();
   const state = stateProp ?? ctxState;
   if (state === "completed") {
-    return /* @__PURE__ */ jsx51("div", { className: cx(StepperAlign_default.vIndicator, className), "data-state": state, ...rest, children: /* @__PURE__ */ jsx51(StepperAlignCheckIcon, { className: StepperAlign_default.vCheck }) });
+    return /* @__PURE__ */ jsx52("div", { className: cx(StepperAlign_default.vIndicator, className), "data-state": state, ...rest, children: /* @__PURE__ */ jsx52(StepperAlignCheckIcon, { className: StepperAlign_default.vCheck }) });
   }
-  return /* @__PURE__ */ jsx51("div", { className: cx(StepperAlign_default.vIndicator, className), "data-state": state, ...rest, children });
+  return /* @__PURE__ */ jsx52("div", { className: cx(StepperAlign_default.vIndicator, className), "data-state": state, ...rest, children });
 }
 VerticalStepperItemIndicator.displayName = "VerticalStepper.ItemIndicator";
 var VerticalStepper = {
@@ -9366,7 +9527,7 @@ var VerticalStepper = {
 };
 
 // src/components/stepper/Stepper.tsx
-import { jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
 var [StepperRootProvider, useStepperRootContext] = createComponentContext("Stepper");
 var [StepperStepProvider, useStepperStepContext] = createComponentContext("Stepper.Step");
 function toAlignState(status) {
@@ -9386,18 +9547,18 @@ function StepperRoot({
   children,
   className
 }) {
-  const indexRef = React64.useRef(0);
+  const indexRef = React66.useRef(0);
   indexRef.current = 0;
-  const getNextStepIndex = React64.useCallback(() => {
+  const getNextStepIndex = React66.useCallback(() => {
     const idx = indexRef.current;
     indexRef.current += 1;
     return idx;
   }, []);
-  const value = React64.useMemo(
+  const value = React66.useMemo(
     () => ({ orientation, currentStep, getNextStepIndex }),
     [orientation, currentStep, getNextStepIndex]
   );
-  return /* @__PURE__ */ jsx52(StepperRootProvider, { value, children: /* @__PURE__ */ jsx52(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(StepperRootProvider, { value, children: /* @__PURE__ */ jsx53(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx53(
     "ol",
     {
       className: cx(
@@ -9412,11 +9573,11 @@ function StepperRoot({
 }
 StepperRoot.displayName = "Stepper.Root";
 function StepperSeparatorIcon({ className }) {
-  return /* @__PURE__ */ jsx52("li", { className: Stepper_default.separatorLi, "aria-hidden": "true", children: /* @__PURE__ */ jsx52(HorizontalStepper.SeparatorIcon, { className }) });
+  return /* @__PURE__ */ jsx53("li", { className: Stepper_default.separatorLi, "aria-hidden": "true", children: /* @__PURE__ */ jsx53(HorizontalStepper.SeparatorIcon, { className }) });
 }
 StepperSeparatorIcon.displayName = "Stepper.SeparatorIcon";
 function StepperArrow({ className, ...rest }) {
-  return /* @__PURE__ */ jsx52(VerticalStepper.Arrow, { className, ...rest });
+  return /* @__PURE__ */ jsx53(VerticalStepper.Arrow, { className, ...rest });
 }
 StepperArrow.displayName = "Stepper.Arrow";
 function StepperIndicator({ children, className }) {
@@ -9425,8 +9586,8 @@ function StepperIndicator({ children, className }) {
   const alignState = toAlignState(status);
   const indClass = orientation === "horizontal" ? StepperAlign_default.hIndicator : StepperAlign_default.vIndicator;
   const checkClass = orientation === "horizontal" ? StepperAlign_default.hCheck : StepperAlign_default.vCheck;
-  const defaultChild = status === "completed" ? /* @__PURE__ */ jsx52(StepperAlignCheckIcon, { className: checkClass }) : String(index + 1);
-  return /* @__PURE__ */ jsx52(
+  const defaultChild = status === "completed" ? /* @__PURE__ */ jsx53(StepperAlignCheckIcon, { className: checkClass }) : String(index + 1);
+  return /* @__PURE__ */ jsx53(
     "span",
     {
       className: cx(indClass, className),
@@ -9440,18 +9601,18 @@ function StepperIndicator({ children, className }) {
 StepperIndicator.displayName = "Stepper.Indicator";
 function StepperContent({ title, description, className }) {
   return /* @__PURE__ */ jsxs27("div", { className: cx(Stepper_default.content, className), children: [
-    /* @__PURE__ */ jsx52("div", { className: Stepper_default.title, children: title }),
-    description ? /* @__PURE__ */ jsx52("p", { className: Stepper_default.description, children: description }) : null
+    /* @__PURE__ */ jsx53("div", { className: Stepper_default.title, children: title }),
+    description ? /* @__PURE__ */ jsx53("p", { className: Stepper_default.description, children: description }) : null
   ] });
 }
 StepperContent.displayName = "Stepper.Content";
-var StepperStep = React64.forwardRef(function StepperStep2({ index: indexProp, status: statusProp, children, className, disabled, type = "button", ...rest }, ref) {
+var StepperStep = React66.forwardRef(function StepperStep2({ index: indexProp, status: statusProp, children, className, disabled, type = "button", ...rest }, ref) {
   const { currentStep, orientation, getNextStepIndex } = useStepperRootContext();
   const index = indexProp ?? getNextStepIndex();
   const status = statusProp ?? computeStepStatus(index, currentStep);
   const alignState = toAlignState(status);
   const itemClass = orientation === "horizontal" ? StepperAlign_default.hItem : StepperAlign_default.vItem;
-  return /* @__PURE__ */ jsx52(StepperStepProvider, { value: { status, index }, children: /* @__PURE__ */ jsx52(StepperAlignItemProvider, { value: { state: alignState }, children: /* @__PURE__ */ jsx52("li", { className: Stepper_default.stepLi, "data-status": status, children: /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(StepperStepProvider, { value: { status, index }, children: /* @__PURE__ */ jsx53(StepperAlignItemProvider, { value: { state: alignState }, children: /* @__PURE__ */ jsx53("li", { className: Stepper_default.stepLi, "data-status": status, children: /* @__PURE__ */ jsx53(
     "button",
     {
       ref,
@@ -9479,7 +9640,7 @@ var Stepper = {
 };
 
 // src/components/switch/Switch.tsx
-import * as React65 from "react";
+import * as React67 from "react";
 
 // src/components/switch/Switch.module.css
 var Switch_default = {
@@ -9493,9 +9654,9 @@ var Switch_default = {
 };
 
 // src/components/switch/Switch.tsx
-import { jsx as jsx53, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
 var [SwitchProvider, useSwitchContext] = createComponentContext("Switch");
-var SwitchRoot = React65.forwardRef(
+var SwitchRoot = React67.forwardRef(
   ({
     id,
     checked,
@@ -9510,19 +9671,19 @@ var SwitchRoot = React65.forwardRef(
     children,
     ...inputRest
   }, ref) => {
-    const rawId = React65.useId();
+    const rawId = React67.useId();
     const inputId = id ?? rawId;
     const hintId = `${inputId}-hint`;
     const errorId = `${inputId}-error`;
-    const [hasHint, setHasHint] = React65.useState(false);
-    const [hasError, setHasError] = React65.useState(false);
+    const [hasHint, setHasHint] = React67.useState(false);
+    const [hasError, setHasError] = React67.useState(false);
     const invalid = variant === "error" || hasError;
     const [isChecked, setChecked] = useControllableState({
       value: checked,
       defaultValue: defaultChecked,
       onChange: onCheckedChange
     });
-    const handleChange = React65.useCallback(
+    const handleChange = React67.useCallback(
       (e) => {
         if (readOnly) {
           e.preventDefault();
@@ -9532,7 +9693,7 @@ var SwitchRoot = React65.forwardRef(
       },
       [readOnly, setChecked]
     );
-    const restInputPropsRef = React65.useRef(inputRest);
+    const restInputPropsRef = React67.useRef(inputRest);
     restInputPropsRef.current = inputRest;
     const parts = [
       ariaDescribedBy,
@@ -9540,11 +9701,11 @@ var SwitchRoot = React65.forwardRef(
       hasError ? errorId : void 0
     ].filter(Boolean);
     const describedBy = parts.length > 0 ? parts.join(" ") : void 0;
-    const registerHint = React65.useCallback(() => setHasHint(true), []);
-    const unregisterHint = React65.useCallback(() => setHasHint(false), []);
-    const registerError = React65.useCallback(() => setHasError(true), []);
-    const unregisterError = React65.useCallback(() => setHasError(false), []);
-    const ctxValue = React65.useMemo(
+    const registerHint = React67.useCallback(() => setHasHint(true), []);
+    const unregisterHint = React67.useCallback(() => setHasHint(false), []);
+    const registerError = React67.useCallback(() => setHasError(true), []);
+    const unregisterError = React67.useCallback(() => setHasError(false), []);
+    const ctxValue = React67.useMemo(
       () => ({
         inputId,
         hintId,
@@ -9581,7 +9742,7 @@ var SwitchRoot = React65.forwardRef(
         unregisterError
       ]
     );
-    return /* @__PURE__ */ jsx53(SwitchProvider, { value: ctxValue, children: /* @__PURE__ */ jsx53(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx53(
+    return /* @__PURE__ */ jsx54(SwitchProvider, { value: ctxValue, children: /* @__PURE__ */ jsx54(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx54(
       "div",
       {
         className: cx(Switch_default.field, className),
@@ -9599,7 +9760,7 @@ var SwitchRoot = React65.forwardRef(
   }
 );
 SwitchRoot.displayName = "SwitchRoot";
-var SwitchLabel = React65.forwardRef(function SwitchLabel2({ children, className, ...rest }, ref) {
+var SwitchLabel = React67.forwardRef(function SwitchLabel2({ children, className, ...rest }, ref) {
   const {
     inputId,
     inputRef,
@@ -9623,7 +9784,7 @@ var SwitchLabel = React65.forwardRef(function SwitchLabel2({ children, className
       ...rest,
       children: [
         /* @__PURE__ */ jsxs28("span", { className: Switch_default.controlCell, children: [
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             "input",
             {
               ref: inputRef,
@@ -9641,9 +9802,9 @@ var SwitchLabel = React65.forwardRef(function SwitchLabel2({ children, className
               ...restInputPropsRef.current
             }
           ),
-          /* @__PURE__ */ jsx53("span", { className: Switch_default.track, "aria-hidden": "true" })
+          /* @__PURE__ */ jsx54("span", { className: Switch_default.track, "aria-hidden": "true" })
         ] }),
-        children !== void 0 && children !== null ? /* @__PURE__ */ jsx53("span", { className: Switch_default.text, children }) : null
+        children !== void 0 && children !== null ? /* @__PURE__ */ jsx54("span", { className: Switch_default.text, children }) : null
       ]
     }
   );
@@ -9651,13 +9812,13 @@ var SwitchLabel = React65.forwardRef(function SwitchLabel2({ children, className
 SwitchLabel.displayName = "SwitchLabel";
 function SwitchHint({ children, className, ...rest }) {
   const { hintId, registerHint, unregisterHint, size, disabled } = useSwitchContext();
-  React65.useLayoutEffect(() => {
+  React67.useLayoutEffect(() => {
     registerHint();
     return () => {
       unregisterHint();
     };
   }, [registerHint, unregisterHint]);
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     Hint.Root,
     {
       id: hintId,
@@ -9672,13 +9833,13 @@ function SwitchHint({ children, className, ...rest }) {
 SwitchHint.displayName = "SwitchHint";
 function SwitchError({ children, className, ...rest }) {
   const { errorId, registerError, unregisterError, size } = useSwitchContext();
-  React65.useLayoutEffect(() => {
+  React67.useLayoutEffect(() => {
     registerError();
     return () => {
       unregisterError();
     };
   }, [registerError, unregisterError]);
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     Hint.Root,
     {
       id: errorId,
@@ -9699,7 +9860,7 @@ var Switch = {
 };
 
 // src/components/tabs/Tabs.tsx
-import * as React66 from "react";
+import * as React68 from "react";
 
 // src/components/tabs/Tabs.module.css
 var Tabs_default = {
@@ -9715,7 +9876,7 @@ var Tabs_default = {
 };
 
 // src/components/tabs/Tabs.tsx
-import { jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
 var [TabsProvider, useTabsContext] = createComponentContext("Tabs");
 function TabsRoot({
   value,
@@ -9726,29 +9887,29 @@ function TabsRoot({
   children,
   className
 }) {
-  const rootId = React66.useId();
+  const rootId = React68.useId();
   const [activeValue, setActiveValue] = useControllableState({
     value,
     defaultValue,
     onChange: onValueChange
   });
-  const contextValue = React66.useMemo(
+  const contextValue = React68.useMemo(
     () => ({ activeValue, onSelect: setActiveValue, orientation, rootId, size }),
     [activeValue, setActiveValue, orientation, rootId, size]
   );
-  return /* @__PURE__ */ jsx54(TabsProvider, { value: contextValue, children: /* @__PURE__ */ jsx54("div", { className: cx(Tabs_default.root, className), "data-orientation": orientation, "data-size": size, children }) });
+  return /* @__PURE__ */ jsx55(TabsProvider, { value: contextValue, children: /* @__PURE__ */ jsx55("div", { className: cx(Tabs_default.root, className), "data-orientation": orientation, "data-size": size, children }) });
 }
 TabsRoot.displayName = "TabsRoot";
 function TabsList({ children, className }) {
   const { orientation, rootId, activeValue, onSelect, size } = useTabsContext();
-  const listRef = React66.useRef(null);
-  const [indicator, setIndicator] = React66.useState({
+  const listRef = React68.useRef(null);
+  const [indicator, setIndicator] = React68.useState({
     left: 0,
     top: 0,
     width: 0,
     height: 0
   });
-  const updateIndicator = React66.useCallback(() => {
+  const updateIndicator = React68.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const active = list.querySelector('[role="tab"][aria-selected="true"]');
@@ -9763,7 +9924,7 @@ function TabsList({ children, className }) {
       height: active.offsetHeight
     });
   }, []);
-  React66.useLayoutEffect(() => {
+  React68.useLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
     updateIndicator();
@@ -9828,8 +9989,8 @@ function TabsList({ children, className }) {
       className: cx(Tabs_default.list, className),
       onKeyDown: handleKeyDown,
       children: [
-        /* @__PURE__ */ jsx54(ControlSizeProvider, { value: size, children }),
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx55(ControlSizeProvider, { value: size, children }),
+        /* @__PURE__ */ jsx55(
           "div",
           {
             className: cx(
@@ -9855,7 +10016,7 @@ TabsList.displayName = "TabsList";
 function TabsTab({ value, disabled = false, children, className }) {
   const { activeValue, onSelect, rootId } = useTabsContext();
   const isSelected = activeValue === value;
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     "button",
     {
       role: "tab",
@@ -9877,18 +10038,18 @@ function TabsTab({ value, disabled = false, children, className }) {
 }
 TabsTab.displayName = "TabsTab";
 function TabsIcon({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx54("span", { className: cx(Tabs_default.icon, className), "aria-hidden": "true", ...rest, children });
+  return /* @__PURE__ */ jsx55("span", { className: cx(Tabs_default.icon, className), "aria-hidden": "true", ...rest, children });
 }
 TabsIcon.displayName = "TabsIcon";
 function TabsLabel({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx54("span", { className: cx(Tabs_default.label, className), ...rest, children });
+  return /* @__PURE__ */ jsx55("span", { className: cx(Tabs_default.label, className), ...rest, children });
 }
 TabsLabel.displayName = "TabsLabel";
 function TabsPanel({ value, children, className }) {
   const { activeValue, rootId } = useTabsContext();
   const isActive = activeValue === value;
   if (!isActive) return null;
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     "div",
     {
       role: "tabpanel",
@@ -9910,7 +10071,7 @@ var Tabs = {
 };
 
 // src/components/tag/Tag.tsx
-import * as React67 from "react";
+import * as React69 from "react";
 
 // src/components/tag/Tag.module.css
 var Tag_default = {
@@ -9922,8 +10083,8 @@ var Tag_default = {
 };
 
 // src/components/tag/Tag.tsx
-import { jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
-var TagRoot = React67.forwardRef(
+import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
+var TagRoot = React69.forwardRef(
   ({ size: sizeProp, onRemove, disabled, children, className, ...rest }, ref) => {
     const controlSurface = useOptionalControlSize();
     const size = sizeProp ?? (controlSurface !== void 0 ? controlSurfaceToInputSize(controlSurface) : "m");
@@ -9939,8 +10100,8 @@ var TagRoot = React67.forwardRef(
         }),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx55("span", { className: Tag_default.body, children: /* @__PURE__ */ jsx55(ControlSizeProvider, { value: size, children }) }),
-          onRemove ? /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx56("span", { className: Tag_default.body, children: /* @__PURE__ */ jsx56(ControlSizeProvider, { value: size, children }) }),
+          onRemove ? /* @__PURE__ */ jsx56(
             "button",
             {
               type: "button",
@@ -9948,7 +10109,7 @@ var TagRoot = React67.forwardRef(
               "aria-label": "Remove",
               onClick: onRemove,
               disabled,
-              children: /* @__PURE__ */ jsx55("svg", { className: Tag_default.removeIcon, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx55(
+              children: /* @__PURE__ */ jsx56("svg", { className: Tag_default.removeIcon, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx56(
                 "path",
                 {
                   d: "M2 2l8 8M10 2l-8 8",
@@ -9966,13 +10127,13 @@ var TagRoot = React67.forwardRef(
 );
 TagRoot.displayName = "TagRoot";
 function TagIcon({ children, className }) {
-  return /* @__PURE__ */ jsx55("span", { className: cx(Tag_default.icon, className), children });
+  return /* @__PURE__ */ jsx56("span", { className: cx(Tag_default.icon, className), children });
 }
 TagIcon.displayName = "TagIcon";
 var Tag = { Root: TagRoot, Icon: TagIcon };
 
 // src/components/textarea/Textarea.tsx
-import * as React68 from "react";
+import * as React70 from "react";
 
 // src/components/textarea/Textarea.module.css
 var Textarea_default = {
@@ -9989,7 +10150,7 @@ var Textarea_default = {
 };
 
 // src/components/textarea/Textarea.tsx
-import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 var [TextareaProvider, useTextareaContext] = createComponentContext("Textarea");
 function TextareaCharCounter({ current, max }) {
   const overflow = current > max;
@@ -10011,8 +10172,8 @@ TextareaCharCounter.displayName = "Textarea.CharCounter";
 function partitionTextareaChildren(children) {
   const counters = [];
   const rest = [];
-  React68.Children.forEach(children, (child) => {
-    if (React68.isValidElement(child) && child.type === TextareaCharCounter) {
+  React70.Children.forEach(children, (child) => {
+    if (React70.isValidElement(child) && child.type === TextareaCharCounter) {
       counters.push(child);
     } else if (child != null && child !== false) {
       rest.push(child);
@@ -10020,7 +10181,7 @@ function partitionTextareaChildren(children) {
   });
   return { counters, rest };
 }
-var TextareaRoot = React68.forwardRef(
+var TextareaRoot = React70.forwardRef(
   ({
     id,
     className,
@@ -10037,12 +10198,12 @@ var TextareaRoot = React68.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const rawId = React68.useId();
+    const rawId = React70.useId();
     const inputId = id ?? rawId;
     const hintId = `${inputId}-hint`;
     const errorId = `${inputId}-error`;
-    const [hasHint, setHasHint] = React68.useState(false);
-    const [hasError, setHasError] = React68.useState(false);
+    const [hasHint, setHasHint] = React70.useState(false);
+    const [hasError, setHasError] = React70.useState(false);
     const invalid = variant === "error" || hasError;
     const resolvedAriaInvalid = ariaInvalid ?? (invalid || void 0);
     const parts = [
@@ -10051,25 +10212,25 @@ var TextareaRoot = React68.forwardRef(
       hasError ? errorId : void 0
     ].filter(Boolean);
     const describedBy = parts.length > 0 ? parts.join(" ") : void 0;
-    const registerHint = React68.useCallback(() => setHasHint(true), []);
-    const unregisterHint = React68.useCallback(() => setHasHint(false), []);
-    const registerError = React68.useCallback(() => setHasError(true), []);
-    const unregisterError = React68.useCallback(() => setHasError(false), []);
-    const wrapperRef = React68.useRef(null);
+    const registerHint = React70.useCallback(() => setHasHint(true), []);
+    const unregisterHint = React70.useCallback(() => setHasHint(false), []);
+    const registerError = React70.useCallback(() => setHasError(true), []);
+    const unregisterError = React70.useCallback(() => setHasError(false), []);
+    const wrapperRef = React70.useRef(null);
     const { counters: counterChildren, rest: otherChildren } = partitionTextareaChildren(children);
     const showFooter = counterChildren.length > 0;
-    React68.useLayoutEffect(() => {
+    React70.useLayoutEffect(() => {
       if (!autoResize || !wrapperRef.current) return;
       const textarea = wrapperRef.current.querySelector("textarea");
       if (textarea) {
         wrapperRef.current.dataset.value = textarea.value;
       }
     }, [autoResize]);
-    React68.useEffect(() => {
+    React70.useEffect(() => {
       if (!autoResize || !wrapperRef.current || typeof value !== "string") return;
       wrapperRef.current.dataset.value = value;
     }, [autoResize, value]);
-    const handleInput = React68.useCallback(
+    const handleInput = React70.useCallback(
       (e) => {
         if (autoResize && wrapperRef.current) {
           wrapperRef.current.dataset.value = e.currentTarget.value;
@@ -10078,7 +10239,7 @@ var TextareaRoot = React68.forwardRef(
       },
       [autoResize, onInput]
     );
-    const ctxValue = React68.useMemo(
+    const ctxValue = React70.useMemo(
       () => ({
         hintId,
         errorId,
@@ -10102,7 +10263,7 @@ var TextareaRoot = React68.forwardRef(
         unregisterError
       ]
     );
-    const textareaEl = /* @__PURE__ */ jsx56(
+    const textareaEl = /* @__PURE__ */ jsx57(
       "textarea",
       {
         ref,
@@ -10118,9 +10279,9 @@ var TextareaRoot = React68.forwardRef(
         ...rest
       }
     );
-    const textareaBlock = autoResize ? /* @__PURE__ */ jsx56("div", { ref: wrapperRef, className: Textarea_default.autoResize, children: textareaEl }) : textareaEl;
-    return /* @__PURE__ */ jsx56(TextareaProvider, { value: ctxValue, children: /* @__PURE__ */ jsx56(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs31("div", { className: Textarea_default.field, ...toDataAttributes({ size }), children: [
-      /* @__PURE__ */ jsx56(
+    const textareaBlock = autoResize ? /* @__PURE__ */ jsx57("div", { ref: wrapperRef, className: Textarea_default.autoResize, children: textareaEl }) : textareaEl;
+    return /* @__PURE__ */ jsx57(TextareaProvider, { value: ctxValue, children: /* @__PURE__ */ jsx57(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs31("div", { className: Textarea_default.field, ...toDataAttributes({ size }), children: [
+      /* @__PURE__ */ jsx57(
         "label",
         {
           htmlFor: inputId,
@@ -10132,8 +10293,8 @@ var TextareaRoot = React68.forwardRef(
             size
           }),
           children: /* @__PURE__ */ jsxs31("div", { className: Textarea_default.controlStack, children: [
-            /* @__PURE__ */ jsx56("div", { className: Textarea_default.textareaRegion, children: textareaBlock }),
-            showFooter ? /* @__PURE__ */ jsx56("div", { className: Textarea_default.controlFooter, children: counterChildren }) : null
+            /* @__PURE__ */ jsx57("div", { className: Textarea_default.textareaRegion, children: textareaBlock }),
+            showFooter ? /* @__PURE__ */ jsx57("div", { className: Textarea_default.controlFooter, children: counterChildren }) : null
           ] })
         }
       ),
@@ -10144,13 +10305,13 @@ var TextareaRoot = React68.forwardRef(
 TextareaRoot.displayName = "Textarea.Root";
 function TextareaHint({ children, className, ...rest }) {
   const { hintId, registerHint, unregisterHint, size, disabled, readOnly } = useTextareaContext();
-  React68.useLayoutEffect(() => {
+  React70.useLayoutEffect(() => {
     registerHint();
     return () => {
       unregisterHint();
     };
   }, [registerHint, unregisterHint]);
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     Hint.Root,
     {
       id: hintId,
@@ -10165,13 +10326,13 @@ function TextareaHint({ children, className, ...rest }) {
 TextareaHint.displayName = "Textarea.Hint";
 function TextareaError({ children, className, ...rest }) {
   const { errorId, registerError, unregisterError, size } = useTextareaContext();
-  React68.useLayoutEffect(() => {
+  React70.useLayoutEffect(() => {
     registerError();
     return () => {
       unregisterError();
     };
   }, [registerError, unregisterError]);
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     Hint.Root,
     {
       id: errorId,
@@ -10241,7 +10402,8 @@ var componentSizes = {
   progressBar: ["s", "m", "l", "xl"],
   sidebar: ["s", "m", "l", "xl"],
   drawer: ["s", "m", "l", "xl"],
-  dataTable: ["s", "m", "l", "xl"]
+  dataTable: ["s", "m", "l", "xl"],
+  emptyPage: ["s", "m", "l", "xl"]
 };
 var buttonModes = ["filled", "stroke", "lighter", "ghost", "fancy"];
 export {
@@ -10265,6 +10427,7 @@ export {
   Divider,
   Drawer,
   Dropdown,
+  EmptyPage,
   ExampleFrame,
   FileUpload,
   Hint,