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

package/docs/flatcolorpicker/customization.md

@@ -1,33 +0,0 @@
----
-title: FlatColorPicker Customization
-description: "Customize the KendoReact FlatColorPicker header or footer in React projects."
-slug: customization_flatcolorpicker
-position: 3
----
-
-
-# FlatColorPicker Header Customization
-
-To customize the FlatColorPicker header, use the [`header`]({% slug api_inputs_flatcolorpickerprops %}#toc-header) property.
-To hide the FlatColorPicker header, set the [`showClearButton`]({% slug api_inputs_flatcolorpickerprops %}#toc-showClearButton) and the [`showPreview`]({% slug api_inputs_flatcolorpickerprops %}#toc-showPreview) properties to `false`.
-
-The following example demonstrates how to hide the FlatColorPicker header content.
-
-{% meta height:470 %}
-{% embed_file flatcolorpicker/customization/header/func/main.tsx preview %}
-{% endmeta %}
-
-
-# FlatColorPicker Footer Customization
-
-To hide the FlatColorPicker footer, set the [`showButtons`]({% slug api_inputs_flatcolorpickerprops %}#toc-showButtons) property to `false`.
-
-The following example demonstrates how to hide the FlatColorPicker footer content.
-
-{% meta height:470 %}
-{% embed_file flatcolorpicker/customization/footer/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the FlatColorPicker]({% slug api_inputs_flatcolorpicker %})

package/docs/flatcolorpicker/disabled.md

@@ -1,22 +0,0 @@
----
-title: Disabled FlatColorPicker
-description: "Enable or disable the KendoReact FlatColorPicker in React projects."
-slug: disabled_flatcolorpicker
-position: 2
----
-
-# Disabled FlatColorPicker
-
-By default, the FlatColorPicker is enabled.
-
-To disable user interaction with the component, set the [`disabled`]({% slug api_inputs_flatcolorpickerprops %}#toc-disabled) property to `true`.
-
-
-{% meta height:470 %}
-{% embed_file flatcolorpicker/disabled/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the FlatColorPicker]({% slug api_inputs_flatcolorpicker %})

package/docs/flatcolorpicker/index.md

@@ -1,30 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features the KendoReact FlatColorPicker delivers and use the component in React projects."
-slug: overview_flatcolorpicker
-position: 1
----
-
-# KendoReact FlatColorPicker Overview
-
-The FlatColorPicker component provides a flat view for the ColorGradient and the ColorPalette components and adds a header and footer. The header contains the current color, the previously selected color, and a button that clears the selected value. The footer contains two buttons that you can configure to apply or cancel the selection.
-
-The following example demonstrates the FlatColorPicker in action.
-
-{% meta height:470 %}
-{% embed_file flatcolorpicker/basic/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Key Features
-
-* [Disabled FlatColorPicker]({% slug disabled_flatcolorpicker %})—You can render a disabled FlatColorPicker by setting a single property and keep it disabled until certain requirements are met.
-* [FlatColorPicker customization]({% slug customization_flatcolorpicker %})—You can customize the rendering of the FlatColorPicker header and footer.
-
-
-## Suggested Links
-
-* [API Reference of the FlatColorPicker]({% slug api_inputs_flatcolorpicker %})
-* [API Reference of the ColorGradient]({% slug api_inputs_colorgradient %})
-* [API Reference of the ColorPalette]({% slug api_inputs_colorpalette %})
-* [React FlatColorPicker High-Level Overview](https://www.telerik.com/kendo-react-ui/flatcolorpicker/)

package/docs/floating-labels.md

@@ -1,35 +0,0 @@
----
-title: Floating Labels
-description: "Implement floating labels in the KendoReact Inputs components."
-slug: floatinglabels_inputs
-position: 18
----
-
-# Floating Labels
-
-Floating labels are part of the [Material Design Guidelines](https://material.io/guidelines/) and are fully supported by the KendoReact Inputs components.
-
-## Basic Usage
-
-To enable the floating label functionality, pass the [`label`]({% slug api_inputs_numerictextboxprops %}#toc-label) property to the Inputs component.
-
-The following example demonstrates how to implement floating labels in the Input, NumericTextBox, and TextArea components and style them with the [KendoReact Material theme]({% slug preview_kendothemematerial %}).
-Please note that the floating label that wraps the TextArea component should have `k-textarea-container` class in order to be styled as expected.
-
-
-
-{% meta height:250 %}
-{% variant title:Hooks %}
-{% embed_file label/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file label/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the NumericTextBox Component]({% slug api_inputs_numerictextbox %})
-* [API Reference of the Input Component]({% slug api_inputs_inputprops %})
-* [Material Design Guidelines](https://material.io/guidelines/)

package/docs/get-started.md

@@ -1,153 +0,0 @@
----
-title: Getting Started
-description: "Get started with the Inputs package by KendoReact and learn how to use the components in React projects."
-slug: getstarted_inputs
-position: 1
----
-
-# Getting Started with the KendoReact Inputs
-
-This guide provides essential information about using the KendoReact Inputs package—you will learn how to install the package, add Input components to your project, style the components, and activate your license. You can apply the steps in this guide to all KendoReact Inputs.
-
-<div data-component="StartFreeTrialSection"></div>
-
-After completing this guide, you will be able to reproduce the following example.
-
-{% meta height:450 %}
-{% embed_file get-started/func/main.tsx preview %}
-{% endmeta %}
-
-## Setting Up Your React Project
-
-Before you install the KendoReact Inputs, make sure that you have a running React project. The easiest way to set up a React project is to use the [Create React App](https://github.com/facebook/create-react-app) approach that is described in the [Get Started with KendoReact]({% slug getting_started %}) article.
-
-## Installing the Components
-
-All KendoReact packages are distributed through npm and offer a similar installation experience. To use any of the Input components, start with the installation of the Inputs package and its [dependencies](#toc-dependencies). Use Node.js v5.0.0 or later.
-
-Navigate to the root folder of your React project and run the following command:
-
-   ```sh
-   npm install --save @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-drawing @progress/kendo-licensing
-   ```
-
-## Importing the Components
-
-After installing the Inputs package, import the desired components in the React App. This guide shows how to add the [ColorPicker]({% slug overview_colorpicker %}).
-
-In the App component file of your React project (for example, `src/App.js`), add the following code:
-
-```jsx-no-run
-// ES2015 module syntax
-import { ColorPicker } from '@progress/kendo-react-inputs';
-```
-
-```jsx-no-run
-// CommonJS format
-const { ColorPicker } = require('@progress/kendo-react-inputs');
-```
-
-If your project requires more Input components, you can import them too. The Inputs package provides the following components:
-
-* Checkbox
-* ColorGradient
-* ColorPalette
-* ColorPicker
-* FlatColorPicker
-* Input
-* MaskedTextBox
-* NumericTextBox
-* RadioButton
-* RadioGroup
-* RangeSlider
-* Rating
-* Signature
-* Slider
-* Switch
-* TextArea
-
-## Using the Components
-
-1. After installing the Inputs package and importing the ColorPicker, add the ColorPicker tags to the App component file of your React project (for example, `src/App.js`).
-
-   ```js
-   const App = () => {
-     return (
-       <div className="example-wrapper">
-         <ColorPicker view="gradient" defaultValue={'green'} />
-       </div>
-     );
-   };
-
-   ReactDOM.render(<App />, document.querySelector('my-app'));
-   ```
-
-1. To style the ColorPicker, install and import the [Default theme]({% slug preview_kendothemedefault %}), which is one of the [three beautiful themes]({% slug themesandstyles %}) for KendoReact.
-
-   2.1. Install the Default theme package.
-
-      ```sh
-      npm install --save @progress/kendo-theme-default
-      ```
-
-   2.2. Import the CSS file from the package in `src/App.js`. Add this import before your existing `App.css` import.
-
-      ```jsx
-      import '@progress/kendo-theme-default/dist/all.css';
-      ```
-
-1. Build and run the application by typing the following command in the root folder of your project:
-
-   ```sh
-   npm start
-   ```
-
-1. Navigate to <http://localhost:3000> to see the KendoReact ColorPicker component on the page.
-
-Now try to add another component from the Inputs package yourself. The procedures for [installing](#toc-installing-the-components), [importing](#toc-importing-the-components), and [using](#toc-using-the-components) the Input components are identical for all components in the package.
-
-## Activating Your License Key
-
-Using any of the UI components in the KendoReact library requires either a commercial license key or an active trial license key.
-
-Follow the instructions on the KendoReact [My License page]({% slug my_license %}) to activate your trial or commercial license. You can skip this step if your application already contains a KendoReact license file.
-
-## Dependencies
-
-The Inputs package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:
-
-| Package Name | Description |
-|--------------|-------------|
-| react 16.8.2* | Contains the functionality necessary to define React components. |
-| react-dom | Contains the React renderer for the web.|
-| @progress/kendo-licensing | Contains the internal infrastructure related to licensing. |
-| @progress/kendo-react-intl | Contains the KendoReact Internationalization package that applies the desired cultures by providing services and pipes for the parsing and formatting of dates and numbers. |
-| @progress/kendo-drawing | Contains the Drawing library, which provides interactive vector graphics. |
-
-## Suggested Links
-
-* [Checkbox Overview]({% slug overview_checkbox %})
-* [ColorGradient Overview]({% slug overview_colorgradient %})
-* [ColorPalette Overview]({% slug overview_colorpalette %})
-* [ColorPicker Overview]({% slug overview_colorpicker %})
-* [FlatColorPicker Overview]({% slug overview_flatcolorpicker %})
-* [Input Overview]({% slug overview_textbox %})
-* [MaskedTextBox Overview]({% slug overview_maskedtextbox %})
-* [NumericTextBox Overview]({% slug overview_numerictextbox %})
-* [RadioButton Overview]({% slug overview_radiobutton %})
-* [RadioGroup Overview]({% slug overview_radiogroup %})
-* [RangeSlider Overview]({% slug overview_rangeslider %})
-* [Rating Overview]({% slug overview_rating %})
-* [Signature Overview]({% slug overview_signature %})
-* [Slider Overview]({% slug overview_slider %})
-* [Switch Overview]({% slug overview_switch %})
-* [TextArea Overview]({% slug overview_textarea %})
-* [API Reference of the Inputs]({% slug api_inputs %})
-
-## Learning Resources
-
-* [Getting Started with KendoReact]({% slug getting_started %})
-* [Virtual Classroom (Training Courses for Registered Users)](https://learn.telerik.com/learn/course/external/view/elearning/14/kendoreact)
-* [Explore the Finance Portfolio Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/finance-application/)
-* [Explore the Coffee Warehouse Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/react-coffee-warehouse-dashboard/)
-* [Explore the Github Issues Grid Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/issues-grid/)

package/docs/globalization.md

@@ -1,67 +0,0 @@
----
-title: Globalization
-description: "Globalize the KendoReact Inputs in React projects by adapting to specific cultures, loading translated messages, or using the RTL support."
-slug: globalization_inputs
-position: 50
----
-
-# Globalization
-
-The globalization process combines the translation of component messages with adapting them to specific locales.
-
-For more information on how globalization practices are implemented in KendoReact, refer to the [overview article]({% slug overview_globalization %}). For more information on the globalization aspects which are available for each component, refer to the article on [globalization support]({% slug l10nsupport_l10n %}).
-
-The following example demonstrates how to show the value as a culture-specific currency in the available Inputs components and how to localize their built-in messages.
-
-
-
-{% meta %}
-{% embed_file globalization/func/main.tsx preview %}
-{% embed_file shared/es.json %}
-{% endmeta %}
-
-
-## Internationalization
-
-The internationalization process applies specific culture formats to a web application.
-
-For more information, refer to:
-* [KendoReact documentation on internationalization]({% slug overview_intl %})
-* [kendo-intl (the base Internationalization package on GitHub)](https://github.com/telerik/kendo-intl)
-
-## Messages
-
-The Inputs support the localization of their messages by utilizing the [KendoReact Internationalization package]({% slug overview_intl %}).
-
-The following table lists the built-in message keys and their default values.
-
-|Message Key                                |Default Value                                                           |
-|:----------------------------------------- |:---------------------------------------------------------------------- |
-|`numerictextbox.increment`                 | `Increase value`                                                       |
-|`numerictextbox.decrement`                 | `Decrease value`                                                       |
-|`slider.increment`                         | `Increase`                                                             |
-|`slider.decrement`                         | `Decrease`                                                             |
-|`slider.dragTitle`                         | `Drag`                                                                 |
-|`colorGradient.hex`                        | `hex`                                                                  |
-|`colorGradient.r`                          | `r`                                                                    |
-|`colorGradient.g`                          | `g`                                                                    |
-|`colorGradient.b`                          | `b`                                                                    |
-|`colorGradient.a`                          | `a`                                                                    |
-|`checkbox.validation`                      | `Please check this box if you want to proceed!`                        |
-
-## Right-to-Left Support
-
-The following example demonstrates how to utilize the RTL support for the Inputs.
-
-
-
-{% meta height:670 %}
-{% embed_file rtl/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [Globalization]({% slug overview_globalization %})
-* [Internationalization]({% slug overview_intl %})
-* [Localization]({% slug localization_intl %})

package/docs/index.md

@@ -1,212 +0,0 @@
----
-title: Overview
-description: "Discover the React Inputs package by KendoReact, learn more about its features and how to get started with the Inputs components in React projects."
-slug: overview_inputs
-position: 0
----
-
-# KendoReact Inputs Overview
-
-The KendoReact Inputs are fields that allow users to enter data based on specific and predefined formats.
-
-The KendoReact Input components are native KendoReact components built specifically for the React ecosystem. The KendoReact library is distributed through npm packages, and the Inputs are available as [@progress/kendo-react-inputs](https://www.npmjs.com/package/@progress/kendo-react-inputs).
-
-<div data-component="StartFreeTrialSection"></div>
-
-<Row>
-    <Column count={8}>
-        <Component href="{% slug overview_checkbox %}">
-            <svg id="checkbox" viewBox="0 0 24 24">
-                <path d="M0,0V24H24V0ZM22,22H2V2H22ZM20,7.8V5L10,15.2,6.8,12H4l6,6Z"/>
-            </svg>
-            <ComponentTitle>Checkbox</ComponentTitle>
-            <ComponentDescription>A component for selecting one or more items from a set.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_colorpalette %}">
-            <svg id="colorpalette" viewBox="0 0 24 24">
-                <path d="M12,2c0.8,0,1.5,0.1,2.3,0.3C14.1,2.8,14,3.4,14,4c0,3.3,2.7,6,6,6c0.6,0,1.2-0.1,1.7-0.3c0.2,0.7,0.3,1.5,0.3,2.3
-                    c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2 M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12c0-1.9-0.4-3.6-1.2-5.2
-                    C22.1,7.6,21.1,8,20,8c-2.2,0-4-1.8-4-4c0-1.1,0.4-2.1,1.2-2.8C15.6,0.4,13.9,0,12,0L12,0z M10.1,4.2c-1.1,0-2,0.9-2,2s0.9,2,2,2
-                    s2-0.9,2-2S11.2,4.2,10.1,4.2z M6.1,8.7c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S7.2,8.7,6.1,8.7z M7.9,14.3c-1.1,0-2,0.9-2,2
-                    c0,1.1,0.9,2,2,2s2-0.9,2-2C9.9,15.2,9,14.3,7.9,14.3z M13.8,15.8c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2s2-0.9,2-2
-                    C15.8,16.7,14.9,15.8,13.8,15.8z M17.9,11.6c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S19.1,11.6,17.9,11.6z M12,11
-                    c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S11.4,11,12,11 M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10L12,10z"/>
-            </svg>
-            <ComponentTitle>ColorPallete</ComponentTitle>
-            <ComponentDescription>A component for selecting one or more items from a set.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_colorgradient %}">
-            <svg id="colorgradient" viewBox="0 0 24 24">
-                <path d="M21,24V11h2v11L21,24z M23,3V0l-2,0v3H23z M20,5v4h4V5H20z M9,2.8c-2.7,2.8-7,8-7,12.2c0,3.9,3.1,7,7,7s7-3.1,7-7
-                    C16,10.8,11.7,5.6,9,2.8 M9,0c0,0,9,8,9,15c0,5-4,9-9,9s-9-4-9-9C0,8,9,0,9,0L9,0z M13,14h-2c0,1.7-1.3,3-3,3v2
-                    C10.8,19,13,16.8,13,14z"/>
-            </svg>
-            <ComponentTitle>ColorGradient</ComponentTitle>
-            <ComponentDescription>A component for displaying gradient, a hue and an alpha slider used to pick colors.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_colorpicker %}">
-            <svg id="colorpicker" viewBox="0 0 72 72">
-                <path d="M36,0C36,0,9,24,9,45c0,14.9,12.1,27,27,27s27-12.1,27-27C63,24,36,0,36,0z M36,66c-11.6,0-21-9.4-21-21 C15,27,36,8.1,36,8.1S57,27,57,45C57,56.6,47.6,66,36,66z M33,51v6c8.3,0,15-6.7,15-15h-6C42,47,38,51,33,51z"></path>
-            </svg>
-            <ComponentTitle>ColorPicker</ComponentTitle>
-            <ComponentDescription>A component for selecting and submitting color values.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_colorpicker %}">
-            <svg id="colorpicker" viewBox="0 0 72 72">
-                <path d="M36,0C36,0,9,24,9,45c0,14.9,12.1,27,27,27s27-12.1,27-27C63,24,36,0,36,0z M36,66c-11.6,0-21-9.4-21-21 C15,27,36,8.1,36,8.1S57,27,57,45C57,56.6,47.6,66,36,66z M33,51v6c8.3,0,15-6.7,15-15h-6C42,47,38,51,33,51z"></path>
-            </svg>
-            <ComponentTitle>FlatColorPicker</ComponentTitle>
-            <ComponentDescription>A component that provides a flat view for the ColorGradient and the ColorPalette components and adds a header and footer.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_textbox %}">
-            <svg id="textbox" viewbox="0 0 72 72">
-                <path d="M12,54h30l-6,6H12V54z M72,30v42H0V30H72z M66,36H6v30h60V36z" />
-            </svg>
-            <ComponentTitle>Input</ComponentTitle>
-            <ComponentDescription>A component for getting or displaying text input submitted by the user.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_maskedtextbox %}">
-            <svg id="textbox" viewbox="0 0 72 72">
-                <path d="M12,54h30l-6,6H12V54z M72,30v42H0V30H72z M66,36H6v30h60V36z" />
-            </svg>
-            <ComponentTitle>MaskedTextBox</ComponentTitle>
-            <ComponentDescription>A component for controlling the input of the user.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_numerictextbox %}">
-            <svg id="numerictextbox" viewbox="0 0 72 72">
-              <path d="M0,30v42h72V30H0z M66,66H6V36h60V66z M36,54H12v6h18L36,54z M54,42h6v6h-6V42z M54,54h6v6h-6V54z" />
-            </svg>
-            <ComponentTitle>NumericTextBox</ComponentTitle>
-            <ComponentDescription>A component for editing and submitting specific numeric values.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_radiobutton %}">
-            <svg id="radiobutton" viewBox="0 0 24 24">
-                <path d="M12,7a5,5,0,1,0,5,5A5,5,0,0,0,12,7Zm0-7A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10,10,0,0,1,12,22Z"/>
-            </svg>
-            <ComponentTitle>RadioButton</ComponentTitle>
-            <ComponentDescription>A component for selecting an option.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_radiogroup %}">
-            <svg id="radiogroup" viewBox="0 0 24 24">
-                <path class="cls-1" d="M18.5,9A2.5,2.5,0,1,0,21,11.5,2.5,2.5,0,0,0,18.5,9Zm0-3A5.5,5.5,0,1,0,24,11.5,5.5,5.5,0,0,0,18.5,6Zm0,9.9a4.4,4.4,0,1,1,4.4-4.4A4.4,4.4,0,0,1,18.5,15.9ZM5.5,6A5.5,5.5,0,1,0,11,11.5,5.5,5.5,0,0,0,5.5,6Zm0,9.9a4.4,4.4,0,1,1,4.4-4.4A4.4,4.4,0,0,1,5.5,15.9Z"/>
-            </svg>
-            <ComponentTitle>RadioGroup</ComponentTitle>
-            <ComponentDescription>A component for selecting one option from a set.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_slider %}">
-            <svg id="slider" viewbox="0 0 72 72">
-                <path d="M72,37H60v6h6L72,37z M0,37h36v6H0V37z M36,69h30l6-6H36V69z M0,63h12v6H0V63z M42,34h12v12H42V34z M18,60h12v12H18V60z" />
-            </svg>
-            <ComponentTitle>Slider</ComponentTitle>
-            <ComponentDescription>A component for selecting values from a predefined range.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_rangeslider %}">
-            <svg id="rangeslider" viewBox="0 0 24 24">
-                <path class="cls-1" d="M0,13H2V11H0Zm4,1H8V10H4Zm16-3v2h2l2-2ZM10,13h2V11H10Zm4,1h4V10H14Z"/>
-            </svg>
-            <ComponentTitle>RangeSlider</ComponentTitle>
-            <ComponentDescription>A component for selecting range-values from a predefined range.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_rating %}">
-            <svg id="rating" viewBox="0 0 24 24">
-                <path class="cls-1" d="M0,13H2V11H0Zm4,1H8V10H4Zm16-3v2h2l2-2ZM10,13h2V11H10Zm4,1h4V10H14Z"/>
-            </svg>
-            <ComponentTitle>Rating</ComponentTitle>
-            <ComponentDescription>A component for rating.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_switch %}">
-            <svg id="switch" viewbox="0 0 72 72">
-                <path d="M0,36v36h72V36H0z M66,66H6V42h60V66z M36,60H12V48h24V60z" />
-            </svg>
-            <ComponentTitle>Switch</ComponentTitle>
-            <ComponentDescription>A component for toggling between checked and unchecked states.</ComponentDescription>
-        </Component>
-    </Column>
-    <Column count={8}>
-        <Component href="{% slug overview_textarea %}">
-            <svg id="textarea" viewbox="0 0 24 24">
-                <path d="M0,0v2v20v1v1h22h1h1V2V0H0z M22,22H2V2h20V22z M18,18h2v2h-2V18z M6,11h2v3h2v-3V8.93V6L8,4H6L4,6v2.93V11v3h2 V11z M6,6h2v3H6V6z M18,12v-2l-1-1l1-1V6l-2-2h-4v10h4L18,12z M14,6h2v2h-2V6z M14,10h2v2h-2V10z"/>
-            </svg>
-            <ComponentTitle>TextArea</ComponentTitle>
-            <ComponentDescription>A component for getting or displaying text input on multiple lines submitted by the user.</ComponentDescription>
-        </Component>
-    </Column>
-</Row>
-
-
-The following example demonstrates all components included in Inputs package in action.
-
-
-
-{% meta height:670 %}
-{% embed_file overview/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Key Features
-
-The KendoReact Inputs provide a wide and always growing range of built-in features that isn't limited by the list in this section. This developer-friendly feature set allows you to create beautiful and functional applications faster. At the same time, the KendoReact development team works constantly to improve the performance of the components and their capabilities.
-
-### Forms Support
-
-You can easily integrate the Inputs with an [HTML5 form](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), the [KendoReact Form component]({% slug overview_form %}), or a third-party React form library. With the forms, you can validate input values and prevent the submission of incomplete or invalid forms. [Read more about the forms support of the MaskedTextBox...]({% slug forms_maskedtextbox %})
-
-
-### Floating Labels
-
-Initially popularized by [Material Design](https://material.io/guidelines/), the floating labels functionality is integrated into the KendoReact Inputs and can be easily configured through the `label` property. [Read more about the floating labels...]({% slug floatinglabels_inputs %})
-
-### Disabled Inputs
-
-You can render disabled Inputs by setting a single property and keep them disabled until certain requirements are met. [Read more about the Disabled MaskedTextBox...]({% slug disabled_maskedtextbox %})
-
-### Accessibility
-
-Most Inputs are accessible for screen readers and provide full [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) support. [Read more about the accessibility support of the Checkbox...]({% slug accessibility_checkbox %})
-
-### Keyboard Navigation
-
-Most Inputs support numerous keyboard shortcuts that allow users to interact with the corresponding component. [Read more about the keyboard navigation of the RadioGroup...]({% slug keyboard_navigation_radiogroup %})
-
-## Support Options
-
-For any questions about the use of the KendoReact Inputs, or any other [KendoReact components](https://www.telerik.com/kendo-react-ui/components/), there are [several support options available](https://www.telerik.com/kendo-react-ui/support/):
-
-* KendoReact license holders and anyone in an active trial can take advantage of the outstanding KendoReact customer support delivered by the developers who built the library. To submit a support ticket, use the [Telerik support system](https://www.telerik.com/account/support-tickets).
-* The [KendoReact forums](https://www.telerik.com/forums/kendo-ui-react) are part of the free support you can get from the community and from the KendoReact team on all kinds of general issues.
-* [KendoReact Feedback Portal](https://feedback.telerik.com/kendo-react-ui) and [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap) provide information on the features in discussion and also those planned for release.
-* KendoReact uses [GitHub Issues](https://github.com/telerik/kendo-react) as its bug tracker, and you can submit any related reports there. Also, check out the [closed list](https://github.com/telerik/kendo-react/issues?q=is%3Aissue+is%3Aclosed).
-* Need something unique that is tailor-made for your project? Progress offers its [Progress Services](https://www.progress.com/services) group that can work with you to create any customized solution that you might need.
-
-## Suggested Links
-
-* [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %})
-* [Getting Started with KendoReact (Online Guide)]({% slug getting_started %})
-* [Getting Started with KendoReact (Video Tutorials)](https://www.telerik.com/kendo-react-ui/resources/#videos)
-* [Virtual Classroom (Introductory Course Available to Trial and Commercial License Holders)](https://learn.telerik.com/learn/course/external/view/elearning/14/kendoreact)

package/docs/input/_meta.yml

@@ -1,3 +0,0 @@
-title: Input
-tags: component
-position: 7

package/docs/input/counter.md

@@ -1,20 +0,0 @@
----
-title: Characters Counter
-description: "Implement a counter of the KendoReact Input component in React projects."
-slug: counter_input
-position: 2
----
-
-# Characters Counter
-
-The following example demonstrates the KendoReact Input component with a characters counter in action.
-
-{% meta height:180 %}
-{% embed_file input/counter/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Input]({% slug api_inputs_input %})
-* [API Reference of the InputProps]({% slug api_inputs_inputprops %})