@12-apps/ui 6.25.0 → 6.27.0

package/dist/chunk-QLI7ES7Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/theme.ts"],"sourcesContent":["import { darken, getContrastRatio, lighten } from './color';\nimport { cssLengthToPx, cssTrackingToEm } from './css-units';\nimport { HEADING_SCALE, type HeadingLevel } from './heading-scale';\n\nimport type { SizeValue } from './vocabulary';\n\n/**\n * THE THEME BOTH RENDERERS READ.\n *\n * On the web every component styles itself from MUI's `Theme`, which is built\n * by the host (`@12-apps/app-shell`'s `createAppTheme` in the origin apps) and\n * reaches a component through emotion's context. React Native has no emotion,\n * no CSS and no MUI, so a native `Button` needs the same decisions — the\n * palette, the spacing unit, the radius, the type scale — from somewhere that\n * does not import a renderer.\n *\n * This is that somewhere. `UiTheme` is a plain object of numbers and colour\n * strings. `createUiTheme` derives it the way MUI's `createPalette` derives its\n * own: a `light` shade is `lighten(main, 0.2)`, a `dark` shade `darken(main,\n * 0.3)`, `contrastText` flips at a 3:1 ratio against `rgba(0, 0, 0, 0.87)`.\n * Same seeds in, same shades out, on both sides — that is the whole basis for\n * a native button being the web button's colour and not a near miss.\n *\n * Numbers are in px on the web and dp on native; both are the CSS-pixel unit\n * a design is drawn in, so a `fontSize: 16` here IS `1rem` in a web style\n * and `16` in a `StyleSheet`. The web components keep their `rem` strings and\n * derive them from these numbers where the two meet (see `px()` below and the\n * `*.metrics.ts` file beside each ported component).\n *\n * `danger` and `neutral` are this package's names (see `./scales`); `danger`\n * is MUI's `error` and `neutral` is drawn from the grey ramp the way\n * `Button.styles.ts` has always drawn it.\n */\n\nexport type UiThemeMode = 'light' | 'dark';\n\nexport interface UiPaletteColor {\n  main: string;\n  light: string;\n  dark: string;\n  contrastText: string;\n}\n\nexport type UiGreyStep = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;\n\nexport interface UiPalette {\n  mode: UiThemeMode;\n  primary: UiPaletteColor;\n  secondary: UiPaletteColor;\n  success: UiPaletteColor;\n  warning: UiPaletteColor;\n  info: UiPaletteColor;\n  danger: UiPaletteColor;\n  neutral: UiPaletteColor;\n  text: { primary: string; secondary: string; disabled: string };\n  background: { default: string; paper: string };\n  divider: string;\n  action: {\n    active: string;\n    hover: string;\n    selected: string;\n    disabled: string;\n    disabledBackground: string;\n    focus: string;\n  };\n  grey: Record<UiGreyStep, string>;\n}\n\n/** One step of the body scale: `fontSize` in px, `lineHeight` as a ratio. */\nexport interface UiTypeStep {\n  fontSize: number;\n  lineHeight: number;\n}\n\nexport type UiFontWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';\n\nexport interface UiHeadingStep extends UiTypeStep {\n  /** In em, so it scales with the step. `undefined` is \"normal\". */\n  letterSpacing?: number;\n  normalWeight: number;\n}\n\nexport interface UiTypography {\n  /**\n   * Native has no fallback stacks: a font is either installed and named, or\n   * `undefined` and the platform's own. The web default is MUI's Roboto stack.\n   */\n  fontFamily: string | undefined;\n  monospaceFontFamily: string | undefined;\n  sizes: Record<SizeValue, UiTypeStep>;\n  weights: Record<UiFontWeight, number>;\n  heading: Record<HeadingLevel, UiHeadingStep>;\n}\n\nexport interface UiTheme {\n  mode: UiThemeMode;\n  palette: UiPalette;\n  /** MUI's `theme.spacing(n)`: `n` units of {@link UiTheme.spacingUnit}, in px. */\n  spacing: (units: number) => number;\n  spacingUnit: number;\n  /** `md` is MUI's `shape.borderRadius`; the others are its halves and doubles. */\n  radius: { sm: number; md: number; lg: number; xl: number; full: number };\n  typography: UiTypography;\n  zIndex: { appBar: number; drawer: number; modal: number; snackbar: number; tooltip: number };\n}\n\n/** A seed for one palette slot: a hex `main`, or any subset of the four shades. */\nexport type UiPaletteSeed = string | Partial<UiPaletteColor>;\n\nexport interface UiThemeOptions {\n  mode?: UiThemeMode;\n  palette?: Partial<{\n    primary: UiPaletteSeed;\n    secondary: UiPaletteSeed;\n    success: UiPaletteSeed;\n    warning: UiPaletteSeed;\n    info: UiPaletteSeed;\n    danger: UiPaletteSeed;\n    background: Partial<UiPalette['background']>;\n  }>;\n  typography?: Partial<Pick<UiTypography, 'fontFamily' | 'monospaceFontFamily'>>;\n  spacingUnit?: number;\n}\n\nconst ROOT_FONT_PX = 16;\n\n/** The px value as the rem string the web components write. */\nexport const px = (value: number): string => `${value / ROOT_FONT_PX}rem`;\n\n/** MUI's `createPalette` defaults, exactly. */\nconst TONAL_OFFSET = 0.2;\nconst CONTRAST_THRESHOLD = 3;\nconst DARK_TEXT_PRIMARY = 'rgba(0, 0, 0, 0.87)';\nconst LIGHT_TEXT_PRIMARY = '#fff';\n\nexport const GREY: Record<UiGreyStep, string> = {\n  50: '#fafafa',\n  100: '#f5f5f5',\n  200: '#eeeeee',\n  300: '#e0e0e0',\n  400: '#bdbdbd',\n  500: '#9e9e9e',\n  600: '#757575',\n  700: '#616161',\n  800: '#424242',\n  900: '#212121',\n};\n\n/**\n * The platform's own seeds. The pair `@12-apps/ui`'s Storybook preview and\n * `@12-apps/app-shell`'s `DEFAULT_THEME_TOKENS` both carry — keep the three in\n * step if the design tokens change.\n */\nexport const DEFAULT_BRAND: Record<UiThemeMode, { primary: string; secondary: string }> = {\n  light: { primary: '#6366F1', secondary: '#8B5CF6' },\n  dark: { primary: '#818CF8', secondary: '#A78BFA' },\n};\n\n/** MUI's semantic defaults per mode. These are declared shades, not derived. */\nconst SEMANTIC_DEFAULTS: Record<\n  UiThemeMode,\n  Record<'success' | 'warning' | 'info' | 'danger', UiPaletteColor>\n> = {\n  light: {\n    success: { main: '#2e7d32', light: '#4caf50', dark: '#1b5e20', contrastText: '#fff' },\n    warning: { main: '#ed6c02', light: '#ff9800', dark: '#e65100', contrastText: '#fff' },\n    info: { main: '#0288d1', light: '#03a9f4', dark: '#01579b', contrastText: '#fff' },\n    danger: { main: '#d32f2f', light: '#ef5350', dark: '#c62828', contrastText: '#fff' },\n  },\n  dark: {\n    success: { main: '#66bb6a', light: '#81c784', dark: '#388e3c', contrastText: DARK_TEXT_PRIMARY },\n    warning: { main: '#ffa726', light: '#ffb74d', dark: '#f57c00', contrastText: DARK_TEXT_PRIMARY },\n    info: { main: '#29b6f6', light: '#4fc3f7', dark: '#0288d1', contrastText: DARK_TEXT_PRIMARY },\n    danger: { main: '#f44336', light: '#e57373', dark: '#d32f2f', contrastText: '#fff' },\n  },\n};\n\nconst MODE_DEFAULTS: Record<\n  UiThemeMode,\n  Pick<UiPalette, 'text' | 'background' | 'divider' | 'action'>\n> = {\n  light: {\n    text: { primary: DARK_TEXT_PRIMARY, secondary: 'rgba(0, 0, 0, 0.6)', disabled: 'rgba(0, 0, 0, 0.38)' },\n    background: { default: '#fff', paper: '#fff' },\n    divider: 'rgba(0, 0, 0, 0.12)',\n    action: {\n      active: 'rgba(0, 0, 0, 0.54)',\n      hover: 'rgba(0, 0, 0, 0.04)',\n      selected: 'rgba(0, 0, 0, 0.08)',\n      disabled: 'rgba(0, 0, 0, 0.26)',\n      disabledBackground: 'rgba(0, 0, 0, 0.12)',\n      focus: 'rgba(0, 0, 0, 0.12)',\n    },\n  },\n  dark: {\n    text: { primary: '#fff', secondary: 'rgba(255, 255, 255, 0.7)', disabled: 'rgba(255, 255, 255, 0.5)' },\n    background: { default: '#121212', paper: '#121212' },\n    divider: 'rgba(255, 255, 255, 0.12)',\n    action: {\n      active: '#fff',\n      hover: 'rgba(255, 255, 255, 0.08)',\n      selected: 'rgba(255, 255, 255, 0.16)',\n      disabled: 'rgba(255, 255, 255, 0.3)',\n      disabledBackground: 'rgba(255, 255, 255, 0.12)',\n      focus: 'rgba(255, 255, 255, 0.12)',\n    },\n  },\n};\n\n/**\n * MUI's `getContrastText`: white where white reads at 3:1 on the colour, the\n * light mode's dark ink otherwise. (MUI's source spells the white as the DARK\n * palette's `text.primary`, which is what made it easy to read backwards.)\n */\nexport function contrastText(background: string): string {\n  return getContrastRatio(background, LIGHT_TEXT_PRIMARY) >= CONTRAST_THRESHOLD\n    ? LIGHT_TEXT_PRIMARY\n    : DARK_TEXT_PRIMARY;\n}\n\n/**\n * The ink that reads on EVERY one of these fills (FUT-1924).\n *\n * {@link contrastText} answers for one fill, which is all MUI's `augmentColor`\n * ever needs: a solid button is a single flat colour. Two components paint the\n * label over something that is not one colour — `Button`'s `gradient` variant\n * runs between two stops, and `Switch`'s thumb travels the whole length of a\n * checked track — and both of them stated `#fff` outright instead, which is\n * white-on-pale the moment a white-labelled host hands the library a pale\n * brand. Audited across the library, those two were the only places a hardcoded\n * white sat over a surface the TENANT chooses.\n *\n * **This deliberately does not follow `contrastText`'s rule.** MUI's is a\n * threshold that PREFERS white — white wherever white clears 3:1 — which is a\n * brand-feel decision, and it is kept for every existing caller so nothing\n * already legible moves. Here the fills can disagree: over MUI's own success\n * pair white is 2.78:1 on `#4caf50` and dark ink 2.66:1 on `#1b5e20`, so\n * neither meets any threshold and asking whether one does is the wrong\n * question. The answer is whichever ink has the better WORST case across the\n * fills — which is also not what either fill says on its own, since\n * `contrastText('#4caf50')` is dark ink.\n *\n * A gradient wide enough that neither ink clears 4.5:1 anywhere is a palette\n * problem this cannot fix — it returns the less bad ink and does not pretend\n * otherwise.\n *\n * `Math.min` is the claim, and it is worth knowing that no test can prove it\n * against `Math.max` today: the two candidate inks sit at opposite ends of the\n * luminance range, so ranking them by their best fill and by their worst gives\n * the same winner for every possible pair (checked exhaustively). Worst case is\n * still what this MEANS, and the moment a third ink or one that is not an\n * extreme is offered, the two stop agreeing.\n *\n * `fallback` is returned when a fill cannot be decomposed: {@link getContrastRatio}\n * throws on a format it does not know, and a throw inside an emotion style\n * function takes the render down with it.\n */\nexport function inkOver(fills: readonly string[], fallback: string): string {\n  try {\n    const worstCase = (ink: string): number =>\n      Math.min(...fills.map((fill) => getContrastRatio(ink, fill)));\n\n    return worstCase(LIGHT_TEXT_PRIMARY) >= worstCase(DARK_TEXT_PRIMARY)\n      ? LIGHT_TEXT_PRIMARY\n      : DARK_TEXT_PRIMARY;\n  } catch {\n    return fallback;\n  }\n}\n\n/**\n * MUI's `augmentColor` for a custom colour: derive whatever shade the seed\n * left out. `light` is one tonal offset up, `dark` one and a half down.\n */\nexport function augmentColor(seed: UiPaletteSeed): UiPaletteColor {\n  const partial = typeof seed === 'string' ? { main: seed } : seed;\n  const main = partial.main ?? partial.light ?? partial.dark;\n  if (!main) {\n    throw new Error('@12-apps/ui: a palette seed needs at least a `main` colour.');\n  }\n  return {\n    main,\n    light: partial.light ?? lighten(main, TONAL_OFFSET),\n    dark: partial.dark ?? darken(main, TONAL_OFFSET * 1.5),\n    contrastText: partial.contrastText ?? contrastText(main),\n  };\n}\n\nconst semantic = (\n  mode: UiThemeMode,\n  key: 'success' | 'warning' | 'info' | 'danger',\n  seed: UiPaletteSeed | undefined,\n): UiPaletteColor => (seed === undefined ? SEMANTIC_DEFAULTS[mode][key] : augmentColor(seed));\n\n/** `neutral` as `accentFor` in `./scales` has always drawn it: three greys and white. */\nexport const NEUTRAL: UiPaletteColor = {\n  main: GREY[600],\n  light: GREY[400],\n  dark: GREY[800],\n  contrastText: '#fff',\n};\n\n/** The body scale `Text` renders, in px. `Text.tsx`'s rem map is this, divided by 16. */\nexport const TYPE_SIZES: Record<SizeValue, UiTypeStep> = {\n  xs: { fontSize: 12, lineHeight: 1.2 },\n  sm: { fontSize: 14, lineHeight: 1.3 },\n  md: { fontSize: 16, lineHeight: 1.5 },\n  lg: { fontSize: 18, lineHeight: 1.4 },\n  xl: { fontSize: 20, lineHeight: 1.3 },\n};\n\nexport const FONT_WEIGHTS: Record<UiFontWeight, number> = {\n  light: 300,\n  normal: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n};\n\n// `HEADING_SCALE` speaks CSS, this theme speaks numbers; `./css-units` is the\n// one place that conversion is written.\nconst HEADING_STEPS = Object.fromEntries(\n  Object.entries(HEADING_SCALE).map(([level, metrics]) => [\n    level,\n    {\n      fontSize: cssLengthToPx(metrics.fontSize, ROOT_FONT_PX),\n      lineHeight: metrics.lineHeight,\n      letterSpacing: cssTrackingToEm(metrics.letterSpacing),\n      normalWeight: metrics.normalWeight,\n    },\n  ]),\n) as Record<HeadingLevel, UiHeadingStep>;\n\nexport const WEB_FONT_FAMILY = '\"Roboto\", \"Helvetica\", \"Arial\", sans-serif';\nexport const WEB_MONOSPACE_FONT_FAMILY = 'Monaco, Menlo, \"Ubuntu Mono\", \"Courier New\", monospace';\n\n/**\n * Build the theme. Every field is derived here so a host that changes one\n * seed gets every dependent shade recomputed, on both renderers, identically.\n */\nexport function createUiTheme(options: UiThemeOptions = {}): UiTheme {\n  const mode = options.mode ?? 'light';\n  const seeds = options.palette ?? {};\n  const brand = DEFAULT_BRAND[mode];\n  const defaults = MODE_DEFAULTS[mode];\n  const spacingUnit = options.spacingUnit ?? 8;\n\n  const palette: UiPalette = {\n    mode,\n    primary: augmentColor(seeds.primary ?? brand.primary),\n    secondary: augmentColor(seeds.secondary ?? brand.secondary),\n    success: semantic(mode, 'success', seeds.success),\n    warning: semantic(mode, 'warning', seeds.warning),\n    info: semantic(mode, 'info', seeds.info),\n    danger: semantic(mode, 'danger', seeds.danger),\n    neutral: NEUTRAL,\n    text: defaults.text,\n    background: { ...defaults.background, ...seeds.background },\n    divider: defaults.divider,\n    action: defaults.action,\n    grey: GREY,\n  };\n\n  return {\n    mode,\n    palette,\n    spacing: (units: number) => units * spacingUnit,\n    spacingUnit,\n    radius: { sm: 2, md: 4, lg: 8, xl: 16, full: 9999 },\n    typography: {\n      fontFamily: options.typography?.fontFamily,\n      monospaceFontFamily: options.typography?.monospaceFontFamily,\n      sizes: TYPE_SIZES,\n      weights: FONT_WEIGHTS,\n      heading: HEADING_STEPS,\n    },\n    zIndex: { appBar: 1100, drawer: 1200, modal: 1300, snackbar: 1400, tooltip: 1500 },\n  };\n}\n\n/** The palette slot a house colour name resolves to. */\nexport type UiPaletteKey = 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'danger' | 'neutral';\n\nexport const DEFAULT_UI_THEME: UiTheme = createUiTheme();\n"],"mappings":"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","names":[]}

package/dist/{chunk-CT5K725B.js → chunk-QQLGSMGE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-HJOABXKN.js";
 import {
   Button
-} from "./chunk-SLVQ33AN.js";
+} from "./chunk-77DF5LKI.js";
 
 // src/components/feedback/ConfirmAction/ConfirmButton.tsx
 function createConfirmButton(copy, errorText) {
@@ -18,4 +18,4 @@ function createConfirmButton(copy, errorText) {
 export {
   createConfirmButton
 };
-//# sourceMappingURL=chunk-CT5K725B.js.map
+//# sourceMappingURL=chunk-QQLGSMGE.js.map

package/dist/{chunk-7MN6I5NK.js → chunk-QXFPTRHB.js}

@@ -4,10 +4,10 @@ import {
 } from "./chunk-5WNQJ5KS.js";
 import {
   PillControl
-} from "./chunk-FPFUXRD2.js";
+} from "./chunk-CKJI7JO5.js";
 import {
   MoreFilters
-} from "./chunk-PFDM2OIP.js";
+} from "./chunk-45OHGD2B.js";
 import {
   RangePill
 } from "./chunk-DFLTUI7W.js";
@@ -220,4 +220,4 @@ function FilterSlots({
 export {
   InlineFilterControls
 };
-//# sourceMappingURL=chunk-7MN6I5NK.js.map
+//# sourceMappingURL=chunk-QXFPTRHB.js.map

package/dist/{chunk-CZPU5TW3.js → chunk-RFZU5BTG.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-6VP2L3DJ.js";
 import {
   DENSITY_ROW_PADDING
-} from "./chunk-ZPIMPOHV.js";
+} from "./chunk-M7E66OSC.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -129,4 +129,4 @@ export {
   cellRailCount,
   ListCardGroup
 };
-//# sourceMappingURL=chunk-CZPU5TW3.js.map
+//# sourceMappingURL=chunk-RFZU5BTG.js.map

package/dist/{chunk-JB67KPGM.js → chunk-RRO2EOJB.js}

@@ -1,9 +1,9 @@
-import {
-  tileBackground
-} from "./chunk-DRADVLHZ.js";
 import {
   TILE_SIZE
 } from "./chunk-TUBCN4DJ.js";
+import {
+  tileBackground
+} from "./chunk-DRADVLHZ.js";
 
 // src/components/data-display/MapPreview/MapTiles.tsx
 import { alpha, useTheme } from "@mui/material/styles/index.js";
@@ -61,4 +61,4 @@ var MapTiles = ({ origin, zoom, mapType, panOffset }) => {
 export {
   MapTiles
 };
-//# sourceMappingURL=chunk-JB67KPGM.js.map
+//# sourceMappingURL=chunk-RRO2EOJB.js.map

package/dist/{chunk-MZQTHSLN.js → chunk-S7HRED4D.js}

@@ -1,6 +1,6 @@
 import {
   Chart
-} from "./chunk-OH3YGJT5.js";
+} from "./chunk-EMNGIYH6.js";
 import {
   CHART_SEMANTIC_COLORS,
   specToChartProps
@@ -46,4 +46,4 @@ var SpecChart = ({
 export {
   SpecChart
 };
-//# sourceMappingURL=chunk-MZQTHSLN.js.map
+//# sourceMappingURL=chunk-S7HRED4D.js.map

package/dist/{chunk-NYEA7JAI.js → chunk-SC72DRTX.js}

@@ -1,22 +1,22 @@
 import {
   DataViewsBoard
-} from "./chunk-E55CJV65.js";
+} from "./chunk-2KVQIGVE.js";
 import {
   SelectAllStrip
-} from "./chunk-OGGPQVIG.js";
+} from "./chunk-MDTSMJ7C.js";
 import {
   ListCardGroup
-} from "./chunk-CZPU5TW3.js";
+} from "./chunk-RFZU5BTG.js";
 import {
   DENSITY_BOARD_SCALE,
   DENSITY_ROW_PADDING,
   cardScaleForZoom,
   cardTargetWidthFor,
   useDataViewsLayout
-} from "./chunk-ZPIMPOHV.js";
+} from "./chunk-M7E66OSC.js";
 import {
   cardGridTracks
-} from "./chunk-2PBGVMM2.js";
+} from "./chunk-KOFO6QZY.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -264,4 +264,4 @@ function GridMain(props) {
 export {
   GridMain
 };
-//# sourceMappingURL=chunk-NYEA7JAI.js.map
+//# sourceMappingURL=chunk-SC72DRTX.js.map

package/dist/{chunk-JWW2Z3RH.js → chunk-SMZBGHR2.js}

@@ -4,20 +4,20 @@ import {
   isActionable,
   isSelectable,
   slotTestIds
-} from "./chunk-OQFSYMHJ.js";
+} from "./chunk-67ALTEWH.js";
 import {
   DragHandle,
   useDragItem
 } from "./chunk-JCJGJX7V.js";
-import {
-  CARD_ASPECT_RATIOS
-} from "./chunk-LHHAYZ55.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
+import {
+  CARD_ASPECT_RATIOS
+} from "./chunk-LHHAYZ55.js";
 import {
   Checkbox
-} from "./chunk-R7R3LOKW.js";
+} from "./chunk-CA7TA36R.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk-AIRWM7KK.js";
 import {
   Text
-} from "./chunk-343TTIHD.js";
+} from "./chunk-PENJBKPH.js";
 
 // src/components/data-display/DataViews/base-card.tsx
 import { useTheme } from "@mui/material/styles/index.js";
@@ -263,4 +263,4 @@ function BaseCard(props) {
 export {
   BaseCard
 };
-//# sourceMappingURL=chunk-JWW2Z3RH.js.map
+//# sourceMappingURL=chunk-SMZBGHR2.js.map

package/dist/{chunk-EZSEAYYT.js → chunk-SSWZHR46.js}

@@ -1,13 +1,13 @@
 import {
   badgeVariantStyles
-} from "./chunk-ZTF5C2GA.js";
+} from "./chunk-B5SW7I5W.js";
 import {
   bounceAnimation,
   fadeInScaleAnimation,
   glowPulseAnimation,
   pulseAnimation,
   shimmerAnimation
-} from "./chunk-HI2OFZSZ.js";
+} from "./chunk-YPILHGEO.js";
 import {
   BADGE_BORDER_WIDTH,
   BADGE_CONTENT_GAP,
@@ -23,10 +23,10 @@ import {
   PULSE,
   SHIMMER,
   badgeAnchor
-} from "./chunk-KVEHH4SA.js";
+} from "./chunk-DB2MAYPK.js";
 import {
   px
-} from "./chunk-NQN5Z36J.js";
+} from "./chunk-QLI7ES7Z.js";
 
 // src/components/data-display/Badge/Badge.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
