@kickstartds/ds-agency-premium 1.6.71--canary.54.2407.0 → 1.6.71

package/dist/components/gallery/index.js

@@ -3,16 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { TextMedia } from '@kickstartds/base/lib/text-media';
-import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
-const defaults = {
-    "images": [],
-    "layout": "smallTiles",
-    "aspectRatio": "unset",
-    "lightbox": false
-};
-
-const GalleryContextDefault = forwardRef(({ lightbox = false, layout = "smallTiles", aspectRatio = "square", images = [], ...rest }, ref) => {
+const GalleryContextDefault = forwardRef(({ lightbox = false, layout = "tiles", aspectRatio = "square", images = [], ...rest }, ref) => {
     const galleryId = useMemo(() => `gallery-${Date.now()}`, []);
     return (jsx("div", { ...rest, ref: ref, className: `dsa-gallery`, children: jsx("div", { className: classnames(`dsa-gallery__grid`, `dsa-gallery__grid--${layout === "smallTiles"
                 ? "small-tiles"
@@ -42,7 +34,7 @@ const GalleryContextDefault = forwardRef(({ lightbox = false, layout = "smallTil
 const GalleryContext = createContext(GalleryContextDefault);
 const Gallery = forwardRef((props, ref) => {
     const Component = useContext(GalleryContext);
-    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+    return jsx(Component, { ...props, ref: ref });
 });
 Gallery.displayName = "Gallery";
 

package/dist/components/header/header.css

@@ -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-s);
+  --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

@@ -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,153 +113,57 @@
         },
         "additionalProperties": false,
         "required": [
-          "url",
+          "href",
           "label"
         ]
       },
       "examples": [
         [
           {
-            "label": "Strom",
-            "url": "#",
-            "active": true,
-            "items": [
-              {
-                "label": "Level 2 Item",
-                "url": "#"
-              },
-              {
-                "label": "Active Item",
-                "active": true,
-                "url": "#"
-              },
-              {
-                "label": "An Item with a longer Label",
-                "url": "#"
-              },
-              {
-                "label": "And One last one",
-                "url": "#"
-              }
-            ]
+            "label": "Active Item",
+            "href": "#",
+            "active": true
           },
           {
-            "label": "Wasser",
-            "url": "#",
-            "items": [
-              {
-                "label": "Level 2 Item",
-                "url": "#"
-              },
-              {
-                "label": "Active Item",
-                "active": true,
-                "url": "#"
-              },
-              {
-                "label": "An Item with a longer Label",
-                "url": "#"
-              },
-              {
-                "label": "And One last one",
-                "url": "#"
-              }
-            ]
-          },
-          {
-            "label": "Service+",
-            "url": "#",
-            "items": [
-              {
-                "label": "Level 2 Item",
-                "url": "#"
-              },
-              {
-                "label": "Active Item",
-                "active": true,
-                "url": "#"
-              },
-              {
-                "label": "An Item with a longer Label",
-                "url": "#"
-              },
-              {
-                "label": "And One last one",
-                "url": "#"
-              }
-            ]
+            "label": "Navigation Item",
+            "href": "#"
           },
           {
-            "label": "Beratung",
-            "url": "#",
+            "label": "Dropdown",
+            "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": "Ausschreibungen",
-            "url": "#",
-            "items": [
-              {
-                "label": "Level 2 Item",
-                "url": "#"
-              },
-              {
-                "label": "Active Item",
-                "active": true,
-                "url": "#"
-              },
-              {
-                "label": "An Item with a longer Label",
-                "url": "#"
-              },
-              {
-                "label": "And One last one",
-                "url": "#"
-              }
-            ]
+            "label": "One more Item",
+            "href": "#"
           },
           {
-            "label": "Vertrag kündigen",
-            "url": "#",
-            "items": [
-              {
-                "label": "Level 2 Item",
-                "url": "#"
-              },
-              {
-                "label": "Active Item",
-                "active": true,
-                "url": "#"
-              },
-              {
-                "label": "An Item with a longer Label",
-                "url": "#"
-              },
-              {
-                "label": "And One last one",
-                "url": "#"
-              }
-            ]
+            "label": "Last Item",
+            "href": "#"
           }
         ]
       ]
+    },
+    "type": {
+      "const": "header"
     }
   },
   "additionalProperties": false

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

@@ -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

@@ -1,10 +1,9 @@
 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';
 import { Logo } from '../logo/index.js';
-import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '../nav-main/js/NavToggle.client.js';
 import '@kickstartds/core/lib/component';
 import '../nav-main/js/navMainEvents.client.js';
@@ -18,25 +17,14 @@ import '../nav-dropdown/index.js';
 import '../nav-flyout/index.js';
 import '@kickstartds/base/lib/picture';
 
-const defaults = {
-    "logo": {
-        "homepageHref": "/"
-    },
-    "flyoutInverted": false,
-    "dropdownInverted": false,
-    "floating": false,
-    "inverted": false,
-    "navItems": []
-};
-
-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);
-    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+    return jsx(Component, { ...props, ref: ref });
 });
 Header.displayName = "Header";
 

package/dist/components/headline/headline.css

@@ -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.35em;
+  --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);
-  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-regular);
-  --dsa-headline__subheadline--text-transform: none;
-  --dsa-headline__subheadline--letter-spacing: 0;
-  --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: 55%;
+  --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: 65%;
+  --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 {
-  --subheadline--font-size: var(--dsa-headline_h1__subheadline--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);
-  font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
 }
 .dsa-headline--h2 {
-  --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);
-  font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
 }
 .dsa-headline--h3 {
-  --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);
-  font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
 }
 .dsa-headline--h4 {
-  --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);
-  font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
 }
 .dsa-headline--p {
-  --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);
-  font: var(--dsa-headline_p--font, var(--ks-font-copy-m));
 }
 .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/headline/headline.schema.dereffed.json

@@ -78,6 +78,9 @@
       "type": "string",
       "title": "ID",
       "description": "Set a custom id attribute"
+    },
+    "type": {
+      "const": "headline"
     }
   },
   "additionalProperties": false,

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

@@ -1,7 +1,59 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
 import { defaultRenderFn } from "@kickstartds/core/lib/core";
-import { HeadlineProps } from "../../HeadlineProps-e1305784.js";
+/* 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.
+ */
+/**
+ * Text content of headline
+ */
+type Text = string;
+/**
+ * Subheadline content
+ */
+type Sub = string;
+/**
+ * Switch order of headline and subheadline
+ */
+type SwitchOrder = boolean;
+type SectionAlignment = "left" | "center" | "right";
+/**
+ * Level of headline to use
+ */
+type Level = "h1" | "h2" | "h3" | "h4" | "p";
+/**
+ * Style of headline to show
+ */
+type Style = "h1" | "h2" | "h3" | "h4" | "p";
+/**
+ * Whether to display space after headline
+ */
+type SpaceAfter = "minimum" | "small" | "large";
+/**
+ * Set a custom class name
+ */
+type ClassName = string;
+/**
+ * Set a custom id attribute
+ */
+type ID = string;
+/**
+ * Component used for headlines
+ */
+interface HeadlineProps {
+    text: Text;
+    sub?: Sub;
+    switchOrder?: SwitchOrder;
+    align?: SectionAlignment;
+    level: Level;
+    style?: Style;
+    spaceAfter?: SpaceAfter;
+    className?: ClassName;
+    id?: ID;
+}
 interface RenderFunctions {
     renderContent?: typeof defaultRenderFn;
     renderSubheadline?: typeof defaultRenderFn;

package/dist/components/headline/index.js

@@ -4,21 +4,12 @@ import classnames from 'classnames';
 import { forwardRef } from 'react';
 import { compiler } from 'markdown-to-jsx';
 import { HeadlineContext } from '@kickstartds/base/lib/headline';
-import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
-const defaults = {
-    "switchOrder": false,
-    "level": "h2",
-    "style": "h2",
-    "spaceAfter": "small"
-};
-
-const Headline = forwardRef((props, ref) => {
-    const { content, text = content, sub, align = "left", switchOrder = false, level = "h2", 
-    // @ts-expect-error: Some kDS Components set the `styleAs`Props (e.g. https://github.com/kickstartDS/content/blob/next/source/storytelling/StorytellingComponent.tsx#L146)
-    styleAs, style = styleAs || "h2", spaceAfter = "small", className, renderContent = compiler, renderSubheadline = compiler, ...rest } = deepMergeDefaults(defaults, props);
+const Headline = forwardRef(({ content, text = content, sub, align = "left", switchOrder = false, level = "h2", 
+// @ts-expect-error: Some kDS Components set the `styleAs`Props (e.g. https://github.com/kickstartDS/content/blob/next/source/storytelling/StorytellingComponent.tsx#L146)
+styleAs, style = styleAs || "h2", spaceAfter = "small", className, renderContent = compiler, renderSubheadline = compiler, ...props }, ref) => {
     const TagName = level;
-    return text || sub ? (jsxs("header", { className: classnames("dsa-headline", `dsa-headline--${style}`, style !== "none" && style !== level && `dsa-headline--${style}`, `dsa-headline--align-${align}`, spaceAfter && `dsa-headline--space-after-${spaceAfter}`, className), ref: ref, ...rest, children: [sub && switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) })), jsx(TagName, { className: classnames("dsa-headline__headline"), children: jsxs("span", { className: "dsa-headline__inner", children: [renderContent(text), props.id && level === "h2" && (jsx("a", { href: `#${props.id}`, className: "dsa-headline__anchor", "aria-label": "Link to this section", title: "Link to this section", children: "#" }))] }) }), sub && !switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) }))] })) : null;
+    return text || sub ? (jsxs("header", { className: classnames("dsa-headline", `dsa-headline--${style}`, style !== "none" && style !== level && `dsa-headline--${style}`, `dsa-headline--align-${align}`, spaceAfter && `dsa-headline--space-after-${spaceAfter}`, className), ref: ref, ...props, children: [sub && switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) })), jsx(TagName, { className: classnames("dsa-headline__headline"), children: jsxs("span", { className: "dsa-headline__inner", children: [renderContent(text), props.id && level === "h2" && (jsx("a", { href: `#${props.id}`, className: "dsa-headline__anchor", "aria-label": "Link to this section", title: "Link to this section", children: "#" }))] }) }), sub && !switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) }))] })) : null;
 });
 Headline.displayName = "Headline";
 const HeadlineProvider = (props) => (jsx(HeadlineContext.Provider, { ...props, value: Headline }));