flipper-ui 0.33.0 → 0.34.0

package/core/inputs/pin-input/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _TextField2 = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _styles = require("./styles");
 var _excluded = ["pinLength", "pin", "setPin", "onPinChanged", "validationResult", "isValidating", "size", "style", "inputProps", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -94,43 +94,35 @@ var PinInput = function PinInput(_ref) {
       onPinChanged(undefined, index);
     }
   };
-  var getStyleProps = function getStyleProps() {
-    var style = _objectSpread({
-      width: size === 'small' ? '40px' : '40px',
-      height: size === 'small' ? '30px' : '40px',
-      marginInline: size === 'small' ? '5px' : '10px'
-    }, styleProps);
-    return style;
-  };
-  var getInputProps = function getInputProps() {
-    var style = _objectSpread({
-      width: size === 'small' ? '40px' : '45px',
-      textAlign: 'center',
-      fontWeight: 'bold',
-      fontSize: size === 'small' ? '16px' : '20px',
-      padding: 'auto'
-    }, inputProps);
-    return style;
-  };
   return /*#__PURE__*/_react["default"].createElement(_styles.Container, otherProps, Array.from({
     length: pinLength
   }, function (_, index) {
-    return /*#__PURE__*/_react["default"].createElement(_TextField2["default"], {
-      disabled: isValidating,
-      variant: variant || 'outlined',
-      color: "primary",
+    return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      key: index,
       className: "pin-input-field",
+      color: "primary",
+      variant: variant || 'outlined',
+      value: pin[index] === 0 ? 0 : pin[index] || '',
+      disabled: isValidating,
       error: validationResult,
-      style: getStyleProps(),
+      style: _objectSpread({
+        width: size === 'small' ? '40px' : '40px',
+        height: size === 'small' ? '30px' : '40px',
+        marginInline: size === 'small' ? '5px' : '10px'
+      }, styleProps),
       InputProps: {
-        style: getInputProps(),
-        role: 'pin-input-field'
+        role: 'pin-input-field',
+        style: _objectSpread({
+          width: size === 'small' ? '40px' : '45px',
+          textAlign: 'center',
+          fontWeight: 'bold',
+          fontSize: size === 'small' ? '16px' : '20px',
+          padding: 'auto'
+        }, inputProps)
       },
       inputRef: function inputRef(el) {
         inputRefs.current[index] = el;
       },
-      key: index,
-      value: pin[index] === 0 ? 0 : pin[index] || '',
       onKeyDown: function onKeyDown(event) {
         return _onKeyDown(event, index);
       },

package/core/inputs/pin-input/styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ValidateContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/inputs/radio/index.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { ChangeEvent } from 'react';
 import type { DefaultProps } from '../../types';
-import type { RadioProps as MuiRadioProps } from '@material-ui/core';
-export interface RadioProps extends DefaultProps, MuiRadioProps {
-    checked?: boolean;
-    color?: 'primary' | 'secondary' | 'default';
+import type { RadioProps } from '@mui/material/Radio';
+export interface IRadioProps extends DefaultProps, RadioProps {
     value?: string;
+    checked?: boolean;
     disabled?: boolean;
+    color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
     onChange?: (event: ChangeEvent<HTMLElement>) => void;
 }
-declare const Radio: ({ padding, margin, style, ...otherProps }: RadioProps) => React.JSX.Element;
+declare const Radio: ({ color, padding, margin, style, ...otherProps }: IRadioProps) => React.JSX.Element;
 export default Radio;

package/core/inputs/radio/index.js

@@ -5,20 +5,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Radio2 = _interopRequireDefault(require("@material-ui/core/Radio"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["padding", "margin", "style"];
+var _Radio = _interopRequireDefault(require("@mui/material/Radio"));
+var _excluded = ["color", "padding", "margin", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Radio = function Radio(_ref) {
-  var padding = _ref.padding,
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'secondary' : _ref$color,
+    padding = _ref.padding,
     margin = _ref.margin,
     style = _ref.style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Radio2["default"], (0, _extends2["default"])({}, otherProps, {
+  return /*#__PURE__*/_react["default"].createElement(_Radio["default"], (0, _extends2["default"])({}, otherProps, {
+    color: color,
     style: _objectSpread({
       padding: padding,
       margin: margin

package/core/inputs/radio/radio.stories.d.ts

@@ -1,6 +1,8 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").RadioProps>;
+import type { Meta } from '@storybook/react';
+import Radio from '.';
+declare const _default: Meta<typeof Radio>;
 export default _default;
 export declare const Default: any;
 export declare const Checked: any;
-export declare const Primary: any;
+export declare const Secondary: any;
 export declare const PrimaryChecked: any;

package/core/inputs/radio-group/index.d.ts

@@ -1,5 +1,5 @@
-import type { ChangeEvent, ReactNode } from 'react';
 import React from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
 export interface RadioGroupProps extends DefaultProps {
     row?: boolean;
@@ -8,6 +8,7 @@ export interface RadioGroupProps extends DefaultProps {
     value?: string;
     disabled?: boolean;
     spacing?: 'default' | 'equal';
+    color?: 'primary' | 'secondary';
     options?: IOption[];
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
@@ -16,5 +17,5 @@ export interface IOption {
     label?: ReactNode;
     disabled?: boolean;
 }
-declare const RadioGroup: ({ row, options, className, padding, margin, style, title, value, spacing, name, onChange, ...otherProps }: RadioGroupProps) => React.JSX.Element;
+declare const RadioGroup: ({ row, options, className, padding, margin, color, style, title, value, spacing, name, onChange, ...otherProps }: RadioGroupProps) => React.JSX.Element;
 export default RadioGroup;

package/core/inputs/radio-group/index.js

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _FormControl2 = _interopRequireDefault(require("@material-ui/core/FormControl"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _RadioGroup2 = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
-var _FormControlLabel2 = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-var _Radio2 = _interopRequireDefault(require("@material-ui/core/Radio"));
-var _FormLabel2 = _interopRequireDefault(require("@material-ui/core/FormLabel"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["row", "options", "className", "padding", "margin", "style", "title", "value", "spacing", "name", "onChange"];
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _FormLabel = _interopRequireDefault(require("@mui/material/FormLabel"));
+var _Radio = _interopRequireDefault(require("@mui/material/Radio"));
+var _RadioGroup = _interopRequireDefault(require("@mui/material/RadioGroup"));
+var _excluded = ["row", "options", "className", "padding", "margin", "color", "style", "title", "value", "spacing", "name", "onChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RadioGroup = function RadioGroup(_ref) {
@@ -24,6 +24,8 @@ var RadioGroup = function RadioGroup(_ref) {
     className = _ref.className,
     padding = _ref.padding,
     margin = _ref.margin,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'secondary' : _ref$color,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     title = _ref.title,
@@ -32,26 +34,28 @@ var RadioGroup = function RadioGroup(_ref) {
     name = _ref.name,
     onChange = _ref.onChange,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_FormControl2["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], (0, _extends2["default"])({
     fullWidth: true,
     className: className,
     style: _objectSpread({
       padding: padding,
       margin: margin
     }, style)
-  }, otherProps), /*#__PURE__*/_react["default"].createElement(_FormLabel2["default"], {
+  }, otherProps), /*#__PURE__*/_react["default"].createElement(_FormLabel["default"], {
     component: "legend"
-  }, title), /*#__PURE__*/_react["default"].createElement(_RadioGroup2["default"], {
+  }, title), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
     row: row,
     name: name,
     value: value,
     onChange: onChange
   }, options.map(function (option) {
-    return /*#__PURE__*/_react["default"].createElement(_FormControlLabel2["default"], {
+    return /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
       key: option.value,
       label: option.label,
       value: option.value,
-      control: /*#__PURE__*/_react["default"].createElement(_Radio2["default"], null),
+      control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+        color: color
+      }),
       disabled: option.disabled,
       style: spacing === 'equal' ? {
         flex: 1

package/core/inputs/radio-group/radio-group.stories.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").RadioGroupProps>;
+import type { Meta } from '@storybook/react';
+import RadioGroup from '.';
+declare const _default: Meta<typeof RadioGroup>;
 export default _default;
 export declare const Default: () => React.JSX.Element;

package/core/inputs/select/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { ChangeEvent, ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
-import type { SelectProps as MuiSelectProps } from '@material-ui/core';
-export interface SelectProps extends DefaultProps, Omit<MuiSelectProps, 'margin' | 'value' | 'event' | 'onChange'> {
+import type { SelectChangeEvent, SelectProps } from '@mui/material/Select';
+export interface ISelectProps extends DefaultProps, Omit<SelectProps, 'margin' | 'value' | 'event' | 'onChange'> {
     autoWidth?: boolean;
     value?: string | number;
     multiple?: boolean;
@@ -11,7 +11,7 @@ export interface SelectProps extends DefaultProps, Omit<MuiSelectProps, 'margin'
     children: ReactNode;
     onClear?: () => void;
     onClose?: () => void;
-    onChange: (event: ChangeEvent<HTMLSelectElement | HTMLInputElement>) => void;
+    onChange: (event: ChangeEvent<HTMLSelectElement | HTMLInputElement> | SelectChangeEvent<unknown>, child?: ReactNode) => void;
 }
-declare const Select: ({ children, style, margin, padding, hasClear, onClear, onChange, variant, ...otherProps }: SelectProps) => React.JSX.Element;
+declare const Select: ({ children, style, margin, padding, hasClear, onClear, onChange, variant, ...otherProps }: ISelectProps) => React.JSX.Element;
 export default Select;

package/core/inputs/select/index.js

@@ -5,25 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Select2 = _interopRequireDefault(require("@material-ui/core/Select"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _InputAdornment2 = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
-var _IconButton2 = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _Clear2 = _interopRequireDefault(require("@mui/icons-material/Clear"));
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("@material-ui/core/styles");
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
 var _excluded = ["children", "style", "margin", "padding", "hasClear", "onClear", "onChange", "variant"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var iconStyle = {
-  right: '2px'
-};
 var renderEndAdornment = function renderEndAdornment(onClear) {
-  return /*#__PURE__*/_react["default"].createElement(_InputAdornment2["default"], {
-    position: "end"
-  }, /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
+    position: "end",
+    style: {
+      paddingRight: '12px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
     role: "end-adornment-component",
     size: "small",
     onClick: onClear
@@ -45,39 +44,24 @@ var Select = function Select(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var useStyles = (0, _styles.makeStyles)(function () {
-    return {
-      root: {
-        padding: "10px 24px 10px ".concat(hasClear ? '20' : '12', "px")
-      },
-      iconOutlined: hasClear ? _objectSpread(_objectSpread({}, iconStyle), {}, {
-        position: 'relative',
-        marginLeft: '-20px'
-      }) : iconStyle
-    };
-  });
-  var classes = useStyles();
-  var handleChange = function handleChange(event) {
-    onChange(event);
+  var handleChange = function handleChange(event, child) {
+    onChange(event, child);
   };
   var hasValue = !!otherProps.value;
   var endAdornment = hasValue && hasClear ? {
     endAdornment: renderEndAdornment(onClear)
   } : {};
-  return /*#__PURE__*/_react["default"].createElement(_Select2["default"], (0, _extends2["default"])({}, endAdornment, {
+  return /*#__PURE__*/_react["default"].createElement(_Select["default"], (0, _extends2["default"])({
+    size: "small",
+    variant: variant,
     inputProps: {
       'data-testid': 'select-input'
     },
-    variant: variant,
-    classes: {
-      root: classes.root,
-      icon: classes.iconOutlined
-    },
     style: _objectSpread({
       margin: margin,
       padding: padding
     }, style),
     onChange: handleChange
-  }, otherProps), children);
+  }, endAdornment, otherProps), children);
 };
 var _default = exports["default"] = Select;

package/core/inputs/select/select.spec.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/core/inputs/select/select.stories.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").SelectProps>;
+import type { Meta } from '@storybook/react';
+import Select from '.';
+declare const _default: Meta<typeof Select>;
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const WithClear: () => React.JSX.Element;

package/core/inputs/slider/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-import type { SliderProps } from '@material-ui/core/Slider';
-export interface ISliderProps {
+import type { SliderProps } from '@mui/material/Slider';
+export interface ISliderProps extends Omit<SliderProps, 'defaultValue'>, DefaultProps {
     defaultValue?: number | number[];
+    color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
 }
-export type FlipperSliderProps = Omit<SliderProps, 'defaultValue'> & DefaultProps & ISliderProps;
-declare const Slider: ({ padding, margin, style, defaultValue, ...otherProps }: FlipperSliderProps) => React.JSX.Element;
+declare const Slider: ({ padding, margin, size, color, style, defaultValue, ...otherProps }: ISliderProps) => React.JSX.Element;
 export default Slider;

package/core/inputs/slider/index.js

@@ -8,24 +8,54 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
-var _Slider = _interopRequireDefault(require("@material-ui/core/Slider"));
-var _excluded = ["padding", "margin", "style", "defaultValue"];
+var _Slider = _interopRequireDefault(require("@mui/material/Slider"));
+var _theme = require("../../../theme");
+var _excluded = ["padding", "margin", "size", "color", "style", "defaultValue"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var labels = {
+  primary: _theme.theme.colors.primary.main,
+  secondary: _theme.theme.colors.secondary.main,
+  error: _theme.theme.colors.feedback.danger,
+  info: _theme.theme.colors.feedback.info,
+  success: _theme.theme.colors.feedback.success,
+  warning: _theme.theme.colors.feedback.warning
+};
+var useStyles = (0, _makeStyles2["default"])(function () {
+  return {
+    valueLabel: function valueLabel(props) {
+      return {
+        backgroundColor: labels[props.color || 'primary'],
+        borderRadius: '5px'
+      };
+    }
+  };
+});
 var Slider = function Slider(_ref) {
   var padding = _ref.padding,
     margin = _ref.margin,
+    size = _ref.size,
+    color = _ref.color,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     defaultValue = _ref.defaultValue,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var classes = useStyles({
+    color: color
+  });
   return /*#__PURE__*/_react["default"].createElement(_Slider["default"], (0, _extends2["default"])({}, otherProps, {
+    color: color,
+    size: size || 'small',
     defaultValue: defaultValue,
     style: _objectSpread({
       padding: padding,
       margin: margin
-    }, style)
+    }, style),
+    classes: {
+      valueLabel: classes.valueLabel
+    }
   }));
 };
 var _default = exports["default"] = Slider;

package/core/inputs/slider/slider.spec.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/core/inputs/slider/slider.stories.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, Omit<import("@material-ui/core").SliderProps, "defaultValue"> & import("../../types").DefaultProps & import(".").ISliderProps>;
+import type { Meta } from '@storybook/react';
+import Slider from '.';
+declare const _default: Meta<typeof Slider>;
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const Primary: any;

package/core/inputs/text-field/index.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
-import type { ChangeEvent, ClipboardEvent, KeyboardEvent, FocusEvent, ReactNode, MouseEvent, Ref, HTMLAttributes } from 'react';
+import type { ChangeEvent, ClipboardEvent, KeyboardEvent, FocusEvent, ReactNode, MouseEvent, Ref } from 'react';
 import type { DefaultProps } from '../../types';
-import type { InputBaseComponentProps, TextFieldProps as MuiTextFieldProps } from '@material-ui/core';
+import type { InputBaseComponentProps } from '@mui/material/InputBase';
+import type { TextFieldProps } from '@mui/material/TextField';
 export interface IOption {
     label: string;
     name?: string;
     disabled?: boolean;
     value: string | number;
 }
-export interface TextFieldProps extends DefaultProps, Omit<MuiTextFieldProps, 'margin' | 'variant'> {
+export interface ITextFieldProps extends DefaultProps, Omit<TextFieldProps, 'margin'> {
     autoComplete?: string;
     options?: IOption[] | string;
     autoFocus?: boolean;
@@ -25,7 +26,7 @@ export interface TextFieldProps extends DefaultProps, Omit<MuiTextFieldProps, 'm
     select?: boolean;
     type?: string;
     value?: string | number;
-    variant?: 'standard' | 'outlined' | 'filled';
+    variant?: 'filled' | 'outlined' | 'standard';
     inputRef?: Ref<HTMLInputElement>;
     inputProps?: InputBaseComponentProps;
     InputProps?: object;
@@ -46,21 +47,11 @@ export interface TextFieldProps extends DefaultProps, Omit<MuiTextFieldProps, 'm
     onKeyUp?: (event: KeyboardEvent) => void;
     onKeyDown?: (event: KeyboardEvent) => void;
 }
-interface IHelperProps extends Pick<TextFieldProps, 'helperIcon'> {
+interface IHelperProps {
+    helperIcon?: ReactNode;
     onHelperClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-interface IEditProps extends Pick<TextFieldProps, 'showEdit' | 'style'> {
-    editing: boolean;
-    onEditClick: (event: MouseEvent<HTMLButtonElement>) => void;
-    onSaveClick: (event: MouseEvent<HTMLButtonElement>) => void;
-    editButtonProps?: Partial<Omit<HTMLAttributes<HTMLButtonElement>, 'color'>>;
-    saveButtonProps?: Partial<Omit<HTMLAttributes<HTMLButtonElement>, 'color'>>;
-}
-export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"input" | "iconOutlined" | "listOptions" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline">;
-export declare const coerceComboOptions: (input: string) => IOption[];
-export declare const toLispCase: (name: string) => string;
 export declare const HelperBox: (props: IHelperProps) => React.JSX.Element;
-export declare const renderOptions: (options: TextFieldProps['options'], classes: Record<string, string>) => "" | React.JSX.Element[] | undefined;
-export declare const EditBox: (props: IEditProps) => React.JSX.Element;
-declare const TextField: ({ options, margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, onChange, characters, children, ...otherProps }: TextFieldProps) => React.JSX.Element;
+export declare const renderOptions: (options: ITextFieldProps["options"]) => React.JSX.Element[] | undefined;
+declare const TextField: ({ options, size, margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, onChange, characters, children, ...otherProps }: ITextFieldProps) => React.JSX.Element;
 export default TextField;