@synerise/ds-layout 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.2.0...@synerise/ds-layout@1.2.1) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-layout
+
 # [1.2.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-layout@1.1.15...@synerise/ds-layout@1.2.0) (2026-03-20)
 
 ### Features

package/dist/Layout.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import type * as T from './Layout.types';
 declare const Layout: ({ header, left, right, children, className, styles, subheader, fullPage, nativeScroll, nativeScrollRef, fillViewport, viewportTopOffset, sidebarAnimationDisabled, renderLeftSidebarControls, renderRightSidebarControls, leftSidebarWithDnd, rightSidebarWithDnd, leftSidebarWithScrollbar, rightSidebarWithScrollbar, mainSidebarWithDnd, }: T.LayoutProps) => React.JSX.Element;
 export default Layout;

package/dist/Layout.js

@@ -1,94 +1,49 @@
-import React from 'react';
-import Scrollbar from '@synerise/ds-scrollbar';
-import * as S from './Layout.styles';
-import { Sidebar } from './Sidebar/Sidebar';
-var DEFAULT_SIDEBAR_WIDTH = 320;
-var Layout = function Layout(_ref) {
-  var header = _ref.header,
-    left = _ref.left,
-    right = _ref.right,
-    children = _ref.children,
-    className = _ref.className,
-    styles = _ref.styles,
-    subheader = _ref.subheader,
-    _ref$fullPage = _ref.fullPage,
-    fullPage = _ref$fullPage === void 0 ? false : _ref$fullPage,
-    nativeScroll = _ref.nativeScroll,
-    nativeScrollRef = _ref.nativeScrollRef,
-    fillViewport = _ref.fillViewport,
-    viewportTopOffset = _ref.viewportTopOffset,
-    sidebarAnimationDisabled = _ref.sidebarAnimationDisabled,
-    _ref$renderLeftSideba = _ref.renderLeftSidebarControls,
-    renderLeftSidebarControls = _ref$renderLeftSideba === void 0 ? false : _ref$renderLeftSideba,
-    _ref$renderRightSideb = _ref.renderRightSidebarControls,
-    renderRightSidebarControls = _ref$renderRightSideb === void 0 ? false : _ref$renderRightSideb,
-    _ref$leftSidebarWithD = _ref.leftSidebarWithDnd,
-    leftSidebarWithDnd = _ref$leftSidebarWithD === void 0 ? false : _ref$leftSidebarWithD,
-    _ref$rightSidebarWith = _ref.rightSidebarWithDnd,
-    rightSidebarWithDnd = _ref$rightSidebarWith === void 0 ? false : _ref$rightSidebarWith,
-    _ref$leftSidebarWithS = _ref.leftSidebarWithScrollbar,
-    leftSidebarWithScrollbar = _ref$leftSidebarWithS === void 0 ? true : _ref$leftSidebarWithS,
-    _ref$rightSidebarWith2 = _ref.rightSidebarWithScrollbar,
-    rightSidebarWithScrollbar = _ref$rightSidebarWith2 === void 0 ? true : _ref$rightSidebarWith2,
-    _ref$mainSidebarWithD = _ref.mainSidebarWithDnd,
-    mainSidebarWithDnd = _ref$mainSidebarWithD === void 0 ? false : _ref$mainSidebarWithD;
-  var leftSidebarWidth = (left == null ? void 0 : left.width) || DEFAULT_SIDEBAR_WIDTH;
-  var rightSidebarWidth = (right == null ? void 0 : right.width) || DEFAULT_SIDEBAR_WIDTH;
-  var showLeftSidebar = (left == null ? void 0 : left.opened) || !renderLeftSidebarControls;
-  var showRightSidebar = (right == null ? void 0 : right.opened) || !renderRightSidebarControls;
-  var mainColumnInner = nativeScroll ? /*#__PURE__*/React.createElement(S.LayoutMainInner, {
-    fullPage: fullPage,
-    style: styles && styles.mainInner,
-    ref: nativeScrollRef
-  }, children) : /*#__PURE__*/React.createElement(Scrollbar, {
-    absolute: true,
-    withDnd: mainSidebarWithDnd
-  }, /*#__PURE__*/React.createElement(S.LayoutMainInner, {
-    fullPage: fullPage,
-    style: styles && styles.mainInner
-  }, children));
-  var leftSidebarHasControls = left && renderLeftSidebarControls;
-  var rightSidebarHasControls = right && renderRightSidebarControls;
-  return /*#__PURE__*/React.createElement(S.LayoutContainer, {
-    fillViewport: fillViewport,
-    viewportTopOffset: viewportTopOffset,
-    nativeScroll: nativeScroll,
-    className: "ds-layout " + (className || '')
-  }, header ? /*#__PURE__*/React.createElement(S.LayoutHeader, {
-    className: "ds-layout__header"
-  }, header) : null, /*#__PURE__*/React.createElement(S.LayoutContent, null, /*#__PURE__*/React.createElement(S.LayoutBody, {
-    allowOverflow: !leftSidebarHasControls || !rightSidebarHasControls
-  }, left && /*#__PURE__*/React.createElement(Sidebar, {
-    opened: showLeftSidebar,
-    bothOpened: Boolean((left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)),
-    openedWidth: leftSidebarWidth,
-    animationDisabled: !!sidebarAnimationDisabled,
-    withControlButton: !!leftSidebarHasControls,
-    outerStyles: styles == null ? void 0 : styles.left,
-    innerStyles: styles == null ? void 0 : styles.leftInner,
-    withScrollbar: leftSidebarWithScrollbar,
-    scrollWithDnd: leftSidebarWithDnd,
-    renderControls: renderLeftSidebarControls,
-    withSubheader: Boolean(subheader),
-    onChange: left == null ? void 0 : left.onChange
-  }, left.content), /*#__PURE__*/React.createElement(S.LayoutMain, {
-    className: "ds-layout__main",
-    "data-popup-container": true,
-    style: styles && styles.main
-  }, /*#__PURE__*/React.createElement(S.LayoutSubheader, null, subheader), mainColumnInner), right && /*#__PURE__*/React.createElement(Sidebar, {
-    opened: showRightSidebar,
-    side: "right",
-    bothOpened: Boolean((left == null ? void 0 : left.opened) && (right == null ? void 0 : right.opened)),
-    openedWidth: rightSidebarWidth,
-    animationDisabled: !!sidebarAnimationDisabled,
-    withControlButton: !!rightSidebarHasControls,
-    outerStyles: styles == null ? void 0 : styles.right,
-    innerStyles: styles == null ? void 0 : styles.rightInner,
-    withScrollbar: rightSidebarWithScrollbar,
-    scrollWithDnd: rightSidebarWithDnd,
-    renderControls: renderRightSidebarControls,
-    withSubheader: Boolean(subheader),
-    onChange: right == null ? void 0 : right.onChange
-  }, right.content))));
+import { jsx, jsxs } from "react/jsx-runtime";
+import Scrollbar from "@synerise/ds-scrollbar";
+import { LayoutMainInner, LayoutContainer, LayoutHeader, LayoutContent, LayoutBody, LayoutMain, LayoutSubheader } from "./Layout.styles.js";
+import { Sidebar } from "./Sidebar/Sidebar.js";
+const DEFAULT_SIDEBAR_WIDTH = 320;
+const Layout = ({
+  header,
+  left,
+  right,
+  children,
+  className,
+  styles,
+  subheader,
+  fullPage = false,
+  nativeScroll,
+  nativeScrollRef,
+  fillViewport,
+  viewportTopOffset,
+  sidebarAnimationDisabled,
+  renderLeftSidebarControls = false,
+  renderRightSidebarControls = false,
+  leftSidebarWithDnd = false,
+  rightSidebarWithDnd = false,
+  leftSidebarWithScrollbar = true,
+  rightSidebarWithScrollbar = true,
+  mainSidebarWithDnd = false
+}) => {
+  const leftSidebarWidth = left?.width || DEFAULT_SIDEBAR_WIDTH;
+  const rightSidebarWidth = right?.width || DEFAULT_SIDEBAR_WIDTH;
+  const showLeftSidebar = left?.opened || !renderLeftSidebarControls;
+  const showRightSidebar = right?.opened || !renderRightSidebarControls;
+  const mainColumnInner = nativeScroll ? /* @__PURE__ */ jsx(LayoutMainInner, { fullPage, style: styles && styles.mainInner, ref: nativeScrollRef, children }) : /* @__PURE__ */ jsx(Scrollbar, { absolute: true, withDnd: mainSidebarWithDnd, children: /* @__PURE__ */ jsx(LayoutMainInner, { fullPage, style: styles && styles.mainInner, children }) });
+  const leftSidebarHasControls = left && renderLeftSidebarControls;
+  const rightSidebarHasControls = right && renderRightSidebarControls;
+  return /* @__PURE__ */ jsxs(LayoutContainer, { fillViewport, viewportTopOffset, nativeScroll, className: `ds-layout ${className || ""}`, children: [
+    header ? /* @__PURE__ */ jsx(LayoutHeader, { className: "ds-layout__header", children: header }) : null,
+    /* @__PURE__ */ jsx(LayoutContent, { children: /* @__PURE__ */ jsxs(LayoutBody, { allowOverflow: !leftSidebarHasControls || !rightSidebarHasControls, children: [
+      left && /* @__PURE__ */ jsx(Sidebar, { opened: showLeftSidebar, bothOpened: Boolean(left?.opened && right?.opened), openedWidth: leftSidebarWidth, animationDisabled: !!sidebarAnimationDisabled, withControlButton: !!leftSidebarHasControls, outerStyles: styles?.left, innerStyles: styles?.leftInner, withScrollbar: leftSidebarWithScrollbar, scrollWithDnd: leftSidebarWithDnd, renderControls: renderLeftSidebarControls, withSubheader: Boolean(subheader), onChange: left?.onChange, children: left.content }),
+      /* @__PURE__ */ jsxs(LayoutMain, { className: "ds-layout__main", "data-popup-container": true, style: styles && styles.main, children: [
+        /* @__PURE__ */ jsx(LayoutSubheader, { children: subheader }),
+        mainColumnInner
+      ] }),
+      right && /* @__PURE__ */ jsx(Sidebar, { opened: showRightSidebar, side: "right", bothOpened: Boolean(left?.opened && right?.opened), openedWidth: rightSidebarWidth, animationDisabled: !!sidebarAnimationDisabled, withControlButton: !!rightSidebarHasControls, outerStyles: styles?.right, innerStyles: styles?.rightInner, withScrollbar: rightSidebarWithScrollbar, scrollWithDnd: rightSidebarWithDnd, renderControls: renderRightSidebarControls, withSubheader: Boolean(subheader), onChange: right?.onChange, children: right.content })
+    ] }) })
+  ] });
+};
+export {
+  Layout as default
 };
-export default Layout;

package/dist/Layout.styles.d.ts

@@ -1,16 +1,16 @@
-export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const CloseIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const LayoutContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LayoutHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LayoutSubheader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LayoutBody: import("styled-components").StyledComponent<"div", any, {
+export declare const ArrowIcon: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<import('@synerise/ds-icon').BaseIconProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const CloseIcon: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<import('@synerise/ds-icon').BaseIconProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const LayoutContent: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const LayoutHeader: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const LayoutSubheader: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const LayoutBody: import('styled-components').StyledComponent<"div", any, {
     allowOverflow?: boolean;
 }, never>;
-export declare const LayoutMain: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LayoutMainInner: import("styled-components").StyledComponent<"div", any, {
+export declare const LayoutMain: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const LayoutMainInner: import('styled-components').StyledComponent<"div", any, {
     fullPage: boolean;
 }, never>;
-export declare const LayoutContainer: import("styled-components").StyledComponent<"div", any, {
+export declare const LayoutContainer: import('styled-components').StyledComponent<"div", any, {
     nativeScroll?: boolean;
     fillViewport?: boolean;
     viewportTopOffset?: number;
@@ -21,13 +21,13 @@ type SidebarButtonProps = {
     withSubheader?: boolean;
     bothOpened?: boolean;
 };
-export declare const SidebarButton: import("styled-components").StyledComponent<"button", any, SidebarButtonProps, never>;
+export declare const SidebarButton: import('styled-components').StyledComponent<"button", any, SidebarButtonProps, never>;
 type LayoutSidebarProps = {
     opened: boolean;
     openedWidth: number;
     animationDisabled: boolean;
 };
-export declare const LayoutSidebar: import("styled-components").StyledComponent<"div", any, LayoutSidebarProps, never>;
+export declare const LayoutSidebar: import('styled-components').StyledComponent<"div", any, LayoutSidebarProps, never>;
 type LayoutSidebarWrapperProps = {
     hasControlButton: boolean;
     opened: boolean;
@@ -35,6 +35,6 @@ type LayoutSidebarWrapperProps = {
     openedWidth: number;
     animationDisabled: boolean;
 };
-export declare const LayoutSidebarWrapper: import("styled-components").StyledComponent<"div", any, LayoutSidebarWrapperProps, never>;
-export declare const LayoutSidebarInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LayoutSidebarWrapper: import('styled-components').StyledComponent<"div", any, LayoutSidebarWrapperProps, never>;
+export declare const LayoutSidebarInner: import('styled-components').StyledComponent<"div", any, {}, never>;
 export {};

package/dist/Layout.styles.js

@@ -1,122 +1,105 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
-function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
-import styled, { css } from 'styled-components';
-import { mediaQuery } from '@synerise/ds-core';
-import Icon from '@synerise/ds-icon';
-var DEFAULT_TOP_OFFSET = 55;
-export var ArrowIcon = styled(Icon).withConfig({
+import styled, { css } from "styled-components";
+import { mediaQuery } from "@synerise/ds-core";
+import Icon from "@synerise/ds-icon";
+const DEFAULT_TOP_OFFSET = 55;
+const ArrowIcon = /* @__PURE__ */ styled(Icon).withConfig({
   displayName: "Layoutstyles__ArrowIcon",
   componentId: "sc-i053aj-0"
 })([""]);
-export var CloseIcon = styled(Icon).withConfig({
+const CloseIcon = /* @__PURE__ */ styled(Icon).withConfig({
   displayName: "Layoutstyles__CloseIcon",
   componentId: "sc-i053aj-1"
 })(["&&{display:none;}"]);
-export var LayoutContent = styled.div.withConfig({
+const LayoutContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Layoutstyles__LayoutContent",
   componentId: "sc-i053aj-2"
-})(["overflow:hidden;width:100%;height:100%;display:flex;flex-direction:column;", ";"], mediaQuery.to.small(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["overflow-x: auto;"]))));
-export var LayoutHeader = styled.div.withConfig({
+})(["overflow:hidden;width:100%;height:100%;display:flex;flex-direction:column;", ";"], mediaQuery.to.small`overflow-x: auto;`);
+const LayoutHeader = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Layoutstyles__LayoutHeader",
   componentId: "sc-i053aj-3"
 })(["&&&{margin:0;display:block;width:100%;}z-index:1;"]);
-export var LayoutSubheader = styled.div.withConfig({
+const LayoutSubheader = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Layoutstyles__LayoutSubheader",
   componentId: "sc-i053aj-4"
 })(["position:relative;max-width:100%;top:0;z-index:1;box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);"]);
-export var LayoutBody = styled.div.withConfig({
+const LayoutBody = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Layoutstyles__LayoutBody",
   componentId: "sc-i053aj-5"
-})(["flex:1 1 auto;display:flex;flex-direction:row;min-height:0;min-width:0;position:relative;overflow:hidden;height:100%;", ";", ";"], mediaQuery.to.small(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["min-width: 704px;}"]))), function (props) {
-  return props.allowOverflow && mediaQuery.to.small(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["overflow-x: auto;"])));
-});
-export var LayoutMain = styled.div.withConfig({
+})(["flex:1 1 auto;display:flex;flex-direction:row;min-height:0;min-width:0;position:relative;overflow:hidden;height:100%;", ";", ";"], mediaQuery.to.small`min-width: 704px;}`, (props) => props.allowOverflow && mediaQuery.to.small`overflow-x: auto;`);
+const LayoutMain = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Layoutstyles__LayoutMain",
   componentId: "sc-i053aj-6"
-})(["position:relative;max-width:100%;width:100%;", ";", ";"], mediaQuery.to.small(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["min-width: 704px;"]))), mediaQuery.to.medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["height: 100%;"]))));
-export var LayoutMainInner = styled.div.withConfig({
+})(["position:relative;max-width:100%;width:100%;", ";", ";"], mediaQuery.to.small`min-width: 704px;`, mediaQuery.to.medium`height: 100%;`);
+const LayoutMainInner = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Layoutstyles__LayoutMainInner",
   componentId: "sc-i053aj-7"
