@kickstartds/ds-agency-premium 1.6.71--canary.45.1833.0 → 1.6.71--canary.45.1840.0

package/dist/BlogOverviewProps-9f207f1c.d.ts

@@ -4,7 +4,7 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 import { SectionProps } from "./SectionProps-21d04028.js";
-import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
+import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.js";
 import { CtaProps } from "./CtaProps-babe4ee6.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

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

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

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
+import { BlogTeaserProps } from "../../BlogTeaserProps-d62a0a9a.js";
 declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,115 @@
+.dsa-content-nav {
+  --dsa-content-nav--padding: var(--ks-spacing-inset-m);
+  --dsa-content-nav--background-color: var(--ks-background-color-card);
+  --dsa-content-nav__topic--font: var(--dsa-topic--font);
+  --dsa-content-nav__topic--font-weight: var(--dsa-topic--font-weight);
+  --dsa-content-nav__topic--color: var(--dsa-topic--color);
+  --dsa-content-nav__topic--margin-top: var(--ks-spacing-stack-m);
+  --dsa-content-nav__image--aspect-ratio: 16 / 9;
+  --dsa-content-nav__image--border-radius: var(--ks-border-radius-card);
+  --dsa-content-nav__links--gap: var(--ks-spacing-stack-xs);
+  --dsa-content-nav__link--color: var(--ks-text-color-interface-interactive);
+  --dsa-content-nav__link--color_hover: var(--ks-text-color-interface-interactive-hover);
+  --dsa-content-nav__toggle-more--font: var(--ks-font-interface-m);
+  --dsa-content-nav__toggle-more--color: var(--dsa-link--color);
+  --dsa-content-nav__toggle-more--margin-top: var(--ks-spacing-stack-xs);
+}
+
+.dsa-content-nav {
+  max-width: 500px;
+  margin: auto;
+  margin-top: 50px;
+  border-radius: var(--ks-border-radius-card);
+  padding: var(--dsa-content-nav--padding, var(--ks-spacing-inset-m));
+  display: flex;
+  flex-direction: column;
+  background-color: var(--dsa-content-nav--background-color, var(--ks-background-color-card));
+}
+.dsa-content-nav__topic {
+  font: var(--dsa-content-nav__topic--font, var(--dsa-topic--font));
+  color: var(--dsa-content-nav__topic--color, var(--dsa-topic--color));
+  font-weight: var(--dsa-content-nav__topic--font-weight, var(--dsa-topic--font-weight));
+  margin-top: var(--dsa-content-nav__topic--margin-top, var(--ks-spacing-stack-m));
+}
+.dsa-content-nav__image img {
+  aspect-ratio: var(--dsa-content-nav__image--aspect-ratio, 16/9);
+  object-fit: cover;
+  border-radius: var(--dsa-content-nav__image--border-radius, var(--ks-border-radius-card));
+}
+.dsa-content-nav__links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsa-content-nav__links--gap, var(--ks-spacing-stack-xs));
+}
+.dsa-content-nav__links--initial {
+  margin-top: var(--dsa-content-nav__links--margin-top, var(--ks-spacing-stack-s));
+}
+.dsa-content-nav__links--more {
+  margin-top: var(--dsa-content-nav__links--gap, var(--ks-spacing-stack-xs));
+}
+.dsa-content-nav__link {
+  --g-link--color: var(--dsa-content-nav__link--color, var(--ks-text-color-interface-interactive));
+  --g-link--color-hover: var(--dsa-content-nav__link--color_hover, var(--ks-text-color-interface-interactive-hover));
+  font: var(--ks-font-interface-m);
+  width: fit-content;
+}
+.dsa-content-nav__link--active {
+  font-weight: var(--ks-font-weight-bold);
+  color: var(--ks-color-text-active);
+}
+.dsa-content-nav__more-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: var(--ks-transition-collapse);
+}
+.dsa-content-nav__more-content .dsa-content-nav__links {
+  overflow: hidden;
+}
+.dsa-content-nav__more {
+  display: flex;
+  flex-direction: column;
+}
+.dsa-content-nav__more[open] .dsa-content-nav__more-content {
+  grid-template-rows: 1fr;
+}
+.dsa-content-nav__more[open] .dsa-content-nav__toggle-label--more {
+  display: none;
+}
+.dsa-content-nav__more[open] .dsa-content-nav__toggle-label--less {
+  display: block;
+}
+.dsa-content-nav__more[open] .icon {
+  transform: rotate(180deg);
+}
+.dsa-content-nav__toggle-more {
+  width: fit-content;
+  order: 2;
+  color: var(--dsa-content-nav__toggle-more--color, var(--dsa-link--color));
+  cursor: pointer;
+  font: var(--dsa-content-nav__toggle-more--font, var(--ks-font-interface-m));
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ks-spacing-xxs) * 0.25);
+  transition: var(--ks-transition-hover);
+  margin-top: var(--dsa-content-nav__toggle-more--margin-top, var(--ks-spacing-stack-xs));
+}
+.dsa-content-nav__toggle-more:hover {
+  color: var(--dsa-link--color_hover);
+}
+.dsa-content-nav__toggle-more .icon {
+  transition: var(--ks-transition-collapse);
+  transform: translateY(0.05em);
+  font-size: inherit;
+  color: inherit;
+  width: 1.25em;
+  height: 1.25em;
+}
+.dsa-content-nav__toggle-label--more {
+  display: block;
+}
+.dsa-content-nav__toggle-label--less {
+  display: none;
+}
+.dsa-content-nav .c-button {
+  width: fit-content;
+}

package/dist/components/content-nav/content-nav.schema.dereffed.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/content-nav.schema.json",
+  "title": "Content Nav",
+  "type": "object",
+  "properties": {
+    "image": {
+      "type": "object",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL of the image to display in the content nav."
+        },
+        "alt": {
+          "type": "string",
+          "description": "Alternative text for the image."
+        }
+      },
+      "required": [
+        "src"
+      ],
+      "additionalProperties": false
+    },
+    "topic": {
+      "type": "string",
+      "description": "The topic of the content being navigated."
+    },
+    "links": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "The text label for the link."
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "The URL the link points to."
+          }
+        },
+        "required": [
+          "label",
+          "url"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "initiallyShown": {
+      "type": "number",
+      "default": 4,
+      "description": "Determines how many links are initially shown in the content nav. If there are more links, a 'Show More' button will be displayed."
+    },
+    "type": {
+      "const": "content-nav"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/content-nav/content-nav.schema.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/content-nav.schema.json",
+  "title": "Content Nav",
+  "type": "object",
+  "properties": {
+    "image": {
+      "type": "object",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL of the image to display in the content nav."
+        },
+        "alt": {
+          "type": "string",
+          "description": "Alternative text for the image."
+        }
+      },
+      "required": ["src"]
+    },
+    "topic": {
+      "type": "string",
+      "description": "The topic of the content being navigated."
+    },
+    "links": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "The text label for the link."
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "The URL the link points to."
+          }
+        },
+        "required": ["label", "url"],
+        "additionalProperties": false
+      }
+    },
+    "initiallyShown": {
+      "type": "number",
+      "default": 4,
+      "description": "Determines how many links are initially shown in the content nav. If there are more links, a 'Show More' button will be displayed."
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/content-nav/index.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+interface ContentNavProps {
+    image?: {
+        /**
+         * URL of the image to display in the content nav.
+         */
+        src: string;
+        /**
+         * Alternative text for the image.
+         */
+        alt?: string;
+    };
+    /**
+     * The topic of the content being navigated.
+     */
+    topic?: string;
+    links?: {
+        /**
+         * The text label for the link.
+         */
+        label: string;
+        /**
+         * The URL the link points to.
+         */
+        url: string;
+    }[];
+    /**
+     * Determines how many links are initially shown in the content nav. If there are more links, a 'Show More' button will be displayed.
+     */
+    initiallyShown?: number;
+}
+declare const ContentNavContextDefault: import("react").ForwardRefExoticComponent<ContentNavProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ContentNavContext: import("react").Context<import("react").ForwardRefExoticComponent<ContentNavProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const ContentNav: import("react").ForwardRefExoticComponent<ContentNavProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { ContentNavProps };
+export { ContentNavContextDefault, ContentNavContext, ContentNav };

package/dist/components/content-nav/index.js

@@ -0,0 +1,14 @@
+import "./content-nav.css";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { Icon } from '@kickstartds/base/lib/icon';
+
+const ContentNavContextDefault = forwardRef(({ image, links, topic, initiallyShown }, ref) => (jsxs("div", { className: "dsa-content-nav", ref: ref, children: [image && (jsx("div", { className: "dsa-content-nav__image", children: jsx("img", { src: image.src, alt: image.alt }) })), topic && (jsx("div", { className: "dsa-content-nav__topic", children: jsx("span", { children: topic }) })), links && links.length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "dsa-content-nav__links dsa-content-nav__links--initial", children: links.slice(0, initiallyShown).map((link, index) => (jsx("a", { href: link.url, className: "dsa-content-nav__link", children: link.label }, index))) }), links.length > initiallyShown && (jsxs("details", { className: "dsa-content-nav__more", children: [jsxs("summary", { className: "dsa-content-nav__toggle-more", children: [jsx("span", { className: "dsa-content-nav__toggle-label--more", children: "Show more" }), jsx("span", { className: "dsa-content-nav__toggle-label--less", children: "Show less" }), jsx(Icon, { icon: "chevron-down" })] }), jsx("div", { className: "dsa-content-nav__more-content", children: jsx("div", { className: "dsa-content-nav__links dsa-content-nav__links--more", children: links.slice(initiallyShown).map((link, index) => (jsx("a", { href: link.url, className: "dsa-content-nav__link", children: link.label }, index))) }) })] }))] }))] })));
+const ContentNavContext = createContext(ContentNavContextDefault);
+const ContentNav = forwardRef((props, ref) => {
+    const Component = useContext(ContentNavContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+ContentNav.displayName = "ContentNav";
+
+export { ContentNav, ContentNavContext, ContentNavContextDefault };

package/dist/components/features/features.css

@@ -106,7 +106,7 @@
 }
 .dsa-features .dsa-feature__title {
   font: var(--dsa-feature__title--font, var(--ks-font-interface-m));
-  color: var(--dsa-feature__title--color, var(--ks-topic-color));
+  color: var(--dsa-feature__title--color, var(--dsa-topic--color));
   font-family: var(--dsa-feature__title--font-family, var(--ks-font-family-display));
   font-weight: var(--dsa-feature__title--font-weight, var(--ks-font-weight-semi-bold));
 }

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

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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 08 Jul 2025 14:19:26 GMT
+ * Generated on Wed, 09 Jul 2025 06:40:37 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -1349,6 +1349,59 @@
     },
     "screenshot": "img/screenshots/components-contact--full-image-width.png"
   },
+  {
+    "id": "industry-content-nav--default",
+    "group": "Industry / Content Nav",
+    "name": "Default",
+    "code": "<ContentNav\n  image={{\n    alt: 'A group of people collaborating in an office setting',\n    src: 'img/full-shot-different-people-working-together.png'\n  }}\n  initiallyShown={4}\n  links={[\n    {\n      label: 'Market Insights',\n      url: '#'\n    },\n    {\n      label: 'Industry Trends',\n      url: '#'\n    },\n    {\n      label: 'Competitor Analysis',\n      url: '#'\n    },\n    {\n      label: 'Customer Feedback',\n      url: '#'\n    },\n    {\n      label: 'Sales Data',\n      url: '#'\n    },\n    {\n      label: 'Product Development',\n      url: '#'\n    },\n    {\n      label: 'Supply Chain Management',\n      url: '#'\n    },\n    {\n      label: 'Financial Performance',\n      url: '#'\n    },\n    {\n      label: 'Regulatory Compliance',\n      url: '#'\n    }\n  ]}\n  topic=\"Industry Intelligence\"\n/>",
+    "args": {
+      "initiallyShown": 4,
+      "image": {
+        "src": "img/full-shot-different-people-working-together.png",
+        "alt": "A group of people collaborating in an office setting"
+      },
+      "topic": "Industry Intelligence",
+      "links": [
+        {
+          "label": "Market Insights",
+          "url": "#"
+        },
+        {
+          "label": "Industry Trends",
+          "url": "#"
+        },
+        {
+          "label": "Competitor Analysis",
+          "url": "#"
+        },
+        {
+          "label": "Customer Feedback",
+          "url": "#"
+        },
+        {
+          "label": "Sales Data",
+          "url": "#"
+        },
+        {
+          "label": "Product Development",
+          "url": "#"
+        },
+        {
+          "label": "Supply Chain Management",
+          "url": "#"
+        },
+        {
+          "label": "Financial Performance",
+          "url": "#"
+        },
+        {
+          "label": "Regulatory Compliance",
+          "url": "#"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/industry-content-nav--default.png"
+  },
   {
     "id": "components-cta--banner",
     "group": "Components/Cta",

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 08 Jul 2025 14:19:29 GMT
+ * Generated on Wed, 09 Jul 2025 06:40:40 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, 08 Jul 2025 14:19:33 GMT
+ * Generated on Wed, 09 Jul 2025 06:40:44 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, 08 Jul 2025 14:19:31 GMT
+ * Generated on Wed, 09 Jul 2025 06:40:42 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, 08 Jul 2025 14:19:36 GMT
+ * Generated on Wed, 09 Jul 2025 06:40:46 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, 08 Jul 2025 14:19:26 GMT
+ * Generated on Wed, 09 Jul 2025 06:40:37 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 08 Jul 2025 14:19:27 GMT
+ * Generated on Wed, 09 Jul 2025 06:40:38 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

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