@kickstartds/ds-agency-premium 1.3.14--canary.456.8b32ca2.0 → 1.4.0--canary.12.465.0

package/dist/{SectionProps-83d399b4.d.ts → SectionProps-93230a76.d.ts}

@@ -8,7 +8,7 @@ import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-b05859d6.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-cf82a16d.js";
-import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
+import { ImageStoryProps } from "./ImageStoryProps-24e0335c.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-58c84ccc.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogOverviewProps } from "../../BlogOverviewProps-525f7f9f.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-f385fc47.js";
 declare const BlogOverview: {
     ({ latest, more }: BlogOverviewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -4,6 +4,7 @@ import { Section } from '../section/index.js';
 import { BlogTeaser } from '../blog-teaser/index.js';
 import 'classnames';
 import '@kickstartds/core/lib/react';
+import '../headline-level-context/index.js';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';

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

@@ -9,6 +9,7 @@ import 'classnames';
 import 'react';
 import '@kickstartds/blog/lib/post-head';
 import '@kickstartds/core/lib/react';
+import '../headline-level-context/index.js';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';

package/dist/components/headline/index.js

@@ -4,11 +4,17 @@ import classnames from 'classnames';
 import { forwardRef } from 'react';
 import { compiler } from 'markdown-to-jsx';
 import { HeadlineContext } from '@kickstartds/base/lib/headline';
+import { useHeadlineLevel } from '../headline-level-context/index.js';
 
 const Headline = forwardRef(({ content, text = content, sub, align = "left", switchOrder = false, level = "h2", 
 // @ts-expect-error: Some kDS Components set the `styleAs`Props (e.g. https://github.com/kickstartDS/content/blob/next/source/storytelling/StorytellingComponent.tsx#L146)
 styleAs, style = styleAs || "h2", spaceAfter = "small", className, renderContent = compiler, renderSubheadline = compiler, ...props }, ref) => {
-    const TagName = level;
+    const computedLevel = useHeadlineLevel();
+    const TagName = level === "p"
+        ? level
+        : computedLevel
+            ? ("h" + computedLevel)
+            : level;
     return text || sub ? (jsxs("header", { className: classnames("dsa-headline", `dsa-headline--${style}`, style !== "none" && style !== level && `dsa-headline--${style}`, `dsa-headline--align-${align}`, spaceAfter && `dsa-headline--space-after-${spaceAfter}`, className), ref: ref, ...props, children: [sub && switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) })), jsx(TagName, { className: classnames("dsa-headline__headline"), children: renderContent(text) }), sub && !switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) }))] })) : null;
 });
 Headline.displayName = "Headline";

package/dist/components/headline-level-context/index.d.ts

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from "react";
+declare const HeadlineLevelProvider: FC<PropsWithChildren>;
+declare const useHeadlineLevel: () => number;
+export { HeadlineLevelProvider, useHeadlineLevel };

package/dist/components/headline-level-context/index.js

@@ -0,0 +1,33 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useRef, useCallback } from 'react';
+
+const HeadlineLevelContext = createContext([1]);
+const HeadlineLevelProvider = ({ children }) => {
+    const [parentInitialLevel, parentIsFirstHeadlineRef] = useContext(HeadlineLevelContext);
+    /* @refresh reset */
+    const isFirstHeadlineRef = useRef(true);
+    const initialLevel = !parentIsFirstHeadlineRef || parentIsFirstHeadlineRef.current
+        ? parentInitialLevel
+        : parentInitialLevel + 1;
+    // prevent first section without headlines to increase the headline leven
+    // this component has to run _after_ the children to check if any headline was rendered
+    const UpdateParent = useCallback(() => {
+        if (parentIsFirstHeadlineRef?.current) {
+            parentIsFirstHeadlineRef.current = isFirstHeadlineRef.current;
+        }
+        return null;
+    }, []);
+    return (jsxs(Fragment, { children: [jsx(HeadlineLevelContext.Provider, { value: [initialLevel, isFirstHeadlineRef], children: children }), jsx(UpdateParent, {})] }));
+};
+const useHeadlineLevel = () => {
+    const [initialLevel, isFirstHeadlineRef] = useContext(HeadlineLevelContext);
+    if (isFirstHeadlineRef?.current) {
+        isFirstHeadlineRef.current = false;
+        return initialLevel;
+    }
+    else {
+        return initialLevel + 1;
+    }
+};
+
+export { HeadlineLevelProvider, useHeadlineLevel };

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-24e0335c.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

