prime-ui-kit 0.7.3 → 0.7.7

package/dist/index.js

@@ -207,7 +207,7 @@ import {
   PanelRightClose,
   PanelRightOpen
 } from "lucide-react";
-import * as React17 from "react";
+import * as React18 from "react";
 import { NavLink } from "react-router-dom";
 
 // src/components/divider/Divider.tsx
@@ -612,7 +612,7 @@ var Sidebar_default = {
 
 // src/layout/sidebar/SidebarRoot.tsx
 import { animate, useMotionValue, useMotionValueEvent, useReducedMotion } from "framer-motion";
-import * as React16 from "react";
+import * as React17 from "react";
 
 // src/hooks/useEscapeKey.ts
 import * as React13 from "react";
@@ -736,6 +736,34 @@ function useOverlayModal(enabled, onClose) {
 // src/layout/sidebar/sidebar-context.tsx
 var [SidebarProvider, useSidebarContext] = createComponentContext("Sidebar");
 
+// src/layout/sidebar/sidebarDesktopStorage.ts
+var STORAGE_VERSION = 1;
+function isStoredPayload(value) {
+  if (value === null || typeof value !== "object") return false;
+  const o = value;
+  return o.v === STORAGE_VERSION && (o.desktop === "expanded" || o.desktop === "compact");
+}
+function readStoredDesktopMode(key) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (raw === null) return null;
+    const parsed = JSON.parse(raw);
+    if (!isStoredPayload(parsed)) return null;
+    return parsed.desktop;
+  } catch {
+    return null;
+  }
+}
+function writeStoredDesktopMode(key, mode) {
+  if (typeof window === "undefined") return;
+  try {
+    const payload = { v: STORAGE_VERSION, desktop: mode };
+    window.localStorage.setItem(key, JSON.stringify(payload));
+  } catch {
+  }
+}
+
 // src/layout/sidebar/sidebarLayout.ts
 var SIDEBAR_LAYOUT_BREAKPOINT_MAX = "47.999rem";
 var SIDEBAR_MEDIA_QUERY_NARROW = `(max-width: ${SIDEBAR_LAYOUT_BREAKPOINT_MAX})`;
@@ -745,18 +773,53 @@ function normalizeSidebarMode(mode) {
   return mode === "expand" ? "expanded" : mode;
 }
 
