@node-core/ui-components 1.0.1-ab0ba1dcb1d91392c44e91b1e74e9f565e460543 → 1.0.1-b8e314e799e27da854d47f211c1fed36810b969a

package/Common/AlertBox/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import styles from './index.module.css';
+const AlertBox = ({ level, title, children, size = 'default', }) => (_jsxs("div", { className: classNames(styles.alertBox, styles[level], styles[size]), children: [_jsx("span", { className: styles.title, children: title }), _jsx("span", { children: children })] }));
+export default AlertBox;

package/Common/AlertBox/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.title{min-width:max-content}.alertBox{align-items:center;gap:calc(var(--spacing,.25rem)*2);border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));color:var(--color-white,#fff);flex-direction:row;display:flex}.alertBox a{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);color:var(--color-white,#fff);text-decoration-line:underline}@media (hover:hover){.alertBox a:hover{color:var(--color-white,#fff)}}.alertBox a:hover{text-decoration-line:none}.alertBox.small{gap:calc(var(--spacing,.25rem)*1);padding-block:calc(var(--spacing,.25rem)*2);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333))}.alertBox.small .title{padding-inline:calc(var(--spacing,.25rem)*1)}.alertBox .title{border-radius:var(--radius-xs,.125rem);padding-inline:calc(var(--spacing,.25rem)*1.5)}.alertBox svg{width:calc(var(--spacing,.25rem)*5);height:calc(var(--spacing,.25rem)*5);display:inline}.alertBox.info{background-color:var(--color-info-600,#0c7bb3)}.alertBox.info .title{background-color:var(--color-info-700,#066291)}.alertBox.success{background-color:var(--color-green-600,#417e38)}.alertBox.success .title{background-color:var(--color-green-700,#2c682c)}.alertBox.warning{background-color:var(--color-warning-600,#ae5f00)}.alertBox.warning .title{background-color:var(--color-warning-700,#8b4d04)}.alertBox.danger{background-color:var(--color-danger-600,#de1a1b)}.alertBox.danger .title{background-color:var(--color-danger-700,#b80c0c)}.alertBox.neutral{background-color:var(--color-neutral-600,#929fa5)}.alertBox.neutral .title{background-color:var(--color-neutral-700,#6e7b83)}.alertBox code{all:unset;font-family:var(--font-ibm-plex-mono,var(--font-ibm-plex-mono))}@property --tw-font-weight{syntax:"*";inherits:false}

package/Common/AvatarGroup/Avatar/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import styles from './index.module.css';
+const Avatar = forwardRef(({ image, nickname, name, fallback, url, size = 'small', as: Component = 'a', ...props }, ref) => {
+    if (!url)
+        Component = 'div';
+    return (_jsx(RadixAvatar.Root, { ...props, ref: ref, className: classNames(styles.avatar, styles[size], props.className), children: _jsxs(Component, { href: url || undefined, target: url ? '_blank' : undefined, className: styles.wrapper, children: [_jsx(RadixAvatar.Image, { loading: "lazy", decoding: "async", src: image, alt: name || nickname, className: styles.item }), _jsx(RadixAvatar.Fallback, { className: classNames(styles.item, styles[size]), children: fallback })] }) }));
+});
+export default Avatar;

package/Common/AvatarGroup/Avatar/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.item{height:100%;max-height:calc(var(--spacing,.25rem)*12);width:100%;max-width:calc(var(--spacing,.25rem)*12);border-style:var(--tw-border-style);background-color:var(--color-neutral-100,#f6f7f9);object-fit:cover;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333));color:var(--color-neutral-800,#556066);border-width:2px;border-color:#0000;border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}@media (min-width:670px){.item{max-height:calc(var(--spacing,.25rem)*10);max-width:calc(var(--spacing,.25rem)*10)}}.item:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437);color:var(--color-neutral-300,#d9e1e4)}.avatar{width:calc(var(--spacing,.25rem)*8);height:calc(var(--spacing,.25rem)*8)}@media not all and (min-width:670px){.avatar .wrapper{padding-block:calc(var(--spacing,.25rem)*0);display:block}}.small{width:calc(var(--spacing,.25rem)*10);height:calc(var(--spacing,.25rem)*10)}@media (min-width:670px){.small{width:calc(var(--spacing,.25rem)*8);height:calc(var(--spacing,.25rem)*8)}}.medium{width:calc(var(--spacing,.25rem)*10);height:calc(var(--spacing,.25rem)*10)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}

package/Common/AvatarGroup/Overlay/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import Avatar from '#ui/Common/AvatarGroup/Avatar';
+import styles from './index.module.css';
+const AvatarOverlay = ({ image, name, nickname, fallback, url, as: Component = 'a', }) => (_jsxs(Component, { className: styles.overlay, href: url, target: "_blank", children: [_jsx(Avatar, { image: image, name: name, nickname: nickname, fallback: fallback, size: "medium" }), _jsxs("div", { className: styles.user, children: [name && _jsx("div", { className: styles.name, children: name }), nickname && _jsx("div", { className: styles.nickname, children: nickname })] }), _jsx(ArrowUpRightIcon, { className: styles.arrow })] }));
+export default AvatarOverlay;

package/Common/AvatarGroup/Overlay/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.overlay{min-width:calc(var(--spacing,.25rem)*56);align-items:center;gap:calc(var(--spacing,.25rem)*2);padding:calc(var(--spacing,.25rem)*3);display:flex}.user{flex-grow:1}.name{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-neutral-900,#2c3437)}.name:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-300,#d9e1e4)}.nickname{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-neutral-700,#6e7b83)}.nickname:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-500,#b1bcc2)}.arrow{width:calc(var(--spacing,.25rem)*3);fill:var(--color-neutral-600,#929fa5)}.arrow:where([data-theme=dark],[data-theme=dark] *){fill:var(--color-white,#fff)}@property --tw-font-weight{syntax:"*";inherits:false}

package/Common/AvatarGroup/index.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useState, useMemo } from 'react';
+import Avatar from '#ui/Common/AvatarGroup/Avatar';
+import avatarstyles from '#ui/Common/AvatarGroup/Avatar/index.module.css';
+import AvatarOverlay from '#ui/Common/AvatarGroup/Overlay';
+import Tooltip from '#ui/Common/Tooltip';
+import styles from './index.module.css';
+const AvatarGroup = ({ avatars, limit = 10, isExpandable = true, size = 'small', container, as, }) => {
+    const [showMore, setShowMore] = useState(false);
+    const renderAvatars = useMemo(() => avatars.slice(0, showMore ? avatars.length : limit), [avatars, limit, showMore]);
+    const handleShowMoreClick = isExpandable
+        ? () => setShowMore(prev => !prev)
+        : undefined;
+    return (_jsxs("div", { className: classNames(styles.avatarGroup, styles[size]), children: [renderAvatars.map(avatar => (_jsx(Tooltip, { asChild: true, container: container, content: _jsx(AvatarOverlay, { ...avatar, as: as }), children: _jsx(Avatar, { ...avatar, size: size, className: classNames({
+                        'cursor-pointer': avatar.url,
+                        'pointer-events-none': !avatar.url,
+                    }), as: as }) }, avatar.nickname))), avatars.length > limit && (_jsx("span", { onClick: handleShowMoreClick, className: classNames(avatarstyles.avatar, avatarstyles[size], 'cursor-pointer'), children: _jsx("span", { className: avatarstyles.item, children: `${showMore ? '-' : '+'}${avatars.length - limit}` }) }))] }));
+};
+export default AvatarGroup;

package/Common/AvatarGroup/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.avatarGroup{flex-wrap:wrap;align-items:center;display:flex}.small>span{margin-left:calc(var(--spacing,.25rem)*-2)}.small>span:first-child{margin-left:calc(var(--spacing,.25rem)*0)}.medium>span{margin-left:calc(var(--spacing,.25rem)*-2.5)}.medium>span:first-child{margin-left:calc(var(--spacing,.25rem)*0)}

package/Common/Badge/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 Badge = ({ kind = 'default', size = 'medium', className, children, ...props }) => (_jsx("span", { className: classNames(styles.badge, styles[kind], styles[size], className), ...props, children: children }));
+export default Badge;

package/Common/Badge/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.badge{text-align:center;color:var(--color-white,#fff);border-radius:3.40282e38px}.badge.small{padding-inline:calc(var(--spacing,.25rem)*1.5);padding-block:calc(var(--spacing,.25rem)*0.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333))}.badge.medium{padding-inline:calc(var(--spacing,.25rem)*2.5);padding-block:calc(var(--spacing,.25rem)*0.5);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,1.5))}.badge.default{background-color:var(--color-green-600,#417e38)}.badge.error{background-color:var(--color-danger-600,#de1a1b)}.badge.warning{background-color:var(--color-warning-600,#ae5f00)}.badge.info{background-color:var(--color-info-600,#0c7bb3)}.badge.neutral{background-color:var(--color-neutral-600,#929fa5)}

package/Common/BadgeGroup/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowUpRightIcon from '@heroicons/react/24/solid/ArrowUpRightIcon';
+import Badge from '#ui/Common/Badge';
+import styles from './index.module.css';
+const BadgeGroup = ({ kind = 'default', size = 'medium', badgeText, children, as: Component = 'a', ...args }) => (_jsxs(Component, { className: `${styles.wrapper} ${styles[kind]}`, ...args, children: [badgeText && (_jsx(Badge, { kind: kind, size: size, className: styles.badge, children: badgeText })), _jsx("span", { className: styles.message, children: children }), args.target === '_blank' && _jsx(ArrowUpRightIcon, { className: styles.icon })] }));
+export default BadgeGroup;

package/Common/BadgeGroup/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.wrapper{border-style:var(--tw-border-style);width:fit-content;padding-block:calc(var(--spacing,.25rem)*1);padding-right:calc(var(--spacing,.25rem)*2.5);padding-left:calc(var(--spacing,.25rem)*1);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);border-width:1px;border-radius:3.40282e38px;align-items:center;display:flex}.wrapper .icon{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4)}.wrapper .badge{margin-right:calc(var(--spacing,.25rem)*2)}.wrapper .message{margin-right:calc(var(--spacing,.25rem)*1)}.wrapper.default{border-color:var(--color-green-200,#c5e5b4);background-color:var(--color-green-100,#edf2eb)}.wrapper.default:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-green-700,#2c682c);background-color:var(--color-neutral-900,#2c3437)}.wrapper.default .icon{color:var(--color-green-500,#5fa04e)}.wrapper.default .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-green-300,#99cc7d)}.wrapper.default .message,.wrapper.default .message a:not(:hover){color:var(--color-green-700,#2c682c)}:is(.wrapper.default .message,.wrapper.default .message a:not(:hover)):where([data-theme=dark],[data-theme=dark] *){color:var(--color-green-300,#99cc7d)}.wrapper.error{border-color:var(--color-danger-200,#fad3d4);background-color:var(--color-danger-100,#fbf1f0)}.wrapper.error:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-danger-700,#b80c0c);background-color:var(--color-neutral-900,#2c3437)}.wrapper.error .icon{color:var(--color-danger-500,#f65354)}.wrapper.error .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-danger-300,#fab6b7)}.wrapper.error .message,.wrapper.error .message a:not(:hover){color:var(--color-danger-700,#b80c0c)}:is(.wrapper.error .message,.wrapper.error .message a:not(:hover)):where([data-theme=dark],[data-theme=dark] *){color:var(--color-danger-300,#fab6b7)}.wrapper.warning{border-color:var(--color-warning-200,#fad9b0);background-color:var(--color-warning-100,#fdf3e7)}.wrapper.warning:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-warning-700,#8b4d04);background-color:var(--color-neutral-900,#2c3437)}.wrapper.warning .icon{color:var(--color-warning-500,#d07912)}.wrapper.warning .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-warning-300,#f5bc75)}.wrapper.warning .message,.wrapper.warning .message a:not(:hover){color:var(--color-warning-700,#8b4d04)}:is(.wrapper.warning .message,.wrapper.warning .message a:not(:hover)):where([data-theme=dark],[data-theme=dark] *){color:var(--color-warning-300,#f5bc75)}.wrapper.info{border-color:var(--color-info-200,#bce6fc);background-color:var(--color-info-100,#e9f4fa)}.wrapper.info:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-info-700,#066291);background-color:var(--color-neutral-900,#2c3437)}.wrapper.info .icon{color:var(--color-info-500,#229ad6)}.wrapper.info .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-info-300,#8ed4f8)}.wrapper.info .message,.wrapper.info .message a:not(:hover){color:var(--color-info-700,#066291)}:is(.wrapper.info .message,.wrapper.info .message a:not(:hover)):where([data-theme=dark],[data-theme=dark] *){color:var(--color-info-300,#8ed4f8)}.wrapper.neutral{border-color:var(--color-neutral-200,#e9edf0);background-color:var(--color-neutral-100,#f6f7f9)}.wrapper.neutral:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-700,#6e7b83);background-color:var(--color-neutral-900,#2c3437)}.wrapper.neutral .icon{color:var(--color-neutral-500,#b1bcc2)}.wrapper.neutral .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-300,#d9e1e4)}.wrapper.neutral .message,.wrapper.neutral .message a:not(:hover){color:var(--color-neutral-700,#6e7b83)}:is(.wrapper.neutral .message,.wrapper.neutral .message a:not(:hover)):where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-300,#d9e1e4)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}

package/Common/Banner/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './index.module.css';
+const Banner = ({ type = 'default', children, }) => (_jsx("div", { className: `${styles.banner} ${styles[type] || styles.default}`, children: children }));
+export default Banner;

package/Common/Banner/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.banner{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem)*2);width:100%;padding-inline:calc(var(--spacing,.25rem)*8);padding-block:calc(var(--spacing,.25rem)*3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));flex-direction:row;display:flex}.banner,.banner a,:is(.banner,.banner a):where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.banner a{width:fit-content;text-decoration-line:underline;text-decoration-color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.banner a{-webkit-text-decoration-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent);-webkit-text-decoration-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent);text-decoration-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent)}}.banner svg{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.banner svg{color:color-mix(in oklab,var(--color-white,#fff)50%,transparent)}}.default{background-color:var(--color-green-600,#417e38)}.error{background-color:var(--color-danger-600,#de1a1b)}.warning{background-color:var(--color-warning-600,#ae5f00)}

package/Common/BaseActiveLink/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const BaseActiveLink = ({ activeClassName = 'active', allowSubPath = false, className, href = '', pathname = '/', as: Component = 'a', ...props }) => {
+    const finalClassName = classNames(className, {
+        [activeClassName]: allowSubPath
+            ? // When using allowSubPath we want only to check if
+                // the current pathname starts with the utmost upper level
+                // of an href (e.g. /docs/...)
+                pathname.startsWith(`/${href.toString().split('/')[1]}`)
+            : href.toString() === pathname,
+    });
+    return _jsx(Component, { className: finalClassName, href: href, ...props });
+};
+export default BaseActiveLink;

package/Common/BaseButton/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import styles from './index.module.css';
+const BaseButton = ({ kind = 'primary', size = 'default', disabled = false, className, as: Component = 'a', ...props }) => {
+    if ('href' in props && Component) {
+        return (_jsx(Component, { role: "button", href: disabled ? undefined : props.href, "aria-disabled": disabled, className: classNames(styles.button, styles[kind], styles[size], className), tabIndex: disabled ? -1 : 0, ...props }));
+    }
+    return (_jsx("button", { disabled: disabled, className: classNames(styles.button, styles[kind], styles[size], className), type: "button", ...props }));
+};
+export default BaseButton;

package/Common/BaseButton/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.button{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem)*2);padding-inline:calc(var(--spacing,.25rem)*4.5);padding-block:calc(var(--spacing,.25rem)*2.5);text-align:center;--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);display:inline-flex;position:relative}@media (prefers-reduced-motion:no-preference){.button{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))}}.button svg{width:calc(var(--spacing,.25rem)*5);height:calc(var(--spacing,.25rem)*5)}.button[aria-disabled=true]{cursor:not-allowed}.button.small{padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857))}.button.neutral{border-radius:var(--radius-sm,.25rem);background-color:var(--color-neutral-900,#2c3437);color:var(--color-white,#fff)}.button.neutral:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.button.neutral:hover:not([aria-disabled=true]){background-color:var(--color-neutral-800,#556066)}.button.neutral[aria-disabled=true]{background-color:var(--color-neutral-900,#2c3437);opacity:.5}.button.neutral:focus{background-color:var(--color-neutral-800,#556066)}.button.primary{border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-green-600,#417e38);background-color:var(--color-green-600,#417e38);color:var(--color-white,#fff);--tw-shadow:0px 1px 2px 0px var(--tw-shadow-color,#1018280d)}@supports (color:color-mix(in lab, red, red)){.button.primary{--tw-shadow:0px 1px 2px 0px var(--tw-shadow-color,color-mix(in oklab,var(--color-shadow,#101828)5%,transparent))}}.button.primary{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.button.primary:hover:not([aria-disabled=true]){border-color:var(--color-green-700,#2c682c);background-color:var(--color-green-700,#2c682c);color:var(--color-white,#fff)}.button.primary:focus{border-color:var(--color-green-700,#2c682c);background-color:var(--color-green-700,#2c682c)}.button.primary[aria-disabled=true]{background-color:var(--color-green-600,#417e38);opacity:.5}.button.secondary{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-200,#e9edf0);color:var(--color-neutral-800,#556066)}.button.secondary:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437);color:var(--color-neutral-200,#e9edf0)}.button.secondary:hover:not([aria-disabled=true]){background-color:var(--color-neutral-200,#e9edf0);color:var(--color-neutral-800,#556066)}.button.secondary:hover:not([aria-disabled=true]):where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437);color:var(--color-neutral-200,#e9edf0)}.button.secondary[aria-disabled=true]{opacity:.5;background-color:#0000}.button.secondary:focus{background-color:var(--color-neutral-100,#f6f7f9);color:var(--color-neutral-800,#556066)}.button.secondary:focus:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437);color:var(--color-neutral-200,#e9edf0)}.button.special{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:#417e384d}@supports (color:color-mix(in lab, red, red)){.button.special{border-color:color-mix(in oklab,var(--color-green-600,#417e38)30%,transparent)}}.button.special{background-color:#417e381a}@supports (color:color-mix(in lab, red, red)){.button.special{background-color:color-mix(in oklab,var(--color-green-600,#417e38)10%,transparent)}}.button.special{color:var(--color-white,#fff);--tw-shadow:0px 1px 2px 0px var(--tw-shadow-color,#1018280d)}@supports (color:color-mix(in lab, red, red)){.button.special{--tw-shadow:0px 1px 2px 0px var(--tw-shadow-color,color-mix(in oklab,var(--color-shadow,#101828)5%,transparent))}}.button.special{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.button.special:before{content:var(--tw-content);content:var(--tw-content);top:calc(var(--spacing,.25rem)*0);content:var(--tw-content);right:calc(var(--spacing,.25rem)*0);content:var(--tw-content);left:calc(var(--spacing,.25rem)*0);content:var(--tw-content);z-index:-10;content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);background-image:radial-gradient(8em circle at 50%10px,var(--color-green-400),transparent 30%);content:var(--tw-content);opacity:.3;content:var(--tw-content);--tw-content:"";content:var(--tw-content);width:100%;height:100%;margin-inline:auto;position:absolute}.button.special:after{content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);top:-1px;right:calc(var(--spacing,.25rem)*0);content:var(--tw-content);left:calc(var(--spacing,.25rem)*0);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops));content:var(--tw-content);--tw-gradient-from:#0000;width:40%;height:1px;margin-inline:auto;position:absolute}@supports (color:color-mix(in lab, red, red)){.button.special:after{--tw-gradient-from:color-mix(in oklab,var(--color-green-600,#417e38)0%,transparent)}}.button.special:after{--tw-gradient-stops:var(--tw-gradient-via-stops);content:var(--tw-content);--tw-gradient-via:var(--color-green-600,#417e38);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);content:var(--tw-content);--tw-gradient-to:#0000}@supports (color:color-mix(in lab, red, red)){.button.special:after{--tw-gradient-to:color-mix(in oklab,var(--color-green-600,#417e38)0%,transparent)}}.button.special: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));content:var(--tw-content);--tw-content:"";content:var(--tw-content)}.button.special[aria-disabled=true]{opacity:.5}.button.special:hover:not([aria-disabled=true]){background-color:#417e3833}@supports (color:color-mix(in lab, red, red)){.button.special:hover:not([aria-disabled=true]){background-color:color-mix(in oklab,var(--color-green-600,#417e38)20%,transparent)}}.button.special:focus{background-color:#417e3833}@supports (color:color-mix(in lab, red, red)){.button.special:focus{background-color:color-mix(in oklab,var(--color-green-600,#417e38)20%,transparent)}}@property --tw-font-weight{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-content{syntax:"*";inherits:false;initial-value:""}@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%}

package/Common/BaseCodeBox/index.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
+import classNames from 'classnames';
+import { Fragment, isValidElement, useRef } from 'react';
+import BaseButton from '#ui/Common/BaseButton';
+import styles from './index.module.css';
+// Transforms a code element with plain text content into a more structured
+// format for rendering with line numbers
+const transformCode = (code, language) => {
+    if (!isValidElement(code)) {
+        // Early return when the `CodeBox` child is not a valid element since the
+        // type is a ReactNode, and can assume any value
+        return code;
+    }
+    const content = code.props?.children;
+    if (code.type !== 'code' || typeof content !== 'string') {
+        // There is no need to transform an element that is not a code element or
+        // a content that is not a string
+        return code;
+    }
+    // Note that since we use `.split` we will have an extra entry
+    // being an empty string, so we need to remove it
+    const lines = content.split('\n');
+    const extraStyle = language.length === 0 ? { fontFamily: 'monospace' } : {};
+    return (_jsx("code", { style: extraStyle, children: lines
+            .flatMap((line, lineIndex) => {
+            const columns = line.split(' ');
+            return [
+                _jsx("span", { className: "line", children: columns.map((column, columnIndex) => (_jsxs(Fragment, { children: [_jsx("span", { children: column }), columnIndex < columns.length - 1 && _jsx("span", { children: " " })] }, columnIndex))) }, lineIndex),
+                // Add a break line so the text content is formatted correctly
+                // when copying to clipboard
+                '\n',
+            ];
+        })
+            // Here we remove that empty line from before and
+            // the last flatMap entry which is an `\n`
+            .slice(0, -2) }));
+};
+const BaseCodeBox = ({ children, language, className, onCopy, buttonText, as = 'a', showCopyButton = true, }) => {
+    const containerRef = useRef(null);
+    const handleCopy = () => {
+        const text = containerRef.current?.textContent;
+        if (text) {
+            onCopy(text);
+        }
+    };
+    return (_jsxs("div", { className: styles.root, children: [_jsx("pre", { ref: containerRef, className: classNames(styles.content, className), tabIndex: 0, children: transformCode(children, language) }), language && (_jsxs("div", { className: styles.footer, children: [_jsx("span", { className: styles.language, children: language }), showCopyButton && (_jsxs(BaseButton, { as: as, className: styles.action, kind: "neutral", onClick: handleCopy, children: [_jsx(DocumentDuplicateIcon, { className: styles.icon }), buttonText] }))] }))] }));
+};
+export default BaseCodeBox;

package/Common/BaseCodeBox/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.root{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);width:100%}.root .content{margin:calc(var(--spacing,.25rem)*0);padding:calc(var(--spacing,.25rem)*4)}.root .content>code{padding:calc(var(--spacing,.25rem)*0);font-family:var(--font-ibm-plex-mono,var(--font-ibm-plex-mono));font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));--tw-leading:var(--leading-snug,1.375);line-height:var(--leading-snug,1.375);--tw-font-weight:var(--font-weight-regular,400);font-weight:var(--font-weight-regular,400);color:var(--color-neutral-400,#cbd4d9);counter-reset:line;scrollbar-width:thin;background-color:#0000;display:grid;overflow-x:auto}.root .content>code>[class=line]{min-width:calc(var(--spacing,.25rem)*0);padding-left:calc(var(--spacing,.25rem)*8);position:relative}.root .content>code>[class=line]:not(:empty:last-child):before{--tw-content:"";content:var(--tw-content);display:inline-block}.root .content>code>[class=line]:not(:empty:last-child):after{top:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);margin-right:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4.5);text-align:right;font-family:var(--font-ibm-plex-mono,var(--font-ibm-plex-mono));color:var(--color-neutral-600,#929fa5);content:counter(line);counter-increment:line;position:absolute}.root>.footer{border-top-style:var(--tw-border-style);border-top-width:1px;border-top-color:var(--color-neutral-900,#2c3437);padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);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);justify-content:space-between;align-items:center;display:flex}.root>.footer>.language{color:var(--color-neutral-400,#cbd4d9)}.root>.footer>.action{padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*1.5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.icon{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}

package/Common/BaseCrossLink/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import PrevNextArrow from '#ui/Common/BasePagination/PrevNextArrow';
+import styles from './index.module.css';
+const BaseCrossLink = ({ type, label, text, link, as: Component = 'a', }) => {
+    return (_jsxs(Component, { className: styles.crossLink, href: link, children: [_jsxs("span", { className: classNames(styles.header, {
+                    [styles.reverse]: type === 'next',
+                }), children: [_jsx(PrevNextArrow, { className: styles.icon, type: type }), label] }), _jsx("span", { className: classNames(styles.content, {
+                    [styles.reverse]: type === 'next',
+                }), children: text })] }));
+};
+export default BaseCrossLink;

package/Common/BaseCrossLink/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.crossLink{align-items:flex-start;gap:calc(var(--spacing,.25rem)*2);text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:1px;border-color:var(--color-neutral-300,#d9e1e4);background-color:var(--color-white,#fff);padding:calc(var(--spacing,.25rem)*3);flex-direction:column;text-decoration-line:none;display:flex;overflow:hidden}.crossLink:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-900,#2c3437);background-color:var(--color-neutral-950,#0d121c)}.crossLink .header{align-items:center;gap:calc(var(--spacing,.25rem)*2);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333));color:var(--color-neutral-800,#556066);align-self:stretch;display:flex}.crossLink .header:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-100,#f6f7f9)}.crossLink .header.reverse{flex-direction:row-reverse;justify-content:flex-start}.crossLink .header .icon{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);color:var(--color-neutral-600,#929fa5)}.crossLink .header .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-400,#cbd4d9)}.crossLink .content{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));color:var(--color-neutral-900,#2c3437);align-self:stretch;overflow:hidden}.crossLink .content:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.crossLink .content.reverse{text-align:right}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}

package/Common/BaseLinkTabs/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Select from '#ui/Common/Select';
+import styles from './index.module.css';
+const BaseLinkTabs = ({ tabs, label, activeTab, children, as: Component = 'a', onSelect, }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.tabsList, children: tabs.map(tab => (_jsx(Component, { href: tab.link, className: styles.tabsTrigger, "data-state": tab.key === activeTab ? 'active' : 'inactive', children: tab.label }, tab.key))) }), _jsx("div", { className: styles.tabsSelect, children: _jsx(Select, { label: label, defaultValue: tabs.find(tab => tab.key === activeTab)?.link, values: tabs.map(tab => ({ label: tab.label, value: tab.link })), onChange: onSelect }) }), children] }));
+export default BaseLinkTabs;

