@12-apps/ui 6.37.0 → 6.38.0

package/dist/{chunk-2BIVCYTO.js → chunk-MR2HKBHS.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-5M4TYFR3.js";
 import {
   PreviewBox
-} from "./chunk-JGRE56GQ.js";
+} from "./chunk-OB56SZGL.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -16,7 +16,7 @@ import {
 import {
   Dialog,
   DialogContent
-} from "./chunk-L4UP5VYS.js";
+} from "./chunk-GVH7C2PT.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -268,4 +268,4 @@ function SaveViewModal({
 export {
   SaveViewModal
 };
-//# sourceMappingURL=chunk-2BIVCYTO.js.map
+//# sourceMappingURL=chunk-MR2HKBHS.js.map

package/dist/{chunk-YVUD3MY4.js → chunk-N23GCN5U.js}

@@ -1,15 +1,18 @@
 import {
   ItemsPerPageSelect,
   PageInfo
-} from "./chunk-MVXFMIVZ.js";
+} from "./chunk-4GB46HLK.js";
 import {
   paginationStyles
-} from "./chunk-PMP6WJJS.js";
+} from "./chunk-BWMHGENX.js";
 import {
   makeTestId,
   muiSizeFor,
   resolvePaginationProps
 } from "./chunk-Z6TIAVEG.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/Pagination/Pagination.tsx
 import FirstPage from "@mui/icons-material/FirstPage";
@@ -66,7 +69,7 @@ var renderPaginationItem = ({
             "&.MuiPaginationItem-page": {
               fontSize: 0,
               overflow: "hidden",
-              textIndent: "-9999px"
+              textIndent: sxRem(-9999)
             }
           }
         }
@@ -191,4 +194,4 @@ Pagination.displayName = "Pagination";
 export {
   Pagination
 };
-//# sourceMappingURL=chunk-YVUD3MY4.js.map
+//# sourceMappingURL=chunk-N23GCN5U.js.map

package/dist/chunk-N23GCN5U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":["import FirstPage from '@mui/icons-material/FirstPage';\nimport LastPage from '@mui/icons-material/LastPage';\nimport NavigateBefore from '@mui/icons-material/NavigateBefore';\nimport NavigateNext from '@mui/icons-material/NavigateNext';\nimport type { PaginationRenderItemParams } from '@mui/material/Pagination/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiPagination from '@mui/material/Pagination/index.js';\nimport PaginationItem from '@mui/material/PaginationItem/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { ResolvedPaginationProps } from './Pagination.helpers';\nimport { makeTestId, muiSizeFor, resolvePaginationProps } from './Pagination.helpers';\nimport { paginationStyles } from './Pagination.styles';\nimport type { PaginationProps } from './Pagination.types';\nimport { ItemsPerPageSelect, PageInfo } from './PaginationParts';\nimport { sxRem } from '../../../tokens/relative';\n\nconst StyledPagination = styled(MuiPagination, {\n  shouldForwardProp: (prop) => !['customVariant', 'customSize'].includes(prop as string) })<{ customVariant?: string; customSize?: string }>(({ theme, customVariant, customSize }) => ({\n  ...paginationStyles({ theme, customVariant, customSize }) }));\n\nconst PaginationContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexWrap: 'wrap',\n  gap: theme.spacing(1) }));\n\n// Arrow items get a short suffix, pages carry their number. This was two\n// parallel switch statements that differed only in whether the prefix came from\n// dataTestId or the literal 'pagination'.\nconst ITEM_TEST_SUFFIX: Record<string, string> = {\n  first: 'first',\n  last: 'last',\n  previous: 'prev',\n  next: 'next' };\n\nconst paginationItemTestId = (\n  base: string | undefined,\n  item: PaginationRenderItemParams,\n): string | undefined => {\n  const prefix = base ?? 'pagination';\n\n  if (item.type === 'page') return `${prefix}-page-${item.page}`;\n\n  const suffix = ITEM_TEST_SUFFIX[item.type];\n  return suffix ? `${prefix}-${suffix}` : undefined;\n};\n\n// A dots-variant page renders as a bare dot; everything else uses MUI's item\n// with our own arrow icons.\nconst renderPaginationItem = ({\n  item,\n  variant,\n  size: _size,\n  dataTestId,\n  icons }: {\n  item: PaginationRenderItemParams;\n  variant: string;\n  size: string;\n  dataTestId?: string;\n  icons: {\n    firstIcon?: React.ReactNode;\n    lastIcon?: React.ReactNode;\n    previousIcon?: React.ReactNode;\n    nextIcon?: React.ReactNode;\n  };\n}) => {\n  const { firstIcon, lastIcon, previousIcon, nextIcon } = icons;\n\n    const itemTestId = paginationItemTestId(dataTestId, item);\n\n    if (variant === 'dots') {\n      if (item.type === 'page') {\n        return (\n          <PaginationItem\n            {...item}\n            data-testid={itemTestId}\n            sx={{\n              '&.MuiPaginationItem-page': {\n                fontSize: 0,\n                overflow: 'hidden',\n                textIndent: sxRem(-9999) } }}\n          />\n        );\n      }\n      return null; // Hide navigation buttons for dots\n    }\n\n    // Map custom icons to components\n    const iconMap: Record<string, React.ReactElement> = {\n      first: firstIcon as React.ReactElement,\n      last: lastIcon as React.ReactElement,\n      previous: previousIcon as React.ReactElement,\n      next: nextIcon as React.ReactElement };\n\n    return (\n      <PaginationItem\n        {...item}\n        data-testid={itemTestId}\n        components={{\n          first: () => iconMap.first || <FirstPage />,\n          last: () => iconMap.last || <LastPage />,\n          previous: () => iconMap.previous || <NavigateBefore />,\n          next: () => iconMap.next || <NavigateNext /> }}\n      />\n    );\n  \n};\n\n// The control itself. Local because StyledPagination cannot cross a module\n// boundary (TS2742).\nconst PaginationControl: React.FC<\n  ResolvedPaginationProps & {\n    innerRef: React.Ref<HTMLElement>;\n    renderItem: (item: PaginationRenderItemParams) => React.ReactNode;\n    rest: Record<string, unknown>;\n  }\n> = ({ innerRef, renderItem, rest, ...p }) => {\n  // The dots variant is a position indicator, not a control: no page numbers\n  // around the current one, and no step buttons.\n  const isDots = p.variant === 'dots';\n\n  return (\n    <StyledPagination\n      ref={innerRef}\n      page={p.page}\n      count={p.count}\n      onChange={p.onChange}\n      customVariant={p.variant}\n      customSize={p.size}\n      variant=\"outlined\"\n      size={muiSizeFor(p.size)}\n      boundaryCount={isDots ? 0 : p.boundaryCount}\n      siblingCount={isDots ? 0 : p.siblingCount}\n      hideNextButton={p.hideNextButton || isDots}\n      hidePrevButton={p.hidePrevButton || isDots}\n      showFirstButton={p.showFirstButton && !isDots}\n      showLastButton={p.showLastButton && !isDots}\n      disabled={p.disabled}\n      // MUI spells the unaccented pagination colour `standard`; ours is\n      // `neutral`, translated here rather than carried as a second name.\n      color={p.color === undefined ? undefined : p.color === 'neutral' ? 'standard' : p.color}\n      renderItem={renderItem}\n      {...rest}\n    />\n  );\n};\n\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n  (componentProps, ref) => {\n    const resolved = resolvePaginationProps(componentProps);\n    const {\n      pageSizeLabel,\n      variant,\n      size,\n      page,\n      count,\n      onChange: _onChange,\n      boundaryCount: _boundaryCount,\n      siblingCount: _siblingCount,\n      hideNextButton: _hideNextButton,\n      hidePrevButton: _hidePrevButton,\n      showFirstButton: _showFirstButton,\n      showLastButton: _showLastButton,\n      firstIcon,\n      lastIcon,\n      previousIcon,\n      nextIcon,\n      disabled,\n      color: _color,\n      showPageInfo,\n      pageInfoFormat,\n      showItemsPerPage,\n      itemsPerPageOptions,\n      itemsPerPage,\n      onItemsPerPageChange,\n      className,\n      dataTestId,\n      ...props\n    } = resolved;\n\n    const testId = makeTestId(dataTestId);\n\n    const renderItem = (item: PaginationRenderItemParams) =>\n      renderPaginationItem({\n        item,\n        variant,\n        size,\n        dataTestId,\n        icons: { firstIcon, lastIcon, previousIcon, nextIcon } });\n\n    return (\n      <PaginationContainer className={className} data-testid={dataTestId || 'pagination'}>\n        {showItemsPerPage && onItemsPerPageChange && (\n          <ItemsPerPageSelect\n            pageSizeLabel={pageSizeLabel}\n            value={itemsPerPage}\n            options={itemsPerPageOptions}\n            size={size}\n            disabled={disabled}\n            testId={testId('items-per-page')}\n            onChange={onItemsPerPageChange}\n          />\n        )}\n\n        <PaginationControl\n          {...resolved}\n          innerRef={ref}\n          renderItem={renderItem}\n          rest={props as unknown as Record<string, unknown>}\n        />\n\n        {showPageInfo && (\n          <PageInfo size={size} testId={testId('info')}>\n            {pageInfoFormat(page, count)}\n          </PageInfo>\n        )}\n      </PaginationContainer>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n"],"mappings":"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","names":[]}

package/dist/{chunk-2TJOCI54.js → chunk-NCEQWEXT.js}

@@ -4,7 +4,7 @@ import {
 import {
   backdropSx,
   panelSx
-} from "./chunk-IVIHRZEY.js";
+} from "./chunk-NDMPXMW2.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -77,10 +77,10 @@ var Modal = (props) => {
     }
   );
 };
-var ModalContent = ({ children, padding = 3, dataTestId }) => /* @__PURE__ */ jsx(Box, { sx: { p: padding }, "data-testid": dataTestId || "modal-content", children });
+var ModalContent = ({ children, padding, dataTestId }) => /* @__PURE__ */ jsx(Box, { sx: { p: padding ?? 3 }, "data-testid": dataTestId || "modal-content", children });
 
 export {
   Modal,
   ModalContent
 };
-//# sourceMappingURL=chunk-2TJOCI54.js.map
+//# sourceMappingURL=chunk-NCEQWEXT.js.map

package/dist/{chunk-2TJOCI54.js.map → chunk-NCEQWEXT.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["import Backdrop from '@mui/material/Backdrop/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiModal from '@mui/material/Modal/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { backdropSx, panelSx } from './Modal.styles';\nimport { transitionFor } from './Modal.transitions';\nimport type { ModalContentProps, ModalProps } from './Modal.types';\n\nconst DEFAULTS = {\n  variant: 'center',\n  size: 'md',\n  backdrop: true,\n  persistent: false,\n  glass: false,\n  gradient: false,\n  glow: false,\n  pulse: false,\n  borderRadius: 'lg',\n} satisfies Partial<ModalProps>;\n\ntype ResolvedProps = ModalProps & Required<Pick<ModalProps, keyof typeof DEFAULTS>>;\n\nexport const Modal: React.FC<ModalProps> = (props) => {\n  const {\n    children, variant, size, backdrop, persistent, glass, gradient, glow, pulse,\n    borderRadius, onClose, open, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const theme = useTheme();\n  const isGlass = glass || variant === 'glass';\n\n  /** A persistent modal ignores the two dismissals it did not ask for. */\n  const handleClose = (_event: object, reason: 'backdropClick' | 'escapeKeyDown') => {\n    if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {\n      return;\n    }\n    onClose?.();\n  };\n\n  const TransitionComponent = transitionFor(variant);\n\n  return (\n    <MuiModal\n      open={open}\n      onClose={handleClose}\n      closeAfterTransition\n      BackdropComponent={backdrop ? Backdrop : undefined}\n      BackdropProps={{\n        timeout: 500,\n        sx: backdropSx(theme, isGlass),\n        // @ts-expect-error - data-testid is not part of BackdropProps type but is valid HTML\n        'data-testid': dataTestId ? `${dataTestId}-backdrop` : 'modal-backdrop',\n      }}\n      {...rest}\n    >\n      <TransitionComponent in={open} timeout={500}>\n        <Box\n          sx={panelSx(theme, { variant, size, borderRadius, glass, gradient, glow, pulse })}\n          data-testid={dataTestId || 'modal'}\n        >\n          {children}\n        </Box>\n      </TransitionComponent>\n    </MuiModal>\n  );\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({ children, padding = 3, dataTestId }) => (\n  <Box sx={{ p: padding }} data-testid={dataTestId || 'modal-content'}>\n    {children}\n  </Box>\n);\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,cAAc;AACrB,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,SAAS,gBAAgB;AA0DjB;AAjDR,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,cAAc;AAChB;AAIO,IAAM,QAA8B,CAAC,UAAU;AACpD,QAAM;AAAA,IACJ;AAAA,IAAU;AAAA,IAAS;AAAA,IAAM;AAAA,IAAU;AAAA,IAAY;AAAA,IAAO;AAAA,IAAU;AAAA,IAAM;AAAA,IACtE;AAAA,IAAc;AAAA,IAAS;AAAA,IAAM;AAAA,IAC7B,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,QAAQ;AAEhC,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,SAAS,YAAY;AAGrC,QAAM,cAAc,CAAC,QAAgB,WAA8C;AACjF,QAAI,eAAe,WAAW,mBAAmB,WAAW,kBAAkB;AAC5E;AAAA,IACF;AACA,cAAU;AAAA,EACZ;AAEA,QAAM,sBAAsB,cAAc,OAAO;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,sBAAoB;AAAA,MACpB,mBAAmB,WAAW,WAAW;AAAA,MACzC,eAAe;AAAA,QACb,SAAS;AAAA,QACT,IAAI,WAAW,OAAO,OAAO;AAAA;AAAA,QAE7B,eAAe,aAAa,GAAG,UAAU,cAAc;AAAA,MACzD;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,uBAAoB,IAAI,MAAM,SAAS,KACtC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,QAAQ,OAAO,EAAE,SAAS,MAAM,cAAc,OAAO,UAAU,MAAM,MAAM,CAAC;AAAA,UAChF,eAAa,cAAc;AAAA,UAE1B;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEO,IAAM,eAA4C,CAAC,EAAE,UAAU,UAAU,GAAG,WAAW,MAC5F,oBAAC,OAAI,IAAI,EAAE,GAAG,QAAQ,GAAG,eAAa,cAAc,iBACjD,UACH;","names":[]}
+{"version":3,"sources":["../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["import Backdrop from '@mui/material/Backdrop/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiModal from '@mui/material/Modal/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { backdropSx, panelSx } from './Modal.styles';\nimport { transitionFor } from './Modal.transitions';\nimport type { ModalContentProps, ModalProps } from './Modal.types';\n\nconst DEFAULTS = {\n  variant: 'center',\n  size: 'md',\n  backdrop: true,\n  persistent: false,\n  glass: false,\n  gradient: false,\n  glow: false,\n  pulse: false,\n  borderRadius: 'lg',\n} satisfies Partial<ModalProps>;\n\ntype ResolvedProps = ModalProps & Required<Pick<ModalProps, keyof typeof DEFAULTS>>;\n\nexport const Modal: React.FC<ModalProps> = (props) => {\n  const {\n    children, variant, size, backdrop, persistent, glass, gradient, glow, pulse,\n    borderRadius, onClose, open, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const theme = useTheme();\n  const isGlass = glass || variant === 'glass';\n\n  /** A persistent modal ignores the two dismissals it did not ask for. */\n  const handleClose = (_event: object, reason: 'backdropClick' | 'escapeKeyDown') => {\n    if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {\n      return;\n    }\n    onClose?.();\n  };\n\n  const TransitionComponent = transitionFor(variant);\n\n  return (\n    <MuiModal\n      open={open}\n      onClose={handleClose}\n      closeAfterTransition\n      BackdropComponent={backdrop ? Backdrop : undefined}\n      BackdropProps={{\n        timeout: 500,\n        sx: backdropSx(theme, isGlass),\n        // @ts-expect-error - data-testid is not part of BackdropProps type but is valid HTML\n        'data-testid': dataTestId ? `${dataTestId}-backdrop` : 'modal-backdrop',\n      }}\n      {...rest}\n    >\n      <TransitionComponent in={open} timeout={500}>\n        <Box\n          sx={panelSx(theme, { variant, size, borderRadius, glass, gradient, glow, pulse })}\n          data-testid={dataTestId || 'modal'}\n        >\n          {children}\n        </Box>\n      </TransitionComponent>\n    </MuiModal>\n  );\n};\n\n// `padding` is in spacing units; the default is applied in `sx`, where `p` reads it as one.\nexport const ModalContent: React.FC<ModalContentProps> = ({ children, padding, dataTestId }) => (\n  <Box sx={{ p: padding ?? 3 }} data-testid={dataTestId || 'modal-content'}>\n    {children}\n  </Box>\n);\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,cAAc;AACrB,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,SAAS,gBAAgB;AA0DjB;AAjDR,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,cAAc;AAChB;AAIO,IAAM,QAA8B,CAAC,UAAU;AACpD,QAAM;AAAA,IACJ;AAAA,IAAU;AAAA,IAAS;AAAA,IAAM;AAAA,IAAU;AAAA,IAAY;AAAA,IAAO;AAAA,IAAU;AAAA,IAAM;AAAA,IACtE;AAAA,IAAc;AAAA,IAAS;AAAA,IAAM;AAAA,IAC7B,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,QAAQ;AAEhC,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,SAAS,YAAY;AAGrC,QAAM,cAAc,CAAC,QAAgB,WAA8C;AACjF,QAAI,eAAe,WAAW,mBAAmB,WAAW,kBAAkB;AAC5E;AAAA,IACF;AACA,cAAU;AAAA,EACZ;AAEA,QAAM,sBAAsB,cAAc,OAAO;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,sBAAoB;AAAA,MACpB,mBAAmB,WAAW,WAAW;AAAA,MACzC,eAAe;AAAA,QACb,SAAS;AAAA,QACT,IAAI,WAAW,OAAO,OAAO;AAAA;AAAA,QAE7B,eAAe,aAAa,GAAG,UAAU,cAAc;AAAA,MACzD;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,uBAAoB,IAAI,MAAM,SAAS,KACtC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,QAAQ,OAAO,EAAE,SAAS,MAAM,cAAc,OAAO,UAAU,MAAM,MAAM,CAAC;AAAA,UAChF,eAAa,cAAc;AAAA,UAE1B;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAGO,IAAM,eAA4C,CAAC,EAAE,UAAU,SAAS,WAAW,MACxF,oBAAC,OAAI,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,eAAa,cAAc,iBACtD,UACH;","names":[]}

package/dist/{chunk-IVIHRZEY.js → chunk-NDMPXMW2.js}

@@ -2,16 +2,20 @@ import {
   scrim,
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/feedback/Modal/Modal.styles.ts
 import { alpha, keyframes } from "@mui/material/styles/index.js";
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 20px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 20)} currentColor;
     opacity: 0;
   }
   100% {
@@ -47,17 +51,17 @@ var pulseRing = (theme) => ({
   borderRadius: "inherit",
   backgroundColor: theme.palette.primary.main,
   opacity: 0.3,
-  animation: `${pulseAnimation} 2s infinite`,
+  animation: `${pulseAnimation(theme)} 2s infinite`,
   pointerEvents: "none",
   zIndex: -1
 });
 var surface = (theme, flags) => {
   const { variant, glass, gradient, glow } = flags;
   const isGlass = glass || variant === "glass";
-  const boxShadow = glow ? `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}` : isGlass ? `0 8px 32px ${shadowInk(theme, 0.1)}` : theme.shadows[8];
+  const boxShadow = glow ? `${rems(theme, 0, 0, 40)} ${alpha(theme.palette.primary.main, 0.3)}` : isGlass ? `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}` : theme.shadows[8];
   return {
     backgroundColor: isGlass ? alpha(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
-    backdropFilter: isGlass ? "blur(20px)" : gradient ? "blur(10px)" : "none",
+    backdropFilter: isGlass ? `blur(${rem(theme, 20)})` : gradient ? `blur(${rem(theme, 10)})` : "none",
     border: isGlass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : "none",
     boxShadow,
     ...gradient && {
@@ -70,7 +74,7 @@ var panelSx = (theme, flags) => {
   return {
     // A pulsing panel positions its own ring, so it becomes the containing block.
     position: pulse ? "relative" : "absolute",
-    width: WIDTHS[size] ?? WIDTHS.md,
+    width: rem(theme, WIDTHS[size] ?? WIDTHS.md),
     maxWidth: "90vw",
     borderRadius: (RADII[borderRadius] ?? RADII.lg)(theme),
     outline: 0,
@@ -86,11 +90,11 @@ var panelSx = (theme, flags) => {
 };
 var backdropSx = (theme, isGlass) => ({
   backgroundColor: scrim(theme, isGlass ? 0.2 : 0.5),
-  backdropFilter: isGlass ? "blur(8px)" : "none"
+  backdropFilter: isGlass ? `blur(${rem(theme, 8)})` : "none"
 });
 
 export {
   panelSx,
   backdropSx
 };
-//# sourceMappingURL=chunk-IVIHRZEY.js.map
+//# sourceMappingURL=chunk-NDMPXMW2.js.map

package/dist/chunk-NDMPXMW2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Modal/Modal.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { scrim, shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\nimport type { ModalProps } from './Modal.types';\n\ntype Variant = NonNullable<ModalProps['variant']>;\ntype Size = NonNullable<ModalProps['size']>;\ntype Radius = NonNullable<ModalProps['borderRadius']>;\n\nconst pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 20)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nconst RADII: Record<Radius, (theme: Theme) => number | string> = {\n  none: () => 0,\n  sm: (theme) => theme.spacing(0.5),\n  md: (theme) => theme.spacing(1),\n  lg: (theme) => theme.spacing(2),\n  xl: (theme) => theme.spacing(3),\n};\n\n/** Every preset is capped at 90vw so the panel never overflows a small screen. */\nconst WIDTHS: Record<Size, number> = { xs: 320, sm: 480, md: 640, lg: 800, xl: 960 };\n\n/**\n * Where the panel sits. Top and bottom are the same layout anchored to opposite\n * edges; centre is the only one that offsets on both axes.\n */\nconst PLACEMENTS: Record<string, CSSObject> = {\n  top: { top: '10%', left: '50%', transform: 'translateX(-50%)', maxHeight: '80vh' },\n  bottom: { bottom: '10%', left: '50%', transform: 'translateX(-50%)', maxHeight: '80vh' },\n  center: {\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    maxHeight: '90vh',\n  },\n};\n\ninterface ModalStyleFlags {\n  variant: Variant;\n  size: Size;\n  borderRadius: Radius;\n  glass: boolean;\n  gradient: boolean;\n  glow: boolean;\n  pulse: boolean;\n}\n\n/** The ring that expands out of the panel while `pulse` is set. */\nconst pulseRing = (theme: Theme): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute' as const,\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  borderRadius: 'inherit',\n  backgroundColor: theme.palette.primary.main,\n  opacity: 0.3,\n  animation: `${pulseAnimation(theme)} 2s infinite`,\n  pointerEvents: 'none' as const,\n  zIndex: -1,\n});\n\n/** The surface: its fill, its blur and the shadow that lifts it off the backdrop. */\nconst surface = (theme: Theme, flags: ModalStyleFlags): CSSObject => {\n  const { variant, glass, gradient, glow } = flags;\n  // The glass variant is the glass flag by another name, so either turns it on.\n  const isGlass = glass || variant === 'glass';\n\n  const boxShadow = glow\n    ? `${rems(theme, 0, 0, 40)} ${alpha(theme.palette.primary.main, 0.3)}`\n    : isGlass\n      ? `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`\n      : theme.shadows[8];\n\n  return {\n    backgroundColor: isGlass\n      ? alpha(theme.palette.background.paper, 0.1)\n      : theme.palette.background.paper,\n    backdropFilter: isGlass ? `blur(${rem(theme, 20)})` : gradient ? `blur(${rem(theme, 10)})` : 'none',\n    border: isGlass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : 'none',\n    boxShadow,\n    ...(gradient && {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,\n    }),\n  };\n};\n\nexport const panelSx = (theme: Theme, flags: ModalStyleFlags): CSSObject => {\n  const { variant, size, borderRadius, pulse } = flags;\n\n  return {\n    // A pulsing panel positions its own ring, so it becomes the containing block.\n    position: pulse ? ('relative' as const) : ('absolute' as const),\n    width: rem(theme, WIDTHS[size] ?? WIDTHS.md),\n    maxWidth: '90vw',\n    borderRadius: (RADII[borderRadius] ?? RADII.lg)(theme),\n    outline: 0,\n    overflowY: 'auto',\n    transition: theme.transitions.create(\n      ['box-shadow', 'background-color', 'backdrop-filter', 'transform'],\n      { duration: theme.transitions.duration.standard },\n    ),\n    ...(PLACEMENTS[variant] ?? PLACEMENTS.center),\n    ...surface(theme, flags),\n    ...(pulse && { '&::after': pulseRing(theme) }),\n  };\n};\n\nexport const backdropSx = (theme: Theme, isGlass: boolean): CSSObject => ({\n  backgroundColor: scrim(theme, isGlass ? 0.2 : 0.5),\n  backdropFilter: isGlass ? `blur(${rem(theme, 8)})` : 'none',\n});\n"],"mappings":"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","names":[]}

package/dist/{chunk-UUUMNJPP.js → chunk-NLYNRE7L.js}

@@ -1,9 +1,9 @@
 import {
   PaletteResults
-} from "./chunk-BLJDCMFU.js";
+} from "./chunk-2ARVNCVU.js";
 import {
   ShortcutChip
-} from "./chunk-RNEYZTE4.js";
+} from "./chunk-Z6MCTGIK.js";
 import {
   useCommandPalette
 } from "./chunk-SUZXPDUQ.js";
@@ -33,7 +33,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var StyledDialog = styled(Dialog)(({ theme }) => ({
   "& .MuiBackdrop-root": {
     backgroundColor: scrim(theme, 0.6),
-    backdropFilter: "blur(4px)"
+    backdropFilter: `blur(${rem(theme, 4)})`
   },
   "& .MuiDialog-paper": {
     position: "fixed",
@@ -47,10 +47,10 @@ var StyledDialog = styled(Dialog)(({ theme }) => ({
 }));
 var PaletteContainer = styled(Paper)(({ theme }) => ({
   width: "100%",
-  maxWidth: 640,
+  maxWidth: rem(theme, 640),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-  backdropFilter: "blur(20px)",
-  WebkitBackdropFilter: "blur(20px)",
+  backdropFilter: `blur(${rem(theme, 20)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
   borderRadius: theme.shape.borderRadius * 2,
   overflow: "hidden",
@@ -141,8 +141,8 @@ var CommandPalette = ({
   onClose,
   commands,
   placeholder = "Type a command or search...",
-  width = "640px",
-  maxHeight = "400px",
+  width,
+  maxHeight,
   showRecent = true,
   recentCommands = [],
   onCommandExecute,
@@ -179,7 +179,7 @@ var CommandPalette = ({
       maxWidth: false,
       fullWidth: true,
       "data-testid": dataTestId,
-      children: /* @__PURE__ */ jsx(DialogContent, { sx: { overflow: "visible", p: 0 }, children: /* @__PURE__ */ jsxs(PaletteContainer, { elevation: 24, sx: { width, maxHeight }, children: [
+      children: /* @__PURE__ */ jsx(DialogContent, { sx: { overflow: "visible", p: 0 }, children: /* @__PURE__ */ jsxs(PaletteContainer, { elevation: 24, sx: { width: width ?? sxRem(640), maxHeight: maxHeight ?? sxRem(400) }, children: [
         /* @__PURE__ */ jsx(
           PaletteSearch,
           {
@@ -219,4 +219,4 @@ export {
   CommandPalette,
   CommandPalette_default
 };
-//# sourceMappingURL=chunk-UUUMNJPP.js.map
+//# sourceMappingURL=chunk-NLYNRE7L.js.map

package/dist/chunk-NLYNRE7L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport EnterIcon from '@mui/icons-material/KeyboardReturn';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport InputBase from '@mui/material/InputBase/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { TransitionProps } from '@mui/material/transitions/index.js';\nimport type { FC} from 'react';\nimport React, {  } from 'react';\n\nimport { useCommandPalette } from './CommandPalette.hooks';\nimport { PaletteResults } from './CommandPaletteResults';\nimport { ShortcutChip } from './ShortcutChip';\nimport type { CommandPaletteProps } from './CommandPalette.types';\nimport type { CommandPaletteCopy } from '../../../copy';\nimport { scrim } from '../../../tokens/ink';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n// Styled components\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\n  '& .MuiBackdrop-root': {\n    backgroundColor: scrim(theme, 0.6),\n    backdropFilter: `blur(${rem(theme, 4)})` },\n  '& .MuiDialog-paper': {\n    position: 'fixed',\n    top: '20%',\n    margin: 0,\n    maxHeight: 'none',\n    background: 'transparent',\n    boxShadow: 'none',\n    overflow: 'visible' } }));\n\nconst PaletteContainer = styled(Paper)(({ theme }) => ({\n  width: '100%',\n  maxWidth: rem(theme, 640),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n  backdropFilter: `blur(${rem(theme, 20)})`,\n  WebkitBackdropFilter: `blur(${rem(theme, 20)})`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  borderRadius: theme.shape.borderRadius * 2,\n  overflow: 'hidden',\n  boxShadow: theme.shadows[24] }));\n\nconst SearchContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(2),\n  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n  background: alpha(theme.palette.background.default, 0.4) }));\n\nconst SearchInput = styled(InputBase)(({ theme }) => ({\n  flex: 1,\n  fontSize: rem(theme, 18),\n  fontWeight: 400,\n  '& input': {\n    padding: theme.spacing(0, 1),\n    '&::placeholder': {\n      color: theme.palette.text.secondary,\n      opacity: 0.8 } } }));\n\nconst Transition = React.forwardRef<unknown, TransitionProps & { children: React.ReactElement }>(\n  function Transition(props, ref) {\n    return <Slide direction=\"down\" ref={ref} {...props} />;\n  },\n);\n\n// Main component\nconst PaletteSearch: React.FC<{\n  inputRef: React.Ref<HTMLInputElement>;\n  placeholder?: string;\n  value: string;\n  dataTestId?: string;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  onClose: () => void;\n}> = ({ inputRef, placeholder, value, dataTestId, onChange, onClose }) => (\n  <SearchContainer>\n    <SearchIcon sx={{ color: 'text.secondary', mr: 1 }} />\n    <SearchInput\n      ref={inputRef}\n      placeholder={placeholder}\n      value={value}\n      onChange={onChange}\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      autoCapitalize=\"off\"\n      spellCheck=\"false\"\n      inputProps={{ 'data-testid': `${dataTestId}-input` }}\n    />\n    <IconButton size=\"small\" onClick={onClose} sx={{ ml: 1 }}>\n      <CloseIcon fontSize=\"small\" />\n    </IconButton>\n  </SearchContainer>\n);\n\nconst PaletteFooter: React.FC<{ commandCount: number; copy: CommandPaletteCopy }> = ({\n  commandCount,\n  copy,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        padding: 1,\n        borderTop: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n        background: alpha(theme.palette.background.default, 0.4) }}\n    >\n      <Box sx={{ display: 'flex', gap: 1 }}>\n        <ShortcutChip\n          icon={<EnterIcon sx={{ fontSize: sxRem(12) }} />}\n          label={copy.execute}\n          size=\"small\"\n        />\n        <ShortcutChip label={copy.navigate} size=\"small\" />\n        <ShortcutChip label={copy.close} size=\"small\" />\n      </Box>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        {commandCount} commands\n      </Typography>\n    </Box>\n  );\n};\n\nexport const CommandPalette: FC<CommandPaletteProps> = ({\n  copy,\n  open,\n  onClose,\n  commands,\n  placeholder = 'Type a command or search...',\n  width,\n  maxHeight,\n  showRecent = true,\n  recentCommands = [],\n  onCommandExecute,\n  dataTestId = 'command-palette' }) => {\n  const {\n    searchQuery,\n    setSearchQuery,\n    selectedIndex,\n    setSelectedIndex,\n    searchInputRef,\n    listRef,\n    filteredCommands,\n    groupedCommands,\n    executeCommand,\n    recentCommandIds } = useCommandPalette({\n    open,\n    commands,\n    showRecent,\n    recentCommands,\n    onCommandExecute,\n    onClose });\n\n  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setSearchQuery(event.target.value);\n  };\n\n  return (\n    <StyledDialog\n      open={open}\n      onClose={onClose}\n      TransitionComponent={Transition}\n      maxWidth={false}\n      fullWidth\n      data-testid={dataTestId}\n    >\n      <DialogContent sx={{ overflow: 'visible', p: 0 }}>\n        <PaletteContainer elevation={24} sx={{ width: width ?? sxRem(640), maxHeight: maxHeight ?? sxRem(400) }}>\n          <PaletteSearch\n            inputRef={searchInputRef}\n            placeholder={placeholder}\n            value={searchQuery}\n            dataTestId={dataTestId}\n            onChange={handleSearchChange}\n            onClose={onClose}\n          />\n\n          <PaletteResults\n          copy={copy}\n            listRef={listRef}\n            dataTestId={dataTestId}\n            searchQuery={searchQuery}\n            showRecent={showRecent}\n            commands={commands}\n            recentCommandIds={recentCommandIds}\n            filteredCommands={filteredCommands}\n            groupedCommands={groupedCommands}\n            selectedIndex={selectedIndex}\n            onSelect={setSelectedIndex}\n            onExecute={executeCommand}\n          />\n\n          <PaletteFooter copy={copy} commandCount={filteredCommands.length} />\n        </PaletteContainer>\n      </DialogContent>\n    </StyledDialog>\n  );\n};\n\n// Export default\nexport default CommandPalette;\n"],"mappings":"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","names":["Transition"]}

package/dist/{chunk-KLWW67WP.js → chunk-NOKN4HRK.js}

@@ -1,11 +1,12 @@
 import {
   tabsRootStyles
-} from "./chunk-3D6HXKZM.js";
+} from "./chunk-HDJQDMHB.js";
 import {
   CustomTabPanel
-} from "./chunk-7UZ2TFIK.js";
+} from "./chunk-GNCSDUGY.js";
 import {
-  rem
+  rem,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/Tabs/Tabs.tsx
@@ -28,8 +29,8 @@ var StyledTabs = styled(MuiTabs, {
 var CloseButton = styled(Box)(({ theme }) => ({
   marginLeft: theme.spacing(0.5),
   padding: theme.spacing(0.25),
-  width: 20,
-  height: 20,
+  width: rem(theme, 20),
+  height: rem(theme, 20),
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -43,11 +44,11 @@ var CloseButton = styled(Box)(({ theme }) => ({
 }));
 var BadgeWrapper = styled(Badge)(({ theme }) => ({
   "& .MuiBadge-badge": {
-    right: -6,
-    top: 4,
+    right: rem(theme, -6),
+    top: rem(theme, 4),
     fontSize: rem(theme, 12),
-    minWidth: 16,
-    height: 16,
+    minWidth: rem(theme, 16),
+    height: rem(theme, 16),
     padding: 0
   }
 }));
@@ -156,7 +157,7 @@ var TabsBar = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) =
     sx: buildTabsSx({
       fullWidth: p.fullWidth,
       sticky: p.sticky,
-      stickyOffset: p.stickyOffset,
+      stickyOffset: sxRem(p.stickyOffset ?? 0),
       indicatorColor: p.indicatorColor,
       disabled: p.disabled
     }),
@@ -249,4 +250,4 @@ Tabs.displayName = "Tabs";
 export {
   Tabs
 };
-//# sourceMappingURL=chunk-KLWW67WP.js.map
+//# sourceMappingURL=chunk-NOKN4HRK.js.map

package/dist/chunk-NOKN4HRK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport Badge from '@mui/material/Badge/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport MuiTab from '@mui/material/Tab/index.js';\nimport MuiTabs from '@mui/material/Tabs/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { CustomTabPanel } from './TabsPanel';\nimport { tabsRootStyles } from './Tabs.styles';\nimport type { TabItem, TabsProps } from './Tabs.types';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst StyledTabs = styled(MuiTabs, {\n  shouldForwardProp: (prop) => !['customVariant', 'size', 'showDividers'].includes(prop as string) })<{ customVariant?: string; size?: string; showDividers?: boolean }>(\n  ({ theme, customVariant, size, showDividers }) => ({\n    ...tabsRootStyles({ theme, customVariant, size, showDividers }) }),\n);\n\nconst CloseButton = styled(Box)(({ theme }) => ({\n  marginLeft: theme.spacing(0.5),\n  padding: theme.spacing(0.25),\n  width: rem(theme, 20),\n  height: rem(theme, 20),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  cursor: 'pointer',\n  borderRadius: '50%',\n  color: theme.palette.action.active,\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.error.main, 0.1),\n    color: theme.palette.error.main } }));\n\nconst BadgeWrapper = styled(Badge)(({ theme }) => ({\n  '& .MuiBadge-badge': {\n    right: rem(theme, -6),\n    top: rem(theme, 4),\n    fontSize: rem(theme, 12),\n    minWidth: rem(theme, 16),\n    height: rem(theme, 16),\n    padding: 0 } }));\n\nconst TABS_DEFAULTS: Partial<TabsProps> = {\n  variant: 'default',\n  size: 'md',\n  color: 'primary',\n  fullWidth: false,\n  orientation: 'horizontal',\n  showDividers: false,\n  centered: false,\n  scrollable: false,\n  scrollButtons: 'auto',\n  sticky: false,\n  stickyOffset: 0,\n  animateContent: false,\n  animationDuration: 300,\n  persistContent: false,\n  disabled: false,\n  loading: false };\n\n/**\n * The props this component OWNS and MUI's `Tabs` does not understand (12-86).\n *\n * `rest` below is spread onto the DOM node, so anything left in it that React\n * cannot place on an element is reported — five `does not recognize the … prop`\n * warnings and three `Received false for a non-boolean attribute`, on every\n * render, in the browser console and in every host's jsdom output.\n *\n * An explicit list rather than `Object.keys(TABS_DEFAULTS)`, because the two\n * sets differ in both directions: `items`, `closeTabLabel`, `tabPanelProps` and\n * `loadingComponent` have no default and still must not reach the DOM, while\n * `orientation`, `centered` and `indicatorColor` are real MUI props that must.\n * An omission rather than more destructuring, so a prop added to `TabsProps`\n * costs a line here instead of an unused `_name` binding.\n *\n * Deliberately NOT here: `onFocus` and `onBlur`. They are ordinary DOM handlers\n * that reach the element through `rest` and nowhere else, so listing them would\n * silently stop them working.\n */\nconst OWN_PROPS = new Set<string>([\n  'items',\n  'closeTabLabel',\n  'color',\n  'size',\n  'fullWidth',\n  'scrollable',\n  'scrollButtons',\n  'sticky',\n  'stickyOffset',\n  'animateContent',\n  'animationDuration',\n  'persistContent',\n  'tabPanelProps',\n  'loading',\n  'loadingComponent',\n]);\n\n/** `props` with every {@link OWN_PROPS} key dropped — what is left is passthrough. */\nconst domPassthrough = (props: Record<string, unknown>): Record<string, unknown> =>\n  Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: TabsProps): Partial<TabsProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<TabsProps>;\n\n// Once the row is scrollable every accepted scrollButtons value ends up as\n// MUI's 'auto'. That is exactly what the previous nested ternary did — it mapped\n// 'on'/'off'/'desktop' to 'auto', and its remaining branch could only ever be\n// 'auto' anyway — so the behaviour is preserved here rather than quietly\n// changed. Worth knowing that scrollButtons=\"off\" therefore still shows buttons.\nconst resolveScrollButtons = (scrollable?: boolean): 'auto' | false =>\n  scrollable ? 'auto' : false;\n\nconst buildTabsSx = ({\n  fullWidth,\n  sticky,\n  stickyOffset,\n  indicatorColor,\n  disabled }: {\n  fullWidth?: boolean;\n  sticky?: boolean;\n  /** The pinned list's `top`, already through the theme (the prop is design px). */\n  stickyOffset: (theme: Theme) => string;\n  indicatorColor?: string;\n  disabled?: boolean;\n}) => ({\n  ...(fullWidth && { width: '100%' }),\n  // Pin the tab list while panels scroll beneath it. Opaque background + bottom\n  // divider so scrolled content does not show through.\n  ...(sticky && {\n    position: 'sticky',\n    top: stickyOffset,\n    zIndex: 2,\n    backgroundColor: 'background.default',\n    borderBottom: 1,\n    borderColor: 'divider' }),\n  ...(indicatorColor && {\n    '& .MuiTabs-indicator': { backgroundColor: indicatorColor } }),\n  ...(disabled && { opacity: 0.6, pointerEvents: 'none' }) });\n\n// A tab's label: icon, text, optional close affordance, optionally badged.\nconst TabLabel: React.FC<{\n  item: TabItem;\n  closeTabLabel: string;\n  onClose: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;\n}> = ({ item, closeTabLabel, onClose }) => {\n  const content = (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n      {item.icon}\n      <span>{item.label}</span>\n      {item.closable && (\n        <CloseButton\n          onClick={(e) => onClose(e, item.id)}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={closeTabLabel}\n          onKeyDown={(e) => {\n            if (e.key !== 'Enter' && e.key !== ' ') return;\n            onClose(e, item.id);\n          }}\n        >\n          <Close fontSize=\"inherit\" />\n        </CloseButton>\n      )}\n    </Box>\n  );\n\n  if (item.badge === undefined) return content;\n\n  return (\n    <BadgeWrapper badgeContent={item.badge} color=\"error\">\n      {content}\n    </BadgeWrapper>\n  );\n};\n\ntype ResolvedTabs = TabsProps;\n\n// The tab strip. Kept in this file because StyledTabs cannot cross a module\n// boundary (TS2742).\nconst TabsBar: React.FC<\n  ResolvedTabs & {\n    rest: Record<string, unknown>;\n    onChange: (event: React.SyntheticEvent, newValue: string) => void;\n    onCloseTab: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;\n  }\n> = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) => (\n  <StyledTabs\n    {...rest}\n    value={value}\n    onChange={onChange}\n    customVariant={p.variant}\n    size={p.size}\n    showDividers={p.showDividers}\n    orientation={p.orientation}\n    centered={p.centered}\n    // MUI only scrolls when its own `variant` is `scrollable`; map our\n    // `scrollable` flag onto it so overflowing tab rows actually scroll.\n    variant={p.scrollable ? 'scrollable' : 'standard'}\n    data-testid={dataTestId ? `${dataTestId}-list` : 'tabs-list'}\n    scrollButtons={resolveScrollButtons(p.scrollable)}\n    allowScrollButtonsMobile={p.scrollable}\n    textColor={p.color}\n    indicatorColor={p.color}\n    sx={buildTabsSx({\n      fullWidth: p.fullWidth,\n      sticky: p.sticky,\n      stickyOffset: sxRem(p.stickyOffset ?? 0),\n      indicatorColor: p.indicatorColor,\n      disabled: p.disabled })}\n  >\n    {items.map((item, index) => (\n      <MuiTab\n        key={item.id}\n        value={item.id}\n        label={<TabLabel closeTabLabel={p.closeTabLabel} item={item} onClose={onCloseTab} />}\n        disabled={item.disabled || p.disabled}\n        className={item.className}\n        id={`tab-${item.id}`}\n        aria-controls={`tabpanel-${item.id}`}\n        aria-disabled={item.disabled || p.disabled}\n        data-testid={dataTestId ? `${dataTestId}-tab-${index}` : `tabs-tab-${index}`}\n      />\n    ))}\n  </StyledTabs>\n);\n\nconst TabsPanels: React.FC<ResolvedTabs> = ({\n  items,\n  value,\n  variant,\n  animateContent,\n  animationDuration,\n  persistContent,\n  loading,\n  loadingComponent,\n  tabPanelProps,\n  dataTestId }) => (\n  <Box sx={{ mt: variant === 'enclosed' ? 0 : 2 }}>\n    {items.map((item, index) => (\n      <CustomTabPanel\n        key={item.id}\n        id={item.id}\n        value={value}\n        animate={animateContent}\n        animationDuration={animationDuration}\n        persist={persistContent}\n        loading={loading}\n        loadingComponent={loadingComponent}\n        className={tabPanelProps?.className}\n        dataTestId={dataTestId}\n        index={index}\n      >\n        {item.content}\n      </CustomTabPanel>\n    ))}\n  </Box>\n);\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n  (tabsProps, ref) => {\n    const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) } as TabsProps;\n    const {\n      // Destructured only to keep it OUT of `rest`, which is spread onto the\n      // DOM node — `{...resolved}` below is what actually carries it to\n      // `TabsBar`. Same reason as `value` on the next line.\n      closeTabLabel: _closeTabLabel,\n      value: _value,\n      onChange,\n      onTabClose,\n      className,\n      disabled,\n      showDividers,\n      variant,\n      dataTestId,\n      ...rest\n    } = resolved;\n\n    const handleChange = (event: React.SyntheticEvent, newValue: string) => {\n      if (!disabled) onChange(event, newValue);\n    };\n\n    const handleTabClose = (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => {\n      event.stopPropagation();\n      onTabClose?.(tabId);\n    };\n\n    return (\n      <Box className={className} ref={ref} data-testid={dataTestId || 'tabs'}>\n        <TabsBar\n          {...resolved}\n          // The destructuring above drops the props this component USES;\n          // `domPassthrough` drops the ones it merely OWNS. Both have to go:\n          // `rest` is spread onto the DOM node, and the second group is where\n          // 12-86's warnings came from.\n          rest={domPassthrough(rest as unknown as Record<string, unknown>)}\n          onChange={handleChange}\n          onCloseTab={handleTabClose}\n        />\n\n        {showDividers && variant !== 'enclosed' && <Divider />}\n\n        <TabsPanels {...resolved} />\n      </Box>\n    );\n  },\n);\n\nTabs.displayName = 'Tabs';\n"],"mappings":"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","names":[]}

package/dist/{chunk-LIG7TKIB.js → chunk-NYFNF7I5.js}

@@ -1,11 +1,16 @@
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/layout/SettingsLayout/SettingsLayout.styles.ts
-var RAIL_WIDTH = 300;
+var railWidth = (theme) => rem(theme, 300);
 var SR_ONLY_SX = {
   position: "absolute",
-  width: "1px",
-  height: "1px",
+  width: sxRem(1),
+  height: sxRem(1),
   padding: 0,
-  margin: "-1px",
+  margin: sxRem(-1),
   overflow: "hidden",
   clip: "rect(0, 0, 0, 0)",
   whiteSpace: "nowrap",
@@ -25,11 +30,11 @@ var STATUS_COLOR = {
 };
 
 export {
-  RAIL_WIDTH,
+  railWidth,
   SR_ONLY_SX,
   atLeastRail,
   displayAcrossRail,
   TOUCH_TARGET,
   STATUS_COLOR
 };
-//# sourceMappingURL=chunk-LIG7TKIB.js.map
+//# sourceMappingURL=chunk-NYFNF7I5.js.map

package/dist/chunk-NYFNF7I5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsLayout.styles.ts"],"sourcesContent":["import type { CSSObject, SxProps, Theme } from '@mui/material/styles/index.js';\n\nimport { rem, sxRem } from '../../../tokens/relative';\n\nimport type { SettingsNavStatus, SettingsRailBreakpoint } from './SettingsLayout.types';\n\n/** Fixed width of the left navigation rail once it has its own column (300 design px). */\nexport const railWidth = (theme: Theme): string => rem(theme, 300);\n\n/** Visually hidden, still read aloud — for text a marker's colour cannot carry. */\nexport const SR_ONLY_SX: SxProps<Theme> = {\n  position: 'absolute',\n  width: sxRem(1),\n  height: sxRem(1),\n  padding: 0,\n  margin: sxRem(-1),\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n\n/**\n * The media query for \"the rail has its own column\".\n *\n * `theme.breakpoints.up` takes a NUMBER as happily as a name, which is why\n * `railBreakpoint` accepts one: a settings area whose structural switch is at\n * 1024px has no MUI breakpoint to name (the default `lg` is 1200), and rounding\n * the design to the nearest named breakpoint moves 176px of behaviour to keep a\n * string tidy.\n */\nexport function atLeastRail(theme: Theme, breakpoint: SettingsRailBreakpoint): string {\n  return theme.breakpoints.up(breakpoint);\n}\n\n/**\n * A `display` pair across that query: `narrow` below it, `wide` at and above.\n *\n * Everything that changes shape between the two navigation modes goes through\n * this, so \"which width am I?\" is answered once, in CSS, for every part at\n * once — rather than by each part asking a media query in JavaScript and\n * answering slightly differently.\n */\nexport function displayAcrossRail(\n  theme: Theme,\n  breakpoint: SettingsRailBreakpoint,\n  narrow: string,\n  wide: string,\n): CSSObject {\n  return { display: narrow, [atLeastRail(theme, breakpoint)]: { display: wide } };\n}\n\n/** Minimum touch target, in px. Held down to 320px-wide phones, deliberately. */\nexport const TOUCH_TARGET = 44;\n\n/**\n * Palette role per situation.\n *\n * Returned as theme keys rather than hex so a marker follows the host's theme —\n * and so light and dark do not need two copies of this table.\n */\nexport const STATUS_COLOR: Record<Exclude<SettingsNavStatus, 'locked'>, string> = {\n  ok: 'success.main',\n  off: 'text.disabled',\n  new: 'error.main',\n};\n"],"mappings":";;;;;;AAOO,IAAM,YAAY,CAAC,UAAyB,IAAI,OAAO,GAAG;AAG1D,IAAM,aAA6B;AAAA,EACxC,UAAU;AAAA,EACV,OAAO,MAAM,CAAC;AAAA,EACd,QAAQ,MAAM,CAAC;AAAA,EACf,SAAS;AAAA,EACT,QAAQ,MAAM,EAAE;AAAA,EAChB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV;AAWO,SAAS,YAAY,OAAc,YAA4C;AACpF,SAAO,MAAM,YAAY,GAAG,UAAU;AACxC;AAUO,SAAS,kBACd,OACA,YACA,QACA,MACW;AACX,SAAO,EAAE,SAAS,QAAQ,CAAC,YAAY,OAAO,UAAU,CAAC,GAAG,EAAE,SAAS,KAAK,EAAE;AAChF;AAGO,IAAM,eAAe;AAQrB,IAAM,eAAqE;AAAA,EAChF,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AACP;","names":[]}

package/dist/{chunk-KK57AHWS.js → chunk-OAEYCKBN.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 
 // src/components/data-display/DataViews/data-views-header-row.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -36,4 +36,4 @@ function GridHeaderRow({
 export {
   GridHeaderRow
 };
-//# sourceMappingURL=chunk-KK57AHWS.js.map
+//# sourceMappingURL=chunk-OAEYCKBN.js.map

package/dist/{chunk-JGRE56GQ.js → chunk-OB56SZGL.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-WEBEOBN5.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -54,4 +54,4 @@ function PreviewBox({ preview, testIdPrefix }) {
 export {
   PreviewBox
 };
-//# sourceMappingURL=chunk-JGRE56GQ.js.map
+//# sourceMappingURL=chunk-OB56SZGL.js.map

package/dist/{chunk-VRDNUY4H.js → chunk-OHC3F7GJ.js}

@@ -1,16 +1,16 @@
 import {
   SettingsPanel
-} from "./chunk-2E2WOBID.js";
+} from "./chunk-QGFBIUOK.js";
 import {
   SettingsRail
-} from "./chunk-3CVTQZQJ.js";
+} from "./chunk-TNYKM4UU.js";
 import {
   activeItemLabel,
   filterGroups
 } from "./chunk-BXC6GRLE.js";
 import {
   atLeastRail
-} from "./chunk-LIG7TKIB.js";
+} from "./chunk-NYFNF7I5.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -135,4 +135,4 @@ SettingsLayout.displayName = "SettingsLayout";
 export {
   SettingsLayout
 };
-//# sourceMappingURL=chunk-VRDNUY4H.js.map
+//# sourceMappingURL=chunk-OHC3F7GJ.js.map

package/dist/chunk-OHC3F7GJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsLayout.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport React, { useMemo, useState } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\nimport { activeItemLabel, filterGroups } from './SettingsLayout.filters';\nimport { SettingsRail } from './SettingsLayout.rail';\nimport { atLeastRail } from './SettingsLayout.styles';\nimport { SettingsPanel } from './SettingsPanel';\nimport type { SettingsLayoutProps } from './SettingsLayout.types';\n\n/**\n * The props with every default already applied.\n *\n * A table through `withDefaults` rather than a `= default` per destructured\n * prop: each of those is a branch, and seven of them put the component over the\n * complexity bar before it renders anything. The single cast is what buys the\n * body non-optional values — without it every use site would restate the\n * default as a `??`, which is the same default written twice and free to drift.\n */\ntype ResolvedProps = SettingsLayoutProps &\n  Required<\n    Pick<\n      SettingsLayoutProps,\n      | 'searchPlaceholder'\n      | 'defaultQuery'\n      | 'emptySearchLabel'\n      | 'testIdPrefix'\n      | 'railBreakpoint'\n      | 'navVariant'\n      | 'atIndex'\n      | 'backLabel'\n    >\n  >;\n\nconst DEFAULTS = {\n  searchPlaceholder: 'Search settings',\n  defaultQuery: '',\n  emptySearchLabel: 'No settings match your search.',\n  testIdPrefix: 'settings',\n  railBreakpoint: 'md',\n  navVariant: 'switcher',\n  atIndex: false,\n  backLabel: 'Back',\n} satisfies Partial<SettingsLayoutProps>;\n\n/** Stacked below the rail's breakpoint, two columns at and above it. */\nfunction shellSx(breakpoint: SettingsLayoutProps['railBreakpoint'], fillHeight: boolean): SxProps<Theme> {\n  return (theme: Theme) => ({\n    display: 'flex',\n    flexDirection: 'column' as const,\n    alignItems: 'stretch',\n    gap: 1.5,\n    width: '100%',\n    minWidth: 0,\n    // Only ever at the wide shape. Narrow, the rail is a disclosure or the page\n    // itself, and two independent scrollbars on a phone is a trap rather than a\n    // convenience.\n    [atLeastRail(theme, breakpoint ?? 'md')]: {\n      flexDirection: 'row',\n      gap: 3,\n      ...(fillHeight ? { height: '100%', minHeight: 0 } : {}),\n    },\n  });\n}\n\n/**\n * A reusable, agnostic Facebook-style settings shell: a searchable left rail of\n * grouped categories/subcategories and a central panel that renders the selected\n * configuration screen (`children`). Navigation is data-driven via `groups`; the\n * host owns routing (pass `linkComponent` + item `href`, or handle `onSelectItem`).\n *\n * ## Two narrow-width shapes\n *\n * `navVariant=\"switcher\"` (the default) folds the rail into a disclosure above\n * the panel. `navVariant=\"drilldown\"` gives the phone shape instead: at the\n * area's index the LIST is the page, and inside a section the panel is the page\n * with a back link and a scrollable strip of sibling sections above it.\n *\n * ## Why the width decision is CSS and not JavaScript\n *\n * Every part that changes between the two shapes does it through a `display`\n * pair keyed on `railBreakpoint`. Nothing here asks a media query in JS and\n * renders one branch.\n *\n * That is not a performance preference. A layout that RENDERS one navigation and\n * not the other can offer the narrow width less than the wide one, and no test\n * or review catches it — the missing control simply is not in the tree to be\n * asserted about. With both forms always mounted, \"the narrow width reaches\n * everything the wide one does\" holds by construction, and an audit that counts\n * controls per width gets the same answer at both.\n */\nexport const SettingsLayout: React.FC<SettingsLayoutProps> = (props) => {\n  const {\n    title,\n    groups,\n    activeItemId,\n    onSelectItem,\n    searchPlaceholder,\n    defaultQuery,\n    emptySearchLabel,\n    emptySearchAction,\n    linkComponent,\n    children,\n    testIdPrefix,\n    railBreakpoint,\n    fillHeight = false,\n    navVariant,\n    atIndex,\n    indexHref,\n    backLabel,\n    sectionChips,\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n  const [query, setQuery] = useState(defaultQuery);\n  const [navOpen, setNavOpen] = useState(false);\n  const filteredGroups = useMemo(() => filterGroups(groups, query), [groups, query]);\n  const activeLabel = useMemo(() => activeItemLabel(groups, activeItemId), [groups, activeItemId]);\n\n  const drilldown = navVariant === 'drilldown';\n  const ariaLabel = typeof title === 'string' ? title : 'Settings';\n\n  return (\n    <Box\n      data-testid={testIdPrefix}\n      data-nav-variant={navVariant}\n      data-at-index={atIndex ? 'true' : 'false'}\n      sx={shellSx(railBreakpoint, fillHeight)}\n    >\n      <SettingsRail\n        title={title}\n        activeLabel={activeLabel}\n        navOpen={navOpen}\n        onToggleNav={() => setNavOpen((open) => !open)}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchPlaceholder}\n        emptySearchLabel={emptySearchLabel}\n        emptySearchAction={emptySearchAction}\n        filteredGroups={filteredGroups}\n        activeItemId={activeItemId}\n        linkComponent={linkComponent}\n        onSelectItem={onSelectItem}\n        onNavigate={() => setNavOpen(false)}\n        testIdPrefix={testIdPrefix}\n        variant={navVariant}\n        breakpoint={railBreakpoint}\n        atIndex={atIndex}\n        fillHeight={fillHeight}\n      />\n\n      <SettingsPanel\n        inSection={drilldown && !atIndex}\n        hideOnNarrow={drilldown && atIndex}\n        breakpoint={railBreakpoint}\n        indexHref={indexHref}\n        sectionTitle={props.sectionTitle}\n        sectionDescription={props.sectionDescription}\n        backLabel={backLabel}\n        ariaLabel={ariaLabel}\n        sectionChips={sectionChips}\n        activeItemId={activeItemId}\n        linkComponent={linkComponent}\n        onSelectItem={onSelectItem}\n        testIdPrefix={testIdPrefix}\n        fillHeight={fillHeight}\n      >\n        {children}\n      </SettingsPanel>\n    </Box>\n  );\n};\n\nSettingsLayout.displayName = 'SettingsLayout';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAEA,OAAO,SAAS;AAEhB,SAAgB,SAAS,gBAAgB;AAwHrC,SAME,KANF;AAvFJ,IAAM,WAAW;AAAA,EACf,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AACb;AAGA,SAAS,QAAQ,YAAmD,YAAqC;AACvG,SAAO,CAAC,WAAkB;AAAA,IACxB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA;AAAA;AAAA;AAAA,IAIV,CAAC,YAAY,OAAO,cAAc,IAAI,CAAC,GAAG;AAAA,MACxC,eAAe;AAAA,MACf,KAAK;AAAA,MACL,GAAI,aAAa,EAAE,QAAQ,QAAQ,WAAW,EAAE,IAAI,CAAC;AAAA,IACvD;AAAA,EACF;AACF;AA4BO,IAAM,iBAAgD,CAAC,UAAU;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,OAAO,QAAQ;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,iBAAiB,QAAQ,MAAM,aAAa,QAAQ,KAAK,GAAG,CAAC,QAAQ,KAAK,CAAC;AACjF,QAAM,cAAc,QAAQ,MAAM,gBAAgB,QAAQ,YAAY,GAAG,CAAC,QAAQ,YAAY,CAAC;AAE/F,QAAM,YAAY,eAAe;AACjC,QAAM,YAAY,OAAO,UAAU,WAAW,QAAQ;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,oBAAkB;AAAA,MAClB,iBAAe,UAAU,SAAS;AAAA,MAClC,IAAI,QAAQ,gBAAgB,UAAU;AAAA,MAEtC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,aAAa,MAAM,WAAW,CAAC,SAAS,CAAC,IAAI;AAAA,YAC7C;AAAA,YACA,eAAe;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,MAAM,WAAW,KAAK;AAAA,YAClC;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,YACZ;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,aAAa,CAAC;AAAA,YACzB,cAAc,aAAa;AAAA,YAC3B,YAAY;AAAA,YACZ;AAAA,YACA,cAAc,MAAM;AAAA,YACpB,oBAAoB,MAAM;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;","names":[]}

package/dist/{chunk-E4TNDTWV.js → chunk-OL2BEJZR.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk-YSTHOE66.js";
 import {
   Skeleton
-} from "./chunk-7F7TTOYN.js";
+} from "./chunk-BEGTLELZ.js";
 import {
   resolveTestId
 } from "./chunk-TYJR4GOF.js";
@@ -142,4 +142,4 @@ export {
   LoadingState,
   LoadingState_default
 };
-//# sourceMappingURL=chunk-E4TNDTWV.js.map
+//# sourceMappingURL=chunk-OL2BEJZR.js.map

package/dist/{chunk-NDNYD4FG.js → chunk-OS6KPL4D.js}

@@ -8,13 +8,13 @@ import {
   metaShape,
   rowStyles,
   useRowShell
-} from "./chunk-C55AWF3U.js";
+} from "./chunk-FFCJ7NR2.js";
 import {
   ListCardActions,
   ListCardCaption,
   ListCardMeta,
   ListCardTail
-} from "./chunk-2ZIHZLF5.js";
+} from "./chunk-M2JTIH5M.js";
 import {
   useDisclosure
 } from "./chunk-2JCRNWHE.js";
@@ -34,7 +34,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Card
-} from "./chunk-N6CSXHFJ.js";
+} from "./chunk-WN5PNP6F.js";
 
 // src/components/data-display/DataViews/base-list-card.tsx
 import Collapse from "@mui/material/Collapse/index.js";
@@ -179,4 +179,4 @@ function BaseListCard(props) {
 export {
   BaseListCard
 };
-//# sourceMappingURL=chunk-NDNYD4FG.js.map
+//# sourceMappingURL=chunk-OS6KPL4D.js.map