@razorpay/blade 6.6.0 → 6.6.2

package/build/components/index.web.js

@@ -2595,17 +2595,15 @@ var symbolProto = Symbol ? Symbol.prototype : undefined;
     symbolProto ? symbolProto.valueOf : undefined;
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * A type defining React component with additional static prop `componentId`
- */
-
 /**
  * Gets the `componentId` prop of React component if it exists.
  */
+
 var getComponentId = function getComponentId(component) {
   var _component$type;
 
-  if (! /*#__PURE__*/React__default.isValidElement(component)) return null;
+  if (! /*#__PURE__*/React__default.isValidElement(component)) return null; // eslint-disable-next-line no-restricted-properties
+
   return (_component$type = component.type) === null || _component$type === void 0 ? void 0 : _component$type.componentId;
 };
 /**
@@ -3712,6 +3710,25 @@ var isReactNative$4 = function isReactNative() {
 var castWebType = function castWebType(value) {
   return value;
 };
+/**
+ * @description
+ *
+ * Casts a Platform.Select<> type to native type
+ *
+ * @example
+ *
+ * ```ts
+ * type Example = Platform.Select<{ web: string; native: number }>;
+ *
+ * const extractedNativeType = castNativeType('' as Example);
+ * //    ^ number
+ * ```
+ */
+
+
+var castNativeType = function castNativeType(value) {
+  return value;
+};
 
 /**
  * is the role supposed to be `menu`
@@ -16912,6 +16929,44 @@ var useBladeInnerRef = function useBladeInnerRef(targetRef, handlers) {
   return innerRef;
 };
 
+/**
+ * Do you want to define `displayName` or `componentId` on your component? Use this instead to make sure treeshaking doesn't break.
+ *
+ * ## Usage
+ *
+ * ### ❌ Incorrect Code (Breaks treeshaking)
+ *
+ * ```ts
+ * const _MyComponent = () => {};
+ * const MyComponent = React.forwardRef(_MyComponent);
+ * const MyComponent.displayName = 'MyComponent'; // this breaks treeshaking
+ *
+ * export { MyComponent }
+ * ```
+ *
+ * ### ✅ Correct Code (No Side-Effects. Treeshaking continues to work)
+ *
+ * ```ts
+ * const _MyComponent = () => {};
+ * const MyComponentWithRef = React.forwardRef(_MyComponent);
+ * const MyComponent = assignWithoutSideEffects(
+ *  MyComponentWithRef,
+ *  { displayName: 'MyComponent' }
+ * );
+ *
+ * export { MyComponent }
+ * ```
+ *
+ * Checkout other components like [Button.tsx](../../components/Button/Button/Button.tsx), [SelectInput.tsx](../../components/Input/SelectInput/SelectInput.tsx) for example.
+ *
+ * _Note: You don't have to add PURE comment to this function as it is added during build-time by our `manualPureFunctions` babel plugin_
+ */
+// We're matching the types of this with Object.assign types
+// eslint-disable-next-line @typescript-eslint/ban-types
+var assignWithoutSideEffects = function assignWithoutSideEffects(component, sourceObj) {
+  return /*#__PURE__*/Object.assign(component, sourceObj);
+};
+
 function ownKeys$L(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$L(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$L(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$L(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -16991,8 +17046,9 @@ var _SelectorInput = function _SelectorInput(_ref3, ref) {
   }));
 };
 
-var SelectorInput = /*#__PURE__*/React__default.forwardRef(_SelectorInput);
-SelectorInput.displayName = 'SelectorInput';
+var SelectorInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_SelectorInput), {
+  displayName: 'SelectorInput'
+});
 
 var _excluded$p = ["defaultChecked", "validationState", "isChecked", "isDisabled", "isIndeterminate", "isRequired", "name", "onChange", "value", "children", "helpText", "errorText", "size", "tabIndex", "testID"];
 
@@ -17142,8 +17198,9 @@ var _Checkbox = function _Checkbox(_ref, ref) {
   }));
 };
 
