@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-MLQYIJTO.js

@@ -0,0 +1,104 @@
+import {
+  arrowColor,
+  emphasisStyles,
+  getSizeStyles,
+  tooltipCap,
+  variantStyles
+} from "./chunk-TQCQCW2P.js";
+import {
+  resolveTooltipProps,
+  usePinnedTooltip
+} from "./chunk-S5UY5U73.js";
+
+// src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx
+import MuiTooltip from "@mui/material/Tooltip/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledTooltip = styled(MuiTooltip, {
+  shouldForwardProp: (prop) => !["customVariant", "customSize", "glow", "pulse"].includes(prop)
+})(({ theme, customVariant, customSize, glow, pulse }) => {
+  const sizeStyles = getSizeStyles(customSize);
+  return {
+    "& .MuiTooltip-tooltip": {
+      borderRadius: theme.spacing(1),
+      fontSize: sizeStyles.fontSize(theme),
+      padding: sizeStyles.padding(theme),
+      fontWeight: 500,
+      transition: "all 0.3s ease",
+      position: "relative",
+      overflow: "hidden",
+      ...variantStyles(theme, customVariant),
+      ...emphasisStyles(theme, glow, pulse)
+    },
+    "& .MuiTooltip-arrow": {
+      color: arrowColor(theme, customVariant)
+    }
+  };
+});
+var InteractiveTooltip = React.forwardRef(
+  (rawProps, ref) => {
+    const {
+      variant,
+      size,
+      glow,
+      pulse,
+      maxWidth,
+      dataTestId,
+      hoverContent,
+      pinnedContent,
+      clickable,
+      onPin,
+      onUnpin,
+      className,
+      children,
+      ...props
+    } = resolveTooltipProps(rawProps);
+    const { isPinned, isControlledOpen, wrapperRef, handleClick } = usePinnedTooltip({
+      clickable,
+      onPin,
+      onUnpin
+    });
+    const tooltipContent = isPinned ? pinnedContent : hoverContent;
+    const childElement = children;
+    const childWithProps = React.cloneElement(childElement, {
+      onClick: (e) => {
+        handleClick(e);
+        childElement.props.onClick?.(e);
+      },
+      "data-testid": dataTestId ? `${dataTestId}-trigger` : void 0
+    });
+    return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className, children: /* @__PURE__ */ jsx(
+      StyledTooltip,
+      {
+        ref,
+        customVariant: variant,
+        customSize: size,
+        glow,
+        pulse,
+        title: tooltipContent,
+        open: isPinned ? isControlledOpen : void 0,
+        enterDelay: isPinned ? 0 : 100,
+        leaveDelay: 0,
+        disableHoverListener: isPinned,
+        disableFocusListener: isPinned,
+        disableTouchListener: isPinned,
+        slotProps: {
+          tooltip: {
+            sx: { maxWidth: tooltipCap(maxWidth) },
+            role: "tooltip",
+            ...dataTestId && { "data-testid": `${dataTestId}-content` }
+          }
+        },
+        ...props,
+        children: childWithProps
+      }
+    ) });
+  }
+);
+InteractiveTooltip.displayName = "InteractiveTooltip";
+
+export {
+  InteractiveTooltip
+};
+//# 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-MNHIK2OR.js

@@ -0,0 +1,118 @@
+import {
+  sliderSx
+} from "./chunk-4RWPGWJW.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/Slider/Slider.tsx
+import Box from "@mui/material/Box/index.js";
+import MuiSlider from "@mui/material/Slider/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledSlider = styled(MuiSlider, {
+  shouldForwardProp: (prop) => !["customColor", "customSize", "glow", "glass", "gradient", "customVariant"].includes(
+    prop
+  )
+})(({ theme, ...flags }) => ({ ...sliderSx(theme, flags) }));
+var DEFAULTS = {
+  variant: "default",
+  color: "primary",
+  size: "md",
+  showValue: false,
+  glow: false,
+  glass: false,
+  gradient: false,
+  showMarks: false,
+  unit: ""
+};
+var formatOne = (n, unit, formatValue) => `${formatValue ? formatValue(n) : n}${unit}`;
+var displayValueOf = (value, unit, formatValue) => {
+  if (Array.isArray(value)) {
+    const low = formatOne(value[0] ?? 0, unit, formatValue);
+    const high = formatOne(value[1] ?? 0, unit, formatValue);
+    return `${low} - ${high}`;
+  }
+  return formatOne(value ?? 0, unit, formatValue);
+};
+var marksFor = (variant, showMarks, customMarks) => {
+  if (variant !== "marks" && !showMarks) return void 0;
+  return customMarks || (variant === "marks" ? true : void 0);
+};
+var Slider = forwardRef((props, ref) => {
+  const {
+    variant,
+    color,
+    size,
+    label,
+    showValue,
+    glow,
+    glass,
+    gradient,
+    showMarks,
+    customMarks,
+    unit,
+    formatValue,
+    value,
+    onChange,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const testId = (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0;
+  return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, "data-testid": dataTestId, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mb: 2
+        },
+        children: [
+          label && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              fontWeight: 500,
+              color: "text.primary",
+              "data-testid": testId("label"),
+              children: label
+            }
+          ),
+          showValue && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", "data-testid": testId("value-label"), children: displayValueOf(value, unit, formatValue) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { sx: { px: 1 }, children: /* @__PURE__ */ jsx(
+      StyledSlider,
+      {
+        ref,
+        customColor: color,
+        customSize: size,
+        glow,
+        glass,
+        gradient,
+        customVariant: variant,
+        value,
+        onChange,
+        marks: marksFor(variant, showMarks, customMarks),
+        valueLabelDisplay: showValue ? "auto" : "off",
+        "data-testid": testId("slider"),
+        slotProps: {
+          track: { "data-testid": testId("track") },
+          thumb: { "data-testid": testId("thumb") }
+        },
+        ...rest
+      }
+    ) })
+  ] });
+});
+Slider.displayName = "Slider";
+
+export {
+  Slider
+};
+//# sourceMappingURL=chunk-MNHIK2OR.js.map

package/dist/chunk-MO47Y26B.js

