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

package/dist/components/stat/stat.schema.json

@@ -8,8 +8,8 @@
     "number": {
       "title": "Number",
       "description": "The number of the stat",
-      "type": "integer",
-      "examples": [1, 2, 3, 4]
+      "type": "string",
+      "examples": ["1", "5x", "2", "40%", "bis zu 100"]
     },
     "description": {
       "title": "Description",

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

@@ -19,12 +19,13 @@
           "number": {
             "title": "Number",
             "description": "The number of the stat",
-            "type": "integer",
+            "type": "string",
             "examples": [
-              1,
-              2,
-              3,
-              4
+              "1",
+              "5x",
+              "2",
+              "40%",
+              "bis zu 100"
             ]
           },
           "description": {

package/dist/components/teaser-card/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { TeaserCardProps } from "../../TeaserCardProps-994cb119.js";
+import { TeaserCardProps } from "../../TeaserCardProps-b9c28e78.js";
 declare const TeaserCardContextDefault: import("react").ForwardRefExoticComponent<TeaserCardProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const TeaserCardContext: import("react").Context<import("react").ForwardRefExoticComponent<TeaserCardProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const TeaserCard: import("react").ForwardRefExoticComponent<TeaserCardProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -6,15 +6,15 @@ import { TeaserBoxContextDefault, TeaserBoxContext } from '@kickstartds/base/lib
 import { Container } from '@kickstartds/core/lib/container';
 import { compiler } from 'markdown-to-jsx';
 
-const TeaserCardContextDefault = forwardRef(({ headline, text, button, url, image, imageRatio = "wide", label, layout = "stack", ...rest }, ref) => (jsx(Container, { name: "teaser-card", children: jsxs("div", { className: classnames(`dsa-teaser-card`, `dsa-teaser-card--${layout}`, `dsa-teaser-card--${imageRatio}`), children: [label && jsx("span", { className: "dsa-teaser-card__label", children: label }), jsx(TeaserBoxContextDefault, { ...rest, topic: headline, text: text, 
-                // @ts-expect-error
-                renderTopic: () => jsx(Fragment, { children: compiler(headline) }), link: {
-                    hidden: button?.hidden,
-                    label: button.label,
-                    variant: "primary",
-                    url: url,
-                    icon: button?.chevron ? "chevron-right" : undefined,
-                }, image: image, ref: ref })] }) })));
+const TeaserCardContextDefault = forwardRef(({ headline, text, button, target, image, imageRatio = "wide", label, layout = "stack", ...rest }, ref) => (jsx(Container, { name: "teaser-card", children: jsx(TeaserBoxContextDefault, { ...rest, className: classnames(`dsa-teaser-card`, label && `dsa-teaser-card--label`, `dsa-teaser-card--${layout}`, `dsa-teaser-card--${imageRatio}`), topic: headline, text: text, 
+        // @ts-expect-error
+        renderTopic: () => (jsxs(Fragment, { children: [label ? (jsx("span", { className: "dsa-teaser-card__label", children: label })) : (""), compiler(headline)] })), link: {
+            hidden: button?.hidden,
+            label: button.label,
+            variant: "secondary",
+            target: target,
+            icon: button?.chevron ? "chevron-right" : undefined,
+        }, image: image, ref: ref }) })));
 const TeaserCardContext = createContext(TeaserCardContextDefault);
 const TeaserCard = forwardRef((props, ref) => {
     const Component = useContext(TeaserCardContext);

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

@@ -8,53 +8,39 @@
   --dsa-teaser-card--border-width: var(--ks-border-width-default);
   --dsa-teaser-card--border-color: var(--ks-border-color-card-interactive);
   --dsa-teaser-card--border-color_hover: var(--ks-border-color-card-interactive-hover);
-  --dsa-teaser-card--border-radius: var(--ks-border-radius-card) var(--ks-border-radius-card)
-    var(--ks-border-radius-card) calc(var(--ks-border-radius-card) * 3);
-  --dsa-teaser-card--shadow: none;
-  --dsa-teaser-card--shadow_hover: none;
-  --dsa-teaser__topic--color: var(--dsa-topic--color);
-  --dsa-teaser-card__label--font: var(--ks-font-interface-s);
+  --dsa-teaser-card--border-radius: var(--ks-border-radius-card);
+  --dsa-teaser-card--shadow: var(--ks-box-shadow-card);
+  --dsa-teaser-card--shadow_hover: var(--ks-box-shadow-card-hover);
+  --dsa-teaser-card__label--font: var(--ks-font-interface-m);
   --dsa-teaser-card__label--font-weight: var(--ks-font-weight-semi-bold);
-  --dsa-teaser-card__label--color: var(--ks-text-color-primary);
-  --dsa-teaser-card__label--background-color: var(--ks-background-color-bold);
+  --dsa-teaser-card__label--color: var(--dsa-text-color-on-primary);
+  --dsa-teaser-card__label--background-color: var(--ks-background-color-primary);
   --dsa-teaser-card__label--padding: 0.5em 1em;
   --dsa-teaser-card__label--border-radius: var(--ks-border-radius-pill);
-  --dsa-teaser-card__label--border: 1px solid var(--ks-border-color-interface);
-  --dsa-teaser-card__button--font: var(--ks-font-interface-m);
-  --dsa-teaser-card--padding: var(--ks-spacing-inset-m);
-  --dsa-teaser-card__topic--font: var(--ks-font-display-m);
+  --dsa-teaser-card__label--border: 0;
+  --dsa-teaser-card__topic--font: var(--ks-font-display-l);
   --dsa-teaser-card__topic--font-weight: var(--dsa-topic--font-weight);
-  --dsa-teaser-card__copy--font: var(--ks-font-copy-s);
+  --dsa-teaser-card__copy--font: var(--dsa-rich-text--font);
   --dsa-teaser-card__copy--color: var(--ks-text-color-default);
-  --dsa-teaser-card__button--font: var(--ks-font-interface-s);
-}
-@container teaser-card (min-width: 400px) {
-  .dsa-teaser-card {
-    --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
-    --dsa-teaser-card__topic--font: var(--ks-font-display-l);
-    --dsa-teaser-card__copy--font: var(--ks-font-copy-m);
-    --dsa-teaser-card__button--font: var(--ks-font-interface-m);
-  }
+  --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
 }
 @media (min-width: 48em) {
   .dsa-teaser-card {
     --dsa-teaser-card__topic--font: var(--ks-font-display-s);
     --dsa-teaser-card__copy--font: var(--ks-font-copy-s);
-    --dsa-teaser-card--padding: var(--ks-spacing-inset-m);
-    --dsa-teaser-card__button--font: var(--ks-font-interface-s);
+    --dsa-teaser-card--padding: var(--ks-spacing-inset-s);
   }
-  @container teaser-card (min-width: 400px) {
+  @container teaser-card (min-width: 300px) {
     .dsa-teaser-card {
       --dsa-teaser-card__copy--font: var(--ks-font-copy-m);
       --dsa-teaser-card__topic--font: var(--ks-font-display-m);
-      --dsa-teaser-card__button--font: var(--ks-font-interface-m);
     }
   }
   @container teaser-card (min-width: 820px) {
     .dsa-teaser-card {
-      --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
       --dsa-teaser-card__topic--font: var(--ks-font-display-l);
       --dsa-teaser-card__copy--font: var(--ks-font-copy-l);
+      --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
     }
   }
 }
@@ -68,13 +54,7 @@
   display: flex;
 }
 
-.dsa-teaser-card {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.dsa-teaser-card .c-teaser {
+.c-teaser.dsa-teaser-card {
   --c-teaser--padding: var(--dsa-teaser-card--padding, var(--ks-spacing-inset-l));
   --c-teaser--background: var(--dsa-teaser-card--background, var(--ks-background-color-card-interactive));
   --c-teaser--color: var(--dsa-teaser-card__copy--color, var(--ks-text-color-default));
@@ -83,68 +63,68 @@
   --c-teaser--border-radius: var(--dsa-teaser-card--border-radius, var(--ks-border-radius-card));
   --c-teaser--shadow-hover: var(--dsa-teaser-card--shadow_hover, var(--ks-box-shadow-card-hover));
   position: relative;
+  overflow: visible;
   transition-property: border-color, background-color, box-shadow;
   box-shadow: var(--dsa-teaser-card--shadow, var(--ks-box-shadow-card));
 }
-.dsa-teaser-card .c-teaser:hover {
+.c-teaser.dsa-teaser-card > :first-child:not(.c-teaser__body) {
+  overflow: hidden;
+  border-radius: var(--dsa-teaser-card--border-radius) var(--dsa-teaser-card--border-radius) 0 0;
+}
+.c-teaser.dsa-teaser-card:hover {
   --c-teaser--border: var(--dsa-teaser-card--border-color_hover, var(--ks-background-color-card-interactive))
     var(--dsa-teaser-card--border-width) solid;
 }
-.dsa-teaser-card .c-teaser img {
+.c-teaser.dsa-teaser-card img {
   object-fit: cover;
 }
-.dsa-teaser-card--wide img {
+.c-teaser.dsa-teaser-card--wide img {
   aspect-ratio: 4/3;
 }
-.dsa-teaser-card--landscape img {
+.c-teaser.dsa-teaser-card--landscape img {
   aspect-ratio: 16/9;
 }
-.dsa-teaser-card--square img {
+.c-teaser.dsa-teaser-card--square img {
   aspect-ratio: 1/1;
 }
-.dsa-teaser-card .c-rich-text {
-  font: var(--dsa-teaser-card__copy--font, var(--ks-font-copy-m));
+.c-teaser.dsa-teaser-card .c-rich-text {
+  font: var(--dsa-teaser-card__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
 }
-.dsa-teaser-card .c-teaser__topic {
-  color: var(--dsa-teaser__topic--color, var(--dsa-topic--color));
+.c-teaser.dsa-teaser-card .c-teaser__topic {
   font: var(--dsa-teaser-card__topic--font, var(--dsa-topic--font));
   font-weight: var(--dsa-teaser-card__topic--font-weight, var(--dsa-topic--font-weight));
 }
-.dsa-teaser-card .dsa-teaser-card__label {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  border-radius: var(--dsa-teaser-card__label--border-radius);
-  border: var(--dsa-teaser-card__label--border, 0);
-  pointer-events: initial;
-  padding: var(--dsa-teaser-card__label--padding);
-  transform: translate(0.5em, -50%);
-  font: var(--dsa-teaser-card__label--font);
-  text-align: center;
-  font-weight: var(--dsa-teaser-card__label--font-weight);
-  color: var(--dsa-teaser-card__label--color);
-  background-color: var(--dsa-teaser-card__label--background-color);
-}
-.dsa-teaser-card .c-teaser__link .dsa-button {
-  font: var(--dsa-teaser-card__button--font, var(--dsa-button_medium--font));
-  padding: var(--dsa-teaser-card__button--padding, var(--dsa-button--padding));
-}
 @container teaser-card (min-width: 640px) {
-  .dsa-teaser-card--unset img {
+  .c-teaser.dsa-teaser-card--unset img {
     height: 100%;
   }
-  .dsa-teaser-card--row .c-teaser {
+  .c-teaser.dsa-teaser-card--row {
     flex-direction: row;
   }
-  .dsa-teaser-card--row .c-teaser .c-teaser__body {
+  .c-teaser.dsa-teaser-card--row .c-teaser__body {
     justify-content: center;
     flex-basis: 50%;
   }
-  .dsa-teaser-card--row .c-teaser .c-teaser__body .c-teaser__text {
+  .c-teaser.dsa-teaser-card--row .c-teaser__body .c-teaser__text {
     flex: 0;
   }
-  .dsa-teaser-card--row .c-teaser > :first-child:not(.c-teaser__body) {
+  .c-teaser.dsa-teaser-card--row > :first-child:not(.c-teaser__body) {
     flex: 50%;
+    border-radius: var(--dsa-teaser-card--border-radius) 0 0 var(--dsa-teaser-card--border-radius);
   }
+}
+.c-teaser.dsa-teaser-card--label .dsa-teaser-card__label {
+  border-radius: var(--dsa-teaser-card__label--border-radius);
+  border: var(--dsa-teaser-card__label--border, 0);
+  pointer-events: initial;
+  padding: var(--dsa-teaser-card__label--padding);
+  transform: translate(0.5em, -50%);
+  font: var(--dsa-teaser-card__label--font);
+  text-align: center;
+  font-weight: var(--dsa-teaser-card__label--font-weight);
+  color: var(--dsa-teaser-card__label--color);
+  position: absolute;
+  background-color: var(--dsa-teaser-card__label--background-color);
+  top: 0;
+  right: 0;
 }

package/dist/components/teaser-card/teaser-card.schema.dereffed.json

@@ -31,10 +31,10 @@
       "description": "Layout for the Teaser Card",
       "default": "stack"
     },
-    "url": {
+    "target": {
       "type": "string",
-      "title": "Url",
-      "description": "Url that should be linked",
+      "title": "Target",
+      "description": "Target that should be linked",
       "format": "uri"
     },
     "button": {
@@ -87,6 +87,6 @@
   "additionalProperties": false,
   "required": [
     "topic",
-    "url"
+    "target"
   ]
 }

package/dist/components/teaser-card/teaser-card.schema.json

@@ -28,10 +28,10 @@
       "description": "Layout for the Teaser Card",
       "default": "stack"
     },
-    "url": {
+    "target": {
       "type": "string",
-      "title": "Url",
-      "description": "Url that should be linked",
+      "title": "Target",
+      "description": "Target that should be linked",
       "format": "uri"
     },
     "button": {
@@ -71,5 +71,5 @@
     }
   },
   "additionalProperties": false,
-  "required": ["topic", "url"]
+  "required": ["topic", "target"]
 }

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
 import { TestimonialsProps } from "../../TestimonialsProps-e344f597.js";
-import { SliderProps } from "../../SliderProps-babe4ee6.js";
+import { SliderProps } from "../../SliderProps-93230a76.js";
 interface ConditionalSliderProps extends SliderProps {
     layout: "slider" | "list" | "alternating";
 }

package/dist/components/testimonials/testimonials.css

@@ -2,7 +2,6 @@
 .dsa-testimonials {
   --dsa-testimonials--padding-left: calc(var(--dsa-testimonials__icon--font-size) / 6);
   --dsa-testimonials--padding-top: 0.5em;
-  --dsa-testimonials--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
   --dsa-testimonials__quote--font: var(--ks-font-copy-l);
   --dsa-testimonials__quote--font-weight: var(--ks-font-weight-regular);
   --dsa-testimonials__quote--margin-bottom: var(--ks-spacing-stack-s);
@@ -61,9 +60,6 @@
   flex-direction: column;
   gap: var(--dsa-testimonials__list--gap, var(--ks-spacing-stack-xl));
 }
-.dsa-testimonials .c-quote {
-  gap: var(--dsa-testimonials--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-m));
-}
 .dsa-testimonials .c-quote__source {
   color: var(--dsa-testimonials__source--color, var(--ks-text-color-default));
 }

package/dist/components/text/text.css

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

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

@@ -59,10 +59,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"
         },
         "icon": {

package/dist/components/tile/tile.schema.json

@@ -51,8 +51,8 @@
         "label": {
           "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/label"
         },
-        "url": {
-          "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/url"
+        "target": {
+          "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
         },
         "icon": {
           "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/icon"

package/dist/components/video-curtain/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { VideoCurtainProps } from "../../VideoCurtainProps-a2c0cc7f.js";
+import { VideoCurtainProps } from "../../VideoCurtainProps-6c625a69.js";
 declare const VideoCurtainContextDefault: import("react").ForwardRefExoticComponent<VideoCurtainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const VideoCurtainContext: import("react").Context<import("react").ForwardRefExoticComponent<VideoCurtainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const VideoCurtain: import("react").ForwardRefExoticComponent<VideoCurtainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/video-curtain/index.js

@@ -14,25 +14,17 @@ const VideoCurtainContextDefault = forwardRef(({ headline, sub, text, highlightT
     // @ts-expect-error
     , { 
         // @ts-expect-error
-        value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { ...rest, ref: ref, skipButton: true, className: classnames(`dsa-video-curtain`, textPosition && `dsa-video-curtain--content-${textPosition}`, highlightText && `dsa-video-curtain--highlight-text`, colorNeutral && `dsa-video-curtain--color-neutral`, className), height: "fullScreen", inbox: true, box: {
+        value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { ...rest, ref: ref, skipButton: true, className: classnames(`dsa-video-curtain`, highlightText ? `dsa-video-curtain--highlight-text` : "", colorNeutral ? `dsa-video-curtain--color-neutral` : "", className), height: "fullScreen", inbox: true, box: {
                     background: "transparent",
                     enabled: true,
-                    vertical: textPosition === "bottom" || textPosition === "corner"
-                        ? "bottom"
-                        : "center",
-                    horizontal: textPosition === "left" || textPosition === "corner"
-                        ? "left"
-                        : textPosition === "right"
-                            ? "right"
-                            : "center",
+                    vertical: "center",
+                    horizontal: textPosition,
                     link: {
                         // @ts-expect-error
                         buttons,
                         colorNeutral,
                         enabled: buttons.length > 0,
-                        arrangement: textPosition === "left" || textPosition === "corner"
-                            ? "left"
-                            : "center",
+                        arrangement: textPosition === "center" ? "center" : "left",
                     },
                     headline: {
                         text: headline,

package/dist/components/video-curtain/video-curtain.css

@@ -4,22 +4,17 @@
   --dsa-video-curtain_color-neutral__headline--color: var(--ks-text-color-default);
   --dsa-video-curtain_color-neutral__subheadline--color: var(--ks-text-color-default);
   --dsa-video-curtain__copy--color: var(--ks-text-color-default);
-  --dsa-video-curtain__copy--font: var(--ks-font-copy-m);
+  --dsa-video-curtain__copy--font: var(--dsa-rich-text--font);
   --dsa-video-curtain_highlight-text__copy--font: var(--ks-font-copy-l);
   --dsa-video-curtain_color-neutral__copy--color: var(--ks-text-color-default);
   --dsa-video-curtain__textbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-video-curtain__textbox--border-radius: var(--ks-border-radius-surface);
   --dsa-video-curtain__textbox--max-width: var(--dsa-section__content--width_narrow);
   --dsa-video-curtain__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-video-curtain_corner__overlay--background: linear-gradient(
-    20deg,
-    var(--ks-color-fg-inverted-alpha-2) 30%,
-    transparent 80%
-  );
-  --dsa-video-curtain_bottom__overlay--background: linear-gradient(
+  --dsa-video-curtain__overlay--background: linear-gradient(
     0deg,
-    var(--ks-color-fg-inverted-alpha-1),
-    transparent
+    var(--ks-background-color-default) 15%,
+    transparent 50%
   );
 }
 
@@ -35,46 +30,44 @@
   );
   --c-visual_overlay--background-size: 100%;
 }
-.c-visual.dsa-video-curtain--color-neutral {
-  --dsa-video-curtain__copy--color: var(--dsa-video-curtain_color-neutral__copy--color, var(--ks-text-color-default));
-  --dsa-video-curtain__headline--color: var(
-    --dsa-video-curtain_color-neutral__copy--color,
-    var(--ks-text-color-default)
-  );
-  --dsa-video-curtain__subheadline--color: var(
-    --dsa-video-curtain_color-neutral__copy--color,
-    var(--ks-text-color-default)
-  );
+.c-visual.dsa-video-curtain--highlight-text .c-visual__box {
+  --c-visual_text--font: var(--dsa-video-curtain_highlight-text__copy--font, var(--ks-font-copy-l));
 }
-.c-visual.dsa-video-curtain--content-bottom {
-  --c-visual_overlay--background: var(
-    --dsa-video-curtain_bottom__overlay--background,
-    linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
-  );
+.c-visual.dsa-video-curtain .c-visual__box {
+  --c-visual_box--background: var(--ks-background-color-default);
+  --c-visual_box--color: var(--ks-color-fg);
+  --c-visual_subheadline--color: var(--ks-text-color-primary);
+  --c-visual_headline--color: var(--ks-color-fg);
 }
-.c-visual.dsa-video-curtain--content-corner {
-  --c-visual_overlay--background: var(
-    --dsa-video-curtain_corner__overlay--background,
-    linear-gradient(40deg, var(--ks-background-color-default) 15%, transparent 50%)
-  );
+@container visual (min-width: 640px) {
+  .c-visual.dsa-video-curtain .c-visual__box {
+    --c-visual_box--max-width: var(--dsa-video-curtain__textbox--max-width, 50rem);
+  }
+}
+
+.c-visual.dsa-video-curtain {
+  --c-visual_overlay--background-size: 100%;
 }
 .c-visual.dsa-video-curtain .c-visual__box {
   --c-visual_box--background: var(--dsa-video-curtain__textbox--background-color, var(--ks-color-bg-alpha-2));
   --c-visual_box--color: var(--dsa-video-curtain__copy--color, var(--ks-text-color-default));
   --c-visual_box--border-radius: var(--dsa-video-curtain__textbox--border-radius, var(--ks-border-radius-surface));
   --c-visual_box--padding: var(--dsa-video-curtain__textbox--padding, var(--ks-spacing-inset-squish-xl));
-  --c-visual_text--font: var(--dsa-video-curtain__copy--font, var(--ks-font-copy-m));
+  --c-visual_text--font: var(--dsa-video-curtain__copy--font, var(--dsa-rich-text--font));
 }
-.c-visual.dsa-video-curtain--highlight-text {
+.c-visual.dsa-video-curtain--highlight-text.c-visual {
   --dsa-video-curtain__copy--font: var(--dsa-video-curtain_highlight-text__box--font, var(--ks-font-copy-l));
 }
-.c-visual.dsa-video-curtain--highlight-text .c-visual__box {
-  --c-visual_text--font: var(--dsa-video-curtain_highlight-text__copy--font, var(--ks-font-copy-l));
-}
-@container visual (min-width: 640px) {
-  .c-visual.dsa-video-curtain .c-visual__box {
-    --c-visual_box--max-width: var(--dsa-video-curtain__textbox--max-width, 50rem);
-  }
+.c-visual.dsa-video-curtain--color-neutral.c-visual {
+  --dsa-video-curtain__copy--color: var(--dsa-video-curtain_color-neutral__copy--color, var(--ks-text-color-default));
+  --dsa-video-curtain__headline--color: var(
+    --dsa-video-curtain_color-neutral__copy--color,
+    var(--ks-text-color-default)
+  );
+  --dsa-video-curtain__subheadline--color: var(
+    --dsa-video-curtain_color-neutral__copy--color,
+    var(--ks-text-color-default)
+  );
 }
 
 .c-visual.dsa-video-curtain .dsa-headline .dsa-headline__headline {
@@ -93,20 +86,4 @@
 .c-visual.dsa-video-curtain .c-visual__box {
   max-width: var(--c-visual_box--max-width);
   padding: var(--c-visual_box--padding);
-}
-.c-visual.dsa-video-curtain .c-visual__box--transparent {
-  padding: 0;
-}
-.c-visual.dsa-video-curtain:not(.dsa-video-curtain--content-bottom) .c-visual__continue-btn {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, -10px);
-}
-.c-visual.dsa-video-curtain:not(.dsa-video-curtain--content-bottom) .c-visual__continue-btn:hover {
-  transform: translate(-50%);
-}
-.c-visual.dsa-video-curtain .c-visual__continue-btn {
-  color: var(--dsa-overlay-text--text-color, var(--ks-color-fg));
-  filter: drop-shadow(var(--dsa-overlay-text--shadow, 0 0 10px var(--ks-color-bg-inverted-alpha-3-base)));
 }

package/dist/components/video-curtain/video-curtain.schema.dereffed.json

@@ -54,10 +54,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"
           }
         },
@@ -113,13 +113,11 @@
       "description": "Choose the alginment of the module content",
       "enum": [
         "center",
-        "bottom",
         "left",
-        "right",
-        "corner"
+        "right"
       ],
       "type": "string",
-      "default": "bottom"
+      "default": "center"
     },
     "type": {
       "const": "video-curtain"

package/dist/components/video-curtain/video-curtain.schema.json

@@ -46,8 +46,8 @@
           "icon": {
             "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/icon"
           },
-          "url": {
-            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/url"
+          "target": {
+            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
           }
         }
       }
@@ -61,9 +61,9 @@
     "textPosition": {
       "title": "Module aligment",
       "description": "Choose the alginment of the module content",
-      "enum": ["center", "bottom", "left", "right", "corner"],
+      "enum": ["center", "left", "right"],
       "type": "string",
-      "default": "bottom"
+      "default": "center"
     }
   },
   "additionalProperties": false