@ndlib/component-library 1.0.41 → 1.0.43

package/dist/components/composites/NavMenu2/NavMenuV2.stories.d.ts

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

package/dist/components/composites/NavMenu2/NavMenuV2.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+import { NavMenuV2 } from '.';
+import { DemoMenuImplementationV2 } from './demoV2';
+const meta = {
+    title: 'Composites/NavMenuV2',
+    component: NavMenuV2,
+    decorators: [UIVersion2],
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(DemoMenuImplementationV2, {}),
+    args: {},
+};

package/dist/components/composites/NavMenu2/demoV2.d.ts

@@ -0,0 +1 @@
+export declare const DemoMenuImplementationV2: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/composites/NavMenu2/demoV2.js

@@ -0,0 +1,189 @@
+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 { createElement as _createElement } from "react";
+import { NavMenuV2 } from '.';
+import { ButtonV2 } from '../../elements/ButtonV2';
+import { RowV2 } from '../../elements/RowV2';
+import { MENU_ACTION_TYPE, MENU_ORIENTATION, MenuProvider, } from '../../providers/menu';
+const demoMenuV2 = {
+    orientation: MENU_ORIENTATION.HORIZONTAL,
+    items: [
+        {
+            id: 'home',
+            label: 'home',
+            action: {
+                type: MENU_ACTION_TYPE.LINK,
+                to: '/',
+            },
+        },
+        {
+            id: 'research',
+            label: 'research',
+            action: {
+                type: MENU_ACTION_TYPE.SUBMENU,
+                submenu: {
+                    orientation: MENU_ORIENTATION.HORIZONTAL,
+                    items: [
+                        {
+                            label: 'test submenu 1',
+                            id: 'test-submenu-1',
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 1',
+                                            id: 'test-leaf-1',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 2',
+                                            id: 'test-leaf-2',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                        {
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 3',
+                                            id: 'test-leaf-3',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 4',
+                                            id: 'test-leaf-4',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                            label: 'test submenu 2',
+                            id: 'test-submenu-2',
+                        },
+                    ],
+                },
+            },
+        },
+        {
+            id: 'services',
+            label: 'services',
+            action: {
+                type: MENU_ACTION_TYPE.SUBMENU,
+                submenu: {
+                    orientation: MENU_ORIENTATION.HORIZONTAL,
+                    items: [
+                        {
+                            label: 'test submenu 5',
+                            id: 'test-submenu-5',
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 1',
+                                            id: 'test-leaf-1',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 2',
+                                            id: 'test-leaf-2',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                        {
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 3',
+                                            id: 'test-leaf-3',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 4',
+                                            id: 'test-leaf-4',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 5',
+                                            id: 'test-leaf-5',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 6',
+                                            id: 'test-leaf-6',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                            label: 'test submenu 6',
+                            id: 'test-submenu-6',
+                        },
+                    ],
+                },
+            },
+        },
+    ],
+};
+export const DemoMenuImplementationV2 = () => (_jsx(MenuProvider, Object.assign({ menu: demoMenuV2 }, { children: ({ menu, getMenuProps, getMenuItemProps }) => {
+        const getPropsWithoutStyle = (props) => {
+            const { style: _style } = props, propsWithoutStyle = __rest(props, ["style"]);
+            return propsWithoutStyle;
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(RowV2, Object.assign({}, getMenuProps(), { children: menu.items.map((menuItem) => (_createElement(ButtonV2, Object.assign({}, getPropsWithoutStyle(getMenuItemProps([menuItem.id])), { sx: { margin: '4px' }, key: menuItem.id }), menuItem.label))) })), _jsx(NavMenuV2, {})] }));
+    } })));

package/dist/components/composites/NavMenu2/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+type NavMenu2Props = StyledElementPropsV2<HTMLDivElement>;
+export declare const NavMenuV2: React.FC<NavMenu2Props>;
+export {};

package/dist/components/composites/NavMenu2/index.js

@@ -0,0 +1,56 @@
+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 _ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { ArrowLinkV2 } from '../../elements/ArrowLinkV2';
+import { ListV2, ListItemV2 } from '../../elements/ListV2';
+import { MENU_ACTION_TYPE, useMenu } from '../../providers/menu';
+import { RowV2 } from '../../elements/RowV2';
+import { ColumnV2 } from '../../elements/ColumnV2';
+import { HEADINGV2_SIZE, HeadingV2 } from '../../elements/HeadingV2';
+import { FONT_SIZE } from '../../../theme/typography';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import * as styles from './NavMenuV2.module.css';
+const typeSafeStyles = styles;
+const ChevronRightIcon = importedDefaultComponentShim(_ChevronRightIcon);
+export const NavMenuV2 = (props) => {
+    const { sx } = props, rest = __rest(props, ["sx"]);
+    const { isOpen, activePath, getMenuItem, getMenuItemProps, getMenuProps } = useMenu();
+    if (!isOpen) {
+        return null;
+    }
+    const topLevelMenuId = activePath[0];
+    const activeTopLevelMenu = getMenuItem([topLevelMenuId]);
+    if (!activeTopLevelMenu ||
+        !(activeTopLevelMenu.action.type === MENU_ACTION_TYPE.SUBMENU)) {
+        return null;
+    }
+    const submenu = activeTopLevelMenu.action.submenu;
+    const getPropsWithoutStyle = (propsFn) => {
+        const _a = propsFn(), { style: _style } = _a, propsWithoutStyle = __rest(_a, ["style"]);
+        return propsWithoutStyle;
+    };
+    return (_jsxs(RowV2, Object.assign({ className: typeSafeStyles.navWrapper, sx: sx }, rest, { children: [_jsx(ColumnV2, { sx: { flexGrow: 1 } }), submenu.items.map((submenuItem, i) => {
+                if (!(submenuItem.action.type === MENU_ACTION_TYPE.SUBMENU)) {
+                    return null;
+                }
+                const leafMenuItems = submenuItem.action.submenu.items;
+                const submenuPath = [topLevelMenuId, submenuItem.id];
+                const link = '//' + document.location.host + topLevelMenuId;
+                const category = topLevelMenuId.charAt(1).toUpperCase() + topLevelMenuId.slice(2);
+                return (_jsxs(ColumnV2, Object.assign({ className: typeSafeStyles.submenuCol }, { children: [_jsx("div", Object.assign({}, getPropsWithoutStyle(() => getMenuItemProps(submenuPath)), { children: _jsx(HeadingV2, Object.assign({ standalone: true, size: HEADINGV2_SIZE.SM, underline: true }, { children: submenuItem.label })) })), _jsx(ListV2, Object.assign({}, getPropsWithoutStyle(() => getMenuProps(submenuPath)), { icon: ChevronRightIcon, iconSize: FONT_SIZE.MS }, { children: leafMenuItems.map((leafMenuItem, i) => {
+                                var _a;
+                                const leafMenuPath = submenuPath.concat(leafMenuItem.id);
+                                return (_jsx(ListItemV2, Object.assign({ index: i, sx: { mt: 2 } }, getPropsWithoutStyle(() => getMenuItemProps(leafMenuPath)), { children: _jsx("a", Object.assign({ href: (_a = leafMenuItem === null || leafMenuItem === void 0 ? void 0 : leafMenuItem.action) === null || _a === void 0 ? void 0 : _a.to, className: typeSafeStyles.leafMenuLink, tabIndex: -1 }, { children: leafMenuItem.label })) }), leafMenuItem.id));
+                            }) })), i < 1 && (link.includes('esearch') || link.includes('ervices')) ? (_jsxs(ArrowLinkV2, Object.assign({ to: link, sx: { m: '20px 10px 10px 10px' } }, { children: ["View More ", category] }))) : null] }), submenuItem.id));
+            }), _jsx(ColumnV2, { sx: { flexGrow: 1 } })] })));
+};

package/dist/components/composites/NavMenuV2/NavMenuV2.module.css

@@ -0,0 +1,24 @@
+.navWrapper {
+  justify-content: center;
+  padding: 0.75rem;
+  border: 1px solid var(--extraLightGray);
+  background: var(--white);
+  border-radius: 4px;
+  margin: 0px 10px 0px 10px;
+}
+
+.submenuCol {
+  flex-basis: 300px;
+  padding: 0.5rem 1rem;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.leafMenuLink {
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.4;
+  font-family: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, Verdana,
+    sans-serif;
+  text-decoration: none;
+}

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/ArrowLinkV2/ArrowLinkV2.module.css

@@ -0,0 +1,47 @@
+.arrowLinkWrapper {
+  text-decoration: none;
+  display: inline-flex;
+  white-space: nowrap;
+  padding: 0;
+  flex-grow: 0;
+  position: relative;
+  box-sizing: border-box;
+  background: var(--white);
+  color: var(--primary);
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.4;
+  font-family: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, Verdana,
+    sans-serif;
+
+  &:hover {
+    transform: scale(1.02);
+    background: var(--extraExtraLightGray);
+  }
+
+  &:hover > svg {
+    fill: var(--extraExtraLightGray);
+  }
+
+  & > svg {
+    fill: var(--white);
+  }
+}
+
+.arrowLinkInnerWrapper {
+  position: relative;
+  border: 1px solid #a7a7a7;
+  border-width: 1px 0 2px 1px;
+  box-sizing: border-box;
+  padding: 0.125rem 1.5rem 0.125rem 0.5rem;
+  height: 100%;
+  flex: 1 1 auto;
+}
+
+.arrow {
+  width: 16px;
+  right: -16px;
+  position: absolute;
+  top: 0;
+  height: 100%;
+}

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowLinkV2 } from '.';
+import { ColumnV2 } from '../ColumnV2';
+import { BoxV2 } from '../BoxV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/ArrowLinkV2',
+    component: ArrowLinkV2,
+    decorators: [UIVersion2],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(ColumnV2, { children: _jsx(BoxV2, { children: _jsx(ArrowLinkV2, Object.assign({ to: "/" }, { children: "Click Me" })) }) })),
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { StyledElementPropsV2 } from '../../../theme';
+type ArrowLinkV2Props = StyledElementPropsV2<HTMLAnchorElement, {
+    to: string;
+}>;
+export declare const ArrowLinkV2: React.FC<ArrowLinkV2Props>;
+export {};

package/dist/components/elements/ArrowLinkV2/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, jsxs as _jsxs } from "react/jsx-runtime";
+import { processSx } from '../../../utils/processSx';
+import { BoxV2 } from '../BoxV2';
+import * as styles from './ArrowLinkV2.module.css';
+const typeSafeStyles = styles;
+export const ArrowLinkV2 = (_a) => {
+    var { to, children, sx } = _a, rest = __rest(_a, ["to", "children", "sx"]);
+    const processedSx = processSx(sx);
+    return (_jsxs("a", Object.assign({ href: to, className: typeSafeStyles.arrowLinkWrapper, style: processedSx }, rest, { children: [_jsx(BoxV2, Object.assign({ className: typeSafeStyles.arrowLinkInnerWrapper }, { children: children })), _jsxs("svg", Object.assign({ viewBox: "0 0 16 1", preserveAspectRatio: "none", className: typeSafeStyles.arrow }, { children: [_jsx("path", { d: "M0,0 0,0 16,0.5 0,1 0,1z" }), _jsx("line", { x1: "0", x2: "16", y1: "0", y2: "0.5", stroke: "#a7a7a7", strokeWidth: "0.05", strokeLinecap: "butt" }), _jsx("line", { x1: "0", x2: "16", y1: "1", y2: "0.5", stroke: "#a7a7a7", strokeWidth: "0.1", strokeLinecap: "butt" })] }))] })));
+};

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) })));
+};