@kickstartds/ds-agency-premium 1.6.0--canary.18.1017.0 → 1.6.0--canary.19.1100.0

package/dist/components/blog-teaser/index.js

@@ -29,7 +29,6 @@ const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaser
                 items: teaserMetaItems,
             }, link: link
                 ? {
-                    label: link.label || "Read more",
                     // @ts-expect-error
                     target: link.url,
                 }

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

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

package/dist/components/button/button.schema.json

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

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

@@ -3,4 +3,5 @@ import { HTMLAttributes, FC, PropsWithChildren } from "react";
 import { ButtonProps } from "../../ButtonProps-03ff6d21.js";
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 declare const ButtonProvider: FC<PropsWithChildren>;
+export type { ButtonProps };
 export { Button, ButtonProvider };

package/dist/components/button-group/button-group.schema.dereffed.json

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

package/dist/components/button-group/index.d.ts

@@ -37,4 +37,5 @@ interface ButtonGroupProps {
 declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const ButtonGroupProvider: FC<PropsWithChildren>;
 declare const useButtonGroup: () => (props: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+export type { ButtonGroupProps };
 export { ButtonGroup, ButtonGroupProvider, useButtonGroup };

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

@@ -67,7 +67,8 @@
         "type": "object",
         "properties": {
           "icon": {
-            "type": "string"
+            "type": "string",
+            "format": "icon"
           },
           "label": {
             "type": "string"

package/dist/components/contact/contact.schema.json

@@ -54,7 +54,8 @@
         "type": "object",
         "properties": {
           "icon": {
-            "type": "string"
+            "type": "string",
+            "format": "icon"
           },
           "label": {
             "type": "string"

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

@@ -69,4 +69,5 @@ declare const ContactContextDefault: import("react").ForwardRefExoticComponent<C
 declare const ContactContext: import("react").Context<import("react").ForwardRefExoticComponent<ContactProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>>;
 declare const Contact: import("react").ForwardRefExoticComponent<ContactProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const ContactProvider: FC<PropsWithChildren>;
+export type { ContactProps };
 export { ContactContextDefault, ContactContext, Contact, ContactProvider };

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

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

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

@@ -4,4 +4,5 @@ import { CtaProps } from "../../CtaProps-93230a76.js";
 declare const CtaContextDefault: import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const CtaContext: import("react").Context<import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Cta: import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { CtaProps };
 export { CtaContextDefault, CtaContext, Cta };

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,33 +1,9 @@
 /// <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>>;
 declare const DividerProvider: FC<PropsWithChildren>;
+export type { DividerProps };
 export { DividerContextDefault, DividerContext, Divider, DividerProvider };

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

@@ -4,4 +4,5 @@ import { FaqProps } from "../../FaqProps-ad618cd5.js";
 declare const FaqContextDefault: import("react").ForwardRefExoticComponent<FaqProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const FaqContext: import("react").Context<import("react").ForwardRefExoticComponent<FaqProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Faq: import("react").ForwardRefExoticComponent<FaqProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { FaqProps };
 export { FaqContextDefault, FaqContext, Faq };

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

@@ -7,6 +7,7 @@
   "properties": {
     "icon": {
       "type": "string",
+      "format": "icon",
       "title": "Icon",
       "description": "The icon for the feature",
       "examples": [

package/dist/components/feature/feature.schema.json

@@ -7,6 +7,7 @@
   "properties": {
     "icon": {
       "type": "string",
+      "format": "icon",
       "title": "Icon",
       "description": "The icon for the feature",
       "examples": ["person"]

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

@@ -4,4 +4,5 @@ import { FeatureProps } from "../../FeatureProps-f8a75850.js";
 declare const FeatureContextDefault: import("react").ForwardRefExoticComponent<FeatureProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const FeatureContext: import("react").Context<import("react").ForwardRefExoticComponent<FeatureProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Feature: import("react").ForwardRefExoticComponent<FeatureProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>;
+export type { FeatureProps };
 export { FeatureContextDefault, FeatureContext, Feature };

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

@@ -61,6 +61,7 @@
         "properties": {
           "icon": {
             "type": "string",
+            "format": "icon",
             "title": "Icon",
             "description": "The icon for the feature",
             "examples": [

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

@@ -4,4 +4,5 @@ import { FeaturesProps } from "../../FeaturesProps-b05859d6.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/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/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

@@ -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);
@@ -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.schema.dereffed.json

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

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

@@ -4,4 +4,5 @@ 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/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,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-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/html/index.js

@@ -1,9 +1,35 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, createContext, useContext } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useEffect, createContext, useContext } from 'react';
 import classnames from 'classnames';
 
-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 parser = new DOMParser();
+const copyScriptTag = (original) => {
+    if (original.tagName !== "SCRIPT") {
+        return original;
+    }
+    const copy = document.createElement("script");
+    for (const attr of original.attributes) {
+        copy.setAttribute(attr.name, attr.value);
+    }
+    copy.textContent = original.textContent;
+    return copy;
+};
+const HtmlContextDefault = forwardRef(({ html, className, component, ...props }, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    useEffect(() => {
+        if (html && ref.current) {
+            const doc = parser.parseFromString(html, "text/html");
+            const elements = [...doc.head.children, ...doc.body.children];
+            const insertedElements = elements.map((element) => ref.current.appendChild(copyScriptTag(element)));
+            return () => {
+                for (const insertedElement of insertedElements) {
+                    insertedElement?.remove();
+                }
+            };
+        }
+    }, [html, ref.current]);
+    return (jsx("div", { ref: ref, className: classnames("c-html", className), "ks-component": component, ...props }));
 });
 const HtmlContext = createContext(HtmlContextDefault);
 const Html = forwardRef((props, ref) => {

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

@@ -84,4 +84,5 @@ interface ImageProps {
 }
 declare const Image: import("react").ForwardRefExoticComponent<ImageProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLImageElement>>;
 declare const ImageProvider: FC<PropsWithChildren>;
+export type { ImageProps };
 export { Image, ImageProvider };

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"
           },

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

@@ -4,4 +4,5 @@ import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
 declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { ImageStoryProps };
 export { ImageStoryContextDefault, ImageStoryContext, ImageStory };

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

@@ -5,4 +5,5 @@ declare const ImageTextContextDefault: import("react").ForwardRefExoticComponent
 declare const ImageTextContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageTextProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageText: import("react").ForwardRefExoticComponent<ImageTextProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageTextProvider: FC<ImageTextProps & HTMLAttributes<HTMLDivElement>>;
+export type { ImageTextProps };
 export { ImageTextContextDefault, ImageTextContext, ImageText, ImageTextProvider };

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

@@ -4,4 +4,5 @@ import { LogoProps } from "../../LogoProps-01796f0a.js";
 declare const LogoContextDefault: import("react").ForwardRefExoticComponent<LogoProps & ImgHTMLAttributes<HTMLImageElement> & import("react").RefAttributes<HTMLImageElement>>;
 declare const LogoContext: import("react").Context<import("react").ForwardRefExoticComponent<LogoProps & ImgHTMLAttributes<HTMLImageElement> & import("react").RefAttributes<HTMLImageElement>>>;
 declare const Logo: import("react").ForwardRefExoticComponent<LogoProps & ImgHTMLAttributes<HTMLImageElement> & import("react").RefAttributes<HTMLImageElement>>;
+export type { LogoProps };
 export { LogoContextDefault, LogoContext, Logo };

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

@@ -4,4 +4,5 @@ import { LogosProps } from "../../LogosProps-f9474fe2.js";
 declare const LogosContextDefault: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const LogosContext: import("react").Context<import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Logos: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { LogosProps };
 export { LogosContextDefault, LogosContext, Logos };

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

@@ -4,4 +4,5 @@ import { MosaicProps } from "../../MosaicProps-d52c7151.js";
 declare const MosaicContextDefault: import("react").ForwardRefExoticComponent<MosaicProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const MosaicContext: import("react").Context<import("react").ForwardRefExoticComponent<MosaicProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Mosaic: import("react").ForwardRefExoticComponent<MosaicProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { MosaicProps };
 export { MosaicContextDefault, MosaicContext, Mosaic };

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

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

package/dist/components/nav-dropdown/index.d.ts

@@ -19,4 +19,5 @@ interface NavDropdownProps {
     className?: string;
 }
 declare const NavDropdown: FC<NavDropdownProps>;
+export type { NavDropdownProps };
 export { NavDropdown };

package/dist/components/nav-flyout/index.d.ts

@@ -31,4 +31,5 @@ interface NavFlyoutProps {
 declare const NavFlyoutContextDefault: import("react").ForwardRefExoticComponent<NavFlyoutProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 declare const NavFlyoutContext: import("react").Context<import("react").ForwardRefExoticComponent<NavFlyoutProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>>;
 declare const NavFlyout: import("react").ForwardRefExoticComponent<NavFlyoutProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export type { NavFlyoutProps };
 export { NavFlyoutContextDefault, NavFlyoutContext, NavFlyout };

package/dist/components/nav-main/index.d.ts

@@ -57,4 +57,5 @@ interface CTA {
 declare const NavMainContextDefault: import("react").ForwardRefExoticComponent<NavMainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const NavMainContext: import("react").Context<import("react").ForwardRefExoticComponent<NavMainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const NavMain: import("react").ForwardRefExoticComponent<NavMainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { NavMainProps };
 export { NavMainContextDefault, NavMainContext, NavMain };

package/dist/components/nav-topbar/index.d.ts

@@ -26,4 +26,5 @@ interface NavTopbarProps {
 declare const NavTopbarContextDefault: import("react").ForwardRefExoticComponent<NavTopbarProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 declare const NavTopbarContext: import("react").Context<import("react").ForwardRefExoticComponent<NavTopbarProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>>;
 declare const NavTopbar: import("react").ForwardRefExoticComponent<NavTopbarProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export type { NavTopbarProps };
 export { NavTopbarContextDefault, NavTopbarContext, NavTopbar };

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

@@ -1,4 +1,5 @@
 import { PageProps } from "../../PageProps-aa29c554.js";
 import { FC, PropsWithChildren } from "react";
 declare const Page: FC<PropsWithChildren<PageProps>>;
+export type { PageProps };
 export { Page };