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

package/dist/components/headline/headline.css

@@ -1,42 +1,50 @@
 :root, [ks-inverted], [ks-theme] {
   --dsa-headline--color: var(--ks-text-color-display);
-  --dsa-headline--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-headline--font-weight: var(--ks-font-weight-medium);
   --dsa-headline--text-transform: none;
   --dsa-headline--gap: 0.25em;
   --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: var(--dsa-typo--highlight);
-  --dsa-headline__subheadline--color: var(--ks-color-fg-alpha-4);
-  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-bold);
-  --dsa-headline__subheadline--text-transform: uppercase;
-  --dsa-headline__subheadline--letter-spacing: 0.045em;
-  --dsa-headline__subheadline--font-family: var(--ks-font-family-display);
+  --dsa-headline--higlight-background: linear-gradient(90deg, var(--ks-color-secondary), var(--ks-color-primary));
+  --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);
-  --dsa-headline_h1__subheadline--font-size: 50%;
+  --dsa-headline_h1__subheadline--font: var(--ks-font-copy-l);
   --dsa-headline_h1--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline_h1--space-after_small: var(--ks-spacing-stack-m);
   --dsa-headline_h1--space-after_minimum: var(--ks-spacing-stack-s);
   --dsa-headline_h2--font: var(--ks-font-display-xl);
-  --dsa-headline_h2__subheadline--font-size: 50%;
+  --dsa-headline_h2__subheadline--font: var(--ks-font-copy-m);
   --dsa-headline_h2--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline_h2--space-after_small: var(--ks-spacing-stack-m);
-  --dsa-headline_h2--space-after_minimum: 0;
+  --dsa-headline_h2--space-after_minimum: var(--ks-spacing-stack-s);
   --dsa-headline_h3--font: var(--ks-font-display-l);
-  --dsa-headline_h3__subheadline--font-size: 50%;
+  --dsa-headline_h3__subheadline--font: var(--ks-font-copy-m);
   --dsa-headline_h3--space-after_large: var(--ks-spacing-stack-m);
   --dsa-headline_h3--space-after_small: var(--ks-spacing-stack-s);
-  --dsa-headline_h3--space-after_minimum: 0;
+  --dsa-headline_h3--space-after_minimum: var(--ks-spacing-stack-xs);
   --dsa-headline_h4--font: var(--ks-font-display-m);
-  --dsa-headline_h4__subheadline--font-size: 75%;
+  --dsa-headline_h4__subheadline--font: var(--ks-font-copy-s);
   --dsa-headline_h4--space-after_large: var(--ks-spacing-stack-m);
   --dsa-headline_h4--space-after_small: var(--ks-spacing-stack-s);
-  --dsa-headline_h4--space-after_minimum: 0;
+  --dsa-headline_h4--space-after_minimum: var(--ks-spacing-stack-xs);
   --dsa-headline_p--font: var(--ks-font-copy-m);
-  --dsa-headline_p__subheadline--font-size: 75%;
+  --dsa-headline__subheadline_p--font: var(--ks-font-copy-s);
+  --dsa-headline_p__subheadline--font: var(--ks-font-copy-s);
   --dsa-headline_p--space-after_large: var(--ks-spacing-stack-xs);
   --dsa-headline_p--space-after_small: var(--ks-spacing-xxs);
