jfs-components 0.0.38 → 0.0.40

package/lib/commonjs/Containers.js

@@ -20,5 +20,4 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center'
   }
-});
-//# sourceMappingURL=Containers.js.map
+});

package/lib/commonjs/components/Accordion/Accordion.js

@@ -213,5 +213,4 @@ function Accordion({
     })]
   });
 }
-var _default = exports.default = Accordion;
-//# sourceMappingURL=Accordion.js.map
+var _default = exports.default = Accordion;

package/lib/commonjs/components/ActionFooter/ActionFooter.js

@@ -108,5 +108,4 @@ function ActionFooter({
     })
   });
 }
-var _default = exports.default = ActionFooter;
-//# sourceMappingURL=ActionFooter.js.map
+var _default = exports.default = ActionFooter;

package/lib/commonjs/components/ActionTile/ActionTile.js

@@ -98,5 +98,4 @@ function ActionTile({
     });
   }
   return Content;
-}
-//# sourceMappingURL=ActionTile.js.map
+}

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

@@ -10,5 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _ActionTile = _interopRequireDefault(require("./ActionTile"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//# sourceMappingURL=index.js.map
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/commonjs/components/AppBar/AppBar.js

@@ -180,5 +180,4 @@ function AppBar({
       children: processedActions
     })]
   });
-}
-//# sourceMappingURL=AppBar.js.map
+}

package/lib/commonjs/components/Avatar/Avatar.js

@@ -205,5 +205,4 @@ function Avatar({
     })
   });
 }
-var _default = exports.default = Avatar;
-//# sourceMappingURL=Avatar.js.map
+var _default = exports.default = Avatar;

package/lib/commonjs/components/AvatarGroup/AvatarGroup.js

@@ -129,5 +129,4 @@ function AvatarGroup({
     })
   });
 }
-var _default = exports.default = AvatarGroup;
-//# sourceMappingURL=AvatarGroup.js.map
+var _default = exports.default = AvatarGroup;

package/lib/commonjs/components/Badge/Badge.js

@@ -64,5 +64,4 @@ function Badge({
     })
   });
 }
-var _default = exports.default = Badge;
-//# sourceMappingURL=Badge.js.map
+var _default = exports.default = Badge;

package/lib/commonjs/components/Balance/Balance.js

@@ -73,5 +73,4 @@ function Balance({
     })]
   });
 }
-var _default = exports.default = Balance;
-//# sourceMappingURL=Balance.js.map
+var _default = exports.default = Balance;

package/lib/commonjs/components/BottomNav/BottomNav.js

@@ -17,8 +17,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * Usage:
  * ```tsx
  * <BottomNav value={currentTab} onChange={setCurrentTab}>
- *   <BottomNav.Item value="home" icon={<Icon name="ic_home" />} label="Home" />
- *   <BottomNav.Item value="profile" icon={<Icon name="ic_profile" />} label="Profile" />
+ *   <BottomNav.Item value="home" iconName="ic_home" label="Home" />
+ *   <BottomNav.Item value="profile" iconName="ic_profile" label="Profile" />
  * </BottomNav>
  * ```
  */
@@ -135,5 +135,4 @@ const Item = props => {
 const BottomNavWithItem = Object.assign(BottomNav, {
   Item
 });
-var _default = exports.default = BottomNavWithItem;
-//# sourceMappingURL=BottomNav.js.map
+var _default = exports.default = BottomNavWithItem;

package/lib/commonjs/components/BottomNavItem/BottomNavItem.js

@@ -8,8 +8,10 @@ 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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _webPlatformUtils = require("../../utils/web-platform-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); }
 /**
  * Bottom navigation item with icon and label stacked vertically.
@@ -19,13 +21,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *
  * @component
  * @param {Object} props
- * @param {React.ReactNode} [props.icon] - Icon element to display.
- * @param {string} [props.iconName] - DEPRECATED: Icon name from the registry.
+ * @param {string} [props.iconName="ic_home"] - Icon name from the registry.
  * ...
  */
 function BottomNavItem({
-  icon,
-  iconName,
+  iconName = 'ic_home',
   label = 'Home',
   modes: propModes = {},
   onPress,
@@ -99,15 +99,13 @@ function BottomNavItem({
     webAccessibilityProps
   });
   const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(icon || iconName) && (/*#__PURE__*/(0, _react.isValidElement)(icon) ? /*#__PURE__*/(0, _react.cloneElement)(icon, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: iconName,
       size: resolvedIconSize,
-      width: resolvedIconSize,
-      height: resolvedIconSize,
       color: resolvedIconColor,
-      fill: resolvedIconColor,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
-    }) : null), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [textStyle, labelStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
@@ -170,5 +168,4 @@ function BottomNavItem({
     children: renderContent()
   });
 }
-var _default = exports.default = BottomNavItem;
-//# sourceMappingURL=BottomNavItem.js.map
+var _default = exports.default = BottomNavItem;

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

@@ -191,5 +191,4 @@ function Button({
     }) : null]
   });
 }
-var _default = exports.default = Button;
-//# sourceMappingURL=Button.js.map
+var _default = exports.default = Button;

package/lib/commonjs/components/ButtonGroup/ButtonGroup.js

@@ -70,5 +70,4 @@ function ButtonGroup({
     children: childrenWithModes
   });
 }
-var _default = exports.default = ButtonGroup;
-//# sourceMappingURL=ButtonGroup.js.map
+var _default = exports.default = ButtonGroup;

package/lib/commonjs/components/Card/Card.js

@@ -167,5 +167,4 @@ function SupportText({
 // Attach sub-components to Card
 Card.Title = Title;
 Card.SupportText = SupportText;
-var _default = exports.default = Card;
-//# sourceMappingURL=Card.js.map
+var _default = exports.default = Card;

package/lib/commonjs/components/CardFeedback/CardFeedback.js

@@ -17,8 +17,6 @@ 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); }
-// Internal Icon component usage is deprecated but kept for backward compatibility
-
 /**
  * Context to share 'modes' with child components.
  */const CardFeedbackContext = /*#__PURE__*/(0, _react.createContext)({});
@@ -78,8 +76,7 @@ function Icon({
   children,
   style,
   modes: propModes,
-  icon,
-  iconName
+  icon
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
@@ -109,18 +106,11 @@ function Icon({
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [containerStyle, style],
-    children: icon || iconName ? /*#__PURE__*/(0, _react.isValidElement)(icon) ? /*#__PURE__*/(0, _react.cloneElement)(icon, {
-      size,
-      color,
-      modes: {
-        ...modes,
-        ...(icon.props.modes || {})
-      }
-    }) : iconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: iconName,
+    children: icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: icon,
       size: size,
       color: color
-    }) : null : childrenWithModes
+    }) : childrenWithModes
   });
 }
 
@@ -258,5 +248,4 @@ CardFeedback.Content = Content;
 CardFeedback.Title = Title;
 CardFeedback.Body = Body;
 CardFeedback.Action = Action;
-var _default = exports.default = CardFeedback;
-//# sourceMappingURL=CardFeedback.js.map
+var _default = exports.default = CardFeedback;

package/lib/commonjs/components/Carousel/Carousel.js

@@ -334,5 +334,4 @@ function AnimatedDot({
 
 Carousel.Item = Item;
 Carousel.Pagination = Pagination;
-var _default = exports.default = Carousel;
-//# sourceMappingURL=Carousel.js.map
+var _default = exports.default = Carousel;

package/lib/commonjs/components/ChipGroup/ChipGroup.js

@@ -56,5 +56,4 @@ function ChipGroup({
     children: childrenWithModes
   });
 }
-var _default = exports.default = ChipGroup;
-//# sourceMappingURL=ChipGroup.js.map
+var _default = exports.default = ChipGroup;

package/lib/commonjs/components/ChipSelect/ChipSelect.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
-var _react = _interopRequireWildcard(require("react"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 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 }; }
 /**
  * ChipSelect component for selecting options (e.g. Date selection).
  * Based on Figma Node 1901-4727.
@@ -16,10 +17,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ChipSelect({
   label = 'Date',
   active = false,
-  icon,
-  iconName,
+  icon = 'ic_calendar_week',
   close = true,
-  closeIcon,
   modes = {},
   style,
   labelSlot,
@@ -89,20 +88,15 @@ function ChipSelect({
     style: [containerStyle, style],
     onPress: onPress,
     activeOpacity: 0.8,
-    children: [(icon || iconName) && (/*#__PURE__*/(0, _react.isValidElement)(icon) ? /*#__PURE__*/(0, _react.cloneElement)(icon, {
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: icon,
       size: iconSize,
-      width: iconSize,
-      height: iconSize,
-      color: textColor,
-      fill: textColor
-    }) : null), renderLabel(), active && close && (/*#__PURE__*/(0, _react.isValidElement)(closeIcon) ? /*#__PURE__*/(0, _react.cloneElement)(closeIcon, {
+      color: textColor
+    }), renderLabel(), active && close && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: "ic_close",
       size: iconSize,
-      width: iconSize,
-      height: iconSize,
-      color: textColor,
-      fill: textColor
-    }) : null)]
+      color: textColor
+    })]
   });
 }
-var _default = exports.default = ChipSelect;
-//# sourceMappingURL=ChipSelect.js.map
+var _default = exports.default = ChipSelect;

package/lib/commonjs/components/CtaCard/CtaCard.js

