jfs-components 0.1.55 → 0.1.57

package/lib/commonjs/utils/react-utils.js

@@ -69,8 +69,11 @@ function cloneChildrenWithModes(children, modes, forcedModes) {
     } : modes;
     let processedChildren;
     if (hasChildren) {
+      // Descendants inherit this child's merged modes, not the ancestor's
+      // raw modes — so nested containers (e.g. ButtonGroup Neutral inside
+      // a CardCTA slot that injects Secondary) can cascade correctly.
       const childArray = _react.default.Children.toArray(childChildren);
-      const processed = cloneChildrenWithModes(childArray, modes, forcedModes);
+      const processed = cloneChildrenWithModes(childArray, mergedModes, forcedModes);
       processedChildren = processed.length === 1 ? processed[0] : processed;
     }
     result.push(/*#__PURE__*/_react.default.cloneElement(child, {

package/lib/module/components/ButtonGroup/ButtonGroup.js

@@ -3,21 +3,21 @@
 import React from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
 import IconButton from '../IconButton/IconButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * ButtonGroup component that aggregates multiple buttons (e.g., IconButton)
  * and handles their layout and styling/theming via design tokens.
  *
- * It passes the provided `modes` to all its immediate React Element children.
- * Non-IconButton children (e.g., Button) are automatically stretched to fill
- * available space. IconButton children keep their natural width.
+ * Group `modes` cascade to every child (and nested slot children). A child's
+ * own `modes` still win on conflict. Non-IconButton children (e.g. Button) are
+ * stretched to fill available space; IconButton children keep intrinsic width.
  *
  * @component
  * @example
  * ```jsx
- * <ButtonGroup modes={{"Color Mode": "Light"}}>
+ * <ButtonGroup modes={{"Color Mode": "Light", AppearanceBrand: "Neutral"}}>
  *   <IconButton iconName="ic_qr_code" />
  *   <Button label="Pay" />
  * </ButtonGroup>
@@ -28,12 +28,9 @@ function ButtonGroup({
   modes = EMPTY_MODES,
   style
 }) {
-  // Resolve design tokens
   const gap = getVariableByName('buttonGroup/gap', modes) ?? 12;
   const paddingHorizontal = getVariableByName('buttonGroup/padding/horizontal', modes) ?? 0;
   const paddingVertical = getVariableByName('buttonGroup/padding/vertical', modes) ?? 0;
-
-  // Container style
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',
@@ -41,27 +38,20 @@ function ButtonGroup({
     paddingHorizontal: paddingHorizontal,
     paddingVertical: paddingVertical
   };
-
-  // Flatten children to handle Fragments properly
   const flatChildren = flattenChildren(children);
-  const childrenWithModes = React.Children.map(flatChildren, child => {
-    if (/*#__PURE__*/React.isValidElement(child)) {
-      const element = child;
-      const childModes = element.props.modes || {};
-      const mergedModes = {
-        ...modes,
-        ...childModes
-      };
-      const isIconButton = element.type === IconButton;
-      const stretchStyle = isIconButton ? undefined : {
-        flex: 1
-      };
-      return /*#__PURE__*/React.cloneElement(element, {
-        modes: mergedModes,
-        style: [stretchStyle, element.props.style]
-      });
+  const cascadedChildren = cloneChildrenWithModes(flatChildren, modes);
+  const childrenWithModes = React.Children.map(cascadedChildren, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
     }
-    return child;
+    const element = child;
+    const isIconButton = element.type === IconButton;
+    const stretchStyle = isIconButton ? undefined : {
+      flex: 1
+    };
+    return /*#__PURE__*/React.cloneElement(element, {
+      style: [stretchStyle, element.props.style]
+    });
   });
   return /*#__PURE__*/_jsx(View, {
     style: [containerStyle, style],

package/lib/module/components/CardCTA/CardCTA.js

@@ -41,6 +41,8 @@ function CardCTA({
   onPressButton,
   ratingLabel = '+28 Rating',
   showRatingActions = true,
+  showButton = true,
+  ratingMediaAlign = 'center',
   onPressLike,
   onPressDislike,
   headline = 'Headline',
@@ -127,11 +129,14 @@ function CardCTA({
     AppearanceBrand: 'Secondary',
     'Button / Size': 'S'
   };
+  // Rating footer IconButtons are Neutral / S / Low per Figma. Apply those
+  // AFTER cascaded modes so card-level AppearanceBrand (often Secondary)
+  // cannot override the footer chrome.
   const iconButtonModes = {
+    ...modes,
     'Button / Size': 'S',
-    'Emphasis': 'Low',
-    'AppearanceBrand': 'Neutral',
-    ...modes
+    Emphasis: 'Low',
+    AppearanceBrand: 'Neutral'
   };
   const effectiveButtonLabel = buttonLabel ?? (isRating ? 'Save' : 'Button');
   const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0');
@@ -204,7 +209,13 @@ function CardCTA({
     borderWidth: borderSize,
     borderColor,
     flexDirection: isRating || isSip ? 'column' : 'row',
-    overflow: 'visible'
+    overflow: 'visible',
+    // Pin footer to the bottom when a parent (e.g. equal-height Carousel)
+    // assigns an explicit height. Do not flexGrow — that unbounded-grows
+    // inside horizontal ScrollViews and blows cards to infinite height.
+    ...(isRating ? {
+      justifyContent: 'space-between'
+    } : {})
   };
 
   // NOTE: `minWidth: 0` + explicit `flexShrink: 1` are required on native.
@@ -353,16 +364,23 @@ function CardCTA({
     paddingHorizontal: ratingContentPaddingH,
     paddingVertical: ratingContentPaddingV,
     gap: ratingContentGap,
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
+    alignSelf: 'stretch'
+  };
+  const ratingMediaStyle = {
+    alignSelf: 'stretch',
+    width: '100%',
+    alignItems: ratingMediaAlign === 'center' ? 'center' : 'flex-start'
   };
   const ratingFooterStyle = {
     flexDirection: 'row',
     alignItems: 'flex-start',
-    justifyContent: 'space-between',
+    justifyContent: showButton ? 'space-between' : 'flex-start',
     paddingHorizontal: ratingFooterPaddingH,
     paddingTop: ratingFooterPaddingTop,
     paddingBottom: ratingFooterPaddingBottom,
-    overflow: 'visible'
+    overflow: 'visible',
+    alignSelf: 'stretch'
   };
   const buttonLabelStyle = {
     flexGrow: 0,
@@ -446,9 +464,12 @@ function CardCTA({
       style: [containerStyle, style],
       children: [/*#__PURE__*/_jsxs(View, {
         style: ratingContentStyle,
-        children: [ratingBadgeSlot ? cloneChildrenWithModes(ratingBadgeSlot, modes) : /*#__PURE__*/_jsx(Badge, {
-          label: ratingLabel,
-          modes: modes
+        children: [/*#__PURE__*/_jsx(View, {
+          style: ratingMediaStyle,
+          children: ratingBadgeSlot ? cloneChildrenWithModes(ratingBadgeSlot, modes) : /*#__PURE__*/_jsx(Badge, {
+            label: ratingLabel,
+            modes: modes
+          })
         }), /*#__PURE__*/_jsxs(View, {
           style: textWrapStyle,
           children: [/*#__PURE__*/_jsx(Text, {
@@ -461,7 +482,7 @@ function CardCTA({
         })]
       }), /*#__PURE__*/_jsxs(View, {
         style: ratingFooterStyle,
-        children: [/*#__PURE__*/_jsx(View, {
+        children: [showButton ? /*#__PURE__*/_jsx(View, {
           style: ratingButtonWrapStyle,
           children: buttonSlot ? cloneChildrenWithModes(buttonSlot, buttonModes) : /*#__PURE__*/_jsx(Button, {
             label: effectiveButtonLabel,
@@ -470,17 +491,19 @@ function CardCTA({
             style: ratingButtonStyle,
             renderContent: renderButtonContent(ratingButtonLabelStyle)
           })
-        }), showRatingActions ? ratingActionsSlot ? cloneChildrenWithModes(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/_jsxs(ButtonGroup, {
+        }) : null, showRatingActions ? ratingActionsSlot ? cloneChildrenWithModes(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/_jsxs(ButtonGroup, {
           modes: iconButtonModes,
           children: [/*#__PURE__*/_jsx(IconButton, {
             iconName: "ic_like",
             accessibilityLabel: "Like",
+            modes: iconButtonModes,
             ...(onPressLike ? {
               onPress: onPressLike
             } : {})
           }), /*#__PURE__*/_jsx(IconButton, {
             iconName: "ic_dislike",
             accessibilityLabel: "Dislike",
+            modes: iconButtonModes,
             ...(onPressDislike ? {
               onPress: onPressDislike
             } : {})

package/lib/module/components/Carousel/Carousel.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';
-import { View, ScrollView, Animated, Pressable } from 'react-native';
+import { View, ScrollView, Animated, Pressable, StyleSheet } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import AutoplayControl from '../AutoplayControl/AutoplayControl';
@@ -37,8 +37,12 @@ export function Carousel({
   loop = true,
   gap: gapProp,
   itemWidth: itemWidthProp,
+  itemInset,
+  bleedHorizontal,
   paddingHorizontal: paddingHorizontalProp,
   paddingVertical: paddingVerticalProp,
+  equalHeight = true,
+  maxHeight: maxHeightProp,
   type = 'Default',
   onIndexChange,
   style
@@ -50,7 +54,7 @@ export function Carousel({
   const containerPaddingH = parseFloat(getVariableByName('carousel/padding/horizontal', modes));
   const containerPaddingV = parseFloat(getVariableByName('carousel/padding/vertical', modes));
   // Outer container max height per Figma (`carousel/maxHeight`).
-  const maxHeight = parseFloat(getVariableByName('carousel/maxHeight', modes));
+  const tokenMaxHeight = parseFloat(getVariableByName('carousel/maxHeight', modes));
   // Gap between AutoplayControl and NumberPagination in the Numbered overlay.
   const controlGap = parseFloat(getVariableByName('carouselControl/gap', modes));
 
@@ -79,15 +83,47 @@ export function Carousel({
   const items = useMemo(() => React.Children.toArray(children).filter(React.isValidElement), [children]);
   const totalItems = items.length;
 
-  // Effective item width: provided prop, or full container width minus peek offsets.
+  // Effective item width: explicit prop, itemInset derivation, or token peek.
   // For the Numbered variant the items are full-bleed (no peek padding).
   const effectiveItemWidth = useMemo(() => {
     if (itemWidthProp != null) return itemWidthProp;
     if (containerWidth === 0) return 0;
     if (isNumbered) return containerWidth;
+    if (itemInset != null) {
+      return Math.max(0, containerWidth - itemInset * 2);
+    }
     // Full-width minus peekOffset on each side
     return containerWidth - containerPaddingH * 4;
-  }, [itemWidthProp, containerWidth, containerPaddingH, isNumbered]);
+  }, [itemWidthProp, itemInset, containerWidth, containerPaddingH, isNumbered]);
+
+  // Equal-height: measure each slide's intrinsic height, then lock every slot
+  // to the tallest. Do NOT use contentContainerStyle.alignItems:'stretch' or
+  // height:'100%' without a bounded cross-axis — in a horizontal ScrollView
+  // that resolves to an unbounded/infinite height.
+  const slideHeightsRef = useRef({});
+  const [equalizedHeight, setEqualizedHeight] = useState();
+  const equalizedHeightRef = useRef(undefined);
+  equalizedHeightRef.current = equalizedHeight;
+  useEffect(() => {
+    slideHeightsRef.current = {};
+    equalizedHeightRef.current = undefined;
+    setEqualizedHeight(undefined);
+  }, [totalItems, effectiveItemWidth, equalHeight]);
+  const handleSlideLayout = useCallback(index => event => {
+    if (!equalHeight) return;
+    // Only measure while unconstrained. After lock, the slot height is forced
+    // and onLayout would just echo equalizedHeight.
+    if (equalizedHeightRef.current != null) return;
+    const height = Math.ceil(event.nativeEvent.layout.height);
+    if (height <= 0) return;
+    const previous = slideHeightsRef.current[index] ?? 0;
+    if (height <= previous) return;
+    slideHeightsRef.current[index] = height;
+    const measured = items.map((_, i) => slideHeightsRef.current[i]);
+    if (measured.some(value => value == null)) return;
+    const next = Math.max(...measured);
+    setEqualizedHeight(next);
+  }, [equalHeight, items]);
 
   // Snap interval = item width + gap
   const snapInterval = effectiveItemWidth + gap;
@@ -221,14 +257,20 @@ export function Carousel({
   }, [isPlaying, startAutoPlay, clearAutoPlay]);
 
   // ---- Render ----
-  // Explicit padding props win verbatim; otherwise fall back to the
-  // token-derived values (horizontal keeps its legacy ×2 "peek" multiplier).
-  // Numbered variant is full-bleed: zero padding.
-  const effectivePaddingH = isNumbered ? 0 : paddingHorizontalProp ?? containerPaddingH;
+  // Padding priority: Numbered → 0; itemInset → inset; explicit padding →
+  // verbatim; else token (legacy ×2 peek is applied via item width, not here).
+  const effectivePaddingH = isNumbered ? 0 : itemInset ?? paddingHorizontalProp ?? containerPaddingH;
   const effectivePaddingV = isNumbered ? 0 : paddingVerticalProp ?? containerPaddingV;
+
+  // Equal-height rows hug content — don't clip with the token maxHeight unless
+  // the caller opts into a numeric max (or disables equalHeight for legacy strips).
+  const resolvedMaxHeight = isNumbered ? undefined : maxHeightProp === false ? undefined : typeof maxHeightProp === 'number' ? maxHeightProp : equalHeight ? undefined : tokenMaxHeight;
   const outerStyle = {
     paddingVertical: effectivePaddingV,
-    maxHeight: isNumbered ? undefined : maxHeight,
+    maxHeight: resolvedMaxHeight,
+    ...(bleedHorizontal != null ? {
+      marginHorizontal: -Math.abs(bleedHorizontal)
+    } : {}),
     // Numbered needs relative positioning for the floating controls overlay.
     ...(isNumbered ? {
       overflow: 'hidden'
@@ -237,7 +279,8 @@ export function Carousel({
   const contentContainerStyle = {
     paddingHorizontal: effectivePaddingH,
     gap,
-    // Align items to the start so snap works correctly
+    // Always flex-start on the cross axis. Stretch + unbounded ScrollView
+    // height is what caused infinite-tall slides.
     alignItems: 'flex-start'
   };
   return /*#__PURE__*/_jsx(CarouselContext.Provider, {
@@ -260,6 +303,8 @@ export function Carousel({
         onScrollEndDrag: handleScrollEndDrag,
         onMomentumScrollEnd: finishProgrammaticScroll,
         children: items.map((child, index) => {
+          const hasEqualizedHeight = equalHeight && equalizedHeight != null && equalizedHeight > 0;
+
           // Strict slot box: width must be honored; never grow or shrink with
           // content, and clip anything that misbehaves (e.g. a child whose
           // inner flex layout would otherwise leak into the next slot on
@@ -269,7 +314,10 @@ export function Carousel({
             flexGrow: 0,
             flexShrink: 0,
             flexBasis: effectiveItemWidth > 0 ? effectiveItemWidth : 'auto',
-            overflow: 'hidden'
+            overflow: 'hidden',
+            ...(hasEqualizedHeight ? {
+              height: equalizedHeight
+            } : {})
           };
 
           // The cloned style forces the child's outer node to also honor the
@@ -279,7 +327,11 @@ export function Carousel({
             width: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
             maxWidth: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
             flexGrow: 0,
-            flexShrink: 0
+            flexShrink: 0,
+            ...(hasEqualizedHeight ? {
+              height: '100%',
+              alignSelf: 'stretch'
+            } : {})
           };
 
           // Pass modes down to children
@@ -292,7 +344,11 @@ export function Carousel({
           }) : child;
           return /*#__PURE__*/_jsx(View, {
             style: slotStyle,
-            children: childWithModes
+            children: /*#__PURE__*/_jsx(View, {
+              style: hasEqualizedHeight ? styles.equalizedFill : undefined,
+              onLayout: handleSlideLayout(index),
+              children: childWithModes
+            })
           }, index);
         })
       }), !isNumbered && showPagination && totalItems > 1 && /*#__PURE__*/_jsx(Pagination, {
@@ -441,6 +497,11 @@ function AnimatedDot({
     }
   });
 }
+const styles = StyleSheet.create({
+  equalizedFill: {
+    flex: 1
+  }
+});
 
 // ---------------------------------------------------------------------------
 // Attach sub-components

package/lib/module/design-tokens/figma-modes.generated.js

@@ -198,6 +198,7 @@ export const FIGMA_MODES = {
   "NavArrow Direction": ["Left&Right", "Top&Bottom"],
   "NoteInput / Output": ["Default"],
   "Nudge / Output": ["Default"],
+  "Nudge Border Radius ": ["Default", "Pill"],
   "Nudge padding": ["Default", "None"],
   "number pagination": ["Default"],
   "Numpad / Output": ["Default"],
@@ -322,19 +323,19 @@ export const FIGMA_COMPONENT_MODES = {
   "AvatarGroup": ["Avatar Size", "Badge Size", "Context4"],
   "Badge": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "Emphasis", "Semantic Intent"],
   "Balance": ["Color Mode", "Context3"],
-  "BenefitCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap", "Text Appearance", "Text Sizes", "Weight"],
+  "BenefitCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Nudge Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap", "Text Appearance", "Text Sizes", "Weight"],
   "BottomNav": ["Color Mode"],
   "BottomNavItem": ["BottomNavItem / State", "Color Mode"],
   "BrandChip": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "BubbleChart": ["Appearance / DataViz", "Color Mode", "Context", "context 10", "Emphasis / DataViz", "Profile Card Appearance", "Text Appearance"],
   "Button": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
   "Card": ["AppearanceBrand", "AppearanceSystem", "Card Container", "Color Mode", "context 8", "Gap", "Page type", "Semantic Intent"],
-  "CardAdvisory": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
+  "CardAdvisory": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
   "CardBankAccount": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Context4", "context5", "Emphasis", "List Item Style", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
   "CardCTA": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context 8", "context 9", "Context4", "Emphasis", "Icon Capsule Size", "MediaBlock", "Page type", "Profile Card Appearance", "Semantic Intent"],
   "CardFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode"],
-  "CardFinancialCondition": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
-  "CardInsight": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context 8", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap", "Text Appearance"],
+  "CardFinancialCondition": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
+  "CardInsight": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context 8", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Nudge Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap", "Text Appearance"],
   "CardProviderInfo": ["AppearanceBrand", "Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "Carousel": ["peekOffset"],
   "CarouselCardAccounts": ["peekOffset"],
@@ -345,7 +346,7 @@ export const FIGMA_COMPONENT_MODES = {
   "CheckboxItem": ["Color Mode", "Context", "Slot gap"],
   "ChipSelect": ["ChipSelect State", "Color Mode"],
   "CircularProgressBar": ["AppearanceBrand", "AppearanceSystem", "circularProgressBar Size", "Color Mode", "Emphasis", "Semantic Intent"],
-  "CircularRating": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
+  "CircularRating": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Nudge Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
   "ClusterBubble": ["Appearance / DataViz", "Color Mode", "Context", "context 10", "Emphasis / DataViz", "Profile Card Appearance", "Text Appearance"],
   "CompareTable": ["Accordion States", "AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type", "Radius"],
   "ComparisonBar": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Icon Capsule Size", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
@@ -373,7 +374,7 @@ export const FIGMA_COMPONENT_MODES = {
   "HeroSection": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "context 9", "context7", "Emphasis", "FormField States", "InputState", "Page type", "Status"],
   "HoldingsCard": ["AppearanceBrand", "Color Mode"],
   "HStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"],
-  "Icon": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
+  "Icon": ["AppearanceBrand", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
   "IconButton": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
   "IconCapsule": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
   "InputSearch": ["Color Mode", "FormField States", "InputState", "Status"],
@@ -388,12 +389,12 @@ export const FIGMA_COMPONENT_MODES = {
   "MediaCard": ["Contrast Context"],
   "MerchantProfile": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "MessageField": ["Color Mode", "FormField States"],
-  "MetricData": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
+  "MetricData": ["AppearanceBrand", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
   "MetricLegendItem": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
   "MoneyValue": ["Color Mode", "Context3"],
   "MonthlyStatusGrid": ["Appearance / DataViz", "Calendar Glyph State", "Color Mode", "Emphasis / DataViz"],
   "NavArrow": ["Color Mode", "context 10", "Context2", "context5", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance"],
-  "Nudge": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
+  "Nudge": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Nudge Border Radius ", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
   "OTP": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "FormField States", "Input/PINSlot  States", "Page type", "Profile Card Appearance", "Semantic Intent", "Status"],
   "PageHero": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "PageHero Size", "Profile Card Appearance", "Semantic Intent", "Video / Output"],
   "PaymentFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
@@ -439,7 +440,7 @@ export const FIGMA_COMPONENT_MODES = {
   "TransactionBubble": ["Color Mode", "context 10", "Context2", "Context3", "context5", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance", "Transaction Status"],
   "TransactionStatus": ["Transaction Status"],
   "UpiHandle": ["Color Mode", "context 10", "Profile Card Appearance", "UPI Handle Image"],
-  "ValueBackMetric": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
+  "ValueBackMetric": ["AppearanceBrand", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
   "VStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"]
 };