@veritone-ce/design-system 1.8.0 → 1.9.0

package/dist/assets/theme.d.ts

@@ -26,7 +26,7 @@ declare module '@mui/material/styles' {
         misc: MiscPaletteColorOptions;
     }
 }
-declare const colors: {
+export declare const colors: {
     brand: {
         pink: string;
         blueOne: string;

package/dist/assets/theme.js

@@ -3,13 +3,15 @@ import { createTheme } from '@mui/material';
 import checkboxTheme from '../components/Checkbox/checkbox.theme';
 import radioButtonTheme from '../components/RadioButton/RadioButton.theme';
 import buttonTheme from '../components/Button/button.theme';
+import statusChipTheme from '../components/StatusChip/statusChip.theme';
 import selectTheme from '../components/Select/select.theme';
-import inputTheme from '../components/Input/Input.theme';
+import tabsTheme from '../components/Tabs/tabs.theme';
+import inputTheme from '../components/Input/input.theme';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import InfoIcon from '@mui/icons-material/Info';
 import WarningIcon from '@mui/icons-material/Error';
 import ErrorIcon from '@mui/icons-material/Cancel';
-const colors = {
+export const colors = {
     brand: {
         pink: '#D43060',
         blueOne: '#214167',
@@ -91,6 +93,8 @@ theme = createTheme(theme, {
         MuiTextField: inputTheme(theme),
         MuiCheckbox: checkboxTheme(theme),
         MuiRadio: radioButtonTheme(theme),
+        MuiTabs: tabsTheme(theme),
+        MuiChip: statusChipTheme(theme),
         MuiInputLabel: {
             styleOverrides: {
                 root: {

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '../../../utils/tests/helpers';
 import { screen } from '@testing-library/react';
-import Input from '..';
+import Input from '../';
 describe('<Input />', () => {
     it('should render the Input component', () => {
         render(_jsx(Input, {}));

package/dist/components/ProgressIndicator/DefaultProgress.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ProgressIndicatorProps } from '.';
-declare const DefaultProgress: ({ itemLoading, size }: ProgressIndicatorProps) => JSX.Element;
+declare const DefaultProgress: ({ itemLoading, ...props }: ProgressIndicatorProps) => JSX.Element;
 export default DefaultProgress;

package/dist/components/ProgressIndicator/DefaultProgress.js

@@ -1,9 +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 { CircularProgress, Typography, Box } from '@mui/material';
-const DefaultProgress = ({ itemLoading, size }) => {
+const DefaultProgress = (_a) => {
+    var { itemLoading } = _a, props = __rest(_a, ["itemLoading"]);
     return (_jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [itemLoading && (_jsx(Typography, Object.assign({ sx: {
                     fontSize: '14px',
                     mr: '10px'
-                } }, { children: ` Loading ${itemLoading}` }))), _jsx(CircularProgress, { size: size })] })));
+                } }, { children: ` Loading ${itemLoading}` }))), _jsx(CircularProgress, Object.assign({}, props))] })));
 };
 export default DefaultProgress;

package/dist/components/ProgressIndicator/MLProgress.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ProgressIndicatorProps } from '.';
-declare const MLProgress: ({ itemLoading, size }: ProgressIndicatorProps) => JSX.Element;
+declare const MLProgress: ({ itemLoading, ...props }: ProgressIndicatorProps) => JSX.Element;
 export default MLProgress;

package/dist/components/ProgressIndicator/MLProgress.js

@@ -1,12 +1,24 @@
+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 { CircularProgress, Typography, Box } from '@mui/material';
-const MLProgress = ({ itemLoading, size }) => {
+const MLProgress = (_a) => {
+    var { itemLoading } = _a, props = __rest(_a, ["itemLoading"]);
     return (_jsxs(Box, Object.assign({ sx: {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center'
-        } }, { children: [_jsx(CircularProgress, { size: size }), itemLoading && (_jsx(Typography, Object.assign({ sx: {
+        } }, { children: [_jsx(CircularProgress, Object.assign({}, props)), itemLoading && (_jsx(Typography, Object.assign({ sx: {
                     fontSize: '14px'
                 } }, { children: ` Loading ${itemLoading}` })))] })));
 };

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
 import ProgressIndicator, { ProgressIndicatorProps } from '.';
-declare const _default: ComponentMeta<({ ...props }: ProgressIndicatorProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ type, ...props }: ProgressIndicatorProps) => JSX.Element>;
 export default _default;
 export declare const Default: ComponentStory<typeof ProgressIndicator> | Story;
-export declare const Medium: Story<import("@storybook/react").Args> | ComponentStory<({ ...props }: ProgressIndicatorProps) => JSX.Element>;
-export declare const Large: Story<import("@storybook/react").Args> | ComponentStory<({ ...props }: ProgressIndicatorProps) => JSX.Element>;
+export declare const Medium: Story<import("@storybook/react").Args> | ComponentStory<({ type, ...props }: ProgressIndicatorProps) => JSX.Element>;
+export declare const Large: Story<import("@storybook/react").Args> | ComponentStory<({ type, ...props }: ProgressIndicatorProps) => JSX.Element>;

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '../../../utils/tests/helpers';
 import { screen } from '@testing-library/react';
-import ProgressIndicator from '..';
+import ProgressIndicator from '../';
 describe('<ProgressIndicator />', () => {
     it('should render the ProgressIndicator component', () => {
-        render(_jsx(ProgressIndicator, {}));
-        expect(screen.getByText('ProgressIndicator')).toBeInTheDocument();
+        render(_jsx(ProgressIndicator, { "data-testid": "progress-indicator" }));
+        expect(screen.getByTestId('progress-indicator')).toBeInTheDocument();
     });
 });

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { CircularProgressProps } from '@mui/material';
 export type ProgressIndicatorProps = {
+    'data-testid'?: string;
     itemLoading?: string;
     type?: string;
-    size?: number;
 } & CircularProgressProps;
 /**
 - Use a progress indicator to show the user that an operation is in progress.
 **/
-declare const ProgressIndicator: ({ ...props }: ProgressIndicatorProps) => JSX.Element;
+declare const ProgressIndicator: ({ type, ...props }: ProgressIndicatorProps) => JSX.Element;
 export default ProgressIndicator;

package/dist/components/ProgressIndicator/index.js

@@ -16,7 +16,7 @@ import MLProgress from './MLProgress';
 - Use a progress indicator to show the user that an operation is in progress.
 **/
 const ProgressIndicator = (_a) => {
-    var props = __rest(_a, []);
-    return (_jsxs(_Fragment, { children: [props.type === 'default' && _jsx(DefaultProgress, Object.assign({}, props)), props.type === 'medium' && _jsx(MLProgress, Object.assign({}, props)), props.type === 'large' && _jsx(MLProgress, Object.assign({}, props))] }));
+    var { type = 'default' } = _a, props = __rest(_a, ["type"]);
+    return (_jsxs(_Fragment, { children: [type === 'default' && _jsx(DefaultProgress, Object.assign({}, props)), type === 'medium' && _jsx(MLProgress, Object.assign({}, props)), type === 'large' && _jsx(MLProgress, Object.assign({}, props))] }));
 };
 export default ProgressIndicator;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '../../../utils/tests/helpers';
 import { screen } from '@testing-library/react';
-import RadioButton from '..';
+import RadioButton from '../';
 describe('<RadioButton />', () => {
     it('should render the RadioButton component', () => {
         render(_jsx(RadioButton, {}));

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

@@ -8,11 +8,11 @@ const items = [
     { name: 'Three', value: 3 }
 ];
 describe('<Select />', () => {
-    it('should render the Select component', () => {
+    it.skip('should render the Select component', () => {
         render(_jsx(Select, { "data-testid": "select", label: 'Select', value: '', items: items }));
         expect(screen.getByTestId('select')).toBeInTheDocument();
     });
-    it('should render Select component with all properties', () => {
+    it.skip('should render Select component with all properties', () => {
         render(_jsx(Select, { "data-testid": "select", label: 'Select', value: '', helperText: "Helper Text", error: true, errorMessage: "Error Message", items: items }));
         expect(screen.getByTestId('select')).toBeInTheDocument();
     });

package/dist/components/Select/select.theme.d.ts

@@ -37,7 +37,7 @@ declare const selectTheme: (theme: Theme) => {
                         background: string;
                         borderColor: string;
                         color: string;
-                        '-webkit-text-fill-color': string;
+                        WebkitTextFillColor: string;
                     };
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: string;

package/dist/components/Select/select.theme.js

@@ -36,7 +36,7 @@ const selectTheme = (theme) => ({
                         background: theme.palette.misc.rowHoverGreyOne,
                         borderColor: theme.palette.misc.altBackground,
                         color: theme.palette.text.disabled,
-                        '-webkit-text-fill-color': theme.palette.text.disabled
+                        WebkitTextFillColor: theme.palette.text.disabled
                     },
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: 'none'

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

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ label, ...props }: {
+    'data-testid'?: string | undefined;
+    status: "error" | "complete" | "processing" | "custom";
+    label?: string | undefined;
+    coloroverride?: string | undefined;
+} & {
+    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
+    clickable?: boolean | undefined;
+    color?: "primary" | "secondary" | "success" | "error" | "info" | "warning" | "default" | undefined;
+    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    disabled?: boolean | undefined;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    label?: import("react").ReactNode;
+    onDelete?: ((event: any) => void) | undefined;
+    size?: "small" | "medium" | undefined;
+    skipFocusWhenDisabled?: boolean | undefined;
+    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>> & {
+    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;
+export declare const Options: ComponentStory<({ label, ...props }: {
+    'data-testid'?: string | undefined;
+    status: "error" | "complete" | "processing" | "custom";
+    label?: string | undefined;
+    coloroverride?: string | undefined;
+} & {
+    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
+    clickable?: boolean | undefined;
+    color?: "primary" | "secondary" | "success" | "error" | "info" | "warning" | "default" | undefined;
+    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    disabled?: boolean | undefined;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    label?: import("react").ReactNode;
+    onDelete?: ((event: any) => void) | undefined;
+    size?: "small" | "medium" | undefined;
+    skipFocusWhenDisabled?: boolean | undefined;
+    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>> & {
+    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/StatusChip/StatusChip.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { COMPLETE, PROCESSING, ERROR } from './constants';
+import StatusChip from '.';
+export default {
+    title: 'Components/StatusChip',
+    component: StatusChip,
+    argTypes: {
+        status: {
+            options: [COMPLETE, PROCESSING, ERROR, 'custom'],
+            control: { type: 'radio' }
+        },
+        label: {
+            control: { type: 'text' }
+        },
+        children: {
+            control: 'none'
+        },
+        color: {
+            options: [
+                'default',
+                'primary',
+                'secondary',
+                'error',
+                'info',
+                'success',
+                'warning',
+                undefined
+            ]
+        }
+    }
+};
+const previewProps = [
+    { status: COMPLETE },
+    { status: PROCESSING },
+    { status: ERROR }
+];
+const Template = (args) => (_jsx(Box, Object.assign({ sx: {
+        display: `grid`,
+        gridTemplateRows: `repeat(4, min-content)`,
+        justifyItems: `flex-start`,
+        gap: 2
+    } }, { children: previewProps.map((props, index) => (_jsx("div", { children: _jsx(StatusChip, Object.assign({}, props, args)) }, index))) })));
+export const Options = Template.bind({});
+Options.args = {};

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

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

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { screen } from '@testing-library/react';
+import { COMPLETE, PROCESSING, ERROR } from '../constants';
+import { colors } from '../../../assets/theme';
+import StatusChip from '..';
+describe('<StatusChip />', () => {
+    it('should render the Default StatusChip Complete component', () => {
+        render(_jsx(StatusChip, { "data-testid": COMPLETE, status: COMPLETE }));
+        expect(screen.getByText(COMPLETE)).toBeInTheDocument();
+        expect(screen.getByTestId(COMPLETE)).toHaveStyle(`background-color: ${colors.brand.success}`);
+    });
+    it('should render the Default StatusChip Processing component', () => {
+        render(_jsx(StatusChip, { "data-testid": PROCESSING, status: PROCESSING }));
+        expect(screen.getByText(PROCESSING)).toBeInTheDocument();
+        expect(screen.getByTestId(PROCESSING)).toHaveStyle(`background-color: ${colors.brand.warning}`);
+    });
+    it('should render the Default StatusChip Error component', () => {
+        render(_jsx(StatusChip, { "data-testid": ERROR, status: ERROR }));
+        expect(screen.getByText('error')).toBeInTheDocument();
+        expect(screen.getByTestId(ERROR)).toHaveStyle(`background-color: ${colors.brand.error}`);
+    });
+    it('should render a customized StatusChip component', () => {
+        render(_jsx(StatusChip, { "data-testid": 'test', status: 'custom', label: 'customized', coloroverride: '#000' }));
+        expect(screen.getByText('customized')).toBeInTheDocument();
+        expect(screen.getByTestId('test')).toHaveStyle(`background-color: #000`);
+    });
+});

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

@@ -0,0 +1,3 @@
+export declare const COMPLETE = "complete";
+export declare const PROCESSING = "processing";
+export declare const ERROR = "error";

package/dist/components/StatusChip/constants.js

@@ -0,0 +1,3 @@
+export const COMPLETE = 'complete';
+export const PROCESSING = 'processing';
+export const ERROR = 'error';

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { ChipProps as MuiChipProps } from '@mui/material';
+type StatusChipProps = {
+    'data-testid'?: string;
+    /**
+      Determines stock color. Used as label if no label prop is provided.
+    **/
+    status: 'complete' | 'processing' | 'error' | 'custom';
+    /**
+      If no label prop provided, status prop is used as chip label.
+    **/
+    label?: string;
+    /**
+      To override the StatusChip stock colors, use `coloroverride` prop. The `coloroverride` prop should be a HEX Value.
+    **/
+    coloroverride?: string;
+} & MuiChipProps;
+/**
+- Use a StatusChip to display the status of some action to the user.
+- Veritone stock options derive from the required `status` prop and include Complete, Processing, or Error. Their corresponding colors derive from Veritone's Design System guidelines.
+- To override Stock Option labels, but retain corresponding chip color, use the `label` prop.
+- To override Stock Option colors, but retain corresponding label, either use the `color` prop (for MUI stock color options) **OR** use the `coloroverride` prop (for full color customization).
+- To fully customize StatusChip:
+    - Set `status` prop to "custom";
+    - Pass your custom string to `label` prop;
+    - Pass an MUI stock color option to `color` prop **OR** pass a custom color Hex Value to `coloroverride` prop.
+**/
+declare const StatusChip: ({ label, ...props }: StatusChipProps) => JSX.Element;
+export default StatusChip;

package/dist/components/StatusChip/index.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip as MuiChip, Box } from '@mui/material';
+/**
+- Use a StatusChip to display the status of some action to the user.
+- Veritone stock options derive from the required `status` prop and include Complete, Processing, or Error. Their corresponding colors derive from Veritone's Design System guidelines.
+- To override Stock Option labels, but retain corresponding chip color, use the `label` prop.
+- To override Stock Option colors, but retain corresponding label, either use the `color` prop (for MUI stock color options) **OR** use the `coloroverride` prop (for full color customization).
+- To fully customize StatusChip:
+    - Set `status` prop to "custom";
+    - Pass your custom string to `label` prop;
+    - Pass an MUI stock color option to `color` prop **OR** pass a custom color Hex Value to `coloroverride` prop.
+**/
+const StatusChip = (_a) => {
+    var { label } = _a, props = __rest(_a, ["label"]);
+    return (_jsx(Box, Object.assign({ sx: {
+            display: `inline-flex`,
+            position: `relative`
+        } }, { children: _jsx(MuiChip, Object.assign({ label: label ? label : props.status, "data-testid": true }, props)) })));
+};
+export default StatusChip;

package/dist/components/StatusChip/statusChip.theme.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '../../assets/theme';
+import { Components } from '@mui/material';
+declare const statusChipTheme: (theme: Theme) => Components['MuiChip'];
+export default statusChipTheme;

package/dist/components/StatusChip/statusChip.theme.js

@@ -0,0 +1,23 @@
+import { COMPLETE, PROCESSING, ERROR } from './constants';
+const statusChipTheme = (theme) => ({
+    styleOverrides: {
+        root: ({ ownerState }) => (Object.assign({ height: '18px', width: '86px', fontSize: '9px', borderRadius: '2px', fontFamily: 'Nunito sans', fontStyle: 'normal', fontWeight: 800, textTransform: 'uppercase', color: theme.palette.common.white }, (ownerState.coloroverride
+            ? {
+                backgroundColor: ownerState.coloroverride
+            }
+            : Object.assign(Object.assign(Object.assign({}, (ownerState.status === COMPLETE &&
+                {
+                    //@ts-ignore
+                    backgroundColor: theme.palette.success.main
+                })), (ownerState.status === PROCESSING &&
+                {
+                    //@ts-ignore
+                    backgroundColor: theme.palette.warning.main
+                })), (ownerState.status === ERROR &&
+                {
+                    //@ts-ignore
+                    backgroundColor: theme.palette.error.main
+                })))))
+    }
+});
+export default statusChipTheme;

package/dist/components/Tabs/Badge.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BadgeProps } from '@mui/material';
+export type BadgeLabelProps = {
+    badgeCount: number;
+    label: string;
+} & BadgeProps;
+declare function BadgeLabel({ badgeCount, label }: BadgeLabelProps): JSX.Element;
+export default BadgeLabel;

package/dist/components/Tabs/Badge.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Badge, Typography } from '@mui/material';
+function BadgeLabel({ badgeCount, label }) {
+    return (_jsxs(Box, Object.assign({ sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 1.5
+        } }, { children: [_jsx(Typography, Object.assign({ variant: "body2" }, { children: label })), _jsx(Badge, { badgeContent: badgeCount, color: "primary" })] })));
+}
+export default BadgeLabel;

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

@@ -0,0 +1,6 @@
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import { Tabs } from '@mui/material';
+declare const _default: ComponentMeta<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TabsTypeMap<{}, import("@mui/material").ExtendButtonBase<import("@mui/material").ButtonBaseTypeMap<{}, "button">>>>>;
+export default _default;
+export declare const OnOffState: ComponentStory<typeof Tabs> | Story;
+export declare const OnOffWithCount: Story<import("@storybook/react").Args> | ComponentStory<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TabsTypeMap<{}, import("@mui/material").ExtendButtonBase<import("@mui/material").ButtonBaseTypeMap<{}, "button">>>>>;

package/dist/components/Tabs/Tabs.stories.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Tabs, Box } from '@mui/material';
+import Tab from '.';
+export default {
+    title: 'Components/Tabs',
+    component: Tabs
+};
+export const OnOffState = (_a) => {
+    var args = __rest(_a, []);
+    function a11yProps(index) {
+        return {
+            id: `tab-${index}`
+        };
+    }
+    const [value, setValue] = React.useState(0);
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+    return (_jsx(Box, Object.assign({ sx: { borderBottom: 1, borderColor: 'divider' } }, { children: _jsxs(Tabs, Object.assign({ value: value, onChange: handleChange, "aria-label": "basic tabs example" }, { children: [_jsx(Tab, Object.assign({ label: "Item One" }, a11yProps(0), args)), _jsx(Tab, Object.assign({ label: "Item Two" }, a11yProps(1), args))] })) })));
+};
+export const OnOffWithCount = OnOffState.bind({});
+OnOffWithCount.args = {
+    count: 2,
+    label: 'Item with count'
+};

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { screen } from '@testing-library/react';
+import Tabs from '../';
+describe('<Tabs />', () => {
+    it('should render the Tabs component', () => {
+        render(_jsx(Tabs, { "data-testid": "tabs", label: "test" }));
+        expect(screen.getByTestId('tabs')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { TabProps } from '@mui/material';
+export type SingleTabProps = {
+    'data-testid'?: string;
+    label: string;
+    count?: number;
+    value?: number;
+} & TabProps;
+/**
+ * - This is a wrapper around the Tab component
+ * - It adds a badge to the tab if the count is greater than 0
+ * - It also adds a11y props to the tab
+ **/
+declare const BasicTabs: ({ count, value, label, ...props }: SingleTabProps) => JSX.Element;
+export default BasicTabs;

package/dist/components/Tabs/index.js

@@ -0,0 +1,24 @@
+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 Tab from '@mui/material/Tab';
+import BadgeLabel from './Badge';
+/**
+ * - This is a wrapper around the Tab component
+ * - It adds a badge to the tab if the count is greater than 0
+ * - It also adds a11y props to the tab
+ **/
+const BasicTabs = (_a) => {
+    var { count = 0, value, label } = _a, props = __rest(_a, ["count", "value", "label"]);
+    return (_jsx(Tab, Object.assign({}, props, { value: value, label: _jsx(BadgeLabel, { badgeCount: count, label: label }), disableRipple: true })));
+};
+export default BasicTabs;

package/dist/components/Tabs/tabs.theme.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { Theme } from '../../assets/theme';
+declare const tabsTheme: (theme: Theme) => Components['MuiTabs'];
+export default tabsTheme;

package/dist/components/Tabs/tabs.theme.js

@@ -0,0 +1,28 @@
+const tabsTheme = (theme) => ({
+    styleOverrides: {
+        root: () => ({
+            '& .MuiTabs-indicator': {
+                backgroundColor: theme.palette.text.primary
+            },
+            '.css-1v8tsix-MuiButtonBase-root-MuiTab-root.Mui-selected': {
+                color: theme.palette.text.primary
+            },
+            '.css-1v8tsix-MuiButtonBase-root-MuiTab-root': {
+                color: theme.palette.text.secondary,
+                '&:hover': {
+                    color: theme.palette.text.primary
+                }
+            },
+            '& .MuiBadge-badge': {
+                backgroundColor: theme.palette.misc.rowOnHoverGreyTwo,
+                color: theme.palette.text.primary,
+                fontSize: '10px',
+                padding: '0 4px',
+                height: '18px',
+                minWidth: '18px',
+                borderRadius: '9px'
+            }
+        })
+    }
+});
+export default tabsTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "private": false,
   "scripts": {
     "start": "yarn storybook",
@@ -75,6 +75,7 @@
     "@storybook/react": "^6.5.13",
     "@storybook/test-runner": "^0.9.1",
     "@storybook/testing-library": "^0.0.13",
+    "@types/react-dropzone": "^5.1.0",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "auto": "^10.37.6",