@12-apps/ui 6.35.0 → 6.36.0

package/dist/{chunk-VAGHW3K2.js → chunk-KREWQAEV.js}

@@ -1,9 +1,13 @@
 import {
   Text
 } from "./chunk-WTOYEWW6.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/DescriptionItem/DescriptionItem.tsx
 import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var FLEX_ALIGN = { start: "flex-start", center: "center", end: "flex-end" };
 var containerSx = (isHorizontal, align) => ({
@@ -16,9 +20,9 @@ var containerSx = (isHorizontal, align) => ({
   // inside a box the alignment had already centred.
   textAlign: align
 });
-var labelStyle = (isHorizontal) => ({
+var labelStyle = (theme, isHorizontal) => ({
   textTransform: "uppercase",
-  marginBottom: isHorizontal ? 0 : "0.25rem",
+  marginBottom: isHorizontal ? 0 : rem(theme, 4),
   minWidth: isHorizontal ? "fit-content" : void 0,
   flexShrink: isHorizontal ? 0 : void 0
 });
@@ -31,6 +35,7 @@ var DescriptionItem = ({
   className,
   "data-testid": dataTestId
 }) => {
+  const theme = useTheme();
   const isHorizontal = orientation === "horizontal";
   const testId = makeTestId(dataTestId);
   return /* @__PURE__ */ jsxs(
@@ -46,7 +51,7 @@ var DescriptionItem = ({
             variant: "caption",
             size: "xs",
             color: "secondary",
-            style: labelStyle(isHorizontal),
+            style: labelStyle(theme, isHorizontal),
             "data-testid": testId("label"),
             children: label
           }
@@ -61,4 +66,4 @@ DescriptionItem.displayName = "DescriptionItem";
 export {
   DescriptionItem
 };
-//# sourceMappingURL=chunk-VAGHW3K2.js.map
+//# sourceMappingURL=chunk-KREWQAEV.js.map

package/dist/chunk-KREWQAEV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DescriptionItem/DescriptionItem.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport type { ReactNode } from 'react';\n\nimport { rem } from '../../../tokens/relative';\nimport { Text } from '../../typography/Text/Text';\n\nexport interface DescriptionItemProps {\n  /**\n   * The label text to display\n   */\n  label: string;\n\n  /**\n   * The value to display - can be text, number, or any React node\n   */\n  value: ReactNode;\n\n  /**\n   * Layout orientation\n   * - `vertical`: Label above value (default)\n   * - `horizontal`: Label and value side by side\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * Which edge the label and value line up on.\n   *\n   * - `start` (default): both flush left, the reading order for a form or a\n   *   description list.\n   * - `center`: both centred over each other — for a pair sitting in a column\n   *   of its own, where a left-flush label over a shorter value looks unhinged\n   *   from it.\n   * - `end`: both flush right, which is what a numeric column wants so its\n   *   digits line up with the value above and below.\n   *\n   * Applies to `vertical`; a `horizontal` pair is already a single line.\n   */\n  align?: 'start' | 'center' | 'end';\n\n  /**\n   * Optional CSS class name\n   */\n  className?: string;\n\n  /**\n   * Test ID for testing purposes\n   */\n  'data-testid'?: string;\n}\n\n/**\n * DescriptionItem - A label-value pair component for displaying read-only information\n *\n * Used for displaying structured metadata, properties, or descriptive information\n * in a consistent vertical layout with a label above the value.\n *\n * @example\n * ```tsx\n * <DescriptionItem\n *   label=\"Incident ID\"\n *   value=\"INC-12345\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * <DescriptionItem\n *   label=\"Status\"\n *   value={<Chip label=\"Active\" color=\"success\" />}\n * />\n * ```\n */\n/** `align` in the terms flexbox and CSS each want it. */\nconst FLEX_ALIGN = { start: 'flex-start', center: 'center', end: 'flex-end' } as const;\n\n// Vertical stacks the label above the value; horizontal sets them side by side\n// with the label sized to its content.\nconst containerSx = (isHorizontal: boolean, align: 'start' | 'center' | 'end') => ({\n  display: 'flex',\n  flexDirection: isHorizontal ? ('row' as const) : ('column' as const),\n  alignItems: isHorizontal ? 'center' : FLEX_ALIGN[align],\n  gap: isHorizontal ? 1 : 0,\n  // `alignItems` places the two boxes; `textAlign` handles a label or value\n  // that WRAPS, whose second line would otherwise fall back to flush-left\n  // inside a box the alignment had already centred.\n  textAlign: align,\n});\n\nconst labelStyle = (theme: Theme, isHorizontal: boolean) => ({\n  textTransform: 'uppercase' as const,\n  marginBottom: isHorizontal ? 0 : rem(theme, 4),\n  minWidth: isHorizontal ? ('fit-content' as const) : undefined,\n  flexShrink: isHorizontal ? 0 : undefined,\n});\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `description-item-${suffix}`;\n\nexport const DescriptionItem: React.FC<DescriptionItemProps> = ({\n  label,\n  value,\n  orientation = 'vertical',\n  align = 'start',\n  className,\n  'data-testid': dataTestId,\n}) => {\n  const theme = useTheme();\n  const isHorizontal = orientation === 'horizontal';\n  const testId = makeTestId(dataTestId);\n\n  return (\n    <Box\n      className={className}\n      sx={containerSx(isHorizontal, align)}\n      data-testid={dataTestId || 'description-item'}\n    >\n      <Text\n        variant=\"caption\"\n        size=\"xs\"\n        color=\"secondary\"\n        style={labelStyle(theme, isHorizontal)}\n        data-testid={testId('label')}\n      >\n        {label}\n      </Text>\n      <Box data-testid={testId('value')}>\n        {/* Plain text gets the component's own typography; anything else is\n            rendered as given. */}\n        {typeof value === 'string' || typeof value === 'number' ? (\n          <Text variant=\"body\" size=\"sm\" weight=\"semibold\">\n            {value}\n          </Text>\n        ) : (\n          value\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nDescriptionItem.displayName = 'DescriptionItem';\n"],"mappings":";;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAA4B;AAiHjC,SAKE,KALF;AAxCJ,IAAM,aAAa,EAAE,OAAO,cAAc,QAAQ,UAAU,KAAK,WAAW;AAI5E,IAAM,cAAc,CAAC,cAAuB,WAAuC;AAAA,EACjF,SAAS;AAAA,EACT,eAAe,eAAgB,QAAmB;AAAA,EAClD,YAAY,eAAe,WAAW,WAAW,KAAK;AAAA,EACtD,KAAK,eAAe,IAAI;AAAA;AAAA;AAAA;AAAA,EAIxB,WAAW;AACb;AAEA,IAAM,aAAa,CAAC,OAAc,kBAA2B;AAAA,EAC3D,eAAe;AAAA,EACf,cAAc,eAAe,IAAI,IAAI,OAAO,CAAC;AAAA,EAC7C,UAAU,eAAgB,gBAA0B;AAAA,EACpD,YAAY,eAAe,IAAI;AACjC;AAEA,IAAM,aACJ,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,oBAAoB,MAAM;AAEhE,IAAM,kBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,gBAAgB;AACrC,QAAM,SAAS,WAAW,UAAU;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,YAAY,cAAc,KAAK;AAAA,MACnC,eAAa,cAAc;AAAA,MAE3B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,YACN,OAAO,WAAW,OAAO,YAAY;AAAA,YACrC,eAAa,OAAO,OAAO;AAAA,YAE1B;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,OAAI,eAAa,OAAO,OAAO,GAG7B,iBAAO,UAAU,YAAY,OAAO,UAAU,WAC7C,oBAAC,QAAK,SAAQ,QAAO,MAAK,MAAK,QAAO,YACnC,iBACH,IAEA,OAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,cAAc;","names":[]}

package/dist/{chunk-KE5MX4PI.js → chunk-L3B36HA5.js}

@@ -1,6 +1,6 @@
 import {
   Sheet
-} from "./chunk-DBCITC4P.js";
+} from "./chunk-QB3TVUPD.js";
 import {
   Dialog
 } from "./chunk-L4UP5VYS.js";
@@ -162,4 +162,4 @@ AppHeaderDetails.displayName = "AppHeaderDetails";
 export {
   AppHeaderDetails
 };
-//# sourceMappingURL=chunk-KE5MX4PI.js.map
+//# sourceMappingURL=chunk-L3B36HA5.js.map

package/dist/{chunk-OLZTGVBT.js → chunk-LYVTJLCF.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-CRN4KKNI.js";
 import {
   SPRING_CONFIG
-} from "./chunk-F52N6ACD.js";
+} from "./chunk-IM4DMKH4.js";
 
 // src/components/data-display/Sheet/Sheet.hooks.ts
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -213,4 +213,4 @@ export {
   useSheetDrag,
   useSheetOpen
 };
-//# sourceMappingURL=chunk-OLZTGVBT.js.map
+//# sourceMappingURL=chunk-LYVTJLCF.js.map

package/dist/{chunk-4M34ALEP.js → chunk-M3MHYE2M.js}

@@ -1,15 +1,16 @@
 import {
-  containerStyles
-} from "./chunk-H6YVO55T.js";
+  containerStyles,
+  frameBox
+} from "./chunk-OHZU4IT3.js";
 import {
   CarouselTrack
-} from "./chunk-CZT3AV7I.js";
+} from "./chunk-TRHWA74K.js";
 import {
   useCarouselNavigation
 } from "./chunk-RUIV5TVA.js";
 import {
   CarouselChrome
-} from "./chunk-OYP27CYE.js";
+} from "./chunk-WOAXKWAB.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -42,7 +43,6 @@ var DEFAULTS = {
   gradient: false,
   loading: false,
   disabled: false,
-  height: 400,
   width: "100%",
   pauseOnHover: true,
   indicatorPosition: "bottom",
@@ -101,8 +101,7 @@ var Carousel = (props) => {
     variant,
     size,
     color,
-    height,
-    width,
+    ...frameBox(theme, size, height, width),
     glow,
     pulse,
     glass,
@@ -152,4 +151,4 @@ var Carousel = (props) => {
 export {
   Carousel
 };
-//# sourceMappingURL=chunk-4M34ALEP.js.map
+//# sourceMappingURL=chunk-M3MHYE2M.js.map

package/dist/chunk-M3MHYE2M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport Zoom from '@mui/material/Zoom/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React, { useCallback, useRef } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { useCarouselNavigation } from './Carousel.hooks';\nimport { CarouselChrome } from './Carousel.chrome';\nimport { CarouselTrack } from './Carousel.slide';\nimport { containerStyles, frameBox } from './Carousel.styles';\nimport type { CarouselItem, CarouselProps } from './Carousel.types';\nimport { muiColor } from '../../../tokens/scales';\n\nexport { CarouselArrows, CarouselIndicators, CarouselThumbnails } from './Carousel.parts';\n\nconst DEFAULTS = {\n  variant: 'default',\n  size: 'md',\n  color: 'primary',\n  autoPlay: false,\n  autoPlayInterval: 3000,\n  loop: true,\n  showIndicators: true,\n  showArrows: true,\n  showThumbnails: false,\n  glow: false,\n  pulse: false,\n  glass: false,\n  gradient: false,\n  loading: false,\n  disabled: false,\n  width: '100%',\n  pauseOnHover: true,\n  indicatorPosition: 'bottom',\n  arrowPosition: 'overlay',\n  animation: 'slide',\n} satisfies Partial<CarouselProps>;\n\ntype ResolvedCarouselProps = CarouselProps & Required<Pick<CarouselProps, keyof typeof DEFAULTS>>;\n\n/**\n * `flip` reuses Slide with a fixed direction — MUI has no flip transition, and a\n * slide from one side reads closer to a flip than a fade does.\n */\nconst TRANSITIONS = { fade: Fade, zoom: Zoom, flip: Slide, slide: Slide } as const;\n\nexport const Carousel: React.FC<CarouselProps> = (props) => {\n  const resolved = withDefaults(props, DEFAULTS) as ResolvedCarouselProps;\n  const {\n    items, variant, size, color, autoPlay, autoPlayInterval, loop, loading, disabled,\n    className, style, height, width, pauseOnHover, onClick, onChange, onFocus, onBlur,\n    animation, glow, pulse, glass, gradient,\n  } = resolved;\n\n  const theme = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const { activeIndex, handleNext, handlePrev, handleSelect, hoverProps } = useCarouselNavigation({\n    count: items.length,\n    loop,\n    autoPlay,\n    autoPlayInterval,\n    pauseOnHover,\n    disabled,\n    onChange,\n  });\n\n  const handleItemClick = useCallback(\n    (item: CarouselItem, index: number) => {\n      if (!disabled) {\n        onClick?.(item, index);\n      }\n    },\n    [disabled, onClick],\n  );\n\n  const frameSx = containerStyles({\n    theme, variant, size, color, ...frameBox(theme, size, height, width), glow, pulse, glass, gradient,\n  });\n\n  if (loading) {\n    return (\n      <Box sx={{ ...frameSx, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>\n        <CircularProgress color={muiColor(color, 'inherit')} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      ref={containerRef}\n      className={className}\n      data-testid=\"carousel-container\"\n      sx={{ ...frameSx, ...style }}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      {...hoverProps}\n    >\n      <CarouselTrack\n        items={items}\n        activeIndex={activeIndex}\n        variant={variant}\n        animation={animation}\n        transition={TRANSITIONS[animation] ?? Slide}\n        clickable={Boolean(onClick)}\n        onSelect={handleItemClick}\n      />\n\n      <CarouselChrome\n        {...resolved}\n        activeIndex={activeIndex}\n        onPrev={handlePrev}\n        onNext={handleNext}\n        onSelect={handleSelect}\n      />\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,UAAU;AACjB,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAgB,aAAa,cAAc;AAiFnC,cAMJ,YANI;AApER,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,WAAW;AACb;AAQA,IAAM,cAAc,EAAE,MAAM,MAAM,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM;AAEjE,IAAM,WAAoC,CAAC,UAAU;AAC1D,QAAM,WAAW,aAAa,OAAO,QAAQ;AAC7C,QAAM;AAAA,IACJ;AAAA,IAAO;AAAA,IAAS;AAAA,IAAM;AAAA,IAAO;AAAA,IAAU;AAAA,IAAkB;AAAA,IAAM;AAAA,IAAS;AAAA,IACxE;AAAA,IAAW;AAAA,IAAO;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAc;AAAA,IAAS;AAAA,IAAU;AAAA,IAAS;AAAA,IAC3E;AAAA,IAAW;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,EACjC,IAAI;AAEJ,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,EAAE,aAAa,YAAY,YAAY,cAAc,WAAW,IAAI,sBAAsB;AAAA,IAC9F,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAoB,UAAkB;AACrC,UAAI,CAAC,UAAU;AACb,kBAAU,MAAM,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AAEA,QAAM,UAAU,gBAAgB;AAAA,IAC9B;AAAA,IAAO;AAAA,IAAS;AAAA,IAAM;AAAA,IAAO,GAAG,SAAS,OAAO,MAAM,QAAQ,KAAK;AAAA,IAAG;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,EAC5F,CAAC;AAED,MAAI,SAAS;AACX,WACE,oBAAC,OAAI,IAAI,EAAE,GAAG,SAAS,SAAS,QAAQ,gBAAgB,UAAU,YAAY,SAAS,GACrF,8BAAC,oBAAiB,OAAO,SAAS,OAAO,SAAS,GAAG,GACvD;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,eAAY;AAAA,MACZ,IAAI,EAAE,GAAG,SAAS,GAAG,MAAM;AAAA,MAC3B;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,YAAY,SAAS,KAAK;AAAA,YACtC,WAAW,QAAQ,OAAO;AAAA,YAC1B,UAAU;AAAA;AAAA,QACZ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ;AAAA,YACA,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,UAAU;AAAA;AAAA,QACZ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -15,7 +15,8 @@ import {
   sheen
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Badge/Badge.variants.ts
@@ -28,7 +29,7 @@ var BADGE_VARIANTS = {
     height: sizeStyles.height,
     fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
-    borderRadius: sizeStyles.height / 2
+    borderRadius: sizeStyles.pillRadius
   }),
   dot: (theme, colorPalette, sizeStyles) => ({
     backgroundColor: colorPalette.main,
@@ -54,30 +55,30 @@ var BADGE_VARIANTS = {
     height: sizeStyles.height,
     fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
-    borderRadius: sizeStyles.height / 2
+    borderRadius: sizeStyles.pillRadius
   }),
   glass: (theme, colorPalette, sizeStyles) => ({
     backgroundColor: alpha(colorPalette.main, GLASS_BACKGROUND_ALPHA),
-    backdropFilter: `blur(${GLASS_BLUR_PX}px) saturate(${GLASS_SATURATE * 100}%)`,
-    WebkitBackdropFilter: `blur(${GLASS_BLUR_PX}px) saturate(${GLASS_SATURATE * 100}%)`,
+    backdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)}) saturate(${GLASS_SATURATE * 100}%)`,
+    WebkitBackdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)}) saturate(${GLASS_SATURATE * 100}%)`,
     border: `1px solid ${alpha(colorPalette.main, GLASS_BORDER_ALPHA)}`,
     color: colorPalette.main,
     minWidth: sizeStyles.minWidth,
     height: sizeStyles.height,
     fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
-    borderRadius: sizeStyles.height / 2,
-    boxShadow: `inset 0 1px 1px ${sheen(theme, GLASS_INSET_HIGHLIGHT_ALPHA)}`
+    borderRadius: sizeStyles.pillRadius,
+    boxShadow: `inset 0 ${rems(theme, 1, 1)} ${sheen(theme, GLASS_INSET_HIGHLIGHT_ALPHA)}`
   }),
   outline: (theme, colorPalette, sizeStyles) => ({
     backgroundColor: "transparent",
-    border: `${OUTLINE_BORDER_WIDTH}px solid ${colorPalette.main}`,
+    border: `${rem(theme, OUTLINE_BORDER_WIDTH)} solid ${colorPalette.main}`,
     color: colorPalette.main,
     minWidth: sizeStyles.minWidth,
     height: sizeStyles.height,
     fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
-    borderRadius: sizeStyles.height / 2
+    borderRadius: sizeStyles.pillRadius
   }),
   secondary: (theme, colorPalette, sizeStyles) => ({
     backgroundColor: alpha(colorPalette.main, SECONDARY_BACKGROUND_ALPHA),
@@ -87,7 +88,7 @@ var BADGE_VARIANTS = {
     height: sizeStyles.height,
     fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
-    borderRadius: sizeStyles.height / 2
+    borderRadius: sizeStyles.pillRadius
   }),
   destructive: (theme, colorPalette, sizeStyles) => ({
     backgroundColor: theme.palette.error.main,
@@ -96,7 +97,7 @@ var BADGE_VARIANTS = {
     height: sizeStyles.height,
     fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
-    borderRadius: sizeStyles.height / 2,
+    borderRadius: sizeStyles.pillRadius,
     fontWeight: BADGE_DESTRUCTIVE_FONT_WEIGHT
   }),
   success: (theme, colorPalette, sizeStyles) => ({
@@ -106,7 +107,7 @@ var BADGE_VARIANTS = {
     height: sizeStyles.height,
     fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
-    borderRadius: sizeStyles.height / 2
+    borderRadius: sizeStyles.pillRadius
   }),
   warning: (theme, colorPalette, sizeStyles) => ({
     backgroundColor: theme.palette.warning.main,
@@ -115,7 +116,7 @@ var BADGE_VARIANTS = {
     height: sizeStyles.height,
     fontSize: rem(theme, sizeStyles.step.fontSize),
     padding: sizeStyles.padding,
-    borderRadius: sizeStyles.height / 2
+    borderRadius: sizeStyles.pillRadius
   })
 };
 var badgeVariantStyles = (theme, colorPalette, sizeStyles, customVariant) => customVariant ? BADGE_VARIANTS[customVariant]?.(theme, colorPalette, sizeStyles) ?? {} : {};
@@ -123,4 +124,4 @@ var badgeVariantStyles = (theme, colorPalette, sizeStyles, customVariant) => cus
 export {
   badgeVariantStyles
 };
-//# sourceMappingURL=chunk-2WGMMFGV.js.map
+//# sourceMappingURL=chunk-M5ZXL52T.js.map

package/dist/chunk-M5ZXL52T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/Badge.variants.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\n\nimport {\n  BADGE_DESTRUCTIVE_FONT_WEIGHT,\n  GLASS_BACKGROUND_ALPHA,\n  GLASS_BLUR_PX,\n  GLASS_BORDER_ALPHA,\n  GLASS_INSET_HIGHLIGHT_ALPHA,\n  GLASS_SATURATE,\n  OUTLINE_BORDER_WIDTH,\n  SECONDARY_BACKGROUND_ALPHA,\n  SECONDARY_BORDER_ALPHA,\n} from './Badge.metrics';\nimport type { BadgePalette, BadgeSizeStyles } from './Badge.styles';\nimport { absoluteInk, onMedia, sheen } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst BADGE_VARIANTS: Record<\n  string,\n  (theme: Theme, colorPalette: BadgePalette, sizeStyles: BadgeSizeStyles) => CSSObject\n> = {\n  default: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: colorPalette.main,\n        color:\n          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }),\n  dot: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: colorPalette.main,\n        width: sizeStyles.dotSize,\n        height: sizeStyles.dotSize,\n        minWidth: sizeStyles.dotSize,\n        borderRadius: '50%',\n        padding: 0 }),\n  count: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: colorPalette.main,\n        color:\n          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: '50%' }),\n  gradient: (theme, colorPalette, sizeStyles) => ({\n        background: `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`,\n        color: onMedia(theme),\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }),\n  glass: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: alpha(colorPalette.main, GLASS_BACKGROUND_ALPHA),\n        backdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)}) saturate(${GLASS_SATURATE * 100}%)`,\n        WebkitBackdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)}) saturate(${GLASS_SATURATE * 100}%)`,\n        border: `1px solid ${alpha(colorPalette.main, GLASS_BORDER_ALPHA)}`,\n        color: colorPalette.main,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius,\n        boxShadow: `inset 0 ${rems(theme, 1, 1)} ${sheen(theme, GLASS_INSET_HIGHLIGHT_ALPHA)}` }),\n  outline: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: 'transparent',\n        border: `${rem(theme, OUTLINE_BORDER_WIDTH)} solid ${colorPalette.main}`,\n        color: colorPalette.main,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }),\n  secondary: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: alpha(colorPalette.main, SECONDARY_BACKGROUND_ALPHA),\n        color: colorPalette.main,\n        border: `1px solid ${alpha(colorPalette.main, SECONDARY_BORDER_ALPHA)}`,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }),\n  destructive: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: theme.palette.error.main,\n        color: theme.palette.error.contrastText,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius,\n        fontWeight: BADGE_DESTRUCTIVE_FONT_WEIGHT }),\n  success: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: theme.palette.success.main,\n        color: theme.palette.success.contrastText,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }),\n  warning: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: theme.palette.warning.main,\n        color: theme.palette.warning.contrastText,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }) };\n\nexport const badgeVariantStyles = (\n  theme: Theme,\n  colorPalette: BadgePalette,\n  sizeStyles: BadgeSizeStyles,\n  customVariant?: string,\n): CSSObject =>\n  customVariant ? (BADGE_VARIANTS[customVariant]?.(theme, colorPalette, sizeStyles) ?? {}) : {};\n\n"],"mappings":"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","names":[]}

