@espressif/dashboard-ui-components 1.9.1 → 1.10.0

package/dist/{chunk-XFYL5IZU.js → chunk-LUESSJAF.js}

@@ -1,6 +1,6 @@
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, Label, Badge, Popover, PopoverTrigger, PopoverContent, resolveVariantStyles, VariantGradientUnderlay, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, VARIANT_GRADIENT_BACKDROP_BASE, SILVER_GRADIENT_BACKDROP, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, arbitraryGradientBackgroundImage, SilverShineOverlay, SilverMetallicBorderOverlay, buttonGroupVariants, useIsInView } from './chunk-ABBHGIFI.js';
-import { FieldLabelRow, fieldHintClassName, Button, inputLabelClassName, Input, Tooltip2, TooltipProvider, buttonVariants as buttonVariants$1, CopyButton, Link, Tooltip, TooltipTrigger, TooltipContent, HighlightItem, Slot as Slot$1, Highlight, ScrollArea, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuCheckboxItem, Sheet, SheetContent, SheetHeader, SheetTitle } from './chunk-ZFYUONPY.js';
-import { getStrictContext, buttonVariants, Separator, CollapsibleContent, Collapsible, CollapsibleTrigger, useIsMobile, useControlledState, Button as Button$1, Skeleton, Avatar, AvatarFallback } from './chunk-OKB2WTX7.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, Label, Badge, Popover, PopoverTrigger, PopoverContent, resolveVariantStyles, VariantGradientUnderlay, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, VARIANT_GRADIENT_BACKDROP_BASE, SILVER_GRADIENT_BACKDROP, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, arbitraryGradientBackgroundImage, SilverShineOverlay, SilverMetallicBorderOverlay, buttonGroupVariants, useIsInView, PopoverAnchor } from './chunk-ALCWXFUC.js';
+import { FieldLabelRow, fieldHintClassName, Button, inputLabelClassName, Input, Tooltip2, TooltipProvider, buttonVariants as buttonVariants$1, CopyButton, Link, Tooltip, TooltipTrigger, TooltipContent, HighlightItem, Slot as Slot$1, Highlight, ScrollArea, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuCheckboxItem, Sheet, SheetContent, SheetHeader, SheetTitle } from './chunk-Z4776NRY.js';
+import { getStrictContext, buttonVariants, Separator, CollapsibleContent, Collapsible, CollapsibleTrigger, useIsMobile, useControlledState, Button as Button$1, Skeleton, Avatar, AvatarFallback, MOBILE_MEDIA_QUERY } from './chunk-XNLCVHBC.js';
 import { cn, resolveColor, isPresetColor } from './chunk-VU4CZ76T.js';
 import { __commonJS, __toESM } from './chunk-TRTQSARU.js';
 import { ChevronDown, ChevronUp, Check, Upload, X, RefreshCw, LoaderCircle, Triangle, Info, MinusIcon, ArrowLeft, ArrowRight, Search, ClockIcon, Crown, ShieldCheck, Tag as Tag$1, ChevronRight, CircleAlert, Eye, EyeOff, Circle, Braces, FileCheck, CheckCheck, TriangleAlert, CircleX, ChevronLeft, Menu, ChevronsUpDown, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, CalendarIcon, CalendarRangeIcon, CheckIcon, XIcon, Columns2, ChevronsRight, ChevronsLeft, MoveLeft, CircleIcon, Bolt, Plus, Clock, XCircle, CheckCircle2, Trash2 } from 'lucide-react';
@@ -16727,8 +16727,10 @@ function CollapsibleCard({
 var sizeStyles2 = {
   sm: {
     pad: "p-3",
-    headerTriggerPad: "pt-3 pb-3 pl-3 pr-3",
-    headerRightPad: "pt-3 pb-3 pr-3",
+    headerRowPadY: "py-3",
+    headerRowGapY: "gap-y-2",
+    headerTriggerPad: "-my-3 py-3 pl-3",
+    headerRightPad: "pl-3 pr-3",
     gap: "gap-2",
     primaryTypography: "text-xs font-semibold",
     secondaryTypography: "text-xs",
@@ -16740,8 +16742,10 @@ var sizeStyles2 = {
   },
   default: {
     pad: "p-4",
-    headerTriggerPad: "pt-4 pb-4 pl-4 pr-3",
-    headerRightPad: "pt-4 pb-4 pr-4",
+    headerRowPadY: "py-4",
+    headerRowGapY: "gap-y-3",
+    headerTriggerPad: "-my-4 py-4 pl-4",
+    headerRightPad: "pl-3 pr-4",
     gap: "gap-3",
     primaryTypography: "text-sm font-semibold",
     secondaryTypography: "text-sm",
@@ -16753,8 +16757,10 @@ var sizeStyles2 = {
   },
   lg: {
     pad: "p-6",
-    headerTriggerPad: "pt-6 pb-6 pl-6 pr-3",
-    headerRightPad: "pt-6 pb-6 pr-6",
+    headerRowPadY: "py-6",
+    headerRowGapY: "gap-y-4",
+    headerTriggerPad: "-my-6 py-6 pl-6",
+    headerRightPad: "pl-3 pr-6",
     gap: "gap-4",
     primaryTypography: "text-base font-semibold",
     secondaryTypography: "text-sm",
@@ -16776,6 +16782,9 @@ function iconSizedForSection(icon, iconClass) {
   }
   return /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center justify-center", iconClass), children: icon });
 }
+var HEADER_WRAP_ROW_CLASS = "flex-wrap";
+var HEADER_MAIN_BASIS_CLASS = "basis-48";
+var HEADER_RIGHT_CLASS = "ml-auto max-w-full shrink-0";
 var cardClassName = "rounded-lg border-border bg-card shadow-none overflow-hidden";
 function hasTooltipContent(content3) {
   if (content3 == null) return false;
@@ -16865,7 +16874,11 @@ function SectionCard({
   const hasIcon = hasRenderableContent(icon);
   const showCollapseIcon = allowCollapse && !hideCollapseIcon;
   const hasHeaderRight = hasRenderableContent(actions) || showCollapseIcon;
-  const headerMainPad = hasHeaderRight ? s.headerTriggerPad : s.pad;
+  const headerMainPad = hasHeaderRight ? cn(s.headerTriggerPad, HEADER_MAIN_BASIS_CLASS) : s.pad;
+  const headerRowClass = cn(
+    "flex min-w-0 items-center justify-between",
+    hasHeaderRight && cn(HEADER_WRAP_ROW_CLASS, s.headerRowPadY, s.headerRowGapY)
+  );
   const isHeaderRequired = hasIcon || hasHeaderText || hasHeaderRight;
   const hasBody = hasRenderableContent(children);
   const headerMain = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -16946,11 +16959,21 @@ function SectionCard({
       ] })
     }
   ) });
-  const headerRight = hasHeaderRight ? /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-2", s.headerRightPad), children: [
-    actions,
-    showCollapseIcon ? chevronButton : null
-  ] }) : null;
-  const header = allowCollapse ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between", children: [
+  const headerRight = hasHeaderRight ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2",
+        HEADER_RIGHT_CLASS,
+        s.headerRightPad
+      ),
+      children: [
+        actions,
+        showCollapseIcon ? chevronButton : null
+      ]
+    }
+  ) : null;
+  const header = allowCollapse ? /* @__PURE__ */ jsxs("div", { className: headerRowClass, children: [
     /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       "button",
       {
@@ -16968,7 +16991,7 @@ function SectionCard({
       }
     ) }),
     headerRight
-  ] }) : /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between", children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: headerRowClass, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -47636,6 +47659,142 @@ function AnimatedCard({
     }
   );
 }
+function ListDetailsItemButton({
+  item,
+  isSelected,
+  onSelect,
+  showDefaultEndIcon
+}) {
+  const defaultEndIcon = showDefaultEndIcon ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": true }) : null;
+  const endIcon = item.endIcon ?? defaultEndIcon;
+  if (typeof item.title !== "string") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(item.id),
+        "aria-pressed": isSelected,
+        className: cn(
+          "flex w-full items-center gap-2 rounded-md px-3 py-2 text-left",
+          "border-0 bg-transparent shadow-none",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center", children: item.title }),
+          endIcon != null && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: endIcon })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: isSelected ? "outline" : "ghost",
+      color: isSelected ? "primary" : "gray",
+      onClick: () => onSelect(item.id),
+      "aria-pressed": isSelected,
+      className: !isSelected ? "border border-transparent" : "",
+      endIcon: endIcon ?? void 0,
+      hideRingOnHover: true,
+      children: /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center", children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.title }) })
+    }
+  );
+}
+function focusSelectedItem(list) {
+  list?.querySelector('[aria-pressed="true"]')?.focus();
+}
+function ListDetailsItemDropdown({
+  data: data2,
+  selectedId,
+  onSelect,
+  footer,
+  labels,
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  const listRef = useRef(null);
+  const selectedIndex = data2.findIndex((item) => item.id === selectedId);
+  const selectedItem = data2[selectedIndex];
+  const previousItem = selectedIndex > 0 ? data2[selectedIndex - 1] : void 0;
+  const nextItem = selectedIndex >= 0 ? data2[selectedIndex + 1] : void 0;
+  const handleSelect = (itemId) => {
+    onSelect(itemId);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { "data-slot": "list-details-item-dropdown", className: cn("flex items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon",
+          variant: "outline",
+          color: "gray",
+          "aria-label": labels.previousItem,
+          disabled: previousItem == null,
+          onClick: () => previousItem && onSelect(previousItem.id),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          color: "gray",
+          className: "min-w-0 flex-1 justify-between px-3",
+          endIcon: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true }),
+          children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center", children: [
+            /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+              labels.chooseItem,
+              ":"
+            ] }),
+            " ",
+            typeof selectedItem?.title === "string" ? /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: selectedItem.title }) : selectedItem?.title
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon",
+          variant: "outline",
+          color: "gray",
+          "aria-label": labels.nextItem,
+          disabled: nextItem == null,
+          onClick: () => nextItem && onSelect(nextItem.id),
+          children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "start",
+        className: "flex w-[var(--radix-popover-trigger-width)] max-h-[min(24rem,var(--radix-popover-content-available-height))] flex-col gap-2 p-2",
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          focusSelectedItem(listRef.current);
+        },
+        children: [
+          /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx("div", { ref: listRef, className: "flex flex-col gap-2", children: data2.map((item) => /* @__PURE__ */ jsx(
+            ListDetailsItemButton,
+            {
+              item,
+              isSelected: item.id === selectedId,
+              onSelect: handleSelect,
+              showDefaultEndIcon: false
+            },
+            item.id
+          )) }) }),
+          footer != null ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: footer }) : null
+        ]
+      }
+    )
+  ] });
+}
 var NO_OVERFLOW = { start: false, end: false };
 function useScrollOverflow(ref, { enabled = true, getContent, onResize } = {}) {
   const [overflow, setOverflow] = React11.useState(NO_OVERFLOW);
@@ -47812,6 +47971,11 @@ function ListDetailsItemStrip({
     }
   );
 }
