@kickstartds/ds-agency-premium 1.6.57--canary.1461.46964a6.0 → 1.6.58--canary.1470.8ef3793.0

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

@@ -5,7 +5,7 @@
  */
 import { SectionProps } from "./SectionProps-1cfcf6e8.js";
 import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
-import { CtaProps } from "./CtaProps-0931e9c1.js";
+import { CtaProps } from "./CtaProps-02e33bf1.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render as the blog overview intro

package/dist/BlogPostProps-6b3cff22.d.ts

@@ -6,7 +6,7 @@
 import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
 import { BlogAsideProps } from "./BlogAsideProps-d9decb7c.js";
 import { SectionProps } from "./SectionProps-1cfcf6e8.js";
-import { CtaProps } from "./CtaProps-0931e9c1.js";
+import { CtaProps } from "./CtaProps-02e33bf1.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Body text for the blog post, overwrites sections if present

package/dist/{CtaProps-0931e9c1.d.ts → CtaProps-02e33bf1.d.ts}

@@ -55,6 +55,10 @@ type Padding = boolean;
  * Image description
  */
 type AltText = string;
+/**
+ * Select a vertical alignment for the image
+ */
+type VerticalAlignmentOfTheImage = "center" | "top" | "bottom";
 /**
  * Switch to displaying the image after the text on mobile
  */
@@ -68,7 +72,7 @@ type DesktopImageAfterText = boolean;
  */
 type TextAlignment = "left" | "center";
 /**
- * Select a vertical alignment for the image
+ * Select a vertical alignment for the content
  */
 type VerticalAlignmentOfTheContent = "center" | "top" | "bottom";
 interface CtaProps {
@@ -83,7 +87,7 @@ interface CtaProps {
     image?: Image;
     order?: Order;
     textAlign?: TextAlignment;
-    contentAlign?: VerticalAlignmentOfTheContent;
+    align?: VerticalAlignmentOfTheContent;
 }
 interface Button {
     label?: Label;
@@ -97,6 +101,7 @@ interface Image {
     src?: ImageSource;
     padding?: Padding;
     alt?: AltText;
+    align?: VerticalAlignmentOfTheImage;
 }
 /**
  * Choose what comes first on mobile and desktop: image or text
@@ -105,4 +110,4 @@ interface Order {
     mobileImageLast?: MobileImageAfterText;
     desktopImageLast?: DesktopImageAfterText;
 }
-export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, CtaProps, Button, Image, Order };
+export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, VerticalAlignmentOfTheImage, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, CtaProps, Button, Image, Order };

package/dist/SectionProps-1cfcf6e8.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 { CtaProps } from "./CtaProps-0931e9c1.js";
+import { CtaProps } from "./CtaProps-02e33bf1.js";
 import { DividerProps } from "./DividerProps-2ef31901.js";
 import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
@@ -14,7 +14,7 @@ import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";
-import { SliderProps } from "./SliderProps-0931e9c1.js";
+import { SliderProps } from "./SliderProps-02e33bf1.js";
 import { StatsProps } from "./StatsProps-bf5ef578.js";
 import { TeaserCardProps } from "./TeaserCardProps-b9c28e78.js";
 import { TestimonialsProps } from "./TestimonialsProps-f7211553.js";

package/dist/{SliderProps-0931e9c1.d.ts → SliderProps-02e33bf1.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 { CtaProps } from "./CtaProps-0931e9c1.js";
+import { CtaProps } from "./CtaProps-02e33bf1.js";
 import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-f704d270.js";

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

@@ -345,6 +345,17 @@
                           "title": "Alt text",
                           "description": "Image description",
                           "type": "string"
+                        },
+                        "align": {
+                          "title": "Vertical alignment of the image",
+                          "description": "Select a vertical alignment for the image",
+                          "type": "string",
+                          "enum": [
+                            "center",
+                            "top",
+                            "bottom"
+                          ],
+                          "default": "center"
                         }
                       },
                       "additionalProperties": false
@@ -379,9 +390,9 @@
                       "type": "string",
                       "default": "left"
                     },
-                    "contentAlign": {
+                    "align": {
                       "title": "Vertical alignment of the content",
-                      "description": "Select a vertical alignment for the image",
+                      "description": "Select a vertical alignment for the content",
                       "type": "string",
                       "enum": [
                         "center",
@@ -1595,6 +1606,17 @@
                                     "title": "Alt text",
                                     "description": "Image description",
                                     "type": "string"
+                                  },
+                                  "align": {
+                                    "title": "Vertical alignment of the image",
+                                    "description": "Select a vertical alignment for the image",
+                                    "type": "string",
+                                    "enum": [
+                                      "center",
+                                      "top",
+                                      "bottom"
+                                    ],
+                                    "default": "center"
                                   }
                                 },
                                 "additionalProperties": false
@@ -1629,9 +1651,9 @@
                                 "type": "string",
                                 "default": "left"
                               },
-                              "contentAlign": {
+                              "align": {
                                 "title": "Vertical alignment of the content",
-                                "description": "Select a vertical alignment for the image",
+                                "description": "Select a vertical alignment for the content",
                                 "type": "string",
                                 "enum": [
                                   "center",
@@ -3744,6 +3766,17 @@
               "title": "Alt text",
               "description": "Image description",
               "type": "string"
+            },
+            "align": {
+              "title": "Vertical alignment of the image",
+              "description": "Select a vertical alignment for the image",
+              "type": "string",
+              "enum": [
+                "center",
+                "top",
+                "bottom"
+              ],
+              "default": "center"
             }
           },
           "additionalProperties": false
@@ -3778,9 +3811,9 @@
           "type": "string",
           "default": "left"
         },
-        "contentAlign": {
+        "align": {
           "title": "Vertical alignment of the content",
-          "description": "Select a vertical alignment for the image",
+          "description": "Select a vertical alignment for the content",
           "type": "string",
           "enum": [
             "center",

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

@@ -621,6 +621,17 @@
                           "title": "Alt text",
                           "description": "Image description",
                           "type": "string"
+                        },
+                        "align": {
+                          "title": "Vertical alignment of the image",
+                          "description": "Select a vertical alignment for the image",
+                          "type": "string",
+                          "enum": [
+                            "center",
+                            "top",
+                            "bottom"
+                          ],
+                          "default": "center"
                         }
                       },
                       "additionalProperties": false
@@ -655,9 +666,9 @@
                       "type": "string",
                       "default": "left"
                     },
-                    "contentAlign": {
+                    "align": {
                       "title": "Vertical alignment of the content",
-                      "description": "Select a vertical alignment for the image",
+                      "description": "Select a vertical alignment for the content",
                       "type": "string",
                       "enum": [
                         "center",
@@ -1871,6 +1882,17 @@
                                     "title": "Alt text",
                                     "description": "Image description",
                                     "type": "string"
+                                  },
+                                  "align": {
+                                    "title": "Vertical alignment of the image",
+                                    "description": "Select a vertical alignment for the image",
+                                    "type": "string",
+                                    "enum": [
+                                      "center",
+                                      "top",
+                                      "bottom"
+                                    ],
+                                    "default": "center"
                                   }
                                 },
                                 "additionalProperties": false
@@ -1905,9 +1927,9 @@
                                 "type": "string",
                                 "default": "left"
                               },
-                              "contentAlign": {
+                              "align": {
                                 "title": "Vertical alignment of the content",
-                                "description": "Select a vertical alignment for the image",
+                                "description": "Select a vertical alignment for the content",
                                 "type": "string",
                                 "enum": [
                                   "center",
@@ -3503,6 +3525,17 @@
               "title": "Alt text",
               "description": "Image description",
               "type": "string"
+            },
+            "align": {
+              "title": "Vertical alignment of the image",
+              "description": "Select a vertical alignment for the image",
+              "type": "string",
+              "enum": [
+                "center",
+                "top",
+                "bottom"
+              ],
+              "default": "center"
             }
           },
           "additionalProperties": false
@@ -3537,9 +3570,9 @@
           "type": "string",
           "default": "left"
         },
-        "contentAlign": {
+        "align": {
           "title": "Vertical alignment of the content",
-          "description": "Select a vertical alignment for the image",
+          "description": "Select a vertical alignment for the content",
           "type": "string",
           "enum": [
             "center",

package/dist/components/cta/cta.css

@@ -1,12 +1,15 @@
 .dsa-cta {
-  --dsa-cta--vertical-padding: var(--l-section--space-default);
-  --dsa-cta--horizontal-padding: var(--dsa-content--spacing);
+  --dsa-cta--gap: var(--ks-spacing-stack-m) var(--ks-spacing-inline-m);
+  --dsa-cta__content--vertical-padding: var(--l-section--space-default);
+  --dsa-cta__content--horizontal-padding: var(--dsa-content--horizontal-spacing);
+  --dsa-cta__content--max-width: var(--dsa-content--width_narrow);
   --dsa-cta__copy--font: var(--dsa-rich-text--font);
   --dsa-cta__copy--color: var(--ks-text-color-default);
   --dsa-cta__headline--color: var(--dsa-headline--color);
   --dsa-cta__headline--font: var(--dsa-headline_h2--font);
   --dsa-cta__subheadline--color: var(--dsa-headline__subheadline--color);
   --dsa-cta__subheadline--font: var(--dsa-headline_h2__subheadline--font);
+  --dsa-cta__image--padding: var(--ks-spacing-inset-m);
   --dsa-cta_color-neutral__headline--color: var(--ks-text-color-default);
   --dsa-cta_color-neutral__subheadline--color: var(--ks-text-color-default);
   --dsa-cta_color-neutral__copy--color: var(--ks-text-color-default);
@@ -16,11 +19,11 @@
 }
 
 .dsa-cta.c-storytelling {
-  --c-storytelling--padding-ratio: 2;
-  --c-storytelling--horizontal-padding: var(--dsa-content--spacing);
+  --c-storytelling--horizontal-padding: var(--dsa-cta__content--horizontal-padding);
+  --c-storytelling--vertical-padding: var(--dsa-cta__content--vertical-padding);
   justify-content: center;
   align-items: stretch;
-  padding: 0;
+  gap: var(--dsa-cta--gap, var(--ks-spacing-inline-m));
 }
 .dsa-cta.c-storytelling.dsa-cta--color-neutral {
   --dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
@@ -35,35 +38,17 @@
     var(--dsa-headline_h1__subheadline--font)
   );
 }
-.dsa-cta.c-storytelling.c-storytelling--full {
-  --c-storytelling--padding-ratio: 1;
-}
-.dsa-cta.c-storytelling.c-storytelling--full.c-storytelling--order-desktop-image-last .c-storytelling__box {
-  padding-left: var(--dsa-cta--horizontal-padding);
-}
-.dsa-cta.c-storytelling.dsa-cta--align-top {
-  align-items: flex-start;
+.dsa-cta.c-storytelling.dsa-cta--no-padding .c-storytelling__box {
+  padding: 0;
 }
-.dsa-cta.c-storytelling.dsa-cta--align-bottom {
-  align-items: flex-end;
+.dsa-cta.c-storytelling.dsa-cta--image-padding .c-storytelling__image {
+  padding: var(--dsa-cta__image--padding, var(--ks-spacing-inset-m));
 }
 .dsa-cta.c-storytelling .c-storytelling__box {
   width: 100%;
-  padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
-}
-@container storytelling (max-width: 640px) {
-  .dsa-cta.c-storytelling .c-storytelling__box {
-    padding-top: calc(var(--dsa-cta--vertical-padding, var(--l-section--space-default)) / var(--c-storytelling--padding-ratio));
-  }
-  .dsa-cta.c-storytelling .c-storytelling__box:only-child {
-    padding-top: var(--dsa-cta--vertical-padding, var(--l-section--space-default));
-  }
-}
-.dsa-cta.c-storytelling .c-storytelling__box:only-child {
-  padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
 }
 .dsa-cta.c-storytelling .c-storytelling__box__content {
-  max-width: 100%;
+  max-width: var(--dsa-cta__content--max-width, var(--dsa-content--width_narrow));
 }
 .dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__headline {
   font: var(--dsa-cta__headline--font, var(--dsa-headline_h2--font, var(--ks-font-display-xl)));
@@ -79,38 +64,39 @@
   font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
   color: var(--dsa-cta__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
 }
-.dsa-cta.c-storytelling .c-storytelling__box:only-child {
-  --dsa-cta--horizontal-padding: var(--dsa-content--spacing);
-}
-.dsa-cta.c-storytelling .c-storytelling__image {
-  margin: 0;
+@container storytelling (max-width: 639.9px) {
+  .dsa-cta.c-storytelling.c-storytelling--order-mobile-image-last .c-storytelling__box {
+    padding-bottom: 0;
+  }
+  .dsa-cta.c-storytelling.c-storytelling--order-mobile-image-last .c-storytelling__image {
+    padding-top: 0;
+  }
+  .dsa-cta.c-storytelling:not(.c-storytelling--order-mobil-image-last) .c-storytelling__box {
+    padding-top: 0;
+  }
+  .dsa-cta.c-storytelling:not(.c-storytelling--order-mobil-image-last) .c-storytelling__image {
+    padding-bottom: 0;
+  }
 }
 @container storytelling (min-width: 640px) {
-  .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__image {
-    padding-left: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
-  }
   .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__box {
-    padding-right: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
+    padding-right: 0;
   }
-  .dsa-cta.c-storytelling .c-storytelling__box {
-    padding-left: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
-  }
-  .dsa-cta.c-storytelling .c-storytelling__box__content--center .c-button-group {
-    justify-content: center;
+  .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__image {
+    padding-left: 0;
   }
-  .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));
-    padding-right: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
+  .dsa-cta.c-storytelling:not(.c-storytelling--order-desktop-image-last) .c-storytelling__box {
+    padding-left: 0;
   }
-  .dsa-cta.c-storytelling.c-storytelling--full > .c-storytelling__image {
-    padding: 0;
+  .dsa-cta.c-storytelling:not(.c-storytelling--order-desktop-image-last) .c-storytelling__image {
+    padding-right: 0;
   }
 }
 
 @media (min-width: 640px) {
   .dsa-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
   .dsa-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
-    padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)));
+    padding-top: calc(var(--dsa-header--height) + var(--dsa-cta__content--horizontal-padding, var(--dsa-content--horizontal-spacing)));
     z-index: 1;
   }
 }

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

@@ -103,6 +103,17 @@
           "title": "Alt text",
           "description": "Image description",
           "type": "string"
+        },
+        "align": {
+          "title": "Vertical alignment of the image",
+          "description": "Select a vertical alignment for the image",
+          "type": "string",
+          "enum": [
+            "center",
+            "top",
+            "bottom"
+          ],
+          "default": "center"
         }
       },
       "additionalProperties": false
@@ -137,9 +148,9 @@
       "type": "string",
       "default": "left"
     },
-    "contentAlign": {
+    "align": {
       "title": "Vertical alignment of the content",
-      "description": "Select a vertical alignment for the image",
+      "description": "Select a vertical alignment for the content",
       "type": "string",
       "enum": [
         "center",

package/dist/components/cta/cta.schema.json

@@ -81,6 +81,13 @@
           "title": "Alt text",
           "description": "Image description",
           "type": "string"
+        },
+        "align": {
+          "title": "Vertical alignment of the image",
+          "description": "Select a vertical alignment for the image",
+          "type": "string",
+          "enum": ["center", "top", "bottom"],
+          "default": "center"
         }
       },
       "additionalProperties": false
@@ -112,9 +119,9 @@
       "type": "string",
       "default": "left"
     },
-    "contentAlign": {
+    "align": {
       "title": "Vertical alignment of the content",
-      "description": "Select a vertical alignment for the image",
+      "description": "Select a vertical alignment for the content",
       "type": "string",
       "enum": ["center", "top", "bottom"],
       "default": "center"

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { CtaProps } from "../../CtaProps-0931e9c1.js";
+import { CtaProps } from "../../CtaProps-02e33bf1.js";
 declare const CtaContextDefault: import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const CtaContext: import("react").Context<import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Cta: import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/cta/index.js

@@ -7,22 +7,20 @@ import classnames from 'classnames';
 import { useButtonGroup } from '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, contentAlign, order, buttons = [], ...rest }, ref) => {
+const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, align, order, buttons = [], ...rest }, ref) => {
     const ButtonGroup = useButtonGroup();
     return (jsx(ButtonContext.Provider
     // @ts-expect-error
     , { 
         // @ts-expect-error
-        value: ButtonGroup, children: jsx(Storytelling, { ...rest, ref: ref, className: classnames("dsa-cta", highlightText ? `dsa-cta--highlight-text` : "", colorNeutral ? `dsa-cta--color-neutral` : "", contentAlign && contentAlign !== "center"
-                ? `dsa-cta--align-${contentAlign}`
-                : ""), backgroundImage: backgroundImage, backgroundColor: backgroundColor, full: image?.padding === false, image: {
+        value: ButtonGroup, children: jsx(Storytelling, { ...rest, ref: ref, className: classnames("dsa-cta", highlightText ? `dsa-cta--highlight-text` : "", colorNeutral ? `dsa-cta--color-neutral` : "", image?.padding ? `dsa-cta--image-padding` : "", !backgroundImage && !backgroundColor ? `dsa-cta--no-padding` : "", align && align !== "center" ? `dsa-cta--align-${align}` : ""), backgroundImage: backgroundImage, backgroundColor: backgroundColor, full: true, image: {
                 source: image?.src,
                 order: order,
-                vAlign: contentAlign,
+                vAlign: image?.align,
             }, box: {
                 text: text,
                 textAlign: textAlign,
-                vAlign: contentAlign,
+                vAlign: align,
                 link: {
                     buttons,
                     colorNeutral: colorNeutral,

package/dist/components/footer/footer.css

@@ -27,7 +27,7 @@
   background-color: var(--dsa-footer--background-color, var(--ks-background-color-default));
 }
 .dsa-footer__content {
-  padding: var(--l-section--space-small) var(--dsa-content--spacing);
+  padding: var(--l-section--space-small) var(--dsa-content--horizontal-spacing);
   border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-default));
   max-width: var(--dsa-footer--max-width, var(--dsa-content--width_wide));
   width: 100%;

package/dist/components/header/header.css

@@ -9,7 +9,7 @@
   [ks-theme],
   [ks-inverted] {
     --dsa-header--spacing-vertical: var(--ks-spacing-stack-s);
-    --dsa-header--spacing-horizontal: var(--dsa-content--spacing);
+    --dsa-header--spacing-horizontal: var(--dsa-content--horizontal-spacing);
   }
 }
 

package/dist/components/hero/hero.css

@@ -115,7 +115,7 @@
     height: var(--c-visual--min-height);
   }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content {
-    padding: 0 var(--dsa-content--spacing);
+    padding: 0 var(--dsa-content--horizontal-spacing);
     margin-top: -10%;
     position: relative;
   }

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

@@ -1,6 +1,6 @@
 .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);
@@ -8,7 +8,10 @@
 
 .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__content {

package/dist/components/mosaic/mosaic.css

@@ -1,6 +1,6 @@
 .dsa-mosaic {
   --dsa-mosaic--vertical-padding: var(--l-section--space-default);
-  --dsa-mosaic--horizontal-padding: var(--dsa-content--spacing);
+  --dsa-mosaic--horizontal-padding: var(--dsa-content--horizontal-spacing);
   --dsa-mosaic__copy--font: var(--dsa-rich-text--font);
   --dsa-mosaic__copy--color: var(--ks-text-color-default);
   --dsa-mosaic__headline--color: var(--dsa-headline--color);

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

@@ -345,6 +345,17 @@
                           "title": "Alt text",
                           "description": "Image description",
                           "type": "string"
+                        },
+                        "align": {
+                          "title": "Vertical alignment of the image",
+                          "description": "Select a vertical alignment for the image",
+                          "type": "string",
+                          "enum": [
+                            "center",
+                            "top",
+                            "bottom"
+                          ],
+                          "default": "center"
                         }
                       },
                       "additionalProperties": false
@@ -379,9 +390,9 @@
                       "type": "string",
                       "default": "left"
                     },
-                    "contentAlign": {
+                    "align": {
                       "title": "Vertical alignment of the content",
-                      "description": "Select a vertical alignment for the image",
+                      "description": "Select a vertical alignment for the content",
                       "type": "string",
                       "enum": [
                         "center",
@@ -1595,6 +1606,17 @@
                                     "title": "Alt text",
                                     "description": "Image description",
                                     "type": "string"
+                                  },
+                                  "align": {
+                                    "title": "Vertical alignment of the image",
+                                    "description": "Select a vertical alignment for the image",
+                                    "type": "string",
+                                    "enum": [
+                                      "center",
+                                      "top",
+                                      "bottom"
+                                    ],
+                                    "default": "center"
                                   }
                                 },
                                 "additionalProperties": false
@@ -1629,9 +1651,9 @@
                                 "type": "string",
                                 "default": "left"
                               },
-                              "contentAlign": {
+                              "align": {
                                 "title": "Vertical alignment of the content",
-                                "description": "Select a vertical alignment for the image",
+                                "description": "Select a vertical alignment for the content",
                                 "type": "string",
                                 "enum": [
                                   "center",

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 Jan 2025 08:42:16 GMT
+ * Generated on Fri, 10 Jan 2025 13:01:17 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);