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

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

@@ -16,12 +16,13 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/textarea/tests/textarea-resizable.tsx
-var textarea_resizable_exports = {};
-__export(textarea_resizable_exports, {
-  default: () => textarea_resizable_default
+// src/grid/grid-header-cell.spec.tsx
+var grid_header_cell_spec_exports = {};
+__export(grid_header_cell_spec_exports, {
+  GridHeaderCell: () => GridHeaderCell,
+  default: () => grid_header_cell_spec_default
 });
-module.exports = __toCommonJS(textarea_resizable_exports);
+module.exports = __toCommonJS(grid_header_cell_spec_exports);
 
 // src/misc/class-names.ts
 var classNames = (...args) => {
@@ -86,19 +87,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",
@@ -130,122 +118,37 @@ var States = {
   "readonly": "readonly"
 };
 
-// src/input/input.spec.tsx
+// src/table/table-th.tsx
 var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.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
-var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(
-    "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
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("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,
@@ -260,7 +163,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {};
+var defaultProps = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -271,9 +174,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     {
       ...other,
@@ -294,17 +197,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
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("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,
@@ -319,7 +222,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps4 = {
+var defaultProps2 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -328,15 +231,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps4.viewBox,
+    viewBox = defaultProps2.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "span",
       {
         ...other,
@@ -349,7 +252,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     {
       ...other,
@@ -367,7 +270,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "svg",
         {
           "aria-hidden": true,
@@ -381,10 +284,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
@@ -4419,13 +4322,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("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,
@@ -4440,7 +4343,7 @@ var options4 = {
     ThemeColor.dark
   ]
 };
-var defaultProps5 = {
+var defaultProps3 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4449,610 +4352,95 @@ 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__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
-};
-Icon.states = states4;
-Icon.options = options4;
-Icon.defaultProps = defaultProps5;
-
-// src/input/input-clear-value.tsx
-var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: classNames(props.className, className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { icon: "x" }) });
-};
-InputClearValue.states = states5;
-InputClearValue.options = options5;
-InputClearValue.className = className;
-
-// src/input/input-inner-input.tsx
-var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsx)(
-    "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
-var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsxs)(
-    "span",
-    {
-      ...other,
-      className: classNames(props.className, className3, optionClassNames(className3, props)),
-      children: [
-        valueIcon,
-        !valueIcon && valueIconName && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: "k-input-value-icon", icon: valueIconName }),
-        showValue && !value && placeholder,
-        showValue && value && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "k-input-value-text", children: value })
-      ]
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
     }
-  );
-};
-InputInnerSpan.states = states7;
-InputInnerSpan.options = options7;
-InputInnerSpan.className = className3;
-
-// src/input/input-inner-textarea.tsx
-var import_jsx_runtime9 = require("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__ */ (0, import_jsx_runtime9.jsx)(
-    "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
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var states9 = [
-  States.disabled,
-  States.loading
-];
-
-// src/input/input-validation-icon.tsx
-var import_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: classNames(className5), icon: iconName });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
-InputValidationIcon.states = states10;
-InputValidationIcon.options = options9;
-InputValidationIcon.className = className5;
+Icon.states = states3;
+Icon.options = options3;
+Icon.defaultProps = defaultProps3;
 
-// src/input/input-prefix.tsx
-var import_jsx_runtime12 = require("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__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        className6,
-        props.className,
-        {
-          [`k-input-prefix-${direction}`]: direction
-        }
-      ),
-      children: props.children
-    }
-  );
-};
-
-// src/input/input-suffix.tsx
-var import_jsx_runtime13 = require("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__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        className7,
-        props.className,
-        {
-          [`k-input-suffix-${direction}`]: direction
-        }
-      ),
-      children: props.children
-    }
-  );
-};
-
-// src/input/input-prefix-text.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-
-// src/input/input-suffix-text.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-
-// src/input/input-separator.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var className8 = `k-input-separator`;
-var defaultProps10 = {
-  direction: "vertical"
-};
-var InputSeparator = (props) => {
-  const {
-    direction = defaultProps10.direction,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        className8,
-        props.className,
-        {
-          [`${className8}-${direction}`]: direction
-        }
-      )
-    }
-  );
-};
-
-// src/textarea/textarea.spec.tsx
-var import_jsx_runtime17 = require("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__ */ (0, import_jsx_runtime17.jsxs)(
-    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__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            InputPrefix,
-            {
-              className: classNames({
-                ["!k-align-items-start"]: flow === affixesOrientation
-              }),
-              direction: affixesOrientation,
-              children: prefix
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputSeparator, { direction: flow === "horizontal" ? "vertical" : "horizontal" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          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__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputSeparator, { direction: flow === "horizontal" ? "vertical" : "horizontal" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            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
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var TextareaNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(textarea_spec_default, { ...props });
-
-// src/textarea/templates/textarea-prefix.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-
-// src/button/button.spec.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var BUTTON_CLASSNAME = `k-button`;
-var states12 = [
+// src/grid/grid-header-cell.spec.tsx
+var import_jsx_runtime5 = require("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__ */ (0, import_jsx_runtime20.jsxs)(
-    "button",
+  return /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime20.jsx)(
-          Icon,
-          {
-            className: classNames(iconClassName, "k-button-icon"),
-            icon
-          }
-        ),
-        text ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-          text && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-button-text", children: text }),
-          props.children
-        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { icon: arrowIconName }) })
+        columnTitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-cell-inner", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "k-link", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-column-title", children: columnTitle }),
+            sortable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-sort-icon", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: sortIcon }) }),
+            sortOrder && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-sort-order", children: sortOrder })
+          ] }),
+          menu && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: menu === "filter" ? "filter" : "more-vertical" }) })
+        ] }),
+        props.children,
+        resizable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var IconButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { icon: "folder", ...props, children: void 0 });
-
-// src/button/templates/icon-text-button.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-
-// src/button/templates/text-button.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-
-// src/textarea/templates/textarea-suffix.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-
-// src/textarea/tests/textarea-resizable.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var styles = `
-    #test-area {
-        grid-template-columns: 80px repeat(2, 1fr);
-    }
-`;
-var textarea_resizable_default = () => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Textarea Resizable - vertical flow" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Textarea Resizable - horizontal flow" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Prefix/Suffix - horizontal orientation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      TextareaNormal,
-      {
-        style: { width: "max-content" },
-        value: "Prefix & Suffix",
-        prefix: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" })
-        ] }),
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" })
-        ] })
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      TextareaNormal,
-      {
-        style: { width: "max-content" },
-        flow: "horizontal",
-        value: "Prefix & Suffix",
-        prefix: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" })
-        ] }),
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" })
-        ] })
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Prefix/Suffix - vertical orientation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      TextareaNormal,
-      {
-        style: { width: "max-content" },
-        affixesOrientation: "vertical",
-        value: "Prefix & Suffix",
-        prefix: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" })
-        ] }),
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" })
-        ] })
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      TextareaNormal,
-      {
-        style: { width: "max-content" },
-        affixesOrientation: "vertical",
-        flow: "horizontal",
-        value: "Prefix & Suffix",
-        prefix: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "envelope" })
-        ] }),
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "volume-up", fillMode: "clear" })
-        ] })
-      }
-    ) })
-  ] })
-] });
+var grid_header_cell_spec_default = GridHeaderCell;