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

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

@@ -41,6 +41,12 @@
       "format": "image",
       "examples": ["img/close-up-young-business-team-working.png"]
     },
+    "alt": {
+      "title": "Alt",
+      "description": "The alt text for the preview image",
+      "type": "string",
+      "examples": ["Image of a business team working"]
+    },
     "link": {
       "type": "object",
       "title": "Link",
@@ -53,12 +59,12 @@
           "format": "uri",
           "examples": ["https://example.com"]
         },
-        "label": {
-          "title": "Label",
-          "description": "The label to use for the link",
+        "text": {
+          "title": "Text",
+          "description": "The text for the link",
           "type": "string",
-          "examples": ["Read more"],
-          "default": "Read more"
+          "default": "Read article",
+          "examples": ["Read article"]
         }
       },
       "additionalProperties": false,

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
 import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
-declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLDivElement>>;
-declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLDivElement>>>;
-declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { BlogTeaserProps };
 export { BlogTeaserContextDefault, BlogTeaserContext, BlogTeaser };

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, ...rest }, ref) => {
+const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaserText, image, alt, link, readingTime, author, className, ...rest }, ref) => {
     const teaserMetaItems = [];
     if (date)
         teaserMetaItems.push({
@@ -17,9 +17,9 @@ const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaser
             icon: "time",
             text: readingTime,
         });
-    return (jsx(Container, { name: "post-teaser", children: jsx(PostTeaserContextDefault, { ...rest, className: classnames(className, "dsa-blog-teaser"), 
+    return (jsx(Container, { name: "blog-teaser", children: jsx(PostTeaserContextDefault, { ...rest, className: classnames(className, "dsa-blog-teaser"), 
             // @ts-expect-error
-            image: { src: image }, meta: {
+            image: { src: image, alt: alt || headline }, meta: {
                 author: author
                     ? {
                         image: author.image && { src: author.image },
@@ -29,9 +29,9 @@ const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaser
                 items: teaserMetaItems,
             }, link: link
                 ? {
-                    label: link.label || "Read more",
                     // @ts-expect-error
                     target: link.url,
+                    label: link.text || "Read article",
                 }
                 : undefined, title: headline, body: teaserText, categories: tags.map((tag) => {
                 return { label: tag.entry };

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.css

@@ -29,6 +29,7 @@
   --dsa-contact__link__icon--color: inherit;
   --dsa-contact__link--text-decoration: none;
   --dsa-contact__link--text-decoration_hover: none;
+  --dsa-contact__link--padding-vertical: 0.125em;
 }
 
 .l-container--contact {
@@ -104,6 +105,7 @@
   margin: 0;
 }
 .dsa-contact a.dsa-contact__link {
+  padding: var(--dsa-contact__link--padding-vertical) 0;
   display: flex;
   align-items: center;
   color: var(--dsa-contact__link--color);

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.css

@@ -19,7 +19,7 @@
   --c-storytelling--padding-ratio: 2;
   --c-storytelling--horizontal-padding: var(--dsa-content--spacing);
   justify-content: center;
-  align-items: center;
+  align-items: stretch;
   padding: 0;
 }
 .dsa-cta.c-storytelling.dsa-cta--color-neutral {
@@ -100,7 +100,7 @@
   }
   .dsa-cta.c-storytelling .c-storytelling__box:only-child {
     width: 100%;
-    max-width: calc(var(--l-section--content-width-default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
+    max-width: calc(var(--dsa-content--width_default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
   }
   .dsa-cta.c-storytelling > .c-storytelling__image {
     padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
@@ -111,7 +111,7 @@
   }
   .dsa-cta.c-storytelling > .c-storytelling__image,
   .dsa-cta.c-storytelling > .c-storytelling__box {
-    max-width: calc(var(--l-section--content-width-wide) / 2);
+    max-width: calc(var(--dsa-content--width_wide) / 2);
   }
   .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__image,
   .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__box {

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/cta/index.js

@@ -18,11 +18,12 @@ const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, im
                 : ""), backgroundImage: backgroundImage, backgroundColor: backgroundColor, full: image?.padding === false, image: {
                 source: image?.src,
                 order: order,
+                vAlign: contentAlign,
             }, box: {
                 text: text,
                 textAlign: textAlign,
+                vAlign: contentAlign,
                 link: {
-                    // @ts-expect-error
                     buttons,
                     colorNeutral: colorNeutral,
                     arrangement: textAlign,

package/dist/components/divider/divider.css

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

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

@@ -1,7 +1,59 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { FeatureProps } from "../../FeatureProps-f8a75850.js";
+/* 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 icon for the feature
+ */
+type Icon = string;
+/**
+ * The title of the feature
+ */
+type Title = string;
+/**
+ * The description of the feature
+ */
+type Text = string;
+/**
+ * The CTA target
+ */
+type CallToActionTarget = string;
+/**
+ * The text label displayed on the link
+ */
+type LinkLabel = string;
+/**
+ * Activate/disable the CTAs
+ */
+type CallToActionToggle = boolean;
+/**
+ * Partial Component used to display a feature
+ */
+interface FeatureProps {
+    icon?: Icon;
+    title: Title;
+    text?: Text;
+    style?: "intext" | "stack" | "centered" | "besideLarge" | "besideSmall";
+    cta?: CallToAction;
+}
+/**
+ * The call to action
+ */
+interface CallToAction {
+    target?: CallToActionTarget;
+    label?: LinkLabel;
+    toggle?: CallToActionToggle;
+    /**
+     * Choose the style of the CTA
+     */
+    style?: "button" | "link" | "intext";
+}
 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/feature/index.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { Button } from '../button/index.js';
 import { Link } from '@kickstartds/base/lib/link';
+import { RichText } from '@kickstartds/base/lib/rich-text';
 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(`dsa-feature dsa-feature--${style === `stack`
@@ -16,7 +17,7 @@ const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon,
                     ? `intext dsa-feature--small`
                     : style === `centered`
                         ? `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" })) : ("") }))] })));
+                        : `${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("div", { className: "dsa-feature__text", children: [jsx(RichText, { text: 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

@@ -15,8 +15,8 @@
   --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_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);
+  --dsa-feature_small--gap: var(--ks-spacing-xs);
+  --dsa-feature_large--gap: var(--ks-spacing-s);
   --dsa-feature_small__icon--gap: var(--ks-spacing-xs);
   --dsa-feature_large__icon--gap: var(--ks-spacing-s);
 }
@@ -52,17 +52,34 @@
   gap: var(--dsa-feature--gap);
 }
 .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));
+  --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)
+  );
 }
 .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))
+    calc(
+      var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m)
+    )
+  );
+  --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)
   );
-  --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));
 }
 .dsa-features .dsa-feature--beside {
   padding-left: calc(var(--dsa-feature__icon--size) + var(--dsa-feature__icon--gap));
@@ -90,6 +107,9 @@
   display: flex;
   justify-content: center;
 }
+.dsa-features .dsa-feature--centered .dsa-feature__icon {
+  align-self: center;
+}
 .dsa-features .dsa-feature__header {
   display: flex;
   align-items: center;
@@ -102,14 +122,27 @@
   font-weight: var(--dsa-feature__title--font-weight, var(--ks-font-weight-semi-bold));
 }
 .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;
 }
+.dsa-features .dsa-feature__text .c-rich-text {
+  --c-rich-text--font: var(
+    --dsa-feature__copy--font,
+    var(--ks-font-copy-s)
+  );
+  --c-rich-text--color: var(
+    --dsa-feature__copy--color,
+    var(--dsa-rich-text-color),
+    var(--ks-text-color-default)
+  );
+}
 .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);
+  min-width: var(--dsa-feature__icon--size);
+  min-height: var(--dsa-feature__icon--size);
+  flex-basis: var(--dsa-feature__icon--size);
+  align-self: flex-start;
 }
 .dsa-features .dsa-feature__cta {
   margin-top: auto;

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

@@ -53,14 +53,12 @@
       "title": "Features",
       "description": "The features to display",
       "items": {
-        "$schema": "http://json-schema.org/draft-07/schema#",
-        "$id": "http://schema.mydesignsystem.com/feature.schema.json",
-        "title": "Feature",
-        "description": "Partial Component used to display a feature",
         "type": "object",
+        "title": "Feature",
         "properties": {
           "icon": {
             "type": "string",
+            "format": "icon",
             "title": "Icon",
             "description": "The icon for the feature",
             "examples": [
@@ -84,21 +82,8 @@
               "This is a feature"
             ]
           },
-          "style": {
-            "type": "string",
-            "enum": [
-              "intext",
-              "stack",
-              "centered",
-              "besideLarge",
-              "besideSmall"
-            ],
-            "default": "stack"
-          },
           "cta": {
             "type": "object",
-            "title": "Call to Action",
-            "description": "The call to action",
             "properties": {
               "target": {
                 "type": "string",
@@ -115,34 +100,12 @@
                 "examples": [
                   "See all our partners"
                 ]
-              },
-              "toggle": {
-                "type": "boolean",
-                "title": "Call to Action Toggle",
-                "description": "Activate/disable the CTAs",
-                "default": true
-              },
-              "style": {
-                "type": "string",
-                "description": "Choose the style of the CTA",
-                "enum": [
-                  "button",
-                  "link",
-                  "intext"
-                ],
-                "default": "link"
               }
             },
             "additionalProperties": false
-          },
-          "type": {
-            "const": "feature"
           }
         },
-        "additionalProperties": false,
-        "required": [
-          "title"
-        ]
+        "additionalProperties": false
       },
       "minItems": 1,
       "maxItems": 8

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

@@ -39,7 +39,30 @@
       "title": "Features",
       "description": "The features to display",
       "items": {
-        "$ref": "http://schema.mydesignsystem.com/feature.schema.json"
+        "type": "object",
+        "title": "Feature",
+        "properties": {
+          "icon": {
+            "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/icon"
+          },
+          "title": {
+            "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/title"
+          },
+          "text": {
+            "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/text"
+          },
+          "cta": {
+            "type": "object",
+            "properties": {
+              "target": {
+                "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/cta/properties/target"
+              },
+              "label": {
+                "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/cta/properties/label"
+              }
+            }
+          }
+        }
       },
       "minItems": 1,
       "maxItems": 8

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { FeaturesProps } from "../../FeaturesProps-b05859d6.js";
+import { FeaturesProps } from "../../FeaturesProps-e58616a5.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/features/index.js

@@ -1,12 +1,13 @@
 import "./features.css";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, createContext, useContext } from 'react';
+import { forwardRef, createElement, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { Feature } from '../feature/index.js';
 import '@kickstartds/base/lib/icon';
 import '../button/index.js';
 import '@kickstartds/base/lib/button';
 import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/rich-text';
 
 const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
     style: "link",
@@ -15,7 +16,15 @@ const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
         ? "large-tiles"
         : layout === "smallTiles"
             ? "small-tiles"
-            : `${layout}`}`), children: features.map((feature, index) => (jsx(Feature, { ...feature, style: style }, index))) })));
+            : `${layout}`}`), children: features.map((feature, index) => {
+        const { icon, title, text, cta, ...rest } = feature;
+        return (createElement(Feature, { ...rest, key: index, icon: icon, style: style, title: title, text: text, cta: {
+                label: cta?.label,
+                target: cta?.target,
+                style: ctas.style,
+                toggle: ctas.toggle,
+            } }));
+    }) })));
 const FeaturesContext = createContext(FeaturesContextDefault);
 const Features = forwardRef((props, ref) => {
     const Component = useContext(FeaturesContext);

package/dist/components/footer/footer.css

@@ -1,7 +1,7 @@
 .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);
+  --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
+  --dsa-footer--max-width: var(--dsa-content--width_wide);
   --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
   --dsa-footer__byline--font: var(--ks-font-copy-xs);
   --dsa-footer__byline--color: var(--ks-text-color-default);
@@ -28,8 +28,8 @@
 }
 .dsa-footer__content {
   padding: var(--l-section--space-small) var(--dsa-content--spacing);
-  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));
+  border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-default));
+  max-width: var(--dsa-footer--max-width, var(--dsa-content--width_wide));
   width: 100%;
   margin: auto;
   display: flex;