@razorpay/blade 10.12.0 → 10.13.0

package/build/components/index.d.ts

@@ -3713,7 +3713,7 @@ declare type CheckboxProps = {
     /**
      * Sets the label of the checkbox
      */
-    children: React__default.ReactNode;
+    children?: React__default.ReactNode;
     /**
      * Help text for the checkbox
      */
@@ -3792,7 +3792,7 @@ declare const Checkbox: React__default.ForwardRefExoticComponent<{
     /**
      * Sets the label of the checkbox
      */
-    children: React__default.ReactNode;
+    children?: React__default.ReactNode;
     /**
      * Help text for the checkbox
      */
@@ -4185,7 +4185,7 @@ declare type CheckboxGroupProps = {
     /**
      * Renders the label of the checkbox group
      */
-    label: string;
+    label?: string;
     /**
      * Sets the position of the label
      *
@@ -5843,7 +5843,7 @@ declare type RadioProps = {
     /**
      * Sets the label text of the Radio
      */
-    children: StringChildrenType;
+    children?: StringChildrenType;
     /**
      * Help text for the Radio
      */
@@ -5870,7 +5870,7 @@ declare const Radio: React__default.ForwardRefExoticComponent<{
     /**
      * Sets the label text of the Radio
      */
-    children: StringChildrenType;
+    children?: StringChildrenType | undefined;
     /**
      * Help text for the Radio
      */
@@ -6228,7 +6228,7 @@ declare type RadioGroupProps = {
     /**
      * Renders the label of the radio group
      */
-    label: string;
+    label?: string;
     /**
      * Sets the position of the label
      *

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

@@ -3077,7 +3077,7 @@ function _objectSpread$6g(target) { for (var i = 1; i < arguments.length; i++) {
 /**
  * Reusable hook to be used in BladeProvider.native & BladeProvider.web file
  *
- * This hook proccesses incoming themeTokens & initialColorScheme
+ * This hook processes incoming themeTokens & initialColorScheme
  * And validates & returns the theme values
  */
 var useBladeProvider = function useBladeProvider(_ref) {
@@ -14583,7 +14583,7 @@ var CheckedIcon$1 = function CheckedIcon(_ref) {
       clipRule: "evenodd",
       d: "M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z",
       fill: color,
-      stroke: "white",
+      stroke: color,
       strokeWidth: "0.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
@@ -14605,7 +14605,7 @@ var IndeterminateIcon = function IndeterminateIcon(_ref2) {
       clipRule: "evenodd",
       d: "M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z",
       fill: color,
-      stroke: "white",
+      stroke: color,
       strokeWidth: "0.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
@@ -15424,18 +15424,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,
@@ -15630,14 +15630,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",
@@ -17848,11 +17848,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,
@@ -19732,14 +19733,14 @@ var chipColorTokens = {
   text: {
     unchecked: 'surface.text.subtle.lowContrast',
     disabled: 'surface.text.placeholder.lowContrast',
-    none: 'brand.primary.500',
+    none: 'action.text.secondary.default',
     positive: 'feedback.text.positive.lowContrast',
     negative: 'feedback.text.negative.lowContrast'
   },
   icon: {
     unchecked: 'surface.text.subtle.lowContrast',
     disabled: 'surface.text.placeholder.lowContrast',
-    none: 'brand.primary.500',
+    none: 'action.icon.secondary.default',
     positive: 'feedback.icon.positive.lowContrast',
     negative: 'feedback.icon.negative.lowContrast'
   },
@@ -25885,14 +25886,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
           })
@@ -26046,14 +26047,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",