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

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

@@ -142,19 +142,19 @@ var kendoThemeMaps = {
   }
 };
 
-// src/action-buttons/action-buttons.spec.tsx
+// src/timeline/timeline.spec.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var ACTIONBUTTONS_CLASSNAME = `k-actions`;
+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__ */ (0, import_jsx_runtime.jsx)(
@@ -162,27 +162,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__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children })
+    }
+  );
+};
+Timeline.states = states;
+Timeline.options = options;
+Timeline.className = TIMELINE_CLASSNAME;
+Timeline.defaultProps = defaultProps;
+
+// src/card/card-callout.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CARDCALLOUT_CLASSNAME = `k-card-callout`;
+var CardCallout = (props) => {
+  const {
+    callout,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        CARDCALLOUT_CLASSNAME,
+        {
+          [`k-callout-${kendoThemeMaps.calloutMap[callout] || callout}`]: callout
+        }
+      )
+    }
+  );
+};
+
+// src/card/card.spec.tsx
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(CardCallout, { callout }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.children })
+      ]
+    }
+  );
+};
+Card.states = states2;
+Card.options = options2;
+Card.className = CARD_CLASSNAME;
+Card.defaultProps = defaultProps2;
+
+// src/card/card-title.tsx
+var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsx)(
+    "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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CARDSUBTITLE_CLASSNAME = `k-card-subtitle`;
+var CardSubtitle = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        CARDSUBTITLE_CLASSNAME
+      ),
+      children: props.children
+    }
+  );
+};
+
+// src/card/card-media.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 
 // src/icon/font-icon.spec.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("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,
@@ -197,7 +337,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {};
+var defaultProps3 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -208,9 +348,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "span",
     {
       ...other,
@@ -231,17 +371,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
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("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,
@@ -256,7 +396,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -265,15 +405,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps4.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "span",
       {
         ...other,
@@ -286,7 +426,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_runtime8.jsx)(
     "span",
     {
       ...other,
@@ -304,7 +444,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "svg",
         {
           "aria-hidden": true,
@@ -318,10 +458,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
@@ -4320,13 +4460,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var 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,
@@ -4341,7 +4481,7 @@ var options4 = {
     ThemeColor.dark
   ]
 };
-var defaultProps4 = {
+var defaultProps5 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4350,42 +4490,42 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps4.type,
+    type = defaultProps5.type,
     rotate,
     flip,
-    viewBox = defaultProps4.viewBox,
+    viewBox = defaultProps5.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.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_runtime9.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_runtime9.jsx)(import_jsx_runtime9.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_runtime9.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_runtime9.jsx)(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
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("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],
@@ -4403,7 +4543,7 @@ var options5 = {
     ThemeColor.inverse
   ]
 };
-var defaultProps5 = {
+var defaultProps6 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid,
@@ -4413,10 +4553,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,
@@ -4425,13 +4565,13 @@ var Button = (props) => {
     icon,
     text,
     iconClassName,
-    showArrow = defaultProps5.showArrow,
-    arrowIconName = defaultProps5.arrowIconName,
+    showArrow = defaultProps6.showArrow,
+    arrowIconName = defaultProps6.arrowIconName,
     ...other
   } = props;
   const hasIcon = icon !== void 0;
   const hasChildren = props.children !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "button",
     {
       ...other,
@@ -4456,293 +4596,574 @@ var Button = (props) => {
         }
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_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_runtime10.jsx)("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { icon: arrowIconName }) })
       ]
     }
   );
 };
-Button.states = 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
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var IconButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { icon: "folder", ...props, children: void 0 });
 
 // src/button/templates/icon-text-button.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 
 // src/button/templates/text-button.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 
-// src/card/card-callout.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var CARDCALLOUT_CLASSNAME = `k-card-callout`;
-var CardCallout = (props) => {
+// src/card/card-header.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CARDHEADER_CLASSNAME = `k-card-header`;
+var CardHeader = (props) => {
   const {
-    callout,
+    title,
+    subtitle,
+    details,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "span",
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
     {
       ...other,
       className: classNames(
         props.className,
-        CARDCALLOUT_CLASSNAME,
-        {
-          [`k-callout-${kendoThemeMaps.calloutMap[callout] || callout}`]: callout
-        }
-      )
+        CARDHEADER_CLASSNAME
+      ),
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardTitle, { children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardSubtitle, { children: subtitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: props.children }),
+        details && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Button,
+          {
+            className: "k-card-details",
+            icon: "more-vertical",
+            rounded: "medium",
+            size: "medium",
+            fillMode: "flat",
+            themeColor: "base"
+          }
+        ) })
+      ]
     }
   );
 };
 
-// src/card/card.spec.tsx
-var import_jsx_runtime10 = require("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
+var import_jsx_runtime15 = require("react/jsx-runtime");
+
+// src/card/card-body.tsx
+var import_jsx_runtime16 = require("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__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.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
-        }
+        CARDBODY_CLASSNAME
       ),
       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 })
