flipper-ui 0.27.2 → 0.29.0

package/core/{Drawer.js → navigation/drawer/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Drawer = 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"));
@@ -24,7 +24,7 @@ var getStyles = function getStyles(top, width) {
       drawerPaper: {
         top: 'inherit',
         width: 'inherit',
-        height: top ? "calc(100% - ".concat(top, "px)") : '100%'
+        height: "calc(100% - ".concat(top, "px)")
       }
     });
   });
@@ -50,5 +50,6 @@ var Drawer = function Drawer(props) {
     }, style)
   }), props.children);
 };
+exports.Drawer = Drawer;
 var _default = Drawer;
 exports["default"] = _default;

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

@@ -0,0 +1,9 @@
+import { DefaultProps } from '../../types';
+import { MenuProps as MuiMenuProps } from '@material-ui/core/Menu';
+export interface MenuProps extends DefaultProps, MuiMenuProps {
+    open: boolean;
+    anchorEl?: HTMLElement;
+    withWrapper?: boolean;
+}
+export declare const Menu: ({ children, padding, margin, style, withWrapper, ...otherProps }: MenuProps) => JSX.Element;
+export default Menu;

package/core/{Menu.js → navigation/menu/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Menu = 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"));
@@ -26,7 +26,10 @@ var Menu = function Menu(_ref) {
       padding: padding,
       margin: margin
     }, style)
-  }), withWrapper ? /*#__PURE__*/_react["default"].createElement("div", null, children) : children);
+  }), withWrapper ? /*#__PURE__*/_react["default"].createElement("div", {
+    role: "menu-wrapper-container"
+  }, children) : children);
 };
+exports.Menu = Menu;
 var _default = Menu;
 exports["default"] = _default;

package/core/navigation/menu/menu.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/core/{Pagination.d.ts → navigation/pagination/index.d.ts}

@@ -1,4 +1,4 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../../types';
 export interface PaginationProps extends DefaultProps {
     pages?: number;
     active: number;
@@ -6,5 +6,5 @@ export interface PaginationProps extends DefaultProps {
     onPrevious: () => void;
     onNavigate: (page: number) => void;
 }
-declare const Pagination: (props: PaginationProps) => JSX.Element;
+export declare const Pagination: (props: PaginationProps) => JSX.Element;
 export default Pagination;

package/core/{Pagination.js → navigation/pagination/index.js}

@@ -4,17 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Pagination = 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 _inc = _interopRequireDefault(require("ramda/es/inc"));
 var _times = _interopRequireDefault(require("ramda/es/times"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
-var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
-var _Button = _interopRequireDefault(require("./Button"));
+var _icons = require("@/icons");
+var _button = _interopRequireDefault(require("@/core/inputs/button"));
+var _excluded = ["active", "style", "padding", "margin", "pages", "className", "onNavigate", "onNext", "onPrevious"];
 var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -26,33 +27,41 @@ var Pagination = function Pagination(props) {
     margin = props.margin,
     _props$pages = props.pages,
     pages = _props$pages === void 0 ? 1 : _props$pages,
-    className = props.className;
-  var allPages = (0, _times["default"])(_inc["default"], pages || 1);
-  return /*#__PURE__*/_react["default"].createElement(Content, (0, _extends2["default"])({}, props, {
+    className = props.className,
+    onNavigate = props.onNavigate,
+    onNext = props.onNext,
+    onPrevious = props.onPrevious,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var allPages = (0, _times["default"])(_inc["default"], pages);
+  return /*#__PURE__*/_react["default"].createElement(Content, (0, _extends2["default"])({}, rest, {
     className: className,
     style: _objectSpread({
       padding: padding,
       margin: margin
     }, style)
-  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
     id: "prev-page-button",
+    "data-testid": "prev-page-button",
     size: "small",
-    onClick: props.onPrevious
-  }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft["default"], null)), allPages.map(function (page) {
-    return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: onPrevious
+  }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowLeft, null)), allPages.map(function (page) {
+    return /*#__PURE__*/_react["default"].createElement(_button["default"], {
       size: "small",
+      "data-testid": "pagination-page-".concat(page),
       key: page,
       id: "pagination-page-".concat(page),
       color: page === active ? 'primary' : 'default',
       onClick: function onClick() {
-        return props.onNavigate(page);
+        return onNavigate(page);
       }
     }, page);
-  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
     id: "next-page-button",
+    "data-testid": "next-page-button",
     size: "small",
-    onClick: props.onNext
-  }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRight["default"], null)));
+    onClick: onNext
+  }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowRight, null)));
 };
+exports.Pagination = Pagination;
 var _default = Pagination;
 exports["default"] = _default;

package/core/navigation/pagination/pagination.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/core/{Sidebar.d.ts → navigation/sidebar/index.d.ts}

@@ -1,5 +1,5 @@
-import { DefaultProps } from './types';
-import { ButtonProps } from './Button';
+import { DefaultProps } from '../../types';
+import { ButtonProps } from '@/core/inputs/button';
 export interface SidebarProps extends DefaultProps {
     open: boolean;
     expanded?: boolean;
@@ -16,5 +16,5 @@ export interface SidebarProps extends DefaultProps {
     ButtonProps?: ButtonProps;
     onToggle: () => void;
 }
-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) => JSX.Element;
+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) => JSX.Element;
 export default Sidebar;

package/core/{Sidebar.js → navigation/sidebar/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Sidebar = 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"));
@@ -13,9 +13,8 @@ var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
 var _styles = require("@material-ui/core/styles");
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
-var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
-var _Button = _interopRequireDefault(require("./Button"));
+var _icons = require("@/icons");
+var _button = _interopRequireDefault(require("@/core/inputs/button"));
 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -100,7 +99,7 @@ var Sidebar = function Sidebar(_ref) {
     var iconToLeft = anchor === 'left' && expanded || anchor === 'right' && !expanded;
     return /*#__PURE__*/_react["default"].createElement(Action, {
       anchor: anchor
-    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    }, /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _extends2["default"])({
       name: "button-".concat(name || 'sidebar'),
       color: color,
       "data-testid": "sidebar-button",
@@ -110,9 +109,9 @@ var Sidebar = function Sidebar(_ref) {
         maxWidth: minWidth
       },
       onClick: onToggle
-    }, ButtonProps), iconToLeft ? /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft["default"], {
+    }, ButtonProps), iconToLeft ? /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowLeft, {
       className: classes.icon
-    }) : /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRight["default"], {
+    }) : /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowRight, {
       className: classes.icon
     })));
   };
@@ -135,5 +134,6 @@ var Sidebar = function Sidebar(_ref) {
     }
   }), showButton && renderAction(), children);
 };
+exports.Sidebar = Sidebar;
 var _default = Sidebar;
 exports["default"] = _default;

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

@@ -0,0 +1 @@
+export {};

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

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

package/core/{Stepper.d.ts → navigation/stepper/index.d.ts}

@@ -1,4 +1,4 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../../types';
 export interface StepperProps extends DefaultProps {
     active?: number;
     steps: Array<string | TStep>;
@@ -9,5 +9,5 @@ type TStep = {
     label: JSX.Element | string;
     icon: JSX.Element | ((active?: boolean) => JSX.Element);
 };
-declare const Stepper: ({ active, bottomLabel, steps, padding, margin, style, ...otherProps }: StepperProps) => JSX.Element;
+export declare const Stepper: ({ active, bottomLabel, steps, padding, margin, style, ...otherProps }: StepperProps) => JSX.Element;
 export default Stepper;

package/core/{Stepper.js → navigation/stepper/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Stepper = 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"));
@@ -19,16 +19,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var isActive = function isActive(index, active) {
   return active !== undefined ? active >= index : undefined;
 };
-var Stepper = function Stepper(_ref) {
-  var active = _ref.active,
-    bottomLabel = _ref.bottomLabel,
-    steps = _ref.steps,
-    padding = _ref.padding,
-    margin = _ref.margin,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+var StepIcon = function StepIcon(_ref) {
+  var icon = _ref.icon,
+    active = _ref.active;
+  if (typeof icon === 'function') {
+    return icon(active);
+  }
+  return /*#__PURE__*/_react["default"].cloneElement(icon, {
+    active: String(active),
+    color: active ? 'primary' : 'disabled'
+  });
+};
+var Stepper = function Stepper(_ref2) {
+  var active = _ref2.active,
+    bottomLabel = _ref2.bottomLabel,
+    steps = _ref2.steps,
+    padding = _ref2.padding,
+    margin = _ref2.margin,
+    _ref2$style = _ref2.style,
+    style = _ref2$style === void 0 ? {} : _ref2$style,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Stepper["default"], (0, _extends2["default"])({
+    role: "stepper-container",
     alternativeLabel: bottomLabel,
     activeStep: active,
     style: _objectSpread({
@@ -39,12 +51,13 @@ var Stepper = function Stepper(_ref) {
     return /*#__PURE__*/_react["default"].createElement(_Step["default"], {
       key: index
     }, /*#__PURE__*/_react["default"].createElement(_StepLabel["default"], {
-      icon: (0, _typeof2["default"])(step) === 'object' ? typeof step.icon === 'function' ? step.icon(isActive(index, active)) : /*#__PURE__*/_react["default"].cloneElement(step.icon, {
-        active: isActive(index, active),
-        color: isActive(index, active) ? 'primary' : 'default'
+      icon: (0, _typeof2["default"])(step) === 'object' ? /*#__PURE__*/_react["default"].createElement(StepIcon, {
+        icon: step.icon,
+        active: !!isActive(index, active)
       }) : index + 1
     }, (0, _typeof2["default"])(step) === 'object' ? step.label : step));
   }));
 };
+exports.Stepper = Stepper;
 var _default = Stepper;
 exports["default"] = _default;

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

@@ -0,0 +1 @@
+export {};

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

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

package/core/{Tab.d.ts → navigation/tab/index.d.ts}

@@ -1,4 +1,4 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../../types';
 interface TabProps extends DefaultProps {
     disabled?: boolean;
     icon?: string | JSX.Element;

package/core/{Tabs.d.ts → navigation/tabs/index.d.ts}

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

package/core/{Tabs.js → navigation/tabs/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Tabs = 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"));
@@ -37,5 +37,6 @@ var Tabs = function Tabs(_ref) {
     }, style)
   }), children);
 };
+exports.Tabs = Tabs;
 var _default = Tabs;
 exports["default"] = _default;

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { DefaultProps } from '../../types';
+export interface BoxProps extends DefaultProps {
+    minHeight?: number;
+    children: React.ReactNode;
+    'data-testid'?: string;
+}
+export declare const Box: ({ children, margin, padding, style, minHeight, ...otherProps }: BoxProps) => JSX.Element;
+export default Box;

package/core/{Box.js → surfaces/box/index.js}

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Box = 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 _react = _interopRequireDefault(require("react"));
-var _Paper = _interopRequireDefault(require("./Paper"));
+var _paper = _interopRequireDefault(require("@/core/surfaces/paper"));
 var _excluded = ["children", "margin", "padding", "style", "minHeight"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -23,7 +23,7 @@ var Box = function Box(_ref) {
     _ref$minHeight = _ref.minHeight,
     minHeight = _ref$minHeight === void 0 ? 400 : _ref$minHeight,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Paper["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_paper["default"], (0, _extends2["default"])({
     padding: padding,
     margin: margin,
     style: _objectSpread({
@@ -31,5 +31,6 @@ var Box = function Box(_ref) {
     }, style)
   }, otherProps), children);
 };
+exports.Box = Box;
 var _default = Box;
 exports["default"] = _default;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("../../types").DefaultProps & import("@material-ui/core").CardProps>;
+export default _default;
+export declare const Default: () => JSX.Element;

package/core/{Card.d.ts → surfaces/card/index.d.ts}

@@ -1,4 +1,4 @@
-import { DefaultProps } from './types';
+import { DefaultProps } from '../../types';
 import { CardProps } from '@material-ui/core/Card';
 import { CardActionAreaProps } from '@material-ui/core/CardActionArea';
 import { CardActionsProps } from '@material-ui/core/CardActions';
@@ -10,5 +10,5 @@ export declare const CardActions: ({ margin, padding, style, ...otherProps }: De
 export declare const CardContent: ({ margin, padding, style, ...otherProps }: DefaultProps & CardContentProps) => JSX.Element;
 export declare const CardMedia: ({ margin, padding, style, ...otherProps }: DefaultProps & CardMediaProps) => JSX.Element;
 export declare const CardHeader: ({ margin, padding, style, ...otherProps }: DefaultProps & CardHeaderProps) => JSX.Element;
-declare const Card: ({ margin, padding, style, ...otherProps }: DefaultProps & CardProps) => JSX.Element;
+export declare const Card: ({ margin, padding, style, ...otherProps }: DefaultProps & CardProps) => JSX.Element;
 export default Card;

package/core/{Card.js → surfaces/card/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.CardMedia = exports.CardHeader = exports.CardContent = exports.CardActions = exports.CardActionArea = void 0;
+exports["default"] = exports.CardMedia = exports.CardHeader = exports.CardContent = exports.CardActions = exports.CardActionArea = exports.Card = 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"));
@@ -100,5 +100,6 @@ var Card = function Card(_ref6) {
     }, style)
   }), otherProps.children);
 };
+exports.Card = Card;
 var _default = Card;
 exports["default"] = _default;

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

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/core/surfaces/container/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Container = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _excluded = ["children", "padding", "margin", "style"];
+var ContainerStyles = {
+  display: 'flex',
+  flex: 1
+};
+var Container = function Container(_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("div", (0, _extends2["default"])({
+    style: componentStyle
+  }, otherProps), children);
+};
+exports.Container = Container;
+var _default = Container;
+exports["default"] = _default;

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

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/core/{Content.js → surfaces/content/index.js}

@@ -4,18 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Content = 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 _excluded = ["children", "padding", "margin", "style"];
 var _templateObject;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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 = function Content(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
@@ -23,12 +24,11 @@ var Content = function Content(_ref) {
     _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, {
-    style: _objectSpread({
-      padding: padding,
-      margin: margin
-    }, style)
+    style: componentStyle
   }), children);
 };
+exports.Content = Content;
 var _default = Content;
 exports["default"] = _default;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").ExpansionPanelProps>;
+export default _default;
+export declare const Default: any;
+export declare const Disabled: any;
+export declare const WithEditable: any;

package/core/{ExpansionPanel.d.ts → surfaces/expansion-panel/index.d.ts}

@@ -1,7 +1,6 @@
 import React, { ReactNode, MouseEvent } from 'react';
-import { PaperProps } from './Paper';
-import { HTMLElementWithDataCy } from './types';
-export interface ExpansionPanelProps extends PaperProps {
+import { PaperProps } from '@/core/surfaces/paper';
+export interface ExpansionPanelProps extends Omit<PaperProps, 'onChange'> {
     actions?: ReactNode;
     defaultExpanded?: boolean;
     details?: ReactNode;
@@ -13,10 +12,11 @@ export interface ExpansionPanelProps extends PaperProps {
     detailsStyle?: object;
     actionsStyle?: object;
     editStyle?: React.CSSProperties;
-    headerProps?: HTMLElementWithDataCy<HTMLDivElement>;
+    headerProps?: React.HTMLAttributes<HTMLDivElement>;
     helperIcon?: React.ReactNode;
     editable?: boolean;
     editing?: boolean;
+    role?: string;
     helperButtonPosition?: 'left' | 'right';
     onHelperClick?: () => void;
     onEditClick?: () => void;
@@ -24,5 +24,5 @@ export interface ExpansionPanelProps extends PaperProps {
     onChange?: (event?: React.ChangeEvent<Record<string, unknown>>, expanded?: boolean) => void;
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
-declare const ExpansionPanel: ({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, editStyle, onHelperClick, onEditClick, onSaveClick, onClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: ExpansionPanelProps) => JSX.Element;
+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) => JSX.Element;
 export default ExpansionPanel;