@themindfulpug/core - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

dist/components/Button/index.d.ts

@@ -1,17 +0,16 @@
-import React from 'react';
-import { voidf } from '../../types/common';
-/**
- * TS gets mad if you don't specify exactly what will come into color
- * even though one step back we have already restricted the values
- */
-declare type colorEnum = 'primary' | 'secondary';
+import { RefObject } from 'react';
+import { voidf } from 'src/types/common';
 export interface ButtonProps {
     /**
+     * Reference to the base html element
+     */
+    ref?: RefObject<HTMLButtonElement>;
+    /**
      * Preset styles for the button
      */
-    variant?: 'contained';
+    variant?: 'contained' | 'outlined' | 'text';
     /**
      * Defined a color set for the button background
      */
-    color?: colorEnum;
+    color?: 'default' | 'inherit' | 'primary' | 'secondary';
     /**
@@ -38,2 +37,1 @@ * Determines if the button should be disabled
 export declare const Button: React.FC<ButtonProps>;
-export {};

dist/components/Button/index.js

@@ -24,47 +24,3 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-var styles = {
-    disabled: {
-        color: '#000',
-        background: 'rgpa(18,18,18,.11)',
-        '&:hover': undefined
-    },
-    contained: {
-        color: '#000',
-        background: '#fff',
-        height: '45px',
-        borderRadius: '7px',
-        padding: '0px 15px',
-        boxSizing: 'border-box',
-        outline: 'none',
-        borderWidth: '0',
-        borderColor: 'transparent',
-        '&:hover': {
-            background: '#000'
-        },
-        '&:active': {
-            background: '#000'
-        }
-    }
-};
-var getDisabledStyles = function (theme, color) {
-    var disabledStyles = __assign(__assign({}, styles.disabled), theme.typography.button);
-    var colorPalette = theme.palette[color];
-    disabledStyles.color = theme.palette.text.disabled;
-    /**
-     * Using 2 gradients as solid colors allows us to show the background
-     * color selected but add a disabled alpha over top.
-     * https://stackoverflow.com/questions/28592053/multiple-background-color-layers
-     */
-    disabledStyles.background = "\n    linear-gradient(" + disabledStyles.background + ", " + disabledStyles.background + "),\n    linear-gradient(" + colorPalette.main + ", " + colorPalette.main + ")\n  ";
-    return disabledStyles;
-};
-var getContainedStyles = function (theme, color) {
-    var containedStyles = __assign(__assign({}, styles.contained), theme.typography.button);
-    var colorPalette = theme.palette[color];
-    containedStyles.color = colorPalette.contrastText;
-    containedStyles.background = colorPalette.main;
-    containedStyles['&:hover'].background = "\n    linear-gradient(" + theme.palette.action.hover + ", " + theme.palette.action.hover + "),\n    linear-gradient(" + colorPalette.main + ", " + colorPalette.main + ")\n  ";
-    containedStyles['&:active'].background = "\n    linear-gradient(" + theme.palette.action.active + ", " + theme.palette.action.active + "),\n    linear-gradient(" + colorPalette.main + ", " + colorPalette.main + ")\n  ";
-    return containedStyles;
-};
+import MuiButton from '@material-ui/core/Button';
 /**
@@ -74,12 +30,14 @@ * A button component that follows The Mindful Pug style guides
 export var Button = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'contained' : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, children = _a.children, style = _a.style, props = __rest(_a, ["variant", "color", "disabled", "fullWidth", "children", "style"]);
-    var setStyles = function (theme) {
-        var variantStyle = variant === 'contained' ? getContainedStyles(theme, color) : undefined;
-        var button = disabled
-            ? __assign(__assign({}, variantStyle), getDisabledStyles(theme, color)) : variantStyle;
-        fullWidth && (button.width = '100%');
-        variantStyle.cursor = 'pointer';
-        return button;
-    };
-    return (_jsx("button", __assign({ css: setStyles }, props, { style: style }, { children: children }), void 0));
+    // const setStyles = (theme: Theme): any => {
+    //   const variantStyle =
+    //     variant === 'contained' ? getContainedStyles(theme, color) : undefined
+    //   const button = disabled
+    //     ? { ...variantStyle, ...getDisabledStyles(theme, color) }
+    //     : variantStyle
+    //   fullWidth && (button.width = '100%')
+    var _b = _a.variant, variant = _b === void 0 ? 'contained' : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, onClick = _a.onClick, children = _a.children, style = _a.style, props = __rest(_a, ["variant", "color", "disabled", "fullWidth", "onClick", "children", "style"]);
+    //   variantStyle.cursor = 'pointer'
+    //   return button
+    // }
+    return (_jsx(MuiButton, __assign({ css: { height: '45px' }, variant: variant, color: color, disabled: disabled, fullWidth: fullWidth, onClick: onClick }, props, { style: style, disableElevation: true }, { children: children }), void 0));
 };

dist/components/Header/index.js

@@ -23,8 +23,10 @@ var __assign = (this && this.__assign) || function () {
 };
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { useState } from 'react';
-import { CDN_URL } from '../../util/constants';
-import { Image } from '../Image';
-import { Link } from '../Link';
-import { theme } from '../ThemeProvider';
+import { CDN_URL } from 'src/utils/constants';
+import { Icon } from 'src/components/Icon';
+import { Image } from 'src/components/Image';
+import { Link } from 'src/components/Link';
+import { theme } from 'src/components/ThemeProvider';
+import { Menu } from 'src/components/Menu';
 var styles = {
@@ -74,2 +76,11 @@ default: {
         borderTop: "2px solid " + theme.palette.primary.main
+    },
+    mobileButton: {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center'
+    },
+    iconButton: {
+        background: 'transparent'
     }
@@ -88,7 +99,7 @@ };
     return (_jsxs("div", __assign({ css: setStyles }, props, { style: style }, { children: [_jsx("div", { children: typeof logo === 'string' ? (_jsx(Image, { src: logo, style: styles.logo }, void 0)) : (logo) }, void 0),
-            _jsx("div", __assign({ css: styles.links }, { children: links.map(function (l, i) { return (_jsxs("div", __assign({ css: styles.link, onMouseEnter: function () { return setHovered(l.text); }, onMouseLeave: function () { return setHovered(''); } }, { children: [_jsx(Link, { to: l.to, text: l.text, style: hovered === l.text
-                                ? styles.linkOverrideHover
-                                : styles.linkOverride }, void 0),
-                        hovered === l.text && _jsx("div", { style: styles.underline }, void 0)] }), i)); }) }), void 0),
-            _jsx("div", __assign({ css: styles.action }, { children: Array.isArray(action) ? (action.map(function (a, i) { return (_jsx("div", __assign({ css: styles.button }, { children: a }), i)); })) : (_jsx("div", __assign({ css: styles.button }, { children: action }), void 0)) }), void 0)] }), void 0));
+            window.innerWidth > theme.breakpoints.values.md ? (_jsxs(_Fragment, { children: [_jsx("div", __assign({ css: styles.links }, { children: links.map(function (l, i) { return (_jsxs("div", __assign({ css: styles.link, onMouseEnter: function () { return setHovered(l.text); }, onMouseLeave: function () { return setHovered(''); } }, { children: [_jsx(Link, __assign({ to: l.to, underline: "none", style: hovered === l.text
+                                        ? styles.linkOverrideHover
+                                        : styles.linkOverride }, { children: l.text }), void 0),
+                                hovered === l.text && _jsx("div", { style: styles.underline }, void 0)] }), i)); }) }), void 0),
+                    _jsx("div", __assign({ css: styles.action }, { children: Array.isArray(action) ? (action.map(function (a, i) { return (_jsx("div", __assign({ css: styles.button }, { children: a }), i)); })) : (_jsx("div", __assign({ css: styles.button }, { children: action }), void 0)) }), void 0)] }, void 0)) : (_jsx("div", __assign({ css: styles.mobileButton }, { children: _jsx(Menu, { buttonChild: _jsx(Icon, { name: "hamburger-button" }, void 0), menuItems: links, style: styles.iconButton }, void 0) }), void 0))] }), void 0));
 };

dist/components/Icon/index.d.ts

 import React from 'react';
-import { IconOptions } from '../../types/common';
+import { IconOptions } from 'src/types/common';
 export interface IconProps {
@@ -4,0 +4,0 @@ /**

dist/components/Icon/index.js

@@ -24,3 +24,3 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { CDN_URL } from '../../util/constants';
+import { CDN_URL } from 'src/utils/constants';
 /**
@@ -27,0 +27,0 @@ * Variant sizes to be used when determining the icon size

dist/components/Image/index.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 export interface ImageProps {
@@ -3,0 +3,0 @@ /**

dist/components/index.d.ts

@@ -9,1 +9,4 @@ export * from './ThemeProvider';
 export * from './Link';
+export * from './Menu';
+export * from './MenuList';
+export * from './MenuItem';

dist/components/index.js

@@ -9,1 +9,4 @@ export * from './ThemeProvider';
 export * from './Link';
+export * from './Menu';
+export * from './MenuList';
+export * from './MenuItem';

dist/components/Input/index.d.ts

@@ -1,3 +0,3 @@
-import React from 'react';
-import { voidf } from '../../types/common';
+/// <reference types="react" />
+import { voidf } from 'src/types/common';
 export interface InputProps {
@@ -4,0 +4,0 @@ /**

dist/components/Input/index.js

@@ -24,23 +24,3 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-var styles = {
-    default: {
-        width: '200px',
-        height: '1.1876em',
-        padding: '25px 20px',
-        margin: 0,
-        boxSizing: 'border-box',
-        borderWidth: '2px',
-        borderColor: '#aaa',
-        borderStyle: 'solid',
-        borderRadius: '5px',
-        color: '#000',
-        '&:focus': {
-            outline: 'none',
-            borderColor: '#000'
-        }
-    }
-};
-var getDefaultStyles = function (theme) {
-    return __assign(__assign({}, theme), styles.default);
-};
+import MuiInput from '@material-ui/core/TextField';
 /**
@@ -51,12 +31,3 @@ * A tile component that links to a tool website
     var value = _a.value, _b = _a.autoComplete, autoComplete = _b === void 0 ? true : _b, _c = _a.autoFocus, autoFocus = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? true : _e, onChange = _a.onChange, placeholder = _a.placeholder, _f = _a.required, required = _f === void 0 ? false : _f, _g = _a.type, type = _g === void 0 ? 'text' : _g, style = _a.style, props = __rest(_a, ["value", "autoComplete", "autoFocus", "disabled", "fullWidth", "onChange", "placeholder", "required", "type", "style"]);
-    var setStyles = function (theme) {
-        var input = __assign(__assign({}, getDefaultStyles(theme)), theme.typography.button);
-        fullWidth && (input.width = '100%');
-        input.borderColor = theme.palette.text.hint;
-        input['&:focus'].borderColor = theme.palette.text.secondary;
-        input.color = theme.palette.text.primary;
-        disabled && (input.borderColor = theme.palette.text.disabled);
-        return input;
-    };
-    return (_jsx("input", __assign({ css: setStyles, value: value, autoComplete: autoComplete ? 'on' : 'off', autoFocus: autoFocus, disabled: disabled, onChange: onChange, placeholder: placeholder, required: required, type: type }, props, { style: style }), void 0));
+    return (_jsx(MuiInput, __assign({ variant: "outlined", value: value, autoComplete: autoComplete ? 'on' : 'off', autoFocus: autoFocus, disabled: disabled, fullWidth: fullWidth, onChange: onChange, placeholder: placeholder, required: required, type: type }, props, { style: style }), void 0));
 };

dist/components/Link/index.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 export interface LinkProps {
@@ -8,9 +8,9 @@ /**
     /**
-     * The destination of the link
+     * The color of the link text
      */
-    text?: string;
+    color?: 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
     /**
-     * The color of the link text
+     * Options for link underline
      */
-    color?: 'primary' | 'secondary' | 'text';
+    underline?: 'none' | 'hover' | 'always';
     /**
@@ -17,0 +17,0 @@ * Override styles

dist/components/Link/index.js

@@ -24,19 +24,3 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { hexToRGBA, RGBAToHSLA } from '../../util/color-conversion';
-var styles = {
-    default: {
-        color: '#000',
-        textDecoration: 'none',
-        fontWeight: 600,
-        '&:link': {
-            color: '#000'
-        },
-        '&:hover': {
-            color: '#000'
-        },
-        '&:active': {
-            color: '#000'
-        }
-    }
-};
+import MuiLink from '@material-ui/core/Link';
 /**
@@ -46,19 +30,4 @@ * A header component that can be used for web pages
 export var Link = function (_a) {
-    var to = _a.to, text = _a.text, _b = _a.color, color = _b === void 0 ? 'primary' : _b, style = _a.style, props = __rest(_a, ["to", "text", "color", "style"]);
-    var setStyles = function (theme) {
-        var link = __assign(__assign({}, theme.typography.button), styles.default);
-        var colorPalette = {
-            primary: theme.palette.primary.main,
-            secondary: theme.palette.secondary.main,
-            text: theme.palette.text.primary
-        };
-        var hoverColor = RGBAToHSLA(hexToRGBA(colorPalette[color]).rgba);
-        var hoverColorStr = "hsla(" + hoverColor.h + ", " + hoverColor.s + "%, " + (hoverColor.l - 10) + "%, " + hoverColor.a + ")";
-        link.color = colorPalette[color];
-        link['&:link'].color = colorPalette[color];
-        link['&:hover'].color = hoverColorStr;
-        link['&:active'].color = hoverColorStr;
-        return link;
-    };
-    return (_jsx("a", __assign({ href: to, css: setStyles }, props, { style: style }, { children: text !== null && text !== void 0 ? text : to }), void 0));
+    var to = _a.to, _b = _a.color, color = _b === void 0 ? 'primary' : _b, _c = _a.underline, underline = _c === void 0 ? 'hover' : _c, children = _a.children, style = _a.style, props = __rest(_a, ["to", "color", "underline", "children", "style"]);
+    return (_jsx(MuiLink, __assign({ href: to, color: color, underline: underline }, props, { style: style }, { children: children }), void 0));
 };

dist/components/ThemeProvider/index.d.ts

@@ -1,10 +0,11 @@
-import { ThemeProvider, Theme } from '@emotion/react';
+/// <reference types="react" />
 /**
  * The default theme settings
  */
