@kickstartds/ds-agency-premium 1.5.39--canary.1081.bfadc60.0 → 1.5.40

package/dist/BlogOverviewProps-9f207f1c.d.ts

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-83d399b4.js";
+import { SectionProps } from "./SectionProps-7a46a8ad.js";
 import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
 import { CtaProps } from "./CtaProps-93230a76.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";

package/dist/BlogPostProps-6b3cff22.d.ts

@@ -5,7 +5,7 @@
  */
 import { BlogHeadProps } from "./BlogHeadProps-3f6e4072.js";
 import { BlogAsideProps } from "./BlogAsideProps-d9decb7c.js";
-import { SectionProps } from "./SectionProps-83d399b4.js";
+import { SectionProps } from "./SectionProps-7a46a8ad.js";
 import { CtaProps } from "./CtaProps-93230a76.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/DividerProps-2ef31901.d.ts

@@ -0,0 +1,26 @@
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * Choose a variant for the divider
+ */
+type StyleOfTheDivider = "default" | "accent";
+/**
+ * Add additional css classes that should be applied to the divider
+ */
+type AdditionalClasses = string;
+/**
+ * Optional custom component identifier
+ */
+type KsComponentAttribute = string;
+/**
+ * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
+ */
+interface DividerProps {
+    variant?: StyleOfTheDivider;
+    className?: AdditionalClasses;
+    component?: KsComponentAttribute;
+}
+export { StyleOfTheDivider, AdditionalClasses, KsComponentAttribute, DividerProps };

package/dist/HtmlProps-8e3e725a.d.ts

@@ -0,0 +1,23 @@
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript 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;
+}
+export { HTMLString, AdditionalClasses, KsComponentAttribute, HtmlProps };

package/dist/PageProps-aa29c554.d.ts

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-83d399b4.js";
+import { SectionProps } from "./SectionProps-7a46a8ad.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render on the page

package/dist/{SectionProps-83d399b4.d.ts → SectionProps-7a46a8ad.d.ts}

@@ -4,10 +4,12 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 import { CtaProps } from "./CtaProps-93230a76.js";
+import { DividerProps } from "./DividerProps-2ef31901.js";
 import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-b05859d6.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-cf82a16d.js";
+import { HtmlProps } from "./HtmlProps-8e3e725a.js";
 import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
@@ -102,7 +104,7 @@ type TileWidth = "smallest" | "default" | "medium" | "large" | "largest";
 /**
  * Allowed components for content
  */
-type Content = (CtaProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
+type Content = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
 /**
  * Buttons of the Button Group
  */

package/dist/components/blog-overview/blog-overview.schema.dereffed.json

@@ -396,6 +396,39 @@
                   },
                   "additionalProperties": false
                 },
+                {
+                  "$schema": "http://json-schema.org/draft-07/schema#",
+                  "$id": "http://schema.mydesignsystem.com/divider.schema.json",
+                  "title": "Divider",
+                  "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.",
+                  "type": "object",
+                  "properties": {
+                    "variant": {
+                      "title": "Style of the divider",
+                      "type": "string",
+                      "description": "Choose a variant for the divider",
+                      "enum": [
+                        "default",
+                        "accent"
+                      ],
+                      "default": "default"
+                    },
+                    "className": {
+                      "type": "string",
+                      "title": "Additional Classes",
+                      "description": "Add additional css classes that should be applied to the divider"
+                    },
+                    "component": {
+                      "title": "`ks-component` attribute",
+                      "description": "Optional custom component identifier",
+                      "type": "string"
+                    },
+                    "type": {
+                      "const": "divider"
+                    }
+                  },
+                  "additionalProperties": false
+                },
                 {
                   "$schema": "http://json-schema.org/draft-07/schema#",
                   "$id": "http://schema.mydesignsystem.com/faq.schema.json",
@@ -858,6 +891,36 @@
                   },
                   "additionalProperties": false
                 },
+                {
+                  "$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>Hello world!</p>"
+                      ]
+                    },
+                    "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
+                },
                 {
                   "$schema": "http://json-schema.org/draft-07/schema#",
                   "$id": "http://schema.mydesignsystem.com/image-story.schema.json",

package/dist/components/blog-post/blog-post.schema.dereffed.json

@@ -664,6 +664,39 @@
                   },
                   "additionalProperties": false
                 },
+                {
+                  "$schema": "http://json-schema.org/draft-07/schema#",
+                  "$id": "http://schema.mydesignsystem.com/divider.schema.json",
+                  "title": "Divider",
+                  "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.",
+                  "type": "object",
+                  "properties": {
+                    "variant": {
+                      "title": "Style of the divider",
+                      "type": "string",
+                      "description": "Choose a variant for the divider",
+                      "enum": [
+                        "default",
+                        "accent"
+                      ],
+                      "default": "default"
+                    },
+                    "className": {
+                      "type": "string",
+                      "title": "Additional Classes",
+                      "description": "Add additional css classes that should be applied to the divider"
+                    },
+                    "component": {
+                      "title": "`ks-component` attribute",
+                      "description": "Optional custom component identifier",
+                      "type": "string"
+                    },
+                    "type": {
+                      "const": "divider"
+                    }
+                  },
+                  "additionalProperties": false
+                },
                 {
                   "$schema": "http://json-schema.org/draft-07/schema#",
                   "$id": "http://schema.mydesignsystem.com/faq.schema.json",
@@ -1126,6 +1159,36 @@
                   },
                   "additionalProperties": false
                 },
+                {
+                  "$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>Hello world!</p>"
+                      ]
+                    },
+                    "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
+                },
                 {
                   "$schema": "http://json-schema.org/draft-07/schema#",
                   "$id": "http://schema.mydesignsystem.com/image-story.schema.json",

package/dist/components/divider/divider.css

@@ -1,13 +1,22 @@
 .dsa-divider {
-  --dsa-divider--background: var(--ks-border-color-default);
-  --dsa-divider--background_accent: var(--ks-border-color-accent);
+  --dsa-divider--background: var(--ks-border-color-interface);
+  --dsa-divider--background_accent: var(--ks-border-color-interface);
   --dsa-divider--height: var(--ks-border-width-default);
 }
 
 hr.c-divider {
-  --c-divider--background: var(--dsa-divider--background, var(--ks-border-color-default));
-  --c-divider--height: var(--dsa-divider--height, var(--ks-border-width-default));
+  --c-divider--background: var(
+    --dsa-divider--background,
+    var(--ks-border-color-default)
+  );
+  --c-divider--height: var(
+    --dsa-divider--height,
+    var(--ks-border-width-default)
+  );
 }
 hr.c-divider--accent {
-  --c-divider--background: var(--dsa-divider--background_accent, var(--ks-border-color-accent));
+  --c-divider--background: var(
+    --dsa-divider--background_accent,
+    var(--ks-border-color-accent)
+  );
 }

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

@@ -1,31 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } 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 json-schema-to-typescript to regenerate this file.
- */
-/**
- * Choose a variant for the divider
- */
-type StyleOfTheDivider = "default" | "accent";
-/**
- * Add additional css classes that should be applied to the divider
- */
-type AdditionalClasses = string;
-/**
- * Optional custom component identifier
- */
-type KsComponentAttribute = string;
-/**
- * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
- */
-interface DividerProps {
-    variant?: StyleOfTheDivider;
-    className?: AdditionalClasses;
-    component?: KsComponentAttribute;
-}
+import { DividerProps } from "../../DividerProps-2ef31901.js";
 declare const DividerContextDefault: import("react").ForwardRefExoticComponent<DividerProps & HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;
 declare const DividerContext: import("react").Context<import("react").ForwardRefExoticComponent<DividerProps & HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>>;
 declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;

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

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

@@ -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;
+  left: calc(100% + 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);
@@ -128,6 +140,10 @@
   text-align: right;
   margin-left: auto;
 }
+.dsa-headline--align-right .dsa-headline__anchor {
+  left: auto;
+  right: calc(100% + var(--ks-spacing-inline-s));
+}
 
 .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;

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) })), props.id && level === "h2" ? (jsx("a", { href: `#${props.id}`, className: "dsa-headline__anchor", children: jsx(TagName, { className: classnames("dsa-headline__headline"), children: renderContent(text) }) })) : (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/html/html.schema.dereffed.json

@@ -0,0 +1,30 @@
+{
+  "$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>Hello world!</p>"
+      ]
+    },
+    "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,7 +1,7 @@
 {
   "$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": {

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

@@ -1,30 +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>>;
-export type { HTMLProps };
+import { HtmlProps } from "../../HtmlProps-8e3e725a.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/page/page.schema.dereffed.json

@@ -396,6 +396,39 @@
                   },
                   "additionalProperties": false
                 },
+                {
+                  "$schema": "http://json-schema.org/draft-07/schema#",
+                  "$id": "http://schema.mydesignsystem.com/divider.schema.json",
+                  "title": "Divider",
+                  "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.",
+                  "type": "object",
+                  "properties": {
+                    "variant": {
+                      "title": "Style of the divider",
+                      "type": "string",
+                      "description": "Choose a variant for the divider",
+                      "enum": [
+                        "default",
+                        "accent"
+                      ],
+                      "default": "default"
+                    },
+                    "className": {
+                      "type": "string",
+                      "title": "Additional Classes",
+                      "description": "Add additional css classes that should be applied to the divider"
+                    },
+                    "component": {
+                      "title": "`ks-component` attribute",
+                      "description": "Optional custom component identifier",
+                      "type": "string"
+                    },
+                    "type": {
+                      "const": "divider"
+                    }
+                  },
+                  "additionalProperties": false
+                },
                 {
                   "$schema": "http://json-schema.org/draft-07/schema#",
                   "$id": "http://schema.mydesignsystem.com/faq.schema.json",
@@ -858,6 +891,36 @@
                   },
                   "additionalProperties": false
                 },
+                {
+                  "$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>Hello world!</p>"
+                      ]
+                    },
+                    "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
+                },
                 {
                   "$schema": "http://json-schema.org/draft-07/schema#",
                   "$id": "http://schema.mydesignsystem.com/image-story.schema.json",