@terraware/web-components 3.0.12 → 3.0.13

package/components/Autocomplete/Autocomplete.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TooltipProps } from '@mui/material';
+import { SxProps, TooltipProps } from '@mui/material';
 import { DropdownItem as Option } from '../types';
 import '../Select/styles.scss';
 import './styles.scss';
@@ -19,6 +19,7 @@ export interface Props {
     errorText?: string;
     tooltipTitle?: TooltipProps['title'];
     required?: boolean;
+    sx?: SxProps;
 }
-export default function Autocomplete({ id, label, options, onChange, selected, freeSolo, disabled, className, hideClearIcon, isEqual, placeholder, errorText, tooltipTitle, required, }: Props): JSX.Element;
+export default function Autocomplete({ id, label, options, onChange, selected, freeSolo, disabled, className, hideClearIcon, isEqual, placeholder, errorText, tooltipTitle, required, sx, }: Props): JSX.Element;
 //# sourceMappingURL=Autocomplete.d.ts.map

package/components/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA8C,YAAY,EAAE,MAAM,eAAe,CAAC;AAIzF,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEpD,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,QAAQ,GACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyFrB"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAwC,OAAO,EAAa,YAAY,EAAE,MAAM,eAAe,CAAC;AAIvG,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEpD,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAID,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,EAAE,GACH,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyFrB"}

package/components/Autocomplete/Autocomplete.js

@@ -27,7 +27,8 @@ function Autocomplete(_ref) {
     placeholder,
     errorText,
     tooltipTitle,
-    required
+    required,
+    sx
   } = _ref;
   const onChangeHandler = (event, value) => {
     if (event) {
@@ -38,8 +39,9 @@ function Autocomplete(_ref) {
       }
     }
   };
