flipper-ui 0.33.0 → 0.34.0

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

@@ -1,7 +1,10 @@
-/// <reference types="react" />
 interface IAction {
     anchor?: 'top' | 'left' | 'bottom' | 'right';
     minWidth?: number | string;
 }
 export declare const Action: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAction>> & string;
+export declare const AnchorButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@/core/inputs/button").IButtonProps, {
+    minwidth: string | number;
+}>> & string & Omit<({ children, color, dashed, href, margin, padding, style, variant, ...otherProps }: import("@/core/inputs/button").IButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const SidebarStorie: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/core/navigation/sidebar/styles.js

@@ -4,10 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Action = void 0;
+exports.SidebarStorie = exports.AnchorButton = exports.Action = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+var _button = _interopRequireDefault(require("../../inputs/button"));
+var _theme = require("../../../theme");
+var _templateObject, _templateObject2, _templateObject3;
+var grays = _theme.theme.colors.grays;
 var Action = exports.Action = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex-direction: ", ";\n    display: flex;\n    padding: 4px;\n"])), function (props) {
   return props.anchor === 'left' ? 'row-reverse' : 'row';
-});
+});
+var AnchorButton = exports.AnchorButton = (0, _styledComponents["default"])(_button["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        max-width: ", "px;\n        border-radius: 4px;\n        box-shadow: none;\n        min-width: auto;\n        width: 100%;\n        background-color: transparent;\n    }\n\n    &:active {\n        box-shadow: none;\n    }\n\n    &:hover {\n        background-color: ", " !important;\n    }\n"])), function (props) {
+  return props.minwidth;
+}, grays.g6);
+var SidebarStorie = exports.SidebarStorie = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    height: 500px;\n"])));

