@progress/kendo-themes-html 6.7.1-dev.0 → 6.7.1-dev.1

package/dist/cjs/grid/tests/grid-grouping-detail-template.js

@@ -4496,14 +4496,74 @@ Checkbox.options = options5;
 Checkbox.className = CHECKBOX_CLASSNAME;
 Checkbox.defaultProps = defaultProps5;
 
-// src/checkbox/templates/checkbox-label.tsx
+// src/checkbox/checkbox-group.spec.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var CHECKBOXGROUP_CLASSNAME = `k-checkbox-list`;
+var states6 = [];
+var options6 = {};
+var defaultProps6 = {
+  layout: "vertical"
+};
+var CheckboxGroup = (props) => {
+  const {
+    layout = defaultProps6.layout,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "ul",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        CHECKBOXGROUP_CLASSNAME,
+        {
+          [`k-list-${layout}`]: layout
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+CheckboxGroup.states = states6;
+CheckboxGroup.options = options6;
+CheckboxGroup.className = CHECKBOXGROUP_CLASSNAME;
+CheckboxGroup.defaultProps = defaultProps6;
 
-// src/checkbox/templates/checkbox-normal.tsx
+// src/checkbox/checkbox-item.spec.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var CHECKBOXITEM_CLASSNAME = `k-checkbox-list-item`;
+var states7 = [];
+var options7 = {};
+var defaultProps7 = {};
+var CheckboxItem = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        CHECKBOXITEM_CLASSNAME
+      ),
+      children: props.children
+    }
+  );
+};
+CheckboxItem.states = states7;
+CheckboxItem.options = options7;
+CheckboxItem.className = CHECKBOXITEM_CLASSNAME;
+CheckboxItem.defaultProps = defaultProps7;
 
-// src/chip/chip-action.tsx
+// src/checkbox/templates/checkbox-with-label.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// src/checkbox/templates/checkbox-normal.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+
+// src/chip/chip-action.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var CHIPACTION_CLASSNAME = `k-chip-action`;
 var ChipAction = (props) => {
   const {
@@ -4513,15 +4573,15 @@ var ChipAction = (props) => {
   let icon;
   switch (type) {
     case "remove" /* REMOVE */:
-      icon = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon: "x-circle", size: "small" });
+      icon = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: "x-circle", size: "small" });
       break;
     case "more" /* MORE */:
-      icon = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon: "more-vertical", size: "small" });
+      icon = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: "more-vertical", size: "small" });
       break;
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon: type, size: "small" });
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: type, size: "small" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "span",
     {
       ...other,
@@ -4536,16 +4596,16 @@ var ChipAction = (props) => {
 };
 
 // src/avatar/avatar.spec.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var AVATAR_CLASSNAME = `k-avatar`;
-var states6 = [
+var states8 = [
   States.hover,
   States.focus,
   States.active,
   States.selected,
   States.disabled
 ];
-var options6 = {
+var options8 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline],
@@ -4563,7 +4623,7 @@ var options6 = {
     ThemeColor.inverse
   ]
 };
-var defaultProps6 = {
+var defaultProps8 = {
   type: "text" /* TEXT */,
   size: Size.medium,
   rounded: Roundness.full,
@@ -4573,15 +4633,15 @@ var defaultProps6 = {
 };
 var Avatar = (props) => {
   const {
-    size = defaultProps6.size,
-    rounded = defaultProps6.rounded,
-    fillMode = defaultProps6.fillMode,
-    themeColor = defaultProps6.themeColor,
-    type = defaultProps6.type,
-    border = defaultProps6.border,
+    size = defaultProps8.size,
+    rounded = defaultProps8.rounded,
+    fillMode = defaultProps8.fillMode,
+    themeColor = defaultProps8.themeColor,
+    type = defaultProps8.type,
+    border = defaultProps8.border,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ...other,
@@ -4598,35 +4658,35 @@ var Avatar = (props) => {
           [`${AVATAR_CLASSNAME}-bordered`]: border
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
     }
   );
 };
-Avatar.states = states6;
-Avatar.options = options6;
+Avatar.states = states8;
+Avatar.options = options8;
 Avatar.className = AVATAR_CLASSNAME;
-Avatar.defaultProps = defaultProps6;
+Avatar.defaultProps = defaultProps8;
 
 // src/avatar/templates/avatar-icon.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 
 // src/avatar/templates/avatar-text.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 
 // src/avatar/templates/avatar-image.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 
 // src/chip/chip.spec.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var CHIP_CLASSNAME = `k-chip`;
-var states7 = [
+var states9 = [
   States.hover,
   States.focus,
   States.active,
   States.selected,
   States.disabled
 ];
-var options7 = {
+var options9 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.outline],
@@ -4638,7 +4698,7 @@ var options7 = {
     ThemeColor.info
   ]
 };
-var defaultProps7 = {
+var defaultProps9 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid,
@@ -4646,10 +4706,10 @@ var defaultProps7 = {
 };
 var Chip = (props) => {
   const {
-    size = defaultProps7.size,
-    rounded = defaultProps7.rounded,
-    fillMode = defaultProps7.fillMode,
-    themeColor = defaultProps7.themeColor,
+    size = defaultProps9.size,
+    rounded = defaultProps9.rounded,
+    fillMode = defaultProps9.fillMode,
+    themeColor = defaultProps9.themeColor,
     text,
     icon,
     actions,
@@ -4661,7 +4721,7 @@ var Chip = (props) => {
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       ...other,
@@ -4683,35 +4743,35 @@ var Chip = (props) => {
         })
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { className: "k-chip-icon", icon, size: "small" }),
-        showAvatar && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Avatar, { className: "k-chip-avatar", type: "image", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "k-chip-content", children: props.children ? props.children : text && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "k-chip-label k-text-ellipsis", children: text }) }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "k-chip-actions", children: actions })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { className: "k-chip-icon", icon, size: "small" }),
+        showAvatar && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { className: "k-chip-avatar", type: "image", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-chip-content", children: props.children ? props.children : text && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-chip-label k-text-ellipsis", children: text }) }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-chip-actions", children: actions })
       ]
     }
   );
 };
-Chip.states = states7;
-Chip.options = options7;
+Chip.states = states9;
+Chip.options = options9;
 Chip.className = CHIP_CLASSNAME;
-Chip.defaultProps = defaultProps7;
+Chip.defaultProps = defaultProps9;
 
 // src/chip/chip-list.spec.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var CHIPLIST_CLASSNAME = `k-chip-list`;
-var states8 = [];
-var options8 = {
+var states10 = [];
+var options10 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps8 = {
+var defaultProps10 = {
   size: Size.medium
 };
 var ChipList = (props) => {
   const {
-    size = defaultProps8.size,
+    size = defaultProps10.size,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       ...other,
@@ -4726,327 +4786,327 @@ var ChipList = (props) => {
     }
   );
 };
-ChipList.states = states8;
-ChipList.options = options8;
+ChipList.states = states10;
+ChipList.options = options10;
 ChipList.className = CHIPLIST_CLASSNAME;
-ChipList.defaultProps = defaultProps8;
+ChipList.defaultProps = defaultProps10;
 
 // src/chip/templates/chip-avatar.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 
 // src/chip/templates/chip-icon.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 
 // src/chip/templates/chip-normal.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 
 // src/chip/templates/chip-removable.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 
 // src/grid/tests/grid-grouping-detail-template.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var grid_grouping_detail_template_default = () => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Base" }),
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { dir: "ltr", className: "k-grid k-grid-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grouping-header", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grouping-drop-container", children: "Drag a column header and drop it here to group by that column" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-grid-aria-root", role: "grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("colgroup", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-hierarchy-col" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { style: { width: "50px" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {})
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var grid_grouping_detail_template_default = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Base" }),
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { dir: "ltr", className: "k-grid k-grid-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grouping-header", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grouping-drop-container", children: "Drag a column header and drop it here to group by that column" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-grid-aria-root", role: "grid", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("colgroup", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-hierarchy-col" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { style: { width: "50px" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-hierarchy-cell k-header" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, { id: "k-grid0-select-all" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "ID" }) }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "Name" }) }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "Command" }) }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-hierarchy-cell k-header" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, { id: "k-grid0-select-all" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "ID" }) }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "Name" }) }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "Command" }) }) }) })
         ] }) })
       ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-grid-content k-virtual-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("colgroup", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-hierarchy-col" }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { style: { width: "50px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {})
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-grid-content k-virtual-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("colgroup", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-hierarchy-col" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { style: { width: "50px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tbody", { className: "k-table-tbody", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row k-master-row", role: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "plus" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, { id: "k-grid0-checkbox0" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { icon: "trash", children: "Delete" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tbody", { className: "k-table-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row k-master-row", role: "row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "plus" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, { id: "k-grid0-checkbox0" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { icon: "trash", children: "Delete" }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", role: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "plus" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, { id: "k-grid0-checkbox1" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { icon: "trash", children: "Delete" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", role: "row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "plus" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, { id: "k-grid0-checkbox1" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { icon: "trash", children: "Delete" }) })
             ] })
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-height-container", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-height-container", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", {}) })
       ] }) })
     ] })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Single Group" }),
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { dir: "ltr", className: "k-grid k-grid-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-grouping-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChipList, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Chip, { icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChipAction, { type: "remove" }), children: "ID" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grouping-drop-container" })
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Single Group" }),
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { dir: "ltr", className: "k-grid k-grid-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-grouping-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChipList, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Chip, { icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChipAction, { type: "remove" }), children: "ID" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grouping-drop-container" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-grid-aria-root", role: "grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("colgroup", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-group-col" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-hierarchy-col" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { style: { width: "50px" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {})
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-grid-aria-root", role: "grid", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("colgroup", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-group-col" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-hierarchy-col" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { style: { width: "50px" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-group-cell k-header" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-hierarchy-cell k-header" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "ID" }) }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "Name" }) }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "Command" }) }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-group-cell k-header" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-hierarchy-cell k-header" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "ID" }) }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "Name" }) }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "Command" }) }) }) })
         ] }) })
       ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-grid-content k-virtual-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("colgroup", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-group-col" }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-hierarchy-col" }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { style: { width: "50px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {})
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-grid-content k-virtual-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("colgroup", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-group-col" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-hierarchy-col" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { style: { width: "50px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tbody", { className: "k-table-tbody", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "k-reset", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "caret-alt-down" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tbody", { className: "k-table-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "k-reset", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "caret-alt-down" }),
               " ID: 1 "
             ] }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row k-master-row", role: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "plus" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { icon: "trash", children: "Delete" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row k-master-row", role: "row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "plus" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { icon: "trash", children: "Delete" }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "k-reset", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "caret-alt-down" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "k-reset", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "caret-alt-down" }),
               " ID: 2 "
             ] }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", role: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "plus" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { icon: "trash", children: "Delete" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", role: "row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "plus" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { icon: "trash", children: "Delete" }) })
             ] })
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-height-container", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-height-container", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", {}) })
       ] }) })
     ] })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Two Groups" }),
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { dir: "ltr", className: "k-grid k-grid-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-grouping-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ChipList, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Chip, { icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChipAction, { type: "remove" }), children: "ID" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Chip, { icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChipAction, { type: "remove" }), children: "Name" })
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Two Groups" }),
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { dir: "ltr", className: "k-grid k-grid-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-grouping-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ChipList, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Chip, { icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChipAction, { type: "remove" }), children: "ID" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Chip, { icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChipAction, { type: "remove" }), children: "Name" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grouping-drop-container" })
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grouping-drop-container" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-grid-aria-root", role: "grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("colgroup", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-group-col" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-group-col" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-hierarchy-col" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { style: { width: "50px" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {})
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-grid-aria-root", role: "grid", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("colgroup", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-group-col" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-group-col" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-hierarchy-col" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { style: { width: "50px" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-group-cell k-header" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-group-cell k-header" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-hierarchy-cell k-header" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "ID" }) }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "Name" }) }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "Command" }) }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-group-cell k-header" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-group-cell k-header" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-hierarchy-cell k-header" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "ID" }) }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "Name" }) }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "Command" }) }) }) })
         ] }) })
       ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-grid-content k-virtual-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("colgroup", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-group-col" }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-group-col" }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-hierarchy-col" }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { style: { width: "50px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {})
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-grid-content k-virtual-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("colgroup", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-group-col" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-group-col" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-hierarchy-col" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { style: { width: "50px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tbody", { className: "k-table-tbody", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td", colSpan: 7, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "k-reset", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "caret-alt-down" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tbody", { className: "k-table-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td", colSpan: 7, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "k-reset", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "caret-alt-down" }),
               " ID: 1 "
             ] }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "k-reset", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "caret-alt-down" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "k-reset", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "caret-alt-down" }),
                 " Name: Product1 "
               ] }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row k-master-row", role: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "plus" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { icon: "trash", children: "Delete" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row k-master-row", role: "row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "plus" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { icon: "trash", children: "Delete" }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td", colSpan: 7, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "k-reset", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "caret-alt-down" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td", colSpan: 7, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "k-reset", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "caret-alt-down" }),
               " ID: 2 "
             ] }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "k-reset", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "caret-alt-down" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "k-reset", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "caret-alt-down" }),
                 " Name: Product2 "
               ] }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", role: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "plus" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { icon: "trash", children: "Delete" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row", role: "row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "plus" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { icon: "trash", children: "Delete" }) })
             ] })
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-height-container", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-height-container", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", {}) })
       ] }) })
     ] })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Expanded Template" }),
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { dir: "ltr", className: "k-grid k-grid-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-grouping-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ChipList, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Chip, { icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChipAction, { type: "remove" }), children: "ID" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Chip, { icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChipAction, { type: "remove" }), children: "Name" })
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Expanded Template" }),
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { dir: "ltr", className: "k-grid k-grid-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-grouping-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ChipList, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Chip, { icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChipAction, { type: "remove" }), children: "ID" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Chip, { icon: "sort-asc-small", actions: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChipAction, { type: "remove" }), children: "Name" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grouping-drop-container" })
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grouping-drop-container" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-grid-aria-root", role: "grid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("colgroup", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-group-col" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-group-col" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-hierarchy-col" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { style: { width: "50px" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {})
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-grid-aria-root", role: "grid", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-header-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "k-table k-table-md k-grid-header-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("colgroup", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-group-col" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-group-col" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-hierarchy-col" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { style: { width: "50px" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-group-cell k-header" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-group-cell k-header" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-hierarchy-cell k-header" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "ID" }) }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "Name" }) }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-column-title", children: "Command" }) }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { className: "k-table-thead", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-group-cell k-header" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-group-cell k-header" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-hierarchy-cell k-header" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "ID" }) }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header k-grid-draggable-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "Name" }) }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "k-table-th k-header", rowSpan: 1, colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-cell-inner", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-column-title", children: "Command" }) }) }) })
         ] }) })
       ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-grid-content k-virtual-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-grid-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("colgroup", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-group-col" }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-group-col" }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { className: "k-hierarchy-col" }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { style: { width: "50px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", {})
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-grid-content k-virtual-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-grid-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "k-table k-table-md k-grid-table", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("colgroup", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-group-col" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-group-col" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { className: "k-hierarchy-col" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", { style: { width: "50px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("col", {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tbody", { className: "k-table-tbody", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td", colSpan: 7, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "k-reset", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "caret-alt-down" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tbody", { className: "k-table-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td", colSpan: 7, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "k-reset", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "caret-alt-down" }),
               " ID: 1 "
             ] }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "k-reset", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "caret-alt-down" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "k-reset", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "caret-alt-down" }),
                 " Name: Product1 "
               ] }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row k-master-row k-expanded", role: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "minus" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { icon: "trash", children: "Delete" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row k-master-row k-expanded", role: "row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "minus" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { icon: "trash", children: "Delete" }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row k-detail-row", role: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-hierarchy-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-detail-cell", colSpan: 4, children: " Template Text " })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row k-detail-row", role: "row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-hierarchy-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-detail-cell", colSpan: 4, children: " Template Text " })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td", colSpan: 7, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "k-reset", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "caret-alt-down" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td", colSpan: 7, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "k-reset", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "caret-alt-down" }),
               " ID: 2 "
             ] }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "k-reset", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "caret-alt-down" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { role: "row", className: "k-table-row k-table-group-row k-grouping-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td", colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "k-reset", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "caret-alt-down" }),
                 " Name: Product2 "
               ] }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row k-expanded", role: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: "minus" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { icon: "trash", children: "Delete" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row k-table-alt-row k-alt k-master-row k-expanded", role: "row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-hierarchy-cell", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: "minus" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Checkbox, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto", colSpan: 1, children: "Product2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-touch-action-auto k-command-cell", colSpan: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { icon: "trash", children: "Delete" }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-table-row k-table-alt-row k-detail-row k-alt", role: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-hierarchy-cell" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "k-table-td k-detail-cell", colSpan: 4, children: " Template Text " })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-table-row k-table-alt-row k-detail-row k-alt", role: "row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-table-group-td k-group-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-hierarchy-cell" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "k-table-td k-detail-cell", colSpan: 4, children: " Template Text " })
             ] })
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-height-container", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-height-container", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", {}) })
       ] }) })
     ] })
   ] })