@kickstartds/ds-agency-premium 1.6.71--canary.45.1780.0 → 1.6.71--canary.45.1783.0

package/dist/EventListTeaserProps-cf4c7b20.d.ts

@@ -0,0 +1,68 @@
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * Title of the event
+ */
+type Headline = string;
+/**
+ * Short teaser text for the event
+ */
+type TeaserText = string;
+/**
+ * The date of the event
+ */
+type Date = string;
+/**
+ * The time of the event
+ */
+type Time = string;
+/**
+ * Location of the event
+ */
+type Location = string;
+/**
+ * URL of the image to display
+ */
+type ImageSource = string;
+/**
+ * Alt text of the image
+ */
+type AltText = string;
+/**
+ * The event entry URL to link
+ */
+type URL = string;
+/**
+ * Text for the call to action
+ */
+type CallToAction = string;
+/**
+ * ARIA label for accessibility
+ */
+type ARIALabel = string;
+/**
+ * Display an event teaser with date, title and location
+ */
+interface EventListTeaserProps {
+    title: Headline;
+    teaserText?: TeaserText;
+    date: Date;
+    time?: Time;
+    location: Location;
+    image?: Image;
+    url?: URL;
+    cta?: CallToAction;
+    ariaLabel?: ARIALabel;
+    className?: string;
+}
+/**
+ * Image to display in the teaser
+ */
+interface Image {
+    src?: ImageSource;
+    alt?: AltText;
+}
+export { Headline, TeaserText, Date, Time, Location, ImageSource, AltText, URL, CallToAction, ARIALabel, EventListTeaserProps, Image };

package/dist/components/blog-post/index.d.ts

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-c760fd2a.js";
+import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export type { BlogPostProps };

package/dist/components/event-list/event-list.schema.dereffed.json

@@ -122,6 +122,124 @@
       },
       "additionalProperties": false
     },
+    "events": {
+      "type": "array",
+      "items": {
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "http://schema.mydesignsystem.com/event-list-teaser.schema.json",
+        "title": "Event List Teaser",
+        "description": "Display an event teaser with date, title and location",
+        "type": "object",
+        "properties": {
+          "title": {
+            "title": "Headline",
+            "description": "Title of the event",
+            "type": "string",
+            "format": "markdown",
+            "examples": [
+              "This is a event teaser title"
+            ]
+          },
+          "teaserText": {
+            "title": "Teaser Text",
+            "description": "Short teaser text for the event",
+            "type": "string",
+            "format": "markdown",
+            "examples": [
+              "This is a short teaser text for the event"
+            ]
+          },
+          "date": {
+            "title": "Date",
+            "description": "The date of the event",
+            "type": "string",
+            "format": "date",
+            "examples": [
+              "12.30.2022"
+            ]
+          },
+          "time": {
+            "title": "Time",
+            "description": "The time of the event",
+            "type": "string",
+            "examples": [
+              "10:00"
+            ]
+          },
+          "location": {
+            "title": "Location",
+            "description": "Location of the event",
+            "type": "string",
+            "format": "markdown",
+            "examples": [
+              "This is a location"
+            ]
+          },
+          "image": {
+            "title": "Image",
+            "description": "Image to display in the teaser",
+            "type": "object",
+            "properties": {
+              "src": {
+                "type": "string",
+                "format": "image",
+                "title": "Image Source",
+                "description": "URL of the image to display",
+                "examples": [
+                  "https://picsum.photos/seed/flower/800/600"
+                ]
+              },
+              "alt": {
+                "type": "string",
+                "title": "Alt Text",
+                "description": "Alt text of the image",
+                "examples": [
+                  "This is an image of a flower"
+                ]
+              }
+            },
+            "additionalProperties": false
+          },
+          "url": {
+            "title": "URL",
+            "description": "The event entry URL to link",
+            "type": "string",
+            "format": "uri",
+            "examples": [
+              "https://example.com"
+            ]
+          },
+          "cta": {
+            "title": "Call to Action",
+            "description": "Text for the call to action",
+            "type": "string",
+            "examples": [
+              "Show event"
+            ]
+          },
+          "ariaLabel": {
+            "title": "ARIA Label",
+            "description": "ARIA label for accessibility",
+            "type": "string",
+            "examples": [
+              "Event teaser for "
+            ]
+          },
+          "className": {
+            "type": "string"
+          },
+          "type": {
+            "const": "event-list-teaser"
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "title",
+          "date",
+          "location"
+        ]
+      }
+    },
     "type": {
       "const": "event-list"
     }

package/dist/components/event-list/event-list.schema.json

@@ -6,6 +6,12 @@
   "properties": {
     "filter": {
       "$ref": "http://schema.mydesignsystem.com/event-filter.schema.json"
+    },
+    "events": {
+      "type": "array",
+      "items": {
+        "$ref": "http://schema.mydesignsystem.com/event-list-teaser.schema.json"
+      }
     }
   },
   "additionalProperties": false

package/dist/components/event-list/index.d.ts

@@ -6,11 +6,13 @@ import { FC, PropsWithChildren } from "react";
  * and run json-schema-to-typescript to regenerate this file.
  */
 import { EventFilterProps } from "../../EventFilterProps-b190eb86.js";
+import { EventListTeaserProps } from "../../EventListTeaserProps-cf4c7b20.js";
 interface EventListProps {
     /**
      * Referenced component EventFilterProps
      */
     filter?: EventFilterProps;
+    events?: EventListTeaserProps[];
 }
 declare const EventList: FC<PropsWithChildren<EventListProps>>;
 export type { EventListProps };

package/dist/components/event-list/index.js

@@ -2,6 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { Section } from '../section/index.js';
 import { SplitWeighted } from '../split-weighted/index.js';
 import { EventFilter } from '../event-filter/index.js';
+import { EventListTeaser } from '../event-list-teaser/index.js';
 import 'react';
 import 'classnames';
 import '@kickstartds/core/lib/react';
@@ -12,11 +13,14 @@ import '@kickstartds/form/lib/text-field';
 import '@kickstartds/form/lib/checkbox';
 import '../button/index.js';
 import '@kickstartds/base/lib/button';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/core/lib/container';
+import '@kickstartds/base/lib/picture';
 
-const EventList = ({ filter, }) => (jsx(Fragment, { children: jsx(Section, { width: "wide", children: jsx(SplitWeighted, { order: {
+const EventList = ({ filter, events, }) => (jsx(Fragment, { children: jsx(Section, { width: "wide", children: jsx(SplitWeighted, { verticalAlign: "sticky", order: {
                 desktop: "asideFirst",
                 mobile: "asideFirst",
-            }, aside: jsx(EventFilter, { ...filter }) }) }) }));
+            }, aside: jsx(EventFilter, { ...filter }), main: jsx(Fragment, { children: events.map((event, index) => (jsx(EventListTeaser, { ...event }, index))) }) }) }) }));
 EventList.displayName = "EventList";
 
 export { EventList };

package/dist/components/event-list-teaser/event-list-teaser.css

@@ -0,0 +1,88 @@
+.l-container--event-list-teaser {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: event-list-teaser;
+}
+
+.dsa-event-list-teaser {
+  --g-link--border-radius: var(--ks-border-radius-card);
+  display: flex;
+  gap: var(--ks-spacing-inline-s);
+  padding: var(--ks-spacing-inset-s);
+  border: var(--ks-border-width-default) solid var(--ks-border-color-card-interactive);
+}
+.dsa-event-list-teaser:hover {
+  border-color: var(--ks-border-color-card-interactive-hover);
+}
+.dsa-event-list-teaser__content {
+  display: flex;
+  gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
+  flex-grow: 1;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.dsa-event-list-teaser__text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--ks-spacing-stack-m);
+  flex-basis: var(--dsa-tile--width_large);
+  flex-grow: 1000;
+}
+.dsa-event-list-teaser__image {
+  flex-shrink: 1;
+  flex-grow: 0;
+  flex-basis: var(--dsa-tile--width_medium);
+}
+.dsa-event-list-teaser__image img {
+  object-fit: cover;
+  border-radius: var(--ks-border-radius-card);
+  width: 100%;
+  height: 100%;
+}
+.dsa-event-list-teaser__teaser-text {
+  font: var(--ks-font-copy-m);
+  color: var(--ks-text-color-interface);
+  margin: 0;
+}
+.dsa-event-list-teaser__title {
+  font: var(--ks-font-display-m);
+  font-weight: var(--ks-font-weight-semi-bold);
+  color: var(--ks-text-color-display);
+}
+.dsa-event-list-teaser__infos {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ks-spacing-xxs) var(--ks-spacing-inline-s);
+  align-items: flex-start;
+}
+.dsa-event-list-teaser__info {
+  display: flex;
+  gap: calc(var(--ks-spacing-xxs) * 0.75);
+  font: var(--ks-font-interface-s);
+  align-items: center;
+  color: var(--ks-text-color-interface);
+}
+.dsa-event-list-teaser__info .icon {
+  align-self: flex-start;
+  width: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
+  height: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
+  color: var(--ks-text-color-primary);
+  flex-shrink: 0;
+  flex-grow: 1;
+}
+.dsa-event-list-teaser__cta {
+  font: var(--ks-font-interface-s);
+  font-weight: var(--ks-font-weight-semi-bold);
+  color: var(--ks-text-color-primary);
+  display: flex;
+  align-items: center;
+  text-wrap: nowrap;
+  width: fit-content;
+}
+.dsa-event-list-teaser__cta .icon {
+  width: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
+  height: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
+  color: var(--ks-text-color-primary);
+  flex-shrink: 0;
+  flex-grow: 1;
+}

package/dist/components/event-list-teaser/event-list-teaser.schema.dereffed.json

@@ -0,0 +1,115 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-list-teaser.schema.json",
+  "title": "Event List Teaser",
+  "description": "Display an event teaser with date, title and location",
+  "type": "object",
+  "properties": {
+    "title": {
+      "title": "Headline",
+      "description": "Title of the event",
+      "type": "string",
+      "format": "markdown",
+      "examples": [
+        "This is a event teaser title"
+      ]
+    },
+    "teaserText": {
+      "title": "Teaser Text",
+      "description": "Short teaser text for the event",
+      "type": "string",
+      "format": "markdown",
+      "examples": [
+        "This is a short teaser text for the event"
+      ]
+    },
+    "date": {
+      "title": "Date",
+      "description": "The date of the event",
+      "type": "string",
+      "format": "date",
+      "examples": [
+        "12.30.2022"
+      ]
+    },
+    "time": {
+      "title": "Time",
+      "description": "The time of the event",
+      "type": "string",
+      "examples": [
+        "10:00"
+      ]
+    },
+    "location": {
+      "title": "Location",
+      "description": "Location of the event",
+      "type": "string",
+      "format": "markdown",
+      "examples": [
+        "This is a location"
+      ]
+    },
+    "image": {
+      "title": "Image",
+      "description": "Image to display in the teaser",
+      "type": "object",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "image",
+          "title": "Image Source",
+          "description": "URL of the image to display",
+          "examples": [
+            "https://picsum.photos/seed/flower/800/600"
+          ]
+        },
+        "alt": {
+          "type": "string",
+          "title": "Alt Text",
+          "description": "Alt text of the image",
+          "examples": [
+            "This is an image of a flower"
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
+    "url": {
+      "title": "URL",
+      "description": "The event entry URL to link",
+      "type": "string",
+      "format": "uri",
+      "examples": [
+        "https://example.com"
+      ]
+    },
+    "cta": {
+      "title": "Call to Action",
+      "description": "Text for the call to action",
+      "type": "string",
+      "examples": [
+        "Show event"
+      ]
+    },
+    "ariaLabel": {
+      "title": "ARIA Label",
+      "description": "ARIA label for accessibility",
+      "type": "string",
+      "examples": [
+        "Event teaser for "
+      ]
+    },
+    "className": {
+      "type": "string"
+    },
+    "type": {
+      "const": "event-list-teaser"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "title",
+    "date",
+    "location"
+  ]
+}

package/dist/components/event-list-teaser/event-list-teaser.schema.json

@@ -0,0 +1,87 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-list-teaser.schema.json",
+  "title": "Event List Teaser",
+  "description": "Display an event teaser with date, title and location",
+  "type": "object",
+  "properties": {
+    "title": {
+      "title": "Headline",
+      "description": "Title of the event",
+      "type": "string",
+      "format": "markdown",
+      "examples": ["This is a event teaser title"]
+    },
+    "teaserText": {
+      "title": "Teaser Text",
+      "description": "Short teaser text for the event",
+      "type": "string",
+      "format": "markdown",
+      "examples": ["This is a short teaser text for the event"]
+    },
+    "date": {
+      "title": "Date",
+      "description": "The date of the event",
+      "type": "string",
+      "format": "date",
+      "examples": ["12.30.2022"]
+    },
+    "time": {
+      "title": "Time",
+      "description": "The time of the event",
+      "type": "string",
+      "examples": ["10:00"]
+    },
+    "location": {
+      "title": "Location",
+      "description": "Location of the event",
+      "type": "string",
+      "format": "markdown",
+      "examples": ["This is a location"]
+    },
+    "image": {
+      "title": "Image",
+      "description": "Image to display in the teaser",
+      "type": "object",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "image",
+          "title": "Image Source",
+          "description": "URL of the image to display",
+          "examples": ["https://picsum.photos/seed/flower/800/600"]
+        },
+        "alt": {
+          "type": "string",
+          "title": "Alt Text",
+          "description": "Alt text of the image",
+          "examples": ["This is an image of a flower"]
+        }
+      }
+    },
+    "url": {
+      "title": "URL",
+      "description": "The event entry URL to link",
+      "type": "string",
+      "format": "uri",
+      "examples": ["https://example.com"]
+    },
+    "cta": {
+      "title": "Call to Action",
+      "description": "Text for the call to action",
+      "type": "string",
+      "examples": ["Show event"]
+    },
+    "ariaLabel": {
+      "title": "ARIA Label",
+      "description": "ARIA label for accessibility",
+      "type": "string",
+      "examples": ["Event teaser for "]
+    },
+    "className": {
+      "type": "string"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["title", "date", "location"]
+}

package/dist/components/event-list-teaser/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
+import { EventListTeaserProps } from "../../EventListTeaserProps-cf4c7b20.js";
+declare const EventListTeaserContextDefault: import("react").ForwardRefExoticComponent<EventListTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const EventListTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<EventListTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>>;
+declare const EventListTeaser: import("react").ForwardRefExoticComponent<EventListTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+export type { EventListTeaserProps };
+export { EventListTeaserContextDefault, EventListTeaserContext, EventListTeaser };

package/dist/components/event-list-teaser/index.js

@@ -0,0 +1,19 @@
+import "./event-list-teaser.css";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { forwardRef, createContext, useContext } from 'react';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { Container } from '@kickstartds/core/lib/container';
+import { Picture } from '@kickstartds/base/lib/picture';
+
+const EventListTeaserContextDefault = forwardRef(({ title, teaserText, date, time, location, image, cta, url, ariaLabel, className, ...rest }, ref) => {
+    return (jsx(Container, { name: "event-list-teaser", children: jsx("a", { className: classnames(className, "dsa-event-list-teaser"), ...rest, href: url, ref: ref, "aria-label": ariaLabel, children: jsxs("span", { className: "dsa-event-list-teaser__content", children: [jsxs("span", { className: "dsa-event-list-teaser__text", children: [jsx("span", { className: "dsa-event-list-teaser__title", children: title }), jsx("p", { className: "dsa-event-list-teaser__teaser-text", children: teaserText }), jsxs("span", { className: "dsa-event-list-teaser__infos", children: [jsxs("span", { className: "dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "time" }), time] }), jsxs("span", { className: "dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), location] })] }), jsxs("span", { className: "dsa-event-list-teaser__cta", children: [jsx("span", { children: cta }), jsx(Icon, { "aria-hidden": true, icon: "chevron-right" })] })] }), image && image.src && (jsx("div", { className: "dsa-event-list-teaser__image", children: jsx(Picture, { src: image?.src, alt: image?.alt }) }))] }) }) }));
+});
+const EventListTeaserContext = createContext(EventListTeaserContextDefault);
+const EventListTeaser = forwardRef((props, ref) => {
+    const Component = useContext(EventListTeaserContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+EventListTeaser.displayName = "EventListTeaser";
+
+export { EventListTeaser, EventListTeaserContext, EventListTeaserContextDefault };

package/dist/components/index/index.d.ts

@@ -29,7 +29,7 @@ interface SettingsProps {
     seo: SeoProps;
     iconSprite?: IconSprite;
 }
-export * from "../../BlogPostProps-c760fd2a.js";
+export * from "../../BlogPostProps-6b3cff22.js";
 export * from "../../BlogOverviewProps-9f207f1c.js";
 export * from "../../PageProps-aa29c554.js";
 export { IconSprite, SettingsProps };

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 11:19:15 GMT
+ * Generated on Thu, 03 Jul 2025 12:16:09 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -939,7 +939,7 @@
     "id": "page-archetypes-event-list--event-list",
     "group": "Page Archetypes/Event List",
     "name": "EventList",
-    "code": "<EventList\n  filter={{\n    applyButton: {\n      label: 'Filter Appointments'\n    },\n    categories: {\n      categoryCheckboxes: [\n        'All',\n        'Buyers',\n        'Sellers',\n        'Renters',\n        'Landlords',\n        'Tenants'\n      ],\n      title: 'Categories',\n      toggle: true\n    },\n    datePicker: {\n      dateFromInput: {\n        label: 'From',\n        placeholder: 'Select a date'\n      },\n      dateToInput: {\n        label: 'To',\n        placeholder: 'Select a date'\n      },\n      title: 'Find Appointment',\n      toggle: true\n    },\n    resetButton: {\n      label: 'Reset Filters'\n    }\n  }}\n />",
+    "code": "<EventList\n  events={[\n    {\n      ariaLabel: 'Event teaser for ',\n      cta: 'Show event',\n      date: '12.30.2022',\n      image: {\n        alt: 'This is an image of a flower',\n        src: 'https://picsum.photos/seed/flower/800/600'\n      },\n      location: 'This is a location',\n      teaserText: 'This is a short teaser text for the event',\n      time: '10:00',\n      title: 'This is a event teaser title',\n      url: 'https://example.com'\n    },\n    {\n      ariaLabel: 'Event teaser for ',\n      cta: 'Show event',\n      date: '12.30.2022',\n      image: {\n        alt: 'This is an image of a flower',\n        src: 'https://picsum.photos/seed/flower/800/600'\n      },\n      location: 'This is a location',\n      teaserText: 'This is a short teaser text for the event',\n      time: '10:00',\n      title: 'This is a event teaser title',\n      url: 'https://example.com'\n    },\n    {\n      ariaLabel: 'Event teaser for ',\n      cta: 'Show event',\n      date: '12.30.2022',\n      image: {\n        alt: 'This is an image of a flower',\n        src: 'https://picsum.photos/seed/flower/800/600'\n      },\n      location: 'This is a location',\n      teaserText: 'This is a short teaser text for the event',\n      time: '10:00',\n      title: 'This is a event teaser title',\n      url: 'https://example.com'\n    }\n  ]}\n  filter={{\n    applyButton: {\n      label: 'Filter Appointments'\n    },\n    categories: {\n      categoryCheckboxes: [\n        'All',\n        'Buyers',\n        'Sellers',\n        'Renters',\n        'Landlords',\n        'Tenants'\n      ],\n      title: 'Categories',\n      toggle: true\n    },\n    datePicker: {\n      dateFromInput: {\n        label: 'From',\n        placeholder: 'Select a date'\n      },\n      dateToInput: {\n        label: 'To',\n        placeholder: 'Select a date'\n      },\n      title: 'Find Appointment',\n      toggle: true\n    },\n    resetButton: {\n      label: 'Reset Filters'\n    }\n  }}\n/>",
     "args": {
       "filter": {
         "datePicker": {
@@ -972,7 +972,51 @@
         "resetButton": {
           "label": "Reset Filters"
         }
-      }
+      },
+      "events": [
+        {
+          "title": "This is a event teaser title",
+          "teaserText": "This is a short teaser text for the event",
+          "date": "12.30.2022",
+          "time": "10:00",
+          "location": "This is a location",
+          "image": {
+            "src": "https://picsum.photos/seed/flower/800/600",
+            "alt": "This is an image of a flower"
+          },
+          "url": "https://example.com",
+          "cta": "Show event",
+          "ariaLabel": "Event teaser for "
+        },
+        {
+          "title": "This is a event teaser title",
+          "teaserText": "This is a short teaser text for the event",
+          "date": "12.30.2022",
+          "time": "10:00",
+          "location": "This is a location",
+          "image": {
+            "src": "https://picsum.photos/seed/flower/800/600",
+            "alt": "This is an image of a flower"
+          },
+          "url": "https://example.com",
+          "cta": "Show event",
+          "ariaLabel": "Event teaser for "
+        },
+        {
+          "title": "This is a event teaser title",
+          "teaserText": "This is a short teaser text for the event",
+          "date": "12.30.2022",
+          "time": "10:00",
+          "location": "This is a location",
+          "image": {
+            "src": "https://picsum.photos/seed/flower/800/600",
+            "alt": "This is an image of a flower"
+          },
+          "url": "https://example.com",
+          "cta": "Show event",
+          "ariaLabel": "Event teaser for "
+        }
+      ]
     },
     "screenshot": "img/screenshots/page-archetypes-event-list--event-list.png"
   },
@@ -1757,6 +1801,31 @@
     },
     "screenshot": "img/screenshots/event-event-latest--default.png"
   },
+  {
+    "id": "event-event-list-teaser--default",
+    "group": "Event/ Event List Teaser",
+    "name": "Default",
+    "code": "<EventListTeaser\n  ariaLabel=\"Event teaser for \"\n  cta=\"Show event\"\n  date=\"12/30/2025\"\n  image={{\n    alt: 'A futuristic AI concept image',\n    src: 'https://picsum.photos/seed/flower/800/600'\n  }}\n  link={{\n    text: 'Show event',\n    url: '#'\n  }}\n  location=\"Berlin, Germany\"\n  teaserText=\"The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.\"\n  time=\"10:00\"\n  title=\"The Future of AI\"\n  url=\"https://example.com\"\n/>",
+    "args": {
+      "title": "The Future of AI",
+      "teaserText": "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.",
+      "date": "12/30/2025",
+      "time": "10:00",
+      "location": "Berlin, Germany",
+      "image": {
+        "src": "https://picsum.photos/seed/flower/800/600",
+        "alt": "A futuristic AI concept image"
+      },
+      "url": "https://example.com",
+      "cta": "Show event",
+      "ariaLabel": "Event teaser for ",
+      "link": {
+        "url": "#",
+        "text": "Show event"
+      }
+    },
+    "screenshot": "img/screenshots/event-event-list-teaser--default.png"
+  },
   {
     "id": "event-event-location--default",
     "group": "Event/ Event Location",

package/dist/components/split-weighted/index.js

@@ -5,8 +5,10 @@ import classnames from 'classnames';
 const SplitWeighted = ({ order, mainLayout, asideLayout, horizontalGutter = "default", verticalGutter = "default", main, aside, verticalAlign = "top", }) => (jsxs("div", { className: classnames("l-split-weighted", order?.desktop === "asideFirst" &&
         "l-split-weighted--desktop-aside-first", order?.mobile === "asideFirst" && "l-split-weighted--mobile-aside-first", horizontalGutter && `l-split-weighted--h-gutter-${horizontalGutter}`, verticalGutter && `l-split-weighted--v-gutter-${verticalGutter}`, verticalAlign && `l-split-weighted--align-${verticalAlign}`), children: [jsx("div", { className: classnames("l-split-weighted__main l-split-weighted__content", mainLayout?.gutter &&
                 `l-split-weighted__main--gutter-${mainLayout.gutter}`, mainLayout?.minWidth &&
-                `l-split-weighted__main--width-${mainLayout.minWidth}`), children: verticalAlign === "sticky" ? (jsx("div", { className: "l-split-weighted__sticky-container", children: main })) : (main) }), jsx("div", { className: classnames("l-split-weighted__aside l-split-weighted__content", asideLayout?.gutter &&
+                `l-split-weighted__main--width-${mainLayout.minWidth}`), children: jsx("div", { className: classnames("l-split-weighted__content-container", mainLayout?.gutter &&
+                    `l-split-weighted__content-container--gutter-${mainLayout.gutter}`), children: main }) }), jsx("div", { className: classnames("l-split-weighted__aside l-split-weighted__content", asideLayout?.gutter &&
                 `l-split-weighted__aside--gutter-${asideLayout.gutter || "large"}`, asideLayout?.minWidth &&
-                `l-split-weighted__aside--width-${asideLayout.minWidth}`), children: verticalAlign === "sticky" ? (jsx("div", { className: "l-split-weighted__sticky-container", children: aside })) : (aside) })] }));
+                `l-split-weighted__aside--width-${asideLayout.minWidth}`), children: jsx("div", { className: classnames("l-split-weighted__content-container", mainLayout?.gutter &&
+                    `l-split-weighted__content-container--gutter-${mainLayout.gutter}`), children: aside }) })] }));
 
 export { SplitWeighted };

package/dist/components/split-weighted/split-weighted.css

@@ -39,7 +39,7 @@
 .l-split-weighted--align-sticky {
   position: relative;
 }
-.l-split-weighted--align-sticky .l-split-weighted__sticky-container {
+.l-split-weighted--align-sticky .l-split-weighted__content-container {
   position: sticky;
   top: var(--dsa-split-weighted--sticky-margin, var(--ks-spacing-stack-xl));
   height: fit-content;
@@ -50,6 +50,12 @@
 .l-split-weighted--mobile-aside-first {
   flex-wrap: wrap-reverse;
 }
+.l-split-weighted--mobile-aside-first.l-split-weighted--align-top {
+  align-items: flex-end;
+}
+.l-split-weighted--mobile-aside-first.l-split-weighted--align-bottom {
+  align-items: flex-start;
+}
 .l-split-weighted--v-gutter-small {
   --dsa-split-weighted--v-gutter: var(--dsa-split-weighted--v-gutter_small, var(--ks-spacing-stack-l));
 }
@@ -72,6 +78,13 @@
   display: flex;
   flex-direction: column;
 }
+.l-split-weighted__content .l-split-weighted__content-container {
+  display: flex;
+  flex-direction: column;
+}
+.l-split-weighted__content .l-split-weighted__content-container--gutter-none {
+  gap: 0;
+}
 .l-split-weighted__content .c-button {
   width: fit-content;
 }
@@ -79,7 +92,6 @@
   flex-basis: var(--dsa-split-weighted__main--flex-basis_default, calc(var(--dsa-content--width_default) * 1));
   flex-grow: 1000;
   flex-shrink: 1;
-  gap: var(--dsa-split-weighted__main--gutter_default, var(--dsa-content--width_narrow));
 }
 .l-split-weighted__main--width-narrow {
   flex-basis: var(--dsa-split-weighted__main--flex-basis_narrow, var(--dsa-tile--width_large));
@@ -87,15 +99,15 @@
 .l-split-weighted__main--width-wide {
   flex-basis: var(--dsa-split-weighted__main--flex-basis_wide, var(--dsa-content--width_default));
 }
-.l-split-weighted__main--gutter-small {
+.l-split-weighted__main .l-split-weighted__content-container {
+  gap: var(--dsa-split-weighted__main--gutter_default, var(--dsa-content--width_narrow));
+}
+.l-split-weighted__main .l-split-weighted__content-container--gutter-small {
   gap: var(--dsa-split-weighted__main--gutter_small, var(--ks-spacing-stack-s));
 }
-.l-split-weighted__main--gutter-large {
+.l-split-weighted__main .l-split-weighted__content-container--gutter-large {
   gap: var(--dsa-split-weighted__main--gutter_large, var(--ks-spacing-stack-l));
 }
-.l-split-weighted__main--gutter-none {
-  gap: 0;
-}
 .l-split-weighted__aside {
   flex-basis: var(--dsa-split-weighted__aside--flex-basis_default, var(--dsa-tile--width_medium));
   flex-grow: 1;
@@ -107,12 +119,12 @@
 .l-split-weighted__aside--width-wide {
   flex-basis: var(--dsa-split-weighted__aside--flex-basis_wide, var(--dsa-tile--width_large));
 }
-.l-split-weighted__aside--gutter-small {
-  gap: var(--dsa-split-weighted__aside--gutter_small, var(--ks-spacing-stack-xs));
+.l-split-weighted__aside .l-split-weighted__content-container {
+  gap: var(--dsa-split-weighted__main--gutter_default, var(--dsa-content--width_narrow));
 }
-.l-split-weighted__aside--gutter-large {
-  gap: var(--dsa-split-weighted__aside--gutter_large, var(--ks-spacing-stack-m));
+.l-split-weighted__aside .l-split-weighted__content-container--gutter-small {
+  gap: var(--dsa-split-weighted__main--gutter_small, var(--ks-spacing-stack-s));
 }
-.l-split-weighted__aside--gutter-none {
-  gap: 0;
+.l-split-weighted__aside .l-split-weighted__content-container--gutter-large {
+  gap: var(--dsa-split-weighted__main--gutter_large, var(--ks-spacing-stack-l));
 }

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 11:19:17 GMT
+ * Generated on Thu, 03 Jul 2025 12:16:12 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 11:19:21 GMT
+ * Generated on Thu, 03 Jul 2025 12:16:18 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 11:19:19 GMT
+ * Generated on Thu, 03 Jul 2025 12:16:15 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 11:19:23 GMT
+ * Generated on Thu, 03 Jul 2025 12:16:20 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 11:19:15 GMT
+ * Generated on Thu, 03 Jul 2025 12:16:09 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 11:19:16 GMT
+ * Generated on Thu, 03 Jul 2025 12:16:09 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.6.71--canary.45.1780.0",
+  "version": "1.6.71--canary.45.1783.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {