@terraware/web-components 3.0.12 → 3.0.13

package/components/Note.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../src/components/Note.tsx"],"names":[],"mappings":";AAaA,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQ7D"}
+{"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../src/components/Note.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAe7D"}

package/components/Note.js

@@ -5,24 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Note;
-var _material = require("@mui/material");
-var _styles = require("@mui/styles");
 var _react = _interopRequireDefault(require("react"));
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  note: {
-    borderRadius: 8,
-    backgroundColor: theme.palette.neutral[200],
-    marginBottom: theme.spacing(3),
-    padding: theme.spacing(2)
-  }
-}));
+var _material = require("@mui/material");
 function Note(_ref) {
   let {
     children
   } = _ref;
-  const classes = useStyles();
+  const theme = (0, _material.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: classes.note
+    sx: {
+      borderRadius: 8,
+      backgroundColor: theme.palette.neutral[200],
+      marginBottom: theme.spacing(3),
+      padding: theme.spacing(2)
+    }
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     component: "p"
   }, children));

package/components/PhotoChooser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhotoChooser/index.tsx"],"names":[],"mappings":";AASA,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAyBF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA6G1E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhotoChooser/index.tsx"],"names":[],"mappings":";AAOA,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAwI1E"}

package/components/PhotoChooser/index.js

