@webiny/ui 5.27.0 → 5.29.0-beta.0

package/List/DataList/DataList.stories.js

@@ -1,28 +1,40 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./../DataList/README.md";
-import { withKnobs, boolean, text, object, array } from "@storybook/addon-knobs";
-import { DataList } from "./DataList";
-import { DeleteIcon, EditIcon } from "./icons";
-import { List, ListItem, ListItemText, ListItemTextSecondary, ListItemMeta, ListItemGraphic } from "./../List";
-var story = storiesOf("Components/List", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./../DataList/README.md"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _DataList = require("./DataList");
+
+var _icons = require("./icons");
+
+var _List = require("./../List");
+
+var story = (0, _react2.storiesOf)("Components/List", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("data list", function () {
   var generalOptionsAndCallbacks = {
     refresh: function refresh() {
       console.log("Implement \"refresh\" method.");
     },
-    loading: boolean("Loading", false, "Basic"),
-    title: text("Title", "A list of all users", "Basic"),
-    multiActions: boolean("Multi actions", false, "Basic"),
+    loading: (0, _addonKnobs.boolean)("Loading", false, "Basic"),
+    title: (0, _addonKnobs.text)("Title", "A list of all users", "Basic"),
+    multiActions: (0, _addonKnobs.boolean)("Multi actions", false, "Basic"),
     setNextPage: function setNextPage(cursor) {
       console.log("Implement setNextPage method (selected ".concat(cursor, ")."));
     },
     setPreviousPage: function setPreviousPage(cursor) {
       console.log("Implement setPreviousPage method (selected ".concat(cursor, ")."));
     },
-    perPageOptions: array("perPageOptions", ["10", "25", "50"], ",", "Basic"),
+    perPageOptions: (0, _addonKnobs.array)("perPageOptions", ["10", "25", "50"], ",", "Basic"),
     setPerPage: function setPerPage(perPage) {
       console.log("Implement setPerPage method (selected ".concat(perPage, ")."));
     },
@@ -30,7 +42,7 @@ story.add("data list", function () {
       console.log("Implement setSorters method (selected ".concat(JSON.stringify(sorter), ")."));
     }
   };
-  var dataProp = object("Data", [{
+  var dataProp = (0, _addonKnobs.object)("Data", [{
     id: "A",
     firstName: "John",
     lastName: "Doe",
@@ -46,7 +58,7 @@ story.add("data list", function () {
     lastName: "Bar",
     email: "foo.bar@webiny.com"
   }], "Data");
-  var metaProp = object("Meta", {
+  var metaProp = (0, _addonKnobs.object)("Meta", {
     totalPages: 1,
     totalCount: 3,
     from: 1,
@@ -55,7 +67,7 @@ story.add("data list", function () {
     nextPage: null
   }, "Meta");
   var sortersProp = {
-    list: object("Sorters", [{
+    list: (0, _addonKnobs.object)("Sorters", [{
       label: "Newest to oldest",
       sorters: {
         createdOn: -1
@@ -77,31 +89,31 @@ story.add("data list", function () {
       }
     }], "Sorters")
   };
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(DataList, Object.assign({}, generalOptionsAndCallbacks, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_DataList.DataList, Object.assign({}, generalOptionsAndCallbacks, {
     data: dataProp,
     meta: metaProp // @ts-ignore
     ,
     sorters: sortersProp.list
   }), function (_ref) {
     var data = _ref.data;
-    return /*#__PURE__*/React.createElement(List, null, data.map(function (item) {
-      return /*#__PURE__*/React.createElement(ListItem, {
+    return /*#__PURE__*/_react.default.createElement(_List.List, null, data.map(function (item) {
+      return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
         key: item.id
-      }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement("img", {
+      }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement("img", {
         src: "http://i.pravatar.cc/100?id=" + item.id
-      })), /*#__PURE__*/React.createElement(ListItemText, null, item.firstName, " ", item.lastName, /*#__PURE__*/React.createElement(ListItemTextSecondary, null, item.email)), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(DeleteIcon, {
+      })), /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, item.firstName, " ", item.lastName, /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, item.email)), /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_icons.DeleteIcon, {
         onClick: function onClick() {
           console.log("Redirect user to form.");
         }
-      }), /*#__PURE__*/React.createElement(EditIcon, {
+      }), /*#__PURE__*/_react.default.createElement(_icons.EditIcon, {
         onClick: function onClick() {
           console.log("Show confirmation dialog.");
         }
       })));
     }));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <DataList\n                        {...generalOptionsAndCallbacks}\n                        data={".concat(JSON.stringify(dataProp, null, 2), "}\n                        meta={").concat(JSON.stringify(metaProp, null, 2), "}\n                        sorters={").concat(JSON.stringify(sortersProp.list, null, 2), "}\n                    >\n                      {({ data }) => (\n                            <List>\n                                {data.map(item => (\n                                    <ListItem key={item.id}>\n                                        <ListItemGraphic>\n                                            <img\n                                                src={\n                                                    \"//www.gravatar.com/avatar/\" +\n                                                    item.gravatar +\n                                                    \"?s=48\"\n                                                }\n                                            />\n                                        </ListItemGraphic>\n                                        <ListItemText>\n                                            {item.firstName} {item.lastName}\n                                            <ListItemTextSecondary>\n                                                {item.email}\n                                            </ListItemTextSecondary>\n                                        </ListItemText>\n                                        <ListItemMeta>\n                                                <DeleteIcon\n                                                    onClick={() => {\n                                                        console.log(\"Redirect user to form.\");\n                                                    }}\n                                                />\n                                                <EditIcon\n                                                    onClick={() => {\n                                                        console.log(\"Show confirmation dialog.\");\n                                                    }}\n                                                />\n                                        </ListItemMeta>\n                                    </ListItem>\n                                ))}\n                            </List>\n                        )}\n                    </DataList>\n                    "))));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <DataList\n                        {...generalOptionsAndCallbacks}\n                        data={".concat(JSON.stringify(dataProp, null, 2), "}\n                        meta={").concat(JSON.stringify(metaProp, null, 2), "}\n                        sorters={").concat(JSON.stringify(sortersProp.list, null, 2), "}\n                    >\n                      {({ data }) => (\n                            <List>\n                                {data.map(item => (\n                                    <ListItem key={item.id}>\n                                        <ListItemGraphic>\n                                            <img\n                                                src={\n                                                    \"//www.gravatar.com/avatar/\" +\n                                                    item.gravatar +\n                                                    \"?s=48\"\n                                                }\n                                            />\n                                        </ListItemGraphic>\n                                        <ListItemText>\n                                            {item.firstName} {item.lastName}\n                                            <ListItemTextSecondary>\n                                                {item.email}\n                                            </ListItemTextSecondary>\n                                        </ListItemText>\n                                        <ListItemMeta>\n                                                <DeleteIcon\n                                                    onClick={() => {\n                                                        console.log(\"Redirect user to form.\");\n                                                    }}\n                                                />\n                                                <EditIcon\n                                                    onClick={() => {\n                                                        console.log(\"Show confirmation dialog.\");\n                                                    }}\n                                                />\n                                        </ListItemMeta>\n                                    </ListItem>\n                                ))}\n                            </List>\n                        )}\n                    </DataList>\n                    "))));
 }, {
   info: {
-    propTables: [List, ListItem, ListItemText, ListItemTextSecondary, ListItemMeta, ListItemGraphic]
+    propTables: [_List.List, _List.ListItem, _List.ListItemText, _List.ListItemTextSecondary, _List.ListItemMeta, _List.ListItemGraphic]
   }
 });

package/List/DataList/DataList.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DataList.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","withKnobs","boolean","text","object","array","DataList","DeleteIcon","EditIcon","List","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListItemGraphic","story","module","addDecorator","add","generalOptionsAndCallbacks","refresh","console","log","loading","title","multiActions","setNextPage","cursor","setPreviousPage","perPageOptions","setPerPage","perPage","setSorters","sorter","JSON","stringify","dataProp","id","firstName","lastName","email","metaProp","totalPages","totalCount","from","to","previousPage","nextPage","sortersProp","list","label","sorters","createdOn","name","data","map","item","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,OAAOC,MAAP;AACA,SAASC,SAAT,EAAoBC,OAApB,EAA6BC,IAA7B,EAAmCC,MAAnC,EAA2CC,KAA3C,QAAwD,wBAAxD;AAEA,SAASC,QAAT;AAEA,SAASC,UAAT,EAAqBC,QAArB;AACA,SACIC,IADJ,EAEIC,QAFJ,EAGIC,YAHJ,EAIIC,qBAJJ,EAKIC,YALJ,EAMIC,eANJ;AASA,IAAMC,KAAK,GAAGrB,SAAS,CAAC,iBAAD,EAAoBsB,MAApB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBhB,SAAnB;AAEAc,KAAK,CAACG,GAAN,CACI,WADJ,EAEI,YAAM;AACF,MAAMC,0BAA0B,GAAG;AAC/BC,IAAAA,OAAO,EAAE,mBAAM;AACXC,MAAAA,OAAO,CAACC,GAAR;AACH,KAH8B;AAI/BC,IAAAA,OAAO,EAAErB,OAAO,CAAC,SAAD,EAAY,KAAZ,EAAmB,OAAnB,CAJe;AAK/BsB,IAAAA,KAAK,EAAErB,IAAI,CAAC,OAAD,EAAU,qBAAV,EAAiC,OAAjC,CALoB;AAM/BsB,IAAAA,YAAY,EAAEvB,OAAO,CAAC,eAAD,EAAkB,KAAlB,EAAyB,OAAzB,CANU;AAQ/BwB,IAAAA,WAAW,EAAE,qBAACC,MAAD,EAAoB;AAC7BN,MAAAA,OAAO,CAACC,GAAR,kDAAsDK,MAAtD;AACH,KAV8B;AAW/BC,IAAAA,eAAe,EAAE,yBAACD,MAAD,EAAoB;AACjCN,MAAAA,OAAO,CAACC,GAAR,sDAA0DK,MAA1D;AACH,KAb8B;AAc/BE,IAAAA,cAAc,EAAExB,KAAK,CACjB,gBADiB,EAEjB,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,CAFiB,EAGjB,GAHiB,EAIjB,OAJiB,CAdU;AAoB/ByB,IAAAA,UAAU,EAAE,oBAACC,OAAD,EAAqB;AAC7BV,MAAAA,OAAO,CAACC,GAAR,iDAAqDS,OAArD;AACH,KAtB8B;AAuB/BC,IAAAA,UAAU,EAAE,oBAACC,MAAD,EAAiB;AACzBZ,MAAAA,OAAO,CAACC,GAAR,iDAAqDY,IAAI,CAACC,SAAL,CAAeF,MAAf,CAArD;AACH;AAzB8B,GAAnC;AA4BA,MAAMG,QAAQ,GAAGhC,MAAM,CACnB,MADmB,EAEnB,CACI;AACIiC,IAAAA,EAAE,EAAE,GADR;AAEIC,IAAAA,SAAS,EAAE,MAFf;AAGIC,IAAAA,QAAQ,EAAE,KAHd;AAIIC,IAAAA,KAAK,EAAE;AAJX,GADJ,EAOI;AACIH,IAAAA,EAAE,EAAE,GADR;AAEIC,IAAAA,SAAS,EAAE,MAFf;AAGIC,IAAAA,QAAQ,EAAE,KAHd;AAIIC,IAAAA,KAAK,EAAE;AAJX,GAPJ,EAaI;AACIH,IAAAA,EAAE,EAAE,GADR;AAEIC,IAAAA,SAAS,EAAE,KAFf;AAGIC,IAAAA,QAAQ,EAAE,KAHd;AAIIC,IAAAA,KAAK,EAAE;AAJX,GAbJ,CAFmB,EAsBnB,MAtBmB,CAAvB;AAyBA,MAAMC,QAAQ,GAAGrC,MAAM,CACnB,MADmB,EAEnB;AACIsC,IAAAA,UAAU,EAAE,CADhB;AAEIC,IAAAA,UAAU,EAAE,CAFhB;AAGIC,IAAAA,IAAI,EAAE,CAHV;AAIIC,IAAAA,EAAE,EAAE,CAJR;AAKIC,IAAAA,YAAY,EAAE,IALlB;AAMIC,IAAAA,QAAQ,EAAE;AANd,GAFmB,EAUnB,MAVmB,CAAvB;AAaA,MAAMC,WAAW,GAAG;AAChBC,IAAAA,IAAI,EAAE7C,MAAM,CACR,SADQ,EAER,CACI;AACI8C,MAAAA,KAAK,EAAE,kBADX;AAEIC,MAAAA,OAAO,EAAE;AAAEC,QAAAA,SAAS,EAAE,CAAC;AAAd;AAFb,KADJ,EAKI;AACIF,MAAAA,KAAK,EAAE,kBADX;AAEIC,MAAAA,OAAO,EAAE;AAAEC,QAAAA,SAAS,EAAE;AAAb;AAFb,KALJ,EASI;AACIF,MAAAA,KAAK,EAAE,UADX;AAEIC,MAAAA,OAAO,EAAE;AAAEE,QAAAA,IAAI,EAAE;AAAR;AAFb,KATJ,EAaI;AACIH,MAAAA,KAAK,EAAE,UADX;AAEIC,MAAAA,OAAO,EAAE;AAAEE,QAAAA,IAAI,EAAE,CAAC;AAAT;AAFb,KAbJ,CAFQ,EAoBR,SApBQ;AADI,GAApB;AAyBA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcrD,MAAd,CADJ,eAGI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,QAAD,oBACQmB,0BADR;AAEI,IAAA,IAAI,EAAEiB,QAFV;AAGI,IAAA,IAAI,EAAEK,QAHV,CAII;AAJJ;AAKI,IAAA,OAAO,EAAEO,WAAW,CAACC;AALzB,MAOK;AAAA,QAAGK,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD,QACKA,IAAI,CAACC,GAAL,CAAS,UAAAC,IAAI;AAAA,0BACV,oBAAC,QAAD;AAAU,QAAA,GAAG,EAAEA,IAAI,CAACnB;AAApB,sBACI,oBAAC,eAAD,qBACI;AACI,QAAA,GAAG,EAAE,iCAAiCmB,IAAI,CAACnB;AAD/C,QADJ,CADJ,eAMI,oBAAC,YAAD,QACKmB,IAAI,CAAClB,SADV,OACsBkB,IAAI,CAACjB,QAD3B,eAEI,oBAAC,qBAAD,QACKiB,IAAI,CAAChB,KADV,CAFJ,CANJ,eAYI,oBAAC,YAAD,qBACI,oBAAC,UAAD;AACI,QAAA,OAAO,EAAE,mBAAM;AACXnB,UAAAA,OAAO,CAACC,GAAR,CAAY,wBAAZ;AACH;AAHL,QADJ,eAMI,oBAAC,QAAD;AACI,QAAA,OAAO,EAAE,mBAAM;AACXD,UAAAA,OAAO,CAACC,GAAR,CAAY,2BAAZ;AACH;AAHL,QANJ,CAZJ,CADU;AAAA,KAAb,CADL,CADH;AAAA,GAPL,CADJ,CADJ,eA0CI,oBAAC,gBAAD,8IAIYY,IAAI,CAACC,SAAL,CAAeC,QAAf,EAAyB,IAAzB,EAA+B,CAA/B,CAJZ,8CAKYF,IAAI,CAACC,SAAL,CAAeM,QAAf,EAAyB,IAAzB,EAA+B,CAA/B,CALZ,iDAMeP,IAAI,CAACC,SAAL,CAAea,WAAW,CAACC,IAA3B,EAAiC,IAAjC,EAAuC,CAAvC,CANf,omEA1CJ,CAHJ,CADJ;AA+FH,CA7LL,EA8LI;AACIQ,EAAAA,IAAI,EAAE;AACFC,IAAAA,UAAU,EAAE,CACRjD,IADQ,EAERC,QAFQ,EAGRC,YAHQ,EAIRC,qBAJQ,EAKRC,YALQ,EAMRC,eANQ;AADV;AADV,CA9LJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../DataList/README.md\";\nimport { withKnobs, boolean, text, object, array } from \"@storybook/addon-knobs\";\n\nimport { DataList } from \"./DataList\";\n\nimport { DeleteIcon, EditIcon } from \"./icons\";\nimport {\n    List,\n    ListItem,\n    ListItemText,\n    ListItemTextSecondary,\n    ListItemMeta,\n    ListItemGraphic\n} from \"./../List\";\n\nconst story = storiesOf(\"Components/List\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"data list\",\n    () => {\n        const generalOptionsAndCallbacks = {\n            refresh: () => {\n                console.log(`Implement \"refresh\" method.`);\n            },\n            loading: boolean(\"Loading\", false, \"Basic\"),\n            title: text(\"Title\", \"A list of all users\", \"Basic\"),\n            multiActions: boolean(\"Multi actions\", false, \"Basic\"),\n\n            setNextPage: (cursor: string) => {\n                console.log(`Implement setNextPage method (selected ${cursor}).`);\n            },\n            setPreviousPage: (cursor: string) => {\n                console.log(`Implement setPreviousPage method (selected ${cursor}).`);\n            },\n            perPageOptions: array(\n                \"perPageOptions\",\n                [\"10\", \"25\", \"50\"],\n                \",\",\n                \"Basic\"\n            ) as unknown as number[],\n            setPerPage: (perPage: string) => {\n                console.log(`Implement setPerPage method (selected ${perPage}).`);\n            },\n            setSorters: (sorter: any) => {\n                console.log(`Implement setSorters method (selected ${JSON.stringify(sorter)}).`);\n            }\n        };\n\n        const dataProp = object(\n            \"Data\",\n            [\n                {\n                    id: \"A\",\n                    firstName: \"John\",\n                    lastName: \"Doe\",\n                    email: \"john.doe@webiny.com\"\n                },\n                {\n                    id: \"B\",\n                    firstName: \"Jane\",\n                    lastName: \"Doe\",\n                    email: \"jane.doe@webiny.com\"\n                },\n                {\n                    id: \"C\",\n                    firstName: \"Foo\",\n                    lastName: \"Bar\",\n                    email: \"foo.bar@webiny.com\"\n                }\n            ],\n            \"Data\"\n        );\n\n        const metaProp = object(\n            \"Meta\",\n            {\n                totalPages: 1,\n                totalCount: 3,\n                from: 1,\n                to: 3,\n                previousPage: null,\n                nextPage: null\n            },\n            \"Meta\"\n        );\n\n        const sortersProp = {\n            list: object(\n                \"Sorters\",\n                [\n                    {\n                        label: \"Newest to oldest\",\n                        sorters: { createdOn: -1 }\n                    },\n                    {\n                        label: \"Oldest to newest\",\n                        sorters: { createdOn: 1 }\n                    },\n                    {\n                        label: \"Name A-Z\",\n                        sorters: { name: 1 }\n                    },\n                    {\n                        label: \"Name Z-A\",\n                        sorters: { name: -1 }\n                    }\n                ],\n                \"Sorters\"\n            )\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <DataList\n                            {...generalOptionsAndCallbacks}\n                            data={dataProp}\n                            meta={metaProp}\n                            // @ts-ignore\n                            sorters={sortersProp.list}\n                        >\n                            {({ data }: { data: any[] }) => (\n                                <List>\n                                    {data.map(item => (\n                                        <ListItem key={item.id}>\n                                            <ListItemGraphic>\n                                                <img\n                                                    src={\"http://i.pravatar.cc/100?id=\" + item.id}\n                                                />\n                                            </ListItemGraphic>\n                                            <ListItemText>\n                                                {item.firstName} {item.lastName}\n                                                <ListItemTextSecondary>\n                                                    {item.email}\n                                                </ListItemTextSecondary>\n                                            </ListItemText>\n                                            <ListItemMeta>\n                                                <DeleteIcon\n                                                    onClick={() => {\n                                                        console.log(\"Redirect user to form.\");\n                                                    }}\n                                                />\n                                                <EditIcon\n                                                    onClick={() => {\n                                                        console.log(\"Show confirmation dialog.\");\n                                                    }}\n                                                />\n                                            </ListItemMeta>\n                                        </ListItem>\n                                    ))}\n                                </List>\n                            )}\n                        </DataList>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <DataList\n                        {...generalOptionsAndCallbacks}\n                        data={${JSON.stringify(dataProp, null, 2)}}\n                        meta={${JSON.stringify(metaProp, null, 2)}}\n                        sorters={${JSON.stringify(sortersProp.list, null, 2)}}\n                    >\n                      {({ data }) => (\n                            <List>\n                                {data.map(item => (\n                                    <ListItem key={item.id}>\n                                        <ListItemGraphic>\n                                            <img\n                                                src={\n                                                    \"//www.gravatar.com/avatar/\" +\n                                                    item.gravatar +\n                                                    \"?s=48\"\n                                                }\n                                            />\n                                        </ListItemGraphic>\n                                        <ListItemText>\n                                            {item.firstName} {item.lastName}\n                                            <ListItemTextSecondary>\n                                                {item.email}\n                                            </ListItemTextSecondary>\n                                        </ListItemText>\n                                        <ListItemMeta>\n                                                <DeleteIcon\n                                                    onClick={() => {\n                                                        console.log(\"Redirect user to form.\");\n                                                    }}\n                                                />\n                                                <EditIcon\n                                                    onClick={() => {\n                                                        console.log(\"Show confirmation dialog.\");\n                                                    }}\n                                                />\n                                        </ListItemMeta>\n                                    </ListItem>\n                                ))}\n                            </List>\n                        )}\n                    </DataList>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [\n                List,\n                ListItem,\n                ListItemText,\n                ListItemTextSecondary,\n                ListItemMeta,\n                ListItemGraphic\n            ]\n        }\n    }\n);\n"]}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","generalOptionsAndCallbacks","refresh","console","log","loading","boolean","title","text","multiActions","setNextPage","cursor","setPreviousPage","perPageOptions","array","setPerPage","perPage","setSorters","sorter","JSON","stringify","dataProp","object","id","firstName","lastName","email","metaProp","totalPages","totalCount","from","to","previousPage","nextPage","sortersProp","list","label","sorters","createdOn","name","readme","data","map","item","info","propTables","List","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListItemGraphic"],"sources":["DataList.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../DataList/README.md\";\nimport { withKnobs, boolean, text, object, array } from \"@storybook/addon-knobs\";\n\nimport { DataList } from \"./DataList\";\n\nimport { DeleteIcon, EditIcon } from \"./icons\";\nimport {\n    List,\n    ListItem,\n    ListItemText,\n    ListItemTextSecondary,\n    ListItemMeta,\n    ListItemGraphic\n} from \"./../List\";\n\nconst story = storiesOf(\"Components/List\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"data list\",\n    () => {\n        const generalOptionsAndCallbacks = {\n            refresh: () => {\n                console.log(`Implement \"refresh\" method.`);\n            },\n            loading: boolean(\"Loading\", false, \"Basic\"),\n            title: text(\"Title\", \"A list of all users\", \"Basic\"),\n            multiActions: boolean(\"Multi actions\", false, \"Basic\"),\n\n            setNextPage: (cursor: string) => {\n                console.log(`Implement setNextPage method (selected ${cursor}).`);\n            },\n            setPreviousPage: (cursor: string) => {\n                console.log(`Implement setPreviousPage method (selected ${cursor}).`);\n            },\n            perPageOptions: array(\n                \"perPageOptions\",\n                [\"10\", \"25\", \"50\"],\n                \",\",\n                \"Basic\"\n            ) as unknown as number[],\n            setPerPage: (perPage: string) => {\n                console.log(`Implement setPerPage method (selected ${perPage}).`);\n            },\n            setSorters: (sorter: any) => {\n                console.log(`Implement setSorters method (selected ${JSON.stringify(sorter)}).`);\n            }\n        };\n\n        const dataProp = object(\n            \"Data\",\n            [\n                {\n                    id: \"A\",\n                    firstName: \"John\",\n                    lastName: \"Doe\",\n                    email: \"john.doe@webiny.com\"\n                },\n                {\n                    id: \"B\",\n                    firstName: \"Jane\",\n                    lastName: \"Doe\",\n                    email: \"jane.doe@webiny.com\"\n                },\n                {\n                    id: \"C\",\n                    firstName: \"Foo\",\n                    lastName: \"Bar\",\n                    email: \"foo.bar@webiny.com\"\n                }\n            ],\n            \"Data\"\n        );\n\n        const metaProp = object(\n            \"Meta\",\n            {\n                totalPages: 1,\n                totalCount: 3,\n                from: 1,\n                to: 3,\n                previousPage: null,\n                nextPage: null\n            },\n            \"Meta\"\n        );\n\n        const sortersProp = {\n            list: object(\n                \"Sorters\",\n                [\n                    {\n                        label: \"Newest to oldest\",\n                        sorters: { createdOn: -1 }\n                    },\n                    {\n                        label: \"Oldest to newest\",\n                        sorters: { createdOn: 1 }\n                    },\n                    {\n                        label: \"Name A-Z\",\n                        sorters: { name: 1 }\n                    },\n                    {\n                        label: \"Name Z-A\",\n                        sorters: { name: -1 }\n                    }\n                ],\n                \"Sorters\"\n            )\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <DataList\n                            {...generalOptionsAndCallbacks}\n                            data={dataProp}\n                            meta={metaProp}\n                            // @ts-ignore\n                            sorters={sortersProp.list}\n                        >\n                            {({ data }: { data: any[] }) => (\n                                <List>\n                                    {data.map(item => (\n                                        <ListItem key={item.id}>\n                                            <ListItemGraphic>\n                                                <img\n                                                    src={\"http://i.pravatar.cc/100?id=\" + item.id}\n                                                />\n                                            </ListItemGraphic>\n                                            <ListItemText>\n                                                {item.firstName} {item.lastName}\n                                                <ListItemTextSecondary>\n                                                    {item.email}\n                                                </ListItemTextSecondary>\n                                            </ListItemText>\n                                            <ListItemMeta>\n                                                <DeleteIcon\n                                                    onClick={() => {\n                                                        console.log(\"Redirect user to form.\");\n                                                    }}\n                                                />\n                                                <EditIcon\n                                                    onClick={() => {\n                                                        console.log(\"Show confirmation dialog.\");\n                                                    }}\n                                                />\n                                            </ListItemMeta>\n                                        </ListItem>\n                                    ))}\n                                </List>\n                            )}\n                        </DataList>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <DataList\n                        {...generalOptionsAndCallbacks}\n                        data={${JSON.stringify(dataProp, null, 2)}}\n                        meta={${JSON.stringify(metaProp, null, 2)}}\n                        sorters={${JSON.stringify(sortersProp.list, null, 2)}}\n                    >\n                      {({ data }) => (\n                            <List>\n                                {data.map(item => (\n                                    <ListItem key={item.id}>\n                                        <ListItemGraphic>\n                                            <img\n                                                src={\n                                                    \"//www.gravatar.com/avatar/\" +\n                                                    item.gravatar +\n                                                    \"?s=48\"\n                                                }\n                                            />\n                                        </ListItemGraphic>\n                                        <ListItemText>\n                                            {item.firstName} {item.lastName}\n                                            <ListItemTextSecondary>\n                                                {item.email}\n                                            </ListItemTextSecondary>\n                                        </ListItemText>\n                                        <ListItemMeta>\n                                                <DeleteIcon\n                                                    onClick={() => {\n                                                        console.log(\"Redirect user to form.\");\n                                                    }}\n                                                />\n                                                <EditIcon\n                                                    onClick={() => {\n                                                        console.log(\"Show confirmation dialog.\");\n                                                    }}\n                                                />\n                                        </ListItemMeta>\n                                    </ListItem>\n                                ))}\n                            </List>\n                        )}\n                    </DataList>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [\n                List,\n                ListItem,\n                ListItemText,\n                ListItemTextSecondary,\n                ListItemMeta,\n                ListItemGraphic\n            ]\n        }\n    }\n);\n"],"mappings":"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"}

package/List/DataList/DataListModalOverlay/DataListModalOverlay.js

@@ -1,7 +1,21 @@
-import React, { useContext } from "react";
-import styled from "@emotion/styled";
-import { DataListModalOverlayContext } from "./DataListModalOverlayContext";
-export var SimpleOverlay = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleOverlay = exports.DataListModalWrapper = exports.DataListModalOverlay = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _DataListModalOverlayContext = require("./DataListModalOverlayContext");
+
+var SimpleOverlay = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1dhql4g0",
   label: "SimpleOverlay"
 })(function (_ref) {
@@ -19,7 +33,8 @@ export var SimpleOverlay = /*#__PURE__*/styled("div", {
     opacity: showOverlay ? 1 : 0
   };
 });
-export var DataListModalWrapper = /*#__PURE__*/styled("div", {
+exports.SimpleOverlay = SimpleOverlay;
+var DataListModalWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1dhql4g1",
   label: "DataListModalWrapper"
 })(function (_ref2) {
@@ -62,15 +77,17 @@ export var DataListModalWrapper = /*#__PURE__*/styled("div", {
     }
   };
 });
-export var DataListModalOverlay = function DataListModalOverlay(_ref3) {
+exports.DataListModalWrapper = DataListModalWrapper;
+
+var DataListModalOverlay = function DataListModalOverlay(_ref3) {
   var onDismiss = _ref3.onDismiss,
       children = _ref3.children;
 
-  var _useContext = useContext(DataListModalOverlayContext),
+  var _useContext = (0, _react.useContext)(_DataListModalOverlayContext.DataListModalOverlayContext),
       isOpen = _useContext.isOpen,
       setIsOpen = _useContext.setIsOpen;
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SimpleOverlay, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SimpleOverlay, {
     onClick: function onClick(e) {
       e.stopPropagation(); // Close the modal.
 
@@ -81,7 +98,9 @@ export var DataListModalOverlay = function DataListModalOverlay(_ref3) {
       }
     },
     showOverlay: isOpen
-  }), /*#__PURE__*/React.createElement(DataListModalWrapper, {
+  }), /*#__PURE__*/_react.default.createElement(DataListModalWrapper, {
     showOverlay: isOpen
   }, children));
-};
+};
+
+exports.DataListModalOverlay = DataListModalOverlay;

package/List/DataList/DataListModalOverlay/DataListModalOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DataListModalOverlay.tsx"],"names":["React","useContext","styled","DataListModalOverlayContext","SimpleOverlay","showOverlay","width","height","position","top","left","backgroundColor","transition","pointerEvents","zIndex","opacity","DataListModalWrapper","maxWidth","maxHeight","overflow","boxShadow","borderRadius","transform","paddingBottom","padding","display","justifyContent","color","border","DataListModalOverlay","onDismiss","children","isOpen","setIsOpen","e","stopPropagation"],"mappings":"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","sourcesContent":["import React, { useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport type SimpleOverlayProps = { showOverlay: boolean };\nexport const SimpleOverlay = styled<\"div\", SimpleOverlayProps>(\"div\")(({ showOverlay }) => ({\n    width: \"100%\",\n    height: \"100%\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    backgroundColor: showOverlay ? \"rgba(0, 0, 0, 0.32)\" : \"transparent\",\n    transition: \"150ms all ease-in-out\",\n    pointerEvents: showOverlay ? \"auto\" : \"none\",\n    zIndex: showOverlay ? 5 : -1,\n    opacity: showOverlay ? 1 : 0\n}));\n\nexport interface DataListModalWrapperProps {\n    showOverlay: boolean;\n}\nexport const DataListModalWrapper = styled<\"div\", DataListModalWrapperProps>(\"div\")(\n    ({ showOverlay }) => ({\n        position: \"absolute\",\n        top: \"0px\",\n        left: \"50%\",\n        width: \"90%\",\n        height: \"auto\",\n        maxWidth: \"426px\",\n        maxHeight: \"520px\",\n        overflow: \"auto\",\n        backgroundColor: \"var(--mdc-theme-surface)\",\n        boxShadow: \"0px 1px 5px rgba(0, 0, 0, 0.12)\",\n        borderRadius: \"0px 0px 4px 4px\",\n        transition: \"150ms opacity ease-in-out\",\n        pointerEvents: showOverlay ? \"auto\" : \"none\",\n        zIndex: showOverlay ? 5 : -1,\n        opacity: showOverlay ? 1 : 0,\n        transform: showOverlay ? \"translateX(-50%)\" : \"translateX(-1000px)\",\n\n        \"& .input-wrapper\": {\n            paddingBottom: \"16px\"\n        },\n\n        \"& .datalist-modal__footer\": {\n            padding: \"24px\",\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            \"& .mdc-button\": {\n                borderRadius: 4,\n                padding: \"0px 32px\"\n            },\n            \"& .datalist-modal__footer__action--secondary\": {\n                color: \"var(--mdc-theme-text-primary-on-background)\",\n                border: \"1px solid var(--mdc-theme-on-background)\"\n            },\n            \"& .datalist-modal__footer__action--primary\": {\n                backgroundColor: \"var(--mdc-theme-secondary)\"\n            }\n        }\n    })\n);\n\nexport interface DataListModalOverlayProps {\n    /*\n     * This function is called after closing the modal overlay.\n     */\n    onDismiss?: (event?: React.SyntheticEvent) => void;\n}\n\nexport const DataListModalOverlay: React.FC<DataListModalOverlayProps> = ({\n    onDismiss,\n    children\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n    return (\n        <React.Fragment>\n            <SimpleOverlay\n                onClick={e => {\n                    e.stopPropagation();\n                    // Close the modal.\n                    setIsOpen(false);\n\n                    if (typeof onDismiss === \"function\") {\n                        onDismiss();\n                    }\n                }}\n                showOverlay={isOpen}\n            />\n            <DataListModalWrapper showOverlay={isOpen}>{children}</DataListModalWrapper>\n        </React.Fragment>\n    );\n};\n"]}
+{"version":3,"names":["SimpleOverlay","styled","showOverlay","width","height","position","top","left","backgroundColor","transition","pointerEvents","zIndex","opacity","DataListModalWrapper","maxWidth","maxHeight","overflow","boxShadow","borderRadius","transform","paddingBottom","padding","display","justifyContent","color","border","DataListModalOverlay","onDismiss","children","useContext","DataListModalOverlayContext","isOpen","setIsOpen","e","stopPropagation"],"sources":["DataListModalOverlay.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport type SimpleOverlayProps = { showOverlay: boolean };\nexport const SimpleOverlay = styled<\"div\", SimpleOverlayProps>(\"div\")(({ showOverlay }) => ({\n    width: \"100%\",\n    height: \"100%\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    backgroundColor: showOverlay ? \"rgba(0, 0, 0, 0.32)\" : \"transparent\",\n    transition: \"150ms all ease-in-out\",\n    pointerEvents: showOverlay ? \"auto\" : \"none\",\n    zIndex: showOverlay ? 5 : -1,\n    opacity: showOverlay ? 1 : 0\n}));\n\nexport interface DataListModalWrapperProps {\n    showOverlay: boolean;\n}\nexport const DataListModalWrapper = styled<\"div\", DataListModalWrapperProps>(\"div\")(\n    ({ showOverlay }) => ({\n        position: \"absolute\",\n        top: \"0px\",\n        left: \"50%\",\n        width: \"90%\",\n        height: \"auto\",\n        maxWidth: \"426px\",\n        maxHeight: \"520px\",\n        overflow: \"auto\",\n        backgroundColor: \"var(--mdc-theme-surface)\",\n        boxShadow: \"0px 1px 5px rgba(0, 0, 0, 0.12)\",\n        borderRadius: \"0px 0px 4px 4px\",\n        transition: \"150ms opacity ease-in-out\",\n        pointerEvents: showOverlay ? \"auto\" : \"none\",\n        zIndex: showOverlay ? 5 : -1,\n        opacity: showOverlay ? 1 : 0,\n        transform: showOverlay ? \"translateX(-50%)\" : \"translateX(-1000px)\",\n\n        \"& .input-wrapper\": {\n            paddingBottom: \"16px\"\n        },\n\n        \"& .datalist-modal__footer\": {\n            padding: \"24px\",\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            \"& .mdc-button\": {\n                borderRadius: 4,\n                padding: \"0px 32px\"\n            },\n            \"& .datalist-modal__footer__action--secondary\": {\n                color: \"var(--mdc-theme-text-primary-on-background)\",\n                border: \"1px solid var(--mdc-theme-on-background)\"\n            },\n            \"& .datalist-modal__footer__action--primary\": {\n                backgroundColor: \"var(--mdc-theme-secondary)\"\n            }\n        }\n    })\n);\n\nexport interface DataListModalOverlayProps {\n    /*\n     * This function is called after closing the modal overlay.\n     */\n    onDismiss?: (event?: React.SyntheticEvent) => void;\n}\n\nexport const DataListModalOverlay: React.FC<DataListModalOverlayProps> = ({\n    onDismiss,\n    children\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n    return (\n        <React.Fragment>\n            <SimpleOverlay\n                onClick={e => {\n                    e.stopPropagation();\n                    // Close the modal.\n                    setIsOpen(false);\n\n                    if (typeof onDismiss === \"function\") {\n                        onDismiss();\n                    }\n                }}\n                showOverlay={isOpen}\n            />\n            <DataListModalWrapper showOverlay={isOpen}>{children}</DataListModalWrapper>\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAGO,IAAMA,aAAa,oBAAGC,eAAH,EAAqC,KAArC;EAAA;EAAA;AAAA,GAA4C;EAAA,IAAGC,WAAH,QAAGA,WAAH;EAAA,OAAsB;IACxFC,KAAK,EAAE,MADiF;IAExFC,MAAM,EAAE,MAFgF;IAGxFC,QAAQ,EAAE,UAH8E;IAIxFC,GAAG,EAAE,CAJmF;IAKxFC,IAAI,EAAE,CALkF;IAMxFC,eAAe,EAAEN,WAAW,GAAG,qBAAH,GAA2B,aANiC;IAOxFO,UAAU,EAAE,uBAP4E;IAQxFC,aAAa,EAAER,WAAW,GAAG,MAAH,GAAY,MARkD;IASxFS,MAAM,EAAET,WAAW,GAAG,CAAH,GAAO,CAAC,CAT6D;IAUxFU,OAAO,EAAEV,WAAW,GAAG,CAAH,GAAO;EAV6D,CAAtB;AAAA,CAA5C,CAAnB;;AAgBA,IAAMW,oBAAoB,oBAAGZ,eAAH,EAA4C,KAA5C;EAAA;EAAA;AAAA,GAC7B;EAAA,IAAGC,WAAH,SAAGA,WAAH;EAAA,OAAsB;IAClBG,QAAQ,EAAE,UADQ;IAElBC,GAAG,EAAE,KAFa;IAGlBC,IAAI,EAAE,KAHY;IAIlBJ,KAAK,EAAE,KAJW;IAKlBC,MAAM,EAAE,MALU;IAMlBU,QAAQ,EAAE,OANQ;IAOlBC,SAAS,EAAE,OAPO;IAQlBC,QAAQ,EAAE,MARQ;IASlBR,eAAe,EAAE,0BATC;IAUlBS,SAAS,EAAE,iCAVO;IAWlBC,YAAY,EAAE,iBAXI;IAYlBT,UAAU,EAAE,2BAZM;IAalBC,aAAa,EAAER,WAAW,GAAG,MAAH,GAAY,MAbpB;IAclBS,MAAM,EAAET,WAAW,GAAG,CAAH,GAAO,CAAC,CAdT;IAelBU,OAAO,EAAEV,WAAW,GAAG,CAAH,GAAO,CAfT;IAgBlBiB,SAAS,EAAEjB,WAAW,GAAG,kBAAH,GAAwB,qBAhB5B;IAkBlB,oBAAoB;MAChBkB,aAAa,EAAE;IADC,CAlBF;IAsBlB,6BAA6B;MACzBC,OAAO,EAAE,MADgB;MAEzBC,OAAO,EAAE,MAFgB;MAGzBC,cAAc,EAAE,eAHS;MAIzB,iBAAiB;QACbL,YAAY,EAAE,CADD;QAEbG,OAAO,EAAE;MAFI,CAJQ;MAQzB,gDAAgD;QAC5CG,KAAK,EAAE,6CADqC;QAE5CC,MAAM,EAAE;MAFoC,CARvB;MAYzB,8CAA8C;QAC1CjB,eAAe,EAAE;MADyB;IAZrB;EAtBX,CAAtB;AAAA,CAD6B,CAA1B;;;AAiDA,IAAMkB,oBAAyD,GAAG,SAA5DA,oBAA4D,QAGnE;EAAA,IAFFC,SAEE,SAFFA,SAEE;EAAA,IADFC,QACE,SADFA,QACE;;EACF,kBAA8B,IAAAC,iBAAA,EAAWC,wDAAX,CAA9B;EAAA,IAAQC,MAAR,eAAQA,MAAR;EAAA,IAAgBC,SAAhB,eAAgBA,SAAhB;;EACA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,aAAD;IACI,OAAO,EAAE,iBAAAC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAF,GADU,CAEV;;MACAF,SAAS,CAAC,KAAD,CAAT;;MAEA,IAAI,OAAOL,SAAP,KAAqB,UAAzB,EAAqC;QACjCA,SAAS;MACZ;IACJ,CATL;IAUI,WAAW,EAAEI;EAVjB,EADJ,eAaI,6BAAC,oBAAD;IAAsB,WAAW,EAAEA;EAAnC,GAA4CH,QAA5C,CAbJ,CADJ;AAiBH,CAtBM"}

package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js

@@ -1,21 +1,39 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataListModalOverlayAction = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = require("../../../Button");
+
+var _DataListModalOverlayContext = require("./DataListModalOverlayContext");
+
 var _excluded = ["icon"];
-import React, { useContext } from "react";
-import { IconButton } from "../../../Button";
-import { DataListModalOverlayContext } from "./DataListModalOverlayContext";
-export var DataListModalOverlayAction = function DataListModalOverlayAction(_ref) {
+
+var DataListModalOverlayAction = function DataListModalOverlayAction(_ref) {
   var icon = _ref.icon,
-      rest = _objectWithoutProperties(_ref, _excluded);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _useContext = useContext(DataListModalOverlayContext),
+  var _useContext = (0, _react.useContext)(_DataListModalOverlayContext.DataListModalOverlayContext),
       isOpen = _useContext.isOpen,
       setIsOpen = _useContext.setIsOpen;
 
-  return /*#__PURE__*/React.createElement(IconButton, {
+  return /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     "data-testid": rest["data-testid"],
     icon: icon,
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     }
   });
-};
+};
+
+exports.DataListModalOverlayAction = DataListModalOverlayAction;

package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DataListModalOverlayAction.tsx"],"names":["React","useContext","IconButton","DataListModalOverlayContext","DataListModalOverlayAction","icon","rest","isOpen","setIsOpen"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT;AACA,SAASC,2BAAT;AAOA,OAAO,IAAMC,0BAAqE,GAAG,SAAxEA,0BAAwE,OAG/E;AAAA,MAFFC,IAEE,QAFFA,IAEE;AAAA,MADCC,IACD;;AACF,oBAA8BL,UAAU,CAACE,2BAAD,CAAxC;AAAA,MAAQI,MAAR,eAAQA,MAAR;AAAA,MAAgBC,SAAhB,eAAgBA,SAAhB;;AAEA,sBACI,oBAAC,UAAD;AACI,mBAAaF,IAAI,CAAC,aAAD,CADrB;AAEI,IAAA,IAAI,EAAED,IAFV;AAGI,IAAA,OAAO,EAAE;AAAA,aAAMG,SAAS,CAAC,CAACD,MAAF,CAAf;AAAA;AAHb,IADJ;AAOH,CAbM","sourcesContent":["import React, { useContext } from \"react\";\nimport { IconButton } from \"../../../Button\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport interface DataListModalOverlayActionProps {\n    icon: React.ReactNode;\n    \"data-testid\"?: string;\n}\n\nexport const DataListModalOverlayAction: React.FC<DataListModalOverlayActionProps> = ({\n    icon,\n    ...rest\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n\n    return (\n        <IconButton\n            data-testid={rest[\"data-testid\"]}\n            icon={icon}\n            onClick={() => setIsOpen(!isOpen)}\n        />\n    );\n};\n"]}
+{"version":3,"names":["DataListModalOverlayAction","icon","rest","useContext","DataListModalOverlayContext","isOpen","setIsOpen"],"sources":["DataListModalOverlayAction.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { IconButton } from \"../../../Button\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport interface DataListModalOverlayActionProps {\n    icon: React.ReactNode;\n    \"data-testid\"?: string;\n}\n\nexport const DataListModalOverlayAction: React.FC<DataListModalOverlayActionProps> = ({\n    icon,\n    ...rest\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n\n    return (\n        <IconButton\n            data-testid={rest[\"data-testid\"]}\n            icon={icon}\n            onClick={() => setIsOpen(!isOpen)}\n        />\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAOO,IAAMA,0BAAqE,GAAG,SAAxEA,0BAAwE,OAG/E;EAAA,IAFFC,IAEE,QAFFA,IAEE;EAAA,IADCC,IACD;;EACF,kBAA8B,IAAAC,iBAAA,EAAWC,wDAAX,CAA9B;EAAA,IAAQC,MAAR,eAAQA,MAAR;EAAA,IAAgBC,SAAhB,eAAgBA,SAAhB;;EAEA,oBACI,6BAAC,kBAAD;IACI,eAAaJ,IAAI,CAAC,aAAD,CADrB;IAEI,IAAI,EAAED,IAFV;IAGI,OAAO,EAAE;MAAA,OAAMK,SAAS,CAAC,CAACD,MAAF,CAAf;IAAA;EAHb,EADJ;AAOH,CAbM"}

package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js

@@ -1,23 +1,39 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React from "react";
-export var DataListModalOverlayContext = /*#__PURE__*/React.createContext({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataListModalOverlayProvider = exports.DataListModalOverlayContext = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var DataListModalOverlayContext = /*#__PURE__*/_react.default.createContext({
   isOpen: false,
   setIsOpen: function setIsOpen() {
     return void 0;
   }
 });
-export var DataListModalOverlayProvider = function DataListModalOverlayProvider(_ref) {
+
+exports.DataListModalOverlayContext = DataListModalOverlayContext;
+
+var DataListModalOverlayProvider = function DataListModalOverlayProvider(_ref) {
   var children = _ref.children;
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  return /*#__PURE__*/React.createElement(DataListModalOverlayContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(DataListModalOverlayContext.Provider, {
     value: {
       isOpen: isOpen,
       setIsOpen: setIsOpen
     }
   }, children);
-};
+};
+
+exports.DataListModalOverlayProvider = DataListModalOverlayProvider;

package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DataListModalOverlayContext.tsx"],"names":["React","DataListModalOverlayContext","createContext","isOpen","setIsOpen","DataListModalOverlayProvider","children","useState"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAMA,OAAO,IAAMC,2BAA2B,gBAAGD,KAAK,CAACE,aAAN,CACvC;AACIC,EAAAA,MAAM,EAAE,KADZ;AAEIC,EAAAA,SAAS,EAAE,qBAAM;AACb,WAAO,KAAK,CAAZ;AACH;AAJL,CADuC,CAApC;AAaP,OAAO,IAAMC,4BAAyE,GAAG,SAA5EA,4BAA4E,OAEnF;AAAA,MADFC,QACE,QADFA,QACE;;AACF,wBAA4BN,KAAK,CAACO,QAAN,CAAwB,KAAxB,CAA5B;AAAA;AAAA,MAAOJ,MAAP;AAAA,MAAeC,SAAf;;AAEA,sBACI,oBAAC,2BAAD,CAA6B,QAA7B;AAAsC,IAAA,KAAK,EAAE;AAAED,MAAAA,MAAM,EAANA,MAAF;AAAUC,MAAAA,SAAS,EAATA;AAAV;AAA7C,KACKE,QADL,CADJ;AAKH,CAVM","sourcesContent":["import React from \"react\";\n\ninterface DataListModalOverlayProviderContext {\n    isOpen: boolean;\n    setIsOpen: (value: boolean) => void;\n}\nexport const DataListModalOverlayContext = React.createContext<DataListModalOverlayProviderContext>(\n    {\n        isOpen: false,\n        setIsOpen: () => {\n            return void 0;\n        }\n    }\n);\n\nexport interface DataListModalOverlayProviderProps {\n    children?: React.ReactChild | React.ReactChild[];\n}\n\nexport const DataListModalOverlayProvider: React.FC<DataListModalOverlayProviderProps> = ({\n    children\n}) => {\n    const [isOpen, setIsOpen] = React.useState<boolean>(false);\n\n    return (\n        <DataListModalOverlayContext.Provider value={{ isOpen, setIsOpen }}>\n            {children}\n        </DataListModalOverlayContext.Provider>\n    );\n};\n"]}
+{"version":3,"names":["DataListModalOverlayContext","React","createContext","isOpen","setIsOpen","DataListModalOverlayProvider","children","useState"],"sources":["DataListModalOverlayContext.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface DataListModalOverlayProviderContext {\n    isOpen: boolean;\n    setIsOpen: (value: boolean) => void;\n}\nexport const DataListModalOverlayContext = React.createContext<DataListModalOverlayProviderContext>(\n    {\n        isOpen: false,\n        setIsOpen: () => {\n            return void 0;\n        }\n    }\n);\n\nexport interface DataListModalOverlayProviderProps {\n    children?: React.ReactChild | React.ReactChild[];\n}\n\nexport const DataListModalOverlayProvider: React.FC<DataListModalOverlayProviderProps> = ({\n    children\n}) => {\n    const [isOpen, setIsOpen] = React.useState<boolean>(false);\n\n    return (\n        <DataListModalOverlayContext.Provider value={{ isOpen, setIsOpen }}>\n            {children}\n        </DataListModalOverlayContext.Provider>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AAMO,IAAMA,2BAA2B,gBAAGC,cAAA,CAAMC,aAAN,CACvC;EACIC,MAAM,EAAE,KADZ;EAEIC,SAAS,EAAE,qBAAM;IACb,OAAO,KAAK,CAAZ;EACH;AAJL,CADuC,CAApC;;;;AAaA,IAAMC,4BAAyE,GAAG,SAA5EA,4BAA4E,OAEnF;EAAA,IADFC,QACE,QADFA,QACE;;EACF,sBAA4BL,cAAA,CAAMM,QAAN,CAAwB,KAAxB,CAA5B;EAAA;EAAA,IAAOJ,MAAP;EAAA,IAAeC,SAAf;;EAEA,oBACI,6BAAC,2BAAD,CAA6B,QAA7B;IAAsC,KAAK,EAAE;MAAED,MAAM,EAANA,MAAF;MAAUC,SAAS,EAATA;IAAV;EAA7C,GACKE,QADL,CADJ;AAKH,CAVM"}

package/List/DataList/DataListModalOverlay/index.js

@@ -1,3 +1,35 @@
-export { DataListModalOverlay } from "./DataListModalOverlay";
-export { DataListModalOverlayAction } from "./DataListModalOverlayAction";
-export { DataListModalOverlayContext, DataListModalOverlayProvider } from "./DataListModalOverlayContext";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DataListModalOverlay", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlay.DataListModalOverlay;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlayAction", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlayAction.DataListModalOverlayAction;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlayContext", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlayContext.DataListModalOverlayContext;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlayProvider", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlayContext.DataListModalOverlayProvider;
+  }
+});
+
+var _DataListModalOverlay = require("./DataListModalOverlay");
+
+var _DataListModalOverlayAction = require("./DataListModalOverlayAction");
+
+var _DataListModalOverlayContext = require("./DataListModalOverlayContext");

package/List/DataList/DataListModalOverlay/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["DataListModalOverlay","DataListModalOverlayAction","DataListModalOverlayContext","DataListModalOverlayProvider"],"mappings":"AAAA,SAASA,oBAAT;AACA,SAASC,0BAAT;AACA,SACIC,2BADJ,EAEIC,4BAFJ","sourcesContent":["export { DataListModalOverlay } from \"./DataListModalOverlay\";\nexport { DataListModalOverlayAction } from \"./DataListModalOverlayAction\";\nexport {\n    DataListModalOverlayContext,\n    DataListModalOverlayProvider\n} from \"./DataListModalOverlayContext\";\n"]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { DataListModalOverlay } from \"./DataListModalOverlay\";\nexport { DataListModalOverlayAction } from \"./DataListModalOverlayAction\";\nexport {\n    DataListModalOverlayContext,\n    DataListModalOverlayProvider\n} from \"./DataListModalOverlayContext\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA"}

package/List/DataList/Loader.js

@@ -1,12 +1,23 @@
-import React from "react";
-import styled from "@emotion/styled";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+
 /**
  * Package react-loading-skeleton does not have types.
  */
 // @ts-ignore
-
-import Skeleton from "react-loading-skeleton";
-var LoaderUl = /*#__PURE__*/styled("ul", {
+var LoaderUl = /*#__PURE__*/(0, _styled.default)("ul", {
   target: "e1nb7uzc0",
   label: "LoaderUl"
 })({
@@ -42,21 +53,22 @@ var LoaderUl = /*#__PURE__*/styled("ul", {
 });
 
 var Loader = function Loader() {
-  return /*#__PURE__*/React.createElement(LoaderUl, {
+  return /*#__PURE__*/_react.default.createElement(LoaderUl, {
     "data-testid": "default-data-list.loading"
   }, [1, 2, 3, 4, 5].map(function (item) {
-    return /*#__PURE__*/React.createElement("li", {
+    return /*#__PURE__*/_react.default.createElement("li", {
       key: "list-" + item
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: "graphic"
-    }, /*#__PURE__*/React.createElement(Skeleton, null)), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null)), /*#__PURE__*/_react.default.createElement("div", {
       className: "data"
-    }, /*#__PURE__*/React.createElement(Skeleton, {
+    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
       count: 2
-    })), /*#__PURE__*/React.createElement("div", {
+    })), /*#__PURE__*/_react.default.createElement("div", {
       className: "actions"
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton, null))));
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null))));
   }));
 };
 
-export default Loader;
+var _default = Loader;
+exports.default = _default;

package/List/DataList/Loader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Loader.tsx"],"names":["React","styled","Skeleton","LoaderUl","listStyle","padding","display","verticalAlign","backgroundColor","backgroundImage","fontSize","width","marginLeft","textAlign","Loader","map","item"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA;AACA;AACA;AACA;;AACA,OAAOC,QAAP,MAAqB,wBAArB;AAEA,IAAMC,QAAQ,gBAAGF,MAAH,CAAU,IAAV;AAAA;AAAA;AAAA,GAAgB;AAC1BG,EAAAA,SAAS,EAAE,MADe;AAE1BC,EAAAA,OAAO,EAAE,WAFiB;AAG1B,cAAY;AACRC,IAAAA,OAAO,EAAE,cADD;AAERC,IAAAA,aAAa,EAAE,QAFP;AAGR,+BAA2B;AACvBC,MAAAA,eAAe,EAAE,6BADM;AAEvBC,MAAAA,eAAe,EACX;AAHmB;AAHnB,GAHc;AAY1B,cAAY;AACRC,IAAAA,QAAQ,EAAE,EADF;AAERC,IAAAA,KAAK,EAAE;AAFC,GAZc;AAgB1B,WAAS;AACLA,IAAAA,KAAK,EAAE,mBADF;AAELC,IAAAA,UAAU,EAAE;AAFP,GAhBiB;AAoB1B,cAAY;AACRD,IAAAA,KAAK,EAAE,mBADC;AAERC,IAAAA,UAAU,EAAE,EAFJ;AAGRC,IAAAA,SAAS,EAAE,OAHH;AAIR,aAAS;AACLP,MAAAA,OAAO,EAAE,cADJ;AAELI,MAAAA,QAAQ,EAAE,EAFL;AAGLE,MAAAA,UAAU,EAAE,EAHP;AAILD,MAAAA,KAAK,EAAE;AAJF;AAJD;AApBc,CAAhB,CAAd;;AAiCA,IAAMG,MAAgB,GAAG,SAAnBA,MAAmB;AAAA,sBACrB,oBAAC,QAAD;AAAU,mBAAa;AAAvB,KACK,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,EAAa,CAAb,EAAgBC,GAAhB,CAAoB,UAAAC,IAAI;AAAA,wBACrB;AAAI,MAAA,GAAG,EAAE,UAAUA;AAAnB,oBACI;AAAK,MAAA,SAAS,EAAC;AAAf,oBACI,oBAAC,QAAD,OADJ,CADJ,eAII;AAAK,MAAA,SAAS,EAAC;AAAf,oBACI,oBAAC,QAAD;AAAU,MAAA,KAAK,EAAE;AAAjB,MADJ,CAJJ,eAOI;AAAK,MAAA,SAAS,EAAC;AAAf,oBACI,8CACI,oBAAC,QAAD,OADJ,CADJ,eAII,8CACI,oBAAC,QAAD,OADJ,CAJJ,CAPJ,CADqB;AAAA,GAAxB,CADL,CADqB;AAAA,CAAzB;;AAuBA,eAAeF,MAAf","sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n/**\n * Package react-loading-skeleton does not have types.\n */\n// @ts-ignore\nimport Skeleton from \"react-loading-skeleton\";\n\nconst LoaderUl = styled(\"ul\")({\n    listStyle: \"none\",\n    padding: \"10px 20px\",\n    \"li > div\": {\n        display: \"inline-block\",\n        verticalAlign: \"middle\",\n        \".react-loading-skeleton\": {\n            backgroundColor: \"var(--mdc-theme-background)\",\n            backgroundImage:\n                \"linear-gradient(90deg, var(--mdc-theme-background), var(--mdc-theme-surface), var(--mdc-theme-background))\"\n        }\n    },\n    \".graphic\": {\n        fontSize: 36,\n        width: 36\n    },\n    \".data\": {\n        width: \"calc(-36px + 75%)\",\n        marginLeft: 10\n    },\n    \".actions\": {\n        width: \"calc(-36px + 25%)\",\n        marginLeft: 10,\n        textAlign: \"right\",\n        \"> div\": {\n            display: \"inline-block\",\n            fontSize: 24,\n            marginLeft: 10,\n            width: 24\n        }\n    }\n});\n\nconst Loader: React.FC = () => (\n    <LoaderUl data-testid={\"default-data-list.loading\"}>\n        {[1, 2, 3, 4, 5].map(item => (\n            <li key={\"list-\" + item}>\n                <div className=\"graphic\">\n                    <Skeleton />\n                </div>\n                <div className=\"data\">\n                    <Skeleton count={2} />\n                </div>\n                <div className=\"actions\">\n                    <div>\n                        <Skeleton />\n                    </div>\n                    <div>\n                        <Skeleton />\n                    </div>\n                </div>\n            </li>\n        ))}\n    </LoaderUl>\n);\n\nexport default Loader;\n"]}
+{"version":3,"names":["LoaderUl","styled","listStyle","padding","display","verticalAlign","backgroundColor","backgroundImage","fontSize","width","marginLeft","textAlign","Loader","map","item"],"sources":["Loader.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n/**\n * Package react-loading-skeleton does not have types.\n */\n// @ts-ignore\nimport Skeleton from \"react-loading-skeleton\";\n\nconst LoaderUl = styled(\"ul\")({\n    listStyle: \"none\",\n    padding: \"10px 20px\",\n    \"li > div\": {\n        display: \"inline-block\",\n        verticalAlign: \"middle\",\n        \".react-loading-skeleton\": {\n            backgroundColor: \"var(--mdc-theme-background)\",\n            backgroundImage:\n                \"linear-gradient(90deg, var(--mdc-theme-background), var(--mdc-theme-surface), var(--mdc-theme-background))\"\n        }\n    },\n    \".graphic\": {\n        fontSize: 36,\n        width: 36\n    },\n    \".data\": {\n        width: \"calc(-36px + 75%)\",\n        marginLeft: 10\n    },\n    \".actions\": {\n        width: \"calc(-36px + 25%)\",\n        marginLeft: 10,\n        textAlign: \"right\",\n        \"> div\": {\n            display: \"inline-block\",\n            fontSize: 24,\n            marginLeft: 10,\n            width: 24\n        }\n    }\n});\n\nconst Loader: React.FC = () => (\n    <LoaderUl data-testid={\"default-data-list.loading\"}>\n        {[1, 2, 3, 4, 5].map(item => (\n            <li key={\"list-\" + item}>\n                <div className=\"graphic\">\n                    <Skeleton />\n                </div>\n                <div className=\"data\">\n                    <Skeleton count={2} />\n                </div>\n                <div className=\"actions\">\n                    <div>\n                        <Skeleton />\n                    </div>\n                    <div>\n                        <Skeleton />\n                    </div>\n                </div>\n            </li>\n        ))}\n    </LoaderUl>\n);\n\nexport default Loader;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAKA;;AAJA;AACA;AACA;AACA;AAGA,IAAMA,QAAQ,oBAAGC,eAAH,EAAU,IAAV;EAAA;EAAA;AAAA,GAAgB;EAC1BC,SAAS,EAAE,MADe;EAE1BC,OAAO,EAAE,WAFiB;EAG1B,YAAY;IACRC,OAAO,EAAE,cADD;IAERC,aAAa,EAAE,QAFP;IAGR,2BAA2B;MACvBC,eAAe,EAAE,6BADM;MAEvBC,eAAe,EACX;IAHmB;EAHnB,CAHc;EAY1B,YAAY;IACRC,QAAQ,EAAE,EADF;IAERC,KAAK,EAAE;EAFC,CAZc;EAgB1B,SAAS;IACLA,KAAK,EAAE,mBADF;IAELC,UAAU,EAAE;EAFP,CAhBiB;EAoB1B,YAAY;IACRD,KAAK,EAAE,mBADC;IAERC,UAAU,EAAE,EAFJ;IAGRC,SAAS,EAAE,OAHH;IAIR,SAAS;MACLP,OAAO,EAAE,cADJ;MAELI,QAAQ,EAAE,EAFL;MAGLE,UAAU,EAAE,EAHP;MAILD,KAAK,EAAE;IAJF;EAJD;AApBc,CAAhB,CAAd;;AAiCA,IAAMG,MAAgB,GAAG,SAAnBA,MAAmB;EAAA,oBACrB,6BAAC,QAAD;IAAU,eAAa;EAAvB,GACK,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,EAAa,CAAb,EAAgBC,GAAhB,CAAoB,UAAAC,IAAI;IAAA,oBACrB;MAAI,GAAG,EAAE,UAAUA;IAAnB,gBACI;MAAK,SAAS,EAAC;IAAf,gBACI,6BAAC,6BAAD,OADJ,CADJ,eAII;MAAK,SAAS,EAAC;IAAf,gBACI,6BAAC,6BAAD;MAAU,KAAK,EAAE;IAAjB,EADJ,CAJJ,eAOI;MAAK,SAAS,EAAC;IAAf,gBACI,uDACI,6BAAC,6BAAD,OADJ,CADJ,eAII,uDACI,6BAAC,6BAAD,OADJ,CAJJ,CAPJ,CADqB;EAAA,CAAxB,CADL,CADqB;AAAA,CAAzB;;eAuBeF,M"}

package/List/DataList/NoData.js

@@ -1,7 +1,19 @@
-import React from "react";
-import { Typography } from "../../Typography";
-import styled from "@emotion/styled";
-var NoDataWrapper = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Typography = require("../../Typography");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var NoDataWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "enkc7l50",
   label: "NoDataWrapper"
 })({
@@ -11,9 +23,10 @@ var NoDataWrapper = /*#__PURE__*/styled("div", {
 });
 
 var NoData = function NoData() {
-  return /*#__PURE__*/React.createElement(NoDataWrapper, null, /*#__PURE__*/React.createElement(Typography, {
+  return /*#__PURE__*/_react.default.createElement(NoDataWrapper, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "overline"
   }, "No records found."));
 };
 
-export default NoData;
+var _default = NoData;
+exports.default = _default;

package/List/DataList/NoData.js.map

@@ -1 +1 @@
-{"version":3,"sources":["NoData.tsx"],"names":["React","Typography","styled","NoDataWrapper","textAlign","padding","color","NoData"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AAEA,IAAMC,aAAa,gBAAGD,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AAChCE,EAAAA,SAAS,EAAE,QADqB;AAEhCC,EAAAA,OAAO,EAAE,GAFuB;AAGhCC,EAAAA,KAAK,EAAE;AAHyB,CAAjB,CAAnB;;AAMA,IAAMC,MAAgB,GAAG,SAAnBA,MAAmB;AAAA,sBACrB,oBAAC,aAAD,qBACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,yBADJ,CADqB;AAAA,CAAzB;;AAMA,eAAeA,MAAf","sourcesContent":["import React from \"react\";\nimport { Typography } from \"../../Typography\";\nimport styled from \"@emotion/styled\";\n\nconst NoDataWrapper = styled(\"div\")({\n    textAlign: \"center\",\n    padding: 100,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst NoData: React.FC = () => (\n    <NoDataWrapper>\n        <Typography use=\"overline\">No records found.</Typography>\n    </NoDataWrapper>\n);\n\nexport default NoData;\n"]}
+{"version":3,"names":["NoDataWrapper","styled","textAlign","padding","color","NoData"],"sources":["NoData.tsx"],"sourcesContent":["import React from \"react\";\nimport { Typography } from \"../../Typography\";\nimport styled from \"@emotion/styled\";\n\nconst NoDataWrapper = styled(\"div\")({\n    textAlign: \"center\",\n    padding: 100,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst NoData: React.FC = () => (\n    <NoDataWrapper>\n        <Typography use=\"overline\">No records found.</Typography>\n    </NoDataWrapper>\n);\n\nexport default NoData;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAChCC,SAAS,EAAE,QADqB;EAEhCC,OAAO,EAAE,GAFuB;EAGhCC,KAAK,EAAE;AAHyB,CAAjB,CAAnB;;AAMA,IAAMC,MAAgB,GAAG,SAAnBA,MAAmB;EAAA,oBACrB,6BAAC,aAAD,qBACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,uBADJ,CADqB;AAAA,CAAzB;;eAMeA,M"}