-declare const defaultTheme: Theme;
+declare const defaultTheme: import("@material-ui/core").Theme;
 /**
- * We re-export emotion's theme provider to expose it in the package
- * Additionally, we export our custom theme as the default
+ * A theme provider that wraps material-ui's theme and emotions theme provider
+ * so that we can use material-ui as a base and modify with emotion.
  */
+declare const ThemeProvider: React.FC;
 export { ThemeProvider, defaultTheme as theme };

dist/components/ThemeProvider/index.js

@@ -1,2 +0,16 @@
-import { ThemeProvider } from '@emotion/react';
+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 "@emotion/react/jsx-runtime";
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { createMuiTheme, ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
+import { CssBaseline } from '@material-ui/core';
 // TODO: add dark theme
@@ -6,16 +20,9 @@ /**
  */
-var defaultTheme = {
-    breakpoints: {
-        xs: 0,
-        sm: 600,
-        md: 960,
-        lg: 1280,
-        xl: 1920
-    },
+var defaultTheme = createMuiTheme({
     palette: {
         type: 'light',
         common: {
-            white: '#fff',
-            accentLight: '#F1F9FD',
-            accentDark: '#2F4858'
+            white: '#fff'
+            // accentLight: '#F1F9FD',
+            // accentDark: '#2F4858'
         },
@@ -63,48 +70,4 @@ primary: {
             hint: 'rgba(7,9,47,0.38)'
-        },
-        divider: 'rgba(0, 0, 0, 0.12)',
-        background: {
-            default: '#fff'
-        },
-        action: {
-            active: 'rgba(0, 0, 0, 0.54)',
-            hover: 'rgba(0, 0, 0, 0.10)',
-            hoverOpacity: 0.1,
-            selected: 'rgba(0, 0, 0, 0.08)',
-            selectedOpacity: 0.08,
-            disabled: 'rgba(0, 0, 0, 0.26)',
-            disabledBackground: 'rgba(0, 0, 0, 0.12)',
-            disabledOpacity: 0.38,
-            focus: 'rgba(0, 0, 0, 0.12)',
-            focusOpacity: 0.12,
-            activatedOpacity: 0.12
         }
     },
-    shadows: [
-        'none',
-        '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
-        '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)',
-        '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
-        '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)',
-        '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)',
-        '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
-        '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)',
-        '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
-        '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)',
-        '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)',
-        '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)',
-        '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)',
-        '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)',
-        '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)',
-        '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)',
-        '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)',
-        '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)',
-        '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)',
-        '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)',
-        '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)',
-        '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)',
-        '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)',
-        '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)',
-        '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)'
-    ],
     typography: {
@@ -118,62 +81,15 @@ htmlFontSize: 16,
         fontWeightBold: 700,
-        title: {
-            fontFamily: '"Poppins", "Roboto", "Helvetica", "Arial", sans-serif',
-            fontWeight: 700,
-            fontSize: '4rem',
-            lineHeight: 1.2,
-            letterSpacing: '-0.00833em'
-        },
-        title2: {
-            fontFamily: '"Poppins", "Roboto", "Helvetica", "Arial", sans-serif',
-            fontWeight: 600,
-            fontSize: '2rem',
-            lineHeight: 1.235,
-            letterSpacing: '0.00735em'
-        },
-        title3: {
-            fontFamily: '"Poppins", "Roboto", "Helvetica", "Arial", sans-serif',
-            fontWeight: 700,
-            fontSize: '1.5rem',
-            lineHeight: 1.334,
-            letterSpacing: '0em'
-        },
-        body: {
-            fontFamily: '"Poppins", "Roboto", "Helvetica", "Arial", sans-serif',
-            fontWeight: 400,
-            fontSize: '1rem',
-            lineHeight: 1.5,
-            letterSpacing: '0.00938em'
-        },
-        body2: {
-            fontFamily: '"Poppins", "Roboto", "Helvetica", "Arial", sans-serif',
-            fontWeight: 500,
-            fontSize: '1.125rem',
-            lineHeight: 1.6,
-            letterSpacing: '0.0075em'
-        },
         button: {
-            fontFamily: '"Poppins", "Roboto", "Helvetica", "Arial", sans-serif',
-            fontWeight: 500,
-            fontSize: '.85rem',
-            lineHeight: 1.75,
-            letterSpacing: '0.02857em'
+            textTransform: 'capitalize'
         }
-    },
-    shape: {
-        borderRadius: 4
-    },
-    zIndex: {
-        mobileStepper: 1000,
-        speedDial: 1050,
-        appBar: 1100,
-        drawer: 1200,
-        modal: 1300,
-        snackbar: 1400,
-        tooltip: 1500
     }
-};
+});
 /**
- * We re-export emotion's theme provider to expose it in the package
- * Additionally, we export our custom theme as the default
+ * A theme provider that wraps material-ui's theme and emotions theme provider
+ * so that we can use material-ui as a base and modify with emotion.
  */
+var ThemeProvider = function (_a) {
+    var children = _a.children;
+    return (_jsx(MuiThemeProvider, __assign({ theme: defaultTheme }, { children: _jsxs(EmotionThemeProvider, __assign({ theme: defaultTheme }, { children: [_jsx(CssBaseline, {}, void 0), children] }), void 0) }), void 0));
+};
 export { ThemeProvider, defaultTheme as theme };

dist/components/Typography/index.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 export interface TypographyProps {
@@ -6,12 +6,16 @@ /**
      */
-    variant?: 'title' | 'title2' | 'title3' | 'body' | 'body2' | 'button';
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline' | 'srOnly' | 'inherit';
     /**
      * Define a text size for the text in px
      */
-    size?: number;
+    align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
     /**
      * Defined a color set for the text
      */
-    color?: 'primary' | 'secondary' | 'disabled' | 'hint';
+    color?: 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
     /**
+     * The component used for the root node.
+     */
+    component?: React.ElementType;
+    /**
      * Override styles
@@ -18,0 +22,0 @@ */

dist/components/Typography/index.js

@@ -24,2 +24,3 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import MuiTypography from '@material-ui/core/Typography';
 /**
@@ -29,10 +30,4 @@ * A typography component that defines text styles
 export var Typography = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'body' : _b, size = _a.size, _c = _a.color, color = _c === void 0 ? 'primary' : _c, children = _a.children, style = _a.style, props = __rest(_a, ["variant", "size", "color", "children", "style"]);
-    var setStyles = function (theme) {
-        var textColor = typeof color === 'string' ? theme.palette.text[color] : color;
-        var typography = __assign(__assign({}, theme.typography[variant]), { color: textColor });
-        typography.fontSize = size ? size + "px" : typography.fontSize;
-        return typography;
-    };
-    return (_jsx("span", __assign({ css: setStyles }, props, { style: style }, { children: children }), void 0));
+    var _b = _a.variant, variant = _b === void 0 ? 'body1' : _b, _c = _a.align, align = _c === void 0 ? 'inherit' : _c, _d = _a.color, color = _d === void 0 ? 'initial' : _d, _e = _a.component, component = _e === void 0 ? 'symbol' : _e, children = _a.children, style = _a.style, props = __rest(_a, ["variant", "align", "color", "component", "children", "style"]);
+    return (_jsx(MuiTypography, __assign({ variant: variant, align: align, color: color, component: component }, props, { style: style }, { children: children }), void 0));
 };

dist/types/common.d.ts

@@ -5,13 +5,6 @@ import '@emotion/react';
  */
-export declare type voidf = () => void;
+export declare type voidf = (...args: any) => void;
 /**
  * The sub types to our theme object
  */
-declare type breakpoints = {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-};
 export declare type color = {
@@ -23,83 +16,2 @@ light: string;
 };
-declare type actionProps = {
-    active: string;
-    hover: string;
-    hoverOpacity: number;
-    selected: string;
-    selectedOpacity: number;
-    disabled: string;
-    disabledBackground: string;
-    disabledOpacity: number;
-    focus: string;
-    focusOpacity: number;
-    activatedOpacity: number;
-};
-declare type palette = {
-    type: 'light' | 'dark';
-    common: Record<string, string>;
-    primary: color;
-    secondary: color;
-    error: color;
-    warning: color;
-    info: color;
-    success: color;
-    text: {
-        primary: string;
-        secondary: string;
-        disabled: string;
-        hint: string;
-    };
-    divider: string;
-    background: Record<string, string>;
-    action: actionProps;
-};
-declare type shadows = string[];
-declare type textOptions = {
-    fontFamily: string;
-    fontWeight: number;
-    fontSize: string;
-    lineHeight: number;
-    letterSpacing: string;
-};
-declare type typography = {
-    htmlFontSize: number;
-    fontFamily: string;
-    fontSize: number;
-    fontWeightLight: number;
-    fontWeightRegular: number;
-    fontWeightMedium: number;
-    fontWeightBold: number;
-    title: textOptions;
-    title2: textOptions;
-    title3: textOptions;
-    body: textOptions;
-    body2: textOptions;
-    button: textOptions;
-};
-declare type shape = {
-    borderRadius: number;
-};
-declare type zIndex = {
-    mobileStepper: number;
-    speedDial: number;
-    appBar: number;
-    drawer: number;
-    modal: number;
-    snackbar: number;
-    tooltip: number;
-};
-/**
- * The structure of our style theme object
- */
-declare module '@emotion/react' {
-    interface Theme {
-        breakpoints: breakpoints;
-        palette: palette;
-        shadows: shadows;
-        typography: typography;
-        shape: shape;
-        zIndex: zIndex;
-    }
-}
-export declare type IconOptions = 'community' | 'openness' | 'determination' | 'hope' | 'empathy';
-export {};
+export declare type IconOptions = 'community' | 'openness' | 'determination' | 'hope' | 'empathy' | 'hamburger-button';

package.json

 {
   "name": "@themindfulpug/core",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "author": "joshgreenwell",
@@ -5,0 +5,0 @@ "license": "SEE LICENSE IN LICENSE.txt",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

35

increased by12.9%

Worsened metrics

Total package byte prevSize

39704

decreased by-16.45%

Lines of code

953

decreased by-19.71%

No dependency changes