@astral/ui 0.1.1 → 0.2.1

package/esm/src/Tag/styled.js

@@ -0,0 +1,117 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+import { Chip } from '@mui/material';
+import { styled } from '../styles';
+import { TagColors, TagStates } from './constants';
+var getShape = function (_a) {
+    var theme = _a.theme, rounded = _a.rounded;
+    if (rounded)
+        return '100px';
+    return theme.shape.small;
+};
+var getDeleteIconBorderRadius = function (_a) {
+    var theme = _a.theme, rounded = _a.rounded;
+    if (rounded)
+        return '100px';
+    return "0  ".concat(theme.shape.small, "  ").concat(theme.shape.small, " 0");
+};
+var getBgColor = function (_a) {
+    var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant;
+    if (customColor === TagColors.GREY) {
+        return theme.palette.grey[100];
+    }
+    var backgroundColorVariants = {
+        contained: {
+            primary: theme.palette.primary.main,
+            error: theme.palette.red[800],
+            success: theme.palette.green[800],
+            warning: theme.palette.yellow[800],
+            default: theme.palette.background.element,
+        },
+        light: {
+            primary: theme.palette.primary[100],
+            error: theme.palette.red[100],
+            success: theme.palette.green[100],
+            warning: theme.palette.yellow[100],
+            default: theme.palette.background.element,
+        },
+    };
+    if (!customVariant) {
+        return backgroundColorVariants.contained.primary;
+    }
+    if (customVariant && customColor) {
+        return backgroundColorVariants[customVariant][customColor];
+    }
+    return theme.palette.background.element;
+};
+var getColor = function (_a) {
+    var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant;
+    var textColorVariants = {
+        contained: {
+            primary: theme.palette.primary.contrastText,
+            error: theme.palette.error.contrastText,
+            success: theme.palette.warning.contrastText,
+            warning: theme.palette.success.contrastText,
+            default: theme.palette.text.primary,
+        },
+        light: {
+            primary: theme.palette.primary.main,
+            error: theme.palette.red[800],
+            success: theme.palette.green[800],
+            warning: theme.palette.yellow[800],
+            default: theme.palette.text.primary,
+        },
+    };
+    if (!customColor) {
+        return textColorVariants.contained.primary;
+    }
+    if (customVariant && customColor) {
+        return textColorVariants[customVariant][customColor];
+    }
+    return theme.palette.text.primary;
+};
+var getTagLabelPadding = function (_a) {
+    var theme = _a.theme, rounded = _a.rounded;
+    if (rounded)
+        return theme.spacing(0, 2);
+    return theme.spacing(0, 1);
+};
+var getDeleteIconBgColor = function (_a) {
+    var theme = _a.theme, iconState = _a.iconState;
+    var bgColorDeleteIcon = {
+        default: 'transparent',
+        hover: theme.palette.red[100],
+        active: theme.palette.red[200],
+    };
+    if (iconState) {
+        return bgColorDeleteIcon[iconState];
+    }
+    return 'transparent';
+};
+export var StyledTag = styled(Chip)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  user-select: none;\n  font-size: 14px;\n  height: 20px;\n  border-radius: ", ";\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .MuiChip-label {\n    padding: ", ";\n\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n    &:active {\n      color: ", ";\n    }\n  }\n  .MuiChip-deleteIcon {\n    margin: 0;\n    width: 20px;\n    height: 20px;\n    border-radius: ", ";\n\n    background: ", ";\n\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  }\n  .MuiChip-avatar {\n    margin: 2px;\n    width: 16px;\n    height: 16px;\n  }\n  .MuiChip-icon {\n    width: 16px;\n    height: 16px;\n  }\n"], ["\n  user-select: none;\n  font-size: 14px;\n  height: 20px;\n  border-radius: ", ";\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .MuiChip-label {\n    padding: ", ";\n\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n    &:active {\n      color: ", ";\n    }\n  }\n  .MuiChip-deleteIcon {\n    margin: 0;\n    width: 20px;\n    height: 20px;\n    border-radius: ", ";\n\n    background: ", ";\n\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  }\n  .MuiChip-avatar {\n    margin: 2px;\n    width: 16px;\n    height: 16px;\n  }\n  .MuiChip-icon {\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) { return getShape(__assign({}, props)); }, function (props) {
+    return getBgColor(__assign(__assign({}, props), { tagState: TagStates.DEFAULT }));
+}, function (props) {
+    return getBgColor(__assign(__assign({}, props), { tagState: TagStates.HOVER }));
+}, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.HOVER })); }, function (props) {
+    return getBgColor(__assign(__assign({}, props), { tagState: TagStates.ACTIVE }));
+}, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.ACTIVE })); }, function (props) { return getTagLabelPadding(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.DEFAULT })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.HOVER })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.ACTIVE })); }, function (props) { return getDeleteIconBorderRadius(__assign({}, props)); }, function (props) {
+    return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: TagStates.DEFAULT }));
+}, function (props) {
+    return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: TagStates.HOVER }));
+}, function (props) {
+    return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: TagStates.ACTIVE }));
+});
+var templateObject_1;

package/esm/src/Tag/types.d.ts

@@ -0,0 +1,12 @@
+import { ChipProps as MuiTagProps } from '@mui/material/Chip/Chip';
+import { TagColors, TagSizes, TagStates, TagVariants } from './constants';
+export declare type TagColor = `${TagColors}`;
+export declare type TagVariant = `${TagVariants}`;
+export declare type TagSize = `${TagSizes}`;
+export declare type TagState = `${TagStates}`;
+export declare type TagProps = Omit<MuiTagProps, 'color' | 'variant'> & {
+    color?: TagColor;
+    variant?: TagVariant;
+    size?: TagSize;
+    rounded?: boolean;
+};

package/esm/src/Tag/types.js

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

package/esm/src/TextField/TextField.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TextFieldProps } from './types';
+export declare const TextField: (props: TextFieldProps) => JSX.Element;
+export default TextField;

package/esm/src/TextField/TextField.js

@@ -0,0 +1,46 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import MuiTextField from '@mui/material/TextField';
+import { FormHelperText } from '../FormHelperText';
+export var TextField = function (props) {
+    var variant = props.variant, success = props.success, error = props.error, colorProp = props.color, helperTextProp = props.helperText, restProps = __rest(props, ["variant", "success", "error", "color", "helperText"]);
+    var color = useMemo(function () {
+        if (success) {
+            return 'success';
+        }
+        return undefined;
+    }, [success]);
+    var helperText = useMemo(function () {
+        if (success) {
+            return _jsx(FormHelperText, __assign({ success: true }, { children: helperTextProp }), void 0);
+        }
+        if (error) {
+            return _jsx(FormHelperText, __assign({ error: true }, { children: helperTextProp }), void 0);
+        }
+        return helperTextProp;
+    }, [helperTextProp, success, error]);
+    return (_jsx(MuiTextField, __assign({ variant: "outlined", error: error, color: color, helperText: helperText }, restProps), void 0));
+};
+export default TextField;

package/esm/src/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextField';
+export * from './types';

package/esm/src/TextField/index.js

@@ -0,0 +1,2 @@
+export * from './TextField';
+export * from './types';

package/esm/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/esm/src/TextField/types.js

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

package/esm/src/ThemeProvider/ThemeProvider.js

@@ -10,9 +10,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CssBaseline, ThemeProvider as MuiThemeProvider } from '@mui/material';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material';
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { GlobalStyles } from '../GlobalStyles';
 export var ThemeProvider = function (_a) {
     var theme = _a.theme, children = _a.children;
-    return (_jsx(MuiThemeProvider, __assign({ theme: theme }, { children: _jsxs(EmotionThemeProvider, __assign({ theme: theme }, { children: [_jsx(CssBaseline, {}, void 0), children] }), void 0) }), void 0));
+    return (_jsx(MuiThemeProvider, __assign({ theme: theme }, { children: _jsxs(EmotionThemeProvider, __assign({ theme: theme }, { children: [_jsx(GlobalStyles, {}, void 0), children] }), void 0) }), void 0));
 };

package/esm/src/Typography/Typography.d.ts

@@ -1,3 +1,4 @@
+/// <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'> & {

package/esm/src/index.d.ts

@@ -2,7 +2,13 @@ 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';

package/esm/src/index.js

@@ -2,7 +2,13 @@ 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';

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

