@kickstartds/ds-agency-premium 1.6.68--canary.45.1716.0 → 1.6.68--canary.45.1723.0

package/dist/{BlogOverviewProps-9f207f1c.d.ts → BlogOverviewProps-7caa223c.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-7caa223c.js";
+import { SectionProps } from "./SectionProps-00ddee3a.js";
 import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
 import { CtaProps } from "./CtaProps-babe4ee6.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";

package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-c760fd2a.d.ts}

@@ -5,7 +5,7 @@
  */
 import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
 import { BlogAsideProps } from "./BlogAsideProps-c760fd2a.js";
-import { SectionProps } from "./SectionProps-7caa223c.js";
+import { SectionProps } from "./SectionProps-00ddee3a.js";
 import { CtaProps } from "./CtaProps-babe4ee6.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/EventDetailProps-42a7eebe.d.ts

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { EventLocationProps } from "./EventLocationProps-dd4aeaa9.js";
+import { EventLocationProps } from "./EventLocationProps-871bc198.js";
 /**
  * Title of the event
  */

package/dist/{EventLocationProps-dd4aeaa9.d.ts → EventLocationProps-871bc198.d.ts}

@@ -12,6 +12,10 @@ type Dates = EventAppointmentProps[];
  * Name of the event location
  */
 type LocationName = string;
+/**
+ * Spacious is recommended for 1-2 appointments, Compact for more than 2.
+ */
+type DisplayMode = "spacious" | "compact";
 /**
  * Address of the appointment
  */
@@ -30,7 +34,8 @@ type Links = {
 interface EventLocationProps {
     dates?: Dates;
     locationName?: LocationName;
+    displayMode?: DisplayMode;
     address?: Address;
     links?: Links;
 }
-export { Dates, LocationName, Address, Links, EventLocationProps };
+export { Dates, LocationName, DisplayMode, Address, Links, EventLocationProps };

package/dist/{PageProps-aa29c554.d.ts → PageProps-7caa223c.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-7caa223c.js";
+import { SectionProps } from "./SectionProps-00ddee3a.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render on the page

package/dist/{SectionProps-7caa223c.d.ts → SectionProps-00ddee3a.d.ts}

@@ -10,7 +10,7 @@ import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-40f6c7f5.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "./ImageStoryProps-00ddee3a.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

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

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-7caa223c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
 export type { BlogOverviewProps };

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

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

package/dist/components/event-appointment/event-appointment.css

@@ -11,7 +11,8 @@
   gap: var(--ks-spacing-inline-s);
   padding: var(--ks-spacing-inset-s);
   border: var(--ks-border-width-default) solid var(--ks-border-color-interface-interactive);
-  flex-grow: 0;
+  height: fit-content;
+  font: inherit;
 }
 .dsa-event-appointment:hover {
   border-color: var(--ks-border-color-interface-interactive-hover);
@@ -19,10 +20,16 @@
 .dsa-event-appointment__info {
   display: flex;
   gap: var(--ks-spacing-xxs);
-  font: var(--ks-font-interface-s);
   text-decoration: none;
   align-items: center;
 }
+.dsa-event-appointment__info--date {
+  font-weight: var(--ks-font-weight-semi-bold);
+  color: var(--ks-text-color-display);
+}
+.dsa-event-appointment__info--time {
+  font-weight: var(--ks-font-weight-regular);
+}
 .dsa-event-appointment__infos {
   flex-direction: column;
   display: flex;

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

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import { Icon } from '@kickstartds/base/lib/icon';
 
-const EventAppointmentContextDefault = forwardRef(({ date, time, label, url, newTab, ariaLabel }, ref) => (jsxs("a", { className: "dsa-event-appointment", target: newTab ? "_blank" : "_self", "aria-label": ariaLabel, href: url, ref: ref, children: [jsxs("span", { className: "dsa-event-appointment__infos", children: [date && (jsxs("span", { className: "dsa-event-appointment__info", children: [jsx(Icon, { className: "dsa-event-appointment__icon", "aria-hidden": true, icon: "date" }), date] })), time && (jsxs("span", { className: "dsa-event-appointment__info", children: [jsx(Icon, { className: "dsa-event-appointment__icon", "aria-hidden": true, icon: "time" }), time] }))] }), jsxs("span", { className: "dsa-event-appointment__label", children: [label, jsx(Icon, { icon: "chevron-right" })] })] })));
+const EventAppointmentContextDefault = forwardRef(({ date, time, label, url, newTab, ariaLabel }, ref) => (jsxs("a", { className: "dsa-event-appointment", target: newTab ? "_blank" : "_self", "aria-label": ariaLabel, href: url, ref: ref, children: [jsxs("span", { className: "dsa-event-appointment__infos", children: [date && (jsxs("span", { className: "dsa-event-appointment__info dsa-event-appointment__info--date", children: [jsx(Icon, { className: "dsa-event-appointment__icon", "aria-hidden": true, icon: "date" }), date] })), time && (jsxs("span", { className: "dsa-event-appointment__info dsa-event-appointment__info--time", children: [jsx(Icon, { className: "dsa-event-appointment__icon", "aria-hidden": true, icon: "time" }), time] }))] }), jsxs("span", { className: "dsa-event-appointment__label", children: [label, jsx(Icon, { icon: "chevron-right" })] })] })));
 const EventAppointmentContext = createContext(EventAppointmentContextDefault);
 const EventAppointment = forwardRef((props, ref) => {
     const Component = useContext(EventAppointmentContext);

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

@@ -114,6 +114,16 @@
               "Berlin Congress Center"
             ]
           },
+          "displayMode": {
+            "title": "Display Mode",
+            "description": "Spacious is recommended for 1-2 appointments, Compact for more than 2.",
+            "type": "string",
+            "enum": [
+              "spacious",
+              "compact"
+            ],
+            "default": "spacious"
+          },
           "address": {
             "title": "Address",
             "description": "Address of the appointment",

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

@@ -7,9 +7,10 @@ import { Gallery } from '../gallery/index.js';
 import { Downloads } from '../downloads/index.js';
 import { Headline } from '../headline/index.js';
 import 'react';
+import 'classnames';
 import '@kickstartds/base/lib/icon';
 import '../event-appointment/index.js';
-import 'classnames';
+import '@kickstartds/core/lib/container';
 import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';
@@ -21,7 +22,7 @@ import '@kickstartds/base/lib/picture';
 import 'markdown-to-jsx';
 import '@kickstartds/base/lib/headline';
 
-const EventDetail = ({ title, categories, locations, description, intro, images, downloads, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "narrow", spaceAfter: "none", children: jsx(EventHeader, { title: title, categories: categories, intro: intro }) }), locations && locations.length > 0 && (jsxs(Section, { width: "narrow", content: { mode: "list", gutter: "none" }, children: [jsx(Headline, { text: "Locations", level: "h3", style: "h3", className: "dsa-event__locations-headline" }), locations.map((appointment, index) => (jsx(EventLocation, { ...appointment }, index)))] })), description && (jsx(Section, { width: "narrow", spaceBefore: "none", children: jsx(RichText, { className: "dsa-event__description", text: description }) })), jsx(Section, { spaceBefore: "none", children: jsx(Gallery, { images: images, aspectRatio: "wide", layout: "smallTiles", lightbox: true }) }), downloads && downloads.length > 0 && (jsxs(Section, { width: "narrow", spaceBefore: "none", content: {
+const EventDetail = ({ title, categories, locations, description, intro, images, downloads, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "narrow", spaceAfter: "none", children: jsx(EventHeader, { title: title, categories: categories, intro: intro }) }), locations && locations.length > 0 && (jsxs(Section, { width: "default", content: { mode: "list", gutter: "none" }, children: [jsx(Headline, { text: "Locations", level: "h3", style: "h3", className: "dsa-event__locations-headline" }), locations.map((appointment, index) => (jsx(EventLocation, { ...appointment }, index)))] })), description && (jsx(Section, { width: "narrow", spaceBefore: "none", children: jsx(RichText, { className: "dsa-event__description", text: description }) })), jsx(Section, { spaceBefore: "none", children: jsx(Gallery, { images: images, aspectRatio: "wide", layout: "smallTiles", lightbox: true }) }), downloads && downloads.length > 0 && (jsxs(Section, { width: "narrow", spaceBefore: "none", content: {
                 mode: "list",
                 gutter: "none",
             }, spaceAfter: "none", children: [jsx(Headline, { text: "Downloads", level: "h3", style: "h3" }), jsx(Downloads, { downloads: downloads })] })), jsx(Section, { width: "narrow", buttons: [

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

@@ -0,0 +1,5 @@
+.dsa-event-latest {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-s);
+}

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

@@ -5,24 +5,6 @@
   "description": "Display a list of latest events, ordered chronologically",
   "type": "object",
   "properties": {
-    "headline": {
-      "title": "Headline",
-      "description": "Headline for the listing",
-      "type": "string",
-      "format": "markdown",
-      "examples": [
-        "Latest Events"
-      ]
-    },
-    "text": {
-      "title": "Text",
-      "description": "Additional text shown below the headline",
-      "type": "string",
-      "format": "markdown",
-      "examples": [
-        "Our next upcoming events"
-      ]
-    },
     "events": {
       "title": "Events",
       "description": "List of events to display",
@@ -148,35 +130,6 @@
         ]
       ]
     },
-    "link": {
-      "type": "object",
-      "title": "Link",
-      "description": "Link shown below the listing",
-      "properties": {
-        "url": {
-          "title": "URL",
-          "description": "The to link",
-          "type": "string",
-          "format": "uri",
-          "examples": [
-            "https://example.com"
-          ]
-        },
-        "text": {
-          "title": "Text",
-          "description": "The text for the link",
-          "type": "string",
-          "default": "Show all events",
-          "examples": [
-            "Show all events"
-          ]
-        }
-      },
-      "additionalProperties": false,
-      "required": [
-        "url"
-      ]
-    },
     "className": {
       "type": "string"
     },

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

@@ -5,20 +5,6 @@
   "description": "Display a list of latest events, ordered chronologically",
   "type": "object",
   "properties": {
-    "headline": {
-      "title": "Headline",
-      "description": "Headline for the listing",
-      "type": "string",
-      "format": "markdown",
-      "examples": ["Latest Events"]
-    },
-    "text": {
-      "title": "Text",
-      "description": "Additional text shown below the headline",
-      "type": "string",
-      "format": "markdown",
-      "examples": ["Our next upcoming events"]
-    },
     "events": {
       "title": "Events",
       "description": "List of events to display",
@@ -50,29 +36,7 @@
         ]
       ]
     },
-    "link": {
-      "type": "object",
-      "title": "Link",
-      "description": "Link shown below the listing",
-      "properties": {
-        "url": {
-          "title": "URL",
-          "description": "The to link",
-          "type": "string",
-          "format": "uri",
-          "examples": ["https://example.com"]
-        },
-        "text": {
-          "title": "Text",
-          "description": "The text for the link",
-          "type": "string",
-          "default": "Show all events",
-          "examples": ["Show all events"]
-        }
-      },
-      "additionalProperties": false,
-      "required": ["url"]
-    },
+
     "className": {
       "type": "string"
     }

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

@@ -7,14 +7,6 @@ import { HTMLAttributes } from "react";
  * and run json-schema-to-typescript to regenerate this file.
  */
 import { EventLatestTeaserProps } from "../../EventLatestTeaserProps-fc9d3281.js";
-/**
- * Headline for the listing
- */
-type Headline = string;
-/**
- * Additional text shown below the headline
- */
-type Text = string;
 /**
  * List of events to display
  *
@@ -24,31 +16,13 @@ type Events = [
     EventLatestTeaserProps,
     ...EventLatestTeaserProps[]
 ];
-/**
- * The to link
- */
-type URL = string;
-/**
- * The text for the link
- */
-type Text1 = string;
 /**
  * Display a list of latest events, ordered chronologically
  */
 interface EventLatestProps {
-    headline?: Headline;
-    text?: Text;
     events?: Events;
-    link?: Link;
     className?: string;
 }
-/**
- * Link shown below the listing
- */
-interface Link {
-    url: URL;
-    text?: Text1;
-}
 declare const EventLatestContextDefault: import("react").ForwardRefExoticComponent<EventLatestProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const EventLatestContext: import("react").Context<import("react").ForwardRefExoticComponent<EventLatestProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const EventLatest: import("react").ForwardRefExoticComponent<EventLatestProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,9 +1,13 @@
+import "./event-latest.css";
 import { jsx } from 'react/jsx-runtime';
-import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
+import { EventLatestTeaser } from '../event-latest-teaser/index.js';
+import 'classnames';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/core/lib/container';
 
-const EventLatestContextDefault = forwardRef(({ headline, text, link, events, className, ...rest }, ref) => {
-    return (jsx("div", { className: classnames(className, "dsa-event-latest"), ...rest, ref: ref, children: JSON.stringify({ headline, text, link, events, rest }) }));
+const EventLatestContextDefault = forwardRef(({ events }, ref) => {
+    return (jsx("div", { className: "dsa-event-latest", ref: ref, children: events.map((event, index) => (jsx(EventLatestTeaser, { ...event }, index))) }));
 });
 const EventLatestContext = createContext(EventLatestContextDefault);
 const EventLatest = forwardRef((props, ref) => {

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

@@ -1,33 +1,80 @@
+.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;
-  align-items: center;
-  gap: var(--ks-spacing-inline-m);
+  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__calendar {
+.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;
-  container-type: inline-size;
   background-color: var(--ks-background-color-primary);
   color: var(--ks-color-fg-inverted);
   border-radius: var(--ks-border-radius-control);
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
-  padding: var(--ks-spacing-inset-stretch-xs);
+  gap: 0.25em;
+  padding: var(--ks-spacing-inset-s);
   flex-shrink: 0;
-  width: calc(var(--ks-spacing-l) * 3);
-  height: calc(var(--ks-spacing-l) * 3);
+  font: var(--ks-font-display-l);
+  font-weight: var(--ks-font-weight-semi-bold);
 }
-.dsa-event-latest-teaser__content {
+@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;
 }
@@ -36,29 +83,27 @@
   font-weight: var(--ks-font-weight-semi-bold);
   color: var(--ks-text-color-display);
 }
-.dsa-event-latest-teaser__month, .dsa-event-latest-teaser__day {
-  font-weight: var(--ks-font-weight-semi-bold);
-  font-family: var(--ks-font-family-display);
-}
-.dsa-event-latest-teaser__day {
-  font-size: 50cqw;
-}
-.dsa-event-latest-teaser__month {
-  font-size: 25cqw;
-}
 .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: var(--ks-spacing-xxs);
+  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);
@@ -72,6 +117,7 @@
   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));

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

@@ -1,11 +1,12 @@
 import "./event-latest-teaser.css";
-import { jsxs, jsx } from 'react/jsx-runtime';
+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 (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__calendar", children: [jsx("span", { className: "dsa-event-latest-teaser__day", children: calendar.day }), jsx("span", { className: "dsa-event-latest-teaser__month", children: calendar.month })] }), jsxs("span", { className: "dsa-event-latest-teaser__content", 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" })] })] }));
+    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) => {

package/dist/components/event-location/event-location.css

@@ -1,3 +1,12 @@
+.l-container--event-location {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: event-location;
+}
+
+.l-container--event-location + .l-container--event-location {
+  margin-top: var(--ks-spacing-stack-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;
@@ -8,16 +17,30 @@
   background-color: var(--ks-background-color-accent);
   padding: var(--ks-spacing-inset-m);
   border-radius: var(--ks-border-radius-surface);
+  --dsa-event-location__info--flex-basis: 280px;
+  --dsa-event-location__appointments--min-width: 12em;
 }
-.dsa-event-location + .dsa-event-location {
-  margin-top: var(--ks-spacing-stack-m);
+.dsa-event-location--spacious {
+  --dsa-event-location__info--flex-basis: 50%;
+  --dsa-event-location__appointments--min-width: 20em;
 }
-.dsa-event-location__content {
+.dsa-event-location__info {
+  display: flex;
+  gap: var(--ks-spacing-inline-xs);
+  flex-shrink: 1;
+  flex-grow: 1;
+  flex-basis: var(--dsa-event-location__info--flex-basis, 280px);
+}
+.dsa-event-location__icon {
+  color: var(--ks-text-color-primary);
+  width: var(--dsa-event-location__icon--size);
+  height: var(--dsa-event-location__icon--size);
+  flex-shrink: 0;
+}
+.dsa-event-location__text {
   display: flex;
   flex-direction: column;
   gap: var(--ks-spacing-stack-s);
-  flex-grow: 0;
-  flex-grow: 0;
 }
 .dsa-event-location__name {
   font: var(--ks-font-interface-m);
@@ -31,35 +54,17 @@
   gap: var(--ks-spacing-xxs);
 }
 .dsa-event-location__link {
+  width: fit-content;
   font: var(--ks-font-interface-s);
 }
-.dsa-event-location__icon {
-  width: 2rem;
-  height: 2rem;
-}
-.dsa-event-location__row {
-  display: flex;
-  flex-direction: row;
-  gap: var(--ks-spacing-inline-m);
-  flex-wrap: wrap;
-  flex-shrink: 0;
-  flex-grow: 1;
-  flex-basis: 200px;
-}
-.dsa-event-location__icon {
-  color: var(--ks-text-color-primary);
-  width: var(--dsa-event-location__icon--size);
-  height: var(--dsa-event-location__icon--size);
-}
-.dsa-event-location__item {
-  display: flex;
-  gap: var(--ks-spacing-stack-xs);
-}
 .dsa-event-location__appointments {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  justify-content: flex-end;
   gap: var(--ks-spacing-stack-s);
-  flex-grow: 1;
+  flex-grow: 100;
+  flex-shrink: 0;
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--dsa-event-location__appointments--min-width, 12em), 100%), 1fr));
+  font: var(--ks-font-interface-s);
 }
 .dsa-event-location .l-container--rich-text {
   container-type: normal;

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

@@ -73,6 +73,16 @@
         "Berlin Congress Center"
       ]
     },
