@12-apps/ui 6.11.1 → 6.12.1

package/dist/chunk-KEXYN5F5.js

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

package/dist/chunk-KEXYN5F5.js.map

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

package/dist/chunk-KG2D7C2M.js

@@ -1,289 +0,0 @@
-// src/components/data-display/TimingDiagram/TimingDiagram.views.tsx
-import { alpha, Box, styled, Tooltip, Typography, useTheme } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-var phaseColors = {
-  dns: "#9C27B0",
-  // Purple
-  connect: "#2196F3",
-  // Blue
-  ssl: "#00BCD4",
-  // Cyan
-  request: "#4CAF50",
-  // Green
-  response: "#FF9800"
-  // Orange
-};
-var formatTime = (ms) => {
-  if (ms < 1e3) return `${ms}ms`;
-  return `${(ms / 1e3).toFixed(2)}s`;
-};
-var colorOf = (phase) => phaseColors[phase.key];
-var widthOf = (percentages, phase) => percentages[phase.key] ?? 0;
-var withTooltip = (phase, enabled, element) => enabled ? /* @__PURE__ */ jsx(
-  Tooltip,
-  {
-    title: `${phase.label}: ${formatTime(phase.value)}`,
-    placement: "top",
-    role: "tooltip",
-    "aria-describedby": `tooltip-${phase.key}`,
-    children: element
-  },
-  phase.key
-) : element;
-var WaterfallContainer = styled(Box)(({ theme }) => ({
-  position: "relative",
-  width: "100%",
-  marginTop: theme.spacing(2)
-}));
-var WaterfallBar = styled(Box, {
-  shouldForwardProp: (prop) => !["phaseColor", "offset", "width", "animated"].includes(prop)
-})(({ theme, phaseColor, offset, width, animated }) => ({
-  position: "absolute",
-  height: 32,
-  left: `${offset}%`,
-  width: `${width}%`,
-  background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,
-  borderRadius: theme.shape.borderRadius,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: theme.palette.getContrastText(phaseColor),
-  fontSize: "0.75rem",
-  fontWeight: 500,
-  boxShadow: `0 2px 8px ${alpha(phaseColor, 0.3)}`,
-  transition: animated ? "all 0.5s ease" : "none",
-  animation: animated ? "slideIn 0.5s ease" : "none",
-  "@keyframes slideIn": {
-    from: {
-      transform: "translateX(-20px)",
-      opacity: 0
-    },
-    to: {
-      transform: "translateX(0)",
-      opacity: 1
-    }
-  },
-  "&:hover": {
-    transform: "translateY(-2px)",
-    boxShadow: `0 4px 12px ${alpha(phaseColor, 0.5)}`,
-    zIndex: 10
-  }
-}));
-var TimelineAxis = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  marginTop: theme.spacing(1),
-  paddingTop: theme.spacing(1),
-  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`
-}));
-var TimeLabel = styled(Typography)(({ theme }) => ({
-  fontSize: "0.7rem",
-  color: theme.palette.text.secondary,
-  fontWeight: 500
-}));
-var WaterfallView = ({
-  phases,
-  percentages,
-  data,
-  animated,
-  showLabels,
-  showTooltips,
-  height
-}) => {
-  let offset = 0;
-  return /* @__PURE__ */ jsxs(WaterfallContainer, { style: { height: height + 40 }, "data-variant": "waterfall", children: [
-    phases.map((phase, index) => {
-      const width = widthOf(percentages, phase);
-      const currentOffset = offset;
-      offset += width;
-      return withTooltip(
-        phase,
-        showTooltips,
-        /* @__PURE__ */ jsx(
-          WaterfallBar,
-          {
-            "data-testid": `timing-segment-${phase.key}`,
-            phaseColor: colorOf(phase),
-            offset: currentOffset,
-            width,
-            animated,
-            "data-animated": animated.toString(),
-            style: {
-              top: index * 8,
-              width: `${width}%`,
-              left: `${currentOffset}%`
-            },
-            children: showLabels && width > 10 && /* @__PURE__ */ jsx("span", { "data-testid": "timing-label", children: formatTime(phase.value) })
-          },
-          phase.key
-        )
-      );
-    }),
-    /* @__PURE__ */ jsxs(TimelineAxis, { style: { marginTop: height }, children: [
-      /* @__PURE__ */ jsx(TimeLabel, { children: "0ms" }),
-      /* @__PURE__ */ jsx(TimeLabel, { children: formatTime(data.total / 2) }),
-      /* @__PURE__ */ jsx(TimeLabel, { children: formatTime(data.total) })
-    ] })
-  ] });
-};
-var StackedBar = styled(Box, {
-  shouldForwardProp: (prop) => prop !== "animated"
-})(({ theme, animated }) => ({
-  display: "flex",
-  width: "100%",
-  height: 40,
-  borderRadius: theme.shape.borderRadius,
-  overflow: "hidden",
-  boxShadow: theme.shadows[2],
-  ...animated && {
-    "& > div": {
-      animation: "expandWidth 0.8s ease"
-    },
-    "@keyframes expandWidth": {
-      from: { width: 0 },
-      to: { width: "100%" }
-    }
-  }
-}));
-var StackedSegment = styled(Box, {
-  shouldForwardProp: (prop) => !["phaseColor", "width"].includes(prop)
-})(({ phaseColor, width }) => ({
-  width: `${width}%`,
-  background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: "#fff",
-  fontSize: "0.7rem",
-  fontWeight: 600,
-  position: "relative",
-  transition: "all 0.3s ease",
-  "&:hover": {
-    filter: "brightness(1.1)",
-    zIndex: 1
-  }
-}));
-var StackedView = ({
-  phases,
-  percentages,
-  data,
-  animated,
-  showLabels,
-  showTooltips
-}) => /* @__PURE__ */ jsxs(Box, { "data-variant": "stacked", children: [
-  /* @__PURE__ */ jsx(StackedBar, { animated, "data-animated": animated.toString(), children: phases.map((phase) => {
-    const width = widthOf(percentages, phase);
-    return withTooltip(
-      phase,
-      showTooltips,
-      /* @__PURE__ */ jsx(
-        StackedSegment,
-        {
-          "data-testid": `timing-segment-${phase.key}`,
-          phaseColor: colorOf(phase),
-          width,
-          style: { width: `${width}%` },
-          children: showLabels && width > 10 && /* @__PURE__ */ jsx("span", { "data-testid": "timing-label", children: formatTime(phase.value) })
-        },
-        phase.key
-      )
-    );
-  }) }),
-  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", mt: 1 }, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "0ms" }),
-    /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", fontWeight: "bold", children: [
-      "Total: ",
-      formatTime(data.total)
-    ] })
-  ] })
-] });
-var HorizontalBar = styled(Box)(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: theme.spacing(1),
-  marginTop: theme.spacing(2)
-}));
-var HorizontalSegment = styled(Box, {
-  shouldForwardProp: (prop) => !["phaseColor", "width", "animated"].includes(prop)
-})(({ theme, phaseColor, animated }) => ({
-  display: "flex",
-  alignItems: "center",
-  gap: theme.spacing(2),
-  "& .label": {
-    minWidth: 80,
-    fontSize: "0.85rem",
-    fontWeight: 500,
-    color: theme.palette.text.secondary
-  },
-  "& .bar": {
-    flex: 1,
-    height: 24,
-    borderRadius: theme.shape.borderRadius,
-    background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,
-    position: "relative",
-    overflow: "hidden",
-    boxShadow: `0 2px 6px ${alpha(phaseColor, 0.25)}`,
-    ...animated && {
-      "&::after": {
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: `linear-gradient(90deg, transparent 0%, ${alpha("#fff", 0.3)} 50%, transparent 100%)`,
-        animation: "shimmer 2s infinite"
-      },
-      "@keyframes shimmer": {
-        from: { transform: "translateX(-100%)" },
-        to: { transform: "translateX(100%)" }
-      }
-    }
-  },
-  "& .value": {
-    minWidth: 60,
-    textAlign: "right",
-    fontSize: "0.85rem",
-    fontWeight: 600,
-    color: phaseColor
-  }
-}));
-var HorizontalView = ({
-  phases,
-  percentages,
-  data,
-  animated
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(HorizontalBar, { "data-variant": "horizontal", children: [
-    phases.map((phase) => /* @__PURE__ */ jsxs(
-      HorizontalSegment,
-      {
-        "data-testid": `timing-segment-${phase.key}`,
-        phaseColor: colorOf(phase),
-        width: widthOf(percentages, phase),
-        animated,
-        "data-animated": animated.toString(),
-        children: [
-          /* @__PURE__ */ jsx(Typography, { className: "label", children: phase.label }),
-          /* @__PURE__ */ jsx(Box, { className: "bar", style: { width: `${percentages[phase.key]}%` } }),
-          /* @__PURE__ */ jsx(Typography, { className: "value", "data-testid": "timing-label", children: formatTime(phase.value) })
-        ]
-      },
-      phase.key
-    )),
-    /* @__PURE__ */ jsx(Box, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }, children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: "bold", color: "primary", children: [
-      "Total Time: ",
-      formatTime(data.total)
-    ] }) })
-  ] });
-};
-
-export {
-  phaseColors,
-  formatTime,
-  WaterfallView,
-  StackedView,
-  HorizontalView
-};
-//# sourceMappingURL=chunk-KG2D7C2M.js.map

package/dist/chunk-KG2D7C2M.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/TimingDiagram/TimingDiagram.views.tsx"],"sourcesContent":["import { alpha, Box, styled, Tooltip, Typography, useTheme } from '@mui/material';\nimport type { FC, ReactElement } from 'react';\nimport React from 'react';\n\nimport type { TimingData } from './TimingDiagram.types';\n\n// Color configurations\nexport const phaseColors = {\n  dns: '#9C27B0', // Purple\n  connect: '#2196F3', // Blue\n  ssl: '#00BCD4', // Cyan\n  request: '#4CAF50', // Green\n  response: '#FF9800', // Orange\n};\n\nexport type PhaseKey = keyof typeof phaseColors;\n\nexport interface Phase {\n  key: string;\n  label: string;\n  value?: number;\n}\n\nexport interface TimingViewProps {\n  phases: Phase[];\n  percentages: Record<string, number>;\n  data: TimingData;\n  animated: boolean;\n  showLabels: boolean;\n  showTooltips: boolean;\n  height: number;\n}\n\nexport const formatTime = (ms: number): string => {\n  if (ms < 1000) return `${ms}ms`;\n  return `${(ms / 1000).toFixed(2)}s`;\n};\n\nconst colorOf = (phase: Phase): string => phaseColors[phase.key as PhaseKey];\nconst widthOf = (percentages: Record<string, number>, phase: Phase): number =>\n  percentages[phase.key] ?? 0;\n\n// Waterfall and stacked both offer the same hover explanation of a segment; only\n// whether tooltips are on at all varies.\nconst withTooltip = (\n  phase: Phase,\n  enabled: boolean,\n  element: ReactElement,\n): ReactElement =>\n  enabled ? (\n    <Tooltip\n      key={phase.key}\n      title={`${phase.label}: ${formatTime(phase.value!)}`}\n      placement=\"top\"\n      role=\"tooltip\"\n      aria-describedby={`tooltip-${phase.key}`}\n    >\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n\nconst WaterfallContainer = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  width: '100%',\n  marginTop: theme.spacing(2),\n}));\n\nconst WaterfallBar = styled(Box, {\n  shouldForwardProp: (prop) =>\n    !['phaseColor', 'offset', 'width', 'animated'].includes(prop as string),\n})<{\n  phaseColor: string;\n  offset: number;\n  width: number;\n  animated: boolean;\n}>(({ theme, phaseColor, offset, width, animated }) => ({\n  position: 'absolute',\n  height: 32,\n  left: `${offset}%`,\n  width: `${width}%`,\n  background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,\n  borderRadius: theme.shape.borderRadius,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: theme.palette.getContrastText(phaseColor),\n  fontSize: '0.75rem',\n  fontWeight: 500,\n  boxShadow: `0 2px 8px ${alpha(phaseColor, 0.3)}`,\n  transition: animated ? 'all 0.5s ease' : 'none',\n  animation: animated ? 'slideIn 0.5s ease' : 'none',\n  '@keyframes slideIn': {\n    from: {\n      transform: 'translateX(-20px)',\n      opacity: 0,\n    },\n    to: {\n      transform: 'translateX(0)',\n      opacity: 1,\n    },\n  },\n  '&:hover': {\n    transform: 'translateY(-2px)',\n    boxShadow: `0 4px 12px ${alpha(phaseColor, 0.5)}`,\n    zIndex: 10,\n  },\n}));\n\nconst TimelineAxis = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  marginTop: theme.spacing(1),\n  paddingTop: theme.spacing(1),\n  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n}));\n\nconst TimeLabel = styled(Typography)(({ theme }) => ({\n  fontSize: '0.7rem',\n  color: theme.palette.text.secondary,\n  fontWeight: 500,\n}));\n\nexport const WaterfallView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n  showLabels,\n  showTooltips,\n  height,\n}) => {\n  // Each bar starts where the previous one ended, so the row reads as a timeline.\n  let offset = 0;\n\n  return (\n    <WaterfallContainer style={{ height: height + 40 }} data-variant=\"waterfall\">\n      {phases.map((phase, index) => {\n        const width = widthOf(percentages, phase);\n        const currentOffset = offset;\n        offset += width;\n\n        return withTooltip(\n          phase,\n          showTooltips,\n          <WaterfallBar\n            key={phase.key}\n            data-testid={`timing-segment-${phase.key}`}\n            phaseColor={colorOf(phase)}\n            offset={currentOffset}\n            width={width}\n            animated={animated}\n            data-animated={animated.toString()}\n            style={{\n              top: index * 8,\n              width: `${width}%`,\n              left: `${currentOffset}%`,\n            }}\n          >\n            {showLabels && width > 10 && (\n              <span data-testid=\"timing-label\">{formatTime(phase.value!)}</span>\n            )}\n          </WaterfallBar>,\n        );\n      })}\n      <TimelineAxis style={{ marginTop: height }}>\n        <TimeLabel>0ms</TimeLabel>\n        <TimeLabel>{formatTime(data.total / 2)}</TimeLabel>\n        <TimeLabel>{formatTime(data.total)}</TimeLabel>\n      </TimelineAxis>\n    </WaterfallContainer>\n  );\n};\n\nconst StackedBar = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'animated',\n})<{ animated: boolean }>(({ theme, animated }) => ({\n  display: 'flex',\n  width: '100%',\n  height: 40,\n  borderRadius: theme.shape.borderRadius,\n  overflow: 'hidden',\n  boxShadow: theme.shadows[2],\n  ...(animated && {\n    '& > div': {\n      animation: 'expandWidth 0.8s ease',\n    },\n    '@keyframes expandWidth': {\n      from: { width: 0 },\n      to: { width: '100%' },\n    },\n  }),\n}));\n\nconst StackedSegment = styled(Box, {\n  shouldForwardProp: (prop) => !['phaseColor', 'width'].includes(prop as string),\n})<{ phaseColor: string; width: number }>(({ phaseColor, width }) => ({\n  width: `${width}%`,\n  background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: '#fff',\n  fontSize: '0.7rem',\n  fontWeight: 600,\n  position: 'relative',\n  transition: 'all 0.3s ease',\n  '&:hover': {\n    filter: 'brightness(1.1)',\n    zIndex: 1,\n  },\n}));\n\nexport const StackedView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n  showLabels,\n  showTooltips,\n}) => (\n  <Box data-variant=\"stacked\">\n    <StackedBar animated={animated} data-animated={animated.toString()}>\n      {phases.map((phase) => {\n        const width = widthOf(percentages, phase);\n\n        return withTooltip(\n          phase,\n          showTooltips,\n          <StackedSegment\n            key={phase.key}\n            data-testid={`timing-segment-${phase.key}`}\n            phaseColor={colorOf(phase)}\n            width={width}\n            style={{ width: `${width}%` }}\n          >\n            {showLabels && width > 10 && (\n              <span data-testid=\"timing-label\">{formatTime(phase.value!)}</span>\n            )}\n          </StackedSegment>,\n        );\n      })}\n    </StackedBar>\n    <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        0ms\n      </Typography>\n      <Typography variant=\"caption\" color=\"text.secondary\" fontWeight=\"bold\">\n        Total: {formatTime(data.total)}\n      </Typography>\n    </Box>\n  </Box>\n);\n\nconst HorizontalBar = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(2),\n}));\n\nconst HorizontalSegment = styled(Box, {\n  shouldForwardProp: (prop) => !['phaseColor', 'width', 'animated'].includes(prop as string),\n})<{\n  phaseColor: string;\n  width: number;\n  animated: boolean;\n}>(({ theme, phaseColor, animated }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(2),\n  '& .label': {\n    minWidth: 80,\n    fontSize: '0.85rem',\n    fontWeight: 500,\n    color: theme.palette.text.secondary,\n  },\n  '& .bar': {\n    flex: 1,\n    height: 24,\n    borderRadius: theme.shape.borderRadius,\n    background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,\n    position: 'relative',\n    overflow: 'hidden',\n    boxShadow: `0 2px 6px ${alpha(phaseColor, 0.25)}`,\n    ...(animated && {\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: `linear-gradient(90deg, transparent 0%, ${alpha('#fff', 0.3)} 50%, transparent 100%)`,\n        animation: 'shimmer 2s infinite',\n      },\n      '@keyframes shimmer': {\n        from: { transform: 'translateX(-100%)' },\n        to: { transform: 'translateX(100%)' },\n      },\n    }),\n  },\n  '& .value': {\n    minWidth: 60,\n    textAlign: 'right',\n    fontSize: '0.85rem',\n    fontWeight: 600,\n    color: phaseColor,\n  },\n}));\n\nexport const HorizontalView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <HorizontalBar data-variant=\"horizontal\">\n      {phases.map((phase) => (\n        <HorizontalSegment\n          key={phase.key}\n          data-testid={`timing-segment-${phase.key}`}\n          phaseColor={colorOf(phase)}\n          width={widthOf(percentages, phase)}\n          animated={animated}\n          data-animated={animated.toString()}\n        >\n          <Typography className=\"label\">{phase.label}</Typography>\n          <Box className=\"bar\" style={{ width: `${percentages[phase.key]}%` }} />\n          <Typography className=\"value\" data-testid=\"timing-label\">\n            {formatTime(phase.value!)}\n          </Typography>\n        </HorizontalSegment>\n      ))}\n      <Box sx={{ mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }}>\n        <Typography variant=\"body2\" fontWeight=\"bold\" color=\"primary\">\n          Total Time: {formatTime(data.total)}\n        </Typography>\n      </Box>\n    </HorizontalBar>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-KIVTQAI5.js

@@ -1,121 +0,0 @@
-import {
-  TOUCH_TARGET,
-  displayAcrossRail
-} from "./chunk-S7KQOZ7X.js";
-
-// src/components/layout/SettingsLayout/SettingsSectionHeader.tsx
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import { Box } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-var CLIP = {
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-};
-function HeaderText({
-  title,
-  description
-}) {
-  return /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: "h2",
-        sx: { m: 0, font: "inherit", fontSize: "1rem", fontWeight: 600, lineHeight: 1.3, ...CLIP },
-        children: title
-      }
-    ),
-    description !== void 0 && description !== "" && /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: "p",
-        sx: {
-          m: 0,
-          font: "inherit",
-          fontSize: "0.8125rem",
-          color: "text.secondary",
-          lineHeight: 1.35,
-          ...CLIP
-        },
-        children: description
-      }
-    )
-  ] });
-}
-function SettingsSectionHeader({
-  href,
-  backLabel,
-  title,
-  description,
-  breakpoint,
-  linkComponent,
-  testIdPrefix
-}) {
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      "data-testid": `${testIdPrefix}-section-header`,
-      sx: (theme) => ({
-        ...displayAcrossRail(theme, breakpoint, "flex", "none"),
-        alignItems: "center",
-        gap: 1.5,
-        minWidth: 0,
-        // ITS OWN SURFACE, not the panel's.
-        //
-        // The header, the chip strip and the first card were all the same
-        // white, so nothing said where "you are here" ended and the screen
-        // began — the eye had only the type sizes to go on. A tint plus the
-        // rule below turns three stacked runs of text into two blocks.
-        //
-        // `paper` against a `default` panel rather than a hand-picked grey, so
-        // it tracks the host's theme (and its dark mode) instead of being a
-        // light-mode constant that goes wrong the moment the palette does.
-        bgcolor: "background.paper",
-        px: 1.5,
-        pt: 1.5,
-        pb: 1.5,
-        mb: 1,
-        borderRadius: 1,
-        // A rule under the header, because what follows it is the sibling strip
-        // — a row of other sections. Without a line the section's own name and
-        // the chip naming a DIFFERENT section sit in one undifferentiated
-        // block, which reads as one navigation rather than as "you are here"
-        // above "go elsewhere".
-        borderBottom: 1,
-        borderColor: "divider"
-      }),
-      children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            component: linkComponent,
-            href,
-            "aria-label": backLabel,
-            "data-testid": `${testIdPrefix}-back`,
-            sx: (theme) => ({
-              flex: "0 0 auto",
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: TOUCH_TARGET,
-              height: TOUCH_TARGET,
-              border: 1,
-              borderColor: "divider",
-              borderRadius: 2,
-              color: "text.primary",
-              textDecoration: "none",
-              "&:hover": { backgroundColor: theme.palette.action.hover }
-            }),
-            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" })
-          }
-        ),
-        /* @__PURE__ */ jsx(HeaderText, { title, description })
-      ]
-    }
-  );
-}
-
-export {
-  SettingsSectionHeader
-};
-//# sourceMappingURL=chunk-KIVTQAI5.js.map

package/dist/chunk-KIVTQAI5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionHeader.tsx"],"sourcesContent":["'use client';\n\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport { Box } from '@mui/material';\nimport React from 'react';\n\nimport { displayAcrossRail, TOUCH_TARGET } from './SettingsLayout.styles';\nimport type { SettingsLayoutProps, SettingsRailBreakpoint } from './SettingsLayout.types';\n\n/** One line that must not wrap, whatever the section is called. */\nconst CLIP = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n} as const;\n\n/**\n * The name of where you are, and optionally what it holds.\n *\n * `minWidth: 0` on the wrapper is what lets the clipping work at all: without\n * it a flex item refuses to shrink below its content, so a long section name\n * pushes the back button off the row instead of ellipsising.\n */\nfunction HeaderText({\n  title,\n  description,\n}: {\n  title: string;\n  description?: string;\n}): React.JSX.Element {\n  return (\n    <Box sx={{ minWidth: 0 }}>\n      <Box\n        component=\"h2\"\n        sx={{ m: 0, font: 'inherit', fontSize: '1rem', fontWeight: 600, lineHeight: 1.3, ...CLIP }}\n      >\n        {title}\n      </Box>\n      {description !== undefined && description !== '' && (\n        <Box\n          component=\"p\"\n          sx={{\n            m: 0,\n            font: 'inherit',\n            fontSize: '0.8125rem',\n            color: 'text.secondary',\n            lineHeight: 1.35,\n            ...CLIP,\n          }}\n        >\n          {description}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width panel header: a back control, and the name of where you are.\n *\n * ## Why this replaced a \"‹ Voltar\" link\n *\n * The bare link spent a whole row saying only that a back existed. Under it came\n * the sibling chips and under those the section's own Salvar, so three stacked\n * rows went by before the first field — on the width with the least room for\n * them. Worse, none of the three said WHICH section was open: the chips mark the\n * active one, but a chip strip scrolls, so the answer could be off-screen.\n *\n * Folding the control into a square button beside the title buys back a row and\n * makes the header say where you are, which is what a header is for.\n *\n * ## Narrow only, and mounted at every width\n *\n * `displayAcrossRail` hides this above the breakpoint rather than unmounting it,\n * for the reason the whole component works that way: navigation that exists at\n * one width and not the other is navigation nothing can assert about. Above the\n * breakpoint the rail is on screen with the open row marked, so a back control\n * would point at a list already visible.\n *\n * The button is `TOUCH_TARGET` square because this is the phone shape, and it\n * keeps the accessible name — the visible text is the section, not the verb, so\n * a screen reader still hears \"Voltar\" rather than being handed an icon.\n */\nexport function SettingsSectionHeader({\n  href,\n  backLabel,\n  title,\n  description,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  backLabel: string;\n  title: string;\n  description?: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps['linkComponent']>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-section-header`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, 'flex', 'none'),\n        alignItems: 'center',\n        gap: 1.5,\n        minWidth: 0,\n        // ITS OWN SURFACE, not the panel's.\n        //\n        // The header, the chip strip and the first card were all the same\n        // white, so nothing said where \"you are here\" ended and the screen\n        // began — the eye had only the type sizes to go on. A tint plus the\n        // rule below turns three stacked runs of text into two blocks.\n        //\n        // `paper` against a `default` panel rather than a hand-picked grey, so\n        // it tracks the host's theme (and its dark mode) instead of being a\n        // light-mode constant that goes wrong the moment the palette does.\n        bgcolor: 'background.paper',\n        px: 1.5,\n        pt: 1.5,\n        pb: 1.5,\n        mb: 1,\n        borderRadius: 1,\n        // A rule under the header, because what follows it is the sibling strip\n        // — a row of other sections. Without a line the section's own name and\n        // the chip naming a DIFFERENT section sit in one undifferentiated\n        // block, which reads as one navigation rather than as \"you are here\"\n        // above \"go elsewhere\".\n        borderBottom: 1,\n        borderColor: 'divider',\n      })}\n    >\n      <Box\n        component={linkComponent}\n        href={href}\n        aria-label={backLabel}\n        data-testid={`${testIdPrefix}-back`}\n        sx={(theme) => ({\n          flex: '0 0 auto',\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: TOUCH_TARGET,\n          height: TOUCH_TARGET,\n          border: 1,\n          borderColor: 'divider',\n          borderRadius: 2,\n          color: 'text.primary',\n          textDecoration: 'none',\n          '&:hover': { backgroundColor: theme.palette.action.hover },\n        })}\n      >\n        <ChevronLeftIcon fontSize=\"small\" />\n      </Box>\n\n      <HeaderText title={title} description={description} />\n    </Box>\n  );\n}\n"],"mappings":";;;;;;AAEA,OAAO,qBAAqB;AAC5B,SAAS,WAAW;AA4BhB,SACE,KADF;AArBJ,IAAM,OAAO;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AASA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGsB;AACpB,SACE,qBAAC,OAAI,IAAI,EAAE,UAAU,EAAE,GACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI,EAAE,GAAG,GAAG,MAAM,WAAW,UAAU,QAAQ,YAAY,KAAK,YAAY,KAAK,GAAG,KAAK;AAAA,QAExF;AAAA;AAAA,IACH;AAAA,IACC,gBAAgB,UAAa,gBAAgB,MAC5C;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI;AAAA,UACF,GAAG;AAAA,UACH,MAAM;AAAA,UACN,UAAU;AAAA,UACV,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,GAAG;AAAA,QACL;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AA4BO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,GAAG,YAAY;AAAA,MAC5B,IAAI,CAAC,WAAW;AAAA,QACd,GAAG,kBAAkB,OAAO,YAAY,QAAQ,MAAM;AAAA,QACtD,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWV,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMd,cAAc;AAAA,QACd,aAAa;AAAA,MACf;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX;AAAA,YACA,cAAY;AAAA,YACZ,eAAa,GAAG,YAAY;AAAA,YAC5B,IAAI,CAAC,WAAW;AAAA,cACd,MAAM;AAAA,cACN,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,aAAa;AAAA,cACb,cAAc;AAAA,cACd,OAAO;AAAA,cACP,gBAAgB;AAAA,cAChB,WAAW,EAAE,iBAAiB,MAAM,QAAQ,OAAO,MAAM;AAAA,YAC3D;AAAA,YAEA,8BAAC,mBAAgB,UAAS,SAAQ;AAAA;AAAA,QACpC;AAAA,QAEA,oBAAC,cAAW,OAAc,aAA0B;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/dist/chunk-KJ5LUG36.js

@@ -1,38 +0,0 @@
-import {
-  DEFAULT_ZOOM
-} from "./chunk-H2J2MTRE.js";
-
-// src/components/data-display/MapPreview/MapPreview.helpers.ts
-import { alpha } from "@mui/material";
-var MAP_PREVIEW_DEFAULTS = {
-  markers: [],
-  marker: true,
-  height: "400px",
-  interactive: false,
-  zoom: DEFAULT_ZOOM,
-  mapType: "roadmap",
-  variant: "default",
-  showControls: true,
-  showSearch: false,
-  searchPlaceholder: "Search location...",
-  showRoute: false,
-  heatmapData: [],
-  showHeatmap: false,
-  animated: true
-};
-var definedProps = (props) => Object.fromEntries(
-  Object.entries(props).filter(([, value]) => value !== void 0)
-);
-var resolveMapPreviewProps = (props) => ({ ...MAP_PREVIEW_DEFAULTS, ...definedProps(props) });
-var glassStyles = (variant, theme) => variant === "glass" ? {
-  background: alpha(theme.palette.background.paper, 0.7),
-  backdropFilter: "blur(20px)",
-  WebkitBackdropFilter: "blur(20px)",
-  border: `1px solid ${alpha(theme.palette.divider, 0.1)}`
-} : {};
-
-export {
-  resolveMapPreviewProps,
-  glassStyles
-};
-//# sourceMappingURL=chunk-KJ5LUG36.js.map

package/dist/chunk-KJ5LUG36.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/MapPreview/MapPreview.helpers.ts"],"sourcesContent":["import type { Theme } from '@mui/material';\nimport { alpha } from '@mui/material';\n\nimport { DEFAULT_ZOOM } from './MapPreview.constants';\nimport type { MapPreviewProps } from './MapPreview.types';\n\ntype MapDefaultedKeys =\n  | 'markers'\n  | 'marker'\n  | 'height'\n  | 'interactive'\n  | 'zoom'\n  | 'mapType'\n  | 'variant'\n  | 'showControls'\n  | 'showSearch'\n  | 'searchPlaceholder'\n  | 'showRoute'\n  | 'heatmapData'\n  | 'showHeatmap'\n  | 'animated';\n\nexport type ResolvedMapPreviewProps = MapPreviewProps &\n  Required<Pick<MapPreviewProps, MapDefaultedKeys>>;\n\nconst MAP_PREVIEW_DEFAULTS: Pick<MapPreviewProps, MapDefaultedKeys> = {\n  markers: [],\n  marker: true,\n  height: '400px',\n  interactive: false,\n  zoom: DEFAULT_ZOOM,\n  mapType: 'roadmap',\n  variant: 'default',\n  showControls: true,\n  showSearch: false,\n  searchPlaceholder: 'Search location...',\n  showRoute: false,\n  heatmapData: [],\n  showHeatmap: false,\n  animated: true,\n};\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.\nconst definedProps = (props: MapPreviewProps): Partial<MapPreviewProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<MapPreviewProps>;\n\n// Applied as a merge rather than destructuring defaults, which would otherwise\n// put fourteen branches into the component's own complexity budget.\nexport const resolveMapPreviewProps = (props: MapPreviewProps): ResolvedMapPreviewProps =>\n  ({ ...MAP_PREVIEW_DEFAULTS, ...definedProps(props) }) as ResolvedMapPreviewProps;\n\nexport const glassStyles = (variant: MapPreviewProps['variant'], theme: Theme) =>\n  variant === 'glass'\n    ? {\n        background: alpha(theme.palette.background.paper, 0.7),\n        backdropFilter: 'blur(20px)',\n        WebkitBackdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n      }\n    : {};\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAwBtB,IAAM,uBAAgE;AAAA,EACpE,SAAS,CAAC;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,aAAa,CAAC;AAAA,EACd,aAAa;AAAA,EACb,UAAU;AACZ;AAIA,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAIK,IAAM,yBAAyB,CAAC,WACpC,EAAE,GAAG,sBAAsB,GAAG,aAAa,KAAK,EAAE;AAE9C,IAAM,cAAc,CAAC,SAAqC,UAC/D,YAAY,UACR;AAAA,EACE,YAAY,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,EACrD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AACxD,IACA,CAAC;","names":[]}