@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-TQCQCW2P.js

@@ -0,0 +1,103 @@
+import {
+  absoluteInk,
+  neutralTones,
+  shadowInk,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/InteractiveTooltip/InteractiveTooltip.styles.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var pulseAnimation = keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+var SIZE_MAP = {
+  sm: { fontSize: sxRem(12), padding: (theme) => rems(theme, 4, 8) },
+  md: { fontSize: sxRem(14), padding: (theme) => rems(theme, 6, 12) },
+  lg: { fontSize: sxRem(16), padding: (theme) => rems(theme, 8, 16) }
+};
+var getSizeStyles = (size) => SIZE_MAP[size] || SIZE_MAP.md;
+var variantStyles = (theme, variant) => {
+  switch (variant) {
+    case "default":
+      return {
+        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.92),
+        color: absoluteInk(theme).white,
+        boxShadow: `${rems(theme, 0, 4, 12)} ${shadowInk(theme, 0.3)}`
+      };
+    case "dark":
+      return {
+        backgroundColor: absoluteInk(theme).black,
+        color: absoluteInk(theme).white,
+        boxShadow: `${rems(theme, 0, 6, 16)} ${shadowInk(theme, 0.5)}`,
+        border: `1px solid ${sheen(theme, 0.1)}`
+      };
+    case "light":
+      return {
+        backgroundColor: absoluteInk(theme).white,
+        color: neutralTones(theme).inverseSurface,
+        border: `1px solid ${alpha(neutralTones(theme).subtle, 0.4)}`,
+        boxShadow: `${rems(theme, 0, 4, 16)} ${shadowInk(theme, 0.15)}`
+      };
+    case "glass":
+      return {
+        backgroundColor: alpha(theme.palette.background.paper, 0.75),
+        backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+        WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+        border: `1px solid ${alpha(theme.palette.divider, 0.3)}`,
+        color: theme.palette.text.primary,
+        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.12)}`
+      };
+    default:
+      return {};
+  }
+};
+var emphasisStyles = (theme, glow, pulse) => ({
+  ...glow && {
+    boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,
+    filter: "brightness(1.05)"
+  },
+  ...pulse && {
+    animation: `${pulseAnimation} 2s infinite`
+  }
+});
+var tooltipCap = (maxWidth) => (theme) => {
+  const cap = maxWidth ?? 300;
+  return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
+};
+var arrowColor = (theme, variant) => {
+  switch (variant) {
+    case "light":
+      return absoluteInk(theme).white;
+    case "glass":
+      return alpha(theme.palette.background.paper, 0.75);
+    case "dark":
+      return absoluteInk(theme).black;
+    default:
+      return alpha(neutralTones(theme).inverseSurface, 0.92);
+  }
+};
+
+export {
+  getSizeStyles,
+  variantStyles,
+  emphasisStyles,
+  tooltipCap,
+  arrowColor
+};
+//# sourceMappingURL=chunk-TQCQCW2P.js.map

package/dist/chunk-TQCQCW2P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/InteractiveTooltip/InteractiveTooltip.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\nconst pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  70% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nconst SIZE_MAP = {\n  sm: { fontSize: sxRem(12), padding: (theme: Theme) => rems(theme, 4, 8) },\n  md: { fontSize: sxRem(14), padding: (theme: Theme) => rems(theme, 6, 12) },\n  lg: { fontSize: sxRem(16), padding: (theme: Theme) => rems(theme, 8, 16) },\n} as const;\n\nexport const getSizeStyles = (\n  size?: string,\n): { fontSize: (theme: Theme) => string; padding: (theme: Theme) => string } =>\n  SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;\n\nexport const variantStyles = (theme: Theme, variant?: string): CSSObject => {\n  switch (variant) {\n    case 'default':\n      return {\n        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.92),\n        color: absoluteInk(theme).white,\n        boxShadow: `${rems(theme, 0, 4, 12)} ${shadowInk(theme, 0.3)}`,\n      };\n    case 'dark':\n      return {\n        backgroundColor: absoluteInk(theme).black,\n        color: absoluteInk(theme).white,\n        boxShadow: `${rems(theme, 0, 6, 16)} ${shadowInk(theme, 0.5)}`,\n        border: `1px solid ${sheen(theme, 0.1)}`,\n      };\n    case 'light':\n      return {\n        backgroundColor: absoluteInk(theme).white,\n        color: neutralTones(theme).inverseSurface,\n        border: `1px solid ${alpha(neutralTones(theme).subtle, 0.4)}`,\n        boxShadow: `${rems(theme, 0, 4, 16)} ${shadowInk(theme, 0.15)}`,\n      };\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.75),\n        backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n        WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n        border: `1px solid ${alpha(theme.palette.divider, 0.3)}`,\n        color: theme.palette.text.primary,\n        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.12)}`,\n      };\n    default:\n      return {};\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.\nexport const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({\n  ...(glow && {\n    boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,\n    filter: 'brightness(1.05)',\n  }),\n  ...(pulse && {\n    animation: `${pulseAnimation} 2s infinite`,\n  }),\n});\n\n/**\n * The tooltip's cap: 300 design px unless the caller says otherwise. `sx` has\n * always read a number of 1 or less as a fraction of the parent, and that stays so.\n */\nexport const tooltipCap =\n  (maxWidth: number | undefined) =>\n  (theme: Theme): string => {\n    const cap = maxWidth ?? 300;\n    return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);\n  };\n\nexport const arrowColor = (theme: Theme, variant?: string): string => {\n  switch (variant) {\n    case 'light':\n      return absoluteInk(theme).white;\n    case 'glass':\n      return alpha(theme.palette.background.paper, 0.75);\n    case 'dark':\n      return absoluteInk(theme).black;\n    default:\n      return alpha(neutralTones(theme).inverseSurface, 0.92);\n  }\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-TRHWA74K.js

@@ -0,0 +1,175 @@
+import {
+  onMedia,
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Carousel/Carousel.slide.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SlideCaption = ({
+  title,
+  description,
+  content,
+  image
+}) => /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", zIndex: 1, textAlign: "center", p: 3 }, children: [
+  title && /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "h5",
+      sx: (theme) => ({
+        color: image ? onMedia(theme) : "text.primary",
+        textShadow: image ? `0 ${rems(theme, 2, 4)} ${shadowInk(theme, 0.5)}` : "none",
+        mb: 1
+      }),
+      children: title
+    }
+  ),
+  description && /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "body1",
+      sx: (theme) => ({
+        color: image ? onMedia(theme) : "text.secondary",
+        textShadow: image ? `0 ${rems(theme, 1, 2)} ${shadowInk(theme, 0.5)}` : "none"
+      }),
+      children: description
+    }
+  ),
+  content
+] });
+var CarouselSlide = ({
+  item,
+  index,
+  isActive,
+  variant,
+  clickable,
+  onSelect
+}) => {
+  const theme = useTheme();
+  const content = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: clickable ? "pointer" : "default",
+        position: "relative"
+      },
+      onClick: () => onSelect(item, index),
+      children: [
+        item.image && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "img",
+            src: item.image,
+            alt: item.alt || item.title,
+            sx: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              position: "absolute",
+              top: 0,
+              left: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SlideCaption,
+          {
+            title: item.title,
+            description: item.description,
+            content: item.content,
+            image: item.image
+          }
+        )
+      ]
+    }
+  );
+  if (variant === "cards") {
+    return /* @__PURE__ */ jsx(
+      Paper,
+      {
+        elevation: isActive ? 8 : 2,
+        sx: {
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          transform: isActive ? "scale(1)" : "scale(0.9)",
+          transition: theme.transitions.create(["transform", "box-shadow"])
+        },
+        children: content
+      }
+    );
+  }
+  return content;
+};
+var CarouselTrack = ({
+  items,
+  activeIndex,
+  variant,
+  animation,
+  transition: Transition,
+  clickable,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    "data-testid": "carousel-track",
+    sx: {
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      display: "flex",
+      alignItems: "center"
+    },
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      Transition,
+      {
+        in: index === activeIndex,
+        timeout: 600,
+        ...animation === "flip" && { direction: "left" },
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-testid": `carousel-slide-${index}`,
+            "data-active": index === activeIndex,
+            sx: {
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              display: index === activeIndex ? "block" : "none"
+            },
+            children: /* @__PURE__ */ jsx(
+              CarouselSlide,
+              {
+                item,
+                index,
+                isActive: index === activeIndex,
+                variant,
+                clickable,
+                onSelect
+              }
+            )
+          }
+        )
+      },
+      item.id
+    ))
+  }
+);
+
+export {
+  CarouselSlide,
+  CarouselTrack
+};
+//# sourceMappingURL=chunk-TRHWA74K.js.map

