@ndlib/component-library 0.0.15 → 0.0.17

package/dist/components/elements/BrandingBar/index.d.ts

@@ -1 +1,2 @@
-export declare const BrandingBar: () => import("@theme-ui/core").ThemeUIJSX.Element;
+/// <reference types="react" />
+export declare const BrandingBar: () => import("react").JSX.Element;

package/dist/components/elements/Button/Button.stories.d.ts

@@ -10,3 +10,5 @@ export declare const TextButton: Story;
 export declare const IconButton: Story;
 export declare const LeftIcon: Story;
 export declare const RightIcon: Story;
+export declare const Loading: Story;
+export declare const Disabled: Story;

package/dist/components/elements/Button/Button.stories.js

@@ -7,6 +7,7 @@ import { GROUP_TYPE, Group } from '../Group';
 import { HEADING_SIZE, Heading } from '../text/Heading';
 import { Column } from '../layout/Column';
 import { COLOR } from '../../../theme/colors';
+import { Row } from '../layout/Row';
 const meta = {
     title: 'Elements/Button',
     component: Button,
@@ -70,3 +71,9 @@ export const RightIcon = {
         children: 'Select',
     },
 };
+export const Loading = {
+    render: () => (_jsxs(Column, { children: [_jsx(Row, { children: _jsx(Button, Object.assign({ loading: true }, { children: "Click Me" })) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.OUTLINE, loading: true }, { children: "Click Me" })) })), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, loading: true }, { children: "Click Me" })) }))] })),
+};
+export const Disabled = {
+    render: () => (_jsxs(Column, { children: [_jsx(Row, { children: _jsx(Button, Object.assign({ disabled: true }, { children: "Click Me" })) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.OUTLINE, disabled: true }, { children: "Click Me" })) })), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, disabled: true }, { children: "Click Me" })) }))] })),
+};

package/dist/components/elements/Button/Button.test.js

@@ -26,4 +26,14 @@ describe('Button', () => {
         fireEvent.click(getByRole('button'));
         expect(mockClickHandler).toHaveBeenCalledTimes(1);
     });
+    it('does not respond to click handler when disabled', () => {
+        const { getByRole } = render(_jsx(Button, { onClick: mockClickHandler, disabled: true }));
+        fireEvent.click(getByRole('button'));
+        expect(mockClickHandler).not.toHaveBeenCalled();
+    });
+    it('does not respond to click handler when loading', () => {
+        const { getByRole } = render(_jsx(Button, { onClick: mockClickHandler, loading: true }));
+        fireEvent.click(getByRole('button'));
+        expect(mockClickHandler).not.toHaveBeenCalled();
+    });
 });

package/dist/components/elements/Button/index.d.ts

@@ -22,4 +22,6 @@ export declare const Button: React.ForwardRefExoticComponent<{
     leftIcon?: React.FC<any> | undefined;
     rightIcon?: React.FC<any> | undefined;
     accessibleLabel?: string | undefined;
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/elements/Button/index.js

@@ -17,6 +17,7 @@ import { COLOR, colors } from '../../../theme/colors';
 import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../theme/typography';
 import { Icon } from '../Icon';
 import { useEnvironment } from '../../providers/env';
+import { SPINNER_SIZE, Spinner } from '../Spinner';
 export var BUTTON_SIZE;
 (function (BUTTON_SIZE) {
     BUTTON_SIZE["SM"] = "sm";
@@ -51,7 +52,8 @@ export var BUTTON_TYPE;
     // ARROW
 })(BUTTON_TYPE || (BUTTON_TYPE = {}));
 export const Button = React.forwardRef((_a, ref) => {
-    var { size: sizeParam, type: typeParam, color, primaryIcon, leftIcon, rightIcon, children, sx } = _a, rest = __rest(_a, ["size", "type", "color", "primaryIcon", "leftIcon", "rightIcon", "children", "sx"]);
+    var { size: sizeParam, type: typeParam, color, primaryIcon, leftIcon, rightIcon, disabled: disabledParam, children, sx, loading } = _a, rest = __rest(_a, ["size", "type", "color", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading"]);
+    const disabled = disabledParam || loading;
     const theme = useTheme();
     const [hover, setHover] = useState(false);
     const { flagInDevelopment } = useEnvironment();
@@ -60,6 +62,7 @@ export const Button = React.forwardRef((_a, ref) => {
     let textColor = COLOR.TEXT;
     let hoverTextColor = undefined;
     let borderColor = COLOR.TRANSPARENT;
+    let cursor = 'pointer';
     let hoverShadow = theme.boxShadow.NORMAL;
     let hoverDecoration = undefined;
     let hoverTransform = 'scale(1.03)';
@@ -108,25 +111,50 @@ export const Button = React.forwardRef((_a, ref) => {
         hoverTextColor = textColor;
         borderColor = textColor;
     }
+    if (disabled) {
+        cursor = 'not-allowed';
+        if (bg === COLOR.PRIMARY) {
+            bg = hoverBg = COLOR.LIGHT_GRAY;
+        }
+        if (bg === COLOR.BACKGROUND || bg === COLOR.TRANSPARENT) {
+            textColor = COLOR.LIGHT_GRAY;
+        }
+        else {
+            bg = COLOR.LIGHT_GRAY;
+        }
+    }
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
-    return (_jsxs("button", Object.assign({ ref: ref, onMouseEnter: () => {
+    let body = children;
+    if (primaryIcon) {
+        body = (_jsx(Icon, { icon: primaryIcon, size: getIconSize(typographyStyles.fontSize), color: hover ? hoverTextColor : textColor }));
+    }
+    if (loading) {
+        body = (_jsxs("div", Object.assign({ sx: {
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            } }, { children: [_jsx(Spinner, { size: SPINNER_SIZE.SM, color: textColor, sx: { position: 'absolute' } }), _jsx("div", Object.assign({ sx: { visibility: 'hidden' } }, { children: body }))] })));
+    }
+    return (_jsxs("button", Object.assign({ ref: ref, disabled: disabled, onMouseEnter: () => {
             setHover(true);
         }, onMouseLeave: () => {
             setHover(false);
-        }, sx: Object.assign(Object.assign({ bg: bg || colors.primary, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': {
-                bg: hoverBg,
-                color: hoverTextColor,
-                boxShadow: hoverShadow,
-                cursor: 'pointer',
-                transform: hoverTransform,
-                textDecoration: hoverDecoration,
-            } }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: hover ? hoverTextColor : textColor })), _jsx("div", Object.assign({ css: {
+        }, sx: Object.assign(Object.assign({ cursor, bg: bg || colors.primary, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': !disabled
+                ? {
+                    bg: hoverBg,
+                    color: hoverTextColor,
+                    boxShadow: hoverShadow,
+                    transform: hoverTransform,
+                    textDecoration: hoverDecoration,
+                }
+                : undefined }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: hover ? hoverTextColor : textColor })), _jsx("div", Object.assign({ css: {
                     flexGrow: 1,
                     justifyContent: 'flex-start',
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textAlign: 'start',
-                } }, { children: primaryIcon ? (_jsx(Icon, { icon: primaryIcon, size: getIconSize(typographyStyles.fontSize), color: hover ? hoverTextColor : textColor })) : (children) })), rightIcon && (_jsx(Icon, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: hover ? hoverTextColor : textColor }))] })));
+                } }, { children: body })), rightIcon && (_jsx(Icon, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: hover ? hoverTextColor : textColor }))] })));
 });

package/dist/components/elements/List/index.js

@@ -17,7 +17,7 @@ import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
 import SquareIcon from '@mui/icons-material/Square';
 import SquareOutlinedIcon from '@mui/icons-material/SquareOutlined';
 import { COLOR, Label, TYPOGRAPHY_TYPE } from '../../..';
-import { getTypographyStyles } from '../../../theme/typography';
+import { FONT_SIZE, getTypographyStyles } from '../../../theme/typography';
 import { Icon } from '../Icon';
 export var LIST_SIZE;
 (function (LIST_SIZE) {
@@ -66,8 +66,8 @@ export const ListItem = (_a) => {
     var { index, sx, children } = _a, rest = __rest(_a, ["index", "sx", "children"]);
     const { ordered, icon, iconColor, size, depth } = useListConfig();
     const typographyStyles = getTypographyStyles(sizeTypographyMap[size]);
-    return (_jsxs("li", Object.assign({ sx: Object.assign(Object.assign({ depth, display: 'flex', mt: index === 0 && depth === 0 ? 0 : marginSizeMap[size], ml: 2 }, typographyStyles), sx) }, rest, { children: [ordered ? (_jsxs(Label, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(Icon, { icon: icon, color: iconColor, css: {
-                    marginTop: '5px',
+    return (_jsxs("li", Object.assign({ sx: Object.assign(Object.assign({ depth, display: 'flex', mt: index === 0 && depth === 0 ? 0 : marginSizeMap[size], ml: 1 }, typographyStyles), sx) }, rest, { children: [ordered ? (_jsxs(Label, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(Icon, { icon: icon, color: iconColor, size: FONT_SIZE.XS, css: {
+                    marginTop: '7px',
                 }, sx: {
                     mr: 3,
                     alignItems: 'flex-start',

package/dist/components/elements/Markdown/Markdown.stories.d.ts

@@ -4,3 +4,6 @@ declare const meta: Meta<typeof Markdown>;
 export default meta;
 type Story = StoryObj<typeof Markdown>;
 export declare const Default: Story;
+export declare const WithHtml: Story;
+export declare const CustomHtmlSanitize: Story;
+export declare const NoHtml: Story;

package/dist/components/elements/Markdown/Markdown.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Markdown } from '.';
+import { DEFAULT_ALLOWED_ATTRIBUTES, DEFAULT_ALLOWED_TAGS, Markdown } from '.';
 const meta = {
     title: 'Elements/Markdown',
     component: Markdown,
@@ -13,6 +13,7 @@ litora tellus ligula porttitor metus.
 `;
 export default meta;
 const startingContent = `
+
 # Inline styles
 This paragraph has __bold content__ and **more bold content** and _italic content_ and *more italic content*
 
@@ -51,3 +52,37 @@ export const Default = {
         content: startingContent,
     },
 };
+const htmlContent = `
+  ## HTML Content
+  <p style='color: red;'>hello world </p>
+  <img
+    style="width: 300px"
+    src="https://s3.amazonaws.com/resources.library.nd.edu/images/website/search.banner.fall.jpg"
+  ></img>
+  <a href="https://google.com" class="embedly-card" data-card-width="100px" data-card-controls="0">Embedded content: https://google.com</a>
+  <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FNDLibraries%2Fvideos%2F1673794309311939%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" ></iframe>
+`;
+export const WithHtml = {
+    render: (args) => _jsx(Markdown, Object.assign({}, args)),
+    args: {
+        content: htmlContent,
+        enableHtml: true,
+    },
+};
+export const CustomHtmlSanitize = {
+    render: (args) => _jsx(Markdown, Object.assign({}, args)),
+    args: {
+        enableHtml: true,
+        sanitizeHtmlOptions: {
+            allowedAttributes: Object.assign(Object.assign({}, DEFAULT_ALLOWED_ATTRIBUTES), { p: ['style'], img: ['src', 'style'] }),
+            allowedTags: [...DEFAULT_ALLOWED_TAGS, 'img'],
+        },
+        content: htmlContent,
+    },
+};
+export const NoHtml = {
+    render: (args) => _jsx(Markdown, Object.assign({}, args)),
+    args: {
+        content: htmlContent,
+    },
+};

package/dist/components/elements/Markdown/Markdown.test.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '../../../utils/test';
-import { Markdown } from '.';
+import { DEFAULT_ALLOWED_TAGS, Markdown } from '.';
 const testMarkdown = `
 # Inline styles
 This paragraph has __bold content__ and **more bold content** and _italic content_ and *more italic content*
@@ -26,6 +26,15 @@ This paragraph has __bold content__ and **more bold content** and _italic conten
 2. List item 2
 3. List item 3
 `;
+const htmlMarkdown = `
+  ## HTML Content
+  <p style='color: red;'>hello world</p>
+  <p style='color: red;'>&nbsp;</p>
+  <script></script>
+  <a href="https://google.com" class="embedly-card" data-card-width="100px" data-card-controls="0">Embedded content: https://google.com</a>
+  <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FNDLibraries%2Fvideos%2F1673794309311939%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0"></iframe>
+  <img href="https://google.com"></img>
+`;
 describe('Markdown', () => {
     it('renders alert content', () => {
         const { getAllByRole, getByRole } = render(_jsx(Markdown, { content: testMarkdown }));
@@ -55,4 +64,25 @@ describe('Markdown', () => {
         })).toBeInTheDocument();
         expect(getAllByRole('list')).toHaveLength(3);
     });
+    it('renders allowed html when included', () => {
+        const { container, getByText, getByRole } = render(_jsx(Markdown, { content: htmlMarkdown, enableHtml: true }));
+        expect(getByText('hello world')).toBeDefined();
+        expect(getByRole('link')).toBeDefined();
+        expect(() => getByText('&nbsp;')).toThrow();
+        expect(container.getElementsByTagName('script')).toHaveLength(0);
+        expect(container.getElementsByTagName('img')).toHaveLength(0);
+        expect(container.getElementsByTagName('iframe')).toHaveLength(1);
+    });
+    it('does not render html when disabled', () => {
+        const { container, getByText } = render(_jsx(Markdown, { content: htmlMarkdown }));
+        expect(() => getByText('hello world')).toThrow();
+        expect(container.getElementsByTagName('script')).toHaveLength(0);
+        expect(container.getElementsByTagName('iframe')).toHaveLength(0);
+    });
+    it('supports customizing html sanitization', () => {
+        const { container } = render(_jsx(Markdown, { content: htmlMarkdown, enableHtml: true, sanitizeHtmlOptions: {
+                allowedTags: DEFAULT_ALLOWED_TAGS.concat(['img']),
+            } }));
+        expect(container.getElementsByTagName('img')).toHaveLength(1);
+    });
 });

package/dist/components/elements/Markdown/index.d.ts

@@ -1,7 +1,20 @@
 /// <reference types="react" />
 import { StyledElementProps } from '../../../theme';
+import sanitizeHtml from 'sanitize-html';
+export declare const DEFAULT_ALLOWED_TAGS: string[];
+export declare const DEFAULT_ALLOWED_ATTRIBUTES: {
+    iframe: string[];
+    a: sanitizeHtml.AllowedAttribute[];
+};
+export declare const DEFAULT_ALLOWED_IFRAME_DOMAINS: string[];
 type MarkdownProps = StyledElementProps<HTMLDivElement, {
     content: string;
+    enableHtml?: boolean;
+    sanitizeHtmlOptions?: {
+        allowedTags?: string[];
+        allowedIframeDomains?: string[];
+        allowedAttributes?: sanitizeHtml.IOptions['allowedAttributes'];
+    };
 }>;
 export declare const Markdown: React.FC<MarkdownProps>;
 export {};

package/dist/components/elements/Markdown/index.js

@@ -11,11 +11,26 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
+import rehypeRaw from 'rehype-raw';
 import { List, ListItem } from '../List';
 import { Paragraph } from '../text/Paragraph';
 import { HEADING_SIZE, Heading } from '../text/Heading';
 import { Bold, Italic } from '../text/Inline';
 import { firstChildAltSelector } from '../../../utils/misc';
+import sanitizeHtml from 'sanitize-html';
+export const DEFAULT_ALLOWED_TAGS = sanitizeHtml.defaults.allowedTags.concat([
+    'iframe',
+]);
+export const DEFAULT_ALLOWED_ATTRIBUTES = Object.assign(Object.assign({}, sanitizeHtml.defaults.allowedAttributes), { iframe: ['*'], a: sanitizeHtml.defaults.allowedAttributes.a.concat([
+        'class',
+        'data-card-width',
+        'data-card-controls',
+    ]) });
+export const DEFAULT_ALLOWED_IFRAME_DOMAINS = [
+    'facebook.com',
+    'youtube.com',
+    'nd.edu',
+];
 const headingStyles = {
     mt: 4,
     [firstChildAltSelector]: {
@@ -29,8 +44,17 @@ const paragraphStyles = {
     },
 };
 export const Markdown = (_a) => {
-    var { content } = _a, rest = __rest(_a, ["content"]);
-    return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ components: {
+    var { content, enableHtml, sanitizeHtmlOptions } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions"]);
+    let sanitizedContent = content;
+    if (enableHtml) {
+        sanitizedContent = sanitizeHtml(content, {
+            allowedTags: (sanitizeHtmlOptions === null || sanitizeHtmlOptions === void 0 ? void 0 : sanitizeHtmlOptions.allowedTags) || DEFAULT_ALLOWED_TAGS,
+            allowedIframeDomains: (sanitizeHtmlOptions === null || sanitizeHtmlOptions === void 0 ? void 0 : sanitizeHtmlOptions.allowedIframeDomains) ||
+                DEFAULT_ALLOWED_IFRAME_DOMAINS,
+            allowedAttributes: (sanitizeHtmlOptions === null || sanitizeHtmlOptions === void 0 ? void 0 : sanitizeHtmlOptions.allowedAttributes) || DEFAULT_ALLOWED_ATTRIBUTES,
+        });
+    }
+    return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw] : [], components: {
                 h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { standalone: true, sx: headingStyles, "aria-level": 1 }))),
                 h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { standalone: true, sx: headingStyles, "aria-level": 2 }))),
                 h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { standalone: true, sx: headingStyles, "aria-level": 3 }))),
@@ -39,12 +63,13 @@ export const Markdown = (_a) => {
                 h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, sx: headingStyles, "aria-level": 6 }))),
                 ol: (props) => _jsx(List, Object.assign({}, props, { ordered: true, sx: { mt: 4 } })),
                 ul: (props) => _jsx(List, Object.assign({}, props, { sx: { mt: 4 } })),
+                // eslint-disable-next-line
                 li: (_a) => {
-                    var { index } = _a, props = __rest(_a, ["index"]);
-                    return _jsx(ListItem, Object.assign({ index: index }, props));
+                    var { index, ordered } = _a, props = __rest(_a, ["index", "ordered"]);
+                    return (_jsx(ListItem, Object.assign({ index: index }, props)));
                 },
                 p: (props) => _jsx(Paragraph, Object.assign({}, props, { sx: paragraphStyles })),
                 strong: (props) => _jsx(Bold, Object.assign({}, props)),
                 em: (props) => _jsx(Italic, Object.assign({}, props)),
-            } }, { children: content })) })));
+            } }, { children: sanitizedContent })) })));
 };

package/dist/components/elements/Spinner/Spinner.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from '.';
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+export declare const Default: Story;
+export declare const CustomColor: Story;

package/dist/components/elements/Spinner/Spinner.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Column, Group, HEADING_SIZE, Heading } from '../../..';
+import { SPINNER_SIZE, Spinner } from '.';
+import { GROUP_TYPE } from '../Group';
+import { COLOR } from '../../../theme/colors';
+// import { HEADING_SIZE, Heading } from '.'
+// import { COLOR } from '../../../../theme/colors'
+const meta = {
+    title: 'Elements/Spinner',
+    component: Spinner,
+    //👇 Enables auto-generated documentation for the component story
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { size: SPINNER_SIZE.LG, label: 'Large' },
+    { size: SPINNER_SIZE.MD, label: 'Medium' },
+    { size: SPINNER_SIZE.SM, label: 'Small' },
+];
+export const Default = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, { children: size.label })), _jsx(Spinner, { size: size.size })] })))) })),
+    args: {},
+};
+export const CustomColor = {
+    render: () => (_jsx(Column, { children: _jsx(Spinner, { color: COLOR.SECONDARY }) })),
+    args: {
+        children: 'Heading',
+    },
+};

package/dist/components/elements/Spinner/Spinner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Spinner/Spinner.test.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { SPINNER_LABEL, Spinner } from '.';
+describe('Button', () => {
+    it('renders without throwing an error', () => {
+        const { getByLabelText } = render(_jsx(Spinner, {}));
+        expect(getByLabelText(SPINNER_LABEL)).toBeInTheDocument();
+    });
+});

package/dist/components/elements/Spinner/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { StyledElementProps } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+export declare enum SPINNER_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export type SpinnerProps = StyledElementProps<HTMLDivElement, {
+    size?: SPINNER_SIZE;
+    color?: COLOR;
+}>;
+export declare const SPINNER_LABEL = "Loading";
+export declare const Spinner: React.FC<SpinnerProps>;

package/dist/components/elements/Spinner/index.js

@@ -0,0 +1,50 @@
+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";
+/** @jsxImportSource theme-ui */
+import { keyframes } from '@emotion/react';
+import { useTheme } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+export var SPINNER_SIZE;
+(function (SPINNER_SIZE) {
+    SPINNER_SIZE["SM"] = "sm";
+    SPINNER_SIZE["MD"] = "md";
+    SPINNER_SIZE["LG"] = "lg";
+})(SPINNER_SIZE || (SPINNER_SIZE = {}));
+const spin = keyframes({
+    from: {
+        transform: 'rotate(0deg)',
+    },
+    to: {
+        transform: 'rotate(360deg)',
+    },
+});
+const sizeLengthMap = {
+    [SPINNER_SIZE.SM]: '1.25rem',
+    [SPINNER_SIZE.MD]: '2rem',
+    [SPINNER_SIZE.LG]: '3rem',
+};
+export const SPINNER_LABEL = 'Loading';
+export const Spinner = (_a) => {
+    var { size: sizeParam, color: colorParam } = _a, rest = __rest(_a, ["size", "color"]);
+    const { colors } = useTheme();
+    const size = sizeParam || SPINNER_SIZE.MD;
+    const color = colors[colorParam || COLOR.PRIMARY];
+    return (_jsx("div", Object.assign({ "aria-label": SPINNER_LABEL, sx: {
+            animation: `${spin} 1.4s linear 0s infinite normal none running;`,
+            borderRadius: '50%',
+            height: sizeLengthMap[size],
+            width: sizeLengthMap[size],
+            border: size === SPINNER_SIZE.LG ? 'solid 6px' : 'solid 4px',
+            borderColor: `${color} ${color} transparent`,
+        } }, rest)));
+};

package/dist/utils/hooks/useStorage.js

@@ -1,5 +1,6 @@
 import React from 'react';
 const fallbackMemory = {};
+const isBrowser = typeof window !== 'undefined';
 const fallbackStorage = {
     getItem(key) {
         return fallbackMemory[key];
@@ -10,7 +11,12 @@ const fallbackStorage = {
 };
 class StorageAdaptor {
     constructor(prefix) {
-        this.storage = window.sessionStorage || fallbackStorage;
+        if (isBrowser) {
+            this.storage = window.sessionStorage || fallbackStorage;
+        }
+        else {
+            this.storage = fallbackStorage;
+        }
         this.prefix = prefix;
     }
     getStorageKey(key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -53,6 +53,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/sanitize-html": "^2.9.0",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react-swc": "^3.0.0",
@@ -67,7 +68,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.0.17",
-    "theme-ui": "^0.15.7",
+    "theme-ui": "^0.16.0",
     "typescript": "^5.0.2",
     "vite": "^4.3.9",
     "vitest": "^0.31.4"
@@ -78,6 +79,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.24.5",
-    "react-markdown": "^8.0.7"
+    "react-markdown": "^8.0.7",
+    "rehype-raw": "^6.1.1",
+    "sanitize-html": "^2.11.0"
   }
 }