jfs-components 0.1.12 → 0.1.17

package/lib/commonjs/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ScrollArea = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Axis (or axes) along which the content can be scrolled.
+ *
+ * - `vertical` (default) — content taller than the viewport scrolls up/down.
+ * - `horizontal` — content wider than the viewport scrolls left/right.
+ * - `both` — content larger on either axis scrolls in both directions
+ *   (implemented as a horizontal `ScrollView` nested in a vertical one).
+ */
+
+/**
+ * Build a padding style fragment, letting the more specific props win over the
+ * broader ones (`paddingTop` > `paddingVertical` > `padding`). Only defined
+ * values are emitted so consumer `contentContainerStyle` overrides survive.
+ */
+function resolvePadding({
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft
+}) {
+  const top = paddingTop ?? paddingVertical ?? padding;
+  const right = paddingRight ?? paddingHorizontal ?? padding;
+  const bottom = paddingBottom ?? paddingVertical ?? padding;
+  const left = paddingLeft ?? paddingHorizontal ?? padding;
+  const style = {};
+  if (top != null) style.paddingTop = top;
+  if (right != null) style.paddingRight = right;
+  if (bottom != null) style.paddingBottom = bottom;
+  if (left != null) style.paddingLeft = left;
+  return style;
+}
+
+/**
+ * ScrollArea — a transparent, size-constrained viewport that makes content
+ * larger than itself smoothly scrollable (Figma node 6319:46886).
+ *
+ * It has no background of its own; constrain its size through `style`
+ * (`height`, `maxHeight`, or `flex`) and drop any over-sized content inside.
+ *
+ * @example
+ * // Vertical (default): a tall column inside a fixed-height window.
+ * <ScrollArea style={{ height: 240 }}>
+ *   <LongContent />
+ * </ScrollArea>
+ *
+ * @example
+ * // Horizontal: a wide row of cards inside a full-width window.
+ * <ScrollArea direction="horizontal">
+ *   <Card /> <Card /> <Card />
+ * </ScrollArea>
+ */
+const ScrollArea = exports.ScrollArea = /*#__PURE__*/(0, _react.forwardRef)(function ScrollArea({
+  children,
+  direction = 'vertical',
+  showScrollIndicator = false,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+  style,
+  contentContainerStyle,
+  modes = _reactUtils.EMPTY_MODES,
+  scrollEventThrottle = 16,
+  ...rest
+}, ref) {
+  const paddingStyle = resolvePadding({
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  });
+
+  // Cascade modes into every child so slotted tokens resolve correctly.
+  const content = (0, _reactUtils.cloneChildrenWithModes)(children, modes);
+  if (direction === 'both') {
+    // Outer vertical scroll, inner horizontal scroll. Padding lives on the
+    // inner content container so it scrolls with the content on both axes.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      ref: ref,
+      style: style,
+      showsVerticalScrollIndicator: showScrollIndicator,
+      scrollEventThrottle: scrollEventThrottle,
+      ...rest,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: showScrollIndicator,
+        scrollEventThrottle: scrollEventThrottle,
+        contentContainerStyle: [paddingStyle, contentContainerStyle],
+        children: content
+      })
+    });
+  }
+  const isHorizontal = direction === 'horizontal';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    ref: ref,
+    horizontal: isHorizontal,
+    style: style,
+    showsVerticalScrollIndicator: isHorizontal ? undefined : showScrollIndicator,
+    showsHorizontalScrollIndicator: isHorizontal ? showScrollIndicator : undefined,
+    scrollEventThrottle: scrollEventThrottle,
+    contentContainerStyle: [paddingStyle, contentContainerStyle],
+    ...rest,
+    children: content
+  });
+});
+var _default = exports.default = ScrollArea;

package/lib/commonjs/components/Section/Section.js

@@ -310,26 +310,26 @@ function slotGridPropsAreEqual(prev, next) {
  */
 
 function resolveSectionTokens(modes) {
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('section/background/color', modes) || '#ffffff';
-  const sectionGap = (0, _figmaVariablesResolver.getVariableByName)('section/gap', modes) || 12;
-  const slotGap = (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes) || 12;
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('section/padding/horizontal', modes) || 12;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('section/padding/vertical', modes) || 16;
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('section/radius', modes) || 12;
-  const headerGap = (0, _figmaVariablesResolver.getVariableByName)('section/header/gap', modes) || 8;
-  const headerPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('section/header/padding/horizontal', modes) || 0;
-  const headerPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('section/header/padding/vertical', modes) || 0;
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('section/title/color', modes) || '#0f0d0a';
-  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('section/title/fontSize', modes) || 18;
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('section/title/lineHeight', modes) || 20;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('section/title/fontFamily', modes) || 'System';
-  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('section/title/fontWeight', modes) || 800;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('section/background/color', modes);
+  const sectionGap = (0, _figmaVariablesResolver.getVariableByName)('section/gap', modes);
+  const slotGap = (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes);
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('section/padding/horizontal', modes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('section/padding/vertical', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('section/radius', modes);
+  const headerGap = (0, _figmaVariablesResolver.getVariableByName)('section/header/gap', modes);
+  const headerPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('section/header/padding/horizontal', modes);
+  const headerPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('section/header/padding/vertical', modes);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('section/title/color', modes);
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('section/title/fontSize', modes);
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('section/title/lineHeight', modes);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('section/title/fontFamily', modes);
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('section/title/fontWeight', modes);
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-  const supportTextColor = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/color', modes) || '#1f1a14';
-  const supportTextFontSize = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/fontSize', modes) || 14;
-  const supportTextLineHeight = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/lineHeight', modes) || 18;
-  const supportTextFontFamily = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/fontFamily', modes) || 'System';
-  const supportTextFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/fontWeight', modes) || 500;
+  const supportTextColor = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/color', modes);
+  const supportTextFontSize = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/fontSize', modes);
+  const supportTextLineHeight = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/lineHeight', modes);
+  const supportTextFontFamily = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/fontFamily', modes);
+  const supportTextFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/fontWeight', modes);
   const supportTextFontWeight = typeof supportTextFontWeightRaw === 'number' ? supportTextFontWeightRaw.toString() : supportTextFontWeightRaw;
   return {
     containerStyle: {
@@ -574,11 +574,11 @@ function SectionBento({
   renderToggle,
   ...rest
 }) {
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('section/background/color', modes) || '#ffffff';
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('section/gap', modes) || 12;
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('section/padding/horizontal', modes) || 12;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('section/padding/vertical', modes) || 16;
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('section/radius', modes) || 12;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('section/background/color', modes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('section/gap', modes);
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('section/padding/horizontal', modes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('section/padding/vertical', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('section/radius', modes);
   const containerStyle = (0, _react.useMemo)(() => ({
     backgroundColor,
     paddingHorizontal,

package/lib/commonjs/components/StatusHero/StatusHero.js

@@ -54,28 +54,28 @@ function StatusHero({
   };
 
   // Container
-  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/gap', modes)) || 12;
-  const padding = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/padding', modes)) || 8;
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/gap', modes));
+  const padding = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/padding', modes));
 
   // Media slot wrap (gap between icon and money value in default slot)
-  const slotWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/slotWrap/gap', modes)) || 46;
+  const slotWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/slotWrap/gap', modes));
 
   // Content wrap
-  const contentWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/contentWrap/gap', modes)) || 12;
+  const contentWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/contentWrap/gap', modes));
 
   // Title
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('statusHero/title/foreground', modes) || '#0c0d10';
-  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/title/fontSize', modes)) || 20;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('statusHero/title/fontFamily', modes) || 'System';
-  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/title/lineHeight', modes)) || 22;
-  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('statusHero/title/fontWeight', modes) || '700';
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('statusHero/title/foreground', modes);
+  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/title/fontSize', modes));
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('statusHero/title/fontFamily', modes);
+  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/title/lineHeight', modes));
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('statusHero/title/fontWeight', modes);
 
   // Body
-  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('statusHero/body/foreground', modes) || '#24262b';
-  const bodyFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/body/fontSize', modes)) || 14;
-  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('statusHero/body/fontFamily', modes) || 'System';
-  const bodyLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/body/lineHeight', modes)) || 17;
-  const bodyFontWeight = (0, _figmaVariablesResolver.getVariableByName)('statusHero/body/fontWeight', modes) || '500';
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('statusHero/body/foreground', modes);
+  const bodyFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/body/fontSize', modes));
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('statusHero/body/fontFamily', modes);
+  const bodyLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/body/lineHeight', modes));
+  const bodyFontWeight = (0, _figmaVariablesResolver.getVariableByName)('statusHero/body/fontWeight', modes);
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/commonjs/components/Stepper/Step.js

@@ -27,22 +27,22 @@ function Step({
   meta = true,
   status = 'number'
 }) {
-  const minHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/minHeight', modes)) || 52;
-  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/gap', modes)) || 16;
-  const indicatorSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/size', modes)) || 36;
-  const indicatorRadius = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/radius', modes)) || 9999;
-  const indicatorBg = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/background', modes) || '#5d00b5';
-  const indicatorBorderColor = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/border/color', modes) || '#5d00b5';
-  const indicatorBorderSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/border/size', modes)) || 1;
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/icon/color', modes) || '#ffffff';
-  const stepStatusSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepStatus/size', modes)) || 18;
-  const labelFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontSize', modes)) || 12;
-  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontFamily', modes) || undefined;
-  const labelLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/lineHeight', modes)) || 14;
-  const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontWeight', modes) || '500';
-  const lineSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/lineSize', modes)) || 2;
-  const lineColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/line', modes) || '#5d00b5';
-  const badgeWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/badgeWrap/gap', modes)) || 2;
+  const minHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/minHeight', modes));
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/gap', modes));
+  const indicatorSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/size', modes));
+  const indicatorRadius = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/radius', modes));
+  const indicatorBg = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/background', modes);
+  const indicatorBorderColor = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/border/color', modes);
+  const indicatorBorderSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/border/size', modes));
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/icon/color', modes);
+  const stepStatusSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepStatus/size', modes));
+  const labelFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontSize', modes));
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontFamily', modes);
+  const labelLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/lineHeight', modes));
+  const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontWeight', modes);
+  const lineSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/lineSize', modes));
+  const lineColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/line', modes);
+  const badgeWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/badgeWrap/gap', modes));
   const containerStyle = {
     flexDirection: 'row',
     minHeight,

package/lib/commonjs/components/Stepper/StepLabel.js

@@ -19,11 +19,11 @@ function StepLabel({
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/title/color', modes) || '#0d0d0f';
-  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/title/fontSize', modes)) || 14;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('steperItem/title/fontFamily', modes) || undefined;
-  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/title/lineHeight', modes)) || 18;
-  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('steperItem/title/fontWeight', modes) || '700';
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/title/color', modes);
+  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/title/fontSize', modes));
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('steperItem/title/fontFamily', modes);
+  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/title/lineHeight', modes));
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('steperItem/title/fontWeight', modes);
 
   // The Subtitle (supportingText) and Meta both default to the "Neutral"
   // AppearanceBrand. A caller-supplied `AppearanceBrand` still wins (it is
@@ -37,19 +37,19 @@ function StepLabel({
     AppearanceBrand: 'Neutral',
     ...modes
   };
-  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/color', subtitleModes) || '#3d4047';
-  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontSize', subtitleModes)) || 12;
-  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontFamily', subtitleModes) || undefined;
-  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/lineHeight', subtitleModes)) || 16;
-  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontWeight', subtitleModes) || '400';
-  const metaColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/color', metaModes) || '#f7ab21';
-  const metaFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/fontSize', metaModes)) || 10;
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/color', subtitleModes);
+  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontSize', subtitleModes));
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontFamily', subtitleModes);
+  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/lineHeight', subtitleModes));
+  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontWeight', subtitleModes);
+  const metaColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/color', metaModes);
+  const metaFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/fontSize', metaModes));
   // The Figma variable is authored as "fontFamily Copy" (with a space + suffix).
   // Match the literal Figma name to avoid a missing-variable warning.
-  const metaFontFamily = (0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/fontFamily Copy', metaModes) || undefined;
-  const metaLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/lineHeight', metaModes)) || 12;
-  const metaFontWeight = (0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/fontWeight', metaModes) || '700';
-  const textGap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/textWrap/gap', modes)) || 2;
+  const metaFontFamily = (0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/fontFamily Copy', metaModes);
+  const metaLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/lineHeight', metaModes));
+  const metaFontWeight = (0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/fontWeight', metaModes);
+  const textGap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/textWrap/gap', modes));
   const titleStyle = {
     color: titleColor,
     fontSize: titleFontSize,

package/lib/commonjs/components/Stepper/Stepper.js

@@ -29,9 +29,9 @@ function Stepper({
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
-  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('stepper/padding/horizontal', modes)) || 8;
-  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('stepper/padding/vertical', modes)) || 0;
-  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('stepper/gap', modes)) || 2;
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('stepper/padding/horizontal', modes));
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('stepper/padding/vertical', modes));
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('stepper/gap', modes));
   const containerStyle = {
     paddingHorizontal,
     paddingVertical,

package/lib/commonjs/components/SuggestiveSearch/SuggestiveSearch.js

@@ -52,23 +52,23 @@ const defaultFilter = (query, option) => option.label.toLowerCase().includes(que
 
 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 inputBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/border/size', modes), 1.5);
-    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);
     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)('formField/input/label/color', modes) || '#24262b';
+    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)('formField/input/label/color', modes);
     return {
       labelColor,
       labelFontFamily,
@@ -92,8 +92,8 @@ function useFormFieldTokens(modes) {
 }
 function useDropdownItemTextTokens(modes) {
   return (0, _react.useMemo)(() => {
-    const foreground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/foreground', modes) || '#000000';
-    const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontFamily', modes) || 'JioType Var';
+    const foreground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/foreground', modes);
+    const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontFamily', modes);
     const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontSize', modes), 16);
     const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/lineHeight', modes), 19);
     return {

package/lib/commonjs/components/SupportText/SupportText.js

@@ -37,12 +37,12 @@ function SupportText({
   };
 
   // --- Token Resolution ---
-  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/gap', modes), 10) || 4;
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('supportText/foreground', modes) || '#0c0d10';
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontFamily', modes) || 'JioType Var';
-  const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/fontSize', modes), 10) || 12;
-  const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/lineHeight', modes), 10) || 16;
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontWeight', modes) || '500';
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/gap', modes), 10);
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('supportText/foreground', modes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontFamily', modes);
+  const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/fontSize', modes), 10);
+  const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/lineHeight', modes), 10);
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('supportText/fontWeight', modes);
 
   // --- Styles ---
   const containerStyle = {

package/lib/commonjs/components/SupportText/SupportTextIcon.js

@@ -26,14 +26,14 @@ function SupportTextIcon({
   const iconName = STATUS_ICON_MAP[status] || 'ic_info';
 
   // Resolve icon size
-  const size = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/icon/size', modes), 10) || 16;
+  const size = parseInt((0, _figmaVariablesResolver.getVariableByName)('supportText/icon/size', modes), 10);
 
   // Resolve icon color
   // Assuming supportText/foreground applies to icon as well, or there might be specific icon color tokens.
   // Using supportText/foreground as default based on common patterns if no specific icon token.
   // If specific tokens exist like 'supportText/icon/color', they should be used.
   // Detailed variables only showed supportText/foreground.
-  const color = (0, _figmaVariablesResolver.getVariableByName)('supportText/foreground', modes) || '#0c0d10';
+  const color = (0, _figmaVariablesResolver.getVariableByName)('supportText/foreground', modes);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: style,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {

package/lib/commonjs/components/Text/Text.js

@@ -24,6 +24,7 @@ function Text({
   style,
   numberOfLines,
   disableTruncation,
+  singleLine,
   loading,
   skeletonWidth,
   skeletonLines
@@ -74,9 +75,20 @@ function Text({
   // still renders something visible when no content is supplied via either
   // route.
   const content = children !== undefined && children !== null && children !== false ? children : text !== undefined ? text : 'Korem ipsum ';
+
+  // Layout `style` is merged after the consumer `style` so the brutal overflow
+  // / no-wrap behaviour always wins.
+  const {
+    style: layoutStyle,
+    ...truncation
+  } = (0, _reactUtils.resolveTextLayout)({
+    disableTruncation,
+    singleLine,
+    numberOfLines
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-    style: [textStyle, style],
-    ...(0, _reactUtils.resolveTruncation)(disableTruncation, numberOfLines),
+    style: [textStyle, style, layoutStyle],
+    ...truncation,
     children: content
   });
 }

package/lib/commonjs/components/TextInput/TextInput.js

@@ -126,26 +126,26 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
   const inputRef = (0, _react.useRef)(null);
 
   // Resolve container tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/background', modes) || '#f5f5f5';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/border/color', modes) || '#f5f5f5';
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('textInput/horizontal/padding', modes) || 14;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('textInput/vertical/padding', modes) || 14;
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('textInput/radius', modes) || 99999;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/background', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/border/color', modes);
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('textInput/horizontal/padding', modes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('textInput/vertical/padding', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('textInput/radius', modes);
 
   // Resolve text input typography tokens
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/label/color', modes) || '#24262b';
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontSize', modes) || 14;
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('textInput/lineHeight', modes) || 18;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontFamily', modes) || 'System';
-  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontWeight', modes) || 400;
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/label/color', modes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontSize', modes);
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('textInput/lineHeight', modes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontFamily', modes);
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('textInput/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
 
   // Create placeholder color (lighter/more transparent version of text color)
   const placeholderColor = makePlaceholderColor(textColor, 0.6);
 
   // Resolve icon tokens (for default icon rendering if needed)
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', modes) || '#24262b';
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/size', modes) || 18;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', modes);
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/size', modes);
 
   // Convert radius to React Native format (if 99999, use a large value for fully rounded)
   const borderRadius = radius === 99999 ? 99999 : radius;
@@ -309,8 +309,8 @@ const TextInputSearch = /*#__PURE__*/(0, _react.forwardRef)(function TextInputSe
   ...rest
 }, ref) {
   // Resolve icon tokens for default search icon
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', modes) || '#24262b';
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/size', modes) || 18;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', modes);
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/size', modes);
 
   // Use provided leading or default to search icon
   const defaultLeading = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {

package/lib/commonjs/components/TextSegment/TextSegment.js

@@ -79,6 +79,7 @@ function TextSegment({
   textAlign = 'Left',
   numberOfLines,
   disableTruncation,
+  singleLine,
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
@@ -110,9 +111,20 @@ function TextSegment({
   // nested library `Text` runs resolve their tokens against the same baseline,
   // while still honouring any per-child `modes` override.
   const content = hasChildren ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : renderedSegments;
+
+  // Layout `style` is merged after the consumer `style` so the brutal overflow
+  // / no-wrap behaviour always wins.
+  const {
+    style: layoutStyle,
+    ...truncation
+  } = (0, _reactUtils.resolveTextLayout)({
+    disableTruncation,
+    singleLine,
+    numberOfLines
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-    style: [baseStyle, style],
-    ...(0, _reactUtils.resolveTruncation)(disableTruncation, numberOfLines),
+    style: [baseStyle, style, layoutStyle],
+    ...truncation,
     children: content
   });
 }

package/lib/commonjs/components/ThreadHero/ThreadHero.js

@@ -23,29 +23,29 @@ function ThreadHero({
   disableTruncation
 }) {
   // Container Gaps
-  const containerGap = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/gap', modes)) || 8;
-  const detailsGap = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/details/gap', modes)) || 2;
+  const containerGap = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/gap', modes));
+  const detailsGap = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/details/gap', modes));
 
   // Title Styles
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/color', modes) || '#191b1e';
-  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontSize', modes)) || 16;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontFamily', modes) || 'System';
-  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/title/lineHeight', modes)) || 20;
-  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontWeight', modes) || '600';
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/color', modes);
+  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontSize', modes));
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontFamily', modes);
+  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/title/lineHeight', modes));
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/title/fontWeight', modes);
 
   // Subtitle Styles
-  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/color', modes) || '#5d5d61';
-  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontSize', modes)) || 12;
-  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontFamily', modes) || 'System';
-  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/lineHeight', modes)) || 18;
-  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontWeight', modes) || '500';
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/color', modes);
+  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontSize', modes));
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontFamily', modes);
+  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/lineHeight', modes));
+  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/subtitle/fontWeight', modes);
 
   // Caption Styles
-  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/color', modes) || '#5d5d61';
-  const captionFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontSize', modes)) || 12;
-  const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontFamily', modes) || 'System';
-  const captionLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/lineHeight', modes)) || 18;
-  const captionFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontWeight', modes) || '500';
+  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/color', modes);
+  const captionFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontSize', modes));
+  const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontFamily', modes);
+  const captionLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/lineHeight', modes));
+  const captionFontWeight = (0, _figmaVariablesResolver.getVariableByName)('threadHero/caption/fontWeight', modes);
 
   // Styles
   const containerStyle = {