@kickstartds/ds-agency-premium 1.4.7--canary.15.776.0 → 1.4.8

package/dist/{BlogAsideProps-99489f0b.d.ts → BlogAsideProps-e1cbd5d3.d.ts}

@@ -12,13 +12,9 @@ type Name = string;
  */
 type Byline = string;
 /**
- * URL of the image to display
+ * The image URL of the author
  */
-type ImageSource = string;
-/**
- * Alt text of the image
- */
-type AltText = string;
+type Image = string;
 /**
  * The Twitter name of the author
  */
@@ -71,11 +67,8 @@ interface BlogAsideProps {
 interface Author {
     name: Name;
     byline?: Byline;
-    image?: {
-        src?: ImageSource;
-        alt?: AltText;
-    };
+    image?: Image;
     twitter?: Twitter;
     email?: Email;
 }
-export { Name, Byline, ImageSource, AltText, Twitter, Email, Icon, Href, Title, SocialSharing, ReadingTime, PublishedDate, BlogAsideProps, Author };
+export { Name, Byline, Image, Twitter, Email, Icon, Href, Title, SocialSharing, ReadingTime, PublishedDate, BlogAsideProps, Author };

package/dist/{BlogHeadProps-f9a49428.d.ts → BlogHeadProps-3f6e4072.d.ts}

@@ -3,6 +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 { BlogTagProps } from "./BlogTagProps-f5855e93.js";
 /**
  * The date when the blog post was published
  */
@@ -10,7 +11,7 @@ type PublishedDate = string;
 /**
  * The tags associated with the blog post
  */
-type Tags = string[];
+type Tags = BlogTagProps[];
 /**
  * The headline of the blog post
  */

package/dist/{BlogOverviewProps-83d399b4.d.ts → BlogOverviewProps-9f207f1c.d.ts}

@@ -4,7 +4,7 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 import { SectionProps } from "./SectionProps-83d399b4.js";
-import { BlogTeaserProps } from "./BlogTeaserProps-525f7f9f.js";
+import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
 import { CtaProps } from "./CtaProps-93230a76.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

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

@@ -3,8 +3,8 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { BlogHeadProps } from "./BlogHeadProps-f9a49428.js";
-import { BlogAsideProps } from "./BlogAsideProps-99489f0b.js";
+import { BlogHeadProps } from "./BlogHeadProps-3f6e4072.js";
+import { BlogAsideProps } from "./BlogAsideProps-e1cbd5d3.js";
 import { SectionProps } from "./SectionProps-83d399b4.js";
 import { CtaProps } from "./CtaProps-93230a76.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";

package/dist/BlogTagProps-f5855e93.d.ts

@@ -0,0 +1,16 @@
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * Name of the tag entry
+ */
+type Entry = string;
+/**
+ * Tag given to a blog post
+ */
+interface BlogTagProps {
+    entry: Entry;
+}
+export { Entry, BlogTagProps };

package/dist/{BlogTeaserProps-525f7f9f.d.ts → BlogTeaserProps-f5855e93.d.ts}

@@ -3,6 +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 { BlogTagProps } from "./BlogTagProps-f5855e93.js";
 /**
  * The date of the blog post
  */
@@ -10,7 +11,7 @@ type Date = string;
 /**
  * The tags for the blog post
  */
-type Tags = string[];
+type Tags = BlogTagProps[];
 /**
  * The headline of the blog post
  */

package/dist/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-aside/blog-aside.css

@@ -1,9 +1,8 @@
 .dsa-blog-aside {
-  --dsa-blog-aside__meta__item--font: var(--ks-font-interface-s);
-  --dsa-blog-aside__meta__item--color: var(--ks-text-color-interface);
-  --dsa-blog-aside__meta__item__icon--size: 1.2em;
   --dsa-blog-aside__title--color: var(--dsa-headline--color);
   --dsa-blog-aside__title--font: var(--dsa-headline_h3--font);
+  --dsa-blog-aside__copy--color: var(--dsa-rich-text--color);
+  --dsa-blog-aside__copy--font: var(--dsa-rich-text--font);
   --dsa-blog-aside__links--color: var(--dsa-link--color);
   --dsa-blog-aside__divider--color: var(--ks-border-color-accent);
 }
@@ -14,16 +13,25 @@
 .dsa-blog-aside .c-post-meta {
   --c-post-meta--gap: var(--ks-spacing-m);
   --c-post-meta_item--gap: var(--ks-spacing-xs);
-  --c-post-meta_item--font: var(--dsa-blog-aside__meta__item--font, var(--ks-font-interface-s));
-  --c-post-meta_item--color: var(--dsa-blog-aside__meta__item--color, var(--ks-text-color-interface));
-  --c-post-meta_item--icon-size: var(--dsa-blog-aside__meta__item__icon--size, 1.2em);
+  --c-post-meta_item--font: var(--dsa-post-aside__meta__item--font, var(--ks-font-interface-s));
+  --c-post-meta_item--color: var(--dsa-post-aside__meta__item--color, var(--ks-text-color-interface));
+  --c-post-meta_item--icon-size: var(--dsa-post-aside__meta__item__icon--size, 1.2em);
+}
+.dsa-blog-aside .c-contact__copy {
+  --c-rich-text-font: var(--dsa-post-aside__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
+  --c-rich-text-color: var(--dsa-post-aside__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-default)));
+}
+.dsa-blog-aside .dsa-headline .dsa-headline__headline {
+  font: var(--dsa-post-aside__title--font, var(--dsa-headline_h3--font, var(--ks-font-display-l)));
+  font-weight: var(--dsa-headline--font-weight);
+  color: var(--dsa-post-aside__title--color, var(--dsa-headline--color, var(--ks-text-color-display)));
 }
 .dsa-blog-aside .c-contact__links {
-  color: var(--dsa-blog-aside__links--color, var(--dsa-link--color));
+  color: var(--dsa-post-aside__links--color, var(--dsa-link--color));
 }
 .dsa-blog-aside .c-contact__links .icon {
   color: inherit;
 }
 .dsa-blog-aside .c-divider {
-  --c-divider--background: var(--dsa-blog-aside__divider--color, var(--ks-border-color-accent));
+  --c-divider--background: var(--dsa-post-aside__divider--color, var(--ks-border-color-accent));
 }

package/dist/components/blog-aside/blog-aside.schema.dereffed.json

@@ -27,27 +27,13 @@
           ]
         },
         "image": {
-          "type": "object",
-          "properties": {
-            "src": {
-              "type": "string",
-              "format": "image",
-              "title": "Image Source",
-              "description": "URL of the image to display",
-              "examples": [
-                "img/people/author-emily.png"
-              ]
-            },
-            "alt": {
-              "type": "string",
-              "title": "Alt Text",
-              "description": "Alt text of the image",
-              "examples": [
-                "Picture of Jane Smith"
-              ]
-            }
-          },
-          "additionalProperties": false
+          "title": "Image",
+          "description": "The image URL of the author",
+          "type": "string",
+          "format": "image",
+          "examples": [
+            "img/people/author-emily.png"
+          ]
         },
         "twitter": {
           "title": "Twitter",

package/dist/components/blog-aside/blog-aside.schema.json

@@ -23,22 +23,11 @@
           "examples": ["CEO at Company"]
         },
         "image": {
-          "type": "object",
-          "properties": {
-            "src": {
-              "type": "string",
-              "format": "image",
-              "title": "Image Source",
-              "description": "URL of the image to display",
-              "examples": ["img/people/author-emily.png"]
-            },
-            "alt": {
-              "type": "string",
-              "title": "Alt Text",
-              "description": "Alt text of the image",
-              "examples": ["Picture of Jane Smith"]
-            }
-          }
+          "title": "Image",
+          "description": "The image URL of the author",
+          "type": "string",
+          "format": "image",
+          "examples": ["img/people/author-emily.png"]
         },
         "twitter": {
           "title": "Twitter",

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogAsideProps } from "../../BlogAsideProps-99489f0b.js";
+import { BlogAsideProps } from "../../BlogAsideProps-e1cbd5d3.js";
 declare const BlogAsideContextDefault: import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogAsideContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogAside: import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -40,8 +40,8 @@ const BlogAsideContextDefault = forwardRef(({ author, socialSharing, readingTime
         });
     return (jsx(PostAside, { ...rest, className: classnames(className, "dsa-blog-aside"), author: {
             title: author?.name,
-            subtitle: author?.byline,
-            image: author?.image,
+            image: author?.image && { src: author.image },
+            copy: author?.byline,
             links: authorLinks,
         }, shareBar: {
             headline: {

package/dist/components/blog-head/blog-head.schema.dereffed.json

@@ -19,10 +19,24 @@
       "title": "Tags",
       "description": "The tags associated with the blog post",
       "items": {
-        "type": "string",
-        "examples": [
-          "tech",
-          "programming"
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json",
+        "title": "Blog Tag",
+        "description": "Tag given to a blog post",
+        "type": "object",
+        "properties": {
+          "entry": {
+            "title": "Entry",
+            "description": "Name of the tag entry",
+            "type": "string"
+          },
+          "type": {
+            "const": "blog-tag"
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "entry"
         ]
       }
     },

package/dist/components/blog-head/blog-head.schema.json

@@ -17,8 +17,7 @@
       "title": "Tags",
       "description": "The tags associated with the blog post",
       "items": {
-        "type": "string",
-        "examples": ["tech", "programming"]
+        "$ref": "http://schema.mydesignsystem.com/blog-tag.schema.json"
       }
     },
     "headline": {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogHeadProps } from "../../BlogHeadProps-f9a49428.js";
+import { BlogHeadProps } from "../../BlogHeadProps-3f6e4072.js";
 declare const BlogHeadContextDefault: import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogHeadContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogHead: import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -5,7 +5,7 @@ import { PostHead } from '@kickstartds/blog/lib/post-head';
 
 const BlogHeadContextDefault = forwardRef(({ date, tags = [], headline, image, ...rest }, ref) => {
     return (jsx(PostHead, { ...rest, date: date, headline: { text: headline, level: "h1", align: "left" }, image: { src: image }, categories: tags.map((tag) => {
-            return { label: tag };
+            return { label: tag.entry };
         }), ref: ref }));
 });
 const BlogHeadContext = createContext(BlogHeadContextDefault);

package/dist/components/blog-overview/blog-overview.schema.dereffed.json

@@ -3129,10 +3129,24 @@
           "title": "Tags",
           "description": "The tags for the blog post",
           "items": {
-            "type": "string",
-            "examples": [
-              "tech",
-              "programming"
+            "$schema": "http://json-schema.org/draft-07/schema#",
+            "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json",
+            "title": "Blog Tag",
+            "description": "Tag given to a blog post",
+            "type": "object",
+            "properties": {
+              "entry": {
+                "title": "Entry",
+                "description": "Name of the tag entry",
+                "type": "string"
+              },
+              "type": {
+                "const": "blog-tag"
+              }
+            },
+            "additionalProperties": false,
+            "required": [
+              "entry"
             ]
           }
         },
@@ -3280,10 +3294,24 @@
             "title": "Tags",
             "description": "The tags for the blog post",
             "items": {
-              "type": "string",
-              "examples": [
-                "tech",
-                "programming"
+              "$schema": "http://json-schema.org/draft-07/schema#",
+              "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json",
+              "title": "Blog Tag",
+              "description": "Tag given to a blog post",
+              "type": "object",
+              "properties": {
+                "entry": {
+                  "title": "Entry",
+                  "description": "Name of the tag entry",
+                  "type": "string"
+                },
+                "type": {
+                  "const": "blog-tag"
+                }
+              },
+              "additionalProperties": false,
+              "required": [
+                "entry"
               ]
             }
           },
@@ -3432,10 +3460,24 @@
             "title": "Tags",
             "description": "The tags for the blog post",
             "items": {
-              "type": "string",
-              "examples": [
-                "tech",
-                "programming"
+              "$schema": "http://json-schema.org/draft-07/schema#",
+              "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json",
+              "title": "Blog Tag",
+              "description": "Tag given to a blog post",
+              "type": "object",
+              "properties": {
+                "entry": {
+                  "title": "Entry",
+                  "description": "Name of the tag entry",
+                  "type": "string"
+                },
+                "type": {
+                  "const": "blog-tag"
+                }
+              },
+              "additionalProperties": false,
+              "required": [
+                "entry"
               ]
             }
           },

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

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-83d399b4.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
 export { BlogOverview };

package/dist/components/blog-post/blog-post.schema.dereffed.json

@@ -29,10 +29,24 @@
           "title": "Tags",
           "description": "The tags associated with the blog post",
           "items": {
-            "type": "string",
-            "examples": [
-              "tech",
-              "programming"
+            "$schema": "http://json-schema.org/draft-07/schema#",
+            "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json",
+            "title": "Blog Tag",
+            "description": "Tag given to a blog post",
+            "type": "object",
+            "properties": {
+              "entry": {
+                "title": "Entry",
+                "description": "Name of the tag entry",
+                "type": "string"
+              },
+              "type": {
+                "const": "blog-tag"
+              }
+            },
+            "additionalProperties": false,
+            "required": [
+              "entry"
             ]
           }
         },
@@ -92,27 +106,13 @@
               ]
             },
             "image": {
-              "type": "object",
-              "properties": {
-                "src": {
-                  "type": "string",
-                  "format": "image",
-                  "title": "Image Source",
-                  "description": "URL of the image to display",
-                  "examples": [
-                    "img/people/author-emily.png"
-                  ]
-                },
-                "alt": {
-                  "type": "string",
-                  "title": "Alt Text",
-                  "description": "Alt text of the image",
-                  "examples": [
-                    "Picture of Jane Smith"
-                  ]
-                }
-              },
-              "additionalProperties": false
+              "title": "Image",
+              "description": "The image URL of the author",
+              "type": "string",
+              "format": "image",
+              "examples": [
+                "img/people/author-emily.png"
+              ]
             },
             "twitter": {
               "title": "Twitter",

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

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-83d399b4.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, { mainSectionWidth: "narrow", 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 }) }))] }));
+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/blog-tag/blog-tag.schema.dereffed.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json",
+  "title": "Blog Tag",
+  "description": "Tag given to a blog post",
+  "type": "object",
+  "properties": {
+    "entry": {
+      "title": "Entry",
+      "description": "Name of the tag entry",
+      "type": "string"
+    },
+    "type": {
+      "const": "blog-tag"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "entry"
+  ]
+}

package/dist/components/blog-tag/blog-tag.schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json",
+  "title": "Blog Tag",
+  "description": "Tag given to a blog post",
+  "type": "object",
+  "properties": {
+    "entry": {
+      "title": "Entry",
+      "description": "Name of the tag entry",
+      "type": "string"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["entry"]
+}

package/dist/components/blog-teaser/blog-teaser.schema.dereffed.json

@@ -19,10 +19,24 @@
       "title": "Tags",
       "description": "The tags for the blog post",
       "items": {
-        "type": "string",
-        "examples": [
-          "tech",
-          "programming"
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json",
+        "title": "Blog Tag",
+        "description": "Tag given to a blog post",
+        "type": "object",
+        "properties": {
+          "entry": {
+            "title": "Entry",
+            "description": "Name of the tag entry",
+            "type": "string"
+          },
+          "type": {
+            "const": "blog-tag"
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "entry"
         ]
       }
     },

package/dist/components/blog-teaser/blog-teaser.schema.json

@@ -17,8 +17,7 @@
       "title": "Tags",
       "description": "The tags for the blog post",
       "items": {
-        "type": "string",
-        "examples": ["tech", "programming"]
+        "$ref": "http://schema.mydesignsystem.com/blog-tag.schema.json"
       }
     },
     "headline": {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogTeaserProps } from "../../BlogTeaserProps-525f7f9f.js";
+import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
 declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -34,7 +34,7 @@ const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaser
                     target: link.url,
                 }
                 : undefined, title: headline, body: teaserText, categories: tags.map((tag) => {
-                return { label: tag };
+                return { label: tag.entry };
             }), ref: ref }) }));
 });
 const BlogTeaserContext = createContext(BlogTeaserContextDefault);

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

@@ -72,6 +72,6 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-83d399b4.js";
-export * from "../../BlogOverviewProps-83d399b4.js";
+export * from "../../BlogPostProps-440f88a5.js";
+export * from "../../BlogOverviewProps-9f207f1c.js";
 export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };

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

@@ -27,7 +27,7 @@
 }
 
 .dsa-nav-flyout {
-  display: none;
+  display: flex;
   font: var(--dsa-nav-flyout__label--font);
   flex-direction: column;
   gap: var(--dsa-nav-flyout--gap);
@@ -47,11 +47,6 @@
   -webkit-overflow-scrolling: touch;
   max-width: var(--dsa-nav-flyout--max-width);
 }
-@media (max-width: 62rem) {
-  .dsa-nav-flyout {
-    display: flex;
-  }
-}
 .dsa-nav-flyout ul {
   padding: 0;
   margin: 0;

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

@@ -1,3 +1,4 @@
+import "./nav-main.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import './js/NavToggle.client.js';

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

@@ -0,0 +1,10 @@
+@media (min-width: 62rem) {
+  .dsa-nav-main .dsa-nav-flyout {
+    display: none;
+  }
+}
+@media (max-width: 62rem) {
+  .dsa-nav-main .dsa-nav-topbar {
+    display: none;
+  }
+}