flipper-ui 0.31.1 → 0.31.4

package/experimental/nothing-found/styles.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export declare const TextTypography: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<{
+    align?: import("@material-ui/core").PropTypes.Alignment | undefined;
+    children?: import("react").ReactNode;
+    color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | 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;
+}, "ref" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "children" | "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" | "onClick" | "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"> & import("../../core/types").DefaultProps, never>> & Omit<({ children, margin, padding, style, variant, ...otherProps }: {
+    align?: import("@material-ui/core").PropTypes.Alignment | undefined;
+    children?: import("react").ReactNode;
+    color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | 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;
+}, "ref" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "children" | "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" | "onClick" | "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"> & import("../../core/types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/experimental/nothing-found/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextTypography = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _typography = _interopRequireDefault(require("../../core/data-display/typography"));
+var _templateObject;
+var TextTypography = exports.TextTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        flex: 1;\n    }\n"])));

package/experimental/panel/index.d.ts

@@ -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;
 }
-export declare const Panel: (props: PaperProps) => React.JSX.Element;
+declare const Panel: (props: PaperProps) => React.JSX.Element;
 export default Panel;

package/experimental/panel/index.js

@@ -4,26 +4,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Panel = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _defaultTo = _interopRequireDefault(require("ramda/es/defaultTo"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styles = require("./styles");
 var _icons = require("../../icons");
-var _ = require("../..");
 var _excluded = ["hideExpansionIcon", "expanded", "defaultExpanded", "id", "nested", "elevation", "hideSummary", "title", "summary", "details", "actions", "area", "style", "className", "detailsStyle", "onChange", "onClick"];
-var _templateObject, _templateObject2, _templateObject3;
 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 Paper = (0, _styledComponents["default"])(_.ExpansionPanel)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-radius: 4px;\n        ::before {\n            height: 0px;\n            background-color: transparent;\n        }\n    }\n"])));
-var Summary = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n"])));
-var Title = (0, _styledComponents["default"])(_.Typography)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        flex: 1;\n    }\n"])));
 var NESTED_ELEVATION = 0;
 var DEFAULT_ELEVATION = 2;
-var Panel = exports.Panel = function Panel(props) {
+var Panel = function Panel(props) {
   var hideExpansionIcon = props.hideExpansionIcon,
     expanded = props.expanded,
     defaultExpanded = props.defaultExpanded,
@@ -47,13 +41,13 @@ var Panel = exports.Panel = function Panel(props) {
       cursor: 'auto'
     }
   } : undefined;
-  return /*#__PURE__*/_react["default"].createElement(Paper, (0, _extends2["default"])({}, otherProps, {
+  return /*#__PURE__*/_react["default"].createElement(_styles.Paper, (0, _extends2["default"])({}, otherProps, {
     expanded: expanded,
     id: id,
     "data-testid": "panel-component",
     defaultExpanded: (0, _defaultTo["default"])(true, defaultExpanded),
     elevation: nested ? NESTED_ELEVATION : (0, _defaultTo["default"])(DEFAULT_ELEVATION, elevation),
-    summary: !hideSummary && /*#__PURE__*/_react["default"].createElement(Summary, null, title && /*#__PURE__*/_react["default"].createElement(Title, {
+    summary: !hideSummary && /*#__PURE__*/_react["default"].createElement(_styles.Summary, null, title && /*#__PURE__*/_react["default"].createElement(_styles.Title, {
       noWrap: true,
       variant: "subtitle1"
     }, title), summary),

package/experimental/panel/panel.stories.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import(".").PaperProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").PaperProps>;
 export default _default;
 export declare const Default: any;
 export declare const Nested: any;

package/experimental/panel/styles.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export declare const Paper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("../../core/surfaces/expansion-panel").ExpansionPanelProps, never>> & Omit<({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, editStyle, onHelperClick, onEditClick, onSaveClick, onClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: import("../../core/surfaces/expansion-panel").ExpansionPanelProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Summary: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Title: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<{
+    align?: import("@material-ui/core").PropTypes.Alignment | undefined;
+    children?: import("react").ReactNode;
+    color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | 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;
+}, "ref" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "children" | "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" | "onClick" | "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"> & import("../../core/types").DefaultProps, never>> & Omit<({ children, margin, padding, style, variant, ...otherProps }: {
+    align?: import("@material-ui/core").PropTypes.Alignment | undefined;
+    children?: import("react").ReactNode;
+    color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | 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;
+}, "ref" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "children" | "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" | "onClick" | "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"> & import("../../core/types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/experimental/panel/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.Summary = exports.Paper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("../..");
+var _templateObject, _templateObject2, _templateObject3;
+var Paper = exports.Paper = (0, _styledComponents["default"])(_.ExpansionPanel)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-radius: 4px;\n        ::before {\n            height: 0px;\n            background-color: transparent;\n        }\n    }\n"])));
+var Summary = exports.Summary = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n"])));
+var Title = exports.Title = (0, _styledComponents["default"])(_.Typography)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        flex: 1;\n    }\n"])));

package/experimental/sidebar/index.d.ts

@@ -16,5 +16,5 @@ export interface IProps {
 /**
  * Sidebar component V2
  */
-export declare const Sidebar: (props: IProps) => React.JSX.Element;
+declare const Sidebar: (props: IProps) => React.JSX.Element;
 export default Sidebar;

package/experimental/sidebar/index.js

@@ -5,39 +5,29 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Sidebar = void 0;
+exports["default"] = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _times = _interopRequireDefault(require("ramda/es/times"));
 var _map = _interopRequireDefault(require("ramda/es/map"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ = require("../..");
-var _theme = require("../../theme");
+var _styles = require("./styles");
 var _excluded = ["options", "loading", "handleGoTo", "extraOptions", "top"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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" != _typeof(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 && Object.prototype.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; }
-var StyledFlipperSidebar = (0, _styledComponents["default"])(_.Sidebar)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        border-right: 1px solid ", ";\n    }\n"])), _theme.theme.colors.grays.g6);
-var MenuItem = (0, _styledComponents["default"])(_.ListItem)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    &&& {\n        & div {\n            padding: 0;\n        }\n    }\n"])));
-var Link = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    text-decoration: none;\n"])), _theme.theme.colors.primary.main);
-var PaperBar = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    flex-direction: column;\n    display: flex;\n    justify-content: space-between;\n    flex: 1;\n    padding-bottom: 16px;\n"])));
-var LABEL_TIMEOUT = 300;
 var renderSkeleton = function renderSkeleton(index) {
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement(_styles.SkeletonWrapper, {
     className: "skeleton-container",
     role: "skeleton",
-    key: "sidebar-skeleton-".concat(index),
-    style: {
-      padding: '2px 10px'
-    }
+    key: "sidebar-skeleton-".concat(index)
   }, /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
     width: 36,
     height: 36
   }));
 };
+var LABEL_TIMEOUT = 300;
 var SIDEBAR_SKELETON_SIZE = 6;
 var sidebarSkeleton = (0, _times["default"])(renderSkeleton, SIDEBAR_SKELETON_SIZE);
 
@@ -62,17 +52,16 @@ var useSidebar = function useSidebar() {
     route: route
   };
 };
-var emptyList = [];
 
 /**
  * Sidebar component V2
  */
-var Sidebar = exports.Sidebar = function Sidebar(props) {
+var Sidebar = function Sidebar(props) {
   var options = props.options,
     loading = props.loading,
     handleGoTo = props.handleGoTo,
     _props$extraOptions = props.extraOptions,
-    extraOptions = _props$extraOptions === void 0 ? emptyList : _props$extraOptions,
+    extraOptions = _props$extraOptions === void 0 ? [] : _props$extraOptions,
     top = props.top,
     otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useSidebar = useSidebar(),
@@ -93,7 +82,7 @@ var Sidebar = exports.Sidebar = function Sidebar(props) {
     }
   }, [expanded]);
   var renderOption = function renderOption(option) {
-    return /*#__PURE__*/_react["default"].createElement(Link, {
+    return /*#__PURE__*/_react["default"].createElement(_styles.Link, {
       "data-testid": "sidebar-option-".concat(option.route.replace('/', '')),
       key: option.name
     }, /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
@@ -101,7 +90,7 @@ var Sidebar = exports.Sidebar = function Sidebar(props) {
       placement: "right",
       enterDelay: 500,
       title: expanded ? '' : option.label
-    }, /*#__PURE__*/_react["default"].createElement(MenuItem, {
+    }, /*#__PURE__*/_react["default"].createElement(_styles.MenuItem, {
       key: option.name,
       selected: option.name === route,
       icon: option.icon,
@@ -113,7 +102,7 @@ var Sidebar = exports.Sidebar = function Sidebar(props) {
       onClick: handleGoTo === null || handleGoTo === void 0 ? void 0 : handleGoTo(option.name, option.route)
     })));
   };
-  return /*#__PURE__*/_react["default"].createElement(StyledFlipperSidebar, {
+  return /*#__PURE__*/_react["default"].createElement(_styles.StyledFlipperSidebar, {
     open: true,
     docked: true,
     name: "sidebar",
@@ -130,7 +119,7 @@ var Sidebar = exports.Sidebar = function Sidebar(props) {
     expanded: expanded,
     top: top || 0,
     onToggle: toggle
-  }, /*#__PURE__*/_react["default"].createElement(PaperBar, otherProps, /*#__PURE__*/_react["default"].createElement(_.List, {
+  }, /*#__PURE__*/_react["default"].createElement(_styles.PaperBar, otherProps, /*#__PURE__*/_react["default"].createElement(_.List, {
     dense: true
   }, loading ? sidebarSkeleton : (0, _map["default"])(renderOption, options)), /*#__PURE__*/_react["default"].createElement(_.List, {
     dense: true

package/experimental/sidebar/sidebar.stories.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import(".").IProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").IProps>;
 export default _default;
 export declare const Default: any;
 export declare const Loading: any;

package/experimental/sidebar/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledFlipperSidebar: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("../../core/navigation/sidebar").SidebarProps, never>> & Omit<({ id, anchor, className, color, docked, expanded, margin, maxWidth, minWidth, top, open, padding, paperClasses, showButton, style, variant, ButtonProps, onToggle, children, name, ...otherProps }: import("../../core/navigation/sidebar").SidebarProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const MenuItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("../../core/data-display/list-item").ListItemProps, never>> & Omit<(props: import("../../core/data-display/list-item").ListItemProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Link: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>;
+export declare const PaperBar: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const SkeletonWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/experimental/sidebar/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledFlipperSidebar = exports.SkeletonWrapper = exports.PaperBar = exports.MenuItem = exports.Link = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("../..");
+var _theme = require("../../theme");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _theme$colors = _theme.theme.colors,
+  grays = _theme$colors.grays,
+  primary = _theme$colors.primary;
+var StyledFlipperSidebar = exports.StyledFlipperSidebar = (0, _styledComponents["default"])(_.Sidebar)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        border-right: 1px solid ", ";\n    }\n"])), grays.g6);
+var MenuItem = exports.MenuItem = (0, _styledComponents["default"])(_.ListItem)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    &&& {\n        & div {\n            padding: 0;\n        }\n    }\n"])));
+var Link = exports.Link = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    text-decoration: none;\n"])), primary.main);
+var PaperBar = exports.PaperBar = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    flex-direction: column;\n    display: flex;\n    justify-content: space-between;\n    flex: 1;\n    padding-bottom: 16px;\n"])));
+var SkeletonWrapper = exports.SkeletonWrapper = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    padding: 2px 10px;\n"])));

package/experimental/skeleton/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { SkeletonProps } from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
-export declare const Skeleton: (props: SkeletonProps) => React.JSX.Element;
+declare const Skeleton: (props: SkeletonProps) => React.JSX.Element;
 export default Skeleton;

package/experimental/skeleton/index.js

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Skeleton = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 require("react-loading-skeleton/dist/skeleton.css");
 var _theme = require("../../theme");
 var grays = _theme.theme.colors.grays;
-var Skeleton = exports.Skeleton = function Skeleton(props) {
+var Skeleton = function Skeleton(props) {
   return /*#__PURE__*/_react["default"].createElement(_reactLoadingSkeleton["default"], (0, _extends2["default"])({
     containerTestId: "skeleton-container",
     baseColor: grays.g7,

package/experimental/skeleton/skeleton.stories.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("react-loading-skeleton").SkeletonProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react-loading-skeleton").SkeletonProps>;
 export default _default;
 export declare const Default: any;
 export declare const WithCustomHeight: any;

package/experimental/visibility-icon/index.d.ts

@@ -4,5 +4,5 @@ export interface IProps {
     show: boolean;
     onToggle(): void;
 }
-export declare const VisibilityIcon: ({ show, onToggle, name, ...otherProps }: IProps) => React.JSX.Element;
+declare const VisibilityIcon: ({ show, onToggle, name, ...otherProps }: IProps) => React.JSX.Element;
 export default VisibilityIcon;

package/experimental/visibility-icon/index.js

@@ -4,23 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.VisibilityIcon = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styles = require("./styles");
 var _icons = require("../../icons");
-var _ = require("../..");
 var _excluded = ["show", "onToggle", "name"];
-var _templateObject;
-var StyledButton = (0, _styledComponents["default"])(_.IconButton)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 36px !important;\n    height: 36px !important;\n"])));
-var VisibilityIcon = exports.VisibilityIcon = function VisibilityIcon(_ref) {
+var VisibilityIcon = function VisibilityIcon(_ref) {
   var show = _ref.show,
     onToggle = _ref.onToggle,
     name = _ref.name,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({}, otherProps, {
+  return /*#__PURE__*/_react["default"].createElement(_styles.StyledButton, (0, _extends2["default"])({}, otherProps, {
     padding: "0px",
     name: name,
     onClick: onToggle

package/experimental/visibility-icon/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("../../core/inputs/icon-button").IconButtonProps, never>> & Omit<({ children, padding, margin, style, ...otherProps }: import("../../core/inputs/icon-button").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/experimental/visibility-icon/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledButton = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("../..");
+var _templateObject;
+var StyledButton = exports.StyledButton = (0, _styledComponents["default"])(_.IconButton)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 36px !important;\n    height: 36px !important;\n"])));

package/experimental/visibility-icon/visibility-icon.stories.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import(".").IProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").IProps>;
 export default _default;
 export declare const Default: any;

package/index.d.ts

@@ -61,6 +61,7 @@ export { default as Zoom } from './core/feedback/zoom';
 export { default as PinInput } from './core/inputs/pin-input';
 export { default as Chapter } from './core/data-display/chapter';
 export { default as DataTable } from './core/data-display/data-table';
+export { default as DataTableField } from './core/data-display/data-table/data-table-field';
 export { default as StepCard } from './core/surfaces/step-card';
 export { default as StepCardSkeleton } from './core/surfaces/step-card/step-card-skeleton';
 export { default as ValidationDialog } from './core/feedback/validation-dialog/';

package/index.js

@@ -101,6 +101,12 @@ Object.defineProperty(exports, "DataTable", {
     return _dataTable["default"];
   }
 });
+Object.defineProperty(exports, "DataTableField", {
+  enumerable: true,
+  get: function get() {
+    return _dataTableField["default"];
+  }
+});
 Object.defineProperty(exports, "DateTime", {
   enumerable: true,
   get: function get() {
@@ -466,6 +472,7 @@ var _zoom = _interopRequireDefault(require("./core/feedback/zoom"));
 var _pinInput = _interopRequireDefault(require("./core/inputs/pin-input"));
 var _chapter = _interopRequireDefault(require("./core/data-display/chapter"));
 var _dataTable = _interopRequireDefault(require("./core/data-display/data-table"));
+var _dataTableField = _interopRequireDefault(require("./core/data-display/data-table/data-table-field"));
 var _stepCard = _interopRequireDefault(require("./core/surfaces/step-card"));
 var _stepCardSkeleton = _interopRequireDefault(require("./core/surfaces/step-card/step-card-skeleton"));
 var _validationDialog = _interopRequireDefault(require("./core/feedback/validation-dialog/"));

package/lib/localization.js

@@ -17,7 +17,7 @@ var getLocalization = exports.getLocalization = function getLocalization() {
       editRow: {
         saveTooltip: 'Salvar',
         cancelTooltip: 'Cancelar',
-        deleteText: "Voc\xEA tem certeza que deseja excluir esse ".concat(title !== null && title !== void 0 ? title : 'item', "?")
+        deleteText: title !== '' ? "Voc\xEA tem certeza que deseja excluir esse ".concat(title, "?") : "Voc\xEA tem certeza que deseja excluir esse item?"
       },
       addTooltip: "Adicionar ".concat(title),
       deleteTooltip: "Remover ".concat(title),