@webiny/ui 5.34.8 → 5.35.0-beta.1

package/Section/index.js

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _emotion = require("emotion");
-
 var _Typography = require("../Typography");
-
 var _Elevation = require("../Elevation");
-
 var _excluded = ["children", "title"];
 var SectionWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e12inb750",
@@ -46,11 +38,10 @@ var ElevationContent = /*#__PURE__*/(0, _styled.default)("div", {
   padding: 20,
   backgroundColor: "#fff"
 });
-
 var Section = function Section(_ref) {
   var children = _ref.children,
-      title = _ref.title,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    title = _ref.title,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(SectionWrapper, props, /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     className: titleStyle,
     use: "overline"
@@ -58,6 +49,5 @@ var Section = function Section(_ref) {
     z: 2
   }, /*#__PURE__*/_react.default.createElement(ElevationContent, null, children)));
 };
-
 var _default = Section;
 exports.default = _default;

package/Section/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["SectionWrapper","styled","backgroundColor","padding","titleStyle","css","display","alignItems","color","lineHeight","svg","height","ElevationContent","Section","children","title","props"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\nimport { Elevation } from \"~/Elevation\";\n\nconst SectionWrapper = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    padding: \"0 0 25px 0\"\n});\n\nconst titleStyle = css({\n    display: \"flex\",\n    alignItems: \"center\",\n    color: \"var(--mdc-theme-on-surface)\",\n    \".tooltip-content-wrapper\": {\n        lineHeight: \"100%\",\n        svg: {\n            height: 13,\n            color: \"var(--mdc-theme-on-surface)\"\n        }\n    }\n});\n\nconst ElevationContent = styled(\"div\")({\n    padding: 20,\n    backgroundColor: \"#fff\"\n});\n\ninterface SectionProps {\n    title?: String;\n}\n\nconst Section: React.FC<SectionProps> = ({ children, title, ...props }) => {\n    return (\n        <SectionWrapper {...props}>\n            <h4>\n                <Typography className={titleStyle} use={\"overline\"}>\n                    {title}\n                </Typography>\n            </h4>\n\n            <Elevation z={2}>\n                <ElevationContent>{children}</ElevationContent>\n            </Elevation>\n        </SectionWrapper>\n    );\n};\n\nexport default Section;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;AAEA,IAAMA,cAAc,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACjCC,eAAe,EAAE,6BADgB;EAEjCC,OAAO,EAAE;AAFwB,CAAjB,CAApB;AAKA,IAAMC,UAAU,gBAAG,IAAAC,YAAA,EAAI;EACnBC,OAAO,EAAE,MADU;EAEnBC,UAAU,EAAE,QAFO;EAGnBC,KAAK,EAAE,6BAHY;EAInB,4BAA4B;IACxBC,UAAU,EAAE,MADY;IAExBC,GAAG,EAAE;MACDC,MAAM,EAAE,EADP;MAEDH,KAAK,EAAE;IAFN;EAFmB;AAJT,CAAJ,sBAAnB;AAaA,IAAMI,gBAAgB,oBAAGX,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACnCE,OAAO,EAAE,EAD0B;EAEnCD,eAAe,EAAE;AAFkB,CAAjB,CAAtB;;AASA,IAAMW,OAA+B,GAAG,SAAlCA,OAAkC,OAAmC;EAAA,IAAhCC,QAAgC,QAAhCA,QAAgC;EAAA,IAAtBC,KAAsB,QAAtBA,KAAsB;EAAA,IAAZC,KAAY;EACvE,oBACI,6BAAC,cAAD,EAAoBA,KAApB,eACI,sDACI,6BAAC,sBAAD;IAAY,SAAS,EAAEZ,UAAvB;IAAmC,GAAG,EAAE;EAAxC,GACKW,KADL,CADJ,CADJ,eAOI,6BAAC,oBAAD;IAAW,CAAC,EAAE;EAAd,gBACI,6BAAC,gBAAD,QAAmBD,QAAnB,CADJ,CAPJ,CADJ;AAaH,CAdD;;eAgBeD,O"}
+{"version":3,"names":["SectionWrapper","styled","backgroundColor","padding","titleStyle","css","display","alignItems","color","lineHeight","svg","height","ElevationContent","Section","children","title","props"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\nimport { Elevation } from \"~/Elevation\";\n\nconst SectionWrapper = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    padding: \"0 0 25px 0\"\n});\n\nconst titleStyle = css({\n    display: \"flex\",\n    alignItems: \"center\",\n    color: \"var(--mdc-theme-on-surface)\",\n    \".tooltip-content-wrapper\": {\n        lineHeight: \"100%\",\n        svg: {\n            height: 13,\n            color: \"var(--mdc-theme-on-surface)\"\n        }\n    }\n});\n\nconst ElevationContent = styled(\"div\")({\n    padding: 20,\n    backgroundColor: \"#fff\"\n});\n\ninterface SectionProps {\n    title?: String;\n}\n\nconst Section: React.FC<SectionProps> = ({ children, title, ...props }) => {\n    return (\n        <SectionWrapper {...props}>\n            <h4>\n                <Typography className={titleStyle} use={\"overline\"}>\n                    {title}\n                </Typography>\n            </h4>\n\n            <Elevation z={2}>\n                <ElevationContent>{children}</ElevationContent>\n            </Elevation>\n        </SectionWrapper>\n    );\n};\n\nexport default Section;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAwC;AAExC,IAAMA,cAAc,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACjCC,eAAe,EAAE,6BAA6B;EAC9CC,OAAO,EAAE;AACb,CAAC,CAAC;AAEF,IAAMC,UAAU,gBAAG,IAAAC,YAAG,EAAC;EACnBC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,KAAK,EAAE,6BAA6B;EACpC,0BAA0B,EAAE;IACxBC,UAAU,EAAE,MAAM;IAClBC,GAAG,EAAE;MACDC,MAAM,EAAE,EAAE;MACVH,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,sBAAC;AAEF,IAAMI,gBAAgB,oBAAGX,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACnCE,OAAO,EAAE,EAAE;EACXD,eAAe,EAAE;AACrB,CAAC,CAAC;AAMF,IAAMW,OAA+B,GAAG,SAAlCA,OAA+B,OAAsC;EAAA,IAAhCC,QAAQ,QAARA,QAAQ;IAAEC,KAAK,QAALA,KAAK;IAAKC,KAAK;EAChE,oBACI,6BAAC,cAAc,EAAKA,KAAK,eACrB,sDACI,6BAAC,sBAAU;IAAC,SAAS,EAAEZ,UAAW;IAAC,GAAG,EAAE;EAAW,GAC9CW,KAAK,CACG,CACZ,eAEL,6BAAC,oBAAS;IAAC,CAAC,EAAE;EAAE,gBACZ,6BAAC,gBAAgB,QAAED,QAAQ,CAAoB,CACvC,CACC;AAEzB,CAAC;AAAC,eAEaD,OAAO;AAAA"}

package/Select/Select.js

@@ -1,28 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Select = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _select = require("@rmwc/select");
-
 var _FormElementMessage = require("../FormElementMessage");
-
 var _emotion = require("emotion");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _excluded = ["value", "description", "validation"];
 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;}label:webinySelect;");
 var noLabel = /*#__PURE__*/(0, _emotion.css)({
@@ -42,20 +32,16 @@ var noLabel = /*#__PURE__*/(0, _emotion.css)({
 /**
  * TODO verify that this is correct method get all options.
  */
-
 var getOptions = function getOptions(initialOptions) {
   if (!initialOptions) {
     return [];
   } else if (Array.isArray(initialOptions)) {
     var options = [];
-
     var _iterator = (0, _createForOfIteratorHelper2.default)(initialOptions),
-        _step;
-
+      _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var option = _step.value;
-
         if (typeof option === "string") {
           options.push({
             label: option,
@@ -63,7 +49,6 @@ var getOptions = function getOptions(initialOptions) {
           });
           continue;
         }
-
         options.push({
           label: option.label,
           value: option.value,
@@ -75,10 +60,8 @@ var getOptions = function getOptions(initialOptions) {
     } finally {
       _iterator.f();
     }
-
     return options;
   }
-
   return Object.keys(initialOptions).map(function (key) {
     return {
       label: initialOptions[key],
@@ -86,18 +69,17 @@ var getOptions = function getOptions(initialOptions) {
     };
   });
 };
+
 /**
  * Select component lets users choose a value from given set of options.
  */
-
-
 var skipProps = ["validate", "form"];
-
 var getRmwcProps = function getRmwcProps(props) {
   var newProps = {};
   Object.keys(props).filter(function (name) {
     return !skipProps.includes(name);
-  }) // @ts-ignore
+  })
+  // @ts-ignore
   .forEach(function (name) {
     return newProps[name] = props[name];
   });
@@ -107,19 +89,15 @@ var getRmwcProps = function getRmwcProps(props) {
  * We check for null and undefined in the value because React is complaining about those values.
  * Error says to use the empty string in null/undefined case.
  */
-
-
 var Select = function Select(props) {
   var initialValue = props.value,
-      description = props.description,
-      validation = props.validation,
-      other = (0, _objectWithoutProperties2.default)(props, _excluded);
+    description = props.description,
+    validation = props.validation,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
   var value = initialValue === null || initialValue === undefined ? "" : initialValue;
-
   var _ref = validation || {},
-      validationIsValid = _ref.isValid,
-      validationMessage = _ref.message;
-
+    validationIsValid = _ref.isValid,
+    validationMessage = _ref.message;
   var options = getOptions(other.options);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_select.Select, Object.assign({}, getRmwcProps(other), {
     options: options,
@@ -132,7 +110,6 @@ var Select = function Select(props) {
     error: true
   }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
 };
-
 exports.Select = Select;
 var _default = Select;
 exports.default = _default;

package/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"names":["webinySelect","css","noLabel","height","paddingTop","getOptions","initialOptions","Array","isArray","options","option","push","label","value","Object","keys","map","key","skipProps","getRmwcProps","props","newProps","filter","name","includes","forEach","Select","initialValue","description","validation","other","undefined","validationIsValid","isValid","validationMessage","message","classNames","className","e","onChange","target"],"sources":["Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    FormattedOption,\n    Select as RmwcSelect,\n    SelectProps as RmwcSelectProps\n} from \"@rmwc/select\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type SelectProps = FormComponentProps &\n    RmwcSelectProps & {\n        // Component label.\n        label?: string;\n\n        // Is checkbox disabled?\n        disabled?: boolean;\n\n        // Description beneath the select.\n        description?: string;\n\n        // Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n        placeholder?: string;\n\n        // Makes the Select have a visual box.\n        box?: string;\n\n        // One or more <option> or <optgroup> elements.\n        children?: Array<React.ReactElement<\"option\"> | React.ReactElement<\"optgroup\">>;\n\n        // IconProps for the root element. By default, additional props spread to the native select element.\n        rootProps?: Object;\n\n        // A className for the root element.\n        className?: string;\n    };\n\nconst 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\nconst noLabel = css({\n    \"&.mdc-select\": {\n        height: 35,\n        \".mdc-select__native-control\": {\n            paddingTop: 0\n        },\n        \"&.mdc-select--box\": {\n            \".mdc-select__native-control\": {\n                height: 35,\n                paddingTop: 5\n            }\n        }\n    }\n});\n/**\n * TODO verify that this is correct method get all options.\n */\nconst getOptions = (initialOptions: SelectProps[\"options\"]): FormattedOption[] => {\n    if (!initialOptions) {\n        return [];\n    } else if (Array.isArray(initialOptions)) {\n        const options: FormattedOption[] = [];\n        for (const option of initialOptions) {\n            if (typeof option === \"string\") {\n                options.push({\n                    label: option,\n                    value: option\n                });\n                continue;\n            }\n            options.push({\n                label: option.label,\n                value: option.value,\n                options: option.options\n            });\n        }\n        return options;\n    }\n    return Object.keys(initialOptions).map(key => {\n        return {\n            label: initialOptions[key],\n            value: key\n        };\n    });\n};\n\n/**\n * Select component lets users choose a value from given set of options.\n */\nconst skipProps = [\"validate\", \"form\"];\n\nconst getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps => {\n    const newProps: FormComponentProps & RmwcSelectProps = {};\n    Object.keys(props)\n        .filter(name => !skipProps.includes(name))\n        // @ts-ignore\n        .forEach((name: any) => (newProps[name] = props[name]));\n\n    return newProps;\n};\n/**\n * We check for null and undefined in the value because React is complaining about those values.\n * Error says to use the empty string in null/undefined case.\n */\nexport const Select: React.FC<SelectProps> = props => {\n    const { value: initialValue, description, validation, ...other } = props;\n\n    const value = initialValue === null || initialValue === undefined ? \"\" : initialValue;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const options = getOptions(other.options);\n\n    return (\n        <React.Fragment>\n            <RmwcSelect\n                {...getRmwcProps(other)}\n                options={options}\n                value={value}\n                className={classNames(\n                    \"webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded\",\n                    webinySelect,\n                    props.className,\n                    {\n                        [noLabel]: !props.label\n                    }\n                )}\n                onChange={e => {\n                    props.onChange && props.onChange((e.target as any).value);\n                }}\n            />\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\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"names":["webinySelect","css","noLabel","height","paddingTop","getOptions","initialOptions","Array","isArray","options","option","push","label","value","Object","keys","map","key","skipProps","getRmwcProps","props","newProps","filter","name","includes","forEach","Select","initialValue","description","validation","other","undefined","validationIsValid","isValid","validationMessage","message","classNames","className","e","onChange","target"],"sources":["Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    FormattedOption,\n    Select as RmwcSelect,\n    SelectProps as RmwcSelectProps\n} from \"@rmwc/select\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type SelectProps = FormComponentProps &\n    RmwcSelectProps & {\n        // Component label.\n        label?: string;\n\n        // Is checkbox disabled?\n        disabled?: boolean;\n\n        // Description beneath the select.\n        description?: string;\n\n        // Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n        placeholder?: string;\n\n        // Makes the Select have a visual box.\n        box?: string;\n\n        // One or more <option> or <optgroup> elements.\n        children?: Array<React.ReactElement<\"option\"> | React.ReactElement<\"optgroup\">>;\n\n        // IconProps for the root element. By default, additional props spread to the native select element.\n        rootProps?: Object;\n\n        // A className for the root element.\n        className?: string;\n    };\n\nconst 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\nconst noLabel = css({\n    \"&.mdc-select\": {\n        height: 35,\n        \".mdc-select__native-control\": {\n            paddingTop: 0\n        },\n        \"&.mdc-select--box\": {\n            \".mdc-select__native-control\": {\n                height: 35,\n                paddingTop: 5\n            }\n        }\n    }\n});\n/**\n * TODO verify that this is correct method get all options.\n */\nconst getOptions = (initialOptions: SelectProps[\"options\"]): FormattedOption[] => {\n    if (!initialOptions) {\n        return [];\n    } else if (Array.isArray(initialOptions)) {\n        const options: FormattedOption[] = [];\n        for (const option of initialOptions) {\n            if (typeof option === \"string\") {\n                options.push({\n                    label: option,\n                    value: option\n                });\n                continue;\n            }\n            options.push({\n                label: option.label,\n                value: option.value,\n                options: option.options\n            });\n        }\n        return options;\n    }\n    return Object.keys(initialOptions).map(key => {\n        return {\n            label: initialOptions[key],\n            value: key\n        };\n    });\n};\n\n/**\n * Select component lets users choose a value from given set of options.\n */\nconst skipProps = [\"validate\", \"form\"];\n\nconst getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps => {\n    const newProps: FormComponentProps & RmwcSelectProps = {};\n    Object.keys(props)\n        .filter(name => !skipProps.includes(name))\n        // @ts-ignore\n        .forEach((name: any) => (newProps[name] = props[name]));\n\n    return newProps;\n};\n/**\n * We check for null and undefined in the value because React is complaining about those values.\n * Error says to use the empty string in null/undefined case.\n */\nexport const Select: React.FC<SelectProps> = props => {\n    const { value: initialValue, description, validation, ...other } = props;\n\n    const value = initialValue === null || initialValue === undefined ? \"\" : initialValue;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const options = getOptions(other.options);\n\n    return (\n        <React.Fragment>\n            <RmwcSelect\n                {...getRmwcProps(other)}\n                options={options}\n                value={value}\n                className={classNames(\n                    \"webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded\",\n                    webinySelect,\n                    props.className,\n                    {\n                        [noLabel]: !props.label\n                    }\n                )}\n                onChange={e => {\n                    props.onChange && props.onChange((e.target as any).value);\n                }}\n            />\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\nexport default Select;\n"],"mappings":"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"}

package/Select/Select.stories.js

@@ -1,21 +1,13 @@
 "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 () {

package/Select/Select.stories.js.map

@@ -1 +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,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EACA,IAAMC,GAAG,GAAG,IAAAD,mBAAA,EAAQ,KAAR,EAAe,KAAf,CAAZ;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcE,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD,QACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,cAAD;MACI,KAAK,EAAC,MADV;MAEI,QAAQ,EAAEJ,QAFd;MAGI,GAAG,EAAEE,GAAG,CAACG,QAAJ,EAHT;MAII,WAAW,EAAC;IAJhB,gBAMI;MAAU,KAAK,EAAC;IAAhB,gBACI;MAAQ,KAAK,EAAC;IAAd,GAA+B,iBAA/B,CADJ,eAEI;MAAQ,KAAK,EAAC;IAAd,GAAwB,SAAxB,CAFJ,eAGI;MAAQ,KAAK,EAAC;IAAd,GAAwB,UAAxB,CAHJ,CANJ,eAWI;MAAU,KAAK,EAAC;IAAhB,gBACI;MAAQ,KAAK,EAAC;IAAd,GAAuB,QAAvB,CADJ,eAEI;MAAQ,KAAK,EAAC;IAAd,GAAoB,KAApB,CAFJ,eAGI;MAAQ,KAAK,EAAC;IAAd,GAAwB,YAAxB,CAHJ,CAXJ,CADJ,CADH;EAAA,CADL,CADJ,CADJ,eA0BI,6BAAC,uBAAD,85CA1BJ,CAFJ,CADJ;AA6DH,CAnEL,EAoEI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAD;EAAd;AAAR,CApEJ"}
+{"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

@@ -3,9 +3,7 @@
 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;

package/Select/index.js.map

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

package/Skeleton/Skeleton.d.ts

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

package/Skeleton/Skeleton.js

@@ -1,25 +1,22 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 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 Skeleton = function Skeleton(props) {
+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: "var(--mdc-theme-background)",
-    highlightColor: "var(--mdc-theme-surface)"
+    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

@@ -1 +1 @@
-{"version":3,"names":["Skeleton","props"],"sources":["Skeleton.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport ReactLoadingSkeleton, { SkeletonProps, SkeletonTheme } from \"react-loading-skeleton\";\n\nimport \"react-loading-skeleton/dist/skeleton.css\";\n\nexport const Skeleton = (props: SkeletonProps): ReactElement => {\n    return (\n        <SkeletonTheme\n            baseColor={\"var(--mdc-theme-background)\"}\n            highlightColor={\"var(--mdc-theme-surface)\"}\n        >\n            <ReactLoadingSkeleton {...props} />\n        </SkeletonTheme>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAwC;EAC5D,oBACI,6BAAC,mCAAD;IACI,SAAS,EAAE,6BADf;IAEI,cAAc,EAAE;EAFpB,gBAII,6BAAC,6BAAD,EAA0BA,KAA1B,CAJJ,CADJ;AAQH,CATM"}
+{"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.js

@@ -1,17 +1,11 @@
 "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, {

package/Skeleton/Skeleton.stories.js.map

@@ -1 +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,iBAAA,EAAU,qBAAV,EAAiCC,MAAjC,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,kBAAD,OADJ,CAFJ,eAKI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,kBAAD;IAAU,KAAK,EAAE;EAAjB,EADJ,CALJ,CADJ;AAWH,CAdL,EAeI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kBAAD;EAAd;AAAR,CAfJ"}
+{"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.js

@@ -3,9 +3,7 @@
 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;

package/Skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Skeleton\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"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.js

@@ -1,32 +1,20 @@
 "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__*/(0, _styled.default)("div", {
   target: "e1ll7sdi0",
@@ -37,24 +25,19 @@ var Wrapper = /*#__PURE__*/(0, _styled.default)("div", {
     left: 5
   }
 });
+
 /**
  * Slider component lets users choose a value from given range.
  */
-
 var Slider = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Slider, _React$Component);
-
   var _super = (0, _createSuper2.default)(Slider);
-
   function Slider() {
     var _this;
-
     (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));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (e) {
       _this.props.onChange && _this.props.onChange(e.detail.value);
@@ -64,25 +47,21 @@ var Slider = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
   (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;
       }
-
       var _ref = validation || {},
-          validationIsValid = _ref.isValid,
-          validationMessage = _ref.message;
-
+        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.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_slider.Slider, Object.assign({}, this.props, {
@@ -96,6 +75,5 @@ var Slider = /*#__PURE__*/function (_React$Component) {
   }]);
   return Slider;
 }(_react.default.Component);
-
 var _default = Slider;
 exports.default = _default;

package/Slider/Slider.js.map

@@ -1 +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,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC1BC,KAAK,EAAE,MADmB;EAE1B,4CAA4C;IACxCC,IAAI,EAAE;EADkC;AAFlB,CAAjB,CAAb;AAOA;AACA;AACA;;IACMC,M;;;;;;;;;;;;;;;2FACS,UAACC,CAAD,EAAsC;MAC7C,MAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAoBF,CAAC,CAACG,MAAF,CAASC,KAA7B,CAAvB;IACH,C;0FAES,UAACJ,CAAD,EAAsC;MAC5C,MAAKC,KAAL,CAAWI,OAAX,IAAsB,MAAKJ,KAAL,CAAWI,OAAX,CAAmBL,CAAC,CAACG,MAAF,CAASC,KAA5B,CAAtB;IACH,C;;;;;;WAED,kBAAyB;MACrB,kBAAkD,KAAKH,KAAvD;MAAA,IAAQG,KAAR,eAAQA,KAAR;MAAA,IAAeE,KAAf,eAAeA,KAAf;MAAA,IAAsBC,WAAtB,eAAsBA,WAAtB;MAAA,IAAmCC,UAAnC,eAAmCA,UAAnC;MAEA,IAAIC,WAAW,GAAGL,KAAlB;;MACA,IAAIA,KAAK,KAAK,IAAV,IAAkB,OAAOA,KAAP,KAAiB,WAAvC,EAAoD;QAChDK,WAAW,GAAG,KAAKR,KAAL,CAAWS,GAAX,IAAkB,CAAhC;MACH;;MAED,WAAmEF,UAAU,IAAI,EAAjF;MAAA,IAAiBG,iBAAjB,QAAQC,OAAR;MAAA,IAA6CC,iBAA7C,QAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,QACKR,KAAK,iBACF;QAAK,SAAS,EAAC;MAAf,GACKA,KADL,CAFR,eAOI,6BAAC,OAAD,qBACI,6BAAC,cAAD,oBACQ,KAAKL,KADb;QAEI,KAAK,EAAEQ,WAFX;QAGI,QAAQ,EAAE,KAAKP,QAHnB;QAII,OAAO,EAAE,KAAKG;MAJlB,GADJ,CAPJ,EAgBKM,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BE,iBAA3B,CAjBR,EAoBKF,iBAAiB,KAAK,KAAtB,IAA+BJ,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CArBR,CADJ;IA0BH;;;EA7CgBQ,cAAA,CAAMC,S;;eAgDZjB,M"}
+{"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,21 +1,13 @@
 "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 () {
@@ -32,7 +24,7 @@ story.add("usage", function () {
       name: "width"
     }, function (_ref2) {
       var value = _ref2.value,
-          onChange = _ref2.onChange;
+        onChange = _ref2.onChange;
       return /*#__PURE__*/_react.default.createElement(_Slider.default, {
         label: "Number of rooms:",
         disabled: disabled,

package/Slider/Slider.stories.js.map

@@ -1 +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,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,KAAK,EAAE;IAAT;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,GACK;MAAA,IAAGC,KAAH,SAAGA,KAAH;MAAA,IAAUC,QAAV,SAAUA,QAAV;MAAA,oBACG,6BAAC,eAAD;QACI,KAAK,EAAE,kBADX;QAEI,QAAQ,EAAEN,QAFd;QAGI,WAAW,EACP,+CAJR;QAMI,QAAQ,MANZ;QAOI,cAAc,MAPlB;QAQI,GAAG,EAAE,CART;QASI,GAAG,EAAE,EATT;QAUI,IAAI,EAAE,CAVV;QAWI,OAAO,EAAEM,QAXb;QAYI,QAAQ,EAAEA,QAZd;QAaI,KAAK,EAAED;MAbX,EADH;IAAA,CADL,CADH;EAAA,CADL,CADJ,CADJ,eA0BI,6BAAC,uBAAD,wrCA1BJ,CAFJ,CADJ;AA2DH,CAhEL,EAiEI;EAAEE,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,eAAD;EAAd;AAAR,CAjEJ"}
+{"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"}