@veritone-ce/design-system 1.12.14 → 1.12.16

package/dist/components/Button/button.theme.js

@@ -1,104 +1,123 @@
-const buttonTheme = (theme) => ({
-    defaultProps: {
-        variant: 'contained',
-        disableRipple: true
-    },
-    styleOverrides: {
-        root: ({ ownerState }) => (Object.assign(Object.assign(Object.assign({ textTransform: 'none', fontWeight: '600', '&.MuiButton-outlinedError': {
-                backgroundColor: theme.palette.common.white
-            }, '&.Mui-disabled': Object.assign({}, (ownerState.variant !== `text` && {
-                borderColor: theme.palette.misc.altBackground,
-                backgroundColor: theme.palette.misc.rowHoverGreyOne,
-                borderWidth: '1px',
-                borderStyle: 'solid'
-            })), '& .MuiButton-startIcon': Object.assign({ marginRight: 0, marginLeft: 0, marginTop: '-1px', fontSize: '18px' }, {
-                '& .MuiSvgIcon-root': {
-                    fontSize: 18
-                }
-            }), '& .MuiButton-endIcon': Object.assign({ marginRight: 0, marginLeft: 0, marginTop: '-1px', fontSize: '18px' }, {
-                '& .MuiSvgIcon-root': {
-                    fontSize: 18
-                }
-            }), '&.Mui-disabled .MuiButton-startIcon .MuiButton-endIcon': {
-                opacity: 0.3
-            } }, (ownerState.variant === `contained` &&
-            {
-                //@ts-ignore
-                backgroundColor: ownerState.color === `primary`
-                    ? theme.palette.button.main
-                    : //@ts-ignore
-                        theme.palette[ownerState.color].main,
-                ':hover': {
-                    //@ts-ignore
-                    backgroundColor: ownerState.color === `primary`
-                        ? theme.palette.button.hover
-                        : //@ts-ignore
-                            theme.palette[ownerState.color]
-                }
-            })), (ownerState.variant === `outlined` &&
-            {
-                backgroundColor: ownerState.color === `primary`
-                    ? theme.palette.common.white
-                    : //@ts-ignore
-                        theme.palette[ownerState.color],
-                //@ts-ignore
-                color: ownerState.color === `primary`
-                    ? theme.palette.neutral.main
-                    : //@ts-ignore
-                        theme.palette[ownerState.color].main,
-                borderColor: ownerState.color === `primary`
-                    ? theme.palette.neutral.main
-                    : //@ts-ignore
-                        theme.palette[ownerState.color].main,
-                ':hover': {
-                    backgroundColor: ownerState.color === `primary`
-                        ? theme.palette.common.white
-                        : //@ts-ignore
-                            theme.palette[ownerState.color],
-                    //@ts-ignore
-                    color: ownerState.color === `primary`
-                        ? theme.palette.secondary.main
-                        : //@ts-ignore
-                            theme.palette[ownerState.color],
-                    //@ts-ignore
-                    borderColor: ownerState.color === `primary`
-                        ? theme.palette.secondary.main
-                        : //@ts-ignore
-                            theme.palette[ownerState.color]
-                }
-            })), (ownerState.variant === `text` &&
-            {
-                backgroundColor: 'transparent',
-                color: ownerState.color === `primary`
-                    ? theme.palette.text.tertiary
-                    : //@ts-ignore
-                        theme.palette[ownerState.color].main,
-                ':hover': {
-                    backgroundColor: 'rgba(255, 255, 255, 0.15)',
-                    //@ts-ignore
-                    color: ownerState.color === `primary`
-                        ? theme.palette.secondary.main
-                        : //@ts-ignore
-                            theme.palette[ownerState.color]
-                }
-            })))
-    },
-    variants: [
-        {
-            props: {
-                variant: 'secondary'
-            },
-            style: {
-                backgroundColor: 'white',
-                color: theme.palette.neutral.main,
-                border: `1px solid ${theme.palette.neutral.main}`,
-                ':hover': {
-                    border: `1px solid ${theme.palette.primary.main}`,
-                    color: theme.palette.primary.main,
-                    backgroundColor: 'white'
-                }
-            }
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const buttonTheme = theme => ({
+  defaultProps: {
+    variant: 'contained',
+    disableRipple: true
+  },
+  styleOverrides: {
+    root: ({
+      ownerState
+    }) => ({
+      textTransform: 'none',
+      fontWeight: '600',
+      '&.MuiButton-outlinedError': {
+        backgroundColor: theme.palette.common.white
+      },
+      '&.Mui-disabled': {
+        ...(ownerState.variant !== `text` && {
+          borderColor: theme.palette.misc.altBackground,
+          backgroundColor: theme.palette.misc.rowHoverGreyOne,
+          borderWidth: '1px',
+          borderStyle: 'solid'
+        })
+      },
+      '& .MuiButton-startIcon': {
+        marginRight: 0,
+        marginLeft: 0,
+        marginTop: '-1px',
+        fontSize: '18px',
+        ...{
+          '& .MuiSvgIcon-root': {
+            fontSize: 18
+          }
+        }
+      },
+      '& .MuiButton-endIcon': {
+        marginRight: 0,
+        marginLeft: 0,
+        marginTop: '-1px',
+        fontSize: '18px',
+        ...{
+          '& .MuiSvgIcon-root': {
+            fontSize: 18
+          }
         }
-    ]
+      },
+      '&.Mui-disabled .MuiButton-startIcon .MuiButton-endIcon': {
+        opacity: 0.3
+      },
+      ...(ownerState.variant === `contained` && {
+        //@ts-ignore
+        backgroundColor: ownerState.color === `primary` ? theme.palette.button.main :
+        //@ts-ignore
+        theme.palette[ownerState.color].main,
+        ':hover': {
+          //@ts-ignore
+          backgroundColor: ownerState.color === `primary` ? theme.palette.button.hover :
+          //@ts-ignore
+          theme.palette[ownerState.color]
+        }
+      }),
+      ...(ownerState.variant === `outlined` && {
+        backgroundColor: ownerState.color === `primary` ? theme.palette.common.white :
+        //@ts-ignore
+        theme.palette[ownerState.color],
+        //@ts-ignore
+        color: ownerState.color === `primary` ? theme.palette.neutral.main :
+        //@ts-ignore
+        theme.palette[ownerState.color].main,
+        borderColor: ownerState.color === `primary` ? theme.palette.neutral.main :
+        //@ts-ignore
+        theme.palette[ownerState.color].main,
+        ':hover': {
+          backgroundColor: ownerState.color === `primary` ? theme.palette.common.white :
+          //@ts-ignore
+          theme.palette[ownerState.color],
+          //@ts-ignore
+          color: ownerState.color === `primary` ? theme.palette.secondary.main :
+          //@ts-ignore
+          theme.palette[ownerState.color],
+          //@ts-ignore
+          borderColor: ownerState.color === `primary` ? theme.palette.secondary.main :
+          //@ts-ignore
+          theme.palette[ownerState.color]
+        }
+      }),
+      ...(ownerState.variant === `text` && {
+        backgroundColor: 'transparent',
+        color: ownerState.color === `primary` ? theme.palette.text.tertiary :
+        //@ts-ignore
+        theme.palette[ownerState.color].main,
+        ':hover': {
+          backgroundColor: 'rgba(255, 255, 255, 0.15)',
+          //@ts-ignore
+          color: ownerState.color === `primary` ? theme.palette.secondary.main :
+          //@ts-ignore
+          theme.palette[ownerState.color]
+        }
+      })
+    })
+  },
+  variants: [{
+    props: {
+      variant: 'secondary'
+    },
+    style: {
+      backgroundColor: 'white',
+      color: theme.palette.neutral.main,
+      border: `1px solid ${theme.palette.neutral.main}`,
+      ':hover': {
+        border: `1px solid ${theme.palette.primary.main}`,
+        color: theme.palette.primary.main,
+        backgroundColor: 'white'
+      }
+    }
+  }]
 });
-export default buttonTheme;
+var _default = buttonTheme;
+exports.default = _default;

package/dist/components/Button/index.js

@@ -1,38 +1,48 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button as MuiButton, Box } from '@mui/material';
-import Indicator from './Indicator';
-import useButtonProps from './useButtonProps';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _Indicator = _interopRequireDefault(require("./Indicator"));
+var _useButtonProps = _interopRequireDefault(require("./useButtonProps"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
 - Use a button for common user click actions. Several variations available.
 **/
-const Button = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const _b = useButtonProps(props), { isLoading } = _b, muiButtonProps = __rest(_b, ["isLoading"]);
-    return (_jsxs(Box, Object.assign({ sx: {
-            display: `inline-flex`,
-            position: `relative`
-        } }, { children: [_jsx(MuiButton, Object.assign({ sx: {
-                    fontSize: '14px',
-                    gap: '5px',
-                    paddingTop: '8px',
-                    paddingBottom: '8px',
-                    paddingLeft: '15px',
-                    paddingRight: '15px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    lineHeight: '16px',
-                    height: 36
-                }, disableElevation: true }, muiButtonProps, { children: children })), isLoading && _jsx(Indicator, {})] })));
+const Button = ({
+  children,
+  ...props
+}) => {
+  const {
+    isLoading,
+    ...muiButtonProps
+  } = (0, _useButtonProps.default)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: `inline-flex`,
+      position: `relative`
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+      sx: {
+        fontSize: '14px',
+        gap: '5px',
+        paddingTop: '8px',
+        paddingBottom: '8px',
+        paddingLeft: '15px',
+        paddingRight: '15px',
+        display: 'flex',
+        alignItems: 'center',
+        lineHeight: '16px',
+        height: 36
+      },
+      disableElevation: true,
+      ...muiButtonProps,
+      children: children
+    }), isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Indicator.default, {})]
+  });
 };
-export default Button;
+var _default = Button;
+exports.default = _default;

package/dist/components/Button/useButtonProps.js

@@ -1,16 +1,18 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const useButtonProps = ({
+  isLoading = false,
+  ...props
+}) => {
+  return {
+    disabled: isLoading || props.disabled,
+    isLoading,
+    ...props
+  };
 };
-const useButtonProps = (_a) => {
-    var { isLoading = false } = _a, props = __rest(_a, ["isLoading"]);
-    return Object.assign({ disabled: isLoading || props.disabled, isLoading }, props);
-};
-export default useButtonProps;
+var _default = useButtonProps;
+exports.default = _default;

package/dist/components/Checkbox/Checkbox.stories.js

@@ -1,19 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import React from 'react';
-import Checkbox from '.';
-export default {
-    title: 'Components/Checkbox',
-    component: Checkbox
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutLabel = exports.Default = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components/Checkbox',
+  component: _.default
 };
-const Template = (args) => (_jsx(Box, Object.assign({ sx: {
-        display: `grid`,
-        gridTemplateRows: `repeat(5, min-content)`,
-        gap: 2
-    } }, { children: _jsxs(React.Fragment, { children: [_jsx(Checkbox, Object.assign({}, args)), _jsx(Checkbox, Object.assign({}, args, { checked: true })), _jsx(Checkbox, Object.assign({}, args, { indeterminate: true })), _jsx(Checkbox, Object.assign({}, args, { disabled: true })), _jsx(Checkbox, Object.assign({}, args, { disabled: true, checked: true }))] }) })));
-export const Default = Template.bind({});
+exports.default = _default;
+const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  sx: {
+    display: `grid`,
+    gridTemplateRows: `repeat(5, min-content)`,
+    gap: 2
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      ...args
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      ...args,
+      checked: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      ...args,
+      indeterminate: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      ...args,
+      disabled: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      ...args,
+      disabled: true,
+      checked: true
+    })]
+  })
+});
+const Default = Template.bind({});
+exports.Default = Default;
 Default.args = {
-    label: 'Label'
+  label: 'Label'
 };
-export const WithoutLabel = Template.bind({});
-WithoutLabel.args = {};
+const WithoutLabel = Template.bind({});
+exports.WithoutLabel = WithoutLabel;
+WithoutLabel.args = {};

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

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

package/dist/components/Checkbox/checkbox.theme.js

@@ -1,17 +1,24 @@
-const checkboxTheme = (theme) => ({
-    styleOverrides: {
-        root: () => ({
-            marginRight: '8px',
-            '&.MuiCheckbox-root': {
-                color: theme.palette.text.secondary
-            },
-            '&.Mui-checked, &.MuiCheckbox-indeterminate': {
-                color: theme.palette.button.main
-            },
-            '&.Mui-disabled': {
-                color: theme.palette.text.disabled
-            }
-        })
-    }
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-export default checkboxTheme;
+exports.default = void 0;
+const checkboxTheme = theme => ({
+  styleOverrides: {
+    root: () => ({
+      marginRight: '8px',
+      '&.MuiCheckbox-root': {
+        color: theme.palette.text.secondary
+      },
+      '&.Mui-checked, &.MuiCheckbox-indeterminate': {
+        color: theme.palette.button.main
+      },
+      '&.Mui-disabled': {
+        color: theme.palette.text.disabled
+      }
+    })
+  }
+});
+var _default = checkboxTheme;
+exports.default = _default;

package/dist/components/Checkbox/index.js

@@ -1,18 +1,23 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _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 }; }
+const Checkbox = ({
+  label,
+  ...props
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+    label: label,
+    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+      ...props
+    })
+  });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
-const Checkbox = (_a) => {
-    var { label } = _a, props = __rest(_a, ["label"]);
-    return _jsx(FormControlLabel, { label: label, control: _jsx(MuiCheckbox, Object.assign({}, props)) });
-};
-export default Checkbox;
+var _default = Checkbox;
+exports.default = _default;

package/dist/components/CustomSlider/CustomSlider.stories.js

@@ -1,29 +1,48 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import CustomSlider from '.';
-import Box from '../Box';
-export default {
-    title: 'Components/CustomSlider',
-    component: CustomSlider,
-    argTypes: {
-        value: {
-            control: {
-                type: 'range',
-                min: 0,
-                max: 3,
-                step: 0.1
-            }
-        },
-        onChange: { action: 'onChange' }
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _ = _interopRequireDefault(require("."));
+var _Box = _interopRequireDefault(require("../Box"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components/CustomSlider',
+  component: _.default,
+  argTypes: {
+    value: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 3,
+        step: 0.1
+      }
+    },
+    onChange: {
+      action: 'onChange'
     }
+  }
 };
-const Template = (args) => (_jsx(Box, Object.assign({ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, { children: _jsx(CustomSlider, Object.assign({}, args)) })));
+exports.default = _default;
+const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: "100vh",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    ...args
+  })
+});
 const onChangeSlider = (event, value) => {
-    console.log('onChangeSlider', event, value);
+  console.log('onChangeSlider', event, value);
 };
-export const Default = Template.bind({});
+const Default = Template.bind({});
+exports.Default = Default;
 Default.args = {
-    value: 1,
-    onChange: onChangeSlider,
-    max: 3,
-    step: 0.1
-};
+  value: 1,
+  onChange: onChangeSlider,
+  max: 3,
+  step: 0.1
+};