@kickstartds/ds-agency-premium 1.6.68--canary.1570.bfd629c.0 → 1.6.68--canary.1575.1116f82.0

package/dist/BlogOverviewProps-9f207f1c.d.ts

@@ -3,9 +3,9 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-1cfcf6e8.js";
+import { SectionProps } from "./SectionProps-be148b48.js";
 import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
-import { CtaProps } from "./CtaProps-fd5e75dc.js";
+import { CtaProps } from "./CtaProps-8a0dba0d.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render as the blog overview intro

package/dist/BlogPostProps-6b3cff22.d.ts

@@ -5,8 +5,8 @@
  */
 import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
 import { BlogAsideProps } from "./BlogAsideProps-d9decb7c.js";
-import { SectionProps } from "./SectionProps-1cfcf6e8.js";
-import { CtaProps } from "./CtaProps-fd5e75dc.js";
+import { SectionProps } from "./SectionProps-be148b48.js";
+import { CtaProps } from "./CtaProps-8a0dba0d.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Body text for the blog post, overwrites sections if present

package/dist/{CtaProps-fd5e75dc.d.ts → CtaProps-8a0dba0d.d.ts}

@@ -79,6 +79,10 @@ type VerticalAlignmentOfTheContent = "center" | "top" | "bottom";
  * Toggle padding of the content
  */
 type Padding1 = boolean;
+/**
+ * Toggle inversion of the component
+ */
+type Inverted = boolean;
 interface CtaProps {
     headline?: ComponentHeadline;
     sub?: ComponentSubheadline;
@@ -93,6 +97,7 @@ interface CtaProps {
     textAlign?: TextAlignment;
     align?: VerticalAlignmentOfTheContent;
     padding?: Padding1;
+    inverted?: Inverted;
 }
 interface Button {
     label?: Label;
@@ -115,4 +120,4 @@ interface Order {
     mobileImageLast?: MobileImageAfterText;
     desktopImageLast?: DesktopImageAfterText;
 }
-export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, VerticalAlignmentOfTheImage, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, Padding1, CtaProps, Button, Image, Order };
+export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, VerticalAlignmentOfTheImage, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, Padding1, Inverted, CtaProps, Button, Image, Order };

package/dist/PageProps-aa29c554.d.ts

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-1cfcf6e8.js";
+import { SectionProps } from "./SectionProps-be148b48.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render on the page

package/dist/{SectionProps-1cfcf6e8.d.ts → SectionProps-be148b48.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { CtaProps } from "./CtaProps-fd5e75dc.js";
+import { CtaProps } from "./CtaProps-8a0dba0d.js";
 import { DividerProps } from "./DividerProps-2ef31901.js";
 import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
@@ -14,7 +14,7 @@ import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";
-import { SliderProps } from "./SliderProps-fd5e75dc.js";
+import { SliderProps } from "./SliderProps-8a0dba0d.js";
 import { StatsProps } from "./StatsProps-bf5ef578.js";
 import { TeaserCardProps } from "./TeaserCardProps-b9c28e78.js";
 import { TestimonialsProps } from "./TestimonialsProps-e344f597.js";
@@ -28,7 +28,7 @@ type Width = "full" | "max" | "wide" | "default" | "narrow";
 /**
  * Style of background
  */
-type Style = "stagelights" | "horizontalGradient" | "verticalGradient" | "accentTransition" | "boldTransition" | "symmetricGlow" | "anchorGlow";
+type Style = "framed" | "eye-candy" | "colorful" | "accentTransition" | "boldTransition";
 /**
  * Color of background
  */

package/dist/{SliderProps-fd5e75dc.d.ts → SliderProps-8a0dba0d.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { CtaProps } from "./CtaProps-fd5e75dc.js";
+import { CtaProps } from "./CtaProps-8a0dba0d.js";
 import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-f704d270.js";

package/dist/components/blog-overview/blog-overview.schema.dereffed.json

@@ -37,15 +37,12 @@
             "title": "Style",
             "description": "Style of background",
             "enum": [
-              "stagelights",
-              "horizontalGradient",
-              "verticalGradient",
+              "framed",
+              "eye-candy",
+              "colorful",
               "accentTransition",
-              "boldTransition",
-              "symmetricGlow",
-              "anchorGlow"
-            ],
-            "default": "default"
+              "boldTransition"
+            ]
           },
           "backgroundColor": {
             "type": "string",
@@ -407,6 +404,12 @@
                       "type": "boolean",
                       "default": false
                     },
+                    "inverted": {
+                      "title": "Inverted",
+                      "description": "Toggle inversion of the component",
+                      "type": "boolean",
+                      "default": false
+                    },
                     "type": {
                       "const": "cta"
                     }
@@ -1680,6 +1683,12 @@
                                 "type": "boolean",
                                 "default": false
                               },
