@12-apps/ui 6.36.0 → 6.38.0

package/dist/{chunk-AMTFP7QA.js → chunk-4RDJMIWL.js}

@@ -5,26 +5,29 @@ import {
   absoluteInk,
   controlNeutral
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Textarea/Textarea.styles.ts
 import { alpha, keyframes } from "@mui/material/styles/index.js";
-var glowAnimation = keyframes`
+var glowAnimation = (theme) => keyframes`
   0% {
-    box-shadow: 0 0 5px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor;
   }
   50% {
-    box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
+    box-shadow: 0 0 ${rem(theme, 20)} currentColor, 0 0 ${rem(theme, 30)} currentColor;
   }
   100% {
-    box-shadow: 0 0 5px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor;
   }
 `;
-var floatAnimation = keyframes`
+var floatAnimation = (theme) => keyframes`
   0% {
     transform: translateY(0px);
   }
   50% {
-    transform: translateY(-3px);
+    transform: translateY(${rem(theme, -3)});
   }
   100% {
     transform: translateY(0px);
@@ -59,29 +62,29 @@ var textareaEmphasisStyles = ({
 }) => {
   const glassStyles = glass ? {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(20px)",
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${fieldEdge(theme)}`,
     "&:hover": {
       backgroundColor: alpha(theme.palette.background.paper, 0.15),
-      backdropFilter: "blur(25px)"
+      backdropFilter: `blur(${rem(theme, 25)})`
     },
     "&:focus": {
       backgroundColor: alpha(theme.palette.background.paper, 0.2),
-      backdropFilter: "blur(30px)"
+      backdropFilter: `blur(${rem(theme, 30)})`
     }
   } : {};
   const gradientStyles = gradient ? {
     background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,
                linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light}) border-box`,
-    border: "2px solid transparent",
+    border: `${rem(theme, 2)} solid transparent`,
     "&:focus": {
       background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,
                  linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark}) border-box`
     }
   } : {};
   const glowStyles = glow ? {
-    animation: `${glowAnimation} 2s ease-in-out infinite`,
-    boxShadow: `0 0 10px ${alpha(colorPalette.main, 0.3)}`
+    animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+    boxShadow: `0 0 ${rem(theme, 10)} ${alpha(colorPalette.main, 0.3)}`
   } : {};
   return { ...glassStyles, ...gradientStyles, ...glowStyles };
 };
@@ -91,4 +94,4 @@ export {
   getColorFromTheme,
   textareaEmphasisStyles
 };
-//# sourceMappingURL=chunk-AMTFP7QA.js.map
+//# sourceMappingURL=chunk-4RDJMIWL.js.map

