flipper-ui 0.31.1 → 0.31.4

package/core/data-display/advertise/advertise.stories.d.ts

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

package/core/data-display/advertise/index.d.ts

@@ -2,23 +2,9 @@ import React from 'react';
 import type { CSSProperties } from 'react';
 import type { DefaultProps } from '../../types';
 export interface AdvertiseProps extends DefaultProps {
-    /**
-     * The comment to be displayed
-     */
     comment: string;
-    /**
-     * The author of the comment
-     */
     author: string;
-    /**
-     * The style of the comment
-     * @optional
-     */
     commentStyle?: CSSProperties;
-    /**
-     * The style of the author
-     * @optional
-     */
     authorStyle?: CSSProperties;
 }
 declare const Advertise: ({ comment, author, padding, commentStyle, authorStyle, ...otherProps }: AdvertiseProps) => React.JSX.Element;

package/core/data-display/advertise/index.js

@@ -8,23 +8,11 @@ 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 _styledComponents = _interopRequireDefault(require("styled-components"));
-var _typography = require("../typography");
-var _paper = _interopRequireDefault(require("../../surfaces/paper"));
-var _theme = require("../../../theme");
+var _styles = require("./styles");
 var _excluded = ["comment", "author", "padding", "commentStyle", "authorStyle"];
-var _templateObject;
 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 grays = _theme.theme.colors.grays;
-var styles = {
-  border: {
-    borderLeft: "1px solid ".concat(grays.g5)
-  }
-};
-var Paper = (0, _styledComponents["default"])(_paper["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n"])));
 var Advertise = function Advertise(_ref) {
   var comment = _ref.comment,
     author = _ref.author,
@@ -35,17 +23,17 @@ var Advertise = function Advertise(_ref) {
     _ref$authorStyle = _ref.authorStyle,
     authorStyle = _ref$authorStyle === void 0 ? {} : _ref$authorStyle,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(Paper, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_styles.Paper, (0, _extends2["default"])({
     padding: padding
-  }, otherProps), /*#__PURE__*/_react["default"].createElement(_typography.Typography, {
+  }, otherProps), /*#__PURE__*/_react["default"].createElement(_styles.AdvertiseTypography, {
     margin: "0 12px",
     padding: "6px 18px",
-    style: _objectSpread(_objectSpread({}, styles.border), commentStyle)
-  }, comment), /*#__PURE__*/_react["default"].createElement(_typography.Typography, {
+    style: _objectSpread({}, commentStyle)
+  }, comment), /*#__PURE__*/_react["default"].createElement(_styles.AdvertiseTypography, {
     margin: "0px 12px",
     padding: "6px 18px",
     variant: "caption",
-    style: _objectSpread(_objectSpread({}, styles.border), authorStyle)
+    style: _objectSpread({}, authorStyle)
   }, author));
 };
 var _default = exports["default"] = Advertise;

package/core/data-display/advertise/styles.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const AdvertiseTypography: 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("../../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("../../types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Paper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("@/core/surfaces/paper").PaperProps, never>> & Omit<({ children, style, padding, margin, ...otherProps }: import("@/core/surfaces/paper").PaperProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/core/data-display/advertise/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Paper = exports.AdvertiseTypography = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _typography = _interopRequireDefault(require("../typography"));
+var _paper = _interopRequireDefault(require("../../surfaces/paper"));
+var _theme = require("../../../theme");
+var _templateObject, _templateObject2;
+var grays = _theme.theme.colors.grays;
+var AdvertiseTypography = exports.AdvertiseTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-left: 1px solid ", ";\n    }\n"])), grays.g5);
+var Paper = exports.Paper = (0, _styledComponents["default"])(_paper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n"])));

package/core/data-display/avatar/avatar.stories.d.ts

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

package/core/data-display/avatar/index.d.ts

@@ -3,9 +3,6 @@ import type { ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
 import type { AvatarProps as MuiAvatarProps } from '@material-ui/core';
 export interface AvatarProps extends DefaultProps, MuiAvatarProps {
-    /**
-     * If true, the avatar will have a primary color background.
-     */
     primary?: boolean;
     children?: ReactNode;
     'data-testid'?: string;

package/core/data-display/badge/badge.stories.d.ts

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

package/core/data-display/badge/index.d.ts

@@ -4,13 +4,7 @@ import type { DefaultProps } from '../../types';
 import type { BadgeProps as MuiBadgeProps } from '@material-ui/core/Badge';
 export interface BadgeProps extends DefaultProps, MuiBadgeProps {
     children: ReactNode;
-    /**
-     * The number to display in the badge.
-     */
     counter: number | string;
-    /**
-     * The position of the badge.
-     */
     position?: {
         top?: number;
         bottom?: number;
@@ -18,5 +12,5 @@ export interface BadgeProps extends DefaultProps, MuiBadgeProps {
         right?: number;
     };
 }
-export declare const Badge: (props: BadgeProps) => React.JSX.Element;
+declare const Badge: (props: BadgeProps) => React.JSX.Element;
 export default Badge;

package/core/data-display/badge/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Badge = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -20,7 +20,7 @@ var useBadgeStyles = function useBadgeStyles(position) {
   });
   return getStyles();
 };
-var Badge = exports.Badge = function Badge(props) {
+var Badge = function Badge(props) {
   var children = props.children,
     counter = props.counter,
     padding = props.padding,

package/core/data-display/chapter/chapter.stories.d.ts

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

package/core/data-display/chapter/index.d.ts

@@ -3,27 +3,12 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
 import type { TypographyProps } from '@material-ui/core/Typography';
 export interface LineProps extends DefaultProps {
-    /**
-     * If true, the avatar will have a primary color background.
-     */
     primary?: boolean;
-    /**
-     * The width of the component container.
-     */
     width?: string;
-    /**
-     * The variant to use.
-     */
     variant?: TypographyProps['variant'];
-    /**
-     * The style applied to the children Typography component.
-     */
     childrenStyle?: CSSProperties;
-    /**
-     * The children of the component.
-     */
     children?: ReactNode;
     'data-testid'?: string;
 }
-export declare const Chapter: ({ padding, margin, style, childrenStyle, children, variant, primary, ...otherProps }: LineProps) => React.JSX.Element;
+declare const Chapter: ({ padding, margin, style, childrenStyle, children, variant, primary, ...otherProps }: LineProps) => React.JSX.Element;
 export default Chapter;

package/core/data-display/chapter/index.js

@@ -4,25 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Chapter = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports["default"] = void 0;
 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 _styledComponents = _interopRequireDefault(require("styled-components"));
-var _typography = require("../typography");
-var _theme = require("../../../theme");
+var _typography = _interopRequireDefault(require("../typography"));
+var _styles = require("./styles");
 var _excluded = ["padding", "margin", "style", "childrenStyle", "children", "variant", "primary"];
-var _templateObject, _templateObject2;
 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 grays = _theme.theme.colors.grays;
-var StyledLine = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 1px;\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: ", ";\n"])), function (props) {
-  return props.primary ? grays.g4 : grays.g6;
-});
-var Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n\n    & div:first-child {\n        margin-right: 10px;\n    }\n\n    & div:last-child {\n        margin-left: 10px;\n    }\n"])));
-var Chapter = exports.Chapter = function Chapter(_ref) {
+var Chapter = function Chapter(_ref) {
   var padding = _ref.padding,
     margin = _ref.margin,
     style = _ref.style,
@@ -31,21 +22,21 @@ var Chapter = exports.Chapter = function Chapter(_ref) {
     variant = _ref.variant,
     primary = _ref.primary,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var Line = function Line(props) {
-    return /*#__PURE__*/_react["default"].createElement(StyledLine, (0, _extends2["default"])({}, props, {
-      style: _objectSpread({
-        padding: padding,
-        margin: margin
-      }, style)
-    }));
-  };
-  return /*#__PURE__*/_react["default"].createElement(Container, otherProps, /*#__PURE__*/_react["default"].createElement(Line, {
-    primary: primary
-  }), /*#__PURE__*/_react["default"].createElement(_typography.Typography, {
+  return /*#__PURE__*/_react["default"].createElement(_styles.Container, otherProps, /*#__PURE__*/_react["default"].createElement(_styles.StyledLine, {
+    primary: primary,
+    style: _objectSpread({
+      padding: padding,
+      margin: margin
+    }, style)
+  }), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
     variant: variant,
     style: _objectSpread({}, childrenStyle)
-  }, children), /*#__PURE__*/_react["default"].createElement(Line, {
-    primary: primary
+  }, children), /*#__PURE__*/_react["default"].createElement(_styles.StyledLine, {
+    primary: primary,
+    style: _objectSpread({
+      padding: padding,
+      margin: margin
+    }, style)
   }));
 };
 var _default = exports["default"] = Chapter;

package/core/data-display/chapter/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { LineProps } from '.';
+export declare const StyledLine: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LineProps>>;
+export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/core/data-display/chapter/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledLine = exports.Container = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _theme = require("../../../theme");
+var _templateObject, _templateObject2;
+var grays = _theme.theme.colors.grays;
+var StyledLine = exports.StyledLine = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 1px;\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: ", ";\n"])), function (props) {
+  return props.primary ? grays.g4 : grays.g6;
+});
+var Container = exports.Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n\n    & div:first-child {\n        margin-right: 10px;\n    }\n\n    & div:last-child {\n        margin-left: 10px;\n    }\n"])));

package/core/data-display/chip/chip.stories.d.ts

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

package/core/data-display/chip/index.d.ts

@@ -2,10 +2,7 @@ import React from 'react';
 import type { DefaultProps } from '../../types';
 import type { ChipProps as MuiChipProps } from '@material-ui/core';
 export interface IChipProps extends MuiChipProps, Omit<DefaultProps, 'children'> {
-    /**
-     * If `true`, the chip will be squared.
-     */
     square?: boolean;
 }
-export declare const Chip: ({ square, padding, margin, style, ...otherProps }: IChipProps) => React.JSX.Element;
+declare const Chip: ({ square, padding, margin, style, ...otherProps }: IChipProps) => React.JSX.Element;
 export default Chip;

package/core/data-display/chip/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Chip = 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"));
@@ -22,7 +22,7 @@ var useStyles = (0, _styles.makeStyles)({
     borderRadius: '2px'
   }
 });
-var Chip = exports.Chip = function Chip(_ref) {
+var Chip = function Chip(_ref) {
   var square = _ref.square,
     padding = _ref.padding,
     margin = _ref.margin,

package/core/data-display/data-table/data-table-action.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import React from 'react';
+import type { ReactNode } from 'react';
 export type DataTableActionProps = {
     label: string;
     children: ReactNode;

package/core/data-display/data-table/data-table-field.d.ts

@@ -19,4 +19,4 @@ interface ITable<D extends Record<string, unknown>> {
     };
 }
 export declare const DataTableField: <D extends Record<string, unknown>>(props: ITable<D>) => React.JSX.Element;
-export {};
+export default DataTableField;

package/core/data-display/data-table/data-table-field.js

@@ -4,18 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DataTableField = void 0;
+exports["default"] = exports.DataTableField = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ = require("../../..");
-var _templateObject, _templateObject2; // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+var _styles = require("./styles");
 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 TableCellRows = (0, _styledComponents["default"])(_material.TableCell)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 400px;\n        height: 60px;\n        padding: 0 10px;\n    }\n"])));
-var RowTable = (0, _styledComponents["default"])(_material.TableRow)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    cursor: pointer;\n\n    &:hover {\n        background: -moz-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: -webkit-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: linear-gradient(\n            to right,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n    }\n\n    &.no-hover {\n        background: none;\n    }\n"])));
+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; } // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 var DataTableField = exports.DataTableField = function DataTableField(props) {
   var rows = props.rows,
     header = props.header,
@@ -76,8 +72,7 @@ var DataTableField = exports.DataTableField = function DataTableField(props) {
       var _checkboxProps$checkR2;
       var columns = header.map(function (column, i) {
         if (Object.keys(row).includes(column.field)) {
-          var _checkboxProps$checkR;
-          return /*#__PURE__*/_react["default"].createElement(TableCellRows, {
+          return /*#__PURE__*/_react["default"].createElement(_styles.TableCellRows, {
             key: i,
             align: "center"
           }, column.editable && checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.checkRow && checkboxProps.checkRow[index] ? /*#__PURE__*/_react["default"].createElement(_.TextField, {
@@ -91,11 +86,17 @@ var DataTableField = exports.DataTableField = function DataTableField(props) {
             onChange: function onChange(event) {
               return handleFieldChange(event, column.field, index, setRows);
             }
-          }) : /*#__PURE__*/_react["default"].createElement("span", null, column.editable ? checkboxProps !== null && checkboxProps !== void 0 && (_checkboxProps$checkR = checkboxProps.checkRow) !== null && _checkboxProps$checkR !== void 0 && _checkboxProps$checkR[index] ? row[column.field] : '' : row[column.field]));
+          }) : /*#__PURE__*/_react["default"].createElement(_styles.FieldWrapper, null, function () {
+            if (column.editable) {
+              var _checkboxProps$checkR;
+              return checkboxProps !== null && checkboxProps !== void 0 && (_checkboxProps$checkR = checkboxProps.checkRow) !== null && _checkboxProps$checkR !== void 0 && _checkboxProps$checkR[index] ? row[column.field] : '';
+            }
+            return row[column.field];
+          }()));
         }
         return;
       });
-      return /*#__PURE__*/_react["default"].createElement(RowTable, {
+      return /*#__PURE__*/_react["default"].createElement(_styles.RowTable, {
         key: index,
         className: checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.checkRow && checkboxProps.checkRow[index] ? 'no-hover' : '',
         onClick: function onClick(event) {
@@ -112,7 +113,9 @@ var DataTableField = exports.DataTableField = function DataTableField(props) {
       })), columns);
     });
   };
-  return /*#__PURE__*/_react["default"].createElement(_material.Table, null, /*#__PURE__*/_react["default"].createElement(_material.TableHead, null, checkbox && /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
+  return /*#__PURE__*/_react["default"].createElement(_material.Table, {
+    "data-testid": "data-table-field"
+  }, /*#__PURE__*/_react["default"].createElement(_material.TableHead, null, checkbox && /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
     padding: "checkbox"
   }, /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
     color: "primary",
@@ -128,4 +131,5 @@ var DataTableField = exports.DataTableField = function DataTableField(props) {
       align: "center"
     }, item.title);
   })), /*#__PURE__*/_react["default"].createElement(_material.TableBody, null, tableBody(rows, header)));
-};
+};
+var _default = exports["default"] = DataTableField;

package/core/data-display/data-table/data-table-field.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/core/data-display/data-table/data-table-pagination-actions.js

@@ -6,12 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.makeDataTablePaginationActions = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _iconButton = require("../../inputs/icon-button");
+var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
+var _styles = require("./styles");
 var _icons = require("../../../icons");
-var PAGINATION_WRAPPER_STYLE = {
-  display: 'flex',
-  marginLeft: '12px'
-};
 var makeDataTablePaginationActions = exports.makeDataTablePaginationActions = function makeDataTablePaginationActions(_ref) {
   var showFirstButton = _ref.showFirstButton,
     showLastButton = _ref.showLastButton,
@@ -34,21 +31,19 @@ var makeDataTablePaginationActions = exports.makeDataTablePaginationActions = fu
     var handleLastPageButtonClick = function handleLastPageButtonClick(event) {
       onPageChange(event, Math.max(0, totalPages));
     };
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      style: PAGINATION_WRAPPER_STYLE
-    }, showFirstButton && /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, {
+    return /*#__PURE__*/_react["default"].createElement(_styles.PaginationWrapper, null, showFirstButton && /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
       disabled: page === 0 || clickable,
       "aria-label": "first page",
       onClick: handleFirstPageButtonClick
-    }, /*#__PURE__*/_react["default"].createElement(_icons.FirstPage, null)), /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, {
+    }, /*#__PURE__*/_react["default"].createElement(_icons.FirstPage, null)), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
       disabled: page === 0 || clickable,
       "aria-label": "previous page",
       onClick: handleBackButtonClick