package/Common/BaseLinkTabs/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.tabsList{margin-top:calc(var(--spacing,.25rem)*10);margin-bottom:calc(var(--spacing,.25rem)*6);gap:calc(var(--spacing,.25rem)*2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-bottom-color:var(--color-neutral-200,#e9edf0);font-family:var(--font-open-sans,var(--font-open-sans));display:flex}@media not all and (min-width:670px){.tabsList{display:none}}.tabsList:where([data-theme=dark],[data-theme=dark] *){border-bottom-color:var(--color-neutral-800,#556066)}.tabsList .tabsTrigger{border-bottom-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem)*1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-neutral-800,#556066);border-bottom-width:2px;border-bottom-color:#0000;padding-bottom:11px}.tabsList .tabsTrigger:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.tabsList .tabsTrigger:not([data-state=active]):hover{border-bottom-color:var(--color-neutral-900,#2c3437);color:var(--color-neutral-900,#2c3437)}.tabsList .tabsTrigger:not([data-state=active]):hover:where([data-theme=dark],[data-theme=dark] *){border-bottom-color:var(--color-neutral-300,#d9e1e4);color:var(--color-neutral-300,#d9e1e4)}.tabsList .tabsTrigger[data-state=active]{border-bottom-color:var(--color-green-600,#417e38);color:var(--color-green-600,#417e38)}.tabsList .tabsTrigger[data-state=active]:where([data-theme=dark],[data-theme=dark] *){border-bottom-color:var(--color-green-400,#84ba64);color:var(--color-green-400,#84ba64)}@media (min-width:40rem){.tabsSelect{visibility:visible}}@media (min-width:48rem){.tabsSelect{display:none}}.tabsSelect>span{margin-block:calc(var(--spacing,.25rem)*6);width:100%;display:none}@media not all and (min-width:670px){.tabsSelect>span{display:flex}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}

package/Common/BasePagination/Ellipsis/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './index.module.css';
+const Ellipsis = () => (_jsx("span", { "aria-hidden": "true", className: styles.ellipsis, children: "..." }));
+export default Ellipsis;

package/Common/BasePagination/Ellipsis/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.ellipsis{width:calc(var(--spacing,.25rem)*10);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2.5);--tw-leading:1;color:var(--color-neutral-800,#556066);line-height:1}.ellipsis:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}@property --tw-leading{syntax:"*";inherits:false}

package/Common/BasePagination/PaginationListItem/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './index.module.css';
+const PaginationListItem = ({ url, pageNumber, currentPage, totalPages, as: Component = 'a', label, }) => {
+    return (_jsx("li", { "aria-setsize": totalPages, "aria-posinset": pageNumber, children: _jsx(Component, { href: url, "aria-label": label, className: styles.listItem, ...(pageNumber === currentPage && { 'aria-current': 'page' }), children: _jsx("span", { children: pageNumber }) }) }, pageNumber));
+};
+export default PaginationListItem;

package/Common/BasePagination/PaginationListItem/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.listItem,.listItem:link,.listItem:active{width:calc(var(--spacing,.25rem)*10);height:calc(var(--spacing,.25rem)*10);cursor:pointer;border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2.5);color:var(--color-neutral-800,#556066);justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:no-preference){.listItem,.listItem:link,.listItem:active{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))}}:is(.listItem,.listItem:link,.listItem:active):where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}:is(.listItem,.listItem:link,.listItem:active)[aria-current=page]{cursor:default;background-color:var(--color-green-600,#417e38);color:var(--color-white,#fff)}:is(.listItem,.listItem:link,.listItem:active):hover:not([aria-current=page]){background-color:var(--color-neutral-100,#f6f7f9);color:var(--color-neutral-800,#556066)}:is(.listItem,.listItem:link,.listItem:active):hover:not([aria-current=page]):where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437);color:var(--color-neutral-200,#e9edf0)}

package/Common/BasePagination/PrevNextArrow.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
+const PrevNextArrow = ({ type, ...extra }) => {
+    const ChevronComponent = type === 'previous' ? ChevronLeftIcon : ChevronRightIcon;
+    return _jsx(ChevronComponent, { ...extra });
+};
+export default PrevNextArrow;

package/Common/BasePagination/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon, ArrowLeftIcon } from '@heroicons/react/20/solid';
+import Button from '#ui/Common/BaseButton';
+import { useGetPageElements } from '#ui/Common/BasePagination/useGetPageElements';
+import styles from './index.module.css';
+const BasePagination = ({ currentPage, pages, as = 'a', currentPageSiblingsCount = 1, labels, getPageLabel, }) => {
+    const parsedPages = useGetPageElements(currentPage, pages, currentPageSiblingsCount, as, getPageLabel);
+    return (_jsxs("nav", { "aria-label": labels.aria, className: styles.pagination, children: [_jsxs(Button, { as: as, "aria-label": labels.prevAria, disabled: currentPage === 1, kind: "secondary", className: styles.previousButton, href: pages[currentPage - 2]?.url, children: [_jsx(ArrowLeftIcon, { className: styles.arrowIcon }), _jsx("span", { children: labels.prev })] }), _jsx("ol", { className: styles.list, children: parsedPages }), _jsxs(Button, { as: as, "aria-label": labels.nextAria, disabled: currentPage === pages.length, kind: "secondary", className: styles.nextButton, href: pages[currentPage]?.url, children: [_jsx("span", { children: labels.next }), _jsx(ArrowRightIcon, { className: styles.arrowIcon })] })] }));
+};
+export default BasePagination;

package/Common/BasePagination/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.pagination{justify-content:space-between;align-items:center;row-gap:calc(var(--spacing,.25rem)*5);grid-template-areas:"pages pages pages""prev.next";display:grid}@media (min-width:48rem){.pagination{row-gap:calc(var(--spacing,.25rem)*0);grid-template-areas:"prev pages next"}}.previousButton,.nextButton{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857))}.previousButton{grid-area:prev}.nextButton{grid-area:next}.arrowIcon{height:calc(var(--spacing,.25rem)*5);color:var(--color-neutral-600,#929fa5);flex-shrink:0}.arrowIcon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-400,#cbd4d9)}.list{justify-content:center;gap:calc(var(--spacing,.25rem)*1);grid-area:pages;list-style-type:none;display:flex}

package/Common/BasePagination/useGetPageElements.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Ellipsis from '#ui/Common/BasePagination/Ellipsis';
+import PaginationListItem from '#ui/Common/BasePagination/PaginationListItem';
+const parsePages = (pages, currentPage, totalPages, as, getLabel) => pages.map(({ url }, index) => ({
+    url: url,
+    pageNumber: index + 1,
+    currentPage: currentPage,
+    totalPages: totalPages,
+    label: getLabel(index + 1),
+    as: as,
+}));
+const createPaginationListItems = (parsedPages) => parsedPages.map(page => _jsx(PaginationListItem, { ...page }, page.url));
+// The minimum amount of elements are first page, current page, and last page
+const MINIMUM_AMOUNT_OF_ELEMENTS = 3;
+// Not more than two ellipses will be shown at the same time
+const MAXIMUM_AMOUNT_OF_ELLIPSES = 2;
+// The logic of this custom hook has taken the internal logic of
+// React MUI's Pagination component as reference. More info here:
+// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js
+export const useGetPageElements = (currentPage, pages, currentPageSiblingsCount, as, getLabel) => {
+    const totalPages = pages.length;
+    const parsedPages = parsePages(pages, currentPage, totalPages, as, getLabel);
+    const currentPageIndex = currentPage - 1;
+    // We multiply it by two (2) as siblings are located on both left and right sides
+    // of the current page
+    const totalSiblingsCount = 2 * currentPageSiblingsCount;
+    const visiblePages = totalSiblingsCount +
+        MINIMUM_AMOUNT_OF_ELEMENTS +
+        MAXIMUM_AMOUNT_OF_ELLIPSES;
+    // When there are more pages than the visible pages to be shown
+    // we do not need to perform any calculations
+    if (totalPages <= visiblePages) {
+        return createPaginationListItems(parsedPages);
+    }
+    // The index of the far-left sibling of the current page
+    const leftSiblingsFirstIndex = Math.max(currentPageIndex - currentPageSiblingsCount, 1);
+    // The index of the far-right sibling of the current page
+    const rightSiblingsLastIndex = Math.min(currentPageIndex + currentPageSiblingsCount + 1, totalPages);
+    const firstIndex = 0;
+    const lastIndex = totalPages - 1;
+    // If there are at least two (2) elements between the far-left sibling of
+    // the current page, and the first page, we should show left ellipsis
+    // between them
+    const hasLeftEllipsis = leftSiblingsFirstIndex > firstIndex + 2;
+    // If there are at least two (2) elements between the far-right sibling of
+    // the current page, and the last page, we should show right ellipsis
+    // between them
+    const hasRightEllipsis = rightSiblingsLastIndex < lastIndex - 1;
+    if (!hasLeftEllipsis && hasRightEllipsis) {
+        const leftPagesLastIndex = MINIMUM_AMOUNT_OF_ELEMENTS + totalSiblingsCount;
+        const leftPages = parsedPages.slice(firstIndex, leftPagesLastIndex);
+        return [
+            ...createPaginationListItems(leftPages),
+            _jsx(Ellipsis, {}, "ellipsis"),
+            ...createPaginationListItems(parsedPages.slice(lastIndex)),
+        ];
+    }
+    if (hasLeftEllipsis && !hasRightEllipsis) {
+        const rightPagesFirstIndex = MINIMUM_AMOUNT_OF_ELEMENTS + totalSiblingsCount;
+        const rightPages = parsedPages.slice(totalPages - rightPagesFirstIndex);
+        return [
+            ...createPaginationListItems(parsedPages.slice(firstIndex, firstIndex + 1)),
+            _jsx(Ellipsis, {}, "ellipsis"),
+            ...createPaginationListItems(rightPages),
+        ];
+    }
+    if (hasLeftEllipsis && hasRightEllipsis) {
+        const middlePages = parsedPages.slice(leftSiblingsFirstIndex, rightSiblingsLastIndex);
+        return [
+            ...createPaginationListItems(parsedPages.slice(firstIndex, firstIndex + 1)),
+            _jsx(Ellipsis, {}, "ellipsis-1"),
+            ...createPaginationListItems(middlePages),
+            _jsx(Ellipsis, {}, "ellipsis-2"),
+            ...createPaginationListItems(parsedPages.slice(lastIndex)),
+        ];
+    }
+};

package/Common/Blockquote/index.js

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

package/Common/Blockquote/index.module.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.wrapper{max-width:var(--container-2xl,42rem);align-items:flex-start;gap:calc(var(--spacing,.25rem)*4);border-left-style:var(--tw-border-style);border-left-width:2px;border-color:var(--color-green-600,#417e38);padding-block:calc(var(--spacing,.25rem)*2);padding-left:calc(var(--spacing,.25rem)*5);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-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-neutral-900,#2c3437);flex-direction:column;align-self:stretch;display:flex}.wrapper:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-green-400,#84ba64);color:var(--color-white,#fff)}.wrapper cite{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,1.5));--tw-font-weight:var(--font-weight-regular,400);font-weight:var(--font-weight-regular,400);font-style:normal}.wrapper cite:before{--tw-content:"— ";content:var(--tw-content)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}

package/Common/Breadcrumbs/BreadcrumbHomeLink/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import HomeIcon from '@heroicons/react/24/outline/HomeIcon';
+import BreadcrumbLink from '#ui/Common/Breadcrumbs/BreadcrumbLink';
+import styles from './index.module.css';
+const BreadcrumbHomeLink = ({ href = '/', ...props }) => {
+    const ariaLabel = props['aria-label'];
+    return (_jsx(BreadcrumbLink, { href: href, ...props, children: _jsx(HomeIcon, { title: ariaLabel, "aria-label": ariaLabel, className: styles.icon }) }));
+};
+export default BreadcrumbHomeLink;

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

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.icon{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4)}

package/Common/Breadcrumbs/BreadcrumbItem/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const BreadcrumbItem = ({ disableMicrodata, children, hidden = false, hideSeparator = false, position, ...props }) => (_jsxs("li", { ...props, itemProp: !disableMicrodata ? 'itemListElement' : undefined, itemScope: !disableMicrodata ? true : undefined, itemType: !disableMicrodata ? 'https://schema.org/ListItem' : undefined, className: classNames(styles.item, { [styles.visuallyHidden]: hidden }, props.className), "aria-hidden": hidden ? 'true' : undefined, children: [children, position && _jsx("meta", { itemProp: "position", content: `${position}` }), !hideSeparator && (_jsx(ChevronRightIcon, { "aria-hidden": "true", className: styles.separator }))] }));
+export default BreadcrumbItem;

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

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.item{align-items:center;gap:calc(var(--spacing,.25rem)*5);text-overflow:ellipsis;white-space:nowrap;max-width:fit-content;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);display:flex;overflow:hidden}.item:last-child{width:100%}.item a{flex-grow:1;flex-shrink:1}.item,.item>a,.item>a:hover{color:var(--color-neutral-800,#556066)}@media (prefers-reduced-motion:no-preference){.item,.item>a,.item>a:hover{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))}}:is(.item,.item>a,.item>a:hover):where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-200,#e9edf0)}.item.visuallyHidden{display:none}.item .separator{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);max-width:fit-content;color:var(--color-neutral-600,#929fa5);flex-grow:1;flex-shrink:0}.item .separator: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

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.link{text-overflow:ellipsis;white-space:nowrap;max-width:fit-content;overflow:hidden}.link.active{background-color:var(--color-green-600,#417e38);padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-white,#fff);border-radius:.25rem}@media (prefers-reduced-motion:no-preference){.link.active{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))}}.link.active:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.link.active:hover{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

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.list{gap:calc(var(--spacing,.25rem)*5);width:100vw;padding-inline:calc(var(--spacing,.25rem)*6);display:flex}@media (min-width:670px){.list{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,2 @@
+/*! 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

@@ -0,0 +1,2 @@
+/*! 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

@@ -0,0 +1,2 @@
+/*! 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

@@ -0,0 +1,2 @@
+/*! 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}