@synerise/ds-layout 0.7.43 → 0.8.2

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.8.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.8.1...@synerise/ds-layout@0.8.2) (2021-11-22)
+
+**Note:** Version bump only for package @synerise/ds-layout
+
+
+
+
+
+## [0.8.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.7.44...@synerise/ds-layout@0.8.1) (2021-11-09)
+
+**Note:** Version bump only for package @synerise/ds-layout
+
+
+
+
+
+# [0.8.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.7.44...@synerise/ds-layout@0.8.0) (2021-11-09)
+
+**Note:** Version bump only for package @synerise/ds-layout
+
+
+
+
+
+## [0.7.44](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.7.42...@synerise/ds-layout@0.7.44) (2021-10-26)
+
+**Note:** Version bump only for package @synerise/ds-layout
+
+
+
+
+
 ## [0.7.43](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@0.7.42...@synerise/ds-layout@0.7.43) (2021-10-19)
 
 **Note:** Version bump only for package @synerise/ds-layout

package/dist/Layout.js

@@ -1,18 +1,6 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 import * as React from 'react';
 import Scrollbar from '@synerise/ds-scrollbar';
-import { AngleLeftS, AngleRightS, CloseS } from '@synerise/ds-icon/dist/icons';
+import { AngleLeftS, AngleRightS, CloseS } from '@synerise/ds-icon';
 import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
 import * as S from './Layout.styles';
 
@@ -30,63 +18,61 @@ var Layout = function Layout(_ref) {
       fullPage = _ref$fullPage === void 0 ? false : _ref$fullPage;
 
   var _React$useState = React.useState(Boolean(leftOpened)),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      leftSidebarOpened = _React$useState2[0],
-      setLeftSidebarOpened = _React$useState2[1];
+      leftSidebarOpened = _React$useState[0],
+      setLeftSidebarOpened = _React$useState[1];
 
-  var _React$useState3 = React.useState(Boolean(rightOpened)),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      rightSidebarOpened = _React$useState4[0],
-      setRightSidebarOpened = _React$useState4[1];
+  var _React$useState2 = React.useState(Boolean(rightOpened)),
+      rightSidebarOpened = _React$useState2[0],
+      setRightSidebarOpened = _React$useState2[1];
 
-  return React.createElement(S.LayoutContainer, {
-    className: "ds-layout ".concat(className || '')
-  }, header ? React.createElement(S.LayoutHeader, {
+  return /*#__PURE__*/React.createElement(S.LayoutContainer, {
+    className: "ds-layout " + (className || '')
+  }, header ? /*#__PURE__*/React.createElement(S.LayoutHeader, {
     className: "ds-layout__header"
-  }, header) : null, React.createElement(S.LayoutContent, null, React.createElement(S.LayoutBody, null, React.createElement(React.Fragment, null, left ? React.createElement(S.LayoutSidebarWrapper, {
+  }, header) : null, /*#__PURE__*/React.createElement(S.LayoutContent, null, /*#__PURE__*/React.createElement(S.LayoutBody, null, /*#__PURE__*/React.createElement(React.Fragment, null, left ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
     opened: leftSidebarOpened
-  }, React.createElement(S.LayoutSidebar, {
+  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
     className: "ds-layout__sidebar",
     style: styles && styles.left,
     opened: leftSidebarOpened
-  }, React.createElement(Scrollbar, {
+  }, /*#__PURE__*/React.createElement(Scrollbar, {
     absolute: true
-  }, React.createElement(S.LayoutSidebarInner, {
+  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
     style: styles && styles.leftInner
-  }, left))), React.createElement(S.SidebarButton, {
+  }, left))), /*#__PURE__*/React.createElement(S.SidebarButton, {
     withSubheader: Boolean(subheader),
     onClick: function onClick() {
       return setLeftSidebarOpened(!leftSidebarOpened);
     },
     opened: leftSidebarOpened,
     bothOpened: leftSidebarOpened && rightSidebarOpened
-  }, React.createElement(S.ArrowIcon, {
-    component: React.createElement(AngleRightS, null),
+  }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
+    component: /*#__PURE__*/React.createElement(AngleRightS, null),
     color: theme.palette.white
-  }), React.createElement(S.CloseIcon, {
-    component: React.createElement(CloseS, null),
+  }), /*#__PURE__*/React.createElement(S.CloseIcon, {
+    component: /*#__PURE__*/React.createElement(CloseS, null),
     color: theme.palette.white
-  }))) : null), React.createElement(S.LayoutMain, {
+  }))) : null), /*#__PURE__*/React.createElement(S.LayoutMain, {
     className: "ds-layout__main",
     "data-popup-container": true,
     style: styles && styles.main
-  }, React.createElement(S.LayoutSubheader, null, subheader), React.createElement(Scrollbar, {
+  }, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), /*#__PURE__*/React.createElement(Scrollbar, {
     absolute: true
-  }, React.createElement(S.LayoutMainInner, {
+  }, /*#__PURE__*/React.createElement(S.LayoutMainInner, {
     fullPage: fullPage,
     style: styles && styles.mainInner
-  }, children))), React.createElement(React.Fragment, null, right ? React.createElement(S.LayoutSidebarWrapper, {
+  }, children))), /*#__PURE__*/React.createElement(React.Fragment, null, right ? /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
     opened: rightSidebarOpened,
     right: true
-  }, React.createElement(S.LayoutSidebar, {
+  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
     className: "ds-layout__sidebar ds-layout__sidebar--right",
     style: styles && styles.right,
     opened: rightSidebarOpened
-  }, React.createElement(Scrollbar, {
+  }, /*#__PURE__*/React.createElement(Scrollbar, {
     absolute: true
-  }, React.createElement(S.LayoutSidebarInner, {
+  }, /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
     style: styles && styles.rightInner
-  }, right))), React.createElement(S.SidebarButton, {
+  }, right))), /*#__PURE__*/React.createElement(S.SidebarButton, {
     withSubheader: Boolean(subheader),
     onClick: function onClick() {
       return setRightSidebarOpened(!rightSidebarOpened);
@@ -94,11 +80,11 @@ var Layout = function Layout(_ref) {
     right: true,
     opened: rightSidebarOpened,
     bothOpened: leftSidebarOpened && rightSidebarOpened
-  }, React.createElement(S.ArrowIcon, {
-    component: React.createElement(AngleLeftS, null),
+  }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
+    component: /*#__PURE__*/React.createElement(AngleLeftS, null),
     color: theme.palette.white
-  }), React.createElement(S.CloseIcon, {
-    component: React.createElement(CloseS, null),
+  }), /*#__PURE__*/React.createElement(S.CloseIcon, {
+    component: /*#__PURE__*/React.createElement(CloseS, null),
     color: theme.palette.white
   }))) : null))));
 };