@@ -8,33 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = PhotoChooser;
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
-var _styles = require("@mui/styles");
 var _utils = require("../../utils");
 var _ErrorBox = _interopRequireDefault(require("../ErrorBox/ErrorBox"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _FileChooser = _interopRequireDefault(require("../FileChooser"));
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  removePhoto: {
-    position: 'absolute',
-    top: -10,
-    right: -10,
-    backgroundColor: theme.palette.TwClrBgDanger
-  },
-  error: {
-    width: 'auto',
-    marginBottom: theme.spacing(2),
-    '&.mobile': {
-      width: 'auto'
-    }
-  },
-  thumbnail: {
-    margin: 'auto auto',
-    objectFit: 'contain',
-    display: 'flex',
-    maxWidth: '120px',
-    maxHeight: '120px'
-  }
-}));
 function PhotoChooser(props) {
   const {
     title,
@@ -54,7 +31,6 @@ function PhotoChooser(props) {
   const {
     isMobile
   } = (0, _utils.useDeviceInfo)();
-  const classes = useStyles();
   const [files, setFiles] = (0, _react.useState)([]);
   const [filesData, setFilesData] = (0, _react.useState)([]);
   const divRef = (0, _react.useRef)(null);
@@ -98,7 +74,13 @@ function PhotoChooser(props) {
   }, txt)) : description), error && /*#__PURE__*/_react.default.createElement(_ErrorBox.default, {
     title: error.title,
     text: error.text,
-    className: classes.error
+    sx: {
+      width: 'auto',
+      marginBottom: theme.spacing(2),
+      '&.mobile': {
+        width: 'auto'
+      }
+    }
   }), filesData.length > 0 && multipleSelection && /*#__PURE__*/_react.default.createElement(_material.Box, {
     display: "flex",
     flexDirection: "row",
@@ -118,12 +100,23 @@ function PhotoChooser(props) {
       icon: "iconTrashCan",
       onClick: () => removeFileAtIndex(index),
       size: "small",
-      className: classes.removePhoto
+      style: {
+        position: 'absolute',
+        top: -10,
+        right: -10,
+        backgroundColor: theme.palette.TwClrBgDanger
+      }
     }), /*#__PURE__*/_react.default.createElement("img", {
       height: "120px",
       src: fileData,
       alt: (_files$index = files[index]) === null || _files$index === void 0 ? void 0 : _files$index.name,
-      className: classes.thumbnail
+      style: {
+        margin: 'auto auto',
+        objectFit: 'contain',
+        display: 'flex',
+        maxWidth: '120px',
+        maxHeight: '120px'
+      }
     }));
   }))), /*#__PURE__*/_react.default.createElement(_FileChooser.default, {
     acceptFileType: "image/jpeg,image/png",

package/components/PopoverMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PopoverMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAgB,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAkBxC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,EAAE,OAAO,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAgCpG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PopoverMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAgB,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,EAAE,OAAO,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA+CpG"}

package/components/PopoverMenu/index.js

@@ -9,30 +9,14 @@ exports.default = PopoverMenu;
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _material = require("@mui/material");
-var _styles = require("@mui/styles");
 var _Popover = _interopRequireDefault(require("./Popover"));
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  iconContainer: {
-    height: '48px',
-    borderRadius: '16px',
-    padding: theme.spacing(1.5, 2)
-  },
-  icon: {
-    width: '32px',
-    height: '32px'
-  },
-  chevronDown: {
-    marginLeft: '8px',
-    fill: theme.palette.TwClrIcn
-  }
-}));
 function PopoverMenu(_ref) {
   let {
     anchor,
     menuSections,
     onClick
   } = _ref;
-  const classes = useStyles();
+  const theme = (0, _material.useTheme)();
   const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
   const handleClick = event => {
     setAnchorEl(event.currentTarget);
@@ -49,11 +33,18 @@ function PopoverMenu(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
     onClick: handleClick,
     size: "small",
-    className: classes.iconContainer
+    sx: {
+      height: '48px',
+      borderRadius: '16px',
+      padding: theme.spacing(1.5, 2)
+    }
   }, anchor, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "chevronDown",
     size: "medium",
-    className: classes.chevronDown
+    style: {
+      marginLeft: '8px',
+      fill: theme.palette.TwClrIcn
+    }
   })), /*#__PURE__*/_react.default.createElement(_Popover.default, {
     sections: menuSections,
     handleClick: onItemClick,

package/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TooltipProps } from '@mui/material';
+import { SxProps, TooltipProps } from '@mui/material';
 import './styles.scss';
 import { SelectStyles } from './SelectT';
 export interface SelectProps {
@@ -21,6 +21,7 @@ export interface SelectProps {
     readonly?: boolean;
     selectedValue?: string;
     selectStyles?: SelectStyles;
+    sx?: SxProps;
     tooltipTitle?: TooltipProps['title'];
     warningText?: string | string[];
 }

package/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAG7C,OAAO,eAAe,CAAC;AACvB,OAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAY9D"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,eAAe,CAAC;AACvB,OAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAY9D"}

package/components/Select/SelectT.d.ts

@@ -1,4 +1,4 @@
-import { TooltipProps } from '@mui/material';
+import { SxProps, TooltipProps } from '@mui/material';
 import React from 'react';
 import './styles.scss';
 export interface SelectStyles {
@@ -31,6 +31,7 @@ export interface SelectTProps<T> {
     required?: boolean;
     selectedValue?: T;
     selectStyles?: SelectStyles;
+    sx?: SxProps;
     toT: (input: string) => T;
     tooltipTitle?: TooltipProps['title'];
     warningText?: string | string[];

package/components/Select/SelectT.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectT.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectT.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,KAAwF,MAAM,OAAO,CAAC;AAE7G,OAAO,eAAe,CAAC;AAMvB,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAgRtE"}
+{"version":3,"file":"SelectT.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectT.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,KAAwF,MAAM,OAAO,CAAC;AAE7G,OAAO,eAAe,CAAC;AAMvB,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAiRtE"}

package/components/Select/SelectT.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = SelectT;
+var _material = require("@mui/material");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 require("./styles.scss");
@@ -38,6 +39,7 @@ function SelectT(props) {
     required,
     selectedValue,
     selectStyles,
+    sx,
     tooltipTitle,
     toT,
     warningText
@@ -175,8 +177,9 @@ function SelectT(props) {
       }
     }
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "select ".concat(className)
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "select ".concat(className),
+    sx: sx
   }, label && /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: id,
     className: "textfield-label"

package/components/SummaryBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryBox.d.ts","sourceRoot":"","sources":["../../src/components/SummaryBox.tsx"],"names":[],"mappings":";AAyCA,MAAM,WAAW,KAAK;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAmB,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyBnH"}
+{"version":3,"file":"SummaryBox.d.ts","sourceRoot":"","sources":["../../src/components/SummaryBox.tsx"],"names":[],"mappings":";AAIA,MAAM,WAAW,KAAK;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAmB,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyDnH"}

package/components/SummaryBox.js

@@ -1,49 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = SummaryBox;
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
-var _styles = require("@mui/styles");
-var _react = _interopRequireDefault(require("react"));
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  bold: {
-    fontWeight: theme.typography.fontWeightBold,
-    whiteSpace: 'pre-line'
-  },
-  summaryDefault: {
-    position: 'relative',
-    borderRadius: 8,
-    backgroundColor: theme.palette.neutral[200],
-    padding: theme.spacing(2)
-  },
-  summaryAvailable: {
-    borderRadius: 8,
-    backgroundColor: theme.palette.neutral[700],
-    padding: theme.spacing(2),
-    color: theme.palette.common.white
-  },
-  summaryZero: {
-    borderRadius: 8,
-    backgroundColor: theme.palette.state[5],
-    padding: theme.spacing(2),
-    color: theme.palette.common.white
-  },
-  full: {
-    borderRadius: 8,
-    backgroundColor: theme.palette.neutral[200],
-    padding: theme.spacing(2),
-    height: '100%',
-    boxSizing: 'border-box'
-  },
-  infoIcon: {
-    position: 'absolute',
-    right: theme.spacing(2)
-  }
-}));
+var _react = _interopRequireWildcard(require("react"));
 function SummaryBox(_ref) {
   let {
     title,
@@ -53,19 +17,57 @@ function SummaryBox(_ref) {
     icon,
     onIconClick
   } = _ref;
-  const classes = useStyles();
-  const style = variant === 'default' ? classes.summaryDefault : variant === 'available' ? classes.summaryAvailable : variant === 'full' ? classes.full : classes.summaryZero;
+  const theme = (0, _material.useTheme)();
+  const summaryBoxStyles = (0, _react.useMemo)(() => {
+    switch (variant) {
+      case 'default':
+        return {
+          position: 'relative',
+          borderRadius: 8,
+          backgroundColor: theme.palette.neutral[200],
+          padding: theme.spacing(2)
+        };
+      case 'available':
+        return {
+          borderRadius: 8,
+          backgroundColor: theme.palette.neutral[700],
+          padding: theme.spacing(2),
+          color: theme.palette.common.white
+        };
+      case 'full':
+        return {
+          borderRadius: 8,
+          backgroundColor: theme.palette.neutral[200],
+          padding: theme.spacing(2),
+          height: '100%',
+          boxSizing: 'border-box'
+        };
+      default:
+        return {
+          borderRadius: 8,
+          backgroundColor: theme.palette.state[5],
+          padding: theme.spacing(2),
+          color: theme.palette.common.white
+        };
+    }
+  }, [theme, variant]);
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: style,
-    id: id
+    id: id,
+    sx: summaryBoxStyles
   }, icon && /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    className: classes.infoIcon,
-    onClick: onIconClick
+    onClick: onIconClick,
+    sx: {
+      position: 'absolute',
+      right: theme.spacing(2)
+    }
   }, /*#__PURE__*/_react.default.createElement(_iconsMaterial.Info, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     component: "p"
   }, title), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     component: "p",
     variant: "h6",
