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

package/dist/components/cookie-consent/cookie-consent.schema.json

@@ -0,0 +1,224 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/cookie-consent.schema.json",
+  "title": "Cookie Consent",
+  "type": "object",
+  "properties": {
+    "notice": {
+      "title": "Initial Cookie Consent Notice",
+      "description": "The initial notice displayed to users regarding cookie consent.",
+      "type": "object",
+      "properties": {
+        "displayMode": {
+          "type": "string",
+          "enum": [
+            "card",
+            "banner"
+          ],
+          "description": "The display mode of the cookie consent component",
+          "default": "card"
+        },
+        "title": {
+          "type": "string",
+          "description": "The title of the cookie consent section",
+          "examples": [
+            "We value your privacy"
+          ]
+        },
+        "acceptButton": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "description": "The label for the accept button",
+              "examples": ["Accept All Cookies"]
+            }
+          }
+        },
+        "rejectButton": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "description": "The label for the reject button",
+              "examples": ["Reject All Cookies"]
+            }
+          }
+        },
+        "customizeButton": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "description": "The label for the customize button",
+              "examples": [
+                "Customize Cookies"
+              ]
+            },
+            "variant": {
+              "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/variant"
+            }
+          }
+        },
+        "decisionButtonVariant": {
+          "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/variant"
+        },
+        "description": {
+          "type": "string",
+          "description": "The description of the cookie consent section",
+          "examples": [
+            "This website uses cookies to ensure you get the best experience on our website."
+          ]
+        }
+      }
+    },
+    "revisitButton": {
+      "type": "object",
+      "title": "Revisit Cookie Consent Button",
+      "description": "The button that allows users to revisit their cookie preferences.",
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "The label for the revisit button",
+          "default": "Manage Cookies"
+        }
+      }
+    },
+    "dialogue": {
+      "type": "object",
+      "title": "Cookie Consent Dialogue",
+      "description": "The dialogue displayed when users choose to customize their cookie preferences.",
+      "properties": {
+        "title": {
+          "type": "string",
+          "description": "The title of the cookie consent dialogue",
+          "examples": [
+            "Manage Cookie Preferences"
+          ]
+        },
+        "description": {
+          "type": "string",
+          "description": "The description of the cookie consent dialogue",
+          "examples": [
+            "Customize your privacy settings here. You can choose which types of cookies and tracking technologies you allow."
+          ]
+        },
+        "required": {
+          "title": "Required Cookies",
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "key": {
+                "type": "string",
+                "title": "Internal Key",
+                "examples": [
+                  "necessary"
+                ]
+              },
+              "name": {
+                "type": "string",
+                "description": "The name of the required cookie",
+                "examples": [
+                  "Session Cookie"
+                ]
+              },
+              "description": {
+                "type": "string",
+                "description": "A description of the required cookie",
+                "examples": [
+                  "This cookie is essential for the website to function and cannot be disabled."
+                ]
+              }
+            }
+          }
+        },
+        "buttons": {
+          "type": "object",
+          "properties": {
+            "acceptLabel": {
+              "type": "string",
+              "description": "The label for the accept button in the dialogue",
+              "default": "Accept All"
+            },
+            "rejectLabel": {
+              "type": "string",
+              "description": "The label for the reject button in the dialogue",
+              "default": "Reject All"
+            },
+            "savePreferencesLabel": {
+              "type": "string",
+              "description": "The label for the button to save preferences",
+              "default": "Save Preferences"
+            }
+          }
+        },
+        "decisionButtonVariant": {
+          "type": "string",
+          "description": "The variant of the decision buttons in the dialogue",
+          "enum": ["secondary", "tertiary"]
+        },
+        "options": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "key": {
+                "type": "string",
+                "title": "Internal Key",
+                "examples": [
+                  "functionality",
+                  "measurement",
+                  "experience",
+                  "marketing"
+                ]
+              },
+              "name": {
+                "type": "string",
+                "description": "The name of the cookie category",
+                "examples": [
+                  "Essential Cookies"
+                ]
+              },
+              "description": {
+                "type": "string",
+                "description": "A description of the cookie category",
+                "examples": [
+                  "These cookies are necessary for the website to function."
+                ]
+              }
+            }
+          }
+        },
+        "toggleLabels": {
+          "type": "object",
+          "properties": {
+            "accept": {
+              "type": "string",
+              "description": "Label for enabled toggle state",
+              "default": "Accept"
+            },
+            "reject": {
+              "type": "string",
+              "description": "Label for disabled toggle state",
+              "default": "Reject"
+            }
+          },
+          "additionalProperties": false
+        },
+        "alwaysActiveLabel": {
+          "type": "string",
+          "description": "Label that indicates that the cookie category is always active",
+          "default": "Always Active"
+        }
+      }
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string",
+      "default": "dsa.cookie-consent"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/cookie-consent/index.d.ts

@@ -0,0 +1,143 @@
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * Variant of button to be used
+ */
+type Variant = "primary" | "secondary" | "tertiary";
+type InternalKey = string;
+type RequiredCookies = {
+    key?: InternalKey;
+    /**
+     * The name of the required cookie
+     */
+    name?: string;
+    /**
+     * A description of the required cookie
+     */
+    description?: string;
+}[];
+type InternalKey1 = string;
+/**
+ * Optional custom component identifier
+ */
+type KsComponentAttribute = string;
+interface CookieConsentProps {
+    notice?: InitialCookieConsentNotice;
+    revisitButton?: RevisitCookieConsentButton;
+    dialogue?: CookieConsentDialogue;
+    component?: KsComponentAttribute;
+}
+/**
+ * The initial notice displayed to users regarding cookie consent.
+ */
+interface InitialCookieConsentNotice {
+    /**
+     * The display mode of the cookie consent component
+     */
+    displayMode?: "card" | "banner";
+    /**
+     * The title of the cookie consent section
+     */
+    title?: string;
+    acceptButton?: {
+        /**
+         * The label for the accept button
+         */
+        label?: string;
+    };
+    rejectButton?: {
+        /**
+         * The label for the reject button
+         */
+        label?: string;
+    };
+    customizeButton?: {
+        /**
+         * The label for the customize button
+         */
+        label?: string;
+        variant?: Variant;
+    };
+    decisionButtonVariant?: Variant;
+    /**
+     * The description of the cookie consent section
+     */
+    description?: string;
+}
+/**
+ * The button that allows users to revisit their cookie preferences.
+ */
+interface RevisitCookieConsentButton {
+    /**
+     * The label for the revisit button
+     */
+    label?: string;
+}
+/**
+ * The dialogue displayed when users choose to customize their cookie preferences.
+ */
+interface CookieConsentDialogue {
+    /**
+     * The title of the cookie consent dialogue
+     */
+    title?: string;
+    /**
+     * The description of the cookie consent dialogue
+     */
+    description?: string;
+    required?: RequiredCookies;
+    buttons?: {
+        /**
+         * The label for the accept button in the dialogue
+         */
+        acceptLabel?: string;
+        /**
+         * The label for the reject button in the dialogue
+         */
+        rejectLabel?: string;
+        /**
+         * The label for the button to save preferences
+         */
+        savePreferencesLabel?: string;
+    };
+    /**
+     * The variant of the decision buttons in the dialogue
+     */
+    decisionButtonVariant?: "secondary" | "tertiary";
+    options?: {
+        key?: InternalKey1;
+        /**
+         * The name of the cookie category
+         */
+        name?: string;
+        /**
+         * A description of the cookie category
+         */
+        description?: string;
+    }[];
+    toggleLabels?: {
+        /**
+         * Label for enabled toggle state
+         */
+        accept?: string;
+        /**
+         * Label for disabled toggle state
+         */
+        reject?: string;
+    };
+    /**
+     * Label that indicates that the cookie category is always active
+     */
+    alwaysActiveLabel?: string;
+}
+declare const CookieConsentContextDefault: import("react").ForwardRefExoticComponent<CookieConsentProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const CookieConsentContext: import("react").Context<import("react").ForwardRefExoticComponent<CookieConsentProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const CookieConsent: import("react").ForwardRefExoticComponent<CookieConsentProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { CookieConsentProps };
+export { CookieConsentContextDefault, CookieConsentContext, CookieConsent };

package/dist/components/cookie-consent/index.js

@@ -0,0 +1,26 @@
+import "./cookie-consent.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import classnames from 'classnames';
+import { Headline } from '../headline/index.js';
+import { Button } from '../button/index.js';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+import Markdown from 'markdown-to-jsx';
+import { Radio } from '@kickstartds/form/lib/radio';
+import './CookieConsent.client.js';
+import '@kickstartds/base/lib/headline';
+import '../../helpers-12f48df8.js';
+import '@kickstartds/base/lib/button';
+import '@kickstartds/core/lib/component';
+
+const CookieConsentContextDefault = forwardRef(({ notice, revisitButton, dialogue, component = "dsa.cookie-consent" }, ref) => {
+    return (jsxs("div", { className: "dsa-cookie-consent", "ks-component": component, ref: ref, children: [jsxs("div", { className: classnames(`dsa-cookie-consent-notice dsa-cookie-consent-notice--${notice?.displayMode}`), hidden: true, children: [jsx(Headline, { spaceAfter: "minimum", text: notice?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-notice__title" }), jsx(RichText, { text: notice?.description, className: "dsa-cookie-consent-notice__description" }), jsxs("div", { className: "dsa-cookie-consent-notice__buttons", children: [jsx(Button, { size: "small", label: notice?.customizeButton?.label, variant: notice?.customizeButton?.variant, className: "dsa-cookie-consent-notice__button--customize" }), jsx(Button, { size: "small", label: notice?.rejectButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--reject" }), jsx(Button, { size: "small", label: notice?.acceptButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--accept" })] })] }), jsx(Button, { className: "dsa-cookie-consent-revisit", size: "small", variant: "primary", icon: "star", label: revisitButton?.label || "Cookie Preferences", hidden: true }), jsxs("dialog", { className: "dsa-cookie-consent-dialogue", children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__header", children: [jsx(Headline, { spaceAfter: "minimum", text: dialogue?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-dialogue__title" }), jsx(Button, { "aria-label": "Close Cookie Consent Dialogue", className: "dsa-cookie-consent-dialogue__close", icon: "close", label: "", autoFocus: true })] }), jsxs("form", { className: "dsa-cookie-consent-dialogue__form", method: "dialog", children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__content", children: [jsx(RichText, { className: "dsa-cookie-consent-dialogue__description", text: dialogue?.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__options", children: [dialogue?.required?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsx("span", { className: "dsa-cookie-consent-dialogue__label", children: dialogue?.alwaysActiveLabel || "Always Active" })] }, index))), dialogue?.options?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__toggle", children: [jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.accept || "Accept", value: "accept" }), jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.reject || "Reject", value: "reject" })] })] }, index)))] })] }), jsxs("div", { className: "dsa-cookie-consent-dialogue__buttons", children: [jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.acceptLabel || "Accept All", className: "dsa-cookie-consent-dialogue__button--activate-all" }), jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.rejectLabel || "Reject All", className: "dsa-cookie-consent-dialogue__button--deactivate-all" }), jsx(Button, { type: "submit", size: "small", variant: "primary", label: dialogue?.buttons.savePreferencesLabel || "Save Preferences", className: "dsa-cookie-consent-dialogue__button--save" })] })] })] })] }));
+});
+const CookieConsentContext = createContext(CookieConsentContextDefault);
+const CookieConsent = forwardRef((props, ref) => {
+    const Component = useContext(CookieConsentContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+CookieConsent.displayName = "CookieConsent";
+
+export { CookieConsent, CookieConsentContext, CookieConsentContextDefault };

package/dist/components/cta/cta.css

@@ -1,26 +1,31 @@
 .dsa-cta {
-  --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--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__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__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_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--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));
+  border-radius: var(--dsa-cta--border-radius, var(--ks-border-radius-surface));
+}
+.dsa-cta.c-storytelling:not(.dsa-cta--no-padding) {
+  overflow: hidden;
 }
 .dsa-cta.c-storytelling.dsa-cta--color-neutral {
   --dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
@@ -30,99 +35,71 @@
 .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.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__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__box {
-  width: 100%;
-  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__image img {
+  width: auto;
 }
-@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__content {
+  max-width: var(--dsa-cta__content--max-width, var(--dsa-tile--width_largest));
 }
 .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));
+  --c-storytelling--horizontal-padding: var(--dsa-cta__content--horizontal-padding);
 }
-.dsa-cta.c-storytelling .c-storytelling__box__content {
+.dsa-cta.c-storytelling .c-storytelling__box:only-child .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(--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);
+  font: var(--dsa-cta__copy--font, var(--ks-font-copy-m));
+  color: var(--dsa-cta__copy--color, var(--ks-text-color-copy));
 }
-.dsa-cta.c-storytelling .c-storytelling__image {
+.dsa-cta.c-storytelling > .c-storytelling__image {
   margin: 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));
+@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-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.c-storytelling--order-mobile-image-last .c-storytelling__image {
+    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__box:not(:only-child) {
+    padding-top: 0;
   }
-  .dsa-cta.c-storytelling .c-storytelling__box__content--center .c-button-group {
-    justify-content: center;
+  .dsa-cta.c-storytelling:not(.c-storytelling--order-mobile-image-last) .c-storytelling__image {
+    padding-bottom: 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__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));
+}
+@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--full > .c-storytelling__image {
-    padding: 0;
+  .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__image {
+    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__box {
+    padding-left: 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%;
+  .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

@@ -40,12 +40,6 @@
       "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": {
@@ -66,10 +60,10 @@
             "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"
           }
         },
@@ -109,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
@@ -143,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",
@@ -154,8 +159,11 @@
       ],
       "default": "center"
     },
-    "type": {
-      "const": "cta"
+    "padding": {
+      "title": "Padding",
+      "description": "Toggle padding of the content",
+      "type": "boolean",
+      "default": false
     }
   },
   "additionalProperties": false