@kickstartds/ds-agency-premium 1.3.24 → 1.3.25--canary.523.91aa920.0

package/dist/{HeaderProps-c41aeb76.d.ts → HeaderProps-7a7ece57.d.ts}

@@ -3,10 +3,6 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-/**
- * Add a link to the logo
- */
-type Link = string;
 /**
  * Logo file source
  */
@@ -27,10 +23,6 @@ type Width = number;
  * Height of the picture
  */
 type Height = number;
-/**
- * Toggle the inversion of the logo inside the mobile navigation
- */
-type FlyoutLogoInverted = boolean;
 /**
  * Make the header float over the first Section
  */
@@ -42,7 +34,6 @@ type Inverted = boolean;
 interface HeaderProps {
     logo: Logo;
     logoHref?: string;
-    flyoutLogoInverted?: FlyoutLogoInverted;
     floating?: Floating;
     inverted?: Inverted;
     navItems?: {
@@ -52,11 +43,10 @@ interface HeaderProps {
     }[];
 }
 interface Logo {
-    href?: Link;
     src?: Source;
     srcInverted?: SourceInverted;
     alt?: AltText;
     width?: Width;
     height?: Height;
 }
-export { Link, Source, SourceInverted, AltText, Width, Height, FlyoutLogoInverted, Floating, Inverted, HeaderProps, Logo };
+export { Source, SourceInverted, AltText, Width, Height, Floating, Inverted, HeaderProps, Logo };

package/dist/{SectionProps-93230a76.d.ts → SectionProps-83d399b4.d.ts}

@@ -8,7 +8,7 @@ import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-b05859d6.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-cf82a16d.js";
-import { ImageStoryProps } from "./ImageStoryProps-24e0335c.js";
+import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-58c84ccc.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

package/dist/components/blog-overview/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogOverviewProps } from "../../BlogOverviewProps-f385fc47.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-93230a76.js";
 declare const BlogOverview: {
     ({ latest, more }: BlogOverviewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/blog-post/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogPostProps } from "../../BlogPostProps-e1cbd5d3.js";
+import { BlogPostProps } from "../../BlogPostProps-93230a76.js";
 declare const BlogPost: {
     ({ head, content, aside, cta }: BlogPostProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/button/button.css

@@ -36,6 +36,9 @@
   text-transform: var(--dsa-button--text-transform);
   transition-property: box-shadow, transform, background-color, color, border;
 }
+.dsa-button.c-button .icon {
+  margin-left: var(--ks-spacing-xxs);
+}
 .dsa-button.c-button.c-button--solid {
   --c-button--color: var(--dsa-button_primary--color, var(--dsa-text-color-on-primary));
   --c-button--color-hover: var(--dsa-button_primary--color_hover, var(--dsa-text-color-on-primary));
@@ -84,7 +87,7 @@
   );
   --c-button--background-color-selected: var(
     --dsa-button_secondary--background-color_selected,
-    var(--ks-background-color-clear-interactive-selected)
+    var(--ks-background-color-clear-interactive-selected) ;
   );
 }
 .dsa-button.c-button.c-button--outline {

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

@@ -8,13 +8,6 @@
       "title": "Logo",
       "type": "object",
       "properties": {
-        "href": {
-          "title": "Link",
-          "description": "Add a link to the logo",
-          "type": "string",
-          "format": "uri",
-          "default": "/"
-        },
         "src": {
           "title": "Source",
           "description": "Logo file source",
@@ -64,12 +57,6 @@
       "format": "uri",
       "default": "/"
     },
-    "flyoutLogoInverted": {
-      "type": "boolean",
-      "title": "Flyout Logo Inverted",
-      "description": "Toggle the inversion of the logo inside the mobile navigation",
-      "default": false
-    },
     "floating": {
       "type": "boolean",
       "title": "Floating",

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

@@ -5,14 +5,48 @@
   "type": "object",
   "properties": {
     "logo": {
-      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logo"
+      "title": "Logo",
+      "type": "object",
+      "properties": {
+        "src": {
+          "title": "Source",
+          "description": "Logo file source",
+          "type": "string",
+          "format": "image",
+          "examples": ["logo.svg"]
+        },
+        "srcInverted": {
+          "title": "Source Inverted",
+          "description": "Logo inverted file source",
+          "type": "string",
+          "format": "image",
+          "examples": ["logo-inverted.svg"]
+        },
+        "alt": {
+          "title": "Alt text",
+          "description": "Alt text to display for picture",
+          "type": "string"
+        },
+        "width": {
+          "title": "Width",
+          "description": "Width of the picture",
+          "type": "integer",
+          "minimum": 0,
+          "examples": [300]
+        },
+        "height": {
+          "title": "Height",
+          "description": "Height of the picture",
+          "type": "integer",
+          "minimum": 0,
+          "examples": [300]
+        }
+      },
+      "additionalProperties": false
     },
     "logoHref": {
       "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logoHref"
     },
-    "flyoutLogoInverted": {
-      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/flyoutLogoInverted"
-    },
     "floating": {
       "type": "boolean",
       "title": "Floating",

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

@@ -1,4 +1,4 @@
 import { FC } from "react";
-import { HeaderProps } from "../../HeaderProps-c41aeb76.js";
+import { HeaderProps } from "../../HeaderProps-7a7ece57.js";
 declare const Header: FC<HeaderProps>;
 export { Header };

package/dist/components/header/index.js

@@ -11,7 +11,7 @@ import '../nav-main/js/navMainEvents.client.js';
 import '@kickstartds/core/lib/core';
 import '../nav-main/js/body.client.js';
 
-const Header = ({ logo, logoHref = "/", floating, inverted = false, flyoutLogoInverted = false, navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "dsa-header__content", children: [jsxs(Link, { className: "dsa-header__logo", href: logoHref, children: [jsx(Picture, { className: "dsa-header__logo__img", src: logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: inverted }), jsx(Picture, { className: "dsa-header__logo__img dsa-header__logo__img--inverted", src: logo?.srcInverted || logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: !inverted })] }), jsx(NavMain, { flyoutLogoInverted: flyoutLogoInverted, logo: logo, logoHref: logoHref, items: navItems })] }) }) }));
+const Header = ({ logo, logoHref = "/", floating, inverted = false, navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "dsa-header__content", children: [jsxs(Link, { className: "dsa-header__logo", href: logoHref, children: [jsx(Picture, { className: "dsa-header__logo__img", src: logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: inverted }), jsx(Picture, { className: "dsa-header__logo__img dsa-header__logo__img--inverted", src: logo?.srcInverted || logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: !inverted })] }), jsx(NavMain, { logo: logo, logoHref: logoHref, items: navItems })] }) }) }));
 Header.displayName = "Header";
 
 export { Header };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-24e0335c.js";
+import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.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/index/index.d.ts

@@ -4,7 +4,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "../../SectionProps-93230a76.js";
+import { SectionProps } from "../../SectionProps-83d399b4.js";
 import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
 /* eslint-disable */
 /**
@@ -12,7 +12,7 @@ import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { HeaderProps } from "../../HeaderProps-c41aeb76.js";
+import { HeaderProps } from "../../HeaderProps-7a7ece57.js";
 import { FooterProps } from "../../FooterProps-9f94ed98.js";
 /**
  * Collection of sections (with their contents) to render on the page
@@ -72,6 +72,6 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-e1cbd5d3.js";
-export * from "../../BlogOverviewProps-f385fc47.js";
+export * from "../../BlogPostProps-93230a76.js";
+export * from "../../BlogOverviewProps-93230a76.js";
 export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };

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

@@ -5,52 +5,19 @@ import { FC } from "react";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-/**
- * Add a link to the logo
- */
-type Link = string;
-/**
- * Logo file source
- */
-type Source = string;
-/**
- * Logo inverted file source
- */
-type SourceInverted = string;
-/**
- * Alt text to display for picture
- */
-type AltText = string;
-/**
- * Width of the picture
- */
-type Width = number;
-/**
- * Height of the picture
- */
-type Height = number;
-/**
- * Toggle the inversion of the logo inside the mobile navigation
- */
-type FlyoutLogoInverted = boolean;
+import { PictureProps } from "@kickstartds/base/lib/picture/typing";
 interface NavMainProps {
-    logo: Logo;
+    /**
+     * Referenced component PictureProps
+     */
+    logo: PictureProps;
     logoHref?: string;
-    flyoutLogoInverted?: FlyoutLogoInverted;
     items?: {
         href: string;
         label: string;
         active?: boolean;
     }[];
 }
-interface Logo {
-    href?: Link;
-    src?: Source;
-    srcInverted?: SourceInverted;
-    alt?: AltText;
-    width?: Width;
-    height?: Height;
-}
 declare const NavToggleComponent: FC;
 declare const NavMainItem: FC<{
     label: string;

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

@@ -11,8 +11,8 @@ import '@kickstartds/core/lib/component';
 import './js/body.client.js';
 import '@kickstartds/core/lib/core';
 
-const NavToggleComponent = () => (jsxs("button", { type: "button", className: "dsa-nav-toggle", id: "toggle-sidebar", "aria-controls": "nav-main", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "dsa-nav-toggle__label", children: "toggle navigation" }), jsx("span", { className: "dsa-nav-toggle__icon", children: jsx("span", { className: "dsa-nav-toggle__icon__middle" }) })] }));
-const NavMainItem = ({ label, href, active }) => (jsx("li", { className: classnames("dsa-nav-main__item", active === true ? "dsa-nav-main__item--active" : ""), children: jsx(Link, { className: "dsa-nav-main__link", href: href, children: label }) }));
-const NavMain = ({ logo, items, flyoutLogoInverted, }) => items && items.length > 0 ? (jsxs("div", { className: "dsa-nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { className: classnames("dsa-nav-main", items.some((item) => item.active) ? "dsa-nav-main--active" : ""), id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: [jsxs(Link, { className: "dsa-nav-main__logo", "ks-inverted": flyoutLogoInverted === true ? "true" : "false", href: logo?.href, children: [jsx(Picture, { className: "dsa-nav-main__logo__img", src: logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: flyoutLogoInverted }), jsx(Picture, { className: "dsa-nav-main__logo__img dsa-nav-main__logo__img--inverted", src: logo?.srcInverted || logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: !flyoutLogoInverted })] }), jsx("ul", { className: "dsa-nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] })] })) : null;
+const NavToggleComponent = () => (jsxs("button", { type: "button", className: "nav-toggle", id: "toggle-sidebar", "aria-controls": "nav-main", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "nav-toggle__label", children: "toggle navigation" }), jsx("span", { className: "nav-toggle__icon", children: jsx("span", { className: "nav-toggle__icon__middle" }) })] }));
+const NavMainItem = ({ label, href, active }) => (jsx("li", { className: classnames("nav-main__item", active === true ? "nav-main__item--active" : ""), children: jsx(Link, { className: "nav-main__link", href: href, children: label }) }));
+const NavMain = ({ logo, logoHref = "/", items }) => items && items.length > 0 ? (jsxs("div", { className: "nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { className: classnames("nav-main", items.some((item) => item.active) ? "nav-main--active" : ""), id: "nav-main", "aria-label": "Hauptnavigation", children: [jsx(Link, { className: "nav-main__logo", href: logoHref, children: jsx(Picture, { ...logo }) }), jsx("ul", { className: "nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] })] })) : null;
 
 export { NavMain, NavMainItem, NavToggleComponent };

package/dist/components/nav-main/nav-main.css

@@ -1,4 +1,4 @@
-.dsa-nav-main {
+.nav-main {
   --dsa-nav-main--background: linear-gradient(
     125deg,
     var(--ks-background-color-default),
@@ -17,35 +17,35 @@
   --dsa-nav-main--shadow: 50px 0px 50px 50px rgba(0, 0, 0, 0.539);
 }
 @media (min-width: 62rem) {
-  .dsa-nav-main {
+  .nav-main {
     --dsa-nav-main__link--padding: 0 0.75em;
     --dsa-nav-main__link--font: var(--ks-font-interface-m);
   }
 }
 
-.dsa-nav-main {
+.nav-main {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 }
-.dsa-nav-main--active .dsa-nav-main__item .dsa-nav-main__link {
+.nav-main--active .nav-main__item .nav-main__link {
   color: var(--dsa-nav-main__link--color);
 }
 @media (min-width: 62rem) {
-  .dsa-header--floating .dsa-nav-main--active .dsa-nav-main__item .dsa-nav-main__link {
+  .dsa-header--floating .nav-main--active .nav-main__item .nav-main__link {
     color: var(--dsa-nav-main_floating__link--color);
   }
 }
-.dsa-nav-main--active .dsa-nav-main__item--active .dsa-nav-main__link {
+.nav-main--active .nav-main__item--active .nav-main__link {
   color: var(--dsa-nav-main__link--color_active);
   font-weight: var(--dsa-nav-main__link--font-weight_active);
 }
 @media (min-width: 62rem) {
-  .dsa-header--floating .dsa-nav-main--active .dsa-nav-main__item--active .dsa-nav-main__link {
+  .dsa-header--floating .nav-main--active .nav-main__item--active .nav-main__link {
     color: var(--dsa-nav-main_floating__link--color_active);
   }
 }
-.dsa-nav-main ul {
+.nav-main ul {
   /* critical:start */
   box-sizing: border-box;
   margin: 0;
@@ -53,22 +53,22 @@
   list-style: none;
   /* critical:end */
 }
-.dsa-nav-main ul li {
+.nav-main ul li {
   display: block;
   margin: 0;
 }
-.dsa-nav-main__item {
+.nav-main__item {
   position: relative;
 }
-.dsa-nav-main__list:hover .dsa-nav-main__link {
+.nav-main__list:hover .nav-main__link {
   opacity: var(--dsa-nav-main__link--opacity_hover);
 }
 @media (min-width: 62rem) {
-  .dsa-header--floating .dsa-nav-main__list:hover .dsa-nav-main__link {
+  .dsa-header--floating .nav-main__list:hover .nav-main__link {
     opacity: var(--dsa-nav-main_floating__link--opacity_hover);
   }
 }
-.dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link {
+.nav-main .nav-main__item a.nav-main__link {
   /* critical:start */
   font: var(--dsa-nav-main__link--font);
   font-weight: var(--dsa-nav-main__link--font-weight);
@@ -78,36 +78,26 @@
   padding: var(--dsa-nav-main__link--padding);
   /* critical:end */
 }
-.dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link:hover {
+.nav-main .nav-main__item a.nav-main__link:hover {
   opacity: 1;
   color: var(--dsa-nav-main__link--color_active);
 }
-.dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link:active {
+.nav-main .nav-main__item a.nav-main__link:active {
   color: var(--dsa-nav-main__link--color_active);
 }
-.dsa-nav-main__logo {
-  display: block;
+.nav-main__logo {
   padding: var(--dsa-header--spacing-v) 0;
 }
-.dsa-nav-main__logo__img {
-  height: var(--dsa-header__logo--height);
+.nav-main__logo img {
+  height: var(--dsa-logo--height);
   width: auto;
 }
-[ks-inverted=true] .dsa-nav-main__logo__img {
-  display: none;
-}
-.dsa-nav-main__logo__img--inverted {
-  display: none;
-}
-[ks-inverted=true] .dsa-nav-main__logo__img--inverted {
-  display: block !important;
-}
-.dsa-nav-main__wrap {
+.nav-main__wrap {
   flex-grow: 0;
   flex-shrink: 1;
 }
 @media (max-width: 62rem) {
-  .dsa-nav-main {
+  .nav-main {
     /* critical:start */
     left: -100%;
     /* critical:end */
@@ -127,7 +117,7 @@
     -webkit-overflow-scrolling: touch;
     box-shadow: 20px 0px 30px rgba(0, 0, 0, 0);
   }
-  .dsa-nav-main__item--icon {
+  .nav-main__item--icon {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(100%);
@@ -138,57 +128,57 @@
     white-space: nowrap;
     width: 1px;
   }
-  .overlay-open .dsa-nav-main {
+  .overlay-open .nav-main {
     left: 0;
     box-shadow: var(--dsa-nav-main--shadow);
   }
-  .dsa-nav-main > .dsa-nav-main__logo {
+  .nav-main > .nav-main__logo {
     margin-top: var(--dsa-header--spacing-vertical);
     margin-bottom: var(--dsa-header--spacing-vertical);
   }
-  .dsa-nav-main ul.dsa-nav-main__list {
+  .nav-main ul.nav-main__list {
     padding-top: calc(var(--dsa-header--spacing-vertical) - var(--ks-spacing-s));
   }
-  .dsa-nav-main ul.dsa-nav-main__list .dsa-nav-main--button {
+  .nav-main ul.nav-main__list .nav-main--button {
     margin-left: var(--dsa-header--spacing-horizontal);
     margin-top: var(--dsa-header--spacing-vertical);
   }
-  .dsa-nav-main ul.dsa-nav-main__list .dsa-nav-main--button .button {
+  .nav-main ul.nav-main__list .nav-main--button .button {
     --button--font: var(--ks-font-interface-s);
   }
-  .dsa-nav-main ul.dsa-nav-main__list .dsa-nav-main--button .button .button__content {
+  .nav-main ul.nav-main__list .nav-main--button .button .button__content {
     --button--padding: 0.4rem 1rem;
   }
 }
 @media (min-width: 62rem) {
-  .dsa-nav-main {
+  .nav-main {
     /* critical:start */
     /* critical:end */
   }
-  .dsa-nav-main > .dsa-nav-main__logo {
+  .nav-main > .nav-main__logo {
     display: none;
   }
-  .dsa-nav-main .button--wrapper {
+  .nav-main .button--wrapper {
     margin-left: var(--ks-spacing-inline-xs);
   }
-  .dsa-nav-main__wrap {
+  .nav-main__wrap {
     display: flex;
     align-items: center;
   }
-  .dsa-nav-main__list {
+  .nav-main__list {
     /* critical:start */
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     /* critical:end */
   }
-  .dsa-nav-main__list .dsa-nav-main--button .button {
+  .nav-main__list .nav-main--button .button {
     --button--font: var(--ks-font-interface-s);
   }
-  .dsa-nav-main__list .dsa-nav-main--button .button span {
+  .nav-main__list .nav-main--button .button span {
     font-size: 98%;
   }
-  .dsa-nav-main__item {
+  .nav-main__item {
     /* critical:start */
     flex-shrink: 0;
     /* critical:end */
@@ -196,6 +186,6 @@
   }
 }
 
-.dsa-nav-main-toggle[aria-expanded=true] + .dsa-nav-main {
+.nav-main-toggle[aria-expanded=true] + .nav-main {
   display: block;
 }

package/dist/components/nav-main/nav-main.schema.dereffed.json

@@ -5,33 +5,26 @@
   "type": "object",
   "properties": {
     "logo": {
-      "title": "Logo",
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "$id": "http://schema.kickstartds.com/base/picture.schema.json",
+      "title": "Picture",
+      "description": "Base component to display a picture",
       "type": "object",
       "properties": {
-        "href": {
-          "title": "Link",
-          "description": "Add a link to the logo",
-          "type": "string",
-          "format": "uri",
-          "default": "/"
-        },
         "src": {
           "title": "Source",
-          "description": "Logo file source",
+          "description": "Picture source",
           "type": "string",
           "format": "image",
           "examples": [
-            "logo.svg"
+            "https://picsum.photos/seed/kdspicture/300/300"
           ]
         },
-        "srcInverted": {
-          "title": "Source Inverted",
-          "description": "Logo inverted file source",
+        "srcSet": {
+          "title": "Picture sourceset",
+          "description": "Use a srcSet to display picture",
           "type": "string",
-          "format": "image",
-          "examples": [
-            "logo-inverted.svg"
-          ]
+          "format": "image"
         },
         "alt": {
           "title": "Alt text",
@@ -55,6 +48,78 @@
           "examples": [
             300
           ]
+        },
+        "className": {
+          "title": "Additional Classes",
+          "description": "Add additional css classes that should be applied to the button",
+          "type": "string"
+        },
+        "component": {
+          "title": "`ks-component` attribute",
+          "description": "Optional custom component identifier",
+          "type": "string"
+        },
+        "id": {
+          "title": "Id",
+          "description": "Add id attribute to the image",
+          "type": "string"
+        },
+        "itemProp": {
+          "title": "`itemprop` attribute",
+          "description": "Define an itemprop attribute for the picture",
+          "type": "string"
+        },
+        "style": {
+          "title": "`style` attribute",
+          "description": "Define a style attribute for the picture",
+          "type": "string"
+        },
+        "noscript": {
+          "title": "Noscript",
+          "description": "Render noscript fallback",
+          "type": "boolean",
+          "default": true
+        },
+        "lazy": {
+          "title": "Lazy",
+          "description": "Load the picture lazily",
+          "type": "boolean",
+          "default": true
+        },
+        "sources": {
+          "title": "Sources",
+          "description": "Additional sources. This will result in a `picture`-Element",
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "srcSet": {
+                "title": "Picture sourceset",
+                "description": "Use a srcSet to display picture",
+                "type": "string",
+                "format": "image"
+              },
+              "media": {
+                "title": "TODO MEDIA TITLE",
+                "description": "TODO MEDIA DESCRIPTION",
+                "type": "string"
+              },
+              "type": {
+                "title": "TODO TYPE TITLE",
+                "description": "TODO TYPE DESCRIPTION",
+                "type": "string"
+              }
+            },
+            "additionalProperties": false
+          }
+        },
+        "pictureClassName": {
+          "title": "`class` attribute",
+          "description": "Set additional class(es) to the picture",
+          "type": "string"
+        },
+        "type": {
+          "const": "picture"
         }
       },
       "additionalProperties": false
@@ -64,12 +129,6 @@
       "format": "uri",
       "default": "/"
     },
-    "flyoutLogoInverted": {
-      "type": "boolean",
-      "title": "Flyout Logo Inverted",
-      "description": "Toggle the inversion of the logo inside the mobile navigation",
-      "default": false
-    },
     "items": {
       "type": "array",
       "items": {