@kickstartds/ds-agency-premium 1.6.71--canary.45.1846.0 → 1.7.0--canary.46.1791.0

package/dist/components/blog-post/index.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { SplitWeighted } from '../split-weighted/index.js';
+import { Split } from '../split/index.js';
 import { BlogHead } from '../blog-head/index.js';
 import { Section } from '../section/index.js';
 import { BlogAside } from '../blog-aside/index.js';
@@ -30,9 +30,7 @@ import '@kickstartds/base/lib/button';
 import '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsx(SplitWeighted, { verticalAlign: "sticky", horizontalGutter: "large", mainLayout: {
-                    minWidth: "narrow",
-                }, main: jsxs(Fragment, { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), aside: aside && jsx(BlogAside, { ...aside }) }) }), cta && (jsx(Fragment, { children: jsx(Section, { backgroundColor: "accent", content: { mode: "list" }, children: jsx(Cta, { ...cta }) }) }))] }));
+const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { mainSectionWidth: "narrow", layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Fragment, { children: jsx(Section, { spaceAfter: "none", spaceBefore: "none", content: { mode: "list" }, children: jsx(Cta, { ...cta }) }) }))] }));
 BlogPost.displayName = "BlogPost";
 
 export { BlogPost };

package/dist/components/blog-teaser/blog-teaser.css

@@ -11,7 +11,7 @@
   --dsa-blog-teaser__topic--font-weight: var(--dsa-topic--font-weight);
   --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-xs);
   --dsa-blog-teaser__copy--font: var(--ks-font-copy-s);
-  --dsa-blog-teaser__copy--color: var(--ks-text-color-copy);
+  --dsa-blog-teaser__copy--color: var(--dsa-rich-text--color);
   --dsa-blog-teaser__copy--color_hover: var(--ks-text-color-default);
   --dsa-blog-teaser__copy--margin-top: 0.5em;
   --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
@@ -43,7 +43,7 @@
   --c-teaser--background: var(--dsa-blog-teaser--background, transparent);
   --c-post-teaser--gap: var(--dsa-blog-teaser--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-s));
   --c-teaser_text--spacing: var(--dsa-blog-teaser__copy--margin-top, var(--ks-spacing-stack-s));
-  --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--ks-text-color-copy));
+  --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--dsa-rich-text--color));
 }
 .dsa-blog-teaser.c-post-teaser .c-tag-label {
   --c-tag-label--font: var(--dsa-blog-teaser__tag-label--font, var(--ks-font-interface-s));

package/dist/components/blog-teaser/index.js

@@ -27,11 +27,13 @@ const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaser
                     }
                     : undefined,
                 items: teaserMetaItems,
-            }, link: {
-                //@ts-expect-error
-                url: link.url,
-                label: link?.text || "Read article",
-            }, title: headline, body: teaserText, categories: tags.map((tag) => {
+            }, link: link
+                ? {
+                    // @ts-expect-error
+                    target: link.url,
+                    label: link.text || "Read article",
+                }
+                : undefined, title: headline, body: teaserText, categories: tags.map((tag) => {
                 return { label: tag.entry };
             }), ref: ref }) }));
 });

package/dist/components/button/button.css

@@ -1,7 +1,7 @@
 .dsa-button {
-  --dsa-button--padding: 0.75em 1.5em;
+  --dsa-button--padding: 0.75em 2em;
   --dsa-button--border-width: var(--ks-border-width-default);
-  --dsa-button--border-radius: var(--ks-border-radius-control);
+  --dsa-button--border-radius: var(--ks-border-radius-pill);
   --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-button--text-transform: default;
   --dsa-button_small--font: var(--ks-font-interface-s);

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

@@ -13,10 +13,10 @@
         "Book a meeting"
       ]
     },
-    "url": {
+    "target": {
       "type": "string",
-      "title": "URL",
-      "description": "The URL to link to when the button is clicked",
+      "title": "Target",
+      "description": "Target that should be linked, makes the button behave like a link semantically",
       "format": "uri"
     },
     "variant": {

package/dist/components/button/button.schema.json

@@ -11,10 +11,10 @@
       "description": "Text content to display inside the button",
       "examples": ["Book a meeting"]
     },
-    "url": {
+    "target": {
       "type": "string",
-      "title": "URL",
-      "description": "The URL to link to when the button is clicked",
+      "title": "Target",
+      "description": "Target that should be linked, makes the button behave like a link semantically",
       "format": "uri"
     },
     "variant": {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { ButtonProps } from "../../ButtonProps-00ddee3a.js";
+import { ButtonProps } from "../../ButtonProps-03ff6d21.js";
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 declare const ButtonProvider: FC<PropsWithChildren>;
 export type { ButtonProps };

package/dist/components/button/index.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import classnames from 'classnames';
 import { ButtonContextDefault, ButtonContext } from '@kickstartds/base/lib/button';
 
-const Button = forwardRef(({ label, url, size = "medium", variant = "secondary", icon, disabled = false, className, ...props }, ref) => (jsx(ButtonContextDefault, { ...props, className: classnames("dsa-button", className), href: url, label: label, size: size, variant: variant === "primary"
+const Button = forwardRef(({ label, target, size = "medium", variant = "secondary", icon, disabled = false, className, ...props }, ref) => (jsx(ButtonContextDefault, { ...props, className: classnames("dsa-button", className), href: target, label: label, size: size, variant: variant === "primary"
         ? "solid"
         : variant === "secondary"
             ? "clear"

package/dist/components/button-group/button-group.schema.dereffed.json

@@ -23,10 +23,10 @@
               "Book a meeting"
             ]
           },
-          "url": {
+          "target": {
             "type": "string",
-            "title": "URL",
-            "description": "The URL to link to when the button is clicked",
+            "title": "Target",
+            "description": "Target that should be linked, makes the button behave like a link semantically",
             "format": "uri"
           },
           "variant": {

package/dist/components/button-group/index.d.ts

@@ -6,7 +6,7 @@ import { FC, PropsWithChildren } from "react";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { ButtonProps } from "../../ButtonProps-00ddee3a.js";
+import { ButtonProps } from "../../ButtonProps-03ff6d21.js";
 /**
  * Buttons of the Button Group
  */

package/dist/components/contact/contact.css

@@ -4,15 +4,15 @@
 }
 
 .dsa-contact {
-  --dsa-contact--gap-horizontal: var(--ks-spacing-inline-s);
-  --dsa-contact--gap-vertical: var(--ks-spacing-stack-s);
+  --dsa-contact--gap-horizontal: var(--ks-spacing-inline-m);
+  --dsa-contact--gap-vertical: var(--ks-spacing-stack-m);
   --dsa-contact__header--gap: 0;
-  --dsa-contact__image--flex-basis: var(--dsa-tile--width_smallest);
+  --dsa-contact__image--flex-basis: 200px;
   --dsa-contact__image--border-radius: var(--ks-border-radius-card);
   --dsa-contact__body--gap: var(--ks-spacing-stack-xs);
-  --dsa-contact__body--flex-basis: var(--dsa-tile--width_small);
-  --dsa-contact__copy--font: var(--ks-font-copy-m);
-  --dsa-contact__copy--color: var(--ks-text-color-copy);
+  --dsa-contact__body--flex-basis: 300px;
+  --dsa-contact__copy--font: var(--dsa-rich-text--font);
+  --dsa-contact__copy--color: var(--dsa-rich-text--color);
   --dsa-contact__title--color: var(--ks-text-color-display);
   --dsa-contact__title--font: var(--ks-font-copy-l);
   --dsa-contact__title--font-weight: var(--ks-font-weight-bold);
@@ -40,7 +40,7 @@
 .dsa-contact {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--dsa-contact--gap-vertical) var(--dsa-contact--gap-horizontal);
+  gap: var(--dsa-contact--gap-horizontal) var(--dsa-contact--gap-vertical);
 }
 .dsa-contact__image-wrap, .dsa-contact__body {
   flex-grow: 1;
@@ -48,7 +48,7 @@
 .dsa-contact__body {
   display: flex;
   flex-grow: 1;
-  flex-shrink: 1;
+  flex-shrink: 0;
   flex-direction: column;
   gap: var(--dsa-contact__body--gap);
   flex-basis: var(--dsa-contact__body--flex-basis);
@@ -62,7 +62,6 @@
   flex-basis: var(--dsa-contact__image--flex-basis);
   height: 100%;
   width: 100%;
-  flex-shrink: 1;
 }
 .dsa-contact--image-full-width .dsa-contact__image-wrap {
   flex-grow: 1;
@@ -113,7 +112,6 @@
   font: var(--dsa-contact__link--font);
   font-weight: var(--dsa-contact__link--font-weight);
   text-decoration: var(--dsa-contact__link--text-decoration);
-  width: fit-content;
 }
 .dsa-contact a.dsa-contact__link .icon {
   width: var(--dsa-contact__link__icon--size);
@@ -124,4 +122,12 @@
 .dsa-contact a.dsa-contact__link:hover {
   color: var(--dsa-contact__link--color_hover);
   text-decoration: var(--dsa-contact__link--text-decoration_hover);
+}
+.dsa-contact .c-headline {
+  --c-headline--color: var(--dsa-contact__headline--color);
+  --c-headline--font: var(--dsa-contact__headline--font);
+  --c-headline--font-weight: var(--dsa-contact__headline--font-weight);
+  --c-headline__subheadline--color: var(--dsa-contact__headline__subheadline--color);
+  --c-headline__subheadline--font: var(--dsa-contact__headline__subheadline--font);
+  --c-headline__subheadline--font-weight: var(--dsa-contact__headline__subheadline--font-weight);
 }

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

@@ -22,7 +22,7 @@
           "title": "Alt Text",
           "description": "Alt text of the image",
           "examples": [
-            "Picture of Isabella Doe"
+            "Picture of Jane Smith"
           ]
         },
         "fullWidth": {
@@ -50,7 +50,7 @@
       "description": "Name, company name, etc.",
       "type": "string",
       "examples": [
-        "Isabella Doe"
+        "Jane Smith"
       ]
     },
     "subtitle": {
@@ -73,7 +73,7 @@
           "label": {
             "type": "string"
           },
-          "url": {
+          "href": {
             "type": "string",
             "format": "uri"
           },
@@ -82,14 +82,6 @@
             "description": "Open link in new Tab",
             "type": "boolean",
             "default": false
-          },
-          "ariaLabel": {
-            "title": "Aria Label",
-            "description": "Aria label for the link",
-            "type": "string",
-            "examples": [
-              "Link to Isabella Doe's social media profile"
-            ]
           }
         },
         "additionalProperties": false
@@ -99,12 +91,12 @@
           {
             "icon": "phone",
             "label": "0228 / 688 966 20",
-            "url": "tel:+4922868896620"
+            "href": "tel:+4922868896620"
           },
           {
             "icon": "email",
             "label": "mail@example.com",
-            "url": "mailto:mail@example.com"
+            "href": "mailto:mail@example.com"
           }
         ]
       ]

package/dist/components/contact/contact.schema.json

@@ -19,7 +19,7 @@
           "type": "string",
           "title": "Alt Text",
           "description": "Alt text of the image",
-          "examples": ["Picture of Isabella Doe"]
+          "examples": ["Picture of Jane Smith"]
         },
         "fullWidth": {
           "type": "boolean",
@@ -40,7 +40,7 @@
       "title": "Title",
       "description": "Name, company name, etc.",
       "type": "string",
-      "examples": ["Isabella Doe"]
+      "examples": ["Jane Smith"]
     },
     "subtitle": {
       "title": "Subtitle",
@@ -60,7 +60,7 @@
           "label": {
             "type": "string"
           },
-          "url": {
+          "href": {
             "type": "string",
             "format": "uri"
           },
@@ -69,12 +69,6 @@
             "description": "Open link in new Tab",
             "type": "boolean",
             "default": false
-          },
-          "ariaLabel": {
-            "title": "Aria Label",
-            "description": "Aria label for the link",
-            "type": "string",
-            "examples": ["Link to Isabella Doe's social media profile"]
           }
         },
         "additionalProperties": false
@@ -84,12 +78,12 @@
           {
             "icon": "phone",
             "label": "0228 / 688 966 20",
-            "url": "tel:+4922868896620"
+            "href": "tel:+4922868896620"
           },
           {
             "icon": "email",
             "label": "mail@example.com",
-            "url": "mailto:mail@example.com"
+            "href": "mailto:mail@example.com"
           }
         ]
       ]

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

@@ -34,10 +34,6 @@ type Subtitle = string;
  * Open link in new Tab
  */
 type OpenLinkInNewTab = boolean;
-/**
- * Aria label for the link
- */
-type AriaLabel = string;
 type CopyText = string;
 /**
  * Additional css classes attached to the wrapping element
@@ -62,9 +58,8 @@ interface ContactProps {
     links?: {
         icon?: string;
         label?: string;
-        url?: string;
+        href?: string;
         newTab?: OpenLinkInNewTab;
-        ariaLabel?: AriaLabel;
     }[];
     copy?: CopyText;
     className?: Class;

package/dist/components/contact/index.js

@@ -9,7 +9,7 @@ import { Icon } from '@kickstartds/base/lib/icon';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import { Container } from '@kickstartds/core/lib/container';
 
-const ContactContextDefault = forwardRef(({ title, subtitle, image, links, copy, className, ...props }, ref) => (jsx(Container, { name: "contact", children: jsxs("address", { className: classnames("dsa-contact", image?.aspectRatio && `dsa-contact--image-${image?.aspectRatio}`, image?.fullWidth && `dsa-contact--image-full-width`, className), ref: ref, ...props, children: [image && image.src && (jsx("div", { className: "dsa-contact__image-wrap", children: jsx(Picture, { src: image?.src, alt: image?.alt, className: "dsa-contact__image" }) })), jsxs("div", { className: "dsa-contact__body", children: [title && (jsxs("div", { className: "dsa-contact__header", children: [jsx("span", { className: "dsa-contact__title", children: title }), jsx("span", { className: "dsa-contact__subtitle", children: subtitle })] })), copy && jsx(RichText, { text: copy, className: "dsa-contact__copy" }), links && links.length && (jsx("ul", { className: "dsa-contact__links", children: links.map(({ icon, url, label, ariaLabel, newTab }, i) => (jsx("li", { children: jsxs(Link, { className: "dsa-contact__link", "aria-label": ariaLabel, href: url, ...(newTab && { target: "_blank", rel: "noopener" }), children: [jsx(Icon, { role: "presentation", focusable: "false", "aria-hidden": true, icon: icon }), label] }) }, i))) }))] })] }) })));
+const ContactContextDefault = forwardRef(({ title, subtitle, image, links, copy, className, ...props }, ref) => (jsx(Container, { name: "contact", children: jsxs("address", { className: classnames("dsa-contact", image?.aspectRatio && `dsa-contact--image-${image?.aspectRatio}`, image?.fullWidth && `dsa-contact--image-full-width`, className), ref: ref, ...props, children: [image && image.src ? (jsx("div", { className: "dsa-contact__image-wrap", children: jsx(Picture, { src: image?.src, alt: image?.alt, className: "dsa-contact__image" }) })) : (""), jsxs("div", { className: "dsa-contact__body", children: [title && (jsxs("div", { className: "dsa-contact__header", children: [jsx("span", { className: "dsa-contact__title", children: title }), jsx("span", { className: "dsa-contact__subtitle", children: subtitle })] })), copy && jsx(RichText, { text: copy, className: "dsa-contact__copy" }), links && links.length ? (jsx("ul", { className: "dsa-contact__links", children: links.map(({ icon, href, label, newTab }, i) => (jsx("li", { children: jsxs(Link, { className: "dsa-contact__link", href: href, ...(newTab ? { target: "_blank", rel: "noopener" } : {}), children: [jsx(Icon, { icon: icon }), label] }) }, i))) })) : ("")] })] }) })));
 const ContactContext = createContext(ContactContextDefault);
 const Contact = forwardRef((props, ref) => {
     const Component = useContext(ContactContext);

package/dist/components/cta/cta.css

@@ -1,31 +1,26 @@
 .dsa-cta {
-  --dsa-cta--gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-l);
-  --dsa-cta--border-radius: var(--ks-border-radius-surface);
-  --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-tile--width_largest);
+  --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__copy--font: var(--ks-font-copy-m);
-  --dsa-cta__copy--color: var(--ks-text-color-default);
-  --dsa-cta__image--padding: var(--ks-spacing-inset-m);
+  --dsa-cta__subheadline--font: var(--dsa-headline_h2__subheadline--font);
   --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);
   --dsa-cta_highlight-text__headline--font: var(--dsa-headline_h1--font);
+  --dsa-cta_highlight-text__subheadline--font: var(--dsa-headline_h1__subheadline--font);
   --dsa-cta_highlight-text__copy--font: var(--ks-font-copy-l);
 }
 
 .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));
-  border-radius: var(--dsa-cta--border-radius, var(--ks-border-radius-surface));
-}
-.dsa-cta.c-storytelling:not(.dsa-cta--no-padding) {
-  overflow: hidden;
+  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));
@@ -35,71 +30,99 @@
 .dsa-cta.c-storytelling.dsa-cta--highlight-text {
   --dsa-cta__copy--font: var(--dsa-cta_highlight-text__copy--font, var(--ks-font-copy-l));
   --dsa-cta__headline--font: var(--dsa-cta_highlight-text__headline--font, var(--dsa-headline_h1--font));
+  --dsa-cta__subheadline--font: var(
+    --dsa-cta_highlight-text__subheadline--font,
+    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__image img {
-  width: auto;
+.dsa-cta.c-storytelling.dsa-cta--align-top {
+  align-items: flex-start;
 }
-.dsa-cta.c-storytelling .c-storytelling__box__content {
-  max-width: var(--dsa-cta__content--max-width, var(--dsa-tile--width_largest));
+.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 {
+  font: var(--dsa-cta__headline--font, var(--dsa-headline_h2--font, var(--ks-font-display-xl)));
   color: var(--dsa-cta__headline--color, var(--ks-text-color-display));
+  font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
 }
 .dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__subheadline {
+  font: var(--dsa-cta__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
   color: var(--dsa-cta__subheadline--color, var(--ks-text-color-primary));
+  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
 }
 .dsa-cta.c-storytelling .c-storytelling__box .c-rich-text {
-  font: var(--dsa-cta__copy--font, var(--ks-font-copy-m));
-  color: var(--dsa-cta__copy--color, var(--ks-text-color-copy));
+  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 {
+.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;
   }
 }

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

@@ -40,6 +40,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": {
@@ -60,10 +66,10 @@
             "title": "Icon",
             "description": "Choose an icon"
           },
-          "url": {
+          "target": {
             "type": "string",
-            "title": "URL",
-            "description": "The URL to link to when the button is clicked",
+            "title": "Target",
+            "description": "Target that should be linked, makes the button behave like a link semantically",
             "format": "uri"
           }
         },
@@ -103,17 +109,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
@@ -148,9 +143,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",
@@ -159,18 +154,6 @@
       ],
       "default": "center"
     },
-    "padding": {
-      "title": "Padding",
-      "description": "Toggle padding of the content",
-      "type": "boolean",
-      "default": false
-    },
-    "inverted": {
-      "title": "Inverted",
-      "description": "Toggle inversion of the component",
-      "type": "boolean",
-      "default": false
-    },
     "type": {
       "const": "cta"
     }