@veritone-ce/design-system 1.12.46 → 1.12.48

package/dist/cjs/components/Table/index.js

@@ -4,12 +4,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableSortLabel = exports.TableRow = exports.TablePagination = exports.TableHead = exports.TableFooter = exports.TableContainer = exports.TableCell = exports.TableBody = exports.Table = void 0;
+exports.TableZeroState = exports.TableSortLabel = exports.TableRow = exports.TablePagination = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableBody = exports.Table = exports.SelectionTableCell = void 0;
 var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@mui/material/styles");
+var _index = _interopRequireDefault(require("../Typography/index.js"));
+var _index2 = _interopRequireDefault(require("../Checkbox/index.js"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["variant"];
+var _excluded = ["variant"],
+  _excluded2 = ["checked", "indeterminate", "disabled", "onChange", "sx", "className", "checkboxSx", "checkboxClassName"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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; }
@@ -37,11 +40,21 @@ var TableBody = function TableBody(props) {
   });
 };
 exports.TableBody = TableBody;
-var TableCell = function TableCell(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'data' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+var StyledMuiTableCell = (0, _styles.styled)(_material.TableCell)(function (_ref) {
+  var theme = _ref.theme,
+    noVerticalPadding = _ref.noVerticalPadding;
+  return {
+    fontSize: theme.typography.body1.fontSize,
+    borderBottomColor: theme.palette.text.disabled,
+    padding: "".concat(noVerticalPadding ? '0px' : '14.25px', " ", '16px')
+  };
+});
+var TableCell = function TableCell(_ref2) {
+  var _props$noVerticalPadd;
+  var _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'data' : _ref2$variant,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTableCell, {
     "data-testid": props['data-testid'],
     component: variant === 'header' ? 'th' : 'td',
     align: props.align,
@@ -51,27 +64,44 @@ var TableCell = function TableCell(_ref) {
     scope: props.scope,
     abbr: props.abbr,
     sortDirection: props.sortDirection,
+    noVerticalPadding: (_props$noVerticalPadd = props.noVerticalPadding) !== null && _props$noVerticalPadd !== void 0 ? _props$noVerticalPadd : false,
     sx: props.sx,
     className: props.className,
     children: props.children
   });
 };
 exports.TableCell = TableCell;
-var StyledMuiTableContainer = (0, _styles.styled)(_material.TableContainer)({
-  '& .MuiTableCell-root': {
-    lineHeight: '21px',
-    fontWeight: 400
-  }
+var StyledSelectionTableCell = (0, _styles.styled)(TableCell)({
+  width: '50px'
 });
-var TableContainer = function TableContainer(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTableContainer, {
-    "data-testid": props['data-testid'],
-    sx: props.sx,
-    className: props.className,
-    children: props.children
-  });
+var StyledSelectionCheckbox = (0, _styles.styled)(_index2["default"])({
+  padding: 0
+});
+var SelectionTableCell = function SelectionTableCell(_ref3) {
+  var checked = _ref3.checked,
+    indeterminate = _ref3.indeterminate,
+    disabled = _ref3.disabled,
+    onChange = _ref3.onChange,
+    sx = _ref3.sx,
+    className = _ref3.className,
+    checkboxSx = _ref3.checkboxSx,
+    checkboxClassName = _ref3.checkboxClassName,
+    cellProps = _objectWithoutProperties(_ref3, _excluded2);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSelectionTableCell, _objectSpread(_objectSpread({}, cellProps), {}, {
+    noVerticalPadding: true,
+    sx: sx,
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSelectionCheckbox, {
+      checked: checked,
+      indeterminate: indeterminate,
+      disabled: disabled,
+      onChange: onChange,
+      sx: checkboxSx,
+      className: checkboxClassName
+    })
+  }));
 };
-exports.TableContainer = TableContainer;
+exports.SelectionTableCell = SelectionTableCell;
 var TableFooter = function TableFooter(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableFooter, {
     "data-testid": props['data-testid'],
@@ -104,20 +134,8 @@ var TablePagination = function TablePagination(props) {
   });
 };
 exports.TablePagination = TablePagination;
-var StyledMuiTableRow = (0, _styles.styled)(_material.TableRow)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    '& .MuiTableCell-root': {
-      borderBottomColor: theme.palette.text.disabled,
-      padding: '14.25px 16px',
-      '&.MuiTableCell-paddingNone': {
-        padding: 0
-      }
-    }
-  };
-});
 var TableRow = function TableRow(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTableRow, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableRow, {
     "data-testid": props['data-testid'],
     hover: props.hover,
     selected: props.selected,
@@ -128,6 +146,36 @@ var TableRow = function TableRow(props) {
 };
 exports.TableRow = TableRow;
 var TableSortLabel = function TableSortLabel(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableSortLabel, _objectSpread({}, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableSortLabel, {
+    active: props.active,
+    direction: props.direction,
+    hideSortIcon: props.hideSortIcon,
+    onClick: props.onClick,
+    disabled: props.disabled,
+    children: props.children
+  });
+};
+exports.TableSortLabel = TableSortLabel;
+var StyledTableZeroStateBase = (0, _styles.styled)(_material.Box)({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var TableZeroState = function TableZeroState(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTableZeroStateBase, {
+    sx: props.sx,
+    className: props.className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      sx: function sx(theme) {
+        return {
+          fontWeight: theme.typography.body2.fontWeight,
+          fontSize: theme.typography.body2.fontSize,
+          color: theme.palette.text.disabled
+        };
+      },
+      children: props.children
+    })
+  });
 };
-exports.TableSortLabel = TableSortLabel;
+exports.TableZeroState = TableZeroState;

package/dist/cjs/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,10 +16,16 @@ Object.defineProperty(exports, "AudioSlider", {
     return _index2["default"];
   }
 });
