@veritone-ce/design-system 1.12.45 → 1.12.46

package/dist/cjs/components/ProgressIndicator/DefaultProgress.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+var DefaultProgress = function DefaultProgress(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: 'flex'
+    },
+    className: props.className,
+    children: [props.itemLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        fontSize: '14px',
+        mr: '10px'
+      },
+      children: " Loading ".concat(props.itemLoading)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+      "data-testid": props['data-testid'],
+      value: props.value,
+      variant: props.variant,
+      size: 18
+    })]
+  });
+};
+var _default = DefaultProgress;
+exports["default"] = _default;

package/dist/cjs/components/ProgressIndicator/MLProgress.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+var MLProgress = function MLProgress(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    className: props.className,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+      "data-testid": props['data-testid'],
+      value: props.value,
+      variant: props.variant,
+      size: props.type == 'large' ? 50 : 30
+    }), props.itemLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        fontSize: '14px'
+      },
+      children: " Loading ".concat(props.itemLoading)
+    })]
+  });
+};
+var _default = MLProgress;
+exports["default"] = _default;

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

@@ -0,0 +1,35 @@
+"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
+});
+exports["default"] = void 0;
+var _DefaultProgress = _interopRequireDefault(require("./DefaultProgress.js"));
+var _MLProgress = _interopRequireDefault(require("./MLProgress.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["type"];
+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; }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+- Use a progress indicator to show the user that an operation is in progress.
+**/
+
+var ProgressIndicator = function ProgressIndicator(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: type === 'medium' || type === 'large' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MLProgress["default"], _objectSpread({
+      type: type
+    }, props)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultProgress["default"], _objectSpread({}, props))
+  });
+};
+var _default = ProgressIndicator;
+exports["default"] = _default;

package/dist/cjs/components/RadioButton/RadioButton.theme.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var radioButtonTheme = function radioButtonTheme(theme) {
+  return {
+    defaultProps: {
+      disableFocusRipple: true,
+      disableTouchRipple: true,
+      disableRipple: true
+    },
+    styleOverrides: {
+      root: function root() {
+        return {
+          display: 'flex',
+          width: 'fit-content',
+          height: 'fit-content',
+          padding: '8px',
+          '&:hover': {
+            backgroundColor: 'transparent'
+          },
+          '& .MuiSvgIcon-root': {
+            boxSizing: 'border-box',
+            borderRadius: '50%'
+          },
+          '&.Mui-checked': {
+            '& .MuiSvgIcon-root:nth-of-type(1)': {
+              border: "1px solid ".concat(theme.palette.button.main)
+            }
+          },
+          '& .MuiSvgIcon-root:nth-of-type(1)': {
+            boxSizing: 'border-box',
+            fontSize: 18,
+            color: 'transparent',
+            border: "1px solid ".concat(theme.palette.text.secondary),
+            transition: 'border-color 0.2s'
+          },
+          '& .MuiSvgIcon-root:nth-of-type(2)': {
+            boxSizing: 'border-box',
+            width: 'auto',
+            height: 'auto',
+            color: 'transparent',
+            background: theme.palette.button.main,
+            margin: '3.37px 3.38px',
+            transition: 'background 0.2s'
+          },
+          '&.Mui-disabled': {
+            '& .MuiSvgIcon-root:nth-of-type(1)': {
+              border: "1px solid ".concat(theme.palette.text.disabled)
+            },
+            '& .MuiSvgIcon-root:nth-of-type(2)': {
+              transform: 'scale(1)',
+              background: theme.palette.text.disabled
+            }
+          }
+        };
+      }
+    }
+  };
+};
+var _default = radioButtonTheme;
+exports["default"] = _default;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var RadioButton = function RadioButton(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+    label: props.label,
+    sx: {
+      margin: 0,
+      height: '36px',
+      color: function color(theme) {
+        return theme.palette.text.secondary;
+      },
+      '& .MuiTypography-root': {
+        lineHeight: '24px'
+      },
+      '&.Mui-disabled': {
+        '& .MuiTypography-root': {
+          color: function color(theme) {
+            return theme.palette.text.disabled;
+          }
+        }
+      }
+    },
+    className: props.className,
+    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+      "data-testid": props['data-testid'],
+      name: props.name,
+      checked: props.checked,
+      disabled: props.disabled,
+      required: props.required,
+      defaultChecked: props.defaultChecked,
+      onChange: props.onChange
+    })
+  });
+};
+var _default = RadioButton;
+exports["default"] = _default;

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

@@ -0,0 +1,25 @@
+"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
+});
+exports["default"] = void 0;
+var _material = require("@mui/material");
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+var RadioGroup = function RadioGroup(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.RadioGroup, {
+    "data-testid": props['data-testid'],
+    defaultValue: props.defaultValue,
+    name: props.name,
+    onChange: props.onChange,
+    value: props.value,
+    sx: props.sx,
+    className: props.className
+  });
+};
+var _default = RadioGroup;
+exports["default"] = _default;

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

@@ -0,0 +1,118 @@
+"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
+});
+exports["default"] = void 0;
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 Select(props) {
+  var _props$fullWidth;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      maxHeight: props.helperText ? '77px' : '56px'
+    },
+    className: props.className,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+      sx: {
+        display: 'flex',
+        alignItems: 'flex-end',
+        lineHeight: '17px',
+        marginBottom: '3px'
+      },
+      children: props.label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        display: 'flex',
+        '& .MuiOutlinedInput-root': {
+          '& .MuiSelect-outlined': {
+            padding: props.helperText ? '7px 7.5px' : '5px 8px',
+            fontSize: props.helperText ? '14px' : '16px',
+            lineHeight: props.helperText ? '20px' : '24px'
+          },
+          '&.Mui-error': {
+            '& .MuiSelect-outlined': {
+              padding: props.helperText ? '7px 8px' : '5px 13px'
+            }
+          }
+        }
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Select, {
+        "data-testid": props['data-testid'],
+        fullWidth: (_props$fullWidth = props.fullWidth) !== null && _props$fullWidth !== void 0 ? _props$fullWidth : true,
+        displayEmpty: true,
+        error: props.error !== undefined,
+        disabled: props.disabled,
+        value: props.value,
+        defaultValue: props.defaultValue,
+        onChange: props.onChange,
+        onClose: props.onClose,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+          value: "",
+          children: "Select"
+        }), props.items.map(function (item, index) {
+          var _item$key;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+            value: item.value,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              sx: {
+                lineHeight: '20px',
+                fontSize: '14px',
+                opacity: 0.9
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                  fontWeight: 700
+                },
+                children: item.title
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                children: item.name
+              })]
+            })
+          }, (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : index);
+        })]
+      })
+    }), props.helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormHelperText, {
+      sx: {
+        lineHeight: '18px',
+        color: function color(theme) {
+          return theme.palette.text.disabled;
+        }
+      },
+      children: props.helperText
+    }), props.error && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Lens, {
+        sx: {
+          width: '14px',
+          height: '14px',
+          margin: '1px 3px 0 -2px',
+          color: function color(theme) {
+            return theme.palette.error.main;
+          }
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormHelperText, {
+        sx: {
+          color: function color(theme) {
+            return theme.palette.error.main;
+          },
+          fontSize: function fontSize(theme) {
+            return theme.typography.body1.fontSize;
+          },
+          lineHeight: '18px'
+        },
+        children: props.error
+      })]
+    })]
+  });
+}
+var _default = Select;
+exports["default"] = _default;

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var selectTheme = function selectTheme(theme) {
+  return {
+    defaultProps: {
+      // fullWidth: true,
+      displayEmpty: true
+    },
+    styleOverrides: {
+      root: function root() {
+        return {
+          '&.MuiOutlinedInput-root': {
+            '& .MuiSelect-outlined': {
+              border: '1px solid ' + theme.palette.text.secondary
+            },
+            '&.Mui-focused': {
+              '& .MuiOutlinedInput-notchedOutline': {
+                borderColor: theme.palette.secondary.main
+              }
+            },
+            '&.Mui-error': {
+              '& .MuiSelect-outlined': {
+                color: theme.palette.error.main,
+                border: '1px solid ' + theme.palette.error.main,
+                fontSize: '16px',
+                lineHeight: '24px'
+              },
+              '& .MuiOutlinedInput-notchedOutline': {
+                borderColor: theme.palette.error.main
+              },
+              '& .MuiSelect-iconOutlined': {
+                color: theme.palette.text.tertiary
+              }
+            },
+            '&.Mui-disabled': {
+              '& .MuiSelect-iconOutlined': {
+                color: theme.palette.text.disabled
+              },
+              '& .MuiSelect-outlined': {
+                background: theme.palette.misc.rowHoverGreyOne,
+                borderColor: theme.palette.misc.altBackground,
+                color: theme.palette.text.disabled,
+                WebkitTextFillColor: theme.palette.text.disabled
+              },
+              '& .MuiOutlinedInput-notchedOutline': {
+                border: 'none'
+              }
+            },
+            '& .MuiSelect-iconOutlined': {
+              color: theme.palette.secondary.main
+            }
+          }
+        };
+      }
+    }
+  };
+};
+var _default = selectTheme;
+exports["default"] = _default;

package/dist/cjs/components/StatusChip/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PROCESSING = exports.ERROR = exports.COMPLETE = void 0;
+var COMPLETE = 'complete';
+exports.COMPLETE = COMPLETE;
+var PROCESSING = 'processing';
+exports.PROCESSING = PROCESSING;
+var ERROR = 'error';
+exports.ERROR = ERROR;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/**
+- 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. 
+**/
+
+var StatusChip = function StatusChip(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    sx: {
+      display: "inline-flex",
+      position: "relative"
+    },
+    className: props.className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+      "data-testid": props['data-testid'],
+      label: props.label ? props.label : props.status,
+      color: props.color,
+      clickable: props.clickable,
+      disabled: props.disabled,
+      onClick: props.onClick
+    })
+  });
+};
+var _default = StatusChip;
+exports["default"] = _default;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _constants = require("./constants.js");
+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 statusChipTheme = function statusChipTheme(theme) {
+  return {
+    styleOverrides: {
+      root: function root(_ref) {
+        var ownerState = _ref.ownerState;
+        return _objectSpread({
+          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
+        } : _objectSpread(_objectSpread(_objectSpread({}, ownerState.status === _constants.COMPLETE && {
+          //@ts-ignore
+          backgroundColor: theme.palette.success.main
+        }), ownerState.status === _constants.PROCESSING && {
+          //@ts-ignore
+          backgroundColor: theme.palette.warning.main
+        }), ownerState.status === _constants.ERROR && {
+          //@ts-ignore
+          backgroundColor: theme.palette.error.main
+        }));
+      }
+    }
+  };
+};
+var _default = statusChipTheme;
+exports["default"] = _default;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Step = function Step(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Step, {
+    "data-testid": props['data-testid'],
+    active: props.active,
+    completed: props.completed,
+    disabled: props.disabled,
+    sx: props.sx,
+    className: props.className,
+    children: props.children
+  });
+};
+var _default = Step;
+exports["default"] = _default;

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

@@ -0,0 +1,22 @@
+"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
+});
+exports["default"] = void 0;
+var _material = require("@mui/material");
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+var StepLabel = function StepLabel(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.StepLabel, {
+    "data-testid": props['data-testid'],
+    sx: props.sx,
+    className: props.className,
+    children: props.children
+  });
+};
+var _default = StepLabel;
+exports["default"] = _default;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/**
+  The Stepper is used for highlighting where a user is in a progression of steps.
+**/
+
+var Stepper = function Stepper(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stepper, {
+    "data-testid": props['data-testid'],
+    activeStep: props.activeStep,
+    sx: props.sx,
+    className: props.className,
+    children: props.children
+  });
+};
+var _default = Stepper;
+exports["default"] = _default;

package/dist/cjs/components/Stepper/stepper.theme.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var stepperTheme = function stepperTheme(theme) {
+  return {
+    MuiStepConnector: {
+      styleOverrides: {
+        line: {
+          borderColor: "#E0E8F0"
+        }
+      }
+    },
+    MuiStep: {
+      defaultProps: {
+        completed: false
+      }
+    },
+    MuiStepIcon: {
+      styleOverrides: {
+        root: {
+          borderRadius: "100%",
+          height: "35px",
+          width: "35px",
+          outline: "1px solid ".concat(theme.palette.text.tertiary),
+          color: "white",
+          text: {
+            fill: theme.palette.text.tertiary
+          },
+          '&.Mui-active': {
+            outline: "none",
+            color: theme.palette.text.tertiary,
+            text: {
+              fill: "white"
+            }
+          }
+        }
+      }
+    },
+    MuiStepLabel: {
+      styleOverrides: {
+        label: {
+          fontWeight: "600",
+          '&.Mui-active': {
+            fontWeight: "600"
+          }
+        },
+        iconContainer: {
+          padding: "0 10px 0 0"
+        }
+      }
+    }
+  };
+};
+var _default = stepperTheme;
+exports["default"] = _default;