jfs-components 0.0.69 → 0.0.71

package/lib/commonjs/components/MediaCard/GlassFill.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _blur = require("@react-native-community/blur");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_FALLBACK_DARK = '#1414174a';
+const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
+
+/**
+ * Glass / frosted surface for native (iOS + Android).
+ *
+ * Why this lives in its own platform-split file:
+ *   - `@react-native-community/blur` is a native-only module. Importing it on
+ *     web throws because the JS shim references native components that aren't
+ *     registered there. By using Metro's platform-extension resolution
+ *     (`GlassFill.tsx` for native, `GlassFill.web.tsx` for web), we keep the
+ *     web bundle free of any native-only imports.
+ *   - Centralizes the `intensity` (0–100) -> `blurAmount` (0–32) mapping so
+ *     callers can keep the Figma token semantics they already know.
+ *
+ * On iOS this is a real `UIVisualEffectView` (true OS-level live blur).
+ * On Android this uses the community blur view (RealtimeBlurView). On devices
+ * where realtime blur is unavailable, `reducedTransparencyFallbackColor` (and
+ * the explicit `overlayColor`) ensure the surface still renders as a
+ * translucent tinted scrim instead of disappearing.
+ */
+function GlassFill({
+  tint = 'dark',
+  intensity = 50,
+  overlayColor,
+  style
+}) {
+  const blurType = tint === 'light' ? 'light' : 'dark';
+  const blurAmount = Math.max(0, Math.min(32, Math.round(intensity * 0.32)));
+  const fallbackColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [_reactNative.StyleSheet.absoluteFill, style],
+    pointerEvents: "none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blur.BlurView, {
+      style: _reactNative.StyleSheet.absoluteFill,
+      blurType: blurType,
+      blurAmount: blurAmount,
+      reducedTransparencyFallbackColor: fallbackColor
+    }), overlayColor != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: overlayColor
+      }]
+    }) : null, _reactNative.Platform.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: 'rgba(255,255,255,0.03)',
+        opacity: 0.6
+      }]
+    }) : null]
+  });
+}
+var _default = exports.default = GlassFill;

package/lib/commonjs/components/MediaCard/GlassFill.web.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_FALLBACK_DARK = '#1414174a';
+const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
+
+/**
+ * Web counterpart of `GlassFill`.
+ *
+ * `@react-native-community/blur` does not ship a web implementation, so for
+ * the web bundle we render a translucent `View` with `backdrop-filter: blur()`
+ * — which is exactly how 0.0.67 and earlier shipped the glass effect on web.
+ * Native bundles pick up `GlassFill.tsx` instead via Metro's platform
+ * resolver; the web bundle picks up this file.
+ */
+function GlassFill({
+  tint = 'dark',
+  intensity = 50,
+  overlayColor,
+  style
+}) {
+  // Approximate mapping: intensity 0-100 -> ~0-30px CSS blur. Keeps parity
+  // with the native blur strength so the component looks roughly the same
+  // across platforms.
+  const blurPx = Math.max(0, Math.min(30, Math.round(intensity * 0.3)));
+  const tintColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [_reactNative.StyleSheet.absoluteFill, {
+      backgroundColor: tintColor
+    },
+    // backdrop-filter is a web-only CSS property; ignored by RN
+    // on native (we never bundle this file there anyway).
+    // @ts-ignore web-only style
+    {
+      backdropFilter: `blur(${blurPx}px)`,
+      WebkitBackdropFilter: `blur(${blurPx}px)`
+    }, style],
+    pointerEvents: "none"
+  });
+}
+var _default = exports.default = GlassFill;

package/lib/commonjs/components/MediaCard/MediaCard.js

