@razorpay/blade 8.15.2 → 9.0.0

package/build/components/index.web.js

@@ -925,6 +925,30 @@ function usePrevious(value) {
   return ref.current;
 }
 
+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;
+};
+
 /* eslint-disable @typescript-eslint/no-empty-function */
 var BottomSheetContext = /*#__PURE__*/React__default.createContext({
   headerHeight: 0,
@@ -3723,30 +3747,6 @@ var getBaseBoxStyles = function getBaseBoxStyles(props) {
   return _objectSpread$5Z(_objectSpread$5Z({}, getAllProps(props)), getAllMediaQueries(props));
 };
 
-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$5Z(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$5Y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5Z(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5Z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -16725,6 +16725,8 @@ var _Checkbox = function _Checkbox(_ref, ref) {
 
   var _isDisabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : groupProps === null || groupProps === void 0 ? void 0 : groupProps.isDisabled;
 
+  var _isRequired = Boolean(isRequired || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.isRequired) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.necessityIndicator) === 'required');
+
   var _name = name !== null && name !== void 0 ? name : groupProps === null || groupProps === void 0 ? void 0 : groupProps.name; // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
 
 
@@ -16766,7 +16768,7 @@ var _Checkbox = function _Checkbox(_ref, ref) {
     hasError: _hasError,
     hasHelperText: Boolean(showSupportingText),
     isDisabled: _isDisabled,
-    isRequired: isRequired,
+    isRequired: _isRequired,
     name: _name,
     value: value,
     onChange: handleChange
@@ -16832,10 +16834,12 @@ var useCheckboxGroup = function useCheckboxGroup(_ref) {
   var value = _ref.value,
       defaultValue = _ref.defaultValue,
       isDisabled = _ref.isDisabled,
+      isRequired = _ref.isRequired,
       labelPosition = _ref.labelPosition,
       _onChange = _ref.onChange,
       validationState = _ref.validationState,
       name = _ref.name,
+      necessityIndicator = _ref.necessityIndicator,
       size = _ref.size;
 
   var _useTheme = useTheme(),
@@ -16914,12 +16918,14 @@ var useCheckboxGroup = function useCheckboxGroup(_ref) {
     return {
       validationState: validationState,
       isDisabled: isDisabled,
+      isRequired: isRequired,
       labelPosition: platform === 'onMobile' ? 'top' : labelPosition,
       name: name,
+      necessityIndicator: necessityIndicator,
       state: state,
       size: size
     };
-  }, [validationState, isDisabled, platform, labelPosition, name, state, size]);
+  }, [validationState, isDisabled, isRequired, platform, labelPosition, name, necessityIndicator, state, size]);
   return {
     state: state,
     contextValue: contextValue,
@@ -16959,7 +16965,7 @@ var SelectorGroupField = function SelectorGroupField(_ref) {
   }));
 };
 
-var _excluded$u = ["children", "label", "helpText", "isDisabled", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
+var _excluded$u = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
 
 function ownKeys$1c(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; }
 
@@ -16969,7 +16975,10 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
   var children = _ref.children,
       label = _ref.label,
       helpText = _ref.helpText,
-      isDisabled = _ref.isDisabled,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
       _ref$necessityIndicat = _ref.necessityIndicator,
       necessityIndicator = _ref$necessityIndicat === void 0 ? 'none' : _ref$necessityIndicat,
       _ref$labelPosition = _ref.labelPosition,
@@ -16990,6 +16999,8 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     onChange: onChange,
     value: value,
     isDisabled: isDisabled,
+    necessityIndicator: necessityIndicator,
+    isRequired: isRequired,
     name: name,
     labelPosition: labelPosition,
     validationState: validationState,
@@ -21965,8 +21976,10 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
       currentInteraction = _useInteraction.currentInteraction,
       setCurrentInteraction = _useInteraction.setCurrentInteraction;
 
+  var _isRequired = isRequired || necessityIndicator === 'required';
+
   var accessibilityProps = makeAccessible({
-    required: Boolean(isRequired),
+    required: Boolean(_isRequired),
     disabled: Boolean(isDisabled),
     invalid: Boolean(validationState === 'error'),
     describedBy: getDescribedByElementId({
@@ -22039,7 +22052,7 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
           placeholder: placeholder,
           isDisabled: isDisabled,
           validationState: validationState,
-          isRequired: isRequired,
+          isRequired: _isRequired,
           handleOnFocus: handleOnFocus,
           handleOnChange: handleOnChange,
           handleOnBlur: handleOnBlur,
@@ -22723,9 +22736,6 @@ var OTPInput = function OTPInput(_ref) {
       errorTextId = _useFormId.errorTextId,
       successTextId = _useFormId.successTextId;
 
-  var _useTheme = useTheme(),
-      platform = _useTheme.platform;
-
   useEffect(function () {
     // Effect for calling `onOTPFilled` callback
     if (inputValue && inputValue.length >= otpLength) {
@@ -22920,7 +22930,6 @@ var OTPInput = function OTPInput(_ref) {
       inputs.push( /*#__PURE__*/jsx(BaseBox, {
         flex: 1,
         marginLeft: index == 0 ? 'spacing.0' : 'spacing.3',
-        maxWidth: platform === 'onDesktop' ? makeSize(size[36]) : makeSize(size[40]),
         children: /*#__PURE__*/jsx(BaseInput // eslint-disable-next-line jsx-a11y/no-autofocus
         , {
           autoFocus: autoFocus && index === 0,
@@ -25011,6 +25020,8 @@ var _Radio = function _Radio(_ref, ref) {
 
   var _isDisabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : groupProps === null || groupProps === void 0 ? void 0 : groupProps.isDisabled;
 
+  var _isRequired = (groupProps === null || groupProps === void 0 ? void 0 : groupProps.isRequired) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.necessityIndicator) === 'required';
+
   var name = groupProps === null || groupProps === void 0 ? void 0 : groupProps.name;
   var showHelpText = !hasError && helpText;
   var isReactNative = getPlatformType() === 'react-native';
@@ -25039,7 +25050,7 @@ var _Radio = function _Radio(_ref, ref) {
     isChecked: isChecked,
     hasError: hasError,
     isDisabled: _isDisabled,
-    isRequired: groupProps.necessityIndicator === 'required',
+    isRequired: _isRequired,
     name: name,
     value: value,
     onChange: handleChange
@@ -25097,6 +25108,7 @@ var useRadioGroup = function useRadioGroup(_ref) {
   var value = _ref.value,
       defaultValue = _ref.defaultValue,
       isDisabled = _ref.isDisabled,
+      isRequired = _ref.isRequired,
       labelPosition = _ref.labelPosition,
       _onChange = _ref.onChange,
       validationState = _ref.validationState,
@@ -25165,12 +25177,13 @@ var useRadioGroup = function useRadioGroup(_ref) {
       necessityIndicator: necessityIndicator,
       validationState: validationState,
       isDisabled: isDisabled,
+      isRequired: isRequired,
       labelPosition: platform === 'onMobile' ? 'top' : labelPosition,
       name: fallbackName,
       state: state,
       size: size
     };
-  }, [validationState, isDisabled, platform, labelPosition, state, fallbackName, necessityIndicator, size]);
+  }, [validationState, isDisabled, isRequired, platform, labelPosition, state, fallbackName, necessityIndicator, size]);
   return {
     state: state,
     contextValue: contextValue,
@@ -25180,7 +25193,7 @@ var useRadioGroup = function useRadioGroup(_ref) {
   };
 };
 
-var _excluded$4 = ["children", "label", "helpText", "isDisabled", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
+var _excluded$4 = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
 
 function ownKeys$r(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; }
 
@@ -25192,6 +25205,8 @@ var RadioGroup = function RadioGroup(_ref) {
       helpText = _ref.helpText,
       _ref$isDisabled = _ref.isDisabled,
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
       _ref$necessityIndicat = _ref.necessityIndicator,
       necessityIndicator = _ref$necessityIndicat === void 0 ? 'none' : _ref$necessityIndicat,
       _ref$labelPosition = _ref.labelPosition,
@@ -25211,8 +25226,10 @@ var RadioGroup = function RadioGroup(_ref) {
   var _useRadioGroup = useRadioGroup({
     defaultValue: defaultValue,
     isDisabled: isDisabled,
+    isRequired: isRequired,
     labelPosition: labelPosition,
     name: name,
+    necessityIndicator: necessityIndicator,
     onChange: onChange,
     validationState: validationState,
     value: value,
@@ -28127,8 +28144,8 @@ function useWindowSize() {
   // Initialize state with undefined width/height so server and client renders match
   // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
   var _React$useState = React__default.useState({
-    width: window.innerWidth,
-    height: window.innerHeight
+    width: 0,
+    height: 0
   }),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       windowSize = _React$useState2[0],