@@ -4,7 +4,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "../../SectionProps-83d399b4.js";
+import { SectionProps } from "../../SectionProps-93230a76.js";
 import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
 /* eslint-disable */
 /**
@@ -73,5 +73,5 @@ interface SettingsProps {
     seo: SeoProps;
 }
 export * from "../../BlogPostProps-e1cbd5d3.js";
-export * from "../../BlogOverviewProps-525f7f9f.js";
+export * from "../../BlogOverviewProps-f385fc47.js";
 export { Sections, Floating, Inverted, Inverted1, PageProps, Header, Footer, SettingsProps };

package/dist/components/page-wrapper/index.js

@@ -1,10 +1,11 @@
 import "./tokens.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { HeadlineLevelProvider } from '../headline-level-context/index.js';
 import Providers from '../providers/index.js';
 import '@kickstartds/base/lib/global/base';
 import '../../global-35f78d6d.js';
-import '../button/index.js';
 import 'react';
+import '../button/index.js';
 import 'classnames';
 import '@kickstartds/base/lib/button';
 import '../section/index.js';
@@ -488,6 +489,6 @@ var IconSprite = (() => /*#__PURE__*/ jsxs("svg", {
         })]
 }));
 
-const PageWrapper = ({ children }) => (jsxs(Providers, { children: [jsx(IconSprite, {}), children] }));
+const PageWrapper = ({ children }) => (jsx(HeadlineLevelProvider, { children: jsxs(Providers, { children: [jsx(IconSprite, {}), children] }) }));
 
 export { PageWrapper };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jun 2024 08:34:53 GMT
+ * Generated on Fri, 28 Jun 2024 15:20:06 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/components/providers/index.js

@@ -9,6 +9,7 @@ import 'react';
 import 'classnames';
 import '@kickstartds/base/lib/button';
 import '@kickstartds/core/lib/react';
+import '../headline-level-context/index.js';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-83d399b4.js";
+import { SectionProps } from "../../SectionProps-93230a76.js";
 declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionProvider: FC<PropsWithChildren<any>>;
 export { Section, SectionProvider };

package/dist/components/section/index.js

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import classnames from 'classnames';
 import { useKsComponent } from '@kickstartds/core/lib/react';
+import { HeadlineLevelProvider } from '../headline-level-context/index.js';
 import { SectionContextDefault, SectionContext } from '@kickstartds/base/lib/section';
 import { identifier } from './js/Section.client.js';
 import '@kickstartds/core/lib/component';
@@ -16,31 +17,31 @@ const Section = forwardRef(({ headline, content, headerSpacing, width = "default
         spotlight,
         content?.mode === "slider",
     ]);
-    return (jsx(SectionContextDefault, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
-            `dsa-section-style--${style === "verticalGradient"
-                ? "vertical-gradient"
-                : style === "horizontalGradient"
-                    ? "horizontal-gradient"
-                    : style === "accentTransition"
-                        ? "accent-transition"
-                        : style === "boldTransition"
-                            ? "bold-transition"
-                            : style === "symmetricGlow"
-                                ? "symmetric-glow"
-                                : style === "anchorGlow"
-                                    ? "anchor-glow"
-                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, content: content, headline: {
-            ...headlineRest,
-            spaceAfter: "large",
-            // @ts-expect-error
-            content: headlineRest.text,
-            level: "h2",
-            style: headlineLarge ? "h1" : "h2",
-        }, buttons: {
-            buttons,
-            // @ts-expect-error
-            items: buttons,
-        }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: inverted, ref: ref, children: props.children }));
+    return (jsx(HeadlineLevelProvider, { children: jsx(SectionContextDefault, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
+                `dsa-section-style--${style === "verticalGradient"
+                    ? "vertical-gradient"
+                    : style === "horizontalGradient"
+                        ? "horizontal-gradient"
+                        : style === "accentTransition"
+                            ? "accent-transition"
+                            : style === "boldTransition"
+                                ? "bold-transition"
+                                : style === "symmetricGlow"
+                                    ? "symmetric-glow"
+                                    : style === "anchorGlow"
+                                        ? "anchor-glow"
+                                        : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, content: content, headline: {
+                ...headlineRest,
+                spaceAfter: "large",
+                // @ts-expect-error
+                content: headlineRest.text,
+                level: "h2",
+                style: headlineLarge ? "h1" : "h2",
+            }, buttons: {
+                buttons,
+                // @ts-expect-error
+                items: buttons,
+            }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: inverted, ref: ref, children: props.children }) }));
 });
 Section.displayName = "Section";
 const SectionProvider = (props) => (jsx(SectionContext.Provider, { ...props, value: Section }));

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jun 2024 08:34:55 GMT
+ * Generated on Fri, 28 Jun 2024 15:20:09 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, 04 Jun 2024 08:34:59 GMT
+ * Generated on Fri, 28 Jun 2024 15:20:13 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, 04 Jun 2024 08:34:57 GMT
+ * Generated on Fri, 28 Jun 2024 15:20:11 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, 04 Jun 2024 08:35:01 GMT
+ * Generated on Fri, 28 Jun 2024 15:20:16 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, 04 Jun 2024 08:34:53 GMT
+ * Generated on Fri, 28 Jun 2024 15:20:06 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jun 2024 08:34:53 GMT
+ * Generated on Fri, 28 Jun 2024 15:20:07 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.3.14--canary.456.8b32ca2.0",
+  "version": "1.4.0--canary.12.465.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {