@ndlib/component-library 1.0.30 → 1.0.42

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

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

@@ -0,0 +1,79 @@
+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 { COLOR, colors } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { IconV2 } from '../IconV2';
+import { processSx } from '../../../utils/processSx';
+import * as styles from './PillV2.module.css';
+import clsx from 'clsx';
+const typeSafeStyles = styles;
+export var PILLV2_SIZE;
+(function (PILLV2_SIZE) {
+    PILLV2_SIZE["SM"] = "sm";
+    PILLV2_SIZE["LG"] = "lg";
+})(PILLV2_SIZE || (PILLV2_SIZE = {}));
+const typographyMap = {
+    [PILLV2_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_XSMALL,
+    [PILLV2_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+};
+const defaultPaddingX = {
+    [PILLV2_SIZE.SM]: '0.5rem',
+    [PILLV2_SIZE.LG]: '0.75rem',
+};
+const defaultHeight = {
+    [PILLV2_SIZE.SM]: '1.75rem',
+    [PILLV2_SIZE.LG]: '2rem',
+};
+const iconMargin = {
+    [PILLV2_SIZE.SM]: '0.25rem',
+    [PILLV2_SIZE.LG]: '0.25rem',
+};
+export var PILLV2_TYPE;
+(function (PILLV2_TYPE) {
+    PILLV2_TYPE["DEFAULT"] = "default";
+    PILLV2_TYPE["OUTLINE"] = "outline";
+})(PILLV2_TYPE || (PILLV2_TYPE = {}));
+export const PillV2 = React.forwardRef((_a, ref) => {
+    var { size: sizeParam, type: typeParam, color, icon, children, sx, onClick } = _a, rest = __rest(_a, ["size", "type", "color", "icon", "children", "sx", "onClick"]);
+    const clickable = onClick !== undefined;
+    let bg = COLOR.PRIMARY;
+    let textColor = COLOR.TEXT;
+    let borderColor = COLOR.TRANSPARENT;
+    const cursor = clickable ? 'pointer' : 'default';
+    const type = typeParam || PILLV2_TYPE.DEFAULT;
+    const size = sizeParam || PILLV2_SIZE.SM;
+    const paddingX = defaultPaddingX[size];
+    const height = defaultHeight[size];
+    if (type === PILLV2_TYPE.DEFAULT) {
+        bg = color || COLOR.PRIMARY;
+        textColor =
+            bg === COLOR.PRIMARY
+                ? COLOR.TEXT_ON_PRIMARY
+                : bg === COLOR.SECONDARY
+                    ? COLOR.TEXT_ON_SECONDARY
+                    : COLOR.TEXT;
+    }
+    if (type === PILLV2_TYPE.OUTLINE) {
+        bg = COLOR.BACKGROUND;
+        textColor = color || COLOR.PRIMARY;
+        borderColor = textColor;
+    }
+    const typography = typographyMap[size];
+    const typographyStyles = getTypographyStyles(typography);
+    const body = children;
+    const processedSx = processSx(Object.assign(Object.assign({}, typographyStyles), sx));
+    return (_jsxs("button", Object.assign({ ref: ref, tabIndex: onClick ? 0 : -1, onClick: onClick, className: clsx(typeSafeStyles.pillButton, {
+            [typeSafeStyles.clickable]: clickable,
+        }), style: Object.assign(Object.assign({}, processedSx), { cursor, backgroundColor: colors[bg], color: colors[textColor], paddingLeft: paddingX, paddingRight: paddingX, height: height, borderColor: colors[borderColor] }) }, rest, { children: [icon && (_jsx(IconV2, { icon: icon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", Object.assign({ className: typeSafeStyles.pillContent }, { children: body }))] })));
+});

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

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

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioGroupV2 } from '.';
+import { useState } from 'react';
+import { RowV2 } from '../RowV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/Fields/RadioGroupV2',
+    component: RadioGroupV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const options = [
+    { value: 'orange', label: 'Orange' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+];
+const StatefulRadioGroup = (props) => {
+    const [checked, setChecked] = useState(new Set());
+    return (_jsx(RadioGroupV2, Object.assign({}, props, { checked: checked, options: props.options || options, onChange: setChecked })));
+};
+export const Default = {
+    render: () => (_jsx(RowV2, { children: _jsx(StatefulRadioGroup, {}) })),
+};
+export const Disabled = {
+    render: () => (_jsx(RowV2, { children: _jsx(StatefulRadioGroup, { options: options.map((option, i) => (Object.assign(Object.assign({}, option), { disabled: i === 1 ? true : false }))) }) })),
+};

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

@@ -0,0 +1,16 @@
+import { StyledElementPropsV2, StylesPropV2 } from '../../../theme';
+import { Key } from '../option';
+type Option<K extends Key = string> = {
+    value: K;
+    label: string;
+    disabled?: boolean;
+};
+export type RadioGroupV2Props<K extends Key = string> = StyledElementPropsV2<HTMLDivElement, {
+    onChange: (value: K) => void;
+    options: Option<K>[];
+    columnStyles?: StylesPropV2;
+    rowStyles?: StylesPropV2;
+    checked?: K;
+}, string>;
+export declare function RadioGroupV2<K extends Key = string>({ options, checked, onChange, columnStyles, rowStyles, ...rest }: RadioGroupV2Props<K>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+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 { RowV2 } from '../RowV2';
+import { LabelV2 } from '../LabelV2';
+import { GroupV2, GROUPV2_TYPE } from '../GroupV2';
+import { ColumnV2 } from '../ColumnV2';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { RadioV2 } from '../RadioV2';
+export function RadioGroupV2(_a) {
+    var { options, checked, onChange, columnStyles, rowStyles } = _a, rest = __rest(_a, ["options", "checked", "onChange", "columnStyles", "rowStyles"]);
+    return (_jsx(ColumnV2, Object.assign({}, rest, { sx: columnStyles }, { children: options.map((option) => (_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(RowV2, Object.assign({ sx: Object.assign({ mb: 2, alignItems: 'center' }, rowStyles) }, { children: [_jsx(RadioV2, { onChange: () => {
+                            onChange(option.value);
+                        }, checked: checked === option.value, id: labelTargetId, sx: {
+                            mr: 2,
+                            flexShrink: 0,
+                        }, disabled: option.disabled }), _jsx(LabelV2, Object.assign({ htmlFor: labelTargetId, sx: Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
+}

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

@@ -0,0 +1,17 @@
+.radio {
+  margin: 0px;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+.radio:not(:disabled) {
+  cursor: pointer;
+}
+
+.radio:disabled {
+  cursor: not-allowed;
+}
+
+.radio:not(:disabled):hover {
+  box-shadow: 0 0 8px #dfdfdf;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioV2 } from './index';
+import { useState } from 'react';
+import { RowV2 } from '../RowV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/Fields/RadioV2',
+    component: RadioV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const StatefulRadio = (props) => {
+    const [checked, setChecked] = useState(false);
+    return _jsx(RadioV2, Object.assign({}, props, { checked: checked, onChange: setChecked }));
+};
+export const Default = {
+    render: () => (_jsx(RowV2, { children: _jsx(StatefulRadio, {}) })),
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+export type RadioV2Props = StyledElementPropsV2<HTMLInputElement, {
+    checked: boolean;
+    onChange: (value: boolean) => void;
+    disabled?: boolean;
+}, string>;
+export declare const RadioV2: React.FC<RadioV2Props>;

package/dist/components/elements/RadioV2/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';
+import * as styles from './RadioV2.module.css';
+import clsx from 'clsx';
+const typeSafeStyles = styles;
+export const RadioV2 = (_a) => {
+    var { checked, onChange, disabled, sx, className } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "sx", "className"]);
+    const processedSx = processSx(sx);
+    return (_jsx("input", Object.assign({ type: "radio", onChange: (e) => {
+            onChange(e.target.checked);
+        }, checked: checked, disabled: disabled, className: clsx(typeSafeStyles.radio, className), style: processedSx }, rest)));
+};

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

@@ -0,0 +1,21 @@
+.tabBtn {
+  height: 3.25rem;
+  box-sizing: border-box;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  background: var(--white);
+  border: none;
+  cursor: pointer;
+}
+
+.tabLabelSelected {
+  transform: scale(1.1);
+}
+
+.tabLabelSelected:hover {
+  transform: scale(1.1);
+}
+
+.tabLabelUnselected:hover {
+  transform: scale(1.05);
+}

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

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

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

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

package/dist/components/elements/TabListV2/example.d.ts

@@ -0,0 +1,7 @@
+type Item = {
+    id: string;
+    label: string;
+};
+export declare const items: Item[];
+export declare const ExampleTabsV2: () => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/elements/TabListV2/example.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { TabListV2, TabV2 } from '.';
+export const items = [
+    {
+        id: '1',
+        label: 'Items & Requests',
+    },
+    {
+        id: '2',
+        label: 'Courses',
+    },
+    {
+        id: '3',
+        label: 'Checkout',
+    },
+    {
+        id: '4',
+        label: 'History',
+    },
+    {
+        id: '5',
+        label: 'Preferences',
+    },
+    {
+        id: '6',
+        label: 'Reservations',
+    },
+];
+const StateManager = ({ children }) => {
+    const [selected, setSelected] = React.useState('1');
+    return _jsx(_Fragment, { children: children({ selected, setSelected }) });
+};
+export const ExampleTabsV2 = () => (_jsx(StateManager, { children: ({ selected, setSelected }) => (_jsx(TabListV2, { children: items.map((item) => (_jsx(TabV2, Object.assign({ onClick: () => {
+                setSelected(item.id);
+            }, selected: selected === item.id }, { children: item.label }), item.id))) })) }));

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+type TabListV2Props = StyledElementPropsV2<HTMLDivElement>;
+export declare const TabListV2: React.FC<TabListV2Props>;
+type TabV2Props = StyledElementPropsV2<HTMLButtonElement, {
+    selected?: boolean;
+    children: string;
+}>;
+export declare const TabV2: React.FC<TabV2Props>;
+export {};

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

@@ -0,0 +1,31 @@
+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 { useUniqueId } from '../../providers/uniqueIds';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { processSx } from '../../../utils/processSx';
+import * as styles from './TabListV2.module.css';
+const typeSafeStyles = styles;
+export const TabListV2 = (_a) => {
+    var { children, sx } = _a, props = __rest(_a, ["children", "sx"]);
+    const processedSx = processSx(sx);
+    return (_jsx("div", Object.assign({ role: "tablist", style: Object.assign({ flexDirection: 'row' }, processedSx) }, props, { children: children })));
+};
+export const TabV2 = (_a) => {
+    var { selected, children, sx } = _a, rest = __rest(_a, ["selected", "children", "sx"]);
+    const typographyStyles = getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE);
+    const processedSx = processSx(Object.assign(Object.assign({}, sx), typographyStyles));
+    const labelId = useUniqueId('tab-label');
+    return (_jsx("button", Object.assign({ role: "tab", className: typeSafeStyles.tabBtn, style: Object.assign({ color: selected ? 'var(--darkGray)' : 'var(--gray)', borderBottom: selected ? 'solid 3px' : 'solid 1px', borderColor: selected ? 'var(--ndBlueBright)' : 'var(--lightGray)' }, processedSx), "aria-labelledby": labelId, "aria-selected": selected ? 'true' : 'false' }, rest, { children: _jsx("div", Object.assign({ id: labelId, className: selected
+                ? typeSafeStyles.tabLabelSelected
+                : typeSafeStyles.tabLabelUnselected }, { children: children })) })));
+};

package/dist/index.d.ts

@@ -5,8 +5,10 @@ export { COLOR, colors } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { GlobalStyles } from './theme/GlobalStyles';
 export { Alert, Alerts } from './components/elements/Alerts';
+export { AlertV2, AlertsV2 } from './components/elements/AlertsV2';
 export { ArrowLink } from './components/elements/ArrowLink';
 export { BrandingBar } from './components/elements/BrandingBar';
+export { BrandingBarV2 } from './components/elements/BrandingBarV2';
 export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
 export { ButtonV2, BUTTONV2_SIZE, BUTTONV2_TYPE, LinkButtonV2, } from './components/elements/ButtonV2';
 export { Heading, HEADING_SIZE } from './components/elements/Heading';
@@ -18,6 +20,7 @@ export { ParagraphV2, PARAGRAPHV2_SIZE, } from './components/elements/ParagraphV
 export { Group, useGroup, GROUP_TYPE } from './components/elements/Group';
 export { GroupV2, useGroupV2, GROUPV2_TYPE, } from './components/elements/GroupV2';
 export { Markdown } from './components/elements/Markdown';
+export { MarkdownV2 } from './components/elements/MarkdownV2';
 export { Box } from './components/elements/layout/Box';
 export { BoxV2 } from './components/elements/BoxV2';
 export { Column } from './components/elements/layout/Column';
@@ -30,25 +33,33 @@ export { INPUTV2_SIZE, TextInputV2 } from './components/elements/TextInputV2';
 export { Select } from './components/elements/Select';
 export { SelectV2 } from './components/elements/SelectV2';
 export { DatePicker } from './components/elements/DatePicker';
+export { DatePickerV2 } from './components/elements/DatePickerV2';
 export { MonthPicker } from './components/elements/MonthPicker';
+export { MonthPickerV2 } from './components/elements/MonthPickerV2';
 export { Checkbox } from './components/elements/Checkbox';
 export { CheckboxV2 } from './components/elements/CheckboxV2';
 export { CheckboxGroup } from './components/elements/CheckboxGroup';
 export { CheckboxGroupV2 } from './components/elements/CheckboxGroupV2';
 export { ConsentBanner } from './components/elements/ConsentBanner';
 export { Radio } from './components/elements/Radio';
+export { RadioV2 } from './components/elements/RadioV2';
 export { RadioGroup } from './components/elements/RadioGroup';
+export { RadioGroupV2 } from './components/elements/RadioGroupV2';
 export { List, ListItem, LIST_SIZE } from './components/elements/List';
+export { ListV2, ListItemV2, LISTV2_SIZE } from './components/elements/ListV2';
 export { ReadMore } from './components/elements/ReadMore';
 export { ReadMoreV2 } from './components/elements/ReadMoreV2';
 export { Icon } from './components/elements/Icon';
 export { IconV2 } from './components/elements/IconV2';
 export { Dropdown } from './components/elements/Dropdown';
+export { DropdownV2 } from './components/elements/DropdownV2';
 export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { SpinnerV2, SPINNERV2_SIZE } from './components/elements/SpinnerV2';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
+export { PillV2, PILLV2_SIZE, PILLV2_TYPE } from './components/elements/PillV2';
 export { Table, TableColumn } from './components/elements/Table';
 export { TabList, Tab } from './components/elements/TabList';
+export { TabListV2, TabV2 } from './components/elements/TabListV2';
 export { RawHtml } from './components/elements/RawHtml';
 export { ListBoxV2 } from './components/elements/ListBoxV2';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';