jfs-components 0.0.73 → 0.0.77

package/src/components/ActionFooter/ActionFooter.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   View,
+  Platform,
   type ViewStyle,
   type StyleProp,
-  Platform,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
@@ -12,48 +12,118 @@ import IconButton from '../IconButton/IconButton'
 export type ActionFooterProps = {
   /**
    * Content to render inside the action footer slot.
-   * Typically includes IconButton and Button components.
+   * Typically includes `IconButton` and `Button` components.
+   * `IconButton` children keep their intrinsic square size; everything else
+   * is auto-stretched to share the remaining horizontal space equally.
    */
   children?: React.ReactNode
   /**
    * Mode configuration passed to the token resolver.
-   * Pass the same modes to children components for consistent theming.
+   * Automatically merged into every slot child via {@link cloneChildrenWithModes}
+   * so callers don't have to thread modes down by hand.
    */
   modes?: Record<string, any>
   /**
-   * Optional style overrides for the container
+   * Optional style overrides for the outer container.
    */
   style?: StyleProp<ViewStyle>
   /**
-   * Accessibility label for the footer region
+   * Accessibility label for the footer region (announced for the toolbar).
    */
   accessibilityLabel?: string
 }
 
+const IS_WEB = Platform.OS === 'web'
+
+// ---------------------------------------------------------------------------
+// Yoga-safe stretch
+// ---------------------------------------------------------------------------
+//
+// React Native (Yoga) interprets the `flex: 1` shorthand as
+//   { flexGrow: 1, flexShrink: 1, flexBasis: 0 }
+// which is the *equal-share* variant. That is the correct math for what we
+// want here (equal-width action buttons), BUT Yoga has a well-known foot-gun
+// when this child sits inside a parent whose main-axis size hasn't been
+// resolved yet on the first layout pass: the child collapses to 0 and the
+// inner text gets clipped to "" before the parent ever measures.
+//
+// The defensive incantation used elsewhere in this codebase (see
+// `CardCTA.leftWrap` and the `MediaCard.Header` fix in CHANGELOG.md) is to
+// keep the equal-share math but explicitly clamp `minWidth` to 0 so Yoga
+// always allows the child to participate in the shrink algorithm, even when
+// the parent itself is in an undetermined state. Combined with explicit
+// `flexGrow`/`flexShrink`/`flexBasis` (NOT the `flex` shorthand) this
+// renders correctly on iOS, Android, and Web — and crucially never produces
+// the "buttons render as empty pills" failure mode the previous version had
+// on iOS dev clients.
+const STRETCH_STYLE: ViewStyle = {
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: 0,
+  minWidth: 0,
+}
+
+// Platform-specific drop shadow. Web boxShadow can't go through
+// Platform.select (RN's typed surface doesn't include it) so we keep it as a
+// separate constant and append it below.
+const NATIVE_SHADOW = Platform.select<ViewStyle>({
+  ios: {
+    shadowColor: '#0c0d10',
+    shadowOffset: { width: 0, height: -12 },
+    shadowOpacity: 0.16,
+    shadowRadius: 24,
+  },
+  android: {
+    elevation: 16,
+  },
+  default: {},
+}) as ViewStyle
+
+const WEB_SHADOW = IS_WEB
+  ? ({
+      boxShadow:
+        '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)',
+    } as ViewStyle)
+  : null
+
+// The runtime token a slot child must equal (by reference) to be treated as
+// an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
+// element.type identity comparison works for both `<IconButton />` from the
+// same module and any `React.memo`-wrapped re-export. The fallback check
+// (`type.type === IconButton`) catches one extra layer of `forwardRef` /
+// `memo` wrapping which can happen when consumers re-export the component.
+function isIconButtonElement(element: React.ReactElement<any>): boolean {
+  const t: any = element.type
+  if (t === IconButton) return true
+  if (t && typeof t === 'object' && t.type === IconButton) return true
+  return false
+}
+
 /**
- * ActionFooter component that provides a fixed footer container for action buttons.
- * 
- * This component is designed to hold action items like IconButton and Button components
- * at the bottom of a screen. It includes a shadow for visual separation from content above.
- * 
- * The `modes` prop is automatically passed to all slot children. If a child has its own
- * `modes` prop, it will be merged with the parent's modes (child modes take precedence).
- * 
- * @component
- * @param {Object} props - Component props
- * @param {React.ReactNode} [props.children] - Action elements to display (e.g., IconButton, Button)
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (automatically passed to children)
- * @param {Object} [props.style] - Optional style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the footer region
- * 
+ * ActionFooter — a sticky bottom container for primary screen actions.
+ *
+ * Layout contract:
+ *   - The outer container stretches horizontally (`alignSelf: 'stretch'`) so
+ *     it fills the parent regardless of whether the parent is a flex column,
+ *     a ScrollView contentContainer, or a plain View.
+ *   - The inner slot is a single row sized by its tallest child. It does NOT
+ *     use `flex: 1` — that previously caused the row to collapse to zero on
+ *     the first Yoga pass on native, taking the button labels with it.
+ *   - `IconButton` children keep their intrinsic square size.
+ *   - Every other child is auto-stretched with the Yoga-safe stretch style
+ *     above so two `<Button>` siblings render at equal width on iOS, Android,
+ *     and Web.
+ *
+ * The `modes` prop is automatically pushed down to every slot child via
+ * {@link cloneChildrenWithModes}; explicit child-level modes win over the
+ * parent's modes.
+ *
  * @example
  * ```tsx
- * // Basic usage - modes are automatically passed to all children.
- * // Non-IconButton children (e.g., Button) are auto-stretched to fill.
  * <ActionFooter modes={modes}>
  *   <IconButton iconName="ic_split" />
- *   <Button label="Request" />
- *   <Button label="Pay" />
+ *   <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
+ *   <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
  * </ActionFooter>
  * ```
  */
@@ -61,79 +131,75 @@ function ActionFooter({
   children,
   modes = EMPTY_MODES,
   style,
-  accessibilityLabel = undefined,
+  accessibilityLabel,
 }: ActionFooterProps) {
-  // Resolve design tokens
-  const backgroundColor = getVariableByName('actionFooter/background', modes) ?? '#ffffff'
-  const gap = getVariableByName('actionFooter/gap', modes) ?? 8
-  const paddingHorizontal = getVariableByName('actionFooter/padding/horizontal', modes) ?? 16
-  const paddingTop = getVariableByName('actionFooter/padding/top', modes) ?? 10
-  const paddingBottom = getVariableByName('actionFooter/padding/bottom', modes) ?? 41
+  // All token reads collapsed into a single useMemo keyed on `modes`. With
+  // the shared `EMPTY_MODES` default this resolves once for the common path
+  // and never re-allocates the container/slot style objects between renders.
+  const { containerStyle, slotStyle } = useMemo(() => {
+    const backgroundColor =
+      (getVariableByName('actionFooter/background', modes) ?? '#ffffff') as string
+    const gap = (getVariableByName('actionFooter/gap', modes) ?? 8) as number
+    const paddingHorizontal =
+      (getVariableByName('actionFooter/padding/horizontal', modes) ?? 16) as number
+    const paddingTop = (getVariableByName('actionFooter/padding/top', modes) ?? 10) as number
+    const paddingBottom = (getVariableByName('actionFooter/padding/bottom', modes) ?? 41) as number
 
-  // Shadow styles - cross-platform
-  const shadowStyle: ViewStyle = Platform.select({
-    ios: {
-      shadowColor: 'rgba(12, 13, 16, 1)',
-      shadowOffset: { width: 0, height: -12 },
-      shadowOpacity: 0.16,
-      shadowRadius: 24,
-    },
-    android: {
-      elevation: 16,
-    },
-    default: {
-      // Web shadow using boxShadow (RNW supports this)
-    },
-  }) as ViewStyle
+    const container: ViewStyle = {
+      // `alignSelf: 'stretch'` is the cross-platform way to ask "fill the
+      // parent's cross axis" — in the common case (column parent) this gives
+      // us full-width without the caller needing to pass `width: '100%'`.
+      alignSelf: 'stretch',
+      backgroundColor,
+      paddingLeft: paddingHorizontal,
+      paddingRight: paddingHorizontal,
+      paddingTop,
+      paddingBottom,
+      ...NATIVE_SHADOW,
+    }
 
-  const containerStyle: ViewStyle = {
-    backgroundColor,
-    paddingLeft: paddingHorizontal,
-    paddingRight: paddingHorizontal,
-    paddingTop,
-    paddingBottom,
-    ...shadowStyle,
-  }
+    const slot: ViewStyle = {
+      flexDirection: 'row',
+      // Vertically center the IconButton against the slightly taller Buttons
+      // so the row reads as a single optical baseline.
+      alignItems: 'center',
+      gap,
+    }
 
-  // Slot container style for horizontal layout of action items
-  const slotStyle: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap,
-    flex: 1,
-  }
+    return { containerStyle: container, slotStyle: slot }
+  }, [modes])
 
-  // Web-specific box-shadow
-  const webShadow = Platform.OS === 'web'
-    ? { boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)' } as any
-    : {}
-
-  const flatChildren = flattenChildren(children)
-  const processedChildren = cloneChildrenWithModes(flatChildren, modes)
-
-  const enhancedChildren = (processedChildren as React.ReactNode[]).map((child, index) => {
-    if (!React.isValidElement(child)) return child
-    const element = child as React.ReactElement<any>
-    const isIconButton = element.type === IconButton
-    const stretchStyle = isIconButton ? undefined : { flex: 1 }
-    return React.cloneElement(element, {
-      key: element.key ?? index,
-      style: [stretchStyle, element.props.style],
+  // Process children once per (children, modes) tuple:
+  //   1. Flatten Fragments so each action is its own keyed sibling.
+  //   2. Push `modes` down so callers don't have to thread it manually.
+  //   3. Auto-stretch every non-IconButton with the Yoga-safe stretch style.
+  //
+  // The result identity is stable across re-renders when the inputs don't
+  // change, which keeps the `React.memo`-wrapped Button/IconButton children
+  // from re-rendering for no reason.
+  const enhancedChildren = useMemo(() => {
+    const flat = flattenChildren(children)
+    const withModes = cloneChildrenWithModes(flat, modes) as React.ReactNode[]
+    return withModes.map((child, index) => {
+      if (!React.isValidElement(child)) return child
+      const element = child as React.ReactElement<any>
+      if (isIconButtonElement(element)) return element
+      return React.cloneElement(element, {
+        key: element.key ?? `action-footer-item-${index}`,
+        style: [STRETCH_STYLE, element.props.style],
+      })
     })
-  })
+  }, [children, modes])
 
   return (
     <View
-      style={[containerStyle, webShadow, style]}
+      style={[containerStyle, WEB_SHADOW, style]}
       accessibilityRole="toolbar"
-      accessibilityLabel={undefined}
+      accessibilityLabel={accessibilityLabel}
     >
-      <View style={slotStyle}>
-        {enhancedChildren}
-      </View>
+      <View style={slotStyle}>{enhancedChildren}</View>
     </View>
   )
 }
 
-export default ActionFooter
-
+export default React.memo(ActionFooter)

package/src/components/AppBar/AppBar.tsx

@@ -89,12 +89,13 @@ export default function AppBar({
   const containerStyle: ViewStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    // No `justifyContent` here: with the inline middle slot using `flex: 1`
+    // the three sections lay out naturally (leading | middle | actions).
+    // When middleSlot is absent we fall back to `space-between` at the wrapper
+    // level so leading & actions still anchor to the edges.
     paddingHorizontal: paddingHorizontal ?? 16,
     paddingVertical: paddingVertical ?? (isMain ? 16 : 10),
     backgroundColor: backgroundColor ?? '#FFFFFF',
-    // We can set minHeight if we want to enforce consistency, but padding should dictate it mostly.
-    // Figma shows specific heights implicitly via padding + content.
     // MainPage: h=68 (16 top/bot padding? 36 height content?)
     // SubPage: h=52
   }
@@ -159,9 +160,18 @@ export default function AppBar({
     ? <View style={actionsStyle}>{cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)}</View>
     : null
 
+  // When there is no middleSlot we want leading & actions pinned to the
+  // outer edges, so we apply `space-between` at the wrapper. With a middle
+  // slot present, the middle (flex: 1) absorbs the remaining space, so
+  // `space-between` is a no-op.
+  const wrapperStyle: ViewStyle = {
+    ...containerStyle,
+    justifyContent: processedMiddle ? 'flex-start' : 'space-between',
+  }
+
   return (
     <View
-      style={[containerStyle, style]}
+      style={[wrapperStyle, style]}
       accessibilityRole="header"
       accessibilityLabel={undefined}
       {...(accessibilityHint ? { accessibilityHint } : {})}
@@ -172,21 +182,22 @@ export default function AppBar({
         {processedLeading}
       </View>
 
-      {/* Middle Section (Absolute centered often, or flex? Figma shows "Slot 'Middle'" inside a wrapper that is absolute center) */}
-      {/* Figma: "absolute flex h-full items-center justify-center left-1/2 ... translate-x-[-50%]" */}
-      {/* We should only render this wrapper if there IS middle content, to avoid z-index blocking hits. */}
+      {/*
+       * Middle Section — rendered as an in-flow flex item (`flex: 1`) so it
+       * occupies the space between leading and actions but never overflows
+       * past them. This fixes wide children (e.g. <LinearProgress /> with
+       * width: '100%') stretching edge-to-edge under the leading/actions.
+       * `minWidth: 0` is required so the flex item can shrink below its
+       * content's intrinsic width on platforms that respect it (web).
+       */}
       {processedMiddle && (
         <View
           style={{
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
+            flex: 1,
+            minWidth: 0,
             alignItems: 'center',
             justifyContent: 'center',
-            zIndex: -1, // Behind actions if overlap? Or should be on top? 
-            // Usually middle title shouldn't block actions. `pointerEvents="box-none"` is safer.
+            paddingHorizontal: 8,
           }}
           pointerEvents="box-none"
         >

package/src/components/Avatar/Avatar.tsx

@@ -14,6 +14,8 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png')
 
@@ -134,6 +136,12 @@ export type AvatarProps = {
   accessibilityLabel?: string;
   onPress?: () => void;
   disabled?: boolean;
+  /**
+   * Explicit per-instance loading override. When `true`, renders a
+   * same-size circular skeleton instead of the avatar. Defaults to
+   * inheriting from the surrounding `<SkeletonGroup>`.
+   */
+  loading?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel'>;
 
 function Avatar({
@@ -145,11 +153,17 @@ function Avatar({
   // component intentionally renders `accessibilityLabel={undefined}` on the
   // wrapper (the inner Text/Image carry the label instead).
   accessibilityLabel: _accessibilityLabel,
+  loading,
   ...rest
 }: AvatarProps) {
   const isMonogram = style === 'Monogram'
   const tokens = useMemo(() => resolveAvatarTokens(modes, isMonogram), [modes, isMonogram])
 
+  // Skeleton context — read unconditionally; the actual short-circuit
+  // happens AFTER all remaining hooks below.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+
   // Focus is a sustained visible state — keep mirroring on web; gate the
   // setter so it never fires on native (where focus events don't fire on
   // these elements anyway).
@@ -197,6 +211,18 @@ function Avatar({
     [tokens.containerStyle, isFocused]
   )
 
+  if (isLoading) {
+    const size = tokens.containerStyle.width as number
+    return (
+      <Skeleton
+        kind="other"
+        width={size}
+        height={size}
+        modes={modes}
+      />
+    )
+  }
+
   // The inner content varies; everything else (wrapper, handlers, style) is shared.
   const innerContent = isMonogram ? (
     <View style={monogramContainerStyle}>

package/src/components/Badge/Badge.tsx

@@ -8,6 +8,8 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 type BadgeProps = {
   /** Visible label text shown inside the badge */
@@ -19,6 +21,12 @@ type BadgeProps = {
   accessibilityLabel?: string
   style?: ViewStyle
   labelStyle?: TextStyle
+  /**
+   * Explicit per-instance loading override. When `true`, renders a
+   * badge-shaped skeleton placeholder instead of the badge. Defaults to
+   * inheriting from the surrounding `<SkeletonGroup>`.
+   */
+  loading?: boolean
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel' | 'accessibilityRole'>
 
 function Badge({
@@ -28,6 +36,7 @@ function Badge({
   accessibilityLabel,
   style,
   labelStyle,
+  loading,
   ...rest
 }: BadgeProps) {
   // Resolve token values (fall back to sensible defaults)
@@ -51,6 +60,24 @@ function Badge({
     Number(getVariableByName('badge/label/lineHeight', modes) as unknown) ||
     Math.round(fontSize * 1.2)
 
+  // Skeleton short-circuit. Size derived from the same tokens the loaded
+  // badge would use so the placeholder occupies the same box.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+  if (isLoading) {
+    const charWidth = fontSize * 0.55
+    const labelWidth = Math.max(label.length, 3) * charWidth
+    return (
+      <Skeleton
+        kind="badge"
+        width={paddingHorizontal * 2 + labelWidth}
+        height={paddingVertical * 2 + lineHeight}
+        style={{ alignSelf: 'flex-start' }}
+        modes={modes}
+      />
+    )
+  }
+
   const Container: any = onPress ? Pressable : View
 
   const containerStyle: ViewStyle = {

package/src/components/Button/Button.tsx

@@ -14,6 +14,8 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 export type ButtonProps = SafePressableProps & {
   label?: string;
@@ -54,6 +56,13 @@ export type ButtonProps = SafePressableProps & {
    * Web-specific accessibility props (only used on web platform)
    */
   webAccessibilityProps?: WebAccessibilityProps;
+  /**
+   * Explicit per-instance loading override. When `true`, the button renders
+   * as a pill-shaped skeleton of the same size; when `false`, the
+   * surrounding `<SkeletonGroup>` is ignored. Defaults to inheriting from
+   * the group.
+   */
+  loading?: boolean;
 };
 
 // ---------------------------------------------------------------------------
@@ -224,6 +233,7 @@ function ButtonImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  loading,
   ...rest
 }: ButtonProps) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -248,6 +258,12 @@ function ButtonImpl({
     [modes, disabled]
   )
 
+  // Skeleton context — read unconditionally so React's hook order stays
+  // stable. The actual short-circuit return happens AFTER all remaining
+  // hooks have been called below.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+
   // Active label color: base by default; hover override (web-only) when hovered.
   // Press color is intentionally NOT applied to the label on native — applying
   // it would require a React render per touch and re-introduce the flicker.
@@ -354,6 +370,30 @@ function ButtonImpl({
     }
   }
 
+  if (isLoading) {
+    const { container, baseLabel, iconSize, accessoryOffset } = tokens
+    const paddingHorizontal = (container.paddingHorizontal as number) ?? 20
+    const paddingVertical = (container.paddingVertical as number) ?? 12
+    const lineHeight = (baseLabel.lineHeight as number) ?? 19
+    const fontSize = (baseLabel.fontSize as number) ?? 16
+    const labelText = typeof label === 'string' ? label : 'Button'
+    const charWidth = fontSize * 0.55
+    const labelWidth = Math.max(labelText.length, 4) * charWidth
+    const hasAccessory = !!(leading || trailing || icon)
+    const accessoryWidth = hasAccessory ? iconSize + accessoryOffset * 2 : 0
+    const skeletonWidth = paddingHorizontal * 2 + labelWidth + accessoryWidth
+    const skeletonHeight = paddingVertical * 2 + lineHeight
+    return (
+      <Skeleton
+        kind="other"
+        width={skeletonWidth}
+        height={skeletonHeight}
+        style={style as any}
+        modes={modes}
+      />
+    )
+  }
+
   return (
     <Pressable
       accessibilityRole="button"

package/src/components/CardBankAccount/CardBankAccount.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
     View,
     Text,
@@ -66,7 +66,14 @@ export type CardBankAccountProps = {
      * `false`/`null` to hide it entirely.
      */
     footer?: React.ReactNode | false | null
-    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    /**
+     * Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`).
+     *
+     * Defaults to `{ 'Button / Size': 'S', AppearanceBrand: 'Secondary',
+     * Emphasis: 'Medium' }` so the footer button matches the Figma reference
+     * out of the box. Caller-supplied modes are merged on top and can
+     * override any of the default keys.
+     */
     modes?: Record<string, any>
     /** Container style override. */
     style?: StyleProp<ViewStyle>
@@ -80,6 +87,14 @@ const DEFAULT_ITEMS: CardBankAccountItem[] = [
     { label: 'Last updated', value: 'Korem ipsum' },
 ]
 
+// Component-level defaults that match the Figma reference. Caller-provided
+// `modes` are merged on top so every key here can be overridden per-instance.
+const DEFAULT_MODES: Readonly<Record<string, any>> = Object.freeze({
+    'Button / Size': 'S',
+    AppearanceBrand: 'Secondary',
+    Emphasis: 'Medium',
+})
+
 const toNumber = (value: unknown, fallback: number): number => {
     if (typeof value === 'number') return Number.isFinite(value) ? value : fallback
     if (typeof value === 'string') {
@@ -119,10 +134,21 @@ function CardBankAccount({
     buttonLabel = 'Button',
     onButtonPress,
     footer,
-    modes = EMPTY_MODES,
+    modes: propModes = EMPTY_MODES,
     style,
     accessibilityLabel,
 }: CardBankAccountProps) {
+    // Merge caller modes on top of `DEFAULT_MODES` so every default key
+    // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
+    // per-instance while still applying out of the box.
+    const modes = useMemo(
+        () =>
+            propModes === EMPTY_MODES
+                ? DEFAULT_MODES
+                : { ...DEFAULT_MODES, ...propModes },
+        [propModes],
+    )
+
     const background =
         (getVariableByName('bankAccountCard/background', modes) as string | null) ?? '#ffffff'
     const radius = toNumber(getVariableByName('bankAccountCard/radius', modes), 16)