+                              "inverted": {
+                                "title": "Inverted",
+                                "description": "Toggle inversion of the component",
+                                "type": "boolean",
+                                "default": false
+                              },
                               "type": {
                                 "const": "cta"
                               }
@@ -3858,6 +3867,12 @@
           "type": "boolean",
           "default": false
         },
+        "inverted": {
+          "title": "Inverted",
+          "description": "Toggle inversion of the component",
+          "type": "boolean",
+          "default": false
+        },
         "type": {
           "const": "cta"
         }

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

@@ -313,15 +313,12 @@
             "title": "Style",
             "description": "Style of background",
             "enum": [
-              "stagelights",
-              "horizontalGradient",
-              "verticalGradient",
+              "framed",
+              "eye-candy",
+              "colorful",
               "accentTransition",
-              "boldTransition",
-              "symmetricGlow",
-              "anchorGlow"
-            ],
-            "default": "default"
+              "boldTransition"
+            ]
           },
           "backgroundColor": {
             "type": "string",
@@ -683,6 +680,12 @@
                       "type": "boolean",
                       "default": false
                     },
+                    "inverted": {
+                      "title": "Inverted",
+                      "description": "Toggle inversion of the component",
+                      "type": "boolean",
+                      "default": false
+                    },
                     "type": {
                       "const": "cta"
                     }
@@ -1956,6 +1959,12 @@
                                 "type": "boolean",
                                 "default": false
                               },
+                              "inverted": {
+                                "title": "Inverted",
+                                "description": "Toggle inversion of the component",
+                                "type": "boolean",
+                                "default": false
+                              },
                               "type": {
                                 "const": "cta"
                               }
@@ -3617,6 +3626,12 @@
           "type": "boolean",
           "default": false
         },
+        "inverted": {
+          "title": "Inverted",
+          "description": "Toggle inversion of the component",
+          "type": "boolean",
+          "default": false
+        },
         "type": {
           "const": "cta"
         }

package/dist/components/button/button.css

@@ -1,8 +1,7 @@
 .dsa-button {
   --dsa-button--padding: 0.75em 1.5em;
   --dsa-button--border-width: var(--ks-border-width-default);
-  --dsa-button--border-radius: var(--ks-border-radius-control) var(--ks-border-radius-control)
-    var(--ks-border-radius-control) calc(var(--ks-border-radius-control) * 2.5);
+  --dsa-button--border-radius: var(--ks-border-radius-control);
   --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-button--text-transform: default;
   --dsa-button_small--font: var(--ks-font-interface-s);

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

@@ -165,6 +165,12 @@
       "type": "boolean",
       "default": false
     },
+    "inverted": {
+      "title": "Inverted",
+      "description": "Toggle inversion of the component",
+      "type": "boolean",
+      "default": false
+    },
     "type": {
       "const": "cta"
     }

package/dist/components/cta/cta.schema.json

@@ -131,6 +131,12 @@
       "description": "Toggle padding of the content",
       "type": "boolean",
       "default": false
+    },
+    "inverted": {
+      "title": "Inverted",
+      "description": "Toggle inversion of the component",
+      "type": "boolean",
+      "default": false
     }
   },
   "additionalProperties": false

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { CtaProps } from "../../CtaProps-fd5e75dc.js";
+import { CtaProps } from "../../CtaProps-8a0dba0d.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>>;

package/dist/components/cta/index.js

@@ -7,13 +7,13 @@ import classnames from 'classnames';
 import { useButtonGroup } from '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, align, padding, order, buttons = [], ...rest }, ref) => {
