@ndlib/component-library 1.0.30 → 1.0.42

package/README.md

@@ -78,6 +78,22 @@ Dependencies must be installed before storybook can be started. Dependencies can
 
 To build and deploy your storybook locally for development, run `yarn start`
 
+## Testing locally
+
+If you wish to test your changes locally in another project that uses the component library, use the following steps:
+
+1. Run `yarn build`
+2. Enter `pwd` in the terminal to generate the path where the component library is located on your machine
+3. In the package.json of the project you wish to test the locally modified component library in, replace the version of the component library with `"file:///<PATH>"`
+4. Run `yarn install` or `npm run install`
+
+If you need to make a change in the component library and test again:
+
+1. Rerun `yarn build` in the component library
+2. In your other project, change the package.json to use the version number again instead of the path
+3. Run `yarn install` or `npm run install` again
+4. Change the version back to the path, and run `yarn install` or `npm run install` again
+
 ## Deploying Storybook
 
 Whenever a commit is added to the main branch, the contents of the `/docs` folder will be deployed to our Github pages site.

package/dist/components/elements/AlertsV2/AlertV2.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AlertV2 } from '.';
+declare const meta: Meta<typeof AlertV2>;
+export default meta;
+type Story = StoryObj<typeof AlertV2>;
+export declare const Default: Story;
+export declare const InformationalAlert: Story;
+export declare const YellowAlert: Story;
+export declare const WarningAlert: Story;
+export declare const SuccessAlert: Story;

package/dist/components/elements/AlertsV2/AlertV2.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertV2 } from '.';
+import { ALERT_TYPE } from '../../providers/alerts';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/AlertV2',
+    component: AlertV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+export const Default = {
+    render: (args) => _jsx(AlertV2, Object.assign({}, args)),
+    args: {
+        title: 'Informational Alert',
+        type: ALERT_TYPE.INFORMATIONAL,
+        description: 'This is an informational alert',
+    },
+};
+export const InformationalAlert = {
+    render: (args) => _jsx(AlertV2, Object.assign({}, args)),
+    args: {
+        title: 'Informational Alert',
+        type: ALERT_TYPE.INFORMATIONAL,
+        description: 'This is an informational alert',
+    },
+};
+export const YellowAlert = {
+    render: (args) => _jsx(AlertV2, Object.assign({}, args)),
+    args: {
+        title: 'Informational - Yellow Alert',
+        type: ALERT_TYPE.INFORMATIONAL_YELLOW,
+        description: 'This is an informational yellow alert',
+    },
+};
+export const WarningAlert = {
+    render: (args) => _jsx(AlertV2, Object.assign({}, args)),
+    args: {
+        title: 'Warning Alert',
+        type: ALERT_TYPE.WARNING,
+        description: 'This is a warning alert',
+    },
+};
+export const SuccessAlert = {
+    render: (args) => _jsx(AlertV2, Object.assign({}, args)),
+    args: {
+        title: 'Success Alert',
+        type: ALERT_TYPE.SUCCESS,
+        description: 'This is a success alert',
+    },
+};

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

@@ -0,0 +1,49 @@
+.alertWrapper {
+  border-width: 2px;
+  border-style: solid;
+  margin: 0;
+  padding: 1rem;
+  box-shadow: 0 0 8px #dfdfdf;
+}
+
+.alertWrapper[data-alert-type='Informational'] {
+  background-color: var(--alertInformationalBg);
+  border-color: var(--alertInformationalBorder);
+}
+
+.alertWrapper[data-alert-type='Informational_Yellow'] {
+  background-color: var(--alertInformationalYellowBg);
+  border-color: var(--alertInformationalYellowBorder);
+}
+
+.alertWrapper[data-alert-type='Warning'] {
+  background-color: var(--alertWarningBg);
+  border-color: var(--alertWarningBorder);
+}
+
+.alertWrapper[data-alert-type='Success'] {
+  background-color: var(--alertSuccessBg);
+  border-color: var(--alertSuccessBorder);
+}
+
+.alertInnerWrapper {
+  box-sizing: border-box;
+  margin: 0 auto;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  width: 100%;
+}
+
+.icon {
+  margin-right: 1rem;
+  font-size: 1.75rem;
+}
+
+.markdownWrapper {
+  flex-grow: 1;
+  justify-content: center;
+}
+
+.button {
+  margin-left: 1rem;
+}

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

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

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertsV2 } from '.';
+import { AlertsProvider } from '../../providers/alerts';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/AlertsV2',
+    component: AlertsV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(AlertsProvider, Object.assign({ startTime: new Date('2022-01-01').toISOString(), endTime: new Date('2022-01-01').toISOString(), endpoint: "http://localhost:1337/graphql" }, { children: _jsx(AlertsV2, {}) }))),
+};
+export const CustomizeAlertStyles = {
+    render: () => (_jsx(AlertsProvider, Object.assign({ startTime: new Date('2022-01-01').toISOString(), endTime: new Date('2022-01-01').toISOString(), endpoint: "http://localhost:1337/graphql" }, { children: _jsx(AlertsV2, { alertStyles: { borderRadius: '0px' } }) }))),
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ALERT_TYPE } from '../../providers/alerts';
+import { StyledElementPropsV2, StylesPropV2 } from '../../../theme';
+type AlertsV2Props = StyledElementPropsV2<HTMLDivElement, {
+    pageAlerts?: string[];
+    alertStyles?: StylesPropV2;
+}>;
+export declare const AlertsV2: React.FC<AlertsV2Props>;
+type AlertV2Props = StyledElementPropsV2<HTMLDivElement, {
+    type: ALERT_TYPE;
+    description: string;
+    dismiss: () => void;
+}>;
+export declare const AlertV2: React.FC<AlertV2Props>;
+export {};

package/dist/components/elements/AlertsV2/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, jsxs as _jsxs } from "react/jsx-runtime";
+import _WarningIcon from '@mui/icons-material/Warning';
+import _InfoIcon from '@mui/icons-material/Info';
+import _SuccessIcon from '@mui/icons-material/CheckCircle';
+import { MarkdownV2 } from '../MarkdownV2';
+import { RowV2 } from '../RowV2';
+import { IconV2 } from '../IconV2';
+import { useAlerts, ALERT_TYPE } from '../../providers/alerts';
+import { BUTTONV2_TYPE, ButtonV2 } from '../ButtonV2';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import { BoxV2 } from '../BoxV2';
+import { processSx } from '../../../utils/processSx';
+import * as styles from './AlertsV2.module.css';
+import clsx from 'clsx';
+const typeSafeStyles = styles;
+const WarningIcon = importedDefaultComponentShim(_WarningIcon);
+const InfoIcon = importedDefaultComponentShim(_InfoIcon);
+const SuccessIcon = importedDefaultComponentShim(_SuccessIcon);
+export const AlertsV2 = (_a) => {
+    var { pageAlerts, alertStyles } = _a, rest = __rest(_a, ["pageAlerts", "alertStyles"]);
+    const { alerts, dismiss } = useAlerts(pageAlerts);
+    return (_jsx(BoxV2, Object.assign({}, rest, { children: alerts.map((alert, i) => {
+            const { type, description } = alert;
+            return (_jsx(AlertV2, { type: type, description: description, "data-nosnippet": true, sx: Object.assign({ mt: i ? '4px' : 0 }, alertStyles), dismiss: () => {
+                    dismiss(alert.id);
+                } }, i));
+        }) })));
+};
+export const AlertV2 = (_a) => {
+    var { type = ALERT_TYPE.INFORMATIONAL, description, dismiss, sx } = _a, rest = __rest(_a, ["type", "description", "dismiss", "sx"]);
+    const processedStyles = processSx(sx);
+    const icon = {
+        [ALERT_TYPE.WARNING]: WarningIcon,
+        [ALERT_TYPE.INFORMATIONAL_YELLOW]: InfoIcon,
+        [ALERT_TYPE.INFORMATIONAL]: InfoIcon,
+        [ALERT_TYPE.SUCCESS]: SuccessIcon,
+    }[type];
+    return (_jsx(RowV2, Object.assign({ className: clsx(processedStyles, typeSafeStyles.alertWrapper), "data-alert-type": type }, rest, { children: _jsxs(RowV2, Object.assign({ className: typeSafeStyles.alertInnerWrapper }, { children: [icon && _jsx(IconV2, { icon: icon, className: typeSafeStyles.icon }), _jsx(RowV2, Object.assign({ className: typeSafeStyles.markdownWrapper }, { children: _jsx(MarkdownV2, { content: description }) })), _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.TEXT, onClick: dismiss }, { children: "Dismiss" }))] })) })));
+};

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

@@ -0,0 +1,6 @@
+.blockQuote {
+  margin-left: 1.25rem;
+  border-left: 8px solid var(--ndBlueBright);
+  padding: 1rem;
+  color: var(--gray);
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+export type BlockQuoteV2Props = StyledElementPropsV2<HTMLQuoteElement>;
+export declare const BlockQuoteV2: React.FC<BlockQuoteV2Props>;

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

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import * as styles from './BlockQuoteV2.module.css';
+import { processSx } from '../../../utils/processSx';
+const typeSafeStyles = styles;
+export const BlockQuoteV2 = (_a) => {
+    var { sx } = _a, props = __rest(_a, ["sx"]);
+    const processedStyles = processSx(Object.assign(Object.assign({}, sx), getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_LARGE)));
+    return (_jsx("blockquote", Object.assign({}, props, { className: typeSafeStyles.blockQuote, style: Object.assign({}, processedStyles) })));
+};

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

@@ -0,0 +1,68 @@
+.sharedLink {
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: block;
+  height: 50px;
+  line-height: 50px;
+  overflow: hidden;
+  text-indent: -9999px;
+}
+
+.universityLogo {
+  margin: 0 auto;
+  position: relative;
+  width: 300px;
+
+  @media screen and (min-width: 800px) {
+    left: 12px;
+    margin: 0;
+    position: absolute;
+  }
+
+  @media screen and (min-width: 1212px) {
+    left: 0;
+  }
+}
+
+.provostLogo {
+  display: none;
+
+  @media screen and (min-width: 800px) {
+    display: block;
+    position: absolute;
+    right: 12px;
+    width: 227px;
+  }
+
+  @media screen and (min-width: 1212px) {
+    right: 0;
+  }
+}
+
+.hGroup {
+  background-color: var(--ndProvostBlue);
+  height: 50px;
+  display: block;
+
+  a {
+    color: var(--white);
+    text-decoration: none;
+  }
+}
+
+.navWrapper {
+  display: block;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0;
+  position: relative;
+}
+
+.nav {
+  box-sizing: border-box;
+  display: block;
+  height: 50px;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}

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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BrandingBarV2 } from '.';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/BrandingBarV2',
+    component: BrandingBarV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(BrandingBarV2, {}),
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BrandingBarV2: React.FC;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BoxV2 } from '../BoxV2';
+import * as styles from './BrandingBarV2.module.css';
+import clsx from 'clsx';
+const typeSafeStyles = styles;
+const ProvostImage = 'data:image/png;base64,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';
+const UniversityLogo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlcAAABkCAMAAACclOWcAAAABGdBTUEAALGPC/xhBQAAADNQTFRF////////////////////////////////////////////////////////////AAAA////FbWC9gAAABB0Uk5TcI+vUM8w358gYO8Qf0C/AK6MYRQAAAmFSURBVHja7ZzrlqyqDoVVFOVavv/TbgFFLlGxu/qMM/ae80+v0hJD+AghWqv7QND31cEFELiCwBUEriAIXEHgCgJXEASuIHAFgSsIAlcQuILAFQSBKwhcQeAKgsAVBK4gcAVB4AoCVxC4giBwBYErCFxBELiCwBUEriAIXEHgCgJXEASuIHAFgSsIAlcQuPq/09R1C7wArr5MlR36VQKsfyFXyhjzPLCi/Ar7BgyT3JzVr/rnDRgz/c+s/Zl71de4WuyuwX3U+4fzTuHzvH8cwsc+mcPp5cEtxyH2SZqMvhI2k0iM0Xrej2pB+VaMqxOfk2N9fjcvK/N7jGscz6OD1sRrh0afS+cVQ8Sr3WiV36G03XrbVyvKsbux9iP00b++m+r4mam/sf307KDFdPm1sW5jqRtn1cj1uSWTi1dsdt2VwezFd3825yWml+48OxIMHr8bTNkv789Lls67kO8OXLqtgZmp84rBnR6dAVtjKSMz9xdaj09f+l9tzQ7GiO1LJk15eBiuZLw3e/z4uOObtj9nd7TvDtfq+DCLNq6GMNwLlXV5E3bXBxcm/vC3dT1lxt+Qs/zyG2s/nT8s/dHVlvc2ffBXuJxf274MfG/Hytj7OsZIqo19gDNPlA5fRDTf3UCEdZCfTvGf5mKm+XYPSxZ/War88nhoTByXt6hcg8HverXVhduZZcwa2KnbsPKX89wCb1/qqGUdPTXrPkQiHanP4jw7REsaqdpau4lry3p26cqF4Ua+Z+LTbK3rtVt6lftbx8oxnA3X367BMTgYx6hkxHec86lYNieB5Ri+EkB2mP9Rg7PIcWWjcT4slxmE7/E5ylm0+FSXn0M9xQ9SlTM0NlKsF3Y/4wdKV2NndoN0ZV/exyk/PmSntTu+7P9sXARdG+zmrHdRHPbShSLpzCQLsBqs1ceol4tr6nt9y1Xqcz86gkaPWky9w+Z8cO2HgORIGEiudMmNWWXasF0/j1wpmVwwVKlu2seR5MrH2vxUd04a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';
+export const BrandingBarV2 = () => {
+    return (_jsx("hgroup", Object.assign({ className: typeSafeStyles.hGroup }, { children: _jsx(BoxV2, Object.assign({ className: typeSafeStyles.navWrapper }, { children: _jsxs("nav", Object.assign({ "aria-label": "University of Notre Dame", className: typeSafeStyles.nav }, { children: [_jsxs("a", Object.assign({ className: clsx(typeSafeStyles.universityLogo, typeSafeStyles.sharedLink), style: { backgroundImage: `url(${UniversityLogo})` }, href: "http://nd.edu" }, { children: ["University ", _jsx("i", { children: "of" }), " Notre Dame"] })), _jsxs("a", Object.assign({ className: clsx(typeSafeStyles.provostLogo, typeSafeStyles.sharedLink), style: { backgroundImage: `url(${ProvostImage})` }, href: "http://provost.nd.edu" }, { children: ["Office ", _jsx("i", { children: "of the" }), " Provost"] }))] })) })) })));
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CaptionV2: React.FC<React.HTMLAttributes<HTMLTableCaptionElement>>;

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

@@ -0,0 +1,22 @@
+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";
+export const CaptionV2 = (_a) => {
+    var rest = __rest(_a, []);
+    return (_jsx("caption", Object.assign({ style: {
+            display: 'block',
+            fontStyle: 'italic',
+            fontWeight: 400,
+            fontFamily: '"Libre Franklin","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif',
+            fontSize: '0.8rem',
+        } }, rest)));
+};

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

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

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DatePickerV2 } from '.';
+import { BoxV2 } from '../BoxV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/Fields/DatePickerV2',
+    component: DatePickerV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const StatefulDatePickerV2 = (props) => {
+    const [date, setDate] = useState(new Date());
+    return (_jsx(DatePickerV2, Object.assign({}, props, { value: date, onChange: (d) => {
+            setDate(d);
+        } })));
+};
+export const Default = {
+    render: () => (_jsx(BoxV2, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePickerV2, { placeholder: "test" }) }))),
+};
+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(StatefulDatePickerV2, { backgroundColor: backgroundColor, inline: true }) })));
+    },
+};
+export const HighlightedDates = {
+    argTypes: {
+        backgroundColor: {
+            options: ['blue', 'gold', 'green', 'red'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        const { backgroundColor } = args;
+        const highlightedDate1 = new Date();
+        highlightedDate1.setDate(highlightedDate1.getDate() + 1);
+        const highlightedDate2 = new Date();
+        highlightedDate2.setDate(highlightedDate2.getDate() - 1);
+        return (_jsx(BoxV2, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePickerV2, { inline: true, backgroundColor: backgroundColor, highlightDates: [highlightedDate1, highlightedDate2] }) })));
+    },
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInputV2Props } from '../TextInputV2';
+import { BoxV2Props } from '../BoxV2';
+export declare const InputWrapperV2: React.ForwardRefExoticComponent<{
+    onChange?: ((e: React.ChangeEvent) => void) | undefined;
+    onClick?: ((e: React.MouseEvent) => void) | undefined;
+    value?: string | undefined;
+    children: React.ReactElement;
+} & React.RefAttributes<any>>;
+export declare const areDatesEqual: (d1: Date, d2: Date) => boolean;
+export declare const isDateInThePast: (d1: Date, d2: Date) => boolean;
+export declare const DatePickerV2: React.FC<{
+    value: Date;
+    onChange: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    inline?: boolean;
+    backgroundColor?: string;
+    highlightDates?: Date[];
+    wrapperProps?: BoxV2Props;
+    inputProps?: Partial<TextInputV2Props>;
+}>;

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

@@ -0,0 +1,57 @@
+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 React from 'react';
+import _ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInputV2 } from '../TextInputV2';
+import _CalendarIcon from '@mui/icons-material/CalendarMonth';
+import { BoxV2 } from '../BoxV2';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const CalendarIcon = importedDefaultComponentShim(_CalendarIcon);
+const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
+export const InputWrapperV2 = React.forwardRef(({ onChange, value, children, onClick }, ref) => {
+    return React.cloneElement(children, {
+        value: value,
+        onChangeRaw: onChange,
+        ref: ref,
+        leftIcon: CalendarIcon,
+        onClick,
+    });
+});
+const PermissiveTextInputV2 = TextInputV2;
+export const areDatesEqual = (d1, d2) => {
+    const serializeDate = (d) => `${d.getFullYear()} ${d.getMonth()} ${d.getDate()}`;
+    return serializeDate(d1) === serializeDate(d2);
+};
+export const isDateInThePast = (d1, d2) => {
+    const serializeDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    return serializeDate(d1) < serializeDate(d2);
+};
+export const DatePickerV2 = (_a) => {
+    var { value, wrapperProps, inputProps, backgroundColor, highlightDates } = _a, rest = __rest(_a, ["value", "wrapperProps", "inputProps", "backgroundColor", "highlightDates"]);
+    const highlightDateSet = new Set(highlightDates === null || highlightDates === void 0 ? void 0 : highlightDates.map((d) => d.toDateString()));
+    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, dayClassName: (date) => {
+                if (areDatesEqual(date, value)) {
+                    return '';
+                }
+                if (isDateInThePast(date, value)) {
+                    return 'ndlib-date-picker-pastdate';
+                }
+                if (highlightDateSet.has(date.toDateString())) {
+                    return 'ndlib-date-picker-highlight';
+                }
+                return '';
+            }, customInput: _jsx(InputWrapperV2, { children: _jsx(PermissiveTextInputV2, Object.assign({}, inputProps)) }) }, rest)) })));
+};

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

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

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { ButtonV2 } from '../ButtonV2';
+import { BoxV2 } from '../BoxV2';
+import { DropdownV2 } from '.';
+import { ParagraphV2 } from '../ParagraphV2';
+import { ColumnV2 } from '../ColumnV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/DropdownV2',
+    component: DropdownV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Nullam id nunc vitae magna aliquam aliquet. In hac habitasse platea dictumst.`;
+export const Default = {
+    render: () => (_jsx(BoxV2, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownV2, { renderAnchor: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(ParagraphV2, { children: lorem }) }) }))),
+};
+export const MatchWidth = {
+    render: () => (_jsx(BoxV2, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownV2, { matchWidth: true, renderAnchor: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(ParagraphV2, { children: lorem }) }) }))),
+};
+export const ForcePlacement = {
+    render: () => (_jsx(ColumnV2, Object.assign({ sx: { width: '200x', height: '100vh' }, justify: "flex-end" }, { children: _jsx(DropdownV2, { allowedPlacements: ['bottom-start'], renderAnchor: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(ParagraphV2, { children: lorem }) }) }))),
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+type AnchorProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'>;
+type AnchorRenderFn = (params: {
+    anchorProps: AnchorProps;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+}) => React.ReactNode;
+type DropdownRenderFn = (params: {
+    styles: React.CSSProperties;
+    ref: React.Ref<any>;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    id: string;
+}) => React.ReactNode;
+type Placement = 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';
+type DropdownV2Props = StyledElementPropsV2<HTMLDivElement, {
+    renderAnchor: AnchorRenderFn;
+    renderDropdown: DropdownRenderFn;
+    shouldRenderDropdownContainer?: boolean;
+    matchWidth?: boolean;
+    allowedPlacements?: Placement[];
+}>;
+export declare const OverlayV2: React.FC<StyledElementPropsV2<HTMLDivElement>>;
+export declare const DropdownV2: React.FC<DropdownV2Props>;
+export {};