flipper-ui 0.31.1 → 0.31.3

package/core/surfaces/step-card/step-card-panel.js

@@ -10,17 +10,13 @@ var _react = _interopRequireDefault(require("react"));
 var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
 var _AccordionSummary = _interopRequireDefault(require("@material-ui/core/AccordionSummary"));
 var _sprintfJs = require("sprintf-js");
-var _typography = require("../../data-display/typography");
-var _icons = require("../../../icons");
+var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _styles = require("./styles");
+var _icons = require("../../../icons");
 var _theme = require("../../../theme");
 var _theme$colors = _theme.theme.colors,
   feedback = _theme$colors.feedback,
   grays = _theme$colors.grays;
-var DONE_COLOR = feedback.success;
-var UNDONE_COLOR = grays.g3;
-var UNDONE_TITLE_COLOR = grays.g1;
-var UNDONE_PROGRESS_COLOR = grays.g5;
 var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
   var title = props.title,
     summary = props.summary,
@@ -37,91 +33,6 @@ var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
     titleProps = props.titleProps,
     fullWidth = props.fullWidth,
     padding = props.padding;
-  var TitleIcon = function TitleIcon() {
-    return /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
-      "data-testid": "step-card-title-icon",
-      style: {
-        fontSize: 40,
-        color: percentage === 100 ? DONE_COLOR : UNDONE_COLOR
-      }
-    });
-  };
-  var Title = function Title() {
-    return /*#__PURE__*/_react["default"].createElement(_typography.Typography, (0, _extends2["default"])({
-      variant: "h6",
-      style: {
-        color: UNDONE_TITLE_COLOR,
-        fontSize: 24,
-        textAlign: 'center'
-      }
-    }, titleProps), title);
-  };
-  var SubTitle = function SubTitle() {
-    return /*#__PURE__*/_react["default"].createElement(_typography.Typography, (0, _extends2["default"])({
-      variant: "h6",
-      style: {
-        color: UNDONE_COLOR,
-        textAlign: 'center'
-      }
-    }, titleProps), subTitle);
-  };
-  var TitleColumn = function TitleColumn() {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showIcon && /*#__PURE__*/_react["default"].createElement(TitleIcon, null), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(Title, null), subTitle && /*#__PURE__*/_react["default"].createElement(SubTitle, null)));
-  };
-  var Summary = function Summary() {
-    return /*#__PURE__*/_react["default"].createElement(_AccordionSummary["default"], {
-      style: {
-        textAlign: 'center'
-      },
-      expandIcon: /*#__PURE__*/_react["default"].createElement(_icons.ExpandMore, {
-        fontSize: "large"
-      })
-    }, /*#__PURE__*/_react["default"].createElement(_typography.Typography, (0, _extends2["default"])({
-      variant: "h6"
-    }, summaryProps), (0, _sprintfJs.sprintf)(summary, remainingSteps, time)));
-  };
-  var SummaryLinearProgress = function SummaryLinearProgress() {
-    return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
-      variant: "determinate",
-      value: percentage,
-      color: "primary",
-      classes: {
-        barColorPrimary: 'barColorPrimary'
-      },
-      style: {
-        borderRadius: 10,
-        height: '16px',
-        backgroundColor: UNDONE_PROGRESS_COLOR
-      }
-    }, summaryLinearProgressBarProps));
-  };
-  var NormalProgress = function NormalProgress() {
-    return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, {
-      "data-testid": "normal-progress"
-    }, /*#__PURE__*/_react["default"].createElement(_typography.Typography, (0, _extends2["default"])({
-      variant: "h6"
-    }, summaryProps), summary), /*#__PURE__*/_react["default"].createElement(_typography.Typography, {
-      variant: "subtitle2",
-      style: {
-        position: 'absolute',
-        right: 8
-      }
-    }, "".concat(percentage, "%")), /*#__PURE__*/_react["default"].createElement(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(SummaryLinearProgress, null)));
-  };
-  var BottomLineProgress = function BottomLineProgress() {
-    return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
-      variant: "determinate",
-      value: percentage,
-      color: "primary",
-      classes: {
-        barColorPrimary: 'barColorPrimary'
-      },
-      style: {
-        height: '16px',
-        backgroundColor: UNDONE_PROGRESS_COLOR
-      }
-    }, linearProgressBarProps));
-  };
   return /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
     padding: padding
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
@@ -129,10 +40,71 @@ var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
     minHeight: expandable ? '100px' : '100%'
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "start"
-  }, /*#__PURE__*/_react["default"].createElement(TitleColumn, null)), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
+  }, showIcon && /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
+    "data-testid": "step-card-title-icon",
+    style: {
+      fontSize: 40,
+      color: percentage === 100 ? feedback.success : grays.g3
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
+    variant: "h6",
+    style: {
+      color: grays.g1,
+      fontSize: 24,
+      textAlign: 'center'
+    }
+  }, titleProps), title), subTitle && /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
+    variant: "h6",
+    style: {
+      color: grays.g3,
+      textAlign: 'center'
+    }
+  }, titleProps), subTitle))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "end"
-  }, expandable ? /*#__PURE__*/_react["default"].createElement(Summary, null) : /*#__PURE__*/_react["default"].createElement(NormalProgress, null))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
+  }, expandable ? /*#__PURE__*/_react["default"].createElement(_AccordionSummary["default"], {
+    style: {
+      textAlign: 'center'
+    },
+    expandIcon: /*#__PURE__*/_react["default"].createElement(_icons.ExpandMore, {
+      fontSize: "large"
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
+    variant: "h6"
+  }, summaryProps), (0, _sprintfJs.sprintf)(summary, remainingSteps, time))) : /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, {
+    "data-testid": "normal-progress"
+  }, /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
+    variant: "h6"
+  }, summaryProps), summary), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+    variant: "subtitle2",
+    style: {
+      position: 'absolute',
+      right: 8
+    }
+  }, "".concat(percentage, "%")), /*#__PURE__*/_react["default"].createElement(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
+    variant: "determinate",
+    value: percentage,
+    color: "primary",
+    classes: {
+      barColorPrimary: 'barColorPrimary'
+    },
+    style: {
+      borderRadius: 10,
+      height: '16px',
+      backgroundColor: grays.g5
+    }
+  }, summaryLinearProgressBarProps)))))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
     fullWidth: fullWidth,
     minHeight: "15px"
