@kickstartds/ds-agency-premium 1.3.51--canary.674.14f816b.0 → 1.3.51

package/dist/{BlogPostProps-f9a49428.d.ts → BlogPostProps-440f88a5.d.ts}

@@ -5,7 +5,7 @@
  */
 import { BlogHeadProps } from "./BlogHeadProps-f9a49428.js";
 import { BlogAsideProps } from "./BlogAsideProps-e1cbd5d3.js";
-import { SectionProps } from "./SectionProps-03ff6d21.js";
+import { SectionProps } from "./SectionProps-83d399b4.js";
 import { CtaProps } from "./CtaProps-93230a76.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/{FooterProps-22e0307b.d.ts → FooterProps-10c950a6.d.ts}

@@ -39,12 +39,6 @@ interface FooterProps {
         href: string;
         label: string;
         active?: boolean;
-        items?: {
-            href?: string;
-            id?: string;
-            label?: string;
-            active?: boolean;
-        }[];
     }[];
 }
 interface Logo {

package/dist/{HeaderProps-dd2071a8.d.ts → HeaderProps-7be94a61.d.ts}

@@ -27,10 +27,6 @@ type Height = number;
  * Toggle the inversion of the flyout navigation
  */
 type FlyoutInverted = boolean;
-/**
- * Toggle the inversion of the dropdown navigation
- */
-type DropdownInverted = boolean;
 /**
  * Make the header float over the first Section
  */
@@ -39,25 +35,15 @@ type Floating = boolean;
  * Invert the color scheme of the header
  */
 type Inverted = boolean;
-/**
- * Header layered on top by the CMS
- */
 interface HeaderProps {
-    logo?: Logo;
+    logo: Logo;
     flyoutInverted?: FlyoutInverted;
-    dropdownInverted?: DropdownInverted;
     floating?: Floating;
     inverted?: Inverted;
     navItems?: {
         href: string;
         label: string;
         active?: boolean;
-        items?: {
-            href?: string;
-            id?: string;
-            label?: string;
-            active?: boolean;
-        }[];
     }[];
 }
 interface Logo {
@@ -68,4 +54,4 @@ interface Logo {
     width?: Width;
     height?: Height;
 }
-export { Source, Source1, AltText, Width, Height, FlyoutInverted, DropdownInverted, Floating, Inverted, HeaderProps, Logo };
+export { Source, Source1, AltText, Width, Height, FlyoutInverted, Floating, Inverted, HeaderProps, Logo };

package/dist/{SectionProps-03ff6d21.d.ts → SectionProps-83d399b4.d.ts}

@@ -8,7 +8,7 @@ import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-b05859d6.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-cf82a16d.js";
-import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
+import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogOverviewProps } from "../../BlogOverviewProps-525f7f9f.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-f385fc47.js";
 declare const BlogOverview: {
     ({ latest, more }: BlogOverviewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-f9a49428.js";
+import { BlogPostProps } from "../../BlogPostProps-440f88a5.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export { BlogPost };

package/dist/components/blog-post/index.js

@@ -19,7 +19,7 @@ import '@kickstartds/base/lib/button';
 import '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), children || jsx(Text, { text: content })] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Section, { children: jsx(Cta, { ...cta }) }))] }));
+const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Section, { content: { mode: "list" }, children: jsx(Cta, { ...cta }) }))] }));
 BlogPost.displayName = "BlogPost";
 
 export { BlogPost };

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

@@ -77,28 +77,6 @@
           },
           "active": {
             "type": "boolean"
-          },
-          "items": {
-            "type": "array",
-            "items": {
-              "type": "object",
-              "properties": {
-                "href": {
-                  "type": "string",
-                  "format": "uri"
-                },
-                "id": {
-                  "type": "string"
-                },
-                "label": {
-                  "type": "string"
-                },
-                "active": {
-                  "type": "boolean"
-                }
-              },
-              "additionalProperties": false
-            }
           }
         },
         "additionalProperties": false,
