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

package/dist/cjs/tilelayout/tests/tilelayout.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/tilelayout/tests/tilelayout.tsx
@@ -142,15 +152,56 @@ var kendoThemeMaps = {
   }
 };
 
-// src/card/card-callout.tsx
+// src/tilelayout/tilelayout.spec.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var TILELAYOUT_CLASSNAME = `k-tilelayout`;
+var states = [];
+var options = {};
+var defaultProps = {};
+var TileLayout = (props) => {
+  const {
+    gap,
+    columns,
+    columnWidth,
+    rowHeight,
+    style,
+    children
+  } = props;
+  const tileLayoutStyles = {
+    gridTemplateColumns: `repeat(${columns}, minmax(0px, ${columnWidth}))`,
+    gridAutoRows: `minmax(0px, ${rowHeight})`,
+    gap,
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: classNames(
+        props.className,
+        TILELAYOUT_CLASSNAME
+      ),
+      style: tileLayoutStyles,
+      children
+    }
+  );
+};
+TileLayout.states = states;
+TileLayout.options = options;
+TileLayout.className = TILELAYOUT_CLASSNAME;
+TileLayout.defaultProps = defaultProps;
+
+// src/tilelayout/tilelayout-item.spec.tsx
+var import_react = __toESM(require("react"));
+
+// src/card/card-callout.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var CARDCALLOUT_CLASSNAME = `k-card-callout`;
 var CardCallout = (props) => {
   const {
     callout,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     {
       ...other,
@@ -166,15 +217,15 @@ var CardCallout = (props) => {
 };
 
 // src/card/card.spec.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var CARD_CLASSNAME = `k-card`;
-var states = [
+var states2 = [
   States.hover,
   States.focus,
   States.selected,
   States.disabled
 ];
-var options = {
+var options2 = {
   themeColor: [
     ThemeColor.primary,
     ThemeColor.success,
@@ -183,7 +234,7 @@ var options = {
     ThemeColor.info
   ]
 };
-var defaultProps = {};
+var defaultProps2 = {};
 var Card = (props) => {
   const {
     orientation,
@@ -195,7 +246,7 @@ var Card = (props) => {
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       ...other,
@@ -217,21 +268,21 @@ var Card = (props) => {
         }
       ),
       children: [
-        callout && callout !== "true" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CardCallout, { callout }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children })
+        callout && callout !== "true" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardCallout, { callout }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.children })
       ]
     }
   );
 };
-Card.states = states;
-Card.options = options;
+Card.states = states2;
+Card.options = options2;
 Card.className = CARD_CLASSNAME;
-Card.defaultProps = defaultProps;
+Card.defaultProps = defaultProps2;
 
 // src/card/card-title.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var CARDTITLE_CLASSNAME = `k-card-title`;
-var states2 = [
+var states3 = [
   States.hover,
   States.focus
 ];
@@ -241,7 +292,7 @@ var CardTitle = (props) => {
     focus,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       ...other,
@@ -259,13 +310,13 @@ var CardTitle = (props) => {
 };
 
 // src/card/card-subtitle.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var CARDSUBTITLE_CLASSNAME = `k-card-subtitle`;
 var CardSubtitle = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ...other,
@@ -279,13 +330,13 @@ var CardSubtitle = (props) => {
 };
 
 // src/card/card-img.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 
 // src/icon/font-icon.spec.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var FONTICON_CLASSNAME = `k-icon`;
-var states3 = [];
-var options2 = {
+var states4 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -300,7 +351,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {};
+var defaultProps3 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -311,9 +362,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "span",
     {
       ...other,
@@ -334,17 +385,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states3;
-FontIcon.options = options2;
+FontIcon.states = states4;
+FontIcon.options = options3;
 FontIcon.className = FONTICON_CLASSNAME;
-FontIcon.defaultProps = defaultProps2;
+FontIcon.defaultProps = defaultProps3;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var SVGICON_CLASSNAME = `k-svg-icon`;
-var states4 = [];
-var options3 = {
+var states5 = [];
+var options4 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -359,7 +410,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -368,15 +419,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps4.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "span",
       {
         ...other,
@@ -389,7 +440,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "span",
     {
       ...other,
@@ -407,7 +458,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "svg",
         {
           "aria-hidden": true,
@@ -421,10 +472,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states4;
-SvgIcon.options = options3;
+SvgIcon.states = states5;
+SvgIcon.options = options4;
 SvgIcon.className = SVGICON_CLASSNAME;
-SvgIcon.defaultProps = defaultProps3;
+SvgIcon.defaultProps = defaultProps4;
 var svg_icon_spec_default = SvgIcon;
 
 // node_modules/@progress/kendo-svg-icons/dist/index.es.js
@@ -4363,13 +4414,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states5 = [];
-var options4 = {
+var states6 = [];
+var options5 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4384,7 +4435,7 @@ var options4 = {
     ThemeColor.dark
   ]
 };
-var defaultProps4 = {
+var defaultProps5 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4393,42 +4444,42 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps4.type,
+    type = defaultProps5.type,
     rotate,
     flip,
-    viewBox = defaultProps4.viewBox,
+    viewBox = defaultProps5.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
-Icon.states = states5;
-Icon.options = options4;
-Icon.defaultProps = defaultProps4;
+Icon.states = states6;
+Icon.options = options5;
+Icon.defaultProps = defaultProps5;
 
 // src/button/button.spec.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var BUTTON_CLASSNAME = `k-button`;
-var states6 = [
+var states7 = [
   States.hover,
   States.focus,
   States.active,
   States.selected,
   States.disabled
 ];
-var options5 = {
+var options6 = {
   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],
@@ -4446,7 +4497,7 @@ var options5 = {
     ThemeColor.inverse
   ]
 };
-var defaultProps5 = {
+var defaultProps6 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid,
@@ -4456,10 +4507,10 @@ var defaultProps5 = {
 };
 var Button = (props) => {
   const {
-    size = defaultProps5.size,
-    rounded = defaultProps5.rounded,
-    fillMode = defaultProps5.fillMode,
-    themeColor = defaultProps5.themeColor,
+    size = defaultProps6.size,
+    rounded = defaultProps6.rounded,
+    fillMode = defaultProps6.fillMode,
+    themeColor = defaultProps6.themeColor,
     hover,
     focus,
     active,
@@ -4468,13 +4519,13 @@ var Button = (props) => {
     icon,
     text,
     iconClassName,
-    showArrow = defaultProps5.showArrow,
-    arrowIconName = defaultProps5.arrowIconName,
+    showArrow = defaultProps6.showArrow,
+    arrowIconName = defaultProps6.arrowIconName,
     ...other
   } = props;
   const hasIcon = icon !== void 0;
   const hasChildren = props.children !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "button",
     {
       ...other,
@@ -4499,38 +4550,38 @@ var Button = (props) => {
         }
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Icon,
           {
             className: classNames(iconClassName, "k-button-icon"),
             icon
           }
         ),
-        text ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-          text && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-button-text", children: text }),
+        text ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { icon: arrowIconName }) })
+        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { icon: arrowIconName }) })
       ]
     }
   );
 };
-Button.states = states6;
-Button.options = options5;
+Button.states = states7;
+Button.options = options6;
 Button.className = BUTTON_CLASSNAME;
-Button.defaultProps = defaultProps5;
+Button.defaultProps = defaultProps6;
 
 // src/button/templates/icon-button.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 
 // src/button/templates/icon-text-button.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 
 // src/button/templates/text-button.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 
 // src/card/card-header.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var CARDHEADER_CLASSNAME = `k-card-header`;
 var CardHeader = (props) => {
   const {
@@ -4539,7 +4590,7 @@ var CardHeader = (props) => {
     details,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       ...other,
@@ -4548,10 +4599,10 @@ var CardHeader = (props) => {
         CARDHEADER_CLASSNAME
       ),
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardTitle, { children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardSubtitle, { children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: props.children }),
-        details && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardTitle, { children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardSubtitle, { children: subtitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: props.children }),
+        details && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Button,
           {
             className: "k-card-details",
@@ -4568,10 +4619,10 @@ var CardHeader = (props) => {
 };
 
 // src/card/card-footer.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 
 // src/card/card-body.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var CARDBODY_CLASSNAME = `k-card-body`;
 var CardBody = (props) => {
   const {
@@ -4580,7 +4631,7 @@ var CardBody = (props) => {
     details,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       ...other,
@@ -4589,10 +4640,10 @@ var CardBody = (props) => {
         CARDBODY_CLASSNAME
       ),
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CardTitle, { children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CardSubtitle, { children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: props.children }),
-        details && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardTitle, { children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardSubtitle, { children: subtitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: props.children }),
+        details && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Button,
           {
             className: "k-card-details",
@@ -4609,51 +4660,97 @@ var CardBody = (props) => {
 };
 
 // src/card/card-deck.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// src/tilelayout/tilelayout-item.spec.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var TILELAYOUTITEM_CLASSNAME = `k-tilelayout-item`;
+var states8 = [
+  States.focus
+];
+var options7 = {};
+var defaultProps7 = {};
+var TileLayoutItem = (props) => {
+  const {
+    header,
+    body,
+    focus,
+    resize,
+    style
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    Card,
+    {
+      className: classNames(
+        props.className,
+        TILELAYOUTITEM_CLASSNAME,
+        stateClassNames(TILELAYOUTITEM_CLASSNAME, {
+          focus
+        }),
+        {
+          "k-resize": resize === true,
+          "k-resize-x": resize === "horizontal",
+          "k-resize-y": resize === "vertical"
+        }
+      ),
+      style,
+      children: [
+        header && import_react.default.isValidElement(header) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", children: header }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", title: header }),
+        body && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CardBody, { className: "k-tilelayout-item-body", children: body })
+      ]
+    }
+  );
+};
+TileLayoutItem.states = states8;
+TileLayoutItem.options = options7;
+TileLayoutItem.className = TILELAYOUTITEM_CLASSNAME;
+TileLayoutItem.defaultProps = defaultProps7;
+
+// src/tilelayout/tilelayout-item-hint.spec.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var TILELAYOUTITEMHINT_CLASSNAME = `k-layout-item-hint`;
+var states9 = [];
+var options8 = {};
+var defaultProps8 = {};
+var TileLayoutItemHint = (props) => {
+  const { style } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: TILELAYOUTITEMHINT_CLASSNAME, style });
+};
+TileLayoutItemHint.states = states9;
+TileLayoutItemHint.options = options8;
+TileLayoutItemHint.className = TILELAYOUTITEMHINT_CLASSNAME;
+TileLayoutItemHint.defaultProps = defaultProps8;
+var tilelayout_item_hint_spec_default = TileLayoutItemHint;
 
 // src/tilelayout/tests/tilelayout.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var tilelayout_default = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { id: "test-area", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { id: "tilelayout", className: "k-widget k-tilelayout", style: { gridTemplateColumns: "repeat(5, minmax(0px, 1fr))", gridTemplateRows: "repeat(5, minmax(0px, 1fr))", gap: "16px", width: "1000px", padding: "16px" }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Card, { className: "k-tilelayout-item", focus: true, style: { order: "0", gridColumnEnd: "span 1", gridRowEnd: "span 1" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "k-tilelayout-item-header", children: "Title goes here" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardBody, { className: "k-tilelayout-item-body", children: "Content goes here" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-tilelayout-item k-card", style: { order: "1", gridColumnEnd: "span 1", gridRowEnd: "span 1" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "k-tilelayout-item-header", children: "Title goes here" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardBody, { className: "k-tilelayout-item-body", children: "Content goes here" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-tilelayout-item k-card", style: { order: "2", gridColumnEnd: "span 1", gridRowEnd: "span 2", width: "250px", position: "absolute", height: "198px", left: "430px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "k-tilelayout-item-header", children: "Title goes here" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardBody, { className: "k-tilelayout-item-body", children: "Content goes here" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-resize-handle k-cursor-ew-resize", style: { height: "196px", width: "9px", left: "674px", top: "36px" } }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-layout-item-hint k-layout-item-hint-resize", style: { order: "2", gridColumnEnd: "span 2", gridRowEnd: "span 2" } }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-tilelayout-item k-card", style: { order: "3", gridColumnEnd: "span 1", gridRowEnd: "span 1" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "k-tilelayout-item-header", children: "Title goes here" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardBody, { className: "k-tilelayout-item-body", children: "Content goes here" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-tilelayout-item k-card", style: { order: "4", gridColumnEnd: "span 1", gridRowEnd: "span 2" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "k-tilelayout-item-header", children: "Title goes here" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardBody, { className: "k-tilelayout-item-body", children: "Content goes here" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-tilelayout-item k-card", style: { order: "5", gridColumnEnd: "span 1", gridRowEnd: "span 1" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "k-tilelayout-item-header", children: "Title goes here" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardBody, { className: "k-tilelayout-item-body", children: "Content goes here" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-tilelayout-item k-card", style: { order: "6", gridColumnEnd: "span 1", gridRowEnd: "span 1" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "k-tilelayout-item-header", children: "Title goes here" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardBody, { className: "k-tilelayout-item-body", children: "Content goes here" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-tilelayout-item k-card", style: { order: "7", gridColumnEnd: "span 1", gridRowEnd: "span 2" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "k-tilelayout-item-header", children: "Title goes here" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardBody, { className: "k-tilelayout-item-body", children: "Content goes here" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-tilelayout-item k-card", style: { order: "8", gridColumnEnd: "span 1", gridRowEnd: "span 1" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "k-tilelayout-item-header", children: "Title goes here" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardBody, { className: "k-tilelayout-item-body", children: "Content goes here" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-tilelayout-item k-card", style: { order: "9", gridColumnEnd: "span 1", gridRowEnd: "span 2" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeader, { className: "k-tilelayout-item-header", children: "Title goes here" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardBody, { className: "k-tilelayout-item-body", children: "Content goes here" })
-  ] })
-] }) }) });
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var tilelayout_default = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { id: "test-area", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  TileLayout,
+  {
+    columns: 5,
+    columnWidth: "1fr",
+    rowHeight: "1fr",
+    gap: "16px",
+    style: { width: "1000px" },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "0", gridColumnEnd: "span 1", gridRowEnd: "span 1" }, focus: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "1", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "2", gridColumnEnd: "span 1", gridRowEnd: "span 2", width: "250px", position: "absolute", height: "198px", left: "430px", zIndex: 1 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(tilelayout_item_hint_spec_default, { style: { order: "2", gridColumnEnd: "span 2", gridRowEnd: "span 2" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "3", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "4", gridColumnEnd: "span 1", gridRowEnd: "span 2" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "5", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "6", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "7", gridColumnEnd: "span 1", gridRowEnd: "span 2" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "8", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        TileLayoutItem,
+        {
+          header: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h5", { className: "k-card-title", children: "Header element" }),
+          body: "Content goes here",
+          style: { order: "9", gridColumnEnd: "span 1", gridRowEnd: "span 2" }
+        }
+      )
+    ]
+  }
+) }) });