-  }, /*#__PURE__*/_react["default"].createElement(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(BottomLineProgress, null))));
+  }, /*#__PURE__*/_react["default"].createElement(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
+    variant: "determinate",
+    value: percentage,
+    color: "primary",
+    classes: {
+      barColorPrimary: 'barColorPrimary'
+    },
+    style: {
+      height: '16px',
+      backgroundColor: grays.g5
+    }
+  }, linearProgressBarProps)))));
 };

package/core/surfaces/step-card/step-card-skeleton.js

@@ -18,31 +18,6 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
     padding = props.padding,
     margin = props.margin,
     fullWidth = props.fullWidth;
-  var TextSkeleton = function TextSkeleton() {
-    return /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
-      variant: "text",
-      style: {
-        minWidth: '400px'
-      },
-      height: 40
-    });
-  };
-  var NormalProgress = function NormalProgress() {
-    return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
-      variant: "text",
-      height: 40,
-      style: {
-        minWidth: '100px',
-        margin: '4px 0px'
-      }
-    }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
-      variant: "text"
-    })));
-  };
   return /*#__PURE__*/_react["default"].createElement(_styles.Container, {
     "data-testid": "skeleton-container",
     margin: margin,
@@ -58,9 +33,40 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
     variant: "circular",
     width: 40,
     height: 40
-  }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(TextSkeleton, null), subTitleSkeleton && /*#__PURE__*/_react["default"].createElement(TextSkeleton, null))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
+  }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
+    variant: "text",
+    style: {
+      minWidth: '400px'
+    },
+    height: 40
+  }), subTitleSkeleton && /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
+    variant: "text",
+    style: {
+      minWidth: '400px'
+    },
+    height: 40
+  }))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "end"
-  }, expandable ? /*#__PURE__*/_react["default"].createElement(TextSkeleton, null) : /*#__PURE__*/_react["default"].createElement(NormalProgress, null))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
+  }, expandable ? /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
+    variant: "text",
+    style: {
+      minWidth: '400px'
+    },
+    height: 40
+  }) : /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
+    variant: "text",
+    height: 40,
+    style: {
+      minWidth: '100px',
+      margin: '4px 0px'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
+    variant: "text"
+  }))))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
     minHeight: "15px",
     fullWidth: fullWidth
   }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {

package/core/surfaces/step-card/styles.js

@@ -10,6 +10,7 @@ var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var feedback = _theme.theme.colors.feedback;
 var Container = exports.Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    max-width: ", ";\n    ", "\n"])), function (props) {
   return props.fullWidth ? '100%' : '1100px';
 }, function (props) {
@@ -34,4 +35,4 @@ var StepCardColumn = exports.StepCardColumn = _styledComponents["default"].div(_
 var ListItemContainer = exports.ListItemContainer = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: 30px;\n    margin: 16px 0;\n\n    svg:first-child {\n        margin-right: 16px;\n    }\n"])));
 var TitleContainer = exports.TitleContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    h6:first-child {\n        padding-inline: 20px;\n    }\n\n    span {\n        margin-left: 20px;\n    }\n"])));
 var NormalProgressContainer = exports.NormalProgressContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n\n    h6:first-child {\n        margin-bottom: 8px;\n    }\n"])));
-var BarWrapper = exports.BarWrapper = (0, _styledComponents["default"])(_Box["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n\n    & .barColorPrimary {\n        background-color: ", ";\n    }\n"])), _theme.theme.colors.feedback.success);
+var BarWrapper = exports.BarWrapper = (0, _styledComponents["default"])(_Box["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n\n    & .barColorPrimary {\n        background-color: ", ";\n    }\n"])), feedback.success);

