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

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

@@ -53,14 +53,12 @@
       "title": "Features",
       "description": "The features to display",
       "items": {
-        "$schema": "http://json-schema.org/draft-07/schema#",
-        "$id": "http://schema.mydesignsystem.com/feature.schema.json",
-        "title": "Feature",
-        "description": "Partial Component used to display a feature",
         "type": "object",
+        "title": "Feature",
         "properties": {
           "icon": {
             "type": "string",
+            "format": "icon",
             "title": "Icon",
             "description": "The icon for the feature",
             "examples": [
@@ -84,21 +82,8 @@
               "This is a feature"
             ]
           },
-          "style": {
-            "type": "string",
-            "enum": [
-              "intext",
-              "stack",
-              "centered",
-              "besideLarge",
-              "besideSmall"
-            ],
-            "default": "stack"
-          },
           "cta": {
             "type": "object",
-            "title": "Call to Action",
-            "description": "The call to action",
             "properties": {
               "target": {
                 "type": "string",
@@ -115,34 +100,12 @@
                 "examples": [
                   "See all our partners"
                 ]
-              },
-              "toggle": {
-                "type": "boolean",
-                "title": "Call to Action Toggle",
-                "description": "Activate/disable the CTAs",
-                "default": true
-              },
-              "style": {
-                "type": "string",
-                "description": "Choose the style of the CTA",
-                "enum": [
-                  "button",
-                  "link",
-                  "intext"
-                ],
-                "default": "link"
               }
             },
             "additionalProperties": false
-          },
-          "type": {
-            "const": "feature"
           }
         },
-        "additionalProperties": false,
-        "required": [
-          "title"
-        ]
+        "additionalProperties": false
       },
       "minItems": 1,
       "maxItems": 8

package/dist/components/features/features.schema.json

@@ -39,7 +39,30 @@
       "title": "Features",
       "description": "The features to display",
       "items": {
-        "$ref": "http://schema.mydesignsystem.com/feature.schema.json"
+        "type": "object",
+        "title": "Feature",
+        "properties": {
+          "icon": {
+            "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/icon"
+          },
+          "title": {
+            "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/title"
+          },
+          "text": {
+            "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/text"
+          },
+          "cta": {
+            "type": "object",
+            "properties": {
+              "target": {
+                "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/cta/properties/target"
+              },
+              "label": {
+                "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/cta/properties/label"
+              }
+            }
+          }
+        }
       },
       "minItems": 1,
       "maxItems": 8

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { FeaturesProps } from "../../FeaturesProps-b05859d6.js";
+import { FeaturesProps } from "../../FeaturesProps-e58616a5.js";
 declare const FeaturesContextDefault: import("react").ForwardRefExoticComponent<FeaturesProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const FeaturesContext: import("react").Context<import("react").ForwardRefExoticComponent<FeaturesProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Features: import("react").ForwardRefExoticComponent<FeaturesProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>;
+export type { FeaturesProps };
 export { FeaturesContextDefault, FeaturesContext, Features };

package/dist/components/features/index.js

@@ -1,12 +1,24 @@
 import "./features.css";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, createContext, useContext } from 'react';
