@kickstartds/ds-agency-premium 1.7.0--canary.18.1660.0 → 1.7.0--canary.46.1797.0

package/dist/components/html/Html.client.d.ts

@@ -0,0 +1,5 @@
+declare class Html {
+    static identifier: string;
+    constructor(element: any);
+}
+export { Html as default };

package/dist/components/html/Html.client.js

@@ -0,0 +1,41 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+const consentButtonSelector = ".dsa-html__consent-button";
+const copyScriptTag = (original) => {
+    if (original.tagName === "SCRIPT") {
+        const copy = document.createElement("script");
+        for (const attr of original.attributes) {
+            copy.setAttribute(attr.name, attr.value);
+        }
+        copy.textContent = original.textContent;
+        return copy;
+    }
+    return original;
+};
+class Html extends Component {
+    constructor(element) {
+        super(element);
+        const consentButton = element.querySelector(consentButtonSelector);
+        const replaceHtml = () => {
+            const template = element.querySelector("template");
+            if (template) {
+                const elements = [...template.content.children].map(copyScriptTag);
+                element.replaceChildren(...elements);
+                consentButton?.removeEventListener("click", replaceHtml);
+            }
+        };
+        if (consentButton) {
+            consentButton.addEventListener("click", replaceHtml);
+            this.onDisconnect(() => {
+                consentButton.removeEventListener("click", replaceHtml);
+            });
+        }
+        else {
+            replaceHtml();
+        }
+    }
+}
+Html.identifier = "dsa.html";
+define(Html.identifier, Html);
+
+export { Html as default };

package/dist/components/html/html.css

@@ -0,0 +1,52 @@
+.dsa-html {
+  --dsa-html__consent--color: var(--ks-text-color-display);
+  --dsa-html__consent--font: var(--ks-font-copy-m);
+  --dsa-html__consent--font-weight: var(--ks-font-weight-regular);
+  --dsa-html__consent--background: var(--ks-color-fg-inverted-alpha-2);
+}
+
+.dsa-html__consent {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--ks-spacing-stack-s);
+  background-position: center;
+  background-size: cover;
+  padding: var(--ks-spacing-inset-l);
+}
+.dsa-html__consent .c-rich-text {
+  color: var(--dsa-html__consent--color, var(--ks-text-color-display));
+  font: var(--dsa-html__consent--font, var(--ks-font-interface-m));
+  font-weight: var(--dsa-html__consent--font-weight, var(--ks-font-weight-regular));
+  text-align: center;
+}
+.dsa-html__consent:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  background-color: var(--dsa-html__consent--background, var(--ks-color-fg-inverted-alpha-6));
+}
+.dsa-html__consent > * {
+  z-index: 1;
+}
+.dsa-html__consent .l-container {
+  container-type: normal;
+}
+.dsa-html__consent--sixteen-to-nine {
+  aspect-ratio: 16/9;
+}
+.dsa-html__consent--sixteen-to-ten {
+  aspect-ratio: 16/10;
+}
+.dsa-html__consent--four-to-three {
+  aspect-ratio: 4/3;
+}
+.dsa-html__consent--square {
+  aspect-ratio: 1;
+}

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

@@ -0,0 +1,61 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/html.schema.json",
+  "title": "Html",
+  "description": "Display raw HTML.",
+  "type": "object",
+  "properties": {
+    "html": {
+      "title": "HTML string",
+      "type": "string",
+      "examples": [
+        "<p style=\"color: var(--ks-text-color-default);\">Hello World</p>"
+      ]
+    },
+    "consent": {
+      "title": "Show HTML after consent",
+      "type": "boolean",
+      "default": false
+    },
+    "consentText": {
+      "type": "string"
+    },
+    "consentButtonLabel": {
+      "type": "string"
+    },
+    "consentBackgroundImage": {
+      "type": "string",
+      "format": "image"
+    },
+    "consentAspectRatio": {
+      "type": "string",
+      "enum": [
+        "16:9",
+        "16:10",
+        "4:3",
+        "1:1"
+      ],
+      "default": "16:9"
+    },
+    "inverted": {
+      "title": "Inverted",
+      "description": "Invert the colors of the HTML",
+      "type": "boolean",
+      "default": false
+    },
+    "className": {
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the element",
+      "type": "string"
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string"
+    },
+    "type": {
+      "const": "html"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/html/html.schema.json

@@ -1,14 +1,42 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.kickstartds.com/base/html.schema.json",
-  "title": "HTML",
+  "$id": "http://schema.mydesignsystem.com/html.schema.json",
+  "title": "Html",
   "description": "Display raw HTML.",
   "type": "object",
   "properties": {
     "html": {
       "title": "HTML string",
       "type": "string",
-      "examples": ["<p>Hello world!</p>"]
+      "examples": [
+        "<p style=\"color: var(--ks-text-color-default);\">Hello World</p>"
+      ]
+    },
+    "consent": {
+      "title": "Show HTML after consent",
+      "type": "boolean",
+      "default": false
+    },
+    "consentText": {
+      "type": "string"
+    },
+    "consentButtonLabel": {
+      "type": "string"
+    },
+    "consentBackgroundImage": {
+      "type": "string",
+      "format": "image"
+    },
+    "consentAspectRatio": {
+      "type": "string",
+      "enum": ["16:9", "16:10", "4:3", "1:1"],
+      "default": "16:9"
+    },
+    "inverted": {
+      "title": "Inverted",
+      "description": "Invert the colors of the HTML",
+      "type": "boolean",
+      "default": false
     },
     "className": {
       "title": "Additional Classes",

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

@@ -1,29 +1,8 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-/* eslint-disable */
-/**
- * This file was automatically generated by json-schema-to-typescript.
- * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and run `yarn run schema` to regenerate this file.
- */
-type HTMLString = string;
-/**
- * Add additional css classes that should be applied to the element
- */
-type AdditionalClasses = string;
-/**
- * Optional custom component identifier
- */
-type KsComponentAttribute = string;
-/**
- * Display raw HTML.
- */
-interface HTMLProps {
-    html?: HTMLString;
-    className?: AdditionalClasses;
-    component?: KsComponentAttribute;
-}
-declare const HtmlContextDefault: import("react").ForwardRefExoticComponent<HTMLProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-declare const HtmlContext: import("react").Context<import("react").ForwardRefExoticComponent<HTMLProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
-declare const Html: import("react").ForwardRefExoticComponent<HTMLProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+import { HtmlProps } from "../../HtmlProps-9d091769.js";
+declare const HtmlContextDefault: import("react").ForwardRefExoticComponent<HtmlProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const HtmlContext: import("react").Context<import("react").ForwardRefExoticComponent<HtmlProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Html: import("react").ForwardRefExoticComponent<HtmlProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { HtmlProps };
 export { HtmlContextDefault, HtmlContext, Html };

package/dist/components/html/index.js

@@ -1,14 +1,35 @@
-import { jsx } from 'react/jsx-runtime';
+import "./html.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 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-84d80d46.js';
+import '@kickstartds/core/lib/component';
 
-const HtmlContextDefault = forwardRef(({ html, className, component, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: classnames("c-html", className), dangerouslySetInnerHTML: { __html: html }, "ks-component": component, ...props }));
+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
+                        ? `url(${consentBackgroundImage})`
+                        : undefined,
+                }, className: classnames("dsa-html__consent", {
+                    "dsa-html__consent--sixteen-to-nine": consentAspectRatio === "16:9",
+                    "dsa-html__consent--sixteen-to-ten": consentAspectRatio === "16:10",
+                    "dsa-html__consent--four-to-three": consentAspectRatio === "4:3",
+                    "dsa-html__consent--square": consentAspectRatio === "1:1",
+                }), children: [consentText && jsx(RichText, { text: consentText }), jsx(Button, { type: "button", label: consentButtonLabel, className: "dsa-html__consent-button", variant: "primary" })] }))] }));
 });
 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/image-story.css

@@ -12,7 +12,7 @@
   --c-storytelling--vertical-padding: var(--dsa-image-story--vertical-padding, var(--ks-spacing-xl));
 }
 .c-storytelling.dsa-image-story .c-storytelling__box__content {
-  max-width: var(--l-section--content-width-narrow);
+  max-width: var(--dsa-content--width_narrow);
 }
 .c-storytelling.dsa-image-story.c-storytelling--three-to-two img {
   aspect-ratio: 3/2;

package/dist/components/image-story/image-story.schema.dereffed.json

@@ -88,6 +88,7 @@
           },
           "icon": {
             "type": "string",
+            "format": "icon",
             "title": "Icon",
             "description": "Choose an icon"
           },

package/dist/components/image-story/image-story.schema.json

@@ -58,7 +58,11 @@
           "format": "image"
         },
         "aspectRatio": {
-          "$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/aspectRatio"
+          "type": "string",
+          "title": "Aspect Ratio",
+          "description": "The aspect ratio of the image",
+          "enum": ["unset", "square", "wide", "landscape"],
+          "default": "unset"
         },
         "alt": {
           "title": "Alt text",

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

@@ -4,4 +4,5 @@ import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.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>>;
+export type { ImageStoryProps };
 export { ImageStoryContextDefault, ImageStoryContext, ImageStory };

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-84d80d46.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
@@ -32,7 +45,6 @@ const ImageStoryContextDefault = forwardRef(({ headline, largeHeadline = false,
                 text: text,
                 textAlign: textAlign,
                 vAlign: "top",
-                // @ts-expect-error
                 link: { buttons },
                 headline: {
                     text: headline,
@@ -47,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";
 

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

@@ -5,4 +5,5 @@ declare const ImageTextContextDefault: import("react").ForwardRefExoticComponent
 declare const ImageTextContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageTextProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageText: import("react").ForwardRefExoticComponent<ImageTextProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageTextProvider: FC<ImageTextProps & HTMLAttributes<HTMLDivElement>>;
+export type { ImageTextProps };
 export { ImageTextContextDefault, ImageTextContext, ImageText, ImageTextProvider };

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

@@ -4,6 +4,12 @@ import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { TextMediaContextDefault, TextMediaContext } from '@kickstartds/base/lib/text-media';
 import { Container } from '@kickstartds/core/lib/container';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
+
+const defaults = {
+    "highlightText": false,
+    "image": {}
+};
 
 const ImageTextContextDefault = forwardRef(({ text, image, layout, highlightText, ...rest }, ref) => (jsx(Container, { name: "text-media", ref: ref, children: jsx(TextMediaContextDefault, { ...rest, className: classnames(highlightText ? "dsa-image-text--highlight" : "", "dsa-image-text"), text: text, media: [
             {
@@ -19,7 +25,7 @@ const ImageTextContextDefault = forwardRef(({ text, image, layout, highlightText
 const ImageTextContext = createContext(ImageTextContextDefault);
 const ImageText = forwardRef((props, ref) => {
     const Component = useContext(ImageTextContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 ImageText.displayName = "ImageText";
 const ImageTextProvider = (props) => (jsx(TextMediaContext.Provider, { ...props, value: ImageTextContextDefault }));

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

@@ -7,6 +7,10 @@
 import { HeaderProps } from "../../HeaderProps-e22382f1.js";
 import { FooterProps } from "../../FooterProps-171a3067.js";
 import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
+/**
+ * Content of the icon sprite for this project
+ */
+type IconSprite = string;
 /**
  * Abstracts global settings made for a website into JSON Schema
  */
@@ -23,8 +27,9 @@ interface SettingsProps {
      * Referenced component SeoProps
      */
     seo: SeoProps;
+    iconSprite?: IconSprite;
 }
 export * from "../../BlogPostProps-6b3cff22.js";
 export * from "../../BlogOverviewProps-9f207f1c.js";
 export * from "../../PageProps-aa29c554.js";
-export { SettingsProps };
+export { IconSprite, SettingsProps };

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

@@ -4,4 +4,5 @@ import { LogoProps } from "../../LogoProps-01796f0a.js";
 declare const LogoContextDefault: import("react").ForwardRefExoticComponent<LogoProps & ImgHTMLAttributes<HTMLImageElement> & import("react").RefAttributes<HTMLImageElement>>;
 declare const LogoContext: import("react").Context<import("react").ForwardRefExoticComponent<LogoProps & ImgHTMLAttributes<HTMLImageElement> & import("react").RefAttributes<HTMLImageElement>>>;
 declare const Logo: import("react").ForwardRefExoticComponent<LogoProps & ImgHTMLAttributes<HTMLImageElement> & import("react").RefAttributes<HTMLImageElement>>;
+export type { LogoProps };
 export { LogoContextDefault, LogoContext, Logo };

package/dist/components/logo/index.js

@@ -4,6 +4,11 @@ import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
 import { Picture } from '@kickstartds/base/lib/picture';
 import { Link } from '@kickstartds/base/lib/link';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
+
+const defaults = {
+    "homepageHref": "/"
+};
 
 const LogoContextDefault = forwardRef(({ src, srcInverted, alt, inverted = false, width, height, homepageHref, className, }, ref) => {
     return (jsx(Link, { className: classnames("dsa-logo", className), href: homepageHref, children: jsx(Picture, { ref: ref, className: "dsa-logo__img", src: inverted && srcInverted ? srcInverted : src, alt: alt, width: width, height: height }) }));
@@ -11,7 +16,7 @@ const LogoContextDefault = forwardRef(({ src, srcInverted, alt, inverted = false
 const LogoContext = createContext(LogoContextDefault);
 const Logo = forwardRef((props, ref) => {
     const Component = useContext(LogoContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Logo.displayName = "Logo";
 

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

@@ -4,4 +4,5 @@ import { LogosProps } from "../../LogosProps-f9474fe2.js";
 declare const LogosContextDefault: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const LogosContext: import("react").Context<import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Logos: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { LogosProps };
 export { LogosContextDefault, LogosContext, Logos };

package/dist/components/logos/index.js

@@ -6,12 +6,23 @@ import { LogoTiles } from '@kickstartds/content/lib/logo-tiles';
 import { Button } from '@kickstartds/base/lib/button';
 import { Link } from '@kickstartds/base/lib/link';
 import { Container } from '@kickstartds/core/lib/container';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
+
+const defaults = {
+    "logo": [],
+    "align": "center",
+    "cta": {
+        "toggle": false,
+        "link": "#",
+        "style": "text"
+    }
+};
 
 const LogosContextDefault = forwardRef(({ logo: logos = [], tagline, align, cta, logosPerRow = "6", ...rest }, ref) => (jsx("div", { ...rest, ref: ref, children: jsx(Container, { name: "logos", children: jsxs("div", { className: classnames(`dsa-logos dsa-logos--align-${align}`), children: [tagline && jsx("div", { className: "dsa-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`dsa-logo-tiles dsa-logo-tiles--cols-${logosPerRow}`), logos: logos }), cta?.toggle ? (jsxs("div", { className: "dsa-logos__cta", children: [jsxs("div", { className: "dsa-logos__cta__text", children: [cta?.text, cta?.style === "text" ? (jsxs(Fragment, { children: [" ", jsx(Link, { className: "dsa-logos__cta__link", href: cta.link, children: cta.label })] })) : ("")] }), cta?.style === "button" ? (jsx(Button, { href: cta.link, label: cta.label })) : ("")] })) : ("")] }) }) })));
 const LogosContext = createContext(LogosContextDefault);
 const Logos = forwardRef((props, ref) => {
     const Component = useContext(LogosContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Logos.displayName = "Logos";
 

package/dist/components/logos/logos.css

@@ -26,7 +26,7 @@
 .dsa-logos__tagline {
   font: var(--dsa-logos__tagline--font, var(--ks-font-display-m));
   font-weight: var(--dsa-logos__tagline--font-weight, var(--dsa-headline--font-weight));
-  max-width: var(--l-section--content-width-narrow);
+  max-width: var(--dsa-content--width_narrow);
   color: var(--dsa-logos__tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
   width: 100%;
 }
@@ -40,7 +40,7 @@
 }
 .dsa-logos__cta__text {
   color: var(--ks-text-color-default);
-  max-width: var(--l-section--content-width-narrow);
+  max-width: var(--dsa-content--width_narrow);
 }
 .dsa-logos__cta__text, .dsa-logos__cta__link {
   font: var(--ks-font-copy-m);

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

@@ -4,4 +4,5 @@ import { MosaicProps } from "../../MosaicProps-d52c7151.js";
 declare const MosaicContextDefault: import("react").ForwardRefExoticComponent<MosaicProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const MosaicContext: import("react").Context<import("react").ForwardRefExoticComponent<MosaicProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Mosaic: import("react").ForwardRefExoticComponent<MosaicProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { MosaicProps };
 export { MosaicContextDefault, MosaicContext, Mosaic };

package/dist/components/mosaic/index.js

@@ -2,6 +2,13 @@ import "./mosaic.css";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import { Storytelling } from '@kickstartds/content/lib/storytelling';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
+
+const defaults = {
+    "layout": "alternate",
+    "largeHeadlines": false,
+    "tile": []
+};
 
 const MosaicContextDefault = forwardRef(({ layout, largeHeadlines, tile, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: "dsa-mosaic", children: tile.map((tile, index) => (jsx(Storytelling, { full: true, backgroundColor: tile.backgroundColor, backgroundImage: tile.backgroundImage, box: {
             headline: {
@@ -33,7 +40,7 @@ const MosaicContextDefault = forwardRef(({ layout, largeHeadlines, tile, ...rest
 const MosaicContext = createContext(MosaicContextDefault);
 const Mosaic = forwardRef((props, ref) => {
     const Component = useContext(MosaicContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Mosaic.displayName = "Mosaic";
 

package/dist/components/mosaic/mosaic.css

@@ -23,6 +23,9 @@
   font: var(--dsa-mosaic__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
   color: var(--dsa-mosaic__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
 }
+.dsa-mosaic .c-storytelling__box__content {
+  max-width: var(--dsa-content--width_narrow);
+}
 .dsa-mosaic .c-storytelling__box__content[style^=color] .dsa-headline__headline,
 .dsa-mosaic .c-storytelling__box__content[style^=color] .dsa-headline__subheadline {
   color: inherit;

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

@@ -94,6 +94,7 @@
               },
               "icon": {
                 "type": "string",
+                "format": "icon",
                 "title": "Icon",
                 "description": "Choose an icon"
               }

package/dist/components/nav-dropdown/index.d.ts

@@ -19,4 +19,5 @@ interface NavDropdownProps {
     className?: string;
 }
 declare const NavDropdown: FC<NavDropdownProps>;
+export type { NavDropdownProps };
 export { NavDropdown };

package/dist/components/nav-flyout/index.d.ts

@@ -31,4 +31,5 @@ interface NavFlyoutProps {
 declare const NavFlyoutContextDefault: import("react").ForwardRefExoticComponent<NavFlyoutProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 declare const NavFlyoutContext: import("react").Context<import("react").ForwardRefExoticComponent<NavFlyoutProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>>;
 declare const NavFlyout: import("react").ForwardRefExoticComponent<NavFlyoutProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export type { NavFlyoutProps };
 export { NavFlyoutContextDefault, NavFlyoutContext, NavFlyout };

package/dist/components/nav-flyout/index.js

@@ -4,8 +4,14 @@ import classnames from 'classnames';
 import { Link } from '@kickstartds/base/lib/link';
 import { Logo } from '../logo/index.js';
 import { forwardRef, createContext, useContext } from 'react';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
 import '@kickstartds/base/lib/picture';
 
+const defaults = {
+    "items": [],
+    "inverted": false
+};
+
 const NavFlyoutContextDefault = forwardRef(({ items, inverted, logo }, ref) => items && items.length > 0 ? (jsxs("nav", { className: "dsa-nav-flyout", "ks-inverted": inverted.toString(), id: "dsa-nav-flyout", "aria-label": "Hauptnavigation", ref: ref, children: [jsx(Logo, { ...logo, className: "dsa-nav-flyout__logo" }), jsx("ul", { className: "dsa-nav-flyout__list", children: items.map(({ label, href, active, items: subItems }) => {
                 return (jsxs("li", { className: classnames("dsa-nav-flyout__item", active && "dsa-nav-flyout__item--active"), children: [subItems?.length ? (jsx("span", { tabIndex: 0, className: "dsa-nav-flyout__label", children: label })) : (jsx(Link, { href: href, className: `dsa-nav-flyout__label dsa-nav-flyout__link`, children: label })), subItems?.length ? (jsx("ul", { className: "dsa-nav-flyout__sublist", children: subItems.map(({ label, href, active }) => {
                                 return (jsx("li", { className: classnames("dsa-nav-flyout__item", active && "dsa-nav-flyout__item--active"), children: jsx(Link, { href: href, className: `dsa-nav-flyout__label dsa-nav-flyout__link`, children: label }) }, href));
@@ -14,7 +20,7 @@ const NavFlyoutContextDefault = forwardRef(({ items, inverted, logo }, ref) => i
 const NavFlyoutContext = createContext(NavFlyoutContextDefault);
 const NavFlyout = forwardRef((props, ref) => {
     const Component = useContext(NavFlyoutContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 NavFlyout.displayName = "NavFlyout";
 

package/dist/components/nav-main/index.d.ts

@@ -57,4 +57,5 @@ interface CTA {
 declare const NavMainContextDefault: import("react").ForwardRefExoticComponent<NavMainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const NavMainContext: import("react").Context<import("react").ForwardRefExoticComponent<NavMainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const NavMain: import("react").ForwardRefExoticComponent<NavMainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { NavMainProps };
 export { NavMainContextDefault, NavMainContext, NavMain };

package/dist/components/nav-main/index.js

@@ -6,6 +6,7 @@ import './js/navMainEvents.client.js';
 import { NavToggle } from '../nav-toggle/index.js';
 import { NavTopbar } from '../nav-topbar/index.js';
 import { NavFlyout } from '../nav-flyout/index.js';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
 import '@kickstartds/core/lib/component';
 import './js/body.client.js';
 import '@kickstartds/core/lib/core';
@@ -16,11 +17,20 @@ import '../nav-dropdown/index.js';
 import '../logo/index.js';
 import '@kickstartds/base/lib/picture';
 
+const defaults = {
+    "flyoutInverted": false,
+    "dropdownInverted": false,
+    "items": [],
+    "cta": {
+        "toggle": false
+    }
+};
+
 const NavMainContextDefault = forwardRef(({ logo, items, flyoutInverted, dropdownInverted }, ref) => items && items.length > 0 ? (jsxs("div", { ref: ref, className: "dsa-nav-main", children: [jsx(NavToggle, {}), jsx(NavTopbar, { items: items, inverted: dropdownInverted }), jsx(NavFlyout, { items: items, inverted: flyoutInverted, logo: logo })] })) : null);
 const NavMainContext = createContext(NavMainContextDefault);
 const NavMain = forwardRef((props, ref) => {
     const Component = useContext(NavMainContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 NavMain.displayName = "NavMain";
 

package/dist/components/nav-topbar/index.d.ts

@@ -26,4 +26,5 @@ interface NavTopbarProps {
 declare const NavTopbarContextDefault: import("react").ForwardRefExoticComponent<NavTopbarProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 declare const NavTopbarContext: import("react").Context<import("react").ForwardRefExoticComponent<NavTopbarProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>>;
 declare const NavTopbar: import("react").ForwardRefExoticComponent<NavTopbarProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export type { NavTopbarProps };
 export { NavTopbarContextDefault, NavTopbarContext, NavTopbar };