-    }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowLeft, null)), /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, {
+    }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowLeft, null)), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
       disabled: page >= totalPages || clickable,
       "aria-label": "next page",
       onClick: handleNextButtonClick
-    }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowRight, null)), showLastButton && /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, {
+    }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowRight, null)), showLastButton && /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
       disabled: page >= totalPages || clickable,
       "aria-label": "last page",
       onClick: handleLastPageButtonClick

package/core/data-display/data-table/data-table-query-paginated.d.ts

@@ -2,83 +2,24 @@ import React from 'react';
 import type { MouseEvent, MutableRefObject, CSSProperties, ReactNode } from 'react';
 import type { ColumnSpec, Data, DataTableController, Errors, PaginationOptions, RowViewComponent, StackView } from './types';
 export type DataTableProps<D extends Data, V extends StackView = Record<string, unknown>> = {
-    /**
-     * The data to be shown in the table
-     */
     data: D[];
-    /**
-     * The total elements present in query
-     */
     totalElements: number;
-    /**
-     * Change current page handler
-     */
     handleChangePage: (page: number) => void;
-    /**
-     * Per page value
-     */
     perPage: number;
-    /**
-     * Change page handler
-     */
     handleChangePerPage: (value: number) => void;
-    /**
-     * Actual page
-     */
     page: number;
-    /**
-     * Errors as an object where the key is the ID of the row and the value is
-     * a Set with the fields of error
-     */
     errors?: Errors<D>;
-    /**
-     * The columns specification
-     */
     columns: ColumnSpec<D>[];
-    /**
-     * Hide the table header
-     */
     noHeader?: boolean;
-    /**
-     * Component to show when there are no data
-     */
     componentForEmpty?: ReactNode;
-    /**
-     * Custom style to be applied to the table body
-     */
     bodyStyle?: CSSProperties;
-    /**
-     * Custom style to be applied to the table head
-     */
     headStyle?: CSSProperties;
-    /**
-     * Custom style to be applied to all rows of the table body
-     */
     bodyRowStyle?: CSSProperties;
-    /**
-     * Custom style to be applied to all rows of the table head
-     */
     headRowStyle?: CSSProperties;
-    /**
-     * Height of a hidden row, when you need to have some blank space in case
-     * you fill in the pagination.rowsPerPage
-     */
     hiddenRowHeight?: number;
-    /**
-     * The pagination configuration
-     */
     pagination?: Partial<PaginationOptions>;
-    /**
-     * A React MutableRefObject for the row controller
-     */
     controllerRef?: MutableRefObject<DataTableController<D, V> | undefined>;
-    /**
-     * Initialize with hidden values
-     */
     hidden?: boolean;
-    /**
-     * Custom rowViews used as a Stac
-     */
     rowViews?: Record<keyof V, RowViewComponent<D>>;
     onRowClick?: (event: MouseEvent<HTMLTableRowElement>, rowData: D) => void;
 };

package/core/data-display/data-table/data-table-query-paginated.js

@@ -124,7 +124,7 @@ var DataTableQueryPaginated = exports.DataTableQueryPaginated = function DataTab
     if (controllerRef) {
       controllerRef.current = nextController;
     }
-  }, [setRowState, pushRowView, popRowView, getRowState, controllerRef]);
+  }, [setRowState, pushRowView, popRowView, getRowState, controllerRef, handleChangePerPage]);
   var rowsList = (0, _react.useMemo)(function () {
     return rows.map(function (row) {
       var rowState = getRowState(row.id);