@12-apps/ui 6.37.0 → 6.38.0

package/dist/{chunk-236V2GRH.js → chunk-VCBV5JM7.js}

@@ -1,9 +1,9 @@
 import {
   TutorialStepBody
-} from "./chunk-B76QCDCE.js";
+} from "./chunk-K4L42FF6.js";
 import {
   useTutorialOverlay
-} from "./chunk-RSQMPCCR.js";
+} from "./chunk-34643ATX.js";
 import {
   scrim,
   sheen
@@ -11,6 +11,11 @@ import {
 import {
   ABSOLUTE_INK
 } from "./chunk-N3GAFIXG.js";
+import {
+  rem,
+  remPx,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/feedback/TutorialOverlay/TutorialOverlay.tsx
 import Box from "@mui/material/Box/index.js";
@@ -20,23 +25,23 @@ import Paper from "@mui/material/Paper/index.js";
 import Portal from "@mui/material/Portal/index.js";
 import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0.7)};
   }
   70% {
-    box-shadow: 0 0 0 20px ${alpha(ABSOLUTE_INK.white, 0)};
+    box-shadow: 0 0 0 ${rem(theme, 20)} ${alpha(ABSOLUTE_INK.white, 0)};
   }
   100% {
     box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0)};
   }
 `;
-var floatAnimation = keyframes`
+var floatAnimation = (theme) => keyframes`
   0%, 100% {
     transform: translateY(0);
   }
   50% {
-    transform: translateY(-10px);
+    transform: translateY(${rem(theme, -10)});
   }
 `;
 var Overlay = styled(Box, {
@@ -58,76 +63,79 @@ var Backdrop = styled(Box)(({ theme }) => ({
   right: 0,
   bottom: 0,
   background: scrim(theme, 0.7),
-  backdropFilter: "blur(2px)"
+  backdropFilter: `blur(${rem(theme, 2)})`
 }));
 var Spotlight = styled(Box, {
   shouldForwardProp: (prop) => prop !== "bounds" && prop !== "padding"
-})(({ theme, bounds, padding }) => ({
-  position: "absolute",
-  top: bounds.top - padding,
-  left: bounds.left - padding,
-  width: bounds.width + padding * 2,
-  height: bounds.height + padding * 2,
-  borderRadius: 8,
-  border: `2px solid ${sheen(theme, 0.5)}`,
-  animation: `${pulseAnimation} 2s infinite`,
-  pointerEvents: "none",
-  "&::before": {
-    content: '""',
+})(({ theme, bounds, padding }) => {
+  const clearance = remPx(theme, padding);
+  return {
     position: "absolute",
-    inset: -2,
-    borderRadius: 8,
-    background: "transparent",
-    boxShadow: `0 0 0 9999px ${scrim(theme, 0.7)}`
-  }
-}));
+    top: bounds.top - clearance,
+    left: bounds.left - clearance,
+    width: bounds.width + clearance * 2,
+    height: bounds.height + clearance * 2,
+    borderRadius: rem(theme, 8),
+    border: `${rem(theme, 2)} solid ${sheen(theme, 0.5)}`,
+    animation: `${pulseAnimation(theme)} 2s infinite`,
+    pointerEvents: "none",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      inset: rem(theme, -2),
+      borderRadius: rem(theme, 8),
+      background: "transparent",
+      boxShadow: `${rems(theme, 0, 0, 0, 9999)} ${scrim(theme, 0.7)}`
+    }
+  };
+});
 var TooltipContainer = styled(Paper, {
   shouldForwardProp: (prop) => prop !== "placement"
 })(({ theme, placement }) => ({
   position: "absolute",
-  maxWidth: 360,
+  maxWidth: rem(theme, 360),
   padding: theme.spacing(3),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-  backdropFilter: "blur(20px)",
-  WebkitBackdropFilter: "blur(20px)",
+  backdropFilter: `blur(${rem(theme, 20)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
   boxShadow: theme.shadows[12],
-  animation: `${floatAnimation} 3s ease-in-out infinite`,
+  animation: `${floatAnimation(theme)} 3s ease-in-out infinite`,
   pointerEvents: "auto",
   zIndex: theme.zIndex.modal + 101,
   "&::before": {
     content: '""',
     position: "absolute",
-    width: 12,
-    height: 12,
+    width: rem(theme, 12),
+    height: rem(theme, 12),
     background: "inherit",
     transform: "rotate(45deg)",
     border: "inherit",
     ...placement === "top" && {
-      bottom: -7,
+      bottom: rem(theme, -7),
       left: "50%",
-      marginLeft: -6,
+      marginLeft: rem(theme, -6),
       borderTop: "none",
       borderLeft: "none"
     },
     ...placement === "bottom" && {
-      top: -7,
+      top: rem(theme, -7),
       left: "50%",
-      marginLeft: -6,
+      marginLeft: rem(theme, -6),
       borderBottom: "none",
       borderRight: "none"
     },
     ...placement === "left" && {
-      right: -7,
+      right: rem(theme, -7),
       top: "50%",
-      marginTop: -6,
+      marginTop: rem(theme, -6),
       borderLeft: "none",
       borderBottom: "none"
     },
     ...placement === "right" && {
-      left: -7,
+      left: rem(theme, -7),
       top: "50%",
-      marginTop: -6,
+      marginTop: rem(theme, -6),
       borderRight: "none",
       borderTop: "none"
     }
@@ -138,7 +146,7 @@ var ProgressBar = styled(LinearProgress)(({ theme }) => ({
   top: 0,
   left: 0,
   right: 0,
-  height: 4,
+  height: rem(theme, 4),
   zIndex: theme.zIndex.modal + 102,
   "& .MuiLinearProgress-bar": {
     background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`
@@ -278,4 +286,4 @@ export {
   TutorialOverlay,
   TutorialOverlay_default
 };
-//# sourceMappingURL=chunk-236V2GRH.js.map
+//# sourceMappingURL=chunk-VCBV5JM7.js.map

package/dist/chunk-VCBV5JM7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/TutorialOverlay/TutorialOverlay.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport LinearProgress from '@mui/material/LinearProgress/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Portal from '@mui/material/Portal/index.js';\nimport { alpha, keyframes, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport type { FC} from 'react';\nimport React, {  } from 'react';\n\nimport { scrim, sheen } from '../../../tokens/ink';\nimport { ABSOLUTE_INK } from '../../../tokens/ink.core';\nimport { rem, remPx, rems } from '../../../tokens/relative';\n\nimport { useTutorialOverlay } from './TutorialOverlay.hooks';\nimport { TutorialStepBody } from './TutorialStepBody';\nimport type { TutorialOverlayProps } from './TutorialOverlay.types';\n\n// Animation keyframes — the ring's sheen is the absolute white; its reach follows the type scale.\nconst pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0.7)};\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 20)} ${alpha(ABSOLUTE_INK.white, 0)};\n  }\n  100% {\n    box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0)};\n  }\n`;\n\nconst floatAnimation = (theme: Theme) => keyframes`\n  0%, 100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(${rem(theme, -10)});\n  }\n`;\n\n// Styled components\nconst Overlay = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'allowClickThrough' })<{ allowClickThrough?: boolean }>(({ theme, allowClickThrough }) => ({\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  zIndex: theme.zIndex.modal + 100,\n  pointerEvents: allowClickThrough ? 'none' : 'auto',\n  transition: 'opacity 0.3s ease' }));\n\nconst Backdrop = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  background: scrim(theme, 0.7),\n  backdropFilter: `blur(${rem(theme, 2)})` }));\n\nconst Spotlight = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'bounds' && prop !== 'padding' })<{ bounds: globalThis.DOMRect; padding: number }>(({ theme, bounds, padding }) => {\n  // `bounds` is the target's measured rect; the design-px clearance joins it as px.\n  const clearance = remPx(theme, padding);\n  return {\n    position: 'absolute',\n    top: bounds.top - clearance,\n    left: bounds.left - clearance,\n    width: bounds.width + clearance * 2,\n    height: bounds.height + clearance * 2,\n    borderRadius: rem(theme, 8),\n    border: `${rem(theme, 2)} solid ${sheen(theme, 0.5)}`,\n    animation: `${pulseAnimation(theme)} 2s infinite`,\n    pointerEvents: 'none',\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      inset: rem(theme, -2),\n      borderRadius: rem(theme, 8),\n      background: 'transparent',\n      boxShadow: `${rems(theme, 0, 0, 0, 9999)} ${scrim(theme, 0.7)}` } };\n});\n\nconst TooltipContainer = styled(Paper, {\n  shouldForwardProp: (prop) => prop !== 'placement' })<{ placement: string }>(({ theme, placement }) => ({\n  position: 'absolute',\n  maxWidth: rem(theme, 360),\n  padding: theme.spacing(3),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n  backdropFilter: `blur(${rem(theme, 20)})`,\n  WebkitBackdropFilter: `blur(${rem(theme, 20)})`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  boxShadow: theme.shadows[12],\n  animation: `${floatAnimation(theme)} 3s ease-in-out infinite`,\n  pointerEvents: 'auto',\n  zIndex: theme.zIndex.modal + 101,\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    width: rem(theme, 12),\n    height: rem(theme, 12),\n    background: 'inherit',\n    transform: 'rotate(45deg)',\n    border: 'inherit',\n    ...(placement === 'top' && {\n      bottom: rem(theme, -7),\n      left: '50%',\n      marginLeft: rem(theme, -6),\n      borderTop: 'none',\n      borderLeft: 'none' }),\n    ...(placement === 'bottom' && {\n      top: rem(theme, -7),\n      left: '50%',\n      marginLeft: rem(theme, -6),\n      borderBottom: 'none',\n      borderRight: 'none' }),\n    ...(placement === 'left' && {\n      right: rem(theme, -7),\n      top: '50%',\n      marginTop: rem(theme, -6),\n      borderLeft: 'none',\n      borderBottom: 'none' }),\n    ...(placement === 'right' && {\n      left: rem(theme, -7),\n      top: '50%',\n      marginTop: rem(theme, -6),\n      borderRight: 'none',\n      borderTop: 'none' }) } }));\n\nconst ProgressBar = styled(LinearProgress)(({ theme }) => ({\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  right: 0,\n  height: rem(theme, 4),\n  zIndex: theme.zIndex.modal + 102,\n  '& .MuiLinearProgress-bar': {\n    background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)` } }));\n\ntype TutorialDefaultedKeys =\n  | 'initialStep'\n  | 'active'\n  | 'showProgress'\n  | 'allowKeyboardNavigation'\n  | 'allowClickThrough'\n  | 'variant'\n  | 'allowSkip'\n  | 'animated';\n\ntype ResolvedTutorialProps = TutorialOverlayProps &\n  Required<Pick<TutorialOverlayProps, TutorialDefaultedKeys>>;\n\nconst TUTORIAL_DEFAULTS: Pick<TutorialOverlayProps, TutorialDefaultedKeys> = {\n  initialStep: 0,\n  active: true,\n  showProgress: true,\n  allowKeyboardNavigation: true,\n  allowClickThrough: false,\n  variant: 'tooltip',\n  allowSkip: false,\n  animated: true };\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default exactly as a destructuring default would. Applied as\n// a merge rather than destructuring defaults, which would otherwise put eight\n// branches into the component's own complexity budget.\nconst resolveProps = (props: TutorialOverlayProps): ResolvedTutorialProps =>\n  ({\n    ...TUTORIAL_DEFAULTS,\n    ...(Object.fromEntries(\n      Object.entries(props).filter(([, value]) => value !== undefined),\n    ) as Partial<TutorialOverlayProps>) }) as ResolvedTutorialProps;\n\n// The dimming layer and the cut-out over the highlighted element. Local because\n// Backdrop and Spotlight cannot cross a module boundary (TS2742).\nconst TutorialLayers: React.FC<{\n  variant: string;\n  targetBounds: globalThis.DOMRect | null;\n  isVisible: boolean;\n  spotlightPadding?: number;\n}> = ({ variant, targetBounds, isVisible, spotlightPadding }) => {\n  const isSpotlight = variant === 'spotlight' || variant === 'highlight';\n  const dimmed = variant === 'modal' || isSpotlight;\n\n  return (\n    <>\n      {dimmed && <Backdrop />}\n      {targetBounds && isVisible && isSpotlight && (\n        <Spotlight\n          bounds={targetBounds}\n          padding={spotlightPadding || 8}\n          data-testid=\"tutorial-highlight\"\n        />\n      )}\n    </>\n  );\n};\n\n// The positioned card. Local because TooltipContainer cannot cross a module\n// boundary (TS2742).\nconst TutorialTooltip: React.FC<{\n  tutorial: ReturnType<typeof useTutorialOverlay> & {\n    currentStepData: TutorialOverlayProps['steps'][number];\n  };\n  steps: TutorialOverlayProps['steps'];\n  allowSkip: boolean;\n  showProgress: boolean;\n  animated: boolean;\n  requiresActionBeforeNext: boolean;\n  copy: TutorialOverlayProps['copy'];\n}> = ({\n  tutorial,\n  steps,\n  allowSkip,\n  showProgress,\n  animated,\n  requiresActionBeforeNext,\n  copy,\n}) => (\n        <Fade in={tutorial.isVisible} timeout={300}>\n          <TooltipContainer\n            ref={tutorial.tooltipRef}\n            placement={tutorial.actualPlacement}\n            elevation={12}\n            style={{\n              top: tutorial.tooltipPosition.top,\n              left: tutorial.tooltipPosition.left,\n              animation: animated ? undefined : 'none' }}\n            role=\"dialog\"\n            aria-labelledby={`tutorial-title-${tutorial.currentStep}`}\n            aria-describedby={`tutorial-content-${tutorial.currentStep}`}\n            data-testid={`tutorial-step-${tutorial.currentStep}`}\n          >\n            <TutorialStepBody\n              copy={copy}\n              step={tutorial.currentStepData}\n              currentStep={tutorial.currentStep}\n              stepCount={steps.length}\n              progress={tutorial.progress}\n              isLastStep={tutorial.isLastStep}\n              allowSkip={allowSkip}\n              showProgress={showProgress}\n              requiresActionBeforeNext={requiresActionBeforeNext}\n              onNext={tutorial.handleNext}\n              onPrev={tutorial.handlePrev}\n              onSkip={tutorial.handleSkip}\n              onRestart={tutorial.handleRestart}\n            />\n          </TooltipContainer>\n        </Fade>\n);\n\nexport const TutorialOverlay: FC<TutorialOverlayProps> = (componentProps) => {\n  const {\n    copy,\n    steps,\n    onComplete,\n    onSkip,\n    onStepComplete,\n    initialStep,\n    active,\n    showProgress,\n    allowKeyboardNavigation,\n    allowClickThrough,\n    variant,\n    allowSkip,\n    animated } = resolveProps(componentProps);\n\n  const tutorial = useTutorialOverlay({\n    steps,\n    initialStep,\n    active,\n    allowKeyboardNavigation,\n    onComplete,\n    onSkip,\n    onStepComplete });\n  const { currentStepData, isLastStep, isVisible, targetBounds, progress } = tutorial;\n\n  const requiresActionBeforeNext = Boolean(currentStepData?.requiresAction) && !isLastStep;\n\n  if (!active || !currentStepData) return null;\n\n  // Handle empty steps array\n  if (steps.length === 0) return null;\n\n  return (\n    <Portal>\n      <Overlay allowClickThrough={allowClickThrough} data-testid=\"tutorial-overlay\">\n        {showProgress && <ProgressBar variant=\"determinate\" value={progress} />}\n\n        <TutorialLayers\n          variant={variant}\n          targetBounds={targetBounds}\n          isVisible={isVisible}\n          spotlightPadding={currentStepData.spotlightPadding}\n        />\n\n        <TutorialTooltip\n          copy={copy}\n          tutorial={{ ...tutorial, currentStepData }}\n          steps={steps}\n          allowSkip={allowSkip}\n          showProgress={showProgress}\n          animated={animated}\n          requiresActionBeforeNext={requiresActionBeforeNext}\n        />\n      </Overlay>\n    </Portal>\n  );\n};\n\n// Export default\nexport default TutorialOverlay;\n"],"mappings":"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","names":[]}

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

@@ -1,6 +1,6 @@
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -66,4 +66,4 @@ DescriptionItem.displayName = "DescriptionItem";
 export {
   DescriptionItem
 };
-//# sourceMappingURL=chunk-KREWQAEV.js.map
+//# sourceMappingURL=chunk-VIRYHNEM.js.map

package/dist/{chunk-PT2XADGH.js → chunk-VPRNKJHP.js}

@@ -2,13 +2,16 @@ import {
   CollapseToggle,
   LogoBar,
   MenuList
-} from "./chunk-HB7ISSLK.js";
+} from "./chunk-L5RQIQIP.js";
 import {
   renderMenuItem
-} from "./chunk-MK4CH4VT.js";
+} from "./chunk-5OUEKIWQ.js";
 import {
   slideIn
-} from "./chunk-6GRZ77IS.js";
+} from "./chunk-3AIRFAI3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/NavigationMenu/NavigationStandardBody.tsx
 import MenuIcon from "@mui/icons-material/Menu";
@@ -36,7 +39,7 @@ var CollapseControl = ({
   collapsed,
   onToggle
 }) => /* @__PURE__ */ jsxs(CollapseToggle, { onClick: onToggle, children: [
-  /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: collapsed ? 0 : 40, justifyContent: "center" }, children: /* @__PURE__ */ jsx(MenuIcon, {}) }),
+  /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: collapsed ? 0 : sxRem(40), justifyContent: "center" }, children: /* @__PURE__ */ jsx(MenuIcon, {}) }),
   !collapsed && /* @__PURE__ */ jsx(ListItemText, { primary: "Collapse" })
 ] });
 var MenuItems = ({ items, variant, size, collapsed, minimal, showDividers }) => /* @__PURE__ */ jsx(MenuList, { variant, size, children: items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
@@ -45,7 +48,7 @@ var MenuItems = ({ items, variant, size, collapsed, minimal, showDividers }) =>
     {
       sx: {
         // Staggered so the list fills in rather than appearing at once.
-        animation: `${slideIn} 0.4s ease-out`,
+        animation: (theme) => `${slideIn(theme)} 0.4s ease-out`,
         animationDelay: `${index * 0.05}s`,
         animationFillMode: "both"
       },
@@ -113,4 +116,4 @@ var NavigationStandardBody = ({
 export {
   NavigationStandardBody
 };
-//# sourceMappingURL=chunk-PT2XADGH.js.map
+//# sourceMappingURL=chunk-VPRNKJHP.js.map

package/dist/chunk-VPRNKJHP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/NavigationMenu/NavigationStandardBody.tsx"],"sourcesContent":["import MenuIcon from '@mui/icons-material/Menu';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nimport { CollapseToggle, LogoBar, MenuList } from './NavigationMenu.shell';\nimport { slideIn } from './NavigationMenu.styles';\nimport type { NavigationMenuItem } from './NavigationMenu.types';\nimport { renderMenuItem } from './NavigationMenuItem';\nimport { sxRem } from '../../../tokens/relative';\n\nconst DividerRule: FC = () => (\n  <Divider\n    sx={{\n      my: 1,\n      opacity: 0.5,\n      background: (theme) =>\n        `linear-gradient(90deg, transparent 0%, ${alpha(theme.palette.divider, 0.5)} 50%, transparent 100%)`,\n    }}\n  />\n);\n\nconst VerticalLogo: FC<{ logo: ReactNode; collapsed: boolean }> = ({ logo, collapsed }) => (\n  <LogoBar>\n    {collapsed ? (\n      <Box sx={{ display: 'flex', justifyContent: 'center' }}>\n        <MenuIcon />\n      </Box>\n    ) : (\n      logo\n    )}\n  </LogoBar>\n);\n\nconst CollapseControl: FC<{ collapsed: boolean; onToggle: () => void }> = ({\n  collapsed,\n  onToggle,\n}) => (\n  <CollapseToggle onClick={onToggle}>\n    <ListItemIcon sx={{ minWidth: collapsed ? 0 : sxRem(40), justifyContent: 'center' }}>\n      <MenuIcon />\n    </ListItemIcon>\n    {!collapsed && <ListItemText primary=\"Collapse\" />}\n  </CollapseToggle>\n);\n\nconst MenuItems: FC<{\n  items: NavigationMenuItem[];\n  variant: string;\n  size: string;\n  collapsed: boolean;\n  minimal: boolean;\n  showDividers: boolean;\n}> = ({ items, variant, size, collapsed, minimal, showDividers }) => (\n  <MenuList variant={variant} size={size}>\n    {items.map((item, index) => (\n      <React.Fragment key={item.id}>\n        <Box\n          sx={{\n            // Staggered so the list fills in rather than appearing at once.\n            animation: (theme) => `${slideIn(theme)} 0.4s ease-out`,\n            animationDelay: `${index * 0.05}s`,\n            animationFillMode: 'both',\n          }}\n        >\n          {renderMenuItem(item, variant, size, collapsed, minimal, 0)}\n        </Box>\n        {showDividers && index < items.length - 1 && <DividerRule />}\n      </React.Fragment>\n    ))}\n  </MenuList>\n);\n\nconst EndPanel: FC<{ children: ReactNode }> = ({ children }) => (\n  <Fade in timeout={600}>\n    <Box\n      sx={{\n        mt: 'auto',\n        p: 2,\n        borderTop: (theme) => `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n        background: (theme) =>\n          `linear-gradient(180deg, transparent 0%, ${alpha(theme.palette.background.default, 0.5)} 100%)`,\n      }}\n    >\n      {children}\n    </Box>\n  </Fade>\n);\n\nexport interface NavigationStandardBodyProps {\n  variant: string;\n  size: string;\n  minimal: boolean;\n  collapsed: boolean;\n  collapsible: boolean;\n  showDividers: boolean;\n  items: NavigationMenuItem[];\n  logo?: ReactNode;\n  endContent?: ReactNode;\n  onCollapseToggle: () => void;\n}\n\n// The list-based layouts (vertical and horizontal). The logo and the collapse\n// control only apply to the vertical one.\nexport const NavigationStandardBody: FC<NavigationStandardBodyProps> = ({\n  variant,\n  size,\n  minimal,\n  collapsed,\n  collapsible,\n  showDividers,\n  items,\n  logo,\n  endContent,\n  onCollapseToggle,\n}) => {\n  const isVertical = variant === 'vertical';\n  // Only the horizontal bar is raised; vertical rails and minimal sit flat.\n  const elevation = !minimal && variant === 'horizontal' ? 1 : 0;\n\n  return (\n    <Paper\n      elevation={elevation}\n      sx={{\n        width: '100%',\n        height: isVertical ? '100%' : 'auto',\n        overflow: 'hidden',\n        background: minimal ? 'transparent' : undefined,\n      }}\n    >\n      {logo && isVertical && <VerticalLogo logo={logo} collapsed={collapsed} />}\n\n      {collapsible && isVertical && (\n        <CollapseControl collapsed={collapsed} onToggle={onCollapseToggle} />\n      )}\n\n      <MenuItems\n        items={items}\n        variant={variant}\n        size={size}\n        collapsed={collapsed}\n        minimal={minimal}\n        showDividers={showDividers}\n      />\n\n      {endContent && <EndPanel>{endContent}</EndPanel>}\n    </Paper>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-JXUWWPZR.js → chunk-VQYR64QB.js}

@@ -1,3 +1,7 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/feedback/Toast/Toast.tsx
 import SuccessIcon from "@mui/icons-material/CheckCircle";
 import CloseIcon from "@mui/icons-material/Close";
@@ -81,7 +85,7 @@ var useToast = () => {
   }
   return context;
 };
-var renderVariantIcon = (variant) => {
+var renderVariantIcon = (theme, variant) => {
   switch (variant) {
     case "success":
       return /* @__PURE__ */ jsx(SuccessIcon, {});
@@ -92,7 +96,7 @@ var renderVariantIcon = (variant) => {
     case "info":
       return /* @__PURE__ */ jsx(InfoIcon, {});
     case "promise":
-      return /* @__PURE__ */ jsx(CircularProgress, { size: 20 });
+      return /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 20) });
     default:
       return null;
   }
@@ -109,7 +113,7 @@ var buildToastStyles = (theme, glass) => {
     return {
       ...baseStyles,
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: "blur(20px)",
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
     };
   }
@@ -135,7 +139,7 @@ var Toast = ({
     Alert,
     {
       "data-testid": dataTestId,
-      icon: renderVariantIcon(variant),
+      icon: renderVariantIcon(theme, variant),
       severity: toAlertSeverity(variant),
       onClose: closable ? handleClose : void 0,
       action: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
@@ -169,10 +173,11 @@ var Toast = ({
 var ToastContainer = ({
   position = "top-right",
   maxToasts = 5,
-  gap = 8,
+  gap,
   className,
   dataTestId = "toast-container"
 }) => {
+  const theme = useTheme();
   const context = useContext(ToastContext);
   if (!context) {
     throw new Error("ToastContainer must be used within a ToastProvider");
@@ -184,8 +189,9 @@ var ToastContainer = ({
       zIndex: 9999,
       display: "flex",
       flexDirection: "column",
-      gap: `${gap}px`,
-      padding: "16px",
+      // `gap` is design px (default 8), read through the type scale.
+      gap: rem(theme, gap ?? 8),
+      padding: rem(theme, 16),
       pointerEvents: "none"
     };
     switch (position) {
@@ -230,4 +236,4 @@ export {
   Toast,
   ToastContainer
 };
-//# sourceMappingURL=chunk-JXUWWPZR.js.map
+//# sourceMappingURL=chunk-VQYR64QB.js.map

package/dist/chunk-VQYR64QB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Toast/Toast.tsx"],"sourcesContent":["import SuccessIcon from '@mui/icons-material/CheckCircle';\nimport CloseIcon from '@mui/icons-material/Close';\nimport ErrorIcon from '@mui/icons-material/Error';\nimport InfoIcon from '@mui/icons-material/Info';\nimport WarningIcon from '@mui/icons-material/Warning';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport Alert from '@mui/material/Alert/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Portal from '@mui/material/Portal/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React, { createContext, useCallback,useContext, useState } from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport type { ToastContainerProps, ToastContextType, ToastItem,ToastProps } from './Toast.types';\n\nconst ToastContext = createContext<ToastContextType | null>(null);\n\ntype PromiseToastOptions<T> = {\n  loading: string;\n  success: string | ((data: T) => string);\n  error: string | ((error: unknown) => string);\n};\n\n// success/error may be a literal or a formatter over the settled value.\nconst resolveToastMessage = <T,>(message: string | ((value: T) => string), value: T): string =>\n  typeof message === 'function' ? message(value) : message;\n\n// Shows a persistent \"loading\" toast for the life of a promise, then swaps it\n// for a success or error one. Lives outside the provider so the provider body\n// stays readable; it takes add/remove rather than reaching for context.\nconst trackPromiseWithToasts = async <T,>(\n  promiseToResolve: Promise<T>,\n  options: PromiseToastOptions<T>,\n  addToast: (toast: Omit<ToastProps, 'id'>) => string,\n  removeToast: (id: string) => void,\n): Promise<T> => {\n  const toastId = addToast({\n    message: options.loading,\n    variant: 'promise',\n    persistent: true,\n  });\n\n  try {\n    const data = await promiseToResolve;\n\n    removeToast(toastId);\n    addToast({ message: resolveToastMessage(options.success, data), variant: 'success' });\n\n    return data;\n  } catch (error) {\n    removeToast(toastId);\n    addToast({ message: resolveToastMessage(options.error, error), variant: 'error' });\n\n    throw error;\n  }\n};\n\nexport const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  const removeToast = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  const addToast = useCallback(\n    (toast: Omit<ToastProps, 'id'>): string => {\n      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n      const newToast: ToastItem = {\n        ...toast,\n        id,\n        timestamp: Date.now(),\n      };\n\n      setToasts((prev) => [...prev, newToast]);\n\n      if (!toast.persistent && toast.duration !== 0) {\n        const duration = toast.duration ?? 5000;\n        window.setTimeout(() => {\n          removeToast(id);\n        }, duration);\n      }\n\n      return id;\n    },\n    [removeToast],\n  );\n\n  const clearAllToasts = useCallback(() => {\n    setToasts([]);\n  }, []);\n\n  const promise = useCallback(\n    <T,>(promiseToResolve: Promise<T>, options: PromiseToastOptions<T>): Promise<T> =>\n      trackPromiseWithToasts(promiseToResolve, options, addToast, removeToast),\n    [addToast, removeToast],\n  );\n\n  const contextValue: ToastContextType = {\n    toasts,\n    addToast,\n    removeToast,\n    clearAllToasts,\n    promise,\n  };\n\n  return <ToastContext.Provider value={contextValue}>{children}</ToastContext.Provider>;\n};\n\nexport const useToast = (): ToastContextType => {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error('useToast must be used within a ToastProvider');\n  }\n  return context;\n};\n\nconst renderVariantIcon = (theme: Theme, variant: ToastProps['variant']) => {\n  switch (variant) {\n    case 'success':\n      return <SuccessIcon />;\n    case 'error':\n      return <ErrorIcon />;\n    case 'warning':\n      return <WarningIcon />;\n    case 'info':\n      return <InfoIcon />;\n    case 'promise':\n      return <CircularProgress size={rem(theme, 20)} />;\n    default:\n      return null;\n  }\n};\n\n// 'default' and 'promise' have no MUI severity of their own; both read as info.\nconst toAlertSeverity = (variant: ToastProps['variant']) =>\n  variant === 'default' || variant === 'promise' ? 'info' : variant;\n\nconst buildToastStyles = (theme: Theme, glass: boolean) => {\n  const baseStyles = {\n    borderRadius: theme.spacing(1.5),\n    transition: theme.transitions.create(['background-color', 'backdrop-filter'], {\n      duration: theme.transitions.duration.standard,\n    }),\n  };\n\n  if (glass) {\n    return {\n      ...baseStyles,\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: `blur(${rem(theme, 20)})`,\n      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n    };\n  }\n\n  return baseStyles;\n};\n\nexport const Toast: React.FC<ToastProps> = ({\n  id = '',\n  message,\n  variant = 'default',\n  closable = true,\n  action,\n  glass = false,\n  onClose,\n  dataTestId = 'toast',\n}) => {\n  const theme = useTheme();\n\n  const handleClose = () => {\n    if (onClose && id) {\n      onClose(id);\n    }\n  };\n\n  return (\n    <Alert\n      data-testid={dataTestId}\n      icon={renderVariantIcon(theme, variant)}\n      severity={toAlertSeverity(variant)}\n      onClose={closable ? handleClose : undefined}\n      action={\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n          {action && (\n            <Button\n              data-testid={`${dataTestId}-action`}\n              color=\"inherit\"\n              size=\"small\"\n              onClick={action.onClick}\n            >\n              {action.label}\n            </Button>\n          )}\n          {closable && (\n            <IconButton\n              data-testid={`${dataTestId}-close`}\n              aria-label=\"close\"\n              color=\"inherit\"\n              size=\"small\"\n              onClick={handleClose}\n            >\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          )}\n        </Box>\n      }\n      sx={buildToastStyles(theme, glass)}\n    >\n      <Typography data-testid={`${dataTestId}-message`} variant=\"body2\">{message}</Typography>\n    </Alert>\n  );\n};\n\nexport const ToastContainer: React.FC<ToastContainerProps> = ({\n  position = 'top-right',\n  maxToasts = 5,\n  gap,\n  className,\n  dataTestId = 'toast-container',\n}) => {\n  const theme = useTheme();\n  const context = useContext(ToastContext);\n  \n  if (!context) {\n    throw new Error('ToastContainer must be used within a ToastProvider');\n  }\n\n  const { toasts, removeToast } = context;\n\n  const getPositionStyles = (): React.CSSProperties => {\n    const baseStyles: React.CSSProperties = {\n      position: 'fixed',\n      zIndex: 9999,\n      display: 'flex',\n      flexDirection: 'column',\n      // `gap` is design px (default 8), read through the type scale.\n      gap: rem(theme, gap ?? 8),\n      padding: rem(theme, 16),\n      pointerEvents: 'none',\n    };\n\n    switch (position) {\n      case 'top-left':\n        return { ...baseStyles, top: 0, left: 0 };\n      case 'top-center':\n        return { ...baseStyles, top: 0, left: '50%', transform: 'translateX(-50%)' };\n      case 'top-right':\n        return { ...baseStyles, top: 0, right: 0 };\n      case 'bottom-left':\n        return { ...baseStyles, bottom: 0, left: 0, flexDirection: 'column-reverse' };\n      case 'bottom-center':\n        return {\n          ...baseStyles,\n          bottom: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          flexDirection: 'column-reverse',\n        };\n      case 'bottom-right':\n        return { ...baseStyles, bottom: 0, right: 0, flexDirection: 'column-reverse' };\n      default:\n        return { ...baseStyles, top: 0, right: 0 };\n    }\n  };\n\n  return (\n    <Portal>\n      <Box data-testid={dataTestId} className={className} sx={getPositionStyles()}>\n        {toasts.slice(0, maxToasts).map((toast, index) => (\n          <Slide\n            key={toast.id}\n            direction={position.includes('left') ? 'right' : 'left'}\n            in={true}\n            timeout={300}\n            style={{ pointerEvents: 'auto' }}\n          >\n            <Box data-testid={`${dataTestId}-item-${index}`}>\n              <Toast {...toast} onClose={removeToast} dataTestId={toast.dataTestId || `toast-${index}`} />\n            </Box>\n          </Slide>\n        ))}\n      </Box>\n    </Portal>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-72DKEBJM.js → chunk-VRPREI27.js}

@@ -38,7 +38,7 @@ function ViewSelector({
   const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0];
   const ActiveIcon = activeOption.icon;
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
-    viewMode === "grid" && /* @__PURE__ */ jsx(Box, { sx: { width: 96, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+    viewMode === "grid" && /* @__PURE__ */ jsx(Box, { sx: { width: sxRem(96), display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
       Slider,
       {
         "data-testid": "resize-card-slider",
@@ -77,7 +77,7 @@ function ViewSelector({
         onClose: () => setAnchorEl(null),
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: { paper: { sx: { minWidth: 180 } } },
+        slotProps: { paper: { sx: { minWidth: sxRem(180) } } },
         children: VIEW_OPTIONS.map((option) => {
           const OptionIcon = option.icon;
           const selected = viewMode === option.value;
@@ -107,4 +107,4 @@ function ViewSelector({
 export {
   ViewSelector
 };
-//# sourceMappingURL=chunk-72DKEBJM.js.map
+//# sourceMappingURL=chunk-VRPREI27.js.map

package/dist/chunk-VRPREI27.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/ViewSelector.tsx"],"sourcesContent":["'use client';\n\nimport CheckIcon from '@mui/icons-material/Check';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport GridIcon from '@mui/icons-material/GridViewOutlined';\nimport ListIcon from '@mui/icons-material/FormatListBulletedRounded';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Slider from '@mui/material/Slider/index.js';\n// `SvgIconComponent` is declared inline in @mui/icons-material's barrel and has\n// no module of its own, so the deep-import equivalent is its own definition:\n// `type SvgIconComponent = typeof SvgIcon`.\nimport type SvgIcon from '@mui/material/SvgIcon/index.js';\nimport React, { useState } from 'react';\n\nimport type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\nconst VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [\n  { value: 'grid', label: 'Grid View', icon: GridIcon },\n  { value: 'list', label: 'List View', icon: ListIcon },\n];\n\n/**\n * View selector: a grid/list dropdown plus a card-size zoom slider (grid mode\n * only). Faithful MUI port of the reference toolbar's view control.\n */\nexport function ViewSelector({\n  viewMode,\n  onViewModeChange,\n  zoom,\n  onZoomChange,\n  cardSizeLabel,\n}: ViewSelectorProps): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0]!;\n  const ActiveIcon = activeOption.icon;\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>\n      {viewMode === 'grid' && (\n        <Box sx={{ width: sxRem(96), display: 'flex', alignItems: 'center' }}>\n          <Slider\n            data-testid=\"resize-card-slider\"\n            aria-label={cardSizeLabel}\n            value={zoom[0] ?? 0}\n            onChange={(_, value) => onZoomChange([value as number])}\n            min={0}\n            max={100}\n            step={1}\n            size=\"small\"\n          />\n        </Box>\n      )}\n\n      <Button\n        data-testid=\"view-mode-btn\"\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        aria-label={activeOption.label}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: 'text.secondary' }}\n      >\n        <ActiveIcon sx={{ fontSize: sxRem(16) }} />\n        <ChevronDownIcon sx={{ fontSize: sxRem(14) }} />\n      </Button>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={() => setAnchorEl(null)}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{ paper: { sx: { minWidth: sxRem(180) } } }}\n      >\n        {VIEW_OPTIONS.map((option) => {\n          const OptionIcon = option.icon;\n          const selected = viewMode === option.value;\n          return (\n            <MenuItem\n              key={option.value}\n              data-testid={`view-mode-${option.value}`}\n              onClick={() => {\n                onViewModeChange(option.value);\n                setAnchorEl(null);\n              }}\n              sx={{ gap: 1.5 }}\n            >\n              <ListItemText>{option.label}</ListItemText>\n              <OptionIcon sx={{ fontSize: sxRem(16), color: 'text.secondary' }} />\n              <ListItemIcon sx={{ minWidth: 'auto !important' }}>\n                <CheckIcon sx={{ fontSize: sxRem(16), color: selected ? 'text.primary' : 'transparent' }} />\n              </ListItemIcon>\n            </MenuItem>\n          );\n        })}\n      </Menu>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-N6CSXHFJ.js → chunk-WN5PNP6F.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-FKUYRQSP.js";
 import {
   cardStyles
-} from "./chunk-LVEG6XQL.js";
+} from "./chunk-76X6JRVI.js";
 import {
   CARD_CONTENT_PADDING_UNITS,
   CARD_HEADER_CHILDREN_PADDING_UNITS,
@@ -191,4 +191,4 @@ export {
   CardActions,
   CardMedia
 };
-//# sourceMappingURL=chunk-N6CSXHFJ.js.map
+//# sourceMappingURL=chunk-WN5PNP6F.js.map