@kickstartds/ds-agency-premium 1.6.71--canary.50.2230.0 → 1.6.71--canary.50.2236.0

package/dist/{SearchResultProps-5e57c4cb.d.ts → SearchResultProps-4035f21e.d.ts}

@@ -40,8 +40,8 @@ interface PreviewImage {
      */
     src?: string;
     /**
-     * Large display of the preview image.
+     * Small display of the preview image.
      */
-    large?: boolean;
+    small?: boolean;
 }
 export { URL, Title, Text, ShowLink, ARIALabel, SearchResultProps, PreviewImage };

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

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

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

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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Sep 2025 08:26:30 GMT
+ * Generated on Thu, 04 Sep 2025 11:58:24 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -3932,17 +3932,39 @@
     },
     "screenshot": "img/screenshots/corporate-search-filter--default.png"
   },
+  {
+    "id": "corporate-search-form--pagefind",
+    "group": "Corporate / Search Form",
+    "name": "Pagefind",
+    "code": "<SearchForm component=\"dsa.search-form.pagefind\" />",
+    "args": {
+      "component": "dsa.search-form.pagefind"
+    },
+    "screenshot": "img/screenshots/corporate-search-form--pagefind.png"
+  },
+  {
+    "id": "corporate-search-modal--pagefind",
+    "group": "Corporate / Search Modal",
+    "name": "Pagefind",
+    "code": "<>\n  <Button\n    data-topic=\"dsa.search-modal.open\"\n    ks-component=\"dsa.radio-emit\"\n    label=\"open\"\n    size=\"small\"\n  />\n  <hr />\n  <SearchModal\n    closeAriaLabel=\"close\"\n    formComponent=\"dsa.search-form.pagefind\"\n    headline=\"Search\"\n  />\n</>",
+    "args": {
+      "headline": "Search",
+      "closeAriaLabel": "close",
+      "formComponent": "dsa.search-form.pagefind"
+    },
+    "screenshot": "img/screenshots/corporate-search-modal--pagefind.png"
+  },
   {
     "id": "corporate-search-result--default",
     "group": "Corporate / Search Result",
     "name": "Default",
-    "code": "<SearchResult\n  ariaLabel=\"Search Result: AI Conference 2023\"\n  previewImage={{\n    large: false,\n    src: '/img/full-shot-different-people-working-together.png'\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/>",
+    "code": "<SearchResult\n  ariaLabel=\"Search Result: AI Conference 2023\"\n  previewImage={{\n    small: false,\n    src: '/img/full-shot-different-people-working-together.png'\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",
       "previewImage": {
-        "src": "/img/full-shot-different-people-working-together.png",
-        "large": false
+        "small": false,
+        "src": "/img/full-shot-different-people-working-together.png"
       },
       "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,

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

@@ -8,7 +8,7 @@ import { FC, PropsWithChildren } from "react";
 import { HeadlineProps } from "../../HeadlineProps-e1305784.js";
 import { SearchBarProps } from "../../SearchBarProps-26263244.js";
 import { SearchFilterProps } from "../../SearchFilterProps-2fa6419b.js";
-import { SearchResultProps } from "../../SearchResultProps-5e57c4cb.js";
+import { SearchResultProps } from "../../SearchResultProps-4035f21e.js";
 interface SearchProps {
     /**
      * Referenced component HeadlineProps

package/dist/components/search/search.schema.dereffed.json

@@ -234,14 +234,11 @@
             "properties": {
               "src": {
                 "type": "string",
-                "description": "A URL to an image preview for the search result.",
-                "examples": [
-                  "/img/full-shot-different-people-working-together.png"
-                ]
+                "description": "A URL to an image preview for the search result."
               },
-              "large": {
+              "small": {
                 "type": "boolean",
-                "description": "Large display of the preview image.",
+                "description": "Small display of the preview image.",
                 "default": false
               }
             },

package/dist/components/search-bar/index.js

@@ -9,7 +9,7 @@ import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
 const defaults = {};
 
-const SearchBarContextDefault = forwardRef(({ placeholder, hint = "Press <kbd>Enter</kbd> to search", alternativeText = "Did you mean", alternativeResult = "AI Conference", }, ref) => (jsxs("div", { className: "dsa-search-bar", ref: ref, children: [jsxs("div", { className: "dsa-search-bar__input-container", children: [jsx(TextField, { hideLabel: true, type: "search", placeholder: placeholder || "Search...", className: "dsa-search-bar__input", autoComplete: "off" }), jsx(Icon, { icon: "search" })] }), hint && jsx(Markdown, { className: "dsa-search-bar__hint", children: hint }), alternativeResult && (jsx("p", { className: "dsa-search-bar__alternative-text", children: jsxs(Fragment, { children: [alternativeText + " ", jsx(Link, { href: "#", children: alternativeResult })] }) }))] })));
+const SearchBarContextDefault = forwardRef(({ placeholder, hint = "Press <kbd>Enter</kbd> to search", alternativeText = "Did you mean", alternativeResult = "AI Conference", }, ref) => (jsxs("div", { className: "dsa-search-bar", ref: ref, children: [jsxs("div", { className: "dsa-search-bar__input-container", children: [jsx(TextField, { hideLabel: true, type: "search", placeholder: placeholder || "Search...", className: "dsa-search-bar__input", autoComplete: "off", name: "q" }), jsx(Icon, { icon: "search" })] }), hint && jsx(Markdown, { className: "dsa-search-bar__hint", children: hint }), alternativeResult && (jsx("p", { className: "dsa-search-bar__alternative-text", children: jsxs(Fragment, { children: [alternativeText + " ", jsx(Link, { href: "#", children: alternativeResult })] }) }))] })));
 const SearchBarContext = createContext(SearchBarContextDefault);
 const SearchBar = forwardRef((props, ref) => {
     const Component = useContext(SearchBarContext);

package/dist/components/search-form/SearchForm.client.d.ts

@@ -0,0 +1,13 @@
+declare class SearchForm {
+    static identifier: string;
+    constructor(element: any);
+    $searchInput: any;
+    $template: any;
+    $results: any;
+    clearResults(): void;
+    showResults(results: any): void;
+    onRadio(topic: any, fn: any): () => void;
+    on(element: any, type: any, fn: any): () => any;
+    $(selector: any, element?: any): any;
+}
+export { SearchForm as default };

package/dist/components/search-form/SearchForm.client.js

@@ -0,0 +1,63 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+const parser = new DOMParser();
+class SearchForm extends Component {
+    constructor(element) {
+        super(element);
+        this.$searchInput = this.$(".dsa-search-bar__input");
+        this.$template = this.$("[data-template=result]");
+        this.$results = this.$(".dsa-search-form__results");
+        this.on(element, "submit", (event) => {
+            event.preventDefault();
+            const url = new URL(element.getAttribute("action") || "", window.location);
+            const formData = new FormData(element);
+            url.hash = new URLSearchParams(formData);
+            window.location.href = url;
+        });
+        this.on(window, "hashchange", (event) => {
+            window._ks.radio.emit("dsa.search-form.hashchange");
+        });
+    }
+    clearResults() {
+        this.$results.textContent = "";
+    }
+    showResults(results) {
+        for (const result of results) {
+            const clone = this.$template.cloneNode(true);
+            clone.removeAttribute("hidden");
+            clone.removeAttribute("data-template");
+            clone.firstElementChild.setAttribute("href", result.url);
+            if (result.title) {
+                const title = clone.querySelector(".dsa-search-result__title");
+                title.textContent = result.title;
+            }
+            if (result.excerpt) {
+                const doc = parser.parseFromString(result.excerpt, "text/html");
+                const excerpt = clone.querySelector(".dsa-search-result__text span");
+                excerpt.replaceChildren(...doc.body.childNodes);
+            }
+            const link = clone.querySelector(".dsa-search-result__link");
+            link.textContent = result.url;
+            this.$results.appendChild(clone);
+        }
+    }
+    onRadio(topic, fn) {
+        const token = window._ks.radio.on(topic, fn);
+        const cleanUp = () => window._ks.radio.off(token);
+        this.onDisconnect(cleanUp);
+        return cleanUp;
+    }
+    on(element, type, fn) {
+        const cleanUp = () => element.removeventListener(type, fn);
+        element.addEventListener(type, fn);
+        this.onDisconnect(cleanUp);
+        return cleanUp;
+    }
+    $(selector, element = this.element) {
+        return element.querySelector(selector);
+    }
+}
+SearchForm.identifier = "dsa.search-form";
+define(SearchForm.identifier, SearchForm);
+
+export { SearchForm as default };

package/dist/components/search-form/SearchFormPagefind.client.d.ts

@@ -0,0 +1,4 @@
+import SearchForm from "./SearchForm.client.js";
+declare class SearchFormPagefind extends SearchForm {
+}
+export { SearchFormPagefind as default };

package/dist/components/search-form/SearchFormPagefind.client.js

@@ -0,0 +1,57 @@
+import { define } from '@kickstartds/core/lib/component';
+import SearchForm from './SearchForm.client.js';
+
+const staticPageFindPath = "/pagefind/pagefind.js";
+class SearchFormPagefind extends SearchForm {
+    constructor(element) {
+        super(element);
+        console.log("hello");
+        (async () => {
+            const pagefind = await import(/* @vite-ignore */ staticPageFindPath);
+            await pagefind.init();
+            const search = async () => {
+                if (!pagefind)
+                    return;
+                if (this.$searchInput.value.length) {
+                    const search = await pagefind.debouncedSearch(this.$searchInput.value);
+                    if (search) {
+                        if (search.results.length) {
+                            // TODO: Pagination / Load More
+                            const results = await Promise.all(search.results.map((result) => result.data()));
+                            this.clearResults();
+                            this.showResults(results.map((result) => ({
+                                title: result.meta.title,
+                                url: result.url,
+                                excerpt: result.excerpt,
+                            })));
+                        }
+                    }
+                }
+                else {
+                    this.clearResults();
+                }
+            };
+            const searchFromHash = () => {
+                const params = new URLSearchParams(window.location.hash.slice(1));
+                if (params.size) {
+                    for (const field of element.elements) {
+                        if (params.has(field.name)) {
+                            field.value = params.get(field.name);
+                        }
+                    }
+                    search();
+                }
+            };
+            this.on(this.$searchInput, "input", search);
+            this.on(element, "reset", (event) => {
+                this.clearResults();
+            });
+            this.onRadio("dsa.search-form.hashchange", searchFromHash);
+            searchFromHash();
+        })();
+    }
+}
+SearchFormPagefind.identifier = "dsa.search-form.pagefind";
+define(SearchFormPagefind.identifier, SearchFormPagefind);
+
+export { SearchFormPagefind as default };

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

@@ -0,0 +1,5 @@
+import { FC, HTMLAttributes } from "react";
+declare const SearchForm: FC<HTMLAttributes<HTMLFormElement> & {
+    component?: string;
+}>;
+export { SearchForm };

package/dist/components/search-form/index.js

@@ -0,0 +1,19 @@
+import "./search-form.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { SearchBar } from '../search-bar/index.js';
+import { SearchResult } from '../search-result/index.js';
+import './SearchForm.client.js';
+import 'react';
+import '@kickstartds/form/lib/text-field';
+import 'markdown-to-jsx';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/base/lib/link';
+import '../../helpers-12f48df8.js';
+import '@kickstartds/base/lib/rich-text';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/core/lib/component';
+
+const SearchForm = ({ className, component = "dsa.search-form", ...props }) => (jsxs("form", { className: classnames("dsa-search-form", className), "ks-component": component, ...props, children: [jsx(SearchBar, { alternativeText: "", alternativeResult: "", hint: "" }), jsx("li", { "data-template": "result", hidden: true, children: jsx(SearchResult, {}) }), jsx("ol", { className: "dsa-search-form__results" })] }));
+
+export { SearchForm };

package/dist/components/search-form/search-form.css

@@ -0,0 +1,7 @@
+.dsa-search-form__results {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-m);
+  list-style: none;
+  padding: 0;
+}

