@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-NKIAP6ZL.js

@@ -1,173 +0,0 @@
-import {
-  RichTextEditorToolbar
-} from "./chunk-SE6ERQY5.js";
-import {
-  useRichTextEditor
-} from "./chunk-774B27QA.js";
-import {
-  fieldRadiusPx
-} from "./chunk-GDN2LUTZ.js";
-import {
-  fieldEdge
-} from "./chunk-7FDU3FIN.js";
-
-// src/components/form/RichTextEditor/RichTextEditor.tsx
-import Box from "@mui/material/Box/index.js";
-import Paper from "@mui/material/Paper/index.js";
-import { alpha, useTheme } from "@mui/material/styles/index.js";
-import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_TOOLBAR = {
-  bold: true,
-  italic: true,
-  underline: true,
-  strikethrough: false,
-  orderedList: true,
-  unorderedList: true,
-  link: true,
-  image: false,
-  codeBlock: false,
-  quote: false,
-  customItems: []
-};
-var RICH_TEXT_DEFAULTS = {
-  value: "",
-  placeholder: "Start typing...",
-  disabled: false,
-  readOnly: false,
-  toolbar: {},
-  height: 300
-};
-var definedProps = (props) => Object.fromEntries(
-  Object.entries(props).filter(([, v]) => v !== void 0)
-);
-var editorContentSx = (theme, disabled, placeholder, height) => ({
-  minHeight: typeof height === "number" ? `${height}px` : height,
-  p: 2,
-  outline: "none",
-  cursor: disabled ? "not-allowed" : "text",
-  "&:empty::before": {
-    content: `"${placeholder}"`,
-    color: theme.palette.text.disabled,
-    pointerEvents: "none"
-  },
-  "& p": {
-    margin: "8px 0",
-    "&:first-of-type": { marginTop: 0 },
-    "&:last-of-type": { marginBottom: 0 }
-  },
-  "& ul, & ol": { marginLeft: theme.spacing(2) },
-  "& blockquote": {
-    borderLeft: `4px solid ${theme.palette.primary.main}`,
-    paddingLeft: theme.spacing(2),
-    margin: `${theme.spacing(1)} 0`,
-    fontStyle: "italic",
-    backgroundColor: alpha(theme.palette.primary.main, 0.05)
-  },
-  "& pre": {
-    backgroundColor: alpha(theme.palette.text.primary, 0.08),
-    padding: theme.spacing(1),
-    borderRadius: 1,
-    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
-    fontSize: "0.875rem",
-    overflow: "auto"
-  },
-  "& a": { color: theme.palette.primary.main, textDecoration: "underline" }
-});
-var shellSx = (theme, isFocused, disabled) => ({
-  border: `1px solid ${fieldEdge(theme)}`,
-  borderRadius: fieldRadiusPx(theme),
-  overflow: "hidden",
-  transition: "border-color 0.2s ease-in-out",
-  ...isFocused && {
-    borderColor: theme.palette.primary.main,
-    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`
-  },
-  ...disabled && {
-    backgroundColor: theme.palette.action.disabledBackground,
-    color: theme.palette.text.disabled
-  }
-});
-var RichTextEditor = forwardRef(
-  (editorProps, ref) => {
-    const {
-      value,
-      onChange,
-      placeholder,
-      disabled,
-      readOnly,
-      toolbar,
-      height,
-      maxLength,
-      onFocus,
-      onBlur,
-      className,
-      "data-testid": testId,
-      "aria-label": ariaLabel,
-      "aria-describedby": ariaDescribedBy,
-      ...props
-    } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) };
-    const theme = useTheme();
-    const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };
-    const editor = useRichTextEditor({
-      value,
-      onChange,
-      onFocus,
-      onBlur,
-      disabled,
-      readOnly,
-      maxLength
-    });
-    return /* @__PURE__ */ jsxs(
-      Paper,
-      {
-        ref,
-        className,
-        "data-testid": testId || "rich-text-editor",
-        elevation: 1,
-        sx: shellSx(theme, editor.isFocused, Boolean(disabled)),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            RichTextEditorToolbar,
-            {
-              config: toolbarConfig,
-              disabled: Boolean(disabled),
-              readOnly: Boolean(readOnly),
-              maxLength,
-              characterCount: editor.characterCount,
-              editorRef: editor.editorRef,
-              onFormat: editor.applyFormat
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              ref: editor.editorRef,
-              contentEditable: !disabled && !readOnly,
-              onInput: editor.handleContentChange,
-              onFocus: editor.handleFocus,
-              onBlur: editor.handleBlur,
-              role: "textbox",
-              "aria-label": ariaLabel || "Rich text editor",
-              "aria-describedby": ariaDescribedBy,
-              "aria-multiline": "true",
-              tabIndex: disabled ? -1 : 0,
-              "data-testid": "editor-content",
-              suppressContentEditableWarning: true,
-              sx: editorContentSx(theme, Boolean(disabled), placeholder, height)
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-RichTextEditor.displayName = "RichTextEditor";
-var RichTextEditor_default = RichTextEditor;
-
-export {
-  RichTextEditor,
-  RichTextEditor_default
-};
-//# sourceMappingURL=chunk-NKIAP6ZL.js.map

package/dist/chunk-NM3E27GK.js

@@ -1,292 +0,0 @@
-// src/components/data-display/TimingDiagram/TimingDiagram.views.tsx
-import Box from "@mui/material/Box/index.js";
-import Tooltip from "@mui/material/Tooltip/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
-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-NM3E27GK.js.map

package/dist/chunk-NM3E27GK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/TimingDiagram/TimingDiagram.views.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\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-NNAACCN2.js

@@ -1,19 +0,0 @@
-import {
-  withDividers
-} from "./chunk-4GGH6ZQ7.js";
-import {
-  Box
-} from "./chunk-GCWF5AQE.js";
-
-// src/components/layout/Stack/Stack.tsx
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var Stack = React.forwardRef(
-  ({ direction = "column", gap = 0, divider, children, ...rest }, ref) => /* @__PURE__ */ jsx(Box, { ref, direction, gap, ...rest, children: withDividers(children, divider) })
-);
-Stack.displayName = "Stack";
-
-export {
-  Stack
-};
-//# sourceMappingURL=chunk-NNAACCN2.js.map

package/dist/chunk-NU3EQX2L.js

@@ -1,144 +0,0 @@
-import {
-  CategorySectionHeading,
-  CategoryTreeRow
-} from "./chunk-KMUSTQA6.js";
-import {
-  emptySx,
-  listSx,
-  skeletonSx
-} from "./chunk-LGLHU55A.js";
-import {
-  categoryCheckState,
-  isLeafCategory,
-  leavesOf
-} from "./chunk-PN4HVM43.js";
-
-// src/components/form/CategorySelect/CategoryPanelList.tsx
-import Box from "@mui/material/Box/index.js";
-import Button from "@mui/material/Button/index.js";
-import Skeleton from "@mui/material/Skeleton/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var SENTENCE_CASE = { textTransform: "none" };
-var SKELETON_ROWS = 6;
-function LoadingRows() {
-  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: SKELETON_ROWS }, (_unused, index) => /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", sx: skeletonSx }, index)) });
-}
-function EmptyCatalogue({
-  onCreateCategory,
-  dataTestId,
-  copy
-}) {
-  return /* @__PURE__ */ jsxs(Box, { sx: emptySx, "data-testid": `${dataTestId}-empty-catalogue`, children: [
-    /* @__PURE__ */ jsx("strong", { children: copy.emptyTitle }),
-    /* @__PURE__ */ jsx("p", { children: copy.purpose }),
-    onCreateCategory && /* @__PURE__ */ jsx(Button, { variant: "contained", size: "small", sx: SENTENCE_CASE, onClick: () => onCreateCategory(), children: copy.createCategory })
-  ] });
-}
-function NoResults({
-  query,
-  onClearQuery,
-  onCreateCategory,
-  dataTestId,
-  copy
-}) {
-  return /* @__PURE__ */ jsxs(Box, { sx: emptySx, "data-testid": `${dataTestId}-no-results`, children: [
-    /* @__PURE__ */ jsx("strong", { children: copy.noResults.title(query) }),
-    /* @__PURE__ */ jsx("p", { children: copy.noResults.hint }),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: "6px", justifyContent: "center" }, children: [
-      /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", sx: SENTENCE_CASE, onClick: onClearQuery, children: copy.noResults.clearSearch }),
-      onCreateCategory && /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "contained",
-          size: "small",
-          sx: SENTENCE_CASE,
-          "data-testid": `${dataTestId}-create`,
-          onClick: () => onCreateCategory(query.trim()),
-          children: copy.noResults.create(query.trim())
-        }
-      )
-    ] })
-  ] });
-}
-function CategoryNodeRows({
-  node,
-  depth,
-  props
-}) {
-  const { draft, query, single, allowParentSelection, rowIds, activeIndex, sheet } = props;
-  const categoryId = node.category.id;
-  const leaf = isLeafCategory(node);
-  const expanded = props.isExpanded(categoryId);
-  const selectable = allowParentSelection || leaf;
-  const asHeading = single && !selectable && !props.deepTree;
-  const selectedCount = leaf ? 0 : leavesOf(node).filter((id) => draft.has(id)).length;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    asHeading ? /* @__PURE__ */ jsx(CategorySectionHeading, { option: node.category, query }) : /* @__PURE__ */ jsx(
-      CategoryTreeRow,
-      {
-        option: node.category,
-        query,
-        depth,
-        branch: !leaf,
-        expanded,
-        active: rowIds[activeIndex] === categoryId,
-        sheet,
-        ...selectable ? { checkState: categoryCheckState(node, draft) } : {},
-        single,
-        selectedCount,
-        showCounts: props.showCounts,
-        onToggleExpanded: () => props.onToggleExpanded(categoryId),
-        onActivate: () => leaf ? props.onActivateSubcategory(categoryId) : props.onActivateCategory(node),
-        dataTestId: props.dataTestId,
-        copy: props.copy
-      }
-    ),
-    (expanded || asHeading) && node.subcategories.map((sub) => /* @__PURE__ */ jsx(CategoryNodeRows, { node: sub, depth: depth + 1, props }, sub.category.id))
-  ] });
-}
-function CategoryPanelList(props) {
-  const { groups, loading, query, listRef, sheet, dataTestId, copy } = props;
-  const body = () => {
-    if (loading) return /* @__PURE__ */ jsx(LoadingRows, {});
-    if (groups.length === 0 && query.trim().length > 0) {
-      return /* @__PURE__ */ jsx(
-        NoResults,
-        {
-          copy,
-          query,
-          onClearQuery: props.onClearQuery,
-          onCreateCategory: props.onCreateCategory,
-          dataTestId
-        }
-      );
-    }
-    if (groups.length === 0) {
-      return /* @__PURE__ */ jsx(
-        EmptyCatalogue,
-        {
-          copy,
-          onCreateCategory: props.onCreateCategory,
-          dataTestId
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group) => /* @__PURE__ */ jsx(CategoryNodeRows, { node: group, depth: 0, props }, group.category.id)) });
-  };
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref: listRef,
-      role: "listbox",
-      "aria-multiselectable": props.single ? void 0 : true,
-      tabIndex: -1,
-      "data-testid": `${dataTestId}-list`,
-      sx: listSx(sheet),
-      children: body()
-    }
-  );
-}
-
-export {
-  CategoryPanelList
-};
-//# sourceMappingURL=chunk-NU3EQX2L.js.map