quicksnack 2.0.0 → 3.1.1

package/dist/components/Box/Box.d.ts

@@ -1,4 +1,4 @@
-import { Responsive } from "../../form/ScaffoldForm/utils/responsiveProps";
+import { Responsive } from "../../responsiveness/responsiveProps";
 export interface BoxProps {
     p?: Responsive<number>;
     pt?: Responsive<number>;

package/dist/components/Box/Box.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = void 0;
-var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 var styled_components_1 = __importStar(require("styled-components"));
 exports.Box = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __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)); },

package/dist/components/Floater/Floater.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from "../Box/Box";
+import React from "react";
+interface Props extends BoxProps {
+    stretch?: boolean;
+    items: Array<JSX.Element | false>;
+}
+export declare const Floater: React.FC<Props>;
+export {};

package/dist/components/Floater/Floater.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Floater = void 0;
+var Box_1 = require("../Box/Box");
+var react_1 = __importDefault(require("react"));
+var FloaterItem_1 = require("./FloaterItem");
+var horizontalMargin = { laptop: -1 };
+var verticalMargin = { mobile: -1, laptop: 0 };
+var display = { mobile: "block", laptop: "flex" };
+var Floater = function (_a) {
+    var items = _a.items, _b = _a.stretch, stretch = _b === void 0 ? false : _b, props = __rest(_a, ["items", "stretch"]);
+    return react_1.default.createElement(Box_1.Box, __assign({ mb: verticalMargin, mt: verticalMargin, ml: horizontalMargin, mr: horizontalMargin, display: display }, props), items
+        .filter(Boolean)
+        .map(function (item, i) { return react_1.default.createElement(FloaterItem_1.FloaterItem, { key: i, stretch: stretch }, item); }));
+};
+exports.Floater = Floater;

package/dist/components/Floater/FloaterItem.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from "../Box/Box";
+import React from "react";
+interface Props extends BoxProps {
+    stretch: boolean;
+}
+export declare const FloaterItem: React.FC<Props>;
+export {};

package/dist/components/Floater/FloaterItem.js

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloaterItem = void 0;
+var Box_1 = require("../Box/Box");
+var react_1 = __importDefault(require("react"));
+var horizontalPadding = { laptop: 1 };
+var verticalPadding = { mobile: 1, laptop: 0 };
+var flexGrow = { laptop: 1 };
+var FloaterItem = function (_a) {
+    var stretch = _a.stretch, props = __rest(_a, ["stretch"]);
+    return react_1.default.createElement(Box_1.Box, __assign({ flexGrow: stretch ? flexGrow : undefined, pt: verticalPadding, pb: verticalPadding, pl: horizontalPadding, pr: horizontalPadding }, props));
+};
+exports.FloaterItem = FloaterItem;

package/dist/components/Menu/HamburgerButton.js

@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HamburgerButton = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var Button_1 = require("../../form/Button/Button");
-var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 exports.HamburgerButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";    \n  ", " \n"], ["\n  margin-right: ", ";    \n  ", " \n"])), function (props) { return props.theme.spacing(3); }, (0, responsiveProps_1.mq)("laptop", "display: none;"));
 var templateObject_1;

package/dist/components/Menu/MenuCloseButton.js

@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuCloseButton = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var Button_1 = require("../../form/Button/Button");
-var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 exports.MenuCloseButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["      \n  ", " \n"], ["      \n  ", " \n"])), (0, responsiveProps_1.mq)("laptop", "display: none;"));
 var templateObject_1;

package/dist/components/Menu/SideBar.js

