@kickstartds/ds-agency-premium 1.6.68--canary.45.1723.0 → 1.6.68

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

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

@@ -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", 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,
@@ -30,15 +30,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
                                 ? "symmetric-glow"
                                 : style === "anchorGlow"
                                     ? "anchor-glow"
-                                    : 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: {
+                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, backgroundImage: backgroundImage, content: content, headline: {
             ...headlineRest,
             spaceAfter: "large",
             // @ts-expect-error
@@ -49,7 +41,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
             buttons,
             // @ts-expect-error
             items: buttons,
-        }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: style === "colorful" ? true : inverted, ref: ref, children: props.children }));
+        }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: 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(--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,22 +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(
-    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;
@@ -45,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);
 }
 
@@ -103,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));
 }
@@ -124,19 +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 {
-  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--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 .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--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--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--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--colorful {
-  background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 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;

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

@@ -23,10 +23,15 @@
       "title": "Style",
       "description": "Style of background",
       "enum": [
-        "framed",
-        "deko",
-        "colorful"
-      ]
+        "stagelights",
+        "horizontalGradient",
+        "verticalGradient",
+        "accentTransition",
+        "boldTransition",
+        "symmetricGlow",
+        "anchorGlow"
+      ],
+      "default": "default"
     },
     "backgroundColor": {
       "type": "string",
@@ -39,19 +44,6 @@
       ],
       "default": "default"
     },
-    "transition": {
-      "type": "string",
-      "title": "Style",
-      "description": "Color of background",
-      "enum": [
-        "none",
-        "to-default",
-        "to-accent",
-        "to-bold",
-        "to-inverted"
-      ],
-      "default": "default"
-    },
     "backgroundImage": {
       "title": "Background image",
       "description": "Background image for the whole section",
@@ -276,6 +268,12 @@
                 "default": false,
                 "type": "boolean"
               },
+              "fullWidth": {
+                "title": "Width",
+                "description": "Set the width of the content to the full width of the element",
+                "type": "boolean",
+                "default": false
+              },
               "buttons": {
                 "type": "array",
                 "items": {
@@ -296,10 +294,10 @@
                       "title": "Icon",
                       "description": "Choose an icon"
                     },
-                    "url": {
+                    "target": {
                       "type": "string",
-                      "title": "URL",
-                      "description": "The URL to link to when the button is clicked",
+                      "title": "Target",
+                      "description": "Target that should be linked, makes the button behave like a link semantically",
                       "format": "uri"
                     }
                   },
@@ -339,17 +337,6 @@
                     "title": "Alt text",
                     "description": "Image description",
                     "type": "string"
-                  },
-                  "align": {
-                    "title": "Vertical alignment of the image",
-                    "description": "Select a vertical alignment for the image",
-                    "type": "string",
-                    "enum": [
-                      "center",
-                      "top",
-                      "bottom"
-                    ],
-                    "default": "center"
                   }
                 },
                 "additionalProperties": false
@@ -384,9 +371,9 @@
                 "type": "string",
                 "default": "left"
               },
-              "align": {
+              "contentAlign": {
                 "title": "Vertical alignment of the content",
-                "description": "Select a vertical alignment for the content",
+                "description": "Select a vertical alignment for the image",
                 "type": "string",
                 "enum": [
                   "center",
@@ -395,18 +382,6 @@
                 ],
                 "default": "center"
               },
-              "padding": {
-                "title": "Padding",
-                "description": "Toggle padding of the content",
-                "type": "boolean",
-                "default": false
-              },
-              "inverted": {
-                "title": "Inverted",
-                "description": "Toggle inversion of the component",
-                "type": "boolean",
-                "default": false
-              },
               "type": {
                 "const": "cta"
               }
@@ -583,10 +558,10 @@
                     "cta": {
                       "type": "object",
                       "properties": {
-                        "url": {
+                        "target": {
                           "type": "string",
-                          "title": "Call to Action url",
-                          "description": "The CTA url",
+                          "title": "Call to Action target",
+                          "description": "The CTA target",
                           "default": "#",
                           "format": "uri"
                         },
@@ -598,16 +573,6 @@
                           "examples": [
                             "See all our partners"
                           ]
-                        },
-                        "icon": {
-                          "type": "string",
-                          "format": "icon",
-                          "title": "Icon",
-                          "description": "Icon for the link style of the cta",
-                          "examples": [
-                            "arrow-right"
-                          ],
-                          "default": "arrow-right"
                         }
                       },
                       "additionalProperties": false
@@ -681,8 +646,7 @@
                   "stack",
                   "smallTiles",
                   "largeTiles"
-                ],
-                "default": "smallTiles"
+                ]
               },
               "aspectRatio": {
                 "type": "string",
@@ -784,10 +748,10 @@
                       "title": "Icon",
                       "description": "Choose an icon"
                     },
-                    "url": {
+                    "target": {
                       "type": "string",
-                      "title": "URL",
-                      "description": "The URL to link to when the button is clicked",
+                      "title": "Target",
+                      "description": "Target that should be linked, makes the button behave like a link semantically",
                       "format": "uri"
                     }
                   },
@@ -876,12 +840,6 @@
                 "type": "string",
                 "default": "bottom"
               },
-              "inverted": {
-                "type": "boolean",
-                "title": "Inverted",
-                "description": "Inverted color scheme for the box",
-                "default": false
-              },
               "type": {
                 "const": "hero"
               }
@@ -1020,10 +978,10 @@
                         "Book a meeting"
                       ]
                     },
-                    "url": {
+                    "target": {
                       "type": "string",
-                      "title": "URL",
-                      "description": "The URL to link to when the button is clicked",
+                      "title": "Target",
+                      "description": "Target that should be linked, makes the button behave like a link semantically",
                       "format": "uri"
                     },
                     "variant": {
@@ -1420,10 +1378,10 @@
                             "Book a meeting"
                           ]
                         },
-                        "url": {
+                        "target": {
                           "type": "string",
-                          "title": "URL",
-                          "description": "The URL to link to when the button is clicked",
+                          "title": "Target",
+                          "description": "Target that should be linked, makes the button behave like a link semantically",
                           "format": "uri"
                         },
                         "icon": {
@@ -1572,6 +1530,12 @@
                           "default": false,
                           "type": "boolean"
                         },
+                        "fullWidth": {
+                          "title": "Width",
+                          "description": "Set the width of the content to the full width of the element",
+                          "type": "boolean",
+                          "default": false
+                        },
                         "buttons": {
                           "type": "array",
                           "items": {
@@ -1592,10 +1556,10 @@
                                 "title": "Icon",
                                 "description": "Choose an icon"
                               },
-                              "url": {
+                              "target": {
                                 "type": "string",
-                                "title": "URL",
-                                "description": "The URL to link to when the button is clicked",
+                                "title": "Target",
+                                "description": "Target that should be linked, makes the button behave like a link semantically",
                                 "format": "uri"
                               }
                             },
@@ -1635,17 +1599,6 @@
                               "title": "Alt text",
                               "description": "Image description",
                               "type": "string"
-                            },
-                            "align": {
-                              "title": "Vertical alignment of the image",
-                              "description": "Select a vertical alignment for the image",
-                              "type": "string",
-                              "enum": [
-                                "center",
-                                "top",
-                                "bottom"
-                              ],
-                              "default": "center"
                             }
                           },
                           "additionalProperties": false
@@ -1680,9 +1633,9 @@
                           "type": "string",
                           "default": "left"
                         },
-                        "align": {
+                        "contentAlign": {
                           "title": "Vertical alignment of the content",
-                          "description": "Select a vertical alignment for the content",
+                          "description": "Select a vertical alignment for the image",
                           "type": "string",
                           "enum": [
                             "center",
@@ -1691,18 +1644,6 @@
                           ],
                           "default": "center"
                         },
-                        "padding": {
-                          "title": "Padding",
-                          "description": "Toggle padding of the content",
-                          "type": "boolean",
-                          "default": false
-                        },
-                        "inverted": {
-                          "title": "Inverted",
-                          "description": "Toggle inversion of the component",
-                          "type": "boolean",
-                          "default": false
-                        },
                         "type": {
                           "const": "cta"
                         }
@@ -1796,10 +1737,10 @@
                               "cta": {
                                 "type": "object",
                                 "properties": {
-                                  "url": {
+                                  "target": {
                                     "type": "string",
-                                    "title": "Call to Action url",
-                                    "description": "The CTA url",
+                                    "title": "Call to Action target",
+                                    "description": "The CTA target",
                                     "default": "#",
                                     "format": "uri"
                                   },
@@ -1811,16 +1752,6 @@
                                     "examples": [
                                       "See all our partners"
                                     ]
-                                  },
-                                  "icon": {
-                                    "type": "string",
-                                    "format": "icon",
-                                    "title": "Icon",
-                                    "description": "Icon for the link style of the cta",
-                                    "examples": [
-                                      "arrow-right"
-                                    ],
-                                    "default": "arrow-right"
                                   }
                                 },
                                 "additionalProperties": false
@@ -1894,8 +1825,7 @@
                             "stack",
                             "smallTiles",
                             "largeTiles"
-                          ],
-                          "default": "smallTiles"
+                          ]
                         },
                         "aspectRatio": {
                           "type": "string",
@@ -1997,10 +1927,10 @@
                                 "title": "Icon",
                                 "description": "Choose an icon"
                               },
