@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-QG73YT6D.js

@@ -0,0 +1,82 @@
+import {
+  configureTypeScriptDefaults,
+  registerEditorThemes,
+  registerSaveShortcut,
+  resolveEditorTheme,
+  scheduleAutoFormat
+} from "./chunk-HD6ZNARS.js";
+
+// src/components/form/CodeEditor/CodeEditor.hooks.ts
+import { useTheme } from "@mui/material/styles/index.js";
+import React, { useEffect, useRef } from "react";
+var COPIED_FEEDBACK_MS = 2e3;
+var useFullscreen = () => {
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
+  useEffect(() => {
+    if (!isFullscreen) return;
+    const handleEsc = (event) => {
+      if (event.key === "Escape") setIsFullscreen(false);
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [isFullscreen]);
+  return { isFullscreen, toggleFullscreen: () => setIsFullscreen((prev) => !prev) };
+};
+var useCodeEditor = ({
+  themeProp,
+  wordWrap,
+  autoFormat,
+  readOnly,
+  onSave
+}) => {
+  const theme = useTheme();
+  const editorRef = useRef(null);
+  const monacoRef = useRef(null);
+  const { isFullscreen, toggleFullscreen } = useFullscreen();
+  const [isWrapped, setIsWrapped] = React.useState(wordWrap);
+  const [isCopied, setIsCopied] = React.useState(false);
+  const editorTheme = React.useMemo(
+    () => resolveEditorTheme(themeProp, theme.palette.mode),
+    [themeProp, theme.palette.mode]
+  );
+  const handleEditorDidMount = (mountedEditor, monaco) => {
+    editorRef.current = mountedEditor;
+    monacoRef.current = monaco;
+    registerEditorThemes(monaco, theme);
+    configureTypeScriptDefaults(monaco);
+    scheduleAutoFormat(mountedEditor, autoFormat && !readOnly);
+    registerSaveShortcut(mountedEditor, monaco, onSave);
+  };
+  const handleCopy = async () => {
+    if (!editorRef.current || !navigator.clipboard?.writeText) return;
+    try {
+      await navigator.clipboard.writeText(editorRef.current.getValue());
+      setIsCopied(true);
+      window.setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MS);
+    } catch {
+    }
+  };
+  const handleWrapToggle = () => {
+    setIsWrapped(!isWrapped);
+    editorRef.current?.updateOptions({ wordWrap: !isWrapped ? "on" : "off" });
+  };
+  const handleFormat = () => {
+    if (!readOnly) editorRef.current?.getAction("editor.action.formatDocument")?.run();
+  };
+  return {
+    editorTheme,
+    isFullscreen,
+    isWrapped,
+    isCopied,
+    handleEditorDidMount,
+    handleCopy,
+    handleFullscreenToggle: toggleFullscreen,
+    handleWrapToggle,
+    handleFormat
+  };
+};
+
+export {
+  useCodeEditor
+};
+//# sourceMappingURL=chunk-QG73YT6D.js.map

package/dist/chunk-QG73YT6D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CodeEditor/CodeEditor.hooks.ts"],"sourcesContent":["import type { Monaco } from '@monaco-editor/react';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { editor } from 'monaco-editor';\nimport React, { useEffect, useRef } from 'react';\n\nimport {\n  configureTypeScriptDefaults,\n  registerEditorThemes,\n  registerSaveShortcut,\n  resolveEditorTheme,\n  scheduleAutoFormat,\n} from './CodeEditor.monaco';\n\nconst COPIED_FEEDBACK_MS = 2000;\n\n// Escape leaves fullscreen, so the flag and its listener belong together.\nconst useFullscreen = () => {\n  const [isFullscreen, setIsFullscreen] = React.useState(false);\n\n  useEffect(() => {\n    if (!isFullscreen) return;\n\n    const handleEsc = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') setIsFullscreen(false);\n    };\n\n    window.addEventListener('keydown', handleEsc);\n    return () => window.removeEventListener('keydown', handleEsc);\n  }, [isFullscreen]);\n\n  return { isFullscreen, toggleFullscreen: () => setIsFullscreen((prev) => !prev) };\n};\n\n// All of the editor's own state: the Monaco handles, the three toggles, and the\n// handlers that drive them.\nexport const useCodeEditor = ({\n  themeProp,\n  wordWrap,\n  autoFormat,\n  readOnly,\n  onSave,\n}: {\n  themeProp: string;\n  wordWrap: boolean;\n  autoFormat: boolean;\n  readOnly: boolean;\n  onSave?: (value: string) => void;\n}) => {\n  const theme = useTheme();\n  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);\n  const monacoRef = useRef<Monaco | null>(null);\n  const { isFullscreen, toggleFullscreen } = useFullscreen();\n  const [isWrapped, setIsWrapped] = React.useState(wordWrap);\n  const [isCopied, setIsCopied] = React.useState(false);\n\n  const editorTheme = React.useMemo(\n    () => resolveEditorTheme(themeProp, theme.palette.mode),\n    [themeProp, theme.palette.mode],\n  );\n\n  const handleEditorDidMount = (mountedEditor: editor.IStandaloneCodeEditor, monaco: Monaco) => {\n    editorRef.current = mountedEditor;\n    monacoRef.current = monaco;\n\n    registerEditorThemes(monaco, theme);\n    configureTypeScriptDefaults(monaco);\n    scheduleAutoFormat(mountedEditor, autoFormat && !readOnly);\n    registerSaveShortcut(mountedEditor, monaco, onSave);\n  };\n\n  // No-ops where the clipboard API is unavailable, as in jsdom.\n  const handleCopy = async () => {\n    if (!editorRef.current || !navigator.clipboard?.writeText) return;\n\n    try {\n      await navigator.clipboard.writeText(editorRef.current.getValue());\n      setIsCopied(true);\n      window.setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MS);\n    } catch {\n      // Silently handle clipboard errors in test environments\n    }\n  };\n\n  const handleWrapToggle = () => {\n    setIsWrapped(!isWrapped);\n    editorRef.current?.updateOptions({ wordWrap: !isWrapped ? 'on' : 'off' });\n  };\n\n  const handleFormat = () => {\n    if (!readOnly) editorRef.current?.getAction('editor.action.formatDocument')?.run();\n  };\n\n  return {\n    editorTheme,\n    isFullscreen,\n    isWrapped,\n    isCopied,\n    handleEditorDidMount,\n    handleCopy,\n    handleFullscreenToggle: toggleFullscreen,\n    handleWrapToggle,\n    handleFormat,\n  };\n};\n"],"mappings":";;;;;;;;;AACA,SAAS,gBAAgB;AAEzB,OAAO,SAAS,WAAW,cAAc;AAUzC,IAAM,qBAAqB;AAG3B,IAAM,gBAAgB,MAAM;AAC1B,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,KAAK;AAE5D,YAAU,MAAM;AACd,QAAI,CAAC,aAAc;AAEnB,UAAM,YAAY,CAAC,UAAoC;AACrD,UAAI,MAAM,QAAQ,SAAU,iBAAgB,KAAK;AAAA,IACnD;AAEA,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM,OAAO,oBAAoB,WAAW,SAAS;AAAA,EAC9D,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO,EAAE,cAAc,kBAAkB,MAAM,gBAAgB,CAAC,SAAS,CAAC,IAAI,EAAE;AAClF;AAIO,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,YAAY,OAA4C,IAAI;AAClE,QAAM,YAAY,OAAsB,IAAI;AAC5C,QAAM,EAAE,cAAc,iBAAiB,IAAI,cAAc;AACzD,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,QAAQ;AACzD,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AAEpD,QAAM,cAAc,MAAM;AAAA,IACxB,MAAM,mBAAmB,WAAW,MAAM,QAAQ,IAAI;AAAA,IACtD,CAAC,WAAW,MAAM,QAAQ,IAAI;AAAA,EAChC;AAEA,QAAM,uBAAuB,CAAC,eAA6C,WAAmB;AAC5F,cAAU,UAAU;AACpB,cAAU,UAAU;AAEpB,yBAAqB,QAAQ,KAAK;AAClC,gCAA4B,MAAM;AAClC,uBAAmB,eAAe,cAAc,CAAC,QAAQ;AACzD,yBAAqB,eAAe,QAAQ,MAAM;AAAA,EACpD;AAGA,QAAM,aAAa,YAAY;AAC7B,QAAI,CAAC,UAAU,WAAW,CAAC,UAAU,WAAW,UAAW;AAE3D,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,UAAU,QAAQ,SAAS,CAAC;AAChE,kBAAY,IAAI;AAChB,aAAO,WAAW,MAAM,YAAY,KAAK,GAAG,kBAAkB;AAAA,IAChE,QAAQ;AAAA,IAER;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAC7B,iBAAa,CAAC,SAAS;AACvB,cAAU,SAAS,cAAc,EAAE,UAAU,CAAC,YAAY,OAAO,MAAM,CAAC;AAAA,EAC1E;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,CAAC,SAAU,WAAU,SAAS,UAAU,8BAA8B,GAAG,IAAI;AAAA,EACnF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-QHUTSAFG.js

@@ -0,0 +1,194 @@
+import {
+  modeInk,
+  shadowInk,
+  sheen,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+import {
+  EFFECT_GLOW
+} from "./chunk-N3GAFIXG.js";
+
+// src/components/navigation/Breadcrumbs/Breadcrumbs.styles.tsx
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+var pulse = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.brandIndigo, 0.4)};
+  }
+  70% {
+    box-shadow: 0 0 0 10px ${alpha(EFFECT_GLOW.brandIndigo, 0)};
+  }
+  100% {
+    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.brandIndigo, 0)};
+  }
+`;
+var BAR_VARIANTS = {
+  glass: (theme, elevation) => ({
+    background: theme.palette.mode === "dark" ? alpha(uiInk(theme).glassSlate, 0.7) : sheen(theme, 0.7),
+    backdropFilter: "blur(10px)",
+    WebkitBackdropFilter: "blur(10px)",
+    border: `1px solid ${alpha(modeInk(theme), 0.1)}`,
+    boxShadow: theme.palette.mode === "dark" ? `0 ${elevation * 4}px ${elevation * 8}px ${shadowInk(theme, 0.3)}, inset 0 1px 0 ${sheen(theme, 0.1)}` : `0 ${elevation * 4}px ${elevation * 8}px ${shadowInk(theme, 0.08)}, inset 0 1px 0 ${sheen(theme, 0.8)}`
+  }),
+  elevated: (theme, elevation) => ({
+    background: theme.palette.background.paper,
+    boxShadow: theme.shadows[elevation] || theme.shadows[1],
+    borderRadius: theme.spacing(1.5)
+  }),
+  outlined: (theme, _elevation) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.spacing(1)
+  })
+};
+var separatorStyles = (theme, size, color, _visualStyle) => ({
+  "& .MuiBreadcrumbs-separator": {
+    marginLeft: theme.spacing(size === "sm" ? 0.5 : size === "lg" ? 1.5 : 1),
+    marginRight: theme.spacing(size === "sm" ? 0.5 : size === "lg" ? 1.5 : 1),
+    opacity: 0.6,
+    transition: "all 0.2s ease",
+    ...color === "primary" && {
+      color: theme.palette.primary.main
+    },
+    ...color === "secondary" && {
+      color: theme.palette.secondary.main
+    }
+  }
+});
+var barVariantStyles = (theme, visualStyle, elevation) => visualStyle ? BAR_VARIANTS[visualStyle]?.(theme, elevation) ?? {} : {};
+var breadcrumbsBarStyles = ({
+  theme,
+  size,
+  color,
+  visualStyle,
+  elevation = 0
+}) => ({
+  padding: theme.spacing(size === "sm" ? 0.75 : size === "lg" ? 1.5 : 1, 2),
+  borderRadius: theme.spacing(visualStyle === "glass" ? 2 : 1),
+  ...barVariantStyles(theme, visualStyle, elevation),
+  animation: `${slideIn} 0.3s ease-out`,
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  position: "relative",
+  // Glass morphism effect
+  // Elevated variant
+  // Outlined variant
+  "& .MuiBreadcrumbs-ol": {
+    alignItems: "center",
+    flexWrap: "nowrap",
+    [theme.breakpoints.down("sm")]: {
+      flexWrap: "wrap",
+      gap: theme.spacing(0.5)
+    }
+  },
+  ...separatorStyles(theme, size, color, visualStyle),
+  "&:hover": {
+    ...visualStyle === "glass" && {
+      background: theme.palette.mode === "dark" ? alpha(uiInk(theme).glassSlate, 0.85) : sheen(theme, 0.85),
+      boxShadow: theme.palette.mode === "dark" ? `0 ${elevation * 6}px ${elevation * 12}px ${shadowInk(theme, 0.4)}` : `0 ${elevation * 6}px ${elevation * 12}px ${shadowInk(theme, 0.12)}`
+    }
+  }
+});
+var linkGlassIdleStyles = (theme) => ({
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+    opacity: 0,
+    transition: "opacity 0.3s ease",
+    borderRadius: "inherit"
+  }
+});
+var linkActiveStyles = (theme, visualStyle) => ({
+  pointerEvents: "none",
+  cursor: "default",
+  color: theme.palette.primary.main,
+  fontWeight: 600,
+  ...visualStyle === "glass" && {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+    animation: `${pulse} 2s infinite`
+  }
+});
+var linkHoverStyles = (theme, visualStyle) => ({
+  '&:hover, &[data-hover="true"]': {
+    color: theme.palette.primary.main,
+    backgroundColor: alpha(theme.palette.primary.main, visualStyle === "glass" ? 0.1 : 0.08),
+    transform: "translateY(-1px)",
+    "&::before": {
+      opacity: 1
+    },
+    "& .breadcrumb-icon": {
+      transform: "scale(1.1)"
+    }
+  }
+});
+var breadcrumbLinkStyles = ({
+  theme,
+  size,
+  active,
+  visualStyle
+}) => ({
+  ...visualStyle === "glass" && !active ? linkGlassIdleStyles(theme) : {},
+  ...active ? linkActiveStyles(theme, visualStyle) : {},
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  textDecoration: "none",
+  fontSize: rem(theme, size === "sm" ? 14 : size === "lg" ? 18 : 16),
+  fontWeight: active ? 600 : 400,
+  color: active ? theme.palette.text.primary : theme.palette.text.secondary,
+  padding: theme.spacing(0.5, 0.75),
+  borderRadius: theme.spacing(0.75),
+  position: "relative",
+  overflow: "hidden",
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  // Add subtle background for glass variant
+  ...linkHoverStyles(theme, visualStyle),
+  "&:active": {
+    transform: "translateY(0)",
+    backgroundColor: alpha(theme.palette.primary.main, 0.12)
+  },
+  "&:focus-visible": {
+    outline: `2px solid ${theme.palette.primary.main}`,
+    outlineOffset: 2,
+    backgroundColor: alpha(theme.palette.primary.main, 0.04)
+  },
+  "& .breadcrumb-icon": {
+    transition: "transform 0.2s ease"
+  },
+  // Mobile responsiveness
+  [theme.breakpoints.down("sm")]: {
+    fontSize: rem(theme, size === "lg" ? 16 : size === "sm" ? 12 : 14),
+    padding: theme.spacing(0.375, 0.5)
+  }
+});
+var sizeIconMap = {
+  xs: "small",
+  sm: "small",
+  md: "small",
+  lg: "medium",
+  xl: "medium"
+};
+
+export {
+  slideIn,
+  pulse,
+  breadcrumbsBarStyles,
+  breadcrumbLinkStyles,
+  sizeIconMap
+};
+//# sourceMappingURL=chunk-QHUTSAFG.js.map

package/dist/chunk-QHUTSAFG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Breadcrumbs/Breadcrumbs.styles.tsx"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { modeInk, shadowInk, sheen, uiInk } from '../../../tokens/ink';\nimport { EFFECT_GLOW } from '../../../tokens/ink.core';\nimport { rem } from '../../../tokens/relative';\n\nexport const slideIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nexport const pulse = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.brandIndigo, 0.4)};\n  }\n  70% {\n    box-shadow: 0 0 0 10px ${alpha(EFFECT_GLOW.brandIndigo, 0)};\n  }\n  100% {\n    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.brandIndigo, 0)};\n  }\n`;\n\nconst BAR_VARIANTS: Record<string, (theme: Theme, elevation: number) => CSSObject> = {\n  glass: (theme, elevation) => ({\n      background:\n        theme.palette.mode === 'dark' ? alpha(uiInk(theme).glassSlate, 0.7) : sheen(theme, 0.7),\n      backdropFilter: 'blur(10px)',\n      WebkitBackdropFilter: 'blur(10px)',\n      border: `1px solid ${alpha(modeInk(theme), 0.1)}`,\n      boxShadow:\n        theme.palette.mode === 'dark'\n          ? `0 ${elevation * 4}px ${elevation * 8}px ${shadowInk(theme, 0.3)}, inset 0 1px 0 ${sheen(theme, 0.1)}`\n          : `0 ${elevation * 4}px ${elevation * 8}px ${shadowInk(theme, 0.08)}, inset 0 1px 0 ${sheen(theme, 0.8)}` }),\n  elevated: (theme, elevation) => ({\n      background: theme.palette.background.paper,\n      boxShadow: theme.shadows[elevation] || theme.shadows[1],\n      borderRadius: theme.spacing(1.5) }),\n  outlined: (theme, _elevation) => ({\n      border: `1px solid ${theme.palette.divider}`,\n      borderRadius: theme.spacing(1) }) };\n\n// Spacing and colour for the separator glyphs between crumbs.\nconst separatorStyles = (\n  theme: Theme,\n  size: string | undefined,\n  color: string | undefined,\n  _visualStyle: string | undefined,\n): CSSObject => ({\n  '& .MuiBreadcrumbs-separator': {\n      marginLeft: theme.spacing(size === 'sm' ? 0.5 : size === 'lg' ? 1.5 : 1),\n      marginRight: theme.spacing(size === 'sm' ? 0.5 : size === 'lg' ? 1.5 : 1),\n      opacity: 0.6,\n      transition: 'all 0.2s ease',\n      ...(color === 'primary' && {\n        color: theme.palette.primary.main }),\n      ...(color === 'secondary' && {\n        color: theme.palette.secondary.main }) } });\n\n// Only one visual style applies at a time, so a lookup replaces three mutually\n// exclusive spreads.\nconst barVariantStyles = (theme: Theme, visualStyle: string | undefined, elevation: number): CSSObject =>\n  visualStyle ? (BAR_VARIANTS[visualStyle]?.(theme, elevation) ?? {}) : {};\n\n// The bar's own styling, lifted out so the styled() callback is a single spread\n// rather than seventy lines of conditionals.\nexport const breadcrumbsBarStyles = ({\n  theme,\n  size,\n  color,\n  visualStyle,\n  elevation = 0 }: {\n  theme: Theme;\n  size?: string;\n  color?: string;\n  visualStyle?: string;\n  elevation?: number;\n}): CSSObject => ({\n    padding: theme.spacing(size === 'sm' ? 0.75 : size === 'lg' ? 1.5 : 1, 2),\n    borderRadius: theme.spacing(visualStyle === 'glass' ? 2 : 1),\n  ...barVariantStyles(theme, visualStyle, elevation),\n    animation: `${slideIn} 0.3s ease-out`,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    position: 'relative',\n\n    // Glass morphism effect\n\n\n    // Elevated variant\n\n\n    // Outlined variant\n\n\n    '& .MuiBreadcrumbs-ol': {\n      alignItems: 'center',\n      flexWrap: 'nowrap',\n      [theme.breakpoints.down('sm')]: {\n        flexWrap: 'wrap',\n        gap: theme.spacing(0.5) } },\n\n    ...separatorStyles(theme, size, color, visualStyle),\n\n\n    '&:hover': {\n      ...(visualStyle === 'glass' && {\n        background:\n          theme.palette.mode === 'dark' ? alpha(uiInk(theme).glassSlate, 0.85) : sheen(theme, 0.85),\n        boxShadow:\n          theme.palette.mode === 'dark'\n            ? `0 ${elevation * 6}px ${elevation * 12}px ${shadowInk(theme, 0.4)}`\n            : `0 ${elevation * 6}px ${elevation * 12}px ${shadowInk(theme, 0.12)}` }) } });\n\n// The idle glass treatment and the active-crumb treatment are mutually\n// exclusive; keeping them as named pieces takes both branches out of the main\n// style function.\nconst linkGlassIdleStyles = (theme: Theme): CSSObject => ({\n        '&::before': {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,\n          opacity: 0,\n          transition: 'opacity 0.3s ease',\n          borderRadius: 'inherit' } });\n\nconst linkActiveStyles = (theme: Theme, visualStyle?: string): CSSObject => ({\n      pointerEvents: 'none',\n      cursor: 'default',\n      color: theme.palette.primary.main,\n      fontWeight: 600,\n\n      ...(visualStyle === 'glass' && {\n        background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,\n        animation: `${pulse} 2s infinite` }) });\n\n// Hover treatment. The tint is a touch stronger on the glass variant so it still\n// reads against the translucent bar.\nconst linkHoverStyles = (theme: Theme, visualStyle?: string): CSSObject => ({\n  '&:hover, &[data-hover=\"true\"]': {\n      color: theme.palette.primary.main,\n      backgroundColor: alpha(theme.palette.primary.main, visualStyle === 'glass' ? 0.1 : 0.08),\n      transform: 'translateY(-1px)',\n\n      '&::before': {\n        opacity: 1 },\n\n      '& .breadcrumb-icon': {\n        transform: 'scale(1.1)' } } });\n\nexport const breadcrumbLinkStyles = ({\n  theme,\n  size,\n  active,\n  visualStyle }: {\n  theme: Theme;\n  size?: string;\n  active?: boolean;\n  visualStyle?: string;\n}): CSSObject => ({\n  ...(visualStyle === 'glass' && !active ? linkGlassIdleStyles(theme) : {}),\n  ...(active ? linkActiveStyles(theme, visualStyle) : {}),\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    textDecoration: 'none',\n    fontSize: rem(theme, size === 'sm' ? 14 : size === 'lg' ? 18 : 16),\n    fontWeight: active ? 600 : 400,\n    color: active ? theme.palette.text.primary : theme.palette.text.secondary,\n    padding: theme.spacing(0.5, 0.75),\n    borderRadius: theme.spacing(0.75),\n    position: 'relative',\n    overflow: 'hidden',\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n\n    // Add subtle background for glass variant\n\n\n  ...linkHoverStyles(theme, visualStyle),\n\n\n    '&:active': {\n      transform: 'translateY(0)',\n      backgroundColor: alpha(theme.palette.primary.main, 0.12) },\n\n    '&:focus-visible': {\n      outline: `2px solid ${theme.palette.primary.main}`,\n      outlineOffset: 2,\n      backgroundColor: alpha(theme.palette.primary.main, 0.04) },\n\n\n\n    '& .breadcrumb-icon': {\n      transition: 'transform 0.2s ease' },\n\n    // Mobile responsiveness\n    [theme.breakpoints.down('sm')]: {\n      fontSize: rem(theme, size === 'lg' ? 16 : size === 'sm' ? 12 : 14),\n      padding: theme.spacing(0.375, 0.5) } });\n\nexport const sizeIconMap = {\n  xs: 'small',\n  sm: 'small',\n  md: 'small',\n  lg: 'medium',\n  xl: 'medium',\n} as const;\n"],"mappings":"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","names":[]}

package/dist/chunk-QKMJUOVH.js

@@ -0,0 +1,51 @@
+import {
+  ICON_PATHS
+} from "./chunk-KEVPUBOE.js";
+import {
+  iconFill
+} from "./chunk-QWBQVQRG.js";
+import {
+  iconSize
+} from "./chunk-RTSK5OZT.js";
+import {
+  useUiTheme
+} from "./chunk-A4OCNJWW.js";
+import {
+  resolveTestId
+} from "./chunk-TYJR4GOF.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/icons/Icon.tsx
+import SvgIcon from "@mui/material/SvgIcon/index.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Icon = React.forwardRef(
+  ({ name, size, color, label, className, style, ...rest }, ref) => {
+    const theme = useUiTheme();
+    const fill = iconFill(theme, color, "currentColor");
+    const testId = resolveTestId(rest, `icon-${name}`);
+    return /* @__PURE__ */ jsx(
+      SvgIcon,
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        className,
+        style,
+        sx: { fontSize: sxRem(iconSize(size)), color: fill },
+        titleAccess: label,
+        "aria-hidden": label ? void 0 : true,
+        "data-testid": testId,
+        "data-icon": name,
+        children: ICON_PATHS[name].map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+      }
+    );
+  }
+);
+Icon.displayName = "Icon";
+
+export {
+  Icon
+};
+//# sourceMappingURL=chunk-QKMJUOVH.js.map

package/dist/chunk-QKMJUOVH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons/Icon.tsx"],"sourcesContent":["import SvgIcon from '@mui/material/SvgIcon/index.js';\nimport * as React from 'react';\n\nimport { iconFill } from './icon-color';\nimport { iconSize, type IconBaseProps } from './Icon.types';\nimport { ICON_PATHS } from './paths.generated';\nimport { resolveTestId } from '../platform/test-id';\nimport { sxRem } from '../tokens/relative';\nimport { useUiTheme } from '../provider/use-ui-theme';\n\nexport interface IconProps extends IconBaseProps {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n/**\n * The web `Icon`: MUI's `SvgIcon` drawing the generated path, so a glyph named\n * here is pixel-for-pixel the one `@mui/icons-material` would draw — and the one\n * the native `Icon` draws from the same path data.\n */\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ name, size, color, label, className, style, ...rest }, ref) => {\n    const theme = useUiTheme();\n    const fill = iconFill(theme, color, 'currentColor');\n    const testId = resolveTestId(rest, `icon-${name}`);\n\n    return (\n      <SvgIcon\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        className={className}\n        style={style}\n        sx={{ fontSize: sxRem(iconSize(size)), color: fill }}\n        titleAccess={label}\n        aria-hidden={label ? undefined : true}\n        data-testid={testId}\n        data-icon={name}\n      >\n        {ICON_PATHS[name].map((d) => (\n          <path key={d} d={d} />\n        ))}\n      </SvgIcon>\n    );\n  },\n);\n\nIcon.displayName = 'Icon';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,aAAa;AACpB,YAAY,WAAW;AAsCb;AAnBH,IAAM,OAAa;AAAA,EACxB,CAAC,EAAE,MAAM,MAAM,OAAO,OAAO,WAAW,OAAO,GAAG,KAAK,GAAG,QAAQ;AAChE,UAAM,QAAQ,WAAW;AACzB,UAAM,OAAO,SAAS,OAAO,OAAO,cAAc;AAClD,UAAM,SAAS,cAAc,MAAM,QAAQ,IAAI,EAAE;AAEjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,IAAI,EAAE,UAAU,MAAM,SAAS,IAAI,CAAC,GAAG,OAAO,KAAK;AAAA,QACnD,aAAa;AAAA,QACb,eAAa,QAAQ,SAAY;AAAA,QACjC,eAAa;AAAA,QACb,aAAW;AAAA,QAEV,qBAAW,IAAI,EAAE,IAAI,CAAC,MACrB,oBAAC,UAAa,KAAH,CAAS,CACrB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":[]}

package/dist/chunk-QO6QWBDI.js

@@ -0,0 +1,142 @@
+import {
+  SIZE_MAP,
+  makeTestIds,
+  resolveLoadingStateProps
+} from "./chunk-7DFEKTT7.js";
+import {
+  SKELETON_FULL_ROW_WIDTH,
+  SKELETON_LAST_ROW_WIDTH,
+  SKELETON_MESSAGE_MARGIN_TOP_UNITS,
+  SKELETON_PADDING_UNITS,
+  SKELETON_RADIUS,
+  SKELETON_ROW_GAP_UNITS,
+  SKELETON_ROW_HEIGHT,
+  SPINNER_GAP_UNITS,
+  SPINNER_MIN_HEIGHT,
+  SPINNER_PADDING_UNITS
+} from "./chunk-YSTHOE66.js";
+import {
+  Skeleton
+} from "./chunk-7F7TTOYN.js";
+import {
+  resolveTestId
+} from "./chunk-TYJR4GOF.js";
+
+// src/components/data-display/LoadingState/LoadingState.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LoadingMessage = ({ message, size, testIds, sx }) => message ? /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: SIZE_MAP[size].text,
+    color: "text.secondary",
+    sx,
+    "data-testid": testIds.named("message"),
+    children: message
+  }
+) : null;
+var SkeletonView = ({
+  message,
+  size,
+  skeletonRows,
+  className,
+  testIds
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": message || "Loading content",
+      className,
+      "data-testid": testIds.base,
+      sx: {
+        width: "100%",
+        padding: theme.spacing(SKELETON_PADDING_UNITS)
+      },
+      children: [
+        /* @__PURE__ */ jsx(Stack, { spacing: SKELETON_ROW_GAP_UNITS, children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rectangular",
+            animation: "wave",
+            height: SKELETON_ROW_HEIGHT[size],
+            width: index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH,
+            borderRadius: SKELETON_RADIUS,
+            "data-testid": testIds.optional(`skeleton-${index}`)
+          },
+          `skeleton-row-${index}`
+        )) }),
+        /* @__PURE__ */ jsx(
+          LoadingMessage,
+          {
+            message,
+            size,
+            testIds,
+            sx: { mt: SKELETON_MESSAGE_MARGIN_TOP_UNITS, textAlign: "center" }
+          }
+        )
+      ]
+    }
+  );
+};
+var SpinnerView = ({ message, size, className, testIds }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": message || "Loading",
+      className,
+      "data-testid": testIds.base,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: theme.spacing(SPINNER_PADDING_UNITS),
+        minHeight: SPINNER_MIN_HEIGHT,
+        gap: theme.spacing(SPINNER_GAP_UNITS)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            size: SIZE_MAP[size].spinner,
+            "data-testid": testIds.named("spinner")
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingMessage, { message, size, testIds })
+      ]
+    }
+  );
+};
+var LoadingState = React.memo((rawProps) => {
+  const resolved = resolveLoadingStateProps(rawProps);
+  const { variant, message, size, skeletonRows, className } = resolved;
+  const viewProps = {
+    message,
+    size,
+    skeletonRows,
+    className,
+    // `dataTestId` is the documented spelling; `testID`, the shared contract's
+    // other one, resolves to the same id.
+    testIds: makeTestIds(resolveTestId(resolved))
+  };
+  return variant === "skeleton" ? /* @__PURE__ */ jsx(SkeletonView, { ...viewProps }) : /* @__PURE__ */ jsx(SpinnerView, { ...viewProps });
+});
+LoadingState.displayName = "LoadingState";
+var LoadingState_default = LoadingState;
+
+export {
+  LoadingState,
+  LoadingState_default
+};
+//# sourceMappingURL=chunk-QO6QWBDI.js.map