@kickstartds/ds-agency-premium 1.4.0--canary.12.465.0 → 1.4.0--canary.14.677.0

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

@@ -15,9 +15,17 @@
     "content": {
       "type": "string",
       "title": "Text",
-      "description": "Body text for the blog post",
+      "description": "Body text for the blog post, overwrites sections if present",
       "format": "markdown"
     },
+    "section": {
+      "type": "array",
+      "title": "Blog Sections",
+      "description": "Collection of sections (with their contents) to render on the blog post",
+      "items": {
+        "$ref": "http://schema.mydesignsystem.com/section.schema.json"
+      }
+    },
     "cta": {
       "$ref": "http://schema.mydesignsystem.com/cta.schema.json"
     },

package/dist/components/blog-post/index.d.ts

@@ -1,7 +1,4 @@
-/// <reference types="react" />
-import { BlogPostProps } from "../../BlogPostProps-e1cbd5d3.js";
-declare const BlogPost: {
-    ({ head, content, aside, cta }: BlogPostProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import { BlogPostProps } from "../../BlogPostProps-440f88a5.js";
+import { FC, PropsWithChildren } from "react";
+declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export { BlogPost };

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

@@ -9,7 +9,6 @@ import 'classnames';
 import 'react';
 import '@kickstartds/blog/lib/post-head';
 import '@kickstartds/core/lib/react';
-import '../headline-level-context/index.js';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';
@@ -20,7 +19,7 @@ import '@kickstartds/base/lib/button';
 import '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const BlogPost = ({ head, content, aside, cta }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), jsx(Text, { text: content })] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Section, { children: jsx(Cta, { ...cta }) }))] }));
+const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), children || jsx(Text, { text: content })] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Section, { children: jsx(Cta, { ...cta }) }))] }));
 BlogPost.displayName = "BlogPost";
 
 export { BlogPost };

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

@@ -5,7 +5,7 @@ import { forwardRef, createContext, useContext } from 'react';
 import { PostTeaserContextDefault } from '@kickstartds/blog/lib/post-teaser';
 import { Container } from '@kickstartds/core/lib/container';
 
