@kickstartds/ds-agency-premium 1.6.71--canary.45.1762.0 → 1.6.71--canary.45.1764.0

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 02 Jul 2025 10:36:48 GMT
+ * Generated on Wed, 02 Jul 2025 12:31:15 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -3591,51 +3591,34 @@
     "id": "layout-split-even--text-with-logos",
     "group": "Layout/Split Even",
     "name": "TextWithLogos",
-    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"medium\"\n  first={<><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.\"/><Button label=\"Learn more\" variant=\"primary\"/></>}\n  gutter=\"large\"\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/>",
+    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"medium\"\n  first={<><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  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/>",
     "args": {
       "contentMinWidth": "medium",
       "contentGutter": "small",
       "mobileLayout": "stack",
       "verticalAlign": "center",
-      "gutter": "large",
+      "verticalGutter": "default",
+      "horizontalGutter": "default",
       "sectionMinWidth": "wide",
       "first": {
         "key": null,
         "ref": null,
         "props": {
-          "children": [
-            {
-              "type": {},
-              "key": null,
-              "ref": null,
-              "props": {
-                "text": "Innovative solutions for Industry 4.0",
-                "level": "h2",
-                "spaceAfter": "minimum"
-              },
-              "_owner": null
-            },
-            {
-              "type": {},
-              "key": null,
-              "ref": null,
-              "props": {
-                "highlightText": true,
-                "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."
-              },
-              "_owner": null
+          "children": {
+            "type": {},
+            "key": null,
+            "ref": null,
+            "props": {
+              "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.",
+              "buttons": [
+                {
+                  "label": "Learn more"
+                }
+              ]
             },
-            {
-              "type": {},
-              "key": null,
-              "ref": null,
-              "props": {
-                "label": "Learn more",
-                "variant": "primary"
-              },
-              "_owner": null
-            }
-          ]
+            "_owner": null
+          }
         },
         "_owner": null
       },
@@ -3688,13 +3671,14 @@
     "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  gutter=\"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/>",
+    "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/>",
     "args": {
       "contentMinWidth": "medium",
       "contentGutter": "small",
       "mobileLayout": "stack",
       "verticalAlign": "top",
-      "gutter": "large",
+      "verticalGutter": "large",
+      "horizontalGutter": "large",
       "sectionMinWidth": "medium",
       "first": {
         "key": null,
@@ -3780,48 +3764,49 @@
     "screenshot": "img/screenshots/layout-split-even--faq-with-form.png"
   },
   {
-    "id": "layout-split-even--text-with-teaser",
-    "group": "Layout/Split Even",
-    "name": "TextWithTeaser",
-    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"medium\"\n  first={<><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  gutter=\"default\"\n  mobileLayout=\"stack\"\n  second={<><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  sectionMinWidth=\"medium\"\n  verticalAlign=\"top\"\n/>",
+    "id": "layout-split-weighted--text-with-contact",
+    "group": "Layout/Split Weighted",
+    "name": "TextWithContact",
+    "code": "<SplitWeighted\n  context={<><Contact image={{aspectRatio: 'wide', fullWidth: true, 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/>",
     "args": {
-      "contentMinWidth": "medium",
-      "contentGutter": "small",
-      "mobileLayout": "stack",
-      "verticalAlign": "top",
-      "gutter": "default",
-      "sectionMinWidth": "medium",
-      "first": {
+      "verticalGutter": "large",
+      "horizontalGutter": "default",
+      "sticky": false,
+      "mainLayout": {
+        "gutter": "default",
+        "minWidth": "wide"
+      },
+      "contextLayout": {
+        "gutter": "default",
+        "minWidth": "wide"
+      },
+      "order": {
+        "mobile": "mainFirst",
+        "desktop": "mainFirst"
+      },
+      "main": {
         "key": null,
         "ref": null,
         "props": {
-          "children": [
-            {
-              "type": {},
-              "key": null,
-              "ref": null,
-              "props": {
-                "text": "Innovative solutions for Industry 4.0",
-                "level": "h2",
-                "spaceAfter": "minimum"
-              },
-              "_owner": null
+          "children": {
+            "type": {},
+            "key": null,
+            "ref": null,
+            "props": {
+              "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.",
+              "buttons": [
+                {
+                  "label": "Learn more"
+                }
+              ]
             },
-            {
-              "type": {},
-              "key": null,
-              "ref": null,
-              "props": {
-                "highlightText": true,
-                "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."
-              },
-              "_owner": null
-            }
-          ]
+            "_owner": null
+          }
         },
         "_owner": null
       },
-      "second": {
+      "context": {
         "key": null,
         "ref": null,
         "props": {
@@ -3830,17 +3815,27 @@
             "key": null,
             "ref": null,
             "props": {
-              "layout": "row",
-              "button": {
-                "chevron": false,
-                "hidden": false,
-                "label": "Read more"
+              "title": "Isabella Doe",
+              "subtitle": "Creative Director",
+              "image": {
+                "src": "img/people/contact-isabella.png",
+                "aspectRatio": "wide",
+                "fullWidth": true
               },
-              "imageRatio": "landscape",
-              "headline": "Transforming Industry",
-              "text": "with Smart Solutions",
-              "image": "img/logos/castaway.svg",
-              "url": "#"
+              "links": [
+                {
+                  "icon": "twitter",
+                  "url": "#",
+                  "label": "@Isabella_Doe",
+                  "ariaLabel": "Isabella Doe on Twitter"
+                },
+                {
+                  "url": "mailto:mail@example.com",
+                  "icon": "linkedin",
+                  "label": "Isabella.Doe",
+                  "ariaLabel": "Isabella Doe on LinkedIn"
+                }
+              ]
             },
             "_owner": null
           }
@@ -3848,20 +3843,20 @@
         "_owner": null
       }
     },
-    "screenshot": "img/screenshots/layout-split-even--text-with-teaser.png"
+    "screenshot": "img/screenshots/layout-split-weighted--text-with-contact.png"
   },
   {
-    "id": "layout-split-weighted--text-with-contact",
+    "id": "layout-split-weighted--text-with-teaser",
     "group": "Layout/Split Weighted",
-    "name": "TextWithContact",
-    "code": "<SplitWeighted\n  context={<><Contact image={{aspectRatio: 'wide', fullWidth: true, 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: 'narrow'\n  }}\n  horizontalGutter=\"large\"\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.\"/><Button label=\"Learn more\" variant=\"primary\"/></>}\n  mainLayout={{\n    gutter: 'small',\n    minWidth: 'narrow'\n  }}\n  order={{\n    desktop: 'mainFirst',\n    mobile: 'mainFirst'\n  }}\n  verticalGutter=\"default\"\n/>",
+    "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: 'narrow'\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/>",
     "args": {
       "verticalGutter": "default",
-      "horizontalGutter": "large",
+      "horizontalGutter": "default",
       "sticky": false,
       "mainLayout": {
         "gutter": "small",
-        "minWidth": "narrow"
+        "minWidth": "wide"
       },
       "contextLayout": {
         "gutter": "default",
@@ -3896,59 +3891,32 @@
                 "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."
               },
               "_owner": null
-            },
-            {
-              "type": {},
-              "key": null,
-              "ref": null,
-              "props": {
-                "label": "Learn more",
-                "variant": "primary"
-              },
-              "_owner": null
             }
           ]
         },
         "_owner": null
       },
       "context": {
+        "type": {},
         "key": null,
         "ref": null,
         "props": {
-          "children": {
-            "type": {},
-            "key": null,
-            "ref": null,
-            "props": {
-              "title": "Isabella Doe",
-              "subtitle": "Creative Director",
-              "image": {
-                "src": "img/people/contact-isabella.png",
-                "aspectRatio": "wide",
-                "fullWidth": true
-              },
-              "links": [
-                {
-                  "icon": "twitter",
-                  "url": "#",
-                  "label": "@Isabella_Doe",
-                  "ariaLabel": "Isabella Doe on Twitter"
-                },
-                {
-                  "url": "mailto:mail@example.com",
-                  "icon": "linkedin",
-                  "label": "Isabella.Doe",
-                  "ariaLabel": "Isabella Doe on LinkedIn"
-                }
-              ]
-            },
-            "_owner": null
-          }
+          "layout": "row",
+          "button": {
+            "chevron": false,
+            "hidden": false,
+            "label": "Read more"
+          },
+          "imageRatio": "landscape",
+          "headline": "Transforming Industry",
+          "text": "with Smart Solutions",
+          "image": "img/logos/castaway.svg",
+          "url": "#"
         },
         "_owner": null
       }
     },
-    "screenshot": "img/screenshots/layout-split-weighted--text-with-contact.png"
+    "screenshot": "img/screenshots/layout-split-weighted--text-with-teaser.png"
   },
   {
     "id": "components-stats--count-up-with-icons",

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

@@ -30,7 +30,7 @@ type ContentMinimumWidth = "narrow" | "medium" | "wide";
 /**
  * Sets the space between the content inside the two halves of the split layout
  */
-type ContentGutter = "narrow" | "medium" | "wide" | "none";
+type ContentGutter = "narrow" | "default" | "wide" | "none";
 /**
  * Determines the layout of the sections on mobile devices
  */
@@ -40,9 +40,13 @@ type MobileLayout = "stack" | "stackReverse";
  */
 type VerticalAlignment = "top" | "center" | "bottom";
 /**
- * Sets the space between the two halves of the split layout
+ * Sets the vertical space between the content of the split layout
  */
-type Gutter = "large" | "default" | "small" | "none";
+type VerticalGutter = "large" | "default" | "small" | "none";
+/**
+ * Sets the horizontal space between the content of the split layout
+ */
+type HorizontalGutter = "large" | "default" | "small" | "none";
 /**
  * Allowed components for the first half of the split layout
  */
@@ -56,7 +60,8 @@ interface SplitEvenProps {
     contentGutter?: ContentGutter;
     mobileLayout?: MobileLayout;
     verticalAlign?: VerticalAlignment;
-    gutter?: Gutter;
+    verticalGutter?: VerticalGutter;
+    horizontalGutter?: HorizontalGutter;
     firstComponents?: First;
     secondComponents?: Second;
 }

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", gutter = "default", contentGutter = "default", first, second, }) => (jsxs("div", { className: classnames("l-split-even", mobileLayout === "stackReverse" && "l-split-even--mobile_stack-reverse", gutter && `l-split-even--gutter-${gutter}`, contentGutter && `l-split-even--content-gutter-${contentGutter}`, contentMinWidth && `l-split-even--width-${contentMinWidth}`, verticalAlign && `l-split-even--align-${verticalAlign}`), children: [jsx("div", { className: "l-split-even__content l-split-even__content--first", children: first }), jsx("div", { className: "l-split-even__content l-split-even__content--second", children: second })] }));
+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: first }), jsx("div", { className: classnames("l-split-even__content l-split-even__content--second", contentGutter && `l-split-even__content--gutter-${contentGutter}`), children: second })] }));
 
 export { SplitEven };

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

@@ -1,7 +1,10 @@
 .l-split-even {
-  --dsa-split-even--gutter_small: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
-  --dsa-split-even--gutter_default: var(--ks-spacing-stack-m) var(--ks-spacing-inline-m);
-  --dsa-split-even--gutter_large: var(--ks-spacing-stack-xl) var(--ks-spacing-xxl);
+  --dsa-split-even--v-gutter_default: var(--ks-spacing-stack-m);
+  --dsa-split-even--v-gutter_small: var(--ks-spacing-stack-l);
+  --dsa-split-even--v-gutter_large: var(--dsa-content--vertical-spacing);
+  --dsa-split-even--h-gutter_default: var(--ks-spacing-inline-l);
+  --dsa-split-even--h-gutter_small: var(--ks-spacing-inline-m);
+  --dsa-split-even--h-gutter_large: var(--ks-spacing-xxl);
   --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);
@@ -11,9 +14,29 @@
 }
 
 .l-split-even {
+  --dsa-split-even--v-gutter: var(--dsa-split-even--v-gutter_default, var(--ks-spacing-stack-m));
+  --dsa-split-even--h-gutter: var(--dsa-split-even--h-gutter_default, var(--ks-spacing-inline-l));
   display: flex;
   flex-wrap: wrap;
-  gap: var(--dsa-split-even--gutter);
+  gap: var(--dsa-split-even--v-gutter) var(--dsa-split-even--h-gutter);
+}
+.l-split-even--v-gutter-small {
+  --dsa-split-even--v-gutter: var(--dsa-split-even--v-gutter_small, var(--ks-spacing-stack-l));
+}
+.l-split-even--v-gutter-large {
+  --dsa-split-even--v-gutter: var(--dsa-split-even--v-gutter_large, var(--dsa-content--vertical-spacing));
+}
+.l-split-even--v-gutter-none {
+  --dsa-split-even--v-gutter: 0;
+}
+.l-split-even--h-gutter-small {
+  --dsa-split-even--h-gutter: var(--dsa-split-even--h-gutter_small, var(--ks-spacing-inline-m));
+}
+.l-split-even--h-gutter-large {
+  --dsa-split-even--h-gutter: var(--dsa-split-even--h-gutter_large, var(--ks-spacing-xxl));
+}
+.l-split-even--h-gutter-none {
+  --dsa-split-even--h-gutter: 0;
 }
 .l-split-even--width-narrow {
   --dsa-split-even__content--flex-basis: var(
@@ -33,39 +56,6 @@
     var(--dsa-tile--width_large)
   );
 }
-.l-split-even--gutter-none {
-  --dsa-split-even--gutter: 0;
-}
-.l-split-even--gutter-default {
-  --dsa-split-even--gutter: var(
-    --dsa-split-even--gutter_default,
-    var(--ks-spacing-stack-m) var(--ks-spacing-inline-m)
-  );
-}
-.l-split-even--gutter-small {
-  --dsa-split-even--gutter: var(
-    --dsa-split-even--gutter_small,
-    var(--ks-spacing-stack-s) var(--ks-spacing-inline-s)
-  );
-}
-.l-split-even--gutter-large {
-  --dsa-split-even--gutter: var(
-    --dsa-split-even--gutter_large,
-    var(--ks-spacing-stack-xl) var(--ks-spacing-inline-xl)
-  );
-}
-.l-split-even--content-gutter-none {
-  --dsa-split-even__content--gutter: 0;
-}
-.l-split-even--content-gutter-medium {
-  --dsa-split-even__content--gutter: var(--dsa-split-even__content--gutter_default, var(--ks-spacing-stack-m));
-}
-.l-split-even--content-gutter-small {
-  --dsa-split-even__content--gutter: var(--dsa-split-even__content--gutter_small, var(--ks-spacing-stack-s));
-}
-.l-split-even--content-gutter-large {
-  --dsa-split-even__content--gutter: var(--dsa-split-even__content--gutter_large, var(--ks-spacing-stack-xl));
-}
 .l-split-even--align-top {
   align-items: flex-start;
 }
