@kickstartds/ds-agency-premium 1.6.71--canary.45.1771.0 → 1.6.71--canary.45.1774.0

package/dist/components/blog-post/index.js

@@ -30,9 +30,9 @@ import '@kickstartds/base/lib/button';
 import '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsx(SplitWeighted, { sticky: true, horizontalGutter: "large", mainLayout: {
+const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsx(SplitWeighted, { verticalAlign: "sticky", horizontalGutter: "large", mainLayout: {
                     minWidth: "narrow",
-                }, main: jsxs(Fragment, { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), context: aside && jsx(BlogAside, { ...aside }) }) }), cta && (jsx(Fragment, { children: jsx(Section, { backgroundColor: "accent", content: { mode: "list" }, children: jsx(Cta, { ...cta }) }) }))] }));
+                }, main: jsxs(Fragment, { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), aside: aside && jsx(BlogAside, { ...aside }) }) }), cta && (jsx(Fragment, { children: jsx(Section, { backgroundColor: "accent", content: { mode: "list" }, children: jsx(Cta, { ...cta }) }) }))] }));
 BlogPost.displayName = "BlogPost";
 
 export { BlogPost };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 06:51:25 GMT
+ * Generated on Thu, 03 Jul 2025 10:12:27 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -3591,15 +3591,14 @@
     "id": "layout-split-even--text-with-logos",
     "group": "Layout/Split Even",
     "name": "TextWithLogos",
