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

package/dist/components/button/button.css

@@ -1,66 +1,116 @@
-a.c-button,
-button.c-button {
-  --c-button--border-radius: var(--ks-border-radius-pill);
-  --c-button--padding: 0.75em 2em;
-  --c-button--font-weight: var(--ks-font-weight-semi-bold);
+.dsa-button {
+  --dsa-button--border-radius: var(--ks-border-radius-pill);
+  --dsa-button--padding: 0.75em 2em;
+  --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
+  --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);
+  --dsa-button_primary--background-color: var(--ks-background-color-primary-interactive);
+  --dsa-button_primary--background-color_hover: var(--ks-background-color-primary-interactive-hover);
+  --dsa-button_primary_inverted--color: var(--ks-color-fg-inverted-alpha-2);
+  --dsa-button_primary_inverted--color_hover: var(--ks-color-fg-inverted);
+  --dsa-button_primary_inverted--color_active: var(--ks-color-fg-inverted);
+  --dsa-button_secondary--color: var(--ks-text-color-default);
+  --dsa-button_secondary--color_hover: var(--ks-text-color-default);
+  --dsa-button_secondary--color_active: var(--ks-text-color-default);
+  --dsa-button_secondary--border-color: transparent;
+  --dsa-button_secondary--border-color_hover: transparent;
+  --dsa-button_secondary--border-color_active: transparent;
+  --dsa-button_secondary--border-width: 2px;
+  --dsa-button_secondary--background-color: var(--ks-background-color-interface-interactive);
+  --dsa-button_secondary--background-color_hover: var(--ks-background-color-interface-interactive-hover);
+  --dsa-button_secondary--background-color_active: var(--ks-background-color-interface-interactive-active);
+  --dsa-button_terciary--color: var(--ks-text-color-default);
+  --dsa-button_terciary--color_hover: var(--ks-text-color-default);
+  --dsa-button_terciary--color_active: var(--ks-text-color-default);
+  --dsa-button_terciary--border-color: var(--ks-border-color-interface-interactive);
+  --dsa-button_terciary--border-color_hover: var(--ks-border-color-interface-interactive-hover);
+  --dsa-button_terciary--border-color_active: var(--ks-border-color-interface-interactive-active);
+  --dsa-button_terciary--background-color_hover: transparent;
+  --dsa-button_terciary--background-color_active: transparent;
 }
-a.c-button--solid,
-button.c-button--solid {
-  --c-button--color: var(--ks-color-fg-alpha-2);
-  --c-button--color-hover: var(--ks-color-fg);
-  --c-button--color-active: var(--ks-color-fg);
-  --c-button--background-color: var(--ks-color-primary);
-  --c-button--background-color-hover: var(--ks-color-primary);
-  --c-button--shadow: 0;
-  --c-button--shadow-hover: 0;
-}
-[ks-inverted=true] a.c-button--solid,
-[ks-inverted=true] button.c-button--solid {
-  --c-button--color: var(--ks-color-fg-inverted-alpha-2);
-  --c-button--color-hover: var(--ks-color-fg-inverted);
-  --c-button--color-active: var(--ks-color-fg-inverted);
-}
-a.c-button--clear,
-button.c-button--clear {
-  --c-button--color: var(--ks-color-fg-alpha-2);
-  --c-button--color-hover: var(--ks-color-fg);
-  --c-button--color-active: var(--ks-color-fg);
-  --c-button--border-color: transparent;
-  --c-button--border-color-hover: transparent;
-  --c-button--border-color-active: transparent;
-  --c-button--border-width: 2px;
-  --c-button--background-color: var(--ks-color-fg-alpha-8);
-  --c-button--background-color-hover: var(--ks-color-fg-alpha-7);
-  --c-button--background-color-active: var(--ks-color-fg-alpha-7);
-  padding: var(--c-button--padding);
+
+.dsa-button.c-button {
+  --c-button--border-radius: var(--dsa-button--border-radius, var(--ks-border-radius-control));
+  --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));
+  transition-property: box-shadow, transform, background-color, color, border;
 }
