@webority-technologies/mobile 0.0.15 → 0.0.20

package/lib/module/components/FieldBase/FieldBase.js

@@ -0,0 +1,297 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, View } from 'react-native';
+import { useTheme, createAnimatedValue, fontFor } from "../../theme/index.js";
+
+/**
+ * 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.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Resolve the canonical text style chunk for a field's value. Reads from
+ * `theme.components.field.{textColor,disabledTextColor,placeholderColor,fontWeight}`
+ * with library-default fallbacks; brand fonts wired via `typography.fontFamily`
+ * apply via the shared `fontFor` helper.
+ */
+export const resolveFieldTextStyle = (theme, options = {}) => {
+  const {
+    disabled = false
+  } = options;
+  const tokens = theme.components.field;
+  const color = disabled ? tokens?.disabledTextColor ?? theme.colors.text.disabled : tokens?.textColor ?? theme.colors.text.primary;
+  const placeholderColor = tokens?.placeholderColor ?? theme.colors.text.tertiary;
+
+  // 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.
+  const weightStyle = tokens?.fontWeight ? {
+    fontWeight: tokens.fontWeight
+  } : fontFor(theme, 'medium');
+  return {
+    color,
+    placeholderColor,
+    weightStyle
+  };
+};
+
+/**
+ * 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.
+ */
+export const resolveFieldSize = (theme, size) => {
+  const sizeFromTheme = theme.components.field?.[size];
+  return {
+    paddingHorizontal: sizeFromTheme?.paddingHorizontal ?? DEFAULT_SIZES[size].paddingHorizontal,
+    paddingVertical: sizeFromTheme?.paddingVertical ?? DEFAULT_SIZES[size].paddingVertical,
+    minHeight: sizeFromTheme?.minHeight ?? DEFAULT_SIZES[size].minHeight,
+    fontSize: sizeFromTheme?.fontSize ?? DEFAULT_SIZES[size].fontSize,
+    borderRadius: sizeFromTheme?.borderRadius ?? DEFAULT_SIZES[size].borderRadius,
+    iconSize: sizeFromTheme?.iconSize ?? DEFAULT_SIZES[size].iconSize
+  };
+};
+
+// 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.
+const DEFAULT_SIZES = {
+  sm: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minHeight: 38,
+    fontSize: 13,
+    borderRadius: 10,
+    iconSize: 16
+  },
+  md: {
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    minHeight: 46,
+    fontSize: 15,
+    borderRadius: 12,
+    iconSize: 18
+  },
+  lg: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    minHeight: 54,
+    fontSize: 16,
+    borderRadius: 14,
+    iconSize: 20
+  }
+};
+
+/**
+ * Strict, fully-resolved colour set used internally. Mirrors `FieldVariantTokens`
+ * but every field is non-optional — every state has a concrete colour by the
+ * time the box renders, so downstream code can rely on string-typed fills.
+ */
+
+/**
+ * Resolve the full set of state-aware fill + border colours for a given
+ * variant. Order: explicit override → theme token → library default.
+ */
+export const resolveVariantColors = (theme, variant, override) => {
+  const tokenSet = theme.components.field?.[variant];
+  const isOutlined = variant === 'outlined';
+  const idleEmpty = isOutlined ? theme.colors.background.primary : theme.colors.background.secondary;
+  const borderIdle = isOutlined ? theme.colors.border.primary : 'transparent';
+  const borderWidth = isOutlined ? theme.colors.border.width : 0;
+  return {
+    backgroundIdleEmpty: override?.backgroundIdleEmpty ?? tokenSet?.backgroundIdleEmpty ?? idleEmpty,
+    backgroundIdleFilled: override?.backgroundIdleFilled ?? tokenSet?.backgroundIdleFilled ?? override?.backgroundIdleEmpty ?? tokenSet?.backgroundIdleEmpty ?? idleEmpty,
+    backgroundFocused: override?.backgroundFocused ?? tokenSet?.backgroundFocused ?? undefined,
+    backgroundError: override?.backgroundError ?? tokenSet?.backgroundError ?? undefined,
+    backgroundDisabled: override?.backgroundDisabled ?? tokenSet?.backgroundDisabled ?? theme.colors.surface.disabled,
+    borderIdle: override?.borderIdle ?? tokenSet?.borderIdle ?? borderIdle,
+    borderFocused: override?.borderFocused ?? tokenSet?.borderFocused ?? theme.colors.border.focus,
+    borderError: override?.borderError ?? tokenSet?.borderError ?? theme.colors.border.error,
+    borderDisabled: override?.borderDisabled ?? tokenSet?.borderDisabled ?? borderIdle,
+    borderWidth: override?.borderWidth ?? tokenSet?.borderWidth ?? borderWidth
+  };
+};
+export const FieldBase = props => {
+  const {
+    size = 'md',
+    variant: variantProp,
+    focused = false,
+    disabled = false,
+    error = false,
+    filled = false,
+    leading,
+    trailing,
+    children,
+    onPress,
+    minHeight: minHeightProp,
+    maxHeight,
+    width,
+    height,
+    paddingHorizontal: paddingHorizontalProp,
+    paddingVertical: paddingVerticalProp,
+    borderRadius: borderRadiusProp,
+    borderWidth: borderWidthProp,
+    gap: gapProp,
+    fillOverrides,
+    style,
+    testID,
+    accessibilityRole,
+    accessibilityLabel,
+    accessibilityState,
+    accessibilityHint
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(), []);
+  const variant = variantProp ?? theme.components.field?.defaultVariant ?? 'outlined';
+  const sizeTokens = resolveFieldSize(theme, size);
+  const colors = useMemo(() => resolveVariantColors(theme, variant, fillOverrides), [theme, variant, fillOverrides]);
+  const focusAnim = useRef(createAnimatedValue(focused ? 1 : 0)).current;
+  const errorAnim = useRef(createAnimatedValue(error ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(focusAnim, {
+      toValue: focused ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }).start();
+  }, [focused, focusAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+  useEffect(() => {
+    Animated.timing(errorAnim, {
+      toValue: error ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }).start();
+  }, [error, errorAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+
+  // Resting border + fill (pre-animation). Error wins over focus when both
+  // happen at once; we drive a single interpolation between blurred ↔ active.
+  const idleFill = filled ? colors.backgroundIdleFilled : colors.backgroundIdleEmpty;
+  const focusedFill = colors.backgroundFocused ?? idleFill;
+  const errorFill = colors.backgroundError ?? idleFill;
+  const animatedBorderColor = disabled ? colors.borderDisabled : error ? errorAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.borderIdle, colors.borderError]
+  }) : focusAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.borderIdle, colors.borderFocused]
+  });
+  const animatedBackgroundColor = disabled ? colors.backgroundDisabled : error ? errorAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [idleFill, errorFill]
+  }) : focusAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [idleFill, focusedFill]
+  });
+  const boxStyle = {
+    minHeight: height ?? minHeightProp ?? sizeTokens.minHeight,
+    maxHeight,
+    paddingHorizontal: paddingHorizontalProp ?? sizeTokens.paddingHorizontal,
+    paddingVertical: paddingVerticalProp ?? sizeTokens.paddingVertical,
+    borderRadius: borderRadiusProp ?? sizeTokens.borderRadius,
+    borderWidth: borderWidthProp ?? colors.borderWidth,
+    borderColor: animatedBorderColor,
+    backgroundColor: animatedBackgroundColor,
+    columnGap: gapProp ?? theme.spacing.sm
+  };
+  if (width !== undefined) boxStyle.width = width;
+  if (height !== undefined) boxStyle.height = height;
+  const a11yState = {
+    disabled,
+    ...accessibilityState
+  };
+  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [leading != null ? /*#__PURE__*/_jsx(View, {
+      style: styles.slot,
+      children: leading
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: styles.content,
+      children: children
+    }), trailing != null ? /*#__PURE__*/_jsx(View, {
+      style: styles.slot,
+      children: trailing
+    }) : null]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      disabled: disabled,
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      },
+      accessibilityRole: accessibilityRole ?? 'button',
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityState: a11yState,
+      testID: testID,
+      children: ({
+        pressed
+      }) => /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.box, boxStyle, pressed && !disabled ? {
+          backgroundColor: theme.colors.surface.pressed
+        } : null, style],
+        children: innerContent
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.box, boxStyle, style],
+    accessibilityRole: accessibilityRole,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: a11yState,
+    testID: testID,
+    children: innerContent
+  });
+};
+FieldBase.displayName = 'FieldBase';
+const buildStyles = () => StyleSheet.create({
+  box: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'visible'
+  },
+  slot: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
+export default FieldBase;
+//# sourceMappingURL=FieldBase.js.map

package/lib/module/components/FieldBase/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { FieldBase, resolveFieldSize, resolveFieldTextStyle, default } from "./FieldBase.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/FloatingActionButton/FloatingActionButton.js

@@ -6,7 +6,10 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
-import { AppIcon } from "../AppIcon/index.js";
+
+// Local shape mirror — see types.ts FloatingActionButtonTokens for the canonical
+// definition. Declared here so the component can read tokens before types.ts is
+// regenerated; will collapse to a direct import once that lands.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const sizeMap = {
   sm: {
@@ -47,9 +50,6 @@ const toneForeground = (theme, tone) => {
   if (tone === 'neutral') return theme.colors.text.primary;
   return theme.colors.text.inverse;
 };
-const isIconConfig = value => {
-  return typeof value === 'object' && value !== null && ! /*#__PURE__*/React.isValidElement(value) && typeof value.name === 'string';
-};
 const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     icon,
@@ -65,6 +65,8 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
     accessibilityLabel,
     accessibilityHint,
     style,
+    containerStyle,
+    labelStyle,
     testID
   } = props;
   const theme = useTheme();
@@ -78,6 +80,10 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   } = usePressAnimation({
     enabled: !disabled
   });
+  const fabTokens = theme.components.floatingActionButton;
+  const edgeOffset = fabTokens?.edgeOffset ?? 24;
+  const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
+  const pressHaptic = fabTokens?.pressHaptic ?? false;
   const hideAnim = useRef(createAnimatedValue(0)).current;
   useEffect(() => {
     if (!hideOnScroll) {
@@ -93,7 +99,7 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   }, [hideOnScroll, isScrolling, hideAnim, theme.motion.duration.normal, theme.motion.easing.standard]);
   const hideTranslateY = hideAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, sizeStyles.diameter + (bottomOffset ?? 24) + insets.bottom + 24]
+    outputRange: [0, sizeStyles.diameter + (bottomOffset ?? defaultBottomOffset) + insets.bottom + edgeOffset]
   });
   const hideOpacity = hideAnim.interpolate({
     inputRange: [0, 1],
@@ -101,27 +107,22 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = _event => {
     if (disabled) return;
-    triggerHaptic('impactLight');
+    if (pressHaptic) triggerHaptic('impactLight');
     onPress();
   };
-  const renderedIcon = isIconConfig(icon) ? /*#__PURE__*/_jsx(AppIcon, {
-    name: icon.name,
-    family: icon.family ?? 'feather',
-    size: sizeStyles.iconSize,
-    color: toneForeground(theme, tone)
-  }) : icon;
+  const renderedIcon = icon;
   const isExtended = typeof label === 'string' && label.length > 0;
   const backgroundColor = disabled ? theme.colors.surface.disabled : toneBackground(theme, tone);
   const foregroundColor = disabled ? theme.colors.text.disabled : toneForeground(theme, tone);
   const positionStyle = useMemo(() => {
     if (!position) return null;
-    const bottom = (bottomOffset ?? 24) + insets.bottom;
+    const bottom = (bottomOffset ?? defaultBottomOffset) + insets.bottom;
     switch (position) {
       case 'bottomLeft':
         return {
           position: 'absolute',
           bottom,
-          left: 24
+          left: edgeOffset
         };
       case 'bottomCenter':
         return {
@@ -134,10 +135,10 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
         return {
           position: 'absolute',
           bottom,
-          right: 24
+          right: edgeOffset
         };
     }
-  }, [position, bottomOffset, insets.bottom]);
+  }, [position, bottomOffset, insets.bottom, defaultBottomOffset, edgeOffset]);
   return /*#__PURE__*/_jsx(Animated.View, {
     style: [positionStyle, {
       transform: [{
@@ -146,7 +147,7 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
         scale
       }],
       opacity: hideOpacity
-    }, style],
+    }, containerStyle, style],
     pointerEvents: hideOnScroll && isScrolling ? 'none' : 'auto',
     children: /*#__PURE__*/_jsxs(Pressable, {
       ref: ref,
@@ -183,7 +184,7 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
           fontSize: sizeStyles.fontSize,
           fontWeight: theme.typography.fontWeight.semibold,
           marginLeft: theme.spacing.sm
-        }],
+        }, labelStyle],
         numberOfLines: 1,
         children: label
       }) : null]
@@ -209,8 +210,6 @@ const buildStyles = _theme => StyleSheet.create({
 // so they remain smooth during JS thread work.
 // =====================================================================
 
-const SECONDARY_GAP = 16;
-const STAGGER_MS = 50;
 const FloatingActionButtonGroup = props => {
   const {
     primaryIcon,
@@ -223,28 +222,54 @@ const FloatingActionButtonGroup = props => {
     bottomOffset,
     size = 'md',
     accessibilityLabel = 'Quick actions',
+    containerStyle,
+    secondaryActionStyle,
+    labelPillStyle,
+    labelStyle,
     testID
   } = props;
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const sizeStyles = sizeMap[size];
   const styles = useMemo(() => buildGroupStyles(theme), [theme]);
+  const fabTokens = theme.components.floatingActionButton;
+  const edgeOffset = fabTokens?.edgeOffset ?? 24;
+  const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
+  const secondaryGap = fabTokens?.secondaryGap ?? 16;
+  const staggerMs = fabTokens?.staggerMs ?? 50;
+  const pressHaptic = fabTokens?.pressHaptic ?? false;
   const isControlled = typeof controlledOpen === 'boolean';
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isOpen = isControlled ? controlledOpen : internalOpen;
 
   // Animation drivers
   const progress = useRef(createAnimatedValue(isOpen ? 1 : 0)).current;
+  // Stable refs for per-item Animated.Values. Reconciled inside useEffect — never
+  // mutated during render — so re-renders don't recreate Animated.Value instances
+  // (previous implementation leaked one Animated.Value per re-render when the
+  // actions array length changed).
   const itemAnims = useRef([]);
-
-  // Resize per-item anim array if action count changes
-  if (itemAnims.current.length !== actions.length) {
-    const next = [];
-    for (let i = 0; i < actions.length; i += 1) {
-      next.push(itemAnims.current[i] ?? new Animated.Value(isOpen ? 1 : 0));
+  // Bump this when the underlying refs array is re-shaped so downstream effects
+  // and mapping reads see the new length.
+  const [itemAnimsVersion, setItemAnimsVersion] = useState(0);
+  useEffect(() => {
+    const current = itemAnims.current;
+    if (current.length === actions.length) return;
+    if (current.length < actions.length) {
+      const next = current.slice();
+      for (let i = current.length; i < actions.length; i += 1) {
+        next.push(new Animated.Value(isOpen ? 1 : 0));
+      }
+      itemAnims.current = next;
+    } else {
+      // Drop stale refs when actions array shrinks.
+      itemAnims.current = current.slice(0, actions.length);
     }
-    itemAnims.current = next;
-  }
+    setItemAnimsVersion(v => v + 1);
+    // isOpen intentionally not in deps — only used to seed brand-new values; the
+    // open/close effect below will animate them to the correct target anyway.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actions.length]);
   useEffect(() => {
     Animated.timing(progress, {
       toValue: isOpen ? 1 : 0,
@@ -260,34 +285,34 @@ const FloatingActionButtonGroup = props => {
     }));
     // Reverse stagger order on close so items closest to primary collapse last
     const ordered = isOpen ? animations : [...animations].reverse();
-    Animated.stagger(STAGGER_MS, ordered).start();
-  }, [isOpen, progress, theme.motion.duration.normal, theme.motion.easing.standard, actions.length]);
+    Animated.stagger(staggerMs, ordered).start();
+  }, [isOpen, progress, theme.motion.duration.normal, theme.motion.easing.standard, actions.length, itemAnimsVersion, staggerMs]);
   const setOpen = useCallback(next => {
-    triggerHaptic('impactLight');
+    if (pressHaptic) triggerHaptic('impactLight');
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
-  }, [isControlled, onOpenChange]);
+  }, [isControlled, onOpenChange, pressHaptic]);
   const handlePrimaryPress = useCallback(() => {
     setOpen(!isOpen);
   }, [isOpen, setOpen]);
   const handleActionPress = useCallback(action => {
-    triggerHaptic('selection');
+    if (pressHaptic) triggerHaptic('selection');
     action.onPress();
     // Close after action runs
     if (!isControlled) setInternalOpen(false);
     onOpenChange?.(false);
-  }, [isControlled, onOpenChange]);
+  }, [isControlled, onOpenChange, pressHaptic]);
   const handleBackdropPress = useCallback(() => {
     if (isOpen) setOpen(false);
   }, [isOpen, setOpen]);
   const positionStyle = useMemo(() => {
-    const bottom = (bottomOffset ?? 24) + insets.bottom;
+    const bottom = (bottomOffset ?? defaultBottomOffset) + insets.bottom;
     switch (position) {
       case 'bottomLeft':
         return {
           position: 'absolute',
           bottom,
-          left: 24,
+          left: edgeOffset,
           alignItems: 'flex-start'
         };
       case 'bottomCenter':
@@ -302,14 +327,14 @@ const FloatingActionButtonGroup = props => {
         return {
           position: 'absolute',
           bottom,
-          right: 24,
+          right: edgeOffset,
           alignItems: 'flex-end'
         };
     }
-  }, [position, bottomOffset, insets.bottom]);
+  }, [position, bottomOffset, insets.bottom, defaultBottomOffset, edgeOffset]);
 
   // Vertical slot offset per index: secondary at index i sits (diameter + gap) * (i + 1) above primary
-  const slotOffset = index => -((sizeStyles.diameter + SECONDARY_GAP) * (index + 1));
+  const slotOffset = index => -((sizeStyles.diameter + secondaryGap) * (index + 1));
   const backdropOpacity = progress.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 0.4]
@@ -333,7 +358,7 @@ const FloatingActionButtonGroup = props => {
         testID: testID ? `${testID}-backdrop` : undefined
       })
     }) : null, /*#__PURE__*/_jsxs(View, {
-      style: positionStyle,
+      style: [positionStyle, containerStyle],
       accessibilityRole: 'menu',
       testID: testID,
       children: [actions.map((action, index) => {
@@ -369,13 +394,13 @@ const FloatingActionButtonGroup = props => {
               paddingVertical: theme.spacing.xs,
               borderRadius: theme.radius.sm,
               marginRight: theme.spacing.sm
-            }],
+            }, labelPillStyle],
             children: /*#__PURE__*/_jsx(Text, {
-              style: {
+              style: [{
                 color: theme.colors.text.primary,
                 fontSize: theme.typography.fontSize.sm,
                 fontWeight: theme.typography.fontWeight.medium
-              },
+              }, labelStyle],
               numberOfLines: 1,
               children: action.label
             })
@@ -392,7 +417,7 @@ const FloatingActionButtonGroup = props => {
               height: secondaryDiameter,
               borderRadius: secondaryDiameter / 2,
               backgroundColor: itemBackground
-            }],
+            }, secondaryActionStyle],
             testID: testID ? `${testID}-action-${action.key}` : undefined,
             children: /*#__PURE__*/React.isValidElement(action.icon) ? action.icon : /*#__PURE__*/_jsx(Text, {
               style: {

package/lib/module/components/ForceUpdateDialog/ForceUpdateDialog.js

@@ -27,7 +27,10 @@ export const ForceUpdateDialog = ({
   title = 'Update available',
   message = 'A new version of the app is available. Please update to continue using the latest features and security improvements.',
   updateLabel = 'Update now',
-  laterLabel = 'Later'
+  laterLabel = 'Later',
+  containerStyle,
+  titleStyle,
+  messageStyle
 }) => {
   const [updating, setUpdating] = useState(false);
   const handleUpdate = useCallback(() => {
@@ -68,7 +71,10 @@ export const ForceUpdateDialog = ({
     message: message,
     variant: "info",
     actions: actions,
-    dismissOnAction: false
+    dismissOnAction: false,
+    containerStyle: containerStyle,
+    titleStyle: titleStyle,
+    messageStyle: messageStyle
   });
 };
 export default ForceUpdateDialog;

package/lib/module/components/FormField/FormField.js

@@ -16,6 +16,7 @@ const FormField = /*#__PURE__*/forwardRef((props, ref) => {
     helperStyle,
     errorStyle,
     containerStyle,
+    inputContainerStyle: inputContainerStyleProp,
     accessibilityLabel,
     testID
   } = props;
@@ -56,12 +57,12 @@ const FormField = /*#__PURE__*/forwardRef((props, ref) => {
     testID: testID,
     children: [layout === 'inline' ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [labelNode, /*#__PURE__*/_jsx(View, {
-        style: inputContainerStyle,
+        style: [inputContainerStyle, inputContainerStyleProp],
         children: children
       })]
     }) : /*#__PURE__*/_jsxs(_Fragment, {
       children: [labelNode, /*#__PURE__*/_jsx(View, {
-        style: inputContainerStyle,
+        style: [inputContainerStyle, inputContainerStyleProp],
         children: children
       })]
     }), showHelper ? /*#__PURE__*/_jsx(Text, {