@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-REQAKZ64.js

@@ -0,0 +1,240 @@
+import {
+  barEmphasisStyles,
+  barVariantStyles,
+  circularEmphasisStyles,
+  getColorFromTheme,
+  getSizeStyles,
+  pulseAnimation
+} from "./chunk-UBWYHYDR.js";
+import {
+  progressLabelText,
+  resolveProgressProps
+} from "./chunk-5JEOLUWJ.js";
+
+// src/components/data-display/Progress/Progress.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import LinearProgress from "@mui/material/LinearProgress/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledLinearProgress = styled(LinearProgress, {
+  shouldForwardProp: (prop) => !["customVariant", "customSize", "customColor", "glow", "pulse"].includes(prop)
+})(({ theme, customVariant, customSize, customColor = "primary", glow, pulse }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const sizeStyles = getSizeStyles(customSize);
+  return {
+    height: sizeStyles.height,
+    borderRadius: sizeStyles.height / 2,
+    backgroundColor: alpha(colorPalette.main, 0.1),
+    "& .MuiLinearProgress-bar": {
+      borderRadius: "inherit",
+      transition: "all 0.3s ease",
+      ...barVariantStyles(customVariant, colorPalette),
+      ...barEmphasisStyles(colorPalette, glow, pulse)
+    }
+  };
+});
+var StyledCircularProgress = styled(CircularProgress, {
+  shouldForwardProp: (prop) => !["customColor", "glow", "pulse"].includes(prop)
+})(({ theme, customColor = "primary", glow, pulse }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    color: colorPalette.main,
+    ...circularEmphasisStyles(colorPalette, glow, pulse)
+  };
+});
+var SegmentedProgress = ({ value = 0, segments, color, size, glow, pulse, dataTestId }) => {
+  const theme = useTheme();
+  const colorPalette = getColorFromTheme(theme, color);
+  const sizeStyles = getSizeStyles(size);
+  const filledSegments = Math.floor(value / 100 * segments);
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5, width: "100%" }, "data-testid": `${dataTestId}-segments-container`, children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": `${dataTestId}-segment-${index}`,
+      sx: {
+        flex: 1,
+        height: sizeStyles.height,
+        borderRadius: sizeStyles.height / 2,
+        backgroundColor: index < filledSegments ? colorPalette.main : alpha(colorPalette.main, 0.1),
+        transition: "all 0.3s ease",
+        ...glow && index < filledSegments && {
+          boxShadow: `0 0 6px 1px ${alpha(colorPalette.main, 0.4)}`
+        },
+        ...pulse && index < filledSegments && {
+          animation: `${pulseAnimation} 2s infinite`
+        }
+      }
+    },
+    index
+  )) });
+};
+var ProgressLabel = ({
+  size,
+  label,
+  testId
+}) => /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: "caption",
+    sx: {
+      display: "block",
+      textAlign: "center",
+      mt: 1,
+      fontSize: getSizeStyles(size).fontSize,
+      fontWeight: 600
+    },
+    "data-testid": testId,
+    children: label
+  }
+);
+var CircularView = React.forwardRef(
+  ({
+    size,
+    color,
+    glow,
+    pulse,
+    showLabel,
+    displayValue,
+    displayLabel,
+    value,
+    dataTestId,
+    thickness,
+    circularSize,
+    ...props
+  }, ref) => {
+    const sizeStyles = getSizeStyles(size);
+    return /* @__PURE__ */ jsxs(Box, { ref, sx: { position: "relative", display: "inline-flex" }, "data-testid": dataTestId, children: [
+      /* @__PURE__ */ jsx(
+        StyledCircularProgress,
+        {
+          variant: value !== void 0 ? "determinate" : "indeterminate",
+          value: displayValue,
+          size: circularSize || sizeStyles.circularSize,
+          thickness,
+          customColor: color,
+          glow,
+          pulse,
+          "data-testid": `${dataTestId}-circular`,
+          ...props
+        }
+      ),
+      showLabel && value !== void 0 && /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            position: "absolute",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              component: "div",
+              color: "text.secondary",
+              sx: { fontSize: sizeStyles.fontSize, fontWeight: 600 },
+              "data-testid": `${dataTestId}-label`,
+              children: displayLabel
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+CircularView.displayName = "ProgressCircularView";
+var SegmentedView = React.forwardRef(
+  ({ size, color, glow, pulse, showLabel, displayValue, displayLabel, dataTestId, segments, value: _value, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, sx: { width: "100%" }, "data-testid": dataTestId, ...props, children: [
+    /* @__PURE__ */ jsx(
+      SegmentedProgress,
+      {
+        value: displayValue,
+        segments,
+        color,
+        size,
+        glow,
+        pulse,
+        dataTestId
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(ProgressLabel, { size, label: displayLabel, testId: `${dataTestId}-label` })
+  ] })
+);
+SegmentedView.displayName = "ProgressSegmentedView";
+var LinearView = React.forwardRef(
+  ({ size, color, glow, pulse, showLabel, displayValue, displayLabel, value, dataTestId, variant, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, sx: { width: "100%" }, "data-testid": dataTestId, children: [
+    /* @__PURE__ */ jsx(
+      StyledLinearProgress,
+      {
+        variant: value !== void 0 ? "determinate" : "indeterminate",
+        value: displayValue,
+        customVariant: variant,
+        customSize: size,
+        customColor: color,
+        glow,
+        pulse,
+        "data-testid": `${dataTestId}-linear`,
+        ...props
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(ProgressLabel, { size, label: displayLabel, testId: `${dataTestId}-label` })
+  ] })
+);
+LinearView.displayName = "ProgressLinearView";
+var Progress = React.forwardRef(
+  (rawProps, ref) => {
+    const {
+      variant,
+      size,
+      color,
+      glow,
+      pulse,
+      showLabel,
+      label,
+      segments,
+      thickness,
+      circularSize,
+      value,
+      dataTestId,
+      testID,
+      ...props
+    } = resolveProgressProps(rawProps);
+    const displayValue = value || 0;
+    const shared = {
+      size,
+      color,
+      glow,
+      pulse,
+      showLabel,
+      displayValue,
+      displayLabel: progressLabelText(label, showLabel, displayValue),
+      value,
+      // `testID` is React Native's spelling of the same id and names the
+      // component too; `data-testid` is left in `props`, on its way to the
+      // element the caller means to address, where it has always landed.
+      dataTestId: testID ?? dataTestId,
+      ...props
+    };
+    if (variant === "circular") {
+      return /* @__PURE__ */ jsx(CircularView, { ref, ...shared, thickness, circularSize });
+    }
+    if (variant === "segmented") {
+      return /* @__PURE__ */ jsx(SegmentedView, { ref, ...shared, segments });
+    }
+    return /* @__PURE__ */ jsx(LinearView, { ref, ...shared, variant });
+  }
+);
+Progress.displayName = "Progress";
+
+export {
+  Progress
+};
+//# sourceMappingURL=chunk-REQAKZ64.js.map

package/dist/chunk-RMCNEKBZ.js

@@ -0,0 +1,19 @@
+import {
+  withDividers
+} from "./chunk-4GGH6ZQ7.js";
+import {
+  Box
+} from "./chunk-GUW5BUK7.js";
+
+// src/components/layout/Stack/Stack.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Stack = React.forwardRef(
+  ({ direction = "column", gap = 0, divider, children, ...rest }, ref) => /* @__PURE__ */ jsx(Box, { ref, direction, gap, ...rest, children: withDividers(children, divider) })
+);
+Stack.displayName = "Stack";
+
+export {
+  Stack
+};
+//# sourceMappingURL=chunk-RMCNEKBZ.js.map

package/dist/chunk-RNIU447I.js

@@ -0,0 +1,175 @@
+import {
+  SIZE_VALUES
+} from "./chunk-7ZPUN7TV.js";
+import {
+  DEFAULT_FIELD_HEIGHT,
+  fieldHeightPx
+} from "./chunk-PZBK3F52.js";
+import {
+  alpha,
+  decomposeColor,
+  recomposeColor
+} from "./chunk-6JAIFIPW.js";
+import {
+  ABSOLUTE_INK
+} from "./chunk-N3GAFIXG.js";
+
+// src/components/form/Input/Input.metrics.ts
+var muiVariantFor = (variant) => {
+  switch (variant) {
+    case "underline":
+      return "standard";
+    case "glass":
+    case "gradient":
+      return "outlined";
+    default:
+      return variant;
+  }
+};
+var INPUT_MUI_SIZE = {
+  xs: "small",
+  sm: "small",
+  md: "small",
+  lg: "medium",
+  xl: "medium"
+};
+var INPUT_SIZE_OVERRIDES = {
+  xs: { vertical: 6, horizontal: 10 },
+  lg: { vertical: 16, horizontal: 14 },
+  xl: { vertical: 20, horizontal: 16 }
+};
+var MUI_INPUT_PADDING = {
+  outlined: {
+    small: { top: 8.5, right: 14, bottom: 8.5, left: 14 },
+    medium: { top: 16.5, right: 14, bottom: 16.5, left: 14 }
+  },
+  filled: {
+    small: { top: 21, right: 12, bottom: 4, left: 12 },
+    medium: { top: 25, right: 12, bottom: 8, left: 12 }
+  },
+  standard: {
+    small: { top: 1, right: 0, bottom: 5, left: 0 },
+    medium: { top: 4, right: 0, bottom: 5, left: 0 }
+  }
+};
+var AT_FIELD_HEIGHT = {
+  outlined: true,
+  glass: true,
+  gradient: true,
+  filled: false,
+  underline: false
+};
+function inputPadding(variant, size, fieldHeight = DEFAULT_FIELD_HEIGHT) {
+  const override = INPUT_SIZE_OVERRIDES[size];
+  if (AT_FIELD_HEIGHT[variant]) {
+    const vertical = (fieldHeightPx(fieldHeight, size) - INPUT_LINE_HEIGHT) / 2;
+    const horizontal = override?.horizontal ?? MUI_INPUT_PADDING.outlined.small.left;
+    return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };
+  }
+  if (override) {
+    return {
+      top: override.vertical,
+      right: override.horizontal,
+      bottom: override.vertical,
+      left: override.horizontal
+    };
+  }
+  return MUI_INPUT_PADDING[muiVariantFor(variant)][INPUT_MUI_SIZE[size]];
+}
+var INPUT_FONT_SIZE = 16;
+var INPUT_LINE_HEIGHT = 23;
+var PLACEHOLDER_OPACITY = { light: 0.42, dark: 0.5 };
+function placeholderInk(theme) {
+  const opacity = theme.mode === "dark" ? PLACEHOLDER_OPACITY.dark : PLACEHOLDER_OPACITY.light;
+  const { type, values } = decomposeColor(theme.palette.text.primary);
+  const [first = 0, second = 0, third = 0, own = 1] = values;
+  return recomposeColor({
+    type: type.startsWith("hsl") ? "hsla" : "rgba",
+    values: [first, second, third, own * opacity]
+  });
+}
+var INPUT_BORDER = { rest: 1, focused: 2 };
+var UNDERLINE_COLOR = {
+  light: alpha(ABSOLUTE_INK.black, 0.42),
+  dark: alpha(ABSOLUTE_INK.white, 0.7)
+};
+var INPUT_LABEL = { scale: 0.75, gap: 4 };
+var HELPER_TEXT = {
+  fontSize: 12,
+  lineHeight: 1.66,
+  marginTop: 3,
+  marginTopSmall: 4,
+  marginHorizontal: 14
+};
+var ADORNMENT_GAP = 8;
+var INPUT_LOADING = { opacity: 0.7, spinnerSize: 20 };
+var INPUT_GLOW = {
+  rest: { blur: 15, alpha: 0.3 },
+  focused: { blur: 20, alpha: 0.5 }
+};
+var INPUT_PULSE = {
+  opacity: 0.3,
+  ms: 2e3,
+  spread: 10
+};
+var FLOATING_LABEL = {
+  rest: { x: 14, y: 16 },
+  shrink: { x: 14, y: -9 },
+  scale: 0.75,
+  paddingX: 4
+};
+var INPUT_GLASS = {
+  background: { rest: 0.1, hover: 0.15, focused: 0.2 },
+  blur: 20,
+  hoverBorderAlpha: 0.3,
+  focusRing: { width: 2, alpha: 0.1 }
+};
+var INPUT_GRADIENT = {
+  angleDeg: 135,
+  fill: { rest: 0.1, hover: 0.15, focused: 0.2 },
+  borderWidth: 2
+};
+var FILLED_WASH = { rest: 0.04, hover: 0.08, focused: 0.12 };
+var sizeProps = (size) => {
+  const override = INPUT_SIZE_OVERRIDES[size];
+  return {
+    size: INPUT_MUI_SIZE[size],
+    ...override ? {
+      sx: {
+        "& .MuiInputBase-input": {
+          paddingLeft: `${override.horizontal}px`,
+          paddingRight: `${override.horizontal}px`
+        }
+      }
+    } : {}
+  };
+};
+var SIZE_MAP = Object.fromEntries(
+  SIZE_VALUES.map((size) => [size, sizeProps(size)])
+);
+
+export {
+  muiVariantFor,
+  INPUT_MUI_SIZE,
+  INPUT_SIZE_OVERRIDES,
+  MUI_INPUT_PADDING,
+  inputPadding,
+  INPUT_FONT_SIZE,
+  INPUT_LINE_HEIGHT,
+  PLACEHOLDER_OPACITY,
+  placeholderInk,
+  INPUT_BORDER,
+  UNDERLINE_COLOR,
+  INPUT_LABEL,
+  HELPER_TEXT,
+  ADORNMENT_GAP,
+  INPUT_LOADING,
+  INPUT_GLOW,
+  INPUT_PULSE,
+  FLOATING_LABEL,
+  INPUT_GLASS,
+  INPUT_GRADIENT,
+  FILLED_WASH,
+  SIZE_MAP
+};
+//# sourceMappingURL=chunk-RNIU447I.js.map

package/dist/chunk-RNIU447I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Input/Input.metrics.ts"],"sourcesContent":["import type { InputVariant } from './Input.base';\nimport { alpha, decomposeColor, recomposeColor } from '../../../tokens/color';\nimport { DEFAULT_FIELD_HEIGHT, fieldHeightPx } from '../../../tokens/field-height.core';\nimport { ABSOLUTE_INK } from '../../../tokens/ink.core';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { SIZE_VALUES, type SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Input` RENDERERS DRAW WITH.\n *\n * `Input.styles.ts` (web, emotion over MUI's `TextField`) and\n * `Input.native.tsx` (React Native) read this one table. The web turns the px\n * into the padding shorthands and rem it has always emitted; native uses the\n * numbers as they are.\n *\n * Two kinds of number live here, and the difference matters:\n *\n *  - the ones `Input.styles.ts` writes itself — the size overrides, the glow,\n *    the pulse, the glass and gradient alphas, the filled wash;\n *  - the ones MUI supplies UNDER those overrides — `OutlinedInput`'s\n *    `16.5px 14px`, `InputBase`'s 23px line box, `FormHelperText`'s 3px lift.\n *    The web never writes them, but it draws them, so a native field that\n *    wants the same box has to know them. They are MUI 6.5's own values,\n *    copied with their source named; a host that re-themes MUI's components\n *    moves the web only, which the parity ledger records.\n */\n\nexport interface InputInset {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\n/** MUI gives a text field two heights; the house scale has five. */\nexport type MuiInputSize = 'small' | 'medium';\nexport type MuiInputVariant = 'outlined' | 'filled' | 'standard';\n\n/** Our five variants map onto MUI's three; `glass` and `gradient` restyle an outline. */\nexport const muiVariantFor = (variant: InputVariant): MuiInputVariant => {\n  switch (variant) {\n    case 'underline':\n      return 'standard';\n    case 'glass':\n    case 'gradient':\n      return 'outlined';\n    default:\n      return variant;\n  }\n};\n\n/**\n * Which of MUI's two densities each step asks for — its label offsets and\n * helper-text lift. The HEIGHT is not MUI's: every outlined step is drawn at\n * the theme's field height (`tokens/field-height`), which puts `md` at MUI's\n * small 40px, so `md` takes the small density with it.\n */\nexport const INPUT_MUI_SIZE: Record<SizeValue, MuiInputSize> = {\n  xs: 'small',\n  sm: 'small',\n  md: 'small',\n  lg: 'medium',\n  xl: 'medium',\n};\n\n/**\n * The horizontal inset of the steps that have their own, and — for `filled` and\n * `underline`, which are not drawn at the field height — their vertical one.\n * An outlined-family field takes its vertical inset from the field height\n * instead ({@link inputPadding}).\n */\nexport const INPUT_SIZE_OVERRIDES: Partial<Record<SizeValue, { vertical: number; horizontal: number }>> = {\n  xs: { vertical: 6, horizontal: 10 },\n  lg: { vertical: 16, horizontal: 14 },\n  xl: { vertical: 20, horizontal: 16 },\n};\n\n/**\n * MUI's own input padding per variant and height (`OutlinedInput`,\n * `FilledInput`, `InputBase`). The filled insets are lopsided because the\n * floating label sits inside the box on the web.\n */\nexport const MUI_INPUT_PADDING: Record<MuiInputVariant, Record<MuiInputSize, InputInset>> = {\n  outlined: {\n    small: { top: 8.5, right: 14, bottom: 8.5, left: 14 },\n    medium: { top: 16.5, right: 14, bottom: 16.5, left: 14 },\n  },\n  filled: {\n    small: { top: 21, right: 12, bottom: 4, left: 12 },\n    medium: { top: 25, right: 12, bottom: 8, left: 12 },\n  },\n  standard: {\n    small: { top: 1, right: 0, bottom: 5, left: 0 },\n    medium: { top: 4, right: 0, bottom: 5, left: 0 },\n  },\n};\n\n/** The variants drawn at the theme's field height: the outline and the two that restyle it. */\nconst AT_FIELD_HEIGHT: Record<InputVariant, boolean> = {\n  outlined: true,\n  glass: true,\n  gradient: true,\n  filled: false,\n  underline: false,\n};\n\n/**\n * The inset the value is drawn at.\n *\n * An outlined-family field is the theme's field height tall, so its vertical\n * inset is whatever centres the 23px line in that height; its horizontal inset\n * is the size override's, or MUI's 14px. `filled` and `underline` keep their\n * own heights — their label sits inside the box — so they keep MUI's insets.\n */\nexport function inputPadding(\n  variant: InputVariant,\n  size: SizeValue,\n  fieldHeight: number = DEFAULT_FIELD_HEIGHT,\n): InputInset {\n  const override = INPUT_SIZE_OVERRIDES[size];\n  if (AT_FIELD_HEIGHT[variant]) {\n    const vertical = (fieldHeightPx(fieldHeight, size) - INPUT_LINE_HEIGHT) / 2;\n    const horizontal = override?.horizontal ?? MUI_INPUT_PADDING.outlined.small.left;\n    return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };\n  }\n  if (override) {\n    return {\n      top: override.vertical,\n      right: override.horizontal,\n      bottom: override.vertical,\n      left: override.horizontal,\n    };\n  }\n  return MUI_INPUT_PADDING[muiVariantFor(variant)][INPUT_MUI_SIZE[size]];\n}\n\n/** `theme.typography.body1` and `InputBase`'s `lineHeight: '1.4375em'`, in px. */\nexport const INPUT_FONT_SIZE = 16;\nexport const INPUT_LINE_HEIGHT = 23;\n\n/** MUI's `::placeholder` opacity, which multiplies the ink's own alpha. */\nexport const PLACEHOLDER_OPACITY = { light: 0.42, dark: 0.5 } as const;\n\n/**\n * The placeholder's colour: the field's ink faded by MUI's opacity.\n *\n * `alpha()` REPLACES an alpha channel, and `text.primary` already carries one\n * (`rgba(0, 0, 0, 0.87)`), so `alpha(ink, 0.42)` would be a different grey from\n * the one the browser composites. React Native has no per-placeholder opacity —\n * only `placeholderTextColor` — so the multiplication happens here.\n */\nexport function placeholderInk(theme: UiTheme): string {\n  const opacity = theme.mode === 'dark' ? PLACEHOLDER_OPACITY.dark : PLACEHOLDER_OPACITY.light;\n  const { type, values } = decomposeColor(theme.palette.text.primary);\n  const [first = 0, second = 0, third = 0, own = 1] = values;\n  return recomposeColor({\n    type: type.startsWith('hsl') ? 'hsla' : 'rgba',\n    values: [first, second, third, own * opacity],\n  });\n}\n\n/** The outline: 1px at rest, 2px focused, as MUI's `notchedOutline` draws it. */\nexport const INPUT_BORDER = { rest: 1, focused: 2 } as const;\n\n/** `FilledInput`'s and `Input`'s resting underline, MUI's own two greys. */\nexport const UNDERLINE_COLOR = {\n  light: alpha(ABSOLUTE_INK.black, 0.42),\n  dark: alpha(ABSOLUTE_INK.white, 0.7),\n} as const;\n\n/**\n * The label. It floats into the border on the web and sits above the field on\n * native, but it is the SAME label: 16px body type at MUI's shrunk scale, and\n * left-aligned with the value it names ({@link inputPadding}'s `left`).\n *\n * The 4px gap is MUI's own: a standard field puts 16px between the control's\n * top and the input, and the shrunk label's 12px line box takes the first 12.\n */\nexport const INPUT_LABEL = { scale: 0.75, gap: 4 } as const;\n\n/** `FormHelperText`: `theme.typography.caption` lifted 3px, inset 14px when contained. */\nexport const HELPER_TEXT = {\n  fontSize: 12,\n  lineHeight: 1.66,\n  marginTop: 3,\n  marginTopSmall: 4,\n  marginHorizontal: 14,\n} as const;\n\n/** `InputAdornment`: 8px between the glyph and the value, on whichever side it is. */\nexport const ADORNMENT_GAP = 8;\n\n/** `loading`: the field fades and MUI's 20px `CircularProgress` takes the end slot. */\nexport const INPUT_LOADING = { opacity: 0.7, spinnerSize: 20 } as const;\n\n/** `glow`: a halo of the primary hue, wider and stronger while focused. */\nexport const INPUT_GLOW = {\n  rest: { blur: 15, alpha: 0.3 },\n  focused: { blur: 20, alpha: 0.5 },\n} as const;\n\n/**\n * `pulse`: a bar behind the field, fading outward every two seconds. Its height\n * and corner are the field's own — the theme's field height and radius.\n */\nexport const INPUT_PULSE = {\n  opacity: 0.3,\n  ms: 2000,\n  spread: 10,\n} as const;\n\n/** `floating`: where the label rests and where it shrinks to, on the web. */\nexport const FLOATING_LABEL = {\n  rest: { x: 14, y: 16 },\n  shrink: { x: 14, y: -9 },\n  scale: 0.75,\n  paddingX: 4,\n} as const;\n\n/** `glass`: a wash of paper under a blur, brighter as the field is engaged. */\nexport const INPUT_GLASS = {\n  background: { rest: 0.1, hover: 0.15, focused: 0.2 },\n  blur: 20,\n  hoverBorderAlpha: 0.3,\n  focusRing: { width: 2, alpha: 0.1 },\n} as const;\n\n/** `gradient`: a 135° fill between the two brand hues, inside a 2px masked ring. */\nexport const INPUT_GRADIENT = {\n  angleDeg: 135,\n  fill: { rest: 0.1, hover: 0.15, focused: 0.2 },\n  borderWidth: 2,\n} as const;\n\n/** `filled`: MUI's own grey replaced by a wash of `action.hover`. */\nexport const FILLED_WASH = { rest: 0.04, hover: 0.08, focused: 0.12 } as const;\n\n/**\n * The props the web spreads onto the `TextField` for a size: MUI's density, and\n * the horizontal inset of the steps that have their own. The HEIGHT is not\n * here — `Input.tsx` draws every outlined step at the theme's field height.\n */\nexport interface InputSizeProps {\n  size: MuiInputSize;\n  sx?: { '& .MuiInputBase-input': { paddingLeft: string; paddingRight: string } };\n}\n\nconst sizeProps = (size: SizeValue): InputSizeProps => {\n  const override = INPUT_SIZE_OVERRIDES[size];\n  return {\n    size: INPUT_MUI_SIZE[size],\n    ...(override\n      ? {\n          sx: {\n            '& .MuiInputBase-input': {\n              paddingLeft: `${override.horizontal}px`,\n              paddingRight: `${override.horizontal}px`,\n            },\n          },\n        }\n      : {}),\n  };\n};\n\nexport const SIZE_MAP: Record<SizeValue, InputSizeProps> = Object.fromEntries(\n  SIZE_VALUES.map((size) => [size, sizeProps(size)]),\n) as Record<SizeValue, InputSizeProps>;\n"],"mappings":"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","names":[]}