@kickstartds/ds-agency-premium 1.6.71--canary.45.2205.0 → 1.6.71--canary.49.2211.0

package/dist/components/presets.json

@@ -2904,7 +2904,7 @@
     "id": "layout-footer--footer",
     "group": "Layout/Footer",
     "name": "Footer",
-    "code": "<Footer\n  byline=\"© 2024 systemics Inc. All rights reserved.\"\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    inverted: false,\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Active Item',\n      url: '#'\n    },\n    {\n      label: 'Navigation Item',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Dropdown',\n      url: '#'\n    },\n    {\n      label: 'One more Item',\n      url: '#'\n    },\n    {\n      label: 'Last Item',\n      url: '#'\n    }\n  ]}\n/>",
+    "code": "<Footer\n  byline=\"© 2024 systemics Inc. All rights reserved.\"\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    inverted: false,\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Beamer',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Interaktive Displays',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Professional Displays',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'LED Displays',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Lösungen',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Zubehör',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Über Optoma',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Support',\n      url: '#'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -2920,16 +2920,54 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Active Item",
-          "active": true
+          "label": "Beamer",
+          "active": true,
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
         },
         {
           "url": "#",
-          "label": "Navigation Item"
+          "label": "Interaktive Displays",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
         },
         {
           "url": "#",
-          "label": "Dropdown",
+          "label": "Professional Displays",
           "items": [
             {
               "url": "#",
@@ -2952,11 +2990,118 @@
         },
         {
           "url": "#",
-          "label": "One more Item"
+          "label": "LED Displays",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
         },
         {
           "url": "#",
-          "label": "Last Item"
+          "label": "Lösungen",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
+        },
+        {
+          "url": "#",
+          "label": "Zubehör",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
+        },
+        {
+          "url": "#",
+          "label": "Über Optoma",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
+        },
+        {
+          "url": "#",
+          "label": "Support",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
         }
       ]
     },
@@ -3137,7 +3282,7 @@
     "id": "layout-header--header",
     "group": "Layout/Header",
     "name": "Header",
-    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Active Item',\n      url: '#'\n    },\n    {\n      label: 'Navigation Item',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Dropdown',\n      url: '#'\n    },\n    {\n      label: 'One more Item',\n      url: '#'\n    },\n    {\n      label: 'Last Item',\n      url: '#'\n    }\n  ]}\n/>",
+    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Beamer',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Interaktive Displays',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Professional Displays',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'LED Displays',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Lösungen',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Zubehör',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Über Optoma',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Support',\n      url: '#'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -3154,16 +3299,54 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Active Item",
-          "active": true
+          "label": "Beamer",
+          "active": true,
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
         },
         {
           "url": "#",
-          "label": "Navigation Item"
+          "label": "Interaktive Displays",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
         },
         {
           "url": "#",
-          "label": "Dropdown",
+          "label": "Professional Displays",
           "items": [
             {
               "url": "#",
@@ -3186,11 +3369,118 @@
         },
         {
           "url": "#",
-          "label": "One more Item"
+          "label": "LED Displays",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
         },
         {
           "url": "#",
-          "label": "Last Item"
+          "label": "Lösungen",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
+        },
+        {
+          "url": "#",
+          "label": "Zubehör",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
+        },
+        {
+          "url": "#",
+          "label": "Über Optoma",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
+        },
+        {
+          "url": "#",
+          "label": "Support",
+          "items": [
+            {
+              "url": "#",
+              "label": "Level 2 Item"
+            },
+            {
+              "url": "#",
+              "label": "Active Item",
+              "active": true
+            },
+            {
+              "url": "#",
+              "label": "An Item with a longer Label"
+            },
+            {
+              "url": "#",
+              "label": "And One last one"
+            }
+          ]
         }
       ]
     },

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-2a23ef89.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/section.css

@@ -26,17 +26,13 @@
   --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-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(
-    178deg,
-    transparent 75%,
-    var(--ks-background-color-default-inverted) 75%
+    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;
@@ -139,8 +135,8 @@
 .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--colorful {
-  background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 100%));
+.l-section.dsa-section-style--inset {
+  background-image: linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 5px), linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 30px), linear-gradient(180deg, transparent calc(100% - 30px), var(--ks-color-fg-alpha-9) 100%), linear-gradient(180deg, transparent calc(100% - 5px), var(--ks-color-fg-alpha-9) 100%), radial-gradient(100% 100% at 50% 50%, var(--ks-color-bg), var(--ks-color-bg-to-fg-1));
 }
 .l-section.dsa-section--spotlight {
   position: relative;

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

@@ -25,7 +25,7 @@
       "enum": [
         "default",
         "framed",
-        "deko"
+        "inset"
       ],
       "default": "default"
     },

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

@@ -16,7 +16,7 @@
       "type": "string",
       "title": "Style",
       "description": "Style of background",
-      "enum": ["default", "framed", "deko"],
+      "enum": ["default", "framed", "inset"],
       "default": "default"
     },
     "backgroundColor": {