@@ -197,4 +197,4 @@ export {
   getAnchorOrigin,
   badgeStyles
 };
-//# sourceMappingURL=chunk-EZSEAYYT.js.map
+//# sourceMappingURL=chunk-SSWZHR46.js.map

package/dist/{chunk-NA7MIEG6.js → chunk-SZETT7QV.js}

@@ -25,7 +25,7 @@ import {
 } from "./chunk-FAITHWIO.js";
 import {
   px
-} from "./chunk-NQN5Z36J.js";
+} from "./chunk-QLI7ES7Z.js";
 
 // src/components/data-display/Avatar/Avatar.view.tsx
 import MuiAvatar from "@mui/material/Avatar/index.js";
@@ -272,4 +272,4 @@ function AvatarView(props) {
 export {
   AvatarView
 };
-//# sourceMappingURL=chunk-NA7MIEG6.js.map
+//# sourceMappingURL=chunk-SZETT7QV.js.map

package/dist/chunk-SZS7VZJN.js

@@ -0,0 +1,25 @@
+// src/components/form/Switch/Switch.ids.ts
+function switchIds({
+  generated,
+  id,
+  inputProps,
+  description,
+  helperText,
+  callerDescribedBy
+}) {
+  const inputId = inputProps?.id ?? id ?? `switch-${generated}`;
+  const descriptionId = description ? `${inputId}-description` : void 0;
+  const helperId = helperText ? `${inputId}-helper` : void 0;
+  const described = [callerDescribedBy, inputProps?.["aria-describedby"], descriptionId, helperId];
+  return {
+    inputId,
+    descriptionId,
+    helperId,
+    describedBy: described.filter(Boolean).join(" ") || void 0
+  };
+}
+
+export {
+  switchIds
+};
+//# sourceMappingURL=chunk-SZS7VZJN.js.map

package/dist/chunk-SZS7VZJN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Switch/Switch.ids.ts"],"sourcesContent":["import type { InputHTMLAttributes, ReactNode } from 'react';\n\n/** The ids the DOM `Switch` wires its label and its two descriptions with. */\nexport interface SwitchIds {\n  /** The input's id. Always set — the label has to have something to point at. */\n  inputId: string;\n  descriptionId?: string;\n  helperId?: string;\n  /** Everything that DESCRIBES the control, the caller's own included. */\n  describedBy?: string;\n}\n\nexport interface SwitchIdSource {\n  /** `useId()`'s value, passed in so this stays a pure function. */\n  generated: string;\n  id?: string;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  description?: ReactNode;\n  helperText?: ReactNode;\n  callerDescribedBy?: unknown;\n}\n\n/**\n * Derive every id one `Switch` needs, in one place (FUT-1905).\n *\n * The precedence is the point: an id the caller spelled — as `inputProps.id` or\n * as `id` — wins, because a consumer that chose one is usually pointing its own\n * `<label>` or a test at it. Only when there is none does the generated one\n * apply, and it comes from `useId` rather than from the test id: two call sites\n * sharing a `dataTestId` would otherwise share a `for`, and the second label\n * would toggle the first control.\n *\n * `describedBy` APPENDS rather than replaces. The description and the helper\n * line are the component's own, but a consumer that passed `aria-describedby`\n * meant it, and dropping it to make room would trade one silent omission for\n * another.\n *\n * It has TWO spellings and both count — top-level and inside `inputProps` —\n * because that is a consumer's choice of spelling, not a choice of meaning.\n * Reading only the first is how this shipped for one round: a caller writing\n * `inputProps={{ 'aria-describedby': … }}` had it silently dropped, which is the\n * omission the paragraph above says it must not trade for.\n */\nexport function switchIds({\n  generated,\n  id,\n  inputProps,\n  description,\n  helperText,\n  callerDescribedBy,\n}: SwitchIdSource): SwitchIds {\n  const inputId = inputProps?.id ?? id ?? `switch-${generated}`;\n  const descriptionId = description ? `${inputId}-description` : undefined;\n  const helperId = helperText ? `${inputId}-helper` : undefined;\n  const described = [callerDescribedBy, inputProps?.['aria-describedby'], descriptionId, helperId];\n\n  return {\n    inputId,\n    descriptionId,\n    helperId,\n    describedBy: described.filter(Boolean).join(' ') || undefined,\n  };\n}\n"],"mappings":";AA2CO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,UAAU,YAAY,MAAM,MAAM,UAAU,SAAS;AAC3D,QAAM,gBAAgB,cAAc,GAAG,OAAO,iBAAiB;AAC/D,QAAM,WAAW,aAAa,GAAG,OAAO,YAAY;AACpD,QAAM,YAAY,CAAC,mBAAmB,aAAa,kBAAkB,GAAG,eAAe,QAAQ;AAE/F,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,UAAU,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,EACtD;AACF;","names":[]}

package/dist/{chunk-2HPP6RVC.js → chunk-TQOPF7LD.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-WEBEOBN5.js";
 import {
   Text
-} from "./chunk-343TTIHD.js";
+} from "./chunk-PENJBKPH.js";
 
 // src/components/data-display/DataViews/save-view-preview.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -51,4 +51,4 @@ function PreviewBox({ preview, testIdPrefix }) {
 export {
   PreviewBox
 };
-//# sourceMappingURL=chunk-2HPP6RVC.js.map
+//# sourceMappingURL=chunk-TQOPF7LD.js.map

package/dist/{chunk-OLVZ6TOV.js → chunk-TUO47RL2.js}

@@ -1,13 +1,13 @@
 import {
   getSizeStyles
-} from "./chunk-EZSEAYYT.js";
+} from "./chunk-SSWZHR46.js";
 import {
   BADGE_CONTENT_GAP,
   BADGE_SIZES
-} from "./chunk-KVEHH4SA.js";
+} from "./chunk-DB2MAYPK.js";
 import {
   px
-} from "./chunk-NQN5Z36J.js";
+} from "./chunk-QLI7ES7Z.js";
 
 // src/components/data-display/Badge/BadgeContent.tsx
 import CloseIcon from "@mui/icons-material/Close";
