rsuite 5.34.0 → 5.35.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [5.35.0](https://github.com/rsuite/rsuite/compare/v5.34.1...v5.35.0) (2023-06-02)
+
+### Features
+
+- **RadioTile:** add support for RadioTile ([#3208](https://github.com/rsuite/rsuite/issues/3208)) ([5cac8e1](https://github.com/rsuite/rsuite/commit/5cac8e12cdef95bc6a6de1333d5cb43ee02f1ab7))
+
+## [5.34.1](https://github.com/rsuite/rsuite/compare/v5.34.0...v5.34.1) (2023-05-26)
+
+### Bug Fixes
+
+- **InputPicker:** add missing top padding of listbox ([#3214](https://github.com/rsuite/rsuite/issues/3214)) ([f6df23c](https://github.com/rsuite/rsuite/commit/f6df23c085c4d7944c5817b0a9f8a1168c41f0b9))
+- **Radio,Checkbox:** remove leading space for Radio/Checkbox in groups ([#3215](https://github.com/rsuite/rsuite/issues/3215)) ([27c1495](https://github.com/rsuite/rsuite/commit/27c14952da87c21612a8e822295eefc0908b08d6))
+
 # [5.34.0](https://github.com/rsuite/rsuite/compare/v5.33.1...v5.34.0) (2023-05-19)
 
 ### Bug Fixes

package/Checkbox/styles/mixin.less

@@ -45,7 +45,7 @@
     vertical-align: middle;
     font-weight: normal;
     margin-top: 0;
-    margin-left: @radio-sense-width; // space out consecutive inline controls
+    margin-right: @radio-sense-width; // space out consecutive inline controls
 
     .rs-plaintext &:first-child {
       margin-left: 0;

package/CheckboxGroup/styles/index.less

@@ -3,9 +3,12 @@
 .rs-checkbox-group {
   display: flex;
   flex-direction: column;
+
+  > .rs-checkbox {
+    margin-left: -1 * @radio-sense-width;
+  }
 }
 
 .rs-checkbox-group-inline {
   flex-direction: row;
-  margin-left: -1 * @radio-sense-width;
 }

package/RadioGroup/styles/index.less

@@ -3,11 +3,14 @@
 .rs-radio-group {
   display: flex;
   flex-direction: column;
+
+  > .rs-radio {
+    margin-left: -1 * @radio-sense-width;
+  }
 }
 
 .rs-radio-group-inline {
   flex-direction: row;
-  margin-left: -1 * @radio-sense-width;
 }
 
 // Radio Group - picker appearance

package/RadioTile/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/RadioTile",
+  "private": true,
+  "main": "../cjs/RadioTile/index.js",
+  "module": "../esm/RadioTile/index.js",
+  "types": "../esm/RadioTile/index.d.ts"
+}

package/RadioTile/styles/index.less

@@ -0,0 +1,69 @@
+.rs-radio-tile {
+  border-radius: 6px;
+  overflow: hidden;
+  border: 2px solid var(--rs-radio-tile-border);
+  padding: 10px;
+  position: relative;
+  cursor: pointer;
+
+  &-label {
+    font-weight: bold;
+  }
+
+  &-content {
+    color: var(--rs-text-secondary);
+  }
+
+  &-mark {
+    background: var(--rs-radio-tile-checked-color);
+    border-bottom-left-radius: 50%;
+    height: 48px;
+    position: absolute;
+    right: -24px;
+    top: -24px;
+    width: 48px;
+    z-index: 3;
+    opacity: 0;
+
+    &-icon {
+      position: absolute;
+      font-size: 16px;
+      top: 25px;
+      left: 7px;
+      color: var(--rs-radio-tile-checked-mark-color);
+    }
+  }
+
+  &-checked &-mark {
+    opacity: 1;
+  }
+
+  &-checked&-disabled {
+    border-color: var(--rs-radio-tile-checked-disabled-color);
+  }
+  &-checked&-disabled &-mark {
+    background-color: var(--rs-radio-tile-checked-disabled-color);
+  }
+
+  &-checked,
+  &:hover:not(&-disabled) {
+    border: 2px solid var(--rs-radio-tile-checked-color);
+  }
+
+  &-disabled,
+  &-disabled &-content {
+    color: var(--rs-text-disabled);
+    cursor: not-allowed;
+  }
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  &-icon {
+    font-size: var(--rs-radio-tile-icon-size);
+  }
+}

package/RadioTileGroup/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/RadioTileGroup",
+  "private": true,
+  "main": "../cjs/RadioTileGroup/index.js",
+  "module": "../esm/RadioTileGroup/index.js",
+  "types": "../esm/RadioTileGroup/index.d.ts"
+}

package/RadioTileGroup/styles/index.less

@@ -0,0 +1 @@
+//

package/cjs/InputPicker/InputPicker.js

@@ -616,7 +616,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         top = positionProps.top,
         className = positionProps.className;
     var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';
-    var classes = merge(className, menuClassName, prefix(menuClassPrefix));
+    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));
     var styles = (0, _extends2.default)({}, menuStyle, {
       left: left,
       top: top

package/cjs/RadioTile/RadioTile.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { WithAsProps } from '../@types/common';
+export declare type ValueType = string | number;
+export interface RadioTileProps<T = ValueType> extends WithAsProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Additional description, if needed*/
+    children?: React.ReactNode;
+    /** Specifies whether the radio is selected */
+    checked?: boolean;
+    /** Specifies the initial state: whether or not the radio is selected */
+    defaultChecked?: boolean;
+    /** Whether the Radio is disabled */
+    disabled?: boolean;
+    /** Label of the Radio tile */
+    label?: React.ReactNode;
+    /** Icon to be used */
+    icon?: React.ReactNode;
+    /** Name to use for form */
+    name?: string;
+    /** Value, corresponding to the value of the RadioTileGroup, to determine whether the */
+    value?: T;
+    /** Callback function with value changed */
+    onChange?: (value?: T, event?: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps<ValueType> & React.RefAttributes<unknown>>;
+export default RadioTile;

package/cjs/RadioTile/RadioTile.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Check = _interopRequireDefault(require("@rsuite/icons/Check"));
+
+var _Stack = _interopRequireDefault(require("../Stack"));
+
+var _RadioTileGroup = require("../RadioTileGroup/RadioTileGroup");
+
+var _utils = require("../utils");
+
+var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
+
+var RadioTile = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _useContext = (0, _react.useContext)(_RadioTileGroup.RadioTileContext),
+      groupValue = _useContext.value,
+      nameContext = _useContext.name,
+      disabledContext = _useContext.disabled,
+      onGroupChange = _useContext.onChange;
+
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? _Stack.default : _props$as,
+      children = props.children,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'radio-tile' : _props$classPrefix,
+      checkedProp = props.checked,
+      className = props.className,
+      defaultChecked = props.defaultChecked,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,
+      icon = props.icon,
+      value = props.value,
+      label = props.label,
+      _props$name = props.name,
+      name = _props$name === void 0 ? nameContext : _props$name,
+      _props$tabIndex = props.tabIndex,
+      tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+      onChange = props.onChange,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "classPrefix", "checked", "className", "defaultChecked", "disabled", "icon", "value", "label", "name", "tabIndex", "onChange"]);
+
+  var _useControlled = (0, _utils.useControlled)(typeof groupValue !== 'undefined' ? groupValue === value : checkedProp, defaultChecked || false),
+      checked = _useControlled[0],
+      setChecked = _useControlled[1];
+
+  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(rest),
+      htmlInputProps = _partitionHTMLProps[0],
+      restProps = _partitionHTMLProps[1];
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      merge = _useClassNames.merge,
+      withClassPrefix = _useClassNames.withClassPrefix,
+      prefix = _useClassNames.prefix;
+
+  var handleChange = (0, _react.useCallback)(function (event) {
+    setChecked(true);
+    onGroupChange === null || onGroupChange === void 0 ? void 0 : onGroupChange(value, event);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+  }, [onChange, onGroupChange, setChecked, value]);
+  var classes = merge(className, withClassPrefix({
+    checked: checked,
+    disabled: disabled
+  }));
+  var radioId = (0, _useUniqueId.default)('radio-');
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    spacing: 6
+  }, restProps, {
+    childrenRenderMode: "clone",
+    ref: ref,
+    className: classes,
+    as: "label"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('icon')
+  }, icon), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('body')
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, htmlInputProps, {
+    type: "radio",
+    name: name,
+    value: value,
+    checked: checked,
+    tabIndex: tabIndex,
+    disabled: disabled,
+    onChange: handleChange,
+    "aria-checked": checked,
+    "aria-disabled": disabled,
+    "aria-labelledby": radioId + "-label",
+    "aria-describedby": radioId + "-desc"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('label'),
+    id: radioId + "-label"
+  }, label), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('content'),
+    id: radioId + "-desc"
+  }, children), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('mark')
+  }, /*#__PURE__*/_react.default.createElement(_Check.default, {
+    className: prefix('mark-icon')
+  }))));
+});
+
+RadioTile.displayName = 'RadioTile';
+RadioTile.propTypes = {
+  children: _propTypes.default.node,
+  classPrefix: _propTypes.default.string,
+  checked: _propTypes.default.bool,
+  defaultChecked: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  icon: _propTypes.default.node,
+  label: _propTypes.default.node,
+  name: _propTypes.default.string,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  onChange: _propTypes.default.func
+};
+var _default = RadioTile;
+exports.default = _default;

package/cjs/RadioTile/index.d.ts

@@ -0,0 +1,3 @@
+import RadioTile from './RadioTile';
+export type { RadioTileProps, ValueType } from './RadioTile';
+export default RadioTile;

package/cjs/RadioTile/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _RadioTile = _interopRequireDefault(require("./RadioTile"));
+
+var _default = _RadioTile.default;
+exports.default = _default;

package/cjs/RadioTileGroup/RadioTileGroup.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { WithAsProps, FormControlBaseProps, RsRefForwardingComponent } from '../@types/common';
+import { ValueType } from '../RadioTile';
+export interface RadioTileContextProps {
+    name?: string;
+    value?: ValueType | null;
+    controlled?: boolean;
+    disabled?: boolean;
+    onChange?: (value: ValueType | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export interface RadioTileGroupProps<T = ValueType> extends WithAsProps, FormControlBaseProps<T> {
+    /** Name to use for form */
+    name?: string;
+    /** Inline layout */
+    inline?: boolean;
+    /** Whether radio is disabled */
+    disabled?: boolean;
+    /** Primary content */
+    children?: React.ReactNode;
+}
+export declare const RadioTileContext: React.Context<RadioTileContextProps>;
+declare const RadioTileGroup: RsRefForwardingComponent<'div', RadioTileGroupProps>;
+export default RadioTileGroup;

package/cjs/RadioTileGroup/RadioTileGroup.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.RadioTileContext = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("../utils");
+
+var _Stack = _interopRequireDefault(require("../Stack"));
+
+var RadioTileContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.RadioTileContext = RadioTileContext;
+
+var RadioTileGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? _Stack.default : _props$as,
+      className = props.className,
+      inline = props.inline,
+      children = props.children,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'radio-tile-group' : _props$classPrefix,
+      disabled = props.disabled,
+      valueProp = props.value,
+      defaultValue = props.defaultValue,
+      name = props.name,
+      onChange = props.onChange,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "inline", "children", "classPrefix", "disabled", "value", "defaultValue", "name", "onChange"]);
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      merge = _useClassNames.merge,
+      withClassPrefix = _useClassNames.withClassPrefix;
+
+  var classes = merge(className, withClassPrefix());
+
+  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
+      value = _useControlled[0],
+      setValue = _useControlled[1];
+
+  var handleChange = (0, _react.useCallback)(function (nextValue, event) {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+  }, [onChange, setValue]);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      name: name,
+      disabled: disabled,
+      value: typeof value === 'undefined' ? null : value,
+      onChange: handleChange
+    };
+  }, [disabled, handleChange, name, value]);
+  return /*#__PURE__*/_react.default.createElement(RadioTileContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    alignItems: "stretch",
+    spacing: 10
+  }, rest, {
+    role: "radiogroup",
+    childrenRenderMode: "clone",
+    direction: inline ? 'row' : 'column',
+    ref: ref,
+    className: classes
+  }), children));
+});
+
+RadioTileGroup.displayName = 'RadioTileGroup';
+RadioTileGroup.propTypes = {
+  name: _propTypes.default.string,
+  inline: _propTypes.default.bool,
+  value: _propTypes.default.any,
+  defaultValue: _propTypes.default.any,
+  className: _propTypes.default.string,
+  classPrefix: _propTypes.default.string,
+  children: _propTypes.default.node,
+  onChange: _propTypes.default.func
+};
+var _default = RadioTileGroup;
+exports.default = _default;

