@veritone-ce/design-system 1.12.44 → 1.12.46

package/dist/cjs/index.js

@@ -0,0 +1,312 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Alert", {
+  enumerable: true,
+  get: function get() {
+    return _index["default"];
+  }
+});
+Object.defineProperty(exports, "AudioSlider", {
+  enumerable: true,
+  get: function get() {
+    return _index2["default"];
+  }
+});
+Object.defineProperty(exports, "Autocomplete", {
+  enumerable: true,
+  get: function get() {
+    return _index35["default"];
+  }
+});
+Object.defineProperty(exports, "Breadcrumbs", {
+  enumerable: true,
+  get: function get() {
+    return _index3["default"];
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _index4["default"];
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _index5["default"];
+  }
+});
+Object.defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function get() {
+    return _index6["default"];
+  }
+});
+Object.defineProperty(exports, "FileUploader", {
+  enumerable: true,
+  get: function get() {
+    return _index7["default"];
+  }
+});
+Object.defineProperty(exports, "FormControlLabel", {
+  enumerable: true,
+  get: function get() {
+    return _index8["default"];
+  }
+});
+Object.defineProperty(exports, "HomeOutlinedIcon", {
+  enumerable: true,
+  get: function get() {
+    return _index32["default"];
+  }
+});
+Object.defineProperty(exports, "IconGroups", {
+  enumerable: true,
+  get: function get() {
+    return _index33["default"];
+  }
+});
+Object.defineProperty(exports, "IconListItem", {
+  enumerable: true,
+  get: function get() {
+    return _index34["default"];
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _index9["default"];
+  }
+});
+Object.defineProperty(exports, "LinearProgress", {
+  enumerable: true,
+  get: function get() {
+    return _index10["default"];
+  }
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function get() {
+    return _index11["default"];
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function get() {
+    return _index12["default"];
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function get() {
+    return _index13["default"];
+  }
+});
+Object.defineProperty(exports, "ListItemButton", {
+  enumerable: true,
+  get: function get() {
+    return _index14["default"];
+  }
+});
+Object.defineProperty(exports, "ListItemText", {
+  enumerable: true,
+  get: function get() {
+    return _index15["default"];
+  }
+});
+Object.defineProperty(exports, "MenuFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _index16["default"];
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _index17["default"];
+  }
+});
+Object.defineProperty(exports, "Panel", {
+  enumerable: true,
+  get: function get() {
+    return _index18["default"];
+  }
+});
+Object.defineProperty(exports, "ProgressIndicator", {
+  enumerable: true,
+  get: function get() {
+    return _index19["default"];
+  }
+});
+Object.defineProperty(exports, "RadioButton", {
+  enumerable: true,
+  get: function get() {
+    return _index20["default"];
+  }
+});
+Object.defineProperty(exports, "RadioGroup", {
+  enumerable: true,
+  get: function get() {
+    return _index21["default"];
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _index22["default"];
+  }
+});
+Object.defineProperty(exports, "StatusChip", {
+  enumerable: true,
+  get: function get() {
+    return _index23["default"];
+  }
+});
+Object.defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function get() {
+    return _index24["default"];
+  }
+});
+Object.defineProperty(exports, "StepLabel", {
+  enumerable: true,
+  get: function get() {
+    return _index25["default"];
+  }
+});
+Object.defineProperty(exports, "Stepper", {
+  enumerable: true,
+  get: function get() {
+    return _index26["default"];
+  }
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _index27.Table;
+  }
+});
+Object.defineProperty(exports, "TableBody", {
+  enumerable: true,
+  get: function get() {
+    return _index27.TableBody;
+  }
+});
+Object.defineProperty(exports, "TableCell", {
+  enumerable: true,
+  get: function get() {
+    return _index27.TableCell;
+  }
+});
+Object.defineProperty(exports, "TableContainer", {
+  enumerable: true,
+  get: function get() {
+    return _index27.TableContainer;
+  }
+});
+Object.defineProperty(exports, "TableFooter", {
+  enumerable: true,
+  get: function get() {
+    return _index27.TableFooter;
+  }
+});
+Object.defineProperty(exports, "TableHead", {
+  enumerable: true,
+  get: function get() {
+    return _index27.TableHead;
+  }
+});
+Object.defineProperty(exports, "TablePagination", {
+  enumerable: true,
+  get: function get() {
+    return _index27.TablePagination;
+  }
+});
+Object.defineProperty(exports, "TableRow", {
+  enumerable: true,
+  get: function get() {
+    return _index27.TableRow;
+  }
+});
+Object.defineProperty(exports, "TableSortLabel", {
+  enumerable: true,
+  get: function get() {
+    return _index27.TableSortLabel;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _index28["default"];
+  }
+});
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function get() {
+    return _index29["default"];
+  }
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function get() {
+    return _index30["default"];
+  }
+});
+Object.defineProperty(exports, "Typography", {
+  enumerable: true,
+  get: function get() {
+    return _index31["default"];
+  }
+});
+Object.defineProperty(exports, "createDesignSystemTheme", {
+  enumerable: true,
+  get: function get() {
+    return _theme.createDesignSystemTheme;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function get() {
+    return _theme.useTheme;
+  }
+});
+var _theme = require("./assets/theme.js");
+var _index = _interopRequireDefault(require("./components/Alert/index.js"));
+var _index2 = _interopRequireDefault(require("./components/AudioSlider/index.js"));
+var _index3 = _interopRequireDefault(require("./components/Breadcrumbs/index.js"));
+var _index4 = _interopRequireDefault(require("./components/Button/index.js"));
+var _index5 = _interopRequireDefault(require("./components/Checkbox/index.js"));
+var _index6 = _interopRequireDefault(require("./components/Drawer/index.js"));
+var _index7 = _interopRequireDefault(require("./components/FileUploader/index.js"));
+var _index8 = _interopRequireDefault(require("./components/FormControlLabel/index.js"));
+var _index9 = _interopRequireDefault(require("./components/Input/index.js"));
+var _index10 = _interopRequireDefault(require("./components/LinearProgress/index.js"));
+var _index11 = _interopRequireDefault(require("./components/Link/index.js"));
+var _index12 = _interopRequireDefault(require("./components/List/index.js"));
+var _index13 = _interopRequireDefault(require("./components/ListItem/index.js"));
+var _index14 = _interopRequireDefault(require("./components/ListItemButton/index.js"));
+var _index15 = _interopRequireDefault(require("./components/ListItemText/index.js"));
+var _index16 = _interopRequireDefault(require("./components/MenuFlyout/index.js"));
+var _index17 = _interopRequireDefault(require("./components/Modal/index.js"));
+var _index18 = _interopRequireDefault(require("./components/Panel/index.js"));
+var _index19 = _interopRequireDefault(require("./components/ProgressIndicator/index.js"));
+var _index20 = _interopRequireDefault(require("./components/RadioButton/index.js"));
+var _index21 = _interopRequireDefault(require("./components/RadioGroup/index.js"));
+var _index22 = _interopRequireDefault(require("./components/Select/index.js"));
+var _index23 = _interopRequireDefault(require("./components/StatusChip/index.js"));
+var _index24 = _interopRequireDefault(require("./components/Step/index.js"));
+var _index25 = _interopRequireDefault(require("./components/StepLabel/index.js"));
+var _index26 = _interopRequireDefault(require("./components/Stepper/index.js"));
+var _index27 = require("./components/Table/index.js");
+var _index28 = _interopRequireDefault(require("./components/Tabs/index.js"));
+var _index29 = _interopRequireDefault(require("./components/ThemeProvider/index.js"));
+var _index30 = _interopRequireDefault(require("./components/Toast/index.js"));
+var _index31 = _interopRequireDefault(require("./components/Typography/index.js"));
+var _index32 = _interopRequireDefault(require("./components/icons/HomeOutlinedIcon/index.js"));
+var _index33 = _interopRequireDefault(require("./components/icons/IconGroups/index.js"));
+var _index34 = _interopRequireDefault(require("./components/icons/IconListItem/index.js"));
+var _index35 = _interopRequireDefault(require("./components/Autocomplete/index.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/{assets → esm/assets}/theme.js

@@ -1,4 +1,9 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React from "react";
 import { createTheme, useTheme as muiUseTheme } from '@mui/material';
 import stepperTheme from '../components/Stepper/stepper.theme.js';
@@ -14,7 +19,7 @@ import modalTheme from '../components/Modal/modal.theme.js';
 import linearProgress from '../components/LinearProgress/linearProgress.theme.js';
 import { CheckCircle, Cancel } from '@mui/icons-material';
 var InformationIcon = function InformationIcon(props) {
-  return /*#__PURE__*/_jsx("svg", _extends({}, props, {
+  return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
@@ -30,7 +35,7 @@ InformationIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 var WarningIcon = function WarningIcon(props) {
-  return /*#__PURE__*/_jsx("svg", _extends({}, props, {
+  return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
@@ -136,9 +141,9 @@ export var defaultTheme = createTheme({
   spacing: 10
 });
 defaultTheme = createTheme(defaultTheme, {
-  components: _extends({
+  components: _objectSpread(_objectSpread({
     MuiButton: buttonTheme(defaultTheme)
-  }, stepperTheme(defaultTheme), {
+  }, stepperTheme(defaultTheme)), {}, {
     MuiSelect: selectTheme(defaultTheme),
     MuiTextField: inputTheme(defaultTheme),
     MuiDialog: modalTheme(defaultTheme),
@@ -323,21 +328,30 @@ defaultTheme = createTheme(defaultTheme, {
         }
       }
     },
-    MuiPaper: {
+    MuiPagination: {
       styleOverrides: {
-        root: {
-          '&.MuiMenu-paper': {
-            // border: '1px solid ' + theme.palette.text.disabled,
-            // boxShadow: 'none'
-          }
+        selectLabel: {
+          fontWeight: 400,
+          fontSize: '12px',
+          lineHeight: '18px',
+          color: colors.text.disabled
+        },
+        displayedRows: {
+          fontWeight: 400,
+          fontSize: '12px',
+          lineHeight: '18px',
+          color: colors.text.disabled
+        },
+        input: {
+          fontWeight: 400,
+          fontSize: '12px',
+          lineHeight: '18px'
         }
       }
     }
   })
 });
-export var createDesignSystemTheme = function createDesignSystemTheme(newTheme) {
-  if (newTheme === void 0) {
-    newTheme = {};
-  }
+export var createDesignSystemTheme = function createDesignSystemTheme() {
+  var newTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return createTheme(deepmerge(defaultTheme, newTheme || {}));
 };

package/dist/{components → esm/components}/Alert/index.js

@@ -17,7 +17,7 @@ var defaultMessageText = {
 };
 var Alert = function Alert(props) {
   var _props$severity;
-  var severity = (_props$severity = props.severity) != null ? _props$severity : 'success';
+  var severity = (_props$severity = props.severity) !== null && _props$severity !== void 0 ? _props$severity : 'success';
   return /*#__PURE__*/_jsx(MuiAlert, {
     "data-testid": props['data-testid'],
     onClose: props.onClose,
@@ -38,7 +38,7 @@ var Alert = function Alert(props) {
         children: props.label ? /*#__PURE__*/_jsxs("span", {
           children: [props.label, ': ']
         }) : /*#__PURE__*/_jsx("span", {
-          children: defaultMessageLabel[severity] + ": "
+          children: "".concat(defaultMessageLabel[severity], ": ")
         })
       }), /*#__PURE__*/_jsx(Typography, {
         sx: {

package/dist/esm/components/Autocomplete/index.js

@@ -0,0 +1,29 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+function ComboBox(_ref) {
+  var items = _ref.items,
+    label = _ref.label,
+    width = _ref.width,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/_jsx(Autocomplete, {
+    disablePortal: true,
+    options: items,
+    sx: {
+      width: width
+    },
+    renderInput: function renderInput(params) {
+      return /*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({}, params), {}, {
+        label: label
+      }));
+    },
+    onChange: onChange
+  });
+}
+export default ComboBox;

package/dist/{components → esm/components}/Breadcrumbs/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { Breadcrumbs as MuiBreadcrumbs, Link, Typography } from '@mui/material';
 import React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var Breadcrumbs = function Breadcrumbs(props) {
   var LinkComponent = React.useMemo(function () {
     var _props$LinkComponent;
-    return (_props$LinkComponent = props.LinkComponent) != null ? _props$LinkComponent : function (linkProps) {
+    return (_props$LinkComponent = props.LinkComponent) !== null && _props$LinkComponent !== void 0 ? _props$LinkComponent : function (linkProps) {
       return /*#__PURE__*/_jsx(Link, {
         href: linkProps.to,
         children: linkProps.children

package/dist/{components → esm/components}/Button/Indicator.js

@@ -17,7 +17,7 @@ var Indicator = function Indicator() {
         return theme.palette.misc.rowHoverGreyOne;
       },
       border: function border(theme) {
-        return "1px solid " + theme.palette.misc.rowOnHoverGreyTwo;
+        return "1px solid ".concat(theme.palette.misc.rowOnHoverGreyTwo);
       },
       borderRadius: '0.2rem'
     },

package/dist/{components → esm/components}/Button/button.theme.js

@@ -1,4 +1,9 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var buttonTheme = function buttonTheme(theme) {
   return {
     defaultProps: {
@@ -8,19 +13,19 @@ var buttonTheme = function buttonTheme(theme) {
     styleOverrides: {
       root: function root(_ref) {
         var ownerState = _ref.ownerState;
-        return _extends({
+        return _objectSpread(_objectSpread(_objectSpread({
           textTransform: 'none',
           fontWeight: '600',
           '&.MuiButton-outlinedError': {
             backgroundColor: theme.palette.common.white
           },
-          '&.Mui-disabled': _extends({}, ownerState.variant !== "text" && {
+          '&.Mui-disabled': _objectSpread({}, ownerState.variant !== "text" && {
             borderColor: theme.palette.misc.altBackground,
             backgroundColor: theme.palette.misc.rowHoverGreyOne,
             borderWidth: '1px',
             borderStyle: 'solid'
           }),
-          '& .MuiButton-startIcon': _extends({
+          '& .MuiButton-startIcon': _objectSpread({
             marginRight: 0,
             marginLeft: 0,
             marginTop: '-1px',
@@ -30,7 +35,7 @@ var buttonTheme = function buttonTheme(theme) {
               fontSize: 18
             }
           }),
-          '& .MuiButton-endIcon': _extends({
+          '& .MuiButton-endIcon': _objectSpread({
             marginRight: 0,
             marginLeft: 0,
             marginTop: '-1px',
@@ -54,7 +59,7 @@ var buttonTheme = function buttonTheme(theme) {
             //@ts-ignore
             theme.palette[ownerState.color]
           }
-        }, ownerState.variant === "outlined" && {
+        }), ownerState.variant === "outlined" && {
           backgroundColor: ownerState.color === "primary" ? theme.palette.common.white :
           //@ts-ignore
           theme.palette[ownerState.color],
@@ -78,7 +83,7 @@ var buttonTheme = function buttonTheme(theme) {
             //@ts-ignore
             theme.palette[ownerState.color]
           }
-        }, ownerState.variant === "text" && {
+        }), ownerState.variant === "text" && {
           backgroundColor: 'transparent',
           color: ownerState.color === "primary" ? theme.palette.text.tertiary :
           //@ts-ignore
@@ -100,9 +105,9 @@ var buttonTheme = function buttonTheme(theme) {
       style: {
         backgroundColor: 'white',
         color: theme.palette.neutral.main,
-        border: "1px solid " + theme.palette.neutral.main,
+        border: "1px solid ".concat(theme.palette.neutral.main),
         ':hover': {
-          border: "1px solid " + theme.palette.primary.main,
+          border: "1px solid ".concat(theme.palette.primary.main),
           color: theme.palette.primary.main,
           backgroundColor: 'white'
         }