@razorpay/blade 10.11.0 → 10.12.0

package/build/components/index.production.web.js

@@ -1,6 +1,6 @@
 import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import * as React from 'react';
-import React__default, { useMemo, useCallback, useState, useEffect, useRef, useContext, createContext, Fragment as Fragment$1, Children, cloneElement, forwardRef } from 'react';
+import React__default, { useMemo, useCallback, useState, useEffect, useRef, useContext, createContext, Fragment as Fragment$1, useImperativeHandle, Children, cloneElement, forwardRef } from 'react';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import styled, { ThemeProvider, css, keyframes } from 'styled-components';
 import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
@@ -2844,8 +2844,12 @@ var getElevationValue = function getElevationValue(elevation, theme, breakpoint)
 };
 var getAllProps = function getAllProps(props, breakpoint) {
   var _props$paddingTop, _props$paddingBottom, _props$paddingRight, _props$paddingLeft, _props$marginBottom, _props$marginTop, _props$marginRight, _props$marginLeft;
-  var hasBorder = props.borderBottom || props.borderTop || props.borderLeft || props.borderRight || props.borderBottomColor || props.borderTopColor || props.borderLeftColor || props.borderRightColor || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth || props.borderWidth || props.borderColor;
-  return _objectSpread$6h({
+  var hasBorder = props.borderWidth || props.borderColor;
+  var hasBorderRight = props.borderRight || props.borderRightColor || props.borderRightWidth;
+  var hasBorderLeft = props.borderLeft || props.borderLeftColor || props.borderLeftWidth;
+  var hasBorderTop = props.borderTop || props.borderTopColor || props.borderTopWidth;
+  var hasBorderBottom = props.borderBottom || props.borderBottomColor || props.borderBottomWidth;
+  return _objectSpread$6h(_objectSpread$6h({
     display: getResponsiveValue(props.display, breakpoint),
     overflow: getResponsiveValue(props.overflow, breakpoint),
     overflowX: getResponsiveValue(props.overflowX, breakpoint),
@@ -2936,7 +2940,13 @@ var getAllProps = function getAllProps(props, breakpoint) {
     borderTopRightRadius: getBorderRadiusValue(props.borderTopRightRadius, props.theme, breakpoint),
     borderBottomRightRadius: getBorderRadiusValue(props.borderBottomRightRadius, props.theme, breakpoint),
     borderBottomLeftRadius: getBorderRadiusValue(props.borderBottomLeftRadius, props.theme, breakpoint),
-    borderStyle: hasBorder ? 'solid' : undefined,
+    borderStyle: hasBorder ? 'solid' : undefined
+  }, !hasBorder && {
+    borderTopStyle: hasBorderTop ? 'solid' : undefined,
+    borderBottomStyle: hasBorderBottom ? 'solid' : undefined,
+    borderLeftStyle: hasBorderLeft ? 'solid' : undefined,
+    borderRightStyle: hasBorderRight ? 'solid' : undefined
+  }), {}, {
     touchAction: getResponsiveValue(props.touchAction, breakpoint),
     userSelect: getResponsiveValue(props.userSelect, breakpoint),
     pointerEvents: getResponsiveValue(props.pointerEvents),
@@ -22660,7 +22670,7 @@ var otpToArray = function otpToArray(code) {
  *   />
  * ```
  */
-var OTPInput = function OTPInput(_ref) {
+var _OTPInput = function _OTPInput(_ref, incomingRef) {
   var autoFocus = _ref.autoFocus,
     errorText = _ref.errorText,
     helpText = _ref.helpText,
@@ -22702,6 +22712,11 @@ var OTPInput = function OTPInput(_ref) {
     helpTextId = _useFormId.helpTextId,
     errorTextId = _useFormId.errorTextId,
     successTextId = _useFormId.successTextId;
+  useImperativeHandle(incomingRef, function () {
+    return inputRefs.map(function (ref) {
+      return ref.current;
+    });
+  }, [inputRefs]);
   useEffect(function () {
     // Effect for calling `onOTPFilled` callback
     if (inputValue && inputValue.length >= otpLength) {
@@ -22964,6 +22979,7 @@ var OTPInput = function OTPInput(_ref) {
     })]
   }));
 };
+var OTPInput = /*#__PURE__*/React__default.forwardRef(_OTPInput);
 
 var InputChevronIcon = function InputChevronIcon(props) {
   return /*#__PURE__*/jsxs(BaseBox, {