-})(["", ";&&{padding:", ";}"], mediaQuery.from.medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["padding: 24px;"]))), function (props) {
-  return props.fullPage ? '0' : '24px';
-});
-export var LayoutContainer = styled.div.withConfig({
+})(["", ";&&{padding:", ";}"], mediaQuery.from.medium`padding: 24px;`, (props) => props.fullPage ? "0" : "24px");
+const LayoutContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Layoutstyles__LayoutContainer",
   componentId: "sc-i053aj-8"
-})(["height:100%;display:flex;flex-direction:column;overflow:hidden;", ";", "{", ";}", "{overflow:", ";", ";}"], function (props) {
-  return props.fillViewport && css(["position:absolute;width:100%;height:calc( 100vh - ", "px );"], props.viewportTopOffset !== undefined ? props.viewportTopOffset : DEFAULT_TOP_OFFSET);
-}, LayoutMain, function (props) {
-  return props.nativeScroll && css(["display:flex;flex-direction:column;overflow:hidden;"]);
-}, LayoutMainInner, function (props) {
-  return props.nativeScroll ? 'auto' : 'hidden';
-}, function (props) {
-  return props.nativeScroll ? "\n        flex-grow: 1;\n        position: relative;\n      " : mediaQuery.to.medium(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))) + ";";
-});
-export var SidebarButton = styled.button.withConfig({
+})(["height:100%;display:flex;flex-direction:column;overflow:hidden;", ";", "{", ";}", "{overflow:", ";", ";}"], (props) => props.fillViewport && css(["position:absolute;width:100%;height:calc( 100vh - ", "px );"], props.viewportTopOffset !== void 0 ? props.viewportTopOffset : DEFAULT_TOP_OFFSET), LayoutMain, (props) => props.nativeScroll && css(["display:flex;flex-direction:column;overflow:hidden;"]), LayoutMainInner, (props) => props.nativeScroll ? "auto" : "hidden", (props) => props.nativeScroll ? `
+        flex-grow: 1;
+        position: relative;
+      ` : `${mediaQuery.to.medium`flex: 0 0 auto;`};`);
+const SidebarButton = /* @__PURE__ */ styled.button.withConfig({
   displayName: "Layoutstyles__SidebarButton",
   componentId: "sc-i053aj-9"
-})(["width:36px;height:44px;background-color:", ";align-items:center;justify-content:center;position:absolute;cursor:pointer;border-radius:", ";right:", ";left:", ";top:", ";outline:0;border:0;display:flex;opacity:1;visibility:visible;transition:all 0.3s ease;z-index:1;", ";", "{transition:transform 0.3s ease;}", ";", ";", ";", " ", ";"], function (props) {
-  return props.theme.palette['grey-500'];
-}, function (props) {
-  return props.right ? '3px 0 0 3px' : '0 3px 3px 0';
-}, function (props) {
-  return props.right ? 'auto' : '-32px';
-}, function (props) {
-  return !props.right ? 'auto' : '-32px';
-}, function (props) {
-  return props.withSubheader ? '170px' : '48px';
-}, function (props) {
-  return mediaQuery.to.medium(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["display: flex; ", " opacity: 1; visibility: visible"])), props.theme.palette.white);
-}, ArrowIcon, function (props) {
-  return mediaQuery.to.medium(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), props.right && props.opened && 'left: -44px');
-}, function (props) {
-  return props.right && props.opened && mediaQuery.to.medium(_templateObject0 || (_templateObject0 = _taggedTemplateLiteralLoose(["\n    'left: -44px'}\n  "])));
-}, function (props) {
-  return !props.right && props.opened && mediaQuery.to.medium(_templateObject1 || (_templateObject1 = _taggedTemplateLiteralLoose(["right: -44px"])));
-}, function (props) {
-  return props.right && props.bothOpened && mediaQuery.to.small(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["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 || (_templateObject11 = _taggedTemplateLiteralLoose(["width: 44px;"]))), mediaQuery.to.medium(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["background-color: ", ";"])), props.theme.palette['grey-600']), ArrowIcon, ArrowIcon, mediaQuery.to.medium(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["display: none;"]))), CloseIcon, CloseIcon, mediaQuery.to.medium(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["display: flex;"]))));
-});
-export var LayoutSidebar = styled.div.withConfig({
+})(["width:36px;height:44px;background-color:", ";align-items:center;justify-content:center;position:absolute;cursor:pointer;border-radius:", ";right:", ";left:", ";top:", ";outline:0;border:0;display:flex;opacity:1;visibility:visible;transition:all 0.3s ease;z-index:1;", ";", "{transition:transform 0.3s ease;}", ";", ";", ";", " ", ";"], (props) => props.theme.palette["grey-500"], (props) => props.right ? "3px 0 0 3px" : "0 3px 3px 0", (props) => props.right ? "auto" : "-32px", (props) => !props.right ? "auto" : "-32px", (props) => props.withSubheader ? "170px" : "48px", (props) => mediaQuery.to.medium`display: flex; ${props.theme.palette.white} opacity: 1; visibility: visible`, ArrowIcon, (props) => mediaQuery.to.medium`
+    ${props.right && props.opened && "left: -44px"}
+  `, (props) => props.right && props.opened && mediaQuery.to.medium`
+    'left: -44px'}
+  `, (props) => !props.right && props.opened && mediaQuery.to.medium`right: -44px`, (props) => props.right && props.bothOpened && mediaQuery.to.small`transform: translateY(56px)`, (props) => props.opened && css(["right:", ";left:", ";", ";", ";", "", "{transform:rotateZ(180deg);", ";}", "", "{", ";}"], props.right ? "auto" : "-4px", !props.right ? "auto" : "-4px", mediaQuery.to.medium`width: 44px;`, mediaQuery.to.medium`background-color: ${props.theme.palette["grey-600"]};`, ArrowIcon, ArrowIcon, mediaQuery.to.medium`display: none;`, CloseIcon, CloseIcon, mediaQuery.to.medium`display: flex;`));
+const LayoutSidebar = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Layoutstyles__LayoutSidebar",
   componentId: "sc-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);width:", ";max-width:100%;", ";", ";", ";", ";}"], function (props) {
-  return !props.animationDisabled && css(["will-change:width;transform-style:preserve-3d;transition:max-width 0.3s ease;"]);
-}, function (props) {
-  return props.openedWidth + "px";
-}, mediaQuery.to.medium(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["flex: 0 0 auto;"]))), function (props) {
-  return mediaQuery.from.medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n    flex: 0 1 ", "px;\n    width: ", "px;"])), props.openedWidth, props.openedWidth);
-}, function (props) {
-  return mediaQuery.from.medium(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n    max-width: ", "px"])), props.opened ? props.openedWidth : 0);
-}, function (props) {
-  return mediaQuery.from.medium(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n    &.slide-enter {\n      max-width: 0;\n    }\n    &.slide-enter.slide-enter-active {\n      max-width: ", "px;\n    }\n    &.slide-leave {\n      max-width: ", "px;\n    }\n    &.slide-leave.slide-leave-active {\n      max-width: 0;\n    }\n  "])), props.openedWidth, props.openedWidth);
-});
-export var LayoutSidebarWrapper = styled.div.withConfig({
+})(["", ";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);width:", ";max-width:100%;", ";", ";", ";", ";}"], (props) => !props.animationDisabled && css(["will-change:width;transform-style:preserve-3d;transition:max-width 0.3s ease;"]), (props) => `${props.openedWidth}px`, mediaQuery.to.medium`flex: 0 0 auto;`, (props) => mediaQuery.from.medium`
+    flex: 0 1 ${props.openedWidth}px;
+    width: ${props.openedWidth}px;`, (props) => mediaQuery.from.medium`
+    max-width: ${props.opened ? props.openedWidth : 0}px`, (props) => mediaQuery.from.medium`
+    &.slide-enter {
+      max-width: 0;
+    }
+    &.slide-enter.slide-enter-active {
+      max-width: ${props.openedWidth}px;
+    }
+    &.slide-leave {
+      max-width: ${props.openedWidth}px;
+    }
+    &.slide-leave.slide-leave-active {
+      max-width: 0;
+    }
+  `);
+const LayoutSidebarWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Layoutstyles__LayoutSidebarWrapper",
   componentId: "sc-i053aj-11"
-})(["position:relative;overflow:visible;left:", ";right:", ";z-index:10;", ";&:hover{", "{background-color:", ";left:", ";right:", ";", ";", ";}}", ";", ";)"], function (props) {
-  return props.right ? 'auto' : '0';
-}, function (props) {
-  return props.right ? '0' : 'auto';
-}, function (props) {
-  return !props.animationDisabled && css(["will-change:width,transform;transform-style:preserve-3d;transition:width 0.3s ease,transform 0.3s ease;"]);
-}, SidebarButton, function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.right ? '-32px' : 'auto';
-}, function (props) {
-  return props.right ? 'auto' : '-32px';
-}, function (props) {
-  return mediaQuery.to.medium(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["", ""])), props.right && props.opened && 'left: -44px');
-}, function (props) {
-  return mediaQuery.to.medium(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["", ""])), !props.right && props.opened && 'right: -44px');
-}, function (props) {
-  return props.hasControlButton && css(["", ";"], mediaQuery.to.medium(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: ", "px;\n      transform: ", ";\n\n      ", " {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: ", "px;\n      }\n    "])), props.openedWidth, props.right ? "translateX(" + props.openedWidth + "px)" : "translateX(-" + props.openedWidth + "px)", LayoutSidebar, props.openedWidth));
-}, function (props) {
-  return props.opened && css(["&&{margin:", ";transform:translateX(0);}"], props.right ? '0 0 0 1px' : '0 1px 0 0');
-});
-export var LayoutSidebarInner = styled.div.withConfig({
+})(["position:relative;overflow:visible;left:", ";right:", ";z-index:10;", ";&:hover{", "{background-color:", ";left:", ";right:", ";", ";", ";}}", ";", ";)"], (props) => props.right ? "auto" : "0", (props) => props.right ? "0" : "auto", (props) => !props.animationDisabled && css(["will-change:width,transform;transform-style:preserve-3d;transition:width 0.3s ease,transform 0.3s ease;"]), SidebarButton, (props) => props.theme.palette["grey-600"], (props) => props.right ? "-32px" : "auto", (props) => props.right ? "auto" : "-32px", (props) => mediaQuery.to.medium`${props.right && props.opened && "left: -44px"}`, (props) => mediaQuery.to.medium`${!props.right && props.opened && "right: -44px"}`, (props) => props.hasControlButton && css(["", ";"], mediaQuery.to.medium`
+      position: absolute;
+      width: ${props.openedWidth}px;
+      transform: ${props.right ? `translateX(${props.openedWidth}px)` : `translateX(-${props.openedWidth}px)`};
+
+      ${LayoutSidebar} {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: ${props.openedWidth}px;
+      }
+    `), (props) => props.opened && css(["&&{margin:", ";transform:translateX(0);}"], props.right ? "0 0 0 1px" : "0 1px 0 0"));
+const LayoutSidebarInner = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Layoutstyles__LayoutSidebarInner",
   componentId: "sc-i053aj-12"
-})(["padding:24px 0;display:flex;flex-flow:column;height:100%;overflow-y:auto;overflow-x:hidden;"]);
+})(["padding:24px 0;display:flex;flex-flow:column;height:100%;overflow-y:auto;overflow-x:hidden;"]);
+export {
+  ArrowIcon,
+  CloseIcon,
+  LayoutBody,
+  LayoutContainer,
+  LayoutContent,
+  LayoutHeader,
+  LayoutMain,
+  LayoutMainInner,
+  LayoutSidebar,
+  LayoutSidebarInner,
+  LayoutSidebarWrapper,
+  LayoutSubheader,
+  SidebarButton
+};

