jfs-components 0.1.12 → 0.1.18

package/lib/commonjs/components/Button/Button.js

@@ -37,6 +37,17 @@ const containerLayoutStyle = {
   justifyContent: 'center'
 };
 
+// Keeps the label on a single line. `flexShrink: 0` stops a tight flex parent
+// from squeezing the text; on web `whiteSpace: 'nowrap'` is what actually
+// prevents the line break (a bare `numberOfLines` line-clamp still allows the
+// text to wrap inside a width-constrained pill in react-native-web).
+const NO_WRAP_LABEL_STYLE = {
+  flexShrink: 0,
+  ...(IS_WEB ? {
+    whiteSpace: 'nowrap'
+  } : {})
+};
+
 // ---------------------------------------------------------------------------
 // Token resolution
 // ---------------------------------------------------------------------------
@@ -48,19 +59,19 @@ const containerLayoutStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveButtonTokens(modes, disabled) {
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('button/background', modes) || '#cfa159';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', modes) || 'rgba(255,255,255,0)';
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('button/background', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', modes);
   const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('button/border/size', modes);
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('button/radius', modes) || 9999;
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', modes) || 20;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('button/padding/vertical', modes) || 12;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('button/gap', modes) || 8;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('button/fontFamily', modes) || 'System';
-  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('button/fontWeight', modes) || 700;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('button/radius', modes);
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', modes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('button/padding/vertical', modes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('button/gap', modes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('button/fontFamily', modes);
+  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('button/fontWeight', modes);
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', modes) || 19;
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', modes) || 16;
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', modes) || '#0f0d0a';
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', modes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', modes);
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', modes);
   const iconSize = (0, _figmaVariablesResolver.getVariableByName)('button/icon/size', modes) ?? 18;
 
   // Pressed tokens are always resolved so the Pressable `style` callback can
@@ -69,9 +80,9 @@ function resolveButtonTokens(modes, disabled) {
     ...modes,
     'Button / State': 'Pressed'
   };
-  const pressedBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', pressedModes) || backgroundColor;
-  const pressedBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', pressedModes) || borderColor;
-  const pressedTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', pressedModes) || textColor;
+  const pressedBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', pressedModes);
+  const pressedBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', pressedModes);
+  const pressedTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', pressedModes);
 
   // Hover tokens are only meaningful on web. Skipping them on native saves
   // ~3 token lookups + an object spread per render on every Button.
@@ -82,9 +93,9 @@ function resolveButtonTokens(modes, disabled) {
       ...modes,
       'Button / State': 'Hover'
     };
-    const hoverBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', hoverModes) || backgroundColor;
-    const hoverBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', hoverModes) || borderColor;
-    hoverTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', hoverModes) || textColor;
+    const hoverBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', hoverModes);
+    const hoverBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', hoverModes);
+    hoverTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', hoverModes);
     hoverContainer = {
       backgroundColor: hoverBg,
       borderColor: hoverBorderColor
@@ -220,8 +231,9 @@ function ButtonImpl({
     content = children;
   } else {
     content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: activeLabelStyle,
-      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
+      style: [activeLabelStyle, disableTruncation ? null : NO_WRAP_LABEL_STYLE],
+      numberOfLines: disableTruncation ? undefined : 1,
+      ellipsizeMode: disableTruncation ? undefined : 'tail',
       children: label
     });
   }

package/lib/commonjs/components/Card/Card.js

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

package/lib/commonjs/components/CardAdvisory/CardAdvisory.js

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

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

@@ -71,27 +71,27 @@ function CardCTA({
   const normalizedType = typeof type === 'string' ? type.toLowerCase() : 'cta';
   const isRating = normalizedType === 'rating';
   const isSip = normalizedType === 'sip';
-  const background = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/background', modes) || '#ffffff';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/radius', modes) || 12;
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/size', modes) || 1;
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/color', modes) || '#e3e4e4';
-  const leftPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/horizontal', modes) || 16;
-  const leftPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/vertical', modes) || 22;
-  const leftGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/gap', modes) || 16;
-  const rightPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/horizontal', modes) || 16;
-  const rightPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/vertical', modes) || 22;
-  const textGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/text-wrap/gap', modes) || 6;
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/color', modes) || '#0c0d10';
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontFamily', modes) || 'JioType Var';
-  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontSize', modes) || 16;
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/lineHeight', modes) || 18;
-  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontWeight', modes) || 700;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/background', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/radius', modes);
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/size', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/color', modes);
+  const leftPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/horizontal', modes);
+  const leftPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/vertical', modes);
+  const leftGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/gap', modes);
+  const rightPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/horizontal', modes);
+  const rightPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/vertical', modes);
+  const textGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/text-wrap/gap', modes);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/color', modes);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontFamily', modes);
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontSize', modes);
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/lineHeight', modes);
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontWeight', modes);
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/color', modes) || '#13002d';
-  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontFamily', modes) || 'JioType Var';
-  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontSize', modes) || 14;
-  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes) || 17;
-  const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontWeight', modes) || 400;
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/color', modes);
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontFamily', modes);
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontSize', modes);
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes);
+  const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontWeight', modes);
   const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
   const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12);
   const ratingContentPaddingH = getOptionalVariableByName('cardCTA/rating/content/padding/horizontal', modes, 16);
