@12-apps/ui 6.31.0 → 6.32.0

package/dist/{chunk-JOPTI47I.js → chunk-BM4ZPBBT.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-X2R7QG5I.js";
+} from "./chunk-6MDBMCFK.js";
 import {
   Text
-} from "./chunk-QNUWSXF2.js";
+} from "./chunk-H57ZS6W2.js";
 
 // src/components/data-display/DataViews/data-views-select-all-strip.tsx
 import Checkbox from "@mui/material/Checkbox/index.js";
@@ -85,4 +85,4 @@ function SelectAllStrip({
 export {
   SelectAllStrip
 };
-//# sourceMappingURL=chunk-JOPTI47I.js.map
+//# sourceMappingURL=chunk-BM4ZPBBT.js.map

package/dist/{chunk-VGSEI7PQ.js → chunk-BTIBFR5L.js}

@@ -5,7 +5,7 @@ import {
   getColorFromTheme,
   getSizeStyles,
   pulseAnimation
-} from "./chunk-2YOQLBEX.js";
+} from "./chunk-OZZNC4YU.js";
 import {
   progressLabelText,
   resolveProgressProps
@@ -237,4 +237,4 @@ Progress.displayName = "Progress";
 export {
   Progress
 };
-//# sourceMappingURL=chunk-VGSEI7PQ.js.map
+//# sourceMappingURL=chunk-BTIBFR5L.js.map

package/dist/{chunk-6SXZ7CF2.js → chunk-BTVIHTAL.js}

@@ -1,3 +1,6 @@
+import {
+  fieldHeight
+} from "./chunk-CGO452DC.js";
 import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
@@ -56,7 +59,7 @@ function ViewSelector({
         "aria-haspopup": "menu",
         "aria-expanded": open,
         onClick: (event) => setAnchorEl(event.currentTarget),
-        sx: { minWidth: 0, height: 32, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: "text.secondary" },
+        sx: { minWidth: 0, height: fieldHeight, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: "text.secondary" },
         children: [
           /* @__PURE__ */ jsx(ActiveIcon, { sx: { fontSize: 16 } }),
           /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: 14 } })
@@ -101,4 +104,4 @@ function ViewSelector({
 export {
   ViewSelector
 };
-//# sourceMappingURL=chunk-6SXZ7CF2.js.map
+//# sourceMappingURL=chunk-BTVIHTAL.js.map

package/dist/chunk-BTVIHTAL.js.map

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

package/dist/{chunk-C2ZNAQMO.js → chunk-BUXSHLQM.js}

@@ -3,11 +3,11 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   createConfirmButton
-} from "./chunk-2N2KNXTF.js";
+} from "./chunk-XO27IMBE.js";
 import {
   Dialog,
   DialogContent
-} from "./chunk-YANLN6HP.js";
+} from "./chunk-D6HDJVQW.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -16,10 +16,10 @@ import {
 } from "./chunk-WEBEOBN5.js";
 import {
   Button
-} from "./chunk-X2R7QG5I.js";
+} from "./chunk-6MDBMCFK.js";
 import {
   Text
-} from "./chunk-QNUWSXF2.js";
+} from "./chunk-H57ZS6W2.js";
 
 // src/components/data-display/DataViews/ManageViewsDialog.tsx
 import { useMemo } from "react";
@@ -128,4 +128,4 @@ function ManageViewsDialog({
 export {
   ManageViewsDialog
 };
-//# sourceMappingURL=chunk-C2ZNAQMO.js.map
+//# sourceMappingURL=chunk-BUXSHLQM.js.map

package/dist/{chunk-CIVLXOLG.js → chunk-C5WSPGMP.js}

@@ -1,6 +1,6 @@
 import {
   accentFor
-} from "./chunk-F73D4EMA.js";
+} from "./chunk-3DO5MFXA.js";
 
 // src/components/data-display/Chart/chart-internals.ts
 import { alpha } from "@mui/material/styles/index.js";
@@ -112,4 +112,4 @@ export {
   resolveSeries,
   getAxisStyles
 };
-//# sourceMappingURL=chunk-CIVLXOLG.js.map
+//# sourceMappingURL=chunk-C5WSPGMP.js.map

package/dist/{chunk-SGV7QGYQ.js → chunk-C6R4LVUX.js}

@@ -3,20 +3,20 @@ import {
 } from "./chunk-5M4TYFR3.js";
 import {
   PreviewBox
-} from "./chunk-ZVTJGWIV.js";
+} from "./chunk-AYRHW4DX.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   Switch
-} from "./chunk-RCI6KVN6.js";
+} from "./chunk-R67J6JKT.js";
 import {
   Input
-} from "./chunk-Q544QEIN.js";
+} from "./chunk-P3L42CBB.js";
 import {
   Dialog,
   DialogContent
-} from "./chunk-YANLN6HP.js";
+} from "./chunk-D6HDJVQW.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -25,10 +25,10 @@ import {
 } from "./chunk-WEBEOBN5.js";
 import {
   Button
-} from "./chunk-X2R7QG5I.js";
+} from "./chunk-6MDBMCFK.js";
 import {
   Text
-} from "./chunk-QNUWSXF2.js";
+} from "./chunk-H57ZS6W2.js";
 
 // src/components/data-display/DataViews/SaveViewModal.tsx
 import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined";
