@astral/ui 0.1.0 → 0.1.1

package/cjs/src/ButtonBase/styled.js

@@ -0,0 +1,224 @@
+"use strict";
+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);
+};
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledButtonBase = exports.getDisabledBgColor = exports.getButtonPadding = exports.getButtonHeight = exports.getBgColor = exports.getBgText = exports.getColor = void 0;
+var ButtonUnstyled_1 = __importStar(require("@mui/base/ButtonUnstyled"));
+var styles_1 = require("../styles");
+var constants_1 = require("./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',
+    },
+};
+var getColor = function (_a) {
+    var theme = _a.theme, customVariant = _a.customVariant, customColor = _a.customColor, buttonState = _a.buttonState;
+    var palette = theme.palette;
+    if (buttonState === constants_1.ButtonStates.ACTIVE) {
+        if (customVariant === constants_1.ButtonVariants.LINK)
+            return palette.grey['900'];
+        return palette.primary.contrastText;
+    }
+    if (customVariant === constants_1.ButtonVariants.TEXT) {
+        if (buttonState === constants_1.ButtonStates.FOCUS)
+            return theme.palette.primary.main;
+        return palette.grey['900'];
+    }
+    if (customVariant === constants_1.ButtonVariants.CONTAINED)
+        return palette.primary.contrastText;
+    if (customVariant === constants_1.ButtonVariants.LIGHT) {
+        if (customColor === constants_1.ButtonColors.PRIMARY) {
+            if (buttonState === constants_1.ButtonStates.DEFAULT)
+                return palette.grey['900'];
+            if (buttonState === constants_1.ButtonStates.HOVER)
+                return palette.grey['900'];
+            if (buttonState === constants_1.ButtonStates.FOCUS)
+                return palette.primary['800'];
+        }
+        if (customColor === constants_1.ButtonColors.ERROR)
+            return palette.red['900'];
+        if (customColor === constants_1.ButtonColors.SUCCESS)
+            return palette.green['900'];
+        if (customColor === constants_1.ButtonColors.WARNING)
+            return palette.yellow['900'];
+        return palette.grey['900'];
+    }
+    if (customVariant === constants_1.ButtonVariants.LINK) {
+        if (buttonState === constants_1.ButtonStates.DEFAULT)
+            return palette.primary['800'];
+        if (buttonState === constants_1.ButtonStates.HOVER)
+            return palette.primary['700'];
+        if (buttonState === constants_1.ButtonStates.FOCUS)
+            return palette.primary.dark;
+        return palette.primary.main;
+    }
+    return palette.grey['900'];
+};
+exports.getColor = getColor;
+var getBgText = function (_a) {
+    var palette = _a.palette, buttonState = _a.buttonState, colorVariant = _a.colorVariant;
+    if (buttonState === constants_1.ButtonStates.HOVER)
+        return palette.grey[colorVariant];
+    if (buttonState === constants_1.ButtonStates.FOCUS)
+        return palette.primary[colorVariant];
+    return 'transparent';
+};
+exports.getBgText = getBgText;
+var getBgContained = function (_a) {
+    var palette = _a.palette, colorVariant = _a.colorVariant, customColor = _a.customColor;
+    if (customColor === constants_1.ButtonColors.ERROR)
+        return palette.red[colorVariant];
+    if (customColor === constants_1.ButtonColors.SUCCESS)
+        return palette.green[colorVariant];
+    if (customColor === constants_1.ButtonColors.WARNING)
+        return palette.yellow[colorVariant];
+    if (customColor === constants_1.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 === constants_1.ButtonColors.PRIMARY) {
+        if (buttonState === constants_1.ButtonStates.DEFAULT)
+            return palette.grey[colorVariant];
+        if (buttonState === constants_1.ButtonStates.HOVER)
+            return palette.grey[colorVariant];
+        if (buttonState === constants_1.ButtonStates.FOCUS)
+            return palette.primary[colorVariant];
+    }
+    if (customColor === constants_1.ButtonColors.ERROR)
+        return palette.red[colorVariant];
+    if (customColor === constants_1.ButtonColors.SUCCESS)
+        return palette.green[colorVariant];
+    if (customColor === constants_1.ButtonColors.WARNING)
+        return palette.yellow[colorVariant];
+    return 'transparent';
+};
+var getBgColor = function (_a) {
+    var customColor = _a.customColor, customVariant = _a.customVariant, buttonState = _a.buttonState, theme = _a.theme;
+    var palette = theme.palette;
+    if (customVariant === constants_1.ButtonVariants.LINK)
+        return 'transparent';
+    if (buttonState === constants_1.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 === constants_1.ButtonVariants.TEXT)
+        return (0, exports.getBgText)({ buttonState: buttonState, palette: palette, colorVariant: textColor });
+    if (customVariant === constants_1.ButtonVariants.CONTAINED)
+        return getBgContained({
+            palette: palette,
+            customColor: customColor,
+            colorVariant: containedColor,
+        });
+    if (customVariant === constants_1.ButtonVariants.LIGHT)
+        return getBgLight({
+            palette: palette,
+            buttonState: buttonState,
+            customColor: customColor,
+            colorVariant: lightColor,
+        });
+    return 'transparent';
+};
+exports.getBgColor = getBgColor;
+var getButtonHeight = function (_a) {
+    var size = _a.size;
+    if (size === constants_1.ButtonSizes.LARGE)
+        return '40px';
+    return '32px';
+};
+exports.getButtonHeight = getButtonHeight;
+var getButtonPadding = function (_a) {
+    var size = _a.size, theme = _a.theme;
+    if (size === constants_1.ButtonSizes.LARGE)
+        return theme.spacing(2, 4, 2, 4);
+    return theme.spacing(1, 3, 1, 3);
+};
+exports.getButtonPadding = getButtonPadding;
+var getDisabledBgColor = function (_a) {
+    var theme = _a.theme, customVariant = _a.customVariant;
+    if (customVariant === constants_1.ButtonVariants.LINK ||
+        customVariant === constants_1.ButtonVariants.TEXT)
+        return 'transparent';
+    return theme.palette.grey['100'];
+};
+exports.getDisabledBgColor = getDisabledBgColor;
+exports.StyledButtonBase = (0, styles_1.styled)(ButtonUnstyled_1.default, {
+    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"])), exports.getButtonPadding, exports.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 (0, exports.getBgColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.DEFAULT }));
+}, function (props) {
+    return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.DEFAULT }));
+}, function (props) {
+    return (0, exports.getBgColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.HOVER }));
+}, function (props) {
+    return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.HOVER }));
+}, function (props) {
+    return (0, exports.getBgColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.FOCUS }));
+}, function (props) {
+    return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.FOCUS }));
+}, function (props) {
+    return (0, exports.getBgColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.ACTIVE }));
+}, function (props) {
+    return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.ACTIVE }));
+}, ButtonUnstyled_1.buttonUnstyledClasses.disabled, exports.getDisabledBgColor, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey['500'];
+});
+var templateObject_1;

package/cjs/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/cjs/src/ButtonBase/types.js

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

package/cjs/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/cjs/src/CircularProgress/CircularProgress.js

@@ -0,0 +1,33 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgress = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = require("./styled");
+var CircularProgress = function (_a) {
+    var color = _a.color, size = _a.size, props = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledCircularProgress, __assign({}, props, { customSize: size, customColor: color }), void 0));
+};
+exports.CircularProgress = CircularProgress;
+exports.default = exports.CircularProgress;

package/cjs/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/cjs/src/CircularProgress/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgressSizes = exports.CircularProgressColors = void 0;
+var CircularProgressColors;
+(function (CircularProgressColors) {
+    CircularProgressColors["PRIMARY"] = "primary";
+    CircularProgressColors["INVERTED"] = "inverted";
+})(CircularProgressColors = exports.CircularProgressColors || (exports.CircularProgressColors = {}));
+var CircularProgressSizes;
+(function (CircularProgressSizes) {
+    CircularProgressSizes["SMALL"] = "small";
+    CircularProgressSizes["MEDIUM"] = "medium";
+    CircularProgressSizes["NUMBER"] = "number";
+})(CircularProgressSizes = exports.CircularProgressSizes || (exports.CircularProgressSizes = {}));

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

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

package/cjs/src/CircularProgress/index.js

@@ -0,0 +1,14 @@
+"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("./CircularProgress"), exports);
+__exportStar(require("./types"), exports);

package/cjs/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/cjs/src/CircularProgress/styled.js

@@ -0,0 +1,26 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCircularProgress = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("../styles");
+var constants_1 = require("./constants");
+var getColor = function (_a) {
+    var theme = _a.theme, customColor = _a.customColor;
+    if (customColor === constants_1.CircularProgressColors.PRIMARY)
+        return theme.palette.primary.dark;
+    return theme.palette.primary.contrastText;
+};
+var getCircularProgressSize = function (_a) {
+    var customSize = _a.customSize;
+    if (customSize === constants_1.CircularProgressSizes.SMALL)
+        return '16px';
+    return '24px';
+};
+exports.StyledCircularProgress = (0, styles_1.styled)(material_1.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/cjs/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/cjs/src/CircularProgress/types.js

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

package/cjs/src/IconButton/IconButton.d.ts

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

package/cjs/src/IconButton/IconButton.js

@@ -0,0 +1,32 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = require("./styled");
+var IconButton = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (0, jsx_runtime_1.jsx)(styled_1.StyledIconButton, __assign({}, props, { children: children }), void 0);
+};
+exports.IconButton = IconButton;

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

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

package/cjs/src/IconButton/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("./IconButton"), exports);

package/cjs/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/cjs/src/IconButton/styled.js

@@ -0,0 +1,25 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledIconButton = exports.getButtonHeight = void 0;
+var styles_1 = require("../styles");
+var ButtonBase_1 = require("../ButtonBase");
+var getButtonHeight = function (_a) {
+    var size = _a.size;
+    if (size === ButtonBase_1.ButtonSizes.LARGE)
+        return '40px';
+    return '32px';
+};
+exports.getButtonHeight = getButtonHeight;
+exports.StyledIconButton = (0, styles_1.styled)(ButtonBase_1.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"])), exports.getButtonHeight, exports.getButtonHeight, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+});
+var templateObject_1;

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

@@ -0,0 +1,22 @@
+"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 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)(material_1.CssBaseline, {}, void 0), children] }), void 0) }), void 0));
+};
+exports.ThemeProvider = ThemeProvider;

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

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

package/cjs/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/cjs/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/cjs/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/cjs/src/Typography/index.d.ts

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

package/cjs/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/cjs/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/cjs/src/index.js

@@ -0,0 +1,20 @@
+"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("./Typography"), exports);
+__exportStar(require("./theme"), exports);
+__exportStar(require("./styles"), exports);
+__exportStar(require("./ThemeProvider"), exports);

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

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

package/cjs/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/cjs/src/styles/styled/index.d.ts

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