@progress/kendo-react-inputs 4.14.1-dev.202201181415 → 5.0.1-dev.202201200659

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1642513973,
+    publishDate: 1642660624,
     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/es/radiobutton/RadioButton.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { guid, classNames, dispatchEvent, getTabIndex, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
+import { guid, classNames, dispatchEvent, getTabIndex, createPropsContext, usePropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 /**
@@ -37,9 +37,10 @@ export var RadioButtonPropsContext = createPropsContext();
  * Obtaining the `ref` returns an object of type [RadioButtonHandle]({% slug api_inputs_radiobuttonhandle %}).
  */
 export var RadioButton = React.forwardRef(function (directProps, target) {
+    var _a;
     validatePackage(packageMetadata);
     var props = usePropsContext(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) {
@@ -65,11 +66,11 @@ export var RadioButton = React.forwardRef(function (directProps, target) {
             dispatchEvent(onBlur, event, getImperativeHandle(), undefined);
         }
     }, [onBlur, disabled]);
-    var inputProps = __assign({ type: 'radio', id: id || calculatedId, name: name, className: classNames({
-            'k-radio': true,
-            'k-state-invalid': valid === false,
-            'k-invalid': valid === false
-        }, className), ref: elementRef, disabled: disabled, tabIndex: 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: classNames('k-radio', (_a = {},
+            _a["k-radio-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a['k-state-invalid'] = valid === false,
+            _a['k-invalid'] = valid === false,
+            _a), className), ref: elementRef, disabled: disabled, tabIndex: 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'
@@ -87,6 +88,7 @@ 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,
@@ -98,4 +100,8 @@ RadioButton.propTypes = {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func
 };
+var defaultProps = {
+    size: 'medium'
+};
 RadioButton.displayName = 'KendoRadioButton';
+RadioButton.defaultProps = defaultProps;

package/dist/es/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/es/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/es/switch/Switch.js

@@ -24,15 +24,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, guid, noop, Keys, dispatchEvent, getTabIndex, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
+import { classNames, guid, noop, Keys, dispatchEvent, getTabIndex, createPropsContext, withPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { provideLocalizationService } from '@progress/kendo-react-intl';
 import { messages, switchValidation } from './../messages';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../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);
@@ -234,19 +230,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 = 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 = classNames('k-switch', (_a = {},
+            _a["k-switch-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-rounded-" + (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
@@ -254,13 +251,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: classNames('k-switch-track', (_b = {},
+                    _b["k-rounded-" + (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: 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: classNames('k-switch-thumb', (_c = {},
+                            _c["k-rounded-" + thumbRounded] = thumbRounded,
+                            _c)) })))));
     };
     SwitchWithoutContext.displayName = 'Switch';
     /**
@@ -272,6 +274,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,
@@ -293,6 +298,9 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
     SwitchWithoutContext.defaultProps = {
         disabled: false,
         defaultChecked: false,
+        size: 'medium',
+        trackRounded: 'full',
+        thumbRounded: 'full',
         offLabel: 'OFF',
         onBlur: noop,
         onFocus: noop,

package/dist/es/textarea/TextArea.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { guid, classNames, getTabIndex, dispatchEvent, useDir, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
+import { guid, classNames, getTabIndex, dispatchEvent, useDir, createPropsContext, usePropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 /**
  * Represents the PropsContext of the `TextArea` component.
  * Used for global configuration of all `TextArea` instances.
@@ -46,10 +46,11 @@ export var TextAreaPropsContext = createPropsContext();
  * ```
  */
 export var TextArea = React.forwardRef(function (directProps, target) {
+    var _a;
     var props = usePropsContext(TextAreaPropsContext, directProps);
-    var _a = props, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, autoSize = _a.autoSize, className = _a.className, defaultValue = _a.defaultValue, disabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, rows = _a.rows, id = _a.id, name = _a.name, placeholder = _a.placeholder, style = _a.style, tabIndex = _a.tabIndex, value = _a.value, valid = _a.valid, validationMessage = _a.validationMessage, validityStyles = _a.validityStyles, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, 
+    var _b = props, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, ariaDescribedBy = _b.ariaDescribedBy, ariaLabelledBy = _b.ariaLabelledBy, autoSize = _b.autoSize, className = _b.className, defaultValue = _b.defaultValue, disabled = _b.disabled, readOnly = _b.readOnly, required = _b.required, rows = _b.rows, id = _b.id, name = _b.name, placeholder = _b.placeholder, style = _b.style, tabIndex = _b.tabIndex, value = _b.value, valid = _b.valid, validationMessage = _b.validationMessage, validityStyles = _b.validityStyles, onChange = _b.onChange, onFocus = _b.onFocus, onBlur = _b.onBlur, 
     // Removed to support direct use in Form Field component
-    visited = _a.visited, touched = _a.touched, modified = _a.modified, others = __rest(_a, ["ariaDescribedBy", "ariaLabelledBy", "autoSize", "className", "defaultValue", "disabled", "readOnly", "required", "rows", "id", "name", "placeholder", "style", "tabIndex", "value", "valid", "validationMessage", "validityStyles", "onChange", "onFocus", "onBlur", "visited", "touched", "modified"]);
+    visited = _b.visited, touched = _b.touched, modified = _b.modified, others = __rest(_b, ["size", "rounded", "fillMode", "ariaDescribedBy", "ariaLabelledBy", "autoSize", "className", "defaultValue", "disabled", "readOnly", "required", "rows", "id", "name", "placeholder", "style", "tabIndex", "value", "valid", "validationMessage", "validityStyles", "onChange", "onFocus", "onBlur", "visited", "touched", "modified"]);
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
@@ -64,8 +65,8 @@ export var TextArea = React.forwardRef(function (directProps, target) {
         });
     }, [focusElement]);
     React.useImperativeHandle(target, getImperativeHandle);
-    var _b = React.useState(defaultValue), stateValue = _b[0], setStateValue = _b[1];
-    var _c = React.useState('auto'), textAreaHeight = _c[0], setTextAreaHeight = _c[1];
+    var _c = React.useState(defaultValue), stateValue = _c[0], setStateValue = _c[1];
+    var _d = React.useState('auto'), textAreaHeight = _d[0], setTextAreaHeight = _d[1];
     var calculatedId = React.useMemo(function () { return guid(); }, []);
     var dir = useDir(elementRef, props.dir);
     var isControlled = value !== undefined;
@@ -107,16 +108,16 @@ export var TextArea = React.forwardRef(function (directProps, target) {
             dispatchEvent(onBlur, event, getImperativeHandle(), undefined);
         }
     }, [onBlur, disabled]);
-    var spanProps = {
-        className: classNames('k-textarea', {
-            'k-state-invalid': !(isValid || validityStyles !== undefined || validityStyles === true),
-            'k-state-disabled': disabled
-        }, className),
-        style: style,
-        dir: dir
-    };
-    var textAreaProps = __assign({ id: id || calculatedId, name: name, className: 'k-input', ref: elementRef, disabled: disabled, rows: rows, placeholder: placeholder, readOnly: readOnly, required: required, tabIndex: getTabIndex(tabIndex, disabled), style: autoSize ? { resize: 'none', overflow: 'hidden', height: textAreaHeight } : {}, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-multiline': true, 'aria-disabled': disabled || undefined, value: isControlled ? value : stateValue }, others, { onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur });
-    return (React.createElement("span", __assign({}, spanProps),
+    var textAreaProps = __assign({ id: id || calculatedId, name: name, className: 'k-input-inner', ref: elementRef, disabled: disabled, rows: rows, placeholder: placeholder, readOnly: readOnly, required: required, tabIndex: getTabIndex(tabIndex, disabled), style: autoSize ? { resize: 'none', overflow: 'hidden', height: textAreaHeight } : {}, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-multiline': true, 'aria-disabled': disabled || undefined, value: isControlled ? value : stateValue }, others, { onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur });
+    return (React.createElement("span", { className: classNames('k-input', 'k-textarea', (_a = {},
+            _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-input-" + fillMode] = fillMode,
+            _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+            _a['k-valid'] = (isValid || validityStyles !== undefined || validityStyles === true),
+            _a['k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
+            _a['k-required'] = required,
+            _a['k-disabled'] = disabled,
+            _a), className), style: style, dir: dir },
         React.createElement("textarea", __assign({}, textAreaProps))));
 });
 TextArea.propTypes = {
@@ -141,6 +142,15 @@ TextArea.propTypes = {
     ]),
     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'])
+};
+var defaultProps = {
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid'
 };
 TextArea.displayName = 'KendoTextArea';
+TextArea.defaultProps = defaultProps;

package/dist/es/textarea/interfaces/TextAreaProps.d.ts

@@ -88,5 +88,42 @@ export interface TextAreaProps extends FormComponentProps, Omit<React.TextareaHT
      * The event handler that will be fired when TextArea is blurred.
      */
     onBlur?: (event: TextAreaBlurEvent) => void;
+    /**
+     * Configures the `size` of the TextArea.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the TextArea.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the TextArea.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }
 export {};

package/dist/npm/checkbox/Checkbox.js

@@ -48,11 +48,12 @@ exports.CheckboxPropsContext = kendo_react_common_1.createPropsContext();
  * ```
  */
 exports.Checkbox = React.forwardRef(function (directProps, target) {
+    var _a;
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
     var props = kendo_react_common_1.usePropsContext(exports.CheckboxPropsContext, directProps);
-    var _a = props, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, checked = _a.checked, className = _a.className, children = _a.children, defaultChecked = _a.defaultChecked, disabled = _a.disabled, defaultValue = _a.defaultValue, id = _a.id, label = _a.label, labelPlacement = _a.labelPlacement, name = _a.name, labelOptional = _a.labelOptional, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, tabIndex = _a.tabIndex, value = _a.value, required = _a.required, valid = _a.valid, validationMessage = _a.validationMessage, validityStyles = _a.validityStyles, 
+    var _b = props, ariaDescribedBy = _b.ariaDescribedBy, ariaLabelledBy = _b.ariaLabelledBy, checked = _b.checked, className = _b.className, children = _b.children, defaultChecked = _b.defaultChecked, disabled = _b.disabled, defaultValue = _b.defaultValue, id = _b.id, size = _b.size, rounded = _b.rounded, label = _b.label, labelPlacement = _b.labelPlacement, name = _b.name, labelOptional = _b.labelOptional, onChange = _b.onChange, onFocus = _b.onFocus, onBlur = _b.onBlur, tabIndex = _b.tabIndex, value = _b.value, required = _b.required, valid = _b.valid, validationMessage = _b.validationMessage, validityStyles = _b.validityStyles, 
     // Removed to support direct use in Form Field component
-    visited = _a.visited, touched = _a.touched, modified = _a.modified, others = __rest(_a, ["ariaDescribedBy", "ariaLabelledBy", "checked", "className", "children", "defaultChecked", "disabled", "defaultValue", "id", "label", "labelPlacement", "name", "labelOptional", "onChange", "onFocus", "onBlur", "tabIndex", "value", "required", "valid", "validationMessage", "validityStyles", "visited", "touched", "modified"]);
+    visited = _b.visited, touched = _b.touched, modified = _b.modified, others = __rest(_b, ["ariaDescribedBy", "ariaLabelledBy", "checked", "className", "children", "defaultChecked", "disabled", "defaultValue", "id", "size", "rounded", "label", "labelPlacement", "name", "labelOptional", "onChange", "onFocus", "onBlur", "tabIndex", "value", "required", "valid", "validationMessage", "validityStyles", "visited", "touched", "modified"]);
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
@@ -65,8 +66,8 @@ exports.Checkbox = React.forwardRef(function (directProps, target) {
         get name() { return elementRef.current && elementRef.current.name; }
     }); }, [focusElement]);
     React.useImperativeHandle(target, getImperativeHandle);
-    var _b = React.useState(defaultChecked), stateChecked = _b[0], setStateChecked = _b[1];
-    var _c = React.useState(defaultValue), stateValue = _c[0], setStateValue = _c[1];
+    var _c = React.useState(defaultChecked), stateChecked = _c[0], setStateChecked = _c[1];
+    var _d = React.useState(defaultValue), stateValue = _d[0], setStateValue = _d[1];
     var valueIsBoolean = (typeof value === 'boolean' || value === null);
     var isCheckedControlled = checked !== undefined;
     var isValueControlled = valueIsBoolean;
@@ -143,11 +144,12 @@ exports.Checkbox = React.forwardRef(function (directProps, target) {
     }, [onBlur, disabled, getImperativeHandle]);
     var dir = kendo_react_common_1.useDir(elementRef, props.dir);
     var checkboxClasses = kendo_react_common_1.classNames({ 'k-state-disabled': disabled }, className);
-    var inputProps = __assign({ type: 'checkbox', className: kendo_react_common_1.classNames({
-            'k-checkbox': true,
-            'k-state-indeterminate': indeterminateProp,
-            'k-state-invalid k-invalid': !(isValid || validityStyles !== undefined || validityStyles === true)
-        }), ref: elementRef, name: name, id: id || calculatedId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked: Boolean(checkedProp), disabled: disabled, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), role: 'checkbox', required: required !== undefined ? required : false, 'aria-checked': currentChecked || checkedProp ?
+    var inputProps = __assign({ type: 'checkbox', className: kendo_react_common_1.classNames('k-checkbox', (_a = {},
+            _a["k-checkbox-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+            _a['k-state-indeterminate'] = indeterminateProp,
+            _a['k-state-invalid k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
+            _a)), ref: elementRef, name: name, id: id || calculatedId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked: Boolean(checkedProp), disabled: disabled, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), role: 'checkbox', required: required !== undefined ? required : false, 'aria-checked': currentChecked || checkedProp ?
             true :
             indeterminateProp ?
                 'mixed' :
@@ -175,6 +177,8 @@ exports.Checkbox.propTypes = {
     dir: PropTypes.string,
     disabled: PropTypes.bool,
     id: PropTypes.string,
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large']),
     ariaLabelledBy: PropTypes.string,
     ariaDescribedBy: PropTypes.string,
     label: PropTypes.any,
@@ -191,4 +195,9 @@ exports.Checkbox.propTypes = {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func
 };
+var defaultProps = {
+    size: 'medium',
+    rounded: 'medium'
+};
+exports.Checkbox.defaultProps = defaultProps;
 exports.Checkbox.displayName = 'KendoCheckbox';

package/dist/npm/checkbox/interfaces/CheckboxProps.d.ts

@@ -12,7 +12,7 @@ declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
  * Represents the props of the [KendoReact Checkbox component]({% slug overview_checkbox %}).
  * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
  */
-export interface CheckboxProps extends ToggleBaseProps, FormComponentProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'value' | 'onChange' | 'onFocus' | 'onBlur'> {
+export interface CheckboxProps extends ToggleBaseProps, FormComponentProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'value' | 'size' | 'onChange' | 'onFocus' | 'onBlur'> {
     /**
      * Sets the checked state of the Checkbox.
      * Set to null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})).
@@ -53,6 +53,30 @@ export interface CheckboxProps extends ToggleBaseProps, FormComponentProps, Omit
      * Sets the `id` of the Checkbox.
      */
     id?: string;
+    /**
+     * Configures the `size` of the Checkbox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `rounded` style of the Checkbox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large';
     /**
      * 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.

package/dist/npm/colors/ColorInput.js

@@ -68,10 +68,10 @@ var ColorInput = /** @class */ (function (_super) {
         var aMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientA]);
         return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
             React.createElement("div", { className: "k-vstack" },
-                React.createElement(kendo_react_buttons_1.Button, { look: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
+                React.createElement(kendo_react_buttons_1.Button, { fillMode: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
             this.state.inputMode === 'hex' &&
                 React.createElement("div", { className: "k-vstack k-flex-1" },
-                    React.createElement("span", { className: "k-hex-value k-textbox" },
+                    React.createElement("span", { className: "k-hex-value k-textbox k-input" },
                         React.createElement(HexInput_1.default, { hex: this.props.hex, onHexChange: this.props.onHexChange, disabled: this.props.disabled })),
                     React.createElement(kendo_react_labels_1.Label, { className: "k-colorgradient-input-label" }, hexMessage)),
             (this.state.inputMode === 'rgb' || this.state.inputMode === 'rgba') &&

package/dist/npm/colors/ColorPicker.js

@@ -19,6 +19,7 @@ var package_metadata_1 = require("../package-metadata");
 var Picker_1 = require("./Picker");
 var ColorGradient_1 = require("./ColorGradient");
 var ColorPalette_1 = require("./ColorPalette");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 /**
  * @hidden
  */
@@ -59,9 +60,10 @@ exports.ColorPickerPropsContext = kendo_react_common_1.createPropsContext();
  * ```
  */
 exports.ColorPicker = React.forwardRef(function (directProps, target) {
+    var _a, _b;
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
     var props = kendo_react_common_1.usePropsContext(exports.ColorPickerPropsContext, directProps);
-    var popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
+    var _c = props.size, size = _c === void 0 ? defaultProps.size : _c, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.fillMode, fillMode = _e === void 0 ? defaultProps.fillMode : _e, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
     var focusableElementRef = React.useRef(null);
     var gradientRef = React.useRef(null);
     var paletteRef = React.useRef(null);
@@ -78,9 +80,9 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
         actionElement: buttonRef.current,
         focus: focusElement
     }); });
-    var _a = React.useState(false), focused = _a[0], setFocused = _a[1];
-    var _b = React.useState(props.defaultValue), stateValue = _b[0], setStateValue = _b[1];
-    var _c = React.useState(false), stateOpen = _c[0], setStateOpen = _c[1];
+    var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
+    var _g = React.useState(props.defaultValue), stateValue = _g[0], setStateValue = _g[1];
+    var _h = React.useState(false), stateOpen = _h[0], setStateOpen = _h[1];
     var isValueControlled = isControlled(props.value);
     var isOpenControlled = isControlled(props.open);
     var value = isValueControlled ? props.value : stateValue;
@@ -192,24 +194,27 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
     }, [isValueControlled, onChange]);
     var onPaletteChangeHandler = React.useCallback(function (event) { return onChangeHandler(event, true); }, [isControlled, onChangeHandler]);
     var dir = kendo_react_common_1.useDir(focusableElementRef, props.dir);
-    var iconClassName = props.iconClassName || (icon && "k-icon k-i-" + icon);
-    var wrapperClassName = kendo_react_common_1.classNames({
-        'k-widget': true,
-        'k-colorpicker': true,
-        'k-state-invalid': valid === false
-    });
-    var className = React.useMemo(function () { return kendo_react_common_1.classNames({
-        'k-picker-wrap': true,
-        'k-state-disabled': disabled,
-        'k-state-focused': focused
-    }); }, [focused, disabled]);
-    return (React.createElement("span", { className: wrapperClassName, dir: dir },
-        React.createElement("span", { id: props.id, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, className: className, ref: focusableElementRef, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), title: props.title, onKeyDown: onKeyDownHandler, onFocus: onFocusHandler, onBlur: onBlurHandler },
-            React.createElement(Picker_1.Picker, { dir: dir, open: open, onOpen: onOpenHandler, popupAnchor: focusableElementRef.current || undefined, popupSettings: __assign({}, popupSettings), input: (!iconClassName ? (React.createElement("span", { onClick: onActiveColorClickHandler, className: 'k-selected-color', style: { backgroundColor: value } }, !value && React.createElement("span", { className: 'k-icon k-i-line' }))) : (React.createElement("span", { onClick: onActiveColorClickHandler, className: kendo_react_common_1.classNames('k-tool-icon', iconClassName) },
-                    React.createElement("span", { className: 'k-selected-color', style: { backgroundColor: value } })))), button: (React.createElement("span", { onClick: onClickHandler, className: 'k-select', ref: buttonRef },
-                    React.createElement("span", { className: 'k-icon k-i-arrow-s' }))), content: (React.createElement(React.Fragment, null,
-                    (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient_1.ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
-                    (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette_1.ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) }))));
+    var isValid = valid !== false;
+    return (React.createElement("span", { id: props.id, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, className: kendo_react_common_1.classNames('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
+            _a["k-picker-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-picker-" + fillMode] = fillMode,
+            _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+            _a['k-valid'] = isValid,
+            _a['k-invalid'] = !isValid,
+            _a['k-disabled'] = disabled,
+            _a['k-focus'] = focused,
+            _a)), ref: focusableElementRef, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), title: props.title, onKeyDown: onKeyDownHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, dir: dir },
+        React.createElement(Picker_1.Picker, { dir: dir, open: open, onOpen: onOpenHandler, popupAnchor: focusableElementRef.current || undefined, popupSettings: __assign({}, popupSettings), input: (React.createElement("span", { onClick: onActiveColorClickHandler, className: 'k-input-inner' },
+                React.createElement("span", { className: kendo_react_common_1.classNames('k-value-icon', 'k-color-preview', {
+                        'k-no-color': !value,
+                        'k-icon-color-preview': (icon || iconClassName)
+                    }) },
+                    (iconClassName || icon) && React.createElement("span", { className: kendo_react_common_1.classNames('k-color-preview-icon', iconClassName, (_b = {},
+                            _b["k-icon k-i-" + icon] = (icon && !iconClassName),
+                            _b)) }),
+                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(kendo_react_buttons_1.Button, { type: "button", onClick: onClickHandler, className: "k-input-button", icon: 'arrow-s' })), content: (React.createElement(React.Fragment, null,
+                (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient_1.ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
+                (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette_1.ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) })));
 });
 exports.ColorPicker.propTypes = {
     value: PropTypes.string,
@@ -219,11 +224,18 @@ exports.ColorPicker.propTypes = {
     dir: PropTypes.string,
     id: PropTypes.string,
     ariaLabelledBy: PropTypes.string,
-    ariaDescribedBy: PropTypes.string
+    ariaDescribedBy: PropTypes.string,
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
 };
-exports.ColorPicker.defaultProps = {
+var defaultProps = {
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid',
     view: 'palette',
     gradientSettings: DEFAULT_GRADIENT_SETTINGS,
     paletteSettings: DEFAULT_PALETTE_SETTINGS
 };
+exports.ColorPicker.defaultProps = defaultProps;
 exports.ColorPicker.displayName = 'KendoColorPicker';