@kickstartds/ds-agency-premium 1.2.10--canary.171.76273d8.0 → 1.2.10--canary.178.33c3c92.0

package/dist/components/headline/headline.css

@@ -1,77 +1,107 @@
 :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
-  --g-headline--color: var(--ks-color-fg);
-  --g-headline--font-weight: var(--ks-font-weight-medium);
-  --c-headline--higlight-gradient: var(--g-gradient--higlight);
-}
-:root .c-headline, :root #root .c-headline, [ks-inverted] .c-headline, [ks-inverted] #root .c-headline, #root [ks-inverted] .c-headline, [ks-inverted] #root .c-headline, [ks-theme] .c-headline, [ks-theme] #root .c-headline, #root [ks-theme] .c-headline {
-  --c-headline--color: var(--g-headline--color);
-  --c-headline--font-weight: var(--g-headline--font-weight);
-  --c-headline--gap: 0.25em;
-}
-:root .c-headline--h1, :root #root .c-headline--h1, [ks-inverted] .c-headline--h1, [ks-inverted] #root .c-headline--h1, #root [ks-inverted] .c-headline--h1, [ks-inverted] #root .c-headline--h1, [ks-theme] .c-headline--h1, [ks-theme] #root .c-headline--h1, #root [ks-theme] .c-headline--h1 {
-  --c-headline--font: var(--ks-font-display-xxl);
-}
-:root .c-headline--h1 .c-headline__subheadline, :root #root .c-headline--h1 .c-headline__subheadline, [ks-inverted] .c-headline--h1 .c-headline__subheadline, [ks-inverted] #root .c-headline--h1 .c-headline__subheadline, #root [ks-inverted] .c-headline--h1 .c-headline__subheadline, [ks-inverted] #root .c-headline--h1 .c-headline__subheadline, [ks-theme] .c-headline--h1 .c-headline__subheadline, [ks-theme] #root .c-headline--h1 .c-headline__subheadline, #root [ks-theme] .c-headline--h1 .c-headline__subheadline {
-  --c-headline_subheadline--font: var(--ks-font-copy-l);
+  --dsa-headline--higlight-gradient: linear-gradient(90deg, var(--ks-color-secondary), var(--ks-color-primary));
+  --dsa-headline--color: var(--ks-text-color-display);
+  --dsa-headline--font-weight: var(--ks-font-weight-medium);
+  --dsa-headline__subheadline--color: var(--ks-text-color-primary);
+  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-headline--gap: 0.25em;
+  --dsa-headline_h1--font: var(--ks-font-display-xxl);
+  --dsa-headline_h1__subheadline--font: var(--ks-font-copy-l);
+  --dsa-headline_h2--font: var(--ks-font-display-xl);
+  --dsa-headline_h2__subheadline--font: var(--ks-font-copy-m);
+  --dsa-headline_h3--font: var(--ks-font-display-l);
+  --dsa-headline_h3__subheadline--font: var(--ks-font-copy-m);
+  --dsa-headline_h4--font: var(--ks-font-display-m);
+  --dsa-headline__p--font: var(--ks-font-copy-m);
 }
 @media (min-width: 42rem) {
-  :root .c-headline--h1 .c-headline__subheadline, :root #root .c-headline--h1 .c-headline__subheadline, [ks-inverted] .c-headline--h1 .c-headline__subheadline, [ks-inverted] #root .c-headline--h1 .c-headline__subheadline, #root [ks-inverted] .c-headline--h1 .c-headline__subheadline, [ks-inverted] #root .c-headline--h1 .c-headline__subheadline, [ks-theme] .c-headline--h1 .c-headline__subheadline, [ks-theme] #root .c-headline--h1 .c-headline__subheadline, #root [ks-theme] .c-headline--h1 .c-headline__subheadline {
-    --c-headline_subheadline--font: var(--ks-font-copy-xl);
+  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+    --dsa-headline_h1__subheadline--font: var(--ks-font-copy-xl);
   }
 }
