@razorpay/blade 3.4.1 → 3.5.1

package/build/components/index.web.js

@@ -4937,7 +4937,8 @@ var StyledIconButton = function StyledIconButton(_ref) {
       accessibilityLabel = _ref.accessibilityLabel;
   return /*#__PURE__*/jsx(StyledButton, _objectSpread$r(_objectSpread$r({
     onClick: onClick,
-    contrast: contrast
+    contrast: contrast,
+    type: "button"
   }, makeAccessible({
     label: accessibilityLabel
   })), {}, {
@@ -6893,35 +6894,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'
+      }
     }
   }
 };
@@ -6930,26 +6957,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
   };
 };
 
@@ -6996,35 +7025,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"
     })
   });
 };
@@ -7033,7 +7086,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;
@@ -7042,6 +7096,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,
@@ -7053,6 +7108,7 @@ var CheckboxIcon = function CheckboxIcon(_ref3) {
         display: 'flex'
       },
       children: /*#__PURE__*/jsx(IndeterminateIcon, {
+        size: size,
         color: iconColor
       })
     }), /*#__PURE__*/jsx(Fade$1, {
@@ -7062,6 +7118,7 @@ var CheckboxIcon = function CheckboxIcon(_ref3) {
         display: 'flex'
       },
       children: isChecked ? /*#__PURE__*/jsx(CheckedIcon$1, {
+        size: size,
         color: iconColor
       }) : null
     })]
@@ -7513,15 +7570,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
   });
@@ -7529,14 +7588,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
+    })]
   });
 };
 
@@ -7559,11 +7632,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'
     }
   }
 };
@@ -7575,9 +7652,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']))
@@ -7620,7 +7698,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,
@@ -7633,7 +7711,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);
@@ -7663,9 +7743,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;
 
@@ -7723,16 +7806,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
@@ -7754,7 +7839,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;
@@ -7833,9 +7919,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,
@@ -7871,7 +7958,7 @@ var SelectorGroupField = function SelectorGroupField(_ref) {
 };
 
 var CheckboxGroup = function CheckboxGroup(_ref) {
-  var _context;
+  var _context, _context2;
 
   var children = _ref.children,
       label = _ref.label,
@@ -7886,7 +7973,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,
@@ -7895,16 +7984,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, {
@@ -7921,8 +8021,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,
@@ -9696,67 +9800,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)
@@ -9911,42 +10058,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;
@@ -9956,8 +10099,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,
@@ -9968,6 +10112,7 @@ var RadioIcon = function RadioIcon(_ref2) {
         display: 'flex'
       },
       children: /*#__PURE__*/jsx(CheckedIcon, {
+        size: size,
         color: dotColor
       })
     })
@@ -9986,12 +10131,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);
 
@@ -10010,6 +10157,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;
@@ -10050,19 +10201,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
@@ -10080,7 +10234,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;
@@ -10145,9 +10300,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,
@@ -10158,7 +10314,7 @@ var useRadioGroup = function useRadioGroup(_ref) {
 };
 
 var RadioGroup = function RadioGroup(_ref) {
-  var _context;
+  var _context, _context2;
 
   var children = _ref.children,
       label = _ref.label,
@@ -10175,7 +10331,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,
@@ -10184,17 +10342,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, {
@@ -10212,8 +10381,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,