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

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

@@ -9,38 +9,24 @@
       "type": "object",
       "properties": {
         "src": {
-          "title": "Source",
-          "description": "Picture source",
-          "type": "string",
-          "format": "image",
-          "examples": ["https://picsum.photos/seed/kdspicture/300/300"]
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/src"
+        },
+        "srcInverted": {
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/srcInverted"
         },
         "alt": {
-          "title": "Alt text",
-          "description": "Alt text to display for picture",
-          "type": "string"
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/alt"
+        },
+        "homepageHref": {
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/homepageHref"
         },
         "width": {
-          "title": "Width",
-          "description": "Width of the picture",
-          "type": "integer",
-          "minimum": 0,
-          "examples": [300]
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/width"
         },
         "height": {
-          "title": "Height",
-          "description": "Height of the picture",
-          "type": "integer",
-          "minimum": 0,
-          "examples": [300]
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/height"
         }
-      },
-      "additionalProperties": false
-    },
-    "logoHref": {
-      "type": "string",
-      "format": "uri",
-      "default": "/"
+      }
     },
     "byline": {
       "title": "Byline",

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

@@ -1,4 +1,4 @@
 import { FC } from "react";
-import { FooterProps } from "../../FooterProps-9f94ed98.js";
+import { FooterProps } from "../../FooterProps-2d0b03c2.js";
 declare const Footer: FC<FooterProps>;
 export { Footer };

package/dist/components/footer/index.js

@@ -2,10 +2,11 @@ import "./footer.css";
 import { createElement } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import classnames from 'classnames';
-import { Picture } from '@kickstartds/base/lib/picture';
 import { Link } from '@kickstartds/base/lib/link';
+import { Logo } from '../logo/index.js';
+import '@kickstartds/base/lib/picture';
 
-const Footer = ({ logo, logoHref = "/", byline, inverted = false, navItems = [], }) => (jsx("div", { className: classnames("c-footer"), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "c-footer__content", children: [jsx(Link, { className: "c-footer__logo", href: logoHref, children: jsx(Picture, { ...logo, lazy: true }) }), byline && jsx("span", { className: "c-footer__byline", children: byline }), navItems.length > 0 ? (jsx("div", { className: "c-footer__links", children: navItems.map(({ label, active, ...linkProps }) => (createElement(Link, { ...linkProps, className: "c-footer__link", key: linkProps.href + label }, label))) })) : null] }) }));
+const Footer = ({ logo, byline, inverted = false, navItems = [], }) => (jsx("div", { className: classnames("dsa-footer"), "ks-inverted": inverted.toString(), 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.href + label }, label))) })) : null] }) }));
 Footer.displayName = "Footer";
 
 export { Footer };

package/dist/components/gallery/gallery.css

@@ -47,7 +47,7 @@
   color: var(--dsa-text-color-on-primary);
 }
 
-:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+:root, [ks-inverted], [ks-theme] {
   --c-lightbox--bg: var(--ks-background-color-default) !important;
   --c-lightbox--placeholder-bg: var(--ks-color-fg-to-bg-1) !important;
   --c-lightbox--root-z-index: var(--ks-depth-modal) !important;

package/dist/components/header/header.css

@@ -1,6 +1,16 @@
-:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
-  --dsa-header--spacing-vertical: var(--ks-spacing-stack-m);
-  --dsa-header--spacing-horizontal: var(--l-section--content-padding);
+:root,
+[ks-theme],
+[ks-inverted] {
+  --dsa-header--spacing-vertical: var(--ks-spacing-inset-m);
+  --dsa-header--spacing-horizontal: var(--ks-spacing-inset-xl);
+}
+@media (min-width: 62em) {
+  :root,
+  [ks-theme],
+  [ks-inverted] {
+    --dsa-header--spacing-vertical: var(--ks-spacing-stack-s);
+    --dsa-header--spacing-horizontal: var(--l-section--content-padding);
+  }
 }
 
 .dsa-header {
@@ -32,13 +42,7 @@
   margin: auto;
   display: flex;
   justify-content: space-between;
-}
-.dsa-header__logo {
-  display: block;
-}
-.dsa-header__logo img {
-  height: var(--dsa-header__logo--height);
-  width: auto;
+  align-items: center;
 }
 
 .dsa-header--spacer {

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

@@ -2,6 +2,7 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "$id": "http://schema.mydesignsystem.com/header.schema.json",
   "title": "Header",
+  "description": "Header layered on top by the CMS",
   "type": "object",
   "properties": {
     "logo": {
@@ -12,16 +13,24 @@
           "title": "Source",
           "description": "Picture source",
           "type": "string",
-          "format": "image",
-          "examples": [
-            "https://picsum.photos/seed/kdspicture/300/300"
-          ]
+          "format": "image"
+        },
+        "srcInverted": {
+          "title": "Source",
+          "description": "Picture source",
+          "type": "string",
+          "format": "image"
         },
         "alt": {
           "title": "Alt text",
           "description": "Alt text to display for picture",
           "type": "string"
         },
+        "homepageHref": {
+          "type": "string",
+          "format": "uri",
+          "default": "/"
+        },
         "width": {
           "title": "Width",
           "description": "Width of the picture",
@@ -43,10 +52,17 @@
       },
       "additionalProperties": false
     },
-    "logoHref": {
-      "type": "string",
-      "format": "uri",
-      "default": "/"
+    "flyoutInverted": {
+      "type": "boolean",
+      "title": "Flyout Inverted",
+      "description": "Toggle the inversion of the flyout navigation",
+      "default": false
+    },
+    "dropdownInverted": {
+      "type": "boolean",
+      "title": "Dropdown Inverted",
+      "description": "Toggle the inversion of the dropdown navigation",
+      "default": false
     },
     "floating": {
       "type": "boolean",
@@ -74,6 +90,31 @@
           },
           "active": {
             "type": "boolean"
+          },
+          "id": {
+            "type": "string"
+          },
+          "items": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "href": {
+                  "type": "string",
+                  "format": "uri"
+                },
+                "label": {
+                  "type": "string"
+                },
+                "active": {
+                  "type": "boolean"
+                },
+                "id": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            }
           }
         },
         "additionalProperties": false,
@@ -84,19 +125,42 @@
       },
       "examples": [
         [
-          {
-            "label": "Nav Item",
-            "href": "#"
-          },
           {
             "label": "Active Item",
             "href": "#",
             "active": true
           },
           {
-            "label": "Another Item",
+            "label": "Navigation Item",
             "href": "#"
           },
+          {
+            "label": "Dropdown",
+            "href": "#",
+            "items": [
+              {
+                "label": "Level 2 Item",
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "Active Item",
+                "active": true,
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "An Item with a longer Label",
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "And One last one",
+                "href": "#",
+                "id": ""
+              }
+            ]
+          },
           {
             "label": "One more Item",
             "href": "#"
@@ -112,8 +176,5 @@
       "const": "header"
     }
   },
-  "additionalProperties": false,
-  "required": [
-    "logo"
-  ]
+  "additionalProperties": false
 }

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

@@ -2,6 +2,7 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "$id": "http://schema.mydesignsystem.com/header.schema.json",
   "title": "Header",
+  "description": "Header layered on top by the CMS",
   "type": "object",
   "properties": {
     "logo": {
@@ -9,36 +10,30 @@
       "type": "object",
       "properties": {
         "src": {
-          "title": "Source",
-          "description": "Picture source",
-          "type": "string",
-          "format": "image",
-          "examples": ["https://picsum.photos/seed/kdspicture/300/300"]
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/src"
+        },
+        "srcInverted": {
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/srcInverted"
         },
         "alt": {
-          "title": "Alt text",
-          "description": "Alt text to display for picture",
-          "type": "string"
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/alt"
+        },
+        "homepageHref": {
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/homepageHref"
         },
         "width": {
-          "title": "Width",
-          "description": "Width of the picture",
-          "type": "integer",
-          "minimum": 0,
-          "examples": [300]
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/width"
         },
         "height": {
-          "title": "Height",
-          "description": "Height of the picture",
-          "type": "integer",
-          "minimum": 0,
-          "examples": [300]
+          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/height"
         }
-      },
-      "additionalProperties": false
+      }
+    },
+    "flyoutInverted": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/flyoutInverted"
     },
-    "logoHref": {
-      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logoHref"
+    "dropdownInverted": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/dropdownInverted"
     },
     "floating": {
       "type": "boolean",
@@ -55,7 +50,5 @@
     "navItems": {
       "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/items"
     }
-  },
-  "additionalProperties": false,
-  "required": ["logo"]
+  }
 }

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

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

package/dist/components/header/index.js

@@ -1,17 +1,25 @@
 import "./header.css";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import classnames from 'classnames';
-import { Picture } from '@kickstartds/base/lib/picture';
-import { Link } from '@kickstartds/base/lib/link';
 import { NavMain } from '../nav-main/index.js';
-import 'react';
-import '../nav-main/js/NavToggle.client.js';
+import { Logo } from '../logo/index.js';
+import '../nav/js/NavToggle.client.js';
 import '@kickstartds/core/lib/component';
-import '../nav-main/js/navMainEvents.client.js';
+import '../nav/js/navMainEvents.client.js';
 import '@kickstartds/core/lib/core';
-import '../nav-main/js/body.client.js';
+import '../nav/js/body.client.js';
+import '../nav-toggle/index.js';
+import '../nav-topbar/index.js';
+import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/icon';
+import '../nav-dropdown/index.js';
+import '../nav-flyout/index.js';
+import '@kickstartds/base/lib/picture';
 
-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: [jsx(Link, { className: "dsa-header__logo", href: logoHref, children: jsx(Picture, { ...logo, lazy: false }) }), jsx(NavMain, { logo: logo, logoHref: logoHref, items: navItems })] }) }) }));
+const Header = ({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = 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: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, dropdownInverted: dropdownInverted, items: navItems, logo: {
+                        ...logo,
+                        inverted: flyoutInverted,
+                    } })] }) }) }));
 Header.displayName = "Header";
 
 export { Header };

package/dist/components/headline/headline.css

@@ -1,4 +1,4 @@
-:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+:root, [ks-inverted], [ks-theme] {
   --dsa-headline--color: var(--ks-text-color-display);
   --dsa-headline--font-weight: var(--ks-font-weight-medium);
   --dsa-headline--text-transform: none;
@@ -15,13 +15,13 @@
   --dsa-headline_h4--font: var(--ks-font-display-m);
   --dsa-headline__p--font: var(--ks-font-copy-m);
 }
-@media (min-width: 42rem) {
-  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+@media (min-width: 48em) {
+  :root, [ks-inverted], [ks-theme] {
     --dsa-headline_h1__subheadline--font: var(--ks-font-copy-xl);
   }
 }
-@media (min-width: 42rem) {
-  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+@media (min-width: 48em) {
+  :root, [ks-inverted], [ks-theme] {
     --dsa-headline_h2__subheadline--font: var(--ks-font-copy-l);
   }
 }
@@ -33,40 +33,37 @@
   gap: var(--dsa-headline--gap, 0.25em);
 }
 .dsa-headline .dsa-headline__headline {
-  font: var(--dsa-headline--font);
+  font: var(--headline--font);
   text-transform: var(--dsa-headline--text-transform);
 }
-.dsa-headline .dsa-headline__subheadline {
-  font: var(--dsa-headline__subheadline--font);
-}
 .dsa-headline--h1 {
-  --dsa-headline--font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
-  --dsa-subheadline--font: var(--dsa-headline_h1__subheadline--font, var(--ks-font-copy-xl));
+  --headline--font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
+  --subheadline--font: var(--dsa-headline_h1__subheadline--font, var(--ks-font-copy-xl));
 }
 .dsa-headline--h2 {
-  --dsa-headline--font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
-  --dsa-subheadline--font: var(--dsa-headline_h2__subheadline--font, var(--ks-font-copy-l));
+  --headline--font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
+  --subheadline--font: var(--dsa-headline_h2__subheadline--font, var(--ks-font-copy-l));
 }
 .dsa-headline--h3 {
-  --dsa-headline--font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
-  --dsa-subheadline--font: var(--dsa-headline_h3__subheadline--font, var(--ks-font-copy-l));
+  --headline--font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
+  --subheadline--font: var(--dsa-headline_h3__subheadline--font, var(--ks-font-copy-l));
 }
 .dsa-headline--h4 {
-  --dsa-headline--font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
-  --dsa-subheadline--font: var(--dsa-headline_h4__subheadline--font, var(--ks-font-copy-m));
+  --headline--font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
+  --subheadline--font: var(--dsa-headline_h4__subheadline--font, var(--ks-font-copy-m));
 }
 .dsa-headline--p {
-  --dsa-headline--font: var(--dsa-headline__p--font, var(--ks-font-copy-m));
-  --dsa-subheadline--font: var(--dsa-headline__p__subheadline--font, var(--ks-font-copy-s));
+  --headline--font: var(--dsa-headline__p--font, var(--ks-font-copy-m));
+  --subheadline--font: var(--dsa-headline__p__subheadline--font, var(--ks-font-copy-s));
 }
 .dsa-headline .dsa-headline__headline {
-  font: var(--dsa-headline--font);
+  font: var(--headline--font);
   color: var(--dsa-headline--color, var(--ks-text-color-display));
   font-weight: var(--dsa-headline--font-weight);
   margin: 0;
 }
 .dsa-headline .dsa-headline__subheadline {
-  font: var(--dsa-subheadline--font);
+  font: var(--subheadline--font);
   margin: 0;
   max-width: var(--l-section--content-width-default);
   color: var(--dsa-headline__subheadline--color, var(--ks-text-color-primary));

package/dist/components/headline/index.js

@@ -4,17 +4,11 @@ import classnames from 'classnames';
 import { forwardRef } from 'react';
 import { compiler } from 'markdown-to-jsx';
 import { HeadlineContext } from '@kickstartds/base/lib/headline';
-import { useHeadlineLevel } from '../headline-level-context/index.js';
 
 const Headline = forwardRef(({ content, text = content, sub, align = "left", switchOrder = false, level = "h2", 
 // @ts-expect-error: Some kDS Components set the `styleAs`Props (e.g. https://github.com/kickstartDS/content/blob/next/source/storytelling/StorytellingComponent.tsx#L146)
 styleAs, style = styleAs || "h2", spaceAfter = "small", className, renderContent = compiler, renderSubheadline = compiler, ...props }, ref) => {
-    const computedLevel = useHeadlineLevel();
-    const TagName = level === "p"
-        ? level
-        : computedLevel
-            ? ("h" + computedLevel)
-            : level;
+    const TagName = level;
     return text || sub ? (jsxs("header", { className: classnames("dsa-headline", `dsa-headline--${style}`, style !== "none" && style !== level && `dsa-headline--${style}`, `dsa-headline--align-${align}`, spaceAfter && `dsa-headline--space-after-${spaceAfter}`, className), ref: ref, ...props, children: [sub && switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) })), jsx(TagName, { className: classnames("dsa-headline__headline"), children: renderContent(text) }), sub && !switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) }))] })) : null;
 });
 Headline.displayName = "Headline";

package/dist/components/hero/index.js

@@ -8,13 +8,13 @@ import { ButtonContext } from '@kickstartds/base/lib/button';
 import { useButtonGroup } from '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightText, textPosition = "center", colorNeutral, image, overlay, textbox, buttons = [], ...rest }, ref) => {
+const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightText, textPosition = "center", colorNeutral, image, overlay, textbox, className, buttons = [], ...rest }, ref) => {
     const ButtonGroup = useButtonGroup();
     return (jsx(ButtonContext.Provider
     // @ts-expect-error
     , { 
         // @ts-expect-error
-        value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { ...rest, ref: ref, className: classnames(`dsa-hero dsa-hero--content-${textPosition}`, highlightText ? `dsa-hero--highlight-text` : "", colorNeutral ? `dsa-hero--color-neutral` : ""), height: height, overlay: overlay, box: {
+        value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { ...rest, ref: ref, className: classnames(`dsa-hero dsa-hero--content-${textPosition}`, highlightText ? `dsa-hero--highlight-text` : "", colorNeutral ? `dsa-hero--color-neutral` : "", className), height: height, overlay: overlay, box: {
                     background: textbox === true ? "solid" : "transparent",
                     enabled: true,
                     vertical: textPosition === "below" ? "bottom" : "center",
@@ -48,6 +48,7 @@ const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightT
                         srcMobile: image.srcMobile,
                         srcTablet: image.srcTablet,
                         srcDesktop: image.srcDesktop,
+                        src: image.src,
                     },
                 } }) }) }));
 });

package/dist/components/image/image.css

@@ -1,18 +1,18 @@
-.c-image {
-  --c-image--ratio-square: 1/1;
-  --c-image--ratio-wide: 4/3;
-  --c-image--ratio-landscape: 16/9;
+.dsa-image {
+  --dsa-image--ratio-square: 1/1;
+  --dsa-image--ratio-wide: 4/3;
+  --dsa-image--ratio-landscape: 16/9;
 }
 
-.c-image {
+.dsa-image {
   object-fit: cover;
 }
-.c-image--square {
+.dsa-image--square {
   aspect-ratio: var(--c-image--ratio-square);
 }
-.c-image--wide {
+.dsa-image--wide {
   aspect-ratio: var(--c-image--ratio-wide);
 }
-.c-image--landscape {
+.dsa-image--landscape {
   aspect-ratio: var(--c-image--ratio-landscape);
 }

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

@@ -51,7 +51,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 image",
       "type": "string"
     },
     "style": {

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

@@ -44,7 +44,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 image",
       "type": "string"
     },
     "style": {

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

@@ -31,7 +31,7 @@ type Height = number;
  */
 type AspectRatio = "unset" | "square" | "wide" | "landscape";
 /**
- * Add additional css classes that should be applied to the button
+ * Add additional css classes that should be applied to the image
  */
 type AdditionalClasses = string;
 /**

package/dist/components/image/index.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { forwardRef } from 'react';
 import { PictureContextDefault, PictureContext } from '@kickstartds/base/lib/picture';
 
-const Image = forwardRef(({ src, srcSet, alt, width, height, aspectRatio, className, id, itemProp, style, lazy, sources, pictureClassName, ...props }, ref) => (jsx(PictureContextDefault, { ...props, src: src, srcSet: srcSet, alt: alt, width: width, height: height, id: id, itemProp: itemProp, style: style, lazy: lazy, sources: sources, pictureClassName: pictureClassName, ref: ref, className: classnames("c-image", aspectRatio !== "unset" && `c-image--${aspectRatio}`, className) })));
+const Image = forwardRef(({ src, srcSet, alt, width, height, aspectRatio, className, id, itemProp, style, lazy, sources, pictureClassName, ...props }, ref) => (jsx(PictureContextDefault, { ...props, src: src, srcSet: srcSet, alt: alt, width: width, height: height, id: id, itemProp: itemProp, style: style, lazy: lazy, sources: sources, pictureClassName: pictureClassName, ref: ref, className: classnames("dsa-image", aspectRatio !== "unset" && `dsa-image--${aspectRatio}`, className) })));
 Image.displayName = "Image";
 const ImageProvider = (props) => (jsx(PictureContext.Provider, { ...props, value: Image }));
 

package/dist/components/image-story/image-story.css

@@ -14,6 +14,18 @@
 .c-storytelling.dsa-image-story .c-storytelling__box__content {
   max-width: var(--l-section--content-width-narrow);
 }
+.c-storytelling.dsa-image-story.c-storytelling--three-to-two img {
+  aspect-ratio: 3/2;
+}
+.c-storytelling.dsa-image-story.c-storytelling--four-to-three img {
+  aspect-ratio: 4/3;
+}
+.c-storytelling.dsa-image-story.c-storytelling--sixteen-to-nine img {
+  aspect-ratio: 16/9;
+}
+.c-storytelling.dsa-image-story.c-storytelling--square img {
+  aspect-ratio: 1/1;
+}
 .c-storytelling.dsa-image-story .c-rich-text {
   font: var(--dsa-image-story__copy--font, var(--dsa-rich-text--font));
   color: var(--dsa-image-story__copy--color, var(--dsa-rich-text--color));
@@ -24,7 +36,8 @@
 }
 .c-storytelling.dsa-image-story .c-storytelling__image img {
   position: sticky;
-  top: calc(var(--c-storytelling--vertical-padding) * 2);
+  height: auto;
+  top: 0;
 }
 .c-storytelling.dsa-image-story.c-storytelling--full {
   --c-storytelling--vertical-padding: 0px;

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

@@ -129,23 +129,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