@node-core/ui-components 1.0.1-cc5c2626b0639fe2088a736f54169ea3e10ed325 → 1.0.1-da75492230302b0f459aab323d2f6fdac6269a06

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

@@ -1,83 +1,2 @@
-@reference "../../styles/index.css";
-
-.summary {
-  @apply outline-hidden
-    flex
-    h-9
-    cursor-pointer
-    select-none
-    items-center
-    gap-2
-    rounded-md
-    border
-    border-neutral-200
-    p-2
-    text-sm
-    text-neutral-700
-    motion-safe:transition-colors
-    dark:border-neutral-900
-    dark:text-neutral-300;
-
-  &:hover,
-  &:focus-visible {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
-  }
-}
-
-.dropdownContentWrapper {
-  @apply absolute
-    right-0
-    top-full
-    z-50
-    mt-1
-    max-h-80
-    w-52
-    overflow-hidden
-    rounded-sm
-    border
-    border-neutral-200
-    bg-white
-    shadow-lg
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-}
-
-.dropdownContentInner {
-  @apply max-h-80
-    w-52
-    overflow-y-auto;
-}
-
-.dropdownItem {
-  @apply outline-hidden
-    block
-    px-2.5
-    py-1.5
-    text-sm
-    font-medium
-    text-neutral-800
-    no-underline
-    motion-safe:transition-colors
-    dark:text-white;
-
-  &:hover,
-  &:focus-visible {
-    @apply bg-green-600
-      text-white;
-  }
-}
-
-.dropdownLabel {
-  @apply block
-    text-sm
-    font-medium
-    leading-tight;
-}
-
-.dropdownVersions {
-  @apply block
-    text-xs
-    leading-tight
-    opacity-75;
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.summary{height:calc(var(--spacing,.25rem)*9);cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem)*2);border-radius:var(--radius-md,.375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-200,#e9edf0);padding:calc(var(--spacing,.25rem)*2);font-size:var(--text-sm,.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;display:flex}@media (forced-colors:active){.summary{outline-offset:2px;outline:2px solid #0000}}.summary{-webkit-user-select:none;user-select:none}@media (prefers-reduced-motion:no-preference){.summary{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(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}}.summary:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437);color:var(--color-neutral-300,#d9e1e4)}.summary:hover,.summary:focus-visible{background-color:var(--color-neutral-100,#f6f7f9)}:is(.summary:hover,.summary:focus-visible):where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437)}.dropdownContentWrapper{top:100%;right:calc(var(--spacing,.25rem)*0);z-index:50;margin-top:calc(var(--spacing,.25rem)*1);max-height:calc(var(--spacing,.25rem)*80);width:calc(var(--spacing,.25rem)*52);border-radius:var(--radius-sm,.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,#10182808),0px 12px 16px -4px var(--tw-shadow-color,#10182814);position:absolute;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.dropdownContentWrapper{--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))}}.dropdownContentWrapper{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.dropdownContentWrapper:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437);background-color:var(--color-neutral-950,#0d121c)}.dropdownContentInner{max-height:calc(var(--spacing,.25rem)*80);width:calc(var(--spacing,.25rem)*52);overflow-y:auto}.dropdownItem{padding-inline:calc(var(--spacing,.25rem)*2.5);padding-block:calc(var(--spacing,.25rem)*1.5);font-size:var(--text-sm,.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);--tw-outline-style:none;outline-style:none;text-decoration-line:none;display:block}@media (forced-colors:active){.dropdownItem{outline-offset:2px;outline:2px solid #0000}}@media (prefers-reduced-motion:no-preference){.dropdownItem{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(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}}.dropdownItem:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.dropdownItem:hover,.dropdownItem:focus-visible{background-color:var(--color-green-600,#417e38);color:var(--color-white,#fff)}.dropdownLabel{font-size:var(--text-sm,.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);display:block}.dropdownVersions{font-size:var(--text-xs,.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;display:block}@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:0}@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,2 @@
-@reference "../../styles/index.css";
-
-.root {
-  > [role='tabpanel'] > :first-child {
-    @apply rounded-t-none;
-  }
-
-  > 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;
-
-    .trigger {
-      @apply border-b
-        border-b-transparent
-        px-1
-        text-neutral-200;
-
-      &[data-state='active'] {
-        @apply border-b-green-400
-          text-green-400;
-      }
-    }
-
-    .link {
-      @apply hidden
-        items-center
-        gap-2
-        text-center
-        text-neutral-200
-        motion-safe:transition-colors
-        lg:flex;
-
-      & > .icon {
-        @apply size-4
-          text-neutral-300;
-      }
-
-      &:is(:link, :visited) {
-        &:hover {
-          @apply text-neutral-400;
-
-          & > .icon {
-            @apply text-neutral-600;
-          }
-        }
-      }
-    }
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.root>[role=tabpanel]>:first-child{border-top-left-radius:0;border-top-right-radius:0}.root>div:first-of-type{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,.25rem)*2);padding-top:calc(var(--spacing,.25rem)*3);border-top-left-radius:.25rem;border-top-right-radius:.25rem;display:flex}@media (min-width:48rem){.root>div:first-of-type{padding-inline:calc(var(--spacing,.25rem)*4)}}.root>div:first-of-type .trigger{border-bottom-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem)*1);color:var(--color-neutral-200,#e9edf0);border-bottom-width:1px;border-bottom-color:#0000}.root>div:first-of-type .trigger[data-state=active]{border-bottom-color:var(--color-green-400,#84ba64);color:var(--color-green-400,#84ba64)}.root>div:first-of-type .link{align-items:center;gap:calc(var(--spacing,.25rem)*2);text-align:center;color:var(--color-neutral-200,#e9edf0);display:none}@media (prefers-reduced-motion:no-preference){.root>div:first-of-type .link{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(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}}@media (min-width:64rem){.root>div:first-of-type .link{display:flex}}.root>div:first-of-type .link>.icon{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);color:var(--color-neutral-300,#d9e1e4)}.root>div:first-of-type .link:is(:link,:visited):hover{color:var(--color-neutral-400,#cbd4d9)}.root>div:first-of-type .link:is(:link,:visited):hover>.icon{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,2 @@
-@reference "../../styles/index.css";
-
-.dataTag {
-  @apply flex
-    items-center
-    justify-center
-    rounded-full
-    font-semibold
-    text-white;
-
-  &.lg {
-    @apply size-12
-      text-2xl;
-  }
-
-  &.md {
-    @apply size-10
-      text-xl;
-  }
-
-  &.sm {
-    @apply size-8;
-  }
-
-  &.event {
-    @apply bg-accent1-600;
-  }
-
-  &.method {
-    @apply bg-info-600;
-  }
-
-  &.property {
-    @apply bg-green-600;
-  }
-
-  &.class {
-    @apply bg-warning-600;
-  }
-
-  &.module {
-    @apply bg-red-600;
-  }
-
-  &.classMethod {
-    @apply bg-blue-600;
-  }
-
-  &.ctor {
-    @apply bg-accent2-600;
-  }
-
-  &.global {
-    @apply bg-amber-600;
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.dataTag{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-white,#fff);border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}.dataTag.lg{width:calc(var(--spacing,.25rem)*12);height:calc(var(--spacing,.25rem)*12);font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,1.33333))}.dataTag.md{width:calc(var(--spacing,.25rem)*10);height:calc(var(--spacing,.25rem)*10);font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,1.4))}.dataTag.sm{width:calc(var(--spacing,.25rem)*8);height:calc(var(--spacing,.25rem)*8)}.dataTag.event{background-color:var(--color-accent1-600,#9756d6)}.dataTag.method{background-color:var(--color-info-600,#0c7bb3)}.dataTag.property{background-color:var(--color-green-600,#417e38)}.dataTag.class{background-color:var(--color-warning-600,#ae5f00)}.dataTag.module{background-color:var(--color-red-600,oklch(57.7% .245 27.325))}.dataTag.classMethod{background-color:var(--color-blue-600,oklch(54.6% .245 262.881))}.dataTag.ctor{background-color:var(--color-accent2-600,#d6246e)}.dataTag.global{background-color:var(--color-amber-600,oklch(66.6% .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;

package/Common/GlowingBackdrop/index.module.css

@@ -1,32 +1,2 @@
-@reference "../../styles/index.css";
-
-.glowingBackdrop {
-  @apply absolute
-    left-0
-    top-0
-    -z-10
-    size-full
-    opacity-50
-    after:absolute
-    after:inset-0
-    after:m-auto
-    after:aspect-square
-    after:w-[300px]
-    after:rounded-full
-    after:bg-green-300
-    after:blur-[120px]
-    after:content-['']
-    md:opacity-100
-    dark:after:bg-green-700;
-
-  svg {
-    @apply absolute
-      inset-0
-      m-auto
-      aspect-[1.67]
-      max-w-[1004px]
-      object-cover
-      text-neutral-300
-      dark:text-neutral-900/75;
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.glowingBackdrop{top:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);z-index:-10;opacity:.5;width:100%;height:100%;position:absolute}.glowingBackdrop:after{content:var(--tw-content);content:var(--tw-content);inset:calc(var(--spacing,.25rem)*0);content:var(--tw-content);content:var(--tw-content);aspect-ratio:1;content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);background-color:var(--color-green-300,#99cc7d);content:var(--tw-content);--tw-blur:blur(120px);width:300px;filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,);content:var(--tw-content);--tw-content:"";content:var(--tw-content);border-radius:3.40282e38px;margin:auto;position:absolute}@media (min-width:48rem){.glowingBackdrop{opacity:1}}.glowingBackdrop:where([data-theme=dark],[data-theme=dark] *):after{content:var(--tw-content);background-color:var(--color-green-700,#2c682c)}.glowingBackdrop svg{inset:calc(var(--spacing,.25rem)*0);aspect-ratio:1.67;object-fit:cover;max-width:1004px;color:var(--color-neutral-300,#d9e1e4);margin:auto;position:absolute}.glowingBackdrop svg:where([data-theme=dark],[data-theme=dark] *){color:#2c3437bf}@supports (color:color-mix(in lab, red, red)){.glowingBackdrop svg:where([data-theme=dark],[data-theme=dark] *){color:color-mix(in oklab,var(--color-neutral-900,#2c3437)75%,transparent)}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

package/Common/LanguageDropDown/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LanguageIcon } from '@heroicons/react/24/outline';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const LanguageDropdown = ({ onChange = () => { }, currentLanguage, availableLanguages, ariaLabel, }) => {
+    return (_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx("button", { className: styles.languageDropdown, "aria-label": ariaLabel, children: _jsx(LanguageIcon, { height: "20" }) }) }), _jsx(DropdownMenu.Portal, { children: _jsx(DropdownMenu.Content, { align: "start", className: styles.dropDownContent, sideOffset: 5, children: _jsx("div", { children: availableLanguages.map(({ name, code, localName }) => (_jsx(DropdownMenu.Item, { onClick: () => onChange({ name, code, localName }), className: classNames(styles.dropDownItem, {
+                                [styles.currentDropDown]: code === currentLanguage,
+                            }), children: localName }, code))) }) }) })] }));
+};
+export default LanguageDropdown;

package/Common/LanguageDropDown/index.module.css

@@ -1,53 +1,2 @@
-@reference "../../styles/index.css";
-
-.languageDropdown {
-  @apply h-9
-    w-9
-    rounded-md
-    p-2
-    text-neutral-700
-    motion-safe:transition-colors
-    dark:text-neutral-300;
-
-  &:hover {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
-  }
-}
-
-.dropDownContent {
-  @apply max-h-80
-    w-48
-    overflow-hidden
-    rounded-sm
-    border
-    border-neutral-200
-    bg-white
-    shadow-lg
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-
-  > div {
-    @apply max-h-80
-      w-48
-      overflow-y-auto;
-  }
-}
-
-.dropDownItem {
-  @apply outline-hidden
-    cursor-pointer
-    px-2.5
-    py-1.5
-    text-sm
-    font-medium
-    text-neutral-800
-    data-[highlighted]:bg-green-600
-    data-[highlighted]:text-white
-    dark:text-white;
-}
-
-.currentDropDown {
-  @apply bg-green-600
-    text-white;
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.languageDropdown{height:calc(var(--spacing,.25rem)*9);width:calc(var(--spacing,.25rem)*9);border-radius:var(--radius-md,.375rem);padding:calc(var(--spacing,.25rem)*2);color:var(--color-neutral-700,#6e7b83)}@media (prefers-reduced-motion:no-preference){.languageDropdown{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(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}}.languageDropdown:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-300,#d9e1e4)}.languageDropdown:hover{background-color:var(--color-neutral-100,#f6f7f9)}.languageDropdown:hover:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437)}.dropDownContent{max-height:calc(var(--spacing,.25rem)*80);width:calc(var(--spacing,.25rem)*48);border-radius:var(--radius-sm,.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,#10182808),0px 12px 16px -4px var(--tw-shadow-color,#10182814);overflow:hidden}@supports (color:color-mix(in lab, red, red)){.dropDownContent{--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))}}.dropDownContent{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.dropDownContent:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437);background-color:var(--color-neutral-950,#0d121c)}.dropDownContent>div{max-height:calc(var(--spacing,.25rem)*80);width:calc(var(--spacing,.25rem)*48);overflow-y:auto}.dropDownItem{cursor:pointer;padding-inline:calc(var(--spacing,.25rem)*2.5);padding-block:calc(var(--spacing,.25rem)*1.5);font-size:var(--text-sm,.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);--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.dropDownItem{outline-offset:2px;outline:2px solid #0000}}.dropDownItem[data-highlighted]{background-color:var(--color-green-600,#417e38);color:var(--color-white,#fff)}.dropDownItem:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.currentDropDown{background-color:var(--color-green-600,#417e38);color:var(--color-white,#fff)}@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:0}@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}

package/Common/Modal/index.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import * as Dialog from '@radix-ui/react-dialog';
+import styles from './index.module.css';
+const Modal = ({ children, open = false, onOpenChange = () => { }, }) => (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsx(Dialog.Portal, { children: _jsx(Dialog.Overlay, { className: styles.overlay, children: _jsxs(Dialog.Content, { className: styles.content, children: [_jsx(Dialog.Trigger, { className: styles.close, children: _jsx(XMarkIcon, {}) }), children, _jsx(Dialog.Close, {})] }) }) }) }));
+const Title = ({ children }) => (_jsx(Dialog.Title, { className: styles.title, children: children }));
+const Description = ({ children }) => (_jsx(Dialog.Description, { className: styles.description, children: children }));
+const Content = ({ children }) => (_jsx("main", { className: styles.wrapper, children: children }));
+export { Modal, Title, Description, Content };

package/Common/Modal/index.module.css

@@ -1,79 +1,2 @@
-@reference "../../styles/index.css";
-
-.overlay {
-  @apply fixed
-    inset-0
-    flex
-    justify-center
-    bg-white/40
-    backdrop-blur-[2px]
-    dark:bg-neutral-950/40;
-
-  .content {
-    @apply xs:p-6
-      relative
-      m-4
-      inline-flex
-      w-full
-      max-w-3xl
-      flex-col
-      gap-2
-      overflow-y-auto
-      rounded
-      border
-      border-neutral-200
-      bg-white
-      p-8
-      focus:outline-none
-      sm:my-20
-      xl:p-12
-      dark:bg-neutral-950;
-  }
-
-  .close {
-    @apply absolute
-      right-3
-      top-3
-      block
-      size-7
-      cursor-pointer
-      rounded-sm
-      p-1
-      hover:bg-neutral-100
-      focus:outline-none
-      focus:ring-2
-      focus:ring-neutral-200
-      dark:hover:bg-neutral-900
-      dark:focus:ring-neutral-900;
-  }
-
-  .title {
-    @apply text-3xl
-      font-semibold
-      text-neutral-900
-      dark:text-white;
-  }
-
-  .description {
-    @apply font-regular
-      mb-2
-      text-lg
-      text-neutral-800
-      dark:text-neutral-200;
-  }
-
-  .wrapper {
-    @apply flex
-      flex-col
-      gap-4;
-
-    pre {
-      @apply overflow-auto;
-    }
-
-    code,
-    a {
-      @apply break-words;
-    }
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.overlay{inset:calc(var(--spacing,.25rem)*0);background-color:#fff6;justify-content:center;display:flex;position:fixed}@supports (color:color-mix(in lab, red, red)){.overlay{background-color:color-mix(in oklab,var(--color-white,#fff)40%,transparent)}}.overlay{--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.overlay:where([data-theme=dark],[data-theme=dark] *){background-color:#0d121c66}@supports (color:color-mix(in lab, red, red)){.overlay:where([data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab,var(--color-neutral-950,#0d121c)40%,transparent)}}.overlay .content{margin:calc(var(--spacing,.25rem)*4);width:100%;max-width:var(--container-3xl,48rem);gap:calc(var(--spacing,.25rem)*2);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-200,#e9edf0);background-color:var(--color-white,#fff);padding:calc(var(--spacing,.25rem)*8);border-radius:.25rem;flex-direction:column;display:inline-flex;position:relative;overflow-y:auto}.overlay .content:focus{--tw-outline-style:none;outline-style:none}@media (min-width:670px){.overlay .content{padding:calc(var(--spacing,.25rem)*6)}}@media (min-width:40rem){.overlay .content{margin-block:calc(var(--spacing,.25rem)*20)}}@media (min-width:80rem){.overlay .content{padding:calc(var(--spacing,.25rem)*12)}}.overlay .content:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-950,#0d121c)}.overlay .close{top:calc(var(--spacing,.25rem)*3);right:calc(var(--spacing,.25rem)*3);width:calc(var(--spacing,.25rem)*7);height:calc(var(--spacing,.25rem)*7);cursor:pointer;border-radius:var(--radius-sm,.25rem);padding:calc(var(--spacing,.25rem)*1);display:block;position:absolute}@media (hover:hover){.overlay .close:hover{background-color:var(--color-neutral-100,#f6f7f9)}}.overlay .close:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-neutral-200,#e9edf0);--tw-outline-style:none;outline-style:none}@media (hover:hover){.overlay .close:where([data-theme=dark],[data-theme=dark] *):hover{background-color:var(--color-neutral-900,#2c3437)}}.overlay .close:where([data-theme=dark],[data-theme=dark] *):focus{--tw-ring-color:var(--color-neutral-900,#2c3437)}.overlay .title{font-size:var(--text-3xl,1.875rem);line-height:var(--tw-leading,var(--text-3xl--line-height,1.2));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-neutral-900,#2c3437)}.overlay .title:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.overlay .description{margin-bottom:calc(var(--spacing,.25rem)*2);font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,1.55556));--tw-font-weight:var(--font-weight-regular,400);font-weight:var(--font-weight-regular,400);color:var(--color-neutral-800,#556066)}.overlay .description:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.overlay .wrapper{gap:calc(var(--spacing,.25rem)*4);flex-direction:column;display:flex}.overlay .wrapper pre{overflow:auto}.overlay .wrapper code,.overlay .wrapper a{overflow-wrap:break-word}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@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:0}@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}

package/Common/NodejsLogo/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NodejsIcon from '#ui/Icons/Logos/Nodejs';
+import style from './index.module.css';
+const NodejsLogo = props => {
+    return _jsx(NodejsIcon, { className: style.nodejsLogo, ...props });
+};
+export default NodejsLogo;

package/Common/NodejsLogo/index.module.css

@@ -1,6 +1,2 @@
-@reference "../../styles/index.css";
-
-.nodejsLogo {
-  @apply h-6
-    w-20;
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.nodejsLogo{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.25rem)*20)}

package/Common/Notification/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const Notification = ({ open, duration = 5000, onChange, children, className, }) => (_jsx(ToastPrimitive.Root, { open: open, duration: duration, onOpenChange: onChange, className: classNames(styles.root, className), children: _jsx(ToastPrimitive.Title, { className: styles.message, children: children }) }));
+export default Notification;

package/Common/Notification/index.module.css

@@ -1,20 +1,2 @@
-@reference "../../styles/index.css";
-
-.root {
-  @apply m-6
-    rounded-sm
-    border
-    border-neutral-200
-    bg-white
-    px-4
-    py-3
-    shadow-lg
-    dark:border-neutral-800
-    dark:bg-neutral-900;
-}
-
-.message {
-  @apply font-medium
-    text-green-600
-    dark:text-white;
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.root{margin:calc(var(--spacing,.25rem)*6);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-200,#e9edf0);background-color:var(--color-white,#fff);padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);--tw-shadow:0px 4px 6px -2px var(--tw-shadow-color,#10182808),0px 12px 16px -4px var(--tw-shadow-color,#10182814)}@supports (color:color-mix(in lab, red, red)){.root{--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))}}.root{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.root:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-800,#556066);background-color:var(--color-neutral-900,#2c3437)}.message{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-green-600,#417e38)}.message:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}@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:0}@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}

package/Common/Preview/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import HexagonGrid from '#ui/Icons/HexagonGrid';
+import JsWhiteIcon from '#ui/Icons/Logos/JsWhite';
+import styles from './index.module.css';
+const Preview = ({ type = 'announcements', title }) => (_jsx("div", { className: classNames(styles.root, styles[type]), children: _jsxs("div", { className: styles.container, "aria-hidden": true, children: [_jsx(HexagonGrid, { className: styles.hexagon }), _jsx(JsWhiteIcon, { className: styles.logo }), title] }) }));
+export default Preview;

package/Common/Preview/index.module.css

@@ -1,79 +1,2 @@
-@reference "../../styles/index.css";
-
-.root {
-  @apply after:bg-gradient-radial
-    @container/preview
-    relative
-    flex
-    aspect-[1.90/1]
-    items-center
-    rounded-sm
-    border
-    border-neutral-900
-    bg-neutral-950
-    after:absolute
-    after:inset-0
-    after:m-auto
-    after:aspect-square
-    after:w-1/3
-    after:rounded-full
-    after:blur-2xl
-    after:content-[''];
-
-  &.announcements {
-    @apply after:from-green-700/90;
-  }
-
-  &.release {
-    @apply after:from-info-600/90;
-  }
-
-  &.vulnerability {
-    @apply after:from-warning-600/90;
-  }
-
-  .container {
-    @apply @sm/preview:text-base
-      @md/preview:gap-6
-      @md/preview:text-lg
-      @lg/preview:gap-8
-      @lg/preview:text-xl
-      @xl/preview:gap-12
-      @xl/preview:text-2xl
-      @2xl/preview:text-3xl
-      z-10
-      mx-auto
-      flex
-      w-2/3
-      max-w-xl
-      flex-col
-      gap-4
-      text-center
-      text-xs
-      font-semibold
-      text-white;
-
-    .hexagon {
-      @apply @md/preview:h-3/5
-        @md/preview:w-3/5
-        @lg/preview:h-2/3
-        @lg/preview:w-2/3
-        @xl/preview:h-3/5
-        @xl/preview:w-3/5
-        @2xl/preview:h-2/3
-        @2xl/preview:w-2/3
-        absolute
-        inset-0
-        m-auto
-        size-full;
-    }
-
-    .logo {
-      @apply @md/preview:size-14
-        @lg/preview:size-16
-        @xl/preview:size-20
-        mx-auto
-        size-6;
-    }
-  }
-}
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.root{aspect-ratio:1.9;border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-900,#2c3437);background-color:var(--color-neutral-950,#0d121c);align-items:center;display:flex;position:relative;container:preview/inline-size}.root:after{content:var(--tw-content);content:var(--tw-content);inset:calc(var(--spacing,.25rem)*0);content:var(--tw-content);content:var(--tw-content);aspect-ratio:1;content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);background-image:radial-gradient(var(--tw-gradient-from),var(--tw-gradient-to));content:var(--tw-content);--tw-blur:blur(var(--blur-2xl,40px));width:33.3333%;filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,);content:var(--tw-content);--tw-content:"";content:var(--tw-content);border-radius:3.40282e38px;margin:auto;position:absolute}.root.announcements:after{content:var(--tw-content);--tw-gradient-from:#2c682ce6}@supports (color:color-mix(in lab, red, red)){.root.announcements:after{--tw-gradient-from:color-mix(in oklab,var(--color-green-700,#2c682c)90%,transparent)}}.root.announcements:after{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.root.release:after{content:var(--tw-content);--tw-gradient-from:#0c7bb3e6}@supports (color:color-mix(in lab, red, red)){.root.release:after{--tw-gradient-from:color-mix(in oklab,var(--color-info-600,#0c7bb3)90%,transparent)}}.root.release:after{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.root.vulnerability:after{content:var(--tw-content);--tw-gradient-from:#ae5f00e6}@supports (color:color-mix(in lab, red, red)){.root.vulnerability:after{--tw-gradient-from:color-mix(in oklab,var(--color-warning-600,#ae5f00)90%,transparent)}}.root.vulnerability:after{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.root .container{z-index:10;width:66.6667%;max-width:var(--container-xl,36rem);gap:calc(var(--spacing,.25rem)*4);text-align:center;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-white,#fff);flex-direction:column;margin-inline:auto;display:flex}@container preview (min-width:24rem){.root .container{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,1.5))}}@container preview (min-width:28rem){.root .container{gap:calc(var(--spacing,.25rem)*6);font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,1.55556))}}@container preview (min-width:32rem){.root .container{gap:calc(var(--spacing,.25rem)*8);font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,1.4))}}@container preview (min-width:36rem){.root .container{gap:calc(var(--spacing,.25rem)*12);font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,1.33333))}}@container preview (min-width:42rem){.root .container{font-size:var(--text-3xl,1.875rem);line-height:var(--tw-leading,var(--text-3xl--line-height,1.2))}}.root .container .hexagon{inset:calc(var(--spacing,.25rem)*0);width:100%;height:100%;margin:auto;position:absolute}@container preview (min-width:28rem){.root .container .hexagon{width:60%;height:60%}}@container preview (min-width:32rem){.root .container .hexagon{width:66.6667%;height:66.6667%}}@container preview (min-width:36rem){.root .container .hexagon{width:60%;height:60%}}@container preview (min-width:42rem){.root .container .hexagon{width:66.6667%;height:66.6667%}}.root .container .logo{width:calc(var(--spacing,.25rem)*6);height:calc(var(--spacing,.25rem)*6);margin-inline:auto}@container preview (min-width:28rem){.root .container .logo{width:calc(var(--spacing,.25rem)*14);height:calc(var(--spacing,.25rem)*14)}}@container preview (min-width:32rem){.root .container .logo{width:calc(var(--spacing,.25rem)*16);height:calc(var(--spacing,.25rem)*16)}}@container preview (min-width:36rem){.root .container .logo{width:calc(var(--spacing,.25rem)*20);height:calc(var(--spacing,.25rem)*20)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}