@kickstartds/ds-agency-premium 1.3.23--canary.511.bf9d328.0 → 1.3.24

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

@@ -1,4 +1,4 @@
-.nav-toggle {
+.dsa-nav-toggle {
   --nav-toggle--color: var(--ks-text-color-default);
   --nav-toggle--color_open: var(--ks-text-color-default);
   --nav-toggle_floating--color: var(--ks-text-color-interface-interactive);
@@ -9,7 +9,7 @@ html.overlay-open {
   overflow: hidden;
 }
 
-button.nav-toggle {
+button.dsa-nav-toggle {
   display: block;
   position: relative;
   right: 0;
@@ -21,16 +21,16 @@ button.nav-toggle {
   --nav-toggle__icon-bar--offset: 14px;
 }
 @media (min-width: 42em) {
-  button.nav-toggle {
+  button.dsa-nav-toggle {
     --nav-toggle__icon-bar--offset: 18px;
   }
 }
 @media (min-width: 62em) {
-  button.nav-toggle {
+  button.dsa-nav-toggle {
     display: none;
   }
 }
-button.nav-toggle .nav-toggle__label {
+button.dsa-nav-toggle .dsa-nav-toggle__label {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(100%);
@@ -41,7 +41,7 @@ button.nav-toggle .nav-toggle__label {
   white-space: nowrap;
   width: 1px;
 }
-button.nav-toggle .nav-toggle__icon {
+button.dsa-nav-toggle .dsa-nav-toggle__icon {
   position: relative;
   display: block;
   cursor: pointer;
@@ -51,53 +51,53 @@ button.nav-toggle .nav-toggle__icon {
   transition: inherit;
   color: var(--nav-toggle--color);
 }
-.dsa-header--floating button.nav-toggle .nav-toggle__icon {
+.dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle_floating--color);
 }
 @media (min-width: 40rem) {
-  button.nav-toggle .nav-toggle__icon {
+  button.dsa-nav-toggle .dsa-nav-toggle__icon {
     transform: scale(0.8) translate(2.5%, 2.5%);
   }
 }
-.overlay-open button.nav-toggle .nav-toggle__icon, .overlay-open .header-is-scrolling button.nav-toggle .nav-toggle__icon {
+.overlay-open button.dsa-nav-toggle .dsa-nav-toggle__icon, .overlay-open .header-is-scrolling button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle--color_open);
 }
-.overlay-open .dsa-header--floating button.nav-toggle .nav-toggle__icon, .overlay-open .header-is-scrolling .dsa-header--floating button.nav-toggle .nav-toggle__icon {
+.overlay-open .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon, .overlay-open .header-is-scrolling .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle_floating--color_open);
 }
-.header-is-scrolling-up button.nav-toggle .nav-toggle__icon {
+.header-is-scrolling-up button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle--color_open);
 }
-button.nav-toggle .nav-toggle__icon::before, button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::before, button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   content: "";
 }
-button.nav-toggle .nav-toggle__icon .nav-toggle__icon__middle, button.nav-toggle .nav-toggle__icon::before, button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon .dsa-nav-toggle__icon__middle, button.dsa-nav-toggle .dsa-nav-toggle__icon::before, button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   position: absolute;
   width: 100%;
   height: 3px;
   background-color: currentColor;
 }
-button.nav-toggle .nav-toggle__icon .nav-toggle__icon__middle {
+button.dsa-nav-toggle .dsa-nav-toggle__icon .dsa-nav-toggle__icon__middle {
   top: 50%;
   margin-top: -1.5px;
 }
-button.nav-toggle .nav-toggle__icon::before {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::before {
   top: 2px;
   transition: top 150ms ease 150ms, transform ease 150ms;
 }
-button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   bottom: 2px;
   transition: bottom 150ms ease 150ms, transform ease 150ms;
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon__middle {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon__middle {
   display: none;
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon::before {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon::before {
   top: var(--nav-toggle__icon-bar--offset);
   transition: top ease 150ms, transform 150ms ease 150ms;
   transform: rotate(-45deg);
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon::after {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon::after {
   bottom: var(--nav-toggle__icon-bar--offset);
   transition: bottom ease 150ms, transform 150ms ease 150ms;
   transform: rotate(45deg);

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 Jul 2024 06:56:53 GMT
+ * Generated on Tue, 30 Jul 2024 08:06:46 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/components/presets.json

@@ -1380,6 +1380,7 @@
         "lazy": false
       },
       "logoHref": "/",
+      "flyoutLogoInverted": false,
       "floating": false,
       "inverted": false,
       "navItems": [

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
 import { SectionProps } from "../../SectionProps-93230a76.js";
-declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Section: import("react").ForwardRefExoticComponent<SectionProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionProvider: FC<PropsWithChildren<any>>;
-export { Section, SectionProvider };
+export { SectionContextDefault, SectionContext, Section, SectionProvider };

package/dist/components/section/index.js

@@ -1,13 +1,13 @@
 import "./section.css";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { useKsComponent } from '@kickstartds/core/lib/react';
-import { SectionContextDefault, SectionContext } from '@kickstartds/base/lib/section';
+import { SectionContextDefault as SectionContextDefault$1, SectionContext as SectionContext$1 } from '@kickstartds/base/lib/section';
 import { identifier } from './js/Section.client.js';
 import '@kickstartds/core/lib/component';
 
-const Section = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
+const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
     const { large: headlineLarge = false, ...headlineRest } = {
         align: "left",
         ...headline,
@@ -16,7 +16,7 @@ const Section = forwardRef(({ headline, content, headerSpacing, width = "default
         spotlight,
         content?.mode === "slider",
     ]);
-    return (jsx(SectionContextDefault, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
+    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
             `dsa-section-style--${style === "verticalGradient"
                 ? "vertical-gradient"
                 : style === "horizontalGradient"
@@ -42,7 +42,12 @@ const Section = forwardRef(({ headline, content, headerSpacing, width = "default
             items: buttons,
         }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: inverted, ref: ref, children: props.children }));
 });
+const SectionContext = createContext(SectionContextDefault);
+const Section = forwardRef((props, ref) => {
+    const Component = useContext(SectionContext);
+    return jsx(Component, { ...props, ref: ref });
+});
 Section.displayName = "Section";
-const SectionProvider = (props) => (jsx(SectionContext.Provider, { ...props, value: Section }));
+const SectionProvider = (props) => (jsx(SectionContext$1.Provider, { ...props, value: Section }));
 
-export { Section, SectionProvider };
+export { Section, SectionContext, SectionContextDefault, SectionProvider };

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

@@ -20,6 +20,13 @@
           "title": "Logo",
           "type": "object",
           "properties": {
+            "href": {
+              "title": "Link",
+              "description": "Add a link to the logo",
+              "type": "string",
+              "format": "uri",
+              "default": "/"
+            },
             "src": {
               "title": "Source",
               "description": "Logo file source",
@@ -69,6 +76,12 @@
           "format": "uri",
           "default": "/"
         },
+        "flyoutLogoInverted": {
+          "type": "boolean",
+          "title": "Flyout Logo Inverted",
+          "description": "Toggle the inversion of the logo inside the mobile navigation",
+          "default": false
+        },
         "floating": {
           "type": "boolean",
           "title": "Floating",