package/experimental/avatar/index.d.ts

@@ -1,5 +1,5 @@
-import type { CSSProperties, ReactNode } from 'react';
 import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 export interface IProps {
     /** The avatar name */
     name?: string;
@@ -10,5 +10,5 @@ export interface IProps {
     /** Custom styles */
     style?: CSSProperties;
 }
-export declare const Avatar: (props: IProps) => React.JSX.Element;
+declare const Avatar: (props: IProps) => React.JSX.Element;
 export default Avatar;

package/experimental/avatar/index.js

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Avatar = void 0;
+exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _take = _interopRequireDefault(require("ramda/es/take"));
 var _ = require("../..");
 var FIRST_LETTER = 1;
-var Avatar = exports.Avatar = function Avatar(props) {
+var Avatar = function Avatar(props) {
   var getChild = function getChild() {
     if (props.name) {
       return (0, _take["default"])(FIRST_LETTER, props.name.toUpperCase());

package/experimental/breadcrumbs/index.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import React from 'react';
+import type { ReactNode } from 'react';
 type Props = {
     /**
      * A mapping between the pathname and the friendly name
@@ -16,5 +16,5 @@ type Props = {
  * Render breadcrumbs for the provided pathname or the current
  * `window.location.pathname`.
  */
-export declare const Breadcrumbs: ({ pathname, homeId, pathMapping, linkWrapper }: Props) => React.JSX.Element;
+declare const Breadcrumbs: ({ pathname, homeId, pathMapping, linkWrapper }: Props) => React.JSX.Element;
 export default Breadcrumbs;

package/experimental/breadcrumbs/index.js

@@ -4,27 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Breadcrumbs = void 0;
+exports["default"] = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _addIndex = _interopRequireDefault(require("ramda/es/addIndex"));
 var _map = _interopRequireDefault(require("ramda/es/map"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _icons = require("../../icons");
 var _ = require("../..");
-var _theme = require("../../theme");
+var _styles = require("./styles");
+var _icons = require("../../icons");
 var imap = (0, _addIndex["default"])(_map["default"]);
-var LinkStyled = _styledComponents["default"].a({
-  textDecoration: 'none',
-  color: _theme.theme.colors.primary.main,
-  ':hover': {
-    textDecoration: 'underline'
-  }
-});
 var INDEX_CORRECTION = 1;
 var START = 1;
 var defaultLinkWrapper = function defaultLinkWrapper(link, label) {
-  return /*#__PURE__*/_react["default"].createElement(LinkStyled, {
+  return /*#__PURE__*/_react["default"].createElement(_styles.LinkStyled, {
     key: link,
     href: link
   }, label);
@@ -34,7 +26,7 @@ var defaultLinkWrapper = function defaultLinkWrapper(link, label) {
  * Render breadcrumbs for the provided pathname or the current
  * `window.location.pathname`.
  */
-var Breadcrumbs = exports.Breadcrumbs = function Breadcrumbs(_ref) {
+var Breadcrumbs = function Breadcrumbs(_ref) {
   var pathname = _ref.pathname,
     homeId = _ref.homeId,
     pathMapping = _ref.pathMapping,
@@ -49,12 +41,9 @@ var Breadcrumbs = exports.Breadcrumbs = function Breadcrumbs(_ref) {
   var links = imap(function (term, chunkIndex) {
     var validChunkWord = pathMapping[term];
     var link = '/' + allChunks.slice(START, chunkIndex + INDEX_CORRECTION).join('/');
-    var text = /*#__PURE__*/_react["default"].createElement(_.Typography, {
+    var text = /*#__PURE__*/_react["default"].createElement(_styles.TextTypography, {
       key: link,
-      color: "inherit",
-      style: {
-        display: 'flex'
-      }
+      color: "inherit"
     }, validChunkWord);
     var isLastChunk = chunkIndex === lastChunkIndex;
     return validChunkWord && (isLastChunk ? text : linkWrapper(link, text));

package/experimental/breadcrumbs/styles.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const LinkStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>;
+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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "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/breadcrumbs/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextTypography = exports.LinkStyled = 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 _theme = require("../../theme");
+var _templateObject;
+var LinkStyled = exports.LinkStyled = _styledComponents["default"].a({
+  textDecoration: 'none',
+  color: _theme.theme.colors.primary.main,
+  ':hover': {
+    textDecoration: 'underline'
+  }
+});
+var TextTypography = exports.TextTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        display: flex;\n    }\n"])));

package/experimental/button/index.js

@@ -6,15 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.AddButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _button = require("../../core/inputs/button");
+var _styles = require("./styles");
 var _icons = require("../../icons");
-var _templateObject;
-var ButtonStyled = (0, _styledComponents["default"])(_button.Button)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n"])));
 var AddButton = exports.AddButton = function AddButton(props) {
-  return /*#__PURE__*/_react["default"].createElement(ButtonStyled, (0, _extends2["default"])({}, props, {
+  return /*#__PURE__*/_react["default"].createElement(_styles.ButtonAdd, (0, _extends2["default"])({}, props, {
     variant: "dashed",
     color: "primary",
     id: 'add-' + props.name,

package/experimental/button/styles.d.ts

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

package/experimental/button/styles.js

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

package/experimental/card/index.d.ts

@@ -31,31 +31,5 @@ export interface IProps {
     onClickAdd?(): void;
     onToggleEdit?(): void;
 }
-export declare const Content: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<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?: 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<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | 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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "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?: 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<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | 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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("../../core/types").DefaultProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
-export declare const Card: (props: IProps) => React.JSX.Element;
+declare const Card: (props: IProps) => React.JSX.Element;
 export default Card;

package/experimental/card/index.js

@@ -4,27 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Title = exports.Content = exports.Card = 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 _icons = require("../../icons");
 var _ = require("../..");
+var _styles = require("./styles");
+var _icons = require("../../icons");
 var _excluded = ["id", "name", "onAddBtnLabel", "nested", "title", "action", "onToggleEdit", "editing", "children", "onClickAdd", "onAddProps", "onEditProps"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var Content = exports.Content = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n    justify-content: center;\n    display: flex;\n    flex-direction: column;\n    padding: 12px;\n"])));
-var Header = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
-var Title = exports.Title = (0, _styledComponents["default"])(_.Typography)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n"])));
-var EditButton = (0, _styledComponents["default"])(_.IconButton)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 36px;\n        height: 36px;\n    }\n"])));
-var NESTED_ELEVATION = 0;
-var paperStyle = {
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'column'
-};
-var Card = exports.Card = function Card(props) {
+var Card = function Card(props) {
   var id = props.id,
     name = props.name,
     onAddBtnLabel = props.onAddBtnLabel,
@@ -41,15 +29,15 @@ var Card = exports.Card = function Card(props) {
   return /*#__PURE__*/_react["default"].createElement(_.Paper, (0, _extends2["default"])({}, otherProps, {
     name: name,
     id: id,
-    style: paperStyle,
+    style: _styles.PAPER_PROPS,
     className: "showable",
-    elevation: nested ? NESTED_ELEVATION : undefined,
+    elevation: nested ? _styles.NESTED_ELEVATION : undefined,
     padding: nested ? '0' : '24px'
-  }), title && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Header, null, title && /*#__PURE__*/_react["default"].createElement(Title, {
+  }), title && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_styles.Header, null, title && /*#__PURE__*/_react["default"].createElement(_styles.Title, {
     name: name + '-title',
     variant: "h6",
     color: "primary"
-  }, title), action, onToggleEdit && /*#__PURE__*/_react["default"].createElement(EditButton, (0, _extends2["default"])({}, onEditProps, {
+  }, title), action, onToggleEdit && /*#__PURE__*/_react["default"].createElement(_styles.EditButton, (0, _extends2["default"])({}, onEditProps, {
     className: editing ? '' : 'showable-target',
     name: "".concat(editing ? 'cancel' : 'edit', "-").concat(name),
     margin: "-10px",