@kickstartds/ds-agency-premium 1.6.72--canary.43.2486.0 → 1.6.72--canary.54.2488.0

package/dist/BlogOverviewProps-9f207f1c.d.ts

@@ -3,7 +3,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-7cac90e5.js";
+import { SectionProps } from "./SectionProps-6a826e52.js";
 import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";

package/dist/{BlogPostProps-c760fd2a.d.ts → BlogPostProps-6b3cff22.d.ts}

@@ -5,7 +5,7 @@
  */
 import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
 import { BlogAsideProps } from "./BlogAsideProps-c760fd2a.js";
-import { SectionProps } from "./SectionProps-7cac90e5.js";
+import { SectionProps } from "./SectionProps-6a826e52.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/PageProps-aa29c554.d.ts

@@ -3,7 +3,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-7cac90e5.js";
+import { SectionProps } from "./SectionProps-6a826e52.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render on the page

package/dist/{SectionProps-7cac90e5.d.ts → SectionProps-6a826e52.d.ts}

@@ -22,8 +22,8 @@ import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-d4677d2c.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";
 import { SliderProps } from "./SliderProps-789f8508.js";
-import { SplitEvenProps } from "./SplitEvenProps-7cac90e5.js";
-import { SplitWeightedProps } from "./SplitWeightedProps-7cac90e5.js";
+import { SplitEvenProps } from "./SplitEvenProps-789f8508.js";
+import { SplitWeightedProps } from "./SplitWeightedProps-789f8508.js";
 import { StatsProps } from "./StatsProps-bf5ef578.js";
 import { TeaserCardProps } from "./TeaserCardProps-d069476f.js";
 import { TestimonialsProps } from "./TestimonialsProps-e344f597.js";

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

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-c760fd2a.js";
+import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export type { BlogPostProps };

package/dist/components/business-card/business-card.css

@@ -8,13 +8,6 @@
   --dsa-business-card--padding: var(--ks-spacing-inset-m);
   --dsa-business-card--background-color: var(--ks-background-color-card);
   --dsa-business-card--gap: var(--ks-spacing-stack-l);
-}
-@container business-card (min-width: 640px) {
-  .dsa-business-card {
-    --dsa-business-card--padding: var(--ks-spacing-inset-xl);
-  }
-}
-.dsa-business-card {
   --dsa-business-card__image--aspect-ratio: 16 / 9;
   --dsa-business-card__image--border-radius: var(--ks-border-radius-card);
   --dsa-business-card__topic--font: var(--dsa-topic--font);
@@ -35,6 +28,11 @@
   --dsa-business-card__contact--color: var(--ks-text-color-interface-interactive);
   --dsa-business-card__contact--color_hover: var(--ks-text-color-interface-interactive-hover);
 }
+@container business-card (min-width: 640px) {
+  .dsa-business-card {
+    --dsa-business-card--padding: var(--ks-spacing-inset-xl);
+  }
+}
 
 .l-container--business-card {
   /* stylelint-disable-next-line property-no-unknown */

package/dist/components/business-card/index.js

@@ -20,7 +20,7 @@ const defaults = {
     "buttons": []
 };
 
-const BusinessCardContextDefault = forwardRef(({ centered, image, logo, topic, address, avatar, contact, buttons }, ref) => (jsx(Container, { name: "business-card", children: jsxs("div", { className: classnames("dsa-business-card", centered && "dsa-business-card--centered"), ref: ref, children: [image.src && (jsx("div", { className: "dsa-business-card__image", children: jsx(Picture, { src: image.src, alt: image.alt }) })), jsxs("div", { className: "dsa-business-card__content", children: [logo && (jsx(Fragment, { children: logo.url ? (jsx(Link, { href: logo.url, className: "dsa-business-card__logo dsa-business-card__logo-link", children: jsx(Picture, { src: logo.src, alt: logo.alt }) })) : (jsx(Picture, { className: "dsa-business-card__logo", src: logo.src, alt: logo.alt })) })), jsxs("address", { className: classnames("dsa-business-card__address", centered && "dsa-business-card__address--centered"), children: [jsxs("div", { className: "dsa-business-card__infos", children: [topic && (jsx("div", { className: "dsa-business-card__topic", children: jsx("span", { children: topic }) })), jsx(Markdown, { className: "dsa-business-card__location", children: address })] }), jsxs("div", { className: "dsa-business-card__contact", children: [avatar && (jsx(Picture, { className: "dsa-business-card__avatar", src: avatar?.src, alt: avatar?.alt })), contact && (jsx("div", { className: "dsa-business-card__contact-items", children: contact.map((item, index) => (jsx(Fragment, { children: jsxs(Link, { href: item?.url, className: "dsa-business-card__contact-item", children: [item?.icon && jsx(Icon, { icon: item?.icon }), jsx("span", { children: item.label })] }, index) }))) }))] })] }), buttons && buttons.length > 0 && (jsx("div", { className: "dsa-business-card__buttons", children: buttons.map((button, index) => (jsx(Button, { label: button.label, url: button.url, className: "dsa-business-card__button", variant: "primary" }, index))) }))] })] }) })));
+const BusinessCardContextDefault = forwardRef(({ centered, image, logo, topic, address, avatar, contact, buttons }, ref) => (jsx(Container, { name: "business-card", children: jsxs("div", { className: classnames("dsa-business-card", centered && "dsa-business-card--centered"), ref: ref, children: [image && (jsx("div", { className: "dsa-business-card__image", children: jsx(Picture, { src: image.src, alt: image.alt }) })), jsxs("div", { className: "dsa-business-card__content", children: [logo && (jsx(Fragment, { children: logo.url ? (jsx(Link, { href: logo.url, className: "dsa-business-card__logo dsa-business-card__logo-link", children: jsx(Picture, { src: logo.src, alt: logo.alt }) })) : (jsx(Picture, { className: "dsa-business-card__logo", src: logo.src, alt: logo.alt })) })), jsxs("address", { className: classnames("dsa-business-card__address", centered && "dsa-business-card__address--centered"), children: [jsxs("div", { className: "dsa-business-card__infos", children: [topic && (jsx("div", { className: "dsa-business-card__topic", children: jsx("span", { children: topic }) })), jsx(Markdown, { className: "dsa-business-card__location", children: address })] }), jsxs("div", { className: "dsa-business-card__contact", children: [avatar && (jsx(Picture, { className: "dsa-business-card__avatar", src: avatar?.src, alt: avatar?.alt })), contact && (jsx("div", { className: "dsa-business-card__contact-items", children: contact.map((item, index) => (jsx(Fragment, { children: jsxs(Link, { href: item?.url, className: "dsa-business-card__contact-item", children: [item?.icon && jsx(Icon, { icon: item?.icon }), jsx("span", { children: item.label })] }, index) }))) }))] })] }), buttons && buttons.length > 0 && (jsx("div", { className: "dsa-business-card__buttons", children: buttons.map((button, index) => (jsx(Button, { label: button.label, url: button.url, className: "dsa-business-card__button", variant: "primary" }, index))) }))] })] }) })));
 const BusinessCardContext = createContext(BusinessCardContextDefault);
 const BusinessCard = forwardRef((props, ref) => {
     const Component = useContext(BusinessCardContext);

package/dist/components/button/button.css

@@ -35,9 +35,7 @@
   --c-button--font-weight: var(--dsa-button--font-weight, var(--ks-font-weight-semi-bold));
   --c-button--border-width: var(--dsa-button--border-width, var(--ks-border-width-default));
   text-transform: var(--dsa-button--text-transform);
-}
-.dsa-button.c-button .icon {
-  margin-left: var(--ks-spacing-xxs);
+  transition-property: box-shadow, transform, background-color, color, border;
 }
 .dsa-button.c-button.c-button--small {
   --c-button--font: var(--dsa-button_small--font, var(--ks-font-interface-s));
@@ -122,9 +120,6 @@
   --c-button--background-color-active: var(--dsa-button_terciary--background-color_active, none);
   --c-button--background-color-selected: var(--dsa-button_terciary--background-color_selected, none);
 }
-.dsa-button.c-button {
-  transition-property: box-shadow, transform, background-color, color, border;
-}
 .dsa-button.c-button:disabled {
   pointer-events: none;
 }

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

@@ -12,7 +12,6 @@
   --dsa-content-nav__link--color_hover: var(--ks-text-color-interface-interactive-hover);
   --dsa-content-nav__link--icon-size: 1.25em;
   --dsa-content-nav__toggle-more--font: var(--ks-font-interface-m);
-  --dsa-content-nav__toggle-more--font-weight: var(--dsa-link--font-weight);
   --dsa-content-nav__toggle-more--color: var(--dsa-link--color);
   --dsa-content-nav__toggle-more--margin-top: var(--ks-spacing-stack-xs);
 }
@@ -95,7 +94,6 @@
   color: var(--dsa-content-nav__toggle-more--color, var(--dsa-link--color));
   cursor: pointer;
   font: var(--dsa-content-nav__toggle-more--font, var(--ks-font-interface-m));
-  font-weight: var(--dsa-content-nav__toggle-more--font-weight, var(--dsa-link--font-weight));
   display: flex;
   align-items: center;
   gap: calc(var(--ks-spacing-xxs) * 0.25);

package/dist/components/cookie-consent/cookie-consent.css

@@ -26,13 +26,6 @@
   --dsa-cookie-consent-dialogue--background-color: var(--ks-background-color-default);
   --dsa-cookie-consent-dialogue--max-width: var(--dsa-tile--width_largest);
   --dsa-cookie-consent-dialogue--max-height: 100%;
-}
-@media (min-width: 48em) {
-  .dsa-cookie-consent {
-    --dsa-cookie-consent-dialogue--max-height: 90vh;
-  }
-}
-.dsa-cookie-consent {
   --dsa-cookie-consent-dialogue--spacing-vertical: var(--ks-spacing-inset-s);
   --dsa-cookie-consent-dialogue--spacing-horizontal: var(--ks-spacing-inset-s);
   --dsa-cookie-consent-dialogue__block--padding-vertical: var(--ks-spacing-inset-m);
@@ -42,8 +35,8 @@
   --dsa-cookie-consent-dialogue__close--padding: var(--ks-spacing-inset-xs);
   --dsa-cookie-consent-dialogue__close--color: var(--ks-text-color-interface-interactive);
   --dsa-cookie-consent-dialogue__close--color_hover: var(--ks-text-color-interface-interactive);
-  --dsa-cookie-consent-dialogue__close--background-color: transparent;
   --dsa-cookie-consent-dialogue__close--background-color_hover: var(--ks-color-fg-alpha-8);
+  --dsa-cookie-consent-dialogue__close--background-color: transparent;
   --dsa-cookie-consent-dialogue__description--border-bottom: 1px solid var(--ks-border-color-interface);
   --dsa-cookie-consent-dialogue__description--font: var(--ks-font-interface-s);
   --dsa-cookie-consent-dialogue__description--color: var(--ks-text-color-interface);
@@ -57,6 +50,11 @@
   --dsa-cookie-consent-dialogue__buttons--gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-s);
   --dsa-cookie-consent-overlay--background-color: var(--dsa-overlay--background-color);
 }
