@ndlib/component-library 0.0.10 → 0.0.14

package/dist/theme/index.d.ts

@@ -1,8 +1,76 @@
 import { PropsWithChildren } from 'react';
-import { Theme, ThemeUICSSObject } from 'theme-ui';
+import { ThemeUICSSObject } from 'theme-ui';
 import { FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from './typography';
 import { COLOR } from './colors';
-export declare const theme: Theme;
+import { BOX_SHADOW } from './custom';
+export declare const SPACING: string[];
+export declare const theme: {
+    colors: {
+        text: string;
+        background: string;
+        transparent: string;
+        primary: string;
+        primaryHighlight: string;
+        secondary: string;
+        secondaryHighlight: string;
+        textOnPrimary: string;
+        textOnSecondary: string;
+        lightGray: string;
+        faintGray: string;
+        ndBlue: string;
+        ndGold: string;
+        ndSkyBlue: string;
+        ndSkyBlueDark: string;
+        ndMetallicGold: string;
+        ndProvostBlue: string;
+        ndSecondary1: string;
+        ndSecondary2: string;
+        ndSecondary3: string;
+        ndSecondary4: string;
+        ndSecondary5: string;
+        ndSecondary6: string;
+        ndTertiary1: string;
+        ndTertiary2: string;
+        ndTertiary3: string;
+        ndTertiary4: string;
+        ndTertiary5: string;
+        ndTertiary6: string;
+        alertInformationalBg: string;
+        alertInformationalBorder: string;
+        alertInformationalYellowBg: string;
+        alertInformationalYellowBorder: string;
+        alertWarningBg: string;
+        alertWarningBorder: string;
+    };
+    space: string[];
+    boxShadow: typeof BOX_SHADOW;
+    fonts: {
+        branded: string;
+        branded2: string;
+        serif: string;
+        normal: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        ms: string;
+        md: string;
+        ml: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    lineHeights: {
+        normal: number;
+        condensed: number;
+    };
+    fontWeights: {
+        normal: number;
+        heading: number;
+        bold: number;
+    };
+};
+export type Theme = typeof theme;
 export type StylesProp = ThemeUICSSObject & {
     color?: COLOR;
     bg?: COLOR;
@@ -11,9 +79,76 @@ export type StylesProp = ThemeUICSSObject & {
     font?: FONT;
     fontWeight?: FONT_WEIGHT;
     lineHeight?: LINE_HEIGHT;
+    boxShadow?: BOX_SHADOW;
 };
-export type StyledElementProps<E extends Element, CustomProps = object> = {
+export type StyledElementProps<E extends Element, CustomProps = object, Children = React.ReactNode> = {
     sx?: StylesProp;
-    children?: React.ReactNode;
+    children?: Children;
 } & React.HTMLAttributes<E> & CustomProps;
+export declare const useTheme: () => {
+    colors: {
+        text: string;
+        background: string;
+        transparent: string;
+        primary: string;
+        primaryHighlight: string;
+        secondary: string;
+        secondaryHighlight: string;
+        textOnPrimary: string;
+        textOnSecondary: string;
+        lightGray: string;
+        faintGray: string;
+        ndBlue: string;
+        ndGold: string;
+        ndSkyBlue: string;
+        ndSkyBlueDark: string;
+        ndMetallicGold: string;
+        ndProvostBlue: string;
+        ndSecondary1: string;
+        ndSecondary2: string;
+        ndSecondary3: string;
+        ndSecondary4: string;
+        ndSecondary5: string;
+        ndSecondary6: string;
+        ndTertiary1: string;
+        ndTertiary2: string;
+        ndTertiary3: string;
+        ndTertiary4: string;
+        ndTertiary5: string;
+        ndTertiary6: string;
+        alertInformationalBg: string;
+        alertInformationalBorder: string;
+        alertInformationalYellowBg: string;
+        alertInformationalYellowBorder: string;
+        alertWarningBg: string;
+        alertWarningBorder: string;
+    };
+    space: string[];
+    boxShadow: typeof BOX_SHADOW;
+    fonts: {
+        branded: string;
+        branded2: string;
+        serif: string;
+        normal: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        ms: string;
+        md: string;
+        ml: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    lineHeights: {
+        normal: number;
+        condensed: number;
+    };
+    fontWeights: {
+        normal: number;
+        heading: number;
+        bold: number;
+    };
+};
 export declare const ThemeProvider: React.FC<PropsWithChildren>;

package/dist/theme/index.js

@@ -1,18 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ThemeProvider as ThemeUiProvider, } from 'theme-ui';
+import { ThemeProvider as ThemeUiProvider, useThemeUI, } from 'theme-ui';
 import { fontStyles, } from './typography';
 import { colors } from './colors';
-export const theme = Object.assign(Object.assign({}, fontStyles), { colors, space: [
-        '0rem',
-        '0.25rem',
-        '0.5rem',
-        '0.75rem',
-        '1rem',
-        '1.5rem',
-        '2rem',
-        '3rem',
-        '4rem',
-    ] });
+import { BOX_SHADOW } from './custom';
+export const SPACING = [
+    '0rem',
+    '0.25rem',
+    '0.5rem',
+    '0.75rem',
+    '1rem',
+    '1.5rem',
+    '2rem',
+    '3rem',
+    '4rem',
+];
+export const theme = Object.assign(Object.assign({}, fontStyles), { colors, space: SPACING, boxShadow: BOX_SHADOW });
+export const useTheme = () => {
+    const { theme } = useThemeUI();
+    return theme;
+};
 export const ThemeProvider = ({ children }) => {
     return _jsx(ThemeUiProvider, Object.assign({ theme: theme }, { children: children }));
 };

package/dist/theme/typography.d.ts

@@ -1,40 +1,81 @@
 /** @jsxImportSource theme-ui */
-import { Theme } from 'theme-ui';
 export declare enum FONT {
     BRANDED = "branded",
     BRANDED2 = "branded2",
+    SERIF = "serif",
     NORMAL = "normal"
 }
 export declare enum FONT_SIZE {
     XS = "xs",
     SM = "sm",
+    MS = "ms",
     MD = "md",
+    ML = "ml",
     LG = "lg",
     XL = "xl",
     XXL = "xxl"
 }
+export declare const getIconSize: (fontSize: FONT_SIZE) => FONT_SIZE;
 export declare enum FONT_WEIGHT {
     NORMAL = "normal",
+    HEADING = "heading",
     BOLD = "bold"
 }
 export declare enum LINE_HEIGHT {
     NORMAL = "normal",
-    CONDENSED = "condensed",
-    EXTRA = "extra"
+    CONDENSED = "condensed"
 }
-export declare const fontStyles: Partial<Theme>;
+export declare const fontSizeMap: {
+    xs: string;
+    sm: string;
+    ms: string;
+    md: string;
+    ml: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+};
+export declare const fontStyles: {
+    fonts: {
+        branded: string;
+        branded2: string;
+        serif: string;
+        normal: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        ms: string;
+        md: string;
+        ml: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    lineHeights: {
+        normal: number;
+        condensed: number;
+    };
+    fontWeights: {
+        normal: number;
+        heading: number;
+        bold: number;
+    };
+};
 export declare enum TYPOGRAPHY_TYPE {
     PARAGRAPH_SMALL = "paragraphSmall",
     PARAGRAPH_MEDIUM = "paragraphMedium",
     PARAGRAPH_LARGE = "paragraphLarge",
-    HEADING_XSMALL = "headingXSmall",
     HEADING_SMALL = "headingSmall",
     HEADING_MEDIUM = "headingMedium",
     HEADING_LARGE = "headingLarge",
     HEADING_XLARGE = "headingXLarge",
     CONTROL_SMALL = "controlSmall",
     CONTROL_MEDIUM = "controlMedium",
-    CONTROL_LARGE = "controlLarge"
+    CONTROL_LARGE = "controlLarge",
+    HEADLINE_SMALL = "headlineSmall",
+    HEADLINE_MEDIUM = "headlineMedium",
+    HEADLINE_LARGE = "headlineLarge"
 }
 export declare const typographyStyleMap: {
     [key in TYPOGRAPHY_TYPE]: {

package/dist/theme/typography.js

@@ -1,54 +1,70 @@
+/** @jsxImportSource theme-ui */
 export var FONT;
 (function (FONT) {
     FONT["BRANDED"] = "branded";
     FONT["BRANDED2"] = "branded2";
+    FONT["SERIF"] = "serif";
     FONT["NORMAL"] = "normal";
 })(FONT || (FONT = {}));
 export var FONT_SIZE;
 (function (FONT_SIZE) {
     FONT_SIZE["XS"] = "xs";
     FONT_SIZE["SM"] = "sm";
+    FONT_SIZE["MS"] = "ms";
     FONT_SIZE["MD"] = "md";
+    FONT_SIZE["ML"] = "ml";
     FONT_SIZE["LG"] = "lg";
     FONT_SIZE["XL"] = "xl";
     FONT_SIZE["XXL"] = "xxl";
 })(FONT_SIZE || (FONT_SIZE = {}));
+export const getIconSize = (fontSize) => {
+    return {
+        [FONT_SIZE.XS]: FONT_SIZE.MD,
+        [FONT_SIZE.SM]: FONT_SIZE.LG,
+        [FONT_SIZE.MS]: FONT_SIZE.XL,
+        [FONT_SIZE.MD]: FONT_SIZE.XL,
+        [FONT_SIZE.ML]: FONT_SIZE.XL,
+        [FONT_SIZE.LG]: FONT_SIZE.XXL,
+        [FONT_SIZE.XL]: FONT_SIZE.XXL,
+        [FONT_SIZE.XXL]: FONT_SIZE.XXL,
+    }[fontSize];
+};
 export var FONT_WEIGHT;
 (function (FONT_WEIGHT) {
     FONT_WEIGHT["NORMAL"] = "normal";
+    FONT_WEIGHT["HEADING"] = "heading";
     FONT_WEIGHT["BOLD"] = "bold";
 })(FONT_WEIGHT || (FONT_WEIGHT = {}));
-// export enum LETTER_SPACING {
-//   NORMAL='normal',
-//   EXTRA='extra',
-// }
 export var LINE_HEIGHT;
 (function (LINE_HEIGHT) {
     LINE_HEIGHT["NORMAL"] = "normal";
     LINE_HEIGHT["CONDENSED"] = "condensed";
-    LINE_HEIGHT["EXTRA"] = "extra";
 })(LINE_HEIGHT || (LINE_HEIGHT = {}));
+export const fontSizeMap = {
+    [FONT_SIZE.XS]: '0.75rem',
+    [FONT_SIZE.SM]: '0.875rem',
+    [FONT_SIZE.MS]: '1rem',
+    [FONT_SIZE.MD]: '1.25rem',
+    [FONT_SIZE.ML]: '1.5rem',
+    [FONT_SIZE.LG]: '1.75rem',
+    [FONT_SIZE.XL]: '2.0rem',
+    [FONT_SIZE.XXL]: '2.25rem',
+};
 export const fontStyles = {
     fonts: {
         [FONT.BRANDED]: 'GPMed, sans-serif',
         [FONT.BRANDED2]: 'GPCMed, sans-serif',
-        [FONT.NORMAL]: "Inter, Roboto, 'Helvetica Neue', sans-serif",
-    },
-    fontSizes: {
-        [FONT_SIZE.XS]: '0.75rem',
-        [FONT_SIZE.SM]: '0.875rem',
-        [FONT_SIZE.MD]: '1rem',
-        [FONT_SIZE.LG]: '1.25rem',
-        [FONT_SIZE.XL]: '2rem',
-        [FONT_SIZE.XXL]: '3rem',
+        [FONT.SERIF]: '"Sumana", Georgia, "Times New Roman", Times, serif;',
+        [FONT.NORMAL]: '"Libre Franklin", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;',
     },
+    fontSizes: fontSizeMap,
     lineHeights: {
-        [LINE_HEIGHT.NORMAL]: 1.2,
-        [LINE_HEIGHT.CONDENSED]: 1.1,
-        [LINE_HEIGHT.EXTRA]: 1.3,
+        [LINE_HEIGHT.NORMAL]: 1.625,
+        [LINE_HEIGHT.CONDENSED]: 1.3,
     },
     fontWeights: {
         [FONT_WEIGHT.NORMAL]: 400,
+        [FONT_WEIGHT.HEADING]: 600,
         [FONT_WEIGHT.BOLD]: 700,
     },
     // letterSpacings: {
@@ -61,7 +77,6 @@ export var TYPOGRAPHY_TYPE;
     TYPOGRAPHY_TYPE["PARAGRAPH_SMALL"] = "paragraphSmall";
     TYPOGRAPHY_TYPE["PARAGRAPH_MEDIUM"] = "paragraphMedium";
     TYPOGRAPHY_TYPE["PARAGRAPH_LARGE"] = "paragraphLarge";
-    TYPOGRAPHY_TYPE["HEADING_XSMALL"] = "headingXSmall";
     TYPOGRAPHY_TYPE["HEADING_SMALL"] = "headingSmall";
     TYPOGRAPHY_TYPE["HEADING_MEDIUM"] = "headingMedium";
     TYPOGRAPHY_TYPE["HEADING_LARGE"] = "headingLarge";
@@ -69,47 +84,52 @@ export var TYPOGRAPHY_TYPE;
     TYPOGRAPHY_TYPE["CONTROL_SMALL"] = "controlSmall";
     TYPOGRAPHY_TYPE["CONTROL_MEDIUM"] = "controlMedium";
     TYPOGRAPHY_TYPE["CONTROL_LARGE"] = "controlLarge";
+    TYPOGRAPHY_TYPE["HEADLINE_SMALL"] = "headlineSmall";
+    TYPOGRAPHY_TYPE["HEADLINE_MEDIUM"] = "headlineMedium";
+    TYPOGRAPHY_TYPE["HEADLINE_LARGE"] = "headlineLarge";
 })(TYPOGRAPHY_TYPE || (TYPOGRAPHY_TYPE = {}));
 export const typographyStyleMap = {
     [TYPOGRAPHY_TYPE.PARAGRAPH_SMALL]: {
         fontFamily: FONT.NORMAL,
         fontSize: FONT_SIZE.SM,
-        lineHeight: LINE_HEIGHT.EXTRA,
+        lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.NORMAL,
     },
     [TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM]: {
         fontFamily: FONT.NORMAL,
-        fontSize: FONT_SIZE.MD,
+        fontSize: FONT_SIZE.MS,
         lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.NORMAL,
     },
     [TYPOGRAPHY_TYPE.PARAGRAPH_LARGE]: {
         fontFamily: FONT.NORMAL,
-        fontSize: FONT_SIZE.LG,
-        lineHeight: LINE_HEIGHT.NORMAL,
-    },
-    [TYPOGRAPHY_TYPE.HEADING_XSMALL]: {
-        fontFamily: FONT.BRANDED2,
-        fontSize: FONT_SIZE.SM,
+        fontSize: FONT_SIZE.MD,
         lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.NORMAL,
     },
     [TYPOGRAPHY_TYPE.HEADING_SMALL]: {
-        fontFamily: FONT.BRANDED2,
+        fontFamily: FONT.NORMAL,
         fontSize: FONT_SIZE.MD,
-        lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.HEADING,
+        lineHeight: LINE_HEIGHT.CONDENSED,
     },
     [TYPOGRAPHY_TYPE.HEADING_MEDIUM]: {
-        fontFamily: FONT.BRANDED,
+        fontFamily: FONT.BRANDED2,
         fontSize: FONT_SIZE.LG,
-        lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.HEADING,
+        lineHeight: LINE_HEIGHT.CONDENSED,
     },
     [TYPOGRAPHY_TYPE.HEADING_LARGE]: {
-        fontFamily: FONT.BRANDED,
+        fontFamily: FONT.BRANDED2,
         fontSize: FONT_SIZE.XL,
-        lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.HEADING,
+        lineHeight: LINE_HEIGHT.CONDENSED,
     },
     [TYPOGRAPHY_TYPE.HEADING_XLARGE]: {
-        fontFamily: FONT.BRANDED,
+        fontFamily: FONT.BRANDED2,
         fontSize: FONT_SIZE.XXL,
-        lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.HEADING,
+        lineHeight: LINE_HEIGHT.CONDENSED,
     },
     [TYPOGRAPHY_TYPE.CONTROL_SMALL]: {
         fontFamily: FONT.NORMAL,
@@ -119,16 +139,34 @@ export const typographyStyleMap = {
     },
     [TYPOGRAPHY_TYPE.CONTROL_MEDIUM]: {
         fontFamily: FONT.NORMAL,
-        fontSize: FONT_SIZE.MD,
+        fontSize: FONT_SIZE.MS,
         fontWeight: FONT_WEIGHT.BOLD,
         lineHeight: LINE_HEIGHT.NORMAL,
     },
     [TYPOGRAPHY_TYPE.CONTROL_LARGE]: {
         fontFamily: FONT.NORMAL,
-        fontSize: FONT_SIZE.LG,
+        fontSize: FONT_SIZE.ML,
         fontWeight: FONT_WEIGHT.BOLD,
         lineHeight: LINE_HEIGHT.NORMAL,
     },
+    [TYPOGRAPHY_TYPE.HEADLINE_SMALL]: {
+        fontFamily: FONT.SERIF,
+        fontSize: FONT_SIZE.MD,
+        fontWeight: FONT_WEIGHT.NORMAL,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+    [TYPOGRAPHY_TYPE.HEADLINE_MEDIUM]: {
+        fontFamily: FONT.SERIF,
+        fontSize: FONT_SIZE.ML,
+        fontWeight: FONT_WEIGHT.NORMAL,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
+    [TYPOGRAPHY_TYPE.HEADLINE_LARGE]: {
+        fontFamily: FONT.SERIF,
+        fontSize: FONT_SIZE.LG,
+        fontWeight: FONT_WEIGHT.NORMAL,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+    },
 };
 export const getTypographyStyles = (typography) => {
     return typographyStyleMap[typography || TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM];

package/dist/utils/hooks/useStorage.d.ts

@@ -0,0 +1,14 @@
+interface _Storage {
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+}
+declare class StorageAdaptor implements _Storage {
+    prefix?: string;
+    storage: _Storage;
+    constructor(prefix?: string);
+    getStorageKey(key: string): string;
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+export declare const useStorage: (prefix?: string) => StorageAdaptor;
+export {};

package/dist/utils/hooks/useStorage.js

@@ -0,0 +1,31 @@
+import React from 'react';
+const fallbackMemory = {};
+const fallbackStorage = {
+    getItem(key) {
+        return fallbackMemory[key];
+    },
+    setItem(key, value) {
+        fallbackMemory[key] = value;
+    },
+};
+class StorageAdaptor {
+    constructor(prefix) {
+        this.storage = window.sessionStorage || fallbackStorage;
+        this.prefix = prefix;
+    }
+    getStorageKey(key) {
+        return this.prefix ? `${this.prefix}-${key}` : key;
+    }
+    getItem(key) {
+        return this.storage.getItem(this.getStorageKey(key));
+    }
+    setItem(key, value) {
+        this.storage.setItem(this.getStorageKey(key), value);
+    }
+}
+export const useStorage = (prefix) => {
+    const storage = React.useMemo(() => {
+        return new StorageAdaptor(prefix);
+    }, [prefix]);
+    return storage;
+};

package/dist/utils/hooks/useUniqueHtmlId.d.ts

@@ -0,0 +1 @@
+export declare const useUniqueHtmlId: (prefix?: string) => string;

package/dist/utils/hooks/useUniqueHtmlId.js

@@ -0,0 +1,7 @@
+import { useMemo } from 'react';
+export const useUniqueHtmlId = (prefix) => {
+    return useMemo(() => {
+        const random = Math.random().toString().slice(2);
+        return `${prefix}-${random}`;
+    }, [prefix]);
+};

package/dist/utils/misc.d.ts

@@ -1,3 +1,10 @@
 export type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
+export declare const firstChildAltSelector = ":first-of-type:not(style):not(:first-of-type ~ *),style + *";
+export declare enum KEY_CODES {
+    ENTER = "Enter",
+    ARROW_UP = "ArrowUp",
+    ARROW_DOWN = "ArrowDown",
+    ESCAPE = "Escape"
+}

package/dist/utils/misc.js

@@ -1 +1,13 @@
-export {};
+// :first-child can cause problems with emotion because styles tags are sometimes added before
+// nodes, which can throw off :first-child selector. Not sure if this will actually be an issue
+// for us, but it does create noisy warnings.
+//
+// This work-around mimics :first-child behavior in a way that plays nice with emotion
+export const firstChildAltSelector = ':first-of-type:not(style):not(:first-of-type ~ *),style + *';
+export var KEY_CODES;
+(function (KEY_CODES) {
+    KEY_CODES["ENTER"] = "Enter";
+    KEY_CODES["ARROW_UP"] = "ArrowUp";
+    KEY_CODES["ARROW_DOWN"] = "ArrowDown";
+    KEY_CODES["ESCAPE"] = "Escape";
+})(KEY_CODES || (KEY_CODES = {}));

package/dist/utils/test.js

@@ -3,5 +3,7 @@ import { render as rtlRender } from '@testing-library/react';
 import { UiProvider } from '../components/providers/ui';
 export const render = (component, configParam) => {
     const config = configParam || {};
-    return rtlRender(_jsx(UiProvider, Object.assign({ env: config.env, components: config.components }, { children: component })));
+    return rtlRender(_jsx(UiProvider, Object.assign({ env: config.env, components: config.components, alertsConfig: {
+            disable: true,
+        } }, { children: component })));
 };

package/global.css

@@ -47,13 +47,8 @@ table {
 @font-face {
   font-family: GPCMed;
   font-display: swap;
-  src: url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff2');
-  src:url("https://static.nd.edu/fonts/gp-min/gpc-medium.woff2") format("woff2"),url("https://static.nd.edu/fonts/gp-min/gpc-medium.woff") format("woff"),url("https://static.nd.edu/fonts/gp-min/gpc-medium.ttf") format("truetype")
+  src:
+		url("https://static.nd.edu/fonts/gp-min/gpc-medium.woff2") format("woff2"),
+		url("https://static.nd.edu/fonts/gp-min/gpc-medium.woff") format("woff"),
+		url("https://static.nd.edu/fonts/gp-min/gpc-medium.ttf") format("truetype")
 }
-
-@font-face {
-  font-family: GPMed;
-  font-display: swap;
-  src: url('https://static.nd.edu/fonts/gp-min/gp-medium.woff2');
-  src:url("https://static.nd.edu/fonts/gp-min/gp-medium.woff2") format("woff2"),url("https://static.nd.edu/fonts/gp-min/gp-medium.woff") format("woff"),url("https://static.nd.edu/fonts/gp-min/gp-medium.ttf") format("truetype")
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.10",
+  "version": "0.0.14",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -21,23 +21,25 @@
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives && yarn prettier",
     "lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --fix && yarn prettify",
     "test": "vitest",
-    "prettier": "prettier --check src/**/*.{ts,tsx}",
-    "prettify": "prettier --write src/**/*.{ts,tsx}",
+    "prettier": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "prettify": "prettier --write \"src/**/*.{ts,tsx}\"",
     "start": "storybook dev -p 6006",
     "build-storybook": "storybook build -o storybook && touch storybook/.nojekyll",
-    "build": "tsc"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@mui/lab": "^5.0.0-alpha.133",
-    "formik": "^2.2.9",
-    "theme-ui": "^0.15.7"
+    "build": "tsc",
+    "debug": "echo src/**/*.tsx"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "theme-ui": "^0.15.7"
   },
   "devDependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.11.16",
     "@storybook/addon-essentials": "^7.0.17",
     "@storybook/addon-interactions": "^7.0.18",
     "@storybook/addon-links": "^7.0.17",
@@ -62,12 +64,17 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.0.17",
+    "theme-ui": "^0.15.7",
     "typescript": "^5.0.2",
-    "vite": "^4.3.2",
+    "vite": "^4.3.9",
     "vitest": "^0.31.4"
   },
   "prettier": {
     "singleQuote": true,
     "semi": false
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.24.5",
+    "react-markdown": "^8.0.7"
   }
 }