@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-TQ2557I5.js

@@ -0,0 +1,230 @@
+import {
+  getColorFromTheme,
+  textareaEmphasisStyles
+} from "./chunk-AMTFP7QA.js";
+import {
+  fieldBorder
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Textarea/Textarea.tsx
+import Box from "@mui/material/Box/index.js";
+import FormHelperText from "@mui/material/FormHelperText/index.js";
+import InputLabel from "@mui/material/InputLabel/index.js";
+import TextareaAutosize from "@mui/material/TextareaAutosize/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { lazy, Suspense, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TextareaRichEditor = lazy(async () => ({
+  default: (await import("./_internal/components/form/Textarea/TextareaRichEditor.js")).TextareaRichEditor
+}));
+var StyledTextarea = styled(TextareaAutosize, {
+  shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize", "glow", "glass", "gradient", "error"].includes(
+    prop
+  )
+})(({
+  theme,
+  customVariant,
+  customColor = "primary",
+  customSize = "md",
+  glow,
+  glass,
+  gradient,
+  error
+}) => {
+  if (!theme) return {};
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const errorColor = theme.palette.error;
+  const sizeMap = {
+    xs: { padding: "6px 8px", fontSize: rem(theme, 12), minHeight: "60px" },
+    sm: { padding: "8px 10px", fontSize: rem(theme, 14), minHeight: "80px" },
+    md: { padding: "10px 12px", fontSize: rem(theme, 16), minHeight: "100px" },
+    lg: { padding: "12px 14px", fontSize: rem(theme, 18), minHeight: "120px" },
+    xl: { padding: "14px 16px", fontSize: rem(theme, 20), minHeight: "140px" }
+  };
+  const baseStyles = {
+    width: "100%",
+    fontFamily: theme.typography.fontFamily,
+    borderRadius: fieldRadius(theme),
+    border: error ? `${FIELD_BORDER_WIDTH}px solid ${errorColor.main}` : fieldBorder(theme),
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    transition: "all 0.3s ease",
+    resize: customVariant === "resizable" ? "vertical" : "none",
+    outline: "none",
+    ...sizeMap[customSize],
+    "&::placeholder": {
+      color: theme.palette.text.secondary,
+      opacity: 0.7
+    },
+    "&:hover": {
+      borderColor: error ? errorColor.dark : colorPalette.main,
+      backgroundColor: alpha(theme.palette.background.paper, 0.8)
+    },
+    // Focus is two pixels, like every other field's: the second is an inset
+    // shadow, so the 1px resting border can thicken without the box moving.
+    "&:focus": {
+      borderColor: error ? errorColor.main : colorPalette.main,
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: `inset 0 0 0 1px ${error ? errorColor.main : colorPalette.main}, 0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}`
+    }
+  };
+  return {
+    ...baseStyles,
+    ...textareaEmphasisStyles({ theme, colorPalette, glass, gradient, glow })
+  };
+});
+var StyledLabel = styled(InputLabel, {
+  shouldForwardProp: (prop) => !["glass", "error"].includes(prop)
+})(({ theme, glass, error }) => ({
+  marginBottom: theme.spacing(1),
+  fontWeight: 500,
+  color: error ? theme.palette.error.main : theme.palette.text.primary,
+  ...glass && {
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(10px)",
+    padding: "4px 8px",
+    borderRadius: "4px",
+    border: `1px solid ${fieldEdge(theme)}`,
+    display: "inline-block"
+  }
+}));
+var ICON_GUTTER = "40px";
+var TEXTAREA_DEFAULTS = {
+  variant: "default",
+  color: "primary",
+  size: "md",
+  error: false,
+  glassLabel: false,
+  glow: false,
+  glass: false,
+  gradient: false,
+  iconPosition: "start",
+  minRows: 3
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var TextareaShell = ({ testId, label, glassLabel, error, helperText, children }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: { position: "relative", width: "100%" },
+    "data-testid": testId ? `${testId}-wrapper` : void 0,
+    children: [
+      label && /* @__PURE__ */ jsx(StyledLabel, { glass: glassLabel, error, children: label }),
+      children,
+      helperText && /* @__PURE__ */ jsx(FormHelperText, { error, sx: { mt: 1 }, children: helperText })
+    ]
+  }
+);
+var TextareaIcon = ({ icon, iconPosition }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      position: "absolute",
+      top: "12px",
+      ...iconPosition === "start" ? { left: "12px" } : { right: "12px" },
+      color: "text.secondary",
+      pointerEvents: "none",
+      zIndex: 1
+    },
+    children: icon
+  }
+);
+function RichVariant({
+  shell,
+  editor
+}) {
+  return /* @__PURE__ */ jsx(TextareaShell, { ...shell, children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(TextareaRichEditor, { ...editor }) }) });
+}
+var Textarea = (textareaProps) => {
+  const {
+    variant,
+    color,
+    size,
+    error,
+    helperText,
+    label,
+    glassLabel,
+    glow,
+    glass,
+    gradient,
+    icon,
+    iconPosition,
+    minRows,
+    maxRows,
+    style,
+    "data-testid": dataTestId,
+    dataTestId: dataTestIdCamelCase,
+    ...props
+  } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };
+  const { richEditorCopy } = textareaProps;
+  const [richTextValue, setRichTextValue] = useState("");
+  const hasIcon = Boolean(icon);
+  const testId = dataTestId || dataTestIdCamelCase;
+  const textareaStyle = {
+    ...style,
+    // Same gap either side; only which side it applies to changes. The previous
+    // version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose
+    // two branches were identical.
+    ...hasIcon && {
+      [iconPosition === "start" ? "paddingLeft" : "paddingRight"]: ICON_GUTTER
+    }
+  };
+  if (variant === "rich" && richEditorCopy) {
+    return /* @__PURE__ */ jsx(
+      RichVariant,
+      {
+        shell: { testId, label, glassLabel, error, helperText },
+        editor: {
+          copy: richEditorCopy,
+          value: richTextValue,
+          onChange: setRichTextValue,
+          placeholder: props.placeholder,
+          error,
+          glass,
+          color,
+          characterLimit: props.maxLength
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(TextareaShell, { testId, label, glassLabel, error, helperText, children: /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+    hasIcon && /* @__PURE__ */ jsx(TextareaIcon, { icon, iconPosition }),
+    /* @__PURE__ */ jsx(
+      StyledTextarea,
+      {
+        customVariant: variant,
+        customColor: color,
+        customSize: size,
+        glow,
+        glass,
+        gradient,
+        error,
+        minRows: variant === "autosize" ? minRows : void 0,
+        maxRows: variant === "autosize" ? maxRows : void 0,
+        style: textareaStyle,
+        "aria-label": label || props["aria-label"],
+        "data-testid": testId,
+        ...props
+      }
+    )
+  ] }) });
+};
+Textarea.displayName = "Textarea";
+
+export {
+  Textarea
+};
+//# sourceMappingURL=chunk-TQ2557I5.js.map

package/dist/chunk-TQ2557I5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Textarea/Textarea.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport InputLabel from '@mui/material/InputLabel/index.js';\nimport TextareaAutosize from '@mui/material/TextareaAutosize/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React, { lazy, Suspense, useState } from 'react';\n\nimport {\n  getColorFromTheme,\n  textareaEmphasisStyles } from './Textarea.styles';\n\n/**\n * The rich editor is LOADED ON DEMAND, not imported (12-51 follow-up).\n *\n * It renders only for `variant === 'rich'`, but a static import made every\n * consumer of a plain `<Textarea>` pay for it — 387 lines of toolbar plus the\n * MUI `Tooltip`, `IconButton` and `Divider` its formatting buttons need. That\n * is not theoretical: an adopting storefront imports this entry for a one-line\n * order note, and `Tooltip` (8.7 KiB) reached its EAGER chunk through here\n * while nothing on that critical path renders a tooltip at all.\n *\n * `variant` is a prop, so the branch cannot be decided at build time and no\n * amount of tree-shaking removes it. A lazy boundary is what expresses \"only\n * the rich variant pays\", and it costs the rich variant one microtask it can\n * afford — it is a text editor a user has already chosen to open, never a\n * first-paint element.\n */\nconst TextareaRichEditor = lazy(async () => ({\n  default: (await import('./TextareaRichEditor')).TextareaRichEditor }));\nimport type { TextareaProps } from './Textarea.types';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { FIELD_BORDER_WIDTH, fieldBorder } from '../../../tokens/field-height';\nimport { rem } from '../../../tokens/relative';\n\n// Interface for styled component props\ninterface StyledTextareaProps {\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n  error?: boolean;\n  theme?: Theme;\n}\n\n// Glow animation for enhanced visual effects\nconst StyledTextarea = styled(TextareaAutosize, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient', 'error'].includes(\n      prop as string,\n    ) })<StyledTextareaProps>(({\n  theme,\n  customVariant,\n  customColor = 'primary',\n  customSize = 'md',\n  glow,\n  glass,\n  gradient,\n  error }) => {\n  if (!theme) return {};\n  const colorPalette = getColorFromTheme(theme, customColor);\n  const errorColor = theme.palette.error;\n\n  const sizeMap = {\n    xs: { padding: '6px 8px', fontSize: rem(theme, 12), minHeight: '60px' },\n    sm: { padding: '8px 10px', fontSize: rem(theme, 14), minHeight: '80px' },\n    md: { padding: '10px 12px', fontSize: rem(theme, 16), minHeight: '100px' },\n    lg: { padding: '12px 14px', fontSize: rem(theme, 18), minHeight: '120px' },\n    xl: { padding: '14px 16px', fontSize: rem(theme, 20), minHeight: '140px' } };\n\n  const baseStyles = {\n    width: '100%',\n    fontFamily: theme.typography.fontFamily,\n    borderRadius: fieldRadius(theme),\n    border: error ? `${FIELD_BORDER_WIDTH}px solid ${errorColor.main}` : fieldBorder(theme),\n    backgroundColor: theme.palette.background.paper,\n    color: theme.palette.text.primary,\n    transition: 'all 0.3s ease',\n    resize: customVariant === 'resizable' ? 'vertical' : 'none',\n    outline: 'none',\n    ...sizeMap[customSize as keyof typeof sizeMap],\n\n    '&::placeholder': {\n      color: theme.palette.text.secondary,\n      opacity: 0.7 },\n\n    '&:hover': {\n      borderColor: error ? errorColor.dark : colorPalette.main,\n      backgroundColor: alpha(theme.palette.background.paper, 0.8) },\n\n    // Focus is two pixels, like every other field's: the second is an inset\n    // shadow, so the 1px resting border can thicken without the box moving.\n    '&:focus': {\n      borderColor: error ? errorColor.main : colorPalette.main,\n      backgroundColor: theme.palette.background.paper,\n      boxShadow: `inset 0 0 0 1px ${error ? errorColor.main : colorPalette.main}, 0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };\n\n  // Glass morphism effect\n  return {\n    ...baseStyles,\n    ...textareaEmphasisStyles({ theme, colorPalette, glass, gradient, glow }) };\n});\n\nconst StyledLabel = styled(InputLabel, {\n  shouldForwardProp: (prop) => !['glass', 'error'].includes(prop as string) })<{ glass?: boolean; error?: boolean }>(({ theme, glass, error }) => ({\n  marginBottom: theme.spacing(1),\n  fontWeight: 500,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  ...(glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(10px)',\n    padding: '4px 8px',\n    borderRadius: '4px',\n    border: `1px solid ${fieldEdge(theme)}`,\n    display: 'inline-block' }) }));\n\n// IconWrapper - replaced with inline Box component for better TypeScript compatibility\n// const IconWrapper = styled(Box)<{ position: 'start' | 'end' }>(({ theme, position }) => {\n//   const positionStyles = position === 'start' ? { left: '12px' } : { right: '12px' };\n//   return {\n//     position: 'absolute' as const,\n//     top: '12px',\n//     ...positionStyles,\n//     color: theme.palette.text.secondary,\n//     pointerEvents: 'none' as const,\n//     zIndex: 1,\n//   };\n// });\n\n// Rich text toolbar styling\n\nconst ICON_GUTTER = '40px';\n\nconst TEXTAREA_DEFAULTS = {\n  variant: 'default',\n  color: 'primary',\n  size: 'md',\n  error: false,\n  glassLabel: false,\n  glow: false,\n  glass: false,\n  gradient: false,\n  iconPosition: 'start',\n  minRows: 3 } satisfies Partial<TextareaProps>;\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: TextareaProps): Partial<TextareaProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<TextareaProps>;\n\n// Label above, helper text below — identical for the plain and rich variants,\n// which previously duplicated both.\nconst TextareaShell: React.FC<{\n  testId?: string;\n  label?: React.ReactNode;\n  glassLabel: boolean;\n  error: boolean;\n  helperText?: React.ReactNode;\n  children: React.ReactNode;\n}> = ({ testId, label, glassLabel, error, helperText, children }) => (\n  <Box\n    sx={{ position: 'relative', width: '100%' }}\n    data-testid={testId ? `${testId}-wrapper` : undefined}\n  >\n    {label && (\n      <StyledLabel glass={glassLabel} error={error}>\n        {label}\n      </StyledLabel>\n    )}\n\n    {children}\n\n    {helperText && (\n      <FormHelperText error={error} sx={{ mt: 1 }}>\n        {helperText}\n      </FormHelperText>\n    )}\n  </Box>\n);\n\nconst TextareaIcon: React.FC<{\n  icon?: React.ReactNode;\n  iconPosition: 'start' | 'end';\n}> = ({ icon, iconPosition }) => (\n  <Box\n    sx={{\n      position: 'absolute',\n      top: '12px',\n      ...(iconPosition === 'start' ? { left: '12px' } : { right: '12px' }),\n      color: 'text.secondary',\n      pointerEvents: 'none',\n      zIndex: 1 }}\n  >\n    {icon}\n  </Box>\n);\n\n/**\n * The rich variant, kept out of the main component's body.\n *\n * Two reasons rather than one: the `Suspense` boundary and its props belong\n * together with the lazy import above, and the component that renders every\n * OTHER variant stays inside the size the complexity gate allows without\n * anything being suppressed.\n */\nfunction RichVariant({\n  shell,\n  editor }: {\n  shell: Omit<React.ComponentProps<typeof TextareaShell>, 'children'>;\n  editor: React.ComponentProps<typeof TextareaRichEditor>;\n}): React.JSX.Element {\n  return (\n    <TextareaShell {...shell}>\n      {/*\n        `null` rather than a spinner: the editor resolves from the same document\n        the caller is already rendering, so a fallback would flash for a frame\n        and read as a glitch rather than as loading.\n      */}\n      <Suspense fallback={null}>\n        <TextareaRichEditor {...editor} />\n      </Suspense>\n    </TextareaShell>\n  );\n}\n\nexport const Textarea: React.FC<TextareaProps> = (textareaProps) => {\n  const {\n    variant,\n    color,\n    size,\n    error,\n    helperText,\n    label,\n    glassLabel,\n    glow,\n    glass,\n    gradient,\n    icon,\n    iconPosition,\n    minRows,\n    maxRows,\n    style,\n    'data-testid': dataTestId,\n    dataTestId: dataTestIdCamelCase,\n    ...props\n  } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };\n\n  // Read off the props rather than the merged object: the spread widens every\n  // key to optional, which would lose what the variant union already proved.\n  const { richEditorCopy } = textareaProps;\n\n  const [richTextValue, setRichTextValue] = useState('');\n  const hasIcon = Boolean(icon);\n  const testId = dataTestId || dataTestIdCamelCase;\n\n  const textareaStyle = {\n    ...style,\n    // Same gap either side; only which side it applies to changes. The previous\n    // version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose\n    // two branches were identical.\n    ...(hasIcon && {\n      [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: ICON_GUTTER }) };\n\n  // If rich text variant, use the rich text editor\n  if (variant === 'rich' && richEditorCopy) {\n    return (\n      <RichVariant\n        shell={{ testId, label, glassLabel, error, helperText }}\n        editor={{\n          copy: richEditorCopy,\n          value: richTextValue,\n          onChange: setRichTextValue,\n          placeholder: props.placeholder,\n          error,\n          glass,\n          color,\n          characterLimit: props.maxLength }}\n      />\n    );\n  }\n\n  return (\n    <TextareaShell testId={testId} label={label} glassLabel={glassLabel} error={error} helperText={helperText}>\n      <Box sx={{ position: 'relative' }}>\n        {hasIcon && <TextareaIcon icon={icon} iconPosition={iconPosition} />}\n\n        <StyledTextarea\n          customVariant={variant}\n          customColor={color}\n          customSize={size}\n          glow={glow}\n          glass={glass}\n          gradient={gradient}\n          error={error}\n          minRows={variant === 'autosize' ? minRows : undefined}\n          maxRows={variant === 'autosize' ? maxRows : undefined}\n          style={textareaStyle}\n          aria-label={label || props['aria-label']}\n          data-testid={testId}\n          {...props}\n        />\n      </Box>\n    </TextareaShell>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n"],"mappings":"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","names":[]}

package/dist/chunk-TQBRWZA4.js

@@ -0,0 +1,55 @@
+import {
+  buildGridColumns,
+  buildRowActionsColumn,
+  isActionsColumn
+} from "./chunk-KJK2Q35C.js";
+
+// src/components/data-display/DataViews/data-views-columns.ts
+import { useMemo } from "react";
+function computeHideableColumns(columns) {
+  return columns.filter((col) => col.hideable !== false && typeof col.header === "string" && col.header !== "").map((col) => ({ id: col.id, label: col.header }));
+}
+function appendActionsColumn(columns, opts) {
+  const { rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId } = opts;
+  if (!rowActions && !renderRowMenu || columns.some(isActionsColumn)) return columns;
+  return [
+    ...columns,
+    buildRowActionsColumn({
+      rowActions: rowActions ?? [],
+      leading: rowActionsLeading,
+      testIdPrefix,
+      getRowId,
+      renderRowMenu
+    })
+  ];
+}
+function useColumnsWithActions(columns, opts) {
+  const { rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId } = opts;
+  const columnsWithActions = useMemo(
+    () => appendActionsColumn(columns, { rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId }),
+    [columns, rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId]
+  );
+  const allColumnIds = useMemo(() => columnsWithActions.map((col) => col.id), [columnsWithActions]);
+  return { columnsWithActions, allColumnIds };
+}
+function applyOrder(columns, order) {
+  if (!order || order.length === 0) return columns;
+  const byId = new Map(columns.map((column) => [column.id, column]));
+  const ordered = order.map((id) => byId.get(id)).filter((c) => Boolean(c));
+  const seen = new Set(ordered.map((column) => column.id));
+  return [...ordered, ...columns.filter((column) => !seen.has(column.id))];
+}
+function useRenderedColumns(columnsWithActions, visibleColumns, onRowClick, order) {
+  const gridColumns = useMemo(
+    () => buildGridColumns(applyOrder(columnsWithActions, order), visibleColumns, onRowClick),
+    [columnsWithActions, onRowClick, visibleColumns, order]
+  );
+  const hideableColumns = useMemo(() => computeHideableColumns(columnsWithActions), [columnsWithActions]);
+  return { gridColumns, hideableColumns };
+}
+
+export {
+  useColumnsWithActions,
+  useRenderedColumns
+};
+//# sourceMappingURL=chunk-TQBRWZA4.js.map

package/dist/chunk-TQCQCW2P.js

@@ -0,0 +1,103 @@
+import {
+  absoluteInk,
+  neutralTones,
+  shadowInk,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/InteractiveTooltip/InteractiveTooltip.styles.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var pulseAnimation = keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+var SIZE_MAP = {
+  sm: { fontSize: sxRem(12), padding: (theme) => rems(theme, 4, 8) },
+  md: { fontSize: sxRem(14), padding: (theme) => rems(theme, 6, 12) },
+  lg: { fontSize: sxRem(16), padding: (theme) => rems(theme, 8, 16) }
+};
+var getSizeStyles = (size) => SIZE_MAP[size] || SIZE_MAP.md;
+var variantStyles = (theme, variant) => {
+  switch (variant) {
+    case "default":
+      return {
+        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.92),
+        color: absoluteInk(theme).white,
+        boxShadow: `${rems(theme, 0, 4, 12)} ${shadowInk(theme, 0.3)}`
+      };
+    case "dark":
+      return {
+        backgroundColor: absoluteInk(theme).black,
+        color: absoluteInk(theme).white,
+        boxShadow: `${rems(theme, 0, 6, 16)} ${shadowInk(theme, 0.5)}`,
+        border: `1px solid ${sheen(theme, 0.1)}`
+      };
+    case "light":
+      return {
+        backgroundColor: absoluteInk(theme).white,
+        color: neutralTones(theme).inverseSurface,
+        border: `1px solid ${alpha(neutralTones(theme).subtle, 0.4)}`,
+        boxShadow: `${rems(theme, 0, 4, 16)} ${shadowInk(theme, 0.15)}`
+      };
+    case "glass":
+      return {
+        backgroundColor: alpha(theme.palette.background.paper, 0.75),
+        backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+        WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+        border: `1px solid ${alpha(theme.palette.divider, 0.3)}`,
+        color: theme.palette.text.primary,
+        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.12)}`
+      };
+    default:
+      return {};
+  }
+};
+var emphasisStyles = (theme, glow, pulse) => ({
+  ...glow && {
+    boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,
+    filter: "brightness(1.05)"
+  },
+  ...pulse && {
+    animation: `${pulseAnimation} 2s infinite`
+  }
+});
+var tooltipCap = (maxWidth) => (theme) => {
+  const cap = maxWidth ?? 300;
+  return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
+};
+var arrowColor = (theme, variant) => {
+  switch (variant) {
+    case "light":
+      return absoluteInk(theme).white;
+    case "glass":
+      return alpha(theme.palette.background.paper, 0.75);
+    case "dark":
+      return absoluteInk(theme).black;
+    default:
+      return alpha(neutralTones(theme).inverseSurface, 0.92);
+  }
+};
+
+export {
+  getSizeStyles,
+  variantStyles,
+  emphasisStyles,
+  tooltipCap,
+  arrowColor
+};
+//# sourceMappingURL=chunk-TQCQCW2P.js.map

package/dist/chunk-TQCQCW2P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/InteractiveTooltip/InteractiveTooltip.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\nconst pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  70% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nconst SIZE_MAP = {\n  sm: { fontSize: sxRem(12), padding: (theme: Theme) => rems(theme, 4, 8) },\n  md: { fontSize: sxRem(14), padding: (theme: Theme) => rems(theme, 6, 12) },\n  lg: { fontSize: sxRem(16), padding: (theme: Theme) => rems(theme, 8, 16) },\n} as const;\n\nexport const getSizeStyles = (\n  size?: string,\n): { fontSize: (theme: Theme) => string; padding: (theme: Theme) => string } =>\n  SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;\n\nexport const variantStyles = (theme: Theme, variant?: string): CSSObject => {\n  switch (variant) {\n    case 'default':\n      return {\n        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.92),\n        color: absoluteInk(theme).white,\n        boxShadow: `${rems(theme, 0, 4, 12)} ${shadowInk(theme, 0.3)}`,\n      };\n    case 'dark':\n      return {\n        backgroundColor: absoluteInk(theme).black,\n        color: absoluteInk(theme).white,\n        boxShadow: `${rems(theme, 0, 6, 16)} ${shadowInk(theme, 0.5)}`,\n        border: `1px solid ${sheen(theme, 0.1)}`,\n      };\n    case 'light':\n      return {\n        backgroundColor: absoluteInk(theme).white,\n        color: neutralTones(theme).inverseSurface,\n        border: `1px solid ${alpha(neutralTones(theme).subtle, 0.4)}`,\n        boxShadow: `${rems(theme, 0, 4, 16)} ${shadowInk(theme, 0.15)}`,\n      };\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.75),\n        backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n        WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n        border: `1px solid ${alpha(theme.palette.divider, 0.3)}`,\n        color: theme.palette.text.primary,\n        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.12)}`,\n      };\n    default:\n      return {};\n  }\n};\n\n// glow and pulse are independent flags. The three combinations used to be spelled\n// out one by one, but each is just the union of whichever flags are set.\nexport const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({\n  ...(glow && {\n    boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,\n    filter: 'brightness(1.05)',\n  }),\n  ...(pulse && {\n    animation: `${pulseAnimation} 2s infinite`,\n  }),\n});\n\n/**\n * The tooltip's cap: 300 design px unless the caller says otherwise. `sx` has\n * always read a number of 1 or less as a fraction of the parent, and that stays so.\n */\nexport const tooltipCap =\n  (maxWidth: number | undefined) =>\n  (theme: Theme): string => {\n    const cap = maxWidth ?? 300;\n    return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);\n  };\n\nexport const arrowColor = (theme: Theme, variant?: string): string => {\n  switch (variant) {\n    case 'light':\n      return absoluteInk(theme).white;\n    case 'glass':\n      return alpha(theme.palette.background.paper, 0.75);\n    case 'dark':\n      return absoluteInk(theme).black;\n    default:\n      return alpha(neutralTones(theme).inverseSurface, 0.92);\n  }\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-TRHWA74K.js

@@ -0,0 +1,175 @@
+import {
+  onMedia,
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Carousel/Carousel.slide.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SlideCaption = ({
+  title,
+  description,
+  content,
+  image
+}) => /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", zIndex: 1, textAlign: "center", p: 3 }, children: [
+  title && /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "h5",
+      sx: (theme) => ({
+        color: image ? onMedia(theme) : "text.primary",
+        textShadow: image ? `0 ${rems(theme, 2, 4)} ${shadowInk(theme, 0.5)}` : "none",
+        mb: 1
+      }),
+      children: title
+    }
+  ),
+  description && /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "body1",
+      sx: (theme) => ({
+        color: image ? onMedia(theme) : "text.secondary",
+        textShadow: image ? `0 ${rems(theme, 1, 2)} ${shadowInk(theme, 0.5)}` : "none"
+      }),
+      children: description
+    }
+  ),
+  content
+] });
+var CarouselSlide = ({
+  item,
+  index,
+  isActive,
+  variant,
+  clickable,
+  onSelect
+}) => {
+  const theme = useTheme();
+  const content = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: clickable ? "pointer" : "default",
+        position: "relative"
+      },
+      onClick: () => onSelect(item, index),
+      children: [
+        item.image && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "img",
+            src: item.image,
+            alt: item.alt || item.title,
+            sx: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              position: "absolute",
+              top: 0,
+              left: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SlideCaption,
+          {
+            title: item.title,
+            description: item.description,
+            content: item.content,
+            image: item.image
+          }
+        )
+      ]
+    }
+  );
+  if (variant === "cards") {
+    return /* @__PURE__ */ jsx(
+      Paper,
+      {
+        elevation: isActive ? 8 : 2,
+        sx: {
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          transform: isActive ? "scale(1)" : "scale(0.9)",
+          transition: theme.transitions.create(["transform", "box-shadow"])
+        },
+        children: content
+      }
+    );
+  }
+  return content;
+};
+var CarouselTrack = ({
+  items,
+  activeIndex,
+  variant,
+  animation,
+  transition: Transition,
+  clickable,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    "data-testid": "carousel-track",
+    sx: {
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      display: "flex",
+      alignItems: "center"
+    },
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      Transition,
+      {
+        in: index === activeIndex,
+        timeout: 600,
+        ...animation === "flip" && { direction: "left" },
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-testid": `carousel-slide-${index}`,
+            "data-active": index === activeIndex,
+            sx: {
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              display: index === activeIndex ? "block" : "none"
+            },
+            children: /* @__PURE__ */ jsx(
+              CarouselSlide,
+              {
+                item,
+                index,
+                isActive: index === activeIndex,
+                variant,
+                clickable,
+                onSelect
+              }
+            )
+          }
+        )
+      },
+      item.id
+    ))
+  }
+);
+
+export {
+  CarouselSlide,
+  CarouselTrack
+};
+//# sourceMappingURL=chunk-TRHWA74K.js.map

