jfs-components 0.1.12 → 0.1.18

package/lib/commonjs/utils/GlassFill/GlassFill.js

@@ -7,10 +7,8 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _blur = require("@react-native-community/blur");
-var _maskedView = _interopRequireDefault(require("@react-native-masked-view/masked-view"));
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 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); }
 const DEFAULT_FALLBACK_DARK = '#1414174a';
 const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
@@ -20,32 +18,30 @@ const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
 const NATIVE_BLUR_NAME = _reactNative.Platform.OS === 'android' ? 'AndroidBlurView' : 'BlurView';
 
 /**
- * Alpha stop on a layer's vertical reveal mask. `offset` is the vertical
- * position (0 = top of the surface, 1 = bottom); `opacity` is the mask alpha
- * there (0 = layer hidden / fully clear, 1 = layer fully applied).
+ * Alpha stop on the no-native-blur fallback gradient. `offset` is the vertical
+ * position (0 = top of the surface, 1 = bottom); `opacity` is the tint alpha
+ * there (0 = fully clear, 1 = full fallback color).
  *
- * Using several stops (rather than a single linear 0 → 1 ramp) lets each layer
- * EASE in, so the blur swells smoothly toward the bottom instead of appearing
- * along a hard horizontal seam. That soft S-curve is what gives the surface its
- * "glass" feel rather than a flat translucent panel.
+ * Using several stops (rather than a single linear 0 → 1 ramp) eases the tint
+ * in, so it swells smoothly toward the bottom instead of along a hard seam —
+ * the soft S-curve that gives the surface its "glass" feel.
  */
 
 /**
- * A single layer of the progressive ramp.
- *  - `stops` describe how this layer is revealed from top to bottom.
- *  - `amount` is this layer's share (0–1) of the max `blurAmount`.
+ * A single bottom-anchored band of the progressive blur stack.
+ *  - `start` is where the band begins, as a fraction from the top (0 = covers
+ *    the whole surface, 0.8 = only the bottom 20%). Each band runs from `start`
+ *    to the bottom.
+ *  - `amount` is the band's own blur strength as a share (0–1) of the peak.
  *
- * We stack just TWO layers on both platforms: a faint base blur that covers
- * most of the footer and a slightly stronger accent concentrated near the
- * bottom. Keeping the overlap shallow avoids compounding the dark tint of
- * multiple `BlurView`s (which is what made the earlier 3-layer ramp read as a
- * heavy block), while still giving a genuine variable-radius result — the blur
- * radius grows toward the bottom where the two layers overlap.
+ * Because each `BlurView` re-blurs everything rendered behind it, the bands
+ * COMPOUND where they overlap (toward the bottom), so the effective radius grows
+ * downward without any masking. The top region is covered only by the first,
+ * faint band; the bottom is covered by all of them.
  */
 
-// Base reveal: a faint trace of blur begins near the very top and grows
-// steadily downward, so the upper half still carries visible glass rather than
-// snapping clear. Also reused for the no-native-blur fallback scrim.
+// Eased tint ramp for the no-native-blur fallback scrim. A faint trace begins
+// near the very top and grows steadily downward.
 const BASE_MASK_STOPS = [{
   offset: 0.0,
   opacity: 0
@@ -62,26 +58,26 @@ const BASE_MASK_STOPS = [{
   offset: 1.0,
   opacity: 1
 }];
-const PROGRESSIVE_LAYERS = [{
-  amount: 0.65,
-  stops: BASE_MASK_STOPS
-},
-// Accent: the strongest blur, gathering over the lower portion for depth.
-{
-  amount: 1.0,
-  stops: [{
-    offset: 0.0,
-    opacity: 0
-  }, {
-    offset: 0.3,
-    opacity: 0.15
-  }, {
-    offset: 0.65,
-    opacity: 0.65
-  }, {
-    offset: 1.0,
-    opacity: 1
-  }]
+
+// Bottom-anchored blur bands (top → bottom). The first band is faint and covers
+// the whole surface so the top reads as barely-there glass; each subsequent band
+// starts lower and adds strength, compounding toward the bottom for a smooth
+// variable-radius result. Quadrature of these shares lands the bottom at ~peak.
+const PROGRESSIVE_BANDS = [{
+  start: 0.0,
+  amount: 0.18
+}, {
+  start: 0.3,
+  amount: 0.28
+}, {
+  start: 0.52,
+  amount: 0.38
+}, {
+  start: 0.7,
+  amount: 0.5
+}, {
+  start: 0.84,
+  amount: 0.6
 }];
 
 /**
@@ -114,13 +110,14 @@ const NATIVE_BLUR_SUPPORTED = (() => {
 })();
 
 /**
- * Vertical alpha-gradient mask drawn with `react-native-svg`. `MaskedView`
- * reveals its child in proportion to this mask's alpha, so feeding it an eased
- * multi-stop gradient makes the layer's blur swell in smoothly from top to
- * bottom instead of along a hard seam.
+ * Vertical color-gradient scrim drawn with `react-native-svg` — used as the
+ * no-native-blur fallback. Paints `color` at the eased per-stop alpha so the
+ * tint swells smoothly from clear (top) to full (bottom), exactly mirroring the
+ * old `MaskedView`-over-solid-color fallback but with no native-view masking.
  */
-function GradientMask({
+function GradientScrim({
   id,
+  color,
   stops
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
@@ -135,7 +132,7 @@ function GradientMask({
         y2: "1",
         children: stops.map((s, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
           offset: s.offset,
-          stopColor: "#000000",
+          stopColor: color,
           stopOpacity: s.opacity
         }, i))
       })
@@ -200,38 +197,37 @@ function GlassFill({
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [_reactNative.StyleSheet.absoluteFill, style],
         pointerEvents: "none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
-          style: _reactNative.StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(GradientMask, {
-            id: `${maskId}-fb`,
-            stops: BASE_MASK_STOPS
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [_reactNative.StyleSheet.absoluteFill, {
-              backgroundColor: fallbackColor
-            }]
-          })
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GradientScrim, {
+          id: `${maskId}-fb`,
+          color: fallbackColor,
+          stops: BASE_MASK_STOPS
         })
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [_reactNative.StyleSheet.absoluteFill, style],
       pointerEvents: "none",
-      children: PROGRESSIVE_LAYERS.map((layer, i) => {
-        const amount = Math.max(1, Math.round(peakBlur * layer.amount));
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
-          style: _reactNative.StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(GradientMask, {
-            id: `${maskId}-${i}`,
-            stops: layer.stops
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blur.BlurView, {
-            style: _reactNative.StyleSheet.absoluteFill,
-            blurType: blurType,
-            blurAmount: amount,
-            reducedTransparencyFallbackColor: fallbackColor
-          })
-        }, i);
+      children: PROGRESSIVE_BANDS.map((band, i) => {
+        const amount = Math.max(1, Math.round(peakBlur * band.amount));
+        return (
+          /*#__PURE__*/
+          // Each band is clipped to start at `band.start` and run to
+          // the bottom; its `BlurView` blurs the content (and any
+          // lower bands) behind it, so the radius compounds downward.
+          (0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [_reactNative.StyleSheet.absoluteFill, {
+              top: `${band.start * 100}%`,
+              overflow: 'hidden'
+            }],
+            pointerEvents: "none",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blur.BlurView, {
+              style: _reactNative.StyleSheet.absoluteFill,
+              blurType: blurType,
+              blurAmount: amount,
+              reducedTransparencyFallbackColor: fallbackColor
+            })
+          }, i)
+        );
       })
     });
   }

package/lib/commonjs/utils/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "MediaSource", {
     return _MediaSource.default;
   }
 });
+Object.defineProperty(exports, "boxShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.boxShadow;
+  }
+});
 Object.defineProperty(exports, "cloneChildrenWithModes", {
   enumerable: true,
   get: function () {
@@ -27,7 +33,26 @@ Object.defineProperty(exports, "formatIndianNumber", {
     return _numberUtils.formatIndianNumber;
   }
 });
+Object.defineProperty(exports, "parseBoxShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.parseBoxShadow;
+  }
+});
+Object.defineProperty(exports, "parseSingleShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.parseSingleShadow;
+  }
+});
+Object.defineProperty(exports, "supportsNativeBoxShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.supportsNativeBoxShadow;
+  }
+});
 var _reactUtils = require("./react-utils");
 var _MediaSource = _interopRequireDefault(require("./MediaSource"));
 var _numberUtils = require("./number-utils");
+var _shadow = require("./shadow");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/commonjs/utils/react-utils.js

@@ -8,8 +8,10 @@ exports.cloneChildrenWithModes = cloneChildrenWithModes;
 exports.flattenChildren = flattenChildren;
 exports.injectChildStyle = injectChildStyle;
 exports.mergeRefs = mergeRefs;
+exports.resolveTextLayout = resolveTextLayout;
 exports.resolveTruncation = resolveTruncation;
 var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * A shared, frozen empty modes object.
@@ -156,6 +158,66 @@ function resolveTruncation(disableTruncation, numberOfLines, ellipsizeMode) {
     ellipsizeMode
   };
 }
+/**
+ * Resolves the `<Text>` props + style for the two truncation escape hatches.
+ * This supersedes {@link resolveTruncation} for components that want the
+ * "brutal" overflow behaviour rather than just dropping the line clamp.
+ *
+ * - `disableTruncation`: never truncate. Drops `numberOfLines`/`ellipsizeMode`
+ *   AND sets `flexShrink: 0`, so a tight flex parent can no longer squeeze the
+ *   text into an ellipsis — instead the text keeps its intrinsic size and
+ *   overflows, even if that means blowing past (and visually breaking) the
+ *   parent layout. The text still wraps onto multiple lines.
+ * - `singleLine`: force everything onto one line with no wrapping. Implies
+ *   `disableTruncation` (the ellipsis is never shown). On web this adds
+ *   `whiteSpace: 'nowrap'` so the single line overflows horizontally instead of
+ *   wrapping. The text is never shrunk.
+ *
+ * Note (native): React Native's `<Text>` has no `white-space: nowrap`
+ * equivalent, so on iOS/Android `singleLine` cannot force a hard non-wrapping
+ * overflow — it behaves like `disableTruncation` (no ellipsis, no shrink). The
+ * hard single-line overflow is honoured on web (Storybook / react-native-web).
+ *
+ * When neither flag is set, the supplied `numberOfLines`/`ellipsizeMode` pass
+ * through unchanged and no extra style is returned.
+ */
+function resolveTextLayout({
+  disableTruncation,
+  singleLine,
+  numberOfLines,
+  ellipsizeMode
+}) {
+  if (singleLine) {
+    return {
+      numberOfLines: undefined,
+      ellipsizeMode: undefined,
+      style: {
+        flexShrink: 0,
+        flexGrow: 0,
+        ...(_reactNative.Platform.OS === 'web' ? {
+          whiteSpace: 'nowrap',
+          overflow: 'visible'
+        } : {})
+      }
+    };
+  }
+  if (disableTruncation) {
+    return {
+      numberOfLines: undefined,
+      ellipsizeMode: undefined,
+      style: {
+        flexShrink: 0,
+        ...(_reactNative.Platform.OS === 'web' ? {
+          overflow: 'visible'
+        } : {})
+      }
+    };
+  }
+  return {
+    numberOfLines,
+    ellipsizeMode
+  };
+}
 
 /**
  * Flattens React children, extracting them from Fragments.

package/lib/commonjs/utils/shadow.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.boxShadow = boxShadow;
+exports.parseBoxShadow = parseBoxShadow;
+exports.parseSingleShadow = parseSingleShadow;
+exports.supportsNativeBoxShadow = supportsNativeBoxShadow;
+var _reactNative = require("react-native");
+/**
+ * Cross-platform drop-shadow helper with a backward-compatibility layer.
+ *
+ * Why this exists
+ * ----------------
+ * The spec-compliant `boxShadow` style prop only landed in React Native 0.76
+ * (and only on the New Architecture / Fabric). Older apps that consume this
+ * library are still on pre-0.76 React Native where `boxShadow` is silently
+ * ignored on native, so their shadows simply disappear.
+ *
+ * Rather than hand-rolling a `Platform.select` block in every component, route
+ * ALL drop shadows through this single helper. When `boxShadow` is natively
+ * supported it is used verbatim (web + RN 0.76+ Fabric). When it is NOT
+ * supported, the CSS-style shadow string is parsed and translated into the
+ * legacy native shadow API:
+ *   - iOS:     `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`
+ *   - Android: `elevation`
+ *
+ * @example
+ * ```tsx
+ * const style = boxShadow('0px 2px 4px 0px rgba(0,0,0,0.18)')
+ * <View style={[base, style]} />
+ * ```
+ */
+
+// `boxShadow` is intentionally absent from the @types/react-native surface in
+// this repo (pinned to 0.73), so we widen ViewStyle locally for the cases
+// where we DO emit the native/web boxShadow string.
+
+/**
+ * Whether the spec-compliant `boxShadow` style prop is honored at runtime.
+ * - Web (react-native-web) always supports it.
+ * - Native supports it from RN 0.76+ AND only on the New Architecture (Fabric).
+ */
+function supportsNativeBoxShadow() {
+  if (_reactNative.Platform.OS === 'web') {
+    return true;
+  }
+  const version = _reactNative.Platform.constants?.reactNativeVersion;
+  const isVersionSupported = version ? version.major > 0 || version.major === 0 && version.minor >= 76 : false;
+
+  // Even on 0.76+, boxShadow is a New Architecture feature. Fabric exposes a
+  // global UI manager; its presence is the most reliable runtime signal.
+  const isFabric = typeof globalThis !== 'undefined' && globalThis.nativeFabricUIManager != null;
+  return isVersionSupported && isFabric;
+}
+
+/**
+ * Splits a (potentially multi-) box-shadow string on top-level commas, i.e.
+ * commas that are NOT inside a color function such as `rgba(12, 13, 16, 0.12)`.
+ */
+function splitShadows(value) {
+  const out = [];
+  let depth = 0;
+  let current = '';
+  for (const ch of value) {
+    if (ch === '(') depth++;else if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) {
+      if (current.trim()) out.push(current.trim());
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  if (current.trim()) out.push(current.trim());
+  return out;
+}
+
+/**
+ * Parses a single CSS box-shadow layer into its primitive parts.
+ * Supports: `[inset] offsetX offsetY [blur] [spread] color` in any sensible
+ * ordering of the keyword/color, with `rgb()/rgba()/hsl()/hsla()`, hex, or
+ * named colors.
+ */
+function parseSingleShadow(input) {
+  let s = input.trim();
+  let inset = false;
+  if (/(^|\s)inset(\s|$)/i.test(s)) {
+    inset = true;
+    s = s.replace(/(^|\s)inset(\s|$)/i, ' ').trim();
+  }
+  let color = 'rgba(0,0,0,1)';
+  const fnColor = s.match(/(?:rgba?|hsla?)\([^)]*\)/i);
+  if (fnColor) {
+    color = fnColor[0];
+    s = s.replace(fnColor[0], ' ').trim();
+  } else {
+    const hex = s.match(/#[0-9a-fA-F]{3,8}\b/);
+    if (hex) {
+      color = hex[0];
+      s = s.replace(hex[0], ' ').trim();
+    } else {
+      // Fall back to a trailing named color token (e.g. "red", "black").
+      const tokens = s.split(/\s+/).filter(Boolean);
+      const last = tokens[tokens.length - 1];
+      if (last && Number.isNaN(parseFloat(last))) {
+        color = last;
+        tokens.pop();
+        s = tokens.join(' ');
+      }
+    }
+  }
+  const nums = s.split(/\s+/).filter(Boolean).map(t => parseFloat(t) || 0);
+  const [offsetX = 0, offsetY = 0, blur = 0, spread = 0] = nums;
+  return {
+    offsetX,
+    offsetY,
+    blur,
+    spread,
+    color,
+    inset
+  };
+}
+
+/**
+ * Parses a full box-shadow string (one or more comma-separated layers).
+ */
+function parseBoxShadow(value) {
+  return splitShadows(value).map(parseSingleShadow);
+}
+
+/**
+ * Picks the visually dominant shadow layer (largest blur, then largest spread).
+ * iOS' legacy shadow API can only render a single shadow per view.
+ */
+function pickPrimary(shadows) {
+  if (shadows.length === 0) return undefined;
+  return shadows.reduce((best, s) => {
+    if (s.blur > best.blur) return s;
+    if (s.blur === best.blur && s.spread > best.spread) return s;
+    return best;
+  });
+}
+
+/**
+ * Translates the parsed shadow into the legacy native shadow style used by
+ * pre-0.76 React Native.
+ */
+function legacyShadowStyle(value, options) {
+  const shadows = parseBoxShadow(value);
+  const primary = pickPrimary(shadows);
+  if (!primary) {
+    return {};
+  }
+  if (_reactNative.Platform.OS === 'android') {
+    const elevation = options?.elevation ?? Math.max(0, Math.round(primary.blur / 2));
+    if (elevation <= 0) {
+      return {};
+    }
+    return {
+      elevation
+    };
+  }
+
+  // iOS: shadowOpacity defaults to 0 (invisible), so it MUST be set. We keep
+  // the full color (its own alpha is respected) and use opacity 1 as the
+  // multiplier so rgba() alpha is honored end-to-end.
+  return {
+    shadowColor: primary.color,
+    shadowOffset: {
+      width: primary.offsetX,
+      height: primary.offsetY
+    },
+    shadowOpacity: 1,
+    shadowRadius: primary.blur
+  };
+}
+
+/**
+ * Returns a style object that renders the given CSS-style box-shadow on every
+ * platform. Uses the native `boxShadow` prop when supported, otherwise falls
+ * back to the legacy `shadow*` (iOS) / `elevation` (Android) API.
+ *
+ * @param value   A CSS box-shadow string, e.g. `'0px 2px 4px 0px rgba(0,0,0,0.2)'`.
+ *                Multiple comma-separated layers are supported; on the legacy
+ *                fallback iOS uses the most prominent layer and Android uses a
+ *                single elevation.
+ * @param options Optional overrides (e.g. explicit Android `elevation`).
+ */
+function boxShadow(value, options) {
+  if (!value) {
+    return {};
+  }
+  if (supportsNativeBoxShadow()) {
+    return {
+      boxShadow: value
+    };
+  }
+  return legacyShadowStyle(value, options);
+}

package/lib/module/components/ActionFooter/ActionFooter.js

@@ -4,10 +4,9 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, Keyboard, View, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import { boxShadow } from '../../utils/shadow';
 import IconButton from '../IconButton/IconButton';
 import { jsx as _jsx } from "react/jsx-runtime";
-const IS_WEB = Platform.OS === 'web';
-
 // ---------------------------------------------------------------------------
 // Yoga-safe stretch
 // ---------------------------------------------------------------------------
@@ -36,27 +35,11 @@ const STRETCH_STYLE = {
   minWidth: 0
 };
 
-// Platform-specific drop shadow. Web boxShadow can't go through
-// Platform.select (RN's typed surface doesn't include it) so we keep it as a
-// separate constant and append it below.
-const NATIVE_SHADOW = Platform.select({
-  ios: {
-    shadowColor: '#0c0d10',
-    shadowOffset: {
-      width: 0,
-      height: -12
-    },
-    shadowOpacity: 0.16,
-    shadowRadius: 24
-  },
-  android: {
-    elevation: 16
-  },
-  default: {}
+// Upward drop shadow routed through the unified helper: native `boxShadow` on
+// web + RN 0.76+, legacy `shadow*` (iOS) / `elevation` (Android) on older RN.
+const SHADOW = boxShadow('0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)', {
+  elevation: 16
 });
-const WEB_SHADOW = IS_WEB ? {
-  boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)'
-} : null;
 
 // The runtime token a slot child must equal (by reference) to be treated as
 // an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
@@ -165,7 +148,7 @@ function ActionFooter({
       paddingRight: paddingHorizontal,
       paddingTop,
       paddingBottom,
-      ...NATIVE_SHADOW
+      ...SHADOW
     };
     const slot = {
       flexDirection: 'row',
@@ -202,7 +185,7 @@ function ActionFooter({
     });
   }, [children, modes]);
   return /*#__PURE__*/_jsx(Animated.View, {
-    style: [containerStyle, WEB_SHADOW, style,
+    style: [containerStyle, style,
     // Counter-translate by the keyboard height on Android so `adjustResize`
     // can't lift the footer above the keyboard (no-op on iOS/web where the
     // value stays at 0).

package/lib/module/components/ActionTile/ActionTile.js

@@ -29,18 +29,18 @@ export default function ActionTile({
   };
 
   // Resolve tokens
-  const backgroundColor = getVariableByName('actionTile/background', modes) || '#ffffff';
-  const gap = Number(getVariableByName('actionTile/gap', modes)) || 8;
-  const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes)) || 12;
-  const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes)) || 16;
-  const radius = Number(getVariableByName('actionTile/radius', modes)) || 16;
+  const backgroundColor = getVariableByName('actionTile/background', modes);
+  const gap = Number(getVariableByName('actionTile/gap', modes));
+  const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes));
+  const radius = Number(getVariableByName('actionTile/radius', modes));
 
   // Text tokens
-  const textColor = getVariableByName('actionTile/foreground', modes) || '#0d0d0f';
-  const fontSize = Number(getVariableByName('actionTile/fontSize', modes)) || 14;
-  const fontFamily = getVariableByName('actionTile/fontFamily', modes) || 'JioType Var';
-  const fontWeightStr = getVariableByName('actionTile/fontWeight', modes) || '500';
-  const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes)) || 17;
+  const textColor = getVariableByName('actionTile/foreground', modes);
+  const fontSize = Number(getVariableByName('actionTile/fontSize', modes));
+  const fontFamily = getVariableByName('actionTile/fontFamily', modes);
+  const fontWeightStr = getVariableByName('actionTile/fontWeight', modes);
+  const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes));
   const containerStyle = {
     backgroundColor,
     borderRadius: radius,

package/lib/module/components/AmountInput/AmountInput.js

@@ -28,9 +28,9 @@ const AmountInput = /*#__PURE__*/forwardRef(function AmountInput({
   };
 
   // Resolve tokens
-  const gap = Number(getVariableByName('amountInput/gap', modes)) || 16;
-  const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes)) || 0;
-  const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes)) || 0;
+  const gap = Number(getVariableByName('amountInput/gap', modes));
+  const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes));
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/module/components/AreaLineChart/AreaLineChart.js

