@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-PKFH6C7W.js

@@ -0,0 +1,136 @@
+import {
+  DataViewsDisplayPanel
+} from "./chunk-EHCUOX6R.js";
+import {
+  DataViewsExportMenu
+} from "./chunk-HRHPRIGT.js";
+import {
+  renderBulkActions
+} from "./chunk-TNDV33LP.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  FilterTrigger
+} from "./chunk-JLWAYBOP.js";
+import {
+  ContentToolbar
+} from "./chunk-SZB2Z6QN.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-H57ZS6W2.js";
+
+// src/components/data-display/DataViews/data-views-toolbar.tsx
+import Divider from "@mui/material/Divider/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ToolbarRightControls(props) {
+  const { testIdPrefix, matchedCount, totalCount, filterOpen, setFilterOpen } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !props.counterHidden && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsxs(
+        default2,
+        {
+          component: "span",
+          "data-testid": `${testIdPrefix}-counter`,
+          sx: { whiteSpace: "nowrap" },
+          children: [
+            matchedCount,
+            " de ",
+            totalCount
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Divider,
+        {
+          orientation: "vertical",
+          flexItem: true,
+          sx: { height: 20, alignSelf: "center", mx: 0.5 }
+        }
+      )
+    ] }),
+    props.toolbarRightSlot,
+    /* @__PURE__ */ jsx(
+      DataViewsDisplayPanel,
+      {
+        c: props.c,
+        testIdPrefix,
+        sortKinds: props.sortKinds,
+        view: props.displayView,
+        compact: props.compactControls
+      }
+    ),
+    props.exportConfig && /* @__PURE__ */ jsx(
+      DataViewsExportMenu,
+      {
+        config: props.exportConfig,
+        query: props.c.currentQuery,
+        totalCount: props.totalCount,
+        selectedIds: [...props.c.selectedIds],
+        columns: props.columnOptions.filter((col) => col.visible).map((col) => ({ id: col.id, label: col.label })),
+        testIdPrefix,
+        compact: props.compactControls
+      }
+    ),
+    props.showFilterTrigger !== false && /* @__PURE__ */ jsx(
+      FilterTrigger,
+      {
+        open: filterOpen,
+        onOpenChange: setFilterOpen,
+        activeCount: props.activeFilterCount,
+        "data-testid": `${testIdPrefix}-filters-toggle`
+      }
+    )
+  ] });
+}
+function GridToolbar(props) {
+  const copy = useDataViewsCopy();
+  const { testIdPrefix, selectedRows } = props;
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      ref: props.barRef,
+      sx: {
+        borderTop: 1,
+        borderBottom: 1,
+        borderColor: "divider",
+        py: 1.25,
+        mx: { xs: -2, md: -3 },
+        px: { xs: 2, md: 3 }
+      },
+      children: /* @__PURE__ */ jsx(
+        ContentToolbar,
+        {
+          selectAllLabel: copy.selection.selectAll,
+          selectAllText: copy.selection.selectAllOnPage,
+          clearAllText: copy.filters.clearAll,
+          hasSelection: selectedRows.length > 0,
+          selectedCount: selectedRows.length,
+          selectAll: props.selectAll,
+          clearSelection: props.clearSelection,
+          selectAllTestId: `${testIdPrefix}-select-all`,
+          clearAllTestId: `${testIdPrefix}-clear-all`,
+          selectionExtra: props.selectionExtra,
+          actions: renderBulkActions({
+            rowActions: props.rowActions,
+            bulkActions: props.bulkActions,
+            selectedRows,
+            clearSelection: props.clearSelection,
+            testIdPrefix
+          }),
+          leadingControls: props.filterControls,
+          exclusiveSelection: true,
+          rightControls: /* @__PURE__ */ jsx(ToolbarRightControls, { ...props })
+        }
+      )
+    }
+  );
+}
+
+export {
+  GridToolbar
+};
+//# sourceMappingURL=chunk-PKFH6C7W.js.map

package/dist/chunk-PYC4CWCQ.js

