@goldlabelapps/theme 1.0.1 → 3.2.0

package/dist/context/ConfigContext.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
 export const defaultConfig = {
     metadata: {
-        title: "Application Template",
+        title: "NX° Template",
         description: "Modular full-stack web application",
         siteUrl: "https://goldlabel.pro",
         twitterHandle: "@goldlabelapps",
@@ -12,7 +12,7 @@ export const defaultConfig = {
         themeColor: "#012867",
     },
     brand: {
-        name: "Application",
+        name: "NX°",
         tagline: "Modern full-stack application template",
         logoType: "svg",
         logoSrc: "/svg/nx.svg",
@@ -25,8 +25,8 @@ export const defaultConfig = {
     },
     pwa: {
         enabled: true,
-        name: "Application Template",
-        shortName: "Application",
+        name: "NX° Template",
+        shortName: "NX°",
         description: "Modern full-stack application template",
         startUrl: "/",
         scope: "/",
@@ -40,7 +40,7 @@ export const defaultConfig = {
     },
     navigation: {
         links: [],
-        primaryCta: { label: "Get Started", href: "#" },
+        primaryCta: { label: "Get Started with NX°", href: "#" },
     },
     hero: {
         headline: "Modern Full-Stack Application",
@@ -98,7 +98,7 @@ export const defaultConfig = {
         brandName: "Goldlabel",
         columns: [],
         bottomLinks: [],
-        copyright: "© 2026 Goldlabel Apps. All rights reserved.",
+        copyright: "© 2026 Goldlabel Apps Ltd",
     },
 };
 const ConfigContext = createContext(defaultConfig);

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

@@ -0,0 +1,2 @@
+import type { DesignSystemProviderProps } from './types';
+export default function DesignSystemProvider({ children, mode, themeConfig }: DesignSystemProviderProps): import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CssBaseline, GlobalStyles, ThemeProvider } from '@mui/material';
+import { createAppTheme } from '../../../styles/theme';
+import { getNxStyle } from '../nxStyle';
+function resolveInitialMode(mode) {
+    if (mode) {
+        return mode;
+    }
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return 'light';
+}
+export default function DesignSystemProvider({ children, mode, themeConfig }) {
+    const resolvedMode = useMemo(() => resolveInitialMode(mode), [mode]);
+    const theme = createAppTheme(resolvedMode, themeConfig);
+    const style = getNxStyle(resolvedMode);
+    return (_jsxs(ThemeProvider, { theme: theme, children: [_jsx(CssBaseline, {}), _jsx(GlobalStyles, { styles: {
+                    ...style,
+                    body: {
+                        ...style.body,
+                        backgroundColor: 'transparent',
+                        color: theme.palette.text.primary,
+                        transition: 'background-color 0.2s ease',
+                    },
+                } }), children] }));
+}

package/dist/design-system/components/DesignSystemProvider/types.d.ts

@@ -0,0 +1 @@
+export type { DesignSystemMode, DesignSystemProviderProps, DesignSystemThemeConfig } from '../../types';

package/dist/design-system/components/DesignSystemProvider/types.js

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

package/dist/design-system/components/brand/Logo/Logo.d.ts

@@ -0,0 +1,2 @@
+import type { LogoProps } from './types';
+export default function Logo({ name, children, subtitle, icon, favicon, faceColor, smileColor, iconSize, }: LogoProps): import("react").JSX.Element;

package/dist/design-system/components/brand/Logo/Logo.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import Heading from '../../headings/Heading/Heading';
+import Icon from '../../icons/Icon/Icon';
+export default function Logo({ name = 'NX°', children, subtitle, icon = "pingpong", favicon = false, faceColor, smileColor, iconSize = 30, }) {
+    const theme = useTheme();
+    const faceFill = faceColor ?? theme.palette.primary.main;
+    const smileFill = smileColor ?? '#fff';
+    const text = children ?? name;
+    const hasText = !favicon && text !== undefined && text !== null && text !== '';
+    const showTextBlock = !favicon && (hasText || Boolean(subtitle));
+    return (_jsxs(Box, { sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 1.25,
+            color: 'text.primary'
+        }, children: [_jsx(Box, { "aria-hidden": "true", sx: {
+                    width: iconSize,
+                    height: iconSize,
+                    marginRight: 0.5,
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: 'primary.main',
+                    lineHeight: 0
+                }, children: icon ? (_jsx(Box, { sx: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Icon, { icon: icon, color: "secondary", size: iconSize }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: iconSize, height: iconSize, role: "img", "aria-label": "NX Favicon", children: _jsx("g", { stroke: "none", fill: "none", fillRule: "evenodd", children: _jsxs("g", { children: [_jsx("rect", { fillOpacity: "0", x: "0", y: "0", width: "24", height: "24" }), _jsxs("g", { transform: "translate(1, 1)", fillRule: "nonzero", children: [_jsx("path", { d: "M11.9316955,0.00778516743 C18.2793961,0.234625 23.2318292,5.339499 22.9916183,11.4103978 C22.7565183,17.4812966 17.4207699,22.2190224 11.0730694,21.9921826 C4.72536881,21.7653428 -0.227064254,16.6604688 0.00803576687,10.58957 C0.248246659,4.51867123 5.58399495,-0.218565786 11.9316955,0.00778516743 Z", fill: faceFill }), _jsx("path", { d: "M8,12 C12.6203742,21.9973959 20,13.9133228 20,13.9133228 C14.7209979,15.4126605 8,12 8,12 Z", fill: smileFill })] })] }) }) })) }), showTextBlock ? (_jsx(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                }, children: hasText ? (_jsx(Heading, { variant: "h2", style: {
+                        marginTop: 3,
+                    }, children: text })) : null })) : null] }));
+}

package/dist/design-system/components/brand/Logo/types.d.ts

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

package/dist/design-system/components/brand/Logo/types.js

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

package/dist/design-system/components/buttons/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonProps as NxButtonProps } from './types';
+export default function Button({ children, variant, tone, size, fullWidth, disabled, href, onClick, startIcon, endIcon, type, ariaLabel, className, sx, }: NxButtonProps): import("react").JSX.Element;

package/dist/design-system/components/buttons/Button/Button.js

@@ -0,0 +1,135 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as MuiButton } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+const SIZE_STYLES = {
+    sm: {
+        minHeight: 36,
+        px: 1.5,
+        py: 0.75,
+        fontSize: '0.9rem',
+    },
+    md: {
+        minHeight: 42,
+        px: 2,
+        py: 0.9,
+        fontSize: '0.96rem',
+    },
+    lg: {
+        minHeight: 48,
+        px: 2.5,
+        py: 1,
+        fontSize: '1rem',
+    },
+};
+const VARIANT_MAP = {
+    solid: 'contained',
+    outline: 'outlined',
+    ghost: 'text',
+    text: 'text',
+};
+function getToneStyles(tone, variant, theme) {
+    const styleVariant = variant === 'text' ? 'ghost' : variant;
+    const palette = theme.palette;
+    const tones = {
+        primary: {
+            solid: {
+                bgcolor: palette.primary.main,
+                color: palette.primary.contrastText || palette.common.white,
+                '&:hover': {
+                    bgcolor: palette.primary.dark,
+                },
+            },
+            outline: {
+                color: palette.primary.main,
+                borderColor: `${palette.primary.main}38`,
+                backgroundColor: `${palette.primary.main}0A`,
+                '&:hover': {
+                    borderColor: palette.primary.main,
+                    backgroundColor: `${palette.primary.main}14`,
+                },
+            },
+            ghost: {
+                color: palette.primary.main,
+                boxShadow: 'none',
+                '&:hover': {
+                    backgroundColor: `${palette.primary.main}14`,
+                    boxShadow: 'none',
+                },
+            },
+        },
+        neutral: {
+            solid: {
+                bgcolor: palette.text.primary,
+                color: palette.background.paper,
+                '&:hover': {
+                    bgcolor: palette.text.secondary,
+                },
+            },
+            outline: {
+                color: palette.text.primary,
+                borderColor: `${palette.text.primary}38`,
+                backgroundColor: `${palette.text.primary}0A`,
+                '&:hover': {
+                    borderColor: `${palette.text.primary}61`,
+                    backgroundColor: `${palette.text.primary}14`,
+                },
+            },
+            ghost: {
+                color: palette.text.primary,
+                boxShadow: 'none',
+                '&:hover': {
+                    backgroundColor: `${palette.text.primary}14`,
+                    boxShadow: 'none',
+                },
+            },
+        },
+        danger: {
+            solid: {
+                bgcolor: palette.error.main,
+                color: palette.error.contrastText,
+                '&:hover': {
+                    bgcolor: palette.error.dark,
+                },
+            },
+            outline: {
+                color: palette.error.main,
+                borderColor: `${palette.error.main}38`,
+                backgroundColor: `${palette.error.main}0A`,
+                '&:hover': {
+                    borderColor: palette.error.main,
+                    backgroundColor: `${palette.error.main}14`,
+                },
+            },
+            ghost: {
+                color: palette.error.main,
+                boxShadow: 'none',
+                '&:hover': {
+                    backgroundColor: `${palette.error.main}14`,
+                    boxShadow: 'none',
+                },
+            },
+        },
+    };
+    return tones[tone][styleVariant];
+}
+export default function Button({ children, variant = 'solid', tone = 'primary', size = 'md', fullWidth = false, disabled = false, href, onClick, startIcon, endIcon, type = 'button', ariaLabel, className, sx, }) {
+    const theme = useTheme();
+    const mergedSx = {
+        borderRadius: '3px',
+        fontWeight: 400,
+        lineHeight: 1,
+        letterSpacing: '0.02em',
+        textTransform: 'none',
+        alignSelf: 'flex-start',
+        width: fullWidth ? '100%' : 'auto',
+        boxShadow: variant === 'ghost' || variant === 'text' ? 'none' : undefined,
+        '&.Mui-disabled': {
+            opacity: 0.55,
+        },
+        ...SIZE_STYLES[size],
+        ...getToneStyles(tone, variant, theme),
+    };
+    const composedSx = Array.isArray(sx) ? [mergedSx, ...sx] : sx ? [mergedSx, sx] : mergedSx;
+    return (_jsx(MuiButton, { variant: VARIANT_MAP[variant], disableElevation: true, fullWidth: fullWidth, disabled: disabled, href: href, onClick: onClick, startIcon: startIcon, endIcon: endIcon, type: type, "aria-label": ariaLabel, className: className, sx: composedSx, children: children }));
+}

