@kickstartds/ds-agency-premium 1.6.71--canary.1933.9f7ec0c.0 → 1.6.71--canary.45.1941.0

package/dist/components/divider/index.js

@@ -3,12 +3,17 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { DividerContextDefault as DividerContextDefault$1, DividerContext as DividerContext$1 } from '@kickstartds/base/lib/divider';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "variant": "default"
+};
 
 const DividerContextDefault = forwardRef(({ variant, className, ...props }, ref) => (jsx(DividerContextDefault$1, { ...props, className: classnames("dsa-divider", className), variant: variant, ref: ref })));
 const DividerContext = createContext(DividerContextDefault);
 const Divider = forwardRef((props, ref) => {
     const Component = useContext(DividerContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Divider.displayName = "Divider";
 const DividerProvider = (props) => (jsx(DividerContext$1.Provider, { ...props, value: DividerContextDefault }));

package/dist/components/event-detail/index.js

@@ -15,6 +15,7 @@ import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';
+import '../../helpers-12f48df8.js';
 import '../text/index.js';
 import '@kickstartds/base/lib/tag-label';
 import '@kickstartds/base/lib/text-media';

package/dist/components/event-header/index.js

@@ -8,6 +8,7 @@ import 'classnames';
 import 'markdown-to-jsx';
 import '@kickstartds/base/lib/headline';
 import '@kickstartds/base/lib/rich-text';
+import '../../helpers-12f48df8.js';
 
 const EventHeaderContextDefault = forwardRef(({ title, categories, intro }, ref) => (jsxs("div", { className: "dsa-event-header", ref: ref, children: [categories && categories.length > 0 && (jsx("div", { className: "dsa-event-header__categories", children: categories.map((category, index) => (jsx(TagLabel, { className: "dsa-event__category", label: category?.label }, index))) })), jsx(Headline, { text: title, level: "h1" }), intro && jsx(Text, { highlightText: true, text: intro })] })));
 const EventHeaderContext = createContext(EventHeaderContextDefault);

package/dist/components/event-list/index.js

@@ -11,6 +11,7 @@ import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';
+import '../../helpers-12f48df8.js';
 import '@kickstartds/form/lib/text-field';
 import '@kickstartds/form/lib/checkbox';
 import '../button/index.js';

package/dist/components/faq/index.js

@@ -2,12 +2,17 @@ import "./faq.css";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import { CollapsibleBox } from '@kickstartds/base/lib/collapsible-box';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "questions": []
+};
 
 const FaqContextDefault = forwardRef(({ questions, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: `dsa-faq`, children: questions.map((question, index) => (jsx(CollapsibleBox, { summary: question.question, text: question.answer }, index))) })));
 const FaqContext = createContext(FaqContextDefault);
 const Faq = forwardRef((props, ref) => {
     const Component = useContext(FaqContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Faq.displayName = "Faq";
 

package/dist/components/feature/index.js

@@ -4,8 +4,21 @@ import classnames from 'classnames';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { Button } from '../button/index.js';
 import { Link } from '@kickstartds/base/lib/link';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/base/lib/button';
 
+const defaults = {
+    "style": "stack",
+    "cta": {
+        "url": "#",
+        "label": "See more",
+        "icon": "arrow-right",
+        "toggle": true,
+        "style": "link"
+    }
+};
+
 const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon, cta, ...rest }, ref) => (jsxs("div", { ...rest, ref: ref, className: classnames(`dsa-feature dsa-feature--${style === `stack`
         ? `stack dsa-feature--large`
         : style === `besideSmall`
@@ -16,11 +29,11 @@ const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon,
                     ? `intext dsa-feature--small`
                     : style === `centered`
                         ? `centered dsa-feature--large`
-                        : `${style}`}`), children: [jsxs("div", { className: "dsa-feature__header", children: [icon && (jsx(Icon, { className: "dsa-feature__icon", icon: icon, role: "presentation", "aria-hidden": true, focusable: false })), jsx("span", { className: "dsa-feature__title", children: title })] }), text || cta.style === "intext" ? (jsxs("p", { className: "dsa-feature__text", children: [text, cta.style === "intext" && cta.toggle ? (jsxs(Fragment, { children: [" ", " ", jsx(Link, { href: cta.url, children: cta.label ? cta.label : "See more" })] })) : ("")] })) : (""), cta.toggle && (cta.style === "link" || cta.style === "button") && (jsx("div", { className: "dsa-feature__cta", children: cta.style === "link" ? (jsxs(Link, { className: "dsa-feature__link", href: cta.url, children: [cta.label ? cta.label : "See more", jsx(Icon, { "aria-hidden": true, role: "presentation", focusable: false, icon: cta.icon || "arrow-right" })] })) : cta.style === "button" ? (jsx(Button, { className: "dsa-feature__button", size: "small", url: cta.url, label: cta.label ? cta.label : "See more" })) : ("") }))] })));
+                        : `${style}`}`), children: [jsxs("div", { className: "dsa-feature__header", children: [icon && (jsx(Icon, { className: "dsa-feature__icon", icon: icon, role: "presentation", "aria-hidden": true, focusable: false })), jsx("span", { className: "dsa-feature__title", children: title })] }), text || cta.style === "intext" ? (jsxs("p", { className: "dsa-feature__text", children: [jsx(RichText, { text: text }), cta.style === "intext" && cta.toggle ? (jsxs(Fragment, { children: [" ", " ", jsx(Link, { href: cta.url, children: cta.label ? cta.label : "See more" })] })) : ("")] })) : (""), cta.toggle && (cta.style === "link" || cta.style === "button") && (jsx("div", { className: "dsa-feature__cta", children: cta.style === "link" ? (jsxs(Link, { className: "dsa-feature__link", href: cta.url, children: [cta.label ? cta.label : "See more", jsx(Icon, { "aria-hidden": true, role: "presentation", focusable: false, icon: cta.icon || "arrow-right" })] })) : cta.style === "button" ? (jsx(Button, { className: "dsa-feature__button", size: "small", url: cta.url, label: cta.label ? cta.label : "See more" })) : ("") }))] })));
 const FeatureContext = createContext(FeatureContextDefault);
 const Feature = forwardRef((props, ref) => {
     const Component = useContext(FeatureContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Feature.displayName = "Feature";
 

package/dist/components/features/features.css

@@ -47,7 +47,8 @@
 }
 .dsa-features .dsa-feature {
   --dsa-feature_large__icon--size: calc(
-    var(--dsa-feature_small__icon--size) * var(--dsa-feature_large__icon--size-multiplier)
+    var(--dsa-feature_small__icon--size) *
+      var(--dsa-feature_large__icon--size-multiplier)
   );
   display: flex;
   position: relative;
@@ -55,17 +56,34 @@
   gap: var(--dsa-feature--gap);
 }
 .dsa-features .dsa-feature--large {
-  --dsa-feature__icon--size: var(--dsa-feature_large__icon--size, calc(var(--ks-font-size-copy-m) * 2.5));
-  --dsa-feature__icon--gap: var(--dsa-feature_large__icon--gap, var(--ks-spacing-xs));
-  --dsa-feature--gap: var(--dsa-feature_large--gap, var(--ks-spacing-stack-s));
+  --dsa-feature__icon--size: var(
+    --dsa-feature_large__icon--size,
+    calc(var(--ks-font-size-copy-m) * 2.5)
+  );
+  --dsa-feature__icon--gap: var(
+    --dsa-feature_large__icon--gap,
+    var(--ks-spacing-xs)
+  );
+  --dsa-feature--gap: var(
+    --dsa-feature_large--gap,
+    var(--ks-spacing-stack-s)
+  );
 }
 .dsa-features .dsa-feature--small {
   --dsa-feature__icon--size: var(
     --dsa-feature_small__icon--size,
-    calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m))
+    calc(
+      var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m)
+    )
+  );
+  --dsa-feature__icon--gap: var(
+    --dsa-feature_small__icon--gap,
+    var(--ks-spacing-xs)
+  );
+  --dsa-feature--gap: var(
+    --dsa-feature_small--gap,
+    var(--ks-spacing-stack-xs)
   );
-  --dsa-feature__icon--gap: var(--dsa-feature_small__icon--gap, var(--ks-spacing-xs));
-  --dsa-feature--gap: var(--dsa-feature_small--gap, var(--ks-spacing-stack-xs));
 }
 .dsa-features .dsa-feature--beside {
   padding-left: calc(var(--dsa-feature__icon--size) + var(--dsa-feature__icon--gap));

package/dist/components/features/index.js

@@ -3,10 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createElement, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { Feature } from '../feature/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/base/lib/icon';
 import '../button/index.js';
 import '@kickstartds/base/lib/button';
 import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/rich-text';
+
+const defaults = {
+    "layout": "largeTiles",
+    "style": "stack",
+    "ctas": {
+        "toggle": true,
+        "style": "link"
+    },
+    "feature": []
+};
 
 const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
     style: "link",
@@ -28,7 +40,7 @@ const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
 const FeaturesContext = createContext(FeaturesContextDefault);
 const Features = forwardRef((props, ref) => {
     const Component = useContext(FeaturesContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Features.displayName = "Features";
 

package/dist/components/footer/footer.css

@@ -1,6 +1,6 @@
 .dsa-footer {
   --dsa-footer--background-color: var(--ks-background-color-default);
-  --dsa-footer--border-top: none;
+  --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
   --dsa-footer--max-width: var(--dsa-content--width_wide);
   --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
   --dsa-footer__byline--font: var(--ks-font-copy-xs);
@@ -8,9 +8,9 @@
   --dsa-footer__links--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
   --dsa-footer__link--font: var(--ks-font-interface-s);
   --dsa-footer__link--font-weight: var(--dsa-link--font-weight);
-  --dsa-footer__link--color: var(--ks-text-color-interface-interactive);
+  --dsa-footer__link--color: var(--dsa-link--color);
   --dsa-footer__link--text-tecoration: none;
-  --dsa-footer__link--text-tecoration_hover: none;
+  --dsa-footer__link--text-tecoration_hover: underline;
   --dsa-footer__logo--height: 1.5rem;
 }
 @media (min-width: 62em) {

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

@@ -107,51 +107,43 @@
       "examples": [
         [
           {
-            "label": "Fahrzeugsuche",
+            "label": "Active Item",
             "url": "#",
             "active": true
           },
           {
-            "label": "Marken",
+            "label": "Navigation Item",
+            "url": "#"
+          },
+          {
+            "label": "Dropdown",
             "url": "#",
             "items": [
               {
-                "label": "Nissan",
+                "label": "Level 2 Item",
                 "url": "#"
               },
               {
-                "label": "Kia",
+                "label": "Active Item",
                 "active": true,
                 "url": "#"
               },
               {
-                "label": "Maserati",
+                "label": "An Item with a longer Label",
                 "url": "#"
               },
               {
-                "label": "Corvette",
+                "label": "And One last one",
                 "url": "#"
               }
             ]
           },
           {
-            "label": "Standorte",
-            "url": "#"
-          },
-          {
-            "label": "Bonusprogramm",
-            "url": "#"
-          },
-          {
-            "label": "News",
-            "url": "#"
-          },
-          {
-            "label": "Jobs",
+            "label": "One more Item",
             "url": "#"
           },
           {
-            "label": "Kontakt",
+            "label": "Last Item",
             "url": "#"
           }
         ]

package/dist/components/footer/index.js

@@ -4,13 +4,23 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { Link } from '@kickstartds/base/lib/link';
 import { Logo } from '../logo/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/base/lib/picture';
 
+const defaults = {
+    "logo": {
+        "homepageHref": "/"
+    },
+    "byline": "© 2024 systemics Inc. All rights reserved.",
+    "inverted": false,
+    "navItems": []
+};
+
 const FooterContextDefault = forwardRef(({ byline, navItems, inverted, logo }, ref) => navItems && navItems.length > 0 ? (jsx("div", { className: classnames("dsa-footer"), "ks-inverted": inverted.toString(), ref: ref, children: jsxs("div", { className: "dsa-footer__content", children: [jsx(Logo, { ...logo, inverted: inverted }), byline && jsx("span", { className: "dsa-footer__byline", children: byline }), navItems.length > 0 ? (jsx("div", { className: "dsa-footer__links", children: navItems.map(({ label, active, ...linkProps }) => (createElement(Link, { ...linkProps, className: "dsa-footer__link", key: linkProps.url + label }, label))) })) : null] }) })) : null);
 const FooterContext = createContext(FooterContextDefault);
 const Footer = forwardRef((props, ref) => {
     const Component = useContext(FooterContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Footer.displayName = "Footer";
 

package/dist/components/gallery/index.js

@@ -3,6 +3,14 @@ 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 galleryId = useMemo(() => `gallery-${Date.now()}`, []);
@@ -34,7 +42,7 @@ const GalleryContextDefault = forwardRef(({ lightbox = false, layout = "smallTil
 const GalleryContext = createContext(GalleryContextDefault);
 const Gallery = forwardRef((props, ref) => {
     const Component = useContext(GalleryContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Gallery.displayName = "Gallery";
 

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

@@ -120,51 +120,43 @@
       "examples": [
         [
           {
-            "label": "Fahrzeugsuche",
+            "label": "Active Item",
             "url": "#",
             "active": true
           },
           {
-            "label": "Marken",
+            "label": "Navigation Item",
+            "url": "#"
+          },
+          {
+            "label": "Dropdown",
             "url": "#",
             "items": [
               {
-                "label": "Nissan",
+                "label": "Level 2 Item",
                 "url": "#"
               },
               {
-                "label": "Kia",
+                "label": "Active Item",
                 "active": true,
                 "url": "#"
               },
               {
-                "label": "Maserati",
+                "label": "An Item with a longer Label",
                 "url": "#"
               },
               {
-                "label": "Corvette",
+                "label": "And One last one",
                 "url": "#"
               }
             ]
           },
           {
-            "label": "Standorte",
-            "url": "#"
-          },
-          {
-            "label": "Bonusprogramm",
-            "url": "#"
-          },
-          {
-            "label": "News",
-            "url": "#"
-          },
-          {
-            "label": "Jobs",
+            "label": "One more Item",
             "url": "#"
           },
           {
-            "label": "Kontakt",
+            "label": "Last Item",
             "url": "#"
           }
         ]

package/dist/components/header/index.js

@@ -4,6 +4,7 @@ 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';
@@ -17,6 +18,17 @@ 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,
@@ -24,7 +36,7 @@ const HeaderContextDefault = forwardRef(({ logo, floating, inverted = false, fly
 const HeaderContext = createContext(HeaderContextDefault);
 const Header = forwardRef((props, ref) => {
     const Component = useContext(HeaderContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Header.displayName = "Header";
 

package/dist/components/headline/headline.css

@@ -2,12 +2,12 @@
   --dsa-headline--color: var(--ks-text-color-display);
   --dsa-headline--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-headline--text-transform: none;
-  --dsa-headline--gap: 0.5em;
+  --dsa-headline--gap: 0.35em;
   --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-to-bg-4);
+  --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;
@@ -64,48 +64,6 @@
   --headline--space-after_small: var(--dsa-headline_h1--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h1--space-after_large);
 }
-.dsa-headline--h1 .dsa-headline__headline:not(:last-child),
-.dsa-headline--h1 .dsa-headline__headline:only-child {
-  display: flex;
-  flex-direction: column;
-}
-.dsa-headline--h1 .dsa-headline__headline:not(:last-child):after,
-.dsa-headline--h1 .dsa-headline__headline:only-child:after {
-  content: "";
-  font-size: inherit;
-  background-color: var(--ks-color-primary);
-  height: 3px;
-  width: 17%;
-  min-width: 5rem;
-  max-width: 10rem;
-  margin-top: var(--dsa-headline--gap);
-}
-.dsa-headline--h1 .dsa-headline__headline:not(:first-child) {
-  display: flex;
-  flex-direction: column;
-}
-.dsa-headline--h1 .dsa-headline__headline:not(:first-child):before {
-  content: "";
-  font-size: inherit;
-  background-color: var(--ks-color-primary);
-  height: 3px;
-  width: 30%;
-  min-width: 3rem;
-  max-width: 4rem;
-  margin-bottom: var(--dsa-headline--gap);
-}
-.dsa-headline--h1.dsa-headline--align-center .dsa-headline__headline,
-.dsa-headline--h1.dsa-headline--align-center .dsa-headline__subheadline {
-  align-items: center;
-}
-.dsa-headline--h1.dsa-headline--align-left .dsa-headline__headline,
-.dsa-headline--h1.dsa-headline--align-left .dsa-headline__subheadline {
-  align-items: flex-start;
-}
-.dsa-headline--h1.dsa-headline--align-right .dsa-headline__headline,
-.dsa-headline--h1.dsa-headline--align-right .dsa-headline__subheadline {
-  align-items: flex-end;
-}
 .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%);

package/dist/components/hero/hero.css

@@ -32,11 +32,6 @@
     var(--ks-color-primary-alpha-5) 0%,
     var(--ks-color-bg-alpha-4) 100%
   );
-  --dsa-hero_corner__overlay--background: linear-gradient(
-    40deg,
-    var(--ks-background-color-default) 15%,
-    transparent 50%
-  );
   --dsa-hero_offset__textbox--max-width: var(--dsa-content--width_default);
   --dsa-hero_offset__textbox--offset: -10%;
   --dsa-hero_offset__overlay--background: linear-gradient(
@@ -133,12 +128,6 @@
 .c-visual.dsa-hero .dsa-headline .dsa-headline__subheadline {
   color: var(--dsa-hero__subheadline--color, var(--dsa-headline__subheadline--color, var(--ks-text-color-primary)));
 }
-.c-visual.dsa-hero--content-corner {
-  --c-visual_overlay--background: var(
-    --dsa-hero_corner__overlay--background,
-    linear-gradient(40deg, var(--ks-background-color-default) 15%, transparent 50%)
-  );
-}
 .c-visual.dsa-hero .c-button-group {
   --c-button-group--vertical-gutter: var(--ks-spacing-stack-m);
   --c-button-group--horizontal-gutter: var(--ks-spacing-inline-m);

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

@@ -175,7 +175,7 @@
         "bottom"
       ],
       "type": "string",
-      "default": "bottom"
+      "default": "below"
     },
     "type": {
       "const": "hero"

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

@@ -95,7 +95,7 @@
         "bottom"
       ],
       "type": "string",
-      "default": "bottom"
+      "default": "below"
     }
   },
   "additionalProperties": false

package/dist/components/hero/index.js

@@ -6,8 +6,24 @@ import classnames from 'classnames';
 import { Container } from '@kickstartds/core/lib/container';
 import { ButtonContext } from '@kickstartds/base/lib/button';
 import { useButtonGroup } from '../button-group/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/base/lib/button-group';
 
+const defaults = {
+    "highlightText": false,
+    "colorNeutral": false,
+    "height": "default",
+    "textbox": true,
+    "invertText": false,
+    "buttons": [],
+    "skipButton": false,
+    "overlay": false,
+    "image": {
+        "indent": "none"
+    },
+    "textPosition": "below"
+};
+
 const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightText, textPosition = "center", colorNeutral, image, overlay, textbox, invertText = false, className, buttons = [], skipButton = false, ...rest }, ref) => {
     const ButtonGroup = useButtonGroup();
     return (jsx(ButtonContext.Provider
@@ -68,7 +84,7 @@ const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightT
 const HeroContext = createContext(HeroContextDefault);
 const Hero = forwardRef((props, ref) => {
     const Component = useContext(HeroContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Hero.displayName = "Hero";
 

package/dist/components/html/index.js

@@ -5,8 +5,15 @@ import classnames from 'classnames';
 import { Button } from '@kickstartds/base/lib/button';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import './Html.client.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/core/lib/component';
 
+const defaults = {
+    "consent": false,
+    "consentAspectRatio": "16:9",
+    "inverted": false
+};
+
 const HtmlContextDefault = forwardRef(({ html, consent, consentText, consentBackgroundImage, consentButtonLabel, consentAspectRatio = "16:9", inverted, className, component = "dsa.html", ...props }, ref) => {
     return (jsxs("div", { ref: ref, className: classnames("dsa-html", className), "ks-component": component, "ks-inverted": inverted ? "true" : undefined, ...props, children: [jsx("template", { dangerouslySetInnerHTML: { __html: html } }), consent && (jsxs("div", { style: {
                     backgroundImage: consentBackgroundImage
@@ -22,7 +29,7 @@ const HtmlContextDefault = forwardRef(({ html, consent, consentText, consentBack
 const HtmlContext = createContext(HtmlContextDefault);
 const Html = forwardRef((props, ref) => {
     const Component = useContext(HtmlContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Html.displayName = "Html";
 

package/dist/components/image-story/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "../../ImageStoryProps-00ddee3a.js";
 declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/image-story/index.js

@@ -5,8 +5,21 @@ import { Storytelling } from '@kickstartds/content/lib/storytelling';
 import { ButtonContext } from '@kickstartds/base/lib/button';
 import classnames from 'classnames';
 import { useButtonGroup } from '../button-group/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/base/lib/button-group';
 
+const defaults = {
+    "largeHeadline": false,
+    "layout": "imageLeft",
+    "padding": false,
+    "buttons": [],
+    "image": {
+        "aspectRatio": "unset",
+        "vAlign": "top"
+    },
+    "textAlign": "left"
+};
+
 const ImageStoryContextDefault = forwardRef(({ headline, largeHeadline = false, sub, image, padding = false, textAlign = "left", layout = "textLeft", buttons = [], text, ...rest }, ref) => {
     const ButtonGroup = useButtonGroup();
     return (jsx(ButtonContext.Provider
@@ -46,7 +59,7 @@ const ImageStoryContextDefault = forwardRef(({ headline, largeHeadline = false,
 const ImageStoryContext = createContext(ImageStoryContextDefault);
 const ImageStory = forwardRef((props, ref) => {
     const Component = useContext(ImageStoryContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 ImageStory.displayName = "ImageStory";