@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-52APLKAG.js

@@ -0,0 +1,110 @@
+import {
+  renderChartByType
+} from "./chunk-BHLGZLXQ.js";
+import {
+  ChartContainer
+} from "./chunk-M5T3COS2.js";
+import {
+  getSizeStyles,
+  getVariantStyles
+} from "./chunk-JKNLKUCX.js";
+import {
+  muiColor
+} from "./chunk-7ZPUN7TV.js";
+import {
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/data-display/Chart/Chart.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function variantSx(theme, props) {
+  return getVariantStyles(theme, {
+    variant: props.variant ?? "default",
+    color: props.color ?? "primary",
+    glow: props.glow ?? false,
+    pulse: props.pulse ?? false,
+    glass: props.glass ?? false,
+    gradient: props.gradient ?? false,
+    disabled: props.disabled ?? false
+  });
+}
+function ChartHeader({ title, subtitle, neon, dataTestId }) {
+  if (!title && !subtitle) return null;
+  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, "data-testid": `${dataTestId}-header`, children: [
+    title && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "h6",
+        "data-testid": `${dataTestId}-title`,
+        sx: (theme) => ({ color: neon ? uiInk(theme).dataVizNeon.accent : "text.primary", fontWeight: 600 }),
+        children: title
+      }
+    ),
+    subtitle && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        "data-testid": `${dataTestId}-subtitle`,
+        sx: (theme) => ({ color: neon ? alpha(uiInk(theme).dataVizNeon.accent, 0.7) : "text.secondary" }),
+        children: subtitle
+      }
+    )
+  ] });
+}
+var Chart = (props) => {
+  const theme = useTheme();
+  const sizeStyles = getSizeStyles(props.size, props.height);
+  const styles = variantSx(theme, props);
+  const dataTestId = props["data-testid"] ?? "chart";
+  if (props.loading) {
+    return /* @__PURE__ */ jsx(
+      Paper,
+      {
+        "data-testid": `${dataTestId}-loading`,
+        sx: { ...styles, ...sizeStyles, display: "flex", justifyContent: "center", alignItems: "center" },
+        children: /* @__PURE__ */ jsx(CircularProgress, { color: muiColor(props.color ?? "primary", "inherit"), "data-testid": `${dataTestId}-loading-spinner` })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      "data-testid": dataTestId,
+      className: props.className,
+      sx: { p: 2, ...styles, ...props.style },
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      children: [
+        /* @__PURE__ */ jsx(
+          ChartHeader,
+          {
+            title: props.title,
+            subtitle: props.subtitle,
+            neon: props.variant === "neon",
+            dataTestId
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChartContainer,
+          {
+            responsive: props.responsive ?? true,
+            width: props.width ?? "100%",
+            height: props.fillHeight === true ? "100%" : sizeStyles.height,
+            "data-testid": `${dataTestId}-container`,
+            children: renderChartByType(props, theme)
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  Chart
+};
+//# sourceMappingURL=chunk-52APLKAG.js.map

package/dist/chunk-52APLKAG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/Chart.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { ChartProps } from './Chart.types';\nimport { ChartContainer } from './ChartComposables';\nimport { getSizeStyles, getVariantStyles } from './chart-internals';\nimport { renderChartByType } from './chart-renderers';\nimport { uiInk } from '../../../tokens/ink';\nimport { muiColor } from '../../../tokens/scales';\n\n/**\n * Prop-driven Recharts wrapper (line/bar/area/pie/radar/scatter/composed)\n * with MUI-themed chrome. The serializable-spec API (`SpecChart`) layers on\n * top of this component; type-specific rendering lives in\n * `chart-renderers.tsx` and styling in `chart-internals.ts`.\n */\n\nfunction variantSx(theme: Theme, props: ChartProps): Record<string, unknown> {\n  return getVariantStyles(theme, {\n    variant: props.variant ?? 'default',\n    color: props.color ?? 'primary',\n    glow: props.glow ?? false,\n    pulse: props.pulse ?? false,\n    glass: props.glass ?? false,\n    gradient: props.gradient ?? false,\n    disabled: props.disabled ?? false,\n  });\n}\n\ninterface HeaderProps {\n  title?: string;\n  subtitle?: string;\n  neon: boolean;\n  dataTestId: string;\n}\n\nfunction ChartHeader({ title, subtitle, neon, dataTestId }: HeaderProps): React.ReactElement | null {\n  if (!title && !subtitle) return null;\n  return (\n    <Box sx={{ mb: 2 }} data-testid={`${dataTestId}-header`}>\n      {title && (\n        <Typography\n          variant=\"h6\"\n          data-testid={`${dataTestId}-title`}\n          sx={(theme) => ({ color: neon ? uiInk(theme).dataVizNeon.accent : 'text.primary', fontWeight: 600 })}\n        >\n          {title}\n        </Typography>\n      )}\n      {subtitle && (\n        <Typography\n          variant=\"body2\"\n          data-testid={`${dataTestId}-subtitle`}\n          sx={(theme) => ({ color: neon ? alpha(uiInk(theme).dataVizNeon.accent, 0.7) : 'text.secondary' })}\n        >\n          {subtitle}\n        </Typography>\n      )}\n    </Box>\n  );\n}\n\nexport const Chart: React.FC<ChartProps> = (props) => {\n  const theme = useTheme();\n  const sizeStyles = getSizeStyles(props.size, props.height);\n  const styles = variantSx(theme, props);\n  const dataTestId = props['data-testid'] ?? 'chart';\n\n  if (props.loading) {\n    return (\n      <Paper\n        data-testid={`${dataTestId}-loading`}\n        sx={{ ...styles, ...sizeStyles, display: 'flex', justifyContent: 'center', alignItems: 'center' }}\n      >\n        <CircularProgress color={muiColor(props.color ?? 'primary', 'inherit')} data-testid={`${dataTestId}-loading-spinner`} />\n      </Paper>\n    );\n  }\n\n  return (\n    <Paper\n      data-testid={dataTestId}\n      className={props.className}\n      sx={{ p: 2, ...styles, ...props.style }}\n      onFocus={props.onFocus}\n      onBlur={props.onBlur}\n    >\n      <ChartHeader\n        title={props.title}\n        subtitle={props.subtitle}\n        neon={props.variant === 'neon'}\n        dataTestId={dataTestId}\n      />\n      <ChartContainer\n        responsive={props.responsive ?? true}\n        width={props.width ?? '100%'}\n        height={props.fillHeight === true ? '100%' : sizeStyles.height}\n        data-testid={`${dataTestId}-container`}\n      >\n        {renderChartByType(props, theme)}\n      </ChartContainer>\n    </Paper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,SAAS,OAAO,gBAA4B;AAuCxC,SAEI,KAFJ;AAtBJ,SAAS,UAAU,OAAc,OAA4C;AAC3E,SAAO,iBAAiB,OAAO;AAAA,IAC7B,SAAS,MAAM,WAAW;AAAA,IAC1B,OAAO,MAAM,SAAS;AAAA,IACtB,MAAM,MAAM,QAAQ;AAAA,IACpB,OAAO,MAAM,SAAS;AAAA,IACtB,OAAO,MAAM,SAAS;AAAA,IACtB,UAAU,MAAM,YAAY;AAAA,IAC5B,UAAU,MAAM,YAAY;AAAA,EAC9B,CAAC;AACH;AASA,SAAS,YAAY,EAAE,OAAO,UAAU,MAAM,WAAW,GAA2C;AAClG,MAAI,CAAC,SAAS,CAAC,SAAU,QAAO;AAChC,SACE,qBAAC,OAAI,IAAI,EAAE,IAAI,EAAE,GAAG,eAAa,GAAG,UAAU,WAC3C;AAAA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,eAAa,GAAG,UAAU;AAAA,QAC1B,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,MAAM,KAAK,EAAE,YAAY,SAAS,gBAAgB,YAAY,IAAI;AAAA,QAEjG;AAAA;AAAA,IACH;AAAA,IAED,YACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,eAAa,GAAG,UAAU;AAAA,QAC1B,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,MAAM,MAAM,KAAK,EAAE,YAAY,QAAQ,GAAG,IAAI,iBAAiB;AAAA,QAE9F;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAEO,IAAM,QAA8B,CAAC,UAAU;AACpD,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,cAAc,MAAM,MAAM,MAAM,MAAM;AACzD,QAAM,SAAS,UAAU,OAAO,KAAK;AACrC,QAAM,aAAa,MAAM,aAAa,KAAK;AAE3C,MAAI,MAAM,SAAS;AACjB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,GAAG,UAAU;AAAA,QAC1B,IAAI,EAAE,GAAG,QAAQ,GAAG,YAAY,SAAS,QAAQ,gBAAgB,UAAU,YAAY,SAAS;AAAA,QAEhG,8BAAC,oBAAiB,OAAO,SAAS,MAAM,SAAS,WAAW,SAAS,GAAG,eAAa,GAAG,UAAU,oBAAoB;AAAA;AAAA,IACxH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,WAAW,MAAM;AAAA,MACjB,IAAI,EAAE,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,MAAM;AAAA,MACtC,SAAS,MAAM;AAAA,MACf,QAAQ,MAAM;AAAA,MAEd;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,MAAM;AAAA,YACb,UAAU,MAAM;AAAA,YAChB,MAAM,MAAM,YAAY;AAAA,YACxB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,MAAM,cAAc;AAAA,YAChC,OAAO,MAAM,SAAS;AAAA,YACtB,QAAQ,MAAM,eAAe,OAAO,SAAS,WAAW;AAAA,YACxD,eAAa,GAAG,UAAU;AAAA,YAEzB,4BAAkB,OAAO,KAAK;AAAA;AAAA,QACjC;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-5CIXQBLV.js

@@ -0,0 +1,155 @@
+import {
+  SearchGlyph
+} from "./chunk-DMNZD3Q7.js";
+import {
+  chipSx,
+  chipWrapSx,
+  panelHeadSx,
+  pinnedLabelSx,
+  pinnedSx
+} from "./chunk-ZSRLRDTP.js";
+import {
+  fieldBorder,
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+
+// src/components/form/CategorySelect/CategoryPanelHead.tsx
+import Box from "@mui/material/Box/index.js";
+import InputBase from "@mui/material/InputBase/index.js";
+import { alpha } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var searchFieldSx = {
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  "& input": {
+    width: "100%",
+    height: fieldHeight,
+    padding: "0 30px 0 32px",
+    fontSize: 13,
+    border: fieldBorder,
+    borderRadius: fieldRadiusPx,
+    background: "background.paper",
+    color: "text.primary",
+    "&:focus": {
+      outline: "none",
+      borderColor: "primary.main",
+      // 0x26 of 0xFF: the ring's old hex-alpha suffix, kept exact.
+      boxShadow: (theme) => `0 0 0 3px ${alpha(theme.palette.primary.main, 38 / 255)}`
+    }
+  }
+};
+var clearButtonSx = {
+  position: "absolute",
+  right: 7,
+  width: 20,
+  height: 20,
+  border: 0,
+  background: "action.selected",
+  color: "text.secondary",
+  borderRadius: "50%",
+  display: "grid",
+  placeItems: "center",
+  cursor: "pointer",
+  fontSize: 12,
+  padding: 0,
+  lineHeight: 1
+};
+function CategoryPanelHead({
+  query,
+  placeholder,
+  sheet,
+  quickActions,
+  onQueryChange,
+  searchInputRef,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: (theme) => panelHeadSx(theme, sheet), children: [
+    /* @__PURE__ */ jsxs(Box, { sx: searchFieldSx, children: [
+      /* @__PURE__ */ jsx(
+        SearchGlyph,
+        {
+          style: {
+            position: "absolute",
+            left: 10,
+            width: 15,
+            height: 15,
+            opacity: 0.55,
+            pointerEvents: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InputBase,
+        {
+          inputRef: searchInputRef,
+          value: query,
+          placeholder,
+          autoComplete: "off",
+          inputProps: { "aria-label": placeholder, "data-testid": `${dataTestId}-search` },
+          onChange: (event) => onQueryChange(event.target.value),
+          sx: { width: "100%" }
+        }
+      ),
+      query.length > 0 && /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "button",
+          type: "button",
+          "aria-label": copy.search.clear,
+          "data-testid": `${dataTestId}-search-clear`,
+          sx: clearButtonSx,
+          onClick: () => onQueryChange(""),
+          children: "\xD7"
+        }
+      )
+    ] }),
+    quickActions && /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: "10px",
+          marginTop: "8px",
+          fontSize: 12
+        },
+        children: quickActions
+      }
+    )
+  ] });
+}
+function CategoryPinnedTray({
+  chips,
+  onRemove,
+  dataTestId,
+  copy
+}) {
+  if (chips.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Box, { sx: pinnedSx, "data-testid": `${dataTestId}-pinned`, children: [
+    /* @__PURE__ */ jsx(Box, { sx: pinnedLabelSx, children: copy.search.pinnedLabel(chips.length) }),
+    /* @__PURE__ */ jsx(Box, { sx: chipWrapSx, children: chips.map((chip) => /* @__PURE__ */ jsxs(Box, { component: "span", sx: chipSx, children: [
+      chip.label,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": copy.search.removeChip(chip.label),
+          "data-testid": `${dataTestId}-unpin-${chip.id}`,
+          onClick: () => onRemove(chip.id),
+          children: "\xD7"
+        }
+      )
+    ] }, chip.id)) })
+  ] });
+}
+
+export {
+  CategoryPanelHead,
+  CategoryPinnedTray
+};
+//# sourceMappingURL=chunk-5CIXQBLV.js.map

package/dist/chunk-5CIXQBLV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryPanelHead.tsx"],"sourcesContent":["'use client';\n\nimport type { CategorySelectCopy } from '../../../copy';\nimport Box from '@mui/material/Box/index.js';\nimport InputBase from '@mui/material/InputBase/index.js';\nimport { alpha, type Theme } from '@mui/material/styles/index.js';\n\nimport { SearchGlyph } from './CategoryIcons';\nimport {\n  chipSx,\n  chipWrapSx,\n  panelHeadSx,\n  pinnedLabelSx,\n  pinnedSx,\n} from './CategorySelect.styles';\nimport type { CategorySelectionChip } from './CategorySelect.types';\nimport { fieldBorder, fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\n\ninterface PanelHeadProps {\n  query: string;\n  placeholder: string;\n  sheet: boolean;\n  /** Quick actions belong to multi-select only; single-select has nothing to bulk-do. */\n  quickActions?: React.ReactNode;\n  onQueryChange: (next: string) => void;\n  searchInputRef: React.RefObject<HTMLInputElement | null>;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}\n\nconst searchFieldSx = {\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  '& input': {\n    width: '100%',\n    height: fieldHeight,\n    padding: '0 30px 0 32px',\n    fontSize: 13,\n    border: fieldBorder,\n    borderRadius: fieldRadiusPx,\n    background: 'background.paper',\n    color: 'text.primary',\n    '&:focus': {\n      outline: 'none',\n      borderColor: 'primary.main',\n      // 0x26 of 0xFF: the ring's old hex-alpha suffix, kept exact.\n      boxShadow: (theme: Theme) => `0 0 0 3px ${alpha(theme.palette.primary.main, 0x26 / 0xff)}`,\n    },\n  },\n} as const;\n\nconst clearButtonSx = {\n  position: 'absolute',\n  right: 7,\n  width: 20,\n  height: 20,\n  border: 0,\n  background: 'action.selected',\n  color: 'text.secondary',\n  borderRadius: '50%',\n  display: 'grid',\n  placeItems: 'center',\n  cursor: 'pointer',\n  fontSize: 12,\n  padding: 0,\n  lineHeight: 1,\n} as const;\n\n/** Search field, its clear affordance, and the optional quick-action row. */\nexport function CategoryPanelHead({\n  query,\n  placeholder,\n  sheet,\n  quickActions,\n  onQueryChange,\n  searchInputRef,\n  dataTestId,\n  copy,\n}: PanelHeadProps): React.JSX.Element {\n  return (\n    <Box sx={(theme) => panelHeadSx(theme, sheet)}>\n      <Box sx={searchFieldSx}>\n        <SearchGlyph\n          style={{\n            position: 'absolute',\n            left: 10,\n            width: 15,\n            height: 15,\n            opacity: 0.55,\n            pointerEvents: 'none',\n          }}\n        />\n        <InputBase\n          inputRef={searchInputRef}\n          value={query}\n          placeholder={placeholder}\n          autoComplete=\"off\"\n          inputProps={{ 'aria-label': placeholder, 'data-testid': `${dataTestId}-search` }}\n          onChange={(event) => onQueryChange(event.target.value)}\n          sx={{ width: '100%' }}\n        />\n        {query.length > 0 && (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            aria-label={copy.search.clear}\n            data-testid={`${dataTestId}-search-clear`}\n            sx={clearButtonSx}\n            onClick={() => onQueryChange('')}\n          >\n            ×\n          </Box>\n        )}\n      </Box>\n      {quickActions && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: '10px',\n            marginTop: '8px',\n            fontSize: 12,\n          }}\n        >\n          {quickActions}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\ninterface PinnedTrayProps {\n  chips: CategorySelectionChip[];\n  onRemove: (chipId: string) => void;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}\n\n/**\n * The selected categories, pinned above the list.\n *\n * Pinned rather than left in place because a selection made at the bottom of a\n * ten-category tree scrolls out of sight the moment you look for the next one —\n * and a search hides it entirely. Here it survives both.\n */\nexport function CategoryPinnedTray({\n  chips,\n  onRemove,\n  dataTestId,\n  copy,\n}: PinnedTrayProps): React.JSX.Element | null {\n  if (chips.length === 0) return null;\n  return (\n    <Box sx={pinnedSx} data-testid={`${dataTestId}-pinned`}>\n      <Box sx={pinnedLabelSx}>{copy.search.pinnedLabel(chips.length)}</Box>\n      <Box sx={chipWrapSx}>\n        {chips.map((chip) => (\n          <Box component=\"span\" key={chip.id} sx={chipSx}>\n            {chip.label}\n            <button\n              type=\"button\"\n              aria-label={copy.search.removeChip(chip.label)}\n              data-testid={`${dataTestId}-unpin-${chip.id}`}\n              onClick={() => onRemove(chip.id)}\n            >\n              ×\n            </button>\n          </Box>\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-5E6WZAQF.js

@@ -0,0 +1,111 @@
+import {
+  HorizontalView,
+  StackedView,
+  WaterfallView,
+  phaseColors
+} from "./chunk-PAAFUJJL.js";
+
+// src/components/data-display/TimingDiagram/TimingDiagram.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DiagramContainer = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(3),
+  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+  borderRadius: theme.shape.borderRadius * 2
+}));
+var Legend = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: theme.spacing(2),
+  marginTop: theme.spacing(2),
+  paddingTop: theme.spacing(2),
+  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+}));
+var LegendItem = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  "& .color": {
+    width: 12,
+    height: 12,
+    borderRadius: 2
+  },
+  "& .label": {
+    fontSize: "0.8rem",
+    color: theme.palette.text.secondary
+  }
+}));
+var calculatePercentages = (data) => {
+  const total = data.total || 1;
+  return {
+    dns: (data.dns || 0) / total * 100,
+    connect: (data.connect || 0) / total * 100,
+    ssl: (data.ssl || 0) / total * 100,
+    request: (data.request || 0) / total * 100,
+    response: (data.response || 0) / total * 100
+  };
+};
+var phasesOf = (data) => [
+  { key: "dns", label: "DNS Lookup", value: data.dns },
+  { key: "connect", label: "Connection", value: data.connect },
+  { key: "ssl", label: "SSL/TLS", value: data.ssl },
+  { key: "request", label: "Request", value: data.request },
+  { key: "response", label: "Response", value: data.response }
+].filter((phase) => phase.value !== void 0 && phase.value > 0);
+var VIEWS = {
+  waterfall: WaterfallView,
+  stacked: StackedView,
+  horizontal: HorizontalView
+};
+var TimingDiagram = ({
+  copy,
+  data,
+  showLabels = true,
+  height = 40,
+  animated = true,
+  showTooltips = true,
+  variant = "waterfall"
+}) => {
+  const percentages = useMemo(() => calculatePercentages(data), [data]);
+  const phases = phasesOf(data);
+  const View = VIEWS[variant];
+  return /* @__PURE__ */ jsxs(DiagramContainer, { elevation: 2, role: "region", "aria-label": copy.regionLabel, tabIndex: 0, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: "bold", gutterBottom: true, children: copy.heading }),
+    View && /* @__PURE__ */ jsx(
+      View,
+      {
+        phases,
+        percentages,
+        data,
+        animated,
+        showLabels,
+        showTooltips,
+        height
+      }
+    ),
+    showLabels && /* @__PURE__ */ jsx(Legend, { children: phases.map((phase) => /* @__PURE__ */ jsxs(LegendItem, { children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: "color",
+          sx: (theme) => ({ backgroundColor: phaseColors(theme)[phase.key] })
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { className: "label", children: phase.label })
+    ] }, phase.key)) })
+  ] });
+};
+var TimingDiagram_default = TimingDiagram;
+
+export {
+  TimingDiagram,
+  TimingDiagram_default
+};
+//# sourceMappingURL=chunk-5E6WZAQF.js.map

package/dist/chunk-5E6WZAQF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/TimingDiagram/TimingDiagram.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { TimingData, TimingDiagramProps } from './TimingDiagram.types';\nimport type { Phase, PhaseKey, TimingViewProps } from './TimingDiagram.views';\nimport {\n  HorizontalView,\n  phaseColors,\n  StackedView,\n  WaterfallView,\n} from './TimingDiagram.views';\n\n// Styled components\nconst DiagramContainer = styled(Paper)(({ theme }) => ({\n  padding: theme.spacing(3),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,\n  backdropFilter: 'blur(10px)',\n  WebkitBackdropFilter: 'blur(10px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  borderRadius: theme.shape.borderRadius * 2,\n}));\n\nconst Legend = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: theme.spacing(2),\n  marginTop: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n}));\n\nconst LegendItem = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  '& .color': {\n    width: 12,\n    height: 12,\n    borderRadius: 2,\n  },\n  '& .label': {\n    fontSize: '0.8rem',\n    color: theme.palette.text.secondary,\n  },\n}));\n\n// Helper functions\nconst calculatePercentages = (data: TimingData): Record<string, number> => {\n  const total = data.total || 1;\n  return {\n    dns: ((data.dns || 0) / total) * 100,\n    connect: ((data.connect || 0) / total) * 100,\n    ssl: ((data.ssl || 0) / total) * 100,\n    request: ((data.request || 0) / total) * 100,\n    response: ((data.response || 0) / total) * 100,\n  };\n};\n\n// A phase with no recorded time never happened — an HTTP request has no SSL\n// handshake, for instance — so it gets no bar and no legend entry.\nconst phasesOf = (data: TimingData): Phase[] =>\n  [\n    { key: 'dns', label: 'DNS Lookup', value: data.dns },\n    { key: 'connect', label: 'Connection', value: data.connect },\n    { key: 'ssl', label: 'SSL/TLS', value: data.ssl },\n    { key: 'request', label: 'Request', value: data.request },\n    { key: 'response', label: 'Response', value: data.response },\n  ].filter((phase) => phase.value !== undefined && phase.value > 0);\n\nconst VIEWS: Record<string, FC<TimingViewProps>> = {\n  waterfall: WaterfallView,\n  stacked: StackedView,\n  horizontal: HorizontalView,\n};\n\n// Main component\nexport const TimingDiagram: FC<TimingDiagramProps> = ({\n  copy,\n  data,\n  showLabels = true,\n  height = 40,\n  animated = true,\n  showTooltips = true,\n  variant = 'waterfall',\n}) => {\n  const percentages = useMemo(() => calculatePercentages(data), [data]);\n  const phases = phasesOf(data);\n  const View = VIEWS[variant];\n\n  return (\n    <DiagramContainer elevation={2} role=\"region\" aria-label={copy.regionLabel} tabIndex={0}>\n      <Typography variant=\"h6\" fontWeight=\"bold\" gutterBottom>\n        {copy.heading}\n      </Typography>\n\n      {View && (\n        <View\n          phases={phases}\n          percentages={percentages}\n          data={data}\n          animated={animated}\n          showLabels={showLabels}\n          showTooltips={showTooltips}\n          height={height}\n        />\n      )}\n\n      {showLabels && (\n        <Legend>\n          {phases.map((phase) => (\n            <LegendItem key={phase.key}>\n              <Box\n                className=\"color\"\n                sx={(theme) => ({ backgroundColor: phaseColors(theme)[phase.key as PhaseKey] })}\n              />\n              <Typography className=\"label\">{phase.label}</Typography>\n            </LegendItem>\n          ))}\n        </Legend>\n      )}\n    </DiagramContainer>\n  );\n};\n\n// Export default\nexport default TimingDiagram;\n"],"mappings":"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","names":[]}

