@webiny/ui 0.0.0-unstable.fcdad0bc61 → 0.0.0-unstable.fdd9228b5d

package/Chips/Chips.stories.js

@@ -1,40 +0,0 @@
-"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("./README.md"));
-
-var _baselineDone24px = require("./icons/baseline-done-24px.svg");
-
-var _baselineEmail24px = require("./icons/baseline-email-24px.svg");
-
-var _index = require("./index");
-
-var story = (0, _react2.storiesOf)("Components/Chips", module);
-story.add("usage", function () {
-  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, {
-    title: "Simple chips with a label and description"
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.Chips, null, /*#__PURE__*/_react.default.createElement(_index.Chip, {
-    selected: true
-  }, "Cookies"), /*#__PURE__*/_react.default.createElement(_index.Chip, null, "Pizza"), /*#__PURE__*/_react.default.createElement(_index.Chip, null, "Icecream")), /*#__PURE__*/_react.default.createElement(_index.Chips, null, /*#__PURE__*/_react.default.createElement(_index.Chip, {
-    icon: /*#__PURE__*/_react.default.createElement(_baselineEmail24px.ReactComponent, null)
-  }, "Cookies"), /*#__PURE__*/_react.default.createElement(_index.Chip, {
-    trailingIcon: true,
-    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
-  }, "Cookies"), /*#__PURE__*/_react.default.createElement(_index.Chip, {
-    icon: /*#__PURE__*/_react.default.createElement(_baselineEmail24px.ReactComponent, null)
-  }, "Cookies"), /*#__PURE__*/_react.default.createElement(_index.Chip, {
-    trailingIcon: true,
-    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
-  }, "Cookies")))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                         <div>\n                            <Chips>\n                                <Chip selected>\n                                    Cookies\n                                </Chip>\n                                <Chip>\n                                    Pizza\n                                </Chip>\n                                <Chip>\n                                    Icecream\n                                </Chip>\n                            </Chips>\n                            <Chips>\n                                <Chip>\n                                    <ChipIcon leading icon={<BaselineEmailIcon />} />\n                                    Cookies\n                                    <ChipIcon trailing icon={<BaselineDoneIcon />} />\n                                </Chip>\n                            </Chips>\n                        </div>\n                    ")));
-}, {
-  info: {
-    propTables: [_index.Chip, _index.Chips]
-  }
-});

package/Chips/Chips.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Chip","Chips"],"sources":["Chips.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 \"./README.md\";\n\nimport { ReactComponent as BaselineDoneIcon } from \"./icons/baseline-done-24px.svg\";\nimport { ReactComponent as BaselineEmailIcon } from \"./icons/baseline-email-24px.svg\";\nimport { Chip, Chips } from \"./index\";\n\nconst story = storiesOf(\"Components/Chips\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple chips with a label and description\"}>\n                        <div>\n                            <Chips>\n                                <Chip selected>Cookies</Chip>\n                                <Chip>Pizza</Chip>\n                                <Chip>Icecream</Chip>\n                            </Chips>\n\n                            <Chips>\n                                <Chip icon={<BaselineEmailIcon />}>Cookies</Chip>\n                                <Chip trailingIcon icon={<BaselineDoneIcon />}>\n                                    Cookies\n                                </Chip>\n                                <Chip icon={<BaselineEmailIcon />}>Cookies</Chip>\n                                <Chip trailingIcon icon={<BaselineDoneIcon />}>\n                                    Cookies\n                                </Chip>\n                            </Chips>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                         <div>\n                            <Chips>\n                                <Chip selected>\n                                    Cookies\n                                </Chip>\n                                <Chip>\n                                    Pizza\n                                </Chip>\n                                <Chip>\n                                    Icecream\n                                </Chip>\n                            </Chips>\n                            <Chips>\n                                <Chip>\n                                    <ChipIcon leading icon={<BaselineEmailIcon />} />\n                                    Cookies\n                                    <ChipIcon trailing icon={<BaselineDoneIcon />} />\n                                </Chip>\n                            </Chips>\n                        </div>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Chip, Chips] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,uDACI,6BAAC,YAAD,qBACI,6BAAC,WAAD;IAAM,QAAQ;EAAd,aADJ,eAEI,6BAAC,WAAD,gBAFJ,eAGI,6BAAC,WAAD,mBAHJ,CADJ,eAOI,6BAAC,YAAD,qBACI,6BAAC,WAAD;IAAM,IAAI,eAAE,6BAAC,iCAAD;EAAZ,aADJ,eAEI,6BAAC,WAAD;IAAM,YAAY,MAAlB;IAAmB,IAAI,eAAE,6BAAC,gCAAD;EAAzB,aAFJ,eAKI,6BAAC,WAAD;IAAM,IAAI,eAAE,6BAAC,iCAAD;EAAZ,aALJ,eAMI,6BAAC,WAAD;IAAM,YAAY,MAAlB;IAAmB,IAAI,eAAE,6BAAC,gCAAD;EAAzB,aANJ,CAPJ,CADJ,CADJ,eAqBI,6BAAC,uBAAD,q6BArBJ,CAFJ,CADJ;AAmDH,CAtDL,EAuDI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,WAAD,EAAOC,YAAP;EAAd;AAAR,CAvDJ"}