-:root .c-headline--h2, :root #root .c-headline--h2, [ks-inverted] .c-headline--h2, [ks-inverted] #root .c-headline--h2, #root [ks-inverted] .c-headline--h2, [ks-inverted] #root .c-headline--h2, [ks-theme] .c-headline--h2, [ks-theme] #root .c-headline--h2, #root [ks-theme] .c-headline--h2 {
-  --c-headline--font: var(--ks-font-display-xl);
-}
 @media (min-width: 42rem) {
-  :root .c-headline--h2 .c-headline__subheadline, :root #root .c-headline--h2 .c-headline__subheadline, [ks-inverted] .c-headline--h2 .c-headline__subheadline, [ks-inverted] #root .c-headline--h2 .c-headline__subheadline, #root [ks-inverted] .c-headline--h2 .c-headline__subheadline, [ks-inverted] #root .c-headline--h2 .c-headline__subheadline, [ks-theme] .c-headline--h2 .c-headline__subheadline, [ks-theme] #root .c-headline--h2 .c-headline__subheadline, #root [ks-theme] .c-headline--h2 .c-headline__subheadline {
-    --c-headline_subheadline--font: var(--ks-font-copy-l);
+  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+    --dsa-headline_h2__subheadline--font: var(--ks-font-copy-l);
   }
 }
-:root .c-headline--h3, :root #root .c-headline--h3, [ks-inverted] .c-headline--h3, [ks-inverted] #root .c-headline--h3, #root [ks-inverted] .c-headline--h3, [ks-inverted] #root .c-headline--h3, [ks-theme] .c-headline--h3, [ks-theme] #root .c-headline--h3, #root [ks-theme] .c-headline--h3 {
-  --c-headline--font: var(--ks-font-display-l);
-}
-:root .c-headline--h4, :root #root .c-headline--h4, [ks-inverted] .c-headline--h4, [ks-inverted] #root .c-headline--h4, #root [ks-inverted] .c-headline--h4, [ks-inverted] #root .c-headline--h4, [ks-theme] .c-headline--h4, [ks-theme] #root .c-headline--h4, #root [ks-theme] .c-headline--h4 {
-  --c-headline--font: var(--ks-font-display-m);
-}
-:root .c-headline--p, :root #root .c-headline--p, [ks-inverted] .c-headline--p, [ks-inverted] #root .c-headline--p, #root [ks-inverted] .c-headline--p, [ks-inverted] #root .c-headline--p, [ks-theme] .c-headline--p, [ks-theme] #root .c-headline--p, #root [ks-theme] .c-headline--p {
-  --c-headline--font: var(--ks-font-copy-m);
-}
-:root .c-headline__subheadline, :root #root .c-headline__subheadline, [ks-inverted] .c-headline__subheadline, [ks-inverted] #root .c-headline__subheadline, #root [ks-inverted] .c-headline__subheadline, [ks-inverted] #root .c-headline__subheadline, [ks-theme] .c-headline__subheadline, [ks-theme] #root .c-headline__subheadline, #root [ks-theme] .c-headline__subheadline {
-  --c-headline_subheadline--font: var(--ks-font-copy-m);
-  --c-headline_subheadline--color: var(--ks-text-color-primary);
-  --c-headline_subheadline--font-weight: var(--ks-font-weight-semi-bold);
-}
 
