@kickstartds/ds-agency-premium 1.6.71--canary.49.2211.0 → 1.6.71--canary.50.2218.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      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: 'Beamer',\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: 'Interaktive Displays',\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: 'Professional Displays',\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: 'LED Displays',\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: 'Lösungen',\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: 'Zubehör',\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: 'Über Optoma',\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: 'Support',\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,123 +2925,16 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Beamer",
-          "active": true,
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
-        },
-        {
-          "url": "#",
-          "label": "Interaktive Displays",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
-        },
-        {
-          "url": "#",
-          "label": "Professional Displays",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
-        },
-        {
-          "url": "#",
-          "label": "LED Displays",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
+          "label": "Active Item",
+          "active": true
         },
         {
           "url": "#",
-          "label": "Lösungen",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
+          "label": "Navigation Item"
         },
         {
           "url": "#",
-          "label": "Zubehör",
+          "label": "Dropdown",
           "items": [
             {
               "url": "#",
@@ -3059,49 +2957,11 @@
         },
         {
           "url": "#",
-          "label": "Über Optoma",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
+          "label": "One more Item"
         },
         {
           "url": "#",
-          "label": "Support",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
+          "label": "Last Item"
         }
       ]
     },
@@ -3282,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      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: 'Beamer',\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: 'Interaktive Displays',\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: 'Professional Displays',\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: 'LED Displays',\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: 'Lösungen',\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: 'Zubehör',\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: 'Über Optoma',\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: 'Support',\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",
@@ -3299,123 +3159,16 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Beamer",
-          "active": true,
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
-        },
-        {
-          "url": "#",
-          "label": "Interaktive Displays",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
-        },
-        {
-          "url": "#",
-          "label": "Professional Displays",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
-        },
-        {
-          "url": "#",
-          "label": "LED Displays",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
+          "label": "Active Item",
+          "active": true
         },
         {
           "url": "#",
-          "label": "Lösungen",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
+          "label": "Navigation Item"
         },
         {
           "url": "#",
-          "label": "Zubehör",
+          "label": "Dropdown",
           "items": [
             {
               "url": "#",
@@ -3438,49 +3191,11 @@
         },
         {
           "url": "#",
-          "label": "Über Optoma",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
+          "label": "One more Item"
         },
         {
           "url": "#",
-          "label": "Support",
-          "items": [
-            {
-              "url": "#",
-              "label": "Level 2 Item"
-            },
-            {
-              "url": "#",
-              "label": "Active Item",
-              "active": true
-            },
-            {
-              "url": "#",
-              "label": "An Item with a longer Label"
-            },
-            {
-              "url": "#",
-              "label": "And One last one"
-            }
-          ]
+          "label": "Last Item"
         }
       ]
     },

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,71 @@
+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 };

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