-    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"medium\"\n  first={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" highlightText text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  horizontalGutter=\"default\"\n  mobileLayout=\"stack\"\n  second={<><Logos logo={[{alt: 'Logo 1', src: 'img/logos/logoipsum-344.svg'}, {alt: 'Logo 2', src: 'img/logos/logoipsum-347.svg'}, {alt: 'Logo 3', src: 'img/logos/logoipsum-352.svg'}, {alt: 'Logo 4', src: 'img/logos/logoipsum-356.svg'}, {alt: 'Logo 5', src: 'img/logos/logoipsum-358.svg'}, {alt: 'Logo 6', src: 'img/logos/logoipsum-369.svg'}]} logosPerRow={3}/></>}\n  sectionMinWidth=\"wide\"\n  verticalAlign=\"center\"\n  verticalGutter=\"default\"\n/>",
+    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"wide\"\n  first={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" highlightText text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  horizontalGutter=\"default\"\n  second={<><Logos logo={[{alt: 'Logo 1', src: 'img/logos/logoipsum-344.svg'}, {alt: 'Logo 2', src: 'img/logos/logoipsum-347.svg'}, {alt: 'Logo 3', src: 'img/logos/logoipsum-352.svg'}, {alt: 'Logo 4', src: 'img/logos/logoipsum-356.svg'}, {alt: 'Logo 5', src: 'img/logos/logoipsum-358.svg'}, {alt: 'Logo 6', src: 'img/logos/logoipsum-369.svg'}]} logosPerRow={3}/></>}\n  verticalAlign=\"center\"\n  verticalGutter=\"default\"\n/>",
     "args": {
-      "contentMinWidth": "medium",
+      "contentMinWidth": "wide",
       "contentGutter": "small",
-      "mobileLayout": "stack",
+      "mobileReverse": false,
       "verticalAlign": "center",
       "verticalGutter": "default",
       "horizontalGutter": "default",
-      "sectionMinWidth": "wide",
       "first": {
         "key": null,
         "ref": null,
@@ -3672,11 +3671,11 @@
     "id": "layout-split-even--faq-with-form",
     "group": "Layout/Split Even",
     "name": "FAQWithForm",
-    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"medium\"\n  first={<><Headline level=\"h2\" text=\"Frequently Asked Questions\"/><Faq questions={[{answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What are the benefits of investing in a Design System?'}, {answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What is a Design System?'}, {answer: 'A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices.', question: 'What is the role of a Headless CMS in a Design System?'}]} /></>}\n  horizontalGutter=\"large\"\n  mobileLayout=\"stack\"\n  second={<><Headline level=\"h3\" spaceAfter=\"minimum\" style=\"h3\" text=\"Still have questions?\"/><No Display Name label=\"Ask us directly!\" /><Button label=\"Submit\" /></>}\n  sectionMinWidth=\"medium\"\n  verticalAlign=\"top\"\n  verticalGutter=\"large\"\n/>",
+    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"medium\"\n  first={<><Headline level=\"h2\" text=\"Frequently Asked Questions\"/><Faq questions={[{answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What are the benefits of investing in a Design System?'}, {answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What is a Design System?'}, {answer: 'A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices.', question: 'What is the role of a Headless CMS in a Design System?'}]} /></>}\n  horizontalGutter=\"large\"\n  second={<><Headline level=\"h3\" spaceAfter=\"minimum\" style=\"h3\" text=\"Still have questions?\"/><No Display Name label=\"Ask us directly!\" /><Button label=\"Submit\" /></>}\n  sectionMinWidth=\"medium\"\n  verticalAlign=\"top\"\n  verticalGutter=\"large\"\n/>",
     "args": {
       "contentMinWidth": "medium",
       "contentGutter": "small",
-      "mobileLayout": "stack",
+      "mobileReverse": false,
       "verticalAlign": "top",
       "verticalGutter": "large",
       "horizontalGutter": "large",
@@ -3768,16 +3767,16 @@
     "id": "layout-split-weighted--text-with-contact",
     "group": "Layout/Split Weighted",
     "name": "TextWithContact",
-    "code": "<SplitWeighted\n  context={<><Contact image={{aspectRatio: 'wide', src: 'img/people/contact-isabella.png'}} links={[{ariaLabel: 'Isabella Doe on Twitter', icon: 'twitter', label: '@Isabella_Doe', url: '#'}, {ariaLabel: 'Isabella Doe on LinkedIn', icon: 'linkedin', label: 'Isabella.Doe', url: 'mailto:mail@example.com'}]} subtitle=\"Creative Director\" title=\"Isabella Doe\"/></>}\n  contextLayout={{\n    gutter: 'default',\n    minWidth: 'wide'\n  }}\n  horizontalGutter=\"default\"\n  main={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  mainLayout={{\n    gutter: 'default',\n    minWidth: 'wide'\n  }}\n  order={{\n    desktop: 'mainFirst',\n    mobile: 'mainFirst'\n  }}\n  verticalGutter=\"large\"\n/>",
+    "code": "<SplitWeighted\n  aside={<><Contact image={{aspectRatio: 'wide', src: 'img/people/contact-isabella.png'}} links={[{ariaLabel: 'Isabella Doe on Twitter', icon: 'twitter', label: '@Isabella_Doe', url: '#'}, {ariaLabel: 'Isabella Doe on LinkedIn', icon: 'linkedin', label: 'Isabella.Doe', url: 'mailto:mail@example.com'}]} subtitle=\"Creative Director\" title=\"Isabella Doe\"/></>}\n  asideLayout={{\n    gutter: 'default',\n    minWidth: 'wide'\n  }}\n  horizontalGutter=\"default\"\n  main={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  mainLayout={{\n    gutter: 'default',\n    minWidth: 'wide'\n  }}\n  order={{\n    desktop: 'mainFirst',\n    mobile: 'mainFirst'\n  }}\n  verticalAlign=\"top\"\n  verticalGutter=\"large\"\n/>",
     "args": {
       "verticalGutter": "large",
       "horizontalGutter": "default",
-      "sticky": false,
+      "verticalAlign": "top",
       "mainLayout": {
         "gutter": "default",
         "minWidth": "wide"
       },
-      "contextLayout": {
+      "asideLayout": {
         "gutter": "default",
         "minWidth": "wide"
       },
@@ -3807,7 +3806,7 @@
         },
         "_owner": null
       },
-      "context": {
+      "aside": {
         "key": null,
         "ref": null,
         "props": {
@@ -3849,18 +3848,18 @@
     "id": "layout-split-weighted--text-with-teaser",
     "group": "Layout/Split Weighted",
     "name": "TextWithTeaser",
-    "code": "<SplitWeighted\n  context={<TeaserCard button={{chevron: false, hidden: false, label: 'Read more'}} headline=\"Transforming Industry\" image=\"img/logos/castaway.svg\" imageRatio=\"landscape\" layout=\"row\" text=\"with Smart Solutions\" url=\"#\"/>}\n  contextLayout={{\n    gutter: 'default',\n    minWidth: 'default'\n  }}\n  horizontalGutter=\"default\"\n  main={<><Headline level=\"h2\" spaceAfter=\"minimum\" text=\"Innovative solutions for Industry 4.0\"/><Text highlightText text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  mainLayout={{\n    gutter: 'small',\n    minWidth: 'wide'\n  }}\n  order={{\n    desktop: 'mainFirst',\n    mobile: 'mainFirst'\n  }}\n  verticalGutter=\"default\"\n/>",
+    "code": "<SplitWeighted\n  aside={<TeaserCard button={{chevron: false, hidden: false, label: 'Read more'}} headline=\"Transforming Industry\" image=\"img/logos/castaway.svg\" imageRatio=\"landscape\" layout=\"row\" text=\"with Smart Solutions\" url=\"#\"/>}\n  asideLayout={{\n    gutter: 'default',\n    minWidth: 'wide'\n  }}\n  horizontalGutter=\"default\"\n  main={<><Headline level=\"h2\" spaceAfter=\"minimum\" text=\"Innovative solutions for Industry 4.0\"/><Text highlightText text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  mainLayout={{\n    gutter: 'small',\n    minWidth: 'narrow'\n  }}\n  order={{\n    desktop: 'mainFirst',\n    mobile: 'mainFirst'\n  }}\n  verticalAlign=\"top\"\n  verticalGutter=\"default\"\n/>",
     "args": {
       "verticalGutter": "default",
       "horizontalGutter": "default",
-      "sticky": false,
+      "verticalAlign": "top",
       "mainLayout": {
         "gutter": "small",
-        "minWidth": "wide"
+        "minWidth": "narrow"
       },
-      "contextLayout": {
+      "asideLayout": {
         "gutter": "default",
-        "minWidth": "default"
+        "minWidth": "wide"
       },
       "order": {
         "mobile": "mainFirst",
@@ -3896,7 +3895,7 @@
         },
         "_owner": null
       },
-      "context": {
+      "aside": {
         "type": {},
         "key": null,
         "ref": null,

package/dist/components/split-even/index.d.ts

@@ -30,11 +30,11 @@ type ContentMinimumWidth = "narrow" | "medium" | "wide";
 /**
  * Sets the space between the content inside the two halves of the split layout
  */
-type ContentGutter = "narrow" | "default" | "wide" | "none";
+type ContentGutter = "small" | "default" | "large" | "none";
 /**
- * Determines the layout of the sections on mobile devices
+ * Reverses the order of the sections on mobile devices
  */
-type MobileLayout = "stack" | "stackReverse";
+type MobileReverse = boolean;
 /**
  * Aligns the content vertically within the sections
  */
@@ -58,7 +58,7 @@ type Second = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps
 interface SplitEvenProps {
     contentMinWidth?: ContentMinimumWidth;
     contentGutter?: ContentGutter;
-    mobileLayout?: MobileLayout;
+    mobileReverse?: MobileReverse;
     verticalAlign?: VerticalAlignment;
     verticalGutter?: VerticalGutter;
     horizontalGutter?: HorizontalGutter;

package/dist/components/split-even/index.js

@@ -2,6 +2,6 @@ import "./split-even.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 
-const SplitEven = ({ mobileLayout = "stack", contentMinWidth = "medium", verticalAlign = "top", horizontalGutter = "default", verticalGutter = "default", contentGutter = "default", first, second, }) => (jsxs("div", { className: classnames("l-split-even", mobileLayout === "stackReverse" && "l-split-even--mobile_stack-reverse", horizontalGutter && `l-split-even--h-gutter-${horizontalGutter}`, verticalGutter && `l-split-even--v-gutter-${verticalGutter}`, contentMinWidth && `l-split-even--width-${contentMinWidth}`, verticalAlign && `l-split-even--align-${verticalAlign}`), children: [jsx("div", { className: classnames("l-split-even__content l-split-even__content--first", contentGutter && `l-split-even__content--gutter-${contentGutter}`), children: verticalAlign === "sticky" ? (jsx("div", { className: "l-split-even__sticky-container", children: first })) : (first) }), jsx("div", { className: classnames("l-split-even__content l-split-even__content--second", contentGutter && `l-split-even__content--gutter-${contentGutter}`), children: verticalAlign === "sticky" ? (jsx("div", { className: "l-split-even__sticky-container", children: second })) : (second) })] }));
+const SplitEven = ({ mobileReverse = false, contentMinWidth = "medium", verticalAlign = "top", horizontalGutter = "default", verticalGutter = "default", contentGutter = "default", first, second, }) => (jsxs("div", { className: classnames("l-split-even", mobileReverse && "l-split-even--mobile-reverse", horizontalGutter && `l-split-even--h-gutter-${horizontalGutter}`, verticalGutter && `l-split-even--v-gutter-${verticalGutter}`, contentMinWidth && `l-split-even--width-${contentMinWidth}`, verticalAlign && `l-split-even--align-${verticalAlign}`), children: [jsx("div", { className: classnames("l-split-even__content l-split-even__content--first", contentGutter && `l-split-even__content--gutter-${contentGutter}`), children: verticalAlign === "sticky" ? (jsx("div", { className: "l-split-even__sticky-container", children: first })) : (first) }), jsx("div", { className: classnames("l-split-even__content l-split-even__content--second", contentGutter && `l-split-even__content--gutter-${contentGutter}`), children: verticalAlign === "sticky" ? (jsx("div", { className: "l-split-even__sticky-container", children: second })) : (second) })] }));
 
 export { SplitEven };

package/dist/components/split-even/split-even.css

@@ -9,9 +9,9 @@
   --dsa-split-even__content--gutter_small: var(--ks-spacing-stack-s);
   --dsa-split-even__content--gutter_default: var(--ks-spacing-stack-m);
   --dsa-split-even__content--gutter_large: var(--ks-spacing-stack-xl);
-  --dsa-split-even__content--flex-basis_narrow: var(--dsa-tile--width_small);
-  --dsa-split-even__content--flex-basis_medium: var(--dsa-tile--width_medium);
-  --dsa-split-even__content--flex-basis_wide: var(--dsa-tile--width_large);
+  --dsa-split-even__content--flex-basis_narrow: var(--dsa-tile--width_medium);
+  --dsa-split-even__content--flex-basis_medium: var(--dsa-tile--width_large);
+  --dsa-split-even__content--flex-basis_wide: var(--dsa-tile--width_largest);
 }
 
 .l-split-even {
@@ -74,13 +74,13 @@
   top: var(--dsa-split-even--sticky-margin, var(--ks-spacing-stack-xl));
   height: fit-content;
 }
-.l-split-even--mobile_stack-reverse {
+.l-split-even--mobile-reverse {
   flex-wrap: wrap-reverse;
 }
-.l-split-even--mobile_stack-reverse.l-split-even--align-top {
+.l-split-even--mobile-reverse.l-split-even--align-top {
   align-items: flex-end;
 }
-.l-split-even--mobile_stack-reverse.l-split-even--align-bottom {
+.l-split-even--mobile-reverse.l-split-even--align-bottom {
   align-items: flex-start;
 }
 .l-split-even__content {

package/dist/components/split-even/split-even.schema.dereffed.json

@@ -20,22 +20,18 @@
       "description": "Sets the space between the content inside the two halves of the split layout",
       "type": "string",
       "enum": [
-        "narrow",
+        "small",
         "default",
-        "wide",
+        "large",
         "none"
       ],
       "default": "default"
     },
-    "mobileLayout": {
-      "title": "Mobile Layout",
-      "description": "Determines the layout of the sections on mobile devices",
-      "type": "string",
-      "enum": [
-        "stack",
-        "stackReverse"
-      ],
-      "default": "stack"
+    "mobileReverse": {
+      "title": "Mobile Reverse",
+      "description": "Reverses the order of the sections on mobile devices",
+      "type": "boolean",
+      "default": false
     },
     "verticalAlign": {
       "title": "Vertical Alignment",

package/dist/components/split-even/split-even.schema.json

@@ -15,15 +15,14 @@
       "title": "Content Gutter",
       "description": "Sets the space between the content inside the two halves of the split layout",
       "type": "string",
-      "enum": ["narrow", "default", "wide", "none"],
+      "enum": ["small", "default", "large", "none"],
       "default": "default"
     },
-    "mobileLayout": {
-      "title": "Mobile Layout",
-      "description": "Determines the layout of the sections on mobile devices",
-      "type": "string",
-      "enum": ["stack", "stackReverse"],
-      "default": "stack"
+    "mobileReverse": {
+      "title": "Mobile Reverse",
+      "description": "Reverses the order of the sections on mobile devices",
+      "type": "boolean",
+      "default": false
     },
     "verticalAlign": {
       "title": "Vertical Alignment",

package/dist/components/split-weighted/index.d.ts

@@ -32,9 +32,9 @@ type VerticalGutter = "large" | "default" | "small" | "none";
  */
 type HorizontalGutter = "large" | "default" | "small" | "none";
 /**
- * Makes the side part sticky on scroll
+ * Aligns the content vertically within the sections
  */
-type Sticky = boolean;
+type VerticalAlignment = "top" | "center" | "bottom" | "sticky";
 /**
  * Sets the space between the content of the split layout
  */
@@ -54,39 +54,42 @@ type MinimumWidth1 = "narrow" | "default" | "wide";
 /**
  * Determines the order of sections on mobile devices
  */
-type MobileOrder = "mainFirst" | "contextFirst";
+type MobileOrder = "mainFirst" | "asideFirst";
 /**
  * Determines the order of sections on desktop devices
  */
-type DesktopOrder = "mainFirst" | "contextFirst";
+type DesktopOrder = "mainFirst" | "asideFirst";
 /**
  * Allowed components for the main half of the split layout
  */
 type Main = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
 /**
- * Allowed components for the context half of the split layout
+ * Allowed components for the aside half of the split layout
  */
-type Context = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
+type Aside = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
 interface SplitWeightedProps {
     verticalGutter?: VerticalGutter;
     horizontalGutter?: HorizontalGutter;
-    sticky?: Sticky;
+    verticalAlign?: VerticalAlignment;
     mainLayout?: MainLayout;
-    contextLayout?: ContextLayout;
+    asideLayout?: AsideLayout;
     order?: Order;
     mainComponents?: Main;
-    contextComponents?: Context;
+    asideComponents?: Aside;
 }
 interface MainLayout {
     gutter?: ContentGutter;
     minWidth?: MinimumWidth;
 }
-interface ContextLayout {
+/**
+ * Layout settings for the aside section of the split layout
+ */
+interface AsideLayout {
     gutter?: Gutter;
     minWidth?: MinimumWidth1;
 }
 /**
- * Sets the order of the main and context sections in the split layout
+ * Sets the order of the main and aside sections in the split layout
  */
 interface Order {
     mobile?: MobileOrder;
@@ -94,7 +97,7 @@ interface Order {
 }
 interface ComponentProps {
     main?: React.ReactNode;
-    context?: React.ReactNode;
+    aside?: React.ReactNode;
 }
 type SplitWeightedComponentProps = SplitWeightedProps & ComponentProps;
 declare const SplitWeighted: FC<SplitWeightedComponentProps>;

package/dist/components/split-weighted/index.js

@@ -2,12 +2,11 @@ import "./split-weighted.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 
-const SplitWeighted = ({ order, mainLayout, contextLayout, horizontalGutter = "default", verticalGutter = "default", main, context, sticky = false, }) => (jsxs("div", { className: classnames("l-split-weighted", order?.desktop === "contextFirst" &&
-        "l-split-weighted--desktop-context-first", order?.mobile === "contextFirst" &&
-        "l-split-weighted--mobile-context-first", horizontalGutter && `l-split-weighted--h-gutter-${horizontalGutter}`, verticalGutter && `l-split-weighted--v-gutter-${verticalGutter}`, sticky && `l-split-weighted--sticky`), children: [jsx("div", { className: classnames("l-split-weighted__main l-split-weighted__content", mainLayout?.gutter &&
+const SplitWeighted = ({ order, mainLayout, asideLayout, horizontalGutter = "default", verticalGutter = "default", main, aside, verticalAlign = "top", }) => (jsxs("div", { className: classnames("l-split-weighted", order?.desktop === "asideFirst" &&
+        "l-split-weighted--desktop-aside-first", order?.mobile === "asideFirst" && "l-split-weighted--mobile-aside-first", horizontalGutter && `l-split-weighted--h-gutter-${horizontalGutter}`, verticalGutter && `l-split-weighted--v-gutter-${verticalGutter}`, verticalAlign && `l-split-weighted--align-${verticalAlign}`), children: [jsx("div", { className: classnames("l-split-weighted__main l-split-weighted__content", mainLayout?.gutter &&
                 `l-split-weighted__main--gutter-${mainLayout.gutter}`, mainLayout?.minWidth &&
-                `l-split-weighted__main--width-${mainLayout.minWidth}`), children: sticky ? (jsx("div", { className: "l-split-weighted__sticky-container", children: main })) : (main) }), jsx("div", { className: classnames("l-split-weighted__context l-split-weighted__content", contextLayout?.gutter &&
-                `l-split-weighted__context--gutter-${contextLayout.gutter || "large"}`, contextLayout?.minWidth &&
-                `l-split-weighted__context--width-${contextLayout.minWidth}`), children: sticky ? (jsx("div", { className: "l-split-weighted__sticky-container", children: context })) : (context) })] }));
+                `l-split-weighted__main--width-${mainLayout.minWidth}`), children: verticalAlign === "sticky" ? (jsx("div", { className: "l-split-weighted__sticky-container", children: main })) : (main) }), jsx("div", { className: classnames("l-split-weighted__aside l-split-weighted__content", asideLayout?.gutter &&
+                `l-split-weighted__aside--gutter-${asideLayout.gutter || "large"}`, asideLayout?.minWidth &&
+                `l-split-weighted__aside--width-${asideLayout.minWidth}`), children: verticalAlign === "sticky" ? (jsx("div", { className: "l-split-weighted__sticky-container", children: aside })) : (aside) })] }));
 
 export { SplitWeighted };

package/dist/components/split-weighted/split-weighted.css

@@ -1,23 +1,23 @@
 .l-split-weighted {
   --dsa-split-weighted--sticky-margin: var(--ks-spacing-stack-xl);
-  --dsa-split-weighted--v-gutter_default: var(--ks-spacing-stack-m);
-  --dsa-split-weighted--v-gutter_small: var(--ks-spacing-stack-l);
+  --dsa-split-weighted--v-gutter_default: var(--ks-spacing-stack-l);
+  --dsa-split-weighted--v-gutter_small: var(--ks-spacing-stack-s);
   --dsa-split-weighted--v-gutter_large: var(--dsa-content--vertical-spacing);
   --dsa-split-weighted--h-gutter_default: var(--ks-spacing-inline-l);
   --dsa-split-weighted--h-gutter_small: var(--ks-spacing-inline-m);
   --dsa-split-weighted--h-gutter_large: var(--ks-spacing-xxl);
-  --dsa-split-weighted__main--flex-basis_default: var(--dsa-tile--width_large);
-  --dsa-split-weighted__main--flex-basis_narrow: var(--dsa-tile--width_medium);
-  --dsa-split-weighted__main--flex-basis_wide: var(--dsa-tile--width_largest);
+  --dsa-split-weighted__main--flex-basis_default: var(--dsa-tile--width_largest);
+  --dsa-split-weighted__main--flex-basis_narrow: var(--dsa-tile--width_large);
+  --dsa-split-weighted__main--flex-basis_wide: calc(var(--dsa-tile--width_largest) * 1.25);
   --dsa-split-weighted__main--gutter_default: var(--ks-spacing-stack-l);
   --dsa-split-weighted__main--gutter_small: var(--ks-spacing-stack-s);
   --dsa-split-weighted__main--gutter_large: var(--dsa-content--vertical-spacing);
-  --dsa-split-weighted__context--flex-basis_default: var(--dsa-tile--width_medium);
-  --dsa-split-weighted__context--flex-basis_narrow: var(--dsa-tile--width_small);
-  --dsa-split-weighted__context--flex-basis_wide: var(--dsa-tile--width_large);
-  --dsa-split-weighted__context--gutter_default: var(--ks-spacing-stack-s);
-  --dsa-split-weighted__context--gutter_small: var(--ks-spacing-stack-xs);
-  --dsa-split-weighted__context--gutter_large: var(--ks-spacing-stack-m);
+  --dsa-split-weighted__aside--flex-basis_default: var(--dsa-tile--width_medium);
+  --dsa-split-weighted__aside--flex-basis_narrow: var(--dsa-tile--width_small);
+  --dsa-split-weighted__aside--flex-basis_wide: var(--dsa-tile--width_large);
+  --dsa-split-weighted__aside--gutter_default: var(--ks-spacing-stack-s);
+  --dsa-split-weighted__aside--gutter_small: var(--ks-spacing-stack-xs);
+  --dsa-split-weighted__aside--gutter_large: var(--ks-spacing-stack-m);
 }
 
 .l-split-weighted {
@@ -27,18 +27,27 @@
   flex-wrap: wrap;
   gap: var(--dsa-split-weighted--v-gutter) var(--dsa-split-weighted--h-gutter);
 }
-.l-split-weighted--sticky {
+.l-split-weighted--align-top {
+  align-items: flex-start;
+}
+.l-split-weighted--align-center {
+  align-items: center;
+}
+.l-split-weighted--align-bottom {
+  align-items: flex-end;
+}
+.l-split-weighted--align-sticky {
   position: relative;
 }
-.l-split-weighted--sticky .l-split-weighted__sticky-container {
+.l-split-weighted--align-sticky .l-split-weighted__sticky-container {
   position: sticky;
   top: var(--dsa-split-weighted--sticky-margin, var(--ks-spacing-stack-xl));
   height: fit-content;
 }
-.l-split-weighted--desktop-context-first {
+.l-split-weighted--desktop-aside-first {
   flex-direction: row-reverse;
 }
-.l-split-weighted--mobile-context-first {
+.l-split-weighted--mobile-aside-first {
   flex-wrap: wrap-reverse;
 }
 .l-split-weighted--v-gutter-small {
@@ -87,23 +96,23 @@
 .l-split-weighted__main--gutter-none {
   gap: 0;
 }
-.l-split-weighted__context {
-  flex-basis: var(--dsa-split-weighted__context--flex-basis_default, var(--dsa-tile--width_medium));
+.l-split-weighted__aside {
+  flex-basis: var(--dsa-split-weighted__aside--flex-basis_default, var(--dsa-tile--width_medium));
   flex-grow: 1;
-  gap: var(--dsa-split-weighted__context--gutter_default, var(--ks-spacing-stack-s));
+  gap: var(--dsa-split-weighted__aside--gutter_default, var(--ks-spacing-stack-s));
 }
-.l-split-weighted__context--width-narrow {
-  flex-basis: var(--dsa-split-weighted__context--flex-basis_narrow, var(--dsa-tile--width_small));
+.l-split-weighted__aside--width-narrow {
+  flex-basis: var(--dsa-split-weighted__aside--flex-basis_narrow, var(--dsa-tile--width_small));
 }
-.l-split-weighted__context--width-wide {
-  flex-basis: var(--dsa-split-weighted__context--flex-basis_wide, var(--dsa-tile--width_large));
+.l-split-weighted__aside--width-wide {
+  flex-basis: var(--dsa-split-weighted__aside--flex-basis_wide, var(--dsa-tile--width_large));
 }
-.l-split-weighted__context--gutter-small {
-  gap: var(--dsa-split-weighted__context--gutter_small, var(--ks-spacing-stack-xs));
+.l-split-weighted__aside--gutter-small {
+  gap: var(--dsa-split-weighted__aside--gutter_small, var(--ks-spacing-stack-xs));
 }
-.l-split-weighted__context--gutter-large {
-  gap: var(--dsa-split-weighted__context--gutter_large, var(--ks-spacing-stack-m));
+.l-split-weighted__aside--gutter-large {
+  gap: var(--dsa-split-weighted__aside--gutter_large, var(--ks-spacing-stack-m));
 }
-.l-split-weighted__context--gutter-none {
+.l-split-weighted__aside--gutter-none {
   gap: 0;
 }

package/dist/components/split-weighted/split-weighted.schema.dereffed.json

@@ -28,11 +28,17 @@
       ],
       "default": "default"
     },
-    "sticky": {
-      "title": "Sticky",
-      "description": "Makes the side part sticky on scroll",
-      "type": "boolean",
-      "default": false
+    "verticalAlign": {
+      "title": "Vertical Alignment",
+      "type": "string",
+      "description": "Aligns the content vertically within the sections",
+      "enum": [
+        "top",
+        "center",
+        "bottom",
+        "sticky"
+      ],
+      "default": "top"
     },
     "mainLayout": {
       "title": "Main Layout",
@@ -64,8 +70,9 @@
       },
       "additionalProperties": false
     },
-    "contextLayout": {
-      "title": "Context Layout",
+    "asideLayout": {
+      "title": "Aside Layout",
+      "description": "Layout settings for the aside section of the split layout",
       "type": "object",
       "properties": {
         "gutter": {
@@ -97,14 +104,14 @@
     "order": {
       "type": "object",
       "title": "Order",
-      "description": "Sets the order of the main and context sections in the split layout",
+      "description": "Sets the order of the main and aside sections in the split layout",
       "properties": {
         "mobile": {
           "title": "Mobile Order",
           "type": "string",
           "enum": [
             "mainFirst",
-            "contextFirst"
+            "asideFirst"
           ],
           "default": "mainFirst",
           "description": "Determines the order of sections on mobile devices"
@@ -114,7 +121,7 @@
           "type": "string",
           "enum": [
             "mainFirst",
-            "contextFirst"
+            "asideFirst"
           ],
           "default": "mainFirst",
           "description": "Determines the order of sections on desktop devices"
@@ -3033,10 +3040,10 @@
         ]
       }
     },
-    "contextComponents": {
+    "asideComponents": {
       "type": "array",
-      "title": "Context",
-      "description": "Allowed components for the context half of the split layout",
+      "title": "Aside",
+      "description": "Allowed components for the aside half of the split layout",
       "items": {
         "anyOf": [
           {

package/dist/components/split-weighted/split-weighted.schema.json

@@ -18,11 +18,12 @@
       "enum": ["large", "default", "small", "none"],
       "default": "default"
     },
-    "sticky": {
-      "title": "Sticky",
-      "description": "Makes the side part sticky on scroll",
-      "type": "boolean",
-      "default": false
+    "verticalAlign": {
+      "title": "Vertical Alignment",
+      "type": "string",
+      "description": "Aligns the content vertically within the sections",
+      "enum": ["top", "center", "bottom", "sticky"],
+      "default": "top"
     },
     "mainLayout": {
       "title": "Main Layout",
@@ -44,8 +45,9 @@
         }
       }
     },
-    "contextLayout": {
-      "title": "Context Layout",
+    "asideLayout": {
+      "title": "Aside Layout",
+      "description": "Layout settings for the aside section of the split layout",
       "type": "object",
       "properties": {
         "gutter": {
@@ -67,19 +69,19 @@
     "order": {
       "type": "object",
       "title": "Order",
-      "description": "Sets the order of the main and context sections in the split layout",
+      "description": "Sets the order of the main and aside sections in the split layout",
       "properties": {
         "mobile": {
           "title": "Mobile Order",
           "type": "string",
-          "enum": ["mainFirst", "contextFirst"],
+          "enum": ["mainFirst", "asideFirst"],
           "default": "mainFirst",
           "description": "Determines the order of sections on mobile devices"
         },
         "desktop": {
           "title": "Desktop Order",
           "type": "string",
-          "enum": ["mainFirst", "contextFirst"],
+          "enum": ["mainFirst", "asideFirst"],
           "default": "mainFirst",
           "description": "Determines the order of sections on desktop devices"
         }
@@ -145,10 +147,10 @@
         ]
       }
     },
-    "contextComponents": {
+    "asideComponents": {
       "type": "array",
-      "title": "Context",
-      "description": "Allowed components for the context half of the split layout",
+      "title": "Aside",
+      "description": "Allowed components for the aside half of the split layout",
       "items": {
         "anyOf": [
           {

package/dist/components/testimonials/testimonials.css

@@ -2,6 +2,7 @@
 .dsa-testimonials {
   --dsa-testimonials--padding-left: calc(var(--dsa-testimonials__icon--font-size) / 6);
   --dsa-testimonials--padding-top: 0.5em;
+  --dsa-testimonials--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
   --dsa-testimonials__quote--font: var(--ks-font-copy-l);
   --dsa-testimonials__quote--font-weight: var(--ks-font-weight-regular);
   --dsa-testimonials__quote--margin-bottom: var(--ks-spacing-stack-s);
@@ -60,6 +61,9 @@
   flex-direction: column;
   gap: var(--dsa-testimonials__list--gap, var(--ks-spacing-stack-xl));
 }
+.dsa-testimonials .c-quote {
+  gap: var(--dsa-testimonials--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-m));
+}
 .dsa-testimonials .c-quote__source {
   color: var(--dsa-testimonials__source--color, var(--ks-text-color-default));
 }

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 06:51:27 GMT
+ * Generated on Thu, 03 Jul 2025 10:12:29 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 Thu, 03 Jul 2025 06:51:31 GMT
+ * Generated on Thu, 03 Jul 2025 10:12:34 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 Thu, 03 Jul 2025 06:51:29 GMT
+ * Generated on Thu, 03 Jul 2025 10:12:32 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 Thu, 03 Jul 2025 06:51:33 GMT
+ * Generated on Thu, 03 Jul 2025 10:12:35 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 Thu, 03 Jul 2025 06:51:25 GMT
+ * Generated on Thu, 03 Jul 2025 10:12:27 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Jul 2025 06:51:25 GMT
+ * Generated on Thu, 03 Jul 2025 10:12:27 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.6.71--canary.45.1771.0",
+  "version": "1.6.71--canary.45.1774.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {