@kickstartds/ds-agency-premium 1.6.71--canary.50.2218.0 → 1.6.71--canary.45.2226.0

package/dist/{SearchResultProps-224c2338.d.ts → SearchResultProps-5e57c4cb.d.ts}

@@ -26,8 +26,22 @@ type ARIALabel = string;
 interface SearchResultProps {
     url?: URL;
     title?: Title;
+    previewImage?: PreviewImage;
     text?: Text;
     showLink?: ShowLink;
     ariaLabel?: ARIALabel;
 }
-export { URL, Title, Text, ShowLink, ARIALabel, SearchResultProps };
+/**
+ * An optional preview image for the search result.
+ */
+interface PreviewImage {
+    /**
+     * A URL to an image preview for the search result.
+     */
+    src?: string;
+    /**
+     * Large display of the preview image.
+     */
+    large?: boolean;
+}
+export { URL, Title, Text, ShowLink, ARIALabel, SearchResultProps, PreviewImage };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 03 Sep 2025 08:36:46 GMT
+ * Generated on Thu, 04 Sep 2025 08:25:20 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -3936,17 +3936,17 @@
     "id": "corporate-search-result--default",
     "group": "Corporate / 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/>",
+    "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/>",
     "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
+      },
       "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"
-      }
+      "ariaLabel": "Search Result: AI Conference 2023"
     },
     "screenshot": "img/screenshots/corporate-search-result--default.png"
   },

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-224c2338.js";
+import { SearchResultProps } from "../../SearchResultProps-5e57c4cb.js";
 interface SearchProps {
     /**
      * Referenced component HeadlineProps

package/dist/components/search/index.js

@@ -16,6 +16,7 @@ import '@kickstartds/core/lib/component';
 import '../../helpers-12f48df8.js';
 import 'markdown-to-jsx';
 import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/picture';
 import '@kickstartds/base/lib/icon';
 import '@kickstartds/form/lib/text-field';
 import '@kickstartds/base/lib/headline';

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

@@ -227,6 +227,26 @@
               "AI Conference 2023"
             ]
           },
+          "previewImage": {
+            "title": "Preview Image",
+            "type": "object",
+            "description": "An optional preview image for the search result.",
+            "properties": {
+              "src": {
+                "type": "string",
+                "description": "A URL to an image preview for the search result.",
+                "examples": [
+                  "/img/full-shot-different-people-working-together.png"
+                ]
+              },
+              "large": {
+                "type": "boolean",
+                "description": "Large display of the preview image.",
+                "default": false
+              }
+            },
+            "additionalProperties": false
+          },
           "text": {
             "title": "Text",
             "type": "string",

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" }), 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-result/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SearchResultProps } from "../../SearchResultProps-224c2338.js";
+import { SearchResultProps } from "../../SearchResultProps-5e57c4cb.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

@@ -4,12 +4,19 @@ import { forwardRef, createContext, useContext } from 'react';
 import { Link } from '@kickstartds/base/lib/link';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+import classnames from 'classnames';
+import { Picture } from '@kickstartds/base/lib/picture';
 
 const defaults = {
+    "previewImage": {
+        "large": false
+    },
     "showLink": true
 };
 
-const SearchResultContextDefault = forwardRef(({ title, text, url, showLink, ariaLabel }, ref) => (jsxs(Link, { "aria-label": ariaLabel, href: url, className: "dsa-search-result", ref: ref, 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 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 })] })] })));
 const SearchResultContext = createContext(SearchResultContextDefault);
 const SearchResult = forwardRef((props, ref) => {
     const Component = useContext(SearchResultContext);

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

@@ -3,15 +3,30 @@
   --g-link--text-decoration: none;
   --g-link--text-decoration-hover: none;
   display: flex;
-  flex-direction: column;
-  gap: var(--ks-spacing-stack-xs);
+  gap: var(--ks-spacing-inline-m);
   border: var(--ks-border-width-default) solid var(--ks-border-color-card-interactive);
   padding: var(--ks-spacing-inset-m);
   transition: var(--ks-transition-hover);
+  flex-wrap: wrap;
 }
 .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 {
+  flex-grow: 0;
+  max-width: var(--dsa-tile--width_small);
+  aspect-ratio: 4/3;
+  object-fit: cover;
+}
+.dsa-search-result__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-xs);
+  flex-grow: 1;
+}
 .dsa-search-result__title {
   font: var(--dsa-topic--font);
   color: var(--dsa-topic--color);

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

@@ -20,6 +20,26 @@
         "AI Conference 2023"
       ]
     },
+    "previewImage": {
+      "title": "Preview Image",
+      "type": "object",
+      "description": "An optional preview image for the search result.",
+      "properties": {
+        "src": {
+          "type": "string",
+          "description": "A URL to an image preview for the search result.",
+          "examples": [
+            "/img/full-shot-different-people-working-together.png"
+          ]
+        },
+        "large": {
+          "type": "boolean",
+          "description": "Large display of the preview image.",
+          "default": false
+        }
+      },
+      "additionalProperties": false
+    },
     "text": {
       "title": "Text",
       "type": "string",

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

@@ -16,6 +16,23 @@
       "description": "The title of the search result.",
       "examples": ["AI Conference 2023"]
     },
+    "previewImage": {
+      "title": "Preview Image",
+      "type": "object",
+      "description": "An optional preview image for the search result.",
+      "properties": {
+        "src": {
+          "type": "string",
+          "description": "A URL to an image preview for the search result.",
+          "examples": ["/img/full-shot-different-people-working-together.png"]
+        },
+        "large": {
+          "type": "boolean",
+          "description": "Large display of the preview image.",
+          "default": false
+        }
+      }
+    },
     "text": {
       "title": "Text",
       "type": "string",

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 03 Sep 2025 08:36:48 GMT
+ * Generated on Thu, 04 Sep 2025 08:25:22 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 03 Sep 2025 08:36:52 GMT
+ * Generated on Thu, 04 Sep 2025 08:25:27 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 03 Sep 2025 08:36:50 GMT
+ * Generated on Thu, 04 Sep 2025 08:25:25 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 03 Sep 2025 08:36:54 GMT
+ * Generated on Thu, 04 Sep 2025 08:25:29 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 03 Sep 2025 08:36:46 GMT
+ * Generated on Thu, 04 Sep 2025 08:25:20 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 03 Sep 2025 08:36:47 GMT
+ * Generated on Thu, 04 Sep 2025 08:25:21 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.6.71--canary.50.2218.0",
+  "version": "1.6.71--canary.45.2226.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {
@@ -40,7 +40,7 @@
   ],
   "scripts": {
     "build-storybook": "yarn build-tokens && yarn schema && yarn token && storybook build",
-    "postbuild-storybook": "yarn search && yarn presets && yarn playroom:build && mkdir -p dist/components && cp snippets.json dist/components/presets.json",
+    "postbuild-storybook": "yarn presets && yarn playroom:build && mkdir -p dist/components && cp snippets.json dist/components/presets.json",
     "build-tokens-ds-agency": "kickstartDS tokens compile",
     "build-tokens-business": "kickstartDS tokens compile --token-dictionary-path src/token-business/dictionary --sd-config-path sd.config-business.cjs",
     "build-tokens-ngo": "kickstartDS tokens compile --token-dictionary-path src/token-ngo/dictionary --sd-config-path sd.config-ngo.cjs",
@@ -53,7 +53,6 @@
     "playroom:start": "playroom start",
     "playroom:build": "playroom build",
     "presets": "vitest run scripts/generatePresets.test.ts",
-    "search": "rm -rf static/pagefind && vitest run scripts/generateSearchIndex.test.ts",
     "husky:precommit": "yarn schema && rollup -c",
     "prepare": "patch-package && husky install",
     "prepublishOnly": "rm -rf dist && yarn build-tokens && yarn schema && rollup -c && yarn build-storybook",
@@ -121,7 +120,6 @@
     "kickstartds": "3.5.0--canary.62.324.0",
     "lazysizes": "^5.3.2",
     "npm-run-all": "^4.1.5",
-    "pagefind": "^1.4.0",
     "patch-package": "^8.0.0",
     "playroom": "^0.34.1",
     "postcss": "^8.4.29",

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 };