+// src/layout/sidebar/useSidebarNarrowViewport.ts
+import * as React16 from "react";
+function useSidebarNarrowViewport(enabled) {
+  const subscribe = React16.useCallback(
+    (onStoreChange) => {
+      if (!enabled || typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return () => {
+        };
+      }
+      const mq = window.matchMedia(SIDEBAR_MEDIA_QUERY_NARROW);
+      mq.addEventListener("change", onStoreChange);
+      return () => mq.removeEventListener("change", onStoreChange);
+    },
+    [enabled]
+  );
+  const getSnapshot = React16.useCallback(() => {
+    if (!enabled || typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return false;
+    }
+    return window.matchMedia(SIDEBAR_MEDIA_QUERY_NARROW).matches;
+  }, [enabled]);
+  const getServerSnapshot = React16.useCallback(() => false, []);
+  return React16.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
 // src/layout/sidebar/SidebarRoot.tsx
 import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
-function initialMobileMatch(responsive) {
-  if (!responsive) return false;
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  return window.matchMedia(SIDEBAR_MEDIA_QUERY_NARROW).matches;
-}
-function defaultStateFromProps(responsive, isMobile, defaultOpen) {
-  if (responsive && isMobile) return "hidden";
-  return defaultOpen ? "expanded" : "hidden";
+function computeInitialLayoutState(args) {
+  const isNarrow = args.responsive && typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(SIDEBAR_MEDIA_QUERY_NARROW).matches;
+  if (args.defaultState !== void 0) {
+    const normalized = normalizeSidebarMode(args.defaultState);
+    if (args.responsive && isNarrow) return "hidden";
+    return normalized;
+  }
+  if (args.modeDefault !== void 0) {
+    const normalized = normalizeSidebarMode(args.modeDefault);
+    if (args.responsive && isNarrow) return "hidden";
+    return normalized;
+  }
+  if (args.responsive && isNarrow) return "hidden";
+  if (args.persistStateKey && typeof window !== "undefined") {
+    const stored = readStoredDesktopMode(args.persistStateKey);
+    if (stored) return stored;
+  }
+  return args.defaultOpen ? "expanded" : "hidden";
 }
-var SidebarRoot = React16.forwardRef(function SidebarRoot2({
+var SidebarRoot = React17.forwardRef(function SidebarRoot2({
   children,
   className,
   size = "m",
@@ -771,14 +834,14 @@ var SidebarRoot = React16.forwardRef(function SidebarRoot2({
   defaultOpen = true,
   onOpenChange,
   responsive = true,
+  persistStateKey,
   sidebarSlot,
   "aria-label": ariaLabel = "Sidebar",
   ...rest
 }, ref) {
-  const rootRef = React16.useRef(null);
+  const rootRef = React17.useRef(null);
   const reducedMotion = useReducedMotion();
-  const compactProgress = useMotionValue(0);
-  const setRootRef = React16.useCallback(
+  const setRootRef = React17.useCallback(
     (node) => {
       rootRef.current = node;
       if (typeof ref === "function") {
@@ -791,11 +854,24 @@ var SidebarRoot = React16.forwardRef(function SidebarRoot2({
     },
     [ref]
   );
-  const initialMobile = initialMobileMatch(Boolean(responsive));
   const modeControlled = mode === void 0 ? void 0 : normalizeSidebarMode(mode);
   const modeDefault = defaultMode === void 0 ? void 0 : normalizeSidebarMode(defaultMode);
   const controlledState = state ?? modeControlled ?? (open === void 0 ? void 0 : open ? "expanded" : "hidden");
-  const resolvedDefaultState = defaultState ?? modeDefault ?? defaultStateFromProps(Boolean(responsive), initialMobile, Boolean(defaultOpen));
+  const initialLayoutDefaultRef = React17.useRef(null);
+  if (initialLayoutDefaultRef.current === null) {
+    initialLayoutDefaultRef.current = computeInitialLayoutState({
+      responsive: Boolean(responsive),
+      defaultOpen: Boolean(defaultOpen),
+      persistStateKey,
+      defaultState,
+      modeDefault
+    });
+  }
+  const resolvedDefaultState = initialLayoutDefaultRef.current;
+  const initialLayoutForProgress = controlledState ?? resolvedDefaultState;
+  const isMobile = useSidebarNarrowViewport(Boolean(responsive));
+  const compactProgressInitial = !isMobile && initialLayoutForProgress === "compact" ? 1 : 0;
+  const compactProgress = useMotionValue(compactProgressInitial);
   const [layoutState, setLayoutState] = useControllableState({
     value: controlledState,
     defaultValue: resolvedDefaultState,
@@ -805,25 +881,8 @@ var SidebarRoot = React16.forwardRef(function SidebarRoot2({
       onOpenChange?.(next !== "hidden");
     }
   });
-  const [isMobile, setIsMobile] = React16.useState(initialMobile);
-  const previousMobileRef = React16.useRef(initialMobile);
-  React16.useEffect(() => {
-    if (!responsive || typeof window === "undefined" || typeof window.matchMedia !== "function") {
-      setIsMobile(false);
-      previousMobileRef.current = false;
-      return;
-    }
-    const query = window.matchMedia(SIDEBAR_MEDIA_QUERY_NARROW);
-    const update = () => setIsMobile(query.matches);
-    update();
-    if (typeof query.addEventListener === "function") {
-      query.addEventListener("change", update);
-      return () => query.removeEventListener("change", update);
-    }
-    query.addListener(update);
-    return () => query.removeListener(update);
-  }, [responsive]);
-  React16.useEffect(() => {
+  const previousMobileRef = React17.useRef(isMobile);
+  React17.useEffect(() => {
     const wasMobile = previousMobileRef.current;
     if (wasMobile === isMobile || !responsive) return;
     previousMobileRef.current = isMobile;
@@ -831,23 +890,35 @@ var SidebarRoot = React16.forwardRef(function SidebarRoot2({
       setLayoutState("hidden");
       return;
     }
+    const stored = persistStateKey ? readStoredDesktopMode(persistStateKey) : null;
+    if (stored === "expanded" || stored === "compact") {
+      setLayoutState(stored);
+      return;
+    }
     if (layoutState === "hidden" && defaultOpen) {
       setLayoutState("expanded");
     }
-  }, [defaultOpen, isMobile, layoutState, responsive, setLayoutState]);
-  const setState = React16.useCallback(
+  }, [defaultOpen, isMobile, layoutState, persistStateKey, responsive, setLayoutState]);
+  React17.useEffect(() => {
+    if (!persistStateKey || controlledState !== void 0) return;
+    if (isMobile) return;
+    if (layoutState === "expanded" || layoutState === "compact") {
+      writeStoredDesktopMode(persistStateKey, layoutState);
+    }
+  }, [controlledState, isMobile, layoutState, persistStateKey]);
+  const setState = React17.useCallback(
     (next) => {
       setLayoutState(next);
     },
     [setLayoutState]
   );
-  const setOpen = React16.useCallback(
+  const setOpen = React17.useCallback(
     (next) => {
       setLayoutState(next ? "expanded" : "hidden");
     },
     [setLayoutState]
   );
-  const toggleOpen = React16.useCallback(() => {
+  const toggleOpen = React17.useCallback(() => {
     setLayoutState((prev) => {
       if (isMobile) {
         return prev === "hidden" ? "expanded" : "hidden";
@@ -860,14 +931,17 @@ var SidebarRoot = React16.forwardRef(function SidebarRoot2({
   const openState = layoutState !== "hidden";
   const mobileOpen = Boolean(responsive) && isMobile && openState;
   const compactProgressTarget = !isMobile && layoutState === "compact" ? 1 : 0;
-  React16.useEffect(() => {
+  React17.useEffect(() => {
+    if (compactProgress.get() === compactProgressTarget) {
+      return;
+    }
     const controls = animate(compactProgress, compactProgressTarget, {
       duration: reducedMotion ? 0 : 0.24,
       ease: [0.4, 0, 0.2, 1]
     });
     return () => controls.stop();
   }, [compactProgress, compactProgressTarget, reducedMotion]);
-  React16.useLayoutEffect(() => {
+  React17.useLayoutEffect(() => {
     const root = rootRef.current;
     if (root == null) return;
     root.style.setProperty("--sb-progress", compactProgress.get().toString());
@@ -877,12 +951,12 @@ var SidebarRoot = React16.forwardRef(function SidebarRoot2({
     if (root == null) return;
     root.style.setProperty("--sb-progress", value.toString());
   });
-  const closeMobile = React16.useCallback(() => {
+  const closeMobile = React17.useCallback(() => {
     setLayoutState("hidden");
   }, [setLayoutState]);
   const navAreaRef = useOverlayModal(mobileOpen, closeMobile);
-  const navPanelId = React16.useId();
-  const contextValue = React16.useMemo(
+  const navPanelId = React17.useId();
+  const contextValue = React17.useMemo(
     () => ({
       size,
       side,
@@ -945,7 +1019,7 @@ function iconForToggle(state, side) {
   }
   return state === "hidden" ? /* @__PURE__ */ jsx10(PanelRightOpen, { size: "1em" }) : /* @__PURE__ */ jsx10(PanelRightClose, { size: "1em" });
 }
-var SidebarToggleButton = React17.forwardRef(
+var SidebarToggleButton = React18.forwardRef(
   ({
     className,
     openLabel = "\u0421\u043A\u0440\u044B\u0442\u044C \u0441\u0430\u0439\u0434\u0431\u0430\u0440",
@@ -1039,7 +1113,7 @@ function SidebarText({ className, ...rest }) {
   return /* @__PURE__ */ jsx10("span", { ...rest, className: cx(Sidebar_default.text, className) });
 }
 SidebarText.displayName = "SidebarText";
-var SidebarIdentityButton = React17.forwardRef(
+var SidebarIdentityButton = React18.forwardRef(
   ({ className, type = "button", leading, title, subtitle, trailing, disabled, onClick, ...rest }, ref) => {
     const { size: _size } = useSidebarContext();
     void _size;
@@ -1082,10 +1156,10 @@ function parseLengthToPx(value, baseFontSize) {
 }
 function SidebarHeadingText({ children }) {
   const { isMobile } = useSidebarContext();
-  const trackRef = React17.useRef(null);
-  const textRef = React17.useRef(null);
-  const previousOffsetRef = React17.useRef(0);
-  const measureOffset = React17.useCallback(() => {
+  const trackRef = React18.useRef(null);
+  const textRef = React18.useRef(null);
+  const previousOffsetRef = React18.useRef(0);
+  const measureOffset = React18.useCallback(() => {
     const track = trackRef.current;
     const text = textRef.current;
     if (track == null || text == null) return;
@@ -1128,10 +1202,10 @@ function SidebarHeadingText({ children }) {
     const targetCompactOffset = Math.max(0, (compactTrackWidth - compactTextWidth) / 2);
     applyOffset(targetCompactOffset * progress);
   }, [isMobile]);
-  React17.useLayoutEffect(() => {
+  React18.useLayoutEffect(() => {
     measureOffset();
   }, [measureOffset]);
-  React17.useLayoutEffect(() => {
+  React18.useLayoutEffect(() => {
     if (typeof window === "undefined") return;
     const track = trackRef.current;
     const text = textRef.current;
@@ -1201,7 +1275,7 @@ function SidebarMenuTrailing({ className, ...rest }) {
   return /* @__PURE__ */ jsx10("span", { ...rest, className: cx(Sidebar_default.menuTrailing, className), "aria-hidden": "true" });
 }
 SidebarMenuTrailing.displayName = "SidebarMenuTrailing";
-var SidebarMenuAction = React17.forwardRef(
+var SidebarMenuAction = React18.forwardRef(
   ({ className, children, type = "button", ...rest }, ref) => {
     return /* @__PURE__ */ jsx10("button", { ...rest, ref, type, className: cx(Sidebar_default.menuAction, className), children });
   }
@@ -1214,7 +1288,7 @@ function extractTextFromNode(node) {
   if (Array.isArray(node)) {
     return node.map((item) => extractTextFromNode(item)).join(" ");
   }
-  if (React17.isValidElement(node)) {
+  if (React18.isValidElement(node)) {
     return extractTextFromNode(node.props.children);
   }
   return "";
@@ -1244,7 +1318,7 @@ function SidebarCompactTooltip({
     /* @__PURE__ */ jsx10(Tooltip.Content, { side: "right", size: "l", children: content })
   ] }) });
 }
-var SidebarMenuButton = React17.forwardRef(
+var SidebarMenuButton = React18.forwardRef(
   ({
     className,
     active,
@@ -1291,11 +1365,11 @@ var SidebarMenuButton = React17.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuLink = React17.forwardRef(
+var SidebarMenuLink = React18.forwardRef(
   ({ active, className, ...rest }, ref) => /* @__PURE__ */ jsx10(SidebarMenuButton, { asChild: true, active, className, children: /* @__PURE__ */ jsx10("a", { ...rest, ref }) })
 );
 SidebarMenuLink.displayName = "SidebarMenuLink";
-var SidebarMenuRouterLink = React17.forwardRef(
+var SidebarMenuRouterLink = React18.forwardRef(
   ({ className, tooltip, ...rest }, ref) => {
     const tooltipContent = resolveMenuTooltipContent(tooltip, rest["aria-label"] ?? rest.children);
     if (typeof className === "function") {
@@ -1339,7 +1413,7 @@ function SidebarNavCategory({ className, ...rest }) {
   return /* @__PURE__ */ jsx10("div", { ...rest, className: cx(Sidebar_default.navCategory, className) });
 }
 SidebarNavCategory.displayName = "SidebarNavCategory";
-var SidebarNavCategoryTrigger = React17.forwardRef(({ className, type = "button", children, ...rest }, ref) => /* @__PURE__ */ jsx10("button", { ref, type, className: cx(Sidebar_default.navCategoryTrigger, className), ...rest, children }));
+var SidebarNavCategoryTrigger = React18.forwardRef(({ className, type = "button", children, ...rest }, ref) => /* @__PURE__ */ jsx10("button", { ref, type, className: cx(Sidebar_default.navCategoryTrigger, className), ...rest, children }));
 SidebarNavCategoryTrigger.displayName = "SidebarNavCategoryTrigger";
 function SidebarNavCategoryLabel({ className, ...rest }) {
   return /* @__PURE__ */ jsx10("span", { ...rest, className: cx(Sidebar_default.navCategoryLabel, className) });
@@ -1353,7 +1427,7 @@ function SidebarNavCategoryPanel({ className, ...rest }) {
   return /* @__PURE__ */ jsx10("div", { ...rest, className: cx(Sidebar_default.navCategoryPanel, className) });
 }
 SidebarNavCategoryPanel.displayName = "SidebarNavCategoryPanel";
-var SidebarMenuSlotButton = React17.forwardRef(
+var SidebarMenuSlotButton = React18.forwardRef(
   (props, ref) => /* @__PURE__ */ jsx10(SidebarMenuButton, { ...props, ref })
 );
 SidebarMenuSlotButton.displayName = "SidebarMenuSlotButton";
@@ -1393,7 +1467,7 @@ var Sidebar = Object.assign(SidebarComposedRoot, {
 
 // src/components/accordion/Accordion.tsx
 import { ChevronDown } from "lucide-react";
-import * as React18 from "react";
+import * as React19 from "react";
 
 // src/components/accordion/Accordion.module.css
 var Accordion_default = {
@@ -1439,7 +1513,7 @@ function multipleDefaultValue(defaultValue) {
 function normalizeValues(values) {
   return Array.from(new Set(values.filter((value) => value !== "")));
 }
-var AccordionRoot = React18.forwardRef(function AccordionRoot2({
+var AccordionRoot = React19.forwardRef(function AccordionRoot2({
   type = "single",
   value,
   defaultValue,
@@ -1451,23 +1525,23 @@ var AccordionRoot = React18.forwardRef(function AccordionRoot2({
   children,
   ...rest
 }, ref) {
-  const contextValue = React18.useMemo(() => ({ size }), [size]);
+  const contextValue = React19.useMemo(() => ({ size }), [size]);
   const isMultiple = type === "multiple";
   const isControlled = value !== void 0;
-  const initialUncontrolledValues = React18.useMemo(() => {
+  const initialUncontrolledValues = React19.useMemo(() => {
     if (isMultiple) return normalizeValues(multipleDefaultValue(defaultValue) ?? []);
     const initialSingle = singleDefaultValue(defaultValue);
     return initialSingle ? [initialSingle] : [];
   }, [defaultValue, isMultiple]);
-  const [uncontrolledValues, setUncontrolledValues] = React18.useState(initialUncontrolledValues);
-  const controlledValues = React18.useMemo(() => {
+  const [uncontrolledValues, setUncontrolledValues] = React19.useState(initialUncontrolledValues);
+  const controlledValues = React19.useMemo(() => {
     if (!isControlled) return void 0;
     if (isMultiple) return normalizeValues(multipleControlledValue(value) ?? []);
     const singleValue = singleControlledValue(value);
     return singleValue ? [singleValue] : [];
   }, [isControlled, isMultiple, value]);
   const openValues = controlledValues ?? uncontrolledValues;
-  const updateValues = React18.useCallback(
+  const updateValues = React19.useCallback(
     (nextValues) => {
       if (!isControlled) {
         setUncontrolledValues(nextValues);
@@ -1480,7 +1554,7 @@ var AccordionRoot = React18.forwardRef(function AccordionRoot2({
     },
     [isControlled, isMultiple, onValueChange]
   );
-  const toggleItem = React18.useCallback(
+  const toggleItem = React19.useCallback(
     (itemValue, disabledItem) => {
       if (disabledItem) return;
       if (isMultiple) {
@@ -1501,7 +1575,7 @@ var AccordionRoot = React18.forwardRef(function AccordionRoot2({
     },
     [collapsible, isMultiple, openValues, updateValues]
   );
-  const stateContextValue = React18.useMemo(
+  const stateContextValue = React19.useMemo(
     () => ({
       type,
       collapsible,
@@ -1524,13 +1598,13 @@ var AccordionRoot = React18.forwardRef(function AccordionRoot2({
   ) }) });
 });
 AccordionRoot.displayName = "Accordion.Root";
-var AccordionItem = React18.forwardRef(function AccordionItem2({ className, value, disabled = false, children, ...rest }, ref) {
+var AccordionItem = React19.forwardRef(function AccordionItem2({ className, value, disabled = false, children, ...rest }, ref) {
   const state = useAccordionState();
   const open = state.openValues.includes(value);
-  const reactId = React18.useId();
+  const reactId = React19.useId();
   const triggerId = `prime-accordion-trigger-${reactId}`;
   const contentId = `prime-accordion-content-${reactId}`;
-  const itemContextValue = React18.useMemo(
+  const itemContextValue = React19.useMemo(
     () => ({
       value,
       disabled,
@@ -1553,13 +1627,13 @@ var AccordionItem = React18.forwardRef(function AccordionItem2({ className, valu
   ) });
 });
 AccordionItem.displayName = "Accordion.Item";
-var AccordionHeader = React18.forwardRef(
+var AccordionHeader = React19.forwardRef(
   function AccordionHeader2({ className, ...rest }, ref) {
     return /* @__PURE__ */ jsx11("h3", { ref, className: cx(Accordion_default.header, className), ...rest });
   }
 );
 AccordionHeader.displayName = "Accordion.Header";
-var AccordionTrigger = React18.forwardRef(
+var AccordionTrigger = React19.forwardRef(
   function AccordionTrigger2({ className, children, ...rest }, ref) {
     const { size } = useAccordionContext();
     const state = useAccordionState();
@@ -1589,13 +1663,13 @@ var AccordionTrigger = React18.forwardRef(
   }
 );
 AccordionTrigger.displayName = "Accordion.Trigger";
-var AccordionContent = React18.forwardRef(
+var AccordionContent = React19.forwardRef(
   function AccordionContent2({ className, children, style, ...rest }, ref) {
     const { size } = useAccordionContext();
     const item = useAccordionItem();
-    const innerRef = React18.useRef(null);
-    const [contentHeight, setContentHeight] = React18.useState(0);
-    React18.useLayoutEffect(() => {
+    const innerRef = React19.useRef(null);
+    const [contentHeight, setContentHeight] = React19.useState(0);
+    React19.useLayoutEffect(() => {
       if (!innerRef.current) return;
       const target = innerRef.current;
       setContentHeight(target.scrollHeight);
@@ -1606,7 +1680,7 @@ var AccordionContent = React18.forwardRef(
       observer.observe(target);
       return () => observer.disconnect();
     }, []);
-    const combinedStyle = React18.useMemo(
+    const combinedStyle = React19.useMemo(
       () => ({
         ...style,
         "--prime-accordion-content-height": `${contentHeight}px`
@@ -1695,7 +1769,7 @@ var Accordion = {
 };
 
 // src/components/avatar/Avatar.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 
 // src/components/avatar/Avatar.module.css
 var Avatar_default = {
@@ -1709,10 +1783,10 @@ var Avatar_default = {
 // src/components/avatar/Avatar.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
 var [AvatarProvider, useAvatarContext] = createComponentContext("Avatar");
-var AvatarRoot = React19.forwardRef(
+var AvatarRoot = React20.forwardRef(
   ({ size = "m", className, children, ...rest }, ref) => {
-    const [imageStatus, setImageStatus] = React19.useState("idle");
-    const value = React19.useMemo(
+    const [imageStatus, setImageStatus] = React20.useState("idle");
+    const value = React20.useMemo(
       () => ({
         size,
         imageStatus,
@@ -1733,16 +1807,16 @@ var AvatarRoot = React19.forwardRef(
   }
 );
 AvatarRoot.displayName = "AvatarRoot";
-var AvatarImageInner = React19.forwardRef(
+var AvatarImageInner = React20.forwardRef(
   ({ setImageStatus, src, alt = "", className, onLoad, onError, ...rest }, ref) => {
-    const [status, setStatus] = React19.useState("loading");
-    React19.useLayoutEffect(() => {
+    const [status, setStatus] = React20.useState("loading");
+    React20.useLayoutEffect(() => {
       setImageStatus("loading");
       return () => {
         setImageStatus("idle");
       };
     }, [setImageStatus]);
-    const handleLoad = React19.useCallback(
+    const handleLoad = React20.useCallback(
       (event) => {
         setStatus("loaded");
         setImageStatus("loaded");
@@ -1750,7 +1824,7 @@ var AvatarImageInner = React19.forwardRef(
       },
       [onLoad, setImageStatus]
     );
-    const handleError = React19.useCallback(
+    const handleError = React20.useCallback(
       (event) => {
         setStatus("error");
         setImageStatus("error");
@@ -1774,7 +1848,7 @@ var AvatarImageInner = React19.forwardRef(
   }
 );
 AvatarImageInner.displayName = "AvatarImageInner";
-var AvatarImage = React19.forwardRef((props, ref) => {
+var AvatarImage = React20.forwardRef((props, ref) => {
   const { setImageStatus } = useAvatarContext();
   return /* @__PURE__ */ jsx12(AvatarImageInner, { ref, setImageStatus, ...props }, props.src);
 });
@@ -1803,7 +1877,7 @@ function getComponentDisplayName(type) {
 function isAvatarRootElement(child) {
   return child.type === AvatarRoot || getComponentDisplayName(child.type) === AVATAR_ROOT_DISPLAY;
 }
-var AvatarGroupOverflow = React19.forwardRef(
+var AvatarGroupOverflow = React20.forwardRef(
   ({ size = "m", className, children, ...rest }, ref) => /* @__PURE__ */ jsx12(
     "div",
     {
@@ -1820,12 +1894,12 @@ function isAvatarGroupOverflowElement(child) {
   return child.type === AvatarGroupOverflow || getComponentDisplayName(child.type) === AVATAR_GROUP_OVERFLOW_DISPLAY;
 }
 function injectAvatarGroupSize(children, size) {
-  return React19.Children.map(children, (child) => {
-    if (!React19.isValidElement(child)) {
+  return React20.Children.map(children, (child) => {
+    if (!React20.isValidElement(child)) {
       return child;
     }
-    if (child.type === React19.Fragment) {
-      return React19.cloneElement(
+    if (child.type === React20.Fragment) {
+      return React20.cloneElement(
         child,
         {},
         injectAvatarGroupSize(child.props.children, size)
@@ -1836,19 +1910,19 @@ function injectAvatarGroupSize(children, size) {
       if (props.size !== void 0) {
         return child;
       }
-      return React19.cloneElement(child, { size });
+      return React20.cloneElement(child, { size });
     }
     if (isAvatarGroupOverflowElement(child)) {
       const props = child.props;
       if (props.size !== void 0) {
         return child;
       }
-      return React19.cloneElement(child, { size });
+      return React20.cloneElement(child, { size });
     }
     return child;
   });
 }
-var AvatarGroupRoot = React19.forwardRef(
+var AvatarGroupRoot = React20.forwardRef(
   ({ size = "m", className, children, ...rest }, ref) => /* @__PURE__ */ jsx12(
     "div",
     {
@@ -1872,7 +1946,7 @@ var Avatar = {
 };
 
 // src/components/badge/Badge.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 
 // src/components/badge/Badge.module.css
 var Badge_default = {
@@ -1884,7 +1958,7 @@ var Badge_default = {
 
 // src/components/badge/Badge.tsx
 import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
-var BadgeRoot = React20.forwardRef(
+var BadgeRoot = React21.forwardRef(
   ({
     color = "gray",
     variant = "light",
@@ -1944,10 +2018,10 @@ var Badge = { Root: BadgeRoot, Icon: BadgeIcon, Dot: BadgeDot };
 
 // src/components/banner/Banner.tsx
 import { X } from "lucide-react";
-import * as React22 from "react";
+import * as React23 from "react";
 
 // src/components/button/Button.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 
 // src/components/button/Button.module.css
 var Button_default = {
@@ -1960,7 +2034,7 @@ var Button_default = {
 // src/components/button/Button.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
 var [ButtonProvider, useButtonContext] = createComponentContext("Button");
-var ButtonRoot = React21.forwardRef(
+var ButtonRoot = React22.forwardRef(
   ({
     children,
     className,
@@ -1977,7 +2051,7 @@ var ButtonRoot = React21.forwardRef(
     ...rest
   }, ref) => {
     const isDisabled = disabled || loading;
-    const contextValue = React21.useMemo(() => ({ loading }), [loading]);
+    const contextValue = React22.useMemo(() => ({ loading }), [loading]);
     const dataAttrs = toDataAttributes({ variant, mode, size, loading, "full-width": fullWidth });
     if (asChild) {
       const { onClick: userOnClick, ...restWithoutClick } = rest;
@@ -2043,11 +2117,11 @@ var Banner_default = {
 // src/components/banner/Banner.tsx
 import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 function childHasCloseButton(children) {
-  return React22.Children.toArray(children).some(
-    (c) => React22.isValidElement(c) && c.type === BannerCloseButton
+  return React23.Children.toArray(children).some(
+    (c) => React23.isValidElement(c) && c.type === BannerCloseButton
   );
 }
-var BannerRoot = React22.forwardRef(function BannerRoot2({
+var BannerRoot = React23.forwardRef(function BannerRoot2({
   variant = "filled",
   status = "information",
   size = "m",
@@ -2098,7 +2172,7 @@ function BannerActions({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx15("div", { className: cx(Banner_default.actions, className), ...rest, children });
 }
 BannerActions.displayName = "BannerActions";
-var BannerCloseButton = React22.forwardRef(
+var BannerCloseButton = React23.forwardRef(
   function BannerCloseButton2({ className, children, type = "button", ...rest }, forwardedRef) {
     const controlSize = useOptionalControlSize() ?? "m";
     const buttonSize = controlSize === "xs" ? "s" : controlSize;
@@ -2129,7 +2203,7 @@ var Banner = {
 };
 
 // src/components/breadcrumb/Breadcrumb.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 
 // src/icons/index.ts
 import {
@@ -2150,10 +2224,10 @@ import {
   Sun,
   X as X2
 } from "lucide-react";
-import * as React24 from "react";
+import * as React25 from "react";
 
 // src/icons/Icon.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 
 // src/icons/Icon.module.css
 var Icon_default = {
@@ -2179,10 +2253,10 @@ var SIZE_CLASS = {
   xl: Icon_default.sizeXl
 };
 function createIcon(IconGlyph) {
-  const WrappedIcon = React23.forwardRef(
+  const WrappedIcon = React24.forwardRef(
     ({ className, size: sizeProp, tone = "default", strokeWidth = 1.9, style, ...rest }, ref) => {
       const controlSize = useOptionalControlSize();
-      const insideDividerContent = React23.useContext(DividerContentContext);
+      const insideDividerContent = React24.useContext(DividerContentContext);
       const resolvedSize = sizeProp ?? controlSize ?? "m";
       const sizeClass = insideDividerContent ? void 0 : SIZE_CLASS[resolvedSize];
       const toneClassName = tone === "default" ? Icon_default.toneDefault : tone === "subtle" ? Icon_default.toneSubtle : tone === "accent" ? Icon_default.toneAccent : Icon_default.toneDanger;
@@ -2235,14 +2309,14 @@ var iconRegistry = {
   "theme.dark": IconMoon,
   "theme.light": IconSun
 };
-var Icon = React24.forwardRef(({ name, ...rest }, ref) => {
+var Icon = React25.forwardRef(({ name, ...rest }, ref) => {
   const IconGlyph = iconRegistry[name];
-  return React24.createElement(IconGlyph, { ref, ...rest });
+  return React25.createElement(IconGlyph, { ref, ...rest });
 });
 Icon.displayName = "Icon";
 
 // src/components/link-button/LinkButton.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 
 // src/components/link-button/LinkButton.module.css
 var LinkButton_default = {
@@ -2251,7 +2325,7 @@ var LinkButton_default = {
 
 // src/components/link-button/LinkButton.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
-var LinkButtonRoot = React25.forwardRef(
+var LinkButtonRoot = React26.forwardRef(
   ({
     size = "m",
     disabled = false,
@@ -2315,10 +2389,10 @@ var Breadcrumb_default = {
 
 // src/components/breadcrumb/Breadcrumb.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
-var BreadcrumbSizeContext = React26.createContext("m");
+var BreadcrumbSizeContext = React27.createContext("m");
 BreadcrumbSizeContext.displayName = "BreadcrumbSizeContext";
 function useBreadcrumbSize() {
-  return React26.useContext(BreadcrumbSizeContext);
+  return React27.useContext(BreadcrumbSizeContext);
 }
 function BreadcrumbRoot({ children, className, size = "m", ...rest }) {
   return /* @__PURE__ */ jsx18(BreadcrumbSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx18(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx18(
@@ -2377,7 +2451,7 @@ var Breadcrumb = {
 };
 
 // src/components/button-group/ButtonGroup.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 
 // src/components/button-group/ButtonGroup.module.css
 var ButtonGroup_default = {
@@ -2389,9 +2463,9 @@ var ButtonGroup_default = {
 // src/components/button-group/ButtonGroup.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 var [ButtonGroupProvider, useButtonGroupContext] = createComponentContext("ButtonGroup");
-var ButtonGroupRoot = React27.forwardRef(
+var ButtonGroupRoot = React28.forwardRef(
   ({ orientation = "horizontal", size = "m", children, className, ...rest }, ref) => {
-    const value = React27.useMemo(() => ({ size }), [size]);
+    const value = React28.useMemo(() => ({ size }), [size]);
     return /* @__PURE__ */ jsx19(ButtonGroupProvider, { value, children: /* @__PURE__ */ jsx19(
       "div",
       {
@@ -2406,7 +2480,7 @@ var ButtonGroupRoot = React27.forwardRef(
   }
 );
 ButtonGroupRoot.displayName = "ButtonGroupRoot";
-var ButtonGroupItem = React27.forwardRef(
+var ButtonGroupItem = React28.forwardRef(
   ({ className, pressed, type = "button", ...rest }, ref) => {
     useButtonGroupContext();
     return /* @__PURE__ */ jsx19(
@@ -2431,7 +2505,7 @@ ButtonGroupIcon.displayName = "ButtonGroupIcon";
 var ButtonGroup = { Root: ButtonGroupRoot, Item: ButtonGroupItem, Icon: ButtonGroupIcon };
 
 // src/components/card/Card.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 
 // src/components/card/Card.module.css
 var Card_default = {
@@ -2463,7 +2537,7 @@ var Card_default = {
 
 // src/components/card/Card.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
-var CardRoot = React28.forwardRef(function CardRoot2({ variant, flat = false, className, children, ...rest }, forwardedRef) {
+var CardRoot = React29.forwardRef(function CardRoot2({ variant, flat = false, className, children, ...rest }, forwardedRef) {
   return /* @__PURE__ */ jsx20(
     "div",
     {
@@ -2548,11 +2622,11 @@ function CardListHeader({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx20("div", { className: cx(Card_default.listHeader, className), ...rest, children });
 }
 CardListHeader.displayName = "CardListHeader";
-var CardList = React28.forwardRef(function CardList2({ className, children, ...rest }, forwardedRef) {
+var CardList = React29.forwardRef(function CardList2({ className, children, ...rest }, forwardedRef) {
   return /* @__PURE__ */ jsx20("ul", { ref: forwardedRef, className: cx(Card_default.list, className), ...rest, children });
 });
 CardList.displayName = "CardList";
-var CardListItem = React28.forwardRef(function CardListItem2({ className, children, ...rest }, forwardedRef) {
+var CardListItem = React29.forwardRef(function CardListItem2({ className, children, ...rest }, forwardedRef) {
   return /* @__PURE__ */ jsx20("li", { ref: forwardedRef, className: cx(Card_default.listItem, className), ...rest, children });
 });
 CardListItem.displayName = "CardListItem";
@@ -2604,7 +2678,7 @@ var Card = {
 };
 
 // src/components/checkbox/Checkbox.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 
 // src/components/hint/Hint.module.css
 var Hint_default = {
@@ -2631,7 +2705,7 @@ HintIcon.displayName = "HintIcon";
 var Hint = { Root: HintRoot, Icon: HintIcon };
 
 // src/components/label/Label.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 
 // src/components/label/Label.module.css
 var Label_default = {
@@ -2643,8 +2717,8 @@ var Label_default = {
 
 // src/components/label/Label.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
-var LabelSizeContext = React29.createContext("m");
-var LabelRoot = React29.forwardRef(
+var LabelSizeContext = React30.createContext("m");
+var LabelRoot = React30.forwardRef(
   ({ className, disabled, children, size = "m", ...rest }, ref) => {
     return (
       // biome-ignore lint/a11y/noLabelWithoutControl: field label primitive; association via htmlFor or wrapping control is caller responsibility
@@ -2664,7 +2738,7 @@ var LabelRoot = React29.forwardRef(
 );
 LabelRoot.displayName = "LabelRoot";
 function LabelIcon({ className, children, ...rest }) {
-  const size = React29.useContext(LabelSizeContext);
+  const size = React30.useContext(LabelSizeContext);
   return /* @__PURE__ */ jsx22("span", { className: cx(Label_default.iconSlot, className), ...rest, children: /* @__PURE__ */ jsx22(ControlSizeProvider, { value: size, children }) });
 }
 LabelIcon.displayName = "LabelIcon";
@@ -2679,7 +2753,7 @@ LabelSub.displayName = "LabelSub";
 var Label = { Root: LabelRoot, Icon: LabelIcon, Asterisk: LabelAsterisk, Sub: LabelSub };
 
 // src/hooks/useMergedRefs.ts
-import * as React30 from "react";
+import * as React31 from "react";
 function assignRef(ref, value) {
   if (typeof ref === "function") {
     ref(value);
@@ -2690,7 +2764,7 @@ function assignRef(ref, value) {
   }
 }
 function useMergedRefs(...refs) {
-  return React30.useCallback(
+  return React31.useCallback(
     (value) => {
       for (const ref of refs) {
         assignRef(ref, value);
@@ -2718,7 +2792,7 @@ var Checkbox_default = {
 // src/components/checkbox/Checkbox.tsx
 import { jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
 var [CheckboxProvider, useCheckboxContext] = createComponentContext("Checkbox");
-var CheckboxRoot = React31.forwardRef(
+var CheckboxRoot = React32.forwardRef(
   ({
     id,
     variant = "default",
@@ -2733,33 +2807,33 @@ var CheckboxRoot = React31.forwardRef(
     children,
     ...inputRest
   }, ref) => {
-    const rawId = React31.useId();
+    const rawId = React32.useId();
     const inputId = id ?? rawId;
     const hintId = `${inputId}-hint`;
     const errorId = `${inputId}-error`;
-    const [hasHint, setHasHint] = React31.useState(false);
-    const [hasError, setHasError] = React31.useState(false);
+    const [hasHint, setHasHint] = React32.useState(false);
+    const [hasError, setHasError] = React32.useState(false);
     const invalid = variant === "error" || hasError;
     const [isChecked, setIsChecked] = useControllableState({
       value: checked,
       defaultValue: Boolean(defaultChecked),
       onChange: void 0
     });
-    const internalRef = React31.useRef(null);
+    const internalRef = React32.useRef(null);
     const mergedRef = useMergedRefs(internalRef, ref);
-    React31.useEffect(() => {
+    React32.useEffect(() => {
       if (internalRef.current) {
         internalRef.current.indeterminate = indeterminate;
       }
     }, [indeterminate]);
-    const handleChange = React31.useCallback(
+    const handleChange = React32.useCallback(
       (e) => {
         setIsChecked(e.target.checked);
         onChange?.(e);
       },
       [onChange, setIsChecked]
     );
-    const restInputPropsRef = React31.useRef(inputRest);
+    const restInputPropsRef = React32.useRef(inputRest);
     restInputPropsRef.current = inputRest;
     const parts = [
       ariaDescribedBy,
@@ -2767,12 +2841,12 @@ var CheckboxRoot = React31.forwardRef(
       hasError ? errorId : void 0
     ].filter(Boolean);
     const describedBy = parts.length > 0 ? parts.join(" ") : void 0;
-    const registerHint = React31.useCallback(() => setHasHint(true), []);
-    const unregisterHint = React31.useCallback(() => setHasHint(false), []);
-    const registerError = React31.useCallback(() => setHasError(true), []);
-    const unregisterError = React31.useCallback(() => setHasError(false), []);
+    const registerHint = React32.useCallback(() => setHasHint(true), []);
+    const unregisterHint = React32.useCallback(() => setHasHint(false), []);
+    const registerError = React32.useCallback(() => setHasError(true), []);
+    const unregisterError = React32.useCallback(() => setHasError(false), []);
     const showChecked = isChecked && !indeterminate;
-    const ctxValue = React31.useMemo(
+    const ctxValue = React32.useMemo(
       () => ({
         inputId,
         hintId,
@@ -2827,7 +2901,7 @@ var CheckboxRoot = React31.forwardRef(
   }
 );
 CheckboxRoot.displayName = "CheckboxRoot";
-var CheckboxLabel = React31.forwardRef(function CheckboxLabel2({ children, className, ...rest }, ref) {
+var CheckboxLabel = React32.forwardRef(function CheckboxLabel2({ children, className, ...rest }, ref) {
   const {
     inputId,
     inputRef,
@@ -2839,7 +2913,7 @@ var CheckboxLabel = React31.forwardRef(function CheckboxLabel2({ children, class
     restInputPropsRef,
     size
   } = useCheckboxContext();
-  const filterId = React31.useId();
+  const filterId = React32.useId();
   const svgFilterId = `es-cb-${filterId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxs7(
     Label.Root,
@@ -2893,7 +2967,7 @@ var CheckboxLabel = React31.forwardRef(function CheckboxLabel2({ children, class
 CheckboxLabel.displayName = "CheckboxLabel";
 function CheckboxHint({ children, className, ...rest }) {
   const { hintId, registerHint, unregisterHint, size, disabled } = useCheckboxContext();
-  React31.useLayoutEffect(() => {
+  React32.useLayoutEffect(() => {
     registerHint();
     return () => {
       unregisterHint();
@@ -2914,7 +2988,7 @@ function CheckboxHint({ children, className, ...rest }) {
 CheckboxHint.displayName = "CheckboxHint";
 function CheckboxError({ children, className, ...rest }) {
   const { errorId, registerError, unregisterError, size } = useCheckboxContext();
-  React31.useLayoutEffect(() => {
+  React32.useLayoutEffect(() => {
     registerError();
     return () => {
       unregisterError();
@@ -2941,7 +3015,7 @@ var Checkbox = {
 };
 
 // src/components/code-block/CodeBlock.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 
 // src/internal/highlightTsxHtml.ts
 var KW = new Set(
@@ -3066,8 +3140,8 @@ var CodeBlock_default = {
 
 // src/components/code-block/CodeBlock.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
-var CodeBlockRoot = React32.forwardRef(function CodeBlockRoot2({ code, colorScheme = "light", className, ...rest }, ref) {
-  const html = React32.useMemo(() => highlightTsxHtml(code.trimEnd()), [code]);
+var CodeBlockRoot = React33.forwardRef(function CodeBlockRoot2({ code, colorScheme = "light", className, ...rest }, ref) {
+  const html = React33.useMemo(() => highlightTsxHtml(code.trimEnd()), [code]);
   return /* @__PURE__ */ jsx24(
     "pre",
     {
@@ -3085,7 +3159,7 @@ var CodeBlock = {
 };
 
 // src/components/color-picker/ColorPicker.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import {
   ColorArea as AriaColorArea,
   ColorField as AriaColorField,
@@ -3103,12 +3177,12 @@ import {
 } from "react-aria-components";
 
 // src/components/input/Input.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 
 // src/hooks/useFieldIds.ts
-import * as React33 from "react";
+import * as React34 from "react";
 function useFieldIds(explicitId, options = {}) {
-  const generated = React33.useId();
+  const generated = React34.useId();
   const inputId = explicitId ?? generated;
   const hintId = `${inputId}-hint`;
   const errorId = `${inputId}-error`;
@@ -3197,7 +3271,7 @@ function InputWrapper({ children, className }) {
   );
 }
 InputWrapper.displayName = "Input.Wrapper";
-var InputField = React34.forwardRef(
+var InputField = React35.forwardRef(
   ({ className, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
     const { inputId, hasError, describedBy } = useInputContext();
     const resolvedDescribedBy = [ariaDescribedBy, describedBy].filter(Boolean).join(" ") || void 0;
@@ -3245,10 +3319,10 @@ var Input = {
 };
 
 // src/components/select/Select.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 
 // src/hooks/useOutsideClick.ts
-import * as React35 from "react";
+import * as React36 from "react";
 function isPortaledSelectListboxOwnedByContainer(target, container) {
   if (!(target instanceof Element) || !container) {
     return false;
@@ -3270,9 +3344,9 @@ function useOutsideClick({
   onOutsideClick,
   shouldSuppressOutsideClick
 }) {
-  const suppressRef = React35.useRef(shouldSuppressOutsideClick);
+  const suppressRef = React36.useRef(shouldSuppressOutsideClick);
   suppressRef.current = shouldSuppressOutsideClick;
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (!enabled) {
       return;
     }
@@ -3298,7 +3372,7 @@ function useOutsideClick({
 }
 
 // src/hooks/usePosition.ts
-import * as React36 from "react";
+import * as React37 from "react";
 
 // tokens/primitives.ts
 var primitiveTokens = {
@@ -3753,20 +3827,24 @@ function usePosition(anchorRef, contentRef, options = {}) {
     flip = true,
     matchTriggerMinWidth = true
   } = options;
-  const [resolvedSide, setResolvedSide] = React36.useState(preferredSide);
-  const applyPositionStyle = React36.useCallback(
+  const [resolvedSide, setResolvedSide] = React37.useState(preferredSide);
+  const applyPositionStyle = React37.useCallback(
     (pos) => {
       const content = contentRef.current;
       if (!content) return;
-      content.style.position = pos.position;
-      content.style.top = `${pos.top}px`;
-      content.style.left = `${pos.left}px`;
-      content.style.minWidth = pos.minWidth !== void 0 ? `${pos.minWidth}px` : "";
-      content.style.maxHeight = pos.maxHeight !== void 0 ? `${pos.maxHeight}px` : "";
+      const nextTop = `${pos.top}px`;
+      const nextLeft = `${pos.left}px`;
+      const nextMinW = pos.minWidth !== void 0 ? `${pos.minWidth}px` : "";
+      const nextMaxH = pos.maxHeight !== void 0 ? `${pos.maxHeight}px` : "";
+      if (content.style.position !== pos.position) content.style.position = pos.position;
+      if (content.style.top !== nextTop) content.style.top = nextTop;
+      if (content.style.left !== nextLeft) content.style.left = nextLeft;
+      if (content.style.minWidth !== nextMinW) content.style.minWidth = nextMinW;
+      if (content.style.maxHeight !== nextMaxH) content.style.maxHeight = nextMaxH;
     },
     [contentRef]
   );
-  const update = React36.useCallback(() => {
+  const update = React37.useCallback(() => {
     const anchor = anchorRef.current;
     const content = contentRef.current;
     if (!anchor) return void 0;
@@ -3780,7 +3858,7 @@ function usePosition(anchorRef, contentRef, options = {}) {
       window.innerHeight,
       { preferredSide, align, offset, viewportPad, flip, matchTriggerMinWidth }
     );
-    setResolvedSide(pos.resolvedSide);
+    setResolvedSide((prev) => pos.resolvedSide === prev ? prev : pos.resolvedSide);
     applyPositionStyle({
       position: "fixed",
       top: pos.top,
@@ -3803,6 +3881,21 @@ function usePosition(anchorRef, contentRef, options = {}) {
   return { resolvedSide, update };
 }
 
+// src/internal/scrollAncestors.ts
+var SCROLLABLE = /^(auto|scroll|overlay)$/;
+function getScrollContainers(node) {
+  const out = [window];
+  if (!node || typeof window === "undefined") return out;
+  for (let el = node.parentElement; el; el = el.parentElement) {
+    const { overflowX, overflowY } = window.getComputedStyle(el);
+    if (SCROLLABLE.test(overflowY) || SCROLLABLE.test(overflowX)) {
+      out.push(el);
+    }
+  }
+  if (window.visualViewport) out.push(window.visualViewport);
+  return out;
+}
+
 // src/components/select/Select.module.css
 var Select_default = {
   trigger: "Select_trigger",
@@ -3884,13 +3977,22 @@ function handleSelectListboxKeyDown(e, ctx) {
 
 // src/components/select/Select.tsx
 import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+var SELECT_LISTBOX_POSITION_OPTS = {
+  side: "bottom",
+  align: "start"
+};
 var [SelectProvider, useSelectContext] = createComponentContext("Select");
 function SelectRoot(props) {
-  const { native = false, ...rest } = props;
-  if (native) {
-    return /* @__PURE__ */ jsx26(SelectNativeRoot, { ...rest });
+  if (props.multiple === true) {
+    if (props.native === true) {
+      return /* @__PURE__ */ jsx26(SelectNativeMultiRoot, { ...props });
+    }
+    return /* @__PURE__ */ jsx26(SelectComboboxMultiRoot, { ...props });
   }
-  return /* @__PURE__ */ jsx26(SelectComboboxRoot, { ...rest });
+  if (props.native === true) {
+    return /* @__PURE__ */ jsx26(SelectNativeRoot, { ...props });
+  }
+  return /* @__PURE__ */ jsx26(SelectComboboxRoot, { ...props });
 }
 SelectRoot.displayName = "SelectRoot";
 function SelectComboboxRoot({
@@ -3903,7 +4005,7 @@ function SelectComboboxRoot({
   hasError = false,
   children
 }) {
-  const handleChange = React37.useCallback(
+  const handleChange = React38.useCallback(
     (v) => {
       if (v !== void 0) onChange?.(v);
     },
@@ -3914,21 +4016,21 @@ function SelectComboboxRoot({
     defaultValue,
     onChange: handleChange
   });
-  const [selectedLabelBinding, setSelectedLabelBinding] = React37.useState(void 0);
-  const [isOpen, setIsOpen] = React37.useState(false);
-  const [highlightedValue, setHighlightedValue] = React37.useState(void 0);
-  const generatedId = React37.useId();
+  const [selectedLabelBinding, setSelectedLabelBinding] = React38.useState(void 0);
+  const [isOpen, setIsOpen] = React38.useState(false);
+  const [highlightedValue, setHighlightedValue] = React38.useState(void 0);
+  const generatedId = React38.useId();
   const triggerId = `${generatedId}-trigger`;
   const listboxId = `${generatedId}-listbox`;
-  const triggerRef = React37.useRef(null);
-  const selectedValueRef = React37.useRef(selectedValue);
+  const triggerRef = React38.useRef(null);
+  const selectedValueRef = React38.useRef(selectedValue);
   selectedValueRef.current = selectedValue;
-  const onInitLabel = React37.useCallback((val, label) => {
+  const onInitLabel = React38.useCallback((val, label) => {
     if (val === selectedValueRef.current) {
       setSelectedLabelBinding({ value: val, label });
     }
   }, []);
-  const onSelect = React37.useCallback(
+  const onSelect = React38.useCallback(
     (val, label) => {
       setSelectedValue(val);
       setSelectedLabelBinding({ value: val, label });
@@ -3936,38 +4038,144 @@ function SelectComboboxRoot({
     },
     [setSelectedValue]
   );
-  const onClose = React37.useCallback(() => setIsOpen(false), []);
-  const onOpen = React37.useCallback(() => setIsOpen(true), []);
-  return /* @__PURE__ */ jsx26(
-    SelectProvider,
-    {
-      value: {
-        size,
-        hasError,
-        isOpen,
-        selectedValue,
-        selectedLabelBinding,
-        onSelect,
-        onClose,
-        onOpen,
-        highlightedValue,
-        setHighlightedValue,
-        triggerId,
-        listboxId,
-        triggerRef,
-        disabled,
-        placeholder,
-        onInitLabel
-      },
-      children: /* @__PURE__ */ jsx26(ControlSizeProvider, { value: size, children })
-    }
+  const onClose = React38.useCallback(() => setIsOpen(false), []);
+  const onOpen = React38.useCallback(() => setIsOpen(true), []);
+  const contextValue = React38.useMemo(
+    () => ({
+      size,
+      hasError,
+      isOpen,
+      multiple: false,
+      selectedValue,
+      selectedLabelBinding,
+      selectedValues: [],
+      labelsByValue: {},
+      onSelect,
+      onClose,
+      onOpen,
+      highlightedValue,
+      setHighlightedValue,
+      triggerId,
+      listboxId,
+      triggerRef,
+      disabled,
+      placeholder,
+      onInitLabel
+    }),
+    [
+      size,
+      hasError,
+      isOpen,
+      selectedValue,
+      selectedLabelBinding,
+      onSelect,
+      onClose,
+      onOpen,
+      highlightedValue,
+      triggerId,
+      listboxId,
+      disabled,
+      placeholder,
+      onInitLabel
+    ]
   );
+  return /* @__PURE__ */ jsx26(SelectProvider, { value: contextValue, children: /* @__PURE__ */ jsx26(ControlSizeProvider, { value: size, children }) });
 }
 SelectComboboxRoot.displayName = "SelectComboboxRoot";
-var SelectTrigger = React37.forwardRef(
+function SelectComboboxMultiRoot({
+  size = "m",
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  placeholder,
+  hasError = false,
+  children
+}) {
+  const handleChange = React38.useCallback(
+    (next) => {
+      onChange?.(next);
+    },
+    [onChange]
+  );
+  const [selectedValues, setSelectedValues] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? [],
+    onChange: handleChange
+  });
+  const [labelsByValue, setLabelsByValue] = React38.useState({});
+  const [isOpen, setIsOpen] = React38.useState(false);
+  const [highlightedValue, setHighlightedValue] = React38.useState(void 0);
+  const generatedId = React38.useId();
+  const triggerId = `${generatedId}-trigger`;
+  const listboxId = `${generatedId}-listbox`;
+  const triggerRef = React38.useRef(null);
+  const onInitLabel = React38.useCallback((val, label) => {
+    setLabelsByValue((prev) => {
+      if (prev[val] === label) return prev;
+      return { ...prev, [val]: label };
+    });
+  }, []);
+  const onSelect = React38.useCallback(
+    (val, label) => {
+      setLabelsByValue((prev) => ({ ...prev, [val]: label }));
+      setSelectedValues((prev) => {
+        if (prev.includes(val)) {
+          return prev.filter((x) => x !== val);
+        }
+        return [...prev, val];
+      });
+    },
+    [setSelectedValues]
+  );
+  const onClose = React38.useCallback(() => setIsOpen(false), []);
+  const onOpen = React38.useCallback(() => setIsOpen(true), []);
+  const contextValue = React38.useMemo(
+    () => ({
+      size,
+      hasError,
+      isOpen,
+      multiple: true,
+      selectedValue: void 0,
+      selectedLabelBinding: void 0,
+      selectedValues,
+      labelsByValue,
+      onSelect,
+      onClose,
+      onOpen,
+      highlightedValue,
+      setHighlightedValue,
+      triggerId,
+      listboxId,
+      triggerRef,
+      disabled,
+      placeholder,
+      onInitLabel
+    }),
+    [
+      size,
+      hasError,
+      isOpen,
+      selectedValues,
+      labelsByValue,
+      onSelect,
+      onClose,
+      onOpen,
+      highlightedValue,
+      triggerId,
+      listboxId,
+      disabled,
+      placeholder,
+      onInitLabel
+    ]
+  );
+  return /* @__PURE__ */ jsx26(SelectProvider, { value: contextValue, children: /* @__PURE__ */ jsx26(ControlSizeProvider, { value: size, children }) });
+}
+SelectComboboxMultiRoot.displayName = "SelectComboboxMultiRoot";
+var SelectTrigger = React38.forwardRef(
   ({ className, children, onClick, onKeyDown, ...rest }, forwardedRef) => {
     const { isOpen, onOpen, onClose, triggerId, listboxId, disabled, size, hasError, triggerRef } = useSelectContext();
-    const setRefs = React37.useCallback(
+    const setRefs = React38.useCallback(
       (el) => {
         triggerRef.current = el;
         if (typeof forwardedRef === "function") {
@@ -4018,7 +4226,20 @@ var SelectTrigger = React37.forwardRef(
 );
 SelectTrigger.displayName = "SelectTrigger";
 function SelectValue({ className }) {
-  const { selectedLabelBinding, selectedValue, placeholder } = useSelectContext();
+  const ctx = useSelectContext();
+  if (ctx.multiple) {
+    const { selectedValues, labelsByValue, placeholder: placeholder2 } = ctx;
+    const display2 = selectedValues.length === 0 ? placeholder2 : selectedValues.map((v) => labelsByValue[v] ?? v).join(", ");
+    return /* @__PURE__ */ jsx26(
+      "span",
+      {
+        className: cx(Select_default.triggerValue, className),
+        ...toDataAttributes({ placeholder: display2 == null || display2 === "" }),
+        children: display2
+      }
+    );
+  }
+  const { selectedLabelBinding, selectedValue, placeholder } = ctx;
   const display = selectedLabelBinding && selectedLabelBinding.value === selectedValue ? selectedLabelBinding.label : selectedValue ?? placeholder;
   return /* @__PURE__ */ jsx26(
     "span",
@@ -4045,67 +4266,109 @@ function SelectContent({ className, children }) {
     highlightedValue,
     setHighlightedValue,
     selectedValue,
+    selectedValues,
+    multiple,
     size
   } = useSelectContext();
+  const selectedValueRef = React38.useRef(selectedValue);
+  selectedValueRef.current = selectedValue;
+  const selectedValuesRef = React38.useRef(selectedValues);
+  selectedValuesRef.current = selectedValues;
+  const multipleRef = React38.useRef(multiple);
+  multipleRef.current = multiple;
   const overlayPortalLayer = useOverlayPortalLayer();
-  const contentRef = React37.useRef(null);
-  const { resolvedSide, update } = usePosition(triggerRef, contentRef, {
-    side: "bottom",
-    align: "start"
-  });
-  const getItems = React37.useCallback(() => queryEnabledSelectOptions(contentRef.current), []);
-  React37.useLayoutEffect(() => {
+  const contentRef = React38.useRef(null);
+  const { resolvedSide, update } = usePosition(
+    triggerRef,
+    contentRef,
+    SELECT_LISTBOX_POSITION_OPTS
+  );
+  const updateRef = React38.useRef(update);
+  updateRef.current = update;
+  const getItems = React38.useCallback(() => queryEnabledSelectOptions(contentRef.current), []);
+  React38.useLayoutEffect(() => {
     if (!isOpen) return;
-    update();
-    const rafId = requestAnimationFrame(() => update());
+    updateRef.current();
+    const rafId = requestAnimationFrame(() => updateRef.current());
     return () => cancelAnimationFrame(rafId);
-  }, [isOpen, update]);
-  React37.useEffect(() => {
+  }, [isOpen]);
+  React38.useEffect(() => {
     if (!isOpen) {
       setHighlightedValue(void 0);
       return;
     }
-    const reposition = () => {
-      requestAnimationFrame(() => update());
-    };
     const bootstrap = () => {
       requestAnimationFrame(() => {
         const el = contentRef.current;
         if (!el) return;
         el.focus({ preventScroll: true });
         const items = queryEnabledSelectOptions(el);
-        const selectedIndex = items.findIndex((i) => i.dataset.value === selectedValue);
-        if (selectedIndex >= 0 && selectedValue) {
-          setHighlightedValue(selectedValue);
+        if (multipleRef.current) {
+          const sv = selectedValuesRef.current;
+          const firstSelected = sv.find((v) => items.some((i) => i.dataset.value === v));
+          setHighlightedValue(firstSelected ?? void 0);
+        } else {
+          const sv = selectedValueRef.current;
+          const selectedIndex = items.findIndex((i) => i.dataset.value === sv);
+          if (selectedIndex >= 0 && sv) {
+            setHighlightedValue(sv);
+          }
         }
       });
     };
     bootstrap();
-    window.addEventListener("resize", reposition);
+  }, [isOpen, setHighlightedValue]);
+  React38.useEffect(() => {
+    if (!isOpen) return;
+    let rafCoalesce = 0;
+    const schedule = () => {
+      cancelAnimationFrame(rafCoalesce);
+      rafCoalesce = requestAnimationFrame(() => updateRef.current());
+    };
+    window.addEventListener("resize", schedule);
+    const scrollTargets = getScrollContainers(triggerRef.current);
+    for (const t of scrollTargets) {
+      t.addEventListener("scroll", schedule, { passive: true });
+    }
     const vv = window.visualViewport;
-    vv?.addEventListener("resize", reposition);
+    vv?.addEventListener("resize", schedule);
+    const panel = contentRef.current;
+    let ro = null;
+    if (typeof ResizeObserver !== "undefined" && panel) {
+      ro = new ResizeObserver(schedule);
+      ro.observe(panel);
+    }
     return () => {
-      window.removeEventListener("resize", reposition);
-      vv?.removeEventListener("resize", reposition);
+      cancelAnimationFrame(rafCoalesce);
+      window.removeEventListener("resize", schedule);
+      for (const t of scrollTargets) {
+        t.removeEventListener("scroll", schedule);
+      }
+      vv?.removeEventListener("resize", schedule);
+      ro?.disconnect();
     };
-  }, [isOpen, update, selectedValue, setHighlightedValue]);
+  }, [isOpen, triggerRef]);
   useEscapeKey({ enabled: isOpen, onEscape: onClose });
   useOutsideClick({ refs: [triggerRef, contentRef], enabled: isOpen, onOutsideClick: onClose });
-  const handleKeyDown = (e) => {
-    handleSelectListboxKeyDown(e, {
-      items: getItems(),
-      highlightedValue,
-      setHighlightedValue,
-      onSelect,
-      onClose
-    });
-  };
+  const handleKeyDown = React38.useCallback(
+    (e) => {
+      handleSelectListboxKeyDown(e, {
+        items: getItems(),
+        highlightedValue,
+        setHighlightedValue,
+        onSelect,
+        onClose
+      });
+    },
+    [getItems, highlightedValue, setHighlightedValue, onSelect, onClose]
+  );
   return /* @__PURE__ */ jsx26(Portal, { children: /* @__PURE__ */ jsx26(
     ScrollContainer,
     {
       ref: contentRef,
       id: listboxId,
       role: "listbox",
+      "aria-multiselectable": multiple ? true : void 0,
       "aria-labelledby": triggerId,
       "aria-hidden": !isOpen,
       tabIndex: -1,
@@ -4124,6 +4387,17 @@ function SelectItemIcon({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx26("span", { className: cx(Select_default.itemIcon, className), ...rest, children });
 }
 SelectItemIcon.displayName = "SelectItemIcon";
+var SELECT_ITEM_ICON_MARKER = "__primeSelectItemIcon";
+Object.assign(SelectItemIcon, { [SELECT_ITEM_ICON_MARKER]: true });
+function isSelectItemIconType(type) {
+  if (type === SelectItemIcon) return true;
+  if (typeof type === "function") {
+    const fn = type;
+    if (fn[SELECT_ITEM_ICON_MARKER] === true) return true;
+    if (fn.displayName === "SelectItemIcon") return true;
+  }
+  return false;
+}
 function selectItemTextFromRest(rest) {
   const parts = [];
   for (const node of rest) {
@@ -4137,8 +4411,8 @@ function selectItemTextFromRest(rest) {
 function partitionSelectItemChildren(children) {
   const icons = [];
   const rest = [];
-  React37.Children.forEach(children, (child) => {
-    if (React37.isValidElement(child) && child.type === SelectItemIcon) {
+  React38.Children.forEach(children, (child) => {
+    if (React38.isValidElement(child) && isSelectItemIconType(child.type)) {
       icons.push(child);
     } else if (child != null && child !== false) {
       rest.push(child);
@@ -4146,14 +4420,23 @@ function partitionSelectItemChildren(children) {
   });
   return { icons, rest };
 }
-var SelectItem = React37.forwardRef(
+var SelectItem = React38.forwardRef(
   ({ value, label, disabled, className, children }, ref) => {
-    const { selectedValue, highlightedValue, setHighlightedValue, onSelect, onInitLabel } = useSelectContext();
+    const {
+      multiple,
+      size,
+      selectedValue,
+      selectedValues,
+      highlightedValue,
+      setHighlightedValue,
+      onSelect,
+      onInitLabel
+    } = useSelectContext();
     const { icons, rest } = partitionSelectItemChildren(children);
-    const isSelected = selectedValue === value;
+    const isSelected = multiple ? selectedValues.includes(value) : selectedValue === value;
     const isHighlighted = highlightedValue === value;
     const resolvedLabel = label ?? selectItemTextFromRest(rest) ?? (typeof children === "string" ? children : void 0) ?? value;
-    React37.useEffect(() => {
+    React38.useEffect(() => {
       onInitLabel(value, resolvedLabel);
     }, [value, resolvedLabel, onInitLabel, selectedValue]);
     const handleClick = () => {
@@ -4185,11 +4468,12 @@ var SelectItem = React37.forwardRef(
           label: resolvedLabel,
           selected: isSelected,
           highlighted: isHighlighted,
-          disabled: Boolean(disabled)
+          disabled: Boolean(disabled),
+          size
         }),
         children: [
           icons.map(
-            (icon, index) => React37.cloneElement(icon, {
+            (icon, index) => React38.cloneElement(icon, {
               key: icon.key ?? `prime-select-item-icon-${String(index)}`
             })
           ),
@@ -4206,7 +4490,8 @@ function SelectGroup({ className, ...rest }) {
 }
 SelectGroup.displayName = "SelectGroup";
 function SelectGroupLabel({ className, ...rest }) {
-  return /* @__PURE__ */ jsx26("div", { className: cx(Select_default.groupLabel, className), ...rest });
+  const { size } = useSelectContext();
+  return /* @__PURE__ */ jsx26("div", { className: cx(Select_default.groupLabel, className), ...rest, ...toDataAttributes({ size }) });
 }
 SelectGroupLabel.displayName = "SelectGroupLabel";
 function SelectSeparator({ className, ...rest }) {
@@ -4217,7 +4502,7 @@ function extractPlainTextFromNode(node) {
   if (node == null || typeof node === "boolean") return "";
   if (typeof node === "string" || typeof node === "number") return String(node);
   if (Array.isArray(node)) return node.map(extractPlainTextFromNode).join("");
-  if (React37.isValidElement(node)) {
+  if (React38.isValidElement(node)) {
     const p = node.props;
     if (p != null && typeof p === "object" && "children" in p) {
       return extractPlainTextFromNode(p.children);
@@ -4236,10 +4521,10 @@ function walkNativeOptions(node) {
   let firstEnabledValue;
   let keyIndex = 0;
   const visit = (n) => {
-    React37.Children.forEach(n, (child) => {
+    React38.Children.forEach(n, (child) => {
       if (child == null || child === false) return;
-      if (!React37.isValidElement(child)) return;
-      if (child.type === React37.Fragment) {
+      if (!React38.isValidElement(child)) return;
+      if (child.type === React38.Fragment) {
         visit(child.props.children);
         return;
       }
@@ -4258,8 +4543,8 @@ function walkNativeOptions(node) {
         const ogKey = keyIndex;
         let groupLabel = "";
         const groupNodes = [];
-        React37.Children.forEach(child.props.children, (gc) => {
-          if (!React37.isValidElement(gc)) return;
+        React38.Children.forEach(child.props.children, (gc) => {
+          if (!React38.isValidElement(gc)) return;
           if (gc.type === SelectGroupLabel) {
             groupLabel = extractPlainTextFromNode(
               gc.props.children
@@ -4302,7 +4587,7 @@ function SelectNativeRoot({
   hasError = false,
   children
 }) {
-  const handleChange = React37.useCallback(
+  const handleChange = React38.useCallback(
     (v) => {
       if (v !== void 0) onChange?.(v);
     },
@@ -4313,13 +4598,13 @@ function SelectNativeRoot({
     defaultValue,
     onChange: handleChange
   });
-  const { nodes: optionNodes, firstEnabledValue } = React37.useMemo(
+  const { nodes: optionNodes, firstEnabledValue } = React38.useMemo(
     () => walkNativeOptions(children),
     [children]
   );
   const hasPlaceholder = placeholder != null && placeholder !== "";
   const selectValue = selectedValue === void 0 ? hasPlaceholder ? "" : firstEnabledValue ?? "" : selectedValue;
-  const handleNativeChange = React37.useCallback(
+  const handleNativeChange = React38.useCallback(
     (e) => {
       const v = e.target.value;
       setSelectedValue(v === "" ? void 0 : v);
@@ -4342,6 +4627,49 @@ function SelectNativeRoot({
   ) });
 }
 SelectNativeRoot.displayName = "SelectNativeRoot";
+function SelectNativeMultiRoot({
+  size = "m",
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  hasError = false,
+  children
+}) {
+  const handleChange = React38.useCallback(
+    (next) => {
+      onChange?.(next);
+    },
+    [onChange]
+  );
+  const [selectedValues, setSelectedValues] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? [],
+    onChange: handleChange
+  });
+  const { nodes: optionNodes } = React38.useMemo(() => walkNativeOptions(children), [children]);
+  const handleNativeChange = React38.useCallback(
+    (e) => {
+      const next = Array.from(e.target.selectedOptions, (o) => o.value);
+      setSelectedValues(next);
+    },
+    [setSelectedValues]
+  );
+  return /* @__PURE__ */ jsx26(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx26(
+    "select",
+    {
+      className: Select_default.nativeSelect,
+      "data-multiple": "true",
+      disabled,
+      multiple: true,
+      value: selectedValues,
+      onChange: handleNativeChange,
+      ...toDataAttributes({ size, "has-error": hasError }),
+      children: optionNodes
+    }
+  ) });
+}
+SelectNativeMultiRoot.displayName = "SelectNativeMultiRoot";
 var Select = {
   Root: SelectRoot,
   Trigger: SelectTrigger,
@@ -4396,9 +4724,9 @@ var CHANNEL_ARIA = {
   green: "\u0417\u0435\u043B\u0451\u043D\u044B\u0439, 0\u2013255",
   blue: "\u0421\u0438\u043D\u0438\u0439, 0\u2013255"
 };
-var ColorValueFormatContext = React38.createContext(null);
+var ColorValueFormatContext = React39.createContext(null);
 function useColorValueFormat() {
-  const v = React38.useContext(ColorValueFormatContext);
+  const v = React39.useContext(ColorValueFormatContext);
   if (!v) {
     throw new Error(
       "ColorPicker: \u043E\u0431\u0435\u0440\u043D\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443 \u0432 ColorPicker.FormatProvider \u0434\u043B\u044F \u0444\u043E\u0440\u043C\u0430\u0442\u0430 \u0438 \u043F\u043E\u043B\u043E\u0441\u044B \u043A\u0430\u043D\u0430\u043B\u043E\u0432."
@@ -4407,8 +4735,8 @@ function useColorValueFormat() {
   return v;
 }
 function FormatProvider({ children, defaultFormat = "hsl" }) {
-  const [format, setFormat] = React38.useState(defaultFormat);
-  const value = React38.useMemo(() => ({ format, setFormat }), [format]);
+  const [format, setFormat] = React39.useState(defaultFormat);
+  const value = React39.useMemo(() => ({ format, setFormat }), [format]);
   return /* @__PURE__ */ jsx27(ColorValueFormatContext.Provider, { value, children });
 }
 var FORMAT_SELECT_LABEL = {
@@ -4417,7 +4745,7 @@ var FORMAT_SELECT_LABEL = {
   hex: "Hex"
 };
 function FormatSelect({ className }) {
-  const ctx = React38.useContext(ColorValueFormatContext);
+  const ctx = React39.useContext(ColorValueFormatContext);
   if (!ctx) {
     return null;
   }
@@ -4471,13 +4799,13 @@ function ChannelField({
   space,
   suffix
 }) {
-  const state = React38.useContext(ColorPickerStateContext);
-  const inputRef = React38.useRef(null);
-  const [text, setText] = React38.useState(
+  const state = React39.useContext(ColorPickerStateContext);
+  const inputRef = React39.useRef(null);
+  const [text, setText] = React39.useState(
     () => state ? displayChannelValue(state.color, channel, space) : ""
   );
   const fingerprint = state ? state.color.toString("hexa") : "";
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!state) {
       return;
     }
@@ -4517,9 +4845,9 @@ function ChannelField({
   ] });
 }
 function StripHexField() {
-  const state = React38.useContext(ColorPickerStateContext);
-  const inputRef = React38.useRef(null);
-  const [text, setText] = React38.useState(() => {
+  const state = React39.useContext(ColorPickerStateContext);
+  const inputRef = React39.useRef(null);
+  const [text, setText] = React39.useState(() => {
     if (!state) {
       return "";
     }
@@ -4528,7 +4856,7 @@ function StripHexField() {
     return c.toString(a < 1 ? "hexa" : "hex");
   });
   const fingerprint = state ? state.color.toString("hexa") : "";
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!state) {
       return;
     }
@@ -4713,9 +5041,9 @@ function SliderMeta({ label }) {
   ] });
 }
 function HexInput({ size = "m", label = "Hex", className }) {
-  const state = React38.useContext(ColorPickerStateContext);
-  const inputRef = React38.useRef(null);
-  const [text, setText] = React38.useState(() => {
+  const state = React39.useContext(ColorPickerStateContext);
+  const inputRef = React39.useRef(null);
+  const [text, setText] = React39.useState(() => {
     if (!state) {
       return "";
     }
@@ -4724,7 +5052,7 @@ function HexInput({ size = "m", label = "Hex", className }) {
     return c.toString(a < 1 ? "hexa" : "hex");
   });
   const colorFingerprint = state ? state.color.toString("hexa") : "";
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!state) {
       return;
     }
@@ -4767,8 +5095,8 @@ function HexInput({ size = "m", label = "Hex", className }) {
     }
   ) }) });
 }
-var EyeDropperButton = React38.forwardRef(function EyeDropperButton2({ children, onClick, type = "button", "aria-label": ariaLabel, className, ...rest }, forwardedRef) {
-  const state = React38.useContext(ColorPickerStateContext);
+var EyeDropperButton = React39.forwardRef(function EyeDropperButton2({ children, onClick, type = "button", "aria-label": ariaLabel, className, ...rest }, forwardedRef) {
+  const state = React39.useContext(ColorPickerStateContext);
   const EyeDropperApi = typeof globalThis !== "undefined" ? globalThis.EyeDropper : void 0;
   if (!state) {
     return null;
@@ -4814,7 +5142,7 @@ var EyeDropperButton = React38.forwardRef(function EyeDropperButton2({ children,
 });
 EyeDropperButton.displayName = "EyeDropperButton";
 function TriggerSwatch({ className }) {
-  const state = React38.useContext(ColorPickerStateContext);
+  const state = React39.useContext(ColorPickerStateContext);
   const colorCss = state != null ? state.color.toString("css") : TRIGGER_SWATCH_FALLBACK_FILL;
   return /* @__PURE__ */ jsx27("span", { "aria-hidden": true, className: cx(ColorPicker_default.triggerSwatch, className), children: /* @__PURE__ */ jsx27(
     "svg",
@@ -4850,13 +5178,13 @@ var ColorPicker = {
 };
 
 // src/components/command-menu/CommandMenu.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 
 // src/components/modal/Modal.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 
 // src/hooks/useModalKeyboard.ts
-import * as React39 from "react";
+import * as React40 from "react";
 function shouldBlockEnterConfirm(target) {
   if (!target || !(target instanceof HTMLElement)) {
     return false;
@@ -4891,7 +5219,7 @@ function useModalKeyboard({
   primaryRef
 }) {
   useEscapeKey({ enabled: closeOnEscape && open, onEscape: onClose });
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     if (!open || !confirmOnEnter) {
       return;
     }
@@ -4957,9 +5285,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 = React40.createContext(null);
+var ModalContentShellContext = React41.createContext(null);
 function useModalContentShell() {
-  const value = React40.useContext(ModalContentShellContext);
+  const value = React41.useContext(ModalContentShellContext);
   if (value === null) {
     throw new Error(
       "[prime-ui-kit] Modal header block must be used inside the dialog panel (internal)."
@@ -4982,9 +5310,9 @@ function ModalRoot({
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const primaryActionRef = React40.useRef(null);
-  const onOpen = React40.useCallback(() => setIsOpen(true), [setIsOpen]);
-  const onClose = React40.useCallback(() => setIsOpen(false), [setIsOpen]);
+  const primaryActionRef = React41.useRef(null);
+  const onOpen = React41.useCallback(() => setIsOpen(true), [setIsOpen]);
+  const onClose = React41.useCallback(() => setIsOpen(false), [setIsOpen]);
   return /* @__PURE__ */ jsx28(
     ModalProvider,
     {
@@ -5004,8 +5332,8 @@ function ModalRoot({
 }
 function ModalTrigger({ children }) {
   const { onOpen } = useModalContext();
-  const child = React40.Children.only(children);
-  return React40.cloneElement(child, {
+  const child = React41.Children.only(children);
+  return React41.cloneElement(child, {
     onClick: (event) => {
       child.props.onClick?.(event);
       if (!event.defaultPrevented) {
@@ -5014,12 +5342,12 @@ function ModalTrigger({ children }) {
     }
   });
 }
-var ModalClose = React40.forwardRef(function ModalClose2({ children }, forwardedRef) {
+var ModalClose = React41.forwardRef(function ModalClose2({ children }, forwardedRef) {
   const { onClose } = useModalContext();
-  const child = React40.Children.only(children);
+  const child = React41.Children.only(children);
   const childRef = child.ref;
   const mergedRef = mergeRefs(childRef, forwardedRef);
-  return React40.cloneElement(child, {
+  return React41.cloneElement(child, {
     ref: mergedRef,
     onClick: (event) => {
       child.props.onClick?.(event);
@@ -5033,12 +5361,12 @@ function FooterPrimarySlot({
   children
 }) {
   const { primaryActionRef } = useModalContext();
-  const child = React40.Children.only(children);
+  const child = React41.Children.only(children);
   const childRef = child.ref;
   const mergedRef = mergeRefs(childRef, (node) => {
     primaryActionRef.current = node;
   });
-  return React40.cloneElement(child, { ref: mergedRef });
+  return React41.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: [
@@ -5087,15 +5415,15 @@ function ModalContent({
   ...rest
 }) {
   const { open, onClose, closeOnEscape, confirmOnEnter, onEnterConfirm, primaryActionRef } = useModalContext();
-  const internalTitleId = React40.useId();
-  const internalDescId = React40.useId();
+  const internalTitleId = React41.useId();
+  const internalDescId = React41.useId();
   const titleId = ariaLabelledByProp ?? internalTitleId;
   const descId = ariaDescribedByProp ?? internalDescId;
-  const [headerState, setHeaderState] = React40.useState(null);
-  const registerHeader = React40.useCallback((state) => {
+  const [headerState, setHeaderState] = React41.useState(null);
+  const registerHeader = React41.useCallback((state) => {
     setHeaderState(state);
   }, []);
-  const shellValue = React40.useMemo(
+  const shellValue = React41.useMemo(
     () => ({ titleId, descId, registerHeader }),
     [titleId, descId, registerHeader]
   );
@@ -5112,7 +5440,7 @@ function ModalContent({
     onEnterConfirm,
     primaryRef: primaryActionRef
   });
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (!open) return;
     const container = trapRef.current;
     if (!container) return;
@@ -5169,7 +5497,7 @@ function ModalHeader({
   const { onClose } = useModalContext();
   const { titleId, descId, registerHeader } = useModalContentShell();
   const hasDescription = description != null && description !== "";
-  React40.useLayoutEffect(() => {
+  React41.useLayoutEffect(() => {
     registerHeader({
       hasDescription
     });
@@ -5233,7 +5561,7 @@ function ModalPanel({
   ...rest
 }) {
   const hasHeader = title != null && title !== "";
-  const footerNode = footer != null ? React40.isValidElement(footer) && footer.type === ModalFooter ? React40.cloneElement(footer, {
+  const footerNode = footer != null ? React41.isValidElement(footer) && footer.type === ModalFooter ? React41.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(
@@ -5314,27 +5642,27 @@ function matchesQuery(entry, query) {
   return hay.includes(q);
 }
 var [CommandMenuProvider, useCommandMenuContext] = createComponentContext("CommandMenu");
-var CommandMenuGroupContext = React41.createContext("");
+var CommandMenuGroupContext = React42.createContext("");
 function CommandMenuRootProvider({ children }) {
-  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(() => {
+  const listboxId = React42.useId();
+  const inputRef = React42.useRef(null);
+  const itemsRef = React42.useRef(/* @__PURE__ */ new Map());
+  const orderSeqRef = React42.useRef(0);
+  const orderMapRef = React42.useRef(/* @__PURE__ */ new Map());
+  const [version, bump] = React42.useReducer((n) => n + 1, 0);
+  const [search, setSearch] = React42.useState("");
+  const [activeId, setActiveId] = React42.useState(null);
+  React42.useLayoutEffect(() => {
     orderSeqRef.current = 0;
     orderMapRef.current.clear();
   }, []);
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     setSearch("");
     setActiveId(null);
     const id = requestAnimationFrame(() => inputRef.current?.focus());
     return () => cancelAnimationFrame(id);
   }, []);
-  const registerItem = React41.useCallback(
+  const registerItem = React42.useCallback(
     (id, patch) => {
       let order = orderMapRef.current.get(id);
       if (order === void 0) {
@@ -5350,20 +5678,20 @@ function CommandMenuRootProvider({ children }) {
     },
     []
   );
-  const visibleIds = React41.useMemo(() => {
+  const visibleIds = React42.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 = React41.useCallback((id) => itemsRef.current.get(id), []);
-  React41.useLayoutEffect(() => {
+  const itemGet = React42.useCallback((id) => itemsRef.current.get(id), []);
+  React42.useLayoutEffect(() => {
     setActiveId((prev) => {
       if (visibleIds.length === 0) return null;
       if (prev && visibleIds.includes(prev)) return prev;
       return visibleIds[0] ?? null;
     });
   }, [visibleIds]);
-  const moveActive = React41.useCallback(
+  const moveActive = React42.useCallback(
     (delta) => {
       if (visibleIds.length === 0) return;
       setActiveId((prev) => {
@@ -5374,11 +5702,11 @@ function CommandMenuRootProvider({ children }) {
     },
     [visibleIds]
   );
-  const activateSelected = React41.useCallback(() => {
+  const activateSelected = React42.useCallback(() => {
     if (!activeId) return;
     itemsRef.current.get(activeId)?.onSelectRef.current?.();
   }, [activeId]);
-  const value = React41.useMemo(
+  const value = React42.useMemo(
     () => ({
       search,
       setSearch,
@@ -5472,7 +5800,7 @@ function CommandMenuInputRow({
     }
   );
 }
-var CommandMenuInput = React41.forwardRef(
+var CommandMenuInput = React42.forwardRef(
   ({ className, onKeyDown, value: valueProp, onChange, ...rest }, forwardedRef) => {
     const {
       search,
@@ -5486,12 +5814,12 @@ var CommandMenuInput = React41.forwardRef(
       visibleIds
     } = useCommandMenuContext();
     const isControlled = valueProp !== void 0;
-    React41.useEffect(() => {
+    React42.useEffect(() => {
       if (isControlled) {
         setSearch(valueProp !== void 0 && valueProp !== null ? String(valueProp) : "");
       }
     }, [isControlled, valueProp, setSearch]);
-    const setRefs = React41.useCallback(
+    const setRefs = React42.useCallback(
       (node) => {
         inputRef.current = node;
         if (typeof forwardedRef === "function") {
@@ -5559,7 +5887,7 @@ var CommandMenuInput = React41.forwardRef(
   }
 );
 CommandMenuInput.displayName = "CommandMenu.Input";
-var CommandMenuList = React41.forwardRef(
+var CommandMenuList = React42.forwardRef(
   ({ className, children, ...rest }, ref) => {
     const { listboxId } = useCommandMenuContext();
     return /* @__PURE__ */ jsx29(
@@ -5578,7 +5906,7 @@ var CommandMenuList = React41.forwardRef(
 );
 CommandMenuList.displayName = "CommandMenu.List";
 function CommandMenuGroup({ heading, className, children, ...rest }) {
-  const groupId = React41.useId();
+  const groupId = React42.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: [
@@ -5586,7 +5914,7 @@ function CommandMenuGroup({ heading, className, children, ...rest }) {
     children
   ] }) });
 }
-var CommandMenuItem = React41.forwardRef(
+var CommandMenuItem = React42.forwardRef(
   ({
     className,
     value,
@@ -5598,15 +5926,15 @@ var CommandMenuItem = React41.forwardRef(
     onPointerMove,
     ...rest
   }, forwardedRef) => {
-    const id = React41.useId();
+    const id = React42.useId();
     const optionId = `${id}-option`;
-    const groupId = React41.useContext(CommandMenuGroupContext);
+    const groupId = React42.useContext(CommandMenuGroupContext);
     const { registerItem, activeId, setActiveId, visibleIds } = useCommandMenuContext();
-    const onSelectRef = React41.useRef(onSelect);
-    React41.useEffect(() => {
+    const onSelectRef = React42.useRef(onSelect);
+    React42.useEffect(() => {
       onSelectRef.current = onSelect;
     }, [onSelect]);
-    React41.useLayoutEffect(() => {
+    React42.useLayoutEffect(() => {
       return registerItem(id, {
         value,
         keywords,
@@ -5617,8 +5945,8 @@ var CommandMenuItem = React41.forwardRef(
     }, [id, value, keywords, disabled, groupId, registerItem]);
     const filteredIn = visibleIds.includes(id);
     const selected = activeId === id;
-    const listRef = React41.useRef(null);
-    const setRefs = React41.useCallback(
+    const listRef = React42.useRef(null);
+    const setRefs = React42.useCallback(
       (node) => {
         listRef.current = node;
         if (typeof forwardedRef === "function") {
@@ -5629,7 +5957,7 @@ var CommandMenuItem = React41.forwardRef(
       },
       [forwardedRef]
     );
-    React41.useEffect(() => {
+    React42.useEffect(() => {
       if (selected && listRef.current) {
         listRef.current.scrollIntoView?.({ block: "nearest" });
       }
@@ -5691,7 +6019,7 @@ function CommandMenuTagRow({ className, ...rest }) {
 function CommandMenuFooter({ className, ...rest }) {
   return /* @__PURE__ */ jsx29("div", { className: cx(CommandMenu_default.footer, className), ...rest });
 }
-var CommandMenuFooterKeyBox = React41.forwardRef(
+var CommandMenuFooterKeyBox = React42.forwardRef(
   ({ className, children, tone = "default", ...rest }, ref) => {
     const variant = tone === "muted" ? "lighter" : "stroke";
     return /* @__PURE__ */ jsx29(
@@ -5728,7 +6056,7 @@ var CommandMenu = {
 
 // src/components/data-table/DataTable.tsx
 import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
-import * as React42 from "react";
+import * as React43 from "react";
 
 // src/internal/runtimeUnits.ts
 var CSS_PX_SUFFIX = "px";
@@ -5944,11 +6272,11 @@ function DataTableRoot({
   highlightColumnOnHover = false,
   striped = false
 }) {
-  const [hoveredColumnId, setHoveredColumnId] = React42.useState(null);
-  const clearHoveredColumn = React42.useCallback(() => {
+  const [hoveredColumnId, setHoveredColumnId] = React43.useState(null);
+  const clearHoveredColumn = React43.useCallback(() => {
     setHoveredColumnId(null);
   }, []);
-  const setHoveredColumn = React42.useCallback(
+  const setHoveredColumn = React43.useCallback(
     (columnId) => {
       if (highlightColumnOnHover) setHoveredColumnId(columnId);
     },
@@ -5965,19 +6293,19 @@ function DataTableRoot({
     onChange: onPageChange
   });
   const initialVisible = Math.max(1, initialVisibleRows ?? pageSize);
-  const [visibleRowCount, setVisibleRowCount] = React42.useState(initialVisible);
-  const scrollRef = React42.useRef(null);
-  const sentinelRef = React42.useRef(null);
-  React42.useLayoutEffect(() => {
+  const [visibleRowCount, setVisibleRowCount] = React43.useState(initialVisible);
+  const scrollRef = React43.useRef(null);
+  const sentinelRef = React43.useRef(null);
+  React43.useLayoutEffect(() => {
     const viewport = scrollRef.current;
     if (!viewport) return;
     viewport.style.maxHeight = infiniteScroll ? typeof scrollHeight === "number" ? `${scrollHeight}px` : scrollHeight : "";
   }, [infiniteScroll, scrollHeight]);
-  const sortableColumns = React42.useMemo(
+  const sortableColumns = React43.useMemo(
     () => new Set(columns.filter((c) => c.sortable).map((c) => c.id)),
     [columns]
   );
-  const sortedRows = React42.useMemo(() => {
+  const sortedRows = React43.useMemo(() => {
     if (!sortState || !sortableColumns.has(sortState.columnId)) return rows;
     const column = columns.find((item) => item.id === sortState.columnId);
     if (!column) return rows;
@@ -5992,21 +6320,21 @@ function DataTableRoot({
   const safePageSize = Math.max(1, pageSize);
   const totalPages = Math.max(1, Math.ceil(totalRows / safePageSize));
   const safePage = clamp(pageState, 1, totalPages);
-  React42.useEffect(() => {
+  React43.useEffect(() => {
     if (safePage !== pageState) setPageState(safePage);
   }, [pageState, safePage, setPageState]);
-  React42.useEffect(() => {
+  React43.useEffect(() => {
     if (infiniteScroll) {
       setVisibleRowCount(initialVisible);
       return;
     }
     setPageState(1);
   }, [infiniteScroll, initialVisible, setPageState]);
-  React42.useEffect(() => {
+  React43.useEffect(() => {
     if (!infiniteScroll) return;
     setVisibleRowCount((prev) => clamp(prev, initialVisible, Math.max(initialVisible, totalRows)));
   }, [infiniteScroll, initialVisible, totalRows]);
-  const displayedRows = React42.useMemo(() => {
+  const displayedRows = React43.useMemo(() => {
     if (infiniteScroll) {
       return sortedRows.slice(0, visibleRowCount);
     }
@@ -6016,7 +6344,7 @@ function DataTableRoot({
   }, [infiniteScroll, safePage, safePageSize, sortedRows, visibleRowCount]);
   const hasInternalMore = infiniteScroll && displayedRows.length < totalRows;
   const canRequestMore = infiniteScroll && Boolean(onLoadMore) && hasMore && !loadingMore;
-  const handleReachEnd = React42.useCallback(() => {
+  const handleReachEnd = React43.useCallback(() => {
     if (!infiniteScroll) return;
     if (hasInternalMore) {
       setVisibleRowCount((prev) => Math.min(prev + Math.max(1, infiniteBatchSize), totalRows));
@@ -6026,7 +6354,7 @@ function DataTableRoot({
       void onLoadMore();
     }
   }, [canRequestMore, hasInternalMore, infiniteBatchSize, infiniteScroll, onLoadMore, totalRows]);
-  React42.useEffect(() => {
+  React43.useEffect(() => {
     if (!infiniteScroll) return;
     const root = scrollRef.current;
     const target = sentinelRef.current;
@@ -6203,7 +6531,7 @@ var DataTable = {
 
 // src/components/datepicker/Datepicker.tsx
 import { ChevronDown as ChevronDown2, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3 } from "lucide-react";
-import * as React44 from "react";
+import * as React45 from "react";
 import {
   DayPicker,
   getDefaultClassNames,
@@ -6211,14 +6539,14 @@ import {
 } from "react-day-picker";
 
 // src/hooks/useResponsiveMonths.ts
-import * as React43 from "react";
+import * as React44 from "react";
 var DEFAULT_BREAKPOINTS = {
   twoColumns: 520
 };
 function useResponsiveMonths(breakpoints = DEFAULT_BREAKPOINTS, container = null) {
   const { twoColumns } = breakpoints;
-  const [count, setCount] = React43.useState(1);
-  React43.useEffect(() => {
+  const [count, setCount] = React44.useState(1);
+  React44.useEffect(() => {
     if (!container) return;
     let rafId = null;
     const syncByWidth = (width) => {
@@ -6282,9 +6610,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 = React44.createContext(void 0);
+var DatepickerSizeContext = React45.createContext(void 0);
 DatepickerSizeContext.displayName = "DatepickerSizeContext";
-var DatepickerMonthContext = React44.createContext(
+var DatepickerMonthContext = React45.createContext(
   void 0
 );
 DatepickerMonthContext.displayName = "DatepickerMonthContext";
@@ -6347,7 +6675,7 @@ function DatepickerMonthCaption({
   displayIndex,
   ...rest
 }) {
-  const inheritedSize = React44.useContext(DatepickerSizeContext);
+  const inheritedSize = React45.useContext(DatepickerSizeContext);
   const size = inheritedSize ?? "m";
   const { dayPickerProps, goToMonth, previousMonth, nextMonth } = useDayPicker();
   const monthsCount = dayPickerProps.numberOfMonths ?? 1;
@@ -6399,20 +6727,20 @@ function Calendar({
   size: sizeProp,
   ...rest
 }) {
-  const inheritedSize = React44.useContext(DatepickerSizeContext);
-  const monthContext = React44.useContext(DatepickerMonthContext);
+  const inheritedSize = React45.useContext(DatepickerSizeContext);
+  const monthContext = React45.useContext(DatepickerMonthContext);
   const size = sizeProp ?? inheritedSize ?? "m";
   const breakpoints = responsiveBreakpoints ?? DEFAULT_RESPONSIVE;
-  const [containerEl, setContainerEl] = React44.useState(null);
-  const callbackRef = React44.useCallback((node) => {
+  const [containerEl, setContainerEl] = React45.useState(null);
+  const callbackRef = React45.useCallback((node) => {
     setContainerEl(node);
   }, []);
   const responsiveN = useResponsiveMonths(breakpoints, containerEl);
   const numberOfMonths = responsiveMonths === true ? responsiveN : numberOfMonthsProp ?? 1;
-  const [localMonth, setLocalMonth] = React44.useState(() => {
+  const [localMonth, setLocalMonth] = React45.useState(() => {
     return monthProp ?? monthContext?.requestedMonth;
   });
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     if (monthProp === void 0 && monthContext?.requestedMonth) {
       setLocalMonth(monthContext.requestedMonth);
     }
@@ -6430,7 +6758,7 @@ function Calendar({
   };
   const mergedStyle = style && typeof style === "object" ? { ...style } : {};
   const resolvedMonth = monthProp ?? localMonth;
-  const handleMonthChange = React44.useCallback(
+  const handleMonthChange = React45.useCallback(
     (next) => {
       if (monthProp === void 0) {
         setLocalMonth(next);
@@ -6463,7 +6791,7 @@ function Calendar({
 Calendar.displayName = "Datepicker.Calendar";
 function Shell({ children, className, presets, size = "m" }) {
   const has = presets != null;
-  const [requestedMonth, requestMonth] = React44.useState();
+  const [requestedMonth, requestMonth] = React45.useState();
   return /* @__PURE__ */ jsx32(DatepickerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx32(DatepickerMonthContext.Provider, { value: { requestedMonth, requestMonth }, children: /* @__PURE__ */ jsxs15(
     "div",
     {
@@ -6479,8 +6807,8 @@ function Shell({ children, className, presets, size = "m" }) {
 }
 Shell.displayName = "Datepicker.Shell";
 function Presets(props) {
-  const inheritedSize = React44.useContext(DatepickerSizeContext);
-  const monthContext = React44.useContext(DatepickerMonthContext);
+  const inheritedSize = React45.useContext(DatepickerSizeContext);
+  const monthContext = React45.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(
@@ -6509,8 +6837,8 @@ function Presets(props) {
 }
 Presets.displayName = "Datepicker.Presets";
 function Time(props) {
-  const baseId = React44.useId();
-  const inheritedSize = React44.useContext(DatepickerSizeContext);
+  const baseId = React45.useId();
+  const inheritedSize = React45.useContext(DatepickerSizeContext);
   if (props.mode === "range") {
     const { from, to, onFromChange, onToChange, labels: labels2, size: sizeProp2 } = props;
     const size2 = sizeProp2 ?? inheritedSize ?? "m";
@@ -6594,7 +6922,7 @@ function Time(props) {
 }
 Time.displayName = "Datepicker.Time";
 function Value({ className, size: sizeProp, tone = "muted", ...rest }) {
-  const inheritedSize = React44.useContext(DatepickerSizeContext);
+  const inheritedSize = React45.useContext(DatepickerSizeContext);
   const size = sizeProp ?? inheritedSize ?? "m";
   return /* @__PURE__ */ jsx32(
     Typography.Root,
@@ -6616,7 +6944,7 @@ var Datepicker = {
 };
 
 // src/components/digit-input/DigitInput.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 
 // src/components/digit-input/DigitInput.module.css
 var DigitInput_default = {
@@ -6652,7 +6980,7 @@ function DigitInputRoot({
   className
 }) {
   const length = lengthProp;
-  const slotKeysRef = React45.useRef(null);
+  const slotKeysRef = React46.useRef(null);
   if (!slotKeysRef.current || slotKeysRef.current.length !== length) {
     slotKeysRef.current = createSlotKeys(length);
   }
@@ -6663,11 +6991,11 @@ function DigitInputRoot({
     defaultValue: defaultNormalized,
     onChange
   });
-  const prevLenRef = React45.useRef(0);
-  React45.useEffect(() => {
+  const prevLenRef = React46.useRef(0);
+  React46.useEffect(() => {
     prevLenRef.current = normalizeDigits(value, length).length;
   }, [length, value]);
-  const commit = React45.useCallback(
+  const commit = React46.useCallback(
     (nextRaw) => {
       const next = normalizeDigits(nextRaw, length);
       const prevLen = prevLenRef.current;
@@ -6680,11 +7008,11 @@ function DigitInputRoot({
     [length, onComplete, setValue]
   );
   const cells = toCells(value, length);
-  const inputRefs = React45.useRef([]);
-  const setInputRef = React45.useCallback((el, index) => {
+  const inputRefs = React46.useRef([]);
+  const setInputRef = React46.useCallback((el, index) => {
     inputRefs.current[index] = el;
   }, []);
-  const focusAt = React45.useCallback((index) => {
+  const focusAt = React46.useCallback((index) => {
     const el = inputRefs.current[index];
     if (el) {
       queueMicrotask(() => el.focus());
@@ -6772,7 +7100,7 @@ DigitInputRoot.displayName = "DigitInputRoot";
 var DigitInput = { Root: DigitInputRoot };
 
 // src/components/drawer/Drawer.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 
 // src/components/drawer/Drawer.module.css
 var Drawer_default = {
@@ -6810,9 +7138,9 @@ function Drawer({
   className,
   overlayClassName
 }) {
-  const [isMounted, setIsMounted] = React46.useState(open);
-  const [isClosing, setIsClosing] = React46.useState(false);
-  React46.useEffect(() => {
+  const [isMounted, setIsMounted] = React47.useState(open);
+  const [isClosing, setIsClosing] = React47.useState(false);
+  React47.useEffect(() => {
     if (open) {
       setIsMounted(true);
       setIsClosing(false);
@@ -6835,7 +7163,7 @@ function Drawer({
   const trapRef = useFocusTrap({ enabled: open });
   useScrollLock(open);
   useEscapeKey({ enabled: open, onEscape: () => onOpenChange(false) });
-  React46.useEffect(() => {
+  React47.useEffect(() => {
     if (!open) return;
     const container = trapRef.current;
     if (!container) return;
@@ -6864,7 +7192,7 @@ function Drawer({
       }
     };
   }, [open, trapRef]);
-  const generatedId = React46.useId();
+  const generatedId = React47.useId();
   const titleId = `${generatedId}-title`;
   const descriptionId = `${generatedId}-description`;
   const hasDescription = description != null && description !== "";
@@ -6931,7 +7259,7 @@ function Drawer({
 }
 
 // src/components/dropdown/Dropdown.tsx
-import * as React48 from "react";
+import * as React49 from "react";
 
 // src/components/dropdown/Dropdown.module.css
 var Dropdown_default = {
@@ -6992,22 +7320,7 @@ function handleMenuNavigationKeyDown(e, container) {
 }
 
 // src/components/dropdown/useDropdownPosition.ts
-import * as React47 from "react";
-
-// src/internal/scrollAncestors.ts
-var SCROLLABLE = /^(auto|scroll|overlay)$/;
-function getScrollContainers(node) {
-  const out = [window];
-  if (!node || typeof window === "undefined") return out;
-  for (let el = node.parentElement; el; el = el.parentElement) {
-    const { overflowX, overflowY } = window.getComputedStyle(el);
-    if (SCROLLABLE.test(overflowY) || SCROLLABLE.test(overflowX)) {
-      out.push(el);
-    }
-  }
-  if (window.visualViewport) out.push(window.visualViewport);
-  return out;
-}
+import * as React48 from "react";
 
 // src/components/dropdown/dropdownGeometry.ts
 var DROPDOWN_MIN_MAX_HEIGHT = 120;
@@ -7034,8 +7347,8 @@ function useDropdownPosition({
   align,
   sameMinWidthAsTrigger
 }) {
-  const [layout, setLayout] = React47.useState(null);
-  const commit = React47.useCallback(() => {
+  const [layout, setLayout] = React48.useState(null);
+  const commit = React48.useCallback(() => {
     const trigger = triggerRef.current;
     const panel = contentRef.current;
     if (!trigger || !panel) return;
@@ -7070,7 +7383,7 @@ function useDropdownPosition({
     };
     setLayout((prev) => prev && layoutEqual(prev, next) ? prev : next);
   }, [triggerRef, contentRef, side, align, sameMinWidthAsTrigger]);
-  React47.useLayoutEffect(() => {
+  React48.useLayoutEffect(() => {
     if (!open) {
       setLayout(null);
       return;
@@ -7108,9 +7421,9 @@ function useDropdownPosition({
 
 // src/components/dropdown/Dropdown.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
-var DropdownContentSizeContext = React48.createContext("m");
+var DropdownContentSizeContext = React49.createContext("m");
 function useDropdownContentSize() {
-  return React48.useContext(DropdownContentSizeContext);
+  return React49.useContext(DropdownContentSizeContext);
 }
 function dropdownItemIconPx(menuSize) {
   return remToPx(primitiveTokens.icon[menuSize]);
@@ -7122,13 +7435,13 @@ function DropdownRoot({ open, defaultOpen = false, onOpenChange, children }) {
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const id = React48.useId();
+  const id = React49.useId();
   const triggerId = `${id}-trigger`;
   const menuId = `${id}-menu`;
-  const triggerRef = React48.useRef(null);
-  const onClose = React48.useCallback(() => setIsOpen(false), [setIsOpen]);
-  const onToggle = React48.useCallback(() => setIsOpen((v) => !v), [setIsOpen]);
-  const value = React48.useMemo(
+  const triggerRef = React49.useRef(null);
+  const onClose = React49.useCallback(() => setIsOpen(false), [setIsOpen]);
+  const onToggle = React49.useCallback(() => setIsOpen((v) => !v), [setIsOpen]);
+  const value = React49.useMemo(
     () => ({ isOpen, onClose, onToggle, triggerId, menuId, triggerRef }),
     [isOpen, onClose, onToggle, triggerId, menuId]
   );
@@ -7138,9 +7451,9 @@ DropdownRoot.displayName = "DropdownRoot";
 function DropdownTrigger({ children, asChild: _asChild = true }) {
   void _asChild;
   const { isOpen, onToggle, triggerId, menuId, triggerRef } = useDropdownContext();
-  const toggleRef = React48.useRef(onToggle);
+  const toggleRef = React49.useRef(onToggle);
   toggleRef.current = onToggle;
-  const setNode = React48.useCallback(
+  const setNode = React49.useCallback(
     (el) => {
       triggerRef.current = el;
     },
@@ -7148,9 +7461,9 @@ function DropdownTrigger({ children, asChild: _asChild = true }) {
   );
   const child = children;
   const childRef = child.props.ref ?? child.ref;
-  const mergedRef = React48.useMemo(() => mergeRefs(childRef, setNode), [childRef, setNode]);
+  const mergedRef = React49.useMemo(() => mergeRefs(childRef, setNode), [childRef, setNode]);
   const userClick = child.props?.onClick;
-  return React48.cloneElement(child, {
+  return React49.cloneElement(child, {
     ref: mergedRef,
     id: triggerId,
     "aria-expanded": isOpen,
@@ -7173,7 +7486,7 @@ function DropdownContent({
 }) {
   const { isOpen, onClose, triggerRef, menuId, triggerId } = useDropdownContext();
   const overlayPortalLayer = useOverlayPortalLayer();
-  const contentRef = React48.useRef(null);
+  const contentRef = React49.useRef(null);
   const layout = useDropdownPosition({
     open: isOpen,
     triggerRef,
@@ -7183,7 +7496,7 @@ function DropdownContent({
     sameMinWidthAsTrigger
   });
   const trapRef = useFocusTrap({ enabled: isOpen, restoreFocus: true });
-  const ref = React48.useMemo(() => mergeRefs(contentRef, trapRef), [trapRef]);
+  const ref = React49.useMemo(() => mergeRefs(contentRef, trapRef), [trapRef]);
   useEscapeKey({ enabled: isOpen, onEscape: onClose });
   useOutsideClick({
     refs: [triggerRef, contentRef],
@@ -7240,7 +7553,7 @@ function DropdownItem({ onSelect, disabled, destructive, children, className })
   );
 }
 DropdownItem.displayName = "DropdownItem";
-var DropdownItemIcon = React48.forwardRef(
+var DropdownItemIcon = React49.forwardRef(
   ({ as: As = "span", className, children, "aria-hidden": ariaHidden, ...rest }, ref) => {
     const menuSize = useDropdownContentSize();
     const { size: explicitSize, ...iconRest } = rest;
@@ -7349,7 +7662,7 @@ var Dropdown = {
 };
 
 // src/components/empty-page/EmptyPage.tsx
-import * as React49 from "react";
+import * as React50 from "react";
 
 // src/components/empty-page/EmptyPage.module.css
 var EmptyPage_default = {
@@ -7362,7 +7675,7 @@ var EmptyPage_default = {
 
 // 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) {
+var EmptyPageRoot = React50.forwardRef(function EmptyPageRoot2({ size = "m", layout = "default", className, children, ...rest }, forwardedRef) {
   return /* @__PURE__ */ jsx36(
     "div",
     {
@@ -7382,13 +7695,13 @@ 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(
+var EmptyPageTitle = React50.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(
+var EmptyPageDescription = React50.forwardRef(
   function EmptyPageDescription2({ className, children, ...rest }, forwardedRef) {
     return /* @__PURE__ */ jsx36("p", { ref: forwardedRef, className: cx(EmptyPage_default.description, className), ...rest, children });
   }
@@ -7408,10 +7721,10 @@ var EmptyPage = {
 
 // src/components/example-frame/ExampleFrame.tsx
 import { Code2, Eye as Eye2, Monitor, Smartphone, Tablet } from "lucide-react";
-import * as React51 from "react";
+import * as React52 from "react";
 
 // src/components/segmented-control/SegmentedControl.tsx
-import * as React50 from "react";
+import * as React51 from "react";
 
 // src/components/segmented-control/SegmentedControl.module.css
 var SegmentedControl_default = {
@@ -7450,23 +7763,23 @@ function SegmentedControlRoot({
     defaultValue,
     onChange: onValueChange
   });
-  const [indicator, setIndicator] = React50.useState({
+  const [indicator, setIndicator] = React51.useState({
     left: 0,
     top: 0,
     width: 0,
     height: 0
   });
-  const [animate2, setAnimate] = React50.useState(false);
-  const containerRef = React50.useRef(null);
-  const indicatorRef = React50.useRef(null);
-  const onSelect = React50.useCallback(
+  const [animate2, setAnimate] = React51.useState(false);
+  const containerRef = React51.useRef(null);
+  const indicatorRef = React51.useRef(null);
+  const onSelect = React51.useCallback(
     (nextValue) => {
       setAnimate(true);
       setSelectedValue(nextValue);
     },
     [setSelectedValue]
   );
-  React50.useLayoutEffect(() => {
+  React51.useLayoutEffect(() => {
     const root = containerRef.current;
     if (!root) return;
     const update = () => {
@@ -7503,12 +7816,12 @@ function SegmentedControlRoot({
       ro?.disconnect();
     };
   }, []);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     if (!animate2) return;
     const id = window.setTimeout(() => setAnimate(false), 320);
     return () => window.clearTimeout(id);
   }, [animate2]);
-  React50.useLayoutEffect(() => {
+  React51.useLayoutEffect(() => {
     const indicatorEl = indicatorRef.current;
     if (!indicatorEl) return;
     indicatorEl.style.transform = `translate3d(${indicator.left}px, ${indicator.top}px, 0)`;
@@ -7634,14 +7947,14 @@ function ExampleFrameRoot({
   previewLayout = "default",
   themePreset
 }) {
-  const [pane, setPane] = React51.useState("preview");
-  const [uncontrolledViewport, setUncontrolledViewport] = React51.useState(defaultViewport);
-  const [uncontrolledScheme, setUncontrolledScheme] = React51.useState(defaultColorScheme);
+  const [pane, setPane] = React52.useState("preview");
+  const [uncontrolledViewport, setUncontrolledViewport] = React52.useState(defaultViewport);
+  const [uncontrolledScheme, setUncontrolledScheme] = React52.useState(defaultColorScheme);
   const isSchemeControlled = colorSchemeProp !== void 0;
   const colorScheme = isSchemeControlled ? colorSchemeProp : uncontrolledScheme;
   const isViewportControlled = viewportProp !== void 0;
   const viewport = isViewportControlled ? viewportProp : uncontrolledViewport;
-  const setColorScheme = React51.useCallback(
+  const setColorScheme = React52.useCallback(
     (next) => {
       if (!isSchemeControlled) {
         setUncontrolledScheme(next);
@@ -7650,7 +7963,7 @@ function ExampleFrameRoot({
     },
     [isSchemeControlled, onColorSchemeChange]
   );
-  const setViewport = React51.useCallback(
+  const setViewport = React52.useCallback(
     (next) => {
       if (!isViewportControlled) {
         setUncontrolledViewport(next);
@@ -7659,7 +7972,7 @@ function ExampleFrameRoot({
     },
     [isViewportControlled, onViewportChange]
   );
-  const ctxValue = React51.useMemo(
+  const ctxValue = React52.useMemo(
     () => ({
       code,
       language,
@@ -7685,8 +7998,8 @@ function ExampleFrameRoot({
     ]
   );
   let previewChildren = null;
-  React51.Children.forEach(children, (child) => {
-    if (React51.isValidElement(child) && child.type === ExampleFrameStage) {
+  React52.Children.forEach(children, (child) => {
+    if (React52.isValidElement(child) && child.type === ExampleFrameStage) {
       previewChildren = child.props.children ?? null;
     }
   });
@@ -7710,8 +8023,8 @@ function ExampleFrameRoot({
 ExampleFrameRoot.displayName = "ExampleFrame.Root";
 function ExampleFrameToolbar() {
   const ctx = useExampleFrameContext();
-  const [copyState, setCopyState] = React51.useState("idle");
-  const handleCopy = React51.useCallback(async () => {
+  const [copyState, setCopyState] = React52.useState("idle");
+  const handleCopy = React52.useCallback(async () => {
     try {
       await navigator.clipboard.writeText(ctx.code);
       setCopyState("copied");
@@ -7817,10 +8130,10 @@ var ExampleFrame = {
 };
 
 // src/components/file-upload/FileUpload.tsx
-import * as React53 from "react";
+import * as React54 from "react";
 
 // src/components/progress-bar/ProgressBar.tsx
-import * as React52 from "react";
+import * as React53 from "react";
 
 // src/components/progress-bar/ProgressBar.module.css
 var ProgressBar_default = {
@@ -7834,11 +8147,11 @@ 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 = React52.forwardRef(
+var ProgressBarRoot = React53.forwardRef(
   ({ value, max = 100, label, size = "m", className }, ref) => {
     const safeMax = max > 0 ? max : 100;
     const safeValue = clampProgress(value, safeMax);
-    const labelId = React52.useId();
+    const labelId = React53.useId();
     return /* @__PURE__ */ jsxs19("div", { className: cx(ProgressBar_default.root, className), ...toDataAttributes({ size }), children: [
       label ? /* @__PURE__ */ jsx39("span", { className: ProgressBar_default.label, id: labelId, children: label }) : null,
       /* @__PURE__ */ jsx39(
@@ -7911,7 +8224,7 @@ function FileUploadBrowseLabel({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx40("span", { className: cx(FileUpload_default.browse, className), ...rest, children });
 }
 FileUploadBrowseLabel.displayName = "FileUpload.BrowseLabel";
-var FileUploadBrowseLink = React53.forwardRef(
+var FileUploadBrowseLink = React54.forwardRef(
   ({ className, type = "button", onClick, ...rest }, ref) => /* @__PURE__ */ jsx40(
     "button",
     {
@@ -7936,7 +8249,7 @@ function FileUploadActionsRow({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.actionsRow, className), ...rest, children });
 }
 FileUploadActionsRow.displayName = "FileUpload.ActionsRow";
-var FileUploadChip = React53.forwardRef(
+var FileUploadChip = React54.forwardRef(
   ({ className, type = "button", onClick, ...rest }, ref) => /* @__PURE__ */ jsx40(
     "button",
     {
@@ -8002,7 +8315,7 @@ function FileUploadItemTextGroup({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx40("div", { className: cx(FileUpload_default.itemTextGroup, className), ...rest, children });
 }
 FileUploadItemTextGroup.displayName = "FileUpload.ItemTextGroup";
-var FileUploadItemTryAgain = React53.forwardRef(
+var FileUploadItemTryAgain = React54.forwardRef(
   ({ className, type = "button", ...rest }, ref) => /* @__PURE__ */ jsx40("button", { ref, type, className: cx(FileUpload_default.itemTryAgain, className), ...rest })
 );
 FileUploadItemTryAgain.displayName = "FileUpload.ItemTryAgain";
@@ -8030,7 +8343,7 @@ function FileUploadItemProgress({ value, max, className, children }) {
   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 = React53.forwardRef(
+var FileUploadRoot = React54.forwardRef(
   ({
     size = "m",
     appearance = "dashed",
@@ -8043,7 +8356,7 @@ var FileUploadRoot = React53.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const [isDragOver, setIsDragOver] = React53.useState(false);
+    const [isDragOver, setIsDragOver] = React54.useState(false);
     const mergeInputRef = useMergedRefs(inputRefProp);
     const handleChange = (e) => {
       const list = e.target.files;
@@ -8139,7 +8452,7 @@ var FileUpload = {
 };
 
 // src/components/kbd/Kbd.tsx
-import * as React54 from "react";
+import * as React55 from "react";
 
 // src/components/kbd/Kbd.module.css
 var Kbd_default = {
@@ -8148,7 +8461,7 @@ var Kbd_default = {
 
 // src/components/kbd/Kbd.tsx
 import { jsx as jsx41 } from "react/jsx-runtime";
-var KbdRoot = React54.forwardRef(
+var KbdRoot = React55.forwardRef(
   ({ children, className, size: sizeProp, ...rest }, ref) => {
     const controlSurface = useOptionalControlSize();
     const size = sizeProp ?? (controlSurface !== void 0 ? controlSurfaceToInputSize(controlSurface) : "m");
@@ -8169,7 +8482,7 @@ var Kbd = { Root: KbdRoot };
 
 // src/components/notification/Notification.tsx
 import { AlertTriangle, CheckCircle2, Info, X as X3, XCircle } from "lucide-react";
-import * as React55 from "react";
+import * as React56 from "react";
 
 // src/components/notification/Notification.module.css
 var Notification_default = {
@@ -8200,14 +8513,14 @@ var Notification_default = {
 // src/components/notification/Notification.tsx
 import { jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
 function useCountdown(item, paused, 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);
+  const [progress, setProgress] = React56.useState(1);
+  const remainingRef = React56.useRef(item.duration);
+  const lastTsRef = React56.useRef(null);
+  const pausedRef = React56.useRef(paused);
+  const onExpireRef = React56.useRef(onExpire);
   pausedRef.current = paused;
   onExpireRef.current = onExpire;
-  React55.useEffect(() => {
+  React56.useEffect(() => {
     if (item.persistent || item.duration <= 0) return;
     remainingRef.current = item.duration;
     lastTsRef.current = null;
@@ -8309,7 +8622,7 @@ function NotificationCard({
 
 // src/components/notification/NotificationStore.tsx
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
-import * as React56 from "react";
+import * as React57 from "react";
 import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
 var DEFAULT_DURATION = 5e3;
 var PEEK_VISIBLE = 3;
@@ -8337,7 +8650,7 @@ var POSITIONS = [
   "bottom-right"
 ];
 var TYPES = ["success", "error", "warning", "info"];
-var StoreContext = React56.createContext(null);
+var StoreContext = React57.createContext(null);
 function newId() {
   return globalThis.crypto?.randomUUID?.() ?? `ntf-${Date.now()}-${Math.random().toString(16).slice(2)}`;
 }
@@ -8349,10 +8662,10 @@ function NotificationStack({
   items,
   onDismiss
 }) {
-  const [expanded, setExpanded] = React56.useState(false);
-  const collapseTimerRef = React56.useRef(null);
+  const [expanded, setExpanded] = React57.useState(false);
+  const collapseTimerRef = React57.useRef(null);
   const top = isTop(position);
-  const handleHover = React56.useCallback((hovered) => {
+  const handleHover = React57.useCallback((hovered) => {
     if (collapseTimerRef.current !== null) {
       clearTimeout(collapseTimerRef.current);
       collapseTimerRef.current = null;
@@ -8363,7 +8676,7 @@ function NotificationStack({
       collapseTimerRef.current = window.setTimeout(() => setExpanded(false), 100);
     }
   }, []);
-  React56.useEffect(
+  React57.useEffect(
     () => () => {
       if (collapseTimerRef.current !== null) clearTimeout(collapseTimerRef.current);
     },
@@ -8397,7 +8710,7 @@ function NotificationStack({
     }
   );
 }
-var NotificationStackItem = React56.memo(function NotificationStackItem2({
+var NotificationStackItem = React57.memo(function NotificationStackItem2({
   item,
   index,
   expanded,
@@ -8465,7 +8778,7 @@ function NotificationToaster({
   entries,
   onDismiss
 }) {
-  const grouped = React56.useMemo(() => {
+  const grouped = React57.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const entry of entries) {
       if (!map.has(entry.position)) map.set(entry.position, /* @__PURE__ */ new Map());
@@ -8511,18 +8824,18 @@ function NotificationProvider({
   position = "top-right",
   max = 5
 }) {
-  const [entries, setEntries] = React56.useState([]);
-  const dismiss = React56.useCallback((id) => {
+  const [entries, setEntries] = React57.useState([]);
+  const dismiss = React57.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 = React56.useCallback(() => {
+  const dismissAll = React57.useCallback(() => {
     setEntries((prev) => prev.map((n) => ({ ...n, dismissing: true })));
     window.setTimeout(() => setEntries([]), DISMISS_CLEANUP_MS);
   }, []);
-  const notify = React56.useCallback(
+  const notify = React57.useCallback(
     (options) => {
       const id = newId();
       const record = {
@@ -8548,8 +8861,8 @@ function NotificationProvider({
     },
     [position, max]
   );
-  const publicItems = React56.useMemo(() => entries.filter((n) => !n.dismissing), [entries]);
-  const value = React56.useMemo(
+  const publicItems = React57.useMemo(() => entries.filter((n) => !n.dismissing), [entries]);
+  const value = React57.useMemo(
     () => ({ items: publicItems, notify, dismiss, dismissAll }),
     [publicItems, notify, dismiss, dismissAll]
   );
@@ -8559,18 +8872,18 @@ function NotificationProvider({
   ] });
 }
 function useNotifications() {
-  const ctx = React56.useContext(StoreContext);
+  const ctx = React57.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 = React56.useContext(StoreContext);
+  const ctx = React57.useContext(StoreContext);
   if (!ctx) throw new Error("useNotificationStore must be used within NotificationProvider");
   return ctx;
 }
 
 // src/components/page-content/PageContent.tsx
-import * as React57 from "react";
+import * as React58 from "react";
 
 // src/components/page-content/PageContent.module.css
 var PageContent_default = {
@@ -8584,7 +8897,7 @@ var PageContent_default = {
 
 // src/components/page-content/PageContent.tsx
 import { jsx as jsx44 } from "react/jsx-runtime";
-var PageContentRoot = React57.forwardRef(
+var PageContentRoot = React58.forwardRef(
   function PageContentRoot2({ maxWidth = "full", className, children, ...rest }, forwardedRef) {
     return /* @__PURE__ */ jsx44(
       "div",
@@ -8601,7 +8914,7 @@ var PageContentRoot = React57.forwardRef(
   }
 );
 PageContentRoot.displayName = "PageContent.Root";
-var PageContentSection = React57.forwardRef(
+var PageContentSection = React58.forwardRef(
   function PageContentSection2({ className, children, ...rest }, forwardedRef) {
     return /* @__PURE__ */ jsx44("section", { ref: forwardedRef, className: cx(PageContent_default.section, className), ...rest, children });
   }
@@ -8611,13 +8924,13 @@ function PageContentHeader({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx44("div", { className: cx(PageContent_default.header, className), ...rest, children });
 }
 PageContentHeader.displayName = "PageContent.Header";
-var PageContentTitle = React57.forwardRef(
+var PageContentTitle = React58.forwardRef(
   function PageContentTitle2({ className, children, ...rest }, forwardedRef) {
     return /* @__PURE__ */ jsx44("h1", { ref: forwardedRef, className: cx(PageContent_default.title, className), ...rest, children });
   }
 );
 PageContentTitle.displayName = "PageContent.Title";
-var PageContentDescription = React57.forwardRef(
+var PageContentDescription = React58.forwardRef(
   function PageContentDescription2({ className, children, measure = "readable", ...rest }, forwardedRef) {
     return /* @__PURE__ */ jsx44(
       "p",
@@ -8648,7 +8961,7 @@ var PageContent = {
 };
 
 // src/components/popover/Popover.tsx
-import * as React59 from "react";
+import * as React60 from "react";
 
 // src/components/popover/Popover.module.css
 var Popover_default = {
@@ -8658,7 +8971,7 @@ var Popover_default = {
 };
 
 // src/components/popover/usePopoverPosition.ts
-import * as React58 from "react";
+import * as React59 from "react";
 
 // src/components/popover/popoverGeometry.ts
 var POPOVER_MIN_MAX_HEIGHT = 120;
@@ -8685,8 +8998,8 @@ function usePopoverPosition({
   align,
   sameMinWidthAsTrigger
 }) {
-  const [layout, setLayout] = React58.useState(null);
-  const commit = React58.useCallback(() => {
+  const [layout, setLayout] = React59.useState(null);
+  const commit = React59.useCallback(() => {
     const trigger = triggerRef.current;
     const panel = contentRef.current;
     if (!trigger || !panel) return;
@@ -8723,7 +9036,7 @@ function usePopoverPosition({
     };
     setLayout((prev) => prev && layoutEqual2(prev, next) ? prev : next);
   }, [triggerRef, contentRef, side, align, sameMinWidthAsTrigger]);
-  React58.useLayoutEffect(() => {
+  React59.useLayoutEffect(() => {
     if (!open) {
       setLayout(null);
       return;
@@ -8768,13 +9081,13 @@ function PopoverRoot({ open, defaultOpen = false, onOpenChange, children }) {
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const id = React59.useId();
+  const id = React60.useId();
   const triggerId = `${id}-trigger`;
   const contentId = `${id}-content`;
-  const triggerRef = React59.useRef(null);
-  const onClose = React59.useCallback(() => setIsOpen(false), [setIsOpen]);
-  const onToggle = React59.useCallback(() => setIsOpen((v) => !v), [setIsOpen]);
-  const value = React59.useMemo(
+  const triggerRef = React60.useRef(null);
+  const onClose = React60.useCallback(() => setIsOpen(false), [setIsOpen]);
+  const onToggle = React60.useCallback(() => setIsOpen((v) => !v), [setIsOpen]);
+  const value = React60.useMemo(
     () => ({ isOpen, onClose, onToggle, triggerId, contentId, triggerRef }),
     [isOpen, onClose, onToggle, triggerId, contentId]
   );
@@ -8784,9 +9097,9 @@ PopoverRoot.displayName = "PopoverRoot";
 function PopoverTrigger({ children, asChild: _asChild = true }) {
   void _asChild;
   const { isOpen, onToggle, triggerId, contentId, triggerRef } = usePopoverContext();
-  const toggleRef = React59.useRef(onToggle);
+  const toggleRef = React60.useRef(onToggle);
   toggleRef.current = onToggle;
-  const setNode = React59.useCallback(
+  const setNode = React60.useCallback(
     (el) => {
       triggerRef.current = el;
     },
@@ -8794,9 +9107,9 @@ function PopoverTrigger({ children, asChild: _asChild = true }) {
   );
   const child = children;
   const childRef = child.props.ref ?? child.ref;
-  const mergedRef = React59.useMemo(() => mergeRefs(childRef, setNode), [childRef, setNode]);
+  const mergedRef = React60.useMemo(() => mergeRefs(childRef, setNode), [childRef, setNode]);
   const userClick = child.props?.onClick;
-  return React59.cloneElement(child, {
+  return React60.cloneElement(child, {
     ref: mergedRef,
     id: triggerId,
     "aria-expanded": isOpen,
@@ -8822,7 +9135,7 @@ function PopoverContent({
 }) {
   const { isOpen, onClose, triggerRef, contentId, triggerId } = usePopoverContext();
   const overlayPortalLayer = useOverlayPortalLayer();
-  const contentRef = React59.useRef(null);
+  const contentRef = React60.useRef(null);
   const layout = usePopoverPosition({
     open: isOpen,
     triggerRef,
@@ -8835,7 +9148,7 @@ function PopoverContent({
     enabled: isOpen && trapFocus,
     restoreFocus: true
   });
-  const ref = React59.useMemo(() => mergeRefs(contentRef, trapRef), [trapRef]);
+  const ref = React60.useMemo(() => mergeRefs(contentRef, trapRef), [trapRef]);
   useEscapeKey({ enabled: isOpen, onEscape: onClose });
   useOutsideClick({
     refs: [triggerRef, contentRef],
@@ -8872,7 +9185,7 @@ var Popover = {
 };
 
 // src/components/progress-circle/ProgressCircle.tsx
-import * as React60 from "react";
+import * as React61 from "react";
 
 // src/components/progress-circle/ProgressCircle.module.css
 var ProgressCircle_default = {
@@ -8888,7 +9201,7 @@ var pc = primitiveTokens.progressCircle;
 function clampProgress2(value, max) {
   return Math.min(max, Math.max(value, 0));
 }
-var ProgressCircleRoot = React60.forwardRef(
+var ProgressCircleRoot = React61.forwardRef(
   ({ value, max = 100, size = "m", label, children, className }, ref) => {
     const safeMax = max > 0 ? max : 100;
     const safeValue = clampProgress2(value, safeMax);
@@ -8960,7 +9273,7 @@ ProgressCircleRoot.displayName = "ProgressCircleRoot";
 var ProgressCircle = { Root: ProgressCircleRoot };
 
 // src/components/radio/Radio.tsx
-import * as React61 from "react";
+import * as React62 from "react";
 
 // src/components/radio/Radio.module.css
 var Radio_default = {
@@ -8978,7 +9291,7 @@ var Radio_default = {
 // src/components/radio/Radio.tsx
 import { jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
 var [RadioProvider, useRadioContext] = createComponentContext("Radio");
-var RadioRoot = React61.forwardRef(
+var RadioRoot = React62.forwardRef(
   ({
     id,
     variant = "default",
@@ -8989,14 +9302,14 @@ var RadioRoot = React61.forwardRef(
     children,
     ...inputRest
   }, ref) => {
-    const rawId = React61.useId();
+    const rawId = React62.useId();
     const inputId = id ?? rawId;
     const hintId = `${inputId}-hint`;
     const errorId = `${inputId}-error`;
-    const [hasHint, setHasHint] = React61.useState(false);
-    const [hasError, setHasError] = React61.useState(false);
+    const [hasHint, setHasHint] = React62.useState(false);
+    const [hasError, setHasError] = React62.useState(false);
     const invalid = variant === "error" || hasError;
-    const restInputPropsRef = React61.useRef(inputRest);
+    const restInputPropsRef = React62.useRef(inputRest);
     restInputPropsRef.current = inputRest;
     const parts = [
       ariaDescribedBy,
@@ -9004,11 +9317,11 @@ var RadioRoot = React61.forwardRef(
       hasError ? errorId : void 0
     ].filter(Boolean);
     const describedBy = parts.length > 0 ? parts.join(" ") : void 0;
-    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(
+    const registerHint = React62.useCallback(() => setHasHint(true), []);
+    const unregisterHint = React62.useCallback(() => setHasHint(false), []);
+    const registerError = React62.useCallback(() => setHasError(true), []);
+    const unregisterError = React62.useCallback(() => setHasError(false), []);
+    const ctxValue = React62.useMemo(
       () => ({
         inputId,
         hintId,
@@ -9055,9 +9368,9 @@ var RadioRoot = React61.forwardRef(
   }
 );
 RadioRoot.displayName = "RadioRoot";
-var RadioLabel = React61.forwardRef(function RadioLabel2({ children, className, ...rest }, ref) {
+var RadioLabel = React62.forwardRef(function RadioLabel2({ children, className, ...rest }, ref) {
   const { inputId, inputRef, invalid, disabled, describedBy, restInputPropsRef, size } = useRadioContext();
-  const filterId = React61.useId();
+  const filterId = React62.useId();
   const svgFilterId = `es-radio-${filterId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxs24(
     Label.Root,
@@ -9106,7 +9419,7 @@ var RadioLabel = React61.forwardRef(function RadioLabel2({ children, className,
 RadioLabel.displayName = "RadioLabel";
 function RadioHint({ children, className, ...rest }) {
   const { hintId, registerHint, unregisterHint, size, disabled } = useRadioContext();
-  React61.useLayoutEffect(() => {
+  React62.useLayoutEffect(() => {
     registerHint();
     return () => {
       unregisterHint();
@@ -9127,7 +9440,7 @@ function RadioHint({ children, className, ...rest }) {
 RadioHint.displayName = "RadioHint";
 function RadioError({ children, className, ...rest }) {
   const { errorId, registerError, unregisterError, size } = useRadioContext();
-  React61.useLayoutEffect(() => {
+  React62.useLayoutEffect(() => {
     registerError();
     return () => {
       unregisterError();
@@ -9154,7 +9467,7 @@ var Radio = {
 };
 
 // src/components/segmented-progress-bar/SegmentedProgressBar.tsx
-import * as React62 from "react";
+import * as React63 from "react";
 
 // src/components/segmented-progress-bar/SegmentedProgressBar.module.css
 var SegmentedProgressBar_default = {
@@ -9183,15 +9496,15 @@ function buildDistributionDescription(segments, total) {
   });
   return parts.join(", ");
 }
-var SegmentedProgressBarRoot = React62.forwardRef(
+var SegmentedProgressBarRoot = React63.forwardRef(
   ({ segments, label, size = "m", segmentGap = "none", className }, ref) => {
-    const labelId = React62.useId();
-    const descriptionId = React62.useId();
-    const safe = React62.useMemo(
+    const labelId = React63.useId();
+    const descriptionId = React63.useId();
+    const safe = React63.useMemo(
       () => segments.map((s) => ({ ...s, value: clampNonNegative(s.value) })),
       [segments]
     );
-    const total = React62.useMemo(() => safe.reduce((acc, s) => acc + s.value, 0), [safe]);
+    const total = React63.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(
@@ -9223,7 +9536,7 @@ SegmentedProgressBarRoot.displayName = "SegmentedProgressBarRoot";
 var SegmentedProgressBar = { Root: SegmentedProgressBarRoot };
 
 // src/components/slider/Slider.tsx
-import * as React63 from "react";
+import * as React64 from "react";
 
 // src/components/slider/Slider.module.css
 var Slider_default = {
@@ -9259,7 +9572,7 @@ function SliderRoot({
     defaultValue: clamp2(initialDefault, min, max),
     onChange
   });
-  const id = React63.useId();
+  const id = React64.useId();
   const safeValue = clamp2(value, min, max);
   const applyValueFromInput = (el) => {
     const next = Number.parseFloat(el.value);
@@ -9298,7 +9611,7 @@ SliderRoot.displayName = "SliderRoot";
 var Slider2 = { Root: SliderRoot };
 
 // src/components/stepper/HorizontalStepper.tsx
-import * as React64 from "react";
+import * as React65 from "react";
 
 // src/components/stepper/StepperAlign.module.css
 var StepperAlign_default = {
@@ -9358,7 +9671,7 @@ function HorizontalStepperSeparatorIcon({
   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 = React64.forwardRef(
+var HorizontalStepperItem = React65.forwardRef(
   function HorizontalStepperItem2({ state = "default", className, type = "button", children, ...rest }, ref) {
     return /* @__PURE__ */ jsx51(StepperAlignItemProvider, { value: { state }, children: /* @__PURE__ */ jsx51(
       "button",
@@ -9396,7 +9709,7 @@ var HorizontalStepper = {
 };
 
 // src/components/stepper/Stepper.tsx
-import * as React66 from "react";
+import * as React67 from "react";
 
 // src/components/stepper/Stepper.module.css
 var Stepper_default = {
@@ -9409,7 +9722,7 @@ var Stepper_default = {
 };
 
 // src/components/stepper/VerticalStepper.tsx
-import * as React65 from "react";
+import * as React66 from "react";
 import { jsx as jsx52 } from "react/jsx-runtime";
 function VerticalStepperRoot({
   className,
@@ -9429,7 +9742,7 @@ function VerticalStepperArrow({
   return /* @__PURE__ */ jsx52(Component, { className: cx(StepperAlign_default.vArrow, className), strokeWidth: 2, ...rest });
 }
 VerticalStepperArrow.displayName = "VerticalStepper.Arrow";
-var VerticalStepperItem = React65.forwardRef(
+var VerticalStepperItem = React66.forwardRef(
   function VerticalStepperItem2({ state = "default", className, type = "button", children, ...rest }, ref) {
     return /* @__PURE__ */ jsx52(StepperAlignItemProvider, { value: { state }, children: /* @__PURE__ */ jsx52(
       "button",
@@ -9487,14 +9800,14 @@ function StepperRoot({
   children,
   className
 }) {
-  const indexRef = React66.useRef(0);
+  const indexRef = React67.useRef(0);
   indexRef.current = 0;
-  const getNextStepIndex = React66.useCallback(() => {
+  const getNextStepIndex = React67.useCallback(() => {
     const idx = indexRef.current;
     indexRef.current += 1;
     return idx;
   }, []);
-  const value = React66.useMemo(
+  const value = React67.useMemo(
     () => ({ orientation, currentStep, getNextStepIndex }),
     [orientation, currentStep, getNextStepIndex]
   );
@@ -9546,7 +9859,7 @@ function StepperContent({ title, description, className }) {
   ] });
 }
 StepperContent.displayName = "Stepper.Content";
-var StepperStep = React66.forwardRef(function StepperStep2({ index: indexProp, status: statusProp, children, className, disabled, type = "button", ...rest }, ref) {
+var StepperStep = React67.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);
@@ -9580,7 +9893,7 @@ var Stepper = {
 };
 
 // src/components/switch/Switch.tsx
-import * as React67 from "react";
+import * as React68 from "react";
 
 // src/components/switch/Switch.module.css
 var Switch_default = {
@@ -9596,7 +9909,7 @@ var Switch_default = {
 // src/components/switch/Switch.tsx
 import { jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
 var [SwitchProvider, useSwitchContext] = createComponentContext("Switch");
-var SwitchRoot = React67.forwardRef(
+var SwitchRoot = React68.forwardRef(
   ({
     id,
     checked,
@@ -9611,19 +9924,19 @@ var SwitchRoot = React67.forwardRef(
     children,
     ...inputRest
   }, ref) => {
-    const rawId = React67.useId();
+    const rawId = React68.useId();
     const inputId = id ?? rawId;
     const hintId = `${inputId}-hint`;
     const errorId = `${inputId}-error`;
-    const [hasHint, setHasHint] = React67.useState(false);
-    const [hasError, setHasError] = React67.useState(false);
+    const [hasHint, setHasHint] = React68.useState(false);
+    const [hasError, setHasError] = React68.useState(false);
     const invalid = variant === "error" || hasError;
     const [isChecked, setChecked] = useControllableState({
       value: checked,
       defaultValue: defaultChecked,
       onChange: onCheckedChange
     });
-    const handleChange = React67.useCallback(
+    const handleChange = React68.useCallback(
       (e) => {
         if (readOnly) {
           e.preventDefault();
@@ -9633,7 +9946,7 @@ var SwitchRoot = React67.forwardRef(
       },
       [readOnly, setChecked]
     );
-    const restInputPropsRef = React67.useRef(inputRest);
+    const restInputPropsRef = React68.useRef(inputRest);
     restInputPropsRef.current = inputRest;
     const parts = [
       ariaDescribedBy,
@@ -9641,11 +9954,11 @@ var SwitchRoot = React67.forwardRef(
       hasError ? errorId : void 0
     ].filter(Boolean);
     const describedBy = parts.length > 0 ? parts.join(" ") : void 0;
-    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(
+    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 ctxValue = React68.useMemo(
       () => ({
         inputId,
         hintId,
@@ -9700,7 +10013,7 @@ var SwitchRoot = React67.forwardRef(
   }
 );
 SwitchRoot.displayName = "SwitchRoot";
-var SwitchLabel = React67.forwardRef(function SwitchLabel2({ children, className, ...rest }, ref) {
+var SwitchLabel = React68.forwardRef(function SwitchLabel2({ children, className, ...rest }, ref) {
   const {
     inputId,
     inputRef,
@@ -9752,7 +10065,7 @@ var SwitchLabel = React67.forwardRef(function SwitchLabel2({ children, className
 SwitchLabel.displayName = "SwitchLabel";
 function SwitchHint({ children, className, ...rest }) {
   const { hintId, registerHint, unregisterHint, size, disabled } = useSwitchContext();
-  React67.useLayoutEffect(() => {
+  React68.useLayoutEffect(() => {
     registerHint();
     return () => {
       unregisterHint();
@@ -9773,7 +10086,7 @@ function SwitchHint({ children, className, ...rest }) {
 SwitchHint.displayName = "SwitchHint";
 function SwitchError({ children, className, ...rest }) {
   const { errorId, registerError, unregisterError, size } = useSwitchContext();
-  React67.useLayoutEffect(() => {
+  React68.useLayoutEffect(() => {
     registerError();
     return () => {
       unregisterError();
@@ -9800,7 +10113,7 @@ var Switch = {
 };
 
 // src/components/tabs/Tabs.tsx
-import * as React68 from "react";
+import * as React69 from "react";
 
 // src/components/tabs/Tabs.module.css
 var Tabs_default = {
@@ -9827,13 +10140,13 @@ function TabsRoot({
   children,
   className
 }) {
-  const rootId = React68.useId();
+  const rootId = React69.useId();
   const [activeValue, setActiveValue] = useControllableState({
     value,
     defaultValue,
     onChange: onValueChange
   });
-  const contextValue = React68.useMemo(
+  const contextValue = React69.useMemo(
     () => ({ activeValue, onSelect: setActiveValue, orientation, rootId, size }),
     [activeValue, setActiveValue, orientation, rootId, size]
   );
@@ -9842,14 +10155,14 @@ function TabsRoot({
 TabsRoot.displayName = "TabsRoot";
 function TabsList({ children, className }) {
   const { orientation, rootId, activeValue, onSelect, size } = useTabsContext();
-  const listRef = React68.useRef(null);
-  const [indicator, setIndicator] = React68.useState({
+  const listRef = React69.useRef(null);
+  const [indicator, setIndicator] = React69.useState({
     left: 0,
     top: 0,
     width: 0,
     height: 0
   });
-  const updateIndicator = React68.useCallback(() => {
+  const updateIndicator = React69.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const active = list.querySelector('[role="tab"][aria-selected="true"]');
@@ -9864,7 +10177,7 @@ function TabsList({ children, className }) {
       height: active.offsetHeight
     });
   }, []);
-  React68.useLayoutEffect(() => {
+  React69.useLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
     updateIndicator();
@@ -10011,7 +10324,7 @@ var Tabs = {
 };
 
 // src/components/tag/Tag.tsx
-import * as React69 from "react";
+import * as React70 from "react";
 
 // src/components/tag/Tag.module.css
 var Tag_default = {
@@ -10024,7 +10337,7 @@ var Tag_default = {
 
 // src/components/tag/Tag.tsx
 import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
-var TagRoot = React69.forwardRef(
+var TagRoot = React70.forwardRef(
   ({ size: sizeProp, onRemove, disabled, children, className, ...rest }, ref) => {
     const controlSurface = useOptionalControlSize();
     const size = sizeProp ?? (controlSurface !== void 0 ? controlSurfaceToInputSize(controlSurface) : "m");
@@ -10072,8 +10385,469 @@ function TagIcon({ children, className }) {
 TagIcon.displayName = "TagIcon";
 var Tag = { Root: TagRoot, Icon: TagIcon };
 
+// src/components/tag-select/TagSelect.tsx
+import * as React71 from "react";
+
+// src/components/tag-select/TagSelect.module.css
+var TagSelect_default = {
+  control: "TagSelect_control",
+  chips: "TagSelect_chips",
+  chip: "TagSelect_chip",
+  chipBadge: "TagSelect_chipBadge",
+  chipLabel: "TagSelect_chipLabel",
+  chipRemove: "TagSelect_chipRemove",
+  removeIcon: "TagSelect_removeIcon",
+  input: "TagSelect_input",
+  inputCollapsed: "TagSelect_inputCollapsed",
+  chevronSlot: "TagSelect_chevronSlot",
+  chevron: "TagSelect_chevron",
+  panelInner: "TagSelect_panelInner",
+  hint: "TagSelect_hint",
+  optionRow: "TagSelect_optionRow",
+  createRow: "TagSelect_createRow",
+  createLabel: "TagSelect_createLabel"
+};
+
+// src/components/tag-select/TagSelect.tsx
+import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+var CREATE_VALUE = "__prime_tag_select_create__";
+function normalizeList(selected, options, defaultTagColor) {
+  return selected.map((v) => {
+    const o = options.find((x) => x.value === v);
+    return {
+      value: v,
+      label: o?.label ?? v,
+      color: o?.color ?? defaultTagColor
+    };
+  });
+}
+function filterOptions(options, query) {
+  const q = query.trim().toLowerCase();
+  if (q.length === 0) return options;
+  return options.filter((o) => {
+    if (o.disabled) return false;
+    return o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q);
+  });
+}
+function optionsForList(options, query, selected) {
+  return filterOptions(options, query).filter((o) => !selected.includes(o.value));
+}
+function shouldShowCreate(creatable, inputTrim, selected, options) {
+  if (!creatable || inputTrim.length === 0) return false;
+  if (selected.includes(inputTrim)) return false;
+  const lower = inputTrim.toLowerCase();
+  const exists = options.some(
+    (o) => o.value === inputTrim || o.label.toLowerCase() === lower || o.value.toLowerCase() === lower
+  );
+  return !exists;
+}
+function TagSelectRoot({
+  options,
+  value: valueProp,
+  defaultValue = [],
+  onValueChange,
+  creatable = false,
+  onCreated,
+  defaultTagColor = "gray",
+  hint = "Select an option or create one",
+  createActionLabel = "Create",
+  disabled = false,
+  placeholder = "",
+  hasError = false,
+  size = "m",
+  id: idProp,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const generatedId = React71.useId();
+  const rootId = idProp ?? generatedId;
+  const listboxId = `${rootId}-listbox`;
+  const inputId = `${rootId}-input`;
+  const [selected, setSelected] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [inputValue, setInputValue] = React71.useState("");
+  const [inputFocused, setInputFocused] = React71.useState(false);
+  const [open, setOpen] = React71.useState(false);
+  const [highlightedValue, setHighlightedValue] = React71.useState(void 0);
+  const triggerRef = React71.useRef(null);
+  const inputRef = React71.useRef(null);
+  const listboxRef = React71.useRef(null);
+  const overlayPortalLayer = useOverlayPortalLayer();
+  const { resolvedSide, update } = usePosition(triggerRef, listboxRef, {
+    side: "bottom",
+    align: "start"
+  });
+  const updateRef = React71.useRef(update);
+  updateRef.current = update;
+  const inputTrim = inputValue.trim();
+  const filtered = React71.useMemo(
+    () => optionsForList(options, inputValue, selected),
+    [options, inputValue, selected]
+  );
+  const showCreate = shouldShowCreate(creatable, inputTrim, selected, options);
+  const hasPanelContent = filtered.length > 0 || showCreate;
+  const flatOptionValues = React71.useMemo(() => {
+    const v = [];
+    if (showCreate) v.push(CREATE_VALUE);
+    for (const o of filtered) {
+      if (!o.disabled) v.push(o.value);
+    }
+    return v;
+  }, [filtered, showCreate]);
+  React71.useLayoutEffect(() => {
+    if (!open) return;
+    updateRef.current();
+    const raf = requestAnimationFrame(() => updateRef.current());
+    return () => cancelAnimationFrame(raf);
+  }, [open]);
+  React71.useEffect(() => {
+    if (!open) return;
+    let rafCoalesce = 0;
+    const schedule = () => {
+      cancelAnimationFrame(rafCoalesce);
+      rafCoalesce = requestAnimationFrame(() => updateRef.current());
+    };
+    window.addEventListener("resize", schedule);
+    const scrollTargets = getScrollContainers(triggerRef.current);
+    for (const t of scrollTargets) {
+      t.addEventListener("scroll", schedule, { passive: true });
+    }
+    const vv = window.visualViewport;
+    vv?.addEventListener("resize", schedule);
+    const panel = listboxRef.current;
+    let ro = null;
+    if (typeof ResizeObserver !== "undefined" && panel) {
+      ro = new ResizeObserver(schedule);
+      ro.observe(panel);
+    }
+    return () => {
+      cancelAnimationFrame(rafCoalesce);
+      window.removeEventListener("resize", schedule);
+      for (const t of scrollTargets) {
+        t.removeEventListener("scroll", schedule);
+      }
+      vv?.removeEventListener("resize", schedule);
+      ro?.disconnect();
+    };
+  }, [open]);
+  React71.useEffect(() => {
+    if (!open) {
+      setHighlightedValue(void 0);
+      return;
+    }
+    if (flatOptionValues.length === 0) {
+      setHighlightedValue(void 0);
+      return;
+    }
+    setHighlightedValue(
+      (prev) => prev && flatOptionValues.includes(prev) ? prev : flatOptionValues[0]
+    );
+  }, [open, flatOptionValues]);
+  React71.useEffect(() => {
+    if (!open) return;
+    if (!hasPanelContent) setOpen(false);
+  }, [open, hasPanelContent]);
+  useEscapeKey({ enabled: open, onEscape: () => setOpen(false) });
+  useOutsideClick({
+    refs: [triggerRef, listboxRef],
+    enabled: open,
+    onOutsideClick: () => setOpen(false)
+  });
+  const toggleValue = React71.useCallback(
+    (value) => {
+      setSelected((prev) => {
+        if (prev.includes(value)) {
+          return prev.filter((x) => x !== value);
+        }
+        return [...prev, value];
+      });
+    },
+    [setSelected]
+  );
+  const handleSelectFromList = React71.useCallback(
+    (rawValue) => {
+      if (rawValue === CREATE_VALUE) {
+        const v = inputTrim;
+        if (v.length === 0) return;
+        setSelected((prev) => {
+          if (prev.includes(v)) return prev;
+          onCreated?.(v);
+          return [...prev, v];
+        });
+        setInputValue("");
+        return;
+      }
+      toggleValue(rawValue);
+      setInputValue("");
+    },
+    [inputTrim, onCreated, setSelected, toggleValue]
+  );
+  const getItems = React71.useCallback(() => queryEnabledSelectOptions(listboxRef.current), []);
+  const onListboxKeyDown = (e) => {
+    handleSelectListboxKeyDown(e, {
+      items: getItems(),
+      highlightedValue,
+      setHighlightedValue,
+      onSelect: (v) => {
+        handleSelectFromList(v);
+      },
+      onClose: () => setOpen(false)
+    });
+  };
+  const onInputKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Backspace" && inputValue.length === 0 && selected.length > 0) {
+      e.preventDefault();
+      setSelected((prev) => prev.slice(0, -1));
+      return;
+    }
+    if (e.key === "Escape") {
+      if (open) {
+        e.preventDefault();
+        setOpen(false);
+      }
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+      if (!open) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          if (filtered.length > 0 || showCreate) setOpen(true);
+        }
+        return;
+      }
+      if (flatOptionValues.length === 0) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const hv = highlightedValue ?? flatOptionValues[0];
+        if (hv === CREATE_VALUE) {
+          handleSelectFromList(CREATE_VALUE);
+        } else if (hv) {
+          const o = options.find((x) => x.value === hv);
+          if (o && !o.disabled) {
+            handleSelectFromList(o.value);
+          }
+        }
+        return;
+      }
+      handleSelectListboxKeyDown(e, {
+        items: getItems(),
+        highlightedValue,
+        setHighlightedValue,
+        onSelect: (v) => handleSelectFromList(v),
+        onClose: () => setOpen(false)
+      });
+    }
+  };
+  const chips = normalizeList(selected, options, defaultTagColor);
+  const isEmpty = selected.length === 0 && inputTrim.length === 0;
+  const inputCollapsed = !inputFocused && inputTrim.length === 0 && selected.length > 0;
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  const handleInputBlur = React71.useCallback((e) => {
+    const next = e.relatedTarget;
+    if (next instanceof Node && triggerRef.current?.contains(next)) {
+      return;
+    }
+    window.requestAnimationFrame(() => {
+      if (triggerRef.current?.contains(document.activeElement)) {
+        return;
+      }
+      setInputFocused(false);
+      setInputValue("");
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs31(ControlSizeProvider, { value: size, children: [
+    /* @__PURE__ */ jsxs31(
+      "div",
+      {
+        ref: triggerRef,
+        className: cx(TagSelect_default.control, className),
+        onClick: () => {
+          if (!disabled) {
+            focusInput();
+            if (hasPanelContent) setOpen(true);
+          }
+        },
+        ...toDataAttributes({
+          size,
+          open,
+          empty: isEmpty ? true : void 0,
+          disabled: disabled ? true : void 0,
+          "has-error": hasError ? true : void 0
+        }),
+        children: [
+          /* @__PURE__ */ jsxs31("div", { className: TagSelect_default.chips, children: [
+            chips.map((c) => /* @__PURE__ */ jsx57("span", { className: TagSelect_default.chip, children: /* @__PURE__ */ jsxs31(Badge.Root, { color: c.color, variant: "filled", className: TagSelect_default.chipBadge, children: [
+              /* @__PURE__ */ jsx57("span", { className: TagSelect_default.chipLabel, children: c.label }),
+              /* @__PURE__ */ jsx57(
+                "button",
+                {
+                  type: "button",
+                  className: TagSelect_default.chipRemove,
+                  "aria-label": `Remove ${c.label}`,
+                  disabled,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setSelected((prev) => prev.filter((x) => x !== c.value));
+                  },
+                  children: /* @__PURE__ */ jsx57(
+                    "svg",
+                    {
+                      className: TagSelect_default.removeIcon,
+                      viewBox: "0 0 12 12",
+                      fill: "none",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx57(
+                        "path",
+                        {
+                          d: "M2 2l8 8M10 2l-8 8",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round"
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ] }) }, c.value)),
+            /* @__PURE__ */ jsx57(
+              "input",
+              {
+                ref: inputRef,
+                id: inputId,
+                type: "text",
+                role: "combobox",
+                "aria-expanded": open,
+                "aria-controls": listboxId,
+                "aria-autocomplete": "list",
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                disabled,
+                placeholder: selected.length === 0 ? placeholder : void 0,
+                className: cx(TagSelect_default.input, inputCollapsed && TagSelect_default.inputCollapsed),
+                value: inputValue,
+                onChange: (e) => {
+                  const next = e.target.value;
+                  setInputValue(next);
+                  const nextTrim = next.trim();
+                  const nextFiltered = optionsForList(options, next, selected);
+                  const nextShowCreate = shouldShowCreate(creatable, nextTrim, selected, options);
+                  if (nextFiltered.length > 0 || nextShowCreate) {
+                    setOpen(true);
+                  } else {
+                    setOpen(false);
+                  }
+                },
+                onKeyDown: onInputKeyDown,
+                onFocus: () => {
+                  setInputFocused(true);
+                  if (!disabled && hasPanelContent) setOpen(true);
+                },
+                onBlur: handleInputBlur
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx57("span", { className: TagSelect_default.chevronSlot, "aria-hidden": true, children: /* @__PURE__ */ jsx57("span", { className: TagSelect_default.chevron }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx57(Portal, { children: /* @__PURE__ */ jsxs31(
+      ScrollContainer,
+      {
+        ref: listboxRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-multiselectable": "true",
+        "aria-hidden": !open,
+        tabIndex: -1,
+        "data-react-aria-top-layer": "true",
+        "data-overlay-portal-layer": overlayPortalLayer,
+        className: cx(Select_default.content, TagSelect_default.panelInner),
+        onKeyDown: onListboxKeyDown,
+        style: { display: open ? void 0 : "none" },
+        ...toDataAttributes({ side: resolvedSide, size }),
+        children: [
+          hint ? /* @__PURE__ */ jsx57("div", { className: TagSelect_default.hint, children: /* @__PURE__ */ jsx57(Typography.Root, { as: "div", variant: "body-small", tone: "muted", children: hint }) }) : null,
+          showCreate ? /* @__PURE__ */ jsxs31(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": false,
+              className: TagSelect_default.createRow,
+              ...toDataAttributes({
+                value: CREATE_VALUE,
+                label: inputTrim,
+                highlighted: highlightedValue === CREATE_VALUE,
+                disabled: false
+              }),
+              onMouseDown: (e) => {
+                e.preventDefault();
+              },
+              onMouseEnter: () => setHighlightedValue(CREATE_VALUE),
+              onClick: () => handleSelectFromList(CREATE_VALUE),
+              children: [
+                /* @__PURE__ */ jsx57(
+                  Typography.Root,
+                  {
+                    as: "span",
+                    variant: "body-small",
+                    tone: "muted",
+                    className: TagSelect_default.createLabel,
+                    children: createActionLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx57(Badge.Root, { color: defaultTagColor, variant: "filled", children: inputTrim })
+              ]
+            },
+            CREATE_VALUE
+          ) : null,
+          filtered.map((o) => /* @__PURE__ */ jsx57(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": false,
+              disabled: o.disabled,
+              className: TagSelect_default.optionRow,
+              ...toDataAttributes({
+                value: o.value,
+                label: o.label,
+                highlighted: highlightedValue === o.value,
+                selected: false,
+                disabled: Boolean(o.disabled)
+              }),
+              onMouseDown: (e) => {
+                if (!o.disabled) e.preventDefault();
+              },
+              onMouseEnter: () => !o.disabled && setHighlightedValue(o.value),
+              onClick: () => !o.disabled && handleSelectFromList(o.value),
+              children: /* @__PURE__ */ jsx57(Badge.Root, { color: o.color ?? defaultTagColor, variant: "filled", children: o.label })
+            },
+            o.value
+          ))
+        ]
+      }
+    ) })
+  ] });
+}
+TagSelectRoot.displayName = "TagSelectRoot";
+var TagSelect = {
+  Root: TagSelectRoot
+};
+
 // src/components/textarea/Textarea.tsx
-import * as React70 from "react";
+import * as React72 from "react";
 
 // src/components/textarea/Textarea.module.css
 var Textarea_default = {
@@ -10090,11 +10864,11 @@ var Textarea_default = {
 };
 
 // src/components/textarea/Textarea.tsx
-import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
 var [TextareaProvider, useTextareaContext] = createComponentContext("Textarea");
 function TextareaCharCounter({ current, max }) {
   const overflow = current > max;
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "span",
     {
       className: Textarea_default.charCounter,
@@ -10112,8 +10886,8 @@ TextareaCharCounter.displayName = "Textarea.CharCounter";
 function partitionTextareaChildren(children) {
   const counters = [];
   const rest = [];
-  React70.Children.forEach(children, (child) => {
-    if (React70.isValidElement(child) && child.type === TextareaCharCounter) {
+  React72.Children.forEach(children, (child) => {
+    if (React72.isValidElement(child) && child.type === TextareaCharCounter) {
       counters.push(child);
     } else if (child != null && child !== false) {
       rest.push(child);
@@ -10121,7 +10895,7 @@ function partitionTextareaChildren(children) {
   });
   return { counters, rest };
 }
-var TextareaRoot = React70.forwardRef(
+var TextareaRoot = React72.forwardRef(
   ({
     id,
     className,
@@ -10138,12 +10912,12 @@ var TextareaRoot = React70.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const rawId = React70.useId();
+    const rawId = React72.useId();
     const inputId = id ?? rawId;
     const hintId = `${inputId}-hint`;
     const errorId = `${inputId}-error`;
-    const [hasHint, setHasHint] = React70.useState(false);
-    const [hasError, setHasError] = React70.useState(false);
+    const [hasHint, setHasHint] = React72.useState(false);
+    const [hasError, setHasError] = React72.useState(false);
     const invalid = variant === "error" || hasError;
     const resolvedAriaInvalid = ariaInvalid ?? (invalid || void 0);
     const parts = [
@@ -10152,25 +10926,25 @@ var TextareaRoot = React70.forwardRef(
       hasError ? errorId : void 0
     ].filter(Boolean);
     const describedBy = parts.length > 0 ? parts.join(" ") : void 0;
-    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 registerHint = React72.useCallback(() => setHasHint(true), []);
+    const unregisterHint = React72.useCallback(() => setHasHint(false), []);
+    const registerError = React72.useCallback(() => setHasError(true), []);
+    const unregisterError = React72.useCallback(() => setHasError(false), []);
+    const wrapperRef = React72.useRef(null);
     const { counters: counterChildren, rest: otherChildren } = partitionTextareaChildren(children);
     const showFooter = counterChildren.length > 0;
-    React70.useLayoutEffect(() => {
+    React72.useLayoutEffect(() => {
       if (!autoResize || !wrapperRef.current) return;
       const textarea = wrapperRef.current.querySelector("textarea");
       if (textarea) {
         wrapperRef.current.dataset.value = textarea.value;
       }
     }, [autoResize]);
-    React70.useEffect(() => {
+    React72.useEffect(() => {
       if (!autoResize || !wrapperRef.current || typeof value !== "string") return;
       wrapperRef.current.dataset.value = value;
     }, [autoResize, value]);
-    const handleInput = React70.useCallback(
+    const handleInput = React72.useCallback(
       (e) => {
         if (autoResize && wrapperRef.current) {
           wrapperRef.current.dataset.value = e.currentTarget.value;
@@ -10179,7 +10953,7 @@ var TextareaRoot = React70.forwardRef(
       },
       [autoResize, onInput]
     );
-    const ctxValue = React70.useMemo(
+    const ctxValue = React72.useMemo(
       () => ({
         hintId,
         errorId,
@@ -10203,7 +10977,7 @@ var TextareaRoot = React70.forwardRef(
         unregisterError
       ]
     );
-    const textareaEl = /* @__PURE__ */ jsx57(
+    const textareaEl = /* @__PURE__ */ jsx58(
       "textarea",
       {
         ref,
@@ -10219,9 +10993,9 @@ var TextareaRoot = React70.forwardRef(
         ...rest
       }
     );
-    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(
+    const textareaBlock = autoResize ? /* @__PURE__ */ jsx58("div", { ref: wrapperRef, className: Textarea_default.autoResize, children: textareaEl }) : textareaEl;
+    return /* @__PURE__ */ jsx58(TextareaProvider, { value: ctxValue, children: /* @__PURE__ */ jsx58(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs32("div", { className: Textarea_default.field, ...toDataAttributes({ size }), children: [
+      /* @__PURE__ */ jsx58(
         "label",
         {
           htmlFor: inputId,
@@ -10232,9 +11006,9 @@ var TextareaRoot = React70.forwardRef(
             readonly: Boolean(readOnly),
             size
           }),
-          children: /* @__PURE__ */ jsxs31("div", { className: Textarea_default.controlStack, children: [
-            /* @__PURE__ */ jsx57("div", { className: Textarea_default.textareaRegion, children: textareaBlock }),
-            showFooter ? /* @__PURE__ */ jsx57("div", { className: Textarea_default.controlFooter, children: counterChildren }) : null
+          children: /* @__PURE__ */ jsxs32("div", { className: Textarea_default.controlStack, children: [
+            /* @__PURE__ */ jsx58("div", { className: Textarea_default.textareaRegion, children: textareaBlock }),
+            showFooter ? /* @__PURE__ */ jsx58("div", { className: Textarea_default.controlFooter, children: counterChildren }) : null
           ] })
         }
       ),
@@ -10245,13 +11019,13 @@ var TextareaRoot = React70.forwardRef(
 TextareaRoot.displayName = "Textarea.Root";
 function TextareaHint({ children, className, ...rest }) {
   const { hintId, registerHint, unregisterHint, size, disabled, readOnly } = useTextareaContext();
-  React70.useLayoutEffect(() => {
+  React72.useLayoutEffect(() => {
     registerHint();
     return () => {
       unregisterHint();
     };
   }, [registerHint, unregisterHint]);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     Hint.Root,
     {
       id: hintId,
@@ -10266,13 +11040,13 @@ function TextareaHint({ children, className, ...rest }) {
 TextareaHint.displayName = "Textarea.Hint";
 function TextareaError({ children, className, ...rest }) {
   const { errorId, registerError, unregisterError, size } = useTextareaContext();
-  React70.useLayoutEffect(() => {
+  React72.useLayoutEffect(() => {
     registerError();
     return () => {
       unregisterError();
     };
   }, [registerError, unregisterError]);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     Hint.Root,
     {
       id: errorId,
@@ -10417,6 +11191,7 @@ export {
   Switch,
   Tabs,
   Tag,
+  TagSelect,
   Textarea,
   Tooltip,
   Typography,