+@media (min-width: 48em) {
+  .dsa-cookie-consent {
+    --dsa-cookie-consent-dialogue--max-height: 90vh;
+  }
+}
 
 .dsa-cookie-consent-notice {
   display: flex;
@@ -77,6 +75,7 @@
 @media (min-width: 48em) {
   .dsa-cookie-consent-notice--card {
     border: var(--dsa-cookie-consent-notice_card--border, var(--ks-border-color-card) solid var(--ks-border-width-default));
+    border-radius: var(--dsa-cookie-consent-notice_card--border-radius, var(--ks-border-radius-card));
     max-width: var(--dsa-cookie-consent-notice_card--max-width, var(--dsa-tile--width_large));
     bottom: var(--dsa-cookie-consent-notice_card--bottom, var(--ks-spacing-m));
     left: var(--dsa-cookie-consent-notice_card--left, var(--ks-spacing-m));
@@ -167,9 +166,9 @@
   justify-content: space-between;
   gap: var(--dsa-cookie-consent-dialogue__header--gap, var(--ks-spacing-inline-m));
 }
-.dsa-cookie-consent-dialogue__close.dsa-button {
+.dsa-cookie-consent-dialogue__close {
   --dsa-button--padding: var(--dsa-cookie-consent-dialogue__close--padding, var(--ks-spacing-inset-xs));
-  --dsa-button_secondary--background-color: var(--dsa-cookie-consent-dialogue__close--background-color, transparent);
+  margin: calc(var(--dsa-cookie-consent-dialogue__close--padding, var(--ks-spacing-inset-xs)) * -1);
   --dsa-button_secondary--color: var(
     --dsa-cookie-consent-dialogue__close--color,
     var(--ks-text-color-interface-interactive)
@@ -182,11 +181,8 @@
     --dsa-cookie-consent-dialogue__close--background-color_hover,
     var(--ks-color-fg-alpha-8)
   );
-  margin: calc(var(--dsa-cookie-consent-dialogue__close--padding, var(--ks-spacing-inset-xs)) * -1);
   border-radius: var(--ks-border-radius-circle);
-}
-.dsa-cookie-consent-dialogue__close.dsa-button .icon {
-  margin-left: 0;
+  background-color: var(--dsa-cookie-consent-dialogue__close--background-color, transparent);
 }
 .dsa-cookie-consent-dialogue__form {
   flex: 1;

package/dist/components/event-latest-teaser/event-latest-teaser.css

@@ -37,7 +37,7 @@
   align-self: start;
   position: relative;
   background-color: var(--ks-background-color-primary);
-  color: var(--dsa-text-color-on-primary);
+  color: var(--ks-color-fg-inverted);
   border-radius: var(--ks-border-radius-control);
   display: flex;
   align-items: flex-end;
@@ -113,7 +113,7 @@
 .dsa-event-latest-teaser__cta {
   font: var(--ks-font-interface-s);
   font-weight: var(--ks-font-weight-semi-bold);
-  color: var(--dsa-link--color);
+  color: var(--ks-text-color-primary);
   display: flex;
   align-items: center;
   text-wrap: nowrap;

package/dist/components/event-list-teaser/event-list-teaser.css

@@ -32,7 +32,7 @@
   gap: var(--ks-spacing-stack-s);
   flex-basis: var(--dsa-tile--width_small);
   flex-grow: 10;
-  flex-shrink: 1;
+  flex-shrink: 0;
 }
 .dsa-event-list-teaser__image {
   flex-basis: var(--dsa-tile--width_small);
@@ -124,7 +124,7 @@
 .dsa-event-list-teaser__cta {
   font: var(--ks-font-interface-s);
   font-weight: var(--ks-font-weight-semi-bold);
-  color: var(--dsa-link--color);
+  color: var(--ks-text-color-primary);
   display: flex;
   align-items: center;
   text-wrap: nowrap;

package/dist/components/event-location/event-location.css

@@ -15,7 +15,7 @@
   justify-content: space-between;
   gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
   background-color: var(--ks-background-color-accent);
-  padding: var(--ks-spacing-inset-l);
+  padding: var(--ks-spacing-inset-m);
   border-radius: var(--ks-border-radius-surface);
   --dsa-event-location__info--flex-basis: 280px;
   --dsa-event-location__appointments--min-width: 12em;
@@ -60,9 +60,9 @@
 .dsa-event-location__appointments {
   display: grid;
   justify-content: flex-end;
-  gap: var(--ks-spacing-s);
+  gap: var(--ks-spacing-stack-s);
   flex-grow: 100;
-  flex-shrink: 1;
+  flex-shrink: 0;
   grid-template-columns: repeat(auto-fill, minmax(min(var(--dsa-event-location__appointments--min-width, 12em), 100%), 1fr));
   font: var(--ks-font-interface-s);
 }

package/dist/components/hero/hero.css

@@ -8,36 +8,6 @@
 [ks-inverted=false] .dsa-hero {
   --dsa-hero--min-height: 18rem;
   --dsa-hero--min-height_small: 12rem;
-}
-@container hero (min-width: 640px) {
-  :root .dsa-hero,
-  [ks-inverted=true] .dsa-hero,
-  [ks-inverted=false] .dsa-hero {
-    --dsa-hero--min-height: 24rem;
-    --dsa-hero--min-height_small: 14rem;
-    --dsa-hero__textbox--max-width: 50vw;
-  }
-}
-@container hero (min-width: 960px) {
-  :root .dsa-hero,
-  [ks-inverted=true] .dsa-hero,
-  [ks-inverted=false] .dsa-hero {
-    --dsa-hero--min-height: 32rem;
-    --dsa-hero--min-height_small: 16rem;
-  }
-}
-@container hero (min-width: 1024px) {
-  :root .dsa-hero,
-  [ks-inverted=true] .dsa-hero,
-  [ks-inverted=false] .dsa-hero {
-    --dsa-hero--min-height: 36rem;
-    --dsa-hero--min-height_small: 20rem;
-    --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
-  }
-}
-:root .dsa-hero,
-[ks-inverted=true] .dsa-hero,
-[ks-inverted=false] .dsa-hero {
   --dsa-hero__headline--color: var(--dsa-headline--color);
   --dsa-hero__subheadline--color: var(--dsa-headline__subheadline--color);
   --dsa-hero_color-neutral__headline--color: var(--ks-text-color-default);
@@ -51,7 +21,7 @@
   --dsa-hero__textbox--box-shadow: none;
   --dsa-hero__textbox--border-radius: var(--ks-border-radius-card);
   --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
-  --dsa-hero__textbox--padding: var(--ks-spacing-inset-l);
+  --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
   --dsa-hero_below__textbox--padding: var(--dsa-content--vertical-spacing);
   --dsa-hero_offset__textbox--padding: var(--dsa-content--vertical-spacing);
   --dsa-hero__skip-button--shadow: var(--dsa-overlay-text--shadow);
@@ -86,6 +56,32 @@
   );
   --dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
 }
+@container hero (min-width: 640px) {
+  :root .dsa-hero,
+  [ks-inverted=true] .dsa-hero,
+  [ks-inverted=false] .dsa-hero {
+    --dsa-hero--min-height: 24rem;
+    --dsa-hero--min-height_small: 14rem;
+    --dsa-hero__textbox--max-width: 50vw;
+  }
+}
+@container hero (min-width: 960px) {
+  :root .dsa-hero,
+  [ks-inverted=true] .dsa-hero,
+  [ks-inverted=false] .dsa-hero {
+    --dsa-hero--min-height: 32rem;
+    --dsa-hero--min-height_small: 16rem;
+  }
+}
+@container hero (min-width: 1024px) {
+  :root .dsa-hero,
+  [ks-inverted=true] .dsa-hero,
+  [ks-inverted=false] .dsa-hero {
+    --dsa-hero--min-height: 36rem;
+    --dsa-hero--min-height_small: 20rem;
+    --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
+  }
+}
 
 .l-container--hero {
   /* stylelint-disable-next-line property-no-unknown */
@@ -96,6 +92,7 @@
   --c-visual_overlay--background-size: 100%;
   --c-visual--min-height: var(--dsa-hero--min-height);
   --c-visual_overlay--background: transparent;
+  min-height: var(--dsa-hero--min-height);
 }
 .c-visual.dsa-hero .c-visual__box {
   --c-visual_box--background: var(
@@ -115,9 +112,6 @@
   --dsa-hero__headline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
   --dsa-hero__subheadline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
 }
-.c-visual.dsa-hero {
-  min-height: var(--dsa-hero--min-height);
-}
 .c-visual.dsa-hero.c-visual--small {
   --dsa-hero--min-height: var(--dsa-hero--min-height_small);
 }

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

@@ -29,7 +29,7 @@ interface SettingsProps {
     seo: SeoProps;
     iconSprite?: IconSprite;
 }
-export * from "../../BlogPostProps-c760fd2a.js";
+export * from "../../BlogPostProps-6b3cff22.js";
 export * from "../../BlogOverviewProps-9f207f1c.js";
 export * from "../../PageProps-aa29c554.js";
 export { IconSprite, SettingsProps };

package/dist/components/logos/logos.css

@@ -14,15 +14,15 @@
   --dsa-logos__grid_tablet--cols: 3;
 }
 
-.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 {
   display: flex;
   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));
@@ -58,6 +58,8 @@
 }
 .dsa-logos .dsa-logo-tiles {
   --dsa-logo-tiles--cols: var(--dsa-logos__grid_mobile--cols, 2);
+  gap: var(--dsa-logos__grid--gap-vertical) var(--dsa-logos__grid--gap-horizontal);
+  margin: 0;
 }
 @container logo-tiles (min-width: 420px) {
   .dsa-logos .dsa-logo-tiles {
@@ -90,10 +92,6 @@
     --dsa-logo-tiles--cols: 8;
   }
 }
-.dsa-logos .dsa-logo-tiles {
-  gap: var(--dsa-logos__grid--gap-vertical) var(--dsa-logos__grid--gap-horizontal);
-  margin: 0;
-}
 .dsa-logos .dsa-logo-tiles .c-logo-tiles__col {
   margin: 0;
   aspect-ratio: 16/9;

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

@@ -1,11 +1,6 @@
 .dsa-nav-dropdown {
   --dsa-nav-dropdown--padding: var(--ks-spacing-xxs) var(--ks-spacing-xxs) var(--ks-spacing-m) var(--ks-spacing-xxs);
   --dsa-nav-dropdown--background: var(--ks-background-color-default);
-}
-.dsa-nav-dropdown[ks-inverted=true] {
-  --dsa-nav-dropdown--background: var(--ks-color-fg-inverted);
-}
-.dsa-nav-dropdown {
   --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);
@@ -23,6 +18,9 @@
   --dsa-nav-dropdown__label--padding: 0.45em 0.75em;
   --dsa-nav-dropdown__label_dimmed--opacity: 1;
 }
+.dsa-nav-dropdown[ks-inverted=true] {
+  --dsa-nav-dropdown--background: var(--ks-color-fg-inverted);
+}
 
 .dsa-nav-dropdown {
   --g-link--text-decoration: none;

package/dist/components/page-wrapper/index.js

@@ -1,3 +1,4 @@
+import "./tokens.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import Providers from '../providers/index.js';
 import '@kickstartds/base/lib/global/base';