@ndlib/component-library 0.0.10 → 0.0.14

package/dist/components/elements/text/Inline/index.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { FONT_WEIGHT } from '../../../../theme/typography';
+export const Bold = (_a) => {
+    var { sx } = _a, rest = __rest(_a, ["sx"]);
+    return (_jsx("span", Object.assign({ sx: Object.assign(Object.assign({}, sx), { fontWeight: FONT_WEIGHT.BOLD }) }, rest)));
+};
+export const Italic = (_a) => {
+    var { sx } = _a, rest = __rest(_a, ["sx"]);
+    return (_jsx("span", Object.assign({ sx: Object.assign(Object.assign({}, sx), { fontStyle: 'italic' }) }, rest)));
+};

package/dist/components/elements/text/Label/Label.stories.js

@@ -13,8 +13,8 @@ const sizes = [
     { size: LABEL_SIZE.SM, label: 'Small' },
 ];
 export const Default = {
-    render: () => (_jsx(Column, { children: sizes.map(size => (_jsx(Group, Object.assign({ type: GROUP_TYPE.GROUP }, { children: _jsx(Label, Object.assign({ size: size.size }, { children: size.label })) })))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.GROUP }, { children: _jsx(Label, Object.assign({ size: size.size }, { children: size.label })) })))) })),
     args: {
-        children: "Label"
-    }
+        children: 'Label',
+    },
 };

package/dist/components/elements/text/Label/Label.test.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { vi } from 'vitest';
 import { render as _render } from '../../../../utils/test';
-import { Label } from ".";
+import { Label } from '.';
 import { GROUP_TYPE, Group } from '../../Group';
 import { ENVIRONMENT } from '../../../providers/env';
 import userEvent from '@testing-library/user-event';
@@ -47,7 +47,7 @@ describe('Label', () => {
     });
     it('can send focus to label target', () => __awaiter(void 0, void 0, void 0, function* () {
         const INPUT_TEST_ID = 'input-test-id';
-        const { getByText, getByTestId } = render((_jsx(Group, Object.assign({ type: GROUP_TYPE.GROUP }, { children: ({ labelTargetId }) => (_jsxs(_Fragment, { children: [_jsx(Label, { children: "Foo" }), _jsx("input", { id: labelTargetId, "data-testid": INPUT_TEST_ID })] })) }))));
+        const { getByText, getByTestId } = render(_jsx(Group, Object.assign({ type: GROUP_TYPE.GROUP }, { children: ({ labelTargetId }) => (_jsxs(_Fragment, { children: [_jsx(Label, { children: "Foo" }), _jsx("input", { id: labelTargetId, "data-testid": INPUT_TEST_ID })] })) })));
         userEvent.click(getByText('Foo'));
         yield waitFor(() => {
             expect(getByTestId(INPUT_TEST_ID)).toHaveFocus();

package/dist/components/elements/text/Label/index.d.ts

@@ -1,7 +1,7 @@
 /** @jsxImportSource theme-ui */
-import React from "react";
-import { TYPOGRAPHY_TYPE } from "../../../../theme/typography";
-import { StyledElementProps } from "../../../../theme";
+import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+import { StyledElementProps } from '../../../../theme';
 export declare enum LABEL_SIZE {
     SM = "sm",
     MD = "md",

package/dist/components/elements/text/Label/index.js

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import { getTypographyStyles, TYPOGRAPHY_TYPE } from "../../../../theme/typography";
-import { GROUP_TYPE, useGroup } from "../../Group";
-import { useEnvironment } from "../../../providers/env";
+import { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
+import { GROUP_TYPE, useGroup } from '../../Group';
+import { useEnvironment } from '../../../providers/env';
 export var LABEL_SIZE;
 (function (LABEL_SIZE) {
     LABEL_SIZE["SM"] = "sm";
@@ -22,7 +22,7 @@ export var LABEL_SIZE;
 export const SIZE_TYPOGRAPHY_MAP = {
     [LABEL_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
     [LABEL_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
-    [LABEL_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE
+    [LABEL_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE,
 };
 export const Label = (_a) => {
     var { sx, size, standalone } = _a, rest = __rest(_a, ["sx", "size", "standalone"]);

package/dist/components/elements/text/Paragraph/Paragraph.stories.js

@@ -21,6 +21,6 @@ const p2 = 'Sed non lobortis mi, vitae dapibus arcu. Aenean at euismod arcu. Ut
 export const Default = {
     render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY } }, { children: size.label })), [p1, p2].map((content) => (_jsx(Paragraph, Object.assign({}, args, { size: size.size }, { children: content }))))] })))) })),
     args: {
-        children: "Heading"
-    }
+        children: 'Heading',
+    },
 };

package/dist/components/elements/text/Paragraph/Paragraph.test.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '../../../../utils/test';
-import { Paragraph } from ".";
+import { Paragraph } from '.';
 describe('Paragraph', () => {
     it('renders without an error', () => {
         const { getByText } = render(_jsx(Paragraph, { children: "Foo" }));

package/dist/components/elements/text/Paragraph/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource theme-ui */
-import React from "react";
-import { StyledElementProps } from "../../../../theme";
+import React from 'react';
+import { StyledElementProps } from '../../../../theme';
 type ParagraphProps = StyledElementProps<HTMLSpanElement, {
     size?: PARAGRAPH_SIZE;
 }>;

package/dist/components/elements/text/Paragraph/index.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import { getTypographyStyles, TYPOGRAPHY_TYPE } from "../../../../theme/typography";
+import { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
 export var PARAGRAPH_SIZE;
 (function (PARAGRAPH_SIZE) {
     PARAGRAPH_SIZE["SM"] = "sm";
@@ -20,7 +20,7 @@ export var PARAGRAPH_SIZE;
 const SIZE_TYPOGRAPHY_MAP = {
     [PARAGRAPH_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
     [PARAGRAPH_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
-    [PARAGRAPH_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE
+    [PARAGRAPH_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
 };
 export const Paragraph = (_a) => {
     var { size, sx } = _a, rest = __rest(_a, ["size", "sx"]);

package/dist/components/providers/alerts.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+export declare enum ALERT_TYPE {
+    INFORMATIONAL = "Informational",
+    INFORMATIONAL_YELLOW = "Informational_Yellow",
+    WARNING = "Warning"
+}
+export declare enum ALERT_DOMAIN {
+    LIBRARY = "library",
+    PRIMO = "primo",
+    PRIMO_NDU = "primoNDU",
+    PRIMO_HCC = "primoHCC",
+    ILLIAD = "illiad",
+    CATALOGUE_CLASSIC_NDU = "catalogueClassicNDU",
+    CATALOGUE_CLASSIC_HCC = "catalogueClassicHCC"
+}
+export type AlertProperties = {
+    uuid: string;
+    title: string;
+    type: ALERT_TYPE;
+    description: string;
+    domains: ALERT_DOMAIN[];
+    global?: boolean;
+    key?: number | null;
+};
+export type StrapiAlertAttributes = {
+    attributes: AlertProperties;
+};
+export type AlertQueryParams = {
+    domain?: ALERT_DOMAIN;
+    endpoint?: string;
+    startTime?: string;
+    endTime?: string;
+    disable?: boolean;
+};
+type AlertsProviderProps = React.PropsWithChildren<AlertQueryParams>;
+export declare const AlertsProvider: React.FC<AlertsProviderProps>;
+export declare const useAlerts: (pageAlerts?: string[]) => {
+    alerts: AlertProperties[];
+    dismiss: (id: string) => void;
+};
+export {};

package/dist/components/providers/alerts.js

@@ -0,0 +1,133 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { useStorage } from '../../utils/hooks/useStorage';
+const DISMISSED_ALERTS_STORAGE_KEY = 'DISSMISSED_ALERTS_STORAGE_KEY';
+export var ALERT_TYPE;
+(function (ALERT_TYPE) {
+    ALERT_TYPE["INFORMATIONAL"] = "Informational";
+    ALERT_TYPE["INFORMATIONAL_YELLOW"] = "Informational_Yellow";
+    ALERT_TYPE["WARNING"] = "Warning";
+})(ALERT_TYPE || (ALERT_TYPE = {}));
+export var ALERT_DOMAIN;
+(function (ALERT_DOMAIN) {
+    ALERT_DOMAIN["LIBRARY"] = "library";
+    ALERT_DOMAIN["PRIMO"] = "primo";
+    ALERT_DOMAIN["PRIMO_NDU"] = "primoNDU";
+    ALERT_DOMAIN["PRIMO_HCC"] = "primoHCC";
+    ALERT_DOMAIN["ILLIAD"] = "illiad";
+    ALERT_DOMAIN["CATALOGUE_CLASSIC_NDU"] = "catalogueClassicNDU";
+    ALERT_DOMAIN["CATALOGUE_CLASSIC_HCC"] = "catalogueClassicHCC";
+})(ALERT_DOMAIN || (ALERT_DOMAIN = {}));
+const composeGraphqlQuery = ({ startTime, endTime, }) => {
+    return JSON.stringify({
+        query: `
+      query AlertQuery($startTime: DateTime, $endTime: DateTime) {
+        alerts(
+          filters: {
+            startTime: { lte: $startTime }
+            endTime: { gte: $endTime }
+          }
+          pagination: { start: 0, limit: 100 }
+          sort: ["type:desc", "startTime:asc"]
+        ) {
+          data {
+            attributes {
+              uuid
+              title
+              description
+              type
+              global
+              domains
+            }
+          }
+        }
+      }
+    `,
+        variables: {
+            startTime: startTime,
+            endTime: endTime,
+        },
+    });
+};
+const useAlertsQuery = ({ domain = ALERT_DOMAIN.LIBRARY, endpoint = DEFAULT_ENDPOINT, startTime = new Date().toISOString(), endTime = new Date().toISOString(), disable = false, }) => {
+    const [alerts, setAlerts] = useState([]);
+    useEffect(() => {
+        const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
+            try {
+                const myHeaders = new Headers();
+                myHeaders.append('Content-Type', 'application/json');
+                const response = yield fetch(endpoint, {
+                    method: 'POST',
+                    headers: myHeaders,
+                    body: composeGraphqlQuery({
+                        startTime,
+                        endTime,
+                    }),
+                    redirect: 'follow',
+                });
+                const json = yield response.json();
+                const results = (_c = (_b = (_a = json === null || json === void 0 ? void 0 : json.data) === null || _a === void 0 ? void 0 : _a.alerts) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.map((a) => a === null || a === void 0 ? void 0 : a.attributes);
+                console.log('results', results, alerts);
+                setAlerts(results);
+            }
+            catch (error) {
+                console.log('error', error);
+            }
+        });
+        if (!disable) {
+            fetchData();
+        }
+    }, [endpoint, domain, startTime, endTime, disable]);
+    return alerts;
+};
+const AlertsContext = React.createContext({
+    alerts: [],
+    dismiss: () => { },
+});
+const DEFAULT_ENDPOINT = 'https://library-website-cms.library.nd.edu/graphql';
+export const AlertsProvider = ({ domain = ALERT_DOMAIN.LIBRARY, endpoint, startTime, endTime, children, disable, }) => {
+    const alerts = useAlertsQuery({
+        domain,
+        endpoint,
+        startTime,
+        endTime,
+        disable,
+    });
+    const storage = useStorage(`alert-storage-${domain}`);
+    const storedDismissedAlerts = storage.getItem(DISMISSED_ALERTS_STORAGE_KEY);
+    const [dismissedAlerts, setDismissedAlerts] = useState(storedDismissedAlerts ? JSON.parse(storedDismissedAlerts) : []);
+    const dismiss = (id) => {
+        if (!dismissedAlerts.includes(id)) {
+            const newDismissed = dismissedAlerts.concat([id]);
+            storage.setItem(DISMISSED_ALERTS_STORAGE_KEY, JSON.stringify(newDismissed));
+            setDismissedAlerts(newDismissed);
+        }
+    };
+    const filteredAlerts = alerts
+        .filter((alert) => !dismissedAlerts.includes(alert.uuid))
+        .filter((alert) => alert.domains.includes(domain));
+    return (_jsx(AlertsContext.Provider, Object.assign({ value: {
+            alerts: filteredAlerts,
+            dismiss,
+        } }, { children: children })));
+};
+export const useAlerts = (pageAlerts) => {
+    const { alerts: allAlerts, dismiss } = React.useContext(AlertsContext);
+    const alerts = pageAlerts
+        ? allAlerts.filter((alert) => alert.global || pageAlerts.includes(alert.uuid))
+        : allAlerts.filter((alert) => alert.global);
+    return {
+        alerts,
+        dismiss,
+    };
+};

package/dist/components/providers/componentConfig.d.ts

@@ -1,6 +1,6 @@
-import { PropsWithChildren } from "react";
-import { DeepPartial } from "../../utils/misc";
-import { StyledElementProps } from "../../theme";
+import { PropsWithChildren } from 'react';
+import { DeepPartial } from '../../utils/misc';
+import { StyledElementProps } from '../../theme';
 export type ComponentConfig = {
     link: {
         externalMatcher: RegExp;

package/dist/components/providers/componentConfig.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useMemo } from 'react';
 const DEFAULT_EXTERNAL_LINK_MATCHER = /[a-zA-Z0-9]*:\/\/[^\s]*/g;
 export const DefaultLink = (_a) => {
     var { to } = _a, rest = __rest(_a, ["to"]);
@@ -20,12 +20,13 @@ const defaultComponentConfig = {
     link: {
         externalMatcher: DEFAULT_EXTERNAL_LINK_MATCHER,
         internalLinkComponent: DefaultLink,
-        externalLinkComponent: DefaultLink
-    }
+        externalLinkComponent: DefaultLink,
+    },
 };
 export const ComponentConfigContext = createContext(defaultComponentConfig);
 export const useComponentConfig = () => useContext(ComponentConfigContext);
 export const ComponentConfigProvider = ({ config: configParam, children }) => {
-    const config = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultComponentConfig), configParam), { link: Object.assign(Object.assign({}, defaultComponentConfig.link), configParam.link) })), []); // eslint-disable-line
+    const config = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultComponentConfig), configParam), { link: Object.assign(Object.assign({}, defaultComponentConfig.link), configParam.link) })), [] // eslint-disable-line
+    );
     return (_jsx(ComponentConfigContext.Provider, Object.assign({ value: config }, { children: children })));
 };

package/dist/components/providers/env.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
 export declare enum ENVIRONMENT {
     DEV = "DEVELOPMENT",
     PROD = "PRODUCTION"

package/dist/components/providers/env.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { createContext, useContext } from 'react';
 export var ENVIRONMENT;
 (function (ENVIRONMENT) {
     ENVIRONMENT["DEV"] = "DEVELOPMENT";
     ENVIRONMENT["PROD"] = "PRODUCTION";
 })(ENVIRONMENT || (ENVIRONMENT = {}));
 const EnvironmentContext = createContext({
-    flagInDevelopment: () => { }
+    flagInDevelopment: () => { },
 });
 export const useEnvironment = () => useContext(EnvironmentContext);
 export const EnvironmentProvider = ({ env, children }) => {
@@ -20,6 +20,6 @@ export const EnvironmentProvider = ({ env, children }) => {
     };
     return (_jsx(EnvironmentContext.Provider, Object.assign({ value: {
             env,
-            flagInDevelopment
+            flagInDevelopment,
         } }, { children: children })));
 };

package/dist/components/providers/theme.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeProvider as ThemeUiProvider } from 'theme-ui';
 import { theme } from '../../theme';
 export const ThemeProvider = ({ children }) => {
-    return (_jsx(ThemeUiProvider, Object.assign({ theme: theme }, { children: children })));
+    return _jsx(ThemeUiProvider, Object.assign({ theme: theme }, { children: children }));
 };

package/dist/components/providers/ui.d.ts

@@ -1,9 +1,13 @@
-import { PropsWithChildren } from "react";
-import { ComponentConfigParam } from "./componentConfig";
-import { ENVIRONMENT } from "./env";
+import { PropsWithChildren } from 'react';
+import { ComponentConfigParam } from './componentConfig';
+import { ENVIRONMENT } from './env';
+import { AlertQueryParams } from './alerts';
 export type UiConfig = {
     env?: ENVIRONMENT;
     components?: ComponentConfigParam;
+    alertsConfig?: AlertQueryParams;
+    disableAlerts?: boolean;
+    loadFonts?: boolean;
 };
 type UiProviderProps = PropsWithChildren<UiConfig>;
 export declare const UiProvider: React.FC<UiProviderProps>;

package/dist/components/providers/ui.js

@@ -1,7 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ComponentConfigProvider } from "./componentConfig";
-import { EnvironmentProvider } from "./env";
-import { ThemeProvider } from "./theme";
-export const UiProvider = ({ env, components, children }) => {
-    return (_jsx(EnvironmentProvider, Object.assign({ env: env }, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(ThemeProvider, { children: children }) })) })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentConfigProvider, } from './componentConfig';
+import { EnvironmentProvider } from './env';
+import { ThemeProvider } from './theme';
+import { AlertsProvider } from './alerts';
+import { FontLoader } from '../../FontLoader';
+export const UiProvider = ({ env, components, alertsConfig, children, loadFonts, }) => {
+    return (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(ThemeProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) })), loadFonts && _jsx(FontLoader, {})] })));
 };

package/dist/index.d.ts

@@ -1,14 +1,18 @@
 export { theme, ThemeProvider } from './theme';
 export { COLOR } from './theme/colors';
-export { TYPOGRAPHY_TYPE } from './theme/typography';
+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 { 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';
 export { Group, useGroup } from './components/elements/Group';
+export { Markdown } from './components/elements/Markdown';
 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 { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
+export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';

package/dist/index.js

@@ -1,14 +1,18 @@
 export { theme, ThemeProvider } from './theme';
 export { COLOR } from './theme/colors';
-export { TYPOGRAPHY_TYPE } from './theme/typography';
+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 { 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';
 export { Group, useGroup } from './components/elements/Group';
+export { Markdown } from './components/elements/Markdown';
 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 { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
+export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';

package/dist/theme/Color.stories.js

@@ -8,7 +8,7 @@ const meta = {
     title: 'Theme/Colors',
 };
 const ColorSquare = ({ color }) => {
-    return _jsx(Box, { sx: { p: 3, bg: color, boxShadow: '0px 0px 8px 1px #dddddd' } });
+    return _jsx(Box, { sx: { p: 3, bg: color } });
 };
 export default meta;
 const colors = [
@@ -36,7 +36,22 @@ const colors = [
     { color: COLOR.ND_TERTIARY_4, label: 'ND_TERTIARY_4' },
     { color: COLOR.ND_TERTIARY_5, label: 'ND_TERTIARY_5' },
     { color: COLOR.ND_TERTIARY_6, label: 'ND_TERTIARY_6' },
+    { color: COLOR.ALERT_INFORMATIONAL_BG, label: 'ALERT_INFORMATIONAL_BG' },
+    {
+        color: COLOR.ALERT_INFORMATIONAL_BORDER,
+        label: 'ALERT_INFORMATIONAL_BORDER',
+    },
+    {
+        color: COLOR.ALERT_INFORMATIONAL_YELLOW_BG,
+        label: 'ALERT_INFORMATIONAL_YELLOW_BG',
+    },
+    {
+        color: COLOR.ALERT_INFORMATIONAL_YELLOW_BORDER,
+        label: 'ALERT_INFORMATIONAL_YELLOW_BORDER',
+    },
+    { color: COLOR.ALERT_WARNING_BG, label: 'ALERT_WARNING_BG' },
+    { color: COLOR.ALERT_WARNING_BORDER, label: 'ALERT_WARNING_BORDER' },
 ];
 export const Default = {
-    render: () => (_jsx(Row, Object.assign({ sx: { flexWrap: 'wrap' } }, { children: colors.map((color) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.GROUP, sx: { mr: 3, mt: 0, flexBasis: '100px' } }, { children: [_jsx(Label, Object.assign({ size: LABEL_SIZE.SM }, { children: color.label })), _jsx(ColorSquare, { color: color.color })] })))) }))),
+    render: () => (_jsx(Row, Object.assign({ sx: { flexWrap: 'wrap' } }, { children: colors.map((color) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.GROUP, sx: { mr: 3, mt: 0, flexBasis: '100px' } }, { children: [_jsx(Label, Object.assign({ size: LABEL_SIZE.SM }, { children: color.label })), _jsx(ColorSquare, { color: color.color })] }), color.label))) }))),
 };