@@ -0,0 +1,76 @@
+// src/components/data-display/Badge/Badge.metrics.ts
+var BADGE_SIZES = {
+  xs: { minWidth: 14, height: 14, fontSize: 8, paddingHorizontal: 3, dotSize: 6, iconSize: 10, closeIconSize: 8 },
+  sm: { minWidth: 16, height: 16, fontSize: 10, paddingHorizontal: 4, dotSize: 8, iconSize: 12, closeIconSize: 10 },
+  md: { minWidth: 20, height: 20, fontSize: 12, paddingHorizontal: 6, dotSize: 10, iconSize: 14, closeIconSize: 12 },
+  lg: { minWidth: 24, height: 24, fontSize: 14, paddingHorizontal: 8, dotSize: 12, iconSize: 16, closeIconSize: 14 },
+  xl: { minWidth: 28, height: 28, fontSize: 16, paddingHorizontal: 10, dotSize: 14, iconSize: 18, closeIconSize: 14 }
+};
+var BADGE_FONT_WEIGHT = 600;
+var BADGE_DESTRUCTIVE_FONT_WEIGHT = 700;
+var BADGE_LETTER_SPACING_EM = 0.025;
+var BADGE_BORDER_WIDTH = 2;
+var BADGE_CONTENT_GAP = 2;
+var GLASS_BACKGROUND_ALPHA = 0.1;
+var GLASS_BORDER_ALPHA = 0.2;
+var GLASS_BLUR_PX = 10;
+var GLASS_SATURATE = 2;
+var GLASS_INSET_HIGHLIGHT_ALPHA = 0.1;
+var OUTLINE_BORDER_WIDTH = 2;
+var SECONDARY_BACKGROUND_ALPHA = 0.15;
+var SECONDARY_BORDER_ALPHA = 0.3;
+var GLOW = { blur: 15, spread: 3, alpha: 0.5, hoverBlur: 20, hoverSpread: 4, hoverAlpha: 0.6, brightness: 1.1 };
+var GLOW_PULSE = { fromBlur: 5, fromSpread: 2, fromAlpha: 0.4, toBlur: 20, toSpread: 4, toAlpha: 0.8 };
+var PULSE = { durationMs: 2e3, scale: 1.2, opacity: 0.7 };
+var BOUNCE = { durationMs: 1e3, lift: 8, secondLift: 4, scale: 1.05, secondScale: 1.02 };
+var FADE_IN_SCALE = { durationMs: 400, from: 0.5, overshoot: 1.1 };
+var SHIMMER = { durationMs: 3e3, alpha: 0.4 };
+var MOUNT_ANIMATION_MS = 1e3;
+var CLOSE_DELAY_MS = 300;
+var BADGE_TRANSITION_MS = 300;
+var BADGE_TRANSITION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+var HOVER_SCALE = 1.1;
+var BADGE_ANCHORS = {
+  "top-right": { vertical: "top", horizontal: "right" },
+  "top-left": { vertical: "top", horizontal: "left" },
+  "bottom-right": { vertical: "bottom", horizontal: "right" },
+  "bottom-left": { vertical: "bottom", horizontal: "left" }
+};
+var badgeAnchor = (position) => BADGE_ANCHORS[position] ?? BADGE_ANCHORS["top-right"];
+function badgePalette(theme, color) {
+  if (color === "neutral") {
+    return theme.palette.neutral;
+  }
+  return theme.palette[color];
+}
+
+export {
+  BADGE_SIZES,
+  BADGE_FONT_WEIGHT,
+  BADGE_DESTRUCTIVE_FONT_WEIGHT,
+  BADGE_LETTER_SPACING_EM,
+  BADGE_BORDER_WIDTH,
+  BADGE_CONTENT_GAP,
+  GLASS_BACKGROUND_ALPHA,
+  GLASS_BORDER_ALPHA,
+  GLASS_BLUR_PX,
+  GLASS_SATURATE,
+  GLASS_INSET_HIGHLIGHT_ALPHA,
+  OUTLINE_BORDER_WIDTH,
+  SECONDARY_BACKGROUND_ALPHA,
+  SECONDARY_BORDER_ALPHA,
+  GLOW,
+  GLOW_PULSE,
+  PULSE,
+  BOUNCE,
+  FADE_IN_SCALE,
+  SHIMMER,
+  MOUNT_ANIMATION_MS,
+  CLOSE_DELAY_MS,
+  BADGE_TRANSITION_MS,
+  BADGE_TRANSITION_EASING,
+  HOVER_SCALE,
+  badgeAnchor,
+  badgePalette
+};
+//# sourceMappingURL=chunk-PYC4CWCQ.js.map

package/dist/chunk-PYC4CWCQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/Badge.metrics.ts"],"sourcesContent":["import type { BadgePosition, BadgeSize } from './Badge.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Badge` RENDERERS DRAW WITH.\n *\n * `Badge.styles.ts` / `Badge.variants.ts` (web, emotion over MUI's `Badge`) and\n * `Badge.native.tsx` (React Native) read this one table: the five chips, the\n * dot inside them, the ten variants' alphas and borders, and the keyframes.\n * The web turns the px into rem and the padding into a shorthand; native uses\n * the numbers.\n */\nexport interface BadgeSizeMetrics {\n  minWidth: number;\n  height: number;\n  /** The content's type size, in px. */\n  fontSize: number;\n  /** The chip's side padding, in px. `padding: '0 Npx'` on the web. */\n  paddingHorizontal: number;\n  dotSize: number;\n  /** A leading icon's own type size, in px. */\n  iconSize: number;\n  /** The close glyph's type size, in px. `xl` falls back to `lg`, as the web does. */\n  closeIconSize: number;\n}\n\nexport const BADGE_SIZES: Record<BadgeSize, BadgeSizeMetrics> = {\n  xs: { minWidth: 14, height: 14, fontSize: 8, paddingHorizontal: 3, dotSize: 6, iconSize: 10, closeIconSize: 8 },\n  sm: { minWidth: 16, height: 16, fontSize: 10, paddingHorizontal: 4, dotSize: 8, iconSize: 12, closeIconSize: 10 },\n  md: { minWidth: 20, height: 20, fontSize: 12, paddingHorizontal: 6, dotSize: 10, iconSize: 14, closeIconSize: 12 },\n  lg: { minWidth: 24, height: 24, fontSize: 14, paddingHorizontal: 8, dotSize: 12, iconSize: 16, closeIconSize: 14 },\n  xl: { minWidth: 28, height: 28, fontSize: 16, paddingHorizontal: 10, dotSize: 14, iconSize: 18, closeIconSize: 14 },\n};\n\n/** The chip's own type weight, its tracking, and the paper ring around it. */\nexport const BADGE_FONT_WEIGHT = 600;\nexport const BADGE_DESTRUCTIVE_FONT_WEIGHT = 700;\nexport const BADGE_LETTER_SPACING_EM = 0.025;\nexport const BADGE_BORDER_WIDTH = 2;\n/** Between the icon, the content and the close button. */\nexport const BADGE_CONTENT_GAP = 2;\n\n/* ── The ten variants' washes ─────────────────────────────────────────────── */\n\nexport const GLASS_BACKGROUND_ALPHA = 0.1;\nexport const GLASS_BORDER_ALPHA = 0.2;\nexport const GLASS_BLUR_PX = 10;\nexport const GLASS_SATURATE = 2;\nexport const GLASS_INSET_HIGHLIGHT_ALPHA = 0.1;\nexport const OUTLINE_BORDER_WIDTH = 2;\nexport const SECONDARY_BACKGROUND_ALPHA = 0.15;\nexport const SECONDARY_BORDER_ALPHA = 0.3;\n\n/* ── Emphasis and animation ───────────────────────────────────────────────── */\n\n/** `glow` without `pulse`: a 15px halo, brighter under the pointer. */\nexport const GLOW = { blur: 15, spread: 3, alpha: 0.5, hoverBlur: 20, hoverSpread: 4, hoverAlpha: 0.6, brightness: 1.1 } as const;\n/** `glow` WITH `pulse`: the halo breathes between these two. */\nexport const GLOW_PULSE = { fromBlur: 5, fromSpread: 2, fromAlpha: 0.4, toBlur: 20, toSpread: 4, toAlpha: 0.8 } as const;\n/** MUI-free `pulseAnimation`: 1 → 1.2 → 1 while the opacity dips to 0.7. */\nexport const PULSE = { durationMs: 2000, scale: 1.2, opacity: 0.7 } as const;\n/** `bounceAnimation`: up 8px at 40%, 4px at 60%, over one second. */\nexport const BOUNCE = { durationMs: 1000, lift: 8, secondLift: 4, scale: 1.05, secondScale: 1.02 } as const;\n/** `fadeInScaleAnimation`: in from half size, overshooting to 1.1. */\nexport const FADE_IN_SCALE = { durationMs: 400, from: 0.5, overshoot: 1.1 } as const;\n/** The shimmer sweep, and the white it is made of. */\nexport const SHIMMER = { durationMs: 3000, alpha: 0.4 } as const;\n/** How long the mount animation is held before the flag clears. */\nexport const MOUNT_ANIMATION_MS = 1000;\n/** MUI's `Zoom` on close, and the wait before the caller is told. */\nexport const CLOSE_DELAY_MS = 300;\n/** `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)` on the chip. */\nexport const BADGE_TRANSITION_MS = 300;\nexport const BADGE_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n/** The chip grows a tenth under the pointer. */\nexport const HOVER_SCALE = 1.1;\n\n/* ── Placement ────────────────────────────────────────────────────────────── */\n\nexport interface BadgeAnchor {\n  vertical: 'top' | 'bottom';\n  horizontal: 'left' | 'right';\n}\n\nconst BADGE_ANCHORS: Record<BadgePosition, BadgeAnchor> = {\n  'top-right': { vertical: 'top', horizontal: 'right' },\n  'top-left': { vertical: 'top', horizontal: 'left' },\n  'bottom-right': { vertical: 'bottom', horizontal: 'right' },\n  'bottom-left': { vertical: 'bottom', horizontal: 'left' },\n};\n\n/**\n * Falls back to `top-right` for anything outside the union, as the web's own\n * `positionMap[position] || positionMap['top-right']` did. Splitting on `-`\n * instead would hand MUI a half-undefined `anchorOrigin` for, say, `middle`.\n */\nexport const badgeAnchor = (position: BadgePosition): BadgeAnchor =>\n  BADGE_ANCHORS[position] ?? BADGE_ANCHORS['top-right'];\n\n/**\n * `neutral` has no palette slot of its own in MUI, so `Badge.styles.ts` draws\n * it from three greys; `danger` is MUI's `error`, which is what the shared\n * theme calls `danger`. Same colours here.\n */\nexport function badgePalette(theme: UiTheme, color: ColorValue): UiPaletteColor {\n  if (color === 'neutral') {\n    // Grey 600 / 400 / 800 under white ink: the shared theme's own `neutral`.\n    return theme.palette.neutral;\n  }\n  return theme.palette[color];\n}\n"],"mappings":";AA2BO,IAAM,cAAmD;AAAA,EAC9D,IAAI,EAAE,UAAU,IAAI,QAAQ,IAAI,UAAU,GAAG,mBAAmB,GAAG,SAAS,GAAG,UAAU,IAAI,eAAe,EAAE;AAAA,EAC9G,IAAI,EAAE,UAAU,IAAI,QAAQ,IAAI,UAAU,IAAI,mBAAmB,GAAG,SAAS,GAAG,UAAU,IAAI,eAAe,GAAG;AAAA,EAChH,IAAI,EAAE,UAAU,IAAI,QAAQ,IAAI,UAAU,IAAI,mBAAmB,GAAG,SAAS,IAAI,UAAU,IAAI,eAAe,GAAG;AAAA,EACjH,IAAI,EAAE,UAAU,IAAI,QAAQ,IAAI,UAAU,IAAI,mBAAmB,GAAG,SAAS,IAAI,UAAU,IAAI,eAAe,GAAG;AAAA,EACjH,IAAI,EAAE,UAAU,IAAI,QAAQ,IAAI,UAAU,IAAI,mBAAmB,IAAI,SAAS,IAAI,UAAU,IAAI,eAAe,GAAG;AACpH;AAGO,IAAM,oBAAoB;AAC1B,IAAM,gCAAgC;AACtC,IAAM,0BAA0B;AAChC,IAAM,qBAAqB;AAE3B,IAAM,oBAAoB;AAI1B,IAAM,yBAAyB;AAC/B,IAAM,qBAAqB;AAC3B,IAAM,gBAAgB;AACtB,IAAM,iBAAiB;AACvB,IAAM,8BAA8B;AACpC,IAAM,uBAAuB;AAC7B,IAAM,6BAA6B;AACnC,IAAM,yBAAyB;AAK/B,IAAM,OAAO,EAAE,MAAM,IAAI,QAAQ,GAAG,OAAO,KAAK,WAAW,IAAI,aAAa,GAAG,YAAY,KAAK,YAAY,IAAI;AAEhH,IAAM,aAAa,EAAE,UAAU,GAAG,YAAY,GAAG,WAAW,KAAK,QAAQ,IAAI,UAAU,GAAG,SAAS,IAAI;AAEvG,IAAM,QAAQ,EAAE,YAAY,KAAM,OAAO,KAAK,SAAS,IAAI;AAE3D,IAAM,SAAS,EAAE,YAAY,KAAM,MAAM,GAAG,YAAY,GAAG,OAAO,MAAM,aAAa,KAAK;AAE1F,IAAM,gBAAgB,EAAE,YAAY,KAAK,MAAM,KAAK,WAAW,IAAI;AAEnE,IAAM,UAAU,EAAE,YAAY,KAAM,OAAO,IAAI;AAE/C,IAAM,qBAAqB;AAE3B,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB;AAC5B,IAAM,0BAA0B;AAEhC,IAAM,cAAc;AAS3B,IAAM,gBAAoD;AAAA,EACxD,aAAa,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,EACpD,YAAY,EAAE,UAAU,OAAO,YAAY,OAAO;AAAA,EAClD,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAQ;AAAA,EAC1D,eAAe,EAAE,UAAU,UAAU,YAAY,OAAO;AAC1D;AAOO,IAAM,cAAc,CAAC,aAC1B,cAAc,QAAQ,KAAK,cAAc,WAAW;AAO/C,SAAS,aAAa,OAAgB,OAAmC;AAC9E,MAAI,UAAU,WAAW;AAEvB,WAAO,MAAM,QAAQ;AAAA,EACvB;AACA,SAAO,MAAM,QAAQ,KAAK;AAC5B;","names":[]}

package/dist/chunk-PYJI2YGJ.js

@@ -0,0 +1,293 @@
+import {
+  bounceAnimation,
+  glowAnimation,
+  pulseAnimation,
+  rippleAnimation,
+  shimmerAnimation,
+  spinAnimation
+} from "./chunk-35ETD7ML.js";
+import {
+  DISABLED,
+  IOS_BASE_OFFSET,
+  IOS_THUMB_SHADOW,
+  IOS_TRAVEL_INSET,
+  NEUTRAL_CONTRAST,
+  RESTING_THUMB,
+  SWITCH_FOCUS_RING,
+  SWITCH_GLASS,
+  SWITCH_GLOW,
+  SWITCH_GRADIENT,
+  SWITCH_HOVER,
+  SWITCH_PULSE,
+  SWITCH_RIPPLE,
+  SWITCH_SPINNER,
+  SWITCH_TRANSITION,
+  THUMB_ELEVATION,
+  THUMB_RADIUS,
+  TRACK_LABEL,
+  TRACK_RADIUS,
+  geometryOf,
+  iosTrackShadow,
+  lookOf,
+  seconds,
+  showsTrackLabels,
+  trackColor
+} from "./chunk-D5SZXH7Q.js";
+import {
+  px
+} from "./chunk-PE4ZW3IA.js";
+import {
+  inkOver
+} from "./chunk-2BYKTBDL.js";
+import {
+  absoluteInk,
+  controlNeutral,
+  neutralTones
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/form/Switch/Switch.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var neutralPalette = (theme) => controlNeutral(theme);
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  const palette = colorMap[color] ?? theme.palette.primary;
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || NEUTRAL_CONTRAST
+  };
+};
+var thumbShadow = (theme, look) => look === "ios" ? IOS_THUMB_SHADOW : theme.shadows[THUMB_ELEVATION[look]] ?? "none";
+var rippleOverlay = (palette) => ({
+  content: '""',
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  width: "100%",
+  height: "100%",
+  borderRadius: "50%",
+  background: alpha(palette.main, SWITCH_RIPPLE.alpha),
+  animation: `${rippleAnimation} ${seconds(SWITCH_RIPPLE.ms)} ease-out`,
+  transform: "translate(-50%, -50%)",
+  pointerEvents: "none"
+});
+var checkedInk = (flags, palette) => {
+  const fills = flags.gradient ? [palette.light || palette.main, palette.main, palette.dark || palette.main] : [palette.main];
+  return inkOver(fills, palette.contrastText || NEUTRAL_CONTRAST);
+};
+var checkedTrack = (flags, palette) => ({
+  backgroundColor: palette.main,
+  opacity: 1,
+  border: 0,
+  position: "relative",
+  overflow: "hidden",
+  ...flags.glow && {
+    animation: `${glowAnimation} ${seconds(SWITCH_GLOW.ms)} ease-in-out infinite`,
+    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)}`
+  },
+  ...flags.gradient && {
+    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]}%)`,
+    backgroundSize: "200% 100%",
+    animation: `${shimmerAnimation} ${seconds(SWITCH_GRADIENT.shimmerMs)} ease infinite`
+  }
+});
+var switchBaseSx = (theme, flags, palette, geometry, look) => {
+  const { width, thumbSize, padding } = geometry;
+  const isIos = look === "ios";
+  return {
+    padding,
+    margin: 0,
+    transitionDuration: `${SWITCH_TRANSITION.ms}ms`,
+    transitionTimingFunction: SWITCH_TRANSITION.easing,
+    ...isIos && { transform: `translateX(${IOS_BASE_OFFSET}px)` },
+    "&:hover": {
+      "& .MuiSwitch-thumb": {
+        transform: flags.loading ? "none" : `scale(${SWITCH_HOVER.thumbScale})`,
+        boxShadow: `${theme.shadows[SWITCH_HOVER.elevation]}, 0 0 ${SWITCH_HOVER.blur}px ${alpha(palette.main, SWITCH_HOVER.alpha)}`
+      },
+      ...flags.ripple && { "&::after": rippleOverlay(palette) }
+    },
+    "&.Mui-checked": {
+      // The thumb travels the track minus its own width and both paddings; the
+      // iOS look insets differently, so it gets its own distance.
+      transform: `translateX(${width - thumbSize - padding * 2}px)`,
+      color: checkedInk(flags, palette),
+      "& .MuiSwitch-thumb": {
+        animation: flags.loading ? "none" : `${bounceAnimation} ${seconds(SWITCH_TRANSITION.ms)} ease-out`,
+        /*
+                  GLASS KEEPS ITS WASH AND GAINS AN OUTLINE (FUT-2067).
+        
+                  It used to keep the wash and nothing else, on the argument that a
+                  translucent thumb MEANS to show the track through itself, so painting
+                  it opaque would be repainting the variant rather than fixing it. The
+                  first half of that is still true and this still does not touch the
+                  fill. The second half was doing more work than the number supports:
+                  `SWITCH_GLASS.thumbAlpha` is **0.9**, so nine parts in ten of the knob
+                  are `background.paper` and one part is the track. On a pale brand that
+                  composites to within about 1.1:1 of the bar it is sitting on — the
+                  same "reads as OFF while it is on" state FUT-1924 exists for, in the
+                  one variant whose own argument points AT the tenant-controlled
+                  surface.
+        
+                  So the separation moves to the EDGE, which is the thing a glass
+                  surface is allowed to have. The colour is {@link checkedInk} — the
+                  same derivation the opaque thumb gets, so there is one rule for "what
+                  reads on this track" rather than two — at full strength rather than
+                  the `divider` hairline at `borderAlpha` 0.2 the resting thumb wears,
+                  which on a pale track is not an outline at all.
+        
+                  Checked only. The resting track is `action.disabled` washed over the
+                  page, which no tenant chooses, so the quiet hairline stays right
+                  there — the same split {@link checkedInk}'s own docblock makes.
+                */
+        ...flags.glass ? { borderColor: checkedInk(flags, palette) } : { backgroundColor: checkedInk(flags, palette) }
+      },
+      "& + .MuiSwitch-track": checkedTrack(flags, palette),
+      "&.Mui-disabled + .MuiSwitch-track": { opacity: DISABLED.checkedTrackOpacity },
+      ...isIos && { transform: `translateX(${width - thumbSize - IOS_TRAVEL_INSET}px)` }
+    },
+    "&.Mui-focusVisible .MuiSwitch-thumb": {
+      color: palette.main,
+      border: `${SWITCH_FOCUS_RING.width}px solid ${alpha(palette.main, SWITCH_FOCUS_RING.alpha)}`
+    },
+    "&.Mui-disabled .MuiSwitch-thumb": { color: neutralTones(theme).surface },
+    "&.Mui-disabled + .MuiSwitch-track": { opacity: DISABLED.trackOpacity }
+  };
+};
+var thumbSx = (theme, flags, palette, thumbSize, look) => ({
+  width: thumbSize,
+  height: thumbSize,
+  borderRadius: THUMB_RADIUS[look](thumbSize),
+  // `.Mui-checked` above replaces this for the brand-filled track; see
+  // {@link RESTING_THUMB} for why the resting one stays white.
+  backgroundColor: RESTING_THUMB,
+  boxShadow: thumbShadow(theme, look),
+  transition: `all ${seconds(SWITCH_TRANSITION.ms)} ${SWITCH_TRANSITION.easing}`,
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  ...flags.glass && {
+    backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.thumbAlpha),
+    backdropFilter: `blur(${SWITCH_GLASS.thumbBlur}px)`,
+    border: `1px solid ${alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha)}`
+  },
+  ...flags.pulse && { animation: `${pulseAnimation} ${seconds(SWITCH_PULSE.ms)} ease-in-out infinite` },
+  ...flags.loading && {
+    // A spinner drawn inside the thumb rather than over the whole control.
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      width: thumbSize * SWITCH_SPINNER.sizeRatio,
+      height: thumbSize * SWITCH_SPINNER.sizeRatio,
+      border: `${SWITCH_SPINNER.borderWidth}px solid ${palette.main}`,
+      borderTop: `${SWITCH_SPINNER.borderWidth}px solid transparent`,
+      borderRadius: "50%",
+      animation: `${spinAnimation} ${seconds(SWITCH_SPINNER.ms)} linear infinite`
+    }
+  },
+  ...look === "material" && {
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      borderRadius: "inherit",
+      backgroundColor: palette.main,
+      opacity: 0,
+      transform: "scale(0)",
+      transition: "all 0.3s ease"
+    }
+  }
+});
+var trackLabels = (theme, flags, palette, onText, offText) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  paddingLeft: theme.spacing(TRACK_LABEL.insetUnits),
+  paddingRight: theme.spacing(TRACK_LABEL.insetUnits),
+  fontSize: px(TRACK_LABEL.fontSize),
+  fontWeight: TRACK_LABEL.fontWeight,
+  color: theme.palette.text.secondary,
+  "&::before, &::after": {
+    content: '""',
+    position: "absolute",
+    fontSize: px(TRACK_LABEL.fontSize),
+    fontWeight: TRACK_LABEL.fontWeight,
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 1
+  },
+  ...onText && {
+    "&::before": {
+      content: `"${onText}"`,
+      left: theme.spacing(TRACK_LABEL.insetUnits),
+      // The `on` word sits at the end the thumb travels TO, which is the
+      // filled half of the track once checked.
+      color: checkedInk(flags, palette)
+    }
+  },
+  ...offText && {
+    "&::after": {
+      content: `"${offText}"`,
+      right: theme.spacing(TRACK_LABEL.insetUnits),
+      color: theme.palette.text.secondary
+    }
+  }
+});
+var trackSx = (theme, flags, palette, height, look) => {
+  const { glass, gradient, onText, offText, customVariant } = flags;
+  return {
+    borderRadius: TRACK_RADIUS[look](height),
+    backgroundColor: trackColor(
+      { black: absoluteInk(theme).black, disabled: theme.palette.action.disabled },
+      look
+    ),
+    opacity: 1,
+    transition: `all ${seconds(SWITCH_TRANSITION.ms)} ${SWITCH_TRANSITION.easing}`,
+    position: "relative",
+    boxShadow: look === "ios" ? iosTrackShadow() : "none",
+    ...glass && {
+      backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.trackAlpha),
+      backdropFilter: `blur(${SWITCH_GLASS.trackBlur}px)`,
+      border: `1px solid ${alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha)}`
+    },
+    ...gradient && !glass && {
+      background: `linear-gradient(${SWITCH_GRADIENT.resting.angleDeg}deg, ${alpha(palette.light || palette.main, SWITCH_GRADIENT.resting.lightAlpha)}, ${alpha(palette.main, SWITCH_GRADIENT.resting.mainAlpha)})`
+    },
+    ...showsTrackLabels(customVariant, onText, offText) && trackLabels(theme, flags, palette, onText, offText)
+  };
+};
+var onTrackInk = (theme, flags) => checkedInk(flags, getColorFromTheme(theme, flags.customColor ?? "primary"));
+var switchSx = (theme, flags) => {
+  const palette = getColorFromTheme(theme, flags.customColor ?? "primary");
+  const geometry = geometryOf(flags.customSize, flags.trackWidth, flags.trackHeight);
+  const look = lookOf(flags.customVariant);
+  return {
+    width: geometry.width,
+    height: geometry.height,
+    padding: 0,
+    overflow: "visible",
+    "& .MuiSwitch-switchBase": switchBaseSx(theme, flags, palette, geometry, look),
+    "& .MuiSwitch-thumb": thumbSx(theme, flags, palette, geometry.thumbSize, look),
+    "& .MuiSwitch-track": trackSx(theme, flags, palette, geometry.height, look)
+  };
+};
+
+export {
+  onTrackInk,
+  switchSx
+};
+//# sourceMappingURL=chunk-PYJI2YGJ.js.map

