@webiny/ui 0.0.0-mt-1

package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js

@@ -0,0 +1,21 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon"];
+import React, { useContext } from "react";
+import { IconButton } from "../../../Button";
+import { DataListModalOverlayContext } from "./DataListModalOverlayContext";
+export var DataListModalOverlayAction = function DataListModalOverlayAction(_ref) {
+  var icon = _ref.icon,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = useContext(DataListModalOverlayContext),
+      isOpen = _useContext.isOpen,
+      setIsOpen = _useContext.setIsOpen;
+
+  return /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": rest["data-testid"],
+    icon: icon,
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  });
+};

package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const DataListModalOverlayContext: React.Context<any>;
+export declare type DataListModalOverlayProviderProps = {
+    children?: React.ReactChild | React.ReactChild[];
+};
+export declare const DataListModalOverlayProvider: ({ children }: DataListModalOverlayProviderProps) => JSX.Element;

package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js

@@ -0,0 +1,18 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from "react";
+export var DataListModalOverlayContext = /*#__PURE__*/React.createContext(null);
+export var DataListModalOverlayProvider = function DataListModalOverlayProvider(_ref) {
+  var children = _ref.children;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  return /*#__PURE__*/React.createElement(DataListModalOverlayContext.Provider, {
+    value: {
+      isOpen: isOpen,
+      setIsOpen: setIsOpen
+    }
+  }, children);
+};

package/List/DataList/DataListModalOverlay/index.d.ts

@@ -0,0 +1,3 @@
+export { DataListModalOverlay } from "./DataListModalOverlay";
+export { DataListModalOverlayAction } from "./DataListModalOverlayAction";
+export { DataListModalOverlayContext, DataListModalOverlayProvider } from "./DataListModalOverlayContext";

package/List/DataList/DataListModalOverlay/index.js

@@ -0,0 +1,3 @@
+export { DataListModalOverlay } from "./DataListModalOverlay";
+export { DataListModalOverlayAction } from "./DataListModalOverlayAction";
+export { DataListModalOverlayContext, DataListModalOverlayProvider } from "./DataListModalOverlayContext";

package/List/DataList/Loader.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Loader: () => JSX.Element;
+export default Loader;

package/List/DataList/Loader.js

@@ -0,0 +1,57 @@
+import * as React from "react";
+import styled from "@emotion/styled";
+import Skeleton from "react-loading-skeleton";
+var LoaderUl = /*#__PURE__*/styled("ul", {
+  target: "e1nb7uzc0",
+  label: "LoaderUl"
+})({
+  listStyle: "none",
+  padding: "10px 20px",
+  "li > div": {
+    display: "inline-block",
+    verticalAlign: "middle",
+    ".react-loading-skeleton": {
+      backgroundColor: "var(--mdc-theme-background)",
+      backgroundImage: "linear-gradient(90deg, var(--mdc-theme-background), var(--mdc-theme-surface), var(--mdc-theme-background))"
+    }
+  },
+  ".graphic": {
+    fontSize: 36,
+    width: 36
+  },
+  ".data": {
+    width: "calc(-36px + 75%)",
+    marginLeft: 10
+  },
+  ".actions": {
+    width: "calc(-36px + 25%)",
+    marginLeft: 10,
+    textAlign: "right",
+    "> div": {
+      display: "inline-block",
+      fontSize: 24,
+      marginLeft: 10,
+      width: 24
+    }
+  }
+});
+
+var Loader = function Loader() {
+  return /*#__PURE__*/React.createElement(LoaderUl, {
+    "data-testid": "default-data-list.loading"
+  }, [1, 2, 3, 4, 5].map(function (item) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: "list-" + item
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "graphic"
+    }, /*#__PURE__*/React.createElement(Skeleton, null)), /*#__PURE__*/React.createElement("div", {
+      className: "data"
+    }, /*#__PURE__*/React.createElement(Skeleton, {
+      count: 2
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "actions"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton, null))));
+  }));
+};
+
+export default Loader;

package/List/DataList/NoData.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const NoData: () => JSX.Element;
+export default NoData;

package/List/DataList/NoData.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Typography } from "../../Typography";
+import styled from "@emotion/styled";
+var NoDataWrapper = /*#__PURE__*/styled("div", {
+  target: "enkc7l50",
+  label: "NoDataWrapper"
+})({
+  textAlign: "center",
+  padding: 100,
+  color: "var(--mdc-theme-on-surface)"
+});
+
+var NoData = function NoData() {
+  return /*#__PURE__*/React.createElement(NoDataWrapper, null, /*#__PURE__*/React.createElement(Typography, {
+    use: "overline"
+  }, "No records found."));
+};
+
+export default NoData;

package/List/DataList/README.md

@@ -0,0 +1,17 @@
+# DataList
+
+### Description
+
+Use `DataList` component to display paginated data and provide actions for switching pages, filters, and sorters.
+
+### Import
+
+```js
+import { DataList } from "@webiny/ui/DataList";
+```
+
+Also note, before using `DeleteIcon` and `EditIcon` components, import them with following statement:
+
+```js
+import { DeleteIcon, EditIcon } from "@webiny/ui/DataList/icons";
+```

package/List/DataList/icons/baseline-autorenew-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/List/DataList/icons/baseline-delete-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/List/DataList/icons/baseline-edit-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/List/DataList/icons/baseline-navigate_before-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/List/DataList/icons/baseline-navigate_next-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/List/DataList/icons/baseline-sort-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/List/DataList/icons/baseline-tune-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/>
+</svg>

package/List/DataList/icons/filter_alt-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><path d="M0,0h24 M24,24H0" fill="none"/><path d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/><path d="M0,0h24v24H0V0z" fill="none"/></g></svg>

package/List/DataList/icons/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { IconButtonProps as BaseIconProps } from "../../../Button";
+declare type IconButtonProps = Omit<BaseIconProps, "icon"> & {
+    icon?: React.ReactElement<any>;
+};
+export declare const RefreshIcon: (props: IconButtonProps) => JSX.Element;
+export declare const DeleteIcon: (props: IconButtonProps) => JSX.Element;
+export declare const CreateIcon: (props: IconButtonProps) => JSX.Element;
+export declare const EditIcon: (props: IconButtonProps) => JSX.Element;
+export declare const SortIcon: (props: IconButtonProps) => JSX.Element;
+export declare const FilterIcon: (props: IconButtonProps) => JSX.Element;
+export declare const PreviousPageIcon: (props: IconButtonProps) => JSX.Element;
+export declare const NextPageIcon: (props: IconButtonProps) => JSX.Element;
+export declare const OptionsIcon: (props: IconButtonProps) => JSX.Element;
+export {};

package/List/DataList/icons/index.js

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { IconButton } from "../../../Button";
+import { ReactComponent as AutoRenew } from "@svgr/webpack!./baseline-autorenew-24px.svg";
+import { ReactComponent as Pen } from "@svgr/webpack!./baseline-edit-24px.svg";
+import { ReactComponent as Delete } from "@svgr/webpack!./baseline-delete-24px.svg";
+import { ReactComponent as Sort } from "@svgr/webpack!./baseline-sort-24px.svg";
+import { ReactComponent as Filter } from "@svgr/webpack!./filter_alt-24px.svg";
+import { ReactComponent as NavigateBefore } from "@svgr/webpack!./baseline-navigate_before-24px.svg";
+import { ReactComponent as NavigateNext } from "@svgr/webpack!./baseline-navigate_next-24px.svg";
+import { ReactComponent as TuneIcon } from "@svgr/webpack!./baseline-tune-24px.svg";
+export var RefreshIcon = function RefreshIcon(props) {
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    icon: /*#__PURE__*/React.createElement(AutoRenew, null)
+  }, props));
+};
+export var DeleteIcon = function DeleteIcon(props) {
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    icon: /*#__PURE__*/React.createElement(Delete, null)
+  }, props));
+};
+export var CreateIcon = function CreateIcon(props) {
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    icon: /*#__PURE__*/React.createElement(Pen, null)
+  }, props));
+};
+export var EditIcon = function EditIcon(props) {
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    icon: /*#__PURE__*/React.createElement(Pen, null)
+  }, props));
+};
+export var SortIcon = function SortIcon(props) {
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    icon: /*#__PURE__*/React.createElement(Sort, null)
+  }, props));
+};
+export var FilterIcon = function FilterIcon(props) {
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    icon: /*#__PURE__*/React.createElement(Filter, null)
+  }, props));
+};
+export var PreviousPageIcon = function PreviousPageIcon(props) {
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    icon: /*#__PURE__*/React.createElement(NavigateBefore, null)
+  }, props));
+};
+export var NextPageIcon = function NextPageIcon(props) {
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    icon: /*#__PURE__*/React.createElement(NavigateNext, null)
+  }, props));
+};
+export var OptionsIcon = function OptionsIcon(props) {
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    icon: /*#__PURE__*/React.createElement(TuneIcon, null)
+  }, props));
+};

package/List/DataList/icons/round-more_vert-24px.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z
+		 M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,16,12,16z"/>
+</g>
+</svg>

package/List/DataList/index.d.ts

@@ -0,0 +1,3 @@
+export { DataList, ScrollList } from "./DataList";
+export { default as NoData } from "./NoData";
+export * from "./DataListModalOverlay";

package/List/DataList/index.js

@@ -0,0 +1,3 @@
+export { DataList, ScrollList } from "./DataList";
+export { default as NoData } from "./NoData";
+export * from "./DataListModalOverlay";

package/List/DataList/types.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export declare type PaginationProp = {
+    setPage?: (page: number) => void;
+    setPreviousPage?: () => void;
+    setNextPage?: () => void;
+    hasNextPage?: boolean;
+    hasPreviousPage?: boolean;
+    setPerPage?: (amount: number) => void;
+    perPageOptions?: number[];
+};
+export declare type SortersProp = Array<{
+    label: string;
+    value: any;
+}>;
+export declare type Props = {
+    children?: Function;
+    title?: React.ReactNode;
+    data?: Object[];
+    refresh?: Function;
+    loading?: boolean;
+    loader?: React.ReactNode;
+    pagination?: PaginationProp;
+    setPage?: Function;
+    setSorters?: Function;
+    setFilters?: Function;
+    sorters?: SortersProp;
+    multiActions?: any[];
+};

package/List/DataList/types.js

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

package/List/List.d.ts

@@ -0,0 +1,131 @@
+import * as React from "react";
+import { ListProps as RmwcListProps, ListItemProps as RmwcListItemProps, ListItemTextProps as RmwcListItemTextProps, SimpleListItemProps as RmwcSimpleListItemProps } from "@rmwc/list";
+export declare type ListItemProps = RmwcListItemProps & {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent) => void;
+};
+/**
+ * ListItem components are placed as direct children to List component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ListItem: (props: ListItemProps) => JSX.Element;
+export declare type ListProps = RmwcListProps & {
+    children?: any;
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * Use List component to display data and offer additional actions if needed.
+ */
+export declare class List extends React.Component<ListProps> {
+    render(): JSX.Element;
+}
+export declare type ListItemTextProps = RmwcListItemTextProps & {
+    children: React.ReactNode;
+    className?: string;
+    onClick?: (e: React.SyntheticEvent<MouseEvent>) => void;
+};
+/**
+ * Used to show regular text in list items.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ListItemText: (props: ListItemTextProps) => JSX.Element;
+export declare type ListItemTextPrimaryProps = {
+    /**
+     * Text content
+     */
+    children: React.ReactNode;
+};
+export declare const ListItemTextPrimary: (props: ListItemTextPrimaryProps) => JSX.Element;
+export declare type ListItemTextSecondaryProps = {
+    /**
+     * Text content
+     */
+    children: React.ReactNode;
+};
+/**
+ * Used to show secondary text in list items.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ListItemTextSecondary: (props: ListItemTextSecondaryProps) => JSX.Element;
+export declare type ListItemGraphicProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+/**
+ * Can be used to show an icon or any other custom element. Rendered on the left side.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ListItemGraphic: (props: ListItemGraphicProps) => JSX.Element;
+export declare type ListItemMetaProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+/**
+ * Can be used to show an icon or any other custom element. Rendered on the right side.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ListItemMeta: (props: ListItemMetaProps) => JSX.Element;
+export declare type ListTopCaptionProps = {
+    children: React.ReactNode;
+};
+/**
+ * Can be used to show a top caption inside ListItemMeta component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ListTopCaption: (props: ListTopCaptionProps) => JSX.Element;
+export declare type ListBottomCaptionProps = {
+    children: React.ReactNode;
+};
+/**
+ * Can be used to show a bottom caption inside ListItemMeta component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ListBottomCaption: (props: ListBottomCaptionProps) => JSX.Element;
+export declare type ListTextOverlineProps = {
+    children: React.ReactNode;
+};
+/**
+ * Can be used to show an overline text inside ListItem component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ListTextOverline: (props: ListTextOverlineProps) => JSX.Element;
+export declare type ListActionsProps = {
+    children: React.ReactNode;
+};
+/**
+ * Used to contain the actions inside ListItemMate component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ListActions: (props: ListActionsProps) => JSX.Element;
+export declare type ListSelectBoxProps = {
+    children: React.ReactNode;
+};
+/**
+ * Used to hold the Checkbox element for multi-select options.
+ * @param {*} props
+ */
+export declare const ListSelectBox: (props: ListSelectBoxProps) => JSX.Element;
+export declare const SimpleListItem: (props: RmwcSimpleListItemProps & {
+    onClick?: any;
+}) => JSX.Element;

package/List/List.js

@@ -0,0 +1,167 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import * as React from "react";
+import { List as RmwcList, ListItem as RmwcListItem, ListItemText as RmwcListItemText, ListItemPrimaryText as RmwcListItemPrimaryText, ListItemSecondaryText as RmwcListItemSecondaryText, SimpleListItem as RmwcSimpleListItem } from "@rmwc/list";
+import { Typography } from "../Typography";
+import classNames from "classnames";
+import styled from "@emotion/styled";
+
+/**
+ * ListItem components are placed as direct children to List component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export var ListItem = function ListItem(props) {
+  return /*#__PURE__*/React.createElement(RmwcListItem, props);
+};
+
+/**
+ * Use List component to display data and offer additional actions if needed.
+ */
+export var List = /*#__PURE__*/function (_React$Component) {
+  _inherits(List, _React$Component);
+
+  var _super = _createSuper(List);
+
+  function List() {
+    _classCallCheck(this, List);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(List, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(RmwcList, this.props, this.props.children);
+    }
+  }]);
+
+  return List;
+}(React.Component);
+
+/**
+ * Used to show regular text in list items.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export var ListItemText = function ListItemText(props) {
+  return /*#__PURE__*/React.createElement(RmwcListItemText, props, props.children);
+};
+export var ListItemTextPrimary = function ListItemTextPrimary(props) {
+  return /*#__PURE__*/React.createElement(RmwcListItemPrimaryText, null, props.children);
+};
+
+/**
+ * Used to show secondary text in list items.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export var ListItemTextSecondary = function ListItemTextSecondary(props) {
+  return /*#__PURE__*/React.createElement(RmwcListItemSecondaryText, null, props.children);
+};
+
+/**
+ * Can be used to show an icon or any other custom element. Rendered on the left side.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export var ListItemGraphic = function ListItemGraphic(props) {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: classNames("mdc-list-item__graphic", props.className)
+  }), props.children);
+};
+
+/**
+ * Can be used to show an icon or any other custom element. Rendered on the right side.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export var ListItemMeta = function ListItemMeta(props) {
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+    className: classNames("mdc-list-item__meta", props.className)
+  }), props.children);
+};
+
+/**
+ * Can be used to show a top caption inside ListItemMeta component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export var ListTopCaption = function ListTopCaption(props) {
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+    className: "webiny-list-top-caption"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    use: "overline"
+  }, props.children));
+};
+
+/**
+ * Can be used to show a bottom caption inside ListItemMeta component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export var ListBottomCaption = function ListBottomCaption(props) {
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+    className: "webiny-list-bottom-caption"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    use: "overline"
+  }, props.children));
+};
+
+/**
+ * Can be used to show an overline text inside ListItem component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export var ListTextOverline = function ListTextOverline(props) {
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+    className: "webiny-list-text-overline"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    use: "overline"
+  }, props.children));
+};
+
+/**
+ * Used to contain the actions inside ListItemMate component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export var ListActions = function ListActions(props) {
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+    className: "webiny-list-actions"
+  }), props.children);
+};
+var SelectBoxWrapper = /*#__PURE__*/styled("div", {
+  target: "entzw6n0",
+  label: "SelectBoxWrapper"
+})({
+  overflow: "hidden",
+  width: 25,
+  height: 25,
+  display: "flex",
+  position: "relative",
+  alignItems: "center",
+  justifyContent: "center"
+});
+
+/**
+ * Used to hold the Checkbox element for multi-select options.
+ * @param {*} props
+ */
+export var ListSelectBox = function ListSelectBox(props) {
+  return /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(SelectBoxWrapper, null, props.children));
+};
+export var SimpleListItem = function SimpleListItem(props) {
+  return /*#__PURE__*/React.createElement(RmwcSimpleListItem, props);
+};

package/List/List.stories.d.ts

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