@kickstartds/ds-agency-premium 1.6.71--canary.1995.06395ed.0 → 1.6.71--canary.45.1999.0

package/dist/components/pagination/index.js

@@ -4,6 +4,18 @@ import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { Link } from '@kickstartds/base/lib/link';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "ariaLabels": {
+        "previousPage": "Go to previous page",
+        "nextPage": "Go to next page",
+        "skipToFirstPage": "Skip to first page",
+        "skipToLastPage": "Skip to last page",
+        "goToPage": "Go to page"
+    },
+    "pages": []
+};
 
 const PaginationContextDefault = forwardRef(({ pages, ariaLabels }, ref) => {
     return (jsxs("div", { className: "dsa-pagination", ref: ref, children: [pages.findIndex((page) => page.active) !== 0 && (jsxs(Fragment, { children: [jsx(Link, { "aria-label": ariaLabels?.skipToFirstPage || "Skip to first page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-back", href: pages[0]?.url, children: jsx(Icon, { icon: "skip-back" }) }), jsx(Link, { "aria-label": ariaLabels?.previousPage || "Go to previous page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--prev", href: (() => {
@@ -45,7 +57,7 @@ const PaginationContextDefault = forwardRef(({ pages, ariaLabels }, ref) => {
 const PaginationContext = createContext(PaginationContextDefault);
 const Pagination = forwardRef((props, ref) => {
     const Component = useContext(PaginationContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Pagination.displayName = "Pagination";
 

package/dist/components/presets.json

@@ -2692,7 +2692,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",
@@ -2708,51 +2708,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"
         }
       ]
     },
@@ -2933,7 +2925,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",
@@ -2950,51 +2942,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"
         }
       ]
     },
@@ -4095,7 +4079,7 @@
     "id": "layout-slider--with-arrows",
     "group": "Layout/Slider",
     "name": "WithArrows",
-    "code": "<No Display Name\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</No Display Name>",
+    "code": "<Slider\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Slider>",
     "args": {
       "autoplay": false,
       "nav": true,
@@ -4111,7 +4095,7 @@
     "id": "layout-slider--with-teased-neighbours",
     "group": "Layout/Slider",
     "name": "WithTeasedNeighbours",
-    "code": "<No Display Name\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  teaseNeighbours\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</No Display Name>",
+    "code": "<Slider\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  teaseNeighbours\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Slider>",
     "args": {
       "autoplay": false,
       "nav": true,
@@ -4127,7 +4111,7 @@
     "id": "layout-slider--with-nav",
     "group": "Layout/Slider",
     "name": "WithNav",
-    "code": "<No Display Name\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</No Display Name>",
+    "code": "<Slider\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Slider>",
     "args": {
       "autoplay": false,
       "nav": true,
@@ -4143,7 +4127,7 @@
     "id": "layout-slider--with-autoplay",
     "group": "Layout/Slider",
     "name": "WithAutoplay",
-    "code": "<No Display Name\n  arrows\n  autoplay\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</No Display Name>",
+    "code": "<Slider\n  arrows\n  autoplay\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Slider>",
     "args": {
       "autoplay": true,
       "nav": true,

package/dist/components/providers/index.js

@@ -9,11 +9,11 @@ import { ButtonGroupProvider } from '../button-group/index.js';
 import 'react';
 import 'classnames';
 import '@kickstartds/base/lib/button';
+import '../../helpers-12f48df8.js';
 import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';
-import '../../helpers-12f48df8.js';
 import '@kickstartds/base/lib/teaser-box';
 import '@kickstartds/core/lib/container';
 import 'markdown-to-jsx';

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

@@ -5,12 +5,15 @@ import { TextField } from '@kickstartds/form/lib/text-field';
 import Markdown from 'markdown-to-jsx';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { Link } from '@kickstartds/base/lib/link';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {};
 
 const SearchBarContextDefault = forwardRef(({ placeholder, hint = "Press <kbd>Enter</kbd> to search", alternativeText = "Did you mean", alternativeResult = "AI Conference", }, ref) => (jsxs("div", { className: "dsa-search-bar", ref: ref, children: [jsxs("div", { className: "dsa-search-bar__input-container", children: [jsx(TextField, { hideLabel: true, type: "search", placeholder: placeholder || "Search...", className: "dsa-search-bar__input" }), jsx(Icon, { icon: "search" })] }), hint && jsx(Markdown, { className: "dsa-search-bar__hint", children: hint }), alternativeResult && (jsx("p", { className: "dsa-search-bar__alternative-text", children: jsxs(Fragment, { children: [alternativeText + " ", jsx(Link, { href: "#", children: alternativeResult })] }) }))] })));
 const SearchBarContext = createContext(SearchBarContextDefault);
 const SearchBar = forwardRef((props, ref) => {
     const Component = useContext(SearchBarContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 SearchBar.displayName = "SearchBar";
 

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

@@ -3,12 +3,17 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import Markdown from 'markdown-to-jsx';
 import { Link } from '@kickstartds/base/lib/link';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "categories": []
+};
 
 const SearchFilterContextDefault = forwardRef(({ title, categories }, ref) => (jsxs("div", { className: "dsa-search-filter", ref: ref, children: [title && jsx(Markdown, { className: "dsa-search-filter__title", children: title }), jsx("div", { className: "dsa-search-filter__categories", children: categories.map((category, index) => (jsxs("div", { className: "dsa-search-filter__category", children: [jsx(Link, { href: category.url, className: "dsa-search-filter__category-title", children: category.title }), jsx("span", { className: "dsa-search-filter__category-amount", children: " (" + category.amount + ")" })] }, index))) })] })));
 const SearchFilterContext = createContext(SearchFilterContextDefault);
 const SearchFilter = forwardRef((props, ref) => {
     const Component = useContext(SearchFilterContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 SearchFilter.displayName = "SearchFilter";
 

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

@@ -3,12 +3,17 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import { Link } from '@kickstartds/base/lib/link';
 import { RichText } from '@kickstartds/base/lib/rich-text';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "showLink": true
+};
 
 const SearchResultContextDefault = forwardRef(({ title, text, url, showLink, ariaLabel }, ref) => (jsxs(Link, { "aria-label": ariaLabel, href: url, className: "dsa-search-result", ref: ref, children: [jsx("span", { className: "dsa-search-result__title", children: title }), jsx(RichText, { text: text, className: "dsa-search-result__text" }), showLink && jsx("span", { className: "dsa-search-result__link", children: url })] })));
 const SearchResultContext = createContext(SearchResultContextDefault);
 const SearchResult = forwardRef((props, ref) => {
     const Component = useContext(SearchResultContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 SearchResult.displayName = "SearchResult";
 

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-ca3bc416.js";
+import { SectionProps } from "../../SectionProps-b9fd1bfd.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 {
   --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
@@ -95,14 +81,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 {
@@ -115,10 +98,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%));
@@ -141,46 +124,19 @@
 .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 {
   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(--ks-background-color-default);
   border-radius: var(--ks-border-radius-surface);
 }
-.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;