@kickstartds/ds-agency-premium 1.6.68--canary.45.1713.0 → 1.6.68--canary.45.1719.0

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

@@ -0,0 +1,128 @@
+.l-container--event-latest-teaser {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: event-latest-teaser;
+}
+
+.dsa-event-latest-teaser {
+  --g-link--border-radius: var(--ks-border-radius-surface);
+  display: flex;
+  gap: var(--ks-spacing-inline-s);
+  padding: var(--ks-spacing-inset-s);
+  flex-direction: column;
+  border: var(--ks-border-width-default) solid var(--ks-border-color-card-interactive);
+}
+@container event-latest-teaser (min-width: 640px) {
+  .dsa-event-latest-teaser {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--ks-spacing-inline-m);
+  }
+}
+.dsa-event-latest-teaser:hover {
+  border-color: var(--ks-border-color-card-interactive-hover);
+}
+.dsa-event-latest-teaser__content {
+  display: flex;
+  gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
+  flex-grow: 1;
+  min-width: 0;
+  flex-direction: column;
+}
+@container event-latest-teaser (min-width: 640px) {
+  .dsa-event-latest-teaser__content {
+    flex-direction: row;
+  }
+}
+.dsa-event-latest-teaser .dsa-event-latest-teaser-calendar {
+  align-self: start;
+  position: relative;
+  background-color: var(--ks-background-color-primary);
+  color: var(--ks-color-fg-inverted);
+  border-radius: var(--ks-border-radius-control);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 0.25em;
+  padding: var(--ks-spacing-inset-s);
+  flex-shrink: 0;
+  font: var(--ks-font-display-l);
+  font-weight: var(--ks-font-weight-semi-bold);
+}
+@container event-latest-teaser (min-width: 640px) {
+  .dsa-event-latest-teaser .dsa-event-latest-teaser-calendar {
+    container-type: inline-size;
+    padding: var(--ks-spacing-xxs);
+    flex-direction: column;
+    align-items: center;
+    padding: var(--ks-spacing-inset-stretch-xs);
+    gap: var(--ks-spacing-xxs);
+    width: calc(var(--ks-spacing-l) * 3);
+    height: calc(var(--ks-spacing-l) * 3);
+  }
+  .dsa-event-latest-teaser .dsa-event-latest-teaser-calendar__month, .dsa-event-latest-teaser .dsa-event-latest-teaser-calendar__day {
+    font-weight: var(--ks-font-weight-semi-bold) !important;
+    font-family: var(--ks-font-family-display);
+    line-height: 1;
+  }
+  .dsa-event-latest-teaser .dsa-event-latest-teaser-calendar__day {
+    font-size: 50cqw;
+  }
+  .dsa-event-latest-teaser .dsa-event-latest-teaser-calendar__month {
+    font-size: 25cqw;
+  }
+}
+.dsa-event-latest-teaser__text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--ks-spacing-stack-xs);
+  flex-grow: 1;
+}
+.dsa-event-latest-teaser__title {
+  font: var(--ks-font-display-m);
+  font-weight: var(--ks-font-weight-semi-bold);
+  color: var(--ks-text-color-display);
+}
+.dsa-event-latest-teaser__infos {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ks-spacing-xxs) var(--ks-spacing-inline-s);
+  flex-direction: column;
+  align-items: flex-start;
+}
+@container event-latest-teaser (min-width: 640px) {
+  .dsa-event-latest-teaser__infos {
+    flex-direction: row;
+  }
+}
+.dsa-event-latest-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-latest-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-latest-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;
+  margin-left: auto;
+}
+.dsa-event-latest-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-teaser/event-teaser.schema.dereffed.json → event-latest-teaser/event-latest-teaser.schema.dereffed.json}

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/event-teaser.schema.json",
-  "title": "Event Teaser",
+  "$id": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json",
+  "title": "Event Latest Teaser",
   "description": "Display an event teaser with date, title and location",
   "type": "object",
   "properties": {
@@ -85,7 +85,7 @@
       "type": "string"
     },
     "type": {
-      "const": "event-teaser"
+      "const": "event-latest-teaser"
     }
   },
   "additionalProperties": false,

package/dist/components/{event-teaser/event-teaser.schema.json → event-latest-teaser/event-latest-teaser.schema.json}

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/event-teaser.schema.json",
-  "title": "Event Teaser",
+  "$id": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json",
+  "title": "Event Latest Teaser",
   "description": "Display an event teaser with date, title and location",
   "type": "object",
   "properties": {

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
+import { EventLatestTeaserProps } from "../../EventLatestTeaserProps-fc9d3281.js";
+declare const EventLatestTeaserContextDefault: import("react").ForwardRefExoticComponent<EventLatestTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const EventLatestTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<EventLatestTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>>;
+declare const EventLatestTeaser: import("react").ForwardRefExoticComponent<EventLatestTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+export type { EventLatestTeaserProps };
+export { EventLatestTeaserContextDefault, EventLatestTeaserContext, EventLatestTeaser };

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

@@ -0,0 +1,18 @@
+import "./event-latest-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';
+
+const EventLatestTeaserContextDefault = forwardRef(({ date, title, cta, calendar, url, location, ariaLabel, className, ...rest }, ref) => {
+    return (jsx(Container, { name: "event-latest-teaser", children: jsxs("a", { className: classnames(className, "dsa-event-latest-teaser"), ...rest, href: url, ref: ref, "aria-label": ariaLabel, children: [jsxs("span", { className: "dsa-event-latest-teaser__content", children: [jsxs("span", { className: "dsa-event-latest-teaser-calendar", children: [jsx("span", { className: "dsa-event-latest-teaser-calendar__day", children: calendar.day }), jsx("span", { className: "dsa-event-latest-teaser-calendar__month", children: calendar.month })] }), jsxs("span", { className: "dsa-event-latest-teaser__text", children: [jsx("span", { className: "dsa-event-latest-teaser__title", children: title }), jsxs("span", { className: "dsa-event-latest-teaser__infos", children: [jsxs("span", { className: "dsa-event-latest-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-latest-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), location] })] })] })] }), jsxs("span", { className: "dsa-event-latest-teaser__cta", children: [jsx("span", { children: cta }), jsx(Icon, { "aria-hidden": true, icon: "chevron-right" })] })] }) }));
+});
+const EventLatestTeaserContext = createContext(EventLatestTeaserContextDefault);
+const EventLatestTeaser = forwardRef((props, ref) => {
+    const Component = useContext(EventLatestTeaserContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+EventLatestTeaser.displayName = "EventLatestTeaser";
+
+export { EventLatestTeaser, EventLatestTeaserContext, EventLatestTeaserContextDefault };

package/dist/components/{event-list-location/event-list-location.css → event-location/event-location.css}

@@ -1,5 +1,5 @@
-.dsa-event-list-location {
-  --dsa-event-list-location__icon--size: calc(var(--ks-font-size-copy-m) * var(--ks-line-height-copy-m));
+.dsa-event-location {
+  --dsa-event-location__icon--size: calc(var(--ks-font-size-copy-m) * var(--ks-line-height-copy-m));
   flex-wrap: wrap;
   display: flex;
   flex-direction: row;
@@ -9,35 +9,35 @@
   padding: var(--ks-spacing-inset-m);
   border-radius: var(--ks-border-radius-surface);
 }
-.dsa-event-list-location + .dsa-event-list-location {
+.dsa-event-location + .dsa-event-location {
   margin-top: var(--ks-spacing-stack-m);
 }
-.dsa-event-list-location__content {
+.dsa-event-location__content {
   display: flex;
   flex-direction: column;
   gap: var(--ks-spacing-stack-s);
   flex-grow: 0;
   flex-grow: 0;
 }
-.dsa-event-list-location__name {
+.dsa-event-location__name {
   font: var(--ks-font-interface-m);
   color: var(--dsa-topic--color);
   font-weight: var(--dsa-topic--font-weight);
 }
-.dsa-event-list-location__links {
+.dsa-event-location__links {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   gap: var(--ks-spacing-xxs);
 }
-.dsa-event-list-location__link {
+.dsa-event-location__link {
   font: var(--ks-font-interface-s);
 }
-.dsa-event-list-location__icon {
+.dsa-event-location__icon {
   width: 2rem;
   height: 2rem;
 }
-.dsa-event-list-location__row {
+.dsa-event-location__row {
   display: flex;
   flex-direction: row;
   gap: var(--ks-spacing-inline-m);
@@ -46,21 +46,21 @@
   flex-grow: 1;
   flex-basis: 200px;
 }
-.dsa-event-list-location__icon {
+.dsa-event-location__icon {
   color: var(--ks-text-color-primary);
-  width: var(--dsa-event-list-location__icon--size);
-  height: var(--dsa-event-list-location__icon--size);
+  width: var(--dsa-event-location__icon--size);
+  height: var(--dsa-event-location__icon--size);
 }
-.dsa-event-list-location__item {
+.dsa-event-location__item {
   display: flex;
-  gap: var(--ks-spacing-stack-xs);
+  gap: var(--ks-spacing-inline-xs);
 }
-.dsa-event-list-location__appointments {
+.dsa-event-location__appointments {
   display: flex;
   flex-direction: column;
   gap: var(--ks-spacing-stack-s);
   flex-grow: 1;
 }
-.dsa-event-list-location .l-container--rich-text {
+.dsa-event-location .l-container--rich-text {
   container-type: normal;
 }

package/dist/components/{event-list-location/event-list-location.schema.dereffed.json → event-location/event-location.schema.dereffed.json}

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/event-list-location.schema.json",
-  "title": "Event List Location",
+  "$id": "http://schema.mydesignsystem.com/event-location.schema.json",
+  "title": "Event Location",
   "type": "object",
   "properties": {
     "dates": {
@@ -10,8 +10,8 @@
       "type": "array",
       "items": {
         "$schema": "http://json-schema.org/draft-07/schema#",
-        "$id": "http://schema.mydesignsystem.com/event-list-appointment.schema.json",
-        "title": "Event List Appointment",
+        "$id": "http://schema.mydesignsystem.com/event-appointment.schema.json",
+        "title": "Event Appointment",
         "type": "object",
         "properties": {
           "date": {
@@ -59,7 +59,7 @@
             "default": "Event Appointment"
           },
           "type": {
-            "const": "event-list-appointment"
+            "const": "event-appointment"
           }
         },
         "additionalProperties": false
@@ -109,7 +109,7 @@
       }
     },
     "type": {
-      "const": "event-list-location"
+      "const": "event-location"
     }
   },
   "additionalProperties": false

package/dist/components/{event-list-location/event-list-location.schema.json → event-location/event-location.schema.json}

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/event-list-location.schema.json",
-  "title": "Event List Location",
+  "$id": "http://schema.mydesignsystem.com/event-location.schema.json",
+  "title": "Event Location",
   "type": "object",
   "properties": {
     "dates": {
@@ -9,7 +9,7 @@
       "description": "List of dates of the event",
       "type": "array",
       "items": {
-        "$ref": "http://schema.mydesignsystem.com/event-list-appointment.schema.json"
+        "$ref": "http://schema.mydesignsystem.com/event-appointment.schema.json"
       }
     },
     "locationName": {

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { EventLocationProps } from "../../EventLocationProps-dd4aeaa9.js";
+declare const EventLocationContextDefault: import("react").ForwardRefExoticComponent<EventLocationProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const EventLocationContext: import("react").Context<import("react").ForwardRefExoticComponent<EventLocationProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const EventLocation: import("react").ForwardRefExoticComponent<EventLocationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { EventLocationProps };
+export { EventLocationContextDefault, EventLocationContext, EventLocation };

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

@@ -0,0 +1,16 @@
+import "./event-location.css";
+import { forwardRef, createElement, createContext, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { EventAppointment } from '../event-appointment/index.js';
+
+const EventLocationContextDefault = forwardRef(({ locationName, address, dates, links, ...rest }, ref) => (jsxs("div", { className: "dsa-event-location", ...rest, ref: ref, children: [address && (jsx("div", { className: "dsa-event-location__row", children: jsxs("div", { className: "dsa-event-location__item ", children: [jsx(Icon, { className: "dsa-event-location__icon", icon: "map-pin", "aria-hidden": true }), jsxs("div", { className: "dsa-event-location__content", children: [jsx("span", { className: "sr-only", children: "Address:" }), jsxs("address", { className: "dsa-event-location__address", children: [locationName && (jsx("span", { className: "dsa-event-location__name", children: locationName })), address && jsx(RichText, { text: address })] }), links && links.length > 0 && (jsx("div", { className: "dsa-event-location__links", children: links.map((link, index) => (jsx("a", { href: link.url, target: link.newTab ? "_blank" : "_self", className: "dsa-event-location__link", children: link.label }, index))) }))] })] }) })), dates && dates.length > 0 && (jsxs("div", { className: "dsa-event-location__appointments", children: [jsx("span", { className: "sr-only", children: "Appointments:" }), dates.map((item, index) => (createElement(EventAppointment, { ...item, key: index })))] }))] })));
+const EventLocationContext = createContext(EventLocationContextDefault);
+const EventLocation = forwardRef((props, ref) => {
+    const Component = useContext(EventLocationContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+EventLocation.displayName = "EventLocation";
+
+export { EventLocation, EventLocationContext, EventLocationContextDefault };

package/dist/components/image-story/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-00ddee3a.js";
+import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
 declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 25 Jun 2025 10:45:02 GMT
+ * Generated on Wed, 25 Jun 2025 14:11:24 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -1520,6 +1520,21 @@
     },
     "screenshot": "img/screenshots/industry-downloads--mixed.png"
   },
+  {
+    "id": "event-event-appointment--default",
+    "group": "Event/ Event Appointment",
+    "name": "Default",
+    "code": "<EventAppointment\n  ariaLabel=\"Register for the event on 18th September 2025 from 09:00 to 17:00\"\n  date=\"2025-09-18\"\n  label=\"Register\"\n  newTab\n  time=\"09:00 – 17:00\"\n  url=\"#\"\n/>",
+    "args": {
+      "date": "2025-09-18",
+      "time": "09:00 – 17:00",
+      "label": "Register",
+      "url": "#",
+      "newTab": true,
+      "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
+    },
+    "screenshot": "img/screenshots/event-event-appointment--default.png"
+  },
   {
     "id": "event-event-header--default",
     "group": "Event/ Event Header",
@@ -1539,77 +1554,93 @@
     },
     "screenshot": "img/screenshots/event-event-header--default.png"
   },
+  {
+    "id": "event-event-latest-teaser--default",
+    "group": "Event/ Event Latest Teaser",
+    "name": "Default",
+    "code": "<EventLatestTeaser\n  ariaLabel=\"Event teaser for \"\n  calendar={{\n    day: '30',\n    month: 'Dec'\n  }}\n  cta=\"Show event\"\n  date=\"12/30/2025\"\n  link={{\n    text: 'Show event',\n    url: '#'\n  }}\n  location=\"Berlin, Germany\"\n  title=\"The Future of AI\"\n  url=\"https://example.com\"\n/>",
+    "args": {
+      "date": "12/30/2025",
+      "calendar": {
+        "month": "Dec",
+        "day": "30"
+      },
+      "title": "The Future of AI",
+      "location": "Berlin, Germany",
+      "url": "https://example.com",
+      "cta": "Show event",
+      "ariaLabel": "Event teaser for ",
+      "link": {
+        "url": "#",
+        "text": "Show event"
+      }
+    },
+    "screenshot": "img/screenshots/event-event-latest-teaser--default.png"
+  },
   {
     "id": "event-event-latest--default",
     "group": "Event/ Event Latest",
     "name": "Default",
-    "code": "<EventLatest\n  events={[\n    {\n      ariaLabel: 'Event teaser for ',\n      calendar: {\n        day: '30',\n        month: 'Dec'\n      },\n      cta: 'Show event',\n      date: '12/30/2022',\n      headline: 'Event 1',\n      link: {\n        text: 'Show event 1',\n        url: 'https://example.com/event1'\n      },\n      location: 'Location 1',\n      title: 'This is a event teaser title',\n      url: 'https://example.com'\n    },\n    {\n      ariaLabel: 'Event teaser for ',\n      calendar: {\n        day: '30',\n        month: 'Dec'\n      },\n      cta: 'Show event',\n      date: '01/15/2023',\n      headline: 'Event 2',\n      link: {\n        text: 'Show event 2',\n        url: 'https://example.com/event2'\n      },\n      location: 'Location 2',\n      title: 'This is a event teaser title',\n      url: 'https://example.com'\n    }\n  ]}\n  headline=\"Latest events\"\n  link={{\n    text: 'Show event',\n    url: '#'\n  }}\n  text=\"Check out our upcoming events and mark your calendar!\"\n/>",
+    "code": "<EventLatest\n  events={[\n    {\n      ariaLabel: 'Systemics Design Conference on September 18, 2025 in Berlin',\n      calendar: {\n        day: '18',\n        month: 'Sep'\n      },\n      cta: 'View event',\n      date: '09/18/2025',\n      location: 'Berlin Congress Center, Berlin',\n      title: 'Systemics Design Conference',\n      url: 'https://systemics.events/conference-berlin'\n    },\n    {\n      ariaLabel: 'UX Leadership Summit on October 5, 2025 in Cologne',\n      calendar: {\n        day: '05',\n        month: 'Oct'\n      },\n      cta: 'View event',\n      date: '10/05/2025',\n      location: 'Köln Messe, Cologne',\n      title: 'UX Leadership Summit',\n      url: 'https://uxsummit.de/koeln-2025'\n    },\n    {\n      ariaLabel: 'Frontend Future Days on November 12, 2025 in Hamburg',\n      calendar: {\n        day: '12',\n        month: 'Nov'\n      },\n      cta: 'View event',\n      date: '11/12/2025',\n      location: 'Hamburg Digital Campus, Hamburg',\n      title: 'Frontend Future Days',\n      url: 'https://frontendfuture.de/hamburg'\n    },\n    {\n      ariaLabel: 'Accessibility in Practice Workshop on December 1, 2025 online',\n      calendar: {\n        day: '01',\n        month: 'Dec'\n      },\n      cta: 'View event',\n      date: '12/01/2025',\n      location: 'Online',\n      title: 'Accessibility in Practice Workshop',\n      url: 'https://a11yworkshop.com/dec-2025'\n    }\n  ]}\n />",
     "args": {
-      "headline": "Latest events",
-      "text": "Check out our upcoming events and mark your calendar!",
       "events": [
         {
-          "date": "12/30/2022",
+          "date": "09/18/2025",
           "calendar": {
-            "month": "Dec",
-            "day": "30"
+            "month": "Sep",
+            "day": "18"
           },
-          "title": "This is a event teaser title",
-          "location": "Location 1",
-          "url": "https://example.com",
-          "cta": "Show event",
-          "ariaLabel": "Event teaser for ",
-          "headline": "Event 1",
-          "link": {
-            "url": "https://example.com/event1",
-            "text": "Show event 1"
-          }
+          "title": "Systemics Design Conference",
+          "location": "Berlin Congress Center, Berlin",
+          "url": "https://systemics.events/conference-berlin",
+          "cta": "View event",
+          "ariaLabel": "Systemics Design Conference on September 18, 2025 in Berlin"
+        },
+        {
+          "date": "10/05/2025",
+          "calendar": {
+            "month": "Oct",
+            "day": "05"
+          },
+          "title": "UX Leadership Summit",
+          "location": "Köln Messe, Cologne",
+          "url": "https://uxsummit.de/koeln-2025",
+          "cta": "View event",
+          "ariaLabel": "UX Leadership Summit on October 5, 2025 in Cologne"
+        },
+        {
+          "date": "11/12/2025",
+          "calendar": {
+            "month": "Nov",
+            "day": "12"
+          },
+          "title": "Frontend Future Days",
+          "location": "Hamburg Digital Campus, Hamburg",
+          "url": "https://frontendfuture.de/hamburg",
+          "cta": "View event",
+          "ariaLabel": "Frontend Future Days on November 12, 2025 in Hamburg"
         },
         {
-          "date": "01/15/2023",
+          "date": "12/01/2025",
           "calendar": {
             "month": "Dec",
-            "day": "30"
+            "day": "01"
           },
-          "title": "This is a event teaser title",
-          "location": "Location 2",
-          "url": "https://example.com",
-          "cta": "Show event",
-          "ariaLabel": "Event teaser for ",
-          "headline": "Event 2",
-          "link": {
-            "url": "https://example.com/event2",
-            "text": "Show event 2"
-          }
+          "title": "Accessibility in Practice Workshop",
+          "location": "Online",
+          "url": "https://a11yworkshop.com/dec-2025",
+          "cta": "View event",
+          "ariaLabel": "Accessibility in Practice Workshop on December 1, 2025 online"
         }
-      ],
-      "link": {
-        "url": "#",
-        "text": "Show event"
-      }
+      ]
     },
     "screenshot": "img/screenshots/event-event-latest--default.png"
   },
   {
-    "id": "event-event-list-appointment--default",
-    "group": "Event/ Event List Appointment",
-    "name": "Default",
-    "code": "<EventListAppointment\n  ariaLabel=\"Register for the event on 18th September 2025 from 09:00 to 17:00\"\n  date=\"2025-09-18\"\n  label=\"Register\"\n  newTab\n  time=\"09:00 – 17:00\"\n  url=\"#\"\n/>",
-    "args": {
-      "date": "2025-09-18",
-      "time": "09:00 – 17:00",
-      "label": "Register",
-      "url": "#",
-      "newTab": true,
-      "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
-    },
-    "screenshot": "img/screenshots/event-event-list-appointment--default.png"
-  },
-  {
-    "id": "event-event-list-location--default",
-    "group": "Event/ Event List Location",
+    "id": "event-event-location--default",
+    "group": "Event/ Event Location",
     "name": "Default",
-    "code": "<EventListLocation\n  address=\"Alexanderplatz 1<br />\n  10178 Berlin\"\n  dates={[\n    {\n      ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n      date: '2025-09-18',\n      label: 'Register',\n      newTab: true,\n      time: '09:00 – 17:00',\n      url: '#'\n    },\n    {\n      ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n      date: '2025-09-18',\n      label: 'Register',\n      newTab: true,\n      time: '09:00 – 17:00',\n      url: '#'\n    }\n  ]}\n  links={[\n    {\n      label: 'Open in Google Maps',\n      newTab: true,\n      url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n    },\n    {\n      label: 'Location Website',\n      newTab: true,\n      url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n    }\n  ]}\n  locationName=\"Berlin Congress Center\"\n/>",
+    "code": "<EventLocation\n  address=\"Alexanderplatz 1<br />\n  10178 Berlin\"\n  dates={[\n    {\n      ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n      date: '2025-09-18',\n      label: 'Register',\n      newTab: true,\n      time: '09:00 – 17:00',\n      url: '#'\n    },\n    {\n      ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n      date: '2025-09-18',\n      label: 'Register',\n      newTab: true,\n      time: '09:00 – 17:00',\n      url: '#'\n    }\n  ]}\n  links={[\n    {\n      label: 'Open in Google Maps',\n      newTab: true,\n      url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n    },\n    {\n      label: 'Location Website',\n      newTab: true,\n      url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n    }\n  ]}\n  locationName=\"Berlin Congress Center\"\n/>",
     "args": {
       "dates": [
         {
@@ -1644,30 +1675,7 @@
         }
       ]
     },
-    "screenshot": "img/screenshots/event-event-list-location--default.png"
-  },
-  {
-    "id": "event-event-teaser--default",
-    "group": "Event/ Event Teaser",
-    "name": "Default",
-    "code": "<EventTeaser\n  ariaLabel=\"Event teaser for \"\n  calendar={{\n    day: '30',\n    month: 'Dec'\n  }}\n  cta=\"Show event\"\n  date=\"12/30/2025\"\n  link={{\n    text: 'Show event',\n    url: '#'\n  }}\n  location=\"Berlin, Germany\"\n  title=\"The Future of AI\"\n  url=\"https://example.com\"\n/>",
-    "args": {
-      "date": "12/30/2025",
-      "calendar": {
-        "month": "Dec",
-        "day": "30"
-      },
-      "title": "The Future of AI",
-      "location": "Berlin, Germany",
-      "url": "https://example.com",
-      "cta": "Show event",
-      "ariaLabel": "Event teaser for ",
-      "link": {
-        "url": "#",
-        "text": "Show event"
-      }
-    },
-    "screenshot": "img/screenshots/event-event-teaser--default.png"
+    "screenshot": "img/screenshots/event-event-location--default.png"
   },
   {
     "id": "components-faq--dropdown-list",

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-00ddee3a.js";
+import { SectionProps } from "../../SectionProps-7caa223c.js";
 declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/global.css

@@ -347,7 +347,7 @@ h3 {
 [ks-inverted=false],
 [ks-inverted=true] {
   --spacing-base: 18px;
-  --spacing-shrink-factor: 0.675;
+  --spacing-shrink-factor: 0.65;
   --spacing-grow-factor: 1.275;
   --spacing-bp-factor: 1.0135;
   --spacing-xxs-bp-factor: calc(1 * var(--spacing-bp-factor));