jfs-components 0.0.49 → 0.0.52

package/lib/commonjs/components/HoldingsCard/HoldingsCard.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HoldingsCard;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _RadioButton = _interopRequireDefault(require("../RadioButton/RadioButton"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GRID_COLUMNS = 3;
+const GRID_COLUMN_GAP = 12;
+const GRID_ROW_GAP = 16;
+function HoldingsCard({
+  headerImage,
+  heroLabel = 'Loan amount up-to',
+  heroValue = '₹1,89,000',
+  details = [{
+    label: 'Interest upto',
+    value: '12% p.a.'
+  }, {
+    label: 'Tenure upto',
+    value: '36 Months'
+  }, {
+    label: 'Processing fee',
+    value: '₹4'
+  }, {
+    label: 'APR',
+    value: '15.47% p.a.'
+  }, {
+    label: 'EMI',
+    value: '₹16,607/m'
+  }],
+  selected = false,
+  disabled = false,
+  onPress,
+  modes = {},
+  style,
+  testID
+}) {
+  // ---- Container tokens ----
+  const containerFill = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/fill', modes) || '#fef4e5';
+  const containerStroke = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/stroke', modes) || '#fde8c9';
+  const containerStrokeWeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/strokeWeight', modes) ?? 1).toString());
+  const containerCornerRadius = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/cornerRadius', modes) ?? 16).toString());
+  const containerGap = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/gap', modes) ?? 10).toString());
+  const containerPaddingH = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/paddingHorizontal', modes) ?? 16).toString());
+  const containerPaddingV = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/paddingVertical', modes) ?? 20).toString());
+
+  // ---- Header image tokens ----
+  const headerImageWidth = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/header/image/width', modes) ?? 100).toString());
+  const headerImageHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/header/image/height', modes) ?? 24).toString());
+
+  // ---- Hero tokens ----
+  const heroGap = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/gap', modes) ?? 4).toString());
+  const heroLabelColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/color', modes) || '#0f0d0a';
+  const heroLabelFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontSize', modes) ?? 12).toString());
+  const heroLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontFamily', modes) || 'JioType Var';
+  const heroLabelLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/lineHeight', modes) ?? 16).toString());
+  const heroLabelFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontWeight', modes) ?? '400').toString();
+  const heroValueColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/color', modes) || '#0f0d0a';
+  const heroValueFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontSize', modes) ?? 20).toString());
+  const heroValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontFamily', modes) || 'JioType Var';
+  const heroValueLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/lineHeight', modes) ?? 22).toString());
+  const heroValueFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontWeight', modes) ?? '700').toString();
+
+  // ---- Details grid tokens ----
+  const detailLabelColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/color', modes) || '#2c251b';
+  const detailLabelFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontSize', modes) ?? 10).toString());
+  const detailLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontFamily', modes) || 'JioType Var';
+  const detailLabelLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/lineHeight', modes) ?? 12).toString());
+  const detailLabelFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontWeight', modes) ?? '500').toString();
+  const detailValueColor = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/color', modes) || '#0f0d0a';
+  const detailValueFontSize = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontSize', modes) ?? 12).toString());
+  const detailValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontFamily', modes) || 'JioType Var';
+  const detailValueLineHeight = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/lineHeight', modes) ?? 14).toString());
+  const detailValueFontWeight = ((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontWeight', modes) ?? '500').toString();
+  const dataItemGap = parseFloat(((0, _figmaVariablesResolver.getVariableByName)('holdingsCard/dataItem/gap', modes) ?? 4).toString());
+
+  // ---- Styles ----
+  const containerStyle = {
+    backgroundColor: containerFill,
+    borderColor: containerStroke,
+    borderWidth: containerStrokeWeight,
+    borderRadius: containerCornerRadius,
+    paddingHorizontal: containerPaddingH,
+    paddingVertical: containerPaddingV,
+    gap: containerGap,
+    overflow: 'hidden'
+  };
+
+  // Split details into rows of GRID_COLUMNS
+  const rows = [];
+  for (let i = 0; i < details.length; i += GRID_COLUMNS) {
+    rows.push(details.slice(i, i + GRID_COLUMNS));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    testID: testID,
+    onPress: onPress,
+    disabled: disabled || !onPress,
+    style: ({
+      pressed
+    }) => [containerStyle, pressed && {
+      opacity: 0.75
+    }, style],
+    accessibilityRole: "button",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+      },
+      children: [headerImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: headerImage,
+        style: {
+          width: headerImageWidth,
+          height: headerImageHeight
+        },
+        resizeMode: "contain"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: headerImageWidth,
+          height: headerImageHeight
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
+          selected: selected,
+          disabled: disabled,
+          modes: modes
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        gap: heroGap,
+        alignItems: 'flex-start',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          color: heroLabelColor,
+          fontSize: heroLabelFontSize,
+          fontFamily: heroLabelFontFamily,
+          lineHeight: heroLabelLineHeight,
+          fontWeight: heroLabelFontWeight
+        },
+        children: heroLabel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          color: heroValueColor,
+          fontSize: heroValueFontSize,
+          fontFamily: heroValueFontFamily,
+          lineHeight: heroValueLineHeight,
+          fontWeight: heroValueFontWeight
+        },
+        children: heroValue
+      })]
+    }), details.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: '100%',
+        gap: GRID_ROW_GAP
+      },
+      children: rows.map((row, rowIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          gap: GRID_COLUMN_GAP
+        },
+        children: [row.map((item, colIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            flex: 1,
+            gap: dataItemGap
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: {
+              color: detailLabelColor,
+              fontSize: detailLabelFontSize,
+              fontFamily: detailLabelFontFamily,
+              lineHeight: detailLabelLineHeight,
+              fontWeight: detailLabelFontWeight
+            },
+            children: item.label
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: {
+              color: detailValueColor,
+              fontSize: detailValueFontSize,
+              fontFamily: detailValueFontFamily,
+              lineHeight: detailValueLineHeight,
+              fontWeight: detailValueFontWeight
+            },
+            numberOfLines: 1,
+            children: item.value
+          })]
+        }, `${rowIndex}-${colIndex}`)), row.length < GRID_COLUMNS && Array.from({
+          length: GRID_COLUMNS - row.length
+        }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flex: 1
+          }
+        }, `empty-${i}`))]
+      }, rowIndex))
+    })]
+  });
+}
+
+// Dummy block for token extraction (static analysis)
+if (false) {
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/fill');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/stroke');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/strokeWeight');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/cornerRadius');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/gap');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/paddingHorizontal');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/paddingVertical');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/header/image/width');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/header/image/height');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/gap');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/color');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontSize');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontFamily');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/lineHeight');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/label/fontWeight');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/color');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontSize');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontFamily');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/lineHeight');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/hero/value/fontWeight');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/color');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontSize');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontFamily');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/lineHeight');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/label/fontWeight');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/color');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontSize');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontFamily');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/lineHeight');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/detailsGrid/value/fontWeight');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/dataItem/gap');
+  (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/wrap/gap');
+}

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/Popup/Popup.js

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _VStack = _interopRequireDefault(require("../VStack/VStack"));
+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); }
+const Popup = /*#__PURE__*/(0, _react.forwardRef)(function Popup({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  trigger,
+  children,
+  modes: propModes = {},
+  closeOnBackdropPress = true,
+  backdropColor = '#000000',
+  backdropOpacity: maxBackdropOpacity = 0.5,
+  animationDuration = 250,
+  style
+}, ref) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const [internalOpen, setInternalOpen] = (0, _react.useState)(defaultOpen);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : internalOpen;
+  const [modalVisible, setModalVisible] = (0, _react.useState)(isOpen);
+  const slideY = (0, _react.useRef)(new _reactNative.Animated.Value(_reactNative.Dimensions.get('window').height)).current;
+  const backdropAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const setOpenState = (0, _react.useCallback)(value => {
+    if (!isControlled) setInternalOpen(value);
+    onOpenChange?.(value);
+  }, [isControlled, onOpenChange]);
+  const handleOpen = (0, _react.useCallback)(() => setOpenState(true), [setOpenState]);
+  const handleClose = (0, _react.useCallback)(() => setOpenState(false), [setOpenState]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    open: handleOpen,
+    close: handleClose
+  }), [handleOpen, handleClose]);
+  (0, _react.useEffect)(() => {
+    if (isOpen && !modalVisible) {
+      slideY.setValue(_reactNative.Dimensions.get('window').height);
+      backdropAnim.setValue(0);
+      setModalVisible(true);
+    }
+  }, [isOpen, modalVisible, slideY, backdropAnim]);
+  (0, _react.useEffect)(() => {
+    if (!modalVisible) return;
+    if (isOpen) {
+      const anim = _reactNative.Animated.parallel([_reactNative.Animated.spring(slideY, {
+        toValue: 0,
+        damping: 22,
+        stiffness: 220,
+        mass: 0.8,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(backdropAnim, {
+        toValue: maxBackdropOpacity,
+        duration: animationDuration,
+        useNativeDriver: true
+      })]);
+      anim.start();
+      return () => anim.stop();
+    }
+    const anim = _reactNative.Animated.parallel([_reactNative.Animated.timing(slideY, {
+      toValue: _reactNative.Dimensions.get('window').height,
+      duration: animationDuration,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(backdropAnim, {
+      toValue: 0,
+      duration: animationDuration,
+      useNativeDriver: true
+    })]);
+    anim.start(({
+      finished
+    }) => {
+      if (finished) setModalVisible(false);
+    });
+    return () => anim.stop();
+  }, [isOpen, modalVisible, slideY, backdropAnim, maxBackdropOpacity, animationDuration]);
+  const background = (0, _figmaVariablesResolver.getVariableByName)('popup/background', modes) || '#ffffff';
+  const paddingH = (0, _figmaVariablesResolver.getVariableByName)('popup/padding/horizontal', modes) ?? 0;
+  const paddingTopVal = (0, _figmaVariablesResolver.getVariableByName)('popup/padding/top', modes) ?? 0;
+  const paddingBottomVal = (0, _figmaVariablesResolver.getVariableByName)('popup/padding/bottom', modes) ?? 24;
+  const cornerRadiusTop = (0, _figmaVariablesResolver.getVariableByName)('popup/cornerRadius/top', modes) ?? 20;
+  const cornerRadiusBottom = (0, _figmaVariablesResolver.getVariableByName)('popup/cornerRadius/bottom', modes) ?? 0;
+  const triggerElement = trigger ? /*#__PURE__*/_react.default.cloneElement(trigger, {
+    onPress: (...args) => {
+      handleOpen();
+      const prev = trigger.props.onPress;
+      prev?.(...args);
+    }
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [triggerElement, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      transparent: true,
+      visible: modalVisible,
+      animationType: "none",
+      onRequestClose: handleClose,
+      statusBarTranslucent: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.overlay,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          style: [_reactNative.StyleSheet.absoluteFillObject, {
+            backgroundColor: backdropColor,
+            opacity: backdropAnim
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+            style: _reactNative.StyleSheet.absoluteFillObject,
+            onPress: closeOnBackdropPress ? handleClose : undefined,
+            accessibilityRole: "button",
+            accessibilityLabel: "Close popup"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          style: [styles.popup, {
+            backgroundColor: background,
+            paddingHorizontal: paddingH,
+            paddingTop: paddingTopVal,
+            paddingBottom: paddingBottomVal,
+            borderTopLeftRadius: cornerRadiusTop,
+            borderTopRightRadius: cornerRadiusTop,
+            borderBottomLeftRadius: cornerRadiusBottom,
+            borderBottomRightRadius: cornerRadiusBottom,
+            transform: [{
+              translateY: slideY
+            }]
+          }, style],
+          accessibilityViewIsModal: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VStack.default, {
+            modes: modes,
+            alignHorizontal: "center",
+            children: children
+          })
+        })]
+      })
+    })]
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  popup: {
+    width: '100%',
+    overflow: 'hidden'
+  }
+});
+var _default = exports.default = Popup;

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;

package/lib/commonjs/components/index.js

@@ -183,6 +183,12 @@ Object.defineProperty(exports, "HStack", {
     return _HStack.default;
   }
 });
+Object.defineProperty(exports, "HoldingsCard", {
+  enumerable: true,
+  get: function () {
+    return _HoldingsCard.default;
+  }
+});
 Object.defineProperty(exports, "IconButton", {
   enumerable: true,
   get: function () {
@@ -279,6 +285,12 @@ Object.defineProperty(exports, "PaymentFeedback", {
     return _PaymentFeedback.default;
   }
 });
+Object.defineProperty(exports, "Popup", {
+  enumerable: true,
+  get: function () {
+    return _Popup.default;
+  }
+});
 Object.defineProperty(exports, "PortfolioHero", {
   enumerable: true,
   get: function () {
@@ -509,6 +521,7 @@ var _DebitCard = _interopRequireDefault(require("./DebitCard/DebitCard"));
 var _FilterBar = _interopRequireDefault(require("./FilterBar/FilterBar"));
 var _Form = _interopRequireWildcard(require("./Form/Form"));
 var _FormField = _interopRequireDefault(require("./FormField/FormField"));
+var _HoldingsCard = _interopRequireDefault(require("./HoldingsCard/HoldingsCard"));
 var _HStack = _interopRequireDefault(require("./HStack/HStack"));
 var _IconButton = _interopRequireDefault(require("./IconButton/IconButton"));
 var _IconCapsule = _interopRequireDefault(require("./IconCapsule/IconCapsule"));
@@ -556,6 +569,7 @@ var _Toast = _interopRequireDefault(require("./Toast/Toast"));
 var _ToastProvider = _interopRequireDefault(require("./Toast/ToastProvider"));
 var _useToast = require("./Toast/useToast");
 var _AmountInput = _interopRequireDefault(require("./AmountInput/AmountInput"));
+var _Popup = _interopRequireDefault(require("./Popup/Popup"));
 var _PortfolioHero = _interopRequireDefault(require("./PortfolioHero/PortfolioHero"));
 var _ProductLabel = _interopRequireDefault(require("./ProductLabel/ProductLabel"));
 var _ProgressBadge = _interopRequireDefault(require("./ProgressBadge/ProgressBadge"));