jfs-components 0.1.48 → 0.1.50

package/src/design-tokens/figma-modes.generated.ts

@@ -26,6 +26,7 @@ export const FIGMA_MODES = {
   "AccordionGroup / Output": ["Default"],
   "AccountCard / Output": ["Default"],
   "Action": ["True", "False"],
+  "Action Footer Radius": ["False", "True"],
   "ActionFooter / Output": ["Default"],
   "ActionNumpad / Output": ["Default"],
   "ActionTile / Output": ["Default"],
@@ -59,11 +60,13 @@ export const FIGMA_MODES = {
   "Button / Output": ["Default"],
   "Button / Size": ["M", "S", "XS"],
   "Button / State": ["Idle", "Hover", "Pressed", "Disabled"],
+  "Button Glass State": ["Idle", "Hover", "Pressed", "Disabled"],
+  "Button type": ["default", "glass"],
   "ButtonGroup / Output": ["Default"],
   "Calendar Glyph / Output": ["Default"],
   "Calendar Glyph State": ["Idle", "notSaved", "saved"],
   "Card / Output": ["Default"],
-  "Card Apperance": ["Default", "Plain"],
+  "Card Container": ["Default", "Plain"],
   "Card Feedback / Output": ["Default"],
   "Card Tab / output": ["Default"],
   "Card Tab State": ["Default", "Active"],
@@ -107,7 +110,7 @@ export const FIGMA_MODES = {
   "Context2": ["Default", "AppBar"],
   "Context3": ["Default", "Transaction Bubble", "Balance & Cards", "Amount Input"],
   "Context4": ["Default", "Chip", "Button", "Badge", "Badge/glass"],
-  "context5": ["Default", "Fullscreen Modal"],
+  "context5": ["Default", "Fullscreen Modal", "Mode 1"],
   "context7": ["Default", "Card", "Page Hero"],
   "Contrast Context": ["on dark", "on light"],
   "Control Toggle ": ["Default"],
@@ -248,6 +251,7 @@ export const FIGMA_MODES = {
   "Slot gap": ["S", "M", "L", "XL", "XS"],
   "special button": ["Default"],
   "Spinner / Output": ["Default"],
+  "Stack Context": ["Root", "Nested"],
   "statGroup / Output": ["Default"],
   "StatItem / Output": ["Default"],
   "StatItem Label Position ": ["Top", "Bottom"],
@@ -304,7 +308,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "Accordion": ["Accordion States"],
   "AccordionCheckbox": ["Color Mode", "context 10", "Profile Card Appearance"],
   "AccountCard": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Page type"],
-  "ActionFooter": ["Color Mode", "context5"],
+  "ActionFooter": ["Color Mode", "Context", "context5", "Slot gap"],
   "ActionTile": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
   "Additem": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Page type", "Semantic Intent"],
   "AllocationComparisonChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
@@ -316,36 +320,36 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "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", "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 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", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
-  "Card": ["AppearanceBrand", "AppearanceSystem", "Border Boolean", "Card Apperance", "Color Mode", "Gap", "Page type", "Semantic Intent"],
-  "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"],
-  "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"],
-  "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"],
+  "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"],
+  "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", "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", "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", "Color Mode", "Context", "context 10", "context 8", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
+  "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"],
   "CardProviderInfo": ["AppearanceBrand", "Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "Carousel": ["peekOffset"],
   "CarouselCardAccounts": ["peekOffset"],
   "CategoryCard": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Card Tab State", "Color Mode", "Emphasis", "Radius", "Semantic Intent"],
-  "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"],
+  "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"],
   "Checkbox": ["Color Mode"],
   "CheckboxGroup": ["Color Mode"],
   "CheckboxItem": ["Color Mode"],
   "ChipSelect": ["ChipSelect State", "Color Mode"],
   "CircularProgressBar": ["AppearanceBrand", "AppearanceSystem", "circularProgressBar Size", "Color Mode", "Emphasis", "Semantic Intent"],
-  "CircularRating": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "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 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", "Selection Card Radius"],
-  "ComparisonBar": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Icon Capsule Size", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
+  "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"],
   "ContentSheet": ["Color Mode", "Page type"],
   "CoverageBarComparison": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
