@ndlib/component-library 1.0.41 → 1.0.42

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

@@ -0,0 +1,81 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { BOX_SHADOW } from '../../../theme';
+import { autoPlacement, offset, size, useFloating } from '@floating-ui/react';
+import { BoxV2 } from '../BoxV2';
+import { useUniqueId } from '../../providers/uniqueIds';
+import { Z_INDEX } from '../../../theme/custom';
+import { COLOR, colors } from '../../../theme/colors';
+export const OverlayV2 = (props) => (_jsx(BoxV2, Object.assign({}, props, { sx: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: Z_INDEX.ELEVATED,
+    } })));
+export const DropdownV2 = (_a) => {
+    var { renderAnchor, renderDropdown, matchWidth, shouldRenderDropdownContainer = true, allowedPlacements = ['top-start', 'bottom-start', 'top-end', 'bottom-end'], sx } = _a, rest = __rest(_a, ["renderAnchor", "renderDropdown", "matchWidth", "shouldRenderDropdownContainer", "allowedPlacements", "sx"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
+    const [dropdownMaxWidth, setDropdownMaxWidth] = useState();
+    const dropdownId = useUniqueId('dropdown');
+    const anchorId = useUniqueId('dropdown-anchor');
+    const { refs, floatingStyles } = useFloating({
+        placement: 'bottom-start',
+        middleware: [
+            offset(2),
+            size({
+                apply({ rects }) {
+                    setDropdownMinWidth(`${rects.reference.width}px`);
+                    if (matchWidth) {
+                        setDropdownMaxWidth(`${rects.reference.width}px`);
+                    }
+                },
+            }),
+            autoPlacement({
+                allowedPlacements,
+            }),
+        ],
+    });
+    const dropdownBoxStyles = Object.assign(Object.assign({}, floatingStyles), { minWidth: dropdownMinWidth, maxWidth: dropdownMaxWidth, zIndex: Z_INDEX.DIALOG, backgroundColor: colors[COLOR.WHITE], boxShadow: BOX_SHADOW.NORMAL });
+    const onClick = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
+    const dropdownAnchorProps = useMemo(() => ({
+        id: anchorId,
+        'aria-haspopup': true,
+        'aria-expanded': isOpen,
+        'aria-owns': dropdownId,
+        ref: refs.setReference,
+        onClick,
+    }), [refs, onClick, anchorId, isOpen, dropdownId]);
+    return (_jsxs(BoxV2, Object.assign({ sx: sx }, rest, { children: [renderAnchor({
+                anchorProps: dropdownAnchorProps,
+                isOpen,
+                setIsOpen,
+            }), isOpen && (_jsxs(_Fragment, { children: [shouldRenderDropdownContainer ? (_jsx("div", Object.assign({ id: dropdownId, ref: refs.setFloating, style: dropdownBoxStyles }, { children: renderDropdown({
+                            styles: dropdownBoxStyles,
+                            ref: refs.setFloating,
+                            setIsOpen,
+                            isOpen,
+                            id: dropdownId,
+                        }) }))) : (renderDropdown({
+                        styles: dropdownBoxStyles,
+                        ref: refs.setFloating,
+                        isOpen,
+                        setIsOpen,
+                        id: dropdownId,
+                    })), _jsx(OverlayV2, { onClick: () => setIsOpen(false) })] }))] })));
+};

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BoldV2, ItalicV2 } from '.';
+import { ParagraphV2 } from '../ParagraphV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/InlineV2',
+    component: BoldV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(ParagraphV2, { children: ["Text with ", _jsx(BoldV2, { children: "bold content" }), " and", ' ', _jsx(ItalicV2, { children: "italic content" })] })),
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+type InlineV2Props = StyledElementPropsV2<HTMLSpanElement>;
+export declare const BoldV2: React.FC<InlineV2Props>;
+export declare const ItalicV2: React.FC<InlineV2Props>;
+export {};

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

@@ -0,0 +1,23 @@
+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 { processSx } from '../../../utils/processSx';
+export const BoldV2 = (_a) => {
+    var { sx } = _a, rest = __rest(_a, ["sx"]);
+    const processedStyles = processSx(sx);
+    return (_jsx("span", Object.assign({ style: Object.assign({ fontWeight: 'bold' }, processedStyles) }, rest)));
+};
+export const ItalicV2 = (_a) => {
+    var { sx } = _a, rest = __rest(_a, ["sx"]);
+    const processedStyles = processSx(sx);
+    return (_jsx("span", Object.assign({ style: Object.assign({ fontStyle: 'italic' }, processedStyles) }, rest)));
+};

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ListV2 } from '.';
+declare const meta: Meta<typeof ListV2>;
+export default meta;
+type Story = StoryObj<typeof ListV2>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Ordered: Story;
+export declare const CustomIcon: Story;
+export declare const CustomIconPerItem: Story;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
+import { LISTV2_SIZE, ListV2, ListItemV2 } from '.';
+import { RowV2 } from '../RowV2';
+import { ColumnV2 } from '../ColumnV2';
+import { HEADINGV2_SIZE, HeadingV2 } from '../HeadingV2';
+import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
+import { COLOR } from '../../../theme/colors';
+import { FONT_SIZE } from '../../../theme/typography';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/ListV2',
+    component: ListV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, { children: [_jsx(ListItemV2, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItemV2, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsxs(ListItemV2, Object.assign({ index: 2 }, { children: ["List Item 3", _jsxs(ListV2, { children: [_jsx(ListItemV2, Object.assign({ index: 0 }, { children: "List Item 3.1" })), _jsx(ListItemV2, Object.assign({ index: 1 }, { children: "List Item 3.2" }))] })] }))] }) })),
+};
+const sizes = [
+    { size: LISTV2_SIZE.LG, label: 'Large' },
+    { size: LISTV2_SIZE.MD, label: 'Medium' },
+    { size: LISTV2_SIZE.SM, label: 'Small' },
+];
+export const Sizes = {
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size, i) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION, sx: { mt: 3 } }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(RowV2, Object.assign({ sx: { mt: 2 } }, { children: _jsxs(ListV2, Object.assign({ size: size.size }, { children: [_jsx(ListItemV2, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItemV2, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItemV2, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) }))] }), i))) })),
+};
+export const Ordered = {
+    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, Object.assign({ icon: ChevronRightIcon, ordered: true }, { children: [_jsx(ListItemV2, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItemV2, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItemV2, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) })),
+};
+export const CustomIcon = {
+    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, Object.assign({ icon: ChevronRightIcon, iconColor: COLOR.PRIMARY }, { children: [_jsx(ListItemV2, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItemV2, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItemV2, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) })),
+};
+export const CustomIconPerItem = {
+    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, Object.assign({ iconSize: FONT_SIZE.ML }, { children: [_jsx(ListItemV2, Object.assign({ index: 0, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Unfavorite" }, { children: "Favorite 1" })), _jsx(ListItemV2, Object.assign({ index: 1, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Favorite" }, { children: "Favorited 2" })), _jsx(ListItemV2, Object.assign({ index: 2, icon: BookmarkBorderIcon, onIconClick: () => { }, iconLabel: "Favorite" }, { children: "Not Favorited" }))] })) })),
+};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+import { FONT_SIZE } from '../../../theme/typography';
+type ListV2Props = StyledElementPropsV2<HTMLUListElement, {
+    ordered?: boolean;
+    size?: LISTV2_SIZE;
+    icon?: React.FC<any>;
+    iconColor?: COLOR;
+    iconSize?: FONT_SIZE;
+}>;
+export declare enum LISTV2_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const ListV2: React.FC<ListV2Props>;
+type ListItemV2Props = StyledElementPropsV2<HTMLLIElement, {
+    index: number;
+    icon?: React.FC<any>;
+    iconSize?: FONT_SIZE;
+    iconColor?: COLOR;
+    iconLabel?: string;
+    onIconClick?: () => void;
+}>;
+export declare const ListItemV2: React.FC<ListItemV2Props>;
+export {};

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

@@ -0,0 +1,102 @@
+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 "react/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 } from '../../../theme/colors';
+import { FONT_SIZE, TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../theme/typography';
+import { IconV2 } from '../IconV2';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import { useLinesHeightV2 } from '../ReadMoreV2';
+import { ColumnV2 } from '../ColumnV2';
+import { LabelV2 } from '../LabelV2';
+import { processSx } from '../../../utils/processSx';
+import { BoxV2 } from '../BoxV2';
+const CircleIcon = importedDefaultComponentShim(_CircleIcon);
+const CircleOutlinedIcon = importedDefaultComponentShim(_CircleOutlinedIcon);
+const SquareIcon = importedDefaultComponentShim(_SquareIcon);
+const SquareOutlinedIcon = importedDefaultComponentShim(_SquareOutlinedIcon);
+export var LISTV2_SIZE;
+(function (LISTV2_SIZE) {
+    LISTV2_SIZE["SM"] = "sm";
+    LISTV2_SIZE["MD"] = "md";
+    LISTV2_SIZE["LG"] = "lg";
+})(LISTV2_SIZE || (LISTV2_SIZE = {}));
+const marginSizeMap = {
+    [LISTV2_SIZE.SM]: '0.5rem',
+    [LISTV2_SIZE.MD]: '0.75rem',
+    [LISTV2_SIZE.LG]: '1rem',
+};
+const iconSizeMap = {
+    [LISTV2_SIZE.SM]: FONT_SIZE.XXS,
+    [LISTV2_SIZE.MD]: FONT_SIZE.XXS,
+    [LISTV2_SIZE.LG]: FONT_SIZE.XS,
+};
+const defaultIcons = [
+    CircleIcon,
+    CircleOutlinedIcon,
+    SquareIcon,
+    SquareOutlinedIcon,
+];
+const sizeTypographyMap = {
+    [LISTV2_SIZE.SM]: TYPOGRAPHY_TYPE.CONDENSED_TEXT_SMALL,
+    [LISTV2_SIZE.MD]: TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM,
+    [LISTV2_SIZE.LG]: TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE,
+};
+const ListConfigContext = React.createContext({
+    size: LISTV2_SIZE.MD,
+    ordered: false,
+    icon: CircleIcon,
+    iconColor: COLOR.TEXT,
+    iconSize: undefined,
+    depth: -1,
+});
+const useListConfig = () => React.useContext(ListConfigContext);
+export const ListV2 = ({ 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 || LISTV2_SIZE.MD;
+    const iconSize = iconSizeParam || parentIconSize || iconSizeMap[size];
+    const iconColor = iconColorParam || parentIconColor || COLOR.TEXT;
+    const processedStyles = processSx(Object.assign(Object.assign({}, defaultStyles), sx));
+    return (_jsx(ListConfigContext.Provider, Object.assign({ value: {
+            size,
+            icon: icon || defaultIcon,
+            iconColor,
+            iconSize,
+            ordered: ordered || false,
+            depth,
+        } }, { children: ordered ? (_jsx("ul", Object.assign({ style: processedStyles }, { children: children }))) : (_jsx("ol", Object.assign({ style: processedStyles }, { children: children }))) })));
+};
+export const ListItemV2 = (_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 icon = iconParam || listIcon;
+    const iconSize = iconSizeParam || listIconSize;
+    const iconColor = iconColorParam || listIconColor;
+    const typography = sizeTypographyMap[size];
+    const typographyStyles = getTypographyStyles(sizeTypographyMap[size]);
+    const lineHeight = useLinesHeightV2({ typography, lines: 1 });
+    const tabIndex = tabIndexParam || (onClick ? 0 : undefined);
+    const processedStyles = processSx(Object.assign(Object.assign({}, sx), typographyStyles));
+    return (_jsxs("li", Object.assign({ style: Object.assign({ display: 'flex', marginTop: index === 0 && depth === 0 ? 0 : marginSizeMap[size], marginLeft: '0.25rem' }, processedStyles), tabIndex: tabIndex }, rest, { children: [ordered ? (_jsxs(LabelV2, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(ColumnV2, Object.assign({ sx: { height: lineHeight }, justify: "center" }, { children: _jsx(IconV2, { icon: icon, color: iconColor, size: iconSize, onClick: onIconClick, "aria-label": iconLabel, sx: {
+                        mr: 3,
+                        alignItems: 'flex-start',
+                    } }) }))), _jsx(BoxV2, Object.assign({ style: {
+                    cursor: onClick ? 'pointer' : 'default',
+                } }, { children: children }))] })));
+};

package/dist/components/elements/MarkdownV2/MarkdownV2.module.css

@@ -0,0 +1,39 @@
+.markdownWrapper p:first-of-type:not(style):not(:first-of-type ~ *),
+.markdownWrapper style + p {
+  margin-top: 0 !important;
+}
+
+.markdownWrapper h1:first-of-type:not(style):not(:first-of-type ~ *),
+.markdownWrapper style + h1 {
+  margin-top: 0 !important;
+}
+
+.markdownWrapper h2:first-of-type:not(style):not(:first-of-type ~ *),
+.markdownWrapper style + h2 {
+  margin-top: 0 !important;
+}
+
+.markdownWrapper h3:first-of-type:not(style):not(:first-of-type ~ *),
+.markdownWrapper style + h3 {
+  margin-top: 0 !important;
+}
+
+.markdownWrapper h4:first-of-type:not(style):not(:first-of-type ~ *),
+.markdownWrapper style + h4 {
+  margin-top: 0 !important;
+}
+
+.markdownWrapper h5:first-of-type:not(style):not(:first-of-type ~ *),
+.markdownWrapper style + h5 {
+  margin-top: 0 !important;
+}
+
+.markdownWrapper h6:first-of-type:not(style):not(:first-of-type ~ *),
+.markdownWrapper style + h6 {
+  margin-top: 0 !important;
+}
+
+.markdownWrapper blockquote:first-of-type:not(style):not(:first-of-type ~ *),
+.markdownWrapper style + blockquote {
+  margin-top: 0 !important;
+}

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MarkdownV2 } from '.';
+declare const meta: Meta<typeof MarkdownV2>;
+export default meta;
+type Story = StoryObj<typeof MarkdownV2>;
+export declare const Default: Story;
+export declare const WithHTML: Story;
+export declare const CustomizeImages: Story;
+export declare const CustomizeStyles: Story;
+export declare const NoHtml: Story;

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

@@ -0,0 +1,130 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MarkdownV2 } from '.';
+import { FONT_WEIGHT } from '../../../theme/typography';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/MarkdownV2',
+    component: MarkdownV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+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 2
+${sampleParagraph}
+
+${sampleParagraph}
+
+## Heading 3
+${sampleParagraph}
+
+### Heading 4
+${sampleParagraph}
+
+#### Heading 5
+${sampleParagraph}
+
+##### Heading 6
+${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
+
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. [block quote link](test.com)
+
+![Tux, the Linux mascot!!inline](https://www.markdownguide.org/assets/images/tux.png)
+
+An inline images should appear to the right of this paragraph
+
+
+https://this-should-be-auto-linked.nd.edu
+
+While Gura says that the exhibit was inspired by the themes of the Medieval conference and will appeal to its attendees, the displays are curated to interest Notre Dame students and faculty across various disciplines, as well as the general public.
+
+“I'm trying to pick items to tell a story that viewers can appreciate on different levels at the same time,” he said.
+
+To tell that story, Gura decided to give each of the seven cases housing this exhibit a theme.
+
+> “I think it's an exciting way to create a journey through time and space using the objects themselves as the primary storyteller,” he said. [test](test.com) “They will drive the narrative from case to case. You can be exposed to different things that the average person never really thought about.”
+`;
+export const Default = {
+    render: (args) => _jsx(MarkdownV2, Object.assign({}, args)),
+    args: {
+        content: startingContent,
+    },
+};
+const htmlContent = `
+## HTML Content
+<p style='color: red;'>hello world </p>
+
+https://www.youtube.com/embed/dQw4w9WgXcQ?si=mzI8wJ8NkHgn9RUy
+
+> Block quote [block quote link](test.com)
+
+<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>
+${startingContent}
+`;
+export const WithHTML = {
+    render: (args) => _jsx(MarkdownV2, Object.assign({}, args)),
+    args: {
+        content: htmlContent,
+        enableHtml: true,
+    },
+};
+export const CustomizeImages = {
+    render: (args) => _jsx(MarkdownV2, Object.assign({}, args, { imageStyles: { width: '200px' } })),
+    args: {
+        content: startingContent,
+    },
+};
+export const CustomizeStyles = {
+    render: (args) => (_jsx(MarkdownV2, Object.assign({}, args, { customStyles: {
+            p: {
+                fontWeight: FONT_WEIGHT.BOLD,
+            },
+            h2: {
+                color: COLOR.SECONDARY,
+            },
+        } }))),
+    args: {
+        content: startingContent,
+    },
+};
+export const NoHtml = {
+    render: (args) => _jsx(MarkdownV2, Object.assign({}, args)),
+    args: {
+        content: htmlContent,
+    },
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { StyledElementPropsV2, StylesPropV2 } from '../../../theme';
+type MarkdownV2Props = StyledElementPropsV2<HTMLDivElement, {
+    content: string;
+    enableHtml?: boolean;
+    imageStyles?: React.CSSProperties;
+    headingLevelOffset?: number;
+    customStyles?: Record<string, StylesPropV2>;
+}>;
+export declare const MarkdownV2: React.FC<MarkdownV2Props>;
+export {};

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

@@ -0,0 +1,123 @@
+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 { ListV2, ListItemV2 } from '../ListV2';
+import { ParagraphV2 } from '../ParagraphV2';
+import { HEADINGV2_SIZE, HeadingV2 } from '../HeadingV2';
+import { BoldV2, ItalicV2 } from '../InlineV2';
+import remarkGfm from 'remark-gfm';
+import { BlockQuoteV2 } from '../BlockQuoteV2';
+import { CaptionV2 } from '../CaptionV2';
+import { sanitizeHtml } from '../../../utils/sanitizeHtml';
+import * as styles from './MarkdownV2.module.css';
+import clsx from 'clsx';
+const typeSafeStyles = styles;
+const parseBlockquotes = (content) => {
+    const contentArray = content.split('\n');
+    const newContent = [];
+    let isAddingBlockquote = false;
+    for (const line of contentArray) {
+        if (line.startsWith('> ') && !isAddingBlockquote) {
+            const newLine = line.replace('> ', '');
+            newContent.push(`<blockquote>${newLine}`);
+            isAddingBlockquote = true;
+        }
+        else if (line.startsWith('> ') && isAddingBlockquote) {
+            newContent.push(line.replace('> ', ''));
+        }
+        else if (isAddingBlockquote) {
+            newContent.push(`</blockquote>\n\n${line}`);
+            isAddingBlockquote = false;
+        }
+        else {
+            newContent.push(line);
+        }
+    }
+    if (isAddingBlockquote) {
+        newContent.push('</blockquote>');
+    }
+    let newString = newContent.join('\n');
+    const blockquoteRegex = /<blockquote>(.*?)<\/blockquote>/g;
+    const blockquotes = newString.match(blockquoteRegex);
+    blockquotes === null || blockquotes === void 0 ? void 0 : blockquotes.forEach((blockquote) => {
+        const linkRegex = /\[(.*?)\]\((.*?)\)/g;
+        const links = blockquote.match(linkRegex);
+        let newBlockquote = blockquote;
+        links === null || links === void 0 ? void 0 : links.forEach((link) => {
+            const newLink = link.replace(/\[(.*?)\]\((.*?)\)/, '<a href="$2">$1</a>');
+            newBlockquote = newBlockquote.replace(link, newLink);
+        });
+        newString = newString.replace(blockquote, newBlockquote);
+    });
+    return newString;
+};
+const youtubeRegex = /^(?:https?:\/\/)?(?:www\.)?youtube\.com/;
+const pullOutVideos = (content) => {
+    const lines = content.split('\n');
+    const mapped = lines.map((line) => {
+        const lineText = line.trim();
+        if (youtubeRegex.test(lineText)) {
+            return `<iframe src="${lineText}" width="560" height="315" style="margin-top:24px;"></iframe>`;
+        }
+        else {
+            return line;
+        }
+    });
+    return mapped.join('\n');
+};
+export const MarkdownV2 = (_a) => {
+    var { content, enableHtml, imageStyles, customStyles = {}, headingLevelOffset = 1, className } = _a, rest = __rest(_a, ["content", "enableHtml", "imageStyles", "customStyles", "headingLevelOffset", "className"]);
+    let sanitizedContent = content;
+    if (enableHtml) {
+        sanitizedContent = parseBlockquotes(content);
+        sanitizedContent = pullOutVideos(sanitizedContent);
+        sanitizedContent = sanitizeHtml(sanitizedContent);
+    }
+    const slugify = (text) => {
+        return (text
+            .toString()
+            .toLowerCase()
+            .trim()
+            .replace(/\s+/g, '-')
+            .replace(/[^\w\-]+/g, '')
+            .replace(/--+/g, '-')
+            .replace(/^-+/, '')
+            .replace(/-+$/, ''));
+    };
+    return (_jsx("div", Object.assign({ className: clsx(typeSafeStyles.markdownWrapper, className) }, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw, remarkGfm] : [remarkGfm], components: {
+                h1: (props) => (_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: customStyles.h1 }))),
+                h2: (props) => (_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: customStyles.h2 }))),
+                h3: (props) => (_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: customStyles.h3 }))),
+                h4: (props) => (_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.SM }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: customStyles.h4 }))),
+                h5: (props) => (_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.SM }, props, { standalone: true, id: slugify(props.children.toString()), level: props.level + headingLevelOffset, sx: customStyles.h5 }))),
+                h6: (props) => (_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.SM }, props, { standalone: true, id: slugify(props.children.toString()), level: props.level + headingLevelOffset, sx: customStyles.h6 }))),
+                code: (props) => _jsx(CaptionV2, Object.assign({}, props)),
+                ol: (props) => (_jsx(ListV2, Object.assign({}, props, { ordered: true, sx: Object.assign({ mt: 4 }, customStyles.ol) }))),
+                ul: (props) => (_jsx(ListV2, Object.assign({}, props, { sx: Object.assign({ mt: 4 }, customStyles.ul) }))),
+                li: (_a) => {
+                    var { index, ordered } = _a, props = __rest(_a, ["index", "ordered"]);
+                    return (_jsx(ListItemV2, Object.assign({ index: index }, props, { sx: customStyles.li })));
+                },
+                p: (props) => (_jsx(ParagraphV2, Object.assign({}, props, { sx: Object.assign({ fontSize: 'inherit' }, customStyles.p) }))),
+                strong: (props) => _jsx(BoldV2, Object.assign({}, props, { sx: customStyles.strong })),
+                em: (props) => _jsx(ItalicV2, Object.assign({}, props, { sx: customStyles.em })),
+                img: (props) => {
+                    const alt = props.alt || '';
+                    const inlineStyles = {};
+                    const styles = Object.assign(Object.assign({}, inlineStyles), imageStyles);
+                    return _jsx("img", Object.assign({}, props, { style: styles, alt: alt }));
+                },
+                blockquote: (props) => (_jsx(BlockQuoteV2, Object.assign({}, props, { sx: Object.assign({ my: 5 }, customStyles.blockquote) }))),
+            } }, { children: sanitizedContent })) })));
+};

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

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