jfs-components 0.0.51 → 0.0.52

package/lib/module/components/ListItem/ListItem.js

@@ -67,28 +67,33 @@ function ListItem({
   webAccessibilityProps,
   ...rest
 }) {
+  const resolvedModes = {
+    ...modes,
+    "Context": "ListItem"
+  };
+
   // Resolve container spacing tokens
-  const gap = getVariableByName('listItem/gap', modes) ?? 8;
-  const paddingTop = getVariableByName('listItem/padding/top', modes) ?? 0;
-  const paddingBottom = getVariableByName('listItem/padding/bottom', modes) ?? 0;
-  const paddingLeft = getVariableByName('listItem/padding/left', modes) ?? 0;
-  const paddingRight = getVariableByName('listItem/padding/right', modes) ?? 0;
-  const textWrapGap = getVariableByName('listItem/text wrap', modes) ?? 0;
+  const gap = getVariableByName('listItem/gap', resolvedModes) ?? 8;
+  const paddingTop = getVariableByName('listItem/padding/top', resolvedModes) ?? 0;
+  const paddingBottom = getVariableByName('listItem/padding/bottom', resolvedModes) ?? 0;
+  const paddingLeft = getVariableByName('listItem/padding/left', resolvedModes) ?? 0;
+  const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0;
+  const textWrapGap = getVariableByName('listItem/text wrap', resolvedModes) ?? 0;
 
   // Title typography (horizontal layout)
-  const titleColor = getVariableByName('listItem/title/color', modes) || '#0f0d0a';
-  const titleFontSize = getVariableByName('listItem/title/fontSize', modes) || 14;
-  const titleLineHeight = getVariableByName('listItem/title/lineHeight', modes) || 16;
-  const titleFontFamily = getVariableByName('listItem/title/fontFamily', modes) || 'System';
-  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', modes) || 700;
+  const titleColor = getVariableByName('listItem/title/color', resolvedModes) || '#0f0d0a';
+  const titleFontSize = getVariableByName('listItem/title/fontSize', resolvedModes) || 14;
+  const titleLineHeight = getVariableByName('listItem/title/lineHeight', resolvedModes) || 16;
+  const titleFontFamily = getVariableByName('listItem/title/fontFamily', resolvedModes) || 'System';
+  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', resolvedModes) || 700;
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
 
   // Support text typography (used in both layouts)
-  const supportColor = getVariableByName('listItem/supportText/color', modes) || '#1f1a14';
-  const supportFontSize = getVariableByName('listItem/supportText/fontSize', modes) || 12;
-  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', modes) || 14;
-  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', modes) || 'System';
-  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', modes) || 500;
+  const supportColor = getVariableByName('listItem/supportText/color', resolvedModes) || '#1f1a14';
+  const supportFontSize = getVariableByName('listItem/supportText/fontSize', resolvedModes) || 12;
+  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', resolvedModes) || 14;
+  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', resolvedModes) || 'System';
+  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', resolvedModes) || 500;
   const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
   const baseContainerStyle = {
     paddingTop,
@@ -153,16 +158,16 @@ function ListItem({
   });
 
   // Process leading slot to pass modes to children
-  const processedLeading = leading ? cloneChildrenWithModes(React.Children.toArray(leading), modes) : [];
+  const processedLeading = leading ? cloneChildrenWithModes(React.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__*/_jsx(IconCapsule, {
-    modes: modes,
+    modes: resolvedModes,
     accessibilityLabel: undefined
   });
   const renderSupportContent = () => {
     if (supportSlot) {
       // Process supportSlot to pass modes to children
-      const processedSupportSlot = cloneChildrenWithModes(React.Children.toArray(supportSlot), modes);
+      const processedSupportSlot = cloneChildrenWithModes(React.Children.toArray(supportSlot), resolvedModes);
       // Extract single element if array has one element, otherwise use array
       return processedSupportSlot.length === 1 ? processedSupportSlot[0] : processedSupportSlot;
     }
@@ -182,7 +187,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 ? cloneChildrenWithModes(React.Children.toArray(endSlot), modes, {
+    const processedEndSlot = endSlot ? cloneChildrenWithModes(React.Children.toArray(endSlot), resolvedModes, {
       "Context": 'ListItem'
     }) : [];
     // Extract single element if array has one element, otherwise use array
@@ -205,7 +210,7 @@ function ListItem({
         children: trailingContent
       }) : null, navArrow && /*#__PURE__*/_jsx(NavArrow, {
         direction: "Forward",
-        modes: modes
+        modes: resolvedModes
       })]
     });
     if (onPress) {

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

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