@razorpay/blade 10.11.0 → 10.12.1

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),
@@ -15184,18 +15194,18 @@ var _Checkbox = function _Checkbox(_ref, ref) {
             isIndeterminate: isIndeterminate,
             isDisabled: _isDisabled,
             isNegative: _hasError
-          }), /*#__PURE__*/jsx(SelectorTitle, {
+          }), children ? /*#__PURE__*/jsx(SelectorTitle, {
             size: _size,
             isDisabled: _isDisabled,
             children: children
-          })]
-        }), /*#__PURE__*/jsx(BaseBox, {
+          }) : null]
+        }), showSupportingText ? /*#__PURE__*/jsx(BaseBox, {
           marginLeft: isSmall ? 'spacing.6' : 'spacing.7',
-          children: showSupportingText && /*#__PURE__*/jsx(SelectorSupportText, {
+          children: /*#__PURE__*/jsx(SelectorSupportText, {
             id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
             children: helpText
           })
-        })]
+        }) : null]
       })
     }), /*#__PURE__*/jsx(FormHint, {
       errorText: errorText,
@@ -15390,14 +15400,14 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
         labelledBy: ids.labelId,
         componentName: "checkbox-group",
         testID: testID,
-        children: [/*#__PURE__*/jsx(FormLabel, {
+        children: [label ? /*#__PURE__*/jsx(FormLabel, {
           as: "span",
           necessityIndicator: necessityIndicator,
           position: labelPosition,
           id: ids.labelId,
           accessibilityText: accessibilityText,
           children: label
-        }), /*#__PURE__*/jsxs(BaseBox, {
+        }) : null, /*#__PURE__*/jsxs(BaseBox, {
           children: [/*#__PURE__*/jsx(BaseBox, {
             display: "flex",
             flexDirection: "column",
@@ -17552,11 +17562,12 @@ var Card = function Card(_ref) {
   return /*#__PURE__*/jsx(CardProvider, {
     children: /*#__PURE__*/jsx(CardRoot, _objectSpread$1h(_objectSpread$1h(_objectSpread$1h({
       as: as,
+      display: 'block',
+      borderRadius: "medium",
       onMouseEnter: onHover,
       shouldScaleOnHover: shouldScaleOnHover,
       isSelected: isSelected,
-      isFocused: isFocused,
-      borderRadius: "medium"
+      isFocused: isFocused
       // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN
       ,
       onClick: isReactNative$4() ? onClick : undefined,
@@ -22660,7 +22671,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 +22713,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 +22980,7 @@ var OTPInput = function OTPInput(_ref) {
     })]
   }));
 };
+var OTPInput = /*#__PURE__*/React__default.forwardRef(_OTPInput);
 
 var InputChevronIcon = function InputChevronIcon(props) {
   return /*#__PURE__*/jsxs(BaseBox, {
@@ -25421,14 +25438,14 @@ var _Radio = function _Radio(_ref, ref) {
             isChecked: state.isChecked,
             isDisabled: _isDisabled,
             isNegative: hasError
-          }), /*#__PURE__*/jsx(SelectorTitle, {
+          }), children ? /*#__PURE__*/jsx(SelectorTitle, {
             size: _size,
             isDisabled: _isDisabled,
             children: children
-          })]
-        }), /*#__PURE__*/jsx(BaseBox, {
+          }) : null]
+        }), showHelpText && /*#__PURE__*/jsx(BaseBox, {
           marginLeft: isSmall ? 'spacing.6' : 'spacing.7',
-          children: showHelpText && /*#__PURE__*/jsx(SelectorSupportText, {
+          children: /*#__PURE__*/jsx(SelectorSupportText, {
             id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
             children: helpText
           })
@@ -25582,14 +25599,14 @@ var RadioGroup = function RadioGroup(_ref) {
         accessibilityRole: "radiogroup",
         componentName: "radio-group",
         testID: testID,
-        children: [/*#__PURE__*/jsx(FormLabel, {
+        children: [label ? /*#__PURE__*/jsx(FormLabel, {
           as: "span",
           necessityIndicator: necessityIndicator,
           position: labelPosition,
           id: ids.labelId,
           accessibilityText: accessibilityText && ",".concat(accessibilityText),
           children: label
-        }), /*#__PURE__*/jsxs(BaseBox, {
+        }) : null, /*#__PURE__*/jsxs(BaseBox, {
           children: [/*#__PURE__*/jsx(BaseBox, {
             display: "flex",
             flexDirection: "column",