@progress/kendo-themes-html 6.7.0-dev.0 → 6.7.0-dev.2

package/dist/esm/grid/tests/grid-editing-custom-editor.js

@@ -6658,8 +6658,17 @@ var TimeSelectorHeader = (props) => {
 // src/time-selector/time-selector-fast-selection.tsx
 import { jsx as jsx79, jsxs as jsxs37 } from "react/jsx-runtime";
 
+// src/time-selector/templates/time-selector-all.tsx
+import { jsx as jsx80, jsxs as jsxs38 } from "react/jsx-runtime";
+
+// src/time-selector/templates/time-selector-hour.tsx
+import { jsx as jsx81, jsxs as jsxs39 } from "react/jsx-runtime";
+
+// src/time-selector/templates/time-selector-minute.tsx
+import { jsx as jsx82, jsxs as jsxs40 } from "react/jsx-runtime";
+
 // src/datetime-selector/datetime-selector.spec.tsx
-import { Fragment as Fragment21, jsx as jsx80, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx83, jsxs as jsxs41 } from "react/jsx-runtime";
 var DATETIMESELECTOR_CLASSNAME = `k-datetime-wrap`;
 var states33 = [];
 var options30 = {
@@ -6678,7 +6687,7 @@ var DateTimeSelector = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       ...other,
@@ -6694,20 +6703,20 @@ var DateTimeSelector = (props) => {
         })
       ),
       children: [
-        /* @__PURE__ */ jsx80("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ jsxs38(ButtonGroup, { stretched: true, children: [
-          /* @__PURE__ */ jsx80(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
-          /* @__PURE__ */ jsx80(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
+        /* @__PURE__ */ jsx83("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ jsxs41(ButtonGroup, { stretched: true, children: [
+          /* @__PURE__ */ jsx83(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
+          /* @__PURE__ */ jsx83(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
         ] }) }),
-        /* @__PURE__ */ jsx80("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ jsxs38(Fragment21, { children: [
-          /* @__PURE__ */ jsx80("div", { className: "k-datetime-calendar-wrap" }),
-          /* @__PURE__ */ jsx80("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ jsx80(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx80(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx80(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
-        ] }) : /* @__PURE__ */ jsxs38(Fragment21, { children: [
-          /* @__PURE__ */ jsx80("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ jsx80(Calendar, { size, showOtherMonth: true, dir }) }),
-          /* @__PURE__ */ jsx80("div", { className: "k-datetime-time-wrap" })
+        /* @__PURE__ */ jsx83("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ jsxs41(Fragment21, { children: [
+          /* @__PURE__ */ jsx83("div", { className: "k-datetime-calendar-wrap" }),
+          /* @__PURE__ */ jsx83("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ jsx83(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx83(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx83(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
+        ] }) : /* @__PURE__ */ jsxs41(Fragment21, { children: [
+          /* @__PURE__ */ jsx83("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ jsx83(Calendar, { size, showOtherMonth: true, dir }) }),
+          /* @__PURE__ */ jsx83("div", { className: "k-datetime-time-wrap" })
         ] }) }),
-        actionButtons && /* @__PURE__ */ jsxs38(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
-          /* @__PURE__ */ jsx80(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
-          /* @__PURE__ */ jsx80(Button, { size, className: "k-time-cancel", children: "Cancel" })
+        actionButtons && /* @__PURE__ */ jsxs41(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
+          /* @__PURE__ */ jsx83(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
+          /* @__PURE__ */ jsx83(Button, { size, className: "k-time-cancel", children: "Cancel" })
         ] })
       ]
     }
@@ -6719,7 +6728,7 @@ DateTimeSelector.className = DATETIMESELECTOR_CLASSNAME;
 DateTimeSelector.defaultProps = defaultProps29;
 
 // src/datetimepicker/datetimepicker.spec.tsx
-import { Fragment as Fragment22, jsx as jsx81, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx84, jsxs as jsxs42 } from "react/jsx-runtime";
 var DATETIMEPICKER_CLASSNAME = `k-datetimepicker`;
 var states34 = [
   States.hover,
@@ -6766,8 +6775,8 @@ var DateTimePicker = (props) => {
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs39(Fragment22, { children: [
-    /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs42(Fragment22, { children: [
+    /* @__PURE__ */ jsxs42(
       Input,
       {
         ...other,
@@ -6785,9 +6794,9 @@ var DateTimePicker = (props) => {
         readonly,
         className: classNames(props.className, DATETIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ jsx81(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ jsx81(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ jsx81(
+          /* @__PURE__ */ jsx84(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ jsx84(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ jsx84(
             InputValidationIcon,
             {
               valid,
@@ -6796,14 +6805,14 @@ var DateTimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ jsx81(
+          /* @__PURE__ */ jsx84(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ jsx81(
+          /* @__PURE__ */ jsx84(
             InputClearValue,
             {
               loading,
@@ -6812,8 +6821,8 @@ var DateTimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ jsx81(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ jsx81(
+          /* @__PURE__ */ jsx84(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ jsx84(
             Button,
             {
               className: "k-input-button",
@@ -6826,9 +6835,9 @@ var DateTimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ jsx81(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ jsx81(DateTimeSelector, { tab, dir }) }),
-    adaptive && /* @__PURE__ */ jsxs39(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ jsx81(
+    opened && /* @__PURE__ */ jsx84(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ jsx84(DateTimeSelector, { tab, dir }) }),
+    adaptive && /* @__PURE__ */ jsxs42(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ jsx84(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -6836,8 +6845,8 @@ var DateTimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ jsx81(DateTimeSelector, { size: "large", tab, actionButtons: false }),
-      /* @__PURE__ */ jsx81(ActionSheetFooter, { actions: ["Cancel", "!Set"] })
+      /* @__PURE__ */ jsx84(DateTimeSelector, { size: "large", tab, actionButtons: false }),
+      /* @__PURE__ */ jsx84(ActionSheetFooter, { actions: ["Cancel", "!Set"] })
     ] })
   ] });
 };
@@ -6847,16 +6856,16 @@ DateTimePicker.className = DATETIMEPICKER_CLASSNAME;
 DateTimePicker.defaultProps = defaultProps30;
 
 // src/datetimepicker/templates/datetimepicker-normal.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 
 // src/datetimepicker/templates/datetimepicker-popup.tsx
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 
 // src/datetimepicker/templates/datetimepicker-adaptive.tsx
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 
 // src/dropdownlist/dropdownlist.spec.tsx
-import { Fragment as Fragment23, jsx as jsx85, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx88, jsxs as jsxs43 } from "react/jsx-runtime";
 var DROPDOWNLIST_CLASSNAME = `k-dropdownlist`;
 var states35 = [
   States.hover,
@@ -6904,8 +6913,8 @@ var DropdownList = (props) => {
     opened,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs40(Fragment23, { children: [
-    /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs43(Fragment23, { children: [
+    /* @__PURE__ */ jsxs43(
       Picker,
       {
         ...other,
@@ -6928,8 +6937,8 @@ var DropdownList = (props) => {
           }
         ),
         children: [
-          /* @__PURE__ */ jsx85(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ jsx85(
+          /* @__PURE__ */ jsx88(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ jsx88(
             InputInnerSpan,
             {
               placeholder,
@@ -6938,7 +6947,7 @@ var DropdownList = (props) => {
               valueIconName
             }
           ),
-          /* @__PURE__ */ jsx85(
+          /* @__PURE__ */ jsx88(
             InputValidationIcon,
             {
               valid,
@@ -6947,15 +6956,15 @@ var DropdownList = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ jsx85(
+          /* @__PURE__ */ jsx88(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ jsx85(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ jsx85(
+          /* @__PURE__ */ jsx88(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ jsx88(
             Button,
             {
               className: "k-input-button",
@@ -6968,7 +6977,7 @@ var DropdownList = (props) => {
         ]
       }
     ),
-    opened && popup && /* @__PURE__ */ jsx85(Popup, { className: "k-list-container k-dropdownlist-popup", children: popup })
+    opened && popup && /* @__PURE__ */ jsx88(Popup, { className: "k-list-container k-dropdownlist-popup", children: popup })
   ] });
 };
 DropdownList.states = states35;
@@ -6977,25 +6986,25 @@ DropdownList.className = DROPDOWNLIST_CLASSNAME;
 DropdownList.defaultProps = defaultProps31;
 
 // src/dropdownlist/templates/dropdownlist-normal.tsx
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 
 // src/dropdownlist/templates/dropdownlist-popup.tsx
-import { jsx as jsx87, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs44 } from "react/jsx-runtime";
 
 // src/dropdownlist/templates/dropdownlist-filtering.tsx
-import { Fragment as Fragment24, jsx as jsx88, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx91, jsxs as jsxs45 } from "react/jsx-runtime";
 
 // src/dropdownlist/templates/dropdownlist-grouping.tsx
-import { jsx as jsx89, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs46 } from "react/jsx-runtime";
 
 // src/dropdownlist/templates/dropdownlist-grouping-filtering.tsx
-import { Fragment as Fragment25, jsx as jsx90, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx93, jsxs as jsxs47 } from "react/jsx-runtime";
 
 // src/chip/chip-action.tsx
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 
 // src/avatar/avatar.spec.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 var AVATAR_CLASSNAME = `k-avatar`;
 var states36 = [
   States.hover,
@@ -7040,7 +7049,7 @@ var Avatar = (props) => {
     border = defaultProps32.border,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx95(
     "div",
     {
       ...other,
@@ -7057,7 +7066,7 @@ var Avatar = (props) => {
           [`${AVATAR_CLASSNAME}-bordered`]: border
         }
       ),
-      children: /* @__PURE__ */ jsx92("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
+      children: /* @__PURE__ */ jsx95("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
     }
   );
 };
@@ -7067,16 +7076,16 @@ Avatar.className = AVATAR_CLASSNAME;
 Avatar.defaultProps = defaultProps32;
 
 // src/avatar/templates/avatar-icon.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 
 // src/avatar/templates/avatar-text.tsx
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 
 // src/avatar/templates/avatar-image.tsx
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 
 // src/chip/chip.spec.tsx
-import { jsx as jsx96, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs48 } from "react/jsx-runtime";
 var CHIP_CLASSNAME = `k-chip`;
 var states37 = [
   States.hover,
@@ -7120,7 +7129,7 @@ var Chip = (props) => {
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs48(
     "div",
     {
       ...other,
@@ -7142,10 +7151,10 @@ var Chip = (props) => {
         })
       ),
       children: [
-        icon && /* @__PURE__ */ jsx96(Icon, { className: "k-chip-icon", icon, size: "small" }),
-        showAvatar && /* @__PURE__ */ jsx96(Avatar, { className: "k-chip-avatar", type: "image", children: /* @__PURE__ */ jsx96("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-        /* @__PURE__ */ jsx96("span", { className: "k-chip-content", children: props.children ? props.children : text && /* @__PURE__ */ jsx96("span", { className: "k-chip-label k-text-ellipsis", children: text }) }),
-        actions && /* @__PURE__ */ jsx96("span", { className: "k-chip-actions", children: actions })
+        icon && /* @__PURE__ */ jsx99(Icon, { className: "k-chip-icon", icon, size: "small" }),
+        showAvatar && /* @__PURE__ */ jsx99(Avatar, { className: "k-chip-avatar", type: "image", children: /* @__PURE__ */ jsx99("img", { src: "/packages/html/assets/avatar.jpg" }) }),
+        /* @__PURE__ */ jsx99("span", { className: "k-chip-content", children: props.children ? props.children : text && /* @__PURE__ */ jsx99("span", { className: "k-chip-label k-text-ellipsis", children: text }) }),
+        actions && /* @__PURE__ */ jsx99("span", { className: "k-chip-actions", children: actions })
       ]
     }
   );
@@ -7156,7 +7165,7 @@ Chip.className = CHIP_CLASSNAME;
 Chip.defaultProps = defaultProps33;
 
 // src/chip/chip-list.spec.tsx
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 var CHIPLIST_CLASSNAME = `k-chip-list`;
 var states38 = [];
 var options35 = {
@@ -7170,7 +7179,7 @@ var ChipList = (props) => {
     size = defaultProps34.size,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx100(
     "div",
     {
       ...other,
@@ -7191,19 +7200,19 @@ ChipList.className = CHIPLIST_CLASSNAME;
 ChipList.defaultProps = defaultProps34;
 
 // src/chip/templates/chip-avatar.tsx
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
 
 // src/chip/templates/chip-icon.tsx
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
 
 // src/chip/templates/chip-normal.tsx
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
 
 // src/chip/templates/chip-removable.tsx
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
 
 // src/multiselect/multiselect.spec.tsx
-import { Fragment as Fragment26, jsx as jsx102, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx105, jsxs as jsxs49 } from "react/jsx-runtime";
 var MULTISELECT_CLASSNAME = `k-multiselect`;
 var states39 = [
   States.hover,
@@ -7246,10 +7255,12 @@ var MultiSelect = (props) => {
     disabled,
     readonly,
     opened,
+    adaptive,
+    adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs46(Fragment26, { children: [
-    /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs49(Fragment26, { children: [
+    /* @__PURE__ */ jsxs49(
       Input,
       {
         ...other,
@@ -7266,12 +7277,12 @@ var MultiSelect = (props) => {
         readonly,
         className: classNames(props.className, MULTISELECT_CLASSNAME),
         children: [
-          /* @__PURE__ */ jsx102(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ jsxs46("div", { className: "k-input-values", children: [
-            /* @__PURE__ */ jsx102(ChipList, { size, children: /* @__PURE__ */ jsx102(Fragment26, { children: tags }) }),
-            /* @__PURE__ */ jsx102(InputInnerInput, { placeholder, value })
+          /* @__PURE__ */ jsx105(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ jsxs49("div", { className: "k-input-values", children: [
+            /* @__PURE__ */ jsx105(ChipList, { size, children: /* @__PURE__ */ jsx105(Fragment26, { children: tags }) }),
+            /* @__PURE__ */ jsx105(InputInnerInput, { placeholder, value })
           ] }),
-          /* @__PURE__ */ jsx102(
+          /* @__PURE__ */ jsx105(
             InputValidationIcon,
             {
               valid,
@@ -7280,14 +7291,14 @@ var MultiSelect = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ jsx102(
+          /* @__PURE__ */ jsx105(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ jsx102(
+          /* @__PURE__ */ jsx105(
             InputClearValue,
             {
               loading,
@@ -7296,8 +7307,8 @@ var MultiSelect = (props) => {
               value: tags ? "value" : ""
             }
           ),
-          /* @__PURE__ */ jsx102(InputSuffix, { children: suffix }),
-          showArrowButton && /* @__PURE__ */ jsx102(
+          /* @__PURE__ */ jsx105(InputSuffix, { children: suffix }),
+          showArrowButton && /* @__PURE__ */ jsx105(
             Button,
             {
               className: "k-input-button",
@@ -7310,7 +7321,22 @@ var MultiSelect = (props) => {
         ]
       }
     ),
-    opened && popup && /* @__PURE__ */ jsx102(Popup, { className: "k-list-container k-multiselect-popup", children: popup })
+    opened && popup && /* @__PURE__ */ jsx105(Popup, { className: "k-list-container k-multiselect-popup", children: popup }),
+    adaptive && /* @__PURE__ */ jsxs49(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ jsx105(
+        ActionSheetHeader,
+        {
+          actions: ["x"],
+          filter: true,
+          title: "Select Item"
+        }
+      ),
+      /* @__PURE__ */ jsx105("div", { className: "k-list-container", children: /* @__PURE__ */ jsxs49(List, { size: "large", children: [
+        /* @__PURE__ */ jsx105(ListItem, { text: "List item" }),
+        /* @__PURE__ */ jsx105(ListItem, { text: "List item" }),
+        /* @__PURE__ */ jsx105(ListItem, { text: "List item" })
+      ] }) })
+    ] })
   ] });
 };
 MultiSelect.states = states39;
@@ -7318,8 +7344,26 @@ MultiSelect.options = options36;
 MultiSelect.className = MULTISELECT_CLASSNAME;
 MultiSelect.defaultProps = defaultProps35;
 
+// src/multiselect/templates/multiselect-normal.tsx
+import { jsx as jsx106 } from "react/jsx-runtime";
+
+// src/multiselect/templates/multiselect-popup.tsx
+import { jsx as jsx107, jsxs as jsxs50 } from "react/jsx-runtime";
+
+// src/multiselect/templates/multiselect-value.tsx
+import { Fragment as Fragment27, jsx as jsx108 } from "react/jsx-runtime";
+
+// src/multiselect/templates/multiselect-arrow-button.tsx
+import { jsx as jsx109 } from "react/jsx-runtime";
+
+// src/multiselect/templates/multiselect-adaptive.tsx
+import { jsx as jsx110 } from "react/jsx-runtime";
+
+// src/multiselect/templates/multiselect-grouping.tsx
+import { jsx as jsx111, jsxs as jsxs51 } from "react/jsx-runtime";
+
 // src/numerictextbox/numerictextbox.spec.tsx
-import { jsx as jsx103, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs52 } from "react/jsx-runtime";
 var NUMERICTEXTBOX_CLASSNAME = `k-numerictextbox`;
 var states40 = [
   States.hover,
@@ -7362,7 +7406,7 @@ var NumericTextbox = (props) => {
     showSpinButton = defaultProps36.showSpinButton,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs52(
     Input,
     {
       ...other,
@@ -7379,8 +7423,8 @@ var NumericTextbox = (props) => {
       readonly,
       className: classNames(props.className, NUMERICTEXTBOX_CLASSNAME),
       children: [
-        /* @__PURE__ */ jsx103(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx112(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ jsx112(
           InputValidationIcon,
           {
             valid,
@@ -7389,14 +7433,14 @@ var NumericTextbox = (props) => {
             disabled
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx112(
           InputLoadingIcon,
           {
             loading,
             disabled
           }
         ),
-        showClearButton && /* @__PURE__ */ jsx103(
+        showClearButton && /* @__PURE__ */ jsx112(
           InputClearValue,
           {
             loading,
@@ -7405,7 +7449,7 @@ var NumericTextbox = (props) => {
             value
           }
         ),
-        showSpinButton && /* @__PURE__ */ jsx103(
+        showSpinButton && /* @__PURE__ */ jsx112(
           SpinButton,
           {
             className: "k-input-spinner",
@@ -7423,10 +7467,10 @@ NumericTextbox.className = NUMERICTEXTBOX_CLASSNAME;
 NumericTextbox.defaultProps = defaultProps36;
 
 // src/numerictextbox/templates/numerictextbox-normal.tsx
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
 
 // src/switch/switch.spec.tsx
-import { jsx as jsx105, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs53 } from "react/jsx-runtime";
 var SWITCH_CLASSNAME = `k-switch`;
 var states41 = [
   States.hover,
@@ -7435,12 +7479,14 @@ var states41 = [
   States.checked
 ];
 var options38 = {
-  size: [Size.small, Size.medium, Size.large]
+  size: [Size.small, Size.medium, Size.large],
+  trackRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  thumbRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full]
 };
 var defaultProps37 = {
   size: Size.medium,
-  trackRounded: "full",
-  thumbRounded: "full"
+  trackRounded: Roundness.full,
+  thumbRounded: Roundness.full
 };
 var Switch = (props) => {
   const {
@@ -7455,7 +7501,7 @@ var Switch = (props) => {
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs48(
+  return /* @__PURE__ */ jsxs53(
     "span",
     {
       ...other,
@@ -7476,29 +7522,29 @@ var Switch = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsxs48(
+        /* @__PURE__ */ jsxs53(
           "span",
           {
             className: classNames(
               "k-switch-track",
-              {
-                [`k-rounded-${trackRounded}`]: trackRounded
-              }
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: trackRounded
+              })
             ),
             children: [
-              onLabel && /* @__PURE__ */ jsx105("span", { className: "k-switch-label-on", children: onLabel }),
-              offLabel && /* @__PURE__ */ jsx105("span", { className: "k-switch-label-off", children: offLabel })
+              onLabel && /* @__PURE__ */ jsx114("span", { className: "k-switch-label-on", children: onLabel }),
+              offLabel && /* @__PURE__ */ jsx114("span", { className: "k-switch-label-off", children: offLabel })
             ]
           }
         ),
-        /* @__PURE__ */ jsx105("span", { className: "k-switch-thumb-wrap", children: /* @__PURE__ */ jsx105(
+        /* @__PURE__ */ jsx114("span", { className: "k-switch-thumb-wrap", children: /* @__PURE__ */ jsx114(
           "span",
           {
             className: classNames(
               "k-switch-thumb",
-              {
-                [`k-rounded-${thumbRounded}`]: thumbRounded
-              }
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: thumbRounded
+              })
             )
           }
         ) })
@@ -7511,8 +7557,14 @@ Switch.options = options38;
 Switch.className = SWITCH_CLASSNAME;
 Switch.defaultProps = defaultProps37;
 
+// src/switch/templates/switch-normal.tsx
+import { jsx as jsx115 } from "react/jsx-runtime";
+
+// src/switch/templates/switch-checked.tsx
+import { jsx as jsx116 } from "react/jsx-runtime";
+
 // src/timepicker/timepicker.spec.tsx
-import { Fragment as Fragment27, jsx as jsx106, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx117, jsxs as jsxs54 } from "react/jsx-runtime";
 var TIMEPICKER_CLASSNAME = `k-timepicker`;
 var states42 = [
   States.hover,
@@ -7556,8 +7608,8 @@ var TimePicker = (props) => {
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs49(Fragment27, { children: [
-    /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs54(Fragment28, { children: [
+    /* @__PURE__ */ jsxs54(
       Input,
       {
         ...other,
@@ -7574,9 +7626,9 @@ var TimePicker = (props) => {
         readonly,
         className: classNames(props.className, TIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ jsx106(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ jsx106(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ jsx106(
+          /* @__PURE__ */ jsx117(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ jsx117(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ jsx117(
             InputValidationIcon,
             {
               valid,
@@ -7585,14 +7637,14 @@ var TimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ jsx106(
+          /* @__PURE__ */ jsx117(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ jsx106(
+          /* @__PURE__ */ jsx117(
             InputClearValue,
             {
               loading,
@@ -7601,8 +7653,8 @@ var TimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ jsx106(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ jsx106(
+          /* @__PURE__ */ jsx117(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ jsx117(
             Button,
             {
               className: "k-input-button",
@@ -7615,15 +7667,15 @@ var TimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ jsxs49(Popup, { className: "k-list-container k-timepicker-popup", children: [
-      /* @__PURE__ */ jsx106(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx106(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx106(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ jsxs49(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
-        /* @__PURE__ */ jsx106(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
-        /* @__PURE__ */ jsx106(Button, { className: "k-time-cancel", children: "Cancel" })
+    opened && /* @__PURE__ */ jsxs54(Popup, { className: "k-list-container k-timepicker-popup", children: [
+      /* @__PURE__ */ jsx117(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx117(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx117(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ jsxs54(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
+        /* @__PURE__ */ jsx117(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
+        /* @__PURE__ */ jsx117(Button, { className: "k-time-cancel", children: "Cancel" })
       ] })
     ] }),
-    adaptive && /* @__PURE__ */ jsxs49(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ jsx106(
+    adaptive && /* @__PURE__ */ jsxs54(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ jsx117(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -7631,8 +7683,8 @@ var TimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ jsx106(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ jsx106(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ jsx106(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ jsx106(ActionSheetFooter, { actions: ["Cancel", "!Set time"] })
+      /* @__PURE__ */ jsx117(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ jsx117(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ jsx117(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ jsx117(ActionSheetFooter, { actions: ["Cancel", "!Set time"] })
     ] })
   ] });
 };
@@ -7642,137 +7694,137 @@ TimePicker.className = TIMEPICKER_CLASSNAME;
 TimePicker.defaultProps = defaultProps38;
 
 // src/timepicker/templates/timepicker-normal.tsx
-import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx118 } from "react/jsx-runtime";
 
 // src/timepicker/templates/timepicker-popup.tsx
-import { jsx as jsx108 } from "react/jsx-runtime";
+import { jsx as jsx119 } from "react/jsx-runtime";
 
 // src/timepicker/templates/timepicker-adaptive.tsx
-import { jsx as jsx109 } from "react/jsx-runtime";
+import { jsx as jsx120 } from "react/jsx-runtime";
 
 // src/grid/tests/grid-editing-custom-editor.tsx
-import { Fragment as Fragment28, jsx as jsx110, jsxs as jsxs50 } from "react/jsx-runtime";
-var grid_editing_custom_editor_default = () => /* @__PURE__ */ jsx110(Fragment28, { children: /* @__PURE__ */ jsxs50("div", { id: "test-area", className: "k-d-grid", children: [
-  /* @__PURE__ */ jsx110("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ jsxs50("div", { className: "k-grid-aria-root", children: [
-    /* @__PURE__ */ jsx110("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx110("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs50("table", { className: "k-table k-table-md k-grid-header-table", children: [
-      /* @__PURE__ */ jsxs50("colgroup", { children: [
-        /* @__PURE__ */ jsx110("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {})
+import { Fragment as Fragment29, jsx as jsx121, jsxs as jsxs55 } from "react/jsx-runtime";
+var grid_editing_custom_editor_default = () => /* @__PURE__ */ jsx121(Fragment29, { children: /* @__PURE__ */ jsxs55("div", { id: "test-area", className: "k-d-grid", children: [
+  /* @__PURE__ */ jsx121("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ jsxs55("div", { className: "k-grid-aria-root", children: [
+    /* @__PURE__ */ jsx121("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx121("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs55("table", { className: "k-table k-table-md k-grid-header-table", children: [
+      /* @__PURE__ */ jsxs55("colgroup", { children: [
+        /* @__PURE__ */ jsx121("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {})
       ] }),
-      /* @__PURE__ */ jsx110("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs50("tr", { className: "k-table-row", children: [
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header" }),
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx110("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx110("span", { className: "k-link", children: /* @__PURE__ */ jsx110("span", { className: "k-column-title", children: "Autocomplete" }) }) }) }),
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx110("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx110("span", { className: "k-link", children: /* @__PURE__ */ jsx110("span", { className: "k-column-title", children: "Combobox" }) }) }) }),
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx110("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx110("span", { className: "k-link", children: /* @__PURE__ */ jsx110("span", { className: "k-column-title", children: "Dropdown" }) }) }) }),
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx110("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx110("span", { className: "k-link", children: /* @__PURE__ */ jsx110("span", { className: "k-column-title", children: "Multiselect" }) }) }) })
+      /* @__PURE__ */ jsx121("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs55("tr", { className: "k-table-row", children: [
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header" }),
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx121("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx121("span", { className: "k-link", children: /* @__PURE__ */ jsx121("span", { className: "k-column-title", children: "Autocomplete" }) }) }) }),
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx121("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx121("span", { className: "k-link", children: /* @__PURE__ */ jsx121("span", { className: "k-column-title", children: "Combobox" }) }) }) }),
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx121("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx121("span", { className: "k-link", children: /* @__PURE__ */ jsx121("span", { className: "k-column-title", children: "Dropdown" }) }) }) }),
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx121("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx121("span", { className: "k-link", children: /* @__PURE__ */ jsx121("span", { className: "k-column-title", children: "Multiselect" }) }) }) })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx110("div", { className: "k-grid-container", children: /* @__PURE__ */ jsx110("div", { className: "k-grid-content", children: /* @__PURE__ */ jsx110("div", { children: /* @__PURE__ */ jsxs50("table", { className: "k-table k-table-md k-grid-table", children: [
-      /* @__PURE__ */ jsxs50("colgroup", { children: [
-        /* @__PURE__ */ jsx110("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {})
+    /* @__PURE__ */ jsx121("div", { className: "k-grid-container", children: /* @__PURE__ */ jsx121("div", { className: "k-grid-content", children: /* @__PURE__ */ jsx121("div", { children: /* @__PURE__ */ jsxs55("table", { className: "k-table k-table-md k-grid-table", children: [
+      /* @__PURE__ */ jsxs55("colgroup", { children: [
+        /* @__PURE__ */ jsx121("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {})
       ] }),
-      /* @__PURE__ */ jsxs50("tbody", { className: "k-table-tbody", children: [
-        /* @__PURE__ */ jsxs50("tr", { className: "k-table-row k-grid-edit-row", children: [
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: "LTR" }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(Autocomplete, { placeholder: "Autocomplete..." }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(Combobox, { placeholder: "Combobox..." }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(DropdownList, { placeholder: "DropdownList..." }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(MultiSelect, { placeholder: "Multiselect..." }) })
+      /* @__PURE__ */ jsxs55("tbody", { className: "k-table-tbody", children: [
+        /* @__PURE__ */ jsxs55("tr", { className: "k-table-row k-grid-edit-row", children: [
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: "LTR" }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(Autocomplete, { placeholder: "Autocomplete..." }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(Combobox, { placeholder: "Combobox..." }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(DropdownList, { placeholder: "DropdownList..." }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(MultiSelect, { placeholder: "Multiselect..." }) })
         ] }),
-        /* @__PURE__ */ jsxs50("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: "RTL" }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(Autocomplete, { placeholder: "Autocomplete...", className: "k-rtl" }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(Combobox, { placeholder: "Combobox...", className: "k-rtl" }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(DropdownList, { placeholder: "DropdownList...", className: "k-rtl" }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(MultiSelect, { placeholder: "Multiselect...", className: "k-rtl" }) })
+        /* @__PURE__ */ jsxs55("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: "RTL" }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(Autocomplete, { placeholder: "Autocomplete...", className: "k-rtl" }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(Combobox, { placeholder: "Combobox...", className: "k-rtl" }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(DropdownList, { placeholder: "DropdownList...", className: "k-rtl" }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(MultiSelect, { placeholder: "Multiselect...", className: "k-rtl" }) })
         ] })
       ] })
     ] }) }) }) })
   ] }) }),
-  /* @__PURE__ */ jsx110("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ jsxs50("div", { className: "k-grid-aria-root", style: { overflow: "visible" }, children: [
-    /* @__PURE__ */ jsx110("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx110("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs50("table", { className: "k-table k-table-md k-grid-header-table", children: [
-      /* @__PURE__ */ jsxs50("colgroup", { children: [
-        /* @__PURE__ */ jsx110("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {})
+  /* @__PURE__ */ jsx121("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ jsxs55("div", { className: "k-grid-aria-root", style: { overflow: "visible" }, children: [
+    /* @__PURE__ */ jsx121("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx121("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs55("table", { className: "k-table k-table-md k-grid-header-table", children: [
+      /* @__PURE__ */ jsxs55("colgroup", { children: [
+        /* @__PURE__ */ jsx121("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {})
       ] }),
-      /* @__PURE__ */ jsx110("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs50("tr", { className: "k-table-row", children: [
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header" }),
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx110("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx110("span", { className: "k-link", children: /* @__PURE__ */ jsx110("span", { className: "k-column-title", children: "Datepicker" }) }) }) }),
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx110("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx110("span", { className: "k-link", children: /* @__PURE__ */ jsx110("span", { className: "k-column-title", children: "Timepicker" }) }) }) }),
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx110("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx110("span", { className: "k-link", children: /* @__PURE__ */ jsx110("span", { className: "k-column-title", children: "Datetime" }) }) }) }),
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx110("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx110("span", { className: "k-link", children: /* @__PURE__ */ jsx110("span", { className: "k-column-title", children: "Dateinput" }) }) }) })
+      /* @__PURE__ */ jsx121("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs55("tr", { className: "k-table-row", children: [
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header" }),
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx121("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx121("span", { className: "k-link", children: /* @__PURE__ */ jsx121("span", { className: "k-column-title", children: "Datepicker" }) }) }) }),
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx121("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx121("span", { className: "k-link", children: /* @__PURE__ */ jsx121("span", { className: "k-column-title", children: "Timepicker" }) }) }) }),
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx121("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx121("span", { className: "k-link", children: /* @__PURE__ */ jsx121("span", { className: "k-column-title", children: "Datetime" }) }) }) }),
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx121("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx121("span", { className: "k-link", children: /* @__PURE__ */ jsx121("span", { className: "k-column-title", children: "Dateinput" }) }) }) })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx110("div", { className: "k-grid-container", style: { overflow: "visible" }, children: /* @__PURE__ */ jsx110("div", { className: "k-grid-content", style: { overflow: "visible" }, children: /* @__PURE__ */ jsx110("div", { children: /* @__PURE__ */ jsxs50("table", { className: "k-table k-table-md k-grid-table", children: [
-      /* @__PURE__ */ jsxs50("colgroup", { children: [
-        /* @__PURE__ */ jsx110("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {})
+    /* @__PURE__ */ jsx121("div", { className: "k-grid-container", style: { overflow: "visible" }, children: /* @__PURE__ */ jsx121("div", { className: "k-grid-content", style: { overflow: "visible" }, children: /* @__PURE__ */ jsx121("div", { children: /* @__PURE__ */ jsxs55("table", { className: "k-table k-table-md k-grid-table", children: [
+      /* @__PURE__ */ jsxs55("colgroup", { children: [
+        /* @__PURE__ */ jsx121("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {})
       ] }),
-      /* @__PURE__ */ jsxs50("tbody", { className: "k-table-tbody", children: [
-        /* @__PURE__ */ jsxs50("tr", { className: "k-table-row k-grid-edit-row", children: [
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: "LTR" }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(DatePicker, { placeholder: "DatePicker..." }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(TimePicker, { placeholder: "TimePicker..." }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(DateTimePicker, { placeholder: "DateTimePicker..." }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(DateInput, { placeholder: "DateInput..." }) })
+      /* @__PURE__ */ jsxs55("tbody", { className: "k-table-tbody", children: [
+        /* @__PURE__ */ jsxs55("tr", { className: "k-table-row k-grid-edit-row", children: [
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: "LTR" }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(DatePicker, { placeholder: "DatePicker..." }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(TimePicker, { placeholder: "TimePicker..." }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(DateTimePicker, { placeholder: "DateTimePicker..." }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(DateInput, { placeholder: "DateInput..." }) })
         ] }),
-        /* @__PURE__ */ jsxs50("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: "RTL" }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(DatePicker, { placeholder: "DatePicker...", className: "k-rtl" }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(TimePicker, { placeholder: "TimePicker...", className: "k-rtl" }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(DateTimePicker, { placeholder: "DateTimePicker...", className: "k-rtl" }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(DateInput, { placeholder: "DateInput...", className: "k-rtl" }) })
+        /* @__PURE__ */ jsxs55("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: "RTL" }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(DatePicker, { placeholder: "DatePicker...", className: "k-rtl" }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(TimePicker, { placeholder: "TimePicker...", className: "k-rtl" }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(DateTimePicker, { placeholder: "DateTimePicker...", className: "k-rtl" }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(DateInput, { placeholder: "DateInput...", className: "k-rtl" }) })
         ] })
       ] })
     ] }) }) }) })
   ] }) }),
-  /* @__PURE__ */ jsx110("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ jsxs50("div", { className: "k-grid-aria-root", children: [
-    /* @__PURE__ */ jsx110("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx110("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs50("table", { className: "k-table k-table-md k-grid-header-table", children: [
-      /* @__PURE__ */ jsxs50("colgroup", { children: [
-        /* @__PURE__ */ jsx110("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {})
+  /* @__PURE__ */ jsx121("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ jsxs55("div", { className: "k-grid-aria-root", children: [
+    /* @__PURE__ */ jsx121("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx121("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ jsxs55("table", { className: "k-table k-table-md k-grid-header-table", children: [
+      /* @__PURE__ */ jsxs55("colgroup", { children: [
+        /* @__PURE__ */ jsx121("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {})
       ] }),
-      /* @__PURE__ */ jsx110("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs50("tr", { className: "k-table-row", children: [
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header" }),
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx110("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx110("span", { className: "k-link", children: /* @__PURE__ */ jsx110("span", { className: "k-column-title", children: "Numeric" }) }) }) }),
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx110("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx110("span", { className: "k-link", children: /* @__PURE__ */ jsx110("span", { className: "k-column-title", children: "Switch" }) }) }) }),
-        /* @__PURE__ */ jsx110("th", { className: "k-table-th k-header" })
+      /* @__PURE__ */ jsx121("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsxs55("tr", { className: "k-table-row", children: [
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header" }),
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx121("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx121("span", { className: "k-link", children: /* @__PURE__ */ jsx121("span", { className: "k-column-title", children: "Numeric" }) }) }) }),
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header", children: /* @__PURE__ */ jsx121("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx121("span", { className: "k-link", children: /* @__PURE__ */ jsx121("span", { className: "k-column-title", children: "Switch" }) }) }) }),
+        /* @__PURE__ */ jsx121("th", { className: "k-table-th k-header" })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx110("div", { className: "k-grid-container", children: /* @__PURE__ */ jsx110("div", { className: "k-grid-content", children: /* @__PURE__ */ jsx110("div", { children: /* @__PURE__ */ jsxs50("table", { className: "k-table k-table-md k-grid-table", children: [
-      /* @__PURE__ */ jsxs50("colgroup", { children: [
-        /* @__PURE__ */ jsx110("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {}),
-        /* @__PURE__ */ jsx110("col", {})
+    /* @__PURE__ */ jsx121("div", { className: "k-grid-container", children: /* @__PURE__ */ jsx121("div", { className: "k-grid-content", children: /* @__PURE__ */ jsx121("div", { children: /* @__PURE__ */ jsxs55("table", { className: "k-table k-table-md k-grid-table", children: [
+      /* @__PURE__ */ jsxs55("colgroup", { children: [
+        /* @__PURE__ */ jsx121("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {}),
+        /* @__PURE__ */ jsx121("col", {})
       ] }),
-      /* @__PURE__ */ jsxs50("tbody", { className: "k-table-tbody", children: [
-        /* @__PURE__ */ jsxs50("tr", { className: "k-table-row k-grid-edit-row", children: [
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: "LTR" }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(NumericTextbox, { placeholder: "Numeric..." }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(Switch, { checked: true }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td" })
+      /* @__PURE__ */ jsxs55("tbody", { className: "k-table-tbody", children: [
+        /* @__PURE__ */ jsxs55("tr", { className: "k-table-row k-grid-edit-row", children: [
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: "LTR" }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(NumericTextbox, { placeholder: "Numeric..." }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(Switch, { checked: true }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td" })
         ] }),
-        /* @__PURE__ */ jsxs50("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: "RTL" }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(NumericTextbox, { placeholder: "Numeric...", className: "k-rtl" }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td", children: /* @__PURE__ */ jsx110(Switch, { checked: true, className: "k-rtl" }) }),
-          /* @__PURE__ */ jsx110("td", { className: "k-table-td" })
+        /* @__PURE__ */ jsxs55("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: "RTL" }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(NumericTextbox, { placeholder: "Numeric...", className: "k-rtl" }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td", children: /* @__PURE__ */ jsx121(Switch, { checked: true, className: "k-rtl" }) }),
+          /* @__PURE__ */ jsx121("td", { className: "k-table-td" })
         ] })
       ] })
     ] }) }) }) })