+const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, align, padding, order, buttons = [], inverted = false, ...rest }, ref) => {
     const ButtonGroup = useButtonGroup();
     return (jsx(ButtonContext.Provider
     // @ts-expect-error
     , { 
         // @ts-expect-error
-        value: ButtonGroup, children: jsx(Storytelling, { ...rest, ref: ref, className: classnames("dsa-cta", highlightText ? `dsa-cta--highlight-text` : "", colorNeutral ? `dsa-cta--color-neutral` : "", image?.padding ? `dsa-cta--image-padding` : "", !padding ? `dsa-cta--no-padding` : "", align && align !== "center" ? `dsa-cta--align-${align}` : ""), backgroundImage: backgroundImage, backgroundColor: backgroundColor, full: true, image: {
+        value: ButtonGroup, children: jsx(Storytelling, { ...rest, ref: ref, inverted: inverted, className: classnames("dsa-cta", highlightText ? `dsa-cta--highlight-text` : "", colorNeutral ? `dsa-cta--color-neutral` : "", image?.padding ? `dsa-cta--image-padding` : "", !padding ? `dsa-cta--no-padding` : "", align && align !== "center" ? `dsa-cta--align-${align}` : ""), backgroundImage: backgroundImage, backgroundColor: backgroundColor, full: true, image: {
                 source: image?.src,
                 order: order,
                 vAlign: image?.align,

package/dist/components/hero/hero.css

@@ -16,8 +16,8 @@
   --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
   --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-3);
   --dsa-hero__textbox--backdrop-filter: blur(10px);
-  --dsa-hero__textbox--box-shadow: var(--ks-box-shadow-card);
-  --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
+  --dsa-hero__textbox--box-shadow: none;
+  --dsa-hero__textbox--border-radius: var(--ks-border-radius-card);
   --dsa-hero__textbox--max-width: calc(var(--dsa-content--width_narrow) * 1.15);
   --dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
   --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
@@ -55,7 +55,7 @@
 .c-visual.dsa-hero .c-visual__box {
   --c-visual_box--background: var(--dsa-hero__textbox--background-color, var(--ks-color-bg-alpha-2));
   --c-visual_box--color: var(--dsa-hero__copy--color, var(--ks-text-color-default));
-  --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-surface));
+  --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-card));
   --c-visual_box--padding: var(--dsa-hero__textbox--padding, var(--ks-spacing-inset-squish-xl));
   --c-visual_text--font: var(--dsa-hero__copy--font, var(--dsa-rich-text--font));
 }

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

@@ -37,15 +37,12 @@
             "title": "Style",
             "description": "Style of background",
             "enum": [
-              "stagelights",
-              "horizontalGradient",
-              "verticalGradient",
+              "framed",
+              "eye-candy",
+              "colorful",
               "accentTransition",
-              "boldTransition",
-              "symmetricGlow",
-              "anchorGlow"
-            ],
-            "default": "default"
+              "boldTransition"
+            ]
           },
           "backgroundColor": {
             "type": "string",
@@ -407,6 +404,12 @@
                       "type": "boolean",
                       "default": false
                     },
+                    "inverted": {
+                      "title": "Inverted",
+                      "description": "Toggle inversion of the component",
+                      "type": "boolean",
+                      "default": false
+                    },
                     "type": {
                       "const": "cta"
                     }
@@ -1680,6 +1683,12 @@
                                 "type": "boolean",
                                 "default": false
                               },
+                              "inverted": {
+                                "title": "Inverted",
+                                "description": "Toggle inversion of the component",
+                                "type": "boolean",
+                                "default": false
+                              },
                               "type": {
                                 "const": "cta"
                               }

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 May 2025 09:50:01 GMT
+ * Generated on Fri, 09 May 2025 10:38:56 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);
@@ -32,7 +32,7 @@
   --ks-background-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-6-base);
   --ks-background-color-interface-inverted-interactive-selected-base: var(--ks-color-primary-inverted-base);
   --ks-background-color-card-base: var(--ks-color-fg-alpha-9-base);
-  --ks-background-color-card-interactive-base: var(--ks-color-bg-base);
+  --ks-background-color-card-interactive-base: var(--ks-color-fg-to-bg-9-base);
   --ks-background-color-card-interactive-disabled-base: var(--ks-color-bg-alpha-7-base);
   --ks-background-color-card-interactive-hover-base: var(--ks-color-bg-alpha-9-base);
   --ks-background-color-card-interactive-active-base: var(--ks-color-bg-alpha-9-base);
@@ -204,8 +204,8 @@
   --ks-border-width-default: 1px;
   --ks-border-width-emphasized: 2px;
   --ks-border-radius-control: 8px;
-  --ks-border-radius-card: 8px;
-  --ks-border-radius-surface: 16px;
+  --ks-border-radius-card: 8px 8px 8px 24px;
+  --ks-border-radius-surface: 32px 32px 32px 96px;
   --ks-border-radius-pill: 999px;
   --ks-border-radius-circle: 50%;
   --ks-box-shadow-opacity-control: 0.2;
@@ -787,7 +787,7 @@
   --ks-text-color-primary-interactive-hover-base: var(--ks-color-primary-alpha-2-base);
   --ks-text-color-primary-interactive-active-base: var(--ks-color-primary-alpha-2-base);
   --ks-text-color-primary-interactive-selected-base: var(--ks-color-primary-alpha-2-base);
-  --ks-text-color-primary-inverted-base: var(--ks-color-primary-inverted-base);
+  --ks-text-color-primary-inverted-base: var(--ks-color-primary-to-bg-5-base);
   --ks-text-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted-alpha-2-base);
   --ks-text-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-2-base);
   --ks-text-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-2-base);

package/dist/components/presets.json

@@ -186,12 +186,11 @@
     "id": "page-archetypes-blog-overview--blog-overview",
     "group": "Page Archetypes/Blog Overview",
     "name": "BlogOverview",
-    "code": "<BlogOverview\n  cta={{\n    align: 'center',\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Book a meeting',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: true,\n    headline: 'Get in touch',\n    highlightText: false,\n    image: {\n      align: 'center',\n      padding: false,\n      src: 'img/contact-person.png'\n    },\n    order: {\n      desktopImageLast: false,\n      mobileImageLast: false\n    },\n    padding: false,\n    sub: 'Chat with us about getting your product or platform to market faster',\n    text: 'Our modular design approach allows for flexibility and scalability in your application\\'s architecture.',\n    textAlign: 'left',\n    width: 'wide'\n  }}\n  latest={{\n    alt: 'Image of a business team working',\n    author: {\n      image: 'img/people/author-alex.png',\n      name: 'John Doe',\n      title: 'CEO'\n    },\n    date: '12/30/2022',\n    headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n    image: 'img/close-up-young-business-team-working.png',\n    link: {\n      label: 'Read more',\n      text: 'Read article',\n      url: 'https://example.com/article1'\n    },\n    readingTime: '5 min read',\n    tags: [\n      {\n        entry: 'Design Systems'\n      },\n      {\n        entry: 'Headless Websites'\n      },\n      {\n        entry: 'Training'\n      }\n    ],\n    teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.'\n  }}\n  latestTitle=\"Latest Post\"\n  list={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article3'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Training'\n        }\n      ],\n      teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.'\n    }\n  ]}\n  listTitle=\"Recent Posts\"\n  more={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    }\n  ]}\n  moreTitle=\"Featured Posts\"\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    }\n  ]}\n/>",
+    "code": "<BlogOverview\n  cta={{\n    align: 'center',\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Book a meeting',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: true,\n    headline: 'Get in touch',\n    highlightText: false,\n    image: {\n      align: 'center',\n      padding: false,\n      src: 'img/contact-person.png'\n    },\n    inverted: false,\n    order: {\n      desktopImageLast: false,\n      mobileImageLast: false\n    },\n    padding: false,\n    sub: 'Chat with us about getting your product or platform to market faster',\n    text: 'Our modular design approach allows for flexibility and scalability in your application\\'s architecture.',\n    textAlign: 'left',\n    width: 'wide'\n  }}\n  latest={{\n    alt: 'Image of a business team working',\n    author: {\n      image: 'img/people/author-alex.png',\n      name: 'John Doe',\n      title: 'CEO'\n    },\n    date: '12/30/2022',\n    headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n    image: 'img/close-up-young-business-team-working.png',\n    link: {\n      label: 'Read more',\n      text: 'Read article',\n      url: 'https://example.com/article1'\n    },\n    readingTime: '5 min read',\n    tags: [\n      {\n        entry: 'Design Systems'\n      },\n      {\n        entry: 'Headless Websites'\n      },\n      {\n        entry: 'Training'\n      }\n    ],\n    teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.'\n  }}\n  latestTitle=\"Latest Post\"\n  list={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article3'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Training'\n        }\n      ],\n      teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.'\n    }\n  ]}\n  listTitle=\"Recent Posts\"\n  more={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    }\n  ]}\n  moreTitle=\"Featured Posts\"\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    }\n  ]}\n/>",
     "args": {
       "section": [
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -233,7 +232,6 @@
         },
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -275,7 +273,6 @@
         },
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -496,6 +493,7 @@
         "textAlign": "left",
         "align": "center",
         "padding": false,
+        "inverted": false,
         "fullWidth": true,
         "contentAlign": "center",
         "text": "Our modular design approach allows for flexibility and scalability in your application's architecture.",
@@ -508,7 +506,7 @@
     "id": "page-archetypes-blog-post--blog-post",
     "group": "Page Archetypes/Blog Post",
     "name": "BlogPost",
