@kickstartds/ds-agency-premium 1.6.71 → 1.6.72--canary.43.2474.0

package/dist/components/event-registration/event-registration.schema.json

@@ -0,0 +1,138 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-registration.schema.json",
+  "title": "Event Registration",
+  "type": "object",
+  "properties": {
+    "label": {
+      "title": "Label",
+      "description": "Label of the event registration",
+      "type": "string",
+      "examples": ["Registration Request"]
+    },
+    "title": {
+      "title": "Title",
+      "description": "Title of the event",
+      "type": "string",
+      "examples": ["The Future of AI"]
+    },
+    "link": {
+      "type": "object",
+      "title": "Link",
+      "description": "Link to the event details",
+      "properties": {
+        "url": {
+          "type": "string",
+          "title": "URL",
+          "description": "URL to the event details",
+          "examples": ["#"],
+          "format": "uri"
+        },
+        "text": {
+          "title": "Link Text",
+          "description": "Text for the link to the event details",
+          "type": "string",
+          "examples": ["More Information on the Event"]
+        }
+      }
+    },
+    "date": {
+      "title": "Date",
+      "description": "Date of the registration",
+      "type": "string",
+      "format": "date",
+      "examples": ["18.09.2025"]
+    },
+    "time": {
+      "title": "Time",
+      "description": "Time of the registration",
+      "type": "string",
+      "examples": ["09:00 – 17:00"]
+    },
+    "location": {
+      "type": "object",
+      "title": "Location",
+      "description": "Location of the event",
+      "properties": {
+        "name": {
+          "type": "string",
+          "examples": ["Berlin Congress Center"]
+        },
+        "address": {
+          "type": "string",
+          "examples": ["Alexanderplatz 1, 10178 Berlin"]
+        }
+      }
+    },
+    "nameInput": {
+      "title": "Name Input",
+      "description": "Input field for the name",
+      "type": "object",
+      "properties": {
+        "label": {
+          "type": "string",
+          "examples": ["Name*"]
+        },
+        "placeholder": {
+          "type": "string",
+          "examples": ["Enter your name"]
+        }
+      }
+    },
+    "emailInput": {
+      "title": "Email Input",
+      "description": "Input field for the email",
+      "type": "object",
+      "properties": {
+        "label": {
+          "title": "Label",
+          "description": "Label for the email input",
+          "type": "string",
+          "examples": ["Email*"]
+        },
+        "placeholder": {
+          "title": "Placeholder",
+          "description": "Placeholder text for the email input",
+          "type": "string",
+          "examples": ["Enter your email"]
+        }
+      }
+    },
+    "confirmationCheckboxLabel": {
+      "title": "Label",
+      "description": "Label for the confirmation checkbox",
+      "type": "string",
+      "examples": ["I read and agree to the terms and conditions*"]
+    },
+    "mandatoryText": {
+      "title": "Mandatory Text",
+      "description": "Text indicating that the checkbox is mandatory",
+      "type": "string",
+      "default": "_* Mandatory_"
+    },
+    "cta": {
+      "title": "Call to Action",
+      "type": "object",
+      "properties": {
+        "label": {
+          "title": "Button Label",
+          "description": "Label for the call to action button",
+          "type": "string",
+          "examples": ["Send Request"]
+        },
+        "url": {
+          "type": "string",
+          "format": "uri",
+          "default": "#"
+        },
+        "ariaLabel": {
+          "title": "Aria Label",
+          "description": "Aria label for the cta button",
+          "type": "string",
+          "default": "Event Registration"
+        }
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/event-registration/index.d.ts

@@ -0,0 +1,106 @@
+/// <reference types="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.
+ */
+/**
+ * Label of the event registration
+ */
+type Label = string;
+/**
+ * Title of the event
+ */
+type Title = string;
+/**
+ * URL to the event details
+ */
+type URL = string;
+/**
+ * Text for the link to the event details
+ */
+type LinkText = string;
+/**
+ * Date of the registration
+ */
+type Date = string;
+/**
+ * Time of the registration
+ */
+type Time = string;
+/**
+ * Label for the email input
+ */
+type Label1 = string;
+/**
+ * Placeholder text for the email input
+ */
+type Placeholder = string;
+/**
+ * Label for the confirmation checkbox
+ */
+type Label2 = string;
+/**
+ * Text indicating that the checkbox is mandatory
+ */
+type MandatoryText = string;
+/**
+ * Label for the call to action button
+ */
+type ButtonLabel = string;
+/**
+ * Aria label for the cta button
+ */
+type AriaLabel = string;
+interface EventRegistrationProps {
+    label?: Label;
+    title?: Title;
+    link?: Link;
+    date?: Date;
+    time?: Time;
+    location?: Location;
+    nameInput?: NameInput;
+    emailInput?: EmailInput;
+    confirmationCheckboxLabel?: Label2;
+    mandatoryText?: MandatoryText;
+    cta?: CallToAction;
+}
+/**
+ * Link to the event details
+ */
+interface Link {
+    url?: URL;
+    text?: LinkText;
+}
+/**
+ * Location of the event
+ */
+interface Location {
+    name?: string;
+    address?: string;
+}
+/**
+ * Input field for the name
+ */
+interface NameInput {
+    label?: string;
+    placeholder?: string;
+}
+/**
+ * Input field for the email
+ */
+interface EmailInput {
+    label?: Label1;
+    placeholder?: Placeholder;
+}
+interface CallToAction {
+    label?: ButtonLabel;
+    url?: string;
+    ariaLabel?: AriaLabel;
+}
+declare const EventRegistrationContextDefault: import("react").ForwardRefExoticComponent<EventRegistrationProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const EventRegistrationContext: import("react").Context<import("react").ForwardRefExoticComponent<EventRegistrationProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const EventRegistration: import("react").ForwardRefExoticComponent<EventRegistrationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { EventRegistrationProps };
+export { EventRegistrationContextDefault, EventRegistrationContext, EventRegistration };

package/dist/components/event-registration/index.js

@@ -0,0 +1,36 @@
+import "./event-registration.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { Headline } from '../headline/index.js';
+import { Link } from '@kickstartds/base/lib/link';
+import Markdown from 'markdown-to-jsx';
+import { TextField } from '@kickstartds/form/lib/text-field';
+import { Checkbox } from '@kickstartds/form/lib/checkbox';
+import { Button } from '../button/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+import 'classnames';
+import '@kickstartds/base/lib/headline';
+import '@kickstartds/base/lib/button';
+
+const defaults = {
+    "link": {},
+    "location": {},
+    "nameInput": {},
+    "emailInput": {},
+    "mandatoryText": "_* Mandatory_",
+    "cta": {
+        "url": "#",
+        "ariaLabel": "Event Registration"
+    }
+};
+
+const EventRegistrationContextDefault = forwardRef(({ date, time, title, link, label, location, nameInput, emailInput, mandatoryText, cta, confirmationCheckboxLabel, }, ref) => (jsxs("div", { ref: ref, className: "dsa-event-registration", children: [jsx(Headline, { spaceAfter: "minimum", text: title, level: "h2", sub: label, switchOrder: true }), jsxs("div", { className: "dsa-event-registration__infos", children: [jsxs("div", { className: "dsa-event-registration__details", children: [jsxs("div", { className: "dsa-event-registration__date", children: [jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "time" }), time] })] }), jsxs("div", { className: "dsa-event-registration__location dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), jsxs("address", { children: [location?.name && (jsx("span", { className: "dsa-event-registration__location-name", children: location.name })), jsx(Markdown, { className: "dsa-event-registration__location-address", children: location?.address })] })] })] }), jsx(Link, { className: "dsa-event-registration__link", href: link?.url, children: link?.text })] }), jsxs("form", { className: "dsa-event-registration__form", children: [jsxs("div", { className: "dsa-event-registration__inputs", children: [jsx(TextField, { label: nameInput.label, placeholder: nameInput?.placeholder }), jsx(TextField, { type: "email", label: emailInput.label, placeholder: emailInput?.placeholder }), jsx(Checkbox, { label: confirmationCheckboxLabel, name: "confirmation-checkbox", id: "confirmation-checkbox" })] }), jsxs("div", { className: "dsa-event-registration__footer", children: [jsx(Markdown, { className: "dsa-event-registration__mandatory-text", children: mandatoryText }), jsx(Button, { label: cta.label, url: cta.url, "aria-label": cta?.ariaLabel, variant: "primary", size: "small" })] })] })] })));
+const EventRegistrationContext = createContext(EventRegistrationContextDefault);
+const EventRegistration = forwardRef((props, ref) => {
+    const Component = useContext(EventRegistrationContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+EventRegistration.displayName = "EventRegistration";
+
+export { EventRegistration, EventRegistrationContext, EventRegistrationContextDefault };

package/dist/components/faq/faq.css

@@ -15,7 +15,7 @@
   --c-collapsible-box-summary--color: var(--dsa-faq__summary--color, var(--dsa-topic--color));
   --c-collapsible-box-summary--font-weight: var(--dsa-faq__summary--font-weight), var(--dsa-topic--font-weight);
   --c-collapsible-box-summary--font: var(--dsa-faq__summary--font, var(--dsa-topic--font));
-  --c-collapsible-box-icon--color: var(--dsa-faq-icon--color, var(--ks-text-color-primary));
+  --c-collapsible-box-icon--color: var(--dsa-faq__icon--color, var(--ks-text-color-primary));
   --c-collapsible-box_header--padding: var(--dsa-faq_header--padding, 1em 0);
   --c-collapsible-box_content--padding: var(--dsa-faq_content--padding, 0em 0em 1em 0em);
   --c-collapsible-box--border-color: var(--dsa-faq--border-color, var(--ks-border-color-accent));

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

@@ -10,6 +10,7 @@
       "title": "Questions",
       "description": "The questions and answers in the Faq section",
       "items": {
+        "title": "Question",
         "type": "object",
         "properties": {
           "question": {
@@ -33,14 +34,10 @@
         },
         "additionalProperties": false,
         "required": [
-          "question",
-          "answer"
+          "question"
         ]
       },
       "minItems": 1
-    },
-    "type": {
-      "const": "faq"
     }
   },
   "additionalProperties": false,

package/dist/components/faq/faq.schema.json

@@ -10,6 +10,7 @@
       "title": "Questions",
       "description": "The questions and answers in the Faq section",
       "items": {
+        "title": "Question",
         "type": "object",
         "properties": {
           "question": {
@@ -28,7 +29,7 @@
           }
         },
         "additionalProperties": false,
-        "required": ["question", "answer"]
+        "required": ["question"]
       },
       "minItems": 1
     }

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

@@ -1,8 +1,25 @@
 /// <reference types="react" />
-import { HTMLAttributes } from "react";
-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 };
+import { ReactNode, HTMLAttributes } from "react";
+import { Question } from "../../FaqProps-78384db5.js";
+import { FaqProps as FaqSchemaProps } from "../../FaqProps-78384db5.js";
+type FaqProps = Omit<FaqSchemaProps, "questions"> & HTMLAttributes<HTMLDivElement> & {
+    questions: ({
+        children?: ReactNode;
+    } & Question)[];
+};
+declare const FaqContextDefault: import("react").ForwardRefExoticComponent<Omit<FaqSchemaProps, "questions"> & HTMLAttributes<HTMLDivElement> & {
+    questions: ({
+        children?: ReactNode;
+    } & Question)[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+declare const FaqContext: import("react").Context<import("react").ForwardRefExoticComponent<Omit<FaqSchemaProps, "questions"> & HTMLAttributes<HTMLDivElement> & {
+    questions: ({
+        children?: ReactNode;
+    } & Question)[];
+} & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Faq: import("react").ForwardRefExoticComponent<Omit<FaqSchemaProps, "questions"> & HTMLAttributes<HTMLDivElement> & {
+    questions: ({
+        children?: ReactNode;
+    } & Question)[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+export { FaqProps, 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-12f48df8.js';
 
-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 defaults = {
+    "questions": []
+};
+
+const FaqContextDefault = forwardRef(({ questions, children, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: `dsa-faq`, children: questions.map((question, index) => (jsx(CollapsibleBox, { summary: question.question, text: question.answer, children: question.children }, 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

@@ -47,10 +47,10 @@
       "title": "Call to Action",
       "description": "The call to action",
       "properties": {
-        "target": {
+        "url": {
           "type": "string",
-          "title": "Call to Action target",
-          "description": "The CTA target",
+          "title": "Call to Action url",
+          "description": "The CTA url",
           "default": "#",
           "format": "uri"
         },
@@ -63,6 +63,16 @@
             "See all our partners"
           ]
         },
+        "icon": {
+          "type": "string",
+          "format": "icon",
+          "title": "Icon",
+          "description": "Icon for the link style of the cta",
+          "examples": [
+            "arrow-right"
+          ],
+          "default": "arrow-right"
+        },
         "toggle": {
           "type": "boolean",
           "title": "Call to Action Toggle",
@@ -81,9 +91,6 @@
         }
       },
       "additionalProperties": false
-    },
-    "type": {
-      "const": "feature"
     }
   },
   "additionalProperties": false,

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

@@ -35,10 +35,10 @@
       "title": "Call to Action",
       "description": "The call to action",
       "properties": {
-        "target": {
+        "url": {
           "type": "string",
-          "title": "Call to Action target",
-          "description": "The CTA target",
+          "title": "Call to Action url",
+          "description": "The CTA url",
           "default": "#",
           "format": "uri"
         },
@@ -49,6 +49,14 @@
           "default": "See more",
           "examples": ["See all our partners"]
         },
+        "icon": {
+          "type": "string",
+          "format": "icon",
+          "title": "Icon",
+          "description": "Icon for the link style of the cta",
+          "examples": ["arrow-right"],
+          "default": "arrow-right"
+        },
         "toggle": {
           "type": "boolean",
           "title": "Call to Action Toggle",

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

@@ -19,13 +19,17 @@ type Title = string;
  */
 type Text = string;
 /**
- * The CTA target
+ * The CTA url
  */
-type CallToActionTarget = string;
+type CallToActionUrl = string;
 /**
  * The text label displayed on the link
  */
 type LinkLabel = string;
+/**
+ * Icon for the link style of the cta
+ */
+type Icon1 = string;
 /**
  * Activate/disable the CTAs
  */
@@ -44,8 +48,9 @@ interface FeatureProps {
  * The call to action
  */
 interface CallToAction {
-    target?: CallToActionTarget;
+    url?: CallToActionUrl;
     label?: LinkLabel;
+    icon?: Icon1;
     toggle?: CallToActionToggle;
     /**
      * Choose the style of the CTA

package/dist/components/feature/index.js

@@ -4,10 +4,22 @@ 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-12f48df8.js';
+import Markdown from 'markdown-to-jsx';
 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`
+const defaults = {
+    "style": "stack",
+    "cta": {
+        "url": "#",
+        "label": "See more",
+        "icon": "arrow-right",
+        "toggle": true,
+        "style": "link"
+    }
+};
+
+const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon, cta, ...rest }, ref) => (jsxs("div", { ...rest, ref: ref, className: classnames(`dsa-feature dsa-feature--${style === `stack`
         ? `stack dsa-feature--large`
         : style === `besideSmall`
             ? `beside dsa-feature--small`
@@ -17,11 +29,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("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" })) : ("") }))] })));
+                        : `${style}`}`), children: [jsxs("div", { className: "dsa-feature__header", children: [icon && (jsx(Icon, { className: "dsa-feature__icon", icon: icon, role: "presentation", "aria-hidden": true, focusable: false })), jsx("span", { className: "dsa-feature__title", children: title })] }), text || cta.style === "intext" ? (jsxs("p", { className: "dsa-feature__text", children: [jsx(Markdown, { children: text }), cta.style === "intext" && cta.toggle ? (jsxs(Fragment, { children: [" ", " ", jsx(Link, { href: cta.url, children: cta.label ? cta.label : "See more" })] })) : ("")] })) : (""), cta.toggle && (cta.style === "link" || cta.style === "button") && (jsx("div", { className: "dsa-feature__cta", children: cta.style === "link" ? (jsxs(Link, { className: "dsa-feature__link", href: cta.url, children: [cta.label ? cta.label : "See more", jsx(Icon, { "aria-hidden": true, role: "presentation", focusable: false, icon: cta.icon || "arrow-right" })] })) : cta.style === "button" ? (jsx(Button, { className: "dsa-feature__button", size: "small", url: cta.url, label: cta.label ? cta.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

@@ -4,7 +4,7 @@
   --dsa-feature__title--color: var(--dsa-topic--color);
   --dsa-feature__title--font: var(--ks-font-interface-m);
   --dsa-feature__title--font-family: var(--dsa-topic--font-family);
-  --dsa-feature__copy--color: var(--dsa-rich-text--color);
+  --dsa-feature__copy--color: var(--ks-text-color-copy);
   --dsa-feature__copy--font: var(--ks-font-copy-s);
   --dsa-feature__link--font: var(--ks-font-copy-s);
   --dsa-feature__link--font-weight: var(--dsa-link--font-weight);
@@ -14,7 +14,7 @@
   --dsa-feature__link--text-decoration_hover: none;
   --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_large__icon--size-multiplier: 2.5;
   --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);
@@ -46,6 +46,10 @@
   justify-content: center;
 }
 .dsa-features .dsa-feature {
+  --dsa-feature_large__icon--size: calc(
+    var(--dsa-feature_small__icon--size) *
+      var(--dsa-feature_large__icon--size-multiplier)
+  );
   display: flex;
   position: relative;
   flex-direction: column;
@@ -89,6 +93,9 @@
   top: 0;
   left: 0;
 }
+.dsa-features .dsa-feature--beside.dsa-feature--large {
+  padding-top: calc(var(--dsa-feature__icon--size) / 2 - var(--dsa-feature_small__icon--size) / 2);
+}
 .dsa-features .dsa-feature--stack .dsa-feature__header {
   display: flex;
   flex-direction: column;
@@ -117,24 +124,15 @@
 }
 .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));
+  color: var(--dsa-feature__title--color, var(--dsa-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));
 }
 .dsa-features .dsa-feature__text {
+  color: var(--dsa-feature__copy--color, var(--ks-text-color-copy));
+  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);

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

@@ -85,10 +85,10 @@
           "cta": {
             "type": "object",
             "properties": {
-              "target": {
+              "url": {
                 "type": "string",
-                "title": "Call to Action target",
-                "description": "The CTA target",
+                "title": "Call to Action url",
+                "description": "The CTA url",
                 "default": "#",
                 "format": "uri"
               },
@@ -100,6 +100,16 @@
                 "examples": [
                   "See all our partners"
                 ]
+              },
+              "icon": {
+                "type": "string",
+                "format": "icon",
+                "title": "Icon",
+                "description": "Icon for the link style of the cta",
+                "examples": [
+                  "arrow-right"
+                ],
+                "default": "arrow-right"
               }
             },
             "additionalProperties": false
@@ -109,9 +119,6 @@
       },
       "minItems": 1,
       "maxItems": 8
-    },
-    "type": {
-      "const": "features"
     }
   },
   "additionalProperties": false

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

@@ -54,11 +54,14 @@
           "cta": {
             "type": "object",
             "properties": {
-              "target": {
-                "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/cta/properties/target"
+              "url": {
+                "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/cta/properties/url"
               },
               "label": {
                 "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/cta/properties/label"
+              },
+              "icon": {
+                "$ref": "http://schema.mydesignsystem.com/feature.schema.json#/properties/cta/properties/icon"
               }
             }
           }