quicksnack 3.30.0 → 3.30.1

package/dist/animation/SlideInFromTop/SlideInFromTop.js

@@ -26,9 +26,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SlideInFromTop = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var slideInFromTop = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  0% {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
-exports.SlideInFromTop = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " ", " ease-in 0s 1;\n"], ["\n  animation: ", " ", " ease-in 0s 1;\n"])), slideInFromTop, function (props) { return props.speed || '.3s'; });
+exports.SlideInFromTop = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " ", " ease-in 0s 1;\n"], ["\n  animation: ", " ", " ease-in 0s 1;\n"])), slideInFromTop, function (props) { return props.speed || '.3s'; });
 var templateObject_1, templateObject_2;

package/dist/animation/SlideOpen/SlideOpen.js

@@ -10,9 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SlideOpen = exports.useOnNextTick = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var Animation = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["                \n  transform: ", ";  \n  transition-duration: ", "s;  \n  transition-property: transform;     \n}\n"], ["                \n  transform: ", ";  \n  transition-duration: ", "s;  \n  transition-property: transform;     \n}\n"])), function (props) { return props.isOpen ? "translate(0)" : "translateY(-101%)"; }, function (props) { return props.duration || 0.25; });
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+var Animation = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["                \n  transform: ", ";  \n  transition-duration: ", "s;  \n  transition-property: transform;     \n}\n"], ["                \n  transform: ", ";  \n  transition-duration: ", "s;  \n  transition-property: transform;     \n}\n"])), function (props) { return props.isOpen ? "translate(0)" : "translateY(-101%)"; }, function (props) { return props.duration || 0.25; });
 var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
-var Hider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n   display: ", ";\n"], ["\n   display: ", ";\n"
+var Hider = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n   display: ", ";\n"], ["\n   display: ", ";\n"
     // Returns the boolean value in the next tick.
     // Allows for transition to start when DOM is updated, it prevents a flickers.
 ])), function (props) { return props.isHidden ? 'none' : 'block'; });

package/dist/components/Alert/Alert.js

@@ -10,10 +10,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Alert = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var Header_1 = require("../../typography/Header/Header");
 var Paragraph_1 = require("../../typography/Paragraph/Paragraph");
 var Box_1 = require("../Box/Box");
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 4px;     \n  border: 1px solid ", ";\n  background-color: ", ";      \n  color: ", ";      \n"], ["\n  border-radius: 4px;     \n  border: 1px solid ", ";\n  background-color: ", ";      \n  color: ", ";      \n"])), function (props) { return props.theme.palette.pane[props.variant].main.idle.border; }, function (props) { return props.theme.palette.pane[props.variant].main.idle.background; }, function (props) { return props.theme.palette.pane[props.variant].main.idle.text; });
+var Wrapper = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 4px;     \n  border: 1px solid ", ";\n  background-color: ", ";      \n  color: ", ";      \n"], ["\n  border-radius: 4px;     \n  border: 1px solid ", ";\n  background-color: ", ";      \n  color: ", ";      \n"])), function (props) { return props.theme.palette.pane[props.variant].main.idle.border; }, function (props) { return props.theme.palette.pane[props.variant].main.idle.background; }, function (props) { return props.theme.palette.pane[props.variant].main.idle.text; });
 var Alert = function (_a) {
     var children = _a.children, title = _a.title, _b = _a.variant, variant = _b === void 0 ? "basic" : _b;
     return (react_1.default.createElement(Wrapper, { variant: variant },

package/dist/components/Box/Box.js

@@ -26,11 +26,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = void 0;
 var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 var styled_components_1 = __importStar(require("styled-components"));
-exports.Box = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  box-sizing: border-box;\n  \n  ", "\n"], ["\n  box-sizing: border-box;\n  \n  ", "\n"])), function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+exports.Box = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  box-sizing: border-box;\n  \n  ", "\n"], ["\n  box-sizing: border-box;\n  \n  ", "\n"])), function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
     "p": function (unit) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), props.theme.spacing(unit)); },
     "pt": function (unit) { return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), props.theme.spacing(unit)); },
     "pr": function (unit) { return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), props.theme.spacing(unit)); },

package/dist/components/CollapsiblePanel/CollapsiblePanel.js

@@ -48,6 +48,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsiblePanel = void 0;
 var react_1 = __importStar(require("react"));
@@ -55,7 +58,8 @@ var styled_components_1 = __importStar(require("styled-components"));
 var Panel_1 = require("../Panel/Panel");
 var SlideOpen_1 = require("../../animation/SlideOpen/SlideOpen");
 var Box_1 = require("../Box/Box");
-var TitleActionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform: scaleY( ", " );\n"], ["\n  transform: scaleY( ", " );\n"])), function (props) { return props.isOpen ? '-1' : '1'; });
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+var TitleActionWrapper = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform: scaleY( ", " );\n"], ["\n  transform: scaleY( ", " );\n"])), function (props) { return props.isOpen ? '-1' : '1'; });
 var StyledPanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n   ", "\n"], ["\n   ", "\n"])), function (props) { return !props.isOpen && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["border-bottom: 0;"], ["border-bottom: 0;"]))); });
 var CollapsiblePanel = function (_a) {
     var isInitiallyOpen = _a.isInitiallyOpen, children = _a.children, titleAction = _a.titleAction, rest = __rest(_a, ["isInitiallyOpen", "children", "titleAction"]);

package/dist/components/Dropdown/Dropdown.js

@@ -37,14 +37,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = exports.DropdownMenuItem = exports.DropdownMenu = void 0;
 var react_1 = __importStar(require("react"));
 var Button_1 = require("../../form/Button/Button");
 var styled_components_1 = __importStar(require("styled-components"));
 var SlideInFromTop_1 = require("../../animation/SlideInFromTop/SlideInFromTop");
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var Dropper = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);\n  position: absolute;\n  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  \n  background-color: ", ";\n  z-index: 100;\n  \n  ", "  \n"], ["\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);\n  position: absolute;\n  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  \n  background-color: ", ";\n  z-index: 100;\n  \n  ", "  \n"])), function (props) { return props.theme.palette.common.white; }, function (props) { return props.align === 'right' ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["right: 0;"], ["right: 0;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["left: 0;"], ["left: 0;"]))); });
+var Dropper = styled_components_1.default.span.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);\n  position: absolute;\n  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  \n  background-color: ", ";\n  z-index: 100;\n  \n  ", "  \n"], ["\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);\n  position: absolute;\n  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  \n  background-color: ", ";\n  z-index: 100;\n  \n  ", "  \n"])), function (props) { return props.theme.palette.common.white; }, function (props) { return props.align === 'right' ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["right: 0;"], ["right: 0;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["left: 0;"], ["left: 0;"]))); });
 exports.DropdownMenu = styled_components_1.default.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: ", ";  \n"], ["\n  list-style: none;\n  margin: 0;\n  padding: ", ";  \n"])), function (props) { return props.theme.spacing(2, 0); });
 exports.DropdownMenuItem = styled_components_1.default.li(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  cursor: pointer;\n  padding: ", ";\n  &:hover {\n    background-color: #ddd;\n  }\n"], ["\n  cursor: pointer;\n  padding: ", ";\n  &:hover {\n    background-color: #ddd;\n  }\n"])), function (props) { return props.theme.spacing(0, 3); });
 var Dropdown = function (_a) {

package/dist/components/Dropzone/Dropzone.js

@@ -57,8 +57,9 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var Box_1 = require("../Box/Box");
 var Button_1 = require("../../form/Button/Button");
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var HiddenInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
-var StyledDropZone = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  height: ", ";\n  \n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);\n  \n  & > * {\n    pointerEvents: none;\n  }\n  \n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  height: ", ";\n  \n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);\n  \n  & > * {\n    pointerEvents: none;\n  }\n  \n  ", "\n"])), function (props) { return props.theme.spacing(25); }, function (props) { return props.isReadyToDrop && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: #FAFAFA;    \n  "], ["\n    background-color: #FAFAFA;    \n  "]))); });
+var StyledDropZone = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  height: ", ";\n  \n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);\n  \n  & > * {\n    pointerEvents: none;\n  }\n  \n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  height: ", ";\n  \n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);\n  \n  & > * {\n    pointerEvents: none;\n  }\n  \n  ", "\n"])), function (props) { return props.theme.spacing(25); }, function (props) { return props.isReadyToDrop && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: #FAFAFA;    \n  "], ["\n    background-color: #FAFAFA;    \n  "]))); });
 var Dropzone = function (_a) {
     var onChange = _a.onChange, icon = _a.icon, label = _a.label, rest = __rest(_a, ["onChange", "icon", "label"]);
     var fileInput = react_1.default.useRef(null);

package/dist/components/Menu/Menu.js

@@ -34,8 +34,9 @@ exports.MenuItem = exports.Menu = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var react_1 = __importDefault(require("react"));
 var SlideOpen_1 = require("../../animation/SlideOpen/SlideOpen");
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 exports.Menu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n"], ["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n"])));
-var StyledMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", ";\n    \n  ", "\n           \n  & button:hover, & button:active, & button:focus {\n     color: ", " !important;\n  }\n  \n  & button {\n    width: 100%;\n  }\n  \n  ", "  \n"], ["\n  padding: ", ";\n    \n  ", "\n           \n  & button:hover, & button:active, & button:focus {\n     color: ", " !important;\n  }\n  \n  & button {\n    width: 100%;\n  }\n  \n  ", "  \n"])), function (props) { return props.theme.spacing(.5, 5); }, function (props) { return props.isOpen && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["  \n      border-left: ", " solid ", ";      \n      background: #293846;\n      \n      & > * {\n        margin-left: ", ";\n      }\n  "], ["  \n      border-left: ", " solid ", ";      \n      background: #293846;\n      \n      & > * {\n        margin-left: ", ";\n      }\n  "])), props.theme.spacing(1), props.theme.palette.colors.blue, props.theme.spacing(-1)); }, function (props) { return props.theme.palette.common.white; }, function (props) { return props.isActive && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    & button { \n      color: ", ";\n    }\n  "], ["\n    & button { \n      color: ", ";\n    }\n  "])), props.theme.palette.common.white); });
+var StyledMenuItem = styled_components_1.default.li.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", ";\n    \n  ", "\n           \n  & button:hover, & button:active, & button:focus {\n     color: ", " !important;\n  }\n  \n  & button {\n    width: 100%;\n  }\n  \n  ", "  \n"], ["\n  padding: ", ";\n    \n  ", "\n           \n  & button:hover, & button:active, & button:focus {\n     color: ", " !important;\n  }\n  \n  & button {\n    width: 100%;\n  }\n  \n  ", "  \n"])), function (props) { return props.theme.spacing(.5, 5); }, function (props) { return props.isOpen && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["  \n      border-left: ", " solid ", ";      \n      background: #293846;\n      \n      & > * {\n        margin-left: ", ";\n      }\n  "], ["  \n      border-left: ", " solid ", ";      \n      background: #293846;\n      \n      & > * {\n        margin-left: ", ";\n      }\n  "])), props.theme.spacing(1), props.theme.palette.colors.blue, props.theme.spacing(-1)); }, function (props) { return props.theme.palette.common.white; }, function (props) { return props.isActive && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    & button { \n      color: ", ";\n    }\n  "], ["\n    & button { \n      color: ", ";\n    }\n  "])), props.theme.palette.common.white); });
 var MenuItem = function (_a) {
     var item = _a.item, isOpen = _a.isOpen, isActive = _a.isActive, children = _a.children;
     var _b = react_1.default.useState(!!isOpen), isDelayedOpen = _b[0], setDelayedOpen = _b[1];

package/dist/components/Paginator/Paginator.js

@@ -11,8 +11,9 @@ exports.Paginator = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var useResponsiveBreakpoints_1 = require("../../responsiveness/useResponsiveBreakpoints");
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var Button = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  user-select:none;\n  cursor: pointer;\n\n  min-height: ", ";\n  padding: .2em 1.3em .2em;\n  margin: 0;\n  line-height: 1em;  \n  outline: 0;\n  border: 1px solid rgba(34,36,38,.15);\n  \n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  background-color: ", ";\n \n  &:not(:first-of-type) {\n    border-left: 0;\n  }\n \n  ", "      \n"], ["\n  user-select:none;\n  cursor: pointer;\n\n  min-height: ", ";\n  padding: .2em 1.3em .2em;\n  margin: 0;\n  line-height: 1em;  \n  outline: 0;\n  border: 1px solid rgba(34,36,38,.15);\n  \n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  background-color: ", ";\n \n  &:not(:first-of-type) {\n    border-left: 0;\n  }\n \n  ", "      \n"])), function (props) { return props.theme.spacing(8); }, function (props) { return props.active ? '#F2F2F2' : '#fff'; }, function (props) { return !props.disabled && ("\n    &:hover {    \n      background-color: #E9E9E9;        \n    }\n  "); });
+var Button = styled_components_1.default.button.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  user-select:none;\n  cursor: pointer;\n\n  min-height: ", ";\n  padding: .2em 1.3em .2em;\n  margin: 0;\n  line-height: 1em;  \n  outline: 0;\n  border: 1px solid rgba(34,36,38,.15);\n  \n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  background-color: ", ";\n \n  &:not(:first-of-type) {\n    border-left: 0;\n  }\n \n  ", "      \n"], ["\n  user-select:none;\n  cursor: pointer;\n\n  min-height: ", ";\n  padding: .2em 1.3em .2em;\n  margin: 0;\n  line-height: 1em;  \n  outline: 0;\n  border: 1px solid rgba(34,36,38,.15);\n  \n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  background-color: ", ";\n \n  &:not(:first-of-type) {\n    border-left: 0;\n  }\n \n  ", "      \n"])), function (props) { return props.theme.spacing(8); }, function (props) { return props.active ? '#F2F2F2' : '#fff'; }, function (props) { return !props.disabled && ("\n    &:hover {    \n      background-color: #E9E9E9;        \n    }\n  "); });
 var range = function (start, end) {
     var nums = [];
     for (var i = start; i < end; i++) {

package/dist/components/Statistic/Statistic.js

@@ -11,9 +11,10 @@ exports.Statistic = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Box_1 = require("../Box/Box");
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  border-radius: ", ";\n  padding: ", ";\n  background-color: ", ";  \n  box-sizing: border-box;\n  height: 100%;\n"], ["\n  display: flex;\n  border-radius: ", ";\n  padding: ", ";\n  background-color: ", ";  \n  box-sizing: border-box;\n  height: 100%;\n"])), function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(4); }, function (props) { return props.theme.palette.colors[props.backgroundColor]; });
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+var Wrapper = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  border-radius: ", ";\n  padding: ", ";\n  background-color: ", ";  \n  box-sizing: border-box;\n  height: 100%;\n"], ["\n  display: flex;\n  border-radius: ", ";\n  padding: ", ";\n  background-color: ", ";  \n  box-sizing: border-box;\n  height: 100%;\n"])), function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(4); }, function (props) { return props.theme.palette.colors[props.backgroundColor]; });
 var Label = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-transform: uppercase;\n  color: ", ";\n  font-size: ", ";  \n"], ["\n  text-transform: uppercase;\n  color: ", ";\n  font-size: ", ";  \n"])), function (props) { return props.theme.palette.common.white; }, function (props) { return props.theme.spacing(3); });
-var Value = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";  \n  font-weight: bold;  \n  font-size: ", ";     \n"], ["\n  color: ", ";  \n  font-weight: bold;  \n  font-size: ", ";     \n"])), function (props) { return props.theme.palette.common.white; }, function (props) { return props.theme.spacing(props.smallerValue ? 5.5 : 7.5); });
+var Value = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";  \n  font-weight: bold;  \n  font-size: ", ";     \n"], ["\n  color: ", ";  \n  font-weight: bold;  \n  font-size: ", ";     \n"])), function (props) { return props.theme.palette.common.white; }, function (props) { return props.theme.spacing(props.smallerValue ? 5.5 : 7.5); });
 var IconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: ", " 0 auto 0; \n  & svg {\n    height: 100%;\n    width: ", ";\n    color: white;\n  }\n"], ["\n  margin: ", " 0 auto 0; \n  & svg {\n    height: 100%;\n    width: ", ";\n    color: white;\n  }\n"])), function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(10); });
 var Statistic = function (_a) {
     var icon = _a.icon, value = _a.value, label = _a.label, backgroundColor = _a.backgroundColor, smallerValue = _a.smallerValue;

package/dist/components/Table/Table.js

@@ -56,17 +56,18 @@ exports.Table = exports.StyledTable = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var responsiveProps_1 = require("../../responsiveness/responsiveProps");
-exports.StyledTable = styled_components_1.default.table(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 4px;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  \n  ", "      \n"], ["\n  border-radius: 4px;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  \n  ", "      \n"])), function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+exports.StyledTable = styled_components_1.default.table.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 4px;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  \n  ", "      \n"], ["\n  border-radius: 4px;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  \n  ", "      \n"])), function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
     "tableLayout": function (unit) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["table-layout: ", ";"], ["table-layout: ", ";"])), unit); },
 }); });