@@ -49,6 +49,6 @@ describe('createTheme', function () {
     });
     it('Theme has elevation params', function () {
         var theme = createTheme({ brand: Brand.SIGN, fontsUrls: fontsUrls });
-        expect(theme.elevation[100]).toBe('box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 1px 1px 0px #072D5740;');
+        expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;');
     });
 });

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

@@ -1,16 +1,17 @@
 import { Palette as MuiPalette, Theme as MuiTheme, PaletteColor, ThemeOptions } from '@mui/material/styles';
 import { TypographyThemeOptions } from './typography';
-import { Color } from './palette';
+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'> & {
+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;
@@ -23,5 +24,5 @@ declare type CreateThemeParams = {
     options?: ThemeOptions;
     fontsUrls: FontsUrls;
 };
-export declare const createTheme: ({ brand, options, fontsUrls, }: CreateThemeParams) => Theme;
+export declare const createTheme: (params: CreateThemeParams) => Theme;
 export {};

package/esm/src/theme/baseTheme.js

@@ -6,8 +6,8 @@ import { getComponents } from './components';
 import { SPACING } from './constants';
 import { elevation } from './elevation';
 import { shape } from './shape';
-export var createTheme = function (_a) {
-    var brand = _a.brand, options = _a.options, fontsUrls = _a.fontsUrls;
+export var createTheme = function (params) {
+    var brand = params.brand, options = params.options, fontsUrls = params.fontsUrls;
     var themeOptions = {
         typography: typography,
         spacing: SPACING,

package/esm/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/esm/src/theme/components/MuiFormHelperText.js

@@ -0,0 +1,15 @@
+export var 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,
+                },
+            };
+        },
+    },
+};
+export default MuiFormHelperText;

package/esm/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/esm/src/theme/components/MuiFormLabel.js

@@ -0,0 +1,11 @@
+export var MuiFormLabel = {
+    styleOverrides: {
+        root: function () {
+            return {
+                position: 'relative',
+                transform: 'none',
+            };
+        },
+    },
+};
+export default MuiFormLabel;

package/esm/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/esm/src/theme/components/MuiInputBase.js

@@ -0,0 +1,13 @@
+export var MuiInputBase = {
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                '&.MuiInputBase-colorSuccess + .MuiFormHelperText-root': {
+                    color: theme.palette.green[800],
+                },
+            };
+        },
+    },
+};
+export default MuiInputBase;

package/esm/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/esm/src/theme/components/MuiInputLabel.js

@@ -0,0 +1,29 @@
+export var 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],
+                },
+            };
+        },
+    },
+};
+export default MuiInputLabel;

package/esm/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/esm/src/theme/components/MuiOutlinedInput.js

@@ -0,0 +1,61 @@
+export var 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],
+            };
+        },
+    },
+};
+export default MuiOutlinedInput;

package/esm/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/esm/src/theme/components/MuiTypography.js

@@ -0,0 +1,18 @@
+export var MuiTypography = {
+    variants: [
+        {
+            props: { variant: 'button' },
+            style: {
+                textTransform: 'capitalize',
+            },
+        },
+    ],
+    defaultProps: {
+        // TODO: необходимо кастомизировать типы Components['MuiTypography']
+        variantMapping: {
+            link: 'a',
+            code: 'code',
+        },
+    },
+};
+export default MuiTypography;

package/esm/src/theme/{components.d.ts → components/components.d.ts}

