@kickstartds/ds-agency-premium 1.6.71--canary.45.2035.0 → 1.6.71--canary.2073.560ebaa.0

package/dist/components/presets.json

@@ -1544,7 +1544,7 @@
     "id": "corporate-cookie-consent--card",
     "group": "Corporate/Cookie Consent",
     "name": "Card",
-    "code": "<CookieConsent\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        checked: true,\n        description: 'These cookies help us understand how our visitors interact with the website.',\n        name: 'Analytics Cookies'\n      },\n      {\n        checked: true,\n        description: 'These cookies are used to deliver advertisements that are relevant to you.',\n        name: 'Marketing Cookies'\n      },\n      {\n        checked: true,\n        description: 'These cookies allow the website to remember choices you make and provide enhanced, more personal features.',\n        name: 'Functional Cookies'\n      },\n      {\n        checked: true,\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        name: 'Performance Cookies'\n      }\n    ],\n    required: [\n      {\n        description: 'These cookies are necessary for the website to function.',\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    toggle: true\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",
@@ -1563,14 +1563,14 @@
         "description": "We use cookies to enhance your experience on our website. You can choose which cookies to accept."
       },
       "revisitButton": {
-        "label": "Manage Cookies",
-        "toggle": true
+        "label": "Manage Cookies"
       },
       "dialogue": {
         "title": "Cookie Preferences",
         "description": "Manage your cookie preferences below.",
         "required": [
           {
+            "key": "necessary",
             "name": "Essential Cookies",
             "description": "These cookies are necessary for the website to function."
           }
@@ -1582,24 +1582,24 @@
         },
         "options": [
           {
+            "key": "measurement",
             "name": "Analytics Cookies",
-            "description": "These cookies help us understand how our visitors interact with the website.",
-            "checked": true
+            "description": "These cookies help us understand how our visitors interact with the website."
           },
           {
+            "key": "marketing",
             "name": "Marketing Cookies",
-            "description": "These cookies are used to deliver advertisements that are relevant to you.",
-            "checked": true
+            "description": "These cookies are used to deliver advertisements that are relevant to you."
           },
           {
+            "key": "functionality",
             "name": "Functional Cookies",
-            "description": "These cookies allow the website to remember choices you make and provide enhanced, more personal features.",
-            "checked": true
+            "description": "These cookies allow the website to remember choices you make and provide enhanced, more personal features."
           },
           {
+            "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.",
-            "checked": true
+            "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."
           }
         ],
         "toggleLabels": {
@@ -1607,7 +1607,8 @@
           "reject": "Reject"
         },
         "alwaysActiveLabel": "Always Active"
-      }
+      },
+      "component": "dsa.cookie-consent"
     },
     "screenshot": "img/screenshots/corporate-cookie-consent--card.png"
   },
@@ -1615,7 +1616,7 @@
     "id": "corporate-cookie-consent--banner",
     "group": "Corporate/Cookie Consent",
     "name": "Banner",
-    "code": "<CookieConsent\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        checked: true,\n        description: 'These cookies help us to understand how visitors interact with our website by collecting and reporting information anonymously.',\n        name: 'Statistics Cookies'\n      },\n      {\n        checked: true,\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        name: 'Personalization Cookies'\n      },\n      {\n        checked: true,\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        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        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    toggle: true\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",
@@ -1634,14 +1635,14 @@
         "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."
       },
       "revisitButton": {
-        "label": "Manage Cookies",
-        "toggle": true
+        "label": "Manage Cookies"
       },
       "dialogue": {
         "title": "Manage Your Cookie Preferences",
         "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.",
         "required": [
           {
+            "key": "necessary",
             "name": "Essential Cookies",
             "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."
           }
@@ -1653,19 +1654,19 @@
         },
         "options": [
           {
+            "key": "functionality",
             "name": "Statistics Cookies",
-            "description": "These cookies help us to understand how visitors interact with our website by collecting and reporting information anonymously.",
-            "checked": true
+            "description": "These cookies help us to understand how visitors interact with our website by collecting and reporting information anonymously."
           },
           {
+            "key": "functionality",
             "name": "Personalization Cookies",
-            "description": "These cookies allow the website to remember choices you make, such as your language or region, to provide a more personalized experience.",
-            "checked": true
+            "description": "These cookies allow the website to remember choices you make, such as your language or region, to provide a more personalized experience."
           },
           {
+            "key": "functionality",
             "name": "Advertising Cookies",
-            "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.",
-            "checked": true
+            "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."
           }
         ],
         "toggleLabels": {
@@ -1674,10 +1675,83 @@
         },
         "alwaysActiveLabel": "Always Active",
         "decisionButtonVariant": "tertiary"
-      }
+      },
+      "component": "dsa.cookie-consent"
     },
     "screenshot": "img/screenshots/corporate-cookie-consent--banner.png"
   },
+  {
+    "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: '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 value your privacy",
+        "acceptButton": {
+          "label": "Accept All Cookies"
+        },
+        "rejectButton": {
+          "label": "Reject All Cookies"
+        },
+        "customizeButton": {
+          "label": "Customize Cookies",
+          "variant": "tertiary"
+        },
+        "decisionButtonVariant": "primary",
+        "description": "This website uses cookies to ensure you get the best experience on our website."
+      },
+      "revisitButton": {
+        "label": "Manage Cookies"
+      },
+      "dialogue": {
+        "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": "Session Cookie",
+            "description": "This cookie is essential for the website to function and cannot be disabled."
+          }
+        ],
+        "buttons": {
+          "acceptLabel": "Accept All",
+          "rejectLabel": "Reject All",
+          "savePreferencesLabel": "Save Preferences"
+        },
+        "options": [
+          {
+            "key": "measurement",
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
+          },
+          {
+            "key": "marketing",
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
+          },
+          {
+            "key": "functionality",
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
+          },
+          {
+            "key": "experience",
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
+          }
+        ],
+        "toggleLabels": {
+          "accept": "Accept",
+          "reject": "Reject"
+        },
+        "alwaysActiveLabel": "Always Active"
+      },
+      "component": "dsa.cookie-consent.c15t.offline"
+    },
+    "screenshot": "img/screenshots/corporate-cookie-consent--c-15-t.png"
+  },
   {
     "id": "components-cta--banner",
     "group": "Components/Cta",
@@ -2830,7 +2904,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: '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/>",
+    "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/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -2846,43 +2920,51 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Active Item",
+          "label": "Fahrzeugsuche",
           "active": true
         },
         {
           "url": "#",
-          "label": "Navigation Item"
-        },
-        {
-          "url": "#",
-          "label": "Dropdown",
+          "label": "Marken",
           "items": [
             {
               "url": "#",
-              "label": "Level 2 Item"
+              "label": "Nissan"
             },
             {
               "url": "#",
-              "label": "Active Item",
+              "label": "Kia",
               "active": true
             },
             {
               "url": "#",
-              "label": "An Item with a longer Label"
+              "label": "Maserati"
             },
             {
               "url": "#",
-              "label": "And One last one"
+              "label": "Corvette"
             }
           ]
         },
         {
           "url": "#",
-          "label": "One more Item"
+          "label": "Standorte"
         },
         {
           "url": "#",
-          "label": "Last Item"
+          "label": "Bonusprogramm"
+        },
+        {
+          "url": "#",
+          "label": "News"
+        },
+        {
+          "url": "#",
+          "label": "Jobs"
+        },
+        {
+          "url": "#",
+          "label": "Kontakt"
         }
       ]
     },
@@ -3063,7 +3145,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: '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/>",
+    "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/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -3080,43 +3162,51 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Active Item",
+          "label": "Fahrzeugsuche",
           "active": true
         },
         {
           "url": "#",
-          "label": "Navigation Item"
-        },
-        {
-          "url": "#",
-          "label": "Dropdown",
+          "label": "Marken",
           "items": [
             {
               "url": "#",
-              "label": "Level 2 Item"
+              "label": "Nissan"
             },
             {
               "url": "#",
-              "label": "Active Item",
+              "label": "Kia",
               "active": true
             },
             {
               "url": "#",
-              "label": "An Item with a longer Label"
+              "label": "Maserati"
             },
             {
               "url": "#",
-              "label": "And One last one"
+              "label": "Corvette"
             }
           ]
         },
         {
           "url": "#",
-          "label": "One more Item"
+          "label": "Standorte"
+        },
+        {
+          "url": "#",
+          "label": "Bonusprogramm"
+        },
+        {
+          "url": "#",
+          "label": "News"
+        },
+        {
+          "url": "#",
+          "label": "Jobs"
         },
         {
           "url": "#",
-          "label": "Last Item"
+          "label": "Kontakt"
         }
       ]
     },

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-d60aba86.js";
+import { SectionProps } from "../../SectionProps-4e3c6fe0.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,7 +42,9 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
         spotlight,
         content?.mode === "slider",
     ]);
-    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style && style !== "default" && `dsa-section-style--${style}`, transition &&
+    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style &&
+            style !== "default" &&
+            `dsa-section--style 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,18 +26,20 @@
   --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--transition_to-default: linear-gradient(
-    178deg,
-    transparent 75%,
-    var(--ks-background-color-default) 75%
+  --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-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_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-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;
@@ -49,6 +51,18 @@
   --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));
@@ -81,11 +95,14 @@
 }
 
 .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_default, var(--ks-color-bg));
+  background-color: var(--dsa-section--background-color, 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 {
@@ -98,10 +115,10 @@
   --l-section--gutter: var(--dsa-section--gutter_none);
 }
 .l-section.dsa-section.l-section--accent {
-  background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
+  --dsa-section--background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
 }
 .l-section.dsa-section.l-section--bold {
-  background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
+  --dsa-section--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%));
@@ -124,22 +141,49 @@
 .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--framed {
+.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 {
   --frame-background-color: var(--ks-background-color-accent);
 }
-.l-section.dsa-section-style--framed .l-section__container--content .l-section__content {
+.l-section.dsa-section--style--framed .l-section__container--content .l-section__content {
   padding: var(--dsa-section--space_default);
   background-color: var(--frame-background-color, var(--ks-background-color-default));
   border-radius: var(--ks-border-radius-surface);
 }
-.l-section.dsa-section-style--framed.l-section--accent, .l-section.dsa-section-style--framed.l-section--bold {
+.l-section.dsa-section--style--framed.l-section--accent, .l-section.dsa-section--style--framed.l-section--bold {
   --frame-background-color: var(--ks-background-color-default);
 }
-.l-section.dsa-section-style--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-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--colorful {
-  background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 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--spotlight {
   position: relative;

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

@@ -25,7 +25,10 @@
       "enum": [
         "default",
         "framed",
-        "deko"
+        "shine-left",
+        "shine-right",
+        "carbon",
+        "stripe"
       ],
       "default": "default"
     },
@@ -1293,6 +1296,15 @@
                       "title": "Disabled?",
                       "description": "Whether the button should be disabled",
                       "default": false
+                    },
+                    "type": {
+                      "type": "string",
+                      "title": "Button Type",
+                      "enum": [
+                        "button",
+                        "submit",
+                        "reset"
+                      ]
                     }
                   },
                   "additionalProperties": false,
@@ -3730,6 +3742,15 @@
                                 "title": "Disabled?",
                                 "description": "Whether the button should be disabled",
                                 "default": false
+                              },
+                              "type": {
+                                "type": "string",
+                                "title": "Button Type",
+                                "enum": [
+                                  "button",
+                                  "submit",
+                                  "reset"
+                                ]
                               }
                             },
                             "additionalProperties": false,
@@ -6554,6 +6575,15 @@
                                 "title": "Disabled?",
                                 "description": "Whether the button should be disabled",
                                 "default": false
+                              },
+                              "type": {
+                                "type": "string",
+                                "title": "Button Type",
+                                "enum": [
+                                  "button",
+                                  "submit",
+                                  "reset"
+                                ]
                               }
                             },
                             "additionalProperties": false,
@@ -9512,6 +9542,15 @@
                                 "title": "Disabled?",
                                 "description": "Whether the button should be disabled",
                                 "default": false
+                              },
+                              "type": {
+                                "type": "string",
+                                "title": "Button Type",
+                                "enum": [
+                                  "button",
+                                  "submit",
+                                  "reset"
+                                ]
                               }
                             },
                             "additionalProperties": false,
@@ -12336,6 +12375,15 @@
                                 "title": "Disabled?",
                                 "description": "Whether the button should be disabled",
                                 "default": false
+                              },
+                              "type": {
+                                "type": "string",
+                                "title": "Button Type",
+                                "enum": [
+                                  "button",
+                                  "submit",
+                                  "reset"
+                                ]
                               }
                             },
                             "additionalProperties": false,
@@ -14867,6 +14915,15 @@
             "title": "Disabled?",
             "description": "Whether the button should be disabled",
             "default": false
+          },
+          "type": {
+            "type": "string",
+            "title": "Button Type",
+            "enum": [
+              "button",
+              "submit",
+              "reset"
+            ]
           }
         },
         "additionalProperties": false,