@kickstartds/ds-agency-premium 1.6.44 → 1.6.46--canary.39.1394.0

package/dist/BlogOverviewProps-9f207f1c.d.ts

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-7a46a8ad.js";
+import { SectionProps } from "./SectionProps-1cfcf6e8.js";
 import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
 import { CtaProps } from "./CtaProps-93230a76.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";

package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-d9decb7c.d.ts}

@@ -5,7 +5,7 @@
  */
 import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
 import { BlogAsideProps } from "./BlogAsideProps-d9decb7c.js";
-import { SectionProps } from "./SectionProps-7a46a8ad.js";
+import { SectionProps } from "./SectionProps-1cfcf6e8.js";
 import { CtaProps } from "./CtaProps-93230a76.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/PageProps-aa29c554.d.ts

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-7a46a8ad.js";
+import { SectionProps } from "./SectionProps-1cfcf6e8.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render on the page

package/dist/{SectionProps-7a46a8ad.d.ts → SectionProps-1cfcf6e8.d.ts}

@@ -33,6 +33,10 @@ type Style = "stagelights" | "horizontalGradient" | "verticalGradient" | "accent
  * Color of background
  */
 type Style1 = "default" | "accent" | "bold";
+/**
+ * Background image for the whole section
+ */
+type BackgroundImage = string;
 /**
  * Show spotlight behind cursor
  */
@@ -116,6 +120,7 @@ interface SectionProps {
     width?: Width;
     style?: Style;
     backgroundColor?: Style1;
+    backgroundImage?: BackgroundImage;
     spotlight?: Spotlight;
     spaceBefore?: SpaceBefore;
     spaceAfter?: SpaceAfter;
@@ -140,4 +145,4 @@ interface SectionProps {
     components?: Content;
     buttons?: Buttons;
 }
-export { Width, Style, Style1, Spotlight, SpaceBefore, SpaceAfter, Inverted, HeaderSpacing, Headline, LargeHeadline, HeadlineWidth, HeadlineTextAlignment, HeadlineAlignment, Subheadline, SwitchHeadlineOrder, ContentWidth, ContentAlignment, Gutter, Mode, TileWidth, Content, Buttons, SectionProps };
+export { Width, Style, Style1, BackgroundImage, Spotlight, SpaceBefore, SpaceAfter, Inverted, HeaderSpacing, Headline, LargeHeadline, HeadlineWidth, HeadlineTextAlignment, HeadlineAlignment, Subheadline, SwitchHeadlineOrder, ContentWidth, ContentAlignment, Gutter, Mode, TileWidth, Content, Buttons, SectionProps };

package/dist/components/blog-overview/blog-overview.schema.dereffed.json

@@ -58,6 +58,12 @@
             ],
             "default": "default"
           },
+          "backgroundImage": {
+            "title": "Background image",
+            "description": "Background image for the whole section",
+            "type": "string",
+            "format": "image"
+          },
           "spotlight": {
             "type": "boolean",
             "title": "Spotlight",

package/dist/components/blog-post/blog-post.schema.dereffed.json

@@ -334,6 +334,12 @@
             ],
             "default": "default"
           },
+          "backgroundImage": {
+            "title": "Background image",
+            "description": "Background image for the whole section",
+            "type": "string",
+            "format": "image"
+          },
           "spotlight": {
             "type": "boolean",
             "title": "Spotlight",

package/dist/components/blog-post/index.d.ts

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
+import { BlogPostProps } from "../../BlogPostProps-d9decb7c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export type { BlogPostProps };

package/dist/components/cta/cta.css

@@ -100,7 +100,7 @@
   }
   .dsa-cta.c-storytelling .c-storytelling__box:only-child {
     width: 100%;
-    max-width: calc(var(--l-section--content-width-default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
+    max-width: calc(var(--dsa-content--width_default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
   }
   .dsa-cta.c-storytelling > .c-storytelling__image {
     padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
@@ -111,7 +111,7 @@
   }
   .dsa-cta.c-storytelling > .c-storytelling__image,
   .dsa-cta.c-storytelling > .c-storytelling__box {
-    max-width: calc(var(--l-section--content-width-wide) / 2);
+    max-width: calc(var(--dsa-content--width_wide) / 2);
   }
   .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__image,
   .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__box {

package/dist/components/footer/footer.css

@@ -1,7 +1,7 @@
 .dsa-footer {
   --dsa-footer--background-color: var(--ks-background-color-default);
   --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
-  --dsa-footer--max-width: var(--l-section--content-width-wide);
+  --dsa-footer--max-width: var(--dsa-content--width_wide);
   --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
   --dsa-footer__byline--font: var(--ks-font-copy-xs);
   --dsa-footer__byline--color: var(--ks-text-color-default);
@@ -29,7 +29,7 @@
 .dsa-footer__content {
   padding: var(--l-section--space-small) var(--dsa-content--spacing);
   border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-default));
-  max-width: var(--dsa-footer--max-width, var(--l-section--content-width-wide));
+  max-width: var(--dsa-footer--max-width, var(--dsa-content--width_wide));
   width: 100%;
   margin: auto;
   display: flex;

package/dist/components/header/header.css

@@ -14,7 +14,7 @@
 }
 
 .dsa-header {
-  --dsa-header--max-width: var(--l-section--content-width-max);
+  --dsa-header--max-width: var(--dsa-content--width_max);
   --dsa-header--background: var(--ks-background-color-default);
   --dsa-header_floating--background: linear-gradient(var(--ks-color-bg), transparent);
   --dsa-header__logo--height: var(--dsa-logo--height);

package/dist/components/headline/headline.css

@@ -113,7 +113,7 @@
 .dsa-headline .dsa-headline__subheadline {
   font: var(--subheadline--font);
   margin: 0;
-  max-width: var(--l-section--content-width-default);
+  max-width: var(--dsa-content--width_default);
   color: var(--dsa-headline__subheadline--color, var(--ks-text-color-primary));
   font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-semi-bold));
 }

package/dist/components/hero/hero.css

@@ -14,9 +14,10 @@
   --dsa-hero__copy--font: var(--dsa-rich-text--font);
   --dsa-hero_highlight-text__copy--font: var(--ks-font-copy-l);
   --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
+  --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
+  --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
   --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
 }
 @container visual (min-width: 640px) {
@@ -81,7 +82,7 @@
     );
   }
   .c-visual.dsa-hero .c-visual__box {
-    --c-visual_box--max-width: 50rem;
+    --c-visual_box--max-width: var(--dsa-hero__textbox--max-width, var(--dsa-content--width_narrow));
   }
 }
 
@@ -103,7 +104,7 @@
   padding: var(--c-visual_box--padding);
 }
 .c-visual.dsa-hero .c-visual__content--indent {
-  max-width: var(--l-section--content-width-wide);
+  max-width: var(--dsa-content--width_wide);
 }
 @container visual (min-width: 640px) {
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
@@ -118,7 +119,7 @@
     position: relative;
   }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
-    --c-visual_box--max-width: var(--l-section--content-width-default);
+    --c-visual_box--max-width: var(--dsa-content--width_default);
   }
   @container visual (min-width: 640px) {
     .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {

package/dist/components/hero/index.js

@@ -17,8 +17,10 @@ const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightT
         value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { ...rest, ref: ref, className: classnames(`dsa-hero dsa-hero--content-${textPosition}`, highlightText ? `dsa-hero--highlight-text` : "", colorNeutral ? `dsa-hero--color-neutral` : "", className), height: height, overlay: overlay, box: {
                     background: textbox === true ? "solid" : "transparent",
                     enabled: true,
-                    vertical: textPosition === "below" || "corner" ? "bottom" : "center",
-                    horizontal: textPosition === "left"
+                    vertical: textPosition === "below" || textPosition === "corner"
+                        ? "bottom"
+                        : "center",
+                    horizontal: textPosition === "left" || textPosition === "corner"
                         ? "left"
                         : textPosition === "right"
                             ? "right"

package/dist/components/image-story/image-story.css

@@ -12,7 +12,7 @@
   --c-storytelling--vertical-padding: var(--dsa-image-story--vertical-padding, var(--ks-spacing-xl));
 }
 .c-storytelling.dsa-image-story .c-storytelling__box__content {
-  max-width: var(--l-section--content-width-narrow);
+  max-width: var(--dsa-content--width_narrow);
 }
 .c-storytelling.dsa-image-story.c-storytelling--three-to-two img {
   aspect-ratio: 3/2;

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

@@ -29,7 +29,7 @@ interface SettingsProps {
     seo: SeoProps;
     iconSprite?: IconSprite;
 }
-export * from "../../BlogPostProps-6b3cff22.js";
+export * from "../../BlogPostProps-d9decb7c.js";
 export * from "../../BlogOverviewProps-9f207f1c.js";
 export * from "../../PageProps-aa29c554.js";
 export { IconSprite, SettingsProps };

package/dist/components/logos/logos.css

@@ -26,7 +26,7 @@
 .dsa-logos__tagline {
   font: var(--dsa-logos__tagline--font, var(--ks-font-display-m));
   font-weight: var(--dsa-logos__tagline--font-weight, var(--dsa-headline--font-weight));
-  max-width: var(--l-section--content-width-narrow);
+  max-width: var(--dsa-content--width_narrow);
   color: var(--dsa-logos__tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
   width: 100%;
 }
@@ -40,7 +40,7 @@
 }
 .dsa-logos__cta__text {
   color: var(--ks-text-color-default);
-  max-width: var(--l-section--content-width-narrow);
+  max-width: var(--dsa-content--width_narrow);
 }
 .dsa-logos__cta__text, .dsa-logos__cta__link {
   font: var(--ks-font-copy-m);

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

@@ -58,6 +58,12 @@
             ],
             "default": "default"
           },
+          "backgroundImage": {
+            "title": "Background image",
+            "description": "Background image for the whole section",
+            "type": "string",
+            "format": "image"
+          },
           "spotlight": {
             "type": "boolean",
             "title": "Spotlight",

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 09:43:31 GMT
+ * Generated on Thu, 19 Dec 2024 11:51:10 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -744,49 +744,49 @@
   --ks-spacing-xxs-bp-factor-tablet: 1.5006;
   --ks-spacing-xxs-bp-factor-laptop: 1.8383;
   --ks-spacing-xxs-bp-factor-desktop: 2.2519;
-  --ks-spacing-xxs-bp-factor-tv: 2.35;
+  --ks-spacing-xxs-bp-factor-tv: 2.5;
   --ks-spacing-xs: var(--ks-spacing-xs-base);
   --ks-spacing-xs-base: 0.4309rem;
   --ks-spacing-xs-bp-factor-phone: 1.225;
   --ks-spacing-xs-bp-factor-tablet: 1.5006;
   --ks-spacing-xs-bp-factor-laptop: 1.8383;
   --ks-spacing-xs-bp-factor-desktop: 2.2519;
-  --ks-spacing-xs-bp-factor-tv: 2.35;
+  --ks-spacing-xs-bp-factor-tv: 2.5;
   --ks-spacing-s: var(--ks-spacing-s-base);
   --ks-spacing-s-base: 0.614rem;
   --ks-spacing-s-bp-factor-phone: 1.225;
   --ks-spacing-s-bp-factor-tablet: 1.5006;
   --ks-spacing-s-bp-factor-laptop: 1.8383;
   --ks-spacing-s-bp-factor-desktop: 2.2519;
-  --ks-spacing-s-bp-factor-tv: 2.35;
+  --ks-spacing-s-bp-factor-tv: 2.5;
   --ks-spacing-m: var(--ks-spacing-m-base);
   --ks-spacing-m-base: 0.875rem;
   --ks-spacing-m-bp-factor-phone: 1.225;
   --ks-spacing-m-bp-factor-tablet: 1.5006;
   --ks-spacing-m-bp-factor-laptop: 1.8383;
   --ks-spacing-m-bp-factor-desktop: 2.2519;
-  --ks-spacing-m-bp-factor-tv: 2.35;
+  --ks-spacing-m-bp-factor-tv: 2.5;
   --ks-spacing-l: var(--ks-spacing-l-base);
   --ks-spacing-l-base: 1.2469rem;
   --ks-spacing-l-bp-factor-phone: 1.225;
   --ks-spacing-l-bp-factor-tablet: 1.5006;
   --ks-spacing-l-bp-factor-laptop: 1.8383;
   --ks-spacing-l-bp-factor-desktop: 2.2519;
-  --ks-spacing-l-bp-factor-tv: 2.35;
+  --ks-spacing-l-bp-factor-tv: 2.5;
   --ks-spacing-xl: var(--ks-spacing-xl-base);
   --ks-spacing-xl-base: 1.7768rem;
   --ks-spacing-xl-bp-factor-phone: 1.225;
   --ks-spacing-xl-bp-factor-tablet: 1.5006;
   --ks-spacing-xl-bp-factor-laptop: 1.8383;
   --ks-spacing-xl-bp-factor-desktop: 2.2519;
-  --ks-spacing-xl-bp-factor-tv: 2.35;
+  --ks-spacing-xl-bp-factor-tv: 2.7;
   --ks-spacing-xxl: var(--ks-spacing-xxl-base);
   --ks-spacing-xxl-base: 2.5319rem;
   --ks-spacing-xxl-bp-factor-phone: 1.225;
   --ks-spacing-xxl-bp-factor-tablet: 1.5006;
   --ks-spacing-xxl-bp-factor-laptop: 1.8383;
   --ks-spacing-xxl-bp-factor-desktop: 2.2519;
-  --ks-spacing-xxl-bp-factor-tv: 2.35;
+  --ks-spacing-xxl-bp-factor-tv: 2.5;
   --ks-spacing-stack-xs: var(--ks-spacing-xs);
   --ks-spacing-stack-s: var(--ks-spacing-s);
   --ks-spacing-stack-m: var(--ks-spacing-m);
@@ -947,7 +947,7 @@
   --ks-font-size-display-bp-factor-tablet: 1.5;
   --ks-font-size-display-bp-factor-laptop: 1.5;
   --ks-font-size-display-bp-factor-desktop: 1.75;
-  --ks-font-size-display-bp-factor-tv: 2;
+  --ks-font-size-display-bp-factor-tv: 2.25;
   --ks-font-size-display-xxs-base: 0.68rem;
   --ks-font-size-display-xs-base: 0.833rem;
   --ks-font-size-display-s-base: 1.0204rem;
@@ -956,7 +956,7 @@
   --ks-font-size-display-xl-base: 1.8758rem;
   --ks-font-size-display-xxl-base: 2.2978rem;
   --ks-font-size-copy-bp-factor-tablet: 1.125;
-  --ks-font-size-copy-bp-factor-tv: 1.25;
+  --ks-font-size-copy-bp-factor-tv: 1.35;
   --ks-font-size-copy-xxs-base: 0.612rem;
   --ks-font-size-copy-xs-base: 0.7497rem;
   --ks-font-size-copy-s-base: 0.9184rem;
@@ -965,7 +965,7 @@
   --ks-font-size-copy-xl-base: 1.6882rem;
   --ks-font-size-copy-xxl-base: 2.068rem;
   --ks-font-size-interface-bp-factor-tablet: 1.125;
-  --ks-font-size-interface-bp-factor-tv: 1.25;
+  --ks-font-size-interface-bp-factor-tv: 1.5;
   --ks-font-size-interface-xxs-base: 0.544rem;
   --ks-font-size-interface-xs-base: 0.6664rem;
   --ks-font-size-interface-s-base: 0.8163rem;
@@ -974,7 +974,7 @@
   --ks-font-size-interface-xl-base: 1.5006rem;
   --ks-font-size-interface-xxl-base: 1.8383rem;
   --ks-font-size-mono-bp-factor-tablet: 1.125;
-  --ks-font-size-mono-bp-factor-tv: 1.25;
+  --ks-font-size-mono-bp-factor-tv: 1.5;
   --ks-font-size-mono-xxs-base: 0.612rem;
   --ks-font-size-mono-xs-base: 0.7497rem;
   --ks-font-size-mono-s-base: 0.9184rem;

package/dist/components/presets.json

@@ -183,8 +183,8 @@
     "screenshot": "img/screenshots/components-button--primary-disabled-button.png"
   },
   {
-    "id": "pages-archetypes--blog-overview",
-    "group": "Pages/Archetypes",
+    "id": "page-archetypes-blog-overview--blog-overview",
+    "group": "Page Archetypes/Blog Overview",
     "name": "BlogOverview",
     "code": "<BlogOverview\n  cta={{\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Book a meeting',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: true,\n    headline: 'Get in touch',\n    highlightText: false,\n    image: {\n      padding: false,\n      src: 'img/contact-person.png'\n    },\n    order: {\n      desktopImageLast: false,\n      mobileImageLast: false\n    },\n    sub: 'Chat with us about getting your product or platform to market faster',\n    text: 'Our modular design approach allows for flexibility and scalability in your application\\'s architecture.',\n    textAlign: 'left',\n    width: 'wide'\n  }}\n  latest={{\n    alt: 'Image of a business team working',\n    author: {\n      image: 'img/people/author-alex.png',\n      name: 'John Doe',\n      title: 'CEO'\n    },\n    date: '12/30/2022',\n    headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n    image: 'img/close-up-young-business-team-working.png',\n    link: {\n      label: 'Read more',\n      text: 'Read article',\n      url: 'https://example.com/article1'\n    },\n    readingTime: '5 min read',\n    tags: [\n      {\n        entry: 'Design Systems'\n      },\n      {\n        entry: 'Headless Websites'\n      },\n      {\n        entry: 'Training'\n      }\n    ],\n    teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.'\n  }}\n  latestTitle=\"Latest Post\"\n  list={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article3'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Training'\n        }\n      ],\n      teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.'\n    }\n  ]}\n  listTitle=\"Recent Posts\"\n  more={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    }\n  ]}\n  moreTitle=\"Featured Posts\"\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": {
@@ -499,11 +499,11 @@
         "width": "wide"
       }
     },
-    "screenshot": "img/screenshots/pages-archetypes--blog-overview.png"
+    "screenshot": "img/screenshots/page-archetypes-blog-overview--blog-overview.png"
   },
   {
-    "id": "pages-archetypes--blog-post",
-    "group": "Pages/Archetypes",
+    "id": "page-archetypes-blog-post--blog-post",
+    "group": "Page Archetypes/Blog Post",
     "name": "BlogPost",
     "code": "<BlogPost\n  aside={{\n    author: {\n      byline: 'Senior Developer',\n      email: 'Jane.doe@example.com',\n      image: {\n        alt: 'Picture of Jane Smith',\n        aspectRatio: 'square',\n        fullWidth: false,\n        src: 'img/people/author-emily.png'\n      },\n      links: [\n        {\n          href: 'tel:+4922868896620',\n          icon: 'phone',\n          label: '0228 / 688 966 20',\n          newTab: false\n        },\n        {\n          href: 'mailto:mail@example.com',\n          icon: 'email',\n          label: 'mail@example.com',\n          newTab: false\n        }\n      ],\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  contact={{\n    copy: 'Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.',\n    image: {\n      alt: 'Picture of Jane Smith',\n      aspectRatio: 'vertical',\n      fullWidth: false,\n      src: 'img/people/contact-john.png'\n    },\n    links: [\n      {\n        href: 'mailto:mail@example.com',\n        icon: 'xing',\n        label: 'john.smith',\n        newTab: false\n      },\n      {\n        href: '#',\n        icon: 'twitter',\n        label: '@john_smith',\n        newTab: false\n      }\n    ],\n    subtitle: 'Sales Representative',\n    title: 'John Smith'\n  }}\n  content=\"\n## Introduction\nThe future of **Artificial 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    alt: 'Image of a business team working',\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      {\n        entry: 'Technology'\n      },\n      {\n        entry: 'AI'\n      }\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": {
@@ -747,7 +747,7 @@
         "copy": "Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences."
       }
     },
-    "screenshot": "img/screenshots/pages-archetypes--blog-post.png"
+    "screenshot": "img/screenshots/page-archetypes-blog-post--blog-post.png"
   },
   {
     "id": "components-contact--wide-image",

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-7a46a8ad.js";
+import { SectionProps } from "../../SectionProps-1cfcf6e8.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

@@ -7,7 +7,7 @@ import { SectionContextDefault as SectionContextDefault$1, SectionContext as Sec
 import { identifier } from './js/Section.client.js';
 import '@kickstartds/core/lib/component';
 
-const SectionContextDefault = 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", backgroundImage, spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
     const { large: headlineLarge = false, ...headlineRest } = {
         align: "left",
         ...headline,
@@ -30,7 +30,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
                                 ? "symmetric-glow"
                                 : style === "anchorGlow"
                                     ? "anchor-glow"
-                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, content: content, headline: {
+                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, backgroundImage: backgroundImage, content: content, headline: {
             ...headlineRest,
             spaceAfter: "large",
             // @ts-expect-error

package/dist/components/section/section.css

@@ -1,3 +1,8 @@
+.l-container--section {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: section;
+}
+
 .dsa-section {
   --dsa-section__col--min-width: var(--dsa-section_tile-width--default);
   --dsa-section__col--max-width: 1fr;
@@ -6,16 +11,16 @@
   --dsa-section--space_small: calc(var(--ks-spacing-xxl) / 2);
   --dsa-section__tile--width_smallest: 14rem;
   --dsa-section__tile--width_default: 18rem;
-  --dsa-section__tile--width_medium: var(--l-section--content-width-narrow);
-  --dsa-section__tile--width_large: var(--l-section--content-width-default);
-  --dsa-section__tile--width_largest: var(--l-section--content-width-wide);
+  --dsa-section__tile--width_medium: var(--dsa-content--width_narrow);
+  --dsa-section__tile--width_large: var(--dsa-content--width_default);
+  --dsa-section__tile--width_largest: var(--dsa-content--width_wide);
   --dsa-section--gutter_small: var(--ks-spacing-xs);
   --dsa-section--gutter_default: var(--ks-spacing-m);
   --dsa-section--gutter_large: var(--ks-spacing-xl);
   --dsa-section__buttons--space-before: var(--ks-spacing-stack-m);
-  --dsa-section__content--width_narrow: 46.5rem;
-  --dsa-section__content--width_default: 62rem;
-  --dsa-section__content--width_wide: 75rem;
+  --dsa-section__content--width_narrow: var(--dsa-content--width_narrow);
+  --dsa-section__content--width_default: var(--dsa-content--width_default);
+  --dsa-section__content--width_wide: var(--dsa-content--width_wide);
   --dsa-section__content--width_max: 100vw;
   --dsa-section__content--width_full: 100vw;
   --dsa-section__content--padding: var(--dsa-content--spacing);
@@ -23,7 +28,6 @@
   --dsa-section--background-color_accent: var(--ks-background-color-accent);
   --dsa-section--background-color_bold: var(--ks-background-color-bold);
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
-  --dsa-section__slider-arrow--background-color: transparent;
   --dsa-section__slider-arrow--size: 2rem;
   --dsa-section__slider-arrow--padding: 0.5em;
   --dsa-section__slider-arrow--opacity: 0.6;
@@ -73,26 +77,26 @@
 }
 
 .l-section.dsa-section {
-  --l-section--gutter: var(--dsa-section--gutter_default);
+  --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
+  --l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
+  --l-section--background-accent: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
+  --l-section--background-bold: var(--dsa-section--background-color_bold, var(--ks-background-color-primary));
   --l-section_col--min-width: var(--dsa-section__col--min-width, var(--l-section_tile-width--default));
-  --l-section_col--max-width: var(--dsa-section__col--min-width, 1fr);
+  --l-section_col--max-width: var(--dsa-section__col--max-width, 1fr);
   --l-section_col--repeat: var(--dsa-section__col--repeat, auto-fit);
+  --l-section--content-width-narrow: var(--dsa-section__content--width_narrow, var(--dsa-content--width_narrow));
+  --l-section--content-width-default: var(--dsa-section__content--width_default, var(--dsa-content--width_default));
+  --l-section--content-width-wide: var(--dsa-section__content--width_wide, var(--dsa-content--width_wide));
+  --l-section--content-width-max: var(--dsa-section__content--width_max, var(--dsa-content--width_max));
+  --l-section--content-width-full: var(--dsa-section__content--width_full, var(--dsa-content--width_full));
+  --l-section--content-padding: var(--dsa-section__content--padding, var(--ks-spacing-m));
   --l-section_tile-width--smallest: var(--dsa-section__tile--width_smallest, 14rem);
   --l-section_tile-width--default: var(--dsa-section__tile--width_default, 18rem);
-  --l-section_tile-width--medium: var(--dsa-section__tile--width_medium, var(--l-section--content-width-narrow));
-  --l-section_tile-width--large: var(--dsa-section__tile--width_large, var(--l-section--content-width-default));
-  --l-section_tile-width--largest: var(--dsa-section__tile--width_largest, var(--l-section--content-width-wide));
-  --l-section--content-width-narrow: var(--dsa-section__content--width_narrow, 46.5rem);
-  --l-section--content-width-default: var(--dsa-section__content--width_default, 62rem);
-  --l-section--content-width-wide: var(--dsa-section__content--width_wide, 75rem);
-  --l-section--content-width-max: var(--dsa-section__content--width_max, 120rem);
-  --l-section--content-width-full: var(--dsa-section__content--width_full, 120rem);
-  --l-section--content-padding: var(--dsa-section__content--padding, var(--ks-spacing-m));
-  --l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
-  --l-section--background-accent: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
-  --l-section--background-bold: var(--dsa-section--background-color_bold, var(--ks-background-color-primary));
-  --l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
-  --l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
+  --l-section_tile-width--medium: var(--dsa-section__tile--width_medium, var(--dsa-content--width_narrow));
+  --l-section_tile-width--large: var(--dsa-section__tile--width_large, var(--dsa-content--width_default));
+  --l-section_tile-width--largest: var(--dsa-section__tile--width_largest, var(--dsa-content--width_wide));
+  --l-section--gutter: var(--dsa-section--gutter_default);
+  --dsa-section--gutter_none: 0;
   --l-section--gutter-small: var(--dsa-section--gutter_small, var(--ks-spacing-xs));
   --l-section--gutter-default: var(--dsa-section--gutter_default, var(--ks-spacing-m));
   --l-section--gutter-large: var(--dsa-section--gutter_large, var(--ks-spacing-xl));
@@ -100,12 +104,17 @@
   --l-section_slider-arrow--padding: var(--dsa-section__slider-arrow--padding, var(--ks-spacing-xs));
   --l-section_slider-arrow--color: var(--dsa-section__slider-arrow--color, var(--ks-text-color-interface-interactive));
   --l-section_slider-arrow--opacity: var(--dsa-section__slider-arrow--opacity, 0.6);
-  --l-section_slider-arrow--opacity_hover: var(--dsa-section__slider-arrow--opcaity_hover, 0.9);
+  --l-section_slider-arrow--opacity_hover: var(--dsa-section__slider-arrow--opacity_hover, 0.9);
   --l-section_slider-arrow--opacity_disabled: var(--dsa-section__slider-arrow--opacity_disabled, 0.3);
   --l-section_slider-arrow--background: var(--dsa-section__slider-arrow--background, transparent);
+  --l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
+  --l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
+}
+
+.l-section.dsa-section {
   background-image: var(--dsa-section--background-image);
-  position: relative;
   background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
+  position: relative;
 }
 .l-section.dsa-section.l-section--gutter-large {
   --l-section--gutter: var(--dsa-section--gutter_large);

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

@@ -44,6 +44,12 @@
       ],
       "default": "default"
     },
+    "backgroundImage": {
+      "title": "Background image",
+      "description": "Background image for the whole section",
+      "type": "string",
+      "format": "image"
+    },
     "spotlight": {
       "type": "boolean",
       "title": "Spotlight",

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

@@ -34,6 +34,12 @@
       "enum": ["default", "accent", "bold"],
       "default": "default"
     },
+    "backgroundImage": {
+      "title": "Background image",
+      "description": "Background image for the whole section",
+      "type": "string",
+      "format": "image"
+    },
     "spotlight": {
       "type": "boolean",
       "title": "Spotlight",

package/dist/components/split/split.css

@@ -12,13 +12,13 @@
   gap: var(--dsa-split--gap-horizontal) var(--dsa-split--gap-horizontal);
 }
 .l-split--narrow {
-  --split__main--flex-basis: var(--l-section--content-width-narrow);
+  --split__main--flex-basis: var(--dsa-content--width_narrow);
 }
 .l-split--medium {
-  --split__main--flex-basis: var(--l-section--content-width-default);
+  --split__main--flex-basis: var(--dsa-content--width_default);
 }
 .l-split--wide {
-  --split__main--flex-basis: var(--l-section--content-width-wide);
+  --split__main--flex-basis: var(--dsa-content--width_wide);
 }
 @media (min-width: 48em) {
   .l-split {

package/dist/components/video-curtain/video-curtain.css

@@ -7,9 +7,10 @@
   --dsa-video-curtain__copy--font: var(--dsa-rich-text--font);
   --dsa-video-curtain_highlight-text__copy--font: var(--ks-font-copy-l);
   --dsa-video-curtain_color-neutral__copy--color: var(--ks-text-color-default);
+  --dsa-video-curtain__textbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-video-curtain__textbox--border-radius: var(--ks-border-radius-surface);
+  --dsa-video-curtain__textbox--max-width: var(--dsa-section__content--width_narrow);
   --dsa-video-curtain__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-video-curtain__textbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-video-curtain__overlay--background: linear-gradient(
     0deg,
     var(--ks-background-color-default) 15%,
@@ -40,7 +41,7 @@
 }
 @container visual (min-width: 640px) {
   .c-visual.dsa-video-curtain .c-visual__box {
-    --c-visual_box--max-width: 50rem;
+    --c-visual_box--max-width: var(--dsa-video-curtain__textbox--max-width, 50rem);
   }
 }
 

package/dist/global.css

@@ -303,17 +303,28 @@ h3 {
   --dsa-link--color_hover: var(--ks-text-color-default-interactive-hover);
   --dsa-link--text-decoration: underline;
   --dsa-link--text-decoration_hover: underline;
-  --dsa-header--height: calc(var(--dsa-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m));
-  --dsa-gradient--higlight: linear-gradient(135deg, var(--ks-color-primary) 0%, var(--ks-color-secondary) 100%);
+  --dsa-gradient--highlight: linear-gradient(135deg, var(--ks-color-primary) 0%, var(--ks-color-secondary) 100%);
   --dsa-content--spacing: var(--ks-spacing-inset-l);
-  --dsa-section__content_wide--width: 1440px;
+  --dsa-content--width_narrow: 46.5rem;
+  --dsa-content--width_default: 62rem;
+  --dsa-content--width_wide: 75rem;
+  --dsa-content--width_max: 100vw;
+  --dsa-content--width_full: 100vw;
   --dsa-logo--height: 2.25rem;
+  --dsa-header--height: calc(var(--dsa-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m));
 }
 @media (min-width: 48em) {
   :root, [ks-inverted], [ks-theme] {
     --dsa-content--spacing: var(--ks-spacing-inset-xl);
   }
 }
+@media (min-width: 122em) {
+  :root, [ks-inverted], [ks-theme] {
+    --dsa-content--width_narrow: 55.8rem;
+    --dsa-content--width_default: 74.4rem;
+    --dsa-content--width_wide: 90rem;
+  }
+}
 @media (min-width: 48em) {
   :root, [ks-inverted], [ks-theme] {
     --dsa-logo--height: 2.5rem;
@@ -712,16 +723,6 @@ hr.c-divider {
   --g-link--color-hover: var(--dsa-link--color_hover, var(--ks-text-color-default-interactive-hover));
   --g-link--background: var(--dsa-link--background, transparent);
   --g-link--border-radius: var(--dsa-link--border-radius, 0);
-  --l-section_col--min-width: var(--dsa-section__col--min-width, var(--l-section_tile-width--default));
-  --l-section_col--max-width: var(--dsa-section__col--max-width, 1fr);
-  --l-section_col--repeat: var(--dsa-section__col--repeat, auto-fit);
-  --l-section_tile-width--smallest: var(--dsa-section__tile-width--smallest, 14rem);
-  --l-section_tile-width--default: var(--dsa-section__tile-width--default, 18rem);
-  --l-section_tile-width--medium: var(--dsa-section__tile-width--medium, var(--l-section--content-width-narrow));
-  --l-section_tile-width--large: var(--dsa-section__tile-width--large, var(--l-section--content-width-default));
-  --l-section_tile-width--largest: var(--dsa-section__tile-width--largest, var(--l-section--content-width-wide));
-  --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
-  --l-section--content-width: var(--dsa-section__content--width, var(--l-section--container-width));
   --g-topic--color: var(--dsa-topic--color, var(--ks-text-color-default));
   --g-topic--font: var(--dsa-topic--font, var(--ks-font-display-l));
   --g-topic--font-weight: var(--dsa-topic--font-weight, var(--ks-font-weight-bold));

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 09:43:34 GMT
+ * Generated on Thu, 19 Dec 2024 11:51:12 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 09:43:39 GMT
+ * Generated on Thu, 19 Dec 2024 11:51:16 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 09:43:37 GMT
+ * Generated on Thu, 19 Dec 2024 11:51:14 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 09:43:42 GMT
+ * Generated on Thu, 19 Dec 2024 11:51:18 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 09:43:31 GMT
+ * Generated on Thu, 19 Dec 2024 11:51:10 GMT
  */
 
 :root, [ks-theme] {
@@ -745,49 +745,49 @@
   --ks-spacing-xxs-bp-factor-tablet: 1.5006;
   --ks-spacing-xxs-bp-factor-laptop: 1.8383;
   --ks-spacing-xxs-bp-factor-desktop: 2.2519;
-  --ks-spacing-xxs-bp-factor-tv: 2.35;
+  --ks-spacing-xxs-bp-factor-tv: 2.5;
   --ks-spacing-xs: var(--ks-spacing-xs-base);
   --ks-spacing-xs-base: 0.4309rem;
   --ks-spacing-xs-bp-factor-phone: 1.225;
   --ks-spacing-xs-bp-factor-tablet: 1.5006;
   --ks-spacing-xs-bp-factor-laptop: 1.8383;
   --ks-spacing-xs-bp-factor-desktop: 2.2519;
-  --ks-spacing-xs-bp-factor-tv: 2.35;
+  --ks-spacing-xs-bp-factor-tv: 2.5;
   --ks-spacing-s: var(--ks-spacing-s-base);
   --ks-spacing-s-base: 0.614rem;
   --ks-spacing-s-bp-factor-phone: 1.225;
   --ks-spacing-s-bp-factor-tablet: 1.5006;
   --ks-spacing-s-bp-factor-laptop: 1.8383;
   --ks-spacing-s-bp-factor-desktop: 2.2519;
-  --ks-spacing-s-bp-factor-tv: 2.35;
+  --ks-spacing-s-bp-factor-tv: 2.5;
   --ks-spacing-m: var(--ks-spacing-m-base);
   --ks-spacing-m-base: 0.875rem;
   --ks-spacing-m-bp-factor-phone: 1.225;
   --ks-spacing-m-bp-factor-tablet: 1.5006;
   --ks-spacing-m-bp-factor-laptop: 1.8383;
   --ks-spacing-m-bp-factor-desktop: 2.2519;
-  --ks-spacing-m-bp-factor-tv: 2.35;
+  --ks-spacing-m-bp-factor-tv: 2.5;
   --ks-spacing-l: var(--ks-spacing-l-base);
   --ks-spacing-l-base: 1.2469rem;
   --ks-spacing-l-bp-factor-phone: 1.225;
   --ks-spacing-l-bp-factor-tablet: 1.5006;
   --ks-spacing-l-bp-factor-laptop: 1.8383;
   --ks-spacing-l-bp-factor-desktop: 2.2519;
-  --ks-spacing-l-bp-factor-tv: 2.35;
+  --ks-spacing-l-bp-factor-tv: 2.5;
   --ks-spacing-xl: var(--ks-spacing-xl-base);
   --ks-spacing-xl-base: 1.7768rem;
   --ks-spacing-xl-bp-factor-phone: 1.225;
   --ks-spacing-xl-bp-factor-tablet: 1.5006;
   --ks-spacing-xl-bp-factor-laptop: 1.8383;
   --ks-spacing-xl-bp-factor-desktop: 2.2519;
-  --ks-spacing-xl-bp-factor-tv: 2.35;
+  --ks-spacing-xl-bp-factor-tv: 2.7;
   --ks-spacing-xxl: var(--ks-spacing-xxl-base);
   --ks-spacing-xxl-base: 2.5319rem;
   --ks-spacing-xxl-bp-factor-phone: 1.225;
   --ks-spacing-xxl-bp-factor-tablet: 1.5006;
   --ks-spacing-xxl-bp-factor-laptop: 1.8383;
   --ks-spacing-xxl-bp-factor-desktop: 2.2519;
-  --ks-spacing-xxl-bp-factor-tv: 2.35;
+  --ks-spacing-xxl-bp-factor-tv: 2.5;
   --ks-spacing-stack-xs: var(--ks-spacing-xs);
   --ks-spacing-stack-s: var(--ks-spacing-s);
   --ks-spacing-stack-m: var(--ks-spacing-m);
@@ -948,7 +948,7 @@
   --ks-font-size-display-bp-factor-tablet: 1.5;
   --ks-font-size-display-bp-factor-laptop: 1.5;
   --ks-font-size-display-bp-factor-desktop: 1.75;
-  --ks-font-size-display-bp-factor-tv: 2;
+  --ks-font-size-display-bp-factor-tv: 2.25;
   --ks-font-size-display-xxs-base: 0.68rem;
   --ks-font-size-display-xs-base: 0.833rem;
   --ks-font-size-display-s-base: 1.0204rem;
@@ -957,7 +957,7 @@
   --ks-font-size-display-xl-base: 1.8758rem;
   --ks-font-size-display-xxl-base: 2.2978rem;
   --ks-font-size-copy-bp-factor-tablet: 1.125;
-  --ks-font-size-copy-bp-factor-tv: 1.25;
+  --ks-font-size-copy-bp-factor-tv: 1.35;
   --ks-font-size-copy-xxs-base: 0.612rem;
   --ks-font-size-copy-xs-base: 0.7497rem;
   --ks-font-size-copy-s-base: 0.9184rem;
@@ -966,7 +966,7 @@
   --ks-font-size-copy-xl-base: 1.6882rem;
   --ks-font-size-copy-xxl-base: 2.068rem;
   --ks-font-size-interface-bp-factor-tablet: 1.125;
-  --ks-font-size-interface-bp-factor-tv: 1.25;
+  --ks-font-size-interface-bp-factor-tv: 1.5;
   --ks-font-size-interface-xxs-base: 0.544rem;
   --ks-font-size-interface-xs-base: 0.6664rem;
   --ks-font-size-interface-s-base: 0.8163rem;
@@ -975,7 +975,7 @@
   --ks-font-size-interface-xl-base: 1.5006rem;
   --ks-font-size-interface-xxl-base: 1.8383rem;
   --ks-font-size-mono-bp-factor-tablet: 1.125;
-  --ks-font-size-mono-bp-factor-tv: 1.25;
+  --ks-font-size-mono-bp-factor-tv: 1.5;
   --ks-font-size-mono-xxs-base: 0.612rem;
   --ks-font-size-mono-xs-base: 0.7497rem;
   --ks-font-size-mono-s-base: 0.9184rem;

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 09:43:32 GMT
+ * Generated on Thu, 19 Dec 2024 11:51:10 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";
@@ -749,49 +749,49 @@ export const KsSpacingXxsBpFactorPhone = "1.225";
 export const KsSpacingXxsBpFactorTablet = "1.5006";
 export const KsSpacingXxsBpFactorLaptop = "1.8383";
 export const KsSpacingXxsBpFactorDesktop = "2.2519";
-export const KsSpacingXxsBpFactorTv = "2.35";
+export const KsSpacingXxsBpFactorTv = "2.5";
 export const KsSpacingXs = "0.4309rem";
 export const KsSpacingXsBase = "0.4309rem";
 export const KsSpacingXsBpFactorPhone = "1.225";
 export const KsSpacingXsBpFactorTablet = "1.5006";
 export const KsSpacingXsBpFactorLaptop = "1.8383";
 export const KsSpacingXsBpFactorDesktop = "2.2519";
-export const KsSpacingXsBpFactorTv = "2.35";
+export const KsSpacingXsBpFactorTv = "2.5";
 export const KsSpacingS = "0.614rem";
 export const KsSpacingSBase = "0.614rem";
 export const KsSpacingSBpFactorPhone = "1.225";
 export const KsSpacingSBpFactorTablet = "1.5006";
 export const KsSpacingSBpFactorLaptop = "1.8383";
 export const KsSpacingSBpFactorDesktop = "2.2519";
-export const KsSpacingSBpFactorTv = "2.35";
+export const KsSpacingSBpFactorTv = "2.5";
 export const KsSpacingM = "0.875rem";
 export const KsSpacingMBase = "0.875rem";
 export const KsSpacingMBpFactorPhone = "1.225";
 export const KsSpacingMBpFactorTablet = "1.5006";
 export const KsSpacingMBpFactorLaptop = "1.8383";
 export const KsSpacingMBpFactorDesktop = "2.2519";
-export const KsSpacingMBpFactorTv = "2.35";
+export const KsSpacingMBpFactorTv = "2.5";
 export const KsSpacingL = "1.2469rem";
 export const KsSpacingLBase = "1.2469rem";
 export const KsSpacingLBpFactorPhone = "1.225";
 export const KsSpacingLBpFactorTablet = "1.5006";
 export const KsSpacingLBpFactorLaptop = "1.8383";
 export const KsSpacingLBpFactorDesktop = "2.2519";
-export const KsSpacingLBpFactorTv = "2.35";
+export const KsSpacingLBpFactorTv = "2.5";
 export const KsSpacingXl = "1.7768rem";
 export const KsSpacingXlBase = "1.7768rem";
 export const KsSpacingXlBpFactorPhone = "1.225";
 export const KsSpacingXlBpFactorTablet = "1.5006";
 export const KsSpacingXlBpFactorLaptop = "1.8383";
 export const KsSpacingXlBpFactorDesktop = "2.2519";
-export const KsSpacingXlBpFactorTv = "2.35";
+export const KsSpacingXlBpFactorTv = "2.7";
 export const KsSpacingXxl = "2.5319rem";
 export const KsSpacingXxlBase = "2.5319rem";
 export const KsSpacingXxlBpFactorPhone = "1.225";
 export const KsSpacingXxlBpFactorTablet = "1.5006";
 export const KsSpacingXxlBpFactorLaptop = "1.8383";
 export const KsSpacingXxlBpFactorDesktop = "2.2519";
-export const KsSpacingXxlBpFactorTv = "2.35";
+export const KsSpacingXxlBpFactorTv = "2.5";
 export const KsSpacingStackXs = "0.4309rem";
 export const KsSpacingStackS = "0.614rem";
 export const KsSpacingStackM = "0.875rem";
@@ -952,7 +952,7 @@ export const KsFontSizeDisplayBpFactorPhone = 1.125;
 export const KsFontSizeDisplayBpFactorTablet = 1.5;
 export const KsFontSizeDisplayBpFactorLaptop = 1.5;
 export const KsFontSizeDisplayBpFactorDesktop = 1.75;
-export const KsFontSizeDisplayBpFactorTv = 2;
+export const KsFontSizeDisplayBpFactorTv = 2.25;
 export const KsFontSizeDisplayXxsBase = "0.68rem";
 export const KsFontSizeDisplayXsBase = "0.833rem";
 export const KsFontSizeDisplaySBase = "1.0204rem";
@@ -961,7 +961,7 @@ export const KsFontSizeDisplayLBase = "1.5313rem";
 export const KsFontSizeDisplayXlBase = "1.8758rem";
 export const KsFontSizeDisplayXxlBase = "2.2978rem";
 export const KsFontSizeCopyBpFactorTablet = 1.125;
-export const KsFontSizeCopyBpFactorTv = 1.25;
+export const KsFontSizeCopyBpFactorTv = 1.35;
 export const KsFontSizeCopyXxsBase = "0.612rem";
 export const KsFontSizeCopyXsBase = "0.7497rem";
 export const KsFontSizeCopySBase = "0.9184rem";
@@ -970,7 +970,7 @@ export const KsFontSizeCopyLBase = "1.3781rem";
 export const KsFontSizeCopyXlBase = "1.6882rem";
 export const KsFontSizeCopyXxlBase = "2.068rem";
 export const KsFontSizeInterfaceBpFactorTablet = 1.125;
-export const KsFontSizeInterfaceBpFactorTv = 1.25;
+export const KsFontSizeInterfaceBpFactorTv = 1.5;
 export const KsFontSizeInterfaceXxsBase = "0.544rem";
 export const KsFontSizeInterfaceXsBase = "0.6664rem";
 export const KsFontSizeInterfaceSBase = "0.8163rem";
@@ -979,7 +979,7 @@ export const KsFontSizeInterfaceLBase = "1.225rem";
 export const KsFontSizeInterfaceXlBase = "1.5006rem";
 export const KsFontSizeInterfaceXxlBase = "1.8383rem";
 export const KsFontSizeMonoBpFactorTablet = 1.125;
-export const KsFontSizeMonoBpFactorTv = 1.25;
+export const KsFontSizeMonoBpFactorTv = 1.5;
 export const KsFontSizeMonoXxsBase = "0.612rem";
 export const KsFontSizeMonoXsBase = "0.7497rem";
 export const KsFontSizeMonoSBase = "0.9184rem";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.6.44",
+  "version": "1.6.46--canary.39.1394.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {
@@ -79,11 +79,11 @@
   "devDependencies": {
     "@auto-it/npm": "^11.0.1",
     "@auto-it/released": "^11.0.1",
-    "@kickstartds/base": "^4.1.0",
-    "@kickstartds/blog": "^4.1.0",
+    "@kickstartds/base": "4.2.0-canary.1708.7098.0",
+    "@kickstartds/blog": "4.2.0-canary.1708.7098.0",
     "@kickstartds/content": "^4.0.0",
-    "@kickstartds/core": "^4.1.0",
-    "@kickstartds/form": "^4.1.0",
+    "@kickstartds/core": "^4.0.2",
+    "@kickstartds/form": "4.2.0-canary.1708.7098.0",
     "@kickstartds/jsonschema-utils": "^3.4.2",
     "@kickstartds/jsonschema2types": "^1.1.51",
     "@kickstartds/storybook-addon-component-tokens": "^3.0.0",