@kickstartds/ds-agency-premium 1.7.0--canary.46.1927.0 → 1.7.0--canary.43.2352.0

package/dist/components/hero/hero.css

@@ -1,60 +1,108 @@
-.l-container--visual {
+.l-container--hero {
   /* stylelint-disable-next-line property-no-unknown */
-  container-name: visual;
+  container-name: hero;
 }
 
-.dsa-hero {
+:root .dsa-hero,
+[ks-inverted=true] .dsa-hero,
+[ks-inverted=false] .dsa-hero {
   --dsa-hero--min-height: 18rem;
-  --dsa-hero--min-height_small: 13.2rem;
+  --dsa-hero--min-height_small: 12rem;
   --dsa-hero__headline--color: var(--dsa-headline--color);
   --dsa-hero__subheadline--color: var(--dsa-headline__subheadline--color);
   --dsa-hero_color-neutral__headline--color: var(--ks-text-color-default);
   --dsa-hero_color-neutral__subheadline--color: var(--ks-text-color-default);
   --dsa-hero__copy--color: var(--ks-text-color-default);
-  --dsa-hero__copy--font: var(--dsa-rich-text--font);
+  --dsa-hero__copy--font: var(--ks-font-copy-m);
   --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--background-color: var(--dsa-overlay-box_transparent--background-color);
+  --dsa-hero__textbox--backdrop-filter: var(--dsa-overlay-box_transparent--backdrop-filter);
+  --dsa-hero__textbox--box-shadow: none;
+  --dsa-hero__textbox--border-radius: var(--ks-border-radius-card);
   --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
   --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
-}
-@container visual (min-width: 640px) {
-  .dsa-hero {
-    --dsa-hero--min-height: 21rem;
-    --dsa-hero--min-height_small: 13.35rem;
+  --dsa-hero_below__textbox--padding: var(--dsa-content--vertical-spacing);
+  --dsa-hero_offset__textbox--padding: var(--dsa-content--vertical-spacing);
+  --dsa-hero__skip-button--shadow: var(--dsa-overlay-text--shadow);
+  --dsa-hero__skip-button--color: var(--dsa-overlay-text--text-color);
+  --dsa-hero__skip-button--transform_hover: translateY(10%);
+  --dsa-hero__overlay--background: radial-gradient(
+    50% 125% at 100% 0%,
+    var(--ks-color-primary-alpha-5) 0%,
+    var(--ks-color-bg-alpha-4) 100%
+  );
+  --dsa-hero_corner__overlay--background: linear-gradient(
+    40deg,
+    var(--ks-background-color-default) 15%,
+    transparent 50%
+  );
+  --dsa-hero_left__overlay--background: linear-gradient(
+    90deg,
+    var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width),
+    transparent
+  );
+  --dsa-hero_right__overlay--background: linear-gradient(
+    270deg,
+    var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width),
+    transparent
+  );
+  --dsa-hero_offset__textbox--max-width: var(--dsa-content--width_default);
+  --dsa-hero_offset__textbox--offset: -10%;
+  --dsa-hero_offset__overlay--background: linear-gradient(
+    0deg,
+    var(--ks-background-color-default) 15%,
+    transparent 50%
+  );
+  --dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
+}
+@container hero (min-width: 640px) {
+  :root .dsa-hero,
+  [ks-inverted=true] .dsa-hero,
+  [ks-inverted=false] .dsa-hero {
+    --dsa-hero--min-height: 24rem;
+    --dsa-hero--min-height_small: 14rem;
+    --dsa-hero__textbox--max-width: 50vw;
   }
 }
-@container visual (min-width: 960px) {
-  .dsa-hero {
-    --dsa-hero--min-height: 31.5rem;
-    --dsa-hero--min-height_small: 15.8rem;
+@container hero (min-width: 960px) {
+  :root .dsa-hero,
+  [ks-inverted=true] .dsa-hero,
+  [ks-inverted=false] .dsa-hero {
+    --dsa-hero--min-height: 32rem;
+    --dsa-hero--min-height_small: 16rem;
   }
 }
-@container visual (min-width: 1024px) {
-  .dsa-hero {
-    --dsa-hero--min-height: 35rem;
+@container hero (min-width: 1024px) {
+  :root .dsa-hero,
+  [ks-inverted=true] .dsa-hero,
+  [ks-inverted=false] .dsa-hero {
+    --dsa-hero--min-height: 36rem;
     --dsa-hero--min-height_small: 20rem;
+    --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
   }
 }
 
-.l-container--visual {
+.l-container--hero {
   /* stylelint-disable-next-line property-no-unknown */
-  container-name: visual;
+  container-name: hero;
 }
 
 .c-visual.dsa-hero {
   --c-visual_overlay--background-size: 100%;
+  --c-visual--min-height: var(--dsa-hero--min-height);
   --c-visual_overlay--background: transparent;
   min-height: var(--dsa-hero--min-height);
 }
 .c-visual.dsa-hero .c-visual__box {
-  --c-visual_box--background: var(--dsa-hero__textbox--background-color, var(--ks-color-bg-alpha-2));
+  --c-visual_box--background: var(
+    --dsa-hero__textbox--background-color,
+    var(--dsa-overlay-box_transparent--background-color)
+  );
   --c-visual_box--color: var(--dsa-hero__copy--color, var(--ks-text-color-default));
-  --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-surface));
+  --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-card));
   --c-visual_box--padding: var(--dsa-hero__textbox--padding, var(--ks-spacing-inset-squish-xl));
-  --c-visual_text--font: var(--dsa-hero__copy--font, var(--dsa-rich-text--font));
+  --c-visual_text--font: var(--dsa-hero__copy--font, var(--ks-font-copy-m));
 }
 .c-visual.dsa-hero--highlight-text.c-visual {
   --dsa-hero__copy--font: var(--dsa-hero_highlight-text__copy--font, var(--ks-font-copy-l));
@@ -65,25 +113,46 @@
   --dsa-hero__subheadline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
 }
 .c-visual.dsa-hero.c-visual--small {
-  min-height: var(--dsa-hero--min-height_small);
+  --dsa-hero--min-height: var(--dsa-hero--min-height_small);
 }
-@container visual (min-width: 640px) {
+@container hero (min-width: 640px) {
   .c-visual.dsa-hero {
-    --c-visual_overlay--background: radial-gradient(
-      50% 125% at 100% 0%,
-      var(--ks-color-primary-alpha-5) 0%,
-      var(--ks-color-bg-alpha-5) 100%
+    --c-visual_overlay--background: var(
+      --dsa-hero__overlay--background,
+      radial-gradient(50% 125% at 100% 0%, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-bg-alpha-4) 100%)
     );
   }
-  .c-visual.dsa-hero.dsa-hero--content-below {
+  .c-visual.dsa-hero.dsa-hero--content-corner {
     --c-visual_overlay--background: var(
-      --dsa-hero__overlay--background,
+      --dsa-hero_corner__overlay--background,
+      linear-gradient(40deg, var(--ks-background-color-default) 15%, transparent 50%)
+    );
+  }
+  .c-visual.dsa-hero.dsa-hero--content-offset {
+    --c-visual_overlay--background: var(
+      --dsa-hero--offset__overlay--background,
       linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
     );
   }
+  .c-visual.dsa-hero.dsa-hero--content-left {
+    --c-visual_overlay--background: var(
+      --dsa-hero_left__overlay--background,
+      linear-gradient(90deg, var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width), transparent)
+    );
+  }
+  .c-visual.dsa-hero.dsa-hero--content-right {
+    --c-visual_overlay--background: var(
+      --dsa-hero_right__overlay--background,
+      linear-gradient(270deg, var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width), transparent)
+    );
+  }
   .c-visual.dsa-hero .c-visual__box {
     --c-visual_box--max-width: var(--dsa-hero__textbox--max-width, var(--dsa-content--width_narrow));
   }
+  .c-visual.dsa-hero .c-visual__box:not(.c-visual__box--transparent) {
+    backdrop-filter: var(--dsa-hero__textbox--backdrop-filter, var(--dsa-overlay-box_transparent--backdrop-filter));
+    box-shadow: var(--dsa-hero__textbox--box-shadow, var(--ks-box-shadow-card));
+  }
 }
 
 .c-visual.dsa-hero .dsa-headline .dsa-headline__headline {
@@ -106,43 +175,67 @@
 .c-visual.dsa-hero .c-visual__content--indent {
   max-width: var(--dsa-content--width_wide);
 }
-@container visual (min-width: 640px) {
-  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
+.c-visual.dsa-hero .c-visual__continue-btn {
+  transform: translate(0);
+  color: var(--dsa-hero__skip-button--color, var(--dsa-overlay-text--text-color));
+  filter: drop-shadow(var(--dsa-hero__skip-button--shadow, var(--dsa-overlay-text--shadow)));
+}
+.c-visual.dsa-hero .c-visual__continue-btn:hover {
+  transform: var(--dsa-hero__skip-button--transform_hover, translateY(10%));
+}
+@container hero (min-width: 640px) {
+  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__media {
     position: relative;
   }
-  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media .c-visual__image {
-    height: var(--c-visual--min-height);
+  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media .c-visual__image, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__media .c-visual__image {
+    height: var(--dsa-hero--min-height);
   }
-  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content {
-    padding: 0 var(--dsa-content--spacing);
-    margin-top: -10%;
+  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content {
     position: relative;
   }
+  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content .c-visual__box {
+    --c-visual_box--max-width: var(--dsa-hero_below__textbox--max-width, var(--dsa-content--width_default));
+  }
+  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content {
+    padding: var(--dsa-hero_below__textbox--padding, var(--dsa-content--vertical-spacing));
+  }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
-    --c-visual_box--max-width: var(--dsa-content--width_default);
+    --c-visual_box--max-width: var(--dsa-hero_below__textbox--max-width, var(--dsa-content--width_default));
+  }
+  .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content {
+    padding: var(--dsa-hero_offset__textbox--padding, var(--dsa-content--vertical-spacing));
+    margin-top: var(--dsa-hero_offset__textbox--offset, -10%);
+  }
+  .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content .c-visual__box {
+    --c-visual_box--max-width: var(--dsa-hero_offset__textbox--max-width, var(--dsa-content--width_default));
   }
   .c-visual.dsa-hero.c-visual--no-crop {
-    --c-visual--min-height: 0;
+    --dsa-hero--min-height: 0;
   }
-  @container visual (min-width: 640px) {
-    .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
+  @container hero (min-width: 640px) {
+    .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--no-crop .c-visual__media .c-visual__image {
       height: fit-content;
     }
-    .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image img {
+    .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image img, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--no-crop .c-visual__media .c-visual__image img {
       object-fit: contain;
       height: auto;
     }
   }
-  .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full {
-    height: fit-content;
+  .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--full {
+    --dsa-hero--min-height: 0 !important;
+    height: 100vh;
   }
-  @container visual (min-width: 640px) {
-    .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image {
-      height: fit-content;
+  @container hero (min-width: 640px) {
+    .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--full .c-visual__media .c-visual__image {
+      height: 100%;
     }
-    .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image img {
+    .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image img, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--full .c-visual__media .c-visual__image img {
       object-fit: cover;
-      height: 100vh;
+      height: 100%;
     }
   }
+}
+
+.dsa-header:not(.dsa-header--floating) + .dsa-section .dsa-hero.c-visual--full {
+  height: calc(100vh - var(--dsa-header--height));
 }

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

@@ -51,6 +51,12 @@
       "default": true,
       "description": "Toggle wether you want your text to be displayed within in box"
     },
+    "invertText": {
+      "type": "boolean",
+      "title": "Invert Text",
+      "description": "Invert the text color for better contrast against the background",
+      "default": false
+    },
     "buttons": {
       "type": "array",
       "items": {
@@ -71,16 +77,22 @@
             "title": "Icon",
             "description": "Choose an icon"
           },
-          "target": {
+          "url": {
             "type": "string",
-            "title": "Target",
-            "description": "Target that should be linked, makes the button behave like a link semantically",
+            "title": "URL",
+            "description": "The URL to link to when the button is clicked",
             "format": "uri"
           }
         },
         "additionalProperties": false
       }
     },
+    "skipButton": {
+      "type": "boolean",
+      "title": "Skip Button",
+      "description": "Add a skip button to the hero module",
+      "default": false
+    },
     "overlay": {
       "title": "Grid layer",
       "description": "Enable grid layer",
@@ -156,15 +168,14 @@
       "enum": [
         "center",
         "below",
+        "offset",
         "left",
         "right",
-        "corner"
+        "corner",
+        "bottom"
       ],
       "type": "string",
-      "default": "below"
-    },
-    "type": {
-      "const": "hero"
+      "default": "left"
     }
   },
   "additionalProperties": false

package/dist/components/hero/hero.schema.json

@@ -46,6 +46,12 @@
       "default": true,
       "description": "Toggle wether you want your text to be displayed within in box"
     },
+    "invertText": {
+      "type": "boolean",
+      "title": "Invert Text",
+      "description": "Invert the text color for better contrast against the background",
+      "default": false
+    },
     "buttons": {
       "type": "array",
       "items": {
@@ -58,12 +64,18 @@
           "icon": {
             "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/icon"
           },
-          "target": {
-            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
+          "url": {
+            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/url"
           }
         }
       }
     },
+    "skipButton": {
+      "type": "boolean",
+      "title": "Skip Button",
+      "description": "Add a skip button to the hero module",
+      "default": false
+    },
     "overlay": {
       "$ref": "http://schema.kickstartds.com/content/visual.schema.json#/properties/overlay"
     },
@@ -73,9 +85,17 @@
     "textPosition": {
       "title": "Module aligment",
       "description": "Choose the alginment of the module content",
-      "enum": ["center", "below", "left", "right", "corner"],
+      "enum": [
+        "center",
+        "below",
+        "offset",
+        "left",
+        "right",
+        "corner",
+        "bottom"
+      ],
       "type": "string",
-      "default": "below"
+      "default": "left"
     }
   },
   "additionalProperties": false

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { HeroProps } from "../../HeroProps-f704d270.js";
+import { HeroProps } from "../../HeroProps-fec6b267.js";
 declare const HeroContextDefault: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const HeroContext: import("react").Context<import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Hero: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/hero/index.js

@@ -14,59 +14,71 @@ const defaults = {
     "colorNeutral": false,
     "height": "default",
     "textbox": true,
+    "invertText": false,
     "buttons": [],
+    "skipButton": false,
     "overlay": false,
     "image": {
         "indent": "none"
     },
-    "textPosition": "below"
+    "textPosition": "left"
 };
 
-const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightText, textPosition = "center", colorNeutral, image, overlay, textbox, className, buttons = [], ...rest }, ref) => {
+const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightText, textPosition = "center", colorNeutral, image, overlay, textbox, invertText = false, className, buttons = [], skipButton = false, ...rest }, ref) => {
     const ButtonGroup = useButtonGroup();
     return (jsx(ButtonContext.Provider
     // @ts-expect-error
     , { 
         // @ts-expect-error
-        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" || textPosition === "corner"
-                        ? "bottom"
-                        : "center",
-                    horizontal: textPosition === "left" || textPosition === "corner"
-                        ? "left"
-                        : textPosition === "right"
-                            ? "right"
+        value: ButtonGroup, children: jsx(Container, { name: "hero", 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`, overlay && `dsa-hero--overlay`, className), "ks-inverted": invertText ? "true" : undefined, height: height, overlay: overlay, skipButton: skipButton, box: {
+                        background: textPosition === "below"
+                            ? "transparent"
+                            : textbox === true
+                                ? "solid"
+                                : "transparent",
+                        enabled: headline ? true : false,
+                        vertical: textPosition === "below" ||
+                            textPosition === "offset" ||
+                            textPosition === "corner" ||
+                            textPosition === "bottom"
+                            ? "bottom"
                             : "center",
-                    link: {
-                        // @ts-expect-error
-                        buttons,
-                        colorNeutral,
-                        enabled: buttons.length > 0,
-                        arrangement: textPosition === "below" || textPosition === "center"
-                            ? "center"
-                            : "left",
-                    },
-                    headline: {
-                        align: textPosition === "below" || textPosition === "center"
-                            ? "center"
-                            : "left",
-                        text: headline,
-                        sub: sub,
-                        level: "h3",
-                        style: highlightText ? "h1" : undefined,
-                    },
-                    text: text,
-                }, media: {
-                    mode: "image",
-                    image: {
-                        srcMobile: image.srcMobile,
-                        srcTablet: image.srcTablet,
-                        srcDesktop: image.srcDesktop,
-                        src: image.src,
-                    },
-                } }) }) }));
+                        horizontal: textPosition === "left" || textPosition === "corner"
+                            ? "left"
+                            : textPosition === "right"
+                                ? "right"
+                                : "center",
+                        link: {
+                            // @ts-expect-error
+                            buttons,
+                            colorNeutral,
+                            enabled: buttons.length > 0,
+                            arrangement: textPosition === "below" ||
+                                textPosition === "offset" ||
+                                textPosition === "center" ||
+                                textPosition === "bottom"
+                                ? "center"
+                                : "left",
+                        },
+                        headline: {
+                            align: textPosition === "below" || textPosition === "center"
+                                ? "center"
+                                : "left",
+                            text: headline,
+                            sub: sub,
+                            level: "h3",
+                            style: highlightText ? "h1" : undefined,
+                        },
+                        text: text,
+                    }, media: {
+                        mode: "image",
+                        image: {
+                            srcMobile: image.srcMobile,
+                            srcTablet: image.srcTablet,
+                            srcDesktop: image.srcDesktop,
+                            src: image.src,
+                        },
+                    } }) }) }) }));
 });
 const HeroContext = createContext(HeroContextDefault);
 const Hero = forwardRef((props, ref) => {

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

@@ -52,9 +52,6 @@
       "title": "`ks-component` attribute",
       "description": "Optional custom component identifier",
       "type": "string"
-    },
-    "type": {
-      "const": "html"
     }
   },
   "additionalProperties": false

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

@@ -1,16 +1,23 @@
 .dsa-image-story.c-storytelling {
   --dsa-image-story--gap: var(--ks-spacing-m);
-  --dsa-image-story--horizontal-padding: var(--dsa-content--spacing);
+  --dsa-image-story--horizontal-padding: var(--dsa-content--horizontal-spacing);
   --dsa-image-story--vertical-padding: var(--ks-spacing-xl);
-  --dsa-image-story__copy--font: var(--dsa-rich-text--font);
-  --dsa-image-story__copy--color: var(--dsa-rich-text--color);
+  --dsa-image-story__copy--font: var(--ks-font-copy-m);
+  --dsa-image-story__copy--color: var(--ks-text-color-copy);
 }
 
 .c-storytelling.dsa-image-story {
   gap: var(--c-storytelling--horizontal-padding);
-  --c-storytelling--horizontal-padding: var(--dsa-image-story--horizontal-padding, var(--dsa-content--spacing));
+  --c-storytelling--horizontal-padding: var(
+    --dsa-image-story--horizontal-padding,
+    var(--dsa-content--horizontal-spacing)
+  );
   --c-storytelling--vertical-padding: var(--dsa-image-story--vertical-padding, var(--ks-spacing-xl));
 }
+.c-storytelling.dsa-image-story .c-storytelling__box.c-storytelling__box--top .c-storytelling__box__content {
+  top: var(--ks-spacing-m);
+  position: sticky;
+}
 .c-storytelling.dsa-image-story .c-storytelling__box__content {
   max-width: var(--dsa-content--width_narrow);
 }
@@ -27,8 +34,8 @@
   aspect-ratio: 1/1;
 }
 .c-storytelling.dsa-image-story .c-rich-text {
-  font: var(--dsa-image-story__copy--font, var(--dsa-rich-text--font));
-  color: var(--dsa-image-story__copy--color, var(--dsa-rich-text--color));
+  font: var(--dsa-image-story__copy--font, var(--ks-font-copy-m));
+  color: var(--dsa-image-story__copy--color, var(--ks-text-color-copy));
 }
 .c-storytelling.dsa-image-story .c-storytelling__box,
 .c-storytelling.dsa-image-story .c-storytelling__image {

package/dist/components/image-story/image-story.schema.dereffed.json

@@ -69,10 +69,10 @@
               "Book a meeting"
             ]
           },
-          "target": {
+          "url": {
             "type": "string",
-            "title": "Target",
-            "description": "Target that should be linked, makes the button behave like a link semantically",
+            "title": "URL",
+            "description": "The URL to link to when the button is clicked",
             "format": "uri"
           },
           "variant": {
@@ -110,7 +110,13 @@
             "default": false
           },
           "type": {
-            "const": "button"
+            "type": "string",
+            "title": "Button Type",
+            "enum": [
+              "button",
+              "submit",
+              "reset"
+            ]
           }
         },
         "additionalProperties": false,
@@ -170,9 +176,6 @@
       ],
       "type": "string",
       "default": "left"
-    },
-    "type": {
-      "const": "image-story"
     }
   },
   "additionalProperties": false

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

@@ -1,13 +1,13 @@
 .dsa-image-text {
-  --dsa-image-text--font: var(--dsa-rich-text--font);
-  --dsa-image-text--color: var(--dsa-rich-text--color);
+  --dsa-image-text--font: var(--ks-font-copy-m);
+  --dsa-image-text--color: var(--ks-text-color-copy);
   --dsa-image-text_highlight--font: var(--ks-font-copy-l);
   --dsa-image-text_highlight--color: var(--ks-text-color-default);
 }
 
 .dsa-image-text .c-rich-text {
-  --c-rich-text--font: var(--dsa-image-text--font, var(--dsa-rich-text--font), var(--ks-font-copy-m));
-  --c-rich-text--color: var(--dsa-image-text--color, var(--dsa-rich-text--color), var(--ks-text-color-default));
+  --c-rich-text--font: var(--dsa-image-text--font, var(--ks-font-copy-m));
+  --c-rich-text--color: var(--dsa-image-text--color, var(--ks-text-color-default));
 }
 .dsa-image-text--highlight.dsa-image-text .c-rich-text {
   --c-rich-text--font: var(--dsa-image-text_highlight--font, var(--ks-font-copy-l));

package/dist/components/image-text/image-text.schema.dereffed.json

@@ -56,9 +56,6 @@
       "examples": [
         "above"
       ]
-    },
-    "type": {
-      "const": "image-text"
     }
   },
   "required": [

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

@@ -4,8 +4,8 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { HeaderProps } from "../../HeaderProps-e22382f1.js";
-import { FooterProps } from "../../FooterProps-171a3067.js";
+import { HeaderProps } from "../../HeaderProps-72763967.js";
+import { FooterProps } from "../../FooterProps-a0a104ca.js";
 import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
 /**
  * Content of the icon sprite for this project
@@ -29,7 +29,8 @@ interface SettingsProps {
     seo: SeoProps;
     iconSprite?: IconSprite;
 }
-export * from "../../BlogPostProps-d9decb7c.js";
+export * from "../../BlogPostProps-c760fd2a.js";
 export * from "../../BlogOverviewProps-9f207f1c.js";
 export * from "../../PageProps-aa29c554.js";
 export { IconSprite, SettingsProps };
+export * from "../../EventDetailProps-42a7eebe.js";