-  "CoverageRing": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
+  "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"],
   "DebitCard": ["DebitCard brand"],
   "Disclaimer": ["Color Mode", "context5"],
   "Divider": ["Color Mode", "context 10", "Profile Card Appearance"],
@@ -354,20 +358,20 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "Drawer": ["Color Mode", "Page type"],
   "Dropdown": ["Dropdown Item State"],
   "DropdownInput": ["AppearanceBrand", "Button / State", "Color Mode", "Dropdown Item State", "Emphasis", "FormField States", "Page type", "Status"],
-  "EmptyState": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Icon Capsule Size", "Page type", "Profile Card Appearance", "Semantic Intent"],
-  "ExpandableCheckbox": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
+  "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"],
+  "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"],
   "FavoriteToggle": ["Color Mode", "Favorite Toggle Color", "Favorite Toggle Size"],
   "FilterBar": ["Color Mode", "InputState"],
   "FormField": ["Color Mode", "FormField States", "Status"],
   "FormUpload": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "FormField States", "Icon Capsule Size", "Page type", "Semantic Intent", "Status"],
-  "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"],
+  "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"],
   "Gauge": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "FormField States", "Semantic Intent", "Status"],
   "Grid": ["Background", "Color Mode", "Context", "Grid Gap", "Padding", "Page type", "Slot gap"],
-  "HelloJioInput": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Hello Jio Input Size", "Hello Jio Input State", "Page type"],
+  "HelloJioInput": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Context2", "Emphasis", "Hello Jio Input Size", "Hello Jio Input State", "Page type"],
   "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"],
-  "Icon": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
+  "HStack": ["Context", "Padding", "Page type", "Slot gap", "Stack Context"],
+  "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"],
@@ -377,26 +381,26 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "Link": ["Color Mode", "Context", "context 10", "Profile Card Appearance", "Text Appearance", "Text Sizes", "Weight"],
   "ListGroup": ["Color Mode", "List Item Style", "Title Level"],
   "ListItem": ["AppearanceBrand", "Color Mode", "context 10", "Context2", "context5", "List Item Style", "ListItem State", "NavArrow Direction", "Page type", "Profile Card Appearance", "Selectable"],
-  "LottieIntroBlock": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
+  "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"],
   "LottiePlayer": ["Video / Output"],
   "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", "Color Mode", "Context", "context 10", "Emphasis", "Nudge padding", "Page type", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
-  "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"],
-  "PageHero": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "PageHero Size", "Profile Card Appearance", "Semantic Intent", "Video / Output"],
+  "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"],
+  "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"],
-  "PdpCcCard": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context7", "Emphasis", "Page type", "Profile Card Appearance", "Radius", "Semantic Intent"],
+  "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"],
   "PlanComparisonCard": ["Color Mode"],
-  "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap"],
+  "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap", "Stack Context"],
   "PortfolioHero": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context3", "Context4", "Profile Card Appearance"],
   "ProductLabel": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
-  "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"],
+  "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"],
   "ProductOverview": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "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"],
   "ProjectionMarker": ["Color Mode", "context 10", "Profile Card Appearance"],
@@ -418,10 +422,10 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "Step": ["Color Mode", "Step Status"],
   "StepLabel": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Emphasis", "Semantic Intent"],
   "SuggestiveSearch": ["Color Mode", "Dropdown Item State", "FormField States", "Status"],
-  "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"],
+  "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"],
   "SupportText": ["Color Mode", "FormField States", "Status"],
   "SupportTextIcon": ["Color Mode", "FormField States", "Status"],
-  "SwappableAmount": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "Emphasis", "Page type", "Profile Card Appearance", "Semantic Intent"],
+  "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"],
   "TabItem": ["Color Mode"],
   "TestimonialsCard": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "Text": ["Color Mode", "Context", "context 10", "Profile Card Appearance", "Text Appearance", "Text Sizes", "Weight"],
@@ -433,8 +437,8 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "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"],
-  "VStack": ["Context", "Padding", "Page type", "Slot gap"],
+  "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"],
 };
 
 /**

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-07-22T21:03:43.084Z
+ * Generated: 2026-07-25T10:59:52.406Z
  */
 
 // Icon name to SVG data mapping

package/D2C.md

@@ -1,113 +0,0 @@
-# D2C — Design to Code with jfs-components
-
-Implement the supplied Figma design using the installed `jfs-components`
-package. Follow all four stages in order.
-
-## Input
-
-Use the Figma URL supplied after `/D2C` or in the user's latest message. If no
-Figma URL was supplied, ask for one before doing anything else.
-
-## 1. Read the design
-
-1. Call the Figma MCP `get_design_context` for the linked node.
-2. Call `get_screenshot` for the same node. Keep it as the visual reference for
-   final QA.
-3. Follow Code Connect mappings, design annotations, and provided assets. If
-   Figma supplies an image or SVG URL, use it directly; do not create a
-   placeholder or install an icon package.
-
-If the Figma MCP is unavailable or cannot read the node, report the blocker and
-stop. Do not recreate the design from the URL or from assumptions.
-
-## 2. Extract and resolve explicit modes
-
-From the consuming project's root, run:
-
-```bash
-npx jfs-extract-modes "<figma-url>" --out modes.json
-```
-
-The CLI automatically loads `FIGMA_ACCESS_TOKEN` from the project-root `.env`.
-An already exported shell value takes precedence. The token only needs the
-Figma `file_content:read` scope. Never print, log, or ask the user to paste the
-token into chat.
-
-If the token is missing, stop and direct the user to `[Open .env](.env)` and
-add `FIGMA_ACCESS_TOKEN=` if needed. To create a token: in Figma's file browser,
-open the account menu → **Settings** → **Security** → **Personal access
-tokens** → **Generate new token**, choose an expiration, grant only
-`file_content:read`, generate it, and copy it immediately into `.env`. Figma
-shows the value only once. Use the
-[official PAT documentation](https://developers.figma.com/docs/rest-api/personal-access-tokens/)
-if the UI has changed. Never create or overwrite a token value yourself.
-
-If the bin is unavailable in a nonstandard monorepo, run:
-
-```bash
-node node_modules/jfs-components/scripts/extract-figma-modes.js "<figma-url>" --out modes.json
-```
-
-Resolve the effective modes for each represented component as follows:
-
-1. Start with `inheritedFromAncestors`, when present.
-2. Find every `modes` entry whose `path` is the component's path or an ancestor
-   of it.
-3. Merge those entries from root to leaf; deeper entries override inherited
-   values.
-4. Match by layer name and position, using `nodeId` to disambiguate duplicate
-   names.
-
-If `unresolved` is present, report every item and its exact `reason`, then stop
-before implementation because mode fidelity cannot be guaranteed:
-
-- `local collection` means the design uses a file-local collection that the
-  packaged library data cannot resolve.
-- `key not in variables JSON` or `mode not in collection` means the packaged
-  design-token JSON is out of date.
-
-Do not guess or silently omit an unresolved mode.
-
-## 3. Implement
-
-Before editing, inspect the installed package's exports/types and the consuming
-app's existing screens. Reuse its file placement, navigation, styling, and
-asset conventions. Never invent a `jfs-components` component or prop.
-
-- Prefer mapped `jfs-components` over rebuilding them from primitives.
-- Apply extracted collection/mode pairs exactly through each component's
-  `modes` prop.
-- Put a mode on the closest code component that represents the reported Figma
-  layer or subtree. Preserve parent inheritance and child overrides; never
-  flatten a child override into its parent.
-- Do not substitute similar-looking modes, remove apparently redundant modes,
-  or move modes between layers.
-- Match Figma content, order, visibility, variants, spacing, and assets.
-
-Run the consuming app's existing typecheck, tests, or build command relevant to
-the changed screen and fix implementation errors.
-
-## 4. Render and visually verify
-
-Render the implemented screen on the target platform and capture it with the
-available mobile or browser tooling. Compare it with the Figma screenshot for:
-
-1. component size, variant, and emphasis;
-2. color and appearance;
-3. spacing, padding, alignment, and gaps;
-4. text, wrapping, and truncation; and
-5. icons, imagery, and layer visibility.
-
-Fix every implementation-caused difference and capture the screen again.
-Platform or environment differences that cannot be fixed in code, such as a
-missing system font or renderer-specific antialiasing, must be identified
-explicitly rather than hidden.
-
-If no suitable render or screenshot tooling is available, do not claim visual
-completion. Report what remains to be checked and give the exact manual run and
-comparison steps.
-
-## Completion report
-
-Report the files changed, the effective modes applied to each component, the
-validation commands and results, and the final visual comparison status.