jfs-components 0.1.48 → 0.1.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/CHANGELOG.md +8 -1
  2. package/lib/commonjs/components/CardCTA/CardCTA.js +7 -4
  3. package/lib/commonjs/components/CardFeedback/CardFeedback.js +1 -1
  4. package/lib/commonjs/components/CategoryCard/CategoryCard.js +4 -4
  5. package/lib/commonjs/components/Checkbox/Checkbox.js +4 -6
  6. package/lib/commonjs/components/CircularProgressBarDoted/CircularProgressBarDoted.js +12 -9
  7. package/lib/commonjs/components/DonutChartSummary/DonutChartSummary.js +7 -2
  8. package/lib/commonjs/components/ProductMerchandisingCard/ProductMerchandisingCard.js +3 -1
  9. package/lib/commonjs/components/ProductOverview/ProductOverview.js +2 -2
  10. package/lib/commonjs/components/Radio/Radio.js +5 -3
  11. package/lib/commonjs/components/SavingsGoalSummary/SavingsGoalSummary.js +2 -2
  12. package/lib/commonjs/components/Section/Section.js +3 -1
  13. package/lib/commonjs/components/SegmentedControl/SegmentedControl.js +1 -1
  14. package/lib/commonjs/components/SegmentedTrack/SegmentedTrack.js +1 -1
  15. package/lib/commonjs/components/Slider/Slider.js +3 -2
  16. package/lib/commonjs/components/StatusHero/StatusHero.js +1 -1
  17. package/lib/commonjs/components/Tooltip/Tooltip.js +4 -2
  18. package/lib/commonjs/design-tokens/Coin Variables-variables-full.json +1 -1
  19. package/lib/commonjs/design-tokens/figma-modes.generated.js +38 -34
  20. package/lib/commonjs/icons/registry.js +1 -1
  21. package/lib/module/components/CardCTA/CardCTA.js +7 -4
  22. package/lib/module/components/CardFeedback/CardFeedback.js +1 -1
  23. package/lib/module/components/CategoryCard/CategoryCard.js +4 -4
  24. package/lib/module/components/Checkbox/Checkbox.js +4 -6
  25. package/lib/module/components/CircularProgressBarDoted/CircularProgressBarDoted.js +12 -9
  26. package/lib/module/components/DonutChartSummary/DonutChartSummary.js +7 -2
  27. package/lib/module/components/ProductMerchandisingCard/ProductMerchandisingCard.js +3 -1
  28. package/lib/module/components/ProductOverview/ProductOverview.js +2 -2
  29. package/lib/module/components/Radio/Radio.js +5 -3
  30. package/lib/module/components/SavingsGoalSummary/SavingsGoalSummary.js +2 -2
  31. package/lib/module/components/Section/Section.js +3 -1
  32. package/lib/module/components/SegmentedControl/SegmentedControl.js +1 -1
  33. package/lib/module/components/SegmentedTrack/SegmentedTrack.js +1 -1
  34. package/lib/module/components/Slider/Slider.js +3 -2
  35. package/lib/module/components/StatusHero/StatusHero.js +1 -1
  36. package/lib/module/components/Tooltip/Tooltip.js +4 -2
  37. package/lib/module/design-tokens/Coin Variables-variables-full.json +1 -1
  38. package/lib/module/design-tokens/figma-modes.generated.js +38 -34
  39. package/lib/module/icons/registry.js +1 -1
  40. package/lib/typescript/src/components/Section/Section.d.ts +2 -1
  41. package/lib/typescript/src/design-tokens/figma-modes.generated.d.ts +6 -2
  42. package/lib/typescript/src/icons/registry.d.ts +1 -1
  43. package/package.json +1 -1
  44. package/src/components/CardCTA/CardCTA.tsx +7 -4
  45. package/src/components/CardFeedback/CardFeedback.tsx +1 -1
  46. package/src/components/CategoryCard/CategoryCard.tsx +4 -4
  47. package/src/components/Checkbox/Checkbox.tsx +4 -6
  48. package/src/components/CircularProgressBarDoted/CircularProgressBarDoted.tsx +12 -9
  49. package/src/components/DonutChartSummary/DonutChartSummary.tsx +6 -6
  50. package/src/components/ProductMerchandisingCard/ProductMerchandisingCard.tsx +3 -1
  51. package/src/components/ProductOverview/ProductOverview.tsx +2 -2
  52. package/src/components/Radio/Radio.tsx +8 -3
  53. package/src/components/SavingsGoalSummary/SavingsGoalSummary.tsx +3 -3
  54. package/src/components/Section/Section.tsx +121 -156
  55. package/src/components/SegmentedControl/SegmentedControl.tsx +1 -1
  56. package/src/components/SegmentedTrack/SegmentedTrack.tsx +1 -2
  57. package/src/components/Slider/Slider.tsx +3 -2
  58. package/src/components/StatusHero/StatusHero.tsx +1 -1
  59. package/src/components/Tooltip/Tooltip.tsx +4 -2
  60. package/src/design-tokens/Coin Variables-variables-full.json +1 -1
  61. package/src/design-tokens/figma-modes.generated.ts +38 -34
  62. package/src/icons/registry.ts +1 -1
  63. package/D2C.md +0 -113
@@ -28,6 +28,7 @@ export const FIGMA_MODES = {
28
28
  "AccordionGroup / Output": ["Default"],
29
29
  "AccountCard / Output": ["Default"],
30
30
  "Action": ["True", "False"],
31
+ "Action Footer Radius": ["False", "True"],
31
32
  "ActionFooter / Output": ["Default"],
32
33
  "ActionNumpad / Output": ["Default"],
33
34
  "ActionTile / Output": ["Default"],
@@ -61,11 +62,13 @@ export const FIGMA_MODES = {
61
62
  "Button / Output": ["Default"],
62
63
  "Button / Size": ["M", "S", "XS"],
63
64
  "Button / State": ["Idle", "Hover", "Pressed", "Disabled"],
65
+ "Button Glass State": ["Idle", "Hover", "Pressed", "Disabled"],
66
+ "Button type": ["default", "glass"],
64
67
  "ButtonGroup / Output": ["Default"],
65
68
  "Calendar Glyph / Output": ["Default"],
66
69
  "Calendar Glyph State": ["Idle", "notSaved", "saved"],
67
70
  "Card / Output": ["Default"],
68
- "Card Apperance": ["Default", "Plain"],
71
+ "Card Container": ["Default", "Plain"],
69
72
  "Card Feedback / Output": ["Default"],
70
73
  "Card Tab / output": ["Default"],
71
74
  "Card Tab State": ["Default", "Active"],
@@ -109,7 +112,7 @@ export const FIGMA_MODES = {
109
112
  "Context2": ["Default", "AppBar"],
110
113
  "Context3": ["Default", "Transaction Bubble", "Balance & Cards", "Amount Input"],
111
114
  "Context4": ["Default", "Chip", "Button", "Badge", "Badge/glass"],
112
- "context5": ["Default", "Fullscreen Modal"],
115
+ "context5": ["Default", "Fullscreen Modal", "Mode 1"],
113
116
  "context7": ["Default", "Card", "Page Hero"],
114
117
  "Contrast Context": ["on dark", "on light"],
115
118
  "Control Toggle ": ["Default"],
@@ -250,6 +253,7 @@ export const FIGMA_MODES = {
250
253
  "Slot gap": ["S", "M", "L", "XL", "XS"],
251
254
  "special button": ["Default"],
252
255
  "Spinner / Output": ["Default"],
256
+ "Stack Context": ["Root", "Nested"],
253
257
  "statGroup / Output": ["Default"],
254
258
  "StatItem / Output": ["Default"],
255
259
  "StatItem Label Position ": ["Top", "Bottom"],
@@ -306,7 +310,7 @@ export const FIGMA_COMPONENT_MODES = {
306
310
  "Accordion": ["Accordion States"],
307
311
  "AccordionCheckbox": ["Color Mode", "context 10", "Profile Card Appearance"],
308
312
  "AccountCard": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
309
- "ActionFooter": ["Color Mode", "context5"],
313
+ "ActionFooter": ["Color Mode", "Context", "context5", "Slot gap"],
310
314
  "ActionTile": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
311
315
  "Additem": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
312
316
  "AllocationComparisonChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
@@ -318,36 +322,36 @@ export const FIGMA_COMPONENT_MODES = {
318
322
  "AvatarGroup": ["Avatar Size", "Badge Size", "Context4"],
319
323
  "Badge": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "Emphasis", "Semantic Intent"],
320
324
  "Balance": ["Color Mode", "Context3"],
321
- "BenefitCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap", "Text Appearance", "Text Sizes", "Weight"],
325
+ "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"],
322
326
  "BottomNav": ["Color Mode"],
323
327
  "BottomNavItem": ["BottomNavItem / State", "Color Mode"],
324
328
  "BrandChip": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
325
329
  "BubbleChart": ["Appearance / DataViz", "Color Mode", "Context", "context 10", "Emphasis / DataViz", "Profile Card Appearance", "Text Appearance"],
326
- "Button": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
327
- "Card": ["AppearanceBrand", "AppearanceSystem", "Border Boolean", "Card Apperance", "Color Mode", "Gap", "Page type", "Semantic Intent"],
328
- "CardAdvisory": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
329
- "CardBankAccount": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Context4", "context5", "Emphasis", "List Item Style", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
330
- "CardCTA": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context 8", "Context4", "Emphasis", "Icon Capsule Size", "MediaBlock", "Page type", "Profile Card Appearance", "Semantic Intent"],
330
+ "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"],
331
+ "Card": ["AppearanceBrand", "AppearanceSystem", "Card Container", "Color Mode", "context 8", "Gap", "Page type", "Semantic Intent"],
332
+ "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"],
333
+ "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"],
334
+ "CardCTA": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context 8", "Context4", "Emphasis", "Icon Capsule Size", "MediaBlock", "Page type", "Profile Card Appearance", "Semantic Intent"],
331
335
  "CardFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode"],
332
- "CardFinancialCondition": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
333
- "CardInsight": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context 8", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
336
+ "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"],
337
+ "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"],
334
338
  "CardProviderInfo": ["AppearanceBrand", "Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
335
339
  "Carousel": ["peekOffset"],
336
340
  "CarouselCardAccounts": ["peekOffset"],
337
341
  "CategoryCard": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Card Tab State", "Color Mode", "Emphasis", "Radius", "Semantic Intent"],
338
- "CcCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context 8", "Context2", "Context4", "context5", "context7", "Emphasis", "List Item Style", "ListItem State", "NavArrow Direction", "Page type", "Profile Card Appearance", "Radius", "Selectable", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
342
+ "CcCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context 8", "Context2", "Context4", "context5", "context7", "Emphasis", "List Item Style", "ListItem State", "NavArrow Direction", "Page type", "Profile Card Appearance", "Radius", "Selectable", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
339
343
  "Checkbox": ["Color Mode"],
340
344
  "CheckboxGroup": ["Color Mode"],
341
345
  "CheckboxItem": ["Color Mode"],
342
346
  "ChipSelect": ["ChipSelect State", "Color Mode"],
343
347
  "CircularProgressBar": ["AppearanceBrand", "AppearanceSystem", "circularProgressBar Size", "Color Mode", "Emphasis", "Semantic Intent"],
344
- "CircularRating": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
348
+ "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"],
345
349
  "ClusterBubble": ["Appearance / DataViz", "Color Mode", "Context", "context 10", "Emphasis / DataViz", "Profile Card Appearance", "Text Appearance"],
346
- "CompareTable": ["Accordion States", "AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type", "Radius", "Selection Card Radius"],
347
- "ComparisonBar": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Icon Capsule Size", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
350
+ "CompareTable": ["Accordion States", "AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type", "Radius"],
351
+ "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"],
348
352
  "ContentSheet": ["Color Mode", "Page type"],
349
353
  "CoverageBarComparison": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
350
- "CoverageRing": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
354
+ "CoverageRing": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
351
355
  "DebitCard": ["DebitCard brand"],
352
356
  "Disclaimer": ["Color Mode", "context5"],
353
357
  "Divider": ["Color Mode", "context 10", "Profile Card Appearance"],
@@ -356,20 +360,20 @@ export const FIGMA_COMPONENT_MODES = {
356
360
  "Drawer": ["Color Mode", "Page type"],
357
361
  "Dropdown": ["Dropdown Item State"],
358
362
  "DropdownInput": ["AppearanceBrand", "Button / State", "Color Mode", "Dropdown Item State", "Emphasis", "FormField States", "Page type", "Status"],
359
- "EmptyState": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Icon Capsule Size", "Page type", "Profile Card Appearance", "Semantic Intent"],
360
- "ExpandableCheckbox": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
363
+ "EmptyState": ["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", "Semantic Intent"],
364
+ "ExpandableCheckbox": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
361
365
  "FavoriteToggle": ["Color Mode", "Favorite Toggle Color", "Favorite Toggle Size"],
362
366
  "FilterBar": ["Color Mode", "InputState"],
363
367
  "FormField": ["Color Mode", "FormField States", "Status"],
364
368
  "FormUpload": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "FormField States", "Icon Capsule Size", "Page type", "Semantic Intent", "Status"],
365
- "FullscreenModal": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context5", "Emphasis", "Page type", "PageHero Size", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
369
+ "FullscreenModal": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context5", "Emphasis", "Page type", "PageHero Size", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
366
370
  "Gauge": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "FormField States", "Semantic Intent", "Status"],
367
371
  "Grid": ["Background", "Color Mode", "Context", "Grid Gap", "Padding", "Page type", "Slot gap"],
368
- "HelloJioInput": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Hello Jio Input Size", "Hello Jio Input State", "Page type"],
372
+ "HelloJioInput": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Context2", "Emphasis", "Hello Jio Input Size", "Hello Jio Input State", "Page type"],
369
373
  "HeroSection": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "context 9", "context7", "Emphasis", "FormField States", "InputState", "Page type", "Status"],
370
374
  "HoldingsCard": ["AppearanceBrand", "Color Mode"],