package/dist/chunk-PYJI2YGJ.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 { inkOver, px } 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: px(TRACK_LABEL.fontSize),\n  fontWeight: TRACK_LABEL.fontWeight,\n  color: theme.palette.text.secondary,\n  '&::before, &::after': {\n    content: '\"\"',\n    position: 'absolute',\n    fontSize: px(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-PYPFDRX4.js

@@ -0,0 +1,88 @@
+import {
+  getSizeStyles
+} from "./chunk-3CBL5FWS.js";
+import {
+  BADGE_CONTENT_GAP,
+  BADGE_SIZES
+} from "./chunk-PYC4CWCQ.js";
+import {
+  px
+} from "./chunk-PE4ZW3IA.js";
+
+// src/components/data-display/Badge/BadgeContent.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import IconButton from "@mui/material/IconButton/index.js";
+import { jsx } from "react/jsx-runtime";
+var CLOSE_ICON_SIZES = Object.fromEntries(
+  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, px(metrics.closeIconSize)])
+);
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;
+var BadgeIcon = ({
+  icon,
+  size,
+  testId
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "data-testid": testId,
+    style: {
+      fontSize: getSizeStyles(size).iconSize,
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    children: icon
+  },
+  "icon"
+);
+var BadgeCloseButton = ({
+  size,
+  testId,
+  onClose
+}) => /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    size: "small",
+    onClick: onClose,
+    "data-testid": testId,
+    sx: {
+      p: 0,
+      ml: 0.5,
+      color: "inherit",
+      "& svg": { fontSize: CLOSE_ICON_SIZES[size] ?? CLOSE_ICON_SIZES.lg },
+      "&:hover": { opacity: 0.8 }
+    },
+    children: /* @__PURE__ */ jsx(CloseIcon, {})
+  },
+  "close"
+);
+var buildBadgeContent = ({
+  variant,
+  size,
+  icon,
+  closable,
+  dataTestId,
+  baseContent,
+  onClose
+}) => {
+  if (variant === "dot") return "";
+  const testId = makeTestId(dataTestId);
+  const parts = [];
+  if (icon) parts.push(/* @__PURE__ */ jsx(BadgeIcon, { icon, size, testId: testId("icon") }, "icon"));
+  if (baseContent !== null && baseContent !== void 0) {
+    parts.push(
+      /* @__PURE__ */ jsx("span", { "data-testid": testId("content"), children: baseContent }, "content")
+    );
+  }
+  if (closable && !variant.includes("dot")) {
+    parts.push(
+      /* @__PURE__ */ jsx(BadgeCloseButton, { size, testId: testId("close"), onClose }, "close")
+    );
+  }
+  if (parts.length === 0) return null;
+  return /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", alignItems: "center", gap: `${BADGE_CONTENT_GAP}px` }, children: parts });
+};
+
+export {
+  buildBadgeContent
+};
+//# sourceMappingURL=chunk-PYPFDRX4.js.map