@veritone-ce/design-system 1.12.9 → 1.12.11

package/dist/assets/theme.js

@@ -12,8 +12,8 @@ import { menuFlyoutTheme, menuItemTheme } from '../components/MenuFlyout/menuFly
 import modalTheme from '../components/Modal/modal.theme';
 import linearProgress from '../components/LinearProgress/linearProgress.theme';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import InformationIcon from 'resources/icons/information.svg';
-import WarningIcon from 'resources/icons/warning.svg';
+import InformationIcon from '../resources/icons/information.svg';
+import WarningIcon from '../resources/icons/warning.svg';
 import ErrorIcon from '@mui/icons-material/Cancel';
 export const colors = {
     brand: {

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

@@ -0,0 +1,5 @@
+import { Meta, Story } from '@storybook/react';
+import { AudioSliderProps } from './';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: Story<AudioSliderProps>;

package/dist/components/AudioSlider/AudioSlider.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AudioSlider from './';
+import Box from '../Box';
+export default {
+    title: 'Components/AudioSlider',
+    component: AudioSlider,
+    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(AudioSlider, Object.assign({}, args)) })));
+const onChangeSlider = (event, value) => {
+    console.log('onChangeSlider', event, value);
+};
+export const Default = Template.bind({});
+Default.args = {
+    value: 1,
+    onChange: onChangeSlider,
+    max: 3,
+    step: 0.1
+};

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

@@ -0,0 +1,12 @@
+import { SliderProps as MuiSliderProps } from '@mui/material/Slider';
+export type AudioSliderProps = {
+    value: number;
+    onChange: (event: Event, value: number | number[]) => void;
+    label?: string;
+    max?: number;
+    isAvailable?: boolean;
+    step?: number;
+    typeData?: string;
+} & MuiSliderProps;
+declare const AudioSlider: ({ value, onChange, max, isAvailable, step, label, typeData, ...props }: AudioSliderProps) => JSX.Element;
+export default AudioSlider;

package/dist/components/AudioSlider/index.js

@@ -0,0 +1,61 @@
+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 } from "react/jsx-runtime";
+import Slider from '@mui/material/Slider';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+const CustomSlider = styled(Slider)({
+    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'
+    }
+});
+const AudioSlider = (_a) => {
+    var { value, onChange, max = 3, isAvailable = true, step, label, typeData = 'audio' } = _a, props = __rest(_a, ["value", "onChange", "max", "isAvailable", "step", "label", "typeData"]);
+    return (_jsx(Box, Object.assign({ sx: { width: 320 } }, { children: _jsx(CustomSlider, { "aria-label": "audio-slider", defaultValue: value, max: max, step: step, onChange: onChange, disabled: !isAvailable }) })));
+};
+export default AudioSlider;

package/dist/index.d.ts

@@ -26,5 +26,6 @@ export { default as Step } from './components/Step';
 export { default as StepLabel } from './components/StepLabel';
 export { default as ModelGridView } from './components/ModelGridView';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
+export { default as AudioSlider } from './components/AudioSlider';
 export { default as theme } from './assets/theme';
 export { useTheme } from '@mui/material';

package/dist/index.js

@@ -26,5 +26,6 @@ export { default as Step } from './components/Step';
 export { default as StepLabel } from './components/StepLabel';
 export { default as ModelGridView } from './components/ModelGridView';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
+export { default as AudioSlider } from './components/AudioSlider';
 export { default as theme } from './assets/theme';
 export { useTheme } from '@mui/material';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.12.9",
+  "version": "1.12.11",
   "private": false,
   "scripts": {
     "start": "yarn storybook",