-a.c-button--outline,
-button.c-button--outline {
-  --c-button--color: var(--ks-color-fg-alpha-2);
-  --c-button--color-hover: var(--ks-color-fg);
-  --c-button--color-active: var(--ks-color-fg);
-  --c-button--border-color: var(--ks-color-fg-alpha-6);
-  --c-button--border-color-hover: var(--ks-color-fg);
-  --c-button--border-color-active: var(--ks-color-fg);
-  --c-button--background-color-hover: transparent;
-  --c-button--background-color-active: transparent;
+.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));
+  --c-button--color-active: var(--dsa-button_primary--color_active, var(--dsa-text-color-on-primary));
+  --c-button--border-color: var(--dsa-button_primary--border-color, none);
+  --c-button--border-color-hover: var(--dsa-button_primary--border-color_hover, none);
+  --c-button--border-color-active: var(--dsa-button_primary--border-color_active, none);
+  --c-button--border-color-selected: var(--dsa-button_primary--border-color_selected, none);
+  --c-button--background-color: var(
+    --dsa-button_primary--background-color,
+    var(--ks-background-color-primary-interactive)
+  );
+  --c-button--background-color-hover: var(
+    --dsa-button_primary--background-color_hover,
+    var(--ks-background-color-primary-interactive-hover)
+  );
+  --c-button--background-color-active: var(
+    --dsa-button_primary--background-color_active,
+    var(--ks-background-color-primary-interactive-active)
+  );
+  --c-button--background-color-selected: var(
+    --dsa-button_primary--background-color_selected,
+    var(--ks-background-color-primary-interactive-selected)
+  );
 }
-
-[ks-inverted=true] .c-button--primary,
-[ks-inverted=true].c-button--primary {
-  --c-button--shadow: 0px 0px 2px 1px var(--ks-color-primary-alpha-3-base),
-    0px 0px 13px 0px var(--ks-color-primary-alpha-5-base);
-  --c-button--shadow-hover: 0px 0px 2px 1px var(--ks-color-primary-alpha-4-base),
-    0px 0px 13px 0px var(--ks-color-primary-alpha-3-base);
+.dsa-button.c-button.c-button--clear {
+  padding: var(--dsa-button--padding);
+  --c-button--color: var(--dsa-button_secondary--color, var(--ks-text-color-default));
+  --c-button--color-hover: var(--dsa-button_secondary--color_hover, var(--ks-text-color-default));
+  --c-button--color-active: var(--dsa-button_secondary--color_active, var(--ks-text-color-default));
+  --c-button--border-color: var(--dsa-button_secondary--border-color, none);
+  --c-button--border-color-hover: var(--dsa-button_secondary--border-color_hover, none);
+  --c-button--border-color-active: var(--dsa-button_secondary--border-color_active, none);
+  --c-button--border-color-selected: var(--dsa-button_secondary--border-color_selected, none);
+  --c-button--background-color: var(
+    --dsa-button_secondary--background-color,
+    var(--ks-background-color-clear-interactive)
+  );
+  --c-button--background-color-hover: var(
+    --dsa-button_secondary--background-color_hover,
+    var(--ks-background-color-clear-interactive-hover)
+  );
+  --c-button--background-color-active: var(
+    --dsa-button_secondary--background-color_active,
+    var(--ks-background-color-clear-interactive-active)
+  );
+  --c-button--background-color-selected: var(
+    --dsa-button_secondary--background-color_selected,
+    var(--ks-background-color-clear-interactive-selected) ;
+  );
 }
-
-.c-button {
-  box-shadow: var(--c-button--shadow);
-  transition-property: box-shadow, transform, background-color, color, border;
+.dsa-button.c-button.c-button--outline {
+  padding: var(--dsa-button--padding);
+  --c-button--color: var(--dsa-button_terciary--color, var(--ks-text-color-default));
+  --c-button--color-hover: var(--dsa-button_terciary--color_hover, var(--ks-text-color-default));
+  --c-button--color-active: var(--dsa-button_terciary--color_active, var(--ks-text-color-default));
+  --c-button--border-color: var(--dsa-button_terciary--border-color, var(--ks-border-color-interface-interactive));
+  --c-button--border-color-hover: var(
+    --dsa-button_terciary--border-color_hover,
+    var(--ks-border-color-interface-interactive-hover)
+  );
+  --c-button--border-color-active: var(
+    --dsa-button_terciary--border-color_active,
+    var(--ks-border-color-interface-interactive-active)
+  );
+  --c-button--border-color-selected: var(
+    --dsa-button_terciary--border-color-selected,
+    var(--ks-border-color-interface-interactive_selected)
+  );
+  --c-button--background-color: var(--dsa-button_terciary--background-color, none);
+  --c-button--background-color-hover: var(--dsa-button_terciary--background-color_hover, none);
+  --c-button--background-color-active: var(--dsa-button_terciary--background-color_active, none);
+  --c-button--background-color-selected: var(--dsa-button_terciary--background-color_selected, none);
 }
-.c-button:disabled {
+.dsa-button.c-button:disabled {
   pointer-events: none;
-}
-.c-button:hover {
-  box-shadow: var(--c-button--shadow-hover);
 }

package/dist/components/button/index.js

@@ -1,9 +1,10 @@
 import "./button.css";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import classnames from 'classnames';
 import { ButtonContextDefault, ButtonContext } from '@kickstartds/base/lib/button';
 
-const Button = forwardRef(({ label, target, size = "medium", variant = "secondary", icon, disabled = false, ...props }, ref) => (jsx(ButtonContextDefault, { ...props, href: target, label: label, size: size, variant: variant === "primary"
+const Button = forwardRef(({ label, target, size = "medium", variant = "secondary", icon, disabled = false, className, ...props }, ref) => (jsx(ButtonContextDefault, { ...props, className: classnames("dsa-button", className), href: target, label: label, size: size, variant: variant === "primary"
         ? "solid"
         : variant === "secondary"
             ? "clear"

package/dist/components/cta/cta.css

@@ -28,7 +28,7 @@
 .c-storytelling.c-cta--color-neutral.c-storytelling {
   --c-rich-text--color: var(--c-storytelling--text-color-neutral);
 }
-.c-storytelling.c-cta--color-neutral.c-storytelling .c-headline__subheadline {
+.c-storytelling.c-cta--color-neutral.c-storytelling .dsa-headline__subheadline {
   --c-headline_subheadline--color: var(--c-storytelling--text-color-neutral);
 }
 .c-storytelling.c-cta.c-storytelling--full {

package/dist/components/faq/faq.css

@@ -1,17 +1,30 @@
-.c-collapsible-box {
-  --c-collapsible-box-summary--color: var(--g-headline--color);
-  --c-collapsible-box-summary--font-weight: var(--g-headline--font-weight);
-  --c-collapsible-box-summary--font: var(--ks-font-copy-l);
-  --c-collapsible-box-icon--color: var(--ks-text-color-default);
-  --c-collapsible-box_header--padding: 1em 0;
-  --c-collapsible-box_content--padding: 0em 0em 1em 0em;
+.c-faq {
+  --c-faq--border-color: var(--ks-border-color-accent);
+  --c-faq__summary--color: var(--dsa-topic--color);
+  --c-faq__summary--font-weight: var(--dsa-topic--font-weight);
+  --c-faq__summary--font: var(--dsa-topic--font);
+  --c-faq__summary--font-family: var(--dsa-topic--font-family);
+  --c-faq__answer--color: var(--dsa-headline--color);
+  --c-faq__answer--font: var(--dsa-topic-font);
+  --c-faq__icon--color: var(--ks-text-color-primary-interactive);
+  --c-faq_header--padding: 1em 0;
+  --c-faq_content--padding: 0em 0em 1em 0em;
 }
-.c-collapsible-box__header__text {
-  color: var(--c-collapsible-box-summary--color);
-  font: var(--c-collapsible-box-summary--font);
-  font-weight: var(--c-collapsible-box-summary--font-weight);
-  font-family: var(--ks-font-family-display);
+
+.c-faq .c-collapsible-box {
+  --c-collapsible-box-summary--color: var(--c-faq__summary--color, var(--dsa-topic--color));
+  --c-collapsible-box-summary--font-weight: var(--c-faq__summary--font-weight), var(--dsa-topic--font-weight);
+  --c-collapsible-box-summary--font: var(--c-faq__summary--font, var(--dsa-topic--font));
+  --c-collapsible-box-icon--color: var(--c-faq-icon--color, var(--ks-text-color-primary));
+  --c-collapsible-box_header--padding: var(--c-faq_header--padding, 1em 0);
+  --c-collapsible-box_content--padding: var(--c-faq_content--padding, 0em 0em 1em 0em);
+  --c-collapsible-box--border-color: var(--c-faq--border-color, var(--ks-border-color-accent));
 }
-.c-collapsible-box__header__icon {
-  color: var(--c-collapsible-box-icon--color);
+.c-faq .c-collapsible-box__header__text {
+  color: var(--dsa-faq__summary--color, var(--dsa-topic--color));
+  font: var(--dsa-faq__summary--font, var(--dsa-topic--font));
+  font-weight: var(--dsa-faq__summary--font-weight, var(--dsa-topic--font-weight));
+}
+.c-faq .c-collapsible-box__header__icon {
+  color: var(--c-collapsible-box-icon--color, var(--ks-text-color-primary-interactive));
 }

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

@@ -14,6 +14,7 @@
         "properties": {
           "question": {
             "type": "string",
+            "format": "markdown",
             "title": "Question",
             "description": "The question",
             "examples": [
@@ -22,6 +23,7 @@
           },
           "answer": {
             "type": "string",
+            "format": "markdown",
             "title": "Answer",
             "description": "The answer to the question",
             "examples": [

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

@@ -14,12 +14,14 @@
         "properties": {
           "question": {
             "type": "string",
+            "format": "markdown",
             "title": "Question",
             "description": "The question",
             "examples": ["What is the product made of?"]
           },
           "answer": {
             "type": "string",
+            "format": "markdown",
             "title": "Answer",
             "description": "The answer to the question",
             "examples": ["The product is made of high-quality materials"]

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

@@ -1,4 +1,7 @@
-import { HTMLAttributes, FC } from "react";
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
 import { FaqProps } from "../../FaqProps-ad618cd5.js";
-declare const Faq: FC<FaqProps & HTMLAttributes<HTMLElement>>;
-export { Faq };
+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 { FaqContextDefault, FaqContext, Faq };

package/dist/components/faq/index.js

@@ -1,9 +1,13 @@
 import "./faq.css";
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
 import { CollapsibleBox } from '@kickstartds/base/lib/collapsible-box';
 
-const Faq = ({ questions, }) => {
-    return (jsx("div", { className: `c-faq`, children: questions.map((question, index) => (jsx(CollapsibleBox, { summary: question.question, text: question.answer }, index))) }));
-};
+const FaqContextDefault = forwardRef(({ questions, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: `c-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 });
+});
 
-export { Faq };
+export { Faq, FaqContext, FaqContextDefault };

package/dist/components/feature/feature.css

@@ -0,0 +1,99 @@
+.c-feature {
+  --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--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_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__icon--gap: var(--ks-spacing-xs);
+  --dsa-feature_large__icon--gap: var(--ks-spacing-s);
+}
+
+.c-feature {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: var(--dsa-feature--gap);
+}
+.c-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-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))
+  );
+  --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-feature--beside {
+  padding-left: calc(var(--dsa-feature__icon--size) + var(--dsa-feature__icon--gap));
+}
+.c-feature--beside .c-feature__icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.c-feature--stack .c-feature__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.c-feature--centered .c-feature__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.c-feature--centered .c-feature__title,
+.c-feature--centered .c-feature__text {
+  text-align: center;
+}
+.c-feature--centered .c-feature__cta {
+  display: flex;
+  justify-content: center;
+}
+.c-feature__header {
+  display: flex;
+  align-items: center;
+  gap: var(--dsa-feature__icon--gap);
+}
+.c-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-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-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-feature__cta {
+  margin-top: auto;
+}
+.c-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-feature__link .icon {
+  width: 1.125em;
+  height: 1.125em;
+}
+.c-feature__button {
+  margin-top: calc(var(--dsa-feature--gap) * 0.5);
+}

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

@@ -0,0 +1,91 @@
+{
+  "$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",
+  "properties": {
+    "icon": {
+      "type": "string",
+      "title": "Icon",
+      "description": "The icon for the feature",
+      "examples": [
+        "person"
+      ]
+    },
+    "title": {
+      "type": "string",
+      "title": "Title",
+      "description": "The title of the feature",
+      "examples": [
+        "Feature 1"
+      ]
+    },
+    "text": {
+      "type": "string",
+      "title": "Text",
+      "description": "The description of the feature",
+      "examples": [
+        "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",
+          "title": "Call to Action target",
+          "description": "The CTA target",
+          "default": "#",
+          "format": "uri"
+        },
+        "label": {
+          "type": "string",
+          "title": "Link Label",
+          "description": "The text label displayed on the link",
+          "default": "See more",
+          "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"
+  ]
+}

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

@@ -0,0 +1,67 @@
+{
+  "$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",
+  "properties": {
+    "icon": {
+      "type": "string",
+      "title": "Icon",
+      "description": "The icon for the feature",
+      "examples": ["person"]
+    },
+    "title": {
+      "type": "string",
+      "title": "Title",
+      "description": "The title of the feature",
+      "examples": ["Feature 1"]
+    },
+    "text": {
+      "type": "string",
+      "title": "Text",
+      "description": "The description of the feature",
+      "examples": ["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",
+          "title": "Call to Action target",
+          "description": "The CTA target",
+          "default": "#",
+          "format": "uri"
+        },
+        "label": {
+          "type": "string",
+          "title": "Link Label",
+          "description": "The text label displayed on the link",
+          "default": "See more",
+          "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,
+  "required": ["title"]
+}

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

@@ -1,49 +1,7 @@
-import { HTMLAttributes, FC } from "react";
-/* eslint-disable */
-/**
- * This file was automatically generated by json-schema-to-typescript.
- * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and run json-schema-to-typescript to regenerate this file.
- */
-/**
- * The 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";
-    ctaTarget?: CallToActionTarget;
-    ctaLabel?: LinkLabel;
-    ctaToggle?: CallToActionToggle;
-    /**
-     * Choose the style of the CTA
-     */
-    ctaStyle?: "button" | "link" | "intext";
-}
-declare const Feature: FC<FeatureProps & HTMLAttributes<HTMLElement>>;
-export { Feature };
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
+import { FeatureProps } from "../../FeatureProps-f8a75850.js";
+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 { FeatureContextDefault, FeatureContext, Feature };