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

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

@@ -6677,8 +6677,17 @@ var TimeSelectorHeader = (props) => {
 // src/time-selector/time-selector-fast-selection.tsx
 var import_jsx_runtime79 = require("react/jsx-runtime");
 
-// src/datetime-selector/datetime-selector.spec.tsx
+// src/time-selector/templates/time-selector-all.tsx
 var import_jsx_runtime80 = require("react/jsx-runtime");
+
+// src/time-selector/templates/time-selector-hour.tsx
+var import_jsx_runtime81 = require("react/jsx-runtime");
+
+// src/time-selector/templates/time-selector-minute.tsx
+var import_jsx_runtime82 = require("react/jsx-runtime");
+
+// src/datetime-selector/datetime-selector.spec.tsx
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var DATETIMESELECTOR_CLASSNAME = `k-datetime-wrap`;
 var states33 = [];
 var options30 = {
@@ -6697,7 +6706,7 @@ var DateTimeSelector = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
     "div",
     {
       ...other,
@@ -6713,20 +6722,20 @@ var DateTimeSelector = (props) => {
         })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(ButtonGroup, { stretched: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(ButtonGroup, { stretched: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "k-datetime-calendar-wrap" }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Calendar, { size, showOtherMonth: true, dir }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "k-datetime-time-wrap" })
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "k-datetime-calendar-wrap" }),
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Calendar, { size, showOtherMonth: true, dir }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "k-datetime-time-wrap" })
         ] }) }),
-        actionButtons && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Button, { size, className: "k-time-cancel", children: "Cancel" })
+        actionButtons && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Button, { size, className: "k-time-cancel", children: "Cancel" })
         ] })
       ]
     }
@@ -6738,7 +6747,7 @@ DateTimeSelector.className = DATETIMESELECTOR_CLASSNAME;
 DateTimeSelector.defaultProps = defaultProps29;
 
 // src/datetimepicker/datetimepicker.spec.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var DATETIMEPICKER_CLASSNAME = `k-datetimepicker`;
 var states34 = [
   States.hover,
@@ -6785,8 +6794,8 @@ var DateTimePicker = (props) => {
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
       Input,
       {
         ...other,
@@ -6804,9 +6813,9 @@ var DateTimePicker = (props) => {
         readonly,
         className: classNames(props.className, DATETIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -6815,14 +6824,14 @@ var DateTimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             InputClearValue,
             {
               loading,
@@ -6831,8 +6840,8 @@ var DateTimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             Button,
             {
               className: "k-input-button",
@@ -6845,9 +6854,9 @@ var DateTimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DateTimeSelector, { tab, dir }) }),
-    adaptive && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    opened && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DateTimeSelector, { tab, dir }) }),
+    adaptive && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -6855,8 +6864,8 @@ var DateTimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DateTimeSelector, { size: "large", tab, actionButtons: false }),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set"] })
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DateTimeSelector, { size: "large", tab, actionButtons: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set"] })
     ] })
   ] });
 };
@@ -6866,16 +6875,16 @@ DateTimePicker.className = DATETIMEPICKER_CLASSNAME;
 DateTimePicker.defaultProps = defaultProps30;
 
 // src/datetimepicker/templates/datetimepicker-normal.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 
 // src/datetimepicker/templates/datetimepicker-popup.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 
 // src/datetimepicker/templates/datetimepicker-adaptive.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 
 // src/dropdownlist/dropdownlist.spec.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var DROPDOWNLIST_CLASSNAME = `k-dropdownlist`;
 var states35 = [
   States.hover,
@@ -6923,8 +6932,8 @@ var DropdownList = (props) => {
     opened,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
       Picker,
       {
         ...other,
@@ -6947,8 +6956,8 @@ var DropdownList = (props) => {
           }
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             InputInnerSpan,
             {
               placeholder,
@@ -6957,7 +6966,7 @@ var DropdownList = (props) => {
               valueIconName
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -6966,15 +6975,15 @@ var DropdownList = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             Button,
             {
               className: "k-input-button",
@@ -6987,7 +6996,7 @@ var DropdownList = (props) => {
         ]
       }
     ),
-    opened && popup && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Popup, { className: "k-list-container k-dropdownlist-popup", children: popup })
+    opened && popup && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Popup, { className: "k-list-container k-dropdownlist-popup", children: popup })
   ] });
 };
 DropdownList.states = states35;
@@ -6996,25 +7005,25 @@ DropdownList.className = DROPDOWNLIST_CLASSNAME;
 DropdownList.defaultProps = defaultProps31;
 
 // src/dropdownlist/templates/dropdownlist-normal.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 
 // src/dropdownlist/templates/dropdownlist-popup.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 
 // src/dropdownlist/templates/dropdownlist-filtering.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 
 // src/dropdownlist/templates/dropdownlist-grouping.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 
 // src/dropdownlist/templates/dropdownlist-grouping-filtering.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 
 // src/chip/chip-action.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 
 // src/avatar/avatar.spec.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var AVATAR_CLASSNAME = `k-avatar`;
 var states36 = [
   States.hover,
@@ -7059,7 +7068,7 @@ var Avatar = (props) => {
     border = defaultProps32.border,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     "div",
     {
       ...other,
@@ -7076,7 +7085,7 @@ var Avatar = (props) => {
           [`${AVATAR_CLASSNAME}-bordered`]: border
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
     }
   );
 };
@@ -7086,16 +7095,16 @@ Avatar.className = AVATAR_CLASSNAME;
 Avatar.defaultProps = defaultProps32;
 
 // src/avatar/templates/avatar-icon.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 
 // src/avatar/templates/avatar-text.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 
 // src/avatar/templates/avatar-image.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 
 // src/chip/chip.spec.tsx
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var CHIP_CLASSNAME = `k-chip`;
 var states37 = [
   States.hover,
@@ -7139,7 +7148,7 @@ var Chip = (props) => {
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "div",
     {
       ...other,
@@ -7161,10 +7170,10 @@ var Chip = (props) => {
         })
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Icon, { className: "k-chip-icon", icon, size: "small" }),
-        showAvatar && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Avatar, { className: "k-chip-avatar", type: "image", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "k-chip-content", children: props.children ? props.children : text && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "k-chip-label k-text-ellipsis", children: text }) }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "k-chip-actions", children: actions })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Icon, { className: "k-chip-icon", icon, size: "small" }),
+        showAvatar && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Avatar, { className: "k-chip-avatar", type: "image", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "k-chip-content", children: props.children ? props.children : text && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "k-chip-label k-text-ellipsis", children: text }) }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "k-chip-actions", children: actions })
       ]
     }
   );
@@ -7175,7 +7184,7 @@ Chip.className = CHIP_CLASSNAME;
 Chip.defaultProps = defaultProps33;
 
 // src/chip/chip-list.spec.tsx
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var CHIPLIST_CLASSNAME = `k-chip-list`;
 var states38 = [];
 var options35 = {
@@ -7189,7 +7198,7 @@ var ChipList = (props) => {
     size = defaultProps34.size,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "div",
     {
       ...other,
@@ -7210,19 +7219,19 @@ ChipList.className = CHIPLIST_CLASSNAME;
 ChipList.defaultProps = defaultProps34;
 
 // src/chip/templates/chip-avatar.tsx
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_jsx_runtime101 = require("react/jsx-runtime");
 
 // src/chip/templates/chip-icon.tsx
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 
 // src/chip/templates/chip-normal.tsx
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 
 // src/chip/templates/chip-removable.tsx
-var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 
 // src/multiselect/multiselect.spec.tsx
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var MULTISELECT_CLASSNAME = `k-multiselect`;
 var states39 = [
   States.hover,
@@ -7265,10 +7274,12 @@ var MultiSelect = (props) => {
     disabled,
     readonly,
     opened,
+    adaptive,
+    adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
       Input,
       {
         ...other,
@@ -7285,12 +7296,12 @@ var MultiSelect = (props) => {
         readonly,
         className: classNames(props.className, MULTISELECT_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "k-input-values", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(ChipList, { size, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_jsx_runtime102.Fragment, { children: tags }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(InputInnerInput, { placeholder, value })
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "k-input-values", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ChipList, { size, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_jsx_runtime105.Fragment, { children: tags }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(InputInnerInput, { placeholder, value })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -7299,14 +7310,14 @@ var MultiSelect = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
             InputClearValue,
             {
               loading,
@@ -7315,8 +7326,8 @@ var MultiSelect = (props) => {
               value: tags ? "value" : ""
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(InputSuffix, { children: suffix }),
-          showArrowButton && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(InputSuffix, { children: suffix }),
+          showArrowButton && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
             Button,
             {
               className: "k-input-button",
@@ -7329,7 +7340,22 @@ var MultiSelect = (props) => {
         ]
       }
     ),
-    opened && popup && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Popup, { className: "k-list-container k-multiselect-popup", children: popup })
+    opened && popup && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Popup, { className: "k-list-container k-multiselect-popup", children: popup }),
+    adaptive && /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        ActionSheetHeader,
+        {
+          actions: ["x"],
+          filter: true,
+          title: "Select Item"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "k-list-container", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(List, { size: "large", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ListItem, { text: "List item" }),
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ListItem, { text: "List item" }),
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ListItem, { text: "List item" })
+      ] }) })
+    ] })
   ] });
 };
 MultiSelect.states = states39;
@@ -7337,8 +7363,26 @@ MultiSelect.options = options36;
 MultiSelect.className = MULTISELECT_CLASSNAME;
 MultiSelect.defaultProps = defaultProps35;
 
+// src/multiselect/templates/multiselect-normal.tsx
+var import_jsx_runtime106 = require("react/jsx-runtime");
+
+// src/multiselect/templates/multiselect-popup.tsx
+var import_jsx_runtime107 = require("react/jsx-runtime");
+
+// src/multiselect/templates/multiselect-value.tsx
+var import_jsx_runtime108 = require("react/jsx-runtime");
+
+// src/multiselect/templates/multiselect-arrow-button.tsx
+var import_jsx_runtime109 = require("react/jsx-runtime");
+
+// src/multiselect/templates/multiselect-adaptive.tsx
+var import_jsx_runtime110 = require("react/jsx-runtime");
+
+// src/multiselect/templates/multiselect-grouping.tsx
+var import_jsx_runtime111 = require("react/jsx-runtime");
+
 // src/numerictextbox/numerictextbox.spec.tsx
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var NUMERICTEXTBOX_CLASSNAME = `k-numerictextbox`;
 var states40 = [
   States.hover,
@@ -7381,7 +7425,7 @@ var NumericTextbox = (props) => {
     showSpinButton = defaultProps36.showSpinButton,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
     Input,
     {
       ...other,
@@ -7398,8 +7442,8 @@ var NumericTextbox = (props) => {
       readonly,
       className: classNames(props.className, NUMERICTEXTBOX_CLASSNAME),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           InputValidationIcon,
           {
             valid,
@@ -7408,14 +7452,14 @@ var NumericTextbox = (props) => {
             disabled
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           InputLoadingIcon,
           {
             loading,
             disabled
           }
         ),
-        showClearButton && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        showClearButton && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           InputClearValue,
           {
             loading,
@@ -7424,7 +7468,7 @@ var NumericTextbox = (props) => {
             value
           }
         ),
-        showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           SpinButton,
           {
             className: "k-input-spinner",
@@ -7442,10 +7486,10 @@ NumericTextbox.className = NUMERICTEXTBOX_CLASSNAME;
 NumericTextbox.defaultProps = defaultProps36;
 
 // src/numerictextbox/templates/numerictextbox-normal.tsx
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 
 // src/switch/switch.spec.tsx
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_jsx_runtime114 = require("react/jsx-runtime");
 var SWITCH_CLASSNAME = `k-switch`;
 var states41 = [
   States.hover,
@@ -7454,12 +7498,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 {
@@ -7474,7 +7520,7 @@ var Switch = (props) => {
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
     "span",
     {
       ...other,
@@ -7495,29 +7541,29 @@ var Switch = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
           "span",
           {
             className: classNames(
               "k-switch-track",
-              {
-                [`k-rounded-${trackRounded}`]: trackRounded
-              }
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: trackRounded
+              })
             ),
             children: [
-              onLabel && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: "k-switch-label-on", children: onLabel }),
-              offLabel && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: "k-switch-label-off", children: offLabel })
+              onLabel && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { className: "k-switch-label-on", children: onLabel }),
+              offLabel && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { className: "k-switch-label-off", children: offLabel })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: "k-switch-thumb-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { className: "k-switch-thumb-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
           "span",
           {
             className: classNames(
               "k-switch-thumb",
-              {
-                [`k-rounded-${thumbRounded}`]: thumbRounded
-              }
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: thumbRounded
+              })
             )
           }
         ) })
@@ -7530,8 +7576,14 @@ Switch.options = options38;
 Switch.className = SWITCH_CLASSNAME;
 Switch.defaultProps = defaultProps37;
 
+// src/switch/templates/switch-normal.tsx
+var import_jsx_runtime115 = require("react/jsx-runtime");
+
+// src/switch/templates/switch-checked.tsx
+var import_jsx_runtime116 = require("react/jsx-runtime");
+
 // src/timepicker/timepicker.spec.tsx
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_jsx_runtime117 = require("react/jsx-runtime");
 var TIMEPICKER_CLASSNAME = `k-timepicker`;
 var states42 = [
   States.hover,
@@ -7575,8 +7627,8 @@ var TimePicker = (props) => {
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_jsx_runtime117.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
       Input,
       {
         ...other,
@@ -7593,9 +7645,9 @@ var TimePicker = (props) => {
         readonly,
         className: classNames(props.className, TIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -7604,14 +7656,14 @@ var TimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
             InputClearValue,
             {
               loading,
@@ -7620,8 +7672,8 @@ var TimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
             Button,
             {
               className: "k-input-button",
@@ -7634,15 +7686,15 @@ var TimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(Popup, { className: "k-list-container k-timepicker-popup", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Button, { className: "k-time-cancel", children: "Cancel" })
+    opened && /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(Popup, { className: "k-list-container k-timepicker-popup", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { className: "k-time-cancel", children: "Cancel" })
       ] })
     ] }),
-    adaptive && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    adaptive && /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -7650,8 +7702,8 @@ var TimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set time"] })
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set time"] })
     ] })
   ] });
 };
@@ -7661,137 +7713,137 @@ TimePicker.className = TIMEPICKER_CLASSNAME;
 TimePicker.defaultProps = defaultProps38;
 
 // src/timepicker/templates/timepicker-normal.tsx
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime118 = require("react/jsx-runtime");
 
 // src/timepicker/templates/timepicker-popup.tsx
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 
 // src/timepicker/templates/timepicker-adaptive.tsx
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 
 // src/grid/tests/grid-editing-custom-editor.tsx
-var import_jsx_runtime110 = require("react/jsx-runtime");
-var grid_editing_custom_editor_default = () => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_jsx_runtime110.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "k-grid-aria-root", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("colgroup", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {})
+var import_jsx_runtime121 = require("react/jsx-runtime");
+var grid_editing_custom_editor_default = () => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_jsx_runtime121.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "k-grid-aria-root", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("colgroup", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tr", { className: "k-table-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header" }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-column-title", children: "Autocomplete" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-column-title", children: "Combobox" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-column-title", children: "Dropdown" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-column-title", children: "Multiselect" }) }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tr", { className: "k-table-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header" }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-column-title", children: "Autocomplete" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-column-title", children: "Combobox" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-column-title", children: "Dropdown" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-column-title", children: "Multiselect" }) }) }) })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-content", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("colgroup", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {})
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-content", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("colgroup", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tbody", { className: "k-table-tbody", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tr", { className: "k-table-row k-grid-edit-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: "LTR" }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Autocomplete, { placeholder: "Autocomplete..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Combobox, { placeholder: "Combobox..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(DropdownList, { placeholder: "DropdownList..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(MultiSelect, { placeholder: "Multiselect..." }) })
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tbody", { className: "k-table-tbody", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tr", { className: "k-table-row k-grid-edit-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: "LTR" }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Autocomplete, { placeholder: "Autocomplete..." }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Combobox, { placeholder: "Combobox..." }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(DropdownList, { placeholder: "DropdownList..." }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(MultiSelect, { placeholder: "Multiselect..." }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: "RTL" }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Autocomplete, { placeholder: "Autocomplete...", className: "k-rtl" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Combobox, { placeholder: "Combobox...", className: "k-rtl" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(DropdownList, { placeholder: "DropdownList...", className: "k-rtl" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(MultiSelect, { placeholder: "Multiselect...", className: "k-rtl" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: "RTL" }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Autocomplete, { placeholder: "Autocomplete...", className: "k-rtl" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Combobox, { placeholder: "Combobox...", className: "k-rtl" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(DropdownList, { placeholder: "DropdownList...", className: "k-rtl" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(MultiSelect, { placeholder: "Multiselect...", className: "k-rtl" }) })
         ] })
       ] })
     ] }) }) }) })
   ] }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "k-grid-aria-root", style: { overflow: "visible" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("colgroup", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {})
+  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "k-grid-aria-root", style: { overflow: "visible" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("colgroup", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tr", { className: "k-table-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header" }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-column-title", children: "Datepicker" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-column-title", children: "Timepicker" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-column-title", children: "Datetime" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-column-title", children: "Dateinput" }) }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tr", { className: "k-table-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header" }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-column-title", children: "Datepicker" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-column-title", children: "Timepicker" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-column-title", children: "Datetime" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-column-title", children: "Dateinput" }) }) }) })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-container", style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-content", style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("colgroup", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {})
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-container", style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-content", style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("colgroup", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tbody", { className: "k-table-tbody", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tr", { className: "k-table-row k-grid-edit-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: "LTR" }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(DatePicker, { placeholder: "DatePicker..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(TimePicker, { placeholder: "TimePicker..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(DateTimePicker, { placeholder: "DateTimePicker..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(DateInput, { placeholder: "DateInput..." }) })
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tbody", { className: "k-table-tbody", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tr", { className: "k-table-row k-grid-edit-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: "LTR" }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(DatePicker, { placeholder: "DatePicker..." }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(TimePicker, { placeholder: "TimePicker..." }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(DateTimePicker, { placeholder: "DateTimePicker..." }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(DateInput, { placeholder: "DateInput..." }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: "RTL" }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(DatePicker, { placeholder: "DatePicker...", className: "k-rtl" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(TimePicker, { placeholder: "TimePicker...", className: "k-rtl" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(DateTimePicker, { placeholder: "DateTimePicker...", className: "k-rtl" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(DateInput, { placeholder: "DateInput...", className: "k-rtl" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: "RTL" }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(DatePicker, { placeholder: "DatePicker...", className: "k-rtl" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(TimePicker, { placeholder: "TimePicker...", className: "k-rtl" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(DateTimePicker, { placeholder: "DateTimePicker...", className: "k-rtl" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(DateInput, { placeholder: "DateInput...", className: "k-rtl" }) })
         ] })
       ] })
     ] }) }) }) })
   ] }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "k-grid-aria-root", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("colgroup", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {})
+  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid k-grid-md k-grid-no-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "k-grid-aria-root", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("colgroup", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tr", { className: "k-table-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header" }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-column-title", children: "Numeric" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "k-column-title", children: "Switch" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("th", { className: "k-table-th k-header" })
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tr", { className: "k-table-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header" }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-column-title", children: "Numeric" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-column-title", children: "Switch" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("th", { className: "k-table-th k-header" })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "k-grid-content", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("colgroup", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", { style: { width: "68px" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("col", {})
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "k-grid-content", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("colgroup", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", { style: { width: "68px" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("col", {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tbody", { className: "k-table-tbody", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tr", { className: "k-table-row k-grid-edit-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: "LTR" }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(NumericTextbox, { placeholder: "Numeric..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Switch, { checked: true }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td" })
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tbody", { className: "k-table-tbody", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tr", { className: "k-table-row k-grid-edit-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: "LTR" }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(NumericTextbox, { placeholder: "Numeric..." }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Switch, { checked: true }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: "RTL" }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(NumericTextbox, { placeholder: "Numeric...", className: "k-rtl" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Switch, { checked: true, className: "k-rtl" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("td", { className: "k-table-td" })
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-grid-edit-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: "RTL" }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(NumericTextbox, { placeholder: "Numeric...", className: "k-rtl" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Switch, { checked: true, className: "k-rtl" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("td", { className: "k-table-td" })
         ] })
       ] })
     ] }) }) }) })