jfs-components 0.0.62 → 0.0.63

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

@@ -13,76 +13,143 @@ var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Match Button: delay the press visual on iOS so a scroll-cancelled touch
+// never applies the "pressed" style. See Button.tsx for the rationale.
+const IS_WEB = _reactNative.Platform.OS === 'web';
+const IS_IOS = _reactNative.Platform.OS === 'ios';
+const HEADER_PRESS_DELAY = IS_IOS ? 130 : 0;
+
+// Module-scope style constants — never re-allocated per render.
+const headerWrapStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+};
+const headerHoverStyle = {
+  opacity: 0.95
+};
+const headerPressedStyle = {
+  opacity: 0.85
+};
+const headerFocusStyle = {
+  borderColor: '#222',
+  borderWidth: 1
+};
+
 // ---------------------------------------------------------------------------
-// Shared grid layout: measures widest child, enforces uniform width,
-// chunks into fixed rows of up to maxColumns, space-between per row.
+// Shared grid layout: measures the widest child once per item-count, then
+// renders uniform-width cells laid out with `justify-content: space-between`.
+// This preserves three visual invariants regardless of viewport width:
+//   1. The first cell hugs the container's left edge.
+//   2. The last cell hugs the container's right edge.
+//   3. Cells in row N column K align with cells in row N+1 column K
+//      (uniform cell width across the whole grid).
+// Pure flex sizing (e.g. `flexBasis: 0; flexGrow: 1`) cannot satisfy (1) and
+// (2) on wide viewports — it distributes extra space inside each cell, which
+// makes the icon+label content drift toward each cell's center and produces
+// visible "dead" margins on the left and right of the grid.
+//
+// To avoid the blank-flash that the previous implementation suffered from
+// (it hid the grid with `opacity: 0` until measurement completed, and reset
+// every measurement when the item count changed):
+//   * Cells render at their *natural* widths during measurement instead of
+//     being hidden. With `space-between`, the first/last cells already hug
+//     the edges; only the column alignment can be off by a few pixels for
+//     the single frame between mount and the onLayout callback.
+//   * On item-count change (e.g. expand / collapse), we clear the per-cell
+//     samples but keep the rendered layout visible — we never blank out.
+//   * No 500ms safety timeout is needed because the grid is visible from the
+//     first frame.
 // ---------------------------------------------------------------------------
 const SLOT_GRID_MAX_COLUMNS = 4;
