@veritone-ce/design-system 1.12.58 → 1.12.60

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

@@ -14,21 +14,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 StyledAutocomplete = (0, _material.styled)(_material.Autocomplete, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'width';
-  }
-})(function (_ref) {
-  var width = _ref.width;
-  return {
-    width: width
-  };
-});
 function Autocomplete(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAutocomplete, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
     disablePortal: props.disablePortal,
     options: props.items,
-    width: props.width,
     inputValue: props.inputValue,
     filterOptions: props.filterOptions,
     isOptionEqualToValue: function isOptionEqualToValue(option, value) {
@@ -37,6 +26,7 @@ function Autocomplete(props) {
     onInputChange: props.onInputChange && function (event, inputValue) {
       return props.onInputChange(event, inputValue);
     },
+    fullWidth: props.fullWidth,
     renderInput: function renderInput(params) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
         label: props.label,
@@ -46,7 +36,8 @@ function Autocomplete(props) {
     },
     onChange: function onChange(event, value) {
       return props.onChange(event, value);
-    }
+    },
+    sx: props.sx
   });
 }
 var _default = Autocomplete;

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

@@ -95,7 +95,7 @@ function FileUploader(props) {
           }
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             fontSize: '14px',
             width: '352px',
@@ -103,15 +103,22 @@ function FileUploader(props) {
             lineHeight: '22px',
             color: palette.text.primary
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-            component: "span",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
             sx: {
-              marginRight: '4px',
-              textDecoration: 'underline',
-              color: palette.button.main
+              display: 'flex'
             },
-            children: "Browse files"
-          }), "from your computer or drag and drop here"]
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                marginRight: '4px',
+                textDecoration: 'underline',
+                color: palette.button.main,
+                fontWeight: 400
+              },
+              children: "Browse files"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: "from your computer or drag and drop here"
+            })]
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
           sx: {
             fontWeight: 600,

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

@@ -15,12 +15,14 @@ var Panel = function Panel(props) {
     component: "div",
     "data-testid": props['data-testid'] ? "overlay-".concat(props['data-testid']) : 'overlay-panel',
     sx: {
-      position: 'absolute',
+      position: 'fixed',
       top: 0,
       right: 0,
       bottom: 0,
       zIndex: 1,
-      display: !props.open ? 'none' : 'block',
+      display: !props.open ? 'none' : 'flex',
+      flexDirection: 'flex-end',
+      // right-to-left
       marginTop: '55px'
     },
     className: props.className,
@@ -28,11 +30,8 @@ var Panel = function Panel(props) {
       component: "div",
       "data-testid": props['data-testid'] || 'wrapper-panel',
       sx: {
-        position: 'fixed',
-        right: 0,
         background: palette.common.white,
-        maxWidth: props.size === 'medium' ? '560px' : props.size === 'small' ? '380px' : '720px',
-        width: '100%',
+        width: props.size === 'medium' ? '560px' : props.size === 'small' ? '380px' : '720px',
         height: '100%',
         display: 'flex',
         flexDirection: 'column',
@@ -91,19 +90,15 @@ var Panel = function Panel(props) {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
         component: "div",
+        "data-testid": "panel-content",
         sx: {
-          overflow: 'auto',
-          flex: 1
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          padding: '30px',
+          overflow: 'auto'
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-          component: "div",
-          "data-testid": "panel-content",
-          sx: {
-            flex: 1,
-            padding: '30px'
-          },
-          children: props.children
-        })
+        children: props.children
       })]
     })
   });

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

@@ -5,23 +5,12 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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); }
 import React from 'react';
-import { Autocomplete as MuiAutocomplete, TextField, styled } from '@mui/material';
+import { Autocomplete as MuiAutocomplete, TextField } from '@mui/material';
 import { jsx as _jsx } from "react/jsx-runtime";