@@ -720,7 +720,7 @@ function ChartTooltip({
   const bg = getVariableByName('tooltip/background', modes) ?? '#0f0d0a';
   const paddingH = toNumber(getVariableByName('tooltip/padding/horizontal', modes), 12);
   const paddingV = toNumber(getVariableByName('tooltip/padding/vertical', modes), 8);
-  const radius = toNumber(getVariableByName('radius', modes), 8);
+  const radius = 8;
   const labelColor = getVariableByName('tooltip/label/color', modes) ?? '#ffffff';
   if (items.length === 0) return null;
 
@@ -798,7 +798,7 @@ function ChartLegend() {
 /** Resolve `axisItem/*` typography tokens into a memoized text style. */
 function useAxisTypography(modes) {
   return useMemo(() => {
-    const color = getVariableByName('axisItem/color', modes) ?? '#000000';
+    const color = getVariableByName('axisItem/fg', modes) ?? '#000000';
     const fontFamily = getVariableByName('axisItem/fontFamily', modes) ?? 'JioType Var';
     const fontSize = toNumber(getVariableByName('axisItem/fontSize', modes), 12);
     const lineHeight = toNumber(getVariableByName('axisItem/lineHeight', modes), 16);

package/lib/module/components/Attached/Attached.js

@@ -124,7 +124,7 @@ function Attached({
   // anchor centering intact).
   const slotBorderStyle = useMemo(() => {
     const borderColor = getVariableByName('attached/slot/border', modes);
-    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes) || '0');
+    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes));
     if (!borderColor || !(borderWidth > 0)) return null;
 
     // Match the inner clip radius so the ring stays concentric. The outer edge