@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-3CVTQZQJ.js

@@ -0,0 +1,232 @@
+import {
+  SettingsRailGroup
+} from "./chunk-2CTTASUD.js";
+import {
+  RAIL_WIDTH,
+  TOUCH_TARGET,
+  atLeastRail,
+  displayAcrossRail
+} from "./chunk-LIG7TKIB.js";
+
+// src/components/layout/SettingsLayout/SettingsLayout.rail.tsx
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import SearchIcon from "@mui/icons-material/Search";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsRailToggle({
+  title,
+  activeLabel,
+  open,
+  onToggle,
+  breakpoint,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "button",
+      type: "button",
+      onClick: onToggle,
+      "aria-expanded": open,
+      "aria-label": typeof title === "string" ? title : "Settings",
+      "data-testid": `${testIdPrefix}-toggle`,
+      sx: (theme) => ({
+        ...displayAcrossRail(theme, breakpoint, "flex", "none"),
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 1,
+        width: "100%",
+        minHeight: TOUCH_TARGET,
+        px: 1.5,
+        py: 1,
+        mb: 1,
+        textAlign: "left",
+        cursor: "pointer",
+        color: "text.primary",
+        background: "transparent",
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: 1.5
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+          title ? /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { display: "block", color: "text.secondary" }, children: title }) : null,
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, sx: { fontWeight: 600 }, children: activeLabel ?? "" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ExpandMoreIcon,
+          {
+            fontSize: "small",
+            sx: {
+              flex: "0 0 auto",
+              color: "text.secondary",
+              transition: "transform 150ms ease",
+              transform: open ? "rotate(180deg)" : "none",
+              "@media (prefers-reduced-motion: reduce)": { transition: "none" }
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function SettingsSearchEmpty({
+  label,
+  action,
+  onClear,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": `${testIdPrefix}-empty`, sx: { px: 1, py: 2 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: label }),
+    action ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "outlined",
+        onClick: () => {
+          onClear();
+          action.onClear?.();
+        },
+        "data-testid": `${testIdPrefix}-empty-action`,
+        sx: { mt: 1.5, minHeight: TOUCH_TARGET },
+        children: action.label
+      }
+    ) : null
+  ] });
+}
+function SettingsRailBody({
+  navOpen,
+  query,
+  onQueryChange,
+  searchPlaceholder,
+  emptySearchLabel,
+  emptySearchAction,
+  filteredGroups,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  onNavigate,
+  testIdPrefix,
+  ...shape
+}) {
+  const hidden = navOpen ? "block" : "none";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${testIdPrefix}-rail-body`,
+      sx: (theme) => shape.variant === "drilldown" ? { display: "block" } : displayAcrossRail(theme, shape.breakpoint, hidden, "block"),
+      children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            value: query,
+            onChange: (event) => onQueryChange(event.target.value),
+            placeholder: searchPlaceholder,
+            size: "small",
+            fullWidth: true,
+            "aria-label": searchPlaceholder,
+            "data-testid": `${testIdPrefix}-search`,
+            InputProps: {
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small", sx: { color: "text.secondary" } }) })
+            },
+            sx: { mb: 2 }
+          }
+        ),
+        filteredGroups.length === 0 ? /* @__PURE__ */ jsx(
+          SettingsSearchEmpty,
+          {
+            label: emptySearchLabel,
+            action: emptySearchAction,
+            onClear: () => onQueryChange(""),
+            testIdPrefix
+          }
+        ) : filteredGroups.map((group) => /* @__PURE__ */ jsx(
+          SettingsRailGroup,
+          {
+            group,
+            activeItemId,
+            linkComponent,
+            onSelectItem,
+            onNavigate,
+            testIdPrefix,
+            ...shape
+          },
+          group.id
+        ))
+      ]
+    }
+  );
+}
+function SettingsRail({
+  title,
+  activeLabel,
+  navOpen,
+  onToggleNav,
+  testIdPrefix,
+  fillHeight = false,
+  ...bodyProps
+}) {
+  const { variant, breakpoint, atIndex } = bodyProps;
+  const hiddenWhileInSection = variant === "drilldown" && !atIndex;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "nav",
+      "aria-label": typeof title === "string" ? title : "Settings",
+      "data-testid": `${testIdPrefix}-rail`,
+      sx: (theme) => ({
+        display: hiddenWhileInSection ? "none" : "block",
+        flex: "0 0 auto",
+        width: "100%",
+        [atLeastRail(theme, breakpoint)]: {
+          display: "block",
+          flex: `0 0 ${RAIL_WIDTH}px`,
+          width: RAIL_WIDTH,
+          borderRight: `1px solid ${theme.palette.divider}`,
+          pr: 2,
+          // Its own scrollbar, so a settings area with twenty categories does
+          // not make the thing you NAVIGATE with scroll away while you read the
+          // panel. `minHeight: 0` is the load-bearing half: without it a flex
+          // child refuses to shrink below its content and `overflow` never
+          // engages.
+          ...fillHeight ? { height: "100%", minHeight: 0, overflowY: "auto", overscrollBehavior: "contain" } : {}
+        }
+      }),
+      children: [
+        title ? /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "h6",
+            "data-testid": `${testIdPrefix}-title`,
+            sx: (theme) => ({
+              ...variant === "drilldown" ? { display: "block" } : displayAcrossRail(theme, breakpoint, "none", "block"),
+              fontWeight: 700,
+              mb: 1.5
+            }),
+            children: title
+          }
+        ) : null,
+        variant === "switcher" ? /* @__PURE__ */ jsx(
+          SettingsRailToggle,
+          {
+            title,
+            activeLabel,
+            open: navOpen,
+            onToggle: onToggleNav,
+            breakpoint,
+            testIdPrefix
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(SettingsRailBody, { navOpen, testIdPrefix, ...bodyProps })
+      ]
+    }
+  );
+}
+
+export {
+  SettingsRail
+};
+//# sourceMappingURL=chunk-3CVTQZQJ.js.map

package/dist/chunk-3D6HXKZM.js

@@ -0,0 +1,144 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/Tabs/Tabs.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var sizeStyles = (theme, size) => ({
+  ...size === "sm" && {
+    minHeight: 32,
+    "& .MuiTab-root": {
+      fontSize: rem(theme, 14),
+      minHeight: 32,
+      padding: theme.spacing(0.5, 1.5)
+    }
+  },
+  ...size === "lg" && {
+    minHeight: 56,
+    "& .MuiTab-root": {
+      fontSize: rem(theme, 18),
+      minHeight: 56,
+      padding: theme.spacing(1.5, 3)
+    }
+  }
+});
+var compactVariantStyles = (theme, customVariant) => ({
+  ...customVariant === "default" && {
+    "& .MuiTabs-indicator": {
+      height: 3,
+      borderRadius: "3px 3px 0 0",
+      background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`
+    }
+  },
+  // Pills variant (rounded tabs)
+  ...customVariant === "pills" && {
+    "& .MuiTabs-indicator": {
+      display: "none"
+    },
+    "& .MuiTab-root": {
+      borderRadius: theme.spacing(3),
+      margin: theme.spacing(0, 0.5),
+      minWidth: "auto",
+      transition: "all 0.3s ease",
+      "&:hover": {
+        backgroundColor: alpha(theme.palette.primary.main, 0.08),
+        transform: "translateY(-1px)"
+      },
+      "&.Mui-selected": {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+        "&:hover": {
+          backgroundColor: theme.palette.primary.dark
+        }
+      }
+    }
+  }
+  // Underline variant (minimal underline indicator)
+});
+var boxedVariantStyles = (theme, customVariant) => ({
+  ...customVariant === "underline" && {
+    "& .MuiTabs-flexContainer": {
+      gap: theme.spacing(2)
+    },
+    "& .MuiTabs-indicator": {
+      height: 2,
+      backgroundColor: theme.palette.primary.main,
+      borderRadius: 1
+    },
+    "& .MuiTab-root": {
+      textTransform: "none",
+      fontWeight: 500,
+      padding: theme.spacing(1, 0),
+      minWidth: "auto",
+      "&:hover": {
+        color: theme.palette.primary.main
+      },
+      "&.Mui-selected": {
+        color: theme.palette.primary.main,
+        fontWeight: 600
+      }
+    }
+  },
+  // Enclosed variant (bordered tabs)
+  ...customVariant === "enclosed" && {
+    "& .MuiTabs-indicator": {
+      display: "none"
+    },
+    "& .MuiTabs-flexContainer": {
+      borderBottom: `1px solid ${theme.palette.divider}`
+    },
+    "& .MuiTab-root": {
+      border: `1px solid ${theme.palette.divider}`,
+      borderBottom: "none",
+      borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
+      margin: theme.spacing(0, 0.5),
+      marginBottom: -1,
+      backgroundColor: alpha(theme.palette.action.hover, 0.5),
+      "&:hover": {
+        backgroundColor: alpha(theme.palette.action.hover, 0.8)
+      },
+      "&.Mui-selected": {
+        backgroundColor: theme.palette.background.paper,
+        borderColor: theme.palette.divider,
+        borderBottomColor: theme.palette.background.paper,
+        zIndex: 1
+      }
+    }
+  }
+});
+var variantStyles = (theme, customVariant) => ({
+  ...compactVariantStyles(theme, customVariant),
+  ...boxedVariantStyles(theme, customVariant)
+});
+var dividerStyles = (theme, customVariant, showDividers) => ({
+  ...showDividers && customVariant !== "enclosed" && customVariant !== "pills" && {
+    "& .MuiTab-root:not(:last-child)": {
+      borderRight: `1px solid ${alpha(theme.palette.divider, 0.5)}`
+    }
+  }
+});
+var tabsRootStyles = ({
+  theme,
+  customVariant,
+  size,
+  showDividers
+}) => ({
+  position: "relative",
+  // Collapse disabled scroll buttons (e.g. the left button at the start of a
+  // scrollable row) so they don't reserve empty space before the first tab.
+  "& .MuiTabs-scrollButtons.Mui-disabled": {
+    width: 0,
+    minWidth: 0,
+    overflow: "hidden"
+  },
+  // Size variants
+  ...sizeStyles(theme, size),
+  ...variantStyles(theme, customVariant),
+  ...dividerStyles(theme, customVariant, showDividers)
+});
+
+export {
+  tabsRootStyles
+};
+//# sourceMappingURL=chunk-3D6HXKZM.js.map