package/dist/chunk-TRHWA74K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.slide.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { CarouselItem, CarouselProps } from './Carousel.types';\nimport { onMedia, shadowInk } from '../../../tokens/ink';\nimport { rems } from '../../../tokens/relative';\n\nexport interface CarouselSlideProps {\n  item: CarouselItem;\n  index: number;\n  isActive: boolean;\n  variant: NonNullable<CarouselProps['variant']>;\n  clickable: boolean;\n  onSelect: (item: CarouselItem, index: number) => void;\n}\n\n/**\n * A slide's caption. Over an image it is white with a shadow so it stays legible\n * against whatever the photograph happens to be; on a bare surface it uses the\n * ordinary text colours.\n */\nconst SlideCaption: React.FC<Pick<CarouselItem, 'title' | 'description' | 'content' | 'image'>> = ({\n  title,\n  description,\n  content,\n  image,\n}) => (\n  <Box sx={{ position: 'relative', zIndex: 1, textAlign: 'center', p: 3 }}>\n    {title && (\n      <Typography\n        variant=\"h5\"\n        sx={(theme) => ({\n          color: image ? onMedia(theme) : 'text.primary',\n          textShadow: image ? `0 ${rems(theme, 2, 4)} ${shadowInk(theme, 0.5)}` : 'none',\n          mb: 1,\n        })}\n      >\n        {title}\n      </Typography>\n    )}\n\n    {description && (\n      <Typography\n        variant=\"body1\"\n        sx={(theme) => ({\n          color: image ? onMedia(theme) : 'text.secondary',\n          textShadow: image ? `0 ${rems(theme, 1, 2)} ${shadowInk(theme, 0.5)}` : 'none',\n        })}\n      >\n        {description}\n      </Typography>\n    )}\n\n    {content}\n  </Box>\n);\n\nexport const CarouselSlide: React.FC<CarouselSlideProps> = ({\n  item,\n  index,\n  isActive,\n  variant,\n  clickable,\n  onSelect,\n}) => {\n  const theme = useTheme();\n\n  const content = (\n    <Box\n      sx={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        alignItems: 'center',\n        cursor: clickable ? 'pointer' : 'default',\n        position: 'relative',\n      }}\n      onClick={() => onSelect(item, index)}\n    >\n      {item.image && (\n        <Box\n          component=\"img\"\n          src={item.image}\n          alt={item.alt || item.title}\n          sx={{\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n          }}\n        />\n      )}\n\n      <SlideCaption\n        title={item.title}\n        description={item.description}\n        content={item.content}\n        image={item.image}\n      />\n    </Box>\n  );\n\n  // The cards variant gives each slide its own raised surface, and lifts the\n  // active one further so the stack reads as a deck rather than a strip.\n  if (variant === 'cards') {\n    return (\n      <Paper\n        elevation={isActive ? 8 : 2}\n        sx={{\n          width: '100%',\n          height: '100%',\n          overflow: 'hidden',\n          transform: isActive ? 'scale(1)' : 'scale(0.9)',\n          transition: theme.transitions.create(['transform', 'box-shadow']),\n        }}\n      >\n        {content}\n      </Paper>\n    );\n  }\n\n  return content;\n};\n\nexport interface CarouselTrackProps {\n  items: CarouselItem[];\n  activeIndex: number;\n  variant: NonNullable<CarouselProps['variant']>;\n  animation: NonNullable<CarouselProps['animation']>;\n  transition: React.ElementType;\n  clickable: boolean;\n  onSelect: (item: CarouselItem, index: number) => void;\n}\n\n/**\n * The slides themselves. Every slide stays mounted and absolutely positioned so\n * the transition has both the outgoing and incoming one to work with; `display`\n * is what actually hides the rest.\n */\nexport const CarouselTrack: React.FC<CarouselTrackProps> = ({\n  items,\n  activeIndex,\n  variant,\n  animation,\n  transition: Transition,\n  clickable,\n  onSelect,\n}) => (\n  <Box\n    data-testid=\"carousel-track\"\n    sx={{\n      width: '100%',\n      height: '100%',\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n    }}\n  >\n    {items.map((item, index) => (\n      <Transition\n        key={item.id}\n        in={index === activeIndex}\n        timeout={600}\n        {...(animation === 'flip' && { direction: 'left' as const })}\n      >\n        <Box\n          data-testid={`carousel-slide-${index}`}\n          data-active={index === activeIndex}\n          sx={{\n            position: 'absolute',\n            width: '100%',\n            height: '100%',\n            display: index === activeIndex ? 'block' : 'none',\n          }}\n        >\n          <CarouselSlide\n            item={item}\n            index={index}\n            isActive={index === activeIndex}\n            variant={variant}\n            clickable={clickable}\n            onSelect={onSelect}\n          />\n        </Box>\n      </Transition>\n    ))}\n  </Box>\n);\n"],"mappings":";;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AA2BvB,SAEI,KAFJ;AANF,IAAM,eAA4F,CAAC;AAAA,EACjG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,OAAI,IAAI,EAAE,UAAU,YAAY,QAAQ,GAAG,WAAW,UAAU,GAAG,EAAE,GACnE;AAAA,WACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,IAAI,CAAC,WAAW;AAAA,QACd,OAAO,QAAQ,QAAQ,KAAK,IAAI;AAAA,QAChC,YAAY,QAAQ,KAAK,KAAK,OAAO,GAAG,CAAC,CAAC,IAAI,UAAU,OAAO,GAAG,CAAC,KAAK;AAAA,QACxE,IAAI;AAAA,MACN;AAAA,MAEC;AAAA;AAAA,EACH;AAAA,EAGD,eACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,IAAI,CAAC,WAAW;AAAA,QACd,OAAO,QAAQ,QAAQ,KAAK,IAAI;AAAA,QAChC,YAAY,QAAQ,KAAK,KAAK,OAAO,GAAG,CAAC,CAAC,IAAI,UAAU,OAAO,GAAG,CAAC,KAAK;AAAA,MAC1E;AAAA,MAEC;AAAA;AAAA,EACH;AAAA,EAGD;AAAA,GACH;AAGK,IAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,QAAQ,YAAY,YAAY;AAAA,QAChC,UAAU;AAAA,MACZ;AAAA,MACA,SAAS,MAAM,SAAS,MAAM,KAAK;AAAA,MAElC;AAAA,aAAK,SACJ;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK,KAAK;AAAA,YACV,KAAK,KAAK,OAAO,KAAK;AAAA,YACtB,IAAI;AAAA,cACF,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,UAAU;AAAA,cACV,KAAK;AAAA,cACL,MAAM;AAAA,YACR;AAAA;AAAA,QACF;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,KAAK;AAAA,YACZ,aAAa,KAAK;AAAA,YAClB,SAAS,KAAK;AAAA,YACd,OAAO,KAAK;AAAA;AAAA,QACd;AAAA;AAAA;AAAA,EACF;AAKF,MAAI,YAAY,SAAS;AACvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW,IAAI;AAAA,QAC1B,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,WAAW,WAAW,aAAa;AAAA,UACnC,YAAY,MAAM,YAAY,OAAO,CAAC,aAAa,YAAY,CAAC;AAAA,QAClE;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAiBO,IAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,eAAY;AAAA,IACZ,IAAI;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,SAAS;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IAEC,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,MAAC;AAAA;AAAA,QAEC,IAAI,UAAU;AAAA,QACd,SAAS;AAAA,QACR,GAAI,cAAc,UAAU,EAAE,WAAW,OAAgB;AAAA,QAE1D;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,kBAAkB,KAAK;AAAA,YACpC,eAAa,UAAU;AAAA,YACvB,IAAI;AAAA,cACF,UAAU;AAAA,cACV,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS,UAAU,cAAc,UAAU;AAAA,YAC7C;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,UAAU,UAAU;AAAA,gBACpB;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,MAvBK,KAAK;AAAA,IAwBZ,CACD;AAAA;AACH;","names":[]}