@ndlib/component-library 0.0.17 → 0.0.19

package/dist/components/providers/menu.js

@@ -0,0 +1,305 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { useEnvironment } from './env';
+import { KEY_CODES, equals } from '../../utils/misc';
+import { useUniqueHtmlId } from '../../utils/hooks/useUniqueHtmlId';
+import { useCheckMidClick } from '../../utils/hooks/useCheckMidClick';
+export var MENU_ACTION_TYPE;
+(function (MENU_ACTION_TYPE) {
+    MENU_ACTION_TYPE["SUBMENU"] = "SUBMENU";
+    MENU_ACTION_TYPE["LINK"] = "LINK";
+})(MENU_ACTION_TYPE || (MENU_ACTION_TYPE = {}));
+export var MENU_ORIENTATION;
+(function (MENU_ORIENTATION) {
+    MENU_ORIENTATION["HORIZONTAL"] = "HORIZONTAL";
+    MENU_ORIENTATION["VERTICAL"] = "VERTICAL";
+})(MENU_ORIENTATION || (MENU_ORIENTATION = {}));
+const MenuContext = React.createContext({
+    menu: { items: [], orientation: MENU_ORIENTATION.HORIZONTAL },
+    activePath: [],
+    isOpen: false,
+    open: () => { },
+    close: () => { },
+    getMenuItem: () => undefined,
+    getMenuItemProps: () => ({}),
+    getMenuProps: () => ({}),
+});
+const getAriaRoleDescription = (orientation) => {
+    if (orientation === MENU_ORIENTATION.HORIZONTAL) {
+        return 'Menu item, press right arrow to navigate to next item, press enter to select';
+    }
+    else {
+        return 'Menu item, press down arrow to navigate to next item, press enter to select';
+    }
+};
+export const useMenu = () => React.useContext(MenuContext);
+const activeStyles = {
+    outline: '2px solid blue',
+};
+const inactiveStyles = {
+    outline: 'none',
+};
+export const MenuProvider = ({ menu, children, }) => {
+    const { flagInDevelopment } = useEnvironment();
+    const salt = useUniqueHtmlId();
+    const { isMidClick, elementProps: checkMidclickProps } = useCheckMidClick();
+    const [usingKeyboard, setUsingKeyboard] = useState(false);
+    const closeOnBlurTimeout = React.useRef();
+    const initialPath = React.useMemo(() => [menu.items[0].id], [menu]);
+    const [activePath, setActivePath] = useState(initialPath);
+    const [isOpen, setIsOpen] = useState(false);
+    const getItemId = React.useCallback((path) => `menu-${salt}-item-${path.join('-')}`, [salt]);
+    useEffect(() => {
+        if (activePath && isOpen) {
+            const activeChild = window.document.getElementById(getItemId(activePath));
+            activeChild === null || activeChild === void 0 ? void 0 : activeChild.focus();
+            clearTimeout(closeOnBlurTimeout.current);
+        }
+    }, [activePath, getItemId, isOpen]);
+    const open = React.useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    const close = React.useCallback(() => {
+        setIsOpen(false);
+        setUsingKeyboard(false);
+    }, []);
+    const getMenuItem = React.useCallback((path) => {
+        let menuItem = undefined;
+        for (const pathSegment of path) {
+            if (!menuItem) {
+                menuItem = menu.items.find((item) => item.id === pathSegment);
+            }
+            else if (menuItem.action.type === MENU_ACTION_TYPE.SUBMENU) {
+                menuItem = menuItem.action.submenu.items.find((item) => item.id === pathSegment);
+            }
+            if (!menuItem) {
+                return undefined;
+            }
+        }
+        return menuItem;
+    }, [menu]);
+    const activeMenuItem = React.useMemo(() => getMenuItem(activePath), [activePath, getMenuItem]);
+    const activeParentMenu = React.useMemo(() => {
+        let parentMenu = menu;
+        const tempActivePath = [...activePath];
+        tempActivePath.pop();
+        if (tempActivePath.length > 0) {
+            const parentMenuItem = getMenuItem(tempActivePath);
+            if ((parentMenuItem === null || parentMenuItem === void 0 ? void 0 : parentMenuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                parentMenu = parentMenuItem === null || parentMenuItem === void 0 ? void 0 : parentMenuItem.action.submenu;
+            }
+            else {
+                flagInDevelopment('');
+            }
+        }
+        return parentMenu;
+    }, [activePath, menu, getMenuItem, flagInDevelopment]);
+    const activeIndex = React.useMemo(() => {
+        return activeParentMenu.items.findIndex((item) => item.id === activePath[activePath.length - 1]);
+    }, [activeParentMenu, activePath]);
+    const currentMenuLength = activeParentMenu.items.length;
+    const onFocus = React.useCallback(() => {
+        if (!isMidClick.current) {
+            setUsingKeyboard(true);
+            open();
+        }
+    }, [isMidClick, open]);
+    const onBlur = React.useCallback(() => {
+        closeOnBlurTimeout.current = setTimeout(() => {
+            close();
+            setActivePath(initialPath);
+        }, 300);
+    }, [close, initialPath]);
+    const onKeyDown = React.useCallback((e) => {
+        const navigateNext = () => {
+            const nextIndex = (activeIndex + 1) % currentMenuLength;
+            const nextId = activeParentMenu.items[nextIndex].id;
+            setActivePath([...activePath.slice(0, activePath.length - 1), nextId]);
+        };
+        const navigatePrevious = () => {
+            if (activeIndex === 0) {
+                navigateOut();
+            }
+            else {
+                const prevIndex = activeIndex - 1;
+                const prevId = activeParentMenu.items[prevIndex].id;
+                setActivePath([...activePath.slice(0, activePath.length - 1), prevId]);
+            }
+        };
+        const navigateIn = () => {
+            var _a;
+            if (((_a = activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action) === null || _a === void 0 ? void 0 : _a.type) === MENU_ACTION_TYPE.SUBMENU) {
+                setActivePath([
+                    ...activePath,
+                    activeMenuItem.action.submenu.items[0].id,
+                ]);
+            }
+            else {
+                navigateNext();
+            }
+        };
+        const navigateOut = () => {
+            if (activePath.length > 1) {
+                setActivePath(activePath.slice(0, activePath.length - 1));
+            }
+        };
+        const select = () => {
+            if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                setActivePath(activePath.concat([activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.id]));
+            }
+            else if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.LINK) {
+                window.location.href = activeMenuItem.action.to;
+            }
+        };
+        const isVertical = activeParentMenu.orientation === MENU_ORIENTATION.VERTICAL;
+        if (e.key === KEY_CODES.ENTER) {
+            if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.LINK) {
+                select();
+            }
+            else if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                navigateIn();
+            }
+        }
+        else {
+            setUsingKeyboard(true);
+        }
+        if (e.key === KEY_CODES.ESCAPE) {
+            if (activePath.length > 1) {
+                navigateOut();
+            }
+            else {
+                const activeChild = window.document.getElementById(getItemId(activePath));
+                activeChild === null || activeChild === void 0 ? void 0 : activeChild.blur();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_DOWN) {
+            if (isVertical) {
+                navigateNext();
+            }
+            else {
+                navigateIn();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_UP) {
+            if (isVertical) {
+                navigatePrevious();
+            }
+            else {
+                navigateOut();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_RIGHT) {
+            if (isVertical) {
+                navigateIn();
+            }
+            else {
+                navigateNext();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_LEFT) {
+            if (isVertical) {
+                navigateOut();
+            }
+            else {
+                navigatePrevious();
+            }
+        }
+    }, [
+        activePath,
+        activeIndex,
+        activeMenuItem,
+        activeParentMenu,
+        currentMenuLength,
+        getItemId,
+    ]);
+    const getMenuProps = React.useCallback((path) => {
+        const isTopLevel = !path;
+        let _menu = menu;
+        let menuItem = undefined;
+        if (path) {
+            menuItem = getMenuItem(path);
+            if ((menuItem === null || menuItem === void 0 ? void 0 : menuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                _menu = menuItem.action.submenu;
+            }
+        }
+        const isVertical = _menu.orientation === MENU_ORIENTATION.VERTICAL;
+        const topLevelProps = Object.assign(Object.assign({}, checkMidclickProps), { onKeyDown,
+            onFocus,
+            onBlur });
+        return Object.assign({ role: 'menu', 'aria-orientation': isVertical ? 'vertical' : 'horizontal', tabIndex: isTopLevel ? 0 : -1 }, (isTopLevel ? topLevelProps : {}));
+    }, [menu, onFocus, onBlur, checkMidclickProps, getMenuItem, onKeyDown]);
+    const getMenuItemProps = React.useCallback((path) => {
+        const isTopLevel = path.length === 1;
+        const isActivePath = equals(path, activePath);
+        return Object.assign(Object.assign({}, checkMidclickProps), { role: 'menuitem', 'aria-roledescription': getAriaRoleDescription(activeParentMenu.orientation), id: getItemId(path), onKeyDown: equals(path, activePath) ? onKeyDown : undefined, tabIndex: -1, onFocus: () => {
+                // Screen readers will send focus to buttons without firing keydown or click
+                // Call setActivePath to sync
+                if (!isMidClick) {
+                    setActivePath(path);
+                }
+            }, onMouseDown: () => {
+                checkMidclickProps.onMouseDown();
+                const menuItem = getMenuItem(path);
+                // Because blurring will close the dropdown menu, link navigation should be
+                // triggered before that happened. Mousedown is used instead of click because
+                // it is triggered before blur event
+                if ((menuItem === null || menuItem === void 0 ? void 0 : menuItem.action.type) === MENU_ACTION_TYPE.LINK) {
+                    window.location.href = menuItem.action.to;
+                }
+            }, onClick: (e) => {
+                const menuItem = getMenuItem(path);
+                const isSubmenu = (menuItem === null || menuItem === void 0 ? void 0 : menuItem.action.type) === MENU_ACTION_TYPE.SUBMENU;
+                if (!isSubmenu) {
+                    // Link menu items should not trigger navigation because that is handled by mousedown listener
+                    e.preventDefault();
+                }
+                // If user is using a mouse, clicking the top level menu that is open
+                // should close the menu
+                if (isSubmenu &&
+                    isActivePath &&
+                    isTopLevel &&
+                    !usingKeyboard &&
+                    isOpen) {
+                    close();
+                    // Clicking a top level menu that is closed or not the active menu should
+                    // open that menu
+                }
+                else if (isSubmenu && isTopLevel && !usingKeyboard && !isOpen) {
+                    setActivePath(path);
+                    open();
+                    // If user is using a mouse, or if the menu is a link, handle the same way
+                    // as enter key press
+                }
+                else {
+                    onKeyDown({
+                        key: KEY_CODES.ENTER,
+                    });
+                }
+            }, style: isOpen && usingKeyboard && equals(path, activePath)
+                ? activeStyles
+                : inactiveStyles });
+    }, [
+        getItemId,
+        getMenuItem,
+        activePath,
+        isOpen,
+        checkMidclickProps,
+        close,
+        open,
+        onKeyDown,
+        usingKeyboard,
+        activeParentMenu,
+        isMidClick,
+    ]);
+    const contextValue = {
+        menu,
+        isOpen,
+        open,
+        close,
+        activePath,
+        getMenuItem,
+        getMenuProps,
+        getMenuItemProps,
+    };
+    return (_jsx(MenuContext.Provider, Object.assign({ value: contextValue }, { children: typeof children === 'function' ? children(contextValue) : children })));
+};

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { Alert, Alerts } from './components/elements/Alerts';
 export { BrandingBar } from './components/elements/BrandingBar';
-export { Button, BUTTON_SIZE } from './components/elements/Button';
+export { Button, BUTTON_SIZE, BUTTON_TYPE } from './components/elements/Button';
 export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
 export { Label, LABEL_SIZE } from './components/elements/text/Label';
 export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
@@ -13,6 +13,16 @@ export { Box } from './components/elements/layout/Box';
 export { Column } from './components/elements/layout/Column';
 export { Row } from './components/elements/layout/Row';
 export { Link, LINK_SIZE } from './components/elements/Link';
+export { NavMenu } from './components/composites/NavMenu';
+export { INPUT_SIZE, TextInput } from './components/elements/Fields/TextInput';
+export { Select } from './components/elements/Fields/Select';
+export { DatePicker } from './components/elements/Fields/DatePicker';
+export { MonthPicker } from './components/elements/Fields/MonthPicker';
+export { Checkbox } from './components/elements/Fields/Checkbox';
+export { CheckboxGroup } from './components/elements/Fields/CheckboxGroup';
+export { Radio } from './components/elements/Fields/Radio';
+export { RadioGroup } from './components/elements/Fields/RadioGroup';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
+export { MenuProvider, useMenu } from './components/providers/menu';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';

package/dist/index.js

@@ -3,7 +3,7 @@ export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { Alert, Alerts } from './components/elements/Alerts';
 export { BrandingBar } from './components/elements/BrandingBar';
-export { Button, BUTTON_SIZE } from './components/elements/Button';
+export { Button, BUTTON_SIZE, BUTTON_TYPE } from './components/elements/Button';
 export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
 export { Label, LABEL_SIZE } from './components/elements/text/Label';
 export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
@@ -13,6 +13,16 @@ export { Box } from './components/elements/layout/Box';
 export { Column } from './components/elements/layout/Column';
 export { Row } from './components/elements/layout/Row';
 export { Link, LINK_SIZE } from './components/elements/Link';
+export { NavMenu } from './components/composites/NavMenu';
+export { INPUT_SIZE, TextInput } from './components/elements/Fields/TextInput';
+export { Select } from './components/elements/Fields/Select';
+export { DatePicker } from './components/elements/Fields/DatePicker';
+export { MonthPicker } from './components/elements/Fields/MonthPicker';
+export { Checkbox } from './components/elements/Fields/Checkbox';
+export { CheckboxGroup } from './components/elements/Fields/CheckboxGroup';
+export { Radio } from './components/elements/Fields/Radio';
+export { RadioGroup } from './components/elements/Fields/RadioGroup';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
+export { MenuProvider, useMenu } from './components/providers/menu';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';

package/dist/theme/GlobalStyles.d.ts

@@ -0,0 +1 @@
+export declare const GlobalStyles: () => import("react/jsx-runtime").JSX.Element;

package/dist/theme/GlobalStyles.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Global, css } from '@emotion/react';
+import { colors } from './colors';
+const globalStyles = css `
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+    font-size: 16px;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  .ndlib-date-picker .react-datepicker__header,
+  .ndlib-date-picker .react-datepicker__header * {
+    color: white;
+    background-color: ${colors.primary};
+  }
+
+  .ndlib-date-picker .react-datepicker__header {
+    width: 280px;
+  }
+
+  .ndlib-date-picker .react-datepicker__day-names {
+    margin-top: 4px;
+  }
+
+  .ndlib-date-picker .react-datepicker__month .react-datepicker__month-text {
+    padding: 4px;
+  }
+
+  @font-face {
+    font-family: GPCMed;
+    font-display: swap;
+    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');
+  }
+`;
+export const GlobalStyles = () => {
+    return _jsx(Global, { styles: globalStyles });
+};

package/dist/theme/colors.d.ts

@@ -11,6 +11,7 @@ export declare enum COLOR {
     LIGHT_GRAY = "lightGray",
     FAINT_GRAY = "faintGray",
     ND_BLUE = "ndBlue",
+    ND_BLUE_LIGHT = "ndBlueLight",
     ND_GOLD = "ndGold",
     ND_SKY_BLUE = "ndSkyBlue",
     ND_SKY_BLUE_DARK = "ndSkyBlueDark",

package/dist/theme/colors.js

@@ -12,6 +12,7 @@ export var COLOR;
     COLOR["LIGHT_GRAY"] = "lightGray";
     COLOR["FAINT_GRAY"] = "faintGray";
     COLOR["ND_BLUE"] = "ndBlue";
+    COLOR["ND_BLUE_LIGHT"] = "ndBlueLight";
     COLOR["ND_GOLD"] = "ndGold";
     COLOR["ND_SKY_BLUE"] = "ndSkyBlue";
     COLOR["ND_SKY_BLUE_DARK"] = "ndSkyBlueDark";
@@ -49,6 +50,7 @@ export const colors = {
     [COLOR.LIGHT_GRAY]: '#949494',
     [COLOR.FAINT_GRAY]: '#eeeeee',
     [COLOR.ND_BLUE]: '#0c2340',
+    [COLOR.ND_BLUE_LIGHT]: '#143865',
     [COLOR.ND_GOLD]: '#d39F10',
     [COLOR.ND_SKY_BLUE]: '#e1e8f2',
     [COLOR.ND_SKY_BLUE_DARK]: '#c1cddd',

package/dist/theme/index.d.ts

@@ -18,6 +18,7 @@ export declare const theme: {
         lightGray: string;
         faintGray: string;
         ndBlue: string;
+        ndBlueLight: string;
         ndGold: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;
@@ -99,6 +100,7 @@ export declare const useTheme: () => {
         lightGray: string;
         faintGray: string;
         ndBlue: string;
+        ndBlueLight: string;
         ndGold: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const useCheckMidClick: () => {
+    elementProps: {
+        onMouseDown: () => void;
+        onMouseUp: () => void;
+    };
+    isMidClick: React.MutableRefObject<boolean>;
+};

package/dist/utils/hooks/useCheckMidClick.js

@@ -0,0 +1,17 @@
+import React from 'react';
+export const useCheckMidClick = () => {
+    const isMidClick = React.useRef(false);
+    const onMouseDown = () => {
+        isMidClick.current = true;
+    };
+    const onMouseUp = () => {
+        isMidClick.current = false;
+    };
+    return {
+        elementProps: {
+            onMouseDown,
+            onMouseUp,
+        },
+        isMidClick,
+    };
+};

package/dist/utils/misc.d.ts

@@ -6,5 +6,8 @@ export declare enum KEY_CODES {
     ENTER = "Enter",
     ARROW_UP = "ArrowUp",
     ARROW_DOWN = "ArrowDown",
+    ARROW_RIGHT = "ArrowRight",
+    ARROW_LEFT = "ArrowLeft",
     ESCAPE = "Escape"
 }
+export declare const equals: (a: any, b: any) => boolean;

package/dist/utils/misc.js

@@ -9,5 +9,8 @@ export var KEY_CODES;
     KEY_CODES["ENTER"] = "Enter";
     KEY_CODES["ARROW_UP"] = "ArrowUp";
     KEY_CODES["ARROW_DOWN"] = "ArrowDown";
+    KEY_CODES["ARROW_RIGHT"] = "ArrowRight";
+    KEY_CODES["ARROW_LEFT"] = "ArrowLeft";
     KEY_CODES["ESCAPE"] = "Escape";
 })(KEY_CODES || (KEY_CODES = {}));
+export const equals = (a, b) => JSON.stringify(a) === JSON.stringify(b);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -52,6 +52,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.28",
+    "@types/react-datepicker": "^4.15.0",
     "@types/react-dom": "^18.0.11",
     "@types/sanitize-html": "^2.9.0",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
@@ -79,6 +80,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.24.5",
+    "react-datepicker": "^4.16.0",
     "react-markdown": "^8.0.7",
     "rehype-raw": "^6.1.1",
     "sanitize-html": "^2.11.0"

package/global.css

@@ -1,54 +0,0 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-	font-size: 16px;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-@font-face {
-  font-family: GPCMed;
-  font-display: swap;
-  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")
-}