@progress/kendo-react-inputs 5.7.0-sig.202208281415 → 5.7.0

package/dist/es/checkbox/Checkbox.js

@@ -148,6 +148,7 @@ export var Checkbox = React.forwardRef(function (directProps, target) {
             _a["k-checkbox-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
             _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
             _a['k-indeterminate'] = indeterminateProp,
+            _a['k-disabled'] = disabled,
             _a['k-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: getTabIndex(tabIndex, disabled), role: 'checkbox', required: required !== undefined ? required : false, 'aria-checked': currentChecked || checkedProp ?
             true :

package/dist/es/colors/ColorInput.js

@@ -69,7 +69,7 @@ var ColorInput = /** @class */ (function (_super) {
         var toggleButtonMessage = localizationService.toLanguageString(colorGradientToggleInputsButton, messages[colorGradientToggleInputsButton]);
         return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
             React.createElement("div", { className: "k-vstack" },
-                React.createElement(Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
+                React.createElement(Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'caret-alt-expand', 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 k-input" },

package/dist/es/colors/ColorPalette.d.ts

@@ -28,7 +28,7 @@ export declare class ColorPaletteWithoutContext extends React.Component<ColorPal
      * @hidden
      */
     static propTypes: {
-        palette: PropTypes.Requireable<string | string[]>;
+        palette: PropTypes.Requireable<NonNullable<string | string[] | null | undefined>>;
         columns: PropTypes.Requireable<number>;
         tileSize: PropTypes.Requireable<any>;
         defaultValue: PropTypes.Requireable<string>;

package/dist/es/colors/ColorPicker.js

@@ -212,7 +212,7 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
                     (iconClassName || icon) && React.createElement("span", { className: classNames('k-color-preview-icon', iconClassName, (_b = {},
                             _b["k-icon k-i-".concat(icon)] = (icon && !iconClassName),
                             _b)) }),
-                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'arrow-s', "aria-label": localization.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
+                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', "aria-label": localization.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
                 (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
                 (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) })));
 });

package/dist/es/colors/FlatColorPicker.js

@@ -73,7 +73,7 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         (props.showClearButton && defaultProps.showClearButton) &&
                             React.createElement(Button, { type: "button", fillMode: 'flat', onClick: handleResetColor },
-                                React.createElement("span", { className: "k-icon k-i-reset-color" })),
+                                React.createElement("span", { className: "k-icon k-i-droplet-slash" })),
                         (props.showPreview && defaultProps.showPreview) &&
                             React.createElement("div", { className: "k-coloreditor-preview k-vstack" },
                                 React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),

package/dist/es/input/InputClearValue.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/**
+ * Represent the `ref` of the `InputClearValue` component.
+ */
+export declare type InputClearValueHandle = {
+    element: HTMLSpanElement | null;
+};
+/**
+ * Represents the `props` of the `InputClearValue` component.
+ */
+export declare type InputClearValueProps = React.HTMLAttributes<HTMLSpanElement>;
+/**
+ * Represents the KendoReact InputClearValue component.
+ */
+export declare const InputClearValue: React.ForwardRefExoticComponent<InputClearValueProps & React.RefAttributes<InputClearValueHandle>>;

package/dist/es/input/InputClearValue.js

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { classNames } from '@progress/kendo-react-common';
+/**
+ * Represents the KendoReact InputClearValue component.
+ */
+export var InputClearValue = React.forwardRef(function (props, ref) {
+    var target = React.useRef(null);
+    var element = React.useRef(null);
+    React.useImperativeHandle(target, function () { return ({ element: element.current }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    return (React.createElement("span", __assign({}, props, { className: classNames('k-clear-value', props.className) })));
+});
+InputClearValue.displayName = 'KendoReactInputClearValue';

package/dist/es/input/InputPrefix.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/**
+ * Represent the `ref` of the `InputPrefix` component.
+ */
+export declare type InputPrefixHandle = {
+    element: HTMLSpanElement | null;
+};
+/**
+ * Represents the `props` of the `InputPrefix` component.
+ */
+export declare type InputPrefixProps = React.HTMLAttributes<HTMLSpanElement>;
+/**
+ * Represents the KendoReact InputPrefix component.
+ */
+export declare const InputPrefix: React.ForwardRefExoticComponent<InputPrefixProps & React.RefAttributes<InputPrefixHandle>>;

package/dist/es/input/InputPrefix.js

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { classNames } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * Represents the KendoReact InputPrefix component.
+ */
+export var InputPrefix = React.forwardRef(function (props, ref) {
+    var target = React.useRef(null);
+    var element = React.useRef(null);
+    React.useImperativeHandle(target, function () { return ({ element: element.current }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    return (React.createElement("span", __assign({}, props, { className: classNames('k-input-prefix', props.className) })));
+});
+InputPrefix.displayName = 'KendoReactInputPrefix';

package/dist/es/input/InputSeparator.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/**
+ * Represent the `ref` of the `InputSeparator` component.
+ */
+export declare type InputSeparatorHandle = {
+    element: HTMLSpanElement | null;
+};
+/**
+ * Represents the `props` of the `InputSeparator` component.
+ */
+export declare type InputSeparatorProps = React.HTMLAttributes<HTMLSpanElement>;
+/**
+ * Represents the KendoReact InputSeparator component.
+ */
+export declare const InputSeparator: React.ForwardRefExoticComponent<InputSeparatorProps & React.RefAttributes<InputSeparatorHandle>>;

package/dist/es/input/InputSeparator.js

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { classNames } from '@progress/kendo-react-common';
+/**
+ * Represents the KendoReact InputSeparator component.
+ */
+export var InputSeparator = React.forwardRef(function (props, ref) {
+    var target = React.useRef(null);
+    var element = React.useRef(null);
+    React.useImperativeHandle(target, function () { return ({ element: element.current }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    return (React.createElement("span", __assign({}, props, { className: classNames('k-input-separator', props.className) })));
+});
+InputSeparator.displayName = 'KendoReactInputSeparator';

package/dist/es/input/InputSuffix.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/**
+ * Represent the `ref` of the `InputSuffix` component.
+ */
+export declare type InputSuffixHandle = {
+    element: HTMLSpanElement | null;
+};
+/**
+ * Represents the `props` of the `InputSuffix` component.
+ */
+export declare type InputSuffixProps = React.HTMLAttributes<HTMLSpanElement>;
+/**
+ * Represents the KendoReact InputSuffix component.
+ */
+export declare const InputSuffix: React.ForwardRefExoticComponent<InputSuffixProps & React.RefAttributes<InputSuffixHandle>>;

package/dist/es/input/InputSuffix.js

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { classNames } from '@progress/kendo-react-common';
+/**
+ * Represents the KendoReact InputSuffix component.
+ */
+export var InputSuffix = React.forwardRef(function (props, ref) {
+    var target = React.useRef(null);
+    var element = React.useRef(null);
+    React.useImperativeHandle(target, function () { return ({ element: element.current }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    return (React.createElement("span", __assign({}, props, { className: classNames('k-input-suffix', props.className) })));
+});
+InputSuffix.displayName = 'KendoReactInputSuffix';

package/dist/es/input/InputValidationIcon.d.ts

@@ -0,0 +1,14 @@
+import { IconHandle, IconProps } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * Represent the `ref` of the `InputValidationIcon` component.
+ */
+export declare type InputValidationIconHandle = IconHandle;
+/**
+ * Represents the `props` of the `InputValidationIcon` component.
+ */
+export declare type InputValidationIconProps = IconProps;
+/**
+ * Represents the KendoReact InputValidationIcon component.
+ */
+export declare const InputValidationIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconHandle>>;

package/dist/es/input/InputValidationIcon.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { classNames, Icon } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * Represents the KendoReact InputValidationIcon component.
+ */
+export var InputValidationIcon = React.forwardRef(function (props, ref) {
+    return React.createElement(Icon, __assign({ ref: ref }, props, { className: classNames('k-input-validation-icon', props.className) }));
+});
+InputValidationIcon.displayName = 'KendoReactInputValidationIcon';

package/dist/es/main.d.ts

@@ -52,3 +52,9 @@ export * from './rating/RatingItem';
 export * from './rating/models/index';
 export * from './signature/Signature';
 export * from './signature/interfaces';
+export { TextBox, TextBoxProps, TextBoxHandle, TextBoxChangeEvent } from './textbox/Textbox';
+export { InputClearValue, InputClearValueProps, InputClearValueHandle } from './input/InputClearValue';
+export { InputPrefix, InputPrefixProps, InputPrefixHandle } from './input/InputPrefix';
+export { InputSeparator, InputSeparatorProps, InputSeparatorHandle } from './input/InputSeparator';
+export { InputSuffix, InputSuffixProps, InputSuffixHandle } from './input/InputSuffix';
+export { InputValidationIcon, InputValidationIconProps, InputValidationIconHandle } from './input/InputValidationIcon';

package/dist/es/main.js

@@ -48,3 +48,9 @@ export * from './rating/RatingItem';
 export * from './rating/models/index';
 export * from './signature/Signature';
 export * from './signature/interfaces';
+export { TextBox } from './textbox/Textbox';
+export { InputClearValue } from './input/InputClearValue';
+export { InputPrefix } from './input/InputPrefix';
+export { InputSeparator } from './input/InputSeparator';
+export { InputSuffix } from './input/InputSuffix';
+export { InputValidationIcon } from './input/InputValidationIcon';

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

@@ -26,7 +26,7 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         className: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
-        width: PropTypes.Requireable<string | number>;
+        width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         tabIndex: PropTypes.Requireable<number>;
         accessKey: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;

package/dist/es/numerictextbox/NumericTextBox.js

@@ -272,8 +272,8 @@ export var NumericTextBox = React.forwardRef(function (directProps, target) {
         props.children,
         props.spinners &&
             (React.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: onMouseDown },
-                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'arrow-n', rounded: null, className: "k-spinner-increase", "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), onClick: onIncrease }),
-                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'arrow-s', rounded: null, className: "k-spinner-decrease", "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), onClick: onDecrease })))));
+                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'caret-alt-up', rounded: null, className: "k-spinner-increase", "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), onClick: onIncrease }),
+                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'caret-alt-down', rounded: null, className: "k-spinner-decrease", "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), onClick: onDecrease })))));
     return props.label
         ? (React.createElement(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;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1661696663,
+    publishDate: 1663154724,
     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/rating/Rating.js

@@ -226,7 +226,7 @@ export var Rating = React.forwardRef(function (directProps, ref) {
     }
     return (React.createElement("span", { id: props.id, style: props.style, ref: ratingRef, role: "slider", dir: dir, tabIndex: getTabIndex(props.tabIndex, props.disabled, undefined), className: classNames('k-rating k-widget', {
             'k-rtl': dir === 'rtl',
-            'k-state-readonly': readonly,
+            'k-readonly': readonly,
             'k-disabled': disabled
         }, props.className), onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value !== null ? value : undefined, "aria-disabled": disabled ? 'true' : undefined, "aria-label": localization.toLanguageString(ratingAriaLabel, messages[ratingAriaLabel]), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
         React.createElement("input", { id: 'rating', className: 'k-hidden', readOnly: readonly, disabled: disabled }),

package/dist/es/signature/Signature.js

@@ -45,16 +45,16 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+import { SignaturePad } from '@progress/kendo-inputs-common';
 import { Button } from '@progress/kendo-react-buttons';
-import { Dialog } from '@progress/kendo-react-dialogs';
 import { classNames, createPropsContext, dispatchEvent, getTabIndex, kendoThemeMaps, noop, usePropsContext } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
+import { Dialog } from '@progress/kendo-react-dialogs';
 import { useLocalization } from '@progress/kendo-react-intl';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import { messages, signatureClear, signatureMaximize, signatureMinimize } from '../messages';
 import { packageMetadata } from '../package-metadata';
-import { SignaturePad } from '@progress/kendo-inputs-common';
 import { hasParent } from './utils';
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 84;
@@ -285,17 +285,17 @@ export var Signature = React.forwardRef(function (directProps, target) {
                 'k-signature-maximized': props.maximized
             },
             _a["k-signature-".concat(kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
-            _a["k-signature-".concat(props.fillMode)] = props.fillMode,
+            _a["k-input-".concat(props.fillMode)] = props.fillMode,
             _a["k-rounded-".concat(kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
             _a['k-invalid'] = !isValid,
             _a['k-required'] = props.required,
             _a['k-disabled'] = props.disabled,
             _a['k-focus'] = focused,
-            _a), props.className), "aria-disabled": props.disabled ? 'true' : undefined, onFocus: onFocus, onBlur: onBlur },
+            _a), props.className), onFocus: onFocus, onBlur: onBlur },
         React.createElement("div", { className: 'k-signature-actions k-signature-actions-top' },
             showMaximize && (React.createElement(Button, { className: 'k-signature-action k-signature-maximize', icon: 'hyperlink-open', shape: null, fillMode: 'flat', size: props.size, onClick: onMaximizeClick, "aria-label": maximizeTitle, title: maximizeTitle })),
             showMinimize && (React.createElement(Button, { className: 'k-signature-action k-signature-minimize', icon: 'window-minimize', shape: null, fillMode: 'flat', size: props.size, onClick: onMinimizeClick, "aria-label": minimizeTitle, title: minimizeTitle }))),
-        React.createElement("div", { className: 'k-signature-canvas', tabIndex: getTabIndex(props.tabIndex, props.disabled), ref: canvasRef }),
+        React.createElement("div", { className: 'k-signature-canvas', ref: canvasRef, tabIndex: getTabIndex(props.tabIndex, props.disabled), role: "img", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-disabled": props.disabled ? 'true' : undefined }),
         !props.hideLine && (React.createElement("div", { className: 'k-signature-line', style: { zIndex: 2, pointerEvents: 'none' } })),
         React.createElement("div", { className: 'k-signature-actions k-signature-actions-bottom' }, showClear && (React.createElement(Button, { className: 'k-signature-action k-signature-clear', icon: 'close', shape: null, fillMode: 'flat', size: props.size, onClick: onClear, "aria-label": clearTitle, title: clearTitle }))),
         open && (React.createElement(Dialog, { ref: dialogRef },

package/dist/es/signature/interfaces/SignatureProps.d.ts

@@ -31,6 +31,10 @@ export interface SignatureProps extends FormComponentProps {
      * Sets the `tabIndex` property of the Signature.
      */
     tabIndex?: number;
+    /**
+     * Sets the `id` of the Signature DOM element.
+     */
+    id?: string;
     /**
      * Represents the `dir` HTML attribute.
      */

package/dist/es/slider/Slider.js

@@ -56,13 +56,9 @@ var SliderWithoutContext = /** @class */ (function (_super) {
                 return props.children;
             }
             return (React.createElement(React.Fragment, null,
-                React.createElement(Button, { className: "k-button-decrease k-rounded-full", 
-                    //   rounded={'full'}
-                    icon: _this.props.vertical ? 'arrow-s' : 'arrow-w', title: props.decrementTitle, onClick: props.decrement }),
+                React.createElement(Button, { className: "k-button-decrease", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-down' : 'caret-alt-left', title: props.decrementTitle, onClick: props.decrement }),
                 props.children,
-                React.createElement(Button, { className: "k-button-increase k-rounded-full", 
-                    //   rounded={'full'}
-                    icon: _this.props.vertical ? 'arrow-n' : 'arrow-e', title: props.incrementTitle, onClick: props.increment })));
+                React.createElement(Button, { className: "k-button-increase", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-up' : 'caret-alt-right', title: props.incrementTitle, onClick: props.increment })));
         };
         /**
          * @hidden

package/dist/es/slider/SliderLabel.js

@@ -26,6 +26,5 @@ export var SliderLabel = function (props) {
         ? { bottom: "".concat(props.position, "%") }
         : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = "".concat(props.position, "%"), _a);
     var tickStyle = props.vertical ? 'k-tick-vertical' : 'k-tick-horizontal';
-    return (React.createElement("li", { ref: sliderLabelRef, className: "k-tick k-tick-large ".concat(tickStyle), title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) },
-        React.createElement("span", __assign({}, (_b = {}, _b[SLIDER_LABEL_ATTRIBUTE] = true, _b), { className: "k-label", onClick: props.onClick }), props.children)));
+    return (React.createElement("li", { ref: sliderLabelRef, className: "k-tick k-tick-large ".concat(tickStyle), title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) }, props.children && React.createElement("span", __assign({}, (_b = {}, _b[SLIDER_LABEL_ATTRIBUTE] = true, _b), { className: "k-label", onClick: props.onClick }), props.children)));
 };

package/dist/es/switch/Switch.js

@@ -264,11 +264,11 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
                 }, tabIndex: getTabIndex(tabIndex, disabled, undefined), accessKey: this.props.accessKey }),
                 this.dummyInput(this.value),
                 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-".concat(thumbRounded)] = thumbRounded,
-                            _c)) })))));
+                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-".concat(thumbRounded)] = thumbRounded,
+                        _c)) }))));
     };
     SwitchWithoutContext.displayName = 'Switch';
     /**

package/dist/es/textbox/Textbox.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { BaseEvent, CustomComponent } from '@progress/kendo-react-common';
+export interface TextBoxChangeEvent extends BaseEvent<TextBoxHandle> {
+    syntheticEvent: React.ChangeEvent<HTMLInputElement>;
+    value: React.InputHTMLAttributes<HTMLInputElement>['value'];
+}
+/**
+ * Represents the properties of the KendoReact [TextBox]({% slug api_inputs_textbox %}) component
+ */
+export interface TextBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'onChange'> {
+    /**
+     * Configures the `size` of the TextBox.
+     *
+     * 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 TextBox.
+     *
+     * 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 TextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * The `onChange` callback of the `input` element inside the TextBox.
+     */
+    onChange?: (event: TextBoxChangeEvent) => void;
+    /**
+     * Indicates if the component is in `valid` state
+     */
+    valid?: boolean;
+    prefix?: CustomComponent<any>;
+    suffix?: CustomComponent<any>;
+}
+/**
+ * Represent the `ref` of the TextBox component.
+ */
+export declare type TextBoxHandle = {
+    element: HTMLInputElement | null;
+    value: TextBoxProps['value'];
+};
+/**
+ * Represents the [KendoReact TextBox component]({% slug overview_textbox %}).
+ */
+export declare const TextBox: React.ForwardRefExoticComponent<TextBoxProps & React.RefAttributes<TextBoxHandle | null>>;

package/dist/es/textbox/Textbox.js

@@ -0,0 +1,111 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { classNames, kendoThemeMaps, useAsyncFocusBlur, useCustomComponent, validatePackage } from '@progress/kendo-react-common';
+import { packageMetadata } from '../package-metadata';
+;
+/**
+ * Represents the [KendoReact TextBox component]({% slug overview_textbox %}).
+ */
+export var TextBox = React.forwardRef(function (props, ref) {
+    var _a;
+    validatePackage(packageMetadata);
+    var element = React.useRef(null);
+    var target = React.useRef(null);
+    var valueDuringChangeRef = React.useRef();
+    var valueGetter = React.useCallback(function () {
+        var _a;
+        if (valueDuringChangeRef.current !== undefined) {
+            return valueDuringChangeRef.current;
+        }
+        else {
+            return (_a = element.current) === null || _a === void 0 ? void 0 : _a.value;
+        }
+    }, []);
+    React.useImperativeHandle(target, function () {
+        var result = {
+            element: element.current
+        };
+        Object.defineProperty(result, 'value', { get: valueGetter });
+        return result;
+    });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    var _b = props, size = _b.size, fillMode = _b.fillMode, rounded = _b.rounded, className = _b.className, dir = _b.dir, style = _b.style, _c = _b.prefix, prefix = _c === void 0 ? defaultProps.prefix : _c, _d = _b.suffix, suffix = _d === void 0 ? defaultProps.suffix : _d, valid = _b.valid, 
+    // Destruct to avoid warning when used inside a form field
+    _modified = _b.modified, _touched = _b.touched, _visited = _b.visited, other = __rest(_b, ["size", "fillMode", "rounded", "className", "dir", "style", "prefix", "suffix", "valid", "modified", "touched", "visited"]);
+    var Prefix = useCustomComponent(prefix)[0];
+    var Suffix = useCustomComponent(suffix)[0];
+    var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
+    var handleFocus = function (_) {
+        setFocused(true);
+    };
+    var handleBlur = function (_) {
+        setFocused(false);
+    };
+    var handleChange = React.useCallback(function (event) {
+        valueDuringChangeRef.current = event.target.value;
+        if (props.onChange) {
+            props.onChange.call(undefined, {
+                syntheticEvent: event,
+                nativeEvent: event.nativeEvent,
+                value: event.target.value,
+                target: target.current
+            });
+        }
+        valueDuringChangeRef.current = undefined;
+    }, [props.onChange]);
+    var _f = useAsyncFocusBlur({
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onSyncFocus: props.onFocus,
+        onSyncBlur: props.onBlur
+    }), onFocus = _f.onFocus, onBlur = _f.onBlur;
+    return (React.createElement("span", { style: style, dir: dir, className: classNames('k-input', (_a = {},
+            _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-input-".concat(fillMode)] = fillMode,
+            _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+            _a), {
+            'k-focus': focused,
+            'k-required': props.required,
+            'k-disabled': props.disabled,
+            'k-invalid': props.valid === false
+        }, className), onFocus: onFocus, onBlur: onBlur },
+        React.createElement(Prefix, null),
+        React.createElement("input", __assign({ ref: element, className: "k-input-inner" }, other, { onChange: handleChange })),
+        React.createElement(Suffix, null)));
+});
+var defaultProps = {
+    prefix: function (_) { return null; },
+    suffix: function (_) { return null; },
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid'
+};
+TextBox.propTypes = {
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
+};
+TextBox.displayName = 'KendoReactTextBoxComponent';
+TextBox.defaultProps = defaultProps;

package/dist/npm/checkbox/Checkbox.js

@@ -151,6 +151,7 @@ exports.Checkbox = React.forwardRef(function (directProps, target) {
             _a["k-checkbox-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
             _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
             _a['k-indeterminate'] = indeterminateProp,
+            _a['k-disabled'] = disabled,
             _a['k-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: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled), role: 'checkbox', required: required !== undefined ? required : false, 'aria-checked': currentChecked || checkedProp ?
             true :

package/dist/npm/colors/ColorInput.js

@@ -71,7 +71,7 @@ var ColorInput = /** @class */ (function (_super) {
         var toggleButtonMessage = localizationService.toLanguageString(messages_1.colorGradientToggleInputsButton, messages_1.messages[messages_1.colorGradientToggleInputsButton]);
         return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
             React.createElement("div", { className: "k-vstack" },
-                React.createElement(kendo_react_buttons_1.Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
+                React.createElement(kendo_react_buttons_1.Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'caret-alt-expand', 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 k-input" },