@progress/kendo-themes-html 7.1.1-dev.0 → 7.2.0-dev.0

package/dist/esm/grid/tests/grid-filter-row.js

@@ -8254,82 +8254,1519 @@ import { jsx as jsx138 } from "react/jsx-runtime";
 // src/timepicker/templates/timepicker-adaptive.tsx
 import { jsx as jsx139 } from "react/jsx-runtime";
 
+// src/grid/grid.spec.tsx
+import { jsx as jsx140, jsxs as jsxs64 } from "react/jsx-runtime";
+var GRID_CLASSNAME = "k-grid";
+var states50 = [];
+var options47 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps47 = {
+  size: Size.medium,
+  pagerPosition: "bottom"
+};
+var Grid = (props) => {
+  const {
+    size = defaultProps47.size,
+    toolbar,
+    pager,
+    pagerPosition,
+    groupingHeader,
+    _renderAriaRoot,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs64(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GRID_CLASSNAME,
+        optionClassNames(GRID_CLASSNAME, { size })
+      ),
+      children: [
+        toolbar,
+        pagerPosition === "top" && pager,
+        groupingHeader,
+        props.children && _renderAriaRoot ? /* @__PURE__ */ jsx140("div", { className: "k-grid-aria-root", children: props.children }) : props.children,
+        pagerPosition === "bottom" && pager
+      ]
+    }
+  );
+};
+Grid.states = states50;
+Grid.options = options47;
+Grid.className = GRID_CLASSNAME;
+Grid.defaultProps = defaultProps47;
+
+// src/grid/grid-header.spec.tsx
+import { jsx as jsx141 } from "react/jsx-runtime";
+var className19 = `k-grid-header`;
+var GridHeader = (props) => /* @__PURE__ */ jsx141(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      className19
+    ),
+    children: props.children
+  }
+);
+
+// src/grid/grid-grouping-header.spec.tsx
+import { jsx as jsx142, jsxs as jsxs65 } from "react/jsx-runtime";
+
+// src/table/data-table.spec.tsx
+import { jsx as jsx143 } from "react/jsx-runtime";
+var DATATABLE_CLASSNAME = `k-data-table`;
+var states51 = [];
+var options48 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps48 = {
+  size: Size.medium
+};
+var DataTable = (props) => {
+  const {
+    size = defaultProps48.size,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx143(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        DATATABLE_CLASSNAME,
+        optionClassNames("k-table", {
+          size
+        })
+      ),
+      children: props.children
+    }
+  );
+};
+DataTable.states = states51;
+DataTable.options = options48;
+DataTable.className = DATATABLE_CLASSNAME;
+DataTable.defaultProps = defaultProps48;
+
+// src/table/table-header.tsx
+import { jsx as jsx144 } from "react/jsx-runtime";
+
+// src/table/table-body.tsx
+import { jsx as jsx145 } from "react/jsx-runtime";
+
+// src/table/table-footer.tsx
+import { jsx as jsx146 } from "react/jsx-runtime";
+
+// src/table/table.spec.tsx
+import { jsx as jsx147 } from "react/jsx-runtime";
+var TABLE_CLASSNAME = `k-table`;
+var states52 = [];
+var options49 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps49 = {};
+var Table = (props) => {
+  const {
+    size,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx147(
+    "table",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TABLE_CLASSNAME,
+        optionClassNames(TABLE_CLASSNAME, {
+          size
+        })
+      ),
+      children: props.children
+    }
+  );
+};
+Table.states = states52;
+Table.options = options49;
+Table.className = TABLE_CLASSNAME;
+Table.defaultProps = defaultProps49;
+
+// src/table/table-list.spec.tsx
+import { jsx as jsx148 } from "react/jsx-runtime";
+var TABLELIST_CLASSNAME = `k-table-list`;
+var states53 = [];
+var options50 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps50 = {};
+var TableList = (props) => {
+  const {
+    size,
+    virtualization,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx148(
+    "ul",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        "k-table",
+        TABLELIST_CLASSNAME,
+        optionClassNames(TABLELIST_CLASSNAME, {
+          size
+        }),
+        {
+          "k-virtual-table": virtualization
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+TableList.states = states53;
+TableList.options = options50;
+TableList.className = TABLELIST_CLASSNAME;
+TableList.defaultProps = defaultProps50;
+
+// src/table/table-thead.tsx
+import { jsx as jsx149 } from "react/jsx-runtime";
+var className20 = `k-table-thead`;
+var TableThead = (props) => /* @__PURE__ */ jsx149(
+  "thead",
+  {
+    className: classNames(
+      props.className,
+      className20
+    ),
+    children: props.children
+  }
+);
+
+// src/table/table-tbody.tsx
+import { jsx as jsx150 } from "react/jsx-runtime";
+
+// src/table/table-tfoot.tsx
+import { jsx as jsx151 } from "react/jsx-runtime";
+
+// src/table/table-row.tsx
+import { jsx as jsx152 } from "react/jsx-runtime";
+var TABLEROW_CLASSNAME = `k-table-row`;
+var states54 = [
+  States.hover,
+  States.focus,
+  States.selected,
+  States.disabled
+];
+var TableRow = (props) => {
+  const {
+    hover,
+    focus,
+    selected,
+    disabled,
+    alt,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx152(
+    "tr",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TABLEROW_CLASSNAME,
+        {
+          ["k-table-alt-row"]: alt
+        },
+        stateClassNames(TABLEROW_CLASSNAME, {
+          hover,
+          focus,
+          disabled,
+          selected
+        })
+      ),
+      children: props.children
+    }
+  );
+};
+
+// src/table/table-list-row.tsx
+import { jsx as jsx153 } from "react/jsx-runtime";
+var states55 = [
+  States.hover,
+  States.focus,
+  States.selected,
+  States.disabled
+];
+
+// src/table/table-th.tsx
+import { jsx as jsx154 } from "react/jsx-runtime";
+var className21 = `k-table-th`;
+var TableTh = (props) => {
+  const {
+    text,
+    colspan,
+    rowspan,
+    ...other
+  } = props;
+  const textOrChildren = text ? text : props.children;
+  return /* @__PURE__ */ jsx154(
+    "th",
+    {
+      colSpan: colspan,
+      rowSpan: rowspan,
+      ...other,
+      className: classNames(
+        props.className,
+        className21
+      ),
+      children: textOrChildren
+    }
+  );
+};
+
+// src/table/table-list-th.tsx
+import { jsx as jsx155 } from "react/jsx-runtime";
+
+// src/table/table-td.tsx
+import { jsx as jsx156 } from "react/jsx-runtime";
+
+// src/table/table-list-td.tsx
+import { jsx as jsx157 } from "react/jsx-runtime";
+
+// src/table/table-group-header.tsx
+import { jsx as jsx158 } from "react/jsx-runtime";
+
+// src/table/table-group-sticky-header.tsx
+import { jsx as jsx159 } from "react/jsx-runtime";
+
+// src/table/table-group-row.tsx
+import { jsx as jsx160 } from "react/jsx-runtime";
+
+// src/table/table-list-group-row.tsx
+import { jsx as jsx161 } from "react/jsx-runtime";
+
+// src/table/templates/table-list.tsx
+import { jsx as jsx162, jsxs as jsxs66 } from "react/jsx-runtime";
+
+// src/table/templates/table-list-virtualization.tsx
+import { jsx as jsx163, jsxs as jsxs67 } from "react/jsx-runtime";
+
+// src/table/templates/data-table-normal.tsx
+import { jsx as jsx164, jsxs as jsxs68 } from "react/jsx-runtime";
+
+// src/table/templates/table-native.tsx
+import { jsx as jsx165, jsxs as jsxs69 } from "react/jsx-runtime";
+
+// src/grid/grid-header-table.spec.tsx
+import { jsx as jsx166 } from "react/jsx-runtime";
+var GRIDHEADERTABLE_CLASSNAME = `k-grid-header-table`;
+var GridHeaderTable = (props) => /* @__PURE__ */ jsx166(
+  Table,
+  {
+    size: "medium",
+    ...props,
+    className: classNames(
+      props.className,
+      GRIDHEADERTABLE_CLASSNAME
+    ),
+    children: props.children
+  }
+);
+
+// src/grid/grid-header-cell.spec.tsx
+import { jsx as jsx167, jsxs as jsxs70 } from "react/jsx-runtime";
+var states56 = [
+  States.hover,
+  States.focus,
+  States.active
+];
+
+// src/grid/grid-container.spec.tsx
+import { jsx as jsx168 } from "react/jsx-runtime";
+
+// src/grid/grid-content.spec.tsx
+import { jsx as jsx169 } from "react/jsx-runtime";
+
+// src/grid/grid-table.spec.tsx
+import { jsx as jsx170 } from "react/jsx-runtime";
+
+// src/grid/grid-footer.spec.tsx
+import { jsx as jsx171 } from "react/jsx-runtime";
+
+// src/grid/grid-footer-table.spec.tsx
+import { jsx as jsx172 } from "react/jsx-runtime";
+
+// src/pager/pager.spec.tsx
+import { jsx as jsx173, jsxs as jsxs71 } from "react/jsx-runtime";
+var PAGER_CLASSNAME = `k-pager`;
+var states57 = [
+  States.focus,
+  States.disabled
+];
+var options51 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps51 = {
+  size: Size.medium,
+  adaptive: false,
+  itemsPerPage: true,
+  type: "numeric",
+  pageSizes: true,
+  refresh: true,
+  info: true
+};
+var Pager = (props) => {
+  const {
+    size = defaultProps51.size,
+    adaptive = defaultProps51.adaptive,
+    itemsPerPage = defaultProps51.itemsPerPage,
+    type = defaultProps51.type,
+    pageSizes = defaultProps51.pageSizes,
+    refresh = defaultProps51.refresh,
+    info = defaultProps51.info,
+    focus,
+    disabled,
+    dir,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs71(
+    "div",
+    {
+      dir,
+      ...other,
+      className: classNames(
+        props.className,
+        PAGER_CLASSNAME,
+        optionClassNames(PAGER_CLASSNAME, {
+          size
+        }),
+        stateClassNames(PAGER_CLASSNAME, {
+          focus,
+          disabled
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsxs71(
+          "div",
+          {
+            className: classNames(
+              "k-pager-numbers-wrap"
+            ),
+            children: [
+              /* @__PURE__ */ jsx173(
+                Button,
+                {
+                  className: classNames(
+                    "k-pager-nav",
+                    "k-pager-first"
+                  ),
+                  disabled: true,
+                  fillMode: "flat",
+                  size,
+                  rounded: null,
+                  icon: dir === "rtl" ? "caret-alt-to-right" : "caret-alt-to-left"
+                }
+              ),
+              /* @__PURE__ */ jsx173(
+                Button,
+                {
+                  className: classNames(
+                    "k-pager-nav"
+                  ),
+                  disabled: true,
+                  fillMode: "flat",
+                  size,
+                  rounded: null,
+                  icon: dir === "rtl" ? "caret-alt-right" : "caret-alt-left"
+                }
+              ),
+              type === "numeric" && !adaptive && /* @__PURE__ */ jsxs71(
+                "div",
+                {
+                  className: classNames(
+                    "k-pager-numbers"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx173(
+                      Button,
+                      {
+                        selected: true,
+                        fillMode: "flat",
+                        themeColor: "primary",
+                        size,
+                        rounded: null,
+                        children: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx173(
+                      Button,
+                      {
+                        fillMode: "flat",
+                        themeColor: "primary",
+                        size,
+                        rounded: null,
+                        children: "2"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx173(
+                      Button,
+                      {
+                        fillMode: "flat",
+                        themeColor: "primary",
+                        size,
+                        rounded: null,
+                        children: "3"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx173(
+                      Button,
+                      {
+                        fillMode: "flat",
+                        themeColor: "primary",
+                        size,
+                        rounded: null,
+                        children: "4"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx173(
+                      Button,
+                      {
+                        fillMode: "flat",
+                        themeColor: "primary",
+                        size,
+                        rounded: null,
+                        children: "5"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx173(
+                      Button,
+                      {
+                        fillMode: "flat",
+                        themeColor: "primary",
+                        size,
+                        rounded: null,
+                        children: "6"
+                      }
+                    )
+                  ]
+                }
+              ),
+              type === "numeric" && /* @__PURE__ */ jsx173(
+                "select",
+                {
+                  className: classNames(
+                    "k-picker",
+                    "k-picker-solid",
+                    "k-dropdown-list",
+                    "k-dropdown",
+                    "k-rounded-md",
+                    optionClassNames("k-picker", {
+                      size
+                    }),
+                    {
+                      ["k-hidden"]: !adaptive
+                    }
+                  ),
+                  children: /* @__PURE__ */ jsx173("option", { children: "99" })
+                }
+              ),
+              type === "input" && /* @__PURE__ */ jsxs71(
+                "span",
+                {
+                  className: classNames(
+                    "k-pager-input"
+                  ),
+                  children: [
+                    !adaptive && /* @__PURE__ */ jsx173("span", { children: "Page" }),
+                    /* @__PURE__ */ jsx173(NumericTextbox, { value: "999", size, showSpinButton: false, showClearButton: false }),
+                    !adaptive && /* @__PURE__ */ jsx173("span", { children: "of 8" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx173(
+                Button,
+                {
+                  className: classNames(
+                    "k-pager-nav"
+                  ),
+                  fillMode: "flat",
+                  size,
+                  rounded: null,
+                  icon: dir === "rtl" ? "caret-alt-left" : "caret-alt-right"
+                }
+              ),
+              /* @__PURE__ */ jsx173(
+                Button,
+                {
+                  className: classNames(
+                    "k-pager-nav",
+                    "k-pager-last"
+                  ),
+                  fillMode: "flat",
+                  size,
+                  rounded: null,
+                  icon: dir === "rtl" ? "caret-alt-to-left" : "caret-alt-to-right"
+                }
+              )
+            ]
+          }
+        ),
+        pageSizes && /* @__PURE__ */ jsxs71(
+          "span",
+          {
+            className: classNames(
+              "k-pager-sizes"
+            ),
+            children: [
+              /* @__PURE__ */ jsx173(DropdownList, { value: "99", size }),
+              itemsPerPage && /* @__PURE__ */ jsx173("span", { children: "items per page" })
+            ]
+          }
+        ),
+        refresh && /* @__PURE__ */ jsx173(
+          Button,
+          {
+            className: classNames(
+              "k-pager-refresh"
+            ),
+            fillMode: "flat",
+            size,
+            rounded: null,
+            icon: "arrow-rotate-cw"
+          }
+        ),
+        info && /* @__PURE__ */ jsx173(
+          "span",
+          {
+            className: classNames(
+              "k-pager-info"
+            ),
+            children: "1 - 20 of 91 items"
+          }
+        )
+      ]
+    }
+  );
+};
+Pager.states = states57;
+Pager.options = options51;
+Pager.className = PAGER_CLASSNAME;
+Pager.defaultProps = defaultProps51;
+
+// src/pager/templates/pager-normal.tsx
+import { jsx as jsx174 } from "react/jsx-runtime";
+
+// src/pager/templates/pager-input.tsx
+import { jsx as jsx175 } from "react/jsx-runtime";
+
+// src/pager/templates/pager-adaptive.tsx
+import { jsx as jsx176 } from "react/jsx-runtime";
+
+// src/pager/templates/pager-adaptive-input.tsx
+import { jsx as jsx177 } from "react/jsx-runtime";
+
+// src/grid/grid-pager.spec.tsx
+import { jsx as jsx178 } from "react/jsx-runtime";
+
+// src/menu-button/menu-button.spec.tsx
+import { Fragment as Fragment46, jsx as jsx179, jsxs as jsxs72 } from "react/jsx-runtime";
+var MENUBUTTON_CLASSNAME = `k-menu-button`;
+var states58 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
+var options52 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
+  themeColor: [
+    ThemeColor.base,
+    ThemeColor.primary,
+    ThemeColor.secondary,
+    ThemeColor.tertiary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info,
+    ThemeColor.light,
+    ThemeColor.dark,
+    ThemeColor.inverse
+  ]
+};
+var defaultProps52 = {
+  size: Size.medium,
+  rounded: Roundness.medium,
+  fillMode: FillMode.solid,
+  themeColor: ThemeColor.base,
+  showArrow: true,
+  arrowIconName: "caret-alt-down"
+};
+var MenuButton = (props) => {
+  const {
+    size = defaultProps52.size,
+    rounded = defaultProps52.rounded,
+    fillMode = defaultProps52.fillMode,
+    themeColor = defaultProps52.themeColor,
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
+    icon,
+    text,
+    showArrow = defaultProps52.showArrow,
+    arrowIconName = defaultProps52.arrowIconName,
+    popup,
+    opened,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs72(Fragment46, { children: [
+    /* @__PURE__ */ jsx179(
+      Button,
+      {
+        ...other,
+        className: classNames(
+          props.className,
+          MENUBUTTON_CLASSNAME
+        ),
+        text,
+        size,
+        rounded,
+        fillMode,
+        themeColor,
+        hover,
+        focus,
+        active,
+        selected,
+        disabled,
+        icon,
+        showArrow,
+        arrowIconName
+      }
+    ),
+    opened && popup && /* @__PURE__ */ jsx179(Popup, { className: "k-menu-popup", children: popup })
+  ] });
+};
+MenuButton.states = states58;
+MenuButton.options = options52;
+MenuButton.className = MENUBUTTON_CLASSNAME;
+MenuButton.defaultProps = defaultProps52;
+
+// src/menu-button/templates/icon-menu-button.tsx
+import { jsx as jsx180 } from "react/jsx-runtime";
+
+// src/menu-button/templates/icon-text-menu-button.tsx
+import { jsx as jsx181 } from "react/jsx-runtime";
+
+// src/menu-button/templates/text-menu-button.tsx
+import { jsx as jsx182 } from "react/jsx-runtime";
+
+// src/menu/menu-item.spec.tsx
+import { Fragment as Fragment47, jsx as jsx183, jsxs as jsxs73 } from "react/jsx-runtime";
+var MENUITEM_CLASSNAME = `k-menu-item`;
+var states59 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
+var options53 = {};
+var defaultProps53 = {
+  dir: "ltr"
+};
+var MenuItem = (props) => {
+  const {
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
+    icon,
+    text,
+    showArrow,
+    arrowIconName,
+    dir = defaultProps53.dir,
+    children,
+    ...other
+  } = props;
+  const contentTemplate = /* @__PURE__ */ jsx183(Fragment47, {});
+  if (children) {
+    children.forEach((child) => {
+      const component = child.type;
+      if (component === "MenuItemContent") {
+        contentTemplate.props.children.push(child);
+        return;
+      }
+    });
+  }
+  let expandArrowName = arrowIconName;
+  if (!expandArrowName) {
+    expandArrowName = dir === "rtl" ? "caret-alt-left" : "caret-alt-right";
+  }
+  return /* @__PURE__ */ jsxs73(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        MENUITEM_CLASSNAME,
+        //TODO
+        "k-item",
+        stateClassNames(MENUITEM_CLASSNAME, {
+          focus,
+          disabled
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsxs73(
+          "span",
+          {
+            className: classNames(
+              "k-link k-menu-link",
+              stateClassNames("k-menu-link", {
+                hover,
+                active,
+                selected,
+                disabled
+              })
+            ),
+            children: [
+              icon && /* @__PURE__ */ jsx183(Icon, { className: "k-menu-link-icon", icon }),
+              /* @__PURE__ */ jsx183("span", { className: "k-menu-link-text", children: text }),
+              showArrow && /* @__PURE__ */ jsx183("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx183(Icon, { icon: expandArrowName }) })
+            ]
+          }
+        ),
+        contentTemplate
+      ]
+    }
+  );
+};
+MenuItem.states = states59;
+MenuItem.options = options53;
+MenuItem.className = MENUITEM_CLASSNAME;
+MenuItem.defaultProps = defaultProps53;
+var menu_item_spec_default = MenuItem;
+
+// src/menu/menu-separator.spec.tsx
+import { jsx as jsx184 } from "react/jsx-runtime";
+var SEPARATOR_CLASSNAME = `k-separator`;
+var defaultProps54 = {
+  orientation: "horizontal"
+};
+var MenuSeparator = (props) => {
+  const {
+    orientation = defaultProps54.orientation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx184(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        "k-item",
+        SEPARATOR_CLASSNAME,
+        {
+          [`${SEPARATOR_CLASSNAME}-${orientation}`]: orientation
+        }
+      )
+    }
+  );
+};
+var menu_separator_spec_default = MenuSeparator;
+
+// src/menu/menu-item-content.tsx
+import { Fragment as Fragment48, jsx as jsx185 } from "react/jsx-runtime";
+
+// src/menu/menu-list.spec.tsx
+import { jsx as jsx186 } from "react/jsx-runtime";
+import { createElement } from "react";
+var MENULIST_CLASSNAME = `k-menu-group`;
+var states60 = [];
+var options54 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps55 = {
+  size: Size.medium,
+  dir: "ltr"
+};
+var MenuList = (props) => {
+  const {
+    children,
+    size = defaultProps55.size,
+    dir = defaultProps55.dir,
+    ...other
+  } = props;
+  const listChildren = [];
+  if (children) {
+    if (Array.isArray(children)) {
+      children.map((child, index) => {
+        if (child.type === menu_item_spec_default) {
+          listChildren.push(
+            /* @__PURE__ */ createElement(menu_item_spec_default, { ...child.props, dir, key: index })
+          );
+        } else if (child.type === menu_separator_spec_default) {
+          listChildren.push(
+            /* @__PURE__ */ jsx186(menu_separator_spec_default, {})
+          );
+        } else {
+          listChildren.push(child);
+        }
+      });
+    }
+  }
+  return /* @__PURE__ */ jsx186(
+    "ul",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        MENULIST_CLASSNAME,
+        optionClassNames(MENULIST_CLASSNAME, {
+          size
+        })
+      ),
+      children: listChildren
+    }
+  );
+};
+MenuList.states = states60;
+MenuList.options = options54;
+MenuList.className = MENULIST_CLASSNAME;
+MenuList.defaultProps = defaultProps55;
+
+// src/menu-button/templates/menu-button-popup.tsx
+import { jsx as jsx187, jsxs as jsxs74 } from "react/jsx-runtime";
+
+// src/split-button/split-button.spec.tsx
+import { Fragment as Fragment49, jsx as jsx188, jsxs as jsxs75 } from "react/jsx-runtime";
+var SPLITBUTTON_CLASSNAME = `k-split-button`;
+var states61 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
+var options55 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
+  themeColor: [
+    ThemeColor.base,
+    ThemeColor.primary,
+    ThemeColor.secondary,
+    ThemeColor.tertiary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info,
+    ThemeColor.light,
+    ThemeColor.dark,
+    ThemeColor.inverse
+  ]
+};
+var defaultProps56 = {
+  size: Size.medium,
+  rounded: Roundness.medium,
+  fillMode: FillMode.solid,
+  themeColor: ThemeColor.base,
+  arrowIconName: "caret-alt-down"
+};
+var SplitButton = (props) => {
+  const {
+    size = defaultProps56.size,
+    rounded = defaultProps56.rounded,
+    fillMode = defaultProps56.fillMode,
+    themeColor = defaultProps56.themeColor,
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
+    icon,
+    text,
+    arrowIconName = defaultProps56.arrowIconName,
+    popup,
+    opened,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs75(Fragment49, { children: [
+    /* @__PURE__ */ jsxs75(
+      "div",
+      {
+        ...other,
+        className: classNames(
+          props.className,
+          SPLITBUTTON_CLASSNAME,
+          "k-button-group",
+          optionClassNames(SPLITBUTTON_CLASSNAME, {
+            rounded
+          })
+        ),
+        children: [
+          /* @__PURE__ */ jsx188(
+            Button,
+            {
+              text,
+              icon,
+              size,
+              rounded,
+              fillMode,
+              themeColor,
+              hover,
+              focus,
+              active,
+              selected,
+              disabled,
+              children: props.children
+            }
+          ),
+          /* @__PURE__ */ jsx188(
+            Button,
+            {
+              className: "k-split-button-arrow",
+              icon: arrowIconName,
+              size,
+              rounded,
+              fillMode,
+              disabled
+            }
+          )
+        ]
+      }
+    ),
+    opened && popup && /* @__PURE__ */ jsx188(Popup, { className: "k-menu-popup", children: popup })
+  ] });
+};
+SplitButton.states = states61;
+SplitButton.options = options55;
+SplitButton.className = SPLITBUTTON_CLASSNAME;
+SplitButton.defaultProps = defaultProps56;
+var split_button_spec_default = SplitButton;
+
+// src/toolbar/toolbar.spec.tsx
+import { jsx as jsx189 } from "react/jsx-runtime";
+var TOOLBAR_CLASSNAME = `k-toolbar`;
+var states62 = [
+  States.focus
+];
+var options56 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps57 = {
+  size: Size.medium
+};
+var Toolbar = (props) => {
+  const {
+    size = defaultProps57.size,
+    focus,
+    resizable,
+    ...other
+  } = props;
+  const toolbarChildren = [];
+  const addUniqueToolClass = (child, index) => {
+    const tempToolbarChildren = [];
+    if (child.type === Button && child.props.className && child.props.className.includes("k-toolbar-overflow-button")) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx189(
+          Button,
+          {
+            ...child.props,
+            className: `${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        )
+      );
+    } else if (child.type === Button && child.props.className && child.props.className.includes("k-toggle-button")) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx189(
+          Button,
+          {
+            ...child.props,
+            className: `k-toolbar-toggle-button ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        )
+      );
+    } else if (child.type === Button) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx189(
+          Button,
+          {
+            ...child.props,
+            className: `k-toolbar-button ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        )
+      );
+    } else if (child.type === MenuButton) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx189(
+          MenuButton,
+          {
+            ...child.props,
+            className: `k-toolbar-menu-button ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        )
+      );
+    } else if (child.type === split_button_spec_default) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx189(
+          split_button_spec_default,
+          {
+            ...child.props,
+            className: `k-toolbar-split-button ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        )
+      );
+    } else if (child.type === ButtonGroup || child.props.className && child.props.className.includes("k-button-group")) {
+      const buttonGroupItems = [];
+      const childrenArray = Array.isArray(child.props.children) ? child.props.children : [child.props.children];
+      childrenArray.forEach((button, bindex) => {
+        buttonGroupItems.push(
+          /* @__PURE__ */ jsx189(
+            Button,
+            {
+              ...button.props,
+              className: `k-toolbar-button ${button.props.className ? button.props.className : ""}`
+            },
+            `${bindex}-${(/* @__PURE__ */ new Date()).getTime()}`
+          )
+        );
+      });
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx189(
+          ButtonGroup,
+          {
+            ...child.props,
+            className: `k-toolbar-button-group ${child.props.className ? child.props.className : ""}`,
+            children: buttonGroupItems
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        )
+      );
+    } else if (child.type === Combobox) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx189(
+          Combobox,
+          {
+            ...child.props,
+            className: `k-toolbar-combobox ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        )
+      );
+    } else if (child.type === DropdownList) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx189(
+          DropdownList,
+          {
+            ...child.props,
+            className: `k-toolbar-dropdownlist ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        )
+      );
+    } else if (child.type === ColorPicker) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx189(
+          ColorPicker,
+          {
+            ...child.props,
+            className: `k-toolbar-colorpicker ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        )
+      );
+    } else {
+      tempToolbarChildren.push(child);
+    }
+    tempToolbarChildren.forEach((item) => {
+      toolbarChildren.push(item);
+    });
+  };
+  if (props.children) {
+    const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
+    childrenArray.forEach((child, index) => {
+      addUniqueToolClass(child, index);
+    });
+  }
+  return /* @__PURE__ */ jsx189(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TOOLBAR_CLASSNAME,
+        optionClassNames(TOOLBAR_CLASSNAME, {
+          size
+        }),
+        stateClassNames(TOOLBAR_CLASSNAME, {
+          focus
+        }),
+        {
+          [`${TOOLBAR_CLASSNAME}-resizable`]: resizable
+        }
+      ),
+      children: toolbarChildren
+    }
+  );
+};
+Toolbar.states = states62;
+Toolbar.options = options56;
+Toolbar.className = TOOLBAR_CLASSNAME;
+Toolbar.defaultProps = defaultProps57;
+
+// src/toolbar/toolbar-angular.spec.tsx
+import { jsx as jsx190 } from "react/jsx-runtime";
+var TOOLBARANGULAR_CLASSNAME = `k-toolbar`;
+var states63 = [
+  States.focus
+];
+var options57 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps58 = {
+  size: Size.medium
+};
+var ToolbarAngular = (props) => {
+  const {
+    size = defaultProps58.size,
+    focus,
+    resizable,
+    ...other
+  } = props;
+  const toolbarChildren = [];
+  const addUniqueToolClass = (child, index) => {
+    const tempToolbarChildren = [];
+    if (child.type === Button && child.props.className && child.props.className.includes("k-toolbar-overflow-button")) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx190("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx190(
+          Button,
+          {
+            ...child.props,
+            className: `${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        ) })
+      );
+    } else if (child.type === Button && child.props.className && child.props.className.includes("k-toggle-button")) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx190("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx190(
+          Button,
+          {
+            ...child.props,
+            className: `k-toolbar-toggle-button ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        ) })
+      );
+    } else if (child.type === Button) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx190("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx190(
+          Button,
+          {
+            ...child.props,
+            className: `k-toolbar-button ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        ) })
+      );
+    } else if (child.type === MenuButton) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx190("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx190(
+          MenuButton,
+          {
+            ...child.props,
+            className: `k-toolbar-menu-button ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        ) })
+      );
+    } else if (child.type === split_button_spec_default) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx190("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx190(
+          split_button_spec_default,
+          {
+            ...child.props,
+            className: `k-toolbar-split-button ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        ) })
+      );
+    } else if (child.type === ButtonGroup || child.props.className && child.props.className.includes("k-button-group")) {
+      const buttonGroupItems = [];
+      const childrenArray = Array.isArray(child.props.children) ? child.props.children : [child.props.children];
+      childrenArray.forEach((button, bindex) => {
+        buttonGroupItems.push(
+          /* @__PURE__ */ jsx190(
+            Button,
+            {
+              ...button.props,
+              className: `k-toolbar-button ${button.props.className ? button.props.className : ""}`
+            },
+            `${bindex}-${(/* @__PURE__ */ new Date()).getTime()}`
+          )
+        );
+      });
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx190("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx190(
+          ButtonGroup,
+          {
+            ...child.props,
+            className: `k-toolbar-button-group ${child.props.className ? child.props.className : ""}`,
+            children: buttonGroupItems
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        ) })
+      );
+    } else if (child.type === Combobox) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx190("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx190(
+          Combobox,
+          {
+            ...child.props,
+            className: `k-toolbar-combobox ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        ) })
+      );
+    } else if (child.type === DropdownList) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx190("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx190(
+          DropdownList,
+          {
+            ...child.props,
+            className: `k-toolbar-dropdownlist ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        ) })
+      );
+    } else if (child.type === ColorPicker) {
+      tempToolbarChildren.push(
+        /* @__PURE__ */ jsx190("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx190(
+          ColorPicker,
+          {
+            ...child.props,
+            className: `k-toolbar-colorpicker ${child.props.className ? child.props.className : ""}`
+          },
+          `${index}-${(/* @__PURE__ */ new Date()).getTime()}`
+        ) })
+      );
+    } else {
+      tempToolbarChildren.push(child);
+    }
+    tempToolbarChildren.forEach((item) => {
+      toolbarChildren.push(item);
+    });
+  };
+  if (props.children) {
+    const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
+    childrenArray.forEach((child, index) => {
+      addUniqueToolClass(child, index);
+    });
+  }
+  return /* @__PURE__ */ jsx190(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TOOLBARANGULAR_CLASSNAME,
+        optionClassNames(TOOLBARANGULAR_CLASSNAME, {
+          size
+        }),
+        stateClassNames(TOOLBARANGULAR_CLASSNAME, {
+          focus
+        }),
+        {
+          [`${TOOLBARANGULAR_CLASSNAME}-resizable`]: resizable
+        }
+      ),
+      children: toolbarChildren
+    }
+  );
+};
+ToolbarAngular.states = states63;
+ToolbarAngular.options = options57;
+ToolbarAngular.className = TOOLBARANGULAR_CLASSNAME;
+ToolbarAngular.defaultProps = defaultProps58;
+
+// src/toolbar/toolbar-separator.tsx
+import { jsx as jsx191 } from "react/jsx-runtime";
+
+// src/toolbar/toolbar-item.spec.tsx
+import { jsx as jsx192 } from "react/jsx-runtime";
+var TOOLBARITEM_CLASSNAME = `k-toolbar-item`;
+var states64 = [
+  States.focus
+];
+var options58 = {};
+var defaultProps59 = {};
+var ToolbarItem = (props) => {
+  const {
+    focus,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx192(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TOOLBARITEM_CLASSNAME,
+        stateClassNames(TOOLBARITEM_CLASSNAME, {
+          focus
+        })
+      ),
+      children: props.children
+    }
+  );
+};
+ToolbarItem.states = states64;
+ToolbarItem.options = options58;
+ToolbarItem.className = TOOLBARITEM_CLASSNAME;
+ToolbarItem.defaultProps = defaultProps59;
+
+// src/toolbar/toolbar-popup.spec.tsx
+import { jsx as jsx193 } from "react/jsx-runtime";
+var TOOLBARPOPUP_CLASSNAME = `k-toolbar-popup`;
+var states65 = [];
+var options59 = {};
+var defaultProps60 = {};
+var ToolbarPopup = (props) => {
+  const { ...other } = props;
+  return /* @__PURE__ */ jsx193(
+    Popup,
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TOOLBARPOPUP_CLASSNAME
+      ),
+      children: props.children
+    }
+  );
+};
+ToolbarPopup.states = states65;
+ToolbarPopup.options = options59;
+ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
+ToolbarPopup.defaultProps = defaultProps60;
+
+// src/split-button/templates/icon-split-button.tsx
+import { jsx as jsx194 } from "react/jsx-runtime";
+
+// src/split-button/templates/icon-text-split-button.tsx
+import { jsx as jsx195 } from "react/jsx-runtime";
+
+// src/split-button/templates/text-split-button.tsx
+import { jsx as jsx196 } from "react/jsx-runtime";
+
+// src/split-button/templates/split-button-popup.tsx
+import { jsx as jsx197, jsxs as jsxs76 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-normal.tsx
+import { Fragment as Fragment50, jsx as jsx198, jsxs as jsxs77 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-resizable.tsx
+import { jsx as jsx199 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-angular-normal.tsx
+import { jsx as jsx200 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-angular-resizable.tsx
+import { jsx as jsx201 } from "react/jsx-runtime";
+
+// src/grid/grid-toolbar.spec.tsx
+import { jsx as jsx202 } from "react/jsx-runtime";
+
 // src/grid/tests/grid-filter-row.tsx
-import { Fragment as Fragment46, jsx as jsx140, jsxs as jsxs64 } from "react/jsx-runtime";
-var grid_filter_row_default = () => /* @__PURE__ */ jsx140(Fragment46, { children: /* @__PURE__ */ jsxs64("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
-  /* @__PURE__ */ jsx140("div", { className: "section", children: /* @__PURE__ */ jsx140("div", { id: "grid", className: "k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs64("table", { className: "k-table k-table-md k-grid-header-table", children: [
-    /* @__PURE__ */ jsx140("colgroup", { children: /* @__PURE__ */ jsx140("col", {}) }),
-    /* @__PURE__ */ jsx140("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsx140("tr", { className: "k-table-row k-filter-row", children: /* @__PURE__ */ jsx140("th", { className: "k-table-th", children: /* @__PURE__ */ jsx140("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs64("span", { children: [
-      /* @__PURE__ */ jsx140(ColorPicker, {}),
-      /* @__PURE__ */ jsx140(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
-      /* @__PURE__ */ jsx140(Button, { icon: "filter-clear", disabled: true })
+import { Fragment as Fragment51, jsx as jsx203, jsxs as jsxs78 } from "react/jsx-runtime";
+var grid_filter_row_default = () => /* @__PURE__ */ jsx203(Fragment51, { children: /* @__PURE__ */ jsxs78("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
+  /* @__PURE__ */ jsx203("div", { className: "section", children: /* @__PURE__ */ jsx203(Grid, { className: "k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx203(GridHeader, { children: /* @__PURE__ */ jsx203("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs78(GridHeaderTable, { children: [
+    /* @__PURE__ */ jsx203("colgroup", { children: /* @__PURE__ */ jsx203("col", {}) }),
+    /* @__PURE__ */ jsx203(TableThead, { children: /* @__PURE__ */ jsx203(TableRow, { className: "k-filter-row", children: /* @__PURE__ */ jsx203(TableTh, { children: /* @__PURE__ */ jsx203("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs78("span", { children: [
+      /* @__PURE__ */ jsx203(ColorPicker, {}),
+      /* @__PURE__ */ jsx203(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
+      /* @__PURE__ */ jsx203(Button, { icon: "filter-clear", disabled: true })
     ] }) }) }) }) })
   ] }) }) }) }) }),
-  /* @__PURE__ */ jsx140("div", {}),
-  /* @__PURE__ */ jsx140("div", {}),
-  /* @__PURE__ */ jsx140("div", { className: "section", children: /* @__PURE__ */ jsx140("div", { id: "grid", className: "k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs64("table", { className: "k-table k-table-md k-grid-header-table", children: [
-    /* @__PURE__ */ jsx140("colgroup", { children: /* @__PURE__ */ jsx140("col", {}) }),
-    /* @__PURE__ */ jsx140("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsx140("tr", { className: "k-table-row k-filter-row", children: /* @__PURE__ */ jsx140("th", { className: "k-table-th", children: /* @__PURE__ */ jsx140("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs64("span", { children: [
-      /* @__PURE__ */ jsx140(Autocomplete, { placeholder: "Autocomplete..." }),
-      /* @__PURE__ */ jsx140(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
-      /* @__PURE__ */ jsx140(Button, { icon: "filter-clear", disabled: true })
+  /* @__PURE__ */ jsx203("div", {}),
+  /* @__PURE__ */ jsx203("div", {}),
+  /* @__PURE__ */ jsx203("div", { className: "section", children: /* @__PURE__ */ jsx203(Grid, { className: "k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx203(GridHeader, { children: /* @__PURE__ */ jsx203("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs78(GridHeaderTable, { children: [
+    /* @__PURE__ */ jsx203("colgroup", { children: /* @__PURE__ */ jsx203("col", {}) }),
+    /* @__PURE__ */ jsx203(TableThead, { children: /* @__PURE__ */ jsx203(TableRow, { className: "k-filter-row", children: /* @__PURE__ */ jsx203(TableTh, { children: /* @__PURE__ */ jsx203("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs78("span", { children: [
+      /* @__PURE__ */ jsx203(Autocomplete, { placeholder: "Autocomplete..." }),
+      /* @__PURE__ */ jsx203(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
+      /* @__PURE__ */ jsx203(Button, { icon: "filter-clear", disabled: true })
     ] }) }) }) }) })
   ] }) }) }) }) }),
-  /* @__PURE__ */ jsx140("div", { className: "section", children: /* @__PURE__ */ jsx140("div", { id: "grid", className: "k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs64("table", { className: "k-table k-table-md k-grid-header-table", children: [
-    /* @__PURE__ */ jsx140("colgroup", { children: /* @__PURE__ */ jsx140("col", {}) }),
-    /* @__PURE__ */ jsx140("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsx140("tr", { className: "k-table-row k-filter-row", children: /* @__PURE__ */ jsx140("th", { className: "k-table-th", children: /* @__PURE__ */ jsx140("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs64("span", { children: [
-      /* @__PURE__ */ jsx140(Combobox, { placeholder: "Combobox..." }),
-      /* @__PURE__ */ jsx140(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
-      /* @__PURE__ */ jsx140(Button, { icon: "filter-clear", disabled: true })
+  /* @__PURE__ */ jsx203("div", { className: "section", children: /* @__PURE__ */ jsx203(Grid, { className: "k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx203(GridHeader, { children: /* @__PURE__ */ jsx203("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs78(GridHeaderTable, { children: [
+    /* @__PURE__ */ jsx203("colgroup", { children: /* @__PURE__ */ jsx203("col", {}) }),
+    /* @__PURE__ */ jsx203(TableThead, { children: /* @__PURE__ */ jsx203(TableRow, { className: "k-filter-row", children: /* @__PURE__ */ jsx203(TableTh, { children: /* @__PURE__ */ jsx203("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs78("span", { children: [
+      /* @__PURE__ */ jsx203(Combobox, { placeholder: "Combobox..." }),
+      /* @__PURE__ */ jsx203(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
+      /* @__PURE__ */ jsx203(Button, { icon: "filter-clear", disabled: true })
     ] }) }) }) }) })
   ] }) }) }) }) }),
-  /* @__PURE__ */ jsx140("div", { className: "section", children: /* @__PURE__ */ jsx140("div", { id: "grid", className: "k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs64("table", { className: "k-table k-table-md k-grid-header-table", children: [
-    /* @__PURE__ */ jsx140("colgroup", { children: /* @__PURE__ */ jsx140("col", {}) }),
-    /* @__PURE__ */ jsx140("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsx140("tr", { className: "k-table-row k-filter-row", children: /* @__PURE__ */ jsx140("th", { className: "k-table-th", children: /* @__PURE__ */ jsx140("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs64("span", { children: [
-      /* @__PURE__ */ jsx140(DropdownList, { placeholder: "DropdownList..." }),
-      /* @__PURE__ */ jsx140(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
-      /* @__PURE__ */ jsx140(Button, { icon: "filter-clear", disabled: true })
+  /* @__PURE__ */ jsx203("div", { className: "section", children: /* @__PURE__ */ jsx203(Grid, { className: "k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx203(GridHeader, { children: /* @__PURE__ */ jsx203("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs78(GridHeaderTable, { children: [
+    /* @__PURE__ */ jsx203("colgroup", { children: /* @__PURE__ */ jsx203("col", {}) }),
+    /* @__PURE__ */ jsx203(TableThead, { children: /* @__PURE__ */ jsx203(TableRow, { className: "k-filter-row", children: /* @__PURE__ */ jsx203(TableTh, { children: /* @__PURE__ */ jsx203("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs78("span", { children: [
+      /* @__PURE__ */ jsx203(DropdownList, { placeholder: "DropdownList..." }),
+      /* @__PURE__ */ jsx203(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
+      /* @__PURE__ */ jsx203(Button, { icon: "filter-clear", disabled: true })
     ] }) }) }) }) })
   ] }) }) }) }) }),
-  /* @__PURE__ */ jsx140("div", { className: "section", children: /* @__PURE__ */ jsx140("div", { id: "grid", className: "k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs64("table", { className: "k-table k-table-md k-grid-header-table", children: [
-    /* @__PURE__ */ jsx140("colgroup", { children: /* @__PURE__ */ jsx140("col", {}) }),
-    /* @__PURE__ */ jsx140("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsx140("tr", { className: "k-table-row k-filter-row", children: /* @__PURE__ */ jsx140("th", { className: "k-table-th", children: /* @__PURE__ */ jsx140("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs64("span", { children: [
-      /* @__PURE__ */ jsx140(NumericTextbox, { placeholder: "Numeric..." }),
-      /* @__PURE__ */ jsx140(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
-      /* @__PURE__ */ jsx140(Button, { icon: "filter-clear", disabled: true })
+  /* @__PURE__ */ jsx203("div", { className: "section", children: /* @__PURE__ */ jsx203(Grid, { className: "k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx203(GridHeader, { children: /* @__PURE__ */ jsx203("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs78(GridHeaderTable, { children: [
+    /* @__PURE__ */ jsx203("colgroup", { children: /* @__PURE__ */ jsx203("col", {}) }),
+    /* @__PURE__ */ jsx203(TableThead, { children: /* @__PURE__ */ jsx203(TableRow, { className: "k-filter-row", children: /* @__PURE__ */ jsx203(TableTh, { children: /* @__PURE__ */ jsx203("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs78("span", { children: [
+      /* @__PURE__ */ jsx203(NumericTextbox, { placeholder: "Numeric..." }),
+      /* @__PURE__ */ jsx203(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
+      /* @__PURE__ */ jsx203(Button, { icon: "filter-clear", disabled: true })
     ] }) }) }) }) })
   ] }) }) }) }) }),
-  /* @__PURE__ */ jsx140("div", { className: "section", children: /* @__PURE__ */ jsx140("div", { id: "grid", className: "k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs64("table", { className: "k-table k-table-md k-grid-header-table", children: [
-    /* @__PURE__ */ jsx140("colgroup", { children: /* @__PURE__ */ jsx140("col", {}) }),
-    /* @__PURE__ */ jsx140("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsx140("tr", { className: "k-table-row k-filter-row", children: /* @__PURE__ */ jsx140("th", { className: "k-table-th", children: /* @__PURE__ */ jsx140("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs64("span", { children: [
-      /* @__PURE__ */ jsx140(Textbox, { placeholder: "Textbox..." }),
-      /* @__PURE__ */ jsx140(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
-      /* @__PURE__ */ jsx140(Button, { icon: "filter-clear", disabled: true })
+  /* @__PURE__ */ jsx203("div", { className: "section", children: /* @__PURE__ */ jsx203(Grid, { className: "k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx203(GridHeader, { children: /* @__PURE__ */ jsx203("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs78(GridHeaderTable, { children: [
+    /* @__PURE__ */ jsx203("colgroup", { children: /* @__PURE__ */ jsx203("col", {}) }),
+    /* @__PURE__ */ jsx203(TableThead, { children: /* @__PURE__ */ jsx203(TableRow, { className: "k-filter-row", children: /* @__PURE__ */ jsx203(TableTh, { children: /* @__PURE__ */ jsx203("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs78("span", { children: [
+      /* @__PURE__ */ jsx203(Textbox, { placeholder: "Textbox..." }),
+      /* @__PURE__ */ jsx203(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
+      /* @__PURE__ */ jsx203(Button, { icon: "filter-clear", disabled: true })
     ] }) }) }) }) })
   ] }) }) }) }) }),
-  /* @__PURE__ */ jsx140("div", {}),
-  /* @__PURE__ */ jsx140("div", { className: "section", children: /* @__PURE__ */ jsx140("div", { id: "grid", className: "k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs64("table", { className: "k-table k-table-md k-grid-header-table", children: [
-    /* @__PURE__ */ jsx140("colgroup", { children: /* @__PURE__ */ jsx140("col", {}) }),
-    /* @__PURE__ */ jsx140("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsx140("tr", { className: "k-table-row k-filter-row", children: /* @__PURE__ */ jsx140("th", { className: "k-table-th", children: /* @__PURE__ */ jsx140("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs64("span", { children: [
-      /* @__PURE__ */ jsx140(DatePicker, { placeholder: "Datepicker..." }),
-      /* @__PURE__ */ jsx140(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
-      /* @__PURE__ */ jsx140(Button, { icon: "filter-clear", disabled: true })
+  /* @__PURE__ */ jsx203("div", {}),
+  /* @__PURE__ */ jsx203("div", { className: "section", children: /* @__PURE__ */ jsx203(Grid, { className: "k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx203(GridHeader, { children: /* @__PURE__ */ jsx203("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs78(GridHeaderTable, { children: [
+    /* @__PURE__ */ jsx203("colgroup", { children: /* @__PURE__ */ jsx203("col", {}) }),
+    /* @__PURE__ */ jsx203(TableThead, { children: /* @__PURE__ */ jsx203(TableRow, { className: "k-filter-row", children: /* @__PURE__ */ jsx203(TableTh, { children: /* @__PURE__ */ jsx203("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs78("span", { children: [
+      /* @__PURE__ */ jsx203(DatePicker, { placeholder: "Datepicker..." }),
+      /* @__PURE__ */ jsx203(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
+      /* @__PURE__ */ jsx203(Button, { icon: "filter-clear", disabled: true })
     ] }) }) }) }) })
   ] }) }) }) }) }),
-  /* @__PURE__ */ jsx140("div", { className: "section", children: /* @__PURE__ */ jsx140("div", { id: "grid", className: "k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs64("table", { className: "k-table k-table-md k-grid-header-table", children: [
-    /* @__PURE__ */ jsx140("colgroup", { children: /* @__PURE__ */ jsx140("col", {}) }),
-    /* @__PURE__ */ jsx140("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsx140("tr", { className: "k-table-row k-filter-row", children: /* @__PURE__ */ jsx140("th", { className: "k-table-th", children: /* @__PURE__ */ jsx140("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs64("span", { children: [
-      /* @__PURE__ */ jsx140(TimePicker, { placeholder: "TimePicker..." }),
-      /* @__PURE__ */ jsx140(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
-      /* @__PURE__ */ jsx140(Button, { icon: "filter-clear", disabled: true })
+  /* @__PURE__ */ jsx203("div", { className: "section", children: /* @__PURE__ */ jsx203(Grid, { className: "k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx203(GridHeader, { children: /* @__PURE__ */ jsx203("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs78(GridHeaderTable, { children: [
+    /* @__PURE__ */ jsx203("colgroup", { children: /* @__PURE__ */ jsx203("col", {}) }),
+    /* @__PURE__ */ jsx203(TableThead, { children: /* @__PURE__ */ jsx203(TableRow, { className: "k-filter-row", children: /* @__PURE__ */ jsx203(TableTh, { children: /* @__PURE__ */ jsx203("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs78("span", { children: [
+      /* @__PURE__ */ jsx203(TimePicker, { placeholder: "TimePicker..." }),
+      /* @__PURE__ */ jsx203(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
+      /* @__PURE__ */ jsx203(Button, { icon: "filter-clear", disabled: true })
     ] }) }) }) }) })
   ] }) }) }) }) }),
-  /* @__PURE__ */ jsx140("div", { className: "section", children: /* @__PURE__ */ jsx140("div", { id: "grid", className: "k-grid k-grid-md k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx140("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs64("table", { className: "k-table k-table-md k-grid-header-table", children: [
-    /* @__PURE__ */ jsx140("colgroup", { children: /* @__PURE__ */ jsx140("col", {}) }),
-    /* @__PURE__ */ jsx140("thead", { className: "k-table-thead", children: /* @__PURE__ */ jsx140("tr", { className: "k-table-row k-filter-row", children: /* @__PURE__ */ jsx140("th", { className: "k-table-th", children: /* @__PURE__ */ jsx140("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs64("span", { children: [
-      /* @__PURE__ */ jsx140(DateTimePicker, { placeholder: "DateTimePicker..." }),
-      /* @__PURE__ */ jsx140(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
-      /* @__PURE__ */ jsx140(Button, { icon: "filter-clear", disabled: true })
+  /* @__PURE__ */ jsx203("div", { className: "section", children: /* @__PURE__ */ jsx203(Grid, { className: "k-grid-display-block k-grid-no-scrollbar", children: /* @__PURE__ */ jsx203(GridHeader, { children: /* @__PURE__ */ jsx203("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs78(GridHeaderTable, { children: [
+    /* @__PURE__ */ jsx203("colgroup", { children: /* @__PURE__ */ jsx203("col", {}) }),
+    /* @__PURE__ */ jsx203(TableThead, { children: /* @__PURE__ */ jsx203(TableRow, { className: "k-filter-row", children: /* @__PURE__ */ jsx203(TableTh, { children: /* @__PURE__ */ jsx203("span", { className: "k-filtercell", children: /* @__PURE__ */ jsxs78("span", { children: [
+      /* @__PURE__ */ jsx203(DateTimePicker, { placeholder: "DateTimePicker..." }),
+      /* @__PURE__ */ jsx203(DropdownList, { className: "k-dropdown-operator", arrowIconName: "filter" }),
+      /* @__PURE__ */ jsx203(Button, { icon: "filter-clear", disabled: true })
     ] }) }) }) }) })
   ] }) }) }) }) })
 ] }) });