flipper-ui 0.34.7 → 0.34.9

package/core/feedback/snackbar/index.js

@@ -17,6 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Snackbar = _interopRequireDefault(require("@mui/material/Snackbar"));
 var _SnackbarContent = _interopRequireDefault(require("@mui/material/SnackbarContent"));
 var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
+var _styles = require("./styles");
 var _theme = require("../../../theme");
 var _excluded = ["id", "action", "anchorOrigin", "autoHide", "icon", "message", "onClose", "open", "padding", "margin", "style", "variant", "className", "TransitionComponent", "TransitionProps", "onClick"];
 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; }
@@ -98,13 +99,8 @@ var SnackBar = function SnackBar(props) {
       flexWrap: 'nowrap',
       cursor: cursor
     },
-    message: /*#__PURE__*/_react["default"].createElement("span", {
-      id: "client-snackbar",
-      style: {
-        alignItems: 'center',
-        display: 'flex',
-        gap: '12px'
-      }
+    message: /*#__PURE__*/_react["default"].createElement(_styles.Message, {
+      id: "client-snackbar"
     }, icon || /*#__PURE__*/_react["default"].createElement(Icon, {
       style: {
         opacity: 0.9

package/core/feedback/snackbar/snackbar.stories.d.ts

@@ -1,8 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Snackbar from '.';
-declare const _default: Meta<typeof Snackbar>;
-export default _default;
-export declare const Default: any;
-export declare const Success: any;
-export declare const Warning: any;
-export declare const Error: any;
+declare const meta: Meta<typeof Snackbar>;
+export default meta;
+type Story = StoryObj<typeof Snackbar>;
+export declare const snackbar: Story;

package/core/feedback/snackbar/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Message: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StoriesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/feedback/snackbar/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoriesWrapper = exports.Message = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = require("styled-components");
+var _templateObject, _templateObject2;
+var Message = exports.Message = _styledComponents.styled.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    gap: 12px;\n"])));
+var StoriesWrapper = exports.StoriesWrapper = _styledComponents.styled.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    height: 150px;\n"])));

package/core/feedback/tooltip/styles.d.ts

@@ -0,0 +1 @@
+export declare const StoriesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/feedback/tooltip/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoriesWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = require("styled-components");
+var _templateObject;
+var StoriesWrapper = exports.StoriesWrapper = _styledComponents.styled.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: center;\n"])));

package/core/feedback/tooltip/tooltip.stories.d.ts

@@ -1,8 +1,6 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Tooltip from '.';
-declare const _default: Meta<typeof Tooltip>;
-export default _default;
-export declare const Default: any;
-export declare const Positioned: () => React.JSX.Element;
-export declare const Disabled: any;
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const tooltip: Story;

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

@@ -3,4 +3,4 @@ import type { Meta } from '@storybook/react';
 import { Autocomplete } from '.';
 declare const _default: Meta<typeof Autocomplete>;
 export default _default;
-export declare const AutoCompleteLab: () => React.JSX.Element;
+export declare const AutocompleteLab: () => React.JSX.Element;

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

@@ -1,19 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Button from '.';
-declare const _default: Meta<typeof Button>;
-export default _default;
-export declare const Default: any;
-export declare const Primary: any;
-export declare const Secondary: any;
-export declare const ContainedPrimary: any;
-export declare const ContainedSecondary: any;
-export declare const OutlinedPrimary: any;
-export declare const OutlinedSecondary: any;
-export declare const Selected: any;
-export declare const DashedPrimary: any;
-export declare const DashedSecondary: any;
-export declare const AddIcon: any;
-export declare const Small: any;
-export declare const Medium: any;
-export declare const Large: any;
-export declare const Disabled: any;
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const button: Story;

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

@@ -1,11 +1,6 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Checkbox from '.';
-declare const _default: Meta<typeof Checkbox>;
-export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithHelper: any;
-export declare const Primary: any;
-export declare const WithoutLabel: any;
-export declare const Switch: any;
-export declare const SwitchWithHelper: any;
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const checkbox: Story;

package/core/inputs/chip-field/chip-field.stories.d.ts

@@ -1,11 +1,6 @@
-import React from 'react';
-import type { SyntheticEvent } from 'react';
-import type { AutocompleteChangeReason } from '../autocomplete';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import ChipField from '.';
-interface IMultiple {
-    onChange?: (_event: SyntheticEvent<Element, Event>, value: string[], reason?: AutocompleteChangeReason) => void;
-}
-declare const _default: Meta<typeof ChipField>;
-export default _default;
-export declare const MultipleField: ({ onChange }: IMultiple) => React.JSX.Element;
+declare const meta: Meta<typeof ChipField>;
+export default meta;
+type Story = StoryObj<typeof ChipField>;
+export declare const chipField: Story;

package/core/inputs/date-time/index.js

@@ -10,27 +10,25 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _xDatePickers = require("@mui/x-date-pickers");
-var _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
+var _AdapterDateFnsV = require("@mui/x-date-pickers/AdapterDateFnsV3");
 var _DatePicker = require("@mui/x-date-pickers/DatePicker");
 var _DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
 var _locales = require("@mui/x-date-pickers/locales");
 var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
 var _TimePicker = require("@mui/x-date-pickers/TimePicker");
-var _format = _interopRequireDefault(require("date-fns/format"));
-var _ptBR = _interopRequireDefault(require("date-fns/locale/pt-BR"));
+var _locale = require("date-fns/locale");
 var _styles = require("./styles");
 var _theme = require("../../../theme");
 var _excluded = ["id", "padding", "margin", "style", "value", "onChange", "error", "minDate", "minDateTime", "maxDate", "maxDateTime", "required", "disabled", "placeholder", "fullWidth", "type"];
-/* eslint-disable import/no-duplicates */
 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 _theme$colors = _theme.theme.colors,
   neutral = _theme$colors.neutral,
   primary = _theme$colors.primary;
-var formatter = function formatter(weekday) {
-  return (0, _format["default"])(weekday, 'eee', {
-    locale: _ptBR["default"]
-  }).slice(0, 3);
+var formatter = function formatter(day) {
+  return day.toLocaleDateString('pt-BR', {
+    weekday: 'short'
+  }).replace('.', '');
 };
 var CustomDatePickerToolbar = function CustomDatePickerToolbar(props) {
   return /*#__PURE__*/_react["default"].createElement(_DatePicker.DatePickerToolbar, (0, _extends2["default"])({}, props, {
@@ -303,8 +301,8 @@ var DateTime = function DateTime(_ref) {
     }));
   };
   return /*#__PURE__*/_react["default"].createElement(_LocalizationProvider.LocalizationProvider, {
-    adapterLocale: _ptBR["default"],
-    dateAdapter: _AdapterDateFns.AdapterDateFns,
+    adapterLocale: _locale.ptBR,
+    dateAdapter: _AdapterDateFnsV.AdapterDateFns,
     localeText: _locales.ptBR.components.MuiLocalizationProvider.defaultProps.localeText
   }, renderChildren());
 };

package/core/inputs/icon-button/icon-button.stories.d.ts

@@ -1,8 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import IconButton from '.';
-declare const _default: Meta<typeof IconButton>;
-export default _default;
-export declare const Default: any;
-export declare const Primary: any;
-export declare const Secondary: any;
-export declare const Disabled: any;
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const iconButton: Story;

package/core/inputs/input-adornment/input-adornment.stories.d.ts

@@ -1,6 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import InputAdornment from '.';
-declare const _default: Meta<typeof InputAdornment>;
-export default _default;
-export declare const Default: any;
-export declare const WithIcon: any;
+declare const meta: Meta<typeof InputAdornment>;
+export default meta;
+type Story = StoryObj<typeof InputAdornment>;
+export declare const inputAdornment: Story;

package/core/inputs/mask-field/mask-field.stories.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import MaskField from '.';
-declare const _default: Meta<typeof MaskField>;
-export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const MaskFieldWithInputAdornment: any;
+declare const meta: Meta<typeof MaskField>;
+export default meta;
+type Story = StoryObj<typeof MaskField>;
+export declare const maskField: Story;

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

@@ -99,34 +99,36 @@ var PinInput = function PinInput(_ref) {
   }, function (_, index) {
     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,
+      className: "pin-input-field",
+      variant: variant || 'outlined',
+      value: pin[index] === 0 ? 0 : pin[index] || '',
       style: _objectSpread({
         width: size === 'small' ? '40px' : '40px',
         height: size === 'small' ? '30px' : '40px',
         marginInline: size === 'small' ? '5px' : '10px'
       }, styleProps),
-      InputProps: {
-        role: 'pin-input-field',
-        style: _objectSpread({
-          width: size === 'small' ? '40px' : '45px',
-          textAlign: 'center',
-          fontWeight: 'bold',
-          fontSize: size === 'small' ? '16px' : '20px',
-          padding: 'auto'
-        }, inputProps)
+      slotProps: {
+        input: {
+          role: 'pin-input-field',
+          style: _objectSpread({
+            fontWeight: 'bold',
+            textAlign: 'center',
+            width: size === 'small' ? '40px' : '45px',
+            fontSize: size === 'small' ? '16px' : '20px',
+            padding: 'auto'
+          }, inputProps)
+        }
       },
       inputRef: function inputRef(el) {
         inputRefs.current[index] = el;
       },
+      onPaste: onPaste,
       onKeyDown: function onKeyDown(event) {
         return _onKeyDown(event, index);
       },
-      onPaste: onPaste,
       onChange: function onChange(event) {
         _onChange(event, index);
       }

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

@@ -1,8 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } 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 Secondary: any;
-export declare const PrimaryChecked: any;
+declare const meta: Meta<typeof Radio>;
+export default meta;
+type Story = StoryObj<typeof Radio>;
+export declare const radio: Story;

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import RadioGroup from '.';
-declare const _default: Meta<typeof RadioGroup>;
-export default _default;
-export declare const Default: () => React.JSX.Element;
+declare const meta: Meta<typeof RadioGroup>;
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+export declare const radioGroup: Story;

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

@@ -1,7 +1,6 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } 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;
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const select: Story;

package/core/inputs/slider/index.js

@@ -8,7 +8,6 @@ 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("@mui/material/Slider"));
 var _theme = require("../../../theme");
@@ -27,16 +26,6 @@ var labels = {
   success: feedback.success,
   warning: 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,
@@ -46,9 +35,6 @@ var Slider = function Slider(_ref) {
     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',
@@ -57,8 +43,11 @@ var Slider = function Slider(_ref) {
       padding: padding,
       margin: margin
     }, style),
-    classes: {
-      valueLabel: classes.valueLabel
+    sx: {
+      '.MuiSlider-valueLabel': {
+        borderRadius: '5px',
+        backgroundColor: labels[color || 'primary']
+      }
     }
   }));
 };

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

@@ -1,11 +1,7 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } 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;
-export declare const Secondary: any;
-export declare const Ranged: any;
-export declare const FixedLabel: any;
-export declare const WithMarks: any;
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof Slider>;
+export declare const slider: Story;
+export declare const sliderWithMarks: Story;

package/core/inputs/text-field/index.js

@@ -15,7 +15,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _map2 = _interopRequireDefault(require("ramda/es/map"));
 var _split2 = _interopRequireDefault(require("ramda/es/split"));
 var _pipe2 = _interopRequireDefault(require("ramda/es/pipe"));
-var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -27,14 +26,6 @@ var _excluded = ["options", "size", "margin", "padding", "style", "error", "vari
 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 primary = _theme.theme.colors.primary;
-var useStyles = (0, _makeStyles2["default"])({
-  input: {
-    fontSize: '14px'
-  },
-  outlinedLabel: {
-    fontSize: '14px'
-  }
-});
 var coerceComboOptions = function coerceComboOptions(input) {
   return (0, _pipe2["default"])((0, _split2["default"])(';'), (0, _map2["default"])((0, _pipe2["default"])((0, _split2["default"])('='), function (_ref) {
     var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
@@ -80,10 +71,10 @@ var renderEndAdornment = function renderEndAdornment(disabled, onClear) {
   return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
     position: "end"
   }, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
-    role: "clear-button",
-    disabled: disabled || false,
     size: "small",
+    role: "clear-button",
     margin: "0 16px 0 0",
+    disabled: disabled || false,
     onClick: onClear
   }, /*#__PURE__*/_react["default"].createElement(_Clear2["default"], {
     fontSize: "inherit"
@@ -117,7 +108,6 @@ var TextField = function TextField(_ref3) {
     characters = _ref3.characters,
     children = _ref3.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
-  var classes = useStyles();
   var hasValue = !!otherProps.value;
   var endAdornment = hasValue && hasClear ? {
     endAdornment: renderEndAdornment(otherProps.disabled, onClear)
@@ -142,28 +132,30 @@ var TextField = function TextField(_ref3) {
   };
   return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
     title: "",
+    error: error,
+    variant: variant,
     size: size || 'small',
-    select: !!(options !== null && options !== void 0 && options.length),
     fullWidth: fullWidth,
+    select: !!(options !== null && options !== void 0 && options.length),
     autoComplete: autoComplete,
-    error: error,
-    variant: variant,
+    slotProps: {
+      input: _objectSpread({
+        endAdornment: characters && /*#__PURE__*/_react["default"].createElement(_styles.CharactersCount, null, (_otherProps$value = otherProps.value) === null || _otherProps$value === void 0 ? void 0 : _otherProps$value.toString().length, "/", (_otherProps$inputProp = otherProps.inputProps) === null || _otherProps$inputProp === void 0 ? void 0 : _otherProps$inputProp.maxLength),
+        sx: {
+          fontSize: '14px'
+        }
+      }, InputProps),
+      inputLabel: _objectSpread({
+        sx: {
+          fontSize: '14px'
+        }
+      }, InputLabelProps),
+      select: _objectSpread(_objectSpread({}, endAdornment), SelectProps)
+    },
     style: _objectSpread({
       margin: margin,
       padding: padding
     }, style),
-    InputLabelProps: _objectSpread({
-      classes: {
-        outlined: variant === 'outlined' ? classes.outlinedLabel : ''
-      }
-    }, InputLabelProps),
-    InputProps: _objectSpread({
-      classes: {
-        input: variant === 'outlined' ? classes.input : ''
-      },
-      endAdornment: characters && /*#__PURE__*/_react["default"].createElement(_styles.CharactersCount, null, (_otherProps$value = otherProps.value) === null || _otherProps$value === void 0 ? void 0 : _otherProps$value.toString().length, "/", (_otherProps$inputProp = otherProps.inputProps) === null || _otherProps$inputProp === void 0 ? void 0 : _otherProps$inputProp.maxLength)
-    }, InputProps),
-    SelectProps: _objectSpread(_objectSpread({}, endAdornment), SelectProps),
     onChange: handleInputChange
   }, otherProps), options ? renderOptions(options) : children), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
     helperIcon: helperIcon,

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

@@ -5,5 +5,4 @@ export default meta;
 type Story = StoryObj<typeof TextField>;
 export declare const textfield: Story;
 export declare const withSelectAndClear: Story;
-export declare const combobox: Story;
 export declare const withCharacterCount: Story;

package/core/navigation/menu/menu.stories.d.ts

@@ -1,5 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Menu from '.';
-declare const _default: Meta<typeof Menu>;
-export default _default;
-export declare const Default: any;
+declare const meta: Meta<typeof Menu>;
+export default meta;
+type Story = StoryObj<typeof Menu>;
+export declare const menu: Story;

package/core/navigation/sidebar/index.d.ts

@@ -7,15 +7,13 @@ export interface SidebarProps extends DefaultProps {
     showButton?: boolean;
     anchor?: 'top' | 'left' | 'bottom' | 'right';
     variant?: 'persistent' | 'temporary' | 'permanent';
-    color?: 'default' | 'inherit';
     docked?: boolean;
     maxWidth?: number | string;
     minWidth?: number | string;
     top?: number | string;
-    paperClasses?: object;
     name?: string;
     ButtonProps?: IButtonProps;
     onToggle: () => void;
 }
-declare const Sidebar: ({ id, anchor, className, color, docked, expanded, margin, maxWidth, minWidth, top, open, padding, paperClasses, showButton, style, variant, ButtonProps, onToggle, children, name, ...otherProps }: SidebarProps) => React.JSX.Element;
+declare const Sidebar: ({ id, anchor, className, docked, expanded, margin, maxWidth, minWidth, top, open, padding, showButton, style, variant, ButtonProps, onToggle, children, name, ...otherProps }: SidebarProps) => React.JSX.Element;
 export default Sidebar;

package/core/navigation/sidebar/index.js

@@ -10,34 +10,19 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _KeyboardArrowRight2 = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowRight"));
 var _KeyboardArrowLeft2 = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowLeft"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _createStyles2 = _interopRequireDefault(require("@mui/styles/createStyles"));
-var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
 var _styles = require("./styles");
 var _theme = require("../../../theme");
-var _excluded = ["id", "anchor", "className", "color", "docked", "expanded", "margin", "maxWidth", "minWidth", "top", "open", "padding", "paperClasses", "showButton", "style", "variant", "ButtonProps", "onToggle", "children", "name"];
+var _excluded = ["id", "anchor", "className", "docked", "expanded", "margin", "maxWidth", "minWidth", "top", "open", "padding", "showButton", "style", "variant", "ButtonProps", "onToggle", "children", "name"];
 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 neutral = _theme.theme.colors.neutral;
-var useStyles = (0, _makeStyles2["default"])(function () {
-  return (0, _createStyles2["default"])({
-    "default": {
-      backgroundColor: neutral[100]
-    },
-    inherit: {
-      backgroundColor: 'inherit',
-      color: 'inherit'
-    }
-  });
-});
 var Sidebar = function Sidebar(_ref) {
   var id = _ref.id,
     _ref$anchor = _ref.anchor,
     anchor = _ref$anchor === void 0 ? 'left' : _ref$anchor,
     className = _ref.className,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$docked = _ref.docked,
     docked = _ref$docked === void 0 ? false : _ref$docked,
     _ref$expanded = _ref.expanded,
@@ -51,7 +36,6 @@ var Sidebar = function Sidebar(_ref) {
     top = _ref$top === void 0 ? 64 : _ref$top,
     open = _ref.open,
     padding = _ref.padding,
-    paperClasses = _ref.paperClasses,
     _ref$showButton = _ref.showButton,
     showButton = _ref$showButton === void 0 ? true : _ref$showButton,
     style = _ref.style,
@@ -62,7 +46,6 @@ var Sidebar = function Sidebar(_ref) {
     children = _ref.children,
     name = _ref.name,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useStyles();
   var renderAction = function renderAction() {
     var iconToLeft = anchor === 'left' && expanded || anchor === 'right' && !expanded;
     return /*#__PURE__*/_react["default"].createElement(_styles.Action, {
@@ -94,7 +77,6 @@ var Sidebar = function Sidebar(_ref) {
       top: top
     }, style),
     PaperProps: {
-      className: "".concat(classes[color]),
       style: docked ? {
         position: 'fixed',
         left: '0px',
@@ -103,7 +85,9 @@ var Sidebar = function Sidebar(_ref) {
         width: 'inherit',
         height: 'inherit'
       } : {},
-      classes: paperClasses
+      sx: {
+        backgroundColor: neutral[100]
+      }
     }
   }), showButton && renderAction(), children);
 };

package/core/navigation/stepper/index.js

@@ -19,9 +19,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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 isActive = function isActive(index, active) {
-  return active !== undefined ? active >= index : undefined;
-};
 var StepIcon = function StepIcon(_ref) {
   var icon = _ref.icon,
     active = _ref.active;
@@ -33,6 +30,9 @@ var StepIcon = function StepIcon(_ref) {
     color: active ? 'primary' : 'disabled'
   });
 };
+var isActive = function isActive(index, active) {
+  return active !== undefined ? active >= index : undefined;
+};
 var Stepper = function Stepper(_ref2) {
   var active = _ref2.active,
     bottomLabel = _ref2.bottomLabel,