jfs-components 0.1.8 → 0.1.17

package/lib/commonjs/components/Toast/Toast.js

@@ -20,7 +20,8 @@ function Toast({
   onClose,
   modes = _reactUtils.EMPTY_MODES,
   placement = 'bottom',
-  style
+  style,
+  disableTruncation
 }) {
   const timerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
@@ -30,21 +31,21 @@ function Toast({
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, [id, timeout]);
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('toast/background', modes) || '#303338';
-  const foreground = (0, _figmaVariablesResolver.getVariableByName)('toast/foreground', modes) || '#ffffff';
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('toast/fontSize', modes) || 14;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('toast/fontFamily', modes) || undefined;
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('toast/fontWeight', modes) || '500';
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('toast/lineHeight', modes) || 18;
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('toast/radius', modes) || 14;
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('toast/padding/horizontal', modes) || 16;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('toast/padding/vertical', modes) || 14;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('toast/gap', modes) || 8;
-  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('toast/border/size', modes) || 1;
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('toast/border/color', modes) || 'rgba(255,255,255,0.1)';
-  const shadowBlurPrimary = (0, _figmaVariablesResolver.getVariableByName)('toast/shadow/primary/blur', modes) || 48;
-  const shadowOffsetYPrimary = (0, _figmaVariablesResolver.getVariableByName)('toast/shadow/primary/offsetY', modes) || 16;
-  const shadowColorPrimary = (0, _figmaVariablesResolver.getVariableByName)('toast/shadow/primary/color', modes) || 'rgba(13,13,15,0.16)';
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('toast/background', modes);
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('toast/foreground', modes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('toast/fontSize', modes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('toast/fontFamily', modes);
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('toast/fontWeight', modes);
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('toast/lineHeight', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('toast/radius', modes);
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('toast/padding/horizontal', modes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('toast/padding/vertical', modes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('toast/gap', modes);
+  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('toast/border/size', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('toast/border/color', modes);
+  const shadowBlurPrimary = (0, _figmaVariablesResolver.getVariableByName)('toast/shadow/primary/blur', modes);
+  const shadowOffsetYPrimary = (0, _figmaVariablesResolver.getVariableByName)('toast/shadow/primary/offsetY', modes);
+  const shadowColorPrimary = (0, _figmaVariablesResolver.getVariableByName)('toast/shadow/primary/color', modes);
   const enterAnimation = placement === 'top' ? _reactNativeReanimated.SlideInUp.duration(ANIMATION_DURATION) : _reactNativeReanimated.SlideInDown.duration(ANIMATION_DURATION);
   const containerStyle = {
     backgroundColor,
@@ -78,7 +79,7 @@ function Toast({
     accessibilityLiveRegion: "assertive",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: textStyle,
-      numberOfLines: 2,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 2),
       children: title
     })
   });

package/lib/commonjs/components/Toggle/Toggle.js

@@ -8,6 +8,7 @@ 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 _shadow = require("../../utils/shadow");
 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); }
 /**
@@ -66,18 +67,9 @@ function Toggle({
     alignItems: isOn ? 'flex-end' : 'flex-start',
     opacity: disabled ? 0.5 : 1
   };
-  const thumbShadow = _reactNative.Platform.OS === 'web' ? {
-    boxShadow: `${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}`
-  } : {
-    shadowColor: thumbShadowColor,
-    shadowOffset: {
-      width: thumbShadowOffsetX,
-      height: thumbShadowOffsetY
-    },
-    shadowRadius: thumbShadowRadius,
-    shadowOpacity: 1,
+  const thumbShadow = (0, _shadow.boxShadow)(`${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}`, {
     elevation: 4
-  };
+  });
   const thumbStyle = {
     width: thumbSize,
     height: thumbSize,

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -192,18 +192,18 @@ function TooltipContent({
   } = _reactNative.Dimensions.get('window');
 
   // Tokens
-  const bgColor = (0, _figmaVariablesResolver.getVariableByName)('tooltip/background', modes) || '#0f0d0a';
-  const paddingH = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/horizontal', modes) || 12);
-  const paddingV = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/vertical', modes) || 8);
-  const radius = Number((0, _figmaVariablesResolver.getVariableByName)('radius', modes) || 8);
-  const maxWidthToken = Number((0, _figmaVariablesResolver.getVariableByName)('maxWidth', modes) || 280);
-  const arrowWidth = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/width', modes) || 16);
-  const arrowHeight = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/height', modes) || 8);
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('tooltip/label/color', modes) || '#ffffff';
-  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/fontSize', modes) || 14);
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('tooltip/label/fontWeight', modes) || '500';
-  const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/lineHeight', modes) || 18);
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('tooltip/lable/fontFamily', modes) || undefined;
+  const bgColor = (0, _figmaVariablesResolver.getVariableByName)('tooltip/background', modes);
+  const paddingH = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/horizontal', modes));
+  const paddingV = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/vertical', modes));
+  const radius = Number((0, _figmaVariablesResolver.getVariableByName)('radius', modes));
+  const maxWidthToken = Number((0, _figmaVariablesResolver.getVariableByName)('maxWidth', modes));
+  const arrowWidth = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/width', modes));
+  const arrowHeight = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/height', modes));
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('tooltip/label/color', modes);
+  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/fontSize', modes));
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('tooltip/label/fontWeight', modes);
+  const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/lineHeight', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('tooltip/lable/fontFamily', modes);
   if (!isVisible) return null;
 
   // Calculation Logic

package/lib/commonjs/components/TransactionBubble/TransactionBubble.js

@@ -45,25 +45,26 @@ function TransactionBubble({
   accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const resolvedModes = {
     ...modes,
     'Context3': 'Transaction Bubble'
   };
-  const padding = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/padding', resolvedModes)) || 16;
-  const radius = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/radius', resolvedModes)) || 23;
-  const borderSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/border/size', resolvedModes)) || 1;
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/background', resolvedModes) || '#ffffff';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/border/color', resolvedModes) || '#e5e5e5';
-  const bubbleGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/gap', resolvedModes)) || 8;
-  const moneyValueWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/wrap/gap', resolvedModes)) || 8;
-  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/color', resolvedModes) || '#24262b';
-  const descriptionFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontSize', resolvedModes)) || 14;
-  const descriptionLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/lineHeight', resolvedModes)) || 17;
-  const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontFamily', resolvedModes) || 'JioType Var';
-  const statusWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/gap', resolvedModes)) || 4;
-  const statusWrapHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/height', resolvedModes)) || 18;
+  const padding = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/padding', resolvedModes));
+  const radius = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/radius', resolvedModes));
+  const borderSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/border/size', resolvedModes));
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/background', resolvedModes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/border/color', resolvedModes);
+  const bubbleGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/gap', resolvedModes));
+  const moneyValueWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/wrap/gap', resolvedModes));
+  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/color', resolvedModes);
+  const descriptionFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontSize', resolvedModes));
+  const descriptionLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/lineHeight', resolvedModes));
+  const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontFamily', resolvedModes);
+  const statusWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/gap', resolvedModes));
+  const statusWrapHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/height', resolvedModes));
   const containerStyle = {
     padding,
     borderRadius: radius,
@@ -114,7 +115,7 @@ function TransactionBubble({
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: descriptionStyle,
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: description
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoneyValue.default, {
         value: value,

package/lib/commonjs/components/TransactionDetails/TransactionDetails.js

@@ -40,19 +40,19 @@ function Item({
   const gap = (0, _figmaVariablesResolver.getVariableByName)('detailItem/gap', modes) ?? 4;
 
   // Label typography tokens
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/color', modes) || '#0c0d10';
-  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/fontSize', modes) || 14;
-  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/fontFamily', modes) || 'System';
-  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/lineHeight', modes) || 17;
-  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/fontWeight', modes) || 500;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/color', modes);
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/fontSize', modes);
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/fontFamily', modes);
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/lineHeight', modes);
+  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/fontWeight', modes);
   const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
 
   // Value typography tokens
-  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/color', modes) || '#24262b';
-  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/fontSize', modes) || 14;
-  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/fontFamily', modes) || 'System';
-  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/lineHeight', modes) || 17;
-  const valueFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/fontWeight', modes) || 'Medium';
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/color', modes);
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/fontSize', modes);
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/fontFamily', modes);
+  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/lineHeight', modes);
+  const valueFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/fontWeight', modes);
   const valueFontWeight = typeof valueFontWeightRaw === 'number' ? valueFontWeightRaw.toString() : valueFontWeightRaw === 'Medium' ? '500' : valueFontWeightRaw;
   const containerStyle = {
     flexDirection: 'column',

package/lib/commonjs/components/TransactionStatus/TransactionStatus.js

@@ -19,7 +19,7 @@ const StatusIcon = ({
   height = 15,
   color
 }) => {
-  const resolvedColor = color || (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/icon/color', modes) || '#F06D0F';
+  const resolvedColor = color || (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/icon/color', modes);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Svg, {
     width: width,
     height: height,
@@ -42,17 +42,18 @@ function TransactionStatus({
   status = 'Expired',
   date = '20 Mar 2025',
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
-  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/gap', modes)) || 4;
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/gap', modes));
   // Using 'transactionStatus' tokens for text
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/color', modes) || '#191b1e';
-  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontSize', modes)) || 12;
-  const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/lineHeight', modes)) || 16;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontFamily', modes) || 'System';
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontWeight2', modes) || '500';
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/icon/color', modes) || '#f06d0f';
-  const iconSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/iconSize', modes)) || 18;
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/color', modes);
+  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontSize', modes));
+  const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/lineHeight', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontFamily', modes);
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontWeight2', modes);
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/icon/color', modes);
+  const iconSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/iconSize', modes));
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',
@@ -75,7 +76,7 @@ function TransactionStatus({
       modes: modes
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
       style: textStyle,
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: [status, " \xB7 ", date]
     })]
   });

package/lib/commonjs/components/UpiHandle/UpiHandle.js

@@ -30,22 +30,22 @@ const focusOverlayStyle = {
   borderColor: '#222'
 };
 function resolveUpiHandleTokens(modes) {
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/background', modes) || '#f5f5f5';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/radius', modes) || 99999;
-  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/left', modes) || 4;
-  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/right', modes) || 14;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/vertical', modes) || 3;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/gap', modes) || 6;
-  const avatarSize = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/image/size', modes) || 23;
-  const avatarRadius = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/image/radius', modes) || 99999;
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/color', modes) || '#0d0d0f';
-  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontSize', modes) || 12;
-  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/lineHeight', modes) || 23;
-  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontFamily', modes) || 'System';
-  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontWeight', modes) || 500;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/background', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/radius', modes);
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/left', modes);
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/right', modes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/vertical', modes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/gap', modes);
+  const avatarSize = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/image/size', modes);
+  const avatarRadius = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/image/radius', modes);
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/color', modes);
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontSize', modes);
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/lineHeight', modes);
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontFamily', modes);
+  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontWeight', modes);
   const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/icon/color', modes) || '#0d0d0f';
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/icon/size', modes) || 12;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/icon/color', modes);
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/icon/size', modes);
   return {
     containerStyle: {
       flexDirection: 'row',
@@ -113,6 +113,7 @@ function UpiHandle({
   onPress,
   onClick,
   disabled,
+  disableTruncation,
   // accessibilityLabel is accepted on the type for API back-compat; the
   // wrapper renders `accessibilityLabel={undefined}` because the inner Text
   // already carries the label.
@@ -175,8 +176,7 @@ function UpiHandle({
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: tokens.labelStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1, 'tail'),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label

package/lib/commonjs/components/index.js

@@ -189,6 +189,12 @@ Object.defineProperty(exports, "Carousel", {
     return _Carousel.default;
   }
 });
+Object.defineProperty(exports, "CarouselCardAccounts", {
+  enumerable: true,
+  get: function () {
+    return _CarouselCardAccounts.default;
+  }
+});
 Object.defineProperty(exports, "CcCard", {
   enumerable: true,
   get: function () {
@@ -651,6 +657,12 @@ Object.defineProperty(exports, "Screen", {
     return _Screen.default;
   }
 });
+Object.defineProperty(exports, "ScrollArea", {
+  enumerable: true,
+  get: function () {
+    return _ScrollArea.default;
+  }
+});
 Object.defineProperty(exports, "Section", {
   enumerable: true,
   get: function () {
@@ -693,6 +705,12 @@ Object.defineProperty(exports, "Spinner", {
     return _Spinner.default;
   }
 });
+Object.defineProperty(exports, "Stack", {
+  enumerable: true,
+  get: function () {
+    return _Stack.default;
+  }
+});
 Object.defineProperty(exports, "StatGroup", {
   enumerable: true,
   get: function () {
@@ -771,6 +789,42 @@ Object.defineProperty(exports, "TabItem", {
     return _TabItem.default;
   }
 });
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () {
+    return _Table.default;
+  }
+});
+Object.defineProperty(exports, "TableBody", {
+  enumerable: true,
+  get: function () {
+    return _Table.TableBody;
+  }
+});
+Object.defineProperty(exports, "TableCell", {
+  enumerable: true,
+  get: function () {
+    return _Table.TableCell;
+  }
+});
+Object.defineProperty(exports, "TableHeader", {
+  enumerable: true,
+  get: function () {
+    return _Table.TableHeader;
+  }
+});
+Object.defineProperty(exports, "TableHeaderCell", {
+  enumerable: true,
+  get: function () {
+    return _Table.TableHeaderCell;
+  }
+});
+Object.defineProperty(exports, "TableRow", {
+  enumerable: true,
+  get: function () {
+    return _Table.TableRow;
+  }
+});
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function () {
@@ -937,6 +991,7 @@ var _Card = _interopRequireDefault(require("./Card/Card"));
 var _CardAdvisory = _interopRequireDefault(require("./CardAdvisory/CardAdvisory"));
 var _CardBankAccount = _interopRequireDefault(require("./CardBankAccount/CardBankAccount"));
 var _Carousel = _interopRequireDefault(require("./Carousel/Carousel"));
+var _CarouselCardAccounts = _interopRequireDefault(require("./CarouselCardAccounts/CarouselCardAccounts"));
 var _Checkbox = _interopRequireDefault(require("./Checkbox/Checkbox"));
 var _CheckboxItem = _interopRequireDefault(require("./CheckboxItem/CheckboxItem"));
 var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup/CheckboxGroup"));
@@ -990,9 +1045,11 @@ var _Numpad = _interopRequireDefault(require("./Numpad/Numpad"));
 var _Overlay = _interopRequireDefault(require("./Overlay/Overlay"));
 var _Title = _interopRequireDefault(require("./Title/Title"));
 var _Screen = _interopRequireDefault(require("./Screen/Screen"));
+var _ScrollArea = _interopRequireDefault(require("./ScrollArea/ScrollArea"));
 var _Section = _interopRequireDefault(require("./Section/Section"));
 var _Slider = _interopRequireDefault(require("./Slider/Slider"));
 var _Slot = _interopRequireDefault(require("./Slot/Slot"));
+var _Stack = _interopRequireDefault(require("./Stack/Stack"));
 var _Spinner = _interopRequireDefault(require("./Spinner/Spinner"));
 var _Stepper = _interopRequireDefault(require("./Stepper/Stepper"));
 var _Step = require("./Stepper/Step");
@@ -1043,6 +1100,7 @@ var _Popup = _interopRequireDefault(require("./Popup/Popup"));
 var _PortfolioHero = _interopRequireDefault(require("./PortfolioHero/PortfolioHero"));
 var _PlanComparisonCard = _interopRequireDefault(require("./PlanComparisonCard/PlanComparisonCard"));
 var _CompareTable = _interopRequireDefault(require("./CompareTable/CompareTable"));
+var _Table = _interopRequireWildcard(require("./Table/Table"));
 var _PoweredByLabel = _interopRequireDefault(require("./PoweredByLabel/PoweredByLabel"));
 var _ProductLabel = _interopRequireDefault(require("./ProductLabel/ProductLabel"));
 var _ProductMerchandisingCard = _interopRequireDefault(require("./ProductMerchandisingCard/ProductMerchandisingCard"));