@kickstartds/ds-agency-premium 1.6.71--canary.55.2416.0 → 1.6.72--canary.43.2474.0

package/dist/components/faq/index.js

@@ -8,7 +8,7 @@ const defaults = {
     "questions": []
 };
 
-const FaqContextDefault = forwardRef(({ questions, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: `dsa-faq`, children: questions.map((question, index) => (jsx(CollapsibleBox, { summary: question.question, text: question.answer }, index))) })));
+const FaqContextDefault = forwardRef(({ questions, children, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: `dsa-faq`, children: questions.map((question, index) => (jsx(CollapsibleBox, { summary: question.question, text: question.answer, children: question.children }, index))) })));
 const FaqContext = createContext(FaqContextDefault);
 const Faq = forwardRef((props, ref) => {
     const Component = useContext(FaqContext);

package/dist/components/feature/index.js

@@ -4,8 +4,8 @@ import classnames from 'classnames';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { Button } from '../button/index.js';
 import { Link } from '@kickstartds/base/lib/link';
-import { RichText } from '@kickstartds/base/lib/rich-text';
 import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+import Markdown from 'markdown-to-jsx';
 import '@kickstartds/base/lib/button';
 
 const defaults = {
@@ -29,7 +29,7 @@ const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon,
                     ? `intext dsa-feature--small`
                     : style === `centered`
                         ? `centered dsa-feature--large`
-                        : `${style}`}`), children: [jsxs("div", { className: "dsa-feature__header", children: [icon && (jsx(Icon, { className: "dsa-feature__icon", icon: icon, role: "presentation", "aria-hidden": true, focusable: false })), jsx("span", { className: "dsa-feature__title", children: title })] }), text || cta.style === "intext" ? (jsxs("p", { className: "dsa-feature__text", children: [jsx(RichText, { text: text }), cta.style === "intext" && cta.toggle ? (jsxs(Fragment, { children: [" ", " ", jsx(Link, { href: cta.url, children: cta.label ? cta.label : "See more" })] })) : ("")] })) : (""), cta.toggle && (cta.style === "link" || cta.style === "button") && (jsx("div", { className: "dsa-feature__cta", children: cta.style === "link" ? (jsxs(Link, { className: "dsa-feature__link", href: cta.url, children: [cta.label ? cta.label : "See more", jsx(Icon, { "aria-hidden": true, role: "presentation", focusable: false, icon: cta.icon || "arrow-right" })] })) : cta.style === "button" ? (jsx(Button, { className: "dsa-feature__button", size: "small", url: cta.url, label: cta.label ? cta.label : "See more" })) : ("") }))] })));
+                        : `${style}`}`), children: [jsxs("div", { className: "dsa-feature__header", children: [icon && (jsx(Icon, { className: "dsa-feature__icon", icon: icon, role: "presentation", "aria-hidden": true, focusable: false })), jsx("span", { className: "dsa-feature__title", children: title })] }), text || cta.style === "intext" ? (jsxs("p", { className: "dsa-feature__text", children: [jsx(Markdown, { children: text }), cta.style === "intext" && cta.toggle ? (jsxs(Fragment, { children: [" ", " ", jsx(Link, { href: cta.url, children: cta.label ? cta.label : "See more" })] })) : ("")] })) : (""), cta.toggle && (cta.style === "link" || cta.style === "button") && (jsx("div", { className: "dsa-feature__cta", children: cta.style === "link" ? (jsxs(Link, { className: "dsa-feature__link", href: cta.url, children: [cta.label ? cta.label : "See more", jsx(Icon, { "aria-hidden": true, role: "presentation", focusable: false, icon: cta.icon || "arrow-right" })] })) : cta.style === "button" ? (jsx(Button, { className: "dsa-feature__button", size: "small", url: cta.url, label: cta.label ? cta.label : "See more" })) : ("") }))] })));
 const FeatureContext = createContext(FeatureContextDefault);
 const Feature = forwardRef((props, ref) => {
     const Component = useContext(FeatureContext);

package/dist/components/features/index.js

@@ -8,7 +8,7 @@ import '@kickstartds/base/lib/icon';
 import '../button/index.js';
 import '@kickstartds/base/lib/button';
 import '@kickstartds/base/lib/link';
-import '@kickstartds/base/lib/rich-text';
+import 'markdown-to-jsx';
 
 const defaults = {
     "layout": "largeTiles",

package/dist/components/headline/headline.css

@@ -8,18 +8,17 @@
   --dsa-headline--space-after_minimum: var(--ks-spacing-stack-s);
   --dsa-headline--higlight-background: var(--dsa-typo--highlight);
   --dsa-headline__subheadline--color: var(--ks-color-fg-alpha-4);
-  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-semi-bold);
-  --dsa-headline__subheadline--text-transform: none;
-  --dsa-headline__subheadline--letter-spacing: initial;
+  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-bold);
+  --dsa-headline__subheadline--text-transform: uppercase;
+  --dsa-headline__subheadline--letter-spacing: 0.045em;
   --dsa-headline__subheadline--font-family: var(--ks-font-family-display);
-  --dsa-headline_h1--color: var(--ks-text-color-primary);
   --dsa-headline_h1--font: var(--ks-font-display-xxl);
-  --dsa-headline_h1__subheadline--font-size: 55%;
+  --dsa-headline_h1__subheadline--font-size: 50%;
   --dsa-headline_h1--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline_h1--space-after_small: var(--ks-spacing-stack-m);
   --dsa-headline_h1--space-after_minimum: var(--ks-spacing-stack-s);
   --dsa-headline_h2--font: var(--ks-font-display-xl);
-  --dsa-headline_h2__subheadline--font-size: 55%;
+  --dsa-headline_h2__subheadline--font-size: 50%;
   --dsa-headline_h2--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline_h2--space-after_small: var(--ks-spacing-stack-m);
   --dsa-headline_h2--space-after_minimum: 0;
@@ -65,9 +64,6 @@
   --headline--space-after_large: var(--dsa-headline_h1--space-after_large);
   font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
 }
-.dsa-headline--h1 .dsa-headline__headline .dsa-headline__inner {
-  color: var(--dsa-headline_h1--color, var(--ks-text-color-primary));
-}
 .dsa-headline--h2 {
   --subheadline--font-size: var(--dsa-headline_h2__subheadline--font-size, 50%);
   --headline--space-after_minimum: var(--dsa-headline_h2--space-after_minimum);

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

@@ -1,59 +1,7 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
 import { defaultRenderFn } from "@kickstartds/core/lib/core";
-/* 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.
- */
-/**
- * Text content of headline
- */
-type Text = string;
-/**
- * Subheadline content
- */
-type Sub = string;
-/**
- * Switch order of headline and subheadline
- */
-type SwitchOrder = boolean;
-type SectionAlignment = "left" | "center" | "right";
-/**
- * Level of headline to use
- */
-type Level = "h1" | "h2" | "h3" | "h4" | "p";
-/**
- * Style of headline to show
- */
-type Style = "h1" | "h2" | "h3" | "h4" | "p";
-/**
- * Whether to display space after headline
- */
-type SpaceAfter = "minimum" | "small" | "large";
-/**
- * Set a custom class name
- */
-type ClassName = string;
-/**
- * Set a custom id attribute
- */
-type ID = string;
-/**
- * Component used for headlines
- */
-interface HeadlineProps {
-    text: Text;
-    sub?: Sub;
-    switchOrder?: SwitchOrder;
-    align?: SectionAlignment;
-    level: Level;
-    style?: Style;
-    spaceAfter?: SpaceAfter;
-    className?: ClassName;
-    id?: ID;
-}
+import { HeadlineProps } from "../../HeadlineProps-e1305784.js";
 interface RenderFunctions {
     renderContent?: typeof defaultRenderFn;
     renderSubheadline?: typeof defaultRenderFn;

package/dist/components/hero/hero.css

@@ -8,6 +8,36 @@
 [ks-inverted=false] .dsa-hero {
   --dsa-hero--min-height: 18rem;
   --dsa-hero--min-height_small: 12rem;
+}
+@container hero (min-width: 640px) {
+  :root .dsa-hero,
+  [ks-inverted=true] .dsa-hero,
+  [ks-inverted=false] .dsa-hero {
+    --dsa-hero--min-height: 24rem;
+    --dsa-hero--min-height_small: 14rem;
+    --dsa-hero__textbox--max-width: 50vw;
+  }
+}
+@container hero (min-width: 960px) {
+  :root .dsa-hero,
+  [ks-inverted=true] .dsa-hero,
+  [ks-inverted=false] .dsa-hero {
+    --dsa-hero--min-height: 32rem;
+    --dsa-hero--min-height_small: 16rem;
+  }
+}
+@container hero (min-width: 1024px) {
+  :root .dsa-hero,
+  [ks-inverted=true] .dsa-hero,
+  [ks-inverted=false] .dsa-hero {
+    --dsa-hero--min-height: 36rem;
+    --dsa-hero--min-height_small: 20rem;
+    --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
+  }
+}
+:root .dsa-hero,
+[ks-inverted=true] .dsa-hero,
+[ks-inverted=false] .dsa-hero {
   --dsa-hero__headline--color: var(--dsa-headline--color);
   --dsa-hero__subheadline--color: var(--dsa-headline__subheadline--color);
   --dsa-hero_color-neutral__headline--color: var(--ks-text-color-default);
@@ -21,7 +51,7 @@
   --dsa-hero__textbox--box-shadow: none;
   --dsa-hero__textbox--border-radius: var(--ks-border-radius-card);
   --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
-  --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
+  --dsa-hero__textbox--padding: var(--ks-spacing-inset-l);
   --dsa-hero_below__textbox--padding: var(--dsa-content--vertical-spacing);
   --dsa-hero_offset__textbox--padding: var(--dsa-content--vertical-spacing);
   --dsa-hero__skip-button--shadow: var(--dsa-overlay-text--shadow);
@@ -32,12 +62,17 @@
     var(--ks-color-primary-alpha-5) 0%,
     var(--ks-color-bg-alpha-4) 100%
   );
-  --dsa-hero--left__overlay--background: linear-gradient(
+  --dsa-hero_corner__overlay--background: linear-gradient(
+    40deg,
+    var(--ks-background-color-default) 15%,
+    transparent 50%
+  );
+  --dsa-hero_left__overlay--background: linear-gradient(
     90deg,
     var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width),
     transparent
   );
-  --dsa-hero--right__overlay--background: linear-gradient(
+  --dsa-hero_right__overlay--background: linear-gradient(
     270deg,
     var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width),
     transparent
@@ -51,32 +86,6 @@
   );
   --dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
 }
-@container hero (min-width: 640px) {
-  :root .dsa-hero,
-  [ks-inverted=true] .dsa-hero,
-  [ks-inverted=false] .dsa-hero {
-    --dsa-hero--min-height: 24rem;
-    --dsa-hero--min-height_small: 14rem;
-    --dsa-hero__textbox--max-width: 50vw;
-  }
-}
-@container hero (min-width: 960px) {
-  :root .dsa-hero,
-  [ks-inverted=true] .dsa-hero,
-  [ks-inverted=false] .dsa-hero {
-    --dsa-hero--min-height: 32rem;
-    --dsa-hero--min-height_small: 16rem;
-  }
-}
-@container hero (min-width: 1024px) {
-  :root .dsa-hero,
-  [ks-inverted=true] .dsa-hero,
-  [ks-inverted=false] .dsa-hero {
-    --dsa-hero--min-height: 36rem;
-    --dsa-hero--min-height_small: 20rem;
-    --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
-  }
-}
 
 .l-container--hero {
   /* stylelint-disable-next-line property-no-unknown */
@@ -87,7 +96,6 @@
   --c-visual_overlay--background-size: 100%;
   --c-visual--min-height: var(--dsa-hero--min-height);
   --c-visual_overlay--background: transparent;
-  min-height: var(--dsa-hero--min-height);
 }
 .c-visual.dsa-hero .c-visual__box {
   --c-visual_box--background: var(
@@ -107,6 +115,9 @@
   --dsa-hero__headline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
   --dsa-hero__subheadline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
 }
+.c-visual.dsa-hero {
+  min-height: var(--dsa-hero--min-height);
+}
 .c-visual.dsa-hero.c-visual--small {
   --dsa-hero--min-height: var(--dsa-hero--min-height_small);
 }
@@ -117,6 +128,12 @@
       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-corner {
+    --c-visual_overlay--background: var(
+      --dsa-hero_corner__overlay--background,
+      linear-gradient(40deg, var(--ks-background-color-default) 15%, transparent 50%)
+    );
+  }
   .c-visual.dsa-hero.dsa-hero--content-offset {
     --c-visual_overlay--background: var(
       --dsa-hero--offset__overlay--background,
@@ -125,13 +142,13 @@
   }
   .c-visual.dsa-hero.dsa-hero--content-left {
     --c-visual_overlay--background: var(
-      --dsa-hero--left__overlay--background,
+      --dsa-hero_left__overlay--background,
       linear-gradient(90deg, var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width), transparent)
     );
   }
   .c-visual.dsa-hero.dsa-hero--content-right {
     --c-visual_overlay--background: var(
-      --dsa-hero--right__overlay--background,
+      --dsa-hero_right__overlay--background,
       linear-gradient(270deg, var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width), transparent)
     );
   }
@@ -223,4 +240,8 @@
       height: 100%;
     }
   }
