jfs-components 0.1.12 → 0.1.18

package/src/components/Card/Card.tsx

@@ -65,18 +65,18 @@ export function Card({
     style,
 }: CardProps) {
     // Resolve Card Container Tokens
-    const backgroundColor = getVariableByName('card/background/color', modes) || '#ffffff';
-    const borderColor = getVariableByName('card/border/color', modes) || '#ebebed';
-    const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes) || '0.5'); // Ensure number
-    const radius = parseFloat(getVariableByName('card/radius', modes) || '8');
-    const gap = parseFloat(getVariableByName('card/gap', modes) || '4');
-    const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes) || '0');
-    const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes) || '0');
+    const backgroundColor = getVariableByName('card/background/color', modes);
+    const borderColor = getVariableByName('card/border/color', modes);
+    const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes)); // Ensure number
+    const radius = parseFloat(getVariableByName('card/radius', modes));
+    const gap = parseFloat(getVariableByName('card/gap', modes));
+    const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes));
+    const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes));
 
     // Resolve Content Wrapper Tokens
-    const contentGap = parseFloat(getVariableByName('card/content/gap', modes) || '4');
-    const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes) || '12');
-    const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes) || '16');
+    const contentGap = parseFloat(getVariableByName('card/content/gap', modes));
+    const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes));
+    const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes));
 
     // Clone media to pass modes if it's a valid element, facilitating nested style resolution
     const mediaWithModes = isValidElement(media)
@@ -163,14 +163,14 @@ function Title({ children, style, modes: propModes }: CardTextProps) {
     const context = useContext(CardContext);
     const modes = propModes || context.modes || {};
 
-    const color = getVariableByName('card/title/color', modes) || '#081007';
-    const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes) || '16');
-    const fontFamily = getVariableByName('card/title/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes) || '18');
+    const color = getVariableByName('card/title/color', modes);
+    const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes));
+    const fontFamily = getVariableByName('card/title/fontFamily', modes);
+    const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes));
 
     // Handling the potential typo in Figma variables "fonwWeight" vs "fontWeight"
     // We check both keys to be safe.
-    const rawFontWeight = getVariableByName('card/title/fontWeight', modes) || getVariableByName('card/title/fonwWeight', modes) || '900';
+    const rawFontWeight = getVariableByName('card/title/fontWeight', modes);
     const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
 
     const textStyle: TextStyle = {
@@ -192,11 +192,11 @@ function SupportText({ children, style, modes: propModes }: CardTextProps) {
     const context = useContext(CardContext);
     const modes = propModes || context.modes || {};
 
-    const color = getVariableByName('card/supportive-text/color', modes) || '#191b1e';
-    const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes) || '12');
-    const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes) || '16');
-    const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes) || '400';
+    const color = getVariableByName('card/supportive-text/color', modes);
+    const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes));
+    const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes);
+    const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes));
+    const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes);
     const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
 
     const textStyle: TextStyle = {

package/src/components/CardAdvisory/CardAdvisory.tsx

@@ -107,22 +107,22 @@ function resolveCardAdvisoryTokens(modes: Modes): CardAdvisoryTokens {
   const paddingHorizontal = toNumber(getVariableByName('cardAdvisory/padding/horizontal', modes), 0)
   const paddingVertical = toNumber(getVariableByName('cardAdvisory/padding/vertical', modes), 0)
   const radius = toNumber(getVariableByName('cardAdvisory/radius', modes), 0)
-  const background = getVariableByName('cardAdvisory/background', modes) || '#ffffff'
+  const background = getVariableByName('cardAdvisory/background', modes)
 
   const mainContentGap = toNumber(getVariableByName('cardAdvisory/mainContent/gap', modes), 16)
   const contentGap = toNumber(getVariableByName('cardAdvisory/content/gap', modes), 6)
   const headerGap = toNumber(getVariableByName('cardAdvisory/header/gap', modes), 8)
 
-  const titleColor = getVariableByName('cardAdvisory/title/foreground', modes) || '#0d0d0f'
+  const titleColor = getVariableByName('cardAdvisory/title/foreground', modes)
   const titleFontSize = toNumber(getVariableByName('cardAdvisory/title/fontSize', modes), 26)
-  const titleFontFamily = getVariableByName('cardAdvisory/title/fontFamily', modes) || 'JioType Var'
+  const titleFontFamily = getVariableByName('cardAdvisory/title/fontFamily', modes)
   const titleLineHeight = toNumber(getVariableByName('cardAdvisory/title/lineHeight', modes), 26)
   const titleFontWeight = toFontWeight(getVariableByName('cardAdvisory/title/fontWeight', modes), '900')
   const titleDescenderAllowance = Math.ceil(titleFontSize * 0.16)
 
-  const descriptionColor = getVariableByName('cardAdvisory/description/foreground', modes) || '#24262b'
+  const descriptionColor = getVariableByName('cardAdvisory/description/foreground', modes)
   const descriptionFontSize = toNumber(getVariableByName('cardAdvisory/description/fontSize', modes), 12)
-  const descriptionFontFamily = getVariableByName('cardAdvisory/description/fontFamily', modes) || 'JioType Var'
+  const descriptionFontFamily = getVariableByName('cardAdvisory/description/fontFamily', modes)
   const descriptionLineHeight = toNumber(getVariableByName('cardAdvisory/description/lineHeight', modes), 16)
   const descriptionFontWeight = toFontWeight(
     getVariableByName('cardAdvisory/description/fontWeight', modes),
@@ -175,7 +175,7 @@ function resolveCardAdvisoryTokens(modes: Modes): CardAdvisoryTokens {
       lineHeight: descriptionLineHeight,
       width: '100%',
     },
-    iconColor: (getVariableByName('cardAdvisory/icon/color', modes) || '#1a1c1f') as string,
+    iconColor: (getVariableByName('cardAdvisory/icon/color', modes)) as string,
     iconSize: toNumber(getVariableByName('cardAdvisory/icon/size', modes), 18),
   }
 }

package/src/components/CardCTA/CardCTA.tsx

@@ -121,32 +121,32 @@ function CardCTA({
     const isRating = normalizedType === 'rating'
     const isSip = normalizedType === 'sip'
 
-    const background = getVariableByName('cardCTA/background', modes) || '#ffffff'
-    const radius = getVariableByName('cardCTA/radius', modes) || 12
-    const borderSize = getVariableByName('cardCTA/border/size', modes) || 1
-    const borderColor = getVariableByName('cardCTA/border/color', modes) || '#e3e4e4'
+    const background = getVariableByName('cardCTA/background', modes)
+    const radius = getVariableByName('cardCTA/radius', modes)
+    const borderSize = getVariableByName('cardCTA/border/size', modes)
+    const borderColor = getVariableByName('cardCTA/border/color', modes)
 
-    const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes) || 16
-    const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes) || 22
-    const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes) || 16
+    const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes)
+    const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes)
+    const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes)
 
-    const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes) || 16
-    const rightPaddingV = getVariableByName('cardCTA/right-wrap/padding/vertical', modes) || 22
+    const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes)
+    const rightPaddingV = getVariableByName('cardCTA/right-wrap/padding/vertical', modes)
 
-    const textGap = getVariableByName('cardCTA/text-wrap/gap', modes) || 6
+    const textGap = getVariableByName('cardCTA/text-wrap/gap', modes)
 
-    const titleColor = getVariableByName('cardCTA/title/color', modes) || '#0c0d10'
-    const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes) || 'JioType Var'
-    const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes) || 16
-    const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes) || 18
-    const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes) || 700
+    const titleColor = getVariableByName('cardCTA/title/color', modes)
+    const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes)
+    const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes)
+    const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes)
+    const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes)
     const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
 