-var StyledAutocomplete = styled(MuiAutocomplete, {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'width';
-  }
-})(function (_ref) {
-  var width = _ref.width;
-  return {
-    width: width
-  };
-});
 function Autocomplete(props) {
-  return /*#__PURE__*/_jsx(StyledAutocomplete, {
+  return /*#__PURE__*/_jsx(MuiAutocomplete, {
     disablePortal: props.disablePortal,
     options: props.items,
-    width: props.width,
     inputValue: props.inputValue,
     filterOptions: props.filterOptions,
     isOptionEqualToValue: function isOptionEqualToValue(option, value) {
@@ -30,6 +19,7 @@ function Autocomplete(props) {
     onInputChange: props.onInputChange && function (event, inputValue) {
       return props.onInputChange(event, inputValue);
     },
+    fullWidth: props.fullWidth,
     renderInput: function renderInput(params) {
       return /*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({}, params), {}, {
         label: props.label,
@@ -39,7 +29,8 @@ function Autocomplete(props) {
     },
     onChange: function onChange(event, value) {
       return props.onChange(event, value);
-    }
+    },
+    sx: props.sx
   });
 }
 export default Autocomplete;

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

@@ -89,7 +89,7 @@ export default function FileUploader(props) {
           }
         })
       }), /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsxs(Typography, {
+        children: [/*#__PURE__*/_jsx(Typography, {
           sx: {
             fontSize: '14px',
             width: '352px',
@@ -97,15 +97,22 @@ export default function FileUploader(props) {
             lineHeight: '22px',
             color: palette.text.primary
           },
-          children: [/*#__PURE__*/_jsx(Box, {
-            component: "span",
+          children: /*#__PURE__*/_jsxs(Box, {
             sx: {
-              marginRight: '4px',
-              textDecoration: 'underline',
-              color: palette.button.main
+              display: 'flex'
             },
-            children: "Browse files"
-          }), "from your computer or drag and drop here"]
+            children: [/*#__PURE__*/_jsx(Typography, {
+              sx: {
+                marginRight: '4px',
+                textDecoration: 'underline',
+                color: palette.button.main,
+                fontWeight: 400
+              },
+              children: "Browse files"
+            }), /*#__PURE__*/_jsx(Typography, {
+              children: "from your computer or drag and drop here"
+            })]
+          })
         }), /*#__PURE__*/_jsxs(Typography, {
           sx: {
             fontWeight: 600,

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

@@ -11,12 +11,14 @@ var Panel = function Panel(props) {
     component: "div",
     "data-testid": props['data-testid'] ? "overlay-".concat(props['data-testid']) : 'overlay-panel',
     sx: {
-      position: 'absolute',
+      position: 'fixed',
       top: 0,
       right: 0,
       bottom: 0,
       zIndex: 1,
-      display: !props.open ? 'none' : 'block',
+      display: !props.open ? 'none' : 'flex',
+      flexDirection: 'flex-end',
+      // right-to-left
       marginTop: '55px'
     },
     className: props.className,
@@ -24,11 +26,8 @@ var Panel = function Panel(props) {
       component: "div",
       "data-testid": props['data-testid'] || 'wrapper-panel',
       sx: {
-        position: 'fixed',
-        right: 0,
         background: palette.common.white,
-        maxWidth: props.size === 'medium' ? '560px' : props.size === 'small' ? '380px' : '720px',
-        width: '100%',
+        width: props.size === 'medium' ? '560px' : props.size === 'small' ? '380px' : '720px',
         height: '100%',
         display: 'flex',
         flexDirection: 'column',
@@ -87,19 +86,15 @@ var Panel = function Panel(props) {
         })]
       }), /*#__PURE__*/_jsx(Box, {
         component: "div",
+        "data-testid": "panel-content",
         sx: {
-          overflow: 'auto',
-          flex: 1
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          padding: '30px',
+          overflow: 'auto'
         },
-        children: /*#__PURE__*/_jsx(Box, {
-          component: "div",
-          "data-testid": "panel-content",
-          sx: {
-            flex: 1,
-            padding: '30px'
-          },
-          children: props.children
-        })
+        children: props.children
       })]
     })
   });

package/dist/types/components/Autocomplete/index.d.ts

@@ -9,13 +9,13 @@ export type AutocompleteProps = {
     items: Item[];
     filterOptions?: (options: Item[], state: FilterOptionsState<Item>) => Item[];
     label: string;
-    width: number;
     disablePortal?: boolean;
     inputValue?: string;
     onInputChange?: (event: React.SyntheticEvent, inputValue: string) => void;
     onChange: (event: React.SyntheticEvent, value: Item | null) => void;
     error?: boolean;
     sx?: SxProps<Theme>;
+    fullWidth?: boolean;
 };
 declare function Autocomplete(props: AutocompleteProps): React.JSX.Element;
 export default Autocomplete;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.12.58",
+  "version": "1.12.60",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [