@veritone-ce/design-system 1.12.28 → 1.12.31

package/dist/assets/theme.d.ts

@@ -1,4 +1,5 @@
-import { PaletteColorOptions, SimplePaletteColorOptions } from '@mui/material';
+import { PaletteColorOptions, SimplePaletteColorOptions, useTheme as muiUseTheme } from '@mui/material';
+import { Theme as MuiTheme, ThemeOptions } from '@mui/material/styles';
 declare module '@mui/material/Button' {
     interface ButtonPropsVariantOverrides {
         primary: true;
@@ -6,8 +7,8 @@ declare module '@mui/material/Button' {
         tertiary: true;
     }
 }
+type Colors = typeof colors;
 declare module '@mui/material/styles' {
-    type Colors = typeof colors;
     type ButtonPaletteColorOptions = SimplePaletteColorOptions & {
         hover: string;
     };
@@ -15,16 +16,16 @@ declare module '@mui/material/styles' {
     type TextPaletteColorOptions = Colors['text'];
     interface TypeText extends TextPaletteColorOptions {
     }
+    interface PaletteOptions {
+        neutral?: PaletteColorOptions;
+        button?: ButtonPaletteColorOptions;
+        misc?: MiscPaletteColorOptions;
+    }
     interface Palette {
         neutral: Pick<Palette['primary'], 'main'>;
         button: ButtonPaletteColorOptions;
         misc: MiscPaletteColorOptions;
     }
-    interface PaletteOptions {
-        neutral: PaletteColorOptions;
-        button: ButtonPaletteColorOptions;
-        misc: MiscPaletteColorOptions;
-    }
 }
 export declare const colors: {
     brand: {
@@ -54,7 +55,8 @@ export declare const colors: {
         rowOnHoverGreyTwo: string;
     };
 };
-export type Theme = typeof theme;
-declare let theme: import("@mui/material").Theme;
-export declare const createDesignSystemTheme: (newTheme: any) => Theme;
-export default theme;
+export type Theme = MuiTheme;
+export declare const useTheme: typeof muiUseTheme;
+export declare let defaultTheme: MuiTheme;
+export declare const createDesignSystemTheme: (newTheme?: ThemeOptions) => Theme;
+export {};

package/dist/assets/theme.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.createDesignSystemTheme = exports.colors = void 0;
+exports.useTheme = exports.defaultTheme = exports.createDesignSystemTheme = exports.colors = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _stepper = _interopRequireDefault(require("../components/Stepper/stepper.theme"));
@@ -88,19 +88,28 @@ var colors = {
     rowOnHoverGreyTwo: "#EAF1FA"
   }
 };
-exports.colors = colors;
-// create theme in steps https://mui.com/material-ui/customization/theming/#api
 
-var theme = (0, _material.createTheme)({
+// create theme in steps https://mui.com/material-ui/customization/theming/#api
+exports.colors = colors;
+var useTheme = _material.useTheme;
+exports.useTheme = useTheme;
+var defaultTheme = (0, _material.createTheme)({
   typography: {
-    fontFamily: ['Nunito Sans', 'Helvetica', 'sans-serif'].join(','),
+    fontFamily: 'Nunito Sans, Helvetica, sans-serif',
     h2: {
-      fontSize: '1.429rem',
-      lineHeight: '2.143rem',
       fontWeight: '700'
     },
     body1: {
+      fontSize: '14px',
+      fontWeight: '400',
       color: colors.text.primary
+    },
+    body2: {
+      fontSize: '18px',
+      fontWeight: '400'
+    },
+    subtitle1: {
+      fontSize: '16px'
     }
   },
   palette: {
@@ -140,24 +149,25 @@ var theme = (0, _material.createTheme)({
   },
   spacing: 10
 });
-theme = (0, _material.createTheme)(theme, {
+exports.defaultTheme = defaultTheme;
+exports.defaultTheme = defaultTheme = (0, _material.createTheme)(defaultTheme, {
   components: _objectSpread(_objectSpread({
-    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),
+    MuiButton: (0, _button["default"])(defaultTheme)
+  }, (0, _stepper["default"])(defaultTheme)), {}, {
+    MuiSelect: (0, _select["default"])(defaultTheme),
+    MuiTextField: (0, _input["default"])(defaultTheme),
+    MuiDialog: (0, _modal["default"])(defaultTheme),
+    MuiCheckbox: (0, _checkbox["default"])(defaultTheme),
+    MuiRadio: (0, _RadioButton["default"])(defaultTheme),
+    MuiTabs: (0, _tabs["default"])(defaultTheme),
+    MuiChip: (0, _statusChip["default"])(defaultTheme),
+    MuiMenu: (0, _menuFlyout.menuFlyoutTheme)(defaultTheme),
+    MuiMenuItem: (0, _menuFlyout.menuItemTheme)(defaultTheme),
+    MuiLinearProgress: (0, _linearProgress["default"])(defaultTheme),
     MuiInputLabel: {
       styleOverrides: {
         root: {
-          color: theme.palette.text.secondary,
+          color: defaultTheme.palette.text.secondary,
           fontSize: "14px",
           lineHeight: "21px",
           fontWeight: "600"
@@ -168,10 +178,10 @@ theme = (0, _material.createTheme)(theme, {
       styleOverrides: {
         root: {
           '& .MuiFormControlLabel-label': {
-            color: theme.palette.text.secondary
+            color: defaultTheme.palette.text.secondary
           },
           '& .MuiFormControlLabel-label.Mui-disabled': {
-            color: theme.palette.text.disabled
+            color: defaultTheme.palette.text.disabled
           }
         }
       }
@@ -191,7 +201,7 @@ theme = (0, _material.createTheme)(theme, {
               left: 0,
               top: "50%",
               transform: "translate(0, -50%)",
-              backgroundColor: theme.palette.error.main,
+              backgroundColor: defaultTheme.palette.error.main,
               borderRadius: "100%"
             }
           }
@@ -203,10 +213,10 @@ theme = (0, _material.createTheme)(theme, {
         root: {
           fontSize: "24px",
           lineHeight: "34px",
-          paddingTop: theme.spacing(3),
-          paddingLeft: theme.spacing(3),
-          paddingRight: theme.spacing(3),
-          paddingBottom: theme.spacing(1)
+          paddingTop: defaultTheme.spacing(3),
+          paddingLeft: defaultTheme.spacing(3),
+          paddingRight: defaultTheme.spacing(3),
+          paddingBottom: defaultTheme.spacing(1)
         }
       }
     },
@@ -214,16 +224,16 @@ theme = (0, _material.createTheme)(theme, {
       styleOverrides: {
         root: {
           paddingTop: 0,
-          paddingLeft: theme.spacing(3),
-          paddingRight: theme.spacing(3),
-          paddingBottom: theme.spacing(1)
+          paddingLeft: defaultTheme.spacing(3),
+          paddingRight: defaultTheme.spacing(3),
+          paddingBottom: defaultTheme.spacing(1)
         }
       }
     },
     MuiDialogActions: {
       styleOverrides: {
         root: {
-          padding: theme.spacing(3)
+          padding: defaultTheme.spacing(3)
         }
       }
     },
@@ -275,16 +285,16 @@ theme = (0, _material.createTheme)(theme, {
             bottom: 0
           },
           '&.MuiAlert-outlinedSuccess:after': {
-            backgroundColor: theme.palette.success.main
+            backgroundColor: defaultTheme.palette.success.main
           },
           '&.MuiAlert-outlinedInfo:after': {
-            backgroundColor: theme.palette.secondary.main
+            backgroundColor: defaultTheme.palette.secondary.main
           },
           '&.MuiAlert-outlinedWarning:after': {
-            backgroundColor: theme.palette.warning.main
+            backgroundColor: defaultTheme.palette.warning.main
           },
           '&.MuiAlert-outlinedError:after': {
-            backgroundColor: theme.palette.error.main
+            backgroundColor: defaultTheme.palette.error.main
           },
           '& .MuiAlert-icon': {
             opacity: 1,
@@ -304,15 +314,15 @@ theme = (0, _material.createTheme)(theme, {
     MuiCircularProgress: {
       styleOverrides: {
         root: {
-          color: theme.palette.button.main
+          color: defaultTheme.palette.button.main
         }
       }
     },
     MuiCardContent: {
       styleOverrides: {
         root: {
-          padding: theme.spacing(2),
-          paddingTop: theme.spacing(1)
+          padding: defaultTheme.spacing(2),
+          paddingTop: defaultTheme.spacing(1)
         }
       }
     },
@@ -340,9 +350,8 @@ theme = (0, _material.createTheme)(theme, {
     }
   })
 });
-var createDesignSystemTheme = function createDesignSystemTheme(newTheme) {
-  return (0, _material.createTheme)((0, _deepmerge["default"])(theme, newTheme || {}));
+var createDesignSystemTheme = function createDesignSystemTheme() {
+  var newTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _material.createTheme)((0, _deepmerge["default"])(defaultTheme, newTheme || {}));
 };
-exports.createDesignSystemTheme = createDesignSystemTheme;
-var _default = theme;
-exports["default"] = _default;
+exports.createDesignSystemTheme = createDesignSystemTheme;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { AlertColor } from '@mui/material/Alert/Alert';
+import { SxProps, Theme } from '@mui/system';
+export type AlertProps = {
+    'data-testid'?: string;
+    label?: React.ReactNode;
+    text?: string;
+    /**
+     * - Use can pass messageLabel or messageText
+     * - If these props are not passed in, the default label and text will be set based on severity
+     **/
+    link?: {
+        href: string;
+        content: React.ReactNode;
+    };
+    severity?: AlertColor;
+    onClose?(): void;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+declare const Alert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export default Alert;

package/dist/components/Alert/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireDefault(require("react"));
+var _Link = _interopRequireDefault(require("../Link"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var defaultMessageLabel = {
+  success: "Success",
+  info: "Info",
+  warning: "Alert",
+  error: "Error"
+};
+var defaultMessageText = {
+  success: "Your action was completed. ",
+  info: "General information. ",
+  warning: "Your action is required. ",
+  error: "An error has occured. "
+};
+var Alert = function Alert(props) {
+  var _props$severity;
+  var severity = (_props$severity = props.severity) !== null && _props$severity !== void 0 ? _props$severity : 'success';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Alert, {
+    "data-testid": props['data-testid'],
+    onClose: props.onClose,
+    severity: severity,
+    sx: props.sx,
+    className: props.className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontSize: "12px",
+          fontWeight: "bold",
+          marginRight: "2px"
+        },
+        children: props.label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [props.label, ': ']
+        }) : "".concat(defaultMessageLabel[severity], ": ")
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontSize: "12px"
+        },
+        children: props.text ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [props.text, " "]
+        }) : defaultMessageText[severity]
+      }), props.link && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link["default"], {
+        href: props.link.href,
+        children: props.link.content
+      })]
+    })
+  });
+};
+var _default = Alert;
+exports["default"] = _default;

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

@@ -0,0 +1,12 @@
+export type AudioSliderProps = {
+    'data-testid'?: string;
+    value: number;
+    onChange?(event: Event, value: number): void;
+    label?: string;
+    max?: number;
+    disabled?: boolean;
+    step?: number;
+    className?: string;
+};
+declare const AudioSlider: (props: AudioSliderProps) => import("react/jsx-runtime").JSX.Element;
+export default AudioSlider;

package/dist/components/AudioSlider/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _Slider = _interopRequireDefault(require("@mui/material/Slider"));
+var _styles = require("@mui/material/styles");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var MuiSlider = (0, _styles.styled)(_Slider["default"])({
+  color: '#1871E8',
+  height: 6,
+  '& .MuiSlider-track': {
+    border: 'none',
+    height: '6px'
+  },
+  '& .MuiSlider-thumb': {
+    height: 18,
+    width: 14,
+    backgroundColor: '#2A323C',
+    borderRadius: 2,
+    position: 'relative',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      width: 1,
+      height: 12,
+      backgroundColor: '#FFFFFF',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    },
+    '&:hover': {
+      outline: 'none'
+    },
+    '&:active': {
+      outline: 'none'
+    },
+    '&:focus': {
+      outline: 'none'
+    }
+  },
+  '& .MuiSlider-rail': {
+    height: '6px',
+    backgroundColor: '#9FA2A4'
+  },
+  '& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover': {
+    boxShadow: 'none'
+  }
+});
+var AudioSlider = function AudioSlider(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+    sx: {
+      width: 320
+    },
+    className: props.className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MuiSlider, {
+      "data-testid": props['data-testid'],
+      "aria-label": "audio-slider",
+      value: props.value,
+      max: props.max,
+      step: props.step,
+      onChange: props.onChange && function (event, value) {
+        props.onChange(event, value);
+      },
+      disabled: props.disabled
+    })
+  });
+};
+var _default = AudioSlider;
+exports["default"] = _default;

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

@@ -1,6 +1,11 @@
-import { BoxProps as MuiBoxProps } from '@mui/material';
-type BoxProps = {
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+export type BoxProps = {
     'data-testid'?: string;
-} & MuiBoxProps;
-declare const Box: ({ ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+    children?: React.ReactNode;
+    component?: React.ElementType;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+declare const Box: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
 export default Box;

package/dist/components/Box/index.js

@@ -6,17 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _material = require("@mui/material");
+var React = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
-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 _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
-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); }
-var Box = function Box(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, _objectSpread({}, props));
+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 Box = function Box(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    "data-testid": props['data-testid'],
+    component: props.component,
+    sx: props.sx,
+    className: props.className,
+    children: props.children
+  });
 };
 var _default = Box;
 exports["default"] = _default;

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

@@ -1,9 +1,12 @@
-type BreadcrumbsProps = {
+import { SxProps, Theme } from '@mui/material';
+export type BreadcrumbsProps = {
     'data-testid'?: string;
     links: {
         href: string;
         label: string;
     }[];
+    sx?: SxProps<Theme>;
+    className?: string;
 };
 /**
  * - This is the breadcrumbs component that is used in the header
@@ -11,5 +14,5 @@ type BreadcrumbsProps = {
  * - The last link is not clickable
  * - The last link is styled differently
  **/
-declare const BreadcrumbsComponent: ({ links }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
-export default BreadcrumbsComponent;
+declare const Breadcrumbs: (props: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
+export default Breadcrumbs;

package/dist/components/Breadcrumbs/index.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _material = require("@mui/material");
-var _theme = _interopRequireDefault(require("../../assets/theme"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /**
  * - This is the breadcrumbs component that is used in the header
  * - It takes in an array of links and renders them as breadcrumbs
@@ -15,17 +13,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * - The last link is styled differently
  **/
 
-var BreadcrumbsComponent = function BreadcrumbsComponent(_ref) {
-  var _ref$links = _ref.links,
-    links = _ref$links === void 0 ? [] : _ref$links;
+var Breadcrumbs = function Breadcrumbs(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Breadcrumbs, {
     "aria-label": "breadcrumbs",
-    "data-testid": "breadcrumbs",
-    children: links === null || links === void 0 ? void 0 : links.map(function (link, index) {
-      if (index === links.length - 1) {
+    "data-testid": props['data-testid'],
+    sx: props.sx,
+    className: props.className,
+    children: props.links.map(function (link, index) {
+      if (index === props.links.length - 1) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
-            color: _theme["default"].palette.text.disabled,
+            color: function color(theme) {
+              return theme.palette.text.disabled;
+            },
             fontFamily: 'Dosis',
             fontStyle: 'normal',
             fontWeight: 600,
@@ -33,13 +33,15 @@ var BreadcrumbsComponent = function BreadcrumbsComponent(_ref) {
             textTransform: 'uppercase'
           },
           children: link.label
-        }, index);
+        }, link.href);
       } else {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
           href: link.href,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
             sx: {
-              color: _theme["default"].palette.button.main,
+              color: function color(theme) {
+                return theme.palette.button.main;
+              },
               fontFamily: 'Dosis',
               fontStyle: 'normal',
               fontWeight: 600,
@@ -47,11 +49,11 @@ var BreadcrumbsComponent = function BreadcrumbsComponent(_ref) {
               textTransform: 'uppercase'
             },
             children: link.label
-          }, index)
+          })
         }, link.href);
       }
     })
   });
 };
-var _default = BreadcrumbsComponent;
+var _default = Breadcrumbs;
 exports["default"] = _default;

package/dist/components/Button/Indicator.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _material = require("@mui/material");
-var _theme = _interopRequireDefault(require("../../assets/theme"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var Indicator = function Indicator() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
     className: "button-loader",
@@ -21,8 +19,12 @@ var Indicator = function Indicator() {
       display: "grid",
       justifyItems: "center",
       alignItems: "center",
-      background: _theme["default"].palette.misc.rowHoverGreyOne,
-      border: "1px solid ".concat(_theme["default"].palette.misc.rowOnHoverGreyTwo),
+      background: function background(theme) {
+        return theme.palette.misc.rowHoverGreyOne;
+      },
+      border: function border(theme) {
+        return "1px solid ".concat(theme.palette.misc.rowOnHoverGreyTwo);
+      },
       borderRadius: '0.2rem'
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {

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

@@ -1,13 +1,22 @@
-/// <reference types="react" />
 import { ButtonProps as MuiButtonProps } from '@mui/material';
+import * as React from 'react';
+import { MouseEventHandler } from 'react';
+import { SxProps, Theme } from '@mui/system';
 export type ButtonProps = {
     'data-testid'?: string;
+    variant?: 'text' | 'outlined' | 'contained';
     isLoading?: boolean;
-    component?: React.ElementType;
-    to?: string;
-} & MuiButtonProps;
+    disabled?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    color?: MuiButtonProps['color'];
+    children?: React.ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
 /**
 - Use a button for common user click actions. Several variations available.
 **/
-declare const Button: ({ children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;