package/dist/chunk-4RDJMIWL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Textarea/Textarea.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { absoluteInk, controlNeutral } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst glowAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 ${rem(theme, 5)} currentColor;\n  }\n  50% {\n    box-shadow: 0 0 ${rem(theme, 20)} currentColor, 0 0 ${rem(theme, 30)} currentColor;\n  }\n  100% {\n    box-shadow: 0 0 ${rem(theme, 5)} currentColor;\n  }\n`;\n\n// Ripple animation for buttons (commented out - not currently used)\n// const rippleAnimation = keyframes`\n//   0% {\n//     transform: scale(0);\n//     opacity: 1;\n//   }\n//   100% {\n//     transform: scale(4);\n//     opacity: 0;\n//   }\n// `;\n\n// Float animation for rich text toolbar\nexport const floatAnimation = (theme: Theme) => keyframes`\n  0% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(${rem(theme, -3)});\n  }\n  100% {\n    transform: translateY(0px);\n  }\n`;\n\ntype ResolvedPalette = {\n  main: string;\n  dark: string;\n  light: string;\n  contrastText: string;\n};\n\ntype PartialPalette = { main: string; dark?: string; light?: string; contrastText?: string };\n\n// `neutral` is not a MUI palette entry, so it is the controls' neutral tone.\nconst neutralPalette = (theme: Theme): ResolvedPalette => controlNeutral(theme);\n\n// Each slot falls back to the palette's own main, then to primary — a custom\n// theme can define main without dark or light.\nconst pick = (...candidates: Array<string | undefined>): string =>\n  candidates.find(Boolean) ?? '';\n\nconst withFallbacks = (theme: Theme, palette: PartialPalette): ResolvedPalette => ({\n  main: pick(palette?.main, theme.palette.primary.main),\n  dark: pick(palette?.dark, palette?.main, theme.palette.primary.dark),\n  light: pick(palette?.light, palette?.main, theme.palette.primary.light),\n  contrastText: pick(palette?.contrastText, absoluteInk(theme).white),\n});\n\nexport const getColorFromTheme = (theme: Theme, color: string): ResolvedPalette => {\n  if (color === 'neutral') return neutralPalette(theme);\n\n  const colorMap: Record<string, PartialPalette> = {\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 withFallbacks(theme, colorMap[color] || theme.palette.primary);\n};\n\n// glass, gradient and glow are independent flags that each layer styles onto the\n// base. Spelled out here rather than inline so the styled() callback keeps one\n// branch instead of three.\nexport const textareaEmphasisStyles = ({\n  theme,\n  colorPalette,\n  glass,\n  gradient,\n  glow,\n}: {\n  theme: Theme;\n  colorPalette: { main: string; light?: string; dark?: string };\n  glass?: boolean;\n  gradient?: boolean;\n  glow?: boolean;\n}): CSSObject => {\nconst glassStyles = glass\n  ? {\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: `blur(${rem(theme, 20)})`,\n      border: `1px solid ${fieldEdge(theme)}`,\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.background.paper, 0.15),\n        backdropFilter: `blur(${rem(theme, 25)})`,\n      },\n      '&:focus': {\n        backgroundColor: alpha(theme.palette.background.paper, 0.2),\n        backdropFilter: `blur(${rem(theme, 30)})`,\n      },\n    }\n  : {};\n\n// Gradient border effect\nconst gradientStyles = gradient\n  ? {\n      background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,\n               linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light}) border-box`,\n      border: `${rem(theme, 2)} solid transparent`,\n      '&:focus': {\n        background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,\n                 linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark}) border-box`,\n      },\n    }\n  : {};\n\n// Glow effect\nconst glowStyles = glow\n  ? {\n      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,\n      boxShadow: `0 0 ${rem(theme, 10)} ${alpha(colorPalette.main, 0.3)}`,\n    }\n  : {};\n\n  return { ...glassStyles, ...gradientStyles, ...glowStyles };\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,OAAO,iBAAiB;AAOjC,IAAM,gBAAgB,CAAC,UAAiB;AAAA;AAAA,sBAElB,IAAI,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA,sBAGb,IAAI,OAAO,EAAE,CAAC,sBAAsB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA,sBAGlD,IAAI,OAAO,CAAC,CAAC;AAAA;AAAA;AAiB5B,IAAM,iBAAiB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKpB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB1C,IAAM,iBAAiB,CAAC,UAAkC,eAAe,KAAK;AAI9E,IAAM,OAAO,IAAI,eACf,WAAW,KAAK,OAAO,KAAK;AAE9B,IAAM,gBAAgB,CAAC,OAAc,aAA8C;AAAA,EACjF,MAAM,KAAK,SAAS,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,EACpD,MAAM,KAAK,SAAS,MAAM,SAAS,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,EACnE,OAAO,KAAK,SAAS,OAAO,SAAS,MAAM,MAAM,QAAQ,QAAQ,KAAK;AAAA,EACtE,cAAc,KAAK,SAAS,cAAc,YAAY,KAAK,EAAE,KAAK;AACpE;AAEO,IAAM,oBAAoB,CAAC,OAAc,UAAmC;AACjF,MAAI,UAAU,UAAW,QAAO,eAAe,KAAK;AAEpD,QAAM,WAA2C;AAAA,IAC/C,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,cAAc,OAAO,SAAS,KAAK,KAAK,MAAM,QAAQ,OAAO;AACtE;AAKO,IAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMiB;AACjB,QAAM,cAAc,QAChB;AAAA,IACE,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,IAC1D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IACtC,QAAQ,aAAa,UAAU,KAAK,CAAC;AAAA,IACrC,WAAW;AAAA,MACT,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,MAC3D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IACxC;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,MAC1D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IACxC;AAAA,EACF,IACA,CAAC;AAGL,QAAM,iBAAiB,WACnB;AAAA,IACE,YAAY,mBAAmB,MAAM,QAAQ,WAAW,KAAK,KAAK,MAAM,QAAQ,WAAW,KAAK;AAAA,yCAC7D,aAAa,IAAI,KAAK,aAAa,KAAK;AAAA,IAC3E,QAAQ,GAAG,IAAI,OAAO,CAAC,CAAC;AAAA,IACxB,WAAW;AAAA,MACT,YAAY,mBAAmB,MAAM,QAAQ,WAAW,KAAK,KAAK,MAAM,QAAQ,WAAW,KAAK;AAAA,2CAC7D,aAAa,IAAI,KAAK,aAAa,IAAI;AAAA,IAC5E;AAAA,EACF,IACA,CAAC;AAGL,QAAM,aAAa,OACf;AAAA,IACE,WAAW,GAAG,cAAc,KAAK,CAAC;AAAA,IAClC,WAAW,OAAO,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,aAAa,MAAM,GAAG,CAAC;AAAA,EACnE,IACA,CAAC;AAEH,SAAO,EAAE,GAAG,aAAa,GAAG,gBAAgB,GAAG,WAAW;AAC5D;","names":[]}

package/dist/{chunk-PYIASGI7.js → chunk-4RWPGWJW.js}

@@ -2,7 +2,7 @@ import {
   glowAnimation,
   gradientShiftAnimation,
   pulseAnimation
-} from "./chunk-D2HKCPEH.js";
+} from "./chunk-6LOGBWLG.js";
 import {
   absoluteInk,
   controlNeutral,
@@ -41,24 +41,24 @@ var getColorFromTheme = (theme, color) => {
   };
 };
 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 }
+  xs: { heightPx: 4, thumbSizePx: 16, markHeightPx: 8 },
+  sm: { heightPx: 6, thumbSizePx: 18, markHeightPx: 10 },
+  md: { heightPx: 8, thumbSizePx: 20, markHeightPx: 12 },
+  lg: { heightPx: 10, thumbSizePx: 24, markHeightPx: 14 },
+  xl: { heightPx: 12, thumbSizePx: 28, markHeightPx: 16 }
 };
 var LABEL_SCALE = {
-  xs: { fontPx: 10, box: 28, markFont: 10.4 },
-  sm: { fontPx: 11, box: 30, markFont: 11.2 }
+  xs: { fontPx: 10, boxPx: 28, markFont: 10.4 },
+  sm: { fontPx: 11, boxPx: 30, markFont: 11.2 }
 };
-var LABEL_DEFAULT = { fontPx: 12, box: 32, markFont: 12 };
+var LABEL_DEFAULT = { fontPx: 12, boxPx: 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,
+    height: rem(theme, geometry.heightPx),
+    borderRadius: rem(theme, geometry.heightPx / 2),
     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
     position: "relative",
     overflow: "hidden",
@@ -82,12 +82,12 @@ var trackPart = ({ theme, flags, palette, geometry }) => {
       }
     },
     ...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)}`
+      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+      boxShadow: `0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.6)}, inset 0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.2)}`
     },
     ...glass && {
       backgroundColor: alpha(palette.main, 0.8),
-      backdropFilter: "blur(10px)",
+      backdropFilter: `blur(${rem(theme, 10)})`,
       border: `1px solid ${alpha(palette.light || palette.main, 0.3)}`
     }
   };
@@ -95,12 +95,12 @@ var trackPart = ({ theme, flags, palette, geometry }) => {
 var railPart = ({ theme, flags, geometry }) => ({
   color: alpha(theme.palette.action.disabled, 0.3),
   opacity: 1,
-  height: geometry.height,
-  borderRadius: geometry.height / 2,
+  height: rem(theme, geometry.heightPx),
+  borderRadius: rem(theme, geometry.heightPx / 2),
   transition: "all 0.3s ease",
   ...flags.glass && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(20px)",
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
   },
   ...flags.customVariant === "gradient" && {
@@ -113,10 +113,10 @@ var railPart = ({ theme, flags, geometry }) => ({
 var thumbPart = ({ theme, flags, palette, geometry }) => {
   const { gradient, glow, glass } = flags;
   return {
-    height: geometry.thumbSize,
-    width: geometry.thumbSize,
+    height: rem(theme, geometry.thumbSizePx),
+    width: rem(theme, geometry.thumbSizePx),
     backgroundColor: gradient ? palette.main : absoluteInk(theme).white,
-    border: `2px solid ${palette.main}`,
+    border: `${rem(theme, 2)} 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",
@@ -134,15 +134,15 @@ var thumbPart = ({ theme, flags, palette, geometry }) => {
       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)}`,
+      boxShadow: glow ? `${theme.shadows[4]}, 0 0 ${rem(theme, 20)} ${alpha(palette.main, 0.6)}, 0 0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.15)}` : `${theme.shadows[4]}, 0 0 0 ${rem(theme, 8)} ${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)}`
+      backdropFilter: `blur(${rem(theme, 10)})`,
+      border: `${rem(theme, 2)} solid ${alpha(palette.main, 0.8)}`
     },
     ...gradient && {
       background: `linear-gradient(135deg, ${palette.light}, ${palette.main})`,
@@ -167,16 +167,16 @@ var valueLabelPart = ({ theme, flags, palette }) => {
     lineHeight: 1.2,
     fontSize: rem(theme, scale.fontPx),
     padding: 0,
-    width: scale.box,
-    height: scale.box,
-    borderRadius: gradient ? "8px" : "50% 50% 50% 0",
+    width: rem(theme, scale.boxPx),
+    height: rem(theme, scale.boxPx),
+    borderRadius: gradient ? rem(theme, 8) : "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",
+    backdropFilter: glass ? `blur(${rem(theme, 10)})` : "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)}`,
+    boxShadow: `${theme.shadows[2]}, 0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.2)}`,
     "&:before": { display: "none" },
     "&.MuiSlider-valueLabelOpen": { transform: bubbleTransform.shown },
     "& > *": { transform: gradient ? "none" : "rotate(45deg)", fontWeight: 600 }
@@ -185,21 +185,21 @@ var valueLabelPart = ({ theme, flags, palette }) => {
 var markPart = ({ theme, flags, palette, geometry }) => {
   const { gradient, glow, customVariant } = flags;
   const isMarksVariant = customVariant === "marks";
-  const { markHeight, height } = geometry;
+  const { markHeightPx, heightPx } = geometry;
   return {
     backgroundColor: alpha(theme.palette.action.disabled, 0.5),
-    height: markHeight,
-    width: isMarksVariant ? 3 : 2,
+    height: rem(theme, markHeightPx),
+    width: rem(theme, isMarksVariant ? 3 : 2),
     // Centred on the rail rather than hanging below it.
-    marginTop: -(markHeight - height) / 2,
-    borderRadius: 1,
+    marginTop: rem(theme, -(markHeightPx - heightPx) / 2),
+    borderRadius: rem(theme, 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)}` }
+      width: rem(theme, isMarksVariant ? 4 : 2),
+      height: rem(theme, markHeightPx + 2),
+      marginTop: rem(theme, -(markHeightPx + 2 - heightPx) / 2),
+      ...glow && { boxShadow: `0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.5)}` }
     }
   };
 };
@@ -221,7 +221,7 @@ var sliderSx = (theme, flags) => {
   const input = { theme, flags, palette, geometry };
   return {
     color: palette.main,
-    height: geometry.height,
+    height: rem(theme, geometry.heightPx),
     "& .MuiSlider-track": trackPart(input),
     "& .MuiSlider-rail": railPart(input),
     "& .MuiSlider-thumb": thumbPart(input),
@@ -234,4 +234,4 @@ var sliderSx = (theme, flags) => {
 export {
   sliderSx
 };
-//# sourceMappingURL=chunk-PYIASGI7.js.map
+//# sourceMappingURL=chunk-4RWPGWJW.js.map

package/dist/chunk-4RWPGWJW.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\n/** Design px, converted through the type scale where each is read. */\ninterface Geometry {\n  heightPx: number;\n  thumbSizePx: number;\n  markHeightPx: number;\n}\n\nconst SIZES: Record<SizeKey, Geometry> = {\n  xs: { heightPx: 4, thumbSizePx: 16, markHeightPx: 8 },\n  sm: { heightPx: 6, thumbSizePx: 18, markHeightPx: 10 },\n  md: { heightPx: 8, thumbSizePx: 20, markHeightPx: 12 },\n  lg: { heightPx: 10, thumbSizePx: 24, markHeightPx: 14 },\n  xl: { heightPx: 12, thumbSizePx: 28, markHeightPx: 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; boxPx: number; markFont: number }> = {\n  xs: { fontPx: 10, boxPx: 28, markFont: 10.4 },\n  sm: { fontPx: 11, boxPx: 30, markFont: 11.2 },\n};\nconst LABEL_DEFAULT = { fontPx: 12, boxPx: 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: rem(theme, geometry.heightPx),\n    borderRadius: rem(theme, geometry.heightPx / 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(theme)} 2s ease-in-out infinite`,\n      boxShadow: `0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.6)}, inset 0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.2)}`,\n    }),\n    ...(glass && {\n      backgroundColor: alpha(palette.main, 0.8),\n      backdropFilter: `blur(${rem(theme, 10)})`,\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: rem(theme, geometry.heightPx),\n  borderRadius: rem(theme, geometry.heightPx / 2),\n  transition: 'all 0.3s ease',\n  ...(flags.glass && {\n    backgroundColor: 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  ...(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: rem(theme, geometry.thumbSizePx),\n    width: rem(theme, geometry.thumbSizePx),\n    backgroundColor: gradient ? palette.main : absoluteInk(theme).white,\n    border: `${rem(theme, 2)} 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 ${rem(theme, 20)} ${alpha(palette.main, 0.6)}, 0 0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.15)}`\n        : `${theme.shadows[4]}, 0 0 0 ${rem(theme, 8)} ${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(${rem(theme, 10)})`,\n      border: `${rem(theme, 2)} 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: rem(theme, scale.boxPx),\n    height: rem(theme, scale.boxPx),\n    borderRadius: gradient ? rem(theme, 8) : '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(${rem(theme, 10)})` : '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 ${rem(theme, 10)} ${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 { markHeightPx, heightPx } = geometry;\n\n  return {\n    backgroundColor: alpha(theme.palette.action.disabled, 0.5),\n    height: rem(theme, markHeightPx),\n    width: rem(theme, isMarksVariant ? 3 : 2),\n    // Centred on the rail rather than hanging below it.\n    marginTop: rem(theme, -(markHeightPx - heightPx) / 2),\n    borderRadius: rem(theme, 1),\n    transition: 'all 0.3s ease',\n    '&.MuiSlider-markActive': {\n      backgroundColor: gradient ? palette.light : palette.main,\n      width: rem(theme, isMarksVariant ? 4 : 2),\n      height: rem(theme, markHeightPx + 2),\n      marginTop: rem(theme, -(markHeightPx + 2 - heightPx) / 2),\n      ...(glow && { boxShadow: `0 0 ${rem(theme, 8)} ${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: rem(theme, geometry.heightPx),\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":"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","names":[]}

package/dist/chunk-4T6UIYJB.js

@@ -0,0 +1,77 @@
+import {
+  AddressTextField
+} from "./chunk-RDCHT2WN.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/AddressAutocomplete/AddressInputField.tsx
+import CurrentLocationIcon from "@mui/icons-material/MyLocation";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CurrentLocationButton = ({ disabled, onClick, currentLocationLabel }) => /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    edge: "end",
+    onClick,
+    size: "small",
+    title: currentLocationLabel,
+    disabled,
+    "data-testid": "address-current-location-button",
+    children: /* @__PURE__ */ jsx(CurrentLocationIcon, {})
+  }
+) });
+var AddressInputField = ({
+  copy,
+  params,
+  addressVariant,
+  label,
+  placeholder,
+  icon,
+  error,
+  helperText,
+  required,
+  disabled,
+  loading,
+  showCurrentLocation,
+  onGetCurrentLocation
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    AddressTextField,
+    {
+      ...params,
+      addressVariant,
+      label,
+      placeholder,
+      error,
+      helperText,
+      required,
+      InputProps: {
+        ...params.InputProps,
+        startAdornment: icon && /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: icon }),
+        endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+          loading && /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: rem(theme, 20), "data-testid": "address-loading" }),
+          showCurrentLocation && /* @__PURE__ */ jsx(
+            CurrentLocationButton,
+            {
+              disabled,
+              onClick: onGetCurrentLocation,
+              currentLocationLabel: copy.useCurrentLocation
+            }
+          ),
+          params.InputProps.endAdornment
+        ] })
+      },
+      inputProps: { ...params.inputProps, "data-testid": "address-input" }
+    }
+  );
+};
+
+export {
+  AddressInputField
+};
+//# sourceMappingURL=chunk-4T6UIYJB.js.map

package/dist/chunk-4T6UIYJB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressInputField.tsx"],"sourcesContent":["import CurrentLocationIcon from '@mui/icons-material/MyLocation';\nimport type { AutocompleteRenderInputParams } from '@mui/material/Autocomplete/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nimport type { AddressAutocompleteProps } from './AddressAutocomplete.types';\nimport { AddressTextField } from './AddressTextField';\n\nimport { rem } from '../../../tokens/relative';\n\nconst CurrentLocationButton: FC<{\n  disabled: boolean;\n  onClick: () => void;\n  currentLocationLabel: string;\n}> = ({ disabled, onClick, currentLocationLabel }) => (\n  <InputAdornment position=\"end\">\n    <IconButton\n      edge=\"end\"\n      onClick={onClick}\n      size=\"small\"\n      title={currentLocationLabel}\n      disabled={disabled}\n      data-testid=\"address-current-location-button\"\n    >\n      <CurrentLocationIcon />\n    </IconButton>\n  </InputAdornment>\n);\n\nexport interface AddressInputFieldProps {\n  copy: AddressAutocompleteProps['copy'];\n  params: AutocompleteRenderInputParams;\n  addressVariant: AddressAutocompleteProps['variant'];\n  label?: string;\n  placeholder?: string;\n  icon?: ReactNode;\n  error: boolean;\n  helperText?: string;\n  required: boolean;\n  disabled: boolean;\n  loading: boolean;\n  showCurrentLocation: boolean;\n  onGetCurrentLocation: () => void;\n}\n\nexport const AddressInputField: FC<AddressInputFieldProps> = ({\n  copy,\n  params,\n  addressVariant,\n  label,\n  placeholder,\n  icon,\n  error,\n  helperText,\n  required,\n  disabled,\n  loading,\n  showCurrentLocation,\n  onGetCurrentLocation,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <AddressTextField\n      {...params}\n      addressVariant={addressVariant}\n      label={label}\n      placeholder={placeholder}\n      error={error}\n      helperText={helperText}\n      required={required}\n      InputProps={{\n        ...params.InputProps,\n        startAdornment: icon && <InputAdornment position=\"start\">{icon}</InputAdornment>,\n        endAdornment: (\n          <>\n            {loading && <CircularProgress color=\"inherit\" size={rem(theme, 20)} data-testid=\"address-loading\" />}\n            {showCurrentLocation && (\n              <CurrentLocationButton\n                disabled={disabled}\n                onClick={onGetCurrentLocation}\n                currentLocationLabel={copy.useCurrentLocation}\n              />\n            )}\n            {params.InputProps.endAdornment}\n          </>\n        ),\n      }}\n      inputProps={{ ...params.inputProps, 'data-testid': 'address-input' }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAAA,OAAO,yBAAyB;AAEhC,OAAO,sBAAsB;AAC7B,OAAO,gBAAgB;AACvB,OAAO,oBAAoB;AAC3B,SAAS,gBAAgB;AAuBnB,SAmDI,UAnDJ,KAmDI,YAnDJ;AAdN,IAAM,wBAID,CAAC,EAAE,UAAU,SAAS,qBAAqB,MAC9C,oBAAC,kBAAe,UAAS,OACvB;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,MAAK;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA,eAAY;AAAA,IAEZ,8BAAC,uBAAoB;AAAA;AACvB,GACF;AAmBK,IAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,QACV,GAAG,OAAO;AAAA,QACV,gBAAgB,QAAQ,oBAAC,kBAAe,UAAS,SAAS,gBAAK;AAAA,QAC/D,cACE,iCACG;AAAA,qBAAW,oBAAC,oBAAiB,OAAM,WAAU,MAAM,IAAI,OAAO,EAAE,GAAG,eAAY,mBAAkB;AAAA,UACjG,uBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,sBAAsB,KAAK;AAAA;AAAA,UAC7B;AAAA,UAED,OAAO,WAAW;AAAA,WACrB;AAAA,MAEJ;AAAA,MACA,YAAY,EAAE,GAAG,OAAO,YAAY,eAAe,gBAAgB;AAAA;AAAA,EACrE;AAEJ;","names":[]}

package/dist/{chunk-4OEKIFBC.js → chunk-4VMFS3VJ.js}

@@ -1,9 +1,12 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/layout/ScrollArea/ScrollAreaContent.tsx
 import Box from "@mui/material/Box/index.js";
 import { useTheme } from "@mui/material/styles/index.js";
 import React from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
-var EMPTY_MIN_HEIGHT = 200;
 var EmptyState = ({ children }) => {
   const theme = useTheme();
   return /* @__PURE__ */ jsx(
@@ -14,7 +17,7 @@ var EmptyState = ({ children }) => {
         alignItems: "center",
         justifyContent: "center",
         height: "100%",
-        minHeight: EMPTY_MIN_HEIGHT,
+        minHeight: rem(theme, 200),
         color: theme.palette.text.secondary
       },
       children
@@ -47,4 +50,4 @@ var ScrollAreaContent = ({
 export {
   ScrollAreaContent
 };
-//# sourceMappingURL=chunk-4OEKIFBC.js.map
+//# sourceMappingURL=chunk-4VMFS3VJ.js.map

package/dist/chunk-4VMFS3VJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ScrollArea/ScrollAreaContent.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nconst EmptyState: FC<{ children: ReactNode }> = ({ children }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '100%',\n        minHeight: rem(theme, 200),\n        color: theme.palette.text.secondary,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n\n// VirtualList and VirtualGrid scroll themselves by default. When one is nested\n// here that would mean two scrollers, so they are handed this container instead\n// and told to stop scrolling internally. They are recognised by the props they\n// accept rather than by identity, so a wrapper around one still works.\nconst wantsScrollContainer = (props: Record<string, unknown>): boolean =>\n  'disableInternalScroll' in props || props.scrollContainerRef !== undefined;\n\nexport interface ScrollAreaContentProps {\n  children: ReactNode;\n  emptyContent?: ReactNode;\n  scrollRef: React.RefObject<HTMLDivElement | null> | ((node: HTMLDivElement | null) => void);\n  containerWidth: number;\n}\n\nexport const ScrollAreaContent: FC<ScrollAreaContentProps> = ({\n  children,\n  emptyContent,\n  scrollRef,\n  containerWidth,\n}) => {\n  if (!children && emptyContent) return <EmptyState>{emptyContent}</EmptyState>;\n\n  return (\n    <>\n      {React.Children.map(children, (child) => {\n        if (!React.isValidElement(child)) return child;\n\n        const childProps = child.props as Record<string, unknown>;\n        if (!wantsScrollContainer(childProps)) return child;\n\n        const enhanced: Record<string, unknown> = {\n          scrollContainerRef: scrollRef,\n          disableInternalScroll: true,\n        };\n\n        // Only fill in a measured width where the child is still at its default.\n        if (containerWidth > 0 && childProps.width === '100%') {\n          enhanced.width = containerWidth;\n        }\n\n        return React.cloneElement(child, enhanced);\n      })}\n    </>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AAEzB,OAAO,WAAW;AAQd,SAsCA,UAtCA;AAJJ,IAAM,aAA0C,CAAC,EAAE,SAAS,MAAM;AAChE,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACR,WAAW,IAAI,OAAO,GAAG;AAAA,QACzB,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC5B;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAMA,IAAM,uBAAuB,CAAC,UAC5B,2BAA2B,SAAS,MAAM,uBAAuB;AAS5D,IAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,CAAC,YAAY,aAAc,QAAO,oBAAC,cAAY,wBAAa;AAEhE,SACE,gCACG,gBAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,CAAC,MAAM,eAAe,KAAK,EAAG,QAAO;AAEzC,UAAM,aAAa,MAAM;AACzB,QAAI,CAAC,qBAAqB,UAAU,EAAG,QAAO;AAE9C,UAAM,WAAoC;AAAA,MACxC,oBAAoB;AAAA,MACpB,uBAAuB;AAAA,IACzB;AAGA,QAAI,iBAAiB,KAAK,WAAW,UAAU,QAAQ;AACrD,eAAS,QAAQ;AAAA,IACnB;AAEA,WAAO,MAAM,aAAa,OAAO,QAAQ;AAAA,EAC3C,CAAC,GACH;AAEJ;","names":[]}

package/dist/{chunk-HBICO6AX.js → chunk-4WNFOBTH.js}

@@ -15,18 +15,19 @@ import {
   controlNeutral
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Button/Button.styles.ts
 import { alpha, darken, keyframes, lighten } from "@mui/material/styles/index.js";
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 15px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 15)} currentColor;
     opacity: 0;
   }
   100% {
@@ -58,25 +59,26 @@ var getColorFromTheme = (theme, color) => {
 var SIZE_MAP = Object.fromEntries(
   Object.entries(BUTTON_SIZES).map(([size, m]) => [
     size,
-    { padding: `${m.paddingVertical}px ${m.paddingHorizontal}px`, fontPx: m.fontSize }
+    { paddingYPx: m.paddingVertical, paddingXPx: m.paddingHorizontal, fontPx: m.fontSize }
   ])
 );
 var DEFAULT_SIZE = SIZE_MAP.md;
 var sizeOf = (size) => SIZE_MAP[size] ?? DEFAULT_SIZE;
-var ICON_ONLY_PADDING2 = Object.fromEntries(
-  Object.entries(ICON_ONLY_PADDING).map(([size, padding]) => [size, `${padding}px`])
-);
+var iconOnlyPadding = (theme, size) => {
+  const bySize = ICON_ONLY_PADDING;
+  return rem(theme, bySize[size] ?? ICON_ONLY_PADDING.md);
+};
 var iconOnlySize = (theme, size) => ({
   minWidth: 0,
-  padding: ICON_ONLY_PADDING2[size] ?? ICON_ONLY_PADDING2.md,
+  padding: iconOnlyPadding(theme, size),
   fontSize: rem(theme, sizeOf(size).fontPx),
   "& .MuiButton-startIcon, & .MuiButton-endIcon": { margin: 0 }
 });
 var buttonSize = (size, iconOnly) => (theme) => {
   const height = fieldHeight(theme, asFieldSize(size));
   if (iconOnly) return { ...iconOnlySize(theme, size), padding: 0, minWidth: height, minHeight: height };
-  const { padding, fontPx } = sizeOf(size);
-  return { padding, fontSize: rem(theme, fontPx), minHeight: height, paddingTop: 0, paddingBottom: 0 };
+  const { paddingYPx, paddingXPx, fontPx } = sizeOf(size);
+  return { padding: rems(theme, paddingYPx, paddingXPx), fontSize: rem(theme, fontPx), minHeight: height, paddingTop: 0, paddingBottom: 0 };
 };
 var iconAlignmentStyles = (theme) => ({
   "& .MuiButton-startIcon, & .MuiButton-endIcon": {
@@ -119,7 +121,7 @@ var VARIANT_STYLES = {
     color: palette.contrastText || absoluteInk(theme).white,
     "&:hover": {
       backgroundColor: palette.dark,
-      transform: "translateY(-2px)",
+      transform: `translateY(${rem(theme, -2)})`,
       boxShadow: theme.shadows[8]
     }
   }),
@@ -156,12 +158,12 @@ var VARIANT_STYLES = {
   }),
   glass: (theme, palette) => ({
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(20px)",
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
     color: palette.main,
     "&:hover": {
       backgroundColor: alpha(theme.palette.background.paper, 0.2),
-      transform: "translateY(-2px)"
+      transform: `translateY(${rem(theme, -2)})`
     }
   }),
   gradient: (theme, palette, color) => ({
@@ -169,22 +171,22 @@ var VARIANT_STYLES = {
     color: gradientInk(theme, color, palette),
     "&:hover": {
       filter: "brightness(1.1)",
-      transform: "translateY(-2px)",
+      transform: `translateY(${rem(theme, -2)})`,
       boxShadow: theme.shadows[12]
     }
   })
 };
 var buttonVariantStyles = (theme, variant, palette, color) => VARIANT_STYLES[variant ?? ""]?.(theme, palette, color) ?? {};
-var glowStyles = (palette) => ({
-  boxShadow: `0 0 20px 5px ${alpha(palette.main, 0.6)}, 0 0 40px 10px ${alpha(palette.main, 0.3)} !important`,
+var glowStyles = (theme, palette) => ({
+  boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(palette.main, 0.6)}, ${rems(theme, 0, 0, 40, 10)} ${alpha(palette.main, 0.3)} !important`,
   filter: "brightness(1.05)",
   "&:hover": {
-    boxShadow: `0 0 25px 8px ${alpha(palette.main, 0.7)}, 0 0 50px 15px ${alpha(palette.main, 0.4)} !important`,
+    boxShadow: `${rems(theme, 0, 0, 25, 8)} ${alpha(palette.main, 0.7)}, ${rems(theme, 0, 0, 50, 15)} ${alpha(palette.main, 0.4)} !important`,
     filter: "brightness(1.1)",
-    transform: "translateY(-2px) scale(1.02)"
+    transform: `translateY(${rem(theme, -2)}) scale(1.02)`
   }
 });
-var pulseStyles = (palette) => ({
+var pulseStyles = (theme, palette) => ({
   position: "relative",
   overflow: "visible",
   "&::after": {
@@ -198,14 +200,14 @@ var pulseStyles = (palette) => ({
     transform: "translate(-50%, -50%)",
     backgroundColor: palette.main,
     opacity: 0.3,
-    animation: `${pulseAnimation} 2s infinite`,
+    animation: `${pulseAnimation(theme)} 2s infinite`,
     pointerEvents: "none",
     zIndex: -1
   }
 });
-var buttonEmphasisStyles = (palette, glow, pulse) => ({
-  ...glow ? glowStyles(palette) : {},
-  ...pulse ? pulseStyles(palette) : {}
+var buttonEmphasisStyles = (theme, palette, glow, pulse) => ({
+  ...glow ? glowStyles(theme, palette) : {},
+  ...pulse ? pulseStyles(theme, palette) : {}
 });
 
 export {
@@ -215,4 +217,4 @@ export {
   buttonVariantStyles,
   buttonEmphasisStyles
 };
-//# sourceMappingURL=chunk-HBICO6AX.js.map
+//# sourceMappingURL=chunk-4WNFOBTH.js.map

package/dist/chunk-4WNFOBTH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Button/Button.styles.ts"],"sourcesContent":["import { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { BUTTON_SIZES, ICON_ONLY_PADDING as ICON_ONLY_PADDING_PX } from './Button.metrics';\nimport { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';\nimport { absoluteInk, controlNeutral } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\nimport { inkOver } from '../../../tokens/theme';\n\n// The pulse ring, its spread through the theme's type scale.\nconst pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 15)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\ninterface ColorPalette {\n  main: string;\n  dark: string;\n  light: string;\n  contrastText: string;\n}\n\nconst shade = (\n  palette: ColorPalette | undefined,\n  key: 'dark' | 'light',\n  fallback: ColorPalette,\n): string => palette?.[key] || palette?.main || fallback[key];\n\n/** `neutral` has no MUI palette entry, so its four shades come from grey. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\n\nexport const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') return neutralPalette(theme);\n\n  const colorMap: Record<string, ColorPalette> = {\n    primary: theme.palette.primary as ColorPalette,\n    secondary: theme.palette.secondary as ColorPalette,\n    success: theme.palette.success as ColorPalette,\n    warning: theme.palette.warning as ColorPalette,\n    info: theme.palette.info as ColorPalette,\n    danger: theme.palette.error as ColorPalette,\n  };\n\n  const fallback = theme.palette.primary as ColorPalette;\n  const palette = colorMap[color] || fallback;\n\n  // Ensure palette has required properties\n  return {\n    main: palette?.main || fallback.main,\n    dark: shade(palette, 'dark', fallback),\n    light: shade(palette, 'light', fallback),\n    contrastText: palette?.contrastText || absoluteInk(theme).white,\n  };\n};\n\n/** A size's padding and its type in design px, read through the type scale. */\ninterface WebButtonSize {\n  paddingYPx: number;\n  paddingXPx: number;\n  fontPx: number;\n}\n\n// Derived from `Button.metrics.ts`, which the native `Button` reads too — one\n// table, so a size cannot differ between the renderers.\nconst SIZE_MAP: Record<string, WebButtonSize> = Object.fromEntries(\n  Object.entries(BUTTON_SIZES).map(([size, m]) => [\n    size,\n    { paddingYPx: m.paddingVertical, paddingXPx: m.paddingHorizontal, fontPx: m.fontSize },\n  ]),\n);\n\n/** What an unrecognised size falls back to, named so indexing can never be undefined. */\nconst DEFAULT_SIZE: WebButtonSize = SIZE_MAP.md as WebButtonSize;\n\nconst sizeOf = (size: string): WebButtonSize => SIZE_MAP[size] ?? DEFAULT_SIZE;\n\n/**\n * A BUTTON THAT IS ONLY AN ICON IS SQUARE.\n *\n * MUI puts a 64px `min-width` on every button, which is right for a label and\n * wrong for a glyph: three dots in a 64px slab reads as a button that failed to\n * load its text, and at the end of a dense row it claims space the row needs.\n * The horizontal padding goes too — a square of padding round a square glyph —\n * and so does the gap MUI reserves beside a start/end icon, since there is\n * nothing on the other side of it.\n *\n * Derived, not declared: a button with an `icon` and no children can only be an\n * icon button, so no consumer has to opt in and none can forget to.\n */\nconst iconOnlyPadding = (theme: Theme, size: string): string => {\n  const bySize: Record<string, number> = ICON_ONLY_PADDING_PX;\n  return rem(theme, bySize[size] ?? ICON_ONLY_PADDING_PX.md);\n};\n\nconst iconOnlySize = (theme: Theme, size: string): CSSObject => ({\n  minWidth: 0,\n  padding: iconOnlyPadding(theme, size),\n  fontSize: rem(theme, sizeOf(size).fontPx),\n  '& .MuiButton-startIcon, & .MuiButton-endIcon': { margin: 0 },\n});\n\n/**\n * The size styles for a button, square when it carries nothing but an icon.\n *\n * The HEIGHT is the theme's field height for the size (`tokens/field-height`),\n * so a button stands level with the field beside it: the vertical padding goes\n * and the label is centred in a box at least that tall — a label that wraps\n * still grows it. An icon-only button is that height on every side.\n */\nexport const buttonSize =\n  (size: string, iconOnly: boolean) =>\n  (theme: Theme): CSSObject => {\n    const height = fieldHeight(theme, asFieldSize(size));\n    if (iconOnly) return { ...iconOnlySize(theme, size), padding: 0, minWidth: height, minHeight: height };\n    const { paddingYPx, paddingXPx, fontPx } = sizeOf(size);\n    return { padding: rems(theme, paddingYPx, paddingXPx), fontSize: rem(theme, fontPx), minHeight: height, paddingTop: 0, paddingBottom: 0 };\n  };\n\n/**\n * MUI centres icons with a negative margin that fights our own padding, so the\n * flex alignment is restated here rather than fought with `!important`.\n */\nexport const iconAlignmentStyles = (theme: Theme): CSSObject => ({\n  '& .MuiButton-startIcon, & .MuiButton-endIcon': {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    margin: 0,\n    verticalAlign: 'middle',\n    '& > *': {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      lineHeight: 0,\n    },\n  },\n  '& .MuiButton-startIcon': {\n    marginRight: theme.spacing(0.5),\n  },\n  '& .MuiButton-endIcon': {\n    marginLeft: theme.spacing(0.5),\n  },\n});\n\n// Gradients run between two related hues; the named colours pick a specific pair,\n// anything else runs from its own main to its own dark.\nconst GRADIENT_PAIRS: Record<string, (theme: Theme) => [string, string]> = {\n  primary: (theme) => [theme.palette.primary.main, theme.palette.secondary.main],\n  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],\n  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],\n  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],\n  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],\n};\n\nconst gradientStops = (theme: Theme, color: string, palette: ColorPalette): [string, string] =>\n  GRADIENT_PAIRS[color]?.(theme) ?? [palette.main, palette.dark];\n\nconst gradientFor = (theme: Theme, color: string, palette: ColorPalette): string => {\n  const [from, to] = gradientStops(theme, color, palette);\n  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;\n};\n\n/**\n * The label colour for `gradient`, which used to be `#fff` outright (FUT-1924).\n *\n * Every other filled variant reads `palette.contrastText`, derived from `main`\n * — so a white-labelled host handing the library a pale brand got dark ink on\n * its solid buttons and white ink on its gradient one. That store had exactly\n * one button in the library whose label it could not read, in LIGHT mode,\n * before dark mode existed anywhere.\n *\n * `contrastText` is still not the right thing to read, and that is why this\n * goes through {@link inkOver}: a gradient is TWO fills, the named pairs run\n * light-to-dark, and an ink chosen against `main` says nothing about the end\n * the gradient actually reaches. Both stops go in, and the ink has to survive\n * the worse of them.\n */\nconst gradientInk = (theme: Theme, color: string, palette: ColorPalette): string =>\n  inkOver(gradientStops(theme, color, palette), palette.contrastText || absoluteInk(theme).white);\n\n/**\n * The label colour for the two variants that paint no background of their own.\n *\n * `ghost` and `text` used `palette.main` directly, which is the same mistake\n * the Alert made with its body text: a palette's `main` is chosen to sit UNDER\n * white — it is the fill of a solid button — and it is not chosen to be read AS\n * text. `#6366F1`, the default primary, is 3.6:1 on white and worse on any\n * tinted surface, so a \"Cancelar\" or an \"Agora não\" placed on a coloured panel\n * turned into a smudge. That is precisely where these two variants belong: they\n * exist to be the quiet option NEXT to a solid one, so they are the buttons\n * most likely to be sitting on something other than plain paper.\n *\n * One step darker (lighter, on a dark theme) keeps the hue the caller asked for\n * and buys the contrast back. `main` still drives the hover wash and every\n * bordered variant, so nothing that was already legible moves.\n */\nconst quietInk = (theme: Theme, palette: ColorPalette): string =>\n  theme.palette.mode === 'dark' ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);\n\nconst VARIANT_STYLES: Record<\n  string,\n  (theme: Theme, palette: ColorPalette, color: string) => CSSObject\n> = {\n  solid: (theme, palette) => ({\n    backgroundColor: palette.main,\n    color: palette.contrastText || absoluteInk(theme).white,\n    '&:hover': {\n      backgroundColor: palette.dark,\n      transform: `translateY(${rem(theme, -2)})`,\n      boxShadow: theme.shadows[8],\n    },\n  }),\n  // A NEUTRAL outline is a field-row control (\"Mais\", \"Exibir\"), so it rests on\n  // the one field border; a coloured outline keeps its colour, which is the\n  // point of asking for one.\n  outline: (theme, palette, color) => ({\n    backgroundColor: 'transparent',\n    color: palette.main,\n    border: color === 'neutral' ? fieldBorder(theme) : `1px solid ${palette.main}`,\n    '&:hover': {\n      backgroundColor: alpha(palette.main, 0.1),\n      borderColor: palette.dark,\n    },\n  }),\n  ghost: (theme, palette) => ({\n    backgroundColor: 'transparent',\n    color: quietInk(theme, palette),\n    '&:hover': {\n      backgroundColor: alpha(palette.main, 0.1),\n    },\n  }),\n  text: (theme, palette) => ({\n    backgroundColor: 'transparent',\n    color: quietInk(theme, palette),\n    border: `none`,\n    '&:hover': {\n      backgroundColor: alpha(palette.main, 0.1),\n    },\n    '&.active': {\n      backgroundColor: alpha(palette.main, 0.1),\n      color: quietInk(theme, palette),\n    },\n  }),\n  glass: (theme, palette) => ({\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: `blur(${rem(theme, 20)})`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    color: palette.main,\n    '&:hover': {\n      backgroundColor: alpha(theme.palette.background.paper, 0.2),\n      transform: `translateY(${rem(theme, -2)})`,\n    },\n  }),\n  gradient: (theme, palette, color) => ({\n    background: gradientFor(theme, color, palette),\n    color: gradientInk(theme, color, palette),\n    '&:hover': {\n      filter: 'brightness(1.1)',\n      transform: `translateY(${rem(theme, -2)})`,\n      boxShadow: theme.shadows[12],\n    },\n  }),\n};\n\nexport const buttonVariantStyles = (\n  theme: Theme,\n  variant: string | undefined,\n  palette: ColorPalette,\n  color: string,\n): CSSObject => VARIANT_STYLES[variant ?? '']?.(theme, palette, color) ?? {};\n\n// Glow effect - applied with !important to override variant shadows\nconst glowStyles = (theme: Theme, palette: ColorPalette): CSSObject => ({\n  boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(palette.main, 0.6)}, ${rems(theme, 0, 0, 40, 10)} ${alpha(palette.main, 0.3)} !important`,\n  filter: 'brightness(1.05)',\n  '&:hover': {\n    boxShadow: `${rems(theme, 0, 0, 25, 8)} ${alpha(palette.main, 0.7)}, ${rems(theme, 0, 0, 50, 15)} ${alpha(palette.main, 0.4)} !important`,\n    filter: 'brightness(1.1)',\n    transform: `translateY(${rem(theme, -2)}) scale(1.02)`,\n  },\n});\n\n// Pulse animation using pseudo-element\nconst pulseStyles = (theme: Theme, palette: ColorPalette): CSSObject => ({\n  position: 'relative',\n  overflow: 'visible',\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: '100%',\n    height: '100%',\n    borderRadius: 'inherit',\n    transform: 'translate(-50%, -50%)',\n    backgroundColor: palette.main,\n    opacity: 0.3,\n    animation: `${pulseAnimation(theme)} 2s infinite`,\n    pointerEvents: 'none',\n    zIndex: -1,\n  },\n});\n\n/**\n * glow and pulse are independent flags. The three combinations used to be spelled\n * out one by one, but each is just the union of whichever flags are set.\n */\nexport const buttonEmphasisStyles = (\n  theme: Theme,\n  palette: ColorPalette,\n  glow?: boolean,\n  pulse?: boolean,\n): CSSObject => ({\n  ...(glow ? glowStyles(theme, palette) : {}),\n  ...(pulse ? pulseStyles(theme, palette) : {}),\n});\n"],"mappings":"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","names":[]}