-var StyledTableRow = styled_components_1.default.tr(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > td {\n    transition: background-color .1s ease, color .1s ease;\n  }\n  \n  ", "    \n"], ["\n  & > td {\n    transition: background-color .1s ease, color .1s ease;\n  }\n  \n  ", "    \n"])), function (props) { return Object.entries(props.theme.palette.pane).map(function (_a) {
+var StyledTableRow = styled_components_1.default.tr.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > td {\n    transition: background-color .1s ease, color .1s ease;\n  }\n  \n  ", "    \n"], ["\n  & > td {\n    transition: background-color .1s ease, color .1s ease;\n  }\n  \n  ", "    \n"])), function (props) { return Object.entries(props.theme.palette.pane).map(function (_a) {
     var variant = _a[0], value = _a[1];
     return "\n    &:nth-child(odd) > td.".concat(variant, " {    \n      color: ").concat(value.main.idle.text, ";\n      background-color: ").concat(value.main.idle.background, ";        \n    }                  \n    &:nth-child(even) > td.").concat(variant, " {    \n      color: ").concat(value.alternate.idle.text, ";\n      background-color: ").concat(value.alternate.idle.background, ";        \n    }            \n    \n    \n    ").concat(!props.disableHover && "\n      &:nth-child(odd):hover > td.".concat(variant, " {\n        color: ").concat(value.main.hover.text, ";\n        background-color: ").concat(value.main.hover.background, ";          \n      }\n      &:nth-child(even):hover > td.").concat(variant, " {\n        color: ").concat(value.alternate.hover.text, ";\n        background-color: ").concat(value.alternate.hover.background, ";          \n      }\n    "), " \n  ");
 }); });
-var StyledTableCell = styled_components_1.default.td(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-top: 1px solid rgba(34,36,38,.1);\n  border-right: 1px solid rgba(34,36,38,.1);    \n  padding: ", ";\n  \n  &:last-of-type {\n    border-right: 0;\n  }\n        \n  ", "\n"], ["\n  border-top: 1px solid rgba(34,36,38,.1);\n  border-right: 1px solid rgba(34,36,38,.1);    \n  padding: ", ";\n  \n  &:last-of-type {\n    border-right: 0;\n  }\n        \n  ", "\n"])), function (props) { return props.theme.spacing(2, 3); }, function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
+var StyledTableCell = styled_components_1.default.td.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-top: 1px solid rgba(34,36,38,.1);\n  border-right: 1px solid rgba(34,36,38,.1);    \n  padding: ", ";\n  \n  &:last-of-type {\n    border-right: 0;\n  }\n        \n  ", "\n"], ["\n  border-top: 1px solid rgba(34,36,38,.1);\n  border-right: 1px solid rgba(34,36,38,.1);    \n  padding: ", ";\n  \n  &:last-of-type {\n    border-right: 0;\n  }\n        \n  ", "\n"])), function (props) { return props.theme.spacing(2, 3); }, function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
     width: function (unit) { return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), unit); },
 }); });
-var StyledTableHeadCell = styled_components_1.default.th(templateObject_7 || (templateObject_7 = __makeTemplateObject(["  \n  border-right: 1px solid rgba(34,36,38,.1); \n  text-align: left;\n  padding: ", ";  \n  font-weight: 700;\n  transition: background-color .1s ease, color .1s ease;\n\n  &:last-of-type {\n    border-right: 0;\n  }\n  \n  ", "\n  \n  ", "\n \n  ", " \n  \n  ", "\n"], ["  \n  border-right: 1px solid rgba(34,36,38,.1); \n  text-align: left;\n  padding: ", ";  \n  font-weight: 700;\n  transition: background-color .1s ease, color .1s ease;\n\n  &:last-of-type {\n    border-right: 0;\n  }\n  \n  ", "\n  \n  ", "\n \n  ", " \n  \n  ", "\n"
+var StyledTableHeadCell = styled_components_1.default.th.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["  \n  border-right: 1px solid rgba(34,36,38,.1); \n  text-align: left;\n  padding: ", ";  \n  font-weight: 700;\n  transition: background-color .1s ease, color .1s ease;\n\n  &:last-of-type {\n    border-right: 0;\n  }\n  \n  ", "\n  \n  ", "\n \n  ", " \n  \n  ", "\n"], ["  \n  border-right: 1px solid rgba(34,36,38,.1); \n  text-align: left;\n  padding: ", ";  \n  font-weight: 700;\n  transition: background-color .1s ease, color .1s ease;\n\n  &:last-of-type {\n    border-right: 0;\n  }\n  \n  ", "\n  \n  ", "\n \n  ", " \n  \n  ", "\n"
     // Wrapper to allow for dot notated components:
 ])), function (props) { return props.theme.spacing(2, 3); }, function (props) { return !!props.variant && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    background-color: ", ";\n    \n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }    \n  "], ["\n    color: ", ";\n    background-color: ", ";\n    \n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }    \n  "])), props.theme.palette.pane[props.variant].main.idle.text, props.theme.palette.pane[props.variant].main.idle.background, props.theme.palette.pane[props.variant].main.hover.text, props.theme.palette.pane[props.variant].main.hover.background); }, function (props) { return props.width ? "width: ".concat(props.width, ";") : ''; }, function (props) { return props.sortable && "\n    cursor: pointer;\n    user-select: none;\n    \n    &:hover {      \n      background-color: ".concat(props.theme.palette.pane.basic.main.hover.background, ";   \n    }       \n  "); }, function (props) { return props.sortDirection && "         \n    position:relative;\n         \n    &:after {\n      content: \" \";\n      position: absolute; \n      right: 15px;\n      top: 50%;\n                     \n      height: 0;\n      width: 0;\n      border: 5px solid transparent;\n      \n      ".concat(props.sortDirection === 'asc' ? "\n        border-top-color: #000;\n        transform: translateY(-25%);\n      " : "\n        border-bottom-color: #000;\n        transform: translateY(-75%);\n      ", "                            \n    }       \n  "); });
 // Wrapper to allow for dot notated components:

package/dist/components/Timeline/Timeline.js

@@ -13,10 +13,11 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var Box_1 = require("../Box/Box");
 var CollapsiblePanel_1 = require("../CollapsiblePanel/CollapsiblePanel");
 var Panel_1 = require("../Panel/Panel");
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var FlatPanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-shadow: none;\n"], ["\n  box-shadow: none;\n"])));
 var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  \n  &:last-of-type .line:before {\n    background: none;\n  }\n"], ["\n  display: flex;\n  \n  &:last-of-type .line:before {\n    background: none;\n  }\n"])));
 var Line = (0, styled_components_1.default)(Box_1.Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  margin-right: ", ";\n  top: 4px;\n  \n  &:before {\n    background: #e7eaec;\n    content: '';\n    position: absolute;\n    top: 0;\n    left: ", ";\n    height: 100%;\n    width: ", ";\n  }\n    \n"], ["\n  position: relative;\n  margin-right: ", ";\n  top: 4px;\n  \n  &:before {\n    background: #e7eaec;\n    content: '';\n    position: absolute;\n    top: 0;\n    left: ", ";\n    height: 100%;\n    width: ", ";\n  }\n    \n"])), function (props) { return props.theme.spacing(4); }, function (props) { return props.theme.spacing(4.5); }, function (props) { return props.theme.spacing(1); });
-var Circle = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  background-color: ", ";\n  color: #fff; \n  \n  left: 0;\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  font-size: ", ";\n  \n  & > * {\n     position: absolute;\n     top: 50%;\n     left: 50%;\n     transform: translate(-50%, -50%);\n  }\n"], ["\n  position: relative;\n  background-color: ", ";\n  color: #fff; \n  \n  left: 0;\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  font-size: ", ";\n  \n  & > * {\n     position: absolute;\n     top: 50%;\n     left: 50%;\n     transform: translate(-50%, -50%);\n  }\n"])), function (props) { return props.color; }, function (props) { return props.theme.spacing(10); }, function (props) { return props.theme.spacing(10); }, function (props) { return props.theme.spacing(4); });
+var Circle = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  background-color: ", ";\n  color: #fff; \n  \n  left: 0;\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  font-size: ", ";\n  \n  & > * {\n     position: absolute;\n     top: 50%;\n     left: 50%;\n     transform: translate(-50%, -50%);\n  }\n"], ["\n  position: relative;\n  background-color: ", ";\n  color: #fff; \n  \n  left: 0;\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  font-size: ", ";\n  \n  & > * {\n     position: absolute;\n     top: 50%;\n     left: 50%;\n     transform: translate(-50%, -50%);\n  }\n"])), function (props) { return props.color; }, function (props) { return props.theme.spacing(10); }, function (props) { return props.theme.spacing(10); }, function (props) { return props.theme.spacing(4); });
 var Timeline = function (_a) {
     var title = _a.title, icon = _a.icon, color = _a.color, isInitiallyOpen = _a.isInitiallyOpen, titleMeta = _a.titleMeta, chevron = _a.chevron, children = _a.children;
     return (react_1.default.createElement(Wrapper, null,

package/dist/form/Button/Button.js

@@ -57,9 +57,10 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var theme_1 = require("../../theme");
 var responsiveProps_1 = require("../../responsiveness/responsiveProps");
-var Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "      \n"], ["\n  ", "\n  ", "      \n"])), function (props) { return props.stretch && "width: 100%;"; }, function (props) { return props.actionButton || props.stretch
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+var Wrapper = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "      \n"], ["\n  ", "\n  ", "      \n"])), function (props) { return props.stretch && "width: 100%;"; }, function (props) { return props.actionButton || props.stretch
     ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["margin: 0;"], ["margin: 0;"]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), function (props) { return props.theme.spacing(0, 2, 0, 0); }); });
-var StyledButton = styled_components_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;  \n  outline: 0;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  text-decoration: none;\n  font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  transition: background-color .1s ease, color .1s ease;      \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  user-select: none;\n  min-height: ", ";   \n  \n  ", "\n  \n  ", "\n  \n   \n  ", " \n    \n  &:disabled {\n    opacity: .5;\n    cursor: default;\n  }  \n                   \n  &:focus {\n    background-blend-mode: darken;\n  }        \n  \n  ", "\n          \n  ", "        \n"], ["\n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;  \n  outline: 0;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  text-decoration: none;\n  font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  transition: background-color .1s ease, color .1s ease;      \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  user-select: none;\n  min-height: ", ";   \n  \n  ", "\n  \n  ", "\n  \n   \n  ", " \n    \n  &:disabled {\n    opacity: .5;\n    cursor: default;\n  }  \n                   \n  &:focus {\n    background-blend-mode: darken;\n  }        \n  \n  ", "\n          \n  ", "        \n"])), function (props) { return props.inline ? 'auto' : '38px'; }, function (props) { return props.stretch && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: 100%;\n      display: block;\n  "], ["\n      width: 100%;\n      display: block;\n  "]))); }, function (props) { return props.actionButton && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: 100%;      \n      ", "\n  "], ["\n      width: 100%;      \n      ", "\n  "])), (0, responsiveProps_1.mq)('laptop', "width: auto")); }, function (props) { return props.variant !== 'text'
+var StyledButton = styled_components_1.default.button.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;  \n  outline: 0;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  text-decoration: none;\n  font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  transition: background-color .1s ease, color .1s ease;      \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  user-select: none;\n  min-height: ", ";   \n  \n  ", "\n  \n  ", "\n  \n   \n  ", " \n    \n  &:disabled {\n    opacity: .5;\n    cursor: default;\n  }  \n                   \n  &:focus {\n    background-blend-mode: darken;\n  }        \n  \n  ", "\n          \n  ", "        \n"], ["\n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;  \n  outline: 0;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  text-decoration: none;\n  font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  transition: background-color .1s ease, color .1s ease;      \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  user-select: none;\n  min-height: ", ";   \n  \n  ", "\n  \n  ", "\n  \n   \n  ", " \n    \n  &:disabled {\n    opacity: .5;\n    cursor: default;\n  }  \n                   \n  &:focus {\n    background-blend-mode: darken;\n  }        \n  \n  ", "\n          \n  ", "        \n"])), function (props) { return props.inline ? 'auto' : '38px'; }, function (props) { return props.stretch && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: 100%;\n      display: block;\n  "], ["\n      width: 100%;\n      display: block;\n  "]))); }, function (props) { return props.actionButton && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: 100%;      \n      ", "\n  "], ["\n      width: 100%;      \n      ", "\n  "])), (0, responsiveProps_1.mq)('laptop', "width: auto")); }, function (props) { return props.variant !== 'text'
     ? !props.icon
         ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["padding: ", "; min-width: ", ";"], ["padding: ", "; min-width: ", ";"])), props.theme.spacing(3, 5), function (props) { return props.theme.spacing(10); }) : props.hasChildren && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["position: relative; padding: ", ";"], ["position: relative; padding: ", ";"])), props.theme.spacing(3, 5, 3, 13))
     : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["font-weight: 700; padding: 0;"], ["font-weight: 700; padding: 0;"]))); }, function (props) {
@@ -71,7 +72,7 @@ var StyledButton = styled_components_1.default.button(templateObject_9 || (templ
     var _b = theme_1.theme.palette.button[(_a = props.variant) !== null && _a !== void 0 ? _a : 'default'], idle = _b.idle, hover = _b.hover, active = _b.active;
     return "\n        color: ".concat(idle.text, ";\n        background-color: ").concat(idle.background, ";        \n        \n        &:not(:disabled) {\n          &:hover, &:focus {\n            color: ").concat(hover.text, ";\n            background-color: ").concat(hover.background, ";        \n          }        \n  \n          &:active {\n            color: ").concat(active.text, ";\n            background-color: ").concat(active.background, ";        \n          } \n        }\n                      \n    ");
 });
-var IconWrapper = styled_components_1.default.span(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n \n  ", "          \n"], ["\n  ", "\n \n  ", "          \n"])), function (props) { return props.variant !== "text" && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n     min-width: ", ";\n  "], ["\n     min-width: ", ";\n  "])), props.theme.spacing(10)); }, function (props) { return props.variant === "text"
+var IconWrapper = styled_components_1.default.span.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n \n  ", "          \n"], ["\n  ", "\n \n  ", "          \n"])), function (props) { return props.variant !== "text" && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n     min-width: ", ";\n  "], ["\n     min-width: ", ";\n  "])), props.theme.spacing(10)); }, function (props) { return props.variant === "text"
     ? props.hasChildren && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), props.theme.spacing(2))
     : props.hasChildren && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: ", ";\n      height: 100%;\n      background-color: rgba(0,0,0,.05);\n      \n      & > svg {\n        transform: translate(-50%, -50%);\n        position: absolute;\n        top: 50%;\n        left: 50%;\n      }\n  "], ["\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: ", ";\n      height: 100%;\n      background-color: rgba(0,0,0,.05);\n      \n      & > svg {\n        transform: translate(-50%, -50%);\n        position: absolute;\n        top: 50%;\n        left: 50%;\n      }\n  "])), function (props) { return props.theme.spacing(10); }); });
 exports.Button = react_1.default.forwardRef(function (_a, ref) {

package/dist/form/Checkbox/Checkbox.js

@@ -56,9 +56,10 @@ exports.Checkbox = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var Box_1 = require("../../components/Box/Box");
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;  \n"], ["\n  position: relative;  \n"])));
-var Input = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  position: absolute;\n  top: 0;\n  left: 0;\n  \n  width: 17px;\n  height: 17px;  \n  \n  z-index: 99;\n  opacity: 0;  \n  margin-right: ", ";\n  transform: translateY(1px);\n  \n  &~span {\n    user-select: none;\n    padding-left: 1.85714em;\n    cursor: pointer;\n    font-size: .92857143em;\n  }\n  \n  &~span:before, &~span:after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 17px;\n    height: 17px;\n    line-height: 17px;\n    content: '';    \n    border-radius: 4px;\n    border: 1px solid rgba(34,36,38,.15);\n    z-index:0;\n  }\n  \n  &:checked~span {\n    font-style: italic;\n  }\n  \n  &:checked~span:before {\n    background: #fff;\n    border-color: rgba(34,36,38,.35); \n  }\n  \n  &:checked~span:after {    \n    font-style: normal; \n    text-align: center;\n    content: '\\2714';\n    opacity: 1;\n    color: ", "\n  }  \n  \n  &:focus~span:before, &:focus~span:after {\n    border-color: #85b7d9;\n    border-radius: 4px;\n    background: #fff;\n    box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;\n  } \n  \n  &.error~span {\n    color: ", "; \n  }\n  \n  &.error~span:before, &.error~span:after {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \n"], [" \n  position: absolute;\n  top: 0;\n  left: 0;\n  \n  width: 17px;\n  height: 17px;  \n  \n  z-index: 99;\n  opacity: 0;  \n  margin-right: ", ";\n  transform: translateY(1px);\n  \n  &~span {\n    user-select: none;\n    padding-left: 1.85714em;\n    cursor: pointer;\n    font-size: .92857143em;\n  }\n  \n  &~span:before, &~span:after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 17px;\n    height: 17px;\n    line-height: 17px;\n    content: '';    \n    border-radius: 4px;\n    border: 1px solid rgba(34,36,38,.15);\n    z-index:0;\n  }\n  \n  &:checked~span {\n    font-style: italic;\n  }\n  \n  &:checked~span:before {\n    background: #fff;\n    border-color: rgba(34,36,38,.35); \n  }\n  \n  &:checked~span:after {    \n    font-style: normal; \n    text-align: center;\n    content: '\\\\2714';\n    opacity: 1;\n    color: ", "\n  }  \n  \n  &:focus~span:before, &:focus~span:after {\n    border-color: #85b7d9;\n    border-radius: 4px;\n    background: #fff;\n    box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;\n  } \n  \n  &.error~span {\n    color: ", "; \n  }\n  \n  &.error~span:before, &.error~span:after {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.palette.common.black; }, function (props) { return props.theme.palette.form.error; });
-var Span = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) { return props.dimmed ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["color: #999c9e;"], ["color: #999c9e;"]))) : ''; });
+var Input = styled_components_1.default.input.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  position: absolute;\n  top: 0;\n  left: 0;\n  \n  width: 17px;\n  height: 17px;  \n  \n  z-index: 99;\n  opacity: 0;  \n  margin-right: ", ";\n  transform: translateY(1px);\n  \n  &~span {\n    user-select: none;\n    padding-left: 1.85714em;\n    cursor: pointer;\n    font-size: .92857143em;\n  }\n  \n  &~span:before, &~span:after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 17px;\n    height: 17px;\n    line-height: 17px;\n    content: '';    \n    border-radius: 4px;\n    border: 1px solid rgba(34,36,38,.15);\n    z-index:0;\n  }\n  \n  &:checked~span {\n    font-style: italic;\n  }\n  \n  &:checked~span:before {\n    background: #fff;\n    border-color: rgba(34,36,38,.35); \n  }\n  \n  &:checked~span:after {    \n    font-style: normal; \n    text-align: center;\n    content: '\\2714';\n    opacity: 1;\n    color: ", "\n  }  \n  \n  &:focus~span:before, &:focus~span:after {\n    border-color: #85b7d9;\n    border-radius: 4px;\n    background: #fff;\n    box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;\n  } \n  \n  &.error~span {\n    color: ", "; \n  }\n  \n  &.error~span:before, &.error~span:after {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \n"], [" \n  position: absolute;\n  top: 0;\n  left: 0;\n  \n  width: 17px;\n  height: 17px;  \n  \n  z-index: 99;\n  opacity: 0;  \n  margin-right: ", ";\n  transform: translateY(1px);\n  \n  &~span {\n    user-select: none;\n    padding-left: 1.85714em;\n    cursor: pointer;\n    font-size: .92857143em;\n  }\n  \n  &~span:before, &~span:after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 17px;\n    height: 17px;\n    line-height: 17px;\n    content: '';    \n    border-radius: 4px;\n    border: 1px solid rgba(34,36,38,.15);\n    z-index:0;\n  }\n  \n  &:checked~span {\n    font-style: italic;\n  }\n  \n  &:checked~span:before {\n    background: #fff;\n    border-color: rgba(34,36,38,.35); \n  }\n  \n  &:checked~span:after {    \n    font-style: normal; \n    text-align: center;\n    content: '\\\\2714';\n    opacity: 1;\n    color: ", "\n  }  \n  \n  &:focus~span:before, &:focus~span:after {\n    border-color: #85b7d9;\n    border-radius: 4px;\n    background: #fff;\n    box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;\n  } \n  \n  &.error~span {\n    color: ", "; \n  }\n  \n  &.error~span:before, &.error~span:after {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.palette.common.black; }, function (props) { return props.theme.palette.form.error; });
+var Span = styled_components_1.default.span.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) { return props.dimmed ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["color: #999c9e;"], ["color: #999c9e;"]))) : ''; });
 exports.Checkbox = react_1.default.forwardRef(function (_a, ref) {
     var options = _a.options, _b = _a.spacing, spacing = _b === void 0 ? 1 : _b, name = _a.name, dimmed = _a.dimmed, restProps = __rest(_a, ["options", "spacing", "name", "dimmed"]);
     return (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(options).map(function (_a) {

package/dist/form/FileField/FileField.js

@@ -57,8 +57,9 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Button_1 = require("../Button/Button");
 var TextField_1 = require("../TextField/TextField");
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;    \n"], ["\n  position: relative;\n  display: flex;    \n"])));
-var HiddenInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;    \n  width: 100%;\n  opacity:0;\n"], ["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;    \n  width: 100%;\n  opacity:0;\n"])));
+var HiddenInput = styled_components_1.default.input.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;    \n  width: 100%;\n  opacity:0;\n"], ["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;    \n  width: 100%;\n  opacity:0;\n"])));
 var StyledButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["    \n  height: 40px;\n  \n  .has-error & {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \n"], ["    \n  height: 40px;\n  \n  .has-error & {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \n"])));
 var StyledTextField = (0, styled_components_1.default)(TextField_1.TextField)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;  \n  padding-right: ", "\n"], ["\n  flex: 1;  \n  padding-right: ", "\n"])), function (props) { return props.theme.spacing(8); });
 var DeleteButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["    \n    background-color: transparent;\n    border: 0;\n    outline: 0;    \n    padding: 0;\n   \n    position: absolute;    \n    right: 0;\n    height: 100%;\n   \n   cursor: pointer;\n                   \n    &:after {\n        box-sizing: border-box;\n        \n        color: rgba(0, 0, 0, .3);\n        content: \"\u00D7\";\n        \n        text-align: center;\n        vertical-align: middle;\n        display: table-cell;\n        \n        font-size: 20px;\n        height: 38px;\n        width: 38px;\n        line-height: 38px;\n        padding: 0 8px;\n    }\n"], ["    \n    background-color: transparent;\n    border: 0;\n    outline: 0;    \n    padding: 0;\n   \n    position: absolute;    \n    right: 0;\n    height: 100%;\n   \n   cursor: pointer;\n                   \n    &:after {\n        box-sizing: border-box;\n        \n        color: rgba(0, 0, 0, .3);\n        content: \"\u00D7\";\n        \n        text-align: center;\n        vertical-align: middle;\n        display: table-cell;\n        \n        font-size: 20px;\n        height: 38px;\n        width: 38px;\n        line-height: 38px;\n        padding: 0 8px;\n    }\n"])));