package/dist/design-system/components/buttons/Button/types.d.ts

@@ -0,0 +1 @@
+export type { ButtonProps, ButtonSize, ButtonTone, ButtonVariant } from '../../../types';

package/dist/design-system/components/buttons/Button/types.js

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

package/dist/design-system/components/buttons/IconButton/IconButton.d.ts

@@ -0,0 +1,2 @@
+import type { IconButtonProps as NxIconButtonProps } from './types';
+export default function IconButton({ icon, variant, tone, size, disabled, href, onClick, type, ariaLabel, className, color, sx, ...rest }: NxIconButtonProps): import("react").JSX.Element;

package/dist/design-system/components/buttons/IconButton/IconButton.js

@@ -0,0 +1,129 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconButton as MuiIconButton } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+const SIZE_STYLES = {
+    sm: {
+        width: 36,
+        height: 36,
+    },
+    md: {
+        width: 42,
+        height: 42,
+    },
+    lg: {
+        width: 48,
+        height: 48,
+    },
+};
+const VARIANT_MAP = {
+    solid: 'contained',
+    outline: 'outlined',
+    ghost: 'text',
+    text: 'text',
+};
+function getToneStyles(tone, variant, theme) {
+    const styleVariant = variant === 'text' ? 'ghost' : variant;
+    const palette = theme.palette;
+    const toneColors = {
+        primary: {
+            solid: {
+                bgcolor: palette.primary.main,
+                color: palette.primary.contrastText || palette.common.white,
+                '&:hover': {
+                    bgcolor: palette.primary.dark,
+                },
+            },
+            outline: {
+                color: palette.primary.main,
+                borderColor: `${palette.primary.main}38`,
+                backgroundColor: `${palette.primary.main}0A`,
+                '&:hover': {
+                    borderColor: palette.primary.main,
+                    backgroundColor: `${palette.primary.main}14`,
+                },
+            },
+            ghost: {
+                color: palette.primary.main,
+                boxShadow: 'none',
+                '&:hover': {
+                    backgroundColor: `${palette.primary.main}14`,
+                    boxShadow: 'none',
+                },
+            },
+        },
+        neutral: {
+            solid: {
+                bgcolor: palette.text.primary,
+                color: palette.background.paper,
+                '&:hover': {
+                    bgcolor: palette.text.secondary,
+                },
+            },
+            outline: {
+                color: palette.text.primary,
+                borderColor: `${palette.text.primary}38`,
+                backgroundColor: `${palette.text.primary}0A`,
+                '&:hover': {
+                    borderColor: `${palette.text.primary}61`,
+                    backgroundColor: `${palette.text.primary}14`,
+                },
+            },
+            ghost: {
+                color: palette.text.primary,
+                boxShadow: 'none',
+                '&:hover': {
+                    backgroundColor: `${palette.text.primary}14`,
+                    boxShadow: 'none',
+                },
+            },
+        },
+        danger: {
+            solid: {
+                bgcolor: palette.error.main,
+                color: palette.error.contrastText,
+                '&:hover': {
+                    bgcolor: palette.error.dark,
+                },
+            },
+            outline: {
+                color: palette.error.main,
+                borderColor: `${palette.error.main}38`,
+                backgroundColor: `${palette.error.main}0A`,
+                '&:hover': {
+                    borderColor: palette.error.main,
+                    backgroundColor: `${palette.error.main}14`,
+                },
+            },
+            ghost: {
+                color: palette.error.main,
+                boxShadow: 'none',
+                '&:hover': {
+                    backgroundColor: `${palette.error.main}14`,
+                    boxShadow: 'none',
+                },
+            },
+        },
+    };
+    return toneColors[tone][styleVariant];
+}
+export default function IconButton({ icon, variant = 'ghost', tone = 'primary', size = 'md', disabled = false, href, onClick, type = 'button', ariaLabel, className, color, sx, ...rest }) {
+    const theme = useTheme();
+    const muiColor = color ?? (tone === 'danger' ? 'error' : tone === 'primary' ? 'primary' : 'inherit');
+    const mergedSx = {
+        borderRadius: '3px',
+        alignSelf: 'flex-start',
+        border: VARIANT_MAP[variant] === 'outlined' ? '1px solid' : undefined,
+        boxShadow: variant === 'ghost' || variant === 'text' ? 'none' : undefined,
+        '&.Mui-disabled': {
+            opacity: 0.55,
+        },
+        ...SIZE_STYLES[size],
+        ...getToneStyles(tone, variant, theme),
+    };
+    const composedSx = Array.isArray(sx) ? [mergedSx, ...sx] : sx ? [mergedSx, sx] : mergedSx;
+    if (href) {
+        return (_jsx(MuiIconButton, { component: 'a', href: href, disabled: disabled, onClick: onClick, "aria-label": ariaLabel, className: className, color: muiColor, sx: composedSx, ...rest, children: icon }));
+    }
+    return (_jsx(MuiIconButton, { disabled: disabled, onClick: onClick, type: type, "aria-label": ariaLabel, className: className, color: muiColor, sx: composedSx, ...rest, children: icon }));
+}

