npm - jfs-components - Versions diffs - 0.1.12 → 0.1.17 - Mend

jfs-components 0.1.12 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (585) hide show

package/lib/module/components/Dropdown/Dropdown.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { Platform, Pressable, ScrollView, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
+import { boxShadow } from '../../utils/shadow';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IS_WEB = Platform.OS === 'web';
@@ -21,17 +22,17 @@ function useDropdownItemTokens(modes) {
     const idleBackground = getVariableByName('dropdownItem/background', {
       ...modes,
       'Dropdown Item State': 'Idle'
-    }) || '#ffffff';
+    });
     const selectedBackground = getVariableByName('dropdownItem/background', {
       ...modes,
       'Dropdown Item State': 'Selected'
-    }) || '#f5f5f5';
-    const foreground = getVariableByName('dropdownItem/foreground', modes) || '#000000';
-    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes) || 'JioType Var';
-    const fontSize = parseInt(getVariableByName('dropdownItem/fontSize', modes), 10) || 16;
-    const fontWeight = getVariableByName('dropdownItem/fontWeight', modes) || '400';
-    const lineHeight = parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10) || 19;
-    const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10) || 8;
+    });
+    const foreground = getVariableByName('dropdownItem/foreground', modes);
+    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes);
+    const fontSize = parseInt(getVariableByName('dropdownItem/fontSize', modes), 10);
+    const fontWeight = getVariableByName('dropdownItem/fontWeight', modes);
+    const lineHeight = parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10);
+    const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10);
     const paddingHorizontal = parseInt(getVariableByName('dropdownItem/padding/horizontal', modes), 10) || 12;
     const paddingVertical = parseInt(getVariableByName('dropdownItem/padding/vertical', modes), 10) || 12;
     return {
@@ -165,12 +166,12 @@ export function Dropdown({
     ...globalModes,
     ...propModes
   }), [globalModes, propModes]);
-  const radius = parseInt(getVariableByName('dropdown/radius', modes), 10) || 8;
-  const background = getVariableByName('dropdown/background', modes) || '#ffffff';
-  const shadowColor = getVariableByName('dropdown/shadow/color', modes) || 'rgba(0, 0, 0, 0.08)';
-  const shadowOffsetX = parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10) || 0;
-  const shadowOffsetY = parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10) || 4;
-  const shadowBlur = parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16;
+  const radius = parseInt(getVariableByName('dropdown/radius', modes), 10);
+  const background = getVariableByName('dropdown/background', modes);
+  const shadowColor = getVariableByName('dropdown/shadow/color', modes);
+  const shadowOffsetX = parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10);
+  const shadowOffsetY = parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10);
+  const shadowBlur = parseInt(getVariableByName('dropdown/shadow/blur', modes), 10);
   // Shadow lives on the OUTER view, which must NOT set `overflow: 'hidden'`.
   // On native, clipping a view also clips its shadow (iOS clips the layer
@@ -179,18 +180,16 @@ export function Dropdown({
   // get cut off. The rounded-corner clipping is moved to a separate inner
   // view below.
   //
-  // The `boxShadow` style prop (RN 0.76+ / react-native-web) is used as the
-  // single source of truth so the designed color/offset/blur are honored on
-  // iOS, Android AND web. We intentionally do NOT also set the legacy
-  // `shadow*` / `elevation` props: on the new architecture (and web) those
-  // are translated into a box-shadow internally, so combining them with an
-  // explicit `boxShadow` would stack two shadows. Android's legacy
-  // `elevation` is also undesirable here because it ignores the shadow color
-  // and only paints a generic gray shadow.
+  // The unified `boxShadow` helper is the single source of truth so the
+  // designed color/offset/blur are honored on iOS, Android AND web. On RN
+  // 0.76+ / web it emits the spec `boxShadow` prop; on older RN it translates
+  // to the legacy `shadow*` (iOS) / `elevation` (Android) API. We intentionally
+  // do NOT also set the legacy props manually on the supported path: those
+  // would stack a second shadow.
   const shadowStyle = {
     backgroundColor: background,
     borderRadius: radius,
-    boxShadow: `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`
+    ...boxShadow(`${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`)
   };
   // Inner view carries the rounded corners + clipping so list/scroll content

package/lib/module/components/DropdownInput/DropdownInput.js CHANGED Viewed

@@ -28,8 +28,8 @@ const IS_WEB = Platform.OS === 'web';
 function useChevronTokens(modes) {
   return useMemo(() => {
-    const iconSize = parseInt(getVariableByName('input/iconSize', modes), 10) || 32;
-    const iconColor = getVariableByName('iconButton/icon/color', modes) || '#0f0d0a';
+    const iconSize = parseInt(getVariableByName('input/iconSize', modes), 10);
+    const iconColor = getVariableByName('iconButton/icon/color', modes);
     return {
       iconSize,
       iconColor
@@ -46,22 +46,22 @@ function toNumber(value, fallback) {
 }
 function useFormFieldTokens(modes) {
   return useMemo(() => {
-    const labelColor = getVariableByName('formField/label/color', modes) || '#000000';
-    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = getVariableByName('formField/label/color', modes);
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes);
     const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
-    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes) || '500';
+    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes);
     const gap = toNumber(getVariableByName('formField/gap', modes), 8);
     const inputPaddingH = toNumber(getVariableByName('formField/input/padding/horizontal', modes), 12);
     const inputGap = toNumber(getVariableByName('formField/input/gap', modes), 8);
     const inputRadius = toNumber(getVariableByName('formField/input/radius', modes), 8);
-    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
+    const inputBackground = getVariableByName('formField/input/background', modes);
     const inputFontSize = toNumber(getVariableByName('formField/input/label/fontSize', modes), 16);
     const inputLineHeight = toNumber(getVariableByName('formField/input/label/lineHeight', modes), 45);
-    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
-    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes) || '400';
-    const inputTextColor = getVariableByName('states/formField/input/label/color', modes) || getVariableByName('formField/input/label/color', modes) || '#24262b';
-    const inputBorderColor = getVariableByName('states/formField/input/border/color', modes) || getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes);
+    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes);
+    const inputTextColor = getVariableByName('states/formField/input/label/color', modes) || getVariableByName('formField/input/label/color', modes);
+    const inputBorderColor = getVariableByName('states/formField/input/border/color', modes) || getVariableByName('formField/input/border/color', modes);
     // Figma spec: 1.5px. Using parseFloat (via toNumber) preserves the
     // fractional value — parseInt was truncating it to 1, leaving the
     // resolved row height ~1px shorter than the Figma reference.

package/lib/module/components/EmptyState/EmptyState.js CHANGED Viewed

@@ -32,26 +32,26 @@ function EmptyState({
   };
   // Container Tokens
-  const gap = getVariableByName('emptyState/gap', modes) || 24;
-  const padding = getVariableByName('emptyState/padding', modes) || 4;
-  const radius = getVariableByName('emptyState/radius', modes) || 16;
+  const gap = getVariableByName('emptyState/gap', modes);
+  const padding = getVariableByName('emptyState/padding', modes);
+  const radius = getVariableByName('emptyState/radius', modes);
   // Content Wrap Tokens
-  const contentGap = getVariableByName('emptyState/content/gap', modes) || 16;
+  const contentGap = getVariableByName('emptyState/content/gap', modes);
   // Title Tokens
-  const titleColor = getVariableByName('emptyState/title/color', modes) || '#0d0d0f';
-  const titleFontSize = getVariableByName('emptyState/title/fontSize', modes) || 16;
-  const titleFontFamily = getVariableByName('emptyState/title/fontFamily', modes) || 'System';
-  const titleLineHeight = getVariableByName('emptyState/title/lineHeight', modes) || 18;
-  const titleFontWeight = getVariableByName('emptyState/title/fontWeight', modes) || 700;
+  const titleColor = getVariableByName('emptyState/title/color', modes);
+  const titleFontSize = getVariableByName('emptyState/title/fontSize', modes);
+  const titleFontFamily = getVariableByName('emptyState/title/fontFamily', modes);
+  const titleLineHeight = getVariableByName('emptyState/title/lineHeight', modes);
+  const titleFontWeight = getVariableByName('emptyState/title/fontWeight', modes);
   // Body Tokens
-  const bodyColor = getVariableByName('emptyState/body/color', modes) || '#1a1c1f';
-  const bodyFontSize = getVariableByName('emptyState/body/fontSize', modes) || 12;
-  const bodyFontFamily = getVariableByName('emptyState/body/fontFamily', modes) || 'System';
-  const bodyLineHeight = getVariableByName('emptyState/body/lineHeight', modes) || 16;
-  const bodyFontWeight = getVariableByName('emptyState/body/fontWeight', modes) || 400;
+  const bodyColor = getVariableByName('emptyState/body/color', modes);
+  const bodyFontSize = getVariableByName('emptyState/body/fontSize', modes);
+  const bodyFontFamily = getVariableByName('emptyState/body/fontFamily', modes);
+  const bodyLineHeight = getVariableByName('emptyState/body/lineHeight', modes);
+  const bodyFontWeight = getVariableByName('emptyState/body/fontWeight', modes);
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/module/components/FilterBar/FilterBar.js CHANGED Viewed

@@ -43,8 +43,8 @@ function FilterBar({
     borderColor: isFocused ? '#222' : 'transparent'
   };
   // Resolve container tokens
-  const paddingHorizontal = getVariableByName('filterBar/padding/horizontal', modes) || 16;
-  const paddingVertical = getVariableByName('filterBar/padding/vertical', modes) || 10;
+  const paddingHorizontal = getVariableByName('filterBar/padding/horizontal', modes);
+  const paddingVertical = getVariableByName('filterBar/padding/vertical', modes);
   const resolvedAccessibilityLabel = accessibilityLabel || 'Search filter';
   const containerStyle = {
     flexDirection: 'column',

package/lib/module/components/Form/Form.js CHANGED Viewed

@@ -56,9 +56,9 @@ function Form({
     validationErrors,
     onFieldChange
   }), [validationErrors, onFieldChange]);
-  const gap = parseInt(getVariableByName('form/gap', modes), 10) || 12;
-  const paddingHorizontal = parseInt(getVariableByName('form/padding/horizontal', modes), 10) || 0;
-  const paddingVertical = parseInt(getVariableByName('form/padding/vertical', modes), 10) || 0;
+  const gap = parseInt(getVariableByName('form/gap', modes), 10);
+  const paddingHorizontal = parseInt(getVariableByName('form/padding/horizontal', modes), 10);
+  const paddingVertical = parseInt(getVariableByName('form/padding/vertical', modes), 10);
   const containerStyle = useMemo(() => ({
     gap,
     paddingHorizontal,

package/lib/module/components/FormField/FormField.js CHANGED Viewed

@@ -33,8 +33,8 @@ function useFormFieldTokens(modes) {
     const gap = toNumber(getVariableByName('formField/gap', modes), 8);
     // Label (Figma: 14/17 medium, color #0c0d10)
-    const labelColor = getVariableByName('formField/label/color', modes) || '#0c0d10';
-    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = getVariableByName('formField/label/color', modes);
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes);
     const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
     const labelFontWeight = toFontWeight(getVariableByName('formField/label/fontWeight', modes), '500');
@@ -48,10 +48,10 @@ function useFormFieldTokens(modes) {
     // Input text (Figma: 16/45 regular)
     const inputFontSize = toNumber(getVariableByName('formField/input/label/fontSize', modes), 16);
     const inputLineHeight = toNumber(getVariableByName('formField/input/label/lineHeight', modes), 45);
-    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes);
     const inputFontWeight = toFontWeight(getVariableByName('formField/input/label/fontWeight', modes), '400');
-    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
-    const inputBorderColor = getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
+    const inputBackground = getVariableByName('formField/input/background', modes);
+    const inputBorderColor = getVariableByName('formField/input/border/color', modes);
     if (__DEV__) {
       console.warn('[FormField] border color (modes changed)', {
         'FormField States': modes['FormField States'],
@@ -59,7 +59,7 @@ function useFormFieldTokens(modes) {
         'formField/input/border/color': getVariableByName('formField/input/border/color', modes)
       });
     }
-    const inputTextColor = getVariableByName('formField/input/label/color', modes) || '#24262b';
+    const inputTextColor = getVariableByName('formField/input/label/color', modes);
     return {
       gap,
       labelColor,

package/lib/module/components/FullscreenModal/FullscreenModal.js CHANGED Viewed

@@ -56,39 +56,39 @@ function HeroText({
   modes
 }) {
   const styles = useMemo(() => {
-    const gap = Number(getVariableByName('PageHero/gap', modes)) || 16;
-    const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8;
+    const gap = Number(getVariableByName('PageHero/gap', modes));
+    const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes));
     const eyebrowStyle = {
-      color: getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18,
-      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700),
-      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20,
+      color: getVariableByName('PageHero/eyebrow/color', modes),
+      fontFamily: getVariableByName('PageHero/eyebrow/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)),
       textAlign: 'center'
     };
     const headlineStyle = {
-      color: getVariableByName('PageHero/headline/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/headline/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29,
-      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes) || 900),
-      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29,
+      color: getVariableByName('PageHero/headline/color', modes),
+      fontFamily: getVariableByName('PageHero/headline/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)),
       textAlign: 'center',
       width: '100%'
     };
     const supportingTextStyle = {
-      color: getVariableByName('PageHero/supportingText/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/supportingText/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)) || 12,
-      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes) || 500),
-      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16,
+      color: getVariableByName('PageHero/supportingText/color', modes),
+      fontFamily: getVariableByName('PageHero/supportingText/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)),
       textAlign: 'center'
     };
     const priceTextStyle = {
-      color: getVariableByName('PageHero/body/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/body/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)) || 12,
-      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes) || 500),
-      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)) || 16,
+      color: getVariableByName('PageHero/body/color', modes),
+      fontFamily: getVariableByName('PageHero/body/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)),
       textAlign: 'center'
     };
     return {
@@ -211,7 +211,7 @@ function FullscreenModal({
     ...propModes,
     ...FULLSCREEN_MODAL_FORCED_MODES
   }), [globalModes, propModes]);
-  const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16;
+  const rootGap = Number(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
@@ -225,7 +225,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 = useMemo(() => {
-    const base = Number(getVariableByName('actionFooter/padding/bottom', modes)) || 41;
+    const base = Number(getVariableByName('actionFooter/padding/bottom', modes));
     return {
       paddingBottom: base + insets.bottom
     };

package/lib/module/components/Gauge/Gauge.js CHANGED Viewed

@@ -91,26 +91,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 = getVariableByName('gauge/title/color', modes) || '#0c0d10';
+  const titleColor = getVariableByName('gauge/title/color', modes);
   const titleFontSize = toNumber(getVariableByName('gauge/title/fontSize', modes), 23);
   const titleLineHeight = toNumber(getVariableByName('gauge/title/lineHeight', modes), 23);
-  const titleFontFamily = getVariableByName('gauge/title/fontFamily', modes) || 'JioType Var';
+  const titleFontFamily = getVariableByName('gauge/title/fontFamily', modes);
   const titleFontWeight = toFontWeight(getVariableByName('gauge/title/fontWeight', modes), '900');
   const titleHeight = toNumber(getVariableByName('gauge/title/height', modes), 46);
   const readoutGap = toNumber(getVariableByName('gauge/readout/gap', modes), 8);
   const readoutPadding = toNumber(getVariableByName('gauge/readout/padding', modes), 8);
-  const valueColor = getVariableByName('gauge/readout/value/color', modes) || '#0c0d10';
+  const valueColor = getVariableByName('gauge/readout/value/color', modes);
   const valueFontSize = toNumber(getVariableByName('gauge/readout/value/fontSize', modes), 36);
   const valueLineHeight = toNumber(getVariableByName('gauge/readout/value/lineHeight', modes), 36);
-  const valueFontFamily = getVariableByName('gauge/readout/value/fontFamily', modes) || 'JioType Var';
+  const valueFontFamily = getVariableByName('gauge/readout/value/fontFamily', modes);
   const valueFontWeight = toFontWeight(getVariableByName('gauge/readout/value/fontWeight', modes), '800');
-  const captionColor = getVariableByName('gauge/caption/color', modes) || '#0c0d10';
+  const captionColor = getVariableByName('gauge/caption/color', modes);
   const captionFontSize = toNumber(getVariableByName('gauge/caption/fontSize', modes), 14);
   const captionLineHeight = toNumber(getVariableByName('gauge/caption/lineHeight', modes), 18);
-  const captionFontFamily = getVariableByName('gauge/caption/fontFamily', modes) || 'JioType Var';
+  const captionFontFamily = getVariableByName('gauge/caption/fontFamily', modes);
   const captionFontWeight = toFontWeight(getVariableByName('gauge/caption/fontWeight', modes), '500');
-  const trackColor = getStrokeColor(trackStyle, getVariableByName('gauge/track/color', modes) || '#f5f5f6');
-  const progressColor = getStrokeColor(progressStyle, getVariableByName('gauge/progress/color', modes) || '#25ab21');
+  const trackColor = getStrokeColor(trackStyle, getVariableByName('gauge/track/color', modes));
+  const progressColor = getStrokeColor(progressStyle, getVariableByName('gauge/progress/color', modes));
   const containerStyle = {
     alignItems: 'center',
     gap,

package/lib/module/components/HoldingsCard/HoldingsCard.js CHANGED Viewed

@@ -38,8 +38,8 @@ export default function HoldingsCard({
   disableTruncation
 }) {
   // ---- Container tokens ----
-  const containerFill = getVariableByName('holdingsCard/container/fill', modes) || '#fef4e5';
-  const containerStroke = getVariableByName('holdingsCard/container/stroke', modes) || '#fde8c9';
+  const containerFill = getVariableByName('holdingsCard/container/fill', modes);
+  const containerStroke = getVariableByName('holdingsCard/container/stroke', modes);
   const containerStrokeWeight = parseFloat((getVariableByName('holdingsCard/container/strokeWeight', modes) ?? 1).toString());
   const containerCornerRadius = parseFloat((getVariableByName('holdingsCard/container/cornerRadius', modes) ?? 16).toString());
   const containerGap = parseFloat((getVariableByName('holdingsCard/container/gap', modes) ?? 10).toString());
@@ -52,26 +52,26 @@ export default function HoldingsCard({
   // ---- Hero tokens ----
   const heroGap = parseFloat((getVariableByName('holdingsCard/hero/gap', modes) ?? 4).toString());
-  const heroLabelColor = getVariableByName('holdingsCard/hero/label/color', modes) || '#0f0d0a';
+  const heroLabelColor = getVariableByName('holdingsCard/hero/label/color', modes);
   const heroLabelFontSize = parseFloat((getVariableByName('holdingsCard/hero/label/fontSize', modes) ?? 12).toString());
-  const heroLabelFontFamily = getVariableByName('holdingsCard/hero/label/fontFamily', modes) || 'JioType Var';
+  const heroLabelFontFamily = getVariableByName('holdingsCard/hero/label/fontFamily', modes);
   const heroLabelLineHeight = parseFloat((getVariableByName('holdingsCard/hero/label/lineHeight', modes) ?? 16).toString());
   const heroLabelFontWeight = (getVariableByName('holdingsCard/hero/label/fontWeight', modes) ?? '400').toString();
-  const heroValueColor = getVariableByName('holdingsCard/hero/value/color', modes) || '#0f0d0a';
+  const heroValueColor = getVariableByName('holdingsCard/hero/value/color', modes);
   const heroValueFontSize = parseFloat((getVariableByName('holdingsCard/hero/value/fontSize', modes) ?? 20).toString());
-  const heroValueFontFamily = getVariableByName('holdingsCard/hero/value/fontFamily', modes) || 'JioType Var';
+  const heroValueFontFamily = getVariableByName('holdingsCard/hero/value/fontFamily', modes);
   const heroValueLineHeight = parseFloat((getVariableByName('holdingsCard/hero/value/lineHeight', modes) ?? 22).toString());
   const heroValueFontWeight = (getVariableByName('holdingsCard/hero/value/fontWeight', modes) ?? '700').toString();
   // ---- Details grid tokens ----
-  const detailLabelColor = getVariableByName('holdingsCard/detailsGrid/label/color', modes) || '#2c251b';
+  const detailLabelColor = getVariableByName('holdingsCard/detailsGrid/label/color', modes);
   const detailLabelFontSize = parseFloat((getVariableByName('holdingsCard/detailsGrid/label/fontSize', modes) ?? 10).toString());
-  const detailLabelFontFamily = getVariableByName('holdingsCard/detailsGrid/label/fontFamily', modes) || 'JioType Var';
+  const detailLabelFontFamily = getVariableByName('holdingsCard/detailsGrid/label/fontFamily', modes);
   const detailLabelLineHeight = parseFloat((getVariableByName('holdingsCard/detailsGrid/label/lineHeight', modes) ?? 12).toString());
   const detailLabelFontWeight = (getVariableByName('holdingsCard/detailsGrid/label/fontWeight', modes) ?? '500').toString();
-  const detailValueColor = getVariableByName('holdingsCard/detailsGrid/value/color', modes) || '#0f0d0a';
+  const detailValueColor = getVariableByName('holdingsCard/detailsGrid/value/color', modes);
   const detailValueFontSize = parseFloat((getVariableByName('holdingsCard/detailsGrid/value/fontSize', modes) ?? 12).toString());
-  const detailValueFontFamily = getVariableByName('holdingsCard/detailsGrid/value/fontFamily', modes) || 'JioType Var';
+  const detailValueFontFamily = getVariableByName('holdingsCard/detailsGrid/value/fontFamily', modes);
   const detailValueLineHeight = parseFloat((getVariableByName('holdingsCard/detailsGrid/value/lineHeight', modes) ?? 14).toString());
   const detailValueFontWeight = (getVariableByName('holdingsCard/detailsGrid/value/fontWeight', modes) ?? '500').toString();
   const dataItemGap = parseFloat((getVariableByName('holdingsCard/dataItem/gap', modes) ?? 4).toString());

package/lib/module/components/Icon/Icon.js CHANGED Viewed

@@ -8,12 +8,12 @@ import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import BaseIcon from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 function resolveIconTokens(modes) {
-  const iconColor = getVariableByName('icon/color', modes) || '#ad8444';
-  const iconSize = getVariableByName('icon/size', modes) || 18;
-  const paddingLeft = getVariableByName('icon/padding/left', modes) || 0;
-  const paddingTop = getVariableByName('icon/padding/top', modes) || 0;
-  const paddingRight = getVariableByName('icon/padding/right', modes) || 0;
-  const paddingBottom = getVariableByName('icon/padding/bottom', modes) || 0;
+  const iconColor = getVariableByName('icon/color', modes);
+  const iconSize = getVariableByName('icon/size', modes);
+  const paddingLeft = getVariableByName('icon/padding/left', modes);
+  const paddingTop = getVariableByName('icon/padding/top', modes);
+  const paddingRight = getVariableByName('icon/padding/right', modes);
+  const paddingBottom = getVariableByName('icon/padding/bottom', modes);
   return {
     containerStyle: {
       flexDirection: 'column',

package/lib/module/components/IconCapsule/IconCapsule.js CHANGED Viewed

@@ -8,13 +8,13 @@ import { EMPTY_MODES } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 function resolveIconCapsuleTokens(modes) {
-  const size = getVariableByName('iconCapsule/size', modes) || 42;
-  const radiusRaw = getVariableByName('iconCapsule/radius', modes) || 9999;
-  const backgroundColor = getVariableByName('iconCapsule/background', modes) || '#cfa159';
-  const borderColor = getVariableByName('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = getVariableByName('iconCapsule/border/size', modes) || 1;
-  const iconColor = getVariableByName('iconCapsule/icon/color', modes) || '#0f0d0a';
-  const iconSize = getVariableByName('iconCapsule/icon/size', modes) || 18;
+  const size = getVariableByName('iconCapsule/size', modes);
+  const radiusRaw = getVariableByName('iconCapsule/radius', modes);
+  const backgroundColor = getVariableByName('iconCapsule/background', modes);
+  const borderColor = getVariableByName('iconCapsule/border/color', modes);
+  const borderSize = getVariableByName('iconCapsule/border/size', modes);
+  const iconColor = getVariableByName('iconCapsule/icon/color', modes);
+  const iconSize = getVariableByName('iconCapsule/icon/size', modes);
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw;

package/lib/module/components/InputSearch/InputSearch.js CHANGED Viewed

@@ -18,13 +18,13 @@ function SupportText({
   style
 }) {
   // Resolve variables
-  const gap = getVariableByName('supportText/gap', modes) || 4;
-  const foreground = getVariableByName('supportText/foreground', modes) || '#0c0d10';
-  const iconSize = getVariableByName('supportText/icon/size', modes) || 16;
-  const fontSize = getVariableByName('supportText/fontSize', modes) || 12;
-  const fontFamily = getVariableByName('supportText/fontFamily', modes) || 'System';
-  const fontWeightRaw = getVariableByName('supportText/fontWeight', modes) || 500;
-  const lineHeight = getVariableByName('supportText/lineHeight', modes) || 16;
+  const gap = getVariableByName('supportText/gap', modes);
+  const foreground = getVariableByName('supportText/foreground', modes);
+  const iconSize = getVariableByName('supportText/icon/size', modes);
+  const fontSize = getVariableByName('supportText/fontSize', modes);
+  const fontFamily = getVariableByName('supportText/fontFamily', modes);
+  const fontWeightRaw = getVariableByName('supportText/fontWeight', modes);
+  const lineHeight = getVariableByName('supportText/lineHeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   return /*#__PURE__*/_jsxs(View, {
     style: [{
@@ -71,7 +71,7 @@ const InputSearch = /*#__PURE__*/forwardRef(function InputSearch({
     ...modes,
     'InputState': isFocused ? 'Active' : 'Idle'
   };
-  const formFieldGap = getVariableByName('formField/gap', componentModes) || 8;
+  const formFieldGap = 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.
@@ -97,7 +97,7 @@ const InputSearch = /*#__PURE__*/forwardRef(function InputSearch({
       children: /*#__PURE__*/_jsx(Icon, {
         name: "ic_close",
         size: 18,
-        color: getVariableByName('textInput/icon/color', componentModes) || '#24262b'
+        color: getVariableByName('textInput/icon/color', componentModes)
       })
     })]
   }) : null;

package/lib/module/components/InstitutionBadge/InstitutionBadge.js CHANGED Viewed

@@ -32,9 +32,9 @@ const toFontWeight = (value, fallback) => {
 };
 function resolveInstitutionBadgeTokens(modes) {
   const gap = toNumber(getVariableByName('institutionBadge/gap', modes), 8);
-  const foreground = getVariableByName('institutionBadge/foreground', modes) || '#080d1a';
+  const foreground = getVariableByName('institutionBadge/foreground', modes);
   const fontSize = toNumber(getVariableByName('institutionBadge/fontSize', modes), 14);
-  const fontFamily = getVariableByName('institutionBadge/fontFamily', modes) || 'JioType Var';
+  const fontFamily = getVariableByName('institutionBadge/fontFamily', modes);
   const lineHeight = toNumber(getVariableByName('institutionBadge/lineHeight', modes), 18);
   const fontWeight = toFontWeight(getVariableByName('institutionBadge/fontWeight', modes), '500');
@@ -44,7 +44,7 @@ function resolveInstitutionBadgeTokens(modes) {
   const avatarRadiusRaw = toNumber(getVariableByName('avatar/radius', modes), 9999);
   // 9999 is the design-token sentinel for "perfect circle".
   const avatarRadius = avatarRadiusRaw === 9999 ? avatarSize / 2 : avatarRadiusRaw;
-  const avatarBorderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const avatarBorderColor = getVariableByName('avatar/border/color', modes);
   const avatarBorderSize = toNumber(getVariableByName('avatar/border/size', modes), 1);
   return {
     containerStyle: {

package/lib/module/components/ListGroup/ListGroup.js CHANGED Viewed

@@ -47,19 +47,19 @@ function ListGroup({
   ...rest
 }) {
   // Resolve container tokens
-  const backgroundColor = getVariableByName('listGroup/background', modes) || 'rgba(255,255,255,0)';
+  const backgroundColor = 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 = getVariableByName('listGroup/borderWidth', modes) || 0;
-  const gap = getVariableByName('listGroup/gap', modes) || 12;
+  const borderWidth = getVariableByName('listGroup/borderWidth', modes);
+  const gap = getVariableByName('listGroup/gap', modes);
   // Resolve label typography tokens
-  const labelColor = getVariableByName('listGroup/label/color', modes) || '#24262b';
-  const labelFontSize = getVariableByName('listGroup/fontSize', modes) || 14;
-  const labelLineHeight = getVariableByName('listGroup/lineHeight', modes) || 18;
-  const labelFontFamily = getVariableByName('listGroup/fontFamily', modes) || 'System';
-  const labelFontWeightRaw = getVariableByName('listGroup/fontWeight', modes) || 500;
+  const labelColor = getVariableByName('listGroup/label/color', modes);
+  const labelFontSize = getVariableByName('listGroup/fontSize', modes);
+  const labelLineHeight = getVariableByName('listGroup/lineHeight', modes);
+  const labelFontFamily = getVariableByName('listGroup/fontFamily', modes);
+  const labelFontWeightRaw = getVariableByName('listGroup/fontWeight', modes);
   const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
   const containerStyle = {
     backgroundColor,

package/lib/module/components/ListItem/ListItem.js CHANGED Viewed

@@ -57,17 +57,17 @@ function resolveListItemTokens(modes) {
   const paddingLeft = getVariableByName('listItem/padding/left', resolvedModes) ?? 0;
   const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0;
   const textWrapGap = getVariableByName('listItem/text wrap', resolvedModes) ?? 0;
-  const titleColor = getVariableByName('listItem/title/color', textModes) || '#0f0d0a';
-  const titleFontSize = getVariableByName('listItem/title/fontSize', textModes) || 14;
-  const titleLineHeight = getVariableByName('listItem/title/lineHeight', textModes) || 16;
-  const titleFontFamily = getVariableByName('listItem/title/fontFamily', textModes) || 'System';
-  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', textModes) || 700;
+  const titleColor = getVariableByName('listItem/title/color', textModes);
+  const titleFontSize = getVariableByName('listItem/title/fontSize', textModes);
+  const titleLineHeight = getVariableByName('listItem/title/lineHeight', textModes);
+  const titleFontFamily = getVariableByName('listItem/title/fontFamily', textModes);
+  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', textModes);
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-  const supportColor = getVariableByName('listItem/supportText/color', textModes) || '#1f1a14';
-  const supportFontSize = getVariableByName('listItem/supportText/fontSize', textModes) || 12;
-  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', textModes) || 14;
-  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', textModes) || 'System';
-  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', textModes) || 500;
+  const supportColor = getVariableByName('listItem/supportText/color', textModes);
+  const supportFontSize = getVariableByName('listItem/supportText/fontSize', textModes);
+  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', textModes);
+  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', textModes);
+  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', textModes);
   const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
   return {
     baseContainerStyle: {

package/lib/module/components/LottieIntroBlock/LottieIntroBlock.js CHANGED Viewed

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