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

package/dist/cjs/{notification/tests/notification-custom-angular.js → timeline/timeline-card-callout.js}

@@ -16,12 +16,14 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/notification/tests/notification-custom-angular.tsx
-var notification_custom_angular_exports = {};
-__export(notification_custom_angular_exports, {
-  default: () => notification_custom_angular_default
+// src/timeline/timeline-card-callout.tsx
+var timeline_card_callout_exports = {};
+__export(timeline_card_callout_exports, {
+  TIMELINECARDCALLOUT_CLASSNAME: () => TIMELINECARDCALLOUT_CLASSNAME,
+  TimelineCardCallout: () => TimelineCardCallout,
+  default: () => timeline_card_callout_default
 });
-module.exports = __toCommonJS(notification_custom_angular_exports);
+module.exports = __toCommonJS(timeline_card_callout_exports);
 
 // src/misc/class-names.ts
 var classNames = (...args) => {
@@ -59,6 +61,22 @@ var optionClassNames = (componentClassName, props) => {
     }
   );
 };
+var stateClassNames = (_componentClassName, props) => {
+  return classNames({
+    "k-valid": props.valid,
+    "k-invalid": props.invalid,
+    "k-hover": props.hover,
+    "k-focus": props.focus,
+    "k-checked": props.checked,
+    "k-active": props.active,
+    "k-selected": props.selected,
+    "k-disabled": props.disabled,
+    "k-indeterminate": props.indeterminate && !props.checked,
+    "k-loading": props.loading,
+    "k-empty": props.empty,
+    "k-readonly": props.readonly
+  });
+};
 
 // src/misc/theme.ts
 var Size = {
@@ -70,6 +88,19 @@ var Size = {
   "xxlarge": "xxlarge",
   "xxxlarge": "xxxlarge"
 };
+var Roundness = {
+  "small": "small",
+  "medium": "medium",
+  "large": "large",
+  "full": "full"
+};
+var FillMode = {
+  "solid": "solid",
+  "flat": "flat",
+  "outline": "outline",
+  "clear": "clear",
+  "link": "link"
+};
 var ThemeColor = {
   "inherit": "inherit",
   "base": "base",
@@ -84,12 +115,139 @@ var ThemeColor = {
   "light": "light",
   "inverse": "inverse"
 };
+var States = {
+  "open": "open",
+  "hover": "hover",
+  "focus": "focus",
+  "active": "active",
+  "selected": "selected",
+  "disabled": "disabled",
+  "valid": "valid",
+  "invalid": "invalid",
+  "loading": "loading",
+  "required": "required",
+  "empty": "empty",
+  "indeterminate": "indeterminate",
+  "checked": "checked",
+  "readonly": "readonly"
+};
+var kendoThemeMaps = {
+  calloutMap: {
+    top: "n",
+    bottom: "s",
+    left: "w",
+    right: "e"
+  },
+  orientationMap: {
+    vertical: "vstack",
+    horizontal: "hstack"
+  }
+};
 
-// src/icon/font-icon.spec.tsx
+// src/card/card-callout.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var FONTICON_CLASSNAME = `k-icon k-font-icon`;
-var states = [];
+var CARDCALLOUT_CLASSNAME = `k-card-callout`;
+var CardCallout = (props) => {
+  const {
+    callout,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        CARDCALLOUT_CLASSNAME,
+        {
+          [`k-callout-${kendoThemeMaps.calloutMap[callout] || callout}`]: callout
+        }
+      )
+    }
+  );
+};
+
+// src/card/card.spec.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CARD_CLASSNAME = `k-card`;
+var states = [
+  States.hover,
+  States.focus,
+  States.selected,
+  States.disabled
+];
 var options = {
+  themeColor: [
+    ThemeColor.primary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info
+  ]
+};
+var defaultProps = {};
+var Card = (props) => {
+  const {
+    orientation,
+    themeColor,
+    callout,
+    hover,
+    focus,
+    selected,
+    disabled,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)(CardCallout, { callout }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children })
+      ]
+    }
+  );
+};
+Card.states = states;
+Card.options = options;
+Card.className = CARD_CLASSNAME;
+Card.defaultProps = defaultProps;
+
+// src/card/card-title.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var states2 = [
+  States.hover,
+  States.focus
+];
+
+// src/card/card-subtitle.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
+// src/card/card-media.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/icon/font-icon.spec.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var FONTICON_CLASSNAME = `k-icon k-font-icon`;
+var states3 = [];
+var options2 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -104,7 +262,7 @@ var options = {
     ThemeColor.dark
   ]
 };
-var defaultProps = {};
+var defaultProps2 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -115,9 +273,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "span",
     {
       ...other,
@@ -138,17 +296,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states;
-FontIcon.options = options;
+FontIcon.states = states3;
+FontIcon.options = options2;
 FontIcon.className = FONTICON_CLASSNAME;
-FontIcon.defaultProps = defaultProps;
+FontIcon.defaultProps = defaultProps2;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var SVGICON_CLASSNAME = `k-icon k-svg-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,
@@ -163,7 +321,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {
+var defaultProps3 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -172,15 +330,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps2.viewBox,
+    viewBox = defaultProps3.viewBox,
     icon,
     ...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, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "span",
       {
         ...other,
@@ -193,7 +351,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "span",
     {
       ...other,
@@ -211,7 +369,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "svg",
         {
           "aria-hidden": true,
@@ -225,10 +383,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states2;
-SvgIcon.options = options2;
+SvgIcon.states = states4;
+SvgIcon.options = options3;
 SvgIcon.className = SVGICON_CLASSNAME;
-SvgIcon.defaultProps = defaultProps2;
+SvgIcon.defaultProps = defaultProps3;
 var svg_icon_spec_default = SvgIcon;
 
 // ../../node_modules/@progress/kendo-svg-icons/dist/index.es.js
@@ -4227,13 +4385,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-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,
@@ -4248,7 +4406,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4257,36 +4415,45 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps3.type,
+    type = defaultProps4.type,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps4.viewBox,
     ...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 (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
-Icon.states = states3;
-Icon.options = options3;
-Icon.defaultProps = defaultProps3;
+Icon.states = states5;
+Icon.options = options4;
+Icon.defaultProps = defaultProps4;
 
-// src/notification/notification.spec.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var NOTIFICATION_CLASSNAME = `k-notification`;
-var states4 = [];
-var options4 = {
+// src/button/button.spec.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var BUTTON_CLASSNAME = `k-button`;
+var states6 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
+var options5 = {
+  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],
   themeColor: [
     ThemeColor.base,
     ThemeColor.primary,
@@ -4301,142 +4468,164 @@ var options4 = {
     ThemeColor.inverse
   ]
 };
-var defaultProps4 = {
+var defaultProps5 = {
+  size: Size.medium,
+  rounded: Roundness.medium,
+  fillMode: FillMode.solid,
   themeColor: ThemeColor.base,
-  closable: false
+  showArrow: false,
+  arrowIconName: "caret-alt-down"
 };
-var Notification = (props) => {
+var Button = (props) => {
   const {
-    actions,
-    themeColor = defaultProps4.themeColor,
-    text,
+    size = defaultProps5.size,
+    rounded = defaultProps5.rounded,
+    fillMode = defaultProps5.fillMode,
+    themeColor = defaultProps5.themeColor,
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
     icon,
-    closable = defaultProps4.closable,
+    text,
+    iconClassName,
+    showArrow = defaultProps5.showArrow,
+    arrowIconName = defaultProps5.arrowIconName,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
+  const hasIcon = icon !== void 0;
+  const hasChildren = props.children !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "button",
     {
       ...other,
       className: classNames(
         props.className,
-        NOTIFICATION_CLASSNAME,
-        optionClassNames(NOTIFICATION_CLASSNAME, {
+        BUTTON_CLASSNAME,
+        optionClassNames(BUTTON_CLASSNAME, {
+          size,
+          rounded,
+          fillMode,
           themeColor
         }),
+        stateClassNames(BUTTON_CLASSNAME, {
+          hover,
+          focus,
+          active,
+          disabled,
+          selected
+        }),
         {
-          "k-notification-closable": closable
+          ["k-icon-button"]: !text && !hasChildren && hasIcon
         }
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: "k-notification-status", icon }),
-        props.children ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-notification-content", children: [
-          text,
+        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Icon,
+          {
+            className: classNames(iconClassName, "k-button-icon"),
+            icon
+          }
+        ),
+        text ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: text && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-notification-content", children: text }) }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-notification-actions", children: actions })
+        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { icon: arrowIconName }) })
       ]
     }
   );
 };
-Notification.states = states4;
-Notification.options = options4;
-Notification.className = NOTIFICATION_CLASSNAME;
-Notification.defaultProps = defaultProps4;
+Button.states = states6;
+Button.options = options5;
+Button.className = BUTTON_CLASSNAME;
+Button.defaultProps = defaultProps5;
 
-// src/notification/notification-action.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var className = `k-notification-action`;
-var NotificationAction = (props) => {
-  const {
-    type
-  } = props;
-  let icon;
-  switch (type) {
-    case "close":
-      icon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: "x" });
-      break;
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: type });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: classNames(
-    props.className,
-    className,
-    `k-notification-${type}-action`
-  ), children: icon });
-};
+// src/button/templates/icon-button.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 
-// src/notification/templates/icon-notification.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+// src/button/templates/icon-text-button.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 
-// src/notification/templates/icon-notification-closable.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+// src/button/templates/text-button.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 
-// src/notification/templates/notification-closable.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var NotificationClosable = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-  Notification,
-  {
-    closable: true,
-    text: "Notification",
-    actions: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationAction, { type: "close" }),
-    ...props
-  }
-);
+// src/card/card-header.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 
-// src/notification/templates/notification-normal.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var NotificationNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-  Notification,
-  {
-    text: "Notification",
-    ...props
-  }
-);
+// src/card/card-footer.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 
-// src/notification/tests/notification-custom-angular.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var styles = `
-    .k-notification-group {
-        position: static;
-    }
+// src/card/card-body.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 
-    .fullwidth,
-    .fullwidth > .k-notification {
-        width: 100%;
-    }
+// src/card/card-deck.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 
-    .k-custom-notification {
-        font-size: 20px;
-        color: black;
+// src/action-buttons/action-buttons.spec.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ACTIONBUTTONS_CLASSNAME = `k-actions`;
+var states7 = [];
+var options6 = {};
+var defaultProps6 = {
+  alignment: "start",
+  orientation: "horizontal"
+};
+var ActionButtons = (props) => {
+  const {
+    alignment = defaultProps6.alignment,
+    orientation = defaultProps6.orientation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        ACTIONBUTTONS_CLASSNAME,
+        {
+          [`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,
+          [`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation
+        },
+        props.className
+      ),
+      children: props.children
     }
+  );
+};
+ActionButtons.states = states7;
+ActionButtons.options = options6;
+ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
+ActionButtons.defaultProps = defaultProps6;
+
+// src/card/templates/card-normal.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
 
-    .k-notification-actions {
-        align-self: start;
+// src/card/templates/card-horizontal.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// src/timeline/timeline-card-callout.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var TIMELINECARDCALLOUT_CLASSNAME = `k-timeline-card-callout`;
+var states8 = [];
+var defaultProps7 = {};
+var TimelineCardCallout = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    CardCallout,
+    {
+      className: classNames(
+        props.className,
+        TIMELINECARDCALLOUT_CLASSNAME
+      ),
+      ...other
     }
-`;
-var notification_custom_angular_default = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "LTR" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "k-notification-group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-notification-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(NotificationClosable, { text: "Multiline notification", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: "Closable multiline notification" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: "Closable multiline notification" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: "Closable multiline notification" })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-notification-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationNormal, { className: "k-custom-notification", text: "Custom notification" }) })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-colspan-3 k-col-span-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-notification-container fullwidth", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationClosable, { text: "Full width notification" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "RTL" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "k-notification-group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-notification-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(NotificationClosable, { text: "Multiline notification", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: "Closable multiline notification" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: "Closable multiline notification" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: "Closable multiline notification" })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-notification-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationNormal, { className: "k-custom-notification", text: "Custom notification" }) })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-colspan-3 k-col-span-3", dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-notification-container fullwidth", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationClosable, { text: "Full width notification" }) }) })
-  ] })
-] });
+  );
+};
+TimelineCardCallout.states = states8;
+TimelineCardCallout.className = TIMELINECARDCALLOUT_CLASSNAME;
+TimelineCardCallout.defaultProps = defaultProps7;
+var timeline_card_callout_default = TimelineCardCallout;