@kickstartds/ds-agency-premium 1.6.71--canary.55.2416.0 → 1.6.72--canary.43.2474.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      initialMatch: 'Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future.',\n      matches: [\n        {\n          snippet: 'Simple changes can make your home more **sustainable** and energy-efficient.',\n          title: 'Home',\n          url: '#'\n        },\n        {\n          snippet: 'Adopting a **sustainable** lifestyle benefits both you and the planet.',\n          title: 'Lifestyle',\n          url: '#'\n        }\n      ],\n      previewImage: 'img/people-brainstorming-work-meeting.png',\n      title: 'Sustainable Living: Everyday Tips',\n      url: 'www.example.com/lifestyle/sustainable-living'\n    },\n    {\n      initialMatch: 'Discover how **sustainable** design is shaping the future of urban development, from green buildings to eco-friendly materials. Research shows that **sustainable** architecture not only benefits the environment but also enhances the well-being of its occupants.',\n      previewImage: 'img/full-shot-different-people-working-together.png',\n      title: 'Sustainable Architecture Trends',\n      url: 'www.example.com/architecture/sustainable-trends'\n    },\n    {\n      matches: [\n        {\n          snippet: 'A **sustainable** business model focuses on long-term growth and environmental responsibility.',\n          title: 'Getting Started',\n          url: '#'\n        },\n        {\n          snippet: 'Explore examples of companies that have adopted **sustainable** practices successfully.',\n          title: 'Case Studies',\n          url: '#'\n        },\n        {\n          snippet: 'Using **sustainable** materials can significantly reduce a building’s carbon footprint.',\n          title: 'Materials',\n          url: '#'\n        }\n      ],\n      title: 'How to Build a Sustainable Business',\n      url: 'www.example.com/business/sustainable-model'\n    },\n    {\n      initialMatch: 'Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future.',\n      matches: [\n        {\n          snippet: 'A **sustainable** business model focuses on long-term growth and environmental responsibility.',\n          title: 'Getting Started',\n          url: '#'\n        },\n        {\n          snippet: 'Explore examples of companies that have adopted **sustainable** practices successfully.',\n          title: 'Case Studies',\n          url: '#'\n        },\n        {\n          snippet: 'Using **sustainable** materials can significantly reduce a building’s carbon footprint.',\n          title: 'Materials',\n          url: '#'\n        }\n      ],\n      previewImage: 'img/full-shot-different-people-working-together.png',\n      title: 'Sustainable Living: Everyday Tips',\n      url: 'www.example.com/business/sustainable-model'\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": [
@@ -1307,46 +1312,72 @@
       },
       "searchResults": [
         {
-          "url": "https://www.example.com/ai-conference-2023",
-          "title": "AI Conference 2023",
-          "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.",
-          "ariaLabel": "Search Result: AI Conference 2023",
-          "showLink": true
-        },
-        {
-          "url": "https://www.example.com/web-development-summit-2023",
-          "title": "Web Development Summit 2023",
-          "text": "Explore the future of web development at the **Web Development Summit**.\n        Discover new technologies and network with industry leaders.",
-          "ariaLabel": "Search Result: Web Development Summit 2023",
-          "showLink": true
-        },
-        {
-          "url": "https://www.example.com/data-science-bootcamp",
-          "title": "Data Science Bootcamp",
-          "text": "Enhance your skills with our **Data Science Bootcamp**.\n        Learn from experts and work on real-world projects.",
-          "ariaLabel": "Search Result: Data Science Bootcamp",
-          "showLink": true
+          "title": "Sustainable Living: Everyday Tips",
+          "previewImage": "img/people-brainstorming-work-meeting.png",
+          "initialMatch": "Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future.",
+          "matches": [
+            {
+              "title": "Home",
+              "snippet": "Simple changes can make your home more **sustainable** and energy-efficient.",
+              "url": "#"
+            },
+            {
+              "title": "Lifestyle",
+              "snippet": "Adopting a **sustainable** lifestyle benefits both you and the planet.",
+              "url": "#"
+            }
+          ],
+          "url": "www.example.com/lifestyle/sustainable-living"
         },
         {
-          "url": "https://www.example.com/ai-conference-2023",
-          "title": "AI Conference 2023",
-          "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.",
-          "ariaLabel": "Search Result: AI Conference 2023",
-          "showLink": true
+          "title": "Sustainable Architecture Trends",
+          "previewImage": "img/full-shot-different-people-working-together.png",
+          "initialMatch": "Discover how **sustainable** design is shaping the future of urban development, from green buildings to eco-friendly materials. Research shows that **sustainable** architecture not only benefits the environment but also enhances the well-being of its occupants.",
+          "url": "www.example.com/architecture/sustainable-trends"
         },
         {
-          "url": "https://www.example.com/web-development-summit-2023",
-          "title": "Web Development Summit 2023",
-          "text": "Explore the future of web development at the **Web Development Summit**.\n        Discover new technologies and network with industry leaders.",
-          "ariaLabel": "Search Result: Web Development Summit 2023",
-          "showLink": true
+          "title": "How to Build a Sustainable Business",
+          "matches": [
+            {
+              "title": "Getting Started",
+              "snippet": "A **sustainable** business model focuses on long-term growth and environmental responsibility.",
+              "url": "#"
+            },
+            {
+              "title": "Case Studies",
+              "snippet": "Explore examples of companies that have adopted **sustainable** practices successfully.",
+              "url": "#"
+            },
+            {
+              "title": "Materials",
+              "snippet": "Using **sustainable** materials can significantly reduce a building’s carbon footprint.",
+              "url": "#"
+            }
+          ],
+          "url": "www.example.com/business/sustainable-model"
         },
         {
-          "url": "https://www.example.com/data-science-bootcamp",
-          "title": "Data Science Bootcamp",
-          "text": "Enhance your skills with our **Data Science Bootcamp**.\n        Learn from experts and work on real-world projects.",
-          "ariaLabel": "Search Result: Data Science Bootcamp",
-          "showLink": true
+          "title": "Sustainable Living: Everyday Tips",
+          "previewImage": "img/full-shot-different-people-working-together.png",
+          "initialMatch": "Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future.",
+          "matches": [
+            {
+              "title": "Getting Started",
+              "snippet": "A **sustainable** business model focuses on long-term growth and environmental responsibility.",
+              "url": "#"
+            },
+            {
+              "title": "Case Studies",
+              "snippet": "Explore examples of companies that have adopted **sustainable** practices successfully.",
+              "url": "#"
+            },
+            {
+              "title": "Materials",
+              "snippet": "Using **sustainable** materials can significantly reduce a building’s carbon footprint.",
+              "url": "#"
+            }
+          ],
+          "url": "www.example.com/business/sustainable-model"
         }
       ]
     },
@@ -1544,7 +1575,7 @@
     "id": "corporate-cookie-consent--card",
     "group": "Corporate/Cookie Consent",
     "name": "Card",
-    "code": "<CookieConsent\n  component=\"dsa.cookie-consent\"\n  dialogue={{\n    alwaysActiveLabel: 'Always Active',\n    buttons: {\n      acceptLabel: 'Accept All',\n      rejectLabel: 'Reject All',\n      savePreferencesLabel: 'Save Preferences'\n    },\n    description: 'Manage your cookie preferences below.',\n    options: [\n      {\n        description: 'These cookies help us understand how our visitors interact with the website.',\n        key: 'measurement',\n        name: 'Analytics Cookies'\n      },\n      {\n        description: 'These cookies are used to deliver advertisements that are relevant to you.',\n        key: 'marketing',\n        name: 'Marketing Cookies'\n      },\n      {\n        description: 'These cookies allow the website to remember choices you make and provide enhanced, more personal features.',\n        key: 'functionality',\n        name: 'Functional Cookies'\n      },\n      {\n        description: 'These cookies collect information about how visitors use the website, such as which pages are visited most often and if they get error messages from web pages.',\n        key: 'experience',\n        name: 'Performance Cookies'\n      }\n    ],\n    required: [\n      {\n        description: 'These cookies are necessary for the website to function.',\n        key: 'necessary',\n        name: 'Essential Cookies'\n      }\n    ],\n    title: 'Cookie Preferences',\n    toggleLabels: {\n      accept: 'Accept',\n      reject: 'Reject'\n    }\n  }}\n  notice={{\n    acceptButton: {\n      label: 'Accept All'\n    },\n    customizeButton: {\n      label: 'Customize',\n      variant: 'tertiary'\n    },\n    decisionButtonVariant: 'primary',\n    description: 'We use cookies to enhance your experience on our website. You can choose which cookies to accept.',\n    displayMode: 'card',\n    rejectButton: {\n      label: 'Reject All'\n    },\n    title: 'We use cookies'\n  }}\n  revisitButton={{\n    label: 'Manage Cookies'\n  }}\n/>",
+    "code": "<PureCookieConsent\n  component=\"dsa.cookie-consent\"\n  dialogue={{\n    alwaysActiveLabel: 'Always Active',\n    buttons: {\n      acceptLabel: 'Accept All',\n      rejectLabel: 'Reject All',\n      savePreferencesLabel: 'Save Preferences'\n    },\n    description: 'Manage your cookie preferences below.',\n    options: [\n      {\n        description: 'These cookies help us understand how our visitors interact with the website.',\n        key: 'measurement',\n        name: 'Analytics Cookies'\n      },\n      {\n        description: 'These cookies are used to deliver advertisements that are relevant to you.',\n        key: 'marketing',\n        name: 'Marketing Cookies'\n      },\n      {\n        description: 'These cookies allow the website to remember choices you make and provide enhanced, more personal features.',\n        key: 'functionality',\n        name: 'Functional Cookies'\n      },\n      {\n        description: 'These cookies collect information about how visitors use the website, such as which pages are visited most often and if they get error messages from web pages.',\n        key: 'experience',\n        name: 'Performance Cookies'\n      }\n    ],\n    required: [\n      {\n        description: 'These cookies are necessary for the website to function.',\n        key: 'necessary',\n        name: 'Essential Cookies'\n      }\n    ],\n    title: 'Cookie Preferences',\n    toggleLabels: {\n      accept: 'Accept',\n      reject: 'Reject'\n    }\n  }}\n  notice={{\n    acceptButton: {\n      label: 'Accept All'\n    },\n    customizeButton: {\n      label: 'Customize',\n      variant: 'tertiary'\n    },\n    decisionButtonVariant: 'primary',\n    description: 'We use cookies to enhance your experience on our website. You can choose which cookies to accept.',\n    displayMode: 'card',\n    rejectButton: {\n      label: 'Reject All'\n    },\n    title: 'We use cookies'\n  }}\n  revisitButton={{\n    label: 'Manage Cookies'\n  }}\n/>",
     "args": {
       "notice": {
         "displayMode": "card",
@@ -1616,7 +1647,7 @@
     "id": "corporate-cookie-consent--banner",
     "group": "Corporate/Cookie Consent",
     "name": "Banner",
-    "code": "<CookieConsent\n  component=\"dsa.cookie-consent\"\n  dialogue={{\n    alwaysActiveLabel: 'Always Active',\n    buttons: {\n      acceptLabel: 'Accept All',\n      rejectLabel: 'Reject All',\n      savePreferencesLabel: 'Save Preferences'\n    },\n    decisionButtonVariant: 'tertiary',\n    description: 'Here you can enable or disable different types of cookies. Essential cookies are always active as they are necessary for the website to function properly. You can change your preferences at any time. Please note that disabling certain cookies may affect your experience on our website.',\n    options: [\n      {\n        description: 'These cookies help us to understand how visitors interact with our website by collecting and reporting information anonymously.',\n        key: 'functionality',\n        name: 'Statistics Cookies'\n      },\n      {\n        description: 'These cookies allow the website to remember choices you make, such as your language or region, to provide a more personalized experience.',\n        key: 'functionality',\n        name: 'Personalization Cookies'\n      },\n      {\n        description: 'Advertising cookies are used to deliver relevant ads and marketing campaigns to you. They track visitors across websites and collect information to provide customized ads.',\n        key: 'functionality',\n        name: 'Advertising Cookies'\n      }\n    ],\n    required: [\n      {\n        description: 'These cookies are required for basic website functionality, such as page navigation and access to secure areas of the website. The website cannot function properly without these cookies.',\n        key: 'necessary',\n        name: 'Essential Cookies'\n      }\n    ],\n    title: 'Manage Your Cookie Preferences',\n    toggleLabels: {\n      accept: 'Accept',\n      reject: 'Reject'\n    }\n  }}\n  notice={{\n    acceptButton: {\n      label: 'Accept All Cookies'\n    },\n    customizeButton: {\n      label: 'Customize Settings',\n      variant: 'secondary'\n    },\n    decisionButtonVariant: 'tertiary',\n    description: 'We use cookies and similar technologies to personalize content, provide social media features, and analyze our traffic. You can choose which categories you want to allow and change your preferences at any time. For more information, please see our privacy policy.',\n    displayMode: 'banner',\n    rejectButton: {\n      label: 'Reject Non-Essential'\n    },\n    title: 'Your Privacy Matters to Us'\n  }}\n  revisitButton={{\n    label: 'Manage Cookies'\n  }}\n/>",
+    "code": "<PureCookieConsent\n  component=\"dsa.cookie-consent\"\n  dialogue={{\n    alwaysActiveLabel: 'Always Active',\n    buttons: {\n      acceptLabel: 'Accept All',\n      rejectLabel: 'Reject All',\n      savePreferencesLabel: 'Save Preferences'\n    },\n    decisionButtonVariant: 'tertiary',\n    description: 'Here you can enable or disable different types of cookies. Essential cookies are always active as they are necessary for the website to function properly. You can change your preferences at any time. Please note that disabling certain cookies may affect your experience on our website.',\n    options: [\n      {\n        description: 'These cookies help us to understand how visitors interact with our website by collecting and reporting information anonymously.',\n        key: 'functionality',\n        name: 'Statistics Cookies'\n      },\n      {\n        description: 'These cookies allow the website to remember choices you make, such as your language or region, to provide a more personalized experience.',\n        key: 'functionality',\n        name: 'Personalization Cookies'\n      },\n      {\n        description: 'Advertising cookies are used to deliver relevant ads and marketing campaigns to you. They track visitors across websites and collect information to provide customized ads.',\n        key: 'functionality',\n        name: 'Advertising Cookies'\n      }\n    ],\n    required: [\n      {\n        description: 'These cookies are required for basic website functionality, such as page navigation and access to secure areas of the website. The website cannot function properly without these cookies.',\n        key: 'necessary',\n        name: 'Essential Cookies'\n      }\n    ],\n    title: 'Manage Your Cookie Preferences',\n    toggleLabels: {\n      accept: 'Accept',\n      reject: 'Reject'\n    }\n  }}\n  notice={{\n    acceptButton: {\n      label: 'Accept All Cookies'\n    },\n    customizeButton: {\n      label: 'Customize Settings',\n      variant: 'secondary'\n    },\n    decisionButtonVariant: 'tertiary',\n    description: 'We use cookies and similar technologies to personalize content, provide social media features, and analyze our traffic. You can choose which categories you want to allow and change your preferences at any time. For more information, please see our privacy policy.',\n    displayMode: 'banner',\n    rejectButton: {\n      label: 'Reject Non-Essential'\n    },\n    title: 'Your Privacy Matters to Us'\n  }}\n  revisitButton={{\n    label: 'Manage Cookies'\n  }}\n/>",
     "args": {
       "notice": {
         "displayMode": "banner",
@@ -1684,35 +1715,35 @@
     "id": "corporate-cookie-consent--c-15-t",
     "group": "Corporate/Cookie Consent",
     "name": "C15t",
-    "code": "<>\n  <Button\n    label=\"reset\"\n    onClick={function noRefCheck() {}}\n    size=\"small\"\n  />\n  <hr />\n  <CookieConsent\n    component=\"dsa.cookie-consent.c15t.offline\"\n    dialogue={{\n      alwaysActiveLabel: 'Always Active',\n      buttons: {\n        acceptLabel: 'Accept All',\n        rejectLabel: 'Reject All',\n        savePreferencesLabel: 'Save Preferences'\n      },\n      description: 'Manage your cookie preferences below.',\n      options: [\n        {\n          description: 'These cookies help us understand how our visitors interact with the website.',\n          key: 'measurement',\n          name: 'Analytics Cookies'\n        },\n        {\n          description: 'These cookies are used to deliver advertisements that are relevant to you.',\n          key: 'marketing',\n          name: 'Marketing Cookies'\n        },\n        {\n          description: 'These cookies allow the website to remember choices you make and provide enhanced, more personal features.',\n          key: 'functionality',\n          name: 'Functional Cookies'\n        },\n        {\n          description: 'These cookies collect information about how visitors use the website, such as which pages are visited most often and if they get error messages from web pages.',\n          key: 'experience',\n          name: 'Performance Cookies'\n        }\n      ],\n      required: [\n        {\n          description: 'These cookies are necessary for the website to function.',\n          key: 'necessary',\n          name: 'Essential Cookies'\n        }\n      ],\n      title: 'Cookie Preferences',\n      toggleLabels: {\n        accept: 'Accept',\n        reject: 'Reject'\n      }\n    }}\n    notice={{\n      acceptButton: {\n        label: 'Accept All'\n      },\n      customizeButton: {\n        label: 'Customize',\n        variant: 'tertiary'\n      },\n      decisionButtonVariant: 'primary',\n      description: 'We use cookies to enhance your experience on our website. You can choose which cookies to accept.',\n      displayMode: 'card',\n      rejectButton: {\n        label: 'Reject All'\n      },\n      title: 'We use cookies'\n    }}\n    revisitButton={{\n      label: 'Manage Cookies'\n    }}\n  />\n</>",
+    "code": "<>\n  <Button\n    label=\"reset\"\n    onClick={function noRefCheck() {}}\n    size=\"small\"\n  />\n  <hr />\n  <CookieConsent\n    component=\"dsa.cookie-consent.c15t.offline\"\n    dialogue={{\n      alwaysActiveLabel: 'Always Active',\n      buttons: {\n        acceptLabel: 'Accept All',\n        rejectLabel: 'Reject All',\n        savePreferencesLabel: 'Save Preferences'\n      },\n      description: 'Customize your privacy settings here. You can choose which types of cookies and tracking technologies you allow.',\n      options: [\n        {\n          description: 'These cookies are necessary for the website to function.',\n          key: 'measurement',\n          name: 'Essential Cookies'\n        },\n        {\n          description: 'These cookies are necessary for the website to function.',\n          key: 'marketing',\n          name: 'Essential Cookies'\n        },\n        {\n          description: 'These cookies are necessary for the website to function.',\n          key: 'functionality',\n          name: 'Essential Cookies'\n        },\n        {\n          description: 'These cookies are necessary for the website to function.',\n          key: 'experience',\n          name: 'Essential Cookies'\n        }\n      ],\n      required: [\n        {\n          description: 'This cookie is essential for the website to function and cannot be disabled.',\n          key: 'necessary',\n          name: 'Session Cookie'\n        }\n      ],\n      title: 'Manage Cookie Preferences',\n      toggleLabels: {\n        accept: 'Accept',\n        reject: 'Reject'\n      }\n    }}\n    notice={{\n      acceptButton: {\n        label: 'Accept All Cookies'\n      },\n      customizeButton: {\n        label: 'Customize Cookies',\n        variant: 'tertiary'\n      },\n      decisionButtonVariant: 'primary',\n      description: 'This website uses cookies to ensure you get the best experience on our website.',\n      displayMode: 'card',\n      rejectButton: {\n        label: 'Reject All Cookies'\n      },\n      title: 'We value your privacy'\n    }}\n    revisitButton={{\n      label: 'Manage Cookies'\n    }}\n  />\n</>",
     "args": {
       "notice": {
         "displayMode": "card",
-        "title": "We use cookies",
+        "title": "We value your privacy",
         "acceptButton": {
-          "label": "Accept All"
+          "label": "Accept All Cookies"
         },
         "rejectButton": {
-          "label": "Reject All"
+          "label": "Reject All Cookies"
         },
         "customizeButton": {
-          "label": "Customize",
+          "label": "Customize Cookies",
           "variant": "tertiary"
         },
         "decisionButtonVariant": "primary",
-        "description": "We use cookies to enhance your experience on our website. You can choose which cookies to accept."
+        "description": "This website uses cookies to ensure you get the best experience on our website."
       },
       "revisitButton": {
         "label": "Manage Cookies"
       },
       "dialogue": {
-        "title": "Cookie Preferences",
-        "description": "Manage your cookie preferences below.",
+        "title": "Manage Cookie Preferences",
+        "description": "Customize your privacy settings here. You can choose which types of cookies and tracking technologies you allow.",
         "required": [
           {
             "key": "necessary",
-            "name": "Essential Cookies",
-            "description": "These cookies are necessary for the website to function."
+            "name": "Session Cookie",
+            "description": "This cookie is essential for the website to function and cannot be disabled."
           }
         ],
         "buttons": {
@@ -1723,23 +1754,23 @@
         "options": [
           {
             "key": "measurement",
-            "name": "Analytics Cookies",
-            "description": "These cookies help us understand how our visitors interact with the website."
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
           },
           {
             "key": "marketing",
-            "name": "Marketing Cookies",
-            "description": "These cookies are used to deliver advertisements that are relevant to you."
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
           },
           {
             "key": "functionality",
-            "name": "Functional Cookies",
-            "description": "These cookies allow the website to remember choices you make and provide enhanced, more personal features."
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
           },
           {
             "key": "experience",
-            "name": "Performance Cookies",
-            "description": "These cookies collect information about how visitors use the website, such as which pages are visited most often and if they get error messages from web pages."
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
           }
         ],
         "toggleLabels": {
@@ -3927,21 +3958,73 @@
     },
     "screenshot": "img/screenshots/corporate-search-filter--default.png"
   },
+  {
+    "id": "corporate-search-form--pagefind",
+    "group": "Corporate / Search Form",
+    "name": "Pagefind",
+    "code": "<SearchForm\n  component=\"dsa.search-form.pagefind\"\n  moreButtonLabel=\"View all results\"\n  result={{\n    imageColSize: 'small',\n    showLink: true\n  }}\n  resultPerPage={10}\n/>",
+    "args": {
+      "component": "dsa.search-form.pagefind",
+      "result": {
+        "showLink": true,
+        "imageColSize": "small"
+      },
+      "resultPerPage": 10,
+      "moreButtonLabel": "View all results"
+    },
+    "screenshot": "img/screenshots/corporate-search-form--pagefind.png"
+  },
+  {
+    "id": "corporate-search-modal--pagefind",
+    "group": "Corporate / Search Modal",
+    "name": "Pagefind",
+    "code": "<>\n  <Button\n    data-topic=\"dsa.search-modal.open\"\n    ks-component=\"dsa.radio-emit\"\n    label=\"Open\"\n    size=\"small\"\n  />\n  <hr />\n  <SearchModal\n    closeAriaLabel=\"close\"\n    form={{\n      action: 'iframe.html?id=corporate-search-form--pagefind&viewMode=story',\n      component: 'dsa.search-form.pagefind',\n      moreButtonLabel: 'View all results',\n      result: {\n        imageColSize: 'small',\n        showLink: true\n      },\n      resultPerPage: 10,\n      target: '_self'\n    }}\n    headline=\"Search\"\n  />\n</>",
+    "args": {
+      "headline": "Search",
+      "closeAriaLabel": "close",
+      "form": {
+        "component": "dsa.search-form.pagefind",
+        "result": {
+          "showLink": true,
+          "imageColSize": "small"
+        },
+        "resultPerPage": 10,
+        "moreButtonLabel": "View all results",
+        "action": "iframe.html?id=corporate-search-form--pagefind&viewMode=story",
+        "target": "_self"
+      }
+    },
+    "screenshot": "img/screenshots/corporate-search-modal--pagefind.png"
+  },
   {
     "id": "corporate-search-result--default",
     "group": "Corporate / Search Result",
     "name": "Default",
-    "code": "<SearchResult\n  ariaLabel=\"Search Result: AI Conference 2023\"\n  link={{\n    label: 'Read more',\n    url: 'https://www.example.com/ai-conference-2023'\n  }}\n  showLink\n  text=\"Join us for the annual **AI Conference** brings together experts from around the world\n[...] register now for the **AI Conference** to secure your spot\n[...] highlights from last year’s **AI Conference** included keynote speeches on machine learning\n[...] find out more about the **AI Conference** agenda and speakers\"\n  title=\"AI Conference 2023\"\n  url=\"https://www.example.com/ai-conference-2023\"\n/>",
+    "code": "<SearchResult\n  imageColSize=\"small\"\n  initialMatch=\"Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future.\"\n  matches={[\n    {\n      snippet: 'Learn how leading companies are integrating **sustainability** into their core strategies.',\n      title: 'Keynote: Embracing Sustainability',\n      url: '#'\n    },\n    {\n      snippet: 'Business models that prioritize **sustainability** are shared by industry experts in this session.',\n      title: 'Panel: Sustainability in Practice',\n      url: '#'\n    },\n    {\n      snippet: 'In your organization, **sustainability** can be assessed using new tools and techniques.',\n      title: 'Workshop: Measuring Sustainability',\n      url: '#'\n    }\n  ]}\n  previewImage=\"img/full-shot-different-people-working-together.png\"\n  showLink\n  title=\"GreenTech Summit 2023\"\n  url=\"https://www.example.com/greentech-summit-2023\"\n/>",
     "args": {
-      "url": "https://www.example.com/ai-conference-2023",
-      "title": "AI Conference 2023",
-      "text": "Join us for the annual **AI Conference** brings together experts from around the world\n[...] register now for the **AI Conference** to secure your spot\n[...] highlights from last year’s **AI Conference** included keynote speeches on machine learning\n[...] find out more about the **AI Conference** agenda and speakers",
+      "url": "https://www.example.com/greentech-summit-2023",
+      "title": "GreenTech Summit 2023",
+      "imageColSize": "small",
+      "matches": [
+        {
+          "title": "Keynote: Embracing Sustainability",
+          "snippet": "Learn how leading companies are integrating **sustainability** into their core strategies.",
+          "url": "#"
+        },
+        {
+          "title": "Panel: Sustainability in Practice",
+          "snippet": "Business models that prioritize **sustainability** are shared by industry experts in this session.",
+          "url": "#"
+        },
+        {
+          "title": "Workshop: Measuring Sustainability",
+          "snippet": "In your organization, **sustainability** can be assessed using new tools and techniques.",
+          "url": "#"
+        }
+      ],
       "showLink": true,
-      "ariaLabel": "Search Result: AI Conference 2023",
-      "link": {
-        "url": "https://www.example.com/ai-conference-2023",
-        "label": "Read more"
-      }
+      "previewImage": "img/full-shot-different-people-working-together.png",
+      "initialMatch": "Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future."
     },
     "screenshot": "img/screenshots/corporate-search-result--default.png"
   },
@@ -4355,7 +4438,7 @@
     "id": "layout-split-even--text-with-logos",
     "group": "Layout/Split Even",
     "name": "TextWithLogos",
-    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"wide\"\n  first={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" highlightText text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  horizontalGutter=\"default\"\n  second={<><Logos logo={[{alt: 'Logo 1', src: 'img/logos/logoipsum-344.svg'}, {alt: 'Logo 2', src: 'img/logos/logoipsum-347.svg'}, {alt: 'Logo 3', src: 'img/logos/logoipsum-352.svg'}, {alt: 'Logo 4', src: 'img/logos/logoipsum-356.svg'}, {alt: 'Logo 5', src: 'img/logos/logoipsum-358.svg'}, {alt: 'Logo 6', src: 'img/logos/logoipsum-369.svg'}]} logosPerRow={3}/></>}\n  verticalAlign=\"center\"\n  verticalGutter=\"default\"\n/>",
+    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"wide\"\n  firstComponents={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" highlightText text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  horizontalGutter=\"default\"\n  secondComponents={<><Logos logo={[{alt: 'Logo 1', src: 'img/logos/logoipsum-344.svg'}, {alt: 'Logo 2', src: 'img/logos/logoipsum-347.svg'}, {alt: 'Logo 3', src: 'img/logos/logoipsum-352.svg'}, {alt: 'Logo 4', src: 'img/logos/logoipsum-356.svg'}, {alt: 'Logo 5', src: 'img/logos/logoipsum-358.svg'}, {alt: 'Logo 6', src: 'img/logos/logoipsum-369.svg'}]} logosPerRow={3}/></>}\n  verticalAlign=\"center\"\n  verticalGutter=\"default\"\n/>",
     "args": {
       "contentMinWidth": "wide",
       "contentGutter": "small",
@@ -4363,7 +4446,7 @@
       "verticalAlign": "center",
       "verticalGutter": "default",
       "horizontalGutter": "default",
-      "first": {
+      "firstComponents": {
         "key": null,
         "ref": null,
         "props": {
@@ -4386,7 +4469,7 @@
         },
         "_owner": null
       },
-      "second": {
+      "secondComponents": {
         "key": null,
         "ref": null,
         "props": {
@@ -4435,7 +4518,7 @@
     "id": "layout-split-even--faq-with-form",
     "group": "Layout/Split Even",
     "name": "FAQWithForm",
-    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"medium\"\n  first={<><Headline level=\"h2\" text=\"Frequently Asked Questions\"/><Faq questions={[{answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What are the benefits of investing in a Design System?'}, {answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What is a Design System?'}, {answer: 'A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices.', question: 'What is the role of a Headless CMS in a Design System?'}]} /></>}\n  horizontalGutter=\"large\"\n  second={<><Headline level=\"h3\" spaceAfter=\"minimum\" style=\"h3\" text=\"Still have questions?\"/><No Display Name label=\"Ask us directly!\" /><Button label=\"Submit\" /></>}\n  sectionMinWidth=\"medium\"\n  verticalAlign=\"top\"\n  verticalGutter=\"large\"\n/>",
+    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"medium\"\n  firstComponents={<><Headline level=\"h2\" text=\"Frequently Asked Questions\"/><Faq questions={[{answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What are the benefits of investing in a Design System?'}, {answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What is a Design System?'}, {answer: 'A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices.', question: 'What is the role of a Headless CMS in a Design System?'}]} /></>}\n  horizontalGutter=\"large\"\n  secondComponents={<><Headline level=\"h3\" spaceAfter=\"minimum\" style=\"h3\" text=\"Still have questions?\"/><No Display Name label=\"Ask us directly!\" /><Button label=\"Submit\" /></>}\n  sectionMinWidth=\"medium\"\n  verticalAlign=\"top\"\n  verticalGutter=\"large\"\n/>",
     "args": {
       "contentMinWidth": "medium",
       "contentGutter": "small",
@@ -4444,7 +4527,7 @@
       "verticalGutter": "large",
       "horizontalGutter": "large",
       "sectionMinWidth": "medium",
-      "first": {
+      "firstComponents": {
         "key": null,
         "ref": null,
         "props": {
@@ -4485,7 +4568,7 @@
         },
         "_owner": null
       },
-      "second": {
+      "secondComponents": {
         "key": null,
         "ref": null,
         "props": {
@@ -4735,6 +4818,7 @@
     "code": "<TeaserCard\n  button={{\n    chevron: false,\n    hidden: true,\n    label: 'Go to page'\n  }}\n  headline=\"Castaway\"\n  image=\"img/logos/castaway.svg\"\n  imageRatio=\"wide\"\n  layout=\"stack\"\n  text=\"Transforming Ideas into Code\"\n  url=\"#\"\n/>",
     "args": {
       "layout": "stack",
+      "centered": false,
       "button": {
         "chevron": false,
         "hidden": true,
@@ -4755,6 +4839,7 @@
     "code": "<TeaserCard\n  button={{\n    chevron: false,\n    hidden: false,\n    label: 'Read more'\n  }}\n  headline=\"Design System Services\"\n  image=\"img/02.jpg\"\n  imageRatio=\"landscape\"\n  layout=\"stack\"\n  text=\"Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.\"\n  url=\"#\"\n/>",
     "args": {
       "layout": "stack",
+      "centered": false,
       "button": {
         "chevron": false,
         "hidden": false,
@@ -4775,6 +4860,7 @@
     "code": "<TeaserCard\n  button={{\n    chevron: false,\n    hidden: false,\n    label: 'View showcase'\n  }}\n  headline=\"Transformation Love Story\"\n  image=\"img/showcases/comp_tfe01.jpg\"\n  imageRatio=\"wide\"\n  label=\"Tech\"\n  layout=\"row\"\n  text=\"See how we saved TechFusions a year's worth of development time\"\n  url=\"#\"\n/>",
     "args": {
       "layout": "row",
+      "centered": false,
       "button": {
         "chevron": false,
         "hidden": false,

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";
+import { SearchResultProps } from "../../SearchResultProps-f6f07017.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';
@@ -14,27 +16,38 @@ import '@kickstartds/core/lib/component';
 import '../../helpers-12f48df8.js';
 import 'markdown-to-jsx';
 import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/core/lib/container';
+import '../search-result-match/index.js';
 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",
+                    gutter: "large",
+                }, 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 };