package/dist/Layout.styles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon/dist/Icon.types").IconProps>, any, {}, never>;
-export declare const CloseIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon/dist/Icon.types").IconProps>, any, {}, never>;
+export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
+export declare const CloseIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
 export declare const LayoutContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LayoutContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LayoutHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Layout.styles.js

@@ -1,244 +1,6 @@
-function _templateObject24() {
-  var data = _taggedTemplateLiteral(["transform: ", ""]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
 
-  _templateObject24 = function _templateObject24() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject23() {
-  var data = _taggedTemplateLiteral(["width: 320px;"]);
-
-  _templateObject23 = function _templateObject23() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject22() {
-  var data = _taggedTemplateLiteral(["position: absolute;"]);
-
-  _templateObject22 = function _templateObject22() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject21() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject21 = function _templateObject21() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject20() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject20 = function _templateObject20() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject19() {
-  var data = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 320px\n  "]);
-
-  _templateObject19 = function _templateObject19() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject18() {
-  var data = _taggedTemplateLiteral(["\n    &.slide-enter {\n      max-width: 0;\n    }\n    &.slide-enter.slide-enter-active {\n      max-width: 320px;\n    }\n    &.slide-leave {\n      max-width: 320px;\n    }\n    &.slide-leave.slide-leave-active {\n      max-width: 0;\n    }\n  "]);
-
-  _templateObject18 = function _templateObject18() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject17() {
-  var data = _taggedTemplateLiteral(["max-width: ", ";"]);
-
-  _templateObject17 = function _templateObject17() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject16() {
-  var data = _taggedTemplateLiteral(["flex: 0 1 320px; width: 320px;"]);
-
-  _templateObject16 = function _templateObject16() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject15() {
-  var data = _taggedTemplateLiteral(["flex: 0 0 auto;"]);
-
-  _templateObject15 = function _templateObject15() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject14() {
-  var data = _taggedTemplateLiteral(["display: flex;"]);
-
-  _templateObject14 = function _templateObject14() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  var data = _taggedTemplateLiteral(["display: none;"]);
-
-  _templateObject13 = function _templateObject13() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject12() {
-  var data = _taggedTemplateLiteral(["background-color: ", ";"]);
-
-  _templateObject12 = function _templateObject12() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject11() {
-  var data = _taggedTemplateLiteral(["width: 44px;"]);
-
-  _templateObject11 = function _templateObject11() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject10() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteral(["display: flex; opacity: 1; visibility: visible"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteral(["padding: 24px;"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteral(["flex: 0 0 auto;"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteral(["min-width: 704px;"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteral(["min-width: 704px;"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["flex-direction: row;"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["overflow-x: auto;"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 import styled, { css } from 'styled-components';
 import { hexToRgba } from '@synerise/ds-utils';
@@ -259,7 +21,7 @@ export var LayoutContainer = styled.div.withConfig({
 export var LayoutContent = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutContent",
   componentId: "i053aj-3"
-})(["overflow:hidden;width:100%;height:100%;", ";"], mediaQuery.to.small(_templateObject()));
+})(["overflow:hidden;width:100%;height:100%;", ";"], mediaQuery.to.small(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["overflow-x: auto;"]))));
 export var LayoutHeader = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutHeader",
   componentId: "i053aj-4"
@@ -275,15 +37,15 @@ export var LayoutSubheader = styled.div.withConfig({
 export var LayoutBody = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutBody",
   componentId: "i053aj-6"
-})(["flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;overflow:hidden;height:100%;", ";", ";"], mediaQuery.from.medium(_templateObject2()), mediaQuery.to.small(_templateObject3()));
+})(["flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;overflow:hidden;height:100%;", ";", ";"], mediaQuery.from.medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["flex-direction: row;"]))), mediaQuery.to.small(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["min-width: 704px;"]))));
 export var LayoutMain = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutMain",
   componentId: "i053aj-7"
-})(["flex:1;position:relative;", ";"], mediaQuery.to.small(_templateObject4()));
+})(["flex:1;position:relative;", ";"], mediaQuery.to.small(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["min-width: 704px;"]))));
 export var LayoutMainInner = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutMainInner",
   componentId: "i053aj-8"
-})(["", ";", ";&&{padding:", ";}"], mediaQuery.to.medium(_templateObject5()), mediaQuery.from.medium(_templateObject6()), function (props) {
+})(["", ";", ";&&{padding:", ";}"], mediaQuery.to.medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["padding: 24px;"]))), function (props) {
   return props.fullPage ? '0' : '24px';
 });
 export var SidebarButton = styled.button.withConfig({
@@ -299,21 +61,21 @@ export var SidebarButton = styled.button.withConfig({
   return !props.right ? 'auto' : '-32px';
 }, function (props) {
   return props.withSubheader ? '170px' : '48px';
-}, mediaQuery.to.medium(_templateObject7()), ArrowIcon, mediaQuery.to.medium(_templateObject8(), function (props) {
+}, mediaQuery.to.medium(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["display: flex; opacity: 1; visibility: visible"]))), ArrowIcon, mediaQuery.to.medium(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
   return props.right && props.opened && 'left: -44px';
-}), mediaQuery.to.medium(_templateObject9(), function (props) {
+}), mediaQuery.to.medium(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
   return !props.right && props.opened && 'right: -44px';
-}), mediaQuery.to.small(_templateObject10(), function (props) {
+}), mediaQuery.to.small(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
   return props.right && props.bothOpened && 'transform: translateY(56px)';
 }), function (props) {
-  return props.opened && css(["right:", ";left:", ";", ";", ";", "{transform:rotateZ(180deg);", ";}", "{", ";}"], props.right ? 'auto' : '-4px', !props.right ? 'auto' : '-4px', mediaQuery.to.medium(_templateObject11()), mediaQuery.to.medium(_templateObject12(), props.theme.palette['grey-600']), ArrowIcon, mediaQuery.to.medium(_templateObject13()), CloseIcon, mediaQuery.to.medium(_templateObject14()));
+  return props.opened && css(["right:", ";left:", ";", ";", ";", "{transform:rotateZ(180deg);", ";}", "{", ";}"], props.right ? 'auto' : '-4px', !props.right ? 'auto' : '-4px', mediaQuery.to.medium(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["width: 44px;"]))), mediaQuery.to.medium(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["background-color: ", ";"])), props.theme.palette['grey-600']), ArrowIcon, mediaQuery.to.medium(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["display: none;"]))), CloseIcon, mediaQuery.to.medium(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["display: flex;"]))));
 });
 export var LayoutSidebar = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutSidebar",
   componentId: "i053aj-10"
-})(["position:relative;z-index:10;overflow-y:auto;overflow-x:hidden;background-color:#fff;height:100%;box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);transition:all 0.3s ease-in-out;width:320px;max-width:100%;", ";", ";", " ", ";", "}"], mediaQuery.to.medium(_templateObject15()), mediaQuery.from.medium(_templateObject16()), mediaQuery.from.medium(_templateObject17(), function (props) {
+})(["position:relative;z-index:10;overflow-y:auto;overflow-x:hidden;background-color:#fff;height:100%;box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);transition:all 0.3s ease-in-out;width:320px;max-width:100%;", ";", ";", " ", ";", "}"], mediaQuery.to.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), mediaQuery.from.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["flex: 0 1 320px; width: 320px;"]))), mediaQuery.from.medium(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["max-width: ", ";"])), function (props) {
   return props.opened ? '320px' : '0px';
-}), mediaQuery.from.medium(_templateObject18()), mediaQuery.to.medium(_templateObject19()));
+}), mediaQuery.from.medium(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n    &.slide-enter {\n      max-width: 0;\n    }\n    &.slide-enter.slide-enter-active {\n      max-width: 320px;\n    }\n    &.slide-leave {\n      max-width: 320px;\n    }\n    &.slide-leave.slide-leave-active {\n      max-width: 0;\n    }\n  "]))), mediaQuery.to.medium(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 320px\n  "]))));
 export var LayoutSidebarWrapper = styled.div.withConfig({
   displayName: "Layoutstyles__LayoutSidebarWrapper",
   componentId: "i053aj-11"
@@ -327,11 +89,11 @@ export var LayoutSidebarWrapper = styled.div.withConfig({
   return props.right ? '-32px' : 'auto';
 }, function (props) {
   return props.right ? 'auto' : '-32px';
-}, mediaQuery.to.medium(_templateObject20(), function (props) {
+}, mediaQuery.to.medium(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
   return props.right && props.opened && 'left: -44px';
-}), mediaQuery.to.medium(_templateObject21(), function (props) {
+}), mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["", ""])), function (props) {
   return !props.right && props.opened && 'right: -44px';
-}), mediaQuery.to.medium(_templateObject22()), mediaQuery.to.medium(_templateObject23()), mediaQuery.to.medium(_templateObject24(), function (props) {
+}), mediaQuery.to.medium(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["position: absolute;"]))), mediaQuery.to.medium(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["width: 320px;"]))), mediaQuery.to.medium(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["transform: ", ""])), function (props) {
   return props.right ? 'translateX(320px)' : 'translateX(-320px)';
 }), function (props) {
   return props.opened && css(["&&{margin:", ";transform:translateX(0);}"], props.right ? '0 0 0 1px' : '0 1px 0 0');

package/dist/Layout.types.js

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

package/dist/Page/Page.js

@@ -16,11 +16,11 @@ var Page = function Page(_ref) {
 
     return null;
   }, [appMenu, navBar]);
-  return React.createElement(S.PageContainer, null, navBar, React.createElement(S.ContentWrapper, {
+  return /*#__PURE__*/React.createElement(S.PageContainer, null, navBar, /*#__PURE__*/React.createElement(S.ContentWrapper, {
     withNavBar: Boolean(navBar)
-  }, React.createElement(S.MenuWrapper, {
+  }, /*#__PURE__*/React.createElement(S.MenuWrapper, {
     withAppMenu: Boolean(appMenu)
-  }, renderAppMenu), React.createElement(S.LayoutWrapper, {
+  }, renderAppMenu), /*#__PURE__*/React.createElement(S.LayoutWrapper, {
     withAppMenu: Boolean(appMenu)
   }, children)));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-layout",
-  "version": "0.7.43",
+  "version": "0.8.2",
   "description": "Layout UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -32,12 +32,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-scrollbar": "^0.3.18",
+    "@synerise/ds-scrollbar": "^0.4.2",
     "@synerise/ds-utils": "^0.19.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "b69adf958dccdf8cc697fbba1a47acc96218f40e"
+  "gitHead": "2468359677783819939fb9f1ef5acc36667ecd1a"
 }