package/dist/chunk-5JSRM7WC.js

@@ -0,0 +1,76 @@
+import {
+  HEADING_DEFAULT_COLOR,
+  HEADING_DEFAULT_WEIGHT,
+  headingGradient,
+  headingWeight,
+  stepOf
+} from "./chunk-LKMMJKXU.js";
+import {
+  headingMetrics
+} from "./chunk-PT6TCWIW.js";
+import {
+  neutralTones
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/typography/Heading/Heading.styles.ts
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return theme.palette.text.primary;
+  }
+  const colorMap = {
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    success: theme.palette.success.main,
+    warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
+    danger: theme.palette.error.main
+  };
+  return colorMap[color];
+};
+var PRIMARY_STOPS = (theme) => [
+  theme.palette.primary.main,
+  theme.palette.secondary.main
+];
+var GRADIENT_STOPS = {
+  primary: PRIMARY_STOPS,
+  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
+  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
+  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
+  info: (theme) => [theme.palette.info.light, theme.palette.info.dark],
+  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],
+  // The grey ramp has no light/dark pair: the muted tone into the darkest
+  // (`NEUTRAL_GRADIENT_STEPS`, 500 into 900).
+  neutral: (theme) => [neutralTones(theme).muted, neutralTones(theme).inverseSurface]
+};
+var gradientFor = (theme, color) => {
+  const [from, to] = GRADIENT_STOPS[color](theme);
+  return headingGradient(from, to);
+};
+var headingSx = (theme, flags) => {
+  const { customSize, customColor = HEADING_DEFAULT_COLOR, customWeight = HEADING_DEFAULT_WEIGHT, gradient } = flags;
+  const { normalWeight, ...metrics } = headingMetrics(theme, stepOf(customSize));
+  const base = {
+    fontFamily: theme.typography.h1.fontFamily,
+    margin: 0,
+    transition: "all 0.2s ease",
+    ...metrics,
+    fontWeight: headingWeight(customWeight, normalWeight)
+  };
+  if (!gradient) {
+    return { ...base, color: getColorFromTheme(theme, customColor) };
+  }
+  return {
+    ...base,
+    background: gradientFor(theme, customColor),
+    backgroundClip: "text",
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    MozBackgroundClip: "text",
+    MozTextFillColor: "transparent"
+  };
+};
+
+export {
+  headingSx
+};
+//# sourceMappingURL=chunk-5JSRM7WC.js.map

package/dist/chunk-5JSRM7WC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Heading/Heading.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  HEADING_DEFAULT_COLOR,\n  HEADING_DEFAULT_WEIGHT,\n  headingGradient,\n  headingWeight,\n  stepOf,\n} from './Heading.metrics';\nimport { neutralTones } from '../../../tokens/ink';\nimport { headingMetrics } from '../../../tokens/typography';\nimport type { ColorValue } from '../../../tokens/scales';\n\n// Exhaustive over ColorValue, and deliberately without a fallback. The map\n// happened to hold all seven already, but it was `Record<string, string>` with\n// `|| text.primary` behind it — so nothing kept it that way, and the eighth\n// colour would have rendered as ordinary body text with no complaint. That is\n// the failure this whole vocabulary exists to make impossible; `Text` was\n// tightened the same way and this one was missed.\nconst getColorFromTheme = (theme: Theme, color: ColorValue): string => {\n  if (color === 'neutral') {\n    return theme.palette.text.primary;\n  }\n\n  const colorMap: Record<Exclude<ColorValue, 'neutral'>, string> = {\n    primary: theme.palette.primary.main,\n    secondary: theme.palette.secondary.main,\n    success: theme.palette.success.main,\n    warning: theme.palette.warning.main,\n    info: theme.palette.info.main,\n    danger: theme.palette.error.main,\n  };\n\n  return colorMap[color];\n};\n\n/** The two-stop gradient each colour paints its glyphs with. */\nconst PRIMARY_STOPS = (theme: Theme): [string, string] => [\n  theme.palette.primary.main,\n  theme.palette.secondary.main,\n];\n\n// Keyed over the whole vocabulary, with no `?? PRIMARY_STOPS` behind it. Two\n// stops were missing — `info` and `neutral` — so a gradient heading in either\n// colour painted the PRIMARY gradient and looked deliberate while ignoring the\n// prop entirely. The fallback is what hid it, so the fallback is gone.\n//\n// The MUI-typed twin of `headingGradientStops` in `Heading.metrics.ts`, which\n// the native renderer reads off a `UiTheme`; the pairs are the same.\nconst GRADIENT_STOPS: Record<ColorValue, (theme: Theme) => [string, string]> = {\n  primary: PRIMARY_STOPS,\n  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],\n  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],\n  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],\n  info: (theme) => [theme.palette.info.light, theme.palette.info.dark],\n  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],\n  // The grey ramp has no light/dark pair: the muted tone into the darkest\n  // (`NEUTRAL_GRADIENT_STEPS`, 500 into 900).\n  neutral: (theme) => [neutralTones(theme).muted, neutralTones(theme).inverseSurface],\n};\n\nconst gradientFor = (theme: Theme, color: ColorValue) => {\n  const [from, to] = GRADIENT_STOPS[color](theme);\n  return headingGradient(from, to);\n};\n\nexport interface HeadingFlags {\n  /**\n   * The step of the scale to DRAW. Named `customSize` rather than `customLevel`\n   * because the rank is no longer what decides it — see `Heading.tsx`, which\n   * resolves `size ?? level` before it gets here. This file no longer knows\n   * which tag it is styling, and that is the point.\n   */\n  customSize?: string;\n  customColor?: ColorValue;\n  customWeight?: string;\n  gradient?: boolean;\n}\n\nexport const headingSx = (theme: Theme, flags: HeadingFlags): CSSObject => {\n  const { customSize, customColor = HEADING_DEFAULT_COLOR, customWeight = HEADING_DEFAULT_WEIGHT, gradient } = flags;\n  // From the THEME, with the package default underneath — never from a table in\n  // this file. A host's `createTheme({ typography: { headingScale } })` is what\n  // sets the house scale now; see `tokens/typography.ts` for why it is our own\n  // key rather than MUI's `typography.h1`.\n  const { normalWeight, ...metrics } = headingMetrics(theme, stepOf(customSize));\n\n  const base: CSSObject = {\n    fontFamily: theme.typography.h1.fontFamily,\n    margin: 0,\n    transition: 'all 0.2s ease',\n    ...metrics,\n    fontWeight: headingWeight(customWeight, normalWeight),\n  };\n\n  if (!gradient) {\n    return { ...base, color: getColorFromTheme(theme, customColor) };\n  }\n\n  // The gradient paints the glyphs themselves, so the text must draw no fill of\n  // its own for it to show through.\n  return {\n    ...base,\n    background: gradientFor(theme, customColor),\n    backgroundClip: 'text',\n    WebkitBackgroundClip: 'text',\n    WebkitTextFillColor: 'transparent',\n    MozBackgroundClip: 'text',\n    MozTextFillColor: 'transparent',\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,IAAM,oBAAoB,CAAC,OAAc,UAA8B;AACrE,MAAI,UAAU,WAAW;AACvB,WAAO,MAAM,QAAQ,KAAK;AAAA,EAC5B;AAEA,QAAM,WAA2D;AAAA,IAC/D,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,UAAU;AAAA,IACnC,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,MAAM,MAAM,QAAQ,KAAK;AAAA,IACzB,QAAQ,MAAM,QAAQ,MAAM;AAAA,EAC9B;AAEA,SAAO,SAAS,KAAK;AACvB;AAGA,IAAM,gBAAgB,CAAC,UAAmC;AAAA,EACxD,MAAM,QAAQ,QAAQ;AAAA,EACtB,MAAM,QAAQ,UAAU;AAC1B;AASA,IAAM,iBAAyE;AAAA,EAC7E,SAAS;AAAA,EACT,WAAW,CAAC,UAAU,CAAC,MAAM,QAAQ,UAAU,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,EAC/E,SAAS,CAAC,UAAU,CAAC,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,QAAQ,IAAI;AAAA,EAC5E,SAAS,CAAC,UAAU,CAAC,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,QAAQ,IAAI;AAAA,EAC5E,MAAM,CAAC,UAAU,CAAC,MAAM,QAAQ,KAAK,OAAO,MAAM,QAAQ,KAAK,IAAI;AAAA,EACnE,QAAQ,CAAC,UAAU,CAAC,MAAM,QAAQ,MAAM,OAAO,MAAM,QAAQ,MAAM,IAAI;AAAA;AAAA;AAAA,EAGvE,SAAS,CAAC,UAAU,CAAC,aAAa,KAAK,EAAE,OAAO,aAAa,KAAK,EAAE,cAAc;AACpF;AAEA,IAAM,cAAc,CAAC,OAAc,UAAsB;AACvD,QAAM,CAAC,MAAM,EAAE,IAAI,eAAe,KAAK,EAAE,KAAK;AAC9C,SAAO,gBAAgB,MAAM,EAAE;AACjC;AAeO,IAAM,YAAY,CAAC,OAAc,UAAmC;AACzE,QAAM,EAAE,YAAY,cAAc,uBAAuB,eAAe,wBAAwB,SAAS,IAAI;AAK7G,QAAM,EAAE,cAAc,GAAG,QAAQ,IAAI,eAAe,OAAO,OAAO,UAAU,CAAC;AAE7E,QAAM,OAAkB;AAAA,IACtB,YAAY,MAAM,WAAW,GAAG;AAAA,IAChC,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,IACH,YAAY,cAAc,cAAc,YAAY;AAAA,EACtD;AAEA,MAAI,CAAC,UAAU;AACb,WAAO,EAAE,GAAG,MAAM,OAAO,kBAAkB,OAAO,WAAW,EAAE;AAAA,EACjE;AAIA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY,YAAY,OAAO,WAAW;AAAA,IAC1C,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,EACpB;AACF;","names":[]}

package/dist/chunk-5LPQ6T5S.js

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

package/dist/chunk-5LPQ6T5S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/InteractiveTooltip/InteractiveTooltip.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';\n\nconst pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  70% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nconst SIZE_MAP = {\n  sm: { fontSize: '0.75rem', padding: '4px 8px' },\n  md: { fontSize: '0.875rem', padding: '6px 12px' },\n  lg: { fontSize: '1rem', padding: '8px 16px' },\n} as const;\n\nexport const getSizeStyles = (size?: string): { fontSize: string; padding: string } =>\n  SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;\n\nexport const variantStyles = (theme: Theme, variant?: string): CSSObject => {\n  switch (variant) {\n    case 'default':\n      return {\n        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.92),\n        color: absoluteInk(theme).white,\n        boxShadow: `0 4px 12px ${shadowInk(theme, 0.3)}`,\n      };\n    case 'dark':\n      return {\n        backgroundColor: absoluteInk(theme).black,\n        color: absoluteInk(theme).white,\n        boxShadow: `0 6px 16px ${shadowInk(theme, 0.5)}`,\n        border: `1px solid ${sheen(theme, 0.1)}`,\n      };\n    case 'light':\n      return {\n        backgroundColor: absoluteInk(theme).white,\n        color: neutralTones(theme).inverseSurface,\n        border: `1px solid ${alpha(neutralTones(theme).subtle, 0.4)}`,\n        boxShadow: `0 4px 16px ${shadowInk(theme, 0.15)}`,\n      };\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.75),\n        backdropFilter: 'blur(24px) saturate(180%)',\n        WebkitBackdropFilter: 'blur(24px) saturate(180%)',\n        border: `1px solid ${alpha(theme.palette.divider, 0.3)}`,\n        color: theme.palette.text.primary,\n        boxShadow: `0 8px 32px ${shadowInk(theme, 0.12)}`,\n      };\n    default:\n      return {};\n  }\n};\n\n// glow and pulse are independent flags. The three combinations used to be spelled\n// out one by one, but each is just the union of whichever flags are set.\nexport const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({\n  ...(glow && {\n    boxShadow: `0 0 15px 3px ${alpha(theme.palette.primary.main, 0.4)} !important`,\n    filter: 'brightness(1.05)',\n  }),\n  ...(pulse && {\n    animation: `${pulseAnimation} 2s infinite`,\n  }),\n});\n\nexport const arrowColor = (theme: Theme, variant?: string): string => {\n  switch (variant) {\n    case 'light':\n      return absoluteInk(theme).white;\n    case 'glass':\n      return alpha(theme.palette.background.paper, 0.75);\n    case 'dark':\n      return absoluteInk(theme).black;\n    default:\n      return alpha(neutralTones(theme).inverseSurface, 0.92);\n  }\n};\n"],"mappings":";;;;;;;;AAAA,SAAS,OAAO,iBAAiB;AAKjC,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevB,IAAM,WAAW;AAAA,EACf,IAAI,EAAE,UAAU,WAAW,SAAS,UAAU;AAAA,EAC9C,IAAI,EAAE,UAAU,YAAY,SAAS,WAAW;AAAA,EAChD,IAAI,EAAE,UAAU,QAAQ,SAAS,WAAW;AAC9C;AAEO,IAAM,gBAAgB,CAAC,SAC5B,SAAS,IAA6B,KAAK,SAAS;AAE/C,IAAM,gBAAgB,CAAC,OAAc,YAAgC;AAC1E,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,QACL,iBAAiB,MAAM,aAAa,KAAK,EAAE,gBAAgB,IAAI;AAAA,QAC/D,OAAO,YAAY,KAAK,EAAE;AAAA,QAC1B,WAAW,cAAc,UAAU,OAAO,GAAG,CAAC;AAAA,MAChD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,iBAAiB,YAAY,KAAK,EAAE;AAAA,QACpC,OAAO,YAAY,KAAK,EAAE;AAAA,QAC1B,WAAW,cAAc,UAAU,OAAO,GAAG,CAAC;AAAA,QAC9C,QAAQ,aAAa,MAAM,OAAO,GAAG,CAAC;AAAA,MACxC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,iBAAiB,YAAY,KAAK,EAAE;AAAA,QACpC,OAAO,aAAa,KAAK,EAAE;AAAA,QAC3B,QAAQ,aAAa,MAAM,aAAa,KAAK,EAAE,QAAQ,GAAG,CAAC;AAAA,QAC3D,WAAW,cAAc,UAAU,OAAO,IAAI,CAAC;AAAA,MACjD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,QAC3D,gBAAgB;AAAA,QAChB,sBAAsB;AAAA,QACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,QACtD,OAAO,MAAM,QAAQ,KAAK;AAAA,QAC1B,WAAW,cAAc,UAAU,OAAO,IAAI,CAAC;AAAA,MACjD;AAAA,IACF;AACE,aAAO,CAAC;AAAA,EACZ;AACF;AAIO,IAAM,iBAAiB,CAAC,OAAc,MAAgB,WAAgC;AAAA,EAC3F,GAAI,QAAQ;AAAA,IACV,WAAW,gBAAgB,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAAA,IACjE,QAAQ;AAAA,EACV;AAAA,EACA,GAAI,SAAS;AAAA,IACX,WAAW,GAAG,cAAc;AAAA,EAC9B;AACF;AAEO,IAAM,aAAa,CAAC,OAAc,YAA6B;AACpE,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,YAAY,KAAK,EAAE;AAAA,IAC5B,KAAK;AACH,aAAO,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,IACnD,KAAK;AACH,aAAO,YAAY,KAAK,EAAE;AAAA,IAC5B;AACE,aAAO,MAAM,aAAa,KAAK,EAAE,gBAAgB,IAAI;AAAA,EACzD;AACF;","names":[]}