@kickstartds/ds-agency-premium 1.6.71--canary.48.2202.0 → 1.6.71--canary.45.2208.0

package/dist/components/presets.json

@@ -1192,7 +1192,7 @@
     "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/>",
+    "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  headline={{\n    level: 'h1',\n    style: 'h1',\n    text: 'Search'\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": {
@@ -1285,6 +1285,11 @@
           "ctaText": "Show event"
         }
       ],
+      "headline": {
+        "text": "Search",
+        "level": "h1",
+        "style": "h1"
+      },
       "searchFilter": {
         "title": "Search Filters",
         "categories": [
@@ -2904,7 +2909,7 @@
     "id": "layout-footer--footer",
     "group": "Layout/Footer",
     "name": "Footer",
-    "code": "<Footer\n  byline=\"© 2024 systemics Inc. All rights reserved.\"\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    inverted: false,\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Fahrzeugsuche',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Nissan',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Kia',\n          url: '#'\n        },\n        {\n          label: 'Maserati',\n          url: '#'\n        },\n        {\n          label: 'Corvette',\n          url: '#'\n        }\n      ],\n      label: 'Marken',\n      url: '#'\n    },\n    {\n      label: 'Standorte',\n      url: '#'\n    },\n    {\n      label: 'Bonusprogramm',\n      url: '#'\n    },\n    {\n      label: 'News',\n      url: '#'\n    },\n    {\n      label: 'Jobs',\n      url: '#'\n    },\n    {\n      label: 'Kontakt',\n      url: '#'\n    }\n  ]}\n/>",
+    "code": "<Footer\n  byline=\"© 2024 systemics Inc. All rights reserved.\"\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    inverted: false,\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Active Item',\n      url: '#'\n    },\n    {\n      label: 'Navigation Item',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Dropdown',\n      url: '#'\n    },\n    {\n      label: 'One more Item',\n      url: '#'\n    },\n    {\n      label: 'Last Item',\n      url: '#'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -2920,51 +2925,43 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Fahrzeugsuche",
+          "label": "Active Item",
           "active": true
         },
         {
           "url": "#",
-          "label": "Marken",
+          "label": "Navigation Item"
+        },
+        {
+          "url": "#",
+          "label": "Dropdown",
           "items": [
             {
               "url": "#",
-              "label": "Nissan"
+              "label": "Level 2 Item"
             },
             {
               "url": "#",
-              "label": "Kia",
+              "label": "Active Item",
               "active": true
             },
             {
               "url": "#",
-              "label": "Maserati"
+              "label": "An Item with a longer Label"
             },
             {
               "url": "#",
-              "label": "Corvette"
+              "label": "And One last one"
             }
           ]
         },
         {
           "url": "#",
-          "label": "Standorte"
-        },
-        {
-          "url": "#",
-          "label": "Bonusprogramm"
-        },
-        {
-          "url": "#",
-          "label": "News"
-        },
-        {
-          "url": "#",
-          "label": "Jobs"
+          "label": "One more Item"
         },
         {
           "url": "#",
-          "label": "Kontakt"
+          "label": "Last Item"
         }
       ]
     },
@@ -3145,7 +3142,7 @@
     "id": "layout-header--header",
     "group": "Layout/Header",
     "name": "Header",
-    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Fahrzeugsuche',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Nissan',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Kia',\n          url: '#'\n        },\n        {\n          label: 'Maserati',\n          url: '#'\n        },\n        {\n          label: 'Corvette',\n          url: '#'\n        }\n      ],\n      label: 'Marken',\n      url: '#'\n    },\n    {\n      label: 'Standorte',\n      url: '#'\n    },\n    {\n      label: 'Bonusprogramm',\n      url: '#'\n    },\n    {\n      label: 'News',\n      url: '#'\n    },\n    {\n      label: 'Jobs',\n      url: '#'\n    },\n    {\n      label: 'Kontakt',\n      url: '#'\n    }\n  ]}\n/>",
+    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Active Item',\n      url: '#'\n    },\n    {\n      label: 'Navigation Item',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Dropdown',\n      url: '#'\n    },\n    {\n      label: 'One more Item',\n      url: '#'\n    },\n    {\n      label: 'Last Item',\n      url: '#'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -3162,51 +3159,43 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Fahrzeugsuche",
+          "label": "Active Item",
           "active": true
         },
         {
           "url": "#",
-          "label": "Marken",
+          "label": "Navigation Item"
+        },
+        {
+          "url": "#",
+          "label": "Dropdown",
           "items": [
             {
               "url": "#",
-              "label": "Nissan"
+              "label": "Level 2 Item"
             },
             {
               "url": "#",
-              "label": "Kia",
+              "label": "Active Item",
               "active": true
             },
             {
               "url": "#",
-              "label": "Maserati"
+              "label": "An Item with a longer Label"
             },
             {
               "url": "#",
-              "label": "Corvette"
+              "label": "And One last one"
             }
           ]
         },
         {
           "url": "#",
-          "label": "Standorte"
-        },
-        {
-          "url": "#",
-          "label": "Bonusprogramm"
-        },
-        {
-          "url": "#",
-          "label": "News"
-        },
-        {
-          "url": "#",
-          "label": "Jobs"
+          "label": "One more Item"
         },
         {
           "url": "#",
-          "label": "Kontakt"
+          "label": "Last Item"
         }
       ]
     },

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

@@ -5,9 +5,19 @@ import { FC, PropsWithChildren } from "react";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
+import { HeadlineProps } from "../../HeadlineProps-e1305784.js";
+import { SearchBarProps } from "../../SearchBarProps-26263244.js";
 import { SearchFilterProps } from "../../SearchFilterProps-2fa6419b.js";
 import { SearchResultProps } from "../../SearchResultProps-224c2338.js";
 interface SearchProps {
+    /**
+     * Referenced component HeadlineProps
+     */
+    headline?: HeadlineProps;
+    /**
+     * Referenced component SearchBarProps
+     */
+    searchBar?: SearchBarProps;
     /**
      * Referenced component SearchFilterProps
      */

package/dist/components/search/index.js

@@ -1,10 +1,12 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } 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 { SearchBar } from '../search-bar/index.js';
+import { Headline } from '../headline/index.js';
 import 'react';
 import 'classnames';
 import '@kickstartds/core/lib/react';
@@ -15,26 +17,33 @@ import '../../helpers-12f48df8.js';
 import 'markdown-to-jsx';
 import '@kickstartds/base/lib/link';
 import '@kickstartds/base/lib/icon';
+import '@kickstartds/form/lib/text-field';
+import '@kickstartds/base/lib/headline';
 
-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",
-                            },
-                        ] })] }) }) }) }));
+const Search = ({ headline, searchBar, searchFilter, searchResults, }) => (jsxs(Fragment, { children: [jsxs(Section, { content: {
+                mode: "list",
+                gutter: "none",
+            }, spaceAfter: "small", children: [jsx(Headline, { ...headline }), jsx(SearchBar, { ...searchBar })] }), jsx(Section, { width: "wide", spaceBefore: "small", content: {
+                mode: "list",
+            }, 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 };

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

@@ -4,6 +4,139 @@
   "title": "Search",
   "type": "object",
   "properties": {
+    "headline": {
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "$id": "http://schema.mydesignsystem.com/headline.schema.json",
+      "title": "Headline",
+      "description": "Component used for headlines",
+      "type": "object",
+      "properties": {
+        "text": {
+          "type": "string",
+          "title": "Text",
+          "description": "Text content of headline",
+          "format": "markdown"
+        },
+        "sub": {
+          "type": "string",
+          "title": "Sub",
+          "description": "Subheadline content",
+          "format": "markdown"
+        },
+        "switchOrder": {
+          "type": "boolean",
+          "title": "Switch order?",
+          "description": "Switch order of headline and subheadline",
+          "default": false
+        },
+        "align": {
+          "type": "string",
+          "title": "Section alignment",
+          "enum": [
+            "left",
+            "center",
+            "right"
+          ]
+        },
+        "level": {
+          "type": "string",
+          "title": "Level",
+          "description": "Level of headline to use",
+          "enum": [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "p"
+          ],
+          "default": "h2"
+        },
+        "style": {
+          "type": "string",
+          "title": "Style",
+          "description": "Style of headline to show",
+          "enum": [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "p"
+          ],
+          "default": "h2"
+        },
+        "spaceAfter": {
+          "type": "string",
+          "title": "Space after?",
+          "description": "Whether to display space after headline",
+          "enum": [
+            "minimum",
+            "small",
+            "large"
+          ],
+          "default": "small"
+        },
+        "className": {
+          "type": "string",
+          "title": "Class Name",
+          "description": "Set a custom class name"
+        },
+        "id": {
+          "type": "string",
+          "title": "ID",
+          "description": "Set a custom id attribute"
+        }
+      },
+      "additionalProperties": false,
+      "required": [
+        "level",
+        "text"
+      ]
+    },
+    "searchBar": {
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "$id": "http://schema.mydesignsystem.com/search-bar.schema.json",
+      "title": "Search Bar",
+      "type": "object",
+      "properties": {
+        "placeholder": {
+          "title": "Placeholder",
+          "type": "string",
+          "description": "Placeholder text for the search input field.",
+          "examples": [
+            "Search..."
+          ]
+        },
+        "buttonText": {
+          "type": "string",
+          "description": "Text displayed on the search button.",
+          "examples": [
+            "Search"
+          ]
+        },
+        "hint": {
+          "type": "string",
+          "description": "Additional information or instructions related to the search functionality.",
+          "examples": [
+            "Press <kbd>Enter</kbd> to search"
+          ]
+        },
+        "alternativeText": {
+          "type": "string",
+          "description": "Text to display when offering alternative results.",
+          "examples": [
+            "Did you mean"
+          ]
+        },
+        "alternativeResult": {
+          "type": "string",
+          "description": "The alternative result to display when offering suggestions.",
+          "examples": [
+            "AI Conference"
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
     "searchFilter": {
       "$schema": "http://json-schema.org/draft-07/schema#",
       "$id": "http://schema.mydesignsystem.com/search-filter.schema.json",

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

@@ -4,6 +4,12 @@
   "title": "Search",
   "type": "object",
   "properties": {
+    "headline": {
+      "$ref": "http://schema.mydesignsystem.com/headline.schema.json"
+    },
+    "searchBar": {
+      "$ref": "http://schema.mydesignsystem.com/search-bar.schema.json"
+    },
     "searchFilter": {
       "$ref": "http://schema.mydesignsystem.com/search-filter.schema.json"
     },

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

@@ -1,33 +1,5 @@
 /// <reference types="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.
- */
-/**
- * Placeholder text for the search input field.
- */
-type Placeholder = string;
-interface SearchBarProps {
-    placeholder?: Placeholder;
-    /**
-     * Text displayed on the search button.
-     */
-    buttonText?: string;
-    /**
-     * Additional information or instructions related to the search functionality.
-     */
-    hint?: string;
-    /**
-     * Text to display when offering alternative results.
-     */
-    alternativeText?: string;
-    /**
-     * The alternative result to display when offering suggestions.
-     */
-    alternativeResult?: string;
-}
+import { SearchBarProps } from "../../SearchBarProps-26263244.js";
 declare const SearchBarContextDefault: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const SearchBarContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>>;
 declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-4e3c6fe0.js";
+import { SectionProps } from "../../SectionProps-d60aba86.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

@@ -42,9 +42,7 @@ 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 dsa-section--style-${style}`, transition &&
+    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"

package/dist/components/section/section.css

@@ -26,20 +26,18 @@
   --dsa-section--background-color_default: var(--ks-background-color-default);
   --dsa-section--background-color_accent: var(--ks-background-color-accent);
   --dsa-section--background-color_bold: var(--ks-background-color-bold);
-  --dsa-section_shine-left--background-image: radial-gradient(
-    80% 150% at 20% 50%,
-    var(--ks-color-fg-inverted),
-    var(--ks-color-bg-inverted-alpha-8)
+  --dsa-section--transition_to-default: linear-gradient(
+    178deg,
+    transparent 75%,
+    var(--ks-background-color-default) 75%
   );
-  --dsa-section_shine-right--background-image: radial-gradient(
-    80% 150% at 80% 50%,
-    var(--ks-color-fg-inverted),
-    var(--ks-color-bg-inverted-alpha-8)
+  --dsa-section--transition_to-accent: linear-gradient(178deg, transparent 75%, var(--ks-background-color-accent) 75%);
+  --dsa-section--transition_to-bold: linear-gradient(178deg, transparent 75%, var(--ks-background-color-bold) 75%);
+  --dsa-section--transition_to-inverted: linear-gradient(
+    178deg,
+    transparent 75%,
+    var(--ks-background-color-default-inverted) 75%
   );
-  --dsa-section--transition_to-default: linear-gradient(transparent, var(--ks-background-color-default));
-  --dsa-section--transition_to-accent: linear-gradient(transparent, var(--ks-background-color-accent));
-  --dsa-section--transition_to-bold: linear-gradient(transparent, var(--ks-background-color-bold));
-  --dsa-section--transition_to-inverted: linear-gradient(transparent, var(--ks-background-color-default-inverted));
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
   --dsa-section__slider-arrow--size: 2rem;
   --dsa-section__slider-arrow--padding: 0.5em;
@@ -51,18 +49,6 @@
   --dsa-section__spotlight--blur: 0%;
   --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
 }
-.dsa-section[ks-inverted=true] {
-  --dsa-section_shine-left--background-image: radial-gradient(
-    70% 150% at 20% 50%,
-    var(--ks-color-fg-inverted-alpha-8-base),
-    var(--ks-color-bg)
-  );
-  --dsa-section_shine-right--background-image: radial-gradient(
-    70% 150% at 80% 50%,
-    var(--ks-color-fg-inverted-alpha-87-base),
-    var(--ks-color-bg)
-  );
-}
 
 .l-section.dsa-section [ks-inverted],
 .l-section.dsa-section {
@@ -96,14 +82,11 @@
 }
 
 .l-section.dsa-section {
-  --dsa-section--background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
   background-image: var(--dsa-section--background-image);
-  background-color: var(--dsa-section--background-color, var(--ks-color-bg));
+  background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
   position: relative;
 }
 .l-section.dsa-section .l-section__container {
-  position: relative;
-  z-index: 2;
   font: var(--ks-font-copy-m);
 }
 .l-section.dsa-section.l-section--gutter-large {
@@ -116,10 +99,10 @@
   --l-section--gutter: var(--dsa-section--gutter_none);
 }
 .l-section.dsa-section.l-section--accent {
-  --dsa-section--background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
+  background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
 }
 .l-section.dsa-section.l-section--bold {
-  --dsa-section--background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
+  background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
 }
 .l-section.dsa-section.dsa-section--transition-to-accent {
   background-image: var(--dsa-section--transition_to-accent, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
@@ -142,49 +125,22 @@
 .l-section.dsa-section--header-spacing.l-section--space-before-small {
   padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space-small));
 }
-.l-section.dsa-section--style::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-}
-.l-section.dsa-section--style--framed {
+.l-section.dsa-section-style--framed {
   --frame-background-color: var(--ks-background-color-accent);
 }
-.l-section.dsa-section--style--framed .l-section__container--content .l-section__content {
+.l-section.dsa-section-style--framed .l-section__container--content .l-section__content {
   padding: var(--dsa-section--space_default);
   background-color: var(--frame-background-color, var(--ks-background-color-default));
   border-radius: var(--ks-border-radius-surface);
 }
-.l-section.dsa-section--style--framed.l-section--accent, .l-section.dsa-section--style--framed.l-section--bold {
+.l-section.dsa-section-style--framed.l-section--accent, .l-section.dsa-section-style--framed.l-section--bold {
   --frame-background-color: var(--ks-background-color-default);
 }
-.l-section.dsa-section--style-shine-left::before {
-  background-image: var(--dsa-section_shine-left--background-image, radial-gradient(70% 150% at 20% 50%, var(--ks-color-fg-inverted), var(--ks-color-bg-inverted-alpha-7)));
-}
-.l-section.dsa-section--style-shine-right::before {
-  background-image: var(--dsa-section_shine-right--background-image, radial-gradient(70% 150% at 80% 50%, var(--ks-color-fg-inverted-alpha-8-base), var(--ks-color-bg)));
-}
-.l-section.dsa-section--style-carbon::before {
-  background: radial-gradient(var(--ks-color-fg-inverted-alpha-7) 15%, transparent 16%) 0 0, radial-gradient(var(--ks-color-fg-inverted-alpha-7) 15%, transparent 16%) 8px 8px, radial-gradient(var(--ks-color-fg-alpha-9) 15%, transparent 20%) 0 1px, radial-gradient(var(--ks-color-fg-alpha-9) 15%, transparent 20%) 8px 9px;
-  background-size: 16px 16px;
-  z-index: 1;
-}
-.l-section.dsa-section--style-carbon::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  background: linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 5px), linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 30px), linear-gradient(180deg, transparent calc(100% - 30px), var(--ks-color-fg-alpha-9) 100%), linear-gradient(180deg, transparent calc(100% - 5px), var(--ks-color-fg-alpha-9) 100%), radial-gradient(100% 100% at 50% 50%, var(--ks-color-bg), var(--ks-color-bg-to-fg-1));
+.l-section.dsa-section-style--deko {
+  background-image: var(--dsa-section_deko--background-image, radial-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
 }
-.l-section.dsa-section--style-stripe::before {
-  background-image: linear-gradient(45deg, transparent 5%, var(--ks-color-bg-inverted-alpha-8) 5%, var(--ks-color-bg-inverted-alpha-8) 18%, transparent 18%), linear-gradient(180deg, transparent calc(100% - 30px), var(--ks-color-fg-alpha-9) 100%), linear-gradient(180deg, transparent calc(100% - 5px), var(--ks-color-fg-alpha-9) 100%);
+.l-section.dsa-section-style--colorful {
+  background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 100%));
 }
 .l-section.dsa-section--spotlight {
   position: relative;

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

@@ -25,10 +25,7 @@
       "enum": [
         "default",
         "framed",
-        "shine-left",
-        "shine-right",
-        "carbon",
-        "stripe"
+        "deko"
       ],
       "default": "default"
     },