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

package/dist/esm/timeline/tests/timeline-horizontal.js

@@ -123,19 +123,19 @@ var kendoThemeMaps = {
   }
 };
 
-// src/action-buttons/action-buttons.spec.tsx
-import { jsx } from "react/jsx-runtime";
-var ACTIONBUTTONS_CLASSNAME = `k-actions`;
+// src/timeline/timeline.spec.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var TIMELINE_CLASSNAME = `k-timeline`;
 var states = [];
 var options = {};
 var defaultProps = {
-  alignment: "start",
-  orientation: "horizontal"
+  orientation: "vertical"
 };
-var ActionButtons = (props) => {
+var Timeline = (props) => {
   const {
-    alignment = defaultProps.alignment,
-    orientation = defaultProps.orientation,
+    orientation,
+    collapsibleEvents,
+    alternatingMode,
     ...other
   } = props;
   return /* @__PURE__ */ jsx(
@@ -143,27 +143,167 @@ var ActionButtons = (props) => {
     {
       ...other,
       className: classNames(
-        ACTIONBUTTONS_CLASSNAME,
+        props.className,
+        TIMELINE_CLASSNAME,
         {
-          [`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,
-          [`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation
-        },
-        props.className
+          [`${TIMELINE_CLASSNAME}-${orientation}`]: orientation,
+          [`${TIMELINE_CLASSNAME}-alternating`]: alternatingMode,
+          [`${TIMELINE_CLASSNAME}-collapsible`]: collapsibleEvents
+        }
+      ),
+      children: /* @__PURE__ */ jsx(Fragment, { children: props.children })
+    }
+  );
+};
+Timeline.states = states;
+Timeline.options = options;
+Timeline.className = TIMELINE_CLASSNAME;
+Timeline.defaultProps = defaultProps;
+
+// src/card/card-callout.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CARDCALLOUT_CLASSNAME = `k-card-callout`;
+var CardCallout = (props) => {
+  const {
+    callout,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        CARDCALLOUT_CLASSNAME,
+        {
+          [`k-callout-${kendoThemeMaps.calloutMap[callout] || callout}`]: callout
+        }
+      )
+    }
+  );
+};
+
+// src/card/card.spec.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var CARD_CLASSNAME = `k-card`;
+var states2 = [
+  States.hover,
+  States.focus,
+  States.selected,
+  States.disabled
+];
+var options2 = {
+  themeColor: [
+    ThemeColor.primary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info
+  ]
+};
+var defaultProps2 = {};
+var Card = (props) => {
+  const {
+    orientation,
+    themeColor,
+    callout,
+    hover,
+    focus,
+    selected,
+    disabled,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        CARD_CLASSNAME,
+        optionClassNames(CARD_CLASSNAME, {
+          themeColor
+        }),
+        stateClassNames(CARD_CLASSNAME, {
+          hover,
+          focus,
+          disabled,
+          selected
+        }),
+        {
+          [`k-card-${orientation}`]: orientation,
+          "k-card-with-callout": callout
+        }
+      ),
+      children: [
+        callout && callout !== "true" && /* @__PURE__ */ jsx3(CardCallout, { callout }),
+        /* @__PURE__ */ jsx3(Fragment2, { children: props.children })
+      ]
+    }
+  );
+};
+Card.states = states2;
+Card.options = options2;
+Card.className = CARD_CLASSNAME;
+Card.defaultProps = defaultProps2;
+
+// src/card/card-title.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CARDTITLE_CLASSNAME = `k-card-title`;
+var states3 = [
+  States.hover,
+  States.focus
+];
+var CardTitle = (props) => {
+  const {
+    hover,
+    focus,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        CARDTITLE_CLASSNAME,
+        stateClassNames(CARDTITLE_CLASSNAME, {
+          hover,
+          focus
+        })
       ),
       children: props.children
     }
   );
 };
-ActionButtons.states = states;
-ActionButtons.options = options;
-ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
-ActionButtons.defaultProps = defaultProps;
+
+// src/card/card-subtitle.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var CARDSUBTITLE_CLASSNAME = `k-card-subtitle`;
+var CardSubtitle = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        CARDSUBTITLE_CLASSNAME
+      ),
+      children: props.children
+    }
+  );
+};
+
+// src/card/card-media.tsx
+import { Fragment as Fragment3, jsx as jsx6 } from "react/jsx-runtime";
 
 // src/icon/font-icon.spec.tsx
-import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7 } from "react/jsx-runtime";
 var FONTICON_CLASSNAME = `k-icon k-font-icon`;
-var states2 = [];
-var options2 = {
+var states4 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -178,7 +318,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {};
+var defaultProps3 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -189,9 +329,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx2(Fragment, {});
+    return /* @__PURE__ */ jsx7(Fragment4, {});
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx7(
     "span",
     {
       ...other,
@@ -212,17 +352,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states2;
-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
-import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx8 } from "react/jsx-runtime";
 var SVGICON_CLASSNAME = `k-icon k-svg-icon`;
-var states3 = [];
-var options3 = {
+var states5 = [];
+var options4 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -237,7 +377,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -246,15 +386,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps4.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx3(Fragment2, {});
+    return /* @__PURE__ */ jsx8(Fragment5, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx8(
       "span",
       {
         ...other,
@@ -267,7 +407,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx8(
     "span",
     {
       ...other,
@@ -285,7 +425,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx8(
         "svg",
         {
           "aria-hidden": true,
@@ -299,10 +439,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states3;
-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
@@ -4301,13 +4441,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-import { Fragment as Fragment3, jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx9 } from "react/jsx-runtime";
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states4 = [];
-var options4 = {
+var states6 = [];
+var options5 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4322,7 +4462,7 @@ var options4 = {
     ThemeColor.dark
   ]
 };
-var defaultProps4 = {
+var defaultProps5 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4331,42 +4471,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__ */ jsx4(Fragment3, {});
+    return /* @__PURE__ */ jsx9(Fragment6, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ jsx4(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ jsx9(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ jsx4(Fragment3, {});
+      return /* @__PURE__ */ jsx9(Fragment6, {});
     }
-    return /* @__PURE__ */ jsx4(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ jsx9(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ jsx4(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ jsx9(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
-Icon.states = states4;
-Icon.options = options4;
-Icon.defaultProps = defaultProps4;
+Icon.states = states6;
+Icon.options = options5;
+Icon.defaultProps = defaultProps5;
 
 // src/button/button.spec.tsx
-import { Fragment as Fragment4, jsx as jsx5, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var BUTTON_CLASSNAME = `k-button`;
-var states5 = [
+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],
@@ -4384,7 +4524,7 @@ var options5 = {
     ThemeColor.inverse
   ]
 };
-var defaultProps5 = {
+var defaultProps6 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid,
@@ -4394,10 +4534,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,
@@ -4406,13 +4546,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__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "button",
     {
       ...other,
@@ -4437,293 +4577,574 @@ var Button = (props) => {
         }
       ),
       children: [
-        icon && /* @__PURE__ */ jsx5(
+        icon && /* @__PURE__ */ jsx10(
           Icon,
           {
             className: classNames(iconClassName, "k-button-icon"),
             icon
           }
         ),
-        text ? /* @__PURE__ */ jsxs(Fragment4, { children: [
-          text && /* @__PURE__ */ jsx5("span", { className: "k-button-text", children: text }),
+        text ? /* @__PURE__ */ jsxs2(Fragment7, { children: [
+          text && /* @__PURE__ */ jsx10("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : props.children && /* @__PURE__ */ jsx5("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ jsx5("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx5(Icon, { icon: arrowIconName }) })
+        ] }) : props.children && /* @__PURE__ */ jsx10("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ jsx10("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx10(Icon, { icon: arrowIconName }) })
       ]
     }
   );
 };
-Button.states = states5;
-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
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var IconButton = (props) => /* @__PURE__ */ jsx11(Button, { icon: "folder", ...props, children: void 0 });
 
 // src/button/templates/icon-text-button.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 
 // src/button/templates/text-button.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 
-// src/card/card-callout.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var CARDCALLOUT_CLASSNAME = `k-card-callout`;
-var CardCallout = (props) => {
+// src/card/card-header.tsx
+import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
+var CARDHEADER_CLASSNAME = `k-card-header`;
+var CardHeader = (props) => {
   const {
-    callout,
+    title,
+    subtitle,
+    details,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx9(
-    "span",
+  return /* @__PURE__ */ jsxs3(
+    "div",
     {
       ...other,
       className: classNames(
         props.className,
-        CARDCALLOUT_CLASSNAME,
-        {
-          [`k-callout-${kendoThemeMaps.calloutMap[callout] || callout}`]: callout
-        }
-      )
+        CARDHEADER_CLASSNAME
+      ),
+      children: [
+        title && /* @__PURE__ */ jsx14(CardTitle, { children: title }),
+        subtitle && /* @__PURE__ */ jsx14(CardSubtitle, { children: subtitle }),
+        /* @__PURE__ */ jsx14(Fragment8, { children: props.children }),
+        details && /* @__PURE__ */ jsx14("span", { className: "k-card-header-actions", children: /* @__PURE__ */ jsx14(
+          Button,
+          {
+            className: "k-card-details",
+            icon: "more-vertical",
+            rounded: "medium",
+            size: "medium",
+            fillMode: "flat",
+            themeColor: "base"
+          }
+        ) })
+      ]
     }
   );
 };
 
-// src/card/card.spec.tsx
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
-var CARD_CLASSNAME = `k-card`;
-var states6 = [
-  States.hover,
-  States.focus,
-  States.selected,
-  States.disabled
-];
-var options6 = {
-  themeColor: [
-    ThemeColor.primary,
-    ThemeColor.success,
-    ThemeColor.warning,
-    ThemeColor.error,
-    ThemeColor.info
-  ]
-};
-var defaultProps6 = {};
-var Card = (props) => {
+// src/card/card-footer.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+
+// src/card/card-body.tsx
+import { Fragment as Fragment9, jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+var CARDBODY_CLASSNAME = `k-card-body`;
+var CardBody = (props) => {
   const {
-    orientation,
-    themeColor,
-    callout,
-    hover,
-    focus,
-    selected,
-    disabled,
+    title,
+    subtitle,
+    details,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ...other,
       className: classNames(
         props.className,
-        CARD_CLASSNAME,
-        optionClassNames(CARD_CLASSNAME, {
-          themeColor
-        }),
-        stateClassNames(CARD_CLASSNAME, {
-          hover,
-          focus,
-          disabled,
-          selected
-        }),
-        {
-          [`k-card-${orientation}`]: orientation,
-          "k-card-with-callout": callout
-        }
+        CARDBODY_CLASSNAME
       ),
       children: [
-        callout && callout !== "true" && /* @__PURE__ */ jsx10(CardCallout, { callout }),
-        /* @__PURE__ */ jsx10(Fragment5, { children: props.children })
+        title && /* @__PURE__ */ jsx16(CardTitle, { children: title }),
+        subtitle && /* @__PURE__ */ jsx16(CardSubtitle, { children: subtitle }),
+        /* @__PURE__ */ jsx16(Fragment9, { children: props.children }),
+        details && /* @__PURE__ */ jsx16("span", { className: "k-card-header-actions", children: /* @__PURE__ */ jsx16(
+          Button,
+          {
+            className: "k-card-details",
+            icon: "more-vertical",
+            rounded: "medium",
+            size: "medium",
+            fillMode: "flat",
+            themeColor: "base"
+          }
+        ) })
       ]
     }
   );
 };
-Card.states = states6;
-Card.options = options6;
-Card.className = CARD_CLASSNAME;
-Card.defaultProps = defaultProps6;
 
-// src/card/card-title.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var CARDTITLE_CLASSNAME = `k-card-title`;
-var states7 = [
-  States.hover,
-  States.focus
-];
-var CardTitle = (props) => {
+// src/card/card-deck.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+
+// src/action-buttons/action-buttons.spec.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ACTIONBUTTONS_CLASSNAME = `k-actions`;
+var states8 = [];
+var options7 = {};
+var defaultProps7 = {
+  alignment: "start",
+  orientation: "horizontal"
+};
+var ActionButtons = (props) => {
   const {
-    hover,
-    focus,
+    alignment = defaultProps7.alignment,
+    orientation = defaultProps7.orientation,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       ...other,
       className: classNames(
-        props.className,
-        CARDTITLE_CLASSNAME,
-        stateClassNames(CARDTITLE_CLASSNAME, {
-          hover,
-          focus
-        })
+        ACTIONBUTTONS_CLASSNAME,
+        {
+          [`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,
+          [`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation
+        },
+        props.className
       ),
       children: props.children
     }
   );
 };
+ActionButtons.states = states8;
+ActionButtons.options = options7;
+ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
+ActionButtons.defaultProps = defaultProps7;
 
-// src/card/card-subtitle.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var CARDSUBTITLE_CLASSNAME = `k-card-subtitle`;
-var CardSubtitle = (props) => {
+// src/card/templates/card-normal.tsx
+import { Fragment as Fragment10, jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// src/card/templates/card-horizontal.tsx
+import { Fragment as Fragment11, jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// src/timeline/vertical-timeline-event.spec.tsx
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+var TIMELINEVERTICALEVENT_CLASSNAME = `k-timeline-event`;
+var states9 = [];
+var options8 = {};
+var defaultProps8 = {
+  collapsed: false,
+  reverse: false,
+  title: "Event title",
+  subtitle: "Event subtitle",
+  content: "Event content"
+};
+var VerticalTimelineEvent = (props) => {
   const {
+    date,
+    content = defaultProps8.content,
+    collapsed = defaultProps8.collapsed,
+    reverse = defaultProps8.reverse,
+    title = defaultProps8.title,
+    subtitle = defaultProps8.subtitle,
+    showCollapseButton,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs7(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINEVERTICALEVENT_CLASSNAME,
+        { "k-reverse": reverse }
+      ),
+      children: [
+        date && /* @__PURE__ */ jsx21("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ jsx21("span", { className: "k-timeline-date", children: date }) }),
+        /* @__PURE__ */ jsx21(TimelineCircle, {}),
+        content && /* @__PURE__ */ jsx21("div", { className: classNames("k-timeline-card", { "k-collapsed": collapsed }), children: /* @__PURE__ */ jsx21(TimelineCard, { ...reverse ? { callout: "right" } : { callout: "left" }, children: /* @__PURE__ */ jsxs7("div", { className: "k-card-inner", children: [
+          /* @__PURE__ */ jsxs7(CardHeader, { children: [
+            /* @__PURE__ */ jsx21(TimelineCardTitle, { collapsible: showCollapseButton, children: title }),
+            /* @__PURE__ */ jsx21(CardSubtitle, { children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsx21(CardBody, { children: /* @__PURE__ */ jsx21("div", { className: "k-card-description", children: content }) })
+        ] }) }) }),
+        props.children
+      ]
+    }
+  );
+};
+VerticalTimelineEvent.states = states9;
+VerticalTimelineEvent.options = options8;
+VerticalTimelineEvent.className = TIMELINEVERTICALEVENT_CLASSNAME;
+VerticalTimelineEvent.defaultProps = defaultProps8;
+
+// src/timeline/horizontal-timeline-event.spec.tsx
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+var TIMELINEHORIZONTALEVENT_CLASSNAME = `k-timeline-event`;
+var states10 = [];
+var options9 = {};
+var defaultProps9 = {
+  title: "Event title",
+  subtitle: "Event subtitle",
+  content: "Event content"
+};
+var HorizontalTimelineEvent = (props) => {
+  const {
+    content = defaultProps9.content,
+    title = defaultProps9.title,
+    subtitle = defaultProps9.subtitle,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs8(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINEHORIZONTALEVENT_CLASSNAME
+      ),
+      children: [
+        content && /* @__PURE__ */ jsx22("div", { className: classNames("k-timeline-card"), children: /* @__PURE__ */ jsx22(TimelineCard, { orientation: "vertical", callout: "top", children: /* @__PURE__ */ jsxs8("div", { className: "k-card-inner", children: [
+          /* @__PURE__ */ jsxs8(CardHeader, { children: [
+            /* @__PURE__ */ jsx22(TimelineCardTitle, { children: title }),
+            /* @__PURE__ */ jsx22(CardSubtitle, { children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsx22(CardBody, { children: /* @__PURE__ */ jsx22("div", { className: "k-card-description", children: content }) })
+        ] }) }) }),
+        props.children
+      ]
+    }
+  );
+};
+HorizontalTimelineEvent.states = states10;
+HorizontalTimelineEvent.options = options9;
+HorizontalTimelineEvent.className = TIMELINEHORIZONTALEVENT_CLASSNAME;
+HorizontalTimelineEvent.defaultProps = defaultProps9;
+
+// src/timeline/timeline-event-list.spec.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var TIMELINEEVENTLIST_CLASSNAME = `k-timeline-events-list`;
+var TimelineEventList = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       ...other,
       className: classNames(
         props.className,
-        CARDSUBTITLE_CLASSNAME
+        TIMELINEEVENTLIST_CLASSNAME
       ),
-      children: props.children
+      children: /* @__PURE__ */ jsx23("ul", { className: "k-timeline-scrollable-wrap", children: props.children })
     }
   );
 };
 
-// src/card/card-media.tsx
-import { Fragment as Fragment6, jsx as jsx13 } from "react/jsx-runtime";
-var CARDMEDIA_CLASSNAME = `k-card-media`;
-var CardMedia = (props) => {
+// src/timeline/timeline-flag-wrap.spec.tsx
+import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
+var TIMELINEFLAGWRAP_CLASSNAME = `k-timeline-flag-wrap`;
+var states11 = [
+  States.focus,
+  States.selected
+];
+var options10 = {};
+var defaultProps10 = {
+  year: "2020"
+};
+var TimelineFlagWrap = (props) => {
   const {
-    src,
+    year,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx13(Fragment6, { children: src ? /* @__PURE__ */ jsx13(
-    "img",
+  return /* @__PURE__ */ jsxs9(
+    "li",
     {
       ...other,
       className: classNames(
         props.className,
-        CARDMEDIA_CLASSNAME
+        TIMELINEFLAGWRAP_CLASSNAME
       ),
-      src
+      children: [
+        /* @__PURE__ */ jsx24("span", { className: "k-timeline-flag", children: year }),
+        props.children
+      ]
+    }
+  );
+};
+TimelineFlagWrap.states = states11;
+TimelineFlagWrap.options = options10;
+TimelineFlagWrap.className = TIMELINEFLAGWRAP_CLASSNAME;
+TimelineFlagWrap.defaultProps = defaultProps10;
+
+// src/timeline/timeline-circle.spec.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+var TIMELINECIRCLE_CLASSNAME = `k-timeline-circle`;
+var TimelineCircle = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx25(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINECIRCLE_CLASSNAME
+      )
     }
-  ) : /* @__PURE__ */ jsx13(
+  );
+};
+
+// src/timeline/timeline-flag.spec.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var TIMELINEFLAG_CLASSNAME = `k-timeline-flag`;
+var TimelineFlag = (props) => {
+  const {
+    content,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx26(
     "span",
     {
       ...other,
       className: classNames(
         props.className,
-        CARDMEDIA_CLASSNAME
+        TIMELINEFLAG_CLASSNAME
       ),
-      children: /* @__PURE__ */ jsx13(Fragment6, { children: props.children })
+      children: content
     }
-  ) });
+  );
 };
 
-// src/card/card-header.tsx
-import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
-var CARDHEADER_CLASSNAME = `k-card-header`;
-var CardHeader = (props) => {
+// src/timeline/timeline-card.spec.tsx
+import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+var states12 = [];
+var defaultProps11 = {};
+var TimelineCard = (props) => {
   const {
-    title,
-    subtitle,
-    details,
+    callout,
+    children,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs3(
-    "div",
+  return /* @__PURE__ */ jsxs10(
+    Card,
     {
+      className: classNames(
+        props.className
+      ),
+      orientation: "vertical",
       ...other,
+      children: [
+        callout && /* @__PURE__ */ jsx27(TimelineCardCallout, { callout }),
+        children
+      ]
+    }
+  );
+};
+TimelineCard.states = states12;
+TimelineCard.defaultProps = defaultProps11;
+
+// src/timeline/timeline-card-title.tsx
+import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
+var TIMELINECARDTITLE_CLASSNAME = `k-card-title`;
+var states13 = [];
+var defaultProps12 = {};
+var TimelineCardTitle = (props) => {
+  const {
+    collapsible,
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
       className: classNames(
         props.className,
-        CARDHEADER_CLASSNAME
+        TIMELINECARDTITLE_CLASSNAME
       ),
+      ...other,
       children: [
-        title && /* @__PURE__ */ jsx14(CardTitle, { children: title }),
-        subtitle && /* @__PURE__ */ jsx14(CardSubtitle, { children: subtitle }),
-        /* @__PURE__ */ jsx14(Fragment7, { children: props.children }),
-        details && /* @__PURE__ */ jsx14("span", { className: "k-card-header-actions", children: /* @__PURE__ */ jsx14(
-          Button,
-          {
-            className: "k-card-details",
-            icon: "more-vertical",
-            rounded: "medium",
-            size: "medium",
-            fillMode: "flat",
-            themeColor: "base"
-          }
-        ) })
+        /* @__PURE__ */ jsx28("span", { className: "k-event-title", children }),
+        collapsible && /* @__PURE__ */ jsx28(IconButton, { fillMode: "flat", icon: "chevron-right", className: "k-event-collapse" })
       ]
     }
   );
 };
+TimelineCardTitle.states = states13;
+TimelineCardTitle.className = TIMELINECARDTITLE_CLASSNAME;
+TimelineCardTitle.defaultProps = defaultProps12;
 
-// src/card/card-footer.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+// src/timeline/timeline-card-callout.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var TIMELINECARDCALLOUT_CLASSNAME = `k-timeline-card-callout`;
+var states14 = [];
+var defaultProps13 = {};
+var TimelineCardCallout = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx29(
+    CardCallout,
+    {
+      className: classNames(
+        props.className,
+        TIMELINECARDCALLOUT_CLASSNAME
+      ),
+      ...other
+    }
+  );
+};
+TimelineCardCallout.states = states14;
+TimelineCardCallout.className = TIMELINECARDCALLOUT_CLASSNAME;
+TimelineCardCallout.defaultProps = defaultProps13;
 
-// src/card/card-body.tsx
-import { Fragment as Fragment8, jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
-var CARDBODY_CLASSNAME = `k-card-body`;
-var CardBody = (props) => {
+// src/timeline/timeline-date-wrap.spec.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+var TIMELINEDATEWRAP_CLASSNAME = `k-timeline-date-wrap`;
+var states15 = [];
+var options11 = {};
+var defaultProps14 = {
+  date: "May 25, 2008"
+};
+var TimelineDateWrap = (props) => {
   const {
-    title,
-    subtitle,
-    details,
+    date = defaultProps14.date,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       ...other,
       className: classNames(
         props.className,
-        CARDBODY_CLASSNAME
+        TIMELINEDATEWRAP_CLASSNAME
+      ),
+      children: /* @__PURE__ */ jsx30("span", { className: "k-timeline-date", children: date })
+    }
+  );
+};
+TimelineDateWrap.states = states15;
+TimelineDateWrap.options = options11;
+TimelineDateWrap.className = TIMELINEDATEWRAP_CLASSNAME;
+TimelineDateWrap.defaultProps = defaultProps14;
+
+// src/timeline/timeline-track-wrap.spec.tsx
+import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+var TIMELINETRACKWRAP_CLASSNAME = `k-timeline-track-wrap`;
+var TimelineTrackWrap = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINETRACKWRAP_CLASSNAME
       ),
       children: [
-        title && /* @__PURE__ */ jsx16(CardTitle, { children: title }),
-        subtitle && /* @__PURE__ */ jsx16(CardSubtitle, { children: subtitle }),
-        /* @__PURE__ */ jsx16(Fragment8, { children: props.children }),
-        details && /* @__PURE__ */ jsx16("span", { className: "k-card-header-actions", children: /* @__PURE__ */ jsx16(
-          Button,
-          {
-            className: "k-card-details",
-            icon: "more-vertical",
-            rounded: "medium",
-            size: "medium",
-            fillMode: "flat",
-            themeColor: "base"
-          }
-        ) })
+        /* @__PURE__ */ jsx31(Button, { className: "k-timeline-arrow k-timeline-arrow-left", rounded: "full", icon: "caret-alt-left" }),
+        /* @__PURE__ */ jsx31(Button, { className: "k-timeline-arrow k-timeline-arrow-right", rounded: "full", icon: "caret-alt-right" }),
+        /* @__PURE__ */ jsx31(TimelineTrack, { children: props.children })
       ]
     }
   );
 };
 
-// src/card/card-deck.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+// src/timeline/timeline-track.spec.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+var TIMELINETRACK_CLASSNAME = `k-timeline-track`;
+var TimelineTrack = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx32(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINETRACK_CLASSNAME
+      ),
+      children: /* @__PURE__ */ jsx32("ul", { className: "k-timeline-scrollable-wrap", children: props.children })
+    }
+  );
+};
 
-// src/card/templates/card-normal.tsx
-import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+// src/timeline/timeline-track-item.spec.tsx
+import { jsxs as jsxs13 } from "react/jsx-runtime";
+var TIMELINETRACKITEM_CLASSNAME = `k-timeline-track-item`;
+var TimelineTrackItem = (props) => {
+  const {
+    content,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs13(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINETRACKITEM_CLASSNAME
+      ),
+      children: [
+        content,
+        props.children
+      ]
+    }
+  );
+};
 
-// src/card/templates/card-horizontal.tsx
-import { Fragment as Fragment10, jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+// src/timeline/templates/timeline-normal.tsx
+import { jsx as jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
+
+// src/timeline/templates/timeline-normal-collapsible.tsx
+import { jsx as jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
+
+// src/timeline/templates/timeline-normal-alternating.tsx
+import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
+
+// src/timeline/templates/timeline-horizontal.tsx
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
+var TimelineHorizontal = (props) => /* @__PURE__ */ jsx36(
+  Timeline,
+  {
+    orientation: "horizontal",
+    children: [
+      /* @__PURE__ */ jsxs17(Fragment12, { children: [
+        /* @__PURE__ */ jsxs17(TimelineTrackWrap, { children: [
+          /* @__PURE__ */ jsx36(TimelineTrackItem, { className: "k-timeline-flag-wrap", children: /* @__PURE__ */ jsx36(TimelineFlag, { content: "2015" }) }),
+          /* @__PURE__ */ jsxs17(TimelineTrackItem, { children: [
+            /* @__PURE__ */ jsx36(TimelineDateWrap, { date: "Jan 14, 2015" }),
+            /* @__PURE__ */ jsx36(TimelineCircle, {})
+          ] }),
+          /* @__PURE__ */ jsxs17(TimelineTrackItem, { children: [
+            /* @__PURE__ */ jsx36(TimelineDateWrap, { date: "Jun 1, 2015" }),
+            /* @__PURE__ */ jsx36(TimelineCircle, {})
+          ] }),
+          /* @__PURE__ */ jsxs17(TimelineTrackItem, { children: [
+            /* @__PURE__ */ jsx36(TimelineDateWrap, { date: "Sep 29, 2015" }),
+            /* @__PURE__ */ jsx36(TimelineCircle, {})
+          ] }),
+          /* @__PURE__ */ jsx36(TimelineTrackItem, { className: "k-timeline-flag-wrap", children: /* @__PURE__ */ jsx36(TimelineFlag, { content: "2016" }) })
+        ] }),
+        /* @__PURE__ */ jsx36(TimelineEventList, { children: /* @__PURE__ */ jsx36(HorizontalTimelineEvent, {}) })
+      ] })
+    ],
+    ...props
+  }
+);
 
 // src/timeline/tests/timeline-horizontal.tsx
-import { Fragment as Fragment11, jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
 var style = `
     .k-card-media {
         display: block;
@@ -4732,44 +5153,12 @@ var style = `
         background: #cccccc;
     }
 `;
-var timeline_horizontal_default = () => /* @__PURE__ */ jsxs7(Fragment11, { children: [
-  /* @__PURE__ */ jsx20("style", { children: style }),
-  /* @__PURE__ */ jsx20("div", { id: "test-area", children: /* @__PURE__ */ jsxs7("div", { className: "k-timeline k-timeline-horizontal", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "k-timeline-track-wrap", children: [
-      /* @__PURE__ */ jsx20(Button, { icon: "caret-alt-left", className: "k-timeline-arrow k-timeline-arrow-left" }),
-      /* @__PURE__ */ jsx20(Button, { icon: "caret-alt-right", className: "k-timeline-arrow k-timeline-arrow-right" }),
-      /* @__PURE__ */ jsx20("div", { className: "k-timeline-track", children: /* @__PURE__ */ jsxs7("ul", { className: "k-timeline-scrollable-wrap", children: [
-        /* @__PURE__ */ jsx20("li", { className: "k-timeline-track-item", children: /* @__PURE__ */ jsx20("span", { className: "k-timeline-flag", children: "2015" }) }),
-        /* @__PURE__ */ jsxs7("li", { className: "k-timeline-track-item", children: [
-          /* @__PURE__ */ jsx20("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ jsx20("span", { className: "k-timeline-date", children: "Jan 14, 2015" }) }),
-          /* @__PURE__ */ jsx20("a", { className: "k-timeline-circle", href: "#" })
-        ] }),
-        /* @__PURE__ */ jsxs7("li", { className: "k-timeline-track-item k-focus", children: [
-          /* @__PURE__ */ jsx20("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ jsx20("span", { className: "k-timeline-date", children: "Jun 1, 2015" }) }),
-          /* @__PURE__ */ jsx20("a", { className: "k-timeline-circle", href: "#" })
-        ] }),
-        /* @__PURE__ */ jsxs7("li", { className: "k-timeline-track-item", children: [
-          /* @__PURE__ */ jsx20("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ jsx20("span", { className: "k-timeline-date", children: "Sep 29, 2015" }) }),
-          /* @__PURE__ */ jsx20("a", { className: "k-timeline-circle", href: "#" })
-        ] }),
-        /* @__PURE__ */ jsx20("li", { className: "k-timeline-track-item", children: /* @__PURE__ */ jsx20("span", { className: "k-timeline-flag", children: "2016" }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx20("div", { className: "k-timeline-events-list", children: /* @__PURE__ */ jsx20("ul", { className: "k-timeline-scrollable-wrap", children: /* @__PURE__ */ jsx20("li", { className: "k-timeline-event", children: /* @__PURE__ */ jsx20("div", { className: "k-timeline-card", children: /* @__PURE__ */ jsxs7(Card, { orientation: "vertical", callout: "true", children: [
-      /* @__PURE__ */ jsx20(CardCallout, { className: "k-timeline-card-callout", callout: "top" }),
-      /* @__PURE__ */ jsxs7("div", { className: "k-card-inner", children: [
-        /* @__PURE__ */ jsx20(CardHeader, { title: "Title", subtitle: "Subtitle" }),
-        /* @__PURE__ */ jsx20(CardBody, { children: /* @__PURE__ */ jsxs7("div", { className: "k-card-description", children: [
-          /* @__PURE__ */ jsx20("p", { children: "Card Description Here" }),
-          /* @__PURE__ */ jsx20(CardMedia, {})
-        ] }) }),
-        /* @__PURE__ */ jsxs7(ActionButtons, { alignment: "start", className: "k-card-actions", children: [
-          /* @__PURE__ */ jsx20(Button, { fillMode: "flat", themeColor: "primary", children: "Action 1" }),
-          /* @__PURE__ */ jsx20(Button, { fillMode: "flat", themeColor: "primary", children: "Action 2" })
-        ] })
-      ] })
-    ] }) }) }) }) })
-  ] }) })
+var timeline_horizontal_default = () => /* @__PURE__ */ jsxs18(Fragment13, { children: [
+  /* @__PURE__ */ jsx37("style", { children: style }),
+  /* @__PURE__ */ jsxs18("div", { id: "test-area", children: [
+    /* @__PURE__ */ jsx37("span", { children: "Horizontal Timeline" }),
+    /* @__PURE__ */ jsx37(TimelineHorizontal, {})
+  ] })
 ] });
 export {
   timeline_horizontal_default as default