@veritone-ce/design-system 1.12.6 → 1.12.8

package/dist/assets/theme.js

@@ -9,9 +9,10 @@ import selectTheme from '../components/Select/select.theme';
 import tabsTheme from '../components/Tabs/tabs.theme';
 import inputTheme from '../components/Input/input.theme';
 import modalTheme from '../components/Modal/modal.theme';
+import linearProgress from '../components/LinearProgress/linearProgress.theme';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import InfoIcon from '@mui/icons-material/Info';
-import WarningIcon from '@mui/icons-material/Error';
+import InformationIcon from 'resources/icons/information.svg';
+import WarningIcon from 'resources/icons/warning.svg';
 import ErrorIcon from '@mui/icons-material/Cancel';
 export const colors = {
     brand: {
@@ -49,6 +50,9 @@ let theme = createTheme({
             fontSize: '1.429rem',
             lineHeight: '2.143rem',
             fontWeight: '700'
+        },
+        body1: {
+            color: colors.text.primary
         }
     },
     palette: {
@@ -89,7 +93,7 @@ let theme = createTheme({
     spacing: 10
 });
 theme = createTheme(theme, {
-    components: Object.assign(Object.assign({ MuiButton: buttonTheme(theme) }, stepperTheme(theme)), { MuiSelect: selectTheme(theme), MuiTextField: inputTheme(theme), MuiDialog: modalTheme(theme), MuiCheckbox: checkboxTheme(theme), MuiRadio: radioButtonTheme(theme), MuiTabs: tabsTheme(theme), MuiChip: statusChipTheme(theme), MuiInputLabel: {
+    components: Object.assign(Object.assign({ MuiButton: buttonTheme(theme) }, stepperTheme(theme)), { MuiSelect: selectTheme(theme), MuiTextField: inputTheme(theme), MuiDialog: modalTheme(theme), MuiCheckbox: checkboxTheme(theme), MuiRadio: radioButtonTheme(theme), MuiTabs: tabsTheme(theme), MuiChip: statusChipTheme(theme), MuiLinearProgress: linearProgress(theme), MuiInputLabel: {
             styleOverrides: {
                 root: {
                     color: theme.palette.text.secondary,
@@ -159,11 +163,11 @@ theme = createTheme(theme, {
         }, MuiLink: {
             defaultProps: {
                 underline: `none`,
-                color: theme.palette.primary.main
+                color: colors.button.primary
             }
         }, MuiSnackbar: {
             defaultProps: {
-                autoHideDuration: 6000,
+                autoHideDuration: 3000,
                 anchorOrigin: {
                     vertical: `top`,
                     horizontal: `right`
@@ -181,17 +185,18 @@ theme = createTheme(theme, {
                 variant: `outlined`,
                 iconMapping: {
                     success: _jsx(CheckCircleIcon, {}),
-                    info: _jsx(InfoIcon, {}),
-                    warning: _jsx(WarningIcon, {}),
+                    info: _jsx("img", { alt: 'information icon', src: InformationIcon }),
+                    warning: _jsx("img", { alt: 'warning icon', src: WarningIcon }),
                     error: _jsx(ErrorIcon, {})
                 }
             },
             styleOverrides: {
                 root: {
-                    width: `100%`,
+                    width: `415px`,
                     backgroundColor: `white`,
                     position: `relative`,
                     overflow: `hidden`,
+                    border: `1px solid #7C848D`,
                     '&:after': {
                         content: '""',
                         position: `absolute`,
@@ -204,7 +209,7 @@ theme = createTheme(theme, {
                         backgroundColor: theme.palette.success.main
                     },
                     '&.MuiAlert-outlinedInfo:after': {
-                        backgroundColor: theme.palette.info.main
+                        backgroundColor: theme.palette.secondary.main
                     },
                     '&.MuiAlert-outlinedWarning:after': {
                         backgroundColor: theme.palette.warning.main
@@ -219,7 +224,10 @@ theme = createTheme(theme, {
                     '& .MuiAlert-message': {
                         fontSize: `12px`,
                         lineHeight: `22px`,
-                        color: `black`
+                        color: colors.text.primary
+                    },
+                    '& .MuiIconButton-root': {
+                        color: colors.text.tertiary
                     }
                 }
             }

package/dist/components/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,11 @@
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import BreadcrumbsComponent from '.';
+declare const _default: ComponentMeta<({ links }: {
+    'data-testid'?: string | undefined;
+    links: {
+        href: string;
+        label: string;
+    }[];
+}) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<typeof BreadcrumbsComponent> | Story;

package/dist/components/Breadcrumbs/Breadcrumbs.stories.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 BreadcrumbsComponent from '.';
+const links = [
+    { label: 'Home', href: '/' },
+    { label: 'About', href: '/about' },
+    { label: 'Contact', href: '/contact' }
+];
+export default {
+    title: 'Components/BreadcrumbsComponent',
+    component: BreadcrumbsComponent,
+    argTypes: {
+        links: {
+            defaultValue: ['.pdf', '.format']
+        }
+    }
+};
+export const Default = (_a) => {
+    var args = __rest(_a, []);
+    return _jsx(BreadcrumbsComponent, Object.assign({}, args, { links: links }));
+};

package/dist/components/Breadcrumbs/__tests__/Breadcrumbs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Breadcrumbs/__tests__/Breadcrumbs.test.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { screen } from '@testing-library/react';
+import Breadcrumbs from '..';
+const links = [
+    { label: 'Home', href: '/' },
+    { label: 'About', href: '/about' },
+    { label: 'Contact', href: '/contact' }
+];
+describe('<Breadcrumbs />', () => {
+    it('should render the Breadcrumbs component', () => {
+        render(_jsx(Breadcrumbs, { links: links, "data-testid": "breadcrumbs" }));
+        expect(screen.getByTestId('breadcrumbs')).toBeInTheDocument();
+    });
+});

package/dist/components/Breadcrumbs/breadcrumbs.theme.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '../../assets/theme';
+declare const breadcrumbs: (theme: Theme) => {
+    styleOverrides: {
+        root: () => {
+            '& .MuiBreadcrumbs-separator': {
+                color: string;
+            };
+        };
+    };
+};
+export default breadcrumbs;

package/dist/components/Breadcrumbs/breadcrumbs.theme.js

@@ -0,0 +1,10 @@
+const breadcrumbs = (theme) => ({
+    styleOverrides: {
+        root: () => ({
+            '& .MuiBreadcrumbs-separator': {
+                color: theme.palette.text.disabled
+            }
+        })
+    }
+});
+export default breadcrumbs;

package/dist/components/Breadcrumbs/index.d.ts

@@ -0,0 +1,15 @@
+type BreadcrumbsProps = {
+    'data-testid'?: string;
+    links: {
+        href: string;
+        label: string;
+    }[];
+};
+/**
+ * - This is the breadcrumbs component that is used in the header
+ * - It takes in an array of links and renders them as breadcrumbs
+ * - The last link is not clickable
+ * - The last link is styled differently
+ **/
+declare const BreadcrumbsComponent: ({ links }: BreadcrumbsProps) => JSX.Element;
+export default BreadcrumbsComponent;

package/dist/components/Breadcrumbs/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumbs, Link, Typography } from '@mui/material';
+import theme from '../../assets/theme';
+/**
+ * - This is the breadcrumbs component that is used in the header
+ * - It takes in an array of links and renders them as breadcrumbs
+ * - The last link is not clickable
+ * - The last link is styled differently
+ **/
+const BreadcrumbsComponent = ({ links = [] }) => {
+    return (_jsx(Breadcrumbs, Object.assign({ "aria-label": "breadcrumbs", "data-testid": "breadcrumbs" }, { children: links === null || links === void 0 ? void 0 : links.map((link, index) => {
+            if (index === links.length - 1) {
+                return (_jsx(Typography, Object.assign({ sx: {
+                        color: theme.palette.text.disabled,
+                        fontFamily: 'Dosis',
+                        fontStyle: 'normal',
+                        fontWeight: 600,
+                        fontSize: '18px',
+                        textTransform: 'uppercase'
+                    } }, { children: link.label }), index));
+            }
+            else {
+                return (_jsx(Link, Object.assign({ href: link.href }, { children: _jsx(Typography, Object.assign({ sx: {
+                            color: theme.palette.button.main,
+                            fontFamily: 'Dosis',
+                            fontStyle: 'normal',
+                            fontWeight: 600,
+                            fontSize: '18px',
+                            textTransform: 'uppercase'
+                        } }, { children: link.label }), index) }), link.href));
+            }
+        }) })));
+};
+export default BreadcrumbsComponent;

package/dist/components/FileUploader/index.d.ts

@@ -1,9 +1,10 @@
 import { Accept } from 'react-dropzone';
 export interface FileData {
-    file: File;
+    file: File | any;
     uploadProgress: number;
     isUploaded: boolean;
     withError: boolean;
+    feedbackText: string;
 }
 type FileUploaderProps = {
     'data-testid'?: string;

package/dist/components/FileUploader/index.js

@@ -9,20 +9,74 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback, useEffect, useState } from 'react';
 import { Box } from '@mui/system';
 import { IconButton, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { useDropzone } from 'react-dropzone';
 import { useUploadFile } from './useUploadFile';
+import LinearProgress from '../LinearProgress';
 const FileUploader = (_a) => {
     var { uploadUrl, files, accept, multiple, onSuccess, onError, extensions = ['[format]', '[format]', '[format]'] } = _a, props = __rest(_a, ["uploadUrl", "files", "accept", "multiple", "onSuccess", "onError", "extensions"]);
     const { palette } = useTheme();
-    const [fileList, setfileList] = useState([]);
+    const fileData = [
+        {
+            feedbackText: `Feedback text`,
+            uploadProgress: 60,
+            isUploaded: false,
+            withError: false,
+            file: {
+                lastModified: 1527053530715,
+                name: 'test-consent.pdf',
+                size: 0,
+                type: 'image/jpg',
+                webkitRelativePath: '',
+                slice: ``,
+                // arrayBuffer: // need to mock this
+                stream: ``,
+                text: ``
+            }
+        },
+        {
+            feedbackText: ``,
+            uploadProgress: 100,
+            isUploaded: true,
+            withError: false,
+            file: {
+                lastModified: 1527053530715,
+                name: 'test-consent.pdf',
+                size: 0,
+                type: 'image/jpg',
+                webkitRelativePath: '',
+                slice: ``,
+                // arrayBuffer: // need to mock this
+                stream: ``,
+                text: ``
+            }
+        },
+        {
+            feedbackText: `File upload error. Please try again.`,
+            uploadProgress: 70,
+            isUploaded: false,
+            withError: true,
+            file: {
+                lastModified: 1527053530715,
+                name: 'test-consent.pdf',
+                size: 0,
+                type: 'image/jpg',
+                webkitRelativePath: '',
+                slice: ``,
+                // arrayBuffer: // need to mock this
+                stream: ``,
+                text: ``
+            }
+        }
+    ];
+    const [fileList, setfileList] = useState(fileData);
     const { onDrop } = useUploadFile(setfileList, uploadUrl, onSuccess, onError);
     const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
         multiple,
@@ -48,6 +102,7 @@ const FileUploader = (_a) => {
                     paddingRight: '38px',
                     paddingBottom: '19px',
                     paddingLeft: '20px',
+                    marginBottom: '5px',
                     width: '100%',
                     boxSizing: 'border-box',
                     borderRadius: '4px',
@@ -87,64 +142,15 @@ const FileUploader = (_a) => {
                         maxWidth: '500px',
                         display: 'flex',
                         alignItems: 'center',
-                        gap: '20px',
-                        padding: '15px',
+                        gap: '10px',
+                        padding: '10px',
                         boxSizing: 'border-box',
                         borderBottom: `1px solid rgba(42, 50, 60, 0.5)`
-                    } }, { children: [_jsx(Box, Object.assign({ sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                width: '40px',
-                                height: '40px',
-                                boxSizing: 'border-box',
-                                border: `3px solid ${palette.misc.altBackground}`,
-                                borderRadius: '50%'
-                            } }, { children: _jsx(InsertDriveFileIcon, { sx: {
+                    } }, { children: [_jsx(LinearProgress, { value: file.uploadProgress, itemLoading: file.file.name, isError: file.withError, feedbackText: file.feedbackText, isUploaded: file.isUploaded }), _jsx(IconButton, Object.assign({ "data-testid": "file-item-delete-button", "aria-label": "delete", sx: { padding: 0 }, onClick: () => handleDeleteFile(index) }, { children: _jsx(DeleteOutlineIcon, { sx: {
                                     width: '18px',
                                     height: '18px',
                                     fill: palette.text.tertiary
-                                } }) })), _jsxs(Box, Object.assign({ sx: { flex: 1 } }, { children: [_jsx(Typography, Object.assign({ sx: {
-                                        fontWeight: 600,
-                                        fontSize: '14px',
-                                        lineHeight: '19px',
-                                        color: palette.text.primary
-                                    } }, { children: file.file.name })), file.isUploaded ? (_jsx(_Fragment, { children: _jsx(Typography, Object.assign({ "data-testid": "file-item-size", sx: {
-                                            marginTop: '1px',
-                                            fontWeight: 400,
-                                            fontSize: '12px',
-                                            lineHeight: '16px',
-                                            color: palette.neutral.main
-                                        } }, { children: (file.file.size / (1024 * 1024)).toFixed(1) + ' MB' })) })) : file.withError ? (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ sx: {
-                                                width: '100%',
-                                                height: '4px',
-                                                marginTop: '5px',
-                                                marginBottom: '4px',
-                                                borderRadius: '20px',
-                                                background: palette.misc.altBackground
-                                            } }, { children: _jsx(Box, { sx: {
-                                                    width: '100%',
-                                                    height: '100%',
-                                                    borderRadius: '20px',
-                                                    background: palette.error.main
-                                                } }) })), _jsx(Typography, Object.assign({ sx: {
-                                                fontWeight: 600,
-                                                fontSize: '10px',
-                                                lineHeight: '14px',
-                                                color: palette.text.primary
-                                            } }, { children: "File upload error. Please try again." }))] })) : (_jsx(Box, Object.assign({ sx: {
-                                        width: '100%',
-                                        height: '4px',
-                                        marginTop: '5px',
-                                        marginBottom: '4px',
-                                        borderRadius: '20px',
-                                        background: palette.misc.altBackground
-                                    } }, { children: _jsx(Box, { "data-testid": "file-progress-bar", sx: {
-                                            width: `${file.uploadProgress}%`,
-                                            height: '100%',
-                                            borderRadius: '20px',
-                                            background: palette.success.main
-                                        } }) })))] })), _jsx(IconButton, Object.assign({ "data-testid": "file-item-delete-button", "aria-label": "delete", sx: { padding: 0 }, onClick: () => handleDeleteFile(index) }, { children: _jsx(DeleteOutlineIcon, { sx: { width: '18px', height: '18px' } }) }))] }), index));
+                                } }) }))] }), index));
             })] })));
 };
 export default FileUploader;

package/dist/components/LinearProgress/LinearProgress.stories.d.ts

@@ -0,0 +1,14 @@
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import LinearProgress from '.';
+declare const _default: ComponentMeta<({ value, itemLoading, isError, feedbackText, isUploaded, ...props }: {
+    'data-testid'?: string | undefined;
+    value: number;
+    itemLoading: string;
+    isError?: boolean | undefined;
+    feedbackText?: string | undefined;
+    isUploaded: boolean;
+} & import("@mui/material").LinearProgressProps) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<typeof LinearProgress> | Story;
+export declare const FullProgress: ComponentStory<typeof LinearProgress> | Story;
+export declare const ProgressError: ComponentStory<typeof LinearProgress> | Story;

package/dist/components/LinearProgress/LinearProgress.stories.js

@@ -0,0 +1,29 @@
+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 LinearProgress from '.';
+export default {
+    title: 'Components/LinearProgress',
+    component: LinearProgress
+};
+export const Default = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(LinearProgress, Object.assign({ value: 60, itemLoading: 'image-file-name.png', isUploaded: false }, args)));
+};
+export const FullProgress = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(LinearProgress, Object.assign({ value: 100, itemLoading: 'image-file-name.png', isUploaded: true }, args)));
+};
+export const ProgressError = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(LinearProgress, Object.assign({ value: 70, itemLoading: 'image-file-name.png', isError: true, feedbackText: 'Error messaging', isUploaded: false }, args)));
+};

package/dist/components/LinearProgress/__tests__/LinearProgress.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/LinearProgress/__tests__/LinearProgress.test.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { screen } from '@testing-library/react';
+import LinearProgress from '..';
+describe('<LinearProgress />', () => {
+    it('should render the LinearProgress component', () => {
+        render(_jsx(LinearProgress, { "data-testid": "linear-progress", value: 15, itemLoading: '', isUploaded: false }));
+        expect(screen.getByTestId('linear-progress')).toBeInTheDocument();
+    });
+    it('should render the Linear Progress component with feedback text', () => {
+        render(_jsx(LinearProgress, { "data-testid": "linear-progress", value: 15, itemLoading: '', isError: true, feedbackText: 'Error message', isUploaded: false }));
+        expect(screen.getByText('Error message')).toBeInTheDocument();
+    });
+    it('should render the Linear Progress component with uploadProgress when there is no feedback text', () => {
+        render(_jsx(LinearProgress, { "data-testid": "linear-progress", value: 15, itemLoading: '', isError: true, feedbackText: '', isUploaded: false }));
+        expect(screen.getByText('15%')).toBeInTheDocument();
+    });
+});

package/dist/components/LinearProgress/index.d.ts

@@ -0,0 +1,27 @@
+import { LinearProgressProps as MuiLinearProgressProps } from '@mui/material';
+type LinearProgressProps = {
+    'data-testid'?: string;
+    value: number;
+    /**
+    - The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100.
+    **/
+    itemLoading: string;
+    /**
+    - The name of the item or file loading
+    **/
+    isError?: boolean;
+    /**
+    - Optional prop that can be passed to show error state in bar
+    **/
+    feedbackText?: string;
+    /**
+    - Optional prop that can be passed to show error message
+    **/
+    isUploaded: boolean;
+} & MuiLinearProgressProps;
+/**
+- Use a Linear Progress Bar to show the user that an operation is in progress.
+  This is currently being used in conjuction with the uploader tool
+**/
+declare const LinearProgress: ({ value, itemLoading, isError, feedbackText, isUploaded, ...props }: LinearProgressProps) => JSX.Element;
+export default LinearProgress;

package/dist/components/LinearProgress/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, jsxs as _jsxs } from "react/jsx-runtime";
+import { LinearProgress as MuiLinearProgress, Typography, Box } from '@mui/material';
+/**
+- Use a Linear Progress Bar to show the user that an operation is in progress.
+  This is currently being used in conjuction with the uploader tool
+**/
+const LinearProgress = (_a) => {
+    var { value, itemLoading, isError = false, feedbackText, isUploaded } = _a, props = __rest(_a, ["value", "itemLoading", "isError", "feedbackText", "isUploaded"]);
+    return (_jsxs(Box, Object.assign({ sx: { width: `100%`, margin: `5px 0` } }, { children: [_jsx(Box, Object.assign({ sx: {
+                    display: `flex`,
+                    justifyContent: `space-between`,
+                    marginBottom: `5px`
+                } }, { children: _jsx(Typography, Object.assign({ sx: { fontSize: `14px`, fontWeight: `600` } }, { children: itemLoading })) })), isError ? (_jsx(MuiLinearProgress, Object.assign({ "aria-label": 'linear progress bar', variant: "determinate", value: value, sx: { '& .MuiLinearProgress-bar': { backgroundColor: `#EB0000` } } }, props))) : isUploaded ? (_jsx(MuiLinearProgress, Object.assign({ "aria-label": 'linear progress bar', variant: "determinate", value: value }, props, { sx: { '& .MuiLinearProgress-bar': { backgroundColor: `#28BA3F` } } }))) : (_jsx(MuiLinearProgress, Object.assign({ "aria-label": 'linear progress bar', variant: "determinate", value: value }, props))), _jsx(Typography, Object.assign({ sx: { fontSize: `11px`, marginTop: `10px`, color: `#5C6269` } }, { children: feedbackText ? feedbackText : `${value}%` }))] })));
+};
+export default LinearProgress;

package/dist/components/LinearProgress/linearProgress.theme.d.ts

@@ -0,0 +1,14 @@
+import { Theme } from '../../assets/theme';
+declare const linearProgress: (theme: Theme) => {
+    styleOverrides: {
+        root: () => {
+            borderRadius: string;
+            backgroundColor: string;
+            '& .MuiLinearProgress-bar': {
+                backgroundColor: string;
+                borderRadius: string;
+            };
+        };
+    };
+};
+export default linearProgress;

package/dist/components/LinearProgress/linearProgress.theme.js

@@ -0,0 +1,13 @@
+const linearProgress = (theme) => ({
+    styleOverrides: {
+        root: () => ({
+            borderRadius: `20px`,
+            backgroundColor: `#E0E8F0`,
+            '& .MuiLinearProgress-bar': {
+                backgroundColor: '#335B89',
+                borderRadius: `20px`
+            }
+        })
+    }
+});
+export default linearProgress;

package/dist/components/StatusChip/StatusChip.stories.d.ts

@@ -21,7 +21,7 @@ declare const _default: ComponentMeta<({ label, ...props }: {
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     tabIndex?: number | undefined;
     variant?: "outlined" | "filled" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "color" | "icon" | keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "children" | "disabled" | "sx" | "size" | "variant" | "clickable" | "avatar" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled">) => JSX.Element>;
 export default _default;
@@ -46,6 +46,6 @@ export declare const Options: ComponentStory<({ label, ...props }: {
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     tabIndex?: number | undefined;
     variant?: "outlined" | "filled" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "color" | "icon" | keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "children" | "disabled" | "sx" | "size" | "variant" | "clickable" | "avatar" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled">) => JSX.Element>;

package/dist/components/Stepper/Stepper.stories.d.ts

@@ -14,7 +14,7 @@ declare const _default: ComponentMeta<(props: {
     nonLinear?: boolean | undefined;
     orientation?: import("@mui/material").Orientation | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation" | "orientation" | "component" | "activeStep" | "alternativeLabel" | "connector" | "nonLinear">) => JSX.Element>;
 export default _default;

package/dist/components/Toast/Toast.stories.d.ts

@@ -0,0 +1,14 @@
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import Toast from '.';
+declare const _default: ComponentMeta<({ severity, messageLabel, messageText, linkText, handleClose, open, ...props }: {
+    'data-testid'?: string | undefined;
+    messageLabel?: string | undefined;
+    messageText?: string | undefined;
+    linkText?: string | undefined;
+    handleClose?: (() => void) | undefined;
+    open?: boolean | undefined;
+} & import("@mui/material").SnackbarProps & import("@mui/material").AlertProps) => JSX.Element>;
+export default _default;
+export declare const DefaultAutoHide: ComponentStory<typeof Toast> | Story;
+export declare const onClose: ComponentStory<typeof Toast> | Story;
+export declare const onCloseWithLink: ComponentStory<typeof Toast> | Story;

package/dist/components/Toast/Toast.stories.js

@@ -0,0 +1,42 @@
+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 { Stack } from '@mui/material';
+import Toast from '.';
+export default {
+    title: 'Components/Toast',
+    component: Toast,
+    argTypes: {
+        severity: {
+            options: ['success', 'info', 'warning', 'error'],
+            control: { type: 'radio' }
+        }
+    }
+};
+const handleClose = () => {
+    /**
+     * - This is a dummy function to demonstrate passing in a handleClose prop
+     * - It adds a close button
+     **/
+};
+export const DefaultAutoHide = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsxs(Stack, Object.assign({ spacing: 2 }, { children: [_jsx(Toast, Object.assign({ severity: "success" }, args)), _jsx(Toast, Object.assign({ severity: "info" }, args)), _jsx(Toast, Object.assign({ severity: "warning" }, args)), _jsx(Toast, Object.assign({ severity: "error" }, args))] })));
+};
+export const onClose = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsxs(Stack, Object.assign({ spacing: 2 }, { children: [_jsx(Toast, Object.assign({ severity: "success", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "info", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "warning", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "error", autoHideDuration: 15000, handleClose: handleClose }, args))] })));
+};
+export const onCloseWithLink = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsxs(Stack, Object.assign({ spacing: 2 }, { children: [_jsx(Toast, Object.assign({ severity: "success", linkText: "See Action Result", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "info", linkText: "Link", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "warning", linkText: "Action Link", autoHideDuration: 15000, handleClose: handleClose }, args)), _jsx(Toast, Object.assign({ severity: "error", linkText: "Correction Link", autoHideDuration: 15000, handleClose: handleClose }, args))] })));
+};

package/dist/components/Toast/__tests__/Toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toast/__tests__/Toast.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { screen } from '@testing-library/react';
+import Toast from '..';
+describe('<Toast />', () => {
+    it('should render the Success Toast component', () => {
+        render(_jsx(Toast, { "data-testid": "success", severity: "success" }));
+        expect(screen.getByText('Success:')).toBeInTheDocument();
+        expect(screen.getByText('Your action was completed.')).toBeInTheDocument();
+    });
+    it('should render the Info Toast component', () => {
+        render(_jsx(Toast, { "data-testid": "info", severity: "info" }));
+        expect(screen.getByText('Info:')).toBeInTheDocument();
+        expect(screen.getByText('General information.')).toBeInTheDocument();
+    });
+    it('should render the Warning Toast component', () => {
+        render(_jsx(Toast, { "data-testid": "warning", severity: "warning" }));
+        expect(screen.getByText('Alert:')).toBeInTheDocument();
+        expect(screen.getByText('Your action is required.')).toBeInTheDocument();
+    });
+    it('should render the Error Toast component', () => {
+        render(_jsx(Toast, { "data-testid": "error", severity: "error" }));
+        expect(screen.getByText('Error:')).toBeInTheDocument();
+        expect(screen.getByText('An error has occured.')).toBeInTheDocument();
+    });
+    it('should render linkText in Toast component when provided', () => {
+        render(_jsx(Toast, { "data-testid": "link", linkText: "Click link for more information" }));
+        expect(screen.getByText('Click link for more information')).toBeInTheDocument();
+    });
+});

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,23 @@
+import { SnackbarProps, AlertProps } from '@mui/material';
+type ToastProps = {
+    'data-testid'?: string;
+    messageLabel?: string;
+    messageText?: string;
+    /**
+     * - Use can pass messageLabel or messageText
+     * - If these props are not passed in, the default label and text will be set based on severity
+     **/
+    linkText?: string;
+    /**
+     * - User can add linkText if they want to provide users a link with information related to the toast
+     **/
+    handleClose?: () => void;
+    /**
+     * - handleClose is an optional function a user can pass
+     * - if user does not pass this function, the autoHideDuration will control when the toast disappears
+     * -
+     **/
+    open?: boolean;
+} & SnackbarProps & AlertProps;
+declare const Toast: ({ severity, messageLabel, messageText, linkText, handleClose, open, ...props }: ToastProps) => JSX.Element;
+export default Toast;

