@razorpay/blade 6.5.2 → 6.6.0

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';
 
@@ -4204,15 +4204,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 +4301,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 +4322,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 +4345,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 +4436,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 +4743,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 +5001,7 @@ var useDropdown = function useDropdown() {
     }
   };
 
-  return _objectSpread$5d({
+  return _objectSpread$5c({
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     selectedIndices: selectedIndices,
@@ -4941,82 +5023,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; }
@@ -18792,7 +18798,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 +18902,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 +18990,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",
@@ -19659,7 +19667,7 @@ var CardBody = function CardBody(_ref2) {
 
 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 +19690,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 +19711,8 @@ var Link = function Link(_ref) {
     onClick: onClick,
     accessibilityLabel: accessibilityLabel,
     size: size,
-    testID: testID
+    testID: testID,
+    hitSlop: hitSlop
   }, styledProps));
 };
 
@@ -22319,7 +22329,7 @@ var _TextArea = function _TextArea(_ref, ref) {
 var TextArea = /*#__PURE__*/React__default.forwardRef(_TextArea);
 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 +22372,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 +22614,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 +22622,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