package/dist/design-system/components/buttons/IconButton/types.d.ts

@@ -0,0 +1 @@
+export type { ButtonSize, ButtonTone, ButtonVariant, IconButtonProps } from '../../../types';

package/dist/design-system/components/buttons/IconButton/types.js

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

package/dist/design-system/components/feedback/Alert/Alert.d.ts

@@ -0,0 +1,2 @@
+import type { AlertProps } from './types';
+export default function Alert({ children, title, severity, dismissible }: AlertProps): import("react").JSX.Element;

package/dist/design-system/components/feedback/Alert/Alert.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button as MuiButton, Typography } from '@mui/material';
+export default function Alert({ children, title, severity = 'info', dismissible = false }) {
+    const tone = {
+        info: { border: 'rgba(168, 146, 122, 0.3)', bg: 'rgba(168, 146, 122, 0.14)' },
+        success: { border: 'rgba(47, 143, 70, 0.32)', bg: 'rgba(47, 143, 70, 0.12)' },
+        warning: { border: 'rgba(160, 98, 17, 0.28)', bg: 'rgba(160, 98, 17, 0.1)' },
+        error: { border: 'rgba(192, 59, 43, 0.32)', bg: 'rgba(192, 59, 43, 0.1)' }
+    }[severity];
+    return (_jsxs(Box, { sx: { border: `1px solid ${tone.border}`, borderLeft: '4px solid', borderColor: 'primary.main', borderRadius: '3px', bgcolor: tone.bg, p: 2.25, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2 }, children: [_jsxs(Box, { children: [title && _jsx(Typography, { variant: "subtitle2", sx: { mb: 0.5, fontWeight: 400 }, children: title }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: children })] }), dismissible && _jsx(MuiButton, { size: "small", variant: "text", children: "Dismiss" })] }));
+}

package/dist/design-system/components/feedback/Alert/types.d.ts

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

package/dist/design-system/components/feedback/Alert/types.js

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

package/dist/design-system/components/feedback/Card/Card.d.ts

@@ -0,0 +1,2 @@
+import type { CardProps } from './types';
+export default function Card({ children, padding, variant, hoverLift }: CardProps): import("react").JSX.Element;

package/dist/design-system/components/feedback/Card/Card.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { useState } from 'react';
+export default function Card({ children, padding = 'md', variant = 'paper', hoverLift = false }) {
+    const [isHovered, setIsHovered] = useState(false);
+    const pad = { sm: 2, md: 3, lg: 4 }[padding] ?? 3;
+    const styling = {
+        paper: {
+            bgcolor: 'background.paper',
+            border: '1px solid rgba(40, 34, 28, 0.12)',
+            boxShadow: '0 12px 40px rgba(40, 34, 28, 0.12)',
+        },
+        glass: {
+            bgcolor: 'rgba(255, 255, 255, 0.44)',
+            border: '1px solid rgba(255, 255, 255, 0.72)',
+            boxShadow: '0 26px 60px -12px rgba(40, 34, 28, 0.2)',
+            backdropFilter: 'blur(18px)',
+            WebkitBackdropFilter: 'blur(18px)',
+        },
+        tile: {
+            bgcolor: 'rgba(255, 255, 255, 0.7)',
+            border: '1px solid rgba(255, 255, 255, 0.6)',
+            boxShadow: '0 12px 24px rgba(40, 34, 28, 0.08)',
+            backdropFilter: 'blur(12px)',
+            WebkitBackdropFilter: 'blur(12px)',
+        },
+        ink: {
+            bgcolor: '#1F1F1F',
+            border: '1px solid transparent',
+            boxShadow: '0 12px 40px rgba(40, 34, 28, 0.12)',
+        },
+    }[variant];
+    return (_jsx(Box, { onMouseEnter: () => hoverLift && setIsHovered(true), onMouseLeave: () => hoverLift && setIsHovered(false), sx: {
+            borderRadius: '3px',
+            p: pad,
+            transition: 'transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease',
+            ...(isHovered && hoverLift
+                ? {
+                    transform: 'translateY(-6px)',
+                    boxShadow: '0 28px 66px rgba(40, 34, 28, 0.22)',
+                }
+                : {}),
+            ...styling,
+        }, children: children }));
+}

package/dist/design-system/components/feedback/Card/types.d.ts

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

package/dist/design-system/components/feedback/Card/types.js

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

package/dist/design-system/components/feedback/Field/Field.d.ts

@@ -0,0 +1,2 @@
+import type { FieldProps } from './types';
+export default function Field({ label, hint, error, ...textFieldProps }: FieldProps): import("react").JSX.Element;

package/dist/design-system/components/feedback/Field/Field.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, TextField, Typography } from '@mui/material';
+export default function Field({ label, hint, error, ...textFieldProps }) {
+    return (_jsxs(Stack, { spacing: 0.75, children: [label && _jsx(Typography, { variant: "overline", sx: { color: 'text.secondary', letterSpacing: '0.14em' }, children: label }), _jsx(TextField, { size: "small", ...textFieldProps, error: Boolean(error), helperText: error || hint })] }));
+}

package/dist/design-system/components/feedback/Field/types.d.ts

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

package/dist/design-system/components/feedback/Field/types.js

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

package/dist/design-system/components/feedback/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Alert } from './Alert/Alert';
+export { default as Card } from './Card/Card';
+export { default as Field } from './Field/Field';
+export type { AlertProps } from './Alert/types';
+export type { CardProps } from './Card/types';
+export type { FieldProps } from './Field/types';

package/dist/design-system/components/feedback/index.js

@@ -0,0 +1,3 @@
+export { default as Alert } from './Alert/Alert';
+export { default as Card } from './Card/Card';
+export { default as Field } from './Field/Field';

package/dist/design-system/components/headings/Heading/Heading.d.ts

@@ -0,0 +1,3 @@
+import type { HeadingProps } from './types';
+declare function Heading({ children, tone, as, variant, style, sx, ...rest }: HeadingProps): import("react").JSX.Element;
+export default Heading;

package/dist/design-system/components/headings/Heading/Heading.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+const headingVariantStyles = {
+    label: {
+        fontSize: '0.875rem',
+        letterSpacing: '0.22em',
+        textTransform: 'uppercase',
+        lineHeight: 1.2,
+    },
+    h1: {
+        fontSize: '2rem',
+        letterSpacing: '-0.01em',
+        textTransform: 'none',
+        lineHeight: 1.15,
+    },
+    h2: {
+        fontSize: '1.625rem',
+        letterSpacing: '-0.005em',
+        textTransform: 'none',
+        lineHeight: 1.2,
+    },
+    h3: {
+        fontSize: '1.35rem',
+        letterSpacing: '0',
+        textTransform: 'none',
+        lineHeight: 1.25,
+    },
+    h4: {
+        fontSize: '1.125rem',
+        letterSpacing: '0.005em',
+        textTransform: 'none',
+        lineHeight: 1.3,
+    },
+    h5: {
+        fontSize: '1rem',
+        letterSpacing: '0.01em',
+        textTransform: 'none',
+        lineHeight: 1.35,
+    },
+    h6: {
+        fontSize: '0.9375rem',
+        letterSpacing: '0.015em',
+        textTransform: 'none',
+        lineHeight: 1.35,
+    },
+};
+function Heading({ children, tone, as = 'span', variant, style, sx, ...rest }) {
+    const resolvedTone = tone === 'clay' ? 'primary' : tone === 'ink' ? 'secondary' : (tone ?? 'secondary');
+    const { fontWeight: _fontWeight, ...safeStyle } = style ?? {};
+    const inferredVariant = as === 'h1' || as === 'h2' || as === 'h3' || as === 'h4' || as === 'h5' || as === 'h6' ? as : 'label';
+    const resolvedVariant = variant ?? inferredVariant;
+    return (_jsx(Typography, { component: as, sx: [
+            {
+                display: as === 'span' ? 'inline-flex' : 'block',
+                alignItems: 'center',
+                gap: 1,
+                fontFamily: 'var(--font-title)',
+                ...headingVariantStyles[resolvedVariant],
+                color: resolvedTone === 'primary' ? 'primary.main' : 'secondary.main',
+                fontWeight: 400
+            },
+            ...(Array.isArray(sx) ? sx : sx ? [sx] : [])
+        ], style: safeStyle, ...rest, children: children }));
+}
+export default Heading;

package/dist/design-system/components/headings/Heading/types.d.ts

@@ -0,0 +1 @@
+export type { HeadingProps, HeadingTone, HeadingVariant } from '../../../types';

package/dist/design-system/components/headings/Heading/types.js

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

package/dist/design-system/components/icons/Icon/Icon.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { SvgIconProps } from '@mui/material/SvgIcon';
+import type { IconProps as LocalIconProps } from './types';
+type IconComponent = React.ComponentType<SvgIconProps>;
+declare const ICON_COMPONENTS: Record<string, IconComponent>;
+export type IconName = keyof typeof ICON_COMPONENTS;
+export declare const ICON_NAMES: IconName[];
+export type IconProps = LocalIconProps;
+export default function Icon({ icon, color, size }: IconProps): React.JSX.Element;
+export {};