package/Chips/README.md

@@ -1,15 +0,0 @@
-# Chips
-
-### Design
-
-<a href="https://material.io/design/components/chips.html" target="_blank">https://material.io/design/components/chips.html</a>
-
-### Description
-
-`Chips` allow users to enter information, make selections, filter content, or trigger actions.
-
-### Import
-
-```js
-import { Chips, Chip, ChipText, ChipIcon } from "@webiny/ui/Chips";
-```

package/Chips/icons/baseline-done-24px.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-</svg>

package/Chips/icons/baseline-email-24px.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
-</svg>

package/Chips/styles.d.ts

@@ -1,2 +0,0 @@
-export declare const chipIconWrapper: string;
-export declare const disabledChips: string;

package/Chips/styles.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.disabledChips = exports.chipIconWrapper = void 0;
-
-var _emotion = require("emotion");
-
-var chipIconWrapper = /*#__PURE__*/(0, _emotion.css)({
-  ".mdc-chip__icon": {
-    "&.mdc-chip__icon--trailing": {
-      boxSizing: "border-box",
-      display: "flex",
-      marginLeft: "4px",
-      marginRight: "0px"
-    },
-    svg: {
-      width: 18,
-      height: 18
-    }
-  }
-}, "label:chipIconWrapper;");
-exports.chipIconWrapper = chipIconWrapper;
-var disabledChips = /*#__PURE__*/(0, _emotion.css)({
-  opacity: 0.75,
-  pointerEvents: "none"
-}, "label:disabledChips;");
-exports.disabledChips = disabledChips;

package/Chips/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["chipIconWrapper","css","boxSizing","display","marginLeft","marginRight","svg","width","height","disabledChips","opacity","pointerEvents"],"sources":["styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\nexport const chipIconWrapper = css({\n    \".mdc-chip__icon\": {\n        \"&.mdc-chip__icon--trailing\": {\n            boxSizing: \"border-box\",\n            display: \"flex\",\n            marginLeft: \"4px\",\n            marginRight: \"0px\"\n        },\n        svg: {\n            width: 18,\n            height: 18\n        }\n    }\n});\n\nexport const disabledChips = css({\n    opacity: 0.75,\n    pointerEvents: \"none\"\n});\n"],"mappings":";;;;;;;AAAA;;AAEO,IAAMA,eAAe,gBAAG,IAAAC,YAAA,EAAI;EAC/B,mBAAmB;IACf,8BAA8B;MAC1BC,SAAS,EAAE,YADe;MAE1BC,OAAO,EAAE,MAFiB;MAG1BC,UAAU,EAAE,KAHc;MAI1BC,WAAW,EAAE;IAJa,CADf;IAOfC,GAAG,EAAE;MACDC,KAAK,EAAE,EADN;MAEDC,MAAM,EAAE;IAFP;EAPU;AADY,CAAJ,2BAAxB;;AAeA,IAAMC,aAAa,gBAAG,IAAAR,YAAA,EAAI;EAC7BS,OAAO,EAAE,IADoB;EAE7BC,aAAa,EAAE;AAFc,CAAJ,yBAAtB"}

package/CodeEditor/CodeEditor.stories.d.ts

@@ -1,2 +0,0 @@
-import "brace/mode/json";
-import "brace/theme/github";

package/CodeEditor/CodeEditor.stories.js

