jfs-components 0.1.54 → 0.1.56

package/.cursor/D2C-SCREEN.md

@@ -52,7 +52,8 @@ Resolve modes:
 3. Merge root → leaf; deeper entries override.
 4. Match name/position; use `nodeId` for duplicates.
 
-If `unresolved` exists, report every item/reason and stop:
+If `unresolved` exists, report every item/reason to the user, then ignore those
+entries and continue with the resolved modes:
 
 - `local collection`: packaged data cannot resolve a file-local collection.
 - `key not in variables JSON` / `mode not in collection`: packaged tokens stale.

package/.cursor/commands/D2C.md

@@ -9,7 +9,8 @@ implementation.**
 - User-stated behavior is authoritative. Figma defines visuals and designed
   states, not unspecified product logic.
 - Use Figma MCP. Never recreate an unreadable design from assumptions.
-- Use real package exports/props and extracted modes. Stop on unresolved modes.
+- Use real package exports/props and extracted modes. On unresolved modes,
+  notify the user then continue without them.
 - Fake demos stay local unless the user explicitly requests a service.
 - This may be recorded: present a clean first implementation. Never mention
   prior attempts, cached knowledge, mistakes, or “fixes.” Be concise:

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.1.56] - 2026-07-27
+
+- `Carousel` — `equalHeight` defaults to `true` (hug tallest slide; no token `maxHeight` clip). New `itemInset`, `bleedHorizontal`, and `maxHeight` (`number | false`) props for edge-aligned cards without consumer math. Opt out with `equalHeight={false}` to keep the legacy clipped strip. Storybook docs refreshed for the new API.
+- `CardCTA` (rating) — media/badge slot centers by default (`ratingMediaAlign`); `showButton={false}` for actions-only start-aligned footers; rating footer IconButtons keep Neutral / S / Low even when the card is Secondary; rating cards stretch and pin the footer in equal-height carousels.
+
+## [0.1.55] - 2026-07-27
+
+- D2C playbooks (`.cursor/commands/D2C.md`, `.cursor/D2C-FLOW.md`, `.cursor/D2C-SCREEN.md`) — on unresolved mode pairs, notify the user then continue with resolved modes (no longer stop execution).
+
+---
+
 ## [0.1.54] - 2026-07-27
 
 - Token / mode resolution pass against Figma Code Connect + Coin Variables:

package/lib/commonjs/components/ButtonGroup/ButtonGroup.js

@@ -15,14 +15,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * 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>
@@ -33,12 +33,9 @@ function ButtonGroup({
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
-  // Resolve design tokens
   const gap = (0, _figmaVariablesResolver.getVariableByName)('buttonGroup/gap', modes) ?? 12;
   const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('buttonGroup/padding/horizontal', modes) ?? 0;
   const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('buttonGroup/padding/vertical', modes) ?? 0;
-
-  // Container style
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',
@@ -46,27 +43,20 @@ function ButtonGroup({
     paddingHorizontal: paddingHorizontal,
     paddingVertical: paddingVertical
   };
-
-  // Flatten children to handle Fragments properly
   const flatChildren = (0, _reactUtils.flattenChildren)(children);
-  const childrenWithModes = _react.default.Children.map(flatChildren, child => {
-    if (/*#__PURE__*/_react.default.isValidElement(child)) {
-      const element = child;
-      const childModes = element.props.modes || {};
-      const mergedModes = {
-        ...modes,
-        ...childModes
-      };
-      const isIconButton = element.type === _IconButton.default;
-      const stretchStyle = isIconButton ? undefined : {
-        flex: 1
-      };
-      return /*#__PURE__*/_react.default.cloneElement(element, {
-        modes: mergedModes,
-        style: [stretchStyle, element.props.style]
-      });
+  const cascadedChildren = (0, _reactUtils.cloneChildrenWithModes)(flatChildren, modes);
+  const childrenWithModes = _react.default.Children.map(cascadedChildren, child => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
     }
-    return child;
+    const element = child;
+    const isIconButton = element.type === _IconButton.default;
+    const stretchStyle = isIconButton ? undefined : {
+      flex: 1
+    };
+    return /*#__PURE__*/_react.default.cloneElement(element, {
+      style: [stretchStyle, element.props.style]
+    });
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [containerStyle, style],

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -46,6 +46,8 @@ function CardCTA({
   onPressButton,
   ratingLabel = '+28 Rating',
   showRatingActions = true,
+  showButton = true,
+  ratingMediaAlign = 'center',
   onPressLike,
   onPressDislike,
   headline = 'Headline',
@@ -132,11 +134,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');
@@ -209,7 +214,14 @@ function CardCTA({
     borderWidth: borderSize,
     borderColor,
     flexDirection: isRating || isSip ? 'column' : 'row',
-    overflow: 'visible'
+    overflow: 'visible',
+    // Rating cards fill equal-height carousel slots and pin the footer down
+    // when free space exists; intrinsic height is unchanged when not stretched.
+    ...(isRating ? {
+      alignSelf: 'stretch',
+      justifyContent: 'space-between',
+      flexGrow: 1
+    } : {})
   };
 
   // NOTE: `minWidth: 0` + explicit `flexShrink: 1` are required on native.
@@ -358,16 +370,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,
@@ -451,9 +470,12 @@ function CardCTA({
       style: [containerStyle, style],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: ratingContentStyle,
-        children: [ratingBadgeSlot ? (0, _reactUtils.cloneChildrenWithModes)(ratingBadgeSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
-          label: ratingLabel,
-          modes: modes
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: ratingMediaStyle,
+          children: ratingBadgeSlot ? (0, _reactUtils.cloneChildrenWithModes)(ratingBadgeSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+            label: ratingLabel,
+            modes: modes
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: textWrapStyle,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -466,7 +488,7 @@ function CardCTA({
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: ratingFooterStyle,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: [showButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: ratingButtonWrapStyle,
           children: buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, buttonModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
             label: effectiveButtonLabel,
@@ -475,17 +497,19 @@ function CardCTA({
             style: ratingButtonStyle,
             renderContent: renderButtonContent(ratingButtonLabelStyle)
           })
-        }), showRatingActions ? ratingActionsSlot ? (0, _reactUtils.cloneChildrenWithModes)(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
+        }) : null, showRatingActions ? ratingActionsSlot ? (0, _reactUtils.cloneChildrenWithModes)(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
           modes: iconButtonModes,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
             iconName: "ic_like",
             accessibilityLabel: "Like",
+            modes: iconButtonModes,
             ...(onPressLike ? {
               onPress: onPressLike
             } : {})
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
             iconName: "ic_dislike",
             accessibilityLabel: "Dislike",
+            modes: iconButtonModes,
             ...(onPressDislike ? {
               onPress: onPressDislike
             } : {})

package/lib/commonjs/components/Carousel/Carousel.js

@@ -46,8 +46,12 @@ function Carousel({
   loop = true,
   gap: gapProp,
   itemWidth: itemWidthProp,
+  itemInset,
+  bleedHorizontal,
   paddingHorizontal: paddingHorizontalProp,
   paddingVertical: paddingVerticalProp,
+  equalHeight = true,
+  maxHeight: maxHeightProp,
   type = 'Default',
   onIndexChange,
   style
@@ -59,7 +63,7 @@ function Carousel({
   const containerPaddingH = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/horizontal', modes));
   const containerPaddingV = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/vertical', modes));
   // Outer container max height per Figma (`carousel/maxHeight`).
-  const maxHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/maxHeight', modes));
+  const tokenMaxHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/maxHeight', modes));
   // Gap between AutoplayControl and NumberPagination in the Numbered overlay.
   const controlGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carouselControl/gap', modes));
 
@@ -88,15 +92,18 @@ function Carousel({
   const items = (0, _react.useMemo)(() => _react.default.Children.toArray(children).filter(_react.default.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 = (0, _react.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]);
 
   // Snap interval = item width + gap
   const snapInterval = effectiveItemWidth + gap;
@@ -230,14 +237,20 @@ 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'
@@ -246,8 +259,8 @@ function Carousel({
   const contentContainerStyle = {
     paddingHorizontal: effectivePaddingH,
     gap,
-    // Align items to the start so snap works correctly
-    alignItems: 'flex-start'
+    // Stretch so every slide matches the tallest (default). Opt out with equalHeight={false}.
+    alignItems: equalHeight ? 'stretch' : 'flex-start'
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselContext.Provider, {
     value: contextValue,
@@ -278,7 +291,10 @@ function Carousel({
             flexGrow: 0,
             flexShrink: 0,
             flexBasis: effectiveItemWidth > 0 ? effectiveItemWidth : 'auto',
-            overflow: 'hidden'
+            overflow: 'hidden',
+            ...(equalHeight ? {
+              alignSelf: 'stretch'
+            } : {})
           };
 
           // The cloned style forces the child's outer node to also honor the
@@ -287,8 +303,12 @@ function Carousel({
           const childOverrideStyle = {
             width: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
             maxWidth: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
-            flexGrow: 0,
-            flexShrink: 0
+            flexGrow: equalHeight ? 1 : 0,
+            flexShrink: 0,
+            ...(equalHeight ? {
+              alignSelf: 'stretch',
+              height: '100%'
+            } : {})
           };
 
           // Pass modes down to children

package/lib/commonjs/components/CircularProgressBarDoted/CircularProgressBarDoted.js

@@ -76,7 +76,7 @@ function CircularProgressBarDoted({
   const activeDots = normalizedValue <= 0 ? 0 : Math.ceil(normalizedValue / 100 * resolvedDotCount);
   const dotShadowSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/dot/shadow/size', modes), 6);
   const baseDotSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/dot/size', modes), 6);
-  const dotSize = baseDotSize + dotShadowSize;
+  const dotSize = baseDotSize + dotShadowSize * 2;
   const outerDotSize = dotSize;
   const ringSize = layoutSize;
   const ringRadius = Math.max(0, (ringSize - outerDotSize) / 2);

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

@@ -202,6 +202,7 @@ const FIGMA_MODES = exports.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"],
@@ -326,19 +327,19 @@ const FIGMA_COMPONENT_MODES = exports.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"],
@@ -349,7 +350,7 @@ const FIGMA_COMPONENT_MODES = exports.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"],
@@ -377,7 +378,7 @@ const FIGMA_COMPONENT_MODES = exports.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"],
@@ -392,12 +393,12 @@ const FIGMA_COMPONENT_MODES = exports.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"],
@@ -443,7 +444,7 @@ const FIGMA_COMPONENT_MODES = exports.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"]
 };