@kickstartds/ds-agency-premium 1.3.31 → 1.3.32--canary.565.63e8986.0

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

@@ -5,31 +5,13 @@
   "type": "object",
   "properties": {
     "logo": {
-      "title": "Logo",
-      "type": "object",
-      "properties": {
-        "src": {
-          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/src"
-        },
-        "srcInverted": {
-          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/srcInverted"
-        },
-        "alt": {
-          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/alt"
-        },
-        "homepageHref": {
-          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/homepageHref"
-        },
-        "width": {
-          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/width"
-        },
-        "height": {
-          "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/height"
-        }
-      }
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logo"
     },
-    "flyoutInverted": {
-      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/flyoutInverted"
+    "logoHref": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logoHref"
+    },
+    "flyoutLogoInverted": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/flyoutLogoInverted"
     },
     "floating": {
       "type": "boolean",

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

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

package/dist/components/header/index.js

@@ -1,21 +1,17 @@
 import "./header.css";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import classnames from 'classnames';
+import { Picture } from '@kickstartds/base/lib/picture';
+import { Link } from '@kickstartds/base/lib/link';
 import { NavMain } from '../nav-main/index.js';
-import { Logo } from '../logo/index.js';
 import 'react';
-import '@kickstartds/base/lib/link';
 import '../nav-main/js/NavToggle.client.js';
 import '@kickstartds/core/lib/component';
 import '../nav-main/js/navMainEvents.client.js';
 import '@kickstartds/core/lib/core';
 import '../nav-main/js/body.client.js';
-import '@kickstartds/base/lib/picture';
 
-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,
-                    } })] }) }) }));
+const Header = ({ logo, logoHref = "/", floating, inverted = false, flyoutLogoInverted = 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: [jsxs(Link, { className: "dsa-header__logo", href: logoHref, children: [jsx(Picture, { className: "dsa-header__logo__img", src: logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: inverted }), jsx(Picture, { className: "dsa-header__logo__img dsa-header__logo__img--inverted", src: logo?.srcInverted || logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: !inverted })] }), jsx(NavMain, { flyoutLogoInverted: flyoutLogoInverted, logo: logo, logoHref: logoHref, items: navItems })] }) }) }));
 Header.displayName = "Header";
 
 export { Header };

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

@@ -51,7 +51,7 @@
     },
     "className": {
       "title": "Additional Classes",
-      "description": "Add additional css classes that should be applied to the image",
+      "description": "Add additional css classes that should be applied to the button",
       "type": "string"
     },
     "style": {

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

@@ -44,7 +44,7 @@
     },
     "className": {
       "title": "Additional Classes",
-      "description": "Add additional css classes that should be applied to the image",
+      "description": "Add additional css classes that should be applied to the button",
       "type": "string"
     },
     "style": {

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

@@ -31,7 +31,7 @@ type Height = number;
  */
 type AspectRatio = "unset" | "square" | "wide" | "landscape";
 /**
- * Add additional css classes that should be applied to the image
+ * Add additional css classes that should be applied to the button
  */
 type AdditionalClasses = string;
 /**

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

@@ -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-7be94a61.js";
-import { FooterProps } from "../../FooterProps-10c950a6.js";
+import { HeaderProps } from "../../HeaderProps-c41aeb76.js";
+import { FooterProps } from "../../FooterProps-9f94ed98.js";
 /**
  * Collection of sections (with their contents) to render on the page
  */
@@ -72,6 +72,6 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-e1cbd5d3.js";
+export * from "../../BlogPostProps-0910f130.js";
 export * from "../../BlogOverviewProps-f385fc47.js";
 export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };

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

@@ -2,61 +2,37 @@
   "$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"
-    },
-    "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",
-      "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,
+      "format": "image",
+      "title": "URL",
+      "description": "The URL of the logo image",
       "examples": [
-        300
+        "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"
       ]
     },
-    "height": {
-      "title": "Height",
-      "description": "Height of the picture",
-      "type": "integer",
-      "minimum": 0,
+    "alt": {
+      "type": "string",
+      "title": "Caption",
+      "description": "The alt text of the logo",
       "examples": [
-        300
+        "Logo 1"
       ]
     },
-    "className": {
-      "title": "Additional Classes",
-      "description": "Add additional css classes that should be applied to the logo",
-      "type": "string"
-    },
     "type": {
       "const": "logo"
     }
   },
-  "additionalProperties": false
+  "additionalProperties": false,
+  "required": [
+    "src"
+  ]
 }

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

@@ -2,54 +2,30 @@
   "$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"
-    },
-    "srcInverted": {
-      "title": "Source",
-      "description": "Picture source",
-      "type": "string",
-      "format": "image"
+      "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": {
-      "title": "Alt text",
-      "description": "Alt text to display for picture",
-      "type": "string"
-    },
-    "homepageHref": {
       "type": "string",
-      "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"
+      "title": "Caption",
+      "description": "The alt text of the logo",
+      "examples": ["Logo 1"]
     }
   },
-  "additionalProperties": false
+  "additionalProperties": false,
+  "required": ["src"]
 }

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { LogosProps } from "../../LogosProps-f9474fe2.js";
+import { LogosProps } from "../../LogosProps-58c84ccc.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: [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 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 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,15 +19,11 @@
   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 {

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

@@ -18,6 +18,8 @@
       "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",
@@ -43,6 +45,9 @@
             "examples": [
               "Logo 1"
             ]
+          },
+          "type": {
+            "const": "logo"
           }
         },
         "additionalProperties": false,

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

@@ -16,33 +16,7 @@
       "title": "Logos",
       "description": "The logos to display",
       "items": {
-        "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"]
+        "$ref": "http://schema.mydesignsystem.com/logo.schema.json"
       },
       "minItems": 1,
       "maxItems": 20

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

@@ -5,23 +5,52 @@ import { FC } from "react";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { LogoProps } from "../../LogoProps-01796f0a.js";
 /**
- * Toggle the inversion of the flyout navigation
+ * Add a link to the logo
  */
-type FlyoutInverted = boolean;
+type Link = string;
+/**
+ * Logo file source
+ */
+type Source = string;
+/**
+ * Logo inverted file source
+ */
+type SourceInverted = string;
+/**
+ * Alt text to display for picture
+ */
+type AltText = string;
+/**
+ * Width of the picture
+ */
+type Width = number;
+/**
+ * Height of the picture
+ */
+type Height = number;
+/**
+ * Toggle the inversion of the logo inside the mobile navigation
+ */
+type FlyoutLogoInverted = boolean;
 interface NavMainProps {
-    /**
-     * Referenced component LogoProps
-     */
-    logo: LogoProps;
-    flyoutInverted?: FlyoutInverted;
+    logo: Logo;
+    logoHref?: string;
+    flyoutLogoInverted?: FlyoutLogoInverted;
     items?: {
         href: string;
         label: string;
         active?: boolean;
     }[];
 }
+interface Logo {
+    href?: Link;
+    src?: Source;
+    srcInverted?: SourceInverted;
+    alt?: AltText;
+    width?: Width;
+    height?: Height;
+}
 declare const NavToggleComponent: FC;
 declare const NavMainItem: FC<{
     label: string;

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

@@ -4,16 +4,15 @@ import { createElement } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { Link } from '@kickstartds/base/lib/link';
-import { Logo } from '../logo/index.js';
+import { Picture } from '@kickstartds/base/lib/picture';
 import './js/NavToggle.client.js';
 import './js/navMainEvents.client.js';
-import '@kickstartds/base/lib/picture';
 import '@kickstartds/core/lib/component';
 import './js/body.client.js';
 import '@kickstartds/core/lib/core';
 
 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;
+const NavMain = ({ logo, items, flyoutLogoInverted, }) => items && items.length > 0 ? (jsxs("div", { className: "dsa-nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { className: classnames("dsa-nav-main", items.some((item) => item.active) ? "dsa-nav-main--active" : ""), id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: [jsxs(Link, { className: "dsa-nav-main__logo", "ks-inverted": flyoutLogoInverted === true ? "true" : "false", href: logo?.href, children: [jsx(Picture, { className: "dsa-nav-main__logo__img", src: logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: flyoutLogoInverted }), jsx(Picture, { className: "dsa-nav-main__logo__img dsa-nav-main__logo__img--inverted", src: logo?.srcInverted || logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: !flyoutLogoInverted })] }), 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, NavMainItem, NavToggleComponent };

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

@@ -31,10 +31,20 @@
 .dsa-nav-main--active .dsa-nav-main__item .dsa-nav-main__link {
   color: var(--dsa-nav-main__link--color);
 }
+@media (min-width: 62rem) {
+  .dsa-header--floating .dsa-nav-main--active .dsa-nav-main__item .dsa-nav-main__link {
+    color: var(--dsa-nav-main_floating__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);
 }
+@media (min-width: 62rem) {
+  .dsa-header--floating .dsa-nav-main--active .dsa-nav-main__item--active .dsa-nav-main__link {
+    color: var(--dsa-nav-main_floating__link--color_active);
+  }
+}
 .dsa-nav-main ul {
   /* critical:start */
   box-sizing: border-box;
@@ -53,6 +63,11 @@
 .dsa-nav-main__list:hover .dsa-nav-main__link {
   opacity: var(--dsa-nav-main__link--opacity_hover);
 }
+@media (min-width: 62rem) {
+  .dsa-header--floating .dsa-nav-main__list:hover .dsa-nav-main__link {
+    opacity: var(--dsa-nav-main_floating__link--opacity_hover);
+  }
+}
 .dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link {
   /* critical:start */
   font: var(--dsa-nav-main__link--font);
@@ -71,18 +86,28 @@
   color: var(--dsa-nav-main__link--color_active);
 }
 .dsa-nav-main__logo {
+  display: block;
   padding: var(--dsa-header--spacing-v) 0;
 }
+.dsa-nav-main__logo__img {
+  height: var(--dsa-header__logo--height);
+  width: auto;
+}
+[ks-inverted=true] .dsa-nav-main__logo__img {
+  display: none;
+}
+.dsa-nav-main__logo__img--inverted {
+  display: none;
+}
+[ks-inverted=true] .dsa-nav-main__logo__img--inverted {
+  display: block !important;
+}
 .dsa-nav-main__wrap {
   flex-grow: 0;
   flex-shrink: 1;
 }
-.dsa-nav-main.dsa-nav-main--flyout {
-  display: none;
-}
 @media (max-width: 62rem) {
-  .dsa-nav-main.dsa-nav-main--flyout {
-    display: block;
+  .dsa-nav-main {
     /* critical:start */
     left: -100%;
     /* critical:end */
@@ -102,7 +127,7 @@
     -webkit-overflow-scrolling: touch;
     box-shadow: 20px 0px 30px rgba(0, 0, 0, 0);
   }
-  .dsa-nav-main.dsa-nav-main--flyout__item--icon {
+  .dsa-nav-main__item--icon {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(100%);
@@ -113,75 +138,62 @@
     white-space: nowrap;
     width: 1px;
   }
-  .overlay-open .dsa-nav-main.dsa-nav-main--flyout {
+  .overlay-open .dsa-nav-main {
     left: 0;
     box-shadow: var(--dsa-nav-main--shadow);
   }
-  .dsa-nav-main.dsa-nav-main--flyout > .dsa-nav-main__logo {
+  .dsa-nav-main > .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 {
+  .dsa-nav-main 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 {
+  .dsa-nav-main 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 {
+  .dsa-nav-main 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 {
+  .dsa-nav-main 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: 62rem) {
-  .dsa-nav-main.dsa-nav-main--topbar {
-    display: block;
+  .dsa-nav-main {
     /* critical:start */
     /* critical:end */
   }
-  .dsa-nav-main.dsa-nav-main--topbar > .dsa-nav-main__logo {
+  .dsa-nav-main > .dsa-nav-main__logo {
     display: none;
   }
-  .dsa-nav-main.dsa-nav-main--topbar .button--wrapper {
+  .dsa-nav-main .button--wrapper {
     margin-left: var(--ks-spacing-inline-xs);
   }
-  .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__wrap {
+  .dsa-nav-main__wrap {
     display: flex;
     align-items: center;
   }
-  .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list {
+  .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 {
+  .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 {
+  .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-nav-main.dsa-nav-main--topbar.dsa-nav-main__item {
+  .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 {