@12-apps/ui 6.19.1 → 6.21.0

package/dist/native/chunks/chunk-RJVM5YDE.js

@@ -0,0 +1,318 @@
+import {
+  renderTextChildren
+} from "./chunk-5GJ5OG5R.js";
+import {
+  childTestId,
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-QZAUOHDQ.js";
+import {
+  useUiTheme
+} from "./chunk-YTHR4Y5P.js";
+import {
+  alpha,
+  darken,
+  lighten
+} from "./chunk-P3PL4WBO.js";
+
+// src/components/form/Button/Button.native.tsx
+import * as React from "react";
+import {
+  ActivityIndicator,
+  Animated,
+  Easing,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
+
+// src/components/form/Button/Button.helpers.ts
+var BUTTON_DEFAULTS = {
+  variant: "solid",
+  color: "primary",
+  size: "md",
+  loading: false,
+  iconPosition: "left",
+  glow: false,
+  pulse: false,
+  ripple: true,
+  active: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveButtonProps = (props) => ({ ...BUTTON_DEFAULTS, ...definedProps(props) });
+
+// src/components/form/Button/Button.metrics.ts
+var BUTTON_SIZES = {
+  xs: { paddingVertical: 2, paddingHorizontal: 8, fontSize: 12 },
+  sm: { paddingVertical: 6, paddingHorizontal: 12, fontSize: 14 },
+  md: { paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },
+  lg: { paddingVertical: 10, paddingHorizontal: 20, fontSize: 18 },
+  xl: { paddingVertical: 12, paddingHorizontal: 24, fontSize: 20 }
+};
+var ICON_ONLY_PADDING = {
+  xs: 2,
+  sm: 5,
+  md: 7,
+  lg: 9,
+  xl: 11
+};
+var BUTTON_FONT_WEIGHT = 500;
+var BUTTON_RADIUS_UNITS = 1;
+var BUTTON_ICON_GAP_UNITS = 0.5;
+var BUTTON_SPINNER_SIZE = 16;
+var BUTTON_LINE_HEIGHT = 1.75;
+var BUTTON_WASH_ALPHA = 0.1;
+var GLASS_BACKGROUND_ALPHA = 0.1;
+var GLASS_BACKGROUND_ALPHA_PRESSED = 0.2;
+var GLASS_BORDER_ALPHA = 0.2;
+var GLOW_INNER_ALPHA = 0.6;
+var GLOW_RADIUS = 20;
+var PULSE_ALPHA = 0.3;
+var PULSE_DURATION_MS = 2e3;
+var PULSE_SPREAD = 15;
+function buttonPalette(theme, color) {
+  if (color === "neutral") {
+    return {
+      main: theme.palette.grey[700],
+      dark: theme.palette.grey[800],
+      light: theme.palette.grey[500],
+      contrastText: "#fff"
+    };
+  }
+  return theme.palette[color];
+}
+var quietInk = (theme, palette) => theme.mode === "dark" ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);
+function gradientStops(theme, color, palette) {
+  switch (color) {
+    case "primary":
+      return [theme.palette.primary.main, theme.palette.secondary.main];
+    case "secondary":
+      return [theme.palette.secondary.main, theme.palette.primary.main];
+    case "success":
+    case "warning":
+      return [theme.palette[color].light, theme.palette[color].dark];
+    case "danger":
+      return [theme.palette.danger.light, theme.palette.danger.dark];
+    default:
+      return [palette.main, palette.dark];
+  }
+}
+
+// src/components/form/Button/Button.native.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var MIN_WIDTH = 64;
+function paintFor(theme, variant, color, palette, active) {
+  const wash = alpha(palette.main, BUTTON_WASH_ALPHA);
+  switch (variant) {
+    case "outline":
+      return {
+        container: { backgroundColor: "transparent", borderWidth: 1, borderColor: palette.main },
+        pressed: { backgroundColor: wash, borderColor: palette.dark },
+        label: { color: palette.main }
+      };
+    case "ghost":
+      return {
+        container: { backgroundColor: "transparent" },
+        pressed: { backgroundColor: wash },
+        label: { color: quietInk(theme, palette) }
+      };
+    case "text":
+      return {
+        container: { backgroundColor: active ? wash : "transparent" },
+        pressed: { backgroundColor: wash },
+        label: { color: quietInk(theme, palette) }
+      };
+    case "glass":
+      return {
+        container: {
+          backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA),
+          borderWidth: 1,
+          borderColor: alpha(theme.palette.divider, GLASS_BORDER_ALPHA)
+        },
+        pressed: { backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_PRESSED) },
+        label: { color: palette.main }
+      };
+    case "gradient": {
+      const [from, to] = gradientStops(theme, color, palette);
+      return {
+        container: { backgroundColor: from },
+        pressed: { backgroundColor: to },
+        label: { color: "#fff" }
+      };
+    }
+    default:
+      return {
+        container: { backgroundColor: palette.main },
+        pressed: { backgroundColor: palette.dark },
+        label: { color: palette.contrastText || "#fff" }
+      };
+  }
+}
+function disabledPaint(theme, variant) {
+  const filled = variant === "solid" || variant === "gradient" || variant === "glass";
+  return {
+    container: filled ? { backgroundColor: theme.palette.action.disabledBackground, borderWidth: 0 } : variant === "outline" ? { backgroundColor: "transparent", borderWidth: 1, borderColor: theme.palette.action.disabledBackground } : { backgroundColor: "transparent" },
+    pressed: {},
+    label: { color: theme.palette.action.disabled }
+  };
+}
+function sizeStyle(theme, size, iconOnly, hasIcon) {
+  const metrics = BUTTON_SIZES[size];
+  if (iconOnly) {
+    return { padding: ICON_ONLY_PADDING[size], minWidth: 0 };
+  }
+  return {
+    paddingVertical: metrics.paddingVertical,
+    paddingHorizontal: metrics.paddingHorizontal,
+    minWidth: MIN_WIDTH,
+    gap: hasIcon ? theme.spacing(BUTTON_ICON_GAP_UNITS) : void 0
+  };
+}
+function glowStyle(palette) {
+  return Platform.select({
+    android: { elevation: 8 },
+    default: {
+      shadowColor: palette.main,
+      shadowOpacity: GLOW_INNER_ALPHA,
+      shadowRadius: GLOW_RADIUS,
+      shadowOffset: { width: 0, height: 0 }
+    }
+  });
+}
+function Pulse({ color, radius, testID }) {
+  const progress = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(progress, {
+        toValue: 1,
+        duration: PULSE_DURATION_MS,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: Platform.OS !== "web"
+      })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [progress]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID,
+      "aria-hidden": true,
+      style: [
+        StyleSheet.absoluteFill,
+        {
+          pointerEvents: "none",
+          borderRadius: radius,
+          backgroundColor: color,
+          opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [PULSE_ALPHA, 0, 0] }),
+          transform: [
+            { scale: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, 1 + PULSE_SPREAD / 40, 1] }) }
+          ]
+        }
+      ]
+    }
+  );
+}
+function buttonLook(theme, props) {
+  const { variant, color, size, loading, icon, children, glow, pulse, active, disabled, style } = props;
+  const palette = buttonPalette(theme, color);
+  const iconOnly = !loading && icon != null && children == null;
+  const inactive = Boolean(disabled) || loading;
+  const paint = inactive ? disabledPaint(theme, variant) : paintFor(theme, variant, color, palette, active);
+  const radius = theme.spacing(BUTTON_RADIUS_UNITS);
+  const metrics = BUTTON_SIZES[size];
+  const overflow = pulse || glow ? "visible" : "hidden";
+  const sized = sizeStyle(theme, size, iconOnly, icon != null && !loading);
+  const glowing = glow && !inactive ? glowStyle(palette) : null;
+  return {
+    inactive,
+    palette,
+    radius,
+    label: {
+      fontFamily: theme.typography.fontFamily,
+      fontSize: metrics.fontSize,
+      lineHeight: metrics.fontSize * BUTTON_LINE_HEIGHT,
+      fontWeight: String(BUTTON_FONT_WEIGHT),
+      textAlign: "center",
+      ...paint.label
+    },
+    container: (state) => [
+      styles.base,
+      { borderRadius: radius, overflow },
+      sized,
+      paint.container,
+      state.pressed && !inactive ? paint.pressed : null,
+      glowing,
+      style
+    ]
+  };
+}
+function Spinner({ color, testID }) {
+  return /* @__PURE__ */ jsx(
+    ActivityIndicator,
+    {
+      size: Platform.OS === "ios" ? "small" : BUTTON_SPINNER_SIZE,
+      color,
+      testID,
+      accessibilityLabel: "loading"
+    }
+  );
+}
+var Button = React.forwardRef((rawProps, ref) => {
+  const resolved = resolveButtonProps(rawProps);
+  const { loading, icon, iconPosition, pulse, ripple, children, onClick, onPress, ...others } = resolved;
+  const theme = useUiTheme();
+  const look = buttonLook(theme, resolved);
+  const testId = resolveTestId(others, "button");
+  const idFor = (suffix) => childTestId(others, suffix, "button");
+  const rest = withoutTestIdProps(others);
+  const { variant: _v, color: _c, size: _s, glow: _g, active: _a, disabled: _d, style: _st, ...pressable } = rest;
+  const handlePress = (event) => {
+    onClick?.(event);
+    onPress?.(event);
+  };
+  const iconNode = !loading && icon ? /* @__PURE__ */ jsx(View, { style: styles.icon, testID: idFor("icon"), children: icon }) : null;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ref,
+      role: "button",
+      "aria-disabled": look.inactive,
+      "aria-busy": loading,
+      disabled: look.inactive,
+      onPress: handlePress,
+      android_ripple: ripple && !look.inactive ? { color: alpha(look.palette.main, 0.2), borderless: false } : void 0,
+      style: look.container,
+      testID: testId,
+      ...pressable,
+      children: [
+        pulse && !look.inactive ? /* @__PURE__ */ jsx(Pulse, { color: look.palette.main, radius: look.radius, testID: idFor("pulse") }) : null,
+        iconPosition === "left" ? iconNode : null,
+        loading ? /* @__PURE__ */ jsx(Spinner, { color: look.label.color, testID: idFor("loading") }) : renderTextChildren(children, look.label, 1),
+        iconPosition === "right" ? iconNode : null
+      ]
+    }
+  );
+});
+Button.displayName = "Button";
+var styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-start",
+    position: "relative"
+  },
+  icon: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+export {
+  Button
+};
+//# sourceMappingURL=chunk-RJVM5YDE.js.map

package/dist/native/chunks/chunk-T6BJPP3E.js

@@ -0,0 +1,26 @@
+// src/platform/aria.ts
+function webAria(attrs) {
+  const { "aria-atomic": atomic, ...rest } = attrs;
+  return atomic === void 0 ? rest : { ...rest, accessibilityAtomic: atomic };
+}
+function webDisabled(disabled) {
+  return disabled ? { disabled: true } : {};
+}
+function webClick(handler) {
+  return handler === void 0 ? {} : { onClick: handler };
+}
+function webRole(role) {
+  return { role };
+}
+function webKeyDown(handler) {
+  return { onKeyDown: handler };
+}
+
+export {
+  webAria,
+  webDisabled,
+  webClick,
+  webRole,
+  webKeyDown
+};
+//# sourceMappingURL=chunk-T6BJPP3E.js.map

package/dist/native/chunks/chunk-T6BJPP3E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/platform/aria.ts"],"sourcesContent":["/**\n * WEB ATTRIBUTES REACT NATIVE DOES NOT DECLARE.\n *\n * React Native's `ViewProps` (0.83) type a dozen `aria-*` props and stop:\n * `aria-level`, `aria-atomic` and `aria-describedby` are not among them.\n * react-native-web forwards all three to the DOM — and `aria-level` also\n * picks the heading tag, so a `role=\"heading\"` at level 3 renders an `<h3>`\n * exactly as the MUI half's `component=\"h3\"` does — while a device ignores\n * them. A native component spreads them through here rather than widening\n * the element's props type or casting at every call site.\n */\nexport interface WebAria {\n  'aria-level'?: 1 | 2 | 3 | 4 | 5 | 6;\n  'aria-atomic'?: 'true' | 'false';\n  'aria-describedby'?: string;\n  /**\n   * A field's validity and whether it must be filled. React Native's\n   * `accessibilityState` has neither — its five flags are disabled, selected,\n   * checked, busy and expanded — so these are web-only, and a device reads the\n   * error text instead. react-native-web forwards both.\n   */\n  'aria-invalid'?: boolean;\n  'aria-required'?: boolean;\n  /**\n   * What a control pops open. React Native has `aria-expanded` and no\n   * `aria-haspopup`, so a `combobox` needs this one from here to say the thing\n   * it expands is a listbox — which is what the web's own trigger carries.\n   */\n  'aria-haspopup'?: 'listbox' | 'menu' | 'dialog' | 'true';\n}\n\n/**\n * `attrs` as something JSX can spread onto a react-native element without\n * that element's props type having to know them.\n *\n * `aria-atomic` travels under react-native-web's own older name. Its\n * `createDOMProps` (0.20.0) reads `aria-activedescendant` where it means\n * `aria-atomic` — `_ariaAtomic = ariaAtomic != null ? ariaActiveDescendant :\n * accessibilityAtomic` — so the modern spelling never reaches the DOM and\n * the legacy one, still accepted and still emitted as `aria-atomic`, does.\n * Neither name exists on a device, so nothing is lost there.\n */\nexport function webAria(attrs: WebAria): object {\n  const { 'aria-atomic': atomic, ...rest } = attrs;\n  return atomic === undefined ? rest : { ...rest, accessibilityAtomic: atomic };\n}\n\n/**\n * `disabled` for a react-native-web form control.\n *\n * React Native's `TextInput` has `editable` and no `disabled`, because a\n * device has no disabled state to speak of — an uneditable field simply does\n * not take the keyboard. The DOM does: only a real `disabled` attribute takes\n * an `<input>` out of the tab order, and it is what `toBeDisabled()` reads. So\n * a native field spreads this ALONGSIDE `editable={false}` and\n * `aria-disabled`: react-native-web puts the attribute on the input, and a\n * device ignores a prop it does not know.\n */\nexport function webDisabled(disabled: boolean): object {\n  return disabled ? { disabled: true } : {};\n}\n\n/**\n * `onClick` for a react-native-web element whose React Native twin has no\n * click of its own.\n *\n * react-native-web's `TextInput` forwards `onClick` to the DOM input and drops\n * `onPressIn`; a device does the opposite. A field that must answer a press on\n * both renderers spreads this ALONGSIDE `onPressIn`, and exactly one of the two\n * fires on each side — never both.\n */\nexport function webClick<E>(handler: ((event: E) => void) | undefined): object {\n  return handler === undefined ? {} : { onClick: handler };\n}\n\n/**\n * A `role` React Native's own union does not carry.\n *\n * `Role` (0.83) stops at `list` and `menu`: `listbox`, the role a dropdown's\n * option list owes a screen reader, is not in it. react-native-web forwards\n * whatever string it is given, and a device ignores a role it does not know —\n * the same trade `webAria` makes for the attributes below it.\n */\nexport function webRole(role: string): object {\n  return { role };\n}\n\n/** The half of a DOM keyboard event a component needs, without the DOM lib. */\nexport interface WebKeyEvent {\n  key: string;\n}\n\n/**\n * `onKeyDown` for a react-native-web element.\n *\n * React Native has no key events on a `View` — a phone has no keyboard to\n * press Escape on — so nothing here is typed by react-native and nothing here\n * fires on a device. react-native-web forwards it to the DOM, which is what\n * lets a native dropdown still answer Escape and the arrow keys in a browser.\n */\nexport function webKeyDown(handler: (event: WebKeyEvent) => void): object {\n  return { onKeyDown: handler };\n}\n"],"mappings":";AA0CO,SAAS,QAAQ,OAAwB;AAC9C,QAAM,EAAE,eAAe,QAAQ,GAAG,KAAK,IAAI;AAC3C,SAAO,WAAW,SAAY,OAAO,EAAE,GAAG,MAAM,qBAAqB,OAAO;AAC9E;AAaO,SAAS,YAAY,UAA2B;AACrD,SAAO,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;AAC1C;AAWO,SAAS,SAAY,SAAmD;AAC7E,SAAO,YAAY,SAAY,CAAC,IAAI,EAAE,SAAS,QAAQ;AACzD;AAUO,SAAS,QAAQ,MAAsB;AAC5C,SAAO,EAAE,KAAK;AAChB;AAeO,SAAS,WAAW,SAA+C;AACxE,SAAO,EAAE,WAAW,QAAQ;AAC9B;","names":[]}

package/dist/native/chunks/chunk-WKMDCNIN.js

@@ -0,0 +1,351 @@
+import {
+  SIZE_VALUES
+} from "./chunk-5WLOVHKK.js";
+import {
+  alpha,
+  darken,
+  decomposeColor,
+  getContrastRatio,
+  getLuminance,
+  hslToRgb,
+  lighten,
+  recomposeColor
+} from "./chunk-P3PL4WBO.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: "medium",
+  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 }
+  }
+};
+function inputPadding(variant, size) {
+  const override = INPUT_SIZE_OVERRIDES[size];
+  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: "rgba(0, 0, 0, 0.42)",
+  dark: "rgba(255, 255, 255, 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 = {
+  height: 56,
+  radiusUnits: 0.5,
+  opacity: 0.3,
+  ms: 2e3,
+  spread: 10
+};
+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": { padding: `${override.vertical}px ${override.horizontal}px` } } } : {}
+  };
+};
+var SIZE_MAP = Object.fromEntries(
+  SIZE_VALUES.map((size) => [size, sizeProps(size)])
+);
+
+// src/components/form/field-pulse.native.tsx
+import * as React from "react";
+import { Animated, Easing, Platform, StyleSheet } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function FieldPulse({
+  color,
+  radius,
+  testID
+}) {
+  const progress = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(progress, {
+        toValue: 1,
+        duration: INPUT_PULSE.ms,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: Platform.OS !== "web"
+      })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [progress]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID,
+      "aria-hidden": true,
+      style: [
+        styles.pulse,
+        {
+          borderRadius: radius,
+          backgroundColor: color,
+          opacity: progress.interpolate({
+            inputRange: [0, 0.7, 1],
+            outputRange: [INPUT_PULSE.opacity, 0, 0]
+          }),
+          transform: [
+            { translateY: -INPUT_PULSE.height / 2 },
+            {
+              scale: progress.interpolate({
+                inputRange: [0, 0.7, 1],
+                outputRange: [1, 1 + INPUT_PULSE.spread / INPUT_PULSE.height, 1]
+              })
+            }
+          ]
+        }
+      ]
+    }
+  );
+}
+var styles = StyleSheet.create({
+  pulse: {
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    right: 0,
+    height: INPUT_PULSE.height,
+    pointerEvents: "none"
+  }
+});
+
+// src/tokens/field-edge.core.ts
+var MIN_UI_CONTRAST = 3;
+var STEP = 0.05;
+var MAX_STEPS = 20;
+function channels(colour) {
+  const decomposed = decomposeColor(colour);
+  const rgb = decomposed.type.startsWith("hsl") ? decomposeColor(hslToRgb(colour)) : decomposed;
+  const [r, g, b, a] = rgb.values;
+  return [r ?? 0, g ?? 0, b ?? 0, a ?? 1];
+}
+function flatten(colour, surface) {
+  const [r, g, b, alpha2] = channels(colour);
+  if (alpha2 >= 1) return recomposeColor({ type: "rgb", values: [r, g, b] });
+  const [baseR, baseG, baseB] = channels(surface);
+  const blend = (fg, bg) => Math.round(alpha2 * fg + (1 - alpha2) * bg);
+  return recomposeColor({
+    type: "rgb",
+    values: [blend(r, baseR), blend(g, baseG), blend(b, baseB)]
+  });
+}
+function resolveFieldEdge(divider, surface) {
+  const ground = flatten(surface, "#FFFFFF");
+  const seed = flatten(divider, ground);
+  if (getContrastRatio(seed, ground) >= MIN_UI_CONTRAST) return seed;
+  const away = getLuminance(ground) > 0.5 ? darken : lighten;
+  for (let step = 1; step <= MAX_STEPS; step += 1) {
+    const candidate = away(seed, step * STEP);
+    if (getContrastRatio(candidate, ground) >= MIN_UI_CONTRAST) return candidate;
+  }
+  return getLuminance(ground) > 0.5 ? "#000000" : "#FFFFFF";
+}
+
+// src/components/form/Input/Input.look.native.ts
+var BORDER_SIDES = {
+  outlined: "all",
+  glass: "all",
+  gradient: "all",
+  filled: "bottom",
+  underline: "bottom"
+};
+var BORDER_IS_FREE = {
+  outlined: true,
+  filled: true,
+  underline: true,
+  glass: false,
+  gradient: false
+};
+function borderWidthFor(variant, focused) {
+  if (variant === "gradient") return INPUT_GRADIENT.borderWidth;
+  if (variant === "glass") return INPUT_BORDER.rest;
+  return focused ? INPUT_BORDER.focused : INPUT_BORDER.rest;
+}
+function horizontalBorderInset(variant, focused) {
+  if (BORDER_SIDES[variant] !== "all" || !BORDER_IS_FREE[variant]) return 0;
+  return borderWidthFor(variant, focused);
+}
+function borderColorFor(theme, variant, state) {
+  if (state.disabled) return theme.palette.action.disabled;
+  if (state.error) return theme.palette.danger.main;
+  if (variant === "gradient") {
+    return state.focused ? theme.palette.primary.dark : theme.palette.primary.main;
+  }
+  if (state.focused) return theme.palette.primary.main;
+  if (variant === "filled") {
+    return theme.mode === "dark" ? UNDERLINE_COLOR.dark : UNDERLINE_COLOR.light;
+  }
+  return resolveFieldEdge(theme.palette.divider, theme.palette.background.paper);
+}
+function backgroundFor(theme, variant, state) {
+  switch (variant) {
+    case "filled":
+      return alpha(theme.palette.action.hover, state.focused ? FILLED_WASH.focused : FILLED_WASH.rest);
+    case "glass":
+      return alpha(
+        theme.palette.background.paper,
+        state.focused ? INPUT_GLASS.background.focused : INPUT_GLASS.background.rest
+      );
+    case "gradient":
+      return alpha(
+        theme.palette.primary.main,
+        state.focused ? INPUT_GRADIENT.fill.focused : INPUT_GRADIENT.fill.rest
+      );
+    default:
+      return void 0;
+  }
+}
+function radiusFor(theme, variant) {
+  if (variant === "underline") return {};
+  if (variant === "filled") {
+    return { borderTopLeftRadius: theme.radius.md, borderTopRightRadius: theme.radius.md };
+  }
+  return { borderRadius: theme.radius.md };
+}
+function borderStyle(variant, width, color, state) {
+  const style = state.disabled && BORDER_SIDES[variant] === "bottom" ? "dotted" : "solid";
+  const sides = BORDER_SIDES[variant] === "bottom" ? { borderBottomWidth: width } : { borderWidth: width };
+  return { ...sides, borderColor: color, borderStyle: style };
+}
+function fieldLook(theme, variant, size, state) {
+  const padding = inputPadding(variant, size);
+  const width = borderWidthFor(variant, state.focused);
+  const inset = BORDER_IS_FREE[variant] ? width : 0;
+  const sides = BORDER_SIDES[variant];
+  const horizontal = sides === "all" ? inset : 0;
+  return {
+    box: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingLeft: padding.left - horizontal,
+      paddingRight: padding.right - horizontal,
+      backgroundColor: backgroundFor(theme, variant, state),
+      ...radiusFor(theme, variant),
+      ...borderStyle(variant, width, borderColorFor(theme, variant, state), state)
+    },
+    value: {
+      flex: 1,
+      minWidth: 0,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: INPUT_FONT_SIZE,
+      lineHeight: INPUT_LINE_HEIGHT,
+      color: state.disabled ? theme.palette.text.disabled : theme.palette.text.primary,
+      paddingTop: padding.top - (sides === "all" ? inset : 0),
+      paddingBottom: padding.bottom - inset,
+      paddingHorizontal: 0
+    },
+    placeholder: placeholderInk(theme)
+  };
+}
+function labelStyle(theme, variant, size, state) {
+  const ink = state.disabled ? theme.palette.text.disabled : state.error ? theme.palette.danger.main : state.focused ? theme.palette.primary.main : theme.palette.text.secondary;
+  return {
+    color: ink,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: INPUT_FONT_SIZE * INPUT_LABEL.scale,
+    marginBottom: INPUT_LABEL.gap,
+    // Aligned with the value it names: the web's floating label and the input
+    // share one left inset (14px outlined, 12px filled, 0 standard).
+    marginLeft: inputPadding(variant, size).left
+  };
+}
+function helperStyle(theme, variant, size, state) {
+  return {
+    color: state.disabled ? theme.palette.text.disabled : state.error ? theme.palette.danger.main : theme.palette.text.secondary,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: HELPER_TEXT.fontSize,
+    lineHeight: HELPER_TEXT.fontSize * HELPER_TEXT.lineHeight,
+    marginTop: INPUT_MUI_SIZE[size] === "small" ? HELPER_TEXT.marginTopSmall : HELPER_TEXT.marginTop,
+    marginHorizontal: variant === "underline" ? 0 : HELPER_TEXT.marginHorizontal
+  };
+}
+
+export {
+  INPUT_FONT_SIZE,
+  INPUT_LINE_HEIGHT,
+  ADORNMENT_GAP,
+  INPUT_LOADING,
+  INPUT_GLOW,
+  INPUT_PULSE,
+  FieldPulse,
+  horizontalBorderInset,
+  fieldLook,
+  labelStyle,
+  helperStyle
+};
+//# sourceMappingURL=chunk-WKMDCNIN.js.map