jfs-components 0.0.43 → 0.0.45

package/lib/commonjs/components/AmountInput/AmountInput.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AmountInput;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
+var _NoteInput = _interopRequireDefault(require("../NoteInput/NoteInput"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * AmountInput component that combines MoneyValue and NoteInput from Figma design.
+ *
+ * @component
+ */
+function AmountInput({
+  moneyValueSlot,
+  noteInputSlot,
+  modes: propModes = {},
+  style
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+
+  // Resolve tokens
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('amountInput/gap', modes)) || 16;
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('amountInput/padding/horizontal', modes)) || 0;
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('amountInput/padding/vertical', modes)) || 0;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    ...style
+  };
+
+  // Handle MoneyValue Slot
+  const renderMoneyValueSlot = () => {
+    if (/*#__PURE__*/_react.default.isValidElement(moneyValueSlot)) {
+      return /*#__PURE__*/_react.default.cloneElement(moneyValueSlot, {
+        modes
+      });
+    }
+    // Default fallback if no slot prop is provided
+    if (!moneyValueSlot) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoneyValue.default, {
+        modes: modes
+      });
+    }
+    return moneyValueSlot;
+  };
+
+  // Handle NoteInput Slot
+  const renderNoteInputSlot = () => {
+    if (/*#__PURE__*/_react.default.isValidElement(noteInputSlot)) {
+      return /*#__PURE__*/_react.default.cloneElement(noteInputSlot, {
+        modes
+      });
+    }
+    // Default fallback if no slot prop is provided
+    if (!noteInputSlot) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoteInput.default, {
+        modes: modes
+      });
+    }
+    return noteInputSlot;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: containerStyle,
+    children: [renderMoneyValueSlot(), renderNoteInputSlot()]
+  });
+}

