@kickstartds/ds-agency-premium 1.7.0--canary.46.1837.0 → 1.7.0--canary.43.2352.0

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

@@ -0,0 +1,27 @@
+.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__close {
+  --dsa-button--padding: 1em;
+}
+.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,70 @@
+{
+  "$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"
+    },
+    "form": {
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "$id": "http://schema.mydesignsystem.com/search-form.schema.json",
+      "title": "Search Form",
+      "type": "object",
+      "properties": {
+        "component": {
+          "type": "string",
+          "description": "ks-component attribute",
+          "default": "dsa.search-form"
+        },
+        "result": {
+          "type": "object",
+          "properties": {
+            "maxSubresults": {
+              "type": "number",
+              "description": "Max number of subresults of a single search result"
+            },
+            "showLink": {
+              "title": "Show Link",
+              "type": "boolean",
+              "description": "Whether to display the link to the search result.",
+              "default": true
+            },
+            "imageColSize": {
+              "title": "Image Row Size",
+              "type": "string",
+              "description": "The reserved space of the image row.",
+              "default": "small",
+              "enum": [
+                "none",
+                "small",
+                "large"
+              ]
+            }
+          },
+          "additionalProperties": false
+        },
+        "resultPerPage": {
+          "type": "number",
+          "default": 10
+        },
+        "moreButtonLabel": {
+          "type": "string",
+          "default": "View all results"
+        }
+      },
+      "additionalProperties": false
+    }
+  },
+  "required": [
+    "headline",
+    "closeAriaLabel"
+  ],
+  "additionalProperties": false
+}

package/dist/components/search-modal/search-modal.schema.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"
+    },
+    "form": {
+      "$ref": "http://schema.mydesignsystem.com/search-form.schema.json"
+    }
+  },
+  "required": [
+    "headline",
+    "closeAriaLabel"
+  ],
+  "additionalProperties": false
+}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SearchResultProps } from "../../SearchResultProps-f6f07017.js";
+declare const SearchResultContextDefault: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SearchResultContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const SearchResult: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { SearchResultProps };
+export { SearchResultContextDefault, SearchResultContext, SearchResult };

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

@@ -0,0 +1,29 @@
+import "./search-result.css";
+import { jsx, jsxs } from 'react/jsx-runtime';
+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';
+import { Container } from '@kickstartds/core/lib/container';
+import { SearchResultMatch } from '../search-result-match/index.js';
+
+const defaults = {
+    "imageColSize": "small",
+    "matches": [],
+    "showLink": true
+};
+
+const SearchResultContextDefault = forwardRef(({ title, previewImage, imageColSize = "small", initialMatch, matches, url, showLink, }, ref) => (jsx(Container, { name: "search-result", children: jsxs("div", { ref: ref, className: classnames("dsa-search-result", {
+            "dsa-search-result--image-row-large": imageColSize === "large",
+            "dsa-search-result--image-row-none": imageColSize === "none",
+        }), children: [jsxs("div", { className: "dsa-search-result__content", children: [jsx("div", { className: "dsa-search-result__header", children: jsx(Link, { "data-result-link": true, "data-result-title": true, href: url, className: "dsa-search-result__title", children: title }) }), jsx(RichText, { className: "dsa-search-result__initial-match", text: initialMatch, "data-result-excerpt": true }), jsx("div", { className: "dsa-search-result__matches", "data-result-subresults": true, children: matches.map((match, index) => (jsx(SearchResultMatch, { ...match }, index))) }), showLink && (jsx(Link, { href: url, className: "dsa-search-result__link", "data-result-link": true, "data-result-url": true, children: url }))] }), imageColSize !== "none" && (jsx("div", { className: "dsa-search-result__preview-image-row", children: jsx(Link, { tabIndex: -1, "aria-hidden": true, href: url, className: "dsa-search-result__preview-image-wrapper", "data-result-link": true, children: jsx(Picture, { src: previewImage, alt: "", className: "dsa-search-result__preview-image", "data-result-image": true }) }) }))] }) })));
+const SearchResultContext = createContext(SearchResultContextDefault);
+const SearchResult = forwardRef((props, ref) => {
+    const Component = useContext(SearchResultContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+SearchResult.displayName = "SearchResult";
+
+export { SearchResult, SearchResultContext, SearchResultContextDefault };

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

@@ -0,0 +1,76 @@
+.l-container--search-result {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: search-result;
+}
+
+.dsa-search-result {
+  --g-link--border-radius: var(--ks-border-radius-card);
+  --g-link--text-decoration: none;
+  --g-link--text-decoration-hover: none;
+  display: flex;
+  gap: var(--ks-spacing-stack-m) var(--ks-spacing-inline-m);
+}
+.dsa-search-result .l-container {
+  container-type: unset;
+}
+.dsa-search-result:hover {
+  border-color: var(--ks-border-color-card-interactive-hover);
+}
+.dsa-search-result__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-xs);
+  flex-basis: var(--dsa-tile--width_medium);
+  flex-grow: 1;
+}
+.dsa-search-result__link {
+  --g-link--color: var(--ks-color-fg-alpha-4);
+  --g-link--color-hover: var(--ks-color-fg-alpha-2);
+  width: fit-content;
+  font: var(--ks-font-interface-s);
+}
+.dsa-search-result strong,
+.dsa-search-result mark {
+  border-bottom: 1px dashed var(--ks-color-fg);
+  font-weight: unset;
+  color: var(--ks-color-fg);
+  background-color: transparent;
+}
+.dsa-search-result__matches {
+  padding: var(--ks-spacing-xxs) 0;
+}
+.dsa-search-result__matches:empty {
+  display: none;
+}
+.dsa-search-result__title {
+  font-size: var(--ks-font-size-display-l);
+  font-family: var(--ks-font-family-display);
+  line-height: var(--ks-line-height-display-m);
+}
+.dsa-search-result__preview-image-row {
+  height: fit-content;
+  flex-basis: var(--dsa-tile--width_smallest);
+}
+.dsa-search-result--image-row-large .dsa-search-result__preview-image-row {
+  flex-basis: var(--dsa-tile--width_small);
+}
+@media (max-width: 980px) {
+  .dsa-search-result__preview-image-row {
+    display: none;
+  }
+  @container search-result (min-width: 640px) {
+    .dsa-search-result__preview-image-row {
+      display: block;
+    }
+  }
+}
+.dsa-search-result__preview-image {
+  width: 100%;
+  height: fit-content;
+  object-fit: cover;
+  aspect-ratio: 4/3;
+  border-radius: calc(var(--ks-border-radius-card) / 2);
+}
+.dsa-search-result__preview-image:not([src]) {
+  display: none;
+}

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

@@ -0,0 +1,90 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-result.schema.json",
+  "title": "Search Result",
+  "type": "object",
+  "properties": {
+    "url": {
+      "title": "URL",
+      "type": "string",
+      "description": "A URL linking to the search result or more information.",
+      "examples": [
+        "https://www.example.com/ai-conference-2023"
+      ]
+    },
+    "title": {
+      "title": "Title",
+      "type": "string",
+      "description": "The title of the search result.",
+      "examples": [
+        "AI Conference 2023"
+      ]
+    },
+    "imageColSize": {
+      "title": "Image Row Size",
+      "type": "string",
+      "description": "The reserved space of the image row.",
+      "default": "small",
+      "enum": [
+        "none",
+        "small",
+        "large"
+      ]
+    },
+    "previewImage": {
+      "title": "Preview Image",
+      "type": "string",
+      "description": "A URL to an image preview for the search result."
+    },
+    "initialMatch": {
+      "title": "Initial Match",
+      "type": "string",
+      "description": "The initial search match or summary of the search result."
+    },
+    "matches": {
+      "title": "Matches",
+      "type": "array",
+      "description": "An array of search matches.",
+      "items": {
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "http://schema.mydesignsystem.com/search-result-match.schema.json",
+        "title": "Search Result Match",
+        "type": "object",
+        "properties": {
+          "title": {
+            "title": "Title",
+            "type": "string",
+            "description": "The title of the match.",
+            "examples": [
+              "Panel Discussion: Ethics in AI"
+            ]
+          },
+          "snippet": {
+            "title": "Text",
+            "type": "string",
+            "description": "The main content or description of the search result.",
+            "examples": [
+              "Experts debate the ethical challenges and responsibilities of deploying AI technologies."
+            ]
+          },
+          "url": {
+            "title": "URL",
+            "type": "string",
+            "description": "A URL linking to the specific match or more information.",
+            "examples": [
+              "https://www.example.com/ai-conference-2023/panel-discussion"
+            ]
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "showLink": {
+      "title": "Show Link",
+      "type": "boolean",
+      "description": "Whether to display the link to the search result.",
+      "default": true
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,52 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-result.schema.json",
+  "title": "Search Result",
+  "type": "object",
+  "properties": {
+    "url": {
+      "title": "URL",
+      "type": "string",
+      "description": "A URL linking to the search result or more information.",
+      "examples": ["https://www.example.com/ai-conference-2023"]
+    },
+    "title": {
+      "title": "Title",
+      "type": "string",
+      "description": "The title of the search result.",
+      "examples": ["AI Conference 2023"]
+    },
+    "imageColSize": {
+      "title": "Image Row Size",
+      "type": "string",
+      "description": "The reserved space of the image row.",
+      "default": "small",
+      "enum": ["none", "small", "large"]
+    },
+    "previewImage": {
+      "title": "Preview Image",
+      "type": "string",
+      "description": "A URL to an image preview for the search result."
+    },
+    "initialMatch": {
+      "title": "Initial Match",
+      "type": "string",
+      "description": "The initial search match or summary of the search result."
+    },
+    "matches": {
+      "title": "Matches",
+      "type": "array",
+      "description": "An array of search matches.",
+      "items": {
+        "$ref": "http://schema.mydesignsystem.com/search-result-match.schema.json"
+      }
+    },
+    "showLink": {
+      "title": "Show Link",
+      "type": "boolean",
+      "description": "Whether to display the link to the search result.",
+      "default": true
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SearchResultMatchProps } from "../../SearchResultMatchProps-777cd47c.js";
+declare const SearchResultMatchContextDefault: import("react").ForwardRefExoticComponent<SearchResultMatchProps & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const SearchResultMatchContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchResultMatchProps & import("react").RefAttributes<HTMLAnchorElement>>>;
+declare const SearchResultMatch: import("react").ForwardRefExoticComponent<SearchResultMatchProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export type { SearchResultMatchProps };
+export { SearchResultMatchContextDefault, SearchResultMatchContext, SearchResultMatch };

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

@@ -0,0 +1,18 @@
+import "./search-result-match.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+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';
+
+const defaults = {};
+
+const SearchResultMatchContextDefault = forwardRef(({ title, snippet, url, ...props }, ref) => (jsxs(Link, { ref: ref, href: url, className: "dsa-search-result-match", "data-result-link": true, ...props, children: [jsx("div", { "data-result-title": true, className: "dsa-search-result-match__title", children: title }), jsx(RichText, { text: snippet, className: "dsa-search-result-match__snippet", "data-result-excerpt": true })] })));
+const SearchResultMatchContext = createContext(SearchResultMatchContextDefault);
+const SearchResultMatch = forwardRef((props, ref) => {
+    const Component = useContext(SearchResultMatchContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+SearchResultMatch.displayName = "SearchResultMatch";
+
+export { SearchResultMatch, SearchResultMatchContext, SearchResultMatchContextDefault };

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

@@ -0,0 +1,18 @@
+.dsa-search-result-match {
+  --g-link--border-radius: 0;
+  font: var(--ks-font-interface-m);
+  padding: var(--ks-spacing-stack-s) 0;
+  border-top: 1px solid var(--ks-border-color-default);
+  display: block;
+  margin-left: 1.25em;
+}
+.dsa-search-result-match__snippet {
+  font: var(--ks-font-copy-m);
+}
+.dsa-search-result-match__chevron {
+  width: 1em;
+  height: 1em;
+}
+.dsa-search-result-match:last-child {
+  border-bottom: 1px solid var(--ks-border-color-default);
+}

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

@@ -0,0 +1,33 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-result-match.schema.json",
+  "title": "Search Result Match",
+  "type": "object",
+  "properties": {
+    "title": {
+      "title": "Title",
+      "type": "string",
+      "description": "The title of the match.",
+      "examples": [
+        "Panel Discussion: Ethics in AI"
+      ]
+    },
+    "snippet": {
+      "title": "Text",
+      "type": "string",
+      "description": "The main content or description of the search result.",
+      "examples": [
+        "Experts debate the ethical challenges and responsibilities of deploying AI technologies."
+      ]
+    },
+    "url": {
+      "title": "URL",
+      "type": "string",
+      "description": "A URL linking to the specific match or more information.",
+      "examples": [
+        "https://www.example.com/ai-conference-2023/panel-discussion"
+      ]
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,31 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-result-match.schema.json",
+  "title": "Search Result Match",
+  "type": "object",
+  "properties": {
+    "title": {
+      "title": "Title",
+      "type": "string",
+      "description": "The title of the match.",
+      "examples": ["Panel Discussion: Ethics in AI"]
+    },
+    "snippet": {
+      "title": "Text",
+      "type": "string",
+      "description": "The main content or description of the search result.",
+      "examples": [
+        "Experts debate the ethical challenges and responsibilities of deploying AI technologies."
+      ]
+    },
+    "url": {
+      "title": "URL",
+      "type": "string",
+      "description": "A URL linking to the specific match or more information.",
+      "examples": [
+        "https://www.example.com/ai-conference-2023/panel-discussion"
+      ]
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-1cfcf6e8.js";
+import { SectionProps } from "../../SectionProps-7cac90e5.js";
 declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/section/index.js

@@ -5,12 +5,14 @@ import classnames from 'classnames';
 import { useKsComponent } from '@kickstartds/core/lib/react';
 import { SectionContextDefault as SectionContextDefault$1, SectionContext as SectionContext$1 } from '@kickstartds/base/lib/section';
 import { identifier } from './js/Section.client.js';
-import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/core/lib/component';
 
 const defaults = {
     "width": "default",
+    "style": "default",
     "backgroundColor": "default",
+    "transition": "none",
     "spotlight": false,
     "spaceBefore": "default",
     "spaceAfter": "default",
@@ -24,14 +26,14 @@ const defaults = {
         "width": "unset",
         "align": "center",
         "gutter": "default",
-        "mode": "list",
+        "mode": "default",
         "tileWidth": "default"
     },
     "components": [],
     "buttons": []
 };
 
-const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", backgroundImage, spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
+const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", transition, backgroundImage, spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
     const { large: headlineLarge = false, ...headlineRest } = {
         align: "left",
         ...headline,
@@ -40,21 +42,17 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
         spotlight,
         content?.mode === "slider",
     ]);
-    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style &&
-            style !== "default" &&
-            `dsa-section-style--${style === "verticalGradient"
-                ? "vertical-gradient"
-                : style === "horizontalGradient"
-                    ? "horizontal-gradient"
-                    : style === "accentTransition"
-                        ? "accent-transition"
-                        : style === "boldTransition"
-                            ? "bold-transition"
-                            : style === "symmetricGlow"
-                                ? "symmetric-glow"
-                                : style === "anchorGlow"
-                                    ? "anchor-glow"
-                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, backgroundImage: backgroundImage, content: content, headline: {
+    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style && style !== "default" && `dsa-section-style--${style}`, transition &&
+            transition !== "none" &&
+            `dsa-section--transition-${transition}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor === "default"
+            ? "default"
+            : backgroundColor === "accent"
+                ? "accent"
+                : backgroundColor === "bold"
+                    ? "bold"
+                    : undefined, backgroundImage: backgroundImage, 
+        // @ts-expect-error
+        content: content, headline: {
             ...headlineRest,
             spaceAfter: "large",
             // @ts-expect-error