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

package/dist/{BlogOverviewProps-d62a0a9a.d.ts → BlogOverviewProps-9f207f1c.d.ts}

@@ -3,8 +3,8 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-d60aba86.js";
-import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.js";
+import { SectionProps } from "./SectionProps-2a23ef89.js";
+import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/{BlogPostProps-c760fd2a.d.ts → BlogPostProps-6b3cff22.d.ts}

@@ -5,7 +5,7 @@
  */
 import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
 import { BlogAsideProps } from "./BlogAsideProps-c760fd2a.js";
-import { SectionProps } from "./SectionProps-d60aba86.js";
+import { SectionProps } from "./SectionProps-2a23ef89.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/PageProps-aa29c554.d.ts

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-d60aba86.js";
+import { SectionProps } from "./SectionProps-2a23ef89.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render on the page

package/dist/{SectionProps-d60aba86.d.ts → SectionProps-2a23ef89.d.ts}

@@ -33,7 +33,7 @@ type Width = "full" | "max" | "wide" | "default" | "narrow";
 /**
  * Style of background
  */
-type Style = "default" | "framed" | "deko";
+type Style = "default" | "framed" | "inset";
 /**
  * Color of background
  */

package/dist/components/blog-overview/blog-overview.schema.dereffed.json

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

package/dist/components/blog-overview/index.d.ts

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-d62a0a9a.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
 export type { BlogOverviewProps };

package/dist/components/blog-post/blog-post.schema.dereffed.json

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

package/dist/components/blog-post/index.d.ts

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-c760fd2a.js";
+import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export type { BlogPostProps };

package/dist/components/blog-teaser/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { BlogTeaserProps } from "../../BlogTeaserProps-d62a0a9a.js";
+import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
 declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/button/button.css

@@ -1,7 +1,7 @@
 .dsa-button {
   --dsa-button--padding: 0.75em 1.5em;
   --dsa-button--border-width: var(--ks-border-width-default);
-  --dsa-button--border-radius: var(--ks-border-radius-control);
+  --dsa-button--border-radius: var(--ks-border-radius-pill);
   --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-button--text-transform: default;
   --dsa-button_small--font: var(--ks-font-interface-s);

package/dist/components/cookie-consent/C15t.client.js

@@ -1,25 +1,8 @@
 import { define } from '@kickstartds/core/lib/component';
-import 'c15t';
 import CookieConsent from './CookieConsent.client.js';
 
-const customTranslations = {
-    de: {
-        accept: "Akzeptieren",
-        reject: "Ablehnen",
-        required: "Immer aktiv",
-        settings: "Cookies verwalten",
-    },
-    en: {
-        accept: "Accept",
-        reject: "Reject",
-        required: "Always Active",
-        settings: "Cookie Preferences",
-    },
-};
-const translate = (elements, translationConfig) => {
-    const defaultLanguage = translationConfig.defaultLanguage;
-    const translations = translationConfig.translations[defaultLanguage];
-    const customTranslation = customTranslations[defaultLanguage] || customTranslations.en;
+const translate = (elements, state) => {
+    const translations = state.translationConfig.translations[state.translationConfig.defaultLanguage];
     // Notice
     elements.notice.title.textContent = translations.cookieBanner.title;
     elements.notice.description.textContent =
@@ -42,19 +25,7 @@ const translate = (elements, translationConfig) => {
                 translation.title;
             option.querySelector(".dsa-cookie-consent-dialogue__option-description").textContent = translation.description;
         }
-        const requiredLabel = option.querySelector(".dsa-cookie-consent-dialogue__label");
-        if (requiredLabel)
-            requiredLabel.textContent = customTranslation.required;
-    }
-    for (const element of elements.dialog.form.elements) {
-        if (element.type === "radio") {
-            element.nextElementSibling.nextElementSibling.textContent =
-                customTranslation[element.value];
-        }
     }
-    // settings
-    elements.settings.button.firstElementChild.textContent =
-        customTranslation.settings;
 };
 class CookieConsentC15t extends CookieConsent {
     constructor(element) {
@@ -86,7 +57,7 @@ class CookieConsentC15t extends CookieConsent {
             }
         };
         const unsub = store.subscribe(update);
-        translate(this.elements, initialState.translationConfig);
+        translate(this.elements, initialState);
         update(initialState);
         const acceptCustom = () => {
             const state = store.getState();

package/dist/components/cookie-consent/CookieConsent.client.d.ts

@@ -12,6 +12,7 @@ declare class CookieConsent {
         };
         dialog: {
             wrapper: any;
+            overlay: any;
             title: any;
             description: any;
             closeBtn: any;

package/dist/components/cookie-consent/CookieConsent.client.js

@@ -15,6 +15,7 @@ class CookieConsent extends Component {
             },
             dialog: {
                 wrapper: $(".dsa-cookie-consent-dialogue"),
+                overlay: $(".dsa-cookie-consent-overlay"),
                 title: $(".dsa-cookie-consent-dialogue__title .dsa-headline__inner"),
                 description: $(".dsa-cookie-consent-dialogue__description"),
                 closeBtn: $(".dsa-cookie-consent-dialogue__close"),
@@ -28,19 +29,19 @@ class CookieConsent extends Component {
             },
         });
         const showDialog = () => {
-            elements.dialog.wrapper.showModal();
+            elements.dialog.overlay.removeAttribute("hidden");
+            elements.dialog.wrapper.removeAttribute("hidden");
+            elements.dialog.wrapper.setAttribute("aria-hidden", "false");
         };
         const closeDialog = () => {
-            elements.dialog.wrapper.close();
+            elements.dialog.overlay.setAttribute("hidden", "");
+            elements.dialog.wrapper.setAttribute("hidden", "");
+            elements.dialog.wrapper.setAttribute("aria-hidden", "true");
         };
         const closeDialogAndReset = () => {
             closeDialog();
             elements.dialog.form.reset();
         };
-        const onBackdropClick = (event) => {
-            if (event.target === elements.dialog.wrapper)
-                closeDialogAndReset();
-        };
         const activateAll = () => {
             for (const element of elements.dialog.form.elements) {
                 if (element.value === "accept") {
@@ -55,12 +56,16 @@ class CookieConsent extends Component {
                 }
             }
         };
+        const onSubmit = (event) => {
+            event.preventDefault();
+            closeDialog();
+        };
         elements.notice.customizeBtn.addEventListener("click", showDialog);
         elements.settings.button.addEventListener("click", showDialog);
         elements.dialog.closeBtn.addEventListener("click", closeDialogAndReset);
         elements.dialog.activateAllBtn.addEventListener("click", activateAll);
         elements.dialog.deactivateAllBtn.addEventListener("click", deactivateAll);
-        elements.dialog.wrapper.addEventListener("click", onBackdropClick);
+        elements.dialog.form.addEventListener("submit", onSubmit);
         window._ks.radio.on(CookieConsent.identifier + ".showNotice", (_, value) => {
             this.showNotice = value;
         });
@@ -70,7 +75,7 @@ class CookieConsent extends Component {
             elements.dialog.closeBtn.removeEventListener("click", closeDialogAndReset);
             elements.dialog.activateAllBtn.removeEventListener("click", activateAll);
             elements.dialog.deactivateAllBtn.removeEventListener("click", deactivateAll);
-            elements.dialog.wrapper.removeEventListener("click", onBackdropClick);
+            elements.dialog.form.removeEventListener("submit", onSubmit);
         });
     }
     set showNotice(value) {

package/dist/components/cookie-consent/cookie-consent.css

@@ -144,16 +144,20 @@
   left: 0;
 }
 
-.dsa-cookie-consent-dialogue[open] {
+.dsa-cookie-consent-dialogue {
   border-radius: var(--dsa-cookie-consent-dialogue--border-radius, var(--ks-border-radius-card));
   border: var(--dsa-cookie-consent-dialogue--border, var(--ks-border-color-interface) solid var(--ks-border-width-default));
   box-shadow: var(--dsa-cookie-consent-dialogue--box-shadow, var(--ks-box-shadow-card));
   background-color: var(--dsa-cookie-consent-dialogue--background-color, var(--ks-background-color-default));
   display: flex;
   flex-direction: column;
-  padding: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   width: calc(100% - var(--dsa-cookie-consent-dialogue--spacing-horizontal, var(--ks-spacing-inset-xs)) * 2);
   max-width: var(--dsa-cookie-consent-dialogue--max-width, var(--dsa-tile--width_largest));
+  z-index: 1000;
   max-height: calc(var(--dsa-cookie-consent-dialogue--max-height, 100%) - var(--dsa-cookie-consent-dialogue--spacing-vertical, var(--ks-spacing-inset-xs)) * 2);
 }
 .dsa-cookie-consent-dialogue__header {
@@ -250,6 +254,14 @@
     flex-direction: row;
   }
 }
-.dsa-cookie-consent-dialogue::backdrop {
+
+.dsa-cookie-consent-overlay {
+  content: "";
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
   background-color: var(--dsa-cookie-consent-overlay--background-color, var(--dsa-overlay--background-color));
 }

package/dist/components/cookie-consent/index.js

@@ -14,7 +14,7 @@ import '@kickstartds/base/lib/button';
 import '@kickstartds/core/lib/component';
 
 const CookieConsentContextDefault = forwardRef(({ notice, revisitButton, dialogue, component = "dsa.cookie-consent" }, ref) => {
-    return (jsxs("div", { className: "dsa-cookie-consent", "ks-component": component, ref: ref, children: [jsxs("div", { className: classnames(`dsa-cookie-consent-notice dsa-cookie-consent-notice--${notice?.displayMode}`), hidden: true, children: [jsx(Headline, { spaceAfter: "minimum", text: notice?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-notice__title" }), jsx(RichText, { text: notice?.description, className: "dsa-cookie-consent-notice__description" }), jsxs("div", { className: "dsa-cookie-consent-notice__buttons", children: [jsx(Button, { size: "small", label: notice?.customizeButton?.label, variant: notice?.customizeButton?.variant, className: "dsa-cookie-consent-notice__button--customize" }), jsx(Button, { size: "small", label: notice?.rejectButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--reject" }), jsx(Button, { size: "small", label: notice?.acceptButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--accept" })] })] }), jsx(Button, { className: "dsa-cookie-consent-revisit", size: "small", variant: "primary", icon: "star", label: revisitButton?.label || "Cookie Preferences", hidden: true }), jsxs("dialog", { className: "dsa-cookie-consent-dialogue", children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__header", children: [jsx(Headline, { spaceAfter: "minimum", text: dialogue?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-dialogue__title" }), jsx(Button, { "aria-label": "Close Cookie Consent Dialogue", className: "dsa-cookie-consent-dialogue__close", icon: "close", label: "", autoFocus: true })] }), jsxs("form", { className: "dsa-cookie-consent-dialogue__form", method: "dialog", children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__content", children: [jsx(RichText, { className: "dsa-cookie-consent-dialogue__description", text: dialogue?.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__options", children: [dialogue?.required?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsx("span", { className: "dsa-cookie-consent-dialogue__label", children: dialogue?.alwaysActiveLabel || "Always Active" })] }, index))), dialogue?.options?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__toggle", children: [jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.accept || "Accept", value: "accept" }), jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.reject || "Reject", value: "reject" })] })] }, index)))] })] }), jsxs("div", { className: "dsa-cookie-consent-dialogue__buttons", children: [jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.acceptLabel || "Accept All", className: "dsa-cookie-consent-dialogue__button--activate-all" }), jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.rejectLabel || "Reject All", className: "dsa-cookie-consent-dialogue__button--deactivate-all" }), jsx(Button, { type: "submit", size: "small", variant: "primary", label: dialogue?.buttons.savePreferencesLabel || "Save Preferences", className: "dsa-cookie-consent-dialogue__button--save" })] })] })] })] }));
+    return (jsxs("div", { className: "dsa-cookie-consent", "ks-component": component, ref: ref, children: [jsxs("div", { className: classnames(`dsa-cookie-consent-notice dsa-cookie-consent-notice--${notice?.displayMode}`), hidden: true, children: [jsx(Headline, { spaceAfter: "minimum", text: notice?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-notice__title" }), jsx(RichText, { text: notice?.description, className: "dsa-cookie-consent-notice__description" }), jsxs("div", { className: "dsa-cookie-consent-notice__buttons", children: [jsx(Button, { size: "small", label: notice?.customizeButton?.label, variant: notice?.customizeButton?.variant, className: "dsa-cookie-consent-notice__button--customize" }), jsx(Button, { size: "small", label: notice?.rejectButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--reject" }), jsx(Button, { size: "small", label: notice?.acceptButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--accept" })] })] }), jsx(Button, { className: "dsa-cookie-consent-revisit", size: "small", variant: "primary", icon: "star", label: revisitButton?.label || "Cookie Preferences", hidden: true }), jsxs("div", { className: "dsa-cookie-consent-dialogue", hidden: true, "aria-hidden": true, children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__header", children: [jsx(Headline, { spaceAfter: "minimum", text: dialogue?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-dialogue__title" }), jsx(Button, { "aria-label": "Close Cookie Consent Dialogue", className: "dsa-cookie-consent-dialogue__close", icon: "close", label: "" })] }), jsxs("form", { className: "dsa-cookie-consent-dialogue__form", children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__content", children: [jsx(RichText, { className: "dsa-cookie-consent-dialogue__description", text: dialogue?.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__options", children: [dialogue?.required?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsx("span", { className: "dsa-cookie-consent-dialogue__label", children: dialogue?.alwaysActiveLabel || "Always Active" })] }, index))), dialogue?.options?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__toggle", children: [jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.accept || "Accept", value: "accept" }), jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.reject || "Reject", value: "reject" })] })] }, index)))] })] }), jsxs("div", { className: "dsa-cookie-consent-dialogue__buttons", children: [jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.acceptLabel || "Accept All", className: "dsa-cookie-consent-dialogue__button--activate-all" }), jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.rejectLabel || "Reject All", className: "dsa-cookie-consent-dialogue__button--deactivate-all" }), jsx(Button, { type: "submit", size: "small", variant: "primary", label: dialogue?.buttons.savePreferencesLabel || "Save Preferences", className: "dsa-cookie-consent-dialogue__button--save" })] })] })] }), jsx("div", { className: "dsa-cookie-consent-overlay", hidden: true })] }));
 });
 const CookieConsentContext = createContext(CookieConsentContextDefault);
 const CookieConsent = forwardRef((props, ref) => {

package/dist/components/features/features.css

@@ -4,6 +4,7 @@
   --dsa-feature__title--color: var(--dsa-topic--color);
   --dsa-feature__title--font: var(--ks-font-interface-m);
   --dsa-feature__title--font-family: var(--dsa-topic--font-family);
+  --dsa-feature__title--font-weight: var(--dsa-topic--font-weight);
   --dsa-feature__copy--color: var(--ks-text-color-copy);
   --dsa-feature__copy--font: var(--ks-font-copy-s);
   --dsa-feature__link--font: var(--ks-font-copy-s);
@@ -14,7 +15,7 @@
   --dsa-feature__link--text-decoration_hover: none;
   --dsa-feature__icon--color: var(--ks-text-color-primary);
   --dsa-feature_small__icon--size: calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m));
-  --dsa-feature_large__icon--size-multiplier: 2.5;
+  --dsa-feature_large__icon--size-multiplier: 2;
   --dsa-feature_small--gap: var(--ks-spacing-xs);
   --dsa-feature_large--gap: var(--ks-spacing-s);
   --dsa-feature_small__icon--gap: var(--ks-spacing-xs);

package/dist/components/footer/footer.css

@@ -1,6 +1,6 @@
 .dsa-footer {
-  --dsa-footer--background-color: var(--ks-background-color-default);
-  --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
+  --dsa-footer--background-color: var(--ks-background-color-accent);
+  --dsa-footer--border-top: 0;
   --dsa-footer--max-width: var(--dsa-content--width_wide);
   --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
   --dsa-footer__byline--font: var(--ks-font-copy-xs);

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

@@ -107,16 +107,54 @@
       "examples": [
         [
           {
-            "label": "Active Item",
+            "label": "Beamer",
             "url": "#",
-            "active": true
+            "active": true,
+            "items": [
+              {
+                "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",
-            "url": "#"
+            "label": "Interaktive Displays",
+            "url": "#",
+            "items": [
+              {
+                "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",
             "url": "#",
             "items": [
               {
@@ -139,12 +177,119 @@
             ]
           },
           {
-            "label": "One more Item",
-            "url": "#"
+            "label": "LED Displays",
+            "url": "#",
+            "items": [
+              {
+                "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",
-            "url": "#"
+            "label": "Lösungen",
+            "url": "#",
+            "items": [
+              {
+                "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",
+            "url": "#",
+            "items": [
+              {
+                "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",
+            "url": "#",
+            "items": [
+              {
+                "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",
+            "url": "#",
+            "items": [
+              {
+                "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": "#"
+              }
+            ]
           }
         ]
       ]