371
- "HStack": ["Context", "Padding", "Page type", "Slot gap"],
372
- "Icon": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
375
+ "HStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"],
376
+ "Icon": ["AppearanceBrand", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
373
377
  "IconButton": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
374
378
  "IconCapsule": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
375
379
  "InputSearch": ["Color Mode", "FormField States", "InputState", "Status"],
@@ -379,26 +383,26 @@ export const FIGMA_COMPONENT_MODES = {
379
383
  "Link": ["Color Mode", "Context", "context 10", "Profile Card Appearance", "Text Appearance", "Text Sizes", "Weight"],
380
384
  "ListGroup": ["Color Mode", "List Item Style", "Title Level"],
381
385
  "ListItem": ["AppearanceBrand", "Color Mode", "context 10", "Context2", "context5", "List Item Style", "ListItem State", "NavArrow Direction", "Page type", "Profile Card Appearance", "Selectable"],
382
- "LottieIntroBlock": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
386
+ "LottieIntroBlock": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
383
387
  "LottiePlayer": ["Video / Output"],
384
388
  "MediaCard": ["Contrast Context"],
385
389
  "MerchantProfile": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
386
390
  "MessageField": ["Color Mode", "FormField States"],
387
- "MetricData": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
391
+ "MetricData": ["AppearanceBrand", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
388
392
  "MetricLegendItem": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
389
393
  "MoneyValue": ["Color Mode", "Context3"],
390
394
  "MonthlyStatusGrid": ["Appearance / DataViz", "Calendar Glyph State", "Color Mode", "Emphasis / DataViz"],
391
395
  "NavArrow": ["Color Mode", "context 10", "Context2", "context5", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance"],
392
- "Nudge": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
393
- "OTP": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "FormField States", "Input/PINSlot States", "Page type", "Profile Card Appearance", "Semantic Intent", "Status"],
394
- "PageHero": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "PageHero Size", "Profile Card Appearance", "Semantic Intent", "Video / Output"],
396
+ "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"],
397
+ "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"],
398
+ "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"],
395
399
  "PaymentFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
396
- "PdpCcCard": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context7", "Emphasis", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
400
+ "PdpCcCard": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "context7", "Emphasis", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
397
401
  "PlanComparisonCard": ["Color Mode"],
398
- "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap"],
402
+ "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap", "Stack Context"],
399
403
  "PortfolioHero": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context3", "Context4", "Profile Card Appearance"],
400
404
  "ProductLabel": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
401
- "ProductMerchandisingCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
405
+ "ProductMerchandisingCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
402
406
  "ProductOverview": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
403
407
  "ProfileCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Color Mode", "Context", "context 10", "Context2", "Context4", "context5", "Emphasis", "Icon Capsule Size", "List Item Style", "ListItem State", "NavArrow Direction", "Page type", "Profile Card Appearance", "Selectable", "Semantic Intent", "Slot gap", "UPI Handle Image"],
404
408
  "ProjectionMarker": ["Color Mode", "context 10", "Profile Card Appearance"],
@@ -420,10 +424,10 @@ export const FIGMA_COMPONENT_MODES = {
420
424
  "Step": ["Color Mode", "Step Status"],
421
425
  "StepLabel": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Emphasis", "Semantic Intent"],
422
426
  "SuggestiveSearch": ["Color Mode", "Dropdown Item State", "FormField States", "Status"],
423
- "SummaryTile": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Context2", "context5", "Emphasis", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance", "Semantic Intent"],
427
+ "SummaryTile": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Context2", "context5", "Emphasis", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance", "Semantic Intent"],
424
428
  "SupportText": ["Color Mode", "FormField States", "Status"],
425
429
  "SupportTextIcon": ["Color Mode", "FormField States", "Status"],
426
- "SwappableAmount": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
430
+ "SwappableAmount": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Button Glass State", "Button type", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
427
431
  "TabItem": ["Color Mode"],
428
432
  "TestimonialsCard": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
429
433
  "Text": ["Color Mode", "Context", "context 10", "Profile Card Appearance", "Text Appearance", "Text Sizes", "Weight"],
@@ -435,8 +439,8 @@ export const FIGMA_COMPONENT_MODES = {
435
439
  "TransactionBubble": ["Color Mode", "context 10", "Context2", "Context3", "context5", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance", "Transaction Status"],
436
440
  "TransactionStatus": ["Transaction Status"],
437
441
  "UpiHandle": ["Color Mode", "context 10", "Profile Card Appearance", "UPI Handle Image"],
438
- "ValueBackMetric": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
439
- "VStack": ["Context", "Padding", "Page type", "Slot gap"]
442
+ "ValueBackMetric": ["AppearanceBrand", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
443
+ "VStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"]
440
444
  };
441
445
 
442
446
  /**