@ndlib/component-library 0.0.7-9.1

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

@@ -0,0 +1,103 @@
+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, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import React from 'react';
+import _CircleIcon from '@mui/icons-material/Circle';
+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 { FONT_SIZE, getTypographyStyles } from '../../../theme/typography';
+import { Icon } from '../Icon';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import { useLinesHeight } from '../text/ReadMore';
+import { Column } from '../layout/Column';
+import { useEnvironment } from '../../providers/env';
+const CircleIcon = importedDefaultComponentShim(_CircleIcon);
+const CircleOutlinedIcon = importedDefaultComponentShim(_CircleOutlinedIcon);
+const SquareIcon = importedDefaultComponentShim(_SquareIcon);
+const SquareOutlinedIcon = importedDefaultComponentShim(_SquareOutlinedIcon);
+export var LIST_SIZE;
+(function (LIST_SIZE) {
+    LIST_SIZE["SM"] = "sm";
+    LIST_SIZE["MD"] = "md";
+    LIST_SIZE["LG"] = "lg";
+})(LIST_SIZE || (LIST_SIZE = {}));
+const marginSizeMap = {
+    [LIST_SIZE.SM]: 2,
+    [LIST_SIZE.MD]: 3,
+    [LIST_SIZE.LG]: 4,
+};
+const iconSizeMap = {
+    [LIST_SIZE.SM]: FONT_SIZE.XXS,
+    [LIST_SIZE.MD]: FONT_SIZE.XXS,
+    [LIST_SIZE.LG]: FONT_SIZE.XS,
+};
+const defaultIcons = [
+    CircleIcon,
+    CircleOutlinedIcon,
+    SquareIcon,
+    SquareOutlinedIcon,
+];
+const sizeTypographyMap = {
+    [LIST_SIZE.SM]: TYPOGRAPHY_TYPE.CONDENSED_TEXT_SMALL,
+    [LIST_SIZE.MD]: TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM,
+    [LIST_SIZE.LG]: TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE,
+};
+const ListConfigContext = React.createContext({
+    size: LIST_SIZE.MD,
+    ordered: false,
+    icon: CircleIcon,
+    iconColor: COLOR.TEXT,
+    iconSize: undefined,
+    depth: -1,
+});
+const useListConfig = () => React.useContext(ListConfigContext);
+export const List = ({ sx, size: sizeParam, ordered, icon, iconSize: iconSizeParam, iconColor: iconColorParam, children, }) => {
+    const { depth: parentDepth, size: parentSize, iconColor: parentIconColor, iconSize: parentIconSize, } = useListConfig();
+    const depth = parentDepth + 1;
+    const defaultStyles = Object.assign({ listStyleType: 'none' }, getTypographyStyles());
+    const defaultIcon = defaultIcons[depth] || CircleIcon;
+    const size = sizeParam || parentSize || LIST_SIZE.MD;
+    const iconSize = iconSizeParam || parentIconSize || iconSizeMap[size];
+    const iconColor = iconColorParam || parentIconColor || COLOR.TEXT;
+    return (_jsx(ListConfigContext.Provider, Object.assign({ value: {
+            size,
+            icon: icon || defaultIcon,
+            iconColor,
+            iconSize,
+            ordered: ordered || false,
+            depth,
+        } }, { children: ordered ? (_jsx("ul", Object.assign({ sx: Object.assign(Object.assign({}, defaultStyles), sx) }, { children: children }))) : (_jsx("ol", Object.assign({ sx: Object.assign(Object.assign({}, defaultStyles), sx) }, { children: children }))) })));
+};
+export const ListItem = (_a) => {
+    var { index, sx, icon: iconParam, iconSize: iconSizeParam, iconColor: iconColorParam, onIconClick, onClick, children, iconLabel, tabIndex: tabIndexParam } = _a, rest = __rest(_a, ["index", "sx", "icon", "iconSize", "iconColor", "onIconClick", "onClick", "children", "iconLabel", "tabIndex"]);
+    const { ordered, icon: listIcon, iconColor: listIconColor, iconSize: listIconSize, size, depth, } = useListConfig();
+    const { flagInDevelopment } = useEnvironment();
+    if (onIconClick && !iconLabel) {
+        flagInDevelopment('ListItem component with onIconClick should have an iconLabel prop for accessibility');
+    }
+    const icon = iconParam || listIcon;
+    const iconSize = iconSizeParam || listIconSize;
+    const iconColor = iconColorParam || listIconColor;
+    const typography = sizeTypographyMap[size];
+    const typographyStyles = getTypographyStyles(sizeTypographyMap[size]);
+    const lineHeight = useLinesHeight({ typography, lines: 1 });
+    const tabIndex = tabIndexParam || (onClick ? 0 : undefined);
+    console.log('rendering tab index', tabIndex);
+    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), tabIndex: tabIndex }, rest, { children: [ordered ? (_jsxs(Label, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(Column, Object.assign({ sx: { height: lineHeight }, justify: "center" }, { children: _jsx(Icon, { icon: icon, color: iconColor, size: iconSize, onClick: onIconClick, "aria-label": iconLabel, sx: {
+                        mr: 3,
+                        alignItems: 'flex-start',
+                    } }) }))), _jsx("div", Object.assign({ sx: {
+                    cursor: onClick ? 'pointer' : 'default',
+                } }, { children: children }))] })));
+};

package/dist/components/elements/ListBox/Listbox.stories.d.ts

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

package/dist/components/elements/ListBox/Listbox.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListBox } from '.';
+const meta = {
+    title: 'Elements/ListBox',
+    component: ListBox,
+    tags: ['autodocs'],
+};
+export default meta;
+const options = [
+    { value: 'orange', label: 'Orange' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+];
+export const Default = {
+    render: () => _jsx(ListBox, { options: options }),
+};

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

@@ -0,0 +1,33 @@
+import React, { Key } from 'react';
+import { StyledElementProps } from '../../../theme';
+import { BasicOption, RenderOption } from '../Fields/option';
+type ListBoxProps<Value extends Key, Option extends BasicOption<Value>> = StyledElementProps<HTMLDivElement, {
+    options: Option[];
+    renderOption?: RenderOption<Value, Option>;
+    selected?: Value;
+    focused?: Value;
+    selectOption?: (option: Option) => void;
+    onDownPress?: () => void;
+    onUpPress?: () => void;
+    onSelect?: () => void;
+    onBlur?: () => void;
+}>;
+export declare const ListBox: <Value extends React.Key = string, Option extends BasicOption<Value> = any>(props: {
+    sx?: import("../../..").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
+    options: Option[];
+    renderOption?: RenderOption<Value, Option> | undefined;
+    selected?: Value | undefined;
+    focused?: Value | undefined;
+    selectOption?: ((option: Option) => void) | undefined;
+    onDownPress?: (() => void) | undefined;
+    onUpPress?: (() => void) | undefined;
+    onSelect?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+} & {
+    htmlFor?: string | undefined;
+} & {
+    ref?: React.ForwardedRef<HTMLDivElement> | undefined;
+}) => any;
+export {};

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

@@ -0,0 +1,51 @@
+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 React from 'react';
+import { COLOR } from '../../..';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { defaultRenderOption, getOptionId, } from '../Fields/option';
+function ListBoxInner(_a, ref) {
+    var { options, renderOption: renderOptionParam, selected, focused, selectOption, sx } = _a, rest = __rest(_a, ["options", "renderOption", "selected", "focused", "selectOption", "sx"]);
+    const renderOption = renderOptionParam || defaultRenderOption;
+    const typography = getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM);
+    return (_jsx("div", Object.assign({ role: "listbox", ref: ref, sx: Object.assign(Object.assign({ border: 'solid 1px', borderRadius: '4px', borderColor: COLOR.LIGHT_GRAY, backgroundColor: COLOR.BACKGROUND, boxShadow: '0px 0px 8px 2px #dddddd' }, typography), sx), onKeyDown: (e) => {
+            console.log(e);
+        } }, rest, { children: options.map((option) => (_jsx("div", Object.assign({ id: getOptionId(option.value), "aria-selected": selected === option.value, role: "option", onClick: option.onClick, onMouseDown: () => selectOption && selectOption(option), sx: {
+                px: 4,
+                py: 3,
+                backgroundColor: focused === option.value
+                    ? COLOR.EXTRA_EXTRA_LIGHT_GRAY
+                    : COLOR.BACKGROUND,
+                cursor: 'pointer',
+                borderBottom: 'solid 1px',
+                borderBottomColor: COLOR.LIGHT_GRAY,
+                color: COLOR.TEXT,
+                ':last-of-type': {
+                    borderBottom: 'none',
+                    borderBottomRightRadius: '4px',
+                    borderBottomLeftRadius: '4px',
+                },
+                ':first-of-type': {
+                    borderTopRightRadius: '4px',
+                    borderTopLeftRadius: '4px',
+                },
+                ':hover': {
+                    backgroundColor: COLOR.EXTRA_EXTRA_LIGHT_GRAY,
+                },
+            } }, { children: renderOption({
+                option,
+                selected: selected === option.value,
+                focused: focused === option.value,
+            }) }), option.value))) })));
+}
+export const ListBox = React.forwardRef(ListBoxInner);

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Markdown } from '.';
+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 CustomizeImages: Story;
+export declare const CustomHtmlSanitize: Story;
+export declare const NoHtml: Story;

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_ALLOWED_ATTRIBUTES, DEFAULT_ALLOWED_TAGS, Markdown } from '.';
+const meta = {
+    title: 'Elements/Markdown',
+    component: Markdown,
+    tags: ['autodocs'],
+};
+const sampleParagraph = `
+Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies
+mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat
+imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl
+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*
+
+# Image
+![Tux, the Linux mascot](https://www.markdownguide.org/assets/images/tux.png)
+
+# Heading 1
+${sampleParagraph}
+
+${sampleParagraph}
+
+## Heading 2
+${sampleParagraph}
+
+### Heading 3 
+${sampleParagraph}
+
+#### Heading 4
+${sampleParagraph}
+
+##### Heading 5
+${sampleParagraph}
+
+###### Heading 6
+${sampleParagraph}
+
+- List item 1
+- List item 2
+  - List item 2.1
+  - List item 2.2
+
+1. List item 1
+2. List item 2
+3. List item 3
+`;
+export const Default = {
+    render: (args) => _jsx(Markdown, Object.assign({}, args)),
+    args: {
+        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 CustomizeImages = {
+    render: (args) => _jsx(Markdown, Object.assign({}, args, { imageStyles: { width: '200px' } })),
+    args: {
+        content: startingContent,
+    },
+};
+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.d.ts

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

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+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*
+
+# Image
+![Tux, the Linux mascot](https://www.markdownguide.org/assets/images/tux.png)
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3 
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+- List item 1
+- List item 2
+  - List item 2.1
+  - List item 2.2
+
+1. List item 1
+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 }));
+        expect(getByRole('heading', {
+            name: 'Heading 1',
+            level: 1,
+        })).toBeInTheDocument();
+        expect(getByRole('heading', {
+            name: 'Heading 2',
+            level: 2,
+        })).toBeInTheDocument();
+        expect(getByRole('heading', {
+            name: 'Heading 3',
+            level: 3,
+        })).toBeInTheDocument();
+        expect(getByRole('heading', {
+            name: 'Heading 4',
+            level: 4,
+        })).toBeInTheDocument();
+        expect(getByRole('heading', {
+            name: 'Heading 5',
+            level: 5,
+        })).toBeInTheDocument();
+        expect(getByRole('heading', {
+            name: 'Heading 6',
+            level: 6,
+        })).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

@@ -0,0 +1,21 @@
+/// <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;
+    imageStyles?: React.CSSProperties;
+    sanitizeHtmlOptions?: {
+        allowedTags?: string[];
+        allowedIframeDomains?: string[];
+        allowedAttributes?: sanitizeHtml.IOptions['allowedAttributes'];
+    };
+}>;
+export declare const Markdown: React.FC<MarkdownProps>;
+export {};

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

@@ -0,0 +1,75 @@
+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 "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]: {
+        mt: 0,
+    },
+};
+const paragraphStyles = {
+    mt: 4,
+    [firstChildAltSelector]: {
+        mt: 0,
+    },
+};
+export const Markdown = (_a) => {
+    var { content, enableHtml, sanitizeHtmlOptions, imageStyles } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions", "imageStyles"]);
+    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 }))),
+                h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, sx: headingStyles, "aria-level": 4 }))),
+                h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, sx: headingStyles, "aria-level": 5 }))),
+                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 } })),
+                li: (_a) => {
+                    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)),
+                img: (props) => _jsx("img", Object.assign({}, props, { style: imageStyles })),
+            } }, { children: sanitizedContent })) })));
+};

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

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

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchIcon from '@mui/icons-material/Search';
+import { PILL_SIZE, PILL_TYPE, Pill } from '.';
+import { GROUP_TYPE, Group } from '../Group';
+import { HEADING_SIZE, Heading } from '../text/Heading';
+import { Column } from '../layout/Column';
+import { Row } from '../layout/Row';
+const meta = {
+    title: 'Elements/Pill',
+    component: Pill,
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { size: PILL_SIZE.LG, label: 'Large' },
+    { size: PILL_SIZE.SM, label: 'Small' },
+];
+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.MD }, { children: size.label })), _jsxs(Row, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE }))] }))] })))) })),
+    args: {
+        type: PILL_TYPE.DEFAULT,
+        children: 'Virtual Event',
+        onClick: () => console.log('clicked'),
+    },
+};
+export const Icon = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsxs(Row, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 }, icon: SearchIcon })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE, icon: SearchIcon }))] }))] })))) })),
+    args: {
+        type: PILL_TYPE.DEFAULT,
+        children: 'Virtual Event',
+        onClick: () => console.log('clicked'),
+    },
+};
+export const NoAction = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsxs(Row, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE }))] }))] })))) })),
+    args: {
+        type: PILL_TYPE.DEFAULT,
+        children: 'Virtual Event',
+    },
+};

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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { Pill } from '.';
+import { fireEvent } from '@testing-library/react';
+import { vitest } from 'vitest';
+describe('Pill', () => {
+    it('renders children', () => {
+        const { getByText } = render(_jsx(Pill, { children: "Test" }));
+        expect(getByText('Test')).toBeInTheDocument();
+    });
+    it('responds to onClick handler', () => {
+        const onClick = vitest.fn();
+        const { getByRole } = render(_jsx(Pill, { onClick: onClick }));
+        const button = getByRole('button');
+        fireEvent.click(button);
+        expect(onClick).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { COLOR } from '../../../theme/colors';
+export declare enum PILL_SIZE {
+    SM = "sm",
+    LG = "lg"
+}
+export declare enum PILL_TYPE {
+    DEFAULT = "default",
+    OUTLINE = "outline"
+}
+export declare const Pill: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLButtonElement>, "children" | "onChange"> & {
+    size?: PILL_SIZE | undefined;
+    type?: PILL_TYPE | undefined;
+    color?: COLOR | undefined;
+    icon?: React.FC<any> | undefined;
+} & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;