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

package/dist/cjs/chat/tests/chat-scrollable-deck.js

@@ -214,8 +214,17 @@ Avatar.options = options;
 Avatar.className = AVATAR_CLASSNAME;
 Avatar.defaultProps = defaultProps;
 
-// src/icon/font-icon.spec.tsx
+// src/avatar/templates/avatar-icon.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// src/avatar/templates/avatar-text.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/avatar/templates/avatar-image.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
+// src/icon/font-icon.spec.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var FONTICON_CLASSNAME = `k-icon`;
 var states2 = [];
 var options2 = {
@@ -244,9 +253,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,
@@ -274,7 +283,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 = {
@@ -306,10 +315,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,
@@ -322,7 +331,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,
@@ -340,7 +349,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,
@@ -4260,7 +4269,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("_", "")
@@ -4297,26 +4306,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/button/button.spec.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var BUTTON_CLASSNAME = `k-button`;
 var states5 = [
   States.hover,
@@ -4371,7 +4380,7 @@ var Button = (props) => {
   } = props;
   const hasIcon = icon !== void 0;
   const hasChildren = props.children !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "button",
     {
       ...other,
@@ -4396,18 +4405,18 @@ var Button = (props) => {
         }
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Icon,
           {
             className: classNames(iconClassName, "k-button-icon"),
             icon
           }
         ),
-        text ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-          text && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-button-text", children: text }),
+        text ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: arrowIconName }) })
+        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { icon: arrowIconName }) })
       ]
     }
   );
@@ -4418,23 +4427,23 @@ Button.className = BUTTON_CLASSNAME;
 Button.defaultProps = defaultProps5;
 
 // src/button/templates/icon-button.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 
 // src/button/templates/icon-text-button.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 
 // src/button/templates/text-button.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 
 // src/card/card-callout.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var CARDCALLOUT_CLASSNAME = `k-card-callout`;
 var CardCallout = (props) => {
   const {
     callout,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "span",
     {
       ...other,
@@ -4450,7 +4459,7 @@ var CardCallout = (props) => {
 };
 
 // src/card/card.spec.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var CARD_CLASSNAME = `k-card`;
 var states6 = [
   States.hover,
@@ -4479,7 +4488,7 @@ var Card = (props) => {
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       ...other,
@@ -4501,8 +4510,8 @@ var Card = (props) => {
         }
       ),
       children: [
-        callout && callout !== "true" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardCallout, { callout }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: props.children })
+        callout && callout !== "true" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardCallout, { callout }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: props.children })
       ]
     }
   );
@@ -4513,7 +4522,7 @@ Card.className = CARD_CLASSNAME;
 Card.defaultProps = defaultProps6;
 
 // src/card/card-title.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var CARDTITLE_CLASSNAME = `k-card-title`;
 var states7 = [
   States.hover,
@@ -4525,7 +4534,7 @@ var CardTitle = (props) => {
     focus,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ...other,
@@ -4543,13 +4552,13 @@ var CardTitle = (props) => {
 };
 
 // src/card/card-subtitle.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var CARDSUBTITLE_CLASSNAME = `k-card-subtitle`;
 var CardSubtitle = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       ...other,
@@ -4563,16 +4572,16 @@ var CardSubtitle = (props) => {
 };
 
 // src/card/card-img.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 
 // src/card/card-header.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 
 // src/card/card-footer.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 
 // src/card/card-body.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var CARDBODY_CLASSNAME = `k-card-body`;
 var CardBody = (props) => {
   const {
@@ -4581,7 +4590,7 @@ var CardBody = (props) => {
     details,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       ...other,
@@ -4590,10 +4599,10 @@ var CardBody = (props) => {
         CARDBODY_CLASSNAME
       ),
       children: [
-        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)(
+        title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardTitle, { children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardSubtitle, { children: subtitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: props.children }),
+        details && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Button,
           {
             className: "k-card-details",
@@ -4610,13 +4619,13 @@ var CardBody = (props) => {
 };
 
 // src/card/card-deck.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var CARDDECK_CLASSNAME = `k-card-deck`;
 var CardDeck = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       ...other,
@@ -4630,51 +4639,51 @@ var CardDeck = (props) => {
 };
 
 // src/chat/tests/chat-scrollable-deck.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var styles = `
     /* needed for test */
     .k-chat .k-bubble {
         white-space: normal;
     }
 `;
-var chat_scrollable_deck_default = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "k-widget k-chat", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "k-message-list k-avatars", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-message-list-content", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "k-timestamp", children: "Card Deck Scrollable" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-message-group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "k-author", children: "Bruv" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { type: "image", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-message k-only", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("time", { className: "k-message-time", children: "Thu Feb 08 2018" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "k-bubble", children: "Message before card deck" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-message-status", children: "Seen" })
+var chat_scrollable_deck_default = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "k-widget k-chat", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "k-message-list k-avatars", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "k-message-list-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "k-timestamp", children: "Card Deck Scrollable" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "k-message-group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "k-author", children: "Bruv" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Avatar, { type: "image", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "k-message k-only", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("time", { className: "k-message-time", children: "Thu Feb 08 2018" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "k-bubble", children: "Message before card deck" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-message-status", children: "Seen" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-card-deck-scrollwrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { icon: "chevron-left" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(CardDeck, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(CardBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.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)("div", { className: "k-card-deck-scrollwrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { icon: "chevron-left" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardDeck, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+          /* @__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_runtime18.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(CardBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.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)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+          /* @__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_runtime18.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(CardBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.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)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+          /* @__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_runtime18.jsx)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(CardBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.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)(Card, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h5", { className: "k-card-title", children: "Card Title" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h6", { className: "k-card-subtitle", children: "Card Subtitle" }),
+          /* @__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_runtime18.jsx)(Button, { icon: "chevron-right" })
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { icon: "chevron-right" })
     ] })
   ] }) }) }) }) })
 ] });