@kickstartds/ds-agency-premium 1.6.46 → 1.6.47

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

@@ -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/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/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/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, 19 Dec 2024 11:58:19 GMT
+ * Generated on Thu, 19 Dec 2024 12:22:26 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/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: 35vw;
+    --dsa-content--width_default: 45vw;
+    --dsa-content--width_wide: 55vw;
+  }
+}
 @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, 19 Dec 2024 11:58:21 GMT
+ * Generated on Thu, 19 Dec 2024 12:22:29 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, 19 Dec 2024 11:58:25 GMT
+ * Generated on Thu, 19 Dec 2024 12:22:33 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, 19 Dec 2024 11:58:23 GMT
+ * Generated on Thu, 19 Dec 2024 12:22:31 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, 19 Dec 2024 11:58:27 GMT
+ * Generated on Thu, 19 Dec 2024 12:22:35 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, 19 Dec 2024 11:58:19 GMT
+ * Generated on Thu, 19 Dec 2024 12:22:26 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, 19 Dec 2024 11:58:20 GMT
+ * Generated on Thu, 19 Dec 2024 12:22:27 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.46",
+  "version": "1.6.47",
   "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",