npm - @kickstartds/ds-agency-premium - Versions diffs - 1.6.71--canary.45.1846.0 → 1.7.0--canary.46.1791.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (377) hide show

package/dist/components/header/header.css CHANGED Viewed

@@ -1,25 +1,22 @@
 :root,
 [ks-theme],
 [ks-inverted] {
-  --dsa-header--height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
   --dsa-header--spacing-vertical: var(--ks-spacing-inset-m);
   --dsa-header--spacing-horizontal: var(--ks-spacing-inset-xl);
-  --dsa-header_floating--spacing-horizontal: var(--ks-spacing-inset-l);
-  --dsa-header_open--shadow: 0 0 0 100px var(--ks-color-fg-alpha-3);
 }
 @media (min-width: 62em) {
   :root,
   [ks-theme],
   [ks-inverted] {
-    --dsa-header--spacing-horizontal: var(--dsa-content--horizontal-spacing);
+    --dsa-header--spacing-vertical: var(--ks-spacing-stack-s);
+    --dsa-header--spacing-horizontal: var(--dsa-content--spacing);
   }
 }
 .dsa-header {
-  --dsa-header--max-width: var(--dsa-content--width_wide);
+  --dsa-header--max-width: var(--dsa-content--width_max);
   --dsa-header--background: var(--ks-background-color-default);
-  --dsa-header_floating--background: var(--dsa-overlay-box_opaque--background-color);
-  --dsa-header_floating--backdrop-filter: var(--dsa-overlay-box_opaque--backdrop-filter);
+  --dsa-header_floating--background: linear-gradient(var(--ks-color-bg), transparent);
   --dsa-header__logo--height: var(--dsa-logo--height);
 }
@@ -29,63 +26,23 @@
   width: 100%;
   display: flex;
   padding: var(--dsa-header--spacing-vertical) 0;
-  transition: height var(--ks-transition-collapse);
-  height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
-  justify-content: center;
-}
-.dsa-header--overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 998;
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--ks-color-fg-alpha-3);
-  opacity: 0;
-  transition: opacity var(--ks-transition-fade);
-  pointer-events: none;
-}
-.overlay-open .dsa-header--overlay {
-  opacity: 1;
-}
-.overlay-open .dsa-header {
-  height: 100vh;
+  position: relative;
 }
 .dsa-header--floating {
-  width: calc(100vw - var(--dsa-header_floating--spacing-horizontal) * 2);
-  max-width: calc(var(--dsa-header--max-width) + var(--dsa-header_floating--spacing-horizontal) * 2);
-  top: 10px;
-  padding: var(--dsa-header--spacing-vertical) 0;
-  left: 50%;
-  transform: translate(-50%, 0);
-  background: var(--dsa-header_floating--background, var(--dsa-overlay-box_opaque--background-color));
-  backdrop-filter: var(--dsa-header_floating--backdrop-filter, blur(10px));
+  background: var(--dsa-header_floating--background, linear-gradient(var(--ks-color-bg-alpha-5), transparent));
   position: absolute;
-  border-radius: var(--ks-border-radius-surface);
-}
-.overlay-open .dsa-header--floating {
-  background: var(--dsa-header--background, var(--ks-background-color-default));
-  height: 95%;
 }
 .dsa-header--floating .c-nav-main__link {
   text-shadow: 0 0 10px var(--ks-color-bg-alpha-5);
 }
 .dsa-header__content {
   padding: 0 var(--dsa-header--spacing-horizontal);
-  max-width: calc(var(--dsa-header--max-width) + var(--dsa-header--spacing-horizontal) * 2);
+  max-width: var(--dsa-header--max-width);
   width: 100%;
+  margin: auto;
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-}
-@media (min-width: 62rem) {
-  .dsa-header__content {
-    align-items: center;
-  }
-}
-.dsa-header--floating .dsa-header__content {
-  max-width: calc(var(--dsa-header--max-width) + var(--dsa-header_floating--spacing-horizontal) * 2);
-  padding: 0 var(--dsa-header_floating--spacing-horizontal);
+  align-items: center;
 }
 .dsa-header--spacer {

package/dist/components/header/header.schema.dereffed.json CHANGED Viewed

@@ -81,7 +81,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "url": {
+          "href": {
             "type": "string",
             "format": "uri"
           },
@@ -96,7 +96,7 @@
             "items": {
               "type": "object",
               "properties": {
-                "url": {
+                "href": {
                   "type": "string",
                   "format": "uri"
                 },
@@ -113,7 +113,7 @@
         },
         "additionalProperties": false,
         "required": [
-          "url",
+          "href",
           "label"
         ]
       },
@@ -121,43 +121,43 @@
         [
           {
             "label": "Active Item",
-            "url": "#",
+            "href": "#",
             "active": true
           },
           {
             "label": "Navigation Item",
-            "url": "#"
+            "href": "#"
           },
           {
             "label": "Dropdown",
-            "url": "#",
+            "href": "#",
             "items": [
               {
                 "label": "Level 2 Item",
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "Active Item",
                 "active": true,
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "An Item with a longer Label",
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "And One last one",
-                "url": "#"
+                "href": "#"
               }
             ]
           },
           {
             "label": "One more Item",
-            "url": "#"
+            "href": "#"
           },
           {
             "label": "Last Item",
-            "url": "#"
+            "href": "#"
           }
         ]
       ]

package/dist/components/header/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { HeaderProps } from "../../HeaderProps-72763967.js";
+import { HeaderProps } from "../../HeaderProps-e22382f1.js";
 declare const HeaderContextDefault: import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 declare const HeaderContext: import("react").Context<import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>>;
 declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/components/header/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import "./header.css";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
 import { NavMain } from '../nav-main/index.js';
@@ -17,10 +17,10 @@ import '../nav-dropdown/index.js';
 import '../nav-flyout/index.js';
 import '@kickstartds/base/lib/picture';
-const HeaderContextDefault = forwardRef(({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }, ref) => (jsxs(Fragment, { children: [jsx("header", { className: classnames("dsa-header", floating && `dsa-header--floating`), "ks-inverted": inverted.toString(), ref: ref, children: jsxs("div", { className: "dsa-header__content", children: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, dropdownInverted: dropdownInverted, items: navItems, logo: {
-                            ...logo,
-                            inverted: flyoutInverted,
-                        } })] }) }), floating && jsx("div", { className: "dsa-header--overlay" })] })));
+const HeaderContextDefault = forwardRef(({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }, ref) => (jsx("header", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), ref: ref, children: jsxs("div", { className: "dsa-header__content", children: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, dropdownInverted: dropdownInverted, items: navItems, logo: {
+                    ...logo,
+                    inverted: flyoutInverted,
+                } })] }) })));
 const HeaderContext = createContext(HeaderContextDefault);
 const Header = forwardRef((props, ref) => {
     const Component = useContext(HeaderContext);

package/dist/components/headline/headline.css CHANGED Viewed

@@ -1,42 +1,50 @@
 :root, [ks-inverted], [ks-theme] {
   --dsa-headline--color: var(--ks-text-color-display);
-  --dsa-headline--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-headline--font-weight: var(--ks-font-weight-medium);
   --dsa-headline--text-transform: none;
   --dsa-headline--gap: 0.25em;
   --dsa-headline--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline--space-after_small: var(--ks-spacing-stack-m);
   --dsa-headline--space-after_minimum: var(--ks-spacing-stack-s);
   --dsa-headline--higlight-background: var(--dsa-typo--highlight);
-  --dsa-headline__subheadline--color: var(--ks-color-fg-alpha-4);
-  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-bold);
-  --dsa-headline__subheadline--text-transform: uppercase;
-  --dsa-headline__subheadline--letter-spacing: 0.045em;
-  --dsa-headline__subheadline--font-family: var(--ks-font-family-display);
+  --dsa-headline__subheadline--color: var(--ks-text-color-primary);
+  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-headline_h1--font: var(--ks-font-display-xxl);
-  --dsa-headline_h1__subheadline--font-size: 50%;
+  --dsa-headline_h1__subheadline--font: var(--ks-font-copy-l);
   --dsa-headline_h1--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline_h1--space-after_small: var(--ks-spacing-stack-m);
   --dsa-headline_h1--space-after_minimum: var(--ks-spacing-stack-s);
   --dsa-headline_h2--font: var(--ks-font-display-xl);
-  --dsa-headline_h2__subheadline--font-size: 50%;
+  --dsa-headline_h2__subheadline--font: var(--ks-font-copy-m);
   --dsa-headline_h2--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline_h2--space-after_small: var(--ks-spacing-stack-m);
-  --dsa-headline_h2--space-after_minimum: 0;
+  --dsa-headline_h2--space-after_minimum: var(--ks-spacing-stack-s);
   --dsa-headline_h3--font: var(--ks-font-display-l);
-  --dsa-headline_h3__subheadline--font-size: 50%;
+  --dsa-headline_h3__subheadline--font: var(--ks-font-copy-m);
   --dsa-headline_h3--space-after_large: var(--ks-spacing-stack-m);
   --dsa-headline_h3--space-after_small: var(--ks-spacing-stack-s);
-  --dsa-headline_h3--space-after_minimum: 0;
+  --dsa-headline_h3--space-after_minimum: var(--ks-spacing-stack-xs);
   --dsa-headline_h4--font: var(--ks-font-display-m);
-  --dsa-headline_h4__subheadline--font-size: 75%;
+  --dsa-headline_h4__subheadline--font: var(--ks-font-copy-s);
   --dsa-headline_h4--space-after_large: var(--ks-spacing-stack-m);
   --dsa-headline_h4--space-after_small: var(--ks-spacing-stack-s);
-  --dsa-headline_h4--space-after_minimum: 0;
+  --dsa-headline_h4--space-after_minimum: var(--ks-spacing-stack-xs);
   --dsa-headline_p--font: var(--ks-font-copy-m);
-  --dsa-headline_p__subheadline--font-size: 75%;
+  --dsa-headline__subheadline_p--font: var(--ks-font-copy-s);
+  --dsa-headline_p__subheadline--font: var(--ks-font-copy-s);
   --dsa-headline_p--space-after_large: var(--ks-spacing-stack-xs);
   --dsa-headline_p--space-after_small: var(--ks-spacing-xxs);
-  --dsa-headline_p--space-after_minimum: 0;
+  --dsa-headline_p--space-after_minimum: none;
+}
+@media (min-width: 48em) {
+  :root, [ks-inverted], [ks-theme] {
+    --dsa-headline_h1__subheadline--font: var(--ks-font-copy-xl);
+  }
+}
+@media (min-width: 48em) {
+  :root, [ks-inverted], [ks-theme] {
+    --dsa-headline_h2__subheadline--font: var(--ks-font-copy-l);
+  }
 }
 .dsa-headline {
@@ -57,57 +65,57 @@
 .dsa-headline:hover .dsa-headline__anchor {
   visibility: visible;
 }
+.dsa-headline .dsa-headline__headline {
+  font: var(--headline--font);
+  text-transform: var(--dsa-headline--text-transform);
+}
 .dsa-headline--h1 {
-  font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
-  --subheadline--font-size: var(--dsa-headline_h1--font-size, 50%);
+  --headline--font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
+  --subheadline--font: var(--dsa-headline_h1__subheadline--font, var(--ks-font-copy-xl));
   --headline--space-after_minimum: var(--dsa-headline_h1--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h1--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h1--space-after_large);
 }
 .dsa-headline--h2 {
-  font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
-  --subheadline--font-size: var(--dsa-headline_h2__subheadline--font-size, 50%);
+  --headline--font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
+  --subheadline--font: var(--dsa-headline_h2__subheadline--font, var(--ks-font-copy-l));
   --headline--space-after_minimum: var(--dsa-headline_h2--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h2--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h2--space-after_large);
 }
 .dsa-headline--h3 {
-  font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
-  --subheadline--font-size: var(--dsa-headline_h3__subheadline--font-size, 50%);
+  --headline--font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
+  --subheadline--font: var(--dsa-headline_h3__subheadline--font, var(--ks-font-copy-l));
   --headline--space-after_minimum: var(--dsa-headline_h3--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h3--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h3--space-after_large);
 }
 .dsa-headline--h4 {
-  font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
-  --subheadline--font-size: var(--dsa-headline_h4__subheadline--font-size, 75%);
+  --headline--font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
+  --subheadline--font: var(--dsa-headline_h4__subheadline--font, var(--ks-font-copy-m));
   --headline--space-after_minimum: var(--dsa-headline_h4--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h4--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h4--space-after_large);
 }
 .dsa-headline--p {
-  font: var(--dsa-headline_p--font, var(--ks-font-copy-m));
-  --subheadline--font-size: var(--dsa-headline_p__subheadline--font-size, 75%);
+  --headline--font: var(--dsa-headline_p--font, var(--ks-font-copy-m));
+  --subheadline--font: var(--dsa-headline_p__subheadline--font, var(--ks-font-copy-s));
   --headline--space-after_minimum: var(--dsa-headline_p--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_p--space-after_small);
   --headline--space-after_large: var(--dsa-headline_p--space-after_large);
 }
 .dsa-headline .dsa-headline__headline {
+  font: var(--headline--font);
   color: var(--dsa-headline--color, var(--ks-text-color-display));
-  font: inherit;
   font-weight: var(--dsa-headline--font-weight);
-  text-transform: var(--dsa-headline--text-transform);
   margin: 0;
 }
 .dsa-headline .dsa-headline__subheadline {
-  font-family: var(--dsa-headline__subheadline--font-family);
-  font-size: var(--subheadline--font-size, 50%);
+  font: var(--subheadline--font);
   margin: 0;
   max-width: var(--dsa-content--width_default);
   color: var(--dsa-headline__subheadline--color, var(--ks-text-color-primary));
-  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-bold));
-  text-transform: var(--dsa-headline__subheadline--text-transform, none);
-  letter-spacing: var(--dsa-headline__subheadline--letter-spacing, 0);
+  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-semi-bold));
 }
 .dsa-headline--space-after-minimum {
   margin-bottom: var(--headline--space-after_minimum);

package/dist/components/hero/hero.css CHANGED Viewed

@@ -1,6 +1,6 @@
-.l-container--hero {
+.l-container--visual {
   /* stylelint-disable-next-line property-no-unknown */
-  container-name: hero;
+  container-name: visual;
 }
 .dsa-hero {
@@ -11,57 +11,37 @@
   --dsa-hero_color-neutral__headline--color: var(--ks-text-color-default);
   --dsa-hero_color-neutral__subheadline--color: var(--ks-text-color-default);
   --dsa-hero__copy--color: var(--ks-text-color-default);
-  --dsa-hero__copy--font: var(--ks-font-copy-m);
+  --dsa-hero__copy--font: var(--dsa-rich-text--font);
   --dsa-hero_highlight-text__copy--font: var(--ks-font-copy-l);
   --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
-  --dsa-hero__textbox--background-color: var(--dsa-overlay-box_transparent--background-color);
-  --dsa-hero__textbox--backdrop-filter: var(--dsa-overlay-box_transparent--backdrop-filter);
-  --dsa-hero__textbox--box-shadow: none;
-  --dsa-hero__textbox--border-radius: var(--ks-border-radius-card);
+  --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
+  --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
   --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
-  --dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
   --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-hero__overlay--background: radial-gradient(
-    50% 125% at 100% 0%,
-    var(--ks-color-primary-alpha-5) 0%,
-    var(--ks-color-bg-alpha-4) 100%
-  );
-  --dsa-hero--below__overlay--background: linear-gradient(
-    0deg,
-    var(--ks-background-color-default) 15%,
-    transparent 50%
-  );
-  --dsa-hero--left__overlay--background: radial-gradient(
-    var(--dsa-hero__textbox--max-width) var(--dsa-hero__textbox--max-width) at
-      calc(var(--dsa-section__content--padding) * 2) 50%,
-    var(--ks-color-bg) 100%,
-    var(--ks-color-primary-alpha-5) 100%
-  );
-}
-@container hero (min-width: 640px) {
+  --dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
+}
+@container visual (min-width: 640px) {
   .dsa-hero {
     --dsa-hero--min-height: 21rem;
     --dsa-hero--min-height_small: 13.35rem;
-    --dsa-hero__textbox--max-width: 50vw;
   }
 }
-@container hero (min-width: 960px) {
+@container visual (min-width: 960px) {
   .dsa-hero {
     --dsa-hero--min-height: 31.5rem;
     --dsa-hero--min-height_small: 15.8rem;
   }
 }
-@container hero (min-width: 1024px) {
+@container visual (min-width: 1024px) {
   .dsa-hero {
-    --dsa-hero--min-height: 42rem;
+    --dsa-hero--min-height: 35rem;
     --dsa-hero--min-height_small: 20rem;
-    --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
   }
 }
-.l-container--hero {
+.l-container--visual {
   /* stylelint-disable-next-line property-no-unknown */
-  container-name: hero;
+  container-name: visual;
 }
 .c-visual.dsa-hero {
@@ -70,14 +50,11 @@
   min-height: var(--dsa-hero--min-height);
 }
 .c-visual.dsa-hero .c-visual__box {
-  --c-visual_box--background: var(
-    --dsa-hero__textbox--background-color,
-    var(--dsa-overlay-box_transparent--background-color)
-  );
+  --c-visual_box--background: var(--dsa-hero__textbox--background-color, var(--ks-color-bg-alpha-2));
   --c-visual_box--color: var(--dsa-hero__copy--color, var(--ks-text-color-default));
-  --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-card));
+  --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-surface));
   --c-visual_box--padding: var(--dsa-hero__textbox--padding, var(--ks-spacing-inset-squish-xl));
-  --c-visual_text--font: var(--dsa-hero__copy--font, var(--ks-font-copy-m));
+  --c-visual_text--font: var(--dsa-hero__copy--font, var(--dsa-rich-text--font));
 }
 .c-visual.dsa-hero--highlight-text.c-visual {
   --dsa-hero__copy--font: var(--dsa-hero_highlight-text__copy--font, var(--ks-font-copy-l));
@@ -90,32 +67,23 @@
 .c-visual.dsa-hero.c-visual--small {
   min-height: var(--dsa-hero--min-height_small);
 }
-@container hero (min-width: 640px) {
+@container visual (min-width: 640px) {
   .c-visual.dsa-hero {
-    --c-visual_overlay--background: var(
-      --dsa-hero__overlay--background,
-      radial-gradient(50% 125% at 100% 0%, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-bg-alpha-4) 100%)
+    --c-visual_overlay--background: radial-gradient(
+      50% 125% at 100% 0%,
+      var(--ks-color-primary-alpha-5) 0%,
+      var(--ks-color-bg-alpha-5) 100%
     );
   }
   .c-visual.dsa-hero.dsa-hero--content-below {
     --c-visual_overlay--background: var(
-      --dsa-hero--below__overlay--background,
-      linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
-    );
-  }
-  .c-visual.dsa-hero.dsa-hero--content-left {
-    --c-visual_overlay--background: var(
-      --dsa-hero--left__overlay--background,
+      --dsa-hero__overlay--background,
       linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
     );
   }
   .c-visual.dsa-hero .c-visual__box {
     --c-visual_box--max-width: var(--dsa-hero__textbox--max-width, var(--dsa-content--width_narrow));
   }
-  .c-visual.dsa-hero .c-visual__box:not(.c-visual__box--transparent) {
-    backdrop-filter: var(--dsa-hero__textbox--backdrop-filter, var(--dsa-overlay-box_transparent--backdrop-filter));
-    box-shadow: var(--dsa-hero__textbox--box-shadow, var(--ks-box-shadow-card));
-  }
 }
 .c-visual.dsa-hero .dsa-headline .dsa-headline__headline {
@@ -138,11 +106,7 @@
 .c-visual.dsa-hero .c-visual__content--indent {
   max-width: var(--dsa-content--width_wide);
 }
-.c-visual.dsa-hero .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)));
-}
-@container hero (min-width: 640px) {
+@container visual (min-width: 640px) {
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
     position: relative;
   }
@@ -150,17 +114,17 @@
     height: var(--c-visual--min-height);
   }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content {
-    padding: 0 var(--dsa-content--horizontal-spacing);
+    padding: 0 var(--dsa-content--spacing);
     margin-top: -10%;
     position: relative;
   }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