@@ -1,45 +0,0 @@
-"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 _addonKnobs = require("@storybook/addon-knobs");
-
-var _README = _interopRequireDefault(require("./README.md"));
-
-var _form = require("@webiny/form");
-
-var _CodeEditor = require("./CodeEditor");
-
-require("brace/mode/json");
-
-require("brace/theme/github");
-
-var story = (0, _react2.storiesOf)("Components/CodeEditor", module);
-story.addDecorator(_addonKnobs.withKnobs);
-story.add("usage", function () {
-  var description = (0, _addonKnobs.text)("description", "Type your code here and see it in action.");
-  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(_form.Form, {
-    data: {
-      data: "{\"foo\": \"bar\"}"
-    }
-  }, function (_ref) {
-    var Bind = _ref.Bind;
-    return /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "data"
-    }, /*#__PURE__*/_react.default.createElement(_CodeEditor.CodeEditor, {
-      mode: "json",
-      theme: "github",
-      description: description
-    }));
-  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <Form data={{ data: `{\"foo\": \"bar\"}` }}>\n                        {({ Bind }) => (\n                            <Bind name=\"data\">\n                                 <CodeEditor\n                                    mode=\"json\"\n                                    theme=\"github\"\n                                    description={\"".concat(description, "\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))));
-}, {
-  info: {
-    propTables: [_CodeEditor.CodeEditor]
-  }
-});

package/CodeEditor/CodeEditor.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","description","text","readme","data","Bind","info","propTables","CodeEditor"],"sources":["CodeEditor.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 { withKnobs, text } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\nimport { Form } from \"@webiny/form\";\nimport { CodeEditor } from \"./CodeEditor\";\nimport \"brace/mode/json\";\nimport \"brace/theme/github\";\n\nconst story = storiesOf(\"Components/CodeEditor\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const description = text(\"description\", \"Type your code here and see it in action.\");\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ data: `{\"foo\": \"bar\"}` }}>\n                            {({ Bind }) => (\n                                <Bind name=\"data\">\n                                    <CodeEditor\n                                        mode=\"json\"\n                                        theme=\"github\"\n                                        description={description}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={{ data: \\`{\"foo\": \"bar\"}\\` }}>\n                        {({ Bind }) => (\n                            <Bind name=\"data\">\n                                 <CodeEditor\n                                    mode=\"json\"\n                                    theme=\"github\"\n                                    description={\"${description}\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [CodeEditor] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,uBAAV,EAAmCC,MAAnC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,WAAW,GAAG,IAAAC,gBAAA,EAAK,aAAL,EAAoB,2CAApB,CAApB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,IAAI;IAAN;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,sBAAD;MACI,IAAI,EAAC,MADT;MAEI,KAAK,EAAC,QAFV;MAGI,WAAW,EAAEJ;IAHjB,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAcI,6BAAC,uBAAD,gYAQgCA,WARhC,iKAdJ,CAFJ,CADJ;AAmCH,CAxCL,EAyCI;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,sBAAD;EAAd;AAAR,CAzCJ"}

package/CodeEditor/README.md

@@ -1,21 +0,0 @@
-# CodeEditor
-
-### Additional information
-
-<a href="https://github.com/securingsincity/react-ace" target="_blank">https://github.com/securingsincity/react-ace</a>
-
-### Description
-
-`CodeEditor` is a wrapper around one of the most popular code editors called `Ace` editor. Have in mind that you still
-have to import `brace` as a dependency (after importing `CodeEditor`) for different code formats and editor types.
-
-### Import
-
-```js
-import brace from "brace";
-import { CodeEditor } from "@webiny/ui/CodeEditor";
-
-// Make sure to import this after CodeEditor. Check official docs for available modes and themes.
-import "brace/mode/json";
-import "brace/theme/github";
-```

package/ColorPicker/ColorPicker.stories.d.ts

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

package/ColorPicker/ColorPicker.stories.js

@@ -1,41 +0,0 @@
-"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("./../ColorPicker/README.md"));
-
-var _form = require("@webiny/form");
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _ColorPicker = require("./ColorPicker");
-
-var story = (0, _react2.storiesOf)("Components/ColorPicker", module);
-story.addDecorator(_addonKnobs.withKnobs);
-story.add("usage", function () {
-  var disable = (0, _addonKnobs.boolean)("disable", false);
-  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(_form.Form, {
-    data: {
-      color: "#80ff00"
-    }
-  }, function (_ref) {
-    var Bind = _ref.Bind;
-    return /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "color"
-    }, /*#__PURE__*/_react.default.createElement(_ColorPicker.ColorPicker, {
-      label: "Header background color",
-      disable: disable,
-      description: "A simple background color in the header section."
-    }));
-  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                       <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"color\">\n                                <ColorPicker disable={".concat(disable, "} />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))));
-}, {
-  info: {
-    propTables: [_ColorPicker.ColorPicker]
-  }
-});

package/ColorPicker/ColorPicker.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disable","boolean","readme","color","Bind","info","propTables","ColorPicker"],"sources":["ColorPicker.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandbox,\n    StorySandboxCode,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../ColorPicker/README.md\";\nimport { Form } from \"@webiny/form\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport { ColorPicker } from \"./ColorPicker\";\n\nconst story = storiesOf(\"Components/ColorPicker\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disable = boolean(\"disable\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ color: \"#80ff00\" }}>\n                            {({ Bind }) => (\n                                <Bind name=\"color\">\n                                    <ColorPicker\n                                        label={\"Header background color\"}\n                                        disable={disable}\n                                        description={\n                                            \"A simple background color in the header section.\"\n                                        }\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                       <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"color\">\n                                <ColorPicker disable={${disable}} />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [ColorPicker] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,wBAAV,EAAoCC,MAApC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,OAAO,GAAG,IAAAC,mBAAA,EAAQ,SAAR,EAAmB,KAAnB,CAAhB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,KAAK,EAAE;IAAT;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,wBAAD;MACI,KAAK,EAAE,yBADX;MAEI,OAAO,EAAEJ,OAFb;MAGI,WAAW,EACP;IAJR,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAgBI,6BAAC,uBAAD,sMAKoCA,OALpC,8HAhBJ,CAFJ,CADJ;AAiCH,CAtCL,EAuCI;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,wBAAD;EAAd;AAAR,CAvCJ"}

package/ColorPicker/README.md

@@ -1,11 +0,0 @@
-# ColorPicker
-
-### Description
-
-`ColorPicker` component is used to pick a color, eg. for font or background color.
-
-### Import
-
-```js
-import { ColorPicker } from "@webiny/ui/ColorPicker";
-```

package/ConfirmationDialog/ConfirmationDialog.stories.d.ts

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

package/ConfirmationDialog/ConfirmationDialog.stories.js

@@ -1,40 +0,0 @@
-"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("./../ConfirmationDialog/README.md"));
-
-var _Button = require("./../Button");
-
-var _ConfirmationDialog = require("./ConfirmationDialog");
-
-var story = (0, _react2.storiesOf)("Components/ConfirmationDialog", module);
-story.add("usage", function () {
-  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
-    title: "Icon with and without ConfirmationDialog"
-  }, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_ConfirmationDialog.ConfirmationDialog, {
-    title: "Pay Invoice",
-    message: "Are you sure you want pay this invoice?"
-  }, function (_ref) {
-    var showConfirmation = _ref.showConfirmation;
-    return /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-      onClick: function onClick() {
-        showConfirmation(function () {
-          return console.log("Confirm");
-        }, function () {
-          return console.log("Cancel");
-        });
-      }
-    }, "Pay Invoice");
-  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                     <ConfirmationDialog\n                        title=\"Pay Invoice\"\n                        message=\"Are you sure you want pay this invoice?\"\n                    >\n                        {({ showConfirmation }) => {\n                            return (\n                                <ButtonPrimary\n                                    onClick={() => {\n                                        showConfirmation(\n                                            () => console.log(\"Confirm\"),\n                                            () => console.log(\"Cancel\")\n                                        );\n                                    }}\n                                >\n                                    Pay Invoice\n                                </ButtonPrimary>\n                            );\n                        }}\n                    </ConfirmationDialog>\n                    ")));
-}, {
-  info: {
-    propTables: [_ConfirmationDialog.ConfirmationDialog]
-  }
-});

