@kickstartds/ds-agency-premium 1.4.0--canary.12.465.0 → 1.4.0--canary.14.680.0

package/dist/components/presets.json

@@ -315,7 +315,7 @@
     "id": "pages-archetypes--blog-post",
     "group": "Pages/Archetypes",
     "name": "BlogPost",
-    "code": "<BlogPost\n  aside={{\n    author: {\n      byline: 'Senior Developer',\n      email: 'Jane.doe@example.com',\n      image: 'img/people/author-emily.png',\n      name: 'Jane Doe',\n      twitter: 'Janedoe'\n    },\n    date: '12/30/2022',\n    readingTime: '5 min read',\n    socialSharing: [\n      {\n        href: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog',\n        icon: 'twitter',\n        title: 'Share on Twitter'\n      },\n      {\n        href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline',\n        icon: 'linkedin',\n        title: 'Share on LinkedIn'\n      }\n    ]\n  }}\n  content=\"\n## Introduction\nThe future of **ArtiEficial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          \"\n  cta={{\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact Us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Learn More',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: false,\n    headline: 'Ready to Transform Your Development Process?',\n    highlightText: false,\n    image: {\n      padding: true\n    },\n    order: {\n      desktopImageLast: true,\n      mobileImageLast: false\n    },\n    sub: 'Start your journey today.',\n    text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n    textAlign: 'center'\n  }}\n  head={{\n    date: '12/30/2022',\n    headline: 'The Future of AI: A Glimpse into the Unseen',\n    image: 'img/close-up-young-business-team-working.png',\n    tags: [\n      'Technology',\n      'AI'\n    ]\n  }}\n/>",
+    "code": "<BlogPost\n  aside={{\n    author: {\n      byline: 'Senior Developer',\n      email: 'Jane.doe@example.com',\n      image: 'img/people/author-emily.png',\n      name: 'Jane Doe',\n      twitter: 'Janedoe'\n    },\n    date: '12/30/2022',\n    readingTime: '5 min read',\n    socialSharing: [\n      {\n        href: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog',\n        icon: 'twitter',\n        title: 'Share on Twitter'\n      },\n      {\n        href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline',\n        icon: 'linkedin',\n        title: 'Share on LinkedIn'\n      }\n    ]\n  }}\n  content=\"\n## Introduction\nThe future of **ArtiEficial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          \"\n  cta={{\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact Us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Learn More',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: false,\n    headline: 'Ready to Transform Your Development Process?',\n    highlightText: false,\n    image: {\n      padding: true\n    },\n    order: {\n      desktopImageLast: true,\n      mobileImageLast: false\n    },\n    sub: 'Start your journey today.',\n    text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n    textAlign: 'center'\n  }}\n  head={{\n    date: '12/30/2022',\n    headline: 'The Future of AI: A Glimpse into the Unseen',\n    image: 'img/close-up-young-business-team-working.png',\n    tags: [\n      'Technology',\n      'AI'\n    ]\n  }}\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    }\n  ]}\n/>",
     "args": {
       "head": {
         "date": "12/30/2022",
@@ -349,6 +349,134 @@
         "readingTime": "5 min read",
         "date": "12/30/2022"
       },
+      "section": [
+        {
+          "width": "default",
+          "style": "default",
+          "backgroundColor": "default",
+          "spotlight": false,
+          "spaceBefore": "default",
+          "spaceAfter": "default",
+          "inverted": false,
+          "headerSpacing": false,
+          "headline": {
+            "text": "Section headline",
+            "large": false,
+            "width": "unset"
+          },
+          "content": {
+            "width": "unset",
+            "align": "center",
+            "gutter": "default",
+            "mode": "list",
+            "tileWidth": "default"
+          },
+          "buttons": [
+            {
+              "label": "Book a meeting",
+              "variant": "secondary",
+              "size": "medium",
+              "disabled": false
+            },
+            {
+              "label": "Book a meeting",
+              "variant": "secondary",
+              "size": "medium",
+              "disabled": false
+            },
+            {
+              "label": "Book a meeting",
+              "variant": "secondary",
+              "size": "medium",
+              "disabled": false
+            }
+          ]
+        },
+        {
+          "width": "default",
+          "style": "default",
+          "backgroundColor": "default",
+          "spotlight": false,
+          "spaceBefore": "default",
+          "spaceAfter": "default",
+          "inverted": false,
+          "headerSpacing": false,
+          "headline": {
+            "text": "Section headline",
+            "large": false,
+            "width": "unset"
+          },
+          "content": {
+            "width": "unset",
+            "align": "center",
+            "gutter": "default",
+            "mode": "list",
+            "tileWidth": "default"
+          },
+          "buttons": [
+            {
+              "label": "Book a meeting",
+              "variant": "secondary",
+              "size": "medium",
+              "disabled": false
+            },
+            {
+              "label": "Book a meeting",
+              "variant": "secondary",
+              "size": "medium",
+              "disabled": false
+            },
+            {
+              "label": "Book a meeting",
+              "variant": "secondary",
+              "size": "medium",
+              "disabled": false
+            }
+          ]
+        },
+        {
+          "width": "default",
+          "style": "default",
+          "backgroundColor": "default",
+          "spotlight": false,
+          "spaceBefore": "default",
+          "spaceAfter": "default",
+          "inverted": false,
+          "headerSpacing": false,
+          "headline": {
+            "text": "Section headline",
+            "large": false,
+            "width": "unset"
+          },
+          "content": {
+            "width": "unset",
+            "align": "center",
+            "gutter": "default",
+            "mode": "list",
+            "tileWidth": "default"
+          },
+          "buttons": [
+            {
+              "label": "Book a meeting",
+              "variant": "secondary",
+              "size": "medium",
+              "disabled": false
+            },
+            {
+              "label": "Book a meeting",
+              "variant": "secondary",
+              "size": "medium",
+              "disabled": false
+            },
+            {
+              "label": "Book a meeting",
+              "variant": "secondary",
+              "size": "medium",
+              "disabled": false
+            }
+          ]
+        }
+      ],
       "cta": {
         "headline": "Ready to Transform Your Development Process?",
         "sub": "Start your journey today.",
@@ -1156,31 +1284,55 @@
     "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    lazy: false,\n    src: '/logo.svg',\n    width: 176\n  }}\n  logoHref=\"/\"\n  navItems={[\n    {\n      href: '#',\n      label: 'Nav Item'\n    },\n    {\n      active: true,\n      href: '#',\n      label: 'Active Item'\n    },\n    {\n      href: '#',\n      label: 'Another Item'\n    },\n    {\n      href: '#',\n      label: 'One more Item'\n    },\n    {\n      href: '#',\n      label: 'Last Item'\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      href: '#',\n      label: 'Active Item'\n    },\n    {\n      href: '#',\n      label: 'Navigation Item'\n    },\n    {\n      href: '#',\n      items: [\n        {\n          href: '#',\n          id: '',\n          label: 'Level 2 Item'\n        },\n        {\n          active: true,\n          href: '#',\n          id: '',\n          label: 'Active Item'\n        },\n        {\n          href: '#',\n          id: '',\n          label: 'An Item with a longer Label'\n        },\n        {\n          href: '#',\n          id: '',\n          label: 'And One last one'\n        }\n      ],\n      label: 'Dropdown'\n    },\n    {\n      href: '#',\n      label: 'One more Item'\n    },\n    {\n      href: '#',\n      label: 'Last Item'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
+        "srcInverted": "/logo-inverted.svg",
+        "inverted": false,
+        "homepageHref": "#",
         "alt": "Systemics Logo",
         "width": 176,
-        "height": 40,
-        "lazy": false
+        "height": 40
       },
-      "logoHref": "/",
       "byline": "© 2024 systemics Inc. All rights reserved.",
       "inverted": false,
       "navItems": [
         {
           "href": "#",
-          "label": "Nav Item"
+          "label": "Active Item",
+          "active": true
         },
         {
           "href": "#",
-          "label": "Active Item",
-          "active": true
+          "label": "Navigation Item"
         },
         {
           "href": "#",
-          "label": "Another Item"
+          "label": "Dropdown",
+          "items": [
+            {
+              "href": "#",
+              "label": "Level 2 Item",
+              "id": ""
+            },
+            {
+              "href": "#",
+              "label": "Active Item",
+              "active": true,
+              "id": ""
+            },
+            {
+              "href": "#",
+              "label": "An Item with a longer Label",
+              "id": ""
+            },
+            {
+              "href": "#",
+              "label": "And One last one",
+              "id": ""
+            }
+          ]
         },
         {
           "href": "#",
@@ -1369,31 +1521,56 @@
     "id": "layout-header--header",
     "group": "Layout/Header",
     "name": "Header",
-    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    lazy: false,\n    src: '/logo.svg',\n    width: 176\n  }}\n  logoHref=\"/\"\n  navItems={[\n    {\n      href: '#',\n      label: 'Nav Item'\n    },\n    {\n      active: true,\n      href: '#',\n      label: 'Active Item'\n    },\n    {\n      href: '#',\n      label: 'Another Item'\n    },\n    {\n      href: '#',\n      label: 'One more Item'\n    },\n    {\n      href: '#',\n      label: 'Last Item'\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      href: '#',\n      label: 'Active Item'\n    },\n    {\n      href: '#',\n      label: 'Navigation Item'\n    },\n    {\n      href: '#',\n      items: [\n        {\n          href: '#',\n          id: '',\n          label: 'Level 2 Item'\n        },\n        {\n          active: true,\n          href: '#',\n          id: '',\n          label: 'Active Item'\n        },\n        {\n          href: '#',\n          id: '',\n          label: 'An Item with a longer Label'\n        },\n        {\n          href: '#',\n          id: '',\n          label: 'And One last one'\n        }\n      ],\n      label: 'Dropdown'\n    },\n    {\n      href: '#',\n      label: 'One more Item'\n    },\n    {\n      href: '#',\n      label: 'Last Item'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
+        "srcInverted": "/logo-inverted.svg",
+        "homepageHref": "#",
         "alt": "Systemics Logo",
         "width": 176,
-        "height": 40,
-        "lazy": false
+        "height": 40
       },
-      "logoHref": "/",
+      "flyoutInverted": false,
+      "dropdownInverted": false,
       "floating": false,
       "inverted": false,
       "navItems": [
         {
           "href": "#",
-          "label": "Nav Item"
+          "label": "Active Item",
+          "active": true
         },
         {
           "href": "#",
-          "label": "Active Item",
-          "active": true
+          "label": "Navigation Item"
         },
         {
           "href": "#",
-          "label": "Another Item"
+          "label": "Dropdown",
+          "items": [
+            {
+              "href": "#",
+              "label": "Level 2 Item",
+              "id": ""
+            },
+            {
+              "href": "#",
+              "label": "Active Item",
+              "active": true,
+              "id": ""
+            },
+            {
+              "href": "#",
+              "label": "An Item with a longer Label",
+              "id": ""
+            },
+            {
+              "href": "#",
+              "label": "And One last one",
+              "id": ""
+            }
+          ]
         },
         {
           "href": "#",
@@ -1617,7 +1794,7 @@
     "id": "components-image-story--sticky-image-next-to-scrolling-text",
     "group": "Components/Image Story",
     "name": "StickyImageNextToScrollingText",
-    "code": "<ImageStory\n  buttons={[\n    {\n      disabled: false,\n      label: 'Learn More',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      label: 'Contact Us',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    }\n  ]}\n  headline=\"The Sanity & Next.js Experts\"\n  image={{\n    ratio: 'none',\n    src: 'img/full-shot-different-people-working-together.png'\n  }}\n  largeHeadline\n  layout=\"imageLeft\"\n  sub=\"Subheadline\"\n  text=\"\nHere at Systemics, we bring a range of design system services that can make a difference:\n\n### 1. Design System Consulting\nLet's work side by side to shape a design system strategy that aligns perfectly with your goals. It's not just about tools; it's about guiding principles, stakeholder management und making the right decisions at the right time.\n\n### 2. Design System Creation & Development\nWe'll bring your design system from concept to production, giving you consistent and engaging user experiences across different platforms. We will work together with your digital teams to transfer all complex Figma ideas into code using kickstartDS.\n\n### 3. Headless CMS & Websites\nWe leverage the power of headless CMSs to provide scalable, flexible, and versatile websites that drive your online presence.\n\n### 4. Design System Training\nWe empower your digital teams with the knowledge and skills to manage and evolve your design system effectively.\n\nReady to make your digital journey exceptional?\n    \"\n  textAlign=\"left\"\n/>",
+    "code": "<ImageStory\n  buttons={[\n    {\n      disabled: false,\n      label: 'Learn More',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      label: 'Contact Us',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    }\n  ]}\n  headline=\"The Sanity & Next.js Experts\"\n  image={{\n    aspectRatio: 'unset',\n    src: 'img/full-shot-different-people-working-together.png',\n    vAlign: 'top'\n  }}\n  largeHeadline\n  layout=\"imageLeft\"\n  sub=\"Subheadline\"\n  text=\"\nHere at Systemics, we bring a range of design system services that can make a difference:\n\n### 1. Design System Consulting\nLet's work side by side to shape a design system strategy that aligns perfectly with your goals. It's not just about tools; it's about guiding principles, stakeholder management und making the right decisions at the right time.\n\n### 2. Design System Creation & Development\nWe'll bring your design system from concept to production, giving you consistent and engaging user experiences across different platforms. We will work together with your digital teams to transfer all complex Figma ideas into code using kickstartDS.\n\n### 3. Headless CMS & Websites\nWe leverage the power of headless CMSs to provide scalable, flexible, and versatile websites that drive your online presence.\n\n### 4. Design System Training\nWe empower your digital teams with the knowledge and skills to manage and evolve your design system effectively.\n\nReady to make your digital journey exceptional?\n    \"\n  textAlign=\"left\"\n/>",
     "args": {
       "headline": "The Sanity & Next.js Experts",
       "largeHeadline": true,
@@ -1641,7 +1818,8 @@
         }
       ],
       "image": {
-        "ratio": "none",
+        "aspectRatio": "unset",
+        "vAlign": "top",
         "src": "img/full-shot-different-people-working-together.png"
       },
       "textAlign": "left",

package/dist/components/providers/index.js

@@ -9,7 +9,6 @@ import 'react';
 import 'classnames';
 import '@kickstartds/base/lib/button';
 import '@kickstartds/core/lib/react';
-import '../headline-level-context/index.js';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-93230a76.js";
-declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
+import { SectionProps } from "../../SectionProps-83d399b4.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 & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionProvider: FC<PropsWithChildren<any>>;
-export { Section, SectionProvider };
+export { SectionContextDefault, SectionContext, Section, SectionProvider };

package/dist/components/section/index.js

@@ -1,14 +1,13 @@
 import "./section.css";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { useKsComponent } from '@kickstartds/core/lib/react';
-import { HeadlineLevelProvider } from '../headline-level-context/index.js';
-import { SectionContextDefault, SectionContext } from '@kickstartds/base/lib/section';
+import { SectionContextDefault as SectionContextDefault$1, SectionContext as SectionContext$1 } from '@kickstartds/base/lib/section';
 import { identifier } from './js/Section.client.js';
 import '@kickstartds/core/lib/component';
 
-const Section = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
+const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
     const { large: headlineLarge = false, ...headlineRest } = {
         align: "left",
         ...headline,
@@ -17,33 +16,38 @@ const Section = forwardRef(({ headline, content, headerSpacing, width = "default
         spotlight,
         content?.mode === "slider",
     ]);
-    return (jsx(HeadlineLevelProvider, { children: jsx(SectionContextDefault, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
-                `dsa-section-style--${style === "verticalGradient"
-                    ? "vertical-gradient"
-                    : style === "horizontalGradient"
-                        ? "horizontal-gradient"
-                        : style === "accentTransition"
-                            ? "accent-transition"
-                            : style === "boldTransition"
-                                ? "bold-transition"
-                                : style === "symmetricGlow"
-                                    ? "symmetric-glow"
-                                    : style === "anchorGlow"
-                                        ? "anchor-glow"
-                                        : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, content: content, headline: {
-                ...headlineRest,
-                spaceAfter: "large",
-                // @ts-expect-error
-                content: headlineRest.text,
-                level: "h2",
-                style: headlineLarge ? "h1" : "h2",
-            }, buttons: {
-                buttons,
-                // @ts-expect-error
-                items: buttons,
-            }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: inverted, ref: ref, children: props.children }) }));
+    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
+            `dsa-section-style--${style === "verticalGradient"
+                ? "vertical-gradient"
+                : style === "horizontalGradient"
+                    ? "horizontal-gradient"
+                    : style === "accentTransition"
+                        ? "accent-transition"
+                        : style === "boldTransition"
+                            ? "bold-transition"
+                            : style === "symmetricGlow"
+                                ? "symmetric-glow"
+                                : style === "anchorGlow"
+                                    ? "anchor-glow"
+                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, content: content, headline: {
+            ...headlineRest,
+            spaceAfter: "large",
+            // @ts-expect-error
+            content: headlineRest.text,
+            level: "h2",
+            style: headlineLarge ? "h1" : "h2",
+        }, buttons: {
+            buttons,
+            // @ts-expect-error
+            items: buttons,
+        }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: inverted, ref: ref, children: props.children }));
+});
+const SectionContext = createContext(SectionContextDefault);
+const Section = forwardRef((props, ref) => {
+    const Component = useContext(SectionContext);
+    return jsx(Component, { ...props, ref: ref });
 });
 Section.displayName = "Section";
-const SectionProvider = (props) => (jsx(SectionContext.Provider, { ...props, value: Section }));
+const SectionProvider = (props) => (jsx(SectionContext$1.Provider, { ...props, value: Section }));
 
-export { Section, SectionProvider };
+export { Section, SectionContext, SectionContextDefault, SectionProvider };

package/dist/components/section/section.css

@@ -66,8 +66,8 @@
     var(--ks-color-primary-alpha-5) 0%,
     var(--ks-color-secondary-alpha-5) 100%
   );
-  --dsa-section__spotlight--left: 50%;
-  --dsa-section__spotlight--top: 50%;
+  --dsa-section__spotlight--size: 150px;
+  --dsa-section__spotlight--blur: 100%;
   --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
 }
 
@@ -166,7 +166,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  background-image: radial-gradient(150px circle at var(--dsa-section__spotlight--left) var(--dsa-section__spotlight--top), var(--dsa-section__spotlight--color) 0%, var(--dsa-section__spotlight--color) 80%, transparent 80%, transparent 100%);
+  background-image: radial-gradient(var(--dsa-section__spotlight--size) circle, var(--dsa-section__spotlight--color) 0%, var(--dsa-section__spotlight--color) calc(100% - var(--dsa-section__spotlight--blur)), transparent 100%, transparent 100%);
 }
 .l-section.dsa-section .l-section__content {
   --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));

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

@@ -972,23 +972,33 @@
                     "type": "string",
                     "format": "image"
                   },
-                  "ratio": {
-                    "title": "Image aspect ratio",
-                    "description": "Select an aspect ratio to use for cropping and displaying the image",
+                  "aspectRatio": {
                     "type": "string",
+                    "title": "Aspect Ratio",
+                    "description": "The aspect ratio of the image",
                     "enum": [
-                      "4:3",
-                      "3:2",
-                      "16:9",
-                      "1:1",
-                      "none"
+                      "unset",
+                      "square",
+                      "wide",
+                      "landscape"
                     ],
-                    "default": "none"
+                    "default": "unset"
                   },
                   "alt": {
                     "title": "Alt text",
                     "description": "Image description",
                     "type": "string"
+                  },
+                  "vAlign": {
+                    "title": "Image vertical alignment",
+                    "description": "Select a vertical alignment for the image",
+                    "type": "string",
+                    "enum": [
+                      "center",
+                      "top",
+                      "bottom"
+                    ],
+                    "default": "top"
                   }
                 },
                 "additionalProperties": false
@@ -1099,8 +1109,6 @@
                 "title": "Logos",
                 "description": "The logos to display",
                 "items": {
-                  "$schema": "http://json-schema.org/draft-07/schema#",
-                  "$id": "http://schema.mydesignsystem.com/logo.schema.json",
                   "title": "Logo",
                   "description": "Logo entry for Logos component",
                   "type": "object",
@@ -1126,9 +1134,6 @@
                       "examples": [
                         "Logo 1"
                       ]
-                    },
-                    "type": {
-                      "const": "logo"
                     }
                   },
                   "additionalProperties": false,
@@ -2076,8 +2081,6 @@
                           "title": "Logos",
                           "description": "The logos to display",
                           "items": {
-                            "$schema": "http://json-schema.org/draft-07/schema#",
-                            "$id": "http://schema.mydesignsystem.com/logo.schema.json",
                             "title": "Logo",
                             "description": "Logo entry for Logos component",
                             "type": "object",
@@ -2103,9 +2106,6 @@
                                 "examples": [
                                   "Logo 1"
                                 ]
-                              },
-                              "type": {
-                                "const": "logo"
                               }
                             },
                             "additionalProperties": false,