-var Checkbox = /*#__PURE__*/React__default.forwardRef(_Checkbox);
-Checkbox.displayName = 'Checkbox';
+var Checkbox = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Checkbox), {
+  displayName: 'Checkbox'
+});
 
 var useCheckboxGroup = function useCheckboxGroup(_ref) {
   var value = _ref.value,
@@ -17396,7 +17453,7 @@ var StyledActionListSectionTitle = /*#__PURE__*/styled(BaseBox).withConfig({
   };
 });
 
-var ActionListSection = function ActionListSection(_ref) {
+var _ActionListSection = function _ActionListSection(_ref) {
   var title = _ref.title,
       children = _ref.children,
       testID = _ref.testID,
@@ -17427,9 +17484,11 @@ var ActionListSection = function ActionListSection(_ref) {
   }));
 };
 
-ActionListSection.componentId = componentIds$1.ActionListSection;
+var ActionListSection = /*#__PURE__*/assignWithoutSideEffects(_ActionListSection, {
+  componentId: componentIds$1.ActionListSection
+});
 
-var ActionListItemIcon = function ActionListItemIcon(_ref2) {
+var _ActionListItemIcon = function _ActionListItemIcon(_ref2) {
   var icon = _ref2.icon;
   var Icon = icon;
 
@@ -17445,9 +17504,11 @@ var ActionListItemIcon = function ActionListItemIcon(_ref2) {
   });
 };
 
-ActionListItemIcon.componentId = componentIds$1.ActionListItemIcon;
+var ActionListItemIcon = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemIcon, {
+  componentId: componentIds$1.ActionListItemIcon
+});
 
-var ActionListItemText = function ActionListItemText(_ref3) {
+var _ActionListItemText = function _ActionListItemText(_ref3) {
   var children = _ref3.children;
 
   var _React$useContext2 = React__default.useContext(ActionListItemContext),
@@ -17462,7 +17523,9 @@ var ActionListItemText = function ActionListItemText(_ref3) {
   });
 };
 
-ActionListItemText.componentId = componentIds$1.ActionListItemText;
+var ActionListItemText = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemText, {
+  componentId: componentIds$1.ActionListItemText
+});
 var ActionListCheckboxWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ActionListItem__ActionListCheckboxWrapper",
   componentId: "m6qdwa-2"