-  --dsa-headline_p--space-after_minimum: 0;
+  --dsa-headline_p--space-after_minimum: none;
+}
+@media (min-width: 48em) {
+  :root, [ks-inverted], [ks-theme] {
+    --dsa-headline_h1__subheadline--font: var(--ks-font-copy-xl);
+  }
+}
+@media (min-width: 48em) {
+  :root, [ks-inverted], [ks-theme] {
+    --dsa-headline_h2__subheadline--font: var(--ks-font-copy-l);
+  }
 }
 
 .dsa-headline {
@@ -45,69 +53,57 @@
   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);
 }
 .dsa-headline--h1 {
-  font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
-  --subheadline--font-size: var(--dsa-headline_h1--font-size, 50%);
+  --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));
   --headline--space-after_minimum: var(--dsa-headline_h1--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h1--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h1--space-after_large);
 }
 .dsa-headline--h2 {
-  font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
-  --subheadline--font-size: var(--dsa-headline_h2__subheadline--font-size, 50%);
+  --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));
   --headline--space-after_minimum: var(--dsa-headline_h2--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h2--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h2--space-after_large);
 }
 .dsa-headline--h3 {
-  font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
-  --subheadline--font-size: var(--dsa-headline_h3__subheadline--font-size, 50%);
+  --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));
   --headline--space-after_minimum: var(--dsa-headline_h3--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h3--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h3--space-after_large);
 }
 .dsa-headline--h4 {
-  font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
-  --subheadline--font-size: var(--dsa-headline_h4__subheadline--font-size, 75%);
+  --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));
   --headline--space-after_minimum: var(--dsa-headline_h4--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h4--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h4--space-after_large);
 }
 .dsa-headline--p {
-  font: var(--dsa-headline_p--font, var(--ks-font-copy-m));
-  --subheadline--font-size: var(--dsa-headline_p__subheadline--font-size, 75%);
+  --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));
   --headline--space-after_minimum: var(--dsa-headline_p--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_p--space-after_small);
   --headline--space-after_large: var(--dsa-headline_p--space-after_large);
 }
 .dsa-headline .dsa-headline__headline {
+  font: var(--headline--font);
   color: var(--dsa-headline--color, var(--ks-text-color-display));
-  font: inherit;
   font-weight: var(--dsa-headline--font-weight);
-  text-transform: var(--dsa-headline--text-transform);
   margin: 0;
 }
 .dsa-headline .dsa-headline__subheadline {
-  font-family: var(--dsa-headline__subheadline--font-family);
-  font-size: var(--subheadline--font-size, 50%);
+  font: var(--subheadline--font);
   margin: 0;
-  max-width: var(--dsa-content--width_default);
+  max-width: var(--l-section--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-bold));
-  text-transform: var(--dsa-headline__subheadline--text-transform, none);
-  letter-spacing: var(--dsa-headline__subheadline--letter-spacing, 0);
+  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-semi-bold));
 }
 .dsa-headline--space-after-minimum {
   margin-bottom: var(--headline--space-after_minimum);
@@ -132,10 +128,6 @@
   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,11 +74,6 @@
       "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,11 +53,6 @@
       "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,10 +36,6 @@ 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
  */
@@ -52,7 +48,6 @@ interface HeadlineProps {
     style?: Style;
     spaceAfter?: SpaceAfter;
     className?: ClassName;
-    id?: ID;
 }
 interface RenderFunctions {
     renderContent?: typeof defaultRenderFn;
@@ -60,5 +55,4 @@ 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: 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;
+    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";
 const HeadlineProvider = (props) => (jsx(HeadlineContext.Provider, { ...props, value: Headline }));

package/dist/components/hero/hero.css

@@ -1,83 +1,33 @@
-.l-container--hero {
-  /* stylelint-disable-next-line property-no-unknown */
-  container-name: hero;
-}
-
 .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);
   --dsa-hero_color-neutral__subheadline--color: var(--ks-text-color-default);
   --dsa-hero__copy--color: var(--ks-text-color-default);
-  --dsa-hero__copy--font: var(--ks-font-copy-m);
+  --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(--dsa-overlay-box_transparent--background-color);
-  --dsa-hero__textbox--backdrop-filter: var(--dsa-overlay-box_transparent--backdrop-filter);
-  --dsa-hero__textbox--box-shadow: none;
-  --dsa-hero__textbox--border-radius: var(--ks-border-radius-card);
-  --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
-  --dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
+  --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
   --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-hero__overlay--background: radial-gradient(
-    50% 125% at 100% 0%,
-    var(--ks-color-primary-alpha-5) 0%,
-    var(--ks-color-bg-alpha-4) 100%
-  );
-  --dsa-hero--below__overlay--background: linear-gradient(
-    0deg,
-    var(--ks-background-color-default) 15%,
-    transparent 50%
-  );
-  --dsa-hero--left__overlay--background: radial-gradient(
-    var(--dsa-hero__textbox--max-width) var(--dsa-hero__textbox--max-width) at
-      calc(var(--dsa-section__content--padding) * 2) 50%,
-    var(--ks-color-bg) 100%,
-    var(--ks-color-primary-alpha-5) 100%
-  );
-}
-@container hero (min-width: 640px) {
-  .dsa-hero {
-    --dsa-hero--min-height: 21rem;
-    --dsa-hero--min-height_small: 13.35rem;
-    --dsa-hero__textbox--max-width: 50vw;
-  }
-}
-@container hero (min-width: 960px) {
-  .dsa-hero {
-    --dsa-hero--min-height: 31.5rem;
-    --dsa-hero--min-height_small: 15.8rem;
-  }
-}
-@container hero (min-width: 1024px) {
-  .dsa-hero {
-    --dsa-hero--min-height: 42rem;
-    --dsa-hero--min-height_small: 20rem;
-    --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
-  }
+  --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%);
 }
 
-.l-container--hero {
+.l-container--visual {
   /* stylelint-disable-next-line property-no-unknown */
-  container-name: hero;
+  container-name: visual;
 }
 
 .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__textbox--background-color,
-    var(--dsa-overlay-box_transparent--background-color)
-  );
+  --c-visual_box--background: var(--dsa-hero__texbox--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-card));
+  --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));
-  --c-visual_text--font: var(--dsa-hero__copy--font, var(--ks-font-copy-m));
+  --c-visual_text--font: var(--dsa-hero__copy--font, var(--dsa-rich-text--font));
 }
 .c-visual.dsa-hero--highlight-text.c-visual {
   --dsa-hero__copy--font: var(--dsa-hero_highlight-text__copy--font, var(--ks-font-copy-l));
@@ -87,34 +37,22 @@
   --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 hero (min-width: 640px) {
+@container visual (min-width: 640px) {
   .c-visual.dsa-hero {
-    --c-visual_overlay--background: var(
-      --dsa-hero__overlay--background,
-      radial-gradient(50% 125% at 100% 0%, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-bg-alpha-4) 100%)
+    --c-visual_overlay--background: radial-gradient(
+      50% 125% at 100% 0%,
+      var(--ks-color-primary-alpha-5) 0%,
+      var(--ks-color-bg-alpha-5) 100%
     );
   }
   .c-visual.dsa-hero.dsa-hero--content-below {
     --c-visual_overlay--background: var(
-      --dsa-hero--below__overlay--background,
-      linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
-    );
-  }
-  .c-visual.dsa-hero.dsa-hero--content-left {
-    --c-visual_overlay--background: var(
-      --dsa-hero--left__overlay--background,
+      --dsa-hero__overlay--background,
       linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
     );
   }
   .c-visual.dsa-hero .c-visual__box {
-    --c-visual_box--max-width: var(--dsa-hero__textbox--max-width, var(--dsa-content--width_narrow));
-  }
-  .c-visual.dsa-hero .c-visual__box:not(.c-visual__box--transparent) {
-    backdrop-filter: var(--dsa-hero__textbox--backdrop-filter, var(--dsa-overlay-box_transparent--backdrop-filter));
-    box-shadow: var(--dsa-hero__textbox--box-shadow, var(--ks-box-shadow-card));
+    --c-visual_box--max-width: 50rem;
   }
 }
 
@@ -136,13 +74,9 @@
   padding: var(--c-visual_box--padding);
 }
 .c-visual.dsa-hero .c-visual__content--indent {
-  max-width: var(--dsa-content--width_wide);
+  max-width: var(--l-section--content-width-wide);
 }
-.c-visual.dsa-hero .c-visual__continue-btn {
-  color: var(--dsa-overlay-text--text-color, var(--ks-color-fg));
-  filter: drop-shadow(var(--dsa-overlay-text--shadow, 0 0 10px var(--ks-color-bg-inverted-alpha-3-base)));
-}
-@container hero (min-width: 640px) {
+@container visual (min-width: 640px) {
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
     position: relative;
   }
@@ -150,17 +84,14 @@
     height: var(--c-visual--min-height);
   }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content {
-    padding: 0 var(--dsa-content--horizontal-spacing);
+    padding: 0 var(--dsa-content--spacing);
     margin-top: -10%;
     position: relative;
   }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
-    --c-visual_box--max-width: var(--dsa-hero_below__textbox--max-width, var(--dsa-content--width_default));
-  }
-  .c-visual.dsa-hero.c-visual--no-crop {
-    --c-visual--min-height: 0;
+    --c-visual_box--max-width: var(--l-section--content-width-default);
   }
-  @container hero (min-width: 640px) {
+  @container visual (min-width: 640px) {
     .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
       height: fit-content;
     }
@@ -172,7 +103,7 @@
   .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full {
     height: fit-content;
   }
-  @container hero (min-width: 640px) {
+  @container visual (min-width: 640px) {
     .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image {
       height: fit-content;
     }

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

@@ -67,14 +67,13 @@
           },
           "icon": {
             "type": "string",
-            "format": "icon",
             "title": "Icon",
             "description": "Choose an icon"
           },
-          "url": {
+          "target": {
             "type": "string",
-            "title": "URL",
-            "description": "The URL to link to when the button is clicked",
+            "title": "Target",
+            "description": "Target that should be linked, makes the button behave like a link semantically",
             "format": "uri"
           }
         },
@@ -157,18 +156,11 @@
         "center",
         "below",
         "left",
-        "right",
-        "corner"
+        "right"
       ],
       "type": "string",
       "default": "bottom"
     },
-    "inverted": {
-      "type": "boolean",
-      "title": "Inverted",
-      "description": "Inverted color scheme for the box",
-      "default": false
-    },
     "type": {
       "const": "hero"
     }

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

@@ -58,8 +58,8 @@
           "icon": {
             "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/icon"
           },
-          "url": {
-            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/url"
+          "target": {
+            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
           }
         }
       }
@@ -73,15 +73,9 @@
     "textPosition": {
       "title": "Module aligment",
       "description": "Choose the alginment of the module content",
-      "enum": ["center", "below", "left", "right", "corner"],
+      "enum": ["center", "below", "left", "right"],
       "type": "string",
       "default": "bottom"
-    },
-    "inverted": {
-      "type": "boolean",
-      "title": "Inverted",
-      "description": "Inverted color scheme for the box",
-      "default": false
     }
   },
   "additionalProperties": false

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { HeroProps } from "../../HeroProps-40f6c7f5.js";
+import { HeroProps } from "../../HeroProps-cf82a16d.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

@@ -8,51 +8,49 @@ 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, inverted, image, overlay, textbox, className, 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: "hero", 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, skipButton: height === "fullScreen" ? true : false, inverted: true, box: {
-                        background: textbox === true ? "solid" : "transparent",
-                        enabled: true,
-                        vertical: textPosition === "below" || textPosition === "corner"
-                            ? "bottom"
+        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"
+                        ? "left"
+                        : textPosition === "right"
+                            ? "right"
                             : "center",
-                        horizontal: textPosition === "left" || textPosition === "corner"
-                            ? "left"
-                            : textPosition === "right"
-                                ? "right"
-                                : "center",
-                        link: {
-                            // @ts-expect-error
-                            buttons,
-                            colorNeutral,
-                            enabled: buttons.length > 0,
-                            arrangement: textPosition === "below" || textPosition === "center"
-                                ? "center"
-                                : "left",
-                        },
-                        headline: {
-                            align: textPosition === "below" || textPosition === "center"
-                                ? "center"
-                                : "left",
-                            text: headline,
-                            sub: sub,
-                            level: "h3",
-                            style: highlightText ? "h1" : undefined,
-                        },
-                        text: text,
-                    }, media: {
-                        mode: "image",
-                        image: {
-                            srcMobile: image.srcMobile,
-                            srcTablet: image.srcTablet,
-                            srcDesktop: image.srcDesktop,
-                            src: image.src,
-                        },
-                    } }) }) }) }));
+                    link: {
+                        // @ts-expect-error
+                        buttons,
+                        colorNeutral,
+                        enabled: buttons.length > 0,
+                        arrangement: textPosition === "below" || textPosition === "center"
+                            ? "center"
+                            : "left",
+                    },
+                    headline: {
+                        align: textPosition === "below" || textPosition === "center"
+                            ? "center"
+                            : "left",
+                        text: headline,
+                        sub: sub,
+                        level: "h3",
+                        style: highlightText ? "h1" : undefined,
+                    },
+                    text: text,
+                }, media: {
+                    mode: "image",
+                    image: {
+                        srcMobile: image.srcMobile,
+                        srcTablet: image.srcTablet,
+                        srcDesktop: image.srcDesktop,
+                        src: image.src,
+                    },
+                } }) }) }));
 });
 const HeroContext = createContext(HeroContextDefault);
 const Hero = forwardRef((props, ref) => {

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

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