@kickstartds/ds-agency-premium 1.3.48 → 1.3.50--canary.663.b100f6e.0

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

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

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

@@ -27,6 +27,10 @@ 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
  */
@@ -35,15 +39,25 @@ 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 {
@@ -54,4 +68,4 @@ interface Logo {
     width?: Width;
     height?: Height;
 }
-export { Source, Source1, AltText, Width, Height, FlyoutInverted, Floating, Inverted, HeaderProps, Logo };
+export { Source, Source1, AltText, Width, Height, FlyoutInverted, DropdownInverted, Floating, Inverted, HeaderProps, Logo };

package/dist/components/cta/cta.css

@@ -15,27 +15,19 @@
   --dsa-cta_highlight-text__copy--font: var(--ks-font-copy-l);
 }
 
-@media (min-width: 640px) {
-  .dsa-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
-  .dsa-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
-    padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)));
-    z-index: 1;
-  }
-}
-
-.c-storytelling.dsa-cta {
+.dsa-cta.c-storytelling {
   --c-storytelling--padding-ratio: 2;
   --c-storytelling--horizontal-padding: var(--l-section--content-padding);
   justify-content: center;
   align-items: center;
   padding: 0;
 }
-.c-storytelling.dsa-cta--color-neutral {
+.dsa-cta.c-storytelling--color-neutral {
   --dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
   --dsa-cta__headline--color: var(--dsa-cta_color-neutral__headline--color, var(--ks-text-color-default));
   --dsa-cta__subheadline--color: var(--dsa-cta_color-neutral__subheadline--color, var(--ks-text-color-default));
 }
-.c-storytelling.dsa-cta--highlight-text {
+.dsa-cta.c-storytelling--highlight-text {
   --dsa-cta__copy--font: var(--dsa-cta_highlight-text__copy--font, var(--ks-font-copy-l));
   --dsa-cta__headline--font: var(--dsa-cta_highlight-text__headline--font, var(--dsa-headline_h1--font));
   --dsa-cta__subheadline--font: var(
@@ -43,90 +35,98 @@
     var(--dsa-headline_h1__subheadline--font)
   );
 }
-.c-storytelling.dsa-cta.c-storytelling--full {
+.dsa-cta.c-storytelling.c-storytelling--full {
   --c-storytelling--padding-ratio: 1;
 }
-.c-storytelling.dsa-cta.c-storytelling--full.c-storytelling--order-desktop-image-last .c-storytelling__box {
+.dsa-cta.c-storytelling.c-storytelling--full.c-storytelling--order-desktop-image-last .c-storytelling__box {
   padding-left: var(--dsa-cta--horizontal-padding);
 }
-.c-storytelling.dsa-cta.dsa-cta--align-top {
+.dsa-cta.c-storytelling.dsa-cta--align-top {
   align-items: flex-start;
 }
-.c-storytelling.dsa-cta.dsa-cta--align-bottom {
+.dsa-cta.c-storytelling.dsa-cta--align-bottom {
   align-items: flex-end;
 }
-.c-storytelling.dsa-cta.dsa-cta--highlight-text .c-storytelling__text {
+.dsa-cta.c-storytelling.dsa-cta--highlight-text .c-storytelling__text {
   font: var(--ks-font-copy-l);
   color: var(--ks-color-fg);
 }
-.c-storytelling.dsa-cta .c-storytelling__box {
+.dsa-cta.c-storytelling .c-storytelling__box {
   width: 100%;
   padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
 }
 @container storytelling (max-width: 640px) {
-  .c-storytelling.dsa-cta .c-storytelling__box {
+  .dsa-cta.c-storytelling .c-storytelling__box {
     padding-top: calc(var(--dsa-cta--vertical-padding, var(--l-section--space-default)) / var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta .c-storytelling__box:only-child {
+  .dsa-cta.c-storytelling .c-storytelling__box:only-child {
     padding-top: var(--dsa-cta--vertical-padding, var(--l-section--space-default));
   }
 }
-.c-storytelling.dsa-cta .c-storytelling__box:only-child {
+.dsa-cta.c-storytelling .c-storytelling__box:only-child {
   padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
 }
-.c-storytelling.dsa-cta .c-storytelling__box__content {
+.dsa-cta.c-storytelling .c-storytelling__box__content {
   max-width: 100%;
 }
-.c-storytelling.dsa-cta .c-storytelling__box .dsa-headline__headline {
+.dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__headline {
   font: var(--dsa-cta__headline--font, var(--dsa-headline_h2--font, var(--ks-font-display-xl)));
   color: var(--dsa-cta__headline--color, var(--ks-text-color-display));
   font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
 }
-.c-storytelling.dsa-cta .c-storytelling__box .dsa-headline__subheadline {
+.dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__subheadline {
   font: var(--dsa-cta__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
   color: var(--dsa-cta__subheadline--color, var(--ks-text-color-primary));
   font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
 }
-.c-storytelling.dsa-cta .c-storytelling__box .c-rich-text {
+.dsa-cta.c-storytelling .c-storytelling__box .c-rich-text {
   font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
   color: var(--dsa-cta__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
 }
-.c-storytelling.dsa-cta .c-storytelling__box:only-child {
+.dsa-cta.c-storytelling .c-storytelling__box:only-child {
   --dsa-cta--horizontal-padding: var(--l-section--content-padding);
 }
-.c-storytelling.dsa-cta .c-storytelling__image {
+.dsa-cta.c-storytelling .c-storytelling__image {
   margin: 0;
 }
 @container storytelling (min-width: 640px) {
-  .c-storytelling.dsa-cta.c-storytelling--order-desktop-image-last .c-storytelling__image {
+  .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__image {
     padding-left: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta.c-storytelling--order-desktop-image-last .c-storytelling__box {
+  .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__box {
     padding-right: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta .c-storytelling__box {
+  .dsa-cta.c-storytelling .c-storytelling__box {
     padding-left: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta .c-storytelling__box__content--center .c-button-group {
+  .dsa-cta.c-storytelling .c-storytelling__box__content--center .c-button-group {
     justify-content: center;
   }
-  .c-storytelling.dsa-cta .c-storytelling__box:only-child {
+  .dsa-cta.c-storytelling .c-storytelling__box:only-child {
     width: 100%;
     max-width: calc(var(--l-section--content-width-default) - var(--l-section--content-padding) * var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta > .c-storytelling__image {
+  .dsa-cta.c-storytelling > .c-storytelling__image {
     padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
     padding-right: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
   }
-  .c-storytelling.dsa-cta.c-storytelling--full > .c-storytelling__image {
+  .dsa-cta.c-storytelling.c-storytelling--full > .c-storytelling__image {
     padding: 0;
   }
-  .c-storytelling.dsa-cta > .c-storytelling__image,
-  .c-storytelling.dsa-cta > .c-storytelling__box {
+  .dsa-cta.c-storytelling > .c-storytelling__image,
+  .dsa-cta.c-storytelling > .c-storytelling__box {
     max-width: calc(var(--l-section--content-width-wide) / 2);
   }
-  .c-storytelling.dsa-cta.dsa-cta--full-width > .c-storytelling__image,
-  .c-storytelling.dsa-cta.dsa-cta--full-width > .c-storytelling__box {
+  .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__image,
+  .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__box {
     max-width: 100%;
   }
+}
+
+@media (min-width: 640px) {
+  .dsa-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
+  .dsa-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
+    padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)));
+    z-index: 1;
+  }
 }

package/dist/components/feature/index.js

@@ -6,17 +6,17 @@ import { Button } from '../button/index.js';
 import { Link } from '@kickstartds/base/lib/link';
 import '@kickstartds/base/lib/button';
 
-const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon, cta: { toggle = true, style: ctaStyle = "link", target, label = "Read more", }, ...rest }, ref) => (jsxs("div", { ...rest, ref: ref, className: classnames(`c-feature c-feature--${style === `stack`
-        ? `stack c-feature--large`
+const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon, cta: { toggle = true, style: ctaStyle = "link", target, label = "Read more", }, ...rest }, ref) => (jsxs("div", { ...rest, ref: ref, className: classnames(`dsa-feature dsa-feature--${style === `stack`
+        ? `stack dsa-feature--large`
         : style === `besideSmall`
-            ? `beside c-feature--small`
+            ? `beside dsa-feature--small`
             : style === `besideLarge`
-                ? `beside c-feature--large`
+                ? `beside dsa-feature--large`
                 : style === `intext`
-                    ? `intext c-feature--small`
+                    ? `intext dsa-feature--small`
                     : style === `centered`
-                        ? `centered c-feature--large`
-                        : `${style}`}`), children: [jsxs("div", { className: "c-feature__header", children: [icon && jsx(Icon, { className: "c-feature__icon", icon: icon }), jsx("span", { className: "c-feature__title", children: title })] }), text || ctaStyle === "intext" ? (jsxs("p", { className: "c-feature__text", children: [text, ctaStyle === "intext" && toggle ? (jsxs(Fragment, { children: ["  ", jsx(Link, { href: target, children: label ? label : "See more" })] })) : ("")] })) : (""), toggle && (ctaStyle === "link" || ctaStyle === "button") && (jsx("div", { className: "c-feature__cta", children: ctaStyle === "link" ? (jsxs(Link, { className: "c-feature__link", href: target, children: [label ? label : "See more", jsx(Icon, { icon: "arrow-right" })] })) : ctaStyle === "button" ? (jsx(Button, { className: "c-feature__button", size: "small", target: target, label: label ? label : "See more" })) : ("") }))] })));
+                        ? `centered dsa-feature--large`
+                        : `${style}`}`), children: [jsxs("div", { className: "dsa-feature__header", children: [icon && jsx(Icon, { className: "dsa-feature__icon", icon: icon }), jsx("span", { className: "dsa-feature__title", children: title })] }), text || ctaStyle === "intext" ? (jsxs("p", { className: "dsa-feature__text", children: [text, ctaStyle === "intext" && toggle ? (jsxs(Fragment, { children: ["  ", jsx(Link, { href: target, children: label ? label : "See more" })] })) : ("")] })) : (""), toggle && (ctaStyle === "link" || ctaStyle === "button") && (jsx("div", { className: "dsa-feature__cta", children: ctaStyle === "link" ? (jsxs(Link, { className: "dsa-feature__link", href: target, children: [label ? label : "See more", jsx(Icon, { icon: "arrow-right" })] })) : ctaStyle === "button" ? (jsx(Button, { className: "dsa-feature__button", size: "small", target: target, label: label ? label : "See more" })) : ("") }))] })));
 const FeatureContext = createContext(FeatureContextDefault);
 const Feature = forwardRef((props, ref) => {
     const Component = useContext(FeatureContext);

package/dist/components/features/features.css

@@ -1,4 +1,4 @@
-.c-features {
+.dsa-features {
   --dsa-features--gap-vertical: var(--ks-spacing-stack-l);
   --dsa-features--gap-horizontal: var(--ks-spacing-inline-m);
   --dsa-feature__title--color: var(--dsa-topic--color);
@@ -8,9 +8,7 @@
   --dsa-feature__copy--font: var(--ks-font-copy-s);
   --dsa-feature__link-font: var(--ks-font-copy-s);
   --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_small__icon--size: calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m));
   --dsa-feature_large__icon--size: calc(var(--ks-font-size-copy-m) * 2.5);
   --dsa-feature_small--gap: var(--ks-spacing-stack-xs);
   --dsa-feature_large--gap: var(--ks-spacing-stack-s);
@@ -18,42 +16,42 @@
   --dsa-feature_large__icon--gap: var(--ks-spacing-s);
 }
 
-.c-features {
+.dsa-features {
   gap: var(--dsa-features--gap-vertical, var(--ks-spacing-stack-l)) var(--dsa-features--gap-horizontal, var(--ks-spacing-inline-m));
 }
-.c-features--list {
+.dsa-features--list {
   display: flex;
   flex-direction: column;
   gap: var(--dsa-features--gap-vertical);
 }
-.c-features--large-tiles {
+.dsa-features--large-tiles {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 }
-.c-features--large-tiles .c-feature {
+.dsa-features--large-tiles .dsa-feature {
   flex-basis: 300px;
   flex-grow: 1;
   flex-shrink: 0;
 }
-.c-features--small-tiles {
+.dsa-features--small-tiles {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }
-.l-section--align-center .c-features--small-tiles {
+.l-section--align-center .dsa-features--small-tiles {
   justify-content: center;
 }
-.c-features .c-feature {
+.dsa-features .dsa-feature {
   display: flex;
   position: relative;
   flex-direction: column;
   gap: var(--dsa-feature--gap);
 }
-.c-features .c-feature--large {
+.dsa-features .dsa-feature--large {
   --dsa-feature__icon--size: var(--dsa-feature_large__icon--size, calc(var(--ks-font-size-copy-m) * 2.5));
   --dsa-feature__icon--gap: var(--dsa-feature_large__icon--gap, var(--ks-spacing-xs));
   --dsa-feature--gap: var(--dsa-feature_large--gap, var(--ks-spacing-stack-s));
 }
-.c-features .c-feature--small {
+.dsa-features .dsa-feature--small {
   --dsa-feature__icon--size: var(
     --dsa-feature_small__icon--size,
     calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m))
@@ -61,67 +59,67 @@
   --dsa-feature__icon--gap: var(--dsa-feature_small__icon--gap, var(--ks-spacing-xs));
   --dsa-feature--gap: var(--dsa-feature_small--gap, var(--ks-spacing-stack-xs));
 }
-.c-features .c-feature--beside {
+.dsa-features .dsa-feature--beside {
   padding-left: calc(var(--dsa-feature__icon--size) + var(--dsa-feature__icon--gap));
 }
-.c-features .c-feature--beside .c-feature__icon {
+.dsa-features .dsa-feature--beside .dsa-feature__icon {
   position: absolute;
   top: 0;
   left: 0;
 }
-.c-features .c-feature--stack .c-feature__header {
+.dsa-features .dsa-feature--stack .dsa-feature__header {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
-.c-features .c-feature--centered .c-feature__header {
+.dsa-features .dsa-feature--centered .dsa-feature__header {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.c-features .c-feature--centered .c-feature__title,
-.c-features .c-feature--centered .c-feature__text {
+.dsa-features .dsa-feature--centered .dsa-feature__title,
+.dsa-features .dsa-feature--centered .dsa-feature__text {
   text-align: center;
 }
-.c-features .c-feature--centered .c-feature__cta {
+.dsa-features .dsa-feature--centered .dsa-feature__cta {
   display: flex;
   justify-content: center;
 }
-.c-features .c-feature__header {
+.dsa-features .dsa-feature__header {
   display: flex;
   align-items: center;
   gap: var(--dsa-feature__icon--gap);
 }
-.c-features .c-feature__title {
+.dsa-features .dsa-feature__title {
   font: var(--dsa-feature__title--font, var(--ks-font-interface-m));
   color: var(--dsa-feature__title--color, var(--ks-topic-color));
   font-family: var(--dsa-feature__title--font-family, var(--ks-font-family-display));
   font-weight: var(--dsa-feature__title--font-weight, var(--ks-font-weight-semi-bold));
 }
-.c-features .c-feature__text {
+.dsa-features .dsa-feature__text {
   color: var(--dsa-feature__copy--color, var(--dsa-rich-text-color), var(--ks-text-color-default));
   font: var(--dsa-feature__copy--font, var(--ks-font-copy-s));
   margin: 0;
 }
-.c-features .c-feature__icon {
+.dsa-features .dsa-feature__icon {
   color: var(--dsa-feature__icon--color, var(--ks-text-color-primary));
   width: var(--dsa-feature__icon--size);
   height: var(--dsa-feature__icon--size);
 }
-.c-features .c-feature__cta {
+.dsa-features .dsa-feature__cta {
   margin-top: auto;
 }
-.c-features .c-feature__link {
+.dsa-features .dsa-feature__link {
   font: var(--dsa-feature__link-font, var(--ks-font-copy-s));
   display: flex;
   align-items: center;
   gap: var(--ks-spacing-xxs);
   width: fit-content;
 }
-.c-features .c-feature__link .icon {
+.dsa-features .dsa-feature__link .icon {
   width: 1.125em;
   height: 1.125em;
 }
-.c-features .c-feature__button {
+.dsa-features .dsa-feature__button {
   margin-top: calc(var(--dsa-feature--gap) * 0.5);
 }

package/dist/components/features/index.js

@@ -11,7 +11,7 @@ import '@kickstartds/base/lib/link';
 const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
     style: "link",
     toggle: true,
-}, style = "intext", feature: features = [], ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: classnames(`c-features c-features--${layout === "largeTiles"
+}, style = "intext", feature: features = [], ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: classnames(`dsa-features dsa-features--${layout === "largeTiles"
         ? "large-tiles"
         : layout === "smallTiles"
             ? "small-tiles"

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

@@ -77,6 +77,28 @@
           },
           "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,
@@ -88,8 +110,20 @@
       "examples": [
         [
           {
-            "label": "Nav Item",
-            "href": "#"
+            "label": "Nav With Children",
+            "href": "#",
+            "items": [
+              {
+                "label": "TEST1",
+                "href": "#",
+                "id": "TEST1"
+              },
+              {
+                "label": "TEST2",
+                "href": "#",
+                "id": "TEST2"
+              }
+            ]
           },
           {
             "label": "Active Item",

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

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

package/dist/components/header/header.css

@@ -1,4 +1,6 @@
-:root, [ks-inverted], [ks-theme] {
+:root,
+[ks-theme],
+[ks-inverted] {
   --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,6 +2,7 @@
   "$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": {
@@ -57,6 +58,12 @@
       "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",
@@ -83,6 +90,28 @@
           },
           "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,
@@ -94,8 +123,20 @@
       "examples": [
         [
           {
-            "label": "Nav Item",
-            "href": "#"
+            "label": "Nav With Children",
+            "href": "#",
+            "items": [
+              {
+                "label": "TEST1",
+                "href": "#",
+                "id": "TEST1"
+              },
+              {
+                "label": "TEST2",
+                "href": "#",
+                "id": "TEST2"
+              }
+            ]
           },
           {
             "label": "Active Item",
@@ -121,8 +162,5 @@
       "const": "header"
     }
   },
-  "additionalProperties": false,
-  "required": [
-    "logo"
-  ]
+  "additionalProperties": false
 }

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

@@ -2,6 +2,7 @@
   "$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": {
@@ -31,6 +32,9 @@
     "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",
@@ -46,7 +50,5 @@
     "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-7be94a61.js";
+import { HeaderProps } from "../../HeaderProps-dd2071a8.js";
 declare const Header: FC<HeaderProps>;
 export { Header };

package/dist/components/header/index.js

@@ -3,16 +3,20 @@ 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 'react';
-import '@kickstartds/base/lib/link';
-import '../nav-main/js/NavToggle.client.js';
+import '../nav/js/NavToggle.client.js';
 import '@kickstartds/core/lib/component';
-import '../nav-main/js/navMainEvents.client.js';
+import '../nav/js/navMainEvents.client.js';
 import '@kickstartds/core/lib/core';
-import '../nav-main/js/body.client.js';
+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 '@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: {
+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: {
                         ...logo,
                         inverted: flyoutInverted,
                     } })] }) }) }));

package/dist/components/image/image.css

@@ -1,18 +1,18 @@
-.c-image {
-  --c-image--ratio-square: 1/1;
-  --c-image--ratio-wide: 4/3;
-  --c-image--ratio-landscape: 16/9;
+.dsa-image {
+  --dsa-image--ratio-square: 1/1;
+  --dsa-image--ratio-wide: 4/3;
+  --dsa-image--ratio-landscape: 16/9;
 }
 
-.c-image {
+.dsa-image {
   object-fit: cover;
 }
-.c-image--square {
+.dsa-image--square {
   aspect-ratio: var(--c-image--ratio-square);
 }
-.c-image--wide {
+.dsa-image--wide {
   aspect-ratio: var(--c-image--ratio-wide);
 }
-.c-image--landscape {
+.dsa-image--landscape {
   aspect-ratio: var(--c-image--ratio-landscape);
 }

package/dist/components/image/index.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { forwardRef } from 'react';
 import { PictureContextDefault, PictureContext } from '@kickstartds/base/lib/picture';
 
-const Image = forwardRef(({ src, srcSet, alt, width, height, aspectRatio, className, id, itemProp, style, lazy, sources, pictureClassName, ...props }, ref) => (jsx(PictureContextDefault, { ...props, src: src, srcSet: srcSet, alt: alt, width: width, height: height, id: id, itemProp: itemProp, style: style, lazy: lazy, sources: sources, pictureClassName: pictureClassName, ref: ref, className: classnames("c-image", aspectRatio !== "unset" && `c-image--${aspectRatio}`, className) })));
+const Image = forwardRef(({ src, srcSet, alt, width, height, aspectRatio, className, id, itemProp, style, lazy, sources, pictureClassName, ...props }, ref) => (jsx(PictureContextDefault, { ...props, src: src, srcSet: srcSet, alt: alt, width: width, height: height, id: id, itemProp: itemProp, style: style, lazy: lazy, sources: sources, pictureClassName: pictureClassName, ref: ref, className: classnames("dsa-image", aspectRatio !== "unset" && `dsa-image--${aspectRatio}`, className) })));
 Image.displayName = "Image";
 const ImageProvider = (props) => (jsx(PictureContext.Provider, { ...props, value: Image }));