@astral/ui 0.1.0 → 0.1.1

package/esm/src/ButtonBase/styled.js

@@ -0,0 +1,196 @@
+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 ButtonUnstyled, { buttonUnstyledClasses, } from '@mui/base/ButtonUnstyled';
+import { styled } from '../styles';
+import { ButtonColors, ButtonSizes, ButtonStates, ButtonVariants, } from './constants';
+var BACKGROUND_COLOR_VARIANTS = {
+    default: {
+        contained: '800',
+        light: '100',
+        text: '100',
+    },
+    hover: {
+        contained: '700',
+        light: '200',
+        text: '200',
+    },
+    focus: {
+        contained: '900',
+        light: '100',
+        text: '100',
+    },
+};
+export var getColor = function (_a) {
+    var theme = _a.theme, customVariant = _a.customVariant, customColor = _a.customColor, buttonState = _a.buttonState;
+    var palette = theme.palette;
+    if (buttonState === ButtonStates.ACTIVE) {
+        if (customVariant === ButtonVariants.LINK)
+            return palette.grey['900'];
+        return palette.primary.contrastText;
+    }
+    if (customVariant === ButtonVariants.TEXT) {
+        if (buttonState === ButtonStates.FOCUS)
+            return theme.palette.primary.main;
+        return palette.grey['900'];
+    }
+    if (customVariant === ButtonVariants.CONTAINED)
+        return palette.primary.contrastText;
+    if (customVariant === ButtonVariants.LIGHT) {
+        if (customColor === ButtonColors.PRIMARY) {
+            if (buttonState === ButtonStates.DEFAULT)
+                return palette.grey['900'];
+            if (buttonState === ButtonStates.HOVER)
+                return palette.grey['900'];
+            if (buttonState === ButtonStates.FOCUS)
+                return palette.primary['800'];
+        }
+        if (customColor === ButtonColors.ERROR)
+            return palette.red['900'];
+        if (customColor === ButtonColors.SUCCESS)
+            return palette.green['900'];
+        if (customColor === ButtonColors.WARNING)
+            return palette.yellow['900'];
+        return palette.grey['900'];
+    }
+    if (customVariant === ButtonVariants.LINK) {
+        if (buttonState === ButtonStates.DEFAULT)
+            return palette.primary['800'];
+        if (buttonState === ButtonStates.HOVER)
+            return palette.primary['700'];
+        if (buttonState === ButtonStates.FOCUS)
+            return palette.primary.dark;
+        return palette.primary.main;
+    }
+    return palette.grey['900'];
+};
+export var getBgText = function (_a) {
+    var palette = _a.palette, buttonState = _a.buttonState, colorVariant = _a.colorVariant;
+    if (buttonState === ButtonStates.HOVER)
+        return palette.grey[colorVariant];
+    if (buttonState === ButtonStates.FOCUS)
+        return palette.primary[colorVariant];
+    return 'transparent';
+};
+var getBgContained = function (_a) {
+    var palette = _a.palette, colorVariant = _a.colorVariant, customColor = _a.customColor;
+    if (customColor === ButtonColors.ERROR)
+        return palette.red[colorVariant];
+    if (customColor === ButtonColors.SUCCESS)
+        return palette.green[colorVariant];
+    if (customColor === ButtonColors.WARNING)
+        return palette.yellow[colorVariant];
+    if (customColor === ButtonColors.PRIMARY)
+        return palette.primary[colorVariant];
+    return 'transparent';
+};
+var getBgLight = function (_a) {
+    var palette = _a.palette, colorVariant = _a.colorVariant, buttonState = _a.buttonState, customColor = _a.customColor;
+    if (customColor === ButtonColors.PRIMARY) {
+        if (buttonState === ButtonStates.DEFAULT)
+            return palette.grey[colorVariant];
+        if (buttonState === ButtonStates.HOVER)
+            return palette.grey[colorVariant];
+        if (buttonState === ButtonStates.FOCUS)
+            return palette.primary[colorVariant];
+    }
+    if (customColor === ButtonColors.ERROR)
+        return palette.red[colorVariant];
+    if (customColor === ButtonColors.SUCCESS)
+        return palette.green[colorVariant];
+    if (customColor === ButtonColors.WARNING)
+        return palette.yellow[colorVariant];
+    return 'transparent';
+};
+export var getBgColor = function (_a) {
+    var customColor = _a.customColor, customVariant = _a.customVariant, buttonState = _a.buttonState, theme = _a.theme;
+    var palette = theme.palette;
+    if (customVariant === ButtonVariants.LINK)
+        return 'transparent';
+    if (buttonState === ButtonStates.ACTIVE)
+        return palette.grey['900'];
+    var containedColor = BACKGROUND_COLOR_VARIANTS[buttonState].contained;
+    var lightColor = BACKGROUND_COLOR_VARIANTS[buttonState].light;
+    var textColor = BACKGROUND_COLOR_VARIANTS[buttonState].text;
+    if (customVariant === ButtonVariants.TEXT)
+        return getBgText({ buttonState: buttonState, palette: palette, colorVariant: textColor });
+    if (customVariant === ButtonVariants.CONTAINED)
+        return getBgContained({
+            palette: palette,
+            customColor: customColor,
+            colorVariant: containedColor,
+        });
+    if (customVariant === ButtonVariants.LIGHT)
+        return getBgLight({
+            palette: palette,
+            buttonState: buttonState,
+            customColor: customColor,
+            colorVariant: lightColor,
+        });
+    return 'transparent';
+};
+export var getButtonHeight = function (_a) {
+    var size = _a.size;
+    if (size === ButtonSizes.LARGE)
+        return '40px';
+    return '32px';
+};
+export var getButtonPadding = function (_a) {
+    var size = _a.size, theme = _a.theme;
+    if (size === ButtonSizes.LARGE)
+        return theme.spacing(2, 4, 2, 4);
+    return theme.spacing(1, 3, 1, 3);
+};
+export var getDisabledBgColor = function (_a) {
+    var theme = _a.theme, customVariant = _a.customVariant;
+    if (customVariant === ButtonVariants.LINK ||
+        customVariant === ButtonVariants.TEXT)
+        return 'transparent';
+    return theme.palette.grey['100'];
+};
+export var StyledButtonBase = styled(ButtonUnstyled, {
+    shouldForwardProp: function (prop) {
+        return prop !== 'customColor' && prop !== 'customVariant';
+    },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  font-family: Ubuntu, serif;\n  padding: ", ";\n  height: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.", " {\n    cursor: unset;\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  border: none;\n  font-family: Ubuntu, serif;\n  padding: ", ";\n  height: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.", " {\n    cursor: unset;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), getButtonPadding, getButtonHeight, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.small;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.button.fontSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.button.fontWeight;
+}, function (props) {
+    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.DEFAULT }));
+}, function (props) {
+    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.DEFAULT }));
+}, function (props) {
+    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.HOVER }));
+}, function (props) {
+    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.HOVER }));
+}, function (props) {
+    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.FOCUS }));
+}, function (props) {
+    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.FOCUS }));
+}, function (props) {
+    return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.ACTIVE }));
+}, function (props) {
+    return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.ACTIVE }));
+}, buttonUnstyledClasses.disabled, getDisabledBgColor, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey['500'];
+});
+var templateObject_1;

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

@@ -0,0 +1,11 @@
+import { ButtonUnstyledProps } from '@mui/base/ButtonUnstyled';
+import { ButtonColors, ButtonSizes, ButtonStates, ButtonVariants } from './constants';
+export declare type ButtonColor = `${ButtonColors}`;
+export declare type ButtonVariant = `${ButtonVariants}`;
+export declare type ButtonSize = `${ButtonSizes}`;
+export declare type ButtonState = `${ButtonStates}`;
+export declare type BaseButtonProps = Omit<ButtonUnstyledProps, 'color' | 'variant' | 'size'> & {
+    color?: ButtonColor;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};

package/esm/src/ButtonBase/types.js

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

package/esm/src/CircularProgress/CircularProgress.d.ts

@@ -0,0 +1,3 @@
+import { CircularProgressProps } from './types';
+export declare const CircularProgress: ({ color, size, ...props }: CircularProgressProps) => JSX.Element;
+export default CircularProgress;

package/esm/src/CircularProgress/CircularProgress.js

@@ -0,0 +1,29 @@
+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 { StyledCircularProgress } from './styled';
+export var CircularProgress = function (_a) {
+    var color = _a.color, size = _a.size, props = __rest(_a, ["color", "size"]);
+    return (_jsx(StyledCircularProgress, __assign({}, props, { customSize: size, customColor: color }), void 0));
+};
+export default CircularProgress;

package/esm/src/CircularProgress/constants.d.ts

@@ -0,0 +1,9 @@
+export declare enum CircularProgressColors {
+    PRIMARY = "primary",
+    INVERTED = "inverted"
+}
+export declare enum CircularProgressSizes {
+    SMALL = "small",
+    MEDIUM = "medium",
+    NUMBER = "number"
+}

package/esm/src/CircularProgress/constants.js

@@ -0,0 +1,11 @@
+export var CircularProgressColors;
+(function (CircularProgressColors) {
+    CircularProgressColors["PRIMARY"] = "primary";
+    CircularProgressColors["INVERTED"] = "inverted";
+})(CircularProgressColors || (CircularProgressColors = {}));
+export var CircularProgressSizes;
+(function (CircularProgressSizes) {
+    CircularProgressSizes["SMALL"] = "small";
+    CircularProgressSizes["MEDIUM"] = "medium";
+    CircularProgressSizes["NUMBER"] = "number";
+})(CircularProgressSizes || (CircularProgressSizes = {}));

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

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

package/esm/src/CircularProgress/index.js

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

package/esm/src/CircularProgress/styled.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '../theme';
+import { CircularProgressProps } from './types';
+export declare const StyledCircularProgress: import("@emotion/styled").StyledComponent<import("@mui/material").CircularProgressProps & {
+    theme?: Theme | undefined;
+} & Omit<CircularProgressProps, "color" | "size"> & {
+    customColor?: "primary" | "inverted" | undefined;
+    customSize?: "number" | "medium" | "small" | undefined;
+}, {}, {}>;

package/esm/src/CircularProgress/styled.js

@@ -0,0 +1,23 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { CircularProgress } from '@mui/material';
+import { styled } from '../styles';
+import { CircularProgressColors, CircularProgressSizes } from './constants';
+var getColor = function (_a) {
+    var theme = _a.theme, customColor = _a.customColor;
+    if (customColor === CircularProgressColors.PRIMARY)
+        return theme.palette.primary.dark;
+    return theme.palette.primary.contrastText;
+};
+var getCircularProgressSize = function (_a) {
+    var customSize = _a.customSize;
+    if (customSize === CircularProgressSizes.SMALL)
+        return '16px';
+    return '24px';
+};
+export var StyledCircularProgress = styled(CircularProgress, {
+    shouldForwardProp: function (prop) { return prop !== 'customColor' && prop !== 'customSize'; },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n"])), getCircularProgressSize, getCircularProgressSize, function (props) { return getColor(props); });
+var templateObject_1;

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

@@ -0,0 +1,8 @@
+import { CircularProgressProps as MuiCircularProgressProps } from '@mui/material';
+import { CircularProgressColors, CircularProgressSizes } from './constants';
+export declare type CircularProgressColor = `${CircularProgressColors}`;
+export declare type CircularProgressSize = `${CircularProgressSizes}`;
+export declare type CircularProgressProps = Omit<MuiCircularProgressProps, 'color' | 'size'> & {
+    color?: CircularProgressColor;
+    size?: CircularProgressSize;
+};

package/esm/src/CircularProgress/types.js

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

package/esm/src/IconButton/IconButton.d.ts

@@ -0,0 +1,2 @@
+import { BaseButtonProps } from '../ButtonBase';
+export declare const IconButton: ({ children, ...props }: BaseButtonProps) => JSX.Element;

package/esm/src/IconButton/IconButton.js

@@ -0,0 +1,28 @@
+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 { StyledIconButton } from './styled';
+export var IconButton = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return _jsx(StyledIconButton, __assign({}, props, { children: children }), void 0);
+};

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

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

package/esm/src/IconButton/index.js

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

package/esm/src/IconButton/styled.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { Theme } from '../theme';
+import { ButtonProps } from '../Button';
+declare type StyledIconButtonThemeProps = ButtonProps & {
+    theme: Theme;
+};
+export declare const getButtonHeight: ({ size, }: StyledIconButtonThemeProps) => string;
+export declare const StyledIconButton: import("@emotion/styled").StyledComponent<Omit<import("@mui/base/ButtonUnstyled/ButtonUnstyledProps").default<"button", {}>, "color" | "variant" | "size"> & {
+    color?: "primary" | "error" | "warning" | "success" | undefined;
+    variant?: "link" | "light" | "text" | "contained" | undefined;
+    size?: "large" | "medium" | undefined;
+} & {
+    theme?: Theme | undefined;
+} & {
+    loading?: boolean | undefined;
+    startIcon?: import("react").ReactNode;
+    endIcon?: import("react").ReactNode;
+}, {}, {}>;
+export {};

package/esm/src/IconButton/styled.js

@@ -0,0 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '../styles';
+import { ButtonBase, ButtonSizes } from '../ButtonBase';
+export var getButtonHeight = function (_a) {
+    var size = _a.size;
+    if (size === ButtonSizes.LARGE)
+        return '40px';
+    return '32px';
+};
+export var StyledIconButton = styled(ButtonBase, {
+    shouldForwardProp: function (prop) {
+        return prop !== 'startIcon' && prop !== 'endIcon' && prop !== 'loading';
+    },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n"])), getButtonHeight, getButtonHeight, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+});
+var templateObject_1;

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

@@ -0,0 +1,18 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CssBaseline, ThemeProvider as MuiThemeProvider } from '@mui/material';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+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));
+};

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

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

package/esm/src/ThemeProvider/index.js

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

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

@@ -0,0 +1,7 @@
+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/esm/src/Typography/Typography.js

@@ -0,0 +1,29 @@
+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 MuiTypography from '@mui/material/Typography';
+export var Typography = function (_a) {
+    var variant = _a.variant, children = _a.children, props = __rest(_a, ["variant", "children"]);
+    return (_jsx(MuiTypography, __assign({ variant: variant }, props, { children: children }), void 0));
+};
+export default Typography;

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

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

package/esm/src/Typography/index.js

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

package/esm/src/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Button';
+export * from './ButtonBase';
+export * from './IconButton';
+export * from './Badge';
+export * from './Typography';
+export * from './theme';
+export * from './styles';
+export * from './ThemeProvider';

package/esm/src/index.js

@@ -0,0 +1,8 @@
+export * from './Button';
+export * from './ButtonBase';
+export * from './IconButton';
+export * from './Badge';
+export * from './Typography';
+export * from './theme';
+export * from './styles';
+export * from './ThemeProvider';

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

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

package/esm/src/styles/index.js

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

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

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

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

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

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

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

package/esm/src/styles/styled/styled.js

@@ -0,0 +1,2 @@
+import emotionStyled from '@emotion/styled';
+export var styled = emotionStyled;

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

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

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

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

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

@@ -0,0 +1,54 @@
+import { createTheme } from '../baseTheme';
+import { Brand } from '../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 = createTheme({
+            brand: 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 = createTheme({ brand: 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 = createTheme({ brand: Brand.SIGN, fontsUrls: fontsUrls });
+        expect(theme.spacing(2)).toBe('8px');
+    });
+    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;');
+    });
+});