package/dist/Layout.types.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode, type Ref } from 'react';
+import { CSSProperties, ReactNode, Ref } from 'react';
 export interface ColumnProps<T> {
     left?: T;
     leftInner?: T;

package/dist/Layout.types.js

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

package/dist/Page/Page.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactElement, type ReactNode } from 'react';
+import { default as React, ReactElement, ReactNode } from 'react';
 type PageProps = {
     navBar?: ReactNode;
     appMenu?: ReactElement;

package/dist/Page/Page.js

@@ -1,26 +1,28 @@
-import React, { useMemo } from 'react';
-import * as S from './Page.styles';
-var Page = function Page(_ref) {
-  var navBar = _ref.navBar,
-    appMenu = _ref.appMenu,
-    children = _ref.children,
-    className = _ref.className;
-  var renderAppMenu = useMemo(function () {
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { PageContainer, ContentWrapper, MenuWrapper, LayoutWrapper } from "./Page.styles.js";
+const Page = ({
+  navBar,
+  appMenu,
+  children,
+  className
+}) => {
+  const renderAppMenu = useMemo(() => {
     if (appMenu) {
-      return /*#__PURE__*/React.cloneElement(appMenu, {
+      return React.cloneElement(appMenu, {
         top: navBar ? 56 : 0
       });
     }
     return null;
   }, [appMenu, navBar]);
-  return /*#__PURE__*/React.createElement(S.PageContainer, {
-    className: className
-  }, navBar, /*#__PURE__*/React.createElement(S.ContentWrapper, {
-    withNavBar: Boolean(navBar)
-  }, /*#__PURE__*/React.createElement(S.MenuWrapper, {
-    withAppMenu: Boolean(appMenu)
-  }, renderAppMenu), /*#__PURE__*/React.createElement(S.LayoutWrapper, {
-    withAppMenu: Boolean(appMenu)
-  }, children)));
+  return /* @__PURE__ */ jsxs(PageContainer, { className, children: [
+    navBar,
+    /* @__PURE__ */ jsxs(ContentWrapper, { withNavBar: Boolean(navBar), children: [
+      /* @__PURE__ */ jsx(MenuWrapper, { withAppMenu: Boolean(appMenu), children: renderAppMenu }),
+      /* @__PURE__ */ jsx(LayoutWrapper, { withAppMenu: Boolean(appMenu), children })
+    ] })
+  ] });
+};
+export {
+  Page as default
 };
-export default Page;

package/dist/Page/Page.styles.d.ts

@@ -1,10 +1,10 @@
-export declare const PageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const PageContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ContentWrapper: import('styled-components').StyledComponent<"div", any, {
     withNavBar: boolean;
 }, never>;
-export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const MenuWrapper: import('styled-components').StyledComponent<"div", any, {
     withAppMenu: boolean;
 }, never>;
-export declare const LayoutWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const LayoutWrapper: import('styled-components').StyledComponent<"div", any, {
     withAppMenu: boolean;
 }, never>;

package/dist/Page/Page.styles.js

@@ -1,25 +1,23 @@
-import styled from 'styled-components';
-export var PageContainer = styled.div.withConfig({
+import styled from "styled-components";
+const PageContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Pagestyles__PageContainer",
   componentId: "sc-1pbe558-0"
 })(["position:fixed;top:0;left:0;width:100%;display:flex;flex-wrap:wrap;height:100vh;background-color:rgb(243,245,246);overflow:hidden;"]);
-export var ContentWrapper = styled.div.withConfig({
+const ContentWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Pagestyles__ContentWrapper",
   componentId: "sc-1pbe558-1"
-})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;position:absolute;top:", ";height:", ";"], function (props) {
-  return props.withNavBar ? '56px' : '0';
-}, function (props) {
-  return props.withNavBar ? 'calc(100% - 56px)' : '100%';
-});
-export var MenuWrapper = styled.div.withConfig({
+})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;position:absolute;top:", ";height:", ";"], (props) => props.withNavBar ? "56px" : "0", (props) => props.withNavBar ? "calc(100% - 56px)" : "100%");
+const MenuWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Pagestyles__MenuWrapper",
   componentId: "sc-1pbe558-2"
-})(["width:", ";position:relative;z-index:1200;height:100%;"], function (props) {
-  return props.withAppMenu ? '64px' : '0';
-});
-export var LayoutWrapper = styled.div.withConfig({
+})(["width:", ";position:relative;z-index:1200;height:100%;"], (props) => props.withAppMenu ? "64px" : "0");
+const LayoutWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Pagestyles__LayoutWrapper",
   componentId: "sc-1pbe558-3"
-})(["width:", ";display:flex;flex-direction:column;height:100%;"], function (props) {
-  return props.withAppMenu ? 'calc(100% - 64px)' : '100%';
-});
+})(["width:", ";display:flex;flex-direction:column;height:100%;"], (props) => props.withAppMenu ? "calc(100% - 64px)" : "100%");
+export {
+  ContentWrapper,
+  LayoutWrapper,
+  MenuWrapper,
+  PageContainer
+};

