jfs-components 0.0.51 → 0.0.53

package/lib/commonjs/components/ListItem/ListItem.js

@@ -73,28 +73,33 @@ function ListItem({
   webAccessibilityProps,
   ...rest
 }) {
+  const resolvedModes = {
+    ...modes,
+    "Context": "ListItem"
+  };
+
   // Resolve container spacing tokens
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('listItem/gap', modes) ?? 8;
-  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/top', modes) ?? 0;
-  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/bottom', modes) ?? 0;
-  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/left', modes) ?? 0;
-  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/right', modes) ?? 0;
-  const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('listItem/text wrap', modes) ?? 0;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('listItem/gap', resolvedModes) ?? 8;
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/top', resolvedModes) ?? 0;
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/bottom', resolvedModes) ?? 0;
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/left', resolvedModes) ?? 0;
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/right', resolvedModes) ?? 0;
+  const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('listItem/text wrap', resolvedModes) ?? 0;
 
   // Title typography (horizontal layout)
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', modes) || '#0f0d0a';
-  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', modes) || 14;
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', modes) || 16;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontFamily', modes) || 'System';
-  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontWeight', modes) || 700;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', resolvedModes) || '#0f0d0a';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', resolvedModes) || 14;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', resolvedModes) || 16;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontFamily', resolvedModes) || 'System';
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontWeight', resolvedModes) || 700;
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
 
   // Support text typography (used in both layouts)
-  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/color', modes) || '#1f1a14';
-  const supportFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontSize', modes) || 12;
-  const supportLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/lineHeight', modes) || 14;
-  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontFamily', modes) || 'System';
-  const supportFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontWeight', modes) || 500;
+  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/color', resolvedModes) || '#1f1a14';
+  const supportFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontSize', resolvedModes) || 12;
+  const supportLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/lineHeight', resolvedModes) || 14;
+  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontFamily', resolvedModes) || 'System';
+  const supportFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontWeight', resolvedModes) || 500;
   const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
   const baseContainerStyle = {
     paddingTop,
@@ -159,16 +164,16 @@ function ListItem({
   });
 
   // Process leading slot to pass modes to children
-  const processedLeading = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), modes) : [];
+  const processedLeading = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), resolvedModes) : [];
   // Extract single element if array has one element, otherwise use array
   const leadingElement = processedLeading.length > 0 ? processedLeading.length === 1 ? processedLeading[0] : processedLeading : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
-    modes: modes,
+    modes: resolvedModes,
     accessibilityLabel: undefined
   });
   const renderSupportContent = () => {
     if (supportSlot) {
       // Process supportSlot to pass modes to children
-      const processedSupportSlot = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(supportSlot), modes);
+      const processedSupportSlot = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(supportSlot), resolvedModes);
       // Extract single element if array has one element, otherwise use array
       return processedSupportSlot.length === 1 ? processedSupportSlot[0] : processedSupportSlot;
     }
@@ -188,7 +193,7 @@ function ListItem({
   if (layout === 'Horizontal') {
     // Process endSlot to pass modes to children
     // Force Context: 'ListItem' - this value can never be overridden by external modes
-    const processedEndSlot = endSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(endSlot), modes, {
+    const processedEndSlot = endSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(endSlot), resolvedModes, {
       "Context": 'ListItem'
     }) : [];
     // Extract single element if array has one element, otherwise use array
@@ -211,7 +216,7 @@ function ListItem({
         children: trailingContent
       }) : null, navArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
         direction: "Forward",
-        modes: modes
+        modes: resolvedModes
       })]
     });
     if (onPress) {

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

@@ -66,7 +66,7 @@ function Section({
   } : {};
   // Resolve section container tokens
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('section/background/color', modes) || '#ffffff';
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('section/gap', modes) || 12;
+  const gap = (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;