npm - @12-apps/ui - Versions diffs - 6.67.0 → 6.68.0 - Mend

@12-apps/ui 6.67.0 → 6.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/dist/{chunk-HYQJJLBC.js → chunk-DHAXUVMR.js} RENAMED Viewed

@@ -3,8 +3,10 @@ import {
   CHIP_TRANSITION_EASING,
   CHIP_TRANSITION_MS,
   HOVER_LIFT_PX,
-  HOVER_SHADOW
-} from "./chunk-KU6VHNRV.js";
+  HOVER_SHADOW,
+  SOFT_GROUND_ALPHA,
+  SOFT_HOVER_ALPHA
+} from "./chunk-E5I776YW.js";
 import {
   chipKeyAction
 } from "./chunk-BF4FYOAR.js";
@@ -20,6 +22,7 @@ import {
 // src/components/data-display/Chip/Chip.styles.tsx
 import Avatar from "@mui/material/Avatar/index.js";
 import React from "react";
+import { alpha } from "@mui/material/styles/index.js";
 import { jsx } from "react/jsx-runtime";
 var makeKeyDownHandler = (args) => (event) => {
   const action = chipKeyAction(event.key, args);
@@ -45,14 +48,35 @@ var hoverShadow = (theme) => `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW
   theme,
   theme.palette.mode === "dark" ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight
 )}`;
+var paletteKey = (color) => {
+  if (color === "neutral") return null;
+  return color === "danger" ? "error" : color;
+};
+var softStyles = (color) => {
+  const key = paletteKey(color);
+  const ground = (theme) => key ? alpha(theme.palette[key].main, SOFT_GROUND_ALPHA) : theme.palette.action.selected;
+  const ink = (theme) => key ? theme.palette[key].dark : theme.palette.text.secondary;
+  return {
+    backgroundColor: ground,
+    color: ink,
+    // A state is read at a glance: the label is set semibold.
+    fontWeight: 600,
+    "& .MuiChip-icon": { color: ink },
+    "&.MuiChip-clickable:hover": {
+      backgroundColor: (theme) => key ? alpha(theme.palette[key].main, SOFT_HOVER_ALPHA) : theme.palette.action.hover
+    }
+  };
+};
 var chipStyles = ({
   variant,
+  color = "primary",
   selected,
   clickable,
   disabled
 }) => {
   const lifts = clickable && !disabled;
   return {
+    ...variant === "soft" ? softStyles(color) : {},
     // Enhanced styling for outlined variant
     ...variant === "outlined" && {
       borderWidth: "1px",
@@ -86,4 +110,4 @@ export {
   chipStyles,
   iconWithTestId
 };
-//# sourceMappingURL=chunk-HYQJJLBC.js.map
+//# sourceMappingURL=chunk-DHAXUVMR.js.map

package/dist/chunk-DHAXUVMR.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Chip/Chip.styles.tsx"],"sourcesContent":["import Avatar from '@mui/material/Avatar/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { KeyboardEvent, ReactElement } from 'react';\nimport React from 'react';\n\nimport { chipKeyAction, type ChipKeyArgs } from './Chip.helpers';\nimport { alpha } from '@mui/material/styles/index.js';\n\nimport {\n CHIP_SIZES,\n CHIP_TRANSITION_EASING,\n CHIP_TRANSITION_MS,\n HOVER_LIFT_PX,\n HOVER_SHADOW,\n SOFT_GROUND_ALPHA,\n SOFT_HOVER_ALPHA,\n} from './Chip.metrics';\nimport type { ChipProps } from './Chip.types';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are wired by hand: Delete/Backspace removes it, Enter/Space activates it.\n * The DECISION is `chipKeyAction`, which the native half reads too.\n */\nexport const makeKeyDownHandler =\n (args: ChipKeyArgs & { onClick?: () => void; onDelete?: () => void }) =>\n (event: KeyboardEvent): void => {\n const action = chipKeyAction(event.key, args);\n if (action === null) return;\n event.preventDefault();\n if (action === 'delete') {\n args.onDelete?.();\n return;\n }\n args.onClick?.();\n };\n\nexport const avatarFor = (\n avatar: ChipProps['avatar'],\n avatarSrc?: string,\n): ReactElement | undefined => {\n if (avatar && React.isValidElement(avatar)) {\n return avatar;\n }\n if (avatarSrc) {\n const { avatarSize } = CHIP_SIZES.medium;\n return <Avatar src={avatarSrc} sx={{ width: sxRem(avatarSize), height: sxRem(avatarSize) }} />;\n }\n return undefined;\n};\n\ninterface ChipStyleArgs {\n variant: ChipProps['variant'];\n color?: ChipProps['color'];\n selected?: boolean;\n clickable?: boolean;\n disabled?: boolean;\n}\n\n/** The lift's shadow, per mode — the same numbers the native chip reads. */\nconst hoverShadow = (theme: Theme): string =>\n `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW.blur)} ${shadowInk(\n theme,\n theme.palette.mode === 'dark' ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight,\n )}`;\n\n/**\n * Selection styling uses SEMANTIC palette tokens (not hardcoded rgba). A filled\n * selected chip keeps MUI's solid `color.main` + contrast text (clear active\n * state); an outlined selected chip gets a subtle theme-driven `action.selected`\n * tint so it reads as active without muddying the fill.\n */\n/** The palette entry a colour paints with; `neutral` has none and takes the ink. */\nconst paletteKey = (color: NonNullable<ChipProps['color']>): 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | null => {\n if (color === 'neutral') return null;\n return color === 'danger' ? 'error' : color;\n};\n\n/** `soft`: the colour's tint for a ground, its dark step for ink (and the icon). */\nconst softStyles = (color: NonNullable<ChipProps['color']>): SxProps<Theme> => {\n const key = paletteKey(color);\n const ground = (theme: Theme): string =>\n key ? alpha(theme.palette[key].main, SOFT_GROUND_ALPHA) : theme.palette.action.selected;\n const ink = (theme: Theme): string => (key ? theme.palette[key].dark : theme.palette.text.secondary);\n return {\n backgroundColor: ground,\n color: ink,\n // A state is read at a glance: the label is set semibold.\n fontWeight: 600,\n '& .MuiChip-icon': { color: ink },\n '&.MuiChip-clickable:hover': {\n backgroundColor: (theme: Theme) => (key ? alpha(theme.palette[key].main, SOFT_HOVER_ALPHA) : theme.palette.action.hover),\n },\n };\n};\n\nexport const chipStyles = ({\n variant,\n color = 'primary',\n selected,\n clickable,\n disabled,\n}: ChipStyleArgs): SxProps<Theme> => {\n const lifts = clickable && !disabled;\n\n return {\n ...(variant === 'soft' ? (softStyles(color) as object) : {}),\n // Enhanced styling for outlined variant\n ...(variant === 'outlined' && {\n borderWidth: '1px',\n borderStyle: 'solid',\n backgroundColor: 'transparent',\n }),\n ...(selected &&\n variant === 'outlined' && {\n backgroundColor: (theme: Theme) => theme.palette.action.selected,\n }),\n '&:hover': {\n ...(lifts && {\n transform: (theme: Theme) => `translateY(${rem(theme, -HOVER_LIFT_PX)})`,\n boxShadow: (theme: Theme) => hoverShadow(theme),\n }),\n },\n '&:active': {\n ...(lifts && {\n transform: 'translateY(0px)',\n }),\n },\n transition: `all ${CHIP_TRANSITION_MS / 1000}s ${CHIP_TRANSITION_EASING}`,\n };\n};\n\nexport const iconWithTestId = (\n icon: ChipProps['icon'],\n testId: string,\n): ReactElement | undefined =>\n icon && React.isValidElement(icon)\n ? React.cloneElement(icon as ReactElement, {\n 'data-testid': testId,\n } as Record<string, unknown>)\n : undefined;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,YAAY;AAGnB,OAAO,WAAW;AAGlB,SAAS,aAAa;AA0CX;AAtBJ,IAAM,qBACX,CAAC,SACD,CAAC,UAA+B;AAC9B,QAAM,SAAS,cAAc,MAAM,KAAK,IAAI;AAC5C,MAAI,WAAW,KAAM;AACrB,QAAM,eAAe;AACrB,MAAI,WAAW,UAAU;AACvB,SAAK,WAAW;AAChB;AAAA,EACF;AACA,OAAK,UAAU;AACjB;AAEK,IAAM,YAAY,CACvB,QACA,cAC6B;AAC7B,MAAI,UAAU,MAAM,eAAe,MAAM,GAAG;AAC1C,WAAO;AAAA,EACT;AACA,MAAI,WAAW;AACb,UAAM,EAAE,WAAW,IAAI,WAAW;AAClC,WAAO,oBAAC,UAAO,KAAK,WAAW,IAAI,EAAE,OAAO,MAAM,UAAU,GAAG,QAAQ,MAAM,UAAU,EAAE,GAAG;AAAA,EAC9F;AACA,SAAO;AACT;AAWA,IAAM,cAAc,CAAC,UACnB,KAAK,KAAK,OAAO,aAAa,SAAS,aAAa,IAAI,CAAC,IAAI;AAAA,EAC3D;AAAA,EACA,MAAM,QAAQ,SAAS,SAAS,aAAa,YAAY,aAAa;AACxE,CAAC;AASH,IAAM,aAAa,CAAC,UAAsH;AACxI,MAAI,UAAU,UAAW,QAAO;AAChC,SAAO,UAAU,WAAW,UAAU;AACxC;AAGA,IAAM,aAAa,CAAC,UAA2D;AAC7E,QAAM,MAAM,WAAW,KAAK;AAC5B,QAAM,SAAS,CAAC,UACd,MAAM,MAAM,MAAM,QAAQ,GAAG,EAAE,MAAM,iBAAiB,IAAI,MAAM,QAAQ,OAAO;AACjF,QAAM,MAAM,CAAC,UAA0B,MAAM,MAAM,QAAQ,GAAG,EAAE,OAAO,MAAM,QAAQ,KAAK;AAC1F,SAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,OAAO;AAAA;AAAA,IAEP,YAAY;AAAA,IACZ,mBAAmB,EAAE,OAAO,IAAI;AAAA,IAChC,6BAA6B;AAAA,MAC3B,iBAAiB,CAAC,UAAkB,MAAM,MAAM,MAAM,QAAQ,GAAG,EAAE,MAAM,gBAAgB,IAAI,MAAM,QAAQ,OAAO;AAAA,IACpH;AAAA,EACF;AACF;AAEO,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,QAAQ,aAAa,CAAC;AAE5B,SAAO;AAAA,IACL,GAAI,YAAY,SAAU,WAAW,KAAK,IAAe,CAAC;AAAA;AAAA,IAE1D,GAAI,YAAY,cAAc;AAAA,MAC5B,aAAa;AAAA,MACb,aAAa;AAAA,MACb,iBAAiB;AAAA,IACnB;AAAA,IACA,GAAI,YACF,YAAY,cAAc;AAAA,MACxB,iBAAiB,CAAC,UAAiB,MAAM,QAAQ,OAAO;AAAA,IAC1D;AAAA,IACF,WAAW;AAAA,MACT,GAAI,SAAS;AAAA,QACX,WAAW,CAAC,UAAiB,cAAc,IAAI,OAAO,CAAC,aAAa,CAAC;AAAA,QACrE,WAAW,CAAC,UAAiB,YAAY,KAAK;AAAA,MAChD;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,GAAI,SAAS;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,YAAY,OAAO,qBAAqB,GAAI,KAAK,sBAAsB;AAAA,EACzE;AACF;AAEO,IAAM,iBAAiB,CAC5B,MACA,WAEA,QAAQ,MAAM,eAAe,IAAI,IAC7B,MAAM,aAAa,MAAsB;AAAA,EACvC,eAAe;AACjB,CAA4B,IAC5B;","names":[]}

package/dist/{chunk-AHNEEFK6.js → chunk-E5GYHN4X.js} RENAMED Viewed

@@ -12,10 +12,10 @@ import {
 } from "./chunk-7LOCLC24.js";
 import {
   StackedModal
-} from "./chunk-TNVO3EVF.js";
+} from "./chunk-KT3TF2LT.js";
 import {
   StackedModalContent
-} from "./chunk-6A6GZRXD.js";
+} from "./chunk-3VXS7O3X.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -157,4 +157,4 @@ export {
   GridFilterPanel,
   FilterDialog
 };
-//# sourceMappingURL=chunk-AHNEEFK6.js.map
+//# sourceMappingURL=chunk-E5GYHN4X.js.map

package/dist/{chunk-KU6VHNRV.js → chunk-E5I776YW.js} RENAMED Viewed

@@ -49,6 +49,8 @@ var HOVER_LIFT_PX = 1;
 var HOVER_SHADOW = { offsetY: 4, blur: 12, alphaLight: 0.15, alphaDark: 0.3 };
 var CHIP_TRANSITION_MS = 200;
 var CHIP_TRANSITION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+var SOFT_GROUND_ALPHA = 0.14;
+var SOFT_HOVER_ALPHA = 0.22;
 export {
   chipMuiSize,
@@ -63,6 +65,8 @@ export {
   HOVER_LIFT_PX,
   HOVER_SHADOW,
   CHIP_TRANSITION_MS,
-  CHIP_TRANSITION_EASING
+  CHIP_TRANSITION_EASING,
+  SOFT_GROUND_ALPHA,
+  SOFT_HOVER_ALPHA
 };
-//# sourceMappingURL=chunk-KU6VHNRV.js.map
+//# sourceMappingURL=chunk-E5I776YW.js.map

package/dist/{chunk-KU6VHNRV.js.map → chunk-E5I776YW.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/data-display/Chip/Chip.metrics.ts"],"sourcesContent":["import type { ChipSize } from './Chip.base';\n\n/*\n THE NUMBERS BOTH `Chip` RENDERERS DRAW WITH.\n \n Most of them are MUI's own `Chip` geometry rather than anything this package\n * writes — the 32px pill, the 13px label, the 5px/-6px icon tuck — because the\n * web half hands the drawing to `MuiChip` and the native half has to draw it.\n * Restated here once, read by both, so the two cannot disagree about a chip's\n * height. What THIS package adds (`Chip.styles.tsx`'s hover lift, its shadow\n * and its transition) is at the bottom, and the web derives its CSS from it.\n /\n\n/* MUI draws two chip sizes; ours are the house abbreviations for them. /\nexport type ChipMuiSize = 'small' \| 'medium';\n\nexport const chipMuiSize = (size: ChipSize): ChipMuiSize =>\n size === 'xs' \|\| size === 'sm' ? 'small' : 'medium';\n\nexport interface ChipSizeMetrics {\n height: number;\n /* The label's own side padding, filled and outlined (outlined is 1px tighter). /\n labelPadding: number;\n labelPaddingOutlined: number;\n /* The leading icon's box, and how far it tucks under the label. /\n iconSize: number;\n iconMarginLeft: number;\n iconMarginLeftOutlined: number;\n iconMarginRight: number;\n /* The avatar's round box and the type inside it. /\n avatarSize: number;\n avatarFontSize: number;\n avatarMarginLeft: number;\n avatarMarginLeftOutlined: number;\n avatarMarginRight: number;\n /* The delete glyph's box and its own tuck. /\n deleteSize: number;\n deleteMarginLeft: number;\n deleteMarginRight: number;\n deleteMarginRightOutlined: number;\n}\n\nexport const CHIP_SIZES: Record<ChipMuiSize, ChipSizeMetrics> = {\n medium: {\n height: 32,\n labelPadding: 12,\n labelPaddingOutlined: 11,\n iconSize: 24,\n iconMarginLeft: 5,\n iconMarginLeftOutlined: 4,\n iconMarginRight: -6,\n avatarSize: 24,\n avatarFontSize: 12,\n avatarMarginLeft: 5,\n avatarMarginLeftOutlined: 4,\n avatarMarginRight: -6,\n deleteSize: 22,\n deleteMarginLeft: -6,\n deleteMarginRight: 5,\n deleteMarginRightOutlined: 5,\n },\n small: {\n height: 24,\n labelPadding: 8,\n labelPaddingOutlined: 7,\n iconSize: 18,\n iconMarginLeft: 4,\n iconMarginLeftOutlined: 2,\n iconMarginRight: -4,\n avatarSize: 18,\n avatarFontSize: 10,\n avatarMarginLeft: 4,\n avatarMarginLeftOutlined: 2,\n avatarMarginRight: -4,\n deleteSize: 16,\n deleteMarginLeft: -4,\n deleteMarginRight: 4,\n deleteMarginRightOutlined: 3,\n },\n};\n\n/* MUI's `borderRadius: 32 / 2` — a pill at either height, since the box clamps it. /\nexport const CHIP_RADIUS = 16;\n/* The label's type, in px. MUI sets it on the root and the small size keeps it. /\nexport const CHIP_FONT_SIZE = 13;\n/* MUI's `palette.action.disabledOpacity`. /\nexport const CHIP_DISABLED_OPACITY = 0.38;\n/* An outlined chip's hairline: the hue at 0.7, or the grey ramp for `neutral`. /\nexport const OUTLINED_BORDER_ALPHA = 0.7;\n/* The delete glyph over an unaccented chip, and over a coloured one. /\nexport const DELETE_ICON_ALPHA = 0.26;\nexport const DELETE_ICON_ON_COLOR_ALPHA = 0.7;\n/* MUI's `action.hoverOpacity`, the wash a clickable outlined chip takes. /\nexport const OUTLINED_HOVER_ALPHA = 0.04;\n\n/ ── What this package adds on top of MUI's chip ──────────────────────────── /\n\n/* The lift a clickable chip takes on hover, and the shadow under it. */\nexport const HOVER_LIFT_PX = 1;\nexport const HOVER_SHADOW = { offsetY: 4, blur: 12, alphaLight: 0.15, alphaDark: 0.3 } as const;\nexport const CHIP_TRANSITION_MS = 200;\nexport const CHIP_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n"],"mappings":";AAgBO,IAAM,cAAc,CAAC,SAC1B,SAAS,QAAQ,SAAS,OAAO,UAAU;AAyBtC,IAAM,aAAmD;AAAA,EAC9D,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,EAC7B;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,EAC7B;AACF;AAGO,IAAM,cAAc;AAEpB,IAAM,iBAAiB;AAEvB,IAAM,wBAAwB;AAE9B,IAAM,wBAAwB;AAE9B,IAAM,oBAAoB;AAC1B,IAAM,6BAA6B;AAEnC,IAAM,uBAAuB;AAK7B,IAAM,gBAAgB;AACtB,IAAM,eAAe,EAAE,SAAS,GAAG,MAAM,IAAI,YAAY,MAAM,WAAW,IAAI;AAC9E,IAAM,qBAAqB;AAC3B,IAAM,yBAAyB;","names":[]}
1	+ {"version":3,"sources":["../src/components/data-display/Chip/Chip.metrics.ts"],"sourcesContent":["import type { ChipSize } from './Chip.base';\n\n/*\n THE NUMBERS BOTH `Chip` RENDERERS DRAW WITH.\n \n Most of them are MUI's own `Chip` geometry rather than anything this package\n * writes — the 32px pill, the 13px label, the 5px/-6px icon tuck — because the\n * web half hands the drawing to `MuiChip` and the native half has to draw it.\n * Restated here once, read by both, so the two cannot disagree about a chip's\n * height. What THIS package adds (`Chip.styles.tsx`'s hover lift, its shadow\n * and its transition) is at the bottom, and the web derives its CSS from it.\n /\n\n/* MUI draws two chip sizes; ours are the house abbreviations for them. /\nexport type ChipMuiSize = 'small' \| 'medium';\n\nexport const chipMuiSize = (size: ChipSize): ChipMuiSize =>\n size === 'xs' \|\| size === 'sm' ? 'small' : 'medium';\n\nexport interface ChipSizeMetrics {\n height: number;\n /* The label's own side padding, filled and outlined (outlined is 1px tighter). /\n labelPadding: number;\n labelPaddingOutlined: number;\n /* The leading icon's box, and how far it tucks under the label. /\n iconSize: number;\n iconMarginLeft: number;\n iconMarginLeftOutlined: number;\n iconMarginRight: number;\n /* The avatar's round box and the type inside it. /\n avatarSize: number;\n avatarFontSize: number;\n avatarMarginLeft: number;\n avatarMarginLeftOutlined: number;\n avatarMarginRight: number;\n /* The delete glyph's box and its own tuck. /\n deleteSize: number;\n deleteMarginLeft: number;\n deleteMarginRight: number;\n deleteMarginRightOutlined: number;\n}\n\nexport const CHIP_SIZES: Record<ChipMuiSize, ChipSizeMetrics> = {\n medium: {\n height: 32,\n labelPadding: 12,\n labelPaddingOutlined: 11,\n iconSize: 24,\n iconMarginLeft: 5,\n iconMarginLeftOutlined: 4,\n iconMarginRight: -6,\n avatarSize: 24,\n avatarFontSize: 12,\n avatarMarginLeft: 5,\n avatarMarginLeftOutlined: 4,\n avatarMarginRight: -6,\n deleteSize: 22,\n deleteMarginLeft: -6,\n deleteMarginRight: 5,\n deleteMarginRightOutlined: 5,\n },\n small: {\n height: 24,\n labelPadding: 8,\n labelPaddingOutlined: 7,\n iconSize: 18,\n iconMarginLeft: 4,\n iconMarginLeftOutlined: 2,\n iconMarginRight: -4,\n avatarSize: 18,\n avatarFontSize: 10,\n avatarMarginLeft: 4,\n avatarMarginLeftOutlined: 2,\n avatarMarginRight: -4,\n deleteSize: 16,\n deleteMarginLeft: -4,\n deleteMarginRight: 4,\n deleteMarginRightOutlined: 3,\n },\n};\n\n/* MUI's `borderRadius: 32 / 2` — a pill at either height, since the box clamps it. /\nexport const CHIP_RADIUS = 16;\n/* The label's type, in px. MUI sets it on the root and the small size keeps it. /\nexport const CHIP_FONT_SIZE = 13;\n/* MUI's `palette.action.disabledOpacity`. /\nexport const CHIP_DISABLED_OPACITY = 0.38;\n/* An outlined chip's hairline: the hue at 0.7, or the grey ramp for `neutral`. /\nexport const OUTLINED_BORDER_ALPHA = 0.7;\n/* The delete glyph over an unaccented chip, and over a coloured one. /\nexport const DELETE_ICON_ALPHA = 0.26;\nexport const DELETE_ICON_ON_COLOR_ALPHA = 0.7;\n/* MUI's `action.hoverOpacity`, the wash a clickable outlined chip takes. /\nexport const OUTLINED_HOVER_ALPHA = 0.04;\n\n/ ── What this package adds on top of MUI's chip ──────────────────────────── /\n\n/* The lift a clickable chip takes on hover, and the shadow under it. /\nexport const HOVER_LIFT_PX = 1;\nexport const HOVER_SHADOW = { offsetY: 4, blur: 12, alphaLight: 0.15, alphaDark: 0.3 } as const;\nexport const CHIP_TRANSITION_MS = 200;\nexport const CHIP_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/* A soft chip's ground: the colour at this alpha over the page. /\nexport const SOFT_GROUND_ALPHA = 0.14;\n/* A soft chip's hover ground. */\nexport const SOFT_HOVER_ALPHA = 0.22;\n"],"mappings":";AAgBO,IAAM,cAAc,CAAC,SAC1B,SAAS,QAAQ,SAAS,OAAO,UAAU;AAyBtC,IAAM,aAAmD;AAAA,EAC9D,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,EAC7B;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,EAC7B;AACF;AAGO,IAAM,cAAc;AAEpB,IAAM,iBAAiB;AAEvB,IAAM,wBAAwB;AAE9B,IAAM,wBAAwB;AAE9B,IAAM,oBAAoB;AAC1B,IAAM,6BAA6B;AAEnC,IAAM,uBAAuB;AAK7B,IAAM,gBAAgB;AACtB,IAAM,eAAe,EAAE,SAAS,GAAG,MAAM,IAAI,YAAY,MAAM,WAAW,IAAI;AAC9E,IAAM,qBAAqB;AAC3B,IAAM,yBAAyB;AAG/B,IAAM,oBAAoB;AAE1B,IAAM,mBAAmB;","names":[]}

package/dist/{chunk-5RC7WAHH.js → chunk-EZAQIEYB.js} RENAMED Viewed

@@ -13,7 +13,7 @@ import {
 import {
   FilterDialog,
   GridFilterPanel
-} from "./chunk-AHNEEFK6.js";
+} from "./chunk-E5GYHN4X.js";
 import {
   DataViewsPagination
 } from "./chunk-XZFTRGRW.js";
@@ -247,4 +247,4 @@ function GridShell(props) {
 export {
   GridShell
 };
-//# sourceMappingURL=chunk-5RC7WAHH.js.map
+//# sourceMappingURL=chunk-EZAQIEYB.js.map

package/dist/{chunk-SAJDNO43.js → chunk-IGMD6S76.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import {
   SettingSwitchBlock,
   useSettingSwitchIds
-} from "./chunk-7JS2SPRW.js";
+} from "./chunk-LKRXLWCC.js";
 import {
   SettingGroupContext
 } from "./chunk-XJQNSMGA.js";
@@ -10,7 +10,7 @@ import {
 } from "./chunk-SALQ65SM.js";
 import {
   partTestId
-} from "./chunk-OJFE5PK6.js";
+} from "./chunk-ZZO5MRMV.js";
 import {
   dependentsStyles,
   hintStyles,
@@ -84,4 +84,4 @@ SettingGroup.displayName = "SettingGroup";
 export {
   SettingGroup
 };
-//# sourceMappingURL=chunk-SAJDNO43.js.map
+//# sourceMappingURL=chunk-IGMD6S76.js.map

package/dist/{chunk-EZFQO77P.js → chunk-IPYV7BLH.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import {
   SettingSwitchBlock,
   useSettingSwitchIds
-} from "./chunk-7JS2SPRW.js";
+} from "./chunk-LKRXLWCC.js";
 import {
   useSettingGroup
 } from "./chunk-XJQNSMGA.js";
@@ -44,4 +44,4 @@ SettingToggle.displayName = "SettingToggle";
 export {
   SettingToggle
 };
-//# sourceMappingURL=chunk-EZFQO77P.js.map
+//# sourceMappingURL=chunk-IPYV7BLH.js.map

package/dist/{chunk-TNVO3EVF.js → chunk-KT3TF2LT.js} RENAMED Viewed

@@ -2,11 +2,11 @@ import {
   ModalPanelContents,
   modalAriaIds,
   resolveModalContent
-} from "./chunk-6A6GZRXD.js";
+} from "./chunk-3VXS7O3X.js";
 import {
   STYLE_ONLY_PROPS,
   dialogRootStyles
-} from "./chunk-3PGY4UL4.js";
+} from "./chunk-YKQA4NPM.js";
 import {
   usePanelChrome
 } from "./chunk-TSMF7K37.js";
@@ -78,6 +78,7 @@ var StackedModalPanel = (props) => {
     fullScreen,
     maxWidth,
     size,
+    panelWidth,
     disableBackdrop,
     disableFocusTrap,
     keepMounted,
@@ -128,6 +129,7 @@ var StackedModalPanel = (props) => {
       rtl,
       customMaxWidth: maxWidth,
       panelSize: size,
+      panelWidth,
       TransitionComponent: SlideTransition,
       maxWidth,
       disableEscapeKeyDown: !closeOnEsc,
@@ -172,4 +174,4 @@ var StackedModal = (props) => {
 export {
   StackedModal
 };
-//# sourceMappingURL=chunk-TNVO3EVF.js.map
+//# sourceMappingURL=chunk-KT3TF2LT.js.map

package/dist/chunk-KT3TF2LT.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/feedback/StackedModal/StackedModal.tsx"],"sourcesContent":["import Dialog from '@mui/material/Dialog/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport type { TransitionProps } from '@mui/material/transitions/index.js';\nimport type { FC } from 'react';\nimport React, { forwardRef, useEffect, useId } from 'react';\nimport { usePanelChrome } from './StackedModal.hooks';\nimport { modalAriaIds, ModalPanelContents, resolveModalContent } from './StackedModal.parts';\nimport type { PanelStyleProps } from './StackedModal.styles';\nimport { dialogRootStyles, STYLE_ONLY_PROPS } from './StackedModal.styles';\nimport type { StackedModalProps } from './StackedModal.types';\n\nconst StyledDialog = styled(Dialog, {\n shouldForwardProp: (prop) => !STYLE_ONLY_PROPS.includes(prop as string),\n})<PanelStyleProps>(({ theme, ...props }) => dialogRootStyles(theme, props));\n\n/** Panels slide in from the right on every device. */\nconst SlideTransition = forwardRef<HTMLDivElement, TransitionProps>(\n function SlideTransition(props, ref) {\n return (\n <Slide direction=\"left\" ref={ref} {...props}>\n {props.children as React.ReactElement}\n </Slide>\n );\n },\n);\n\nconst DEFAULTS: Partial<StackedModalProps> = {\n open: false,\n glass: false,\n navigationTitle: '',\n closeOnClickOutside: true,\n closeOnEsc: true,\n loading: false,\n loadingText: 'Loading...',\n maxWidth: false,\n disableBackdrop: false,\n disableFocusTrap: false,\n keepMounted: false,\n rtl: false,\n};\n\n/**\n * Fills in the defaults for props the caller left `undefined`. A table plus one\n * loop, rather than a default per destructured prop — each of those is a branch,\n * and fifteen of them put the component over the complexity bar on their own.\n */\nconst withDefaults = (props: StackedModalProps): StackedModalProps => {\n const resolved = { ...props };\n for (const [key, value] of Object.entries(DEFAULTS)) {\n const prop = key as keyof StackedModalProps;\n if (resolved[prop] === undefined) {\n Object.assign(resolved, { [prop]: value });\n }\n }\n return resolved;\n};\n\n/** The modal's props once defaults are applied and its stack identity is settled. */\ntype ResolvedProps = StackedModalProps & { modalId: string };\n\n/**\n * `hideHeader` removes the bar that names the dialog; without an\n * `aria-labelledby` of the caller's own, the dialog has no accessible name.\n */\nconst useUnnamedDialogWarning = (unnamed: boolean): void => {\n useEffect(() => {\n const development = typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';\n if (unnamed && development) {\n // eslint-disable-next-line no-console -- a config warning has no other channel.\n console.warn(\n 'StackedModal: `hideHeader` without `aria-labelledby` leaves the dialog unnamed. ' +\n \"Point `aria-labelledby` at your content header's title.\",\n );\n }\n }, [unnamed]);\n};\n\nconst StackedModalPanel: FC<ResolvedProps> = (props) => {\n const {\n open, onClose, glass, navigationTitle, backLabel, hideClose, hideHeader, children, actions, modalId,\n closeOnClickOutside, closeOnEsc, loading, loadingText, fullScreen, maxWidth, size, panelWidth, disableBackdrop,\n disableFocusTrap, keepMounted, rtl, dataTestId,\n 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps\n } = props;\n\n const {\n dialogRef, modalRole, isAnimating, showSkeleton, zIndex, isMobile, canGoBack, isRoot,\n handleBack, handleClose,\n } = usePanelChrome({\n open, modalId, loading, closeOnEsc, closeOnClickOutside, disableFocusTrap, onClose,\n });\n\n // Don't render if in background (performance optimization)\n if (modalRole === 'background' && !keepMounted) return null;\n\n const { content, modalActions, headerActions, hasMobileActions } = resolveModalContent(\n children,\n actions,\n isMobile,\n );\n const { titleId, descId } = modalAriaIds(modalId, ariaLabelledBy, ariaDescribedBy);\n useUnnamedDialogWarning(Boolean(hideHeader) && !ariaLabelledBy);\n\n return (\n <StyledDialog\n ref={dialogRef}\n open={Boolean(open)}\n onClose={handleClose}\n fullScreen={fullScreen ?? isMobile}\n modalRole={modalRole}\n isAnimating={isAnimating}\n glass={glass}\n rtl={rtl}\n customMaxWidth={maxWidth}\n panelSize={size}\n panelWidth={panelWidth}\n TransitionComponent={SlideTransition}\n maxWidth={maxWidth}\n disableEscapeKeyDown={!closeOnEsc}\n hideBackdrop={disableBackdrop}\n keepMounted={keepMounted}\n aria-labelledby={titleId}\n aria-describedby={descId}\n data-testid={dataTestId}\n sx={{ zIndex }}\n {...otherProps}\n >\n <ModalPanelContents\n backLabel={backLabel}\n showSkeleton={showSkeleton}\n loadingText={loadingText}\n titleId={titleId}\n descId={descId}\n navigationTitle={navigationTitle}\n hideClose={hideClose}\n hideHeader={Boolean(hideHeader) && isRoot}\n canGoBack={canGoBack}\n onBack={handleBack}\n onClose={onClose}\n headerActions={headerActions}\n content={content}\n modalActions={modalActions}\n hasMobileActions={hasMobileActions}\n rtl={rtl}\n dataTestId={dataTestId}\n />\n </StyledDialog>\n );\n};\n\nexport const StackedModal: FC<StackedModalProps> = (props) => {\n // A modal with no caller-supplied id still needs a STABLE one — it keys this\n // panel's entry in the stack, so a value that changed per render (as a\n // `Math.random()` default does) would re-register it on every pass.\n const fallbackId = useId();\n const resolved = withDefaults(props);\n return <StackedModalPanel {...resolved} modalId={resolved.modalId ?? fallbackId} />;\n};\n\n// Re-exported so `./StackedModal` stays the single public entry point for the\n// component and its stack primitives, as the barrel and existing imports expect.\nexport {\n ModalStackProvider,\n ModalStackProvider as StackedModalProvider,\n useModalStack,\n useModalStack as useStackedModal,\n} from './modal-stack';\nexport { StackedModalActions, StackedModalContent } from './StackedModal.parts';\n"],"mappings":"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","names":["SlideTransition"]}

package/dist/{chunk-P3USTYIO.js → chunk-L7HKMTKR.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ZEVFMQAQ.js";
 import {
   DataViewsGrid
-} from "./chunk-QAZLQYSD.js";
+} from "./chunk-6CZC5S6O.js";
 import {
   viewStateKey
 } from "./chunk-ZOLAYP2D.js";
@@ -166,4 +166,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-P3USTYIO.js.map
+//# sourceMappingURL=chunk-L7HKMTKR.js.map

package/dist/{chunk-7JS2SPRW.js → chunk-LKRXLWCC.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 import {
   useSummaryInfo
-} from "./chunk-AAXLQFC7.js";
+} from "./chunk-3FIIMP7I.js";
 import {
   PendingSpinner,
   SaveError,
   SettingHeader,
   partTestId
-} from "./chunk-OJFE5PK6.js";
+} from "./chunk-ZZO5MRMV.js";
 import {
   clampStyles,
   descriptionStyles
@@ -87,4 +87,4 @@ export {
   useSettingSwitchIds,
   SettingSwitchBlock
 };
-//# sourceMappingURL=chunk-7JS2SPRW.js.map
+//# sourceMappingURL=chunk-LKRXLWCC.js.map

package/dist/{chunk-EWTSQTVR.js → chunk-NI67M453.js} RENAMED Viewed

@@ -3,10 +3,10 @@ import {
   chipStyles,
   iconWithTestId,
   makeKeyDownHandler
-} from "./chunk-HYQJJLBC.js";
+} from "./chunk-DHAXUVMR.js";
 import {
   chipMuiSize
-} from "./chunk-KU6VHNRV.js";
+} from "./chunk-E5I776YW.js";
 import {
   chipRole,
   isClickable,
@@ -22,6 +22,7 @@ var muiColorFor = (color) => {
   if (color === "danger") return "error";
   return color === "neutral" ? "default" : color;
 };
+var muiVariantFor = (variant) => variant === "soft" ? "filled" : variant;
 var Chip = forwardRef(({
   label,
   variant = "filled",
@@ -51,7 +52,7 @@ var Chip = forwardRef(({
     {
       ref,
       label: /* @__PURE__ */ jsx("span", { "data-testid": testId("label"), children: label }),
-      variant,
+      variant: muiVariantFor(variant),
       size: chipMuiSize(size),
       color: muiColorFor(color),
       avatar: avatarFor(avatar, avatarSrc),
@@ -66,7 +67,7 @@ var Chip = forwardRef(({
       role: chipRole(selectable, onClick),
       "aria-selected": selectable ? selected : void 0,
       "data-testid": chipId || "chip",
-      sx: chipStyles({ variant, selected, clickable, disabled }),
+      sx: chipStyles({ variant, color, selected, clickable, disabled }),
       ...props
     }
   );
@@ -76,4 +77,4 @@ Chip.displayName = "Chip";
 export {
   Chip
 };
-//# sourceMappingURL=chunk-EWTSQTVR.js.map
+//# sourceMappingURL=chunk-NI67M453.js.map

package/dist/chunk-NI67M453.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Chip/Chip.tsx"],"sourcesContent":["import CancelIcon from '@mui/icons-material/Cancel';\nimport MuiChip from '@mui/material/Chip/index.js';\nimport { forwardRef } from 'react';\n\nimport { chipRole, isClickable, makeTestId } from './Chip.helpers';\nimport { chipMuiSize } from './Chip.metrics';\nimport {\n avatarFor,\n chipStyles,\n iconWithTestId,\n makeKeyDownHandler,\n} from './Chip.styles';\nimport type { ChipProps } from './Chip.types';\n\ntype MuiChipColor =\n | 'primary'\n | 'secondary'\n | 'error'\n | 'info'\n | 'success'\n | 'warning'\n | 'default';\n\n/**\n * `danger` and `neutral` are ours; the rest are MUI's own names already.\n *\n * The same boundary translation `Button` performs, and it must stay a\n * translation rather than a cast: a cast is what let `danger` through untouched\n * and had MUI silently fall back to grey.\n *\n * `neutral` maps to `default`, not to `inherit` as it does on a button. A chip's\n * unaccented state is a real palette entry with its own fill; `inherit` would\n * take the surrounding text colour and paint a chip that reads as disabled.\n */\nconst muiColorFor = (color: NonNullable<ChipProps['color']>): MuiChipColor => {\n if (color === 'danger') return 'error';\n return color === 'neutral' ? 'default' : color;\n};\n\n/** `soft` is ours: MUI has two variants, so it paints as `filled` and `chipStyles` tints it. */\nconst muiVariantFor = (variant: NonNullable<ChipProps['variant']>): 'filled' | 'outlined' =>\n variant === 'soft' ? 'filled' : variant;\n\nexport const Chip = forwardRef<HTMLDivElement, ChipProps>(({\n label,\n variant = 'filled',\n size = 'md',\n color = 'primary',\n avatarSrc,\n avatar,\n icon,\n selected,\n selectable,\n deletable,\n disabled,\n onClick,\n onDelete,\n className,\n dataTestId,\n // React Native's spelling of the same id; it names the component on both\n // sides and must not reach the DOM as an attribute.\n testID,\n ...props\n}, ref) => {\n const chipId = testID ?? dataTestId;\n const testId = makeTestId(chipId);\n const clickable = isClickable(disabled, onClick, selectable);\n\n return (\n <MuiChip\n ref={ref}\n label={<span data-testid={testId('label')}>{label}</span>}\n variant={muiVariantFor(variant)}\n size={chipMuiSize(size)}\n color={muiColorFor(color)}\n avatar={avatarFor(avatar, avatarSrc)}\n icon={iconWithTestId(icon, testId('icon'))}\n onDelete={deletable ? onDelete : undefined}\n deleteIcon={deletable ? <CancelIcon data-testid={testId('delete')} /> : undefined}\n disabled={disabled}\n clickable={clickable}\n onClick={clickable ? onClick : undefined}\n onKeyDown={makeKeyDownHandler({ disabled, deletable, selectable, onClick, onDelete })}\n className={className}\n role={chipRole(selectable, onClick)}\n aria-selected={selectable ? selected : undefined}\n data-testid={chipId || 'chip'}\n sx={chipStyles({ variant, color, selected, clickable, disabled })}\n {...props}\n />\n );\n});\n\nChip.displayName = 'Chip';\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,OAAO,aAAa;AACpB,SAAS,kBAAkB;AAqEd;AArCb,IAAM,cAAc,CAAC,UAAyD;AAC5E,MAAI,UAAU,SAAU,QAAO;AAC/B,SAAO,UAAU,YAAY,YAAY;AAC3C;AAGA,IAAM,gBAAgB,CAAC,YACrB,YAAY,SAAS,WAAW;AAE3B,IAAM,OAAO,WAAsC,CAAC;AAAA,EACzD;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,WAAW,MAAM;AAChC,QAAM,YAAY,YAAY,UAAU,SAAS,UAAU;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,oBAAC,UAAK,eAAa,OAAO,OAAO,GAAI,iBAAM;AAAA,MAClD,SAAS,cAAc,OAAO;AAAA,MAC9B,MAAM,YAAY,IAAI;AAAA,MACtB,OAAO,YAAY,KAAK;AAAA,MACxB,QAAQ,UAAU,QAAQ,SAAS;AAAA,MACnC,MAAM,eAAe,MAAM,OAAO,MAAM,CAAC;AAAA,MACzC,UAAU,YAAY,WAAW;AAAA,MACjC,YAAY,YAAY,oBAAC,cAAW,eAAa,OAAO,QAAQ,GAAG,IAAK;AAAA,MACxE;AAAA,MACA;AAAA,MACA,SAAS,YAAY,UAAU;AAAA,MAC/B,WAAW,mBAAmB,EAAE,UAAU,WAAW,YAAY,SAAS,SAAS,CAAC;AAAA,MACpF;AAAA,MACA,MAAM,SAAS,YAAY,OAAO;AAAA,MAClC,iBAAe,aAAa,WAAW;AAAA,MACvC,eAAa,UAAU;AAAA,MACvB,IAAI,WAAW,EAAE,SAAS,OAAO,UAAU,WAAW,SAAS,CAAC;AAAA,MAC/D,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;","names":[]}

package/dist/{chunk-CMLIWUBW.js → chunk-QPCHABOZ.js} RENAMED Viewed

@@ -52,6 +52,28 @@ var BadgeWrapper = styled(Badge)(({ theme }) => ({
     padding: 0
   }
 }));
+var CountPill = styled("span", {
+  shouldForwardProp: (prop) => prop !== "tone"
+})(({ theme, tone }) => {
+  const look = {
+    neutral: { backgroundColor: theme.palette.action.selected, color: theme.palette.text.secondary },
+    warning: { backgroundColor: alpha(theme.palette.warning.main, 0.16), color: theme.palette.warning.dark },
+    danger: { backgroundColor: theme.palette.error.main, color: theme.palette.error.contrastText }
+  }[tone];
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: rem(theme, 20),
+    minWidth: rem(theme, 20),
+    padding: theme.spacing(0, 0.875),
+    borderRadius: rem(theme, 999),
+    fontSize: rem(theme, 11.5),
+    fontWeight: 600,
+    lineHeight: 1,
+    ...look
+  };
+});
 var TABS_DEFAULTS = {
   variant: "default",
   size: "md",
@@ -119,6 +141,7 @@ var TabLabel = ({ item, closeTabLabel, onClose }) => {
   const content = /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
     item.icon,
     /* @__PURE__ */ jsx("span", { children: item.label }),
+    item.count !== void 0 && /* @__PURE__ */ jsx(CountPill, { tone: item.count.tone ?? "neutral", "data-tone": item.count.tone ?? "neutral", children: item.count.value }),
     item.closable && /* @__PURE__ */ jsx(
       CloseButton,
       {
@@ -250,4 +273,4 @@ Tabs.displayName = "Tabs";
 export {
   Tabs
 };
-//# sourceMappingURL=chunk-CMLIWUBW.js.map
+//# sourceMappingURL=chunk-QPCHABOZ.js.map

package/dist/chunk-QPCHABOZ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport Badge from '@mui/material/Badge/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport MuiTab from '@mui/material/Tab/index.js';\nimport MuiTabs from '@mui/material/Tabs/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { CustomTabPanel } from './TabsPanel';\nimport { tabsRootStyles } from './Tabs.styles';\nimport type { TabCount, TabItem, TabsProps } from './Tabs.types';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst StyledTabs = styled(MuiTabs, {\n shouldForwardProp: (prop) => !['customVariant', 'size', 'showDividers'].includes(prop as string) })<{ customVariant?: string; size?: string; showDividers?: boolean }>(\n ({ theme, customVariant, size, showDividers }) => ({\n ...tabsRootStyles({ theme, customVariant, size, showDividers }) }),\n);\n\nconst CloseButton = styled(Box)(({ theme }) => ({\n marginLeft: theme.spacing(0.5),\n padding: theme.spacing(0.25),\n width: rem(theme, 20),\n height: rem(theme, 20),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer',\n borderRadius: '50%',\n color: theme.palette.action.active,\n '&:hover': {\n backgroundColor: alpha(theme.palette.error.main, 0.1),\n color: theme.palette.error.main } }));\n\nconst BadgeWrapper = styled(Badge)(({ theme }) => ({\n '& .MuiBadge-badge': {\n right: rem(theme, -6),\n top: rem(theme, 4),\n fontSize: rem(theme, 12),\n minWidth: rem(theme, 16),\n height: rem(theme, 16),\n padding: 0 } }));\n\n/** A tab's inline count pill, toned by what it asks for. */\nconst CountPill = styled('span', {\n shouldForwardProp: (prop) => prop !== 'tone',\n})<{ tone: NonNullable<TabCount['tone']> }>(({ theme, tone }) => {\n const look = {\n neutral: { backgroundColor: theme.palette.action.selected, color: theme.palette.text.secondary },\n warning: { backgroundColor: alpha(theme.palette.warning.main, 0.16), color: theme.palette.warning.dark },\n danger: { backgroundColor: theme.palette.error.main, color: theme.palette.error.contrastText },\n }[tone];\n return {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: rem(theme, 20),\n minWidth: rem(theme, 20),\n padding: theme.spacing(0, 0.875),\n borderRadius: rem(theme, 999),\n fontSize: rem(theme, 11.5),\n fontWeight: 600,\n lineHeight: 1,\n ...look,\n };\n});\n\nconst TABS_DEFAULTS: Partial<TabsProps> = {\n variant: 'default',\n size: 'md',\n color: 'primary',\n fullWidth: false,\n orientation: 'horizontal',\n showDividers: false,\n centered: false,\n scrollable: false,\n scrollButtons: 'auto',\n sticky: false,\n stickyOffset: 0,\n animateContent: false,\n animationDuration: 300,\n persistContent: false,\n disabled: false,\n loading: false };\n\n/**\n * The props this component OWNS and MUI's `Tabs` does not understand (12-86).\n *\n * `rest` below is spread onto the DOM node, so anything left in it that React\n * cannot place on an element is reported — five `does not recognize the … prop`\n * warnings and three `Received false for a non-boolean attribute`, on every\n * render, in the browser console and in every host's jsdom output.\n *\n * An explicit list rather than `Object.keys(TABS_DEFAULTS)`, because the two\n * sets differ in both directions: `items`, `closeTabLabel`, `tabPanelProps` and\n * `loadingComponent` have no default and still must not reach the DOM, while\n * `orientation`, `centered` and `indicatorColor` are real MUI props that must.\n * An omission rather than more destructuring, so a prop added to `TabsProps`\n * costs a line here instead of an unused `_name` binding.\n *\n * Deliberately NOT here: `onFocus` and `onBlur`. They are ordinary DOM handlers\n * that reach the element through `rest` and nowhere else, so listing them would\n * silently stop them working.\n */\nconst OWN_PROPS = new Set<string>([\n 'items',\n 'closeTabLabel',\n 'color',\n 'size',\n 'fullWidth',\n 'scrollable',\n 'scrollButtons',\n 'sticky',\n 'stickyOffset',\n 'animateContent',\n 'animationDuration',\n 'persistContent',\n 'tabPanelProps',\n 'loading',\n 'loadingComponent',\n]);\n\n/** `props` with every {@link OWN_PROPS} key dropped — what is left is passthrough. */\nconst domPassthrough = (props: Record<string, unknown>): Record<string, unknown> =>\n Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: TabsProps): Partial<TabsProps> =>\n Object.fromEntries(\n Object.entries(props).filter(([, value]) => value !== undefined),\n ) as Partial<TabsProps>;\n\n// Once the row is scrollable every accepted scrollButtons value ends up as\n// MUI's 'auto'. That is exactly what the previous nested ternary did — it mapped\n// 'on'/'off'/'desktop' to 'auto', and its remaining branch could only ever be\n// 'auto' anyway — so the behaviour is preserved here rather than quietly\n// changed. Worth knowing that scrollButtons=\"off\" therefore still shows buttons.\nconst resolveScrollButtons = (scrollable?: boolean): 'auto' | false =>\n scrollable ? 'auto' : false;\n\nconst buildTabsSx = ({\n fullWidth,\n sticky,\n stickyOffset,\n indicatorColor,\n disabled }: {\n fullWidth?: boolean;\n sticky?: boolean;\n /** The pinned list's `top`, already through the theme (the prop is design px). */\n stickyOffset: (theme: Theme) => string;\n indicatorColor?: string;\n disabled?: boolean;\n}) => ({\n ...(fullWidth && { width: '100%' }),\n // Pin the tab list while panels scroll beneath it. Opaque background + bottom\n // divider so scrolled content does not show through.\n ...(sticky && {\n position: 'sticky',\n top: stickyOffset,\n zIndex: 2,\n backgroundColor: 'background.default',\n borderBottom: 1,\n borderColor: 'divider' }),\n ...(indicatorColor && {\n '& .MuiTabs-indicator': { backgroundColor: indicatorColor } }),\n ...(disabled && { opacity: 0.6, pointerEvents: 'none' }) });\n\n// A tab's label: icon, text, optional close affordance, optionally badged.\nconst TabLabel: React.FC<{\n item: TabItem;\n closeTabLabel: string;\n onClose: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;\n}> = ({ item, closeTabLabel, onClose }) => {\n const content = (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n {item.icon}\n <span>{item.label}</span>\n {item.count !== undefined && (\n <CountPill tone={item.count.tone ?? 'neutral'} data-tone={item.count.tone ?? 'neutral'}>\n {item.count.value}\n </CountPill>\n )}\n {item.closable && (\n <CloseButton\n onClick={(e) => onClose(e, item.id)}\n role=\"button\"\n tabIndex={0}\n aria-label={closeTabLabel}\n onKeyDown={(e) => {\n if (e.key !== 'Enter' && e.key !== ' ') return;\n onClose(e, item.id);\n }}\n >\n <Close fontSize=\"inherit\" />\n </CloseButton>\n )}\n </Box>\n );\n\n if (item.badge === undefined) return content;\n\n return (\n <BadgeWrapper badgeContent={item.badge} color=\"error\">\n {content}\n </BadgeWrapper>\n );\n};\n\ntype ResolvedTabs = TabsProps;\n\n// The tab strip. Kept in this file because StyledTabs cannot cross a module\n// boundary (TS2742).\nconst TabsBar: React.FC<\n ResolvedTabs & {\n rest: Record<string, unknown>;\n onChange: (event: React.SyntheticEvent, newValue: string) => void;\n onCloseTab: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;\n }\n> = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) => (\n <StyledTabs\n {...rest}\n value={value}\n onChange={onChange}\n customVariant={p.variant}\n size={p.size}\n showDividers={p.showDividers}\n orientation={p.orientation}\n centered={p.centered}\n // MUI only scrolls when its own `variant` is `scrollable`; map our\n // `scrollable` flag onto it so overflowing tab rows actually scroll.\n variant={p.scrollable ? 'scrollable' : 'standard'}\n data-testid={dataTestId ? `${dataTestId}-list` : 'tabs-list'}\n scrollButtons={resolveScrollButtons(p.scrollable)}\n allowScrollButtonsMobile={p.scrollable}\n textColor={p.color}\n indicatorColor={p.color}\n sx={buildTabsSx({\n fullWidth: p.fullWidth,\n sticky: p.sticky,\n stickyOffset: sxRem(p.stickyOffset ?? 0),\n indicatorColor: p.indicatorColor,\n disabled: p.disabled })}\n >\n {items.map((item, index) => (\n <MuiTab\n key={item.id}\n value={item.id}\n label={<TabLabel closeTabLabel={p.closeTabLabel} item={item} onClose={onCloseTab} />}\n disabled={item.disabled || p.disabled}\n className={item.className}\n id={`tab-${item.id}`}\n aria-controls={`tabpanel-${item.id}`}\n aria-disabled={item.disabled || p.disabled}\n data-testid={dataTestId ? `${dataTestId}-tab-${index}` : `tabs-tab-${index}`}\n />\n ))}\n </StyledTabs>\n);\n\nconst TabsPanels: React.FC<ResolvedTabs> = ({\n items,\n value,\n variant,\n animateContent,\n animationDuration,\n persistContent,\n loading,\n loadingComponent,\n tabPanelProps,\n dataTestId }) => (\n <Box sx={{ mt: variant === 'enclosed' ? 0 : 2 }}>\n {items.map((item, index) => (\n <CustomTabPanel\n key={item.id}\n id={item.id}\n value={value}\n animate={animateContent}\n animationDuration={animationDuration}\n persist={persistContent}\n loading={loading}\n loadingComponent={loadingComponent}\n className={tabPanelProps?.className}\n dataTestId={dataTestId}\n index={index}\n >\n {item.content}\n </CustomTabPanel>\n ))}\n </Box>\n);\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n (tabsProps, ref) => {\n const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) } as TabsProps;\n const {\n // Destructured only to keep it OUT of `rest`, which is spread onto the\n // DOM node — `{...resolved}` below is what actually carries it to\n // `TabsBar`. Same reason as `value` on the next line.\n closeTabLabel: _closeTabLabel,\n value: _value,\n onChange,\n onTabClose,\n className,\n disabled,\n showDividers,\n variant,\n dataTestId,\n ...rest\n } = resolved;\n\n const handleChange = (event: React.SyntheticEvent, newValue: string) => {\n if (!disabled) onChange(event, newValue);\n };\n\n const handleTabClose = (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => {\n event.stopPropagation();\n onTabClose?.(tabId);\n };\n\n return (\n <Box className={className} ref={ref} data-testid={dataTestId || 'tabs'}>\n <TabsBar\n {...resolved}\n // The destructuring above drops the props this component USES;\n // `domPassthrough` drops the ones it merely OWNS. Both have to go:\n // `rest` is spread onto the DOM node, and the second group is where\n // 12-86's warnings came from.\n rest={domPassthrough(rest as unknown as Record<string, unknown>)}\n onChange={handleChange}\n onCloseTab={handleTabClose}\n />\n\n {showDividers && variant !== 'enclosed' && <Divider />}\n\n <TabsPanels {...resolved} />\n </Box>\n );\n },\n);\n\nTabs.displayName = 'Tabs';\n"],"mappings":"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","names":[]}

package/dist/{chunk-KUFDUXYB.js → chunk-U6ODZJCH.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   partTestId
-} from "./chunk-OJFE5PK6.js";
+} from "./chunk-ZZO5MRMV.js";
 import {
   SETTING_CARD_OPEN_ATTR,
   withCallerSx
@@ -79,4 +79,4 @@ export {
   settingGridStyles,
   SettingGrid
 };
-//# sourceMappingURL=chunk-KUFDUXYB.js.map
+//# sourceMappingURL=chunk-U6ODZJCH.js.map

package/dist/{chunk-3PGY4UL4.js → chunk-YKQA4NPM.js} RENAMED Viewed

@@ -10,7 +10,7 @@ import {
 // src/components/feedback/StackedModal/StackedModal.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
-var STYLE_ONLY_PROPS = ["modalRole", "isAnimating", "glass", "rtl", "customMaxWidth", "panelSize"];
+var STYLE_ONLY_PROPS = ["modalRole", "isAnimating", "glass", "rtl", "customMaxWidth", "panelSize", "panelWidth"];
 var MAX_WIDTH_PX = {
   xs: 444,
   sm: 600,
@@ -26,6 +26,11 @@ var ANIMATION_BY_ROLE = {
   secondary: "expandModal 300ms ease-in-out forwards",
   primary: "contractModal 300ms ease-in-out forwards"
 };
+var EXACT_WIDTH_VAR = "--stacked-modal-width";
+var EXACT_ANIMATION_BY_ROLE = {
+  secondary: "expandModalExact 300ms ease-in-out forwards",
+  primary: "contractModalExact 300ms ease-in-out forwards"
+};
 var WIDE_ANIMATION_BY_ROLE = {
   secondary: "expandModalWide 300ms ease-in-out forwards",
   primary: "contractModalWide 300ms ease-in-out forwards"
@@ -46,6 +51,15 @@ var KEYFRAMES = {
   "@keyframes contractModalWide": {
     from: { width: "100vw", transform: "translateX(0)" },
     to: { width: "90vw", transform: "translateX(0)" }
+  },
+  // An exact-width panel settles at its own width, carried by the custom property.
+  "@keyframes expandModalExact": {
+    from: { width: `var(${EXACT_WIDTH_VAR})`, transform: "translateX(0)" },
+    to: { width: "100vw", transform: "translateX(0)" }
+  },
+  "@keyframes contractModalExact": {
+    from: { width: "100vw", transform: "translateX(0)" },
+    to: { width: `var(${EXACT_WIDTH_VAR})`, transform: "translateX(0)" }
   }
 };
 var cap = (customMaxWidth) => customMaxWidth ? MAX_WIDTH_PX[customMaxWidth] : null;
@@ -67,6 +81,17 @@ var widePrimaryPanelStyles = (theme, capPx) => ({
   [theme.breakpoints.up("xl")]: panelWidth(theme, "75vw", capPx),
   [theme.breakpoints.up(2200)]: panelWidth(theme, "60vw", capPx)
 });
+var exactPrimaryPanelStyles = (theme, exact) => {
+  const width = `min(${exact.share}, ${rem(theme, exact.maxPx)})`;
+  const full = { [EXACT_WIDTH_VAR]: "100%", width: "100%", maxWidth: "100%" };
+  return {
+    [EXACT_WIDTH_VAR]: width,
+    width: `var(${EXACT_WIDTH_VAR})`,
+    maxWidth: `var(${EXACT_WIDTH_VAR})`,
+    [theme.breakpoints.down("sm")]: full,
+    ...exact.fullBelowPx ? { [theme.breakpoints.down(exact.fullBelowPx)]: full } : {}
+  };
+};
 var secondaryPanelStyles = () => ({
   width: "100vw !important",
   maxWidth: "100vw !important",
@@ -77,8 +102,9 @@ var secondaryPanelStyles = () => ({
   opacity: 0.95,
   transform: "scale(1)"
 });
-var rolePanelStyles = (theme, role, capPx, size) => {
+var rolePanelStyles = (theme, role, capPx, size, exact) => {
   if (role === "primary") {
+    if (exact) return exactPrimaryPanelStyles(theme, exact);
     return size === "wide" ? widePrimaryPanelStyles(theme, capPx) : primaryPanelStyles(theme, capPx);
   }
   if (role === "secondary") return secondaryPanelStyles();
@@ -91,8 +117,12 @@ var glassStyles = (theme, glass, role) => glass && role === "primary" ? {
   WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
 } : {};
-var animationStyles = (isAnimating, role, size) => {
-  const byRole = size === "wide" ? WIDE_ANIMATION_BY_ROLE : ANIMATION_BY_ROLE;
+var animationByRole = (size, exact) => {
+  if (exact) return EXACT_ANIMATION_BY_ROLE;
+  return size === "wide" ? WIDE_ANIMATION_BY_ROLE : ANIMATION_BY_ROLE;
+};
+var animationStyles = (isAnimating, role, size, exact) => {
+  const byRole = animationByRole(size, exact);
   return isAnimating ? { animation: (role && byRole[role]) ?? "none" } : {};
 };
 var panelBaseStyles = (theme) => ({
@@ -115,9 +145,9 @@ var panelStyles = (theme, props) => {
   const capPx = cap(props.customMaxWidth);
   return {
     ...panelBaseStyles(theme),
-    ...rolePanelStyles(theme, props.modalRole, capPx, props.panelSize),
+    ...rolePanelStyles(theme, props.modalRole, capPx, props.panelSize, props.panelWidth),
     ...glassStyles(theme, props.glass, props.modalRole),
-    ...animationStyles(props.isAnimating, props.modalRole, props.panelSize)
+    ...animationStyles(props.isAnimating, props.modalRole, props.panelSize, props.panelWidth)
   };
 };
 var dialogRootStyles = (theme, props) => ({
@@ -183,4 +213,4 @@ export {
   loadingOverlayStyles,
   modalContentStyles
 };
-//# sourceMappingURL=chunk-3PGY4UL4.js.map
+//# sourceMappingURL=chunk-YKQA4NPM.js.map

package/dist/chunk-YKQA4NPM.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/feedback/StackedModal/StackedModal.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { scrim } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\nimport { dynamicViewportHeight } from '../../../utils/viewport';\nimport type { ModalPanelRole, PanelMaxWidth, PanelSize, PanelWidth } from './StackedModal.types';\n\n/** Props that drive the panel's look but must not reach the DOM. */\nexport interface PanelStyleProps {\n modalRole?: ModalPanelRole;\n isAnimating?: boolean;\n glass?: boolean;\n rtl?: boolean;\n customMaxWidth?: PanelMaxWidth;\n panelSize?: PanelSize;\n panelWidth?: PanelWidth;\n}\n\n/** Style-only props, filtered out before they can land on a DOM node. */\nexport const STYLE_ONLY_PROPS = ['modalRole', 'isAnimating', 'glass', 'rtl', 'customMaxWidth', 'panelSize', 'panelWidth'];\n\n/** MUI breakpoint names mapped to the pixel width they cap the panel at. */\nconst MAX_WIDTH_PX: Record<Exclude<PanelMaxWidth, false>, number> = {\n xs: 444,\n sm: 600,\n md: 960,\n lg: 1280,\n xl: 1920,\n};\n\n/** The scrim's opacity behind each receding panel role. */\nconst BACKDROP_ALPHA_BY_ROLE: Partial<Record<ModalPanelRole, number>> = {\n secondary: 0.3,\n background: 0.1,\n};\n\nconst ANIMATION_BY_ROLE: Partial<Record<ModalPanelRole, string>> = {\n secondary: 'expandModal 300ms ease-in-out forwards',\n primary: 'contractModal 300ms ease-in-out forwards',\n};\n\n/** The custom property an exact-width panel's width and keyframes share. */\nconst EXACT_WIDTH_VAR = '--stacked-modal-width';\n\n/** An exact-width panel settles at its own width, so its keyframes read it too. */\nconst EXACT_ANIMATION_BY_ROLE: Partial<Record<ModalPanelRole, string>> = {\n secondary: 'expandModalExact 300ms ease-in-out forwards',\n primary: 'contractModalExact 300ms ease-in-out forwards',\n};\n\n/** A wide panel settles at 90vw, so its keyframes must end there too, or it snaps. */\nconst WIDE_ANIMATION_BY_ROLE: Partial<Record<ModalPanelRole, string>> = {\n secondary: 'expandModalWide 300ms ease-in-out forwards',\n primary: 'contractModalWide 300ms ease-in-out forwards',\n};\n\n// Animation endpoints use the common lg width (60vw); the role styles set the\n// exact per-breakpoint width once the animation settles.\nconst KEYFRAMES: CSSObject = {\n '@keyframes expandModal': {\n from: { width: '60vw', transform: 'translateX(0)' },\n to: { width: '100vw', transform: 'translateX(0)' },\n },\n '@keyframes contractModal': {\n from: { width: '100vw', transform: 'translateX(0)' },\n to: { width: '60vw', transform: 'translateX(0)' },\n },\n '@keyframes expandModalWide': {\n from: { width: '90vw', transform: 'translateX(0)' },\n to: { width: '100vw', transform: 'translateX(0)' },\n },\n '@keyframes contractModalWide': {\n from: { width: '100vw', transform: 'translateX(0)' },\n to: { width: '90vw', transform: 'translateX(0)' },\n },\n // An exact-width panel settles at its own width, carried by the custom property.\n '@keyframes expandModalExact': {\n from: { width: `var(${EXACT_WIDTH_VAR})`, transform: 'translateX(0)' },\n to: { width: '100vw', transform: 'translateX(0)' },\n },\n '@keyframes contractModalExact': {\n from: { width: '100vw', transform: 'translateX(0)' },\n to: { width: `var(${EXACT_WIDTH_VAR})`, transform: 'translateX(0)' },\n },\n};\n\nconst cap = (customMaxWidth?: PanelMaxWidth): number | null =>\n customMaxWidth ? MAX_WIDTH_PX[customMaxWidth] : null;\n\n/** One breakpoint's width: the viewport share, held under the optional px cap. */\nconst panelWidth = (theme: Theme, share: string, capPx: number | null): CSSObject =>\n capPx\n ? { width: `min(${share}, ${rem(theme, capPx)})`, maxWidth: rem(theme, capPx) }\n : { width: share, maxWidth: share };\n\nconst backdropStyles = (theme: Theme, modalRole?: ModalPanelRole): CSSObject => ({\n backgroundColor: scrim(theme, (modalRole && BACKDROP_ALPHA_BY_ROLE[modalRole]) ?? 0.5),\n backdropFilter: modalRole === 'primary' ? `blur(${rem(theme, 4)})` : 'none',\n});\n\n/**\n * The top panel is viewport-aware and narrows as the screen grows: full width on\n * mobile, 80vw on tablet/small desktop, 60vw on regular desktops (lg up —\n * including ~1080p/1440p/1080-wide), and 40vw only on ultra-wide screens\n * (≥2200px) so the receding panel stays visible on huge monitors. A `maxWidth`\n * prop, when given, caps it further.\n */\nconst primaryPanelStyles = (theme: Theme, capPx: number | null): CSSObject => ({\n [theme.breakpoints.down('sm')]: panelWidth(theme, '100%', capPx),\n [theme.breakpoints.between('sm', 'lg')]: panelWidth(theme, '80vw', capPx),\n [theme.breakpoints.up('lg')]: panelWidth(theme, '60vw', capPx),\n // A viewport width, in the theme's breakpoint unit like the three above.\n [theme.breakpoints.up(2200)]: panelWidth(theme, '40vw', capPx),\n});\n\n/**\n * `size=\"wide\"`: 90vw up to `xl`, 75vw above it, 60vw on ultra-wide screens.\n * At 1280 that is ~1150px instead of 768px — room for a form column beside a\n * fixed ~350px sidebar — while a sliver of the page behind stays visible.\n */\nconst widePrimaryPanelStyles = (theme: Theme, capPx: number | null): CSSObject => ({\n [theme.breakpoints.down('sm')]: panelWidth(theme, '100%', capPx),\n [theme.breakpoints.between('sm', 'xl')]: panelWidth(theme, '90vw', capPx),\n [theme.breakpoints.up('xl')]: panelWidth(theme, '75vw', capPx),\n [theme.breakpoints.up(2200)]: panelWidth(theme, '60vw', capPx),\n});\n\n/**\n * `panelWidth`: `min(share, maxPx)` from `sm` up, the whole screen under `sm`\n * and under `fullBelowPx`. Viewport media queries only — never the panel's size.\n */\nconst exactPrimaryPanelStyles = (theme: Theme, exact: PanelWidth): CSSObject => {\n const width = `min(${exact.share}, ${rem(theme, exact.maxPx)})`;\n const full = { [EXACT_WIDTH_VAR]: '100%', width: '100%', maxWidth: '100%' };\n return {\n [EXACT_WIDTH_VAR]: width,\n width: `var(${EXACT_WIDTH_VAR})`,\n maxWidth: `var(${EXACT_WIDTH_VAR})`,\n [theme.breakpoints.down('sm')]: full,\n ...(exact.fullBelowPx ? { [theme.breakpoints.down(exact.fullBelowPx)]: full } : {}),\n };\n};\n\n/** Panels below the top one expand to full width, producing the GTM stacking effect. */\nconst secondaryPanelStyles = (): CSSObject => ({\n width: '100vw !important',\n maxWidth: '100vw !important',\n right: '0 !important',\n top: '0 !important',\n ...dynamicViewportHeight('height', 'maxHeight'),\n borderRadius: '0 !important',\n opacity: 0.95,\n transform: 'scale(1)',\n});\n\nconst rolePanelStyles = (\n theme: Theme,\n role: ModalPanelRole | undefined,\n capPx: number | null,\n size?: PanelSize,\n exact?: PanelWidth,\n): CSSObject => {\n if (role === 'primary') {\n if (exact) return exactPrimaryPanelStyles(theme, exact);\n return size === 'wide' ? widePrimaryPanelStyles(theme, capPx) : primaryPanelStyles(theme, capPx);\n }\n if (role === 'secondary') return secondaryPanelStyles();\n // Background modals stay mounted but hidden, for performance.\n if (role === 'background') return { display: 'none' };\n return {};\n};\n\nconst glassStyles = (theme: Theme, glass?: boolean, role?: ModalPanelRole): CSSObject =>\n glass && role === 'primary'\n ? {\n backgroundColor: alpha(theme.palette.background.paper, 0.85),\n backdropFilter: `blur(${rem(theme, 10)})`,\n WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n }\n : {};\n\nconst animationByRole = (size?: PanelSize, exact?: PanelWidth): Partial<Record<ModalPanelRole, string>> => {\n if (exact) return EXACT_ANIMATION_BY_ROLE;\n return size === 'wide' ? WIDE_ANIMATION_BY_ROLE : ANIMATION_BY_ROLE;\n};\n\nconst animationStyles = (\n isAnimating?: boolean,\n role?: ModalPanelRole,\n size?: PanelSize,\n exact?: PanelWidth,\n): CSSObject => {\n const byRole = animationByRole(size, exact);\n return isAnimating ? { animation: (role && byRole[role]) ?? 'none' } : {};\n};\n\nconst panelBaseStyles = (theme: Theme): CSSObject => ({\n margin: 0,\n position: 'fixed',\n right: 0,\n top: 0,\n // Pinned to the DYNAMIC viewport: on iOS a `100vh` panel runs underneath the\n // browser toolbar, which parks the tail of the scroll area (the submit row)\n // out of reach. See `dynamicViewportHeight`.\n ...dynamicViewportHeight('height', 'maxHeight'),\n borderRadius: 0,\n willChange: 'transform, width, border-radius',\n transition: theme.transitions.create(\n ['width', 'max-width', 'border-radius', 'transform', 'opacity'],\n { duration: 300, easing: theme.transitions.easing.easeInOut },\n ),\n});\n\nconst panelStyles = (theme: Theme, props: PanelStyleProps): CSSObject => {\n const capPx = cap(props.customMaxWidth);\n return {\n ...panelBaseStyles(theme),\n ...rolePanelStyles(theme, props.modalRole, capPx, props.panelSize, props.panelWidth),\n ...glassStyles(theme, props.glass, props.modalRole),\n ...animationStyles(props.isAnimating, props.modalRole, props.panelSize, props.panelWidth),\n };\n};\n\n/** The full rule set for the sliding panel's Dialog root. */\nexport const dialogRootStyles = (theme: Theme, props: PanelStyleProps): CSSObject => ({\n direction: props.rtl ? 'rtl' : 'ltr',\n // The dialog's OWN backdrop only: a descendant selector also reached the\n // backdrop of any sheet or drawer rendered inside the panel, and blurred the\n // very panel that sheet sits on.\n '& > .MuiBackdrop-root': backdropStyles(theme, props.modalRole),\n '& .MuiDialog-container': { alignItems: 'flex-start', justifyContent: 'flex-end' },\n '& .MuiDialog-paper': panelStyles(theme, props),\n ...KEYFRAMES,\n});\n\nexport const titleStyles = (theme: Theme, rtl?: boolean): CSSObject => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: theme.spacing(2, 2.5),\n borderBottom: `1px solid ${theme.palette.divider}`,\n direction: rtl ? 'rtl' : 'ltr',\n});\n\nexport const titleLeftStyles = (theme: Theme): CSSObject => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1.5),\n flex: 1,\n});\n\nexport const titleRightStyles = (theme: Theme): CSSObject => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n});\n\nexport const loadingOverlayStyles = (theme: Theme): CSSObject => ({\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: alpha(theme.palette.background.paper, 0.8),\n zIndex: 9999,\n});\n\nexport const modalContentStyles = (theme: Theme): CSSObject => ({\n padding: theme.spacing(3),\n // MUI's DialogContent defaults to `overflow-y: auto`, but inside a panel it is\n // NOT the element that scrolls — ModalBody above it is, and this box always\n // ends up exactly as tall as its own content. A scroll container that never\n // scrolls is still the containing block for every `position: sticky`\n // descendant, so a sticky header anchored here gets zero travel and rides the\n // content out of view: sticky, and pinned to nothing. Handing the overflow\n // back to ModalBody makes the panel's own scroller the anchor.\n overflowY: 'visible',\n});\n"],"mappings":"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","names":[]}

package/dist/{chunk-XMVPNCYM.js → chunk-YQGVO3ZU.js} RENAMED Viewed

@@ -3,14 +3,14 @@ import {
 } from "./chunk-SALQ65SM.js";
 import {
   useSummaryInfo
-} from "./chunk-AAXLQFC7.js";
+} from "./chunk-3FIIMP7I.js";
 import {
   LearnMore,
   PendingSpinner,
   SaveError,
   SettingHeader,
   partTestId
-} from "./chunk-OJFE5PK6.js";
+} from "./chunk-ZZO5MRMV.js";
 import {
   SETTING_CARD_OPEN_ATTR,
   actionsStyles,
@@ -170,4 +170,4 @@ SettingCard.displayName = "SettingCard";
 export {
   SettingCard
 };
-//# sourceMappingURL=chunk-XMVPNCYM.js.map
+//# sourceMappingURL=chunk-YQGVO3ZU.js.map

package/dist/{chunk-OJFE5PK6.js → chunk-ZZO5MRMV.js} RENAMED Viewed

@@ -12,7 +12,7 @@ import {
 } from "./chunk-JYWF76Z5.js";
 import {
   Chip
-} from "./chunk-EWTSQTVR.js";
+} from "./chunk-NI67M453.js";
 import {
   Icon
 } from "./chunk-SEWUYHSG.js";
@@ -139,4 +139,4 @@ export {
   PendingSpinner,
   LearnMore
 };
-//# sourceMappingURL=chunk-OJFE5PK6.js.map
+//# sourceMappingURL=chunk-ZZO5MRMV.js.map