@@ -17505,7 +17568,7 @@ var makeActionListItemClickable = function makeActionListItemClickable(clickHand
  */
 
 
-var ActionListItem = function ActionListItem(props) {
+var _ActionListItem = function _ActionListItem(props) {
   var _useDropdown = useDropdown(),
       activeIndex = _useDropdown.activeIndex,
       dropdownBaseId = _useDropdown.dropdownBaseId,
@@ -17631,7 +17694,9 @@ var ActionListItem = function ActionListItem(props) {
   });
 };
 
-ActionListItem.componentId = componentIds$1.ActionListItem;
+var ActionListItem = /*#__PURE__*/assignWithoutSideEffects(_ActionListItem, {
+  componentId: componentIds$1.ActionListItem
+});
 
 function ownKeys$G(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -17668,7 +17733,7 @@ var StyledActionListHeader = /*#__PURE__*/styled(BaseBox).withConfig({
  * />
  * ```
  */
-var ActionListHeader = function ActionListHeader(props) {
+var _ActionListHeader = function _ActionListHeader(props) {
   React__default.useEffect(function () {
     React__default.Children.map(props.leading, function (child) {
       if (!isValidAllowedChildren(child, componentIds$1.ActionListHeaderIcon)) {
@@ -17694,9 +17759,11 @@ var ActionListHeader = function ActionListHeader(props) {
   }));
 };
 
-ActionListHeader.componentId = componentIds$1.ActionListHeader;
+var ActionListHeader = /*#__PURE__*/assignWithoutSideEffects(_ActionListHeader, {
+  componentId: componentIds$1.ActionListHeader
+});
 
-var ActionListHeaderIcon = function ActionListHeaderIcon(_ref) {
+var _ActionListHeaderIcon = function _ActionListHeaderIcon(_ref) {
   var icon = _ref.icon;
   var Icon = icon;
   return /*#__PURE__*/jsx(Icon, {
@@ -17705,7 +17772,9 @@ var ActionListHeaderIcon = function ActionListHeaderIcon(_ref) {
   });
 };
 
-ActionListHeaderIcon.componentId = componentIds$1.ActionListHeaderIcon;
+var ActionListHeaderIcon = /*#__PURE__*/assignWithoutSideEffects(_ActionListHeaderIcon, {
+  componentId: componentIds$1.ActionListHeaderIcon
+});
 
 function ownKeys$F(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -17744,7 +17813,7 @@ var StyledActionListFooter = /*#__PURE__*/styled(BaseBox).withConfig({
  * ```
  */
 
-var ActionListFooter = function ActionListFooter(props) {
+var _ActionListFooter = function _ActionListFooter(props) {
   var footerRef = React__default.useRef(null);
 
   var _useDropdown = useDropdown(),
@@ -17836,9 +17905,11 @@ var ActionListFooter = function ActionListFooter(props) {
   }));
 };
 
-ActionListFooter.componentId = componentIds$1.ActionListFooter;
+var ActionListFooter = /*#__PURE__*/assignWithoutSideEffects(_ActionListFooter, {
+  componentId: componentIds$1.ActionListFooter
+});
 
-var ActionListFooterIcon = function ActionListFooterIcon(_ref) {
+var _ActionListFooterIcon = function _ActionListFooterIcon(_ref) {
   var icon = _ref.icon;
   var Icon = icon;
   return /*#__PURE__*/jsx(Icon, {
@@ -17847,9 +17918,11 @@ var ActionListFooterIcon = function ActionListFooterIcon(_ref) {
   });
 };
 
-ActionListFooterIcon.componentId = componentIds$1.ActionListFooterIcon;
+var ActionListFooterIcon = /*#__PURE__*/assignWithoutSideEffects(_ActionListFooterIcon, {
+  componentId: componentIds$1.ActionListFooterIcon
+});
 
-var ActionListItemAsset = function ActionListItemAsset(props) {
+var _ActionListItemAsset = function _ActionListItemAsset(props) {
   return /*#__PURE__*/jsx("img", {
     src: props.src,
     alt: props.alt,
@@ -17858,7 +17931,9 @@ var ActionListItemAsset = function ActionListItemAsset(props) {
   });
 };
 
-ActionListItemAsset.componentId = componentIds$1.ActionListItemAsset;
+var ActionListItemAsset = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemAsset, {
+  componentId: componentIds$1.ActionListItemAsset
+});
 
 var MAX_WIDTH = size[584];
 var getCommonStyles = function getCommonStyles(props) {
@@ -17879,7 +17954,8 @@ var getCommonStyles = function getCommonStyles(props) {
     flexDirection: 'row',
     maxWidth: isFullWidth ? 'auto' : makeSize(MAX_WIDTH),
     width: isFullWidth ? '100%' : undefined,
-    alignItems: isFullWidth && isDesktop ? 'center' : 'flex-start'
+    alignItems: isFullWidth && isDesktop ? 'center' : 'flex-start',
+    boxSizing: 'border-box'
   };
 };
 
@@ -18718,8 +18794,9 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
   }));
 };
 
-var BaseButton = /*#__PURE__*/React__default.forwardRef(_BaseButton);
-BaseButton.displayName = 'BaseButton';
+var BaseButton = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_BaseButton), {
+  displayName: 'BaseButton'
+});
 
 var getStyledLinkStyles = function getStyledLinkStyles(_ref) {
   var cursor = _ref.cursor;
@@ -18856,7 +18933,7 @@ var getProps = function getProps(_ref2) {
       isVisited: isVisited
     }),
     fontSize: size === 'medium' ? 100 : 75,
-    lineHeight: size === 'medium' ? 'm' : 's',
+    lineHeight: size === 'medium' ? 'l' : 's',
     iconSize: size,
     iconPadding: children !== null && children !== void 0 && children.trim() ? 'spacing.2' : 'spacing.0',
     textColor: getColorToken({
@@ -19137,7 +19214,7 @@ var Alert = function Alert(_ref) {
 
   var primaryAction = actions !== null && actions !== void 0 && actions.primary ? /*#__PURE__*/jsx(BaseBox, {
     marginRight: "spacing.5",
-    display: isReactNative$3 ? 'flex' : 'inline-flex',
+    display: isReactNative$3 ? castNativeType('flex') : castWebType('inline-flex'),
     children: /*#__PURE__*/jsx(BaseButton, {
       size: textSize,
       onClick: actions.primary.onClick,
@@ -19164,7 +19241,7 @@ var Alert = function Alert(_ref) {
 
   var secondaryAction = actions !== null && actions !== void 0 && actions.secondary ? /*#__PURE__*/jsx(BaseBox, {
     marginRight: "spacing.4",
-    display: isReactNative$3 ? 'flex' : 'inline-flex',
+    display: isReactNative$3 ? castNativeType('flex') : castWebType('inline-flex'),
     children: /*#__PURE__*/jsx(BaseLink, _objectSpread$y(_objectSpread$y({
       size: textSize,
       contrast: contrast,
@@ -19569,7 +19646,8 @@ var CardSurface = /*#__PURE__*/styled(BaseBox).withConfig({
     display: 'flex',
     flexDirection: 'column',
     boxShadow: "".concat(shadow1, ", ").concat(shadow2),
-    backgroundColor: backgroundColor
+    backgroundColor: backgroundColor,
+    boxSizing: 'border-box'
   };
 });
 
@@ -19653,7 +19731,7 @@ var Card = function Card(_ref) {
   });
 };
 
-var CardBody = function CardBody(_ref2) {
+var _CardBody = function _CardBody(_ref2) {
   var children = _ref2.children,
       testID = _ref2.testID;
   useVerifyInsideCard('CardBody');
@@ -19665,7 +19743,9 @@ var CardBody = function CardBody(_ref2) {
   }));
 };
 
-CardBody.componentId = ComponentIds$1.CardBody;
+var CardBody = /*#__PURE__*/assignWithoutSideEffects(_CardBody, {
+  componentId: ComponentIds$1.CardBody
+});
 
 var _excluded$h = ["children", "icon", "iconPosition", "isDisabled", "onClick", "variant", "href", "target", "rel", "accessibilityLabel", "size", "testID", "hitSlop"];
 
@@ -19764,8 +19844,9 @@ var _Button = function _Button(_ref, ref) {
   }));
 };
 
-var Button = /*#__PURE__*/React__default.forwardRef(_Button);
-Button.displayName = 'Button';
+var Button = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Button), {
+  displayName: 'Button'
+});
 
 var Divider = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dividerweb__Divider",
@@ -19913,7 +19994,7 @@ function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var CardHeaderIcon = function CardHeaderIcon(_ref) {
+var _CardHeaderIcon = function _CardHeaderIcon(_ref) {
   var Icon = _ref.icon;
   useVerifyInsideCard('CardHeaderIcon');
   return /*#__PURE__*/jsx(Icon, {
@@ -19922,37 +20003,47 @@ var CardHeaderIcon = function CardHeaderIcon(_ref) {
   });
 };
 
-CardHeaderIcon.componentId = ComponentIds$1.CardHeaderIcon;
+var CardHeaderIcon = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderIcon, {
+  componentId: ComponentIds$1.CardHeaderIcon
+});
 
-var CardHeaderCounter = function CardHeaderCounter(props) {
+var _CardHeaderCounter = function _CardHeaderCounter(props) {
   useVerifyInsideCard('CardHeaderCounter');
   return /*#__PURE__*/jsx(Counter, _objectSpread$p({}, props));
 };
 
-CardHeaderCounter.componentId = ComponentIds$1.CardHeaderCounter;
+var CardHeaderCounter = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderCounter, {
+  componentId: ComponentIds$1.CardHeaderCounter
+});
 
-var CardHeaderBadge = function CardHeaderBadge(props) {
+var _CardHeaderBadge = function _CardHeaderBadge(props) {
   useVerifyInsideCard('CardHeaderBadge');
   return /*#__PURE__*/jsx(Badge, _objectSpread$p({}, props));
 };
 
-CardHeaderBadge.componentId = ComponentIds$1.CardHeaderBadge;
+var CardHeaderBadge = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderBadge, {
+  componentId: ComponentIds$1.CardHeaderBadge
+});
 
-var CardHeaderText = function CardHeaderText(props) {
+var _CardHeaderText = function _CardHeaderText(props) {
   useVerifyInsideCard('CardHeaderText');
   return /*#__PURE__*/jsx(Text, _objectSpread$p({}, props));
 };
 
-CardHeaderText.componentId = ComponentIds$1.CardHeaderText;
+var CardHeaderText = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderText, {
+  componentId: ComponentIds$1.CardHeaderText
+});
 
-var CardHeaderLink = function CardHeaderLink(props) {
+var _CardHeaderLink = function _CardHeaderLink(props) {
   useVerifyInsideCard('CardHeaderLink');
   return /*#__PURE__*/jsx(Link, _objectSpread$p({}, props));
 };
 
-CardHeaderLink.componentId = ComponentIds$1.CardHeaderLink;
+var CardHeaderLink = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderLink, {
+  componentId: ComponentIds$1.CardHeaderLink
+});
 
-var CardHeaderIconButton = function CardHeaderIconButton(props) {
+var _CardHeaderIconButton = function _CardHeaderIconButton(props) {
   useVerifyInsideCard('CardHeaderIconButton');
   return /*#__PURE__*/jsx(BaseBox, {
     width: makeSpace(minHeight.xsmall),
@@ -19965,9 +20056,11 @@ var CardHeaderIconButton = function CardHeaderIconButton(props) {
   });
 };
 
-CardHeaderIconButton.componentId = ComponentIds$1.CardHeaderIconButton;
+var CardHeaderIconButton = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderIconButton, {
+  componentId: ComponentIds$1.CardHeaderIconButton
+});
 
-var CardHeader = function CardHeader(_ref2) {
+var _CardHeader = function _CardHeader(_ref2) {
   var children = _ref2.children,
       testID = _ref2.testID;
   useVerifyInsideCard('CardHeader');
@@ -19988,9 +20081,11 @@ var CardHeader = function CardHeader(_ref2) {
   }));
 };
 
-CardHeader.componentId = ComponentIds$1.CardHeader;
+var CardHeader = /*#__PURE__*/assignWithoutSideEffects(_CardHeader, {
+  componentId: ComponentIds$1.CardHeader
+});
 
-var CardHeaderLeading = function CardHeaderLeading(_ref3) {
+var _CardHeaderLeading = function _CardHeaderLeading(_ref3) {
   var title = _ref3.title,
       subtitle = _ref3.subtitle,
       prefix = _ref3.prefix,
@@ -20039,10 +20134,12 @@ var CardHeaderLeading = function CardHeaderLeading(_ref3) {
   });
 };
 
-CardHeaderLeading.componentId = ComponentIds$1.CardHeaderLeading;
+var CardHeaderLeading = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderLeading, {
+  componentId: ComponentIds$1.CardHeaderLeading
+});
 var headerTrailingAllowedComponents = [ComponentIds$1.CardHeaderLink, ComponentIds$1.CardHeaderText, ComponentIds$1.CardHeaderIconButton, ComponentIds$1.CardHeaderBadge];
 
-var CardHeaderTrailing = function CardHeaderTrailing(_ref4) {
+var _CardHeaderTrailing = function _CardHeaderTrailing(_ref4) {
   var visual = _ref4.visual;
   useVerifyInsideCard('CardHeaderTrailing');
 
@@ -20056,7 +20153,9 @@ var CardHeaderTrailing = function CardHeaderTrailing(_ref4) {
   });
 };
 
-CardHeaderTrailing.componentId = ComponentIds$1.CardHeaderTrailing;
+var CardHeaderTrailing = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderTrailing, {
+  componentId: ComponentIds$1.CardHeaderTrailing
+});
 
 function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -20074,7 +20173,7 @@ var useIsMobile = function useIsMobile() {
   return matchedDeviceType === 'mobile';
 };
 
-var CardFooter = function CardFooter(_ref) {
+var _CardFooter = function _CardFooter(_ref) {
   var children = _ref.children,
       testID = _ref.testID;
   var isMobile = useIsMobile();
@@ -20099,9 +20198,11 @@ var CardFooter = function CardFooter(_ref) {
   }));
 };
 
-CardFooter.componentId = ComponentIds$1.CardFooter;
+var CardFooter = /*#__PURE__*/assignWithoutSideEffects(_CardFooter, {
+  componentId: ComponentIds$1.CardFooter
+});
 
-var CardFooterLeading = function CardFooterLeading(_ref2) {
+var _CardFooterLeading = function _CardFooterLeading(_ref2) {
   var title = _ref2.title,
       subtitle = _ref2.subtitle;
   useVerifyInsideCard('CardFooterLeading');
@@ -20120,9 +20221,11 @@ var CardFooterLeading = function CardFooterLeading(_ref2) {
   });
 };
 
-CardFooterLeading.componentId = ComponentIds$1.CardFooterLeading;
+var CardFooterLeading = /*#__PURE__*/assignWithoutSideEffects(_CardFooterLeading, {
+  componentId: ComponentIds$1.CardFooterLeading
+});
 
-var CardFooterTrailing = function CardFooterTrailing(_ref3) {
+var _CardFooterTrailing = function _CardFooterTrailing(_ref3) {
   var actions = _ref3.actions;
   var isMobile = useIsMobile();
   useVerifyInsideCard('CardFooterTrailing');
@@ -20155,7 +20258,9 @@ var CardFooterTrailing = function CardFooterTrailing(_ref3) {
   });
 };
 
-CardFooterTrailing.componentId = ComponentIds$1.CardFooterTrailing;
+var CardFooterTrailing = /*#__PURE__*/assignWithoutSideEffects(_CardFooterTrailing, {
+  componentId: ComponentIds$1.CardFooterTrailing
+});
 
 var _excluded$e = ["children", "selectionType"];
 
@@ -20189,7 +20294,7 @@ function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) {
  *
  * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select Dropdown Documentation}
  */
-var Dropdown = function Dropdown(_ref) {
+var _Dropdown = function _Dropdown(_ref) {
   var children = _ref.children,
       _ref$selectionType = _ref.selectionType,
       selectionType = _ref$selectionType === void 0 ? 'single' : _ref$selectionType,
@@ -20294,7 +20399,9 @@ var Dropdown = function Dropdown(_ref) {
   });
 };
 
-Dropdown.componentId = componentIds.Dropdown;
+var Dropdown = /*#__PURE__*/assignWithoutSideEffects(_Dropdown, {
+  componentId: componentIds.Dropdown
+});
 
 var root = _root;
 
@@ -20705,7 +20812,7 @@ var StyledDropdownOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
  *
  * Wrap your ActionList within this component
  */
-var DropdownOverlay = function DropdownOverlay(_ref) {
+var _DropdownOverlay = function _DropdownOverlay(_ref) {
   var children = _ref.children,
       testID = _ref.testID;
 
@@ -20772,7 +20879,7 @@ var DropdownOverlay = function DropdownOverlay(_ref) {
       style: {
         opacity: isOpen ? 1 : 0
       },
-      display: display,
+      display: castWebType(display),
       right: "0px",
       position: "absolute",
       transition: isOpen ? fadeIn : fadeOut,
@@ -20792,7 +20899,9 @@ var DropdownOverlay = function DropdownOverlay(_ref) {
   });
 };
 
-DropdownOverlay.componentId = componentIds.DropdownOverlay;
+var DropdownOverlay = /*#__PURE__*/assignWithoutSideEffects(_DropdownOverlay, {
+  componentId: componentIds.DropdownOverlay
+});
 
 function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -21155,7 +21264,8 @@ var autoCompleteSuggestionTypeMap = {
   creditCardExpiryMonth: 'cc-exp-month',
   creditCardExpiryYear: 'cc-exp-year'
 };
-var StyledBaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+
+var _StyledBaseInput = function _StyledBaseInput(_ref, ref) {
   var name = _ref.name,
       isDisabled = _ref.isDisabled,
       isRequired = _ref.isRequired,
@@ -21247,8 +21357,11 @@ var StyledBaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     },
     autoCapitalize: autoCapitalize
   }, commonProps), props), accessibilityProps));