-    "code": "<BlogPost\n  aside={{\n    author: {\n      byline: 'Senior Developer',\n      email: 'Jane.doe@example.com',\n      image: {\n        alt: 'Picture of Jane Smith',\n        aspectRatio: 'square',\n        fullWidth: false,\n        src: 'img/people/author-emily.png'\n      },\n      links: [\n        {\n          href: 'tel:+4922868896620',\n          icon: 'phone',\n          label: '0228 / 688 966 20',\n          newTab: false\n        },\n        {\n          href: 'mailto:mail@example.com',\n          icon: 'email',\n          label: 'mail@example.com',\n          newTab: false\n        }\n      ],\n      name: 'Jane Doe',\n      twitter: 'Janedoe'\n    },\n    date: '12/30/2022',\n    readingTime: '5 min read',\n    socialSharing: [\n      {\n        href: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog',\n        icon: 'twitter',\n        title: 'Share on Twitter'\n      },\n      {\n        href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline',\n        icon: 'linkedin',\n        title: 'Share on LinkedIn'\n      }\n    ]\n  }}\n  contact={{\n    copy: 'Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.',\n    image: {\n      alt: 'Picture of Jane Smith',\n      aspectRatio: 'vertical',\n      fullWidth: false,\n      src: 'img/people/contact-john.png'\n    },\n    links: [\n      {\n        href: 'mailto:mail@example.com',\n        icon: 'xing',\n        label: 'john.smith',\n        newTab: false\n      },\n      {\n        href: '#',\n        icon: 'twitter',\n        label: '@john_smith',\n        newTab: false\n      }\n    ],\n    subtitle: 'Sales Representative',\n    title: 'John Smith'\n  }}\n  content=\"\n## Introduction\nThe future of **Artificial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          \"\n  cta={{\n    align: 'center',\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact Us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Learn More',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    headline: 'Ready to Transform Your Development Process?',\n    highlightText: false,\n    image: {\n      align: 'center',\n      padding: true\n    },\n    order: {\n      desktopImageLast: true,\n      mobileImageLast: false\n    },\n    padding: false,\n    sub: 'Start your journey today.',\n    text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n    textAlign: 'center'\n  }}\n  head={{\n    alt: 'Image of a business team working',\n    date: '12/30/2022',\n    headline: 'The Future of AI: A Glimpse into the Unseen',\n    image: 'img/close-up-young-business-team-working.png',\n    tags: [\n      {\n        entry: 'Technology'\n      },\n      {\n        entry: 'AI'\n      }\n    ]\n  }}\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    }\n  ]}\n/>",
+    "code": "<BlogPost\n  aside={{\n    author: {\n      byline: 'Senior Developer',\n      email: 'Jane.doe@example.com',\n      image: {\n        alt: 'Picture of Jane Smith',\n        aspectRatio: 'square',\n        fullWidth: false,\n        src: 'img/people/author-emily.png'\n      },\n      links: [\n        {\n          href: 'tel:+4922868896620',\n          icon: 'phone',\n          label: '0228 / 688 966 20',\n          newTab: false\n        },\n        {\n          href: 'mailto:mail@example.com',\n          icon: 'email',\n          label: 'mail@example.com',\n          newTab: false\n        }\n      ],\n      name: 'Jane Doe',\n      twitter: 'Janedoe'\n    },\n    date: '12/30/2022',\n    readingTime: '5 min read',\n    socialSharing: [\n      {\n        href: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog',\n        icon: 'twitter',\n        title: 'Share on Twitter'\n      },\n      {\n        href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline',\n        icon: 'linkedin',\n        title: 'Share on LinkedIn'\n      }\n    ]\n  }}\n  contact={{\n    copy: 'Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.',\n    image: {\n      alt: 'Picture of Jane Smith',\n      aspectRatio: 'vertical',\n      fullWidth: false,\n      src: 'img/people/contact-john.png'\n    },\n    links: [\n      {\n        href: 'mailto:mail@example.com',\n        icon: 'xing',\n        label: 'john.smith',\n        newTab: false\n      },\n      {\n        href: '#',\n        icon: 'twitter',\n        label: '@john_smith',\n        newTab: false\n      }\n    ],\n    subtitle: 'Sales Representative',\n    title: 'John Smith'\n  }}\n  content=\"\n## Introduction\nThe future of **Artificial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          \"\n  cta={{\n    align: 'center',\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact Us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Learn More',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    headline: 'Ready to Transform Your Development Process?',\n    highlightText: false,\n    image: {\n      align: 'center',\n      padding: true\n    },\n    inverted: false,\n    order: {\n      desktopImageLast: true,\n      mobileImageLast: false\n    },\n    padding: false,\n    sub: 'Start your journey today.',\n    text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n    textAlign: 'center'\n  }}\n  head={{\n    alt: 'Image of a business team working',\n    date: '12/30/2022',\n    headline: 'The Future of AI: A Glimpse into the Unseen',\n    image: 'img/close-up-young-business-team-working.png',\n    tags: [\n      {\n        entry: 'Technology'\n      },\n      {\n        entry: 'AI'\n      }\n    ]\n  }}\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    }\n  ]}\n/>",
     "args": {
       "head": {
         "date": "12/30/2022",
@@ -569,7 +567,6 @@
       "section": [
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -611,7 +608,6 @@
         },
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -653,7 +649,6 @@
         },
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -722,6 +717,7 @@
         "textAlign": "center",
         "align": "center",
         "padding": false,
+        "inverted": false,
         "text": "Get started with our design system today and experience a new level of efficiency and consistency in your projects."
       },
       "content": "\n## Introduction\nThe future of **Artificial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          ",
@@ -913,6 +909,7 @@
       "textAlign": "center",
       "align": "center",
       "padding": false,
+      "inverted": false,
       "text": "Get started with our design system today and experience a new level of efficiency and consistency in your projects."
     },
     "screenshot": "img/screenshots/components-cta--banner.png"
@@ -945,6 +942,7 @@
       "textAlign": "center",
       "align": "center",
       "padding": false,
+      "inverted": false,
       "text": "Our design system is built with scalability and efficiency in mind. It allows for consistent UI across different platforms, making your development process smoother and faster."
     },
     "screenshot": "img/screenshots/components-cta--highlighted.png"
@@ -977,6 +975,7 @@
       "textAlign": "left",
       "align": "center",
       "padding": false,
+      "inverted": false,
       "text": "Our design system offers a seamless and efficient way to build scalable applications. Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture."
     },
     "screenshot": "img/screenshots/components-cta--left-aligned.png"
@@ -1015,6 +1014,7 @@
       "textAlign": "left",
       "align": "center",
       "padding": true,
+      "inverted": false,
       "text": "Our over-ear headphones provide an immersive audio experience. With noise-cancellation technology and high-quality sound.",
       "backgroundImage": "img/bg_dot-carpet-blue.svg"
     },
@@ -1054,6 +1054,7 @@
       "textAlign": "left",
       "align": "center",
       "padding": true,
+      "inverted": false,
       "text": "Our modular design approach allows for flexibility and scalability in your application's architecture."
     },
     "screenshot": "img/screenshots/components-cta--contact-banner.png"
@@ -1087,6 +1088,7 @@
       "textAlign": "left",
       "align": "center",
       "padding": true,
+      "inverted": false,
       "text": "Here at Systemics, we bring a range of design system services that can make a difference.",
       "backgroundColor": "#001856"
     },
@@ -1126,6 +1128,7 @@
       "textAlign": "left",
       "align": "center",
       "padding": true,
+      "inverted": false,
       "text": "We value efficiency without compromising quality. Our secret weapon? kickstartDS, a revolutionary code-first and open source framework for creating design systems.\n\nThis tool accelerates our development, saving you valuable time and helping us deliver top-notch results faster."
     },
     "screenshot": "img/screenshots/components-cta--angled-image.png"
@@ -1161,6 +1164,7 @@
       "textAlign": "left",
       "align": "center",
       "padding": true,
+      "inverted": false,
       "text": "Leverage our expertise in creating scalable and robust applications using modern technologies.",
       "backgroundColor": "#a30051"
     },
@@ -1200,6 +1204,7 @@
       "textAlign": "left",
       "align": "bottom",
       "padding": false,
+      "inverted": false,
       "text": "At Systemics, we believe in the power of technology to transform businesses. Our team of experienced professionals is dedicated to providing innovative solutions that meet the unique needs of your business.\n\nWe understand that every business is different, and that's why we offer custom solutions tailored to your specific business needs and requirements.",
       "backgroundImage": "img/grid-bg.svg"
     },
@@ -2511,10 +2516,9 @@
     "id": "layout-section--cards",
     "group": "Layout/Section",
     "name": "Cards",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2542,10 +2546,9 @@
     "id": "layout-section--slider",
     "group": "Layout/Section",
     "name": "Slider",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'slider',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    text: 'Section headline',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'slider',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    text: 'Section headline',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2572,10 +2575,9 @@
     "id": "layout-section--inverted",
     "group": "Layout/Section",
     "name": "Inverted",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  inverted\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  inverted\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2603,10 +2605,9 @@
     "id": "layout-section--background-image",
     "group": "Layout/Section",
     "name": "BackgroundImage",
-    "code": "<Section\n  backgroundColor=\"default\"\n  backgroundImage=\"/img/bg_dot-carpet-blue.svg\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"default\"\n  backgroundImage=\"/img/bg_dot-carpet-blue.svg\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2635,10 +2636,9 @@
     "id": "layout-section--spotlight",
     "group": "Layout/Section",
     "name": "Spotlight",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  spotlight\n  style=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  spotlight\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": true,
       "spaceBefore": "default",
@@ -2669,7 +2669,6 @@
     "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"stagelights\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "style": "stagelights",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2690,7 +2689,8 @@
         "mode": "list",
         "tileWidth": "default"
       },
-      "buttons": []
+      "buttons": [],
+      "style": "stagelights"
     },
     "screenshot": "img/screenshots/layout-section--stagelights.png"
   },
@@ -2698,10 +2698,9 @@
     "id": "layout-section--accent-background",
     "group": "Layout/Section",
     "name": "AccentBackground",
-    "code": "<Section\n  backgroundColor=\"accent\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"accent\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "accent",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2730,10 +2729,9 @@
     "id": "layout-section--bold-background",
     "group": "Layout/Section",
     "name": "BoldBackground",
-    "code": "<Section\n  backgroundColor=\"bold\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"bold\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "bold",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2765,7 +2763,6 @@
     "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"horizontalGradient\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "style": "horizontalGradient",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2786,7 +2783,8 @@
         "mode": "list",
         "tileWidth": "default"
       },
-      "buttons": []
+      "buttons": [],
+      "style": "horizontalGradient"
     },
     "screenshot": "img/screenshots/layout-section--colorful-gradient.png"
   },
@@ -2794,10 +2792,9 @@
     "id": "layout-section--with-buttons",
     "group": "Layout/Section",
     "name": "WithButtons",
-    "code": "<Section\n  backgroundColor=\"default\"\n  buttons={[\n    {\n      disabled: false,\n      icon: 'arrow-right',\n      label: 'All Showcases',\n      size: 'medium',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      icon: 'date',\n      label: 'Book a meeting',\n      size: 'medium',\n      variant: 'secondary'\n    }\n  ]}\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"default\"\n  buttons={[\n    {\n      disabled: false,\n      icon: 'arrow-right',\n      label: 'All Showcases',\n      size: 'medium',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      icon: 'date',\n      label: 'Book a meeting',\n      size: 'medium',\n      variant: 'secondary'\n    }\n  ]}\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2841,10 +2838,9 @@
     "id": "layout-section--tile-layout",
     "group": "Layout/Section",
     "name": "TileLayout",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"max\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"max\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n</Section>",
     "args": {
       "width": "max",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2873,10 +2869,9 @@
     "id": "layout-section--flex-layout",
     "group": "Layout/Section",
     "name": "FlexLayout",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"max\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"max\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n</Section>",
     "args": {
       "width": "max",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2905,10 +2900,9 @@
     "id": "layout-section--list-layout",
     "group": "Layout/Section",
     "name": "ListLayout",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-1cfcf6e8.js";
+import { SectionProps } from "../../SectionProps-be148b48.js";
 declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -23,15 +23,12 @@
       "title": "Style",
       "description": "Style of background",
       "enum": [
-        "stagelights",
-        "horizontalGradient",
-        "verticalGradient",
+        "framed",
+        "eye-candy",
+        "colorful",
         "accentTransition",
-        "boldTransition",
-        "symmetricGlow",
-        "anchorGlow"
-      ],
-      "default": "default"
+        "boldTransition"
+      ]
     },
     "backgroundColor": {
       "type": "string",
@@ -393,6 +390,12 @@
                 "type": "boolean",
                 "default": false
               },
+              "inverted": {
+                "title": "Inverted",
+                "description": "Toggle inversion of the component",
+                "type": "boolean",
+                "default": false
+              },
               "type": {
                 "const": "cta"
               }
@@ -1666,6 +1669,12 @@
                           "type": "boolean",
                           "default": false
                         },
+                        "inverted": {
+                          "title": "Inverted",
+                          "description": "Toggle inversion of the component",
+                          "type": "boolean",
+                          "default": false
+                        },
                         "type": {
                           "const": "cta"
                         }

package/dist/components/section/section.schema.json

@@ -17,15 +17,12 @@
       "title": "Style",
       "description": "Style of background",
       "enum": [
-        "stagelights",
-        "horizontalGradient",
-        "verticalGradient",
+        "framed",
+        "eye-candy",
+        "colorful",
         "accentTransition",
-        "boldTransition",
-        "symmetricGlow",
-        "anchorGlow"
-      ],
-      "default": "default"
+        "boldTransition"
+      ]
     },
     "backgroundColor": {
       "type": "string",

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { SliderProps } from "../../SliderProps-fd5e75dc.js";
+import { SliderProps } from "../../SliderProps-8a0dba0d.js";
 declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export type { SliderProps };
 export { Slider };

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

@@ -223,6 +223,12 @@
                 "type": "boolean",
                 "default": false
               },
+              "inverted": {
+                "title": "Inverted",
+                "description": "Toggle inversion of the component",
+                "type": "boolean",
+                "default": false
+              },
               "type": {
                 "const": "cta"
               }

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

@@ -11,7 +11,7 @@ const TeaserCardContextDefault = forwardRef(({ headline, text, button, target, i
         renderTopic: () => (jsxs(Fragment, { children: [label ? (jsx("span", { className: "dsa-teaser-card__label", children: label })) : (""), compiler(headline)] })), link: {
             hidden: button?.hidden,
             label: button.label,
-            variant: "secondary",
+            variant: "primary",
             target: target,
             icon: button?.chevron ? "chevron-right" : undefined,
         }, image: image, ref: ref }) })));

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
 import { TestimonialsProps } from "../../TestimonialsProps-e344f597.js";
-import { SliderProps } from "../../SliderProps-fd5e75dc.js";
+import { SliderProps } from "../../SliderProps-8a0dba0d.js";
 interface ConditionalSliderProps extends SliderProps {
     layout: "slider" | "list" | "alternating";
 }

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 May 2025 09:50:04 GMT
+ * Generated on Fri, 09 May 2025 10:38:58 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 09 May 2025 09:50:08 GMT
+ * Generated on Fri, 09 May 2025 10:39:03 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 09 May 2025 09:50:06 GMT
+ * Generated on Fri, 09 May 2025 10:39:01 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 09 May 2025 09:50:10 GMT
+ * Generated on Fri, 09 May 2025 10:39:05 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 May 2025 09:50:01 GMT
+ * Generated on Fri, 09 May 2025 10:38:56 GMT
  */
 
 :root, [ks-theme] {
@@ -33,7 +33,7 @@
   --ks-background-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-6-base);
   --ks-background-color-interface-inverted-interactive-selected-base: var(--ks-color-primary-inverted-base);
   --ks-background-color-card-base: var(--ks-color-fg-alpha-9-base);
-  --ks-background-color-card-interactive-base: var(--ks-color-bg-base);
+  --ks-background-color-card-interactive-base: var(--ks-color-fg-to-bg-9-base);
   --ks-background-color-card-interactive-disabled-base: var(--ks-color-bg-alpha-7-base);
   --ks-background-color-card-interactive-hover-base: var(--ks-color-bg-alpha-9-base);
   --ks-background-color-card-interactive-active-base: var(--ks-color-bg-alpha-9-base);
@@ -205,8 +205,8 @@
   --ks-border-width-default: 1px;
   --ks-border-width-emphasized: 2px;
   --ks-border-radius-control: 8px;
-  --ks-border-radius-card: 8px;
-  --ks-border-radius-surface: 16px;
+  --ks-border-radius-card: 8px 8px 8px 24px;
+  --ks-border-radius-surface: 32px 32px 32px 96px;
   --ks-border-radius-pill: 999px;
   --ks-border-radius-circle: 50%;
   --ks-box-shadow-opacity-control: 0.2;
@@ -788,7 +788,7 @@
   --ks-text-color-primary-interactive-hover-base: var(--ks-color-primary-alpha-2-base);
   --ks-text-color-primary-interactive-active-base: var(--ks-color-primary-alpha-2-base);
   --ks-text-color-primary-interactive-selected-base: var(--ks-color-primary-alpha-2-base);
-  --ks-text-color-primary-inverted-base: var(--ks-color-primary-inverted-base);
+  --ks-text-color-primary-inverted-base: var(--ks-color-primary-to-bg-5-base);
   --ks-text-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted-alpha-2-base);
   --ks-text-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-2-base);
   --ks-text-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-2-base);

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 May 2025 09:50:02 GMT
+ * Generated on Fri, 09 May 2025 10:38:56 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";
@@ -32,7 +32,7 @@ export const KsBackgroundColorInterfaceInvertedInteractiveHoverBase = "rgba(255,
 export const KsBackgroundColorInterfaceInvertedInteractiveActiveBase = "rgba(255, 255, 255, 0.37)";
 export const KsBackgroundColorInterfaceInvertedInteractiveSelectedBase = "#3065c0";
 export const KsBackgroundColorCardBase = "rgba(6, 8, 31, 0.05)";
-export const KsBackgroundColorCardInteractiveBase = "#ffffff";
+export const KsBackgroundColorCardInteractiveBase = "#f3f3f4";
 export const KsBackgroundColorCardInteractiveDisabledBase = "rgba(255, 255, 255, 0.24)";
 export const KsBackgroundColorCardInteractiveHoverBase = "rgba(255, 255, 255, 0.05)";
 export const KsBackgroundColorCardInteractiveActiveBase = "rgba(255, 255, 255, 0.05)";
@@ -204,8 +204,8 @@ export const KsBorderColorNegativeInvertedTranslucentBase = "rgba(210, 29, 72, 0
 export const KsBorderWidthDefault = "1px";
 export const KsBorderWidthEmphasized = "2px";
 export const KsBorderRadiusControl = "8px";
-export const KsBorderRadiusCard = "8px";
-export const KsBorderRadiusSurface = "16px";
+export const KsBorderRadiusCard = "8px 8px 8px 24px";
+export const KsBorderRadiusSurface = "32px 32px 32px 96px";
 export const KsBorderRadiusPill = "999px";
 export const KsBorderRadiusCircle = "50%";
 export const KsBoxShadowOpacityControl = "0.2";
@@ -792,7 +792,7 @@ export const KsTextColorPrimaryInteractiveBase = "#3065c0";
 export const KsTextColorPrimaryInteractiveHoverBase = "rgba(48, 101, 192, 0.87)";
 export const KsTextColorPrimaryInteractiveActiveBase = "rgba(48, 101, 192, 0.87)";
 export const KsTextColorPrimaryInteractiveSelectedBase = "rgba(48, 101, 192, 0.87)";
-export const KsTextColorPrimaryInvertedBase = "#3065c0";
+export const KsTextColorPrimaryInvertedBase = "#98b2e0";
 export const KsTextColorPrimaryInvertedInteractiveBase = "rgba(48, 101, 192, 0.87)";
 export const KsTextColorPrimaryInvertedInteractiveHoverBase = "rgba(48, 101, 192, 0.87)";
 export const KsTextColorPrimaryInvertedInteractiveActiveBase = "rgba(48, 101, 192, 0.87)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.6.68--canary.1570.bfd629c.0",
+  "version": "1.6.68--canary.1575.1116f82.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {