@razorpay/blade 3.4.0 → 3.5.0

package/build/components/index.web.js

@@ -4426,6 +4426,33 @@ var InfoIcon = function InfoIcon(_ref) {
   });
 };
 
+var LinkIcon = function LinkIcon(_ref) {
+  var size = _ref.size,
+      color = _ref.color;
+
+  var _useIconProps = useIconProps({
+    size: size,
+    color: color
+  }),
+      height = _useIconProps.height,
+      width = _useIconProps.width,
+      iconColor = _useIconProps.iconColor;
+
+  return /*#__PURE__*/jsxs(Svg, {
+    height: height,
+    width: width,
+    viewBox: "0 0 22 22",
+    fill: "none",
+    children: [/*#__PURE__*/jsx(Path, {
+      d: "M20.1863 1.82377C17.8719 -0.490636 14.1296 -0.523155 11.7753 1.75068L11.765 1.7608L10.045 3.4708C9.65336 3.86019 9.65151 4.49335 10.0409 4.88501C10.4303 5.27667 11.0634 5.27852 11.4551 4.88913L13.1697 3.18451C14.7395 1.67341 17.2307 1.69666 18.772 3.23798C20.313 4.77898 20.3366 7.26948 18.8265 8.83934L15.833 11.8329C15.0124 12.6537 13.8758 13.0778 12.7181 12.9949C11.5605 12.9119 10.496 12.3303 9.80083 11.401C9.47002 10.9587 8.84333 10.8684 8.40108 11.1992C7.95883 11.53 7.86849 12.1567 8.1993 12.5989C9.24204 13.993 10.8388 14.8654 12.5753 14.9897C14.3117 15.1141 16.0165 14.4782 17.2473 13.2469L20.2472 10.2471L20.2593 10.2347C22.5332 7.8804 22.5007 4.13817 20.1863 1.82377Z",
+      fill: iconColor
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M9.42474 7.01016C7.68837 6.8858 5.9836 7.52171 4.75285 8.75283L1.75285 11.7528L1.74067 11.7652C-0.533165 14.1195 -0.500646 17.8617 1.81376 20.1761C4.12816 22.4905 7.8704 22.5231 10.2247 20.2492L10.2371 20.237L11.9471 18.527C12.3376 18.1365 12.3376 17.5034 11.9471 17.1128C11.5565 16.7223 10.9234 16.7223 10.5329 17.1128L8.82933 18.8164C7.25947 20.3265 4.76897 20.3029 3.22797 18.7619C1.68697 17.2209 1.66341 14.7304 3.17354 13.1606L6.16719 10.1669C6.9877 9.34611 8.12425 8.92214 9.28187 9.00505C10.4395 9.08796 11.504 9.66956 12.1992 10.5989C12.53 11.0412 13.1567 11.1315 13.5989 10.8007C14.0412 10.4699 14.1315 9.84321 13.8007 9.40096C12.758 8.00693 11.1612 7.13452 9.42474 7.01016Z",
+      fill: iconColor
+    })]
+  });
+};
+
 var PauseIcon = function PauseIcon(_ref) {
   var size = _ref.size,
       color = _ref.color;
@@ -6866,35 +6893,61 @@ var useCheckboxGroupContext = function useCheckboxGroupContext() {
   return context;
 };
 
-var variants$3 = {
-  "default": {
-    border: {
-      checked: 'colors.brand.primary.500',
-      unchecked: 'colors.brand.gray.400'
-    },
-    background: {
-      checked: 'colors.brand.primary.500',
-      unchecked: 'colors.brand.gray.200'
+var checkboxSizes = {
+  group: {
+    gap: {
+      small: {
+        mobile: 'spacing.2',
+        desktop: 'spacing.0'
+      },
+      medium: {
+        mobile: 'spacing.3',
+        desktop: 'spacing.2'
+      }
     }
   },
-  disabled: {
-    border: {
-      checked: 'colors.brand.gray.300',
-      unchecked: 'colors.brand.gray.300'
+  icon: {
+    small: {
+      width: 12,
+      height: 12
     },
-    background: {
-      checked: 'colors.brand.gray.300',
-      unchecked: 'colors.brand.gray.300'
+    medium: {
+      width: 16,
+      height: 16
     }
-  },
-  negative: {
-    border: {
-      checked: 'colors.feedback.border.negative.highContrast',
-      unchecked: 'colors.feedback.border.negative.highContrast'
+  }
+};
+var checkboxIconColors = {
+  variants: {
+    "default": {
+      border: {
+        checked: 'colors.brand.primary.500',
+        unchecked: 'colors.brand.gray.500'
+      },
+      background: {
+        checked: 'colors.brand.primary.500',
+        unchecked: 'transparent'
+      }
     },
-    background: {
-      checked: 'colors.feedback.background.negative.highContrast',
-      unchecked: 'colors.feedback.background.negative.lowContrast'
+    disabled: {
+      border: {
+        checked: 'transparent',
+        unchecked: 'colors.brand.gray.a100'
+      },
+      background: {
+        checked: 'colors.brand.gray.a100',
+        unchecked: 'transparent'
+      }
+    },
+    negative: {
+      border: {
+        checked: 'colors.feedback.border.negative.highContrast',
+        unchecked: 'colors.feedback.border.negative.highContrast'
+      },
+      background: {
+        checked: 'colors.feedback.background.negative.highContrast',
+        unchecked: 'colors.feedback.background.negative.lowContrast'
+      }
     }
   }
 };
@@ -6903,26 +6956,28 @@ var getCheckboxIconWrapperStyles = function getCheckboxIconWrapperStyles(_ref) {
   var theme = _ref.theme,
       isChecked = _ref.isChecked,
       isDisabled = _ref.isDisabled,
-      isNegative = _ref.isNegative;
+      isNegative = _ref.isNegative,
+      size = _ref.size;
   var variant = 'default';
   if (isDisabled) variant = 'disabled';
   if (isNegative) variant = 'negative';
   var checked = isChecked ? 'checked' : 'unchecked';
-  var backgroundColor = variants$3[variant].background[checked];
-  var borderColor = variants$3[variant].border[checked];
+  var background = checkboxIconColors.variants[variant].background[checked];
+  var border = checkboxIconColors.variants[variant].border[checked];
+  var backgroundColor = background === 'transparent' ? background : get_1(theme, background);
+  var borderColor = border === 'transparent' ? border : get_1(theme, border);
   return {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '16px',
-    height: '16px',
-    borderWidth: makeBorderSize(theme.border.width.thin),
+    width: makeSpace(checkboxSizes.icon[size].width),
+    height: makeSpace(checkboxSizes.icon[size].height),
+    borderWidth: makeBorderSize(theme.border.width.thick),
     borderStyle: 'solid',
-    margin: makeSpace(theme.spacing[0]),
+    margin: makeSpace(theme.spacing[1]),
     borderRadius: makeSize(theme.border.radius.small),
-    marginRight: makeSpace(theme.spacing[3]),
-    backgroundColor: get_1(theme, backgroundColor),
-    borderColor: get_1(theme, borderColor)
+    backgroundColor: backgroundColor,
+    borderColor: borderColor
   };
 };
 
@@ -6969,35 +7024,59 @@ var Fade$1 = function Fade(_ref2) {
 };
 
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+var svgSize = {
+  small: {
+    width: 8,
+    height: 8
+  },
+  medium: {
+    width: 12,
+    height: 12
+  }
+};
 
 var CheckedIcon$1 = function CheckedIcon(_ref) {
-  var color = _ref.color;
+  var color = _ref.color,
+      size = _ref.size;
+  var width = makeSpace(svgSize[size].width);
+  var height = makeSpace(svgSize[size].height);
   return /*#__PURE__*/jsx(Svg, {
-    width: "16px",
-    height: "16px",
-    viewBox: "0 0 16 16",
+    width: width,
+    height: height,
+    viewBox: "0 0 8 8",
     fill: "none",
     children: /*#__PURE__*/jsx(Path, {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M12.3536 4.64645C12.5488 4.84171 12.5488 5.15829 12.3536 5.35355L6.85355 10.8536C6.65829 11.0488 6.34171 11.0488 6.14645 10.8536L3.64645 8.35355C3.45118 8.15829 3.45118 7.84171 3.64645 7.64645C3.84171 7.45118 4.15829 7.45118 4.35355 7.64645L6.5 9.79289L11.6464 4.64645C11.8417 4.45118 12.1583 4.45118 12.3536 4.64645Z",
-      fill: color
+      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",
+      strokeWidth: "0.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     })
   });
 };
 
 var IndeterminateIcon = function IndeterminateIcon(_ref2) {
-  var color = _ref2.color;
+  var color = _ref2.color,
+      size = _ref2.size;
+  var width = "".concat(svgSize[size].width, "px");
+  var height = "".concat(svgSize[size].height, "px");
   return /*#__PURE__*/jsx(Svg, {
-    width: "16px",
-    height: "16px",
-    viewBox: "0 0 16 16",
+    width: width,
+    height: height,
+    viewBox: "0 0 8 8",
     fill: "none",
     children: /*#__PURE__*/jsx(Path, {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8Z",
-      fill: color
+      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",
+      strokeWidth: "0.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     })
   });
 };
@@ -7006,7 +7085,8 @@ var CheckboxIcon = function CheckboxIcon(_ref3) {
   var isChecked = _ref3.isChecked,
       isIndeterminate = _ref3.isIndeterminate,
       isDisabled = _ref3.isDisabled,
-      isNegative = _ref3.isNegative;
+      isNegative = _ref3.isNegative,
+      size = _ref3.size;
 
   var _useTheme = useTheme(),
       theme = _useTheme.theme;
@@ -7015,6 +7095,7 @@ var CheckboxIcon = function CheckboxIcon(_ref3) {
   var disabledIconColor = get_1(theme, 'colors.brand.gray.500');
   var iconColor = isDisabled ? disabledIconColor : defaultIconColor;
   return /*#__PURE__*/jsxs(CheckboxIconWrapper, {
+    size: size,
     isIndeterminate: isIndeterminate,
     isDisabled: isDisabled,
     isNegative: isNegative,
@@ -7026,6 +7107,7 @@ var CheckboxIcon = function CheckboxIcon(_ref3) {
         display: 'flex'
       },
       children: /*#__PURE__*/jsx(IndeterminateIcon, {
+        size: size,
         color: iconColor
       })
     }), /*#__PURE__*/jsx(Fade$1, {
@@ -7035,6 +7117,7 @@ var CheckboxIcon = function CheckboxIcon(_ref3) {
         display: 'flex'
       },
       children: isChecked ? /*#__PURE__*/jsx(CheckedIcon$1, {
+        size: size,
         color: iconColor
       }) : null
     })]
@@ -7486,15 +7569,17 @@ var FormLabel = function FormLabel(_ref) {
 var StyledSelectorLabel = /*#__PURE__*/styled.label.withConfig({
   displayName: "SelectorLabelweb__StyledSelectorLabel",
   componentId: "sc-1yoi09a-0"
-})({
-  display: 'flex',
-  // TODO: We don't have 2px spacing token
-  marginTop: makeSpace(2),
-  marginBottom: makeSpace(2)
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: 'flex',
+    marginTop: makeSpace(theme.spacing[1]),
+    marginBottom: makeSpace(theme.spacing[1])
+  };
 });
 
-var SelectorLabel = function SelectorLabel(_ref) {
-  var children = _ref.children;
+var SelectorLabel = function SelectorLabel(_ref2) {
+  var children = _ref2.children;
   return /*#__PURE__*/jsx(StyledSelectorLabel, {
     children: children
   });
@@ -7502,14 +7587,28 @@ var SelectorLabel = function SelectorLabel(_ref) {
 
 var SelectorTitle = function SelectorTitle(_ref) {
   var children = _ref.children,
-      isDisabled = _ref.isDisabled;
-  return /*#__PURE__*/jsx(BaseText, {
-    lineHeight: "l",
-    fontFamily: "text",
-    fontWeight: "regular",
-    color: isDisabled ? 'surface.text.placeholder.lowContrast' : 'surface.text.subtle.lowContrast',
-    fontSize: 100,
-    children: children
+      isDisabled = _ref.isDisabled,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size;
+  var lineHeight = {
+    small: 's',
+    medium: 'l'
+  };
+  var fontSize = {
+    small: 75,
+    medium: 100
+  };
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(Box, {
+      marginLeft: "spacing.2"
+    }), /*#__PURE__*/jsx(BaseText, {
+      lineHeight: lineHeight[size],
+      fontFamily: "text",
+      fontWeight: "regular",
+      fontSize: fontSize[size],
+      color: isDisabled ? 'surface.text.placeholder.lowContrast' : 'surface.text.subtle.lowContrast',
+      children: children
+    })]
   });
 };
 
@@ -7532,11 +7631,15 @@ var SelectorSupportText = function SelectorSupportText(_ref) {
 function ownKeys$c(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$c(Object(source), !0)).call(_context, function (key) { _defineProperty$1(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$c(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-var variants$2 = {
+var variants = {
   "default": {
     background: {
       checked: 'colors.brand.primary.600',
-      unchecked: 'colors.brand.gray.400'
+      unchecked: 'colors.brand.gray.a50'
+    },
+    border: {
+      checked: 'colors.brand.primary.600',
+      unchecked: 'colors.brand.gray.500'
     }
   }
 };
@@ -7548,9 +7651,10 @@ var getHoverStyles = function getHoverStyles(_ref) {
       isChecked = _ref.isChecked;
   if (isDisabled || isNegative) return {};
   var checked = isChecked ? 'checked' : 'unchecked';
-  var backgroundColor = variants$2["default"].background[checked];
+  var backgroundColor = variants["default"].background[checked];
+  var borderColor = variants["default"].border[checked];
   return {
-    borderColor: get_1(theme, backgroundColor),
+    borderColor: get_1(theme, borderColor),
     backgroundColor: get_1(theme, backgroundColor),
     transitionTimingFunction: theme.motion.easing.standard.effective,
     transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick']))
@@ -7593,7 +7697,7 @@ var SelectorInput = function SelectorInput(_ref3) {
 };
 
 var Checkbox = function Checkbox(_ref) {
-  var _groupProps$state;
+  var _groupProps$state, _groupProps$size;
 
   var defaultChecked = _ref.defaultChecked,
       validationState = _ref.validationState,
@@ -7606,7 +7710,9 @@ var Checkbox = function Checkbox(_ref) {
       value = _ref.value,
       children = _ref.children,
       helpText = _ref.helpText,
-      errorText = _ref.errorText;
+      errorText = _ref.errorText,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size;
   var groupProps = useCheckboxGroupContext(); // ban certain props in checkbox while inside group
 
   var hasValidationState = !isUndefined_1(validationState);
@@ -7636,9 +7742,12 @@ var Checkbox = function Checkbox(_ref) {
 
   var _name = name !== null && name !== void 0 ? name : groupProps === null || groupProps === void 0 ? void 0 : groupProps.name;
 
-  var _isChecked = isChecked !== null && isChecked !== void 0 ? isChecked : groupProps === null || groupProps === void 0 ? void 0 : (_groupProps$state = groupProps.state) === null || _groupProps$state === void 0 ? void 0 : _groupProps$state.isChecked(value); // only show error when the self validation is set to error
-  // Since we don't want to show errorText inside the group
+  var _isChecked = isChecked !== null && isChecked !== void 0 ? isChecked : groupProps === null || groupProps === void 0 ? void 0 : (_groupProps$state = groupProps.state) === null || _groupProps$state === void 0 ? void 0 : _groupProps$state.isChecked(value);
+
+  var _size = (_groupProps$size = groupProps.size) !== null && _groupProps$size !== void 0 ? _groupProps$size : size;
 
+  var isSmall = _size === 'small'; // only show error when the self validation is set to error
+  // Since we don't want to show errorText inside the group
 
   var showSupportingText = validationState !== 'error' && helpText;
 
@@ -7696,16 +7805,18 @@ var Checkbox = function Checkbox(_ref) {
             isNegative: _hasError,
             inputProps: inputProps
           }), /*#__PURE__*/jsx(CheckboxIcon, {
+            size: _size,
             isChecked: state.isChecked,
             isIndeterminate: isIndeterminate,
             isDisabled: _isDisabled,
             isNegative: _hasError
           }), /*#__PURE__*/jsx(SelectorTitle, {
+            size: _size,
             isDisabled: _isDisabled,
             children: children
           })]
         }), /*#__PURE__*/jsx(Box, {
-          marginLeft: "spacing.7",
+          marginLeft: isSmall ? 'spacing.6' : 'spacing.7',
           children: showSupportingText && /*#__PURE__*/jsx(SelectorSupportText, {
             id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
             children: helpText
@@ -7727,7 +7838,8 @@ var useCheckboxGroup = function useCheckboxGroup(_ref) {
       labelPosition = _ref.labelPosition,
       _onChange = _ref.onChange,
       validationState = _ref.validationState,
-      name = _ref.name;
+      name = _ref.name,
+      size = _ref.size;
 
   var _useTheme = useTheme(),
       platform = _useTheme.platform;
@@ -7806,9 +7918,10 @@ var useCheckboxGroup = function useCheckboxGroup(_ref) {
       isDisabled: isDisabled,
       labelPosition: platform === 'onMobile' ? 'top' : labelPosition,
       name: name,
-      state: state
+      state: state,
+      size: size
     };
-  }, [validationState, isDisabled, platform, labelPosition, name, state]);
+  }, [validationState, isDisabled, platform, labelPosition, name, state, size]);
   return {
     state: state,
     contextValue: contextValue,
@@ -7844,7 +7957,7 @@ var SelectorGroupField = function SelectorGroupField(_ref) {
 };
 
 var CheckboxGroup = function CheckboxGroup(_ref) {
-  var _context;
+  var _context, _context2;
 
   var children = _ref.children,
       label = _ref.label,
@@ -7859,7 +7972,9 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       name = _ref.name,
       defaultValue = _ref.defaultValue,
       onChange = _ref.onChange,
-      value = _ref.value;
+      value = _ref.value,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size;
 
   var _useCheckboxGroup = useCheckboxGroup({
     defaultValue: defaultValue,
@@ -7868,16 +7983,27 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     isDisabled: isDisabled,
     name: name,
     labelPosition: labelPosition,
-    validationState: validationState
+    validationState: validationState,
+    size: size
   }),
       contextValue = _useCheckboxGroup.contextValue,
       ids = _useCheckboxGroup.ids;
 
+  var _useTheme = useTheme(),
+      theme = _useTheme.theme;
+
   var showError = validationState === 'error' && errorText;
   var showHelpText = !showError && helpText;
 
   var accessibilityText = _concatInstanceProperty(_context = ",".concat(showError ? errorText : '', " ")).call(_context, showHelpText ? helpText : '');
 
+  var _useBreakpoint = useBreakpoint({
+    breakpoints: theme.breakpoints
+  }),
+      matchedDeviceType = _useBreakpoint.matchedDeviceType;
+
+  var gap = checkboxSizes.group.gap[size][matchedDeviceType];
+  var childCount = React__default.Children.count(children);
   return /*#__PURE__*/jsx(CheckboxGroupProvider, {
     value: contextValue,
     children: /*#__PURE__*/jsxs(SelectorGroupField, {
@@ -7894,8 +8020,12 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
         children: [/*#__PURE__*/jsx(Box, {
           display: "flex",
           flexDirection: "column",
-          gap: 2,
-          children: children
+          children: _mapInstanceProperty(_context2 = React__default.Children).call(_context2, children, function (child, index) {
+            return /*#__PURE__*/jsx(Box, {
+              marginBottom: index === childCount - 1 ? 0 : gap,
+              children: child
+            }, index);
+          })
         }), /*#__PURE__*/jsx(FormHint, {
           errorText: errorText,
           helpText: helpText,
@@ -9669,67 +9799,110 @@ var useRadio = function useRadio(_ref) {
   };
 };
 
-function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty$1(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-var variants$1 = {
-  "default": {
-    border: {
-      checked: 'colors.brand.primary.500',
-      unchecked: 'colors.brand.gray.400'
-    },
-    background: {
-      checked: 'colors.brand.primary.500',
-      unchecked: 'colors.brand.gray.200'
+var radioSizes = {
+  group: {
+    gap: {
+      small: {
+        mobile: 'spacing.2',
+        desktop: 'spacing.0'
+      },
+      medium: {
+        mobile: 'spacing.3',
+        desktop: 'spacing.2'
+      }
     }
   },
-  disabled: {
-    border: {
-      checked: 'colors.brand.gray.300',
-      unchecked: 'colors.brand.gray.300'
+  icon: {
+    small: {
+      width: 12,
+      height: 12,
+      dotRadius: 2
     },
-    background: {
-      checked: 'colors.brand.gray.300',
-      unchecked: 'colors.brand.gray.300'
+    medium: {
+      width: 16,
+      height: 16,
+      dotRadius: 3
     }
-  },
-  negative: {
-    border: {
-      checked: 'colors.feedback.border.negative.highContrast',
-      unchecked: 'colors.feedback.border.negative.highContrast'
+  }
+};
+var radioIconColors = {
+  variants: {
+    "default": {
+      dot: {
+        checked: 'colors.brand.gray.200',
+        unchecked: 'colors.brand.gray.200'
+      },
+      border: {
+        checked: 'colors.brand.primary.500',
+        unchecked: 'colors.brand.gray.500'
+      },
+      background: {
+        checked: 'colors.brand.primary.500',
+        unchecked: 'transparent'
+      }
     },
-    background: {
-      checked: 'colors.feedback.background.negative.lowContrast',
-      unchecked: 'colors.feedback.background.negative.lowContrast'
+    disabled: {
+      dot: {
+        checked: 'colors.brand.gray.200',
+        unchecked: 'colors.brand.gray.200'
+      },
+      border: {
+        checked: 'transparent',
+        unchecked: 'colors.brand.gray.a100'
+      },
+      background: {
+        checked: 'colors.brand.gray.a100',
+        unchecked: 'transparent'
+      }
+    },
+    negative: {
+      dot: {
+        checked: 'colors.brand.gray.200',
+        unchecked: 'colors.brand.gray.200'
+      },
+      border: {
+        checked: 'colors.feedback.border.negative.highContrast',
+        unchecked: 'colors.feedback.border.negative.highContrast'
+      },
+      background: {
+        checked: 'colors.feedback.background.negative.highContrast',
+        unchecked: 'colors.feedback.background.negative.lowContrast'
+      }
     }
   }
 };
 
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty$1(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var getRadioIconWrapperStyles = function getRadioIconWrapperStyles(_ref) {
   var theme = _ref.theme,
       isChecked = _ref.isChecked,
       isDisabled = _ref.isDisabled,
-      isNegative = _ref.isNegative;
+      isNegative = _ref.isNegative,
+      size = _ref.size;
   var isReactNative = getPlatformType() === 'react-native';
   var variant = 'default';
   if (isDisabled) variant = 'disabled';
   if (isNegative) variant = 'negative';
   var checked = isChecked ? 'checked' : 'unchecked';
-  var backgroundColor = variants$1[variant].background[checked];
-  var borderColor = variants$1[variant].border[checked];
+  var background = radioIconColors.variants[variant].background[checked];
+  var border = radioIconColors.variants[variant].border[checked];
+  var backgroundColor = background === 'transparent' ? background : get_1(theme, background);
+  var borderColor = border === 'transparent' ? border : get_1(theme, border);
   return _objectSpread$1({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '16px',
-    height: '16px',
-    borderWidth: makeBorderSize(theme.border.width.thin),
+    width: makeSpace(radioSizes.icon[size].width),
+    height: makeSpace(radioSizes.icon[size].height),
+    borderWidth: makeBorderSize(theme.border.width.thick),
     borderStyle: 'solid',
-    margin: makeSpace(theme.spacing[0]),
+    margin: makeSpace(theme.spacing[1]),
     borderRadius: makeSize(theme.border.radius.max),
-    marginRight: makeSpace(theme.spacing[3]),
-    backgroundColor: get_1(theme, backgroundColor),
-    borderColor: get_1(theme, borderColor)
+    backgroundColor: backgroundColor,
+    borderColor: borderColor
   }, !isReactNative && {
     transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),
     transitionTimingFunction: castWebType(theme.motion.easing.exit.attentive)
@@ -9884,42 +10057,38 @@ var Circle = function Circle(_ref) {
   });
 };
 
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-
 var CheckedIcon = function CheckedIcon(_ref) {
-  var color = _ref.color;
+  var _context;
+
+  var color = _ref.color,
+      size = _ref.size;
+  var width = radioSizes.icon[size].width;
+  var height = radioSizes.icon[size].height;
+  var radius = radioSizes.icon[size].dotRadius;
+
+  var viewBox = _concatInstanceProperty(_context = "0 0 ".concat(width, " ")).call(_context, height);
+
+  var cx = "".concat(width / 2);
+  var cy = "".concat(height / 2);
   return /*#__PURE__*/jsx(Svg, {
-    width: "16px",
-    height: "16px",
-    viewBox: "0 0 16 16",
+    width: makeSpace(width),
+    height: makeSpace(height),
+    viewBox: viewBox,
     fill: "none",
     children: /*#__PURE__*/jsx(Circle, {
-      cx: "8",
-      cy: "8",
-      r: "4",
+      cx: cx,
+      cy: cy,
+      r: "".concat(radius),
       fill: color
     })
   });
 };
 
-// Radio icon center dot color
-var variants = {
-  unchecked: {
-    "default": 'colors.brand.gray.200',
-    disabled: 'colors.brand.gray.300',
-    negative: 'colors.feedback.background.negative.lowContrast'
-  },
-  checked: {
-    "default": 'colors.brand.gray.200',
-    disabled: 'colors.brand.gray.400',
-    negative: 'colors.feedback.background.negative.highContrast'
-  }
-};
-
 var RadioIcon = function RadioIcon(_ref2) {
   var isChecked = _ref2.isChecked,
       isDisabled = _ref2.isDisabled,
-      isNegative = _ref2.isNegative;
+      isNegative = _ref2.isNegative,
+      size = _ref2.size;
 
   var _useTheme = useTheme(),
       theme = _useTheme.theme;
@@ -9929,8 +10098,9 @@ var RadioIcon = function RadioIcon(_ref2) {
   var variant = 'default';
   if (isDisabled) variant = 'disabled';
   if (isNegative) variant = 'negative';
-  var dotColor = get_1(theme, variants[state][variant]);
+  var dotColor = get_1(theme, radioIconColors.variants[variant].dot[state]);
   return /*#__PURE__*/jsx(RadioIconWrapper, {
+    size: size,
     isDisabled: isDisabled,
     isNegative: isNegative,
     isChecked: checked,
@@ -9941,6 +10111,7 @@ var RadioIcon = function RadioIcon(_ref2) {
         display: 'flex'
       },
       children: /*#__PURE__*/jsx(CheckedIcon, {
+        size: size,
         color: dotColor
       })
     })
@@ -9959,12 +10130,14 @@ var useRadioGroupContext = function useRadioGroupContext() {
 /* eslint-disable @typescript-eslint/no-shadow */
 
 var Radio = function Radio(_ref) {
-  var _groupProps$state;
+  var _groupProps$state, _groupProps$size;
 
   var value = _ref.value,
       children = _ref.children,
       helpText = _ref.helpText,
-      isDisabled = _ref.isDisabled;
+      isDisabled = _ref.isDisabled,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size;
   var groupProps = useRadioGroupContext();
   var isInsideGroup = !isEmpty_1(groupProps);
 
@@ -9983,6 +10156,10 @@ var Radio = function Radio(_ref) {
   var showHelpText = !hasError && helpText;
   var isReactNative = getPlatformType() === 'react-native';
 
+  var _size = (_groupProps$size = groupProps.size) !== null && _groupProps$size !== void 0 ? _groupProps$size : size;
+
+  var isSmall = _size === 'small';
+
   var handleChange = function handleChange(_ref2) {
     var isChecked = _ref2.isChecked,
         value = _ref2.value;
@@ -10023,19 +10200,22 @@ var Radio = function Radio(_ref) {
         flexDirection: "row",
         children: [/*#__PURE__*/jsx(SelectorInput, {
           isChecked: state.isChecked,
-          isDisabled: isDisabled,
+          isDisabled: _isDisabled,
           isNegative: hasError // TODO: rename to hasError
           ,
           inputProps: inputProps
         }), /*#__PURE__*/jsx(RadioIcon, {
+          size: _size,
           isChecked: state.isChecked,
           isDisabled: _isDisabled,
           isNegative: hasError
         }), /*#__PURE__*/jsx(SelectorTitle, {
+          size: _size,
+          isDisabled: _isDisabled,
           children: children
         })]
       }), /*#__PURE__*/jsx(Box, {
-        marginLeft: "spacing.7",
+        marginLeft: isSmall ? 'spacing.6' : 'spacing.7',
         children: showHelpText && /*#__PURE__*/jsx(SelectorSupportText, {
           id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
           children: helpText
@@ -10053,7 +10233,8 @@ var useRadioGroup = function useRadioGroup(_ref) {
       _onChange = _ref.onChange,
       validationState = _ref.validationState,
       necessityIndicator = _ref.necessityIndicator,
-      name = _ref.name;
+      name = _ref.name,
+      size = _ref.size;
 
   var _useTheme = useTheme(),
       platform = _useTheme.platform;
@@ -10118,9 +10299,10 @@ var useRadioGroup = function useRadioGroup(_ref) {
       isDisabled: isDisabled,
       labelPosition: platform === 'onMobile' ? 'top' : labelPosition,
       name: fallbackName,
-      state: state
+      state: state,
+      size: size
     };
-  }, [validationState, isDisabled, platform, labelPosition, state, fallbackName, necessityIndicator]);
+  }, [validationState, isDisabled, platform, labelPosition, state, fallbackName, necessityIndicator, size]);
   return {
     state: state,
     contextValue: contextValue,
@@ -10131,7 +10313,7 @@ var useRadioGroup = function useRadioGroup(_ref) {
 };
 
 var RadioGroup = function RadioGroup(_ref) {
-  var _context;
+  var _context, _context2;
 
   var children = _ref.children,
       label = _ref.label,
@@ -10148,7 +10330,9 @@ var RadioGroup = function RadioGroup(_ref) {
       name = _ref.name,
       defaultValue = _ref.defaultValue,
       onChange = _ref.onChange,
-      value = _ref.value;
+      value = _ref.value,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size;
 
   var _useRadioGroup = useRadioGroup({
     defaultValue: defaultValue,
@@ -10157,17 +10341,28 @@ var RadioGroup = function RadioGroup(_ref) {
     name: name,
     onChange: onChange,
     validationState: validationState,
-    value: value
+    value: value,
+    size: size
   }),
       contextValue = _useRadioGroup.contextValue,
       ids = _useRadioGroup.ids;
 
+  var _useTheme = useTheme(),
+      theme = _useTheme.theme;
+
+  var _useBreakpoint = useBreakpoint({
+    breakpoints: theme.breakpoints
+  }),
+      matchedDeviceType = _useBreakpoint.matchedDeviceType;
+
   var showError = validationState === 'error' && errorText;
   var showHelpText = !showError && helpText;
 
   var accessibilityText = _concatInstanceProperty(_context = ",".concat(showError ? errorText : '', " ")).call(_context, showHelpText ? helpText : '');
 
   var isReactNative = getPlatformType() === 'react-native';
+  var gap = radioSizes.group.gap[size][matchedDeviceType];
+  var childCount = React__default.Children.count(children);
   return /*#__PURE__*/jsx(RadioGroupProvider, {
     value: contextValue,
     children: /*#__PURE__*/jsxs(SelectorGroupField, {
@@ -10185,8 +10380,12 @@ var RadioGroup = function RadioGroup(_ref) {
         children: [/*#__PURE__*/jsx(Box, {
           display: "flex",
           flexDirection: "column",
-          gap: 2,
-          children: children
+          children: _mapInstanceProperty(_context2 = React__default.Children).call(_context2, children, function (child, index) {
+            return /*#__PURE__*/jsx(Box, {
+              marginBottom: index === childCount - 1 ? 0 : gap,
+              children: child
+            }, index);
+          })
         }), /*#__PURE__*/jsx(FormHint, {
           type: validationState === 'error' ? 'error' : 'help',
           errorText: errorText,
@@ -10261,5 +10460,5 @@ var SkipNavContent = function SkipNavContent(_ref3) {
   }, testID('skipnav-content')));
 };
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, InfoIcon, Link, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, InfoIcon, Link, LinkIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
 //# sourceMappingURL=index.web.js.map