@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.085ff6572f

package/Select/Select.stories.js

@@ -1,46 +1,49 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import readme from "./README.md";
-import { Form } from "@webiny/form";
-import { Select } from "./Select";
-var story = storiesOf("Components/Select", 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 _addonKnobs = require("@storybook/addon-knobs");
+var _README = _interopRequireDefault(require("./README.md"));
+var _form = require("@webiny/form");
+var _Select = require("./Select");
+var story = (0, _react2.storiesOf)("Components/Select", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
-  var disabled = boolean("Disabled", false);
-  var box = boolean("Box", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  var box = (0, _addonKnobs.boolean)("Box", 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, {
     title: "Simple select with a label and description"
-  }, /*#__PURE__*/React.createElement(Form, null, function (_ref) {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, null, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "pet"
-    }, /*#__PURE__*/React.createElement(Select, {
+    }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
       label: "Pets",
       disabled: disabled,
       box: box.toString(),
       description: "Choose a pet of your liking."
-    }, /*#__PURE__*/React.createElement("optgroup", {
+    }, /*#__PURE__*/_react.default.createElement("optgroup", {
       label: "Dogs"
-    }, /*#__PURE__*/React.createElement("option", {
+    }, /*#__PURE__*/_react.default.createElement("option", {
       value: "germanShepherd"
-    }, "German Shepherd"), /*#__PURE__*/React.createElement("option", {
+    }, "German Shepherd"), /*#__PURE__*/_react.default.createElement("option", {
       value: "bulldog"
-    }, "Bulldog"), /*#__PURE__*/React.createElement("option", {
+    }, "Bulldog"), /*#__PURE__*/_react.default.createElement("option", {
       value: "sharPei"
-    }, "Shar-Pei")), /*#__PURE__*/React.createElement("optgroup", {
+    }, "Shar-Pei")), /*#__PURE__*/_react.default.createElement("optgroup", {
       label: "Other"
-    }, /*#__PURE__*/React.createElement("option", {
+    }, /*#__PURE__*/_react.default.createElement("option", {
       value: "parrot"
-    }, "Parrot"), /*#__PURE__*/React.createElement("option", {
+    }, "Parrot"), /*#__PURE__*/_react.default.createElement("option", {
       value: "cat"
-    }, "Cat"), /*#__PURE__*/React.createElement("option", {
+    }, "Cat"), /*#__PURE__*/_react.default.createElement("option", {
       value: "guinea "
     }, "Guinea Pig"))));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"pet\">\n                               <Select\n                                    label=\"Pets\"\n                                    disabled={disabled}\n                                    box={box.toString()}\n                                    description=\"Choose a pet of your liking.\"\n                                >\n                                   <optgroup label=\"Dogs\">\n                                        <option value=\"germanShepherd\">\n                                            German Shepherd\n                                        </option>\n                                        <option value=\"bulldog\">Bulldog</option>\n                                        <option value=\"sharPei\">Shar-Pei</option>\n                                    </optgroup>\n                                    <optgroup label=\"Other\">\n                                        <option value=\"parrot\">Parrot</option>\n                                        <option value=\"cat\">Cat</option>\n                                        <option value=\"guinea \">Guinea Pig</option>\n                                    </optgroup>\n                                </Select>\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"pet\">\n                               <Select\n                                    label=\"Pets\"\n                                    disabled={disabled}\n                                    box={box.toString()}\n                                    description=\"Choose a pet of your liking.\"\n                                >\n                                   <optgroup label=\"Dogs\">\n                                        <option value=\"germanShepherd\">\n                                            German Shepherd\n                                        </option>\n                                        <option value=\"bulldog\">Bulldog</option>\n                                        <option value=\"sharPei\">Shar-Pei</option>\n                                    </optgroup>\n                                    <optgroup label=\"Other\">\n                                        <option value=\"parrot\">Parrot</option>\n                                        <option value=\"cat\">Cat</option>\n                                        <option value=\"guinea \">Guinea Pig</option>\n                                    </optgroup>\n                                </Select>\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
 }, {
   info: {
-    propTables: [Select]
+    propTables: [_Select.Select]
   }
 });

package/Select/Select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","box","readme","Bind","toString","info","propTables","Select"],"sources":["Select.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, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Select } from \"./Select\";\n\nconst story = storiesOf(\"Components/Select\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n        const box = boolean(\"Box\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple select with a label and description\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind name=\"pet\">\n                                    <Select\n                                        label=\"Pets\"\n                                        disabled={disabled}\n                                        box={box.toString()}\n                                        description=\"Choose a pet of your liking.\"\n                                    >\n                                        <optgroup label=\"Dogs\">\n                                            <option value=\"germanShepherd\">German Shepherd</option>\n                                            <option value=\"bulldog\">Bulldog</option>\n                                            <option value=\"sharPei\">Shar-Pei</option>\n                                        </optgroup>\n                                        <optgroup label=\"Other\">\n                                            <option value=\"parrot\">Parrot</option>\n                                            <option value=\"cat\">Cat</option>\n                                            <option value=\"guinea \">Guinea Pig</option>\n                                        </optgroup>\n                                    </Select>\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"pet\">\n                               <Select\n                                    label=\"Pets\"\n                                    disabled={disabled}\n                                    box={box.toString()}\n                                    description=\"Choose a pet of your liking.\"\n                                >\n                                   <optgroup label=\"Dogs\">\n                                        <option value=\"germanShepherd\">\n                                            German Shepherd\n                                        </option>\n                                        <option value=\"bulldog\">Bulldog</option>\n                                        <option value=\"sharPei\">Shar-Pei</option>\n                                    </optgroup>\n                                    <optgroup label=\"Other\">\n                                        <option value=\"parrot\">Parrot</option>\n                                        <option value=\"cat\">Cat</option>\n                                        <option value=\"guinea \">Guinea Pig</option>\n                                    </optgroup>\n                                </Select>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Select] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,mBAAmB,EAAEC,MAAM,CAAC;AACpDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAC3C,IAAMC,GAAG,GAAG,IAAAD,mBAAO,EAAC,KAAK,EAAE,KAAK,CAAC;EAEjC,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEE,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAA6C,gBACrE,6BAAC,UAAI,QACA;IAAA,IAAGC,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAK,gBACZ,6BAAC,cAAM;MACH,KAAK,EAAC,MAAM;MACZ,QAAQ,EAAEJ,QAAS;MACnB,GAAG,EAAEE,GAAG,CAACG,QAAQ,EAAG;MACpB,WAAW,EAAC;IAA8B,gBAE1C;MAAU,KAAK,EAAC;IAAM,gBAClB;MAAQ,KAAK,EAAC;IAAgB,GAAC,iBAAe,CAAS,eACvD;MAAQ,KAAK,EAAC;IAAS,GAAC,SAAO,CAAS,eACxC;MAAQ,KAAK,EAAC;IAAS,GAAC,UAAQ,CAAS,CAClC,eACX;MAAU,KAAK,EAAC;IAAO,gBACnB;MAAQ,KAAK,EAAC;IAAQ,GAAC,QAAM,CAAS,eACtC;MAAQ,KAAK,EAAC;IAAK,GAAC,KAAG,CAAS,eAChC;MAAQ,KAAK,EAAC;IAAS,GAAC,YAAU,CAAS,CACpC,CACN,CACN;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,85CA4BE,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAM;EAAE;AAAE,CAAC,CACrC"}

package/Select/index.js

@@ -1 +1,16 @@
-export * from "./Select";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Select = require("./Select");
+Object.keys(_Select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Select[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Select[key];
+    }
+  });
+});

package/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Select\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/Select/styled.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @type {string}
+ */
+export declare const webinySelect: string;
+/**
+ * @type {string}
+ */
+export declare const noLabel: string;

package/Select/styled.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webinySelect = exports.noLabel = void 0;
+var _emotion = require("emotion");
+/**
+ * @type {string}
+ */
+var webinySelect = /*#__PURE__*/(0, _emotion.css)("display:grid;background-color:transparent;border-color:transparent;color:var(--webiny-theme-color-primary);.rmwc-select__native-control{opacity:0;position:absolute;top:0;bottom:0;left:0;right:0;}&.webiny-ui-select--size-medium{&.mdc-select,.mdc-select__anchor{height:40px;.mdc-select__native-control{paddingtop:0;}.mdc-select__dropdown-icon{bottom:8px;}.mdc-select__selected-text{padding-top:6px !important;padding-left:10px;font-size:0.95rem;height:40px;}&.mdc-select--box{.mdc-select__native-control{height:40px;paddingtop:5px;}}}}&.webiny-ui-select--size-small{&.mdc-select,.mdc-select__anchor{height:30px;.mdc-select__native-control{paddingtop:0;}.mdc-select__dropdown-icon{bottom:3px;}.mdc-select__selected-text{padding-top:1px !important;padding-left:10px;font-size:0.9rem;height:30px;}&.mdc-select--box{.mdc-select__native-control{height:30px;paddingtop:5px;}}}}label:webinySelect;");
+
+/**
+ * @type {string}
+ */
+exports.webinySelect = webinySelect;
+var noLabel = /*#__PURE__*/(0, _emotion.css)("&.mdc-select{height:35px;.mdc-select__native-control{paddingTop:0;}&.mdc-select--box{.mdc-select__native-control{height:35px;paddingTop:5px;}}label:noLabel;");
+exports.noLabel = noLabel;

