@12-apps/ui 6.36.0 → 6.38.0

package/dist/{chunk-RQ5HZDBV.js → chunk-BN742L2M.js}

@@ -4,6 +4,10 @@ import {
 import {
   fieldTextFieldStyles
 } from "./chunk-CGO452DC.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Autocomplete/Autocomplete.parts.tsx
 import LinkIcon from "@mui/icons-material/Link";
@@ -18,12 +22,12 @@ import Paper from "@mui/material/Paper/index.js";
 import Popper from "@mui/material/Popper/index.js";
 import TextField from "@mui/material/TextField/index.js";
 import Typography from "@mui/material/Typography/index.js";
-import { styled } from "@mui/material/styles/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var StyledPopper = styled(Popper)(({ theme }) => ({
   zIndex: theme.zIndex.tooltip,
   width: "100%",
-  maxHeight: 300,
+  maxHeight: rem(theme, 300),
   overflow: "auto",
   // Popper.js writes the computed position (and stamps `data-popper-placement`)
   // in a layout effect that can land AFTER the first paint. Until it does, the
@@ -33,10 +37,10 @@ var StyledPopper = styled(Popper)(({ theme }) => ({
   // visible the instant popper assigns a placement.
   "&:not([data-popper-placement])": { visibility: "hidden" }
 }));
-var InlineSuggestionDisplay = styled("div")(() => ({
+var InlineSuggestionDisplay = styled("div")(({ theme }) => ({
   position: "absolute",
   pointerEvents: "none",
-  left: "14px",
+  left: rem(theme, 14),
   // Match TextField padding
   top: "50%",
   transform: "translateY(-50%)",
@@ -73,6 +77,7 @@ function GhostOverlay({ inputValue, ghost }) {
   ] });
 }
 function AutocompleteInput(props) {
+  const theme = useTheme();
   const showOverlay = Boolean(props.ghost) && props.showGhost && props.isInputFocused;
   return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
     showOverlay && /* @__PURE__ */ jsx(GhostOverlay, { inputValue: props.inputValue, ghost: props.ghost }),
@@ -95,7 +100,7 @@ function AutocompleteInput(props) {
         className: props.inputClassName,
         InputProps: {
           startAdornment: props.startAdornment,
-          endAdornment: props.isLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : void 0
+          endAdornment: props.isLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 20) }) : void 0
         },
         inputProps: {
           role: "combobox",
@@ -165,8 +170,9 @@ function DefaultSuggestion({
   );
 }
 function LoadingRow({ label }) {
+  const theme = useTheme();
   return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [
-    /* @__PURE__ */ jsx(CircularProgress, { size: 16 }),
+    /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 16) }),
     /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: label })
   ] }) });
 }
@@ -219,7 +225,7 @@ function SuggestionListBox({
           role: "listbox",
           id: listId,
           dense: true,
-          sx: { maxHeight: 300, overflow: "auto" },
+          sx: { maxHeight: sxRem(300), overflow: "auto" },
           "data-testid": "suggestions-list",
           children: [
             items.map((item, index) => /* @__PURE__ */ jsx(
@@ -261,4 +267,4 @@ export {
   NoResultsRow,
   SuggestionListBox
 };
-//# sourceMappingURL=chunk-RQ5HZDBV.js.map
+//# sourceMappingURL=chunk-BN742L2M.js.map

package/dist/chunk-BN742L2M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Autocomplete/Autocomplete.parts.tsx"],"sourcesContent":["import LinkIcon from '@mui/icons-material/Link';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItem from '@mui/material/ListItem/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Popper from '@mui/material/Popper/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { highlightLabel, type MatchMode } from './Autocomplete.helpers';\nimport type { SuggestionItemState, SuggestionType } from './Autocomplete.types';\nimport type { AutocompleteCopy } from '../../../copy';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst StyledPopper = styled(Popper)(({ theme }) => ({\n  zIndex: theme.zIndex.tooltip,\n  width: '100%',\n  maxHeight: rem(theme, 300),\n  overflow: 'auto',\n  // Popper.js writes the computed position (and stamps `data-popper-placement`)\n  // in a layout effect that can land AFTER the first paint. Until it does, the\n  // element would paint once unpositioned — at the offset-parent origin, far\n  // left and full width — then jump under the input, a visible per-keystroke\n  // flash as the list re-renders. Hide that unpositioned first frame; it becomes\n  // visible the instant popper assigns a placement.\n  '&:not([data-popper-placement])': { visibility: 'hidden' },\n}));\n\nconst InlineSuggestionDisplay = styled('div')(({ theme }) => ({\n  position: 'absolute',\n  pointerEvents: 'none',\n  left: rem(theme, 14), // Match TextField padding\n  top: '50%',\n  transform: 'translateY(-50%)',\n  fontSize: 'inherit',\n  fontFamily: 'inherit',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  zIndex: 1,\n}));\n\nconst UserTextTwin = styled('span')({\n  visibility: 'hidden',\n});\n\nconst GhostText = styled('span')(({ theme }) => ({\n  color: theme.palette.text.secondary,\n  opacity: 0.6,\n}));\n\nconst ChipContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: theme.spacing(0.5),\n  marginBottom: theme.spacing(1),\n}));\n\n/** Leading icon for a typed suggestion (search vs. link); null for untyped items. */\nexport function suggestionTypeIcon(type: SuggestionType | undefined): React.ReactNode {\n  const sx = { color: 'text.secondary', flexShrink: 0 } as const;\n  if (type === 'link') return <LinkIcon fontSize=\"small\" sx={sx} />;\n  if (type === 'search') return <SearchIcon fontSize=\"small\" sx={sx} />;\n  return null;\n}\n\n/** The inline ghost-text overlay: an invisible twin of the typed text + the grey remainder. */\nfunction GhostOverlay({ inputValue, ghost }: { inputValue: string; ghost: string }): React.JSX.Element {\n  return (\n    <InlineSuggestionDisplay>\n      <UserTextTwin>{inputValue}</UserTextTwin>\n      <GhostText>{ghost}</GhostText>\n    </InlineSuggestionDisplay>\n  );\n}\n\nexport interface AutocompleteInputProps {\n  id: string;\n  listId: string;\n  inputRef: React.RefObject<HTMLInputElement | null>;\n  inputValue: string;\n  ghost: string;\n  showGhost: boolean;\n  isInputFocused: boolean;\n  open: boolean;\n  activeDescendant: string | undefined;\n  isLoading: boolean;\n  disabled: boolean;\n  autoFocus: boolean;\n  placeholder: string;\n  startAdornment?: React.ReactNode;\n  inputAriaLabel?: string;\n  inputClassName?: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  onFocus: () => void;\n  onBlur: () => void;\n  onCompositionStart: () => void;\n  onCompositionEnd: () => void;\n}\n\n/** The combobox text field plus its inline ghost-text overlay. */\nexport function AutocompleteInput(props: AutocompleteInputProps): React.JSX.Element {\n  const theme = useTheme();\n  const showOverlay = Boolean(props.ghost) && props.showGhost && props.isInputFocused;\n  return (\n    <Box sx={{ position: 'relative' }}>\n      {showOverlay && <GhostOverlay inputValue={props.inputValue} ghost={props.ghost} />}\n      <TextField\n        ref={props.inputRef}\n        fullWidth\n        sx={fieldTextFieldStyles}\n        value={props.inputValue}\n        onChange={props.onChange}\n        onKeyDown={props.onKeyDown}\n        onFocus={props.onFocus}\n        onBlur={props.onBlur}\n        onCompositionStart={props.onCompositionStart}\n        onCompositionEnd={props.onCompositionEnd}\n        placeholder={props.placeholder}\n        disabled={props.disabled}\n        autoFocus={props.autoFocus}\n        className={props.inputClassName}\n        InputProps={{\n          startAdornment: props.startAdornment,\n          endAdornment: props.isLoading ? <CircularProgress size={rem(theme, 20)} /> : undefined,\n        }}\n        inputProps={{\n          role: 'combobox',\n          'aria-expanded': props.open,\n          'aria-controls': props.open ? props.listId : undefined,\n          'aria-activedescendant': props.activeDescendant,\n          'aria-autocomplete': 'list',\n          'aria-label': props.inputAriaLabel,\n          id: props.id,\n        }}\n      />\n    </Box>\n  );\n}\n\n/** Selected-item chips (multiple mode). */\nexport function ChipList<T>({\n  items,\n  getKey,\n  getLabel,\n  onRemove,\n  chipClassName,\n}: {\n  items: T[];\n  getKey: (item: T) => string;\n  getLabel: (item: T) => string;\n  onRemove: (item: T) => void;\n  chipClassName?: string;\n}): React.JSX.Element {\n  return (\n    <ChipContainer data-testid=\"selected-items-container\">\n      {items.map((item, index) => (\n        <Chip\n          key={`${getKey(item)}-${index}`}\n          label={getLabel(item)}\n          onDelete={() => onRemove(item)}\n          size=\"small\"\n          className={chipClassName}\n          data-testid={`selected-chip-${index}`}\n        />\n      ))}\n    </ChipContainer>\n  );\n}\n\n/** Default suggestion row: per-type icon + highlighted label + optional description. */\nexport function DefaultSuggestion<T>({\n  item,\n  state,\n  getLabel,\n  getDescription,\n  getSuggestionType,\n  matchMode,\n}: {\n  item: T;\n  state: SuggestionItemState;\n  getLabel: (item: T) => string;\n  getDescription?: (item: T) => string | undefined;\n  getSuggestionType: (item: T) => SuggestionType | undefined;\n  matchMode: MatchMode;\n}): React.JSX.Element {\n  const label = getLabel(item);\n  const description = getDescription?.(item);\n  const displayLabel = highlightLabel(label, state.query, matchMode);\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 1,\n        width: '100%',\n        // Bold the matched prefix (not a yellow <mark> highlight).\n        '& mark': { backgroundColor: 'transparent', color: 'inherit', fontWeight: 700 },\n      }}\n    >\n      {suggestionTypeIcon(getSuggestionType(item))}\n      <ListItemText\n        primary={<span dangerouslySetInnerHTML={{ __html: displayLabel }} />}\n        secondary={description}\n      />\n    </Box>\n  );\n}\n\n/** A \"Loading…\" row shown while async suggestions resolve. */\nexport function LoadingRow({ label }: { label: string }): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <ListItem>\n      <Box display=\"flex\" alignItems=\"center\" gap={1}>\n        <CircularProgress size={rem(theme, 16)} />\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {label}\n        </Typography>\n      </Box>\n    </ListItem>\n  );\n}\n\n/** The empty \"No results found\" row. */\nexport function NoResultsRow({ label }: { label: string }): React.JSX.Element {\n  return (\n    <ListItem>\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {label}\n      </Typography>\n    </ListItem>\n  );\n}\n\n/** Keep the Popper the same width as its anchor input. */\nconst SAME_WIDTH_MODIFIER = {\n  name: 'sameWidth',\n  enabled: true,\n  fn: ({ state }: { state: { elements: { reference?: unknown }; styles: { popper?: Record<string, string> }; rects: { reference: { width: number } } } }) => {\n    if (state.elements.reference && state.styles.popper) {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    }\n  },\n  phase: 'beforeWrite' as const,\n  requires: ['computeStyles'],\n};\n\nexport interface SuggestionListBoxProps<T> {\n  copy: AutocompleteCopy;\n  open: boolean;\n  anchorEl: HTMLElement | null;\n  portal: boolean | { container?: HTMLElement };\n  listRef: React.RefObject<HTMLUListElement | null>;\n  listId: string;\n  optionIdPrefix: string;\n  items: T[];\n  activeIndex: number;\n  isLoading: boolean;\n  showNoResults: boolean;\n  getKey: (item: T) => string;\n  onSelect: (item: T) => void;\n  onHover: (index: number) => void;\n  renderItem: (item: T, active: boolean) => React.ReactNode;\n  listClassName?: string;\n  itemClassName?: string;\n  activeItemClassName?: string;\n}\n\n/** The suggestions dropdown: a same-width Popper with the option list + loading/empty rows. */\nexport function SuggestionListBox<T>({\n  copy,\n  open,\n  anchorEl,\n  portal,\n  listRef,\n  listId,\n  optionIdPrefix,\n  items,\n  activeIndex,\n  isLoading,\n  showNoResults,\n  getKey,\n  onSelect,\n  onHover,\n  renderItem,\n  listClassName,\n  itemClassName,\n  activeItemClassName,\n}: SuggestionListBoxProps<T>): React.JSX.Element {\n  return (\n    <StyledPopper\n      open={open}\n      anchorEl={anchorEl}\n      placement=\"bottom-start\"\n      disablePortal={!portal}\n      modifiers={[SAME_WIDTH_MODIFIER]}\n    >\n      <Paper elevation={8} className={listClassName} data-testid=\"suggestions-dropdown\">\n        <List\n          ref={listRef}\n          role=\"listbox\"\n          id={listId}\n          dense\n          sx={{ maxHeight: sxRem(300), overflow: 'auto' }}\n          data-testid=\"suggestions-list\"\n        >\n          {items.map((item, index) => (\n            <ListItem\n              key={getKey(item)}\n              id={`${optionIdPrefix}-${index}`}\n              role=\"option\"\n              component=\"div\"\n              sx={{\n                cursor: 'pointer',\n                backgroundColor: index === activeIndex ? 'action.hover' : 'transparent',\n                '&:hover': { backgroundColor: 'action.hover' },\n              }}\n              aria-selected={index === activeIndex}\n              onMouseDown={(e) => e.preventDefault()}\n              onClick={() => onSelect(item)}\n              onMouseEnter={() => onHover(index)}\n              className={`${itemClassName} ${index === activeIndex ? activeItemClassName : ''}`}\n              data-testid={`suggestion-item-${index}`}\n            >\n              {renderItem(item, index === activeIndex)}\n            </ListItem>\n          ))}\n          {isLoading && <LoadingRow label={copy.loading} />}\n          {showNoResults && <NoResultsRow label={copy.noResults} />}\n        </List>\n      </Paper>\n    </StyledPopper>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-R75DZ3AK.js → chunk-BVLMKSHX.js}

@@ -3,7 +3,7 @@ import {
   StepContentComponent,
   StepIndicatorComponent,
   StepItemRow
-} from "./chunk-OATHOXIU.js";
+} from "./chunk-MC4KYGSX.js";
 
 // src/components/utility/WorkflowStep/WorkflowStepRow.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -78,4 +78,4 @@ var StepRow = ({
 export {
   StepRow
 };
-//# sourceMappingURL=chunk-R75DZ3AK.js.map
+//# sourceMappingURL=chunk-BVLMKSHX.js.map

package/dist/{chunk-PMP6WJJS.js → chunk-BWMHGENX.js}

@@ -1,5 +1,6 @@
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/Pagination/Pagination.styles.ts
@@ -7,14 +8,14 @@ import { alpha } from "@mui/material/styles/index.js";
 var ITEM_SIZE_STYLES = {
   sm: (theme) => ({
     fontSize: rem(theme, 14),
-    minWidth: 28,
-    height: 28,
+    minWidth: rem(theme, 28),
+    height: rem(theme, 28),
     padding: theme.spacing(0.25, 0.5)
   }),
   lg: (theme) => ({
     fontSize: rem(theme, 18),
-    minWidth: 44,
-    height: 44,
+    minWidth: rem(theme, 44),
+    height: rem(theme, 44),
     padding: theme.spacing(1, 1.5)
   })
 };
@@ -23,33 +24,33 @@ var ITEM_VARIANTS = {
     borderRadius: theme.spacing(1),
     "&:hover": {
       backgroundColor: alpha(theme.palette.primary.main, 0.08),
-      transform: "translateY(-1px)",
-      boxShadow: `0 2px 8px ${alpha(theme.palette.primary.main, 0.15)}`
+      transform: `translateY(${rem(theme, -1)})`,
+      boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.primary.main, 0.15)}`
     },
     "&.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,
-        transform: "translateY(-2px)"
+        transform: `translateY(${rem(theme, -2)})`
       }
     }
   }),
   rounded: (theme, customSize) => ({
     borderRadius: "50%",
-    minWidth: customSize === "sm" ? 28 : customSize === "lg" ? 44 : 36,
-    width: customSize === "sm" ? 28 : customSize === "lg" ? 44 : 36,
+    minWidth: rem(theme, customSize === "sm" ? 28 : customSize === "lg" ? 44 : 36),
+    width: rem(theme, customSize === "sm" ? 28 : customSize === "lg" ? 44 : 36),
     "&:hover": {
       backgroundColor: alpha(theme.palette.primary.main, 0.08),
       transform: "scale(1.1)",
-      boxShadow: `0 4px 16px ${alpha(theme.palette.primary.main, 0.2)}`
+      boxShadow: `0 ${rems(theme, 4, 16)} ${alpha(theme.palette.primary.main, 0.2)}`
     },
     "&.Mui-selected": {
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.primary.contrastText,
       transform: "scale(1.05)",
-      boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.3)}`,
+      boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(theme.palette.primary.main, 0.3)}`,
       "&:hover": {
         backgroundColor: theme.palette.primary.dark,
         transform: "scale(1.15)"
@@ -58,9 +59,9 @@ var ITEM_VARIANTS = {
   }),
   dots: (theme, customSize) => ({
     borderRadius: "50%",
-    minWidth: customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10,
-    width: customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10,
-    height: customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10,
+    minWidth: rem(theme, customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10),
+    width: rem(theme, customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10),
+    height: rem(theme, customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10),
     fontSize: 0,
     backgroundColor: alpha(theme.palette.text.secondary, 0.3),
     "&:hover": {
@@ -100,9 +101,9 @@ var ITEM_VARIANTS = {
         left: "50%",
         transform: "translateX(-50%)",
         width: "60%",
-        height: 2,
+        height: rem(theme, 2),
         backgroundColor: theme.palette.primary.main,
-        borderRadius: 1
+        borderRadius: rem(theme, 1)
       }
     }
   })
@@ -138,4 +139,4 @@ var paginationStyles = ({
 export {
   paginationStyles
 };
-//# sourceMappingURL=chunk-PMP6WJJS.js.map
+//# sourceMappingURL=chunk-BWMHGENX.js.map

package/dist/chunk-BWMHGENX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Pagination/Pagination.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst ITEM_SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {\n  sm: (theme) => ({\n      fontSize: rem(theme, 14),\n      minWidth: rem(theme, 28),\n      height: rem(theme, 28),\n      padding: theme.spacing(0.25, 0.5) }),\n  lg: (theme) => ({\n      fontSize: rem(theme, 18),\n      minWidth: rem(theme, 44),\n      height: rem(theme, 44),\n      padding: theme.spacing(1, 1.5) }) };\n\n// One variant applies at a time, so a lookup replaces the mutually exclusive\n// spreads.\nconst ITEM_VARIANTS: Record<string, (theme: Theme, customSize?: string) => CSSObject> = {\n  default: (theme, _customSize) => ({\n      borderRadius: theme.spacing(1),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.08),\n        transform: `translateY(${rem(theme, -1)})`,\n        boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.primary.main, 0.15)}` },\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          transform: `translateY(${rem(theme, -2)})` } } }),\n  rounded: (theme, customSize) => ({\n      borderRadius: '50%',\n      minWidth: rem(theme, customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36),\n      width: rem(theme, customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.08),\n        transform: 'scale(1.1)',\n        boxShadow: `0 ${rems(theme, 4, 16)} ${alpha(theme.palette.primary.main, 0.2)}` },\n      '&.Mui-selected': {\n        backgroundColor: theme.palette.primary.main,\n        color: theme.palette.primary.contrastText,\n        transform: 'scale(1.05)',\n        boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(theme.palette.primary.main, 0.3)}`,\n        '&:hover': {\n          backgroundColor: theme.palette.primary.dark,\n          transform: 'scale(1.15)' } } }),\n  dots: (theme, customSize) => ({\n      borderRadius: '50%',\n      minWidth: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),\n      width: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),\n      height: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),\n      fontSize: 0,\n      backgroundColor: alpha(theme.palette.text.secondary, 0.3),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.5),\n        transform: 'scale(1.3)' },\n      '&.Mui-selected': {\n        backgroundColor: theme.palette.primary.main,\n        transform: 'scale(1.2)',\n        '&:hover': {\n          backgroundColor: theme.palette.primary.dark,\n          transform: 'scale(1.4)' } },\n      '&.MuiPaginationItem-previousNext, &.MuiPaginationItem-firstLast': {\n        display: 'none' } }),\n  minimal: (theme, _customSize) => ({\n      borderRadius: theme.spacing(0.5),\n      backgroundColor: 'transparent',\n      color: theme.palette.text.secondary,\n      padding: theme.spacing(0.5, 1),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.04),\n        color: theme.palette.primary.main },\n      '&.Mui-selected': {\n        backgroundColor: 'transparent',\n        color: theme.palette.primary.main,\n        fontWeight: 600,\n        position: 'relative',\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          bottom: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          width: '60%',\n          height: rem(theme, 2),\n          backgroundColor: theme.palette.primary.main,\n          borderRadius: rem(theme, 1) } } }) };\n\nconst itemSizeStyles = (theme: Theme, customSize?: string): CSSObject =>\n  customSize ? (ITEM_SIZE_STYLES[customSize]?.(theme) ?? {}) : {};\n\nconst itemVariantStyles = (theme: Theme, customVariant?: string, customSize?: string): CSSObject =>\n  customVariant ? (ITEM_VARIANTS[customVariant]?.(theme, customSize) ?? {}) : {};\n\n// The pagination list's own styling, lifted out so the styled() callback is a\n// single spread.\nexport const paginationStyles = ({\n  theme,\n  customVariant,\n  customSize }: {\n  theme: Theme;\n  customVariant?: string;\n  customSize?: string;\n}): CSSObject => ({\n  '& .MuiPagination-ul': {\n    gap: customVariant === 'minimal' ? theme.spacing(0.5) : theme.spacing(1) },\n\n  '& .MuiPaginationItem-root': {\n    ...itemSizeStyles(theme, customSize),\n    ...itemVariantStyles(theme, customVariant, customSize),\n    transition: 'all 0.2s ease',\n    fontWeight: 500,\n\n\n\n\n\n    // Default variant (flat design)\n\n\n    // Rounded variant\n\n\n    // Dots variant (minimal circular dots)\n\n\n    // Minimal variant (text-only)\n\n  },\n\n  // Hide ellipsis for dots variant\n  ...(customVariant === 'dots' && {\n    '& .MuiPaginationItem-ellipsis': {\n      display: 'none' } }) });\n"],"mappings":"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","names":[]}

package/dist/{chunk-7EQCZO56.js → chunk-C3LZ3OGJ.js}

@@ -8,25 +8,25 @@ import {
 // src/components/form/Command/Command.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var SIZE_MAP = {
-  xs: { width: 400, fontPx: 12 },
-  sm: { width: 450, fontPx: 14 },
-  md: { width: 500, fontPx: 16 },
-  lg: { width: 550, fontPx: 18 },
-  xl: { width: 600, fontPx: 20 }
+  xs: { widthPx: 400, fontPx: 12 },
+  sm: { widthPx: 450, fontPx: 14 },
+  md: { widthPx: 500, fontPx: 16 },
+  lg: { widthPx: 550, fontPx: 18 },
+  xl: { widthPx: 600, fontPx: 20 }
 };
 var commandSizeStyles = (theme, size) => {
-  const { width, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;
-  return { width: rem(theme, width), fontSize: rem(theme, fontPx) };
+  const { widthPx, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;
+  return { width: rem(theme, widthPx), fontSize: rem(theme, fontPx) };
 };
 var emphasisStyles = (theme, color, glow, pulse) => ({
   ...glow && {
-    boxShadow: `0 0 20px ${alpha(accentFor(theme, color).main, 0.4)}`
+    boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentFor(theme, color).main, 0.4)}`
   },
   ...pulse && {
     animation: "pulse 2s infinite",
     "@keyframes pulse": {
       "0%": { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },
-      "70%": { boxShadow: `0 0 0 10px ${alpha(accentFor(theme, color).main, 0)}` },
+      "70%": { boxShadow: `0 0 0 ${rem(theme, 10)} ${alpha(accentFor(theme, color).main, 0)}` },
       "100%": { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` }
     }
   }
@@ -36,7 +36,7 @@ var surfaceStyles = (theme, variant, color) => {
     case "glass":
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: "blur(20px)",
+        backdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`
       };
     case "gradient":
@@ -64,4 +64,4 @@ export {
   commandSizeStyles,
   commandPaperStyles
 };
-//# sourceMappingURL=chunk-7EQCZO56.js.map
+//# sourceMappingURL=chunk-C3LZ3OGJ.js.map

package/dist/chunk-C3LZ3OGJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Command/Command.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { CommandProps } from './Command.types';\nimport { accentFor, rem } from '../../../tokens/scales';\n\ntype CommandVariant = NonNullable<CommandProps['variant']>;\ntype CommandColor = NonNullable<CommandProps['color']>;\ntype CommandSize = NonNullable<CommandProps['size']>;\n\nconst SIZE_MAP: Record<CommandSize, { widthPx: number; fontPx: number }> = {\n  xs: { widthPx: 400, fontPx: 12 },\n  sm: { widthPx: 450, fontPx: 14 },\n  md: { widthPx: 500, fontPx: 16 },\n  lg: { widthPx: 550, fontPx: 18 },\n  xl: { widthPx: 600, fontPx: 20 },\n};\n\n/** The paper's width and type for a size, both design px read through the type scale. */\nexport const commandSizeStyles = (theme: Theme, size: CommandSize) => {\n  const { widthPx, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;\n  return { width: rem(theme, widthPx), fontSize: rem(theme, fontPx) };\n};\n\nconst emphasisStyles = (\n  theme: Theme,\n  color: CommandColor,\n  glow: boolean,\n  pulse: boolean,\n): CSSObject => ({\n  ...(glow && {\n    boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentFor(theme, color).main, 0.4)}`,\n  }),\n  ...(pulse && {\n    animation: 'pulse 2s infinite',\n    '@keyframes pulse': {\n      '0%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },\n      '70%': { boxShadow: `0 0 0 ${rem(theme, 10)} ${alpha(accentFor(theme, color).main, 0)}` },\n      '100%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` },\n    },\n  }),\n});\n\nconst surfaceStyles = (\n  theme: Theme,\n  variant: CommandVariant,\n  color: CommandColor,\n): CSSObject => {\n  switch (variant) {\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,\n      };\n    case 'gradient':\n      return {\n        background: `linear-gradient(135deg, ${accentFor(theme, color).main}, ${accentFor(theme, color).dark})`,\n        color: accentFor(theme, color).contrastText,\n      };\n    case 'elevated':\n      return { boxShadow: theme.shadows[8] };\n    case 'minimal':\n      return { border: 'none', boxShadow: 'none' };\n    default:\n      return {};\n  }\n};\n\n/**\n * Every variant shares the same transition and the same optional glow/pulse; only\n * the surface — background, border, shadow — differs.\n */\nexport const commandPaperStyles = (\n  theme: Theme,\n  { variant, color, glow, pulse }: {\n    variant: CommandVariant;\n    color: CommandColor;\n    glow: boolean;\n    pulse: boolean;\n  },\n): CSSObject => ({\n  transition: theme.transitions.create(['all'], {\n    duration: theme.transitions.duration.standard,\n  }),\n  ...emphasisStyles(theme, color, glow, pulse),\n  ...surfaceStyles(theme, variant, color),\n});\n"],"mappings":";;;;;;;;AAAA,SAAS,aAAa;AAUtB,IAAM,WAAqE;AAAA,EACzE,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AACjC;AAGO,IAAM,oBAAoB,CAAC,OAAc,SAAsB;AACpE,QAAM,EAAE,SAAS,OAAO,IAAI,SAAS,IAAI,KAAK,SAAS;AACvD,SAAO,EAAE,OAAO,IAAI,OAAO,OAAO,GAAG,UAAU,IAAI,OAAO,MAAM,EAAE;AACpE;AAEA,IAAM,iBAAiB,CACrB,OACA,OACA,MACA,WACe;AAAA,EACf,GAAI,QAAQ;AAAA,IACV,WAAW,OAAO,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,EAC9E;AAAA,EACA,GAAI,SAAS;AAAA,IACX,WAAW;AAAA,IACX,oBAAoB;AAAA,MAClB,MAAM,EAAE,WAAW,WAAW,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG;AAAA,MACzE,OAAO,EAAE,WAAW,SAAS,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG;AAAA,MACxF,QAAQ,EAAE,WAAW,WAAW,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG;AAAA,IAC3E;AAAA,EACF;AACF;AAEA,IAAM,gBAAgB,CACpB,OACA,SACA,UACc;AACd,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,QACL,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,QAC1D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QACtC,QAAQ,aAAa,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,MAC/D;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,YAAY,2BAA2B,UAAU,OAAO,KAAK,EAAE,IAAI,KAAK,UAAU,OAAO,KAAK,EAAE,IAAI;AAAA,QACpG,OAAO,UAAU,OAAO,KAAK,EAAE;AAAA,MACjC;AAAA,IACF,KAAK;AACH,aAAO,EAAE,WAAW,MAAM,QAAQ,CAAC,EAAE;AAAA,IACvC,KAAK;AACH,aAAO,EAAE,QAAQ,QAAQ,WAAW,OAAO;AAAA,IAC7C;AACE,aAAO,CAAC;AAAA,EACZ;AACF;AAMO,IAAM,qBAAqB,CAChC,OACA,EAAE,SAAS,OAAO,MAAM,MAAM,OAMf;AAAA,EACf,YAAY,MAAM,YAAY,OAAO,CAAC,KAAK,GAAG;AAAA,IAC5C,UAAU,MAAM,YAAY,SAAS;AAAA,EACvC,CAAC;AAAA,EACD,GAAG,eAAe,OAAO,OAAO,MAAM,KAAK;AAAA,EAC3C,GAAG,cAAc,OAAO,SAAS,KAAK;AACxC;","names":[]}

package/dist/{chunk-ST4YYVUK.js → chunk-C5RQBTRZ.js}

@@ -1,3 +1,7 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx
 import Paper from "@mui/material/Paper/index.js";
 import { alpha, useTheme } from "@mui/material/styles/index.js";
@@ -13,8 +17,8 @@ var AddressSuggestionsPaper = (props) => {
       sx: {
         mt: 1,
         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)}`
       }
     }
@@ -24,4 +28,4 @@ var AddressSuggestionsPaper = (props) => {
 export {
   AddressSuggestionsPaper
 };
-//# sourceMappingURL=chunk-ST4YYVUK.js.map
+//# sourceMappingURL=chunk-C5RQBTRZ.js.map

package/dist/chunk-C5RQBTRZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx"],"sourcesContent":["import type { PaperProps } from '@mui/material/Paper/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\n// The dropdown surface, frosted to match the glass field.\nexport const AddressSuggestionsPaper: FC<PaperProps> = (props) => {\n  const theme = useTheme();\n\n  return (\n    <Paper\n      {...props}\n      elevation={8}\n      data-testid=\"address-suggestions-dropdown\"\n      sx={{\n        mt: 1,\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      }}\n    />\n  );\n};\n"],"mappings":";;;;;AACA,OAAO,WAAW;AAClB,SAAS,OAAO,gBAAgB;AAW5B;AAJG,IAAM,0BAA0C,CAAC,UAAU;AAChE,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC;AAAA,QACrI,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QACtC,sBAAsB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QAC5C,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AAAA,MACzD;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/{chunk-QAP3FW33.js → chunk-C66RGVAS.js}

@@ -3,10 +3,17 @@ import {
 } from "./chunk-RHIDWUK7.js";
 import {
   ScrollViewport
-} from "./chunk-T3WHW7ZC.js";
+} from "./chunk-BAZXVFLR.js";
 import {
   ScrollAreaContent
-} from "./chunk-4OEKIFBC.js";
+} from "./chunk-4VMFS3VJ.js";
+import {
+  sizeCss
+} from "./chunk-I7GSRTGQ.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/ScrollArea/ScrollArea.tsx
 import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
@@ -138,11 +145,11 @@ var ScrollToTopFab = ({
       onClick,
       sx: {
         position: "absolute",
-        bottom: 16,
-        right: 16,
+        bottom: sxRem(16),
+        right: sxRem(16),
         zIndex: 1,
         backgroundColor: glass ? alpha(theme.palette.primary.main, 0.2) : theme.palette.primary.main,
-        backdropFilter: glass ? "blur(10px)" : "none",
+        backdropFilter: glass ? `blur(${rem(theme, 10)})` : "none",
         "&:hover": {
           backgroundColor: glass ? alpha(theme.palette.primary.main, 0.3) : theme.palette.primary.dark
         }
@@ -151,16 +158,27 @@ var ScrollToTopFab = ({
     }
   ) });
 };
+function outerBoxSx(theme, size, sx) {
+  return {
+    position: "relative",
+    width: sizeCss(theme, size.width),
+    height: sizeCss(theme, size.height),
+    maxHeight: sizeCss(theme, size.maxHeight),
+    maxWidth: sizeCss(theme, size.maxWidth),
+    ...sx
+  };
+}
 var ScrollArea = (componentProps) => {
+  const theme = useTheme();
   const resolved = resolveScrollAreaProps(componentProps);
   const {
     regionLabel,
     scrollToTopLabel,
     children,
-    width,
-    height,
-    maxHeight,
-    maxWidth,
+    width: _width,
+    height: _height,
+    maxHeight: _maxHeight,
+    maxWidth: _maxWidth,
     orientation: _orientation,
     scrollbarSize: _scrollbarSize,
     autoHide,
@@ -183,21 +201,13 @@ var ScrollArea = (componentProps) => {
     sx,
     ...props
   } = resolved;
-  const {
-    scrollRef,
-    setScrollRef,
-    isScrolling,
-    showScrollToTop,
-    containerDimensions,
-    handleScroll,
-    scrollToTop
-  } = useScrollArea({ ...resolved, externalScrollRef });
+  const { scrollRef, setScrollRef, isScrolling, showScrollToTop, containerDimensions, handleScroll, scrollToTop } = useScrollArea({ ...resolved, externalScrollRef });
   const shouldShowScrollbar = alwaysShowScrollbar || !autoHide || isScrolling;
   return /* @__PURE__ */ jsxs(
     Box,
     {
       "data-testid": testId,
-      sx: { position: "relative", width, height, maxHeight, maxWidth, ...sx },
+      sx: outerBoxSx(theme, resolved, sx),
       ...props,
       children: [
         /* @__PURE__ */ jsx(
@@ -237,4 +247,4 @@ var ScrollArea = (componentProps) => {
 export {
   ScrollArea
 };
-//# sourceMappingURL=chunk-QAP3FW33.js.map
+//# sourceMappingURL=chunk-C66RGVAS.js.map

package/dist/chunk-C66RGVAS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';\nimport Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Fab from '@mui/material/Fab/index.js';\nimport Zoom from '@mui/material/Zoom/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\n\nimport type { ResolvedScrollAreaProps } from './ScrollArea.helpers';\nimport { resolveScrollAreaProps } from './ScrollArea.helpers';\nimport { sizeCss } from './ScrollArea.styles';\nimport type { ScrollAreaProps } from './ScrollArea.types';\nimport { ScrollAreaContent } from './ScrollAreaContent';\nimport { ScrollViewport } from './ScrollViewport';\n\n// Owns the scroll container ref (merging in any ref the caller passed) and\n// reports size changes through a ResizeObserver.\nconst useObservedScrollRef = ({\n  externalScrollRef,\n  onResize }: {\n  externalScrollRef?: React.Ref<HTMLDivElement>;\n  onResize?: ScrollAreaProps['onResize'];\n}) => {\n  const internalScrollRef = useRef<HTMLDivElement>(null);\n  const [containerDimensions, setContainerDimensions] = useState({ width: 0, height: 0 });\n\n  // Track container dimensions with ResizeObserver\n  useEffect(() => {\n    if (!internalScrollRef.current) return;\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (entry) {\n        const { width, height } = entry.contentRect;\n        setContainerDimensions({ width, height });\n        onResize?.({ width, height });\n      }\n    });\n\n    resizeObserver.observe(internalScrollRef.current);\n    return () => resizeObserver.disconnect();\n  }, [onResize]);\n\n  // Callback ref that updates both internal and external refs\n  const setScrollRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      // Update internal ref\n      (internalScrollRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      // Update external ref if provided\n      if (externalScrollRef) {\n        (externalScrollRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    },\n    [externalScrollRef],\n  );\n\n  // Use internal ref for accessing the element\n\n  return { scrollRef: internalScrollRef, setScrollRef, containerDimensions };\n};\n\n// Scroll position, the transient \"is scrolling\" flag that drives auto-hide, the\n// observed container size, and the scroll-to-top affordance.\n// The scrollbar shows while scrolling and hides once movement stops.\nconst useAutoHide = ({\n  autoHide,\n  alwaysShowScrollbar,\n  autoHideDelay }: {\n  autoHide: boolean;\n  alwaysShowScrollbar: boolean;\n  autoHideDelay: number;\n}) => {\n  const [isScrolling, setIsScrolling] = useState(false);\n  const timeoutRef = useRef<number | undefined>(undefined);\n\n  const noteScroll = useCallback(() => {\n    if (!autoHide || alwaysShowScrollbar) return;\n\n    setIsScrolling(true);\n    window.clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(() => setIsScrolling(false), autoHideDelay);\n  }, [autoHide, alwaysShowScrollbar, autoHideDelay]);\n\n  useEffect(() => () => window.clearTimeout(timeoutRef.current), []);\n\n  return { isScrolling, noteScroll };\n};\n\nconst useScrollArea = (\n  props: ResolvedScrollAreaProps & { externalScrollRef?: React.Ref<HTMLDivElement> },\n) => {\n  const {\n    disabled,\n    onScroll,\n    onResize,\n    externalScrollRef,\n    autoHide,\n    autoHideDelay,\n    alwaysShowScrollbar,\n    scrollToTopButton,\n    scrollToTopThreshold,\n    smoothScroll } = props;\n\n  const { scrollRef, setScrollRef, containerDimensions } = useObservedScrollRef({\n    externalScrollRef,\n    onResize });\n  const [showScrollToTop, setShowScrollToTop] = useState(false);\n  const { isScrolling, noteScroll } = useAutoHide({\n    autoHide,\n    alwaysShowScrollbar,\n    autoHideDelay });\n\n  const handleScroll = useCallback(\n    (event: React.UIEvent<HTMLDivElement>) => {\n      if (disabled) return;\n\n      noteScroll();\n\n      if (scrollToTopButton && scrollRef.current) {\n        setShowScrollToTop(scrollRef.current.scrollTop > scrollToTopThreshold);\n      }\n\n      onScroll?.(event);\n    },\n    [disabled, noteScroll, scrollToTopButton, scrollToTopThreshold, onScroll, scrollRef],\n  );\n\n  const scrollToTop = useCallback(() => {\n    scrollRef.current?.scrollTo({ top: 0, behavior: smoothScroll ? 'smooth' : 'auto' });\n  }, [smoothScroll, scrollRef]);\n\n  return {\n    scrollRef,\n    setScrollRef,\n    isScrolling,\n    showScrollToTop,\n    containerDimensions,\n    handleScroll,\n    scrollToTop };\n};\n\nconst LoadingOverlay: FC = () => (\n  <Box\n    sx={{\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n      zIndex: 10 }}\n  >\n    <CircularProgress />\n  </Box>\n);\n\n// The label is guarded at the call site rather than defaulted: the props union\n// already makes it required alongside `scrollToTopButton`, and a fab with an\n// empty accessible name is the exact failure this port exists to remove.\nconst ScrollToTopFab: FC<{\n  visible: boolean;\n  glass: boolean;\n  scrollToTopLabel: string;\n  onClick: () => void;\n}> = ({\n  visible,\n  glass,\n  scrollToTopLabel,\n  onClick }) => {\n  const theme = useTheme();\n\n  return (\n    <Zoom in={visible}>\n      <Fab\n        size=\"small\"\n        aria-label={scrollToTopLabel}\n        onClick={onClick}\n        sx={{\n          position: 'absolute',\n          bottom: sxRem(16),\n          right: sxRem(16),\n          zIndex: 1,\n          backgroundColor: glass\n            ? alpha(theme.palette.primary.main, 0.2)\n            : theme.palette.primary.main,\n          backdropFilter: glass ? `blur(${rem(theme, 10)})` : 'none',\n          '&:hover': {\n            backgroundColor: glass\n              ? alpha(theme.palette.primary.main, 0.3)\n              : theme.palette.primary.dark } }}\n      >\n        <KeyboardArrowUp />\n      </Fab>\n    </Zoom>\n  );\n};\n\n/** The outer box: its size props through the type scale, then the caller's `sx`. */\nfunction outerBoxSx(\n  theme: Theme,\n  size: Pick<ScrollAreaProps, 'width' | 'height' | 'maxHeight' | 'maxWidth'>,\n  sx: ScrollAreaProps['sx'],\n): SxProps<Theme> {\n  return {\n    position: 'relative',\n    width: sizeCss(theme, size.width),\n    height: sizeCss(theme, size.height),\n    maxHeight: sizeCss(theme, size.maxHeight),\n    maxWidth: sizeCss(theme, size.maxWidth),\n    ...sx,\n  } as SxProps<Theme>;\n}\n\nexport const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {\n  const theme = useTheme();\n  const resolved = resolveScrollAreaProps(componentProps);\n  const {\n    regionLabel,\n    scrollToTopLabel,\n    children,\n    width: _width,\n    height: _height,\n    maxHeight: _maxHeight,\n    maxWidth: _maxWidth,\n    orientation: _orientation,\n    scrollbarSize: _scrollbarSize,\n    autoHide,\n    autoHideDelay: _autoHideDelay,\n    smoothScroll: _smoothScroll,\n    variant,\n    onScroll: _onScroll,\n    scrollToTopButton,\n    scrollToTopThreshold: _scrollToTopThreshold,\n    scrollbarColor: _scrollbarColor,\n    scrollbarTrackColor: _scrollbarTrackColor,\n    contentPadding: _contentPadding,\n    alwaysShowScrollbar,\n    disabled,\n    loading,\n    emptyContent,\n    testId,\n    scrollRef: externalScrollRef,\n    onResize: _onResize,\n    sx,\n    ...props\n  } = resolved;\n\n  const { scrollRef, setScrollRef, isScrolling, showScrollToTop, containerDimensions, handleScroll, scrollToTop } =\n    useScrollArea({ ...resolved, externalScrollRef });\n\n  // Auto-hide keeps the scrollbar out of the way until the user is scrolling.\n  const shouldShowScrollbar = alwaysShowScrollbar || !autoHide || isScrolling;\n\n  return (\n    <Box\n      data-testid={testId}\n      sx={outerBoxSx(theme, resolved, sx)}\n      {...props}\n    >\n      <ScrollViewport\n        {...resolved}\n        regionLabel={regionLabel}\n        shouldShowScrollbar={shouldShowScrollbar}\n        setScrollRef={setScrollRef}\n        onScroll={handleScroll}\n      >\n        <ScrollAreaContent\n          emptyContent={emptyContent}\n          scrollRef={scrollRef}\n          containerWidth={containerDimensions.width}\n        >\n          {children}\n        </ScrollAreaContent>\n      </ScrollViewport>\n\n      {loading && <LoadingOverlay />}\n\n      {scrollToTopButton && scrollToTopLabel && !disabled && !loading && (\n        <ScrollToTopFab\n          scrollToTopLabel={scrollToTopLabel}\n          visible={showScrollToTop}\n          glass={variant === 'glass'}\n          onClick={scrollToTop}\n        />\n      )}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-B7BNNSM2.js → chunk-CNQUCNEA.js}

@@ -1,27 +1,27 @@
 import {
   DataViewsDisplayPanel
-} from "./chunk-DY4BP5WA.js";
+} from "./chunk-Y7F5JBAT.js";
 import {
   DataViewsExportMenu
-} from "./chunk-RKI3MRKX.js";
+} from "./chunk-6N4AA2Y7.js";
 import {
   renderBulkActions
-} from "./chunk-KJK2Q35C.js";
+} from "./chunk-PPRV4LTM.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   FilterTrigger
-} from "./chunk-L4QCIUTJ.js";
+} from "./chunk-UMNXSQ7I.js";
 import {
   ContentToolbar
-} from "./chunk-3VMGE7CU.js";
+} from "./chunk-TZFBJ47T.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -136,4 +136,4 @@ function GridToolbar(props) {
 export {
   GridToolbar
 };
-//# sourceMappingURL=chunk-B7BNNSM2.js.map
+//# sourceMappingURL=chunk-CNQUCNEA.js.map

package/dist/{chunk-GGWICBJD.js → chunk-CPAJYJUD.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   Form
-} from "./chunk-2HVNPWFV.js";
+} from "./chunk-D6KL74KI.js";
 
 // src/components/form/total-form/FormContainer.tsx
 import { validateFields } from "@12-apps/forms-core";
@@ -55,4 +55,4 @@ function FormContainer({
 export {
   FormContainer
 };
-//# sourceMappingURL=chunk-GGWICBJD.js.map
+//# sourceMappingURL=chunk-CPAJYJUD.js.map

package/dist/{chunk-DMWSXWCZ.js → chunk-CZIX4BW2.js}

@@ -1,16 +1,16 @@
 import {
   DeleteViewDialog
-} from "./chunk-4WQ3YXQL.js";
+} from "./chunk-BFMDA6UO.js";
 import {
   DataViewsGrid
-} from "./chunk-5TJRJSJY.js";
+} from "./chunk-5OBXEMQO.js";
 import {
   viewStateKey
 } from "./chunk-ZOLAYP2D.js";
 import {
   ViewDialogs,
   ViewMutationErrorAlert
-} from "./chunk-PWF32ILG.js";
+} from "./chunk-2OYFTSG4.js";
 import {
   useSavedViewsController
 } from "./chunk-HR7YTBR7.js";
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-DMWSXWCZ.js.map
+//# sourceMappingURL=chunk-CZIX4BW2.js.map

package/dist/{chunk-CAHWCSRE.js → chunk-D46SLMCX.js}

@@ -1,3 +1,10 @@
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/layout/Separator/Separator.styles.ts
 var THICKNESS_PX = {
   xs: 1,
@@ -53,21 +60,28 @@ var borderEdges = (isHorizontal, thickness, style, color) => {
     [`border${leading}Color`]: color
   };
 };
-var separatorBlockMargin = (size, margin, isHorizontal) => {
+var separatorBlockMargin = (theme, size, margin, isHorizontal) => {
   const value = separatorMargin(size, margin);
-  const length = typeof value === "string" ? value : `${value}px`;
+  const length = typeof value === "string" ? value : rem(theme, value);
   return isHorizontal ? `${length} 0` : `0 ${length}`;
 };
-var separatorStyles = (theme, { variant, orientation, size, color, margin, length }) => {
+var ruleLength = (theme, length) => {
+  if (!length) return "100%";
+  if (typeof length === "string") return length;
+  return length <= 1 ? `${length * 100}%` : rem(theme, length);
+};
+var separatorStyles = (theme, { variant, orientation, size, color, blockMargin, length }) => {
   const isHorizontal = orientation === "horizontal";
-  const thickness = separatorThickness(size);
+  const thicknessPx = separatorThickness(size);
+  const thickness = thicknessPx === FIELD_BORDER_WIDTH ? `${FIELD_BORDER_WIDTH}px` : rem(theme, thicknessPx);
+  const along = ruleLength(theme, length);
   const resolvedColor = color || theme.palette.divider;
   const baseStyles = {
     display: "flex",
     alignItems: "center",
-    margin: separatorBlockMargin(size, margin, isHorizontal),
-    width: isHorizontal ? length || "100%" : `${thickness}px`,
-    height: isHorizontal ? `${thickness}px` : length || "100%",
+    margin: blockMargin,
+    width: isHorizontal ? along : thickness,
+    height: isHorizontal ? thickness : along,
     boxSizing: "border-box"
   };
   if (variant === "gradient") {
@@ -88,4 +102,4 @@ export {
   separatorBlockMargin,
   separatorStyles
 };
-//# sourceMappingURL=chunk-CAHWCSRE.js.map
+//# sourceMappingURL=chunk-D46SLMCX.js.map

package/dist/chunk-D46SLMCX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Separator/Separator.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type {\n  SeparatorOrientation,\n  SeparatorProps,\n  SeparatorSize,\n  SeparatorVariant,\n} from './Separator.types';\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';\nimport { rem } from '../../../tokens/relative';\n\nconst THICKNESS_PX: Record<SeparatorSize, number> = {\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nconst MARGIN_PX: Record<SeparatorSize, number> = {\n  xs: 4,\n  sm: 8,\n  md: 16,\n  lg: 24,\n  xl: 32,\n};\n\nconst separatorThickness = (size: SeparatorSize): number =>\n  THICKNESS_PX[size] ?? THICKNESS_PX.md;\n\n/** An explicit `margin` wins; otherwise the size picks one. */\nexport const separatorMargin = (\n  size: SeparatorSize,\n  margin?: number | string,\n): number | string => margin ?? MARGIN_PX[size] ?? MARGIN_PX.md;\n\n// `gradient` paints a background rather than a border, so it draws its line as a\n// solid border of zero visual consequence.\nconst borderStyleFor = (variant: SeparatorVariant): 'dashed' | 'dotted' | 'solid' => {\n  switch (variant) {\n    case 'dashed':\n      return 'dashed';\n    case 'dotted':\n      return 'dotted';\n    default:\n      return 'solid';\n  }\n};\n\nconst gradientBackground = (\n  variant: SeparatorVariant,\n  orientation: SeparatorOrientation,\n  color: string,\n): string | undefined => {\n  if (variant !== 'gradient') return undefined;\n  const angle = orientation === 'horizontal' ? '90deg' : '180deg';\n  return `linear-gradient(${angle}, transparent 0%, ${color} 50%, transparent 100%)`;\n};\n\n// Only the leading edge carries the rule; the other three are zeroed explicitly so\n// a parent's border shorthand cannot leak through.\nconst borderEdges = (\n  isHorizontal: boolean,\n  thickness: string,\n  style: 'dashed' | 'dotted' | 'solid',\n  color: string,\n): CSSObject => {\n  const leading = isHorizontal ? 'Top' : 'Left';\n  const blank: CSSObject = {\n    borderTopWidth: 0,\n    borderBottomWidth: 0,\n    borderLeftWidth: 0,\n    borderRightWidth: 0,\n    borderTopStyle: 'none',\n    borderBottomStyle: 'none',\n    borderLeftStyle: 'none',\n    borderRightStyle: 'none',\n    borderTopColor: 'transparent',\n    borderBottomColor: 'transparent',\n    borderLeftColor: 'transparent',\n    borderRightColor: 'transparent',\n  };\n\n  return {\n    ...blank,\n    [`border${leading}Width`]: thickness,\n    [`border${leading}Style`]: style,\n    [`border${leading}Color`]: color,\n  };\n};\n\ntype SeparatorStyleArgs = Required<\n  Pick<SeparatorProps, 'variant' | 'orientation' | 'size'>\n> &\n  Pick<SeparatorProps, 'color' | 'length'> & {\n    /** From {@link separatorBlockMargin}, which both the plain and the labelled separator read. */\n    blockMargin: string;\n  };\n\n/**\n * The separator's margin, on the axis it separates along only: above and below\n * a horizontal rule, either side of a vertical one. A margin given as a string\n * carries its own units; a number is design px, through the type scale.\n *\n * The LABELLED separator uses this too. It used to hand the number straight to\n * `sx.margin`, where a number is SPACING UNITS — `md`'s 16 drew 128px on all\n * four sides, against 16px above and below for the unlabelled one.\n */\nexport const separatorBlockMargin = (\n  theme: Theme,\n  size: SeparatorSize,\n  margin: number | string | undefined,\n  isHorizontal: boolean,\n): string => {\n  const value = separatorMargin(size, margin);\n  const length = typeof value === 'string' ? value : rem(theme, value);\n  return isHorizontal ? `${length} 0` : `0 ${length}`;\n};\n\n/**\n * The rule's extent along its axis. It lands in `sx`, which reads a number of 1\n * or less as a fraction of the parent, and that stays so; any other number is\n * design px, through the type scale. Unset (or `0`/`''`) is the full run.\n */\nconst ruleLength = (theme: Theme, length: SeparatorProps['length']): string => {\n  if (!length) return '100%';\n  if (typeof length === 'string') return length;\n  return length <= 1 ? `${length * 100}%` : rem(theme, length);\n};\n\nexport const separatorStyles = (\n  theme: Theme,\n  { variant, orientation, size, color, blockMargin, length }: SeparatorStyleArgs,\n): CSSObject => {\n  const isHorizontal = orientation === 'horizontal';\n  // `xs` is the 1px hairline: it stays one device-independent pixel at every\n  // root size, like every other hairline in the package; heavier rules scale.\n  const thicknessPx = separatorThickness(size);\n  const thickness = thicknessPx === FIELD_BORDER_WIDTH ? `${FIELD_BORDER_WIDTH}px` : rem(theme, thicknessPx);\n  const along = ruleLength(theme, length);\n  const resolvedColor = color || theme.palette.divider;\n\n  const baseStyles: CSSObject = {\n    display: 'flex',\n    alignItems: 'center',\n    margin: blockMargin,\n    width: isHorizontal ? along : thickness,\n    height: isHorizontal ? thickness : along,\n    boxSizing: 'border-box',\n  };\n\n  if (variant === 'gradient') {\n    return {\n      ...baseStyles,\n      background: gradientBackground(variant, orientation, resolvedColor),\n    };\n  }\n\n  return {\n    ...baseStyles,\n    backgroundColor: 'transparent',\n    ...borderEdges(isHorizontal, thickness, borderStyleFor(variant), resolvedColor),\n  };\n};\n"],"mappings":";;;;;;;;AAWA,IAAM,eAA8C;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,qBAAqB,CAAC,SAC1B,aAAa,IAAI,KAAK,aAAa;AAG9B,IAAM,kBAAkB,CAC7B,MACA,WACoB,UAAU,UAAU,IAAI,KAAK,UAAU;AAI7D,IAAM,iBAAiB,CAAC,YAA6D;AACnF,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,qBAAqB,CACzB,SACA,aACA,UACuB;AACvB,MAAI,YAAY,WAAY,QAAO;AACnC,QAAM,QAAQ,gBAAgB,eAAe,UAAU;AACvD,SAAO,mBAAmB,KAAK,qBAAqB,KAAK;AAC3D;AAIA,IAAM,cAAc,CAClB,cACA,WACA,OACA,UACc;AACd,QAAM,UAAU,eAAe,QAAQ;AACvC,QAAM,QAAmB;AAAA,IACvB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,EACpB;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,IAC3B,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,IAC3B,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,EAC7B;AACF;AAmBO,IAAM,uBAAuB,CAClC,OACA,MACA,QACA,iBACW;AACX,QAAM,QAAQ,gBAAgB,MAAM,MAAM;AAC1C,QAAM,SAAS,OAAO,UAAU,WAAW,QAAQ,IAAI,OAAO,KAAK;AACnE,SAAO,eAAe,GAAG,MAAM,OAAO,KAAK,MAAM;AACnD;AAOA,IAAM,aAAa,CAAC,OAAc,WAA6C;AAC7E,MAAI,CAAC,OAAQ,QAAO;AACpB,MAAI,OAAO,WAAW,SAAU,QAAO;AACvC,SAAO,UAAU,IAAI,GAAG,SAAS,GAAG,MAAM,IAAI,OAAO,MAAM;AAC7D;AAEO,IAAM,kBAAkB,CAC7B,OACA,EAAE,SAAS,aAAa,MAAM,OAAO,aAAa,OAAO,MAC3C;AACd,QAAM,eAAe,gBAAgB;AAGrC,QAAM,cAAc,mBAAmB,IAAI;AAC3C,QAAM,YAAY,gBAAgB,qBAAqB,GAAG,kBAAkB,OAAO,IAAI,OAAO,WAAW;AACzG,QAAM,QAAQ,WAAW,OAAO,MAAM;AACtC,QAAM,gBAAgB,SAAS,MAAM,QAAQ;AAE7C,QAAM,aAAwB;AAAA,IAC5B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO,eAAe,QAAQ;AAAA,IAC9B,QAAQ,eAAe,YAAY;AAAA,IACnC,WAAW;AAAA,EACb;AAEA,MAAI,YAAY,YAAY;AAC1B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY,mBAAmB,SAAS,aAAa,aAAa;AAAA,IACpE;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,iBAAiB;AAAA,IACjB,GAAG,YAAY,cAAc,WAAW,eAAe,OAAO,GAAG,aAAa;AAAA,EAChF;AACF;","names":[]}