@kickstartds/ds-agency-premium 1.6.70 → 1.6.71--canary.45.1758.0

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-1cfcf6e8.js";
+import { SectionProps } from "../../SectionProps-7caa223c.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>>;

package/dist/components/section/index.js

@@ -7,7 +7,7 @@ import { SectionContextDefault as SectionContextDefault$1, SectionContext as Sec
 import { identifier } from './js/Section.client.js';
 import '@kickstartds/core/lib/component';
 
-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 SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", transition, backgroundImage, spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
     const { large: headlineLarge = false, ...headlineRest } = {
         align: "left",
         ...headline,
@@ -30,7 +30,15 @@ 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, backgroundImage: backgroundImage, content: content, headline: {
+                                    : style}`, transition &&
+            transition !== "none" &&
+            `dsa-section--transition-${transition}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor === "default"
+            ? "default"
+            : backgroundColor === "accent"
+                ? "accent"
+                : backgroundColor === "bold"
+                    ? "bold"
+                    : undefined, backgroundImage: backgroundImage, content: content, headline: {
             ...headlineRest,
             spaceAfter: "large",
             // @ts-expect-error
@@ -41,7 +49,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
             buttons,
             // @ts-expect-error
             items: buttons,
-        }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: inverted, ref: ref, children: props.children }));
+        }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: style === "colorful" ? true : inverted, ref: ref, children: props.children }));
 });
 const SectionContext = createContext(SectionContextDefault);
 const Section = forwardRef((props, ref) => {

package/dist/components/section/section.css

@@ -11,7 +11,7 @@
   --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_default: var(--dsa-content--vertical-spacing);
   --dsa-section--space_small: calc(var(--ks-spacing-xxl) / 2);
   --dsa-section--gutter_small: var(--ks-spacing-s);
   --dsa-section--gutter_default: var(--ks-spacing-m);
@@ -22,10 +22,22 @@
   --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);
+  --dsa-section__content--padding: var(--dsa-content--horizontal-spacing);
   --dsa-section--background-color_default: var(--ks-background-color-default);
   --dsa-section--background-color_accent: var(--ks-background-color-accent);
   --dsa-section--background-color_bold: var(--ks-background-color-bold);
+  --dsa-section--transition_to-default: linear-gradient(
+    178deg,
+    transparent 75%,
+    var(--ks-background-color-default) 75%
+  );
+  --dsa-section--transition_to-accent: linear-gradient(178deg, transparent 75%, var(--ks-background-color-accent) 75%);
+  --dsa-section--transition_to-bold: linear-gradient(178deg, transparent 75%, var(--ks-background-color-bold) 75%);
+  --dsa-section--transition_to-inverted: linear-gradient(
+    178deg,
+    transparent 75%,
+    var(--ks-background-color-default-inverted) 75%
+  );
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
   --dsa-section__slider-arrow--size: 2rem;
   --dsa-section__slider-arrow--padding: 0.5em;
@@ -33,45 +45,8 @@
   --dsa-section__slider-arrow--opacity_hover: 1;
   --dsa-section__slider-arrow--opacity_disabled: 0.3;
   --dsa-section__slider-arrow--background: transparent;
-  --dsa-section_stagelights--background-image: radial-gradient(
-      50% 150% at 100% -50%,
-      var(--ks-color-primary-inverted-alpha-3) 0%,
-      transparent 100%
-    ),
-    radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%);
-  --dsa-section_anchor-glow--background-image: radial-gradient(
-    50% 50% at 50% 100%,
-    var(--ks-color-secondary-alpha-5) 0%,
-    transparent 100%
-  );
-  --dsa-section_symmetric-glow--background-image: radial-gradient(
-      20% 50% at 100% 50%,
-      var(--ks-color-primary-alpha-5) 0%,
-      transparent 100%
-    ),
-    radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 100%);
-  --dsa-section_accent-transition--background-image: linear-gradient(
-    180deg,
-    transparent 0%,
-    var(--ks-background-color-accent) 100%
-  );
-  --dsa-section_bold-transition--background-image: linear-gradient(
-    180deg,
-    transparent 0%,
-    var(--ks-background-color-bold) 100%
-  );
-  --dsa-section_vertical-gradient--background-image: linear-gradient(
-    0deg,
-    var(--ks-color-primary-alpha-5) 0%,
-    var(--ks-color-secondary-alpha-5) 100%
-  );
-  --dsa-section_horizontal-gradient--background-image: linear-gradient(
-    90deg,
-    var(--ks-color-primary-alpha-5) 0%,
-    var(--ks-color-secondary-alpha-5) 100%
-  );
-  --dsa-section__spotlight--size: 150px;
-  --dsa-section__spotlight--blur: 100%;
+  --dsa-section__spotlight--size: 50px;
+  --dsa-section__spotlight--blur: 0%;
   --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
 }
 
@@ -128,6 +103,18 @@
 .l-section.dsa-section.l-section--bold {
   background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
 }
+.l-section.dsa-section.dsa-section--transition-to-accent {
+  background-image: var(--dsa-section--transition_to-accent, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
+}
+.l-section.dsa-section.dsa-section--transition-to-bold {
+  background-image: var(--dsa-section--transition_to-bold, linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%));
+}
+.l-section.dsa-section.dsa-section--transition-to-default {
+  background-image: var(--dsa-section--transition_to-default, linear-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
+}
+.l-section.dsa-section.dsa-section--transition-to-inverted {
+  background-image: var(--dsa-section--transition_to-inverted, linear-gradient(180deg, transparent 80%, var(--ks-background-color-default-inverted) 80%));
+}
 .l-section.dsa-section--header-spacing {
   padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space_default));
 }
@@ -137,26 +124,19 @@
 .l-section.dsa-section--header-spacing.l-section--space-before-small {
   padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space-small));
 }
-.l-section.dsa-section-style--stagelights {
-  background-image: var(--dsa-section_stagelights--background-image, radial-gradient(50% 150% at 100% -50%, var(--ks-color-primary-inverted-alpha-3) 0%, transparent 100%), radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%));
-}
-.l-section.dsa-section-style--anchor-glow {
-  background-image: var(--dsa-section_anchor-glow--background-image, radial-gradient(50% 50% at 50% 100%, var(--ks-color-secondary-alpha-5) 0%, transparent 100%));
-}
-.l-section.dsa-section-style--symmetric-glow {
-  background-image: var(--dsa-section_symmetric-glow--background-image, radial-gradient(20% 50% at 100% 50%, var(--ks-color-primary-alpha-5) 0%, transparent 100%), radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 100%));
-}
-.l-section.dsa-section-style--accent-transition {
-  background-image: var(--dsa-section_accent-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
+.l-section.dsa-section-style--framed {
+  background-color: var(--ks-background-color-accent);
 }
-.l-section.dsa-section-style--bold-transition {
-  background-image: var(--dsa-section_bold-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%));
+.l-section.dsa-section-style--framed .l-section__container--content .l-section__content {
+  padding: var(--dsa-section--space_default);
+  background-color: var(--ks-background-color-default);
+  border-radius: var(--ks-border-radius-surface);
 }
-.l-section.dsa-section-style--vertical-gradient {
-  background-image: var(--dsa-section_vertical-gradient--background-image, linear-gradient(0deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
+.l-section.dsa-section-style--deko {
+  background-image: var(--dsa-section_deko--background-image, radial-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
 }
-.l-section.dsa-section-style--horizontal-gradient {
-  background-image: var(--dsa-section_horizontal-gradient--background-image, linear-gradient(90deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
+.l-section.dsa-section-style--colorful {
+  background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 100%));
 }
 .l-section.dsa-section--spotlight {
   position: relative;