@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/commonjs/components/FieldBase/FieldBase.js

@@ -1,804 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.resolveVariantColors = exports.resolveFieldTextStyle = exports.resolveFieldSize = exports.pickRepresentativeBorderColor = exports.default = exports.RequiredPlaceholder = exports.RequiredMark = exports.FieldMessage = exports.FieldLabel = exports.FieldErrorGlyph = exports.FieldBase = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _defaultIcons = require("../AppIcon/defaultIcons.js");
-var _SquircleFill = require("../SquircleFill/SquircleFill.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * FieldBase — the unified field-box primitive.
- *
- * Every input-like control in the library (Input, Select, SearchBar,
- * NumberInput, OTPInput cell, PickerTrigger) composes FieldBase so the
- * height / radius / padding / border / fill / focus + disabled + error
- * states stay identical across the library. Differences (pill SearchBar,
- * OTP underline, NumberInput steppers) become explicit overrides via
- * props or via theme tokens — never accidental drift.
- *
- * Responsibilities:
- *   - Resolve size / variant dimensions from `theme.components.field`.
- *   - Animate the border + background between idle / focused / error.
- *   - Render leading + trailing slots either side of `children`.
- *   - Become Pressable when `onPress` is set (Select, PickerTrigger).
- *   - Apply disabled fill + cursor semantics.
- *
- * Non-responsibilities (the parent owns these):
- *   - The actual TextInput / Text / nested editor.
- *   - Floating / static labels rendered above the field.
- *   - Helper / error / counter text rendered below the field.
- *   - Shake-on-error or any cross-field animation.
- */
-
-/** Map a single colour string to all four sides (shorthand expansion). */
-const expandColorSides = value => {
-  if (typeof value === 'string') {
-    return {
-      top: value,
-      right: value,
-      bottom: value,
-      left: value
-    };
-  }
-  // Object form: any side the consumer omitted falls through to 'transparent'.
-  // Rationale: if a consumer says `{ bottom: '#000' }`, they want only the
-  // bottom drawn — the other sides should be invisible, not inherit some
-  // unrelated colour.
-  return {
-    top: value.top ?? 'transparent',
-    right: value.right ?? 'transparent',
-    bottom: value.bottom ?? 'transparent',
-    left: value.left ?? 'transparent'
-  };
-};
-
-/** Map a single width number to all four sides (shorthand expansion). */
-const expandWidthSides = value => {
-  if (typeof value === 'number') {
-    return {
-      top: value,
-      right: value,
-      bottom: value,
-      left: value
-    };
-  }
-  return {
-    top: value.top ?? 0,
-    right: value.right ?? 0,
-    bottom: value.bottom ?? 0,
-    left: value.left ?? 0
-  };
-};
-
-/**
- * Pick the most "representative" side colour from a 4-side record. Used by
- * consumers (Input's selectionColor, focus rings, etc.) that need a single
- * colour to mirror the visible focus indicator. Priority: bottom → top →
- * left → right, skipping `'transparent'`. The bottom-first order means
- * underline variants pick their underline colour automatically.
- */
-const pickRepresentativeBorderColor = sides => {
-  for (const side of ['bottom', 'top', 'left', 'right']) {
-    const c = sides[side];
-    if (c && c !== 'transparent') {
-      return c;
-    }
-  }
-  return sides.bottom;
-};
-
-/**
- * Resolved text styling for the editable / displayed content inside a field.
- * Single source of truth so every field component (Input, NumberInput,
- * Select, SearchBar, PickerTrigger) renders identical colour + weight +
- * fontFamily for value text — and reads the placeholder colour from the
- * same place. OTPInput intentionally overrides this with its own semibold
- * display weight.
- */
-exports.pickRepresentativeBorderColor = pickRepresentativeBorderColor;
-/**
- * Resolve the canonical text style chunk for a field's value. Reads from
- * `theme.components.field.{textColor,disabledTextColor,placeholderColor,fontWeight}`
- * first, then the field palette (`theme.colors.field`); brand fonts wired via
- * `typography.fontFamily` apply via the shared `fontFor` helper.
- */
-const resolveFieldTextStyle = (theme, options = {}) => {
-  const {
-    disabled = false
-  } = options;
-  const tokens = theme.components.field;
-  const palette = theme.colors.field;
-  // Disabled: value, placeholder and icons all drop to the same dimmed ink.
-  const color = disabled ? tokens?.disabledTextColor ?? palette.textDisabled : tokens?.textColor ?? palette.text;
-  // The spec dims the placeholder a second step when the field is disabled.
-  const placeholderColor = tokens?.placeholderColor ?? (disabled ? palette.placeholderDisabled : palette.placeholder);
-
-  // If a consumer sets `field.fontWeight` directly (raw RN weight string),
-  // honour it verbatim — they've opted out of the brand-font path. Otherwise
-  // resolve weight through `fontFor` so `typography.fontFamily.<weight>`
-  // takes precedence when a custom face is registered. Value text is regular
-  // weight: the label above carries the emphasis.
-  const weightStyle = tokens?.fontWeight ? {
-    fontWeight: tokens.fontWeight
-  } : (0, _index.fontFor)(theme, 'normal');
-  return {
-    color,
-    placeholderColor,
-    weightStyle
-  };
-};
-
-/**
- * The required-field marker appended to a field's label. Single source of
- * truth for the whole field family (Input, Select, FormField, PickerTrigger →
- * Date/Time/DateRange pickers). Themeable via
- * `theme.components.field.{requiredMarker,requiredMarkerColor}`; font family /
- * weight / size are inherited from the parent label `<Text>`.
- */
-exports.resolveFieldTextStyle = resolveFieldTextStyle;
-const RequiredMark = () => {
-  const theme = (0, _index.useTheme)();
-  const tokens = theme.components.field;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-    style: {
-      color: tokens?.requiredMarkerColor ?? theme.colors.error
-    },
-    children: ` ${tokens?.requiredMarker ?? '*'}`
-  });
-};
-
-/**
- * The placeholder of a required field that has no static label, drawn by the
- * field itself with the required marker after it ("Enter your email *"). It
- * is laid over the empty TextInput, whose own placeholder the field
- * suppresses, in the same type as the input text, and the field removes it
- * the moment it has a value: the star belongs to the hint, so it leaves with
- * the hint rather than standing beside what the user typed. Inert to touch.
- */
-exports.RequiredMark = RequiredMark;
-const RequiredPlaceholder = ({
-  text,
-  color,
-  fontSize,
-  weightStyle,
-  align = 'center',
-  paddingTop,
-  textAlign
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-  pointerEvents: "none",
-  style: [_reactNative.StyleSheet.absoluteFill, {
-    justifyContent: align === 'top' ? 'flex-start' : 'center',
-    paddingTop
-  }],
-  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-    accessible: false,
-    numberOfLines: 1,
-    style: {
-      color,
-      fontSize,
-      ...weightStyle,
-      includeFontPadding: false,
-      textAlign
-    },
-    children: [text, /*#__PURE__*/(0, _jsxRuntime.jsx)(RequiredMark, {})]
-  })
-});
-
-/**
- * The circled-exclamation glyph that leads a field's error message. Uses the
- * theme's `icons.error` renderer when one is registered; otherwise draws a
- * ring-and-bang from views so the message never renders bare. Shared by
- * every field component that shows an error line (Input, Select, FormField,
- * the pickers) so the message row reads identically across the family.
- */
-exports.RequiredPlaceholder = RequiredPlaceholder;
-const FieldErrorGlyph = ({
-  size,
-  color
-}) => {
-  const theme = (0, _index.useTheme)();
-  const renderer = theme.icons?.error ?? _defaultIcons.defaultIcons.error;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: renderer({
-      size,
-      color
-    })
-  });
-};
-
-/**
- * The static label above a field, per the design spec: `field.label` ink,
- * the size ladder's `labelFontSize`, semibold, `labelGap` below. It stays on
- * that ink through focus and error (the ring and the message row carry the
- * error). Shared by Select, PickerTrigger, NumberInput; Input renders the
- * same styling inline because it also owns the floating-label variant.
- */
-exports.FieldErrorGlyph = FieldErrorGlyph;
-const FieldLabel = ({
-  children,
-  size = 'md',
-  required = false,
-  style
-}) => {
-  const theme = (0, _index.useTheme)();
-  const sizeTokens = resolveFieldSize(theme, size);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-    style: [familyStyles.label, {
-      color: theme.colors.field.label,
-      fontSize: sizeTokens.labelFontSize,
-      ...(0, _index.fontFor)(theme, 'semibold'),
-      marginBottom: sizeTokens.labelGap
-    }, style],
-    children: [children, required ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RequiredMark, {}) : null]
-  });
-};
-
-/**
- * The helper / error line under a field: `messageFontSize`, `messageGap`
- * from the box, `field.message` red with the circled-exclamation glyph when
- * `error`, `text.secondary` otherwise. Renders nothing without text.
- */
-exports.FieldLabel = FieldLabel;
-const FieldMessage = ({
-  text,
-  error = false,
-  size = 'md',
-  style
-}) => {
-  const theme = (0, _index.useTheme)();
-  const sizeTokens = resolveFieldSize(theme, size);
-  if (!text) {
-    return null;
-  }
-  const color = error ? theme.colors.field.message : theme.colors.text.secondary;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [familyStyles.messageRow, {
-      marginTop: sizeTokens.messageGap,
-      columnGap: theme.spacing.xs + 2
-    }],
-    accessibilityLiveRegion: error ? 'polite' : 'none',
-    children: [error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldErrorGlyph, {
-      size: sizeTokens.messageFontSize,
-      color: color
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [familyStyles.messageText, {
-        color,
-        fontSize: sizeTokens.messageFontSize,
-        ...(0, _index.fontFor)(theme, 'normal')
-      }, style],
-      children: text
-    })]
-  });
-};
-exports.FieldMessage = FieldMessage;
-const familyStyles = _reactNative.StyleSheet.create({
-  label: {
-    includeFontPadding: false
-  },
-  messageRow: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  messageText: {
-    flexShrink: 1,
-    includeFontPadding: false
-  }
-});
-
-/**
- * Public re-export of the resolved size tokens — components that need to
- * compute their own padding adjustments (e.g. multiline Input, icon-slot
- * sizing) read from this rather than re-hardcoding the size table.
- */
-const resolveFieldSize = (theme, size) => {
-  const sizeFromTheme = theme.components.field?.[size];
-  const fallback = DEFAULT_SIZES[size];
-  return {
-    paddingHorizontal: sizeFromTheme?.paddingHorizontal ?? fallback.paddingHorizontal,
-    paddingVertical: sizeFromTheme?.paddingVertical ?? fallback.paddingVertical,
-    minHeight: sizeFromTheme?.minHeight ?? fallback.minHeight,
-    fontSize: sizeFromTheme?.fontSize ?? fallback.fontSize,
-    borderRadius: sizeFromTheme?.borderRadius ?? fallback.borderRadius,
-    iconSize: sizeFromTheme?.iconSize ?? fallback.iconSize,
-    labelFontSize: sizeFromTheme?.labelFontSize ?? fallback.labelFontSize,
-    labelGap: sizeFromTheme?.labelGap ?? fallback.labelGap,
-    messageFontSize: sizeFromTheme?.messageFontSize ?? fallback.messageFontSize,
-    messageGap: sizeFromTheme?.messageGap ?? fallback.messageGap
-  };
-};
-
-// Library defaults for when consumers haven't supplied per-size tokens. The
-// numbers here MUST stay in sync with the `fieldSizes` table in tokens.ts —
-// these are the same values, duplicated so resolveFieldSize works even when
-// the consumer passes a custom theme without `components.field` set.
-exports.resolveFieldSize = resolveFieldSize;
-const DEFAULT_SIZES = {
-  sm: {
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    minHeight: 38,
-    fontSize: 13,
-    borderRadius: 10,
-    iconSize: 14,
-    labelFontSize: 11,
-    labelGap: 4,
-    messageFontSize: 11,
-    messageGap: 2
-  },
-  md: {
-    paddingHorizontal: 14,
-    paddingVertical: 13,
-    minHeight: 44,
-    fontSize: 14,
-    borderRadius: 10,
-    iconSize: 16,
-    labelFontSize: 12,
-    labelGap: 4,
-    messageFontSize: 12,
-    messageGap: 2
-  },
-  lg: {
-    paddingHorizontal: 16,
-    paddingVertical: 15,
-    minHeight: 52,
-    fontSize: 16,
-    borderRadius: 10,
-    iconSize: 18,
-    labelFontSize: 13,
-    labelGap: 4,
-    messageFontSize: 13,
-    messageGap: 2
-  }
-};
-
-/**
- * Strict, fully-resolved colour set used internally. Mirrors `FieldVariantTokens`
- * but every border colour / width is expanded to a 4-side record by the time
- * the box renders, so the animation pipeline can treat per-side and shorthand
- * the same way. `borderFocusedRepresentative` is a single colour pulled from
- * the focused sides — exposed for consumers (Input's selectionColor) that
- * need to mirror the visible focus indicator without re-resolving per side.
- */
-
-/**
- * Resolve the full set of state-aware fill + border colours for a given
- * variant. Order: explicit override → theme token → library default. Border
- * colour + width are normalized to per-side records here; callers that need
- * a single colour read `borderFocusedRepresentative`.
- */
-const resolveVariantColors = (theme, variant, override) => {
-  const tokenSet = theme.components.field?.[variant];
-  const palette = theme.colors.field;
-
-  // Variant-specific defaults for resting fill + border treatment, all from
-  // the field palette. `outlined` is the spec's box: hairline border on the
-  // resting fill, white while focused. `filled` is the same box without the
-  // hairline. `underline` draws only the bottom rule on a transparent
-  // background — the spec's second row.
-  let idleEmpty;
-  let focusedDefault;
-  let disabledDefault;
-  let borderIdleDefault;
-  let borderWidthDefault;
-  if (variant === 'outlined') {
-    idleEmpty = palette.background;
-    focusedDefault = palette.backgroundFocused;
-    disabledDefault = palette.backgroundDisabled;
-    borderIdleDefault = palette.border;
-    borderWidthDefault = theme.colors.border.width;
-  } else if (variant === 'underline') {
-    // No box to dim: the underline row stays transparent while disabled too,
-    // only its rule, text and icons drop to the disabled ink.
-    idleEmpty = 'transparent';
-    focusedDefault = undefined;
-    disabledDefault = 'transparent';
-    borderIdleDefault = {
-      bottom: palette.border
-    };
-    borderWidthDefault = {
-      bottom: theme.colors.border.width
-    };
-  } else {
-    // Filled has no hairline, so the fill IS the box: it must stay put on
-    // focus (the outlined box goes white because its ring still shows the
-    // edge; a borderless box going white would vanish into the page).
-    idleEmpty = palette.background;
-    focusedDefault = undefined;
-    disabledDefault = palette.backgroundDisabled;
-    borderIdleDefault = 'transparent';
-    borderWidthDefault = 0;
-  }
-
-  // For focused/error/disabled we expand using the same per-side shape as
-  // idle. If `borderIdle` ended up bottom-only (underline), an unset
-  // `borderFocused` defaults to `{ bottom: field.borderFocused }` so the
-  // focus indicator stays on the same edge. Same logic for error.
-  const wrapToIdleShape = colour => typeof borderIdleDefault === 'string' ? colour : {
-    bottom: colour
-  };
-  const borderIdle = expandColorSides(override?.borderIdle ?? tokenSet?.borderIdle ?? borderIdleDefault);
-  const borderFocused = expandColorSides(override?.borderFocused ?? tokenSet?.borderFocused ?? wrapToIdleShape(palette.borderFocused));
-  const borderError = expandColorSides(override?.borderError ?? tokenSet?.borderError ?? wrapToIdleShape(palette.borderError));
-  // The spec keeps the resting hairline while disabled; only the fill and the
-  // placeholder dim.
-  const borderDisabled = expandColorSides(override?.borderDisabled ?? tokenSet?.borderDisabled ?? borderIdleDefault);
-  const borderWidth = expandWidthSides(override?.borderWidth ?? tokenSet?.borderWidth ?? borderWidthDefault);
-  return {
-    backgroundIdleEmpty: override?.backgroundIdleEmpty ?? tokenSet?.backgroundIdleEmpty ?? idleEmpty,
-    backgroundIdleFilled: override?.backgroundIdleFilled ?? tokenSet?.backgroundIdleFilled ?? override?.backgroundIdleEmpty ?? tokenSet?.backgroundIdleEmpty ?? idleEmpty,
-    backgroundFocused: override?.backgroundFocused ?? tokenSet?.backgroundFocused ?? focusedDefault,
-    backgroundError: override?.backgroundError ?? tokenSet?.backgroundError ?? undefined,
-    backgroundDisabled: override?.backgroundDisabled ?? tokenSet?.backgroundDisabled ?? disabledDefault,
-    borderIdle,
-    borderFocused,
-    borderError,
-    borderDisabled,
-    borderWidth,
-    borderFocusedRepresentative: pickRepresentativeBorderColor(borderFocused)
-  };
-};
-exports.resolveVariantColors = resolveVariantColors;
-const FieldBase = props => {
-  const {
-    size = 'md',
-    variant: variantProp,
-    focused = false,
-    disabled = false,
-    error = false,
-    filled = false,
-    leading,
-    leadingDivider = false,
-    trailing,
-    slotAlign = 'center',
-    slotLineHeight,
-    topNotch,
-    children,
-    onPress,
-    pressFeedback = true,
-    minHeight: minHeightProp,
-    maxHeight,
-    width,
-    height,
-    paddingHorizontal: paddingHorizontalProp,
-    paddingLeft: paddingLeftProp,
-    paddingRight: paddingRightProp,
-    paddingVertical: paddingVerticalProp,
-    borderRadius: borderRadiusProp,
-    borderTopLeftRadius: borderTopLeftRadiusProp,
-    borderTopRightRadius: borderTopRightRadiusProp,
-    borderBottomLeftRadius: borderBottomLeftRadiusProp,
-    borderBottomRightRadius: borderBottomRightRadiusProp,
-    borderWidth: borderWidthProp,
-    borderTopWidth: borderTopWidthProp,
-    borderRightWidth: borderRightWidthProp,
-    borderBottomWidth: borderBottomWidthProp,
-    borderLeftWidth: borderLeftWidthProp,
-    gap: gapProp,
-    fillOverrides,
-    style,
-    testID,
-    accessibilityRole,
-    accessibilityLabel,
-    accessibilityState,
-    accessibilityHint
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(), []);
-  const variant = variantProp ?? theme.components.field?.defaultVariant ?? 'outlined';
-  const sizeTokens = resolveFieldSize(theme, size);
-  const colors = (0, _react.useMemo)(() => resolveVariantColors(theme, variant, fillOverrides), [theme, variant, fillOverrides]);
-
-  // ONE animated value carries the visual state: 0 idle, 1 focused, 2 error
-  // (error wins over focus). Every colour below is a single three-stop
-  // interpolation of this value, so the Animated node driving `borderColor`
-  // is created once and never swapped for one on a different source. The
-  // earlier two-value design (focusAnim, errorAnim) re-pointed the style at a
-  // fresh interpolation when `error` flipped, and Android painted the border
-  // transparent from that moment: the ring vanished exactly in the error
-  // state, while the JS-side style still said pink.
-  const IDLE = 0;
-  const FOCUSED = 1;
-  const ERROR = 2;
-  const targetState = error ? ERROR : focused ? FOCUSED : IDLE;
-  const stateAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(targetState)).current;
-  (0, _react.useEffect)(() => {
-    const anim = _reactNative.Animated.timing(stateAnim, {
-      toValue: targetState,
-      duration: theme.motion.duration.fast,
-      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: false
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [targetState, stateAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
-  const STATE_RANGE = [IDLE, FOCUSED, ERROR];
-
-  // Resting border + fill (pre-animation).
-  const idleFill = filled ? colors.backgroundIdleFilled : colors.backgroundIdleEmpty;
-  const focusedFill = colors.backgroundFocused ?? idleFill;
-  const errorFill = colors.backgroundError ?? idleFill;
-  const animatedBackgroundColor = disabled ? colors.backgroundDisabled : stateAnim.interpolate({
-    inputRange: STATE_RANGE,
-    outputRange: [idleFill, focusedFill, errorFill]
-  });
-
-  // Per-side border colour: idle → focused → error stops for each side, all
-  // driven by `stateAnim`. When all four sides agree at every stop we
-  // collapse to one `borderColor` key — the common case stays cheap.
-  const sideIdle = colors.borderIdle;
-  const sideFocused = colors.borderFocused;
-  const sideError = colors.borderError;
-
-  // Per-side widths: longhand prop wins over shorthand prop wins over
-  // resolved variant token. Each side independently.
-  const propWidth = {
-    top: borderTopWidthProp,
-    right: borderRightWidthProp,
-    bottom: borderBottomWidthProp,
-    left: borderLeftWidthProp
-  };
-  const resolvedWidths = {
-    top: propWidth.top ?? borderWidthProp ?? colors.borderWidth.top,
-    right: propWidth.right ?? borderWidthProp ?? colors.borderWidth.right,
-    bottom: propWidth.bottom ?? borderWidthProp ?? colors.borderWidth.bottom,
-    left: propWidth.left ?? borderWidthProp ?? colors.borderWidth.left
-  };
-  const boxStyle = {
-    minHeight: height ?? minHeightProp ?? sizeTokens.minHeight,
-    maxHeight,
-    paddingHorizontal: paddingHorizontalProp ?? sizeTokens.paddingHorizontal,
-    paddingVertical: paddingVerticalProp ?? sizeTokens.paddingVertical,
-    paddingLeft: paddingLeftProp ?? paddingHorizontalProp ?? sizeTokens.paddingHorizontal,
-    paddingRight: paddingRightProp ?? paddingHorizontalProp ?? sizeTokens.paddingHorizontal,
-    backgroundColor: animatedBackgroundColor,
-    columnGap: gapProp ?? theme.spacing.md,
-    alignItems: slotAlign === 'top' ? 'flex-start' : 'center'
-  };
-
-  // Radius: per-corner prop wins over shorthand prop wins over size token.
-  // Underline variant draws ONLY the bottom edge — a non-zero radius arcs the
-  // bottom border up around the corners, so the visible line stops short of
-  // both ends ("cut" outline). Underline is therefore always square: radius
-  // props and tokens are ignored on it, so a consumer switching variants
-  // never has to zero the radius by hand.
-  const isUnderlineVariant = variant === 'underline';
-  const radiusShorthand = isUnderlineVariant ? 0 : borderRadiusProp ?? sizeTokens.borderRadius;
-  const corners = isUnderlineVariant ? {
-    tl: 0,
-    tr: 0,
-    bl: 0,
-    br: 0
-  } : {
-    tl: borderTopLeftRadiusProp ?? radiusShorthand,
-    tr: borderTopRightRadiusProp ?? radiusShorthand,
-    bl: borderBottomLeftRadiusProp ?? radiusShorthand,
-    br: borderBottomRightRadiusProp ?? radiusShorthand
-  };
-  // Every radius / width / colour key below is emitted in its per-corner or
-  // per-side LONGHAND form on every render, whatever the variant. The key set
-  // therefore never changes when `variant` flips (outlined → underline →
-  // outlined): only values do. The earlier code collapsed to the shorthand
-  // (`borderWidth`, `borderColor`) whenever all sides agreed, so a variant
-  // switch added and removed keys; on Android the removed longhand sides
-  // stayed cleared and the freshly added shorthand never painted, leaving the
-  // box with no border at all (and no focus ring) until remount. Measured on
-  // the showcase, not inferred.
-  boxStyle.borderTopLeftRadius = corners.tl;
-  boxStyle.borderTopRightRadius = corners.tr;
-  boxStyle.borderBottomLeftRadius = corners.bl;
-  boxStyle.borderBottomRightRadius = corners.br;
-  // Apple's continuous curve on iOS; Android ignores the key (see utils/corners).
-  boxStyle.borderCurve = _corners.smoothCorners.borderCurve;
-  boxStyle.borderTopWidth = resolvedWidths.top;
-  boxStyle.borderRightWidth = resolvedWidths.right;
-  boxStyle.borderBottomWidth = resolvedWidths.bottom;
-  boxStyle.borderLeftWidth = resolvedWidths.left;
-
-  // Colour: four `borderXColor` interpolations of the one state value.
-  // Disabled state is static (no animation needed).
-  const sideColor = side => stateAnim.interpolate({
-    inputRange: STATE_RANGE,
-    outputRange: [sideIdle[side], sideFocused[side], sideError[side]]
-  });
-
-  // Android smooth corners: when the box is one shape (four equal corners,
-  // one border width and one border colour all round, in every state) its
-  // fill and border are drawn as an SVG squircle over a transparent host.
-  // Per-side or per-corner styling and the underline variant keep the native
-  // box: the shape has no per-side form, and the underline has no corner.
-  const sameOnEverySide = sides => sides.top === sides.right && sides.top === sides.bottom && sides.top === sides.left;
-  const oneShape = !isUnderlineVariant && corners.tl === corners.tr && corners.tl === corners.bl && corners.tl === corners.br && sameOnEverySide(resolvedWidths) && sameOnEverySide(sideIdle) && sameOnEverySide(sideFocused) && sameOnEverySide(sideError) && sameOnEverySide(colors.borderDisabled);
-  const squircle = (0, _SquircleFill.useSquircle)(oneShape, corners.tl);
-  if (squircle.active) {
-    // The widths stay (layout must not move by a pixel); the paint moves to
-    // the squircle, whose stroke follows the same state interpolation.
-    boxStyle.backgroundColor = 'transparent';
-    boxStyle.borderTopColor = 'transparent';
-    boxStyle.borderRightColor = 'transparent';
-    boxStyle.borderBottomColor = 'transparent';
-    boxStyle.borderLeftColor = 'transparent';
-  } else if (disabled) {
-    const sideDisabled = colors.borderDisabled;
-    boxStyle.borderTopColor = sideDisabled.top;
-    boxStyle.borderRightColor = sideDisabled.right;
-    boxStyle.borderBottomColor = sideDisabled.bottom;
-    boxStyle.borderLeftColor = sideDisabled.left;
-  } else {
-    boxStyle.borderTopColor = sideColor('top');
-    boxStyle.borderRightColor = sideColor('right');
-    boxStyle.borderBottomColor = sideColor('bottom');
-    boxStyle.borderLeftColor = sideColor('left');
-  }
-  const squircleStroke = disabled ? colors.borderDisabled.top : sideColor('top');
-
-  // When the colour records themselves change (variant or theme switch), the
-  // interpolation nodes above are new objects. Re-assert the current state
-  // value so Animated pushes their values to the native view straight away
-  // instead of waiting for the next focus / error transition.
-  const targetStateRef = (0, _react.useRef)(targetState);
-  targetStateRef.current = targetState;
-  // biome-ignore lint/correctness/useExhaustiveDependencies: `colors` is deliberately a dependency without being read: the effect must re-run when the colour set changes so the new interpolation nodes are pushed to native, and reading it would add nothing.
-  (0, _react.useEffect)(() => {
-    // `colors` is the identity that changes with variant / theme / overrides.
-    // Read the target through a ref so a plain state change (which the timing
-    // effect above animates) does not also snap the value here.
-    stateAnim.setValue(targetStateRef.current);
-  }, [colors, stateAnim]);
-  if (width !== undefined) {
-    boxStyle.width = width;
-  }
-  if (height !== undefined) {
-    boxStyle.height = height;
-  }
-  const a11yState = {
-    disabled,
-    ...accessibilityState
-  };
-
-  // Top-aligned slots: the row stops centring, and each slot (and the divider)
-  // is nudged down so its centre lands on the first line's centre.
-  const slotsOnTop = slotAlign === 'top';
-  const slotTopStyle = slotsOnTop ? {
-    alignSelf: 'flex-start',
-    marginTop: Math.max(0, ((slotLineHeight ?? sizeTokens.iconSize) - sizeTokens.iconSize) / 2)
-  } : null;
-  // The notch is a strip of the box's own fill laid over the top border, so
-  // the rule visibly stops either side of the label. Absolute children sit
-  // inside the border, hence the border-width offsets.
-  // When the notch starts inside the top-left corner's arc (a pill, whose
-  // radius is wider than the padding the label floats at), the rule there
-  // has already curved below the top edge, so a one-line strip would leave
-  // it running under the label's left end. Deepen the strip to the arc's
-  // depth at the notch's left, so the rule stops with the same air on that
-  // side as on the right.
-  const boxMinHeight = height ?? minHeightProp ?? sizeTokens.minHeight;
-  const notchArcDepth = (() => {
-    if (!topNotch) {
-      return 0;
-    }
-    const r = Math.min(corners.tl, boxMinHeight / 2);
-    const x = topNotch.left;
-    if (r <= 0 || x >= r) {
-      return 0;
-    }
-    return Math.ceil(r - Math.sqrt(r * r - (r - x) * (r - x)));
-  })();
-  const notch = topNotch && resolvedWidths.top > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    pointerEvents: "none",
-    style: {
-      position: 'absolute',
-      top: -resolvedWidths.top,
-      left: topNotch.left - resolvedWidths.left,
-      width: topNotch.width,
-      height: resolvedWidths.top + notchArcDepth,
-      backgroundColor: animatedBackgroundColor
-    }
-  }) : null;
-  const renderInner = pressed => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [squircle.active && squircle.size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SquircleFill.SquircleFill, {
-      width: squircle.size.width,
-      height: squircle.size.height,
-      radius: corners.tl,
-      fill: pressed && !disabled ? theme.colors.surface.pressed : animatedBackgroundColor,
-      stroke: squircleStroke,
-      strokeWidth: resolvedWidths.top,
-      outset: resolvedWidths.top
-    }) : null, notch, leading != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.slot, slotTopStyle],
-      children: leading
-    }) : null, leading != null && leadingDivider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      pointerEvents: "none",
-      style: [styles.divider, slotTopStyle, {
-        height: sizeTokens.iconSize,
-        backgroundColor: theme.colors.field.border
-      }]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.content, slotsOnTop ? styles.contentTop : null],
-      children: children
-    }), trailing != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.slot, slotTopStyle],
-      children: trailing
-    }) : null]
-  });
-  const box = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    onLayout: squircle.onLayout,
-    style: [styles.box, boxStyle, style],
-    accessibilityRole: accessibilityRole,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityHint: accessibilityHint,
-    accessibilityState: a11yState,
-    testID: testID,
-    children: renderInner(false)
-  });
-  if (onPress && !pressFeedback) {
-    // A tap anywhere on the box (padding, icon, gap) reaches the parent's
-    // handler, which focuses the hosted TextInput. The input's own touches
-    // never get here: it takes the responder first. `accessible={false}`
-    // keeps this wrapper out of the accessibility tree, and the child is a
-    // plain node, so press state changes re-render nothing.
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      onPress: onPress,
-      disabled: disabled,
-      accessible: false,
-      children: box
-    });
-  }
-  if (onPress) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      onPress: onPress,
-      disabled: disabled
-      // No android_ripple: the ripple paints on this square Pressable, not
-      // the rounded box inside it, so its corners showed outside the field's
-      // radius. The box's own pressed fill below is the feedback instead.
-      ,
-      accessibilityRole: accessibilityRole ?? 'button',
-      accessibilityLabel: accessibilityLabel,
-      accessibilityHint: accessibilityHint,
-      accessibilityState: a11yState,
-      testID: testID,
-      children: ({
-        pressed
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        onLayout: squircle.onLayout,
-        style: [styles.box, boxStyle, pressed && !disabled && !squircle.active ? {
-          backgroundColor: theme.colors.surface.pressed
-        } : null, style],
-        children: renderInner(pressed)
-      })
-    });
-  }
-  return box;
-};
-exports.FieldBase = FieldBase;
-FieldBase.displayName = 'FieldBase';
-const buildStyles = () => _reactNative.StyleSheet.create({
-  box: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    overflow: 'visible'
-  },
-  slot: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  divider: {
-    width: 1,
-    alignSelf: 'center'
-  },
-  content: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  contentTop: {
-    alignItems: 'flex-start'
-  }
-});
-var _default = exports.default = FieldBase;
-//# sourceMappingURL=FieldBase.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.resolveVariantColors=exports.resolveFieldTextStyle=exports.resolveFieldSize=exports.pickRepresentativeBorderColor=exports.hasFieldText=exports.fieldTextAsString=exports.default=exports.RequiredPlaceholder=exports.RequiredMark=exports.FieldMessage=exports.FieldLabel=exports.FieldErrorGlyph=exports.FieldBase=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,l,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(i=t?o:r){if(i.has(e))return i.get(e);i.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((l=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(l.get||l.set)?i(n,t,l):n[t]=e[t]);return n})(e,t)}const expandColorSides=e=>"string"==typeof e?{top:e,right:e,bottom:e,left:e}:{top:e.top??"transparent",right:e.right??"transparent",bottom:e.bottom??"transparent",left:e.left??"transparent"},expandWidthSides=e=>"number"==typeof e?{top:e,right:e,bottom:e,left:e}:{top:e.top??0,right:e.right??0,bottom:e.bottom??0,left:e.left??0},pickRepresentativeBorderColor=e=>{for(const t of["bottom","top","left","right"]){const r=e[t];if(r&&"transparent"!==r)return r}return e.bottom};exports.pickRepresentativeBorderColor=pickRepresentativeBorderColor;const resolveFieldTextStyle=(e,t={})=>{const{disabled:r=!1}=t,o=e.components.field,i=e.colors.field;return{color:r?o?.disabledTextColor??i.textDisabled:o?.textColor??i.text,placeholderColor:o?.placeholderColor??(r?i.placeholderDisabled:i.placeholder),weightStyle:o?.fontWeight?{fontWeight:o.fontWeight}:(0,_index.fontFor)(e,"normal")}};exports.resolveFieldTextStyle=resolveFieldTextStyle;const RequiredMark=()=>{const e=(0,_index.useTheme)(),t=e.components.field;return(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:t?.requiredMarkerColor??e.colors.error},children:` ${t?.requiredMarker??"*"}`})};exports.RequiredMark=RequiredMark;const RequiredPlaceholder=({text:e,color:t,fontSize:r,weightStyle:o,align:i="center",paddingTop:l,textAlign:n})=>(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[_reactNative.StyleSheet.absoluteFill,{justifyContent:"top"===i?"flex-start":"center",paddingTop:l}],children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{accessible:!1,numberOfLines:1,style:{color:t,fontSize:r,...o,includeFontPadding:!1,textAlign:n},children:[e,(0,_jsxRuntime.jsx)(RequiredMark,{})]})});exports.RequiredPlaceholder=RequiredPlaceholder;const FieldErrorGlyph=({size:e,color:t})=>{const r=(0,_index.useTheme)(),o=r.icons?.error??_defaultIcons.defaultIcons.error;return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:o({size:e,color:t})})};exports.FieldErrorGlyph=FieldErrorGlyph;const hasFieldText=e=>null!=e&&!1!==e&&!0!==e&&""!==e;exports.hasFieldText=hasFieldText;const fieldTextAsString=e=>"string"==typeof e?e:void 0;exports.fieldTextAsString=fieldTextAsString;const FieldLabel=({children:e,size:t="md",required:r=!1,help:o,color:i,style:l})=>{const n=(0,_index.useTheme)(),s=resolveFieldSize(n,t),a=hasFieldText(o),d=(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[familyStyles.label,{color:i??n.colors.field.label,fontSize:s.labelFontSize,...(0,_index.fontFor)(n,"semibold"),marginBottom:a?0:s.labelGap},a?familyStyles.labelShrink:null,l],children:[e,r?(0,_jsxRuntime.jsx)(RequiredMark,{}):null]});return a?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[familyStyles.labelRow,{marginBottom:s.labelGap}],children:[d,(0,_jsxRuntime.jsx)(_reactNative.View,{style:[familyStyles.help,{marginLeft:n.spacing.xs}],children:o})]}):d};exports.FieldLabel=FieldLabel;const FieldMessage=({text:e,error:t=!1,size:r="md",style:o})=>{const i=(0,_index.useTheme)(),l=resolveFieldSize(i,r);if(!hasFieldText(e))return null;const n=t?i.colors.field.message:i.colors.text.secondary;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[familyStyles.messageRow,{marginTop:l.messageGap,columnGap:i.spacing.xs+2}],accessibilityLiveRegion:t?"polite":"none",children:[t?(0,_jsxRuntime.jsx)(FieldErrorGlyph,{size:l.messageFontSize,color:n}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[familyStyles.messageText,{color:n,fontSize:l.messageFontSize,...(0,_index.fontFor)(i,"normal")},o],children:e})]})};exports.FieldMessage=FieldMessage;const familyStyles=_reactNative.StyleSheet.create({label:{includeFontPadding:!1},labelShrink:{flexShrink:1},labelRow:{flexDirection:"row",alignItems:"center"},help:{flexShrink:0,alignItems:"center",justifyContent:"center"},messageRow:{flexDirection:"row",alignItems:"center"},messageText:{flexShrink:1,includeFontPadding:!1}}),resolveFieldSize=(e,t)=>{const r=e.components.field?.[t],o=DEFAULT_SIZES[t];return{paddingHorizontal:r?.paddingHorizontal??o.paddingHorizontal,paddingVertical:r?.paddingVertical??o.paddingVertical,minHeight:r?.minHeight??o.minHeight,fontSize:r?.fontSize??o.fontSize,borderRadius:r?.borderRadius??o.borderRadius,iconSize:r?.iconSize??o.iconSize,labelFontSize:r?.labelFontSize??o.labelFontSize,labelGap:r?.labelGap??o.labelGap,messageFontSize:r?.messageFontSize??o.messageFontSize,messageGap:r?.messageGap??o.messageGap}};exports.resolveFieldSize=resolveFieldSize;const DEFAULT_SIZES={sm:{paddingHorizontal:12,paddingVertical:10,minHeight:38,fontSize:13,borderRadius:10,iconSize:14,labelFontSize:11,labelGap:4,messageFontSize:11,messageGap:2},md:{paddingHorizontal:14,paddingVertical:13,minHeight:44,fontSize:14,borderRadius:10,iconSize:16,labelFontSize:12,labelGap:4,messageFontSize:12,messageGap:2},lg:{paddingHorizontal:16,paddingVertical:15,minHeight:52,fontSize:16,borderRadius:10,iconSize:18,labelFontSize:13,labelGap:4,messageFontSize:13,messageGap:2}},resolveVariantColors=(e,t,r)=>{const o=e.components.field?.[t],i=e.colors.field;let l,n,s,a,d;"outlined"===t?(l=i.background,n=i.backgroundFocused,s=i.backgroundDisabled,a=i.border,d=e.colors.border.width):"underline"===t?(l="transparent",n=void 0,s="transparent",a={bottom:i.border},d={bottom:e.colors.border.width}):(l=i.background,n=void 0,s=i.backgroundDisabled,a="transparent",d=0);const wrapToIdleShape=e=>"string"==typeof a?e:{bottom:e},c=expandColorSides(r?.borderIdle??o?.borderIdle??a),u=expandColorSides(r?.borderFocused??o?.borderFocused??wrapToIdleShape(i.borderFocused)),b=expandColorSides(r?.borderError??o?.borderError??wrapToIdleShape(i.borderError)),p=expandColorSides(r?.borderDisabled??o?.borderDisabled??a),g=expandWidthSides(r?.borderWidth??o?.borderWidth??d);return{backgroundIdleEmpty:r?.backgroundIdleEmpty??o?.backgroundIdleEmpty??l,backgroundIdleFilled:r?.backgroundIdleFilled??o?.backgroundIdleFilled??r?.backgroundIdleEmpty??o?.backgroundIdleEmpty??l,backgroundFocused:r?.backgroundFocused??o?.backgroundFocused??n,backgroundError:r?.backgroundError??o?.backgroundError??void 0,backgroundDisabled:r?.backgroundDisabled??o?.backgroundDisabled??s,borderIdle:c,borderFocused:u,borderError:b,borderDisabled:p,borderWidth:g,borderFocusedRepresentative:pickRepresentativeBorderColor(u)}};exports.resolveVariantColors=resolveVariantColors;const FieldBase=e=>{const{size:t="md",variant:r,focused:o=!1,disabled:i=!1,error:l=!1,filled:n=!1,leading:s,leadingDivider:a=!1,trailing:d,slotAlign:c="center",slotLineHeight:u,topNotch:b,children:p,onPress:g,pressFeedback:m=!0,minHeight:h,maxHeight:x,width:f,height:S,paddingHorizontal:y,paddingLeft:_,paddingRight:R,paddingVertical:F,borderRadius:v,borderTopLeftRadius:z,borderTopRightRadius:j,borderBottomLeftRadius:k,borderBottomRightRadius:C,borderWidth:T,borderTopWidth:w,borderRightWidth:I,borderBottomWidth:q,borderLeftWidth:E,gap:V,fillOverrides:L,style:W,testID:H,accessibilityRole:D,accessibilityLabel:N,accessibilityState:B,accessibilityHint:M}=e,G=(0,_index.useTheme)(),P=(0,_react.useMemo)(()=>buildStyles(),[]),A=r??G.components.field?.defaultVariant??"outlined",O=resolveFieldSize(G,t),U=(0,_react.useMemo)(()=>resolveVariantColors(G,A,L),[G,A,L]),Z=l?2:o?1:0,$=(0,_react.useRef)((0,_index.createAnimatedValue)(Z)).current;(0,_react.useEffect)(()=>{const e=_reactNative.Animated.timing($,{toValue:Z,duration:G.motion.duration.fast,easing:_reactNative.Easing.bezier(...G.motion.easing.standard),useNativeDriver:!1});return e.start(),()=>e.stop()},[Z,$,G.motion.duration.fast,G.motion.easing.standard]);const J=[0,1,2],K=n?U.backgroundIdleFilled:U.backgroundIdleEmpty,Q=U.backgroundFocused??K,X=U.backgroundError??K,Y=i?U.backgroundDisabled:$.interpolate({inputRange:J,outputRange:[K,Q,X]}),ee=U.borderIdle,te=U.borderFocused,re=U.borderError,oe={top:w,right:I,bottom:q,left:E},ie={top:oe.top??T??U.borderWidth.top,right:oe.right??T??U.borderWidth.right,bottom:oe.bottom??T??U.borderWidth.bottom,left:oe.left??T??U.borderWidth.left},le={minHeight:S??h??O.minHeight,maxHeight:x,paddingHorizontal:y??O.paddingHorizontal,paddingVertical:F??O.paddingVertical,paddingLeft:_??y??O.paddingHorizontal,paddingRight:R??y??O.paddingHorizontal,backgroundColor:Y,columnGap:V??G.spacing.md,alignItems:"top"===c?"flex-start":"center"},ne="underline"===A,se=ne?0:v??O.borderRadius,ae=ne?{tl:0,tr:0,bl:0,br:0}:{tl:z??se,tr:j??se,bl:k??se,br:C??se};le.borderTopLeftRadius=ae.tl,le.borderTopRightRadius=ae.tr,le.borderBottomLeftRadius=ae.bl,le.borderBottomRightRadius=ae.br,le.borderCurve=_corners.smoothCorners.borderCurve,le.borderTopWidth=ie.top,le.borderRightWidth=ie.right,le.borderBottomWidth=ie.bottom,le.borderLeftWidth=ie.left;const sideColor=e=>$.interpolate({inputRange:J,outputRange:[ee[e],te[e],re[e]]}),sameOnEverySide=e=>e.top===e.right&&e.top===e.bottom&&e.top===e.left,de=!ne&&ae.tl===ae.tr&&ae.tl===ae.bl&&ae.tl===ae.br&&sameOnEverySide(ie)&&sameOnEverySide(ee)&&sameOnEverySide(te)&&sameOnEverySide(re)&&sameOnEverySide(U.borderDisabled),ce=(0,_SquircleFill.useSquircle)(de,ae.tl);if(ce.active)le.backgroundColor="transparent",le.borderTopColor="transparent",le.borderRightColor="transparent",le.borderBottomColor="transparent",le.borderLeftColor="transparent";else if(i){const e=U.borderDisabled;le.borderTopColor=e.top,le.borderRightColor=e.right,le.borderBottomColor=e.bottom,le.borderLeftColor=e.left}else le.borderTopColor=sideColor("top"),le.borderRightColor=sideColor("right"),le.borderBottomColor=sideColor("bottom"),le.borderLeftColor=sideColor("left");const ue=i?U.borderDisabled.top:sideColor("top"),be=(0,_react.useRef)(Z);be.current=Z,(0,_react.useEffect)(()=>{$.setValue(be.current)},[U,$]),void 0!==f&&(le.width=f),void 0!==S&&(le.height=S);const pe={disabled:i,...B},ge="top"===c,me=ge?{alignSelf:"flex-start",marginTop:Math.max(0,((u??O.iconSize)-O.iconSize)/2)}:null,he=S??h??O.minHeight,xe=(()=>{if(!b)return 0;const e=Math.min(ae.tl,he/2),t=b.left;return e<=0||t>=e?0:Math.ceil(e-Math.sqrt(e*e-(e-t)*(e-t)))})(),fe=b&&ie.top>0?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:{position:"absolute",top:-ie.top,left:b.left-ie.left,width:b.width,height:ie.top+xe,backgroundColor:Y}}):null,renderInner=e=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[ce.active&&ce.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:ce.size.width,height:ce.size.height,radius:ae.tl,fill:e&&!i?G.colors.surface.pressed:Y,stroke:ue,strokeWidth:ie.top,outset:ie.top}):null,fe,null!=s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[P.slot,me],children:s}):null,null!=s&&a?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[P.divider,me,{height:O.iconSize,backgroundColor:G.colors.field.border}]}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:[P.content,ge?P.contentTop:null],children:p}),null!=d?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[P.slot,me],children:d}):null]}),Se=(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{onLayout:ce.onLayout,style:[P.box,le,W],accessibilityRole:D,accessibilityLabel:N,accessibilityHint:M,accessibilityState:pe,testID:H,children:renderInner(!1)});return g&&!m?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:g,disabled:i,accessible:!1,children:Se}):g?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:g,disabled:i,accessibilityRole:D??"button",accessibilityLabel:N,accessibilityHint:M,accessibilityState:pe,testID:H,children:({pressed:e})=>(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{onLayout:ce.onLayout,style:[P.box,le,!e||i||ce.active?null:{backgroundColor:G.colors.surface.pressed},W],children:renderInner(e)})}):Se};exports.FieldBase=FieldBase,FieldBase.displayName="FieldBase";const buildStyles=()=>_reactNative.StyleSheet.create({box:{flexDirection:"row",alignItems:"center",overflow:"visible"},slot:{alignItems:"center",justifyContent:"center"},divider:{width:1,alignSelf:"center"},content:{flex:1,flexDirection:"row",alignItems:"center"},contentTop:{alignItems:"flex-start"}});var _default=exports.default=FieldBase;