-    --c-visual_box--max-width: var(--dsa-hero_below__textbox--max-width, var(--dsa-content--width_default));
+    --c-visual_box--max-width: var(--dsa-content--width_default);
   }
   .c-visual.dsa-hero.c-visual--no-crop {
     --c-visual--min-height: 0;
   }
-  @container hero (min-width: 640px) {
+  @container visual (min-width: 640px) {
     .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
       height: fit-content;
     }
@@ -172,7 +136,7 @@
   .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full {
     height: fit-content;
   }
-  @container hero (min-width: 640px) {
+  @container visual (min-width: 640px) {
     .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image {
       height: fit-content;
     }

package/dist/components/hero/hero.schema.dereffed.json CHANGED Viewed

@@ -71,10 +71,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"
           }
         },
@@ -161,13 +161,7 @@
         "corner"
       ],
       "type": "string",
-      "default": "bottom"
-    },
-    "inverted": {
-      "type": "boolean",
-      "title": "Inverted",
-      "description": "Inverted color scheme for the box",
-      "default": false
+      "default": "below"
     },
     "type": {
       "const": "hero"

package/dist/components/hero/hero.schema.json CHANGED Viewed

@@ -58,8 +58,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"
           }
         }
       }
@@ -75,13 +75,7 @@
       "description": "Choose the alginment of the module content",
       "enum": ["center", "below", "left", "right", "corner"],
       "type": "string",
-      "default": "bottom"
-    },
-    "inverted": {
-      "type": "boolean",
-      "title": "Inverted",
-      "description": "Inverted color scheme for the box",
-      "default": false
+      "default": "below"
     }
   },
   "additionalProperties": false

package/dist/components/hero/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { HeroProps } from "../../HeroProps-40f6c7f5.js";
+import { HeroProps } from "../../HeroProps-f704d270.js";
 declare const HeroContextDefault: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const HeroContext: import("react").Context<import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Hero: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;