@kickstartds/ds-agency-premium 1.6.68--canary.45.1671.0 → 1.6.68--canary.45.1675.0

package/dist/{EventProps-feae5a7c.d.ts → EventDetailProps-ba701353.d.ts}

@@ -3,6 +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 { EventListAppointmentProps } from "./EventListAppointmentProps-d438cdc6.js";
 /**
  * Title of the event
  */
@@ -21,43 +22,10 @@ type Categories = {
  * Short intro text for the event
  */
 type Intro = string;
-/**
- * Date of the appointment
- */
-type Date = string;
-/**
- * Time of the appointment
- */
-type Time = string;
-/**
- * Label for the call to action button
- */
-type CTALabel = string;
-/**
- * List of dates of the event
- */
-type Dates = {
-    date?: Date;
-    time?: Time;
-    label?: CTALabel;
-    [k: string]: unknown;
-}[];
-/**
- * Address of the appointment
- */
-type Address = string;
-/**
- * Link to the location on a map
- */
-type MapsLink = string;
 /**
  * List of attendable appointments
  */
-type Appointments = {
-    dates?: Dates;
-    address: Address;
-    mapsLink?: MapsLink;
-}[];
+type Appointments = EventListAppointmentProps[];
 /**
  * Description of the event
  */
@@ -77,7 +45,7 @@ type Images = {
     src?: ImageSource;
     alt?: AltText;
 }[];
-interface EventProps {
+interface EventDetailProps {
     title?: EventTitle;
     categories?: Categories;
     intro?: Intro;
@@ -85,4 +53,4 @@ interface EventProps {
     description?: Description;
     images?: Images;
 }
-export { EventTitle, Label, Categories, Intro, Date, Time, CTALabel, Dates, Address, MapsLink, Appointments, Description, ImageSource, AltText, Images, EventProps };
+export { EventTitle, Label, Categories, Intro, Appointments, Description, ImageSource, AltText, Images, EventDetailProps };

package/dist/EventListAppointmentProps-d438cdc6.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+/**
+ * Date of the appointment
+ */
+type Date = string;
+/**
+ * Time of the appointment
+ */
+type Time = string;
+/**
+ * Label for the call to action button
+ */
+type CTALabel = string;
+interface EventListAppointmentProps {
+    date?: Date;
+    time?: Time;
+    label?: CTALabel;
+}
+export { Date, Time, CTALabel, EventListAppointmentProps };

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

@@ -0,0 +1,19 @@
+.dsa-event {
+  max-width: var(--dsa-content--width_narrow);
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-m);
+}
+.dsa-event__categories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-bottom: var(--ks-spacing-stack-xs);
+}
+.dsa-event__list {
+  display: flex;
+  gap: var(--ks-spacing-stack-m);
+  flex-direction: column;
+  padding: var(--ks-spacing-inset-m) 0;
+}

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

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/event.schema.json",
-  "title": "Event",
+  "$id": "http://schema.mydesignsystem.com/cms/event-detail.schema.json",
+  "title": "Event Detail",
   "type": "object",
   "properties": {
     "title": {
@@ -35,50 +35,31 @@
       "description": "List of attendable appointments",
       "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",
         "type": "object",
         "properties": {
-          "dates": {
-            "title": "Dates",
-            "description": "List of dates of the event",
-            "type": "array",
-            "items": {
-              "properties": {
-                "date": {
-                  "title": "Date",
-                  "description": "Date of the appointment",
-                  "type": "string",
-                  "format": "date"
-                },
-                "time": {
-                  "title": "Time",
-                  "description": "Time of the appointment",
-                  "type": "string"
-                },
-                "label": {
-                  "title": "CTA Label",
-                  "description": "Label for the call to action button",
-                  "type": "string"
-                }
-              }
-            }
+          "date": {
+            "title": "Date",
+            "description": "Date of the appointment",
+            "type": "string",
+            "format": "date"
           },
-          "address": {
-            "title": "Address",
-            "description": "Address of the appointment",
+          "time": {
+            "title": "Time",
+            "description": "Time of the appointment",
             "type": "string"
           },
-          "mapsLink": {
-            "title": "Maps Link",
-            "description": "Link to the location on a map",
-            "type": "string",
-            "format": "uri"
+          "label": {
+            "title": "CTA Label",
+            "description": "Label for the call to action button",
+            "type": "string"
+          },
+          "type": {
+            "const": "event-list-appointment"
           }
         },
-        "required": [
-          "date",
-          "time",
-          "address"
-        ],
         "additionalProperties": false
       }
     },
@@ -112,7 +93,7 @@
       "additionalProperties": false
     },
     "type": {
-      "const": "event"
+      "const": "event-detail"
     }
   },
   "additionalProperties": false

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

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/event.schema.json",
-  "title": "Event",
+  "$id": "http://schema.mydesignsystem.com/cms/event-detail.schema.json",
+  "title": "Event Detail",
   "type": "object",
   "properties": {
     "title": {
@@ -34,46 +34,7 @@
       "description": "List of attendable appointments",
       "type": "array",
       "items": {
-        "type": "object",
-        "properties": {
-          "dates": {
-            "title": "Dates",
-            "description": "List of dates of the event",
-            "type": "array",
-            "items": {
-              "properties": {
-                "date": {
-                  "title": "Date",
-                  "description": "Date of the appointment",
-                  "type": "string",
-                  "format": "date"
-                },
-                "time": {
-                  "title": "Time",
-                  "description": "Time of the appointment",
-                  "type": "string"
-                },
-                "label": {
-                  "title": "CTA Label",
-                  "description": "Label for the call to action button",
-                  "type": "string"
-                }
-              }
-            }
-          },
-          "address": {
-            "title": "Address",
-            "description": "Address of the appointment",
-            "type": "string"
-          },
-          "mapsLink": {
-            "title": "Maps Link",
-            "description": "Link to the location on a map",
-            "type": "string",
-            "format": "uri"
-          }
-        },
-        "required": ["date", "time", "address"]
+        "$ref": "http://schema.mydesignsystem.com/event-list-appointment.schema.json"
       }
     },
     "description": {

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

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from "react";
+import { EventDetailProps } from "../../EventDetailProps-ba701353.js";
+declare const EventDetail: FC<PropsWithChildren<EventDetailProps>>;
+export type { EventDetailProps };
+export { EventDetail };

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

@@ -0,0 +1,20 @@
+import "./event-detail.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Headline } from '../headline/index.js';
+import { Text } from '../text/index.js';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+import { TagLabel } from '@kickstartds/base/lib/tag-label';
+import { EventListEntry } from '../event-list-entry/index.js';
+import 'classnames';
+import 'react';
+import 'markdown-to-jsx';
+import '@kickstartds/base/lib/headline';
+import '@kickstartds/base/lib/icon';
+import '../event-list-appointment/index.js';
+import '../button/index.js';
+import '@kickstartds/base/lib/button';
+
+const EventDetail = ({ title, categories, intro, appointments, description, }) => (jsxs("div", { className: "dsa-event", children: [jsxs("div", { className: "dsa-event__header", children: [categories && categories.length > 0 && (jsx("div", { className: "dsa-event__categories", children: categories.map((category, index) => (jsx(TagLabel, { className: "dsa-event__category", label: category?.label }, index))) })), jsx(Headline, { text: title, level: "h1" }), jsx(Text, { highlightText: true, text: intro })] }), appointments && appointments.length > 0 && (jsx("div", { className: "dsa-event__list", children: appointments.map((appointment, index) => (jsx(EventListEntry, { ...appointment }, index))) })), description && (jsx(RichText, { className: "dsa-event__description", text: description }))] }));
+EventDetail.displayName = "EventDetail";
+
+export { EventDetail };

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

@@ -0,0 +1,28 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-list-appointment.schema.json",
+  "title": "Event List Appointment",
+  "type": "object",
+  "properties": {
+    "date": {
+      "title": "Date",
+      "description": "Date of the appointment",
+      "type": "string",
+      "format": "date"
+    },
+    "time": {
+      "title": "Time",
+      "description": "Time of the appointment",
+      "type": "string"
+    },
+    "label": {
+      "title": "CTA Label",
+      "description": "Label for the call to action button",
+      "type": "string"
+    },
+    "type": {
+      "const": "event-list-appointment"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-list-appointment.schema.json",
+  "title": "Event List Appointment",
+  "type": "object",
+  "properties": {
+    "date": {
+      "title": "Date",
+      "description": "Date of the appointment",
+      "type": "string",
+      "format": "date"
+    },
+    "time": {
+      "title": "Time",
+      "description": "Time of the appointment",
+      "type": "string"
+    },
+    "label": {
+      "title": "CTA Label",
+      "description": "Label for the call to action button",
+      "type": "string"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -1,10 +1,7 @@
-import { FC } from "react";
-import { EventProps } from "../../EventProps-feae5a7c.js";
-interface EventListAppointmentProps {
-    date?: string;
-    time?: string;
-    label?: string;
-}
-declare const EventListAppointment: FC<EventListAppointmentProps>;
-export type { EventProps };
-export { EventListAppointmentProps, EventListAppointment };
+/// <reference types="react" />
+import { EventListAppointmentProps } from "../../EventListAppointmentProps-d438cdc6.js";
+declare const EventListAppointmentContextDefault: import("react").ForwardRefExoticComponent<EventListAppointmentProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const EventListAppointmentContext: import("react").Context<import("react").ForwardRefExoticComponent<EventListAppointmentProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const EventListAppointment: import("react").ForwardRefExoticComponent<EventListAppointmentProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { EventListAppointmentProps };
+export { EventListAppointmentContextDefault, EventListAppointmentContext, EventListAppointment };

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

@@ -1,12 +1,17 @@
-import "./event.css";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { Button } from '../button/index.js';
-import 'react';
 import 'classnames';
 import '@kickstartds/base/lib/button';
 
-const EventListAppointment = ({ date, time, label, }) => (jsxs(Fragment, { children: [jsxs("div", { className: "dsa-event-list-appointment__dates", children: [date && (jsxs("div", { className: "dsa-event-list-appointment__item dsa-event-list-appointment__date", children: [jsx(Icon, { className: "dsa-event-list-appointment__icon", icon: "date" }), jsx(RichText, { text: date })] })), time && (jsxs("div", { className: "dsa-event-list-appointment__item dsa-event-list-appointment__time", children: [jsx(Icon, { className: "dsa-event-list-appointment__icon", icon: "time" }), jsx(RichText, { text: time })] }))] }), jsx(Button, { className: "dsa-event-list-appointment__cta", label: label, icon: "chevron-right", variant: "primary", size: "small" })] }));
+const EventListAppointmentContextDefault = forwardRef(({ date, time, label, ...rest }, ref) => (jsxs("div", { ...rest, ref: ref, children: [jsxs("div", { className: "dsa-event-list-appointment__dates", children: [date && (jsxs("div", { className: "dsa-event-list-appointment__item dsa-event-list-appointment__date", children: [jsx(Icon, { className: "dsa-event-list-appointment__icon", icon: "date" }), jsx(RichText, { text: date })] })), time && (jsxs("div", { className: "dsa-event-list-appointment__item dsa-event-list-appointment__time", children: [jsx(Icon, { className: "dsa-event-list-appointment__icon", icon: "time" }), jsx(RichText, { text: time })] }))] }), jsx(Button, { className: "dsa-event-list-appointment__cta", label: label, icon: "chevron-right", variant: "primary", size: "small" })] })));
+const EventListAppointmentContext = createContext(EventListAppointmentContextDefault);
+const EventListAppointment = forwardRef((props, ref) => {
+    const Component = useContext(EventListAppointmentContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+EventListAppointment.displayName = "EventListAppointment";
 
-export { EventListAppointment };
+export { EventListAppointment, EventListAppointmentContext, EventListAppointmentContextDefault };

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

@@ -0,0 +1,56 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-list-entry.schema.json",
+  "title": "Event List Entry",
+  "type": "object",
+  "properties": {
+    "dates": {
+      "title": "Dates",
+      "description": "List of dates of the event",
+      "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",
+        "type": "object",
+        "properties": {
+          "date": {
+            "title": "Date",
+            "description": "Date of the appointment",
+            "type": "string",
+            "format": "date"
+          },
+          "time": {
+            "title": "Time",
+            "description": "Time of the appointment",
+            "type": "string"
+          },
+          "label": {
+            "title": "CTA Label",
+            "description": "Label for the call to action button",
+            "type": "string"
+          },
+          "type": {
+            "const": "event-list-appointment"
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "address": {
+      "title": "Address",
+      "description": "Address of the appointment",
+      "type": "string"
+    },
+    "mapsLink": {
+      "title": "Maps Link",
+      "description": "Link to the location on a map",
+      "type": "string",
+      "format": "uri"
+    },
+    "type": {
+      "const": "event-list-entry"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,28 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-list-entry.schema.json",
+  "title": "Event List Entry",
+  "type": "object",
+  "properties": {
+    "dates": {
+      "title": "Dates",
+      "description": "List of dates of the event",
+      "type": "array",
+      "items": {
+        "$ref": "http://schema.mydesignsystem.com/event-list-appointment.schema.json"
+      }
+    },
+    "address": {
+      "title": "Address",
+      "description": "Address of the appointment",
+      "type": "string"
+    },
+    "mapsLink": {
+      "title": "Maps Link",
+      "description": "Link to the location on a map",
+      "type": "string",
+      "format": "uri"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -1,13 +1,30 @@
-import { FC } from "react";
-import { EventProps } from "../../EventProps-feae5a7c.js";
+/// <reference types="react" />
+/* eslint-disable */
+/**
+ * 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.
+ */
+import { EventListAppointmentProps } from "../../EventListAppointmentProps-d438cdc6.js";
+/**
+ * List of dates of the event
+ */
+type Dates = EventListAppointmentProps[];
+/**
+ * Address of the appointment
+ */
+type Address = string;
+/**
+ * Link to the location on a map
+ */
+type MapsLink = string;
 interface EventListEntryProps {
-    dates?: Array<{
-        date?: string;
-        time?: string;
-        label?: string;
-    }>;
-    address?: string;
+    dates?: Dates;
+    address?: Address;
+    mapsLink?: MapsLink;
 }
-declare const EventListEntry: FC<EventListEntryProps>;
-export type { EventProps };
-export { EventListEntryProps, EventListEntry };
+declare const EventListEntryContextDefault: import("react").ForwardRefExoticComponent<EventListEntryProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const EventListEntryContext: import("react").Context<import("react").ForwardRefExoticComponent<EventListEntryProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const EventListEntry: import("react").ForwardRefExoticComponent<EventListEntryProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { EventListEntryProps };
+export { EventListEntryContextDefault, EventListEntryContext, EventListEntry };

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

@@ -1,12 +1,18 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { EventListAppointment } from '../event-list-appointment/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import { Icon } from '@kickstartds/base/lib/icon';
+import { EventListAppointment } from '../event-list-appointment/index.js';
 import '../button/index.js';
-import 'react';
 import 'classnames';
 import '@kickstartds/base/lib/button';
 
-const EventListEntry = ({ address, dates }) => (jsx(Fragment, { children: jsxs("div", { className: "dsa-event-list-entry", children: [address && (jsx("div", { className: "dsa-event-list-entry__row", children: jsxs("address", { className: "dsa-event-list-entry__item dsa-event-list-entry__address", children: [jsx(Icon, { className: "dsa-event-list-entry__icon", icon: "map-pin" }), jsx(RichText, { text: address })] }) })), dates && dates.length > 0 && (jsx("div", { className: "dsa-event-list-entry__appointments", children: dates.map((item, index) => (jsx("button", { className: "dsa-event-list-appointment", children: jsx(EventListAppointment, { ...item }) }, index))) }))] }) }));
+const EventListEntryContextDefault = forwardRef(({ address, dates, ...rest }, ref) => (jsxs("div", { className: "dsa-event-list-entry", ...rest, ref: ref, children: [address && (jsx("div", { className: "dsa-event-list-entry__row", children: jsxs("address", { className: "dsa-event-list-entry__item dsa-event-list-entry__address", children: [jsx(Icon, { className: "dsa-event-list-entry__icon", icon: "map-pin" }), jsx(RichText, { text: address })] }) })), dates && dates.length > 0 && (jsx("div", { className: "dsa-event-list-entry__appointments", children: dates.map((item, index) => (jsx("button", { className: "dsa-event-list-appointment", children: jsx(EventListAppointment, { ...item }) }, index))) }))] })));
+const EventListEntryContext = createContext(EventListEntryContextDefault);
+const EventListEntry = forwardRef((props, ref) => {
+    const Component = useContext(EventListEntryContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+EventListEntry.displayName = "EventListEntry";
 
-export { EventListEntry };
+export { EventListEntry, EventListEntryContext, EventListEntryContextDefault };

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

@@ -33,3 +33,4 @@ export * from "../../BlogPostProps-6b3cff22.js";
 export * from "../../BlogOverviewProps-9f207f1c.js";
 export * from "../../PageProps-aa29c554.js";
 export { IconSprite, SettingsProps };
+export * from "../../EventDetailProps-ba701353.js";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Jun 2025 09:40:49 GMT
+ * Generated on Mon, 23 Jun 2025 10:44:00 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -761,6 +761,65 @@
     },
     "screenshot": "img/screenshots/page-archetypes-blog-post--blog-post.png"
   },
+  {
+    "id": "page-archetypes-event-detail--event-detail",
+    "group": "Page Archetypes/Event Detail",
+    "name": "EventDetail",
+    "code": "<EventDetail\n  appointments={[\n    {\n      address: 'Berlin Congress Center<br />\\n      Alexanderplatz 1<br />\\n      10178 Berlin',\n      dates: [\n        {\n          date: '2025-09-18',\n          label: 'Register',\n          time: '09:00 – 17:00'\n        },\n        {\n          date: '2025-09-18',\n          label: 'Register',\n          time: '09:00 – 17:00'\n        }\n      ],\n      mapsLink: 'https://maps.google.com/?q=Berlin+Congress+Center'\n    },\n    {\n      address: 'Köln Messe<br />\\n      Messeplatz 1<br />\\n      50679 Köln',\n      dates: [\n        {\n          date: '2025-09-18',\n          label: 'Register',\n          time: '09:00 – 17:00'\n        }\n      ],\n      mapsLink: 'https://maps.google.com/?q=Köln+Messe'\n    }\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  images={[\n    {\n      alt: 'Attendees at the Systemics Design Conference',\n      src: '/img/events/design-conference.jpg'\n    },\n    {\n      alt: 'Keynote speaker on stage',\n      src: '/img/events/speaker.jpg'\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  title=\"Systemics Design Conference 2025\"\n/>",
+    "args": {
+      "title": "Systemics Design Conference 2025",
+      "categories": [
+        {
+          "label": "Conference"
+        },
+        {
+          "label": "Design Systems"
+        }
+      ],
+      "intro": "A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.",
+      "appointments": [
+        {
+          "address": "Berlin Congress Center<br />\n      Alexanderplatz 1<br />\n      10178 Berlin",
+          "mapsLink": "https://maps.google.com/?q=Berlin+Congress+Center",
+          "dates": [
+            {
+              "date": "2025-09-18",
+              "time": "09:00 – 17:00",
+              "label": "Register"
+            },
+            {
+              "date": "2025-09-18",
+              "time": "09:00 – 17:00",
+              "label": "Register"
+            }
+          ]
+        },
+        {
+          "address": "Köln Messe<br />\n      Messeplatz 1<br />\n      50679 Köln",
+          "mapsLink": "https://maps.google.com/?q=Köln+Messe",
+          "dates": [
+            {
+              "date": "2025-09-18",
+              "time": "09:00 – 17:00",
+              "label": "Register"
+            }
+          ]
+        }
+      ],
+      "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  ",
+      "images": [
+        {
+          "src": "/img/events/design-conference.jpg",
+          "alt": "Attendees at the Systemics Design Conference"
+        },
+        {
+          "src": "/img/events/speaker.jpg",
+          "alt": "Keynote speaker on stage"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/page-archetypes-event-detail--event-detail.png"
+  },
   {
     "id": "components-contact--wide-image",
     "group": "Components/Contact",
@@ -1388,63 +1447,39 @@
     "screenshot": "img/screenshots/industry-downloads--mixed.png"
   },
   {
-    "id": "industry-event--default",
-    "group": "Industry/Event",
+    "id": "event-event-list-appointment--default",
+    "group": "Event/ Event List Appointment",
     "name": "Default",
-    "code": "<Event\n  appointments={[\n    {\n      address: 'Berlin Congress Center<br />\\n      Alexanderplatz 1<br />\\n      10178 Berlin',\n      dates: [\n        {\n          date: '2025-09-18',\n          label: 'Register',\n          time: '09:00 – 17:00'\n        },\n        {\n          date: '2025-09-18',\n          label: 'Register',\n          time: '09:00 – 17:00'\n        }\n      ],\n      mapsLink: 'https://maps.google.com/?q=Berlin+Congress+Center'\n    },\n    {\n      address: 'Köln Messe<br />\\n      Messeplatz 1<br />\\n      50679 Köln',\n      dates: [\n        {\n          date: '2025-09-18',\n          label: 'Register',\n          time: '09:00 – 17:00'\n        }\n      ],\n      mapsLink: 'https://maps.google.com/?q=Köln+Messe'\n    }\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  images={[\n    {\n      alt: 'Attendees at the Systemics Design Conference',\n      src: '/img/events/design-conference.jpg'\n    },\n    {\n      alt: 'Keynote speaker on stage',\n      src: '/img/events/speaker.jpg'\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  title=\"Systemics Design Conference 2025\"\n/>",
+    "code": "<EventListAppointment\n  date=\"2025-09-18\"\n  label=\"Register\"\n  time=\"09:00 – 17:00\"\n/>",
     "args": {
-      "title": "Systemics Design Conference 2025",
-      "categories": [
-        {
-          "label": "Conference"
-        },
-        {
-          "label": "Design Systems"
-        }
-      ],
-      "intro": "A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.",
-      "appointments": [
-        {
-          "address": "Berlin Congress Center<br />\n      Alexanderplatz 1<br />\n      10178 Berlin",
-          "mapsLink": "https://maps.google.com/?q=Berlin+Congress+Center",
-          "dates": [
-            {
-              "date": "2025-09-18",
-              "time": "09:00 – 17:00",
-              "label": "Register"
-            },
-            {
-              "date": "2025-09-18",
-              "time": "09:00 – 17:00",
-              "label": "Register"
-            }
-          ]
-        },
-        {
-          "address": "Köln Messe<br />\n      Messeplatz 1<br />\n      50679 Köln",
-          "mapsLink": "https://maps.google.com/?q=Köln+Messe",
-          "dates": [
-            {
-              "date": "2025-09-18",
-              "time": "09:00 – 17:00",
-              "label": "Register"
-            }
-          ]
-        }
-      ],
-      "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  ",
-      "images": [
+      "date": "2025-09-18",
+      "time": "09:00 – 17:00",
+      "label": "Register"
+    },
+    "screenshot": "img/screenshots/event-event-list-appointment--default.png"
+  },
+  {
+    "id": "event-event-list-entry--default",
+    "group": "Event/ Event List Entry",
+    "name": "Default",
+    "code": "<EventListEntry\n  address=\"Berlin Congress Center<br />\n  Alexanderplatz 1<br />\n  10178 Berlin\"\n  dates={[\n    {\n      date: '2025-09-18',\n      label: 'Register',\n      time: '09:00 – 17:00'\n    },\n    {\n      date: '2025-09-18',\n      label: 'Register',\n      time: '09:00 – 17:00'\n    }\n  ]}\n  mapsLink=\"https://maps.google.com/?q=Berlin+Congress+Center\"\n/>",
+    "args": {
+      "address": "Berlin Congress Center<br />\n  Alexanderplatz 1<br />\n  10178 Berlin",
+      "mapsLink": "https://maps.google.com/?q=Berlin+Congress+Center",
+      "dates": [
         {
-          "src": "/img/events/design-conference.jpg",
-          "alt": "Attendees at the Systemics Design Conference"
+          "date": "2025-09-18",
+          "time": "09:00 – 17:00",
+          "label": "Register"
         },
         {
-          "src": "/img/events/speaker.jpg",
-          "alt": "Keynote speaker on stage"
+          "date": "2025-09-18",
+          "time": "09:00 – 17:00",
+          "label": "Register"
         }
       ]
     },
-    "screenshot": "img/screenshots/industry-event--default.png"
+    "screenshot": "img/screenshots/event-event-list-entry--default.png"
   },
   {
     "id": "components-faq--dropdown-list",

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Jun 2025 09:40:51 GMT
+ * Generated on Mon, 23 Jun 2025 10:44:02 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 Mon, 23 Jun 2025 09:40:56 GMT
+ * Generated on Mon, 23 Jun 2025 10:44:06 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 Mon, 23 Jun 2025 09:40:53 GMT
+ * Generated on Mon, 23 Jun 2025 10:44:04 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 Mon, 23 Jun 2025 09:40:58 GMT
+ * Generated on Mon, 23 Jun 2025 10:44:09 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 Mon, 23 Jun 2025 09:40:49 GMT
+ * Generated on Mon, 23 Jun 2025 10:44:00 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 Jun 2025 09:40:49 GMT
+ * Generated on Mon, 23 Jun 2025 10:44:00 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

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

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { HTMLAttributes } from "react";
-import { EventProps } from "../../EventProps-feae5a7c.js";
-declare const EventContextDefault: import("react").ForwardRefExoticComponent<EventProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-declare const EventContext: import("react").Context<import("react").ForwardRefExoticComponent<EventProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
-declare const Event: import("react").ForwardRefExoticComponent<EventProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export type { EventProps };
-export { EventContextDefault, EventContext, Event };

package/dist/components/event/index.js

@@ -1,26 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, createContext, useContext } from 'react';
-import '../event-list-appointment/index.js';
-import { Headline } from '../headline/index.js';
-import { Text } from '../text/index.js';
-import { RichText } from '@kickstartds/base/lib/rich-text';
-import { TagLabel } from '@kickstartds/base/lib/tag-label';
-import { EventListEntry } from '../event-list-entry/index.js';
-import '@kickstartds/base/lib/icon';
-import '../button/index.js';
-import 'classnames';
-import '@kickstartds/base/lib/button';
-import 'markdown-to-jsx';
-import '@kickstartds/base/lib/headline';
-
-const EventContextDefault = forwardRef(({ title, categories, intro, appointments, description }, ref) => {
-    return (jsxs("div", { className: "dsa-event", ref: ref, children: [jsxs("div", { className: "dsa-event__header", children: [categories && categories.length > 0 && (jsx("div", { className: "dsa-event__categories", children: categories.map((category, index) => (jsx(TagLabel, { className: "dsa-event__category", label: category?.label }, index))) })), jsx(Headline, { text: title, level: "h1" }), jsx(Text, { highlightText: true, text: intro })] }), appointments && appointments.length > 0 && (jsx("div", { className: "dsa-event__list", children: appointments.map((appointment, index) => (jsx(EventListEntry, { ...appointment }, index))) })), description && (jsx(RichText, { className: "dsa-event__description", text: description }))] }));
-});
-const EventContext = createContext(EventContextDefault);
-const Event = forwardRef((props, ref) => {
-    const Component = useContext(EventContext);
-    return jsx(Component, { ...props, ref: ref });
-});
-Event.displayName = "Event";
-
-export { Event, EventContext, EventContextDefault };

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

@@ -1,88 +0,0 @@
-.dsa-event {
-  max-width: var(--dsa-content--width_narrow);
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ks-spacing-stack-m);
-}
-.dsa-event__categories {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-bottom: var(--ks-spacing-stack-xs);
-}
-.dsa-event__list {
-  display: flex;
-  gap: var(--ks-spacing-stack-m);
-  flex-direction: column;
-  padding: var(--ks-spacing-inset-m) 0;
-}
-.dsa-event .dsa-event-list-entry {
-  --dsa-event-list-entry__icon--size: calc(var(--ks-font-size-copy-m) * var(--ks-line-height-copy-m));
-  flex-wrap: wrap;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
-  background-color: var(--ks-background-color-accent);
-  padding: var(--ks-spacing-inset-m);
-  border-radius: var(--ks-border-radius-surface);
-}
-.dsa-event .dsa-event-list-entry .l-container {
-  container-type: unset;
-}
-.dsa-event .dsa-event-list-entry__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 .dsa-event-list-entry__icon {
-  color: var(--ks-text-color-primary);
-  width: var(--dsa-event-list-entry__icon--size);
-  height: var(--dsa-event-list-entry__icon--size);
-}
-.dsa-event .dsa-event-list-entry__item {
-  display: flex;
-  gap: var(--ks-spacing-stack-xs);
-}
-.dsa-event .dsa-event-list-entry__appointments {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ks-spacing-stack-s);
-  flex-grow: 1;
-}
-.dsa-event .dsa-event-list-entry .dsa-event-list-appointment {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: var(--ks-spacing-inline-m);
-  padding: var(--ks-spacing-inset-s);
-  border: var(--ks-border-width-default) solid var(--ks-border-color-default);
-  background-color: var(--ks-background-color-default);
-  border-radius: var(--ks-border-radius-control);
-  flex-grow: 0;
-}
-.dsa-event .dsa-event-list-entry .dsa-event-list-appointment__item {
-  display: flex;
-  gap: var(--ks-spacing-stack-xs);
-}
-.dsa-event .dsa-event-list-entry .dsa-event-list-appointment__dates {
-  flex-direction: column;
-  display: flex;
-  gap: var(--ks-spacing-stack-xs);
-}
-.dsa-event .dsa-event-list-entry .dsa-event-list-appointment__icon {
-  color: var(--ks-text-color-primary);
-  width: var(--dsa-event-list-entry__icon--size);
-  height: var(--dsa-event-list-entry__icon--size);
-}
-.dsa-event .dsa-event-list-entry .dsa-event-list-appointment__cta.c-button {
-  background-color: transparent;
-  padding: 0;
-  color: var(--ks-text-color-primary);
-}