@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-PYIASGI7.js

@@ -0,0 +1,237 @@
+import {
+  glowAnimation,
+  gradientShiftAnimation,
+  pulseAnimation
+} from "./chunk-D2HKCPEH.js";
+import {
+  absoluteInk,
+  controlNeutral,
+  onMedia,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Slider/Slider.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var neutralPalette = (theme) => controlNeutral(theme);
+var namedPalette = (theme, color) => {
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const palette = namedPalette(theme, color);
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || absoluteInk(theme).white
+  };
+};
+var SIZES = {
+  xs: { height: 4, thumbSize: 16, markHeight: 8 },
+  sm: { height: 6, thumbSize: 18, markHeight: 10 },
+  md: { height: 8, thumbSize: 20, markHeight: 12 },
+  lg: { height: 10, thumbSize: 24, markHeight: 14 },
+  xl: { height: 12, thumbSize: 28, markHeight: 16 }
+};
+var LABEL_SCALE = {
+  xs: { fontPx: 10, box: 28, markFont: 10.4 },
+  sm: { fontPx: 11, box: 30, markFont: 11.2 }
+};
+var LABEL_DEFAULT = { fontPx: 12, box: 32, markFont: 12 };
+var trackPart = ({ theme, flags, palette, geometry }) => {
+  const { gradient, glow, glass, customVariant } = flags;
+  const isGradientVariant = customVariant === "gradient";
+  return {
+    border: "none",
+    height: geometry.height,
+    borderRadius: geometry.height / 2,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative",
+    overflow: "hidden",
+    ...gradient && {
+      background: isGradientVariant ? `linear-gradient(90deg,
+              ${palette.light} 0%,
+              ${palette.main} 50%,
+              ${palette.dark} 100%)` : `linear-gradient(90deg, ${palette.light}, ${palette.main})`,
+      backgroundSize: "200% 100%",
+      animation: isGradientVariant ? `${gradientShiftAnimation} 3s ease infinite` : "none",
+      // A sheen that travels the filled portion while the gradient shifts.
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: `linear-gradient(90deg, transparent, ${sheen(theme, 0.2)}, transparent)`,
+        animation: `${gradientShiftAnimation} 2s linear infinite`
+      }
+    },
+    ...glow && {
+      animation: `${glowAnimation} 2s ease-in-out infinite`,
+      boxShadow: `0 0 10px ${alpha(palette.main, 0.6)}, inset 0 0 10px ${alpha(palette.main, 0.2)}`
+    },
+    ...glass && {
+      backgroundColor: alpha(palette.main, 0.8),
+      backdropFilter: "blur(10px)",
+      border: `1px solid ${alpha(palette.light || palette.main, 0.3)}`
+    }
+  };
+};
+var railPart = ({ theme, flags, geometry }) => ({
+  color: alpha(theme.palette.action.disabled, 0.3),
+  opacity: 1,
+  height: geometry.height,
+  borderRadius: geometry.height / 2,
+  transition: "all 0.3s ease",
+  ...flags.glass && {
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(20px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+  },
+  ...flags.customVariant === "gradient" && {
+    background: `linear-gradient(90deg,
+          ${alpha(theme.palette.action.disabled, 0.2)},
+          ${alpha(theme.palette.action.disabled, 0.3)},
+          ${alpha(theme.palette.action.disabled, 0.2)})`
+  }
+});
+var thumbPart = ({ theme, flags, palette, geometry }) => {
+  const { gradient, glow, glass } = flags;
+  return {
+    height: geometry.thumbSize,
+    width: geometry.thumbSize,
+    backgroundColor: gradient ? palette.main : absoluteInk(theme).white,
+    border: `2px solid ${palette.main}`,
+    boxShadow: `${theme.shadows[2]}, 0 0 0 0 ${alpha(palette.main, 0.2)}`,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative",
+    // Sits invisible until focus or hover runs the pulse keyframes over it.
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      backgroundColor: palette.main,
+      opacity: 0
+    },
+    "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
+      boxShadow: glow ? `${theme.shadows[4]}, 0 0 20px ${alpha(palette.main, 0.6)}, 0 0 0 8px ${alpha(palette.main, 0.15)}` : `${theme.shadows[4]}, 0 0 0 8px ${alpha(palette.main, 0.15)}`,
+      transform: "scale(1.15)",
+      "&::before": { animation: `${pulseAnimation} 0.6s ease-out` }
+    },
+    "&:active": { transform: "scale(1.05)" },
+    ...glass && {
+      backgroundColor: alpha(theme.palette.background.paper, 0.9),
+      backdropFilter: "blur(10px)",
+      border: `2px solid ${alpha(palette.main, 0.8)}`
+    },
+    ...gradient && {
+      background: `linear-gradient(135deg, ${palette.light}, ${palette.main})`,
+      border: "none",
+      color: onMedia(theme)
+    }
+  };
+};
+var bubbleBackground = (palette, gradient, glass) => {
+  if (gradient) return "transparent";
+  return glass ? alpha(palette.main, 0.9) : palette.main;
+};
+var bubbleTransformFor = (gradient) => {
+  const base = gradient ? "translate(50%, -150%)" : "translate(50%, -100%) rotate(-45deg)";
+  return { hidden: `${base} scale(0)`, shown: `${base} scale(1)` };
+};
+var valueLabelPart = ({ theme, flags, palette }) => {
+  const { gradient, glass, customSize } = flags;
+  const scale = LABEL_SCALE[customSize ?? ""] ?? LABEL_DEFAULT;
+  const bubbleTransform = bubbleTransformFor(Boolean(gradient));
+  return {
+    lineHeight: 1.2,
+    fontSize: rem(theme, scale.fontPx),
+    padding: 0,
+    width: scale.box,
+    height: scale.box,
+    borderRadius: gradient ? "8px" : "50% 50% 50% 0",
+    backgroundColor: bubbleBackground(palette, Boolean(gradient), Boolean(glass)),
+    background: gradient ? `linear-gradient(135deg, ${palette.light}, ${palette.main})` : "unset",
+    backdropFilter: glass ? "blur(10px)" : "none",
+    transformOrigin: "bottom left",
+    transform: bubbleTransform.hidden,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    boxShadow: `${theme.shadows[2]}, 0 0 10px ${alpha(palette.main, 0.2)}`,
+    "&:before": { display: "none" },
+    "&.MuiSlider-valueLabelOpen": { transform: bubbleTransform.shown },
+    "& > *": { transform: gradient ? "none" : "rotate(45deg)", fontWeight: 600 }
+  };
+};
+var markPart = ({ theme, flags, palette, geometry }) => {
+  const { gradient, glow, customVariant } = flags;
+  const isMarksVariant = customVariant === "marks";
+  const { markHeight, height } = geometry;
+  return {
+    backgroundColor: alpha(theme.palette.action.disabled, 0.5),
+    height: markHeight,
+    width: isMarksVariant ? 3 : 2,
+    // Centred on the rail rather than hanging below it.
+    marginTop: -(markHeight - height) / 2,
+    borderRadius: 1,
+    transition: "all 0.3s ease",
+    "&.MuiSlider-markActive": {
+      backgroundColor: gradient ? palette.light : palette.main,
+      width: isMarksVariant ? 4 : 2,
+      height: markHeight + 2,
+      marginTop: -(markHeight + 2 - height) / 2,
+      ...glow && { boxShadow: `0 0 8px ${alpha(palette.main, 0.5)}` }
+    }
+  };
+};
+var markLabelPart = ({ theme, flags, palette }) => ({
+  fontSize: rem(theme, (LABEL_SCALE[flags.customSize ?? ""] ?? LABEL_DEFAULT).markFont),
+  color: theme.palette.text.secondary,
+  marginTop: theme.spacing(1.5),
+  fontWeight: 500,
+  transition: "all 0.3s ease",
+  "&.MuiSlider-markLabelActive": {
+    color: palette.main,
+    fontWeight: 600,
+    transform: "scale(1.05)"
+  }
+});
+var sliderSx = (theme, flags) => {
+  const palette = getColorFromTheme(theme, flags.customColor ?? "primary");
+  const geometry = SIZES[flags.customSize] ?? SIZES.md;
+  const input = { theme, flags, palette, geometry };
+  return {
+    color: palette.main,
+    height: geometry.height,
+    "& .MuiSlider-track": trackPart(input),
+    "& .MuiSlider-rail": railPart(input),
+    "& .MuiSlider-thumb": thumbPart(input),
+    "& .MuiSlider-valueLabel": valueLabelPart(input),
+    "& .MuiSlider-mark": markPart(input),
+    "& .MuiSlider-markLabel": markLabelPart(input)
+  };
+};
+
+export {
+  sliderSx
+};
+//# sourceMappingURL=chunk-PYIASGI7.js.map

