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

package/dist/components/providers/index.js

@@ -9,7 +9,6 @@ import { ButtonGroupProvider } from '../button-group/index.js';
 import 'react';
 import 'classnames';
 import '@kickstartds/base/lib/button';
-import '../../helpers-12f48df8.js';
 import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';

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

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

package/dist/components/section/index.js

@@ -5,35 +5,9 @@ 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-12f48df8.js';
 import '@kickstartds/core/lib/component';
 
-const defaults = {
-    "width": "default",
-    "style": "default",
-    "backgroundColor": "default",
-    "transition": "none",
-    "spotlight": false,
-    "spaceBefore": "default",
-    "spaceAfter": "default",
-    "inverted": false,
-    "headerSpacing": false,
-    "headline": {
-        "large": false,
-        "width": "unset"
-    },
-    "content": {
-        "width": "unset",
-        "align": "center",
-        "gutter": "default",
-        "mode": "default",
-        "tileWidth": "default"
-    },
-    "components": [],
-    "buttons": []
-};
-
-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 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,
@@ -42,17 +16,21 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
         spotlight,
         content?.mode === "slider",
     ]);
-    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style && style !== "default" && `dsa-section-style--${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, 
-        // @ts-expect-error
-        content: content, headline: {
+    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style &&
+            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, backgroundImage: backgroundImage, content: content, headline: {
             ...headlineRest,
             spaceAfter: "large",
             // @ts-expect-error
@@ -68,7 +46,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
 const SectionContext = createContext(SectionContextDefault);
 const Section = forwardRef((props, ref) => {
     const Component = useContext(SectionContext);
-    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+    return jsx(Component, { ...props, ref: ref });
 });
 Section.displayName = "Section";
 const SectionProvider = (props) => (jsx(SectionContext$1.Provider, { ...props, value: Section }));

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(--dsa-content--vertical-spacing);
+  --dsa-section--space_default: var(--ks-spacing-xxl);
   --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,18 +22,10 @@
   --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--horizontal-spacing);
+  --dsa-section__content--padding: var(--dsa-content--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(180deg, transparent, var(--ks-background-color-default));
-  --dsa-section--transition_to-accent: linear-gradient(180deg, transparent, var(--ks-background-color-accent));
-  --dsa-section--transition_to-bold: linear-gradient(180deg, transparent, var(--ks-background-color-bold));
-  --dsa-section--transition_to-inverted: linear-gradient(
-    180deg,
-    transparent,
-    var(--ks-background-color-default-inverted)
-  );
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
   --dsa-section__slider-arrow--size: 2rem;
   --dsa-section__slider-arrow--padding: 0.5em;
@@ -41,8 +33,45 @@
   --dsa-section__slider-arrow--opacity_hover: 1;
   --dsa-section__slider-arrow--opacity_disabled: 0.3;
   --dsa-section__slider-arrow--background: transparent;
-  --dsa-section__spotlight--size: 50px;
-  --dsa-section__spotlight--blur: 0%;
+  --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--color: var(--ks-color-primary-alpha-5);
 }
 
@@ -99,18 +128,6 @@
 .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));
 }
@@ -120,22 +137,26 @@
 .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--framed {
-  --frame-background-color: var(--ks-background-color-accent);
+.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--framed .l-section__container--content .l-section__content {
-  padding: var(--dsa-section--space_default);
-  background-color: var(--frame-background-color, var(--ks-background-color-default));
-  border-radius: var(--ks-border-radius-surface);
+.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--framed.l-section--accent, .l-section.dsa-section-style--framed.l-section--bold {
-  --frame-background-color: var(--ks-background-color-default);
+.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--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--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--colorful {
-  background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 100%));
+.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--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--spotlight {
   position: relative;
@@ -166,9 +187,6 @@
   --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--tiles-full {
-  --l-section_col--min-width: 100%;
-}
 .l-section.dsa-section .l-section__content--slider {
   padding: var(--ks-spacing-s) 0;
 }