@ndlib/component-library 1.0.21 → 1.0.23

package/dist/components/composites/DropdownLinks/DropdownLinks.stories.js

@@ -4,10 +4,12 @@ import { DropdownLinks } from '.';
 import { Button } from '../../elements/Button';
 import { Box } from '../../elements/layout/Box';
 import { Row } from '../../elements/layout/Row';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Composites/DropdownLinks',
     component: DropdownLinks,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const options = [

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BasicOption, RenderOption } from '../../elements/Fields/option';
+import { BasicOption, RenderOption } from '../../elements/option';
 import { StyledElementProps } from '../../../theme';
 type AnchorProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'>;
 type LinkOption = BasicOption<string>;

package/dist/components/composites/EmptyState/EmptyState.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EMPTY_STATE_SIZE, EmptyState } from '.';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 import NotInterestedIcon from '@mui/icons-material/NotInterested';
 import { Link } from '../../elements/Link';
 import { FONT_SIZE } from '../../../theme/typography';
@@ -7,6 +8,7 @@ const meta = {
     title: 'Composites/EmptyState',
     component: EmptyState,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

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

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import _SearchOffIcon from '@mui/icons-material/SearchOff';
 import { Row } from '../../elements/layout/Row';
 import { Column } from '../../elements/layout/Column';
-import { PARAGRAPH_SIZE, Paragraph } from '../../elements/text/Paragraph';
+import { PARAGRAPH_SIZE, Paragraph } from '../../elements/Paragraph';
 import { COLOR } from '../../../theme/colors';
 import { Icon } from '../../elements/Icon';
 import { FONT_SIZE } from '../../../theme/typography';

package/dist/components/composites/Modal/Modal.stories.js

@@ -1,20 +1,23 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal } from '.';
 import { Button } from '../../elements/Button';
-import { Paragraph } from '../../elements/text/Paragraph';
+import { Paragraph } from '../../elements/Paragraph';
 import { useDialog } from '../../providers/dialogs';
 import { useTheme } from '../../../theme';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Composites/Modal',
     component: Modal,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const ModalExample = () => {
+    var _a;
     const modalId = 'modal-example';
     const { open, close, state } = useDialog(modalId);
     const theme = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: open, sx: { position: 'relative', zIndex: theme.zIndex.DIALOG } }, { children: "Open Modal" })), _jsx(Modal, Object.assign({ isOpen: state.isOpen, heading: "Heading", close: close, actions: [
+    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: open, sx: { position: 'relative', zIndex: (_a = theme.zIndex) === null || _a === void 0 ? void 0 : _a.DIALOG } }, { children: "Open Modal" })), _jsx(Modal, Object.assign({ isOpen: state.isOpen, heading: "Heading", close: close, actions: [
                     {
                         label: 'Secondary',
                         isPrimary: false,

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

@@ -15,7 +15,7 @@ import { importedDefaultComponentShim } from '../../../utils/misc';
 import { ThemeProvider, useTheme, } from '../../../theme';
 import { GROUP_TYPE, Group } from '../../elements/Group';
 import { Row } from '../../elements/layout/Row';
-import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
+import { HEADING_SIZE, Heading } from '../../elements/Heading';
 import { BUTTON_TYPE, Button } from '../../elements/Button';
 import { COLOR } from '../../../theme/colors';
 import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
@@ -23,6 +23,7 @@ import { useMediaQuery } from '../../providers/media';
 import { useComponentConfig } from '../../providers/componentConfig';
 const ReactModal = importedDefaultComponentShim(_ReactModal);
 export const Modal = (_a) => {
+    var _b;
     var { children, heading, hideHeading, isOpen, footer, actions, wrapWithTheme, close, zIndex, bodyStyles } = _a, props = __rest(_a, ["children", "heading", "hideHeading", "isOpen", "footer", "actions", "wrapWithTheme", "close", "zIndex", "bodyStyles"]);
     const { breakpoint } = useMediaQuery();
     const { modal } = useComponentConfig();
@@ -48,7 +49,7 @@ export const Modal = (_a) => {
         } }, props, { style: {
             overlay: {
                 backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                zIndex: zIndex || theme.zIndex.MODAL,
+                zIndex: zIndex || ((_b = theme.zIndex) === null || _b === void 0 ? void 0 : _b.MODAL),
             },
             content: {
                 padding: 0,

package/dist/components/composites/ModalV2/ModalV2.stories.d.ts

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

package/dist/components/composites/ModalV2/ModalV2.stories.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModalV2 } from '.';
+import { ButtonV2 } from '../../elements/ButtonV2';
+import { ParagraphV2 } from '../../elements/ParagraphV2';
+import { useDialog } from '../../providers/dialogs';
+import { Z_INDEX } from '../../../theme';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Composites/ModalV2',
+    component: ModalV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const ModalV2Example = () => {
+    const modalId = 'modal-example';
+    const { open, close, state } = useDialog(modalId);
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonV2, Object.assign({ onClick: open, sx: { position: 'relative', zIndex: Z_INDEX.DIALOG } }, { children: "Open Modal" })), _jsx(ModalV2, Object.assign({ isOpen: state.isOpen, heading: "Heading", close: close, actions: [
+                    {
+                        label: 'Secondary',
+                        isPrimary: false,
+                        onClick: () => { },
+                    },
+                    {
+                        label: 'Customized',
+                        onClick: () => { },
+                        buttonProps: {
+                            loading: true,
+                        },
+                    },
+                    {
+                        label: 'Primary',
+                        isPrimary: true,
+                        onClick: () => { },
+                    },
+                ] }, { children: _jsx(ParagraphV2, { children: "Modal body goes here" }) }))] }));
+};
+export const Default = {
+    render: () => _jsx(ModalV2Example, {}),
+    args: {},
+};

package/dist/components/composites/ModalV2/ModalV2.test.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from '@testing-library/react';
+import { render } from '../../../utils/test';
+import { vi } from 'vitest';
+import { ModalV2 } from './';
+describe('ModalV2', () => {
+    const handleClose = vi.fn();
+    const mockActions = [
+        { label: 'Action 1', onClick: vi.fn() },
+        { label: 'Action 2', onClick: vi.fn() },
+    ];
+    it('renders modal with heading and content', () => {
+        const { getByText } = render(_jsx(ModalV2, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading" }, { children: _jsx("div", { children: "Modal Content" }) })));
+        expect(getByText('Test Heading')).toBeInTheDocument();
+        expect(getByText('Modal Content')).toBeInTheDocument();
+    });
+    it('calls close handler when close button is clicked', () => {
+        const { getByText } = render(_jsx(ModalV2, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading" }, { children: _jsx("div", { children: "Modal Content" }) })));
+        const closeButton = getByText('Close');
+        fireEvent.click(closeButton);
+        expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+    it('renders actions correctly', () => {
+        const { getByText } = render(_jsx(ModalV2, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading", actions: mockActions }, { children: _jsx("div", { children: "Modal Content" }) })));
+        expect(getByText('Action 1')).toBeInTheDocument();
+        expect(getByText('Action 2')).toBeInTheDocument();
+    });
+    it('calls action handler when action button is clicked', () => {
+        const { getByText } = render(_jsx(ModalV2, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading", actions: mockActions }, { children: _jsx("div", { children: "Modal Content" }) })));
+        const actionButton1 = getByText('Action 1');
+        fireEvent.click(actionButton1);
+        expect(mockActions[0].onClick).toHaveBeenCalledTimes(1);
+        const actionButton2 = getByText('Action 2');
+        fireEvent.click(actionButton2);
+        expect(mockActions[1].onClick).toHaveBeenCalledTimes(1);
+    });
+});

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

@@ -0,0 +1,20 @@
+import { StyledElementPropsV2, StylesPropV2 } from '../../../theme';
+import React from 'react';
+import { ButtonV2Props } from '../../elements/ButtonV2';
+export type ModalV2Props = StyledElementPropsV2<HTMLDivElement, {
+    isOpen: boolean;
+    close: (e: React.MouseEvent) => void;
+    heading: string;
+    hideHeading?: boolean;
+    zIndex?: number;
+    footer?: React.ReactNode;
+    actions?: ModalV2Action[];
+    bodyStyles?: StylesPropV2;
+}>;
+export type ModalV2Action = {
+    label: string;
+    isPrimary?: boolean;
+    buttonProps?: Partial<ButtonV2Props>;
+    onClick: (e: React.MouseEvent) => void;
+};
+export declare const ModalV2: React.FC<ModalV2Props>;

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

@@ -0,0 +1,65 @@
+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 _ReactModal from 'react-modal';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import { Z_INDEX } from '../../../theme';
+import { GROUPV2_TYPE, GroupV2 } from '../../elements/GroupV2';
+import { RowV2 } from '../../elements/layoutV2/RowV2';
+import { HEADINGV2_SIZE, HeadingV2 } from '../../elements/HeadingV2';
+import { BUTTONV2_TYPE, ButtonV2 } from '../../elements/ButtonV2';
+import { COLOR } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { useMediaQueryV2 } from '../../providers/mediaV2';
+import { useComponentConfig } from '../../providers/componentConfig';
+const ReactModal = importedDefaultComponentShim(_ReactModal);
+export const ModalV2 = (_a) => {
+    var { children, heading, hideHeading, isOpen, footer, actions, close, zIndex, bodyStyles } = _a, props = __rest(_a, ["children", "heading", "hideHeading", "isOpen", "footer", "actions", "close", "zIndex", "bodyStyles"]);
+    const { breakpoint } = useMediaQueryV2();
+    const { modal } = useComponentConfig();
+    const shouldShowFooter = footer !== undefined || (actions !== undefined && actions.length > 0);
+    const modalBody = (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION, sx: { my: 0 } }, { children: [!hideHeading && (_jsxs(RowV2, Object.assign({ justify: "space-between", align: "center", sx: {
+                    p: 3,
+                    borderBottom: 'solid 1px',
+                    borderColor: COLOR.LIGHT_GRAY,
+                } }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.SM, typography: TYPOGRAPHY_TYPE.CONTROL_MEDIUM, sx: { mt: 0 } }, { children: heading })), _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.TEXT, onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            close(e);
+                        } }, { children: "Close" }))] }))), _jsx(RowV2, Object.assign({ sx: Object.assign({ p: 3 }, bodyStyles) }, { children: children })), shouldShowFooter && (_jsxs(RowV2, Object.assign({ sx: { borderTop: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, p: 3 } }, { children: [footer, actions !== undefined && (_jsx(RowV2, Object.assign({ sx: { width: '100%', justifyContent: 'flex-end' } }, { children: actions.map((action, index) => (_jsx(ButtonV2, Object.assign({ type: action.isPrimary
+                                ? BUTTONV2_TYPE.DEFAULT
+                                : BUTTONV2_TYPE.OUTLINE, onClick: (e) => {
+                                action.onClick(e);
+                            }, sx: {
+                                mr: index < actions.length - 1 ? 1 : 0,
+                            } }, action.buttonProps, { children: action.label }), index))) })))] })))] })));
+    return (_jsx(ReactModal, Object.assign({ isOpen: isOpen, shouldFocusAfterRender: true, appElement: modal.appElement, onRequestClose: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            close(e);
+        } }, props, { style: {
+            overlay: {
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                zIndex: zIndex || Z_INDEX.MODAL,
+            },
+            content: {
+                padding: 0,
+                minWidth: breakpoint === 0 ? 'calc(100% - 1rem)' : '500px',
+                top: '50%',
+                left: '50%',
+                right: 'auto',
+                bottom: 'auto',
+                marginRight: '-50%',
+                transform: 'translate(-50%, -50%)',
+            },
+        } }, { children: modalBody })));
+};

package/dist/components/composites/NavMenu/NavMenu.stories.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 import { NavMenu } from './';
 import { DemoMenuImplementation } from './demo';
 const meta = {
     title: 'Composites/NavMenu',
     component: NavMenu,
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

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

@@ -16,7 +16,7 @@ import { List, ListItem } from '../../elements/List';
 import { MENU_ACTION_TYPE, useMenu } from '../../providers/menu';
 import { Row } from '../../elements/layout/Row';
 import { Column } from '../../elements/layout/Column';
-import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
+import { HEADING_SIZE, Heading } from '../../elements/Heading';
 import { Link } from '../../elements/Link';
 import { FONT_SIZE, FONT_WEIGHT } from '../../../theme/typography';
 import { COLOR } from '../../../theme/colors';

package/dist/components/composites/Seo/seo.stories.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import SeoDataDisplay from './SeoDataDisplay';
 import Seo from './index';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Composites/Seo',
     component: Seo,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

package/dist/components/composites/SnackBar/SnackBar.stories.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SnackBar } from './';
 import { BasicExample, ReplaceMessageExample, WipeMessagesExample, } from './examples';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Composites/SnackBar',
     component: SnackBar,
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

package/dist/components/composites/StructuredData/StructuredData.stories.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import StructuredDataDisplay from './StructuredDataDisplay';
 import StructuredData from './index';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Composites/StructuredData',
     component: StructuredData,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

package/dist/components/elements/Alerts/Alert.stories.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert } from '.';
 import { ALERT_TYPE } from '../../providers/alerts';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Alert',
     component: Alert,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

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

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alerts } from '.';
 import { AlertsProvider } from '../../providers/alerts';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Alerts',
     component: Alerts,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

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

@@ -37,11 +37,12 @@ export const Alerts = (_a) => {
         }) })));
 };
 export const Alert = (_a) => {
+    var _b;
     var { type = ALERT_TYPE.INFORMATIONAL, description = '', dismiss, sx } = _a, rest = __rest(_a, ["type", "description", "dismiss", "sx"]);
     const theme = useTheme();
     const style = {
         backgroundColor: COLOR.ALERT_INFORMATIONAL_BG,
-        boxShadow: theme.boxShadow.NORMAL,
+        boxShadow: (_b = theme.boxShadow) === null || _b === void 0 ? void 0 : _b.NORMAL,
         border: '2px solid',
         borderColor: COLOR.ALERT_INFORMATIONAL_BORDER,
         m: 0,

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

@@ -2,9 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowLink } from '.';
 import { Column } from '../layout/Column';
 import { Box } from '../layout/Box';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/ArrowLink',
     component: ArrowLink,
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

package/dist/components/elements/{Fields/AutoComplete → AutoComplete}/AutoComplete.stories.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AutoComplete } from '.';
-import { Paragraph, PARAGRAPH_SIZE } from '../../text/Paragraph';
-import { HEADING_SIZE, Heading } from '../../text/Heading';
-import { Column } from '../../layout/Column';
-import { Row } from '../../layout/Row';
+import { Paragraph, PARAGRAPH_SIZE } from '../Paragraph';
+import { HEADING_SIZE, Heading } from '../Heading';
+import { Column } from '../layout/Column';
+import { Row } from '../layout/Row';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const options = [
     {
         label: 'Cucumber',
@@ -53,6 +54,7 @@ const meta = {
     title: 'Elements/Fields/AutoComplete',
     component: AutoComplete,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

package/dist/components/elements/{Fields/AutoComplete → AutoComplete}/AutoComplete.test.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { describe, it, expect, vi } from 'vitest';
-import { AutoComplete } from './';
+import { AutoComplete } from '.';
 describe('AutoComplete Component', () => {
     const options = [
         { label: 'Apple', value: 'apple' },

package/dist/components/elements/{Fields/AutoComplete → AutoComplete}/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { COLOR } from '../../../../theme/colors';
-import { ListBox } from '../../ListBox';
-import { TextInput } from '../../Fields/TextInput';
+import { COLOR } from '../../../theme/colors';
+import { ListBox } from '../ListBox';
+import { TextInput } from '../TextInput';
 export const AutoComplete = ({ value, options, onSelect, }) => {
     const [inputValue, setInputValue] = useState(value);
     const [filteredOptions, setFilteredOptions] = useState(options);

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BrandingBar } from '.';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/BrandingBar',
     component: BrandingBar,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

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

@@ -4,15 +4,17 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { BUTTON_SIZE, BUTTON_TYPE, Button, LinkButton } from '.';
 import { GROUP_TYPE, Group } from '../Group';
-import { HEADING_SIZE, Heading } from '../text/Heading';
+import { HEADING_SIZE, Heading } from '../Heading';
 import { Column } from '../layout/Column';
 import { Row } from '../layout/Row';
-import { Paragraph } from '../text/Paragraph';
+import { Paragraph } from '../Paragraph';
 import { COLOR } from '../../../theme/colors';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Button',
     component: Button,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const sizes = [

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

@@ -0,0 +1,25 @@
+.spinnerWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button {
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.bodyWrapper {
+  flex-grow: 1;
+  justify-content: flex-start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: start;
+}

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ButtonV2 } from '.';
+declare const meta: Meta<typeof ButtonV2>;
+export default meta;
+type Story = StoryObj<typeof ButtonV2>;
+export declare const Default: Story;
+export declare const CustomColor: Story;
+export declare const Link: Story;
+export declare const OutlineButton: Story;
+export declare const TextButton: Story;
+export declare const IconButton: Story;
+export declare const LeftIcon: Story;
+export declare const RightIcon: Story;
+export declare const Loading: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchIcon from '@mui/icons-material/Search';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { BUTTONV2_SIZE, BUTTONV2_TYPE, ButtonV2, LinkButtonV2 } from '.';
+import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
+import { HEADINGV2_SIZE, HeadingV2 } from '../HeadingV2';
+import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { RowV2 } from '../layoutV2/RowV2';
+import { ParagraphV2 } from '../ParagraphV2';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/ButtonV2',
+    component: ButtonV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const sizes = [
+    { size: BUTTONV2_SIZE.LG, label: 'Large' },
+    { size: BUTTONV2_SIZE.MD, label: 'Medium' },
+    { size: BUTTONV2_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 })), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTONV2_TYPE.DEFAULT,
+        children: 'Click Me',
+    },
+};
+const facebookBlue = '#4267B2';
+export const CustomColor = {
+    render: (args) => (_jsxs(ColumnV2, { children: [_jsx(ParagraphV2, { children: "Use customColor prop for colors not in theme" }), _jsx(RowV2, { children: _jsx(ButtonV2, Object.assign({}, args, { customColor: facebookBlue, textColor: COLOR.WHITE, sx: { mt: 1 } })) })] })),
+    args: {
+        type: BUTTONV2_TYPE.DEFAULT,
+        children: 'Click Me',
+    },
+};
+export const Link = {
+    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 })), _jsx(LinkButtonV2, Object.assign({}, args, { sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTONV2_TYPE.DEFAULT,
+        children: 'Click Me',
+    },
+};
+export const OutlineButton = {
+    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 })), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTONV2_TYPE.OUTLINE,
+        children: 'Click Me',
+        onClick: () => { },
+    },
+};
+export const TextButton = {
+    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 })), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTONV2_TYPE.TEXT,
+        onClick: () => { },
+        children: 'Click Me',
+    },
+};
+export const IconButton = {
+    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 })), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, primaryIcon: SettingsIcon }))] })))) })),
+    args: {
+        type: BUTTONV2_TYPE.TEXT,
+        children: 'Click Me',
+        onClick: () => { },
+    },
+};
+export const LeftIcon = {
+    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 })), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, leftIcon: SearchIcon }))] })))) })),
+    args: {
+        onClick: () => { },
+        children: 'Search',
+    },
+};
+export const RightIcon = {
+    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 })), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, rightIcon: ArrowDropDownIcon }))] })))) })),
+    args: {
+        onClick: () => { },
+        children: 'Select',
+    },
+};
+export const Loading = {
+    render: () => (_jsxs(ColumnV2, { children: [_jsx(RowV2, { children: _jsx(ButtonV2, Object.assign({ loading: true }, { children: "Click Me" })) }), _jsx(RowV2, Object.assign({ sx: { mt: 1 } }, { children: _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.OUTLINE, loading: true }, { children: "Click Me" })) })), _jsx(RowV2, Object.assign({ sx: { mt: 1 } }, { children: _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.TEXT, loading: true }, { children: "Click Me" })) }))] })),
+};
+export const Disabled = {
+    render: () => (_jsxs(ColumnV2, { children: [_jsx(RowV2, { children: _jsx(ButtonV2, Object.assign({ disabled: true }, { children: "Click Me" })) }), _jsx(RowV2, Object.assign({ sx: { mt: 1 } }, { children: _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.OUTLINE, disabled: true }, { children: "Click Me" })) })), _jsx(RowV2, Object.assign({ sx: { mt: 1 } }, { children: _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.TEXT, disabled: true }, { children: "Click Me" })) }))] })),
+};