@kickstartds/ds-agency-premium 1.6.71--canary.45.1821.0 → 1.6.71--canary.45.1833.0

package/dist/SearchFilterProps-2fa6419b.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+interface SearchFilterProps {
+    /**
+     * The title of the search filter.
+     */
+    title?: string;
+    /**
+     * The categories to filter by.
+     */
+    categories?: {
+        /**
+         * The name of the category.
+         */
+        title?: string;
+        /**
+         * The number of items in the category.
+         */
+        amount?: string;
+        /**
+         * The URL to filter by this category.
+         */
+        url?: string;
+    }[];
+}
+export { SearchFilterProps };

package/dist/SearchResultProps-224c2338.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+/**
+ * A URL linking to the search result or more information.
+ */
+type URL = string;
+/**
+ * The title of the search result.
+ */
+type Title = string;
+/**
+ * The main content or description of the search result.
+ */
+type Text = string;
+/**
+ * Whether to display the link to the search result.
+ */
+type ShowLink = boolean;
+/**
+ * An ARIA label for accessibility purposes.
+ */
+type ARIALabel = string;
+interface SearchResultProps {
+    url?: URL;
+    title?: Title;
+    text?: Text;
+    showLink?: ShowLink;
+    ariaLabel?: ARIALabel;
+}
+export { URL, Title, Text, ShowLink, ARIALabel, SearchResultProps };

package/dist/components/cta/cta.css

@@ -3,7 +3,7 @@
   --dsa-cta--border-radius: var(--ks-border-radius-surface);
   --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__content--max-width: var(--dsa-tile--width_largest);
   --dsa-cta__headline--color: var(--dsa-headline--color);
   --dsa-cta__subheadline--color: var(--dsa-headline__subheadline--color);
   --dsa-cta__copy--font: var(--ks-font-copy-m);
@@ -46,7 +46,7 @@
   width: auto;
 }
 .dsa-cta.c-storytelling .c-storytelling__box__content {
-  max-width: var(--dsa-cta__content--max-width, var(--dsa-content--width_narrow));
+  max-width: var(--dsa-cta__content--max-width, var(--dsa-tile--width_largest));
 }
 .dsa-cta.c-storytelling .c-storytelling__box:only-child {
   --c-storytelling--horizontal-padding: var(--dsa-cta__content--horizontal-padding);

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

@@ -2,6 +2,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--ks-spacing-stack-s);
+  max-width: 500px;
+  margin: auto;
+  margin-top: 200px;
 }
 .dsa-event-registration__link {
   width: fit-content;
@@ -63,14 +66,26 @@
 .dsa-event-registration__form {
   display: flex;
   flex-direction: column;
-  gap: var(--ks-spacing-stack-xs);
+  gap: var(--ks-spacing-stack-s);
 }
 .dsa-event-registration__form .c-button {
   align-self: flex-end;
 }
+.dsa-event-registration__inputs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-s);
+}
+.dsa-event-registration__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-m);
+}
 .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;
+  flex-basis: var(--dsa-tile--width_small);
 }

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

@@ -12,7 +12,7 @@ import 'classnames';
 import '@kickstartds/base/lib/headline';
 import '@kickstartds/base/lib/button';
 
-const EventRegistrationContextDefault = forwardRef(({ date, time, title, link, label, location, nameInput, emailInput, mandatoryText, cta, confirmationCheckboxLabel, }, ref) => (jsxs("div", { ref: ref, className: "dsa-event-registration", children: [jsx(Headline, { spaceAfter: "minimum", text: title, level: "h2", sub: label, switchOrder: true }), jsxs("div", { className: "dsa-event-registration__infos", children: [jsxs("div", { className: "dsa-event-registration__details", children: [jsxs("div", { className: "dsa-event-registration__date", children: [jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "time" }), time] })] }), jsxs("div", { className: "dsa-event-registration__location dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), jsxs("address", { children: [location?.name && (jsx("span", { className: "dsa-event-registration__location-name", children: location.name })), jsx(Markdown, { className: "dsa-event-registration__location-address", children: location?.address })] })] })] }), jsx(Link, { className: "dsa-event-registration__link", href: link?.url, children: link?.text })] }), jsxs("form", { className: "dsa-event-registration__form", children: [jsx(TextField, { label: nameInput.label, placeholder: nameInput?.placeholder }), jsx(TextField, { type: "email", label: emailInput.label, placeholder: emailInput?.placeholder }), jsx(Checkbox, { label: confirmationCheckboxLabel, name: "confirmation-checkbox", id: "confirmation-checkbox" }), jsx(Markdown, { className: "dsa-event-registration__mandatory-text", children: mandatoryText }), jsx(Button, { label: cta.label, url: cta.url, "aria-label": cta?.ariaLabel, variant: "primary", size: "small" })] })] })));
+const EventRegistrationContextDefault = forwardRef(({ date, time, title, link, label, location, nameInput, emailInput, mandatoryText, cta, confirmationCheckboxLabel, }, ref) => (jsxs("div", { ref: ref, className: "dsa-event-registration", children: [jsx(Headline, { spaceAfter: "minimum", text: title, level: "h2", sub: label, switchOrder: true }), jsxs("div", { className: "dsa-event-registration__infos", children: [jsxs("div", { className: "dsa-event-registration__details", children: [jsxs("div", { className: "dsa-event-registration__date", children: [jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "time" }), time] })] }), jsxs("div", { className: "dsa-event-registration__location dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), jsxs("address", { children: [location?.name && (jsx("span", { className: "dsa-event-registration__location-name", children: location.name })), jsx(Markdown, { className: "dsa-event-registration__location-address", children: location?.address })] })] })] }), jsx(Link, { className: "dsa-event-registration__link", href: link?.url, children: link?.text })] }), jsxs("form", { className: "dsa-event-registration__form", children: [jsxs("div", { className: "dsa-event-registration__inputs", children: [jsx(TextField, { label: nameInput.label, placeholder: nameInput?.placeholder }), jsx(TextField, { type: "email", label: emailInput.label, placeholder: emailInput?.placeholder }), jsx(Checkbox, { label: confirmationCheckboxLabel, name: "confirmation-checkbox", id: "confirmation-checkbox" })] }), jsxs("div", { className: "dsa-event-registration__footer", children: [jsx(Markdown, { className: "dsa-event-registration__mandatory-text", children: mandatoryText }), jsx(Button, { label: cta.label, url: cta.url, "aria-label": cta?.ariaLabel, variant: "primary", size: "small" })] })] })] })));
 const EventRegistrationContext = createContext(EventRegistrationContextDefault);
 const EventRegistration = forwardRef((props, ref) => {
     const Component = useContext(EventRegistrationContext);

package/dist/components/page-wrapper/index.js

@@ -70,6 +70,14 @@ var IconSprite = (() => /*#__PURE__*/ jsxs("svg", {
             children: /*#__PURE__*/ jsx("path", {
                 d: "M13.4 12L18.7 6.7C19.1 6.3 19.1 5.7 18.7 5.3C18.3 4.9 17.7 4.9 17.3 5.3L12 10.6L6.7 5.3C6.3 4.9 5.7 4.9 5.3 5.3C4.9 5.7 4.9 6.3 5.3 6.7L10.6 12L5.3 17.3C4.9 17.7 4.9 18.3 5.3 18.7C5.5 18.9 5.7 19 6 19C6.3 19 6.5 18.9 6.7 18.7L12 13.4L17.3 18.7C17.5 18.9 17.8 19 18 19C18.2 19 18.5 18.9 18.7 18.7C19.1 18.3 19.1 17.7 18.7 17.3L13.4 12Z"
             })
+        }), /*#__PURE__*/ jsx("symbol", {
+            id: "icon-search",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M11 2C15.9706 2 20 6.02944 20 11C20 13.125 19.2618 15.0766 18.0303 16.6162L21.707 20.293C22.0972 20.6835 22.0974 21.3166 21.707 21.707C21.3166 22.0974 20.6835 22.0972 20.293 21.707L16.6162 18.0303C15.0766 19.2618 13.125 20 11 20C6.02944 20 2 15.9706 2 11C2 6.02944 6.02944 2 11 2ZM11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18C12.89 18 14.6038 17.2497 15.8633 16.0322C15.8877 16.0012 15.9148 15.9719 15.9434 15.9434C15.9719 15.9148 16.0012 15.8877 16.0322 15.8633C17.2497 14.6038 18 12.89 18 11C18 7.13401 14.866 4 11 4Z"
+            })
         }), /*#__PURE__*/ jsxs("symbol", {
             id: "icon-skip-back",
             viewBox: "0 0 24 24",

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 08 Jul 2025 11:52:16 GMT
+ * Generated on Tue, 08 Jul 2025 14:19:26 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -215,7 +215,7 @@
     "id": "page-archetypes-blog-overview--blog-overview",
     "group": "Page Archetypes/Blog Overview",
     "name": "BlogOverview",
-    "code": "<BlogOverview\n  cta={{\n    align: 'center',\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact us',\n        url: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Book a meeting',\n        url: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: true,\n    headline: 'Get in touch',\n    highlightText: false,\n    image: {\n      align: 'center',\n      padding: false,\n      src: 'img/contact-person.png'\n    },\n    inverted: false,\n    order: {\n      desktopImageLast: false,\n      mobileImageLast: false\n    },\n    padding: false,\n    sub: 'Chat with us about getting your product or platform to market faster',\n    text: 'Our modular design approach allows for flexibility and scalability in your application\\'s architecture.',\n    textAlign: 'left',\n    width: 'wide'\n  }}\n  latest={{\n    alt: 'Image of a business team working',\n    author: {\n      image: 'img/people/author-alex.png',\n      name: 'John Doe',\n      title: 'CEO'\n    },\n    date: '12/30/2022',\n    headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n    image: 'img/close-up-young-business-team-working.png',\n    link: {\n      label: 'Read more',\n      text: 'Read article',\n      url: 'https://example.com/article1'\n    },\n    readingTime: '5 min read',\n    tags: [\n      {\n        entry: 'Design Systems'\n      },\n      {\n        entry: 'Headless Websites'\n      },\n      {\n        entry: 'Training'\n      }\n    ],\n    teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.'\n  }}\n  latestTitle=\"Latest Post\"\n  list={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article3'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Training'\n        }\n      ],\n      teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.'\n    }\n  ]}\n  listTitle=\"Recent Posts\"\n  more={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    }\n  ]}\n  moreTitle=\"Featured Posts\"\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'default',\n      width: 'default'\n    }\n  ]}\n/>",
+    "code": "<BlogOverview\n  cta={{\n    align: 'center',\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact us',\n        url: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Book a meeting',\n        url: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: true,\n    headline: 'Get in touch',\n    highlightText: false,\n    image: {\n      align: 'center',\n      padding: false,\n      src: 'img/people/contact-person.png'\n    },\n    inverted: false,\n    order: {\n      desktopImageLast: false,\n      mobileImageLast: false\n    },\n    padding: false,\n    sub: 'Chat with us about getting your product or platform to market faster',\n    text: 'Our modular design approach allows for flexibility and scalability in your application\\'s architecture.',\n    textAlign: 'left',\n    width: 'wide'\n  }}\n  latest={{\n    alt: 'Image of a business team working',\n    author: {\n      image: 'img/people/author-alex.png',\n      name: 'John Doe',\n      title: 'CEO'\n    },\n    date: '12/30/2022',\n    headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n    image: 'img/close-up-young-business-team-working.png',\n    link: {\n      label: 'Read more',\n      text: 'Read article',\n      url: 'https://example.com/article1'\n    },\n    readingTime: '5 min read',\n    tags: [\n      {\n        entry: 'Design Systems'\n      },\n      {\n        entry: 'Headless Websites'\n      },\n      {\n        entry: 'Training'\n      }\n    ],\n    teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.'\n  }}\n  latestTitle=\"Latest Post\"\n  list={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article3'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Training'\n        }\n      ],\n      teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.'\n    }\n  ]}\n  listTitle=\"Recent Posts\"\n  more={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    }\n  ]}\n  moreTitle=\"Featured Posts\"\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'default',\n      width: 'default'\n    }\n  ]}\n/>",
     "args": {
       "section": [
         {
@@ -519,7 +519,7 @@
         "image": {
           "padding": false,
           "align": "center",
-          "src": "img/contact-person.png"
+          "src": "img/people/contact-person.png"
         },
         "order": {
           "mobileImageLast": false,
@@ -1050,6 +1050,170 @@
     },
     "screenshot": "img/screenshots/page-archetypes-event-list--event-list.png"
   },
+  {
+    "id": "page-archetypes-search--search",
+    "group": "Page Archetypes/Search",
+    "name": "Search",
+    "code": "<Search\n  events={[\n    {\n      category: 'Buyers',\n      ctaText: 'Show event',\n      date: 'FRI, JAN 16',\n      image: {\n        alt: 'This is an image of a flower',\n        src: 'https://picsum.photos/seed/flower/800/600'\n      },\n      location: {\n        address: 'Köln',\n        name: 'Stadthalle'\n      },\n      tags: [\n        'AI'\n      ],\n      text: 'The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.',\n      time: '10:00',\n      title: 'This is a event teaser title',\n      url: 'https://example.com'\n    },\n    {\n      category: 'Buyers',\n      ctaText: 'Show event',\n      date: 'FRI, JAN 16',\n      image: {\n        alt: 'This is an image of a flower',\n        src: 'https://picsum.photos/seed/flower/800/600'\n      },\n      location: {\n        address: 'Köln',\n        name: 'Stadthalle'\n      },\n      tags: [\n        'AI'\n      ],\n      text: 'The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.',\n      time: '10:00',\n      title: 'This is a event teaser title',\n      url: 'https://example.com'\n    },\n    {\n      category: 'Buyers',\n      ctaText: 'Show event',\n      date: 'FRI, JAN 16',\n      image: {\n        alt: 'This is an image of a flower',\n        src: 'https://picsum.photos/seed/flower/800/600'\n      },\n      location: {\n        address: 'Köln',\n        name: 'Stadthalle'\n      },\n      tags: [\n        'AI'\n      ],\n      text: 'The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.',\n      time: '10:00',\n      title: 'This is a event teaser title',\n      url: 'https://example.com'\n    }\n  ]}\n  filter={{\n    applyButton: {\n      label: 'Filter Appointments'\n    },\n    categories: {\n      categoryCheckboxes: [\n        'Category Filter',\n        'Category Filter',\n        'Category Filter'\n      ],\n      title: 'Categories',\n      toggle: true\n    },\n    datePicker: {\n      dateFromInput: {\n        label: 'From',\n        placeholder: 'Select a date'\n      },\n      dateToInput: {\n        label: 'To',\n        placeholder: 'Select a date'\n      },\n      title: 'Find Appointment',\n      toggle: true\n    },\n    resetButton: {\n      label: 'Reset Filters'\n    }\n  }}\n  searchFilter={{\n    categories: [\n      {\n        amount: 10,\n        title: 'Pages',\n        url: '#'\n      },\n      {\n        amount: 5,\n        title: 'News',\n        url: '#'\n      },\n      {\n        amount: 2,\n        title: 'Blog Posts',\n        url: '#'\n      }\n    ],\n    title: 'Search Filters'\n  }}\n  searchResults={[\n    {\n      ariaLabel: 'Search Result: AI Conference 2023',\n      showLink: true,\n      text: 'Join us for the annual **AI Conference** bringing together experts from around the world.\\n        Register now to secure your spot and learn about the latest advancements in AI.',\n      title: 'AI Conference 2023',\n      url: 'https://www.example.com/ai-conference-2023'\n    },\n    {\n      ariaLabel: 'Search Result: Web Development Summit 2023',\n      showLink: true,\n      text: 'Explore the future of web development at the **Web Development Summit**.\\n        Discover new technologies and network with industry leaders.',\n      title: 'Web Development Summit 2023',\n      url: 'https://www.example.com/web-development-summit-2023'\n    },\n    {\n      ariaLabel: 'Search Result: Data Science Bootcamp',\n      showLink: true,\n      text: 'Enhance your skills with our **Data Science Bootcamp**.\\n        Learn from experts and work on real-world projects.',\n      title: 'Data Science Bootcamp',\n      url: 'https://www.example.com/data-science-bootcamp'\n    },\n    {\n      ariaLabel: 'Search Result: AI Conference 2023',\n      showLink: true,\n      text: 'Join us for the annual **AI Conference** bringing together experts from around the world.\\n        Register now to secure your spot and learn about the latest advancements in AI.',\n      title: 'AI Conference 2023',\n      url: 'https://www.example.com/ai-conference-2023'\n    },\n    {\n      ariaLabel: 'Search Result: Web Development Summit 2023',\n      showLink: true,\n      text: 'Explore the future of web development at the **Web Development Summit**.\\n        Discover new technologies and network with industry leaders.',\n      title: 'Web Development Summit 2023',\n      url: 'https://www.example.com/web-development-summit-2023'\n    },\n    {\n      ariaLabel: 'Search Result: Data Science Bootcamp',\n      showLink: true,\n      text: 'Enhance your skills with our **Data Science Bootcamp**.\\n        Learn from experts and work on real-world projects.',\n      title: 'Data Science Bootcamp',\n      url: 'https://www.example.com/data-science-bootcamp'\n    }\n  ]}\n/>",
+    "args": {
+      "filter": {
+        "datePicker": {
+          "title": "Find Appointment",
+          "dateFromInput": {
+            "label": "From",
+            "placeholder": "Select a date"
+          },
+          "dateToInput": {
+            "label": "To",
+            "placeholder": "Select a date"
+          },
+          "toggle": true
+        },
+        "categories": {
+          "title": "Categories",
+          "categoryCheckboxes": [
+            "Category Filter",
+            "Category Filter",
+            "Category Filter"
+          ],
+          "toggle": true
+        },
+        "applyButton": {
+          "label": "Filter Appointments"
+        },
+        "resetButton": {
+          "label": "Reset Filters"
+        }
+      },
+      "events": [
+        {
+          "category": "Buyers",
+          "title": "This is a event teaser title",
+          "text": "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.",
+          "date": "FRI, JAN 16",
+          "time": "10:00",
+          "location": {
+            "name": "Stadthalle",
+            "address": "Köln"
+          },
+          "tags": [
+            "AI"
+          ],
+          "image": {
+            "src": "https://picsum.photos/seed/flower/800/600",
+            "alt": "This is an image of a flower"
+          },
+          "url": "https://example.com",
+          "ctaText": "Show event"
+        },
+        {
+          "category": "Buyers",
+          "title": "This is a event teaser title",
+          "text": "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.",
+          "date": "FRI, JAN 16",
+          "time": "10:00",
+          "location": {
+            "name": "Stadthalle",
+            "address": "Köln"
+          },
+          "tags": [
+            "AI"
+          ],
+          "image": {
+            "src": "https://picsum.photos/seed/flower/800/600",
+            "alt": "This is an image of a flower"
+          },
+          "url": "https://example.com",
+          "ctaText": "Show event"
+        },
+        {
+          "category": "Buyers",
+          "title": "This is a event teaser title",
+          "text": "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.",
+          "date": "FRI, JAN 16",
+          "time": "10:00",
+          "location": {
+            "name": "Stadthalle",
+            "address": "Köln"
+          },
+          "tags": [
+            "AI"
+          ],
+          "image": {
+            "src": "https://picsum.photos/seed/flower/800/600",
+            "alt": "This is an image of a flower"
+          },
+          "url": "https://example.com",
+          "ctaText": "Show event"
+        }
+      ],
+      "searchFilter": {
+        "title": "Search Filters",
+        "categories": [
+          {
+            "title": "Pages",
+            "url": "#",
+            "amount": 10
+          },
+          {
+            "title": "News",
+            "url": "#",
+            "amount": 5
+          },
+          {
+            "title": "Blog Posts",
+            "url": "#",
+            "amount": 2
+          }
+        ]
+      },
+      "searchResults": [
+        {
+          "url": "https://www.example.com/ai-conference-2023",
+          "title": "AI Conference 2023",
+          "text": "Join us for the annual **AI Conference** bringing together experts from around the world.\n        Register now to secure your spot and learn about the latest advancements in AI.",
+          "ariaLabel": "Search Result: AI Conference 2023",
+          "showLink": true
+        },
+        {
+          "url": "https://www.example.com/web-development-summit-2023",
+          "title": "Web Development Summit 2023",
+          "text": "Explore the future of web development at the **Web Development Summit**.\n        Discover new technologies and network with industry leaders.",
+          "ariaLabel": "Search Result: Web Development Summit 2023",
+          "showLink": true
+        },
+        {
+          "url": "https://www.example.com/data-science-bootcamp",
+          "title": "Data Science Bootcamp",
+          "text": "Enhance your skills with our **Data Science Bootcamp**.\n        Learn from experts and work on real-world projects.",
+          "ariaLabel": "Search Result: Data Science Bootcamp",
+          "showLink": true
+        },
+        {
+          "url": "https://www.example.com/ai-conference-2023",
+          "title": "AI Conference 2023",
+          "text": "Join us for the annual **AI Conference** bringing together experts from around the world.\n        Register now to secure your spot and learn about the latest advancements in AI.",
+          "ariaLabel": "Search Result: AI Conference 2023",
+          "showLink": true
+        },
+        {
+          "url": "https://www.example.com/web-development-summit-2023",
+          "title": "Web Development Summit 2023",
+          "text": "Explore the future of web development at the **Web Development Summit**.\n        Discover new technologies and network with industry leaders.",
+          "ariaLabel": "Search Result: Web Development Summit 2023",
+          "showLink": true
+        },
+        {
+          "url": "https://www.example.com/data-science-bootcamp",
+          "title": "Data Science Bootcamp",
+          "text": "Enhance your skills with our **Data Science Bootcamp**.\n        Learn from experts and work on real-world projects.",
+          "ariaLabel": "Search Result: Data Science Bootcamp",
+          "showLink": true
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/page-archetypes-search--search.png"
+  },
   {
     "id": "components-contact--wide-image",
     "group": "Components/Contact",
@@ -1333,7 +1497,7 @@
     "id": "components-cta--contact-banner",
     "group": "Components/Cta",
     "name": "ContactBanner",
-    "code": "<Cta\n  align=\"center\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact us',\n      url: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Book a meeting',\n      url: '#'\n    }\n  ]}\n  headline=\"Get in touch\"\n  image={{\n    align: 'center',\n    padding: false,\n    src: 'img/contact-person.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  padding\n  sub=\"Chat with us about getting your product or platform to market faster\"\n  text=\"Our modular design approach allows for flexibility and scalability in your application's architecture.\"\n  textAlign=\"left\"\n/>",
+    "code": "<Cta\n  align=\"center\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact us',\n      url: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Book a meeting',\n      url: '#'\n    }\n  ]}\n  headline=\"Get in touch\"\n  image={{\n    align: 'center',\n    padding: false,\n    src: 'img/people/contact-person.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  padding\n  sub=\"Chat with us about getting your product or platform to market faster\"\n  text=\"Our modular design approach allows for flexibility and scalability in your application's architecture.\"\n  textAlign=\"left\"\n/>",
     "args": {
       "headline": "Get in touch",
       "sub": "Chat with us about getting your product or platform to market faster",
@@ -1354,7 +1518,7 @@
       "image": {
         "padding": false,
         "align": "center",
-        "src": "img/contact-person.png"
+        "src": "img/people/contact-person.png"
       },
       "order": {
         "mobileImageLast": false,
@@ -3340,6 +3504,65 @@
     },
     "screenshot": "img/screenshots/industry-pagination--default.png"
   },
+  {
+    "id": "industry-search-bar--default",
+    "group": "Industry / Search Bar",
+    "name": "Default",
+    "code": "<SearchBar\n  alternativeResult=\"AI Conference\"\n  alternativeText=\"Did you mean\"\n  buttonText=\"Search\"\n  hint=\"Press <kbd>Enter</kbd> to search\"\n  placeholder=\"Search...\"\n/>",
+    "args": {
+      "placeholder": "Search...",
+      "buttonText": "Search",
+      "hint": "Press <kbd>Enter</kbd> to search",
+      "alternativeText": "Did you mean",
+      "alternativeResult": "AI Conference"
+    },
+    "screenshot": "img/screenshots/industry-search-bar--default.png"
+  },
+  {
+    "id": "industry-search-filter--default",
+    "group": "Industry / Search Filter",
+    "name": "Default",
+    "code": "<SearchFilter\n  categories={[\n    {\n      amount: '10',\n      title: 'Pages',\n      url: '#'\n    },\n    {\n      amount: '5',\n      title: 'News',\n      url: '#'\n    },\n    {\n      amount: '8',\n      title: 'Blog Posts',\n      url: '#'\n    }\n  ]}\n  title=\"Search by category\"\n/>",
+    "args": {
+      "title": "Search by category",
+      "categories": [
+        {
+          "title": "Pages",
+          "amount": "10",
+          "url": "#"
+        },
+        {
+          "title": "News",
+          "amount": "5",
+          "url": "#"
+        },
+        {
+          "title": "Blog Posts",
+          "amount": "8",
+          "url": "#"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/industry-search-filter--default.png"
+  },
+  {
+    "id": "industry-search-result--default",
+    "group": "Industry / Search Result",
+    "name": "Default",
+    "code": "<SearchResult\n  ariaLabel=\"Search Result: AI Conference 2023\"\n  link={{\n    label: 'Read more',\n    url: 'https://www.example.com/ai-conference-2023'\n  }}\n  showLink\n  text=\"Join us for the annual **AI Conference** brings together experts from around the world\n[...] register now for the **AI Conference** to secure your spot\n[...] highlights from last year’s **AI Conference** included keynote speeches on machine learning\n[...] find out more about the **AI Conference** agenda and speakers\"\n  title=\"AI Conference 2023\"\n  url=\"https://www.example.com/ai-conference-2023\"\n/>",
+    "args": {
+      "url": "https://www.example.com/ai-conference-2023",
+      "title": "AI Conference 2023",
+      "text": "Join us for the annual **AI Conference** brings together experts from around the world\n[...] register now for the **AI Conference** to secure your spot\n[...] highlights from last year’s **AI Conference** included keynote speeches on machine learning\n[...] find out more about the **AI Conference** agenda and speakers",
+      "showLink": true,
+      "ariaLabel": "Search Result: AI Conference 2023",
+      "link": {
+        "url": "https://www.example.com/ai-conference-2023",
+        "label": "Read more"
+      }
+    },
+    "screenshot": "img/screenshots/industry-search-result--default.png"
+  },
   {
     "id": "layout-section--dynamic-layout",
     "group": "Layout/Section",

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

@@ -0,0 +1,19 @@
+import { FC, PropsWithChildren } from "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 { SearchFilterProps } from "../../SearchFilterProps-2fa6419b.js";
+import { SearchResultProps } from "../../SearchResultProps-224c2338.js";
+interface SearchProps {
+    /**
+     * Referenced component SearchFilterProps
+     */
+    searchFilter?: SearchFilterProps;
+    searchResults?: SearchResultProps[];
+}
+declare const Search: FC<PropsWithChildren<SearchProps>>;
+export type { SearchProps };
+export { Search };

package/dist/components/search/index.js

@@ -0,0 +1,39 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Section } from '../section/index.js';
+import { SplitWeighted } from '../split-weighted/index.js';
+import { SearchFilter } from '../search-filter/index.js';
+import { SearchResult } from '../search-result/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';
+import '@kickstartds/base/lib/section';
+import '../section/js/Section.client.js';
+import '@kickstartds/core/lib/component';
+import 'markdown-to-jsx';
+import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/icon';
+
+const Search = ({ searchFilter, searchResults, }) => (jsx(Fragment, { children: jsx(Section, { width: "wide", children: jsx(SplitWeighted, { verticalAlign: "sticky", mainLayout: {
+                minWidth: "narrow",
+            }, asideLayout: {
+                gutter: "small",
+            }, order: {
+                desktop: "asideFirst",
+                mobile: "asideFirst",
+            }, aside: jsxs(Fragment, { children: [jsx(SearchFilter, { ...searchFilter }), jsx(RichText, { text: `Showing 6 out of 18 results` })] }), main: jsxs(Fragment, { children: [searchResults.map((searchResult, index) => (jsx(SearchResult, { ...searchResult }, index))), jsx(Pagination, { pages: [
+                            {
+                                url: "https://example.com/page1",
+                                active: true,
+                            },
+                            {
+                                url: "https://example.com/page2",
+                            },
+                            {
+                                url: "https://example.com/page3",
+                            },
+                        ] })] }) }) }) }));
+Search.displayName = "Search";
+
+export { Search };