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

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/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/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

@@ -17,7 +17,7 @@ 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 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,
                 } })] }) })));

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

@@ -17,8 +17,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"

package/dist/components/html/Html.client.d.ts

@@ -0,0 +1,5 @@
+declare class Html {
+    static identifier: string;
+    constructor(element: any);
+}
+export { Html as default };

package/dist/components/html/Html.client.js

@@ -0,0 +1,41 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+const consentButtonSelector = ".dsa-html__consent-button";
+const copyScriptTag = (original) => {
+    if (original.tagName === "SCRIPT") {
+        const copy = document.createElement("script");
+        for (const attr of original.attributes) {
+            copy.setAttribute(attr.name, attr.value);
+        }
+        copy.textContent = original.textContent;
+        return copy;
+    }
+    return original;
+};
+class Html extends Component {
+    constructor(element) {
+        super(element);
+        const consentButton = element.querySelector(consentButtonSelector);
+        const replaceHtml = () => {
+            const template = element.querySelector("template");
+            if (template) {
+                const elements = [...template.content.children].map(copyScriptTag);
+                element.replaceChildren(...elements);
+                consentButton?.removeEventListener("click", replaceHtml);
+            }
+        };
+        if (consentButton) {
+            consentButton.addEventListener("click", replaceHtml);
+            this.onDisconnect(() => {
+                consentButton.removeEventListener("click", replaceHtml);
+            });
+        }
+        else {
+            replaceHtml();
+        }
+    }
+}
+Html.identifier = "dsa.html";
+define(Html.identifier, Html);
+
+export { Html as default };

package/dist/components/html/html.css

@@ -0,0 +1,52 @@
+.dsa-html {
+  --dsa-html__consent--color: var(--ks-text-color-display);
+  --dsa-html__consent--font: var(--ks-font-copy-m);
+  --dsa-html__consent--font-weight: var(--ks-font-weight-regular);
+  --dsa-html__consent--background: var(--ks-color-fg-inverted-alpha-2);
+}
+
+.dsa-html__consent {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--ks-spacing-stack-s);
+  background-position: center;
+  background-size: cover;
+  padding: var(--ks-spacing-inset-l);
+}
+.dsa-html__consent .c-rich-text {
+  color: var(--dsa-html__consent--color, var(--ks-text-color-display));
+  font: var(--dsa-html__consent--font, var(--ks-font-interface-m));
+  font-weight: var(--dsa-html__consent--font-weight, var(--ks-font-weight-regular));
+  text-align: center;
+}
+.dsa-html__consent:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  background-color: var(--dsa-html__consent--background, var(--ks-color-fg-inverted-alpha-6));
+}
+.dsa-html__consent > * {
+  z-index: 1;
+}
+.dsa-html__consent .l-container {
+  container-type: normal;
+}
+.dsa-html__consent--sixteen-to-nine {
+  aspect-ratio: 16/9;
+}
+.dsa-html__consent--sixteen-to-ten {
+  aspect-ratio: 16/10;
+}
+.dsa-html__consent--four-to-three {
+  aspect-ratio: 4/3;
+}
+.dsa-html__consent--square {
+  aspect-ratio: 1;
+}

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

@@ -0,0 +1,61 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/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
+    },
+    "className": {
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the element",
+      "type": "string"
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string"
+    },
+    "type": {
+      "const": "html"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -1,14 +1,42 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.kickstartds.com/base/html.schema.json",
-  "title": "HTML",
+  "$id": "http://schema.mydesignsystem.com/html.schema.json",
+  "title": "Html",
   "description": "Display raw HTML.",
   "type": "object",
   "properties": {
     "html": {
       "title": "HTML string",
       "type": "string",
-      "examples": ["<p>Hello world!</p>"]
+      "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
     },
     "className": {
       "title": "Additional Classes",

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

@@ -1,29 +1,8 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-/* eslint-disable */
-/**
- * This file was automatically generated by json-schema-to-typescript.
- * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and run `yarn run schema` to regenerate this file.
- */
-type HTMLString = string;
-/**
- * Add additional css classes that should be applied to the element
- */
-type AdditionalClasses = string;
-/**
- * Optional custom component identifier
- */
-type KsComponentAttribute = string;
-/**
- * Display raw HTML.
- */
-interface HTMLProps {
-    html?: HTMLString;
-    className?: AdditionalClasses;
-    component?: KsComponentAttribute;
-}
-declare const HtmlContextDefault: import("react").ForwardRefExoticComponent<HTMLProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-declare const HtmlContext: import("react").Context<import("react").ForwardRefExoticComponent<HTMLProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
-declare const Html: import("react").ForwardRefExoticComponent<HTMLProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+import { HtmlProps } from "../../HtmlProps-9d091769.js";
+declare const HtmlContextDefault: import("react").ForwardRefExoticComponent<HtmlProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const HtmlContext: import("react").Context<import("react").ForwardRefExoticComponent<HtmlProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Html: import("react").ForwardRefExoticComponent<HtmlProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { HtmlProps };
 export { HtmlContextDefault, HtmlContext, Html };

package/dist/components/html/index.js

@@ -1,9 +1,23 @@
-import { jsx } from 'react/jsx-runtime';
+import "./html.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
+import { Button } from '@kickstartds/base/lib/button';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+import './Html.client.js';
+import '@kickstartds/core/lib/component';
 
-const HtmlContextDefault = forwardRef(({ html, className, component, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: classnames("c-html", className), dangerouslySetInnerHTML: { __html: html }, "ks-component": component, ...props }));
+const HtmlContextDefault = forwardRef(({ html, consent, consentText, consentBackgroundImage, consentButtonLabel, consentAspectRatio = "16:9", inverted, className, component = "dsa.html", ...props }, ref) => {
+    return (jsxs("div", { ref: ref, className: classnames("dsa-html", className), "ks-component": component, "ks-inverted": inverted ? "true" : undefined, ...props, children: [jsx("template", { dangerouslySetInnerHTML: { __html: html } }), consent && (jsxs("div", { style: {
+                    backgroundImage: consentBackgroundImage
+                        ? `url(${consentBackgroundImage})`
+                        : undefined,
+                }, className: classnames("dsa-html__consent", {
+                    "dsa-html__consent--sixteen-to-nine": consentAspectRatio === "16:9",
+                    "dsa-html__consent--sixteen-to-ten": consentAspectRatio === "16:10",
+                    "dsa-html__consent--four-to-three": consentAspectRatio === "4:3",
+                    "dsa-html__consent--square": consentAspectRatio === "1:1",
+                }), children: [consentText && jsx(RichText, { text: consentText }), jsx(Button, { type: "button", label: consentButtonLabel, className: "dsa-html__consent-button", variant: "primary" })] }))] }));
 });
 const HtmlContext = createContext(HtmlContextDefault);
 const Html = forwardRef((props, ref) => {

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

@@ -12,7 +12,7 @@
   --c-storytelling--vertical-padding: var(--dsa-image-story--vertical-padding, var(--ks-spacing-xl));
 }
 .c-storytelling.dsa-image-story .c-storytelling__box__content {
-  max-width: var(--l-section--content-width-narrow);
+  max-width: var(--dsa-content--width_narrow);
 }
 .c-storytelling.dsa-image-story.c-storytelling--three-to-two img {
   aspect-ratio: 3/2;

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

@@ -88,6 +88,7 @@
           },
           "icon": {
             "type": "string",
+            "format": "icon",
             "title": "Icon",
             "description": "Choose an icon"
           },