-    const bodyColor = getVariableByName('cardCTA/body/color', modes) || '#13002d'
-    const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes) || 'JioType Var'
-    const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes) || 14
-    const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes) || 17
-    const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes) || 400
+    const bodyColor = getVariableByName('cardCTA/body/color', modes)
+    const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes)
+    const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes)
+    const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes)
+    const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes)
     const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw
 
     const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12)
@@ -191,7 +191,7 @@ function CardCTA({
     const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0')
     const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = React.useState<number | null>(null)
 
-    const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes) || 20
+    const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes)
     const buttonBorderSize = getVariableByName('button/border/size', buttonModes) ?? 1
     // Small safety pad so sub-pixel rounding between the measure pass and the
     // rendered glyph run can never clip the final character.

package/src/components/CardFeedback/CardFeedback.tsx

@@ -41,11 +41,11 @@ export function CardFeedback({
         ...propModes,
     };
     // Container Tokens
-    const backgroundColor = getVariableByName('cardFeedback/background', modes) || '#dbf0d9';
-    const radius = parseFloat(getVariableByName('cardFeedback/radius', modes) || '12');
-    const gap = parseFloat(getVariableByName('cardFeedback/gap', modes) || '8');
-    const paddingHorizontal = parseFloat(getVariableByName('cardFeedback/padding/horizontal', modes) || '12');
-    const paddingVertical = parseFloat(getVariableByName('cardFeedback/padding/vertical', modes) || '12');
+    const backgroundColor = getVariableByName('cardFeedback/background', modes);
+    const radius = parseFloat(getVariableByName('cardFeedback/radius', modes));
+    const gap = parseFloat(getVariableByName('cardFeedback/gap', modes));
+    const paddingHorizontal = parseFloat(getVariableByName('cardFeedback/padding/horizontal', modes));
+    const paddingVertical = parseFloat(getVariableByName('cardFeedback/padding/vertical', modes));
 
     const containerStyle: ViewStyle = {
         backgroundColor,
@@ -80,7 +80,7 @@ export function Icon({ children, style, modes: propModes, icon }: { children?: R
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
-    const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes) || '20');
+    const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes));
     // Color for the icon itself
     const color = getVariableByName('appearanceFeedback/cardFeedback/icon/color', modes);
     console.log(color);
@@ -120,7 +120,7 @@ export function Content({ children, style, modes: propModes }: { children?: Reac
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
-    const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes) || '8');
+    const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes));
 
     // Pass modes to children (Title, Body, etc.)
     const childrenWithModes = React.Children.map(children, child => {
@@ -145,11 +145,11 @@ export function Title({ children, style, modes: propModes }: { children?: React.
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
-    const color = getVariableByName('cardFeedback/title/color', modes) || '#0f0d0a';
-    const fontSize = parseFloat(getVariableByName('cardFeedback/title/fontSize', modes) || '14');
-    const fontFamily = getVariableByName('cardFeedback/title/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('cardFeedback/title/lineHeight', modes) || '17');
-    const fontWeight = getVariableByName('cardFeedback/title/fontWeight', modes) || '500';
+    const color = getVariableByName('cardFeedback/title/color', modes);
+    const fontSize = parseFloat(getVariableByName('cardFeedback/title/fontSize', modes));
+    const fontFamily = getVariableByName('cardFeedback/title/fontFamily', modes);
+    const lineHeight = parseFloat(getVariableByName('cardFeedback/title/lineHeight', modes));
+    const fontWeight = getVariableByName('cardFeedback/title/fontWeight', modes);
 
     const textStyle: TextStyle = {
         color,
@@ -170,11 +170,11 @@ export function Body({ children, style, modes: propModes }: { children?: React.R
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
-    const color = getVariableByName('cardFeedback/body/color', modes) || '#1f1a14';
-    const fontSize = parseFloat(getVariableByName('cardFeedback/body/fontSize', modes) || '12');
-    const fontFamily = getVariableByName('cardFeedback/body/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('cardFeedback/body/lineHeight', modes) || '16');
-    const fontWeight = getVariableByName('cardFeedback/body/fontWeight', modes) || '400';
+    const color = getVariableByName('cardFeedback/body/color', modes);
+    const fontSize = parseFloat(getVariableByName('cardFeedback/body/fontSize', modes));
+    const fontFamily = getVariableByName('cardFeedback/body/fontFamily', modes);
+    const lineHeight = parseFloat(getVariableByName('cardFeedback/body/lineHeight', modes));
+    const fontWeight = getVariableByName('cardFeedback/body/fontWeight', modes);
 
     const textStyle: TextStyle = {
         color,
@@ -195,7 +195,7 @@ export function Action({ children, style, modes: propModes }: { children?: React
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
-    const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes) || '0');
+    const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes));
 
     // "Maximise existing component usage" -> Pass modes to children (Buttons)
     const childrenWithModes = React.Children.map(children, child => {

package/src/components/CardFinancialCondition/CardFinancialCondition.tsx

@@ -104,8 +104,7 @@ function resolveCardFinancialConditionTokens(
   modes: Modes
 ): CardFinancialConditionTokens {
   const background =
-    (getVariableByName('financialConditionCard/background', modes) as string) ||
-    '#ffffff'
+    (getVariableByName('financialConditionCard/background', modes) as string)
   const radius = toNumber(
     getVariableByName('financialConditionCard/radius', modes),
     16
@@ -133,8 +132,7 @@ function resolveCardFinancialConditionTokens(
   )
 
   const titleColor =
-    (getVariableByName('financialConditionCard/title/color', modes) as string) ||
-    '#0c0d10'
+    (getVariableByName('financialConditionCard/title/color', modes) as string)
   const titleFontSize = toNumber(
     getVariableByName('financialConditionCard/title/fontSize', modes),
     16
@@ -143,7 +141,7 @@ function resolveCardFinancialConditionTokens(
     (getVariableByName(
       'financialConditionCard/title/fontFamily',
       modes
-    ) as string) || 'JioType Var'
+    ) as string)
   const titleLineHeight = toNumber(
     getVariableByName('financialConditionCard/title/lineHeight', modes),
     18
@@ -154,8 +152,7 @@ function resolveCardFinancialConditionTokens(
   )
 
   const bodyColor =
-    (getVariableByName('financialConditionCard/body/color', modes) as string) ||
-    '#0c0d10'
+    (getVariableByName('financialConditionCard/body/color', modes) as string)
   const bodyFontSize = toNumber(
     getVariableByName('financialConditionCard/body/fontSize', modes),
     14
@@ -164,7 +161,7 @@ function resolveCardFinancialConditionTokens(
     (getVariableByName(
       'financialConditionCard/body/fontFamily',
       modes
-    ) as string) || 'JioType Var'
+    ) as string)
   const bodyLineHeight = toNumber(
     getVariableByName('financialConditionCard/body/lineHeight', modes),
     17
@@ -175,13 +172,13 @@ function resolveCardFinancialConditionTokens(
   )
 
   const nudgeBodyColor =
-    (getVariableByName('nudge/body/color', modes) as string) || '#1a1c1f'
+    (getVariableByName('nudge/body/color', modes) as string)
   const nudgeBodyFontSize = toNumber(
     getVariableByName('nudge/body/fontSize', modes),
     12
   )
   const nudgeBodyFontFamily =
-    (getVariableByName('nudge/body/fontFamily', modes) as string) || 'JioType Var'
+    (getVariableByName('nudge/body/fontFamily', modes) as string)
   const nudgeBodyLineHeight = toNumber(
     getVariableByName('nudge/body/lineHeight', modes),
     16

package/src/components/CardInsight/CardInsight.tsx

@@ -83,7 +83,6 @@ function CardInsight({
     const gap = (getVariableByName('cardInsight/gap', modes) as number | null) ?? 12
     const contentGap =
         (getVariableByName('cardInsight/contentGap', modes) as number | null) ?? 8
-    const width = (getVariableByName('cardInsight/width', modes) as number | null) ?? 356
     const slotBackground =
         (getVariableByName('cardInsight/slot/background', modes) as string | null) ?? '#ffffff'
 
@@ -129,7 +128,7 @@ function CardInsight({
 
     const renderSlot = (): React.ReactNode => {
         if (!children) {
-            return <SavingsGoalSummary modes={modes} />
+            return <SavingsGoalSummary label="Credit usage" modes={modes} />
         }
         const processed = cloneChildrenWithModes(children, modes)
         return processed.length === 1 ? processed[0] : processed
@@ -165,7 +164,6 @@ function CardInsight({
         <View
             style={[
                 {
-                    width,
                     backgroundColor: background,
                     borderRadius: radius,
                     borderWidth,

package/src/components/Carousel/Carousel.tsx

@@ -65,6 +65,16 @@ export interface CarouselProps {
   gap?: number
   /** Width of each carousel item. When undefined, items take full container width. */
   itemWidth?: number
+  /**
+   * Explicit horizontal padding (px) for the scroll content. When provided it
+   * overrides the token-derived padding verbatim — the built-in `carousel/
+   * padding/horizontal × 2` "peek" multiplier is NOT applied. Use this for
+   * presets (e.g. the account-card strip) whose own tokens define a flush,
+   * non-peeking layout.
+   */
+  paddingHorizontal?: number
+  /** Explicit vertical padding (px) for the outer container. Overrides `carousel/padding/vertical`. */
+  paddingVertical?: number
 
   /** Called when the active index changes. */
   onIndexChange?: (index: number) => void
@@ -85,27 +95,29 @@ export function Carousel({
   loop = true,
   gap: gapProp,
   itemWidth: itemWidthProp,
+  paddingHorizontal: paddingHorizontalProp,
+  paddingVertical: paddingVerticalProp,
 
   onIndexChange,
   style,
 }: CarouselProps) {
   // ---- Token resolution ----
   const tokenGap = parseFloat(
-    getVariableByName('carousel/gap', modes) || '12',
+    getVariableByName('carousel/gap', modes),
   )
   const gap = gapProp ?? tokenGap
 
 
 
   const containerPaddingH = parseFloat(
-    getVariableByName('carousel/padding/horizontal', modes) || '0',
+    getVariableByName('carousel/padding/horizontal', modes),
   )
   const containerPaddingV = parseFloat(
-    getVariableByName('carousel/padding/vertical', modes) || '0',
+    getVariableByName('carousel/padding/vertical', modes),
   )
   // Outer container max height per Figma (`carousel/maxHeight`).
   const maxHeight = parseFloat(
-    getVariableByName('carousel/maxHeight', modes) || '280',
+    getVariableByName('carousel/maxHeight', modes),
   )
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap
@@ -254,13 +266,18 @@ export function Carousel({
   )
 
   // ---- Render ----
+  // Explicit padding props win verbatim; otherwise fall back to the
+  // token-derived values (horizontal keeps its legacy ×2 "peek" multiplier).
+  const effectivePaddingH = paddingHorizontalProp ?? containerPaddingH 
+  const effectivePaddingV = paddingVerticalProp ?? containerPaddingV
+
   const outerStyle: ViewStyle = {
-    paddingVertical: containerPaddingV,
+    paddingVertical: effectivePaddingV,
     maxHeight,
   }
 
   const contentContainerStyle: ViewStyle = {
-    paddingHorizontal: containerPaddingH * 2,
+    paddingHorizontal: effectivePaddingH,
     gap,
     // Align items to the start so snap works correctly
     alignItems: 'flex-start',
@@ -372,26 +389,26 @@ export function Pagination({ modes: propModes, style }: PaginationProps) {
   // Token resolution for dots — matches Figma tokens
   // (carousel/pagination/gap, carousel/pagination/indicator/{activeColor,inactiveColor,radius,size,activeWidth}).
   const dotSize = parseFloat(
-    getVariableByName('carousel/pagination/indicator/size', modes) || '6',
+    getVariableByName('carousel/pagination/indicator/size', modes),
   )
   const dotActiveWidth = parseFloat(
-    getVariableByName('carousel/pagination/indicator/activeWidth', modes) || '16',
+    getVariableByName('carousel/pagination/indicator/activeWidth', modes),
   )
   const dotGap = parseFloat(
-    getVariableByName('carousel/pagination/gap', modes) || '4',
+    getVariableByName('carousel/pagination/gap', modes),
   )
   const dotColor =
     (getVariableByName(
       'carousel/pagination/indicator/inactiveColor',
       modes,
-    ) as string) || 'rgba(0,0,0,0.3)'
+    ) as string)
   const dotActiveColor =
     (getVariableByName(
       'carousel/pagination/indicator/activeColor',
       modes,
-    ) as string) || '#170d0a'
+    ) as string)
   const dotRadius = parseFloat(
-    getVariableByName('carousel/pagination/indicator/radius', modes) || '9999',
+    getVariableByName('carousel/pagination/indicator/radius', modes),
   )
 
   const containerStyle: ViewStyle = {

package/src/components/CarouselCardAccounts/CarouselCardAccounts.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+import Carousel from '../Carousel/Carousel'
+
+// Figma reference width for a single Account Card slot (`Carousel / Card Accounts`).
+const DEFAULT_ITEM_WIDTH = 125
+
+const toNumber = (value: unknown, fallback: number): number => {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : fallback
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value)
+    return Number.isFinite(parsed) ? parsed : fallback
+  }
+  return fallback
+}
+
+export interface CarouselCardAccountsProps {
+  /**
+   * The account cards to render — this is the slot. Pass any number of
+   * `AccountCard` elements (or any node). Each becomes one horizontally
+   * scrollable, snap-aligned item. `modes` are forwarded to every child.
+   */
+  children?: React.ReactNode
+  /** Design-token modes (e.g. `{ 'Color Mode': 'Light' }`). */
+  modes?: Modes
+  /**
+   * Width of each card slot in px. Defaults to the Figma reference width
+   * (`125`). Combined with `gap` this drives the per-card snap interval.
+   */
+  itemWidth?: number
+  /**
+   * Gap between cards in px. Resolved from the `carouselCardAccounts/gap`
+   * token (default `8`) when omitted.
+   */
+  gap?: number
+  /**
+   * Show the pagination dots. Defaults to `false` — the account strip is a
+   * flush, free-scrolling row rather than a paged hero carousel.
+   */
+  showPagination?: boolean
+  /** Loop back to the first card after the last. Default: `false`. */
+  loop?: boolean
+  /** Called when the active (snapped) card index changes. */
+  onIndexChange?: (index: number) => void
+  /** Style override for the outermost container. */
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * `CarouselCardAccounts` — a horizontally scrollable strip of compact
+ * `AccountCard`s (the Figma "Carousel / Card Accounts" component).
+ *
+ * It is a thin, opinionated preset over the shared {@link Carousel} scroll
+ * engine — so the snap/scroll/modes-cascade behaviour is **not** duplicated.
+ * Its niche is the account-selection strip: fixed-width card slots, flush
+ * (no peek) padding, per-card snapping, and no pagination by default.
+ *
+ * The cards are a real slot: pass any number of `AccountCard` children
+ * (typically a list of `connected` cards followed by a single `add` card).
+ *
+ * @example
+ * <CarouselCardAccounts modes={modes}>
+ *   <AccountCard title="Personal account" subtitle="**** 5651" imageSource={art} />
+ *   <AccountCard title="Salary account" subtitle="**** 1180" imageSource={art} />
+ *   <AccountCard state="add" title="Add a card" onPress={openLinkFlow} />
+ * </CarouselCardAccounts>
+ */
+function CarouselCardAccounts({
+  children,
+  modes = EMPTY_MODES,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  gap: gapProp,
+  showPagination = false,
+  loop = false,
+  onIndexChange,
+  style,
+}: CarouselCardAccountsProps) {
+  const gap = gapProp ?? toNumber(getVariableByName('carouselCardAccounts/gap', modes), 8)
+
+  // Outer-container padding is driven by the design's own tokens
+  // (`carouselCardAccounts/padding/*`) rather than the generic `carousel/*`
+  // padding, matching the Figma "Carousel / Card Accounts" frame.
+  const paddingHorizontal = toNumber(
+    getVariableByName('carouselCardAccounts/padding/horizontal', modes),
+    0,
+  )
+  const paddingVertical = toNumber(
+    getVariableByName('carouselCardAccounts/padding/vertical', modes),
+    0,
+  )
+
+  return (
+    <Carousel
+      modes={modes}
+      itemWidth={itemWidth}
+      gap={gap}
+      showPagination={showPagination}
+      loop={loop}
+      autoPlay={false}
+      paddingHorizontal={paddingHorizontal}
+      paddingVertical={paddingVertical}
+      {...(onIndexChange ? { onIndexChange } : {})}
+      style={style}
+    >
+      {children}
+    </Carousel>
+  )
+}
+
+export default React.memo(CarouselCardAccounts)

package/src/components/Checkbox/Checkbox.tsx

@@ -9,6 +9,7 @@ import {
 import Svg, { Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import { boxShadow } from '../../utils/shadow'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -116,7 +117,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox({
 
   const size = getVariableByName('checkbox/size', modes) ?? 18
   const radius = getVariableByName('checkbox/radius', modes) ?? 4
-  const strokeWidth = getVariableByName('strokeWidth', modes) ?? 1
+  const strokeWidth = 1
 
   const idleStroke = getVariableByName('checkbox/idle/stroke/color', modes) ?? '#666666'
   const hoverFill = getVariableByName('checkbox/hover/fill/color', modes) ?? 'rgba(0,0,0,0.1)'
@@ -256,11 +257,4 @@ const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox({
   )
 })
 
-function boxShadow(value: string): ViewStyle {
-  if (Platform.OS === 'web') {
-    return { boxShadow: value } as ViewStyle
-  }
-  return {}
-}
-
 export default Checkbox

package/src/components/ChipGroup/ChipGroup.tsx

@@ -36,7 +36,7 @@ function ChipGroup({
     testID,
 }: ChipGroupProps) {
     // --- Token Resolution ---
-    const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10) || 8;
+    const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10);
 
     // --- Styles ---
     const containerStyle: ViewStyle = {

package/src/components/ChipSelect/ChipSelect.tsx

@@ -60,23 +60,23 @@ function ChipSelect({
     };
 
     // --- Token Resolution ---
-    const gap = parseInt(getVariableByName('chipSelect/gap', resolvedModes), 10) || 4;
-    const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10) || 16;
-    const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10) || 0;
-    const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10) || 999;
+    const gap = parseInt(getVariableByName('chipSelect/gap', resolvedModes), 10);
+    const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10);
+    const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10);
+    const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10);
 
     // Background
-    const backgroundColor = getVariableByName('chipSelect/background', resolvedModes) || '#f5f5f5';
+    const backgroundColor = getVariableByName('chipSelect/background', resolvedModes);
 
     // Text Styles
-    const textColor = getVariableByName('chipSelect/foreground', resolvedModes) || '#0d0d0f';
-    const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10) || 14;
-    const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes) || 'JioType Var';
-    const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10) || 32;
-    const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes) || '700';
+    const textColor = getVariableByName('chipSelect/foreground', resolvedModes);
+    const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10);
+    const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes);
+    const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10);
+    const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes);
 
     // Icon Styles
-    const iconSize = parseInt(getVariableByName('chipSelect/icon/size', resolvedModes), 10) || 16;
+    const iconSize = parseInt(getVariableByName('chipSelect/icon/size', resolvedModes), 10);
 
     // --- Styles ---
     const containerStyle: ViewStyle = {