flipper-ui 0.33.1 → 0.34.0

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

@@ -4,17 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useStyles = exports.toLispCase = exports.renderOptions = exports["default"] = exports.coerceComboOptions = exports.HelperBox = exports.EditBox = void 0;
-var _TextField2 = _interopRequireDefault(require("@material-ui/core/TextField"));
+exports.renderOptions = exports["default"] = exports.HelperBox = 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 _InputAdornment2 = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
-var _IconButton2 = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _Clear2 = _interopRequireDefault(require("@mui/icons-material/Clear"));
-var _Edit2 = _interopRequireDefault(require("@mui/icons-material/Edit"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _Save2 = _interopRequireDefault(require("@mui/icons-material/Save"));
-var _ListItem2 = _interopRequireDefault(require("@material-ui/core/ListItem"));
 var _Help2 = _interopRequireDefault(require("@mui/icons-material/Help"));
 var _propEq2 = _interopRequireDefault(require("ramda/es/propEq"));
 var _reject2 = _interopRequireDefault(require("ramda/es/reject"));
@@ -24,53 +18,34 @@ var _split2 = _interopRequireDefault(require("ramda/es/split"));
 var _pipe2 = _interopRequireDefault(require("ramda/es/pipe"));
 var _is2 = _interopRequireDefault(require("ramda/es/is"));
 var _when2 = _interopRequireDefault(require("ramda/es/when"));
+var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("@material-ui/core/styles");
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _iconButton = _interopRequireDefault(require("../icon-button"));
-var _styles2 = require("./styles");
+var _styles = require("./styles");
 var _theme = require("../../../theme");
-var _excluded = ["options", "margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear", "onChange", "characters", "children"];
+var _excluded = ["options", "size", "margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear", "onChange", "characters", "children"];
 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 = exports.useStyles = (0, _styles.makeStyles)({
-  listOptions: {
-    outline: 'none',
-    cursor: 'pointer',
-    fontFamily: '"Roboto", "Helvetica", "Arial", sans- serif',
-    '&:hover': {
-      backgroundColor: 'rgba(0, 0, 0, 0.04)'
-    }
-  },
+var useStyles = (0, _makeStyles2["default"])({
   input: {
-    fontSize: '14px',
-    padding: '10px',
-    height: 'auto'
-  },
-  outlinedInput: {
-    fontSize: '14px',
-    padding: '10px',
-    height: 'auto'
+    fontSize: '14px'
   },
   outlinedLabel: {
-    fontSize: '14px',
-    transform: 'translate(14px, 13px) scale(1)'
-  },
-  outlinedMultiline: {
-    padding: '0px'
-  },
-  iconOutlined: {
-    right: '2px'
+    fontSize: '14px'
   }
 });
-var coerceComboOptions = exports.coerceComboOptions = (0, _when2["default"])((0, _is2["default"])(String), (0, _pipe2["default"])((0, _split2["default"])(';'), (0, _map2["default"])((0, _pipe2["default"])((0, _split2["default"])('='), (0, _zipObj2["default"])(['value', 'label']))), (0, _reject2["default"])((0, _propEq2["default"])('value', ''))));
-var toLispCase = exports.toLispCase = function toLispCase(name) {
+var coerceComboOptions = (0, _when2["default"])((0, _is2["default"])(String), (0, _pipe2["default"])((0, _split2["default"])(';'), (0, _map2["default"])((0, _pipe2["default"])((0, _split2["default"])('='), (0, _zipObj2["default"])(['value', 'label']))), (0, _reject2["default"])((0, _propEq2["default"])('value', ''))));
+var toLispCase = function toLispCase(name) {
   return name.replace(/([a-z])([A-Z])/g, function (_, first, second) {
     return first + '-' + second;
   }).toLowerCase();
 };
 var HelperBox = exports.HelperBox = function HelperBox(props) {
-  return /*#__PURE__*/_react["default"].createElement(_styles2.Helper, {
+  return /*#__PURE__*/_react["default"].createElement(_styles.Helper, {
     role: "helper-box"
   }, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
     padding: "6px 2px",
@@ -81,51 +56,34 @@ var HelperBox = exports.HelperBox = function HelperBox(props) {
 };
 
 /* Jest-ignore-start ignore next */
-var renderOptions = exports.renderOptions = function renderOptions(options, classes) {
+var renderOptions = exports.renderOptions = function renderOptions(options) {
   var comboOptions = typeof options === 'string' ? coerceComboOptions(options) : options;
-  return options && (comboOptions === null || comboOptions === void 0 ? void 0 : comboOptions.map(function (option) {
-    return /*#__PURE__*/_react["default"].createElement(_ListItem2["default"], {
+  return comboOptions === null || comboOptions === void 0 ? void 0 : comboOptions.map(function (option) {
+    return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
       id: toLispCase("option-".concat(option.value)),
       key: option.value,
-      disabled: option.disabled,
       value: option.value,
-      classes: {
-        root: classes.listOptions
-      }
+      disabled: option.disabled
     }, option.label);
-  }));
-};
-var EditBox = exports.EditBox = function EditBox(props) {
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    role: "edit-box"
-  }, props.editing ? /*#__PURE__*/_react["default"].createElement(_iconButton["default"], (0, _extends2["default"])({}, props.saveButtonProps, {
-    padding: "6px 2px",
-    onClick: props.onSaveClick
-  }), /*#__PURE__*/_react["default"].createElement(_Save2["default"], {
-    fontSize: "small"
-  })) : /*#__PURE__*/_react["default"].createElement(_iconButton["default"], (0, _extends2["default"])({}, props.editButtonProps, {
-    padding: "6px 2px",
-    onClick: props.onEditClick
-  }), /*#__PURE__*/_react["default"].createElement(_Edit2["default"], {
-    fontSize: "small"
-  })));
+  });
 };
-var renderEndAdornment = function renderEndAdornment(onClear) {
-  return /*#__PURE__*/_react["default"].createElement(_InputAdornment2["default"], {
+var renderEndAdornment = function renderEndAdornment(disabled, onClear) {
+  return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
     position: "end"
-  }, /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
     role: "clear-button",
+    disabled: disabled || false,
     size: "small",
+    margin: "0 16px 0 0",
     onClick: onClear
   }, /*#__PURE__*/_react["default"].createElement(_Clear2["default"], {
-    style: {
-      fontSize: '15px'
-    }
+    fontSize: "inherit"
   })));
 };
 var TextField = function TextField(_ref) {
   var _otherProps$value, _otherProps$inputProp;
   var options = _ref.options,
+    size = _ref.size,
     margin = _ref.margin,
     padding = _ref.padding,
     _ref$style = _ref.style,
@@ -150,25 +108,17 @@ var TextField = function TextField(_ref) {
     characters = _ref.characters,
     children = _ref.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var clearStyle = (0, _styles.makeStyles)({
-    iconOutlined: {
-      position: 'relative',
-      right: '2px',
-      marginLeft: '-20px'
-    }
-  });
   var classes = useStyles();
-  var clearClass = clearStyle();
   var hasValue = !!otherProps.value;
   var endAdornment = hasValue && hasClear ? {
-    endAdornment: renderEndAdornment(onClear)
+    endAdornment: renderEndAdornment(otherProps.disabled, onClear)
   } : {};
   var handleClick = function handleClick() {
     if (onHelperClick) {
       onHelperClick();
     }
   };
-  var Wrapper = hasClear ? _styles2.StaticTextFieldWrapper : _styles2.TextFieldWrapper;
+  var Wrapper = hasClear ? _styles.StaticTextFieldWrapper : _styles.TextFieldWrapper;
   var emojiRegex = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g;
   var handleInputChange = function handleInputChange(event) {
     if (onChange) {
@@ -181,8 +131,9 @@ var TextField = function TextField(_ref) {
       return onChange(event);
     }
   };
-  return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField2["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
     title: "",
+    size: size || 'small',
     select: !!(options !== null && options !== void 0 && options.length),
     fullWidth: fullWidth,
     autoComplete: autoComplete,
@@ -198,22 +149,14 @@ var TextField = function TextField(_ref) {
       }
     }, InputLabelProps),
     InputProps: _objectSpread({
-      // @ts-expect-error It needs the data-testid for the tests
-      'data-testid': 'text-field',
       classes: {
-        input: variant === 'outlined' ? classes.outlinedInput : '',
-        multiline: variant === 'outlined' ? classes.outlinedMultiline : ''
+        input: variant === 'outlined' ? classes.input : ''
       },
-      endAdornment: characters && /*#__PURE__*/_react["default"].createElement(_styles2.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)
+      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({
-      classes: {
-        iconOutlined: hasClear ? clearClass.iconOutlined : classes.iconOutlined
-      }
-    }, endAdornment), SelectProps),
-    characters: characters === null || characters === void 0 ? void 0 : characters.toString(),
+    SelectProps: _objectSpread(_objectSpread({}, endAdornment), SelectProps),
     onChange: handleInputChange
-  }, otherProps), options ? renderOptions(options, classes) : children), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
+  }, otherProps), options ? renderOptions(options) : children), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
     helperIcon: helperIcon,
     onHelperClick: handleClick
   }));

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

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

package/core/navigation/breadcrumbs/index.js

@@ -10,13 +10,13 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _map2 = _interopRequireDefault(require("ramda/es/map"));
 var _addIndex2 = _interopRequireDefault(require("ramda/es/addIndex"));
 var _react = _interopRequireDefault(require("react"));
-var _Breadcrumbs = _interopRequireDefault(require("@material-ui/core/Breadcrumbs"));
+var _Breadcrumbs = _interopRequireDefault(require("@mui/material/Breadcrumbs"));
 var _styles = require("./styles");
 var imap = (0, _addIndex2["default"])(_map2["default"]);
 var defaultLinkWrapper = function defaultLinkWrapper(link, label) {
   return /*#__PURE__*/_react["default"].createElement(_styles.BreadcrumbLink, {
     key: link,
-    to: link
+    href: link
   }, label);
 };
 var Breadcrumbs = function Breadcrumbs(_ref) {

package/core/navigation/breadcrumbs/styles.d.ts

@@ -1,30 +1,6 @@
-/// <reference types="react" />
-export declare const BreadcrumbLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react-router-dom").LinkProps & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("react-router-dom").LinkProps & import("react").RefAttributes<HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const BreadcrumbStoryLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
-export declare const TextTypography: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
-    align?: import("@material-ui/core").PropTypes.Alignment | undefined;
-    children?: import("react").ReactNode;
-    color?: "inherit" | "primary" | "secondary" | "initial" | "error" | "textPrimary" | "textSecondary" | undefined;
-    display?: "initial" | "block" | "inline" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    variant?: "inherit" | (import("@material-ui/core").TypographyVariant | "srOnly") | undefined;
-    variantMapping?: Partial<Record<import("@material-ui/core").TypographyVariant | "srOnly", string>> | undefined;
-} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core").TypographyTypeMap<{}, "span">> & Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "color" | "role" | "onClick" | "children" | "id" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key"> & import("../../types").DefaultProps, never>> & string & Omit<({ children, margin, padding, style, variant, ...otherProps }: {
-    align?: import("@material-ui/core").PropTypes.Alignment | undefined;
-    children?: import("react").ReactNode;
-    color?: "inherit" | "primary" | "secondary" | "initial" | "error" | "textPrimary" | "textSecondary" | undefined;
-    display?: "initial" | "block" | "inline" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    variant?: "inherit" | (import("@material-ui/core").TypographyVariant | "srOnly") | undefined;
-    variantMapping?: Partial<Record<import("@material-ui/core").TypographyVariant | "srOnly", string>> | undefined;
-} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core").TypographyTypeMap<{}, "span">> & Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "color" | "role" | "onClick" | "children" | "id" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key"> & import("../../types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const BreadcrumbLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+export declare const TextTypography: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "color" | "children" | "padding" | "margin" | "style" | "className" | "classes" | "sx" | "p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & {
+    component?: import("react").ElementType;
+} & import("../../types").DefaultProps, never>> & string & Omit<({ children, margin, padding, style, variant, ...otherProps }: import("@mui/material").TypographyProps & import("../../types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/core/navigation/breadcrumbs/styles.js

@@ -4,14 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TextTypography = exports.BreadcrumbStoryLink = exports.BreadcrumbLink = void 0;
+exports.TextTypography = exports.BreadcrumbLink = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _reactRouterDom = require("react-router-dom");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _theme = require("../../../theme");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 var primary = _theme.theme.colors.primary;
-var BreadcrumbLink = exports.BreadcrumbLink = (0, _styledComponents["default"])(_reactRouterDom.Link)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    text-decoration: none;\n    color: ", ";\n\n    &:hover {\n        text-decoration: underline;\n    }\n"])), primary.main);
-var BreadcrumbStoryLink = exports.BreadcrumbStoryLink = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    text-decoration: none;\n    color: ", ";\n\n    &:hover {\n        text-decoration: underline;\n    }\n"])), primary.main);
-var TextTypography = exports.TextTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        display: flex;\n    }\n"])));
+var BreadcrumbLink = exports.BreadcrumbLink = _styledComponents["default"].a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    text-decoration: none;\n    color: ", ";\n\n    &:hover {\n        text-decoration: underline;\n    }\n"])), primary.main);
+var TextTypography = exports.TextTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        display: flex;\n    }\n"])));

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-import type { DrawerProps as MuiDrawerProps } from '@material-ui/core/Drawer';
-export interface DrawerProps extends MuiDrawerProps, DefaultProps {
+import type { DrawerProps } from '@mui/material/Drawer';
+export interface IDrawerProps extends DrawerProps, DefaultProps {
     top?: number;
     width?: number;
 }
-declare const Drawer: (props: DrawerProps) => React.JSX.Element;
+declare const Drawer: (props: IDrawerProps) => React.JSX.Element;
 export default Drawer;

package/core/navigation/drawer/index.js

@@ -9,26 +9,10 @@ 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 _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
-var _styles = require("@material-ui/core/styles");
+var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
 var _excluded = ["style", "margin", "padding", "top", "width"];
 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 getStyles = function getStyles(top, width) {
-  return (0, _styles.makeStyles)(function () {
-    return (0, _styles.createStyles)({
-      drawer: {
-        top: top,
-        width: width
-      },
-      drawerPaper: {
-        top: 'inherit',
-        width: 'inherit',
-        height: "calc(100% - ".concat(top, "px)")
-      }
-    });
-  });
-};
 var Drawer = function Drawer(props) {
   var style = props.style,
     margin = props.margin,
@@ -37,16 +21,19 @@ var Drawer = function Drawer(props) {
     top = _props$top === void 0 ? 0 : _props$top,
     width = props.width,
     otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var useStyles = getStyles(top, width);
-  var classes = useStyles();
   return /*#__PURE__*/_react["default"].createElement(_Drawer["default"], (0, _extends2["default"])({}, otherProps, {
-    classes: {
-      root: classes.drawer,
-      paper: classes.drawerPaper
+    PaperProps: {
+      style: {
+        top: 'inherit',
+        width: 'inherit',
+        height: "calc(100% - ".concat(top, "px)")
+      }
     },
     style: _objectSpread({
       margin: margin,
-      padding: padding
+      padding: padding,
+      top: top,
+      width: width
     }, style)
   }), props.children);
 };

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

@@ -1,10 +1,14 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-import type { MenuProps as MuiMenuProps } from '@material-ui/core/Menu';
-export interface MenuProps extends DefaultProps, MuiMenuProps {
+import type { MenuProps } from '@mui/material/Menu';
+export interface IMenuProps extends DefaultProps, MenuProps {
     open: boolean;
     anchorEl?: HTMLElement;
     withWrapper?: boolean;
+    anchorOrigin?: {
+        vertical: 'top' | 'center' | 'bottom' | number;
+        horizontal: 'left' | 'center' | 'right' | number;
+    };
 }
-declare const Menu: ({ children, padding, margin, style, withWrapper, ...otherProps }: MenuProps) => React.JSX.Element;
+declare const Menu: ({ children, padding, margin, anchorOrigin, style, withWrapper, ...otherProps }: IMenuProps) => React.JSX.Element;
 export default Menu;

package/core/navigation/menu/index.js

@@ -5,23 +5,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Menu2 = _interopRequireDefault(require("@material-ui/core/Menu"));
 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 = ["children", "padding", "margin", "style", "withWrapper"];
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _excluded = ["children", "padding", "margin", "anchorOrigin", "style", "withWrapper"];
 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 Menu = function Menu(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
     margin = _ref.margin,
+    _ref$anchorOrigin = _ref.anchorOrigin,
+    anchorOrigin = _ref$anchorOrigin === void 0 ? {
+      vertical: 'top',
+      horizontal: 'left'
+    } : _ref$anchorOrigin,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     withWrapper = _ref.withWrapper,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Menu2["default"], (0, _extends2["default"])({}, otherProps, {
+  return /*#__PURE__*/_react["default"].createElement(_Menu["default"], (0, _extends2["default"])({}, otherProps, {
+    anchorOrigin: {
+      vertical: anchorOrigin.vertical,
+      horizontal: anchorOrigin.horizontal
+    },
     style: _objectSpread({
       padding: padding,
       margin: margin

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

@@ -1,3 +1,5 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").MenuProps>;
+import type { Meta } from '@storybook/react';
+import Menu from '.';
+declare const _default: Meta<typeof Menu>;
 export default _default;
 export declare const Default: any;

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

@@ -1,20 +1,20 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-import type { ButtonProps } from '@/core/inputs/button';
+import type { IButtonProps } from '@/core/inputs/button';
 export interface SidebarProps extends DefaultProps {
     open: boolean;
     expanded?: boolean;
     showButton?: boolean;
     anchor?: 'top' | 'left' | 'bottom' | 'right';
     variant?: 'persistent' | 'temporary' | 'permanent';
-    color?: 'primary' | 'secondary' | 'default' | 'inherit';
+    color?: 'default' | 'inherit';
     docked?: boolean;
     maxWidth?: number | string;
     minWidth?: number | string;
     top?: number | string;
     paperClasses?: object;
     name?: string;
-    ButtonProps?: ButtonProps;
+    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;

package/core/navigation/sidebar/index.js

@@ -10,52 +10,24 @@ 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("@material-ui/core/Drawer"));
-var _styles = require("@material-ui/core/styles");
-var _button = _interopRequireDefault(require("../../inputs/button"));
-var _styles2 = require("./styles");
+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"];
 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 useStyles = (0, _styles.makeStyles)(function (theme) {
-  return (0, _styles.createStyles)({
-    button: {
-      '&:active': {
-        boxShadow: 'none'
-      },
-      alignSelf: 'right',
-      backgroundColor: 'transparent',
-      boxShadow: 'none',
-      maxWidth: 'inherit',
-      minWidth: 'auto',
-      width: '100%'
-    },
+var app = _theme.theme.colors.app;
+var useStyles = (0, _makeStyles2["default"])(function () {
+  return (0, _createStyles2["default"])({
     "default": {
-      backgroundColor: theme.palette.background["default"],
-      color: theme.palette.text.primary
-    },
-    icon: {
-      fontSize: '24px'
+      backgroundColor: app.background.main
     },
     inherit: {
       backgroundColor: 'inherit',
       color: 'inherit'
-    },
-    primary: {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText
-    },
-    secondary: {
-      backgroundColor: theme.palette.secondary.main,
-      color: theme.palette.secondary.contrastText
-    },
-    sidebar: {
-      bottom: '0px',
-      left: '0px',
-      position: 'fixed',
-      top: 'inherit',
-      width: 'inherit'
     }
   });
 });
@@ -93,22 +65,19 @@ var Sidebar = function Sidebar(_ref) {
   var classes = useStyles();
   var renderAction = function renderAction() {
     var iconToLeft = anchor === 'left' && expanded || anchor === 'right' && !expanded;
-    return /*#__PURE__*/_react["default"].createElement(_styles2.Action, {
+    return /*#__PURE__*/_react["default"].createElement(_styles.Action, {
       anchor: anchor
-    }, /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _extends2["default"])({
+    }, /*#__PURE__*/_react["default"].createElement(_styles.AnchorButton, (0, _extends2["default"])({
       name: "button-".concat(name || 'sidebar'),
-      color: color,
       "data-testid": "sidebar-button",
       variant: "contained",
-      className: classes.button,
-      style: {
-        maxWidth: minWidth
-      },
+      padding: "6px 16px",
+      minwidth: minWidth,
       onClick: onToggle
     }, ButtonProps), iconToLeft ? /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft2["default"], {
-      className: classes.icon
+      fontSize: "medium"
     }) : /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRight2["default"], {
-      className: classes.icon
+      fontSize: "medium"
     })));
   };
   var width = expanded ? maxWidth : minWidth;
@@ -125,7 +94,15 @@ var Sidebar = function Sidebar(_ref) {
       top: top
     }, style),
     PaperProps: {
-      className: "".concat(docked ? classes.sidebar : '', " ").concat(classes[color]),
+      className: "".concat(classes[color]),
+      style: docked ? {
+        position: 'fixed',
+        left: '0px',
+        bottom: '0px',
+        top: 'inherit',
+        width: 'inherit',
+        height: 'inherit'
+      } : {},
       classes: paperClasses
     }
   }), showButton && renderAction(), children);

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

@@ -1,3 +1,6 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").SidebarProps>;
-export default _default;
-export declare const Default: any;
+import type { Meta, StoryObj } from '@storybook/react';
+import Sidebar from '.';
+declare const meta: Meta<typeof Sidebar>;
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+export declare const sidebar: Story;