@@ -26,6 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideBar = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var Box_1 = require("../Box/Box");
-var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 exports.SideBar = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["  \n  height: auto;\n  width: 100%;  \n    \n  background-color: #243646;\n    \n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \n  z-index: 900;\n     \n  display: ", ";   \n     \n  ", "  \n"], ["  \n  height: auto;\n  width: 100%;  \n    \n  background-color: #243646;\n    \n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \n  z-index: 900;\n     \n  display: ", ";   \n     \n  ", "  \n"])), function (props) { return props.isOpen ? 'block' : 'none'; }, (0, responsiveProps_1.mq)("laptop", (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: static;    \n    display: block;\n    width: ", ";  \n  "], ["\n    position: static;    \n    display: block;\n    width: ", ";  \n  "])), function (props) { return props.theme.spacing(props.width || 50); })));
 var templateObject_1, templateObject_2;

package/dist/components/Menu/SideBarHeader.js

@@ -31,11 +31,11 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var Box_1 = require("../Box/Box");
 var constants_1 = require("../../layouts/constants");
-var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box; \n  color: ", ";\n  font-weight: bold;  \n  \n  display: flex;\n  // flex-direction: column;\n  // justify-content: center;\n  \n  // font-size: ", ";\n  // color: ", ";  \n  text-align: center;\n  \n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;\n  \n  background-color: rgba(0,0,0,.2);\n  \n  ", "  \n"], ["\n  box-sizing: border-box; \n  color: ", ";\n  font-weight: bold;  \n  \n  display: flex;\n  // flex-direction: column;\n  // justify-content: center;\n  \n  // font-size: ", ";\n  // color: ", ";  \n  text-align: center;\n  \n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;\n  \n  background-color: rgba(0,0,0,.2);\n  \n  ", "  \n"])), function (props) { return props.theme.palette.button.text.idle.text; }, function (props) { return props.theme.spacing(5); }, function (props) { return props.theme.palette.common.white; }, (0, responsiveProps_1.mq)('laptop', (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      min-height: ", ";\n  "], ["\n      min-height: ", ";\n  "])), function (props) { return props.theme.spacing(12); })));
 var SideBarHeader = function (_a) {
     var children = _a.children, right = _a.right;
-    return (react_1.default.createElement(StyledBox, { mb: constants_1.VerticalRhythm },
+    return (react_1.default.createElement(StyledBox, { mb: constants_1.VerticalRhythmLaptop },
         react_1.default.createElement(Box_1.Box, { flexGrow: 1, display: "flex" },
             react_1.default.createElement(Box_1.Box, { flexGrow: 1, display: "flex", flexDirection: "column", justifyContent: "center" }, children)),
         right && react_1.default.createElement(Box_1.Box, null, right)));

package/dist/components/Paginator/Paginator.js

@@ -10,9 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 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 clamSize = 2;
 var range = function (start, end) {
     var nums = [];
     for (var i = start; i < end; i++) {
@@ -21,8 +21,10 @@ var range = function (start, end) {
     return nums;
 };
 var Paginator = function (props) {
+    var isTablet = (0, useResponsiveBreakpoints_1.useResponsiveBreakpoints)().isTablet;
     var pageCount = props.pageCount, onChange = props.onChange;
     var currentPage = Math.min(Math.max(props.currentPage, 0), pageCount);
+    var clamSize = isTablet ? 2 : 0;
     var clamLower = Math.max(1, currentPage - clamSize);
     var clamUpper = Math.min(pageCount, currentPage + clamSize);
     return (react_1.default.createElement(Wrapper, null,

package/dist/components/Panel/Panel.js

@@ -31,7 +31,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var Box_1 = require("../Box/Box");
 var Header_1 = require("../../typography/Header/Header");
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["       \n  background-color: ", ";              \n"], ["       \n  background-color: ", ";              \n"])), function (props) { return props.theme.palette.common.white; });
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["       \n  background-color: ", ";        \n"], ["       \n  background-color: ", ";        \n"])), function (props) { return props.theme.palette.common.white; });
 var Meta = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["       \n  font-size: 12px;\n  font-style: italic;              \n"], ["       \n  font-size: 12px;\n  font-style: italic;              \n"])));
 var Title = (0, styled_components_1.default)(Box_1.Box)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  \n  ", "        \n"], ["\n  ", "\n  \n  ", "        \n"])), function (props) { return props.panelHasChildren && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 4px;   \n    border-bottom: 1px solid rgba(34,36,38,.15);\n  "], ["\n    border-radius: 4px;   \n    border-bottom: 1px solid rgba(34,36,38,.15);\n  "]))); }, function (props) { return !!props.onClick && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    cursor: pointer;\n    user-select: none;\n  "], ["\n    cursor: pointer;\n    user-select: none;\n  "]))); });
 var Footer = (0, styled_components_1.default)(Box_1.Box)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["  \n  border-radius: 4px;   \n  background-color: #FFF;\n  border-top: 1px solid rgba(34,36,38,.15);\n"], ["  \n  border-radius: 4px;   \n  background-color: #FFF;\n  border-top: 1px solid rgba(34,36,38,.15);\n"])));

package/dist/components/Section/Section.js

@@ -18,5 +18,5 @@ exports.Section = void 0;
 var react_1 = __importDefault(require("react"));
 var Box_1 = require("../Box/Box");
 var constants_1 = require("../../layouts/constants");
-var Section = function (props) { return (react_1.default.createElement(Box_1.Box, __assign({ pb: constants_1.VerticalRhythm }, props))); };
+var Section = function (props) { return (react_1.default.createElement(Box_1.Box, __assign({ pb: { laptop: constants_1.VerticalRhythmLaptop, mobile: constants_1.VerticalRhythmMobile } }, props))); };
 exports.Section = Section;

package/dist/components/Table/Table.js

@@ -51,7 +51,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = exports.StyledTable = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 exports.StyledTable = styled_components_1.default.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 4px;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;      \n"], ["\n  border-radius: 4px;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;      \n"])));
 var StyledTableRow = styled_components_1.default.tr(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > td {\n    transition: background-color .1s ease, color .1s ease;\n  }\n  ", "    \n"], ["\n  & > td {\n    transition: background-color .1s ease, color .1s ease;\n  }\n  ", "    \n"])), function (props) { return Object.entries(props.theme.palette.pane).map(function (_a) {
     var variant = _a[0], value = _a[1];

package/dist/form/Button/Button.d.ts

@@ -5,6 +5,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<any> {
     icon?: JSX.Element;
     variant?: Variant;
     hasChildren?: boolean;
+    actionButton?: boolean;
 }
 export declare const Button: React.FC<ButtonProps>;
 export {};

package/dist/form/Button/Button.js

@@ -52,11 +52,13 @@ exports.Button = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var theme_1 = require("../../theme");
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["  \n  margin: ", "; \n"], ["  \n  margin: ", "; \n"])), function (props) { return props.theme.spacing(0, 2, 0, 0); });
-var StyledButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __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: 38px;   \n  \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: 38px;   \n  \n  ", " \n                   \n  &:focus {\n    background-blend-mode: darken;\n  }        \n  \n  ", "\n          \n  ", "        \n"])), function (props) { return props.variant !== 'text'
+var responsiveProps_1 = require("../../responsiveness/responsiveProps");
+var Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "      \n"], ["\n  ", "      \n"])), function (props) { return props.actionButton
+    ? (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_8 || (templateObject_8 = __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: 38px;   \n  \n  ", "\n  \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: 38px;   \n  \n  ", "\n  \n  ", " \n                   \n  &:focus {\n    background-blend-mode: darken;\n  }        \n  \n  ", "\n          \n  ", "        \n"])), function (props) { return props.actionButton && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __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_2 || (templateObject_2 = __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_3 || (templateObject_3 = __makeTemplateObject(["position: relative; padding: ", ";"], ["position: relative; padding: ", ";"])), props.theme.spacing(3, 5, 3, 13))
-    : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["font-weight: 700; padding: 0;"], ["font-weight: 700; padding: 0;"]))); }, function (props) {
+        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __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_6 || (templateObject_6 = __makeTemplateObject(["position: relative; padding: ", ";"], ["position: relative; padding: ", ";"])), props.theme.spacing(3, 5, 3, 13))
+    : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["font-weight: 700; padding: 0;"], ["font-weight: 700; padding: 0;"]))); }, function (props) {
     if (props.variant === "basic") {
         return "\n        border: 1px solid rgba(34,36,38,.15);\n      ";
     }
@@ -65,14 +67,14 @@ var StyledButton = styled_components_1.default.button(templateObject_5 || (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        &: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    ");
 });
-var IconWrapper = styled_components_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n \n  ", "          \n"], ["\n  ", "\n \n  ", "          \n"])), function (props) { return props.variant !== "text" && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __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_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), props.theme.spacing(2))
-    : props.hasChildren && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __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); }); });
+var IconWrapper = styled_components_1.default.span(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n \n  ", "          \n"], ["\n  ", "\n \n  ", "          \n"])), function (props) { return props.variant !== "text" && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __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_10 || (templateObject_10 = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), props.theme.spacing(2))
+    : props.hasChildren && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __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) {
     var children = _a.children, icon = _a.icon, props = __rest(_a, ["children", "icon"]);
-    return (react_1.default.createElement(Wrapper, null,
+    return (react_1.default.createElement(Wrapper, { actionButton: props.actionButton },
         react_1.default.createElement(StyledButton, __assign({ ref: ref, icon: icon, hasChildren: !!children }, props),
             icon && (react_1.default.createElement(IconWrapper, { variant: props.variant, hasChildren: !!children }, icon)),
             children)));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

package/dist/form/ScaffoldForm/FormGrid/FormGrid.d.ts

@@ -1,4 +1,4 @@
-import { Responsive } from "../utils/responsiveProps";
+import { Responsive } from "../../../responsiveness/responsiveProps";
 export declare type FormGridProps = {
     columns?: Responsive<string>;
 };

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

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = __importStar(require("styled-components"));
-var responsiveProps_1 = require("../utils/responsiveProps");
+var responsiveProps_1 = require("../../../responsiveness/responsiveProps");
 var 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, {
     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); }
 }); });

