@node-core/ui-components 1.0.1-1d5a7f279720e5e4da66f43d06a6a9a14cb7c2d2 → 1.0.1-2a5d26feb99da533fd0280486510163fa30d4322

package/Common/Breadcrumbs/BreadcrumbItem/index.module.css

@@ -1,41 +1,52 @@
-@reference "../../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .item {
-  @apply flex
-    max-w-fit
-    items-center
-    gap-5
-    truncate
-    text-sm
-    font-medium;
-
+  display: flex;
+  max-width: fit-content;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem)*5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  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);
   &:last-child {
-    @apply w-full;
+    width: 100%;
   }
-
   a {
-    @apply shrink
-      grow;
+    flex-shrink: 1;
+    flex-grow: 1;
   }
-
   &,
   > a,
   > a:hover {
-    @apply text-neutral-800
-      motion-safe:transition-colors
-      dark:text-neutral-200;
+    color: var(--color-neutral-800, #556066);
+    @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));
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
   }
-
   &.visuallyHidden {
-    @apply hidden;
+    display: none;
   }
-
   .separator {
-    @apply size-4
-      max-w-fit
-      shrink-0
-      grow
-      text-neutral-600
-      dark:text-neutral-400;
+    width: calc(var(--spacing, 0.25rem)*4);
+    height: calc(var(--spacing, 0.25rem)*4);
+    max-width: fit-content;
+    flex-shrink: 0;
+    flex-grow: 1;
+    color: var(--color-neutral-600, #929fa5);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-400, #cbd4d9);
+    }
   }
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/Breadcrumbs/BreadcrumbLink/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import styles from './index.module.css';
+const BreadcrumbLink = ({ href, active, as: Component = 'a', ...props }) => (_jsx(Component, { itemScope: true, itemType: "http://schema.org/Thing", itemProp: "item", itemID: href?.toString(), href: href, className: classNames(styles.link, { [styles.active]: active }, props.className), "aria-current": active ? 'page' : undefined, ...props, children: _jsx("span", { itemProp: "name", children: props.children }) }));
+export default BreadcrumbLink;

package/Common/Breadcrumbs/BreadcrumbLink/index.module.css

@@ -1,22 +1,32 @@
-@reference "../../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .link {
-  @apply max-w-fit
-    truncate;
-
+  max-width: fit-content;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   &.active {
-    @apply rounded
-      bg-green-600
-      px-2
-      py-1
-      font-semibold
-      text-white
-      motion-safe:transition-colors
-      dark:text-white;
-
+    border-radius: 0.25rem;
+    background-color: var(--color-green-600, #417e38);
+    padding-inline: calc(var(--spacing, 0.25rem)*2);
+    padding-block: calc(var(--spacing, 0.25rem)*1);
+    --tw-font-weight: var(--font-weight-semibold, 600);
+    font-weight: var(--font-weight-semibold, 600);
+    color: var(--color-white, #fff);
+    @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));
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white, #fff);
+    }
     &:hover {
-      @apply bg-green-700
-        text-white;
+      background-color: var(--color-green-700, #2c682c);
+      color: var(--color-white, #fff);
     }
   }
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/Breadcrumbs/BreadcrumbRoot/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './index.module.css';
+const BreadcrumbRoot = ({ children, ...props }) => (_jsx("nav", { "aria-label": "breadcrumb", ...props, children: _jsx("ol", { itemScope: true, itemType: "https://schema.org/BreadcrumbList", className: styles.list, children: children }) }));
+export default BreadcrumbRoot;

package/Common/Breadcrumbs/BreadcrumbRoot/index.module.css

@@ -1,9 +1,10 @@
-@reference "../../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .list {
-  @apply xs:w-full
-    flex
-    w-screen
-    gap-5
-    px-6;
+  display: flex;
+  width: 100vw;
+  gap: calc(var(--spacing, 0.25rem)*5);
+  padding-inline: calc(var(--spacing, 0.25rem)*6);
+  @media (width >= 670px) {
+    width: 100%;
+  }
 }

package/Common/Breadcrumbs/BreadcrumbTruncatedItem/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BreadcrumbItem from '#ui/Common/Breadcrumbs/BreadcrumbItem';
+const BreadcrumbTruncatedItem = () => (_jsx(BreadcrumbItem, { disableMicrodata: true, children: _jsx("button", { disabled: true, children: "\u2026" }) }));
+export default BreadcrumbTruncatedItem;

package/Common/Breadcrumbs/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import BreadcrumbHomeLink from '#ui/Common/Breadcrumbs/BreadcrumbHomeLink';
+import BreadcrumbItem from '#ui/Common/Breadcrumbs/BreadcrumbItem';
+import BreadcrumbLink from '#ui/Common/Breadcrumbs/BreadcrumbLink';
+import BreadcrumbRoot from '#ui/Common/Breadcrumbs/BreadcrumbRoot';
+import BreadcrumbTruncatedItem from '#ui/Common/Breadcrumbs/BreadcrumbTruncatedItem';
+const Breadcrumbs = ({ links = [], maxLength = 5, hideHome = false, as = 'a', homeLinkAriaLabel, }) => {
+    const totalLength = links.length + +!hideHome;
+    const lengthOffset = maxLength - totalLength;
+    const isOverflow = lengthOffset < 0;
+    const items = useMemo(() => links.map((link, index, items) => {
+        const position = index + 1;
+        const isLastItem = index === items.length - 1;
+        const hidden = 
+        // We add 1 here to take into account of the truncated breadcrumb.
+        position <= Math.abs(lengthOffset) + 1 && isOverflow && !isLastItem;
+        return (_jsx(BreadcrumbItem, { hidden: hidden, hideSeparator: isLastItem, position: position + +!hideHome, children: link.href || isLastItem ? (_jsx(BreadcrumbLink, { as: as, href: link.href || undefined, active: isLastItem, children: link.label })) : (_jsx("span", { className: "opacity-70", children: link.label })) }, link.label.toString()));
+    }), [hideHome, isOverflow, lengthOffset, links]);
+    return (_jsxs(BreadcrumbRoot, { children: [!hideHome && (_jsx(BreadcrumbItem, { position: 1, children: _jsx(BreadcrumbHomeLink, { as: as, "aria-label": homeLinkAriaLabel }) })), isOverflow && _jsx(BreadcrumbTruncatedItem, {}), items] }));
+};
+export default Breadcrumbs;

package/Common/ChangeHistory/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ClockIcon } from '@heroicons/react/24/outline';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const ChangeHistory = ({ label = 'History', changes = [], className, as: As = 'a', 'aria-label': ariaLabel = label, ...props }) => (_jsx("div", { className: classNames('relative', 'inline-block', className), ...props, children: _jsxs("details", { className: "group", children: [_jsxs("summary", { className: styles.summary, role: "button", "aria-haspopup": "menu", children: [_jsx(ClockIcon, { className: "size-4" }), _jsx("span", { children: label }), _jsx(ChevronDownIcon, { className: "size-3 group-open:rotate-180 motion-safe:transition-transform" })] }), _jsx("div", { className: styles.dropdownContentWrapper, role: "menu", "aria-label": ariaLabel, children: _jsx("div", { className: styles.dropdownContentInner, children: changes.map((change, index) => {
+                        const MenuItem = change.url ? As : 'div';
+                        return (_jsxs(MenuItem, { className: styles.dropdownItem, role: "menuitem", tabIndex: 0, "aria-label": `${change.label}: ${change.versions.join(', ')}`, href: change.url, children: [_jsx("div", { className: styles.dropdownLabel, children: change.label }), _jsx("div", { className: styles.dropdownVersions, children: change.versions.join(', ') })] }, index));
+                    }) }) })] }) }));
+export default ChangeHistory;

package/Common/ChangeHistory/index.module.css

@@ -0,0 +1,198 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.summary {
+  display: flex;
+  height: calc(var(--spacing, 0.25rem)*9);
+  cursor: pointer;
+  align-items: center;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  border-radius: var(--radius-md, 0.375rem);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-neutral-200, #e9edf0);
+  padding: 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-700, #6e7b83);
+  --tw-outline-style: none;
+  outline-style: none;
+  @media (forced-colors: active) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  -webkit-user-select: none;
+  user-select: none;
+  @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));
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-color: var(--color-neutral-900, #2c3437);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-neutral-300, #d9e1e4);
+  }
+  &:hover,
+  &:focus-visible {
+    background-color: var(--color-neutral-100, #f6f7f9);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-neutral-900, #2c3437);
+    }
+  }
+}
+.dropdownContentWrapper {
+  position: absolute;
+  top: 100%;
+  right: calc(var(--spacing, 0.25rem)*0);
+  z-index: 50;
+  margin-top: calc(var(--spacing, 0.25rem)*1);
+  max-height: calc(var(--spacing, 0.25rem)*80);
+  width: calc(var(--spacing, 0.25rem)*52);
+  overflow: hidden;
+  border-radius: var(--radius-sm, 0.25rem);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-neutral-200, #e9edf0);
+  background-color: var(--color-white, #fff);
+  --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] *) {
+    border-color: var(--color-neutral-900, #2c3437);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-color: var(--color-neutral-950, #0d121c);
+  }
+}
+.dropdownContentInner {
+  max-height: calc(var(--spacing, 0.25rem)*80);
+  width: calc(var(--spacing, 0.25rem)*52);
+  overflow-y: auto;
+}
+.dropdownItem {
+  display: block;
+  padding-inline: calc(var(--spacing, 0.25rem)*2.5);
+  padding-block: calc(var(--spacing, 0.25rem)*1.5);
+  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);
+  text-decoration-line: none;
+  --tw-outline-style: none;
+  outline-style: none;
+  @media (forced-colors: active) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  @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));
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    color: var(--color-white, #fff);
+  }
+  &:hover,
+  &:focus-visible {
+    background-color: var(--color-green-600, #417e38);
+    color: var(--color-white, #fff);
+  }
+}
+.dropdownLabel {
+  display: block;
+  font-size: var(--text-sm, 0.875rem);
+  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+  --tw-leading: var(--leading-tight, 1.25);
+  line-height: var(--leading-tight, 1.25);
+  --tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+}
+.dropdownVersions {
+  display: block;
+  font-size: var(--text-xs, 0.75rem);
+  line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
+  --tw-leading: var(--leading-tight, 1.25);
+  line-height: var(--leading-tight, 1.25);
+  opacity: 75%;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@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;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}

package/Common/CodeTabs/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tabs from '#ui/Common/Tabs';
+import styles from './index.module.css';
+const CodeTabs = ({ ...props }) => (_jsx(Tabs, { ...props, className: styles.root, triggerClassName: styles.trigger }));
+export default CodeTabs;

package/Common/CodeTabs/index.module.css

@@ -1,56 +1,67 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .root {
   > [role='tabpanel'] > :first-child {
-    @apply rounded-t-none;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
-
   > div:nth-of-type(1) {
-    @apply flex
-      rounded-t
-      border-x
-      border-t
-      border-neutral-900
-      bg-neutral-950
-      px-2
-      pt-3
-      md:px-4;
-
+    display: flex;
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-neutral-900, #2c3437);
+    background-color: var(--color-neutral-950, #0d121c);
+    padding-inline: calc(var(--spacing, 0.25rem)*2);
+    padding-top: calc(var(--spacing, 0.25rem)*3);
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing, 0.25rem)*4);
+    }
     .trigger {
-      @apply border-b
-        border-b-transparent
-        px-1
-        text-neutral-200;
-
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+      border-bottom-color: transparent;
+      padding-inline: calc(var(--spacing, 0.25rem)*1);
+      color: var(--color-neutral-200, #e9edf0);
       &[data-state='active'] {
-        @apply border-b-green-400
-          text-green-400;
+        border-bottom-color: var(--color-green-400, #84ba64);
+        color: var(--color-green-400, #84ba64);
       }
     }
-
     .link {
-      @apply hidden
-        items-center
-        gap-2
-        text-center
-        text-neutral-200
-        motion-safe:transition-colors
-        lg:flex;
-
+      display: none;
+      align-items: center;
+      gap: calc(var(--spacing, 0.25rem)*2);
+      text-align: center;
+      color: var(--color-neutral-200, #e9edf0);
+      @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));
+      }
+      @media (width >= 64rem) {
+        display: flex;
+      }
       & > .icon {
-        @apply size-4
-          text-neutral-300;
+        width: calc(var(--spacing, 0.25rem)*4);
+        height: calc(var(--spacing, 0.25rem)*4);
+        color: var(--color-neutral-300, #d9e1e4);
       }
-
       &:is(:link, :visited) {
         &:hover {
-          @apply text-neutral-400;
-
+          color: var(--color-neutral-400, #cbd4d9);
           & > .icon {
-            @apply text-neutral-600;
+            color: var(--color-neutral-600, #929fa5);
           }
         }
       }
     }
   }
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/Common/DataTag/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import styles from './index.module.css';
+// These symbols match up with the types used in
+// node core, and the ones defined at
+// https://github.com/nodejs/api-docs-tooling/blob/main/src/types.d.ts#L22 (`HeadingMetadataEntry['type']`)
+const symbolMap = {
+    event: 'E',
+    method: 'M',
+    property: 'P',
+    class: 'C',
+    module: 'M',
+    classMethod: 'S',
+    global: 'G',
+    ctor: 'C',
+};
+const DataTag = ({ kind, size = 'md' }) => (_jsx("div", { className: classNames(styles.dataTag, styles[size], styles[kind]), children: _jsx("span", { children: symbolMap[kind] }) }));
+export default DataTag;

package/Common/DataTag/index.module.css

@@ -1,56 +1,54 @@
-@reference "../../styles/index.css";
-
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .dataTag {
-  @apply flex
-    items-center
-    justify-center
-    rounded-full
-    font-semibold
-    text-white;
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(infinity*1px);
+  --tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-white, #fff);
   &.lg {
-    @apply size-12
-      text-2xl;
+    width: calc(var(--spacing, 0.25rem)*12);
+    height: calc(var(--spacing, 0.25rem)*12);
+    font-size: var(--text-2xl, 1.5rem);
+    line-height: var(--tw-leading, var(--text-2xl--line-height, 1.33333));
   }
-
   &.md {
-    @apply size-10
-      text-xl;
+    width: calc(var(--spacing, 0.25rem)*10);
+    height: calc(var(--spacing, 0.25rem)*10);
+    font-size: var(--text-xl, 1.25rem);
+    line-height: var(--tw-leading, var(--text-xl--line-height, 1.4));
   }
-
   &.sm {
-    @apply size-8;
+    width: calc(var(--spacing, 0.25rem)*8);
+    height: calc(var(--spacing, 0.25rem)*8);
   }
-
   &.event {
-    @apply bg-accent1-600;
+    background-color: var(--color-accent1-600, #9756d6);
   }
-
   &.method {
-    @apply bg-info-600;
+    background-color: var(--color-info-600, #0c7bb3);
   }
-
   &.property {
-    @apply bg-green-600;
+    background-color: var(--color-green-600, #417e38);
   }
-
   &.class {
-    @apply bg-warning-600;
+    background-color: var(--color-warning-600, #ae5f00);
   }
-
   &.module {
-    @apply bg-red-600;
+    background-color: var(--color-red-600, oklch(0.577 0.245 27.325));
   }
-
   &.classMethod {
-    @apply bg-blue-600;
+    background-color: var(--color-blue-600, oklch(0.546 0.245 262.881));
   }
-
   &.ctor {
-    @apply bg-accent2-600;
+    background-color: var(--color-accent2-600, #d6246e);
   }
-
   &.global {
-    @apply bg-amber-600;
+    background-color: var(--color-amber-600, oklch(0.666 0.179 58.318));
   }
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/GlowingBackdrop/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import HexagonGrid from '#ui/Icons/HexagonGrid';
+import styles from './index.module.css';
+const GlowingBackdrop = () => (_jsx("div", { className: styles.glowingBackdrop, children: _jsx(HexagonGrid, {}) }));
+export default GlowingBackdrop;