@@ -140,7 +140,7 @@ function CardCTA({
   const effectiveButtonLabel = buttonLabel ?? (isRating ? 'Save' : 'Button');
   const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0');
   const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = _react.default.useState(null);
-  const buttonPaddingH = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', buttonModes) || 20;
+  const buttonPaddingH = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', buttonModes);
   const buttonBorderSize = (0, _figmaVariablesResolver.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/lib/commonjs/components/CardFeedback/CardFeedback.js

@@ -38,11 +38,11 @@ function CardFeedback({
     ...propModes
   };
   // Container Tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/background', modes) || '#dbf0d9';
-  const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/radius', modes) || '12');
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/gap', modes) || '8');
-  const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/padding/horizontal', modes) || '12');
-  const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/padding/vertical', modes) || '12');
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/background', modes);
+  const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/radius', modes));
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/gap', modes));
+  const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/padding/horizontal', modes));
+  const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/padding/vertical', modes));
   const containerStyle = {
     backgroundColor,
     borderRadius: radius,
@@ -81,7 +81,7 @@ function Icon({
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const size = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/icon/size', modes) || '20');
+  const size = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/icon/size', modes));
   // Color for the icon itself
   const color = (0, _figmaVariablesResolver.getVariableByName)('appearanceFeedback/cardFeedback/icon/color', modes);
   console.log(color);
@@ -127,7 +127,7 @@ function Content({
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/text/gap', modes) || '8');
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/text/gap', modes));
 
   // Pass modes to children (Title, Body, etc.)
   const childrenWithModes = _react.default.Children.map(children, child => {
@@ -161,11 +161,11 @@ function Title({
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const color = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/color', modes) || '#0f0d0a';
-  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontSize', modes) || '14');
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/lineHeight', modes) || '17');
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontWeight', modes) || '500';
+  const color = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/color', modes);
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontFamily', modes);
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/lineHeight', modes));
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontWeight', modes);
   const textStyle = {
     color,
     fontSize,
@@ -190,11 +190,11 @@ function Body({
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const color = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/color', modes) || '#1f1a14';
-  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontSize', modes) || '12');
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/lineHeight', modes) || '16');
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontWeight', modes) || '400';
+  const color = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/color', modes);
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontFamily', modes);
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/lineHeight', modes));
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontWeight', modes);
   const textStyle = {
     color,
     fontSize,
@@ -219,7 +219,7 @@ function Action({
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/actionSlot/gap', modes) || '0');
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/actionSlot/gap', modes));
 
   // "Maximise existing component usage" -> Pass modes to children (Buttons)
   const childrenWithModes = _react.default.Children.map(children, child => {

package/lib/commonjs/components/CardFinancialCondition/CardFinancialCondition.js

@@ -36,26 +36,26 @@ const toFontWeight = (value, fallback) => {
   return fallback;
 };
 function resolveCardFinancialConditionTokens(modes) {
-  const background = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/background', modes) || '#ffffff';
+  const background = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/background', modes);
   const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/radius', modes), 16);
   const paddingH = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/padding/horizontal', modes), 16);
   const paddingV = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/padding/vertical', modes), 16);
   const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/gap', modes), 8);
   const headerGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/header/gap', modes), 16);
   const textContentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/textContent/gap', modes), 8);
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/color', modes) || '#0c0d10';
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/color', modes);
   const titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontSize', modes), 16);
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontFamily', modes) || 'JioType Var';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontFamily', modes);
   const titleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/lineHeight', modes), 18);
   const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontWeight', modes), '700');
-  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/color', modes) || '#0c0d10';
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/color', modes);
   const bodyFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontSize', modes), 14);
-  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontFamily', modes) || 'JioType Var';
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontFamily', modes);
   const bodyLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/lineHeight', modes), 17);
   const bodyFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontWeight', modes), '400');
-  const nudgeBodyColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/color', modes) || '#1a1c1f';
+  const nudgeBodyColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/color', modes);
   const nudgeBodyFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontSize', modes), 12);
-  const nudgeBodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes) || 'JioType Var';
+  const nudgeBodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes);
   const nudgeBodyLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('nudge/body/lineHeight', modes), 16);
   const nudgeBodyFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontWeight', modes), '500');
   return {

package/lib/commonjs/components/CardInsight/CardInsight.js

@@ -43,7 +43,6 @@ function CardInsight({
   const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/padding/vertical', modes) ?? 16;
   const gap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/gap', modes) ?? 12;
   const contentGap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/contentGap', modes) ?? 8;
-  const width = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/width', modes) ?? 356;
   const slotBackground = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/slot/background', modes) ?? '#ffffff';
   const headerGap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/header/gap', modes) ?? 8;
   const textGap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/text/gap', modes) ?? 4;
@@ -73,6 +72,7 @@ function CardInsight({
   const renderSlot = () => {
     if (!children) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SavingsGoalSummary.default, {
+        label: "Credit usage",
         modes: modes
       });
     }
@@ -108,7 +108,6 @@ function CardInsight({
   const showDivider = footerNode !== null && divider !== false && divider !== null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [{
-      width,
       backgroundColor: background,
       borderRadius: radius,
       borderWidth,

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

@@ -43,16 +43,18 @@ function Carousel({
   loop = true,
   gap: gapProp,
   itemWidth: itemWidthProp,
+  paddingHorizontal: paddingHorizontalProp,
+  paddingVertical: paddingVerticalProp,
   onIndexChange,
   style
 }) {
   // ---- Token resolution ----
-  const tokenGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/gap', modes) || '12');
+  const tokenGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/gap', modes));
   const gap = gapProp ?? tokenGap;
-  const containerPaddingH = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/horizontal', modes) || '0');
-  const containerPaddingV = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/vertical', modes) || '0');
+  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) || '280');
+  const maxHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/maxHeight', modes));
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap;
 
@@ -163,12 +165,16 @@ function Carousel({
   }), [modes, activeIndex, totalItems, goTo, goNext, goPrev]);
 
   // ---- 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 = {
-    paddingVertical: containerPaddingV,
+    paddingVertical: effectivePaddingV,
     maxHeight
   };
   const contentContainerStyle = {
-    paddingHorizontal: containerPaddingH * 2,
+    paddingHorizontal: effectivePaddingH,
     gap,
     // Align items to the start so snap works correctly
     alignItems: 'flex-start'
@@ -274,12 +280,12 @@ function Pagination({
 
   // Token resolution for dots — matches Figma tokens
   // (carousel/pagination/gap, carousel/pagination/indicator/{activeColor,inactiveColor,radius,size,activeWidth}).
-  const dotSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/size', modes) || '6');
-  const dotActiveWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activeWidth', modes) || '16');
-  const dotGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/gap', modes) || '4');
-  const dotColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/inactiveColor', modes) || 'rgba(0,0,0,0.3)';
-  const dotActiveColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activeColor', modes) || '#170d0a';
-  const dotRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/radius', modes) || '9999');
+  const dotSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/size', modes));
+  const dotActiveWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activeWidth', modes));
+  const dotGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/gap', modes));
+  const dotColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/inactiveColor', modes);
+  const dotActiveColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activeColor', modes);
+  const dotRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/radius', modes));
   const containerStyle = {
     flexDirection: 'row',
     justifyContent: 'center',

package/lib/commonjs/components/CarouselCardAccounts/CarouselCardAccounts.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Carousel = _interopRequireDefault(require("../Carousel/Carousel"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Figma reference width for a single Account Card slot (`Carousel / Card Accounts`).
+const DEFAULT_ITEM_WIDTH = 125;
+const toNumber = (value, fallback) => {
+  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;
+};
+/**
+ * `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 = _reactUtils.EMPTY_MODES,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  gap: gapProp,
+  showPagination = false,
+  loop = false,
+  onIndexChange,
+  style
+}) {
+  const gap = gapProp ?? toNumber((0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.getVariableByName)('carouselCardAccounts/padding/horizontal', modes), 0);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('carouselCardAccounts/padding/vertical', modes), 0);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Carousel.default, {
+    modes: modes,
+    itemWidth: itemWidth,
+    gap: gap,
+    showPagination: showPagination,
+    loop: loop,
+    autoPlay: false,
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical,
+    ...(onIndexChange ? {
+      onIndexChange
+    } : {}),
+    style: style,
+    children: children
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(CarouselCardAccounts);

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
+var _shadow = require("../../utils/shadow");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -102,7 +103,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
   } = useFocusVisible();
   const size = (0, _figmaVariablesResolver.getVariableByName)('checkbox/size', modes) ?? 18;
   const radius = (0, _figmaVariablesResolver.getVariableByName)('checkbox/radius', modes) ?? 4;
-  const strokeWidth = (0, _figmaVariablesResolver.getVariableByName)('strokeWidth', modes) ?? 1;
+  const strokeWidth = 1;
   const idleStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/idle/stroke/color', modes) ?? '#666666';
   const hoverFill = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/fill/color', modes) ?? 'rgba(0,0,0,0.1)';
   const hoverStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/stroke/color', modes) ?? '#666666';
@@ -157,7 +158,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: selectedFill,
         borderColor: selectedStroke,
-        ...boxShadow(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
       };
     }
     if (isChecked && isHovered) {
@@ -165,7 +166,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: selectedFill,
         borderColor: selectedStroke,
-        ...boxShadow(`0px 0px 0px ${hoverShadowSize}px ${selectedHoverShadow}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverShadowSize}px ${selectedHoverShadow}`)
       };
     }
     if (isChecked) {
@@ -180,7 +181,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: focusFill,
         borderColor: focusStroke,
-        ...boxShadow(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
       };
     }
     if (isHovered) {
@@ -188,7 +189,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: hoverFill,
         borderColor: hoverStroke,
-        ...boxShadow(`0px 0px 0px ${hoverRing}px ${hoverShadow}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverRing}px ${hoverShadow}`)
       };
     }
     return {
@@ -228,12 +229,4 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
     })
   });
 });
-function boxShadow(value) {
-  if (_reactNative.Platform.OS === 'web') {
-    return {
-      boxShadow: value
-    };
-  }
-  return {};
-}
 var _default = exports.default = Checkbox;

package/lib/commonjs/components/ChipGroup/ChipGroup.js

@@ -21,7 +21,7 @@ function ChipGroup({
   testID
 }) {
   // --- Token Resolution ---
-  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipGroup/gap', modes), 10) || 8;
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipGroup/gap', modes), 10);
 
   // --- Styles ---
   const containerStyle = {