+Object.defineProperty(exports, "AutoTable", {
+  enumerable: true,
+  get: function get() {
+    return _index29["default"];
+  }
+});
 Object.defineProperty(exports, "Autocomplete", {
   enumerable: true,
   get: function get() {
-    return _index35["default"];
+    return _index37["default"];
   }
 });
 Object.defineProperty(exports, "Breadcrumbs", {
@@ -39,6 +46,12 @@ Object.defineProperty(exports, "Checkbox", {
     return _index5["default"];
   }
 });
+Object.defineProperty(exports, "ControlledAutoTable", {
+  enumerable: true,
+  get: function get() {
+    return _controlled["default"];
+  }
+});
 Object.defineProperty(exports, "Drawer", {
   enumerable: true,
   get: function get() {
@@ -60,205 +73,229 @@ Object.defineProperty(exports, "FormControlLabel", {
 Object.defineProperty(exports, "HomeOutlinedIcon", {
   enumerable: true,
   get: function get() {
-    return _index32["default"];
+    return _index34["default"];
+  }
+});
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function get() {
+    return _index9["default"];
   }
 });
 Object.defineProperty(exports, "IconGroups", {
   enumerable: true,
   get: function get() {
-    return _index33["default"];
+    return _index35["default"];
   }
 });
 Object.defineProperty(exports, "IconListItem", {
   enumerable: true,
   get: function get() {
-    return _index34["default"];
+    return _index36["default"];
   }
 });
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function get() {
-    return _index9["default"];
+    return _index10["default"];
   }
 });
 Object.defineProperty(exports, "LinearProgress", {
   enumerable: true,
   get: function get() {
-    return _index10["default"];
+    return _index11["default"];
   }
 });
 Object.defineProperty(exports, "Link", {
   enumerable: true,
   get: function get() {
-    return _index11["default"];
+    return _index12["default"];
   }
 });
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function get() {
-    return _index12["default"];
+    return _index13["default"];
   }
 });
 Object.defineProperty(exports, "ListItem", {
   enumerable: true,
   get: function get() {
-    return _index13["default"];
+    return _index14["default"];
   }
 });
 Object.defineProperty(exports, "ListItemButton", {
   enumerable: true,
   get: function get() {
-    return _index14["default"];
+    return _index15["default"];
   }
 });
 Object.defineProperty(exports, "ListItemText", {
   enumerable: true,
   get: function get() {
-    return _index15["default"];
+    return _index16["default"];
   }
 });
 Object.defineProperty(exports, "MenuFlyout", {
   enumerable: true,
   get: function get() {
-    return _index16["default"];
+    return _index17["default"];
   }
 });
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
-    return _index17["default"];
+    return _index18["default"];
   }
 });
 Object.defineProperty(exports, "Panel", {
   enumerable: true,
   get: function get() {
-    return _index18["default"];
+    return _index19["default"];
   }
 });
 Object.defineProperty(exports, "ProgressIndicator", {
   enumerable: true,
   get: function get() {
-    return _index19["default"];
+    return _index20["default"];
   }
 });
 Object.defineProperty(exports, "RadioButton", {
   enumerable: true,
   get: function get() {
-    return _index20["default"];
+    return _index21["default"];
   }
 });
 Object.defineProperty(exports, "RadioGroup", {
   enumerable: true,
   get: function get() {
-    return _index21["default"];
+    return _index22["default"];
   }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function get() {
-    return _index22["default"];
+    return _index23["default"];
   }
 });
-Object.defineProperty(exports, "StatusChip", {
+Object.defineProperty(exports, "SelectionTableCell", {
   enumerable: true,
   get: function get() {
-    return _index23["default"];
+    return _index28.SelectionTableCell;
   }
 });
-Object.defineProperty(exports, "Step", {
+Object.defineProperty(exports, "StatusChip", {
   enumerable: true,
   get: function get() {
     return _index24["default"];
   }
 });
-Object.defineProperty(exports, "StepLabel", {
+Object.defineProperty(exports, "Step", {
   enumerable: true,
   get: function get() {
     return _index25["default"];
   }
 });
-Object.defineProperty(exports, "Stepper", {
+Object.defineProperty(exports, "StepLabel", {
   enumerable: true,
   get: function get() {
     return _index26["default"];
   }
 });
-Object.defineProperty(exports, "Table", {
+Object.defineProperty(exports, "Stepper", {
   enumerable: true,
   get: function get() {
-    return _index27.Table;
+    return _index27["default"];
   }
 });
-Object.defineProperty(exports, "TableBody", {
+Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function get() {
-    return _index27.TableBody;
+    return _index28.Table;
   }
 });
-Object.defineProperty(exports, "TableCell", {
+Object.defineProperty(exports, "TableBody", {
   enumerable: true,
   get: function get() {
-    return _index27.TableCell;
+    return _index28.TableBody;
   }
 });
-Object.defineProperty(exports, "TableContainer", {
+Object.defineProperty(exports, "TableCell", {
   enumerable: true,
   get: function get() {
-    return _index27.TableContainer;
+    return _index28.TableCell;
   }
 });
 Object.defineProperty(exports, "TableFooter", {
   enumerable: true,
   get: function get() {
-    return _index27.TableFooter;
+    return _index28.TableFooter;
   }
 });
 Object.defineProperty(exports, "TableHead", {
   enumerable: true,
   get: function get() {
-    return _index27.TableHead;
+    return _index28.TableHead;
   }
 });
 Object.defineProperty(exports, "TablePagination", {
   enumerable: true,
   get: function get() {
-    return _index27.TablePagination;
+    return _index28.TablePagination;
   }
 });
 Object.defineProperty(exports, "TableRow", {
   enumerable: true,
   get: function get() {
-    return _index27.TableRow;
+    return _index28.TableRow;
   }
 });
 Object.defineProperty(exports, "TableSortLabel", {
   enumerable: true,
   get: function get() {
-    return _index27.TableSortLabel;
+    return _index28.TableSortLabel;
+  }
+});
+Object.defineProperty(exports, "TableZeroState", {
+  enumerable: true,
+  get: function get() {
+    return _index28.TableZeroState;
   }
 });
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function get() {
-    return _index28["default"];
+    return _index30["default"];
   }
 });
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function get() {
-    return _index29["default"];
+    return _index31["default"];
   }
 });
 Object.defineProperty(exports, "Toast", {
   enumerable: true,
   get: function get() {
-    return _index30["default"];
+    return _index32["default"];
   }
 });
 Object.defineProperty(exports, "Typography", {
   enumerable: true,
   get: function get() {
-    return _index31["default"];
+    return _index33["default"];
+  }
+});
+Object.defineProperty(exports, "VirtualControlledAutoTable", {
+  enumerable: true,
+  get: function get() {
+    return _virtual["default"];
+  }
+});
+Object.defineProperty(exports, "createColumnHelper", {
+  enumerable: true,
+  get: function get() {
+    return _index29.createColumnHelper;
   }
 });
 Object.defineProperty(exports, "createDesignSystemTheme", {
@@ -267,6 +304,12 @@ Object.defineProperty(exports, "createDesignSystemTheme", {
     return _theme.createDesignSystemTheme;
   }
 });
+Object.defineProperty(exports, "useFileUploader", {
+  enumerable: true,
+  get: function get() {
+    return _index7.useFileUploader;
+  }
+});
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function get() {
@@ -280,33 +323,39 @@ 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 _index7 = _interopRequireWildcard(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"));
+var _index9 = _interopRequireDefault(require("./components/IconButton/index.js"));
+var _index10 = _interopRequireDefault(require("./components/Input/index.js"));
+var _index11 = _interopRequireDefault(require("./components/LinearProgress/index.js"));
+var _index12 = _interopRequireDefault(require("./components/Link/index.js"));
+var _index13 = _interopRequireDefault(require("./components/List/index.js"));
+var _index14 = _interopRequireDefault(require("./components/ListItem/index.js"));
+var _index15 = _interopRequireDefault(require("./components/ListItemButton/index.js"));
+var _index16 = _interopRequireDefault(require("./components/ListItemText/index.js"));
+var _index17 = _interopRequireDefault(require("./components/MenuFlyout/index.js"));
+var _index18 = _interopRequireDefault(require("./components/Modal/index.js"));
+var _index19 = _interopRequireDefault(require("./components/Panel/index.js"));
+var _index20 = _interopRequireDefault(require("./components/ProgressIndicator/index.js"));
+var _index21 = _interopRequireDefault(require("./components/RadioButton/index.js"));
+var _index22 = _interopRequireDefault(require("./components/RadioGroup/index.js"));
+var _index23 = _interopRequireDefault(require("./components/Select/index.js"));
+var _index24 = _interopRequireDefault(require("./components/StatusChip/index.js"));
+var _index25 = _interopRequireDefault(require("./components/Step/index.js"));
+var _index26 = _interopRequireDefault(require("./components/StepLabel/index.js"));
+var _index27 = _interopRequireDefault(require("./components/Stepper/index.js"));
+var _index28 = require("./components/Table/index.js");
+var _index29 = _interopRequireWildcard(require("./components/Table/AutoTable/index.js"));
+var _controlled = _interopRequireDefault(require("./components/Table/AutoTable/controlled.js"));
+var _virtual = _interopRequireDefault(require("./components/Table/AutoTable/virtual.js"));
+var _index30 = _interopRequireDefault(require("./components/Tabs/index.js"));
+var _index31 = _interopRequireDefault(require("./components/ThemeProvider/index.js"));
+var _index32 = _interopRequireDefault(require("./components/Toast/index.js"));
+var _index33 = _interopRequireDefault(require("./components/Typography/index.js"));
+var _index34 = _interopRequireDefault(require("./components/icons/HomeOutlinedIcon/index.js"));
+var _index35 = _interopRequireDefault(require("./components/icons/IconGroups/index.js"));
+var _index36 = _interopRequireDefault(require("./components/icons/IconListItem/index.js"));
+var _index37 = _interopRequireDefault(require("./components/Autocomplete/index.js"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/esm/assets/theme.js

@@ -328,20 +328,22 @@ defaultTheme = createTheme(defaultTheme, {
         }
       }
     },
-    MuiPagination: {
+    MuiTablePagination: {
       styleOverrides: {
         selectLabel: {
           fontWeight: 400,
           fontSize: '12px',
-          lineHeight: '18px',
-          color: colors.text.disabled
+          lineHeight: '18px'
+          // color: colors.text.disabled
         },
+
         displayedRows: {
           fontWeight: 400,
           fontSize: '12px',
-          lineHeight: '18px',
-          color: colors.text.disabled
+          lineHeight: '18px'
+          // color: colors.text.disabled
         },
+
         input: {
           fontWeight: 400,
           fontSize: '12px',

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

@@ -9,6 +9,18 @@ var ButtonContainer = styled(Box)(function () {
     position: "relative"
   };
 });
+var StyledButton = styled(MuiButton)({
+  fontSize: '14px',
+  gap: '5px',
+  paddingTop: '8px',
+  paddingBottom: '8px',
+  paddingLeft: '15px',
+  paddingRight: '15px',
+  display: 'flex',
+  alignItems: 'center',
+  lineHeight: '16px',
+  height: 36
+});
 
 /**
 - Use a button for common user click actions. Several variations available.
@@ -17,21 +29,9 @@ var Button = function Button(props) {
   var disabled = props.isLoading || props.disabled;
   return /*#__PURE__*/_jsxs(ButtonContainer, {
     "data-testid": props['data-testid'],
-    sx: props.sx,
-    className: props.className,
-    children: [/*#__PURE__*/_jsx(MuiButton, {
-      sx: {
-        fontSize: '14px',
-        gap: '5px',
-        paddingTop: '8px',
-        paddingBottom: '8px',
-        paddingLeft: '15px',
-        paddingRight: '15px',
-        display: 'flex',
-        alignItems: 'center',
-        lineHeight: '16px',
-        height: 36
-      },
+    sx: props.containerSx,
+    className: props.containerClassName,
+    children: [/*#__PURE__*/_jsx(StyledButton, {
       color: props.color,
       disableElevation: true,
       variant: props.variant,
@@ -39,6 +39,8 @@ var Button = function Button(props) {
       startIcon: props.startIcon,
       endIcon: props.endIcon,
       onClick: props.onClick,
+      sx: props.sx,
+      className: props.className,
       children: props.children
     }), props.isLoading && /*#__PURE__*/_jsx(Indicator, {})]
   });