-    className: classes.bold
+    sx: {
+      fontWeight: theme.typography.fontWeightBold,
+      whiteSpace: 'pre-line'
+    }
   }, value));
 }

package/components/TextTruncated/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextTruncated/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAyE5D,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAClC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4E/D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextTruncated/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAmD5D,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAClC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA0F/D"}

package/components/TextTruncated/index.js

@@ -7,28 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = TextTruncated;
 var _material = require("@mui/material");
 var _react = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/styles");
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  arrow: {
-    color: "".concat(theme.palette.TwClrBg, " !important"),
-    '&:before': {
-      border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary)
-    }
-  },
-  popper: {
-    maxHeight: '200px',
-    overflow: 'auto'
-  },
-  tooltip: {
-    backgroundColor: "".concat(theme.palette.TwClrBg, " !important"),
-    color: "".concat(theme.palette.TwClrTxt, " !important"),
-    border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary, " !important"),
-    borderRadius: '8px !important',
-    boxShadow: "0px 3px 3px ".concat(theme.palette.TwClrBaseGray100),
-    padding: '8px'
-  }
-}));
-
 /**
  * Represents the result of truncating the string list
  * text: the text to display before the '...# more' link
@@ -87,7 +65,6 @@ function TextTruncated(props) {
     placeHolder
   } = props;
   const [showAllOpen, setShowAllOpen] = (0, _react.useState)(false);
-  const classes = useStyles();
   const [canvasContext, setCanvasContext] = (0, _react.useState)();
   const theme = (0, _material.useTheme)();
   (0, _react.useEffect)(() => {
@@ -121,16 +98,31 @@ function TextTruncated(props) {
     sx: textStyle
   }, textToDisplay.text, textToDisplay.numberMore !== 0 ? moreSeparator : '', textToDisplay.numberMore !== 0 ? /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     arrow: true,
-    classes: {
-      arrow: classes.arrow,
-      popper: classes.popper,
-      tooltip: classes.tooltip
-    },
     open: showAllOpen,
     title: /*#__PURE__*/_react.default.createElement(_material.Typography, {
       sx: showAllStyle,
       fontSize: "14px"
-    }, stringList.join(listSeparator))
+    }, stringList.join(listSeparator)),
+    sx: {
+      '& .MuiTooltip-arrow': {
+        color: "".concat(theme.palette.TwClrBg, " !important"),
+        '&:before': {
+          border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary)
+        }
+      },
+      '& .MuiTooltip-popper': {
+        maxHeight: '200px',
+        overflow: 'auto'
+      },
+      '& .MuiTooltip-tooltip': {
+        backgroundColor: "".concat(theme.palette.TwClrBg, " !important"),
+        color: "".concat(theme.palette.TwClrTxt, " !important"),
+        border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary, " !important"),
+        borderRadius: '8px !important',
+        boxShadow: "0px 3px 3px ".concat(theme.palette.TwClrBaseGray100),
+        padding: '8px'
+      }
+    }
   }, /*#__PURE__*/_react.default.createElement(_material.Link, {
     component: "button",
     onClick: onClickHandler,

package/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AACA,OAAO,EAAgC,YAAY,EAAE,MAAM,eAAe,CAAC;AAmB3E,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,SAAuB,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAkCvG"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AACA,OAAO,EAAyB,YAAY,EAAY,MAAM,eAAe,CAAC;AAI9E,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,SAAuB,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAyCvG"}

package/components/Tooltip/Tooltip.js

@@ -7,21 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Tooltip;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
-var _styles = require("@mui/styles");
 var _utils = require("../../utils");
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  arrow: {
-    color: theme.palette.TwClrBaseGray800
-  },
-  tooltip: {
-    backgroundColor: theme.palette.TwClrBaseGray800,
-    color: theme.palette.TwClrBaseWhite,
-    padding: '8px',
-    '& a': {
-      color: theme.palette.TwClrBaseWhite
-    }
-  }
-}));
 function Tooltip(_ref) {
   let {
     placement = 'top-start',
@@ -32,7 +18,7 @@ function Tooltip(_ref) {
   const {
     isMobile
   } = (0, _utils.useDeviceInfo)();
-  const classes = useStyles();
+  const theme = (0, _material.useTheme)();
   const handleTooltipClose = () => {
     setOpen(false);
   };
@@ -43,16 +29,23 @@ function Tooltip(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     arrow: true,
-    classes: {
-      arrow: classes.arrow,
-      tooltip: classes.tooltip
-    },
     onOpen: handleTooltipOpen,
     onClose: handleTooltipClose,
     open: open,
     placement: placement,
     sx: {
-      maxWidth: isMobile ? '342px' : '464px'
+      maxWidth: isMobile ? '342px' : '464px',
+      '& .MuiTooltip-arrow': {
+        color: theme.palette.TwClrBaseGray800
+      },
+      '& .MuiTooltip-tooltip': {
+        backgroundColor: theme.palette.TwClrBaseGray800,
+        color: theme.palette.TwClrBaseWhite,
+        padding: '8px',
+        '& a': {
+          color: theme.palette.TwClrBaseWhite
+        }
+      }
     },
     title: title
   }, /*#__PURE__*/_react.default.createElement("span", {

package/components/table/EnhancedTableToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnhancedTableToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/table/EnhancedTableToolbar.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAkB,YAAY,EAAE,MAAM,GAAG,CAAC;AAGjD,OAAO,EAAE,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAmBzE,UAAU,yBAAyB;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;IAC/C,qBAAqB,CAAC,EAAE,6BAA6B,CAAC;CACvD;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+DjG"}
+{"version":3,"file":"EnhancedTableToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/table/EnhancedTableToolbar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAkB,YAAY,EAAE,MAAM,GAAG,CAAC;AAGjD,OAAO,EAAE,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAEzE,UAAU,yBAAyB;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;IAC/C,qBAAqB,CAAC,EAAE,6BAA6B,CAAC;CACvD;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAyEjG"}

package/components/table/EnhancedTableToolbar.js

@@ -8,26 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = EnhancedTableToolbar;
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
-var _styles = require("@mui/styles");
 var _ = require(".");
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
-const styles = (0, _styles.makeStyles)(theme => ({
-  toolbar: {
-    background: theme.palette.TwClrBgSecondary,
-    borderRadius: theme.spacing(0.5)
-  },
-  flexText: {
-    flex: '1 1 auto'
-  },
-  buttonSpacing: {
-    marginLeft: theme.spacing(1)
-  },
-  selectLink: {
-    color: theme.palette.TwClrTxtBrand,
-    cursor: 'pointer'
-  }
-}));
 function EnhancedTableToolbar(props) {
   const {
     isAllSelected,
@@ -36,7 +19,11 @@ function EnhancedTableToolbar(props) {
     topBarButtons,
     topBarSelectionConfig
   } = props;
-  const classes = styles();
+  const theme = (0, _material.useTheme)();
+  const selectLinkStyles = {
+    color: theme.palette.TwClrTxtBrand,
+    cursor: 'pointer'
+  };
   const topBarSelection = (0, _react.useMemo)(() => {
     if (!renderNumSelectedText) {
       return null;
@@ -52,31 +39,38 @@ function EnhancedTableToolbar(props) {
       renderEnhancedNumSelectedText
     } = topBarSelectionConfig;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderEnhancedNumSelectedText ? renderEnhancedNumSelectedText() : renderNumSelectedText(numSelected), ' ', !isAllSelected && handleSelectAll && renderSelectAllText && /*#__PURE__*/_react.default.createElement(_material.Link, {
-      className: classes.selectLink,
-      onClick: handleSelectAll
+      onClick: handleSelectAll,
+      sx: selectLinkStyles
     }, renderSelectAllText()), isAllSelected && handleSelectNone && renderSelectNoneText && /*#__PURE__*/_react.default.createElement(_material.Link, {
-      className: classes.selectLink,
-      onClick: handleSelectNone
+      onClick: handleSelectNone,
+      sx: selectLinkStyles
     }, renderSelectNoneText()));
   }, [renderNumSelectedText, topBarSelectionConfig, numSelected]);
   return renderNumSelectedText && numSelected > 0 ? /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
-    className: classes.toolbar
+    sx: {
+      background: theme.palette.TwClrBgSecondary,
+      borderRadius: theme.spacing(0.5)
+    }
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "inherit",
     variant: "subtitle1",
     component: "div",
-    className: classes.flexText
+    sx: {
+      flex: '1 1 auto'
+    }
   }, topBarSelection), topBarButtons === null || topBarButtons === void 0 ? void 0 : topBarButtons.map((tbButton, index) => (0, _.isTopBarButton)(tbButton) ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: tbButton.tooltipTitle,
     key: index
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    className: classes.buttonSpacing,
     key: tbButton.buttonText,
     label: tbButton.buttonText,
     priority: "secondary",
     type: tbButton.buttonType,
     onClick: tbButton.onButtonClick,
     icon: tbButton.icon,
-    disabled: tbButton.disabled
+    disabled: tbButton.disabled,
+    sx: {
+      marginLeft: theme.spacing(1)
+    }
   })) : tbButton)) : null;
 }