package/ConfirmationDialog/ConfirmationDialog.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["story","storiesOf","module","add","readme","showConfirmation","console","log","info","propTables","ConfirmationDialog"],"sources":["ConfirmationDialog.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 \"./../ConfirmationDialog/README.md\";\nimport { ButtonPrimary } from \"./../Button\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\n\nconst story = storiesOf(\"Components/ConfirmationDialog\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Icon with and without ConfirmationDialog\"}>\n                    <StorySandboxExample>\n                        <ConfirmationDialog\n                            title=\"Pay Invoice\"\n                            message=\"Are you sure you want pay this invoice?\"\n                        >\n                            {({ showConfirmation }) => {\n                                return (\n                                    <ButtonPrimary\n                                        onClick={() => {\n                                            showConfirmation(\n                                                () => console.log(\"Confirm\"),\n                                                () => console.log(\"Cancel\")\n                                            );\n                                        }}\n                                    >\n                                        Pay Invoice\n                                    </ButtonPrimary>\n                                );\n                            }}\n                        </ConfirmationDialog>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <ConfirmationDialog\n                        title=\"Pay Invoice\"\n                        message=\"Are you sure you want pay this invoice?\"\n                    >\n                        {({ showConfirmation }) => {\n                            return (\n                                <ButtonPrimary\n                                    onClick={() => {\n                                        showConfirmation(\n                                            () => console.log(\"Confirm\"),\n                                            () => console.log(\"Cancel\")\n                                        );\n                                    }}\n                                >\n                                    Pay Invoice\n                                </ButtonPrimary>\n                            );\n                        }}\n                    </ConfirmationDialog>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [ConfirmationDialog] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,+BAAV,EAA2CC,MAA3C,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,6BAAC,sCAAD;IACI,KAAK,EAAC,aADV;IAEI,OAAO,EAAC;EAFZ,GAIK,gBAA0B;IAAA,IAAvBC,gBAAuB,QAAvBA,gBAAuB;IACvB,oBACI,6BAAC,qBAAD;MACI,OAAO,EAAE,mBAAM;QACXA,gBAAgB,CACZ;UAAA,OAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ,CAAN;QAAA,CADY,EAEZ;UAAA,OAAMD,OAAO,CAACC,GAAR,CAAY,QAAZ,CAAN;QAAA,CAFY,CAAhB;MAIH;IANL,iBADJ;EAYH,CAjBL,CADJ,CADJ,eAsBI,6BAAC,uBAAD,o7BAtBJ,CAFJ,CADJ;AAmDH,CAtDL,EAuDI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,sCAAD;EAAd;AAAR,CAvDJ"}

package/ConfirmationDialog/README.md

@@ -1,11 +0,0 @@
-# ConfirmationDialog
-
-### Description
-
-`ConfirmationDialog` component is used to represent interactive surfaces.
-
-### Import
-
-```js
-import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
-```

package/DataTable/DataTable.stories.d.ts

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

package/DataTable/DataTable.stories.js

@@ -1,77 +0,0 @@
-"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("./../DataTable/README.md"));
-
-var _DataTable = require("./DataTable");
-
-var story = (0, _react2.storiesOf)("Components/DataTable", module);
-story.add("usage", function () {
-  var data = [{
-    name: "Page 1",
-    createdBy: "John Doe",
-    lastModified: "3 days ago",
-    status: "Draft"
-  }, {
-    name: "Page 2",
-    createdBy: "John Doe",
-    lastModified: "1 day ago",
-    status: "Published"
-  }, {
-    name: "Page 3",
-    createdBy: "John Doe",
-    lastModified: "1 hour ago",
-    status: "Published"
-  }];
-  var columns = {
-    name: {
-      header: "Title"
-    },
-    createdBy: {
-      header: "Author",
-      cell: function cell(row) {
-        return /*#__PURE__*/_react.default.createElement("em", null, row.createdBy.toUpperCase());
-      }
-    },
-    lastModified: {
-      header: "Last Modified"
-    },
-    status: {
-      header: "Status",
-      meta: {
-        alignEnd: true
-      }
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
-    title: "A simple DataTable."
-  }, /*#__PURE__*/_react.default.createElement(_DataTable.DataTable, {
-    data: data,
-    columns: columns
-  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
-    title: "DataTable with selectable rows"
-  }, /*#__PURE__*/_react.default.createElement(_DataTable.DataTable, {
-    data: data,
-    columns: columns,
-    onSelectRow: function onSelectRow(row) {
-      return console.log("Do whatever you like with the selected row data", row);
-    }
-  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
-    title: "DataTable at initial loading state"
-  }, /*#__PURE__*/_react.default.createElement(_DataTable.DataTable, {
-    data: data,
-    columns: columns,
-    loadingInitial: true
-  })));
-}, {
-  info: {
-    propTables: [_DataTable.DataTable]
-  }
-});

package/DataTable/DataTable.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["story","storiesOf","module","add","data","name","createdBy","lastModified","status","columns","header","cell","row","toUpperCase","meta","alignEnd","readme","console","log","info","propTables","DataTable"],"sources":["DataTable.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../DataTable/README.md\";\nimport { Columns, DataTable } from \"./DataTable\";\n\nconst story = storiesOf(\"Components/DataTable\", module);\n\ninterface Entry {\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\nstory.add(\n    \"usage\",\n    () => {\n        const data: Entry[] = [\n            {\n                name: \"Page 1\",\n                createdBy: \"John Doe\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                name: \"Page 2\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 day ago\",\n                status: \"Published\"\n            },\n            {\n                name: \"Page 3\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            }\n        ];\n\n        const columns: Columns<Entry> = {\n            name: {\n                header: \"Title\"\n            },\n            createdBy: {\n                header: \"Author\",\n                cell: row => <em>{row.createdBy.toUpperCase()}</em>\n            },\n            lastModified: {\n                header: \"Last Modified\"\n            },\n            status: {\n                header: \"Status\",\n                meta: {\n                    alignEnd: true\n                }\n            }\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple DataTable.\"}>\n                    <DataTable data={data} columns={columns} />\n                </StorySandbox>\n                <StorySandbox title={\"DataTable with selectable rows\"}>\n                    <DataTable\n                        data={data}\n                        columns={columns}\n                        onSelectRow={row =>\n                            console.log(\"Do whatever you like with the selected row data\", row)\n                        }\n                    />\n                </StorySandbox>\n                <StorySandbox title={\"DataTable at initial loading state\"}>\n                    <DataTable data={data} columns={columns} loadingInitial={true} />\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [DataTable]\n        }\n    }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,sBAAV,EAAkCC,MAAlC,CAAd;AASAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,IAAa,GAAG,CAClB;IACIC,IAAI,EAAE,QADV;IAEIC,SAAS,EAAE,UAFf;IAGIC,YAAY,EAAE,YAHlB;IAIIC,MAAM,EAAE;EAJZ,CADkB,EAOlB;IACIH,IAAI,EAAE,QADV;IAEIC,SAAS,EAAE,UAFf;IAGIC,YAAY,EAAE,WAHlB;IAIIC,MAAM,EAAE;EAJZ,CAPkB,EAalB;IACIH,IAAI,EAAE,QADV;IAEIC,SAAS,EAAE,UAFf;IAGIC,YAAY,EAAE,YAHlB;IAIIC,MAAM,EAAE;EAJZ,CAbkB,CAAtB;EAqBA,IAAMC,OAAuB,GAAG;IAC5BJ,IAAI,EAAE;MACFK,MAAM,EAAE;IADN,CADsB;IAI5BJ,SAAS,EAAE;MACPI,MAAM,EAAE,QADD;MAEPC,IAAI,EAAE,cAAAC,GAAG;QAAA,oBAAI,yCAAKA,GAAG,CAACN,SAAJ,CAAcO,WAAd,EAAL,CAAJ;MAAA;IAFF,CAJiB;IAQ5BN,YAAY,EAAE;MACVG,MAAM,EAAE;IADE,CARc;IAW5BF,MAAM,EAAE;MACJE,MAAM,EAAE,QADJ;MAEJI,IAAI,EAAE;QACFC,QAAQ,EAAE;MADR;IAFF;EAXoB,CAAhC;EAmBA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,oBAAD;IAAW,IAAI,EAAEZ,IAAjB;IAAuB,OAAO,EAAEK;EAAhC,EADJ,CAFJ,eAKI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,oBAAD;IACI,IAAI,EAAEL,IADV;IAEI,OAAO,EAAEK,OAFb;IAGI,WAAW,EAAE,qBAAAG,GAAG;MAAA,OACZK,OAAO,CAACC,GAAR,CAAY,iDAAZ,EAA+DN,GAA/D,CADY;IAAA;EAHpB,EADJ,CALJ,eAcI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,oBAAD;IAAW,IAAI,EAAER,IAAjB;IAAuB,OAAO,EAAEK,OAAhC;IAAyC,cAAc,EAAE;EAAzD,EADJ,CAdJ,CADJ;AAoBH,CA/DL,EAgEI;EACIU,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,oBAAD;EADV;AADV,CAhEJ"}

package/DataTable/README.md

@@ -1,72 +0,0 @@
-# DataTable
-
-### Design
-
-https://material.io/components/data-tables
-
-### Description
-
-Use `DataTable` components to display sets of data across rows and columns.
-
-### Usage
-
-```tsx
-import { DataTable, Columns } from "@webiny/ui/DataTable";
-
-// Declare the data structure.
-interface Entry {
-    name: string;
-    createdBy: string;
-    lastModified: string;
-    status: string;
-}
-
-// Define the data you want to display.
-const data: Entry[] = [
-    {
-        name: "Page 1",
-        createdBy: "John Doe",
-        lastModified: "3 days ago",
-        status: "Draft"
-    },
-    {
-        name: "Page 2",
-        createdBy: "John Doe",
-        lastModified: "1 day ago",
-        status: "Published"
-    },
-    {
-        name: "Page 3",
-        createdBy: "John Doe",
-        lastModified: "1 hour ago",
-        status: "Published"
-    }
-];
-
-// Define the columns structure for your table.
-const columns: Columns<Entry> = {
-    name: {
-        header: "Title"
-    },
-    createdBy: {
-        header: "Author",
-        cell: row => <em>{row.createdBy.toUpperCase()}</em>
-    },
-    lastModified: {
-        header: "Last Modified"
-    },
-    status: {
-        header: "Status",
-        meta: {
-            alignEnd: true
-        }
-    }
-};
-
-...
-
-// Use the <DataTable /> component within your code.
-return(
-    <DataTable data={data} columns={columns} />
-)
-```

package/DataTable/styled.d.ts

@@ -1 +0,0 @@
-export declare const Table: import("@emotion/styled-base").StyledComponent<{}, Pick<{}, never>, object>;

package/DataTable/styled.js

@@ -1,18 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Table = void 0;
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _dataTable = require("@rmwc/data-table");
-
-var Table = /*#__PURE__*/(0, _styled.default)(_dataTable.DataTable, {
-  label: "Table",
-  target: "er5nqo40"
-})("width:100%;th,td{vertical-align:middle;}.datatable-select-column{width:56px;}");
-exports.Table = Table;

package/DataTable/styled.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Table","styled","RmwcDataTable"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { DataTable as RmwcDataTable } from \"@rmwc/data-table\";\n\nexport const Table = styled(RmwcDataTable)`\n    width: 100%;\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n\n    .datatable-select-column {\n        width: 56px;\n    }\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAEO,IAAMA,KAAK,oBAAGC,eAAH,EAAUC,oBAAV;EAAA;EAAA;AAAA,mFAAX"}

