@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-WUTHROII.js

@@ -0,0 +1,175 @@
+import {
+  dimmedStyles,
+  regionAttrs,
+  transitionSettings,
+  triggerStyles
+} from "./chunk-TVL5V2JK.js";
+
+// src/components/layout/Collapsible/Collapsible.tsx
+import Box from "@mui/material/Box/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var useMeasuredHeight = (open, maxHeight, children) => {
+  const contentRef = useRef(null);
+  const [height, setHeight] = useState("auto");
+  const measureHeight = useCallback(() => {
+    if (contentRef.current) {
+      const scrollHeight = contentRef.current.scrollHeight;
+      setHeight(maxHeight ? Math.min(scrollHeight, maxHeight) : scrollHeight);
+    }
+  }, [maxHeight]);
+  useEffect(() => {
+    if (!open) {
+      setHeight(0);
+    } else if (contentRef.current) {
+      measureHeight();
+    }
+  }, [open, measureHeight, children]);
+  return { contentRef, height };
+};
+var DefaultCollapsible = ({
+  children,
+  open,
+  duration,
+  disabled,
+  keepMounted,
+  maxHeight,
+  sx,
+  className,
+  dataTestId,
+  transition: _transition,
+  easing: _easing,
+  ...otherProps
+}) => /* @__PURE__ */ jsx(
+  Collapse,
+  {
+    in: open && !disabled,
+    timeout: disabled ? 0 : duration,
+    sx: {
+      ...dimmedStyles(disabled),
+      ...maxHeight && { maxHeight, overflow: "hidden" },
+      ...sx
+    },
+    className,
+    unmountOnExit: !keepMounted,
+    ...regionAttrs({ open, disabled, dataTestId }),
+    ...otherProps,
+    children: /* @__PURE__ */ jsx(Box, { children })
+  }
+);
+var AnimatedCollapsible = ({
+  children,
+  open,
+  disabled,
+  keepMounted,
+  maxHeight,
+  transition,
+  sx,
+  className,
+  dataTestId,
+  duration: _duration,
+  easing: _easing,
+  ...otherProps
+}) => {
+  const { contentRef, height } = useMeasuredHeight(open, maxHeight, children);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "div",
+      sx: {
+        overflow: "hidden",
+        height: open && !disabled ? height : 0,
+        transition: disabled ? "none" : `height ${transition.duration}ms ${transition.easing}`,
+        willChange: disabled ? "auto" : "height",
+        ...dimmedStyles(disabled),
+        ...sx
+      },
+      className,
+      ...regionAttrs({ open, disabled, dataTestId }),
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(Box, { ref: contentRef, children: (keepMounted || open && !disabled) && children })
+    }
+  );
+};
+var Collapsible = ({
+  variant = "default",
+  duration = 300,
+  easing,
+  onToggle,
+  disabled = false,
+  keepMounted = false,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const { open } = rest;
+  useEffect(() => {
+    if (onToggle && !disabled) {
+      onToggle(open);
+    }
+  }, [open, onToggle, disabled]);
+  const variantProps = {
+    ...rest,
+    duration,
+    easing,
+    disabled,
+    keepMounted,
+    transition: transitionSettings(theme, variant, duration, easing)
+  };
+  return variant === "default" ? /* @__PURE__ */ jsx(DefaultCollapsible, { ...variantProps }) : /* @__PURE__ */ jsx(AnimatedCollapsible, { ...variantProps });
+};
+var CollapsibleTrigger = ({
+  children,
+  onClick,
+  disabled = false,
+  expanded = false,
+  className,
+  dataTestId,
+  ...otherProps
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "button",
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      className,
+      "data-testid": dataTestId,
+      "aria-expanded": expanded,
+      "aria-disabled": disabled,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "data-state": expanded ? "open" : "closed",
+      sx: triggerStyles(theme, { disabled, expanded }),
+      ...otherProps,
+      children
+    }
+  );
+};
+var CollapsibleContent = ({
+  children,
+  className,
+  ...otherProps
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      sx: {
+        padding: theme.spacing(2)
+      },
+      ...otherProps,
+      children
+    }
+  );
+};
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent
+};
+//# sourceMappingURL=chunk-WUTHROII.js.map