package/lib/commonjs/components/AmountInput/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _AmountInput.default;
+  }
+});
+var _AmountInput = _interopRequireDefault(require("./AmountInput"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/commonjs/components/Button/Button.js

@@ -8,7 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _webPlatformUtils = require("../../utils/web-platform-utils");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 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); }
 /**
  * Button component that maps directly to the Figma design using design tokens.
@@ -35,6 +37,7 @@ function Button({
   renderContent,
   leading,
   trailing,
+  icon,
   modes = {},
   onPress,
   disabled = false,
@@ -60,8 +63,30 @@ function Button({
   const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', modes) || 19;
   const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', modes) || 16;
   const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', modes) || '#0f0d0a';
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('button/icon/color', modes) ?? textColor;
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('button/icon/size', modes) ?? 18;
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const [isPressed, setIsPressed] = (0, _react.useState)(false);
+  const hoverModes = {
+    ...modes,
+    "Button / State": "Hover"
+  };
+  const hoverBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', hoverModes) || backgroundColor;
+  const hoverBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', hoverModes) || borderColor;
+  const hoverTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', hoverModes) || textColor;
+  const hoverIconColor = (0, _figmaVariablesResolver.getVariableByName)('button/icon/color', hoverModes) ?? hoverTextColor;
+  const pressedModes = {
+    ...modes,
+    "Button / State": "Pressed"
+  };
+  const pressedBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', pressedModes) || backgroundColor;
+  const pressedBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', pressedModes) || borderColor;
+  const pressedTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', pressedModes) || textColor;
+  const pressedIconColor = (0, _figmaVariablesResolver.getVariableByName)('button/icon/color', pressedModes) ?? pressedTextColor;
+  const activeTextColor = isPressed && !disabled ? pressedTextColor : isHovered && !disabled ? hoverTextColor : textColor;
+  const activeIconColor = isPressed && !disabled ? pressedIconColor : isHovered && !disabled ? hoverIconColor : iconColor;
   const baseLabelTextStyle = {
-    color: textColor,
+    color: activeTextColor,
     fontFamily,
     fontWeight,
     fontSize,
@@ -115,22 +140,13 @@ function Button({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps
   });
-
-  // Interaction states (placeholders for visuals; tweak later)
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [isHovered, setIsHovered] = (0, _react.useState)(false);
-  const pressedStyle = {
-    transform: [{
-      scale: 0.995
-    }],
-    backgroundColor: '#b88940'
-  };
-  const focusStyle = {
-    borderWidth: 1,
-    borderColor: '#222'
-  };
   const hoverStyle = {
-    opacity: 0.95
+    backgroundColor: hoverBg,
+    borderColor: hoverBorderColor
+  };
+  const pressedStyle = {
+    backgroundColor: pressedBg,
+    borderColor: pressedBorderColor
   };
   if (__DEV__) {
     if (children && labelStyle) {
@@ -155,21 +171,13 @@ function Button({
       onPress
     } : {}),
     onPressIn: e => {
-      ;
+      setIsPressed(true);
       rest?.onPressIn?.(e);
     },
     onPressOut: e => {
-      ;
+      setIsPressed(false);
       rest?.onPressOut?.(e);
     },
-    onFocus: e => {
-      setIsFocused(true);
-      rest?.onFocus?.(e);
-    },
-    onBlur: e => {
-      setIsFocused(false);
-      rest?.onBlur?.(e);
-    },
     onHoverIn: e => {
       setIsHovered(true);
       rest?.onHoverIn?.(e);
@@ -180,12 +188,21 @@ function Button({
     },
     style: ({
       pressed
-    }) => [containerBaseStyle, pressed && !disabled ? pressedStyle : null, isHovered && !disabled ? hoverStyle : null, isFocused && !disabled ? focusStyle : null, style],
+    }) => [containerBaseStyle, isHovered && !disabled ? hoverStyle : null, (pressed || isPressed) && !disabled ? pressedStyle : null, style],
     ...webProps,
     children: [leading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: leadingAccessoryStyle,
       children: leading
-    }) : null, content, trailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }) : null, content, icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: trailingAccessoryStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: icon,
+        size: iconSize,
+        color: activeIconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    }) : trailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: trailingAccessoryStyle,
       children: trailing
     }) : null]

package/lib/commonjs/components/CardProviderInfo/CardProviderInfo.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _ProductLabel = _interopRequireDefault(require("../ProductLabel/ProductLabel"));
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * CardProviderInfo displays a product header (ProductLabel) followed by a
+ * 2-column grid of children (typically StatItem instances).
+ *
+ * @component
+ * @param {CardProviderInfoProps} props
+ */
+function CardProviderInfo({
+  label = 'Gold',
+  imageSource,
+  children,
+  modes = {},
+  style
+}) {
+  const background = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/background', modes) ?? '#fef4e5';
+  const border = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/border', modes) ?? '#fef4e5';
+  const borderWidthVal = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/borderWidth', modes) ?? 1;
+  const padding = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/padding', modes) ?? 20;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/gap', modes) ?? 20;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/radius', modes) ?? 16;
+  const gridGap = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/grid/gap', modes) ?? 8;
+  const containerStyle = {
+    backgroundColor: background,
+    borderColor: border,
+    borderWidth: borderWidthVal,
+    borderStyle: 'solid',
+    padding: padding,
+    gap: gap,
+    borderRadius: radius
+  };
+  const gridGapNum = gridGap;
+  const clonedChildren = children ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : [];
+  const childArray = _react.default.Children.toArray(clonedChildren);
+  const rows = [];
+  for (let i = 0; i < childArray.length; i += 2) {
+    rows.push(childArray.slice(i, i + 2));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductLabel.default, {
+      label: label,
+      imageSource: imageSource,
+      modes: modes
+    }), childArray.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        rowGap: gridGapNum
+      },
+      children: rows.map((row, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          columnGap: gridGapNum
+        },
+        children: row.map((child, j) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flex: 1
+          },
+          children: child
+        }, j))
+      }, i))
+    })]
+  });
+}
+var _default = exports.default = CardProviderInfo;

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,208 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+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); }
+/**
+ * Tracks whether the last user interaction was a keyboard event (Tab).
+ * Capture-phase document listeners fire before any element-level handlers,
+ * so the flag is always up-to-date when onFocus runs.
+ */function useFocusVisible() {
+  const [isFocusVisible, setIsFocusVisible] = (0, _react.useState)(false);
+  const hadKeyboardEventRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS !== 'web' || typeof document === 'undefined') return;
+    const onKeyDown = e => {
+      if (e.key === 'Tab') hadKeyboardEventRef.current = true;
+    };
+    const onPointerDown = () => {
+      hadKeyboardEventRef.current = false;
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    document.addEventListener('mousedown', onPointerDown, true);
+    document.addEventListener('touchstart', onPointerDown, true);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, true);
+      document.removeEventListener('mousedown', onPointerDown, true);
+      document.removeEventListener('touchstart', onPointerDown, true);
+    };
+  }, []);
+  const onFocus = (0, _react.useCallback)(() => {
+    if (hadKeyboardEventRef.current) setIsFocusVisible(true);
+  }, []);
+  const onBlur = (0, _react.useCallback)(() => {
+    setIsFocusVisible(false);
+  }, []);
+  return {
+    isFocusVisible,
+    focusHandlers: {
+      onFocus,
+      onBlur
+    }
+  };
+}
+/**
+ * Checkbox component that maps directly to the Figma design using design tokens.
+ *
+ * Supports 8 visual states: Idle, Hover, Focus, Selected, Selected Hover,
+ * Focus Selected, Disabled, and Disabled Active. All styling is driven by
+ * design tokens with optional mode overrides.
+ *
+ * @component
+ * @param {CheckboxProps} props
+ */
+function Checkbox({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onValueChange,
+  disabled = false,
+  modes = {},
+  style,
+  accessibilityLabel
+}) {
+  const isControlled = controlledChecked !== undefined;
+  const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const {
+    isFocusVisible,
+    focusHandlers
+  } = useFocusVisible();
+  const size = (0, _figmaVariablesResolver.getVariableByName)('checkbox/size', modes) ?? 18;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('checkbox/radius', modes) ?? 4;
+  const strokeWidth = (0, _figmaVariablesResolver.getVariableByName)('strokeWidth', modes) ?? 1;
+  const idleStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/idle/stroke/color', modes) ?? '#666666';
+  const hoverFill = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/fill/color', modes) ?? 'rgba(0,0,0,0.1)';
+  const hoverStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/stroke/color', modes) ?? '#666666';
+  const hoverRing = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hoverRing', modes) ?? 4;
+  const hoverShadow = (0, _figmaVariablesResolver.getVariableByName)('hover/boxShadow', modes) ?? 'rgba(0,0,0,0.1)';
+  const selectedFill = (0, _figmaVariablesResolver.getVariableByName)('checkbox/selected/fill/color', modes) ?? '#cea15a';
+  const selectedStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/selected/stroke/color', modes) ?? '#0d0d0d';
+  const selectedMarkColor = (0, _figmaVariablesResolver.getVariableByName)('checkbox/selected/mark/color', modes) ?? '#0f0d0a';
+  const focusFill = (0, _figmaVariablesResolver.getVariableByName)('checkbox/focus/fill/color', modes) ?? '#ffffff';
+  const focusStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/focus/stroke/color', modes) ?? '#666666';
+  const focusShadowColor = (0, _figmaVariablesResolver.getVariableByName)('checkbox/focus/shadow/color', modes) ?? '#12fc2e';
+  const focusSpread = (0, _figmaVariablesResolver.getVariableByName)('checkbox/focus/spread/effect', modes) ?? 2;
+  const disabledStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/disabled/stroke/color', modes) ?? '#999999';
+  const disabledActiveBg = (0, _figmaVariablesResolver.getVariableByName)('checkbox/disabledActive/background/color', modes) ?? '#f6d19a';
+  const disabledActiveBorder = (0, _figmaVariablesResolver.getVariableByName)('checkbox/disabledActive/border/color', modes) ?? '#f6d19a';
+  const disabledActiveMark = (0, _figmaVariablesResolver.getVariableByName)('checkbox/disabledActive/mark/color', modes) ?? '#474d54';
+  const selectedHoverShadow = (0, _figmaVariablesResolver.getVariableByName)('selected/hover/boxShadow', modes) ?? 'rgba(0,0,0,0.1)';
+  const hoverShadowSize = (0, _figmaVariablesResolver.getVariableByName)('hover/boxShadow/size', modes) ?? 4;
+  const handlePress = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    const next = !isChecked;
+    if (!isControlled) {
+      setInternalChecked(next);
+    }
+    onValueChange?.(next);
+  }, [disabled, isChecked, isControlled, onValueChange]);
+  const resolveStyle = () => {
+    const base = {
+      width: size,
+      height: size,
+      borderRadius: radius,
+      borderWidth: strokeWidth,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden'
+    };
+    if (disabled && isChecked) {
+      return {
+        ...base,
+        backgroundColor: disabledActiveBg,
+        borderColor: disabledActiveBorder
+      };
+    }
+    if (disabled) {
+      return {
+        ...base,
+        borderColor: disabledStroke
+      };
+    }
+    if (isChecked && isFocusVisible) {
+      return {
+        ...base,
+        backgroundColor: selectedFill,
+        borderColor: selectedStroke,
+        ...boxShadow(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
+      };
+    }
+    if (isChecked && isHovered) {
+      return {
+        ...base,
+        backgroundColor: selectedFill,
+        borderColor: selectedStroke,
+        ...boxShadow(`0px 0px 0px ${hoverShadowSize}px ${selectedHoverShadow}`)
+      };
+    }
+    if (isChecked) {
+      return {
+        ...base,
+        backgroundColor: selectedFill,
+        borderColor: selectedStroke
+      };
+    }
+    if (isFocusVisible) {
+      return {
+        ...base,
+        backgroundColor: focusFill,
+        borderColor: focusStroke,
+        ...boxShadow(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
+      };
+    }
+    if (isHovered) {
+      return {
+        ...base,
+        backgroundColor: hoverFill,
+        borderColor: hoverStroke,
+        ...boxShadow(`0px 0px 0px ${hoverRing}px ${hoverShadow}`)
+      };
+    }
+    return {
+      ...base,
+      borderColor: idleStroke
+    };
+  };
+  const markColor = disabled && isChecked ? disabledActiveMark : selectedMarkColor;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    style: [resolveStyle(), style],
+    onPress: handlePress,
+    disabled: disabled,
+    onHoverIn: () => setIsHovered(true),
+    onHoverOut: () => setIsHovered(false),
+    ...focusHandlers,
+    accessibilityRole: "checkbox",
+    accessibilityState: {
+      checked: isChecked,
+      disabled
+    },
+    accessibilityLabel: accessibilityLabel,
+    children: isChecked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+      width: 12,
+      height: 9,
+      viewBox: "0 0 12 9",
+      fill: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+        d: "M4.00091 8.66939C3.91321 8.6699 3.82628 8.65309 3.74509 8.61991C3.6639 8.58673 3.59006 8.53785 3.52779 8.47606L0.195972 5.14273C0.0704931 5.01719 -1.86978e-09 4.84693 0 4.66939C1.86978e-09 4.49186 0.0704931 4.3216 0.195972 4.19606C0.321451 4.07053 0.491636 4 0.66909 4C0.846544 4 1.01673 4.07053 1.14221 4.19606L4.00091 7.06273L10.8578 0.196061C10.9833 0.0705253 11.1535 0 11.3309 0C11.5084 0 11.6785 0.0705253 11.804 0.196061C11.9295 0.321597 12 0.49186 12 0.669394C12 0.846929 11.9295 1.01719 11.804 1.14273L4.47403 8.47606C4.41176 8.53785 4.33792 8.58673 4.25673 8.61991C4.17554 8.65309 4.08861 8.6699 4.00091 8.66939Z",
+        fill: markColor
+      })
+    })
+  });
+}
+function boxShadow(value) {
+  if (_reactNative.Platform.OS === 'web') {
+    return {
+      boxShadow: value
+    };
+  }
+  return {};
+}
+var _default = exports.default = Checkbox;

package/lib/commonjs/components/EmptyState/EmptyState.js

@@ -21,6 +21,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function EmptyState({
   title = "No payments to show",
   description = "Start by paying bills, recharge or your friends",
+  showDescription = true,
   iconSlot,
   buttonSlot,
   modes: propModes = {},
@@ -116,7 +117,7 @@ function EmptyState({
       children: [iconContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: titleStyle,
         children: title
-      }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      }), showDescription && description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: bodyStyle,
         children: description
       }) : null]