@veritone-ce/design-system 1.12.15 → 1.12.17

package/dist/assets/theme.js

@@ -1,270 +1,356 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createTheme } from '@mui/material';
-import stepperTheme from '../components/Stepper/stepper.theme';
-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 tabsTheme from '../components/Tabs/tabs.theme';
-import inputTheme from '../components/Input/input.theme';
-import { menuFlyoutTheme, menuItemTheme } from '../components/MenuFlyout/menuFlyout.theme';
-import modalTheme from '../components/Modal/modal.theme';
-import linearProgress from '../components/LinearProgress/linearProgress.theme';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import InformationIcon from './information.svg';
-import WarningIcon from './warning.svg';
-import ErrorIcon from '@mui/icons-material/Cancel';
-export const colors = {
-    brand: {
-        pink: '#D43060',
-        blueOne: '#214167',
-        blueTwo: '#335B89',
-        warning: '#FFBB0A',
-        success: '#28BA3F',
-        error: '#EB0000',
-        white: `#FFFFFF`
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.colors = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _stepper = _interopRequireDefault(require("../components/Stepper/stepper.theme"));
+var _checkbox = _interopRequireDefault(require("../components/Checkbox/checkbox.theme"));
+var _RadioButton = _interopRequireDefault(require("../components/RadioButton/RadioButton.theme"));
+var _button = _interopRequireDefault(require("../components/Button/button.theme"));
+var _statusChip = _interopRequireDefault(require("../components/StatusChip/statusChip.theme"));
+var _select = _interopRequireDefault(require("../components/Select/select.theme"));
+var _tabs = _interopRequireDefault(require("../components/Tabs/tabs.theme"));
+var _input = _interopRequireDefault(require("../components/Input/input.theme"));
+var _menuFlyout = require("../components/MenuFlyout/menuFlyout.theme");
+var _modal = _interopRequireDefault(require("../components/Modal/modal.theme"));
+var _linearProgress = _interopRequireDefault(require("../components/LinearProgress/linearProgress.theme"));
+var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
+var _Cancel = _interopRequireDefault(require("@mui/icons-material/Cancel"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var InformationIcon = function InformationIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm1.674-4.444.14-.575c-.072.034-.189.073-.35.118a1.655 1.655 0 0 1-.436.067c-.272 0-.464-.045-.575-.134-.11-.09-.166-.258-.166-.505 0-.098.017-.243.051-.435.034-.191.073-.362.115-.511l.524-1.86c.051-.17.087-.358.106-.563.019-.204.028-.347.028-.428 0-.392-.137-.71-.412-.956-.275-.244-.666-.367-1.173-.367-.281 0-.58.05-.895.15-.315.1-.645.22-.99.361l-.141.576c.102-.039.225-.08.368-.122.142-.043.282-.064.418-.064.277 0 .465.047.563.14.098.095.147.26.147.5 0 .131-.016.277-.048.437-.032.16-.072.33-.119.508l-.524 1.867a5.499 5.499 0 0 0-.102.527 3.366 3.366 0 0 0-.032.457c0 .384.142.7.425.95.284.249.681.373 1.192.373.333 0 .625-.043.876-.13.252-.088.588-.215 1.01-.38Zm-.093-7.552a1.09 1.09 0 0 0 .368-.828 1.1 1.1 0 0 0-.368-.83A1.247 1.247 0 0 0 12.696 7c-.345 0-.641.115-.889.345-.247.23-.37.507-.37.831 0 .324.123.6.37.828.248.228.544.342.889.342s.64-.114.885-.342Z",
+      fill: "#214167"
+    })
+  });
+};
+InformationIcon.defaultProps = {
+  width: "22",
+  height: "22",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var WarningIcon = function WarningIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M17.075 17.075A9.976 9.976 0 0 0 20 10a9.976 9.976 0 0 0-2.925-7.075A9.976 9.976 0 0 0 10 0a9.976 9.976 0 0 0-7.075 2.925A9.976 9.976 0 0 0 0 10a9.976 9.976 0 0 0 2.925 7.075A9.976 9.976 0 0 0 10 20a9.976 9.976 0 0 0 7.075-2.925Zm-5.722-3.218A1.35 1.35 0 0 0 10 12.505c-.75 0-1.371.603-1.371 1.352 0 .75.621 1.372 1.371 1.372s1.353-.622 1.353-1.372ZM10 11.134c-.494 0-.86-.403-.914-.915l-.457-4.076C8.556 5.43 9.305 4.77 10 4.77s1.444.659 1.353 1.372l-.439 4.076c-.055.512-.42.915-.914.915Z",
+      fill: "#FFBB0A"
+    })
+  });
+};
+WarningIcon.defaultProps = {
+  width: "22",
+  height: "22",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const colors = {
+  brand: {
+    pink: '#D43060',
+    blueOne: '#214167',
+    blueTwo: '#335B89',
+    warning: '#FFBB0A',
+    success: '#28BA3F',
+    error: '#EB0000',
+    white: `#FFFFFF`
+  },
+  text: {
+    primary: `#2A323C`,
+    secondary: `#5C6269`,
+    tertiary: `#465364`,
+    disabled: `#7C848D`
+  },
+  button: {
+    primary: `#1871E8`,
+    hover: `#1259B9`
+  },
+  misc: {
+    background: `#E4ECF3`,
+    altBackground: `#E0E8F0`,
+    rowHoverGreyOne: `#FAFAFA`,
+    rowOn: `#F2F7FE`,
+    rowOnHoverGreyTwo: `#EAF1FA`
+  }
+};
+exports.colors = colors;
+// create theme in steps https://mui.com/material-ui/customization/theming/#api
+
+let theme = (0, _material.createTheme)({
+  typography: {
+    fontFamily: ['Nunito Sans', 'Helvetica', 'sans-serif'].join(','),
+    h2: {
+      fontSize: '1.429rem',
+      lineHeight: '2.143rem',
+      fontWeight: '700'
     },
-    text: {
-        primary: `#2A323C`,
-        secondary: `#5C6269`,
-        tertiary: `#465364`,
-        disabled: `#7C848D`
+    body1: {
+      color: colors.text.primary
+    }
+  },
+  palette: {
+    common: {
+      white: colors.brand.white
+    },
+    action: {
+      disabledBackground: colors.misc.rowHoverGreyOne,
+      disabled: colors.text.disabled
+    },
+    primary: {
+      main: colors.brand.blueOne
+    },
+    secondary: {
+      main: colors.brand.blueTwo,
+      contrastText: colors.brand.white
+    },
+    neutral: {
+      main: colors.text.secondary
     },
     button: {
-        primary: `#1871E8`,
-        hover: `#1259B9`
+      main: colors.button.primary,
+      hover: colors.button.hover
     },
-    misc: {
-        background: `#E4ECF3`,
-        altBackground: `#E0E8F0`,
-        rowHoverGreyOne: `#FAFAFA`,
-        rowOn: `#F2F7FE`,
-        rowOnHoverGreyTwo: `#EAF1FA`
-    }
-};
-// create theme in steps https://mui.com/material-ui/customization/theming/#api
-let theme = createTheme({
-    typography: {
-        fontFamily: ['Nunito Sans', 'Helvetica', 'sans-serif'].join(','),
-        h2: {
-            fontSize: '1.429rem',
-            lineHeight: '2.143rem',
-            fontWeight: '700'
-        },
-        body1: {
-            color: colors.text.primary
-        }
+    success: {
+      main: colors.brand.success
     },
-    palette: {
-        common: {
-            white: colors.brand.white
-        },
-        action: {
-            disabledBackground: colors.misc.rowHoverGreyOne,
-            disabled: colors.text.disabled
-        },
-        primary: {
-            main: colors.brand.blueOne
-        },
-        secondary: {
-            main: colors.brand.blueTwo,
-            contrastText: colors.brand.white
-        },
-        neutral: {
-            main: colors.text.secondary
-        },
-        button: {
-            main: colors.button.primary,
-            hover: colors.button.hover
-        },
-        success: {
-            main: colors.brand.success
-        },
-        warning: {
-            main: colors.brand.warning
-        },
-        error: {
-            main: colors.brand.error
-        },
-        divider: colors.brand.blueOne,
-        text: colors.text,
-        misc: colors.misc
+    warning: {
+      main: colors.brand.warning
     },
-    spacing: 10
+    error: {
+      main: colors.brand.error
+    },
+    divider: colors.brand.blueOne,
+    text: colors.text,
+    misc: colors.misc
+  },
+  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), MuiMenu: menuFlyoutTheme(theme), MuiMenuItem: menuItemTheme(theme), MuiLinearProgress: linearProgress(theme), MuiInputLabel: {
-            styleOverrides: {
-                root: {
-                    color: theme.palette.text.secondary,
-                    fontSize: `14px`,
-                    lineHeight: `21px`,
-                    fontWeight: `600`
-                }
-            }
-        }, MuiFormControlLabel: {
-            styleOverrides: {
-                root: {
-                    '& .MuiFormControlLabel-label': {
-                        color: theme.palette.text.secondary
-                    },
-                    '& .MuiFormControlLabel-label.Mui-disabled': {
-                        color: theme.palette.text.disabled
-                    }
-                }
-            }
-        }, MuiFormHelperText: {
-            styleOverrides: {
-                root: {
-                    position: 'relative',
-                    marginLeft: 0,
-                    '&.Mui-error': {
-                        paddingLeft: `17px`,
-                        '&::before': {
-                            content: `""`,
-                            height: `12px`,
-                            width: '12px',
-                            position: 'absolute',
-                            left: 0,
-                            top: `50%`,
-                            transform: `translate(0, -50%)`,
-                            backgroundColor: theme.palette.error.main,
-                            borderRadius: `100%`
-                        }
-                    }
-                }
-            }
-        }, MuiDialogTitle: {
-            styleOverrides: {
-                root: {
-                    fontSize: `24px`,
-                    lineHeight: `34px`,
-                    paddingTop: theme.spacing(3),
-                    paddingLeft: theme.spacing(3),
-                    paddingRight: theme.spacing(3),
-                    paddingBottom: theme.spacing(1)
-                }
-            }
-        }, MuiDialogContent: {
-            styleOverrides: {
-                root: {
-                    paddingTop: 0,
-                    paddingLeft: theme.spacing(3),
-                    paddingRight: theme.spacing(3),
-                    paddingBottom: theme.spacing(1)
-                }
-            }
-        }, MuiDialogActions: {
-            styleOverrides: {
-                root: {
-                    padding: theme.spacing(3)
-                }
-            }
-        }, MuiLink: {
-            defaultProps: {
-                underline: `none`,
-                color: colors.button.primary
-            }
-        }, MuiSnackbar: {
-            defaultProps: {
-                autoHideDuration: 3000,
-                anchorOrigin: {
-                    vertical: `top`,
-                    horizontal: `right`
-                }
-            },
-            styleOverrides: {
-                root: {
-                    width: `100%`,
-                    maxWidth: `415px`,
-                    position: `absolute`
-                }
-            }
-        }, MuiAlert: {
-            defaultProps: {
-                variant: `outlined`,
-                iconMapping: {
-                    success: _jsx(CheckCircleIcon, {}),
-                    info: _jsx("img", { alt: 'information icon', src: InformationIcon }),
-                    warning: _jsx("img", { alt: 'warning icon', src: WarningIcon }),
-                    error: _jsx(ErrorIcon, {})
-                }
-            },
-            styleOverrides: {
-                root: {
-                    width: `415px`,
-                    backgroundColor: `white`,
-                    position: `relative`,
-                    overflow: `hidden`,
-                    border: `1px solid #7C848D`,
-                    '&:after': {
-                        content: '""',
-                        position: `absolute`,
-                        width: `4px`,
-                        left: 0,
-                        top: 0,
-                        bottom: 0
-                    },
-                    '&.MuiAlert-outlinedSuccess:after': {
-                        backgroundColor: theme.palette.success.main
-                    },
-                    '&.MuiAlert-outlinedInfo:after': {
-                        backgroundColor: theme.palette.secondary.main
-                    },
-                    '&.MuiAlert-outlinedWarning:after': {
-                        backgroundColor: theme.palette.warning.main
-                    },
-                    '&.MuiAlert-outlinedError:after': {
-                        backgroundColor: theme.palette.error.main
-                    },
-                    '& .MuiAlert-icon': {
-                        opacity: 1,
-                        fontSize: 20
-                    },
-                    '& .MuiAlert-message': {
-                        fontSize: `12px`,
-                        lineHeight: `22px`,
-                        color: colors.text.primary
-                    },
-                    '& .MuiIconButton-root': {
-                        color: colors.text.tertiary
-                    }
-                }
-            }
-        }, MuiCircularProgress: {
-            styleOverrides: {
-                root: {
-                    color: theme.palette.button.main
-                }
-            }
-        }, MuiCardContent: {
-            styleOverrides: {
-                root: {
-                    padding: theme.spacing(2),
-                    paddingTop: theme.spacing(1)
-                }
-            }
-        }, MuiDataGrid: {
-            styleOverrides: {
-                root: {
-                    '& .MuiDataGrid-columnHeader:focus': {
-                        outline: 0
-                    },
-                    '& .MuiDataGrid-cell:focus': {
-                        outline: 0
-                    }
-                }
-            }
-        }, MuiPaper: {
-            styleOverrides: {
-                root: {
-                    '&.MuiMenu-paper': {
-                    // border: '1px solid ' + theme.palette.text.disabled,
-                    // boxShadow: 'none'
-                    }
-                }
+theme = (0, _material.createTheme)(theme, {
+  components: {
+    MuiButton: (0, _button.default)(theme),
+    ...(0, _stepper.default)(theme),
+    MuiSelect: (0, _select.default)(theme),
+    MuiTextField: (0, _input.default)(theme),
+    MuiDialog: (0, _modal.default)(theme),
+    MuiCheckbox: (0, _checkbox.default)(theme),
+    MuiRadio: (0, _RadioButton.default)(theme),
+    MuiTabs: (0, _tabs.default)(theme),
+    MuiChip: (0, _statusChip.default)(theme),
+    MuiMenu: (0, _menuFlyout.menuFlyoutTheme)(theme),
+    MuiMenuItem: (0, _menuFlyout.menuItemTheme)(theme),
+    MuiLinearProgress: (0, _linearProgress.default)(theme),
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.text.secondary,
+          fontSize: `14px`,
+          lineHeight: `21px`,
+          fontWeight: `600`
+        }
+      }
+    },
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: {
+          '& .MuiFormControlLabel-label': {
+            color: theme.palette.text.secondary
+          },
+          '& .MuiFormControlLabel-label.Mui-disabled': {
+            color: theme.palette.text.disabled
+          }
+        }
+      }
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          position: 'relative',
+          marginLeft: 0,
+          '&.Mui-error': {
+            paddingLeft: `17px`,
+            '&::before': {
+              content: `""`,
+              height: `12px`,
+              width: '12px',
+              position: 'absolute',
+              left: 0,
+              top: `50%`,
+              transform: `translate(0, -50%)`,
+              backgroundColor: theme.palette.error.main,
+              borderRadius: `100%`
             }
-        } })
+          }
+        }
+      }
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: `24px`,
+          lineHeight: `34px`,
+          paddingTop: theme.spacing(3),
+          paddingLeft: theme.spacing(3),
+          paddingRight: theme.spacing(3),
+          paddingBottom: theme.spacing(1)
+        }
+      }
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          paddingTop: 0,
+          paddingLeft: theme.spacing(3),
+          paddingRight: theme.spacing(3),
+          paddingBottom: theme.spacing(1)
+        }
+      }
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(3)
+        }
+      }
+    },
+    MuiLink: {
+      defaultProps: {
+        underline: `none`,
+        color: colors.button.primary
+      }
+    },
+    MuiSnackbar: {
+      defaultProps: {
+        autoHideDuration: 3000,
+        anchorOrigin: {
+          vertical: `top`,
+          horizontal: `right`
+        }
+      },
+      styleOverrides: {
+        root: {
+          width: `100%`,
+          maxWidth: `415px`,
+          position: `absolute`
+        }
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        variant: `outlined`,
+        iconMapping: {
+          success: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircle.default, {}),
+          info: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            alt: 'information icon',
+            src: InformationIcon
+          }),
+          warning: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            alt: 'warning icon',
+            src: WarningIcon
+          }),
+          error: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cancel.default, {})
+        }
+      },
+      styleOverrides: {
+        root: {
+          width: `415px`,
+          backgroundColor: `white`,
+          position: `relative`,
+          overflow: `hidden`,
+          border: `1px solid #7C848D`,
+          '&:after': {
+            content: '""',
+            position: `absolute`,
+            width: `4px`,
+            left: 0,
+            top: 0,
+            bottom: 0
+          },
+          '&.MuiAlert-outlinedSuccess:after': {
+            backgroundColor: theme.palette.success.main
+          },
+          '&.MuiAlert-outlinedInfo:after': {
+            backgroundColor: theme.palette.secondary.main
+          },
+          '&.MuiAlert-outlinedWarning:after': {
+            backgroundColor: theme.palette.warning.main
+          },
+          '&.MuiAlert-outlinedError:after': {
+            backgroundColor: theme.palette.error.main
+          },
+          '& .MuiAlert-icon': {
+            opacity: 1,
+            fontSize: 20
+          },
+          '& .MuiAlert-message': {
+            fontSize: `12px`,
+            lineHeight: `22px`,
+            color: colors.text.primary
+          },
+          '& .MuiIconButton-root': {
+            color: colors.text.tertiary
+          }
+        }
+      }
+    },
+    MuiCircularProgress: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.button.main
+        }
+      }
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(2),
+          paddingTop: theme.spacing(1)
+        }
+      }
+    },
+    MuiDataGrid: {
+      styleOverrides: {
+        root: {
+          '& .MuiDataGrid-columnHeader:focus': {
+            outline: 0
+          },
+          '& .MuiDataGrid-cell:focus': {
+            outline: 0
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          '&.MuiMenu-paper': {
+            // border: '1px solid ' + theme.palette.text.disabled,
+            // boxShadow: 'none'
+          }
+        }
+      }
+    }
+    // MuiMenuItem: {
+    //   styleOverrides: {
+    //     root: {
+    //       color: theme.palette.text.primary,
+    //       padding: '10px 20px',
+    //       ':hover, :focus': {
+    //         backgroundColor: theme.palette.misc.altBackground
+    //       }
+    //     }
+    //   }
+    // }
+  }
 });
-export default theme;
+var _default = theme;
+exports.default = _default;

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

@@ -1,10 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '../../../utils/tests/helpers';
-import { screen } from '@testing-library/react';
-import Box from '..';
+"use strict";
+
+var _helpers = require("../../../utils/tests/helpers");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require(".."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 describe('<Box />', () => {
-    it('should render the Box component', () => {
-        render(_jsx(Box, Object.assign({ "data-testid": "box" }, { children: "Box" })));
-        expect(screen.getByTestId('box')).toBeInTheDocument();
-    });
-});
+  it('should render the Box component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      "data-testid": "box",
+      children: "Box"
+    }));
+    expect(_react.screen.getByTestId('box')).toBeInTheDocument();
+  });
+});

package/dist/components/Box/index.js

@@ -1,18 +1,17 @@
-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;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+const Box = ({
+  ...props
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    ...props
+  });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box as MuiBox } from '@mui/material';
-const Box = (_a) => {
-    var props = __rest(_a, []);
-    return _jsx(MuiBox, Object.assign({}, props));
-};
-export default Box;
+var _default = Box;
+exports.default = _default;