package/dist/{chunk-C6FRVGMC.js → chunk-M6PWPEAV.js}

@@ -1,13 +1,14 @@
 import {
   DEFAULT_AUTOPLAY_INTERVAL_MS,
   MAX_ZOOM,
-  MIN_SWIPE_DISTANCE,
   MIN_ZOOM,
   WHEEL_ZOOM_FACTOR,
-  ZOOM_STEP
-} from "./chunk-TFZI36UD.js";
+  ZOOM_STEP,
+  minSwipeDistance
+} from "./chunk-3KA6MYIR.js";
 
 // src/components/data-display/Lightbox/Lightbox.hooks.ts
+import { useTheme } from "@mui/material/styles/index.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 var clampZoom = (zoom) => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));
 var isImageItem = (item) => Boolean(item && (item.type === "image" || !item.type));
@@ -137,6 +138,7 @@ var useSwipe = ({
   next,
   close
 }) => {
+  const theme = useTheme();
   const touchStartRef = useRef(null);
   const handleTouchStart = useCallback((event) => {
     const touch = event.touches.length === 1 ? event.touches[0] : void 0;
@@ -150,16 +152,17 @@ var useSwipe = ({
       if (!start || !touch) return;
       const deltaX = touch.clientX - start.x;
       const deltaY = touch.clientY - start.y;
+      const swipe = minSwipeDistance(theme);
       if (Math.abs(deltaX) > Math.abs(deltaY)) {
-        if (Math.abs(deltaX) > MIN_SWIPE_DISTANCE) {
+        if (Math.abs(deltaX) > swipe) {
           if (deltaX > 0) prev();
           else next();
         }
         return;
       }
-      if (deltaY > MIN_SWIPE_DISTANCE) close();
+      if (deltaY > swipe) close();
     },
-    [prev, next, close]
+    [prev, next, close, theme]
   );
   return { handleTouchStart, handleTouchEnd };
 };
@@ -173,4 +176,4 @@ export {
   useLightboxKeyboard,
   useSwipe
 };
-//# sourceMappingURL=chunk-C6FRVGMC.js.map
+//# sourceMappingURL=chunk-M6PWPEAV.js.map

package/dist/chunk-M6PWPEAV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.hooks.ts"],"sourcesContent":["import { useTheme } from '@mui/material/styles/index.js';\nimport type React from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport {\n  DEFAULT_AUTOPLAY_INTERVAL_MS,\n  MAX_ZOOM,\n  MIN_ZOOM,\n  minSwipeDistance,\n  WHEEL_ZOOM_FACTOR,\n  ZOOM_STEP,\n} from './Lightbox.constants';\nimport type { LightboxItem, LightboxProps } from './Lightbox.types';\n\nconst clampZoom = (zoom: number): number => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));\n\n// Items with no explicit type are images.\nconst isImageItem = (item?: LightboxItem): item is LightboxItem =>\n  Boolean(item && (item.type === 'image' || !item.type));\n\n// Images are fetched once and remembered, so stepping back to one is instant.\nexport const usePreloader = () => {\n  const [preloadedImages, setPreloadedImages] = useState<Set<string>>(new Set());\n\n  return useCallback(\n    (src: string) => {\n      if (preloadedImages.has(src)) return;\n\n      const img = new window.Image();\n      img.onload = () => setPreloadedImages((prev) => new Set([...prev, src]));\n      img.src = src;\n    },\n    [preloadedImages],\n  );\n};\n\nexport interface ZoomState {\n  zoomLevel: number;\n  panOffset: { x: number; y: number };\n  setZoomLevel: React.Dispatch<React.SetStateAction<number>>;\n  resetZoom: () => void;\n  zoomIn: () => void;\n  zoomOut: () => void;\n}\n\nexport const useZoomState = (): ZoomState => {\n  const [zoomLevel, setZoomLevel] = useState(1);\n  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });\n\n  const resetZoom = useCallback(() => {\n    setZoomLevel(1);\n    setPanOffset({ x: 0, y: 0 });\n  }, []);\n\n  const zoomIn = useCallback(() => setZoomLevel((prev) => Math.min(MAX_ZOOM, prev * ZOOM_STEP)), []);\n  const zoomOut = useCallback(\n    () => setZoomLevel((prev) => Math.max(MIN_ZOOM, prev / ZOOM_STEP)),\n    [],\n  );\n\n  return { zoomLevel, panOffset, setZoomLevel, resetZoom, zoomIn, zoomOut };\n};\n\nexport const useWheelZoom = ({\n  enabled,\n  setZoomLevel,\n}: {\n  enabled: boolean;\n  setZoomLevel: React.Dispatch<React.SetStateAction<number>>;\n}) =>\n  useCallback(\n    (event: React.WheelEvent) => {\n      if (!enabled) return;\n\n      event.preventDefault();\n      // Scrolling up (negative deltaY) zooms in.\n      setZoomLevel((prev) => clampZoom(prev + event.deltaY * -WHEEL_ZOOM_FACTOR));\n    },\n    [enabled, setZoomLevel],\n  );\n\nexport const useNavigation = ({\n  items,\n  loop,\n  startIndex,\n  resetZoom,\n  preloadImage,\n}: {\n  items: LightboxItem[];\n  loop: boolean;\n  startIndex: number;\n  resetZoom: () => void;\n  preloadImage: (src: string) => void;\n}) => {\n  const [currentIndex, setCurrentIndex] = useState(\n    Math.max(0, Math.min(startIndex, items.length - 1)),\n  );\n\n  const goToIndex = useCallback(\n    (index: number) => {\n      if (items.length === 0) return;\n\n      // Looping wraps both ways; otherwise the index sticks at the ends.\n      const newIndex = loop\n        ? ((index % items.length) + items.length) % items.length\n        : Math.max(0, Math.min(index, items.length - 1));\n\n      setCurrentIndex(newIndex);\n      resetZoom();\n\n      // Fetch the neighbours so a step in either direction shows immediately.\n      [items[newIndex - 1], items[newIndex + 1]]\n        .filter(isImageItem)\n        .forEach((item) => preloadImage(item.src));\n    },\n    [items, loop, resetZoom, preloadImage],\n  );\n\n  const next = useCallback(() => {\n    if (currentIndex < items.length - 1 || loop) goToIndex(currentIndex + 1);\n  }, [currentIndex, items.length, loop, goToIndex]);\n\n  const prev = useCallback(() => {\n    if (currentIndex > 0 || loop) goToIndex(currentIndex - 1);\n  }, [currentIndex, loop, goToIndex]);\n\n  return { currentIndex, goToIndex, next, prev };\n};\n\nexport const useAutoplay = ({\n  isOpen,\n  autoplay,\n  itemCount,\n  currentIndex,\n  next,\n}: {\n  isOpen: boolean;\n  autoplay: LightboxProps['autoplay'];\n  itemCount: number;\n  currentIndex: number;\n  next: () => void;\n}) => {\n  const [isAutoPlaying, setIsAutoPlaying] = useState(false);\n  const timerRef = useRef<number | undefined>(undefined);\n\n  useEffect(() => {\n    if (!isAutoPlaying || !autoplay || itemCount <= 1) return;\n\n    const interval =\n      typeof autoplay === 'object'\n        ? autoplay.interval || DEFAULT_AUTOPLAY_INTERVAL_MS\n        : DEFAULT_AUTOPLAY_INTERVAL_MS;\n\n    timerRef.current = window.setTimeout(next, interval);\n\n    return () => window.clearTimeout(timerRef.current);\n  }, [isAutoPlaying, autoplay, currentIndex, next, itemCount]);\n\n  // Opening a gallery with more than one item starts the slideshow.\n  useEffect(() => {\n    setIsAutoPlaying(Boolean(isOpen && autoplay && itemCount > 1));\n  }, [isOpen, autoplay, itemCount]);\n\n  const stopAutoplay = useCallback(() => {\n    setIsAutoPlaying(false);\n    window.clearTimeout(timerRef.current);\n  }, []);\n\n  return { isAutoPlaying, setIsAutoPlaying, stopAutoplay };\n};\n\nexport const useLightboxKeyboard = ({\n  isOpen,\n  showControls,\n  autoplay,\n  close,\n  prev,\n  next,\n  setIsAutoPlaying,\n}: {\n  isOpen: boolean;\n  showControls: boolean;\n  autoplay: LightboxProps['autoplay'];\n  close: () => void;\n  prev: () => void;\n  next: () => void;\n  setIsAutoPlaying: React.Dispatch<React.SetStateAction<boolean>>;\n}) => {\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const arrows: Record<string, () => void> = { ArrowLeft: prev, ArrowRight: next };\n\n    const handleKeyDown = (event: { key: string; preventDefault: () => void }) => {\n      if (event.key === 'Escape') {\n        close();\n        return;\n      }\n\n      const arrow = arrows[event.key];\n      if (arrow && showControls) {\n        event.preventDefault();\n        arrow();\n        return;\n      }\n\n      if (event.key === ' ') {\n        event.preventDefault();\n        if (autoplay) setIsAutoPlaying((playing) => !playing);\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen, showControls, close, prev, next, autoplay, setIsAutoPlaying]);\n};\n\n// Horizontal swipes step through the gallery; a downward swipe dismisses it.\nexport const useSwipe = ({\n  prev,\n  next,\n  close,\n}: {\n  prev: () => void;\n  next: () => void;\n  close: () => void;\n}) => {\n  const theme = useTheme();\n  const touchStartRef = useRef<{ x: number; y: number } | null>(null);\n\n  const handleTouchStart = useCallback((event: React.TouchEvent) => {\n    const touch = event.touches.length === 1 ? event.touches[0] : undefined;\n    if (touch) touchStartRef.current = { x: touch.clientX, y: touch.clientY };\n  }, []);\n\n  const handleTouchEnd = useCallback(\n    (event: React.TouchEvent) => {\n      const start = touchStartRef.current;\n      const touch = event.changedTouches[0];\n      touchStartRef.current = null;\n      if (!start || !touch) return;\n\n      const deltaX = touch.clientX - start.x;\n      const deltaY = touch.clientY - start.y;\n      const swipe = minSwipeDistance(theme);\n\n      // Whichever axis moved further decides what the gesture meant.\n      if (Math.abs(deltaX) > Math.abs(deltaY)) {\n        if (Math.abs(deltaX) > swipe) {\n          if (deltaX > 0) prev();\n          else next();\n        }\n        return;\n      }\n\n      if (deltaY > swipe) close();\n    },\n    [prev, next, close, theme],\n  );\n\n  return { handleTouchStart, handleTouchEnd };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-WW4N2LRM.js → chunk-MBC55H6M.js}

@@ -1,13 +1,13 @@
 import {
   NavigationMegaSection
-} from "./chunk-OGTTJKHI.js";
+} from "./chunk-5QWQR7XT.js";
 import {
   NavigationStandardBody
-} from "./chunk-GIRRCEVH.js";
+} from "./chunk-PT2XADGH.js";
 import {
   LogoBar,
   NavigationShell
-} from "./chunk-57IB5NTM.js";
+} from "./chunk-HB7ISSLK.js";
 
 // src/components/navigation/NavigationMenu/NavigationMenu.tsx
 import Box from "@mui/material/Box/index.js";
@@ -167,4 +167,4 @@ NavigationMenu.displayName = "NavigationMenu";
 export {
   NavigationMenu
 };
-//# sourceMappingURL=chunk-WW4N2LRM.js.map
+//# sourceMappingURL=chunk-MBC55H6M.js.map

package/dist/{chunk-AATIHNPI.js → chunk-MK4CH4VT.js}

@@ -4,7 +4,7 @@ import {
 import {
   navItemButtonStyles,
   pulseGlow
-} from "./chunk-CU4TF7C7.js";
+} from "./chunk-6GRZ77IS.js";
 import {
   onMedia,
   shadowInk,
@@ -309,4 +309,4 @@ var renderMenuItem = (item, variant = "vertical", size = "md", collapsed = false
 export {
   renderMenuItem
 };
-//# sourceMappingURL=chunk-AATIHNPI.js.map
+//# sourceMappingURL=chunk-MK4CH4VT.js.map

package/dist/{chunk-RV4Y4O67.js → chunk-MLQYIJTO.js}

@@ -2,12 +2,13 @@ import {
   arrowColor,
   emphasisStyles,
   getSizeStyles,
+  tooltipCap,
   variantStyles
-} from "./chunk-56QVP2MU.js";
+} from "./chunk-TQCQCW2P.js";
 import {
   resolveTooltipProps,
   usePinnedTooltip
-} from "./chunk-SCRN2RE4.js";
+} from "./chunk-S5UY5U73.js";
 
 // src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx
 import MuiTooltip from "@mui/material/Tooltip/index.js";
@@ -22,7 +23,7 @@ var StyledTooltip = styled(MuiTooltip, {
     "& .MuiTooltip-tooltip": {
       borderRadius: theme.spacing(1),
       fontSize: sizeStyles.fontSize(theme),
-      padding: sizeStyles.padding,
+      padding: sizeStyles.padding(theme),
       fontWeight: 500,
       transition: "all 0.3s ease",
       position: "relative",
@@ -84,7 +85,7 @@ var InteractiveTooltip = React.forwardRef(
         disableTouchListener: isPinned,
         slotProps: {
           tooltip: {
-            sx: { maxWidth },
+            sx: { maxWidth: tooltipCap(maxWidth) },
             role: "tooltip",
             ...dataTestId && { "data-testid": `${dataTestId}-content` }
           }
@@ -100,4 +101,4 @@ InteractiveTooltip.displayName = "InteractiveTooltip";
 export {
   InteractiveTooltip
 };
-//# sourceMappingURL=chunk-RV4Y4O67.js.map
+//# sourceMappingURL=chunk-MLQYIJTO.js.map

package/dist/chunk-MLQYIJTO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx"],"sourcesContent":["import MuiTooltip from '@mui/material/Tooltip/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { resolveTooltipProps, usePinnedTooltip } from './InteractiveTooltip.hooks';\nimport {\n  arrowColor,\n  emphasisStyles,\n  getSizeStyles,\n  tooltipCap,\n  variantStyles,\n} from './InteractiveTooltip.styles';\nimport type { InteractiveTooltipProps } from './InteractiveTooltip.types';\n\nconst StyledTooltip = styled(MuiTooltip, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customSize?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, customSize, glow, pulse }) => {\n  const sizeStyles = getSizeStyles(customSize);\n\n  return {\n    '& .MuiTooltip-tooltip': {\n      borderRadius: theme.spacing(1),\n      fontSize: sizeStyles.fontSize(theme),\n      padding: sizeStyles.padding(theme),\n      fontWeight: 500,\n      transition: 'all 0.3s ease',\n      position: 'relative',\n      overflow: 'hidden',\n      ...variantStyles(theme, customVariant),\n      ...emphasisStyles(theme, glow, pulse),\n    },\n\n    '& .MuiTooltip-arrow': {\n      color: arrowColor(theme, customVariant),\n    },\n  };\n});\n\nexport const InteractiveTooltip = React.forwardRef<HTMLDivElement, InteractiveTooltipProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      size,\n      glow,\n      pulse,\n      maxWidth,\n      dataTestId,\n      hoverContent,\n      pinnedContent,\n      clickable,\n      onPin,\n      onUnpin,\n      className,\n      children,\n      ...props\n    } = resolveTooltipProps(rawProps);\n\n    const { isPinned, isControlledOpen, wrapperRef, handleClick } = usePinnedTooltip({\n      clickable,\n      onPin,\n      onUnpin,\n    });\n\n    // Determine which content to show\n    const tooltipContent = isPinned ? pinnedContent : hoverContent;\n\n    // Child with click handler and ref\n    const childElement = children as React.ReactElement<{\n      onClick?: (e: React.MouseEvent) => void;\n      'data-testid'?: string;\n    }>;\n\n    const childWithProps = React.cloneElement(childElement, {\n      onClick: (e: React.MouseEvent) => {\n        handleClick(e);\n        // Call original onClick if it exists\n        childElement.props.onClick?.(e);\n      },\n      'data-testid': dataTestId ? `${dataTestId}-trigger` : undefined,\n    });\n\n    return (\n      <div ref={wrapperRef} className={className}>\n        <StyledTooltip\n          ref={ref}\n          customVariant={variant}\n          customSize={size}\n          glow={glow}\n          pulse={pulse}\n          title={tooltipContent}\n          open={isPinned ? isControlledOpen : undefined}\n          enterDelay={isPinned ? 0 : 100}\n          leaveDelay={0}\n          disableHoverListener={isPinned}\n          disableFocusListener={isPinned}\n          disableTouchListener={isPinned}\n          slotProps={{\n            tooltip: {\n              sx: { maxWidth: tooltipCap(maxWidth) },\n              role: 'tooltip',\n              ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),\n            },\n          }}\n          {...props}\n        >\n          {childWithProps}\n        </StyledTooltip>\n      </div>\n    );\n  },\n);\n\nInteractiveTooltip.displayName = 'InteractiveTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,OAAO,WAAW;AAuFV;AA3ER,IAAM,gBAAgB,OAAO,YAAY;AAAA,EACvC,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,cAAc,QAAQ,OAAO,EAAE,SAAS,IAAc;AAC7E,CAAC,EAKE,CAAC,EAAE,OAAO,eAAe,YAAY,MAAM,MAAM,MAAM;AACxD,QAAM,aAAa,cAAc,UAAU;AAE3C,SAAO;AAAA,IACL,yBAAyB;AAAA,MACvB,cAAc,MAAM,QAAQ,CAAC;AAAA,MAC7B,UAAU,WAAW,SAAS,KAAK;AAAA,MACnC,SAAS,WAAW,QAAQ,KAAK;AAAA,MACjC,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,MACV,GAAG,cAAc,OAAO,aAAa;AAAA,MACrC,GAAG,eAAe,OAAO,MAAM,KAAK;AAAA,IACtC;AAAA,IAEA,uBAAuB;AAAA,MACrB,OAAO,WAAW,OAAO,aAAa;AAAA,IACxC;AAAA,EACF;AACF,CAAC;AAEM,IAAM,qBAAqB,MAAM;AAAA,EACtC,CAAC,UAAU,QAAQ;AACjB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,oBAAoB,QAAQ;AAEhC,UAAM,EAAE,UAAU,kBAAkB,YAAY,YAAY,IAAI,iBAAiB;AAAA,MAC/E;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAGD,UAAM,iBAAiB,WAAW,gBAAgB;AAGlD,UAAM,eAAe;AAKrB,UAAM,iBAAiB,MAAM,aAAa,cAAc;AAAA,MACtD,SAAS,CAAC,MAAwB;AAChC,oBAAY,CAAC;AAEb,qBAAa,MAAM,UAAU,CAAC;AAAA,MAChC;AAAA,MACA,eAAe,aAAa,GAAG,UAAU,aAAa;AAAA,IACxD,CAAC;AAED,WACE,oBAAC,SAAI,KAAK,YAAY,WACpB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAe;AAAA,QACf,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,MAAM,WAAW,mBAAmB;AAAA,QACpC,YAAY,WAAW,IAAI;AAAA,QAC3B,YAAY;AAAA,QACZ,sBAAsB;AAAA,QACtB,sBAAsB;AAAA,QACtB,sBAAsB;AAAA,QACtB,WAAW;AAAA,UACT,SAAS;AAAA,YACP,IAAI,EAAE,UAAU,WAAW,QAAQ,EAAE;AAAA,YACrC,MAAM;AAAA,YACN,GAAI,cAAc,EAAE,eAAe,GAAG,UAAU,WAAW;AAAA,UAC7D;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;","names":[]}

package/dist/{chunk-A2CTAEIS.js → chunk-MO47Y26B.js}

@@ -26,7 +26,8 @@ import {
   softNeutral
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Alert/Alert.styles.tsx
@@ -36,13 +37,13 @@ import CheckCircle from "@mui/icons-material/CheckCircle";
 import Warning from "@mui/icons-material/Warning";
 import { alpha, darken, keyframes, lighten } from "@mui/material/styles/index.js";
 import { jsx } from "react/jsx-runtime";
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 ${PULSE.spread}px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, PULSE.spread)} currentColor;
     opacity: 0;
   }
   100% {
@@ -50,18 +51,18 @@ var pulseAnimation = keyframes`
     opacity: 0;
   }
 `;
-var shimmerAnimation = keyframes`
+var shimmerAnimation = (theme) => keyframes`
   0% {
-    background-position: -${GRADIENT.shimmerTravel}px 0;
+    background-position: ${rem(theme, -GRADIENT.shimmerTravel)} 0;
   }
   100% {
-    background-position: ${GRADIENT.shimmerTravel}px 0;
+    background-position: ${rem(theme, GRADIENT.shimmerTravel)} 0;
   }
 `;
-var fadeInScale = keyframes`
+var fadeInScale = (theme) => keyframes`
   from {
     opacity: 0;
-    transform: scale(${FADE_IN.scale}) translateY(-${FADE_IN.lift}px);
+    transform: scale(${FADE_IN.scale}) translateY(${rem(theme, -FADE_IN.lift)});
   }
   to {
     opacity: 1;
@@ -183,8 +184,8 @@ var alertVariantStyles = (theme, customVariant, colorPalette) => ({
     // be mostly pane — the backdrop should be legible AS texture behind the
     // text, never as competition with it.
     backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),
-    backdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,
-    WebkitBackdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,
+    backdropFilter: `blur(${rem(theme, GLASS.blur)}) saturate(${GLASS.saturatePercent}%)`,
+    WebkitBackdropFilter: `blur(${rem(theme, GLASS.blur)}) saturate(${GLASS.saturatePercent}%)`,
     border: `1px solid ${alpha(theme.palette.divider, GLASS.borderAlpha)}`,
     color: theme.palette.text.primary,
     ".MuiAlert-icon": {
@@ -194,7 +195,7 @@ var alertVariantStyles = (theme, customVariant, colorPalette) => ({
     // alpha with nothing blurred behind it — the see-through banner this is
     // fixing. There is no degraded frost to fall back to, so it falls back to an
     // opaque pane: less pretty, still readable.
-    "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))": {
+    [`@supports not ((backdrop-filter: blur(${rem(theme, 1)})) or (-webkit-backdrop-filter: blur(${rem(theme, 1)})))`]: {
       backgroundColor: theme.palette.background.paper
     }
   },
@@ -211,22 +212,22 @@ var alertVariantStyles = (theme, customVariant, colorPalette) => ({
       content: '""',
       position: "absolute",
       top: 0,
-      left: `-${GRADIENT.shimmerTravel}px`,
+      left: rem(theme, -GRADIENT.shimmerTravel),
       width: "100%",
       height: "100%",
       background: `linear-gradient(90deg, transparent, ${sheen(theme, GRADIENT.shimmerAlpha)}, transparent)`,
-      animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`
+      animation: `${shimmerAnimation(theme)} ${seconds(GRADIENT.shimmerMs)} infinite`
     }
   }
 });
-var glowStyles = (colorPalette) => ({
+var glowStyles = (theme, colorPalette) => ({
   // No `!important`: the pointer states paint their tint as an INSET shadow on
   // the same property, and compose this one alongside it rather than fighting
   // it. `glowShadow` in `Alert.tsx` is the other half of that pair.
-  boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,
+  boxShadow: `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`,
   filter: `brightness(${GLOW.brightness})`
 });
-var pulseAfter = (colorPalette) => ({
+var pulseAfter = (theme, colorPalette) => ({
   content: '""',
   position: "absolute",
   top: 0,
@@ -236,22 +237,22 @@ var pulseAfter = (colorPalette) => ({
   borderRadius: "inherit",
   backgroundColor: colorPalette.main,
   opacity: PULSE.alpha,
-  animation: `${pulseAnimation} ${seconds(PULSE.ms)} infinite`,
+  animation: `${pulseAnimation(theme)} ${seconds(PULSE.ms)} infinite`,
   pointerEvents: "none",
   zIndex: -1
 });
-var alertEmphasisStyles = (colorPalette, glow, pulse) => ({
-  ...glow && !pulse && glowStyles(colorPalette),
+var alertEmphasisStyles = (theme, colorPalette, glow, pulse) => ({
+  ...glow && !pulse && glowStyles(theme, colorPalette),
   // Pulse animation
   ...pulse && !glow && {
     position: "relative",
-    "&::after": pulseAfter(colorPalette)
+    "&::after": pulseAfter(theme, colorPalette)
   },
   // Both glow and pulse
   ...glow && pulse && {
     position: "relative",
-    ...glowStyles(colorPalette),
-    "&::after": pulseAfter(colorPalette)
+    ...glowStyles(theme, colorPalette),
+    "&::after": pulseAfter(theme, colorPalette)
   }
 });
 
@@ -266,4 +267,4 @@ export {
   alertVariantStyles,
   alertEmphasisStyles
 };
-//# sourceMappingURL=chunk-A2CTAEIS.js.map
+//# sourceMappingURL=chunk-MO47Y26B.js.map

package/dist/chunk-MO47Y26B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Alert/Alert.styles.tsx"],"sourcesContent":["import Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport CheckCircle from '@mui/icons-material/CheckCircle';\nimport Warning from '@mui/icons-material/Warning';\nimport { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { sheen, softNeutral } from '../../../tokens/ink';\n\nimport type { AlertVariant } from './Alert.base';\nimport { VARIANT_ICON } from './Alert.helpers';\nimport {\n  ACTION_SLOT,\n  ALERT_EASING,\n  ALERT_PADDING_UNITS,\n  ALERT_TRANSITION_MS,\n  type AlertPalette,\n  FADE_IN,\n  GLASS,\n  GLOW,\n  GRADIENT,\n  ICON_SLOT,\n  ICON_SPIN,\n  MESSAGE_BUTTON,\n  MESSAGE_FONT_SIZE,\n  MESSAGE_GAP_UNITS,\n  MESSAGE_LINE_HEIGHT,\n  PULSE,\n  seconds,\n  SEMANTIC_SURFACE,\n  SEMANTIC_VARIANTS,\n} from './Alert.metrics';\nimport type { IconName } from '../../../icons/Icon.types';\nimport { rem, rems } from '../../../tokens/relative';\n\nexport type { AlertPalette } from './Alert.metrics';\n\nexport const pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, PULSE.spread)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n// Additional animations can be enabled as needed\n// const slideInAnimation = keyframes`\n//   from {\n//     transform: translateX(-100%);\n//     opacity: 0;\n//   }\n//   to {\n//     transform: translateX(0);\n//     opacity: 1;\n//   }\n// `;\n\n// const bounceIn = keyframes`\n//   0% {\n//     transform: scale(0.3);\n//     opacity: 0;\n//   }\n//   50% {\n//     transform: scale(1.05);\n//   }\n//   70% {\n//     transform: scale(0.9);\n//   }\n//   100% {\n//     transform: scale(1);\n//     opacity: 1;\n//   }\n// `;\n\n// Removed unused slideInAnimation - can be re-added if needed for future features\n\nexport const shimmerAnimation = (theme: Theme) => keyframes`\n  0% {\n    background-position: ${rem(theme, -GRADIENT.shimmerTravel)} 0;\n  }\n  100% {\n    background-position: ${rem(theme, GRADIENT.shimmerTravel)} 0;\n  }\n`;\n\nexport const fadeInScale = (theme: Theme) => keyframes`\n  from {\n    opacity: 0;\n    transform: scale(${FADE_IN.scale}) translateY(${rem(theme, -FADE_IN.lift)});\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n`;\n\nexport const iconRotate = keyframes`\n  0% {\n    transform: rotate(0deg) scale(${ICON_SPIN.from});\n  }\n  50% {\n    transform: rotate(180deg) scale(${ICON_SPIN.mid});\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n`;\n\n// The MUI-themed twin of `alertPalette` in `Alert.metrics.ts`: same names,\n// same three greys for `neutral`, same fallback to `info`.\nexport const getColorFromTheme = (theme: Theme, variant: string): AlertPalette => {\n  const soft = softNeutral(theme);\n  const colorMap: Record<string, AlertPalette> = {\n    info: theme.palette.info,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    danger: theme.palette.error,\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    neutral: { main: soft.main, light: soft.light, dark: soft.dark },\n  };\n\n  return colorMap[variant] || theme.palette.info;\n};\n\n/** The shared glyph names drawn with MUI's icons; the native side draws the same names from the icon set. */\nconst VARIANT_ICONS: Partial<Record<IconName, React.ReactNode>> = {\n  Info: <Info />,\n  CheckCircle: <CheckCircle />,\n  Warning: <Warning />,\n  Error: <Error />,\n};\n\nexport const getVariantIcon = (variant: string): React.ReactNode => {\n  const name = VARIANT_ICON[variant as AlertVariant];\n  return name ? VARIANT_ICONS[name] : undefined;\n};\n\n/**\n * The room the message is given — padding, the stack's rhythm, and where the\n * icon and the close button sit relative to it.\n *\n * Extracted for the same reason {@link alertVariantStyles} and\n * {@link alertEmphasisStyles} were: `styled()`'s callback is one function, and\n * every block written inline is counted against its length by the complexity\n * gate. Keeping the layout here means the callback assembles four named pieces\n * instead of carrying all of them.\n */\nexport const alertLayoutStyles = (\n  theme: Theme,\n  colorPalette: AlertPalette,\n  animate: boolean | undefined,\n): CSSObject => ({\n  // ROOM TO READ.\n  //\n  // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert\n  // routinely carries three things stacked — a sentence, a smaller explanation,\n  // then a control — and at 6px they touched top and bottom and ran together\n  // vertically, so the whole card read as one dense block instead of as a\n  // message with parts. The generosity is what makes the structure legible; it\n  // is not decoration.\n  //\n  // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants\n  // it tight), because this is a default rather than a rule.\n  padding: theme.spacing(ALERT_PADDING_UNITS.vertical, ALERT_PADDING_UNITS.horizontal),\n\n  '.MuiAlert-message': {\n    display: 'flex',\n    flexDirection: 'column',\n    // 0.5 put a title, its explanation and a button 4px apart, which reads as a\n    // spacing bug rather than as a group. 1 separates the lines; the extra\n    // margin below goes to whatever CONTROL sits at the end, because the gap\n    // between prose and a thing you press has to be bigger than the gap between\n    // two lines of prose or the button looks like part of the text.\n    gap: theme.spacing(MESSAGE_GAP_UNITS),\n    fontSize: rem(theme, MESSAGE_FONT_SIZE),\n    lineHeight: MESSAGE_LINE_HEIGHT,\n    // No padding of its own — the root's is now doing that job, and MUI's\n    // default `8px 0` on top of it would double the vertical space.\n    padding: 0,\n    // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.\n    //\n    // `ghost` and `text` paint no background and no border — bare labels, which\n    // works on white where the surrounding page is obviously not clickable.\n    // Inside a coloured Alert it stops working: the label is one more coloured\n    // phrase among several, and a \"Cancelar\" beside two lines of prose reads as\n    // part of the prose.\n    //\n    // Only the BORDER is set, never the background or the colour, and that is\n    // what makes it safe to apply to every button rather than just the bare\n    // ones: a `solid` keeps its fill and its light label and gains a hairline\n    // in the same hue, while a `ghost` gains the whole affordance.\n    '.MuiButton-root': {\n      marginTop: theme.spacing(MESSAGE_BUTTON.marginTopUnits),\n      border: `1px solid ${alpha(colorPalette.main, MESSAGE_BUTTON.borderAlpha)}`,\n    },\n  },\n\n  '.MuiAlert-icon': {\n    transition: `transform ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`,\n    alignItems: 'center',\n    // Clear of the words rather than nearly touching them, and aligned to the\n    // FIRST line instead of centred on the whole block — an icon floating\n    // halfway down a three-line message points at nothing.\n    alignSelf: 'flex-start',\n    marginRight: theme.spacing(ICON_SLOT.marginRightUnits),\n    paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),\n    animation: animate ? `${iconRotate} ${seconds(ICON_SPIN.ms)} ease-out` : 'none',\n  },\n\n  // The close button, kept off the text it sits beside.\n  '.MuiAlert-action': {\n    alignItems: 'flex-start',\n    paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits),\n  },\n});\n\n/**\n * A semantic Alert's surface and ink.\n *\n * ## Why this is not `alpha(main, 0.1)`\n *\n * It used to be, four times over, with `color: main` for the text. Both halves\n * were wrong, and independently so.\n *\n * The fill was TRANSLUCENT. A 10% wash only reads as a banner when something\n * opaque is behind it, so the component silently depended on where a consumer\n * put it. Placed over content — a floating notice, an invite anchored above a\n * catalogue — the page came straight through and the sentence interleaved with\n * whatever it was over. That is not a faint banner; it is an unreadable one,\n * and nothing in the component said so.\n *\n * The ink was the SEVERITY HUE at body size. `#0288d1`, this library's info\n * blue, is 3.03:1 on white — under the 4.5:1 WCAG AA floor before any wash is\n * involved. So the text failed on a plain white page too, where the fill was\n * behaving exactly as intended.\n *\n * ## Why `lighten`/`darken` rather than a hand-picked pair\n *\n * These are the same transforms MUI's own `standard` Alert uses, at the same\n * ratios — the recipe this component overrode. Reusing it means an OPAQUE tint\n * with a dark ink of the same hue, contrast that holds on any surface because\n * it no longer depends on one, and a pairing already proven across MUI's\n * palette rather than eyeballed here. Both modes are handled: on a dark theme\n * the tint darkens and the ink lightens, which an alpha wash could never do\n * because it carries the seed's own lightness through unchanged.\n *\n * The border keeps an alpha — it is a hairline over the tint it belongs to, so\n * translucency there costs nothing and lets the edge follow the fill.\n *\n * The ratios live in `Alert.metrics.ts` (`SEMANTIC_SURFACE`), where the\n * native renderer reads the same three through the same colour arithmetic.\n */\nconst semanticSurface = (theme: Theme, colorPalette: AlertPalette): CSSObject => {\n  const dark = theme.palette.mode === 'dark';\n  return {\n    backgroundColor: dark\n      ? darken(colorPalette.main, SEMANTIC_SURFACE.tint.dark)\n      : lighten(colorPalette.main, SEMANTIC_SURFACE.tint.light),\n    color: dark\n      ? lighten(colorPalette.main, SEMANTIC_SURFACE.ink)\n      : darken(colorPalette.main, SEMANTIC_SURFACE.ink),\n    border: `1px solid ${alpha(colorPalette.main, SEMANTIC_SURFACE.borderAlpha)}`,\n    '.MuiAlert-icon': {\n      color: colorPalette.main,\n    },\n  };\n};\n\n// The six visual variants. Each block is spread in only when it matches, which\n// is how the original inline version read; keeping that shape here means the\n// styled() callback carries one branch instead of six. The four semantics were\n// four IDENTICAL copies of the same block — they now share one, so the next\n// change to a banner's surface cannot land on three of them.\nexport const alertVariantStyles = (\n  theme: Theme,\n  customVariant: string | undefined,\n  colorPalette: AlertPalette,\n): CSSObject => ({\n  ...(customVariant !== undefined &&\n    SEMANTIC_VARIANTS.has(customVariant as AlertVariant) &&\n    semanticSurface(theme, colorPalette)),\n\n  ...(customVariant === 'glass' && {\n    // 85%, not 10%. This is the variant that is MEANT to be see-through, and it\n    // was the same mistake in a costume: at 0.1 the blur had almost nothing to\n    // sit on, so `glass` was not frosted, it was a window. A frosted pane has to\n    // be mostly pane — the backdrop should be legible AS texture behind the\n    // text, never as competition with it.\n    backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n    backdropFilter: `blur(${rem(theme, GLASS.blur)}) saturate(${GLASS.saturatePercent}%)`,\n    WebkitBackdropFilter: `blur(${rem(theme, GLASS.blur)}) saturate(${GLASS.saturatePercent}%)`,\n    border: `1px solid ${alpha(theme.palette.divider, GLASS.borderAlpha)}`,\n    color: theme.palette.text.primary,\n    '.MuiAlert-icon': {\n      color: theme.palette.primary.main,\n    },\n    // Safari before 18 and Firefox with the filter disabled paint the declared\n    // alpha with nothing blurred behind it — the see-through banner this is\n    // fixing. There is no degraded frost to fall back to, so it falls back to an\n    // opaque pane: less pretty, still readable.\n    [`@supports not ((backdrop-filter: blur(${rem(theme, 1)})) or (-webkit-backdrop-filter: blur(${rem(theme, 1)})))`]: {\n      backgroundColor: theme.palette.background.paper,\n    },\n  }),\n\n  ...(customVariant === 'gradient' && {\n    background: `linear-gradient(${GRADIENT.angleDeg}deg, ${alpha(colorPalette.light || colorPalette.main, GRADIENT.stopAlpha)}, ${alpha(colorPalette.dark || colorPalette.main, GRADIENT.stopAlpha)})`,\n    color: theme.palette.getContrastText(colorPalette.main),\n    border: 'none',\n    position: 'relative',\n    overflow: 'hidden',\n    '.MuiAlert-icon': {\n      color: theme.palette.getContrastText(colorPalette.main),\n    },\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: rem(theme, -GRADIENT.shimmerTravel),\n      width: '100%',\n      height: '100%',\n      background: `linear-gradient(90deg, transparent, ${sheen(theme, GRADIENT.shimmerAlpha)}, transparent)`,\n      animation: `${shimmerAnimation(theme)} ${seconds(GRADIENT.shimmerMs)} infinite`,\n    },\n  }),\n});\n\n/** The web's glow: a soft shadow of the hue and a touch of brightness. */\nconst glowStyles = (theme: Theme, colorPalette: AlertPalette): CSSObject => ({\n  // No `!important`: the pointer states paint their tint as an INSET shadow on\n  // the same property, and compose this one alongside it rather than fighting\n  // it. `glowShadow` in `Alert.tsx` is the other half of that pair.\n  boxShadow: `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`,\n  filter: `brightness(${GLOW.brightness})`,\n});\n\n/** The web's pulse: a wash of the hue over the whole card, fading out every two seconds. */\nconst pulseAfter = (theme: Theme, colorPalette: AlertPalette): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  borderRadius: 'inherit',\n  backgroundColor: colorPalette.main,\n  opacity: PULSE.alpha,\n  animation: `${pulseAnimation(theme)} ${seconds(PULSE.ms)} infinite`,\n  pointerEvents: 'none',\n  zIndex: -1,\n});\n\n// glow and pulse combine into three distinct looks, so the combinations are\n// spelled out rather than layered — layering them would let the glow-only shadow\n// leak into the glow+pulse case. Declaration ORDER is kept as it has always\n// been, because emotion hashes the serialised block into the class name.\nexport const alertEmphasisStyles = (\n  theme: Theme,\n  colorPalette: AlertPalette,\n  glow: boolean,\n  pulse: boolean,\n): CSSObject => ({\n  ...(glow && !pulse && glowStyles(theme, colorPalette)),\n\n  // Pulse animation\n  ...(pulse &&\n    !glow && {\n      position: 'relative',\n      '&::after': pulseAfter(theme, colorPalette),\n    }),\n\n  // Both glow and pulse\n  ...(glow &&\n    pulse && {\n      position: 'relative',\n      ...glowStyles(theme, colorPalette),\n      '&::after': pulseAfter(theme, colorPalette),\n    }),\n});\n"],"mappings":"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","names":[]}