@ndlib/component-library 1.0.41 → 1.0.43

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 {};

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 {};