+var DEFAULT_LABELS = {
+  previousItem: "Previous item",
+  nextItem: "Next item",
+  chooseItem: "Choose item"
+};
 var panelColSpanClass = {
   1: "md:col-span-1",
   2: "md:col-span-2",
@@ -47866,7 +48030,9 @@ function ListDetails({
   unmountOnExit = false,
   variant = "outline",
   color = "mist",
-  size = "default"
+  size = "default",
+  mobileNavigation = "dropdown",
+  labels
 }) {
   const [selectedId, setSelectedId] = useState(
     () => pickSelectedId({ data: data2, controlledValue: value2 })
@@ -47923,7 +48089,7 @@ function ListDetails({
         "div",
         {
           className: cn(
-            // Below `md`: one column, the item strip above the details.
+            // Below `md`: one column, the item picker above the details.
             "grid grid-cols-1 gap-4 md:grid-cols-12",
             isFixedHeight ? "h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] md:grid-rows-[minmax(0,1fr)]" : "md:min-h-[16rem]"
           ),
@@ -47937,7 +48103,7 @@ function ListDetails({
                   panelColSpanClass[titleListPanelColumnWidth]
                 ),
                 children: [
-                  /* @__PURE__ */ jsx(
+                  mobileNavigation === "strip" ? /* @__PURE__ */ jsx(
                     ListDetailsItemStrip,
                     {
                       data: data2,
@@ -47945,48 +48111,29 @@ function ListDetails({
                       onSelect: handleSelect,
                       className: "md:hidden"
                     }
-                  ),
-                  /* @__PURE__ */ jsx(ScrollArea, { className: "items-list-container hidden min-h-0 flex-1 rounded-md border border-border md:block", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: data2.map((item) => {
-                    const isSelected = selectedId === item.id;
-                    const isStringTitle = typeof item.title === "string";
-                    if (!isStringTitle) {
-                      return /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => handleSelect(item.id),
-                          "aria-pressed": isSelected,
-                          className: cn(
-                            "flex w-full items-center gap-2 rounded-md px-3 py-2 text-left",
-                            "border-0 bg-transparent shadow-none",
-                            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center", children: item.title }),
-                            /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.endIcon ?? /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": true }) })
-                          ]
-                        },
-                        item.id
-                      );
+                  ) : /* @__PURE__ */ jsx(
+                    ListDetailsItemDropdown,
+                    {
+                      data: data2,
+                      selectedId,
+                      onSelect: handleSelect,
+                      footer,
+                      labels: { ...DEFAULT_LABELS, ...labels },
+                      className: "md:hidden"
                     }
-                    return /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        type: "button",
-                        variant: isSelected ? "outline" : "ghost",
-                        color: isSelected ? "primary" : "gray",
-                        onClick: () => handleSelect(item.id),
-                        "aria-pressed": isSelected,
-                        className: !isSelected ? "border border-transparent" : "",
-                        endIcon: item.endIcon ?? /* @__PURE__ */ jsx(ChevronRight, {}),
-                        hideRingOnHover: true,
-                        children: /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center", children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.title }) })
-                      },
-                      item.id
-                    );
-                  }) }) }),
+                  ),
+                  /* @__PURE__ */ jsx(ScrollArea, { className: "items-list-container hidden min-h-0 flex-1 rounded-md border border-border md:block", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: data2.map((item) => /* @__PURE__ */ jsx(
+                    ListDetailsItemButton,
+                    {
+                      item,
+                      isSelected: selectedId === item.id,
+                      onSelect: handleSelect,
+                      showDefaultEndIcon: true
+                    },
+                    item.id
+                  )) }) }),
                   footer != null ? (
-                    // Hidden on small screens, where the strip leaves no room for it.
+                    // Small screens show it inside the dropdown menu (the strip has no room for it).
                     /* @__PURE__ */ jsx("div", { className: "items-list-footer hidden shrink-0 md:block", children: footer })
                   ) : null
                 ]
@@ -49335,6 +49482,7 @@ function fadeMask2(start, end) {
 var scrollButtonClass = "absolute top-1/2 z-10 -translate-y-1/2 inline-flex size-7 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-sm transition-colors hover:text-foreground [@media(pointer:coarse)]:hidden";
 function TabsListContent({
   variant,
+  fullWidth,
   className,
   ...props
 }) {
@@ -49358,6 +49506,9 @@ function TabsListContent({
           className: cn(
             config.list,
             scrollable && "shrink-0 min-w-fit",
+            // Triggers are `flex-1`, so a full-width list shares the row between them;
+            // `min-w-fit` still lets a list that doesn't fit overflow and scroll.
+            scrollable && fullWidth && "max-md:w-full",
             className
           ),
           ...props
@@ -49372,7 +49523,7 @@ function TabsListContent({
       "data-slot": "tabs-list-scroller",
       "data-overflow-start": overflow.start || void 0,
       "data-overflow-end": overflow.end || void 0,
-      className: "relative min-w-0 max-w-full",
+      className: cn("relative min-w-0 max-w-full", fullWidth && "max-md:w-full"),
       children: [
         /* @__PURE__ */ jsx("div", { style: fadeMask2(overflow.start, overflow.end), children: list }),
         overflow.start && /* @__PURE__ */ jsx(
@@ -49410,8 +49561,8 @@ function Tabs2({ className, ...props }) {
     }
   );
 }
-function TabsList2({ variant, ...props }) {
-  return /* @__PURE__ */ jsx(TabsListVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(TabsListContent, { variant: variant ?? "default", ...props }) });
+function TabsList2({ variant, fullWidth = true, ...props }) {
+  return /* @__PURE__ */ jsx(TabsListVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(TabsListContent, { variant: variant ?? "default", fullWidth, ...props }) });
 }
 var tabsTriggerBaseClass = "data-[state=active]:text-primary tracking-wide focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 function TabsTrigger2({ className, ...props }) {
@@ -53536,7 +53687,9 @@ function ChartLegendContent({
     "div",
     {
       className: cn(
-        "flex items-center justify-center gap-4",
+        // Wraps so a legend wider than the chart doesn't overflow; centred
+        // overflow would clip the first and last items.
+        "flex flex-wrap items-center justify-center gap-x-4 gap-y-2",
         verticalAlign === "top" ? "pb-3" : "pt-3",
         className
       ),
@@ -54201,6 +54354,7 @@ function getBarRadius2(index2, total, stacked, rounded) {
   if (isLast) return [r, r, 0, 0];
   return [0, 0, 0, 0];
 }
+var DEFAULT_Y_AXIS_ID = "left";
 function buildDefaultSeries(config) {
   return Object.keys(config).map((dataKey) => ({ dataKey, type: "bar" }));
 }
@@ -54334,7 +54488,7 @@ var ComposedChart = React11.forwardRef(
                 Bar,
                 {
                   dataKey: item.dataKey,
-                  yAxisId: item.yAxisId,
+                  yAxisId: item.yAxisId ?? DEFAULT_Y_AXIS_ID,
                   stackId: item.stackId,
                   fill: `var(--color-${item.dataKey})`,
                   maxBarSize,
@@ -54362,7 +54516,7 @@ var ComposedChart = React11.forwardRef(
               {
                 type: lineCurve,
                 dataKey: item.dataKey,
-                yAxisId: item.yAxisId,
+                yAxisId: item.yAxisId ?? DEFAULT_Y_AXIS_ID,
                 stroke: `var(--color-${item.dataKey})`,
                 strokeWidth: lineStrokeWidth,
                 dot: showDots ? {
@@ -56781,17 +56935,23 @@ function DateRangePicker({
     EMPTY_DRAFT_RANGE
   );
   const [calendarMonth, setCalendarMonth] = React11.useState(/* @__PURE__ */ new Date());
-  const [flyoutSide, setFlyoutSide] = React11.useState("right");
+  const [calendarLayout, setCalendarLayout] = React11.useState("right");
   const calendarRef = React11.useRef(null);
   const [startInputValue, setStartInputValue] = React11.useState("");
   const [endInputValue, setEndInputValue] = React11.useState("");
   React11.useLayoutEffect(() => {
-    if (!showCalendar || !calendarRef.current) return;
+    if (!showCalendar || !calendarRef.current || calendarLayout === "inline") {
+      return;
+    }
     const rect = calendarRef.current.getBoundingClientRect();
-    if (rect.right > window.innerWidth) {
-      setFlyoutSide("left");
+    if (rect.bottom > window.innerHeight) {
+      setCalendarLayout("inline");
+    } else if (calendarLayout === "right" && rect.right > window.innerWidth) {
+      setCalendarLayout("left");
+    } else if (calendarLayout === "left" && rect.left < 0) {
+      setCalendarLayout("inline");
     }
-  }, [showCalendar]);
+  }, [showCalendar, calendarLayout]);
   const activePresets = presets ?? [...PRESET_IDS];
   const resolveLabel = (id) => presetLabels?.[id] ?? (id === "custom" ? "Custom" : PRESET_LABELS[id]);
   const updateDraftRange = React11.useCallback(
@@ -56816,7 +56976,7 @@ function DateRangePicker({
     setOpen(nextOpen);
     if (!nextOpen) {
       setShowCalendar(false);
-      setFlyoutSide("right");
+      setCalendarLayout("right");
       updateDraftRange(EMPTY_DRAFT_RANGE);
       setStartInputValue("");
       setEndInputValue("");
@@ -56929,6 +57089,107 @@ function DateRangePicker({
     }
   );
   const isRangeComplete = !!(draftRange.startDate && draftRange.endDate);
+  const isInline = calendarLayout === "inline";
+  const showPresetRows = !(allowCustom && showCalendar && isInline);
+  const cancelButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      color: "error",
+      size: isInline ? void 0 : "sm",
+      onClick: () => handleOpenChange(false),
+      children: "Cancel"
+    }
+  );
+  const applyButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      color: "primary",
+      size: isInline ? void 0 : "sm",
+      disabled: !isRangeComplete,
+      onClick: handleApply,
+      children: "Apply"
+    }
+  );
+  const calendarBody = /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full justify-between", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("p-1", isInline && "flex justify-center"), children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        mode: "range",
+        selected: toCalendarRange(draftRange),
+        onSelect: handleRangeChange,
+        month: calendarMonth,
+        onMonthChange: setCalendarMonth,
+        numberOfMonths: isInline ? 1 : 2,
+        showOutsideDays: true,
+        captionLayout: "dropdown",
+        disabled: lockEndToToday || disableFutureDates ? { after: /* @__PURE__ */ new Date() } : void 0
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "p-3 flex items-end gap-4",
+          isInline ? "flex-wrap justify-end gap-3" : "justify-between"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                isInline ? "grid w-full grid-cols-2 gap-3" : "flex items-center gap-3"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    size: "sm",
+                    label: "Start date",
+                    value: startInputValue,
+                    placeholder: dateFormat.toLowerCase(),
+                    onChange: handleStartInputChange,
+                    onBlur: handleStartInputBlur,
+                    className: isInline ? "w-full min-w-0" : "w-32"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    size: "sm",
+                    label: "End date",
+                    value: endInputValue,
+                    placeholder: dateFormat.toLowerCase(),
+                    onChange: handleEndInputChange,
+                    onBlur: handleEndInputBlur,
+                    disabled: lockEndToToday,
+                    className: isInline ? "w-full min-w-0" : "w-32"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex gap-2",
+                isInline ? "w-full flex-col" : "h-full items-end"
+              ),
+              children: isInline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                applyButton,
+                cancelButton
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                cancelButton,
+                applyButton
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsx("div", { className: cn("flex-1", className), children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: trigger ?? /* @__PURE__ */ jsx(
       "button",
@@ -56944,13 +57205,16 @@ function DateRangePicker({
       {
         align,
         side,
+        collisionPadding: 16,
         className: cn(
-          "w-auto min-w-[10rem] gap-0 p-0 relative overflow-visible",
-          allowCustom && showCalendar && (flyoutSide === "right" ? "rounded-r-none" : "rounded-l-none")
+          "w-auto min-w-[10rem] gap-0 p-0 relative",
+          isInline ? "max-h-(--radix-popover-content-available-height) max-w-(--radix-popover-content-available-width) overflow-y-auto" : "overflow-visible",
+          allowCustom && showCalendar && calendarLayout === "right" && "rounded-r-none",
+          allowCustom && showCalendar && calendarLayout === "left" && "rounded-l-none"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex max-h-[min(24rem,calc(100vh-6rem))] min-w-[10rem] flex-col overflow-y-auto py-1.5", children: [
-            activePresets.map((id) => /* @__PURE__ */ jsxs(
+            showPresetRows && activePresets.map((id) => /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
@@ -56968,7 +57232,7 @@ function DateRangePicker({
               id
             )),
             allowCustom && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { className: "mx-1 my-1 h-px bg-border" }),
+              showPresetRows && /* @__PURE__ */ jsx("div", { className: "mx-1 my-1 h-px bg-border" }),
               /* @__PURE__ */ jsxs(
                 "button",
                 {
@@ -56981,7 +57245,9 @@ function DateRangePicker({
                       openCalendarPanel();
                     }
                   },
-                  onMouseEnter: openCalendarPanel,
+                  onPointerEnter: (event) => {
+                    if (event.pointerType === "mouse") openCalendarPanel();
+                  },
                   className: cn(
                     "flex w-full items-center justify-between gap-6 px-3 py-1.5 text-left text-sm hover:bg-accent",
                     showCalendar && "bg-accent font-medium"
@@ -57001,7 +57267,7 @@ function DateRangePicker({
                 }
               )
             ] }),
-            clearable && hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
+            showPresetRows && clearable && hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("div", { className: "mx-1 my-1 h-px bg-border" }),
               /* @__PURE__ */ jsxs(
                 "button",
@@ -57018,82 +57284,16 @@ function DateRangePicker({
               )
             ] })
           ] }),
-          allowCustom && showCalendar && /* @__PURE__ */ jsx(
+          allowCustom && showCalendar && isInline && /* @__PURE__ */ jsx("div", { className: "border-t", children: calendarBody }),
+          allowCustom && showCalendar && !isInline && /* @__PURE__ */ jsx(
             "div",
             {
               ref: calendarRef,
               className: cn(
                 "absolute top-0 border bg-popover text-popover-foreground shadow-lg",
-                flyoutSide === "right" ? "left-full -ml-px rounded-r-2xl border-l" : "right-full -mr-px rounded-l-2xl border-r"
+                calendarLayout === "right" ? "left-full -ml-px rounded-r-2xl border-l" : "right-full -mr-px rounded-l-2xl border-r"
               ),
-              children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full justify-between", children: [
-                /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(
-                  Calendar,
-                  {
-                    mode: "range",
-                    selected: toCalendarRange(draftRange),
-                    onSelect: handleRangeChange,
-                    month: calendarMonth,
-                    onMonthChange: setCalendarMonth,
-                    numberOfMonths: 2,
-                    showOutsideDays: true,
-                    captionLayout: "dropdown",
-                    disabled: lockEndToToday || disableFutureDates ? { after: /* @__PURE__ */ new Date() } : void 0
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs("div", { className: "p-3 flex items-end justify-between gap-4", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        size: "sm",
-                        label: "Start date",
-                        value: startInputValue,
-                        placeholder: dateFormat.toLowerCase(),
-                        onChange: handleStartInputChange,
-                        onBlur: handleStartInputBlur,
-                        className: "w-32"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        size: "sm",
-                        label: "End date",
-                        value: endInputValue,
-                        placeholder: dateFormat.toLowerCase(),
-                        onChange: handleEndInputChange,
-                        onBlur: handleEndInputBlur,
-                        disabled: lockEndToToday,
-                        className: "w-32"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "h-full flex gap-2 items-end", children: [
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "ghost",
-                        color: "error",
-                        size: "sm",
-                        onClick: () => handleOpenChange(false),
-                        children: "Cancel"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "outline",
-                        color: "primary",
-                        size: "sm",
-                        disabled: !isRangeComplete,
-                        onClick: handleApply,
-                        children: "Apply"
-                      }
-                    )
-                  ] })
-                ] })
-              ] })
+              children: calendarBody
             }
           )
         ]
@@ -57239,6 +57439,11 @@ var searchFieldContainerSizeClasses = {
   sm: "h-8 px-3 text-xs",
   lg: "h-10 px-8 text-sm"
 };
+var searchFieldInputTextClasses = {
+  default: "text-base md:text-sm",
+  sm: "text-base md:text-xs",
+  lg: "text-base md:text-sm"
+};
 var searchFieldIconSizeClasses = {
   default: "h-4 w-4",
   sm: "h-3 w-3",
@@ -57290,7 +57495,7 @@ function SearchBox({
             placeholder,
             className: cn(
               "flex-1 min-w-0 bg-transparent outline-none placeholder:text-muted-foreground",
-              size === "sm" ? "text-xs" : "text-sm"
+              searchFieldInputTextClasses[size]
             )
           }
         ),
@@ -57322,6 +57527,45 @@ function SearchBox({
     }
   );
 }
+function FiltersBar({
+  search,
+  actions,
+  filters,
+  searchClassName,
+  className
+}) {
+  if (!filters) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex w-full items-center justify-between gap-3 md:gap-4",
+          className
+        ),
+        children: [
+          search && /* @__PURE__ */ jsx("div", { className: cn("min-w-0 flex-1", searchClassName ?? "max-w-md"), children: search }),
+          actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center justify-end gap-2 md:gap-3", children: actions })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("@container w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 @3xl:flex-row @3xl:flex-wrap @3xl:items-center @3xl:gap-x-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 empty:hidden @3xl:contents", children: [
+      search && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "min-w-0 flex-1 @3xl:order-1 @3xl:flex-none",
+            searchClassName ?? "@3xl:w-xs"
+          ),
+          children: search
+        }
+      ),
+      actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center justify-end gap-2 @3xl:order-3", children: actions })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "-m-1 flex min-w-0 flex-nowrap items-center gap-2 overflow-x-auto p-1 [scrollbar-width:none] empty:hidden *:shrink-0 [&::-webkit-scrollbar]:hidden @3xl:order-2 @3xl:m-0 @3xl:flex-1 @3xl:flex-wrap @3xl:gap-x-5 @3xl:gap-y-3 @3xl:overflow-visible @3xl:p-0", children: filters })
+  ] }) });
+}
 var DEBOUNCE_MS = 500;
 function AdvancedSearchBox({
   searchMeta,
@@ -57425,7 +57669,7 @@ function AdvancedSearchBox({
             placeholder: selectedMeta.placeholder,
             className: cn(
               "flex-1 min-w-0 bg-transparent outline-none placeholder:text-muted-foreground",
-              size === "sm" ? "text-xs" : "text-sm"
+              searchFieldInputTextClasses[size]
             )
           }
         ),
@@ -57570,6 +57814,7 @@ function CopiableText({
   text: text2,
   actions,
   alwaysShowActions = false,
+  hideActionsOnTouch = false,
   size = "default",
   className
 }) {
@@ -57591,7 +57836,11 @@ function CopiableText({
             role: actions != null ? "group" : void 0,
             className: cn(
               buttonGroupVariants(),
-              alwaysShowActions ? "ml-2 shrink-0" : "absolute right-0 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover/copiable-text:opacity-100 group-focus-within/copiable-text:opacity-100"
+              "ml-2 shrink-0",
+              // Revealed on hover over the end of the text. Touch screens can't hover, so there the
+              // cluster always shows beside the text instead of covering it.
+              !alwaysShowActions && "[@media(hover:hover)]:absolute [@media(hover:hover)]:right-0 [@media(hover:hover)]:top-1/2 [@media(hover:hover)]:ml-0 [@media(hover:hover)]:-translate-y-1/2 [@media(hover:hover)]:opacity-0 transition-opacity group-hover/copiable-text:opacity-100 group-focus-within/copiable-text:opacity-100",
+              hideActionsOnTouch && "[@media(hover:none)]:hidden"
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -57793,6 +58042,9 @@ function DataTableBody({
       "data-state": row.getIsSelected() && "selected",
       tabIndex: onRowClick ? 0 : void 0,
       className: cn(
+        // Named group so DataTableRowActions reveals on any row without
+        // colliding with `group-*` utilities inside cells.
+        "group/data-table-row",
         onRowClick && "group cursor-pointer outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         showBorder ? "border-b border-border/50 last:border-b-0" : "border-0",
         getRowClassName?.(row.original, rowIndex),
@@ -58135,6 +58387,36 @@ function DataTable({
     )
   ] });
 }
+var revealClasses = {
+  always: "[@media(hover:hover)]:opacity-0",
+  md: "md:[@media(hover:hover)]:opacity-0"
+};
+function stopRowInteraction(event) {
+  event.stopPropagation();
+}
+function DataTableRowActions({
+  children,
+  alwaysVisible = false,
+  alwaysVisibleBelow,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex min-h-9 items-center justify-end",
+        !alwaysVisible && [
+          "transition-opacity group-hover/data-table-row:opacity-100 group-focus-within/data-table-row:opacity-100 has-[[data-state=open]]:opacity-100",
+          revealClasses[alwaysVisibleBelow ?? "always"]
+        ],
+        className
+      ),
+      onClick: stopRowInteraction,
+      onKeyDown: stopRowInteraction,
+      children
+    }
+  );
+}
 function AirConditionerIcon({ size = 18 }) {
   return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 800 759.42", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ jsx("path", { d: "m669.22,400.82H129.14C57.8,400.82,0,343.02,0,271.67V33.96C0,15.35,15.35,0,33.96,0h732.08c18.61,0,33.96,15.35,33.96,33.96v237.71c-1.63,71.35-59.43,129.14-130.78,129.14ZM66.29,67.92v203.76c0,33.96,28.9,62.86,62.86,62.86h540.08c33.96,0,62.86-28.9,62.86-62.86V67.92H66.29Z" }),
@@ -59269,7 +59551,7 @@ function TransferList({
     {
       role: "group",
       "aria-label": ariaLabel,
-      className: cn("flex w-full items-stretch gap-4", className),
+      className: cn("flex w-full flex-col items-stretch gap-4 md:flex-row", className),
       children: [
         /* @__PURE__ */ jsx(FormFieldMirrors2, { name: name2, form, value: hiddenFieldValues }),
         /* @__PURE__ */ jsx(
@@ -59290,7 +59572,7 @@ function TransferList({
             maxHeight
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-center justify-center gap-3 self-center", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-row items-center justify-center gap-3 self-center md:flex-col", children: [
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -59300,7 +59582,7 @@ function TransferList({
               disabled: !canMoveToTarget,
               "aria-label": `Move selected to ${targetTitle}`,
               onClick: handleMoveToTarget,
-              children: /* @__PURE__ */ jsx(ChevronsRight, { "aria-hidden": true })
+              children: /* @__PURE__ */ jsx(ChevronsRight, { className: "max-md:rotate-90", "aria-hidden": true })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -59313,7 +59595,7 @@ function TransferList({
               disabled: !canMoveToSource,
               "aria-label": `Move selected to ${sourceTitle}`,
               onClick: handleMoveToSource,
-              children: /* @__PURE__ */ jsx(ChevronsLeft, { "aria-hidden": true })
+              children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "max-md:rotate-90", "aria-hidden": true })
             }
           )
         ] }),
@@ -59492,7 +59774,7 @@ function DialogContent2({
             DialogClose,
             {
               className: cn(
-                "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 z-50 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
                 closeButtonClassName
               ),
               children: [
@@ -59724,7 +60006,10 @@ function renderTitleAndDescriptionBlocks(p) {
         "min-w-0 text-left",
         opts.extraTitleClass,
         fgClass,
-        opts.truncate ? "block w-full" : "break-words"
+        // Inline when truncating: the ellipsis belongs to the surrounding
+        // `truncate` line, which only ellipsizes its own inline content. A
+        // block child would overflow itself and clip without an ellipsis.
+        !opts.truncate && "break-words"
       ),
       style: fgStyle,
       children: title
@@ -59768,7 +60053,7 @@ function renderTitleAndDescriptionBlocks(p) {
             {
               as: "span",
               variant: "body2",
-              className: cn("block w-full text-left font-medium", descClass),
+              className: cn("text-left font-medium", descClass),
               style: descStyle,
               children: description
             }
@@ -59961,7 +60246,11 @@ function trailingLeadAndSlot(options) {
   );
 }
 var ACTIONS_ROW_CLASS = "flex-wrap";
-var ACTIONS_LEADING_BASIS_CLASS = "basis-48";
+var ACTIONS_LEADING_BASIS_CLASS = {
+  auto: "basis-48",
+  // A full-width text block leaves no room, so the actions always wrap.
+  below: "basis-full"
+};
 var ACTIONS_SLOT_CLASS = "relative z-10 ml-auto max-w-full shrink-0";
 function shellPresetRing(color) {
   const c = color ?? "gray";
@@ -59977,6 +60266,7 @@ var IconTextActionCard = React11.forwardRef(
     onClick,
     actions,
     showActionsOnlyOnHover = false,
+    actionsPlacement = "auto",
     color = "gray",
     iconAvatarVariant: iconAvatarVariantProp,
     iconAvatarColor: iconAvatarColorProp,
@@ -60076,7 +60366,7 @@ var IconTextActionCard = React11.forwardRef(
           !showActionsSlot ? s.gap : void 0,
           variant === "gradient" && "relative z-10",
           !showActionsSlot && "w-full min-w-0",
-          showActionsSlot && ["min-w-0", ACTIONS_LEADING_BASIS_CLASS]
+          showActionsSlot && ["min-w-0", ACTIONS_LEADING_BASIS_CLASS[actionsPlacement]]
         ),
         children: leadingMain
       }
@@ -60131,7 +60421,8 @@ var IconTextActionCard = React11.forwardRef(
               {
                 className: cn(
                   ACTIONS_SLOT_CLASS,
-                  showActionsOnlyOnHover && "pointer-events-none opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
+                  showActionsOnlyOnHover && // Only devices that can hover hide the actions; touch screens always show them.
+                  "transition-opacity [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"
                 ),
                 children: actions
               }
@@ -60176,7 +60467,7 @@ var IconTextActionCard = React11.forwardRef(
                   s.gap,
                   variant === "gradient" && "relative z-10",
                   "min-w-0",
-                  ACTIONS_LEADING_BASIS_CLASS
+                  ACTIONS_LEADING_BASIS_CLASS[actionsPlacement]
                 ),
                 children: leadingMain
               }
@@ -60186,7 +60477,8 @@ var IconTextActionCard = React11.forwardRef(
               {
                 className: cn(
                   ACTIONS_SLOT_CLASS,
-                  showActionsOnlyOnHover && "pointer-events-none opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
+                  showActionsOnlyOnHover && // Only devices that can hover hide the actions; touch screens always show them.
+                  "transition-opacity [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"
                 ),
                 children: actions
               }
@@ -60272,6 +60564,7 @@ var Alert = React11.forwardRef(
     hideIcon = false,
     action,
     actions,
+    actionsPlacement,
     dismissible = false,
     onDismiss,
     dismissLabel = "Close alert",
@@ -60320,6 +60613,7 @@ var Alert = React11.forwardRef(
         size,
         variant,
         actions: resolvedActions,
+        actionsPlacement,
         className
       }
     );
@@ -61970,7 +62264,8 @@ function KeyValueManagerTable({
               item,
               sourceIndex,
               cn(
-                "pointer-events-none opacity-0 transition-opacity",
+                // Touch screens can't hover, so they always show it.
+                "transition-opacity [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0",
                 "group-hover:pointer-events-auto group-hover:opacity-100",
                 // Keyboard users tab to it, so show it when focused.
                 "focus-visible:opacity-100"
@@ -62473,7 +62768,7 @@ var Toast = React11.forwardRef(
       {
         ref,
         className: cn(
-          "relative flex w-full min-w-[20rem] max-w-[24rem] items-start gap-3 overflow-hidden rounded-lg px-4 py-3 shadow-lg",
+          "relative flex w-full min-w-[min(20rem,calc(100vw-2rem))] max-w-[min(24rem,calc(100vw-2rem))] items-start gap-3 overflow-hidden rounded-lg px-4 py-3 shadow-lg",
           styles.container,
           className
         ),
@@ -69438,7 +69733,7 @@ var ContentContainer = React11.forwardRef(
           !noGutters && "mt-[72px]",
           maxWidth != null && maxWidthClasses[maxWidth],
           "mx-auto",
-          "p-6",
+          "p-3 md:p-6",
           className
         ),
         children
@@ -69447,6 +69742,127 @@ var ContentContainer = React11.forwardRef(
   }
 );
 ContentContainer.displayName = "ContentContainer";
+var DEFAULT_THRESHOLD = 24;
+var OPEN_POPUP_SELECTOR = '[aria-expanded="true"], [data-state="open"]';
+var STATIC = {
+  state: "static",
+  animate: false
+};
+function getScrollParent(element) {
+  let parent2 = element.parentElement;
+  while (parent2) {
+    const { overflowY } = getComputedStyle(parent2);
+    if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") {
+      return parent2;
+    }
+    parent2 = parent2.parentElement;
+  }
+  return window;
+}
+function useMediaMatch(query, enabled) {
+  const [matches, setMatches] = React11.useState(false);
+  React11.useEffect(() => {
+    if (!enabled || query === void 0) {
+      setMatches(enabled);
+      return;
+    }
+    if (typeof window.matchMedia !== "function") {
+      setMatches(false);
+      return;
+    }
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query, enabled]);
+  return matches;
+}
+function readScroll(scroller) {
+  if (scroller instanceof Window) {
+    const max = document.documentElement.scrollHeight - window.innerHeight;
+    return { top: window.scrollY, max, viewportTop: 0 };
+  }
+  return {
+    top: scroller.scrollTop,
+    max: scroller.scrollHeight - scroller.clientHeight,
+    viewportTop: scroller.getBoundingClientRect().top
+  };
+}
+function useRevealOnScrollUp(ref, { enabled: enabledOption, mediaQuery, threshold = DEFAULT_THRESHOLD }) {
+  const enabled = useMediaMatch(mediaQuery, enabledOption);
+  const [reveal, setReveal] = React11.useState(STATIC);
+  const stateRef = React11.useRef("static");
+  const transition = React11.useCallback((next) => {
+    const previous = stateRef.current;
+    if (previous === next) return;
+    stateRef.current = next;
+    setReveal({ state: next, animate: previous !== "static" && next !== "static" });
+  }, []);
+  React11.useEffect(() => {
+    const element = ref.current;
+    if (!enabled || !element) {
+      stateRef.current = "static";
+      setReveal(STATIC);
+      return;
+    }
+    const scroller = getScrollParent(element);
+    let lastTop = readScroll(scroller).top;
+    let upDistance = 0;
+    let naturalTop = 0;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const scroll = readScroll(scroller);
+      const top = Math.min(Math.max(scroll.top, 0), Math.max(scroll.max, 0));
+      const delta = top - lastTop;
+      lastTop = top;
+      const rect = element.getBoundingClientRect();
+      if (stateRef.current === "static") {
+        naturalTop = rect.top - scroll.viewportTop + top;
+      }
+      const naturalBottom = naturalTop + rect.height;
+      if (top <= naturalTop) {
+        transition("static");
+        return;
+      }
+      if (stateRef.current === "static") {
+        if (top >= naturalBottom) transition("hidden");
+        return;
+      }
+      if (delta > 0) {
+        upDistance = 0;
+        if (stateRef.current === "revealed" && element.querySelector(OPEN_POPUP_SELECTOR)) {
+          return;
+        }
+        transition(top < naturalBottom ? "static" : "hidden");
+        return;
+      }
+      if (delta < 0) {
+        upDistance -= delta;
+        if (stateRef.current !== "hidden") return;
+        if (top < naturalBottom) {
+          transition("static");
+          return;
+        }
+        if (upDistance >= threshold) transition("revealed");
+      }
+    };
+    const onScroll = () => {
+      if (frame === 0) frame = requestAnimationFrame(update);
+    };
+    update();
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      scroller.removeEventListener("scroll", onScroll);
+      if (frame !== 0) cancelAnimationFrame(frame);
+    };
+  }, [ref, enabled, threshold, transition]);
+  const revealNow = React11.useCallback(() => {
+    if (stateRef.current === "hidden") transition("revealed");
+  }, [transition]);
+  return { state: reveal.state, animate: reveal.animate, reveal: revealNow };
+}
 var maxWidthClasses2 = {
   sm: "max-w-2xl",
   md: "max-w-4xl",
@@ -69455,6 +69871,35 @@ var maxWidthClasses2 = {
 };
 var headingTitleClasses = "min-w-0 flex-1 text-2xl text-foreground font-bold track-tight";
 var headingContentClasses = "min-w-0 flex-1";
+var stickyHeaderClasses = "sticky top-0 z-11 bg-background/75 backdrop-blur-xs";
+var stickyHeaderFromMdClasses = "md:sticky md:top-0 md:z-11 md:bg-background/75 md:backdrop-blur-xs";
+var elevatedHeaderClasses = "shadow-md shadow-accent/30";
+var elevatedHeaderFromMdClasses = "md:shadow-md md:shadow-accent/30";
+var revealTransitionClasses = "transition-transform duration-200 ease-out motion-reduce:transition-none";
+function headerPinningClasses({
+  stickyHeadingOnMobile,
+  elevateHeading,
+  revealEnabled,
+  revealState,
+  animateReveal
+}) {
+  if (stickyHeadingOnMobile) {
+    return cn(stickyHeaderClasses, elevateHeading && elevatedHeaderClasses);
+  }
+  if (!revealEnabled || revealState === "static") {
+    return cn(
+      stickyHeaderFromMdClasses,
+      elevateHeading && elevatedHeaderFromMdClasses
+    );
+  }
+  const revealed = revealState === "revealed";
+  return cn(
+    stickyHeaderClasses,
+    revealed ? "translate-y-0" : "-translate-y-full",
+    revealed && elevateHeading && elevatedHeaderClasses,
+    animateReveal && revealTransitionClasses
+  );
+}
 function PageContainer({
   maxWidth,
   heading,
@@ -69463,12 +69908,24 @@ function PageContainer({
   className,
   noGutters = false,
   elevateHeading = false,
+  stickyHeadingOnMobile = false,
+  revealHeadingOnScrollUp = true,
   goBackLinkData,
   onBack
 }) {
   const hasContainerHeading = heading != null || actions != null;
   const showBackLink = goBackLinkData?.show === true;
   const showStickyHeader = showBackLink || hasContainerHeading;
+  const headerRef = useRef(null);
+  const revealEnabled = revealHeadingOnScrollUp && !stickyHeadingOnMobile;
+  const {
+    state: revealState,
+    animate: animateReveal,
+    reveal
+  } = useRevealOnScrollUp(headerRef, {
+    enabled: revealEnabled,
+    mediaQuery: MOBILE_MEDIA_QUERY
+  });
   const backLabel = goBackLinkData?.label ?? "Back";
   const backHref = goBackLinkData?.href;
   const LinkComponent = goBackLinkData?.linkComponent;
@@ -69480,7 +69937,7 @@ function PageContainer({
         !noGutters && "mt-[72px]",
         maxWidth != null && maxWidthClasses2[maxWidth],
         "mx-auto",
-        "p-6",
+        "p-3 md:p-6",
         className
       ),
       children: /* @__PURE__ */ jsxs(
@@ -69494,10 +69951,17 @@ function PageContainer({
             showStickyHeader && /* @__PURE__ */ jsxs(
               "div",
               {
+                ref: headerRef,
+                onFocus: reveal,
                 className: cn(
                   "flex flex-col gap-2",
-                  "sticky top-0 z-11 bg-background/75 backdrop-blur-xs",
-                  elevateHeading && "shadow-md shadow-accent/30"
+                  headerPinningClasses({
+                    stickyHeadingOnMobile,
+                    elevateHeading,
+                    revealEnabled,
+                    revealState,
+                    animateReveal
+                  })
                 ),
                 children: [
                   showBackLink && /* @__PURE__ */ jsx("div", { className: cn(goBackLinkData?.className), children: /* @__PURE__ */ jsx(
@@ -69514,14 +69978,14 @@ function PageContainer({
                       children: backLabel
                     }
                   ) }),
-                  hasContainerHeading && /* @__PURE__ */ jsxs("div", { className: "flex min-h-[2.25rem] w-full items-center gap-3", children: [
+                  hasContainerHeading && // Wraps so wide actions drop under the heading instead of squeezing it.
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-h-[2.25rem] w-full flex-wrap items-center gap-3", children: [
                     heading != null && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: headingTitleClasses, children: heading }) : /* @__PURE__ */ jsx("div", { className: headingContentClasses, children: heading })),
                     actions != null && /* @__PURE__ */ jsx(
                       "div",
                       {
                         className: cn(
-                          "w-auto shrink-0",
-                          heading == null && "ml-auto"
+                          "ml-auto w-auto max-w-full shrink-0"
                         ),
                         children: actions
                       }
@@ -69601,4 +70065,4 @@ lottie-react/build/index.es.js:
   (*! goToAndStop must be relative to the start of the current segment *)
 */
 
-export { Accordion3 as Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel2 as Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox2 as Checkbox, CircularProgress, Code, CodeEditor, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog2 as Dialog, DialogClose2 as DialogClose, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter2 as DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger2 as DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard2 as PreviewCard, PreviewCardBackdrop2 as PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger2 as PreviewCardTrigger, ProgressBar, ROLLING_PRESET_IDS, RadioGroup3 as RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch2 as Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsContents2 as TabsContents, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup2 as ToggleGroup, ToggleGroupItem2 as ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, no_data_card_default, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };
+export { Accordion3 as Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel2 as Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox2 as Checkbox, CircularProgress, Code, CodeEditor, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DataTableRowActions, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog2 as Dialog, DialogClose2 as DialogClose, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter2 as DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger2 as DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, FiltersBar, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard2 as PreviewCard, PreviewCardBackdrop2 as PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger2 as PreviewCardTrigger, ProgressBar, ROLLING_PRESET_IDS, RadioGroup3 as RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch2 as Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsContents2 as TabsContents, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup2 as ToggleGroup, ToggleGroupItem2 as ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, no_data_card_default, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };