@node-core/ui-components 0.0.1 → 1.0.1-1b9af3ec9e0268bfc734b2489cbc584fa3edf026

package/Common/Tooltip/index.module.css

@@ -0,0 +1,133 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.content {
+  border-radius: var(--radius-md, 0.375rem);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  background-color: var(--color-white, #fff);
+  font-size: var(--text-sm, 0.875rem);
+  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+  --tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-neutral-900, #2c3437);
+  --tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in srgb, #101828 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in srgb, #101828 8%, transparent));
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 8%, transparent));
+  }
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-color: var(--color-neutral-950, #0d121c);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-white, #fff);
+  }
+  &.default {
+    border-color: var(--color-neutral-200, #e9edf0);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-neutral-900, #2c3437);
+    }
+    .arrow {
+      fill: var(--color-neutral-200, #e9edf0);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        fill: var(--color-neutral-900, #2c3437);
+      }
+    }
+  }
+  &.error {
+    border-color: var(--color-danger-400, #fa8e8e);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-danger-900, #661514);
+    }
+    .arrow {
+      fill: var(--color-danger-400, #fa8e8e);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        fill: var(--color-danger-900, #661514);
+      }
+    }
+  }
+  &.warning {
+    border-color: var(--color-warning-400, #e99c40);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-warning-900, #4d2f0b);
+    }
+    .arrow {
+      fill: var(--color-warning-400, #e99c40);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        fill: var(--color-warning-900, #4d2f0b);
+      }
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}

package/Containers/Article/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './index.module.css';
+const ArticleLayout = ({ children }) => (_jsx("div", { className: styles.articleLayout, children: children }));
+export default ArticleLayout;

package/Containers/Article/index.module.css

@@ -0,0 +1,139 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.articleLayout {
+  margin-inline: auto;
+  display: block;
+  width: 100%;
+  max-width: 95rem;
+  @media (width >= 40rem) {
+    display: grid;
+  }
+  @media (width >= 40rem) {
+    grid-template-columns: 13rem 1fr;
+  }
+  @media (width >= 40rem) {
+    grid-template-rows: 1fr;
+  }
+  @media (width >= 40rem) {
+    overflow: visible;
+  }
+  @media (width >= 40rem) {
+    grid-template-areas: 'sidebar main''sidebar footer';
+  }
+  @media (width >= 48rem) {
+    grid-template-columns: 16rem 1fr;
+  }
+  @media (width >= 64rem) {
+    grid-template-columns: 13rem 1fr 13rem;
+  }
+  @media (width >= 64rem) {
+    grid-template-areas: 'sidebar main metabar''sidebar footer metabar';
+  }
+  @media (width >= 80rem) {
+    grid-template-columns: 20rem 1fr 20rem;
+  }
+  > *:nth-child(1) {
+    grid-area: sidebar;
+    @media (width >= 64rem) {
+      position: sticky;
+    }
+    @media (width >= 64rem) {
+      top: calc(var(--spacing, 0.25rem)*0);
+    }
+    @media (width >= 64rem) {
+      height: 100vh;
+    }
+    @media (width >= 64rem) {
+      overflow-y: auto;
+    }
+  }
+  > *:nth-child(2) {
+    display: contents;
+    @media (width >= 40rem) {
+      @media (width < 64rem) {
+        display: block;
+      }
+    }
+    > *:first-child {
+      padding: calc(var(--spacing, 0.25rem)*4);
+      grid-area: main;
+      @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+      }
+      @media (width >= 40rem) {
+        background-image: linear-gradient( 180deg, color-mix(in srgb, #f6f7f9 50%, transparent) 0%, color-mix(in srgb, #f6f7f9 0%, transparent) 48.32% );
+        @supports (color: color-mix(in lab, red, red)) {
+          background-image: linear-gradient( 180deg, color-mix(in oklab, var(--color-neutral-100) 50%, transparent) 0%, color-mix(in oklab, var(--color-neutral-100) 0%, transparent) 48.32% );
+        }
+      }
+      @media (width >= 40rem) {
+        background-attachment: fixed;
+      }
+      @media (width >= 40rem) {
+        padding: calc(var(--spacing, 0.25rem)*12);
+      }
+      @media (width >= 80rem) {
+        padding-inline: calc(var(--spacing, 0.25rem)*18);
+      }
+      @media (width >= 40rem) {
+        &:where([data-theme=dark], [data-theme=dark] *) {
+          background-image: linear-gradient( 180deg, color-mix(in srgb, #2c3437 50%, transparent) 0%, color-mix(in srgb, #2c3437 0%, transparent) 48.32% );
+          @supports (color: color-mix(in lab, red, red)) {
+            background-image: linear-gradient( 180deg, color-mix(in oklab, var(--color-neutral-900) 50%, transparent) 0%, color-mix(in oklab, var(--color-neutral-900) 0%, transparent) 48.32% );
+          }
+        }
+      }
+    }
+    > *:last-child {
+      margin-top: calc(var(--spacing, 0.25rem)*8);
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+      grid-area: metabar;
+      @media (width >= 40rem) {
+        margin-top: calc(var(--spacing, 0.25rem)*0);
+      }
+      @media (width >= 64rem) {
+        position: sticky;
+      }
+      @media (width >= 64rem) {
+        top: calc(var(--spacing, 0.25rem)*0);
+      }
+      @media (width >= 64rem) {
+        max-width: var(--container-xs, 20rem);
+      }
+      @media (width >= 64rem) {
+        border-top-style: var(--tw-border-style);
+        border-top-width: 0px;
+      }
+      @media (width >= 64rem) {
+        border-left-style: var(--tw-border-style);
+        border-left-width: 1px;
+      }
+    }
+  }
+  > *:nth-child(3) {
+    position: sticky;
+    bottom: calc(var(--spacing, 0.25rem)*0);
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    align-self: stretch;
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-top-color: var(--color-neutral-200, #e9edf0);
+    background-color: var(--color-white, #fff);
+    padding-block: calc(var(--spacing, 0.25rem)*4);
+    grid-area: footer;
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-top-color: var(--color-neutral-900, #2c3437);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-950, #0d121c);
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/Containers/DocSideBar/index.js

@@ -0,0 +1 @@
+"use strict";

package/Containers/Footer/index.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import NavItem from '#ui/Containers/NavBar/NavItem';
+import { Bluesky, Discord, GitHub, LinkedIn, Mastodon, Slack, X, } from '#ui/Icons/Social';
+import styles from './index.module.css';
+const footerSocialIcons = {
+    github: GitHub,
+    mastodon: Mastodon,
+    twitter: X,
+    slack: Slack,
+    linkedin: LinkedIn,
+    bluesky: Bluesky,
+    discord: Discord,
+};
+const Footer = ({ pathname = '/', as = 'a', navigation }) => {
+    const openJSlink = navigation.footerLinks.at(-1);
+    return (_jsxs("footer", { className: styles.footer, children: [_jsx("div", { className: styles.sectionPrimary, children: navigation.footerLinks.slice(0, -1).map(item => (_jsx(NavItem, { type: "footer", href: item.link, as: as, pathname: pathname, children: item.text }, item.link))) }), _jsxs("div", { className: styles.sectionSecondary, children: [_jsxs(NavItem, { type: "footer", href: openJSlink.link, as: as, pathname: pathname, children: ["\u00A9 ", openJSlink.text] }), _jsx("div", { className: styles.social, children: navigation.socialLinks.map(link => {
+                            const SocialIcon = footerSocialIcons[link.icon];
+                            return (_jsx(NavItem, { href: link.link, type: "footer", as: as, pathname: pathname, children: _jsx(SocialIcon, { width: 20, height: 20, "aria-label": link.link }) }, link.icon));
+                        }) })] })] }));
+};
+export default Footer;

package/Containers/Footer/index.module.css

@@ -0,0 +1,61 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem)*6);
+  border-top-style: var(--tw-border-style);
+  border-top-width: 1px;
+  border-color: var(--color-neutral-200, #e9edf0);
+  background-color: var(--color-white, #fff);
+  padding-block: calc(var(--spacing, 0.25rem)*4);
+  @media (width >= 40rem) {
+    padding-inline: calc(var(--spacing, 0.25rem)*8);
+  }
+  @media (width >= 48rem) {
+    flex-direction: row;
+  }
+  @media (width >= 48rem) {
+    justify-content: space-between;
+  }
+  @media (width >= 48rem) {
+    padding-block: calc(var(--spacing, 0.25rem)*5);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-color: var(--color-neutral-900, #2c3437);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-color: var(--color-neutral-950, #0d121c);
+  }
+  .sectionPrimary {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing, 0.25rem)*1);
+    align-self: stretch;
+    a {
+      white-space: nowrap;
+    }
+  }
+  .sectionSecondary {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--spacing, 0.25rem)*1);
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+    .social {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing, 0.25rem)*1);
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/Containers/MetaBar/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useMemo } from 'react';
+import styles from './index.module.css';
+const MetaBar = ({ items, headings, as: Component = 'a', heading, }) => {
+    // The default depth of headings to display in the table of contents.
+    const { minDepth = 2, items: headingItems = [] } = headings || {};
+    const filteredHeadings = useMemo(() => headingItems.filter(({ depth }) => depth >= minDepth && depth <= 4), [minDepth, headingItems]);
+    return (_jsx("div", { className: styles.wrapper, children: _jsxs("dl", { children: [Object.entries(items)
+                    .filter(([, value]) => !!value)
+                    .map(([key, value]) => (_jsxs(Fragment, { children: [_jsx("dt", { children: key }), _jsx("dd", { children: value })] }, key))), filteredHeadings.length > 0 && (_jsxs(_Fragment, { children: [_jsx("dt", { children: heading }), _jsx("dd", { children: _jsx("ol", { children: filteredHeadings.map(head => (_jsx("li", { className: head.depth === 3 ? 'pl-2' : head.depth === 4 ? 'pl-4' : '', children: _jsxs(Component, { href: `#${head?.data?.id}`, children: [' ', head.value] }) }, head.value))) }) })] }))] }) }));
+};
+export default MetaBar;

package/Containers/MetaBar/index.module.css

@@ -0,0 +1,123 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.wrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: calc(var(--spacing, 0.25rem)*8);
+  border-color: var(--color-neutral-200, #e9edf0);
+  padding-inline: calc(var(--spacing, 0.25rem)*4);
+  padding-block: calc(var(--spacing, 0.25rem)*6);
+  overflow-wrap: anywhere;
+  @media (width >= 64rem) {
+    position: sticky;
+  }
+  @media (width >= 64rem) {
+    top: calc(var(--spacing, 0.25rem)*0);
+  }
+  @media (width >= 64rem) {
+    max-height: 100vh;
+  }
+  @media (width >= 64rem) {
+    padding-inline: calc(var(--spacing, 0.25rem)*6);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-color: var(--color-neutral-900, #2c3437);
+  }
+  dl {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: calc(var(--spacing, 0.25rem)*1.5);
+    padding-bottom: calc(var(--spacing, 0.25rem)*12);
+    scrollbar-width: none;
+    @media (width >= 64rem) {
+      max-height: calc(100vh - var(--header-height));
+    }
+    @media (width >= 64rem) {
+      overflow-y: auto;
+    }
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  dt {
+    margin-bottom: calc(var(--spacing, 0.25rem)*2);
+    font-size: var(--text-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+    --tw-font-weight: var(--font-weight-medium, 500);
+    font-weight: var(--font-weight-medium, 500);
+    color: var(--color-neutral-800, #556066);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
+  }
+  dd {
+    margin-bottom: calc(var(--spacing, 0.25rem)*8);
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing, 0.25rem)*2);
+    font-size: var(--text-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+    color: var(--color-neutral-900, #2c3437);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white, #fff);
+    }
+    a {
+      --tw-font-weight: var(--font-weight-semibold, 600);
+      font-weight: var(--font-weight-semibold, 600);
+      color: var(--color-neutral-900, #2c3437);
+      text-decoration-line: underline;
+      @media (width < 670px) {
+        display: inline-block;
+      }
+      @media (width < 670px) {
+        padding-block: calc(var(--spacing, 0.25rem)*1);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-white, #fff);
+      }
+      &:hover {
+        color: var(--color-neutral-700, #6e7b83);
+        &:where([data-theme=dark], [data-theme=dark] *) {
+          color: var(--color-neutral-500, #b1bcc2);
+        }
+      }
+    }
+    ol {
+      display: flex;
+      width: 100%;
+      list-style-type: none;
+      flex-direction: column;
+      gap: calc(var(--spacing, 0.25rem)*1.5);
+      padding: calc(var(--spacing, 0.25rem)*0);
+    }
+    svg {
+      width: calc(var(--spacing, 0.25rem)*4);
+      height: calc(var(--spacing, 0.25rem)*4);
+      color: var(--color-neutral-600, #929fa5);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-400, #cbd4d9);
+      }
+    }
+    &:last-child {
+      margin-bottom: calc(var(--spacing, 0.25rem)*0);
+    }
+  }
+  [data-on-dark] {
+    display: none;
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      display: block;
+    }
+  }
+  [data-on-light] {
+    display: block;
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      display: none;
+    }
+  }
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Containers/NavBar/NavItem/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
+import BaseActiveLink from '#ui/Common/BaseActiveLink';
+import styles from './index.module.css';
+const NavItem = ({ href = '', type = 'nav', children, className, target, ...props }) => (_jsxs(BaseActiveLink, { target: target, href: href, className: classNames(styles.navItem, styles[type], className), activeClassName: styles.active, allowSubPath: href.startsWith('/'), ...props, children: [_jsx("span", { className: styles.label, children: children }), target === '_blank' && _jsx(ArrowUpRightIcon, { className: styles.icon })] }));
+export default NavItem;

package/Containers/NavBar/NavItem/index.module.css

@@ -0,0 +1,74 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.navItem {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  border-radius: var(--radius-sm, 0.25rem);
+  padding-inline: calc(var(--spacing, 0.25rem)*3);
+  padding-block: calc(var(--spacing, 0.25rem)*2);
+  @media (prefers-reduced-motion: no-preference) {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
+  }
+  .label {
+    font-size: var(--text-base, 1rem);
+    line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
+    --tw-font-weight: var(--font-weight-medium, 500);
+    font-weight: var(--font-weight-medium, 500);
+    @media (width >= 64rem) {
+      font-size: var(--text-sm, 0.875rem);
+      line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+    }
+  }
+  .icon {
+    width: calc(var(--spacing, 0.25rem)*3);
+    height: calc(var(--spacing, 0.25rem)*3);
+    color: var(--color-neutral-500, #b1bcc2);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
+  }
+  &:hover {
+    background-color: var(--color-neutral-100, #f6f7f9);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
+  }
+  &.nav {
+    .label {
+      color: var(--color-neutral-900, #2c3437);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-white, #fff);
+      }
+    }
+    &.active {
+      background-color: var(--color-green-600, #417e38);
+      .label {
+        color: var(--color-white, #fff);
+      }
+      .icon {
+        color: var(--color-white, #fff);
+        opacity: 50%;
+      }
+    }
+  }
+  &.footer {
+    .label {
+      color: var(--color-neutral-800, #556066);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-white, #fff);
+      }
+    }
+    &:hover {
+      background-color: var(--color-neutral-100, #f6f7f9);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        background-color: var(--color-neutral-900, #2c3437);
+      }
+    }
+  }
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Containers/NavBar/index.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
+import XMark from '@heroicons/react/24/solid/XMarkIcon';
+import * as Label from '@radix-ui/react-label';
+import classNames from 'classnames';
+import { useState } from 'react';
+import NavItem from '#ui/Containers/NavBar/NavItem';
+import style from './index.module.css';
+const navInteractionIcons = {
+    show: _jsx(Hamburger, { className: style.navInteractionIcon }),
+    close: _jsx(XMark, { className: style.navInteractionIcon }),
+};
+const NavBar = ({ children, Logo, as: Component = 'a', navItems, pathname, sidebarItemTogglerAriaLabel, }) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    return (_jsxs("nav", { className: style.container, children: [_jsxs("div", { className: style.nodeIconAndMobileItemsToggler, children: [_jsx(Component, { className: style.nodeIconWrapper, href: "/", "aria-label": "Home", children: _jsx(Logo, {}) }), _jsx(Label.Root, { className: style.sidebarItemTogglerLabel, htmlFor: "sidebarItemToggler", role: "button", "aria-label": sidebarItemTogglerAriaLabel, children: navInteractionIcons[isMenuOpen ? 'close' : 'show'] })] }), _jsx("input", { className: classNames(['peer', style.sidebarItemToggler]), id: "sidebarItemToggler", type: "checkbox", onChange: e => setIsMenuOpen(() => e.target.checked), "aria-label": sidebarItemTogglerAriaLabel, tabIndex: -1 }), _jsxs("div", { className: `${style.main} hidden peer-checked:flex`, children: [_jsx("div", { className: style.navItems, children: navItems.map(({ text, link, target }) => (_jsx(NavItem, { pathname: pathname, as: Component, href: link, target: target, children: text }, link))) }), _jsx("div", { className: style.actionsWrapper, children: children })] })] }));
+};
+export default NavBar;