@@ -12,9 +12,9 @@ exports.Title = Title;
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _expoBlur = require("expo-blur");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Image = _interopRequireDefault(require("../Image/Image"));
+var _GlassFill = _interopRequireDefault(require("./GlassFill"));
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -136,20 +136,24 @@ function Title({
  * Glass Footer — pinned to the bottom of the card, **always** on top of the
  * Header (`zIndex: 2`).
  *
- * Glass implementation (April 2026 best practice for RN/Expo):
- *  - **iOS:** `expo-blur`'s `BlurView` renders a native `UIVisualEffectView`,
- *    so this is a real OS-level live blur of whatever's underneath. We pick
- *    `tint` from the Figma "Contrast Context" mode (`'dark'` / `'light'`)
- *    and a moderate intensity that matches the Figma `blur/minimal` token.
- *  - **Android:** the same `BlurView` with `experimentalBlurMethod="dimezisBlurView"`
- *    enables the hardware-accelerated `RenderEffect` blur on Android 12+.
- *    On older Android, expo-blur cleanly degrades to a tinted scrim — we
- *    layer a subtle noise/grain overlay on top so the surface still reads
- *    as "frosted glass" instead of a flat color.
- *  - **Web:** `BlurView` on web is implemented as `backdrop-filter: blur()`,
- *    which already worked in the previous version. Same component, same API.
+ * Glass implementation:
+ *  - **iOS / Android:** `<GlassFill>` (this folder) wraps
+ *    `@react-native-community/blur`'s `BlurView`. iOS gets a real
+ *    `UIVisualEffectView` (live OS blur); Android gets the community
+ *    `RealtimeBlurView` with a token-driven tinted scrim fallback for
+ *    devices where realtime blur is unavailable.
+ *  - **Web:** the platform-extension file `GlassFill.web.tsx` renders a
+ *    translucent View with `backdrop-filter: blur()` — Metro picks the
+ *    correct file automatically, so the web bundle never imports the
+ *    native-only blur module.
  *
- * Tokens still drive the tint color, blur radius and inner spacing.
+ * Why we don't use `expo-blur`: it requires Expo Modules autolinking on the
+ * consumer side (`use_expo_modules!` / `ExpoModulesPackage`), which silently
+ * breaks bare React Native apps that just install this library and run
+ * `pod install`. `@react-native-community/blur` is a regular RN native
+ * module — autolinking handles it with no additional setup.
+ *
+ * Tokens still drive the tint color, blur intensity and inner spacing.
  */
 function Footer({
   children,
@@ -163,10 +167,14 @@ function Footer({
   const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/vertical', modes) || '12');
 
   // Figma tokens:
-  //   blur/minimal/background -> tint laid over the native blur
-  //   blur/minimal            -> blur radius (px). expo-blur takes a 0-100
-  //                              "intensity" instead of px; we map roughly:
-  //                              intensity ≈ clamp(radius * 1.7, 0, 100).
+  //   blur/minimal/background -> tint laid over the live blur, also used
+  //                              as the iOS reduced-transparency fallback.
+  //   blur/minimal            -> blur radius (px). The community BlurView
+  //                              uses `blurAmount` (~0-32). `GlassFill`
+  //                              accepts a 0-100 "intensity" (kept compat
+  //                              with the previous expo-blur scale) and
+  //                              maps it internally — here we convert the
+  //                              token's radius to that intensity scale.
   const glassBgColor = (0, _figmaVariablesResolver.getVariableByName)('blur/minimal/background', modes) || '#1414174a';
   const blurRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes) || '29');
   const intensity = Math.max(0, Math.min(100, Math.round(blurRadius * 1.7)));
@@ -187,22 +195,11 @@ function Footer({
       zIndex: 2
     }, style],
     pointerEvents: "box-none",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_expoBlur.BlurView, {
-      style: _reactNative.StyleSheet.absoluteFill,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
       tint: tint,
       intensity: intensity,
-      experimentalBlurMethod: "dimezisBlurView"
+      overlayColor: glassBgColor
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [_reactNative.StyleSheet.absoluteFill, {
-        backgroundColor: glassBgColor
-      }]
-    }), _reactNative.Platform.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [_reactNative.StyleSheet.absoluteFill, {
-        backgroundColor: 'rgba(255,255,255,0.03)',
-        opacity: 0.6
-      }],
-      pointerEvents: "none"
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center',

package/lib/commonjs/components/Nudge/Nudge.js

@@ -4,33 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _reactUtils = require("../../utils/react-utils");
 var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function Nudge({
-  variant = 'Default',
-  title = 'Split payment',
-  body = 'Split this transaction into installments',
-  buttonLabel = 'Button',
-  onPressButton,
-  buttonSlot,
-  startSlot,
-  children,
-  modes: propModes = _reactUtils.EMPTY_MODES,
-  style
-}) {
-  const {
-    modes: globalModes
-  } = (0, _JFSThemeProvider.useTokens)();
-  const modes = {
-    ...globalModes,
-    ...propModes
-  };
+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); }
+function toFontWeight(value, fallback) {
+  if (typeof value === 'number') return value.toString();
+  if (typeof value === 'string') return value;
+  return fallback;
+}
+function resolveNudgeTokens(modes) {
   const background = (0, _figmaVariablesResolver.getVariableByName)('nudge/background', modes) || '#f5f5f5';
   const radius = (0, _figmaVariablesResolver.getVariableByName)('nudge/radius', modes) || 12;
   const paddingH = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/horizontal', modes) || 12;
@@ -38,106 +27,209 @@ function Nudge({
   const gap = (0, _figmaVariablesResolver.getVariableByName)('nudge/gap', modes) || 6;
   const titleColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/color', modes) || '#0d0d0f';
   const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontSize', modes) || 14;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontFamily', modes) || 'JioType Var';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontFamily', modes) || 'System';
   const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/lineHeight', modes) || 15;
-  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontWeight', modes) || 700;
-  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+  const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontWeight', modes), '700');
   const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/color', modes) || '#1a1c1f';
   const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontSize', modes) || 12;
-  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes) || 'JioType Var';
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes) || 'System';
   const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/lineHeight', modes) || 16;
-  const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontWeight', modes) || 500;
-  const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
+  const bodyFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontWeight', modes), '500');
   const textGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/text/gap', modes) || 4;
   const contentGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/gap', modes) || 8;
   const contentMinHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/minHeight', modes) || 20;
-  const containerStyle = {
-    backgroundColor: background,
-    borderRadius: radius,
-    paddingHorizontal: paddingH,
-    paddingVertical: paddingV,
-    gap,
-    overflow: 'hidden',
-    ...(variant === 'Variant2' ? {
+  const startSlotGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/startSlot/gap', modes) || 4;
+  return {
+    containerBaseStyle: {
+      backgroundColor: background,
+      borderRadius: radius,
+      paddingHorizontal: paddingH,
+      paddingVertical: paddingV,
+      gap: gap,
+      overflow: 'hidden'
+    },
+    prominentContainerStyle: {
+      flexDirection: 'row',
+      alignItems: 'flex-start'
+    },
+    compactContainerStyle: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    detailedContainerStyle: {
       flexDirection: 'column',
       alignItems: 'flex-start'
-    } : {
+    },
+    contentStyle: {
+      flex: 1,
+      minWidth: 1,
+      minHeight: contentMinHeight,
+      justifyContent: 'center',
+      overflow: 'hidden'
+    },
+    compactOuterContentStyle: {
+      flex: 1,
+      minWidth: 1,
+      alignSelf: 'stretch',
+      justifyContent: 'center'
+    },
+    compactContentWrapStyle: {
       flexDirection: 'row',
+      alignItems: 'center',
+      gap: contentGap,
+      width: '100%'
+    },
+    textWrapStyle: {
+      gap: textGap,
+      alignItems: 'flex-start',
+      width: '100%'
+    },
+    compactTextWrapStyle: {
+      flex: 1,
+      minWidth: 1,
       alignItems: 'flex-start'
-    })
-  };
-  const titleStyle = {
-    color: titleColor,
-    fontSize: titleFontSize,
-    fontFamily: titleFontFamily,
-    lineHeight: titleLineHeight,
-    fontWeight: titleFontWeight
-  };
-  const bodyStyle = {
-    color: bodyColor,
-    fontSize: bodyFontSize,
-    fontFamily: bodyFontFamily,
-    lineHeight: bodyLineHeight,
-    fontWeight: bodyFontWeight
+    },
+    headerStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: gap,
+      width: '100%'
+    },
+    detailSlotStyle: {
+      gap: (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes) || 8,
+      width: '100%'
+    },
+    titleTextStyle: {
+      color: titleColor,
+      fontSize: titleFontSize,
+      fontFamily: titleFontFamily,
+      lineHeight: titleLineHeight,
+      fontWeight: titleFontWeight
+    },
+    bodyTextStyle: {
+      color: bodyColor,
+      fontSize: bodyFontSize,
+      fontFamily: bodyFontFamily,
+      lineHeight: bodyLineHeight,
+      fontWeight: bodyFontWeight
+    },
+    iconColor: (0, _figmaVariablesResolver.getVariableByName)('appearance/nudge/icon/color', modes) || '#5d00b5',
+    iconSize: (0, _figmaVariablesResolver.getVariableByName)('nudge/icon/size', modes) || 20,
+    startSlotGap: startSlotGap
   };
-  const processedStartSlot = startSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(startSlot), modes) : null;
-  const startSlotElement = processedStartSlot && processedStartSlot.length > 0 ? processedStartSlot.length === 1 ? processedStartSlot[0] : processedStartSlot : null;
-  if (variant === 'Variant2') {
+}
+function NudgeImpl({
+  type = 'stacked-prominent',
+  title = 'Split payment',
+  body = 'Split this transaction into installments',
+  buttonLabel = 'Button',
+  onPressButton,
+  buttonSlot,
+  startSlot,
+  children,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveNudgeTokens(modes), [modes]);
+  const startSlotElement = (0, _react.useMemo)(() => {
+    if (startSlot === null || startSlot === false) return null;
+    if (startSlot !== undefined) {
+      const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(startSlot), modes);
+      return processed.length === 1 ? processed[0] : processed;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: "ic_ai_sparkle",
+      size: tokens.iconSize,
+      color: tokens.iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    });
+  }, [startSlot, modes, tokens.iconColor, tokens.iconSize]);
+  const startSlotWrapper = startSlotElement ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      gap: tokens.startSlotGap,
+      alignItems: 'center'
+    },
+    children: startSlotElement
+  }) : null;
+  const processedChildren = (0, _react.useMemo)(() => {
+    if (!children) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [children, modes]);
+  const buttonElement = buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(buttonSlot), modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    label: buttonLabel,
+    modes: modes,
+    ...(onPressButton ? {
+      onPress: onPressButton
+    } : {})
+  });
+  if (type === 'stacked-detailed') {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [containerStyle, style],
+      style: [tokens.containerBaseStyle, tokens.detailedContainerStyle, style],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 6,
-          width: '100%'
-        },
-        children: [startSlotElement, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [titleStyle, {
+        style: tokens.headerStyle,
+        children: [startSlotWrapper, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [tokens.titleTextStyle, {
             flex: 1
           }],
           children: title
         })]
-      }), children ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), modes) : null]
+      }), processedChildren ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: tokens.detailSlotStyle,
+        children: processedChildren
+      }) : null]
+    });
+  }
+  if (type === 'inline-compact') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [tokens.containerBaseStyle, tokens.compactContainerStyle, style],
+      children: [startSlotWrapper, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: tokens.compactOuterContentStyle,
+        children: processedChildren || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: tokens.compactContentWrapStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: tokens.compactTextWrapStyle,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: tokens.bodyTextStyle,
+              children: body
+            })
+          }), buttonElement]
+        })
+      })]
     });
   }