package/dist/components/search-modal/RadioEmit.client.d.ts

@@ -0,0 +1,5 @@
+declare class RadioEmit {
+    static identifier: string;
+    constructor(element: any);
+}
+export { RadioEmit as default };

package/dist/components/search-modal/RadioEmit.client.js

@@ -0,0 +1,18 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+class RadioEmit extends Component {
+    constructor(element) {
+        super(element);
+        const { topic, action = "click", value } = element.dataset;
+        console.log(topic, action);
+        const handler = () => window._ks.radio.emit(topic, value);
+        element.addEventListener(action, handler);
+        this.onDisconnect(() => {
+            element.removeEventListener(action, handler);
+        });
+    }
+}
+RadioEmit.identifier = "dsa.radio-emit";
+define(RadioEmit.identifier, RadioEmit);
+
+export { RadioEmit as default };

package/dist/components/search-modal/SearchModal.client.d.ts

@@ -0,0 +1,5 @@
+declare class SearchModal {
+    static identifier: string;
+    constructor(element: any);
+}
+export { SearchModal as default };

package/dist/components/search-modal/SearchModal.client.js

@@ -0,0 +1,31 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+class SearchModal extends Component {
+    constructor(element) {
+        super(element);
+        const form = element.querySelector(".dsa-search-form");
+        const searchInput = element.querySelector(".dsa-search-bar__input");
+        const onBackdropClick = (event) => {
+            if (event.target === element)
+                window._ks.radio.emit("dsa.search-modal.close");
+        };
+        const openToken = window._ks.radio.on("dsa.search-modal.open", () => {
+            element.showModal();
+            searchInput.focus();
+        });
+        const closeToken = window._ks.radio.on("dsa.search-modal.close", () => {
+            form.reset();
+            element.close();
+        });
+        element.addEventListener("click", onBackdropClick);
+        this.onDisconnect(() => {
+            window._ks.radio.off(openToken);
+            window._ks.radio.off(closeToken);
+            element.removeEventListener("click", onBackdropClick);
+        });
+    }
+}
+SearchModal.identifier = "dsa.search-modal";
+define(SearchModal.identifier, SearchModal);
+
+export { SearchModal as default };

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

@@ -0,0 +1,14 @@
+import { FC } 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.
+ */
+interface SearchModalProps {
+    headline: string;
+    closeAriaLabel: string;
+    formComponent?: string;
+}
+declare const SearchModal: FC<SearchModalProps>;
+export { SearchModal };

package/dist/components/search-modal/index.js

@@ -0,0 +1,34 @@
+import "./search-modal.css";
+import { jsx } from 'react/jsx-runtime';
+import { Section } from '../section/index.js';
+import { Button } from '../button/index.js';
+import { SearchForm } from '../search-form/index.js';
+import './SearchModal.client.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 '../../helpers-12f48df8.js';
+import '@kickstartds/base/lib/button';
+import '../search-bar/index.js';
+import '@kickstartds/form/lib/text-field';
+import 'markdown-to-jsx';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/base/lib/link';
+import '../search-result/index.js';
+import '@kickstartds/base/lib/rich-text';
+import '@kickstartds/base/lib/picture';
+import '../search-form/SearchForm.client.js';
+
+const SearchModal = ({ headline = "Search", closeAriaLabel = "close", formComponent, }) => (jsx("dialog", { "ks-component": "dsa.search-modal", className: "dsa-search-modal", children: jsx(Section, { headline: {
+            text: headline,
+            sub: closeAriaLabel,
+            // @ts-expect-error
+            renderSubheadline(sub) {
+                return (jsx(Button, { "aria-label": sub, label: "", icon: "close", size: "small", "ks-component": "dsa.radio-emit", "data-topic": "dsa.search-modal.close" }));
+            },
+        }, spaceBefore: "small", spaceAfter: "small", children: jsx(SearchForm, { component: formComponent }) }) }));
+
+export { SearchModal };

package/dist/components/search-modal/search-modal.css

@@ -0,0 +1,24 @@
+.dsa-search-modal[open] {
+  border-radius: var(--ks-border-radius-card);
+  border: var(--ks-border-color-interface) solid var(--ks-border-width-default);
+  box-shadow: var(--dsa-cookie-consent-dialogue--box-shadow, var(--ks-box-shadow-card));
+  background-color: var(--ks-background-color-default);
+  padding: 0;
+  width: calc(100% - var(--ks-spacing-inset-xs) * 2);
+  max-height: calc(100% - var(--ks-spacing-inset-xs) * 2);
+  margin-top: var(--ks-spacing-inset-xs);
+}
+.dsa-search-modal::backdrop {
+  background-color: var(--dsa-overlay--background-color);
+}
+.dsa-search-modal .l-section__container--headline .dsa-headline {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.dsa-search-modal .dsa-search-bar {
+  position: sticky;
+  top: 0;
+  background: var(--ks-background-color-default);
+  padding: 1em 0;
+}

package/dist/components/search-modal/search-modal.schema.dereffed.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-modal.schema.json",
+  "title": "Search Modal",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "type": "string",
+      "default": "Search"
+    },
+    "closeAriaLabel": {
+      "type": "string",
+      "default": "close"
+    },
+    "formComponent": {
+      "type": "string"
+    }
+  },
+  "required": [
+    "headline",
+    "closeAriaLabel"
+  ],
+  "additionalProperties": false
+}

package/dist/components/search-modal/search-modal.schema.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-modal.schema.json",
+  "title": "Search Modal",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "type": "string",
+      "default": "Search"
+    },
+    "closeAriaLabel": {
+      "type": "string",
+      "default": "close"
+    },
+    "formComponent": {
+      "type": "string"
+    }
+  },
+  "required": ["headline", "closeAriaLabel"],
+  "additionalProperties": false
+}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SearchResultProps } from "../../SearchResultProps-5e57c4cb.js";
+import { SearchResultProps } from "../../SearchResultProps-4035f21e.js";
 declare const SearchResultContextDefault: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>;
 declare const SearchResultContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>>;
 declare const SearchResult: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/search-result/index.js

@@ -9,14 +9,14 @@ import { Picture } from '@kickstartds/base/lib/picture';
 
 const defaults = {
     "previewImage": {
-        "large": false
+        "small": false
     },
     "showLink": true
 };
 
 const SearchResultContextDefault = forwardRef(({ title, previewImage, text, url, showLink, ariaLabel }, ref) => (jsxs(Link, { "aria-label": ariaLabel, href: url, className: classnames("dsa-search-result", {
-        "dsa-search-result--image-large": previewImage?.large,
-    }), ref: ref, children: [previewImage && (jsx(Picture, { src: previewImage?.src, alt: "", className: "dsa-search-result__image" })), jsxs("div", { className: "dsa-search-result__content", children: [jsx("span", { className: "dsa-search-result__title", children: title }), jsx(RichText, { text: text, className: "dsa-search-result__text" }), showLink && jsx("span", { className: "dsa-search-result__link", children: url })] })] })));
+        "dsa-search-result--image-small": previewImage?.small,
+    }), ref: ref, children: [jsx(Picture, { src: "img/full-shot-different-people-working-together.png", alt: "", className: "dsa-search-result__image" }), jsxs("div", { className: "dsa-search-result__content", children: [jsx("span", { className: "dsa-search-result__title", children: title }), jsx(RichText, { text: text, className: "dsa-search-result__text" }), showLink && jsx("span", { className: "dsa-search-result__link", children: url })] })] })));
 const SearchResultContext = createContext(SearchResultContextDefault);
 const SearchResult = forwardRef((props, ref) => {
     const Component = useContext(SearchResultContext);

package/dist/components/search-result/search-result.css

@@ -12,20 +12,23 @@
 .dsa-search-result:hover {
   border-color: var(--ks-border-color-card-interactive-hover);
 }
-.dsa-search-result--image-large .dsa-search-result__image {
-  max-width: var(--dsa-tile--width_medium);
+.dsa-search-result--image-small .dsa-search-result__image {
+  max-width: var(--dsa-tile--width_smallest);
 }
 .dsa-search-result__image {
-  flex-grow: 0;
-  max-width: var(--dsa-tile--width_small);
-  aspect-ratio: 4/3;
+  width: 100%;
+  height: fit-content;
   object-fit: cover;
+  aspect-ratio: 4/3;
+  border-radius: calc(var(--ks-border-radius-card) / 2);
+  max-width: var(--dsa-tile--width_small);
 }
 .dsa-search-result__content {
   display: flex;
   flex-direction: column;
   gap: var(--ks-spacing-stack-xs);
   flex-grow: 1;
+  flex-basis: var(--dsa-tile--width_medium);
 }
 .dsa-search-result__title {
   font: var(--dsa-topic--font);
@@ -33,7 +36,8 @@
   font-weight: var(--dsa-topic--font-weight);
 }
 .dsa-search-result__link {
-  width: fit-content;
+  max-width: 100%;
+  width: auto;
   font: var(--ks-font-interface-s);
   color: var(--dsa-link--color);
   transition: inherit;

package/dist/components/search-result/search-result.schema.dereffed.json

@@ -27,14 +27,11 @@
       "properties": {
         "src": {
           "type": "string",
-          "description": "A URL to an image preview for the search result.",
-          "examples": [
-            "/img/full-shot-different-people-working-together.png"
-          ]
+          "description": "A URL to an image preview for the search result."
         },
-        "large": {
+        "small": {
           "type": "boolean",
-          "description": "Large display of the preview image.",
+          "description": "Small display of the preview image.",
           "default": false
         }
       },

package/dist/components/search-result/search-result.schema.json

@@ -23,12 +23,11 @@
       "properties": {
         "src": {
           "type": "string",
-          "description": "A URL to an image preview for the search result.",
-          "examples": ["/img/full-shot-different-people-working-together.png"]
+          "description": "A URL to an image preview for the search result."
         },
-        "large": {
+        "small": {
           "type": "boolean",
-          "description": "Large display of the preview image.",
+          "description": "Small display of the preview image.",
           "default": false
         }
       }

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Sep 2025 08:26:33 GMT
+ * Generated on Thu, 04 Sep 2025 11:58:27 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 Thu, 04 Sep 2025 08:26:38 GMT
+ * Generated on Thu, 04 Sep 2025 11:58:31 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 Thu, 04 Sep 2025 08:26:35 GMT
+ * Generated on Thu, 04 Sep 2025 11:58:29 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 Thu, 04 Sep 2025 08:26:40 GMT
+ * Generated on Thu, 04 Sep 2025 11:58:33 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 Thu, 04 Sep 2025 08:26:30 GMT
+ * Generated on Thu, 04 Sep 2025 11:58:24 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Sep 2025 08:26:31 GMT
+ * Generated on Thu, 04 Sep 2025 11:58:25 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

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

package/dist/components/search/Search.client.d.ts

@@ -1,6 +0,0 @@
-declare class Search {
-    static identifier: string;
-    constructor(element: any);
-    on(element: any, type: any, fn: any): () => any;
-}
-export { Search as default };

package/dist/components/search/Search.client.js

@@ -1,71 +0,0 @@
-import { define, Component } from '@kickstartds/core/lib/component';
-
-const staticPageFindPath = "/pagefind/pagefind.js";
-const parser = new DOMParser();
-class Search extends Component {
-    constructor(element) {
-        super(element);
-        const input = element.querySelector(".dsa-search-bar__input");
-        const template = element.querySelector(".dsa\\.search\\.result");
-        const target = element.querySelector(".dsa\\.search\\.results");
-        // TODO: Arrow Key Navigation
-        const clearResults = () => {
-            target.textContent = "";
-        };
-        const showResults = (results) => {
-            for (const result of results) {
-                const clone = template.cloneNode(true);
-                clone.removeAttribute("hidden");
-                clone.firstElementChild.setAttribute("href", result.url);
-                if (result.title) {
-                    const title = clone.querySelector(".dsa-search-result__title");
-                    title.textContent = result.title;
-                }
-                if (result.excerpt) {
-                    const doc = parser.parseFromString(result.excerpt, "text/html");
-                    const excerpt = clone.querySelector(".dsa-search-result__text span");
-                    excerpt.replaceChildren(...doc.body.childNodes);
-                }
-                const link = clone.querySelector(".dsa-search-result__link");
-                link.textContent = result.url;
-                target.appendChild(clone);
-            }
-        };
-        (async () => {
-            const pagefind = await import(/* @vite-ignore */ staticPageFindPath);
-            await pagefind.init();
-            this.on(input, "input", async (event) => {
-                if (!pagefind)
-                    return;
-                if (input.value.length) {
-                    const search = await pagefind.debouncedSearch(input.value);
-                    if (search) {
-                        if (search.results.length) {
-                            // TODO: Pagination / Load More
-                            const results = await Promise.all(search.results.map((result) => result.data()));
-                            clearResults();
-                            showResults(results.map((result) => ({
-                                title: result.meta.title,
-                                url: result.url,
-                                excerpt: result.excerpt,
-                            })));
-                        }
-                    }
-                }
-                else {
-                    clearResults();
-                }
-            });
-        })();
-    }
-    on(element, type, fn) {
-        const cleanUp = () => element.removeventListener(type, fn);
-        element.addEventListener(type, fn);
-        this.onDisconnect(cleanUp);
-        return cleanUp;
-    }
-}
-Search.identifier = "dsa.search";
-define(Search.identifier, Search);
-
-export { Search as default };