+        title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardTitle, { children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardSubtitle, { children: subtitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: props.children }),
+        details && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          Button,
+          {
+            className: "k-card-details",
+            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
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var CARDTITLE_CLASSNAME = `k-card-title`;
-var states7 = [
-  States.hover,
-  States.focus
-];
-var CardTitle = (props) => {
+// src/card/card-deck.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// src/action-buttons/action-buttons.spec.tsx
+var import_jsx_runtime18 = require("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__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "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
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var CARDSUBTITLE_CLASSNAME = `k-card-subtitle`;
-var CardSubtitle = (props) => {
+// src/card/templates/card-normal.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// src/card/templates/card-horizontal.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// src/timeline/vertical-timeline-event.spec.tsx
+var import_jsx_runtime21 = require("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__ */ (0, import_jsx_runtime21.jsxs)(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINEVERTICALEVENT_CLASSNAME,
+        { "k-reverse": reverse }
+      ),
+      children: [
+        date && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-timeline-date", children: date }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TimelineCircle, {}),
+        content && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: classNames("k-timeline-card", { "k-collapsed": collapsed }), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TimelineCard, { ...reverse ? { callout: "right" } : { callout: "left" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "k-card-inner", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TimelineCardTitle, { collapsible: showCollapseButton, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardSubtitle, { children: subtitle })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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
+var import_jsx_runtime22 = require("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__ */ (0, import_jsx_runtime22.jsxs)(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINEHORIZONTALEVENT_CLASSNAME
+      ),
+      children: [
+        content && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: classNames("k-timeline-card"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TimelineCard, { orientation: "vertical", callout: "top", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-card-inner", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TimelineCardTitle, { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardSubtitle, { children: subtitle })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var TIMELINEEVENTLIST_CLASSNAME = `k-timeline-events-list`;
+var TimelineEventList = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       ...other,
       className: classNames(
         props.className,
-        CARDSUBTITLE_CLASSNAME
+        TIMELINEEVENTLIST_CLASSNAME
       ),
-      children: props.children
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "k-timeline-scrollable-wrap", children: props.children })
     }
   );
 };
 
-// src/card/card-media.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var CARDMEDIA_CLASSNAME = `k-card-media`;
-var CardMedia = (props) => {
+// src/timeline/timeline-flag-wrap.spec.tsx
+var import_jsx_runtime24 = require("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__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: src ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "img",
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "li",
     {
       ...other,
       className: classNames(
         props.className,
-        CARDMEDIA_CLASSNAME
+        TIMELINEFLAGWRAP_CLASSNAME
       ),
-      src
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var TIMELINECIRCLE_CLASSNAME = `k-timeline-circle`;
+var TimelineCircle = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINECIRCLE_CLASSNAME
+      )
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  );
+};
+
+// src/timeline/timeline-flag.spec.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var TIMELINEFLAG_CLASSNAME = `k-timeline-flag`;
+var TimelineFlag = (props) => {
+  const {
+    content,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "span",
     {
       ...other,
       className: classNames(
         props.className,
-        CARDMEDIA_CLASSNAME
+        TIMELINEFLAG_CLASSNAME
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: props.children })
+      children: content
     }
-  ) });
+  );
 };
 
-// src/card/card-header.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var CARDHEADER_CLASSNAME = `k-card-header`;
-var CardHeader = (props) => {
+// src/timeline/timeline-card.spec.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var states12 = [];
+var defaultProps11 = {};
+var TimelineCard = (props) => {
   const {
-    title,
-    subtitle,
-    details,
+    callout,
+    children,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    Card,
     {
+      className: classNames(
+        props.className
+      ),
+      orientation: "vertical",
       ...other,
+      children: [
+        callout && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TimelineCardCallout, { callout }),
+        children
+      ]
+    }
+  );
+};
+TimelineCard.states = states12;
+TimelineCard.defaultProps = defaultProps11;
+
+// src/timeline/timeline-card-title.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var TIMELINECARDTITLE_CLASSNAME = `k-card-title`;
+var states13 = [];
+var defaultProps12 = {};
+var TimelineCardTitle = (props) => {
+  const {
+    collapsible,
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "div",
+    {
       className: classNames(
         props.className,
-        CARDHEADER_CLASSNAME
+        TIMELINECARDTITLE_CLASSNAME
       ),
+      ...other,
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardTitle, { children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardSubtitle, { children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: props.children }),
-        details && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          Button,
-          {
-            className: "k-card-details",
-            icon: "more-vertical",
-            rounded: "medium",
-            size: "medium",
-            fillMode: "flat",
-            themeColor: "base"
-          }
-        ) })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "k-event-title", children }),
+        collapsible && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(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
-var import_jsx_runtime15 = require("react/jsx-runtime");
+// src/timeline/timeline-card-callout.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var TIMELINECARDCALLOUT_CLASSNAME = `k-timeline-card-callout`;
+var states14 = [];
+var defaultProps13 = {};
+var TimelineCardCallout = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    CardCallout,
+    {
+      className: classNames(
+        props.className,
+        TIMELINECARDCALLOUT_CLASSNAME
+      ),
+      ...other
+    }
+  );
+};
+TimelineCardCallout.states = states14;
+TimelineCardCallout.className = TIMELINECARDCALLOUT_CLASSNAME;
+TimelineCardCallout.defaultProps = defaultProps13;
 
-// src/card/card-body.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var CARDBODY_CLASSNAME = `k-card-body`;
-var CardBody = (props) => {
+// src/timeline/timeline-date-wrap.spec.tsx
+var import_jsx_runtime30 = require("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__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       ...other,
       className: classNames(
         props.className,
-        CARDBODY_CLASSNAME
+        TIMELINEDATEWRAP_CLASSNAME
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("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
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var TIMELINETRACKWRAP_CLASSNAME = `k-timeline-track-wrap`;
+var TimelineTrackWrap = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINETRACKWRAP_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)(
-          Button,
-          {
-            className: "k-card-details",
-            icon: "more-vertical",
-            rounded: "medium",
-            size: "medium",
-            fillMode: "flat",
-            themeColor: "base"
-          }
-        ) })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { className: "k-timeline-arrow k-timeline-arrow-left", rounded: "full", icon: "caret-alt-left" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { className: "k-timeline-arrow k-timeline-arrow-right", rounded: "full", icon: "caret-alt-right" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TimelineTrack, { children: props.children })
       ]
     }
   );
 };
 
-// src/card/card-deck.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+// src/timeline/timeline-track.spec.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var TIMELINETRACK_CLASSNAME = `k-timeline-track`;
+var TimelineTrack = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINETRACK_CLASSNAME
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "k-timeline-scrollable-wrap", children: props.children })
+    }
+  );
+};
 
-// src/card/templates/card-normal.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+// src/timeline/timeline-track-item.spec.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var TIMELINETRACKITEM_CLASSNAME = `k-timeline-track-item`;
+var TimelineTrackItem = (props) => {
+  const {
+    content,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TIMELINETRACKITEM_CLASSNAME
+      ),
+      children: [
+        content,
+        props.children
+      ]
+    }
+  );
+};
 
-// src/card/templates/card-horizontal.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+// src/timeline/templates/timeline-normal.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+
+// src/timeline/templates/timeline-normal-collapsible.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+
+// src/timeline/templates/timeline-normal-alternating.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+
+// src/timeline/templates/timeline-horizontal.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var TimelineHorizontal = (props) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  Timeline,
+  {
+    orientation: "horizontal",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(TimelineTrackWrap, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimelineTrackItem, { className: "k-timeline-flag-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimelineFlag, { content: "2015" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(TimelineTrackItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimelineDateWrap, { date: "Jan 14, 2015" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimelineCircle, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(TimelineTrackItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimelineDateWrap, { date: "Jun 1, 2015" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimelineCircle, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(TimelineTrackItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimelineDateWrap, { date: "Sep 29, 2015" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimelineCircle, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimelineTrackItem, { className: "k-timeline-flag-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimelineFlag, { content: "2016" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimelineEventList, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(HorizontalTimelineEvent, {}) })
+      ] })
+    ],
+    ...props
+  }
+);
 
 // src/timeline/tests/timeline-horizontal.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var style = `
     .k-card-media {
         display: block;
@@ -4751,42 +5172,10 @@ var style = `
         background: #cccccc;
     }
 `;
-var timeline_horizontal_default = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("style", { children: style }),
-  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { id: "test-area", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-timeline k-timeline-horizontal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-timeline-track-wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { icon: "caret-alt-left", className: "k-timeline-arrow k-timeline-arrow-left" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { icon: "caret-alt-right", className: "k-timeline-arrow k-timeline-arrow-right" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-timeline-track", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("ul", { className: "k-timeline-scrollable-wrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { className: "k-timeline-track-item", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-timeline-flag", children: "2015" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { className: "k-timeline-track-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-timeline-date", children: "Jan 14, 2015" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { className: "k-timeline-circle", href: "#" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { className: "k-timeline-track-item k-focus", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-timeline-date", children: "Jun 1, 2015" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { className: "k-timeline-circle", href: "#" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { className: "k-timeline-track-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-timeline-date", children: "Sep 29, 2015" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { className: "k-timeline-circle", href: "#" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { className: "k-timeline-track-item", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-timeline-flag", children: "2016" }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-timeline-events-list", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "k-timeline-scrollable-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { className: "k-timeline-event", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-timeline-card", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Card, { orientation: "vertical", callout: "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardCallout, { className: "k-timeline-card-callout", callout: "top" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-card-inner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardHeader, { title: "Title", subtitle: "Subtitle" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-card-description", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Card Description Here" }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardMedia, {})
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ActionButtons, { alignment: "start", className: "k-card-actions", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 1" }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { fillMode: "flat", themeColor: "primary", children: "Action 2" })
-        ] })
-      ] })
-    ] }) }) }) }) })
-  ] }) })
+var timeline_horizontal_default = () => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("style", { children: style }),
+  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { id: "test-area", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "Horizontal Timeline" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TimelineHorizontal, {})
+  ] })
 ] });