@@ -85,4 +85,4 @@ var buildBadgeContent = ({
 export {
   buildBadgeContent
 };
-//# sourceMappingURL=chunk-OLVZ6TOV.js.map
+//# sourceMappingURL=chunk-TUO47RL2.js.map

package/dist/{chunk-N5IVVLTH.js → chunk-UG76BO5K.js}

@@ -1,18 +1,20 @@
 import {
+  onTrackInk,
   switchSx
-} from "./chunk-2ECT4IY2.js";
+} from "./chunk-DIHVWBQV.js";
 import {
   LABEL_GAP_UNITS,
-  SWITCH_ICON_SIZES
-} from "./chunk-MLCFODJO.js";
+  SWITCH_ICON_SIZES,
+  TAP_TARGET_MIN
+} from "./chunk-3W2IS5RH.js";
 
 // src/components/form/Switch/Switch.parts.tsx
 import Box from "@mui/material/Box/index.js";
 import FormHelperText from "@mui/material/FormHelperText/index.js";
 import MuiSwitch from "@mui/material/Switch/index.js";
 import Typography from "@mui/material/Typography/index.js";
-import { styled } from "@mui/material/styles/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { styled, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var StyledSwitch = styled(MuiSwitch, {
   shouldForwardProp: (prop) => ![
     "customVariant",
@@ -44,7 +46,14 @@ var StyledLabelContainer = styled(Box, {
   };
 });
 var LabelContainer = ({ labelPosition, error, children }) => /* @__PURE__ */ jsx(StyledLabelContainer, { labelPosition, error, children });
-var SwitchIcon = ({ icon, shown, animated, size, side }) => {
+var SwitchIcon = ({
+  icon,
+  shown,
+  animated,
+  size,
+  side,
+  onInk
+}) => {
   const isOn = side === "on";
   const translate = isOn ? "translate(-50%, -50%)" : "translate(50%, -50%)";
   return /* @__PURE__ */ jsx(
@@ -59,7 +68,7 @@ var SwitchIcon = ({ icon, shown, animated, size, side }) => {
         transform: `${translate} scale(${shown && animated ? 1 : 0.8})`,
         pointerEvents: "none",
         zIndex: 2,
-        color: isOn ? "#fff" : "text.secondary",
+        color: isOn ? onInk : "text.secondary",
         fontSize: SWITCH_ICON_SIZES[size] ?? SWITCH_ICON_SIZES.md
       },
       children: icon
@@ -75,10 +84,15 @@ var SwitchControl = ({
   size,
   dataTestId,
   switchRef,
+  inputId,
+  inputProps,
+  describedBy,
   rest,
   ...flags
 }) => {
   const props = rest;
+  const theme = useTheme();
+  const onInk = onTrackInk(theme, flags);
   return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", display: "inline-flex" }, children: [
     /* @__PURE__ */ jsx(
       StyledSwitch,
@@ -88,13 +102,14 @@ var SwitchControl = ({
         checked,
         onChange,
         disabled: Boolean(flags.loading) || props.disabled,
+        ...props,
         inputProps: {
           "aria-label": props["aria-label"],
-          "aria-describedby": props["aria-describedby"],
-          ...props.inputProps,
-          "data-testid": dataTestId || "switch"
-        },
-        ...props
+          "data-testid": dataTestId || "switch",
+          ...inputProps,
+          id: inputId,
+          "aria-describedby": describedBy
+        }
       }
     ),
     onIcon && /* @__PURE__ */ jsx(
@@ -104,7 +119,8 @@ var SwitchControl = ({
         shown: Boolean(checked),
         animated,
         size,
-        side: "on"
+        side: "on",
+        onInk
       }
     ),
     offIcon && /* @__PURE__ */ jsx(
@@ -114,27 +130,42 @@ var SwitchControl = ({
         shown: !checked,
         animated,
         size,
-        side: "off"
+        side: "off",
+        onInk
       }
     )
   ] });
 };
-var SwitchHelper = ({ helperText, error, dataTestId }) => helperText ? /* @__PURE__ */ jsx(
+var SwitchHelper = ({ helperText, error, dataTestId, id }) => helperText ? /* @__PURE__ */ jsx(
   FormHelperText,
   {
+    id,
     error,
     sx: { mt: 1 },
     "data-testid": dataTestId ? `${dataTestId}-helper` : "switch-helper",
     children: helperText
   }
 ) : null;
-var SwitchLabel = ({ label, description, error, dataTestId }) => /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+var SwitchLabel = ({ label, description, error, dataTestId, htmlFor, descriptionId, disabled }) => /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
   /* @__PURE__ */ jsx(
     Typography,
     {
+      component: "label",
+      htmlFor,
       variant: "body2",
       fontWeight: 500,
       color: error ? "error.main" : "text.primary",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        // The floor applies to the row the label shares with the control. A
+        // description already makes the row taller than 40px, so forcing it
+        // there would only add blank space.
+        ...description ? {} : { minHeight: TAP_TARGET_MIN },
+        // A disabled control's label toggles nothing, so it must not wear the
+        // cursor that says it does.
+        ...htmlFor && !disabled ? { cursor: "pointer" } : {}
+      },
       "data-testid": dataTestId ? `${dataTestId}-label` : "switch-label",
       children: label
     }
@@ -142,6 +173,7 @@ var SwitchLabel = ({ label, description, error, dataTestId }) => /* @__PURE__ */
   description && /* @__PURE__ */ jsx(
     Typography,
     {
+      id: descriptionId,
       variant: "caption",
       color: error ? "error.main" : "text.secondary",
       sx: { display: "block", mt: 0.5 },
@@ -149,12 +181,40 @@ var SwitchLabel = ({ label, description, error, dataTestId }) => /* @__PURE__ */
     }
   )
 ] });
+var SwitchRow = ({
+  label,
+  description,
+  labelPosition,
+  error,
+  dataTestId,
+  htmlFor,
+  descriptionId,
+  disabled,
+  control
+}) => {
+  if (!label) return /* @__PURE__ */ jsx(Fragment, { children: control });
+  return /* @__PURE__ */ jsxs(LabelContainer, { labelPosition, error, children: [
+    labelPosition === "start" && control,
+    /* @__PURE__ */ jsx(
+      SwitchLabel,
+      {
+        label,
+        description,
+        error,
+        dataTestId,
+        htmlFor,
+        descriptionId,
+        disabled
+      }
+    ),
+    labelPosition !== "start" && control
+  ] });
+};
 
 export {
-  LabelContainer,
   SwitchIcon,
   SwitchControl,
   SwitchHelper,
-  SwitchLabel
+  SwitchRow
 };
-//# sourceMappingURL=chunk-N5IVVLTH.js.map
+//# sourceMappingURL=chunk-UG76BO5K.js.map

package/dist/chunk-UG76BO5K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Switch/Switch.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport MuiSwitch from '@mui/material/Switch/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { LABEL_GAP_UNITS, SWITCH_ICON_SIZES, TAP_TARGET_MIN } from './Switch.metrics';\nimport { onTrackInk, switchSx } from './Switch.styles';\nimport type { SwitchFlags } from './Switch.styles';\nimport type { SwitchProps } from './Switch.types';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\nconst StyledSwitch = styled(MuiSwitch, {\n  shouldForwardProp: (prop) =>\n    ![\n      'customVariant',\n      'customColor',\n      'customSize',\n      'glow',\n      'glass',\n      'gradient',\n      'trackWidth',\n      'trackHeight',\n      'onText',\n      'offText',\n      'loading',\n      'ripple',\n      'pulse',\n    ].includes(prop as string),\n})<SwitchFlags>(({ theme, ...flags }) => ({ ...switchSx(theme, flags) }));\n\n/**\n * A top or bottom label stacks and aligns to the start; start/end sit the label\n * beside the control and centre it.\n */\nconst StyledLabelContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['labelPosition', 'error'].includes(prop as string),\n})<{ labelPosition?: string; error?: boolean }>(({ theme, labelPosition, error }) => {\n  const stacked = labelPosition === 'top' || labelPosition === 'bottom';\n\n  return {\n    display: 'flex',\n    alignItems: stacked ? 'flex-start' : 'center',\n    flexDirection:\n      labelPosition === 'top' ? 'column' : labelPosition === 'bottom' ? 'column-reverse' : 'row',\n    gap: theme.spacing(stacked ? LABEL_GAP_UNITS.stacked : LABEL_GAP_UNITS.beside),\n    width: '100%',\n    ...(error && { '& .MuiTypography-root': { color: theme.palette.error.main } }),\n  };\n});\n\n/**\n * A plain wrapper over the styled row. Exporting the styled component itself\n * needs a @mui/system reference tsc calls unportable (TS2742).\n */\nconst LabelContainer: React.FC<{\n  labelPosition?: string;\n  error?: boolean;\n  children: React.ReactNode;\n}> = ({ labelPosition, error, children }) => (\n  <StyledLabelContainer labelPosition={labelPosition} error={error}>\n    {children}\n  </StyledLabelContainer>\n);\n\nexport interface SwitchIconProps {\n  icon: React.ReactNode;\n  /** True when this icon is the one the current state should show. */\n  shown: boolean;\n  animated: boolean;\n  size: string;\n  side: 'on' | 'off';\n  /** The ink for the ON icon, which sits on the brand-filled track (FUT-1924). */\n  onInk: string;\n}\n\n/**\n * One of the two icons overlaid on the track. The on icon slides to the left\n * edge when checked and the off icon to the right when unchecked; they are\n * mirror images, so they share this component rather than being written twice.\n */\nexport const SwitchIcon: React.FC<SwitchIconProps> = ({\n  icon,\n  shown,\n  animated,\n  size,\n  side,\n  onInk,\n}) => {\n  const isOn = side === 'on';\n  const translate = isOn ? 'translate(-50%, -50%)' : 'translate(50%, -50%)';\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        top: '50%',\n        ...(isOn ? { left: shown ? 4 : '50%' } : { right: shown ? 4 : '50%' }),\n        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n        opacity: shown ? 1 : 0,\n        transform: `${translate} scale(${shown && animated ? 1 : 0.8})`,\n        pointerEvents: 'none',\n        zIndex: 2,\n        color: isOn ? onInk : 'text.secondary',\n        fontSize: SWITCH_ICON_SIZES[size as SizeValue] ?? SWITCH_ICON_SIZES.md,\n      }}\n    >\n      {icon}\n    </Box>\n  );\n};\n\nexport interface SwitchControlProps extends SwitchFlags {\n  checked?: boolean;\n  onChange?: SwitchProps['onChange'];\n  onIcon?: React.ReactNode;\n  offIcon?: React.ReactNode;\n  animated: boolean;\n  size: string;\n  dataTestId?: string;\n  switchRef?: React.Ref<HTMLButtonElement>;\n  /** The id the label points at — always set, so the input always has one. */\n  inputId: string;\n  /** The caller's own `inputProps`, merged rather than spread over (FUT-1905). */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /** The description's id, appended to whatever the caller described it by. */\n  describedBy?: string;\n  rest: Record<string, unknown>;\n}\n\n/** The control itself: the track, and the two icons that may sit over it. */\nexport const SwitchControl: React.FC<SwitchControlProps> = ({\n  checked,\n  onChange,\n  onIcon,\n  offIcon,\n  animated,\n  size,\n  dataTestId,\n  switchRef,\n  inputId,\n  inputProps,\n  describedBy,\n  rest,\n  ...flags\n}) => {\n  const props = rest as Record<string, unknown> & { disabled?: boolean };\n  const theme = useTheme();\n  const onInk = onTrackInk(theme, flags);\n\n  return (\n    <Box sx={{ position: 'relative', display: 'inline-flex' }}>\n      <StyledSwitch\n        ref={switchRef}\n        {...flags}\n        checked={checked}\n        onChange={onChange}\n        disabled={Boolean(flags.loading) || props.disabled}\n        {...props}\n        /*\n          AFTER `props`, not before it (FUT-1905). `inputProps` used to be\n          written first and `{...props}` spread over it, so a caller passing\n          `inputProps` of its own silently replaced the whole object — losing\n          the `data-testid` every spec finds this control by, and the `id` the\n          label points at.\n\n          The order inside is the contract. Everything the component DEFAULTS\n          goes first, so a caller's own key still wins — that is what it could\n          do before, and a fix for a clobber must not become a clobber the\n          other way. Only the two the component OWNS come last: the `id`, which\n          already resolved the caller's spelling of it (`switchIds`), and\n          `aria-describedby`, which by then already CONTAINS whatever the\n          caller passed, in either spelling.\n        */\n        inputProps={\n          {\n            'aria-label': props['aria-label'],\n            'data-testid': dataTestId || 'switch',\n            ...inputProps,\n            id: inputId,\n            'aria-describedby': describedBy,\n          } as React.InputHTMLAttributes<HTMLInputElement>\n        }\n      />\n\n      {onIcon && (\n        <SwitchIcon\n          icon={onIcon}\n          shown={Boolean(checked)}\n          animated={animated}\n          size={size}\n          side=\"on\"\n          onInk={onInk}\n        />\n      )}\n      {offIcon && (\n        <SwitchIcon\n          icon={offIcon}\n          shown={!checked}\n          animated={animated}\n          size={size}\n          side=\"off\"\n          onInk={onInk}\n        />\n      )}\n    </Box>\n  );\n};\n\n/**\n * The helper line, which is where a validation message lands — so it is\n * `aria-describedby`'d like the description (FUT-1905).\n *\n * It carried no `id` and nothing pointed at it, which means an `error` state\n * announced as \"checkbox, checked\" and nothing else: the one sentence saying\n * WHY was on screen and outside the accessibility tree.\n */\nexport const SwitchHelper: React.FC<{\n  helperText?: React.ReactNode;\n  error?: boolean;\n  dataTestId?: string;\n  id?: string;\n}> = ({ helperText, error, dataTestId, id }) =>\n  helperText ? (\n    <FormHelperText\n      id={id}\n      error={error}\n      sx={{ mt: 1 }}\n      data-testid={dataTestId ? `${dataTestId}-helper` : 'switch-helper'}\n    >\n      {helperText}\n    </FormHelperText>\n  ) : null;\n\n/**\n * The label, WIRED to the input it names (FUT-1905).\n *\n * It used to be a `<p>` rendered as the control's sibling, with no `for`, no\n * `id` on the input and no `aria-labelledby` — so a labelled `Switch` announced\n * as \"checkbox, checked\" with no name, and clicking the words did nothing. Every\n * `Switch` in a consumer app was affected, not one call site, and the workaround\n * each had to write was a hand-typed `aria-label` duplicating the text already\n * on screen.\n *\n * A real `<label for>` fixes the name and the pointer in the same stroke, and it\n * is also the answer to the TAP TARGET: no size in `SWITCH_SIZES` clears the\n * 40px floor (`xl` is 34px tall), so the control cannot be made big enough by\n * passing a bigger `size` — instead the label becomes the target, which is how\n * this is normally solved. Hence `display: flex` and `TAP_TARGET_MIN`: the\n * label fills its half of the row and is never shorter than the floor.\n *\n * The DESCRIPTION stays outside the label and is pointed at by\n * `aria-describedby` instead: inside it, a two-line explanation would be read\n * out as part of the control's name.\n */\nconst SwitchLabel: React.FC<{\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  error?: boolean;\n  dataTestId?: string;\n  /** The input's id. Omitted only where there is no input to point at. */\n  htmlFor?: string;\n  descriptionId?: string;\n  disabled?: boolean;\n}> = ({ label, description, error, dataTestId, htmlFor, descriptionId, disabled }) => (\n  <Box sx={{ flex: 1, minWidth: 0 }}>\n    <Typography\n      component=\"label\"\n      htmlFor={htmlFor}\n      variant=\"body2\"\n      fontWeight={500}\n      color={error ? 'error.main' : 'text.primary'}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        // The floor applies to the row the label shares with the control. A\n        // description already makes the row taller than 40px, so forcing it\n        // there would only add blank space.\n        ...(description ? {} : { minHeight: TAP_TARGET_MIN }),\n        // A disabled control's label toggles nothing, so it must not wear the\n        // cursor that says it does.\n        ...(htmlFor && !disabled ? { cursor: 'pointer' } : {}),\n      }}\n      data-testid={dataTestId ? `${dataTestId}-label` : 'switch-label'}\n    >\n      {label}\n    </Typography>\n    {description && (\n      <Typography\n        id={descriptionId}\n        variant=\"caption\"\n        color={error ? 'error.main' : 'text.secondary'}\n        sx={{ display: 'block', mt: 0.5 }}\n      >\n        {description}\n      </Typography>\n    )}\n  </Box>\n);\n\n/**\n * The control and its label in one row, or the control alone.\n *\n * Lives here rather than inline in `Switch.tsx` because the two branches only\n * differ in what surrounds the control — and the component that assembles them\n * was long enough that the wiring got hard to see between them.\n */\nexport const SwitchRow: React.FC<{\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  labelPosition?: string;\n  error?: boolean;\n  dataTestId?: string;\n  htmlFor: string;\n  descriptionId?: string;\n  disabled?: boolean;\n  control: React.ReactNode;\n}> = ({\n  label,\n  description,\n  labelPosition,\n  error,\n  dataTestId,\n  htmlFor,\n  descriptionId,\n  disabled,\n  control,\n}) => {\n  if (!label) return <>{control}</>;\n\n  return (\n    <LabelContainer labelPosition={labelPosition} error={error}>\n      {labelPosition === 'start' && control}\n\n      <SwitchLabel\n        label={label}\n        description={description}\n        error={error}\n        dataTestId={dataTestId}\n        htmlFor={htmlFor}\n        descriptionId={descriptionId}\n        disabled={disabled}\n      />\n\n      {labelPosition !== 'start' && control}\n    </LabelContainer>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-4IVDVZZ2.js → chunk-UGL6SJN6.js}

@@ -4,10 +4,10 @@ import {
   bannerPointerStates,
   fadeInSlide,
   getVariantColor
-} from "./chunk-M4LFDGI6.js";
+} from "./chunk-GYQT47YZ.js";
 import {
   FOCUS
-} from "./chunk-TXKZEKJN.js";
+} from "./chunk-XNOSTV5F.js";
 
 // src/components/data-display/Banner/Banner.tsx
 import CheckCircle from "@mui/icons-material/CheckCircle";
@@ -260,4 +260,4 @@ Banner.displayName = "Banner";
 export {
   Banner
 };
-//# sourceMappingURL=chunk-4IVDVZZ2.js.map
+//# sourceMappingURL=chunk-UGL6SJN6.js.map

package/dist/{chunk-QJRDDVZ2.js → chunk-V5P5Q6HM.js}

@@ -7,14 +7,14 @@ import {
 } from "./chunk-SHDIZSN5.js";
 import {
   StaticMapView
-} from "./chunk-QYNCPS5W.js";
+} from "./chunk-WBKWIFXA.js";
 import {
   glassStyles,
   resolveMapPreviewProps
 } from "./chunk-ACZH2NUW.js";
 import {
   useMapPreview
-} from "./chunk-PQECNGDE.js";
+} from "./chunk-AGYGNNOM.js";
 
 // src/components/data-display/MapPreview/MapPreview.tsx
 import Box from "@mui/material/Box/index.js";
@@ -105,4 +105,4 @@ export {
   MapPreview,
   MapPreview_default
 };
-//# sourceMappingURL=chunk-QJRDDVZ2.js.map
+//# sourceMappingURL=chunk-V5P5Q6HM.js.map

package/dist/{chunk-73NJCGQG.js → chunk-VIK3HAUQ.js}

@@ -1,6 +1,6 @@
 import {
   usePhoneInput
-} from "./chunk-TXHJX2NG.js";
+} from "./chunk-BGYLL467.js";
 import {
   countries
 } from "./chunk-3JDP5OUR.js";
@@ -334,4 +334,4 @@ export {
   PhoneInput,
   PhoneInput_default
 };
-//# sourceMappingURL=chunk-73NJCGQG.js.map
+//# sourceMappingURL=chunk-VIK3HAUQ.js.map

package/dist/{chunk-KM5O4ICK.js → chunk-VK4ULJFH.js}

@@ -1,6 +1,6 @@
 import {
   useCardActions
-} from "./chunk-SYJMI2NP.js";
+} from "./chunk-Q3OFOOO7.js";
 import {
   ConfirmActionDialog
 } from "./chunk-QQS3GQYS.js";
@@ -50,4 +50,4 @@ function useRemoveConfirm({
 export {
   useRemoveConfirm
 };
-//# sourceMappingURL=chunk-KM5O4ICK.js.map
+//# sourceMappingURL=chunk-VK4ULJFH.js.map