+}
+
+.dsa-header:not(.dsa-header--floating) + .dsa-section .dsa-hero.c-visual--full {
+  height: calc(100vh - var(--dsa-header--height));
 }

package/dist/components/image-story/image-story.css

@@ -14,6 +14,10 @@
   );
   --c-storytelling--vertical-padding: var(--dsa-image-story--vertical-padding, var(--ks-spacing-xl));
 }
+.c-storytelling.dsa-image-story .c-storytelling__box.c-storytelling__box--top .c-storytelling__box__content {
+  top: var(--ks-spacing-m);
+  position: sticky;
+}
 .c-storytelling.dsa-image-story .c-storytelling__box__content {
   max-width: var(--dsa-content--width_narrow);
 }

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

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

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { LogosProps } from "../../LogosProps-f9474fe2.js";
+import { LogosProps } from "../../LogosProps-d4677d2c.js";
 declare const LogosContextDefault: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const LogosContext: import("react").Context<import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Logos: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/logos/logos.css

@@ -14,15 +14,15 @@
   --dsa-logos__grid_tablet--cols: 3;
 }
 
+.dsa-logos .c-logo-tiles {
+  --c-logo-tiles--cols: var(--dsa-logo-tiles--cols);
+  --c-logo-tiles--gutter: var(--dsa-logos__grid--gap-horizontal);
+}
 .dsa-logos {
   display: flex;
   flex-direction: column;
   gap: var(--dsa-logos-gap, var(--ks-spacing-stack-m));
 }
-.dsa-logos .c-logo-tiles {
-  --c-logo-tiles--cols: var(--dsa-logo-tiles--cols);
-  --c-logo-tiles--gutter: var(--dsa-logos__grid--gap-horizontal);
-}
 .dsa-logos__tagline {
   font: var(--dsa-logos__tagline--font, var(--ks-font-display-m));
   font-weight: var(--dsa-logos__tagline--font-weight, var(--dsa-headline--font-weight));
@@ -58,8 +58,6 @@
 }
 .dsa-logos .dsa-logo-tiles {
   --dsa-logo-tiles--cols: var(--dsa-logos__grid_mobile--cols, 2);
-  gap: var(--dsa-logos__grid--gap-vertical) var(--dsa-logos__grid--gap-horizontal);
-  margin: 0;
 }
 @container logo-tiles (min-width: 420px) {
   .dsa-logos .dsa-logo-tiles {
@@ -92,6 +90,10 @@
     --dsa-logo-tiles--cols: 8;
   }
 }
+.dsa-logos .dsa-logo-tiles {
+  gap: var(--dsa-logos__grid--gap-vertical) var(--dsa-logos__grid--gap-horizontal);
+  margin: 0;
+}
 .dsa-logos .dsa-logo-tiles .c-logo-tiles__col {
   margin: 0;
   aspect-ratio: 16/9;

package/dist/components/logos/logos.schema.dereffed.json

@@ -50,8 +50,7 @@
           "src"
         ]
       },
-      "minItems": 1,
-      "maxItems": 20
+      "minItems": 1
     },
     "align": {
       "type": "string",

package/dist/components/logos/logos.schema.json

@@ -44,8 +44,7 @@
         "additionalProperties": false,
         "required": ["src"]
       },
-      "minItems": 1,
-      "maxItems": 20
+      "minItems": 1
     },
     "align": {
       "type": "string",

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

@@ -1,6 +1,11 @@
 .dsa-nav-dropdown {
   --dsa-nav-dropdown--padding: var(--ks-spacing-xxs) var(--ks-spacing-xxs) var(--ks-spacing-m) var(--ks-spacing-xxs);
   --dsa-nav-dropdown--background: var(--ks-background-color-default);
+}
+.dsa-nav-dropdown[ks-inverted=true] {
+  --dsa-nav-dropdown--background: var(--ks-color-fg-inverted);
+}
+.dsa-nav-dropdown {
   --dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
   --dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
   --dsa-nav-dropdown--border: 1px solid var(--ks-border-color-card);
@@ -18,9 +23,6 @@
   --dsa-nav-dropdown__label--padding: 0.45em 0.75em;
   --dsa-nav-dropdown__label_dimmed--opacity: 1;
 }
-.dsa-nav-dropdown[ks-inverted=true] {
-  --dsa-nav-dropdown--background: var(--ks-color-fg-inverted);
-}
 
 .dsa-nav-dropdown {
   --g-link--text-decoration: none;