@@ -1,4 +1,5 @@
 import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
 export declare type FontsUrls = {
     bold: {
         woff: string;
@@ -17,4 +18,4 @@ export declare type FontsUrls = {
         woff2: string;
     };
 };
-export declare const getComponents: (fontUrls: FontsUrls) => Components;
+export declare const getComponents: (fontUrls: FontsUrls) => Components<Theme>;

package/esm/src/theme/components/components.js

@@ -0,0 +1,61 @@
+import { MuiInputBase } from './MuiInputBase';
+import { MuiFormHelperText } from './MuiFormHelperText';
+import { MuiFormLabel } from './MuiFormLabel';
+import { MuiInputLabel } from './MuiInputLabel';
+import { MuiOutlinedInput } from './MuiOutlinedInput';
+import { MuiTypography } from './MuiTypography';
+var getMuiCssBaseline = function (fontUrls) { return ({
+    styleOverrides: "\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 300;\n      font-display: swap;\n      src: url(".concat(fontUrls.light.woff2, ") format('woff2'), url(").concat(fontUrls.light.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 400;\n      font-display: swap;\n      src: url(").concat(fontUrls.regular.woff2, ") format('woff2'), url(").concat(fontUrls.regular.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 500;\n      font-display: swap;\n      src: url(").concat(fontUrls.medium.woff2, ") format('woff2'), url(").concat(fontUrls.medium.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 700;\n      font-display: swap;\n      src: url(").concat(fontUrls.bold.woff2, ") format('woff2'), url(").concat(fontUrls.bold.woff, ") format('woff');\n    }\n  "),
+}); };
+var MuiCheckbox = {
+    defaultProps: {
+        disableRipple: true,
+    },
+};
+var MuiMenu = {
+    defaultProps: {
+        autoFocus: false,
+    },
+    styleOverrides: {
+        paper: function (_a) {
+            var theme = _a.theme;
+            return {
+                marginTop: theme.spacing(2),
+                '&.MuiPaper-root': {
+                    borderRadius: theme.shape.small,
+                    boxShadow: theme.elevation[200],
+                },
+            };
+        },
+        list: function (_a) {
+            var theme = _a.theme;
+            return {
+                padding: theme.spacing(1, 0),
+            };
+        },
+    },
+};
+var MuiMenuItem = {
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                '&:hover': {
+                    backgroundColor: theme.palette.background.elementHover,
+                },
+            };
+        },
+    },
+};
+export var getComponents = function (fontUrls) { return ({
+    MuiCssBaseline: getMuiCssBaseline(fontUrls),
+    MuiTypography: MuiTypography,
+    MuiInputBase: MuiInputBase,
+    MuiInputLabel: MuiInputLabel,
+    MuiOutlinedInput: MuiOutlinedInput,
+    MuiFormLabel: MuiFormLabel,
+    MuiFormHelperText: MuiFormHelperText,
+    MuiCheckbox: MuiCheckbox,
+    MuiMenu: MuiMenu,
+    MuiMenuItem: MuiMenuItem,
+}); };

package/esm/src/theme/components/index.d.ts

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

package/esm/src/theme/components/index.js

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

package/esm/src/theme/elevation.js

@@ -1,7 +1,7 @@
 export var elevation = {
-    100: 'box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 1px 1px 0px #072D5740;',
-    200: 'box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 3px 5px 0px #072D5733;',
-    300: 'box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 8px 12px 0px #072D5726;',
-    400: 'box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 10px 18px 0px #072D5726;',
-    500: 'box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 18px 28px 0px #072D5726;',
+    100: '0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;',
+    200: '0px 0px 1px 0px #072D574F, 0px 3px 5px 0px #072D5733;',
+    300: '0px 0px 1px 0px #072D574F, 0px 8px 12px 0px #072D5726;',
+    400: '0px 0px 1px 0px #072D574F, 0px 10px 18px 0px #072D5726;',
+    500: '0px 0px 1px 0px #072D574F, 0px 18px 28px 0px #072D5726;',
 };

package/esm/src/theme/hooks/index.d.ts

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

package/esm/src/theme/hooks/index.js

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

package/esm/src/theme/hooks/useTheme/index.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../baseTheme';
+export declare const useTheme: () => Theme;

package/esm/src/theme/hooks/useTheme/index.js

@@ -0,0 +1,2 @@
+import { useTheme as useEmotionTheme } from '@emotion/react';
+export var useTheme = function () { return useEmotionTheme(); };

package/esm/src/theme/index.d.ts

@@ -3,3 +3,4 @@ export * from './palette';
 export * from './constants';
 export * from './elevation';
 export * from './shape';
+export * from './hooks';

package/esm/src/theme/index.js

@@ -3,3 +3,4 @@ export * from './palette';
 export * from './constants';
 export * from './elevation';
 export * from './shape';
+export * from './hooks';

package/esm/src/theme/palette/palette.d.ts

@@ -13,7 +13,7 @@ export declare type Color = {
     100: string;
 };
 export declare type PrimaryColorOptions = PaletteColorOptions & Color;
-declare type Background = TypeBackground & {
+export declare type Background = TypeBackground & {
     element: string;
     elementHover: string;
 };