@razorpay/blade 6.5.2 → 6.6.1

package/build/components/index.web.js

@@ -5,8 +5,8 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import styled, { ThemeProvider, css, keyframes } from 'styled-components';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 
@@ -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`
@@ -4204,15 +4221,92 @@ var getBaseBoxStyles = function getBaseBoxStyles(props) {
   return _objectSpread$5h(_objectSpread$5h({}, getAllProps(props)), getAllMediaQueries(props));
 };
 
-var _excluded$4M = ["theme", "children", "className", "id"];
+var ThemeContext = /*#__PURE__*/createContext({
+  // @ts-expect-error set null
+  theme: null,
+  colorScheme: 'light',
+  platform: 'onDesktop',
+  setColorScheme: function setColorScheme() {
+    return null;
+  }
+});
+
+var useTheme = function useTheme() {
+  var themeContext = useContext(ThemeContext);
+
+  if (!themeContext.theme) {
+    throw new Error("[@razorpay/blade:BladeProvider]: BladeProvider is missing theme");
+  }
+
+  if (themeContext === undefined) {
+    throw new Error("[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider");
+  }
+
+  return themeContext;
+};
 
 function ownKeys$5g(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$5g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5g(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var BladeProvider = function BladeProvider(_ref) {
+  var themeTokens = _ref.themeTokens,
+      initialColorScheme = _ref.colorScheme,
+      children = _ref.children;
+
+  if (!themeTokens) {
+    throw new Error("[BladeProvider]: Expected valid themeTokens of type ThemeTokens to be passed but found ".concat(_typeof(themeTokens)));
+  }
+
+  if (initialColorScheme && !colorSchemeNamesInput.includes(initialColorScheme)) {
+    throw new Error("[BladeProvider]: Expected color scheme to be one of [".concat(colorSchemeNamesInput.toString(), "] but received ").concat(initialColorScheme));
+  }
+
+  var _useColorScheme = useColorScheme(initialColorScheme),
+      colorScheme = _useColorScheme.colorScheme,
+      setColorScheme = _useColorScheme.setColorScheme;
+
+  var _useBreakpoint = useBreakpoint({
+    breakpoints: themeTokens.breakpoints
+  }),
+      matchedDeviceType = _useBreakpoint.matchedDeviceType;
+
+  var onColorMode = "on".concat(toTitleCase(colorScheme));
+  var onDeviceType = "on".concat(toTitleCase(matchedDeviceType));
+
+  var theme = _objectSpread$5g(_objectSpread$5g({}, themeTokens), {}, {
+    colors: themeTokens.colors[onColorMode],
+    shadows: _objectSpread$5g(_objectSpread$5g({}, themeTokens.shadows), {}, {
+      color: themeTokens.shadows.color[onColorMode]
+    }),
+    typography: themeTokens.typography[onDeviceType]
+  });
+
+  var themeContextValue = {
+    theme: theme,
+    colorScheme: colorScheme,
+    setColorScheme: setColorScheme,
+    platform: onDeviceType
+  };
+  return /*#__PURE__*/jsx(ThemeContext.Provider, {
+    value: themeContextValue,
+    children: /*#__PURE__*/jsx(ThemeProvider, {
+      theme: theme,
+      children: children
+    })
+  });
+};
+
+var _excluded$4M = ["theme", "colorScheme", "children", "className", "id"];
+
+function ownKeys$5f(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$5f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5f(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var getMemoDependency = function getMemoDependency(props) {
   // These are the props that change nothing in the getBaseBoxStyles calculations
-  props.theme;
+  var theme = props.theme,
+      colorScheme = props.colorScheme;
       props.children;
       props.className;
       props.id;
@@ -4224,7 +4318,7 @@ var getMemoDependency = function getMemoDependency(props) {
     // I know this looks illegal but Dan approves it - https://twitter.com/dan_abramov/status/1104414272753487872?s=20
     // A lot of times passing object to dependency prop isn't efficient and mostly won't work
     // Hence we JSON.strinfigy and pass the string as dependency prop. React handles this way better.
-    dependencyPropString = JSON.stringify(rest);
+    dependencyPropString = "".concat(JSON.stringify(rest), "-").concat(theme === null || theme === void 0 ? void 0 : theme.name, "-").concat(colorScheme);
   } catch (err) {
     console.warn('[Blade - BaseBox]: stringification of props failed in BaseBox so falling back to re-calculations on all changes\n\n If you see this warning, please create issue on https://github.com/razorpay/blade as this could degrade runtime styling performance', err);
     dependencyPropString = rest;
@@ -4245,9 +4339,14 @@ var getMemoDependency = function getMemoDependency(props) {
 
 
 var useMemoizedStyles = function useMemoizedStyles(boxProps) {
-  var boxPropsMemoDependency = getMemoDependency(boxProps);
+  var _useTheme = useTheme(),
+      colorScheme = _useTheme.colorScheme;
+
+  var boxPropsMemoDependency = getMemoDependency(_objectSpread$5f(_objectSpread$5f({}, boxProps), {}, {
+    colorScheme: colorScheme
+  }));
   var boxPropsCSSObject = React__default.useMemo(function () {
-    return getBaseBoxStyles(_objectSpread$5g(_objectSpread$5g({}, boxProps), {}, {
+    return getBaseBoxStyles(_objectSpread$5f(_objectSpread$5f({}, boxProps), {}, {
       theme: boxProps.theme
     }));
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4263,14 +4362,14 @@ var BaseBox = /*#__PURE__*/styled.div.withConfig({
   return cssObject;
 });
 
-function ownKeys$5f(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 ownKeys$5e(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$5f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5f(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5e(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledActionList = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "StyledActionListweb__StyledActionList",
   componentId: "lwcs1w-0"
 })(function (props) {
-  return _objectSpread$5f({}, getBaseActionListStyles(props));
+  return _objectSpread$5e({}, getBaseActionListStyles(props));
 });
 
 /**
@@ -4354,16 +4453,16 @@ var getBaseListBoxWrapperStyles = function getBaseListBoxWrapperStyles(props) {
   };
 };
 
-function ownKeys$5e(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 ownKeys$5d(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$5e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5e(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5d(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledListBoxWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "StyledListBoxWrapperweb__StyledListBoxWrapper",
   componentId: "sc-1eo4pr6-0"
 })(function (props) {
   var _objectSpread2;
 
-  return _objectSpread$5e((_objectSpread2 = {}, _defineProperty$1(_objectSpread2, "& [role=group]:last-child > [role=separator]:last-child", {
+  return _objectSpread$5d((_objectSpread2 = {}, _defineProperty$1(_objectSpread2, "& [role=group]:last-child > [role=separator]:last-child", {
     display: 'none'
   }), _defineProperty$1(_objectSpread2, "overflowY", 'auto'), _objectSpread2), getBaseListBoxWrapperStyles({
     theme: props.theme
@@ -4661,9 +4760,9 @@ var makeInputDisplayValue = function makeInputDisplayValue(selectedIndices, opti
 
 var _excluded$4L = ["isOpen", "setIsOpen", "selectedIndices", "setSelectedIndices", "activeIndex", "setActiveIndex", "shouldIgnoreBlur", "setShouldIgnoreBlur", "isKeydownPressed", "setIsKeydownPressed", "options", "selectionType"];
 
-function ownKeys$5d(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 ownKeys$5c(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$5d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5d(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5c(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 var noop = function noop() {};
@@ -4919,7 +5018,7 @@ var useDropdown = function useDropdown() {
     }
   };
 
-  return _objectSpread$5d({
+  return _objectSpread$5c({
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     selectedIndices: selectedIndices,
@@ -4941,82 +5040,6 @@ var useDropdown = function useDropdown() {
   }, rest);
 };
 
-var ThemeContext = /*#__PURE__*/createContext({
-  // @ts-expect-error set null
-  theme: null,
-  colorScheme: 'light',
-  platform: 'onDesktop',
-  setColorScheme: function setColorScheme() {
-    return null;
-  }
-});
-
-var useTheme = function useTheme() {
-  var themeContext = useContext(ThemeContext);
-
-  if (!themeContext.theme) {
-    throw new Error("[@razorpay/blade:BladeProvider]: BladeProvider is missing theme");
-  }
-
-  if (themeContext === undefined) {
-    throw new Error("[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider");
-  }
-
-  return themeContext;
-};
-
-function ownKeys$5c(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$5c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5c(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var BladeProvider = function BladeProvider(_ref) {
-  var themeTokens = _ref.themeTokens,
-      initialColorScheme = _ref.colorScheme,
-      children = _ref.children;
-
-  if (!themeTokens) {
-    throw new Error("[BladeProvider]: Expected valid themeTokens of type ThemeTokens to be passed but found ".concat(_typeof(themeTokens)));
-  }
-
-  if (initialColorScheme && !colorSchemeNamesInput.includes(initialColorScheme)) {
-    throw new Error("[BladeProvider]: Expected color scheme to be one of [".concat(colorSchemeNamesInput.toString(), "] but received ").concat(initialColorScheme));
-  }
-
-  var _useColorScheme = useColorScheme(initialColorScheme),
-      colorScheme = _useColorScheme.colorScheme,
-      setColorScheme = _useColorScheme.setColorScheme;
-
-  var _useBreakpoint = useBreakpoint({
-    breakpoints: themeTokens.breakpoints
-  }),
-      matchedDeviceType = _useBreakpoint.matchedDeviceType;
-
-  var onColorMode = "on".concat(toTitleCase(colorScheme));
-  var onDeviceType = "on".concat(toTitleCase(matchedDeviceType));
-
-  var theme = _objectSpread$5c(_objectSpread$5c({}, themeTokens), {}, {
-    colors: themeTokens.colors[onColorMode],
-    shadows: _objectSpread$5c(_objectSpread$5c({}, themeTokens.shadows), {}, {
-      color: themeTokens.shadows.color[onColorMode]
-    }),
-    typography: themeTokens.typography[onDeviceType]
-  });
-
-  var themeContextValue = {
-    theme: theme,
-    colorScheme: colorScheme,
-    setColorScheme: setColorScheme,
-    platform: onDeviceType
-  };
-  return /*#__PURE__*/jsx(ThemeContext.Provider, {
-    value: themeContextValue,
-    children: /*#__PURE__*/jsx(ThemeProvider, {
-      theme: theme,
-      children: children
-    })
-  });
-};
-
 function ownKeys$5b(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$5b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5b(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -16906,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; }
@@ -16985,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"];
 
@@ -17136,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,
@@ -17390,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,
@@ -17421,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;
 
@@ -17439,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),
@@ -17456,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"
@@ -17499,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,
@@ -17625,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; }
 
@@ -17662,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)) {
@@ -17688,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, {
@@ -17699,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; }
 
@@ -17738,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(),
@@ -17830,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, {
@@ -17841,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,
@@ -17852,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) {
@@ -17873,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'
   };
 };
 
@@ -18712,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;
@@ -18792,7 +18875,7 @@ var useInteraction = function useInteraction() {
   };
 };
 
-var _excluded$l = ["children", "icon", "iconPosition", "isDisabled", "onClick", "variant", "href", "target", "rel", "intent", "contrast", "accessibilityLabel", "className", "style", "size", "testID"],
+var _excluded$l = ["children", "icon", "iconPosition", "isDisabled", "onClick", "variant", "href", "target", "rel", "intent", "contrast", "accessibilityLabel", "className", "style", "size", "testID", "hitSlop"],
     _excluded2 = ["currentInteraction", "setCurrentInteraction"];
 
 function ownKeys$z(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; }
@@ -18896,6 +18979,7 @@ var BaseLink = function BaseLink(_ref3) {
       _ref3$size = _ref3.size,
       size = _ref3$size === void 0 ? 'medium' : _ref3$size,
       testID = _ref3.testID,
+      hitSlop = _ref3.hitSlop,
       styledProps = _objectWithoutProperties(_ref3, _excluded$l);
 
   var _useState = useState(false),
@@ -18983,6 +19067,7 @@ var BaseLink = function BaseLink(_ref3) {
     // @ts-ignore Because we avoided exposing className to public
     className: className,
     style: style,
+    hitSlop: hitSlop,
     children: /*#__PURE__*/jsxs(BaseBox, {
       display: "flex",
       flexDirection: "row",
@@ -19129,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,
@@ -19156,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,
@@ -19561,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'
   };
 });
 
@@ -19645,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');
@@ -19657,9 +19743,11 @@ 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"];
+var _excluded$h = ["children", "icon", "iconPosition", "isDisabled", "onClick", "variant", "href", "target", "rel", "accessibilityLabel", "size", "testID", "hitSlop"];
 
 function ownKeys$t(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; }
 
@@ -19682,6 +19770,7 @@ var Link = function Link(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       testID = _ref.testID,
+      hitSlop = _ref.hitSlop,
       styledProps = _objectWithoutProperties(_ref, _excluded$h);
 
   return /*#__PURE__*/jsx(BaseLink, _objectSpread$t(_objectSpread$t(_objectSpread$t({}, icon ? {
@@ -19702,7 +19791,8 @@ var Link = function Link(_ref) {
     onClick: onClick,
     accessibilityLabel: accessibilityLabel,
     size: size,
-    testID: testID
+    testID: testID,
+    hitSlop: hitSlop
   }, styledProps));
 };
 
@@ -19754,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",
@@ -19903,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, {
@@ -19912,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),
@@ -19955,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');
@@ -19978,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,
@@ -20029,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');
 
@@ -20046,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; }
 
@@ -20064,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();
@@ -20089,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');
@@ -20110,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');
@@ -20145,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"];
 
@@ -20179,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,
@@ -20284,7 +20399,9 @@ var Dropdown = function Dropdown(_ref) {
   });
 };
 
-Dropdown.componentId = componentIds.Dropdown;
+var Dropdown = /*#__PURE__*/assignWithoutSideEffects(_Dropdown, {
+  componentId: componentIds.Dropdown
+});
 
 var root = _root;
 
@@ -20695,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;
 
@@ -20762,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,
@@ -20782,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; }
 
@@ -21145,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,
@@ -21237,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}"]);
@@ -22052,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"];
 
@@ -22166,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"];
 
@@ -22316,10 +22441,11 @@ 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", "onOTPFilled", "otpLength", "placeholder", "successText", "validationState", "value", "isMasked", "autoCompleteSuggestionType", "testID"];
+var _excluded$6 = ["autoFocus", "errorText", "helpText", "isDisabled", "keyboardReturnKeyType", "keyboardType", "label", "labelPosition", "name", "onChange", "onFocus", "onBlur", "onOTPFilled", "otpLength", "placeholder", "successText", "validationState", "value", "isMasked", "autoCompleteSuggestionType", "testID"];
 
 function ownKeys$b(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; }
 
@@ -22362,6 +22488,8 @@ var OTPInput = function OTPInput(_ref) {
       labelPosition = _ref.labelPosition,
       name = _ref.name,
       onChange = _ref.onChange,
+      _onFocus = _ref.onFocus,
+      _onBlur = _ref.onBlur,
       onOTPFilled = _ref.onOTPFilled,
       _ref$otpLength = _ref.otpLength,
       otpLength = _ref$otpLength === void 0 ? 6 : _ref$otpLength,
@@ -22602,6 +22730,7 @@ var OTPInput = function OTPInput(_ref) {
           id: "".concat(inputId, "-").concat(index),
           textAlign: "center",
           ref: ref,
+          name: name,
           value: currentValue,
           maxCharacters: ((_otpValue$index = otpValue[index]) === null || _otpValue$index === void 0 ? void 0 : _otpValue$index.length) > 0 ? 1 : undefined,
           onChange: function onChange(formEvent) {
@@ -22609,6 +22738,16 @@ var OTPInput = function OTPInput(_ref) {
               currentOtpIndex: index
             }));
           },
+          onFocus: function onFocus(formEvent) {
+            return _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(_objectSpread$b(_objectSpread$b({}, formEvent), {}, {
+              inputIndex: index
+            }));
+          },
+          onBlur: function onBlur(formEvent) {
+            return _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(_objectSpread$b(_objectSpread$b({}, formEvent), {}, {
+              inputIndex: index
+            }));
+          },
           onInput: function onInput(formEvent) {
             return handleOnInput(_objectSpread$b(_objectSpread$b({}, formEvent), {}, {
               currentOtpIndex: index
@@ -22825,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"];
 
@@ -23107,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,
@@ -23160,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,
@@ -23341,7 +23482,7 @@ var StyledListItem = /*#__PURE__*/styled(ListItemElement).withConfig({
   };
 });
 
-var ListItem = function ListItem(_ref2) {
+var _ListItem = function _ListItem(_ref2) {
   var children = _ref2.children,
       Icon = _ref2.icon,
       _itemNumber = _ref2._itemNumber,
@@ -23433,13 +23574,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,
@@ -23472,9 +23615,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;
 
@@ -23488,7 +23633,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.
@@ -24326,8 +24473,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,