jfs-components 0.1.8 → 0.1.17

package/lib/commonjs/components/FullscreenModal/FullscreenModal.js

@@ -62,39 +62,39 @@ function HeroText({
   modes
 }) {
   const styles = (0, _react.useMemo)(() => {
-    const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes)) || 16;
-    const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes)) || 8;
+    const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes));
+    const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes));
     const eyebrowStyle = {
-      color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes) || '#ffffff',
-      fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes) || 'System',
-      fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes)) || 18,
-      fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes) || 700),
-      lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes)) || 20,
+      color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes),
+      fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes),
+      fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes)),
+      fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes)),
+      lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes)),
       textAlign: 'center'
     };
     const headlineStyle = {
-      color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes) || '#ffffff',
-      fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes) || 'System',
-      fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes)) || 29,
-      fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes) || 900),
-      lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes)) || 29,
+      color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes),
+      fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes),
+      fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes)),
+      fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes)),
+      lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes)),
       textAlign: 'center',
       width: '100%'
     };
     const supportingTextStyle = {
-      color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/color', modes) || '#ffffff',
-      fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontFamily', modes) || 'System',
-      fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontSize', modes)) || 12,
-      fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontWeight', modes) || 500),
-      lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes)) || 16,
+      color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/color', modes),
+      fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontFamily', modes),
+      fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontSize', modes)),
+      fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontWeight', modes)),
+      lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes)),
       textAlign: 'center'
     };
     const priceTextStyle = {
-      color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/color', modes) || '#ffffff',
-      fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontFamily', modes) || 'System',
-      fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontSize', modes)) || 12,
-      fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontWeight', modes) || 500),
-      lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/lineHeight', modes)) || 16,
+      color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/color', modes),
+      fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontFamily', modes),
+      fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontSize', modes)),
+      fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontWeight', modes)),
+      lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/lineHeight', modes)),
       textAlign: 'center'
     };
     return {
@@ -217,7 +217,7 @@ function FullscreenModal({
     ...propModes,
     ...FULLSCREEN_MODAL_FORCED_MODES
   }), [globalModes, propModes]);
-  const rootGap = Number((0, _figmaVariablesResolver.getVariableByName)('fullScreenModal/gap', modes)) || 16;
+  const rootGap = Number((0, _figmaVariablesResolver.getVariableByName)('fullScreenModal/gap', modes));
 
   // Safe-area insets so the floating chrome clears the system bars: the close
   // button drops below the status bar / notch, and the sticky footer keeps its