package/dist/Sidebar/Sidebar.d.ts

@@ -1,4 +1,4 @@
-import React, { type CSSProperties, type ReactNode } from 'react';
+import { default as React, CSSProperties, ReactNode } from 'react';
 type SidebarProps = {
     opened: boolean;
     bothOpened: boolean;

package/dist/Sidebar/Sidebar.js

@@ -1,59 +1,39 @@
-import React, { useMemo } from 'react';
-import { useTheme } from '@synerise/ds-core';
-import { AngleLeftS, AngleRightS, CloseS } from '@synerise/ds-icon';
-import Scrollbar from '@synerise/ds-scrollbar';
-import * as S from '../Layout.styles';
-export var Sidebar = function Sidebar(_ref) {
-  var opened = _ref.opened,
-    openedWidth = _ref.openedWidth,
-    animationDisabled = _ref.animationDisabled,
-    withControlButton = _ref.withControlButton,
-    innerStyles = _ref.innerStyles,
-    outerStyles = _ref.outerStyles,
-    scrollWithDnd = _ref.scrollWithDnd,
-    children = _ref.children,
-    withScrollbar = _ref.withScrollbar,
-    renderControls = _ref.renderControls,
-    withSubheader = _ref.withSubheader,
-    side = _ref.side,
-    bothOpened = _ref.bothOpened,
-    onChange = _ref.onChange;
-  var theme = useTheme();
-  var contentWithScrollbar = useMemo(function () {
-    var content = /*#__PURE__*/React.createElement(S.LayoutSidebarInner, {
-      style: innerStyles
-    }, children);
-    return withScrollbar ? /*#__PURE__*/React.createElement(Scrollbar, {
-      absolute: true,
-      withDnd: scrollWithDnd
-    }, content) : content;
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTheme } from "@synerise/ds-core";
+import { AngleLeftS, AngleRightS, CloseS } from "@synerise/ds-icon";
+import Scrollbar from "@synerise/ds-scrollbar";
+import { LayoutSidebarWrapper, LayoutSidebar, SidebarButton, ArrowIcon, CloseIcon, LayoutSidebarInner } from "../Layout.styles.js";
+const Sidebar = ({
+  opened,
+  openedWidth,
+  animationDisabled,
+  withControlButton,
+  innerStyles,
+  outerStyles,
+  scrollWithDnd,
+  children,
+  withScrollbar,
+  renderControls,
+  withSubheader,
+  side,
+  bothOpened,
+  onChange
+}) => {
+  const theme = useTheme();
+  const contentWithScrollbar = useMemo(() => {
+    const content = /* @__PURE__ */ jsx(LayoutSidebarInner, { style: innerStyles, children });
+    return withScrollbar ? /* @__PURE__ */ jsx(Scrollbar, { absolute: true, withDnd: scrollWithDnd, children: content }) : content;
   }, [children, scrollWithDnd, innerStyles, withScrollbar]);
-  var handleChange = function handleChange() {
-    return onChange == null ? void 0 : onChange(!opened);
-  };
-  return /*#__PURE__*/React.createElement(S.LayoutSidebarWrapper, {
-    opened: opened,
-    right: side === 'right',
-    openedWidth: openedWidth,
-    animationDisabled: animationDisabled,
-    hasControlButton: withControlButton
-  }, /*#__PURE__*/React.createElement(S.LayoutSidebar, {
-    className: "ds-layout__sidebar " + (side === 'right' && 'ds-layout__sidebar--right'),
-    style: outerStyles,
-    opened: opened,
-    openedWidth: openedWidth,
-    animationDisabled: animationDisabled
-  }, contentWithScrollbar), typeof renderControls === 'function' && renderControls() || renderControls === true && /*#__PURE__*/React.createElement(S.SidebarButton, {
-    withSubheader: withSubheader,
-    onClick: handleChange,
-    opened: opened,
-    right: side === 'right',
-    bothOpened: bothOpened
-  }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-    component: side === 'right' ? /*#__PURE__*/React.createElement(AngleLeftS, null) : /*#__PURE__*/React.createElement(AngleRightS, null),
-    color: theme.palette.white
-  }), /*#__PURE__*/React.createElement(S.CloseIcon, {
-    component: /*#__PURE__*/React.createElement(CloseS, null),
-    color: theme.palette.white
-  })));
-};
+  const handleChange = () => onChange?.(!opened);
+  return /* @__PURE__ */ jsxs(LayoutSidebarWrapper, { opened, right: side === "right", openedWidth, animationDisabled, hasControlButton: withControlButton, children: [
+    /* @__PURE__ */ jsx(LayoutSidebar, { className: `ds-layout__sidebar ${side === "right" && "ds-layout__sidebar--right"}`, style: outerStyles, opened, openedWidth, animationDisabled, children: contentWithScrollbar }),
+    typeof renderControls === "function" && renderControls() || renderControls === true && /* @__PURE__ */ jsxs(SidebarButton, { withSubheader, onClick: handleChange, opened, right: side === "right", bothOpened, children: [
+      /* @__PURE__ */ jsx(ArrowIcon, { component: side === "right" ? /* @__PURE__ */ jsx(AngleLeftS, {}) : /* @__PURE__ */ jsx(AngleRightS, {}), color: theme.palette.white }),
+      /* @__PURE__ */ jsx(CloseIcon, { component: /* @__PURE__ */ jsx(CloseS, {}), color: theme.palette.white })
+    ] })
+  ] });
+};
+export {
+  Sidebar
+};

package/dist/index.js

@@ -1,3 +1,6 @@
-export * from './Layout.types';
-export { default } from './Layout';
-export { default as Page } from './Page/Page';
+import { default as default2 } from "./Layout.js";
+import { default as default3 } from "./Page/Page.js";
+export {
+  default3 as Page,
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-layout",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Layout UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,14 +35,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-scrollbar": "^1.2.16",
-    "@synerise/ds-utils": "^1.7.0"
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-scrollbar": "^1.2.17",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }