@goldlabelapps/theme 1.0.1 → 3.2.0

package/dist/design-system/components/lists/List/types.d.ts

@@ -0,0 +1,2 @@
+import type { ListProps as MuiListProps } from '@mui/material/List';
+export type ListProps = MuiListProps;

package/dist/design-system/components/lists/List/types.js

@@ -0,0 +1 @@
+export {};

package/dist/design-system/components/lists/ListItem/ListItem.d.ts

@@ -0,0 +1,2 @@
+import type { ListItemProps } from './types';
+export default function ListItem(props: ListItemProps): import("react").JSX.Element;

package/dist/design-system/components/lists/ListItem/ListItem.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListItem as MuiListItem } from '@mui/material';
+export default function ListItem(props) {
+    return _jsx(MuiListItem, { ...props });
+}

package/dist/design-system/components/lists/ListItem/types.d.ts

@@ -0,0 +1,2 @@
+import type { ListItemProps as MuiListItemProps } from '@mui/material/ListItem';
+export type ListItemProps = MuiListItemProps;

package/dist/design-system/components/lists/ListItem/types.js

@@ -0,0 +1 @@
+export {};

package/dist/design-system/components/lists/ListItemButton/ListItemButton.d.ts

@@ -0,0 +1,2 @@
+import type { ListItemButtonProps } from './types';
+export default function ListItemButton(props: ListItemButtonProps): import("react").JSX.Element;

package/dist/design-system/components/lists/ListItemButton/ListItemButton.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListItemButton as MuiListItemButton } from '@mui/material';
+export default function ListItemButton(props) {
+    return _jsx(MuiListItemButton, { ...props });
+}

package/dist/design-system/components/lists/ListItemButton/types.d.ts

@@ -0,0 +1,2 @@
+import type { ListItemButtonProps as MuiListItemButtonProps } from '@mui/material/ListItemButton';
+export type ListItemButtonProps = MuiListItemButtonProps;

package/dist/design-system/components/lists/ListItemButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/design-system/components/lists/ListItemText/ListItemText.d.ts

@@ -0,0 +1,2 @@
+import type { ListItemTextProps } from './types';
+export default function ListItemText(props: ListItemTextProps): import("react").JSX.Element;

package/dist/design-system/components/lists/ListItemText/ListItemText.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListItemText as MuiListItemText } from '@mui/material';
+export default function ListItemText(props) {
+    return _jsx(MuiListItemText, { ...props });
+}

package/dist/design-system/components/lists/ListItemText/types.d.ts

@@ -0,0 +1,2 @@
+import type { ListItemTextProps as MuiListItemTextProps } from '@mui/material/ListItemText';
+export type ListItemTextProps = MuiListItemTextProps;

package/dist/design-system/components/lists/ListItemText/types.js

@@ -0,0 +1 @@
+export {};

package/dist/design-system/components/lists/ListSubheader/ListSubheader.d.ts

@@ -0,0 +1,2 @@
+import type { ListSubheaderProps } from './types';
+export default function ListSubheader(props: ListSubheaderProps): import("react").JSX.Element;

package/dist/design-system/components/lists/ListSubheader/ListSubheader.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListSubheader as MuiListSubheader } from '@mui/material';
+export default function ListSubheader(props) {
+    return _jsx(MuiListSubheader, { ...props });
+}

package/dist/design-system/components/lists/ListSubheader/types.d.ts

@@ -0,0 +1,2 @@
+import type { ListSubheaderProps as MuiListSubheaderProps } from '@mui/material/ListSubheader';
+export type ListSubheaderProps = MuiListSubheaderProps;

package/dist/design-system/components/lists/ListSubheader/types.js

@@ -0,0 +1 @@
+export {};

package/dist/design-system/components/navigation/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,2 @@
+import type { BreadcrumbProps } from './types';
+export default function Breadcrumb({ items }: BreadcrumbProps): import("react").JSX.Element | null;

package/dist/design-system/components/navigation/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Breadcrumb({ items }) {
+    if (!Array.isArray(items) || items.length === 0) {
+        return null;
+    }
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: "site-breadcrumbs", children: _jsx("ol", { style: {
+                margin: 0,
+                padding: 0,
+                listStyle: 'none',
+                display: 'flex',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                gap: '0.5rem',
+            }, children: items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                return (_jsx("li", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.5rem' }, children: item.href && !isLast ? _jsx("a", { href: item.href, children: item.label }) : _jsx("span", { "aria-current": isLast ? 'page' : undefined, children: item.label }) }, `${item.label}-${index}`));
+            }) }) }));
+}

package/dist/design-system/components/navigation/Breadcrumb/types.d.ts

@@ -0,0 +1 @@
+export type { BreadcrumbItem, BreadcrumbProps } from '../../../types';

package/dist/design-system/components/navigation/Breadcrumb/types.js

@@ -0,0 +1 @@
+export {};

package/dist/design-system/components/navigation/Share/Share.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { ShareProps } from './types';
+export default function Share({ size, url, title, description, }: ShareProps): React.JSX.Element;

package/dist/design-system/components/navigation/Share/Share.js

@@ -0,0 +1,156 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Box, Popover, Stack, Typography } from '@mui/material';
+import { FacebookShareButton, LinkedinShareButton, WhatsappShareButton, XShareButton, } from 'react-share';
+import Button from '../../buttons/Button/Button';
+import IconButton from '../../buttons/IconButton/IconButton';
+import Icon from '../../icons/Icon/Icon';
+const CHANNELS = [
+    {
+        key: 'x',
+        label: 'X/Twitter',
+        icon: 'twitter',
+        render: (children, shareUrl, _description, ariaLabel) => (_jsx(XShareButton, { url: shareUrl, "aria-label": ariaLabel, children: children })),
+    },
+    {
+        key: 'facebook',
+        label: 'Facebook',
+        icon: 'facebook',
+        render: (children, shareUrl, _description, ariaLabel) => (_jsx(FacebookShareButton, { url: shareUrl, "aria-label": ariaLabel, children: children })),
+    },
+    {
+        key: 'linkedin',
+        label: 'LinkedIn',
+        icon: 'linkedin',
+        render: (children, shareUrl, description, ariaLabel) => (_jsx(LinkedinShareButton, { url: shareUrl, summary: description, "aria-label": ariaLabel, children: children })),
+    },
+    {
+        key: 'whatsapp',
+        label: 'WhatsApp',
+        icon: 'whatsapp',
+        render: (children, shareUrl, _description, ariaLabel) => (_jsx(WhatsappShareButton, { url: shareUrl, "aria-label": ariaLabel, children: children })),
+    },
+];
+function renderShareContent(label, icon, showLabels) {
+    return (_jsxs(Box, { component: "span", sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            gap: 1,
+            minHeight: showLabels ? 42 : 'auto',
+            width: '100%',
+            px: showLabels ? 1.25 : 0.75,
+            py: showLabels ? 0.75 : 0.5,
+            borderRadius: '3px',
+            '&:hover': {
+                backgroundColor: 'rgba(25, 118, 210, 0.08)',
+            },
+        }, children: [_jsx(Icon, { icon: icon, color: "secondary" }), showLabels ? _jsx(Typography, { variant: "body2", children: label }) : null] }));
+}
+function getSizeStyles(size) {
+    if (size === 'small') {
+        return {
+            iconButtonSize: 'sm',
+            gap: 1,
+        };
+    }
+    if (size === 'large') {
+        return {
+            iconButtonSize: 'lg',
+            gap: 1.5,
+        };
+    }
+    return {
+        iconButtonSize: 'md',
+        gap: 1,
+    };
+}
+export default function Share({ size = 'medium', url, title, description, }) {
+    const containerRef = React.useRef(null);
+    const [copied, setCopied] = React.useState(false);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [copiedAnchorEl, setCopiedAnchorEl] = React.useState(null);
+    const [shareData, setShareData] = React.useState({
+        url: url ?? '',
+        title: title ?? '',
+        description: description ?? '',
+    });
+    const resetTimerRef = React.useRef(null);
+    React.useEffect(() => {
+        if (url && title !== undefined && description !== undefined) {
+            setShareData({ url, title, description });
+            return;
+        }
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const meta = document.querySelector('meta[name="description"]');
+        setShareData({
+            url: url ?? window.location.href,
+            title: title ?? window.document.title,
+            description: description ?? meta?.content ?? '',
+        });
+    }, [description, title, url]);
+    React.useEffect(() => {
+        return () => {
+            if (resetTimerRef.current !== null) {
+                window.clearTimeout(resetTimerRef.current);
+            }
+        };
+    }, []);
+    const { iconButtonSize, gap } = getSizeStyles(size);
+    const open = Boolean(anchorEl);
+    const copiedOpen = copied && Boolean(copiedAnchorEl);
+    const handleCopy = async () => {
+        if (!shareData.url || typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
+            return;
+        }
+        await navigator.clipboard.writeText(shareData.url);
+        setCopied(true);
+        setCopiedAnchorEl(containerRef.current);
+        if (resetTimerRef.current !== null) {
+            window.clearTimeout(resetTimerRef.current);
+        }
+        resetTimerRef.current = window.setTimeout(() => {
+            setCopied(false);
+            setCopiedAnchorEl(null);
+            resetTimerRef.current = null;
+        }, 2500);
+        setAnchorEl(null);
+    };
+    const handleToggle = (event) => {
+        const nextAnchor = event.currentTarget;
+        setAnchorEl(current => (current ? null : nextAnchor));
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleCopiedClose = () => {
+        setCopied(false);
+        setCopiedAnchorEl(null);
+        if (resetTimerRef.current !== null) {
+            window.clearTimeout(resetTimerRef.current);
+            resetTimerRef.current = null;
+        }
+    };
+    return (_jsxs(Box, { id: "share", ref: containerRef, "aria-label": "Share", sx: { display: 'flex', flexDirection: 'column', gap }, children: [_jsx(IconButton, { size: iconButtonSize, ariaLabel: "Open share menu", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? 'share-menu' : undefined, icon: _jsx(Icon, { icon: "share", color: "secondary" }), onClick: handleToggle }), _jsx(Popover, { id: "share-menu", open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, children: _jsx(Box, { sx: { p: 1.5, minWidth: 220 }, children: _jsxs(Stack, { spacing: gap, role: "menu", "aria-label": "Share menu", children: [CHANNELS.map(channel => {
+                                const content = renderShareContent(channel.label, channel.icon, true);
+                                return (_jsx(Box, { role: "none", sx: {
+                                        display: 'flex',
+                                        width: '100%',
+                                        '& > button': {
+                                            width: '100%',
+                                            display: 'flex',
+                                        },
+                                    }, children: channel.render(content, shareData.url, shareData.description, `Share on ${channel.label}`) }, channel.key));
+                            }), _jsx(Button, { variant: "ghost", size: iconButtonSize, fullWidth: true, sx: {
+                                    justifyContent: 'flex-start',
+                                    color: 'text.primary',
+                                    '&:hover': {
+                                        backgroundColor: 'rgba(25, 118, 210, 0.08)',
+                                    },
+                                }, startIcon: _jsx(Icon, { icon: "copy", color: "secondary" }), onClick: () => {
+                                    void handleCopy();
+                                }, ariaLabel: "Copy link", disabled: !shareData.url, children: "Copy link" })] }) }) }), _jsx(Popover, { open: copiedOpen, anchorEl: copiedAnchorEl, onClose: handleCopiedClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, disableRestoreFocus: true, children: _jsx(Box, { role: "status", sx: { px: 1.5, py: 1 }, children: _jsxs(Typography, { variant: "body2", children: ["Copied ", shareData.url, " to clipboard."] }) }) })] }));
+}

package/dist/design-system/components/navigation/Share/types.d.ts

@@ -0,0 +1 @@
+export type { ShareProps, ShareSize } from '../../../types';

package/dist/design-system/components/navigation/Share/types.js

@@ -0,0 +1 @@
+export {};

package/dist/design-system/components/navigation/SiteNav/SiteNav.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { SiteNavProps } from './types';
+export default function SiteNav({ items, navigateTo }: SiteNavProps): ReactNode;

package/dist/design-system/components/navigation/SiteNav/SiteNav.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from 'react';
+import List from '../../lists/List/List';
+import ListItem from '../../lists/ListItem/ListItem';
+import ListItemButton from '../../lists/ListItemButton/ListItemButton';
+import ListItemText from '../../lists/ListItemText/ListItemText';
+function getNavPath(item) {
+    if (typeof item.slug === 'string' && item.slug.trim()) {
+        return item.slug;
+    }
+    if (typeof item.path === 'string' && item.path.trim()) {
+        return item.path;
+    }
+    return '#';
+}
+function isSuppressedHomeItem(item, depth) {
+    if (depth !== 0) {
+        return false;
+    }
+    const title = (item.title ?? '').trim().toLowerCase();
+    const path = getNavPath(item);
+    return title === 'home' || path === '/';
+}
+function normalizeNavPath(path) {
+    if (!path || path === '/') {
+        return '/';
+    }
+    const trimmed = path.trim();
+    return trimmed.endsWith('/') ? trimmed.slice(0, -1) : trimmed;
+}
+function isOnCurrentPath(itemPath, currentPath) {
+    if (!currentPath || !itemPath || itemPath === '#') {
+        return false;
+    }
+    const normalizedCurrentPath = normalizeNavPath(currentPath);
+    const normalizedItemPath = normalizeNavPath(itemPath);
+    if (normalizedItemPath === '/') {
+        return normalizedCurrentPath !== '/';
+    }
+    return normalizedCurrentPath === normalizedItemPath || normalizedCurrentPath.startsWith(`${normalizedItemPath}/`);
+}
+function renderNavItems(items, navigateTo, depth = 0, keyPrefix = 'nav', currentPath = '') {
+    if (!Array.isArray(items) || !items.length) {
+        return null;
+    }
+    return (_jsx(List, { disablePadding: true, dense: true, children: items.map((item, index) => {
+            if (isSuppressedHomeItem(item, depth)) {
+                return null;
+            }
+            const key = `${keyPrefix}-${index}-${item.title || item.slug || item.path || 'node'}`;
+            const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+            const label = item.title || 'Untitled';
+            const itemPath = getNavPath(item);
+            const isCurrentPath = Boolean(currentPath && itemPath && currentPath === itemPath);
+            const shouldRenderChildren = Boolean(hasChildren && isOnCurrentPath(itemPath, currentPath));
+            return (_jsxs(Fragment, { children: [_jsx(ListItem, { disablePadding: true, children: _jsx(ListItemButton, { disabled: isCurrentPath, onClick: () => {
+                                navigateTo?.(itemPath, item);
+                            }, sx: {
+                                pl: 1.5 + depth * 2,
+                                py: 0.25,
+                                minHeight: 28,
+                                borderRadius: 1,
+                            }, children: _jsx(ListItemText, { primary: label, sx: { my: 0 }, primaryTypographyProps: {
+                                    fontWeight: isCurrentPath ? 600 : 400,
+                                    fontSize: '1rem',
+                                    lineHeight: 1.15,
+                                    color: isCurrentPath ? 'primary.main' : 'text.primary',
+                                } }) }) }), shouldRenderChildren ? renderNavItems(item.children, navigateTo, depth + 1, key, currentPath) : null] }, key));
+        }) }));
+}
+export default function SiteNav({ items, navigateTo }) {
+    const [currentPath, setCurrentPath] = useState('');
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const pathname = window.location.pathname;
+        setCurrentPath(pathname.endsWith('/') && pathname !== '/' ? pathname.slice(0, -1) : pathname);
+    }, []);
+    return renderNavItems(items, navigateTo, 0, 'nav', currentPath);
+}

package/dist/design-system/components/navigation/SiteNav/types.d.ts

@@ -0,0 +1 @@
+export type { SiteNavProps, T_NavNode } from '../../../types';

package/dist/design-system/components/navigation/SiteNav/types.js

@@ -0,0 +1 @@
+export {};

package/dist/design-system/components/nxStyle.d.ts

@@ -0,0 +1,129 @@
+export declare const nxLightStyle: {
+    ':root': {
+        '--nx-ink': string;
+        '--nx-ink-logo': string;
+        '--nx-dusty': string;
+        '--nx-body': string;
+        '--nx-sign': string;
+        '--nx-ash': string;
+        '--nx-muted': string;
+        '--nx-fog': string;
+        '--nx-parchment': string;
+        '--nx-paper': string;
+        '--nx-oat': string;
+        '--nx-clay': string;
+        '--nx-line': string;
+        '--nx-line-soft': string;
+        '--nx-glass': string;
+        '--nx-glass-hi': string;
+        '--nx-tile': string;
+        '--nx-scrim': string;
+        '--nx-shadow-card': string;
+        '--nx-shadow-card-hover': string;
+        '--nx-shadow-glass': string;
+        '--nx-shadow-button': string;
+        '--nx-shadow-button-hi': string;
+        '--nx-shadow-float': string;
+        '--nx-shadow-pop': string;
+        '--surface-input': string;
+        '--surface-input-hover': string;
+        '--surface-input-focus': string;
+        '--surface-input-disabled': string;
+        '--surface-footer': string;
+        '--border-input': string;
+        '--border-input-hover': string;
+        '--border-input-focus': string;
+        '--focus-ring': string;
+    };
+    body: {
+        backgroundColor: string;
+        color: string;
+        transition: string;
+    };
+};
+export declare const nxDarkStyle: {
+    ':root': {
+        '--nx-ink': string;
+        '--nx-ink-logo': string;
+        '--nx-dusty': string;
+        '--nx-body': string;
+        '--nx-sign': string;
+        '--nx-ash': string;
+        '--nx-muted': string;
+        '--nx-fog': string;
+        '--nx-parchment': string;
+        '--nx-paper': string;
+        '--nx-oat': string;
+        '--nx-clay': string;
+        '--nx-line': string;
+        '--nx-line-soft': string;
+        '--nx-glass': string;
+        '--nx-glass-hi': string;
+        '--nx-tile': string;
+        '--nx-scrim': string;
+        '--nx-shadow-card': string;
+        '--nx-shadow-card-hover': string;
+        '--nx-shadow-glass': string;
+        '--nx-shadow-button': string;
+        '--nx-shadow-button-hi': string;
+        '--nx-shadow-float': string;
+        '--nx-shadow-pop': string;
+        '--surface-input': string;
+        '--surface-input-hover': string;
+        '--surface-input-focus': string;
+        '--surface-input-disabled': string;
+        '--surface-footer': string;
+        '--border-input': string;
+        '--border-input-hover': string;
+        '--border-input-focus': string;
+        '--focus-ring': string;
+    };
+    body: {
+        backgroundColor: string;
+        color: string;
+        transition: string;
+    };
+};
+export declare function getNxStyle(mode: 'light' | 'dark'): {
+    ':root': {
+        '--nx-ink': string;
+        '--nx-ink-logo': string;
+        '--nx-dusty': string;
+        '--nx-body': string;
+        '--nx-sign': string;
+        '--nx-ash': string;
+        '--nx-muted': string;
+        '--nx-fog': string;
+        '--nx-parchment': string;
+        '--nx-paper': string;
+        '--nx-oat': string;
+        '--nx-clay': string;
+        '--nx-line': string;
+        '--nx-line-soft': string;
+        '--nx-glass': string;
+        '--nx-glass-hi': string;
+        '--nx-tile': string;
+        '--nx-scrim': string;
+        '--nx-shadow-card': string;
+        '--nx-shadow-card-hover': string;
+        '--nx-shadow-glass': string;
+        '--nx-shadow-button': string;
+        '--nx-shadow-button-hi': string;
+        '--nx-shadow-float': string;
+        '--nx-shadow-pop': string;
+        '--surface-input': string;
+        '--surface-input-hover': string;
+        '--surface-input-focus': string;
+        '--surface-input-disabled': string;
+        '--surface-footer': string;
+        '--border-input': string;
+        '--border-input-hover': string;
+        '--border-input-focus': string;
+        '--focus-ring': string;
+    };
+    body: {
+        backgroundColor: string;
+        color: string;
+        transition: string;
+    };
+};

package/dist/design-system/components/nxStyle.js

@@ -0,0 +1,89 @@
+export const nxLightStyle = {
+    ':root': {
+        '--nx-ink': '#1F1F1F',
+        '--nx-ink-logo': '#222222',
+        '--nx-dusty': '#3D3D3D',
+        '--nx-body': '#2F2F2F',
+        '--nx-sign': '#4D4D4D',
+        '--nx-ash': '#606060',
+        '--nx-muted': '#737373',
+        '--nx-fog': '#8A8A8A',
+        '--nx-parchment': '#FFFFFF',
+        '--nx-paper': '#FFFFFF',
+        '--nx-oat': '#E6E6E6',
+        '--nx-clay': '#5A5A5A',
+        '--nx-line': 'rgba(31, 31, 31, 0.14)',
+        '--nx-line-soft': 'rgba(31, 31, 31, 0.08)',
+        '--nx-glass': 'rgba(255, 255, 255, 0.42)',
+        '--nx-glass-hi': 'rgba(255, 255, 255, 0.5)',
+        '--nx-tile': 'rgba(255, 255, 255, 0.72)',
+        '--nx-scrim': 'rgba(17, 17, 17, 0.93)',
+        '--nx-shadow-card': '0 12px 40px rgba(31, 31, 31, 0.12)',
+        '--nx-shadow-card-hover': '0 28px 66px rgba(31, 31, 31, 0.18)',
+        '--nx-shadow-glass': '0 26px 60px -12px rgba(31, 31, 31, 0.18), 0 2px 6px rgba(31, 31, 31, 0.08)',
+        '--nx-shadow-button': '0 12px 30px rgba(31, 31, 31, 0.18)',
+        '--nx-shadow-button-hi': '0 18px 40px rgba(31, 31, 31, 0.24)',
+        '--nx-shadow-float': '0 40px 80px rgba(31, 31, 31, 0.24)',
+        '--nx-shadow-pop': '0 16px 48px rgba(31, 31, 31, 0.18)',
+        '--surface-input': 'rgba(255, 255, 255, 0.92)',
+        '--surface-input-hover': '#EDEDED',
+        '--surface-input-focus': '#FFFFFF',
+        '--surface-input-disabled': '#E0E0E0',
+        '--surface-footer': 'transparent',
+        '--border-input': 'rgba(31, 31, 31, 0.22)',
+        '--border-input-hover': 'rgba(31, 31, 31, 0.32)',
+        '--border-input-focus': '#5A5A5A',
+        '--focus-ring': '#5A5A5A',
+    },
+    body: {
+        backgroundColor: 'transparent',
+        color: '#1E1E1E',
+        transition: 'background-color 0.2s ease',
+    },
+};
+export const nxDarkStyle = {
+    ':root': {
+        '--nx-ink': '#F5F5F5',
+        '--nx-ink-logo': '#F5F5F5',
+        '--nx-dusty': '#D9D9D9',
+        '--nx-body': '#E5E5E5',
+        '--nx-sign': '#CFCFCF',
+        '--nx-ash': '#B8B8B8',
+        '--nx-muted': '#A3A3A3',
+        '--nx-fog': '#8F8F8F',
+        '--nx-parchment': '#111111',
+        '--nx-paper': '#1C1C1C',
+        '--nx-oat': '#4A4A4A',
+        '--nx-clay': '#F0F0F0',
+        '--nx-line': 'rgba(255, 255, 255, 0.16)',
+        '--nx-line-soft': 'rgba(255, 255, 255, 0.10)',
+        '--nx-glass': 'rgba(28, 28, 28, 0.72)',
+        '--nx-glass-hi': 'rgba(36, 36, 36, 0.82)',
+        '--nx-tile': 'rgba(28, 28, 28, 0.86)',
+        '--nx-scrim': 'rgba(17, 17, 17, 0.93)',
+        '--nx-shadow-card': '0 12px 40px rgba(0, 0, 0, 0.35)',
+        '--nx-shadow-card-hover': '0 28px 66px rgba(0, 0, 0, 0.46)',
+        '--nx-shadow-glass': '0 26px 60px -12px rgba(0, 0, 0, 0.46), 0 2px 6px rgba(0, 0, 0, 0.2)',
+        '--nx-shadow-button': '0 12px 30px rgba(0, 0, 0, 0.4)',
+        '--nx-shadow-button-hi': '0 18px 40px rgba(0, 0, 0, 0.5)',
+        '--nx-shadow-float': '0 40px 80px rgba(0, 0, 0, 0.5)',
+        '--nx-shadow-pop': '0 16px 48px rgba(0, 0, 0, 0.46)',
+        '--surface-input': 'rgba(28, 28, 28, 0.92)',
+        '--surface-input-hover': '#2A2A2A',
+        '--surface-input-focus': '#333333',
+        '--surface-input-disabled': '#2F2F2F',
+        '--surface-footer': '#1C1C1C',
+        '--border-input': 'rgba(255, 255, 255, 0.22)',
+        '--border-input-hover': 'rgba(255, 255, 255, 0.32)',
+        '--border-input-focus': '#F0F0F0',
+        '--focus-ring': '#F0F0F0',
+    },
+    body: {
+        backgroundColor: 'transparent',
+        color: '#F7F7F7',
+        transition: 'background-color 0.2s ease',
+    },
+};
+export function getNxStyle(mode) {
+    return mode === 'dark' ? nxDarkStyle : nxLightStyle;
+}

package/dist/design-system/components/responsive/Viewport/Viewport.d.ts

@@ -0,0 +1,4 @@
+import type { UseIsMobileOptions, VisibilityProps } from './types';
+export declare function useIsMobile({ maxWidth }?: UseIsMobileOptions): boolean;
+export declare function DesktopOnly({ children, maxWidth, fallback }: VisibilityProps): import("react").JSX.Element;
+export declare function MobileOnly({ children, maxWidth, fallback }: VisibilityProps): import("react").JSX.Element;

package/dist/design-system/components/responsive/Viewport/Viewport.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLayoutEffect, useState } from 'react';
+import { useMediaQuery } from '@mui/material';
+export function useIsMobile({ maxWidth = 999 } = {}) {
+    return useMediaQuery(`(max-width:${maxWidth}px)`, {
+        noSsr: true,
+        defaultMatches: false,
+    });
+}
+export function DesktopOnly({ children, maxWidth = 999, fallback = null }) {
+    const [hydrated, setHydrated] = useState(false);
+    useLayoutEffect(() => {
+        setHydrated(true);
+    }, []);
+    const isMobile = useIsMobile({ maxWidth });
+    if (!hydrated) {
+        return (_jsx("div", { style: { opacity: 0, pointerEvents: 'none' }, children: children }));
+    }
+    return isMobile ? _jsx(_Fragment, { children: fallback }) : _jsx(_Fragment, { children: children });
+}
+export function MobileOnly({ children, maxWidth = 999, fallback = null }) {
+    const [hydrated, setHydrated] = useState(false);
+    useLayoutEffect(() => {
+        setHydrated(true);
+    }, []);
+    const isMobile = useIsMobile({ maxWidth });
+    if (!hydrated) {
+        return (_jsx("div", { style: { opacity: 0, pointerEvents: 'none' }, children: children }));
+    }
+    return isMobile ? _jsx(_Fragment, { children: children }) : _jsx(_Fragment, { children: fallback });
+}

package/dist/design-system/components/responsive/Viewport/types.d.ts

@@ -0,0 +1 @@
+export type { UseIsMobileOptions, VisibilityProps } from '../../../types';

package/dist/design-system/components/responsive/Viewport/types.js

@@ -0,0 +1 @@
+export {};

package/dist/design-system/components/surfaces/Swatch/Swatch.d.ts

@@ -0,0 +1,2 @@
+import type { SwatchProps } from './types';
+export default function Swatch({ label, value }: SwatchProps): import("react").JSX.Element;