@astral/ui 0.1.0 → 0.2.3

package/node/src/TextField/types.d.ts

@@ -0,0 +1,6 @@
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
+export declare type TextFieldProps = Omit<MuiTextFieldProps, 'variant' | 'color'> & {
+    variant?: never;
+    color?: never;
+    success?: boolean;
+};

package/node/src/TextField/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/src/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { Theme } from '../theme';
+declare type Props = {
+    theme: Theme;
+};
+export declare const ThemeProvider: FC<Props>;
+export {};

package/node/src/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,23 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = require("@emotion/react");
+var GlobalStyles_1 = require("../GlobalStyles");
+var ThemeProvider = function (_a) {
+    var theme = _a.theme, children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsxs)(react_1.ThemeProvider, __assign({ theme: theme }, { children: [(0, jsx_runtime_1.jsx)(GlobalStyles_1.GlobalStyles, {}, void 0), children] }), void 0) }), void 0));
+};
+exports.ThemeProvider = ThemeProvider;

package/node/src/ThemeProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './ThemeProvider';

package/node/src/ThemeProvider/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ThemeProvider"), exports);

package/node/src/Typography/Typography.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TypographyProps as MuiTypographyProps } from '@mui/material/Typography';
+import { Variant } from '@mui/material/styles/createTypography';
+export declare type TypographyProps = Omit<MuiTypographyProps, 'variant'> & {
+    variant?: Variant | 'h7' | 'h8' | 'h9' | 'ui' | 'link' | 'pointer' | 'small' | 'code';
+};
+export declare const Typography: ({ variant, children, ...props }: TypographyProps) => JSX.Element;
+export default Typography;

package/node/src/Typography/Typography.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var Typography = function (_a) {
+    var variant = _a.variant, children = _a.children, props = __rest(_a, ["variant", "children"]);
+    return ((0, jsx_runtime_1.jsx)(Typography_1.default, __assign({ variant: variant }, props, { children: children }), void 0));
+};
+exports.Typography = Typography;
+exports.default = exports.Typography;

package/node/src/Typography/index.d.ts

@@ -0,0 +1 @@
+export * from './Typography';

package/node/src/Typography/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Typography"), exports);

package/node/src/index.d.ts

@@ -0,0 +1,18 @@
+export * from './Button';
+export * from './ButtonBase';
+export * from './IconButton';
+export * from './Badge';
+export * from './Checkbox';
+export * from './FormControlLabel';
+export * from './Typography';
+export * from './Menu';
+export * from './MenuItem';
+export * from './MenuList';
+export * from './theme';
+export * from './styles';
+export * from './ThemeProvider';
+export * from './GlobalStyles';
+export * from './TextField';
+export * from './FormHelperText';
+export * from './Grid';
+export * from './Tag';

package/node/src/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Button"), exports);
+__exportStar(require("./ButtonBase"), exports);
+__exportStar(require("./IconButton"), exports);
+__exportStar(require("./Badge"), exports);
+__exportStar(require("./Checkbox"), exports);
+__exportStar(require("./FormControlLabel"), exports);
+__exportStar(require("./Typography"), exports);
+__exportStar(require("./Menu"), exports);
+__exportStar(require("./MenuItem"), exports);
+__exportStar(require("./MenuList"), exports);
+__exportStar(require("./theme"), exports);
+__exportStar(require("./styles"), exports);
+__exportStar(require("./ThemeProvider"), exports);
+__exportStar(require("./GlobalStyles"), exports);
+__exportStar(require("./TextField"), exports);
+__exportStar(require("./FormHelperText"), exports);
+__exportStar(require("./Grid"), exports);
+__exportStar(require("./Tag"), exports);

package/node/src/styles/index.d.ts

@@ -0,0 +1 @@
+export * from './styled';

package/node/src/styles/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./styled"), exports);

package/node/src/styles/styled/index.d.ts

@@ -0,0 +1 @@
+export * from './styled';

package/node/src/styles/styled/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./styled"), exports);

package/node/src/styles/styled/styled.d.ts

@@ -0,0 +1,2 @@
+import { CreateStyled } from './types';
+export declare const styled: CreateStyled;

package/node/src/styles/styled/styled.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styled = void 0;
+var styled_1 = __importDefault(require("@emotion/styled"));
+exports.styled = styled_1.default;

package/node/src/styles/styled/types.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { PropsOf } from '@emotion/react';
+import { CreateStyledComponent, FilteringStyledOptions, StyledOptions } from '@emotion/styled/base';
+import { Theme } from '../../theme';
+/**
+ * @desc
+ * This function accepts a React component or tag ('div', 'a' etc).
+ *
+ * @example styled(MyComponent)({ width: 100 })
+ * @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width })
+ * @example styled('div')({ width: 100 })
+ * @example styled('div')<Props>(props => ({ width: props.width })
+ */
+interface BaseCreateStyled {
+    <C extends React.ComponentClass<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
+        theme?: Theme;
+    }, {}, {
+        ref?: React.Ref<InstanceType<C>>;
+    }>;
+    <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
+        theme?: Theme;
+    }, {}, {
+        ref?: React.Ref<InstanceType<C>>;
+    }>;
+    <C extends React.ComponentType<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
+        theme?: Theme;
+    }>;
+    <C extends React.ComponentType<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
+        theme?: Theme;
+    }>;
+    <Tag extends keyof JSX.IntrinsicElements, ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag]>(tag: Tag, options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>): CreateStyledComponent<{
+        theme?: Theme;
+        as?: React.ElementType;
+    }, Pick<JSX.IntrinsicElements[Tag], ForwardedProps>>;
+    <Tag extends keyof JSX.IntrinsicElements>(tag: Tag, options?: StyledOptions<JSX.IntrinsicElements[Tag]>): CreateStyledComponent<{
+        theme?: Theme;
+        as?: React.ElementType;
+    }, JSX.IntrinsicElements[Tag]>;
+}
+declare type StyledTags = {
+    [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<{
+        theme?: Theme;
+        as?: React.ElementType;
+    }, JSX.IntrinsicElements[Tag]>;
+};
+export interface CreateStyled extends BaseCreateStyled, StyledTags {
+}
+export {};

package/node/src/styles/styled/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/src/theme/__tests__/BaseTheme.test.d.ts

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

package/node/src/theme/__tests__/BaseTheme.test.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var baseTheme_1 = require("../baseTheme");
+var constants_1 = require("../constants");
+describe('createTheme', function () {
+    var fontsUrls = {
+        bold: {
+            woff: '',
+            woff2: '',
+        },
+        regular: {
+            woff: '',
+            woff2: '',
+        },
+        medium: {
+            woff: '',
+            woff2: '',
+        },
+        light: {
+            woff: '',
+            woff2: '',
+        },
+    };
+    it('Theme merge done correctly', function () {
+        var extendedTheme = (0, baseTheme_1.createTheme)({
+            brand: constants_1.Brand.DEFAULT,
+            fontsUrls: fontsUrls,
+            options: {
+                typography: { h1: { lineHeight: 12 } },
+            },
+        });
+        expect(extendedTheme.typography.h1.lineHeight).toBe(12);
+    });
+    it('Color should be taken depending on the brand', function () {
+        var theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, fontsUrls: fontsUrls });
+        var expected = {
+            primary: {
+                main: '#376798',
+                dark: '#325D89',
+            },
+            secondary: {
+                main: '#4099AC',
+                dark: '#325D89',
+            },
+        };
+        expect(theme.palette).toMatchObject(expected);
+    });
+    it('Spacing are calculated correctly', function () {
+        var theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, fontsUrls: fontsUrls });
+        expect(theme.spacing(2)).toBe('8px');
+    });
+    it('Theme has elevation params', function () {
+        var theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, fontsUrls: fontsUrls });
+        expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;');
+    });
+});

package/node/src/theme/baseTheme.d.ts

@@ -0,0 +1,28 @@
+import { Palette as MuiPalette, Theme as MuiTheme, PaletteColor, ThemeOptions } from '@mui/material/styles';
+import { TypographyThemeOptions } from './typography';
+import { Background, Color } from './palette';
+import { FontsUrls } from './components';
+import { Brand } from './constants';
+import { Elevation } from './elevation';
+import { Shape } from './shape';
+export declare type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
+    red: Color;
+    green: Color;
+    yellow: Color;
+    grey: Color;
+    primary: PaletteColor & Color;
+    background: Background;
+};
+export declare type Theme = Omit<MuiTheme, 'shadows' | 'palette' | 'shape' | 'typography'> & {
+    elevation: Elevation;
+    palette: Palette;
+    shape: Shape;
+    typography: TypographyThemeOptions;
+};
+declare type CreateThemeParams = {
+    brand: Brand;
+    options?: ThemeOptions;
+    fontsUrls: FontsUrls;
+};
+export declare const createTheme: (params: CreateThemeParams) => Theme;
+export {};

package/node/src/theme/baseTheme.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = void 0;
+var styles_1 = require("@mui/material/styles");
+var lodash_es_1 = require("lodash-es");
+var typography_1 = require("./typography");
+var palette_1 = require("./palette");
+var components_1 = require("./components");
+var constants_1 = require("./constants");
+var elevation_1 = require("./elevation");
+var shape_1 = require("./shape");
+var createTheme = function (params) {
+    var brand = params.brand, options = params.options, fontsUrls = params.fontsUrls;
+    var themeOptions = {
+        typography: typography_1.typography,
+        spacing: constants_1.SPACING,
+        palette: (0, palette_1.getPalette)(brand),
+        components: (0, components_1.getComponents)(fontsUrls),
+    };
+    var muiTheme = (0, styles_1.responsiveFontSizes)((0, styles_1.createTheme)((0, lodash_es_1.merge)({}, themeOptions, options)));
+    return (0, lodash_es_1.merge)(muiTheme, { elevation: elevation_1.elevation, shape: shape_1.shape });
+};
+exports.createTheme = createTheme;

package/node/src/theme/components/MuiFormHelperText.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiFormHelperText: Components<Theme>['MuiFormHelperText'];
+export default MuiFormHelperText;

package/node/src/theme/components/MuiFormHelperText.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiFormHelperText = void 0;
+exports.MuiFormHelperText = {
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                margin: theme.spacing(1, 0, 0),
+                lineHeight: theme.typography.pxToRem(16),
+                '&.Mui-error': {
+                    color: theme.palette.error.dark,
+                },
+            };
+        },
+    },
+};
+exports.default = exports.MuiFormHelperText;

package/node/src/theme/components/MuiFormLabel.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiFormLabel: Components<Theme>['MuiFormLabel'];
+export default MuiFormLabel;

package/node/src/theme/components/MuiFormLabel.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiFormLabel = void 0;
+exports.MuiFormLabel = {
+    styleOverrides: {
+        root: function () {
+            return {
+                position: 'relative',
+                transform: 'none',
+            };
+        },
+    },
+};
+exports.default = exports.MuiFormLabel;

package/node/src/theme/components/MuiInputBase.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiInputBase: Components<Theme>['MuiInputBase'];
+export default MuiInputBase;

package/node/src/theme/components/MuiInputBase.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiInputBase = void 0;
+exports.MuiInputBase = {
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                '&.MuiInputBase-colorSuccess + .MuiFormHelperText-root': {
+                    color: theme.palette.green[800],
+                },
+            };
+        },
+    },
+};
+exports.default = exports.MuiInputBase;

package/node/src/theme/components/MuiInputLabel.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiInputLabel: Components<Theme>['MuiInputLabel'];
+export default MuiInputLabel;

package/node/src/theme/components/MuiInputLabel.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiInputLabel = void 0;
+exports.MuiInputLabel = {
+    defaultProps: {
+        shrink: true,
+    },
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                position: 'relative',
+                transform: 'none',
+                color: theme.palette.grey[700],
+                fontWeight: theme.typography.fontWeightMedium,
+                fontSize: theme.typography.pxToRem(12),
+                lineHeight: theme.typography.pxToRem(16),
+                marginBottom: theme.spacing(1),
+                '&.Mui-focused': {
+                    color: theme.palette.grey[700],
+                },
+                '&.Mui-error': {
+                    color: theme.palette.grey[700],
+                },
+                '&.Mui-disabled': {
+                    color: theme.palette.grey[600],
+                },
+            };
+        },
+    },
+};
+exports.default = exports.MuiInputLabel;

package/node/src/theme/components/MuiOutlinedInput.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiOutlinedInput: Components<Theme>['MuiOutlinedInput'];
+export default MuiOutlinedInput;

package/node/src/theme/components/MuiOutlinedInput.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiOutlinedInput = void 0;
+exports.MuiOutlinedInput = {
+    defaultProps: {
+        notched: false,
+    },
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                fontSize: theme.typography.pxToRem(14),
+                borderRadius: theme.shape.small,
+                color: theme.palette.grey[900],
+                background: theme.palette.background.element,
+                '&:hover': {
+                    // FIXME: to theme
+                    background: '#EEF1F4',
+                },
+                '&:hover .MuiOutlinedInput-notchedOutline': {
+                    borderColor: theme.palette.grey[300],
+                },
+                '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
+                    borderColor: theme.palette.background.element,
+                },
+                '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+                    borderColor: theme.palette.error.dark,
+                },
+                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    borderColor: theme.palette.primary[700],
+                },
+            };
+        },
+        input: function (_a) {
+            var theme = _a.theme;
+            return {
+                padding: theme.spacing(2.5, 2),
+                borderRadius: theme.shape.small,
+                '&:disabled': {
+                    background: theme.palette.background.element,
+                },
+                '&::placeholder': {
+                    opacity: 1,
+                    color: theme.palette.grey[600],
+                },
+            };
+        },
+        inputSizeSmall: function (_a) {
+            var theme = _a.theme;
+            return {
+                paddingBlock: theme.spacing(2),
+                paddingInline: theme.spacing(1.5),
+            };
+        },
+        notchedOutline: function (_a) {
+            var theme = _a.theme;
+            return {
+                borderWidth: '2px',
+                borderColor: theme.palette.grey[300],
+            };
+        },
+    },
+};
+exports.default = exports.MuiOutlinedInput;

package/node/src/theme/components/MuiTypography.d.ts

@@ -0,0 +1,21 @@
+import { Components } from '@mui/material';
+export declare type FontsUrls = {
+    bold: {
+        woff: string;
+        woff2: string;
+    };
+    light: {
+        woff: string;
+        woff2: string;
+    };
+    medium: {
+        woff: string;
+        woff2: string;
+    };
+    regular: {
+        woff: string;
+        woff2: string;
+    };
+};
+export declare const MuiTypography: Components['MuiTypography'];
+export default MuiTypography;

package/node/src/theme/components/MuiTypography.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiTypography = void 0;
+exports.MuiTypography = {
+    variants: [
+        {
+            props: { variant: 'button' },
+            style: {
+                textTransform: 'capitalize',
+            },
+        },
+    ],
+    defaultProps: {
+        // TODO: необходимо кастомизировать типы Components['MuiTypography']
+        variantMapping: {
+            link: 'a',
+            code: 'code',
+        },
+    },
+};
+exports.default = exports.MuiTypography;

package/node/src/theme/components/components.d.ts

@@ -0,0 +1,21 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare type FontsUrls = {
+    bold: {
+        woff: string;
+        woff2: string;
+    };
+    light: {
+        woff: string;
+        woff2: string;
+    };
+    medium: {
+        woff: string;
+        woff2: string;
+    };
+    regular: {
+        woff: string;
+        woff2: string;
+    };
+};
+export declare const getComponents: (fontUrls: FontsUrls) => Components<Theme>;