+import { forwardRef, createElement, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { Feature } from '../feature/index.js';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
 import '@kickstartds/base/lib/icon';
 import '../button/index.js';
 import '@kickstartds/base/lib/button';
 import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/rich-text';
+
+const defaults = {
+    "layout": "largeTiles",
+    "style": "stack",
+    "ctas": {
+        "toggle": true,
+        "style": "link"
+    },
+    "feature": []
+};
 
 const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
     style: "link",
@@ -15,11 +27,19 @@ const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
         ? "large-tiles"
         : layout === "smallTiles"
             ? "small-tiles"
-            : `${layout}`}`), children: features.map((feature, index) => (jsx(Feature, { ...feature, style: style }, index))) })));
+            : `${layout}`}`), children: features.map((feature, index) => {
+        const { icon, title, text, cta, ...rest } = feature;
+        return (createElement(Feature, { ...rest, key: index, icon: icon, style: style, title: title, text: text, cta: {
+                label: cta?.label,
+                target: cta?.target,
+                style: ctas.style,
+                toggle: ctas.toggle,
+            } }));
+    }) })));
 const FeaturesContext = createContext(FeaturesContextDefault);
 const Features = forwardRef((props, ref) => {
     const Component = useContext(FeaturesContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Features.displayName = "Features";
 

package/dist/components/footer/footer.css

@@ -1,7 +1,7 @@
 .dsa-footer {
   --dsa-footer--background-color: var(--ks-background-color-default);
-  --dsa-footer--border-top: 1px solid var(--ks-border-color-accent);
-  --dsa-footer--max-width: var(--l-section--content-width-wide);
+  --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
+  --dsa-footer--max-width: var(--dsa-content--width_wide);
   --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
   --dsa-footer__byline--font: var(--ks-font-copy-xs);
   --dsa-footer__byline--color: var(--ks-text-color-default);
@@ -28,8 +28,8 @@
 }
 .dsa-footer__content {
   padding: var(--l-section--space-small) var(--dsa-content--spacing);
-  border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-accent));
-  max-width: var(--dsa-footer--max-width, var(--l-section--content-width-wide));
+  border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-default));
+  max-width: var(--dsa-footer--max-width, var(--dsa-content--width_wide));
   width: 100%;
   margin: auto;
   display: flex;

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

@@ -4,4 +4,5 @@ import { HTMLAttributes } from "react";
 declare const FooterContextDefault: import("react").ForwardRefExoticComponent<FooterProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const FooterContext: import("react").Context<import("react").ForwardRefExoticComponent<FooterProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Footer: import("react").ForwardRefExoticComponent<FooterProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { FooterProps };
 export { FooterContextDefault, FooterContext, Footer };

package/dist/components/footer/index.js

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

package/dist/components/gallery/gallery.css

@@ -37,22 +37,4 @@
 .dsa-gallery__image--landscape img {
   aspect-ratio: var(--dsa-gallery--image-ratio-landscape);
   object-fit: cover;
-}
-
-.pswp .pswp__img {
-  object-fit: contain;
-}
-.pswp .pswp__caption {
-  background-color: var(--ks-color-bg-alpha-3);
-  color: var(--dsa-text-color-on-primary);
-}
-
-: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;
-  --c-lightbox--icon-color: var(--dsa-text-color-on-primary) !important;
-  --c-lightbox--icon-color-secondary: var(--ks-color-fg-inverted) !important;
-  --c-lightbox--stroke-width: 0px !important;
-  --c-lightbox--error-text-color: var(--ks-color-error) !important;
 }

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

@@ -4,4 +4,5 @@ import { GalleryProps } from "../../GalleryProps-76e7de44.js";
 declare const GalleryContextDefault: import("react").ForwardRefExoticComponent<GalleryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const GalleryContext: import("react").Context<import("react").ForwardRefExoticComponent<GalleryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Gallery: import("react").ForwardRefExoticComponent<GalleryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { GalleryProps };
 export { GalleryContextDefault, GalleryContext, Gallery };

package/dist/components/gallery/index.js

@@ -3,6 +3,13 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { TextMedia } from '@kickstartds/base/lib/text-media';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
+
+const defaults = {
+    "images": [],
+    "aspectRatio": "unset",
+    "lightbox": false
+};
 
 const GalleryContextDefault = forwardRef(({ lightbox = false, layout = "tiles", aspectRatio = "square", images = [], ...rest }, ref) => {
     const galleryId = useMemo(() => `gallery-${Date.now()}`, []);
@@ -34,7 +41,7 @@ const GalleryContextDefault = forwardRef(({ lightbox = false, layout = "tiles",
 const GalleryContext = createContext(GalleryContextDefault);
 const Gallery = forwardRef((props, ref) => {
     const Component = useContext(GalleryContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Gallery.displayName = "Gallery";
 

package/dist/components/header/header.css

@@ -14,15 +14,15 @@
 }
 
 .dsa-header {
-  --dsa-header--max-width: var(--l-section--content-width-max);
+  --dsa-header--max-width: var(--dsa-content--width_max);
   --dsa-header--background: var(--ks-background-color-default);
   --dsa-header_floating--background: linear-gradient(var(--ks-color-bg), transparent);
   --dsa-header__logo--height: var(--dsa-logo--height);
 }
 
 .dsa-header {
+  z-index: 999;
   background: var(--dsa-header--background, var(--ks-background-color-default));
-  z-index: 1;
   width: 100%;
   display: flex;
   padding: var(--dsa-header--spacing-vertical) 0;
@@ -31,7 +31,6 @@
 .dsa-header--floating {
   background: var(--dsa-header_floating--background, linear-gradient(var(--ks-color-bg-alpha-5), transparent));
   position: absolute;
-  z-index: 999;
 }
 .dsa-header--floating .c-nav-main__link {
   text-shadow: 0 0 10px var(--ks-color-bg-alpha-5);

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
 import { HeaderProps } from "../../HeaderProps-e22382f1.js";
-declare const HeaderContextDefault: import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-declare const HeaderContext: import("react").Context<import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
-declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const HeaderContextDefault: import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+declare const HeaderContext: import("react").Context<import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>>;
+declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export type { HeaderProps };
 export { HeaderContextDefault, HeaderContext, Header };

package/dist/components/header/index.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
 import { NavMain } from '../nav-main/index.js';
 import { Logo } from '../logo/index.js';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
 import '../nav-main/js/NavToggle.client.js';
 import '@kickstartds/core/lib/component';
 import '../nav-main/js/navMainEvents.client.js';
@@ -17,14 +18,25 @@ import '../nav-dropdown/index.js';
 import '../nav-flyout/index.js';
 import '@kickstartds/base/lib/picture';
 
-const HeaderContextDefault = forwardRef(({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }, ref) => (jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), ref: ref, children: jsxs("div", { className: "dsa-header__content", children: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, dropdownInverted: dropdownInverted, items: navItems, logo: {
+const defaults = {
+    "logo": {
+        "homepageHref": "/"
+    },
+    "flyoutInverted": false,
+    "dropdownInverted": false,
+    "floating": false,
+    "inverted": false,
+    "navItems": []
+};
+
+const HeaderContextDefault = forwardRef(({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }, ref) => (jsx("header", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), ref: ref, children: jsxs("div", { className: "dsa-header__content", children: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, dropdownInverted: dropdownInverted, items: navItems, logo: {
                     ...logo,
                     inverted: flyoutInverted,
                 } })] }) })));
 const HeaderContext = createContext(HeaderContextDefault);
 const Header = forwardRef((props, ref) => {
     const Component = useContext(HeaderContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Header.displayName = "Header";
 

package/dist/components/headline/headline.css

@@ -6,7 +6,7 @@
   --dsa-headline--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline--space-after_small: var(--ks-spacing-stack-m);
   --dsa-headline--space-after_minimum: var(--ks-spacing-stack-s);
-  --dsa-headline--higlight-background: linear-gradient(90deg, var(--ks-color-secondary), var(--ks-color-primary));
+  --dsa-headline--higlight-background: var(--dsa-typo--highlight);
   --dsa-headline__subheadline--color: var(--ks-text-color-primary);
   --dsa-headline__subheadline--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-headline_h1--font: var(--ks-font-display-xxl);
@@ -53,6 +53,18 @@
   flex-direction: column;
   gap: var(--dsa-headline--gap, 0.25em);
 }
+.dsa-headline__inner {
+  position: relative;
+}
+.dsa-headline__anchor {
+  --g-link--text-decoration: none;
+  visibility: hidden;
+  position: absolute;
+  margin: 0 var(--ks-spacing-inline-s);
+}
+.dsa-headline:hover .dsa-headline__anchor {
+  visibility: visible;
+}
 .dsa-headline .dsa-headline__headline {
   font: var(--headline--font);
   text-transform: var(--dsa-headline--text-transform);
@@ -101,7 +113,7 @@
 .dsa-headline .dsa-headline__subheadline {
   font: var(--subheadline--font);
   margin: 0;
-  max-width: var(--l-section--content-width-default);
+  max-width: var(--dsa-content--width_default);
   color: var(--dsa-headline__subheadline--color, var(--ks-text-color-primary));
   font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-semi-bold));
 }
@@ -128,6 +140,10 @@
   text-align: right;
   margin-left: auto;
 }
+.dsa-headline--align-right .dsa-headline__anchor {
+  top: 0;
+  right: 100%;
+}
 
 .dsa-headline strong,
 h1 strong,

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

@@ -74,6 +74,11 @@
       "title": "Class Name",
       "description": "Set a custom class name"
     },
+    "id": {
+      "type": "string",
+      "title": "ID",
+      "description": "Set a custom id attribute"
+    },
     "type": {
       "const": "headline"
     }

package/dist/components/headline/headline.schema.json

@@ -53,6 +53,11 @@
       "type": "string",
       "title": "Class Name",
       "description": "Set a custom class name"
+    },
+    "id": {
+      "type": "string",
+      "title": "ID",
+      "description": "Set a custom id attribute"
     }
   },
   "additionalProperties": false,

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

@@ -36,6 +36,10 @@ type SpaceAfter = "minimum" | "small" | "large";
  * Set a custom class name
  */
 type ClassName = string;
+/**
+ * Set a custom id attribute
+ */
+type ID = string;
 /**
  * Component used for headlines
  */
@@ -48,6 +52,7 @@ interface HeadlineProps {
     style?: Style;
     spaceAfter?: SpaceAfter;
     className?: ClassName;
+    id?: ID;
 }
 interface RenderFunctions {
     renderContent?: typeof defaultRenderFn;
@@ -55,4 +60,5 @@ interface RenderFunctions {
 }
 declare const Headline: import("react").ForwardRefExoticComponent<HeadlineProps & RenderFunctions & Omit<HTMLAttributes<HTMLElement>, "style"> & import("react").RefAttributes<HTMLElement>>;
 declare const HeadlineProvider: FC<PropsWithChildren>;
+export type { HeadlineProps };
 export { Headline, HeadlineProvider };

package/dist/components/headline/index.js

@@ -9,7 +9,7 @@ const Headline = forwardRef(({ content, text = content, sub, align = "left", swi
 // @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 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;
+    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: jsxs("span", { className: "dsa-headline__inner", children: [renderContent(text), props.id && level === "h2" && (jsx("a", { href: `#${props.id}`, className: "dsa-headline__anchor", "aria-label": "Link to this section", title: "Link to this section", children: "#" }))] }) }), sub && !switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) }))] })) : null;
 });
 Headline.displayName = "Headline";
 const HeadlineProvider = (props) => (jsx(HeadlineContext.Provider, { ...props, value: Headline }));

package/dist/components/hero/hero.css

@@ -1,4 +1,11 @@
+.l-container--visual {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: visual;
+}
+
 .dsa-hero {
+  --dsa-hero--min-height: 18rem;
+  --dsa-hero--min-height_small: 13.2rem;
   --dsa-hero__headline--color: var(--dsa-headline--color);
   --dsa-hero__subheadline--color: var(--dsa-headline__subheadline--color);
   --dsa-hero_color-neutral__headline--color: var(--ks-text-color-default);
@@ -7,11 +14,30 @@
   --dsa-hero__copy--font: var(--dsa-rich-text--font);
   --dsa-hero_highlight-text__copy--font: var(--ks-font-copy-l);
   --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
+  --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
+  --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
   --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-hero__texbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
 }
+@container visual (min-width: 640px) {
+  .dsa-hero {
+    --dsa-hero--min-height: 21rem;
+    --dsa-hero--min-height_small: 13.35rem;
+  }
+}
+@container visual (min-width: 960px) {
+  .dsa-hero {
+    --dsa-hero--min-height: 31.5rem;
+    --dsa-hero--min-height_small: 15.8rem;
+  }
+}
+@container visual (min-width: 1024px) {
+  .dsa-hero {
+    --dsa-hero--min-height: 35rem;
+    --dsa-hero--min-height_small: 20rem;
+  }
+}
 
 .l-container--visual {
   /* stylelint-disable-next-line property-no-unknown */
@@ -21,9 +47,10 @@
 .c-visual.dsa-hero {
   --c-visual_overlay--background-size: 100%;
   --c-visual_overlay--background: transparent;
+  min-height: var(--dsa-hero--min-height);
 }
 .c-visual.dsa-hero .c-visual__box {
-  --c-visual_box--background: var(--dsa-hero__texbox--background-color, var(--ks-color-bg-alpha-2));
+  --c-visual_box--background: var(--dsa-hero__textbox--background-color, var(--ks-color-bg-alpha-2));
   --c-visual_box--color: var(--dsa-hero__copy--color, var(--ks-text-color-default));
   --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-surface));
   --c-visual_box--padding: var(--dsa-hero__textbox--padding, var(--ks-spacing-inset-squish-xl));
@@ -37,6 +64,9 @@
   --dsa-hero__headline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
   --dsa-hero__subheadline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
 }
+.c-visual.dsa-hero.c-visual--small {
+  min-height: var(--dsa-hero--min-height_small);
+}
 @container visual (min-width: 640px) {
   .c-visual.dsa-hero {
     --c-visual_overlay--background: radial-gradient(
@@ -52,7 +82,7 @@
     );
   }
   .c-visual.dsa-hero .c-visual__box {
-    --c-visual_box--max-width: 50rem;
+    --c-visual_box--max-width: var(--dsa-hero__textbox--max-width, var(--dsa-content--width_narrow));
   }
 }
 
@@ -74,7 +104,7 @@
   padding: var(--c-visual_box--padding);
 }
 .c-visual.dsa-hero .c-visual__content--indent {
-  max-width: var(--l-section--content-width-wide);
+  max-width: var(--dsa-content--width_wide);
 }
 @container visual (min-width: 640px) {
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
@@ -89,7 +119,10 @@
     position: relative;
   }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
-    --c-visual_box--max-width: var(--l-section--content-width-default);
+    --c-visual_box--max-width: var(--dsa-content--width_default);
+  }
+  .c-visual.dsa-hero.c-visual--no-crop {
+    --c-visual--min-height: 0;
   }
   @container visual (min-width: 640px) {
     .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {

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

@@ -67,6 +67,7 @@
           },
           "icon": {
             "type": "string",
+            "format": "icon",
             "title": "Icon",
             "description": "Choose an icon"
           },
@@ -156,10 +157,11 @@
         "center",
         "below",
         "left",
-        "right"
+        "right",
+        "corner"
       ],
       "type": "string",
-      "default": "bottom"
+      "default": "below"
     },
     "type": {
       "const": "hero"

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

@@ -73,9 +73,9 @@
     "textPosition": {
       "title": "Module aligment",
       "description": "Choose the alginment of the module content",
-      "enum": ["center", "below", "left", "right"],
+      "enum": ["center", "below", "left", "right", "corner"],
       "type": "string",
-      "default": "bottom"
+      "default": "below"
     }
   },
   "additionalProperties": false

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { HeroProps } from "../../HeroProps-cf82a16d.js";
+import { HeroProps } from "../../HeroProps-f704d270.js";
 declare const HeroContextDefault: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const HeroContext: import("react").Context<import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Hero: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { HeroProps };
 export { HeroContextDefault, HeroContext, Hero };

package/dist/components/hero/index.js

@@ -6,8 +6,22 @@ import classnames from 'classnames';
 import { Container } from '@kickstartds/core/lib/container';
 import { ButtonContext } from '@kickstartds/base/lib/button';
 import { useButtonGroup } from '../button-group/index.js';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
 import '@kickstartds/base/lib/button-group';
 
+const defaults = {
+    "highlightText": false,
+    "colorNeutral": false,
+    "height": "default",
+    "textbox": true,
+    "buttons": [],
+    "overlay": false,
+    "image": {
+        "indent": "none"
+    },
+    "textPosition": "below"
+};
+
 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
@@ -17,8 +31,10 @@ const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightT
         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",
-                    horizontal: textPosition === "left"
+                    vertical: textPosition === "below" || textPosition === "corner"
+                        ? "bottom"
+                        : "center",
+                    horizontal: textPosition === "left" || textPosition === "corner"
                         ? "left"
                         : textPosition === "right"
                             ? "right"
@@ -55,7 +71,7 @@ const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightT
 const HeroContext = createContext(HeroContextDefault);
 const Hero = forwardRef((props, ref) => {
     const Component = useContext(HeroContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Hero.displayName = "Hero";