@kickstartds/ds-agency-premium 1.7.0--canary.18.1660.0 → 1.7.0--canary.46.1797.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

@@ -4,8 +4,17 @@ import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
 import { PostTeaserContextDefault } from '@kickstartds/blog/lib/post-teaser';
 import { Container } from '@kickstartds/core/lib/container';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
 
-const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaserText, image, link, readingTime, author, className, ...rest }, ref) => {
+const defaults = {
+    "tags": [],
+    "link": {
+        "text": "Read article"
+    },
+    "author": {}
+};
+
+const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaserText, image, alt, link, readingTime, author, className, ...rest }, ref) => {
     const teaserMetaItems = [];
     if (date)
         teaserMetaItems.push({
@@ -17,9 +26,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 +38,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 };
@@ -40,7 +49,7 @@ const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaser
 const BlogTeaserContext = createContext(BlogTeaserContextDefault);
 const BlogTeaser = forwardRef((props, ref) => {
     const Component = useContext(BlogTeaserContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 BlogTeaser.displayName = "BlogTeaser";
 

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

@@ -8,12 +8,21 @@ import { Link } from '@kickstartds/base/lib/link';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import { Container } from '@kickstartds/core/lib/container';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
+
+const defaults = {
+    "image": {
+        "fullWidth": false,
+        "aspectRatio": "square"
+    },
+    "links": []
+};
 
 const ContactContextDefault = forwardRef(({ title, subtitle, image, links, copy, className, ...props }, ref) => (jsx(Container, { name: "contact", children: jsxs("address", { className: classnames("dsa-contact", image?.aspectRatio && `dsa-contact--image-${image?.aspectRatio}`, image?.fullWidth && `dsa-contact--image-full-width`, className), ref: ref, ...props, children: [image && image.src ? (jsx("div", { className: "dsa-contact__image-wrap", children: jsx(Picture, { src: image?.src, alt: image?.alt, className: "dsa-contact__image" }) })) : (""), jsxs("div", { className: "dsa-contact__body", children: [title && (jsxs("div", { className: "dsa-contact__header", children: [jsx("span", { className: "dsa-contact__title", children: title }), jsx("span", { className: "dsa-contact__subtitle", children: subtitle })] })), copy && jsx(RichText, { text: copy, className: "dsa-contact__copy" }), links && links.length ? (jsx("ul", { className: "dsa-contact__links", children: links.map(({ icon, href, label, newTab }, i) => (jsx("li", { children: jsxs(Link, { className: "dsa-contact__link", href: href, ...(newTab ? { target: "_blank", rel: "noopener" } : {}), children: [jsx(Icon, { icon: icon }), label] }) }, i))) })) : ("")] })] }) })));
 const ContactContext = createContext(ContactContextDefault);
 const Contact = forwardRef((props, ref) => {
     const Component = useContext(ContactContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Contact.displayName = "Contact";
 const ContactProvider = (props) => (jsx(ContactContext$1.Provider, { ...props, value: Contact }));

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

@@ -5,8 +5,25 @@ import { Storytelling } from '@kickstartds/content/lib/storytelling';
 import { ButtonContext } from '@kickstartds/base/lib/button';
 import classnames from 'classnames';
 import { useButtonGroup } from '../button-group/index.js';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
 import '@kickstartds/base/lib/button-group';
 
+const defaults = {
+    "highlightText": false,
+    "colorNeutral": false,
+    "fullWidth": false,
+    "buttons": [],
+    "image": {
+        "padding": true
+    },
+    "order": {
+        "mobileImageLast": false,
+        "desktopImageLast": true
+    },
+    "textAlign": "left",
+    "contentAlign": "center"
+};
+
 const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, contentAlign, order, fullWidth = false, buttons = [], ...rest }, ref) => {
     const ButtonGroup = useButtonGroup();
     return (jsx(ButtonContext.Provider
@@ -18,11 +35,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,
@@ -40,7 +58,7 @@ const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, im
 const CtaContext = createContext(CtaContextDefault);
 const Cta = forwardRef((props, ref) => {
     const Component = useContext(CtaContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Cta.displayName = "Cta";
 

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

@@ -3,12 +3,17 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { DividerContextDefault as DividerContextDefault$1, DividerContext as DividerContext$1 } from '@kickstartds/base/lib/divider';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
+
+const defaults = {
+    "variant": "default"
+};
 
 const DividerContextDefault = forwardRef(({ variant, className, ...props }, ref) => (jsx(DividerContextDefault$1, { ...props, className: classnames("dsa-divider", className), variant: variant, ref: ref })));
 const DividerContext = createContext(DividerContextDefault);
 const Divider = forwardRef((props, ref) => {
     const Component = useContext(DividerContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Divider.displayName = "Divider";
 const DividerProvider = (props) => (jsx(DividerContext$1.Provider, { ...props, value: DividerContextDefault }));

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

@@ -2,12 +2,17 @@ import "./faq.css";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import { CollapsibleBox } from '@kickstartds/base/lib/collapsible-box';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
+
+const defaults = {
+    "questions": []
+};
 
 const FaqContextDefault = forwardRef(({ questions, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: `dsa-faq`, children: questions.map((question, index) => (jsx(CollapsibleBox, { summary: question.question, text: question.answer }, index))) })));
 const FaqContext = createContext(FaqContextDefault);
 const Faq = forwardRef((props, ref) => {
     const Component = useContext(FaqContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Faq.displayName = "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,8 +4,20 @@ 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 { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
 import '@kickstartds/base/lib/button';
 
+const defaults = {
+    "style": "stack",
+    "cta": {
+        "target": "#",
+        "label": "See more",
+        "toggle": true,
+        "style": "link"
+    }
+};
+
 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`
@@ -16,11 +28,11 @@ 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);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Feature.displayName = "Feature";
 

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;