@@ -110,7 +88,7 @@
       "examples": [
         [
           {
-            "label": "Navigation Item",
+            "label": "Nav Item",
             "href": "#"
           },
           {
@@ -119,20 +97,8 @@
             "active": true
           },
           {
-            "label": "Item With Children",
-            "href": "#",
-            "items": [
-              {
-                "label": "Level 2 Item",
-                "href": "#",
-                "id": ""
-              },
-              {
-                "label": "Another One",
-                "href": "#",
-                "id": ""
-              }
-            ]
+            "label": "Another Item",
+            "href": "#"
           },
           {
             "label": "One more Item",

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

@@ -1,4 +1,4 @@
 import { FC } from "react";
-import { FooterProps } from "../../FooterProps-22e0307b.js";
+import { FooterProps } from "../../FooterProps-10c950a6.js";
 declare const Footer: FC<FooterProps>;
 export { Footer };

package/dist/components/header/header.css

@@ -1,6 +1,4 @@
-:root,
-[ks-theme],
-[ks-inverted] {
+:root, [ks-inverted], [ks-theme] {
   --dsa-header--spacing-vertical: var(--ks-spacing-stack-m);
   --dsa-header--spacing-horizontal: var(--l-section--content-padding);
 }

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

@@ -2,7 +2,6 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "$id": "http://schema.mydesignsystem.com/header.schema.json",
   "title": "Header",
-  "description": "Header layered on top by the CMS",
   "type": "object",
   "properties": {
     "logo": {
@@ -58,12 +57,6 @@
       "description": "Toggle the inversion of the flyout navigation",
       "default": false
     },
-    "dropdownInverted": {
-      "type": "boolean",
-      "title": "Dropdown Inverted",
-      "description": "Toggle the inversion of the dropdown navigation",
-      "default": false
-    },
     "floating": {
       "type": "boolean",
       "title": "Floating",
@@ -90,28 +83,6 @@
           },
           "active": {
             "type": "boolean"
-          },
-          "items": {
-            "type": "array",
-            "items": {
-              "type": "object",
-              "properties": {
-                "href": {
-                  "type": "string",
-                  "format": "uri"
-                },
-                "id": {
-                  "type": "string"
-                },
-                "label": {
-                  "type": "string"
-                },
-                "active": {
-                  "type": "boolean"
-                }
-              },
-              "additionalProperties": false
-            }
           }
         },
         "additionalProperties": false,
@@ -123,7 +94,7 @@
       "examples": [
         [
           {
-            "label": "Navigation Item",
+            "label": "Nav Item",
             "href": "#"
           },
           {
@@ -132,20 +103,8 @@
             "active": true
           },
           {
-            "label": "Item With Children",
-            "href": "#",
-            "items": [
-              {
-                "label": "Level 2 Item",
-                "href": "#",
-                "id": ""
-              },
-              {
-                "label": "Another One",
-                "href": "#",
-                "id": ""
-              }
-            ]
+            "label": "Another Item",
+            "href": "#"
           },
           {
             "label": "One more Item",
@@ -162,5 +121,8 @@
       "const": "header"
     }
   },
-  "additionalProperties": false
+  "additionalProperties": false,
+  "required": [
+    "logo"
+  ]
 }

package/dist/components/header/header.schema.json

@@ -2,7 +2,6 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "$id": "http://schema.mydesignsystem.com/header.schema.json",
   "title": "Header",
-  "description": "Header layered on top by the CMS",
   "type": "object",
   "properties": {
     "logo": {
@@ -32,9 +31,6 @@
     "flyoutInverted": {
       "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/flyoutInverted"
     },
-    "dropdownInverted": {
-      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/dropdownInverted"
-    },
     "floating": {
       "type": "boolean",
       "title": "Floating",
@@ -50,5 +46,7 @@
     "navItems": {
       "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/items"
     }
-  }
+  },
+  "additionalProperties": false,
+  "required": ["logo"]
 }

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

@@ -1,4 +1,4 @@
 import { FC } from "react";
-import { HeaderProps } from "../../HeaderProps-dd2071a8.js";
+import { HeaderProps } from "../../HeaderProps-7be94a61.js";
 declare const Header: FC<HeaderProps>;
 export { Header };

package/dist/components/header/index.js

@@ -3,20 +3,16 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { NavMain } from '../nav-main/index.js';
 import { Logo } from '../logo/index.js';
-import '../nav/js/NavToggle.client.js';
+import 'react';
+import '@kickstartds/base/lib/link';
+import '../nav-main/js/NavToggle.client.js';
 import '@kickstartds/core/lib/component';
-import '../nav/js/navMainEvents.client.js';
+import '../nav-main/js/navMainEvents.client.js';
 import '@kickstartds/core/lib/core';
-import '../nav/js/body.client.js';
-import '../nav-toggle/index.js';
-import '../nav-topbar/index.js';
-import '@kickstartds/base/lib/link';
-import '@kickstartds/base/lib/icon';
-import '../nav-dropdown/index.js';
-import '../nav-flyout/index.js';
+import '../nav-main/js/body.client.js';
 import '@kickstartds/base/lib/picture';
 
-const Header = ({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "dsa-header__content", children: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, dropdownInverted: dropdownInverted, items: navItems, logo: {
+const Header = ({ logo, floating, inverted = false, flyoutInverted = false, navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "dsa-header__content", children: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, items: navItems, logo: {
                         ...logo,
                         inverted: flyoutInverted,
                     } })] }) }) }));

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.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/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-03ff6d21.js";
+import { SectionProps } from "../../SectionProps-83d399b4.js";
 import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
 /* eslint-disable */
 /**
@@ -12,8 +12,8 @@ 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-dd2071a8.js";
-import { FooterProps } from "../../FooterProps-22e0307b.js";
+import { HeaderProps } from "../../HeaderProps-7be94a61.js";
+import { FooterProps } from "../../FooterProps-10c950a6.js";
 /**
  * Collection of sections (with their contents) to render on the page
  */
@@ -72,6 +72,6 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-f9a49428.js";
-export * from "../../BlogOverviewProps-525f7f9f.js";
+export * from "../../BlogPostProps-440f88a5.js";
+export * from "../../BlogOverviewProps-f385fc47.js";
 export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };

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

@@ -10,49 +10,23 @@ import { LogoProps } from "../../LogoProps-01796f0a.js";
  * Toggle the inversion of the flyout navigation
  */
 type FlyoutInverted = boolean;
-/**
- * Toggle the inversion of the dropdown navigation
- */
-type DropdownInverted = boolean;
-/**
- * Toggle the CTA
- */
-type ToggleCTA = boolean;
-/**
- * Text content to display inside the button
- */
-type Label = string;
-/**
- * Target that should be linked, makes the button behave like a link semantically
- */
-type Target = string;
 interface NavMainProps {
     /**
      * Referenced component LogoProps
      */
     logo: LogoProps;
     flyoutInverted?: FlyoutInverted;
-    dropdownInverted?: DropdownInverted;
     items?: {
         href: string;
         label: string;
         active?: boolean;
-        items?: {
-            href?: string;
-            id?: string;
-            label?: string;
-            active?: boolean;
-        }[];
     }[];
-    cta?: CTA;
-}
-/**
- * Add a CTA to the Navigation
- */
-interface CTA {
-    toggle?: ToggleCTA;
-    label?: Label;
-    target?: Target;
 }
+declare const NavToggleComponent: FC;
+declare const NavMainItem: FC<{
+    label: string;
+    href: string;
+    active: boolean;
+}>;
 declare const NavMain: FC<NavMainProps>;
-export { NavMain };
+export { NavToggleComponent, NavMainItem, NavMain };

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

@@ -1,19 +1,19 @@
+import "./nav-main.css";
+import "./nav-toggle.css";
+import { createElement } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '../nav/js/NavToggle.client.js';
-import '../nav/js/navMainEvents.client.js';
-import { NavToggleComponent } from '../nav-toggle/index.js';
-import { NavTopbar } from '../nav-topbar/index.js';
-import { NavFlyout } from '../nav-flyout/index.js';
+import classnames from 'classnames';
+import { Link } from '@kickstartds/base/lib/link';
+import { Logo } from '../logo/index.js';
+import './js/NavToggle.client.js';
+import './js/navMainEvents.client.js';
+import '@kickstartds/base/lib/picture';
 import '@kickstartds/core/lib/component';
-import '../nav/js/body.client.js';
+import './js/body.client.js';
 import '@kickstartds/core/lib/core';
-import 'classnames';
-import '@kickstartds/base/lib/link';
-import '@kickstartds/base/lib/icon';
-import '../nav-dropdown/index.js';
-import '../logo/index.js';
-import '@kickstartds/base/lib/picture';
 
-const NavMain = ({ logo, items, flyoutInverted, dropdownInverted, }) => items && items.length > 0 ? (jsxs("div", { className: "dsa-nav-main", children: [jsx(NavToggleComponent, {}), jsx(NavTopbar, { items: items, dropdownInverted: dropdownInverted, active: undefined }), jsx(NavFlyout, { items: items, active: undefined, inverted: flyoutInverted, logo: logo })] })) : null;
+const NavToggleComponent = () => (jsxs("button", { type: "button", className: "dsa-nav-toggle", id: "toggle-sidebar", "aria-controls": "nav-main", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "dsa-nav-toggle__label", children: "toggle navigation" }), jsx("span", { className: "dsa-nav-toggle__icon", children: jsx("span", { className: "dsa-nav-toggle__icon__middle" }) })] }));
+const NavMainItem = ({ label, href, active }) => (jsx("li", { className: classnames("dsa-nav-main__item", active === true ? "dsa-nav-main__item--active" : ""), children: jsx(Link, { className: "dsa-nav-main__link", href: href, children: label }) }));
+const NavMain = ({ logo, items, flyoutInverted }) => items && items.length > 0 ? (jsxs("div", { className: "dsa-nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { "ks-inverted": flyoutInverted.toString(), className: classnames("dsa-nav-main", "dsa-nav-main--flyout", items.some((item) => item.active) ? "dsa-nav-main--active" : ""), id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: [jsx(Logo, { ...logo, className: "dsa-nav-main__logo" }), jsx("ul", { className: "dsa-nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] }), jsxs("nav", { className: classnames("dsa-nav-main", "dsa-nav-main--topbar", items.some((item) => item.active) ? "dsa-nav-main--active" : ""), id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: [jsx(Logo, { ...logo, className: "dsa-nav-main__logo" }), jsx("ul", { className: "dsa-nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] })] })) : null;
 
-export { NavMain };
+export { NavMain, NavMainItem, NavToggleComponent };

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

@@ -0,0 +1,194 @@
+.dsa-nav-main {
+  --dsa-nav-main--background: linear-gradient(
+    125deg,
+    var(--ks-background-color-default),
+    var(--ks-color-primary-to-bg-6)
+  );
+  --dsa-nav-main__link--color: var(--ks-color-fg);
+  --dsa-nav-main__link--opacity_hover: 0.6;
+  --dsa-nav-main__link--color_active: var(--ks-text-color-interface-interactive-active);
+  --dsa-nav-main__link--font: var(--ks-font-interface-l);
+  --dsa-nav-main__link--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-nav-main__link--font-weight_active: var(--ks-font-weight-semi-bold);
+  --dsa-nav-main_floating__link--color: var(--ks-color-fg);
+  --dsa-nav-main_floating__link--color_active: var(--ks-color-fg);
+  --dsa-nav-main_floating__link--opacity_hover: 0.6;
+  --dsa-nav-main__link--padding: 0.35em 0;
+  --dsa-nav-main--shadow: 50px 0px 50px 50px rgba(0, 0, 0, 0.539);
+}
+@media (min-width: 62em) {
+  .dsa-nav-main {
+    --dsa-nav-main__link--padding: 0 0.75em;
+    --dsa-nav-main__link--font: var(--ks-font-interface-m);
+  }
+}
+
+.dsa-nav-main {
+  --g-link--text-decoration: none;
+  --g-link--text-decoration_hover: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.dsa-nav-main--active .dsa-nav-main__item .dsa-nav-main__link {
+  color: var(--dsa-nav-main__link--color);
+}
+.dsa-nav-main--active .dsa-nav-main__item--active .dsa-nav-main__link {
+  color: var(--dsa-nav-main__link--color_active);
+  font-weight: var(--dsa-nav-main__link--font-weight_active);
+}
+.dsa-nav-main ul {
+  /* critical:start */
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  /* critical:end */
+}
+.dsa-nav-main ul li {
+  display: block;
+  margin: 0;
+}
+.dsa-nav-main__item {
+  position: relative;
+}
+.dsa-nav-main__list:hover .dsa-nav-main__link {
+  opacity: var(--dsa-nav-main__link--opacity_hover);
+}
+.dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link {
+  /* critical:start */
+  font: var(--dsa-nav-main__link--font);
+  font-weight: var(--dsa-nav-main__link--font-weight);
+  color: var(--dsa-nav-main__link--color);
+  position: relative;
+  display: block;
+  padding: var(--dsa-nav-main__link--padding);
+  /* critical:end */
+}
+.dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link:hover {
+  opacity: 1;
+  color: var(--dsa-nav-main__link--color_active);
+}
+.dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link:active {
+  color: var(--dsa-nav-main__link--color_active);
+}
+.dsa-nav-main__logo {
+  padding: var(--dsa-header--spacing-v) 0;
+}
+.dsa-nav-main__wrap {
+  flex-grow: 0;
+  flex-shrink: 1;
+}
+.dsa-nav-main.dsa-nav-main--flyout {
+  display: none;
+}
+@media (max-width: 62em) {
+  .dsa-nav-main.dsa-nav-main--flyout {
+    display: block;
+    /* critical:start */
+    left: -100%;
+    /* critical:end */
+    height: 100vh;
+    overflow: hidden;
+    position: fixed;
+    width: 77vw;
+    max-width: 23rem;
+    transition: all var(--ks-duration-slow);
+    padding: 0 var(--l-section--content-padding);
+    right: 0;
+    bottom: 0;
+    top: 0;
+    overflow-y: auto;
+    background: var(--dsa-nav-main--background);
+    backface-visibility: hidden;
+    -webkit-overflow-scrolling: touch;
+    box-shadow: 20px 0px 30px rgba(0, 0, 0, 0);
+  }
+  .dsa-nav-main.dsa-nav-main--flyout__item--icon {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(100%);
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+  .overlay-open .dsa-nav-main.dsa-nav-main--flyout {
+    left: 0;
+    box-shadow: var(--dsa-nav-main--shadow);
+  }
+  .dsa-nav-main.dsa-nav-main--flyout > .dsa-nav-main__logo {
+    margin-top: var(--dsa-header--spacing-vertical);
+    margin-bottom: var(--dsa-header--spacing-vertical);
+  }
+  .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list {
+    padding-top: calc(var(--dsa-header--spacing-vertical) - var(--ks-spacing-s));
+  }
+  .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list .dsa-nav-main--button {
+    margin-left: var(--dsa-header--spacing-horizontal);
+    margin-top: var(--dsa-header--spacing-vertical);
+  }
+  .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list .dsa-nav-main--button .button {
+    --button--font: var(--ks-font-interface-s);
+  }
+  .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list .dsa-nav-main--button .button .button__content {
+    --button--padding: 0.4rem 1rem;
+  }
+}
+.dsa-nav-main.dsa-nav-main--topbar {
+  display: none;
+}
+@media (min-width: 62em) {
+  .dsa-nav-main.dsa-nav-main--topbar {
+    display: block;
+    /* critical:start */
+    /* critical:end */
+  }
+  .dsa-nav-main.dsa-nav-main--topbar > .dsa-nav-main__logo {
+    display: none;
+  }
+  .dsa-nav-main.dsa-nav-main--topbar .button--wrapper {
+    margin-left: var(--ks-spacing-inline-xs);
+  }
+  .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__wrap {
+    display: flex;
+    align-items: center;
+  }
+  .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list {
+    /* critical:start */
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    /* critical:end */
+  }
+  .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list .dsa-nav-main--button .button {
+    --button--font: var(--ks-font-interface-s);
+  }
+  .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list .dsa-nav-main--button .button span {
+    font-size: 98%;
+  }
+  .dsa-header--floating .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list:hover .dsa-nav-main__link {
+    opacity: var(--dsa-nav-main_floating__link--opacity_hover);
+  }
+  .dsa-header--floating .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list:hover .dsa-nav-main__link:hover {
+    opacity: 1;
+  }
+  .dsa-nav-main.dsa-nav-main--topbar.dsa-nav-main__item {
+    /* critical:start */
+    flex-shrink: 0;
+    /* critical:end */
+    outline: 0;
+  }
+  .dsa-header--floating .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__link {
+    color: var(--dsa-nav-main_floating__link--color);
+  }
+  .dsa-header--floating .dsa-nav-main.dsa-nav-main--topbar.dsa-nav-main--active .dsa-nav-main__link {
+    color: var(--dsa-nav-main_floating__link--color_active);
+  }
+}
+
+.dsa-nav-main-toggle[aria-expanded=true] + .dsa-nav-main {
+  display: block;
+}