package/dist/form/ScaffoldForm/FormGrid/FormGridCell.d.ts

@@ -1,4 +1,4 @@
-import { Responsive } from "../utils/responsiveProps";
+import { Responsive } from "../../../responsiveness/responsiveProps";
 export declare type Dimensions = {
     row?: number;
     rowSpan?: number;

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

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormGridCell = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-var responsiveProps_1 = require("../utils/responsiveProps");
+var responsiveProps_1 = require("../../../responsiveness/responsiveProps");
 var NUM_ROWS_PER_FIELD = 2;
 // NOTE:
 //

package/dist/form/ScaffoldForm/scaffoldProps.d.ts

@@ -75,5 +75,5 @@ export declare const scaffoldProps: {
             };
         };
     };
-    columns: import("./utils/responsiveProps").Responsive<string>;
+    columns: import("../..").Responsive<string>;
 };

package/dist/form/ScaffoldForm/scaffoldProps.js

@@ -77,7 +77,7 @@ exports.scaffoldProps = new FormPositioner_1.FormPositioner({
         }
     }
 })
-    .setHorizontal('mobile')
+    .setVertical('mobile')
     .setGrid('tablet', '1fr 1fr', [
     ['firstName', 'lastName'],
     ['description', 'avatar'],

package/dist/form/ScaffoldForm/utils/FormPositioner.d.ts

@@ -1,4 +1,4 @@
-import { BreakPoint, Responsive } from "./responsiveProps";
+import { BreakPoint, Responsive } from "../../../responsiveness/responsiveProps";
 import { Fields } from "../types";
 export declare class FormPositioner<T extends Fields, K extends keyof T> {
     protected fields: T;

package/dist/form/ScaffoldForm/utils/FormPositioner.js

@@ -8,7 +8,7 @@ var immer_1 = __importDefault(require("immer"));
 var chunk_1 = __importDefault(require("lodash/chunk"));
 var Grid_1 = require("./Grid");
 var assertGridIsValid_1 = require("./assertGridIsValid");
-var responsiveProps_1 = require("./responsiveProps");
+var responsiveProps_1 = require("../../../responsiveness/responsiveProps");
 var equalColumns_1 = require("./equalColumns");
 var FormPositioner = /** @class */ (function () {
     function FormPositioner(fields, columns // -> ignore property, its used to pass along internally.

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/ConfirmModal/ConfirmModal';
 export * from './components/Details/Details';
 export * from './components/Dropdown/Dropdown';
 export * from './components/Dropzone/Dropzone';
+export * from './components/Floater/Floater';
 export * from './components/Footer/Footer';
 export * from './components/Menu/HamburgerButton';
 export * from './components/Menu/Menu';
@@ -38,7 +39,8 @@ export * from './form/ScaffoldForm/ScaffoldForm';
 export * from './form/ScaffoldForm/ScaffoldField';
 export * from './form/ScaffoldForm/ScaffoldFormProvider';
 export * from './form/ScaffoldForm/types';
-export * from './form/ScaffoldForm/utils/responsiveProps';
+export * from './responsiveness/responsiveProps';
+export * from './responsiveness/useResponsiveBreakpoints';
 export * from './typography/Header/Header';
 export * from './typography/Paragraph/Paragraph';
 export * from './theme';

package/dist/index.js

@@ -22,6 +22,7 @@ __exportStar(require("./components/ConfirmModal/ConfirmModal"), exports);
 __exportStar(require("./components/Details/Details"), exports);
 __exportStar(require("./components/Dropdown/Dropdown"), exports);
 __exportStar(require("./components/Dropzone/Dropzone"), exports);
+__exportStar(require("./components/Floater/Floater"), exports);
 __exportStar(require("./components/Footer/Footer"), exports);
 __exportStar(require("./components/Menu/HamburgerButton"), exports);
 __exportStar(require("./components/Menu/Menu"), exports);
@@ -50,7 +51,8 @@ __exportStar(require("./form/ScaffoldForm/ScaffoldForm"), exports);
 __exportStar(require("./form/ScaffoldForm/ScaffoldField"), exports);
 __exportStar(require("./form/ScaffoldForm/ScaffoldFormProvider"), exports);
 __exportStar(require("./form/ScaffoldForm/types"), exports);
-__exportStar(require("./form/ScaffoldForm/utils/responsiveProps"), exports);
+__exportStar(require("./responsiveness/responsiveProps"), exports);
+__exportStar(require("./responsiveness/useResponsiveBreakpoints"), exports);
 __exportStar(require("./typography/Header/Header"), exports);
 __exportStar(require("./typography/Paragraph/Paragraph"), exports);
 __exportStar(require("./theme"), exports);

package/dist/layouts/BasicLayout/BasicLayout.js

@@ -25,7 +25,7 @@ var TopBar_1 = require("../../components/TopBar/TopBar");
 var Box_1 = require("../../components/Box/Box");
 var Footer_1 = require("../../components/Footer/Footer");
 var constants_1 = require("../constants");
-var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 var Button_1 = require("../../form/Button/Button");
 var SideBar_1 = require("../../components/Menu/SideBar");
 var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject([" \n  background-color: #F3F3F4;\n"], [" \n  background-color: #F3F3F4;\n"])));
@@ -37,7 +37,7 @@ var BasicLayout = function (_a) {
             sideBarProps && (react_1.default.createElement(SideBar_1.SideBar, __assign({}, sideBarProps))),
             react_1.default.createElement(Box_1.Box, { flexGrow: 1, display: "flex", flexDirection: "column" },
                 react_1.default.createElement(TopBar_1.TopBar, __assign({}, topBarProps)),
-                react_1.default.createElement(Box_1.Box, { p: constants_1.VerticalRhythm, flexGrow: 1 }, isLoading && loader
+                react_1.default.createElement(Box_1.Box, { p: { laptop: constants_1.VerticalRhythmLaptop, mobile: constants_1.VerticalRhythmMobile }, flexGrow: 1 }, isLoading && loader
                     ? loader
                     : children),
                 react_1.default.createElement(Footer_1.Footer, __assign({}, footerProps))))));

package/dist/layouts/FloatingPanelLayout/FloatingPanelLayout.js

@@ -25,7 +25,7 @@ var Box_1 = require("../../components/Box/Box");
 var Panel_1 = require("../../components/Panel/Panel");
 var SlideInFromTop_1 = require("../../animation/SlideInFromTop/SlideInFromTop");
 var constants_1 = require("../constants");
-var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  min-width: 100%;\n  min-height: 100%;\n  background: url(\"", "\");\n  background-size: cover;\n"], ["\n  position: absolute;\n  min-width: 100%;\n  min-height: 100%;\n  background: url(\"", "\");\n  background-size: cover;\n"])), function (props) { return props.imageUrl; });
 var StyledAnimation = (0, styled_components_1.default)(SlideInFromTop_1.SlideInFromTop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: auto auto;\n"], ["\n  margin: auto auto;\n"])));
 var StyledPanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_3 || (templateObject_3 = __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"])));
@@ -35,7 +35,7 @@ var FloatingPanelLayout = function (_a) {
     return (react_1.default.createElement(Wrapper, { display: "flex", alignItems: "center", imageUrl: imageUrl },
         logoUrl && (react_1.default.createElement(Logo, { src: logoUrl, alt: "Logo" })),
         react_1.default.createElement(StyledAnimation, null,
-            alert && (react_1.default.createElement(Box_1.Box, { pb: constants_1.VerticalRhythm }, alert)),
+            alert && (react_1.default.createElement(Box_1.Box, { pb: constants_1.VerticalRhythmLaptop }, alert)),
             react_1.default.createElement(StyledPanel, __assign({}, panelProps)))));
 };
 exports.FloatingPanelLayout = FloatingPanelLayout;

package/dist/layouts/constants.d.ts

@@ -1 +1,2 @@
-export declare const VerticalRhythm = 7;
+export declare const VerticalRhythmLaptop = 7;
+export declare const VerticalRhythmMobile = 4;

package/dist/layouts/constants.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalRhythm = void 0;
-exports.VerticalRhythm = 7;
+exports.VerticalRhythmMobile = exports.VerticalRhythmLaptop = void 0;
+exports.VerticalRhythmLaptop = 7;
+exports.VerticalRhythmMobile = 4;

package/dist/{form/ScaffoldForm/utils → responsiveness}/responsiveProps.d.ts

@@ -1,4 +1,5 @@
 export declare type BreakPoint = "mobile" | "tablet" | "laptop" | "desktop";
+export declare const BreakPointValues: Record<BreakPoint, number>;
 export declare type OnlyResponsive<T> = {
     [key in BreakPoint]?: T;
 };

package/dist/{form/ScaffoldForm/utils → responsiveness}/responsiveProps.js

@@ -13,7 +13,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.responsiveProps = exports.isResponsiveObject = exports.mq = void 0;
+exports.responsiveProps = exports.isResponsiveObject = exports.mq = exports.BreakPointValues = void 0;
 var styled_components_1 = require("styled-components");
 var breakPoints = [
     "mobile",
@@ -21,8 +21,8 @@ var breakPoints = [
     "laptop",
     "desktop",
 ];
-var BreakPointValues = {
-    mobile: 414,
+exports.BreakPointValues = {
+    mobile: 0,
     tablet: 768,
     laptop: 1024,
     desktop: 1430,
@@ -30,7 +30,7 @@ var BreakPointValues = {
 /**
  * Wraps given cssRules in the corresponding media-query:
  */
-var mq = function (bk, cssRules) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @media screen and (min-width: ", "px) {\n    ", "        \n  }        \n"], ["\n  @media screen and (min-width: ", "px) {\n    ", "        \n  }        \n"])), BreakPointValues[bk], cssRules); };
+var mq = function (bk, cssRules) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @media screen and (min-width: ", "px) {\n    ", "        \n  }        \n"], ["\n  @media screen and (min-width: ", "px) {\n    ", "        \n  }        \n"])), exports.BreakPointValues[bk], cssRules); };
 exports.mq = mq;
 var isResponsiveObject = function (obj) {
     if (typeof obj !== "object") {

package/dist/responsiveness/useResponsiveBreakpoints.d.ts

@@ -0,0 +1,6 @@
+export declare const useResponsiveBreakpoints: () => {
+    isMobile: boolean;
+    isTablet: boolean;
+    isLaptop: boolean;
+    isDesktop: boolean;
+};

package/dist/responsiveness/useResponsiveBreakpoints.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsiveBreakpoints = void 0;
+var react_1 = __importDefault(require("react"));
+var responsiveProps_1 = require("./responsiveProps");
+var useResponsiveBreakpoints = function () {
+    var _a = react_1.default.useState(window.innerWidth), windowWidth = _a[0], setWindowWidth = _a[1];
+    react_1.default.useEffect(function () {
+        var onResize = function () { return setWindowWidth(window.innerWidth); };
+        window.addEventListener('resize', onResize);
+        return function () { return window.removeEventListener('resize', onResize); };
+    }, []);
+    var responsiveMap = react_1.default.useMemo(function () { return ({
+        isMobile: windowWidth >= responsiveProps_1.BreakPointValues.mobile,
+        isTablet: windowWidth >= responsiveProps_1.BreakPointValues.tablet,
+        isLaptop: windowWidth >= responsiveProps_1.BreakPointValues.laptop,
+        isDesktop: windowWidth >= responsiveProps_1.BreakPointValues.desktop
+    }); }, [windowWidth]);
+    return responsiveMap;
+};
+exports.useResponsiveBreakpoints = useResponsiveBreakpoints;

package/package.json

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