@@ -4,17 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+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 _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _reactUtils = require("../../utils/react-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); }
 /**
  * CtaCard component that maps directly to the Figma design using design tokens.
  *
@@ -23,8 +21,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function CtaCard({
   title = "Lets create your UPI ID",
   body = "Send and receive money securely.",
-  iconName,
-  icon,
+  iconName = "ic_upi_number",
   buttonLabel = "Get started",
   onPressButton,
   modes: propModes = {},
@@ -99,10 +96,8 @@ function CtaCard({
     style: [containerStyle, style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: contentWrapStyle,
-      children: [iconSlot ? (0, _reactUtils.cloneChildrenWithModes)(iconSlot, modes) : (icon || iconName) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
-        icon: /*#__PURE__*/(0, _react.isValidElement)(icon) ? icon : iconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-          name: iconName
-        }) : undefined,
+      children: [iconSlot ? (0, _reactUtils.cloneChildrenWithModes)(iconSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+        iconName: iconName,
         modes: modes
       }), titleSlot ? (0, _reactUtils.cloneChildrenWithModes)(titleSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: titleStyle,
@@ -118,5 +113,4 @@ function CtaCard({
     })]
   });
 }
-var _default = exports.default = CtaCard;
-//# sourceMappingURL=CtaCard.js.map
+var _default = exports.default = CtaCard;

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

@@ -10,5 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _CtaCard = _interopRequireDefault(require("./CtaCard"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//# sourceMappingURL=index.js.map
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/commonjs/components/Disclaimer/Disclaimer.js

@@ -86,5 +86,4 @@ function Disclaimer({
     })
   });
 }
-var _default = exports.default = Disclaimer;
-//# sourceMappingURL=Disclaimer.js.map
+var _default = exports.default = Disclaimer;

package/lib/commonjs/components/Divider/Divider.js

@@ -59,5 +59,4 @@ function Divider({
     accessibilityLabel: undefined
   });
 }
-var _default = exports.default = Divider;
-//# sourceMappingURL=Divider.js.map
+var _default = exports.default = Divider;

package/lib/commonjs/components/Drawer/Drawer.js

@@ -335,5 +335,4 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1
   }
 });
-var _default = exports.default = Drawer;
-//# sourceMappingURL=Drawer.js.map
+var _default = exports.default = Drawer;

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

@@ -10,7 +10,6 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
-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); }
@@ -91,9 +90,6 @@ function EmptyState({
     textAlign: 'center'
   };
   const defaultIconSlot = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: "ic_card"
-    }),
     modes: modes
   }), [modes]);
 
@@ -127,5 +123,4 @@ function EmptyState({
     }), buttonContent]
   });
 }
-var _default = exports.default = EmptyState;
-//# sourceMappingURL=EmptyState.js.map
+var _default = exports.default = EmptyState;

package/lib/commonjs/components/FilterBar/FilterBar.js

@@ -154,5 +154,4 @@ function FilterBar({
     children: processedChildren
   });
 }
-var _default = exports.default = FilterBar;
-//# sourceMappingURL=FilterBar.js.map
+var _default = exports.default = FilterBar;

package/lib/commonjs/components/HStack/HStack.js

@@ -63,5 +63,4 @@ const HStack = ({
   });
 };
 exports.HStack = HStack;
-var _default = exports.default = HStack;
-//# sourceMappingURL=HStack.js.map
+var _default = exports.default = HStack;

package/lib/commonjs/components/IconButton/IconButton.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _reactNative = require("react-native");
 var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _webPlatformUtils = require("../../utils/web-platform-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); }
 /**
  * IconButton component that displays an icon within a pressable button container.
@@ -18,8 +20,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * 
  * @component
  * @param {Object} props - Component props
- * @param {React.ReactNode} [props.icon] - The icon element to display
- * @param {string} [props.iconName] - DEPRECATED: The name of the icon to display from the icon registry
+ * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
  * @param {Function} [props.onPress] - Callback function called when the button is pressed
  * @param {boolean} [props.disabled=false] - Whether the button is disabled
@@ -44,8 +45,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * ```
  */
 function IconButton({
-  icon,
-  iconName,
+  iconName = "ic_card",
   modes = {},
   onPress,
   disabled = false,
@@ -81,16 +81,15 @@ function IconButton({
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/color', componentModes) ?? '#0f0d0a';
   const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/size', componentModes) ?? 18;
 
-  // Determine which icon to display
   // Determine which icon to display
   // If isToggle is yes, use active/inactive icons based on isActive state
-  // Otherwise use standard icon
-  let finalIcon = icon;
+  // Otherwise use standard iconName
+  let finalIconName = iconName;
   if (isToggle) {
     if (isActive && activeIcon) {
-      finalIcon = activeIcon;
+      finalIconName = activeIcon;
     } else if (!isActive && inactiveIcon) {
-      finalIcon = inactiveIcon;
+      finalIconName = inactiveIcon;
     }
   }
 
@@ -115,7 +114,7 @@ function IconButton({
   };
 
   // Generate default accessibility label from icon name if not provided
-  const defaultAccessibilityLabel = accessibilityLabel || (iconName ? iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : undefined);
+  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
 
   // Get web platform support props
   const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
@@ -180,16 +179,13 @@ function IconButton({
       return [baseContainerStyle, style, pressedStyle, hoverStyle, focusStyle, manualPressStyle];
     },
     ...webProps,
-    children: /*#__PURE__*/(0, _react.isValidElement)(finalIcon) ? /*#__PURE__*/(0, _react.cloneElement)(finalIcon, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: finalIconName,
       size: iconSize,
-      width: iconSize,
-      height: iconSize,
       color: iconColor,
-      fill: iconColor,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
-    }) : null
+    })
   });
 }
-var _default = exports.default = IconButton;
-//# sourceMappingURL=IconButton.js.map
+var _default = exports.default = IconButton;

package/lib/commonjs/components/IconCapsule/IconCapsule.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
 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 }; }
 /**
  * IconCapsule component that displays an icon within a circular or rounded container.
  * 
@@ -18,27 +19,28 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * 
  * @component
  * @param {Object} props - Component props
- * @param {React.ReactNode} [props.icon] - The icon element to render (e.g., <IconAdd /> or <Icon name="..." />)
+ * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
  * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
  * 
  * @example
- * // With explicit icon component
- * <IconCapsule icon={<IconAdd />} modes={{}} />
+ * ```jsx
+ * // Default icon (ic_card)
+ * <IconCapsule modes={{}} />
  * 
- * // With legacy icon component (if needed)
- * <IconCapsule icon={<Icon name="ic_rupee" />} modes={{}} />
+ * // Custom icon
+ * <IconCapsule iconName="ic_rupee" modes={{}} />
  * 
  * // With appearance mode
- * <IconCapsule modes={{"Appearance": "Secondary"}} icon={<IconAdd />} />
+ * <IconCapsule modes={{"Appearance": "Secondary"}} />
  * 
  * // With accessibility label
- * <IconCapsule icon={<IconAdd />} accessibilityLabel="Add Card" />
+ * <IconCapsule iconName="ic_card" accessibilityLabel={undefined} />
  * ```
  */
 function IconCapsule({
-  icon,
+  iconName = "ic_card",
   modes: propModes = {},
   accessibilityLabel,
   accessibilityRole = "image",
@@ -76,22 +78,20 @@ function IconCapsule({
     justifyContent: 'center'
   };
 
-  // Generate default accessibility label if not provided
-  const defaultAccessibilityLabel = accessibilityLabel;
+  // Generate default accessibility label from icon name if not provided
+  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: containerStyle,
     accessibilityRole: accessibilityRole,
-    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityLabel: undefined,
     ...rest,
-    children: /*#__PURE__*/(0, _react.isValidElement)(icon) ? /*#__PURE__*/(0, _react.cloneElement)(icon, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: iconName,
       size: iconSize,
-      // Support legacy Icon component
-      width: iconSize,
-      height: iconSize,
-      fill: iconColor,
-      color: iconColor // Support both fill and color props
-    }) : null
+      color: iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    })
   });
 }
-var _default = exports.default = IconCapsule;
-//# sourceMappingURL=IconCapsule.js.map
+var _default = exports.default = IconCapsule;

package/lib/commonjs/components/InputSearch/InputSearch.js

@@ -139,5 +139,4 @@ function InputSearch({
       modes: componentModes
     })]
   });
-}
-//# sourceMappingURL=InputSearch.js.map
+}

package/lib/commonjs/components/LazyList/LazyList.js

@@ -95,5 +95,4 @@ function LazyList({
     children: processedSlot
   });
 }
-var _default = exports.default = LazyList;
-//# sourceMappingURL=LazyList.js.map
+var _default = exports.default = LazyList;

package/lib/commonjs/components/LinearMeter/LinearMeter.js

@@ -130,5 +130,4 @@ const LinearMeter = ({
 
 // Attach Label to Main Component
 LinearMeter.Label = LinearMeterLabel;
-var _default = exports.default = LinearMeter;
-//# sourceMappingURL=LinearMeter.js.map
+var _default = exports.default = LinearMeter;

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

@@ -10,5 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _LinearMeter = _interopRequireDefault(require("./LinearMeter"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//# sourceMappingURL=index.js.map
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/commonjs/components/ListGroup/ListGroup.js

@@ -105,5 +105,4 @@ function ListGroup({
     }) : null]
   });
 }
-var _default = exports.default = ListGroup;
-//# sourceMappingURL=ListGroup.js.map
+var _default = exports.default = ListGroup;