@12-apps/ui 6.36.0 → 6.38.0

package/dist/{chunk-5SJWDABY.js → chunk-G3XLFQ2Z.js}

@@ -3,7 +3,7 @@ import {
   rippleAnimation,
   scaleAnimation,
   slideAnimation
-} from "./chunk-65CEXQ4L.js";
+} from "./chunk-Z6WSW6B4.js";
 import {
   asFieldSize,
   fieldHeight
@@ -22,13 +22,14 @@ import {
   controlNeutral
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  remPx,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/RadioGroup/RadioGroup.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
-var SEGMENT_TRACK_PADDING = 4;
-var SEGMENT_TRACK_BORDER = 1;
+var segmentTrackPadding = (theme) => rem(theme, 4);
 var neutralPalette = (theme) => controlNeutral(theme);
 var namedPalette = (theme, color) => {
   const colorMap = {
@@ -56,25 +57,25 @@ var getColorFromTheme = (theme, color) => {
 };
 var pickSize = (map, size) => map[size] ?? map.md;
 var CARD_SIZES = {
-  xs: { padding: "8px", minHeight: "60px" },
-  sm: { padding: "12px", minHeight: "70px" },
-  md: { padding: "16px", minHeight: "80px" },
-  lg: { padding: "20px", minHeight: "90px" },
-  xl: { padding: "24px", minHeight: "100px" }
+  xs: (theme) => ({ padding: rem(theme, 8), minHeight: rem(theme, 60) }),
+  sm: (theme) => ({ padding: rem(theme, 12), minHeight: rem(theme, 70) }),
+  md: (theme) => ({ padding: rem(theme, 16), minHeight: rem(theme, 80) }),
+  lg: (theme) => ({ padding: rem(theme, 20), minHeight: rem(theme, 90) }),
+  xl: (theme) => ({ padding: rem(theme, 24), minHeight: rem(theme, 100) })
 };
 var BUTTON_SIZES = {
-  xs: (theme) => ({ padding: "6px 12px", fontSize: rem(theme, 12), minHeight: "32px" }),
-  sm: (theme) => ({ padding: "8px 16px", fontSize: rem(theme, 14), minHeight: "36px" }),
-  md: (theme) => ({ padding: "10px 20px", fontSize: rem(theme, 16), minHeight: "40px" }),
-  lg: (theme) => ({ padding: "12px 24px", fontSize: rem(theme, 18), minHeight: "44px" }),
-  xl: (theme) => ({ padding: "14px 28px", fontSize: rem(theme, 20), minHeight: "48px" })
+  xs: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 12), minHeight: rem(theme, 32) }),
+  sm: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 14), minHeight: rem(theme, 36) }),
+  md: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 16), minHeight: rem(theme, 40) }),
+  lg: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 18), minHeight: rem(theme, 44) }),
+  xl: (theme) => ({ padding: rems(theme, 14, 28), fontSize: rem(theme, 20), minHeight: rem(theme, 48) })
 };
 var SEGMENT_SIZES = {
-  xs: (theme) => ({ padding: "4px 8px", fontSize: rem(theme, 12) }),
-  sm: (theme) => ({ padding: "6px 12px", fontSize: rem(theme, 14) }),
-  md: (theme) => ({ padding: "8px 16px", fontSize: rem(theme, 16) }),
-  lg: (theme) => ({ padding: "10px 20px", fontSize: rem(theme, 18) }),
-  xl: (theme) => ({ padding: "12px 24px", fontSize: rem(theme, 20) })
+  xs: (theme) => ({ padding: rems(theme, 4, 8), fontSize: rem(theme, 12) }),
+  sm: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 14) }),
+  md: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 16) }),
+  lg: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 18) }),
+  xl: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 20) })
 };
 var formLabelSx = (theme, glass, error) => ({
   marginBottom: theme.spacing(2),
@@ -82,9 +83,9 @@ var formLabelSx = (theme, glass, error) => ({
   color: error ? theme.palette.error.main : theme.palette.text.primary,
   ...glass && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(10px)",
-    padding: "8px 12px",
-    borderRadius: "8px",
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    padding: rems(theme, 8, 12),
+    borderRadius: rem(theme, 8),
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
     display: "inline-block"
   }
@@ -94,11 +95,11 @@ var cardBase = (theme, flags, palette) => {
   return {
     cursor: "pointer",
     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
+    border: `${rem(theme, 2)} solid ${selected ? palette.main : fieldEdge(theme)}`,
     backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,
     position: "relative",
     overflow: "hidden",
-    ...animated && { animation: `${slideAnimation} 0.4s ease-out` },
+    ...animated && { animation: `${slideAnimation(theme)} 0.4s ease-out` },
     // A radial wash that grows from the centre as the card is selected or hovered.
     "&::before": {
       content: '""',
@@ -115,12 +116,12 @@ var cardBase = (theme, flags, palette) => {
     "&:hover": {
       borderColor: palette.main,
       backgroundColor: alpha(palette.main, 0.02),
-      transform: "translateY(-2px) scale(1.02)",
-      boxShadow: `${theme.shadows[4]}, 0 10px 30px -5px ${alpha(palette.main, 0.2)}`,
+      transform: `translateY(${rem(theme, -2)}) scale(1.02)`,
+      boxShadow: `${theme.shadows[4]}, 0 ${rems(theme, 10, 30, -5)} ${alpha(palette.main, 0.2)}`,
       "&::before": { width: "120%", height: "120%" }
     },
     "&:active": { transform: "scale(0.98)" },
-    ...pickSize(CARD_SIZES, customSize)
+    ...pickSize(CARD_SIZES, customSize)(theme)
   };
 };
 var radioCardSx = (theme, flags) => {
@@ -130,7 +131,7 @@ var radioCardSx = (theme, flags) => {
     ...cardBase(theme, flags, palette),
     ...glass && {
       backgroundColor: selected ? alpha(palette.main, 0.1) : alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: "blur(20px)",
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
     },
     ...gradient && selected && {
@@ -138,8 +139,8 @@ var radioCardSx = (theme, flags) => {
       borderColor: palette.main
     },
     ...glow && selected && {
-      animation: `${glowAnimation} 2s ease-in-out infinite`,
-      boxShadow: `0 0 15px ${alpha(palette.main, 0.4)}`
+      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+      boxShadow: `0 0 ${rem(theme, 15)} ${alpha(palette.main, 0.4)}`
     }
   };
 };
@@ -176,8 +177,8 @@ var buttonBase = (theme, flags, palette) => {
     "&:hover": {
       borderColor: palette.main,
       backgroundColor: selected ? palette.dark : alpha(palette.main, 0.1),
-      transform: "translateY(-1px) scale(1.02)",
-      boxShadow: `0 4px 12px ${alpha(palette.main, 0.2)}`
+      transform: `translateY(${rem(theme, -1)}) scale(1.02)`,
+      boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(palette.main, 0.2)}`
     },
     "&:active": { transform: "scale(0.98)" },
     ...pickSize(BUTTON_SIZES, customSize)(theme),
@@ -194,7 +195,7 @@ var buttonRadioSx = (theme, flags) => {
     ...buttonBase(theme, flags, palette),
     ...glass && {
       backgroundColor: selected ? alpha(palette.main, 0.8) : alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: "blur(20px)",
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
     },
     ...gradient && selected && {
@@ -206,23 +207,23 @@ var buttonRadioSx = (theme, flags) => {
 var segmentContainerSx = (theme, glass, customColor = "primary") => {
   const palette = getColorFromTheme(theme, customColor);
   return {
-    padding: `${SEGMENT_TRACK_PADDING}px`,
+    padding: segmentTrackPadding(theme),
     // Concentric with the segments inside it, which take the field radius.
-    borderRadius: fieldRadius(theme) + SEGMENT_TRACK_PADDING + SEGMENT_TRACK_BORDER,
+    borderRadius: fieldRadius(theme) + remPx(theme, 4) + FIELD_BORDER_WIDTH,
     backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : alpha(palette.main, 0.05),
-    backdropFilter: glass ? "blur(20px)" : "none",
-    border: `${SEGMENT_TRACK_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}`,
+    backdropFilter: glass ? `blur(${rem(theme, 20)})` : "none",
+    border: `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}`,
     display: "flex",
-    gap: "2px"
+    gap: rem(theme, 2)
   };
 };
-var segmentUnderline = (color, selected) => ({
+var segmentUnderline = (theme, color, selected) => ({
   content: '""',
   position: "absolute",
   bottom: 0,
   left: selected ? 0 : "50%",
   width: selected ? "100%" : 0,
-  height: "2px",
+  height: rem(theme, 2),
   backgroundColor: color,
   transition: "all 0.3s ease",
   transform: selected ? "translateX(0)" : "translateX(-50%)"
@@ -237,11 +238,11 @@ var segmentButtonSx = (theme, flags) => {
     fontWeight: 500,
     backgroundColor: selected ? theme.palette.background.paper : "transparent",
     color: selected ? palette.main : theme.palette.text.secondary,
-    boxShadow: selected ? `${theme.shadows[2]}, inset 0 1px 3px ${alpha(palette.main, 0.1)}` : "none",
+    boxShadow: selected ? `${theme.shadows[2]}, inset 0 ${rems(theme, 1, 3)} ${alpha(palette.main, 0.1)}` : "none",
     position: "relative",
     overflow: "hidden",
     ...animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` },
-    "&::before": segmentUnderline(palette.main, Boolean(selected)),
+    "&::before": segmentUnderline(theme, palette.main, Boolean(selected)),
     "&:hover": {
       backgroundColor: selected ? theme.palette.background.paper : alpha(theme.palette.action.hover, 0.08),
       color: palette.main,
@@ -263,4 +264,4 @@ export {
   segmentContainerSx,
   segmentButtonSx
 };
-//# sourceMappingURL=chunk-5SJWDABY.js.map
+//# sourceMappingURL=chunk-G3XLFQ2Z.js.map

package/dist/chunk-G3XLFQ2Z.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';\nimport { absoluteInk, controlNeutral } from '../../../tokens/ink';\nimport { rem, remPx, rems } from '../../../tokens/relative';\n\n/**\n * The segment track's padding (4px at the design scale); its border is the\n * field hairline. Its corner is the segments' radius plus both.\n */\nconst segmentTrackPadding = (theme: Theme): string => rem(theme, 4);\n\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/** `neutral` is not a MUI palette entry, so it is the controls' neutral tone. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\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 || absoluteInk(theme).white,\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, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ padding: rem(theme, 8), minHeight: rem(theme, 60) }),\n  sm: (theme) => ({ padding: rem(theme, 12), minHeight: rem(theme, 70) }),\n  md: (theme) => ({ padding: rem(theme, 16), minHeight: rem(theme, 80) }),\n  lg: (theme) => ({ padding: rem(theme, 20), minHeight: rem(theme, 90) }),\n  xl: (theme) => ({ padding: rem(theme, 24), minHeight: rem(theme, 100) }),\n};\n\nconst BUTTON_SIZES: Record<SizeKey, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 12), minHeight: rem(theme, 32) }),\n  sm: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 14), minHeight: rem(theme, 36) }),\n  md: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 16), minHeight: rem(theme, 40) }),\n  lg: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 18), minHeight: rem(theme, 44) }),\n  xl: (theme) => ({ padding: rems(theme, 14, 28), fontSize: rem(theme, 20), minHeight: rem(theme, 48) }),\n};\n\nconst SEGMENT_SIZES: Record<SizeKey, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ padding: rems(theme, 4, 8), fontSize: rem(theme, 12) }),\n  sm: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 14) }),\n  md: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 16) }),\n  lg: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 18) }),\n  xl: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 20) }),\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(${rem(theme, 10)})`,\n    padding: rems(theme, 8, 12),\n    borderRadius: rem(theme, 8),\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: `${rem(theme, 2)} 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(theme)} 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(${rem(theme, -2)}) scale(1.02)`,\n      boxShadow: `${theme.shadows[4]}, 0 ${rems(theme, 10, 30, -5)} ${alpha(palette.main, 0.2)}`,\n      '&::before': { width: '120%', height: '120%' },\n    },\n    '&:active': { transform: 'scale(0.98)' },\n    ...pickSize(CARD_SIZES, customSize)(theme),\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(${rem(theme, 20)})`,\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(theme)} 2s ease-in-out infinite`,\n        boxShadow: `0 0 ${rem(theme, 15)} ${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 || absoluteInk(theme).white : 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 || absoluteInk(theme).white, 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(${rem(theme, -1)}) scale(1.02)`,\n      boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(palette.main, 0.2)}`,\n    },\n    '&:active': { transform: 'scale(0.98)' },\n    ...pickSize(BUTTON_SIZES, customSize)(theme),\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(${rem(theme, 20)})`,\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: segmentTrackPadding(theme),\n    // Concentric with the segments inside it, which take the field radius.\n    borderRadius: fieldRadius(theme) + remPx(theme, 4) + FIELD_BORDER_WIDTH,\n    backgroundColor: glass\n      ? alpha(theme.palette.background.paper, 0.1)\n      : alpha(palette.main, 0.05),\n    backdropFilter: glass ? `blur(${rem(theme, 20)})` : 'none',\n    border: `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}`,\n    display: 'flex',\n    gap: rem(theme, 2),\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 = (theme: Theme, 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: rem(theme, 2),\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 ${rems(theme, 1, 3)} ${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(theme, 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)(theme),\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-TVL5V2JK.js → chunk-GGMB6LJH.js}

@@ -1,3 +1,7 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/layout/Collapsible/Collapsible.helpers.ts
 var transitionSettings = (theme, variant, duration, easing) => {
   if (variant === "spring") {
@@ -38,8 +42,8 @@ var triggerStyles = (theme, { disabled, expanded }) => {
       backgroundColor: disabled ? "transparent" : expanded ? theme.palette.action.selected : theme.palette.action.hover
     },
     "&:focus": {
-      outline: `2px solid ${theme.palette.primary.main}`,
-      outlineOffset: 2
+      outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,
+      outlineOffset: rem(theme, 2)
     },
     "&:active": {
       backgroundColor: disabled ? "transparent" : theme.palette.action.focus
@@ -53,4 +57,4 @@ export {
   dimmedStyles,
   triggerStyles
 };
-//# sourceMappingURL=chunk-TVL5V2JK.js.map
+//# sourceMappingURL=chunk-GGMB6LJH.js.map

package/dist/chunk-GGMB6LJH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Collapsible/Collapsible.helpers.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { rem } from '../../../tokens/relative';\n\nimport type { CollapsibleVariant } from './Collapsible.types';\n\n/**\n * `smooth` and `default` share their timing; only `spring` differs, stretching\n * the duration and overshooting past the target before settling.\n */\nexport const transitionSettings = (\n  theme: Theme,\n  variant: CollapsibleVariant,\n  duration: number,\n  easing?: string,\n): { duration: number; easing: string } => {\n  if (variant === 'spring') {\n    return {\n      duration: duration * 1.2,\n      easing: easing || 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n    };\n  }\n\n  return { duration, easing: easing || theme.transitions.easing.easeInOut };\n};\n\ninterface RegionState {\n  open: boolean;\n  disabled: boolean;\n  dataTestId?: string;\n}\n\n/**\n * Shared by both implementations: a disabled collapsible reads as collapsed to\n * assistive technology whatever its `open` prop says, because it cannot be\n * operated to see the rest.\n */\nexport const regionAttrs = ({ open, disabled, dataTestId }: RegionState) => ({\n  'data-disabled': disabled,\n  'data-testid': dataTestId,\n  role: 'region',\n  'aria-expanded': open && !disabled,\n  'aria-hidden': disabled || !open,\n});\n\nexport const dimmedStyles = (disabled: boolean) => ({\n  opacity: disabled ? 0.6 : 1,\n  pointerEvents: (disabled ? 'none' : 'auto') as 'none' | 'auto',\n});\n\nexport const triggerStyles = (\n  theme: Theme,\n  { disabled, expanded }: { disabled: boolean; expanded: boolean },\n) => {\n  const restingBackground = expanded ? theme.palette.action.selected : 'transparent';\n\n  return {\n    width: '100%',\n    padding: theme.spacing(1, 2),\n    border: 'none',\n    backgroundColor: restingBackground,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    transition: theme.transitions.create(['background-color', 'opacity'], {\n      duration: theme.transitions.duration.short,\n    }),\n    opacity: disabled ? 0.6 : 1,\n    '&:hover': {\n      backgroundColor: disabled\n        ? 'transparent'\n        : expanded\n          ? theme.palette.action.selected\n          : theme.palette.action.hover,\n    },\n    '&:focus': {\n      outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,\n      outlineOffset: rem(theme, 2),\n    },\n    '&:active': {\n      backgroundColor: disabled ? 'transparent' : theme.palette.action.focus,\n    },\n  };\n};\n"],"mappings":";;;;;AAUO,IAAM,qBAAqB,CAChC,OACA,SACA,UACA,WACyC;AACzC,MAAI,YAAY,UAAU;AACxB,WAAO;AAAA,MACL,UAAU,WAAW;AAAA,MACrB,QAAQ,UAAU;AAAA,IACpB;AAAA,EACF;AAEA,SAAO,EAAE,UAAU,QAAQ,UAAU,MAAM,YAAY,OAAO,UAAU;AAC1E;AAaO,IAAM,cAAc,CAAC,EAAE,MAAM,UAAU,WAAW,OAAoB;AAAA,EAC3E,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,MAAM;AAAA,EACN,iBAAiB,QAAQ,CAAC;AAAA,EAC1B,eAAe,YAAY,CAAC;AAC9B;AAEO,IAAM,eAAe,CAAC,cAAuB;AAAA,EAClD,SAAS,WAAW,MAAM;AAAA,EAC1B,eAAgB,WAAW,SAAS;AACtC;AAEO,IAAM,gBAAgB,CAC3B,OACA,EAAE,UAAU,SAAS,MAClB;AACH,QAAM,oBAAoB,WAAW,MAAM,QAAQ,OAAO,WAAW;AAErE,SAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS,MAAM,QAAQ,GAAG,CAAC;AAAA,IAC3B,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,QAAQ,WAAW,gBAAgB;AAAA,IACnC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAY,MAAM,YAAY,OAAO,CAAC,oBAAoB,SAAS,GAAG;AAAA,MACpE,UAAU,MAAM,YAAY,SAAS;AAAA,IACvC,CAAC;AAAA,IACD,SAAS,WAAW,MAAM;AAAA,IAC1B,WAAW;AAAA,MACT,iBAAiB,WACb,gBACA,WACE,MAAM,QAAQ,OAAO,WACrB,MAAM,QAAQ,OAAO;AAAA,IAC7B;AAAA,IACA,WAAW;AAAA,MACT,SAAS,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,MAAM,QAAQ,QAAQ,IAAI;AAAA,MAC7D,eAAe,IAAI,OAAO,CAAC;AAAA,IAC7B;AAAA,IACA,YAAY;AAAA,MACV,iBAAiB,WAAW,gBAAgB,MAAM,QAAQ,OAAO;AAAA,IACnE;AAAA,EACF;AACF;","names":[]}

package/dist/{chunk-4CTLEUK3.js → chunk-GLFTIGOF.js}

@@ -1,7 +1,7 @@
 import {
   MoreGroup,
   fieldClearing
-} from "./chunk-7EIOXZWL.js";
+} from "./chunk-74P3YX7R.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -10,10 +10,10 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-KH25WUSX.js";
+} from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   rem,
   sxRem
@@ -184,4 +184,4 @@ function MoreFilters({
 export {
   MoreFilters
 };
-//# sourceMappingURL=chunk-4CTLEUK3.js.map
+//# sourceMappingURL=chunk-GLFTIGOF.js.map

package/dist/{chunk-7UZ2TFIK.js → chunk-GNCSDUGY.js}

@@ -1,8 +1,12 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/navigation/Tabs/TabsPanel.tsx
 import Box from "@mui/material/Box/index.js";
 import CircularProgress from "@mui/material/CircularProgress/index.js";
 import Fade from "@mui/material/Fade/index.js";
-import { styled } from "@mui/material/styles/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
 import { jsx } from "react/jsx-runtime";
 var TabPanel = styled(Box, {
   shouldForwardProp: (prop) => !["animate", "persist"].includes(prop)
@@ -21,12 +25,16 @@ var LoadingContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  minHeight: 200,
+  minHeight: rem(theme, 200),
   color: theme.palette.text.secondary
 }));
+var PanelSpinner = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 32) });
+};
 var panelContent = (loading, loadingComponent, children) => {
   if (!loading) return children;
-  return loadingComponent || /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(CircularProgress, { size: 32 }) });
+  return loadingComponent || /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(PanelSpinner, {}) });
 };
 var panelTestId = (dataTestId, index) => dataTestId ? `${dataTestId}-panel-${index}` : `tabs-panel-${index}`;
 var CustomTabPanel = ({
@@ -72,4 +80,4 @@ var CustomTabPanel = ({
 export {
   CustomTabPanel
 };
-//# sourceMappingURL=chunk-7UZ2TFIK.js.map
+//# sourceMappingURL=chunk-GNCSDUGY.js.map

package/dist/chunk-GNCSDUGY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Tabs/TabsPanel.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { TabPanelProps } from './Tabs.types';\nimport { rem } from '../../../tokens/relative';\n\nconst TabPanel = styled(Box, {\n  shouldForwardProp: (prop) => !['animate', 'persist'].includes(prop as string),\n})<{ animate?: boolean; persist?: boolean }>(({ animate, persist }) => ({\n  width: '100%',\n\n  ...(animate && {\n    transition: 'all 0.3s ease-in-out',\n  }),\n\n  ...(persist && {\n    '&[hidden]': {\n      display: 'none !important',\n    },\n  }),\n}));\n\nconst LoadingContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: rem(theme, 200),\n  color: theme.palette.text.secondary,\n}));\n\n/** The fallback spinner — a component so it can read the theme its size scales with. */\nconst PanelSpinner: React.FC = () => {\n  const theme = useTheme();\n  return <CircularProgress size={rem(theme, 32)} />;\n};\n\n// A loading panel shows the caller's placeholder, or a spinner if there isn't one.\nconst panelContent = (\n  loading: boolean,\n  loadingComponent: React.ReactNode,\n  children: React.ReactNode,\n): React.ReactNode => {\n  if (!loading) return children;\n\n  return (\n    loadingComponent || (\n      <LoadingContainer>\n        <PanelSpinner />\n      </LoadingContainer>\n    )\n  );\n};\n\nconst panelTestId = (dataTestId: string | undefined, index: number): string =>\n  dataTestId ? `${dataTestId}-panel-${index}` : `tabs-panel-${index}`;\n\nexport const CustomTabPanel: React.FC<TabPanelProps & { dataTestId?: string; index: number }> = ({\n  children,\n  id,\n  value,\n  animate = false,\n  animationDuration = 300,\n  persist = false,\n  loading = false,\n  loadingComponent,\n  className,\n  dataTestId,\n  index,\n  ...props\n}) => {\n  const isActive = value === id;\n  const shouldRender = isActive || persist;\n\n  if (!shouldRender) {\n    return null;\n  }\n\n  const content = panelContent(loading, loadingComponent, children);\n  const testId = panelTestId(dataTestId, index);\n\n  const panel = (\n    <TabPanel\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`tabpanel-${id}`}\n      aria-labelledby={`tab-${id}`}\n      animate={animate}\n      persist={persist}\n      className={className}\n      data-testid={testId}\n      {...props}\n    >\n      {content}\n    </TabPanel>\n  );\n\n  // The animated and plain panels are the same element; only the Fade wrapper\n  // differs.\n  if (!animate) return panel;\n\n  return (\n    <Fade in={isActive} timeout={animationDuration}>\n      {panel}\n    </Fade>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,UAAU;AACjB,SAAS,QAAQ,gBAAgB;AAiCxB;AA3BT,IAAM,WAAW,OAAO,KAAK;AAAA,EAC3B,mBAAmB,CAAC,SAAS,CAAC,CAAC,WAAW,SAAS,EAAE,SAAS,IAAc;AAC9E,CAAC,EAA4C,CAAC,EAAE,SAAS,QAAQ,OAAO;AAAA,EACtE,OAAO;AAAA,EAEP,GAAI,WAAW;AAAA,IACb,YAAY;AAAA,EACd;AAAA,EAEA,GAAI,WAAW;AAAA,IACb,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,EACF;AACF,EAAE;AAEF,IAAM,mBAAmB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACnD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW,IAAI,OAAO,GAAG;AAAA,EACzB,OAAO,MAAM,QAAQ,KAAK;AAC5B,EAAE;AAGF,IAAM,eAAyB,MAAM;AACnC,QAAM,QAAQ,SAAS;AACvB,SAAO,oBAAC,oBAAiB,MAAM,IAAI,OAAO,EAAE,GAAG;AACjD;AAGA,IAAM,eAAe,CACnB,SACA,kBACA,aACoB;AACpB,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,oBACE,oBAAC,oBACC,8BAAC,gBAAa,GAChB;AAGN;AAEA,IAAM,cAAc,CAAC,YAAgC,UACnD,aAAa,GAAG,UAAU,UAAU,KAAK,KAAK,cAAc,KAAK;AAE5D,IAAM,iBAAmF,CAAC;AAAA,EAC/F;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAW,UAAU;AAC3B,QAAM,eAAe,YAAY;AAEjC,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,aAAa,SAAS,kBAAkB,QAAQ;AAChE,QAAM,SAAS,YAAY,YAAY,KAAK;AAE5C,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ,CAAC;AAAA,MACT,IAAI,YAAY,EAAE;AAAA,MAClB,mBAAiB,OAAO,EAAE;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAKF,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,oBAAC,QAAK,IAAI,UAAU,SAAS,mBAC1B,iBACH;AAEJ;","names":[]}

package/dist/{chunk-6SS5C74Q.js → chunk-GS3RP2QE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   Button
-} from "./chunk-KH25WUSX.js";
+} from "./chunk-2EAAWOZ2.js";
 import {
   fieldHeight
 } from "./chunk-CGO452DC.js";
@@ -34,4 +34,4 @@ function SubmitButton({
 export {
   SubmitButton
 };
-//# sourceMappingURL=chunk-6SS5C74Q.js.map
+//# sourceMappingURL=chunk-GS3RP2QE.js.map

package/dist/{chunk-L4UP5VYS.js → chunk-GVH7C2PT.js}

@@ -1,7 +1,7 @@
 import {
   backdropSxOf,
   variantStylesOf
-} from "./chunk-IYTBTK2M.js";
+} from "./chunk-2WU52FLP.js";
 import {
   DIALOG_ACTIONS,
   DIALOG_BODY_PADDING_UNITS,
@@ -270,4 +270,4 @@ export {
   DialogContent,
   DialogActions
 };
-//# sourceMappingURL=chunk-L4UP5VYS.js.map
+//# sourceMappingURL=chunk-GVH7C2PT.js.map

package/dist/{chunk-MBSYD3ZU.js → chunk-GWFAINQ7.js}

@@ -15,8 +15,8 @@ var MARK_PX = { xs: 24, sm: 32, md: 40, lg: 48, xl: 56 };
 var INITIALS_RATIO = 0.4;
 function markSx(theme, { edge, round, showLogo, seed }) {
   return {
-    width: edge,
-    height: edge,
+    width: rem(theme, edge),
+    height: rem(theme, edge),
     flex: "0 0 auto",
     overflow: "hidden",
     borderRadius: round ? "50%" : "30%",
@@ -79,4 +79,4 @@ export {
   AppHeaderBrand,
   AppHeader_brand_default
 };
-//# sourceMappingURL=chunk-MBSYD3ZU.js.map
+//# sourceMappingURL=chunk-GWFAINQ7.js.map

package/dist/chunk-GWFAINQ7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.brand.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\nimport type { SizeValue } from '../../../tokens/scales';\n\nimport { brandGradient, initialsOf } from './AppHeader.colors';\nimport type { AppHeaderBrandProps } from './AppHeader.types';\n\n/** The mark's edge, per house size step. */\nconst MARK_PX: Record<SizeValue, number> = { xs: 24, sm: 32, md: 40, lg: 48, xl: 56 };\n\n/** Initials are set at 40% of the mark so a two-letter pair never touches the edge. */\nconst INITIALS_RATIO = 0.4;\n\n/** The mark's box, lifted out of the component to keep it inside the complexity bar. */\nfunction markSx(\n  theme: Theme,\n  { edge, round, showLogo, seed }: { edge: number; round: boolean; showLogo: boolean; seed: string },\n): Record<string, unknown> {\n  return {\n    width: rem(theme, edge),\n    height: rem(theme, edge),\n    flex: '0 0 auto',\n    overflow: 'hidden',\n    borderRadius: round ? '50%' : '30%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    // Only the initials need the gradient; a logo covers it entirely, and\n    // painting it underneath would show at the corners of a transparent PNG.\n    backgroundImage: showLogo ? 'none' : brandGradient(seed),\n    backgroundColor: showLogo ? theme.palette.action.hover : 'transparent',\n    color: theme.palette.getContrastText(seed),\n    fontSize: rem(theme, Math.round(edge * INITIALS_RATIO)),\n    fontWeight: 700,\n    lineHeight: 1,\n    letterSpacing: '0.02em',\n    userSelect: 'none',\n  };\n}\n\n/**\n * The mark that opens the header: the logo when there is one, the name's\n * initials on a gradient derived from the brand colour when there is not.\n *\n * Both branches occupy the SAME box, so a header does not resize when a logo\n * arrives — or when one fails to load and the initials take over, which is the\n * case a plain `<img>` renders as a torn-page glyph beside the store's name.\n */\nexport const AppHeaderBrand: React.FC<AppHeaderBrandProps> = ({\n  name,\n  logoUrl,\n  seedColor,\n  size = 'md',\n  shape = 'rounded',\n  className,\n  dataTestId = 'app-header-brand',\n}) => {\n  const theme = useTheme();\n  const [broken, setBroken] = React.useState(false);\n  // Keyed on the URL so a store that swaps its logo gets a fresh attempt rather\n  // than inheriting the previous one's failure.\n  React.useEffect(() => setBroken(false), [logoUrl]);\n\n  const edge = MARK_PX[size];\n  const seed = seedColor || theme.palette.primary.main;\n  const showLogo = Boolean(logoUrl) && !broken;\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      // `role=\"img\"` + the name: the initials are a picture of the brand, not\n      // two letters a screen reader should spell out.\n      role=\"img\"\n      aria-label={name}\n      sx={markSx(theme, { edge, round: shape === 'circle', showLogo, seed })}\n    >\n      {showLogo ? (\n        <Box\n          component=\"img\"\n          src={logoUrl ?? undefined}\n          alt=\"\"\n          onError={() => setBroken(true)}\n          data-testid={`${dataTestId}-logo`}\n          sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}\n        />\n      ) : (\n        <Box component=\"span\" aria-hidden data-testid={`${dataTestId}-initials`}>\n          {initialsOf(name)}\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nAppHeaderBrand.displayName = 'AppHeaderBrand';\n\nexport default AppHeaderBrand;\n"],"mappings":";;;;;;;;;AAEA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AAEzB,OAAO,WAAW;AA+EV;AAtER,IAAM,UAAqC,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAGpF,IAAM,iBAAiB;AAGvB,SAAS,OACP,OACA,EAAE,MAAM,OAAO,UAAU,KAAK,GACL;AACzB,SAAO;AAAA,IACL,OAAO,IAAI,OAAO,IAAI;AAAA,IACtB,QAAQ,IAAI,OAAO,IAAI;AAAA,IACvB,MAAM;AAAA,IACN,UAAU;AAAA,IACV,cAAc,QAAQ,QAAQ;AAAA,IAC9B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA;AAAA;AAAA,IAGhB,iBAAiB,WAAW,SAAS,cAAc,IAAI;AAAA,IACvD,iBAAiB,WAAW,MAAM,QAAQ,OAAO,QAAQ;AAAA,IACzD,OAAO,MAAM,QAAQ,gBAAgB,IAAI;AAAA,IACzC,UAAU,IAAI,OAAO,KAAK,MAAM,OAAO,cAAc,CAAC;AAAA,IACtD,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AACF;AAUO,IAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AACf,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAGhD,QAAM,UAAU,MAAM,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,QAAM,OAAO,QAAQ,IAAI;AACzB,QAAM,OAAO,aAAa,MAAM,QAAQ,QAAQ;AAChD,QAAM,WAAW,QAAQ,OAAO,KAAK,CAAC;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,IAAI,OAAO,OAAO,EAAE,MAAM,OAAO,UAAU,UAAU,UAAU,KAAK,CAAC;AAAA,MAEpE,qBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK,WAAW;AAAA,UAChB,KAAI;AAAA,UACJ,SAAS,MAAM,UAAU,IAAI;AAAA,UAC7B,eAAa,GAAG,UAAU;AAAA,UAC1B,IAAI,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,SAAS,SAAS,QAAQ;AAAA;AAAA,MAC5E,IAEA,oBAAC,OAAI,WAAU,QAAO,eAAW,MAAC,eAAa,GAAG,UAAU,aACzD,qBAAW,IAAI,GAClB;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAE7B,IAAO,0BAAQ;","names":[]}

package/dist/{chunk-B2VXP2B2.js → chunk-GZT7MLLO.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   Checkbox
-} from "./chunk-XLYFOBBT.js";
+} from "./chunk-4PRZLII7.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -134,4 +134,4 @@ export {
   SelectSlot,
   DiscloseSlot
 };
-//# sourceMappingURL=chunk-B2VXP2B2.js.map
+//# sourceMappingURL=chunk-GZT7MLLO.js.map

package/dist/{chunk-AK2HOD6B.js → chunk-H5BEWPEY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-PL2AB5HJ.js";
 import {
   useDataViewsLayout
-} from "./chunk-4LQZH4PU.js";
+} from "./chunk-PMOEG36E.js";
 
 // src/components/data-display/DataViews/data-views-scope-tabs.tsx
 import { jsx } from "react/jsx-runtime";
@@ -34,4 +34,4 @@ function ScopeTabsSlot({
 export {
   ScopeTabsSlot
 };
-//# sourceMappingURL=chunk-AK2HOD6B.js.map
+//# sourceMappingURL=chunk-H5BEWPEY.js.map

package/dist/{chunk-QIKPGMMO.js → chunk-H67EL3CG.js}

@@ -1,21 +1,21 @@
 import {
   PillControl
-} from "./chunk-SN2YMCTL.js";
+} from "./chunk-4GWHYLEB.js";
 import {
   PanelRangeField
-} from "./chunk-AJ5SDHX5.js";
+} from "./chunk-JCL7WK4G.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   TableFilter
-} from "./chunk-HXEBKOSM.js";
+} from "./chunk-J5UZB6Y6.js";
 import {
   StackedModal
-} from "./chunk-IL7JZKXY.js";
+} from "./chunk-442FSG7G.js";
 import {
   StackedModalContent
-} from "./chunk-RWTFZ7J5.js";
+} from "./chunk-L4G5BZFF.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -157,4 +157,4 @@ export {
   GridFilterPanel,
   FilterDialog
 };
