@ndlib/component-library 1.0.41 → 1.0.43

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;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MonthPickerV2 } from '.';
+import { BoxV2 } from '../BoxV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/Fields/MonthPickerV2',
+    component: MonthPickerV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const StatefulMonthPickerV2 = (props) => {
+    const [date, setDate] = useState(new Date());
+    return _jsx(MonthPickerV2, Object.assign({}, props, { value: date, onChange: setDate }));
+};
+export const Default = {
+    render: () => (_jsx(BoxV2, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPickerV2, {}) }))),
+};
+export const Inline = {
+    argTypes: {
+        backgroundColor: {
+            options: ['blue', 'gold', 'green', 'red'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        const { backgroundColor } = args;
+        return (_jsx(BoxV2, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPickerV2, { backgroundColor: backgroundColor, inline: true }) })));
+    },
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInputV2Props } from '../TextInputV2';
+import { BoxV2Props } from '../BoxV2';
+export declare const MonthPickerV2: React.FC<{
+    value: Date;
+    onChange: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    inline?: boolean;
+    backgroundColor?: string;
+    inputProps?: Partial<TextInputV2Props>;
+    wrapperProps?: BoxV2Props;
+}>;

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

@@ -0,0 +1,26 @@
+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 _ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInputV2 } from '../TextInputV2';
+import { InputWrapperV2 } from '../DatePickerV2';
+import { BoxV2 } from '../BoxV2';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
+const PermissiveTextInputV2 = TextInputV2;
+export const MonthPickerV2 = (_a) => {
+    var { value, inputProps, backgroundColor, wrapperProps } = _a, rest = __rest(_a, ["value", "inputProps", "backgroundColor", "wrapperProps"]);
+    if (!backgroundColor)
+        backgroundColor = 'blue';
+    return (_jsx(BoxV2, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: `ndlib-date-picker ndlib-date-picker-${backgroundColor}`, selected: value, customInput: _jsx(InputWrapperV2, { children: _jsx(PermissiveTextInputV2, Object.assign({}, inputProps)) }), showMonthYearPicker: true }, rest)) })));
+};

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

@@ -0,0 +1,29 @@
+.pillButton {
+  border-radius: 1000px;
+  border: solid 1px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.pillButton.clickable:hover {
+  box-shadow: 0 0 8px #dfdfdf;
+  transform: scale(1.03);
+}
+
+.pillButton.clickable:focus {
+  box-shadow: 0 0 8px #dfdfdf;
+  transform: scale(1.03);
+  outline: 2px solid var(--ndBlueBright);
+  outline-offset: 2px;
+}
+
+.pillContent {
+  flex-grow: 1;
+  justify-content: flex-start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: start;
+}

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

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

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchIcon from '@mui/icons-material/Search';
+import { PILLV2_SIZE, PILLV2_TYPE, PillV2 } from '.';
+import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
+import { HEADINGV2_SIZE, HeadingV2 } from '../HeadingV2';
+import { ColumnV2 } from '../ColumnV2';
+import { RowV2 } from '../RowV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/PillV2',
+    component: PillV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const sizes = [
+    { size: PILLV2_SIZE.LG, label: 'Large' },
+    { size: PILLV2_SIZE.SM, label: 'Small' },
+];
+export const Default = {
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsxs(RowV2, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(PillV2, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(PillV2, Object.assign({}, args, { size: size.size, type: PILLV2_TYPE.OUTLINE }))] }))] })))) })),
+    args: {
+        type: PILLV2_TYPE.DEFAULT,
+        children: 'Virtual Event',
+        onClick: () => console.log('clicked'),
+    },
+};
+export const Icon = {
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsxs(RowV2, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(PillV2, Object.assign({}, args, { size: size.size, sx: { mr: 1 }, icon: SearchIcon })), _jsx(PillV2, Object.assign({}, args, { size: size.size, type: PILLV2_TYPE.OUTLINE, icon: SearchIcon }))] }))] })))) })),
+    args: {
+        type: PILLV2_TYPE.DEFAULT,
+        children: 'Virtual Event',
+        onClick: () => console.log('clicked'),
+    },
+};
+export const NoAction = {
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsxs(RowV2, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(PillV2, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(PillV2, Object.assign({}, args, { size: size.size, type: PILLV2_TYPE.OUTLINE }))] }))] })))) })),
+    args: {
+        type: PILLV2_TYPE.DEFAULT,
+        children: 'Virtual Event',
+    },
+};

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

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