-.c-headline {
+.dsa-headline {
   max-width: unset;
-  font: var(--c-headline--font);
   display: flex;
   flex-direction: column;
-  gap: var(--c-headline--gap);
+  gap: var(--dsa-headline--gap, 0.25em);
+}
+.dsa-headline .dsa-headline__headline {
+  font: var(--dsa-headline--font);
+}
+.dsa-headline .dsa-headline__subheadline {
+  font: var(--dsa-headline__subheadline--font);
+}
+.dsa-headline--h1 {
+  --dsa-headline--font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
+  --dsa-subheadline--font: var(--dsa-headline_h1__subheadline--font, var(--ks-font-copy-xl));
 }
-.c-headline__headline {
-  font: var(--c-headline--font);
-  font-weight: var(--c-headline--font-weight);
+.dsa-headline--h2 {
+  --dsa-headline--font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
+  --dsa-subheadline--font: var(--dsa-headline_h2__subheadline--font, var(--ks-font-copy-l));
 }
-.c-headline__subheadline {
+.dsa-headline--h3 {
+  --dsa-headline--font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
+  --dsa-subheadline--font: var(--dsa-headline_h3__subheadline--font, var(--ks-font-copy-l));
+}
+.dsa-headline--h4 {
+  --dsa-headline--font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
+  --dsa-subheadline--font: var(--dsa-headline_h4__subheadline--font, var(--ks-font-copy-m));
+}
+.dsa-headline--p {
+  --dsa-headline--font: var(--dsa-headline__p--font, var(--ks-font-copy-m));
+  --dsa-subheadline--font: var(--dsa-headline__p__subheadline--font, var(--ks-font-copy-s));
+}
+.dsa-headline .dsa-headline__headline {
+  font: var(--dsa-headline--font);
+  color: var(--dsa-headline--color, var(--ks-text-color-display));
+  font-weight: var(--dsa-headline--font-weight);
+  margin: 0;
+}
+.dsa-headline .dsa-headline__subheadline {
+  font: var(--dsa-subheadline--font);
   margin: 0;
   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-semi-bold));
+}
+.dsa-headline--space-after-minimum {
+  margin-bottom: var(--ks-spacing-stack-s);
 }
-.c-headline--align-center .c-headline__headline {
+.dsa-headline--space-after-small {
+  margin-bottom: var(--ks-spacing-stack-m);
+}
+.dsa-headline--space-after-large {
+  margin-bottom: var(--ks-spacing-stack-l);
+}
+.dsa-headline--align-center .dsa-headline__headline {
   text-align: center;
 }
-.c-headline--align-center .c-headline__subheadline {
+.dsa-headline--align-center .dsa-headline__subheadline {
+  text-align: center;
   margin: auto;
 }
+.dsa-headline--align-right .dsa-headline__headline {
+  text-align: right;
+}
+.dsa-headline--align-right .dsa-headline__subheadline {
+  text-align: right;
+  margin-left: auto;
+}
 
-.c-headline strong,
+.dsa-headline strong,
 h1 strong,
 h2 strong,
 h3 strong,
 h4 strong,
 h5 strong {
   font-weight: inherit;
-  background: var(--c-headline--higlight-gradient);
+  background: var(--dsa-headline--higlight-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

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

@@ -53,6 +53,6 @@ interface RenderFunctions {
     renderContent?: typeof defaultRenderFn;
     renderSubheadline?: typeof defaultRenderFn;
 }
-declare const Headline: import("react").ForwardRefExoticComponent<HeadlineProps & RenderFunctions & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+declare const Headline: import("react").ForwardRefExoticComponent<HeadlineProps & RenderFunctions & Omit<HTMLAttributes<HTMLElement>, "style"> & import("react").RefAttributes<HTMLElement>>;
 declare const HeadlineProvider: FC<PropsWithChildren>;
 export { Headline, HeadlineProvider };

package/dist/components/headline/index.js

@@ -10,7 +10,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 = markdownRenderFn, renderSubheadline = markdownRenderFn, ...props }, ref) => {
     const TagName = level;
-    return text || sub ? (jsxs("header", { className: classnames("c-headline", `c-headline--${style}`, style !== "none" && style !== level && `c-headline--${style}`, `c-headline--align-${align}`, spaceAfter && `c-headline--space-after-${spaceAfter}`, className), ref: ref, ...props, children: [sub && switchOrder && (jsx("p", { className: "c-headline__subheadline", children: renderSubheadline(sub) })), jsx(TagName, { className: classnames("c-headline__headline"), children: renderContent(text) }), sub && !switchOrder && (jsx("p", { className: "c-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,8 +1,16 @@
 .dsa-hero {
+  --dsa-hero__headline--color: var(--dsa-headline__headline--color);
   --dsa-hero__subheadline--color: var(--dsa-headline__subheadline--color);
-  --dsa-hero__box--background-color: var(--ks-color-bg-alpha-2);
-  --dsa-hero__text--color: var(--ks-text-color-default);
+  --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_highlight-text__copy--font: var(--ks-font-copy-l);
   --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
+  --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
+  --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%);
 }
 
 .l-container--visual {
@@ -15,19 +23,19 @@
   --c-visual_overlay--background: transparent;
 }
 .c-visual.dsa-hero .c-visual__box {
-  --c-visual_box--background: var(--dsa-hero__box--background-color, var(--ks-color-bg-alpha-2));
-  --c-visual_box--color: var(--dsa-hero__text--color, var(--ks-text-color-default));
-  --c-visual_subheadline--color: var(--ks-text-color-primary);
-  --c-visual_headline--color: var(--ks-color-fg);
-  --c-visual_box--border-radius: var(--ks-border-radius-surface);
-  --c-visual_box--padding: var(--ks-spacing-inset-squish-xl);
+  --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-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.dsa-hero--highlight-text.c-visual .c-visual__box {
-  --c-visual_text--font: var(--dsa-hero_highlight-text__box--font, var(--ks-font-copy-l));
+.c-visual.dsa-hero--highlight-text.c-visual {
+  --dsa-hero__copy--font: var(--dsa-hero_highlight-text__box--font, var(--ks-font-copy-l));
 }
-.c-visual.dsa-hero--color-neutral.c-visual .c-visual__box {
-  --c-visual_box--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
-  --c-visual_subheadline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
+.c-visual.dsa-hero--color-neutral.c-visual {
+  --dsa-hero__copy--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
+  --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));
 }
 @container visual (min-width: 640px) {
   .c-visual.dsa-hero {
@@ -38,15 +46,21 @@
     );
   }
   .c-visual.dsa-hero.dsa-hero--content-below {
-    --c-visual_overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
+    --c-visual_overlay--background: var(
+      --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: 50rem;
   }
 }
 
-.c-visual.dsa-hero .c-headline .c-headline__subheadline {
-  color: var(--dsa-visual__subheadline--color, var(--dsa-headline__subheadline--color, var(--ks-text-color-display)));
+.c-visual.dsa-hero .dsa-headline .dsa-headline__headline {
+  color: var(--dsa-hero__headline--color, var(--dsa-headline__headline--color, var(--ks-text-color-display)));
+}
+.c-visual.dsa-hero .dsa-headline .dsa-headline__subheadline {
+  color: var(--dsa-hero__subheadline--color, var(--dsa-headline__subheadline--color, var(--ks-text-color-primary)));
 }
 .c-visual.dsa-hero .c-button-group {
   --c-button-group--vertical-gutter: var(--ks-spacing-stack-m);

package/dist/components/image/image.css

@@ -1,12 +1,18 @@
-.c-image--square {
-  aspect-ratio: 1/1;
+.c-image {
+  --c-image--ratio-square: 1/1;
+  --c-image--ratio-wide: 4/3;
+  --c-image--ratio-landscape: 16/9;
+}
+
+.c-image {
   object-fit: cover;
 }
+.c-image--square {
+  aspect-ratio: var(--c-image--ratio-square);
+}
 .c-image--wide {
-  aspect-ratio: 4/3;
-  object-fit: cover;
+  aspect-ratio: var(--c-image--ratio-wide);
 }
 .c-image--landscape {
-  aspect-ratio: 16/9;
-  object-fit: cover;
+  aspect-ratio: var(--c-image--ratio-landscape);
 }

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

@@ -79,13 +79,13 @@
             "format": "image"
           },
           "media": {
-            "title": "TODO MEDIA TITLE",
-            "description": "TODO MEDIA DESCRIPTION",
+            "title": "Media for picture",
+            "description": "Media attribute for source",
             "type": "string"
           },
           "type": {
-            "title": "TODO TYPE TITLE",
-            "description": "TODO TYPE DESCRIPTION",
+            "title": "Type for picture",
+            "description": "Type attribute for source",
             "type": "string"
           }
         },

package/dist/components/image/image.schema.json

@@ -72,13 +72,13 @@
             "format": "image"
           },
           "media": {
-            "title": "TODO MEDIA TITLE",
-            "description": "TODO MEDIA DESCRIPTION",
+            "title": "Media for picture",
+            "description": "Media attribute for source",
             "type": "string"
           },
           "type": {
-            "title": "TODO TYPE TITLE",
-            "description": "TODO TYPE DESCRIPTION",
+            "title": "Type for picture",
+            "description": "Type attribute for source",
             "type": "string"
           }
         },

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

@@ -47,20 +47,20 @@ type Lazy = boolean;
  */
 type PictureSourceset1 = string;
 /**
- * TODO MEDIA DESCRIPTION
+ * Media attribute for source
  */
-type TODOMEDIATITLE = string;
+type MediaForPicture = string;
 /**
- * TODO TYPE DESCRIPTION
+ * Type attribute for source
  */
-type TODOTYPETITLE = string;
+type TypeForPicture = string;
 /**
  * Additional sources. This will result in a `picture`-Element
  */
 type Sources = {
     srcSet?: PictureSourceset1;
-    media?: TODOMEDIATITLE;
-    type?: TODOTYPETITLE;
+    media?: MediaForPicture;
+    type?: TypeForPicture;
 }[];
 /**
  * Set additional class(es) to the picture
@@ -82,6 +82,6 @@ interface ImageProps {
     sources?: Sources;
     pictureClassName?: ClassAttribute;
 }
-declare const Image: import("react").ForwardRefExoticComponent<ImageProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLImageElement>>;
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLImageElement>>;
 declare const ImageProvider: FC<PropsWithChildren>;
 export { Image, ImageProvider };

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

@@ -1,4 +1,15 @@
-.c-image-text--highlight {
-  --c-rich-text--font: var(--ks-font-copy-l);
-  --c-rich-text--color: var(--ks-color-fg);
+.dsa-image-text {
+  --dsa-image-text--font: var(--dsa-rich-text--font);
+  --dsa-image-text--color: var(--dsa-rich-text--color);
+  --dsa-image-text_highlight--font: var(--ks-font-copy-l);
+  --dsa-image-text_highlight--color: var(--ks-text-color-default);
+}
+
+.dsa-image-text .c-rich-text {
+  --c-rich-text--font: var(--dsa-image-text--font, var(--dsa-rich-text--font), var(--ks-font-copy-m));
+  --c-rich-text--color: var(--dsa-image-text--color, var(--dsa-rich-text--color), var(--ks-text-color-default));
+}
+.dsa-image-text--highlight.dsa-image-text .c-rich-text {
+  --c-rich-text--font: var(--dsa-image-text_highlight--font, var(--ks-font-copy-l));
+  --c-rich-text--color: var(--dsa-image-text_highlight--color, var(--ks-text-color-default));
 }

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

@@ -7,6 +7,7 @@
   "properties": {
     "text": {
       "type": "string",
+      "format": "markdown",
       "title": "Text",
       "description": "Text content to display beside the image",
       "examples": [
@@ -24,6 +25,7 @@
       "properties": {
         "src": {
           "type": "string",
+          "format": "image",
           "title": "Image Source",
           "description": "URL of the image to display",
           "examples": [

package/dist/components/image-text/image-text.schema.json

@@ -7,6 +7,7 @@
   "properties": {
     "text": {
       "type": "string",
+      "format": "markdown",
       "title": "Text",
       "description": "Text content to display beside the image",
       "examples": ["This is a sample text"]
@@ -22,6 +23,7 @@
       "properties": {
         "src": {
           "type": "string",
+          "format": "image",
           "title": "Image Source",
           "description": "URL of the image to display",
           "examples": ["http://example.com/image.jpg"]

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

@@ -1,5 +1,8 @@
-import { HTMLAttributes, FC, PropsWithChildren } from "react";
+/// <reference types="react" />
+import { HTMLAttributes, FC } from "react";
 import { ImageTextProps } from "../../ImageTextProps-9286cca4.js";
-declare const ImageText: FC<ImageTextProps & HTMLAttributes<HTMLElement>>;
-declare const ImageTextProvider: FC<PropsWithChildren<any>>;
-export { ImageText, ImageTextProvider };
+declare const ImageTextContextDefault: import("react").ForwardRefExoticComponent<ImageTextProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+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 { ImageTextContextDefault, ImageTextContext, ImageText, ImageTextProvider };

package/dist/components/image-text/index.js

@@ -1,20 +1,26 @@
 import "./image-text.css";
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { TextMediaContextDefault, TextMediaContext } from '@kickstartds/base/lib/text-media';
 import { Container } from '@kickstartds/core/lib/container';
 
-const ImageText = ({ text, image, layout, highlightText, ...props }) => (jsx(Fragment, { children: jsx(Container, { name: "text-media", children: jsx(TextMediaContextDefault, { className: classnames(highlightText ? "c-image-text--highlight" : "", "c-image-text"), ...props, text: text, media: [
-                {
-                    image: {
-                        src: image.src,
-                    },
+const ImageTextContextDefault = forwardRef(({ text, image, layout, highlightText, ...rest }, ref) => (jsx(Container, { name: "text-media", ref: ref, children: jsx(TextMediaContextDefault, { ...rest, className: classnames(highlightText ? "dsa-image-text--highlight" : "", "dsa-image-text"), text: text, media: [
+            {
+                image: {
+                    src: image.src,
                 },
-            ], mediaAlignment: layout === "above"
-                ? "above-center"
-                : layout === "below"
-                    ? "below-center"
-                    : layout }) }) }));
-const ImageTextProvider = (props) => (jsx(TextMediaContext.Provider, { ...props, value: ImageText }));
+            },
+        ], mediaAlignment: layout === "above"
+            ? "above-center"
+            : layout === "below"
+                ? "below-center"
+                : layout }) })));
+const ImageTextContext = createContext(ImageTextContextDefault);
+const ImageText = forwardRef((props, ref) => {
+    const Component = useContext(ImageTextContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+const ImageTextProvider = (props) => (jsx(TextMediaContext.Provider, { ...props, value: ImageTextContextDefault }));
 
-export { ImageText, ImageTextProvider };
+export { ImageText, ImageTextContext, ImageTextContextDefault, ImageTextProvider };

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

@@ -0,0 +1,27 @@
+/// <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 json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * The URL of the logo image
+ */
+type URL = string;
+/**
+ * The alt text of the logo
+ */
+type Caption = string;
+/**
+ * Logo entry for Logos component
+ */
+interface LogoProps {
+    src: URL;
+    alt?: Caption;
+}
+declare const LogoContextDefault: import("react").ForwardRefExoticComponent<LogoProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const LogoContext: import("react").Context<import("react").ForwardRefExoticComponent<LogoProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Logo: import("react").ForwardRefExoticComponent<LogoProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { LogoContextDefault, LogoContext, Logo };

package/dist/components/logo/index.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { Picture } from '@kickstartds/base/lib/picture';
+
+const LogoContextDefault = forwardRef(({ src, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: "c-logos__logo", children: jsx(Picture, { src: src }) })));
+const LogoContext = createContext(LogoContextDefault);
+const Logo = forwardRef((props, ref) => {
+    const Component = useContext(LogoContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+
+export { Logo, LogoContext, LogoContextDefault };

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

@@ -0,0 +1,38 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/logo.schema.json",
+  "title": "Logo",
+  "description": "Logo entry for Logos component",
+  "type": "object",
+  "properties": {
+    "src": {
+      "type": "string",
+      "format": "image",
+      "title": "URL",
+      "description": "The URL of the logo image",
+      "examples": [
+        "img/logos/logoipsum-212.svg",
+        "img/logos/logoipsum-217.svg",
+        "img/logos/logoipsum-239.svg",
+        "img/logos/logoipsum-244.svg",
+        "img/logos/logoipsum-250.svg",
+        "img/logos/logoipsum-286.svg"
+      ]
+    },
+    "alt": {
+      "type": "string",
+      "title": "Caption",
+      "description": "The alt text of the logo",
+      "examples": [
+        "Logo 1"
+      ]
+    },
+    "type": {
+      "const": "logo"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "src"
+  ]
+}

package/dist/components/logo/logo.schema.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/logo.schema.json",
+  "title": "Logo",
+  "description": "Logo entry for Logos component",
+  "type": "object",
+  "properties": {
+    "src": {
+      "type": "string",
+      "format": "image",
+      "title": "URL",
+      "description": "The URL of the logo image",
+      "examples": [
+        "img/logos/logoipsum-212.svg",
+        "img/logos/logoipsum-217.svg",
+        "img/logos/logoipsum-239.svg",
+        "img/logos/logoipsum-244.svg",
+        "img/logos/logoipsum-250.svg",
+        "img/logos/logoipsum-286.svg"
+      ]
+    },
+    "alt": {
+      "type": "string",
+      "title": "Caption",
+      "description": "The alt text of the logo",
+      "examples": ["Logo 1"]
+    }
+  },
+  "additionalProperties": false,
+  "required": ["src"]
+}

package/dist/components/mosaic/mosaic.css

@@ -10,10 +10,10 @@
   display: flex;
   flex-direction: column;
 }
-.c-visual .c-headline {
+.c-visual .dsa-headline {
   --c-headline--color: var(--ks-color-fg);
 }
-.c-visual .c-headline .c-headline__subheadline {
+.c-visual .dsa-headline .dsa-headline__subheadline {
   --c-headline_subheadline--color: var(--ks-text-color-primary);
 }
 .c-visual.c-visual--full {

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

@@ -15,12 +15,14 @@ interface NavMainProps {
     items?: {
         href: string;
         label: string;
+        active?: boolean;
     }[];
 }
 declare const NavToggleComponent: FC;
 declare const NavMainItem: FC<{
     label: string;
     href: string;
+    active: boolean;
 }>;
 declare const NavMain: FC<NavMainProps>;
 export { NavToggleComponent, NavMainItem, NavMain };

package/dist/components/nav-main/index.js

@@ -2,6 +2,7 @@ import "./nav-main.css";
 import "./nav-toggle.css";
 import { createElement } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
 import { Link } from '@kickstartds/base/lib/link';
 import { Picture } from '@kickstartds/base/lib/picture';
 import './js/NavToggle.client.js';
@@ -11,7 +12,7 @@ import './js/body.client.js';
 import '@kickstartds/core/lib/core';
 
 const NavToggleComponent = () => (jsxs("button", { type: "button", className: "nav-toggle", id: "toggle-sidebar", "aria-controls": "nav-main", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "nav-toggle__label", children: "toggle navigation" }), jsx("span", { className: "nav-toggle__icon", children: jsx("span", { className: "nav-toggle__icon__middle" }) })] }));
-const NavMainItem = ({ label, href, }) => (jsx("li", { className: "c-nav-main__item", children: jsx(Link, { className: "c-nav-main__link", href: href, children: label }) }));
-const NavMain = ({ logo, logoHref = "/", items }) => items && items.length > 0 ? (jsxs("div", { className: "c-nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { className: "c-nav-main", id: "nav-main", "aria-label": "Hauptnavigation", children: [jsx(Link, { className: "c-nav-main__logo", href: logoHref, children: jsx(Picture, { ...logo }) }), jsx("ul", { className: "c-nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, key: item.href + item.label }))) })] })] })) : null;
+const NavMainItem = ({ label, href, active }) => (jsx("li", { className: classnames("nav-main__item", active === true ? "nav-main__item--active" : ""), children: jsx(Link, { className: "nav-main__link", href: href, children: label }) }));
+const NavMain = ({ logo, logoHref = "/", items }) => items && items.length > 0 ? (jsxs("div", { className: "nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { className: classnames("nav-main", items.some((item) => item.active) ? "nav-main--active" : ""), id: "nav-main", "aria-label": "Hauptnavigation", children: [jsx(Link, { className: "nav-main__logo", href: logoHref, children: jsx(Picture, { ...logo }) }), jsx("ul", { className: "nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] })] })) : null;
 
 export { NavMain, NavMainItem, NavToggleComponent };