+    "displayMode": {
+      "title": "Display Mode",
+      "description": "Spacious is recommended for 1-2 appointments, Compact for more than 2.",
+      "type": "string",
+      "enum": [
+        "spacious",
+        "compact"
+      ],
+      "default": "spacious"
+    },
     "address": {
       "title": "Address",
       "description": "Address of the appointment",

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

@@ -18,6 +18,13 @@
       "type": "string",
       "examples": ["Berlin Congress Center"]
     },
+    "displayMode": {
+      "title": "Display Mode",
+      "description": "Spacious is recommended for 1-2 appointments, Compact for more than 2.",
+      "type": "string",
+      "enum": ["spacious", "compact"],
+      "default": "spacious"
+    },
     "address": {
       "title": "Address",
       "description": "Address of the appointment",

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { EventLocationProps } from "../../EventLocationProps-dd4aeaa9.js";
+import { EventLocationProps } from "../../EventLocationProps-871bc198.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>>;

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

@@ -1,11 +1,13 @@
 import "./event-location.css";
 import { forwardRef, createElement, createContext, useContext } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classnames from 'classnames';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { EventAppointment } from '../event-appointment/index.js';
+import { Container } from '@kickstartds/core/lib/container';
 
-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 EventLocationContextDefault = forwardRef(({ locationName, address, dates, links, displayMode, ...rest }, ref) => (jsx(Container, { name: "event-location", children: jsxs("div", { className: classnames("dsa-event-location", displayMode === "spacious" && `dsa-event-location--spacious`), ...rest, ref: ref, children: [address && (jsxs("div", { className: "dsa-event-location__info ", children: [jsx(Icon, { className: "dsa-event-location__icon", icon: "map-pin", "aria-hidden": true }), jsxs("div", { className: "dsa-event-location__text", 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);

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "../../ImageStoryProps-00ddee3a.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-6b3cff22.js";
-export * from "../../BlogOverviewProps-9f207f1c.js";
-export * from "../../PageProps-aa29c554.js";
+export * from "../../BlogPostProps-c760fd2a.js";
+export * from "../../BlogOverviewProps-7caa223c.js";
+export * from "../../PageProps-7caa223c.js";
 export { IconSprite, SettingsProps };
 export * from "../../EventDetailProps-42a7eebe.js";

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

@@ -1,4 +1,4 @@
-import { PageProps } from "../../PageProps-aa29c554.js";
+import { PageProps } from "../../PageProps-7caa223c.js";
 import { FC, PropsWithChildren } from "react";
 declare const Page: FC<PropsWithChildren<PageProps>>;
 export type { PageProps };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 25 Jun 2025 10:54:31 GMT
+ * Generated on Thu, 26 Jun 2025 10:55:32 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -767,7 +767,7 @@
     "id": "page-archetypes-event-detail--event-detail",
     "group": "Page Archetypes/Event Detail",
     "name": "EventDetail",
-    "code": "<EventDetail\n  button={{\n    label: 'See all Events',\n    url: '/#'\n  }}\n  categories={[\n    {\n      label: 'Conference'\n    },\n    {\n      label: 'Design Systems'\n    }\n  ]}\n  description=\"\nJoin us for a day of inspiring talks, hands-on workshops, and networking with design system experts from around the world.\n\n**Highlights:**\n- Keynotes from industry leaders\n- Practical sessions on design tokens, accessibility, and scaling systems\n- Evening networking event with food & drinks\n  \"\n  downloads={[\n    {\n      format: 'PDF',\n      name: 'Product Brochure',\n      previewImage: 'img/offset-image.png',\n      size: '2.5 MB',\n      url: 'img/offset-image.png'\n    },\n    {\n      format: 'PDF',\n      name: 'Company Brochure',\n      previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg',\n      size: '3.2 MB',\n      url: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg'\n    },\n    {\n      format: 'DOC',\n      name: 'User Guide',\n      size: '20 KB',\n      url: 'assets/user-guide.doc'\n    },\n    {\n      format: 'TXT',\n      name: 'Technical Specifications',\n      size: '12 KB',\n      url: 'assets/technical-specifications.txt'\n    }\n  ]}\n  images={[\n    {\n      alt: 'Alt text Image 1',\n      caption: 'Caption Image 1',\n      src: 'img/close-up-young-business-team-working.png'\n    },\n    {\n      alt: 'Alt text Image 2',\n      caption: 'Caption Image 2',\n      src: 'img/low-angle-tall-building-with-many-windows_23-2148230392.png'\n    },\n    {\n      alt: 'Alt text Image 3',\n      caption: 'Caption Image 3',\n      src: 'img/full-shot-different-people-working-together.png'\n    },\n    {\n      alt: 'Alt text Image 4',\n      caption: 'Caption Image 4',\n      src: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n    }\n  ]}\n  intro=\"A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.\"\n  locations={[\n    {\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      locationName: 'Berlin Congress Center'\n    },\n    {\n      address: 'Messeplatz 1<br />\\n      50679 Köln',\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      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://www.berlincongresscenter.com'\n        }\n      ],\n      locationName: 'Köln Messe'\n    }\n  ]}\n  title=\"Systemics Design Conference 2025\"\n/>",
+    "code": "<EventDetail\n  button={{\n    label: 'See all Events',\n    url: '/#'\n  }}\n  categories={[\n    {\n      label: 'Conference'\n    },\n    {\n      label: 'Design Systems'\n    }\n  ]}\n  description=\"\nJoin us for a day of inspiring talks, hands-on workshops, and networking with design system experts from around the world.\n\n**Highlights:**\n- Keynotes from industry leaders\n- Practical sessions on design tokens, accessibility, and scaling systems\n- Evening networking event with food & drinks\n  \"\n  downloads={[\n    {\n      format: 'PDF',\n      name: 'Product Brochure',\n      previewImage: 'img/offset-image.png',\n      size: '2.5 MB',\n      url: 'img/offset-image.png'\n    },\n    {\n      format: 'PDF',\n      name: 'Company Brochure',\n      previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg',\n      size: '3.2 MB',\n      url: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg'\n    },\n    {\n      format: 'DOC',\n      name: 'User Guide',\n      size: '20 KB',\n      url: 'assets/user-guide.doc'\n    },\n    {\n      format: 'TXT',\n      name: 'Technical Specifications',\n      size: '12 KB',\n      url: 'assets/technical-specifications.txt'\n    }\n  ]}\n  images={[\n    {\n      alt: 'Alt text Image 1',\n      caption: 'Caption Image 1',\n      src: 'img/close-up-young-business-team-working.png'\n    },\n    {\n      alt: 'Alt text Image 2',\n      caption: 'Caption Image 2',\n      src: 'img/low-angle-tall-building-with-many-windows_23-2148230392.png'\n    },\n    {\n      alt: 'Alt text Image 3',\n      caption: 'Caption Image 3',\n      src: 'img/full-shot-different-people-working-together.png'\n    },\n    {\n      alt: 'Alt text Image 4',\n      caption: 'Caption Image 4',\n      src: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n    }\n  ]}\n  intro=\"A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.\"\n  locations={[\n    {\n      address: 'Messeplatz 1<br />\\n      50679 Köln',\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          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      displayMode: 'compact',\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      locationName: 'Köln Messe'\n    },\n    {\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      displayMode: 'compact',\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://www.berlincongresscenter.com'\n        }\n      ],\n      locationName: 'Berlin Congress Center (BCC) Redaktion & Event GmbH & Co. KG'\n    }\n  ]}\n  title=\"Systemics Design Conference 2025\"\n/>",
     "args": {
       "categories": [
         {
@@ -788,6 +788,14 @@
               "newTab": true,
               "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
             },
+            {
+              "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"
+            },
             {
               "date": "2025-09-18",
               "time": "09:00 – 17:00",
@@ -797,8 +805,9 @@
               "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
             }
           ],
-          "locationName": "Berlin Congress Center",
-          "address": "Alexanderplatz 1<br />\n      10178 Berlin",
+          "locationName": "Köln Messe",
+          "displayMode": "compact",
+          "address": "Messeplatz 1<br />\n      50679 Köln",
           "links": [
             {
               "newTab": true,
@@ -809,6 +818,14 @@
         },
         {
           "dates": [
+            {
+              "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"
+            },
             {
               "date": "2025-09-18",
               "time": "09:00 – 17:00",
@@ -818,8 +835,9 @@
               "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
             }
           ],
-          "locationName": "Köln Messe",
-          "address": "Messeplatz 1<br />\n      50679 Köln",
+          "locationName": "Berlin Congress Center (BCC) Redaktion & Event GmbH & Co. KG",
+          "displayMode": "compact",
+          "address": "Alexanderplatz 1<br />\n      10178 Berlin",
           "links": [
             {
               "newTab": true,
@@ -1581,50 +1599,58 @@
     "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": "01/15/2023",
+          "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": "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"
   },
@@ -1632,7 +1658,7 @@
     "id": "event-event-location--default",
     "group": "Event/ Event Location",
     "name": "Default",
-    "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/>",
+    "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  displayMode=\"spacious\"\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": [
         {
@@ -1653,6 +1679,7 @@
         }
       ],
       "locationName": "Berlin Congress Center",
+      "displayMode": "spacious",
       "address": "Alexanderplatz 1<br />\n  10178 Berlin",
       "links": [
         {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-7caa223c.js";
+import { SectionProps } from "../../SectionProps-00ddee3a.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));

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 25 Jun 2025 10:54:34 GMT
+ * Generated on Thu, 26 Jun 2025 10:55:35 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 Wed, 25 Jun 2025 10:54:38 GMT
+ * Generated on Thu, 26 Jun 2025 10:55:39 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 Wed, 25 Jun 2025 10:54:36 GMT
+ * Generated on Thu, 26 Jun 2025 10:55:37 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 Wed, 25 Jun 2025 10:54:40 GMT
+ * Generated on Thu, 26 Jun 2025 10:55:41 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 Wed, 25 Jun 2025 10:54:31 GMT
+ * Generated on Thu, 26 Jun 2025 10:55:32 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 25 Jun 2025 10:54:31 GMT
+ * Generated on Thu, 26 Jun 2025 10:55:33 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

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