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

package/dist/esm/{textarea/tests/textarea-resizable.js → grid/grid-header-cell.spec.js}

@@ -67,19 +67,6 @@ var Size = {
   "xxlarge": "xxlarge",
   "xxxlarge": "xxxlarge"
 };
-var Roundness = {
-  "small": "small",
-  "medium": "medium",
-  "large": "large",
-  "full": "full"
-};
-var FillMode = {
-  "solid": "solid",
-  "flat": "flat",
-  "outline": "outline",
-  "clear": "clear",
-  "link": "link"
-};
 var ThemeColor = {
   "inherit": "inherit",
   "base": "base",
@@ -111,122 +98,37 @@ var States = {
   "readonly": "readonly"
 };
 
-// src/input/input.spec.tsx
+// src/table/table-th.tsx
 import { jsx } from "react/jsx-runtime";
-var INPUT_CLASSNAME = `k-input`;
-var states = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var options = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps = {
-  size: Size.medium,
-  rounded: Size.medium,
-  fillMode: FillMode.solid
-};
-var Input = (props) => {
+var className = `k-table-th`;
+var TableTh = (props) => {
   const {
-    hover,
-    focus,
-    disabled,
-    invalid,
-    valid,
-    loading,
-    readonly,
-    size = defaultProps.size,
-    rounded = defaultProps.rounded,
-    fillMode = defaultProps.fillMode,
+    text,
+    colspan,
+    rowspan,
     ...other
   } = props;
+  const textOrChildren = text ? text : props.children;
   return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        INPUT_CLASSNAME,
-        optionClassNames(INPUT_CLASSNAME, { size, rounded, fillMode }),
-        stateClassNames(INPUT_CLASSNAME, { hover, focus, disabled, invalid, valid, loading, readonly })
-      )
-    }
-  );
-};
-Input.states = states;
-Input.options = options;
-Input.className = INPUT_CLASSNAME;
-Input.defaultProps = defaultProps;
-
-// src/input/picker.spec.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var PICKER_CLASSNAME = `k-picker`;
-var pickerStates = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var pickerOptions = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps2 = {
-  size: Size.medium,
-  rounded: Roundness.medium,
-  fillMode: FillMode.solid
-};
-var Picker = (props) => {
-  const {
-    hover,
-    focus,
-    disabled,
-    invalid,
-    valid,
-    loading,
-    readonly,
-    size = defaultProps2.size,
-    rounded = defaultProps2.rounded,
-    fillMode = defaultProps2.fillMode,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx2(
-    "span",
+    "th",
     {
+      colSpan: colspan,
+      rowSpan: rowspan,
       ...other,
       className: classNames(
         props.className,
-        PICKER_CLASSNAME,
-        optionClassNames(PICKER_CLASSNAME, { size, rounded, fillMode }),
-        stateClassNames(PICKER_CLASSNAME, { hover, focus, disabled, invalid, valid, loading, readonly })
+        className
       ),
-      children: props.children
+      children: textOrChildren
     }
   );
 };
-Picker.states = pickerStates;
-Picker.options = pickerOptions;
-Picker.className = PICKER_CLASSNAME;
-Picker.defaultProps = defaultProps2;
 
 // src/icon/font-icon.spec.tsx
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 var FONTICON_CLASSNAME = `k-icon k-font-icon`;
-var states2 = [];
-var options2 = {
+var states = [];
+var options = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -241,7 +143,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {};
+var defaultProps = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -252,9 +154,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx3(Fragment, {});
+    return /* @__PURE__ */ jsx2(Fragment, {});
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       ...other,
@@ -275,17 +177,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states2;
-FontIcon.options = options2;
+FontIcon.states = states;
+FontIcon.options = options;
 FontIcon.className = FONTICON_CLASSNAME;
-FontIcon.defaultProps = defaultProps3;
+FontIcon.defaultProps = defaultProps;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
 var SVGICON_CLASSNAME = `k-icon k-svg-icon`;
-var states3 = [];
-var options3 = {
+var states2 = [];
+var options2 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -300,7 +202,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps4 = {
+var defaultProps2 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -309,15 +211,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps4.viewBox,
+    viewBox = defaultProps2.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx4(Fragment2, {});
+    return /* @__PURE__ */ jsx3(Fragment2, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx3(
       "span",
       {
         ...other,
@@ -330,7 +232,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
       ...other,
@@ -348,7 +250,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsx3(
         "svg",
         {
           "aria-hidden": true,
@@ -362,10 +264,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states3;
-SvgIcon.options = options3;
+SvgIcon.states = states2;
+SvgIcon.options = options2;
 SvgIcon.className = SVGICON_CLASSNAME;
-SvgIcon.defaultProps = defaultProps4;
+SvgIcon.defaultProps = defaultProps2;
 var svg_icon_spec_default = SvgIcon;
 
 // ../../node_modules/@progress/kendo-svg-icons/dist/index.es.js
@@ -4400,13 +4302,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4 } from "react/jsx-runtime";
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states4 = [];
-var options4 = {
+var states3 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4421,7 +4323,7 @@ var options4 = {
     ThemeColor.dark
   ]
 };
-var defaultProps5 = {
+var defaultProps3 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4430,613 +4332,99 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps5.type,
+    type = defaultProps3.type,
     rotate,
     flip,
-    viewBox = defaultProps5.viewBox,
+    viewBox = defaultProps3.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx5(Fragment3, {});
+    return /* @__PURE__ */ jsx4(Fragment3, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ jsx5(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ jsx4(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ jsx5(Fragment3, {});
+      return /* @__PURE__ */ jsx4(Fragment3, {});
     }
-    return /* @__PURE__ */ jsx5(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ jsx4(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ jsx5(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ jsx4(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
-Icon.states = states4;
-Icon.options = options4;
-Icon.defaultProps = defaultProps5;
+Icon.states = states3;
+Icon.options = options3;
+Icon.defaultProps = defaultProps3;
 
-// src/input/input-clear-value.tsx
-import { Fragment as Fragment4, jsx as jsx6 } from "react/jsx-runtime";
-var className = `k-clear-value`;
-var states5 = [
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var options5 = {};
-var InputClearValue = (props) => {
-  const {
-    disabled,
-    loading,
-    readonly,
-    value
-  } = props;
-  if (disabled || readonly || loading || !value) {
-    return /* @__PURE__ */ jsx6(Fragment4, {});
-  }
-  return /* @__PURE__ */ jsx6("span", { className: classNames(props.className, className), children: /* @__PURE__ */ jsx6(Icon, { icon: "x" }) });
-};
-InputClearValue.states = states5;
-InputClearValue.options = options5;
-InputClearValue.className = className;
-
-// src/input/input-inner-input.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var className2 = `k-input-inner`;
-var states6 = [];
-var options6 = {};
-var defaultProps6 = {
-  type: "text",
-  autocomplete: "off",
-  value: "",
-  placeholder: ""
-};
-var InputInnerInput = (props) => {
-  const {
-    value = defaultProps6.value,
-    type = defaultProps6.type,
-    placeholder = defaultProps6.placeholder,
-    autocomplete = defaultProps6.autocomplete,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx7(
-    "input",
-    {
-      ...other,
-      type,
-      className: classNames(props.className, className2, optionClassNames(className2, props)),
-      placeholder,
-      autoComplete: autocomplete,
-      defaultValue: value
-    }
-  );
-};
-InputInnerInput.states = states6;
-InputInnerInput.options = options6;
-InputInnerInput.className = className2;
-
-// src/input/input-inner-span.tsx
-import { jsx as jsx8, jsxs } from "react/jsx-runtime";
-var className3 = `k-input-inner`;
-var states7 = [];
-var options7 = {};
-var InputInnerSpan = (props) => {
-  const {
-    value,
-    placeholder,
-    showValue,
-    valueIcon,
-    valueIconName,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ...other,
-      className: classNames(props.className, className3, optionClassNames(className3, props)),
-      children: [
-        valueIcon,
-        !valueIcon && valueIconName && /* @__PURE__ */ jsx8(Icon, { className: "k-input-value-icon", icon: valueIconName }),
-        showValue && !value && placeholder,
-        showValue && value && /* @__PURE__ */ jsx8("span", { className: "k-input-value-text", children: value })
-      ]
-    }
-  );
-};
-InputInnerSpan.states = states7;
-InputInnerSpan.options = options7;
-InputInnerSpan.className = className3;
-
-// src/input/input-inner-textarea.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var defaultProps7 = {
-  value: "",
-  placeholder: ""
-};
-var className4 = `k-input-inner`;
-var states8 = [];
-var options8 = {};
-var InputInnerTextarea = (props) => {
-  const {
-    value = defaultProps7.value,
-    placeholder = defaultProps7.placeholder,
-    rows,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx9(
-    "textarea",
-    {
-      ...other,
-      className: classNames(props.className, className4, optionClassNames(className4, props)),
-      placeholder,
-      rows,
-      children: value
-    }
-  );
-};
-InputInnerTextarea.states = states8;
-InputInnerTextarea.options = options8;
-InputInnerTextarea.className = className4;
-
-// src/input/input-loading-icon.tsx
-import { Fragment as Fragment5, jsx as jsx10 } from "react/jsx-runtime";
-var states9 = [
-  States.disabled,
-  States.loading
-];
-
-// src/input/input-validation-icon.tsx
-import { Fragment as Fragment6, jsx as jsx11 } from "react/jsx-runtime";
-var className5 = `k-input-validation-icon`;
-var states10 = [
-  States.valid,
-  States.invalid,
-  States.disabled,
-  States.loading
-];
-var options9 = {};
-var InputValidationIcon = (props) => {
-  const {
-    valid,
-    invalid,
-    disabled,
-    loading
-  } = props;
-  const iconName = invalid ? "warning-circle" : "check-circle";
-  const renderValidationIcon = Boolean(valid || invalid);
-  if (disabled || loading || !renderValidationIcon) {
-    return /* @__PURE__ */ jsx11(Fragment6, {});
-  }
-  return /* @__PURE__ */ jsx11(Icon, { className: classNames(className5), icon: iconName });
-};
-InputValidationIcon.states = states10;
-InputValidationIcon.options = options9;
-InputValidationIcon.className = className5;
-
-// src/input/input-prefix.tsx
-import { Fragment as Fragment7, jsx as jsx12 } from "react/jsx-runtime";
-var className6 = `k-input-prefix`;
-var defaultProps8 = {
-  direction: "horizontal"
-};
-var InputPrefix = (props) => {
-  const {
-    direction = defaultProps8.direction,
-    ...other
-  } = props;
-  if (!props.children) {
-    return /* @__PURE__ */ jsx12(Fragment7, {});
-  }
-  return /* @__PURE__ */ jsx12(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        className6,
-        props.className,
-        {
-          [`k-input-prefix-${direction}`]: direction
-        }
-      ),
-      children: props.children
-    }
-  );
-};
-
-// src/input/input-suffix.tsx
-import { Fragment as Fragment8, jsx as jsx13 } from "react/jsx-runtime";
-var className7 = `k-input-suffix`;
-var defaultProps9 = {
-  direction: "horizontal"
-};
-var InputSuffix = (props) => {
-  const {
-    direction = defaultProps9.direction,
-    ...other
-  } = props;
-  if (!props.children) {
-    return /* @__PURE__ */ jsx13(Fragment8, {});
-  }
-  return /* @__PURE__ */ jsx13(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        className7,
-        props.className,
-        {
-          [`k-input-suffix-${direction}`]: direction
-        }
-      ),
-      children: props.children
-    }
-  );
-};
-
-// src/input/input-prefix-text.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-
-// src/input/input-suffix-text.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-
-// src/input/input-separator.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var className8 = `k-input-separator`;
-var defaultProps10 = {
-  direction: "vertical"
-};
-var InputSeparator = (props) => {
-  const {
-    direction = defaultProps10.direction,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx16(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        className8,
-        props.className,
-        {
-          [`${className8}-${direction}`]: direction
-        }
-      )
-    }
-  );
-};
-
-// src/textarea/textarea.spec.tsx
-import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs2 } from "react/jsx-runtime";
-var TEXTAREA_CLASSNAME = `k-textarea`;
-var states11 = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled
-];
-var options10 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps11 = {
-  size: Input.defaultProps.size,
-  rounded: Input.defaultProps.rounded,
-  fillMode: Input.defaultProps.fillMode,
-  flow: "vertical",
-  affixesOrientation: "horizontal",
-  resize: "both"
-};
-var Textarea = (props) => {
-  const {
-    prefix,
-    suffix,
-    rows,
-    value,
-    placeholder,
-    size,
-    rounded,
-    fillMode,
-    hover,
-    focus,
-    valid,
-    invalid,
-    required,
-    disabled,
-    flow = defaultProps11.flow,
-    affixesOrientation,
-    resize = defaultProps11.resize,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsxs2(
-    Input,
-    {
-      ...other,
-      size,
-      rounded,
-      fillMode,
-      hover,
-      focus,
-      valid,
-      invalid,
-      required,
-      disabled,
-      className: classNames(
-        props.className,
-        TEXTAREA_CLASSNAME,
-        {
-          [`!k-flex-col`]: flow === "vertical",
-          [`!k-flex-row`]: flow === "horizontal"
-        }
-      ),
-      children: [
-        prefix && /* @__PURE__ */ jsxs2(Fragment9, { children: [
-          /* @__PURE__ */ jsx17(
-            InputPrefix,
-            {
-              className: classNames({
-                ["!k-align-items-start"]: flow === affixesOrientation
-              }),
-              direction: affixesOrientation,
-              children: prefix
-            }
-          ),
-          /* @__PURE__ */ jsx17(InputSeparator, { direction: flow === "horizontal" ? "vertical" : "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsx17(
-          InputInnerTextarea,
-          {
-            className: classNames(
-              "!k-overflow-auto",
-              {
-                ["!k-flex-none"]: flow === "vertical",
-                ["k-resize-x"]: resize === "x",
-                ["k-resize-y"]: resize === "y",
-                ["k-resize"]: resize === "both",
-                ["k-resize-none"]: resize === "none"
-              }
-            ),
-            value,
-            placeholder,
-            rows
-          }
-        ),
-        suffix && /* @__PURE__ */ jsxs2(Fragment9, { children: [
-          /* @__PURE__ */ jsx17(InputSeparator, { direction: flow === "horizontal" ? "vertical" : "horizontal" }),
-          /* @__PURE__ */ jsx17(
-            InputSuffix,
-            {
-              className: classNames({
-                ["!k-align-items-start"]: flow === affixesOrientation
-              }),
-              direction: affixesOrientation,
-              children: suffix
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-Textarea.states = states11;
-Textarea.options = options10;
-Textarea.className = TEXTAREA_CLASSNAME;
-Textarea.defaultProps = defaultProps11;
-var textarea_spec_default = Textarea;
-
-// src/textarea/templates/textarea-normal.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var TextareaNormal = (props) => /* @__PURE__ */ jsx18(textarea_spec_default, { ...props });
-
-// src/textarea/templates/textarea-prefix.tsx
-import { Fragment as Fragment10, jsx as jsx19 } from "react/jsx-runtime";
-
-// src/button/button.spec.tsx
-import { Fragment as Fragment11, jsx as jsx20, jsxs as jsxs3 } from "react/jsx-runtime";
-var BUTTON_CLASSNAME = `k-button`;
-var states12 = [
+// src/grid/grid-header-cell.spec.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var className2 = `k-header`;
+var states4 = [
   States.hover,
   States.focus,
-  States.active,
-  States.selected,
-  States.disabled
+  States.active
 ];
-var options11 = {
-  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 defaultProps12 = {
-  size: Size.medium,
-  rounded: Roundness.medium,
-  fillMode: FillMode.solid,
-  themeColor: ThemeColor.base,
-  showArrow: false,
-  arrowIconName: "caret-alt-down"
+var defaultProps4 = {
+  sortIcon: "sort-asc-small"
 };
-var Button = (props) => {
+var GridHeaderCell = (props) => {
   const {
-    size = defaultProps12.size,
-    rounded = defaultProps12.rounded,
-    fillMode = defaultProps12.fillMode,
-    themeColor = defaultProps12.themeColor,
+    menu,
+    sortable,
+    sticky,
+    resizable,
+    columnTitle,
     hover,
     focus,
     active,
-    selected,
-    disabled,
-    icon,
-    text,
-    iconClassName,
-    showArrow = defaultProps12.showArrow,
-    arrowIconName = defaultProps12.arrowIconName,
-    ...other
+    sortIcon = defaultProps4.sortIcon,
+    sortOrder,
+    ...others
   } = props;
-  const hasIcon = icon !== void 0;
-  const hasChildren = props.children !== void 0;
-  return /* @__PURE__ */ jsxs3(
-    "button",
+  return /* @__PURE__ */ jsxs(
+    TableTh,
     {
-      ...other,
+      ...others,
       className: classNames(
         props.className,
-        BUTTON_CLASSNAME,
-        optionClassNames(BUTTON_CLASSNAME, {
-          size,
-          rounded,
-          fillMode,
-          themeColor
-        }),
-        stateClassNames(BUTTON_CLASSNAME, {
+        className2,
+        {
+          [`k-filterable`]: menu === "filter",
+          [`k-sorted`]: sortable,
+          [`k-grid-header-sticky`]: sticky,
+          [`k-touch-action-none`]: resizable
+        },
+        stateClassNames(className2, {
           hover,
           focus,
-          active,
-          disabled,
-          selected
-        }),
-        {
-          ["k-icon-button"]: !text && !hasChildren && hasIcon
-        }
+          active
+        })
       ),
       children: [
-        icon && /* @__PURE__ */ jsx20(
-          Icon,
-          {
-            className: classNames(iconClassName, "k-button-icon"),
-            icon
-          }
-        ),
-        text ? /* @__PURE__ */ jsxs3(Fragment11, { children: [
-          text && /* @__PURE__ */ jsx20("span", { className: "k-button-text", children: text }),
-          props.children
-        ] }) : props.children && /* @__PURE__ */ jsx20("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ jsx20("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx20(Icon, { icon: arrowIconName }) })
+        columnTitle && /* @__PURE__ */ jsxs("span", { className: "k-cell-inner", children: [
+          /* @__PURE__ */ jsxs("span", { className: "k-link", children: [
+            /* @__PURE__ */ jsx5("span", { className: "k-column-title", children: columnTitle }),
+            sortable && /* @__PURE__ */ jsx5("span", { className: "k-sort-icon", children: /* @__PURE__ */ jsx5(Icon, { icon: sortIcon }) }),
+            sortOrder && /* @__PURE__ */ jsx5("span", { className: "k-sort-order", children: sortOrder })
+          ] }),
+          menu && /* @__PURE__ */ jsx5("a", { href: "#", className: classNames(
+            "k-grid-header-menu",
+            {
+              [`k-active`]: active,
+              [`k-grid-filter-menu`]: menu === "filter",
+              [`k-grid-column-menu`]: menu === "column"
+            }
+          ), children: /* @__PURE__ */ jsx5(Icon, { icon: menu === "filter" ? "filter" : "more-vertical" }) })
+        ] }),
+        props.children,
+        resizable && /* @__PURE__ */ jsx5("span", { className: "k-column-resizer k-touch-action-none" })
       ]
     }
   );
 };
-Button.states = states12;
-Button.options = options11;
-Button.className = BUTTON_CLASSNAME;
-Button.defaultProps = defaultProps12;
-
-// src/button/templates/icon-button.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var IconButton = (props) => /* @__PURE__ */ jsx21(Button, { icon: "folder", ...props, children: void 0 });
-
-// src/button/templates/icon-text-button.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-
-// src/button/templates/text-button.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
-
-// src/textarea/templates/textarea-suffix.tsx
-import { Fragment as Fragment12, jsx as jsx24 } from "react/jsx-runtime";
-
-// src/textarea/tests/textarea-resizable.tsx
-import { Fragment as Fragment13, jsx as jsx25, jsxs as jsxs4 } from "react/jsx-runtime";
-var styles = `
-    #test-area {
-        grid-template-columns: 80px repeat(2, 1fr);
-    }
-`;
-var textarea_resizable_default = () => /* @__PURE__ */ jsxs4(Fragment13, { children: [
-  /* @__PURE__ */ jsx25("style", { children: styles }),
-  /* @__PURE__ */ jsxs4("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ jsx25("span", {}),
-    /* @__PURE__ */ jsx25("span", { children: "Textarea Resizable - vertical flow" }),
-    /* @__PURE__ */ jsx25("span", { children: "Textarea Resizable - horizontal flow" }),
-    /* @__PURE__ */ jsx25("span", { children: "Prefix/Suffix - horizontal orientation" }),
-    /* @__PURE__ */ jsx25("div", { children: /* @__PURE__ */ jsx25(
-      TextareaNormal,
-      {
-        style: { width: "max-content" },
-        value: "Prefix & Suffix",
-        prefix: /* @__PURE__ */ jsxs4(Fragment13, { children: [
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" })
-        ] }),
-        suffix: /* @__PURE__ */ jsxs4(Fragment13, { children: [
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" })
-        ] })
-      }
-    ) }),
-    /* @__PURE__ */ jsx25("div", { children: /* @__PURE__ */ jsx25(
-      TextareaNormal,
-      {
-        style: { width: "max-content" },
-        flow: "horizontal",
-        value: "Prefix & Suffix",
-        prefix: /* @__PURE__ */ jsxs4(Fragment13, { children: [
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" })
-        ] }),
-        suffix: /* @__PURE__ */ jsxs4(Fragment13, { children: [
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" })
-        ] })
-      }
-    ) }),
-    /* @__PURE__ */ jsx25("span", { children: "Prefix/Suffix - vertical orientation" }),
-    /* @__PURE__ */ jsx25("div", { children: /* @__PURE__ */ jsx25(
-      TextareaNormal,
-      {
-        style: { width: "max-content" },
-        affixesOrientation: "vertical",
-        value: "Prefix & Suffix",
-        prefix: /* @__PURE__ */ jsxs4(Fragment13, { children: [
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" })
-        ] }),
-        suffix: /* @__PURE__ */ jsxs4(Fragment13, { children: [
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" })
-        ] })
-      }
-    ) }),
-    /* @__PURE__ */ jsx25("div", { children: /* @__PURE__ */ jsx25(
-      TextareaNormal,
-      {
-        style: { width: "max-content" },
-        affixesOrientation: "vertical",
-        flow: "horizontal",
-        value: "Prefix & Suffix",
-        prefix: /* @__PURE__ */ jsxs4(Fragment13, { children: [
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ jsx25(Icon, { icon: "envelope" })
-        ] }),
-        suffix: /* @__PURE__ */ jsxs4(Fragment13, { children: [
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ jsx25(IconButton, { icon: "volume-up", fillMode: "clear" })
-        ] })
-      }
-    ) })
-  ] })
-] });
+var grid_header_cell_spec_default = GridHeaderCell;
 export {
-  textarea_resizable_default as default
+  GridHeaderCell,
+  grid_header_cell_spec_default as default
 };