flipper-ui 0.31.1 → 0.31.3

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

@@ -17,5 +17,5 @@ export interface SidebarProps extends DefaultProps {
     ButtonProps?: ButtonProps;
     onToggle: () => void;
 }
-export declare const Sidebar: ({ id, anchor, className, color, docked, expanded, margin, maxWidth, minWidth, top, open, padding, paperClasses, showButton, style, variant, ButtonProps, onToggle, children, name, ...otherProps }: SidebarProps) => React.JSX.Element;
+declare const Sidebar: ({ id, anchor, className, color, docked, expanded, margin, maxWidth, minWidth, top, open, padding, paperClasses, showButton, style, variant, ButtonProps, onToggle, children, name, ...otherProps }: SidebarProps) => React.JSX.Element;
 export default Sidebar;

package/core/navigation/sidebar/index.js

@@ -4,19 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Sidebar = void 0;
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
 var _styles = require("@material-ui/core/styles");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _button = require("../../inputs/button");
+var _button = _interopRequireDefault(require("../../inputs/button"));
+var _styles2 = require("./styles");
 var _icons = require("../../../icons");
 var _excluded = ["id", "anchor", "className", "color", "docked", "expanded", "margin", "maxWidth", "minWidth", "top", "open", "padding", "paperClasses", "showButton", "style", "variant", "ButtonProps", "onToggle", "children", "name"];
-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 useStyles = (0, _styles.makeStyles)(function (theme) {
@@ -60,10 +58,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     }
   });
 });
-var Action = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex-direction: ", ";\n    display: flex;\n    padding: 4px;\n"])), function (props) {
-  return props.anchor === 'left' ? 'row-reverse' : 'row';
-});
-var Sidebar = exports.Sidebar = function Sidebar(_ref) {
+var Sidebar = function Sidebar(_ref) {
   var id = _ref.id,
     _ref$anchor = _ref.anchor,
     anchor = _ref$anchor === void 0 ? 'left' : _ref$anchor,
@@ -97,9 +92,9 @@ var Sidebar = exports.Sidebar = function Sidebar(_ref) {
   var classes = useStyles();
   var renderAction = function renderAction() {
     var iconToLeft = anchor === 'left' && expanded || anchor === 'right' && !expanded;
-    return /*#__PURE__*/_react["default"].createElement(Action, {
+    return /*#__PURE__*/_react["default"].createElement(_styles2.Action, {
       anchor: anchor
-    }, /*#__PURE__*/_react["default"].createElement(_button.Button, (0, _extends2["default"])({
+    }, /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _extends2["default"])({
       name: "button-".concat(name || 'sidebar'),
       color: color,
       "data-testid": "sidebar-button",

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IAction {
+    anchor?: 'top' | 'left' | 'bottom' | 'right';
+    minWidth?: number | string;
+}
+export declare const Action: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAction>>;
+export {};

package/core/navigation/sidebar/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Action = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var Action = exports.Action = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex-direction: ", ";\n    display: flex;\n    padding: 4px;\n"])), function (props) {
+  return props.anchor === 'left' ? 'row-reverse' : 'row';
+});

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

@@ -10,5 +10,5 @@ type TStep = {
     label: JSX.Element | string;
     icon: JSX.Element | ((active?: boolean) => JSX.Element);
 };
-export declare const Stepper: ({ active, bottomLabel, steps, padding, margin, style, ...otherProps }: StepperProps) => React.JSX.Element;
+declare const Stepper: ({ active, bottomLabel, steps, padding, margin, style, ...otherProps }: StepperProps) => React.JSX.Element;
 export default Stepper;

package/core/navigation/stepper/index.js

@@ -5,7 +5,7 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Stepper = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -33,7 +33,7 @@ var StepIcon = function StepIcon(_ref) {
     color: active ? 'primary' : 'disabled'
   });
 };
-var Stepper = exports.Stepper = function Stepper(_ref2) {
+var Stepper = function Stepper(_ref2) {
   var active = _ref2.active,
     bottomLabel = _ref2.bottomLabel,
     steps = _ref2.steps,

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

@@ -19,5 +19,5 @@ export interface IClasses {
         indicator: string;
     };
 }
-export declare const Tabs: ({ children, centered, padding, style, margin, variant, indicatorColor, ...otherProps }: TabsProps & IClasses) => React.JSX.Element;
+declare const Tabs: ({ children, centered, padding, style, margin, variant, indicatorColor, ...otherProps }: TabsProps & IClasses) => React.JSX.Element;
 export default Tabs;

package/core/navigation/tabs/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Tabs = 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"));
@@ -13,7 +13,7 @@ var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
 var _excluded = ["children", "centered", "padding", "style", "margin", "variant", "indicatorColor"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Tabs = exports.Tabs = function Tabs(_ref) {
+var Tabs = function Tabs(_ref) {
   var children = _ref.children,
     _ref$centered = _ref.centered,
     centered = _ref$centered === void 0 ? true : _ref$centered,

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

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

package/core/surfaces/box/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Box = 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"));
@@ -13,7 +13,7 @@ var _paper = require("../paper");
 var _excluded = ["children", "margin", "padding", "style", "minHeight"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Box = exports.Box = function Box(_ref) {
+var Box = function Box(_ref) {
   var children = _ref.children,
     margin = _ref.margin,
     _ref$padding = _ref.padding,

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-export declare const Container: ({ children, padding, margin, style, ...otherProps }: DefaultProps) => React.JSX.Element;
+declare const Container: ({ children, padding, margin, style, ...otherProps }: DefaultProps) => React.JSX.Element;
 export default Container;

package/core/surfaces/container/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Container = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -13,7 +13,7 @@ var ContainerStyles = {
   display: 'flex',
   flex: 1
 };
-var Container = exports.Container = function Container(_ref) {
+var Container = function Container(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
     margin = _ref.margin,

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-export declare const Content: ({ children, padding, margin, style, ...otherProps }: DefaultProps) => React.JSX.Element;
+declare const Content: ({ children, padding, margin, style, ...otherProps }: DefaultProps) => React.JSX.Element;
 export default Content;

package/core/surfaces/content/index.js

@@ -4,28 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Content = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styles = require("./styles");
 var _excluded = ["children", "padding", "margin", "style"];
-var _templateObject;
-var StyledContent = _styledComponents["default"].main(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n    transition: all 500ms ease;\n"])));
-var ContainerStyles = {
-  flex: 1,
-  transition: 'all 500ms ease'
-};
-var Content = exports.Content = function Content(_ref) {
+var Content = function Content(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
     margin = _ref.margin,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var componentStyle = Object.assign({}, ContainerStyles, padding, margin, style);
-  return /*#__PURE__*/_react["default"].createElement(StyledContent, (0, _extends2["default"])({}, otherProps, {
+  var componentStyle = Object.assign({}, _styles.ContainerStyles, padding, margin, style);
+  return /*#__PURE__*/_react["default"].createElement(_styles.StyledContent, (0, _extends2["default"])({}, otherProps, {
     style: componentStyle
   }), children);
 };

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

@@ -0,0 +1,3 @@
+import type { CSSProperties } from 'react';
+export declare const StyledContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
+export declare const ContainerStyles: CSSProperties;

package/core/surfaces/content/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledContent = exports.ContainerStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var StyledContent = exports.StyledContent = _styledComponents["default"].main(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n    transition: all 500ms ease;\n"])));
+var ContainerStyles = exports.ContainerStyles = {
+  flex: 1,
+  transition: 'all 500ms ease'
+};

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

@@ -25,5 +25,5 @@ export interface ExpansionPanelProps extends Omit<PaperProps, 'onChange'> {
     onChange?: (event?: ChangeEvent<Record<string, unknown>>, expanded?: boolean) => void;
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
-export declare const ExpansionPanel: ({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, editStyle, onHelperClick, onEditClick, onSaveClick, onClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: ExpansionPanelProps) => React.JSX.Element;
+declare const ExpansionPanel: ({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, editStyle, onHelperClick, onEditClick, onSaveClick, onClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: ExpansionPanelProps) => React.JSX.Element;
 export default ExpansionPanel;

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

@@ -4,24 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ExpansionPanel = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
 var _AccordionActions = _interopRequireDefault(require("@material-ui/core/AccordionActions"));
 var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
 var _AccordionSummary = _interopRequireDefault(require("@material-ui/core/AccordionSummary"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _textField = require("../../inputs/text-field");
+var _styles = require("./styles");
 var _excluded = ["actions", "details", "expandIcon", "margin", "padding", "style", "summary", "summaryStyle", "detailsStyle", "actionsStyle", "editStyle", "onHelperClick", "onEditClick", "onSaveClick", "onClick", "helperIcon", "editable", "editing", "headerProps", "helperButtonPosition"];
-var _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 ExpansionPanelHeaderWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
-var ExpansionPanel = exports.ExpansionPanel = function ExpansionPanel(_ref) {
+var ExpansionPanel = function ExpansionPanel(_ref) {
   var actions = _ref.actions,
     details = _ref.details,
     expandIcon = _ref.expandIcon,
@@ -95,7 +92,7 @@ var ExpansionPanel = exports.ExpansionPanel = function ExpansionPanel(_ref) {
     expandIcon: expandIcon,
     style: summaryStyle,
     onClick: onClick
-  }, /*#__PURE__*/_react["default"].createElement(ExpansionPanelHeaderWrapper, headerProps, helperButtonPosition === 'left' && renderHelper, summary, renderEdit, helperButtonPosition === 'right' && renderHelper)), details && /*#__PURE__*/_react["default"].createElement(_AccordionDetails["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_styles.ExpansionPanelHeaderWrapper, headerProps, helperButtonPosition === 'left' && renderHelper, summary, renderEdit, helperButtonPosition === 'right' && renderHelper)), details && /*#__PURE__*/_react["default"].createElement(_AccordionDetails["default"], {
     style: detailsStyle
   }, details), actions && /*#__PURE__*/_react["default"].createElement(_AccordionActions["default"], {
     style: actionsStyle

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpansionPanelHeaderWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var ExpansionPanelHeaderWrapper = exports.ExpansionPanelHeaderWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));

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

@@ -5,5 +5,5 @@ export interface HeaderProps extends Omit<PaperProps, 'classes'>, AppBarProps {
     position?: 'absolute' | 'fixed' | 'static' | 'sticky';
     color?: 'default' | 'inherit' | 'primary' | 'secondary';
 }
-export declare const Header: ({ children, padding, margin, style, elevation, ...otherProps }: HeaderProps) => React.JSX.Element;
+declare const Header: ({ children, padding, margin, style, elevation, ...otherProps }: HeaderProps) => React.JSX.Element;
 export default Header;

package/core/surfaces/header/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Header = 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"));
@@ -14,7 +14,7 @@ var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
 var _excluded = ["children", "padding", "margin", "style", "elevation"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Header = exports.Header = function Header(_ref) {
+var Header = function Header(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
     margin = _ref.margin,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { CSSProperties, ChangeEvent, HTMLAttributes } from 'react';
-import type { Typography } from '@/core/data-display/typography';
+import type Typography from '@/core/data-display/typography';
 import type { LinearProgress, AccordionDetails as MuiAccordionDetails } from '@material-ui/core';
 /**
  * Props for the StepCard component
@@ -237,5 +237,5 @@ export interface IStepCardProps {
  *   defaultExpanded={false}
  * />
  */
-export declare const StepCard: ({ expanded, loading, percentage, time, steps, remainingSteps, title, titleProps, subTitle, image, showBottomPercentage, expandable, showIcon, summary, summaryProps, expansionPanelDetailsProps, linearProgressBarProps, summaryLinearProgressBarProps, rootProps, onStepUrlClick, fullWidth, padding, margin, showSubTitleSkeleton, onChange }: IStepCardProps) => React.JSX.Element;
+declare const StepCard: ({ expanded, loading, percentage, time, steps, remainingSteps, title, titleProps, subTitle, image, showBottomPercentage, expandable, showIcon, summary, summaryProps, expansionPanelDetailsProps, linearProgressBarProps, summaryLinearProgressBarProps, rootProps, onStepUrlClick, fullWidth, padding, margin, showSubTitleSkeleton, onChange }: IStepCardProps) => React.JSX.Element;
 export default StepCard;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.StepCard = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
@@ -51,7 +51,7 @@ var _styles = require("./styles");
  *   defaultExpanded={false}
  * />
  */
-var StepCard = exports.StepCard = function StepCard(_ref) {
+var StepCard = function StepCard(_ref) {
   var expanded = _ref.expanded,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,

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

@@ -9,55 +9,54 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _List = _interopRequireDefault(require("@material-ui/core/List"));
 var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
-var _typography = require("../../data-display/typography");
-var _iconButton = require("../../inputs/icon-button");
-var _icons = require("../../../icons");
+var _typography = _interopRequireDefault(require("../../data-display/typography"));
+var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 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_FONT_COLOR = grays.g2;
+var StepsList = function StepsList(_ref) {
+  var steps = _ref.steps,
+    onStepUrlClick = _ref.onStepUrlClick;
+  return /*#__PURE__*/_react["default"].createElement(_List["default"], null, (steps || []).map(function (step, index) {
+    var handleOnClickStepUrl = function handleOnClickStepUrl() {
+      if (onStepUrlClick && step.url) {
+        onStepUrlClick(step.url);
+      }
+    };
+    return /*#__PURE__*/_react["default"].createElement(_styles.ListItemContainer, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
+      style: {
+        color: step.done ? feedback.success : grays.g3
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+      variant: "body1",
+      style: {
+        color: grays.g2,
+        fontWeight: 600
+      }
+    }, step.title), step.url && onStepUrlClick && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+      "data-testid": "step-card-button-".concat(index),
+      style: {
+        backgroundColor: 'unset'
+      },
+      onClick: handleOnClickStepUrl
+    }, /*#__PURE__*/_react["default"].createElement(_icons.Help, {
+      fontSize: "small",
+      style: {
+        margin: '0px'
+      }
+    }))));
+  }));
+};
 var StepCardDetails = exports.StepCardDetails = function StepCardDetails(props) {
   var steps = props.steps,
     onStepUrlClick = props.onStepUrlClick,
     image = props.image,
     expansionPanelDetailsProps = props.expansionPanelDetailsProps;
-  var StepsList = function StepsList() {
-    return /*#__PURE__*/_react["default"].createElement(_List["default"], null, (steps || []).map(function (step, index) {
-      var handleOnClickStepUrl = function handleOnClickStepUrl() {
-        if (onStepUrlClick && step.url) {
-          onStepUrlClick(step.url);
-        }
-      };
-      return /*#__PURE__*/_react["default"].createElement(_styles.ListItemContainer, {
-        key: index
-      }, /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
-        style: {
-          color: step.done ? DONE_COLOR : UNDONE_COLOR
-        }
-      }), /*#__PURE__*/_react["default"].createElement(_typography.Typography, {
-        variant: "body1",
-        style: {
-          color: UNDONE_FONT_COLOR,
-          fontWeight: 600
-        }
-      }, step.title), step.url && onStepUrlClick && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, {
-        "data-testid": "step-card-button-".concat(index),
-        style: {
-          backgroundColor: 'unset'
-        },
-        onClick: handleOnClickStepUrl
-      }, /*#__PURE__*/_react["default"].createElement(_icons.Help, {
-        fontSize: "small",
-        style: {
-          margin: '0px'
-        }
-      }))));
-    }));
-  };
   return /*#__PURE__*/_react["default"].createElement(_AccordionDetails["default"], (0, _extends2["default"])({
     style: {
       display: 'flex',
@@ -65,7 +64,10 @@ var StepCardDetails = exports.StepCardDetails = function StepCardDetails(props)
     }
   }, expansionPanelDetailsProps), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "start"
-  }, /*#__PURE__*/_react["default"].createElement(StepsList, null)), image && /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
+  }, /*#__PURE__*/_react["default"].createElement(StepsList, {
+    steps: steps,
+    onStepUrlClick: onStepUrlClick
+  })), image && /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "end"
   }, typeof image === 'string' ? /*#__PURE__*/_react["default"].createElement("img", {
     src: image,