@12-apps/ui 6.32.0 → 6.33.1

package/src/components/layout/Separator/Separator.styles.ts

@@ -92,6 +92,25 @@ type SeparatorStyleArgs = Required<
 > &
   Pick<SeparatorProps, 'color' | 'margin' | 'length'>;
 
+/**
+ * The separator's margin, on the axis it separates along only: above and below
+ * a horizontal rule, either side of a vertical one. A margin given as a string
+ * carries its own units; a number is pixels.
+ *
+ * The LABELLED separator uses this too. It used to hand the number straight to
+ * `sx.margin`, where a number is SPACING UNITS — `md`'s 16 drew 128px on all
+ * four sides, against 16px above and below for the unlabelled one.
+ */
+export const separatorBlockMargin = (
+  size: SeparatorSize,
+  margin: number | string | undefined,
+  isHorizontal: boolean,
+): string => {
+  const value = separatorMargin(size, margin);
+  const length = typeof value === 'string' ? value : `${value}px`;
+  return isHorizontal ? `${length} 0` : `0 ${length}`;
+};
+
 export const separatorStyles = (
   theme: Theme,
   { variant, orientation, size, color, margin, length }: SeparatorStyleArgs,
@@ -100,14 +119,10 @@ export const separatorStyles = (
   const thickness = separatorThickness(size);
   const resolvedColor = color || theme.palette.divider;
 
-  // A margin given as a string carries its own units; a number is pixels.
-  const marginValue = separatorMargin(size, margin);
-  const marginStr = typeof marginValue === 'string' ? marginValue : `${marginValue}px`;
-
   const baseStyles: CSSObject = {
     display: 'flex',
     alignItems: 'center',
-    margin: isHorizontal ? `${marginStr} 0` : `0 ${marginStr}`,
+    margin: separatorBlockMargin(size, margin, isHorizontal),
     width: isHorizontal ? length || '100%' : `${thickness}px`,
     height: isHorizontal ? `${thickness}px` : length || '100%',
     boxSizing: 'border-box',

package/src/components/layout/Separator/Separator.tsx

@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
-import { separatorMargin, separatorStyles } from './Separator.styles';
+import { separatorBlockMargin, separatorStyles } from './Separator.styles';
 import type { SeparatorProps } from './Separator.types';
 
 export const Separator: React.FC<SeparatorProps> = ({
@@ -22,6 +22,9 @@ export const Separator: React.FC<SeparatorProps> = ({
 
   if (children) {
     const isHorizontal = orientation === 'horizontal';
+    // The rules either side of the label sit INSIDE the row, which carries the
+    // margin; their own would add it a second time.
+    const ruleStyles = { ...styles, margin: 0 };
 
     return (
       <Box
@@ -33,12 +36,12 @@ export const Separator: React.FC<SeparatorProps> = ({
         sx={{
           display: 'flex',
           alignItems: 'center',
-          margin: separatorMargin(size, margin),
+          margin: separatorBlockMargin(size, margin, isHorizontal),
           flexDirection: isHorizontal ? 'row' : 'column',
           gap: theme.spacing(2),
         }}
       >
-        <Box sx={styles} />
+        <Box sx={ruleStyles} />
         {/*
           No background behind the label. The two rules and the words are a FLEX
           ROW — the rules stop where the label starts — so there is nothing for a
@@ -53,7 +56,7 @@ export const Separator: React.FC<SeparatorProps> = ({
         >
           {children}
         </Typography>
-        <Box sx={styles} />
+        <Box sx={ruleStyles} />
       </Box>
     );
   }

package/src/components/layout/SettingsLayout/SettingsLayout.items.tsx

@@ -166,7 +166,9 @@ function indexListSx(shape: RailShape) {
   return (theme: import('@mui/material').Theme) => ({
     display: 'grid',
     gridTemplateColumns: '1fr',
-    columnGap: 8,
+    // One spacing unit (8px). This is an `sx` callback, where a bare 8 is
+    // EIGHT units — it drew a 64px gutter between the two columns.
+    columnGap: 1,
     [theme.breakpoints.up('sm')]: { gridTemplateColumns: '1fr 1fr' },
     [atLeastRail(theme, shape.breakpoint)]: { gridTemplateColumns: '1fr' },
   });

package/src/tokens/relative.ts

@@ -0,0 +1,107 @@
+import type { Theme } from '@mui/material/styles/index.js';
+
+/**
+ * THE ONE WAY A COMPONENT WRITES A SIZE (FUT-2585).
+ *
+ * A density mode — a compact admin, a roomy kiosk — is one decision taken in
+ * the theme, and it only works if every size a component draws is RELATIVE to
+ * something the theme owns. Before this file the package said the same number
+ * four ways: `'14px'`, `'0.875rem'`, `fontSize: 14` and `px(14)` from a
+ * `*.metrics.ts` table, and none of the four moved with the theme. The audit
+ * that opened FUT-2585 counted 1,269 `NNpx` literals, 246 hand-typed `rem`
+ * literals and 24 reads of `theme.typography`.
+ *
+ * So there is one vocabulary: the px a design was drawn at, handed to the
+ * theme's own type scale. `rem(theme, 14)` is `theme.typography.pxToRem(14)` —
+ * `0.875rem` at MUI's defaults, which is what the origin host's theme
+ * runs on, so converting a literal changes nothing on screen. A host that sets
+ * `typography.fontSize` scales every size written through it (MUI multiplies
+ * by `fontSize / 14`), and so does a reader who raises the browser's base font
+ * — the rule the field height already follows (`./field-height.core.ts`).
+ * `htmlFontSize` is not a knob: it DECLARES what the root already is. Values
+ * that are relative another way stay so — `sx` spacing units and
+ * `theme.spacing()` follow the spacing unit — so a density mode sets the type
+ * scale, the spacing unit and `fieldHeight` together.
+ *
+ * Everything goes through it — font sizes, heights, widths, padding, offsets,
+ * radii, shadow offsets, blurs and keyframe distances — because a density mode
+ * that shrinks the box but not its shadow, or the text but not the gap beside
+ * it, is visibly half-applied. The one literal left is the 1px hairline
+ * border, which must stay one device pixel (`FIELD_BORDER_WIDTH`).
+ *
+ * `scripts/ui-tokens-gate.mjs` refuses a raw size or colour in a component, so
+ * this is enforced rather than hoped for.
+ */
+
+/** A size drawn at `px` in the design, as rem through the theme's type scale. */
+export function rem(theme: Theme, px: number): string {
+  return theme.typography.pxToRem(px);
+}
+
+/**
+ * {@link rem} as an `sx` value: `sx={{ width: sxRem(40) }}`.
+ *
+ * `sx` reads a NUMBER on `width` as pixels and on `padding` as spacing units,
+ * so a bare number there is never density-safe; a theme callback is.
+ */
+export function sxRem(px: number): (theme: Theme) => string {
+  return (theme) => rem(theme, px);
+}
+
+/** A length list (`'0 8px 32px'`-shaped) with every entry through {@link rem}. */
+export function rems(theme: Theme, ...px: number[]): string {
+  return px.map((value) => (value === 0 ? '0' : rem(theme, value))).join(' ');
+}
+
+const FALLBACK_ROOT_PX = 16;
+let rootPxCache: number | null = null;
+let watchingRoot = false;
+
+/** Forget the measured root font size — for a test, or a host that changes it at runtime. */
+export function resetRootFontCache(): void {
+  rootPxCache = null;
+}
+
+/**
+ * Drop the cache whenever the root's own style or class changes (a host
+ * toggling `html { font-size }` for a density) or the window resizes (a
+ * viewport-relative root). A browser-setting change is not observable from the
+ * page; it takes a reload, as it does for everything else measured in px.
+ */
+function watchRoot(): void {
+  if (watchingRoot || typeof MutationObserver === 'undefined') return;
+  watchingRoot = true;
+  new MutationObserver(resetRootFontCache).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['style', 'class'],
+  });
+  if (typeof window !== 'undefined') window.addEventListener('resize', resetRootFontCache);
+}
+
+/**
+ * The document's root font size in px — what `1rem` actually renders at.
+ * Without a document (server render) it is the theme's declared
+ * `htmlFontSize`; a failed measurement is not cached, so a later call can
+ * still measure.
+ */
+function rootFontPx(theme: Theme): number {
+  if (rootPxCache !== null) return rootPxCache;
+  const fallback = theme.typography.htmlFontSize ?? FALLBACK_ROOT_PX;
+  if (typeof document === 'undefined' || typeof getComputedStyle !== 'function') return fallback;
+  const measured = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+  if (!(Number.isFinite(measured) && measured > 0)) return fallback;
+  rootPxCache = measured;
+  watchRoot();
+  return measured;
+}
+
+/**
+ * The pixels `rem(theme, px)` renders at, for layout that is computed in
+ * JavaScript — a virtualiser's row height, an overflow cost table, a cell size.
+ *
+ * CSS and JS have to agree: a virtualiser that still assumes 52px rows while
+ * the rows it positions have shrunk to 45 leaves a gap under every one of them.
+ */
+export function remPx(theme: Theme, px: number): number {
+  return Number.parseFloat(rem(theme, px)) * rootFontPx(theme);
+}

package/src/tokens/scales.ts

@@ -14,6 +14,8 @@ export { headingMetrics } from './typography';
 // host can build a `UiTheme` from the same module path a native one does.
 export * from './theme';
 export * from './color';
+// The relative-size vocabulary every component writes its sizes in (FUT-2585).
+export { rem, rems, remPx, resetRootFontCache, sxRem } from './relative';
 export { DEFAULT_FIELD_RADIUS, fieldRadius, fieldRadiusOverrides, fieldRadiusPx, fieldRootStyles } from './field-radius';
 export {
   asFieldSize,

package/dist/chunk-3DO5MFXA.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tokens/scales.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport type { ColorValue, MuiColor } from './vocabulary';\n\n/**\n * `@12-apps/ui/tokens` keeps its whole surface here. The vocabulary itself —\n * the size and colour unions and their runtime lists — lives in\n * `./vocabulary`, which imports nothing, so the native renderer can read it\n * without this file's MUI `Theme` import following it into `dist/types-native`.\n */\nexport * from './vocabulary';\nexport { headingMetrics } from './typography';\n// The renderer-neutral theme and the colour arithmetic behind it, so a web\n// host can build a `UiTheme` from the same module path a native one does.\nexport * from './theme';\nexport * from './color';\nexport { DEFAULT_FIELD_RADIUS, fieldRadius, fieldRadiusOverrides, fieldRadiusPx, fieldRootStyles } from './field-radius';\nexport {\n  asFieldSize,\n  DEFAULT_FIELD_HEIGHT,\n  FIELD_BORDER_WIDTH,\n  FIELD_HEIGHT_SCALE,\n  fieldBorder,\n  fieldControlStyles,\n  fieldHeight,\n  fieldHeightOverrides,\n  fieldHeightPx,\n  fieldHeightRem,\n  fieldOverrides,\n  fieldTextFieldStyles,\n} from './field-height';\n\nexport interface Accent {\n  main: string;\n  light: string;\n  dark: string;\n  contrastText: string;\n}\n\nexport function accentFor(theme: Theme, color: ColorValue): Accent {\n  if (color === 'neutral') {\n    const grey = theme.palette.grey;\n    return {\n      // Explicit fallbacks: the ramp is indexed, and under\n      // `noUncheckedIndexedAccess` every stop is `string | undefined`.\n      main: grey[600] ?? '#757575',\n      light: grey[400] ?? '#bdbdbd',\n      dark: grey[800] ?? '#424242',\n      // Grey 600 carries white text in both themes.\n      contrastText: '#fff',\n    };\n  }\n  // Past the `neutral` return, `paletteKey` can only produce a `MuiColor` — but\n  // its signature still admits `'grey'`, and TS cannot narrow a return type by\n  // the argument. Naming the key here keeps the accent branch honestly typed\n  // instead of casting the hole shut.\n  const key: MuiColor = color === 'danger' ? 'error' : color;\n  return theme.palette[key];\n}\n"],"mappings":";AAuCO,SAAS,UAAU,OAAc,OAA2B;AACjE,MAAI,UAAU,WAAW;AACvB,UAAM,OAAO,MAAM,QAAQ;AAC3B,WAAO;AAAA;AAAA;AAAA,MAGL,MAAM,KAAK,GAAG,KAAK;AAAA,MACnB,OAAO,KAAK,GAAG,KAAK;AAAA,MACpB,MAAM,KAAK,GAAG,KAAK;AAAA;AAAA,MAEnB,cAAc;AAAA,IAChB;AAAA,EACF;AAKA,QAAM,MAAgB,UAAU,WAAW,UAAU;AACrD,SAAO,MAAM,QAAQ,GAAG;AAC1B;","names":[]}

package/dist/chunk-D6HDJVQW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/feedback/Dialog/Dialog.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport Backdrop from '@mui/material/Backdrop/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiDialog from '@mui/material/Dialog/index.js';\nimport MuiDialogActions from '@mui/material/DialogActions/index.js';\nimport MuiDialogContent from '@mui/material/DialogContent/index.js';\nimport MuiDialogTitle from '@mui/material/DialogTitle/index.js';\nimport Drawer from '@mui/material/Drawer/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';\nimport {\n  DIALOG_ACTIONS,\n  DIALOG_BODY_PADDING_UNITS,\n  DIALOG_CONTENT_PADDING_UNITS,\n  DIALOG_HEADER_CHILDREN_PADDING_UNITS,\n  DIALOG_TITLE,\n  DIALOG_TITLED_BODY_PADDING_TOP_UNITS,\n} from './Dialog.metrics';\nimport { backdropSxOf, variantStylesOf } from './Dialog.styles';\nimport { childTestId, resolveTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport type {\n  DialogActionsProps,\n  DialogContentProps,\n  DialogHeaderProps,\n  DialogProps,\n} from './Dialog.types';\n\n/**\n * The padding a dialog gives children that are not managing their own — and the\n * rule that takes it back when it turns out they are.\n *\n * `:has()` is doing what {@link hasSpacingSlot} cannot. A slot passed through a\n * COMPONENT (`<Body />` rendering a `DialogContent`) is invisible to any check\n * on element type: React does not know what a component renders until it has\n * rendered it, and by then the wrapper is already in the tree. The selector\n * asks the question one step later, of the DOM, where the answer exists.\n *\n * `display: contents` rather than `padding: 0`, because the padding is only\n * half of what a wrapper does. The other half is standing between the paper and\n * its children: MUI's `scroll=\"paper\"` makes the paper a flex column with\n * `overflow-y: auto`, so a `DialogContent` that is no longer its direct child\n * cannot be the thing that scrolls — the whole dialog scrolls instead and\n * carries the `DialogActions` off the bottom with it. An element with\n * `display: contents` generates no box at all: its children become the paper's\n * flex items, and its padding is never applied. Both halves, one declaration.\n *\n * A browser without `:has()` falls back to the padded box — the layout this\n * had before, not a broken one.\n */\nconst BODY_SX = {\n  px: DIALOG_BODY_PADDING_UNITS.horizontal,\n  pb: DIALOG_BODY_PADDING_UNITS.bottom,\n  '&:has(> .MuiDialogContent-root), &:has(> .MuiDialogActions-root)': {\n    display: 'contents',\n  },\n} as const;\n\n/**\n * The dialog body. Consumers that pass raw children (no <DialogContent>) used\n * to render them flush against the paper edges — give them comfortable default\n * padding; <DialogContent>/<DialogActions> users keep managing their own\n * spacing.\n */\nfunction bodyOf(children: React.ReactNode, hasTitle: boolean): React.ReactNode {\n  // Read lazily: both slots are declared below this function.\n  if (hasSpacingSlot(children, [DialogContent, DialogActions])) return children;\n  const pt = hasTitle\n    ? DIALOG_BODY_PADDING_UNITS.topUnderTitle\n    : DIALOG_BODY_PADDING_UNITS.top;\n  return <Box sx={{ ...BODY_SX, pt }}>{children}</Box>;\n}\n\nexport const Dialog: React.FC<DialogProps> = (rawProps) => {\n  const {\n    children,\n    variant,\n    size,\n    title,\n    description,\n    showCloseButton,\n    backdrop,\n    persistent,\n    glass,\n    gradient,\n    glow,\n    pulse,\n    borderRadius,\n    onClose,\n    open,\n    ...others\n  } = withDialogDefaults(rawProps);\n  const theme = useTheme();\n  // Every spelling of the test id the shared contract allows, mapped to the one\n  // the DOM reads, and stripped from what is spread — `testID` is React\n  // Native's name for it and is not a DOM attribute. The native `Dialog` does\n  // the same in reverse.\n  const testId = resolveTestId(others, 'dialog');\n  const props = withoutTestIdProps(others);\n  const paperSx = variantStylesOf(theme, {\n    variant, size, borderRadius, glass, gradient, glow, pulse,\n  });\n\n  const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {\n    if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {\n      return;\n    }\n    onClose?.();\n  };\n\n  const header = title ? (\n    <DialogHeader\n      title={title}\n      subtitle={description}\n      showCloseButton={showCloseButton}\n      onClose={onClose}\n      dataTestId={testId}\n    />\n  ) : null;\n  const body = bodyOf(children, Boolean(title));\n\n  if (variant === 'drawer') {\n    return (\n      <Drawer\n        anchor=\"right\"\n        open={open}\n        onClose={onClose}\n        data-testid={testId}\n        {...props}\n      >\n        <Box sx={{ ...paperSx, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>\n          {header}\n          {body}\n        </Box>\n      </Drawer>\n    );\n  }\n\n  return (\n    <MuiDialog\n      open={open}\n      onClose={handleClose}\n      fullScreen={variant === 'fullscreen'}\n      BackdropComponent={backdrop ? Backdrop : undefined}\n      BackdropProps={{ sx: backdropSxOf(theme, glass) }}\n      PaperProps={{ sx: paperSx, 'data-testid': testId }}\n      {...props}\n    >\n      {header}\n      {body}\n    </MuiDialog>\n  );\n};\n\nexport const DialogHeader: React.FC<DialogHeaderProps> = ({\n  children,\n  title,\n  subtitle,\n  showCloseButton = true,\n  onClose,\n  ...others\n}) => {\n  const props = withoutTestIdProps(others);\n\n  if (children) {\n    return (\n      <Box\n        data-testid={slotTestId(others, 'header', 'dialog')}\n        sx={{\n          p: DIALOG_HEADER_CHILDREN_PADDING_UNITS,\n          borderBottom: '1px solid',\n          borderColor: 'divider',\n        }}\n      >\n        {children}\n      </Box>\n    );\n  }\n\n  return (\n    <MuiDialogTitle\n      data-testid={slotTestId(others, 'title', 'dialog')}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        pb: subtitle\n          ? DIALOG_TITLE.paddingBottomUnits.withSubtitle\n          : DIALOG_TITLE.paddingBottomUnits.plain,\n      }}\n      {...props}\n    >\n      <Box>\n        <Typography variant=\"h6\" component=\"div\">\n          {title}\n        </Typography>\n        {subtitle && (\n          <Typography\n            variant=\"body2\"\n            color=\"text.secondary\"\n            sx={{ mt: DIALOG_TITLE.subtitleGapUnits }}\n          >\n            {subtitle}\n          </Typography>\n        )}\n      </Box>\n      {showCloseButton && onClose && (\n        <IconButton\n          aria-label=\"close\"\n          onClick={onClose}\n          data-testid={childTestId(others, 'close', 'dialog')}\n          sx={{\n            color: 'text.secondary',\n            '&:hover': {\n              backgroundColor: 'action.hover',\n            },\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </MuiDialogTitle>\n  );\n};\n\n/**\n * Top padding for a body that sits directly under the title.\n *\n * MUI zeroes it there (`.MuiDialogTitle-root + &` on a non-`dividers` content),\n * assuming the title's own bottom padding is the whole gap. That assumption\n * breaks for a body opening with an outlined field: a filled field floats its\n * label ABOVE the input's border box, and `DialogContent` is `overflow-y: auto`\n * — a clipping box — so the label gets sliced in half (FUT-544: \"Tipo\" in the\n * \"Novo insumo\" dialog).\n *\n * Reserve the overhang rather than restore the full 24px: the title already\n * contributes its bottom padding, so a shrunk label's `translate(…, -9px)` is\n * all that is missing. 12px clears it and leaves the gap visually tight.\n */\nconst TITLED_BODY_PADDING_TOP = DIALOG_TITLED_BODY_PADDING_TOP_UNITS;\n\n/**\n * `.MuiDialogTitle-root + &` is `(0,2,0)`-specific and a plain `sx` entry is\n * `(0,1,0)`, so the padding above only survives the cascade by naming the class\n * again — `(0,3,0)`. Scoped to the title-following case so an untitled dialog\n * keeps MUI's roomier default.\n */\nconst TITLED_BODY_SELECTOR = '.MuiDialogTitle-root + &.MuiDialogContent-root';\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n  children,\n  dividers = false,\n  dense = false,\n  ...others\n}) => (\n    <MuiDialogContent\n      data-testid={slotTestId(others, 'content', 'dialog')}\n      dividers={dividers}\n      sx={{\n        padding: dense ? DIALOG_CONTENT_PADDING_UNITS.dense : DIALOG_CONTENT_PADDING_UNITS.normal,\n        [TITLED_BODY_SELECTOR]: { paddingTop: TITLED_BODY_PADDING_TOP },\n        '&.MuiDialogContent-dividers': {\n          borderTop: dividers ? '1px solid' : 'none',\n          borderBottom: dividers ? '1px solid' : 'none',\n          borderColor: 'divider',\n        },\n      }}\n      {...withoutTestIdProps(others)}\n    >\n      {children}\n    </MuiDialogContent>\n  );\n\nexport const DialogActions: React.FC<DialogActionsProps> = ({\n  children,\n  alignment = 'right',\n  spacing = DIALOG_ACTIONS.defaultSpacingUnits,\n  ...others\n}) => {\n  const getJustifyContent = () => {\n    switch (alignment) {\n      case 'left': return 'flex-start';\n      case 'center': return 'center';\n      case 'right': return 'flex-end';\n      case 'space-between': return 'space-between';\n      default: return 'flex-end';\n    }\n  };\n\n  return (\n    <MuiDialogActions\n      data-testid={slotTestId(others, 'actions', 'dialog')}\n      sx={{\n        justifyContent: getJustifyContent(),\n        gap: spacing,\n        p: DIALOG_ACTIONS.paddingUnits,\n      }}\n      {...withoutTestIdProps(others)}\n    >\n      {children}\n    </MuiDialogActions>\n  );\n};"],"mappings":"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","names":[]}

package/dist/chunk-IFPTVHYR.js.map

@@ -1 +0,0 @@
-{"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';\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: number,\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' | 'margin' | 'length'>;\n\nexport const separatorStyles = (\n  theme: Theme,\n  { variant, orientation, size, color, margin, length }: SeparatorStyleArgs,\n): CSSObject => {\n  const isHorizontal = orientation === 'horizontal';\n  const thickness = separatorThickness(size);\n  const resolvedColor = color || theme.palette.divider;\n\n  // A margin given as a string carries its own units; a number is pixels.\n  const marginValue = separatorMargin(size, margin);\n  const marginStr = typeof marginValue === 'string' ? marginValue : `${marginValue}px`;\n\n  const baseStyles: CSSObject = {\n    display: 'flex',\n    alignItems: 'center',\n    margin: isHorizontal ? `${marginStr} 0` : `0 ${marginStr}`,\n    width: isHorizontal ? length || '100%' : `${thickness}px`,\n    height: isHorizontal ? `${thickness}px` : length || '100%',\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":";AASA,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;AAOO,IAAM,kBAAkB,CAC7B,OACA,EAAE,SAAS,aAAa,MAAM,OAAO,QAAQ,OAAO,MACtC;AACd,QAAM,eAAe,gBAAgB;AACrC,QAAM,YAAY,mBAAmB,IAAI;AACzC,QAAM,gBAAgB,SAAS,MAAM,QAAQ;AAG7C,QAAM,cAAc,gBAAgB,MAAM,MAAM;AAChD,QAAM,YAAY,OAAO,gBAAgB,WAAW,cAAc,GAAG,WAAW;AAEhF,QAAM,aAAwB;AAAA,IAC5B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,eAAe,GAAG,SAAS,OAAO,KAAK,SAAS;AAAA,IACxD,OAAO,eAAe,UAAU,SAAS,GAAG,SAAS;AAAA,IACrD,QAAQ,eAAe,GAAG,SAAS,OAAO,UAAU;AAAA,IACpD,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":[]}

package/dist/chunk-JSANSHGF.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/UploadButton/UploadButton.parts.tsx"],"sourcesContent":["import AttachFileOutlined from '@mui/icons-material/AttachFileOutlined';\nimport CloudUploadOutlined from '@mui/icons-material/CloudUploadOutlined';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport LinearProgress from '@mui/material/LinearProgress/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport type { DragHandlers } from './UploadButton.hooks';\nimport type { UploadButtonCopy } from '../../../copy';\nimport type { UploadButtonProps } from './UploadButton.types';\n\n/** Shared shape for the two trigger variants. */\nexport interface TriggerProps {\n  copy: UploadButtonCopy;\n  label: string;\n  icon?: React.ReactNode;\n  disabled: boolean;\n  className?: string;\n  dataTestId?: string;\n  describedBy?: string;\n  onOpen: () => void;\n}\n\n/** The drag-and-drop surface. */\nexport function UploadDropzone({\n  copy,\n  label,\n  icon,\n  disabled,\n  className,\n  dataTestId,\n  describedBy,\n  onOpen,\n  isDragOver,\n  drag,\n}: TriggerProps & { isDragOver: boolean; drag: DragHandlers }): React.ReactElement {\n  const theme = useTheme();\n  return (\n    <Box\n      component=\"div\"\n      {...drag}\n      onClick={onOpen}\n      sx={{\n        border: `2px dashed ${isDragOver ? theme.palette.primary.main : theme.palette.divider}`,\n        borderRadius: 2,\n        padding: 3,\n        textAlign: 'center',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        backgroundColor: isDragOver ? `${theme.palette.primary.main}0A` : 'transparent',\n        transition: 'all 0.2s ease-in-out',\n        ...(!disabled && {\n          '&:hover': {\n            borderColor: theme.palette.primary.main,\n            backgroundColor: `${theme.palette.primary.main}05`,\n          },\n        }),\n        opacity: disabled ? 0.6 : 1,\n      }}\n      className={className}\n      data-testid={dataTestId}\n      role=\"button\"\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={(event) => {\n        if (event.key !== 'Enter' && event.key !== ' ') return;\n        event.preventDefault();\n        onOpen();\n      }}\n      aria-describedby={describedBy}\n      aria-label={copy.dropzoneRole(label)}\n    >\n      <Box sx={{ mb: 2 }}>\n        {icon || <CloudUploadOutlined sx={{ fontSize: 48, color: 'text.secondary' }} />}\n      </Box>\n      <Typography variant=\"body1\" sx={{ mb: 1 }}>\n        {label}\n      </Typography>\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {copy.dropzoneHint}\n      </Typography>\n    </Box>\n  );\n}\n\n/** MUI variant for each non-dropzone appearance. */\nconst MUI_VARIANT = { outline: 'outlined', ghost: 'text' } as const;\n\n/** The plain-button trigger. */\nexport function UploadTrigger({\n  copy,\n  label,\n  icon,\n  disabled,\n  className,\n  dataTestId,\n  describedBy,\n  onOpen,\n  variant,\n  isUploading,\n}: TriggerProps & {\n  variant: NonNullable<UploadButtonProps['variant']>;\n  isUploading: boolean;\n}): React.ReactElement {\n  const theme = useTheme();\n  return (\n    <Button\n      variant={MUI_VARIANT[variant as keyof typeof MUI_VARIANT] ?? 'contained'}\n      disabled={disabled || isUploading}\n      onClick={onOpen}\n      startIcon={icon || <AttachFileOutlined />}\n      className={className}\n      data-testid={dataTestId}\n      aria-describedby={describedBy}\n      sx={{\n        ...(variant === 'ghost' && {\n          '&:hover': { backgroundColor: `${theme.palette.primary.main}08` },\n        }),\n      }}\n    >\n      {isUploading ? copy.uploading : label}\n    </Button>\n  );\n}\n\n/** The screen-reader live region — drag, progress and error announcements. */\nfunction UploadAnnouncer({\n  copy,\n  announceDragOver,\n  isUploading,\n  progress,\n  error,\n}: {\n  copy: UploadButtonCopy;\n  announceDragOver: boolean;\n  isUploading: boolean;\n  progress: number;\n  error: string | null;\n}): React.ReactElement {\n  return (\n    <div\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      className=\"sr-only\"\n      style={{\n        position: 'absolute',\n        left: '-10000px',\n        width: '1px',\n        height: '1px',\n        overflow: 'hidden',\n      }}\n    >\n      {announceDragOver && copy.dropReady}\n      {isUploading && copy.uploadInProgress(Math.round(progress))}\n      {error && copy.errorAnnouncement(error)}\n    </div>\n  );\n}\n\n/** Progress bar, helper text, error text and the live region. */\nexport function UploadFeedback({\n  copy,\n  isUploading,\n  progress,\n  helperText,\n  helperId,\n  error,\n  errorId,\n  announceDragOver,\n}: {\n  copy: UploadButtonCopy;\n  isUploading: boolean;\n  progress: number;\n  helperText?: string;\n  helperId?: string;\n  error: string | null;\n  errorId?: string;\n  announceDragOver: boolean;\n}): React.ReactElement {\n  return (\n    <>\n      {isUploading && progress > 0 && (\n        <Box sx={{ mt: 1 }}>\n          <LinearProgress variant=\"determinate\" value={progress} sx={{ borderRadius: 1 }} />\n          <Typography variant=\"caption\" sx={{ mt: 0.5, display: 'block' }}>\n            {copy.percentUploaded(Math.round(progress))}\n          </Typography>\n        </Box>\n      )}\n\n      {helperText && !error && (\n        <Typography\n          id={helperId}\n          variant=\"caption\"\n          color=\"text.secondary\"\n          sx={{ display: 'block', mt: 0.5 }}\n        >\n          {helperText}\n        </Typography>\n      )}\n\n      {error && (\n        <Typography\n          id={errorId}\n          variant=\"caption\"\n          color=\"error\"\n          sx={{ display: 'block', mt: 0.5 }}\n          role=\"alert\"\n        >\n          {error}\n        </Typography>\n      )}\n\n      <UploadAnnouncer\n        copy={copy}\n        announceDragOver={announceDragOver}\n        isUploading={isUploading}\n        progress={progress}\n        error={error}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-MCZ7536N.js.map

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