@progress/kendo-react-inputs 4.14.0-dev.202201141457 → 5.0.0-dev.202201182040

package/dist/npm/colors/FlatColorPicker.js

@@ -66,14 +66,14 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
             React.createElement("div", { className: "k-coloreditor-header k-hstack" },
                 React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                     React.createElement(kendo_react_buttons_1.ButtonGroup, null,
-                        React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, look: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); } },
+                        React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); } },
                             React.createElement("span", { className: "k-icon k-i-color-canvas" })),
-                        React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, look: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); } },
+                        React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); } },
                             React.createElement("span", { className: "k-icon k-i-palette" })))),
                 React.createElement("div", { className: "k-spacer" }),
                 React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                     (props.showClearButton && defaultProps.showClearButton) &&
-                        React.createElement(kendo_react_buttons_1.Button, { type: "button", look: 'flat', onClick: handleResetColor },
+                        React.createElement(kendo_react_buttons_1.Button, { type: "button", fillMode: 'flat', onClick: handleResetColor },
                             React.createElement("span", { className: "k-icon k-i-reset-color" })),
                     (props.showPreview && defaultProps.showPreview) &&
                         React.createElement("div", { className: "k-coloreditor-preview k-vstack" },

package/dist/npm/colors/HexInput.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var color_parser_1 = require("./utils/color-parser");
 var misc_1 = require("./utils/misc");
+var Input_1 = require("../input/Input");
 /**
  * @hidden
  */
@@ -40,7 +41,7 @@ var HexInput = /** @class */ (function (_super) {
         return _this;
     }
     HexInput.prototype.render = function () {
-        return (React.createElement("input", { value: this.state.hex, className: "k-input", onChange: this.onChange, onBlur: this.onBlur, disabled: this.props.disabled }));
+        return (React.createElement(Input_1.Input, { value: this.state.hex, onChange: this.onChange, onBlur: this.onBlur, disabled: this.props.disabled }));
     };
     HexInput.getDerivedStateFromProps = function (props, state) {
         if (props.hex !== state.originalHex) {

package/dist/npm/colors/interfaces/ColorPickerProps.d.ts

@@ -108,4 +108,41 @@ export interface ColorPickerProps {
      * The event handler that will be fired when the left side of the ColorPicker is clicked.
      */
     onActiveColorClick?: (event: ColorPickerActiveColorClick) => void;
+    /**
+     * Configures the `size` of the ColorPicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the ColorPicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the ColorPicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }

package/dist/npm/input/Input.js

@@ -201,7 +201,7 @@ var InputWithoutContext = /** @class */ (function (_super) {
         visited = _a.visited, touched = _a.touched, modified = _a.modified, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, validityStyles = _a.validityStyles, style = _a.style, props = __rest(_a, ["className", "label", "id", "validationMessage", "defaultValue", "valid", "visited", "touched", "modified", "ariaLabelledBy", "ariaDescribedBy", "validityStyles", "style"]);
         var inputId = id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
-        var inputClassName = kendo_react_common_1.classNames(className, 'k-textbox');
+        var inputClassName = kendo_react_common_1.classNames(className, 'k-input k-input-md k-rounded-md k-input-solid');
         var textbox = (React.createElement("input", __assign({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }, props, { style: !label
                 ? style
                 : undefined, value: this.value, id: inputId, className: inputClassName, onChange: this.handleChange, onAnimationStart: this.handleAutoFill, ref: function (el) {

package/dist/npm/maskedtextbox/MaskedTextBox.d.ts

@@ -48,6 +48,9 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         valid: PropTypes.Requireable<boolean>;
         validityStyles: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<"small" | "medium" | "large">;
+        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full">;
+        fillMode: PropTypes.Requireable<"solid" | "flat" | "outline">;
     };
     /**
      * @hidden
@@ -62,6 +65,9 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         };
         required: boolean;
         validityStyles: boolean;
+        size: "small" | "medium" | "large";
+        rounded: "small" | "medium" | "large" | "full";
+        fillMode: "solid" | "flat" | "outline";
     };
     /**
      * @hidden

package/dist/npm/maskedtextbox/MaskedTextBox.js

@@ -280,16 +280,22 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
      */
     MaskedTextBoxWithoutContext.prototype.render = function () {
         var _this = this;
+        var _a;
+        var _b = this.props, _c = _b.size, size = _c === void 0 ? MaskedTextBoxWithoutContext.defaultProps.size : _c, _d = _b.fillMode, fillMode = _d === void 0 ? MaskedTextBoxWithoutContext.defaultProps.fillMode : _d, _e = _b.rounded, rounded = _e === void 0 ? MaskedTextBoxWithoutContext.defaultProps.rounded : _e;
         var inputId = this.props.id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
         var style = this.props.style || {};
-        var component = (React.createElement("span", { dir: this.props.dir, className: kendo_react_common_1.classNames('k-widget k-maskedtextbox', this.props.className, {
-                'k-state-focused': this.state.focused,
-                'k-state-disabled': this.props.disabled,
-                'k-state-invalid': !isValid
-            }), style: !this.props.label
+        var component = (React.createElement("span", { dir: this.props.dir, className: kendo_react_common_1.classNames('k-maskedtextbox k-input', (_a = {},
+                _a["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+                _a["k-input-" + fillMode] = fillMode,
+                _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                _a['k-valid'] = isValid,
+                _a['k-invalid'] = !isValid,
+                _a['k-required'] = this.required,
+                _a['k-disabled'] = this.props.disabled,
+                _a), this.props.className), style: !this.props.label
                 ? __assign({ width: this.props.width }, style) : style },
-            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-textbox", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: utils_1.returnFalse, onDrop: utils_1.returnFalse })));
+            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: utils_1.returnFalse, onDrop: utils_1.returnFalse })));
         return this.props.label
             ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: this.props.label, editorId: inputId, editorValue: this.value, editorValid: isValid, editorDisabled: this.props.disabled, editorPlaceholder: this.props.placeholder, children: component, style: { width: this.props.width }, dir: this.props.dir }))
             : component;
@@ -378,7 +384,10 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         required: PropTypes.bool,
         valid: PropTypes.bool,
         validityStyles: PropTypes.bool,
-        onChange: PropTypes.func
+        onChange: PropTypes.func,
+        size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+        rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+        fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
     };
     /**
      * @hidden
@@ -390,7 +399,10 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         maskValidation: true,
         rules: utils_1.defaultRules,
         required: false,
-        validityStyles: true
+        validityStyles: true,
+        size: 'medium',
+        rounded: 'medium',
+        fillMode: 'solid'
     };
     return MaskedTextBoxWithoutContext;
 }(React.Component));

package/dist/npm/maskedtextbox/MaskedTextBoxProps.d.ts

@@ -149,4 +149,41 @@ export interface MaskedTextBoxProps extends FormComponentProps {
      * Fires each time the MaskedTextBox gets blurred.
      */
     onBlur?: (event: MaskedTextBoxEvent) => void;
+    /**
+     * Configures the `size` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }

package/dist/npm/numerictextbox/NumericTextBox.js

@@ -9,6 +9,7 @@ var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
 var messages_1 = require("../messages");
 var utils_1 = require("./utils");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 /**
  * Represents the PropsContext of the `NumericTextBox` component.
@@ -21,6 +22,7 @@ exports.NumericTextBoxPropsContext = kendo_react_common_1.createPropsContext();
  * Represents the [KendoReact NumericTextBox component]({% slug overview_numerictextbox %}).
  */
 exports.NumericTextBox = React.forwardRef(function (directProps, target) {
+    var _a;
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
     var props = kendo_react_common_1.usePropsContext(exports.NumericTextBoxPropsContext, directProps);
     var calculatedId = React.useMemo(function () { return kendo_react_common_1.guid(); }, []);
@@ -28,9 +30,8 @@ exports.NumericTextBox = React.forwardRef(function (directProps, target) {
     var intlService = kendo_react_intl_1.useInternationalization();
     var localizationService = kendo_react_intl_1.useLocalization();
     var elementRef = React.useRef(null);
-    var elementWrapperRef = React.useRef(null);
     var valueDuringChangeRef = React.useRef();
-    var _a = React.useState(false), forceUpdate = _a[0], setForceUpdate = _a[1];
+    var _b = React.useState(false), forceUpdate = _b[0], setForceUpdate = _b[1];
     var stateRef = React.useRef(utils_1.getInitialState());
     var isPasteRef = React.useRef(false);
     var prevLooseValueRef = React.useRef();
@@ -125,13 +126,6 @@ exports.NumericTextBox = React.forwardRef(function (directProps, target) {
             newState.eventValue = rangedValue;
             stateValueRef.current = rangedValue;
         }
-        if (newState.valueIsCorrected) {
-            var wrapper_1 = elementWrapperRef.current;
-            if (wrapper_1 && wrapper_1.className.indexOf('k-state-invalid') === -1) {
-                wrapper_1.className += ' k-state-invalid';
-                window.setTimeout(function () { return wrapper_1.className = wrapper_1.className.replace(' k-state-invalid', ''); }, 50);
-            }
-        }
         var shouldFireEvent = props.value !== newState.eventValue;
         if (shouldFireEvent) {
             kendo_react_common_1.dispatchEvent(props.onChange, event, getImperativeHandle(), { value: newState.eventValue });
@@ -258,24 +252,21 @@ exports.NumericTextBox = React.forwardRef(function (directProps, target) {
     var isValid = !validityStylesGetter() || validityGetter().valid;
     var numerictextbox = (React.createElement("span", { dir: props.dir, style: !props.label
             ? { width: props.width }
-            : undefined, className: 'k-widget k-numerictextbox' + (props.className ? ' ' + props.className : ''), "aria-disabled": props.disabled ? 'true' : undefined },
-        React.createElement("span", { className: kendo_react_common_1.classNames('k-numeric-wrap', {
-                'k-state-disabled': props.disabled,
-                'k-state-invalid': !isValid,
-                'k-state-focused': stateRef.current.focused
-            }), ref: elementWrapperRef },
-            React.createElement("input", { value: looseValue === null ? '' : looseValue, tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled), accessKey: props.accessKey, disabled: props.disabled, title: props.title, "aria-valuemin": props.min, "aria-valuemax": props.max, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, placeholder: props.placeholder, spellCheck: false, autoComplete: 'off', autoCorrect: 'off', type: props.inputType || 'tel', className: 'k-input k-formatted-value', id: inputId, name: props.name, readOnly: props.readOnly, onChange: onChangeHandler, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onPaste: onPasteHandler, onWheel: onWheelHandler, ref: elementRef }),
-            props.children,
-            props.spinners &&
-                (React.createElement("span", { className: "k-select", onMouseDown: onMouseDown },
-                    React.createElement("span", { className: "k-link k-link-increase", "aria-label": localizationService
-                            .toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]), title: localizationService
-                            .toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]), onClick: onIncrease },
-                        React.createElement("span", { className: "k-icon k-i-arrow-n" })),
-                    React.createElement("span", { className: "k-link k-link-decrease", "aria-label": localizationService
-                            .toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]), title: localizationService
-                            .toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]), onClick: onDecrease },
-                        React.createElement("span", { className: "k-icon k-i-arrow-s" })))))));
+            : undefined, className: kendo_react_common_1.classNames('k-input', 'k-numerictextbox', (_a = {},
+            _a["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+            _a["k-input-" + props.fillMode] = props.fillMode,
+            _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
+            _a['k-valid'] = isValid,
+            _a['k-invalid'] = !isValid,
+            _a['k-required'] = props.required,
+            _a['k-disabled'] = props.disabled,
+            _a), props.className), "aria-disabled": props.disabled ? 'true' : undefined },
+        React.createElement("input", { value: looseValue === null ? '' : looseValue, tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled), accessKey: props.accessKey, disabled: props.disabled, title: props.title, "aria-valuemin": props.min, "aria-valuemax": props.max, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, placeholder: props.placeholder, spellCheck: false, autoComplete: 'off', autoCorrect: 'off', type: props.inputType || 'tel', className: 'k-input-inner', id: inputId, name: props.name, readOnly: props.readOnly, onChange: onChangeHandler, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onPaste: onPasteHandler, onWheel: onWheelHandler, ref: elementRef }),
+        props.children,
+        props.spinners &&
+            (React.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: onMouseDown },
+                React.createElement(kendo_react_buttons_1.Button, { icon: 'arrow-n', className: "k-spinner-increase", "aria-label": localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]), title: localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]), onClick: onIncrease }),
+                React.createElement(kendo_react_buttons_1.Button, { className: "k-spinner-decrease", icon: 'arrow-s', "aria-label": localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]), title: localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]), onClick: onDecrease })))));
     return props.label
         ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: props.label, editorId: inputId, editorValue: looseValue === null ? '' : looseValue, editorValid: isValid, editorDisabled: props.disabled, editorPlaceholder: props.placeholder, children: numerictextbox, style: { width: props.width }, dir: props.dir }))
         : numerictextbox;
@@ -320,7 +311,10 @@ exports.NumericTextBox.propTypes = {
     ariaDescribedBy: PropTypes.string,
     onChange: PropTypes.func,
     onFocus: PropTypes.func,
-    onBlur: PropTypes.func
+    onBlur: PropTypes.func,
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
 };
 exports.NumericTextBox.displayName = 'KendoNumericTextBox';
 exports.NumericTextBox.defaultProps = {
@@ -332,5 +326,8 @@ exports.NumericTextBox.defaultProps = {
     rangeOnEnter: true,
     onChange: function (_) { return; },
     onFocus: function (_) { return; },
-    onBlur: function (_) { return; }
+    onBlur: function (_) { return; },
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid'
 };

package/dist/npm/numerictextbox/interfaces/NumericTextBoxProps.d.ts

@@ -124,5 +124,42 @@ export interface NumericTextBoxProps extends FormComponentProps {
     onBlur?: (event: NumericTextBoxBlurEvent) => void;
     /** @hidden */
     children?: React.ReactNode;
+    /**
+     * Configures the `size` of the NumericTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the NumericTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the NumericTextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }
 export {};

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1642170950,
+    publishDate: 1642537025,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/radiobutton/RadioButton.js

@@ -39,9 +39,10 @@ exports.RadioButtonPropsContext = kendo_react_common_1.createPropsContext();
  * Obtaining the `ref` returns an object of type [RadioButtonHandle]({% slug api_inputs_radiobuttonhandle %}).
  */
 exports.RadioButton = React.forwardRef(function (directProps, target) {
+    var _a;
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
     var props = kendo_react_common_1.usePropsContext(exports.RadioButtonPropsContext, directProps);
-    var ariaDescribedBy = props.ariaDescribedBy, checked = props.checked, children = props.children, className = props.className, disabled = props.disabled, id = props.id, label = props.label, labelPlacement = props.labelPlacement, name = props.name, style = props.style, tabIndex = props.tabIndex, value = props.value, valid = props.valid, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, others = __rest(props, ["ariaDescribedBy", "checked", "children", "className", "disabled", "id", "label", "labelPlacement", "name", "style", "tabIndex", "value", "valid", "onChange", "onFocus", "onBlur"]);
+    var ariaDescribedBy = props.ariaDescribedBy, checked = props.checked, children = props.children, className = props.className, disabled = props.disabled, id = props.id, size = props.size, label = props.label, labelPlacement = props.labelPlacement, name = props.name, style = props.style, tabIndex = props.tabIndex, value = props.value, valid = props.valid, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, others = __rest(props, ["ariaDescribedBy", "checked", "children", "className", "disabled", "id", "size", "label", "labelPlacement", "name", "style", "tabIndex", "value", "valid", "onChange", "onFocus", "onBlur"]);
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
@@ -67,11 +68,11 @@ exports.RadioButton = React.forwardRef(function (directProps, target) {
             kendo_react_common_1.dispatchEvent(onBlur, event, getImperativeHandle(), undefined);
         }
     }, [onBlur, disabled]);
-    var inputProps = __assign({ type: 'radio', id: id || calculatedId, name: name, className: kendo_react_common_1.classNames({
-            'k-radio': true,
-            'k-state-invalid': valid === false,
-            'k-invalid': valid === false
-        }, className), ref: elementRef, disabled: disabled, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), checked: checked, style: style, 'aria-describedby': ariaDescribedBy, value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, others);
+    var inputProps = __assign({ type: 'radio', id: id || calculatedId, name: name, className: kendo_react_common_1.classNames('k-radio', (_a = {},
+            _a["k-radio-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a['k-state-invalid'] = valid === false,
+            _a['k-invalid'] = valid === false,
+            _a), className), ref: elementRef, disabled: disabled, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), checked: checked, style: style, 'aria-describedby': ariaDescribedBy, value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, others);
     var radioButtonLabel = (React.createElement(React.Fragment, null, label !== undefined ? (React.createElement("label", { className: 'k-radio-label', htmlFor: id || calculatedId, style: { userSelect: 'none' }, "aria-label": label }, label)) : null));
     var radio = React.createElement("input", __assign({}, inputProps));
     return (labelPlacement === 'before'
@@ -89,6 +90,7 @@ exports.RadioButton.propTypes = {
     className: PropTypes.string,
     disabled: PropTypes.bool,
     id: PropTypes.string,
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
     label: PropTypes.string,
     labelPlacement: PropTypes.string,
     name: PropTypes.string,
@@ -100,4 +102,8 @@ exports.RadioButton.propTypes = {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func
 };
+var defaultProps = {
+    size: 'medium'
+};
 exports.RadioButton.displayName = 'KendoRadioButton';
+exports.RadioButton.defaultProps = defaultProps;

package/dist/npm/radiobutton/interfaces/RadioButtonProps.d.ts

@@ -10,7 +10,7 @@ declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
  * Represents the props of the [KendoReact RadioButton component]({% slug overview_radiobutton %}).
  * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
  */
-export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur'> {
+export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'onFocus' | 'onBlur'> {
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.
@@ -37,6 +37,18 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Sets the `id` of the Radio button.
      */
     id?: string;
+    /**
+     * Configures the `size` of the RadioButton.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
     /**
      * Sets the label of the Radio button ([see example]({% slug labels_radiobutton %})).
      */

package/dist/npm/switch/Switch.d.ts

@@ -48,6 +48,44 @@ export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
      * Sets the `id` of the Switch.
      */
     id?: string;
+    /**
+     * Configures the `size` of the Switch.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `trackRounded` of the Switch.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a trackRounded `className`.
+     *
+     * @default `full`
+     */
+    trackRounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `thumbRounded` of the Switch.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a thumbRounded `className`.
+     *
+     * @default `full`
+     */
+    thumbRounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.
@@ -136,6 +174,9 @@ export declare class SwitchWithoutContext extends React.Component<SwitchProps, S
         className: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         defaultChecked: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<"small" | "medium" | "large">;
+        trackRounded: PropTypes.Requireable<"small" | "medium" | "large" | "full">;
+        thumbRounded: PropTypes.Requireable<"small" | "medium" | "large" | "full">;
         dir: PropTypes.Requireable<string>;
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
@@ -157,6 +198,9 @@ export declare class SwitchWithoutContext extends React.Component<SwitchProps, S
     static defaultProps: {
         disabled: boolean;
         defaultChecked: boolean;
+        size: "small" | "medium" | "large";
+        trackRounded: "small" | "medium" | "large" | "full";
+        thumbRounded: "small" | "medium" | "large" | "full";
         offLabel: string;
         onBlur: () => void;
         onFocus: () => void;

package/dist/npm/switch/Switch.js

@@ -31,10 +31,6 @@ var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("./../messages");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
-var SWITCH_CONTAINER = 'k-switch-container';
-var SWITCH_HANDLE = 'k-switch-handle';
-var SWITCH_LABEL_ON = 'k-switch-label-on';
-var SWITCH_LABEL_OFF = 'k-switch-label-off';
 /** @hidden */
 var SwitchWithoutContext = /** @class */ (function (_super) {
     __extends(SwitchWithoutContext, _super);
@@ -236,19 +232,20 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
      */
     SwitchWithoutContext.prototype.render = function () {
         var _this = this;
+        var _a, _b, _c;
         var focused = this.state.focused;
-        var _a = this.props, dir = _a.dir, disabled = _a.disabled, id = _a.id, offLabel = _a.offLabel, onLabel = _a.onLabel, tabIndex = _a.tabIndex;
+        var _d = this.props, dir = _d.dir, disabled = _d.disabled, trackRounded = _d.trackRounded, thumbRounded = _d.thumbRounded, size = _d.size, id = _d.id, offLabel = _d.offLabel, onLabel = _d.onLabel, tabIndex = _d.tabIndex;
         this.dir = dir || (this._wrapper && getComputedStyle(this._wrapper).direction) || undefined;
         var isValid = !this.validityStyles || this.validity.valid;
-        var switchClassName = kendo_react_common_1.classNames({
-            'k-widget': true,
-            'k-switch': true,
-            'k-switch-on': this.value,
-            'k-switch-off': !this.value,
-            'k-state-focused': focused,
-            'k-state-disabled': disabled,
-            'k-state-invalid': !isValid
-        }, this.props.className);
+        var switchClassName = kendo_react_common_1.classNames('k-switch', (_a = {},
+            _a["k-switch-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[trackRounded] || trackRounded)] = trackRounded,
+            _a['k-switch-on'] = this.value,
+            _a['k-switch-off'] = !this.value,
+            _a['k-state-focused'] = focused,
+            _a['k-state-disabled'] = disabled,
+            _a['k-state-invalid'] = !isValid,
+            _a), this.props.className);
         var ariaAttributes = {
             'aria-checked': this.value,
             'aria-disabled': disabled || undefined
@@ -256,13 +253,18 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
         return (React.createElement("span", { ref: function (span) {
                 _this._wrapper = span;
             }, className: switchClassName, dir: this.dir, onKeyDown: this.handleKeyDown, onClick: this.handleClick, onBlur: this.handleWrapperBlur, onFocus: this.handleWrapperFocus },
-            React.createElement("span", __assign({ className: SWITCH_CONTAINER, id: id || this._id, role: 'switch' }, ariaAttributes, { "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, ref: function (span) {
+            React.createElement("span", __assign({ className: kendo_react_common_1.classNames('k-switch-track', (_b = {},
+                    _b["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[trackRounded] || trackRounded)] = trackRounded,
+                    _b)), id: id || this._id, role: 'switch' }, ariaAttributes, { "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, ref: function (span) {
                     _this._element = span;
                 }, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled, undefined), accessKey: this.props.accessKey }),
                 this.dummyInput(this.value),
-                React.createElement("span", { className: SWITCH_LABEL_ON }, onLabel),
-                React.createElement("span", { className: SWITCH_LABEL_OFF }, offLabel),
-                React.createElement("span", { className: SWITCH_HANDLE }))));
+                React.createElement("span", { className: 'k-switch-label-on' }, onLabel),
+                React.createElement("span", { className: 'k-switch-label-off' }, offLabel),
+                React.createElement("span", { className: 'k-switch-thumb-wrap' },
+                    React.createElement("span", { className: kendo_react_common_1.classNames('k-switch-thumb', (_c = {},
+                            _c["k-rounded-" + thumbRounded] = thumbRounded,
+                            _c)) })))));
     };
     SwitchWithoutContext.displayName = 'Switch';
     /**
@@ -274,6 +276,9 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
         className: PropTypes.string,
         disabled: PropTypes.bool,
         defaultChecked: PropTypes.bool,
+        size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+        trackRounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+        thumbRounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
         dir: PropTypes.string,
         id: PropTypes.string,
         ariaLabelledBy: PropTypes.string,
@@ -295,6 +300,9 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
     SwitchWithoutContext.defaultProps = {
         disabled: false,
         defaultChecked: false,
+        size: 'medium',
+        trackRounded: 'full',
+        thumbRounded: 'full',
         offLabel: 'OFF',
         onBlur: kendo_react_common_1.noop,
         onFocus: kendo_react_common_1.noop,