package/dist/chunk-PYIASGI7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Slider/Slider.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { glowAnimation, gradientShiftAnimation, pulseAnimation } from './Slider.animations';\nimport { rem } from '../../../tokens/relative';\n\nimport { absoluteInk, controlNeutral, onMedia, sheen } from '../../../tokens/ink';\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 built from the grey ramp. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\n\n/** `danger` is this component's name for the error palette. */\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\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  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\ninterface Geometry {\n  height: number;\n  thumbSize: number;\n  markHeight: number;\n}\n\nconst SIZES: Record<SizeKey, Geometry> = {\n  xs: { height: 4, thumbSize: 16, markHeight: 8 },\n  sm: { height: 6, thumbSize: 18, markHeight: 10 },\n  md: { height: 8, thumbSize: 20, markHeight: 12 },\n  lg: { height: 10, thumbSize: 24, markHeight: 14 },\n  xl: { height: 12, thumbSize: 28, markHeight: 16 },\n};\n\n/**\n * The value bubble and mark labels shrink at the two smallest sizes only. The\n * two fonts are design px, read through the type scale.\n */\nconst LABEL_SCALE: Record<string, { fontPx: number; box: number; markFont: number }> = {\n  xs: { fontPx: 10, box: 28, markFont: 10.4 },\n  sm: { fontPx: 11, box: 30, markFont: 11.2 },\n};\nconst LABEL_DEFAULT = { fontPx: 12, box: 32, markFont: 12 };\n\nexport interface SliderFlags {\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n  customVariant?: string;\n}\n\ninterface PartInput {\n  theme: Theme;\n  flags: SliderFlags;\n  palette: ColorPalette;\n  geometry: Geometry;\n}\n\nconst trackPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject => {\n  const { gradient, glow, glass, customVariant } = flags;\n  const isGradientVariant = customVariant === 'gradient';\n\n  return {\n    border: 'none',\n    height: geometry.height,\n    borderRadius: geometry.height / 2,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    position: 'relative',\n    overflow: 'hidden',\n    ...(gradient && {\n      background: isGradientVariant\n        ? `linear-gradient(90deg,\n              ${palette.light} 0%,\n              ${palette.main} 50%,\n              ${palette.dark} 100%)`\n        : `linear-gradient(90deg, ${palette.light}, ${palette.main})`,\n      backgroundSize: '200% 100%',\n      animation: isGradientVariant ? `${gradientShiftAnimation} 3s ease infinite` : 'none',\n      // A sheen that travels the filled portion while the gradient shifts.\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: `linear-gradient(90deg, transparent, ${sheen(theme, 0.2)}, transparent)`,\n        animation: `${gradientShiftAnimation} 2s linear infinite`,\n      },\n    }),\n    ...(glow && {\n      animation: `${glowAnimation} 2s ease-in-out infinite`,\n      boxShadow: `0 0 10px ${alpha(palette.main, 0.6)}, inset 0 0 10px ${alpha(palette.main, 0.2)}`,\n    }),\n    ...(glass && {\n      backgroundColor: alpha(palette.main, 0.8),\n      backdropFilter: 'blur(10px)',\n      border: `1px solid ${alpha(palette.light || palette.main, 0.3)}`,\n    }),\n  };\n};\n\nconst railPart = ({ theme, flags, geometry }: PartInput): CSSObject => ({\n  color: alpha(theme.palette.action.disabled, 0.3),\n  opacity: 1,\n  height: geometry.height,\n  borderRadius: geometry.height / 2,\n  transition: 'all 0.3s ease',\n  ...(flags.glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(20px)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  }),\n  ...(flags.customVariant === 'gradient' && {\n    background: `linear-gradient(90deg,\n          ${alpha(theme.palette.action.disabled, 0.2)},\n          ${alpha(theme.palette.action.disabled, 0.3)},\n          ${alpha(theme.palette.action.disabled, 0.2)})`,\n  }),\n});\n\nconst thumbPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject => {\n  const { gradient, glow, glass } = flags;\n\n  return {\n    height: geometry.thumbSize,\n    width: geometry.thumbSize,\n    backgroundColor: gradient ? palette.main : absoluteInk(theme).white,\n    border: `2px solid ${palette.main}`,\n    boxShadow: `${theme.shadows[2]}, 0 0 0 0 ${alpha(palette.main, 0.2)}`,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    position: 'relative',\n    // Sits invisible until focus or hover runs the pulse keyframes over it.\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n      width: '100%',\n      height: '100%',\n      borderRadius: '50%',\n      backgroundColor: palette.main,\n      opacity: 0,\n    },\n    '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {\n      boxShadow: glow\n        ? `${theme.shadows[4]}, 0 0 20px ${alpha(palette.main, 0.6)}, 0 0 0 8px ${alpha(palette.main, 0.15)}`\n        : `${theme.shadows[4]}, 0 0 0 8px ${alpha(palette.main, 0.15)}`,\n      transform: 'scale(1.15)',\n      '&::before': { animation: `${pulseAnimation} 0.6s ease-out` },\n    },\n    '&:active': { transform: 'scale(1.05)' },\n    ...(glass && {\n      backgroundColor: alpha(theme.palette.background.paper, 0.9),\n      backdropFilter: 'blur(10px)',\n      border: `2px solid ${alpha(palette.main, 0.8)}`,\n    }),\n    ...(gradient && {\n      background: `linear-gradient(135deg, ${palette.light}, ${palette.main})`,\n      border: 'none',\n      color: onMedia(theme),\n    }),\n  };\n};\n\n/** Transparent under a gradient (the gradient itself paints it), else the accent. */\nconst bubbleBackground = (palette: ColorPalette, gradient: boolean, glass: boolean) => {\n  if (gradient) return 'transparent';\n  return glass ? alpha(palette.main, 0.9) : palette.main;\n};\n\n/** The bubble's closed and open transforms; only the scale differs between them. */\nconst bubbleTransformFor = (gradient: boolean) => {\n  const base = gradient ? 'translate(50%, -150%)' : 'translate(50%, -100%) rotate(-45deg)';\n  return { hidden: `${base} scale(0)`, shown: `${base} scale(1)` };\n};\n\n/**\n * The value bubble. Without `gradient` it is MUI's teardrop — a rotated square\n * with one square corner — so its contents are counter-rotated; the gradient\n * look is a plain rounded box and needs neither rotation.\n */\nconst valueLabelPart = ({ theme, flags, palette }: PartInput): CSSObject => {\n  const { gradient, glass, customSize } = flags;\n  const scale = LABEL_SCALE[customSize ?? ''] ?? LABEL_DEFAULT;\n  const bubbleTransform = bubbleTransformFor(Boolean(gradient));\n\n  return {\n    lineHeight: 1.2,\n    fontSize: rem(theme, scale.fontPx),\n    padding: 0,\n    width: scale.box,\n    height: scale.box,\n    borderRadius: gradient ? '8px' : '50% 50% 50% 0',\n    backgroundColor: bubbleBackground(palette, Boolean(gradient), Boolean(glass)),\n    background: gradient\n      ? `linear-gradient(135deg, ${palette.light}, ${palette.main})`\n      : 'unset',\n    backdropFilter: glass ? 'blur(10px)' : 'none',\n    transformOrigin: 'bottom left',\n    transform: bubbleTransform.hidden,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    boxShadow: `${theme.shadows[2]}, 0 0 10px ${alpha(palette.main, 0.2)}`,\n    '&:before': { display: 'none' },\n    '&.MuiSlider-valueLabelOpen': { transform: bubbleTransform.shown },\n    '& > *': { transform: gradient ? 'none' : 'rotate(45deg)', fontWeight: 600 },\n  };\n};\n\nconst markPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject => {\n  const { gradient, glow, customVariant } = flags;\n  const isMarksVariant = customVariant === 'marks';\n  const { markHeight, height } = geometry;\n\n  return {\n    backgroundColor: alpha(theme.palette.action.disabled, 0.5),\n    height: markHeight,\n    width: isMarksVariant ? 3 : 2,\n    // Centred on the rail rather than hanging below it.\n    marginTop: -(markHeight - height) / 2,\n    borderRadius: 1,\n    transition: 'all 0.3s ease',\n    '&.MuiSlider-markActive': {\n      backgroundColor: gradient ? palette.light : palette.main,\n      width: isMarksVariant ? 4 : 2,\n      height: markHeight + 2,\n      marginTop: -(markHeight + 2 - height) / 2,\n      ...(glow && { boxShadow: `0 0 8px ${alpha(palette.main, 0.5)}` }),\n    },\n  };\n};\n\nconst markLabelPart = ({ theme, flags, palette }: PartInput): CSSObject => ({\n  fontSize: rem(theme, (LABEL_SCALE[flags.customSize ?? ''] ?? LABEL_DEFAULT).markFont),\n  color: theme.palette.text.secondary,\n  marginTop: theme.spacing(1.5),\n  fontWeight: 500,\n  transition: 'all 0.3s ease',\n  '&.MuiSlider-markLabelActive': {\n    color: palette.main,\n    fontWeight: 600,\n    transform: 'scale(1.05)',\n  },\n});\n\nexport const sliderSx = (theme: Theme, flags: SliderFlags): CSSObject => {\n  const palette = getColorFromTheme(theme, flags.customColor ?? 'primary');\n  const geometry = SIZES[flags.customSize as SizeKey] ?? SIZES.md;\n  const input: PartInput = { theme, flags, palette, geometry };\n\n  return {\n    color: palette.main,\n    height: geometry.height,\n    '& .MuiSlider-track': trackPart(input),\n    '& .MuiSlider-rail': railPart(input),\n    '& .MuiSlider-thumb': thumbPart(input),\n    '& .MuiSlider-valueLabel': valueLabelPart(input),\n    '& .MuiSlider-mark': markPart(input),\n    '& .MuiSlider-markLabel': markLabelPart(input),\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,aAAa;AAgBtB,IAAM,iBAAiB,CAAC,UAA+B,eAAe,KAAK;AAG3E,IAAM,eAAe,CAAC,OAAc,UAAgC;AAClE,QAAM,WAAyC;AAAA,IAC7C,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,SAAO,SAAS,KAAK,KAAK,MAAM,QAAQ;AAC1C;AAEA,IAAM,oBAAoB,CAAC,OAAc,UAAgC;AACvE,MAAI,UAAU,WAAW;AACvB,WAAO,eAAe,KAAK;AAAA,EAC7B;AAEA,QAAM,UAAU,aAAa,OAAO,KAAK;AACzC,QAAM,EAAE,QAAQ,IAAI,MAAM;AAE1B,SAAO;AAAA,IACL,MAAM,QAAQ,QAAQ,QAAQ;AAAA,IAC9B,MAAM,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ;AAAA,IAC9C,OAAO,QAAQ,SAAS,QAAQ,QAAQ,QAAQ;AAAA,IAChD,cAAc,QAAQ,gBAAgB,YAAY,KAAK,EAAE;AAAA,EAC3D;AACF;AAUA,IAAM,QAAmC;AAAA,EACvC,IAAI,EAAE,QAAQ,GAAG,WAAW,IAAI,YAAY,EAAE;AAAA,EAC9C,IAAI,EAAE,QAAQ,GAAG,WAAW,IAAI,YAAY,GAAG;AAAA,EAC/C,IAAI,EAAE,QAAQ,GAAG,WAAW,IAAI,YAAY,GAAG;AAAA,EAC/C,IAAI,EAAE,QAAQ,IAAI,WAAW,IAAI,YAAY,GAAG;AAAA,EAChD,IAAI,EAAE,QAAQ,IAAI,WAAW,IAAI,YAAY,GAAG;AAClD;AAMA,IAAM,cAAiF;AAAA,EACrF,IAAI,EAAE,QAAQ,IAAI,KAAK,IAAI,UAAU,KAAK;AAAA,EAC1C,IAAI,EAAE,QAAQ,IAAI,KAAK,IAAI,UAAU,KAAK;AAC5C;AACA,IAAM,gBAAgB,EAAE,QAAQ,IAAI,KAAK,IAAI,UAAU,GAAG;AAkB1D,IAAM,YAAY,CAAC,EAAE,OAAO,OAAO,SAAS,SAAS,MAA4B;AAC/E,QAAM,EAAE,UAAU,MAAM,OAAO,cAAc,IAAI;AACjD,QAAM,oBAAoB,kBAAkB;AAE5C,SAAO;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ,SAAS;AAAA,IACjB,cAAc,SAAS,SAAS;AAAA,IAChC,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAI,YAAY;AAAA,MACd,YAAY,oBACR;AAAA,gBACM,QAAQ,KAAK;AAAA,gBACb,QAAQ,IAAI;AAAA,gBACZ,QAAQ,IAAI,WAClB,0BAA0B,QAAQ,KAAK,KAAK,QAAQ,IAAI;AAAA,MAC5D,gBAAgB;AAAA,MAChB,WAAW,oBAAoB,GAAG,sBAAsB,sBAAsB;AAAA;AAAA,MAE9E,YAAY;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY,uCAAuC,MAAM,OAAO,GAAG,CAAC;AAAA,QACpE,WAAW,GAAG,sBAAsB;AAAA,MACtC;AAAA,IACF;AAAA,IACA,GAAI,QAAQ;AAAA,MACV,WAAW,GAAG,aAAa;AAAA,MAC3B,WAAW,YAAY,MAAM,QAAQ,MAAM,GAAG,CAAC,oBAAoB,MAAM,QAAQ,MAAM,GAAG,CAAC;AAAA,IAC7F;AAAA,IACA,GAAI,SAAS;AAAA,MACX,iBAAiB,MAAM,QAAQ,MAAM,GAAG;AAAA,MACxC,gBAAgB;AAAA,MAChB,QAAQ,aAAa,MAAM,QAAQ,SAAS,QAAQ,MAAM,GAAG,CAAC;AAAA,IAChE;AAAA,EACF;AACF;AAEA,IAAM,WAAW,CAAC,EAAE,OAAO,OAAO,SAAS,OAA6B;AAAA,EACtE,OAAO,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG;AAAA,EAC/C,SAAS;AAAA,EACT,QAAQ,SAAS;AAAA,EACjB,cAAc,SAAS,SAAS;AAAA,EAChC,YAAY;AAAA,EACZ,GAAI,MAAM,SAAS;AAAA,IACjB,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,IAC1D,gBAAgB;AAAA,IAChB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,EACxD;AAAA,EACA,GAAI,MAAM,kBAAkB,cAAc;AAAA,IACxC,YAAY;AAAA,YACJ,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG,CAAC;AAAA,YACzC,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG,CAAC;AAAA,YACzC,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG,CAAC;AAAA,EACnD;AACF;AAEA,IAAM,YAAY,CAAC,EAAE,OAAO,OAAO,SAAS,SAAS,MAA4B;AAC/E,QAAM,EAAE,UAAU,MAAM,MAAM,IAAI;AAElC,SAAO;AAAA,IACL,QAAQ,SAAS;AAAA,IACjB,OAAO,SAAS;AAAA,IAChB,iBAAiB,WAAW,QAAQ,OAAO,YAAY,KAAK,EAAE;AAAA,IAC9D,QAAQ,aAAa,QAAQ,IAAI;AAAA,IACjC,WAAW,GAAG,MAAM,QAAQ,CAAC,CAAC,aAAa,MAAM,QAAQ,MAAM,GAAG,CAAC;AAAA,IACnE,YAAY;AAAA,IACZ,UAAU;AAAA;AAAA,IAEV,aAAa;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,iBAAiB,QAAQ;AAAA,MACzB,SAAS;AAAA,IACX;AAAA,IACA,sDAAsD;AAAA,MACpD,WAAW,OACP,GAAG,MAAM,QAAQ,CAAC,CAAC,cAAc,MAAM,QAAQ,MAAM,GAAG,CAAC,eAAe,MAAM,QAAQ,MAAM,IAAI,CAAC,KACjG,GAAG,MAAM,QAAQ,CAAC,CAAC,eAAe,MAAM,QAAQ,MAAM,IAAI,CAAC;AAAA,MAC/D,WAAW;AAAA,MACX,aAAa,EAAE,WAAW,GAAG,cAAc,iBAAiB;AAAA,IAC9D;AAAA,IACA,YAAY,EAAE,WAAW,cAAc;AAAA,IACvC,GAAI,SAAS;AAAA,MACX,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,MAC1D,gBAAgB;AAAA,MAChB,QAAQ,aAAa,MAAM,QAAQ,MAAM,GAAG,CAAC;AAAA,IAC/C;AAAA,IACA,GAAI,YAAY;AAAA,MACd,YAAY,2BAA2B,QAAQ,KAAK,KAAK,QAAQ,IAAI;AAAA,MACrE,QAAQ;AAAA,MACR,OAAO,QAAQ,KAAK;AAAA,IACtB;AAAA,EACF;AACF;AAGA,IAAM,mBAAmB,CAAC,SAAuB,UAAmB,UAAmB;AACrF,MAAI,SAAU,QAAO;AACrB,SAAO,QAAQ,MAAM,QAAQ,MAAM,GAAG,IAAI,QAAQ;AACpD;AAGA,IAAM,qBAAqB,CAAC,aAAsB;AAChD,QAAM,OAAO,WAAW,0BAA0B;AAClD,SAAO,EAAE,QAAQ,GAAG,IAAI,aAAa,OAAO,GAAG,IAAI,YAAY;AACjE;AAOA,IAAM,iBAAiB,CAAC,EAAE,OAAO,OAAO,QAAQ,MAA4B;AAC1E,QAAM,EAAE,UAAU,OAAO,WAAW,IAAI;AACxC,QAAM,QAAQ,YAAY,cAAc,EAAE,KAAK;AAC/C,QAAM,kBAAkB,mBAAmB,QAAQ,QAAQ,CAAC;AAE5D,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,UAAU,IAAI,OAAO,MAAM,MAAM;AAAA,IACjC,SAAS;AAAA,IACT,OAAO,MAAM;AAAA,IACb,QAAQ,MAAM;AAAA,IACd,cAAc,WAAW,QAAQ;AAAA,IACjC,iBAAiB,iBAAiB,SAAS,QAAQ,QAAQ,GAAG,QAAQ,KAAK,CAAC;AAAA,IAC5E,YAAY,WACR,2BAA2B,QAAQ,KAAK,KAAK,QAAQ,IAAI,MACzD;AAAA,IACJ,gBAAgB,QAAQ,eAAe;AAAA,IACvC,iBAAiB;AAAA,IACjB,WAAW,gBAAgB;AAAA,IAC3B,YAAY;AAAA,IACZ,WAAW,GAAG,MAAM,QAAQ,CAAC,CAAC,cAAc,MAAM,QAAQ,MAAM,GAAG,CAAC;AAAA,IACpE,YAAY,EAAE,SAAS,OAAO;AAAA,IAC9B,8BAA8B,EAAE,WAAW,gBAAgB,MAAM;AAAA,IACjE,SAAS,EAAE,WAAW,WAAW,SAAS,iBAAiB,YAAY,IAAI;AAAA,EAC7E;AACF;AAEA,IAAM,WAAW,CAAC,EAAE,OAAO,OAAO,SAAS,SAAS,MAA4B;AAC9E,QAAM,EAAE,UAAU,MAAM,cAAc,IAAI;AAC1C,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,EAAE,YAAY,OAAO,IAAI;AAE/B,SAAO;AAAA,IACL,iBAAiB,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG;AAAA,IACzD,QAAQ;AAAA,IACR,OAAO,iBAAiB,IAAI;AAAA;AAAA,IAE5B,WAAW,EAAE,aAAa,UAAU;AAAA,IACpC,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,0BAA0B;AAAA,MACxB,iBAAiB,WAAW,QAAQ,QAAQ,QAAQ;AAAA,MACpD,OAAO,iBAAiB,IAAI;AAAA,MAC5B,QAAQ,aAAa;AAAA,MACrB,WAAW,EAAE,aAAa,IAAI,UAAU;AAAA,MACxC,GAAI,QAAQ,EAAE,WAAW,WAAW,MAAM,QAAQ,MAAM,GAAG,CAAC,GAAG;AAAA,IACjE;AAAA,EACF;AACF;AAEA,IAAM,gBAAgB,CAAC,EAAE,OAAO,OAAO,QAAQ,OAA6B;AAAA,EAC1E,UAAU,IAAI,QAAQ,YAAY,MAAM,cAAc,EAAE,KAAK,eAAe,QAAQ;AAAA,EACpF,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC1B,WAAW,MAAM,QAAQ,GAAG;AAAA,EAC5B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,+BAA+B;AAAA,IAC7B,OAAO,QAAQ;AAAA,IACf,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AACF;AAEO,IAAM,WAAW,CAAC,OAAc,UAAkC;AACvE,QAAM,UAAU,kBAAkB,OAAO,MAAM,eAAe,SAAS;AACvE,QAAM,WAAW,MAAM,MAAM,UAAqB,KAAK,MAAM;AAC7D,QAAM,QAAmB,EAAE,OAAO,OAAO,SAAS,SAAS;AAE3D,SAAO;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,sBAAsB,UAAU,KAAK;AAAA,IACrC,qBAAqB,SAAS,KAAK;AAAA,IACnC,sBAAsB,UAAU,KAAK;AAAA,IACrC,2BAA2B,eAAe,KAAK;AAAA,IAC/C,qBAAqB,SAAS,KAAK;AAAA,IACnC,0BAA0B,cAAc,KAAK;AAAA,EAC/C;AACF;","names":[]}

package/dist/chunk-Q4BQYYPU.js

@@ -0,0 +1,93 @@
+import {
+  GLASS_BACKGROUND_ALPHA_FROM,
+  GLASS_BACKGROUND_ALPHA_TO,
+  GLASS_BLUR_PX,
+  GLASS_BORDER_ALPHA,
+  GLASS_SHADOW,
+  SHIMMER_ALPHA,
+  SHIMMER_DURATION_MS,
+  SKELETON_DEFAULT_DIMENSIONS,
+  SKELETON_INTENSITY_OPACITY
+} from "./chunk-EMPVMZAB.js";
+import {
+  modeInk,
+  shadowInk,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/layout/Skeleton/Skeleton.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var muiVariantFor = (variant) => {
+  switch (variant) {
+    case "circular":
+      return "circular";
+    case "rectangular":
+    case "wave":
+      return "rectangular";
+    default:
+      return "text";
+  }
+};
+var muiAnimationFor = (variant, animation) => {
+  if (variant === "wave") return "wave";
+  return animation;
+};
+var defaultDimensions = (variant) => (
+  // The `default:` arm the old switch had: an unrecognised variant used to fall
+  // back rather than hand `undefined` to a caller that then reads `.width`.
+  SKELETON_DEFAULT_DIMENSIONS[variant] ?? SKELETON_DEFAULT_DIMENSIONS.rectangular
+);
+var intensityOpacity = (intensity) => SKELETON_INTENSITY_OPACITY[intensity] ?? SKELETON_INTENSITY_OPACITY.medium;
+var glassmorphismStyles = (theme) => ({
+  background: `linear-gradient(135deg,
+        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM)} 0%,
+        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_TO)} 100%)`,
+  backdropFilter: `blur(${GLASS_BLUR_PX}px)`,
+  border: `1px solid ${alpha(theme.palette.divider, GLASS_BORDER_ALPHA)}`,
+  boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${shadowInk(theme, GLASS_SHADOW.alpha)}`
+});
+var shimmerStyles = (theme) => ({
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    background: `linear-gradient(
+          90deg,
+          transparent,
+          ${sheen(theme, SHIMMER_ALPHA)},
+          transparent
+        )`,
+    transform: "translateX(-100%)",
+    animation: `shimmer ${SHIMMER_DURATION_MS / 1e3}s infinite`
+  },
+  "@keyframes shimmer": {
+    "100%": {
+      transform: "translateX(100%)"
+    }
+  }
+});
+var skeletonStyles = (theme, { intensity, borderRadius, glassmorphism, shimmer, style }) => ({
+  borderRadius,
+  backgroundColor: alpha(
+    theme.palette.mode === "dark" ? modeInk(theme) : theme.palette.text.primary,
+    intensityOpacity(intensity)
+  ),
+  ...shimmer && {
+    position: "relative",
+    overflow: "hidden"
+  },
+  ...glassmorphism ? glassmorphismStyles(theme) : {},
+  ...shimmer ? shimmerStyles(theme) : {},
+  ...style
+});
+
+export {
+  muiVariantFor,
+  muiAnimationFor,
+  defaultDimensions,
+  skeletonStyles
+};
+//# sourceMappingURL=chunk-Q4BQYYPU.js.map

package/dist/chunk-Q4BQYYPU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Skeleton/Skeleton.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { SkeletonProps } from './Skeleton.types';\nimport {\n  GLASS_BACKGROUND_ALPHA_FROM,\n  GLASS_BACKGROUND_ALPHA_TO,\n  GLASS_BLUR_PX,\n  GLASS_BORDER_ALPHA,\n  GLASS_SHADOW,\n  SHIMMER_ALPHA,\n  SHIMMER_DURATION_MS,\n  SKELETON_DEFAULT_DIMENSIONS,\n  SKELETON_INTENSITY_OPACITY,\n} from './Skeleton.metrics';\nimport { modeInk, shadowInk, sheen } from '../../../tokens/ink';\n\ntype SkeletonVariant = NonNullable<SkeletonProps['variant']>;\ntype SkeletonIntensity = NonNullable<SkeletonProps['intensity']>;\n\n/** `wave` is our own name for a rectangle that animates; MUI has no such variant. */\nexport const muiVariantFor = (\n  variant: SkeletonVariant,\n): 'circular' | 'rectangular' | 'text' => {\n  switch (variant) {\n    case 'circular':\n      return 'circular';\n    case 'rectangular':\n    case 'wave':\n      return 'rectangular';\n    default:\n      return 'text';\n  }\n};\n\nexport const muiAnimationFor = (\n  variant: SkeletonVariant,\n  animation: SkeletonProps['animation'],\n) => {\n  if (variant === 'wave') return 'wave';\n  return animation;\n};\n\n// Derived from the shared metrics, not restated: the native `Skeleton` reads\n// the same table, so the two renderers cannot disagree on a default box.\nexport const defaultDimensions = (\n  variant: SkeletonVariant,\n): { width: number | string; height: number | undefined } =>\n  // The `default:` arm the old switch had: an unrecognised variant used to fall\n  // back rather than hand `undefined` to a caller that then reads `.width`.\n  SKELETON_DEFAULT_DIMENSIONS[variant] ?? SKELETON_DEFAULT_DIMENSIONS.rectangular;\n\nconst intensityOpacity = (intensity: SkeletonIntensity): number =>\n  SKELETON_INTENSITY_OPACITY[intensity] ?? SKELETON_INTENSITY_OPACITY.medium;\n\nconst glassmorphismStyles = (theme: Theme): CSSObject => ({\n  background: `linear-gradient(135deg,\n        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM)} 0%,\n        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_TO)} 100%)`,\n  backdropFilter: `blur(${GLASS_BLUR_PX}px)`,\n  border: `1px solid ${alpha(theme.palette.divider, GLASS_BORDER_ALPHA)}`,\n  boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${shadowInk(theme, GLASS_SHADOW.alpha)}`,\n});\n\n// The sweep is a pseudo-element sliding across the box, so the box has to clip it\n// and establish a positioning context — hence `position`/`overflow` below.\nconst shimmerStyles = (theme: Theme): CSSObject => ({\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    background: `linear-gradient(\n          90deg,\n          transparent,\n          ${sheen(theme, SHIMMER_ALPHA)},\n          transparent\n        )`,\n    transform: 'translateX(-100%)',\n    animation: `shimmer ${SHIMMER_DURATION_MS / 1000}s infinite`,\n  },\n  '@keyframes shimmer': {\n    '100%': {\n      transform: 'translateX(100%)',\n    },\n  },\n});\n\ninterface SkeletonStyleArgs {\n  intensity: SkeletonIntensity;\n  borderRadius?: number | string;\n  glassmorphism: boolean;\n  shimmer: boolean;\n  style?: React.CSSProperties;\n}\n\nexport const skeletonStyles = (\n  theme: Theme,\n  { intensity, borderRadius, glassmorphism, shimmer, style }: SkeletonStyleArgs,\n): CSSObject => ({\n  borderRadius,\n  backgroundColor: alpha(\n    theme.palette.mode === 'dark' ? modeInk(theme) : theme.palette.text.primary,\n    intensityOpacity(intensity),\n  ),\n  ...(shimmer && {\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n  }),\n  ...(glassmorphism ? glassmorphismStyles(theme) : {}),\n  ...(shimmer ? shimmerStyles(theme) : {}),\n  ...style,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAS,aAAa;AAqBf,IAAM,gBAAgB,CAC3B,YACwC;AACxC,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,kBAAkB,CAC7B,SACA,cACG;AACH,MAAI,YAAY,OAAQ,QAAO;AAC/B,SAAO;AACT;AAIO,IAAM,oBAAoB,CAC/B;AAAA;AAAA;AAAA,EAIA,4BAA4B,OAAO,KAAK,4BAA4B;AAAA;AAEtE,IAAM,mBAAmB,CAAC,cACxB,2BAA2B,SAAS,KAAK,2BAA2B;AAEtE,IAAM,sBAAsB,CAAC,WAA6B;AAAA,EACxD,YAAY;AAAA,UACJ,MAAM,MAAM,QAAQ,WAAW,OAAO,2BAA2B,CAAC;AAAA,UAClE,MAAM,MAAM,QAAQ,WAAW,OAAO,yBAAyB,CAAC;AAAA,EACxE,gBAAgB,QAAQ,aAAa;AAAA,EACrC,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,kBAAkB,CAAC;AAAA,EACrE,WAAW,KAAK,aAAa,OAAO,MAAM,aAAa,IAAI,QAAQ,UAAU,OAAO,aAAa,KAAK,CAAC;AACzG;AAIA,IAAM,gBAAgB,CAAC,WAA6B;AAAA,EAClD,YAAY;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA;AAAA;AAAA,YAGJ,MAAM,OAAO,aAAa,CAAC;AAAA;AAAA;AAAA,IAGnC,WAAW;AAAA,IACX,WAAW,WAAW,sBAAsB,GAAI;AAAA,EAClD;AAAA,EACA,sBAAsB;AAAA,IACpB,QAAQ;AAAA,MACN,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAUO,IAAM,iBAAiB,CAC5B,OACA,EAAE,WAAW,cAAc,eAAe,SAAS,MAAM,OAC1C;AAAA,EACf;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM,QAAQ,SAAS,SAAS,QAAQ,KAAK,IAAI,MAAM,QAAQ,KAAK;AAAA,IACpE,iBAAiB,SAAS;AAAA,EAC5B;AAAA,EACA,GAAI,WAAW;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,GAAI,gBAAgB,oBAAoB,KAAK,IAAI,CAAC;AAAA,EAClD,GAAI,UAAU,cAAc,KAAK,IAAI,CAAC;AAAA,EACtC,GAAG;AACL;","names":[]}

package/dist/chunk-QAP3FW33.js

@@ -0,0 +1,240 @@
+import {
+  resolveScrollAreaProps
+} from "./chunk-RHIDWUK7.js";
+import {
+  ScrollViewport
+} from "./chunk-T3WHW7ZC.js";
+import {
+  ScrollAreaContent
+} from "./chunk-4OEKIFBC.js";
+
+// src/components/layout/ScrollArea/ScrollArea.tsx
+import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Fab from "@mui/material/Fab/index.js";
+import Zoom from "@mui/material/Zoom/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var useObservedScrollRef = ({
+  externalScrollRef,
+  onResize
+}) => {
+  const internalScrollRef = useRef(null);
+  const [containerDimensions, setContainerDimensions] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    if (!internalScrollRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        const { width, height } = entry.contentRect;
+        setContainerDimensions({ width, height });
+        onResize?.({ width, height });
+      }
+    });
+    resizeObserver.observe(internalScrollRef.current);
+    return () => resizeObserver.disconnect();
+  }, [onResize]);
+  const setScrollRef = useCallback(
+    (node) => {
+      internalScrollRef.current = node;
+      if (externalScrollRef) {
+        externalScrollRef.current = node;
+      }
+    },
+    [externalScrollRef]
+  );
+  return { scrollRef: internalScrollRef, setScrollRef, containerDimensions };
+};
+var useAutoHide = ({
+  autoHide,
+  alwaysShowScrollbar,
+  autoHideDelay
+}) => {
+  const [isScrolling, setIsScrolling] = useState(false);
+  const timeoutRef = useRef(void 0);
+  const noteScroll = useCallback(() => {
+    if (!autoHide || alwaysShowScrollbar) return;
+    setIsScrolling(true);
+    window.clearTimeout(timeoutRef.current);
+    timeoutRef.current = window.setTimeout(() => setIsScrolling(false), autoHideDelay);
+  }, [autoHide, alwaysShowScrollbar, autoHideDelay]);
+  useEffect(() => () => window.clearTimeout(timeoutRef.current), []);
+  return { isScrolling, noteScroll };
+};
+var useScrollArea = (props) => {
+  const {
+    disabled,
+    onScroll,
+    onResize,
+    externalScrollRef,
+    autoHide,
+    autoHideDelay,
+    alwaysShowScrollbar,
+    scrollToTopButton,
+    scrollToTopThreshold,
+    smoothScroll
+  } = props;
+  const { scrollRef, setScrollRef, containerDimensions } = useObservedScrollRef({
+    externalScrollRef,
+    onResize
+  });
+  const [showScrollToTop, setShowScrollToTop] = useState(false);
+  const { isScrolling, noteScroll } = useAutoHide({
+    autoHide,
+    alwaysShowScrollbar,
+    autoHideDelay
+  });
+  const handleScroll = useCallback(
+    (event) => {
+      if (disabled) return;
+      noteScroll();
+      if (scrollToTopButton && scrollRef.current) {
+        setShowScrollToTop(scrollRef.current.scrollTop > scrollToTopThreshold);
+      }
+      onScroll?.(event);
+    },
+    [disabled, noteScroll, scrollToTopButton, scrollToTopThreshold, onScroll, scrollRef]
+  );
+  const scrollToTop = useCallback(() => {
+    scrollRef.current?.scrollTo({ top: 0, behavior: smoothScroll ? "smooth" : "auto" });
+  }, [smoothScroll, scrollRef]);
+  return {
+    scrollRef,
+    setScrollRef,
+    isScrolling,
+    showScrollToTop,
+    containerDimensions,
+    handleScroll,
+    scrollToTop
+  };
+};
+var LoadingOverlay = () => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      zIndex: 10
+    },
+    children: /* @__PURE__ */ jsx(CircularProgress, {})
+  }
+);
+var ScrollToTopFab = ({
+  visible,
+  glass,
+  scrollToTopLabel,
+  onClick
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Zoom, { in: visible, children: /* @__PURE__ */ jsx(
+    Fab,
+    {
+      size: "small",
+      "aria-label": scrollToTopLabel,
+      onClick,
+      sx: {
+        position: "absolute",
+        bottom: 16,
+        right: 16,
+        zIndex: 1,
+        backgroundColor: glass ? alpha(theme.palette.primary.main, 0.2) : theme.palette.primary.main,
+        backdropFilter: glass ? "blur(10px)" : "none",
+        "&:hover": {
+          backgroundColor: glass ? alpha(theme.palette.primary.main, 0.3) : theme.palette.primary.dark
+        }
+      },
+      children: /* @__PURE__ */ jsx(KeyboardArrowUp, {})
+    }
+  ) });
+};
+var ScrollArea = (componentProps) => {
+  const resolved = resolveScrollAreaProps(componentProps);
+  const {
+    regionLabel,
+    scrollToTopLabel,
+    children,
+    width,
+    height,
+    maxHeight,
+    maxWidth,
+    orientation: _orientation,
+    scrollbarSize: _scrollbarSize,
+    autoHide,
+    autoHideDelay: _autoHideDelay,
+    smoothScroll: _smoothScroll,
+    variant,
+    onScroll: _onScroll,
+    scrollToTopButton,
+    scrollToTopThreshold: _scrollToTopThreshold,
+    scrollbarColor: _scrollbarColor,
+    scrollbarTrackColor: _scrollbarTrackColor,
+    contentPadding: _contentPadding,
+    alwaysShowScrollbar,
+    disabled,
+    loading,
+    emptyContent,
+    testId,
+    scrollRef: externalScrollRef,
+    onResize: _onResize,
+    sx,
+    ...props
+  } = resolved;
+  const {
+    scrollRef,
+    setScrollRef,
+    isScrolling,
+    showScrollToTop,
+    containerDimensions,
+    handleScroll,
+    scrollToTop
+  } = useScrollArea({ ...resolved, externalScrollRef });
+  const shouldShowScrollbar = alwaysShowScrollbar || !autoHide || isScrolling;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": testId,
+      sx: { position: "relative", width, height, maxHeight, maxWidth, ...sx },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollViewport,
+          {
+            ...resolved,
+            regionLabel,
+            shouldShowScrollbar,
+            setScrollRef,
+            onScroll: handleScroll,
+            children: /* @__PURE__ */ jsx(
+              ScrollAreaContent,
+              {
+                emptyContent,
+                scrollRef,
+                containerWidth: containerDimensions.width,
+                children
+              }
+            )
+          }
+        ),
+        loading && /* @__PURE__ */ jsx(LoadingOverlay, {}),
+        scrollToTopButton && scrollToTopLabel && !disabled && !loading && /* @__PURE__ */ jsx(
+          ScrollToTopFab,
+          {
+            scrollToTopLabel,
+            visible: showScrollToTop,
+            glass: variant === "glass",
+            onClick: scrollToTop
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  ScrollArea
+};
+//# sourceMappingURL=chunk-QAP3FW33.js.map