-function SlotGrid({
+const slotGridRowStyle = {
+  flexDirection: 'row',
+  justifyContent: 'space-between'
+};
+const SlotGrid = /*#__PURE__*/_react.default.memo(function SlotGrid({
   items,
   gap,
   maxColumns = SLOT_GRID_MAX_COLUMNS
 }) {
+  const totalItems = items.length;
   const [maxItemWidth, setMaxItemWidth] = (0, _react.useState)(null);
-  const [measureTimedOut, setMeasureTimedOut] = (0, _react.useState)(false);
+  // Tracks the item-count that `maxItemWidth` corresponds to. When the
+  // current `totalItems` differs, the existing measurement is considered
+  // stale and cells fall back to natural widths until remeasurement.
+  const [measuredForCount, setMeasuredForCount] = (0, _react.useState)(0);
   const itemWidthsRef = (0, _react.useRef)(new Map());
-  const totalItems = items.length;
-  (0, _react.useEffect)(() => {
-    itemWidthsRef.current.clear();
-    setMaxItemWidth(null);
-    setMeasureTimedOut(false);
-  }, [totalItems]);
-  (0, _react.useEffect)(() => {
-    if (maxItemWidth !== null) return;
-    const timer = setTimeout(() => setMeasureTimedOut(true), 500);
-    return () => clearTimeout(timer);
-  }, [maxItemWidth, totalItems]);
+
+  // Synchronously invalidate per-cell samples when the item count changes
+  // (e.g. show more / less). We deliberately do NOT touch `maxItemWidth` or
+  // `measuredForCount` state here — flipping them would force an extra render
+  // pass; instead we let the count mismatch (`measuredForCount !== totalItems`)
+  // gate the use of the stale value, and the next onLayout cycle will publish
+  // a fresh `maxItemWidth` for the new count.
+  const prevTotalRef = (0, _react.useRef)(totalItems);
+  if (prevTotalRef.current !== totalItems) {
+    prevTotalRef.current = totalItems;
+    itemWidthsRef.current = new Map();
+  }
   const handleItemLayout = (0, _react.useCallback)((index, width) => {
-    itemWidthsRef.current.set(index, width);
-    if (itemWidthsRef.current.size >= totalItems && totalItems > 0) {
-      setMaxItemWidth(Math.max(...itemWidthsRef.current.values()));
+    const widths = itemWidthsRef.current;
+    const previous = widths.get(index);
+    if (previous !== undefined && Math.abs(previous - width) < 0.5) return;
+    widths.set(index, width);
+    if (widths.size >= totalItems && totalItems > 0) {
+      let newMax = 0;
+      for (const w of widths.values()) {
+        if (w > newMax) newMax = w;
+      }
+      setMaxItemWidth(prev => prev !== null && Math.abs(prev - newMax) < 0.5 ? prev : newMax);
+      setMeasuredForCount(totalItems);
     }
   }, [totalItems]);
-  const isMeasured = maxItemWidth !== null;
+  const hasFreshMeasurement = maxItemWidth !== null && measuredForCount === totalItems;
+  const cellWidth = hasFreshMeasurement ? maxItemWidth : undefined;
   const columns = Math.min(maxColumns, totalItems || 1);
   const rows = [];
   for (let i = 0; i < items.length; i += columns) {
     rows.push(items.slice(i, i + columns));
   }
+  const containerStyle = (0, _react.useMemo)(() => ({
+    gap
+  }), [gap]);
+  const measuredCellStyle = (0, _react.useMemo)(() => cellWidth !== undefined ? {
+    width: cellWidth
+  } : undefined, [cellWidth]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: {
-      gap,
-      ...(isMeasured || measureTimedOut ? {} : {
-        opacity: 0
-      })
-    },
+    style: containerStyle,
     children: rows.map((row, rowIndex) => {
       const spacersNeeded = row.length < columns ? columns - row.length : 0;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: {
-          flexDirection: 'row',
-          justifyContent: 'space-between'
-        },
+        style: slotGridRowStyle,
         children: [row.map((child, colIndex) => {
           const itemIndex = rowIndex * columns + colIndex;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            onLayout: !isMeasured ? e => handleItemLayout(itemIndex, e.nativeEvent.layout.width) : undefined,
-            style: isMeasured ? {
-              width: maxItemWidth
-            } : undefined,
+            onLayout: hasFreshMeasurement ? undefined : e => handleItemLayout(itemIndex, e.nativeEvent.layout.width),
+            style: measuredCellStyle,
             children: child
           }, itemIndex);
-        }), isMeasured && spacersNeeded > 0 && Array.from({
+        }), hasFreshMeasurement && spacersNeeded > 0 && Array.from({
           length: spacersNeeded
         }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: {
-            width: maxItemWidth
-          }
+          style: measuredCellStyle
         }, `spacer-${i}`))]
       }, rowIndex);
     })
   });
+}, slotGridPropsAreEqual);
+function slotGridPropsAreEqual(prev, next) {
+  if (prev.gap !== next.gap) return false;
+  if ((prev.maxColumns ?? SLOT_GRID_MAX_COLUMNS) !== (next.maxColumns ?? SLOT_GRID_MAX_COLUMNS)) return false;
+  if (prev.items === next.items) return true;
+  if (prev.items.length !== next.items.length) return false;
+  for (let i = 0; i < prev.items.length; i++) {
+    if (prev.items[i] !== next.items[i]) return false;
+  }
+  return true;
 }
+
 /**
  * Section component that mirrors the Figma "Section" component.
  *
@@ -107,96 +174,99 @@ function SlotGrid({
  * @param {string} [props.accessibilityLabel] - Accessibility label for the section. If not provided, uses title
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
-function Section({
-  title = 'Section title',
-  supportText = 'Section support text',
-  showSupportText = true,
-  slot,
-  slotDirection = 'row',
-  modes = {},
-  onPress,
-  style,
-  accessibilityLabel,
-  accessibilityHint,
-  webAccessibilityProps,
-  ...rest
-}) {
-  const [isHeaderFocused, setIsHeaderFocused] = (0, _react.useState)(false);
-  const [isHeaderHovered, setIsHeaderHovered] = (0, _react.useState)(false);
-  const [isHeaderPressed, setIsHeaderPressed] = (0, _react.useState)(false);
-  const headerFocusStyle = isHeaderFocused ? {
-    borderColor: '#222',
-    borderWidth: 1
-  } : {};
-  const headerHoverStyle = isHeaderHovered ? {
-    opacity: 0.95
-  } : {};
-  const headerPressedStyle = isHeaderPressed ? {
-    opacity: 0.85
-  } : {};
-  // Resolve section container tokens
+
+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;
-
-  // Resolve section header tokens
   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;
-
-  // Resolve section title tokens
   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 titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-
-  // Resolve section support text tokens
   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 supportTextFontWeight = typeof supportTextFontWeightRaw === 'number' ? supportTextFontWeightRaw.toString() : supportTextFontWeightRaw;
-  const containerStyle = {
-    backgroundColor,
-    paddingHorizontal,
-    paddingVertical,
-    borderRadius: radius,
-    gap: sectionGap
-  };
-  const headerStyle = {
-    paddingHorizontal: headerPaddingHorizontal,
-    paddingVertical: headerPaddingVertical,
-    gap: headerGap
-  };
-  const headerWrapStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  };
-  const titleStyle = {
-    flex: 1,
-    color: titleColor,
-    fontSize: titleFontSize,
-    lineHeight: titleLineHeight,
-    fontFamily: titleFontFamily,
-    fontWeight: titleFontWeight
-  };
-  const supportTextStyle = {
-    color: supportTextColor,
-    fontSize: supportTextFontSize,
-    lineHeight: supportTextLineHeight,
-    fontFamily: supportTextFontFamily,
-    fontWeight: supportTextFontWeight
+  return {
+    containerStyle: {
+      backgroundColor,
+      paddingHorizontal,
+      paddingVertical,
+      borderRadius: radius,
+      gap: sectionGap
+    },
+    headerStyle: {
+      paddingHorizontal: headerPaddingHorizontal,
+      paddingVertical: headerPaddingVertical,
+      gap: headerGap
+    },
+    titleStyle: {
+      flex: 1,
+      color: titleColor,
+      fontSize: titleFontSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight
+    },
+    supportTextStyle: {
+      color: supportTextColor,
+      fontSize: supportTextFontSize,
+      lineHeight: supportTextLineHeight,
+      fontFamily: supportTextFontFamily,
+      fontWeight: supportTextFontWeight
+    },
+    sectionGap,
+    slotGap
   };
+}
+function Section({
+  title = 'Section title',
+  supportText = 'Section support text',
+  showSupportText = true,
+  slot,
+  slotDirection = 'row',
+  modes = _reactUtils.EMPTY_MODES,
+  onPress,
+  style,
+  // accessibilityLabel is intentionally accepted on the type for API
+  // back-compat, but the inner Pressable/View deliberately pass
+  // `accessibilityLabel={undefined}` (the title Text carries the label
+  // instead). Prefix to satisfy the unused-var lint while keeping the prop
+  // shape unchanged.
+  accessibilityLabel: _accessibilityLabel,
+  accessibilityHint,
+  webAccessibilityProps,
+  ...rest
+}) {
+  // Focus and hover are still mirrored in React because they are visible,
+  // sustained states (web-only in practice). The setters are gated so they
+  // never fire on native — keeping the component render-free during touch.
+  // Press is handled imperatively via the `Pressable` style callback so a
+  // scroll-cancelled touch never schedules a React render.
+  const [isHeaderFocused, setIsHeaderFocused] = (0, _react.useState)(false);
+  const [isHeaderHovered, setIsHeaderHovered] = (0, _react.useState)(false);
 
-  // Generate default accessibility label from title and supportText
-  const defaultAccessibilityLabel = accessibilityLabel || (showSupportText ? `${title}. ${supportText}` : title);
+  // Mirror user handlers in a ref so our wrappers can stay referentially
+  // stable. Without this, every parent re-render would hand Pressable fresh
+  // function identities and re-bind every event.
+  const userHandlersRef = (0, _react.useRef)({});
+  userHandlersRef.current.onPressIn = rest?.onPressIn;
+  userHandlersRef.current.onPressOut = rest?.onPressOut;
+  userHandlersRef.current.onHoverIn = rest?.onHoverIn;
+  userHandlersRef.current.onHoverOut = rest?.onHoverOut;
+  userHandlersRef.current.onFocus = rest?.onFocus;
+  userHandlersRef.current.onBlur = rest?.onBlur;
+  const tokens = (0, _react.useMemo)(() => resolveSectionTokens(modes), [modes]);
 
   // Get web platform support props (only used when onPress is defined)
   const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
@@ -210,7 +280,7 @@ function Section({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: headerWrapStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: titleStyle,
+        style: tokens.titleStyle,
         numberOfLines: 1,
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
@@ -220,16 +290,49 @@ function Section({
         modes: modes
       })]
     }), showSupportText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: supportTextStyle,
+      style: tokens.supportTextStyle,
       numberOfLines: 2,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: supportText
     })]
   });
+
+  // Stable handler identities. User handlers are read through the ref so
+  // these wrappers don't need new identities each render.
+  const handlePressIn = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const handleHoverIn = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsHeaderHovered(true);
+    userHandlersRef.current.onHoverIn?.(e);
+  }, []);
+  const handleHoverOut = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsHeaderHovered(false);
+    userHandlersRef.current.onHoverOut?.(e);
+  }, []);
+  const handleFocus = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsHeaderFocused(true);
+    userHandlersRef.current.onFocus?.(e);
+  }, []);
+  const handleBlur = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsHeaderFocused(false);
+    userHandlersRef.current.onBlur?.(e);
+  }, []);
+
+  // The pressed visual is applied by the host view directly through the
+  // Pressable style callback — no React render is scheduled. We still want
+  // the (constant) hover style on web so we keep it in the array.
+  const headerStyleCallback = (0, _react.useCallback)(({
+    pressed
+  }) => [tokens.headerStyle, pressed ? headerPressedStyle : null, isHeaderHovered ? headerHoverStyle : null, isHeaderFocused ? headerFocusStyle : null], [tokens.headerStyle, isHeaderHovered, isHeaderFocused]);
+  const containerStyleArray = (0, _react.useMemo)(() => [tokens.containerStyle, style], [tokens.containerStyle, style]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [containerStyle, style],
-    ...(_reactNative.Platform.OS === 'web' ? {
+    style: containerStyleArray,
+    ...(IS_WEB ? {
       accessibilityRole: 'region'
     } : undefined),
     accessibilityLabel: undefined,
@@ -238,52 +341,59 @@ function Section({
     children: [onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
       accessibilityRole: "button",
       accessibilityLabel: undefined,
-      accessibilityHint: accessibilityHint || "Opens section details",
+      accessibilityHint: accessibilityHint || 'Opens section details',
       onPress: onPress,
-      onPressIn: e => {
-        setIsHeaderPressed(true);
-        rest?.onPressIn?.(e);
-      },
-      onPressOut: e => {
-        setIsHeaderPressed(false);
-        rest?.onPressOut?.(e);
-      },
-      onFocus: e => {
-        setIsHeaderFocused(true);
-        rest?.onFocus?.(e);
-      },
-      onBlur: e => {
-        setIsHeaderFocused(false);
-        rest?.onBlur?.(e);
-      },
-      onHoverIn: e => {
-        setIsHeaderHovered(true);
-        rest?.onHoverIn?.(e);
-      },
-      onHoverOut: e => {
-        setIsHeaderHovered(false);
-        rest?.onHoverOut?.(e);
-      },
-      style: ({
-        pressed
-      }) => [headerStyle, pressed ? headerPressedStyle : null, headerHoverStyle, headerFocusStyle],
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onHoverIn: handleHoverIn,
+      onHoverOut: handleHoverOut,
+      unstable_pressDelay: HEADER_PRESS_DELAY,
+      style: headerStyleCallback,
       ...webProps,
       children: headerContent
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: headerStyle,
+      style: tokens.headerStyle,
       children: headerContent
-    }), slot && slotDirection === 'row' && /*#__PURE__*/(0, _jsxRuntime.jsx)(SlotGrid, {
-      items: (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(slot), modes),
-      gap: sectionGap
-    }), slot && slotDirection === 'column' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        flexDirection: 'column',
-        gap: slotGap
-      },
-      children: (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(slot), modes)
+    }), slot && /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionSlot, {
+      slot: slot,
+      modes: modes,
+      direction: slotDirection,
+      rowGap: tokens.sectionGap,
+      columnGap: tokens.slotGap
     })]
   });
 }
+/**
+ * Internal helper that processes the slot children once per (slot, modes) pair
+ * and dispatches to the row (SlotGrid) or column layout. Splitting this out of
+ * `Section` lets the parent re-render (e.g. for header press/hover state)
+ * without re-walking the slot tree via `cloneChildrenWithModes`.
+ */
+function SectionSlot({
+  slot,
+  modes,
+  direction,
+  rowGap,
+  columnGap
+}) {
+  const processed = (0, _react.useMemo)(() => (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(slot), modes), [slot, modes]);
+  const columnContainerStyle = (0, _react.useMemo)(() => ({
+    flexDirection: 'column',
+    gap: columnGap
+  }), [columnGap]);
+  if (direction === 'row') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(SlotGrid, {
+      items: processed,
+      gap: rowGap
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: columnContainerStyle,
+    children: processed
+  });
+}
 /**
  * Section.Bento component that mirrors the Figma "Section.Bento" component.
  *
@@ -306,12 +416,17 @@ function Section({
  * @param {string} [props.accessibilityLabel] - Accessibility label for the section
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
+const sectionBentoUpiRowStyle = {
+  flexDirection: 'row',
+  gap: 8
+};
 function SectionBento({
   navSlot,
   upiSlot,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
-  accessibilityLabel = undefined,
+  // Same rationale as Section: accepted on the type but unused internally.
+  accessibilityLabel: _accessibilityLabel,
   accessibilityHint,
   ...rest
 }) {
@@ -321,15 +436,15 @@ function SectionBento({
   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 containerStyle = {
+  const containerStyle = (0, _react.useMemo)(() => ({
     backgroundColor,
     paddingHorizontal,
     paddingVertical,
     borderRadius: radius,
     gap
-  };
-  const processedNavSlot = navSlot ? (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(navSlot), modes) : null;
-  const processedUpiSlot = upiSlot ? (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(upiSlot), modes) : null;
+  }), [backgroundColor, paddingHorizontal, paddingVertical, radius, gap]);
+  const processedNavSlot = (0, _react.useMemo)(() => navSlot ? (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(navSlot), modes) : null, [navSlot, modes]);
+  const processedUpiSlot = (0, _react.useMemo)(() => upiSlot ? (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(upiSlot), modes) : null, [upiSlot, modes]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     ...(_reactNative.Platform.OS === 'web' ? {
@@ -342,10 +457,7 @@ function SectionBento({
       items: processedNavSlot,
       gap: gap
     }), processedUpiSlot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        flexDirection: 'row',
-        gap: 8
-      },
+      style: sectionBentoUpiRowStyle,
       children: processedUpiSlot
     })]
   });

package/lib/commonjs/components/SegmentedControl/SegmentedControl.js

@@ -7,13 +7,14 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+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); }
 function SegmentedControlSegment({
   label,
   active,
   onPress,
-  modes = {}
+  modes = _reactUtils.EMPTY_MODES
 }) {
   const resolvedModes = {
     ...modes,
@@ -94,7 +95,7 @@ function SegmentedControl({
   selectedKey: controlledSelectedKey,
   defaultSelectedKey,
   onSelectionChange,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const isControlled = controlledSelectedKey !== undefined;

package/lib/commonjs/components/StatItem/StatItem.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -19,7 +20,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function StatItem({
   label = 'Purity verified by NABL',
   value = '99.99%',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const gap = (0, _figmaVariablesResolver.getVariableByName)('statItem/gap', modes) ?? 2;

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

@@ -10,6 +10,7 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
 var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -41,7 +42,7 @@ function StatusHero({
   iconName = 'ic_confirm',
   value = '50',
   currency = 'INR',
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const {

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

@@ -9,12 +9,13 @@ var _reactNative = require("react-native");
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _StepLabel = require("./StepLabel");
+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); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Step({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   index = 0,
   connectorStyle,

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

@@ -7,12 +7,13 @@ exports.StepLabel = StepLabel;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function StepLabel({
   title = 'Stepper Item',
   supportingText,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   // Title styles