@kickstartds/ds-agency-premium 1.6.71--canary.45.1803.0 → 1.6.71--canary.45.1813.0

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

@@ -3,8 +3,8 @@
  * 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 { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
+import { SectionProps } from "./SectionProps-21d04028.js";
+import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.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-21d04028.js";
 import { CtaProps } from "./CtaProps-babe4ee6.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/{EventListTeaserProps-796e306c.d.ts → EventListTeaserProps-5cc94436.d.ts}

@@ -3,6 +3,10 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
+/**
+ * Category of the event teaser
+ */
+type Category = string;
 /**
  * Title of the event
  */
@@ -28,9 +32,9 @@ type LocationName = string;
  */
 type Address = string;
 /**
- * Categories of the event
+ * Tags associated with the event
  */
-type Categories = string[];
+type Tags = string[];
 /**
  * URL of the image to display
  */
@@ -55,12 +59,13 @@ type ARIALabel = string;
  * Display an event teaser with date, title and location
  */
 interface EventListTeaserProps {
+    category?: Category;
     title: Headline;
     text?: Text;
     date: Date;
     time?: Time;
     location: Location;
-    categories?: Categories;
+    tags?: Tags;
     image?: Image;
     url?: URL;
     ctaText?: CallToAction;
@@ -81,4 +86,4 @@ interface Image {
     src?: ImageSource;
     alt?: AltText;
 }
-export { Headline, Text, Date, Time, LocationName, Address, Categories, ImageSource, AltText, URL, CallToAction, ARIALabel, EventListTeaserProps, Location, Image };
+export { Category, Headline, Text, Date, Time, LocationName, Address, Tags, ImageSource, AltText, URL, CallToAction, ARIALabel, EventListTeaserProps, Location, Image };

package/dist/PageProps-aa29c554.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-21d04028.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-21d04028.d.ts}

@@ -28,7 +28,7 @@ type Width = "full" | "max" | "wide" | "default" | "narrow";
 /**
  * Style of background
  */
-type Style = "framed" | "deko" | "colorful";
+type Style = "default" | "framed" | "deko";
 /**
  * Color of background
  */

package/dist/components/blog-overview/blog-overview.schema.dereffed.json

@@ -37,10 +37,11 @@
             "title": "Style",
             "description": "Style of background",
             "enum": [
+              "default",
               "framed",
-              "deko",
-              "colorful"
-            ]
+              "deko"
+            ],
+            "default": "default"
           },
           "backgroundColor": {
             "type": "string",
@@ -224,7 +225,7 @@
                   "list",
                   "slider"
                 ],
-                "default": "list"
+                "default": "default"
               },
               "tileWidth": {
                 "type": "string",

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

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

package/dist/components/blog-post/blog-post.schema.dereffed.json

@@ -321,10 +321,11 @@
             "title": "Style",
             "description": "Style of background",
             "enum": [
+              "default",
               "framed",
-              "deko",
-              "colorful"
-            ]
+              "deko"
+            ],
+            "default": "default"
           },
           "backgroundColor": {
             "type": "string",
@@ -508,7 +509,7 @@
                   "list",
                   "slider"
                 ],
-                "default": "list"
+                "default": "default"
               },
               "tileWidth": {
                 "type": "string",

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/blog-teaser/blog-teaser.css

@@ -11,7 +11,7 @@
   --dsa-blog-teaser__topic--font-weight: var(--dsa-topic--font-weight);
   --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-xs);
   --dsa-blog-teaser__copy--font: var(--ks-font-copy-s);
-  --dsa-blog-teaser__copy--color: var(--dsa-rich-text--color);
+  --dsa-blog-teaser__copy--color: var(--ks-text-color-copy);
   --dsa-blog-teaser__copy--color_hover: var(--ks-text-color-default);
   --dsa-blog-teaser__copy--margin-top: 0.5em;
   --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
@@ -43,7 +43,7 @@
   --c-teaser--background: var(--dsa-blog-teaser--background, transparent);
   --c-post-teaser--gap: var(--dsa-blog-teaser--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-s));
   --c-teaser_text--spacing: var(--dsa-blog-teaser__copy--margin-top, var(--ks-spacing-stack-s));
-  --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--dsa-rich-text--color));
+  --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--ks-text-color-copy));
 }
 .dsa-blog-teaser.c-post-teaser .c-tag-label {
   --c-tag-label--font: var(--dsa-blog-teaser__tag-label--font, var(--ks-font-interface-s));

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
+import { BlogTeaserProps } from "../../BlogTeaserProps-d62a0a9a.js";
 declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/contact/contact.css

@@ -11,8 +11,8 @@
   --dsa-contact__image--border-radius: var(--ks-border-radius-card);
   --dsa-contact__body--gap: var(--ks-spacing-stack-xs);
   --dsa-contact__body--flex-basis: var(--dsa-tile--width_small);
-  --dsa-contact__copy--font: var(--dsa-rich-text--font);
-  --dsa-contact__copy--color: var(--dsa-rich-text--color);
+  --dsa-contact__copy--font: var(--ks-font-copy-m);
+  --dsa-contact__copy--color: var(--ks-text-color-copy);
   --dsa-contact__title--color: var(--ks-text-color-display);
   --dsa-contact__title--font: var(--ks-font-copy-l);
   --dsa-contact__title--font-weight: var(--ks-font-weight-bold);

package/dist/components/cta/cta.css

@@ -4,7 +4,7 @@
   --dsa-cta__content--vertical-padding: var(--dsa-content--vertical-spacing);
   --dsa-cta__content--horizontal-padding: var(--dsa-content--horizontal-spacing);
   --dsa-cta__content--max-width: var(--dsa-content--width_narrow);
-  --dsa-cta__copy--font: var(--dsa-rich-text--font);
+  --dsa-cta__copy--font: var(--ks-font-copy-m);
   --dsa-cta__copy--color: var(--ks-text-color-default);
   --dsa-cta__headline--color: var(--dsa-headline--color);
   --dsa-cta__headline--font: var(--dsa-headline_h2--font);
@@ -72,8 +72,8 @@
   font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
 }
 .dsa-cta.c-storytelling .c-storytelling__box .c-rich-text {
-  font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
-  color: var(--dsa-cta__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
+  font: var(--dsa-cta__copy--font, var(--ks-font-copy-m));
+  color: var(--dsa-cta__copy--color, var(--ks-text-color-copy));
 }
 .dsa-cta.c-storytelling > .c-storytelling__image {
   margin: 0;

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

@@ -131,6 +131,14 @@
         "description": "Display an event teaser with date, title and location",
         "type": "object",
         "properties": {
+          "category": {
+            "title": "Category",
+            "description": "Category of the event teaser",
+            "type": "string",
+            "examples": [
+              "Buyers"
+            ]
+          },
           "title": {
             "title": "Headline",
             "description": "Title of the event",
@@ -190,9 +198,9 @@
             },
             "additionalProperties": false
           },
-          "categories": {
-            "title": "Categories",
-            "description": "Categories of the event",
+          "tags": {
+            "title": "Tags",
+            "description": "Tags associated with the event",
             "type": "array",
             "items": {
               "type": "string",

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

@@ -6,7 +6,7 @@ import { FC, PropsWithChildren } from "react";
  * and run json-schema-to-typescript to regenerate this file.
  */
 import { EventFilterProps } from "../../EventFilterProps-b190eb86.js";
-import { EventListTeaserProps } from "../../EventListTeaserProps-796e306c.js";
+import { EventListTeaserProps } from "../../EventListTeaserProps-5cc94436.js";
 interface EventListProps {
     /**
      * Referenced component EventFilterProps

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

@@ -1,8 +1,10 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Section } from '../section/index.js';
 import { SplitWeighted } from '../split-weighted/index.js';
 import { EventFilter } from '../event-filter/index.js';
 import { EventListTeaser } from '../event-list-teaser/index.js';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+import { Pagination } from '../pagination/index.js';
 import 'react';
 import 'classnames';
 import '@kickstartds/core/lib/react';
@@ -18,13 +20,54 @@ import '@kickstartds/core/lib/container';
 import '@kickstartds/base/lib/picture';
 import 'markdown-to-jsx';
 import '@kickstartds/base/lib/tag-label';
+import '@kickstartds/base/lib/link';
 
 const EventList = ({ filter, events, }) => (jsx(Fragment, { children: jsx(Section, { width: "wide", children: jsx(SplitWeighted, { verticalAlign: "sticky", mainLayout: {
                 minWidth: "narrow",
+            }, asideLayout: {
+                gutter: "small",
             }, order: {
                 desktop: "asideFirst",
                 mobile: "asideFirst",
-            }, aside: jsx(EventFilter, { ...filter }), main: jsx(Fragment, { children: events.map((event, index) => (jsx(EventListTeaser, { ...event }, index))) }) }) }) }));
+            }, aside: jsxs(Fragment, { children: [jsx(EventFilter, { ...filter }), jsx(RichText, { text: "425 Veranstaltungen" })] }), main: jsxs(Fragment, { children: [events.map((event, index) => (jsx(EventListTeaser, { ...event }, index))), jsx(Pagination, { pages: [
+                            {
+                                url: "https://example.com/page1",
+                            },
+                            {
+                                url: "https://example.com/page2",
+                            },
+                            {
+                                url: "https://example.com/page3",
+                            },
+                            {
+                                url: "https://example.com/page4",
+                            },
+                            {
+                                url: "https://example.com/page5",
+                            },
+                            {
+                                url: "https://example.com/page6",
+                                active: true,
+                            },
+                            {
+                                url: "https://example.com/page7",
+                            },
+                            {
+                                url: "https://example.com/page8",
+                            },
+                            {
+                                url: "https://example.com/page9",
+                            },
+                            {
+                                url: "https://example.com/page10",
+                            },
+                            {
+                                url: "https://example.com/page11",
+                            },
+                            {
+                                url: "https://example.com/page12",
+                            },
+                        ] })] }) }) }) }));
 EventList.displayName = "EventList";
 
 export { EventList };

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

@@ -22,7 +22,7 @@
 .dsa-event-list-teaser__header {
   display: flex;
   flex-direction: column;
-  gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
+  gap: var(--ks-spacing-stack-xs);
 }
 .dsa-event-list-teaser__content {
   display: flex;
@@ -52,6 +52,19 @@
   font-weight: var(--ks-font-weight-semi-bold);
   color: var(--ks-text-color-display);
 }
+.dsa-event-list-teaser__category {
+  font: var(--ks-font-interface-xs);
+  font-weight: var(--ks-font-weight-semi-bold);
+  color: var(--ks-color-fg-alpha-4);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.dsa-event-list-teaser__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ks-spacing-xxs) var(--ks-spacing-xxs);
+  max-width: var(--dsa-tile--width_small);
+}
 .dsa-event-list-teaser__details {
   display: flex;
   flex-wrap: wrap;
@@ -65,21 +78,6 @@
 .dsa-event-list-teaser__date > .dsa-event-list-teaser__info:first-child {
   font-weight: var(--ks-font-weight-semi-bold);
 }
-.dsa-event-list-teaser__categories {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ks-spacing-xxs) var(--ks-spacing-xxs);
-  max-width: var(--dsa-tile--width_small);
-}
-.dsa-event-list-teaser__infos {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ks-spacing-stack-s);
-  border-top: 1px solid var(--ks-border-color-interface-interactive);
-  border-bottom: 1px solid var(--ks-border-color-interface-interactive);
-  padding-top: var(--ks-spacing-inset-s);
-  padding-bottom: var(--ks-spacing-inset-s);
-}
 .dsa-event-list-teaser__location {
   flex-basis: var(--dsa-tile--width_small);
   flex-grow: 1;
@@ -92,6 +90,15 @@
 .dsa-event-list-teaser__location-address {
   margin: 0;
 }
+.dsa-event-list-teaser__infos {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-s);
+  border-top: 1px solid var(--ks-border-color-interface-interactive);
+  border-bottom: 1px solid var(--ks-border-color-interface-interactive);
+  padding-top: var(--ks-spacing-inset-s);
+  padding-bottom: var(--ks-spacing-inset-s);
+}
 .dsa-event-list-teaser__info {
   display: flex;
   gap: calc(var(--ks-spacing-xxs) * 0.75);

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

@@ -5,6 +5,14 @@
   "description": "Display an event teaser with date, title and location",
   "type": "object",
   "properties": {
+    "category": {
+      "title": "Category",
+      "description": "Category of the event teaser",
+      "type": "string",
+      "examples": [
+        "Buyers"
+      ]
+    },
     "title": {
       "title": "Headline",
       "description": "Title of the event",
@@ -64,9 +72,9 @@
       },
       "additionalProperties": false
     },
-    "categories": {
-      "title": "Categories",
-      "description": "Categories of the event",
+    "tags": {
+      "title": "Tags",
+      "description": "Tags associated with the event",
       "type": "array",
       "items": {
         "type": "string",

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

@@ -5,6 +5,12 @@
   "description": "Display an event teaser with date, title and location",
   "type": "object",
   "properties": {
+    "category": {
+      "title": "Category",
+      "description": "Category of the event teaser",
+      "type": "string",
+      "examples": ["Buyers"]
+    },
     "title": {
       "title": "Headline",
       "description": "Title of the event",
@@ -53,9 +59,9 @@
         }
       }
     },
-    "categories": {
-      "title": "Categories",
-      "description": "Categories of the event",
+    "tags": {
+      "title": "Tags",
+      "description": "Tags associated with the event",
       "type": "array",
       "items": {
         "type": "string",

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { EventListTeaserProps } from "../../EventListTeaserProps-796e306c.js";
+import { EventListTeaserProps } from "../../EventListTeaserProps-5cc94436.js";
 declare const EventListTeaserContextDefault: import("react").ForwardRefExoticComponent<EventListTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
 declare const EventListTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<EventListTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>>;
 declare const EventListTeaser: import("react").ForwardRefExoticComponent<EventListTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -8,8 +8,8 @@ import { Picture } from '@kickstartds/base/lib/picture';
 import Markdown from 'markdown-to-jsx';
 import { TagLabel } from '@kickstartds/base/lib/tag-label';
 
-const EventListTeaserContextDefault = forwardRef(({ title, text, date, time, categories, location, image, ctaText, url, ariaLabel, className, ...rest }, ref) => {
-    return (jsx(Container, { name: "event-list-teaser", children: jsxs("a", { className: classnames(className, "dsa-event-list-teaser"), ...rest, href: url, ref: ref, "aria-label": ariaLabel, children: [jsxs("div", { className: "dsa-event-list-teaser__content", children: [jsx("div", { className: "dsa-event-list-teaser__header", children: jsx("span", { className: "dsa-event-list-teaser__title", children: title }) }), categories && categories.length > 0 && (jsx("div", { className: "dsa-event-list-teaser__categories", children: categories.map((category) => (jsx(TagLabel, { label: category, size: "s" }, category))) })), jsx("div", { className: "dsa-event-list-teaser__infos", children: jsxs("div", { className: "dsa-event-list-teaser__details", children: [jsxs("div", { className: "dsa-event-list-teaser__date", children: [jsxs("span", { className: "dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "time" }), time] })] }), jsxs("div", { className: "dsa-event-list-teaser__location dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), jsxs("address", { children: [location?.name && (jsx("span", { className: "dsa-event-list-teaser__location-name", children: location.name })), jsx(Markdown, { className: "dsa-event-list-teaser__location-address", children: location?.address })] })] })] }) }), text && (jsx("p", { className: "dsa-event-list-teaser__teaser-text", children: text })), jsxs("div", { className: "dsa-event-list-teaser__cta", children: [jsx("span", { children: ctaText }), jsx(Icon, { "aria-hidden": true, icon: "chevron-right" })] })] }), image && image.src && (jsx("div", { className: "dsa-event-list-teaser__image", children: jsx(Picture, { src: image?.src, alt: image?.alt }) }))] }) }));
+const EventListTeaserContextDefault = forwardRef(({ category, title, text, date, time, tags, location, image, ctaText, url, ariaLabel, className, ...rest }, ref) => {
+    return (jsx(Container, { name: "event-list-teaser", children: jsxs("a", { className: classnames(className, "dsa-event-list-teaser"), ...rest, href: url, ref: ref, "aria-label": ariaLabel, children: [jsxs("div", { className: "dsa-event-list-teaser__content", children: [jsxs("div", { className: "dsa-event-list-teaser__header", children: [category && (jsx("span", { className: "dsa-event-list-teaser__category", children: category })), jsx("span", { className: "dsa-event-list-teaser__title", children: title })] }), tags && tags.length > 0 && (jsx("div", { className: "dsa-event-list-teaser__tags", children: tags.map((category) => (jsx(TagLabel, { label: category, size: "s" }, category))) })), jsx("div", { className: "dsa-event-list-teaser__infos", children: jsxs("div", { className: "dsa-event-list-teaser__details", children: [jsxs("div", { className: "dsa-event-list-teaser__date", children: [jsxs("span", { className: "dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "time" }), time] })] }), jsxs("div", { className: "dsa-event-list-teaser__location dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), jsxs("address", { children: [location?.name && (jsx("span", { className: "dsa-event-list-teaser__location-name", children: location.name })), jsx(Markdown, { className: "dsa-event-list-teaser__location-address", children: location?.address })] })] })] }) }), text && (jsx("p", { className: "dsa-event-list-teaser__teaser-text", children: text })), jsxs("div", { className: "dsa-event-list-teaser__cta", children: [jsx("span", { children: ctaText }), jsx(Icon, { "aria-hidden": true, icon: "chevron-right" })] })] }), image && image.src && (jsx("div", { className: "dsa-event-list-teaser__image", children: jsx(Picture, { src: image?.src, alt: image?.alt }) }))] }) }));
 });
 const EventListTeaserContext = createContext(EventListTeaserContextDefault);
 const EventListTeaser = forwardRef((props, ref) => {

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

@@ -0,0 +1,79 @@
+.dsa-event-registration {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-s);
+}
+.dsa-event-registration__label {
+  font: var(--dsa-headline_h2__subheadline--font);
+}
+.dsa-event-registration__link {
+  width: fit-content;
+  font: var(--ks-font-interface-s);
+}
+.dsa-event-registration__details {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
+}
+.dsa-event-registration__date {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-xxs);
+}
+.dsa-event-registration__date > .dsa-event-registration__info:first-child {
+  font-weight: var(--ks-font-weight-semi-bold);
+}
+.dsa-event-registration__location {
+  flex-basis: var(--dsa-tile--width_small);
+  flex-grow: 1;
+}
+.dsa-event-registration__location-name {
+  font-weight: var(--ks-font-weight-semi-bold);
+  color: var(--dsa-topic--color);
+  display: block;
+}
+.dsa-event-registration__location-address {
+  margin: 0;
+}
+.dsa-event-registration__infos {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-s);
+  background: var(--ks-background-color-accent);
+  border-radius: var(--ks-border-radius-card);
+  padding: var(--ks-spacing-inset-stretch-m);
+}
+.dsa-event-registration__info {
+  display: flex;
+  gap: calc(var(--ks-spacing-xxs) * 0.75);
+  font: var(--ks-font-interface-s);
+  justify-content: flex-start;
+  color: var(--ks-text-color-interface);
+}
+.dsa-event-registration__info address {
+  font-style: normal;
+}
+.dsa-event-registration__info--location {
+  flex-basis: 100%;
+}
+.dsa-event-registration__info .icon {
+  align-self: flex-start;
+  width: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
+  height: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
+  color: var(--ks-text-color-primary);
+  flex-shrink: 0;
+}
+.dsa-event-registration__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-xs);
+}
+.dsa-event-registration__form .c-button {
+  align-self: flex-end;
+}
+.dsa-event-registration__mandatory-text {
+  font: var(--ks-font-interface-xs);
+  color: var(--ks-color-fg-alpha-4);
+  margin-top: var(--ks-spacing-xxs);
+  font-style: italic;
+}