@kickstartds/ds-agency-premium 1.4.0--canary.12.465.0 → 1.4.0--canary.14.680.0

package/dist/components/image-story/image-story.schema.json

@@ -57,17 +57,20 @@
           "type": "string",
           "format": "image"
         },
-        "ratio": {
-          "title": "Image aspect ratio",
-          "description": "Select an aspect ratio to use for cropping and displaying the image",
-          "type": "string",
-          "enum": ["4:3", "3:2", "16:9", "1:1", "none"],
-          "default": "none"
+        "aspectRatio": {
+          "$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/aspectRatio"
         },
         "alt": {
           "title": "Alt text",
           "description": "Image description",
           "type": "string"
+        },
+        "vAlign": {
+          "title": "Image vertical alignment",
+          "description": "Select a vertical alignment for the image",
+          "type": "string",
+          "enum": ["center", "top", "bottom"],
+          "default": "top"
         }
       },
       "additionalProperties": false

package/dist/components/image-story/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-24e0335c.js";
+import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
 declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/image-story/index.js

@@ -15,10 +15,19 @@ const ImageStoryContextDefault = forwardRef(({ headline, largeHeadline = false,
         // @ts-expect-error
         value: ButtonGroup, children: jsx(Storytelling, { ...rest, ref: ref, className: classnames("dsa-image-story"), full: padding === false ? true : false, image: {
                 source: image?.src,
+                vAlign: image?.vAlign,
+                ratio: image?.aspectRatio === "square"
+                    ? "1:1"
+                    : image?.aspectRatio === "wide"
+                        ? "4:3"
+                        : image?.aspectRatio === "landscape"
+                            ? "16:9"
+                            : image?.aspectRatio === "unset"
+                                ? "none"
+                                : "none",
                 order: {
                     desktopImageLast: layout === "imageLeft" ? false : true,
                 },
-                vAlign: "top",
             }, box: {
                 text: text,
                 textAlign: textAlign,

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

@@ -4,7 +4,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-93230a76.js";
+import { SectionProps } from "../../SectionProps-83d399b4.js";
 import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
 /* eslint-disable */
 /**
@@ -12,24 +12,24 @@ import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { HeaderProps } from "../../HeaderProps-34d278ee.js";
-import { FooterProps } from "../../FooterProps-9f94ed98.js";
+import { HeaderProps } from "../../HeaderProps-c6c32ccf.js";
+import { FooterProps } from "../../FooterProps-2d0b03c2.js";
 /**
  * Collection of sections (with their contents) to render on the page
  */
 type Sections = SectionProps[];
 /**
- * Whether the header should float on scroll
+ * Toggle default floating header behaviour set in global settings
  */
-type Floating = boolean;
+type ToggleFloating = boolean;
 /**
- * Whether the header should have an inverted color scheme
+ * Toggle default inverted header behaviour set in global settings
  */
-type Inverted = boolean;
+type ToggleInverted = boolean;
 /**
- * Whether the footer should have an inverted color scheme
+ * Toggle default inverted footer behaviour set in global settings
  */
-type Inverted1 = boolean;
+type ToggleInverted1 = boolean;
 /**
  * Abstracts a page concept into JSON schema
  */
@@ -46,14 +46,14 @@ interface PageProps {
  * Header settings for the page
  */
 interface Header {
-    floating?: Floating;
-    inverted?: Inverted;
+    floating?: ToggleFloating;
+    inverted?: ToggleInverted;
 }
 /**
  * Footer settings for the page
  */
 interface Footer {
-    inverted?: Inverted1;
+    inverted?: ToggleInverted1;
 }
 /**
  * Abstracts global settings made for a website into JSON Schema
@@ -74,4 +74,4 @@ interface SettingsProps {
 }
 export * from "../../BlogPostProps-e1cbd5d3.js";
 export * from "../../BlogOverviewProps-f385fc47.js";
-export { Sections, Floating, Inverted, Inverted1, PageProps, Header, Footer, SettingsProps };
+export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { LogoProps } from "../../LogoProps-01796f0a.js";
+declare const Logo: FC<LogoProps>;
+export { Logo };

package/dist/components/logo/index.js

@@ -0,0 +1,12 @@
+import "./logo.css";
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Picture } from '@kickstartds/base/lib/picture';
+import { Link } from '@kickstartds/base/lib/link';
+
+const Logo = ({ src, srcInverted, alt, inverted = false, width, height, homepageHref, className, }) => {
+    return (jsx(Link, { className: classnames("dsa-logo", className), href: homepageHref, children: jsx(Picture, { className: "dsa-logo__img", src: inverted && srcInverted ? srcInverted : src, alt: alt, width: width, height: height }) }));
+};
+Logo.displayName = "Logo";
+
+export { Logo };

package/dist/components/logo/logo.css

@@ -0,0 +1,7 @@
+.dsa-logo {
+  display: block;
+}
+.dsa-logo__img {
+  height: var(--dsa-logo--height);
+  width: auto;
+}

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

@@ -2,37 +2,61 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "$id": "http://schema.mydesignsystem.com/logo.schema.json",
   "title": "Logo",
-  "description": "Logo entry for Logos component",
   "type": "object",
   "properties": {
     "src": {
+      "title": "Source",
+      "description": "Picture source",
       "type": "string",
-      "format": "image",
-      "title": "URL",
-      "description": "The URL of the logo image",
-      "examples": [
-        "img/logos/logoipsum-212.svg",
-        "img/logos/logoipsum-217.svg",
-        "img/logos/logoipsum-239.svg",
-        "img/logos/logoipsum-244.svg",
-        "img/logos/logoipsum-250.svg",
-        "img/logos/logoipsum-286.svg"
-      ]
+      "format": "image"
+    },
+    "srcInverted": {
+      "title": "Source",
+      "description": "Picture source",
+      "type": "string",
+      "format": "image"
     },
     "alt": {
+      "title": "Alt text",
+      "description": "Alt text to display for picture",
+      "type": "string"
+    },
+    "homepageHref": {
       "type": "string",
-      "title": "Caption",
-      "description": "The alt text of the logo",
+      "format": "uri",
+      "default": "/"
+    },
+    "inverted": {
+      "type": "boolean",
+      "title": "Inverted",
+      "description": "Toggle wether the inverted or default version of the logo is being displayed"
+    },
+    "width": {
+      "title": "Width",
+      "description": "Width of the picture",
+      "type": "integer",
+      "minimum": 0,
       "examples": [
-        "Logo 1"
+        300
       ]
     },
+    "height": {
+      "title": "Height",
+      "description": "Height of the picture",
+      "type": "integer",
+      "minimum": 0,
+      "examples": [
+        300
+      ]
+    },
+    "className": {
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the logo",
+      "type": "string"
+    },
     "type": {
       "const": "logo"
     }
   },
-  "additionalProperties": false,
-  "required": [
-    "src"
-  ]
+  "additionalProperties": false
 }

package/dist/components/logo/logo.schema.json

@@ -2,30 +2,54 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "$id": "http://schema.mydesignsystem.com/logo.schema.json",
   "title": "Logo",
-  "description": "Logo entry for Logos component",
   "type": "object",
   "properties": {
     "src": {
+      "title": "Source",
+      "description": "Picture source",
       "type": "string",
-      "format": "image",
-      "title": "URL",
-      "description": "The URL of the logo image",
-      "examples": [
-        "img/logos/logoipsum-212.svg",
-        "img/logos/logoipsum-217.svg",
-        "img/logos/logoipsum-239.svg",
-        "img/logos/logoipsum-244.svg",
-        "img/logos/logoipsum-250.svg",
-        "img/logos/logoipsum-286.svg"
-      ]
+      "format": "image"
+    },
+    "srcInverted": {
+      "title": "Source",
+      "description": "Picture source",
+      "type": "string",
+      "format": "image"
     },
     "alt": {
+      "title": "Alt text",
+      "description": "Alt text to display for picture",
+      "type": "string"
+    },
+    "homepageHref": {
       "type": "string",
-      "title": "Caption",
-      "description": "The alt text of the logo",
-      "examples": ["Logo 1"]
+      "format": "uri",
+      "default": "/"
+    },
+    "inverted": {
+      "type": "boolean",
+      "title": "Inverted",
+      "description": "Toggle wether the inverted or default version of the logo is being displayed"
+    },
+    "width": {
+      "title": "Width",
+      "description": "Width of the picture",
+      "type": "integer",
+      "minimum": 0,
+      "examples": [300]
+    },
+    "height": {
+      "title": "Height",
+      "description": "Height of the picture",
+      "type": "integer",
+      "minimum": 0,
+      "examples": [300]
+    },
+    "className": {
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the logo",
+      "type": "string"
     }
   },
-  "additionalProperties": false,
-  "required": ["src"]
+  "additionalProperties": false
 }

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { LogosProps } from "../../LogosProps-58c84ccc.js";
+import { LogosProps } from "../../LogosProps-f9474fe2.js";
 declare const LogosContextDefault: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const LogosContext: import("react").Context<import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Logos: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/logos/index.js

@@ -7,7 +7,7 @@ import { Button } from '@kickstartds/base/lib/button';
 import { Link } from '@kickstartds/base/lib/link';
 import { Container } from '@kickstartds/core/lib/container';
 
-const LogosContextDefault = forwardRef(({ logo: logos = [], tagline, align, cta, logosPerRow = "6", ...rest }, ref) => (jsx("div", { ...rest, ref: ref, children: jsx(Container, { name: "logos", children: jsxs("div", { className: classnames(`dsa-logos dsa-logos--align-${align}`), children: [jsx("div", { className: "dsa-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`dsa-logo-tiles dsa-logo-tiles--cols-${logosPerRow}`), logos: logos }), cta?.toggle ? (jsxs("div", { className: "dsa-logos__cta", children: [jsxs("div", { className: "dsa-logos__cta__text", children: [cta?.text, cta?.style === "text" ? (jsxs(Fragment, { children: [" ", jsx(Link, { className: "dsa-logos__cta__link", href: cta.link, children: cta.label })] })) : ("")] }), cta?.style === "button" ? (jsx(Button, { href: cta.link, label: cta.label })) : ("")] })) : ("")] }) }) })));
+const LogosContextDefault = forwardRef(({ logo: logos = [], tagline, align, cta, logosPerRow = "6", ...rest }, ref) => (jsx("div", { ...rest, ref: ref, children: jsx(Container, { name: "logos", children: jsxs("div", { className: classnames(`dsa-logos dsa-logos--align-${align}`), children: [tagline && jsx("div", { className: "dsa-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`dsa-logo-tiles dsa-logo-tiles--cols-${logosPerRow}`), logos: logos }), cta?.toggle ? (jsxs("div", { className: "dsa-logos__cta", children: [jsxs("div", { className: "dsa-logos__cta__text", children: [cta?.text, cta?.style === "text" ? (jsxs(Fragment, { children: [" ", jsx(Link, { className: "dsa-logos__cta__link", href: cta.link, children: cta.label })] })) : ("")] }), cta?.style === "button" ? (jsx(Button, { href: cta.link, label: cta.label })) : ("")] })) : ("")] }) }) })));
 const LogosContext = createContext(LogosContextDefault);
 const Logos = forwardRef((props, ref) => {
     const Component = useContext(LogosContext);

package/dist/components/logos/logos.css

@@ -5,9 +5,9 @@
 
 .dsa-logos {
   --dsa-logos-gap: var(--ks-spacing-stack-m);
-  --dsa-logos-tagline--font: var(--dsa-headline_h3--font);
-  --dsa-logos-tagline--font-weight: var(--dsa-headline--font-weight);
-  --dsa-logos-tagline--color: var(--dsa-headline--color);
+  --dsa-logos__tagline--font: var(--dsa-headline_h3--font);
+  --dsa-logos__tagline--font-weight: var(--dsa-headline--font-weight);
+  --dsa-logos__tagline--color: var(--dsa-headline--color);
   --dsa-logos__grid--gap-horizontal: var(--ks-spacing-inline-l);
   --dsa-logos__grid--gap-vertical: var(--ks-spacing-stack-s);
   --dsa-logos__grid_mobile--cols: 2;
@@ -19,11 +19,15 @@
   flex-direction: column;
   gap: var(--dsa-logos-gap, var(--ks-spacing-stack-m));
 }
+.dsa-logos .c-logo-tiles {
+  --c-logo-tiles--cols: var(--dsa-logo-tiles--cols);
+  --c-logo-tiles--gutter: var(--dsa-logos__grid--gap-horizontal);
+}
 .dsa-logos__tagline {
-  font: var(--dsa-logos-tagline--font, var(--ks-font-display-m));
-  font-weight: var(--dsa-logos-tagline--font-weight, var(--dsa-headline--font-weight));
+  font: var(--dsa-logos__tagline--font, var(--ks-font-display-m));
+  font-weight: var(--dsa-logos__tagline--font-weight, var(--dsa-headline--font-weight));
   max-width: var(--l-section--content-width-narrow);
-  color: var(--dsa-logos-tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
+  color: var(--dsa-logos__tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
   width: 100%;
 }
 .dsa-logos__cta {
@@ -54,7 +58,7 @@
 }
 .dsa-logos .dsa-logo-tiles {
   --dsa-logo-tiles--cols: var(--dsa-logos__grid_mobile--cols, 2);
-  gap: var(--dsa-logos__grid--gap-horizontal) var(--dsa-logos__grid--gap-horizontal);
+  gap: var(--dsa-logos__grid--gap-vertical) var(--dsa-logos__grid--gap-horizontal);
   margin: 0;
 }
 @container logo-tiles (min-width: 420px) {

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

@@ -18,8 +18,6 @@
       "title": "Logos",
       "description": "The logos to display",
       "items": {
-        "$schema": "http://json-schema.org/draft-07/schema#",
-        "$id": "http://schema.mydesignsystem.com/logo.schema.json",
         "title": "Logo",
         "description": "Logo entry for Logos component",
         "type": "object",
@@ -45,9 +43,6 @@
             "examples": [
               "Logo 1"
             ]
-          },
-          "type": {
-            "const": "logo"
           }
         },
         "additionalProperties": false,

package/dist/components/logos/logos.schema.json

@@ -16,7 +16,33 @@
       "title": "Logos",
       "description": "The logos to display",
       "items": {
-        "$ref": "http://schema.mydesignsystem.com/logo.schema.json"
+        "title": "Logo",
+        "description": "Logo entry for Logos component",
+        "type": "object",
+        "properties": {
+          "src": {
+            "type": "string",
+            "format": "image",
+            "title": "URL",
+            "description": "The URL of the logo image",
+            "examples": [
+              "img/logos/logoipsum-212.svg",
+              "img/logos/logoipsum-217.svg",
+              "img/logos/logoipsum-239.svg",
+              "img/logos/logoipsum-244.svg",
+              "img/logos/logoipsum-250.svg",
+              "img/logos/logoipsum-286.svg"
+            ]
+          },
+          "alt": {
+            "type": "string",
+            "title": "Caption",
+            "description": "The alt text of the logo",
+            "examples": ["Logo 1"]
+          }
+        },
+        "additionalProperties": false,
+        "required": ["src"]
       },
       "minItems": 1,
       "maxItems": 20

package/dist/components/nav-dropdown/index.d.ts

@@ -0,0 +1,23 @@
+import { FC } from "react";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * Toggle the inversion of the dropdown navigation
+ */
+type DropdownInverted = boolean;
+interface NavDropdownProps {
+    inverted?: DropdownInverted;
+    items?: {
+        href?: string;
+        label?: string;
+        active?: boolean;
+        id?: string;
+    }[];
+    className?: string;
+}
+declare const NavDropdown: FC<NavDropdownProps>;
+export { NavDropdown };

package/dist/components/nav-dropdown/index.js

@@ -0,0 +1,10 @@
+import "./nav-dropdown.css";
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Link } from '@kickstartds/base/lib/link';
+
+const NavDropdown = ({ items, inverted }) => (jsx("ul", { className: classnames(`dsa-nav-dropdown`), "ks-inverted": inverted?.toString(), children: items.map(({ label, active, href, id }) => {
+        return (jsx("li", { className: classnames("dsa-nav-dropdown__item", active && "dsa-nav-dropdown__item--active"), children: jsx(Link, { href: href, className: `dsa-nav-dropdown__label`, children: label }) }, id));
+    }) }));
+
+export { NavDropdown };

package/dist/components/nav-dropdown/nav-dropdown.css

@@ -0,0 +1,48 @@
+.dsa-nav-dropdown {
+  --dsa-nav-dropdown--padding: var(--ks-spacing-inset-stretch-xs);
+  --dsa-nav-dropdown--background: var(--ks-background-color-card);
+  --dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
+  --dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
+  --dsa-nav-dropdown--border: 1px solid var(--ks-border-color-card);
+  --dsa-nav-dropdown--min-width: 14em;
+  --dsa-nav-dropdown__label--color: var(--ks-color-fg);
+  --dsa-nav-dropdown__label--color_hover: var(--ks-text-color-interface-interactive-hover);
+  --dsa-nav-dropdown__label--color_active: var(--ks-text-color-interface-interactive-active);
+  --dsa-nav-dropdown__label--font: var(--ks-font-interface-m);
+  --dsa-nav-dropdown__label--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-nav-dropdown__label--font-weight_active: var(--ks-font-weight-semi-bold);
+  --dsa-nav-dropdown__label--padding: 0.35em 0.25em;
+  --dsa-nav-dropdown__label_dimmed--opacity: 0.6;
+}
+
+.dsa-nav-dropdown {
+  font: var(--dsa-nav-dropdown__label--font);
+  min-width: var(--dsa-nav-dropdown--min-width);
+  padding: var(--dsa-nav-dropdown--padding);
+  position: absolute;
+  top: 100%;
+  flex-direction: column;
+  align-items: stretch;
+  background-color: var(--dsa-nav-dropdown--background);
+  border-radius: var(--dsa-nav-dropdown--border-radius);
+  box-shadow: var(--dsa-nav-dropdown--box-shadow);
+  border: var(--dsa-nav-dropdown--border);
+}
+.dsa-nav-dropdown:hover .dsa-nav-dropdown__label:not(:hover) {
+  opacity: var(--dsa-nav-dropdown__label_dimmed--opacity);
+}
+.dsa-nav-dropdown .dsa-nav-dropdown__label {
+  font: inherit;
+  font-weight: var(--dsa-nav-dropdown__label--font-weight);
+  color: var(--dsa-nav-dropdown__label--color);
+  position: relative;
+  display: block;
+  padding: var(--dsa-nav-dropdown__label--padding);
+  text-align: left;
+}
+.dsa-nav-dropdown .dsa-nav-dropdown__label:hover, .dsa-nav-dropdown .dsa-nav-dropdown__label:focus, .dsa-nav-dropdown .dsa-nav-dropdown__label:active {
+  color: var(--dsa-nav-dropdown__label--color_hover);
+}
+.dsa-nav-dropdown .dsa-nav-dropdown__label--active {
+  color: var(--dsa-nav-dropdown__label--color_active);
+}

package/dist/components/nav-flyout/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const NavFlyout: ({ items, inverted, logo }: {
+    items: any;
+    inverted: any;
+    logo: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export { NavFlyout };

package/dist/components/nav-flyout/index.js

@@ -0,0 +1,17 @@
+import "./nav-flyout.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Link } from '@kickstartds/base/lib/link';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { Logo } from '../logo/index.js';
+import '@kickstartds/base/lib/picture';
+
+const NavFlyout = ({ items, inverted, logo }) => items && items.length > 0 ? (jsxs("nav", { className: "dsa-nav-flyout", "ks-inverted": inverted.toString(), id: "dsa-nav-flyout", "aria-label": "Hauptnavigation", children: [jsx(Logo, { ...logo, className: "dsa-nav-flyout__logo" }), jsx("ul", { className: "dsa-nav-flyout__list", children: items.map(({ label, href, id, active, items: subItems }) => {
+                const isActive = active === href ||
+                    subItems?.some((navItem) => active === navItem.href);
+                return (jsxs("li", { className: classnames("dsa-nav-flyout__item", isActive && "dsa-nav-flyout__item--active", active && "dsa-nav-flyout__item--active"), children: [subItems?.length ? (jsxs("span", { tabIndex: 0, className: "dsa-nav-flyout__label", children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-flyout__label__icon", icon: "chevron-down" })) : ("")] })) : (jsx(Link, { href: href, className: `dsa-nav-flyout__label dsa-nav-flyout__link`, children: label })), subItems?.length ? (jsx("ul", { className: "dsa-nav-flyout__sublist", children: subItems.map(({ label, href, active, id }) => {
+                                return (jsx("li", { className: classnames("dsa-nav-flyout__item", active && "dsa-nav-flyout__item--active", isActive && "dsa-nav-flyout__item--active"), children: jsx(Link, { href: href, className: `dsa-nav-flyout__label dsa-nav-flyout__link`, children: label }) }, id));
+                            }) })) : null] }, id));
+            }) })] })) : null;
+
+export { NavFlyout };