jfs-components 0.1.8 → 0.1.17

package/lib/commonjs/components/DonutChart/DonutChart.js

@@ -133,7 +133,8 @@ function DonutChart({
   style,
   valueStyle,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -170,17 +171,17 @@ function DonutChart({
   const hasChildrenSlot = customCenterChildren.length > 0;
   const showValueLabel = !hasChildrenSlot && shouldRenderText(value);
   const showLabel = !hasChildrenSlot && shouldRenderText(label);
-  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('donutChart/value/color', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('value/fg', modes) ?? '#000000';
-  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('donutChart/value/fontFamily', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('value/fontFamily', modes) ?? 'JioType Var';
-  const valueFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('donutChart/value/fontSize', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('value/fontSize', modes), 29);
-  const valueLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('donutChart/value/lineHeight', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('value/lineHeight', modes), 29);
-  const valueFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('donutChart/value/fontWeight', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('value/fontWeight', modes), '900');
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('donutChart/label/color', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/fg', modes) ?? '#000000';
-  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('donutChart/label/fontFamily', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/fontFamily', modes) ?? 'JioType Var';
-  const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('donutChart/label/fontSize', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/fontSize', modes), 12);
-  const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('donutChart/label/lineHeight', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/lineHeight', modes), 15.6);
-  const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('donutChart/label/fontWeight', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/fontWeight', modes), '400');
-  const textWrapGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('donutChart/textWrap/gap', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('textWrap/gap', modes), 7);
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('value/fg', modes);
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('value/fontFamily', modes);
+  const valueFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('value/fontSize', modes), 29);
+  const valueLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('value/lineHeight', modes), 29);
+  const valueFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('value/fontWeight', modes), '900');
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('label/fg', modes);
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('label/fontFamily', modes);
+  const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('label/fontSize', modes), 12);
+  const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('label/lineHeight', modes), 15.6);
+  const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('label/fontWeight', modes), '400');
+  const textWrapGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('textWrap/gap', modes), 7);
   const containerStyle = {
     alignItems: 'center',
     height: size,
@@ -231,7 +232,7 @@ function DonutChart({
           fontWeight: valueFontWeight,
           textAlign: 'center'
         }, valueStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: value
       }) : null, showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [{
@@ -242,7 +243,7 @@ function DonutChart({
           fontWeight: labelFontWeight,
           textAlign: 'center'
         }, labelStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: label
       }) : null]
     }) : null]

package/lib/commonjs/components/Drawer/Drawer.js

@@ -10,6 +10,7 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
+var _shadow = require("../../utils/shadow");
 var _Overlay = _interopRequireDefault(require("../Overlay/Overlay"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -309,28 +310,29 @@ function DrawerInner({
   });
 
   // Design Tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/background', modes) || '#f5f5f5';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('drawer/radius/top', modes) || 12;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/background', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('drawer/radius/top', modes);
 
   // Handle
-  const handleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/background', modes) || '#e0e0e3';
-  const handleWidth = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/width', modes) || 42;
-  const handleHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/height', modes) || 6;
-  const handleRadius = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/radius', modes) || 999;
+  const handleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/background', modes);
+  const handleWidth = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/width', modes);
+  const handleHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/height', modes);
+  const handleRadius = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/radius', modes);
 
   // Padding
-  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/left', modes) || 8;
-  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/right', modes) || 8;
-  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/bottom', modes) || 10;
-  const drawerGap = (0, _figmaVariablesResolver.getVariableByName)('drawer/gap', modes) || 8;
-  // Note: drawer/padding/top is 0 in tokens, but we keep the 8px visual spacing for the handle as requested.
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/left', modes);
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/right', modes);
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/bottom', modes);
+  const drawerGap = (0, _figmaVariablesResolver.getVariableByName)('drawer/gap', modes);
 
   // Title
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/color', modes) || '#0d0d0f';
-  const titleSize = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontSize', modes) || 14;
-  const titleWeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontWeight', modes) || '700';
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/lineHeight', modes) || 17;
-  const titlePaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/bottom', modes) || 8;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/color', modes);
+  const titleSize = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontSize', modes);
+  const titleWeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontWeight', modes);
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/lineHeight', modes);
+  const titleWrapPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/top', modes);
+  const titleWrapPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/bottom', modes);
+  const titleWrapPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/horizontal', modes);
 
   // Drop shadow — Figma layers two shadows (primary + secondary) sharing
   // the same offsetY/blur but with their own offsetX and color.
@@ -341,26 +343,12 @@ function DrawerInner({
   const shadowSecondaryOffsetX = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/secondary/offsetX', modes) ?? 0;
   const shadowSecondaryColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)';
 
-  // Cross-platform shadow style. Web supports stacking two shadows via
-  // boxShadow. iOS only supports a single native shadow per view, so we
-  // apply the more prominent (primary) one. Android uses elevation.
-  const shadowStyle = _reactNative.Platform.select({
-    web: {
-      boxShadow: `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`
-    },
-    ios: {
-      shadowColor: shadowPrimaryColor,
-      shadowOffset: {
-        width: shadowPrimaryOffsetX,
-        height: shadowPrimaryOffsetY
-      },
-      shadowOpacity: 1,
-      shadowRadius: shadowPrimaryBlur / 2
-    },
-    android: {
-      elevation: 16
-    },
-    default: {}
+  // Cross-platform shadow via the unified helper. Figma layers two shadows
+  // (secondary + primary) which stack natively as a single multi-layer
+  // boxShadow on web + RN 0.76+. On older RN the helper falls back to the most
+  // prominent layer (iOS shadow*) / a fixed elevation (Android).
+  const shadowStyle = (0, _shadow.boxShadow)(`${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`, {
+    elevation: 16
   });
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer';
   return (
@@ -405,30 +393,42 @@ function DrawerInner({
               borderTopRightRadius: radius,
               paddingLeft,
               paddingRight,
-              paddingBottom,
-              rowGap: drawerGap
+              paddingBottom
             }],
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.handleArea, !title && !header && {
-                paddingBottom: 0
-              }],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [{
-                  backgroundColor: handleColor,
-                  width: handleWidth,
-                  height: handleHeight,
-                  borderRadius: handleRadius
-                }]
-              })
-            }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [{
-                color: titleColor,
-                fontSize: titleSize,
-                fontWeight: titleWeight,
-                lineHeight: titleLineHeight,
-                marginBottom: titlePaddingBottom
-              }],
-              children: title
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: {
+                marginBottom: drawerGap
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.handleArea, !title && !header && {
+                  marginBottom: drawerGap
+                }],
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: [{
+                    backgroundColor: handleColor,
+                    width: handleWidth,
+                    height: handleHeight,
+                    borderRadius: handleRadius
+                  }]
+                })
+              }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: {
+                  paddingTop: titleWrapPaddingTop,
+                  paddingBottom: titleWrapPaddingBottom,
+                  paddingHorizontal: titleWrapPaddingHorizontal,
+                  alignItems: 'center'
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [{
+                    color: titleColor,
+                    fontSize: titleSize,
+                    fontWeight: titleWeight,
+                    lineHeight: titleLineHeight,
+                    textAlign: 'center'
+                  }],
+                  children: title
+                })
+              })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedScrollView, {
               ref: scrollRef,
               style: [styles.content, contentStyle],
@@ -480,7 +480,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   handleArea: {
     alignItems: 'center',
-    paddingVertical: 8,
+    marginTop: 8,
     width: '100%'
   },
   content: {

package/lib/commonjs/components/Dropdown/Dropdown.js

@@ -11,6 +11,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _reactUtils = require("../../utils/react-utils");
+var _shadow = require("../../utils/shadow");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -29,17 +30,17 @@ function useDropdownItemTokens(modes) {
     const idleBackground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/background', {
       ...modes,
       'Dropdown Item State': 'Idle'
-    }) || '#ffffff';
+    });
     const selectedBackground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/background', {
       ...modes,
       'Dropdown Item State': 'Selected'
-    }) || '#f5f5f5';
-    const foreground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/foreground', modes) || '#000000';
-    const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontFamily', modes) || 'JioType Var';
-    const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontSize', modes), 10) || 16;
-    const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontWeight', modes) || '400';
-    const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/lineHeight', modes), 10) || 19;
-    const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/gap', modes), 10) || 8;
+    });
+    const foreground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/foreground', modes);
+    const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontFamily', modes);
+    const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontSize', modes), 10);
+    const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontWeight', modes);
+    const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/lineHeight', modes), 10);
+    const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/gap', modes), 10);
     const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/padding/horizontal', modes), 10) || 12;
     const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/padding/vertical', modes), 10) || 12;
     return {
@@ -69,7 +70,8 @@ function DropdownItem({
   style,
   labelStyle,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -138,7 +140,7 @@ function DropdownItem({
     ...a11yProps,
     children: [processedLeading, children != null ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [textStyle, labelStyle],
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: label
     }), customTrailing, showDefaultCheck && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: "ic_confirm",
@@ -172,12 +174,12 @@ function Dropdown({
     ...globalModes,
     ...propModes
   }), [globalModes, propModes]);
-  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/radius', modes), 10) || 8;
-  const background = (0, _figmaVariablesResolver.getVariableByName)('dropdown/background', modes) || '#ffffff';
-  const shadowColor = (0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/color', modes) || 'rgba(0, 0, 0, 0.08)';
-  const shadowOffsetX = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetX', modes), 10) || 0;
-  const shadowOffsetY = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetY', modes), 10) || 4;
-  const shadowBlur = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/blur', modes), 10) || 16;
+  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/radius', modes), 10);
+  const background = (0, _figmaVariablesResolver.getVariableByName)('dropdown/background', modes);
+  const shadowColor = (0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/color', modes);
+  const shadowOffsetX = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetX', modes), 10);
+  const shadowOffsetY = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetY', modes), 10);
+  const shadowBlur = parseInt((0, _figmaVariablesResolver.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
@@ -186,18 +188,16 @@ 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}`
+    ...(0, _shadow.boxShadow)(`${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`)
   };
 
   // Inner view carries the rounded corners + clipping so list/scroll content

package/lib/commonjs/components/DropdownInput/DropdownInput.js

@@ -34,8 +34,8 @@ const IS_WEB = _reactNative.Platform.OS === 'web';
 
 function useChevronTokens(modes) {
   return (0, _react.useMemo)(() => {
-    const iconSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('input/iconSize', modes), 10) || 32;
-    const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/color', modes) || '#0f0d0a';
+    const iconSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('input/iconSize', modes), 10);
+    const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/color', modes);
     return {
       iconSize,
       iconColor
@@ -52,22 +52,22 @@ function toNumber(value, fallback) {
 }
 function useFormFieldTokens(modes) {
   return (0, _react.useMemo)(() => {
-    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes) || '#000000';
-    const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes);
+    const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes);
     const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/lineHeight', modes), 17);
-    const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes) || '500';
+    const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes);
     const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/gap', modes), 8);
     const inputPaddingH = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/padding/horizontal', modes), 12);
     const inputGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/gap', modes), 8);
     const inputRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/radius', modes), 8);
-    const inputBackground = (0, _figmaVariablesResolver.getVariableByName)('formField/input/background', modes) || '#ffffff';
+    const inputBackground = (0, _figmaVariablesResolver.getVariableByName)('formField/input/background', modes);
     const inputFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontSize', modes), 16);
     const inputLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/lineHeight', modes), 45);
-    const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontFamily', modes) || 'JioType Var';
-    const inputFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontWeight', modes) || '400';
-    const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/label/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/color', modes) || '#24262b';
-    const inputBorderColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/border/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes) || '#b5b6b7';
+    const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontFamily', modes);
+    const inputFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontWeight', modes);
+    const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/label/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/color', modes);
+    const inputBorderColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/border/color', modes) || (0, _figmaVariablesResolver.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.
@@ -161,7 +161,8 @@ const DropdownInput = /*#__PURE__*/(0, _react.forwardRef)(function DropdownInput
   accessibilityLabel,
   accessibilityHint,
   onFocus,
-  onBlur
+  onBlur,
+  disableTruncation
 }, ref) {
   // ---------------- Modes ----------------
   const {
@@ -548,7 +549,7 @@ const DropdownInput = /*#__PURE__*/(0, _react.forwardRef)(function DropdownInput
         style: [valueTextStyle, !hasValue && {
           color: placeholderColor
         }],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: displayLabel
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         accessibilityElementsHidden: true,

package/lib/commonjs/components/EmptyState/EmptyState.js

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

package/lib/commonjs/components/ExpandableCheckbox/ExpandableCheckbox.js

@@ -64,6 +64,7 @@ function ExpandableCheckbox({
   readMoreLabel = 'Read more',
   readLessLabel = 'Read less',
   collapsedLines = 1,
+  disableTruncation = false,
   modes = _reactUtils.EMPTY_MODES,
   style,
   labelStyle,
@@ -136,7 +137,7 @@ function ExpandableCheckbox({
   }), [modes]);
   const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
   const buttonLabel = isExpanded ? readLessLabel : readMoreLabel;
-  const labelNumberOfLinesProps = !isExpanded && collapsedLines > 0 ? {
+  const labelNumberOfLinesProps = !disableTruncation && !isExpanded && collapsedLines > 0 ? {
     numberOfLines: collapsedLines,
     ellipsizeMode: 'tail'
   } : null;

package/lib/commonjs/components/FilterBar/FilterBar.js

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

package/lib/commonjs/components/Form/Form.js

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

package/lib/commonjs/components/FormField/FormField.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _reactUtils = require("../../utils/react-utils");
+var _webPlatformUtils = require("../../utils/web-platform-utils");
 var _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _Form = require("../Form/Form");
@@ -38,8 +39,8 @@ function useFormFieldTokens(modes) {
     const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/gap', modes), 8);
 
     // Label (Figma: 14/17 medium, color #0c0d10)
-    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes) || '#0c0d10';
-    const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes);
+    const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes);
     const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/lineHeight', modes), 17);
     const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes), '500');
@@ -53,10 +54,10 @@ function useFormFieldTokens(modes) {
     // Input text (Figma: 16/45 regular)
     const inputFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontSize', modes), 16);
     const inputLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/lineHeight', modes), 45);
-    const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontFamily', modes) || 'JioType Var';
+    const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontFamily', modes);
     const inputFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontWeight', modes), '400');
-    const inputBackground = (0, _figmaVariablesResolver.getVariableByName)('formField/input/background', modes) || '#ffffff';
-    const inputBorderColor = (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes) || '#b5b6b7';
+    const inputBackground = (0, _figmaVariablesResolver.getVariableByName)('formField/input/background', modes);
+    const inputBorderColor = (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes);
     if (__DEV__) {
       console.warn('[FormField] border color (modes changed)', {
         'FormField States': modes['FormField States'],
@@ -64,7 +65,7 @@ function useFormFieldTokens(modes) {
         'formField/input/border/color': (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes)
       });
     }
-    const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/color', modes) || '#24262b';
+    const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/color', modes);
     return {
       gap,
       labelColor,
@@ -208,6 +209,21 @@ const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const interactive = !isDisabled && !isReadOnly;
 
+  // Internal handles so we can (a) imperatively blur the input and (b) detect
+  // outside presses. The forwarded `ref` is merged in below, so the public
+  // ref API (focus/blur/clear/isFocused) is unchanged for consumers.
+  const inputRef = (0, _react.useRef)(null);
+  const rootRef = (0, _react.useRef)(null);
+  // Stable merged ref so React doesn't detach/reattach (and momentarily null
+  // `inputRef.current`) on every render.
+  const mergedInputRef = (0, _react.useMemo)(() => (0, _reactUtils.mergeRefs)(inputRef, ref), [ref]);
+
+  // Web: pressing an INTERACTIVE element outside the field (Button, link,
+  // another pressable) often does not move DOM focus, so the native `blur`
+  // never fires and the field stays visually "Active". Force a blur on any
+  // outside pointer press while focused. No-op on native.
+  (0, _webPlatformUtils.useWebOutsidePress)(rootRef, (0, _react.useCallback)(() => inputRef.current?.blur(), []), isFocused);
+
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -290,7 +306,30 @@ const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
     color: tokens.inputTextColor,
     fontFamily: tokens.inputFontFamily,
     fontSize: tokens.inputFontSize,
-    lineHeight: tokens.inputLineHeight,
+    // ⚠️ DO NOT change to an unconditional `lineHeight: tokens.inputLineHeight`.
+    // This has regressed twice — read this before "simplifying" it.
+    //
+    // `inputLineHeight` comes from the Figma token `formField/input/label`
+    // ("16/45"), which is a 16px font inside a 45px ROW, i.e. it is the row
+    // HEIGHT, not the text leading. The row height is already applied via
+    // `inputRowStyle.minHeight` + `alignItems: 'center'`, so the text never
+    // needs this value as its own `lineHeight`.
+    //
+    // Passing a `lineHeight` (45) that is much larger than `fontSize` (16)
+    // onto a single-line RNTextInput breaks ONLY iOS: iOS puts ALL the extra
+    // vertical space ABOVE the glyphs, so the text/placeholder sinks to the
+    // bottom of the box instead of centering. Android and Web distribute the
+    // space evenly and look correct. This is a long-standing iOS native
+    // font-metrics bug in UITextField — see facebook/react-native#39145 and
+    // #28012; the documented workaround is exactly "drop lineHeight on the
+    // single-line input and let a wrapper center it". A single-line UITextField
+    // with no lineHeight centers its text natively (see react-native#56774).
+    //
+    // So: omit lineHeight on iOS (native centering via the row), and keep the
+    // token value on Android/Web where it already renders correctly.
+    ...(_reactNative.Platform.OS === 'ios' ? null : {
+      lineHeight: tokens.inputLineHeight
+    }),
     fontWeight: tokens.inputFontWeight,
     padding: 0,
     margin: 0,
@@ -327,6 +366,7 @@ const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
   // -- Accessibility ------------------------------------------------------
   const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Form field';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: rootRef,
     style: [wrapperStyle, style],
     pointerEvents: isDisabled ? 'none' : 'auto',
     testID: testID,
@@ -347,7 +387,7 @@ const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        ref: ref,
+        ref: mergedInputRef,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,