-                              "url": {
+                              "target": {
                                 "type": "string",
-                                "title": "URL",
-                                "description": "The URL to link to when the button is clicked",
+                                "title": "Target",
+                                "description": "Target that should be linked, makes the button behave like a link semantically",
                                 "format": "uri"
                               }
                             },
@@ -2089,12 +2019,6 @@
                           "type": "string",
                           "default": "bottom"
                         },
-                        "inverted": {
-                          "type": "boolean",
-                          "title": "Inverted",
-                          "description": "Inverted color scheme for the box",
-                          "default": false
-                        },
                         "type": {
                           "const": "hero"
                         }
@@ -2326,12 +2250,13 @@
                               "number": {
                                 "title": "Number",
                                 "description": "The number of the stat",
-                                "type": "integer",
+                                "type": "string",
                                 "examples": [
                                   1,
+                                  "5x",
                                   2,
-                                  3,
-                                  4
+                                  "40%",
+                                  "bis zu 100"
                                 ]
                               },
                               "description": {
@@ -2436,10 +2361,10 @@
                           "description": "Layout for the Teaser Card",
                           "default": "stack"
                         },
-                        "url": {
+                        "target": {
                           "type": "string",
-                          "title": "Url",
-                          "description": "Url that should be linked",
+                          "title": "Target",
+                          "description": "Target that should be linked",
                           "format": "uri"
                         },
                         "button": {
@@ -2492,7 +2417,7 @@
                       "additionalProperties": false,
                       "required": [
                         "topic",
-                        "url"
+                        "target"
                       ]
                     },
                     {
@@ -2685,12 +2610,13 @@
                     "number": {
                       "title": "Number",
                       "description": "The number of the stat",
-                      "type": "integer",
+                      "type": "string",
                       "examples": [
                         1,
+                        "5x",
                         2,
-                        3,
-                        4
+                        "40%",
+                        "bis zu 100"
                       ]
                     },
                     "description": {
@@ -2795,10 +2721,10 @@
                 "description": "Layout for the Teaser Card",
                 "default": "stack"
               },
-              "url": {
+              "target": {
                 "type": "string",
-                "title": "Url",
-                "description": "Url that should be linked",
+                "title": "Target",
+                "description": "Target that should be linked",
                 "format": "uri"
               },
               "button": {
@@ -2851,7 +2777,7 @@
             "additionalProperties": false,
             "required": [
               "topic",
-              "url"
+              "target"
             ]
           },
           {
@@ -3063,10 +2989,10 @@
                       "title": "Icon",
                       "description": "Choose an icon"
                     },
-                    "url": {
+                    "target": {
                       "type": "string",
-                      "title": "URL",
-                      "description": "The URL to link to when the button is clicked",
+                      "title": "Target",
+                      "description": "Target that should be linked, makes the button behave like a link semantically",
                       "format": "uri"
                     }
                   },
@@ -3122,10 +3048,8 @@
                 "description": "Choose the alginment of the module content",
                 "enum": [
                   "center",
-                  "bottom",
                   "left",
-                  "right",
-                  "corner"
+                  "right"
                 ],
                 "type": "string",
                 "default": "bottom"
@@ -3158,10 +3082,10 @@
               "Book a meeting"
             ]
           },
-          "url": {
+          "target": {
             "type": "string",
-            "title": "URL",
-            "description": "The URL to link to when the button is clicked",
+            "title": "Target",
+            "description": "Target that should be linked, makes the button behave like a link semantically",
             "format": "uri"
           },
           "variant": {