@12-apps/ui 6.37.0 → 6.38.0

package/dist/{chunk-TVL5V2JK.js → chunk-GGMB6LJH.js}

@@ -1,3 +1,7 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/layout/Collapsible/Collapsible.helpers.ts
 var transitionSettings = (theme, variant, duration, easing) => {
   if (variant === "spring") {
@@ -38,8 +42,8 @@ var triggerStyles = (theme, { disabled, expanded }) => {
       backgroundColor: disabled ? "transparent" : expanded ? theme.palette.action.selected : theme.palette.action.hover
     },
     "&:focus": {
-      outline: `2px solid ${theme.palette.primary.main}`,
-      outlineOffset: 2
+      outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,
+      outlineOffset: rem(theme, 2)
     },
     "&:active": {
       backgroundColor: disabled ? "transparent" : theme.palette.action.focus
@@ -53,4 +57,4 @@ export {
   dimmedStyles,
   triggerStyles
 };
-//# sourceMappingURL=chunk-TVL5V2JK.js.map
+//# sourceMappingURL=chunk-GGMB6LJH.js.map

package/dist/chunk-GGMB6LJH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Collapsible/Collapsible.helpers.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { rem } from '../../../tokens/relative';\n\nimport type { CollapsibleVariant } from './Collapsible.types';\n\n/**\n * `smooth` and `default` share their timing; only `spring` differs, stretching\n * the duration and overshooting past the target before settling.\n */\nexport const transitionSettings = (\n  theme: Theme,\n  variant: CollapsibleVariant,\n  duration: number,\n  easing?: string,\n): { duration: number; easing: string } => {\n  if (variant === 'spring') {\n    return {\n      duration: duration * 1.2,\n      easing: easing || 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n    };\n  }\n\n  return { duration, easing: easing || theme.transitions.easing.easeInOut };\n};\n\ninterface RegionState {\n  open: boolean;\n  disabled: boolean;\n  dataTestId?: string;\n}\n\n/**\n * Shared by both implementations: a disabled collapsible reads as collapsed to\n * assistive technology whatever its `open` prop says, because it cannot be\n * operated to see the rest.\n */\nexport const regionAttrs = ({ open, disabled, dataTestId }: RegionState) => ({\n  'data-disabled': disabled,\n  'data-testid': dataTestId,\n  role: 'region',\n  'aria-expanded': open && !disabled,\n  'aria-hidden': disabled || !open,\n});\n\nexport const dimmedStyles = (disabled: boolean) => ({\n  opacity: disabled ? 0.6 : 1,\n  pointerEvents: (disabled ? 'none' : 'auto') as 'none' | 'auto',\n});\n\nexport const triggerStyles = (\n  theme: Theme,\n  { disabled, expanded }: { disabled: boolean; expanded: boolean },\n) => {\n  const restingBackground = expanded ? theme.palette.action.selected : 'transparent';\n\n  return {\n    width: '100%',\n    padding: theme.spacing(1, 2),\n    border: 'none',\n    backgroundColor: restingBackground,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    transition: theme.transitions.create(['background-color', 'opacity'], {\n      duration: theme.transitions.duration.short,\n    }),\n    opacity: disabled ? 0.6 : 1,\n    '&:hover': {\n      backgroundColor: disabled\n        ? 'transparent'\n        : expanded\n          ? theme.palette.action.selected\n          : theme.palette.action.hover,\n    },\n    '&:focus': {\n      outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,\n      outlineOffset: rem(theme, 2),\n    },\n    '&:active': {\n      backgroundColor: disabled ? 'transparent' : theme.palette.action.focus,\n    },\n  };\n};\n"],"mappings":";;;;;AAUO,IAAM,qBAAqB,CAChC,OACA,SACA,UACA,WACyC;AACzC,MAAI,YAAY,UAAU;AACxB,WAAO;AAAA,MACL,UAAU,WAAW;AAAA,MACrB,QAAQ,UAAU;AAAA,IACpB;AAAA,EACF;AAEA,SAAO,EAAE,UAAU,QAAQ,UAAU,MAAM,YAAY,OAAO,UAAU;AAC1E;AAaO,IAAM,cAAc,CAAC,EAAE,MAAM,UAAU,WAAW,OAAoB;AAAA,EAC3E,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,MAAM;AAAA,EACN,iBAAiB,QAAQ,CAAC;AAAA,EAC1B,eAAe,YAAY,CAAC;AAC9B;AAEO,IAAM,eAAe,CAAC,cAAuB;AAAA,EAClD,SAAS,WAAW,MAAM;AAAA,EAC1B,eAAgB,WAAW,SAAS;AACtC;AAEO,IAAM,gBAAgB,CAC3B,OACA,EAAE,UAAU,SAAS,MAClB;AACH,QAAM,oBAAoB,WAAW,MAAM,QAAQ,OAAO,WAAW;AAErE,SAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS,MAAM,QAAQ,GAAG,CAAC;AAAA,IAC3B,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,QAAQ,WAAW,gBAAgB;AAAA,IACnC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAY,MAAM,YAAY,OAAO,CAAC,oBAAoB,SAAS,GAAG;AAAA,MACpE,UAAU,MAAM,YAAY,SAAS;AAAA,IACvC,CAAC;AAAA,IACD,SAAS,WAAW,MAAM;AAAA,IAC1B,WAAW;AAAA,MACT,iBAAiB,WACb,gBACA,WACE,MAAM,QAAQ,OAAO,WACrB,MAAM,QAAQ,OAAO;AAAA,IAC7B;AAAA,IACA,WAAW;AAAA,MACT,SAAS,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,MAAM,QAAQ,QAAQ,IAAI;AAAA,MAC7D,eAAe,IAAI,OAAO,CAAC;AAAA,IAC7B;AAAA,IACA,YAAY;AAAA,MACV,iBAAiB,WAAW,gBAAgB,MAAM,QAAQ,OAAO;AAAA,IACnE;AAAA,EACF;AACF;","names":[]}

package/dist/{chunk-AYLEZM6T.js → chunk-GLFTIGOF.js}

@@ -1,7 +1,7 @@
 import {
   MoreGroup,
   fieldClearing
-} from "./chunk-7EIOXZWL.js";
+} from "./chunk-74P3YX7R.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -13,7 +13,7 @@ import {
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   rem,
   sxRem
@@ -184,4 +184,4 @@ function MoreFilters({
 export {
   MoreFilters
 };
-//# sourceMappingURL=chunk-AYLEZM6T.js.map
+//# sourceMappingURL=chunk-GLFTIGOF.js.map

package/dist/{chunk-7UZ2TFIK.js → chunk-GNCSDUGY.js}

@@ -1,8 +1,12 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/navigation/Tabs/TabsPanel.tsx
 import Box from "@mui/material/Box/index.js";
 import CircularProgress from "@mui/material/CircularProgress/index.js";
 import Fade from "@mui/material/Fade/index.js";
-import { styled } from "@mui/material/styles/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
 import { jsx } from "react/jsx-runtime";
 var TabPanel = styled(Box, {
   shouldForwardProp: (prop) => !["animate", "persist"].includes(prop)
@@ -21,12 +25,16 @@ var LoadingContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  minHeight: 200,
+  minHeight: rem(theme, 200),
   color: theme.palette.text.secondary
 }));
+var PanelSpinner = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 32) });
+};
 var panelContent = (loading, loadingComponent, children) => {
   if (!loading) return children;
-  return loadingComponent || /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(CircularProgress, { size: 32 }) });
+  return loadingComponent || /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(PanelSpinner, {}) });
 };
 var panelTestId = (dataTestId, index) => dataTestId ? `${dataTestId}-panel-${index}` : `tabs-panel-${index}`;
 var CustomTabPanel = ({
@@ -72,4 +80,4 @@ var CustomTabPanel = ({
 export {
   CustomTabPanel
 };
-//# sourceMappingURL=chunk-7UZ2TFIK.js.map
+//# sourceMappingURL=chunk-GNCSDUGY.js.map

package/dist/chunk-GNCSDUGY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Tabs/TabsPanel.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { TabPanelProps } from './Tabs.types';\nimport { rem } from '../../../tokens/relative';\n\nconst TabPanel = styled(Box, {\n  shouldForwardProp: (prop) => !['animate', 'persist'].includes(prop as string),\n})<{ animate?: boolean; persist?: boolean }>(({ animate, persist }) => ({\n  width: '100%',\n\n  ...(animate && {\n    transition: 'all 0.3s ease-in-out',\n  }),\n\n  ...(persist && {\n    '&[hidden]': {\n      display: 'none !important',\n    },\n  }),\n}));\n\nconst LoadingContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: rem(theme, 200),\n  color: theme.palette.text.secondary,\n}));\n\n/** The fallback spinner — a component so it can read the theme its size scales with. */\nconst PanelSpinner: React.FC = () => {\n  const theme = useTheme();\n  return <CircularProgress size={rem(theme, 32)} />;\n};\n\n// A loading panel shows the caller's placeholder, or a spinner if there isn't one.\nconst panelContent = (\n  loading: boolean,\n  loadingComponent: React.ReactNode,\n  children: React.ReactNode,\n): React.ReactNode => {\n  if (!loading) return children;\n\n  return (\n    loadingComponent || (\n      <LoadingContainer>\n        <PanelSpinner />\n      </LoadingContainer>\n    )\n  );\n};\n\nconst panelTestId = (dataTestId: string | undefined, index: number): string =>\n  dataTestId ? `${dataTestId}-panel-${index}` : `tabs-panel-${index}`;\n\nexport const CustomTabPanel: React.FC<TabPanelProps & { dataTestId?: string; index: number }> = ({\n  children,\n  id,\n  value,\n  animate = false,\n  animationDuration = 300,\n  persist = false,\n  loading = false,\n  loadingComponent,\n  className,\n  dataTestId,\n  index,\n  ...props\n}) => {\n  const isActive = value === id;\n  const shouldRender = isActive || persist;\n\n  if (!shouldRender) {\n    return null;\n  }\n\n  const content = panelContent(loading, loadingComponent, children);\n  const testId = panelTestId(dataTestId, index);\n\n  const panel = (\n    <TabPanel\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`tabpanel-${id}`}\n      aria-labelledby={`tab-${id}`}\n      animate={animate}\n      persist={persist}\n      className={className}\n      data-testid={testId}\n      {...props}\n    >\n      {content}\n    </TabPanel>\n  );\n\n  // The animated and plain panels are the same element; only the Fade wrapper\n  // differs.\n  if (!animate) return panel;\n\n  return (\n    <Fade in={isActive} timeout={animationDuration}>\n      {panel}\n    </Fade>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,UAAU;AACjB,SAAS,QAAQ,gBAAgB;AAiCxB;AA3BT,IAAM,WAAW,OAAO,KAAK;AAAA,EAC3B,mBAAmB,CAAC,SAAS,CAAC,CAAC,WAAW,SAAS,EAAE,SAAS,IAAc;AAC9E,CAAC,EAA4C,CAAC,EAAE,SAAS,QAAQ,OAAO;AAAA,EACtE,OAAO;AAAA,EAEP,GAAI,WAAW;AAAA,IACb,YAAY;AAAA,EACd;AAAA,EAEA,GAAI,WAAW;AAAA,IACb,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,EACF;AACF,EAAE;AAEF,IAAM,mBAAmB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACnD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW,IAAI,OAAO,GAAG;AAAA,EACzB,OAAO,MAAM,QAAQ,KAAK;AAC5B,EAAE;AAGF,IAAM,eAAyB,MAAM;AACnC,QAAM,QAAQ,SAAS;AACvB,SAAO,oBAAC,oBAAiB,MAAM,IAAI,OAAO,EAAE,GAAG;AACjD;AAGA,IAAM,eAAe,CACnB,SACA,kBACA,aACoB;AACpB,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,oBACE,oBAAC,oBACC,8BAAC,gBAAa,GAChB;AAGN;AAEA,IAAM,cAAc,CAAC,YAAgC,UACnD,aAAa,GAAG,UAAU,UAAU,KAAK,KAAK,cAAc,KAAK;AAE5D,IAAM,iBAAmF,CAAC;AAAA,EAC/F;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAW,UAAU;AAC3B,QAAM,eAAe,YAAY;AAEjC,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,aAAa,SAAS,kBAAkB,QAAQ;AAChE,QAAM,SAAS,YAAY,YAAY,KAAK;AAE5C,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ,CAAC;AAAA,MACT,IAAI,YAAY,EAAE;AAAA,MAClB,mBAAiB,OAAO,EAAE;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAKF,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,oBAAC,QAAK,IAAI,UAAU,SAAS,mBAC1B,iBACH;AAEJ;","names":[]}

package/dist/{chunk-L4UP5VYS.js → chunk-GVH7C2PT.js}

@@ -1,7 +1,7 @@
 import {
   backdropSxOf,
   variantStylesOf
-} from "./chunk-IYTBTK2M.js";
+} from "./chunk-2WU52FLP.js";
 import {
   DIALOG_ACTIONS,
   DIALOG_BODY_PADDING_UNITS,
@@ -270,4 +270,4 @@ export {
   DialogContent,
   DialogActions
 };
-//# sourceMappingURL=chunk-L4UP5VYS.js.map
+//# sourceMappingURL=chunk-GVH7C2PT.js.map

package/dist/{chunk-MBSYD3ZU.js → chunk-GWFAINQ7.js}

@@ -15,8 +15,8 @@ var MARK_PX = { xs: 24, sm: 32, md: 40, lg: 48, xl: 56 };
 var INITIALS_RATIO = 0.4;
 function markSx(theme, { edge, round, showLogo, seed }) {
   return {
-    width: edge,
-    height: edge,
+    width: rem(theme, edge),
+    height: rem(theme, edge),
     flex: "0 0 auto",
     overflow: "hidden",
     borderRadius: round ? "50%" : "30%",
@@ -79,4 +79,4 @@ export {
   AppHeaderBrand,
   AppHeader_brand_default
 };
-//# sourceMappingURL=chunk-MBSYD3ZU.js.map
+//# sourceMappingURL=chunk-GWFAINQ7.js.map

package/dist/chunk-GWFAINQ7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.brand.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\nimport type { SizeValue } from '../../../tokens/scales';\n\nimport { brandGradient, initialsOf } from './AppHeader.colors';\nimport type { AppHeaderBrandProps } from './AppHeader.types';\n\n/** The mark's edge, per house size step. */\nconst MARK_PX: Record<SizeValue, number> = { xs: 24, sm: 32, md: 40, lg: 48, xl: 56 };\n\n/** Initials are set at 40% of the mark so a two-letter pair never touches the edge. */\nconst INITIALS_RATIO = 0.4;\n\n/** The mark's box, lifted out of the component to keep it inside the complexity bar. */\nfunction markSx(\n  theme: Theme,\n  { edge, round, showLogo, seed }: { edge: number; round: boolean; showLogo: boolean; seed: string },\n): Record<string, unknown> {\n  return {\n    width: rem(theme, edge),\n    height: rem(theme, edge),\n    flex: '0 0 auto',\n    overflow: 'hidden',\n    borderRadius: round ? '50%' : '30%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    // Only the initials need the gradient; a logo covers it entirely, and\n    // painting it underneath would show at the corners of a transparent PNG.\n    backgroundImage: showLogo ? 'none' : brandGradient(seed),\n    backgroundColor: showLogo ? theme.palette.action.hover : 'transparent',\n    color: theme.palette.getContrastText(seed),\n    fontSize: rem(theme, Math.round(edge * INITIALS_RATIO)),\n    fontWeight: 700,\n    lineHeight: 1,\n    letterSpacing: '0.02em',\n    userSelect: 'none',\n  };\n}\n\n/**\n * The mark that opens the header: the logo when there is one, the name's\n * initials on a gradient derived from the brand colour when there is not.\n *\n * Both branches occupy the SAME box, so a header does not resize when a logo\n * arrives — or when one fails to load and the initials take over, which is the\n * case a plain `<img>` renders as a torn-page glyph beside the store's name.\n */\nexport const AppHeaderBrand: React.FC<AppHeaderBrandProps> = ({\n  name,\n  logoUrl,\n  seedColor,\n  size = 'md',\n  shape = 'rounded',\n  className,\n  dataTestId = 'app-header-brand',\n}) => {\n  const theme = useTheme();\n  const [broken, setBroken] = React.useState(false);\n  // Keyed on the URL so a store that swaps its logo gets a fresh attempt rather\n  // than inheriting the previous one's failure.\n  React.useEffect(() => setBroken(false), [logoUrl]);\n\n  const edge = MARK_PX[size];\n  const seed = seedColor || theme.palette.primary.main;\n  const showLogo = Boolean(logoUrl) && !broken;\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      // `role=\"img\"` + the name: the initials are a picture of the brand, not\n      // two letters a screen reader should spell out.\n      role=\"img\"\n      aria-label={name}\n      sx={markSx(theme, { edge, round: shape === 'circle', showLogo, seed })}\n    >\n      {showLogo ? (\n        <Box\n          component=\"img\"\n          src={logoUrl ?? undefined}\n          alt=\"\"\n          onError={() => setBroken(true)}\n          data-testid={`${dataTestId}-logo`}\n          sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}\n        />\n      ) : (\n        <Box component=\"span\" aria-hidden data-testid={`${dataTestId}-initials`}>\n          {initialsOf(name)}\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nAppHeaderBrand.displayName = 'AppHeaderBrand';\n\nexport default AppHeaderBrand;\n"],"mappings":";;;;;;;;;AAEA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AAEzB,OAAO,WAAW;AA+EV;AAtER,IAAM,UAAqC,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAGpF,IAAM,iBAAiB;AAGvB,SAAS,OACP,OACA,EAAE,MAAM,OAAO,UAAU,KAAK,GACL;AACzB,SAAO;AAAA,IACL,OAAO,IAAI,OAAO,IAAI;AAAA,IACtB,QAAQ,IAAI,OAAO,IAAI;AAAA,IACvB,MAAM;AAAA,IACN,UAAU;AAAA,IACV,cAAc,QAAQ,QAAQ;AAAA,IAC9B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA;AAAA;AAAA,IAGhB,iBAAiB,WAAW,SAAS,cAAc,IAAI;AAAA,IACvD,iBAAiB,WAAW,MAAM,QAAQ,OAAO,QAAQ;AAAA,IACzD,OAAO,MAAM,QAAQ,gBAAgB,IAAI;AAAA,IACzC,UAAU,IAAI,OAAO,KAAK,MAAM,OAAO,cAAc,CAAC;AAAA,IACtD,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AACF;AAUO,IAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AACf,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAGhD,QAAM,UAAU,MAAM,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,QAAM,OAAO,QAAQ,IAAI;AACzB,QAAM,OAAO,aAAa,MAAM,QAAQ,QAAQ;AAChD,QAAM,WAAW,QAAQ,OAAO,KAAK,CAAC;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,IAAI,OAAO,OAAO,EAAE,MAAM,OAAO,UAAU,UAAU,UAAU,KAAK,CAAC;AAAA,MAEpE,qBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK,WAAW;AAAA,UAChB,KAAI;AAAA,UACJ,SAAS,MAAM,UAAU,IAAI;AAAA,UAC7B,eAAa,GAAG,UAAU;AAAA,UAC1B,IAAI,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,SAAS,SAAS,QAAQ;AAAA;AAAA,MAC5E,IAEA,oBAAC,OAAI,WAAU,QAAO,eAAW,MAAC,eAAa,GAAG,UAAU,aACzD,qBAAW,IAAI,GAClB;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAE7B,IAAO,0BAAQ;","names":[]}

package/dist/{chunk-AER4245J.js → chunk-H67EL3CG.js}

@@ -1,21 +1,21 @@
 import {
   PillControl
-} from "./chunk-CS3KOKL3.js";
+} from "./chunk-4GWHYLEB.js";
 import {
   PanelRangeField
-} from "./chunk-AJ5SDHX5.js";
+} from "./chunk-JCL7WK4G.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   TableFilter
-} from "./chunk-HXEBKOSM.js";
+} from "./chunk-J5UZB6Y6.js";
 import {
   StackedModal
-} from "./chunk-IL7JZKXY.js";
+} from "./chunk-442FSG7G.js";
 import {
   StackedModalContent
-} from "./chunk-RWTFZ7J5.js";
+} from "./chunk-L4G5BZFF.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -157,4 +157,4 @@ export {
   GridFilterPanel,
   FilterDialog
 };
-//# sourceMappingURL=chunk-AER4245J.js.map
+//# sourceMappingURL=chunk-H67EL3CG.js.map

package/dist/{chunk-3D6HXKZM.js → chunk-HDJQDMHB.js}

@@ -1,23 +1,27 @@
 import {
-  rem
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
+import {
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/Tabs/Tabs.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var sizeStyles = (theme, size) => ({
   ...size === "sm" && {
-    minHeight: 32,
+    minHeight: rem(theme, 32),
     "& .MuiTab-root": {
       fontSize: rem(theme, 14),
-      minHeight: 32,
+      minHeight: rem(theme, 32),
       padding: theme.spacing(0.5, 1.5)
     }
   },
   ...size === "lg" && {
-    minHeight: 56,
+    minHeight: rem(theme, 56),
     "& .MuiTab-root": {
       fontSize: rem(theme, 18),
-      minHeight: 56,
+      minHeight: rem(theme, 56),
       padding: theme.spacing(1.5, 3)
     }
   }
@@ -25,8 +29,8 @@ var sizeStyles = (theme, size) => ({
 var compactVariantStyles = (theme, customVariant) => ({
   ...customVariant === "default" && {
     "& .MuiTabs-indicator": {
-      height: 3,
-      borderRadius: "3px 3px 0 0",
+      height: rem(theme, 3),
+      borderRadius: rems(theme, 3, 3, 0, 0),
       background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`
     }
   },
@@ -42,12 +46,12 @@ var compactVariantStyles = (theme, customVariant) => ({
       transition: "all 0.3s ease",
       "&:hover": {
         backgroundColor: alpha(theme.palette.primary.main, 0.08),
-        transform: "translateY(-1px)"
+        transform: `translateY(${rem(theme, -1)})`
       },
       "&.Mui-selected": {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
-        boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+        boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.primary.main, 0.3)}`,
         "&:hover": {
           backgroundColor: theme.palette.primary.dark
         }
@@ -62,9 +66,9 @@ var boxedVariantStyles = (theme, customVariant) => ({
       gap: theme.spacing(2)
     },
     "& .MuiTabs-indicator": {
-      height: 2,
+      height: rem(theme, 2),
       backgroundColor: theme.palette.primary.main,
-      borderRadius: 1
+      borderRadius: rem(theme, 1)
     },
     "& .MuiTab-root": {
       textTransform: "none",
@@ -93,7 +97,8 @@ var boxedVariantStyles = (theme, customVariant) => ({
       borderBottom: "none",
       borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
       margin: theme.spacing(0, 0.5),
-      marginBottom: -1,
+      // Overlap the list's own hairline so the selected tab reads as open.
+      marginBottom: `-${FIELD_BORDER_WIDTH}px`,
       backgroundColor: alpha(theme.palette.action.hover, 0.5),
       "&:hover": {
         backgroundColor: alpha(theme.palette.action.hover, 0.8)
@@ -141,4 +146,4 @@ var tabsRootStyles = ({
 export {
   tabsRootStyles
 };
-//# sourceMappingURL=chunk-3D6HXKZM.js.map
+//# sourceMappingURL=chunk-HDJQDMHB.js.map

package/dist/chunk-HDJQDMHB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Tabs/Tabs.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst sizeStyles = (theme: Theme, size?: string): CSSObject => ({\n    ...(size === 'sm' && {\n      minHeight: rem(theme, 32),\n      '& .MuiTab-root': {\n        fontSize: rem(theme, 14),\n        minHeight: rem(theme, 32),\n        padding: theme.spacing(0.5, 1.5),\n      },\n    }),\n\n    ...(size === 'lg' && {\n      minHeight: rem(theme, 56),\n      '& .MuiTab-root': {\n        fontSize: rem(theme, 18),\n        minHeight: rem(theme, 56),\n        padding: theme.spacing(1.5, 3),\n      },\n    }),\n\n});\n\nconst compactVariantStyles = (theme: Theme, customVariant?: string): CSSObject => ({\n    ...(customVariant === 'default' && {\n      '& .MuiTabs-indicator': {\n        height: rem(theme, 3),\n        borderRadius: rems(theme, 3, 3, 0, 0),\n        background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,\n      },\n    }),\n\n    // Pills variant (rounded tabs)\n    ...(customVariant === 'pills' && {\n      '& .MuiTabs-indicator': {\n        display: 'none',\n      },\n      '& .MuiTab-root': {\n        borderRadius: theme.spacing(3),\n        margin: theme.spacing(0, 0.5),\n        minWidth: 'auto',\n        transition: 'all 0.3s ease',\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.primary.main, 0.08),\n          transform: `translateY(${rem(theme, -1)})`,\n        },\n        '&.Mui-selected': {\n          backgroundColor: theme.palette.primary.main,\n          color: theme.palette.primary.contrastText,\n          boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.primary.main, 0.3)}`,\n          '&:hover': {\n            backgroundColor: theme.palette.primary.dark,\n          },\n        },\n      },\n    }),\n\n    // Underline variant (minimal underline indicator)\n});\n\nconst boxedVariantStyles = (theme: Theme, customVariant?: string): CSSObject => ({\n    ...(customVariant === 'underline' && {\n      '& .MuiTabs-flexContainer': {\n        gap: theme.spacing(2),\n      },\n      '& .MuiTabs-indicator': {\n        height: rem(theme, 2),\n        backgroundColor: theme.palette.primary.main,\n        borderRadius: rem(theme, 1),\n      },\n      '& .MuiTab-root': {\n        textTransform: 'none',\n        fontWeight: 500,\n        padding: theme.spacing(1, 0),\n        minWidth: 'auto',\n        '&:hover': {\n          color: theme.palette.primary.main,\n        },\n        '&.Mui-selected': {\n          color: theme.palette.primary.main,\n          fontWeight: 600,\n        },\n      },\n    }),\n\n    // Enclosed variant (bordered tabs)\n    ...(customVariant === 'enclosed' && {\n      '& .MuiTabs-indicator': {\n        display: 'none',\n      },\n      '& .MuiTabs-flexContainer': {\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      },\n      '& .MuiTab-root': {\n        border: `1px solid ${theme.palette.divider}`,\n        borderBottom: 'none',\n        borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,\n        margin: theme.spacing(0, 0.5),\n        // Overlap the list's own hairline so the selected tab reads as open.\n        marginBottom: `-${FIELD_BORDER_WIDTH}px`,\n        backgroundColor: alpha(theme.palette.action.hover, 0.5),\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.action.hover, 0.8),\n        },\n        '&.Mui-selected': {\n          backgroundColor: theme.palette.background.paper,\n          borderColor: theme.palette.divider,\n          borderBottomColor: theme.palette.background.paper,\n          zIndex: 1,\n        },\n      },\n    }),\n});\n\nconst variantStyles = (theme: Theme, customVariant?: string): CSSObject => ({\n  ...compactVariantStyles(theme, customVariant),\n  ...boxedVariantStyles(theme, customVariant),\n});\n\n// Vertical rules between tabs, for the variants that do not already have edges.\nconst dividerStyles = (\n  theme: Theme,\n  customVariant?: string,\n  showDividers?: boolean,\n): CSSObject => ({\n  ...(showDividers &&\n    customVariant !== 'enclosed' &&\n    customVariant !== 'pills' && {\n      '& .MuiTab-root:not(:last-child)': {\n        borderRight: `1px solid ${alpha(theme.palette.divider, 0.5)}`,\n      },\n    }),\n});\n\n// The root Tabs styling, kept out of Tabs.tsx so the styled() call stays small.\n// Spread into a fresh literal at the call site: handing styled() a named-type\n// value makes TypeScript demand a `variants` key (CSSObjectWithVariants).\nexport const tabsRootStyles = ({\n  theme,\n  customVariant,\n  size,\n  showDividers,\n}: {\n  theme: Theme;\n  customVariant?: string;\n  size?: string;\n  showDividers?: boolean;\n}): CSSObject => ({\n    position: 'relative',\n\n    // Collapse disabled scroll buttons (e.g. the left button at the start of a\n    // scrollable row) so they don't reserve empty space before the first tab.\n    '& .MuiTabs-scrollButtons.Mui-disabled': {\n      width: 0,\n      minWidth: 0,\n      overflow: 'hidden',\n    },\n\n    // Size variants\n  ...sizeStyles(theme, size),\n  ...variantStyles(theme, customVariant),\n  ...dividerStyles(theme, customVariant, showDividers),\n});\n"],"mappings":"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","names":[]}

package/dist/{chunk-57JLS55D.js → chunk-I4QA2F4L.js}

@@ -1,15 +1,15 @@
 import {
   DataViewsBoard
-} from "./chunk-BNEWMFVB.js";
+} from "./chunk-UGGJ3KDT.js";
 import {
   SelectAllStrip
-} from "./chunk-BAQBUKDU.js";
+} from "./chunk-3KREF4ZF.js";
 import {
   toGridExpansion
 } from "./chunk-O5UGAL2V.js";
 import {
   cardGridTracks
-} from "./chunk-75LOTMSN.js";
+} from "./chunk-PPRV4LTM.js";
 import {
   ListCardGroup
 } from "./chunk-NB3FGWU4.js";
@@ -273,4 +273,4 @@ function GridMain(props) {
 export {
   GridMain
 };
-//# sourceMappingURL=chunk-57JLS55D.js.map
+//# sourceMappingURL=chunk-I4QA2F4L.js.map

package/dist/{chunk-L7SFH3ED.js → chunk-I7GSRTGQ.js}

@@ -2,15 +2,23 @@ import {
   neutralTones,
   sheen
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/ScrollArea/ScrollArea.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var SCROLLBAR_SIZES = {
   thin: 8,
-  thick: 16
+  thick: 16,
+  default: 12
+};
+var getScrollbarSize = (scrollbarSize) => (scrollbarSize ? SCROLLBAR_SIZES[scrollbarSize] : void 0) ?? SCROLLBAR_SIZES.default;
+var sizeCss = (theme, value) => {
+  if (typeof value !== "number") return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
 };
-var DEFAULT_SCROLLBAR_SIZE = 12;
-var getScrollbarSize = (scrollbarSize) => scrollbarSize ? SCROLLBAR_SIZES[scrollbarSize] ?? DEFAULT_SCROLLBAR_SIZE : DEFAULT_SCROLLBAR_SIZE;
 var getScrollbarColors = ({
   theme,
   variant,
@@ -46,27 +54,27 @@ var getOverflowStyle = ({
       };
   }
 };
-var autoHideScrollbarStyles = ({
+var autoHideScrollbarSx = ({
   thumbColor,
   trackColor,
-  size,
+  thickness,
   orientation,
   shouldShowScrollbar,
   theme,
   scrollbarSize
 }) => ({
   "&::-webkit-scrollbar": {
-    width: orientation !== "horizontal" ? size : "100%",
-    height: orientation !== "vertical" ? size : "100%"
+    width: orientation !== "horizontal" ? rem(theme, thickness) : "100%",
+    height: orientation !== "vertical" ? rem(theme, thickness) : "100%"
   },
   "&::-webkit-scrollbar-track": {
     background: shouldShowScrollbar ? trackColor : "transparent",
-    borderRadius: size / 2,
+    borderRadius: thickness / 2,
     transition: "background 0.3s ease"
   },
   "&::-webkit-scrollbar-thumb": {
     background: shouldShowScrollbar ? thumbColor : "transparent",
-    borderRadius: size / 2,
+    borderRadius: thickness / 2,
     transition: "background 0.3s ease",
     "&:hover": {
       background: shouldShowScrollbar ? theme.palette.primary.main : "transparent"
@@ -79,24 +87,24 @@ var autoHideScrollbarStyles = ({
   scrollbarWidth: shouldShowScrollbar ? scrollbarSize === "thin" ? "thin" : "auto" : "none",
   scrollbarColor: shouldShowScrollbar ? `${thumbColor} ${trackColor}` : "transparent transparent"
 });
-var VARIANT_SCROLLBARS = {
-  overlay: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => ({
+var VARIANT_SCROLLBAR_SX = {
+  overlay: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => ({
     "&::-webkit-scrollbar": {
-      width: orientation !== "horizontal" ? size : "100%",
-      height: orientation !== "vertical" ? size : "100%",
+      width: orientation !== "horizontal" ? rem(theme, thickness) : "100%",
+      height: orientation !== "vertical" ? rem(theme, thickness) : "100%",
       position: "absolute",
       right: 0,
       top: 0
     },
     "&::-webkit-scrollbar-track": {
       background: "transparent",
-      borderRadius: size / 2
+      borderRadius: thickness / 2
     },
     "&::-webkit-scrollbar-thumb": {
       background: shouldShowScrollbar ? alpha(colors.scrollbar, 0.5) : "transparent",
-      borderRadius: size / 2,
+      borderRadius: thickness / 2,
       transition: "background 0.3s ease",
-      border: "2px solid transparent",
+      border: `${rem(theme, 2)} solid transparent`,
       backgroundClip: "padding-box",
       "&:hover": {
         background: shouldShowScrollbar ? theme.palette.primary.main : "transparent"
@@ -113,13 +121,13 @@ var VARIANT_SCROLLBARS = {
   // Firefox property) keeps the solid palette colour rather than the gradient —
   // a gradient is not a valid value there, which is why the original picked
   // colors.scrollbar for it.
-  glass: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => {
+  glass: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => {
     const glassThumbColor = `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.3)}, ${alpha(theme.palette.secondary.main, 0.3)})`;
     const glassTrackColor = alpha(theme.palette.background.paper, 0.1);
-    const base = autoHideScrollbarStyles({
+    const base = autoHideScrollbarSx({
       thumbColor: glassThumbColor,
       trackColor: glassTrackColor,
-      size,
+      thickness,
       orientation,
       shouldShowScrollbar,
       theme,
@@ -129,20 +137,20 @@ var VARIANT_SCROLLBARS = {
       ...base,
       "&::-webkit-scrollbar-track": {
         ...base["&::-webkit-scrollbar-track"],
-        backdropFilter: shouldShowScrollbar ? "blur(5px)" : "none"
+        backdropFilter: shouldShowScrollbar ? `blur(${rem(theme, 5)})` : "none"
       },
       "&::-webkit-scrollbar-thumb": {
         ...base["&::-webkit-scrollbar-thumb"],
-        boxShadow: shouldShowScrollbar ? `inset 0 0 6px ${sheen(theme, 0.3)}` : "none"
+        boxShadow: shouldShowScrollbar ? `inset ${rems(theme, 0, 0, 6)} ${sheen(theme, 0.3)}` : "none"
       },
       scrollbarColor: shouldShowScrollbar ? `${colors.scrollbar} ${glassTrackColor}` : "transparent transparent",
-      backdropFilter: "blur(10px)"
+      backdropFilter: `blur(${rem(theme, 10)})`
     };
   },
-  default: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => autoHideScrollbarStyles({
+  default: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => autoHideScrollbarSx({
     thumbColor: colors.scrollbar,
     trackColor: colors.track,
-    size,
+    thickness,
     orientation,
     shouldShowScrollbar,
     theme,
@@ -159,13 +167,14 @@ var getVariantStyles = ({
   shouldShowScrollbar
 }) => {
   const colors = getScrollbarColors({ theme, variant, scrollbarColor, scrollbarTrackColor });
-  const size = getScrollbarSize(scrollbarSize);
-  const build = VARIANT_SCROLLBARS[variant ?? "default"] ?? VARIANT_SCROLLBARS.default;
-  return build({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize });
+  const thickness = getScrollbarSize(scrollbarSize);
+  const build = VARIANT_SCROLLBAR_SX[variant ?? "default"] ?? VARIANT_SCROLLBAR_SX.default;
+  return build({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize });
 };
 
 export {
+  sizeCss,
   getOverflowStyle,
   getVariantStyles
 };
-//# sourceMappingURL=chunk-L7SFH3ED.js.map
+//# sourceMappingURL=chunk-I7GSRTGQ.js.map

package/dist/chunk-I7GSRTGQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ScrollArea/ScrollArea.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\n\nimport type { ScrollAreaProps } from './ScrollArea.types';\nimport { neutralTones, sheen } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\n/** The scrollbar's thickness in design px, per `scrollbarSize`; `default` is the fallback. */\nconst SCROLLBAR_SIZES: Record<string, number> = {\n  thin: 8,\n  thick: 16,\n  default: 12,\n};\n\n// thin/thick are the named ends of the scale; anything else takes the default.\nconst getScrollbarSize = (scrollbarSize?: string): number =>\n  (scrollbarSize ? SCROLLBAR_SIZES[scrollbarSize] : undefined) ?? SCROLLBAR_SIZES.default!;\n\n/**\n * A size prop as CSS. `sx` reads a number of 1 or less as a fraction of the\n * parent, and that stays so; any other number is design px, through the type\n * scale; a string is as given.\n */\nexport const sizeCss = (theme: Theme, value: number | string | undefined): string | undefined => {\n  if (typeof value !== 'number') return value;\n  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);\n};\n\nconst getScrollbarColors = ({\n  theme,\n  variant,\n  scrollbarColor,\n  scrollbarTrackColor,\n}: {\n  theme: Theme;\n  variant?: string;\n  scrollbarColor?: string;\n  scrollbarTrackColor?: string;\n}) => {\n  const defaultScrollbarColor =\n    variant === 'glass'\n      ? alpha(theme.palette.primary.main, 0.5)\n      : theme.palette.mode === 'dark'\n        ? neutralTones(theme).emphasis\n        : neutralTones(theme).subtle;\n\n  const defaultTrackColor =\n    variant === 'glass'\n      ? alpha(theme.palette.background.paper, 0.1)\n      : theme.palette.mode === 'dark'\n        ? neutralTones(theme).inverseSurface\n        : neutralTones(theme).faint;\n\n  return {\n    scrollbar: scrollbarColor || defaultScrollbarColor,\n    track: scrollbarTrackColor || defaultTrackColor,\n  };\n};\n\nexport const getOverflowStyle = ({\n  disabled,\n  orientation,\n}: {\n  disabled?: boolean;\n  orientation?: ScrollAreaProps['orientation'];\n}) => {\n  if (disabled) return { overflow: 'hidden' as const };\n\n  switch (orientation) {\n    case 'horizontal':\n      return {\n        overflow: 'hidden' as const,\n        overflowX: 'auto' as const,\n        overflowY: 'hidden' as const,\n      };\n    case 'both':\n      return { overflow: 'auto' as const };\n    default:\n      return {\n        overflow: 'hidden' as const,\n        overflowY: 'auto' as const,\n        overflowX: 'hidden' as const,\n      };\n  }\n};\n\n// Scrollbar chrome shared by every variant. autoHide fades the thumb out when\n// the area is idle, which is why the colours are parameters rather than read\n// from the variant directly. An `sx` object (it is spread into the viewport's\n// `sx`), so a number on `borderRadius` is a multiple of `shape.borderRadius`.\nconst autoHideScrollbarSx = ({\n  thumbColor,\n  trackColor,\n  thickness,\n  orientation,\n  shouldShowScrollbar,\n  theme,\n  scrollbarSize,\n}: {\n  thumbColor: string;\n  trackColor: string;\n  thickness: number;\n  orientation?: ScrollAreaProps['orientation'];\n  shouldShowScrollbar: boolean;\n  theme: Theme;\n  scrollbarSize?: string;\n}) => ({\n    '&::-webkit-scrollbar': {\n      width: orientation !== 'horizontal' ? rem(theme, thickness) : '100%',\n      height: orientation !== 'vertical' ? rem(theme, thickness) : '100%',\n    },\n    '&::-webkit-scrollbar-track': {\n      background: shouldShowScrollbar ? trackColor : 'transparent',\n      borderRadius: thickness / 2,\n      transition: 'background 0.3s ease',\n    },\n    '&::-webkit-scrollbar-thumb': {\n      background: shouldShowScrollbar ? thumbColor : 'transparent',\n      borderRadius: thickness / 2,\n      transition: 'background 0.3s ease',\n      '&:hover': {\n        background: shouldShowScrollbar ? theme.palette.primary.main : 'transparent',\n      },\n    },\n    '&::-webkit-scrollbar-corner': {\n      background: shouldShowScrollbar ? trackColor : 'transparent',\n    },\n    // Firefox scrollbar styling\n    scrollbarWidth: shouldShowScrollbar\n      ? scrollbarSize === 'thin'\n        ? ('thin' as const)\n        : ('auto' as const)\n      : ('none' as const),\n    scrollbarColor: shouldShowScrollbar\n      ? `${thumbColor} ${trackColor}`\n      : 'transparent transparent',\n  });\n\ntype VariantArgs = {\n  theme: Theme;\n  colors: { scrollbar: string; track: string };\n  thickness: number;\n  orientation?: ScrollAreaProps['orientation'];\n  shouldShowScrollbar: boolean;\n  scrollbarSize?: string;\n};\n\n// One entry per scrollbar look. overlay floats above the content, glass tints\n// it, and the default delegates to the shared auto-hide chrome. Each is an `sx`\n// object, like the chrome.\nconst VARIANT_SCROLLBAR_SX: Record<string, (args: VariantArgs) => CSSObject> = {\n  overlay: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => ({\n          '&::-webkit-scrollbar': {\n            width: orientation !== 'horizontal' ? rem(theme, thickness) : '100%',\n            height: orientation !== 'vertical' ? rem(theme, thickness) : '100%',\n            position: 'absolute',\n            right: 0,\n            top: 0,\n          },\n          '&::-webkit-scrollbar-track': {\n            background: 'transparent',\n            borderRadius: thickness / 2,\n          },\n          '&::-webkit-scrollbar-thumb': {\n            background: shouldShowScrollbar\n              ? alpha(colors.scrollbar, 0.5)\n              : 'transparent',\n            borderRadius: thickness / 2,\n            transition: 'background 0.3s ease',\n            border: `${rem(theme, 2)} solid transparent`,\n            backgroundClip: 'padding-box',\n            '&:hover': {\n              background: shouldShowScrollbar ? theme.palette.primary.main : 'transparent',\n            },\n          },\n          '&::-webkit-scrollbar-corner': {\n            background: 'transparent',\n          },\n          scrollbarWidth: shouldShowScrollbar\n            ? scrollbarSize === 'thin'\n              ? ('thin' as const)\n              : ('auto' as const)\n            : ('none' as const),\n          scrollbarColor: shouldShowScrollbar\n            ? `${alpha(colors.scrollbar, 0.5)} transparent`\n            : 'transparent transparent',\n        }),\n\n  // Starts from the shared chrome, then adds what makes it glass: a blurred\n  // track and root, and an inner highlight on the thumb. scrollbar-color (the\n  // Firefox property) keeps the solid palette colour rather than the gradient —\n  // a gradient is not a valid value there, which is why the original picked\n  // colors.scrollbar for it.\n  glass: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => {\n    const glassThumbColor = `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.3)}, ${alpha(theme.palette.secondary.main, 0.3)})`;\n    const glassTrackColor = alpha(theme.palette.background.paper, 0.1);\n\n    const base = autoHideScrollbarSx({\n      thumbColor: glassThumbColor,\n      trackColor: glassTrackColor,\n      thickness,\n      orientation,\n      shouldShowScrollbar,\n      theme,\n      scrollbarSize,\n    });\n\n    return {\n      ...base,\n      '&::-webkit-scrollbar-track': {\n        ...(base['&::-webkit-scrollbar-track'] as object),\n        backdropFilter: shouldShowScrollbar ? `blur(${rem(theme, 5)})` : 'none',\n      },\n      '&::-webkit-scrollbar-thumb': {\n        ...(base['&::-webkit-scrollbar-thumb'] as object),\n        boxShadow: shouldShowScrollbar\n          ? `inset ${rems(theme, 0, 0, 6)} ${sheen(theme, 0.3)}`\n          : 'none',\n      },\n      scrollbarColor: shouldShowScrollbar\n        ? `${colors.scrollbar} ${glassTrackColor}`\n        : 'transparent transparent',\n      backdropFilter: `blur(${rem(theme, 10)})`,\n    };\n  },\n\n  default: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) =>\n    autoHideScrollbarSx({\n      thumbColor: colors.scrollbar,\n      trackColor: colors.track,\n      thickness,\n      orientation,\n      shouldShowScrollbar,\n      theme,\n      scrollbarSize,\n    }),\n};\n\nexport const getVariantStyles = ({\n  theme,\n  variant,\n  orientation,\n  scrollbarSize,\n  scrollbarColor,\n  scrollbarTrackColor,\n  shouldShowScrollbar,\n}: {\n  theme: Theme;\n  variant?: string;\n  orientation?: ScrollAreaProps['orientation'];\n  scrollbarSize?: string;\n  scrollbarColor?: string;\n  scrollbarTrackColor?: string;\n  shouldShowScrollbar: boolean;\n}) => {\n  const colors = getScrollbarColors({ theme, variant, scrollbarColor, scrollbarTrackColor });\n  const thickness = getScrollbarSize(scrollbarSize);\n\n  const build = VARIANT_SCROLLBAR_SX[variant ?? 'default'] ?? VARIANT_SCROLLBAR_SX.default!;\n\n  return build({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize });\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-Q4CAZ2TP.js → chunk-IG23YZZR.js}

@@ -1,7 +1,7 @@
 import {
   separatorBlockMargin,
   separatorStyles
-} from "./chunk-CAHWCSRE.js";
+} from "./chunk-D46SLMCX.js";
 
 // src/components/layout/Separator/Separator.tsx
 import Box from "@mui/material/Box/index.js";
@@ -20,9 +20,10 @@ var Separator = ({
   "data-testid": dataTestId
 }) => {
   const theme = useTheme();
-  const styles = separatorStyles(theme, { variant, orientation, size, color, margin, length });
+  const isHorizontal = orientation === "horizontal";
+  const blockMargin = separatorBlockMargin(theme, size, margin, isHorizontal);
+  const styles = separatorStyles(theme, { variant, orientation, size, color, blockMargin, length });
   if (children) {
-    const isHorizontal = orientation === "horizontal";
     const ruleStyles = { ...styles, margin: 0 };
     return /* @__PURE__ */ jsxs(
       Box,
@@ -32,7 +33,7 @@ var Separator = ({
         sx: {
           display: "flex",
           alignItems: "center",
-          margin: separatorBlockMargin(size, margin, isHorizontal),
+          margin: blockMargin,
           flexDirection: isHorizontal ? "row" : "column",
           gap: theme.spacing(2)
         },
@@ -67,4 +68,4 @@ var Separator = ({
 export {
   Separator
 };
-//# sourceMappingURL=chunk-Q4CAZ2TP.js.map
+//# sourceMappingURL=chunk-IG23YZZR.js.map

package/dist/chunk-IG23YZZR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Separator/Separator.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { separatorBlockMargin, separatorStyles } from './Separator.styles';\nimport type { SeparatorProps } from './Separator.types';\n\nexport const Separator: React.FC<SeparatorProps> = ({\n  variant = 'solid',\n  orientation = 'horizontal',\n  size = 'md',\n  color,\n  margin,\n  length,\n  children,\n  className,\n  'data-testid': dataTestId,\n}) => {\n  const theme = useTheme();\n  const isHorizontal = orientation === 'horizontal';\n  const blockMargin = separatorBlockMargin(theme, size, margin, isHorizontal);\n  const styles = separatorStyles(theme, { variant, orientation, size, color, blockMargin, length });\n\n  if (children) {\n    // The rules either side of the label sit INSIDE the row, which carries the\n    // margin; their own would add it a second time.\n    const ruleStyles = { ...styles, margin: 0 };\n\n    return (\n      <Box\n        className={className}\n        // The plain branch below has always carried the caller's hook; this one\n        // silently dropped it, so a LABELLED separator was the one variant no\n        // test could address except through its own words.\n        data-testid={dataTestId}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          margin: blockMargin,\n          flexDirection: isHorizontal ? 'row' : 'column',\n          gap: theme.spacing(2),\n        }}\n      >\n        <Box sx={ruleStyles} />\n        {/*\n          No background behind the label. The two rules and the words are a FLEX\n          ROW — the rules stop where the label starts — so there is nothing for a\n          background to mask, and painting one made the label a coloured pill on\n          every surface that is not `background.default`. On a white card it read\n          as a highlight nobody had asked for.\n        */}\n        <Typography\n          variant=\"body2\"\n          color=\"text.secondary\"\n          sx={{ flexShrink: 0, padding: theme.spacing(0, 1) }}\n        >\n          {children}\n        </Typography>\n        <Box sx={ruleStyles} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      className={className}\n      sx={styles}\n      role=\"separator\"\n      aria-orientation={orientation}\n      data-testid={dataTestId}\n    />\n  );\n};\n"],"mappings":";;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AA4BnB,SAcE,KAdF;AAtBC,IAAM,YAAsC,CAAC;AAAA,EAClD,UAAU;AAAA,EACV,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,gBAAgB;AACrC,QAAM,cAAc,qBAAqB,OAAO,MAAM,QAAQ,YAAY;AAC1E,QAAM,SAAS,gBAAgB,OAAO,EAAE,SAAS,aAAa,MAAM,OAAO,aAAa,OAAO,CAAC;AAEhG,MAAI,UAAU;AAGZ,UAAM,aAAa,EAAE,GAAG,QAAQ,QAAQ,EAAE;AAE1C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAIA,eAAa;AAAA,QACb,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,eAAe,eAAe,QAAQ;AAAA,UACtC,KAAK,MAAM,QAAQ,CAAC;AAAA,QACtB;AAAA,QAEA;AAAA,8BAAC,OAAI,IAAI,YAAY;AAAA,UAQrB;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,IAAI,EAAE,YAAY,GAAG,SAAS,MAAM,QAAQ,GAAG,CAAC,EAAE;AAAA,cAEjD;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,OAAI,IAAI,YAAY;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,eAAa;AAAA;AAAA,EACf;AAEJ;","names":[]}

package/dist/{chunk-5W4BLTDI.js → chunk-IWFENXST.js}

@@ -1,12 +1,13 @@
 import {
   breadcrumbLinkStyles
-} from "./chunk-6CTPDNNX.js";
+} from "./chunk-52G2KRL4.js";
 import {
   sheen,
   uiInk
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx
@@ -41,7 +42,7 @@ var BreadcrumbText = styled(Typography, {
   position: "relative",
   ...visualStyle === "glass" && {
     background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
-    backdropFilter: "blur(4px)",
+    backdropFilter: `blur(${rem(theme, 4)})`,
     border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
   },
   "& .breadcrumb-icon": {
@@ -58,11 +59,11 @@ var CollapsedItemsPopover = ({ open, items, dataTestId, onSelect }) => /* @__PUR
   {
     sx: {
       background: (theme) => theme.palette.mode === "dark" ? alpha(uiInk(theme).glassSlate, 0.95) : sheen(theme, 0.95),
-      backdropFilter: "blur(10px)",
+      backdropFilter: (theme) => `blur(${rem(theme, 10)})`,
       borderRadius: 1,
       boxShadow: 3,
       p: 1,
-      minWidth: 150
+      minWidth: sxRem(150)
     },
     children: items.map((item, index) => /* @__PURE__ */ jsx(
       Box,
@@ -263,4 +264,4 @@ var BreadcrumbEntry = ({
 export {
   BreadcrumbEntry
 };
-//# sourceMappingURL=chunk-5W4BLTDI.js.map
+//# sourceMappingURL=chunk-IWFENXST.js.map