package/DelayedOnChange/DelayedOnChange.d.ts

@@ -1,40 +0,0 @@
-/// <reference types="web" />
-import React from "react";
-interface ApplyValueCb {
-    (value: string, cb: (value: string) => void): void;
-}
-/**
- * This component is used to wrap Input and Textarea components to optimize form re-render.
- * These 2 are the only components that trigger form model change on each character input.
- * This means, whenever you type a letter an entire form re-renders.
- * On complex forms you will feel and see a significant delay if this component is not used.
- *
- * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
- * a user stops typing for given period of time (400ms by default).
- */
-interface OnChangeCallable {
-    (value: string, cb?: ApplyValueCb): void;
-}
-interface OnBlurCallable {
-    (ev: React.SyntheticEvent): void;
-}
-interface OnKeyDownCallable {
-    (ev: React.KeyboardEvent<HTMLInputElement>): void;
-}
-interface ChildrenCallableParams {
-    value: string;
-    onChange: OnChangeCallable;
-}
-interface ChildrenCallable {
-    (params: ChildrenCallableParams): React.ReactElement;
-}
-export interface DelayedOnChangeProps {
-    value?: string;
-    delay?: number;
-    onChange?: OnChangeCallable;
-    onBlur?: OnBlurCallable;
-    onKeyDown?: OnKeyDownCallable;
-    children: React.ReactNode | ChildrenCallable;
-}
-export declare const DelayedOnChange: React.FC<DelayedOnChangeProps>;
-export default DelayedOnChange;