-  const renderInput = params => /*#__PURE__*/_react.default.createElement("div", {
-    className: "auto-complete ".concat(className)
+  const renderInput = params => /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "auto-complete ".concat(className),
+    sx: sx
   }, label && /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: id,
     className: "textfield-label"

package/components/Button/Button.d.ts

@@ -2,6 +2,7 @@ import React, { CSSProperties } from 'react';
 import { IconName } from '../Icon/icons';
 import { Size } from '../Size';
 import './styles.scss';
+import { SxProps } from '@mui/material';
 export type ButtonPriority = 'primary' | 'secondary' | 'ghost';
 export type ButtonType = 'productive' | 'passive' | 'destructive';
 export interface Props {
@@ -17,6 +18,7 @@ export interface Props {
     id?: string;
     className?: string;
     style?: CSSProperties;
+    sx?: SxProps;
 }
 export default function Button(props: Props): JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

package/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,eAAe,CAAC;AAYvB,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,aAAa,CAAC;AAElE,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkCxD"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAc,OAAO,EAAE,MAAM,eAAe,CAAC;AAEpD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,aAAa,CAAC;AAElE,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwCxD"}

package/components/Button/Button.js

@@ -8,14 +8,7 @@ exports.default = Button;
 var _react = _interopRequireDefault(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 require("./styles.scss");
-var _styles2 = require("@mui/styles");
-const useStyles = (0, _styles2.makeStyles)(() => ({
-  svgIconFill: {
-    '& path': {
-      fill: 'currentColor'
-    }
-  }
-}));
+var _material = require("@mui/material");
 function Button(props) {
   const {
     onClick,
@@ -29,15 +22,20 @@ function Button(props) {
     processing,
     id,
     className,
-    style
+    style,
+    sx
   } = props;
-  const classes = useStyles();
-  return /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_material.ButtonBase, {
     id: id,
     onClick: onClick,
-    className: "button ".concat(type, "-").concat(priority, " button--").concat(size, " ").concat(type, "-").concat(priority, "--").concat(size, " ").concat(icon && !processing ? 'button-with-icon' : '', " ").concat(rightIcon && !processing ? 'button-with-right-icon' : '', " ").concat(classes.svgIconFill, "\n      ").concat(!label ? 'button-no-label' : '', " ").concat(className !== null && className !== void 0 ? className : ''),
+    className: "button ".concat(type, "-").concat(priority, " button--").concat(size, " ").concat(type, "-").concat(priority, "--").concat(size, " ").concat(icon && !processing ? 'button-with-icon' : '', " ").concat(rightIcon && !processing ? 'button-with-right-icon' : '', "\n      ").concat(!label ? 'button-no-label' : '', " ").concat(className !== null && className !== void 0 ? className : ''),
     disabled: disabled,
-    style: style
+    style: style,
+    sx: [{
+      '& path': {
+        fill: 'currentColor'
+      }
+    }, ...(Array.isArray(sx) ? sx : [sx])]
   }, processing && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "spinner",
     size: size,

package/components/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@mui/material';
+import { Theme, SxProps } from '@mui/material';
 import React from 'react';
 export declare const CheckboxStyle: (theme: Theme) => {
     padding: string;
@@ -31,6 +31,7 @@ export interface Props {
     onChange: (value: boolean) => void;
     disabled?: boolean;
     className?: string;
+    sx?: SxProps;
 }
 export default function Checkbox(props: Props): JSX.Element;
 //# sourceMappingURL=Checkbox.d.ts.map

package/components/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,EAAY,MAAM,eAAe,CAAC;AAC3F,OAAO,KAAyB,MAAM,OAAO,CAAC;AAE9C,eAAO,MAAM,aAAa,UAAW,KAAK;;;;;;;;;;;;;;;;;;;;;;CAsBxC,CAAC;AAEH,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmC1D"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,EAAY,OAAO,EAAE,MAAM,eAAe,CAAC;AACpG,OAAO,KAAyB,MAAM,OAAO,CAAC;AAE9C,eAAO,MAAM,aAAa,UAAW,KAAK;;;;;;;;;;;;;;;;;;;;;;CAsBxC,CAAC;AAEH,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmC1D"}

package/components/Checkbox.js

@@ -49,7 +49,7 @@ function Checkbox(props) {
       id: 'check-' + props.id,
       checked: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : false,
       size: "medium",
-      sx: CheckboxStyle(theme)
+      sx: [CheckboxStyle(theme), ...(Array.isArray(props.sx) ? props.sx : [props.sx])]
     }),
     className: props.className,
     sx: {

package/components/DatePicker/DatePicker.d.ts

@@ -1,4 +1,5 @@
 import React, { KeyboardEventHandler } from 'react';
+import { SxProps } from '@mui/material';
 import { DateTime } from 'luxon';
 import './styles.scss';
 import { DateType } from '../../utils/date';
@@ -35,6 +36,7 @@ export interface Props {
     onDateChange?: (value?: DateTime) => void;
     onError?: (reason: any, value: any) => void;
     onKeyPress?: KeyboardEventHandler;
+    sx?: SxProps;
     value?: DatePickerDateType;
 }
 export default function DatePicker(props: Props): JSX.Element;

package/components/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI9D,OAAO,EAAE,QAAQ,EAAY,MAAM,OAAO,CAAC;AAE3C,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAe,MAAM,kBAAkB,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAYD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwF5D"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAO,OAAO,EAA6B,MAAM,eAAe,CAAC;AAGxE,OAAO,EAAE,QAAQ,EAAY,MAAM,OAAO,CAAC;AAE3C,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAe,MAAM,kBAAkB,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAYD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwF5D"}

package/components/DatePicker/DatePicker.js

@@ -77,8 +77,9 @@ function DatePicker(props) {
   // TODO: Localize the yyyy-mm-dd placeholder string that is shown to users when the input is
   //       empty. It appears to be generated programmatically deep in the guts of the MUI DatePicker
   //       code, and it most likely uses the browser's locale.
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "date-picker ".concat(props.className, " ").concat(props.errorText ? 'date-picker--error' : '')
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "date-picker ".concat(props.className, " ").concat(props.errorText ? 'date-picker--error' : ''),
+    sx: props.sx
   }, /*#__PURE__*/_react.default.createElement(_xDatePickers.LocalizationProvider, {
     dateAdapter: _luxon.default,
     adapterLocale: locale

package/components/Dropdown.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TooltipProps } from '@mui/material';
+import { SxProps, TooltipProps } from '@mui/material';
 import { DropdownItem } from './types';
 import { SelectStyles } from './Select/SelectT';
 export interface Props {
@@ -22,6 +22,7 @@ export interface DropdownProps {
     placeholder?: string;
     errorText?: string;
     tooltipTitle?: TooltipProps['title'];
+    sx?: SxProps;
     helperText?: string | string[];
     warningText?: string | string[];
     readonly?: boolean;

package/components/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAKzD,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,wBAAgB,UAAU,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkBlG;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAGrC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAG5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAsClE"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACpH,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIzD,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiBlG;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,EAAE,CAAC,EAAE,OAAO,CAAC;IAGb,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAG5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAsClE"}

package/components/Dropdown.js

@@ -9,13 +9,7 @@ exports.default = Dropdown;
 var _material = require("@mui/material");
 var _SelectT = _interopRequireDefault(require("./Select/SelectT"));
 var _Autocomplete = _interopRequireDefault(require("./Autocomplete/Autocomplete"));
-var _styles = require("@mui/styles");
 var _react = _interopRequireDefault(require("react"));
-const useStyles = (0, _styles.makeStyles)(() => ({
-  formControl: {
-    width: '100%'
-  }
-}));
 function DropdownV1(_ref) {
   let {
     id,
@@ -28,12 +22,13 @@ function DropdownV1(_ref) {
   const onChangeH = event => {
     onChange(event.target.value);
   };
-  const classes = useStyles();
   return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
     variant: "outlined",
-    className: classes.formControl,
     size: "small",
-    disabled: disabled
+    disabled: disabled,
+    sx: {
+      width: '100%'
+    }
   }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
     id: "".concat(id, "-outlined-label")
   }, label), /*#__PURE__*/_react.default.createElement(_material.Select, {

package/components/ErrorBox/ErrorBox.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SxProps } from '@mui/material';
 import './styles.scss';
 export interface Props {
     text: string;
@@ -6,6 +7,7 @@ export interface Props {
     buttonText?: string;
     title?: string;
     className?: string;
+    sx?: SxProps;
 }
 export default function ErrorBox(props: Props): JSX.Element;
 //# sourceMappingURL=ErrorBox.d.ts.map

package/components/ErrorBox/ErrorBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBox.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBox/ErrorBox.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoB1D"}
+{"version":3,"file":"ErrorBox.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBox/ErrorBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAO,OAAO,EAAE,MAAM,eAAe,CAAC;AAK7C,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoB1D"}

package/components/ErrorBox/ErrorBox.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ErrorBox;
 var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _useDeviceInfo = _interopRequireDefault(require("../../utils/useDeviceInfo"));
@@ -16,13 +17,15 @@ function ErrorBox(props) {
     onClick,
     buttonText,
     title,
-    className
+    className,
+    sx
   } = props;
   const {
     isMobile
   } = (0, _useDeviceInfo.default)();
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "error-box ".concat(className, " ").concat(isMobile ? 'mobile' : '')
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "error-box ".concat(className, " ").concat(isMobile ? 'mobile' : ''),
+    sx: sx
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "error-box--container"
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileChooser/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA2BzC,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAiHxE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileChooser/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAwIxE"}

package/components/FileChooser/index.js

@@ -8,34 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = FileChooser;
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
-var _styles = require("@mui/styles");
 var _utils = require("../../utils");
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  hiddenInput: {
-    display: 'none'
-  },
-  icon: {
-    height: '120px',
-    width: '120px'
-  },
-  button: {
-    marginTop: theme.spacing(3)
-  },
-  link: {
-    color: theme.palette.TwClrTxtBrand,
-    fontFamily: 'Inter',
-    fontSize: '12px',
-    fontWeight: 500,
-    lineHeight: '16px',
-    marginTop: theme.spacing(2),
-    textDecoration: 'none',
-    '&:hover': {
-      textDecoration: 'underline'
-    }
-  }
-}));
 function FileChooser(props) {
   const {
     acceptFileType,
@@ -57,7 +32,6 @@ function FileChooser(props) {
   const {
     isMobile
   } = (0, _utils.useDeviceInfo)();
-  const classes = useStyles();
   const inputRef = (0, _react.useRef)(null);
   const theme = (0, _material.useTheme)();
   const [editing, setEditing] = (0, _react.useState)(false);
@@ -110,8 +84,11 @@ function FileChooser(props) {
     }
   }, iconName && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: iconName,
-    className: classes.icon,
-    size: "xlarge"
+    size: "xlarge",
+    style: {
+      height: '120px',
+      width: '120px'
+    }
   }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: theme.palette.TwClrTxt,
     fontSize: 14,
@@ -125,21 +102,36 @@ function FileChooser(props) {
   }, (editing || (files || []).length > 0) && !multipleSelection ? fileSelectedText : isMobile && uploadMobileDescription ? uploadMobileDescription : uploadDescription), /*#__PURE__*/_react.default.createElement("input", {
     type: "file",
     ref: inputRef,
-    className: classes.hiddenInput,
     onChange: onFileChosen,
     accept: acceptFileType,
     multiple: multipleSelection || false,
-    value: ''
+    value: '',
+    style: {
+      display: 'none'
+    }
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: onChooseFileHandler,
     disabled: maxFiles !== undefined ? (files || []).length >= maxFiles : false,
     label: !multipleSelection && ((files || []).length === 1 || editing) ? replaceFileText : chooseFileText,
     priority: "secondary",
     type: "passive",
-    className: classes.button
+    sx: {
+      marginTop: theme.spacing(3)
+    }
   }), template && /*#__PURE__*/_react.default.createElement(_material.Link, {
     href: template.url,
     target: "_blank",
-    className: classes.link
+    sx: {
+      color: theme.palette.TwClrTxtBrand,
+      fontFamily: 'Inter',
+      fontSize: '12px',
+      fontWeight: 500,
+      lineHeight: '16px',
+      marginTop: theme.spacing(2),
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'underline'
+      }
+    }
   }, template.text));
 }

package/components/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAc,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,eAAe,CAAC;AAcvB,MAAM,WAAW,KAAK;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,IAAc,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAUtG"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAc,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,IAAc,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAItG"}

package/components/Icon/Icon.js

@@ -6,16 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Icon;
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("@mui/styles");
 var _icons = _interopRequireDefault(require("./icons"));
 require("./styles.scss");
-const useStyles = (0, _styles.makeStyles)(() => ({
-  icon: {
-    '& path': {
-      fill: props => props.fillColor
-    }
-  }
-}));
 function Icon(_ref) {
   let {
     size = 'small',
@@ -24,12 +16,10 @@ function Icon(_ref) {
     fillColor,
     style
   } = _ref;
-  const classes = useStyles({
-    fillColor
-  });
   const SVGComponent = _icons.default[name];
   return /*#__PURE__*/_react.default.createElement(SVGComponent, {
-    className: "tw-icon tw-icon--".concat(size, " ").concat(className !== null && className !== void 0 ? className : '', " ").concat(fillColor ? classes.icon : ''),
+    className: "tw-icon tw-icon--".concat(size, " ").concat(className !== null && className !== void 0 ? className : ''),
+    fill: fillColor,
     style: style
   });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconTooltip/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAkB,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA2BzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAAiB,EACjB,SAAuB,EACvB,KAAK,EACL,kBAAkB,GACnB,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAiChC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconTooltip/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAW,YAAY,EAAY,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAAiB,EACjB,SAAuB,EACvB,KAAK,EACL,kBAAkB,GACnB,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAgDhC"}

package/components/IconTooltip/index.js

@@ -7,28 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = IconTooltip;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
-var _styles = require("@mui/styles");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _utils = require("../../utils");
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  arrow: {
-    color: theme.palette.TwClrBaseGray800
-  },
-  icon: {
-    fill: theme.palette.TwClrIcnSecondary,
-    marginLeft: '4px',
-    marginRight: props => props.disableRightMargin ? '0px' : '4px',
-    verticalAlign: 'text-top'
-  },
-  tooltip: {
-    backgroundColor: theme.palette.TwClrBaseGray800,
-    color: theme.palette.TwClrBaseWhite,
-    padding: '8px',
-    '& a': {
-      color: theme.palette.TwClrBaseWhite
-    }
-  }
-}));
 function IconTooltip(_ref) {
   let {
     iconName = 'info',
@@ -40,9 +20,7 @@ function IconTooltip(_ref) {
   const {
     isMobile
   } = (0, _utils.useDeviceInfo)();
-  const classes = useStyles({
-    disableRightMargin
-  });
+  const theme = (0, _material.useTheme)();
   const handleTooltipClose = () => {
     setOpen(false);
   };
@@ -51,21 +29,33 @@ function IconTooltip(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     arrow: true,
-    classes: {
-      arrow: classes.arrow,
-      tooltip: classes.tooltip
-    },
     onClose: handleTooltipClose,
     open: isMobile ? open : undefined,
     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", {
     onClick: handleTooltipOpen
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: iconName,
-    className: classes.icon
+    style: {
+      fill: theme.palette.TwClrIcnSecondary,
+      marginLeft: '4px',
+      marginRight: disableRightMargin ? '0px' : '4px',
+      verticalAlign: 'text-top'
+    }
   })));
 }

package/components/MultiSelect/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './styles.scss';
-import { TooltipProps } from '@mui/material';
+import { SxProps, TooltipProps } from '@mui/material';
 export type MultiSelectProps<K, V> = {
     className?: string;
     disabled?: boolean;
@@ -19,6 +19,7 @@ export type MultiSelectProps<K, V> = {
     pillListClassName?: string;
     placeHolder?: string;
     selectedOptions: K[];
+    sx?: SxProps;
     tooltipTitle?: TooltipProps['title'];
     valueRenderer: (value: V) => string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;CACrC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA0GpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAO,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI3D,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,EAAE,CAAC;IACrB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;CACrC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA2GpF"}

package/components/MultiSelect/index.js

@@ -9,6 +9,7 @@ exports.default = MultiSelect;
 var _react = _interopRequireWildcard(require("react"));
 require("./styles.scss");
 var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
+var _material = require("@mui/material");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _PillList = _interopRequireDefault(require("../PillList"));
 function MultiSelect(props) {
@@ -28,6 +29,7 @@ function MultiSelect(props) {
     pillListClassName,
     placeHolder,
     selectedOptions,
+    sx,
     tooltipTitle,
     valueRenderer
   } = props;
@@ -57,8 +59,9 @@ function MultiSelect(props) {
       value: value ? valueRenderer(value) : missingValuePlaceholder || ''
     };
   }).filter(data => data.value);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "multi-select ".concat(className)
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "multi-select ".concat(className),
+    sx: sx
   }, label && /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: id,
     className: "multi-select__label"

package/components/Navbar/Navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,eAAe,CAAC;AAKvB,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7D,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAmBD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiBxD"}
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,eAAe,CAAC;AAIvB,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7D,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgCxD"}

package/components/Navbar/Navbar.js

@@ -5,27 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Navbar;
-var _styles = require("@mui/styles");
+var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
 require("./styles.scss");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _utils = require("../../utils");
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  icon: {
-    fill: theme.palette.TwClrIcnSecondary,
-    marginRight: '16px',
-    marginBottom: '8px'
-  },
-  closeButton: {
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer'
-  },
-  navBarTop: {
-    display: 'flex',
-    justifyContent: 'start'
-  }
-}));
 function Navbar(props) {
   const {
     children,
@@ -35,17 +19,28 @@ function Navbar(props) {
   const {
     isDesktop
   } = (0, _utils.useDeviceInfo)();
-  const classes = useStyles();
+  const theme = (0, _material.useTheme)();
   return /*#__PURE__*/_react.default.createElement("div", {
     className: 'navbar' + (backgroundTransparent ? ' transparent' : '')
-  }, !isDesktop && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.navBarTop
-  }, /*#__PURE__*/_react.default.createElement("button", {
+  }, !isDesktop && /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'start'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.ButtonBase, {
     onClick: () => setShowNavBar(false),
-    className: classes.closeButton
+    sx: {
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer'
+    }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "close",
     size: "medium",
-    className: classes.icon
+    style: {
+      fill: theme.palette.TwClrIcnSecondary,
+      marginRight: '16px',
+      marginBottom: '8px'
+    }
   }))), children);
 }