-  const defaultContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  const prominentContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: {
-      gap: contentGap,
+      gap: tokens.compactContentWrapStyle.gap,
       alignItems: 'flex-start',
       width: '100%'
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        gap: textGap,
-        alignItems: 'flex-start',
-        width: '100%'
-      },
+      style: tokens.textWrapStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: titleStyle,
+        style: tokens.titleTextStyle,
         children: title
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: bodyStyle,
+        style: tokens.bodyTextStyle,
         children: body
       })]
-    }), buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(buttonSlot), modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      label: buttonLabel,
-      onPress: onPressButton,
-      modes: modes
-    })]
+    }), buttonElement]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [containerStyle, style],
-    children: [startSlotElement, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        flex: 1,
-        minWidth: 1,
-        minHeight: contentMinHeight,
-        justifyContent: 'center',
-        overflow: 'hidden'
-      },
-      children: children ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), modes) : defaultContent
+    style: [tokens.containerBaseStyle, tokens.prominentContainerStyle, style],
+    children: [startSlotWrapper, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.contentStyle,
+      children: processedChildren || prominentContent
     })]
   });
 }
+const Nudge = /*#__PURE__*/_react.default.memo(NudgeImpl);
 var _default = exports.default = Nudge;

package/lib/commonjs/components/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "Card", {
     return _Card.default;
   }
 });