+};
+
+var StyledBaseInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_StyledBaseInput), {
+  displayName: 'StyledBaseInput'
 });
-StyledBaseInput.displayName = 'StyledBaseInput';
 
 var scaleBorder = /*#__PURE__*/keyframes(["from{transform:scaleX(0);transform-origin:left;opacity:0;}to{transform:scaleX(1);transform-origin:left;opacity:1;}"]);
 var fadeOutBorder = /*#__PURE__*/keyframes(["from{opacity:1}to{opacity:0}"]);
@@ -22062,8 +22175,9 @@ var _TextInput = function _TextInput(_ref2, ref) {
   })), styledProps));
 };
 
-var TextInput = /*#__PURE__*/React__default.forwardRef(_TextInput);
-TextInput.displayName = 'TextInput';
+var TextInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_TextInput), {
+  displayName: 'TextInput'
+});
 
 var _excluded$8 = ["label", "labelPosition", "showRevealButton", "maxCharacters", "validationState", "errorText", "successText", "helpText", "isDisabled", "defaultValue", "placeholder", "isRequired", "necessityIndicator", "value", "onChange", "onFocus", "onBlur", "onSubmit", "name", "autoFocus", "keyboardReturnKeyType", "autoCompleteSuggestionType", "testID"];
 
@@ -22176,11 +22290,12 @@ var _PasswordInput = function _PasswordInput(_ref, ref) {
     autoCapitalize: "none",
     testID: testID
   }, styledProps));
-};
+}; // nosemgrep
 
-var PasswordInput = /*#__PURE__*/React__default.forwardRef(_PasswordInput); // nosemgrep
 
-PasswordInput.displayName = 'PasswordInput';
+var PasswordInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_PasswordInput), {
+  displayName: 'PasswordInput'
+});
 
 var _excluded$7 = ["label", "labelPosition", "necessityIndicator", "errorText", "helpText", "successText", "validationState", "defaultValue", "isDisabled", "isRequired", "name", "onChange", "onFocus", "onBlur", "onSubmit", "placeholder", "value", "maxCharacters", "showClearButton", "onClearButtonClick", "autoFocus", "numberOfLines", "testID"];
 
@@ -22326,8 +22441,9 @@ var _TextArea = function _TextArea(_ref, ref) {
   }, styledProps));
 };
 
-var TextArea = /*#__PURE__*/React__default.forwardRef(_TextArea);
-TextArea.displayName = 'TextArea';
+var TextArea = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_TextArea), {
+  displayName: 'TextArea'
+});
 
 var _excluded$6 = ["autoFocus", "errorText", "helpText", "isDisabled", "keyboardReturnKeyType", "keyboardType", "label", "labelPosition", "name", "onChange", "onFocus", "onBlur", "onOTPFilled", "otpLength", "placeholder", "successText", "validationState", "value", "isMasked", "autoCompleteSuggestionType", "testID"];
 
@@ -22848,9 +22964,9 @@ var _SelectInput = function _SelectInput(props, ref) {
  */
 
 
-var SelectInput = /*#__PURE__*/React__default.forwardRef(_SelectInput); // @ts-expect-error: componentId is our custom attribute
-
-SelectInput.componentId = 'SelectInput';
+var SelectInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_SelectInput), {
+  componentId: 'SelectInput'
+});
 
 var _excluded$4 = ["accessibilityLabel", "children", "size", "intent", "testID"];
 
@@ -23130,7 +23246,7 @@ var StyledUnorderedList = /*#__PURE__*/styled(UnorderedList).withConfig({
  * ```
  */
 
-var List = function List(_ref3) {
+var _List = function _List(_ref3) {
   var _ref3$variant = _ref3.variant,
       variant = _ref3$variant === void 0 ? 'unordered' : _ref3$variant,
       size = _ref3.size,
@@ -23183,7 +23299,9 @@ var List = function List(_ref3) {
   });
 };
 
-List.componentId = ComponentIds.List;
+var List = /*#__PURE__*/assignWithoutSideEffects(_List, {
+  componentId: ComponentIds.List
+});
 
 var UnorderedLevel1Icon = function UnorderedLevel1Icon(_ref) {
   var iconDimensions = _ref.iconDimensions,
@@ -23364,11 +23482,40 @@ var StyledListItem = /*#__PURE__*/styled(ListItemElement).withConfig({
   };
 });
 
-var ListItem = function ListItem(_ref2) {
+var ListItemContentChildren = function ListItemContentChildren(_ref2) {
   var children = _ref2.children,
-      Icon = _ref2.icon,
-      _itemNumber = _ref2._itemNumber,
-      testID = _ref2.testID;
+      size = _ref2.size;
+
+  /* Having a <View><Text>...</Text><View/> inside <Text /> breaks vertical alignment. Issue: https://github.com/facebook/react-native/issues/31955
+    As a workaround, we wrap individual strings in their own <Text /> and handle alignment with a parent <View> (BaseBox).
+   */
+  return getPlatformType() === 'react-native' ? /*#__PURE__*/jsx(BaseBox, {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    children: children.map(function (child) {
+      if (typeof child === 'string') {
+        return /*#__PURE__*/jsx(Text, {
+          variant: "body",
+          size: size,
+          children: child
+        });
+      }
+
+      return child;
+    })
+  }) : /*#__PURE__*/jsx(Text, {
+    variant: "body",
+    size: size,
+    children: children
+  });
+};
+
+var _ListItem = function _ListItem(_ref3) {
+  var children = _ref3.children,
+      Icon = _ref3.icon,
+      _itemNumber = _ref3._itemNumber,
+      testID = _ref3.testID;
 
   var _useListContext = useListContext(),
       level = _useListContext.level,
@@ -23447,8 +23594,7 @@ var ListItem = function ListItem(_ref2) {
             level: level !== null && level !== void 0 ? level : 1
           })).concat(variant === 'ordered' ? '.' : '')
         })
-      }), /*#__PURE__*/jsx(Text, {
-        variant: "body",
+      }), /*#__PURE__*/jsx(ListItemContentChildren, {
         size: size,
         children: validChildItem
       })]
@@ -23456,13 +23602,15 @@ var ListItem = function ListItem(_ref2) {
   }));
 };
 
-ListItem.componentId = 'ListItem';
+var ListItem = /*#__PURE__*/assignWithoutSideEffects(_ListItem, {
+  componentId: 'ListItem'
+});
 
 function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var ListItemLink = function ListItemLink(_ref) {
+var _ListItemLink = function _ListItemLink(_ref) {
   var accessibilityLabel = _ref.accessibilityLabel,
       children = _ref.children,
       href = _ref.href,
@@ -23495,9 +23643,11 @@ var ListItemLink = function ListItemLink(_ref) {
   }));
 };
 
-ListItemLink.componentId = 'ListItemLink';
+var ListItemLink = /*#__PURE__*/assignWithoutSideEffects(_ListItemLink, {
+  componentId: 'ListItemLink'
+});
 
-var ListItemCode = function ListItemCode(_ref) {
+var _ListItemCode = function _ListItemCode(_ref) {
   var children = _ref.children,
       testID = _ref.testID;
 
@@ -23511,7 +23661,9 @@ var ListItemCode = function ListItemCode(_ref) {
   });
 };
 
-ListItemCode.componentId = 'ListItemCode';
+var ListItemCode = /*#__PURE__*/assignWithoutSideEffects(_ListItemCode, {
+  componentId: 'ListItemCode'
+});
 
 /**
  * The base implementation of `_.clamp` which doesn't coerce arguments.
@@ -24349,8 +24501,9 @@ var _Radio = function _Radio(_ref, ref) {
   }));
 };
 
-var Radio = /*#__PURE__*/React__default.forwardRef(_Radio);
-Radio.displayName = 'Radio';
+var Radio = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Radio), {
+  displayName: 'Radio'
+});
 
 var useRadioGroup = function useRadioGroup(_ref) {
   var value = _ref.value,