@@ -265,4 +265,4 @@ function SaveViewModal({
 export {
   SaveViewModal
 };
-//# sourceMappingURL=chunk-SGV7QGYQ.js.map
+//# sourceMappingURL=chunk-C6R4LVUX.js.map

package/dist/{chunk-DV42HAVP.js → chunk-CDNJOA3N.js}

@@ -5,11 +5,18 @@ import {
   slideAnimation
 } from "./chunk-65CEXQ4L.js";
 import {
-  fieldEdge
-} from "./chunk-7FDU3FIN.js";
+  asFieldSize,
+  fieldHeight
+} from "./chunk-CGO452DC.js";
 import {
   fieldRadius
 } from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
 
 // src/components/form/RadioGroup/RadioGroup.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
@@ -140,7 +147,7 @@ var buttonBase = (theme, flags, palette) => {
     borderRadius: fieldRadius(theme),
     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
     fontWeight: 500,
-    border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
+    border: `${FIELD_BORDER_WIDTH}px solid ${selected ? palette.main : fieldEdge(theme)}`,
     backgroundColor: selected ? palette.main : "transparent",
     color: selected ? palette.contrastText || "#fff" : theme.palette.text.primary,
     position: "relative",
@@ -171,7 +178,11 @@ var buttonBase = (theme, flags, palette) => {
       boxShadow: `0 4px 12px ${alpha(palette.main, 0.2)}`
     },
     "&:active": { transform: "scale(0.98)" },
-    ...pickSize(BUTTON_SIZES, customSize)
+    ...pickSize(BUTTON_SIZES, customSize),
+    // The theme's field height for the size, in place of the table's own.
+    minHeight: fieldHeight(theme, asFieldSize(customSize)),
+    paddingTop: 0,
+    paddingBottom: 0
   };
 };
 var buttonRadioSx = (theme, flags) => {
@@ -235,7 +246,11 @@ var segmentButtonSx = (theme, flags) => {
       "&::before": { width: "100%", left: 0, transform: "translateX(0)" }
     },
     "&:active": { transform: "scale(0.98)" },
-    ...pickSize(SEGMENT_SIZES, customSize)
+    ...pickSize(SEGMENT_SIZES, customSize),
+    // Each segment is a field; the track around it adds its own inset.
+    minHeight: fieldHeight(theme, asFieldSize(customSize)),
+    paddingTop: 0,
+    paddingBottom: 0
   };
 };
 
@@ -246,4 +261,4 @@ export {
   segmentContainerSx,
   segmentButtonSx
 };
-//# sourceMappingURL=chunk-DV42HAVP.js.map
+//# sourceMappingURL=chunk-CDNJOA3N.js.map

package/dist/chunk-CDNJOA3N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/RadioGroup/RadioGroup.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { glowAnimation, rippleAnimation, scaleAnimation, slideAnimation } from './RadioGroup.animations';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';\n\n/** The segment track's padding and border: its corner is the segments' plus these. */\nconst SEGMENT_TRACK_PADDING = 4;\nconst SEGMENT_TRACK_BORDER = 1;\n\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/**\n * `neutral` is not a MUI palette entry, so it is built from the grey ramp. The\n * literal fallbacks cover a theme whose grey ramp has been replaced with one\n * that omits these steps.\n */\nconst neutralPalette = (theme: Theme): ColorPalette => ({\n  main: theme.palette.grey?.[700] || '#616161',\n  dark: theme.palette.grey?.[800] || '#424242',\n  light: theme.palette.grey?.[500] || '#9e9e9e',\n  contrastText: '#fff',\n});\n\n/** `danger` is this component's name for the error palette; the rest map straight through. */\nconst namedPalette = (theme: Theme, color: string): ColorPalette => {\n  const colorMap: Record<string, ColorPalette> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\n/**\n * Resolves a colour name to a full palette, filling any step the theme leaves\n * out from `main` and then from the primary palette. Split into three so the\n * fallback chains do not all count against one function.\n */\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') {\n    return neutralPalette(theme);\n  }\n\n  const palette = namedPalette(theme, color);\n  const { primary } = theme.palette;\n\n  // namedPalette always yields a palette, so these need no optional chaining;\n  // each step still falls back to `main` and then to primary when the theme\n  // leaves it out.\n  return {\n    main: palette.main || primary.main,\n    dark: palette.dark || palette.main || primary.dark,\n    light: palette.light || palette.main || primary.light,\n    contrastText: palette.contrastText || '#fff',\n  };\n};\n\ntype SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst pickSize = <T,>(map: Record<SizeKey, T>, size: string): T => map[size as SizeKey] ?? map.md;\n\nconst CARD_SIZES: Record<SizeKey, CSSObject> = {\n  xs: { padding: '8px', minHeight: '60px' },\n  sm: { padding: '12px', minHeight: '70px' },\n  md: { padding: '16px', minHeight: '80px' },\n  lg: { padding: '20px', minHeight: '90px' },\n  xl: { padding: '24px', minHeight: '100px' },\n};\n\nconst BUTTON_SIZES: Record<SizeKey, CSSObject> = {\n  xs: { padding: '6px 12px', fontSize: '0.75rem', minHeight: '32px' },\n  sm: { padding: '8px 16px', fontSize: '0.875rem', minHeight: '36px' },\n  md: { padding: '10px 20px', fontSize: '1rem', minHeight: '40px' },\n  lg: { padding: '12px 24px', fontSize: '1.125rem', minHeight: '44px' },\n  xl: { padding: '14px 28px', fontSize: '1.25rem', minHeight: '48px' },\n};\n\nconst SEGMENT_SIZES: Record<SizeKey, CSSObject> = {\n  xs: { padding: '4px 8px', fontSize: '0.75rem' },\n  sm: { padding: '6px 12px', fontSize: '0.875rem' },\n  md: { padding: '8px 16px', fontSize: '1rem' },\n  lg: { padding: '10px 20px', fontSize: '1.125rem' },\n  xl: { padding: '12px 24px', fontSize: '1.25rem' },\n};\n\nexport interface SurfaceFlags {\n  selected?: boolean;\n  customColor?: string;\n  glass?: boolean;\n  gradient?: boolean;\n  glow?: boolean;\n  customSize?: string;\n  animated?: boolean;\n}\n\nexport const formLabelSx = (theme: Theme, glass?: boolean, error?: boolean): CSSObject => ({\n  marginBottom: theme.spacing(2),\n  fontWeight: 600,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  ...(glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(10px)',\n    padding: '8px 12px',\n    borderRadius: '8px',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    display: 'inline-block',\n  }),\n});\n\n/** The card's resting surface, before glass/gradient/glow override parts of it. */\nconst cardBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSSObject => {\n  const { selected, animated, customSize = 'md' } = flags;\n\n  return {\n    cursor: 'pointer',\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,\n    backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    ...(animated && { animation: `${slideAnimation} 0.4s ease-out` }),\n    // A radial wash that grows from the centre as the card is selected or hovered.\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      width: selected ? '100%' : '0',\n      height: selected ? '100%' : '0',\n      background: `radial-gradient(circle, ${alpha(palette.main, 0.1)} 0%, transparent 70%)`,\n      transform: 'translate(-50%, -50%)',\n      transition: 'all 0.5s ease',\n      borderRadius: '50%',\n    },\n    '&:hover': {\n      borderColor: palette.main,\n      backgroundColor: alpha(palette.main, 0.02),\n      transform: 'translateY(-2px) scale(1.02)',\n      boxShadow: `${theme.shadows[4]}, 0 10px 30px -5px ${alpha(palette.main, 0.2)}`,\n      '&::before': { width: '120%', height: '120%' },\n    },\n    '&:active': { transform: 'scale(0.98)' },\n    ...pickSize(CARD_SIZES, customSize),\n  };\n};\n\nexport const radioCardSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n  const { selected, customColor = 'primary', glass, gradient, glow } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    ...cardBase(theme, flags, palette),\n    ...(glass && {\n      backgroundColor: selected\n        ? alpha(palette.main, 0.1)\n        : alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: 'blur(20px)',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    }),\n    ...(gradient &&\n      selected && {\n        background: `linear-gradient(135deg, ${alpha(palette.main, 0.1)}, ${alpha(palette.light || palette.main, 0.05)})`,\n        borderColor: palette.main,\n      }),\n    ...(glow &&\n      selected && {\n        animation: `${glowAnimation} 2s ease-in-out infinite`,\n        boxShadow: `0 0 15px ${alpha(palette.main, 0.4)}`,\n      }),\n  };\n};\n\n/** The pill button's resting surface, before glass/gradient override parts of it. */\nconst buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSSObject => {\n  const { selected, animated, customSize = 'md' } = flags;\n\n  return {\n    borderRadius: fieldRadius(theme),\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    fontWeight: 500,\n    border: `${FIELD_BORDER_WIDTH}px solid ${selected ? palette.main : fieldEdge(theme)}`,\n    backgroundColor: selected ? palette.main : 'transparent',\n    color: selected ? palette.contrastText || '#fff' : theme.palette.text.primary,\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    ...(animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` }),\n    // Sized to zero until pressed, when the ripple keyframes expand it.\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      width: 0,\n      height: 0,\n      borderRadius: '50%',\n      backgroundColor: alpha(palette.contrastText || '#fff', 0.3),\n      transform: 'translate(-50%, -50%)',\n      pointerEvents: 'none' as const,\n    },\n    '&:active::after': {\n      animation: `${rippleAnimation} 0.6s ease-out`,\n      width: '100%',\n      height: '100%',\n    },\n    '&:hover': {\n      borderColor: palette.main,\n      backgroundColor: selected ? palette.dark : alpha(palette.main, 0.1),\n      transform: 'translateY(-1px) scale(1.02)',\n      boxShadow: `0 4px 12px ${alpha(palette.main, 0.2)}`,\n    },\n    '&:active': { transform: 'scale(0.98)' },\n    ...pickSize(BUTTON_SIZES, customSize),\n    // The theme's field height for the size, in place of the table's own.\n    minHeight: fieldHeight(theme, asFieldSize(customSize)),\n    paddingTop: 0,\n    paddingBottom: 0,\n  };\n};\n\nexport const buttonRadioSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n  const { selected, customColor = 'primary', glass, gradient } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    ...buttonBase(theme, flags, palette),\n    ...(glass && {\n      backgroundColor: selected\n        ? alpha(palette.main, 0.8)\n        : alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: 'blur(20px)',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    }),\n    ...(gradient &&\n      selected && {\n        background: `linear-gradient(135deg, ${palette.main}, ${palette.dark})`,\n        border: 'none',\n      }),\n  };\n};\n\nexport const segmentContainerSx = (\n  theme: Theme,\n  glass?: boolean,\n  customColor = 'primary',\n): CSSObject => {\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    padding: `${SEGMENT_TRACK_PADDING}px`,\n    // Concentric with the segments inside it, which take the field radius.\n    borderRadius: fieldRadius(theme) + SEGMENT_TRACK_PADDING + SEGMENT_TRACK_BORDER,\n    backgroundColor: glass\n      ? alpha(theme.palette.background.paper, 0.1)\n      : alpha(palette.main, 0.05),\n    backdropFilter: glass ? 'blur(20px)' : 'none',\n    border: `${SEGMENT_TRACK_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}`,\n    display: 'flex',\n    gap: '2px',\n  };\n};\n\n/**\n * An underline that grows from the centre outwards, and is already full width\n * when the segment is the selected one.\n */\nconst segmentUnderline = (color: string, selected: boolean): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute',\n  bottom: 0,\n  left: selected ? 0 : '50%',\n  width: selected ? '100%' : 0,\n  height: '2px',\n  backgroundColor: color,\n  transition: 'all 0.3s ease',\n  transform: selected ? 'translateX(0)' : 'translateX(-50%)',\n});\n\nexport const segmentButtonSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n  const { selected, customColor = 'primary', customSize = 'md', animated } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    flex: 1,\n    borderRadius: fieldRadius(theme),\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    fontWeight: 500,\n    backgroundColor: selected ? theme.palette.background.paper : 'transparent',\n    color: selected ? palette.main : theme.palette.text.secondary,\n    boxShadow: selected\n      ? `${theme.shadows[2]}, inset 0 1px 3px ${alpha(palette.main, 0.1)}`\n      : 'none',\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    ...(animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` }),\n    '&::before': segmentUnderline(palette.main, Boolean(selected)),\n    '&:hover': {\n      backgroundColor: selected\n        ? theme.palette.background.paper\n        : alpha(theme.palette.action.hover, 0.08),\n      color: palette.main,\n      '&::before': { width: '100%', left: 0, transform: 'translateX(0)' },\n    },\n    '&:active': { transform: 'scale(0.98)' },\n    ...pickSize(SEGMENT_SIZES, customSize),\n    // Each segment is a field; the track around it adds its own inset.\n    minHeight: fieldHeight(theme, asFieldSize(customSize)),\n    paddingTop: 0,\n    paddingBottom: 0,\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-CGO452DC.js

@@ -0,0 +1,90 @@
+import {
+  fieldRadiusOverrides,
+  fieldRootStyles
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  DEFAULT_FIELD_HEIGHT,
+  FIELD_BORDER_WIDTH,
+  FIELD_HEIGHT_SCALE,
+  fieldHeightRem,
+  resolveFieldHeight
+} from "./chunk-PZBK3F52.js";
+
+// src/tokens/field-height.ts
+function asFieldSize(size) {
+  return size !== void 0 && size in FIELD_HEIGHT_SCALE ? size : "md";
+}
+function fieldHeight(theme, size = "md") {
+  return `${fieldHeightRem(resolveFieldHeight(theme.fieldHeight), size)}rem`;
+}
+function fieldBorder(theme, surface) {
+  return `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme, surface)}`;
+}
+var verticalInset = (height) => `calc((${height} - 1.4375em) / 2)`;
+function fieldControlStyles(theme, size = "md") {
+  const inset = verticalInset(fieldHeight(theme, size));
+  return {
+    "& .MuiOutlinedInput-root:not(.MuiInputBase-multiline)": {
+      paddingTop: 0,
+      paddingBottom: 0,
+      "& .MuiOutlinedInput-input, & .MuiSelect-select": { paddingTop: inset, paddingBottom: inset },
+      // A select's display box inherits the ROOT's line height as an absolute
+      // length, so at a smaller font (0.875rem) it outgrew the inset measured in
+      // its own `em` — 42.88px in a 40px row. Its line follows its own type now.
+      "& .MuiSelect-select": { lineHeight: "1.4375em" }
+    },
+    "& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
+      transform: `translate(14px, ${inset}) scale(1)`
+    }
+  };
+}
+var restingEdge = ({ theme }) => ({ borderColor: fieldEdge(theme) });
+function fieldHeightOverrides(height = DEFAULT_FIELD_HEIGHT) {
+  const inset = verticalInset(`${fieldHeightRem(height)}rem`);
+  return {
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: { "&:not(.MuiInputBase-inputMultiline)": { paddingTop: inset, paddingBottom: inset } },
+        // The one resting border; MUI's hover, focus and error rules outrank it.
+        notchedOutline: restingEdge
+      }
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        outlined: { "&:not(.MuiInputLabel-shrink)": { transform: `translate(14px, ${inset}) scale(1)` } }
+      }
+    }
+  };
+}
+function fieldOverrides(radius, height) {
+  const corner = fieldRadiusOverrides(radius);
+  const tall = fieldHeightOverrides(height);
+  const names = /* @__PURE__ */ new Set([...Object.keys(corner), ...Object.keys(tall)]);
+  return Object.fromEntries(
+    [...names].map((name) => [
+      name,
+      { styleOverrides: { ...corner[name]?.styleOverrides, ...tall[name]?.styleOverrides } }
+    ])
+  );
+}
+function fieldTextFieldStyles(theme, size = "md") {
+  return {
+    ...fieldRootStyles(theme),
+    ...fieldControlStyles(theme, size),
+    "& .MuiOutlinedInput-notchedOutline": { borderColor: fieldEdge(theme) }
+  };
+}
+
+export {
+  asFieldSize,
+  fieldHeight,
+  fieldBorder,
+  fieldControlStyles,
+  fieldHeightOverrides,
+  fieldOverrides,
+  fieldTextFieldStyles
+};
+//# sourceMappingURL=chunk-CGO452DC.js.map

package/dist/chunk-CGO452DC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/field-height.ts"],"sourcesContent":["import type { Components, CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { fieldEdge } from './field-edge';\nimport { fieldRadiusOverrides, fieldRootStyles } from './field-radius';\nimport {\n  DEFAULT_FIELD_HEIGHT,\n  FIELD_BORDER_WIDTH,\n  FIELD_HEIGHT_SCALE,\n  fieldHeightRem,\n  resolveFieldHeight,\n} from './field-height.core';\n\nimport type { SizeValue } from './vocabulary';\n\n/**\n * THE FIELD HEIGHT AND BORDER ON THE WEB: the theme channel, the readers, and\n * the styles that put a MUI text field or select on them.\n *\n * The argument for one height is in `./field-height.core.ts`. It is a top-level\n * theme key for the reason `fieldRadius` is (`./field-radius.ts`): MUI types\n * `shape` in `@mui/system`, which this package does not depend on.\n */\n\nexport {\n  DEFAULT_FIELD_HEIGHT,\n  FIELD_BORDER_WIDTH,\n  FIELD_HEIGHT_SCALE,\n  fieldHeightPx,\n  fieldHeightRem,\n} from './field-height.core';\n\ndeclare module '@mui/material/styles' {\n  interface Theme {\n    /** The standard field height, in multiples of the default font size. See `@12-apps/ui/tokens`' `fieldHeight`. */\n    fieldHeight?: number;\n  }\n  interface ThemeOptions {\n    /** The standard field height, in multiples of the default font size. Defaults to {@link DEFAULT_FIELD_HEIGHT}. */\n    fieldHeight?: number;\n  }\n}\n\n/** A component's own size string as a step of the field scale — `md` when it is not one. */\nexport function asFieldSize(size: string | undefined): SizeValue {\n  return size !== undefined && size in FIELD_HEIGHT_SCALE ? (size as SizeValue) : 'md';\n}\n\n/** A field's height for a size, as CSS — `2.5rem` for the default. */\nexport function fieldHeight(theme: Theme, size: SizeValue = 'md'): string {\n  return `${fieldHeightRem(resolveFieldHeight(theme.fieldHeight), size)}rem`;\n}\n\n/** The resting border every field draws: 1px in {@link fieldEdge}'s colour. */\nexport function fieldBorder(theme: Theme, surface?: string): string {\n  return `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme, surface)}`;\n}\n\n/**\n * The vertical padding that makes a one-line box `height` tall around MUI's\n * `1.4375em` line — in `em`, so it is measured against the field's own type.\n */\nconst verticalInset = (height: string): string => `calc((${height} - 1.4375em) / 2)`;\n\n/**\n * A MUI `TextField` / `Select` / `Autocomplete` (outlined, one line) at the\n * field height for `size`: the root's own vertical padding goes, the input\n * takes the inset, and the resting label sits on the new centre line.\n *\n * Multiline fields are left alone — their height is their content's — and so\n * are `filled` and `standard`, whose label sits inside the box and which draw\n * their own heights as variants.\n */\nexport function fieldControlStyles(theme: Theme, size: SizeValue = 'md'): CSSObject {\n  const inset = verticalInset(fieldHeight(theme, size));\n  return {\n    '& .MuiOutlinedInput-root:not(.MuiInputBase-multiline)': {\n      paddingTop: 0,\n      paddingBottom: 0,\n      '& .MuiOutlinedInput-input, & .MuiSelect-select': { paddingTop: inset, paddingBottom: inset },\n      // A select's display box inherits the ROOT's line height as an absolute\n      // length, so at a smaller font (0.875rem) it outgrew the inset measured in\n      // its own `em` — 42.88px in a 40px row. Its line follows its own type now.\n      '& .MuiSelect-select': { lineHeight: '1.4375em' },\n    },\n    '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {\n      transform: `translate(14px, ${inset}) scale(1)`,\n    },\n  };\n}\n\n/**\n * The notched outline's resting colour, as a MUI style-override callback. One\n * function, not one per call: two themes built from the same options must\n * compare equal, and a fresh closure each time would make them differ.\n */\nconst restingEdge = ({ theme }: { theme: Theme }): CSSObject => ({ borderColor: fieldEdge(theme) });\n\n/**\n * MUI component overrides that put MUI's OWN outlined fields on the standard\n * height and the one resting border — for a host's bare `TextField` / `Select`,\n * the way `fieldRadiusOverrides` rounds them. Every size MUI has maps to the standard:\n * a host that wants another density asks this package's fields for a `size`.\n */\nexport function fieldHeightOverrides(height: number = DEFAULT_FIELD_HEIGHT): Components<Theme> {\n  const inset = verticalInset(`${fieldHeightRem(height)}rem`);\n  return {\n    MuiOutlinedInput: {\n      styleOverrides: {\n        input: { '&:not(.MuiInputBase-inputMultiline)': { paddingTop: inset, paddingBottom: inset } },\n        // The one resting border; MUI's hover, focus and error rules outrank it.\n        notchedOutline: restingEdge,\n      },\n    },\n    MuiInputLabel: {\n      styleOverrides: {\n        outlined: { '&:not(.MuiInputLabel-shrink)': { transform: `translate(14px, ${inset}) scale(1)` } },\n      },\n    },\n  };\n}\n\n/**\n * Both field overrides — the corner and the height — merged per component.\n * They meet on `MuiOutlinedInput` (`root` from the radius, `input` from the\n * height), so a plain spread would lose one of them.\n */\nexport function fieldOverrides(radius: number | undefined, height: number | undefined): Components<Theme> {\n  type Entry = { styleOverrides?: Record<string, unknown> };\n  const corner = fieldRadiusOverrides(radius) as Record<string, Entry>;\n  const tall = fieldHeightOverrides(height) as Record<string, Entry>;\n  const names = new Set([...Object.keys(corner), ...Object.keys(tall)]);\n  return Object.fromEntries(\n    [...names].map((name) => [\n      name,\n      { styleOverrides: { ...corner[name]?.styleOverrides, ...tall[name]?.styleOverrides } },\n    ]),\n  ) as Components<Theme>;\n}\n\n/**\n * THE field standard on a MUI `TextField` / `Select` / `Autocomplete`, for a\n * composite that renders MUI's own: the field radius, the field height for\n * `size`, and the one resting border ({@link fieldEdge}). MUI's own hover,\n * focus and error borders outrank the resting one, so they still show.\n */\nexport function fieldTextFieldStyles(theme: Theme, size: SizeValue = 'md'): CSSObject {\n  return {\n    ...fieldRootStyles(theme),\n    ...fieldControlStyles(theme, size),\n    '& .MuiOutlinedInput-notchedOutline': { borderColor: fieldEdge(theme) },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA2CO,SAAS,YAAY,MAAqC;AAC/D,SAAO,SAAS,UAAa,QAAQ,qBAAsB,OAAqB;AAClF;AAGO,SAAS,YAAY,OAAc,OAAkB,MAAc;AACxE,SAAO,GAAG,eAAe,mBAAmB,MAAM,WAAW,GAAG,IAAI,CAAC;AACvE;AAGO,SAAS,YAAY,OAAc,SAA0B;AAClE,SAAO,GAAG,kBAAkB,YAAY,UAAU,OAAO,OAAO,CAAC;AACnE;AAMA,IAAM,gBAAgB,CAAC,WAA2B,SAAS,MAAM;AAW1D,SAAS,mBAAmB,OAAc,OAAkB,MAAiB;AAClF,QAAM,QAAQ,cAAc,YAAY,OAAO,IAAI,CAAC;AACpD,SAAO;AAAA,IACL,yDAAyD;AAAA,MACvD,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,kDAAkD,EAAE,YAAY,OAAO,eAAe,MAAM;AAAA;AAAA;AAAA;AAAA,MAI5F,uBAAuB,EAAE,YAAY,WAAW;AAAA,IAClD;AAAA,IACA,wDAAwD;AAAA,MACtD,WAAW,mBAAmB,KAAK;AAAA,IACrC;AAAA,EACF;AACF;AAOA,IAAM,cAAc,CAAC,EAAE,MAAM,OAAoC,EAAE,aAAa,UAAU,KAAK,EAAE;AAQ1F,SAAS,qBAAqB,SAAiB,sBAAyC;AAC7F,QAAM,QAAQ,cAAc,GAAG,eAAe,MAAM,CAAC,KAAK;AAC1D,SAAO;AAAA,IACL,kBAAkB;AAAA,MAChB,gBAAgB;AAAA,QACd,OAAO,EAAE,uCAAuC,EAAE,YAAY,OAAO,eAAe,MAAM,EAAE;AAAA;AAAA,QAE5F,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,IACA,eAAe;AAAA,MACb,gBAAgB;AAAA,QACd,UAAU,EAAE,gCAAgC,EAAE,WAAW,mBAAmB,KAAK,aAAa,EAAE;AAAA,MAClG;AAAA,IACF;AAAA,EACF;AACF;AAOO,SAAS,eAAe,QAA4B,QAA+C;AAExG,QAAM,SAAS,qBAAqB,MAAM;AAC1C,QAAM,OAAO,qBAAqB,MAAM;AACxC,QAAM,QAAQ,oBAAI,IAAI,CAAC,GAAG,OAAO,KAAK,MAAM,GAAG,GAAG,OAAO,KAAK,IAAI,CAAC,CAAC;AACpE,SAAO,OAAO;AAAA,IACZ,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,SAAS;AAAA,MACvB;AAAA,MACA,EAAE,gBAAgB,EAAE,GAAG,OAAO,IAAI,GAAG,gBAAgB,GAAG,KAAK,IAAI,GAAG,eAAe,EAAE;AAAA,IACvF,CAAC;AAAA,EACH;AACF;AAQO,SAAS,qBAAqB,OAAc,OAAkB,MAAiB;AACpF,SAAO;AAAA,IACL,GAAG,gBAAgB,KAAK;AAAA,IACxB,GAAG,mBAAmB,OAAO,IAAI;AAAA,IACjC,sCAAsC,EAAE,aAAa,UAAU,KAAK,EAAE;AAAA,EACxE;AACF;","names":[]}

package/dist/{chunk-6SNRPCSK.js → chunk-CR4KC2K5.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk-TYJR4GOF.js";
 import {
   px
-} from "./chunk-BRAF4MFO.js";
+} from "./chunk-PE4ZW3IA.js";
 
 // src/components/form/Checkbox/Checkbox.tsx
 import MuiCheckbox from "@mui/material/Checkbox/index.js";
@@ -177,4 +177,4 @@ Checkbox.displayName = "Checkbox";
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-6SNRPCSK.js.map
+//# sourceMappingURL=chunk-CR4KC2K5.js.map

package/dist/{chunk-4WT4PV4M.js → chunk-CZ5ZL63A.js}

@@ -4,7 +4,7 @@ import {
   radioCardSx,
   segmentButtonSx,
   segmentContainerSx
-} from "./chunk-DV42HAVP.js";
+} from "./chunk-CDNJOA3N.js";
 
 // src/components/form/RadioGroup/RadioGroup.variants.tsx
 import Box from "@mui/material/Box/index.js";
@@ -244,4 +244,4 @@ export {
   SegmentRadios,
   GroupLabel
 };
-//# sourceMappingURL=chunk-4WT4PV4M.js.map
+//# sourceMappingURL=chunk-CZ5ZL63A.js.map

package/dist/{chunk-BPYPUEM5.js → chunk-CZJLWCEG.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-SUALMVL7.js";
 import {
   CalendarMonth
-} from "./chunk-IPE5FFFD.js";
+} from "./chunk-PUBPZOQJ.js";
 
 // src/components/form/Calendar/Calendar.tsx
 import Box from "@mui/material/Box/index.js";
@@ -83,4 +83,4 @@ export {
   Calendar,
   Calendar_default
 };
-//# sourceMappingURL=chunk-BPYPUEM5.js.map
+//# sourceMappingURL=chunk-CZJLWCEG.js.map

package/dist/{chunk-YANLN6HP.js → chunk-D6HDJVQW.js}

@@ -1,3 +1,7 @@
+import {
+  hasSpacingSlot,
+  withDialogDefaults
+} from "./chunk-GYXUCS37.js";
 import {
   backdropSxOf,
   variantStylesOf
@@ -10,10 +14,6 @@ import {
   DIALOG_TITLE,
   DIALOG_TITLED_BODY_PADDING_TOP_UNITS
 } from "./chunk-VM3HRSAU.js";
-import {
-  hasSpacingSlot,
-  withDialogDefaults
-} from "./chunk-GYXUCS37.js";
 import {
   childTestId,
   resolveTestId,
@@ -259,4 +259,4 @@ export {
   DialogContent,
   DialogActions
 };
-//# sourceMappingURL=chunk-YANLN6HP.js.map
+//# sourceMappingURL=chunk-D6HDJVQW.js.map

package/dist/{chunk-6PSAPCTE.js → chunk-DAQ2ZDU2.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   CategorySelect
-} from "./chunk-WCLWFN3F.js";
+} from "./chunk-3NA7AO6H.js";
 
 // src/components/form/total-form/Fields/CategoryField.tsx
 import { jsx } from "react/jsx-runtime";
@@ -38,4 +38,4 @@ function CategoryField({
 export {
   CategoryField
 };
-//# sourceMappingURL=chunk-6PSAPCTE.js.map
+//# sourceMappingURL=chunk-DAQ2ZDU2.js.map

package/dist/{chunk-PEMZ2ABQ.js → chunk-DDTPMZOB.js}

@@ -1,18 +1,18 @@
 import {
   PillControl
-} from "./chunk-BRUJC7OG.js";
+} from "./chunk-3CN2GBIK.js";
 import {
   PanelRangeField
-} from "./chunk-BHXFPZAA.js";
+} from "./chunk-SLODUPES.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   TableFilter
-} from "./chunk-65IHPI4S.js";
+} from "./chunk-NMX3JAAB.js";
 import {
   StackedModal
-} from "./chunk-YRUCIKPO.js";
+} from "./chunk-2UYR2OOE.js";
 import {
   StackedModalContent
 } from "./chunk-JN3PGXRJ.js";
@@ -154,4 +154,4 @@ export {
   GridFilterPanel,
   FilterDialog
 };
-//# sourceMappingURL=chunk-PEMZ2ABQ.js.map
+//# sourceMappingURL=chunk-DDTPMZOB.js.map

package/dist/{chunk-XEUSTU7K.js → chunk-DIWC6AQL.js}

@@ -1,3 +1,6 @@
+import {
+  EditorToolbar
+} from "./chunk-4V7DBU4H.js";
 import {
   useCodeEditor
 } from "./chunk-ZSXV3ERD.js";
@@ -6,14 +9,11 @@ import {
   resolveCodeEditorProps
 } from "./chunk-CSSCGM27.js";
 import {
-  EditorToolbar
-} from "./chunk-4V7DBU4H.js";
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
 import {
   fieldEdge
 } from "./chunk-7FDU3FIN.js";
-import {
-  fieldRadius
-} from "./chunk-GDN2LUTZ.js";
 
 // src/components/form/CodeEditor/CodeEditor.tsx
 import Editor from "@monaco-editor/react";
@@ -170,4 +170,4 @@ var CodeEditor = (componentProps) => {
 export {
   CodeEditor
 };
-//# sourceMappingURL=chunk-XEUSTU7K.js.map
+//# sourceMappingURL=chunk-DIWC6AQL.js.map

package/dist/{chunk-LWAOL4BG.js → chunk-DO3UNZAU.js}

@@ -24,7 +24,7 @@ import {
 } from "./chunk-PTP3CZL4.js";
 import {
   px
-} from "./chunk-BRAF4MFO.js";
+} from "./chunk-PE4ZW3IA.js";
 
 // src/components/data-display/Alert/Alert.styles.tsx
 import Error from "@mui/icons-material/Error";
@@ -266,4 +266,4 @@ export {
   alertVariantStyles,
   alertEmphasisStyles
 };
-//# sourceMappingURL=chunk-LWAOL4BG.js.map
+//# sourceMappingURL=chunk-DO3UNZAU.js.map

package/dist/{chunk-D5YGDCMP.js → chunk-DZXN3QCX.js}

@@ -1,48 +1,48 @@
+import {
+  FilterDialog,
+  GridFilterPanel
+} from "./chunk-DDTPMZOB.js";
 import {
   DataViewsEmpty
-} from "./chunk-TLY2QMU5.js";
+} from "./chunk-SVFA75FO.js";
+import {
+  InlineFilterControls
+} from "./chunk-3Z23QTCP.js";
 import {
   GridHeaderRow
-} from "./chunk-EYRSUVBC.js";
+} from "./chunk-ECZXTIDR.js";
 import {
   GridMain
-} from "./chunk-SAIKHWH7.js";
-import {
-  FilterDialog,
-  GridFilterPanel
-} from "./chunk-PEMZ2ABQ.js";
+} from "./chunk-56S7A2XT.js";
 import {
   DataViewsPagination
-} from "./chunk-IPS55KWK.js";
+} from "./chunk-6M7CMILP.js";
 import {
   toOverflowFields,
   useFilterOverflow
 } from "./chunk-TQ6FPOPD.js";