package/Select/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["webinySelect","css","noLabel"],"sources":["styled.tsx"],"sourcesContent":["import { css } from \"emotion\";\n\n/**\n * @type {string}\n */\nexport const webinySelect = css`\n    display: grid;\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--webiny-theme-color-primary);\n\n    .rmwc-select__native-control {\n        opacity: 0;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n    }\n\n    &.webiny-ui-select--size-medium {\n        &.mdc-select,\n        .mdc-select__anchor {\n            height: 40px;\n            .mdc-select__native-control {\n                paddingtop: 0;\n            }\n            .mdc-select__dropdown-icon {\n                bottom: 8px;\n            }\n            .mdc-select__selected-text {\n                padding-top: 6px !important;\n                padding-left: 10px;\n                font-size: 0.95rem;\n                height: 40px;\n            }\n\n            &.mdc-select--box {\n                .mdc-select__native-control {\n                    height: 40px;\n                    paddingtop: 5px;\n                }\n            }\n        }\n    }\n\n    &.webiny-ui-select--size-small {\n        &.mdc-select,\n        .mdc-select__anchor {\n            height: 30px;\n            .mdc-select__native-control {\n                paddingtop: 0;\n            }\n            .mdc-select__dropdown-icon {\n                bottom: 3px;\n            }\n            .mdc-select__selected-text {\n                padding-top: 1px !important;\n                padding-left: 10px;\n                font-size: 0.9rem;\n                height: 30px;\n            }\n            &.mdc-select--box {\n                .mdc-select__native-control {\n                    height: 30px;\n                    paddingtop: 5px;\n                }\n            }\n        }\n    }\n`;\n\n/**\n * @type {string}\n */\nexport const noLabel = css`\n    &.mdc-select {\n        height: 35px;\n        .mdc-select__native-control {\n            paddingTop: 0;\n        }\n    &.mdc-select--box {\n        .mdc-select__native-control {\n            height: 35px;\n            paddingTop: 5px;\n        }\n    }\n`;\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AACO,IAAMA,YAAY,oBAAGC,YAAG,63BAiE9B;;AAED;AACA;AACA;AAFA;AAGO,IAAMC,OAAO,oBAAGD,YAAG,iKAYzB;AAAC"}

package/Skeleton/README.md

@@ -0,0 +1,21 @@
+# Skeleton
+
+### Additional information
+
+[https://www.npmjs.com/package/react-loading-skeleton](https://www.npmjs.com/package/react-loading-skeleton)
+
+### Description
+
+`Skeleton` component is used to render animated loading skeletons within Webiny.
+
+### Usage
+
+```jsx
+import { Skeleton } from "@webiny/ui/Skeleton";
+
+...
+
+return (
+    <Skeleton />
+)
+```

package/Skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+import { SkeletonProps as BaseSkeletonProps } from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+interface SkeletonProps extends BaseSkeletonProps {
+    theme?: "dark" | "light";
+}
+export declare const Skeleton: ({ theme, ...props }: SkeletonProps) => ReactElement;
+export {};

package/Skeleton/Skeleton.js

@@ -0,0 +1,22 @@
+"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.Skeleton = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _reactLoadingSkeleton = _interopRequireWildcard(require("react-loading-skeleton"));
+require("react-loading-skeleton/dist/skeleton.css");
+var _excluded = ["theme"];
+var Skeleton = function Skeleton(_ref) {
+  var theme = _ref.theme,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
+    baseColor: theme === "dark" ? "var(--mdc-theme-on-background)" : "var(--mdc-theme-background)",
+    highlightColor: theme === "dark" ? "var(--mdc-theme-background)" : "var(--mdc-theme-surface)"
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, props));
+};
+exports.Skeleton = Skeleton;