package/core/navigation/stepper/index.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Stepper2 = _interopRequireDefault(require("@material-ui/core/Stepper"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _Step2 = _interopRequireDefault(require("@material-ui/core/Step"));
-var _StepLabel2 = _interopRequireDefault(require("@material-ui/core/StepLabel"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _Step = _interopRequireDefault(require("@mui/material/Step"));
+var _StepLabel = _interopRequireDefault(require("@mui/material/StepLabel"));
+var _Stepper = _interopRequireDefault(require("@mui/material/Stepper"));
 var _excluded = ["active", "bottomLabel", "steps", "padding", "margin", "style"];
 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); }
 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; }
@@ -42,7 +42,7 @@ var Stepper = function Stepper(_ref2) {
     _ref2$style = _ref2.style,
     style = _ref2$style === void 0 ? {} : _ref2$style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Stepper2["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_Stepper["default"], (0, _extends2["default"])({
     role: "stepper-container",
     alternativeLabel: bottomLabel,
     activeStep: active,
@@ -51,9 +51,9 @@ var Stepper = function Stepper(_ref2) {
       margin: margin
     }, style)
   }, otherProps), steps.map(function (step, index) {
-    return /*#__PURE__*/_react["default"].createElement(_Step2["default"], {
+    return /*#__PURE__*/_react["default"].createElement(_Step["default"], {
       key: index
-    }, /*#__PURE__*/_react["default"].createElement(_StepLabel2["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(_StepLabel["default"], {
       icon: (0, _typeof2["default"])(step) === 'object' ? /*#__PURE__*/_react["default"].createElement(StepIcon, {
         icon: step.icon,
         active: !!isActive(index, active)

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

@@ -1,4 +1,6 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").StepperProps>;
+import type { Meta } from '@storybook/react';
+import Stepper from '.';
+declare const _default: Meta<typeof Stepper>;
 export default _default;
 export declare const Default: any;
 export declare const WithIcon: any;

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-interface TabProps extends DefaultProps {
-    disabled?: boolean;
-    icon?: string | JSX.Element;
+import type { TabOwnProps } from '@mui/material/Tab';
+interface TabProps extends Omit<DefaultProps, 'children'>, TabOwnProps {
+    href?: string;
     label?: string;
     value?: unknown;
+    minWidth?: string;
+    disabled?: boolean;
     disableRipple?: boolean;
+    icon?: string | JSX.Element;
 }
-declare const Tab: ({ style, margin, disableRipple, padding, ...otherProps }: TabProps) => React.JSX.Element;
+declare const Tab: ({ style, margin, disableRipple, padding, minWidth, href, ...otherProps }: TabProps) => React.JSX.Element;
 export default Tab;

package/core/navigation/tab/index.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Tab2 = _interopRequireDefault(require("@material-ui/core/Tab"));
 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 = ["style", "margin", "disableRipple", "padding"];
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _excluded = ["style", "margin", "disableRipple", "padding", "minWidth", "href"];
 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 Tab = function Tab(_ref) {
@@ -18,12 +18,18 @@ var Tab = function Tab(_ref) {
     margin = _ref.margin,
     disableRipple = _ref.disableRipple,
     padding = _ref.padding,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? '160px' : _ref$minWidth,
+    _ref$href = _ref.href,
+    href = _ref$href === void 0 ? '' : _ref$href,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Tab2["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_Tab["default"], (0, _extends2["default"])({
+    href: href,
     disableRipple: disableRipple,
     style: _objectSpread({
       margin: margin,
-      padding: padding
+      padding: padding,
+      minWidth: minWidth
     }, style)
   }, otherProps));
 };

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

@@ -1,23 +1,14 @@
-import type { ReactNode } from 'react';
 import React from 'react';
+import type { ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
 export interface TabsProps extends DefaultProps {
     centered?: boolean;
-    value: string | number;
-    color?: 'default' | 'inherit' | 'primary' | 'secondary';
-    variant?: 'standard' | 'scrollable' | 'fullWidth';
     children?: ReactNode;
+    value: string | number;
     indicatorColor?: 'primary' | 'secondary';
+    textColor?: 'secondary' | 'primary' | 'inherit';
+    variant?: 'standard' | 'scrollable' | 'fullWidth';
     onChange?: (event: object, value: number) => void;
 }
-export interface IClasses {
-    classes?: {
-        default: string;
-        inherit: string;
-        primary: string;
-        secondary: string;
-        indicator: string;
-    };
-}
-declare const Tabs: ({ children, centered, padding, style, margin, variant, indicatorColor, ...otherProps }: TabsProps & IClasses) => React.JSX.Element;
+declare const Tabs: ({ children, style, margin, centered, padding, variant, indicatorColor, ...otherProps }: TabsProps) => React.JSX.Element;
 export default Tabs;

package/core/navigation/tabs/index.js

@@ -5,32 +5,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Tabs2 = _interopRequireDefault(require("@material-ui/core/Tabs"));
 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", "centered", "padding", "style", "margin", "variant", "indicatorColor"];
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
+var _excluded = ["children", "style", "margin", "centered", "padding", "variant", "indicatorColor"];
 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 Tabs = function Tabs(_ref) {
   var children = _ref.children,
+    style = _ref.style,
+    margin = _ref.margin,
     _ref$centered = _ref.centered,
     centered = _ref$centered === void 0 ? true : _ref$centered,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? '6px 0 0' : _ref$padding,
-    style = _ref.style,
-    margin = _ref.margin,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'standard' : _ref$variant,
     _ref$indicatorColor = _ref.indicatorColor,
     indicatorColor = _ref$indicatorColor === void 0 ? 'primary' : _ref$indicatorColor,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Tabs2["default"], (0, _extends2["default"])({
-    indicatorColor: indicatorColor,
-    centered: centered
-  }, otherProps, {
+  return /*#__PURE__*/_react["default"].createElement(_Tabs["default"], (0, _extends2["default"])({}, otherProps, {
     variant: variant,
+    centered: centered,
+    indicatorColor: indicatorColor,
     style: _objectSpread({
       padding: padding,
       margin: margin

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

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

package/core/surfaces/box/box.stories.d.ts

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

package/core/surfaces/box/index.d.ts

@@ -6,5 +6,5 @@ export interface BoxProps extends DefaultProps {
     children: ReactNode;
     'data-testid'?: string;
 }
-declare const Box: ({ children, margin, padding, style, minHeight, ...otherProps }: BoxProps) => React.JSX.Element;
+declare const Box: ({ children, style, margin, padding, minHeight, ...otherProps }: BoxProps) => React.JSX.Element;
 export default Box;

package/core/surfaces/box/index.js

@@ -10,22 +10,22 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _paper = _interopRequireDefault(require("../paper"));
-var _excluded = ["children", "margin", "padding", "style", "minHeight"];
+var _excluded = ["children", "style", "margin", "padding", "minHeight"];
 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 Box = function Box(_ref) {
   var children = _ref.children,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
     margin = _ref.margin,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? 18 : _ref$padding,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style,
     _ref$minHeight = _ref.minHeight,
     minHeight = _ref$minHeight === void 0 ? 400 : _ref$minHeight,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_paper["default"], (0, _extends2["default"])({
-    padding: padding,
     margin: margin,
+    padding: padding,
     style: _objectSpread({
       minHeight: minHeight
     }, style)

package/core/surfaces/card/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ReactNode } from 'react';
-import type { ButtonProps } from '@/core/inputs/button';
+import type { IButtonProps } from '@/core/inputs/button';
 import type { IconButtonProps } from '@/core/inputs/icon-button';
 export interface IProps {
     children: ReactNode;
@@ -12,7 +12,7 @@ export interface IProps {
     editing?: boolean;
     action?: JSX.Element | null;
     renderRemove?: boolean;
-    onAddProps?: Partial<ButtonProps>;
+    onAddProps?: Partial<IButtonProps>;
     onEditProps?: Partial<IconButtonProps>;
     onRemoveProps?: Partial<IconButtonProps>;
     onClickAdd?(): void;

package/core/surfaces/card/index.js

@@ -36,12 +36,16 @@ var Card = function Card(props) {
     onRemoveProps = props.onRemoveProps,
     otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_paper["default"], (0, _extends2["default"])({}, otherProps, {
-    name: name,
     id: id,
-    style: _styles.PAPER_PROPS,
+    name: name,
     className: "showable",
-    elevation: nested ? _styles.NESTED_ELEVATION : undefined,
-    padding: nested ? '0' : '24px'
+    elevation: nested ? 0 : undefined,
+    padding: nested ? '0px' : '24px',
+    style: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column'
+    }
   }), title && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_styles.Header, null, title && /*#__PURE__*/_react["default"].createElement(_styles.Title, {
     name: name + '-title',
     variant: "h6",

package/core/surfaces/card/styles.d.ts

@@ -1,31 +1,8 @@
-import type { CSSProperties } from 'react';
-export declare const NESTED_ELEVATION = 0;
-export declare const PAPER_PROPS: CSSProperties;
 export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CardWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Title: 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 CardButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/inputs/icon-button").IconButtonProps, never>> & string & Omit<({ children, padding, margin, style, ...otherProps }: import("@/core/inputs/icon-button").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Title: 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>>;
+export declare const CardButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/inputs/icon-button").IconButtonProps, never>> & string & Omit<({ children, padding, margin, size, style, ...otherProps }: import("@/core/inputs/icon-button").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/core/surfaces/card/styles.js

@@ -4,18 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.PAPER_PROPS = exports.NESTED_ELEVATION = exports.Header = exports.CardWrapper = exports.CardButton = void 0;
+exports.Title = exports.Header = exports.CardWrapper = exports.CardButton = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var NESTED_ELEVATION = exports.NESTED_ELEVATION = 0;
-var PAPER_PROPS = exports.PAPER_PROPS = {
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'column'
-};
 var Header = exports.Header = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
 var CardWrapper = exports.CardWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n"])));
 var Title = exports.Title = (0, _styledComponents["default"])(_typography["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n"])));

package/core/surfaces/expansion-panel/expansion-panel.stories.d.ts

@@ -1,4 +1,6 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").ExpansionPanelProps>;
+import type { Meta } from '@storybook/react';
+import ExpansionPanel from '.';
+declare const _default: Meta<typeof ExpansionPanel>;
 export default _default;
 export declare const Default: any;
 export declare const Disabled: any;

package/core/surfaces/expansion-panel/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { ReactNode, MouseEvent, CSSProperties, HTMLAttributes, ChangeEvent } from 'react';
-import type { PaperProps } from '@/core/surfaces/paper';
-export interface ExpansionPanelProps extends Omit<PaperProps, 'onChange'> {
+import type { ReactNode, MouseEvent, CSSProperties, HTMLAttributes, ChangeEvent, SyntheticEvent } from 'react';
+import type { IPaperProps } from '@/core/surfaces/paper';
+export interface ExpansionPanelProps extends Omit<IPaperProps, 'onChange'> {
     actions?: ReactNode;
     defaultExpanded?: boolean;
     details?: ReactNode;
@@ -22,8 +22,8 @@ export interface ExpansionPanelProps extends Omit<PaperProps, 'onChange'> {
     onHelperClick?: () => void;
     onEditClick?: () => void;
     onSaveClick?: () => void;
-    onChange?: (event?: ChangeEvent<Record<string, unknown>>, expanded?: boolean) => void;
+    onChange?: (event?: ChangeEvent<Record<string, unknown>> | SyntheticEvent<Element, Event>, expanded?: boolean) => void;
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
-declare const ExpansionPanel: ({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, editStyle, onHelperClick, onEditClick, onSaveClick, onClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: ExpansionPanelProps) => React.JSX.Element;
+declare const ExpansionPanel: ({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, onHelperClick, onEditClick, onSaveClick, onClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: ExpansionPanelProps) => React.JSX.Element;
 export default ExpansionPanel;

package/core/surfaces/expansion-panel/index.js

@@ -6,16 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _Edit2 = _interopRequireDefault(require("@mui/icons-material/Edit"));
+var _Save2 = _interopRequireDefault(require("@mui/icons-material/Save"));
+var _KeyboardArrowUp2 = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowUp"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
-var _AccordionActions = _interopRequireDefault(require("@material-ui/core/AccordionActions"));
-var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
-var _AccordionSummary = _interopRequireDefault(require("@material-ui/core/AccordionSummary"));
+var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
+var _AccordionActions = _interopRequireDefault(require("@mui/material/AccordionActions"));
+var _AccordionDetails = _interopRequireDefault(require("@mui/material/AccordionDetails"));
+var _AccordionSummary = _interopRequireDefault(require("@mui/material/AccordionSummary"));
+var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 var _textField = require("../../inputs/text-field");
 var _styles = require("./styles");
-var _excluded = ["actions", "details", "expandIcon", "margin", "padding", "style", "summary", "summaryStyle", "detailsStyle", "actionsStyle", "editStyle", "onHelperClick", "onEditClick", "onSaveClick", "onClick", "helperIcon", "editable", "editing", "headerProps", "helperButtonPosition"];
+var _excluded = ["actions", "details", "expandIcon", "margin", "padding", "style", "summary", "summaryStyle", "detailsStyle", "actionsStyle", "onHelperClick", "onEditClick", "onSaveClick", "onClick", "helperIcon", "editable", "editing", "headerProps", "helperButtonPosition"];
 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 ExpansionPanel = function ExpansionPanel(_ref) {
@@ -29,7 +33,6 @@ var ExpansionPanel = function ExpansionPanel(_ref) {
     summaryStyle = _ref.summaryStyle,
     detailsStyle = _ref.detailsStyle,
     actionsStyle = _ref.actionsStyle,
-    editStyle = _ref.editStyle,
     onHelperClick = _ref.onHelperClick,
     onEditClick = _ref.onEditClick,
     onSaveClick = _ref.onSaveClick,
@@ -71,28 +74,30 @@ var ExpansionPanel = function ExpansionPanel(_ref) {
     helperIcon: helperIcon,
     onHelperClick: handleClick
   }));
-  var renderEdit = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, editable && /*#__PURE__*/_react["default"].createElement(_textField.EditBox, {
-    editing: !!editing,
-    style: editStyle,
-    saveButtonProps: {
-      role: 'save-button'
-    },
-    editButtonProps: {
-      role: 'edit-button'
-    },
-    onEditClick: handleEditClick,
-    onSaveClick: handleSaveClick
-  }));
   return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({}, otherProps, {
     style: _objectSpread({
       margin: margin,
       padding: padding
     }, style)
   }), summary && /*#__PURE__*/_react["default"].createElement(_AccordionSummary["default"], {
-    expandIcon: expandIcon,
+    expandIcon: expandIcon || /*#__PURE__*/_react["default"].createElement(_KeyboardArrowUp2["default"], null),
     style: summaryStyle,
     onClick: onClick
-  }, /*#__PURE__*/_react["default"].createElement(_styles.ExpansionPanelHeaderWrapper, headerProps, helperButtonPosition === 'left' && renderHelper, summary, renderEdit, helperButtonPosition === 'right' && renderHelper)), details && /*#__PURE__*/_react["default"].createElement(_AccordionDetails["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_styles.ExpansionPanelHeaderWrapper, headerProps, helperButtonPosition === 'left' && renderHelper, summary, editable && /*#__PURE__*/_react["default"].createElement("div", {
+    role: "edit-box"
+  }, editing ? /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    role: "save-button",
+    padding: "6px 2px",
+    onClick: handleSaveClick
+  }, /*#__PURE__*/_react["default"].createElement(_Save2["default"], {
+    fontSize: "small"
+  })) : /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    role: "save-button",
+    padding: "6px 2px",
+    onClick: handleEditClick
+  }, /*#__PURE__*/_react["default"].createElement(_Edit2["default"], {
+    fontSize: "small"
+  }))), helperButtonPosition === 'right' && renderHelper)), details && /*#__PURE__*/_react["default"].createElement(_AccordionDetails["default"], {
     style: detailsStyle
   }, details), actions && /*#__PURE__*/_react["default"].createElement(_AccordionActions["default"], {
     style: actionsStyle

package/core/surfaces/expansion-panel/styles.d.ts

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

package/core/surfaces/header/header.stories.d.ts

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

package/core/surfaces/header/index.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import type { PaperProps } from '@/core/surfaces/paper';
-import type { AppBarProps } from '@material-ui/core';
-export interface HeaderProps extends Omit<PaperProps, 'classes'>, AppBarProps {
+import type { DefaultProps } from '../../types';
+import type { AppBarProps } from '@mui/material/AppBar';
+export interface HeaderProps extends DefaultProps, AppBarProps {
     position?: 'absolute' | 'fixed' | 'static' | 'sticky';
     color?: 'default' | 'inherit' | 'primary' | 'secondary';
+    square?: boolean;
+    elevation?: number;
 }
 declare const Header: ({ children, padding, margin, style, elevation, ...otherProps }: HeaderProps) => React.JSX.Element;
 export default Header;

package/core/surfaces/header/index.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _AppBar2 = _interopRequireDefault(require("@material-ui/core/AppBar"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _Toolbar2 = _interopRequireDefault(require("@material-ui/core/Toolbar"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
+var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
 var _excluded = ["children", "padding", "margin", "style", "elevation"];
 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; }
@@ -23,12 +23,12 @@ var Header = function Header(_ref) {
     _ref$elevation = _ref.elevation,
     elevation = _ref$elevation === void 0 ? 0 : _ref$elevation,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_AppBar2["default"], (0, _extends2["default"])({}, otherProps, {
+  return /*#__PURE__*/_react["default"].createElement(_AppBar["default"], (0, _extends2["default"])({}, otherProps, {
     elevation: elevation,
     style: _objectSpread({
       padding: padding,
       margin: margin
     }, style)
-  }), /*#__PURE__*/_react["default"].createElement(_Toolbar2["default"], null, children));
+  }), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], null, children));
 };
 var _default = exports["default"] = Header;

package/core/surfaces/panel/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { CSSProperties, ChangeEvent, MouseEvent, ReactNode } from 'react';
-import type { PaperProps as FlipperPaperProps } from '@/core/surfaces/paper';
-export interface PaperProps extends Omit<FlipperPaperProps, 'title' | 'onChange'> {
+import type { IPaperProps } from '@/core/surfaces/paper';
+export interface PanelProps extends Omit<IPaperProps, 'title' | 'onChange'> {
     expanded?: boolean;
     defaultExpanded?: boolean;
     hideSummary?: boolean;
@@ -20,5 +20,5 @@ export interface PaperProps extends Omit<FlipperPaperProps, 'title' | 'onChange'
     onChange?(event?: ChangeEvent<Record<string, unknown>>, expanded?: boolean): void;
     onClick?(event: MouseEvent<HTMLDivElement>): void;
 }
-declare const Panel: (props: PaperProps) => React.JSX.Element;
+declare const Panel: (props: PanelProps) => React.JSX.Element;
 export default Panel;