@kickstartds/ds-agency-premium 1.6.68--canary.44.1623.0 → 1.6.68--canary.44.1629.0

package/dist/SectionProps-7caa223c.d.ts

@@ -10,7 +10,7 @@ import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-aa4e6431.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
+import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

package/dist/components/blog-overview/index.d.ts

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-7caa223c.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
 export type { BlogOverviewProps };

package/dist/components/blog-post/index.d.ts

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-7caa223c.js";
+import { BlogPostProps } from "../../BlogPostProps-d9decb7c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export type { BlogPostProps };

package/dist/components/features/features.css

@@ -14,7 +14,7 @@
   --dsa-feature__link--text-decoration_hover: none;
   --dsa-feature__icon--color: var(--ks-text-color-primary);
   --dsa-feature_small__icon--size: calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m));
-  --dsa-feature_large__icon--size: calc(var(--ks-font-size-copy-m) * 2.5);
+  --dsa-feature_large__icon--size-multiplier: 2.5;
   --dsa-feature_small--gap: var(--ks-spacing-xs);
   --dsa-feature_large--gap: var(--ks-spacing-s);
   --dsa-feature_small__icon--gap: var(--ks-spacing-xs);
@@ -46,6 +46,9 @@
   justify-content: center;
 }
 .dsa-features .dsa-feature {
+  --dsa-feature_large__icon--size: calc(
+    var(--dsa-feature_small__icon--size) * var(--dsa-feature_large__icon--size-multiplier)
+  );
   display: flex;
   position: relative;
   flex-direction: column;
@@ -73,7 +76,7 @@
   left: 0;
 }
 .dsa-features .dsa-feature--beside.dsa-feature--large {
-  padding-top: calc(var(--dsa-feature__icon--size) / 4);
+  padding-top: calc(var(--dsa-feature__icon--size) / 2 - var(--dsa-feature_small__icon--size) / 2);
 }
 .dsa-features .dsa-feature--stack .dsa-feature__header {
   display: flex;

package/dist/components/header/header.css

@@ -33,6 +33,7 @@
   padding: var(--dsa-header--spacing-vertical) 0;
   transition: height var(--ks-transition-collapse);
   height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
+  justify-content: center;
 }
 .dsa-header--overlay {
   position: fixed;
@@ -56,7 +57,6 @@
   max-width: calc(var(--dsa-header--max-width) + var(--dsa-header_floating--spacing-horizontal) * 2);
   top: 10px;
   padding: var(--dsa-header--spacing-vertical) 0;
-  margin: auto;
   left: 50%;
   transform: translate(-50%, 0);
   background: var(--dsa-header_floating--background, var(--dsa-overlay-box_opaque--background-color));
@@ -75,7 +75,6 @@
   padding: 0 var(--dsa-header--spacing-horizontal);
   max-width: calc(var(--dsa-header--max-width) + var(--dsa-header--spacing-horizontal) * 2);
   width: 100%;
-  margin: auto;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;

package/dist/components/hero/hero.css

@@ -1,6 +1,6 @@
-.l-container--visual {
+.l-container--hero {
   /* stylelint-disable-next-line property-no-unknown */
-  container-name: visual;
+  container-name: hero;
 }
 
 .dsa-hero {
@@ -18,33 +18,50 @@
   --dsa-hero__textbox--backdrop-filter: var(--dsa-overlay-box_transparent--backdrop-filter);
   --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__textbox--max-width: var(--dsa-content--width_narrow);
   --dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
   --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
+  --dsa-hero__overlay--background: radial-gradient(
+    50% 125% at 100% 0%,
+    var(--ks-color-primary-alpha-5) 0%,
+    var(--ks-color-bg-alpha-4) 100%
+  );
+  --dsa-hero--below__overlay--background: linear-gradient(
+    0deg,
+    var(--ks-background-color-default) 15%,
+    transparent 50%
+  );
+  --dsa-hero--left__overlay--background: radial-gradient(
+    var(--dsa-hero__textbox--max-width) var(--dsa-hero__textbox--max-width) at
+      calc(var(--dsa-section__content--padding) * 2) 50%,
+    var(--ks-color-bg) 100%,
+    var(--ks-color-primary-alpha-5) 100%
+  );
 }
-@container visual (min-width: 640px) {
+@container hero (min-width: 640px) {
   .dsa-hero {
     --dsa-hero--min-height: 21rem;
     --dsa-hero--min-height_small: 13.35rem;
+    --dsa-hero__textbox--max-width: 50vw;
   }
 }
-@container visual (min-width: 960px) {
+@container hero (min-width: 960px) {
   .dsa-hero {
     --dsa-hero--min-height: 31.5rem;
     --dsa-hero--min-height_small: 15.8rem;
   }
 }
-@container visual (min-width: 1024px) {
+@container hero (min-width: 1024px) {
   .dsa-hero {
     --dsa-hero--min-height: 42rem;
     --dsa-hero--min-height_small: 20rem;
+    --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
   }
 }
 
-.l-container--visual {
+.l-container--hero {
   /* stylelint-disable-next-line property-no-unknown */
-  container-name: visual;
+  container-name: hero;
 }
 
 .c-visual.dsa-hero {
@@ -73,17 +90,22 @@
 .c-visual.dsa-hero.c-visual--small {
   min-height: var(--dsa-hero--min-height_small);
 }
-@container visual (min-width: 640px) {
+@container hero (min-width: 640px) {
   .c-visual.dsa-hero {
-    --c-visual_overlay--background: radial-gradient(
-      50% 125% at 100% 0%,
-      var(--ks-color-primary-alpha-5) 0%,
-      var(--ks-color-bg-alpha-5) 100%
+    --c-visual_overlay--background: var(
+      --dsa-hero__overlay--background,
+      radial-gradient(50% 125% at 100% 0%, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-bg-alpha-4) 100%)
     );
   }
   .c-visual.dsa-hero.dsa-hero--content-below {
     --c-visual_overlay--background: var(
-      --dsa-hero__overlay--background,
+      --dsa-hero--below__overlay--background,
+      linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
+    );
+  }
+  .c-visual.dsa-hero.dsa-hero--content-left {
+    --c-visual_overlay--background: var(
+      --dsa-hero--left__overlay--background,
       linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
     );
   }
@@ -120,7 +142,7 @@
   color: var(--dsa-overlay-text--text-color, var(--ks-color-fg));
   filter: drop-shadow(var(--dsa-overlay-text--shadow, 0 0 10px var(--ks-color-bg-inverted-alpha-3-base)));
 }
-@container visual (min-width: 640px) {
+@container hero (min-width: 640px) {
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
     position: relative;
   }
@@ -138,7 +160,7 @@
   .c-visual.dsa-hero.c-visual--no-crop {
     --c-visual--min-height: 0;
   }
-  @container visual (min-width: 640px) {
+  @container hero (min-width: 640px) {
     .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
       height: fit-content;
     }
@@ -150,7 +172,7 @@
   .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full {
     height: fit-content;
   }
-  @container visual (min-width: 640px) {
+  @container hero (min-width: 640px) {
     .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image {
       height: fit-content;
     }

package/dist/components/hero/index.js

@@ -14,45 +14,45 @@ const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightT
     // @ts-expect-error
     , { 
         // @ts-expect-error
-        value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { ...rest, ref: ref, className: classnames(`dsa-hero dsa-hero--content-${textPosition}`, highlightText ? `dsa-hero--highlight-text` : "", colorNeutral ? `dsa-hero--color-neutral` : "", className), height: height, overlay: overlay, skipButton: height === "fullScreen" ? true : false, inverted: true, box: {
-                    background: textbox === true ? "solid" : "transparent",
-                    enabled: true,
-                    vertical: textPosition === "below" || textPosition === "corner"
-                        ? "bottom"
-                        : "center",
-                    horizontal: textPosition === "left" || textPosition === "corner"
-                        ? "left"
-                        : textPosition === "right"
-                            ? "right"
+        value: ButtonGroup, children: jsx(Container, { name: "hero", children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { ...rest, ref: ref, className: classnames(`dsa-hero dsa-hero--content-${textPosition}`, highlightText ? `dsa-hero--highlight-text` : "", colorNeutral ? `dsa-hero--color-neutral` : "", className), height: height, overlay: overlay, skipButton: height === "fullScreen" ? true : false, inverted: true, box: {
+                        background: textbox === true ? "solid" : "transparent",
+                        enabled: true,
+                        vertical: textPosition === "below" || textPosition === "corner"
+                            ? "bottom"
                             : "center",
-                    link: {
-                        // @ts-expect-error
-                        buttons,
-                        colorNeutral,
-                        enabled: buttons.length > 0,
-                        arrangement: textPosition === "below" || textPosition === "center"
-                            ? "center"
-                            : "left",
-                    },
-                    headline: {
-                        align: textPosition === "below" || textPosition === "center"
-                            ? "center"
-                            : "left",
-                        text: headline,
-                        sub: sub,
-                        level: "h3",
-                        style: highlightText ? "h1" : undefined,
-                    },
-                    text: text,
-                }, media: {
-                    mode: "image",
-                    image: {
-                        srcMobile: image.srcMobile,
-                        srcTablet: image.srcTablet,
-                        srcDesktop: image.srcDesktop,
-                        src: image.src,
-                    },
-                } }) }) }));
+                        horizontal: textPosition === "left" || textPosition === "corner"
+                            ? "left"
+                            : textPosition === "right"
+                                ? "right"
+                                : "center",
+                        link: {
+                            // @ts-expect-error
+                            buttons,
+                            colorNeutral,
+                            enabled: buttons.length > 0,
+                            arrangement: textPosition === "below" || textPosition === "center"
+                                ? "center"
+                                : "left",
+                        },
+                        headline: {
+                            align: textPosition === "below" || textPosition === "center"
+                                ? "center"
+                                : "left",
+                            text: headline,
+                            sub: sub,
+                            level: "h3",
+                            style: highlightText ? "h1" : undefined,
+                        },
+                        text: text,
+                    }, media: {
+                        mode: "image",
+                        image: {
+                            srcMobile: image.srcMobile,
+                            srcTablet: image.srcTablet,
+                            srcDesktop: image.srcDesktop,
+                            src: image.src,
+                        },
+                    } }) }) }) }));
 });
 const HeroContext = createContext(HeroContextDefault);
 const Hero = forwardRef((props, ref) => {

package/dist/components/image-story/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.js";
+import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
 declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -29,7 +29,7 @@ interface SettingsProps {
     seo: SeoProps;
     iconSprite?: IconSprite;
 }
-export * from "../../BlogPostProps-7caa223c.js";
-export * from "../../BlogOverviewProps-7caa223c.js";
-export * from "../../PageProps-7caa223c.js";
+export * from "../../BlogPostProps-d9decb7c.js";
+export * from "../../BlogOverviewProps-9f207f1c.js";
+export * from "../../PageProps-aa29c554.js";
 export { IconSprite, SettingsProps };

package/dist/components/nav-dropdown/nav-dropdown.css

@@ -24,6 +24,7 @@
 .dsa-nav-dropdown {
   --g-link--text-decoration: none;
   --g-link--text-decoration_hover: none;
+  z-index: 99;
   font: var(--dsa-nav-dropdown__label--font);
   min-width: var(--dsa-nav-dropdown--min-width);
   padding: var(--dsa-nav-dropdown--padding);

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

@@ -1,4 +1,4 @@
-import { PageProps } from "../../PageProps-7caa223c.js";
+import { PageProps } from "../../PageProps-aa29c554.js";
 import { FC, PropsWithChildren } from "react";
 declare const Page: FC<PropsWithChildren<PageProps>>;
 export type { PageProps };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 20 May 2025 06:20:23 GMT
+ * Generated on Fri, 23 May 2025 06:39:10 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 20 May 2025 06:20:25 GMT
+ * Generated on Fri, 23 May 2025 06:39:12 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 Tue, 20 May 2025 06:20:30 GMT
+ * Generated on Fri, 23 May 2025 06:39:17 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 Tue, 20 May 2025 06:20:28 GMT
+ * Generated on Fri, 23 May 2025 06:39:14 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 Tue, 20 May 2025 06:20:32 GMT
+ * Generated on Fri, 23 May 2025 06:39:19 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 Tue, 20 May 2025 06:20:23 GMT
+ * Generated on Fri, 23 May 2025 06:39:10 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 20 May 2025 06:20:23 GMT
+ * Generated on Fri, 23 May 2025 06:39:10 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

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