@12-apps/ui 6.33.0 → 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-PRVK3U6U.js

@@ -0,0 +1,169 @@
+import {
+  SettingsStatusMarker
+} from "./chunk-QXTO3G2T.js";
+import {
+  TOUCH_TARGET,
+  atLeastRail
+} from "./chunk-LIG7TKIB.js";
+
+// src/components/layout/SettingsLayout/SettingsLayout.items.tsx
+import Box from "@mui/material/Box/index.js";
+import List from "@mui/material/List/index.js";
+import ListItem from "@mui/material/ListItem/index.js";
+import ListItemButton from "@mui/material/ListItemButton/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function RailItemContent({
+  item,
+  active,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon ? /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, color: "inherit" }, children: item.icon }) : null,
+    /* @__PURE__ */ jsx(
+      ListItemText,
+      {
+        primary: item.label,
+        primaryTypographyProps: { variant: "body2", noWrap: true, fontWeight: active ? 600 : 500 }
+      }
+    ),
+    item.status ? /* @__PURE__ */ jsx(
+      SettingsStatusMarker,
+      {
+        status: item.status,
+        label: item.statusLabel,
+        testId: `${testIdPrefix}-status-${item.id}`
+      }
+    ) : null
+  ] });
+}
+function SettingsRailItem({
+  item,
+  active,
+  linkComponent,
+  onSelectItem,
+  onNavigate,
+  testIdPrefix,
+  variant,
+  breakpoint
+}) {
+  const theme = useTheme();
+  const touchFloor = variant === "drilldown" ? { minHeight: TOUCH_TARGET, [atLeastRail(theme, breakpoint)]: { minHeight: "auto" } } : null;
+  const shared = {
+    "data-testid": `${testIdPrefix}-item-${item.id}`,
+    sx: {
+      borderRadius: 1.5,
+      mb: 0.25,
+      gap: 1.5,
+      ...touchFloor,
+      color: active ? "primary.main" : "text.secondary",
+      "&.Mui-selected": {
+        bgcolor: alpha(theme.palette.primary.main, 0.12),
+        "&:hover": { bgcolor: alpha(theme.palette.primary.main, 0.18) }
+      }
+    }
+  };
+  const content = /* @__PURE__ */ jsx(RailItemContent, { item, active, testIdPrefix });
+  if (item.inert) {
+    return /* @__PURE__ */ jsx(ListItem, { ...shared, "data-inert": "true", children: content });
+  }
+  const interactive = {
+    ...shared,
+    selected: active,
+    "aria-current": active ? "page" : void 0
+  };
+  if (item.href && linkComponent) {
+    const LinkComponent = linkComponent;
+    return /* @__PURE__ */ jsx(
+      ListItemButton,
+      {
+        component: LinkComponent,
+        href: item.href,
+        onClick: onNavigate,
+        ...interactive,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ListItemButton,
+    {
+      onClick: () => {
+        onSelectItem?.(item.id);
+        onNavigate?.();
+      },
+      ...interactive,
+      children: content
+    }
+  );
+}
+function indexListSx(shape) {
+  if (shape.variant !== "drilldown" || !shape.atIndex) return null;
+  return (theme) => ({
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    // One spacing unit (8px). This is an `sx` callback, where a bare 8 is
+    // EIGHT units — it drew a 64px gutter between the two columns.
+    columnGap: 1,
+    [theme.breakpoints.up("sm")]: { gridTemplateColumns: "1fr 1fr" },
+    [atLeastRail(theme, shape.breakpoint)]: { gridTemplateColumns: "1fr" }
+  });
+}
+function SettingsRailGroup({
+  group,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  onNavigate,
+  testIdPrefix,
+  ...shape
+}) {
+  const grid = indexListSx(shape);
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": `${testIdPrefix}-group-${group.id}`, sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          display: "block",
+          px: 1,
+          color: "text.secondary",
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.06em"
+        },
+        children: group.label
+      }
+    ),
+    group.description ? /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "p", sx: { px: 1, mt: 0.25, color: "text.disabled" }, children: group.description }) : null,
+    /* @__PURE__ */ jsx(
+      List,
+      {
+        disablePadding: true,
+        sx: (theme) => ({ mt: 0.5, ...grid ? grid(theme) : null }),
+        children: group.items.map((item) => /* @__PURE__ */ jsx(
+          SettingsRailItem,
+          {
+            item,
+            active: item.id === activeItemId,
+            linkComponent,
+            onSelectItem,
+            onNavigate,
+            testIdPrefix,
+            ...shape
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+}
+
+export {
+  SettingsRailItem,
+  SettingsRailGroup
+};
+//# sourceMappingURL=chunk-PRVK3U6U.js.map

package/dist/chunk-PRVK3U6U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsLayout.items.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItem from '@mui/material/ListItem/index.js';\nimport ListItemButton from '@mui/material/ListItemButton/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { atLeastRail, TOUCH_TARGET } from './SettingsLayout.styles';\nimport { SettingsStatusMarker } from './SettingsStatusMarker';\nimport type {\n  SettingsLayoutProps,\n  SettingsNavGroup,\n  SettingsNavItem,\n  SettingsNavVariant,\n  SettingsRailBreakpoint,\n} from './SettingsLayout.types';\n\n/** The shape-deciding inputs every rail part needs to know about. */\nexport interface RailShape {\n  variant: SettingsNavVariant;\n  breakpoint: SettingsRailBreakpoint;\n  atIndex: boolean;\n}\n\ninterface RailItemProps extends RailShape {\n  item: SettingsNavItem;\n  active: boolean;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  /** Called on activation so the `switcher`'s rail can collapse after a choice. */\n  onNavigate?: () => void;\n  testIdPrefix: string;\n}\n\n/** Label, plus the situation marker when the host resolved one. */\nfunction RailItemContent({\n  item,\n  active,\n  testIdPrefix,\n}: {\n  item: SettingsNavItem;\n  active: boolean;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <>\n      {item.icon ? (\n        <ListItemIcon sx={{ minWidth: 0, color: 'inherit' }}>{item.icon}</ListItemIcon>\n      ) : null}\n      <ListItemText\n        primary={item.label}\n        primaryTypographyProps={{ variant: 'body2', noWrap: true, fontWeight: active ? 600 : 500 }}\n      />\n      {item.status ? (\n        <SettingsStatusMarker\n          status={item.status}\n          label={item.statusLabel}\n          testId={`${testIdPrefix}-status-${item.id}`}\n        />\n      ) : null}\n    </>\n  );\n}\n\n/** One rail entry — a link when it has `href`, inert text when it says so, else a button. */\nexport function SettingsRailItem({\n  item,\n  active,\n  linkComponent,\n  onSelectItem,\n  onNavigate,\n  testIdPrefix,\n  variant,\n  breakpoint,\n}: RailItemProps): React.JSX.Element {\n  const theme = useTheme();\n  // In `drilldown` the narrow rail IS the page's list, so its rows are the\n  // primary touch targets rather than a secondary column — hence the 44px floor\n  // below the breakpoint. Above it, the row goes back to rail density.\n  const touchFloor =\n    variant === 'drilldown'\n      ? { minHeight: TOUCH_TARGET, [atLeastRail(theme, breakpoint)]: { minHeight: 'auto' } }\n      : null;\n  const shared = {\n    'data-testid': `${testIdPrefix}-item-${item.id}`,\n    sx: {\n      borderRadius: 1.5,\n      mb: 0.25,\n      gap: 1.5,\n      ...touchFloor,\n      color: active ? 'primary.main' : 'text.secondary',\n      '&.Mui-selected': {\n        bgcolor: alpha(theme.palette.primary.main, 0.12),\n        '&:hover': { bgcolor: alpha(theme.palette.primary.main, 0.18) },\n      },\n    },\n  };\n  const content = <RailItemContent item={item} active={active} testIdPrefix={testIdPrefix} />;\n\n  // Listed but not reachable from here. Deliberately not a disabled button: a\n  // disabled control says \"you may not\", and the true statement is \"not from\n  // this screen\" — the section exists and someone else's screen owns it.\n  if (item.inert) {\n    return (\n      <ListItem {...shared} data-inert=\"true\">\n        {content}\n      </ListItem>\n    );\n  }\n\n  const interactive = {\n    ...shared,\n    selected: active,\n    'aria-current': active ? ('page' as const) : undefined,\n  };\n\n  if (item.href && linkComponent) {\n    const LinkComponent = linkComponent;\n    return (\n      <ListItemButton\n        component={LinkComponent}\n        href={item.href}\n        onClick={onNavigate}\n        {...interactive}\n      >\n        {content}\n      </ListItemButton>\n    );\n  }\n  return (\n    <ListItemButton\n      onClick={() => {\n        onSelectItem?.(item.id);\n        onNavigate?.();\n      }}\n      {...interactive}\n    >\n      {content}\n    </ListItemButton>\n  );\n}\n\ninterface RailGroupProps extends RailShape {\n  group: SettingsNavGroup;\n  activeItemId?: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  onNavigate?: () => void;\n  testIdPrefix: string;\n}\n\n/**\n * The list's own grid, in `drilldown` at the index only.\n *\n * At the index on a wide phone or a tablet the list has room for two columns;\n * the rail column never does, so the second column is undone at exactly the\n * width where this stops being the page.\n */\nfunction indexListSx(shape: RailShape) {\n  if (shape.variant !== 'drilldown' || !shape.atIndex) return null;\n  return (theme: import('@mui/material').Theme) => ({\n    display: 'grid',\n    gridTemplateColumns: '1fr',\n    // One spacing unit (8px). This is an `sx` callback, where a bare 8 is\n    // EIGHT units — it drew a 64px gutter between the two columns.\n    columnGap: 1,\n    [theme.breakpoints.up('sm')]: { gridTemplateColumns: '1fr 1fr' },\n    [atLeastRail(theme, shape.breakpoint)]: { gridTemplateColumns: '1fr' },\n  });\n}\n\n/** A category: header + optional description + its items. */\nexport function SettingsRailGroup({\n  group,\n  activeItemId,\n  linkComponent,\n  onSelectItem,\n  onNavigate,\n  testIdPrefix,\n  ...shape\n}: RailGroupProps): React.JSX.Element {\n  const grid = indexListSx(shape);\n  return (\n    <Box data-testid={`${testIdPrefix}-group-${group.id}`} sx={{ mb: 2 }}>\n      <Typography\n        variant=\"caption\"\n        sx={{\n          display: 'block',\n          px: 1,\n          color: 'text.secondary',\n          fontWeight: 600,\n          textTransform: 'uppercase',\n          letterSpacing: '0.06em',\n        }}\n      >\n        {group.label}\n      </Typography>\n      {group.description ? (\n        <Typography variant=\"caption\" component=\"p\" sx={{ px: 1, mt: 0.25, color: 'text.disabled' }}>\n          {group.description}\n        </Typography>\n      ) : null}\n      <List\n        disablePadding\n        sx={(theme) => ({ mt: 0.5, ...(grid ? grid(theme) : null) })}\n      >\n        {group.items.map((item) => (\n          <SettingsRailItem\n            key={item.id}\n            item={item}\n            active={item.id === activeItemId}\n            linkComponent={linkComponent}\n            onSelectItem={onSelectItem}\n            onNavigate={onNavigate}\n            testIdPrefix={testIdPrefix}\n            {...shape}\n          />\n        ))}\n      </List>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

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":[]}