package/dist/chunk-3D6HXKZM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Tabs/Tabs.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\nimport { rem } from '../../../tokens/relative';\n\nconst sizeStyles = (theme: Theme, size?: string): CSSObject => ({\n    ...(size === 'sm' && {\n      minHeight: 32,\n      '& .MuiTab-root': {\n        fontSize: rem(theme, 14),\n        minHeight: 32,\n        padding: theme.spacing(0.5, 1.5),\n      },\n    }),\n\n    ...(size === 'lg' && {\n      minHeight: 56,\n      '& .MuiTab-root': {\n        fontSize: rem(theme, 18),\n        minHeight: 56,\n        padding: theme.spacing(1.5, 3),\n      },\n    }),\n\n});\n\nconst compactVariantStyles = (theme: Theme, customVariant?: string): CSSObject => ({\n    ...(customVariant === 'default' && {\n      '& .MuiTabs-indicator': {\n        height: 3,\n        borderRadius: '3px 3px 0 0',\n        background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,\n      },\n    }),\n\n    // Pills variant (rounded tabs)\n    ...(customVariant === 'pills' && {\n      '& .MuiTabs-indicator': {\n        display: 'none',\n      },\n      '& .MuiTab-root': {\n        borderRadius: theme.spacing(3),\n        margin: theme.spacing(0, 0.5),\n        minWidth: 'auto',\n        transition: 'all 0.3s ease',\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.primary.main, 0.08),\n          transform: 'translateY(-1px)',\n        },\n        '&.Mui-selected': {\n          backgroundColor: theme.palette.primary.main,\n          color: theme.palette.primary.contrastText,\n          boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,\n          '&:hover': {\n            backgroundColor: theme.palette.primary.dark,\n          },\n        },\n      },\n    }),\n\n    // Underline variant (minimal underline indicator)\n});\n\nconst boxedVariantStyles = (theme: Theme, customVariant?: string): CSSObject => ({\n    ...(customVariant === 'underline' && {\n      '& .MuiTabs-flexContainer': {\n        gap: theme.spacing(2),\n      },\n      '& .MuiTabs-indicator': {\n        height: 2,\n        backgroundColor: theme.palette.primary.main,\n        borderRadius: 1,\n      },\n      '& .MuiTab-root': {\n        textTransform: 'none',\n        fontWeight: 500,\n        padding: theme.spacing(1, 0),\n        minWidth: 'auto',\n        '&:hover': {\n          color: theme.palette.primary.main,\n        },\n        '&.Mui-selected': {\n          color: theme.palette.primary.main,\n          fontWeight: 600,\n        },\n      },\n    }),\n\n    // Enclosed variant (bordered tabs)\n    ...(customVariant === 'enclosed' && {\n      '& .MuiTabs-indicator': {\n        display: 'none',\n      },\n      '& .MuiTabs-flexContainer': {\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      },\n      '& .MuiTab-root': {\n        border: `1px solid ${theme.palette.divider}`,\n        borderBottom: 'none',\n        borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,\n        margin: theme.spacing(0, 0.5),\n        marginBottom: -1,\n        backgroundColor: alpha(theme.palette.action.hover, 0.5),\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.action.hover, 0.8),\n        },\n        '&.Mui-selected': {\n          backgroundColor: theme.palette.background.paper,\n          borderColor: theme.palette.divider,\n          borderBottomColor: theme.palette.background.paper,\n          zIndex: 1,\n        },\n      },\n    }),\n});\n\nconst variantStyles = (theme: Theme, customVariant?: string): CSSObject => ({\n  ...compactVariantStyles(theme, customVariant),\n  ...boxedVariantStyles(theme, customVariant),\n});\n\n// Vertical rules between tabs, for the variants that do not already have edges.\nconst dividerStyles = (\n  theme: Theme,\n  customVariant?: string,\n  showDividers?: boolean,\n): CSSObject => ({\n  ...(showDividers &&\n    customVariant !== 'enclosed' &&\n    customVariant !== 'pills' && {\n      '& .MuiTab-root:not(:last-child)': {\n        borderRight: `1px solid ${alpha(theme.palette.divider, 0.5)}`,\n      },\n    }),\n});\n\n// The root Tabs styling, kept out of Tabs.tsx so the styled() call stays small.\n// Spread into a fresh literal at the call site: handing styled() a named-type\n// value makes TypeScript demand a `variants` key (CSSObjectWithVariants).\nexport const tabsRootStyles = ({\n  theme,\n  customVariant,\n  size,\n  showDividers,\n}: {\n  theme: Theme;\n  customVariant?: string;\n  size?: string;\n  showDividers?: boolean;\n}): CSSObject => ({\n    position: 'relative',\n\n    // Collapse disabled scroll buttons (e.g. the left button at the start of a\n    // scrollable row) so they don't reserve empty space before the first tab.\n    '& .MuiTabs-scrollButtons.Mui-disabled': {\n      width: 0,\n      minWidth: 0,\n      overflow: 'hidden',\n    },\n\n    // Size variants\n  ...sizeStyles(theme, size),\n  ...variantStyles(theme, customVariant),\n  ...dividerStyles(theme, customVariant, showDividers),\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-3GTMGPNQ.js

@@ -0,0 +1,66 @@
+import {
+  resolveAxisConfig,
+  resolveBarGeometry
+} from "./chunk-SOHQPPYJ.js";
+import {
+  getAxisStyles,
+  getDefaultColors,
+  getSizeStyles,
+  resolveSeries
+} from "./chunk-EA2UNEL6.js";
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chart/chart-context.ts
+function buildChartContext(props, theme) {
+  const sizeStyles = getSizeStyles(theme, props.size, props.height);
+  const chartColors = getDefaultColors(theme, props.variant ?? "default", props.colors);
+  const { axisStyle, gridStroke, gridOpacity } = getAxisStyles(
+    theme,
+    props.variant ?? "default",
+    sizeStyles.fontSize
+  );
+  const handleChartClick = (payload) => {
+    const chartData = payload;
+    if (props.onClick && chartData?.activePayload?.[0]) {
+      props.onClick(chartData.activePayload[0].payload);
+    }
+  };
+  return {
+    props,
+    theme,
+    sizeStyles,
+    chartColors,
+    chartSeries: resolveSeries(props.data, props.series, props.xAxisKey ?? "name", chartColors),
+    strokeType: props.curved ?? true ? "monotone" : "linear",
+    axisStyle: { ...axisStyle, fontSize: sizeStyles.fontSize },
+    gridStroke,
+    gridOpacity,
+    axisConfig: resolveAxisConfig(props, sizeStyles.tickMargin),
+    barGeometry: resolveBarGeometry(props, theme),
+    animationDuration: props.animate ?? true ? props.animationDuration ?? 1500 : 0,
+    commonProps: {
+      data: props.data,
+      margin: {
+        top: remPx(theme, 20),
+        right: remPx(theme, 30),
+        left: remPx(theme, 20),
+        bottom: remPx(theme, 20),
+        ...marginPx(theme, props.margin)
+      },
+      onClick: handleChartClick
+    }
+  };
+}
+function marginPx(theme, margin) {
+  if (!margin) return void 0;
+  return Object.fromEntries(
+    Object.entries(margin).map(([side, px]) => [side, typeof px === "number" ? remPx(theme, px) : px])
+  );
+}
+
+export {
+  buildChartContext
+};
+//# sourceMappingURL=chunk-3GTMGPNQ.js.map

package/dist/chunk-3GTMGPNQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/chart-context.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\nimport type { CSSProperties } from 'react';\n\nimport type { ChartDataPoint, ChartProps, ChartSeries } from './Chart.types';\nimport { resolveAxisConfig, resolveBarGeometry, type BarGeometry, type CartesianAxisConfig } from './chart-axis';\nimport {\n  getAxisStyles,\n  getDefaultColors,\n  getSizeStyles,\n  resolveSeries,\n  type SizeStyles,\n} from './chart-internals';\nimport { remPx } from '../../../tokens/relative';\n\n/**\n * Everything the per-type renderers in `chart-renderers.tsx` read, resolved\n * once from props + theme. Kept out of that file so each renderer is a small\n * JSX function over already-decided values — palette, series, axis geometry,\n * bar geometry — rather than a place where those decisions get made again\n * slightly differently.\n */\nexport interface ChartRenderContext {\n  props: ChartProps;\n  theme: Theme;\n  sizeStyles: SizeStyles;\n  chartColors: string[];\n  chartSeries: ChartSeries[];\n  strokeType: 'monotone' | 'linear';\n  axisStyle: CSSProperties;\n  gridStroke: string;\n  /** Multiplier on `gridStroke`'s alpha — see `getAxisStyles`. */\n  gridOpacity: number;\n  axisConfig: CartesianAxisConfig;\n  barGeometry: BarGeometry;\n  animationDuration: number;\n  commonProps: {\n    data: ChartDataPoint[];\n    margin: { top?: number; right?: number; bottom?: number; left?: number };\n    onClick: (payload: unknown) => void;\n  };\n}\n\nexport function buildChartContext(props: ChartProps, theme: Theme): ChartRenderContext {\n  const sizeStyles = getSizeStyles(theme, props.size, props.height);\n  const chartColors = getDefaultColors(theme, props.variant ?? 'default', props.colors);\n  const { axisStyle, gridStroke, gridOpacity } = getAxisStyles(\n    theme,\n    props.variant ?? 'default',\n    sizeStyles.fontSize,\n  );\n  const handleChartClick = (payload: unknown): void => {\n    const chartData = payload as { activePayload?: Array<{ payload: ChartDataPoint }> };\n    if (props.onClick && chartData?.activePayload?.[0]) {\n      props.onClick(chartData.activePayload[0].payload);\n    }\n  };\n  return {\n    props,\n    theme,\n    sizeStyles,\n    chartColors,\n    chartSeries: resolveSeries(props.data, props.series, props.xAxisKey ?? 'name', chartColors),\n    strokeType: (props.curved ?? true) ? 'monotone' : 'linear',\n    axisStyle: { ...axisStyle, fontSize: sizeStyles.fontSize },\n    gridStroke,\n    gridOpacity,\n    axisConfig: resolveAxisConfig(props, sizeStyles.tickMargin),\n    barGeometry: resolveBarGeometry(props, theme),\n    animationDuration: (props.animate ?? true) ? (props.animationDuration ?? 1500) : 0,\n    commonProps: {\n      data: props.data,\n      margin: {\n        top: remPx(theme, 20),\n        right: remPx(theme, 30),\n        left: remPx(theme, 20),\n        bottom: remPx(theme, 20),\n        ...marginPx(theme, props.margin),\n      },\n      onClick: handleChartClick,\n    },\n  };\n}\n\n/** A caller's margin is in design px (the prop's contract); Recharts takes px numbers. */\nfunction marginPx(theme: Theme, margin: ChartProps['margin']): ChartProps['margin'] {\n  if (!margin) return undefined;\n  return Object.fromEntries(\n    Object.entries(margin).map(([side, px]) => [side, typeof px === 'number' ? remPx(theme, px) : px]),\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA0CO,SAAS,kBAAkB,OAAmB,OAAkC;AACrF,QAAM,aAAa,cAAc,OAAO,MAAM,MAAM,MAAM,MAAM;AAChE,QAAM,cAAc,iBAAiB,OAAO,MAAM,WAAW,WAAW,MAAM,MAAM;AACpF,QAAM,EAAE,WAAW,YAAY,YAAY,IAAI;AAAA,IAC7C;AAAA,IACA,MAAM,WAAW;AAAA,IACjB,WAAW;AAAA,EACb;AACA,QAAM,mBAAmB,CAAC,YAA2B;AACnD,UAAM,YAAY;AAClB,QAAI,MAAM,WAAW,WAAW,gBAAgB,CAAC,GAAG;AAClD,YAAM,QAAQ,UAAU,cAAc,CAAC,EAAE,OAAO;AAAA,IAClD;AAAA,EACF;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,cAAc,MAAM,MAAM,MAAM,QAAQ,MAAM,YAAY,QAAQ,WAAW;AAAA,IAC1F,YAAa,MAAM,UAAU,OAAQ,aAAa;AAAA,IAClD,WAAW,EAAE,GAAG,WAAW,UAAU,WAAW,SAAS;AAAA,IACzD;AAAA,IACA;AAAA,IACA,YAAY,kBAAkB,OAAO,WAAW,UAAU;AAAA,IAC1D,aAAa,mBAAmB,OAAO,KAAK;AAAA,IAC5C,mBAAoB,MAAM,WAAW,OAAS,MAAM,qBAAqB,OAAQ;AAAA,IACjF,aAAa;AAAA,MACX,MAAM,MAAM;AAAA,MACZ,QAAQ;AAAA,QACN,KAAK,MAAM,OAAO,EAAE;AAAA,QACpB,OAAO,MAAM,OAAO,EAAE;AAAA,QACtB,MAAM,MAAM,OAAO,EAAE;AAAA,QACrB,QAAQ,MAAM,OAAO,EAAE;AAAA,QACvB,GAAG,SAAS,OAAO,MAAM,MAAM;AAAA,MACjC;AAAA,MACA,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAGA,SAAS,SAAS,OAAc,QAAoD;AAClF,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,OAAO,OAAO,WAAW,MAAM,OAAO,EAAE,IAAI,EAAE,CAAC;AAAA,EACnG;AACF;","names":[]}

package/dist/chunk-3KA6MYIR.js

@@ -0,0 +1,65 @@
+import {
+  onMedia,
+  scrim,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+import {
+  remPx,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Lightbox/Lightbox.constants.ts
+var MIN_ZOOM = 0.5;
+var MAX_ZOOM = 5;
+var ZOOM_STEP = 1.2;
+var WHEEL_ZOOM_FACTOR = 0.01;
+var DEFAULT_AUTOPLAY_INTERVAL_MS = 4e3;
+var OVERLAY_Z_INDEX = 1e3;
+var minSwipeDistance = (theme) => remPx(theme, 50);
+var SCRIM = (theme) => scrim(theme, 0.5);
+var SCRIM_HOVER = (theme) => scrim(theme, 0.7);
+var overlayButtonSx = {
+  color: onMedia,
+  backgroundColor: SCRIM,
+  "&:hover": { backgroundColor: SCRIM_HOVER }
+};
+var navButtonSx = {
+  color: onMedia,
+  backgroundColor: SCRIM,
+  "&:hover:not(:disabled)": { backgroundColor: SCRIM_HOVER },
+  "&:disabled": { color: (theme) => sheen(theme, 0.3) }
+};
+var captionSx = {
+  color: onMedia,
+  textAlign: "center",
+  backgroundColor: SCRIM_HOVER,
+  borderRadius: 1
+};
+var counterSx = {
+  color: onMedia,
+  fontSize: sxRem(14),
+  backgroundColor: SCRIM,
+  borderRadius: 1
+};
+var thumbnailStripSx = {
+  background: SCRIM,
+  borderRadius: 1
+};
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `lightbox-${suffix}`;
+
+export {
+  MIN_ZOOM,
+  MAX_ZOOM,
+  ZOOM_STEP,
+  WHEEL_ZOOM_FACTOR,
+  DEFAULT_AUTOPLAY_INTERVAL_MS,
+  OVERLAY_Z_INDEX,
+  minSwipeDistance,
+  overlayButtonSx,
+  navButtonSx,
+  captionSx,
+  counterSx,
+  thumbnailStripSx,
+  makeTestId
+};
+//# sourceMappingURL=chunk-3KA6MYIR.js.map

package/dist/chunk-3KA6MYIR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.constants.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { onMedia, scrim, sheen } from '../../../tokens/ink';\nimport { remPx, sxRem } from '../../../tokens/relative';\n\nexport const MIN_ZOOM = 0.5;\nexport const MAX_ZOOM = 5;\nexport const ZOOM_STEP = 1.2;\n// Each wheel notch is ~100 deltaY, so this makes one notch a 1x zoom change.\nexport const WHEEL_ZOOM_FACTOR = 0.01;\n\nexport const DEFAULT_AUTOPLAY_INTERVAL_MS = 4000;\nexport const OVERLAY_Z_INDEX = 1000;\n\n/**\n * How far a finger must travel to count as a swipe: 50 design px, in the px a\n * touch event reports, so it moves with the theme's type scale.\n */\nexport const minSwipeDistance = (theme: Theme): number => remPx(theme, 50);\n\nconst SCRIM = (theme: Theme): string => scrim(theme, 0.5);\nconst SCRIM_HOVER = (theme: Theme): string => scrim(theme, 0.7);\n\nexport const overlayButtonSx = {\n  color: onMedia,\n  backgroundColor: SCRIM,\n  '&:hover': { backgroundColor: SCRIM_HOVER },\n} as const;\n\n// The arrows drop their hover treatment at the ends of a non-looping gallery and\n// dim instead, so a disabled arrow does not look pressable.\nexport const navButtonSx = {\n  color: onMedia,\n  backgroundColor: SCRIM,\n  '&:hover:not(:disabled)': { backgroundColor: SCRIM_HOVER },\n  '&:disabled': { color: (theme: Theme) => sheen(theme, 0.3) },\n} as const;\n\nexport const captionSx = {\n  color: onMedia,\n  textAlign: 'center',\n  backgroundColor: SCRIM_HOVER,\n  borderRadius: 1,\n} as const;\n\nexport const counterSx = {\n  color: onMedia,\n  fontSize: sxRem(14),\n  backgroundColor: SCRIM,\n  borderRadius: 1,\n} as const;\n\nexport const thumbnailStripSx = {\n  background: SCRIM,\n  borderRadius: 1,\n} as const;\n\n// Every element gets `${dataTestId}-suffix` when the caller supplied an id, and\n// `lightbox-suffix` otherwise.\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `lightbox-${suffix}`;\n"],"mappings":";;;;;;;;;;;AAKO,IAAM,WAAW;AACjB,IAAM,WAAW;AACjB,IAAM,YAAY;AAElB,IAAM,oBAAoB;AAE1B,IAAM,+BAA+B;AACrC,IAAM,kBAAkB;AAMxB,IAAM,mBAAmB,CAAC,UAAyB,MAAM,OAAO,EAAE;AAEzE,IAAM,QAAQ,CAAC,UAAyB,MAAM,OAAO,GAAG;AACxD,IAAM,cAAc,CAAC,UAAyB,MAAM,OAAO,GAAG;AAEvD,IAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW,EAAE,iBAAiB,YAAY;AAC5C;AAIO,IAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,0BAA0B,EAAE,iBAAiB,YAAY;AAAA,EACzD,cAAc,EAAE,OAAO,CAAC,UAAiB,MAAM,OAAO,GAAG,EAAE;AAC7D;AAEO,IAAM,YAAY;AAAA,EACvB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAEO,IAAM,YAAY;AAAA,EACvB,OAAO;AAAA,EACP,UAAU,MAAM,EAAE;AAAA,EAClB,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAEO,IAAM,mBAAmB;AAAA,EAC9B,YAAY;AAAA,EACZ,cAAc;AAChB;AAIO,IAAM,aACX,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,YAAY,MAAM;","names":[]}

package/dist/chunk-3TVUW7QE.js

@@ -0,0 +1,138 @@
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/CodeEditor/CodeEditorToolbar.tsx
+import CodeIcon from "@mui/icons-material/Code";
+import CopyIcon from "@mui/icons-material/ContentCopy";
+import ExitFullscreenIcon from "@mui/icons-material/FullscreenExit";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import WrapIcon from "@mui/icons-material/WrapText";
+import Box from "@mui/material/Box/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `code-editor-${suffix}`;
+var Toolbar = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: theme.spacing(1, 2),
+  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
+  background: alpha(theme.palette.background.default, 0.4)
+}));
+var LanguageBadge = styled(Box)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  padding: theme.spacing(0.5, 1),
+  borderRadius: theme.shape.borderRadius,
+  background: alpha(theme.palette.primary.main, 0.1),
+  color: theme.palette.primary.main,
+  fontSize: rem(theme, 12),
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em"
+}));
+var EditorActions = ({
+  copy,
+  readOnly,
+  isWrapped,
+  isCopied,
+  isFullscreen,
+  dataTestId,
+  onFormat,
+  onCopy,
+  onWrapToggle,
+  onFullscreenToggle
+}) => {
+  const testId = makeTestId(dataTestId);
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+    !readOnly && /* @__PURE__ */ jsx(Tooltip, { title: copy.formatCode, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        onClick: onFormat,
+        "data-testid": testId("format-btn"),
+        children: /* @__PURE__ */ jsx(CodeIcon, { fontSize: "small" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: isWrapped ? copy.disableWrap : copy.enableWrap, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        onClick: onWrapToggle,
+        color: isWrapped ? "primary" : "default",
+        "data-testid": testId("wrap-btn"),
+        children: /* @__PURE__ */ jsx(WrapIcon, { fontSize: "small" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: isCopied ? copy.copied : copy.copyToClipboard, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        onClick: onCopy,
+        color: isCopied ? "success" : "default",
+        "data-testid": testId("copy-btn"),
+        children: /* @__PURE__ */ jsx(CopyIcon, { fontSize: "small" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: isFullscreen ? copy.exitFullscreen : copy.enterFullscreen, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        onClick: onFullscreenToggle,
+        "data-testid": testId("fullscreen-btn"),
+        children: isFullscreen ? /* @__PURE__ */ jsx(ExitFullscreenIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(FullscreenIcon, { fontSize: "small" })
+      }
+    ) })
+  ] });
+};
+var EditorToolbar = ({
+  copy,
+  language,
+  readOnly,
+  isWrapped,
+  isCopied,
+  isFullscreen,
+  dataTestId,
+  onFormat,
+  onCopy,
+  onWrapToggle,
+  onFullscreenToggle
+}) => {
+  const testId = makeTestId(dataTestId);
+  return /* @__PURE__ */ jsxs(Toolbar, { "data-testid": testId("toolbar"), children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(LanguageBadge, { "data-testid": testId("language-badge"), children: [
+        /* @__PURE__ */ jsx(CodeIcon, { sx: { fontSize: sxRem(14) } }),
+        language
+      ] }),
+      readOnly && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: copy.readOnly })
+    ] }),
+    /* @__PURE__ */ jsx(
+      EditorActions,
+      {
+        copy,
+        readOnly,
+        isWrapped,
+        isCopied,
+        isFullscreen,
+        dataTestId,
+        onFormat,
+        onCopy,
+        onWrapToggle,
+        onFullscreenToggle
+      }
+    )
+  ] });
+};
+
+export {
+  EditorToolbar
+};
+//# sourceMappingURL=chunk-3TVUW7QE.js.map