jfs-components 0.1.12 → 0.1.18

package/lib/module/components/Section/Section.js

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

package/lib/module/components/StatusHero/StatusHero.js

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

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

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

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

@@ -14,11 +14,11 @@ export function StepLabel({
   modes = EMPTY_MODES,
   style
 }) {
-  const titleColor = getVariableByName('steperItem/title/color', modes) || '#0d0d0f';
-  const titleFontSize = Number(getVariableByName('steperItem/title/fontSize', modes)) || 14;
-  const titleFontFamily = getVariableByName('steperItem/title/fontFamily', modes) || undefined;
-  const titleLineHeight = Number(getVariableByName('steperItem/title/lineHeight', modes)) || 18;
-  const titleFontWeight = getVariableByName('steperItem/title/fontWeight', modes) || '700';
+  const titleColor = getVariableByName('steperItem/title/color', modes);
+  const titleFontSize = Number(getVariableByName('steperItem/title/fontSize', modes));
+  const titleFontFamily = getVariableByName('steperItem/title/fontFamily', modes);
+  const titleLineHeight = Number(getVariableByName('steperItem/title/lineHeight', modes));
+  const titleFontWeight = getVariableByName('steperItem/title/fontWeight', modes);
 
   // The Subtitle (supportingText) and Meta both default to the "Neutral"
   // AppearanceBrand. A caller-supplied `AppearanceBrand` still wins (it is
@@ -32,19 +32,19 @@ export function StepLabel({
     AppearanceBrand: 'Neutral',
     ...modes
   };
-  const subtitleColor = getVariableByName('steperItem/subtitle/color', subtitleModes) || '#3d4047';
-  const subtitleFontSize = Number(getVariableByName('steperItem/subtitle/fontSize', subtitleModes)) || 12;
-  const subtitleFontFamily = getVariableByName('steperItem/subtitle/fontFamily', subtitleModes) || undefined;
-  const subtitleLineHeight = Number(getVariableByName('steperItem/subtitle/lineHeight', subtitleModes)) || 16;
-  const subtitleFontWeight = getVariableByName('steperItem/subtitle/fontWeight', subtitleModes) || '400';
-  const metaColor = getVariableByName('steperItem/meta/color', metaModes) || '#f7ab21';
-  const metaFontSize = Number(getVariableByName('steperItem/meta/fontSize', metaModes)) || 10;
+  const subtitleColor = getVariableByName('steperItem/subtitle/color', subtitleModes);
+  const subtitleFontSize = Number(getVariableByName('steperItem/subtitle/fontSize', subtitleModes));
+  const subtitleFontFamily = getVariableByName('steperItem/subtitle/fontFamily', subtitleModes);
+  const subtitleLineHeight = Number(getVariableByName('steperItem/subtitle/lineHeight', subtitleModes));
+  const subtitleFontWeight = getVariableByName('steperItem/subtitle/fontWeight', subtitleModes);
+  const metaColor = getVariableByName('steperItem/meta/color', metaModes);
+  const metaFontSize = Number(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 = getVariableByName('steperItem/meta/fontFamily Copy', metaModes) || undefined;
-  const metaLineHeight = Number(getVariableByName('steperItem/meta/lineHeight', metaModes)) || 12;
-  const metaFontWeight = getVariableByName('steperItem/meta/fontWeight', metaModes) || '700';
-  const textGap = Number(getVariableByName('steperItem/textWrap/gap', modes)) || 2;
+  const metaFontFamily = getVariableByName('steperItem/meta/fontFamily Copy', metaModes);
+  const metaLineHeight = Number(getVariableByName('steperItem/meta/lineHeight', metaModes));
+  const metaFontWeight = getVariableByName('steperItem/meta/fontWeight', metaModes);
+  const textGap = Number(getVariableByName('steperItem/textWrap/gap', modes));
   const titleStyle = {
     color: titleColor,
     fontSize: titleFontSize,

package/lib/module/components/Stepper/Stepper.js

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

package/lib/module/components/SuggestiveSearch/SuggestiveSearch.js

@@ -46,23 +46,23 @@ const defaultFilter = (query, option) => option.label.toLowerCase().includes(que
 
 function useFormFieldTokens(modes) {
   return useMemo(() => {
-    const labelColor = getVariableByName('formField/label/color', modes) || '#000000';
-    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = getVariableByName('formField/label/color', modes);
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes);
     const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
-    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes) || '500';
+    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes);
     const gap = toNumber(getVariableByName('formField/gap', modes), 8);
     const inputPaddingH = toNumber(getVariableByName('formField/input/padding/horizontal', modes), 12);
     const inputGap = toNumber(getVariableByName('formField/input/gap', modes), 8);
     const inputRadius = toNumber(getVariableByName('formField/input/radius', modes), 8);
     const inputBorderSize = toNumber(getVariableByName('formField/input/border/size', modes), 1.5);
-    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
-    const inputBorderColor = getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
+    const inputBackground = getVariableByName('formField/input/background', modes);
+    const inputBorderColor = getVariableByName('formField/input/border/color', modes);
     const inputFontSize = toNumber(getVariableByName('formField/input/label/fontSize', modes), 16);
     const inputLineHeight = toNumber(getVariableByName('formField/input/label/lineHeight', modes), 45);
-    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
-    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes) || '400';
-    const inputTextColor = getVariableByName('formField/input/label/color', modes) || '#24262b';
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes);
+    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes);
+    const inputTextColor = getVariableByName('formField/input/label/color', modes);
     return {
       labelColor,
       labelFontFamily,
@@ -86,8 +86,8 @@ function useFormFieldTokens(modes) {
 }
 function useDropdownItemTextTokens(modes) {
   return useMemo(() => {
-    const foreground = getVariableByName('dropdownItem/foreground', modes) || '#000000';
-    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes) || 'JioType Var';
+    const foreground = getVariableByName('dropdownItem/foreground', modes);
+    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes);
     const fontSize = toNumber(getVariableByName('dropdownItem/fontSize', modes), 16);
     const lineHeight = toNumber(getVariableByName('dropdownItem/lineHeight', modes), 19);
     return {

package/lib/module/components/SupportText/SupportText.js

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

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

@@ -21,14 +21,14 @@ function SupportTextIcon({
   const iconName = STATUS_ICON_MAP[status] || 'ic_info';
 
   // Resolve icon size
-  const size = parseInt(getVariableByName('supportText/icon/size', modes), 10) || 16;
+  const size = parseInt(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 = getVariableByName('supportText/foreground', modes) || '#0c0d10';
+  const color = getVariableByName('supportText/foreground', modes);
   return /*#__PURE__*/_jsx(View, {
     style: style,
     children: /*#__PURE__*/_jsx(Icon, {

package/lib/module/components/Text/Text.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { Text as RNText } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTextLayout } from '../../utils/react-utils';
 import Skeleton from '../../skeleton/Skeleton';
 import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,6 +19,7 @@ function Text({
   style,
   numberOfLines,
   disableTruncation,
+  singleLine,
   loading,
   skeletonWidth,
   skeletonLines
@@ -69,9 +70,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
+  } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines
+  });
   return /*#__PURE__*/_jsx(RNText, {
-    style: [textStyle, style],
-    ...resolveTruncation(disableTruncation, numberOfLines),
+    style: [textStyle, style, layoutStyle],
+    ...truncation,
     children: content
   });
 }

package/lib/module/components/TextInput/TextInput.js

@@ -120,26 +120,26 @@ const TextInputBase = /*#__PURE__*/forwardRef(function TextInput({
   const inputRef = useRef(null);
 
   // Resolve container tokens
-  const backgroundColor = getVariableByName('textInput/background', modes) || '#f5f5f5';
-  const borderColor = getVariableByName('textInput/border/color', modes) || '#f5f5f5';
-  const paddingHorizontal = getVariableByName('textInput/horizontal/padding', modes) || 14;
-  const paddingVertical = getVariableByName('textInput/vertical/padding', modes) || 14;
-  const radius = getVariableByName('textInput/radius', modes) || 99999;
+  const backgroundColor = getVariableByName('textInput/background', modes);
+  const borderColor = getVariableByName('textInput/border/color', modes);
+  const paddingHorizontal = getVariableByName('textInput/horizontal/padding', modes);
+  const paddingVertical = getVariableByName('textInput/vertical/padding', modes);
+  const radius = getVariableByName('textInput/radius', modes);
 
   // Resolve text input typography tokens
-  const textColor = getVariableByName('textInput/label/color', modes) || '#24262b';
-  const fontSize = getVariableByName('textInput/fontSize', modes) || 14;
-  const lineHeight = getVariableByName('textInput/lineHeight', modes) || 18;
-  const fontFamily = getVariableByName('textInput/fontFamily', modes) || 'System';
-  const fontWeightRaw = getVariableByName('textInput/fontWeight', modes) || 400;
+  const textColor = getVariableByName('textInput/label/color', modes);
+  const fontSize = getVariableByName('textInput/fontSize', modes);
+  const lineHeight = getVariableByName('textInput/lineHeight', modes);
+  const fontFamily = getVariableByName('textInput/fontFamily', modes);
+  const fontWeightRaw = 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 = getVariableByName('textInput/icon/color', modes) || '#24262b';
-  const iconSize = getVariableByName('textInput/icon/size', modes) || 18;
+  const iconColor = getVariableByName('textInput/icon/color', modes);
+  const iconSize = 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;
@@ -303,8 +303,8 @@ const TextInputSearch = /*#__PURE__*/forwardRef(function TextInputSearch({
   ...rest
 }, ref) {
   // Resolve icon tokens for default search icon
-  const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b';
-  const iconSize = getVariableByName('textInput/icon/size', modes) || 18;
+  const iconColor = getVariableByName('textInput/icon/color', modes);
+  const iconSize = getVariableByName('textInput/icon/size', modes);
 
   // Use provided leading or default to search icon
   const defaultLeading = /*#__PURE__*/_jsx(Icon, {

package/lib/module/components/TextSegment/TextSegment.js

@@ -3,7 +3,7 @@
 import React, { useMemo } from 'react';
 import { Text as RNText } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTextLayout } from '../../utils/react-utils';
 
 /**
  * A single coloured run inside a {@link TextSegment}. Each run can carry its own
@@ -74,6 +74,7 @@ function TextSegment({
   textAlign = 'Left',
   numberOfLines,
   disableTruncation,
+  singleLine,
   modes = EMPTY_MODES,
   style
 }) {
@@ -105,9 +106,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 ? 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
+  } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines
+  });
   return /*#__PURE__*/_jsx(RNText, {
-    style: [baseStyle, style],
-    ...resolveTruncation(disableTruncation, numberOfLines),
+    style: [baseStyle, style, layoutStyle],
+    ...truncation,
     children: content
   });
 }

package/lib/module/components/ThreadHero/ThreadHero.js

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

package/lib/module/components/Title/Title.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTextLayout } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TEXT_ALIGN_MAP = {
   Left: 'left',
@@ -20,6 +20,7 @@ function Title({
   subtitleStyle,
   numberOfLines,
   disableTruncation,
+  singleLine,
   accessibilityLabel,
   accessibilityHint,
   ...rest
@@ -31,12 +32,12 @@ function Title({
     ...globalModes,
     ...propModes
   };
-  const paddingHorizontal = getVariableByName('title/padding/horizontal', modes) || 16;
-  const paddingVertical = getVariableByName('title/padding/vertical', modes) || 8;
-  const gap = getVariableByName('title/gap', modes) || 8;
-  const labelColor = getVariableByName('title/label/color', modes) || '#0d0d0f';
-  const fontSize = getVariableByName('title/fontSize', modes) || 26;
-  const rawLineHeight = getVariableByName('title/lineHeight', modes) || 26;
+  const paddingHorizontal = getVariableByName('title/padding/horizontal', modes);
+  const paddingVertical = getVariableByName('title/padding/vertical', modes);
+  const gap = getVariableByName('title/gap', modes);
+  const labelColor = getVariableByName('title/label/color', modes);
+  const fontSize = getVariableByName('title/fontSize', modes);
+  const rawLineHeight = getVariableByName('title/lineHeight', modes);
   // The Figma title tokens ship with `lineHeight === fontSize` (26/26). On
   // native (especially Android) that produces a Text box exactly `lineHeight`
   // tall, which clips descenders like p/g/y/q/j at the bottom — particularly
@@ -44,15 +45,15 @@ function Title({
   // always fit. When a downstream token already provides adequate leading,
   // the original value is preserved.
   const lineHeight = Math.max(rawLineHeight, Math.ceil(fontSize * 1.2));
-  const fontFamily = getVariableByName('title/fontFamily', modes) || 'System';
-  const fontWeightRaw = getVariableByName('title/fontWeight', modes) || 900;
+  const fontFamily = getVariableByName('title/fontFamily', modes);
+  const fontWeightRaw = getVariableByName('title/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
-  const subtitleColor = getVariableByName('pageSubtitle/label/color', modes) || '#0d0d0f';
-  const subtitleFontSize = getVariableByName('pageSubtitle/fontSize', modes) || 14;
-  const subtitleRawLineHeight = getVariableByName('pageSubtitle/lineHeight', modes) || 18;
+  const subtitleColor = getVariableByName('pageSubtitle/label/color', modes);
+  const subtitleFontSize = getVariableByName('pageSubtitle/fontSize', modes);
+  const subtitleRawLineHeight = getVariableByName('pageSubtitle/lineHeight', modes);
   const subtitleLineHeight = Math.max(subtitleRawLineHeight, Math.ceil(subtitleFontSize * 1.2));
-  const subtitleFontFamily = getVariableByName('pageSubtitle/fontFamily', modes) || 'System';
-  const subtitleFontWeightRaw = getVariableByName('pageSubtitle/fontWeight', modes) || 500;
+  const subtitleFontFamily = getVariableByName('pageSubtitle/fontFamily', modes);
+  const subtitleFontWeightRaw = getVariableByName('pageSubtitle/fontWeight', modes);
   const subtitleFontWeight = typeof subtitleFontWeightRaw === 'number' ? subtitleFontWeightRaw.toString() : subtitleFontWeightRaw;
   const containerStyle = {
     flexDirection: 'column',
@@ -81,6 +82,26 @@ function Title({
     flexShrink: 1,
     textAlign: TEXT_ALIGN_MAP[textAlign]
   };
+
+  // `style` from the layout helper must be merged AFTER the consumer override
+  // so the brutal overflow / no-wrap behaviour always wins.
+  const {
+    style: titleLayoutStyle,
+    ...titleTruncation
+  } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines: numberOfLines !== undefined ? numberOfLines : 1
+  });
+  // The subtitle has never been line-clamped, so it only picks up the escape
+  // hatches (overflow / single-line) — `numberOfLines` is intentionally omitted.
+  const {
+    style: subtitleLayoutStyle,
+    ...subtitleTruncation
+  } = resolveTextLayout({
+    disableTruncation,
+    singleLine
+  });
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     accessibilityRole: "header",
@@ -88,13 +109,14 @@ function Title({
     accessibilityHint: accessibilityHint,
     ...rest,
     children: [/*#__PURE__*/_jsx(Text, {
-      style: [titleTextStyle, textStyle],
-      ...resolveTruncation(disableTruncation, numberOfLines !== undefined ? numberOfLines : 1),
+      style: [titleTextStyle, textStyle, titleLayoutStyle],
+      ...titleTruncation,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: title
     }), subtitle != null && /*#__PURE__*/_jsx(Text, {
-      style: [subtitleTextStyle, subtitleStyle],
+      style: [subtitleTextStyle, subtitleStyle, subtitleLayoutStyle],
+      ...subtitleTruncation,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: subtitle

package/lib/module/components/Toast/Toast.js

@@ -26,21 +26,21 @@ function Toast({
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, [id, timeout]);
-  const backgroundColor = getVariableByName('toast/background', modes) || '#303338';
-  const foreground = getVariableByName('toast/foreground', modes) || '#ffffff';
-  const fontSize = getVariableByName('toast/fontSize', modes) || 14;
-  const fontFamily = getVariableByName('toast/fontFamily', modes) || undefined;
-  const fontWeight = getVariableByName('toast/fontWeight', modes) || '500';
-  const lineHeight = getVariableByName('toast/lineHeight', modes) || 18;
-  const radius = getVariableByName('toast/radius', modes) || 14;
-  const paddingHorizontal = getVariableByName('toast/padding/horizontal', modes) || 16;
-  const paddingVertical = getVariableByName('toast/padding/vertical', modes) || 14;
-  const gap = getVariableByName('toast/gap', modes) || 8;
-  const borderWidth = getVariableByName('toast/border/size', modes) || 1;
-  const borderColor = getVariableByName('toast/border/color', modes) || 'rgba(255,255,255,0.1)';
-  const shadowBlurPrimary = getVariableByName('toast/shadow/primary/blur', modes) || 48;
-  const shadowOffsetYPrimary = getVariableByName('toast/shadow/primary/offsetY', modes) || 16;
-  const shadowColorPrimary = getVariableByName('toast/shadow/primary/color', modes) || 'rgba(13,13,15,0.16)';
+  const backgroundColor = getVariableByName('toast/background', modes);
+  const foreground = getVariableByName('toast/foreground', modes);
+  const fontSize = getVariableByName('toast/fontSize', modes);
+  const fontFamily = getVariableByName('toast/fontFamily', modes);
+  const fontWeight = getVariableByName('toast/fontWeight', modes);
+  const lineHeight = getVariableByName('toast/lineHeight', modes);
+  const radius = getVariableByName('toast/radius', modes);
+  const paddingHorizontal = getVariableByName('toast/padding/horizontal', modes);
+  const paddingVertical = getVariableByName('toast/padding/vertical', modes);
+  const gap = getVariableByName('toast/gap', modes);
+  const borderWidth = getVariableByName('toast/border/size', modes);
+  const borderColor = getVariableByName('toast/border/color', modes);
+  const shadowBlurPrimary = getVariableByName('toast/shadow/primary/blur', modes);
+  const shadowOffsetYPrimary = getVariableByName('toast/shadow/primary/offsetY', modes);
+  const shadowColorPrimary = getVariableByName('toast/shadow/primary/color', modes);
   const enterAnimation = placement === 'top' ? SlideInUp.duration(ANIMATION_DURATION) : SlideInDown.duration(ANIMATION_DURATION);
   const containerStyle = {
     backgroundColor,