package/cjs/RadioTileGroup/index.d.ts

@@ -0,0 +1,3 @@
+import RadioTileGroup from './RadioTileGroup';
+export type { RadioTileGroupProps } from './RadioTileGroup';
+export default RadioTileGroup;

package/cjs/RadioTileGroup/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _RadioTileGroup = _interopRequireDefault(require("./RadioTileGroup"));
+
+var _default = _RadioTileGroup.default;
+exports.default = _default;

package/cjs/index.d.ts

@@ -68,6 +68,10 @@ export { default as Radio } from './Radio';
 export type { RadioProps } from './Radio';
 export { default as RadioGroup } from './RadioGroup';
 export type { RadioGroupProps } from './RadioGroup';
+export { default as RadioTile } from './RadioTile';
+export type { RadioTileProps } from './RadioTile';
+export { default as RadioTileGroup } from './RadioTileGroup';
+export type { RadioTileGroupProps } from './RadioTileGroup';
 export { default as SelectPicker } from './SelectPicker';
 export type { SelectPickerProps } from './SelectPicker';
 export { default as CheckPicker } from './CheckPicker';

package/cjs/index.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.useFormClassNames = exports.useToaster = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DatePicker = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
+exports.useFormClassNames = exports.useToaster = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DatePicker = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
 
 var _Button = _interopRequireDefault(require("./Button"));
 
@@ -149,6 +149,14 @@ var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
 
 exports.RadioGroup = _RadioGroup.default;
 
+var _RadioTile = _interopRequireDefault(require("./RadioTile"));
+
+exports.RadioTile = _RadioTile.default;
+
+var _RadioTileGroup = _interopRequireDefault(require("./RadioTileGroup"));
+
+exports.RadioTileGroup = _RadioTileGroup.default;
+
 var _SelectPicker = _interopRequireDefault(require("./SelectPicker"));
 
 exports.SelectPicker = _SelectPicker.default;

package/dist/rsuite-no-reset-rtl.css

@@ -261,6 +261,12 @@
   --rs-radio-border: #d9d9d9;
   --rs-radio-checked-bg: #3498ff;
   --rs-radio-disabled-bg: #f7f7fa;
+  --rs-radio-tile-border: #d9d9d9;
+  --rs-radio-tile-bg: #fff;
+  --rs-radio-tile-checked-color: #3498ff;
+  --rs-radio-tile-checked-mark-color: #fff;
+  --rs-radio-tile-checked-disabled-color: #cce9ff;
+  --rs-radio-tile-icon-size: 32px;
   --rs-rate-symbol: #8e8e93;
   --rs-rate-symbol-checked: #ffb300;
   --rs-toggle-bg: #d9d9d9;
@@ -585,6 +591,11 @@
   --rs-radio-border: #6a6f76;
   --rs-radio-checked-bg: #34c3ff;
   --rs-radio-disabled-bg: #5c6066;
+  --rs-radio-tile-border: #858b94;
+  --rs-radio-tile-bg: #fff;
+  --rs-radio-tile-checked-color: #34c3ff;
+  --rs-radio-tile-checked-mark-color: #1a1d24;
+  --rs-radio-tile-checked-disabled-color: #006199;
   --rs-rate-symbol: #3c3f43;
   --rs-rate-symbol-checked: #ffb300;
   --rs-toggle-bg: #6a6f76;
@@ -916,6 +927,11 @@
   --rs-radio-border: #cbced4;
   --rs-radio-checked-bg: #ffff00;
   --rs-radio-disabled-bg: #5c6066;
+  --rs-radio-tile-border: #858b94;
+  --rs-radio-tile-bg: #fff;
+  --rs-radio-tile-checked-color: #ffff00;
+  --rs-radio-tile-checked-mark-color: #1a1d24;
+  --rs-radio-tile-checked-disabled-color: #8f9900;
   --rs-rate-symbol: #cbced4;
   --rs-rate-symbol-checked: #ffff00;
   --rs-toggle-bg: #1a1d24;
@@ -3890,7 +3906,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   vertical-align: middle;
   font-weight: normal;
   margin-top: 0;
-  margin-right: 10px;
+  margin-left: 10px;
 }
 .rs-plaintext .rs-checkbox-inline:first-child {
   margin-right: 0;
@@ -4053,12 +4069,14 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.rs-checkbox-group > .rs-checkbox {
+  margin-right: -10px;
+}
 .rs-checkbox-group-inline {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  margin-right: -10px;
 }
 .rs-picker-check-menu-items {
   margin-bottom: 6px;
@@ -12492,7 +12510,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   vertical-align: middle;
   font-weight: normal;
   margin-top: 0;
-  margin-right: 10px;
+  margin-left: 10px;
 }
 .rs-plaintext .rs-radio-inline:first-child {
   margin-right: 0;
@@ -12642,12 +12660,14 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.rs-radio-group > .rs-radio {
+  margin-right: -10px;
+}
 .rs-radio-group-inline {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  margin-right: -10px;
 }
 .rs-radio-group-picker {
   display: -webkit-inline-box;
@@ -12898,6 +12918,74 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   color: #8e8e93;
   color: var(--rs-text-secondary);
 }
+.rs-radio-tile {
+  border-radius: 6px;
+  overflow: hidden;
+  border: 2px solid #d9d9d9;
+  border: 2px solid var(--rs-radio-tile-border);
+  padding: 10px;
+  position: relative;
+  cursor: pointer;
+}
+.rs-radio-tile-label {
+  font-weight: bold;
+}
+.rs-radio-tile-content {
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
+}
+.rs-radio-tile-mark {
+  background: #3498ff;
+  background: var(--rs-radio-tile-checked-color);
+  border-bottom-right-radius: 50%;
+  height: 48px;
+  position: absolute;
+  left: -24px;
+  top: -24px;
+  width: 48px;
+  z-index: 3;
+  opacity: 0;
+}
+.rs-radio-tile-mark-icon {
+  position: absolute;
+  font-size: 16px;
+  top: 25px;
+  right: 7px;
+  color: #fff;
+  color: var(--rs-radio-tile-checked-mark-color);
+}
+.rs-radio-tile-checked .rs-radio-tile-mark {
+  opacity: 1;
+}
+.rs-radio-tile-checked.rs-radio-tile-disabled {
+  border-color: #cce9ff;
+  border-color: var(--rs-radio-tile-checked-disabled-color);
+}
+.rs-radio-tile-checked.rs-radio-tile-disabled .rs-radio-tile-mark {
+  background-color: #cce9ff;
+  background-color: var(--rs-radio-tile-checked-disabled-color);
+}
+.rs-radio-tile-checked,
+.rs-radio-tile:hover:not(.rs-radio-tile-disabled) {
+  border: 2px solid #3498ff;
+  border: 2px solid var(--rs-radio-tile-checked-color);
+}
+.rs-radio-tile-disabled,
+.rs-radio-tile-disabled .rs-radio-tile-content {
+  color: #c5c6c7;
+  color: var(--rs-text-disabled);
+  cursor: not-allowed;
+}
+.rs-radio-tile input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.rs-radio-tile-icon {
+  font-size: 32px;
+  font-size: var(--rs-radio-tile-icon-size);
+}
 .rs-ripple {
   position: absolute;
   display: block;