@12-apps/ui 6.34.0 → 6.35.0

package/dist/{chunk-DL6N7W6P.js → chunk-24NXQG5F.js}

@@ -7,6 +7,9 @@ import {
 import {
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/MapPreview/MapMarkers.tsx
 import LocationIcon from "@mui/icons-material/LocationOn";
@@ -50,7 +53,7 @@ var MapMarkers = ({ markers, centre, animated }) => {
         LocationIcon,
         {
           sx: {
-            fontSize: 32,
+            fontSize: rem(theme, 32),
             color: theme.palette.error.main,
             filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,
             animation: animated ? "bounce 2s infinite" : "none",
@@ -79,4 +82,4 @@ export {
   MapMarkers,
   MapCoordinates
 };
-//# sourceMappingURL=chunk-DL6N7W6P.js.map
+//# sourceMappingURL=chunk-24NXQG5F.js.map

package/dist/chunk-24NXQG5F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapMarkers.tsx"],"sourcesContent":["import LocationIcon from '@mui/icons-material/LocationOn';\nimport Box from '@mui/material/Box/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { MARKER_PIXELS_PER_DEGREE } from './MapPreview.constants';\nimport type { LatLng, MapMarker } from './MapPreview.types';\nimport { BOUNCE_KEYFRAMES } from './mapSurface';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\n// Kept module-local: styled() components cannot be exported across a module\n// boundary here without tripping TS2742.\nconst CoordinatesDisplay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  bottom: theme.spacing(2),\n  left: theme.spacing(2),\n  padding: theme.spacing(1, 1.5),\n  background: alpha(theme.palette.background.paper, 0.95),\n  backdropFilter: 'blur(10px)',\n  WebkitBackdropFilter: 'blur(10px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  borderRadius: theme.shape.borderRadius,\n  zIndex: 1,\n}));\n\nexport interface MapMarkersProps {\n  markers: MapMarker[];\n  centre: LatLng;\n  animated: boolean;\n}\n\n// Markers are placed relative to the current centre, so panning moves them with\n// the surface.\nexport const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) => {\n  const theme = useTheme();\n\n  return (\n    <>\n      {markers.map((markerItem, index) => (\n        <Box\n          key={`${markerItem.position.lat}-${markerItem.position.lng}-${index}`}\n          data-testid={`map-marker-${index}`}\n          sx={{\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            transform: `translate(\n              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,\n              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px\n            )`,\n            zIndex: 3,\n            cursor: markerItem.onClick ? 'pointer' : 'default',\n          }}\n          onClick={markerItem.onClick}\n          title={markerItem.title}\n        >\n          <Tooltip title={markerItem.description || markerItem.title || ''}>\n            <LocationIcon\n              sx={{\n                fontSize: rem(theme, 32),\n                color: theme.palette.error.main,\n                filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,\n                animation: animated ? 'bounce 2s infinite' : 'none',\n                '@keyframes bounce': BOUNCE_KEYFRAMES,\n              }}\n            />\n          </Tooltip>\n        </Box>\n      ))}\n    </>\n  );\n};\n\nexport const MapCoordinates: FC<{ position: LatLng; zoom: number }> = ({ position, zoom }) => (\n  <CoordinatesDisplay data-testid=\"coordinates-display\">\n    <Typography variant=\"caption\" sx={{ fontFamily: 'monospace' }}>\n      Lat: {position.lat.toFixed(6)}, Lng: {position.lng.toFixed(6)}\n    </Typography>\n    {zoom > 0 && (\n      <Typography variant=\"caption\" sx={{ fontFamily: 'monospace', display: 'block' }}>\n        Zoom: {zoom}\n      </Typography>\n    )}\n  </CoordinatesDisplay>\n);\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,kBAAkB;AACzB,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,OAAO,QAAQ,gBAAgB;AAqCpC,mBAoBQ,KAkBR,YAtCA;AAzBJ,IAAM,qBAAqB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACrD,UAAU;AAAA,EACV,QAAQ,MAAM,QAAQ,CAAC;AAAA,EACvB,MAAM,MAAM,QAAQ,CAAC;AAAA,EACrB,SAAS,MAAM,QAAQ,GAAG,GAAG;AAAA,EAC7B,YAAY,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,EACtD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,EACtD,cAAc,MAAM,MAAM;AAAA,EAC1B,QAAQ;AACV,EAAE;AAUK,IAAM,aAAkC,CAAC,EAAE,SAAS,QAAQ,SAAS,MAAM;AAChF,QAAM,QAAQ,SAAS;AAEvB,SACE,gCACG,kBAAQ,IAAI,CAAC,YAAY,UACxB;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa,cAAc,KAAK;AAAA,MAChC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW;AAAA,iBACN,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA,gBACjE,EAAE,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA;AAAA,QAEtE,QAAQ;AAAA,QACR,QAAQ,WAAW,UAAU,YAAY;AAAA,MAC3C;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,OAAO,WAAW;AAAA,MAElB,8BAAC,WAAQ,OAAO,WAAW,eAAe,WAAW,SAAS,IAC5D;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,UAAU,IAAI,OAAO,EAAE;AAAA,YACvB,OAAO,MAAM,QAAQ,MAAM;AAAA,YAC3B,QAAQ,yBAAyB,UAAU,OAAO,GAAG,CAAC;AAAA,YACtD,WAAW,WAAW,uBAAuB;AAAA,YAC7C,qBAAqB;AAAA,UACvB;AAAA;AAAA,MACF,GACF;AAAA;AAAA,IA1BK,GAAG,WAAW,SAAS,GAAG,IAAI,WAAW,SAAS,GAAG,IAAI,KAAK;AAAA,EA2BrE,CACD,GACH;AAEJ;AAEO,IAAM,iBAAyD,CAAC,EAAE,UAAU,KAAK,MACtF,qBAAC,sBAAmB,eAAY,uBAC9B;AAAA,uBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,YAAY,YAAY,GAAG;AAAA;AAAA,IACvD,SAAS,IAAI,QAAQ,CAAC;AAAA,IAAE;AAAA,IAAQ,SAAS,IAAI,QAAQ,CAAC;AAAA,KAC9D;AAAA,EACC,OAAO,KACN,qBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,YAAY,aAAa,SAAS,QAAQ,GAAG;AAAA;AAAA,IACxE;AAAA,KACT;AAAA,GAEJ;","names":[]}

package/dist/{chunk-YVDBOVHP.js → chunk-2AKQPXSJ.js}

@@ -6,7 +6,7 @@ import {
   useSwipe,
   useWheelZoom,
   useZoomState
-} from "./chunk-PC2MVKYW.js";
+} from "./chunk-C6FRVGMC.js";
 
 // src/components/data-display/Lightbox/useLightbox.ts
 import { useCallback, useImperativeHandle, useState } from "react";
@@ -61,4 +61,4 @@ var useLightbox = ({ isOpen, onClose, items, startIndex, showControls, loop, aut
 export {
   useLightbox
 };
-//# sourceMappingURL=chunk-YVDBOVHP.js.map
+//# sourceMappingURL=chunk-2AKQPXSJ.js.map

package/dist/{chunk-GVOMTCLS.js → chunk-2B76FIMN.js}

@@ -1,6 +1,9 @@
 import {
   Skeleton
 } from "./chunk-7F7TTOYN.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/StatCard/StatCard.tsx
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
@@ -52,7 +55,7 @@ function DeltaRow({ delta, testId }) {
       "data-direction": delta.direction,
       "data-tone": tone,
       children: [
-        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", sx: { fontSize: "1rem", color } }),
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", sx: { fontSize: sxRem(16), color } }),
         /* @__PURE__ */ jsx(
           Typography,
           {
@@ -200,4 +203,4 @@ export {
   StatCard,
   StatCard_default
 };
-//# sourceMappingURL=chunk-GVOMTCLS.js.map
+//# sourceMappingURL=chunk-2B76FIMN.js.map

package/dist/chunk-2B76FIMN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/StatCard/StatCard.tsx"],"sourcesContent":["import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport type {\n  StatCardDelta,\n  StatCardDeltaDirection,\n  StatCardDeltaTone,\n  StatCardProps,\n} from './StatCard.types';\nimport { sxRem } from '../../../tokens/relative';\n\n/** The arrow each direction renders (decorative — the text carries the meaning). */\nconst DIRECTION_ICON: Record<StatCardDeltaDirection, typeof ArrowUpwardIcon> = {\n  up: ArrowUpwardIcon,\n  down: ArrowDownwardIcon,\n  neutral: RemoveIcon,\n};\n\n/** How each direction reads to a screen reader when no `ariaLabel` is given. */\nconst DIRECTION_WORD: Record<StatCardDeltaDirection, string> = {\n  up: 'Increase of',\n  down: 'Decrease of',\n  neutral: 'Change of',\n};\n\n/** A direction's natural tone, used when the caller doesn't override it. */\nconst IMPLIED_TONE: Record<StatCardDeltaDirection, StatCardDeltaTone> = {\n  up: 'positive',\n  down: 'negative',\n  neutral: 'neutral',\n};\n\n/** Resolve a tone to its semantic palette colour (never a hardcoded hex). */\nfunction toneColor(tone: StatCardDeltaTone, theme: Theme): string {\n  if (tone === 'positive') return theme.palette.success.main;\n  if (tone === 'negative') return theme.palette.error.main;\n  return theme.palette.text.secondary;\n}\n\n/** The screen-reader sentence for a delta: caller override, else generated. */\nfunction deltaAriaLabel(delta: StatCardDelta): string {\n  if (delta.ariaLabel) return delta.ariaLabel;\n  const suffix = delta.label ? ` ${delta.label}` : '';\n  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;\n}\n\n/** The delta row: a decorative arrow plus the pre-formatted change and context. */\nfunction DeltaRow({ delta, testId }: { delta: StatCardDelta; testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];\n  const Icon = DIRECTION_ICON[delta.direction];\n  const color = toneColor(tone, theme);\n\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={0.5}\n      sx={{ alignItems: 'center', flexWrap: 'wrap' }}\n      data-testid={testId}\n      data-direction={delta.direction}\n      data-tone={tone}\n    >\n      {/* The arrow duplicates what the aria-label already says, so it is hidden\n          from assistive tech rather than read twice. */}\n      <Icon aria-hidden=\"true\" sx={{ fontSize: sxRem(16), color }} />\n      <Typography\n        variant=\"body2\"\n        component=\"span\"\n        aria-label={deltaAriaLabel(delta)}\n        sx={{ color, fontWeight: theme.typography.fontWeightMedium }}\n      >\n        {delta.value}\n      </Typography>\n      {delta.label && (\n        <Typography variant=\"caption\" component=\"span\" sx={{ color: theme.palette.text.secondary }}>\n          {delta.label}\n        </Typography>\n      )}\n    </Stack>\n  );\n}\n\n/** The label row: the optional decorative icon plus the metric's name. */\nfunction LabelRow({\n  label,\n  icon,\n  labelId,\n  testId,\n}: Pick<StatCardProps, 'label' | 'icon'> & {\n  labelId: string;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }}>\n      {icon && (\n        <Box\n          aria-hidden=\"true\"\n          data-testid={`${testId}-icon`}\n          sx={{ display: 'flex', color: theme.palette.text.secondary }}\n        >\n          {icon}\n        </Box>\n      )}\n      <Typography\n        id={labelId}\n        variant=\"caption\"\n        component=\"p\"\n        data-testid={`${testId}-label`}\n        sx={{ color: theme.palette.text.secondary }}\n      >\n        {label}\n      </Typography>\n    </Stack>\n  );\n}\n\n/** The figure itself, or its skeleton while the tile is loading. */\nfunction ValueRow({\n  value,\n  loading,\n  testId,\n}: Pick<StatCardProps, 'value' | 'loading'> & { testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={28}\n        width=\"60%\"\n        borderRadius={4}\n        data-testid={`${testId}-value-skeleton`}\n      />\n    );\n  }\n  return (\n    <Typography\n      variant=\"h6\"\n      component=\"p\"\n      data-testid={`${testId}-value`}\n      sx={{\n        fontWeight: theme.typography.fontWeightMedium,\n        color: theme.palette.text.primary,\n        overflowWrap: 'anywhere',\n      }}\n    >\n      {value}\n    </Typography>\n  );\n}\n\n/** The delta slot: its skeleton while loading, the row once resolved, else nothing. */\nfunction DeltaSlot({\n  delta,\n  loading,\n  testId,\n}: {\n  delta?: StatCardDelta;\n  loading: boolean;\n  testId: string;\n}): React.JSX.Element | null {\n  if (!delta) return null;\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={16}\n        width=\"40%\"\n        borderRadius={4}\n        data-testid={`${testId}-delta-skeleton`}\n      />\n    );\n  }\n  return <DeltaRow delta={delta} testId={`${testId}-delta`} />;\n}\n\n/**\n * StatCard (KPI tile) — one labelled figure with an optional period-over-period\n * delta, leading icon, hint line and loading state. The single shared tile for\n * dashboards and summary bands, so surfaces stop hand-rolling the pattern.\n *\n * The tile is presentation only: `value` and `delta.value` arrive ALREADY\n * formatted, so locale/currency rules stay with the data owner. Colour comes\n * from the MUI palette (`success` / `error` / `text.secondary`), and the delta's\n * meaning is separable from its arrow via {@link StatCardDelta.tone} — a rise in\n * cost can render \"up\" while reading as negative.\n */\nexport const StatCard: React.FC<StatCardProps> = React.memo(\n  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {\n    const theme = useTheme();\n    const labelId = React.useId();\n    const testId = dataTestId || 'stat-card';\n\n    return (\n      <Box\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-busy={loading || undefined}\n        className={className}\n        data-testid={testId}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: theme.spacing(0.5),\n          padding: theme.spacing(2),\n          borderRadius: theme.shape.borderRadius / 4,\n          border: `1px solid ${theme.palette.divider}`,\n          backgroundColor: theme.palette.background.paper,\n          minWidth: 0,\n        }}\n      >\n        <LabelRow label={label} icon={icon} labelId={labelId} testId={testId} />\n        <ValueRow value={value} loading={loading} testId={testId} />\n        <DeltaSlot delta={delta} loading={loading} testId={testId} />\n        {hint && (\n          <Typography\n            variant=\"caption\"\n            component=\"p\"\n            data-testid={`${testId}-hint`}\n            sx={{ color: theme.palette.text.secondary }}\n          >\n            {hint}\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n);\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":"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","names":[]}

package/dist/{chunk-PRVK3U6U.js → chunk-2CTTASUD.js}

@@ -1,6 +1,6 @@
 import {
   SettingsStatusMarker
-} from "./chunk-QXTO3G2T.js";
+} from "./chunk-2OIP3T5O.js";
 import {
   TOUCH_TARGET,
   atLeastRail
@@ -166,4 +166,4 @@ export {
   SettingsRailItem,
   SettingsRailGroup
 };
-//# sourceMappingURL=chunk-PRVK3U6U.js.map
+//# sourceMappingURL=chunk-2CTTASUD.js.map

package/dist/{chunk-B443IIQG.js → chunk-2E2WOBID.js}

@@ -1,14 +1,17 @@
 import {
   SettingsSectionChips
-} from "./chunk-SVSOUC5S.js";
+} from "./chunk-CSTAQX2B.js";
 import {
   SettingsSectionHeader
-} from "./chunk-4M6CEQVK.js";
+} from "./chunk-CPTY6UZ6.js";
 import {
   TOUCH_TARGET,
   atLeastRail,
   displayAcrossRail
 } from "./chunk-LIG7TKIB.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/SettingsLayout/SettingsPanel.tsx
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
@@ -37,7 +40,7 @@ function BackLink({
         textDecoration: "none",
         color: "text.secondary",
         font: "inherit",
-        fontSize: "0.875rem"
+        fontSize: rem(theme, 14)
       }),
       children: [
         /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" }),
@@ -164,4 +167,4 @@ function SettingsPanel({
 export {
   SettingsPanel
 };
-//# sourceMappingURL=chunk-B443IIQG.js.map
+//# sourceMappingURL=chunk-2E2WOBID.js.map

package/dist/chunk-2E2WOBID.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\nimport type { CSSObject, Theme } from \"@mui/material/styles/index.js\";\nimport Box from \"@mui/material/Box/index.js\";\nimport React from \"react\";\n\nimport {\n  atLeastRail,\n  displayAcrossRail,\n  TOUCH_TARGET,\n} from \"./SettingsLayout.styles\";\nimport { SettingsSectionChips } from \"./SettingsSectionChips\";\nimport { SettingsSectionHeader } from \"./SettingsSectionHeader\";\nimport type {\n  SettingsLayoutProps,\n  SettingsNavItem,\n  SettingsRailBreakpoint,\n} from \"./SettingsLayout.types\";\nimport { rem } from \"../../../tokens/relative\";\n\nexport interface SettingsPanelProps {\n  /** True in `drilldown`, inside a section rather than at the index. */\n  inSection: boolean;\n  /** True in `drilldown`, at the area's index. */\n  hideOnNarrow: boolean;\n  breakpoint: SettingsRailBreakpoint;\n  indexHref?: string;\n  backLabel: string;\n  /** The open section's own name — turns the back link into a compact header. */\n  sectionTitle?: string;\n  /** One line under that name. */\n  sectionDescription?: string;\n  ariaLabel: string;\n  sectionChips?: SettingsNavItem[];\n  activeItemId?: string;\n  linkComponent?: SettingsLayoutProps[\"linkComponent\"];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n  children: React.ReactNode;\n  /** Scroll inside the panel rather than with the page. See `fillHeight`. */\n  fillHeight?: boolean;\n}\n\n/** The way back to the area's index — narrow widths only. */\nfunction BackLink({\n  href,\n  label,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  label: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps[\"linkComponent\"]>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component={linkComponent}\n      href={href}\n      aria-label={label}\n      data-testid={`${testIdPrefix}-back`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, \"inline-flex\", \"none\"),\n        alignItems: \"center\",\n        gap: 0.5,\n        minHeight: TOUCH_TARGET,\n        pr: 1,\n        textDecoration: \"none\",\n        color: \"text.secondary\",\n        font: \"inherit\",\n        fontSize: rem(theme, 14),\n      })}\n    >\n      <ChevronLeftIcon fontSize=\"small\" />\n      {label}\n    </Box>\n  );\n}\n\n/**\n * Two shapes of the same control, chosen by whether the host named the section.\n *\n * With a `sectionTitle` the back folds into a compact header that also says\n * where you are; without one the original text link is kept, so no existing\n * consumer's header grows a title and pushes their first field down the page on\n * upgrade. Its own component so `SettingsPanel` keeps one branch rather than\n * three.\n */\nfunction PanelBack({\n  href,\n  backLabel,\n  sectionTitle,\n  sectionDescription,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  backLabel: string;\n  sectionTitle?: string;\n  sectionDescription?: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps['linkComponent']>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  if (sectionTitle === undefined) {\n    return (\n      <BackLink\n        href={href}\n        label={backLabel}\n        breakpoint={breakpoint}\n        linkComponent={linkComponent}\n        testIdPrefix={testIdPrefix}\n      />\n    );\n  }\n  return (\n    <SettingsSectionHeader\n      href={href}\n      backLabel={backLabel}\n      title={sectionTitle}\n      description={sectionDescription}\n      breakpoint={breakpoint}\n      linkComponent={linkComponent}\n      testIdPrefix={testIdPrefix}\n    />\n  );\n}\n\n/**\n * The panel's own box, as ONE object per media query rather than two.\n *\n * Both the `display` rule and `fillHeight`'s belong at the same wide-shape\n * query, and spreading them as separate `{ [query]: … }` objects makes the\n * second REPLACE the first — so turning `fillHeight` on silently dropped the\n * `display: block` that `hideOnNarrow` puts there and left the panel\n * `display: none` at every width. That only shows at a drilldown INDEX, where\n * `hideOnNarrow` is true, which is why a section route looked fine.\n *\n * `overflowY` here is also what lets a `position: sticky` toolbar inside\n * `children` pin to the TOP OF THE PANEL — under the host's header — instead\n * of to a document that is not the scroller.\n */\nfunction panelSx(\n  breakpoint: SettingsRailBreakpoint,\n  hideOnNarrow: boolean,\n  fillHeight: boolean,\n): (theme: Theme) => CSSObject {\n  return (theme) => ({\n    display: hideOnNarrow ? \"none\" : \"block\",\n    flex: \"1 1 auto\",\n    minWidth: 0,\n    width: \"100%\",\n    [atLeastRail(theme, breakpoint)]: {\n      ...(hideOnNarrow ? { display: \"block\" } : {}),\n      ...(fillHeight\n        ? {\n            height: \"100%\",\n            minHeight: 0,\n            overflowY: \"auto\",\n            overscrollBehavior: \"contain\",\n          }\n        : {}),\n    },\n  });\n}\n\n/**\n * The central column: the open screen, and — in `drilldown`, inside a section —\n * the back link and sibling-section strip above it.\n *\n * At the index in `drilldown` this whole column is `display: none` below the\n * breakpoint and the rail becomes the page. Mounted either way: the panel and\n * the list are one tree with `display` between them, not two branches of a\n * render.\n */\nexport function SettingsPanel({\n  inSection,\n  hideOnNarrow,\n  breakpoint,\n  indexHref,\n  backLabel,\n  sectionTitle,\n  sectionDescription,\n  ariaLabel,\n  sectionChips,\n  activeItemId,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n  fillHeight = false,\n  children,\n}: SettingsPanelProps): React.JSX.Element {\n  const showBack =\n    inSection && indexHref !== undefined && linkComponent !== undefined;\n  const showChips =\n    inSection && sectionChips !== undefined && sectionChips.length > 0;\n\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-panel`}\n      sx={panelSx(breakpoint, hideOnNarrow, fillHeight)}\n    >\n      {showBack ? (\n        <PanelBack\n          href={indexHref}\n          backLabel={backLabel}\n          sectionTitle={sectionTitle}\n          sectionDescription={sectionDescription}\n          breakpoint={breakpoint}\n          linkComponent={linkComponent}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : null}\n\n      {showChips ? (\n        <Box\n          sx={(theme) => ({\n            ...displayAcrossRail(theme, breakpoint, \"block\", \"none\"),\n            mb: 1,\n            minWidth: 0,\n          })}\n        >\n          <SettingsSectionChips\n            items={sectionChips}\n            activeItemId={activeItemId}\n            ariaLabel={ariaLabel}\n            linkComponent={linkComponent}\n            onSelectItem={onSelectItem}\n            testIdPrefix={testIdPrefix}\n          />\n        </Box>\n      ) : null}\n\n      {children}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-IPPTOL53.js → chunk-2HVNPWFV.js}

@@ -1,3 +1,7 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/form/Form/Form.tsx
 import Box from "@mui/material/Box/index.js";
 import Stack from "@mui/material/Stack/index.js";
@@ -61,7 +65,7 @@ var FormField = ({
 var StyledFormLabel = styled("label", {
   shouldForwardProp: (prop) => prop !== "error"
 })(({ theme, error }) => ({
-  fontSize: "0.875rem",
+  fontSize: rem(theme, 14),
   fontWeight: 500,
   color: error ? theme.palette.error.main : theme.palette.text.primary,
   marginBottom: theme.spacing(0.5),
@@ -95,7 +99,7 @@ var FormControl = ({ fullWidth = true, children, dataTestId }) => (
 var StyledFormMessage = styled("span", {
   shouldForwardProp: (prop) => prop !== "error"
 })(({ theme, error }) => ({
-  fontSize: "0.75rem",
+  fontSize: rem(theme, 12),
   marginTop: theme.spacing(0.5),
   color: error ? theme.palette.error.main : theme.palette.text.secondary,
   display: "block"
@@ -109,4 +113,4 @@ export {
   FormControl,
   FormMessage
 };
-//# sourceMappingURL=chunk-IPPTOL53.js.map
+//# sourceMappingURL=chunk-2HVNPWFV.js.map

package/dist/chunk-2HVNPWFV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Form/Form.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type {\n  FormControlProps,\n  FormFieldProps,\n  FormLabelProps,\n  FormMessageProps,\n  FormProps,\n} from './Form.types';\nimport { rem } from '../../../tokens/relative';\n\nconst StyledForm = styled('form', {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: FormProps['variant'] }>(({ theme, variant }) => ({\n  width: '100%',\n  ...(variant === 'inline' && {\n    display: 'flex',\n    gap: theme.spacing(2),\n    alignItems: 'flex-start',\n  }),\n}));\n\nconst spacingMap = {\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 5,\n};\n\nconst maxWidthMap = {\n  sm: '600px',\n  md: '900px',\n  lg: '1200px',\n  xl: '1536px',\n  full: '100%',\n};\n\nexport const Form = React.forwardRef<HTMLFormElement, FormProps>(\n  ({ variant = 'vertical', maxWidth = 'full', spacing = 'md', children, dataTestId, ...props }, ref) => (\n      <StyledForm ref={ref} variant={variant} role=\"form\" data-testid={dataTestId} {...props}>\n        <Box sx={{ maxWidth: maxWidthMap[maxWidth], width: '100%' }}>\n          {variant === 'inline' ? (\n            children\n          ) : (\n            <Stack spacing={spacingMap[spacing]}>{children}</Stack>\n          )}\n        </Box>\n      </StyledForm>\n    ),\n);\n\nForm.displayName = 'Form';\n\n/**\n * NO ROW GAP HERE, and that is the fix rather than an omission.\n *\n * `FormLabel` already carries `marginBottom: theme.spacing(0.5)` — 4px — and it\n * carries it because it has to: every OTHER user of it (`CepField`,\n * `CategorySelect`, `CreatableSelect`, the three `total-form` fields, five of\n * `@12-apps/discounts`' builders and the host's own `currency-field`) puts a\n * bare `FormLabel` straight inside a `FormControl`, which is a plain block box\n * with no gap of its own. There, the label's own margin is the ONLY thing\n * between the label and the control.\n *\n * A `gap: theme.spacing(1)` here was a second mechanism for that one job, and in\n * a column the two ADD: 8px + 4px put `FormField` at 12px where every one of\n * those siblings sits at 4px. Measured in Chromium at 320x568 on a consuming\n * app's six-field delivery address form, the 8px a row it added pushed the\n * submit button from 561px to 609px — 41px below the fold of the smallest\n * supported phone, i.e. a checkout whose primary action is off-screen.\n *\n * That claim is about `FormLabel`'s own callers, not about the whole package:\n * `Textarea` labels its control through MUI's `InputLabel` at\n * `theme.spacing(1)` and still draws 8px. It composes nothing out of\n * `FormLabel`, so it is a separate inconsistency rather than a reason to keep\n * a second spacing here.\n *\n * ## The `columnGap` is scaffolding, and currently unreachable\n *\n * `FormFieldProps` has no `variant` and `FormField` passes none, so `variant`\n * is ALWAYS undefined and every branch below resolves to the vertical shape.\n * `Form` accepts `variant=\"horizontal\"` and `Form.md` documents it as \"labels\n * beside inputs\", but nothing carries that variant down to the field — so a\n * horizontal form draws vertical rows today. That gap is older than this\n * change and fixing it is a feature, not a spacing fix.\n *\n * The branch is kept, scoped to the COLUMN axis, so that whoever does wire it\n * up inherits the right answer: with the label beside the control, a horizontal\n * gap and a vertical margin are orthogonal and nothing double-counts. A `gap`\n * shorthand there would put the 8px back on the row axis the moment a field\n * wrapped.\n */\nconst StyledFormField = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: 'vertical' | 'horizontal' }>(\n  ({ theme, variant }) => ({\n    display: variant === 'horizontal' ? 'grid' : 'flex',\n    flexDirection: variant === 'horizontal' ? undefined : 'column',\n    gridTemplateColumns: variant === 'horizontal' ? '200px 1fr' : undefined,\n    columnGap: variant === 'horizontal' ? theme.spacing(1) : undefined,\n    alignItems: variant === 'horizontal' ? 'center' : undefined,\n  }),\n);\n\nexport const FormField: React.FC<FormFieldProps> = ({\n  name,\n  label,\n  required,\n  error,\n  helperText,\n  children,\n  dataTestId,\n}) => (\n    <StyledFormField data-testid={dataTestId}>\n      {label && (\n        <FormLabel required={required} error={!!error} htmlFor={name} dataTestId={dataTestId ? `${dataTestId}-label` : undefined}>\n          {label}\n        </FormLabel>\n      )}\n      <FormControl fullWidth dataTestId={dataTestId ? `${dataTestId}-control` : undefined}>\n        {children}\n        {(error || helperText) && <FormMessage error={!!error} dataTestId={dataTestId ? `${dataTestId}-message` : undefined}>{error || helperText}</FormMessage>}\n      </FormControl>\n    </StyledFormField>\n  );\n\nconst StyledFormLabel = styled('label', {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(({ theme, error }) => ({\n  fontSize: rem(theme, 14),\n  fontWeight: 500,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  marginBottom: theme.spacing(0.5),\n  display: 'block',\n  '&::after': {\n    content: '\" *\"',\n    color: theme.palette.error.main,\n    display: 'var(--required-display, none)',\n  },\n}));\n\nexport const FormLabel: React.FC<FormLabelProps> = ({ required, error, children, htmlFor, dataTestId }) => (\n    <StyledFormLabel\n      error={error}\n      htmlFor={htmlFor}\n      data-testid={dataTestId}\n      style={{ '--required-display': required ? 'inline' : 'none' } as React.CSSProperties}\n    >\n      {children}\n    </StyledFormLabel>\n  );\n\nconst StyledFormControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth }) => ({\n  width: fullWidth ? '100%' : 'auto',\n  position: 'relative',\n}));\n\nexport const FormControl: React.FC<FormControlProps> = ({ fullWidth = true, children, dataTestId }) =>\n  // Don't pass error prop to the DOM element\n   <StyledFormControl fullWidth={fullWidth} data-testid={dataTestId}>{children}</StyledFormControl>\n;\n\nconst StyledFormMessage = styled('span', {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(({ theme, error }) => ({\n  fontSize: rem(theme, 12),\n  marginTop: theme.spacing(0.5),\n  color: error ? theme.palette.error.main : theme.palette.text.secondary,\n  display: 'block',\n}));\n\nexport const FormMessage: React.FC<FormMessageProps> = ({ error, children, dataTestId }) => <StyledFormMessage error={error} data-testid={dataTestId}>{children}</StyledFormMessage>;\n"],"mappings":"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","names":[]}

package/dist/{chunk-QXTO3G2T.js → chunk-2OIP3T5O.js}

@@ -2,6 +2,9 @@ import {
   SR_ONLY_SX,
   STATUS_COLOR
 } from "./chunk-LIG7TKIB.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/SettingsLayout/SettingsStatusMarker.tsx
 import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
@@ -22,7 +25,7 @@ function SettingsStatusMarker({
         "data-status": status,
         sx: { display: "inline-flex", alignItems: "center", color: "text.disabled" },
         children: [
-          /* @__PURE__ */ jsx(LockOutlinedIcon, { sx: { fontSize: 16 } }),
+          /* @__PURE__ */ jsx(LockOutlinedIcon, { sx: { fontSize: sxRem(16) } }),
           hidden
         ]
       }
@@ -59,4 +62,4 @@ SettingsStatusMarker.displayName = "SettingsStatusMarker";
 export {
   SettingsStatusMarker
 };
-//# sourceMappingURL=chunk-QXTO3G2T.js.map
+//# sourceMappingURL=chunk-2OIP3T5O.js.map

package/dist/chunk-2OIP3T5O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsStatusMarker.tsx"],"sourcesContent":["'use client';\n\nimport LockOutlinedIcon from '@mui/icons-material/LockOutlined';\nimport Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { SR_ONLY_SX, STATUS_COLOR } from './SettingsLayout.styles';\nimport type { SettingsNavStatus } from './SettingsLayout.types';\nimport { sxRem } from '../../../tokens/relative';\n\nexport interface SettingsStatusMarkerProps {\n  /** Which situation to draw. */\n  status: SettingsNavStatus;\n  /** What it means, in the host's language — the only carrier a screen reader gets. */\n  label?: string;\n  /** `data-testid` for the marker element. */\n  testId?: string;\n}\n\n/**\n * The situation marker beside a settings entry: a coloured dot, or a padlock\n * when the plan does not include the section.\n *\n * The label is rendered as visually-hidden text INSIDE the marker rather than as\n * an `aria-label` on it, so it lands in the accessible name of the row that\n * contains it. A row reading \"Endereço, ligado\" is one utterance; a decorative\n * dot with a title attribute beside it is two, and the second one is skipped.\n *\n * Colour alone never says which of the three states this is — that is the whole\n * reason `label` exists, and why a marker without one is a marker with no\n * meaning attached.\n */\nexport function SettingsStatusMarker({\n  status,\n  label,\n  testId,\n}: SettingsStatusMarkerProps): React.JSX.Element {\n  const hidden = label ? <Box component=\"span\" sx={SR_ONLY_SX}>{label}</Box> : null;\n\n  if (status === 'locked') {\n    return (\n      <Box\n        component=\"span\"\n        data-testid={testId}\n        data-status={status}\n        sx={{ display: 'inline-flex', alignItems: 'center', color: 'text.disabled' }}\n      >\n        <LockOutlinedIcon sx={{ fontSize: sxRem(16) }} />\n        {hidden}\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      component=\"span\"\n      data-testid={testId}\n      data-status={status}\n      sx={{ display: 'inline-flex', alignItems: 'center' }}\n    >\n      <Box\n        component=\"span\"\n        sx={{\n          width: 8,\n          height: 8,\n          borderRadius: '50%',\n          flex: '0 0 auto',\n          bgcolor: STATUS_COLOR[status],\n        }}\n      />\n      {hidden}\n    </Box>\n  );\n}\n\nSettingsStatusMarker.displayName = 'SettingsStatusMarker';\n"],"mappings":";;;;;;;;;AAEA,OAAO,sBAAsB;AAC7B,OAAO,SAAS;AAkCS,cAInB,YAJmB;AALlB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAC/C,QAAM,SAAS,QAAQ,oBAAC,OAAI,WAAU,QAAO,IAAI,YAAa,iBAAM,IAAS;AAE7E,MAAI,WAAW,UAAU;AACvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAa;AAAA,QACb,eAAa;AAAA,QACb,IAAI,EAAE,SAAS,eAAe,YAAY,UAAU,OAAO,gBAAgB;AAAA,QAE3E;AAAA,8BAAC,oBAAiB,IAAI,EAAE,UAAU,MAAM,EAAE,EAAE,GAAG;AAAA,UAC9C;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb,eAAa;AAAA,MACb,IAAI,EAAE,SAAS,eAAe,YAAY,SAAS;AAAA,MAEnD;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,MAAM;AAAA,cACN,SAAS,aAAa,MAAM;AAAA,YAC9B;AAAA;AAAA,QACF;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,qBAAqB,cAAc;","names":[]}

package/dist/{chunk-PYJI2YGJ.js → chunk-2PBT2HQH.js}

@@ -33,9 +33,6 @@ import {
   showsTrackLabels,
   trackColor
 } from "./chunk-D5SZXH7Q.js";
-import {
-  px
-} from "./chunk-PE4ZW3IA.js";
 import {
   inkOver
 } from "./chunk-2BYKTBDL.js";
@@ -44,6 +41,9 @@ import {
   controlNeutral,
   neutralTones
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Switch/Switch.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
@@ -218,13 +218,13 @@ var trackLabels = (theme, flags, palette, onText, offText) => ({
   justifyContent: "space-between",
   paddingLeft: theme.spacing(TRACK_LABEL.insetUnits),
   paddingRight: theme.spacing(TRACK_LABEL.insetUnits),
-  fontSize: px(TRACK_LABEL.fontSize),
+  fontSize: rem(theme, TRACK_LABEL.fontSize),
   fontWeight: TRACK_LABEL.fontWeight,
   color: theme.palette.text.secondary,
   "&::before, &::after": {
     content: '""',
     position: "absolute",
-    fontSize: px(TRACK_LABEL.fontSize),
+    fontSize: rem(theme, TRACK_LABEL.fontSize),
     fontWeight: TRACK_LABEL.fontWeight,
     top: "50%",
     transform: "translateY(-50%)",
@@ -290,4 +290,4 @@ export {
   onTrackInk,
   switchSx
 };
-//# sourceMappingURL=chunk-PYJI2YGJ.js.map
+//# sourceMappingURL=chunk-2PBT2HQH.js.map

package/dist/chunk-2PBT2HQH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Switch/Switch.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  bounceAnimation,\n  glowAnimation,\n  pulseAnimation,\n  rippleAnimation,\n  shimmerAnimation,\n  spinAnimation,\n} from './Switch.animations';\nimport {\n  DISABLED,\n  IOS_BASE_OFFSET,\n  IOS_THUMB_SHADOW,\n  IOS_TRAVEL_INSET,\n  SWITCH_GLASS,\n  SWITCH_GLOW,\n  NEUTRAL_CONTRAST,\n  SWITCH_FOCUS_RING,\n  SWITCH_GRADIENT,\n  SWITCH_HOVER,\n  SWITCH_PULSE,\n  SWITCH_RIPPLE,\n  SWITCH_SPINNER,\n  SWITCH_TRANSITION,\n  RESTING_THUMB,\n  THUMB_ELEVATION,\n  THUMB_RADIUS,\n  TRACK_LABEL,\n  TRACK_RADIUS,\n  geometryOf,\n  iosTrackShadow,\n  lookOf,\n  seconds,\n  showsTrackLabels,\n  trackColor,\n  type SwitchGeometry,\n  type SwitchLook,\n} from './Switch.metrics';\nimport type { SwitchVariant } from './Switch.base';\n\nimport { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\nimport { inkOver } from '../../../tokens/theme';\nimport type { ColorValue, SizeValue } from '../../../tokens/vocabulary';\n\n// Every number below comes from `./Switch.metrics`, which the native renderer\n// reads too — see its header. The palette and the shadows stay on the MUI\n// theme so a host that re-themes either keeps moving the web.\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/** `neutral` is not a MUI palette entry, so it is the controls' neutral tone. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\n\n/**\n * Resolves a colour name to a full palette, filling any step the theme leaves\n * out from `main` and then from the primary palette. `danger` is this\n * component's name for the error palette; the rest map straight through.\n */\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') {\n    return neutralPalette(theme);\n  }\n\n  const colorMap: Record<string, ColorPalette | undefined> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n  const palette = colorMap[color] ?? theme.palette.primary;\n  const { primary } = theme.palette;\n\n  return {\n    main: palette.main || primary.main,\n    dark: palette.dark || palette.main || primary.dark,\n    light: palette.light || palette.main || primary.light,\n    contrastText: palette.contrastText || NEUTRAL_CONTRAST,\n  };\n};\n\nexport interface SwitchFlags {\n  customVariant?: SwitchVariant;\n  customColor?: ColorValue;\n  customSize?: SizeValue;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n  trackWidth?: number;\n  trackHeight?: number;\n  onText?: string;\n  offText?: string;\n  loading?: boolean;\n  ripple?: boolean;\n  pulse?: boolean;\n}\n\nconst thumbShadow = (theme: Theme, look: SwitchLook): string =>\n  look === 'ios' ? IOS_THUMB_SHADOW : (theme.shadows[THUMB_ELEVATION[look]] ?? 'none');\n\n/** The ripple that expands from the thumb on hover. */\nconst rippleOverlay = (palette: ColorPalette): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  width: '100%',\n  height: '100%',\n  borderRadius: '50%',\n  background: alpha(palette.main, SWITCH_RIPPLE.alpha),\n  animation: `${rippleAnimation} ${seconds(SWITCH_RIPPLE.ms)} ease-out`,\n  transform: 'translate(-50%, -50%)',\n  pointerEvents: 'none',\n});\n\n/**\n * The ink on the CHECKED track — the thumb, the `on` wording and any on-icon\n * (FUT-1924).\n *\n * All three stated `#fff`, and the checked track is `palette.main`: the one\n * surface in this component the TENANT picks. A store with a pale brand got a\n * white thumb on a pale green bar, which does not read as a knob at all — the\n * switch looks OFF while it is on, so this is a state a user misreads rather\n * than a colour they dislike.\n *\n * The `gradient` flag paints the track `light → main → dark`, so the fills the\n * thumb travels over are handed over together and {@link inkOver} takes the\n * worst of them.\n *\n * The RESTING track is not here on purpose: it is `theme.palette.action.disabled`\n * washed over the page, which no tenant chooses, and a white thumb on it is the\n * conventional look in both modes.\n */\nconst checkedInk = (flags: SwitchFlags, palette: ColorPalette): string => {\n  const fills = flags.gradient\n    ? [palette.light || palette.main, palette.main, palette.dark || palette.main]\n    : [palette.main];\n\n  return inkOver(fills, palette.contrastText || NEUTRAL_CONTRAST);\n};\n\n/** The checked track: the filled bar behind the thumb once the switch is on. */\nconst checkedTrack = (flags: SwitchFlags, palette: ColorPalette): CSSObject => ({\n  backgroundColor: palette.main,\n  opacity: 1,\n  border: 0,\n  position: 'relative',\n  overflow: 'hidden',\n  ...(flags.glow && {\n    animation: `${glowAnimation} ${seconds(SWITCH_GLOW.ms)} ease-in-out infinite`,\n    boxShadow: `0 0 ${SWITCH_GLOW.blur}px ${alpha(palette.main, SWITCH_GLOW.alpha)}, inset 0 0 ${SWITCH_GLOW.insetBlur}px ${alpha(palette.main, SWITCH_GLOW.insetAlpha)}`,\n  }),\n  ...(flags.gradient && {\n    background: `linear-gradient(${SWITCH_GRADIENT.checked.angleDeg}deg, ${palette.light || palette.main} ${SWITCH_GRADIENT.checked.stops[0]}%, ${palette.main} ${SWITCH_GRADIENT.checked.stops[1]}%, ${palette.dark || palette.main} ${SWITCH_GRADIENT.checked.stops[2]}%)`,\n    backgroundSize: '200% 100%',\n    animation: `${shimmerAnimation} ${seconds(SWITCH_GRADIENT.shimmerMs)} ease infinite`,\n  }),\n});\n\nconst switchBaseSx = (\n  theme: Theme,\n  flags: SwitchFlags,\n  palette: ColorPalette,\n  geometry: SwitchGeometry,\n  look: SwitchLook,\n): CSSObject => {\n  const { width, thumbSize, padding } = geometry;\n  const isIos = look === 'ios';\n\n  return {\n    padding,\n    margin: 0,\n    transitionDuration: `${SWITCH_TRANSITION.ms}ms`,\n    transitionTimingFunction: SWITCH_TRANSITION.easing,\n    ...(isIos && { transform: `translateX(${IOS_BASE_OFFSET}px)` }),\n    '&:hover': {\n      '& .MuiSwitch-thumb': {\n        transform: flags.loading ? 'none' : `scale(${SWITCH_HOVER.thumbScale})`,\n        boxShadow: `${theme.shadows[SWITCH_HOVER.elevation]}, 0 0 ${SWITCH_HOVER.blur}px ${alpha(palette.main, SWITCH_HOVER.alpha)}`,\n      },\n      ...(flags.ripple && { '&::after': rippleOverlay(palette) }),\n    },\n    '&.Mui-checked': {\n      // The thumb travels the track minus its own width and both paddings; the\n      // iOS look insets differently, so it gets its own distance.\n      transform: `translateX(${width - thumbSize - padding * 2}px)`,\n      color: checkedInk(flags, palette),\n      '& .MuiSwitch-thumb': {\n        animation: flags.loading ? 'none' : `${bounceAnimation} ${seconds(SWITCH_TRANSITION.ms)} ease-out`,\n        /*\n          GLASS KEEPS ITS WASH AND GAINS AN OUTLINE (FUT-2067).\n\n          It used to keep the wash and nothing else, on the argument that a\n          translucent thumb MEANS to show the track through itself, so painting\n          it opaque would be repainting the variant rather than fixing it. The\n          first half of that is still true and this still does not touch the\n          fill. The second half was doing more work than the number supports:\n          `SWITCH_GLASS.thumbAlpha` is **0.9**, so nine parts in ten of the knob\n          are `background.paper` and one part is the track. On a pale brand that\n          composites to within about 1.1:1 of the bar it is sitting on — the\n          same \"reads as OFF while it is on\" state FUT-1924 exists for, in the\n          one variant whose own argument points AT the tenant-controlled\n          surface.\n\n          So the separation moves to the EDGE, which is the thing a glass\n          surface is allowed to have. The colour is {@link checkedInk} — the\n          same derivation the opaque thumb gets, so there is one rule for \"what\n          reads on this track\" rather than two — at full strength rather than\n          the `divider` hairline at `borderAlpha` 0.2 the resting thumb wears,\n          which on a pale track is not an outline at all.\n\n          Checked only. The resting track is `action.disabled` washed over the\n          page, which no tenant chooses, so the quiet hairline stays right\n          there — the same split {@link checkedInk}'s own docblock makes.\n        */\n        ...(flags.glass\n          ? { borderColor: checkedInk(flags, palette) }\n          : { backgroundColor: checkedInk(flags, palette) }),\n      },\n      '& + .MuiSwitch-track': checkedTrack(flags, palette),\n      '&.Mui-disabled + .MuiSwitch-track': { opacity: DISABLED.checkedTrackOpacity },\n      ...(isIos && { transform: `translateX(${width - thumbSize - IOS_TRAVEL_INSET}px)` }),\n    },\n    '&.Mui-focusVisible .MuiSwitch-thumb': {\n      color: palette.main,\n      border: `${SWITCH_FOCUS_RING.width}px solid ${alpha(palette.main, SWITCH_FOCUS_RING.alpha)}`,\n    },\n    '&.Mui-disabled .MuiSwitch-thumb': { color: neutralTones(theme).surface },\n    '&.Mui-disabled + .MuiSwitch-track': { opacity: DISABLED.trackOpacity },\n  };\n};\n\nconst thumbSx = (\n  theme: Theme,\n  flags: SwitchFlags,\n  palette: ColorPalette,\n  thumbSize: number,\n  look: SwitchLook,\n): CSSObject => ({\n  width: thumbSize,\n  height: thumbSize,\n  borderRadius: THUMB_RADIUS[look](thumbSize),\n  // `.Mui-checked` above replaces this for the brand-filled track; see\n  // {@link RESTING_THUMB} for why the resting one stays white.\n  backgroundColor: RESTING_THUMB,\n  boxShadow: thumbShadow(theme, look),\n  transition: `all ${seconds(SWITCH_TRANSITION.ms)} ${SWITCH_TRANSITION.easing}`,\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  ...(flags.glass && {\n    backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.thumbAlpha),\n    backdropFilter: `blur(${SWITCH_GLASS.thumbBlur}px)`,\n    border: `1px solid ${alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha)}`,\n  }),\n  ...(flags.pulse && { animation: `${pulseAnimation} ${seconds(SWITCH_PULSE.ms)} ease-in-out infinite` }),\n  ...(flags.loading && {\n    // A spinner drawn inside the thumb rather than over the whole control.\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      width: thumbSize * SWITCH_SPINNER.sizeRatio,\n      height: thumbSize * SWITCH_SPINNER.sizeRatio,\n      border: `${SWITCH_SPINNER.borderWidth}px solid ${palette.main}`,\n      borderTop: `${SWITCH_SPINNER.borderWidth}px solid transparent`,\n      borderRadius: '50%',\n      animation: `${spinAnimation} ${seconds(SWITCH_SPINNER.ms)} linear infinite`,\n    },\n  }),\n  ...(look === 'material' && {\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      borderRadius: 'inherit',\n      backgroundColor: palette.main,\n      opacity: 0,\n      transform: 'scale(0)',\n      transition: 'all 0.3s ease',\n    },\n  }),\n});\n\n/** The on/off wording the `label` variant prints inside the track. */\nconst trackLabels = (\n  theme: Theme,\n  flags: SwitchFlags,\n  palette: ColorPalette,\n  onText?: string,\n  offText?: string,\n): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  paddingLeft: theme.spacing(TRACK_LABEL.insetUnits),\n  paddingRight: theme.spacing(TRACK_LABEL.insetUnits),\n  fontSize: rem(theme, TRACK_LABEL.fontSize),\n  fontWeight: TRACK_LABEL.fontWeight,\n  color: theme.palette.text.secondary,\n  '&::before, &::after': {\n    content: '\"\"',\n    position: 'absolute',\n    fontSize: rem(theme, TRACK_LABEL.fontSize),\n    fontWeight: TRACK_LABEL.fontWeight,\n    top: '50%',\n    transform: 'translateY(-50%)',\n    zIndex: 1,\n  },\n  ...(onText && {\n    '&::before': {\n      content: `\"${onText}\"`,\n      left: theme.spacing(TRACK_LABEL.insetUnits),\n      // The `on` word sits at the end the thumb travels TO, which is the\n      // filled half of the track once checked.\n      color: checkedInk(flags, palette),\n    },\n  }),\n  ...(offText && {\n    '&::after': {\n      content: `\"${offText}\"`,\n      right: theme.spacing(TRACK_LABEL.insetUnits),\n      color: theme.palette.text.secondary,\n    },\n  }),\n});\n\nconst trackSx = (\n  theme: Theme,\n  flags: SwitchFlags,\n  palette: ColorPalette,\n  height: number,\n  look: SwitchLook,\n): CSSObject => {\n  const { glass, gradient, onText, offText, customVariant } = flags;\n\n  return {\n    borderRadius: TRACK_RADIUS[look](height),\n    backgroundColor: trackColor(\n      { black: absoluteInk(theme).black, disabled: theme.palette.action.disabled },\n      look,\n    ),\n    opacity: 1,\n    transition: `all ${seconds(SWITCH_TRANSITION.ms)} ${SWITCH_TRANSITION.easing}`,\n    position: 'relative',\n    boxShadow: look === 'ios' ? iosTrackShadow() : 'none',\n    ...(glass && {\n      backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.trackAlpha),\n      backdropFilter: `blur(${SWITCH_GLASS.trackBlur}px)`,\n      border: `1px solid ${alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha)}`,\n    }),\n    ...(gradient &&\n      !glass && {\n        background: `linear-gradient(${SWITCH_GRADIENT.resting.angleDeg}deg, ${alpha(palette.light || palette.main, SWITCH_GRADIENT.resting.lightAlpha)}, ${alpha(palette.main, SWITCH_GRADIENT.resting.mainAlpha)})`,\n      }),\n    ...(showsTrackLabels(customVariant, onText, offText) &&\n      trackLabels(theme, flags, palette, onText, offText)),\n  };\n};\n\n/**\n * The same checked-track ink, for the two ICONS the control overlays on the\n * track — which are drawn as components rather than styles, so they cannot\n * reach {@link checkedInk} directly.\n */\nexport const onTrackInk = (theme: Theme, flags: SwitchFlags): string =>\n  checkedInk(flags, getColorFromTheme(theme, flags.customColor ?? 'primary'));\n\nexport const switchSx = (theme: Theme, flags: SwitchFlags): CSSObject => {\n  const palette = getColorFromTheme(theme, flags.customColor ?? 'primary');\n  const geometry = geometryOf(flags.customSize, flags.trackWidth, flags.trackHeight);\n  const look = lookOf(flags.customVariant);\n\n  return {\n    width: geometry.width,\n    height: geometry.height,\n    padding: 0,\n    overflow: 'visible',\n    '& .MuiSwitch-switchBase': switchBaseSx(theme, flags, palette, geometry, look),\n    '& .MuiSwitch-thumb': thumbSx(theme, flags, palette, geometry.thumbSize, look),\n    '& .MuiSwitch-track': trackSx(theme, flags, palette, geometry.height, look),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-Z2EOT77M.js → chunk-2PWVPTS3.js}

@@ -5,7 +5,7 @@ import {
   fadeInScale,
   getColorFromTheme,
   getVariantIcon
-} from "./chunk-DKILDT72.js";
+} from "./chunk-A2CTAEIS.js";
 import {
   resolveAlertProps,
   resolveAnnouncement,
@@ -31,13 +31,13 @@ import {
   resolveTestId,
   withoutTestIdProps
 } from "./chunk-TYJR4GOF.js";
-import {
-  px
-} from "./chunk-PE4ZW3IA.js";
 import {
   absoluteInk,
   modeInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Alert/Alert.tsx
 import Close from "@mui/icons-material/Close";
@@ -138,7 +138,7 @@ var AlertContent = ({ title, description, dataTestId, children }) => /* @__PURE_
       "data-testid": testIdFor(dataTestId, "title"),
       sx: {
         fontWeight: TITLE.fontWeight,
-        fontSize: px(TITLE.fontSize),
+        fontSize: sxRem(TITLE.fontSize),
         marginBottom: description ? TITLE.marginBottomUnits : 0,
         wordWrap: "break-word",
         overflowWrap: "break-word",
@@ -154,7 +154,7 @@ var AlertContent = ({ title, description, dataTestId, children }) => /* @__PURE_
       "data-testid": testIdFor(dataTestId, "message"),
       sx: {
         opacity: DESCRIPTION.opacity,
-        fontSize: px(DESCRIPTION.fontSize),
+        fontSize: sxRem(DESCRIPTION.fontSize),
         wordWrap: "break-word",
         overflowWrap: "break-word",
         wordBreak: "break-word"
@@ -290,4 +290,4 @@ export {
   Alert,
   ALERT_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-Z2EOT77M.js.map
+//# sourceMappingURL=chunk-2PWVPTS3.js.map

package/dist/chunk-2PWVPTS3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Alert/Alert.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport MuiAlert from '@mui/material/Alert/index.js';\nimport AlertTitle from '@mui/material/AlertTitle/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { absoluteInk, modeInk } from '../../../tokens/ink';\n\nimport { resolveAlertProps, resolveAnnouncement, testIdFor } from './Alert.helpers';\nimport type { AlertPalette } from './Alert.metrics';\nimport {\n  ACTIVE,\n  GLOW,\n  ALERT_EASING,\n  ALERT_RADIUS_UNITS,\n  ALERT_TRANSITION_MS,\n  CLOSE_BUTTON,\n  CLOSE_DELAY_MS,\n  COLLAPSE_MS,\n  DESCRIPTION,\n  FADE_IN,\n  FOCUS,\n  HOVER,\n  seconds,\n  TITLE,\n} from './Alert.metrics';\nimport {\n  alertEmphasisStyles,\n  alertLayoutStyles,\n  alertVariantStyles,\n  fadeInScale,\n  getColorFromTheme,\n  getVariantIcon,\n} from './Alert.styles';\nimport type { AlertColor } from '@mui/material/Alert/index.js';\nimport type { AlertProps } from './Alert.types';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { sxRem } from '../../../tokens/relative';\n\nconst transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;\n\n// Define animations\n/**\n * The pointer states' shadow: a flat tint, plus the glow when the alert has one.\n *\n * The tint is an inset spread at 100vmax, which always exceeds the element, so\n * it covers the surface edge to edge. It paints ABOVE the background and BELOW\n * the content, which is what keeps the ink's own contrast out of these states\n * entirely — see `ACTIVE` in `Alert.metrics.ts` for why a layer replaced the\n * opacity dip and the brightness multiplier that each preceded it.\n *\n * The glow is COMPOSED rather than replaced, so hovering a glowing alert keeps\n * its glow; `glowStyles` gave up its `!important` for this.\n */\nfunction pointerShadow(\n  theme: Theme,\n  colorPalette: AlertPalette,\n  glow: boolean,\n  variant: string | undefined,\n): (alpha_: number) => string {\n  // The tint moves the surface AWAY from its own ink, which is why this reads\n  // the variant and not only the mode.\n  //\n  // `gradient` is the one variant where the two disagree: it paints a\n  // mid-lightness sweep (L* 42–61) under WHITE ink in BOTH modes, so the\n  // mode-keyed answer tinted it white in dark mode — toward the text. Measured:\n  // white-on-gradient fell to 2.90:1 on hover and 2.41:1 pressed, under the 3:1\n  // floor and below its own idle. Every other variant's surface tracks the mode,\n  // so for them the two rules agree.\n  const ink = variant === 'gradient' ? absoluteInk(theme).black : modeInk(theme);\n  const glowShadow = glow\n    ? `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`\n    : null;\n  return (alpha_) =>\n    [`inset 0 0 0 100vmax ${alpha(ink, alpha_)}`, glowShadow].filter(Boolean).join(', ');\n}\n\nconst StyledAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'glow', 'pulse', 'animate'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  animate?: boolean;\n}>(({ theme, customVariant, customColor, glow, pulse, animate }) => {\n  const colorPalette = getColorFromTheme(theme, customColor || customVariant || 'info');\n\n  const withTint = pointerShadow(theme, colorPalette, Boolean(glow), customVariant);\n\n  return {\n    borderRadius: theme.spacing(ALERT_RADIUS_UNITS),\n    transition: `${transition}, box-shadow ${seconds(ACTIVE.ms)} ${ALERT_EASING}`,\n    position: 'relative',\n    overflow: 'hidden',\n    animation: animate ? `${fadeInScale} ${seconds(FADE_IN.ms)} ease-out` : 'none',\n    willChange: 'transform, opacity',\n\n    ...alertLayoutStyles(theme, colorPalette, animate),\n\n    // Hover: one tint step, and nothing that moves. An alert is a surface\n    // rather than a control, so the pointer only needs telling it is here. The\n    // icon keeps its own place for the same reason — it is the variant's\n    // meaning, not an affordance to animate.\n    '&:hover': {\n      boxShadow: withTint(HOVER.tintAlpha),\n\n      '&::before': {\n        opacity: 1,\n      },\n    },\n\n    // Press: a 20% tint, landing at once and easing back. Still no geometry.\n    //\n    // `transition: none` here is what makes the dip INSTANT: a click's\n    // `:active` lasts about as long as the finger is down, so easing into it\n    // would be cut off in its first tenth and read as a flicker. The ease is on\n    // the way back, governed by the root.\n    //\n    // Neither `:hover` nor `:focus-visible` may declare `transition`, and that\n    // is not a style preference. `:active` under a mouse ALWAYS implies\n    // `:hover`, so a bare shorthand in the hover block outranks the root's\n    // (0,2,0 beats 0,1,0) and silently resets the timing this state rests on.\n    //\n    // The `:not(:has(…))` names CONTROLS, not any descendant. `:active`\n    // matches an ancestor of whatever is pressed, so dismissing an alert\n    // dimmed the alert being dismissed and pressing a call to action dimmed\n    // the message explaining it. Excluding `:has(:active)` wholesale does not\n    // work and was the first attempt: pressing the TEXT makes that text\n    // `:active` too, so the guard matched on every press and the state never\n    // fired at all.\n    '&:active:not(:has(button:active, a:active, [role=\"button\"]:active))': {\n      boxShadow: withTint(ACTIVE.tintAlpha),\n      transition: 'none',\n    },\n\n    // Focus: `:focus-visible`, not `:focus-within`.\n    //\n    // The alert carries `tabIndex={0}`, so a MOUSE CLICK focused it and painted\n    // the ring — a keyboard affordance answering a pointer, which is what made\n    // clicking one look like an error state. `:focus-visible` is the browser's\n    // own answer to \"did this focus come from the keyboard\": the ring stays for\n    // whoever tabs here and never fires on a click.\n    //\n    // One ring, not three. It was a 3px outline at 3px offset UNDER a 6px halo,\n    // and stacking two rings on one edge is what read as unfinished rather than\n    // as emphasis.\n    // It declares no `transition`: `outline-style` is discrete, so the ring\n    // arrives at full width with only its COLOUR easing — from `currentcolor`,\n    // the near-black alert ink, to the blue. That is a visible dark flash on\n    // every keyboard focus, and it would also outrank the root's opacity\n    // transition the way the hover block did.\n    '&:focus-visible': {\n      outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,\n      outlineOffset: `${FOCUS.offset}px`,\n    },\n\n    ...alertVariantStyles(theme, customVariant, colorPalette),\n    ...alertEmphasisStyles(colorPalette, Boolean(glow), Boolean(pulse)),\n  };\n});\n\n// glass and gradient are our own looks with no MUI severity of their own; both\n// borrow info's. danger is MUI's error.\nconst MUI_SEVERITY: Record<string, AlertColor> = {\n  danger: 'error',\n  glass: 'info',\n  gradient: 'info',\n};\n\nconst toMuiSeverity = (variant: string): AlertColor =>\n  MUI_SEVERITY[variant] ?? (variant as AlertColor);\n\nconst AlertContent: React.FC<{\n  title?: AlertProps['title'];\n  description?: AlertProps['description'];\n  dataTestId?: string;\n  children?: React.ReactNode;\n}> = ({ title, description, dataTestId, children }) => (\n  <>\n    {title && (\n      <AlertTitle\n        data-testid={testIdFor(dataTestId, 'title')}\n        sx={{\n          fontWeight: TITLE.fontWeight,\n          fontSize: sxRem(TITLE.fontSize),\n          marginBottom: description ? TITLE.marginBottomUnits : 0,\n          wordWrap: 'break-word',\n          overflowWrap: 'break-word',\n          wordBreak: 'break-word',\n        }}\n      >\n        {title}\n      </AlertTitle>\n    )}\n    {description && (\n      <Box\n        component=\"div\"\n        data-testid={testIdFor(dataTestId, 'message')}\n        sx={{\n          opacity: DESCRIPTION.opacity,\n          fontSize: sxRem(DESCRIPTION.fontSize),\n          wordWrap: 'break-word',\n          overflowWrap: 'break-word',\n          wordBreak: 'break-word',\n        }}\n      >\n        {description}\n      </Box>\n    )}\n    {children}\n  </>\n);\n\nconst AlertCloseButton: React.FC<{ dataTestId?: string; label: string; onClose: () => void }> = ({\n  dataTestId,\n  label,\n  onClose,\n}) => (\n  <IconButton\n    data-testid={testIdFor(dataTestId, 'close')}\n    aria-label={label}\n    color=\"inherit\"\n    size=\"small\"\n    onClick={onClose}\n    sx={(theme) => ({\n      transition,\n      opacity: CLOSE_BUTTON.opacity,\n      // Opacity and a wash only: the button used to spin 90deg and grow 1.1,\n      // which drew the eye to the dismiss rather than to the message.\n      '&:hover': {\n        opacity: 1,\n        backgroundColor: alpha(theme.palette.action.hover, CLOSE_BUTTON.washAlpha),\n      },\n      // A REAL ring, on the keyboard-only selector.\n      //\n      // This used to be `&:focus` setting `outline: 'none'` over a\n      // `rgba(0,0,0,0.1)` wash — 1.25:1 against the info surface, and MUI's\n      // ButtonBase already sets `outline: 0`, so there was no UA fallback\n      // either. It went unnoticed while the ROOT still matched `:focus-within`\n      // and drew a ring around the whole alert; moving the root to\n      // `:focus-visible` took that away and left this button with no visible\n      // focus at all. `Banner`'s dismiss already draws its own outline, so\n      // this is also what keeps the two surfaces telling a keyboard user the\n      // same thing.\n      '&:focus-visible': {\n        opacity: 1,\n        // `currentColor` is the alert's own ink, inherited through\n        // `color=\"inherit\"`, so the ring is drawn in whatever colour was\n        // already chosen to be READ on this surface. Measured 11.2:1 on the\n        // semantic variants and 5.7:1 on `gradient`.\n        //\n        // That is a reasoned choice, not a test-backed one, and the difference\n        // matters: `alert-contrast.test.tsx` covers the ink of the four\n        // semantic variants only — its `glass` case asserts the pane's alpha\n        // rather than its ink, and `gradient` it does not render at all. A\n        // translucent surface's contrast depends on what sits behind it, which\n        // is why that test stops where it does and why this comment does not\n        // borrow a guarantee it never made.\n        outline: `${FOCUS.ringWidth}px solid currentColor`,\n        outlineOffset: `${FOCUS.offset}px`,\n        backgroundColor: alpha(theme.palette.action.focus, CLOSE_BUTTON.washAlpha),\n      },\n    })}\n  >\n    <Close fontSize=\"inherit\" />\n  </IconButton>\n);\n\n/**\n * The dismiss button, or nothing.\n *\n * Reads `closeLabel` straight off the props rather than through the\n * `definedProps` merge, which would widen it to `string | undefined` and hand\n * the button an empty name. The UNION in `AlertProps` guarantees the label\n * wherever `closable` is true — that narrowing is gone inside the component,\n * which is why the fallback below exists and why it is unreachable.\n */\nfunction dismissButton(\n  props: AlertProps,\n  dataTestId: string | undefined,\n  onClose: () => void,\n): React.JSX.Element | null {\n  if (!props.closable) return null;\n  return <AlertCloseButton dataTestId={dataTestId} label={props.closeLabel} onClose={onClose} />;\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>((alertProps, ref) => {\n  const {\n    variant,\n    color,\n    glow,\n    pulse,\n    icon,\n    showIcon,\n    onClose,\n    title,\n    description,\n    children,\n    animate,\n    role: _role, announce: _announce, // resolved from `alertProps` — see `resolveAnnouncement`\n    'aria-atomic': ariaAtomic,\n    ...others\n  } = resolveAlertProps(alertProps);\n\n  // Every spelling of the test id the shared contract allows, mapped to the\n  // one the DOM reads and defaulted to `alert`; the native Alert does the same.\n  const dataTestId = resolveTestId(others, 'alert');\n  // Then the dismiss union, which `dismissButton` reads off `alertProps` rather\n  // than through this destructure — so without this strip it rides `...props`\n  // onto the DOM. `ALERT_DEFAULTS` supplies `closable: false`, so that happened\n  // on EVERY alert, not only the closable ones.\n  const props = withoutAlertOnlyProps(withoutTestIdProps(others));\n\n  // Depends on `variant`, so it cannot live in the static defaults above.\n  const announcement = resolveAnnouncement(alertProps, variant);\n  const [open, setOpen] = React.useState(true);\n  const [isClosing, setIsClosing] = React.useState(false);\n\n  const handleClose = () => {\n    setIsClosing(true);\n    window.setTimeout(() => {\n      setOpen(false);\n      onClose?.();\n    }, CLOSE_DELAY_MS);\n  };\n\n  const severity = toMuiSeverity(variant);\n\n  const displayIcon = showIcon ? (\n    <Box component=\"span\" data-testid={testIdFor(dataTestId, 'icon')}>\n      {icon || getVariantIcon(variant)}\n    </Box>\n  ) : (\n    false\n  );\n\n  const content = (\n    <AlertContent title={title} description={description} dataTestId={dataTestId}>\n      {children}\n    </AlertContent>\n  );\n\n  return (\n    <Collapse in={open && !isClosing} timeout={COLLAPSE_MS}>\n      <StyledAlert\n        ref={ref}\n        data-testid={dataTestId}\n        severity={severity}\n        customVariant={variant}\n        customColor={color}\n        glow={glow}\n        pulse={pulse}\n        animate={animate}\n        icon={displayIcon}\n        role={announcement.role}\n        aria-live={announcement['aria-live']}\n        aria-atomic={ariaAtomic}\n        tabIndex={0}\n        action={dismissButton(alertProps, dataTestId, handleClose)}\n        {...props}\n      >\n        {content}\n      </StyledAlert>\n    </Collapse>\n  );\n});\n\n/**\n * The props `Alert` OWNS, which must never reach the DOM.\n *\n * `AlertProps` extends MUI's, whose rest-spread is how a host's real HTML\n * attributes get onto the root — so the same spread carries the alert's own\n * configuration unless it is named here. Everything else the component consumes\n * leaves through the destructure above; these two do not, because\n * `dismissButton` reads them off the original props to keep the dismiss union's\n * narrowing intact.\n *\n * Exported so a test can render an alert carrying every name on it and assert\n * none reaches the DOM — the check that would have caught `closable`.\n */\nexport const ALERT_ONLY_PROPS = ['closable', 'closeLabel'] as const;\n\nfunction withoutAlertOnlyProps<P extends object>(rest: P): P {\n  const html = { ...rest } as Record<string, unknown>;\n  for (const key of ALERT_ONLY_PROPS) delete html[key];\n  return html as P;\n}\n\nAlert.displayName = 'Alert';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,WAAW;AAClB,OAAO,cAAc;AACrB,OAAO,gBAAgB;AACvB,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,OAAO,gBAAgB;AACvB,SAAS,OAAO,cAAc;AAE9B,OAAO,WAAW;AAgLhB,mBAEI,KAFJ;AA7IF,IAAM,aAAa,OAAO,QAAQ,mBAAmB,CAAC,IAAI,YAAY;AAetE,SAAS,cACP,OACA,cACA,MACA,SAC4B;AAU5B,QAAM,MAAM,YAAY,aAAa,YAAY,KAAK,EAAE,QAAQ,QAAQ,KAAK;AAC7E,QAAM,aAAa,OACf,OAAO,KAAK,IAAI,MAAM,KAAK,MAAM,MAAM,MAAM,aAAa,MAAM,KAAK,KAAK,CAAC,KAC3E;AACJ,SAAO,CAAC,WACN,CAAC,uBAAuB,MAAM,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI;AACvF;AAEA,IAAM,cAAc,OAAO,UAAU;AAAA,EACnC,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,eAAe,QAAQ,SAAS,SAAS,EAAE,SAAS,IAAc;AACzF,CAAC,EAME,CAAC,EAAE,OAAO,eAAe,aAAa,MAAM,OAAO,QAAQ,MAAM;AAClE,QAAM,eAAe,kBAAkB,OAAO,eAAe,iBAAiB,MAAM;AAEpF,QAAM,WAAW,cAAc,OAAO,cAAc,QAAQ,IAAI,GAAG,aAAa;AAEhF,SAAO;AAAA,IACL,cAAc,MAAM,QAAQ,kBAAkB;AAAA,IAC9C,YAAY,GAAG,UAAU,gBAAgB,QAAQ,OAAO,EAAE,CAAC,IAAI,YAAY;AAAA,IAC3E,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW,UAAU,GAAG,WAAW,IAAI,QAAQ,QAAQ,EAAE,CAAC,cAAc;AAAA,IACxE,YAAY;AAAA,IAEZ,GAAG,kBAAkB,OAAO,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAMjD,WAAW;AAAA,MACT,WAAW,SAAS,MAAM,SAAS;AAAA,MAEnC,aAAa;AAAA,QACX,SAAS;AAAA,MACX;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAqBA,uEAAuE;AAAA,MACrE,WAAW,SAAS,OAAO,SAAS;AAAA,MACpC,YAAY;AAAA,IACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBA,mBAAmB;AAAA,MACjB,SAAS,GAAG,MAAM,SAAS,YAAY,MAAM,aAAa,MAAM,MAAM,SAAS,CAAC;AAAA,MAChF,eAAe,GAAG,MAAM,MAAM;AAAA,IAChC;AAAA,IAEA,GAAG,mBAAmB,OAAO,eAAe,YAAY;AAAA,IACxD,GAAG,oBAAoB,cAAc,QAAQ,IAAI,GAAG,QAAQ,KAAK,CAAC;AAAA,EACpE;AACF,CAAC;AAID,IAAM,eAA2C;AAAA,EAC/C,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,IAAM,gBAAgB,CAAC,YACrB,aAAa,OAAO,KAAM;AAE5B,IAAM,eAKD,CAAC,EAAE,OAAO,aAAa,YAAY,SAAS,MAC/C,iCACG;AAAA,WACC;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,UAAU,YAAY,OAAO;AAAA,MAC1C,IAAI;AAAA,QACF,YAAY,MAAM;AAAA,QAClB,UAAU,MAAM,MAAM,QAAQ;AAAA,QAC9B,cAAc,cAAc,MAAM,oBAAoB;AAAA,QACtD,UAAU;AAAA,QACV,cAAc;AAAA,QACd,WAAW;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAAA,EAED,eACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa,UAAU,YAAY,SAAS;AAAA,MAC5C,IAAI;AAAA,QACF,SAAS,YAAY;AAAA,QACrB,UAAU,MAAM,YAAY,QAAQ;AAAA,QACpC,UAAU;AAAA,QACV,cAAc;AAAA,QACd,WAAW;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAAA,EAED;AAAA,GACH;AAGF,IAAM,mBAA0F,CAAC;AAAA,EAC/F;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,eAAa,UAAU,YAAY,OAAO;AAAA,IAC1C,cAAY;AAAA,IACZ,OAAM;AAAA,IACN,MAAK;AAAA,IACL,SAAS;AAAA,IACT,IAAI,CAAC,WAAW;AAAA,MACd;AAAA,MACA,SAAS,aAAa;AAAA;AAAA;AAAA,MAGtB,WAAW;AAAA,QACT,SAAS;AAAA,QACT,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,aAAa,SAAS;AAAA,MAC3E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYA,mBAAmB;AAAA,QACjB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAaT,SAAS,GAAG,MAAM,SAAS;AAAA,QAC3B,eAAe,GAAG,MAAM,MAAM;AAAA,QAC9B,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,aAAa,SAAS;AAAA,MAC3E;AAAA,IACF;AAAA,IAEA,8BAAC,SAAM,UAAS,WAAU;AAAA;AAC5B;AAYF,SAAS,cACP,OACA,YACA,SAC0B;AAC1B,MAAI,CAAC,MAAM,SAAU,QAAO;AAC5B,SAAO,oBAAC,oBAAiB,YAAwB,OAAO,MAAM,YAAY,SAAkB;AAC9F;AAEO,IAAM,QAAQ,MAAM,WAAuC,CAAC,YAAY,QAAQ;AACrF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IAAO,UAAU;AAAA;AAAA,IACvB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,kBAAkB,UAAU;AAIhC,QAAM,aAAa,cAAc,QAAQ,OAAO;AAKhD,QAAM,QAAQ,sBAAsB,mBAAmB,MAAM,CAAC;AAG9D,QAAM,eAAe,oBAAoB,YAAY,OAAO;AAC5D,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,IAAI;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AAEtD,QAAM,cAAc,MAAM;AACxB,iBAAa,IAAI;AACjB,WAAO,WAAW,MAAM;AACtB,cAAQ,KAAK;AACb,gBAAU;AAAA,IACZ,GAAG,cAAc;AAAA,EACnB;AAEA,QAAM,WAAW,cAAc,OAAO;AAEtC,QAAM,cAAc,WAClB,oBAAC,OAAI,WAAU,QAAO,eAAa,UAAU,YAAY,MAAM,GAC5D,kBAAQ,eAAe,OAAO,GACjC,IAEA;AAGF,QAAM,UACJ,oBAAC,gBAAa,OAAc,aAA0B,YACnD,UACH;AAGF,SACE,oBAAC,YAAS,IAAI,QAAQ,CAAC,WAAW,SAAS,aACzC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,eAAe;AAAA,MACf,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM,aAAa;AAAA,MACnB,aAAW,aAAa,WAAW;AAAA,MACnC,eAAa;AAAA,MACb,UAAU;AAAA,MACV,QAAQ,cAAc,YAAY,YAAY,WAAW;AAAA,MACxD,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAeM,IAAM,mBAAmB,CAAC,YAAY,YAAY;AAEzD,SAAS,sBAAwC,MAAY;AAC3D,QAAM,OAAO,EAAE,GAAG,KAAK;AACvB,aAAW,OAAO,iBAAkB,QAAO,KAAK,GAAG;AACnD,SAAO;AACT;AAEA,MAAM,cAAc;","names":[]}

package/dist/{chunk-HH5CNSJP.js → chunk-2WGMMFGV.js}

@@ -14,6 +14,9 @@ import {
   onMedia,
   sheen
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Badge/Badge.variants.ts
 import { alpha } from "@mui/material/styles/index.js";
@@ -23,7 +26,7 @@ var BADGE_VARIANTS = {
     color: colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,
     minWidth: sizeStyles.minWidth,
     height: sizeStyles.height,
-    fontSize: sizeStyles.fontSize,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
     borderRadius: sizeStyles.height / 2
   }),
@@ -40,7 +43,7 @@ var BADGE_VARIANTS = {
     color: colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,
     minWidth: sizeStyles.minWidth,
     height: sizeStyles.height,
-    fontSize: sizeStyles.fontSize,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
     borderRadius: "50%"
   }),
@@ -49,7 +52,7 @@ var BADGE_VARIANTS = {
     color: onMedia(theme),
     minWidth: sizeStyles.minWidth,
     height: sizeStyles.height,
-    fontSize: sizeStyles.fontSize,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
     borderRadius: sizeStyles.height / 2
   }),
@@ -61,7 +64,7 @@ var BADGE_VARIANTS = {
     color: colorPalette.main,
     minWidth: sizeStyles.minWidth,
     height: sizeStyles.height,
-    fontSize: sizeStyles.fontSize,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
     borderRadius: sizeStyles.height / 2,
     boxShadow: `inset 0 1px 1px ${sheen(theme, GLASS_INSET_HIGHLIGHT_ALPHA)}`
@@ -72,7 +75,7 @@ var BADGE_VARIANTS = {
     color: colorPalette.main,
     minWidth: sizeStyles.minWidth,
     height: sizeStyles.height,
-    fontSize: sizeStyles.fontSize,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
     borderRadius: sizeStyles.height / 2
   }),
@@ -82,7 +85,7 @@ var BADGE_VARIANTS = {
     border: `1px solid ${alpha(colorPalette.main, SECONDARY_BORDER_ALPHA)}`,
     minWidth: sizeStyles.minWidth,
     height: sizeStyles.height,
-    fontSize: sizeStyles.fontSize,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
     borderRadius: sizeStyles.height / 2
   }),
@@ -91,7 +94,7 @@ var BADGE_VARIANTS = {
     color: theme.palette.error.contrastText,
     minWidth: sizeStyles.minWidth,
     height: sizeStyles.height,
-    fontSize: sizeStyles.fontSize,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
     borderRadius: sizeStyles.height / 2,
     fontWeight: BADGE_DESTRUCTIVE_FONT_WEIGHT
@@ -101,7 +104,7 @@ var BADGE_VARIANTS = {
     color: theme.palette.success.contrastText,
     minWidth: sizeStyles.minWidth,
     height: sizeStyles.height,
-    fontSize: sizeStyles.fontSize,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
     borderRadius: sizeStyles.height / 2
   }),
@@ -110,7 +113,7 @@ var BADGE_VARIANTS = {
     color: theme.palette.warning.contrastText,
     minWidth: sizeStyles.minWidth,
     height: sizeStyles.height,
-    fontSize: sizeStyles.fontSize,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
     borderRadius: sizeStyles.height / 2
   })
@@ -120,4 +123,4 @@ var badgeVariantStyles = (theme, colorPalette, sizeStyles, customVariant) => cus
 export {
   badgeVariantStyles
 };
-//# sourceMappingURL=chunk-HH5CNSJP.js.map
+//# sourceMappingURL=chunk-2WGMMFGV.js.map

package/dist/chunk-2WGMMFGV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/Badge.variants.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\n\nimport {\n  BADGE_DESTRUCTIVE_FONT_WEIGHT,\n  GLASS_BACKGROUND_ALPHA,\n  GLASS_BLUR_PX,\n  GLASS_BORDER_ALPHA,\n  GLASS_INSET_HIGHLIGHT_ALPHA,\n  GLASS_SATURATE,\n  OUTLINE_BORDER_WIDTH,\n  SECONDARY_BACKGROUND_ALPHA,\n  SECONDARY_BORDER_ALPHA,\n} from './Badge.metrics';\nimport type { BadgePalette, BadgeSizeStyles } from './Badge.styles';\nimport { absoluteInk, onMedia, sheen } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst BADGE_VARIANTS: Record<\n  string,\n  (theme: Theme, colorPalette: BadgePalette, sizeStyles: BadgeSizeStyles) => CSSObject\n> = {\n  default: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: colorPalette.main,\n        color:\n          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.height / 2 }),\n  dot: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: colorPalette.main,\n        width: sizeStyles.dotSize,\n        height: sizeStyles.dotSize,\n        minWidth: sizeStyles.dotSize,\n        borderRadius: '50%',\n        padding: 0 }),\n  count: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: colorPalette.main,\n        color:\n          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: '50%' }),\n  gradient: (theme, colorPalette, sizeStyles) => ({\n        background: `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`,\n        color: onMedia(theme),\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.height / 2 }),\n  glass: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: alpha(colorPalette.main, GLASS_BACKGROUND_ALPHA),\n        backdropFilter: `blur(${GLASS_BLUR_PX}px) saturate(${GLASS_SATURATE * 100}%)`,\n        WebkitBackdropFilter: `blur(${GLASS_BLUR_PX}px) saturate(${GLASS_SATURATE * 100}%)`,\n        border: `1px solid ${alpha(colorPalette.main, GLASS_BORDER_ALPHA)}`,\n        color: colorPalette.main,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.height / 2,\n        boxShadow: `inset 0 1px 1px ${sheen(theme, GLASS_INSET_HIGHLIGHT_ALPHA)}` }),\n  outline: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: 'transparent',\n        border: `${OUTLINE_BORDER_WIDTH}px solid ${colorPalette.main}`,\n        color: colorPalette.main,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.height / 2 }),\n  secondary: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: alpha(colorPalette.main, SECONDARY_BACKGROUND_ALPHA),\n        color: colorPalette.main,\n        border: `1px solid ${alpha(colorPalette.main, SECONDARY_BORDER_ALPHA)}`,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.height / 2 }),\n  destructive: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: theme.palette.error.main,\n        color: theme.palette.error.contrastText,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.height / 2,\n        fontWeight: BADGE_DESTRUCTIVE_FONT_WEIGHT }),\n  success: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: theme.palette.success.main,\n        color: theme.palette.success.contrastText,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.height / 2 }),\n  warning: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: theme.palette.warning.main,\n        color: theme.palette.warning.contrastText,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.height / 2 }) };\n\nexport const badgeVariantStyles = (\n  theme: Theme,\n  colorPalette: BadgePalette,\n  sizeStyles: BadgeSizeStyles,\n  customVariant?: string,\n): CSSObject =>\n  customVariant ? (BADGE_VARIANTS[customVariant]?.(theme, colorPalette, sizeStyles) ?? {}) : {};\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,SAAS,aAAa;AAiBtB,IAAM,iBAGF;AAAA,EACF,SAAS,CAAC,OAAO,cAAc,gBAAgB;AAAA,IACzC,iBAAiB,aAAa;AAAA,IAC9B,OACE,aAAa,gBAAgB,MAAM,QAAQ,kBAAkB,aAAa,IAAI,KAAK,YAAY,KAAK,EAAE;AAAA,IACxG,UAAU,WAAW;AAAA,IACrB,QAAQ,WAAW;AAAA,IACnB,UAAU,IAAI,OAAO,WAAW,KAAK,QAAQ;AAAA,IAC7C,SAAS,WAAW;AAAA,IACpB,cAAc,WAAW,SAAS;AAAA,EAAE;AAAA,EAC1C,KAAK,CAAC,OAAO,cAAc,gBAAgB;AAAA,IACrC,iBAAiB,aAAa;AAAA,IAC9B,OAAO,WAAW;AAAA,IAClB,QAAQ,WAAW;AAAA,IACnB,UAAU,WAAW;AAAA,IACrB,cAAc;AAAA,IACd,SAAS;AAAA,EAAE;AAAA,EACjB,OAAO,CAAC,OAAO,cAAc,gBAAgB;AAAA,IACvC,iBAAiB,aAAa;AAAA,IAC9B,OACE,aAAa,gBAAgB,MAAM,QAAQ,kBAAkB,aAAa,IAAI,KAAK,YAAY,KAAK,EAAE;AAAA,IACxG,UAAU,WAAW;AAAA,IACrB,QAAQ,WAAW;AAAA,IACnB,UAAU,IAAI,OAAO,WAAW,KAAK,QAAQ;AAAA,IAC7C,SAAS,WAAW;AAAA,IACpB,cAAc;AAAA,EAAM;AAAA,EAC1B,UAAU,CAAC,OAAO,cAAc,gBAAgB;AAAA,IAC1C,YAAY,2BAA2B,aAAa,IAAI,QAAQ,aAAa,QAAQ,aAAa,IAAI;AAAA,IACtG,OAAO,QAAQ,KAAK;AAAA,IACpB,UAAU,WAAW;AAAA,IACrB,QAAQ,WAAW;AAAA,IACnB,UAAU,IAAI,OAAO,WAAW,KAAK,QAAQ;AAAA,IAC7C,SAAS,WAAW;AAAA,IACpB,cAAc,WAAW,SAAS;AAAA,EAAE;AAAA,EAC1C,OAAO,CAAC,OAAO,cAAc,gBAAgB;AAAA,IACvC,iBAAiB,MAAM,aAAa,MAAM,sBAAsB;AAAA,IAChE,gBAAgB,QAAQ,aAAa,gBAAgB,iBAAiB,GAAG;AAAA,IACzE,sBAAsB,QAAQ,aAAa,gBAAgB,iBAAiB,GAAG;AAAA,IAC/E,QAAQ,aAAa,MAAM,aAAa,MAAM,kBAAkB,CAAC;AAAA,IACjE,OAAO,aAAa;AAAA,IACpB,UAAU,WAAW;AAAA,IACrB,QAAQ,WAAW;AAAA,IACnB,UAAU,IAAI,OAAO,WAAW,KAAK,QAAQ;AAAA,IAC7C,SAAS,WAAW;AAAA,IACpB,cAAc,WAAW,SAAS;AAAA,IAClC,WAAW,mBAAmB,MAAM,OAAO,2BAA2B,CAAC;AAAA,EAAG;AAAA,EAChF,SAAS,CAAC,OAAO,cAAc,gBAAgB;AAAA,IACzC,iBAAiB;AAAA,IACjB,QAAQ,GAAG,oBAAoB,YAAY,aAAa,IAAI;AAAA,IAC5D,OAAO,aAAa;AAAA,IACpB,UAAU,WAAW;AAAA,IACrB,QAAQ,WAAW;AAAA,IACnB,UAAU,IAAI,OAAO,WAAW,KAAK,QAAQ;AAAA,IAC7C,SAAS,WAAW;AAAA,IACpB,cAAc,WAAW,SAAS;AAAA,EAAE;AAAA,EAC1C,WAAW,CAAC,OAAO,cAAc,gBAAgB;AAAA,IAC3C,iBAAiB,MAAM,aAAa,MAAM,0BAA0B;AAAA,IACpE,OAAO,aAAa;AAAA,IACpB,QAAQ,aAAa,MAAM,aAAa,MAAM,sBAAsB,CAAC;AAAA,IACrE,UAAU,WAAW;AAAA,IACrB,QAAQ,WAAW;AAAA,IACnB,UAAU,IAAI,OAAO,WAAW,KAAK,QAAQ;AAAA,IAC7C,SAAS,WAAW;AAAA,IACpB,cAAc,WAAW,SAAS;AAAA,EAAE;AAAA,EAC1C,aAAa,CAAC,OAAO,cAAc,gBAAgB;AAAA,IAC7C,iBAAiB,MAAM,QAAQ,MAAM;AAAA,IACrC,OAAO,MAAM,QAAQ,MAAM;AAAA,IAC3B,UAAU,WAAW;AAAA,IACrB,QAAQ,WAAW;AAAA,IACnB,UAAU,IAAI,OAAO,WAAW,KAAK,QAAQ;AAAA,IAC7C,SAAS,WAAW;AAAA,IACpB,cAAc,WAAW,SAAS;AAAA,IAClC,YAAY;AAAA,EAA8B;AAAA,EAChD,SAAS,CAAC,OAAO,cAAc,gBAAgB;AAAA,IACzC,iBAAiB,MAAM,QAAQ,QAAQ;AAAA,IACvC,OAAO,MAAM,QAAQ,QAAQ;AAAA,IAC7B,UAAU,WAAW;AAAA,IACrB,QAAQ,WAAW;AAAA,IACnB,UAAU,IAAI,OAAO,WAAW,KAAK,QAAQ;AAAA,IAC7C,SAAS,WAAW;AAAA,IACpB,cAAc,WAAW,SAAS;AAAA,EAAE;AAAA,EAC1C,SAAS,CAAC,OAAO,cAAc,gBAAgB;AAAA,IACzC,iBAAiB,MAAM,QAAQ,QAAQ;AAAA,IACvC,OAAO,MAAM,QAAQ,QAAQ;AAAA,IAC7B,UAAU,WAAW;AAAA,IACrB,QAAQ,WAAW;AAAA,IACnB,UAAU,IAAI,OAAO,WAAW,KAAK,QAAQ;AAAA,IAC7C,SAAS,WAAW;AAAA,IACpB,cAAc,WAAW,SAAS;AAAA,EAAE;AAAG;AAExC,IAAM,qBAAqB,CAChC,OACA,cACA,YACA,kBAEA,gBAAiB,eAAe,aAAa,IAAI,OAAO,cAAc,UAAU,KAAK,CAAC,IAAK,CAAC;","names":[]}