-const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaserText, image, link, readingTime, author, className, }, ref) => {
+const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaserText, image, link, readingTime, author, className, ...rest }, ref) => {
     const teaserMetaItems = [];
     if (date)
         teaserMetaItems.push({
@@ -17,7 +17,7 @@ const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaser
             icon: "time",
             text: readingTime,
         });
-    return (jsx(Container, { name: "post-teaser", children: jsx(PostTeaserContextDefault, { className: classnames(className, "dsa-blog-teaser"), 
+    return (jsx(Container, { name: "post-teaser", children: jsx(PostTeaserContextDefault, { ...rest, className: classnames(className, "dsa-blog-teaser"), 
             // @ts-expect-error
             image: { src: image }, meta: {
                 author: author

package/dist/components/button/button.css

@@ -3,6 +3,10 @@
   --dsa-button--border-width: var(--ks-border-width-default);
   --dsa-button--border-radius: var(--ks-border-radius-pill);
   --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-button--text-transform: default;
+  --dsa-button_small--font: var(--ks-font-interface-s);
+  --dsa-button_medium--font: var(--ks-font-interface-m);
+  --dsa-button_large--font: var(--ks-font-interface-l);
   --dsa-button_primary--color: var(--dsa-text-color-on-primary);
   --dsa-button_primary--color_hover: var(--dsa-text-color-on-primary);
   --dsa-button_primary--color_active: var(--dsa-text-color-on-primary);
@@ -32,8 +36,18 @@
   --c-button--padding: var(--dsa-button--padding, 0.75em 2em);
   --c-button--font-weight: var(--dsa-button--font-weight, var(--ks-font-weight-semi-bold));
   --c-button--border-width: var(--dsa-button--border-width, var(--ks-border-width-default));
+  text-transform: var(--dsa-button--text-transform);
   transition-property: box-shadow, transform, background-color, color, border;
 }
+.dsa-button.c-button.c-button--small {
+  --c-button--font: var(--dsa-button_small--font, var(--ks-font-interface-s));
+}
+.dsa-button.c-button.c-button--medium {
+  --c-button--font: var(--dsa-button_medium--font, var(--ks-font-interface-m));
+}
+.dsa-button.c-button.c-button--large {
+  --c-button--font: var(--dsa-button_large--font, var(--ks-font-interface-l));
+}
 .dsa-button.c-button.c-button--solid {
   --c-button--color: var(--dsa-button_primary--color, var(--dsa-text-color-on-primary));
   --c-button--color-hover: var(--dsa-button_primary--color_hover, var(--dsa-text-color-on-primary));
@@ -82,7 +96,7 @@
   );
   --c-button--background-color-selected: var(
     --dsa-button_secondary--background-color_selected,
-    var(--ks-background-color-clear-interactive-selected) ;
+    var(--ks-background-color-clear-interactive-selected)
   );
 }
 .dsa-button.c-button.c-button--outline {

package/dist/components/cta/cta.css

@@ -6,7 +6,7 @@
   --dsa-cta__headline--color: var(--dsa-headline--color);
   --dsa-cta__headline--font: var(--dsa-headline_h2--font);
   --dsa-cta__subheadline--color: var(--dsa-headline__subheadline--color);
-  --dsa-cta__subheadline--font: var(--dsa-headline-font-copy-xs);
+  --dsa-cta__subheadline--font: var(--dsa-headline_h2__subheadline--font);
   --dsa-cta_color-neutral__headline--color: var(--ks-text-color-default);
   --dsa-cta_color-neutral__subheadline--color: var(--ks-text-color-default);
   --dsa-cta_color-neutral__copy--color: var(--ks-text-color-default);
@@ -15,27 +15,19 @@
   --dsa-cta_highlight-text__copy--font: var(--ks-font-copy-l);
 }
 
-@media (min-width: 640px) {
-  .c-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
-  .c-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
-    padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)));
-    z-index: 1;
-  }
-}
-
-.c-storytelling.dsa-cta {
+.dsa-cta.c-storytelling {
   --c-storytelling--padding-ratio: 2;
   --c-storytelling--horizontal-padding: var(--l-section--content-padding);
   justify-content: center;
   align-items: center;
   padding: 0;
 }
-.c-storytelling.dsa-cta--color-neutral {
+.dsa-cta.c-storytelling--color-neutral {
   --dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
   --dsa-cta__headline--color: var(--dsa-cta_color-neutral__headline--color, var(--ks-text-color-default));
   --dsa-cta__subheadline--color: var(--dsa-cta_color-neutral__subheadline--color, var(--ks-text-color-default));
 }
-.c-storytelling.dsa-cta--highlight-text {
+.dsa-cta.c-storytelling--highlight-text {
   --dsa-cta__copy--font: var(--dsa-cta_highlight-text__copy--font, var(--ks-font-copy-l));
   --dsa-cta__headline--font: var(--dsa-cta_highlight-text__headline--font, var(--dsa-headline_h1--font));
   --dsa-cta__subheadline--font: var(
@@ -43,90 +35,98 @@
     var(--dsa-headline_h1__subheadline--font)
   );
 }
-.c-storytelling.dsa-cta.c-storytelling--full {
+.dsa-cta.c-storytelling.c-storytelling--full {
   --c-storytelling--padding-ratio: 1;
 }
-.c-storytelling.dsa-cta.c-storytelling--full.c-storytelling--order-desktop-image-last .c-storytelling__box {
+.dsa-cta.c-storytelling.c-storytelling--full.c-storytelling--order-desktop-image-last .c-storytelling__box {
   padding-left: var(--dsa-cta--horizontal-padding);
 }
-.c-storytelling.dsa-cta.dsa-cta--align-top {
+.dsa-cta.c-storytelling.dsa-cta--align-top {
   align-items: flex-start;
 }
-.c-storytelling.dsa-cta.dsa-cta--align-bottom {
+.dsa-cta.c-storytelling.dsa-cta--align-bottom {
   align-items: flex-end;
 }
-.c-storytelling.dsa-cta.dsa-cta--highlight-text .c-storytelling__text {
+.dsa-cta.c-storytelling.dsa-cta--highlight-text .c-storytelling__text {
   font: var(--ks-font-copy-l);
   color: var(--ks-color-fg);
 }
-.c-storytelling.dsa-cta .c-storytelling__box {
+.dsa-cta.c-storytelling .c-storytelling__box {
   width: 100%;
   padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
 }
 @container storytelling (max-width: 640px) {
-  .c-storytelling.dsa-cta .c-storytelling__box {
+  .dsa-cta.c-storytelling .c-storytelling__box {
     padding-top: calc(var(--dsa-cta--vertical-padding, var(--l-section--space-default)) / var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta .c-storytelling__box:only-child {
+  .dsa-cta.c-storytelling .c-storytelling__box:only-child {
     padding-top: var(--dsa-cta--vertical-padding, var(--l-section--space-default));
   }
 }
-.c-storytelling.dsa-cta .c-storytelling__box:only-child {
+.dsa-cta.c-storytelling .c-storytelling__box:only-child {
   padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
 }
-.c-storytelling.dsa-cta .c-storytelling__box__content {
+.dsa-cta.c-storytelling .c-storytelling__box__content {
   max-width: 100%;
 }
-.c-storytelling.dsa-cta .c-storytelling__box .dsa-headline__headline {
+.dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__headline {
   font: var(--dsa-cta__headline--font, var(--dsa-headline_h2--font, var(--ks-font-display-xl)));
   color: var(--dsa-cta__headline--color, var(--ks-text-color-display));
   font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
 }
-.c-storytelling.dsa-cta .c-storytelling__box .dsa-headline__subheadline {
+.dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__subheadline {
   font: var(--dsa-cta__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
   color: var(--dsa-cta__subheadline--color, var(--ks-text-color-primary));
   font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
 }
-.c-storytelling.dsa-cta .c-storytelling__box .c-rich-text {
+.dsa-cta.c-storytelling .c-storytelling__box .c-rich-text {
   font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
   color: var(--dsa-cta__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
 }
-.c-storytelling.dsa-cta .c-storytelling__box:only-child {
+.dsa-cta.c-storytelling .c-storytelling__box:only-child {
   --dsa-cta--horizontal-padding: var(--l-section--content-padding);
 }
-.c-storytelling.dsa-cta .c-storytelling__image {
+.dsa-cta.c-storytelling .c-storytelling__image {
   margin: 0;
 }
 @container storytelling (min-width: 640px) {
-  .c-storytelling.dsa-cta.c-storytelling--order-desktop-image-last .c-storytelling__image {
+  .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__image {
     padding-left: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta.c-storytelling--order-desktop-image-last .c-storytelling__box {
+  .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__box {
     padding-right: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta .c-storytelling__box {
+  .dsa-cta.c-storytelling .c-storytelling__box {
     padding-left: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta .c-storytelling__box__content--center .c-button-group {
+  .dsa-cta.c-storytelling .c-storytelling__box__content--center .c-button-group {
     justify-content: center;
   }
-  .c-storytelling.dsa-cta .c-storytelling__box:only-child {
+  .dsa-cta.c-storytelling .c-storytelling__box:only-child {
     width: 100%;
     max-width: calc(var(--l-section--content-width-default) - var(--l-section--content-padding) * var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta > .c-storytelling__image {
+  .dsa-cta.c-storytelling > .c-storytelling__image {
     padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
     padding-right: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta.c-storytelling--full > .c-storytelling__image {
+  .dsa-cta.c-storytelling.c-storytelling--full > .c-storytelling__image {
     padding: 0;
   }
-  .c-storytelling.dsa-cta > .c-storytelling__image,
-  .c-storytelling.dsa-cta > .c-storytelling__box {
+  .dsa-cta.c-storytelling > .c-storytelling__image,
+  .dsa-cta.c-storytelling > .c-storytelling__box {
     max-width: calc(var(--l-section--content-width-wide) / 2);
   }
-  .c-storytelling.dsa-cta.dsa-cta--full-width > .c-storytelling__image,
-  .c-storytelling.dsa-cta.dsa-cta--full-width > .c-storytelling__box {
+  .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__image,
+  .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__box {
     max-width: 100%;
   }
+}
+
+@media (min-width: 640px) {
+  .dsa-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
+  .dsa-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
+    padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)));
+    z-index: 1;
+  }
 }

package/dist/components/feature/index.js

@@ -6,17 +6,17 @@ import { Button } from '../button/index.js';
 import { Link } from '@kickstartds/base/lib/link';
 import '@kickstartds/base/lib/button';
 
-const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon, cta: { toggle = true, style: ctaStyle = "link", target, label = "Read more", }, ...rest }, ref) => (jsxs("div", { ...rest, ref: ref, className: classnames(`c-feature c-feature--${style === `stack`
-        ? `stack c-feature--large`
+const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon, cta: { toggle = true, style: ctaStyle = "link", target, label = "Read more", }, ...rest }, ref) => (jsxs("div", { ...rest, ref: ref, className: classnames(`dsa-feature dsa-feature--${style === `stack`
+        ? `stack dsa-feature--large`
         : style === `besideSmall`
-            ? `beside c-feature--small`
+            ? `beside dsa-feature--small`
             : style === `besideLarge`
-                ? `beside c-feature--large`
+                ? `beside dsa-feature--large`
                 : style === `intext`
-                    ? `intext c-feature--small`
+                    ? `intext dsa-feature--small`
                     : style === `centered`
-                        ? `centered c-feature--large`
-                        : `${style}`}`), children: [jsxs("div", { className: "c-feature__header", children: [icon && jsx(Icon, { className: "c-feature__icon", icon: icon }), jsx("span", { className: "c-feature__title", children: title })] }), text || ctaStyle === "intext" ? (jsxs("p", { className: "c-feature__text", children: [text, ctaStyle === "intext" && toggle ? (jsxs(Fragment, { children: ["  ", jsx(Link, { href: target, children: label ? label : "See more" })] })) : ("")] })) : (""), toggle && (ctaStyle === "link" || ctaStyle === "button") && (jsx("div", { className: "c-feature__cta", children: ctaStyle === "link" ? (jsxs(Link, { className: "c-feature__link", href: target, children: [label ? label : "See more", jsx(Icon, { icon: "arrow-right" })] })) : ctaStyle === "button" ? (jsx(Button, { className: "c-feature__button", size: "small", target: target, label: label ? label : "See more" })) : ("") }))] })));
+                        ? `centered dsa-feature--large`
+                        : `${style}`}`), children: [jsxs("div", { className: "dsa-feature__header", children: [icon && jsx(Icon, { className: "dsa-feature__icon", icon: icon }), jsx("span", { className: "dsa-feature__title", children: title })] }), text || ctaStyle === "intext" ? (jsxs("p", { className: "dsa-feature__text", children: [text, ctaStyle === "intext" && toggle ? (jsxs(Fragment, { children: ["  ", jsx(Link, { href: target, children: label ? label : "See more" })] })) : ("")] })) : (""), toggle && (ctaStyle === "link" || ctaStyle === "button") && (jsx("div", { className: "dsa-feature__cta", children: ctaStyle === "link" ? (jsxs(Link, { className: "dsa-feature__link", href: target, children: [label ? label : "See more", jsx(Icon, { icon: "arrow-right" })] })) : ctaStyle === "button" ? (jsx(Button, { className: "dsa-feature__button", size: "small", target: target, label: label ? label : "See more" })) : ("") }))] })));
 const FeatureContext = createContext(FeatureContextDefault);
 const Feature = forwardRef((props, ref) => {
     const Component = useContext(FeatureContext);

package/dist/components/features/features.css

@@ -1,4 +1,4 @@
-.c-features {
+.dsa-features {
   --dsa-features--gap-vertical: var(--ks-spacing-stack-l);
   --dsa-features--gap-horizontal: var(--ks-spacing-inline-m);
   --dsa-feature__title--color: var(--dsa-topic--color);
@@ -8,9 +8,7 @@
   --dsa-feature__copy--font: var(--ks-font-copy-s);
   --dsa-feature__link-font: var(--ks-font-copy-s);
   --dsa-feature__icon--color: var(--ks-text-color-primary);
-  --dsa-feature_small__icon--size: calc(
-    var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m)
-  );
+  --dsa-feature_small__icon--size: calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m));
   --dsa-feature_large__icon--size: calc(var(--ks-font-size-copy-m) * 2.5);
   --dsa-feature_small--gap: var(--ks-spacing-stack-xs);
   --dsa-feature_large--gap: var(--ks-spacing-stack-s);
@@ -18,42 +16,42 @@
   --dsa-feature_large__icon--gap: var(--ks-spacing-s);
 }
 
-.c-features {
+.dsa-features {
   gap: var(--dsa-features--gap-vertical, var(--ks-spacing-stack-l)) var(--dsa-features--gap-horizontal, var(--ks-spacing-inline-m));
 }
-.c-features--list {
+.dsa-features--list {
   display: flex;
   flex-direction: column;
   gap: var(--dsa-features--gap-vertical);
 }
-.c-features--large-tiles {
+.dsa-features--large-tiles {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 }
-.c-features--large-tiles .c-feature {
+.dsa-features--large-tiles .dsa-feature {
   flex-basis: 300px;
   flex-grow: 1;
   flex-shrink: 0;
 }
-.c-features--small-tiles {
+.dsa-features--small-tiles {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }
-.l-section--align-center .c-features--small-tiles {
+.l-section--align-center .dsa-features--small-tiles {
   justify-content: center;
 }
-.c-features .c-feature {
+.dsa-features .dsa-feature {
   display: flex;
   position: relative;
   flex-direction: column;
   gap: var(--dsa-feature--gap);
 }
-.c-features .c-feature--large {
+.dsa-features .dsa-feature--large {
   --dsa-feature__icon--size: var(--dsa-feature_large__icon--size, calc(var(--ks-font-size-copy-m) * 2.5));
   --dsa-feature__icon--gap: var(--dsa-feature_large__icon--gap, var(--ks-spacing-xs));
   --dsa-feature--gap: var(--dsa-feature_large--gap, var(--ks-spacing-stack-s));
 }
-.c-features .c-feature--small {
+.dsa-features .dsa-feature--small {
   --dsa-feature__icon--size: var(
     --dsa-feature_small__icon--size,
     calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m))
@@ -61,67 +59,67 @@
   --dsa-feature__icon--gap: var(--dsa-feature_small__icon--gap, var(--ks-spacing-xs));
   --dsa-feature--gap: var(--dsa-feature_small--gap, var(--ks-spacing-stack-xs));
 }
-.c-features .c-feature--beside {
+.dsa-features .dsa-feature--beside {
   padding-left: calc(var(--dsa-feature__icon--size) + var(--dsa-feature__icon--gap));
 }
-.c-features .c-feature--beside .c-feature__icon {
+.dsa-features .dsa-feature--beside .dsa-feature__icon {
   position: absolute;
   top: 0;
   left: 0;
 }
-.c-features .c-feature--stack .c-feature__header {
+.dsa-features .dsa-feature--stack .dsa-feature__header {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
-.c-features .c-feature--centered .c-feature__header {
+.dsa-features .dsa-feature--centered .dsa-feature__header {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.c-features .c-feature--centered .c-feature__title,
-.c-features .c-feature--centered .c-feature__text {
+.dsa-features .dsa-feature--centered .dsa-feature__title,
+.dsa-features .dsa-feature--centered .dsa-feature__text {
   text-align: center;
 }
-.c-features .c-feature--centered .c-feature__cta {
+.dsa-features .dsa-feature--centered .dsa-feature__cta {
   display: flex;
   justify-content: center;
 }
-.c-features .c-feature__header {
+.dsa-features .dsa-feature__header {
   display: flex;
   align-items: center;
   gap: var(--dsa-feature__icon--gap);
 }
-.c-features .c-feature__title {
+.dsa-features .dsa-feature__title {
   font: var(--dsa-feature__title--font, var(--ks-font-interface-m));
   color: var(--dsa-feature__title--color, var(--ks-topic-color));
   font-family: var(--dsa-feature__title--font-family, var(--ks-font-family-display));
   font-weight: var(--dsa-feature__title--font-weight, var(--ks-font-weight-semi-bold));
 }
-.c-features .c-feature__text {
+.dsa-features .dsa-feature__text {
   color: var(--dsa-feature__copy--color, var(--dsa-rich-text-color), var(--ks-text-color-default));
   font: var(--dsa-feature__copy--font, var(--ks-font-copy-s));
   margin: 0;
 }
-.c-features .c-feature__icon {
+.dsa-features .dsa-feature__icon {
   color: var(--dsa-feature__icon--color, var(--ks-text-color-primary));
   width: var(--dsa-feature__icon--size);
   height: var(--dsa-feature__icon--size);
 }
-.c-features .c-feature__cta {
+.dsa-features .dsa-feature__cta {
   margin-top: auto;
 }
-.c-features .c-feature__link {
+.dsa-features .dsa-feature__link {
   font: var(--dsa-feature__link-font, var(--ks-font-copy-s));
   display: flex;
   align-items: center;
   gap: var(--ks-spacing-xxs);
   width: fit-content;
 }
-.c-features .c-feature__link .icon {
+.dsa-features .dsa-feature__link .icon {
   width: 1.125em;
   height: 1.125em;
 }
-.c-features .c-feature__button {
+.dsa-features .dsa-feature__button {
   margin-top: calc(var(--dsa-feature--gap) * 0.5);
 }

package/dist/components/features/index.js

@@ -11,7 +11,7 @@ import '@kickstartds/base/lib/link';
 const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
     style: "link",
     toggle: true,
-}, style = "intext", feature: features = [], ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: classnames(`c-features c-features--${layout === "largeTiles"
+}, style = "intext", feature: features = [], ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: classnames(`dsa-features dsa-features--${layout === "largeTiles"
         ? "large-tiles"
         : layout === "smallTiles"
             ? "small-tiles"

package/dist/components/footer/footer.css

@@ -1,4 +1,4 @@
-.c-footer {
+.dsa-footer {
   --dsa-footer--background-color: var(--ks-background-color-default);
   --dsa-footer--border-top: 1px solid var(--ks-border-color-accent);
   --dsa-footer--max-width: var(--l-section--content-width-wide);
@@ -6,24 +6,27 @@
   --dsa-footer__byline--font: var(--ks-font-copy-xs);
   --dsa-footer__byline--color: var(--ks-text-color-default);
   --dsa-footer__links--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
-  --dsa-footer__links--font: var(--ks-font-interface-s);
-  --dsa-footer__links--color: var(--dsa-link--color);
+  --dsa-footer__link--font: var(--ks-font-interface-s);
+  --dsa-footer__link--font-weight: var(--dsa-link--font-weight);
+  --dsa-footer__link--color: var(--dsa-link--color);
+  --dsa-footer__link--text-tecoration: none;
+  --dsa-footer__link--text-tecorationhover: underline;
   --dsa-footer__logo--height: 1.5rem;
 }
 @media (min-width: 62em) {
-  .c-footer {
-    --dsa-footer__logo--height: 2rem;
+  .dsa-footer {
+    --dsa-footer__logo--height: 4rem;
   }
 }
 
-.c-footer {
+.dsa-footer {
   position: relative;
   z-index: 1;
   width: 100%;
   display: flex;
   background-color: var(--dsa-footer--background-color, var(--ks-background-color-default));
 }
-.c-footer__content {
+.dsa-footer__content {
   padding: var(--l-section--space-small) var(--l-section--content-padding);
   border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-accent));
   max-width: var(--dsa-footer--max-width, var(--l-section--content-width-wide));
@@ -34,24 +37,26 @@
   align-items: center;
   gap: var(--dsa-footer--gap-vertical, var(--ks-spacing-stack-m));
 }
-.c-footer__logo {
-  display: block;
+.dsa-footer__logo {
+  --dsa-logo--height: var(--dsa-footer__logo--height) !important;
 }
-.c-footer__logo img {
-  height: var(--dsa-footer__logo--height);
-  width: auto;
-}
-.c-footer__byline {
+.dsa-footer__byline {
   font: var(--dsa-footer__byline--font, var(--ks-font-copy-xs));
   color: var(--dsa-footer__byline--color, var(--ks-text-color-default));
 }
-.c-footer__links {
+.dsa-footer__links {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--dsa-footer__links--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-m));
 }
-.c-footer__link {
-  font: var(--dsa-footer__links--font, var(--ks-font-interface-s));
-  color: var(--dsa-footer__links--color, var(--dsa-link--color));
+.dsa-footer__link:not(.c-button) {
+  font: var(--dsa-footer__link--font, var(--ks-font-interface-s));
+  font-weight: var(--dsa-footer__link--font-weight, var(--ks-font-interface-s));
+  color: var(--dsa-footer__link--color, var(--dsa-link--color));
+  text-decoration: var(--dsa-footer__link--text-tecoration, none);
+}
+.dsa-footer__link:not(.c-button):hover {
+  text-decoration: var(--dsa-footer__link--text-tecoration-hover, underline);
+  color: var(--dsa-footer__link--color_hover, var(--dsa-link--color_hover));
 }

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

@@ -12,16 +12,24 @@
           "title": "Source",
           "description": "Picture source",
           "type": "string",
-          "format": "image",
-          "examples": [
-            "https://picsum.photos/seed/kdspicture/300/300"
-          ]
+          "format": "image"
+        },
+        "srcInverted": {
+          "title": "Source",
+          "description": "Picture source",
+          "type": "string",
+          "format": "image"
         },
         "alt": {
           "title": "Alt text",
           "description": "Alt text to display for picture",
           "type": "string"
         },
+        "homepageHref": {
+          "type": "string",
+          "format": "uri",
+          "default": "/"
+        },
         "width": {
           "title": "Width",
           "description": "Width of the picture",
@@ -43,11 +51,6 @@
       },
       "additionalProperties": false
     },
-    "logoHref": {
-      "type": "string",
-      "format": "uri",
-      "default": "/"
-    },
     "byline": {
       "title": "Byline",
       "description": "Small line of text displayed below the logo",
@@ -74,6 +77,31 @@
           },
           "active": {
             "type": "boolean"
+          },
+          "id": {
+            "type": "string"
+          },
+          "items": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "href": {
+                  "type": "string",
+                  "format": "uri"
+                },
+                "label": {
+                  "type": "string"
+                },
+                "active": {
+                  "type": "boolean"
+                },
+                "id": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            }
           }
         },
         "additionalProperties": false,
@@ -84,19 +112,42 @@
       },
       "examples": [
         [
-          {
-            "label": "Nav Item",
-            "href": "#"
-          },
           {
             "label": "Active Item",
             "href": "#",
             "active": true
           },
           {
-            "label": "Another Item",
+            "label": "Navigation Item",
             "href": "#"
           },
+          {
+            "label": "Dropdown",
+            "href": "#",
+            "items": [
+              {
+                "label": "Level 2 Item",
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "Active Item",
+                "active": true,
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "An Item with a longer Label",
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "And One last one",
+                "href": "#",
+                "id": ""
+              }
+            ]
+          },
           {
             "label": "One more Item",
             "href": "#"