-//# sourceMappingURL=chunk-QIKPGMMO.js.map
+//# sourceMappingURL=chunk-H67EL3CG.js.map

package/dist/{chunk-3D6HXKZM.js → chunk-HDJQDMHB.js}

@@ -1,23 +1,27 @@
 import {
-  rem
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
+import {
+  rem,
+  rems
 } 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,
+    minHeight: rem(theme, 32),
     "& .MuiTab-root": {
       fontSize: rem(theme, 14),
-      minHeight: 32,
+      minHeight: rem(theme, 32),
       padding: theme.spacing(0.5, 1.5)
     }
   },
   ...size === "lg" && {
-    minHeight: 56,
+    minHeight: rem(theme, 56),
     "& .MuiTab-root": {
       fontSize: rem(theme, 18),
-      minHeight: 56,
+      minHeight: rem(theme, 56),
       padding: theme.spacing(1.5, 3)
     }
   }
@@ -25,8 +29,8 @@ var sizeStyles = (theme, size) => ({
 var compactVariantStyles = (theme, customVariant) => ({
   ...customVariant === "default" && {
     "& .MuiTabs-indicator": {
-      height: 3,
-      borderRadius: "3px 3px 0 0",
+      height: rem(theme, 3),
+      borderRadius: rems(theme, 3, 3, 0, 0),
       background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`
     }
   },
@@ -42,12 +46,12 @@ var compactVariantStyles = (theme, customVariant) => ({
       transition: "all 0.3s ease",
       "&:hover": {
         backgroundColor: alpha(theme.palette.primary.main, 0.08),
-        transform: "translateY(-1px)"
+        transform: `translateY(${rem(theme, -1)})`
       },
       "&.Mui-selected": {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
-        boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+        boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.primary.main, 0.3)}`,
         "&:hover": {
           backgroundColor: theme.palette.primary.dark
         }
@@ -62,9 +66,9 @@ var boxedVariantStyles = (theme, customVariant) => ({
       gap: theme.spacing(2)
     },
     "& .MuiTabs-indicator": {
-      height: 2,
+      height: rem(theme, 2),
       backgroundColor: theme.palette.primary.main,
-      borderRadius: 1
+      borderRadius: rem(theme, 1)
     },
     "& .MuiTab-root": {
       textTransform: "none",
@@ -93,7 +97,8 @@ var boxedVariantStyles = (theme, customVariant) => ({
       borderBottom: "none",
       borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
       margin: theme.spacing(0, 0.5),
-      marginBottom: -1,
+      // Overlap the list's own hairline so the selected tab reads as open.
+      marginBottom: `-${FIELD_BORDER_WIDTH}px`,
       backgroundColor: alpha(theme.palette.action.hover, 0.5),
       "&:hover": {
         backgroundColor: alpha(theme.palette.action.hover, 0.8)
@@ -141,4 +146,4 @@ var tabsRootStyles = ({
 export {
   tabsRootStyles
 };
-//# sourceMappingURL=chunk-3D6HXKZM.js.map
+//# sourceMappingURL=chunk-HDJQDMHB.js.map

package/dist/chunk-HDJQDMHB.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 { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst sizeStyles = (theme: Theme, size?: string): CSSObject => ({\n    ...(size === 'sm' && {\n      minHeight: rem(theme, 32),\n      '& .MuiTab-root': {\n        fontSize: rem(theme, 14),\n        minHeight: rem(theme, 32),\n        padding: theme.spacing(0.5, 1.5),\n      },\n    }),\n\n    ...(size === 'lg' && {\n      minHeight: rem(theme, 56),\n      '& .MuiTab-root': {\n        fontSize: rem(theme, 18),\n        minHeight: rem(theme, 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: rem(theme, 3),\n        borderRadius: rems(theme, 3, 3, 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(${rem(theme, -1)})`,\n        },\n        '&.Mui-selected': {\n          backgroundColor: theme.palette.primary.main,\n          color: theme.palette.primary.contrastText,\n          boxShadow: `0 ${rems(theme, 4, 12)} ${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: rem(theme, 2),\n        backgroundColor: theme.palette.primary.main,\n        borderRadius: rem(theme, 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        // Overlap the list's own hairline so the selected tab reads as open.\n        marginBottom: `-${FIELD_BORDER_WIDTH}px`,\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":[]}