@@ -231,7 +231,7 @@ function FullscreenModal({
   // Extend (not replace) the footer's token bottom padding by the bottom inset
   // so the action button never sits under the system navigation area.
   const footerInsetStyle = (0, _react.useMemo)(() => {
-    const base = Number((0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/bottom', modes)) || 41;
+    const base = Number((0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/bottom', modes));
     return {
       paddingBottom: base + insets.bottom
     };

package/lib/commonjs/components/Gauge/Gauge.js

@@ -41,7 +41,7 @@ const toFontWeight = (value, fallback) => {
 };
 const getStrokeColor = (style, fallback) => {
   const flattened = _reactNative.StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return flattened && typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function Gauge({
   value = 84,
@@ -97,26 +97,26 @@ function Gauge({
   const arcPath = `M ${startX} ${centerY} A ${radius} ${radius} 0 0 1 ${endX} ${centerY}`;
   const arcLength = Math.PI * radius;
   const progress = clamp(value, min, max);
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/title/color', modes) || '#0c0d10';
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/title/color', modes);
   const titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/title/fontSize', modes), 23);
   const titleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/title/lineHeight', modes), 23);
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/title/fontFamily', modes) || 'JioType Var';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/title/fontFamily', modes);
   const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('gauge/title/fontWeight', modes), '900');
   const titleHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/title/height', modes), 46);
   const readoutGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/gap', modes), 8);
   const readoutPadding = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/padding', modes), 8);
-  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/color', modes) || '#0c0d10';
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/color', modes);
   const valueFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/fontSize', modes), 36);
   const valueLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/lineHeight', modes), 36);
-  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/fontFamily', modes) || 'JioType Var';
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/fontFamily', modes);
   const valueFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('gauge/readout/value/fontWeight', modes), '800');
-  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/caption/color', modes) || '#0c0d10';
+  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('gauge/caption/color', modes);
   const captionFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/caption/fontSize', modes), 14);
   const captionLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('gauge/caption/lineHeight', modes), 18);
-  const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/caption/fontFamily', modes) || 'JioType Var';
+  const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('gauge/caption/fontFamily', modes);
   const captionFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('gauge/caption/fontWeight', modes), '500');
-  const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('gauge/track/color', modes) || '#f5f5f6');
-  const progressColor = getStrokeColor(progressStyle, (0, _figmaVariablesResolver.getVariableByName)('gauge/progress/color', modes) || '#25ab21');
+  const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('gauge/track/color', modes));
+  const progressColor = getStrokeColor(progressStyle, (0, _figmaVariablesResolver.getVariableByName)('gauge/progress/color', modes));
   const containerStyle = {
     alignItems: 'center',
     gap,

package/lib/commonjs/components/HoldingsCard/HoldingsCard.js

@@ -39,11 +39,12 @@ function HoldingsCard({
   onPress,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  testID
+  testID,
+  disableTruncation
 }) {
   // ---- Container tokens ----
-  const containerFill = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/fill', modes) || '#fef4e5';
-  const containerStroke = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/stroke', modes) || '#fde8c9';
+  const containerFill = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/fill', modes);
+  const containerStroke = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/stroke', modes);
   const containerStrokeWeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/strokeWeight', modes) ?? 1).toString());
   const containerCornerRadius = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/cornerRadius', modes) ?? 16).toString());
   const containerGap = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/gap', modes) ?? 10).toString());
@@ -56,26 +57,26 @@ function HoldingsCard({
 
   // ---- Hero tokens ----
   const heroGap = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/gap', modes) ?? 4).toString());
-  const heroLabelColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/color', modes) || '#0f0d0a';
+  const heroLabelColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/color', modes);
   const heroLabelFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontSize', modes) ?? 12).toString());
-  const heroLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontFamily', modes) || 'JioType Var';
+  const heroLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontFamily', modes);
   const heroLabelLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/lineHeight', modes) ?? 16).toString());
   const heroLabelFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontWeight', modes) ?? '400').toString();
-  const heroValueColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/color', modes) || '#0f0d0a';
+  const heroValueColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/color', modes);
   const heroValueFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontSize', modes) ?? 20).toString());
-  const heroValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontFamily', modes) || 'JioType Var';
+  const heroValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontFamily', modes);
   const heroValueLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/lineHeight', modes) ?? 22).toString());
   const heroValueFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontWeight', modes) ?? '700').toString();
 
   // ---- Details grid tokens ----
-  const detailLabelColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/color', modes) || '#2c251b';
+  const detailLabelColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/color', modes);
   const detailLabelFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontSize', modes) ?? 10).toString());
-  const detailLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontFamily', modes) || 'JioType Var';
+  const detailLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontFamily', modes);
   const detailLabelLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/lineHeight', modes) ?? 12).toString());
   const detailLabelFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontWeight', modes) ?? '500').toString();
-  const detailValueColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/color', modes) || '#0f0d0a';
+  const detailValueColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/color', modes);
   const detailValueFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontSize', modes) ?? 12).toString());
-  const detailValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontFamily', modes) || 'JioType Var';
+  const detailValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontFamily', modes);
   const detailValueLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/lineHeight', modes) ?? 14).toString());
   const detailValueFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontWeight', modes) ?? '500').toString();
   const dataItemGap = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/dataItem/gap', modes) ?? 4).toString());
@@ -191,7 +192,7 @@ function HoldingsCard({
               lineHeight: detailValueLineHeight,
               fontWeight: detailValueFontWeight
             },
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             children: item.value
           })]
         }, `${rowIndex}-${colIndex}`)), row.length < GRID_COLUMNS && Array.from({

package/lib/commonjs/components/Icon/Icon.js

@@ -14,12 +14,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 function resolveIconTokens(modes) {
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', modes) || '#ad8444';
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', modes) || 18;
-  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/left', modes) || 0;
-  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/top', modes) || 0;
-  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/right', modes) || 0;
-  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/bottom', modes) || 0;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', modes);
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', modes);
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/left', modes);
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/top', modes);
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/right', modes);
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('icon/padding/bottom', modes);
   return {
     containerStyle: {
       flexDirection: 'column',

package/lib/commonjs/components/IconCapsule/IconCapsule.js

@@ -14,13 +14,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 function resolveIconCapsuleTokens(modes) {
-  const size = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/size', modes) || 42;
-  const radiusRaw = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/radius', modes) || 9999;
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/background', modes) || '#cfa159';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/size', modes) || 1;
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/color', modes) || '#0f0d0a';
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/size', modes) || 18;
+  const size = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/size', modes);
+  const radiusRaw = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/radius', modes);
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/background', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/color', modes);
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/size', modes);
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/color', modes);
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/size', modes);
 
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw;

package/lib/commonjs/components/InputSearch/InputSearch.js

@@ -24,13 +24,13 @@ function SupportText({
   style
 }) {
   // Resolve variables
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('supportText/gap', modes) || 4;
-  const foreground = (0, _figmaVariablesResolver.getVariableByName)('supportText/foreground', modes) || '#0c0d10';
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('supportText/icon/size', modes) || 16;
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontSize', modes) || 12;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontFamily', modes) || 'System';
-  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontWeight', modes) || 500;
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('supportText/lineHeight', modes) || 16;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('supportText/gap', modes);
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('supportText/foreground', modes);
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('supportText/icon/size', modes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontSize', modes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontFamily', modes);
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontWeight', modes);
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('supportText/lineHeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [{
@@ -77,7 +77,7 @@ const InputSearch = /*#__PURE__*/(0, _react.forwardRef)(function InputSearch({
     ...modes,
     'InputState': isFocused ? 'Active' : 'Idle'
   };
-  const formFieldGap = (0, _figmaVariablesResolver.getVariableByName)('formField/gap', componentModes) || 8;
+  const formFieldGap = (0, _figmaVariablesResolver.getVariableByName)('formField/gap', componentModes);
 
   // If state is active (has text) and focused? Or just if it has text?
   // Design typically: Active state (focused) shows clear button if there is text.
@@ -103,7 +103,7 @@ const InputSearch = /*#__PURE__*/(0, _react.forwardRef)(function InputSearch({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: "ic_close",
         size: 18,
-        color: (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', componentModes) || '#24262b'
+        color: (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', componentModes)
       })
     })]
   }) : null;

package/lib/commonjs/components/InstitutionBadge/InstitutionBadge.js

@@ -38,9 +38,9 @@ const toFontWeight = (value, fallback) => {
 };
 function resolveInstitutionBadgeTokens(modes) {
   const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/gap', modes), 8);
-  const foreground = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/foreground', modes) || '#080d1a';
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/foreground', modes);
   const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontSize', modes), 14);
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontFamily', modes) || 'JioType Var';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontFamily', modes);
   const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/lineHeight', modes), 18);
   const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontWeight', modes), '500');
 
@@ -50,7 +50,7 @@ function resolveInstitutionBadgeTokens(modes) {
   const avatarRadiusRaw = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes), 9999);
   // 9999 is the design-token sentinel for "perfect circle".
   const avatarRadius = avatarRadiusRaw === 9999 ? avatarSize / 2 : avatarRadiusRaw;
-  const avatarBorderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const avatarBorderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes);
   const avatarBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes), 1);
   return {
     containerStyle: {
@@ -88,6 +88,7 @@ function InstitutionBadge({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -124,7 +125,7 @@ function InstitutionBadge({
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [tokens.labelStyle, labelStyle],
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: label
     })]
   });

package/lib/commonjs/components/ListGroup/ListGroup.js

@@ -48,22 +48,23 @@ function ListGroup({
   style,
   accessibilityLabel,
   accessibilityHint,
+  disableTruncation,
   ...rest
 }) {
   // Resolve container tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('listGroup/background', modes) || 'rgba(255,255,255,0)';
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('listGroup/background', modes);
   // The current exported token aliases a missing Figma variable. Keep the
   // transparent fallback without logging the missing alias on every render.
   const borderColor = 'rgba(255,255,255,0)';
-  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('listGroup/borderWidth', modes) || 0;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('listGroup/gap', modes) || 12;
+  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('listGroup/borderWidth', modes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('listGroup/gap', modes);
 
   // Resolve label typography tokens
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('listGroup/label/color', modes) || '#24262b';
-  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontSize', modes) || 14;
-  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listGroup/lineHeight', modes) || 18;
-  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontFamily', modes) || 'System';
-  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontWeight', modes) || 500;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('listGroup/label/color', modes);
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontSize', modes);
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listGroup/lineHeight', modes);
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontFamily', modes);
+  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listGroup/fontWeight', modes);
   const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
   const containerStyle = {
     backgroundColor,
@@ -100,7 +101,7 @@ function ListGroup({
       style: [labelStyle, processedSlot && {
         marginBottom: gap
       }],
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label

package/lib/commonjs/components/ListItem/ListItem.js

@@ -63,17 +63,17 @@ function resolveListItemTokens(modes) {
   const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/left', resolvedModes) ?? 0;
   const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/right', resolvedModes) ?? 0;
   const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('listItem/text wrap', resolvedModes) ?? 0;
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', textModes) || '#0f0d0a';
-  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', textModes) || 14;
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', textModes) || 16;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontFamily', textModes) || 'System';
-  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontWeight', textModes) || 700;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', textModes);
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', textModes);
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', textModes);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontFamily', textModes);
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontWeight', textModes);
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/color', textModes) || '#1f1a14';
-  const supportFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontSize', textModes) || 12;
-  const supportLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/lineHeight', textModes) || 14;
-  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontFamily', textModes) || 'System';
-  const supportFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontWeight', textModes) || 500;
+  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/color', textModes);
+  const supportFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontSize', textModes);
+  const supportLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/lineHeight', textModes);
+  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontFamily', textModes);
+  const supportFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontWeight', textModes);
   const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
   return {
     baseContainerStyle: {
@@ -191,6 +191,7 @@ function ListItemImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const tokens = (0, _react.useMemo)(() => resolveListItemTokens(modes), [modes]);
@@ -245,7 +246,7 @@ function ListItemImpl({
     const displayText = layout === 'Vertical' ? supportText.replace(/ /g, '\n') : supportText;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: layout === 'Vertical' ? [tokens.supportTextStyle, verticalSupportTextOverride] : tokens.supportTextStyle,
-      numberOfLines: layout === 'Horizontal' ? 2 : undefined,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, layout === 'Horizontal' ? 2 : undefined),
       children: displayText
     });
   };
@@ -278,7 +279,7 @@ function ListItemImpl({
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: tokens.titleTextStyle,
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: title
         }), showSupportText && renderSupportContent()]
       }), processedTrailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/LottieIntroBlock/LottieIntroBlock.js

@@ -57,26 +57,26 @@ function LottieIntroBlock({
   }), [globalModes, propModes]);
 
   // Container
-  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/gap', modes)) || 36;
-  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/horizontal', modes)) || 0;
-  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/vertical', modes)) || 16;
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/gap', modes));
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/horizontal', modes));
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/vertical', modes));
 
   // Text wrap
-  const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/textWrap/gap', modes)) || 16;
+  const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/textWrap/gap', modes));
 
   // Title
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/foreground', modes) || '#0d0d0f';
-  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontSize', modes)) || 23;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontFamily', modes) || 'System';
-  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/lineHeight', modes)) || 23;
-  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontWeight', modes) || 900;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/foreground', modes);
+  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontSize', modes));
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontFamily', modes);
+  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/lineHeight', modes));
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontWeight', modes);
 
   // Support text
-  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/foreground', modes) || '#0d0d0f';
-  const supportFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontSize', modes)) || 14;
-  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontFamily', modes) || 'System';
+  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/foreground', modes);
+  const supportFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontSize', modes));
+  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontFamily', modes);
   const supportLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/lineHeight', modes)) || 18;
-  const supportFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontWeight', modes) || 400;
+  const supportFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontWeight', modes);
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/commonjs/components/LottiePlayer/LottiePlayer.js

@@ -27,8 +27,8 @@ function resolveSize(size, modes) {
     height: size
   };
   if (size && typeof size === 'object') return size;
-  const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes)) || DEFAULT_SIZE;
-  const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes)) || DEFAULT_SIZE;
+  const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes));
+  const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes));
   return {
     width,
     height

package/lib/commonjs/components/LottiePlayer/LottiePlayer.web.js

@@ -18,8 +18,8 @@ function resolveSize(size, modes) {
     height: size
   };
   if (size && typeof size === 'object') return size;
-  const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes)) || DEFAULT_SIZE;
-  const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes)) || DEFAULT_SIZE;
+  const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes));
+  const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes));
   return {
     width,
     height

package/lib/commonjs/components/MediaCard/MediaCard.js

@@ -14,7 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Image = _interopRequireDefault(require("../Image/Image"));
-var _GlassFill = _interopRequireDefault(require("./GlassFill"));
+var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -46,7 +46,7 @@ function MediaCard({
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
-  const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/radius', modes) || '24');
+  const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/radius', modes));
   const containerStyle = {
     borderRadius: radius,
     overflow: 'hidden',
@@ -114,11 +114,11 @@ function Title({
 }) {
   const context = (0, _react.useContext)(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/color', modes) || '#ffffff';
-  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontSize', modes) || '52');
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/lineHeight', modes) || '68');
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontWeight', modes) || '900';
+  const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/color', modes);
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontFamily', modes);
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/lineHeight', modes));
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/title/fontWeight', modes);
   const textStyle = {
     color,
     fontSize,
@@ -162,9 +162,9 @@ function Footer({
 }) {
   const context = (0, _react.useContext)(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/gap', modes) || '24');
-  const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/horizontal', modes) || '16');
-  const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/vertical', modes) || '12');
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/gap', modes));
+  const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/horizontal', modes));
+  const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/vertical', modes));
 
   // Figma tokens:
   //   blur/minimal/background -> tint laid over the live blur, also used
@@ -175,8 +175,8 @@ function Footer({
   //                              with the previous expo-blur scale) and
   //                              maps it internally — here we convert the
   //                              token's radius to that intensity scale.
-  const glassBgColor = (0, _figmaVariablesResolver.getVariableByName)('blur/minimal/background', modes) || '#1414174a';
-  const blurRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes) || '29');
+  const glassBgColor = (0, _figmaVariablesResolver.getVariableByName)('blur/minimal/background', modes);
+  const blurRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes));
   const intensity = Math.max(0, Math.min(100, Math.round(blurRadius * 1.7)));
 
   // Pick the iOS/Android material tint from "Contrast Context" mode so the
@@ -198,7 +198,9 @@ function Footer({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
       tint: tint,
       intensity: intensity,
-      overlayColor: glassBgColor
+      overlayColor: glassBgColor,
+      webBlurScale: 0.3,
+      webBlurMaxPx: 30
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flexDirection: 'row',
@@ -223,11 +225,11 @@ function FooterTitle({
 }) {
   const context = (0, _react.useContext)(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/color', modes) || '#ffffff';
-  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontSize', modes) || '14');
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/lineHeight', modes) || '16');
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontWeight', modes) || '800';
+  const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/color', modes);
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontFamily', modes);
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/lineHeight', modes));
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/title/fontWeight', modes);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [{
       color,
@@ -251,11 +253,11 @@ function FooterSubtitle({
 }) {
   const context = (0, _react.useContext)(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/color', modes) || '#f5f7f7a1';
-  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontSize', modes) || '12');
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/lineHeight', modes) || '14');
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontWeight', modes) || '400';
+  const color = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/color', modes);
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontFamily', modes);
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/lineHeight', modes));
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/subtitle/fontWeight', modes);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [{
       color,