quicksnack 1.24.1 → 3.0.0

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/Menu/HamburgerButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HamburgerButton: import("styled-components").StyledComponent<import("react").FC<import("../../form/Button/Button").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/Menu/HamburgerButton.js

@@ -0,0 +1,15 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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("../../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.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MenuCloseButton: import("styled-components").StyledComponent<import("react").FC<import("../../form/Button/Button").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/Menu/MenuCloseButton.js

@@ -0,0 +1,15 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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("../../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.d.ts

@@ -0,0 +1,6 @@
+declare type SideBarProps = {
+    width?: number;
+    isOpen?: boolean;
+};
+export declare const SideBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box/Box").BoxProps & SideBarProps, never>;
+export {};

package/dist/components/Menu/SideBar.js

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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("../../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.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface Props {
+    right?: string | JSX.Element;
+}
+export declare const SideBarHeader: React.FC<Props>;
+export {};

package/dist/components/Menu/SideBarHeader.js

@@ -0,0 +1,44 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.SideBarHeader = void 0;
+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("../../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.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)));
+};
+exports.SideBarHeader = SideBarHeader;
+var templateObject_1, templateObject_2;

package/dist/components/Menu/useToggleMobileMenu.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    currentRoute: string;
+}
+export declare const useToggleMobileMenu: ({ currentRoute }: Props) => {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export {};

package/dist/components/Menu/useToggleMobileMenu.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggleMobileMenu = void 0;
+var react_1 = __importDefault(require("react"));
+var useToggleMobileMenu = function (_a) {
+    var currentRoute = _a.currentRoute;
+    var _b = react_1.default.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var toggle = react_1.default.useCallback(function () {
+        setIsOpen(function (val) { return !val; });
+    }, []);
+    var open = react_1.default.useCallback(function () {
+        setIsOpen(true);
+    }, []);
+    var close = react_1.default.useCallback(function () {
+        setIsOpen(false);
+    }, []);
+    react_1.default.useEffect(function () {
+        close();
+    }, [currentRoute, close]);
+    return {
+        isOpen: isOpen,
+        open: open,
+        close: close,
+        toggle: toggle
+    };
+};
+exports.useToggleMobileMenu = useToggleMobileMenu;

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/components/Timeline/Timeline.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 interface Props {
-    title: string;
-    titleMeta: string;
+    title?: string | JSX.Element;
+    titleMeta?: string | JSX.Element;
     isInitiallyOpen: boolean;
     icon: JSX.Element;
     chevron: string | JSX.Element;

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

@@ -1,10 +1,10 @@
 import React from "react";
 import { theme } from "../../theme";
 declare type Variant = keyof typeof theme.palette.button;
-interface Props extends React.ButtonHTMLAttributes<any> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<any> {
     icon?: JSX.Element;
     variant?: Variant;
     hasChildren?: boolean;
 }
-export declare const Button: React.FC<Props>;
+export declare const Button: React.FC<ButtonProps>;
 export {};

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

@@ -11,8 +11,11 @@ export * from './components/Details/Details';
 export * from './components/Dropdown/Dropdown';
 export * from './components/Dropzone/Dropzone';
 export * from './components/Footer/Footer';
+export * from './components/Menu/HamburgerButton';
 export * from './components/Menu/Menu';
-export * from './components/Menu/UserBox';
+export * from './components/Menu/MenuCloseButton';
+export * from './components/Menu/useToggleMobileMenu';
+export * from './components/Menu/SideBarHeader';
 export * from './components/Modal/Modal';
 export * from './components/Overlay/Overlay';
 export * from './components/Paginator/Paginator';
@@ -35,7 +38,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

@@ -23,8 +23,11 @@ __exportStar(require("./components/Details/Details"), exports);
 __exportStar(require("./components/Dropdown/Dropdown"), exports);
 __exportStar(require("./components/Dropzone/Dropzone"), exports);
 __exportStar(require("./components/Footer/Footer"), exports);
+__exportStar(require("./components/Menu/HamburgerButton"), exports);
 __exportStar(require("./components/Menu/Menu"), exports);
-__exportStar(require("./components/Menu/UserBox"), exports);
+__exportStar(require("./components/Menu/MenuCloseButton"), exports);
+__exportStar(require("./components/Menu/useToggleMobileMenu"), exports);
+__exportStar(require("./components/Menu/SideBarHeader"), exports);
 __exportStar(require("./components/Modal/Modal"), exports);
 __exportStar(require("./components/Overlay/Overlay"), exports);
 __exportStar(require("./components/Paginator/Paginator"), exports);
@@ -47,7 +50,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.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { TopBar } from "../../components/TopBar/TopBar";
 import { Footer } from "../../components/Footer/Footer";
+import { SideBar } from "../../components/Menu/SideBar";
 interface Props {
-    sideBarProps?: string | JSX.Element;
-    sideBarWidth?: number;
+    sideBarProps?: React.ComponentProps<typeof SideBar>;
     topBarProps?: React.ComponentProps<typeof TopBar>;
     footerProps?: React.ComponentProps<typeof Footer>;
     isLoading?: boolean;

package/dist/layouts/BasicLayout/BasicLayout.js

@@ -25,16 +25,19 @@ 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("../../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"])));
-var SideBar = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["  \n  height: auto;;\n  width: ", ";  \n  background-color: #243646;  \n"], ["  \n  height: auto;;\n  width: ", ";  \n  background-color: #243646;  \n"])), function (props) { return props.theme.spacing(props.width || 50); });
+var CloseButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  top: ", ";\n  right: ", ";\n  \n  z-index: 1000;\n  \n  ", " \n"], ["\n  position: fixed;\n  top: ", ";\n  right: ", ";\n  \n  z-index: 1000;\n  \n  ", " \n"])), function (props) { return props.theme.spacing(1.5); }, function (props) { return props.theme.spacing(3); }, (0, responsiveProps_1.mq)("laptop", "\n    display: none;\n  "));
 var BasicLayout = function (_a) {
-    var sideBarProps = _a.sideBarProps, topBarProps = _a.topBarProps, sideBarWidth = _a.sideBarWidth, footerProps = _a.footerProps, isLoading = _a.isLoading, loader = _a.loader, children = _a.children;
+    var sideBarProps = _a.sideBarProps, topBarProps = _a.topBarProps, footerProps = _a.footerProps, isLoading = _a.isLoading, loader = _a.loader, children = _a.children;
     return (react_1.default.createElement(Wrapper, { flexGrow: 1, display: "flex", flexDirection: "column" },
         react_1.default.createElement(Box_1.Box, { flexGrow: 1, flexShrink: 0, display: "flex" },
-            sideBarProps && (react_1.default.createElement(SideBar, { width: sideBarWidth }, sideBarProps)),
+            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,7 +21,7 @@ var breakPoints = [
     "laptop",
     "desktop",
 ];
-var BreakPointValues = {
+exports.BreakPointValues = {
     mobile: 414,
     tablet: 768,
     laptop: 1024,
@@ -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": "1.24.1",
+  "version": "3.0.0",
   "private": false,
   "files": [
     "dist/**"
@@ -54,21 +54,21 @@
     "@semantic-release/git": "10.0.1",
     "@semantic-release/gitlab": "7.0.4",
     "@semantic-release/npm": "8.0.3",
-    "@storybook/addon-actions": "6.3.12",
-    "@storybook/addon-essentials": "6.3.12",
-    "@storybook/addon-links": "6.3.12",
-    "@storybook/node-logger": "6.3.12",
+    "@storybook/addon-actions": "6.4.9",
+    "@storybook/addon-essentials": "6.4.9",
+    "@storybook/addon-links": "6.4.9",
+    "@storybook/node-logger": "6.4.9",
     "@storybook/preset-create-react-app": "3.2.0",
-    "@storybook/react": "6.3.12",
-    "@testing-library/jest-dom": "5.15.1",
+    "@storybook/react": "6.4.9",
+    "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "13.5.0",
     "@types/jest": "27.0.3",
-    "@types/lodash": "4.14.177",
-    "@types/node": "16.11.10",
+    "@types/lodash": "4.14.178",
+    "@types/node": "16.11.13",
     "@types/react": "17.0.37",
     "@types/react-dom": "17.0.11",
-    "@types/styled-components": "5.1.15",
+    "@types/styled-components": "5.1.18",
     "babel-loader": "8.2.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -76,6 +76,6 @@
     "react-scripts": "4.0.3",
     "semantic-release": "18.0.1",
     "styled-components": "5.3.3",
-    "typescript": "4.5.2"
+    "typescript": "4.5.4"
   }
 }

package/dist/components/Menu/UserBox.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare const UserBox: React.FC;

package/dist/components/Menu/UserBox.js

@@ -1,21 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserBox = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var Box_1 = require("../Box/Box");
-var constants_1 = require("../../layouts/constants");
-var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-height: ", "; \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  box-sizing: border-box;\n  min-height: ", "; \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"])), function (props) { return props.theme.spacing(12); }, 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; });
-var UserBox = function (_a) {
-    var children = _a.children;
-    return (react_1.default.createElement(StyledBox, { mb: constants_1.VerticalRhythm }, children));
-};
-exports.UserBox = UserBox;
-var templateObject_1;