package/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skeleton","theme","props"],"sources":["Skeleton.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport ReactLoadingSkeleton, {\n    SkeletonProps as BaseSkeletonProps,\n    SkeletonTheme\n} from \"react-loading-skeleton\";\n\nimport \"react-loading-skeleton/dist/skeleton.css\";\n\ninterface SkeletonProps extends BaseSkeletonProps {\n    theme?: \"dark\" | \"light\";\n}\n\nexport const Skeleton = ({ theme, ...props }: SkeletonProps): ReactElement => {\n    return (\n        <SkeletonTheme\n            baseColor={\n                theme === \"dark\" ? \"var(--mdc-theme-on-background)\" : \"var(--mdc-theme-background)\"\n            }\n            highlightColor={\n                theme === \"dark\" ? \"var(--mdc-theme-background)\" : \"var(--mdc-theme-surface)\"\n            }\n        >\n            <ReactLoadingSkeleton {...props} />\n        </SkeletonTheme>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AAKA;AAAkD;AAM3C,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAAyD;EAAA,IAAnDC,KAAK,QAALA,KAAK;IAAKC,KAAK;EACtC,oBACI,6BAAC,mCAAa;IACV,SAAS,EACLD,KAAK,KAAK,MAAM,GAAG,gCAAgC,GAAG,6BACzD;IACD,cAAc,EACVA,KAAK,KAAK,MAAM,GAAG,6BAA6B,GAAG;EACtD,gBAED,6BAAC,6BAAoB,EAAKC,KAAK,CAAI,CACvB;AAExB,CAAC;AAAC"}

package/Skeleton/Skeleton.stories.d.ts

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

package/Skeleton/Skeleton.stories.js

@@ -0,0 +1,22 @@
+"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("./../Skeleton/README.md"));
+var _Skeleton = require("./Skeleton");
+var story = (0, _react2.storiesOf)("Components/Skeleton", 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: "A simple loading Skeleton, single line"
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, null)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "A loading Skeleton, with 3 lines"
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, {
+    count: 3
+  })));
+}, {
+  info: {
+    propTables: [_Skeleton.Skeleton]
+  }
+});

package/Skeleton/Skeleton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Skeleton"],"sources":["Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Skeleton/README.md\";\nimport { Skeleton } from \"./Skeleton\";\n\nconst story = storiesOf(\"Components/Skeleton\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple loading Skeleton, single line\"}>\n                    <Skeleton />\n                </StorySandbox>\n                <StorySandbox title={\"A loading Skeleton, with 3 lines\"}>\n                    <Skeleton count={3} />\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Skeleton] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,qBAAqB,EAAEC,MAAM,CAAC;AAEtDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAyC,gBAC1D,6BAAC,kBAAQ,OAAG,CACD,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAmC,gBACpD,6BAAC,kBAAQ;IAAC,KAAK,EAAE;EAAE,EAAG,CACX,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kBAAQ;EAAE;AAAE,CAAC,CACvC"}

package/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from "./Skeleton";

package/Skeleton/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Skeleton = require("./Skeleton");
+Object.keys(_Skeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Skeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Skeleton[key];
+    }
+  });
+});

package/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Skeleton\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
 declare type Props = FormComponentProps & {
     label?: string;
@@ -15,11 +15,6 @@ declare type Props = FormComponentProps & {
  * Slider component lets users choose a value from given range.
  */
 declare class Slider extends React.Component<Props> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
     onChange: (e: {
         detail: {
             value: number;

package/Slider/Slider.js

@@ -1,15 +1,22 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
-import { Slider as RmwcSlider } from "@rmwc/slider";
-import styled from "@emotion/styled";
-import { FormElementMessage } from "../FormElementMessage";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _slider = require("@rmwc/slider");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _FormElementMessage = require("../FormElementMessage");
 // wrapper fixes a bug in slider where the slider handle is rendered outside the bounds of the slider box
-var Wrapper = /*#__PURE__*/styled("div", {
+var Wrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1ll7sdi0",
   label: "Wrapper"
 })({
@@ -18,70 +25,55 @@ var Wrapper = /*#__PURE__*/styled("div", {
     left: 5
   }
 });
+
 /**
  * Slider component lets users choose a value from given range.
  */
-
 var Slider = /*#__PURE__*/function (_React$Component) {
-  _inherits(Slider, _React$Component);
-
-  var _super = _createSuper(Slider);
-
+  (0, _inherits2.default)(Slider, _React$Component);
+  var _super = (0, _createSuper2.default)(Slider);
   function Slider() {
     var _this;
-
-    _classCallCheck(this, Slider);
-
+    (0, _classCallCheck2.default)(this, Slider);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (e) {
       _this.props.onChange && _this.props.onChange(e.detail.value);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onInput", function (e) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInput", function (e) {
       _this.props.onInput && _this.props.onInput(e.detail.value);
     });
-
     return _this;
   }
-
-  _createClass(Slider, [{
+  (0, _createClass2.default)(Slider, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          value = _this$props.value,
-          label = _this$props.label,
-          description = _this$props.description,
-          validation = _this$props.validation;
+        value = _this$props.value,
+        label = _this$props.label,
+        description = _this$props.description,
+        validation = _this$props.validation;
       var sliderValue = value;
-
       if (value === null || typeof value === "undefined") {
         sliderValue = this.props.min || 0;
       }
-
-      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+      var _ref = validation || {},
+        validationIsValid = _ref.isValid,
+        validationMessage = _ref.message;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement("div", {
         className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent"
-      }, label), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(RmwcSlider, Object.assign({}, this.props, {
+      }, label), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_slider.Slider, Object.assign({}, this.props, {
         value: sliderValue,
         onChange: this.onChange,
         onInput: this.onInput
-      }))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }))), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
     }
   }]);
-
   return Slider;
-}(React.Component);
-
-_defineProperty(Slider, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
-
-export default Slider;
+}(_react.default.Component);
+var _default = Slider;
+exports.default = _default;

package/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Wrapper","styled","width","left","Slider","e","props","onChange","detail","value","onInput","label","description","validation","sliderValue","min","validationIsValid","isValid","validationMessage","message","React","Component"],"sources":["Slider.tsx"],"sourcesContent":["import React from \"react\";\nimport { Slider as RmwcSlider } from \"@rmwc/slider\";\nimport { FormComponentProps } from \"~/types\";\nimport styled from \"@emotion/styled\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ntype Props = FormComponentProps & {\n    // Component label.\n    label?: string;\n\n    // Is checkbox disabled?\n    disabled?: boolean;\n\n    // Description beneath the slider.\n    description?: string;\n\n    // The minimum value of the Slider.\n    min: number | string;\n\n    // The maximum value of the Slider.\n    max: number | string;\n\n    // A step to quantize values by.\n    step?: number | string;\n\n    // Displays the exact value of the Slider on the knob.\n    discrete?: boolean;\n\n    // Displays the individual step markers on the Slider track.\n    displayMarkers?: boolean;\n\n    // Function that gets triggered on each input.\n    onInput?: Function;\n};\n\n// wrapper fixes a bug in slider where the slider handle is rendered outside the bounds of the slider box\nconst Wrapper = styled(\"div\")({\n    width: \"100%\",\n    \".mdc-slider .mdc-slider__thumb-container\": {\n        left: 5\n    }\n});\n\n/**\n * Slider component lets users choose a value from given range.\n */\nclass Slider extends React.Component<Props> {\n    onChange = (e: { detail: { value: number } }) => {\n        this.props.onChange && this.props.onChange(e.detail.value);\n    };\n\n    onInput = (e: { detail: { value: number } }) => {\n        this.props.onInput && this.props.onInput(e.detail.value);\n    };\n\n    public override render() {\n        const { value, label, description, validation } = this.props;\n\n        let sliderValue = value;\n        if (value === null || typeof value === \"undefined\") {\n            sliderValue = this.props.min || 0;\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                {label && (\n                    <div className=\"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\">\n                        {label}\n                    </div>\n                )}\n\n                <Wrapper>\n                    <RmwcSlider\n                        {...this.props}\n                        value={sliderValue}\n                        onChange={this.onChange}\n                        onInput={this.onInput}\n                    />\n                </Wrapper>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default Slider;\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AAEA;AACA;AA+BA;AACA,IAAMA,OAAO,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC1BC,KAAK,EAAE,MAAM;EACb,0CAA0C,EAAE;IACxCC,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;;AAEF;AACA;AACA;AAFA,IAGMC,MAAM;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uFACG,UAACC,CAAgC,EAAK;MAC7C,MAAKC,KAAK,CAACC,QAAQ,IAAI,MAAKD,KAAK,CAACC,QAAQ,CAACF,CAAC,CAACG,MAAM,CAACC,KAAK,CAAC;IAC9D,CAAC;IAAA,sFAES,UAACJ,CAAgC,EAAK;MAC5C,MAAKC,KAAK,CAACI,OAAO,IAAI,MAAKJ,KAAK,CAACI,OAAO,CAACL,CAAC,CAACG,MAAM,CAACC,KAAK,CAAC;IAC5D,CAAC;IAAA;EAAA;EAAA;IAAA;IAAA,OAED,kBAAyB;MACrB,kBAAkD,IAAI,CAACH,KAAK;QAApDG,KAAK,eAALA,KAAK;QAAEE,KAAK,eAALA,KAAK;QAAEC,WAAW,eAAXA,WAAW;QAAEC,UAAU,eAAVA,UAAU;MAE7C,IAAIC,WAAW,GAAGL,KAAK;MACvB,IAAIA,KAAK,KAAK,IAAI,IAAI,OAAOA,KAAK,KAAK,WAAW,EAAE;QAChDK,WAAW,GAAG,IAAI,CAACR,KAAK,CAACS,GAAG,IAAI,CAAC;MACrC;MAEA,WAAmEF,UAAU,IAAI,CAAC,CAAC;QAAlEG,iBAAiB,QAA1BC,OAAO;QAA8BC,iBAAiB,QAA1BC,OAAO;MAE3C,oBACI,6BAAC,cAAK,CAAC,QAAQ,QACVR,KAAK,iBACF;QAAK,SAAS,EAAC;MAAmE,GAC7EA,KAAK,CAEb,eAED,6BAAC,OAAO,qBACJ,6BAAC,cAAU,oBACH,IAAI,CAACL,KAAK;QACd,KAAK,EAAEQ,WAAY;QACnB,QAAQ,EAAE,IAAI,CAACP,QAAS;QACxB,OAAO,EAAE,IAAI,CAACG;MAAQ,GACxB,CACI,EAETM,iBAAiB,KAAK,KAAK,iBACxB,6BAAC,sCAAkB;QAAC,KAAK;MAAA,GAAEE,iBAAiB,CAC/C,EAEAF,iBAAiB,KAAK,KAAK,IAAIJ,WAAW,iBACvC,6BAAC,sCAAkB,QAAEA,WAAW,CACnC,CACY;IAEzB;EAAC;EAAA;AAAA,EA7CgBQ,cAAK,CAACC,SAAS;AAAA,eAgDrBjB,MAAM;AAAA"}

package/Slider/Slider.stories.js

@@ -1,28 +1,31 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import readme from "./README.md";
-import { Form } from "@webiny/form";
-import Slider from "./Slider";
-var story = storiesOf("Components/Slider", 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 _addonKnobs = require("@storybook/addon-knobs");
+var _README = _interopRequireDefault(require("./README.md"));
+var _form = require("@webiny/form");
+var _Slider = _interopRequireDefault(require("./Slider"));
+var story = (0, _react2.storiesOf)("Components/Slider", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
-  var disabled = boolean("Disabled", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", 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, {
     title: "Simple slider with a label and description"
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       width: 200
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "width"
     }, function (_ref2) {
       var value = _ref2.value,
-          onChange = _ref2.onChange;
-      return /*#__PURE__*/React.createElement(Slider, {
+        onChange = _ref2.onChange;
+      return /*#__PURE__*/_react.default.createElement(_Slider.default, {
         label: "Number of rooms:",
         disabled: disabled,
         description: "Choose the number of rooms in your apartment.",
@@ -36,9 +39,9 @@ story.add("usage", function () {
         value: value
       });
     });
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                     <Form data={{ width: 200 }}>\n                        {({ Bind }) => (\n                            <Bind name=\"width\">\n                                {({ value, onChange }) => (\n                                    <Slider\n                                        label={\"Number of rooms:\"}\n                                        disabled={disabled}\n                                        description={\n                                            \"Choose the number of rooms in your apartment.\"\n                                        }\n                                        discrete\n                                        displayMarkers\n                                        min={1}\n                                        max={10}\n                                        step={1}\n                                        onInput={onChange}\n                                        onChange={onChange}\n                                        value={value}\n                                    />\n                                )}\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                     <Form data={{ width: 200 }}>\n                        {({ Bind }) => (\n                            <Bind name=\"width\">\n                                {({ value, onChange }) => (\n                                    <Slider\n                                        label={\"Number of rooms:\"}\n                                        disabled={disabled}\n                                        description={\n                                            \"Choose the number of rooms in your apartment.\"\n                                        }\n                                        discrete\n                                        displayMarkers\n                                        min={1}\n                                        max={10}\n                                        step={1}\n                                        onInput={onChange}\n                                        onChange={onChange}\n                                        value={value}\n                                    />\n                                )}\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
 }, {
   info: {
-    propTables: [Slider]
+    propTables: [_Slider.default]
   }
 });

package/Slider/Slider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","readme","width","Bind","value","onChange","info","propTables","Slider"],"sources":["Slider.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, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport Slider from \"./Slider\";\n\nconst story = storiesOf(\"Components/Slider\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple slider with a label and description\"}>\n                        <Form data={{ width: 200 }}>\n                            {({ Bind }) => (\n                                <Bind name=\"width\">\n                                    {({ value, onChange }) => (\n                                        <Slider\n                                            label={\"Number of rooms:\"}\n                                            disabled={disabled}\n                                            description={\n                                                \"Choose the number of rooms in your apartment.\"\n                                            }\n                                            discrete\n                                            displayMarkers\n                                            min={1}\n                                            max={10}\n                                            step={1}\n                                            onInput={onChange}\n                                            onChange={onChange}\n                                            value={value}\n                                        />\n                                    )}\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{ width: 200 }}>\n                        {({ Bind }) => (\n                            <Bind name=\"width\">\n                                {({ value, onChange }) => (\n                                    <Slider\n                                        label={\"Number of rooms:\"}\n                                        disabled={disabled}\n                                        description={\n                                            \"Choose the number of rooms in your apartment.\"\n                                        }\n                                        discrete\n                                        displayMarkers\n                                        min={1}\n                                        max={10}\n                                        step={1}\n                                        onInput={onChange}\n                                        onChange={onChange}\n                                        value={value}\n                                    />\n                                )}\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Slider] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,mBAAmB,EAAEC,MAAM,CAAC;AACpDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAA6C,gBACrE,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEC,KAAK,EAAE;IAAI;EAAE,GACtB;IAAA,IAAGC,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAO,GACb;MAAA,IAAGC,KAAK,SAALA,KAAK;QAAEC,QAAQ,SAARA,QAAQ;MAAA,oBACf,6BAAC,eAAM;QACH,KAAK,EAAE,kBAAmB;QAC1B,QAAQ,EAAEN,QAAS;QACnB,WAAW,EACP,+CACH;QACD,QAAQ;QACR,cAAc;QACd,GAAG,EAAE,CAAE;QACP,GAAG,EAAE,EAAG;QACR,IAAI,EAAE,CAAE;QACR,OAAO,EAAEM,QAAS;QAClB,QAAQ,EAAEA,QAAS;QACnB,KAAK,EAAED;MAAM,EACf;IAAA,CACL,CACE;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,wrCA0BE,CACR,CACX;AAEhB,CAAC,EACD;EAAEE,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,eAAM;EAAE;AAAE,CAAC,CACrC"}

package/Slider/index.js

@@ -1 +1,13 @@
-export { default as Slider } from "./Slider";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function get() {
+    return _Slider.default;
+  }
+});
+var _Slider = _interopRequireDefault(require("./Slider"));

package/Slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as Slider } from \"./Slider\";\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/Snackbar/Snackbar.d.ts

@@ -1,15 +1,13 @@
-import * as React from "react";
+/// <reference types="web" />
+import React from "react";
 import { SnackbarAction, SnackbarProps } from "@rmwc/snackbar";
 declare type Props = SnackbarProps;
 /**
  * Use Snackbar component to display an informative or alert message and allow users to act upon it.
- * @param props
- * @returns {*}
- * @constructor
  */
 declare class Snackbar extends React.Component<Props> {
-    container?: Element;
-    constructor(props: any);
-    render(): JSX.Element;
+    readonly container: HTMLElement | null;
+    constructor(props: Props);
+    render(): React.ReactElement;
 }
 export { Snackbar, SnackbarAction };