package/dist/components/Toast/index.js

@@ -0,0 +1,43 @@
+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 { Box, Snackbar, Alert, Link, Typography } from '@mui/material';
+const defaultMessageLabel = {
+    success: `Success`,
+    info: `Info`,
+    warning: `Alert`,
+    error: `Error`
+};
+const defaultMessageText = {
+    success: `Your action was completed. `,
+    info: `General information. `,
+    warning: `Your action is required. `,
+    error: `An error has occured. `
+};
+const Toast = (_a) => {
+    var { severity = `success`, messageLabel, messageText, linkText = ``, handleClose, open } = _a, props = __rest(_a, ["severity", "messageLabel", "messageText", "linkText", "handleClose", "open"]);
+    return (_jsxs(Box, { children: [_jsx(Snackbar, Object.assign({}, props, { open: open })), _jsx(Alert, Object.assign({ onClose: handleClose, severity: severity }, { children: _jsxs(Box, Object.assign({ sx: {
+                        display: `flex`,
+                        alignItems: `center`
+                    } }, { children: [_jsx(Typography, Object.assign({ sx: {
+                                fontSize: `12px`,
+                                fontWeight: `bold`,
+                                marginRight: `2px`
+                            } }, { children: messageLabel
+                                ? `${messageLabel + ` `}: `
+                                : `${defaultMessageLabel[severity]}: ` })), _jsx(Typography, Object.assign({ sx: {
+                                fontSize: `12px`
+                            } }, { children: messageText
+                                ? `${messageText + ` `} `
+                                : defaultMessageText[severity] })), linkText && _jsx(Link, Object.assign({ href: "#" }, { children: linkText }))] })) }))] }));
+};
+export default Toast;

package/dist/components/Typography/Typography.stories.d.ts

@@ -13,7 +13,7 @@ declare const _default: ComponentMeta<({ ...props }: {
     sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
     variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("color" | "p" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">) => JSX.Element>;
 export default _default;

package/dist/components/UtilityRail/__tests__/UtilityRail.test.js

@@ -5,23 +5,7 @@ import UtilityRail from '..';
 import { mock } from '../mock';
 describe('<UtilityRail />', () => {
     it('should render the UtilityRail component', () => {
-        render(_jsx(UtilityRail, { items: mock }));
-        expect(screen.getByText('UtilityRail')).toBeInTheDocument();
-    });
-    it('should render a specific amount of items', () => {
-        render(_jsx(UtilityRail, { "data-testid": "utility-rail", items: [
-                {
-                    title: 'Title item 1',
-                    subtitle: 'Subtitle item 1',
-                    description: 'Description item 1'
-                },
-                {
-                    title: 'Title item 2',
-                    subtitle: 'Subtitle item 2',
-                    description: 'Description item 2'
-                }
-            ] }));
-        const utilityRail = screen.getByTestId('utility-rail');
-        expect(utilityRail.childElementCount).toHaveLength(2);
+        render(_jsx(UtilityRail, { items: mock, "data-testid": "UtilityRail" }));
+        expect(screen.getByTestId('UtilityRail')).toBeInTheDocument();
     });
 });

package/dist/index.d.ts

@@ -25,5 +25,6 @@ export { default as RadioGroup } from './components/RadioGroup';
 export { default as Step } from './components/Step';
 export { default as StepLabel } from './components/StepLabel';
 export { default as ModelGridView } from './components/ModelGridView';
+export { default as Breadcrumbs } from './components/Breadcrumbs';
 export { default as theme } from './assets/theme';
 export { useTheme } from '@mui/material';

package/dist/index.js

@@ -25,5 +25,6 @@ export { default as RadioGroup } from './components/RadioGroup';
 export { default as Step } from './components/Step';
 export { default as StepLabel } from './components/StepLabel';
 export { default as ModelGridView } from './components/ModelGridView';
+export { default as Breadcrumbs } from './components/Breadcrumbs';
 export { default as theme } from './assets/theme';
 export { useTheme } from '@mui/material';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.12.6",
+  "version": "1.12.8",
   "private": false,
   "scripts": {
     "start": "yarn storybook",