@kickstartds/ds-agency-premium 1.6.65--canary.40.1537.0 → 1.6.65

package/dist/{BlogOverviewProps-1cfcf6e8.d.ts → BlogOverviewProps-9f207f1c.d.ts}

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

package/dist/{BlogPostProps-1cfcf6e8.d.ts → 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-fd5e75dc.js";
+import { CtaProps } from "./CtaProps-93230a76.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Body text for the blog post, overwrites sections if present

package/dist/{CtaProps-fd5e75dc.d.ts → CtaProps-93230a76.d.ts}

@@ -23,6 +23,10 @@ type HighlightText = boolean;
  * Make the text and buttons color neutral
  */
 type ColorNeutral = boolean;
+/**
+ * Set the width of the content to the full width of the element
+ */
+type Width = boolean;
 /**
  * Text content to display inside the button
  */
@@ -55,10 +59,6 @@ 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
  */
@@ -72,27 +72,23 @@ type DesktopImageAfterText = boolean;
  */
 type TextAlignment = "left" | "center";
 /**
- * Select a vertical alignment for the content
+ * Select a vertical alignment for the image
  */
 type VerticalAlignmentOfTheContent = "center" | "top" | "bottom";
-/**
- * Toggle padding of the content
- */
-type Padding1 = boolean;
 interface CtaProps {
     headline?: ComponentHeadline;
     sub?: ComponentSubheadline;
     text?: ComponentText;
     highlightText?: HighlightText;
     colorNeutral?: ColorNeutral;
+    fullWidth?: Width;
     buttons?: Button[];
     backgroundColor?: BackgroundColor;
     backgroundImage?: BackgroundImage;
     image?: Image;
     order?: Order;
     textAlign?: TextAlignment;
-    align?: VerticalAlignmentOfTheContent;
-    padding?: Padding1;
+    contentAlign?: VerticalAlignmentOfTheContent;
 }
 interface Button {
     label?: Label;
@@ -106,7 +102,6 @@ interface Image {
     src?: ImageSource;
     padding?: Padding;
     alt?: AltText;
-    align?: VerticalAlignmentOfTheImage;
 }
 /**
  * Choose what comes first on mobile and desktop: image or text
@@ -115,4 +110,4 @@ interface Order {
     mobileImageLast?: MobileImageAfterText;
     desktopImageLast?: DesktopImageAfterText;
 }
-export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, VerticalAlignmentOfTheImage, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, Padding1, CtaProps, Button, Image, Order };
+export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Width, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, CtaProps, Button, Image, Order };

package/dist/SectionProps-1cfcf6e8.d.ts

@@ -3,18 +3,18 @@
  * 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-fd5e75dc.js";
+import { CtaProps } from "./CtaProps-93230a76.js";
 import { DividerProps } from "./DividerProps-2ef31901.js";
 import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-f704d270.js";
 import { HtmlProps } from "./HtmlProps-8e95ed81.js";
-import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
+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-fd5e75dc.js";
+import { SliderProps } from "./SliderProps-93230a76.js";
 import { StatsProps } from "./StatsProps-bf5ef578.js";
 import { TeaserCardProps } from "./TeaserCardProps-b9c28e78.js";
 import { TestimonialsProps } from "./TestimonialsProps-e344f597.js";

package/dist/{SliderProps-fd5e75dc.d.ts → SliderProps-93230a76.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-fd5e75dc.js";
+import { CtaProps } from "./CtaProps-93230a76.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

@@ -282,6 +282,12 @@
                       "default": false,
                       "type": "boolean"
                     },
+                    "fullWidth": {
+                      "title": "Width",
+                      "description": "Set the width of the content to the full width of the element",
+                      "type": "boolean",
+                      "default": false
+                    },
                     "buttons": {
                       "type": "array",
                       "items": {
@@ -345,17 +351,6 @@
                           "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
@@ -390,9 +385,9 @@
                       "type": "string",
                       "default": "left"
                     },
-                    "align": {
+                    "contentAlign": {
                       "title": "Vertical alignment of the content",
-                      "description": "Select a vertical alignment for the content",
+                      "description": "Select a vertical alignment for the image",
                       "type": "string",
                       "enum": [
                         "center",
@@ -401,12 +396,6 @@
                       ],
                       "default": "center"
                     },
-                    "padding": {
-                      "title": "Padding",
-                      "description": "Toggle padding of the content",
-                      "type": "boolean",
-                      "default": false
-                    },
                     "type": {
                       "const": "cta"
                     }
@@ -1549,6 +1538,12 @@
                                 "default": false,
                                 "type": "boolean"
                               },
+                              "fullWidth": {
+                                "title": "Width",
+                                "description": "Set the width of the content to the full width of the element",
+                                "type": "boolean",
+                                "default": false
+                              },
                               "buttons": {
                                 "type": "array",
                                 "items": {
@@ -1612,17 +1607,6 @@
                                     "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
@@ -1657,9 +1641,9 @@
                                 "type": "string",
                                 "default": "left"
                               },
-                              "align": {
+                              "contentAlign": {
                                 "title": "Vertical alignment of the content",
-                                "description": "Select a vertical alignment for the content",
+                                "description": "Select a vertical alignment for the image",
                                 "type": "string",
                                 "enum": [
                                   "center",
@@ -1668,12 +1652,6 @@
                                 ],
                                 "default": "center"
                               },
-                              "padding": {
-                                "title": "Padding",
-                                "description": "Toggle padding of the content",
-                                "type": "boolean",
-                                "default": false
-                              },
                               "type": {
                                 "const": "cta"
                               }
@@ -3727,6 +3705,12 @@
           "default": false,
           "type": "boolean"
         },
+        "fullWidth": {
+          "title": "Width",
+          "description": "Set the width of the content to the full width of the element",
+          "type": "boolean",
+          "default": false
+        },
         "buttons": {
           "type": "array",
           "items": {
@@ -3790,17 +3774,6 @@
               "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
@@ -3835,9 +3808,9 @@
           "type": "string",
           "default": "left"
         },
-        "align": {
+        "contentAlign": {
           "title": "Vertical alignment of the content",
-          "description": "Select a vertical alignment for the content",
+          "description": "Select a vertical alignment for the image",
           "type": "string",
           "enum": [
             "center",
@@ -3846,12 +3819,6 @@
           ],
           "default": "center"
         },
-        "padding": {
-          "title": "Padding",
-          "description": "Toggle padding of the content",
-          "type": "boolean",
-          "default": false
-        },
         "type": {
           "const": "cta"
         }

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

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-1cfcf6e8.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
 export type { BlogOverviewProps };

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

@@ -558,6 +558,12 @@
                       "default": false,
                       "type": "boolean"
                     },
+                    "fullWidth": {
+                      "title": "Width",
+                      "description": "Set the width of the content to the full width of the element",
+                      "type": "boolean",
+                      "default": false
+                    },
                     "buttons": {
                       "type": "array",
                       "items": {
@@ -621,17 +627,6 @@
                           "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
@@ -666,9 +661,9 @@
                       "type": "string",
                       "default": "left"
                     },
-                    "align": {
+                    "contentAlign": {
                       "title": "Vertical alignment of the content",
-                      "description": "Select a vertical alignment for the content",
+                      "description": "Select a vertical alignment for the image",
                       "type": "string",
                       "enum": [
                         "center",
@@ -677,12 +672,6 @@
                       ],
                       "default": "center"
                     },
-                    "padding": {
-                      "title": "Padding",
-                      "description": "Toggle padding of the content",
-                      "type": "boolean",
-                      "default": false
-                    },
                     "type": {
                       "const": "cta"
                     }
@@ -1825,6 +1814,12 @@
                                 "default": false,
                                 "type": "boolean"
                               },
+                              "fullWidth": {
+                                "title": "Width",
+                                "description": "Set the width of the content to the full width of the element",
+                                "type": "boolean",
+                                "default": false
+                              },
                               "buttons": {
                                 "type": "array",
                                 "items": {
@@ -1888,17 +1883,6 @@
                                     "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
@@ -1933,9 +1917,9 @@
                                 "type": "string",
                                 "default": "left"
                               },
-                              "align": {
+                              "contentAlign": {
                                 "title": "Vertical alignment of the content",
-                                "description": "Select a vertical alignment for the content",
+                                "description": "Select a vertical alignment for the image",
                                 "type": "string",
                                 "enum": [
                                   "center",
@@ -1944,12 +1928,6 @@
                                 ],
                                 "default": "center"
                               },
-                              "padding": {
-                                "title": "Padding",
-                                "description": "Toggle padding of the content",
-                                "type": "boolean",
-                                "default": false
-                              },
                               "type": {
                                 "const": "cta"
                               }
@@ -3486,6 +3464,12 @@
           "default": false,
           "type": "boolean"
         },
+        "fullWidth": {
+          "title": "Width",
+          "description": "Set the width of the content to the full width of the element",
+          "type": "boolean",
+          "default": false
+        },
         "buttons": {
           "type": "array",
           "items": {
@@ -3549,17 +3533,6 @@
               "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
@@ -3594,9 +3567,9 @@
           "type": "string",
           "default": "left"
         },
-        "align": {
+        "contentAlign": {
           "title": "Vertical alignment of the content",
-          "description": "Select a vertical alignment for the content",
+          "description": "Select a vertical alignment for the image",
           "type": "string",
           "enum": [
             "center",
@@ -3605,12 +3578,6 @@
           ],
           "default": "center"
         },
-        "padding": {
-          "title": "Padding",
-          "description": "Toggle padding of the content",
-          "type": "boolean",
-          "default": false
-        },
         "type": {
           "const": "cta"
         }

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

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

package/dist/components/cta/cta.css

@@ -1,15 +1,12 @@
 .dsa-cta {
-  --dsa-cta--gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-l);
-  --dsa-cta__content--vertical-padding: var(--dsa-content--vertical-spacing);
-  --dsa-cta__content--horizontal-padding: var(--dsa-content--horizontal-spacing);
-  --dsa-cta__content--max-width: var(--dsa-content--width_narrow);
+  --dsa-cta--vertical-padding: var(--l-section--space-default);
+  --dsa-cta--horizontal-padding: var(--dsa-content--spacing);
   --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);
@@ -19,11 +16,11 @@
 }
 
 .dsa-cta.c-storytelling {
-  --c-storytelling--horizontal-padding: var(--dsa-cta__content--horizontal-padding);
-  --c-storytelling--vertical-padding: var(--dsa-cta__content--vertical-padding);
+  --c-storytelling--padding-ratio: 2;
+  --c-storytelling--horizontal-padding: var(--dsa-content--spacing);
   justify-content: center;
   align-items: stretch;
-  gap: var(--dsa-cta--gap, var(--ks-spacing-inline-m));
+  padding: 0;
 }
 .dsa-cta.c-storytelling.dsa-cta--color-neutral {
   --dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
@@ -38,19 +35,34 @@
     var(--dsa-headline_h1__subheadline--font)
   );
 }
-.dsa-cta.c-storytelling.dsa-cta--no-padding .c-storytelling__box {
-  padding: 0;
+.dsa-cta.c-storytelling.c-storytelling--full {
+  --c-storytelling--padding-ratio: 1;
 }
-.dsa-cta.c-storytelling.dsa-cta--image-padding .c-storytelling__image {
-  padding: var(--dsa-cta__content--vertical-padding, var(--dsa-content--vertical-spacing)) var(--dsa-cta__content--horizontal-padding, var(--dsa-content--horizontal-spacing));
+.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 .c-storytelling__box__content {
-  max-width: var(--dsa-cta__content--max-width, var(--dsa-content--width_narrow));
+.dsa-cta.c-storytelling.dsa-cta--align-top {
+  align-items: flex-start;
+}
+.dsa-cta.c-storytelling.dsa-cta--align-bottom {
+  align-items: flex-end;
+}
+.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 {
-  --c-storytelling--horizontal-padding: var(--dsa-cta__content--horizontal-padding);
+  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:only-child .c-storytelling__box__content {
+.dsa-cta.c-storytelling .c-storytelling__box__content {
   max-width: 100%;
 }
 .dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__headline {
@@ -67,42 +79,50 @@
   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__image {
+.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;
+@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-mobile-image-last .c-storytelling__image {
-    padding-top: 0;
+  .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));
   }
-  .dsa-cta.c-storytelling:not(.c-storytelling--order-mobile-image-last) .c-storytelling__box:not(:only-child) {
-    padding-top: 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:not(.c-storytelling--order-mobile-image-last) .c-storytelling__image {
-    padding-bottom: 0;
+  .dsa-cta.c-storytelling .c-storytelling__box__content--center .c-button-group {
+    justify-content: center;
   }
-}
-@container storytelling (min-width: 640px) {
-  .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__box:not(:only-child) {
-    padding-right: 0;
+  .dsa-cta.c-storytelling .c-storytelling__box:only-child {
+    width: 100%;
+    max-width: calc(var(--dsa-content--width_default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
   }
-  .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.c-storytelling--full > .c-storytelling__image {
+    padding: 0;
   }
-  .dsa-cta.c-storytelling:not(.c-storytelling--order-desktop-image-last) .c-storytelling__box {
-    padding-left: 0;
+  .dsa-cta.c-storytelling > .c-storytelling__image,
+  .dsa-cta.c-storytelling > .c-storytelling__box {
+    max-width: calc(var(--dsa-content--width_wide) / 2);
   }
-  .dsa-cta.c-storytelling:not(.c-storytelling--order-desktop-image-last) .c-storytelling__image {
-    padding-right: 0;
+  .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__image,
+  .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__box {
+    max-width: 100%;
   }
 }
 
 @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__content--horizontal-padding, var(--dsa-content--horizontal-spacing)));
+    padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)));
     z-index: 1;
   }
 }