@@ -88,7 +78,16 @@
   flex: 1 1 var(--dsa-split-even__content--flex-basis);
   display: flex;
   flex-direction: column;
-  gap: var(--dsa-split-even__content--gutter);
+  gap: var(--dsa-split-even__content--gutter_default, var(--ks-spacing-stack-m));
+}
+.l-split-even__content--gutter-none {
+  gap: 0;
+}
+.l-split-even__content--gutter-small {
+  gap: var(--dsa-split-even__content--gutter_small, var(--ks-spacing-stack-s));
+}
+.l-split-even__content--gutter-large {
+  gap: var(--dsa-split-even__content--gutter_large, var(--ks-spacing-stack-xl));
 }
 .l-split-even__content .c-button {
   width: fit-content;

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

@@ -21,11 +21,11 @@
       "type": "string",
       "enum": [
         "narrow",
-        "medium",
+        "default",
         "wide",
         "none"
       ],
-      "default": "medium"
+      "default": "default"
     },
     "mobileLayout": {
       "title": "Mobile Layout",
@@ -48,10 +48,22 @@
       ],
       "default": "top"
     },
-    "gutter": {
-      "title": "Gutter",
+    "verticalGutter": {
+      "title": "Vertical Gutter",
+      "description": "Sets the vertical space between the content of the split layout",
+      "type": "string",
+      "enum": [
+        "large",
+        "default",
+        "small",
+        "none"
+      ],
+      "default": "default"
+    },
+    "horizontalGutter": {
+      "title": "Horizontal Gutter",
+      "description": "Sets the horizontal space between the content of the split layout",
       "type": "string",
-      "description": "Sets the space between the two halves of the split layout",
       "enum": [
         "large",
         "default",

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

@@ -15,8 +15,8 @@
       "title": "Content Gutter",
       "description": "Sets the space between the content inside the two halves of the split layout",
       "type": "string",
-      "enum": ["narrow", "medium", "wide", "none"],
-      "default": "medium"
+      "enum": ["narrow", "default", "wide", "none"],
+      "default": "default"
     },
     "mobileLayout": {
       "title": "Mobile Layout",
@@ -32,10 +32,17 @@
       "enum": ["top", "center", "bottom"],
       "default": "top"
     },
-    "gutter": {
-      "title": "Gutter",
+    "verticalGutter": {
+      "title": "Vertical Gutter",
+      "description": "Sets the vertical space between the content of the split layout",
+      "type": "string",
+      "enum": ["large", "default", "small", "none"],
+      "default": "default"
+    },
+    "horizontalGutter": {
+      "title": "Horizontal Gutter",
+      "description": "Sets the horizontal space between the content of the split layout",
       "type": "string",
-      "description": "Sets the space between the two halves of the split layout",
       "enum": ["large", "default", "small", "none"],
       "default": "default"
     },

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

@@ -42,7 +42,7 @@ type ContentGutter = "large" | "default" | "small" | "none";
 /**
  * Sets the minimum width of the main section
  */
-type MinimumWidth = "narrow" | "wide";
+type MinimumWidth = "narrow" | "default" | "wide";
 /**
  * Size of gutter to use
  */
@@ -50,7 +50,7 @@ type Gutter = "large" | "default" | "small" | "none";
 /**
  * Sets the minimum width of the main section
  */
-type MinimumWidth1 = "narrow" | "wide";
+type MinimumWidth1 = "narrow" | "default" | "wide";
 /**
  * Determines the order of sections on mobile devices
  */

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

@@ -6,13 +6,15 @@
   --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_narrow: var(--dsa-content--width_narrow);
-  --dsa-split-weighted__main--flex-basis_default: var(--dsa-content--width_default);
+  --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--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_narrow: var(--dsa-tile--width_small);
   --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);
@@ -68,10 +70,13 @@
   flex-basis: var(--dsa-split-weighted__main--flex-basis_default, calc(var(--dsa-content--width_default) * 1));
   flex-grow: 1000;
   flex-shrink: 1;
-  gap: var(--dsa-split-weighted__main--gutter_default, var(--ks-spacing-stack-m));
+  gap: var(--dsa-split-weighted__main--gutter_default, var(--dsa-content--width_narrow));
 }
 .l-split-weighted__main--width-narrow {
-  flex-basis: var(--dsa-split-weighted__main--flex-basis_narrow, calc(var(--dsa-tile--width_medium) * 2));
+  flex-basis: var(--dsa-split-weighted__main--flex-basis_narrow, var(--dsa-tile--width_large));
+}
+.l-split-weighted__main--width-wide {
+  flex-basis: var(--dsa-split-weighted__main--flex-basis_wide, var(--dsa-content--width_default));
 }
 .l-split-weighted__main--gutter-small {
   gap: var(--dsa-split-weighted__main--gutter_small, var(--ks-spacing-stack-s));
@@ -83,13 +88,16 @@
   gap: 0;
 }
 .l-split-weighted__context {
-  flex-basis: var(--dsa-split-weighted__context--flex-basis_default, var(--dsa-tile--width_large));
+  flex-basis: var(--dsa-split-weighted__context--flex-basis_default, var(--dsa-tile--width_medium));
   flex-grow: 1;
   gap: var(--dsa-split-weighted__context--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__context--width-wide {
+  flex-basis: var(--dsa-split-weighted__context--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));
 }

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

@@ -56,6 +56,7 @@
           "type": "string",
           "enum": [
             "narrow",
+            "default",
             "wide"
           ],
           "default": "wide"
@@ -85,9 +86,10 @@
           "type": "string",
           "enum": [
             "narrow",
+            "default",
             "wide"
           ],
-          "default": "wide"
+          "default": "default"
         }
       },
       "additionalProperties": false

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

@@ -39,7 +39,7 @@
           "title": "Minimum Width",
           "description": "Sets the minimum width of the main section",
           "type": "string",
-          "enum": ["narrow", "wide"],
+          "enum": ["narrow", "default", "wide"],
           "default": "wide"
         }
       }
@@ -59,8 +59,8 @@
           "title": "Minimum Width",
           "description": "Sets the minimum width of the main section",
           "type": "string",
-          "enum": ["narrow", "wide"],
-          "default": "wide"
+          "enum": ["narrow", "default", "wide"],
+          "default": "default"
         }
       }
     },

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 02 Jul 2025 10:36:52 GMT
+ * Generated on Wed, 02 Jul 2025 12:31:18 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 Wed, 02 Jul 2025 10:36:57 GMT
+ * Generated on Wed, 02 Jul 2025 12:31:22 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 Wed, 02 Jul 2025 10:36:54 GMT
+ * Generated on Wed, 02 Jul 2025 12:31:20 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 Wed, 02 Jul 2025 10:36:59 GMT
+ * Generated on Wed, 02 Jul 2025 12:31:24 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 Wed, 02 Jul 2025 10:36:48 GMT
+ * Generated on Wed, 02 Jul 2025 12:31:15 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 02 Jul 2025 10:36:49 GMT
+ * Generated on Wed, 02 Jul 2025 12:31:16 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

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