package/dist/chunk-TRHWA74K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.slide.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { CarouselItem, CarouselProps } from './Carousel.types';\nimport { onMedia, shadowInk } from '../../../tokens/ink';\nimport { rems } from '../../../tokens/relative';\n\nexport interface CarouselSlideProps {\n  item: CarouselItem;\n  index: number;\n  isActive: boolean;\n  variant: NonNullable<CarouselProps['variant']>;\n  clickable: boolean;\n  onSelect: (item: CarouselItem, index: number) => void;\n}\n\n/**\n * A slide's caption. Over an image it is white with a shadow so it stays legible\n * against whatever the photograph happens to be; on a bare surface it uses the\n * ordinary text colours.\n */\nconst SlideCaption: React.FC<Pick<CarouselItem, 'title' | 'description' | 'content' | 'image'>> = ({\n  title,\n  description,\n  content,\n  image,\n}) => (\n  <Box sx={{ position: 'relative', zIndex: 1, textAlign: 'center', p: 3 }}>\n    {title && (\n      <Typography\n        variant=\"h5\"\n        sx={(theme) => ({\n          color: image ? onMedia(theme) : 'text.primary',\n          textShadow: image ? `0 ${rems(theme, 2, 4)} ${shadowInk(theme, 0.5)}` : 'none',\n          mb: 1,\n        })}\n      >\n        {title}\n      </Typography>\n    )}\n\n    {description && (\n      <Typography\n        variant=\"body1\"\n        sx={(theme) => ({\n          color: image ? onMedia(theme) : 'text.secondary',\n          textShadow: image ? `0 ${rems(theme, 1, 2)} ${shadowInk(theme, 0.5)}` : 'none',\n        })}\n      >\n        {description}\n      </Typography>\n    )}\n\n    {content}\n  </Box>\n);\n\nexport const CarouselSlide: React.FC<CarouselSlideProps> = ({\n  item,\n  index,\n  isActive,\n  variant,\n  clickable,\n  onSelect,\n}) => {\n  const theme = useTheme();\n\n  const content = (\n    <Box\n      sx={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        alignItems: 'center',\n        cursor: clickable ? 'pointer' : 'default',\n        position: 'relative',\n      }}\n      onClick={() => onSelect(item, index)}\n    >\n      {item.image && (\n        <Box\n          component=\"img\"\n          src={item.image}\n          alt={item.alt || item.title}\n          sx={{\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n          }}\n        />\n      )}\n\n      <SlideCaption\n        title={item.title}\n        description={item.description}\n        content={item.content}\n        image={item.image}\n      />\n    </Box>\n  );\n\n  // The cards variant gives each slide its own raised surface, and lifts the\n  // active one further so the stack reads as a deck rather than a strip.\n  if (variant === 'cards') {\n    return (\n      <Paper\n        elevation={isActive ? 8 : 2}\n        sx={{\n          width: '100%',\n          height: '100%',\n          overflow: 'hidden',\n          transform: isActive ? 'scale(1)' : 'scale(0.9)',\n          transition: theme.transitions.create(['transform', 'box-shadow']),\n        }}\n      >\n        {content}\n      </Paper>\n    );\n  }\n\n  return content;\n};\n\nexport interface CarouselTrackProps {\n  items: CarouselItem[];\n  activeIndex: number;\n  variant: NonNullable<CarouselProps['variant']>;\n  animation: NonNullable<CarouselProps['animation']>;\n  transition: React.ElementType;\n  clickable: boolean;\n  onSelect: (item: CarouselItem, index: number) => void;\n}\n\n/**\n * The slides themselves. Every slide stays mounted and absolutely positioned so\n * the transition has both the outgoing and incoming one to work with; `display`\n * is what actually hides the rest.\n */\nexport const CarouselTrack: React.FC<CarouselTrackProps> = ({\n  items,\n  activeIndex,\n  variant,\n  animation,\n  transition: Transition,\n  clickable,\n  onSelect,\n}) => (\n  <Box\n    data-testid=\"carousel-track\"\n    sx={{\n      width: '100%',\n      height: '100%',\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n    }}\n  >\n    {items.map((item, index) => (\n      <Transition\n        key={item.id}\n        in={index === activeIndex}\n        timeout={600}\n        {...(animation === 'flip' && { direction: 'left' as const })}\n      >\n        <Box\n          data-testid={`carousel-slide-${index}`}\n          data-active={index === activeIndex}\n          sx={{\n            position: 'absolute',\n            width: '100%',\n            height: '100%',\n            display: index === activeIndex ? 'block' : 'none',\n          }}\n        >\n          <CarouselSlide\n            item={item}\n            index={index}\n            isActive={index === activeIndex}\n            variant={variant}\n            clickable={clickable}\n            onSelect={onSelect}\n          />\n        </Box>\n      </Transition>\n    ))}\n  </Box>\n);\n"],"mappings":"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","names":[]}

package/dist/chunk-TU5A2CV7.js

@@ -0,0 +1,242 @@
+import {
+  selectInputSize
+} from "./chunk-WYXNFH5Y.js";
+import {
+  INPUT_BORDER,
+  INPUT_GLASS,
+  INPUT_GLOW,
+  INPUT_GRADIENT,
+  INPUT_PULSE
+} from "./chunk-RNIU447I.js";
+import {
+  splitTestId
+} from "./chunk-TYJR4GOF.js";
+import {
+  asFieldSize,
+  fieldControlStyles,
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
+import {
+  absoluteInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Select/Select.tsx
+import FormControl from "@mui/material/FormControl/index.js";
+import FormHelperText from "@mui/material/FormHelperText/index.js";
+import InputLabel from "@mui/material/InputLabel/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import MuiSelect from "@mui/material/Select/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pulseAnimation = (theme) => keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 ${rem(theme, INPUT_PULSE.spread)} currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var glowStyles = (theme) => ({
+  "& .MuiOutlinedInput-root": {
+    boxShadow: `0 0 ${rem(theme, INPUT_GLOW.rest.blur)} ${alpha(theme.palette.primary.main, INPUT_GLOW.rest.alpha)}`,
+    "&.Mui-focused": {
+      boxShadow: `0 0 ${rem(theme, INPUT_GLOW.focused.blur)} ${alpha(theme.palette.primary.main, INPUT_GLOW.focused.alpha)}`
+    }
+  }
+});
+var pulseStyles = (theme, size) => ({
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "0",
+    right: "0",
+    height: fieldHeight(theme, size),
+    transform: "translateY(-50%)",
+    borderRadius: fieldRadius(theme),
+    backgroundColor: theme.palette.primary.main,
+    opacity: INPUT_PULSE.opacity,
+    animation: `${pulseAnimation(theme)} ${INPUT_PULSE.ms / 1e3}s infinite`,
+    pointerEvents: "none",
+    zIndex: -1
+  }
+});
+var glassVariant = (theme) => ({
+  backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.rest),
+  backdropFilter: `blur(${rem(theme, INPUT_GLASS.blur)})`,
+  // `SELECT_BORDER.rest` is the field hairline.
+  border: `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme)}`,
+  "& fieldset": { border: "none" },
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.hover),
+    borderColor: alpha(theme.palette.primary.main, INPUT_GLASS.hoverBorderAlpha)
+  },
+  "&.Mui-focused": {
+    backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.focused),
+    borderColor: theme.palette.primary.main,
+    boxShadow: `0 0 0 ${rem(theme, INPUT_GLASS.focusRing.width)} ${alpha(theme.palette.primary.main, INPUT_GLASS.focusRing.alpha)}`
+  }
+});
+var gradientFill = (theme, strength) => `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, strength)}, ${alpha(theme.palette.secondary.main, strength)})`;
+var gradientVariant = (theme) => ({
+  background: gradientFill(theme, INPUT_GRADIENT.fill.rest),
+  border: `${rem(theme, INPUT_GRADIENT.borderWidth)} solid transparent`,
+  backgroundOrigin: "border-box",
+  backgroundClip: "padding-box, border-box",
+  position: "relative",
+  "& fieldset": { border: "none" },
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: "inherit",
+    background: `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+    mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
+    maskComposite: "exclude",
+    padding: rem(theme, INPUT_GRADIENT.borderWidth),
+    zIndex: -1
+  },
+  "&:hover": {
+    background: gradientFill(theme, INPUT_GRADIENT.fill.hover)
+  },
+  "&.Mui-focused": {
+    background: gradientFill(theme, INPUT_GRADIENT.fill.focused),
+    "&::before": {
+      background: `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`
+    }
+  }
+});
+var defaultVariant = (theme) => ({
+  "& fieldset": { borderColor: fieldEdge(theme) },
+  "&:hover fieldset": { borderColor: theme.palette.primary.main },
+  "&.Mui-focused fieldset": { borderColor: theme.palette.primary.main, borderWidth: rem(theme, INPUT_BORDER.focused) },
+  "&.Mui-error fieldset": { borderColor: theme.palette.error.main }
+});
+var variantStyles = (theme, variant) => {
+  if (variant === "glass") return glassVariant(theme);
+  if (variant === "gradient") return gradientVariant(theme);
+  return defaultVariant(theme);
+};
+var StyledFormControl = styled(FormControl, {
+  shouldForwardProp: (prop) => prop !== "customVariant" && prop !== "fieldSize" && prop !== "glow" && prop !== "pulse"
+})(({ theme, customVariant, fieldSize, glow, pulse }) => ({
+  position: "relative",
+  // The theme's field height for this size — the height `Input` draws for it.
+  ...fieldControlStyles(theme, fieldSize),
+  ...glow ? glowStyles(theme) : {},
+  ...pulse ? pulseStyles(theme, fieldSize) : {},
+  "& .MuiOutlinedInput-root": {
+    transition: "all 0.3s ease",
+    borderRadius: fieldRadius(theme),
+    ...variantStyles(theme, customVariant)
+  }
+}));
+function renderMenuItems(options, placeholder, dataTestId) {
+  const optionTestId = (value) => dataTestId ? `${dataTestId}-option-${value}` : `option-${value}`;
+  const items = options.map((option) => /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      value: option.value,
+      disabled: option.disabled,
+      "data-testid": optionTestId(option.value),
+      children: option.label
+    },
+    option.value
+  ));
+  if (placeholder) {
+    items.unshift(
+      /* @__PURE__ */ jsx(MenuItem, { value: "", disabled: true, children: placeholder }, "__placeholder__")
+    );
+  }
+  return items;
+}
+var formControlSize = (size) => {
+  if (size === void 0) return void 0;
+  return selectInputSize(size) === "sm" ? "small" : "medium";
+};
+var Select = React.forwardRef(
+  ({
+    // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined
+    // resolves to the default variant, MUI's medium size, and no glow/pulse —
+    // keeping this render function under the complexity budget.
+    variant,
+    options,
+    label,
+    helperText,
+    fullWidth = true,
+    size,
+    error,
+    placeholder,
+    glow,
+    pulse,
+    value,
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) => {
+    const { testId: dataTestId, rest: props } = splitTestId(rest);
+    const labelId = React.useId();
+    const helperTextId = React.useId();
+    const selectId = React.useId();
+    return /* @__PURE__ */ jsxs(
+      StyledFormControl,
+      {
+        fullWidth,
+        size: formControlSize(size),
+        error,
+        customVariant: variant,
+        fieldSize: asFieldSize(size),
+        glow,
+        pulse,
+        ref,
+        "data-testid": dataTestId,
+        children: [
+          label && /* @__PURE__ */ jsx(InputLabel, { id: labelId, htmlFor: selectId, children: label }),
+          /* @__PURE__ */ jsx(
+            MuiSelect,
+            {
+              id: selectId,
+              labelId: label ? labelId : void 0,
+              label,
+              displayEmpty: Boolean(placeholder),
+              "aria-describedby": helperText ? helperTextId : void 0,
+              "data-testid": dataTestId ? `${dataTestId}-select` : "select",
+              value: value ?? "",
+              ...props,
+              SelectDisplayProps: ariaLabel === void 0 ? void 0 : { "aria-label": ariaLabel, "aria-labelledby": void 0 },
+              children: renderMenuItems(options, placeholder, dataTestId)
+            }
+          ),
+          helperText && /* @__PURE__ */ jsx(FormHelperText, { id: helperTextId, error, children: helperText })
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+
+export {
+  Select
+};
+//# sourceMappingURL=chunk-TU5A2CV7.js.map

package/dist/chunk-TU5A2CV7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Select/Select.tsx"],"sourcesContent":["import FormControl from '@mui/material/FormControl/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport InputLabel from '@mui/material/InputLabel/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport MuiSelect from '@mui/material/Select/index.js';\nimport { alpha, type CSSObject, keyframes, styled, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport {\n  SELECT_BORDER,\n  SELECT_GLASS,\n  SELECT_GLOW,\n  SELECT_GRADIENT,\n  SELECT_PULSE,\n  selectInputSize,\n} from './Select.metrics';\nimport type { SelectProps } from './Select.types';\n\nimport { splitTestId } from '../../../platform/test-id';\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { asFieldSize, FIELD_BORDER_WIDTH, fieldControlStyles, fieldHeight } from '../../../tokens/field-height';\nimport type { SizeValue } from '../../../tokens/vocabulary';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { absoluteInk } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\n// Define pulse animation\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, SELECT_PULSE.spread)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n/** Glow ring on the outlined input, keyed off the `glow` prop. */\nconst glowStyles = (theme: Theme): CSSObject => ({\n  '& .MuiOutlinedInput-root': {\n    boxShadow: `0 0 ${rem(theme, SELECT_GLOW.rest.blur)} ${alpha(theme.palette.primary.main, SELECT_GLOW.rest.alpha)}`,\n    '&.Mui-focused': {\n      boxShadow: `0 0 ${rem(theme, SELECT_GLOW.focused.blur)} ${alpha(theme.palette.primary.main, SELECT_GLOW.focused.alpha)}`,\n    },\n  },\n});\n\n/** Pulsing halo behind the control, keyed off the `pulse` prop. */\nconst pulseStyles = (theme: Theme, size: SizeValue): CSSObject => ({\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '0',\n    right: '0',\n    height: fieldHeight(theme, size),\n    transform: 'translateY(-50%)',\n    borderRadius: fieldRadius(theme),\n    backgroundColor: theme.palette.primary.main,\n    opacity: SELECT_PULSE.opacity,\n    animation: `${pulseAnimation(theme)} ${SELECT_PULSE.ms / 1000}s infinite`,\n    pointerEvents: 'none',\n    zIndex: -1,\n  },\n});\n\n/** `glass` variant: translucent, blurred background. */\nconst glassVariant = (theme: Theme): CSSObject => ({\n  backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.rest),\n  backdropFilter: `blur(${rem(theme, SELECT_GLASS.blur)})`,\n  // `SELECT_BORDER.rest` is the field hairline.\n  border: `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme)}`,\n  '& fieldset': { border: 'none' },\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.hover),\n    borderColor: alpha(theme.palette.primary.main, SELECT_GLASS.hoverBorderAlpha),\n  },\n  '&.Mui-focused': {\n    backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.focused),\n    borderColor: theme.palette.primary.main,\n    boxShadow: `0 0 0 ${rem(theme, SELECT_GLASS.focusRing.width)} ${alpha(theme.palette.primary.main, SELECT_GLASS.focusRing.alpha)}`,\n  },\n});\n\n/** `gradient` variant: gradient fill with a masked gradient border. */\nconst gradientFill = (theme: Theme, strength: number): string =>\n  `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, strength)}, ${alpha(theme.palette.secondary.main, strength)})`;\n\nconst gradientVariant = (theme: Theme): CSSObject => ({\n  background: gradientFill(theme, SELECT_GRADIENT.fill.rest),\n  border: `${rem(theme, SELECT_GRADIENT.borderWidth)} solid transparent`,\n  backgroundOrigin: 'border-box',\n  backgroundClip: 'padding-box, border-box',\n  position: 'relative',\n  '& fieldset': { border: 'none' },\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    borderRadius: 'inherit',\n    background: `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,\n    mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,\n    maskComposite: 'exclude',\n    padding: rem(theme, SELECT_GRADIENT.borderWidth),\n    zIndex: -1,\n  },\n  '&:hover': {\n    background: gradientFill(theme, SELECT_GRADIENT.fill.hover),\n  },\n  '&.Mui-focused': {\n    background: gradientFill(theme, SELECT_GRADIENT.fill.focused),\n    '&::before': {\n      background: `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,\n    },\n  },\n});\n\n/** `default` variant: standard outlined borders with hover/focus/error states. */\nconst defaultVariant = (theme: Theme): CSSObject => ({\n  '& fieldset': { borderColor: fieldEdge(theme) },\n  '&:hover fieldset': { borderColor: theme.palette.primary.main },\n  '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: rem(theme, SELECT_BORDER.focused) },\n  '&.Mui-error fieldset': { borderColor: theme.palette.error.main },\n});\n\n/** Pick the variant style block for the outlined input. */\nconst variantStyles = (theme: Theme, variant: SelectProps['variant']): CSSObject => {\n  if (variant === 'glass') return glassVariant(theme);\n  if (variant === 'gradient') return gradientVariant(theme);\n  return defaultVariant(theme);\n};\n\nconst StyledFormControl = styled(FormControl, {\n  shouldForwardProp: (prop) =>\n    prop !== 'customVariant' && prop !== 'fieldSize' && prop !== 'glow' && prop !== 'pulse',\n})<{\n  customVariant?: SelectProps['variant'];\n  fieldSize: SizeValue;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, fieldSize, glow, pulse }) => ({\n  position: 'relative',\n  // The theme's field height for this size — the height `Input` draws for it.\n  ...fieldControlStyles(theme, fieldSize),\n  ...(glow ? glowStyles(theme) : {}),\n  ...(pulse ? pulseStyles(theme, fieldSize) : {}),\n  '& .MuiOutlinedInput-root': {\n    transition: 'all 0.3s ease',\n    borderRadius: fieldRadius(theme),\n    ...variantStyles(theme, customVariant),\n  },\n}));\n\n/**\n * Build the placeholder item plus one MenuItem per option. Returns a flat ARRAY\n * (not a Fragment): MUI `Select` enumerates its children with `React.Children`,\n * which does not descend into Fragments — a Fragment would hide every option.\n */\nfunction renderMenuItems(\n  options: SelectProps['options'],\n  placeholder: string | undefined,\n  dataTestId: string | undefined,\n): React.ReactNode[] {\n  const optionTestId = (value: string | number): string =>\n    dataTestId ? `${dataTestId}-option-${value}` : `option-${value}`;\n  const items = options.map((option) => (\n    <MenuItem\n      key={option.value}\n      value={option.value}\n      disabled={option.disabled}\n      data-testid={optionTestId(option.value)}\n    >\n      {option.label}\n    </MenuItem>\n  ));\n  if (placeholder) {\n    items.unshift(\n      <MenuItem key=\"__placeholder__\" value=\"\" disabled>\n        {placeholder}\n      </MenuItem>,\n    );\n  }\n  return items;\n}\n\n/**\n * The house scale as a FormControl size.\n *\n * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes\n * only two. This component's scale is already narrowed to `sm | md`, so the map\n * is exact rather than lossy.\n */\nconst formControlSize = (size: SelectProps['size']): 'small' | 'medium' | undefined => {\n  if (size === undefined) return undefined;\n  return selectInputSize(size) === 'sm' ? 'small' : 'medium';\n};\n\nexport const Select = React.forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined\n      // resolves to the default variant, MUI's medium size, and no glow/pulse —\n      // keeping this render function under the complexity budget.\n      variant,\n      options,\n      label,\n      helperText,\n      fullWidth = true,\n      size,\n      error,\n      placeholder,\n      glow,\n      pulse,\n      value,\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { testId: dataTestId, rest: props } = splitTestId(rest);\n    const labelId = React.useId();\n    const helperTextId = React.useId();\n    const selectId = React.useId();\n\n    return (\n      <StyledFormControl\n        fullWidth={fullWidth}\n        size={formControlSize(size)}\n        error={error}\n        customVariant={variant}\n        fieldSize={asFieldSize(size)}\n        glow={glow} pulse={pulse}\n        ref={ref}\n        data-testid={dataTestId}\n      >\n        {label && (\n          <InputLabel id={labelId} htmlFor={selectId}>\n            {label}\n          </InputLabel>\n        )}\n        <MuiSelect\n          id={selectId}\n          labelId={label ? labelId : undefined}\n          label={label}\n          displayEmpty={Boolean(placeholder)}\n          aria-describedby={helperText ? helperTextId : undefined}\n          data-testid={dataTestId ? `${dataTestId}-select` : 'select'}\n          value={value ?? ''}\n          {...props}\n          /*\n           * `role=\"combobox\"` sits on MUI's display DIV, not on the hidden\n           * native input that `{...props}` reaches — so an `aria-label` passed\n           * to this component never landed on the element carrying the role,\n           * and MUI's `aria-labelledby` then fell back to that div's OWN id.\n           * The control announced as its current value: a filter's field\n           * select read \"Status\" instead of \"Filtro 1 — campo\".\n           *\n           * Forwarding it here names the right element. The explicit\n           * `undefined` clears that self-referential `aria-labelledby`, which\n           * would otherwise win — a labelledby always beats a label in the\n           * accessible-name computation.\n           */\n          SelectDisplayProps={\n            ariaLabel === undefined\n              ? undefined\n              : { 'aria-label': ariaLabel, 'aria-labelledby': undefined }\n          }\n        >\n          {renderMenuItems(options, placeholder, dataTestId)}\n        </MuiSelect>\n        {helperText && (\n          <FormHelperText id={helperTextId} error={error}>\n            {helperText}\n          </FormHelperText>\n        )}\n      </StyledFormControl>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n"],"mappings":"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","names":[]}

package/dist/chunk-TXEN3QJ4.js

@@ -0,0 +1,64 @@
+import {
+  AddressTextField
+} from "./chunk-RDCHT2WN.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/AddressAutocomplete/AddressFallbackField.tsx
+import Alert from "@mui/material/Alert/index.js";
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AddressFallbackField = ({
+  copy,
+  variant,
+  label,
+  placeholder,
+  icon,
+  floating,
+  fullWidth,
+  mapsError
+}) => {
+  const theme = useTheme();
+  const startAdornment = icon ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: icon }) : void 0;
+  if (!mapsError) {
+    return /* @__PURE__ */ jsx(
+      AddressTextField,
+      {
+        addressVariant: variant,
+        label: floating ? void 0 : label,
+        placeholder: copy.loadingMaps,
+        disabled: true,
+        fullWidth,
+        InputProps: {
+          startAdornment,
+          endAdornment: /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: rem(theme, 20) })
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      AddressTextField,
+      {
+        addressVariant: variant,
+        label: floating ? void 0 : label,
+        placeholder,
+        error: true,
+        disabled: true,
+        fullWidth,
+        helperText: mapsError,
+        InputProps: { startAdornment }
+      }
+    ),
+    /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mt: 1 }, children: copy.mapsLoadFailed })
+  ] });
+};
+
+export {
+  AddressFallbackField
+};
+//# sourceMappingURL=chunk-TXEN3QJ4.js.map

package/dist/chunk-TXEN3QJ4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressFallbackField.tsx"],"sourcesContent":["import Alert from '@mui/material/Alert/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/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\nexport interface AddressFallbackFieldProps {\n  copy: AddressAutocompleteProps['copy'];\n  variant: AddressAutocompleteProps['variant'];\n  label?: string;\n  placeholder?: string;\n  icon?: ReactNode;\n  floating: boolean;\n  fullWidth: boolean;\n  mapsError: string | null;\n}\n\n// Stands in for the Autocomplete before Google Maps is usable: a disabled field\n// that either spins or explains why it never loaded.\nexport const AddressFallbackField: FC<AddressFallbackFieldProps> = ({\n  copy,\n  variant,\n  label,\n  placeholder,\n  icon,\n  floating,\n  fullWidth,\n  mapsError,\n}) => {\n  const theme = useTheme();\n  const startAdornment = icon ? <InputAdornment position=\"start\">{icon}</InputAdornment> : undefined;\n\n  if (!mapsError) {\n    return (\n      <AddressTextField\n        addressVariant={variant}\n        label={floating ? undefined : label}\n        placeholder={copy.loadingMaps}\n        disabled\n        fullWidth={fullWidth}\n        InputProps={{\n          startAdornment,\n          endAdornment: <CircularProgress color=\"inherit\" size={rem(theme, 20)} />,\n        }}\n      />\n    );\n  }\n\n  return (\n    <Box>\n      <AddressTextField\n        addressVariant={variant}\n        label={floating ? undefined : label}\n        placeholder={placeholder}\n        error\n        disabled\n        fullWidth={fullWidth}\n        helperText={mapsError}\n        InputProps={{ startAdornment }}\n      />\n      <Alert severity=\"error\" sx={{ mt: 1 }}>\n        {copy.mapsLoadFailed}\n      </Alert>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAAA,OAAO,WAAW;AAClB,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,SAAS,gBAAgB;AAiCO,cAmB5B,YAnB4B;AAXzB,IAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,iBAAiB,OAAO,oBAAC,kBAAe,UAAS,SAAS,gBAAK,IAAoB;AAEzF,MAAI,CAAC,WAAW;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,gBAAgB;AAAA,QAChB,OAAO,WAAW,SAAY;AAAA,QAC9B,aAAa,KAAK;AAAA,QAClB,UAAQ;AAAA,QACR;AAAA,QACA,YAAY;AAAA,UACV;AAAA,UACA,cAAc,oBAAC,oBAAiB,OAAM,WAAU,MAAM,IAAI,OAAO,EAAE,GAAG;AAAA,QACxE;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE,qBAAC,OACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,gBAAgB;AAAA,QAChB,OAAO,WAAW,SAAY;AAAA,QAC9B;AAAA,QACA,OAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA,QACA,YAAY;AAAA,QACZ,YAAY,EAAE,eAAe;AAAA;AAAA,IAC/B;AAAA,IACA,oBAAC,SAAM,UAAS,SAAQ,IAAI,EAAE,IAAI,EAAE,GACjC,eAAK,gBACR;AAAA,KACF;AAEJ;","names":[]}