package/dist/form/PasswordStrengthField/PasswordStrenghField.js

@@ -45,6 +45,7 @@ exports.PasswordStrengthField = exports.calculatePasswordScore = exports.passwor
 var react_1 = __importStar(require("react"));
 var TextField_1 = require("../TextField/TextField");
 var styled_components_1 = __importDefault(require("styled-components"));
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var passwordMinLength = function (val) { return val.length >= 8; };
 exports.passwordMinLength = passwordMinLength;
 var passwordHasNumbers = function (val) { return /\d/.test(val); };
@@ -64,7 +65,7 @@ var calculatePasswordScore = function (val) { return checks
 }, 1); };
 exports.calculatePasswordScore = calculatePasswordScore;
 var Progress = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-top: ", ";\n    height: 3px;\n    background-color: #f5f5f5;\n    border-radius: 4px;\n    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);\n"], ["\n    margin-top: ", ";\n    height: 3px;\n    background-color: #f5f5f5;\n    border-radius: 4px;\n    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);\n"])), function (props) { return props.theme.spacing(1); });
-var ProgressBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: ", "%;\n    height: 100%;\n    background-color: ", " ;\n    transition: width .6s ease, background-color .6s ease;\n"], ["\n    width: ", "%;\n    height: 100%;\n    background-color: ", " ;\n    transition: width .6s ease, background-color .6s ease;\n"])), function (props) { return props.score ? (props.score / maxScore) * 100 : 0; }, function (props) { return props.score <= 2 ? '#e90f10' : props.score <= 3 ? '#ffad00' : '#02b502'; });
+var ProgressBar = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: ", "%;\n    height: 100%;\n    background-color: ", " ;\n    transition: width .6s ease, background-color .6s ease;\n"], ["\n    width: ", "%;\n    height: 100%;\n    background-color: ", " ;\n    transition: width .6s ease, background-color .6s ease;\n"])), function (props) { return props.score ? (props.score / maxScore) * 100 : 0; }, function (props) { return props.score <= 2 ? '#e90f10' : props.score <= 3 ? '#ffad00' : '#02b502'; });
 exports.PasswordStrengthField = (0, react_1.forwardRef)(function (props, ref) {
     var _a = (0, react_1.useState)(0), score = _a[0], setScore = _a[1];
     var handleChange = (0, react_1.useCallback)(function (e) {

package/dist/form/ScaffoldForm/FormGrid/FormGrid.js

@@ -26,11 +26,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormGrid = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var responsiveProps_1 = require("../../../responsiveness/responsiveProps");
-exports.FormGrid = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0 -8px -16px -8px;\n\n  display: -ms-grid;\n  display: grid;\n\n  -ms-grid-columns: 1fr;   \n  \n  ", "\n"], ["\n  margin: 0 -8px -16px -8px;\n\n  display: -ms-grid;\n  display: grid;\n\n  -ms-grid-columns: 1fr;   \n  \n  ", "\n"])), function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+exports.FormGrid = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0 -8px -16px -8px;\n\n  display: -ms-grid;\n  display: grid;\n\n  -ms-grid-columns: 1fr;   \n  \n  ", "\n"], ["\n  margin: 0 -8px -16px -8px;\n\n  display: -ms-grid;\n  display: grid;\n\n  -ms-grid-columns: 1fr;   \n  \n  ", "\n"])), function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
     columns: function (string) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        -ms-grid-columns: ", ";           \n        grid-template-columns: ", ";\n      "], ["\n        -ms-grid-columns: ", ";           \n        grid-template-columns: ", ";\n      "])), string, string); }
 }); });
 exports.FormGrid.displayName = "FormGrid";

package/dist/form/ScaffoldForm/FormGrid/FormGridCell.js

@@ -26,10 +26,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormGridCell = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var responsiveProps_1 = require("../../../responsiveness/responsiveProps");
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var NUM_ROWS_PER_FIELD = 2;
 // NOTE:
 //
@@ -57,7 +61,7 @@ var generateDimensionsCss = function (position, rowOffset) {
     }
     return parts;
 };
-exports.FormGridCell = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([" \n  margin: 0px 8px;\n  \n  ", "\n       \n  align-self: ", ";\n  -ms-grid-row-align: ", ";\n  \n  ", " \n"], [" \n  margin: 0px 8px;\n  \n  ", "\n       \n  align-self: ", ";\n  -ms-grid-row-align: ", ";\n  \n  ", " \n"])), function (props) { return props.rowOffset !== undefined && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 16px;"], ["\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 16px;"]))); }, function (props) { return props.rowOffset === undefined ? "end" : "initial"; }, function (props) { return props.rowOffset === undefined ? "end" : "initial"; }, function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
+exports.FormGridCell = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_7 || (templateObject_7 = __makeTemplateObject([" \n  margin: 0px 8px;\n  \n  ", "\n       \n  align-self: ", ";\n  -ms-grid-row-align: ", ";\n  \n  ", " \n"], [" \n  margin: 0px 8px;\n  \n  ", "\n       \n  align-self: ", ";\n  -ms-grid-row-align: ", ";\n  \n  ", " \n"])), function (props) { return props.rowOffset !== undefined && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 16px;"], ["\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 16px;"]))); }, function (props) { return props.rowOffset === undefined ? "end" : "initial"; }, function (props) { return props.rowOffset === undefined ? "end" : "initial"; }, function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
     "align": function (unit) { return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["text-align: ", ";"], ["text-align: ", ";"])), unit); },
     "position": function (unit) { var _a; return generateDimensionsCss(unit, (_a = props.rowOffset) !== null && _a !== void 0 ? _a : 0); }
 }); });

package/dist/form/ScaffoldForm/FormGrid/FormGridWrapper.js

@@ -12,10 +12,11 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var clsx_1 = __importDefault(require("clsx"));
 var FormGridCell_1 = require("./FormGridCell");
-var Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    color: ", " ;    \n    font-weight: bold;\n    margin: ", ";\n    line-height: 1.4em; \n    font-size: .92857143em;\n"], ["\n    display: block;\n    color: ", " ;    \n    font-weight: bold;\n    margin: ", ";\n    line-height: 1.4em; \n    font-size: .92857143em;\n"])), (function (props) { return !!props.error ? props.theme.palette.form.error : props.theme.palette.common.black; }), function (props) { return props.theme.spacing(0, 0, 1, 0); });
-var Hint = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    margin: ", ";\n    line-height: 1.4em;\n    font-size: .92857143em;        \n"], ["\n    color: ", ";\n    margin: ", ";\n    line-height: 1.4em;\n    font-size: .92857143em;        \n"])), (function (props) { return !!props.error ? "#da9796;" : props.theme.palette.form.hint; }), function (props) { return props.theme.spacing(-1, 0, 1, 0); });
-var RequiredAsterisk = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n"], ["\n    color: ", ";\n"])), function (props) { return props.theme.palette.form.hint; });
-var Error = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["    \n    color: ", ";    \n    margin: ", ";\n    font-weight: bold;       \n    font-style: italic;       \n    line-height: 1.4em;\n    font-size: .92857143em;    \n"], ["    \n    color: ", ";    \n    margin: ", ";\n    font-weight: bold;       \n    font-style: italic;       \n    line-height: 1.4em;\n    font-size: .92857143em;    \n"])), function (props) { return props.theme.palette.form.error; }, function (props) { return props.theme.spacing(1, 0, 0, 0); });
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+var Label = styled_components_1.default.label.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    color: ", " ;    \n    font-weight: bold;\n    margin: ", ";\n    line-height: 1.4em; \n    font-size: .92857143em;\n"], ["\n    display: block;\n    color: ", " ;    \n    font-weight: bold;\n    margin: ", ";\n    line-height: 1.4em; \n    font-size: .92857143em;\n"])), (function (props) { return !!props.error ? props.theme.palette.form.error : props.theme.palette.common.black; }), function (props) { return props.theme.spacing(0, 0, 1, 0); });
+var Hint = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    margin: ", ";\n    line-height: 1.4em;\n    font-size: .92857143em;        \n"], ["\n    color: ", ";\n    margin: ", ";\n    line-height: 1.4em;\n    font-size: .92857143em;        \n"])), (function (props) { return !!props.error ? "#da9796;" : props.theme.palette.form.hint; }), function (props) { return props.theme.spacing(-1, 0, 1, 0); });
+var RequiredAsterisk = styled_components_1.default.span.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n"], ["\n    color: ", ";\n"])), function (props) { return props.theme.palette.form.hint; });
+var Error = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["    \n    color: ", ";    \n    margin: ", ";\n    font-weight: bold;       \n    font-style: italic;       \n    line-height: 1.4em;\n    font-size: .92857143em;    \n"], ["    \n    color: ", ";    \n    margin: ", ";\n    font-weight: bold;       \n    font-style: italic;       \n    line-height: 1.4em;\n    font-size: .92857143em;    \n"])), function (props) { return props.theme.palette.form.error; }, function (props) { return props.theme.spacing(1, 0, 0, 0); });
 var getFormGridWrapperProps = function (_a) {
     var position = _a.position, align = _a.align, label = _a.label, hint = _a.hint, error = _a.error, isRequired = _a.isRequired;
     return ({ position: position, align: align, label: label, hint: hint, error: error, isRequired: isRequired });

package/dist/form/Select/Select.js

@@ -14,6 +14,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -21,15 +32,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var StyledSelect = styled_components_1.default.select(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n\n  padding: .67857143em 1em;\n  line-height: 1.21428571em;\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);  \n  \n  color: ", ";\n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n  \n  font-size: 1em;\n  outline: none; \n  \n  appearance: none;\n  \n  &.error {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }\n  \n  &.error~div {\n    color: #9f3a38;\n  }    \n"], ["\n  width: 100%;\n\n  padding: .67857143em 1em;\n  line-height: 1.21428571em;\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);  \n  \n  color: ", ";\n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n  \n  font-size: 1em;\n  outline: none; \n  \n  appearance: none;\n  \n  &.error {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }\n  \n  &.error~div {\n    color: #9f3a38;\n  }    \n"])), function (props) { return props.theme.palette.common.black; });
+var StyledSelect = styled_components_1.default.select.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n\n  padding: .67857143em 1em;\n  line-height: 1.21428571em;\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);  \n  \n  color: ", ";\n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n  \n  font-size: 1em;\n  outline: none; \n  \n  appearance: none;\n  \n  &.error {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }\n  \n  &.error~div {\n    color: #9f3a38;\n  }    \n"], ["\n  width: 100%;\n\n  padding: .67857143em 1em;\n  line-height: 1.21428571em;\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);  \n  \n  color: ", ";\n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n  \n  font-size: 1em;\n  outline: none; \n  \n  appearance: none;\n  \n  &.error {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }\n  \n  &.error~div {\n    color: #9f3a38;\n  }    \n"])), function (props) { return props.theme.palette.common.black; });
 var PaddingOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n  padding: 0 1em;\n  position:absolute;  \n  height: 100%;\n  top: 0;\n  right: 0; \n  font-size: 17px;\n  line-height: 40px;\n"], ["\n  pointer-events: none;\n  padding: 0 1em;\n  position:absolute;  \n  height: 100%;\n  top: 0;\n  right: 0; \n  font-size: 17px;\n  line-height: 40px;\n"])));
-exports.Select = react_1.default.forwardRef(function (props, ref) {
-    var options = Array.isArray(props.options)
-        ? props.options
-        : Object.entries(props.options);
+exports.Select = react_1.default.forwardRef(function (_a, ref) {
+    var options = _a.options, props = __rest(_a, ["options"]);
+    var optionsArray = Array.isArray(options)
+        ? options
+        : Object.entries(options);
     return (react_1.default.createElement(Wrapper, null,
-        react_1.default.createElement(StyledSelect, __assign({ ref: ref }, props), options.map(function (_a) {
+        react_1.default.createElement(StyledSelect, __assign({ ref: ref }, props), optionsArray.map(function (_a) {
             var value = _a[0], label = _a[1];
             return (react_1.default.createElement("option", { key: value, value: value }, label));
         })),

package/dist/form/TextField/TextField.js

@@ -55,9 +55,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var sharedStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: .67857143em 1em;\n  line-height: 1.21428571em;\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);  \n  \n  color: ", ";\n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n  \n  font-size: 1em;\n  outline: none;\n  \n  &:disabled, &:read-only {\n    background-color: #FAFAFA;\n  }\n  \n  &:focus {\n    color: rgba(0,0,0,.95);\n    border-color: #85b7d9;    \n    background: #fff;\n    box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;\n  }\n    \n  &.error {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \n  \n  &.error:focus {\n    background: #fff6f6;\n  }\n     \n  &:focus::placeholder {\n    color:rgba(115,115,115,.87) \n  }\n  \n  &::placeholder {\n    color:rgba(191,191,191,.87); \n  }\n  \n  &.error::placeholder {\n    color: #e7bdbc;\n  }\n  \n  &.error:focus::placeholder {\n    color: #da9796;\n  }        \n"], ["\n  padding: .67857143em 1em;\n  line-height: 1.21428571em;\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);  \n  \n  color: ", ";\n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n  \n  font-size: 1em;\n  outline: none;\n  \n  &:disabled, &:read-only {\n    background-color: #FAFAFA;\n  }\n  \n  &:focus {\n    color: rgba(0,0,0,.95);\n    border-color: #85b7d9;    \n    background: #fff;\n    box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;\n  }\n    \n  &.error {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \n  \n  &.error:focus {\n    background: #fff6f6;\n  }\n     \n  &:focus::placeholder {\n    color:rgba(115,115,115,.87) \n  }\n  \n  &::placeholder {\n    color:rgba(191,191,191,.87); \n  }\n  \n  &.error::placeholder {\n    color: #e7bdbc;\n  }\n  \n  &.error:focus::placeholder {\n    color: #da9796;\n  }        \n"])), function (props) { return props.theme.palette.common.black; });
-var Input = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), sharedStyles);
-var Textarea = styled_components_1.default.textarea(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  height: 100%;\n"], ["\n  ", "\n  height: 100%;\n"])), sharedStyles);
+var Input = styled_components_1.default.input.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), sharedStyles);
+var Textarea = styled_components_1.default.textarea.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  height: 100%;\n"], ["\n  ", "\n  height: 100%;\n"])), sharedStyles);
 exports.TextField = react_1.default.forwardRef(function (_a, ref) {
     var _b = _a.multiline, multiline = _b === void 0 ? false : _b, restProps = __rest(_a, ["multiline"]);
     return multiline

package/dist/layouts/FloatingPanelLayout/FloatingPanelLayout.js

@@ -26,8 +26,9 @@ var Panel_1 = require("../../components/Panel/Panel");
 var SlideInFromTop_1 = require("../../animation/SlideInFromTop/SlideInFromTop");
 var constants_1 = require("../constants");
 var responsiveProps_1 = require("../../responsiveness/responsiveProps");
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color:  ", ";\n  position: absolute;\n  min-width: 100%;\n  min-height: 100%;  \n"], ["\n  background-color:  ", ";\n  position: absolute;\n  min-width: 100%;\n  min-height: 100%;  \n"])), function (props) { return props.baseColor || 'white'; });
-var Background = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n       \n  opacity: ", " ;\n  background: url(\"", "\");\n  background-size: cover;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n       \n  opacity: ", " ;\n  background: url(\"", "\");\n  background-size: cover;\n"])), function (props) { var _a; return (_a = props.opacity) !== null && _a !== void 0 ? _a : 1; }, function (props) { return props.imageUrl; });
+var Background = styled_components_1.default.div.withConfig({ shouldForwardProp: is_prop_valid_1.default })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n       \n  opacity: ", " ;\n  background: url(\"", "\");\n  background-size: cover;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n       \n  opacity: ", " ;\n  background: url(\"", "\");\n  background-size: cover;\n"])), function (props) { var _a; return (_a = props.opacity) !== null && _a !== void 0 ? _a : 1; }, function (props) { return props.imageUrl; });
 var StyledAnimation = (0, styled_components_1.default)(SlideInFromTop_1.SlideInFromTop)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  z-index: 10;\n  margin: auto auto;\n"], ["\n  z-index: 10;\n  margin: auto auto;\n"])));
 var StyledPanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  \n  min-width: 280px;   \n"], ["\n  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  \n  min-width: 280px;   \n"])));
 var Logo = styled_components_1.default.img(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display:none;\n  position: absolute;\n  left: 0;\n  top: ", ";\n  ", "\n"], ["\n  display:none;\n  position: absolute;\n  left: 0;\n  top: ", ";\n  ", "\n"])), function (props) { return props.theme.spacing(8); }, (0, responsiveProps_1.mq)("tablet", "display: block;"));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quicksnack",
   "description": "Quickly create beautiful admin layouts using react",
-  "version": "3.30.0",
+  "version": "3.30.1",
   "private": false,
   "files": [
     "dist/**"