@kickstartds/ds-agency-premium 1.7.0--canary.18.1660.0 → 1.7.0--canary.46.1797.0

package/dist/components/providers/index.js

@@ -13,14 +13,15 @@ import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';
+import '../../helpers-84d80d46.js';
 import '@kickstartds/base/lib/teaser-box';
 import '@kickstartds/core/lib/container';
+import 'markdown-to-jsx';
 import '@kickstartds/base/lib/picture';
 import '@kickstartds/base/lib/contact';
 import '@kickstartds/base/lib/link';
 import '@kickstartds/base/lib/icon';
 import '@kickstartds/base/lib/rich-text';
-import 'markdown-to-jsx';
 import '@kickstartds/base/lib/headline';
 import '@kickstartds/base/lib/button-group';
 

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

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

package/dist/components/section/index.js

@@ -5,9 +5,33 @@ import classnames from 'classnames';
 import { useKsComponent } from '@kickstartds/core/lib/react';
 import { SectionContextDefault as SectionContextDefault$1, SectionContext as SectionContext$1 } from '@kickstartds/base/lib/section';
 import { identifier } from './js/Section.client.js';
+import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
 import '@kickstartds/core/lib/component';
 
-const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
+const defaults = {
+    "width": "default",
+    "backgroundColor": "default",
+    "spotlight": false,
+    "spaceBefore": "default",
+    "spaceAfter": "default",
+    "inverted": false,
+    "headerSpacing": false,
+    "headline": {
+        "large": false,
+        "width": "unset"
+    },
+    "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "list",
+        "tileWidth": "default"
+    },
+    "components": [],
+    "buttons": []
+};
+
+const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", backgroundImage, spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
     const { large: headlineLarge = false, ...headlineRest } = {
         align: "left",
         ...headline,
@@ -30,7 +54,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
                                 ? "symmetric-glow"
                                 : style === "anchorGlow"
                                     ? "anchor-glow"
-                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, content: content, headline: {
+                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, backgroundImage: backgroundImage, content: content, headline: {
             ...headlineRest,
             spaceAfter: "large",
             // @ts-expect-error
@@ -46,7 +70,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
 const SectionContext = createContext(SectionContextDefault);
 const Section = forwardRef((props, ref) => {
     const Component = useContext(SectionContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Section.displayName = "Section";
 const SectionProvider = (props) => (jsx(SectionContext$1.Provider, { ...props, value: Section }));

package/dist/components/section/js/Section.client.js

@@ -4,7 +4,7 @@ const identifier = "dsa.section";
 class Section extends Component {
     constructor(element) {
         super(element);
-        if (element.classList.contains("l-section--spotlight")) {
+        if (element.classList.contains("dsa-section--spotlight")) {
             import('./spotlight.client.js').then((mod) => {
                 const cleanup = mod.initSpotlight(element);
                 this.onDisconnect(cleanup);

package/dist/components/section/section.css

@@ -1,21 +1,25 @@
+.l-container--section {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: section;
+}
+
 .dsa-section {
-  --dsa-section__col--min-width: var(--dsa-section_tile-width--default);
-  --dsa-section__col--max-width: 1fr;
   --dsa-section__col--repeat: auto-fit;
+  --dsa-section__col--max-width: 1fr;
+  --dsa-section__col--min-width_smallest: var(--dsa-tile--width_smallest);
+  --dsa-section__col--min-width_small: var(--dsa-tile--width_small);
+  --dsa-section__col--min-width_medium: var(--dsa-tile--width_medium);
+  --dsa-section__col--min-width_large: var(--dsa-tile--width_large);
+  --dsa-section__col--min-width_largest: var(--dsa-tile--width_largest);
   --dsa-section--space_default: var(--ks-spacing-xxl);
   --dsa-section--space_small: calc(var(--ks-spacing-xxl) / 2);
-  --dsa-section__tile--width_smallest: 14rem;
-  --dsa-section__tile--width_default: 18rem;
-  --dsa-section__tile--width_medium: var(--l-section--content-width-narrow);
-  --dsa-section__tile--width_large: var(--l-section--content-width-default);
-  --dsa-section__tile--width_largest: var(--l-section--content-width-wide);
-  --dsa-section--gutter_small: var(--ks-spacing-xs);
+  --dsa-section--gutter_small: var(--ks-spacing-s);
   --dsa-section--gutter_default: var(--ks-spacing-m);
-  --dsa-section--gutter_large: var(--ks-spacing-xl);
+  --dsa-section--gutter_large: var(--ks-spacing-l);
   --dsa-section__buttons--space-before: var(--ks-spacing-stack-m);
-  --dsa-section__content--width_narrow: 46.5rem;
-  --dsa-section__content--width_default: 62rem;
-  --dsa-section__content--width_wide: 75rem;
+  --dsa-section__content--width_narrow: var(--dsa-content--width_narrow);
+  --dsa-section__content--width_default: var(--dsa-content--width_default);
+  --dsa-section__content--width_wide: var(--dsa-content--width_wide);
   --dsa-section__content--width_max: 100vw;
   --dsa-section__content--width_full: 100vw;
   --dsa-section__content--padding: var(--dsa-content--spacing);
@@ -23,7 +27,6 @@
   --dsa-section--background-color_accent: var(--ks-background-color-accent);
   --dsa-section--background-color_bold: var(--ks-background-color-bold);
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
-  --dsa-section__slider-arrow--background-color: transparent;
   --dsa-section__slider-arrow--size: 2rem;
   --dsa-section__slider-arrow--padding: 0.5em;
   --dsa-section__slider-arrow--opacity: 0.6;
@@ -73,26 +76,21 @@
 }
 
 .l-section.dsa-section {
-  --l-section--gutter: var(--dsa-section--gutter_default);
-  --l-section_col--min-width: var(--dsa-section__col--min-width, var(--l-section_tile-width--default));
-  --l-section_col--max-width: var(--dsa-section__col--min-width, 1fr);
-  --l-section_col--repeat: var(--dsa-section__col--repeat, auto-fit);
-  --l-section_tile-width--smallest: var(--dsa-section__tile--width_smallest, 14rem);
-  --l-section_tile-width--default: var(--dsa-section__tile--width_default, 18rem);
-  --l-section_tile-width--medium: var(--dsa-section__tile--width_medium, var(--l-section--content-width-narrow));
-  --l-section_tile-width--large: var(--dsa-section__tile--width_large, var(--l-section--content-width-default));
-  --l-section_tile-width--largest: var(--dsa-section__tile--width_largest, var(--l-section--content-width-wide));
-  --l-section--content-width-narrow: var(--dsa-section__content--width_narrow, 46.5rem);
-  --l-section--content-width-default: var(--dsa-section__content--width_default, 62rem);
-  --l-section--content-width-wide: var(--dsa-section__content--width_wide, 75rem);
-  --l-section--content-width-max: var(--dsa-section__content--width_max, 120rem);
-  --l-section--content-width-full: var(--dsa-section__content--width_full, 120rem);
-  --l-section--content-padding: var(--dsa-section__content--padding, var(--ks-spacing-m));
+  --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
   --l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
   --l-section--background-accent: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
   --l-section--background-bold: var(--dsa-section--background-color_bold, var(--ks-background-color-primary));
-  --l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
-  --l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
+  --l-section_col--min-width: var(--dsa-section__col--min-width, var(--l-section_tile-width--default));
+  --l-section_col--max-width: var(--dsa-section__col--max-width, 1fr);
+  --l-section_col--repeat: var(--dsa-section__col--repeat, auto-fit);
+  --l-section--content-width-narrow: var(--dsa-section__content--width_narrow, var(--dsa-content--width_narrow));
+  --l-section--content-width-default: var(--dsa-section__content--width_default, var(--dsa-content--width_default));
+  --l-section--content-width-wide: var(--dsa-section__content--width_wide, var(--dsa-content--width_wide));
+  --l-section--content-width-max: var(--dsa-section__content--width_max, var(--dsa-content--width_max));
+  --l-section--content-width-full: var(--dsa-section__content--width_full, var(--dsa-content--width_full));
+  --l-section--content-padding: var(--dsa-section__content--padding, var(--ks-spacing-m));
+  --l-section--gutter: var(--dsa-section--gutter_default);
+  --dsa-section--gutter_none: 0;
   --l-section--gutter-small: var(--dsa-section--gutter_small, var(--ks-spacing-xs));
   --l-section--gutter-default: var(--dsa-section--gutter_default, var(--ks-spacing-m));
   --l-section--gutter-large: var(--dsa-section--gutter_large, var(--ks-spacing-xl));
@@ -100,12 +98,20 @@
   --l-section_slider-arrow--padding: var(--dsa-section__slider-arrow--padding, var(--ks-spacing-xs));
   --l-section_slider-arrow--color: var(--dsa-section__slider-arrow--color, var(--ks-text-color-interface-interactive));
   --l-section_slider-arrow--opacity: var(--dsa-section__slider-arrow--opacity, 0.6);
-  --l-section_slider-arrow--opacity_hover: var(--dsa-section__slider-arrow--opcaity_hover, 0.9);
+  --l-section_slider-arrow--opacity_hover: var(--dsa-section__slider-arrow--opacity_hover, 0.9);
   --l-section_slider-arrow--opacity_disabled: var(--dsa-section__slider-arrow--opacity_disabled, 0.3);
   --l-section_slider-arrow--background: var(--dsa-section__slider-arrow--background, transparent);
+  --l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
+  --l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
+}
+
+.l-section.dsa-section {
   background-image: var(--dsa-section--background-image);
-  position: relative;
   background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
+  position: relative;
+}
+.l-section.dsa-section .l-section__container {
+  font: var(--ks-font-copy-m);
 }
 .l-section.dsa-section.l-section--gutter-large {
   --l-section--gutter: var(--dsa-section--gutter_large);
@@ -155,10 +161,14 @@
 .l-section.dsa-section--spotlight {
   position: relative;
 }
-.l-section.dsa-section--spotlight:hover::before {
+.l-section.dsa-section--spotlight .l-section__container {
+  position: relative;
+  z-index: 1;
+}
+.l-section.dsa-section--spotlight:hover::after {
   opacity: 1;
 }
-.l-section.dsa-section--spotlight::before {
+.l-section.dsa-section--spotlight::after {
   transition: opacity var(--ks-transition-fade);
   opacity: 0;
   top: 0;
@@ -167,9 +177,14 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  background-image: radial-gradient(var(--dsa-section__spotlight--size) circle, var(--dsa-section__spotlight--color) 0%, var(--dsa-section__spotlight--color) calc(100% - var(--dsa-section__spotlight--blur)), transparent 100%, transparent 100%);
+  background-image: radial-gradient(var(--dsa-section__spotlight--size) circle at var(--dsa-section__spotlight--left) var(--dsa-section__spotlight--top), var(--dsa-section__spotlight--color) 0%, var(--dsa-section__spotlight--color) calc(100% - var(--dsa-section__spotlight--blur)), transparent 100%, transparent 100%);
 }
 .l-section.dsa-section .l-section__content {
+  --l-section_tile-width--smallest: var(--dsa-section__col--min-width_smallest, var(--dsa-tile--width_smallest));
+  --l-section_tile-width--default: var(--dsa-section__col--min-width_small, var(--dsa-tile--width_small));
+  --l-section_tile-width--medium: var(--dsa-section__col--min-width_medium, var(--dsa-tile--width_medium));
+  --l-section_tile-width--large: var(--dsa-section__col--min-width_large, var(--dsa-tile--width_large));
+  --l-section_tile-width--largest: var(--dsa-section__col--min-width_largest, var(--dsa-tile--width_largest));
   --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
 }
 .l-section.dsa-section .l-section__content--slider {