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

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

@@ -30,7 +30,7 @@ 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, mainLayout: {
+const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsx(SplitWeighted, { sticky: true, 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 }) }) }))] }));
 BlogPost.displayName = "BlogPost";

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

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

package/dist/components/presets.json

@@ -3591,7 +3591,7 @@
     "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\" 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=\"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/>",
     "args": {
       "contentMinWidth": "medium",
       "contentGutter": "small",
@@ -3609,6 +3609,7 @@
             "key": null,
             "ref": null,
             "props": {
+              "highlightText": true,
               "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": [
@@ -3767,7 +3768,7 @@
     "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/>",
+    "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/>",
     "args": {
       "verticalGutter": "large",
       "horizontalGutter": "default",
@@ -3819,8 +3820,7 @@
               "subtitle": "Creative Director",
               "image": {
                 "src": "img/people/contact-isabella.png",
-                "aspectRatio": "wide",
-                "fullWidth": true
+                "aspectRatio": "wide"
               },
               "links": [
                 {
@@ -3849,7 +3849,7 @@
     "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: '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/>",
+    "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/>",
     "args": {
       "verticalGutter": "default",
       "horizontalGutter": "default",
@@ -3860,7 +3860,7 @@
       },
       "contextLayout": {
         "gutter": "default",
-        "minWidth": "narrow"
+        "minWidth": "default"
       },
       "order": {
         "mobile": "mainFirst",

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

@@ -38,7 +38,7 @@ type MobileLayout = "stack" | "stackReverse";
 /**
  * Aligns the content vertically within the sections
  */
-type VerticalAlignment = "top" | "center" | "bottom";
+type VerticalAlignment = "top" | "center" | "bottom" | "sticky";
 /**
  * Sets the vertical space between the content of the split layout
  */

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: first }), jsx("div", { className: classnames("l-split-even__content l-split-even__content--second", contentGutter && `l-split-even__content--gutter-${contentGutter}`), 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: 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

@@ -1,4 +1,5 @@
 .l-split-even {
+  --dsa-split-even--sticky-margin: var(--ks-spacing-stack-xl);
   --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);
@@ -65,6 +66,14 @@
 .l-split-even--align-bottom {
   align-items: flex-end;
 }
+.l-split-even--align-sticky {
+  position: relative;
+}
+.l-split-even--align-sticky .l-split-even__sticky-container {
+  position: sticky;
+  top: var(--dsa-split-even--sticky-margin, var(--ks-spacing-stack-xl));
+  height: fit-content;
+}
 .l-split-even--mobile_stack-reverse {
   flex-wrap: wrap-reverse;
 }

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

@@ -44,7 +44,8 @@
       "enum": [
         "top",
         "center",
-        "bottom"
+        "bottom",
+        "sticky"
       ],
       "default": "top"
     },

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

@@ -29,7 +29,7 @@
       "title": "Vertical Alignment",
       "type": "string",
       "description": "Aligns the content vertically within the sections",
-      "enum": ["top", "center", "bottom"],
+      "enum": ["top", "center", "bottom", "sticky"],
       "default": "top"
     },
     "verticalGutter": {

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

@@ -1,5 +1,5 @@
 .l-split-weighted {
-  --dsa-split-weighted--sticky-margin: var(--ks-spacing-stack-l);
+  --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_large: var(--dsa-content--vertical-spacing);
@@ -32,7 +32,7 @@
 }
 .l-split-weighted--sticky .l-split-weighted__sticky-container {
   position: sticky;
-  top: var(--dsa-split-weighted--sticky-margin, var(--ks-spacing-stack-l));
+  top: var(--dsa-split-weighted--sticky-margin, var(--ks-spacing-stack-xl));
   height: fit-content;
 }
 .l-split-weighted--desktop-context-first {

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 02 Jul 2025 12:31:18 GMT
+ * Generated on Thu, 03 Jul 2025 06:51:27 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 12:31:22 GMT
+ * Generated on Thu, 03 Jul 2025 06:51:31 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 12:31:20 GMT
+ * Generated on Thu, 03 Jul 2025 06:51:29 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 12:31:24 GMT
+ * Generated on Thu, 03 Jul 2025 06:51:33 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 12:31:15 GMT
+ * Generated on Thu, 03 Jul 2025 06:51:25 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

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

package/package.json

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