@@ -0,0 +1,270 @@
+import {
+  VARIANT_ICON
+} from "./chunk-L7VH6IMR.js";
+import {
+  ACTION_SLOT,
+  ALERT_EASING,
+  ALERT_PADDING_UNITS,
+  ALERT_TRANSITION_MS,
+  FADE_IN,
+  GLASS,
+  GLOW,
+  GRADIENT,
+  ICON_SLOT,
+  ICON_SPIN,
+  MESSAGE_BUTTON,
+  MESSAGE_FONT_SIZE,
+  MESSAGE_GAP_UNITS,
+  MESSAGE_LINE_HEIGHT,
+  PULSE,
+  SEMANTIC_SURFACE,
+  SEMANTIC_VARIANTS,
+  seconds
+} from "./chunk-P2UIXDEG.js";
+import {
+  sheen,
+  softNeutral
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Alert/Alert.styles.tsx
+import Error from "@mui/icons-material/Error";
+import Info from "@mui/icons-material/Info";
+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 = (theme) => keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 ${rem(theme, PULSE.spread)} currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var shimmerAnimation = (theme) => keyframes`
+  0% {
+    background-position: ${rem(theme, -GRADIENT.shimmerTravel)} 0;
+  }
+  100% {
+    background-position: ${rem(theme, GRADIENT.shimmerTravel)} 0;
+  }
+`;
+var fadeInScale = (theme) => keyframes`
+  from {
+    opacity: 0;
+    transform: scale(${FADE_IN.scale}) translateY(${rem(theme, -FADE_IN.lift)});
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+`;
+var iconRotate = keyframes`
+  0% {
+    transform: rotate(0deg) scale(${ICON_SPIN.from});
+  }
+  50% {
+    transform: rotate(180deg) scale(${ICON_SPIN.mid});
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+`;
+var getColorFromTheme = (theme, variant) => {
+  const soft = softNeutral(theme);
+  const colorMap = {
+    info: theme.palette.info,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    danger: theme.palette.error,
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    neutral: { main: soft.main, light: soft.light, dark: soft.dark }
+  };
+  return colorMap[variant] || theme.palette.info;
+};
+var VARIANT_ICONS = {
+  Info: /* @__PURE__ */ jsx(Info, {}),
+  CheckCircle: /* @__PURE__ */ jsx(CheckCircle, {}),
+  Warning: /* @__PURE__ */ jsx(Warning, {}),
+  Error: /* @__PURE__ */ jsx(Error, {})
+};
+var getVariantIcon = (variant) => {
+  const name = VARIANT_ICON[variant];
+  return name ? VARIANT_ICONS[name] : void 0;
+};
+var alertLayoutStyles = (theme, colorPalette, animate) => ({
+  // ROOM TO READ.
+  //
+  // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert
+  // routinely carries three things stacked — a sentence, a smaller explanation,
+  // then a control — and at 6px they touched top and bottom and ran together
+  // vertically, so the whole card read as one dense block instead of as a
+  // message with parts. The generosity is what makes the structure legible; it
+  // is not decoration.
+  //
+  // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants
+  // it tight), because this is a default rather than a rule.
+  padding: theme.spacing(ALERT_PADDING_UNITS.vertical, ALERT_PADDING_UNITS.horizontal),
+  ".MuiAlert-message": {
+    display: "flex",
+    flexDirection: "column",
+    // 0.5 put a title, its explanation and a button 4px apart, which reads as a
+    // spacing bug rather than as a group. 1 separates the lines; the extra
+    // margin below goes to whatever CONTROL sits at the end, because the gap
+    // between prose and a thing you press has to be bigger than the gap between
+    // two lines of prose or the button looks like part of the text.
+    gap: theme.spacing(MESSAGE_GAP_UNITS),
+    fontSize: rem(theme, MESSAGE_FONT_SIZE),
+    lineHeight: MESSAGE_LINE_HEIGHT,
+    // No padding of its own — the root's is now doing that job, and MUI's
+    // default `8px 0` on top of it would double the vertical space.
+    padding: 0,
+    // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.
+    //
+    // `ghost` and `text` paint no background and no border — bare labels, which
+    // works on white where the surrounding page is obviously not clickable.
+    // Inside a coloured Alert it stops working: the label is one more coloured
+    // phrase among several, and a "Cancelar" beside two lines of prose reads as
+    // part of the prose.
+    //
+    // Only the BORDER is set, never the background or the colour, and that is
+    // what makes it safe to apply to every button rather than just the bare
+    // ones: a `solid` keeps its fill and its light label and gains a hairline
+    // in the same hue, while a `ghost` gains the whole affordance.
+    ".MuiButton-root": {
+      marginTop: theme.spacing(MESSAGE_BUTTON.marginTopUnits),
+      border: `1px solid ${alpha(colorPalette.main, MESSAGE_BUTTON.borderAlpha)}`
+    }
+  },
+  ".MuiAlert-icon": {
+    transition: `transform ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`,
+    alignItems: "center",
+    // Clear of the words rather than nearly touching them, and aligned to the
+    // FIRST line instead of centred on the whole block — an icon floating
+    // halfway down a three-line message points at nothing.
+    alignSelf: "flex-start",
+    marginRight: theme.spacing(ICON_SLOT.marginRightUnits),
+    paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),
+    animation: animate ? `${iconRotate} ${seconds(ICON_SPIN.ms)} ease-out` : "none"
+  },
+  // The close button, kept off the text it sits beside.
+  ".MuiAlert-action": {
+    alignItems: "flex-start",
+    paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits)
+  }
+});
+var semanticSurface = (theme, colorPalette) => {
+  const dark = theme.palette.mode === "dark";
+  return {
+    backgroundColor: dark ? darken(colorPalette.main, SEMANTIC_SURFACE.tint.dark) : lighten(colorPalette.main, SEMANTIC_SURFACE.tint.light),
+    color: dark ? lighten(colorPalette.main, SEMANTIC_SURFACE.ink) : darken(colorPalette.main, SEMANTIC_SURFACE.ink),
+    border: `1px solid ${alpha(colorPalette.main, SEMANTIC_SURFACE.borderAlpha)}`,
+    ".MuiAlert-icon": {
+      color: colorPalette.main
+    }
+  };
+};
+var alertVariantStyles = (theme, customVariant, colorPalette) => ({
+  ...customVariant !== void 0 && SEMANTIC_VARIANTS.has(customVariant) && semanticSurface(theme, colorPalette),
+  ...customVariant === "glass" && {
+    // 85%, not 10%. This is the variant that is MEANT to be see-through, and it
+    // was the same mistake in a costume: at 0.1 the blur had almost nothing to
+    // sit on, so `glass` was not frosted, it was a window. A frosted pane has to
+    // 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(${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": {
+      color: theme.palette.primary.main
+    },
+    // Safari before 18 and Firefox with the filter disabled paint the declared
+    // 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(${rem(theme, 1)})) or (-webkit-backdrop-filter: blur(${rem(theme, 1)})))`]: {
+      backgroundColor: theme.palette.background.paper
+    }
+  },
+  ...customVariant === "gradient" && {
+    background: `linear-gradient(${GRADIENT.angleDeg}deg, ${alpha(colorPalette.light || colorPalette.main, GRADIENT.stopAlpha)}, ${alpha(colorPalette.dark || colorPalette.main, GRADIENT.stopAlpha)})`,
+    color: theme.palette.getContrastText(colorPalette.main),
+    border: "none",
+    position: "relative",
+    overflow: "hidden",
+    ".MuiAlert-icon": {
+      color: theme.palette.getContrastText(colorPalette.main)
+    },
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: rem(theme, -GRADIENT.shimmerTravel),
+      width: "100%",
+      height: "100%",
+      background: `linear-gradient(90deg, transparent, ${sheen(theme, GRADIENT.shimmerAlpha)}, transparent)`,
+      animation: `${shimmerAnimation(theme)} ${seconds(GRADIENT.shimmerMs)} infinite`
+    }
+  }
+});
+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 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`,
+  filter: `brightness(${GLOW.brightness})`
+});
+var pulseAfter = (theme, colorPalette) => ({
+  content: '""',
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderRadius: "inherit",
+  backgroundColor: colorPalette.main,
+  opacity: PULSE.alpha,
+  animation: `${pulseAnimation(theme)} ${seconds(PULSE.ms)} infinite`,
+  pointerEvents: "none",
+  zIndex: -1
+});
+var alertEmphasisStyles = (theme, colorPalette, glow, pulse) => ({
+  ...glow && !pulse && glowStyles(theme, colorPalette),
+  // Pulse animation
+  ...pulse && !glow && {
+    position: "relative",
+    "&::after": pulseAfter(theme, colorPalette)
+  },
+  // Both glow and pulse
+  ...glow && pulse && {
+    position: "relative",
+    ...glowStyles(theme, colorPalette),
+    "&::after": pulseAfter(theme, colorPalette)
+  }
+});
+
+export {
+  pulseAnimation,
+  shimmerAnimation,
+  fadeInScale,
+  iconRotate,
+  getColorFromTheme,
+  getVariantIcon,
+  alertLayoutStyles,
+  alertVariantStyles,
+  alertEmphasisStyles
+};
+//# 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":[]}

package/dist/chunk-MTEQEPNY.js

@@ -0,0 +1,54 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Avatar/Avatar.animations.ts
+import { keyframes } from "@mui/material/styles/index.js";
+var pulseAnimation = (theme) => keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var shimmerAnimation = keyframes`
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+`;
+var scaleInAnimation = keyframes`
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+var rotateAnimation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+export {
+  pulseAnimation,
+  shimmerAnimation,
+  scaleInAnimation,
+  rotateAnimation
+};
+//# sourceMappingURL=chunk-MTEQEPNY.js.map

package/dist/chunk-MTEQEPNY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.animations.ts"],"sourcesContent":["import { keyframes } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\n\nimport { rem } from '../../../tokens/relative';\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, 10)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nexport const shimmerAnimation = keyframes`\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n`;\n\nexport const scaleInAnimation = keyframes`\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nexport const rotateAnimation = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`;\n"],"mappings":";;;;;AAAA,SAAS,iBAAiB;AAKnB,IAAM,iBAAiB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMxB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWzB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}