package/dist/chunk-WUTHROII.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Collapsible/Collapsible.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React, { useCallback,useEffect, useRef, useState } from 'react';\n\nimport {\n  dimmedStyles,\n  regionAttrs,\n  transitionSettings,\n  triggerStyles,\n} from './Collapsible.helpers';\nimport type { CollapsibleContentProps,CollapsibleProps, CollapsibleTriggerProps } from './Collapsible.types';\n\n/**\n * The smooth and spring variants animate an explicit pixel height, so the content\n * has to be measured after every render that could have changed it.\n */\nconst useMeasuredHeight = (\n  open: boolean,\n  maxHeight: number | undefined,\n  children: React.ReactNode,\n) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState<number | 'auto'>('auto');\n\n  const measureHeight = useCallback(() => {\n    if (contentRef.current) {\n      const scrollHeight = contentRef.current.scrollHeight;\n      // Cap at maxHeight if provided\n      setHeight(maxHeight ? Math.min(scrollHeight, maxHeight) : scrollHeight);\n    }\n  }, [maxHeight]);\n\n  useEffect(() => {\n    if (!open) {\n      setHeight(0);\n    } else if (contentRef.current) {\n      measureHeight();\n    }\n  }, [open, measureHeight, children]);\n\n  return { contentRef, height };\n};\n\ntype VariantProps = Omit<CollapsibleProps, 'variant' | 'onToggle'> & {\n  duration: number;\n  disabled: boolean;\n  keepMounted: boolean;\n  transition: { duration: number; easing: string };\n};\n\n// Use MUI's built-in Collapse for the default variant.\nconst DefaultCollapsible: React.FC<VariantProps> = ({\n  children,\n  open,\n  duration,\n  disabled,\n  keepMounted,\n  maxHeight,\n  sx,\n  className,\n  dataTestId,\n  transition: _transition,\n  easing: _easing,\n  ...otherProps\n}) => (\n  <Collapse\n    in={open && !disabled}\n    timeout={disabled ? 0 : duration}\n    sx={{\n      ...dimmedStyles(disabled),\n      ...(maxHeight && { maxHeight, overflow: 'hidden' }),\n      ...sx,\n    }}\n    className={className}\n    unmountOnExit={!keepMounted}\n    {...regionAttrs({ open, disabled, dataTestId })}\n    {...otherProps}\n  >\n    <Box>{children}</Box>\n  </Collapse>\n);\n\nconst AnimatedCollapsible: React.FC<VariantProps> = ({\n  children,\n  open,\n  disabled,\n  keepMounted,\n  maxHeight,\n  transition,\n  sx,\n  className,\n  dataTestId,\n  duration: _duration,\n  easing: _easing,\n  ...otherProps\n}) => {\n  const { contentRef, height } = useMeasuredHeight(open, maxHeight, children);\n\n  return (\n    <Box\n      component=\"div\"\n      sx={{\n        overflow: 'hidden',\n        height: open && !disabled ? height : 0,\n        transition: disabled ? 'none' : `height ${transition.duration}ms ${transition.easing}`,\n        willChange: disabled ? 'auto' : 'height',\n        ...dimmedStyles(disabled),\n        ...sx,\n      }}\n      className={className}\n      {...regionAttrs({ open, disabled, dataTestId })}\n      {...otherProps}\n    >\n      <Box ref={contentRef}>{(keepMounted || (open && !disabled)) && children}</Box>\n    </Box>\n  );\n};\n\nexport const Collapsible: React.FC<CollapsibleProps> = ({\n  variant = 'default',\n  duration = 300,\n  easing,\n  onToggle,\n  disabled = false,\n  keepMounted = false,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const { open } = rest;\n\n  // Trigger onToggle callback when open state changes\n  useEffect(() => {\n    if (onToggle && !disabled) {\n      onToggle(open);\n    }\n  }, [open, onToggle, disabled]);\n\n  const variantProps: VariantProps = {\n    ...rest,\n    duration,\n    easing,\n    disabled,\n    keepMounted,\n    transition: transitionSettings(theme, variant, duration, easing),\n  };\n\n  return variant === 'default' ? (\n    <DefaultCollapsible {...variantProps} />\n  ) : (\n    <AnimatedCollapsible {...variantProps} />\n  );\n};\n\nexport const CollapsibleTrigger: React.FC<CollapsibleTriggerProps> = ({\n  children,\n  onClick,\n  disabled = false,\n  expanded = false,\n  className,\n  dataTestId,\n  ...otherProps\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      component=\"button\"\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      className={className}\n      data-testid={dataTestId}\n      aria-expanded={expanded}\n      aria-disabled={disabled}\n      role=\"button\"\n      tabIndex={disabled ? -1 : 0}\n      data-state={expanded ? 'open' : 'closed'}\n      sx={triggerStyles(theme, { disabled, expanded })}\n      {...otherProps}\n    >\n      {children}\n    </Box>\n  );\n};\n\nexport const CollapsibleContent: React.FC<CollapsibleContentProps> = ({\n  children,\n  className,\n  ...otherProps\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      className={className}\n      sx={{\n        padding: theme.spacing(2),\n      }}\n      {...otherProps}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-WVML3ENZ.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-WVML3ENZ.js.map

package/dist/chunk-WVML3ENZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-WXD7MGBT.js

@@ -0,0 +1,100 @@
+// src/components/layout/ContentToolbar/ViewSelector.tsx
+import CheckIcon from "@mui/icons-material/Check";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import GridIcon from "@mui/icons-material/GridViewOutlined";
+import ListIcon from "@mui/icons-material/FormatListBulletedRounded";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Slider from "@mui/material/Slider/index.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VIEW_OPTIONS = [
+  { value: "grid", label: "Grid View", icon: GridIcon },
+  { value: "list", label: "List View", icon: ListIcon }
+];
+function ViewSelector({
+  viewMode,
+  onViewModeChange,
+  zoom,
+  onZoomChange,
+  cardSizeLabel
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0];
+  const ActiveIcon = activeOption.icon;
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+    viewMode === "grid" && /* @__PURE__ */ jsx(Box, { sx: { width: 96, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+      Slider,
+      {
+        "data-testid": "resize-card-slider",
+        "aria-label": cardSizeLabel,
+        value: zoom[0] ?? 0,
+        onChange: (_, value) => onZoomChange([value]),
+        min: 0,
+        max: 100,
+        step: 1,
+        size: "small"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "data-testid": "view-mode-btn",
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        "aria-label": activeOption.label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: { minWidth: 0, height: 32, px: 1, gap: 1, color: "text.secondary" },
+        children: [
+          /* @__PURE__ */ jsx(ActiveIcon, { sx: { fontSize: 16 } }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: 14 } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl,
+        open,
+        onClose: () => setAnchorEl(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { minWidth: 180 } } },
+        children: VIEW_OPTIONS.map((option) => {
+          const OptionIcon = option.icon;
+          const selected = viewMode === option.value;
+          return /* @__PURE__ */ jsxs(
+            MenuItem,
+            {
+              "data-testid": `view-mode-${option.value}`,
+              onClick: () => {
+                onViewModeChange(option.value);
+                setAnchorEl(null);
+              },
+              sx: { gap: 1.5 },
+              children: [
+                /* @__PURE__ */ jsx(ListItemText, { children: option.label }),
+                /* @__PURE__ */ jsx(OptionIcon, { sx: { fontSize: 16, color: "text.secondary" } }),
+                /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: "auto !important" }, children: /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: 16, color: selected ? "text.primary" : "transparent" } }) })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    )
+  ] });
+}
+
+export {
+  ViewSelector
+};
+//# sourceMappingURL=chunk-WXD7MGBT.js.map

package/dist/chunk-WXD7MGBT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/ViewSelector.tsx"],"sourcesContent":["'use client';\n\nimport CheckIcon from '@mui/icons-material/Check';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport GridIcon from '@mui/icons-material/GridViewOutlined';\nimport ListIcon from '@mui/icons-material/FormatListBulletedRounded';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Slider from '@mui/material/Slider/index.js';\n// `SvgIconComponent` is declared inline in @mui/icons-material's barrel and has\n// no module of its own, so the deep-import equivalent is its own definition:\n// `type SvgIconComponent = typeof SvgIcon`.\nimport type SvgIcon from '@mui/material/SvgIcon/index.js';\nimport React, { useState } from 'react';\n\nimport type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';\n\nconst VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [\n  { value: 'grid', label: 'Grid View', icon: GridIcon },\n  { value: 'list', label: 'List View', icon: ListIcon },\n];\n\n/**\n * View selector: a grid/list dropdown plus a card-size zoom slider (grid mode\n * only). Faithful MUI port of the reference toolbar's view control.\n */\nexport function ViewSelector({\n  viewMode,\n  onViewModeChange,\n  zoom,\n  onZoomChange,\n  cardSizeLabel,\n}: ViewSelectorProps): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0]!;\n  const ActiveIcon = activeOption.icon;\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>\n      {viewMode === 'grid' && (\n        <Box sx={{ width: 96, display: 'flex', alignItems: 'center' }}>\n          <Slider\n            data-testid=\"resize-card-slider\"\n            aria-label={cardSizeLabel}\n            value={zoom[0] ?? 0}\n            onChange={(_, value) => onZoomChange([value as number])}\n            min={0}\n            max={100}\n            step={1}\n            size=\"small\"\n          />\n        </Box>\n      )}\n\n      <Button\n        data-testid=\"view-mode-btn\"\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        aria-label={activeOption.label}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{ minWidth: 0, height: 32, px: 1, gap: 1, color: 'text.secondary' }}\n      >\n        <ActiveIcon sx={{ fontSize: 16 }} />\n        <ChevronDownIcon sx={{ fontSize: 14 }} />\n      </Button>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={() => setAnchorEl(null)}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{ paper: { sx: { minWidth: 180 } } }}\n      >\n        {VIEW_OPTIONS.map((option) => {\n          const OptionIcon = option.icon;\n          const selected = viewMode === option.value;\n          return (\n            <MenuItem\n              key={option.value}\n              data-testid={`view-mode-${option.value}`}\n              onClick={() => {\n                onViewModeChange(option.value);\n                setAnchorEl(null);\n              }}\n              sx={{ gap: 1.5 }}\n            >\n              <ListItemText>{option.label}</ListItemText>\n              <OptionIcon sx={{ fontSize: 16, color: 'text.secondary' }} />\n              <ListItemIcon sx={{ minWidth: 'auto !important' }}>\n                <CheckIcon sx={{ fontSize: 16, color: selected ? 'text.primary' : 'transparent' }} />\n              </ListItemIcon>\n            </MenuItem>\n          );\n        })}\n      </Menu>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-WXVHZHSJ.js

@@ -0,0 +1,165 @@
+import {
+  Sheet
+} from "./chunk-7EGHRNIA.js";
+import {
+  Dialog
+} from "./chunk-S5LE2ARG.js";
+import {
+  Button
+} from "./chunk-6HLRXICF.js";
+import {
+  accentFor
+} from "./chunk-I6PZVHIT.js";
+
+// src/components/navigation/AppHeader/AppHeader.details.tsx
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIALOG_WIDTH = 460;
+var XXS_MAX_WIDTH = 360;
+function sheetHeight(xxs) {
+  return { height: "auto", maxHeight: xxs ? "100dvh" : "90dvh" };
+}
+function usesSheet(presentation, compact) {
+  if (presentation === "sheet") return true;
+  if (presentation === "dialog") return false;
+  return compact;
+}
+var DetailRow = ({
+  row,
+  last,
+  dataTestId
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${dataTestId}-row`,
+      "data-row": row.id ?? row.label,
+      sx: {
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 2,
+        py: 1.5,
+        borderBottom: last ? "none" : `1px solid ${theme.palette.divider}`
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", component: "span", sx: { flex: "0 0 auto" }, children: row.label }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body1",
+            component: "span",
+            sx: {
+              minWidth: 0,
+              textAlign: "right",
+              fontWeight: row.tone ? 700 : 500,
+              color: row.tone ? accentFor(theme, row.tone).main : "text.primary",
+              // Newlines in a value are meaningful — an address is two lines.
+              whiteSpace: "pre-line"
+            },
+            children: row.value
+          }
+        )
+      ]
+    }
+  );
+};
+var DetailsBody = ({ rows, children, dataTestId }) => /* @__PURE__ */ jsxs(Box, { "data-testid": `${dataTestId}-body`, children: [
+  (rows ?? []).map((row, index) => /* @__PURE__ */ jsx(
+    DetailRow,
+    {
+      row,
+      last: index === (rows?.length ?? 0) - 1 && !children,
+      dataTestId
+    },
+    row.id ?? row.label
+  )),
+  children
+] });
+var DetailsAction = ({ action, dataTestId, padded = false }) => action ? /* @__PURE__ */ jsx(Box, { sx: padded ? { pt: 2 } : void 0, children: /* @__PURE__ */ jsx(
+  Button,
+  {
+    variant: "solid",
+    color: action.color ?? "primary",
+    size: "lg",
+    fullWidth: true,
+    disabled: action.disabled,
+    onClick: action.onClick,
+    dataTestId: action.dataTestId ?? `${dataTestId}-action`,
+    children: action.label
+  }
+) }) : null;
+var AppHeaderDetails = ({
+  open,
+  onClose,
+  title,
+  subtitle,
+  rows,
+  children,
+  action,
+  presentation = "auto",
+  breakpoint = "sm",
+  className,
+  dataTestId = "app-header-details"
+}) => {
+  const theme = useTheme();
+  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));
+  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);
+  const description = typeof subtitle === "string" ? subtitle : void 0;
+  const richSubtitle = description === void 0 ? subtitle : null;
+  const body = /* @__PURE__ */ jsx(DetailsBody, { rows, dataTestId, children });
+  const footer = /* @__PURE__ */ jsx(DetailsAction, { action, dataTestId });
+  if (asSheet) {
+    return /* @__PURE__ */ jsxs(
+      Sheet,
+      {
+        open,
+        onClose,
+        onOpenChange: (next) => !next && onClose(),
+        position: "bottom",
+        size: "md",
+        style: sheetHeight(xxs),
+        className,
+        title,
+        description,
+        showCloseButton: true,
+        rounded: true,
+        footer,
+        dataTestId,
+        children: [
+          richSubtitle,
+          body
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      title,
+      description,
+      showCloseButton: true,
+      fullWidth: true,
+      className,
+      dataTestId,
+      PaperProps: { sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } },
+      children: [
+        richSubtitle,
+        body,
+        /* @__PURE__ */ jsx(DetailsAction, { action, dataTestId, padded: true })
+      ]
+    }
+  );
+};
+AppHeaderDetails.displayName = "AppHeaderDetails";
+
+export {
+  AppHeaderDetails
+};
+//# sourceMappingURL=chunk-WXVHZHSJ.js.map

package/dist/chunk-WXVHZHSJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.details.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\nimport React from 'react';\n\nimport { accentFor } from '../../../tokens/scales';\nimport { Sheet } from '../../data-display/Sheet/Sheet';\nimport { Button } from '../../form/Button/Button';\nimport { Dialog } from '../../feedback/Dialog/Dialog';\n\nimport type {\n  AppHeaderDetailRow,\n  AppHeaderDetailsAction,\n  AppHeaderDetailsProps,\n} from './AppHeader.types';\n\n/** How wide the dialog presentation grows before it stops. */\nconst DIALOG_WIDTH = 460;\n\n/**\n * Where the smallest phones stop. The theme's scale starts at `xs`/`sm`, so\n * there is no `xxs` breakpoint to ask for — this is that boundary, named once\n * rather than inlined at the place it decides something.\n */\nconst XXS_MAX_WIDTH = 360;\n\n/**\n * The sheet grows to its content and stops at the viewport; it does not take a\n * fixed slab of height.\n *\n * `Sheet`'s vertical presets are absolute (`md` is 400px), which on a phone is\n * shorter than six detail rows plus a button — so the panel scrolled INSIDE a\n * screen that had room to spare, putting the address and the way out below the\n * fold of a sheet using two thirds of the display. `height: auto` sizes it to\n * what is in it, and the cap keeps a long panel on-screen: 100dvh on the\n * smallest phones where every pixel counts, 90dvh above that so the panel still\n * reads as a sheet over a page rather than as a new screen.\n *\n * `dvh` and not `vh` — mobile browser chrome makes `vh` overshoot, which would\n * reintroduce exactly the scroll this removes.\n */\nfunction sheetHeight(xxs: boolean): { height: string; maxHeight: string } {\n  return { height: 'auto', maxHeight: xxs ? '100dvh' : '90dvh' };\n}\n\n/** Which surface this viewport calls for. Lifted out to keep the component lean. */\nfunction usesSheet(presentation: AppHeaderDetailsProps['presentation'], compact: boolean): boolean {\n  if (presentation === 'sheet') return true;\n  if (presentation === 'dialog') return false;\n  return compact;\n}\n\n/** One label/value line. The value may wrap to two lines; the label may not. */\nconst DetailRow: React.FC<{ row: AppHeaderDetailRow; last: boolean; dataTestId: string }> = ({\n  row,\n  last,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n  return (\n    <Box\n      data-testid={`${dataTestId}-row`}\n      data-row={row.id ?? row.label}\n      sx={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        justifyContent: 'space-between',\n        gap: 2,\n        py: 1.5,\n        borderBottom: last ? 'none' : `1px solid ${theme.palette.divider}`,\n      }}\n    >\n      <Typography variant=\"body1\" color=\"text.secondary\" component=\"span\" sx={{ flex: '0 0 auto' }}>\n        {row.label}\n      </Typography>\n      <Typography\n        variant=\"body1\"\n        component=\"span\"\n        sx={{\n          minWidth: 0,\n          textAlign: 'right',\n          fontWeight: row.tone ? 700 : 500,\n          color: row.tone ? accentFor(theme, row.tone).main : 'text.primary',\n          // Newlines in a value are meaningful — an address is two lines.\n          whiteSpace: 'pre-line',\n        }}\n      >\n        {row.value}\n      </Typography>\n    </Box>\n  );\n};\n\n/** The rows plus whatever the caller put under them. */\nconst DetailsBody: React.FC<\n  Pick<AppHeaderDetailsProps, 'rows' | 'children'> & { dataTestId: string }\n> = ({ rows, children, dataTestId }) => (\n  <Box data-testid={`${dataTestId}-body`}>\n    {(rows ?? []).map((row, index) => (\n      <DetailRow\n        key={row.id ?? row.label}\n        row={row}\n        last={index === (rows?.length ?? 0) - 1 && !children}\n        dataTestId={dataTestId}\n      />\n    ))}\n    {children}\n  </Box>\n);\n\n/**\n * The single full-width call to action, or nothing.\n *\n * `padded` is for the dialog, which has no footer slot of its own — and the\n * padding lives here rather than at the call site so an action-less panel does\n * not end in a strip of empty space.\n */\nconst DetailsAction: React.FC<{\n  action?: AppHeaderDetailsAction;\n  dataTestId: string;\n  padded?: boolean;\n}> = ({ action, dataTestId, padded = false }) =>\n  action ? (\n    <Box sx={padded ? { pt: 2 } : undefined}>\n      <Button\n        variant=\"solid\"\n        color={action.color ?? 'primary'}\n        size=\"lg\"\n        fullWidth\n        disabled={action.disabled}\n        onClick={action.onClick}\n        dataTestId={action.dataTestId ?? `${dataTestId}-action`}\n      >\n        {action.label}\n      </Button>\n    </Box>\n  ) : null;\n\n/**\n * The panel behind the header's disclosure — the hours, the address, the way\n * out — in the shape the viewport calls for.\n *\n * ONE component with two presentations, because they are one thing to the user\n * and one thing to the caller: a bottom sheet within reach of a thumb, a centred\n * dialog under a pointer. `auto` picks by viewport, so nobody writes that branch\n * at a call site and nobody ships a phone-shaped sheet stretched across a\n * desktop. Force either one with `presentation` when the surrounding layout\n * already decides (a preview frame, a story, a kiosk).\n */\nexport const AppHeaderDetails: React.FC<AppHeaderDetailsProps> = ({\n  open,\n  onClose,\n  title,\n  subtitle,\n  rows,\n  children,\n  action,\n  presentation = 'auto',\n  breakpoint = 'sm',\n  className,\n  dataTestId = 'app-header-details',\n}) => {\n  const theme = useTheme();\n  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));\n  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);\n\n  // Split once, not per branch: a STRING subtitle is the panel's own\n  // `description` (both surfaces style it as part of their header), anything\n  // richer is a node we render ourselves above the rows.\n  const description = typeof subtitle === 'string' ? subtitle : undefined;\n  const richSubtitle = description === undefined ? subtitle : null;\n\n  const body = (\n    <DetailsBody rows={rows} dataTestId={dataTestId}>\n      {children}\n    </DetailsBody>\n  );\n  const footer = <DetailsAction action={action} dataTestId={dataTestId} />;\n\n  if (asSheet) {\n    // No `showHandle`. The grab bar promises a drag this panel does not answer:\n    // its height is its content's, so there is no second position to drag it\n    // to, and the handle sat above a ✕ that already closes it. Swipe-to-dismiss\n    // is `Sheet`'s default and still works — it just stops being advertised by\n    // a control that looked resizable and was not.\n    return (\n      <Sheet\n        open={open}\n        onClose={onClose}\n        onOpenChange={(next) => !next && onClose()}\n        position=\"bottom\"\n        size=\"md\"\n        style={sheetHeight(xxs)}\n        className={className}\n        title={title}\n        description={description}\n        showCloseButton\n        rounded\n        footer={footer}\n        dataTestId={dataTestId}\n      >\n        {richSubtitle}\n        {body}\n      </Sheet>\n    );\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onClose={onClose}\n      title={title}\n      description={description}\n      showCloseButton\n      fullWidth\n      className={className}\n      dataTestId={dataTestId}\n      PaperProps={{ sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } }}\n    >\n      {richSubtitle}\n      {body}\n      <DetailsAction action={action} dataTestId={dataTestId} padded />\n    </Dialog>\n  );\n};\n\nAppHeaderDetails.displayName = 'AppHeaderDetails';\n"],"mappings":"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","names":[]}

package/dist/chunk-WXYLH3QZ.js

@@ -0,0 +1,60 @@
+// src/components/utility/InstallPrompt/InstallPrompt.helpers.ts
+var DEFAULT_STORAGE_KEY = "pwa-install-dismissed";
+var DEFAULT_DISMISS_DAYS = 30;
+var MS_PER_DAY = 864e5;
+var STANDALONE_QUERY = "(display-mode: standalone)";
+var hasWindow = () => typeof window !== "undefined";
+var isStandaloneDisplay = () => {
+  if (!hasWindow()) return false;
+  if (window.navigator.standalone === true) return true;
+  return window.matchMedia?.(STANDALONE_QUERY).matches === true;
+};
+var isIosSafariAgent = (userAgent, maxTouchPoints) => {
+  const isIosDevice = /iPad|iPhone|iPod/.test(userAgent) || userAgent.includes("Macintosh") && maxTouchPoints > 1;
+  if (!isIosDevice) return false;
+  return !/CriOS|FxiOS|EdgiOS|OPiOS/.test(userAgent);
+};
+var isIosSafari = () => {
+  if (!hasWindow()) return false;
+  const { userAgent, maxTouchPoints } = window.navigator;
+  return isIosSafariAgent(userAgent, maxTouchPoints);
+};
+var readDismissedAt = (storageKey) => {
+  if (!hasWindow()) return null;
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return null;
+    const parsed = Number.parseInt(raw, 10);
+    return Number.isFinite(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+};
+var writeDismissedAt = (storageKey, at) => {
+  if (!hasWindow()) return;
+  try {
+    window.localStorage.setItem(storageKey, String(at));
+  } catch {
+  }
+};
+var isDismissalActive = (dismissedAt, dismissForDays, now) => {
+  if (dismissedAt === null) return false;
+  if (dismissForDays <= 0) return true;
+  return now - dismissedAt < dismissForDays * MS_PER_DAY;
+};
+var resolveInstallPlatform = (hasDeferredPrompt) => {
+  if (hasDeferredPrompt) return "prompt";
+  return isIosSafari() ? "ios" : "unsupported";
+};
+
+export {
+  DEFAULT_STORAGE_KEY,
+  DEFAULT_DISMISS_DAYS,
+  isStandaloneDisplay,
+  isIosSafariAgent,
+  readDismissedAt,
+  writeDismissedAt,
+  isDismissalActive,
+  resolveInstallPlatform
+};
+//# sourceMappingURL=chunk-WXYLH3QZ.js.map

package/dist/chunk-WXYLH3QZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/InstallPrompt/InstallPrompt.helpers.ts"],"sourcesContent":["import type { InstallPlatform } from './InstallPrompt.types';\n\n/**\n * Pure environment probes and dismissal storage for `usePwaInstall`.\n *\n * Everything here is a plain function taking its clock and its storage from the\n * caller where that matters, so the hook's behaviour is testable without\n * faking timers or a browser.\n */\n\nexport const DEFAULT_STORAGE_KEY = 'pwa-install-dismissed';\nexport const DEFAULT_DISMISS_DAYS = 30;\n\nconst MS_PER_DAY = 86_400_000;\nconst STANDALONE_QUERY = '(display-mode: standalone)';\n\n/** iOS Safari predates `display-mode` and exposes this instead. */\ninterface IosNavigator extends Navigator {\n  standalone?: boolean;\n}\n\n/** Guard for SSR and for jsdom runs where `matchMedia` is not implemented. */\nconst hasWindow = (): boolean => typeof window !== 'undefined';\n\n/**\n * True when the page is already running as an installed app.\n *\n * Both checks are needed: `display-mode: standalone` is the standard signal,\n * but iOS never implemented it for home-screen launches and reports\n * `navigator.standalone` instead. Miss the iOS branch and the installed app\n * nags its own users to install it again.\n */\nexport const isStandaloneDisplay = (): boolean => {\n  if (!hasWindow()) return false;\n  if ((window.navigator as IosNavigator).standalone === true) return true;\n  return window.matchMedia?.(STANDALONE_QUERY).matches === true;\n};\n\n/**\n * True for Safari on iOS/iPadOS — the one browser that can install but cannot\n * be asked programmatically.\n *\n * Two traps handled here. iPadOS 13+ reports a Macintosh user agent, so the\n * touch-point count is what separates an iPad from a desktop; and Chrome,\n * Firefox and Edge on iOS are Safari underneath but offer no Add to Home\n * Screen at all, so telling their users to tap Share is a dead end.\n *\n * Kept parameterised so the agent table can be tested without reassigning\n * `navigator`, which leaks across test files when it is not restored.\n */\nexport const isIosSafariAgent = (userAgent: string, maxTouchPoints: number): boolean => {\n  const isIosDevice =\n    /iPad|iPhone|iPod/.test(userAgent) ||\n    (userAgent.includes('Macintosh') && maxTouchPoints > 1);\n\n  if (!isIosDevice) return false;\n\n  return !/CriOS|FxiOS|EdgiOS|OPiOS/.test(userAgent);\n};\n\n/** `isIosSafariAgent` against the live browser. Internal — callers use `resolveInstallPlatform`. */\nconst isIosSafari = (): boolean => {\n  if (!hasWindow()) return false;\n\n  const { userAgent, maxTouchPoints } = window.navigator;\n  return isIosSafariAgent(userAgent, maxTouchPoints);\n};\n\n/**\n * Reads the stored dismissal timestamp.\n *\n * Storage access is wrapped because it THROWS rather than returning null in\n * Safari private mode and wherever cookies are blocked — an uncaught throw\n * here would take down the storefront on the very browsers this component\n * exists to serve.\n */\nexport const readDismissedAt = (storageKey: string): number | null => {\n  if (!hasWindow()) return null;\n\n  try {\n    const raw = window.localStorage.getItem(storageKey);\n    if (!raw) return null;\n\n    const parsed = Number.parseInt(raw, 10);\n    return Number.isFinite(parsed) ? parsed : null;\n  } catch {\n    return null;\n  }\n};\n\n/** Persists a dismissal. Silently a no-op when storage is unavailable. */\nexport const writeDismissedAt = (storageKey: string, at: number): void => {\n  if (!hasWindow()) return;\n\n  try {\n    window.localStorage.setItem(storageKey, String(at));\n  } catch {\n    // Storage blocked — the dismissal lasts for this page view only.\n  }\n};\n\n/**\n * Whether a stored dismissal still suppresses the prompt.\n *\n * `dismissForDays: 0` means forever. A timestamp in the future (a device whose\n * clock was wound back) is treated as active rather than expired, so a bad\n * clock cannot turn into a prompt on every page view.\n */\nexport const isDismissalActive = (\n  dismissedAt: number | null,\n  dismissForDays: number,\n  now: number,\n): boolean => {\n  if (dismissedAt === null) return false;\n  if (dismissForDays <= 0) return true;\n\n  return now - dismissedAt < dismissForDays * MS_PER_DAY;\n};\n\n/** Resolves which install route this browser offers. */\nexport const resolveInstallPlatform = (hasDeferredPrompt: boolean): InstallPlatform => {\n  if (hasDeferredPrompt) return 'prompt';\n  return isIosSafari() ? 'ios' : 'unsupported';\n};\n"],"mappings":";AAUO,IAAM,sBAAsB;AAC5B,IAAM,uBAAuB;AAEpC,IAAM,aAAa;AACnB,IAAM,mBAAmB;AAQzB,IAAM,YAAY,MAAe,OAAO,WAAW;AAU5C,IAAM,sBAAsB,MAAe;AAChD,MAAI,CAAC,UAAU,EAAG,QAAO;AACzB,MAAK,OAAO,UAA2B,eAAe,KAAM,QAAO;AACnE,SAAO,OAAO,aAAa,gBAAgB,EAAE,YAAY;AAC3D;AAcO,IAAM,mBAAmB,CAAC,WAAmB,mBAAoC;AACtF,QAAM,cACJ,mBAAmB,KAAK,SAAS,KAChC,UAAU,SAAS,WAAW,KAAK,iBAAiB;AAEvD,MAAI,CAAC,YAAa,QAAO;AAEzB,SAAO,CAAC,2BAA2B,KAAK,SAAS;AACnD;AAGA,IAAM,cAAc,MAAe;AACjC,MAAI,CAAC,UAAU,EAAG,QAAO;AAEzB,QAAM,EAAE,WAAW,eAAe,IAAI,OAAO;AAC7C,SAAO,iBAAiB,WAAW,cAAc;AACnD;AAUO,IAAM,kBAAkB,CAAC,eAAsC;AACpE,MAAI,CAAC,UAAU,EAAG,QAAO;AAEzB,MAAI;AACF,UAAM,MAAM,OAAO,aAAa,QAAQ,UAAU;AAClD,QAAI,CAAC,IAAK,QAAO;AAEjB,UAAM,SAAS,OAAO,SAAS,KAAK,EAAE;AACtC,WAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAAA,EAC5C,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAGO,IAAM,mBAAmB,CAAC,YAAoB,OAAqB;AACxE,MAAI,CAAC,UAAU,EAAG;AAElB,MAAI;AACF,WAAO,aAAa,QAAQ,YAAY,OAAO,EAAE,CAAC;AAAA,EACpD,QAAQ;AAAA,EAER;AACF;AASO,IAAM,oBAAoB,CAC/B,aACA,gBACA,QACY;AACZ,MAAI,gBAAgB,KAAM,QAAO;AACjC,MAAI,kBAAkB,EAAG,QAAO;AAEhC,SAAO,MAAM,cAAc,iBAAiB;AAC9C;AAGO,IAAM,yBAAyB,CAAC,sBAAgD;AACrF,MAAI,kBAAmB,QAAO;AAC9B,SAAO,YAAY,IAAI,QAAQ;AACjC;","names":[]}

package/dist/chunk-WZ4RBOFD.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-WZ4RBOFD.js.map

package/dist/chunk-WZ4RBOFD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-X3HL5C6H.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-X3HL5C6H.js.map

package/dist/chunk-X3HL5C6H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-X4GALW6I.js

@@ -0,0 +1,63 @@
+import {
+  LightboxAutoplayButton,
+  LightboxCloseButton,
+  LightboxNavButtons,
+  LightboxZoomControls
+} from "./chunk-EZOVSZ5B.js";
+
+// src/components/data-display/Lightbox/LightboxOverlay.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LightboxOverlay = ({
+  testId,
+  itemCount,
+  currentIndex,
+  showControls,
+  loop,
+  autoplay,
+  canZoom,
+  isAutoPlaying,
+  onClose,
+  onPrev,
+  onNext,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+  onToggleAutoplay
+}) => {
+  const hasMultiple = itemCount > 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(LightboxCloseButton, { testId, onClose }),
+    showControls && hasMultiple && /* @__PURE__ */ jsx(
+      LightboxNavButtons,
+      {
+        testId,
+        atStart: !loop && currentIndex === 0,
+        atEnd: !loop && currentIndex === itemCount - 1,
+        onPrev,
+        onNext
+      }
+    ),
+    canZoom && /* @__PURE__ */ jsx(
+      LightboxZoomControls,
+      {
+        testId,
+        onZoomIn,
+        onZoomOut,
+        onResetZoom
+      }
+    ),
+    autoplay && hasMultiple && /* @__PURE__ */ jsx(
+      LightboxAutoplayButton,
+      {
+        testId,
+        isAutoPlaying,
+        onToggle: onToggleAutoplay
+      }
+    )
+  ] });
+};
+
+export {
+  LightboxOverlay
+};
+//# sourceMappingURL=chunk-X4GALW6I.js.map

package/dist/chunk-X4GALW6I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/LightboxOverlay.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React from 'react';\n\nimport type { LightboxProps } from './Lightbox.types';\nimport {\n  LightboxAutoplayButton,\n  LightboxCloseButton,\n  LightboxNavButtons,\n  LightboxZoomControls,\n} from './LightboxControls';\n\nexport interface LightboxOverlayProps {\n  testId: (suffix: string) => string;\n  itemCount: number;\n  currentIndex: number;\n  showControls: boolean;\n  loop: boolean;\n  autoplay: LightboxProps['autoplay'];\n  canZoom: boolean;\n  isAutoPlaying: boolean;\n  onClose: () => void;\n  onPrev: () => void;\n  onNext: () => void;\n  onZoomIn: () => void;\n  onZoomOut: () => void;\n  onResetZoom: () => void;\n  onToggleAutoplay: () => void;\n}\n\n// Everything that floats above the media: dismiss, step, zoom and slideshow.\nexport const LightboxOverlay: FC<LightboxOverlayProps> = ({\n  testId,\n  itemCount,\n  currentIndex,\n  showControls,\n  loop,\n  autoplay,\n  canZoom,\n  isAutoPlaying,\n  onClose,\n  onPrev,\n  onNext,\n  onZoomIn,\n  onZoomOut,\n  onResetZoom,\n  onToggleAutoplay,\n}) => {\n  const hasMultiple = itemCount > 1;\n\n  return (\n    <>\n      <LightboxCloseButton testId={testId} onClose={onClose} />\n\n      {showControls && hasMultiple && (\n        <LightboxNavButtons\n          testId={testId}\n          // A non-looping gallery runs out of moves at either end.\n          atStart={!loop && currentIndex === 0}\n          atEnd={!loop && currentIndex === itemCount - 1}\n          onPrev={onPrev}\n          onNext={onNext}\n        />\n      )}\n\n      {canZoom && (\n        <LightboxZoomControls\n          testId={testId}\n          onZoomIn={onZoomIn}\n          onZoomOut={onZoomOut}\n          onResetZoom={onResetZoom}\n        />\n      )}\n\n      {autoplay && hasMultiple && (\n        <LightboxAutoplayButton\n          testId={testId}\n          isAutoPlaying={isAutoPlaying}\n          onToggle={onToggleAutoplay}\n        />\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AAkDI,mBACE,KADF;AApBG,IAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,cAAc,YAAY;AAEhC,SACE,iCACE;AAAA,wBAAC,uBAAoB,QAAgB,SAAkB;AAAA,IAEtD,gBAAgB,eACf;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAEA,SAAS,CAAC,QAAQ,iBAAiB;AAAA,QACnC,OAAO,CAAC,QAAQ,iBAAiB,YAAY;AAAA,QAC7C;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAGD,WACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAGD,YAAY,eACX;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,UAAU;AAAA;AAAA,IACZ;AAAA,KAEJ;AAEJ;","names":[]}