@kickstartds/ds-agency-premium 1.4.0--canary.12.465.0 → 1.4.0--canary.14.680.0

package/dist/components/{nav-main → nav-toggle}/nav-toggle.css

@@ -1,4 +1,4 @@
-.nav-toggle {
+.dsa-nav-toggle {
   --nav-toggle--color: var(--ks-text-color-default);
   --nav-toggle--color_open: var(--ks-text-color-default);
   --nav-toggle_floating--color: var(--ks-text-color-interface-interactive);
@@ -9,7 +9,7 @@ html.overlay-open {
   overflow: hidden;
 }
 
-button.nav-toggle {
+button.dsa-nav-toggle {
   display: block;
   position: relative;
   right: 0;
@@ -18,19 +18,19 @@ button.nav-toggle {
   z-index: 1;
   padding: 0 var(--dsa-header--spacing-horizontal);
   transform: translateX(var(--dsa-header--spacing-horizontal));
-  --nav-toggle__icon-bar--offset: 14px;
+  --nav-toggle__icon-bar--offset: 16px;
 }
-@media (min-width: 42em) {
-  button.nav-toggle {
+@media (min-width: 48em) {
+  button.dsa-nav-toggle {
     --nav-toggle__icon-bar--offset: 18px;
   }
 }
 @media (min-width: 62em) {
-  button.nav-toggle {
+  button.dsa-nav-toggle {
     display: none;
   }
 }
-button.nav-toggle .nav-toggle__label {
+button.dsa-nav-toggle .dsa-nav-toggle__label {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(100%);
@@ -41,7 +41,7 @@ button.nav-toggle .nav-toggle__label {
   white-space: nowrap;
   width: 1px;
 }
-button.nav-toggle .nav-toggle__icon {
+button.dsa-nav-toggle .dsa-nav-toggle__icon {
   position: relative;
   display: block;
   cursor: pointer;
@@ -51,53 +51,53 @@ button.nav-toggle .nav-toggle__icon {
   transition: inherit;
   color: var(--nav-toggle--color);
 }
-.dsa-header--floating button.nav-toggle .nav-toggle__icon {
+.dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle_floating--color);
 }
-@media (min-width: 40rem) {
-  button.nav-toggle .nav-toggle__icon {
+@media (min-width: 40em) {
+  button.dsa-nav-toggle .dsa-nav-toggle__icon {
     transform: scale(0.8) translate(2.5%, 2.5%);
   }
 }
-.overlay-open button.nav-toggle .nav-toggle__icon, .overlay-open .header-is-scrolling button.nav-toggle .nav-toggle__icon {
+.overlay-open button.dsa-nav-toggle .dsa-nav-toggle__icon, .overlay-open .header-is-scrolling button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle--color_open);
 }
-.overlay-open .dsa-header--floating button.nav-toggle .nav-toggle__icon, .overlay-open .header-is-scrolling .dsa-header--floating button.nav-toggle .nav-toggle__icon {
+.overlay-open .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon, .overlay-open .header-is-scrolling .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle_floating--color_open);
 }
-.header-is-scrolling-up button.nav-toggle .nav-toggle__icon {
+.header-is-scrolling-up button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle--color_open);
 }
-button.nav-toggle .nav-toggle__icon::before, button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::before, button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   content: "";
 }
-button.nav-toggle .nav-toggle__icon .nav-toggle__icon__middle, button.nav-toggle .nav-toggle__icon::before, button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon .dsa-nav-toggle__icon__middle, button.dsa-nav-toggle .dsa-nav-toggle__icon::before, button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   position: absolute;
   width: 100%;
   height: 3px;
   background-color: currentColor;
 }
-button.nav-toggle .nav-toggle__icon .nav-toggle__icon__middle {
+button.dsa-nav-toggle .dsa-nav-toggle__icon .dsa-nav-toggle__icon__middle {
   top: 50%;
   margin-top: -1.5px;
 }
-button.nav-toggle .nav-toggle__icon::before {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::before {
   top: 2px;
   transition: top 150ms ease 150ms, transform ease 150ms;
 }
-button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   bottom: 2px;
   transition: bottom 150ms ease 150ms, transform ease 150ms;
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon__middle {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon__middle {
   display: none;
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon::before {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon::before {
   top: var(--nav-toggle__icon-bar--offset);
   transition: top ease 150ms, transform 150ms ease 150ms;
   transform: rotate(-45deg);
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon::after {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon::after {
   bottom: var(--nav-toggle__icon-bar--offset);
   transition: bottom ease 150ms, transform 150ms ease 150ms;
   transform: rotate(45deg);

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const NavTopbar: ({ items, dropdownInverted }: {
+    items: any;
+    dropdownInverted: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export { NavTopbar };

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

@@ -0,0 +1,14 @@
+import "./nav-topbar.css";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Link } from '@kickstartds/base/lib/link';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { NavDropdown } from '../nav-dropdown/index.js';
+
+const NavTopbar = ({ items, dropdownInverted }) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: jsx("ul", { className: "dsa-nav-topbar__list", children: items.map(({ label, href, id, active, items: subItems }) => {
+            const isActive = active === href ||
+                subItems?.some((navItem) => active === navItem.href);
+            return (jsxs("li", { className: classnames("dsa-nav-topbar__item", isActive && "dsa-nav-topbar__item--active", active && "dsa-nav-topbar__item--active", subItems?.length && "dsa-nav-topbar__item--dropdown"), children: [subItems?.length ? (jsxs("span", { tabIndex: 0, className: "dsa-nav-topbar__label", children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-topbar__label__icon", icon: "chevron-down" })) : ("")] })) : (jsx(Link, { href: href, className: `dsa-nav-topbar__label dsa-nav-topbar__link`, children: label })), subItems?.length ? (jsx(NavDropdown, { items: subItems, inverted: dropdownInverted })) : null] }, id));
+        }) }) })) : null;
+
+export { NavTopbar };

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

@@ -0,0 +1,95 @@
+.dsa-nav-topbar {
+  --dsa-nav-topbar__label--color: var(--ks-color-fg);
+  --dsa-nav-topbar__label--color_hover: var(--ks-text-color-interface-interactive-hover);
+  --dsa-nav-topbar__label--color_active: var(--ks-text-color-interface-interactive-active);
+  --dsa-nav-topbar__label--font: var(--ks-font-interface-m);
+  --dsa-nav-topbar__label--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-nav-topbar__label--font-weight_active: var(--ks-font-weight-bold);
+  --dsa-nav-topbar__label--padding: 0.75em 0.75em;
+  --dsa-nav-topbar__label_dimmed--opacity: 0.6;
+  --dsa-nav-topbar__label__icon--size: 1.5em;
+  --dsa-nav-topbar_floating__label_dimmed--opacity: 0.75;
+  --dsa-nav-topbar_floating__label--color: var(--ks-color-fg);
+}
+
+.dsa-nav-topbar {
+  display: none;
+  --g-link--text-decoration: none;
+  --g-link--text-decoration_hover: none;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+@media (min-width: 62rem) {
+  .dsa-nav-topbar {
+    display: flex;
+  }
+}
+.dsa-nav-topbar ul {
+  list-style: none;
+}
+.dsa-nav-topbar .dsa-nav-topbar__list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+}
+.dsa-nav-topbar .dsa-nav-topbar__list > ul.dsa-nav-main__list {
+  display: none;
+}
+.dsa-nav-topbar .dsa-nav-topbar__list:hover .dsa-nav-topbar__item:not(:hover, .dsa-nav-topbar__item--active) .dsa-nav-topbar__label {
+  opacity: var(--dsa-nav-topbar__label_dimmed--opacity);
+}
+.dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__list:hover .dsa-nav-topbar__item:not(:hover, .dsa-nav-topbar__item--active) {
+  opacity: var(--dsa-nav-topbar_floating__label_dimmed--opacity);
+}
+.dsa-nav-topbar .dsa-nav-topbar__item {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+.dsa-nav-topbar .dsa-nav-topbar__item .dsa-nav-dropdown {
+  transition: all var(--ks-transition-fade);
+  transform: translateY(-5%);
+  opacity: 0;
+  pointer-events: none;
+}
+.dsa-nav-topbar .dsa-nav-topbar__item--active .dsa-nav-topbar__label {
+  color: var(--dsa-nav-topbar__label--color_active);
+  font-weight: var(--dsa-nav-topbar__label--font-weight_active);
+}
+.dsa-nav-topbar .dsa-nav-topbar__item:hover > .dsa-nav-dropdown, .dsa-nav-topbar .dsa-nav-topbar__item:focus-within > .dsa-nav-dropdown {
+  display: flex;
+  pointer-events: all;
+  transform: translateY(0);
+  opacity: 1;
+}
+.dsa-nav-topbar .dsa-nav-topbar__label {
+  display: flex;
+  font: var(--dsa-nav-topbar__label--font);
+  font-weight: var(--dsa-nav-topbar__label--font-weight);
+  color: var(--dsa-nav-topbar__label--color);
+  height: 100%;
+  align-items: center;
+  padding: var(--dsa-nav-topbar__label--padding);
+}
+.dsa-nav-topbar .dsa-nav-topbar__label:hover, .dsa-nav-topbar .dsa-nav-topbar__label:focus {
+  color: var(--dsa-nav-topbar__label--color_hover);
+  opacity: 1;
+}
+.dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__label {
+  color: var(--dsa-nav-topbar_floating__label--color);
+}
+.dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__label:hover {
+  color: var(--dsa-nav-topbar__label--color_hover);
+}
+.dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__label:active {
+  color: var(--dsa-nav-topbar__label--color_active);
+}
+.dsa-nav-topbar .dsa-nav-topbar__label__icon {
+  width: var(--dsa-nav-topbar__label__icon--size);
+  height: var(--dsa-nav-topbar__label__icon--size);
+}
+.dsa-nav-topbar .dsa-nav-topbar__label:not(.dsa-nav-topbar__link) {
+  cursor: default;
+}

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

@@ -986,23 +986,33 @@
                           "type": "string",
                           "format": "image"
                         },
-                        "ratio": {
-                          "title": "Image aspect ratio",
-                          "description": "Select an aspect ratio to use for cropping and displaying the image",
+                        "aspectRatio": {
                           "type": "string",
+                          "title": "Aspect Ratio",
+                          "description": "The aspect ratio of the image",
                           "enum": [
-                            "4:3",
-                            "3:2",
-                            "16:9",
-                            "1:1",
-                            "none"
+                            "unset",
+                            "square",
+                            "wide",
+                            "landscape"
                           ],
-                          "default": "none"
+                          "default": "unset"
                         },
                         "alt": {
                           "title": "Alt text",
                           "description": "Image description",
                           "type": "string"
+                        },
+                        "vAlign": {
+                          "title": "Image vertical alignment",
+                          "description": "Select a vertical alignment for the image",
+                          "type": "string",
+                          "enum": [
+                            "center",
+                            "top",
+                            "bottom"
+                          ],
+                          "default": "top"
                         }
                       },
                       "additionalProperties": false
@@ -1113,8 +1123,6 @@
                       "title": "Logos",
                       "description": "The logos to display",
                       "items": {
-                        "$schema": "http://json-schema.org/draft-07/schema#",
-                        "$id": "http://schema.mydesignsystem.com/logo.schema.json",
                         "title": "Logo",
                         "description": "Logo entry for Logos component",
                         "type": "object",
@@ -1140,9 +1148,6 @@
                             "examples": [
                               "Logo 1"
                             ]
-                          },
-                          "type": {
-                            "const": "logo"
                           }
                         },
                         "additionalProperties": false,
@@ -2090,8 +2095,6 @@
                                 "title": "Logos",
                                 "description": "The logos to display",
                                 "items": {
-                                  "$schema": "http://json-schema.org/draft-07/schema#",
-                                  "$id": "http://schema.mydesignsystem.com/logo.schema.json",
                                   "title": "Logo",
                                   "description": "Logo entry for Logos component",
                                   "type": "object",
@@ -2117,9 +2120,6 @@
                                       "examples": [
                                         "Logo 1"
                                       ]
-                                    },
-                                    "type": {
-                                      "const": "logo"
                                     }
                                   },
                                   "additionalProperties": false,
@@ -3109,14 +3109,14 @@
       "properties": {
         "floating": {
           "type": "boolean",
-          "title": "Floating",
-          "description": "Whether the header should float on scroll",
+          "title": "Toggle Floating",
+          "description": "Toggle default floating header behaviour set in global settings",
           "default": false
         },
         "inverted": {
           "type": "boolean",
-          "title": "Inverted",
-          "description": "Whether the header should have an inverted color scheme",
+          "title": "Toggle Inverted",
+          "description": "Toggle default inverted header behaviour set in global settings",
           "default": false
         }
       },
@@ -3129,8 +3129,8 @@
       "properties": {
         "inverted": {
           "type": "boolean",
-          "title": "Inverted",
-          "description": "Whether the footer should have an inverted color scheme",
+          "title": "Toggle Inverted",
+          "description": "Toggle default inverted footer behaviour set in global settings",
           "default": false
         }
       },

package/dist/components/page/page.schema.json

@@ -21,14 +21,14 @@
       "properties": {
         "floating": {
           "type": "boolean",
-          "title": "Floating",
-          "description": "Whether the header should float on scroll",
+          "title": "Toggle Floating",
+          "description": "Toggle default floating header behaviour set in global settings",
           "default": false
         },
         "inverted": {
           "type": "boolean",
-          "title": "Inverted",
-          "description": "Whether the header should have an inverted color scheme",
+          "title": "Toggle Inverted",
+          "description": "Toggle default inverted header behaviour set in global settings",
           "default": false
         }
       }
@@ -40,8 +40,8 @@
       "properties": {
         "inverted": {
           "type": "boolean",
-          "title": "Inverted",
-          "description": "Whether the footer should have an inverted color scheme",
+          "title": "Toggle Inverted",
+          "description": "Toggle default inverted footer behaviour set in global settings",
           "default": false
         }
       }

package/dist/components/page-wrapper/index.js

@@ -1,11 +1,10 @@
 import "./tokens.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { HeadlineLevelProvider } from '../headline-level-context/index.js';
 import Providers from '../providers/index.js';
 import '@kickstartds/base/lib/global/base';
 import '../../global-35f78d6d.js';
-import 'react';
 import '../button/index.js';
+import 'react';
 import 'classnames';
 import '@kickstartds/base/lib/button';
 import '../section/index.js';
@@ -489,6 +488,6 @@ var IconSprite = (() => /*#__PURE__*/ jsxs("svg", {
         })]
 }));
 
-const PageWrapper = ({ children }) => (jsx(HeadlineLevelProvider, { children: jsxs(Providers, { children: [jsx(IconSprite, {}), children] }) }));
+const PageWrapper = ({ children }) => (jsxs(Providers, { children: [jsx(IconSprite, {}), children] }));
 
 export { PageWrapper };

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 28 Jun 2024 15:20:06 GMT
+ * Generated on Thu, 22 Aug 2024 13:17:27 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -31,7 +31,7 @@
   --ks-background-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-6-base);
   --ks-background-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-6-base);
   --ks-background-color-interface-inverted-interactive-selected-base: var(--ks-color-primary-inverted-base);
-  --ks-background-color-card-base: var(--ks-color-fg-alpha-9-base);
+  --ks-background-color-card-base: var(--ks-color-fg-to-bg-9-base);
   --ks-background-color-card-interactive-base: var(--ks-color-fg-alpha-9-base);
   --ks-background-color-card-interactive-disabled-base: var(--ks-color-fg-alpha-7-base);
   --ks-background-color-card-interactive-hover-base: var(--ks-color-fg-alpha-9-base);
@@ -739,47 +739,47 @@
   --ks-color-secondary-inverted-to-fg-9-base: #110924;
   --ks-depth-modal: 1000;
   --ks-spacing-xxs: var(--ks-spacing-xxs-base);
-  --ks-spacing-xxs-base: 0.246rem;
-  --ks-spacing-xxs-bp-factor-phone: 1.25;
-  --ks-spacing-xxs-bp-factor-tablet: 1.5625;
-  --ks-spacing-xxs-bp-factor-laptop: 1.9531;
-  --ks-spacing-xxs-bp-factor-desktop: 2.4414;
+  --ks-spacing-xxs-base: 0.3024rem;
+  --ks-spacing-xxs-bp-factor-phone: 1.225;
+  --ks-spacing-xxs-bp-factor-tablet: 1.5006;
+  --ks-spacing-xxs-bp-factor-laptop: 1.8383;
+  --ks-spacing-xxs-bp-factor-desktop: 2.2519;
   --ks-spacing-xs: var(--ks-spacing-xs-base);
-  --ks-spacing-xs-base: 0.3567rem;
-  --ks-spacing-xs-bp-factor-phone: 1.25;
-  --ks-spacing-xs-bp-factor-tablet: 1.5625;
-  --ks-spacing-xs-bp-factor-laptop: 1.9531;
-  --ks-spacing-xs-bp-factor-desktop: 2.4414;
+  --ks-spacing-xs-base: 0.4309rem;
+  --ks-spacing-xs-bp-factor-phone: 1.225;
+  --ks-spacing-xs-bp-factor-tablet: 1.5006;
+  --ks-spacing-xs-bp-factor-laptop: 1.8383;
+  --ks-spacing-xs-bp-factor-desktop: 2.2519;
   --ks-spacing-s: var(--ks-spacing-s-base);
-  --ks-spacing-s-base: 0.5172rem;
-  --ks-spacing-s-bp-factor-phone: 1.25;
-  --ks-spacing-s-bp-factor-tablet: 1.5625;
-  --ks-spacing-s-bp-factor-laptop: 1.9531;
-  --ks-spacing-s-bp-factor-desktop: 2.4414;
+  --ks-spacing-s-base: 0.614rem;
+  --ks-spacing-s-bp-factor-phone: 1.225;
+  --ks-spacing-s-bp-factor-tablet: 1.5006;
+  --ks-spacing-s-bp-factor-laptop: 1.8383;
+  --ks-spacing-s-bp-factor-desktop: 2.2519;
   --ks-spacing-m: var(--ks-spacing-m-base);
-  --ks-spacing-m-base: 0.75rem;
-  --ks-spacing-m-bp-factor-phone: 1.25;
-  --ks-spacing-m-bp-factor-tablet: 1.5625;
-  --ks-spacing-m-bp-factor-laptop: 1.9531;
-  --ks-spacing-m-bp-factor-desktop: 2.4414;
+  --ks-spacing-m-base: 0.875rem;
+  --ks-spacing-m-bp-factor-phone: 1.225;
+  --ks-spacing-m-bp-factor-tablet: 1.5006;
+  --ks-spacing-m-bp-factor-laptop: 1.8383;
+  --ks-spacing-m-bp-factor-desktop: 2.2519;
   --ks-spacing-l: var(--ks-spacing-l-base);
-  --ks-spacing-l-base: 1.0875rem;
-  --ks-spacing-l-bp-factor-phone: 1.25;
-  --ks-spacing-l-bp-factor-tablet: 1.5625;
-  --ks-spacing-l-bp-factor-laptop: 1.9531;
-  --ks-spacing-l-bp-factor-desktop: 2.4414;
+  --ks-spacing-l-base: 1.2469rem;
+  --ks-spacing-l-bp-factor-phone: 1.225;
+  --ks-spacing-l-bp-factor-tablet: 1.5006;
+  --ks-spacing-l-bp-factor-laptop: 1.8383;
+  --ks-spacing-l-bp-factor-desktop: 2.2519;
   --ks-spacing-xl: var(--ks-spacing-xl-base);
-  --ks-spacing-xl-base: 1.5769rem;
-  --ks-spacing-xl-bp-factor-phone: 1.25;
-  --ks-spacing-xl-bp-factor-tablet: 1.5625;
-  --ks-spacing-xl-bp-factor-laptop: 1.9531;
-  --ks-spacing-xl-bp-factor-desktop: 2.4414;
+  --ks-spacing-xl-base: 1.7768rem;
+  --ks-spacing-xl-bp-factor-phone: 1.225;
+  --ks-spacing-xl-bp-factor-tablet: 1.5006;
+  --ks-spacing-xl-bp-factor-laptop: 1.8383;
+  --ks-spacing-xl-bp-factor-desktop: 2.2519;
   --ks-spacing-xxl: var(--ks-spacing-xxl-base);
-  --ks-spacing-xxl-base: 2.2865rem;
-  --ks-spacing-xxl-bp-factor-phone: 1.25;
-  --ks-spacing-xxl-bp-factor-tablet: 1.5625;
-  --ks-spacing-xxl-bp-factor-laptop: 1.9531;
-  --ks-spacing-xxl-bp-factor-desktop: 2.4414;
+  --ks-spacing-xxl-base: 2.5319rem;
+  --ks-spacing-xxl-bp-factor-phone: 1.225;
+  --ks-spacing-xxl-bp-factor-tablet: 1.5006;
+  --ks-spacing-xxl-bp-factor-laptop: 1.8383;
+  --ks-spacing-xxl-bp-factor-desktop: 2.2519;
   --ks-spacing-stack-xs: var(--ks-spacing-xs);
   --ks-spacing-stack-s: var(--ks-spacing-s);
   --ks-spacing-stack-m: var(--ks-spacing-m);
@@ -926,7 +926,7 @@
   --ks-timing-function-linear: linear;
   --ks-transition-collapse: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
   --ks-transition-hover: var(--ks-duration-fast) var(--ks-timing-function-ease-in-out);
-  --ks-transition-fade: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
+  --ks-transition-fade: var(--ks-duration-fast) var(--ks-timing-function-ease-out);
   --ks-font-family-display: Fredoka, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
   --ks-font-family-copy: Mulish, "Helvetica Neue", Helvetica, Arial, sans-serif;
   --ks-font-family-interface: Mulish, system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;

package/dist/components/picture/picture.schema.json

@@ -37,7 +37,7 @@
     },
     "className": {
       "title": "Additional Classes",
-      "description": "Add additional css classes that should be applied to the button",
+      "description": "Add additional css classes that should be applied to the picture",
       "type": "string"
     },
     "style": {