package/dist/theme/Typography.stories.d.ts

@@ -0,0 +1,6 @@
+/** @jsxImportSource theme-ui */
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/theme/Typography.stories.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { getTypographyStyles, TYPOGRAPHY_TYPE } from './typography';
+import { Group } from '../components/elements/Group';
+import { Box } from '../components/elements/layout/Box';
+import { LABEL_SIZE, Label } from '../components/elements/text/Label';
+const meta = {
+    title: 'Theme/Typography',
+    tags: ['autodocs'],
+};
+export default meta;
+const types = [
+    { type: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL, label: 'Paragraph Small' },
+    { type: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, label: 'Paragraph Medium' },
+    { type: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE, label: 'Paragraph Large' },
+    { type: TYPOGRAPHY_TYPE.HEADING_SMALL, label: 'Heading Small' },
+    { type: TYPOGRAPHY_TYPE.HEADING_MEDIUM, label: 'Heading Medium' },
+    { type: TYPOGRAPHY_TYPE.HEADING_LARGE, label: 'Heading Large' },
+    { type: TYPOGRAPHY_TYPE.HEADING_XLARGE, label: 'Heading X Large' },
+    { type: TYPOGRAPHY_TYPE.CONTROL_SMALL, label: 'Control Small' },
+    { type: TYPOGRAPHY_TYPE.CONTROL_MEDIUM, label: 'Control Medium' },
+    { type: TYPOGRAPHY_TYPE.CONTROL_LARGE, label: 'Control Large' },
+    { type: TYPOGRAPHY_TYPE.HEADLINE_SMALL, label: 'Headline Small' },
+    { type: TYPOGRAPHY_TYPE.HEADLINE_MEDIUM, label: 'Headline Medium' },
+    { type: TYPOGRAPHY_TYPE.HEADLINE_LARGE, label: 'Headline Large' },
+];
+const pangrams = [
+    'The quick brown fox jumps over the lazy dog.',
+    'Waltz, bad nymph, for quick jigs vex.',
+    'How vexingly quick daft zebras jump!',
+    'Pack my box with five dozen liquor jugs.',
+    'The five boxing wizards jump quickly.',
+    'When zombies arrive, quickly fax Judge Pat.',
+    'Amazingly few discotheques provide jukeboxes.',
+];
+const randomElement = (arr) => {
+    return arr.length ? arr[Math.floor(Math.random() * arr.length)] : undefined;
+};
+export const Default = {
+    render: () => (_jsx(Group, { children: types.map((t) => {
+            const style = getTypographyStyles(t.type);
+            return (_jsxs(Group, Object.assign({ sx: { mb: '1rem' } }, { children: [_jsx(Label, Object.assign({ size: LABEL_SIZE.SM }, { children: t.label })), _jsx(Box, Object.assign({ sx: { p: 3, boxShadow: '0px 0px 8px 1px #dddddd' } }, { children: _jsx("div", Object.assign({ sx: style }, { children: randomElement(pangrams) })) }))] })));
+        }) })),
+};

package/dist/theme/colors.d.ts

@@ -8,8 +8,12 @@ export declare enum COLOR {
     SECONDARY_HIGHLIGHT = "secondaryHighlight",
     TEXT_ON_PRIMARY = "textOnPrimary",
     TEXT_ON_SECONDARY = "textOnSecondary",
+    LIGHT_GRAY = "lightGray",
+    FAINT_GRAY = "faintGray",
     ND_BLUE = "ndBlue",
     ND_GOLD = "ndGold",
+    ND_SKY_BLUE = "ndSkyBlue",
+    ND_SKY_BLUE_DARK = "ndSkyBlueDark",
     ND_METALLIC_GOLD = "ndMetallicGold",
     ND_PROVOST_BLUE = "ndProvostBlue",
     ND_SECONDARY_1 = "ndSecondary1",
@@ -23,7 +27,13 @@ export declare enum COLOR {
     ND_TERTIARY_3 = "ndTertiary3",
     ND_TERTIARY_4 = "ndTertiary4",
     ND_TERTIARY_5 = "ndTertiary5",
-    ND_TERTIARY_6 = "ndTertiary6"
+    ND_TERTIARY_6 = "ndTertiary6",
+    ALERT_INFORMATIONAL_BG = "alertInformationalBg",
+    ALERT_INFORMATIONAL_BORDER = "alertInformationalBorder",
+    ALERT_INFORMATIONAL_YELLOW_BG = "alertInformationalYellowBg",
+    ALERT_INFORMATIONAL_YELLOW_BORDER = "alertInformationalYellowBorder",
+    ALERT_WARNING_BG = "alertWarningBg",
+    ALERT_WARNING_BORDER = "alertWarningBorder"
 }
 export declare const colors: {
     [key in COLOR]: string;

package/dist/theme/colors.js

@@ -9,8 +9,12 @@ export var COLOR;
     COLOR["SECONDARY_HIGHLIGHT"] = "secondaryHighlight";
     COLOR["TEXT_ON_PRIMARY"] = "textOnPrimary";
     COLOR["TEXT_ON_SECONDARY"] = "textOnSecondary";
+    COLOR["LIGHT_GRAY"] = "lightGray";
+    COLOR["FAINT_GRAY"] = "faintGray";
     COLOR["ND_BLUE"] = "ndBlue";
     COLOR["ND_GOLD"] = "ndGold";
+    COLOR["ND_SKY_BLUE"] = "ndSkyBlue";
+    COLOR["ND_SKY_BLUE_DARK"] = "ndSkyBlueDark";
     COLOR["ND_METALLIC_GOLD"] = "ndMetallicGold";
     COLOR["ND_PROVOST_BLUE"] = "ndProvostBlue";
     COLOR["ND_SECONDARY_1"] = "ndSecondary1";
@@ -25,6 +29,12 @@ export var COLOR;
     COLOR["ND_TERTIARY_4"] = "ndTertiary4";
     COLOR["ND_TERTIARY_5"] = "ndTertiary5";
     COLOR["ND_TERTIARY_6"] = "ndTertiary6";
+    COLOR["ALERT_INFORMATIONAL_BG"] = "alertInformationalBg";
+    COLOR["ALERT_INFORMATIONAL_BORDER"] = "alertInformationalBorder";
+    COLOR["ALERT_INFORMATIONAL_YELLOW_BG"] = "alertInformationalYellowBg";
+    COLOR["ALERT_INFORMATIONAL_YELLOW_BORDER"] = "alertInformationalYellowBorder";
+    COLOR["ALERT_WARNING_BG"] = "alertWarningBg";
+    COLOR["ALERT_WARNING_BORDER"] = "alertWarningBorder";
 })(COLOR || (COLOR = {}));
 export const colors = {
     [COLOR.TEXT]: '#222222',
@@ -36,8 +46,12 @@ export const colors = {
     [COLOR.SECONDARY]: '#f8e999',
     [COLOR.SECONDARY_HIGHLIGHT]: '#ddcc70',
     [COLOR.TEXT_ON_SECONDARY]: '#242111',
+    [COLOR.LIGHT_GRAY]: '#949494',
+    [COLOR.FAINT_GRAY]: '#eeeeee',
     [COLOR.ND_BLUE]: '#0c2340',
     [COLOR.ND_GOLD]: '#d39F10',
+    [COLOR.ND_SKY_BLUE]: '#e1e8f2',
+    [COLOR.ND_SKY_BLUE_DARK]: '#c1cddd',
     [COLOR.ND_METALLIC_GOLD]: '#ae9142',
     [COLOR.ND_PROVOST_BLUE]: '#002a5d',
     [COLOR.ND_SECONDARY_1]: '#5aabbc',
@@ -52,4 +66,10 @@ export const colors = {
     [COLOR.ND_TERTIARY_4]: '#aa272f',
     [COLOR.ND_TERTIARY_5]: '#5a412f',
     [COLOR.ND_TERTIARY_6]: '#ba6f2e',
+    [COLOR.ALERT_INFORMATIONAL_BG]: '#ffb073',
+    [COLOR.ALERT_INFORMATIONAL_BORDER]: '#ad7950',
+    [COLOR.ALERT_INFORMATIONAL_YELLOW_BG]: '#f8e999',
+    [COLOR.ALERT_INFORMATIONAL_YELLOW_BORDER]: '#b3a871',
+    [COLOR.ALERT_WARNING_BG]: '#fc7279',
+    [COLOR.ALERT_WARNING_BORDER]: '#ad5458',
 };

package/dist/theme/custom.d.ts

@@ -0,0 +1,3 @@
+export declare enum BOX_SHADOW {
+    NORMAL = "0 0 8px #dfdfdf"
+}

package/dist/theme/custom.js

@@ -0,0 +1,5 @@
+// Values in these files aren't part of theme-ui / sx spec and need to be pulled from theme directly
+export var BOX_SHADOW;
+(function (BOX_SHADOW) {
+    BOX_SHADOW["NORMAL"] = "0 0 8px #dfdfdf";
+})(BOX_SHADOW || (BOX_SHADOW = {}));