+Object.defineProperty(exports, "CardAdvisory", {
+  enumerable: true,
+  get: function () {
+    return _CardAdvisory.default;
+  }
+});
 Object.defineProperty(exports, "CardCTA", {
   enumerable: true,
   get: function () {
@@ -129,6 +135,24 @@ Object.defineProperty(exports, "ChipSelect", {
     return _ChipSelect.default;
   }
 });
+Object.defineProperty(exports, "CircularProgressBar", {
+  enumerable: true,
+  get: function () {
+    return _CircularProgressBar.default;
+  }
+});
+Object.defineProperty(exports, "CircularProgressBarDoted", {
+  enumerable: true,
+  get: function () {
+    return _CircularProgressBarDoted.default;
+  }
+});
+Object.defineProperty(exports, "CircularRating", {
+  enumerable: true,
+  get: function () {
+    return _CircularRating.default;
+  }
+});
 Object.defineProperty(exports, "DebitCard", {
   enumerable: true,
   get: function () {
@@ -177,6 +201,12 @@ Object.defineProperty(exports, "FormField", {
     return _FormField.default;
   }
 });
+Object.defineProperty(exports, "Gauge", {
+  enumerable: true,
+  get: function () {
+    return _Gauge.default;
+  }
+});
 Object.defineProperty(exports, "HStack", {
   enumerable: true,
   get: function () {
@@ -522,6 +552,7 @@ var _BottomNav = _interopRequireDefault(require("./BottomNav/BottomNav"));
 var _BottomNavItem = _interopRequireDefault(require("./BottomNavItem/BottomNavItem"));
 var _Button = _interopRequireDefault(require("./Button/Button"));
 var _Card = _interopRequireDefault(require("./Card/Card"));
+var _CardAdvisory = _interopRequireDefault(require("./CardAdvisory/CardAdvisory"));
 var _Carousel = _interopRequireDefault(require("./Carousel/Carousel"));
 var _Checkbox = _interopRequireDefault(require("./Checkbox/Checkbox"));
 var _CardFeedback = _interopRequireDefault(require("./CardFeedback/CardFeedback"));
@@ -533,6 +564,10 @@ var _DebitCard = _interopRequireDefault(require("./DebitCard/DebitCard"));
 var _FilterBar = _interopRequireDefault(require("./FilterBar/FilterBar"));
 var _Form = _interopRequireWildcard(require("./Form/Form"));
 var _FormField = _interopRequireDefault(require("./FormField/FormField"));
+var _CircularProgressBar = _interopRequireDefault(require("./CircularProgressBar/CircularProgressBar"));
+var _CircularProgressBarDoted = _interopRequireDefault(require("./CircularProgressBarDoted/CircularProgressBarDoted"));
+var _CircularRating = _interopRequireDefault(require("./CircularRating/CircularRating"));
+var _Gauge = _interopRequireDefault(require("./Gauge/Gauge"));
 var _HoldingsCard = _interopRequireDefault(require("./HoldingsCard/HoldingsCard"));
 var _HStack = _interopRequireDefault(require("./HStack/HStack"));
 var _IconButton = _interopRequireDefault(require("./IconButton/IconButton"));