-import {
-  InlineFilterControls
-} from "./chunk-67L5CMXP.js";
 import {
   ScopeTabsSlot
-} from "./chunk-6SK3MTYJ.js";
+} from "./chunk-Y5UCOBQN.js";
 import {
   ShellToolbar
-} from "./chunk-CPA2YRVZ.js";
+} from "./chunk-H3TNIGMI.js";
 import {
   resolveSelectionExtra
 } from "./chunk-KX75HM5U.js";
+import {
+  togglePillValues
+} from "./chunk-7FWXG2KF.js";
 import {
   DataViewsLayoutProvider,
   useDataViewsLayout
-} from "./chunk-M7E66OSC.js";
-import {
-  togglePillValues
-} from "./chunk-NJ6D37KV.js";
+} from "./chunk-ZPIMPOHV.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   TableFilter
-} from "./chunk-65IHPI4S.js";
+} from "./chunk-NMX3JAAB.js";
 import {
   default as default2
 } from "./chunk-WEBEOBN5.js";
@@ -238,4 +238,4 @@ function GridShell(props) {
 export {
   GridShell
 };
-//# sourceMappingURL=chunk-D5YGDCMP.js.map
+//# sourceMappingURL=chunk-DZXN3QCX.js.map

package/dist/{chunk-GUROYOKQ.js → chunk-EAE5Z5HL.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-FRAVVI4A.js";
 import {
   isoToMasked
-} from "./chunk-PS3EJLOC.js";
+} from "./chunk-VDZQJBAV.js";
 
 // src/components/form/DateRangePicker/DateRangePicker.range.ts
 function resolveDayRange(draft, maxRangeDays) {
@@ -62,4 +62,4 @@ export {
   resolveQuickRanges,
   activeQuickRangeId
 };
-//# sourceMappingURL=chunk-GUROYOKQ.js.map
+//# sourceMappingURL=chunk-EAE5Z5HL.js.map

package/dist/{chunk-EYRSUVBC.js → chunk-ECZXTIDR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Text
-} from "./chunk-QNUWSXF2.js";
+} from "./chunk-H57ZS6W2.js";
 
 // src/components/data-display/DataViews/data-views-header-row.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -36,4 +36,4 @@ function GridHeaderRow({
 export {
   GridHeaderRow
 };
-//# sourceMappingURL=chunk-EYRSUVBC.js.map
+//# sourceMappingURL=chunk-ECZXTIDR.js.map