@progress/kendo-themes-html 6.4.0-dev.6 → 6.4.1-dev.0

package/dist/cjs/avatar/tests/avatar.js

@@ -185,9 +185,22 @@ Avatar.states = states;
 Avatar.options = options;
 Avatar.className = AVATAR_CLASSNAME;
 Avatar.defaultProps = defaultProps;
+var avatar_spec_default = Avatar;
 
-// src/icon/font-icon.spec.tsx
+// src/avatar/templates/avatar-icon.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var AvatarIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(avatar_spec_default, { type: "icon", ...props });
+
+// src/avatar/templates/avatar-text.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AvatarText = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(avatar_spec_default, { type: "text", ...props });
+
+// src/avatar/templates/avatar-image.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AvatarImage = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(avatar_spec_default, { type: "image", ...props });
+
+// src/icon/font-icon.spec.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var FONTICON_CLASSNAME = `k-icon`;
 var states2 = [];
 var options2 = {
@@ -216,9 +229,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "span",
     {
       ...other,
@@ -246,7 +259,7 @@ FontIcon.defaultProps = defaultProps2;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var SVGICON_CLASSNAME = `k-svg-icon`;
 var states3 = [];
 var options3 = {
@@ -278,10 +291,10 @@ var SvgIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "span",
       {
         ...other,
@@ -294,7 +307,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "span",
     {
       ...other,
@@ -312,7 +325,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "svg",
         {
           "aria-hidden": true,
@@ -4232,7 +4245,7 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
@@ -4269,26 +4282,26 @@ var Icon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.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_runtime7.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
 Icon.states = states4;
 Icon.options = options4;
 Icon.defaultProps = defaultProps4;
 
 // src/avatar/tests/avatar.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var styles = `
     #test-area {
         grid-template-columns: 200px repeat(8, 1fr);
@@ -4297,103 +4310,24 @@ var styles = `
         background-image: url("/packages/html/assets/avatar.jpg");
     }
 `;
-var avatar_default = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "col-2", children: "Image" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "col-2", children: "Bg image" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "col-2", children: "Icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "col-2", children: "Text" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", themeColor: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", fillMode: "outline", themeColor: "primary", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", themeColor: "primary", children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", fillMode: "outline", themeColor: "primary", border: true, children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "secondary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "secondary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "secondary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", themeColor: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", fillMode: "outline", themeColor: "secondary", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", themeColor: "secondary", children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", fillMode: "outline", themeColor: "secondary", border: true, children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "tertiary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "tertiary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "tertiary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "tertiary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "tertiary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", themeColor: "tertiary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", fillMode: "outline", themeColor: "tertiary", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", themeColor: "tertiary", children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", fillMode: "outline", themeColor: "tertiary", border: true, children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "info" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "info", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "info", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "info" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "info" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", themeColor: "info", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", fillMode: "outline", themeColor: "info", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", themeColor: "info", children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", fillMode: "outline", themeColor: "info", border: true, children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "success" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "success", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "success", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "success" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "success" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", themeColor: "success", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", fillMode: "outline", themeColor: "success", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", themeColor: "success", children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", fillMode: "outline", themeColor: "success", border: true, children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "warning" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "warning" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "warning" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", themeColor: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", fillMode: "outline", themeColor: "warning", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", themeColor: "warning", children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", fillMode: "outline", themeColor: "warning", border: true, children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "error" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "error", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "error", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "error" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "error" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", themeColor: "error", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", fillMode: "outline", themeColor: "error", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", themeColor: "error", children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", fillMode: "outline", themeColor: "error", border: true, children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "dark" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "dark" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "dark" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", themeColor: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", fillMode: "outline", themeColor: "dark", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", themeColor: "dark", children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", fillMode: "outline", themeColor: "dark", border: true, children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "light" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "light", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "light", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "light" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "light" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", themeColor: "light", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", fillMode: "outline", themeColor: "light", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", themeColor: "light", children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", fillMode: "outline", themeColor: "light", border: true, children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "inverse" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "inverse", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "inverse", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", themeColor: "inverse" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "image", fillMode: "outline", themeColor: "inverse" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", themeColor: "inverse", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "icon", fillMode: "outline", themeColor: "inverse", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", themeColor: "inverse", children: "JO" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { type: "text", fillMode: "outline", themeColor: "inverse", border: true, children: "JO" })
+var avatar_default = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "col-2", children: "Image" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "col-2", children: "Bg image" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "col-2", children: "Icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "col-2", children: "Text" }),
+    Avatar.options.themeColor.map((themeColor) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: themeColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarImage, { themeColor, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarImage, { fillMode: "outline", themeColor, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarImage, { type: "image", themeColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarImage, { type: "image", fillMode: "outline", themeColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarIcon, { themeColor, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { icon: "x" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarIcon, { fillMode: "outline", themeColor, border: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { icon: "x" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarText, { themeColor, children: "JO" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarText, { fillMode: "outline", themeColor, border: true, children: "JO" })
+    ] }))
   ] })
 ] });

package/dist/cjs/card/tests/card-custom.js

@@ -4772,8 +4772,17 @@ Avatar.options = options8;
 Avatar.className = AVATAR_CLASSNAME;
 Avatar.defaultProps = defaultProps8;
 
-// src/typography/typography.spec.tsx
+// src/avatar/templates/avatar-icon.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// src/avatar/templates/avatar-text.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+
+// src/avatar/templates/avatar-image.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+
+// src/typography/typography.spec.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var states10 = [];
 var options9 = {};
 var Typography = (props) => {
@@ -4783,7 +4792,7 @@ var Typography = (props) => {
   } = props;
   const typeClass = type === "p" ? "paragraph" : type;
   const Component = type.includes("display") ? "div" : type;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Component,
     {
       ...other,
@@ -4801,116 +4810,116 @@ Typography.states = states10;
 Typography.options = options9;
 
 // src/card/tests/card-custom.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var card_custom_default = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Card, { orientation: "horizontal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardBody, { title: "Card Title", subtitle: "Card Subtitle", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "Some quick example text to build on the card title and make up the bulk of the card's content." }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ActionButtons, { className: "k-card-actions", alignment: "stretched", orientation: "vertical", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 2" })
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var card_custom_default = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Card, { orientation: "horizontal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardBody, { title: "Card Title", subtitle: "Card Subtitle", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: "Some quick example text to build on the card title and make up the bulk of the card's content." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ActionButtons, { className: "k-card-actions", alignment: "stretched", orientation: "vertical", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 2" })
     ] })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Card, { orientation: "horizontal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardImage, { src: "/packages/html/assets/avatar.jpg" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Layout, { orientation: "vertical", className: "k-flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardBody, { title: "Card Title", subtitle: "Card Subtitle", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "Some quick example text to build on the card title and make up the bulk of the card's content." }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-separator" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ActionButtons, { className: "k-card-actions", alignment: "stretched", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 2" })
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Card, { orientation: "horizontal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardImage, { src: "/packages/html/assets/avatar.jpg" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Layout, { orientation: "vertical", className: "k-flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardBody, { title: "Card Title", subtitle: "Card Subtitle", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: "Some quick example text to build on the card title and make up the bulk of the card's content." }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-separator" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ActionButtons, { className: "k-card-actions", alignment: "stretched", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 2" })
       ] })
     ] })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Card, { orientation: "horizontal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardImage, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-separator k-separator-vertical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Layout, { orientation: "vertical", className: "k-flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardBody, { title: "Card Title", subtitle: "Card Subtitle", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "Some quick example text to build on the card title and make up the bulk of the card's content." }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-separator" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ActionButtons, { className: "k-card-actions", alignment: "stretched", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 2" })
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Card, { orientation: "horizontal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardImage, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-separator k-separator-vertical" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Layout, { orientation: "vertical", className: "k-flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardBody, { title: "Card Title", subtitle: "Card Subtitle", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: "Some quick example text to build on the card title and make up the bulk of the card's content." }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-separator" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ActionButtons, { className: "k-card-actions", alignment: "stretched", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 2" })
       ] })
     ] })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Card, { orientation: "vertical", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardBody, { title: "Sofia", subtitle: "Sunny", className: "k-text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { type: "display-1", children: "\u2600\uFE0F" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { type: "display-2", children: "2\xB0C" })
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Card, { orientation: "vertical", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(CardBody, { title: "Sofia", subtitle: "Sunny", className: "k-text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { type: "display-1", children: "\u2600\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { type: "display-2", children: "2\xB0C" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-separator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ActionButtons, { className: "k-card-actions", alignment: "stretched", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 2" })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-separator" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ActionButtons, { className: "k-card-actions", alignment: "stretched", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 2" })
     ] })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Card, { orientation: "vertical", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardBody, { title: "Passenger", subtitle: "GP, Gosho" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("hr", { className: "k-separator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardBody, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Layout, { orientation: "horizontal", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "k-flex k-text-left", children: "Departure" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "k-flex k-text-right", children: "Arrival" })
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Card, { orientation: "vertical", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardBody, { title: "Passenger", subtitle: "GP, Gosho" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("hr", { className: "k-separator" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(CardBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Layout, { orientation: "horizontal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-flex k-text-left", children: "Departure" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-flex k-text-right", children: "Arrival" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Layout, { orientation: "horizontal", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "k-flex k-text-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { type: "display-4", children: "SOF" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Layout, { orientation: "horizontal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-flex k-text-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { type: "display-4", children: "SOF" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
             "6 Dec 2017",
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("br", {}),
             "10:30"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { type: "display-4", className: "k-flex k-text-center", children: "\u2708\uFE0F" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "k-flex k-text-right", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { type: "display-4", children: "LON" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { type: "display-4", className: "k-flex k-text-center", children: "\u2708\uFE0F" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-flex k-text-right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { type: "display-4", children: "LON" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
             "6 Dec 2017",
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("br", {}),
             "12:30"
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("hr", { className: "k-hr" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Layout, { orientation: "horizontal", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "k-flex k-text-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { type: "display-4", children: "LON" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("hr", { className: "k-hr" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Layout, { orientation: "horizontal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-flex k-text-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { type: "display-4", children: "LON" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
             "12 Dec 2017",
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("br", {}),
             "18:30"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { type: "display-4", className: "k-flex k-text-center", children: "\u2708\uFE0F" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "k-flex k-text-right", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { type: "display-4", children: "SOF" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { type: "display-4", className: "k-flex k-text-center", children: "\u2708\uFE0F" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-flex k-text-right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { type: "display-4", children: "SOF" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
             "12 Dec 2017",
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("br", {}),
             "22:30"
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("hr", { className: "k-separator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Layout, { orientation: "horizontal", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "k-flex k-text-left", children: "Total" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "k-flex k-text-right", children: "BGN 234" })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("hr", { className: "k-separator" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Layout, { orientation: "horizontal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-flex k-text-left", children: "Total" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-flex k-text-right", children: "BGN 234" })
     ] }) })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Card, { orientation: "vertical", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardHeader, { className: "k-d-flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Avatar, { type: "image", themeColor: "primary", rounded: "medium", className: "bg-img", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardTitle, { children: "Thumbnail and Footer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardSubtitle, { children: "Capital of Italy" })
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Card, { orientation: "vertical", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(CardHeader, { className: "k-d-flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Avatar, { type: "image", themeColor: "primary", rounded: "medium", className: "bg-img", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardTitle, { children: "Thumbnail and Footer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardSubtitle, { children: "Capital of Italy" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardBody, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "Rome is a sprawling, cosmopolitan city with nearly 3,000 years of globally influential art, architecture and culture on display." }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-separator k-separator-vertical" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "Ancient ruins such as the Forum and the Colosseum evoke the power of the former Roman Empire. " })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(CardBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: "Rome is a sprawling, cosmopolitan city with nearly 3,000 years of globally influential art, architecture and culture on display." }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-separator k-separator-vertical" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: "Ancient ruins such as the Forum and the Colosseum evoke the power of the former Roman Empire. " })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardFooter, { children: "Footer here" })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardFooter, { children: "Footer here" })
   ] })
 ] }) });