@dxc-technology/halstack-react 0.0.0-c9b5c13 → 0.0.0-ca55cbe

package/inset/Inset.js

@@ -36,40 +36,7 @@ function Inset(_ref) {
 }
 
 function getSpacingValue(spacingName) {
-  switch (spacingName) {
-    case "none":
-      return "0rem";
-
-    case "xxxsmall":
-      return "0.125rem";
-
-    case "xxsmall":
-      return "0.25rem";
-
-    case "xsmall":
-      return "0.5rem";
-
-    case "small":
-      return "1rem";
-
-    case "medium":
-      return "1.5rem";
-
-    case "large":
-      return "2rem";
-
-    case "xlarge":
-      return "3rem";
-
-    case "xxlarge":
-      return "4rem";
-
-    case "xxxlarge":
-      return "5rem";
-
-    default:
-      return "0rem";
-  }
+  return spacingName ? spacingName : "0rem";
 }
 
 var StyledInset = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (_ref2) {

package/inset/Inset.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Title from "../../.storybook/components/Title";
 import styled from "styled-components";
-import DxcStack from "./../stack/Stack";
+import DxcFlex from "./../flex/Flex";
 import DxcInset from "./Inset";
 
 export default {
@@ -19,199 +19,199 @@ export const Chromatic = () => (
     </Container>
     <Title title="space = none" level={4} />
     <Container>
-      <DxcInset space="none">
+      <DxcInset space="0rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xxxsmall" level={4} />
     <Container>
-      <DxcInset space="xxxsmall">
+      <DxcInset space="0.125rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xxsmall" level={4} />
     <Container>
-      <DxcInset space="xxsmall">
+      <DxcInset space="0.25rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xsmall" level={4} />
     <Container>
-      <DxcInset space="xsmall">
+      <DxcInset space="0.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = small" level={4} />
     <Container>
-      <DxcInset space="small">
+      <DxcInset space="1rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = medium" level={4} />
     <Container>
-      <DxcInset space="medium">
+      <DxcInset space="1.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = large" level={4} />
     <Container>
-      <DxcInset space="large">
+      <DxcInset space="2rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xlarge" level={4} />
     <Container>
-      <DxcInset space="xlarge">
+      <DxcInset space="3rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xxlarge" level={4} />
     <Container>
-      <DxcInset space="xxlarge">
+      <DxcInset space="4rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xxxlarge" level={4} />
     <Container>
-      <DxcInset space="xxxlarge">
+      <DxcInset space="5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = none" level={4} />
     <Container>
-      <DxcInset horizontal="none">
+      <DxcInset horizontal="0rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xxxsmall" level={4} />
     <Container>
-      <DxcInset horizontal="xxxsmall">
+      <DxcInset horizontal="0.125rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xxsmall" level={4} />
     <Container>
-      <DxcInset horizontal="xxsmall">
+      <DxcInset horizontal="0.25rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xsmall" level={4} />
     <Container>
-      <DxcInset horizontal="xsmall">
+      <DxcInset horizontal="0.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = small" level={4} />
     <Container>
-      <DxcInset horizontal="small">
+      <DxcInset horizontal="1rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = medium" level={4} />
     <Container>
-      <DxcInset horizontal="medium">
+      <DxcInset horizontal="1.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = large" level={4} />
     <Container>
-      <DxcInset horizontal="large">
+      <DxcInset horizontal="2rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xlarge" level={4} />
     <Container>
-      <DxcInset horizontal="xlarge">
+      <DxcInset horizontal="3rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xxlarge" level={4} />
     <Container>
-      <DxcInset horizontal="xxlarge">
+      <DxcInset horizontal="4rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xxxlarge" level={4} />
     <Container>
-      <DxcInset horizontal="xxxlarge">
+      <DxcInset horizontal="5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = none" level={4} />
     <Container>
-      <DxcInset vertical="none">
+      <DxcInset vertical="0rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xxxsmall" level={4} />
     <Container>
-      <DxcInset vertical="xxxsmall">
+      <DxcInset vertical="0.125rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xxsmall" level={4} />
     <Container>
-      <DxcInset vertical="xxsmall">
+      <DxcInset vertical="0.25rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xsmall" level={4} />
     <Container>
-      <DxcInset vertical="xsmall">
+      <DxcInset vertical="0.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = small" level={4} />
     <Container>
-      <DxcInset vertical="small">
+      <DxcInset vertical="1rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = medium" level={4} />
     <Container>
-      <DxcInset vertical="medium">
+      <DxcInset vertical="1.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = large" level={4} />
     <Container>
-      <DxcInset vertical="large">
+      <DxcInset vertical="2rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xlarge" level={4} />
     <Container>
-      <DxcInset vertical="xlarge">
+      <DxcInset vertical="3rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xxlarge" level={4} />
     <Container>
-      <DxcInset vertical="xxlarge">
+      <DxcInset vertical="4rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xxxlarge" level={4} />
     <Container>
-      <DxcInset vertical="xxxlarge">
+      <DxcInset vertical="5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="top = xxsmall, right= medium, bottom = large and left = xxlarge" level={4} />
     <Container>
-      <DxcInset top="xxsmall" right="medium" bottom="large" left="xxlarge">
+      <DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
-    <Title title="Inside a stack" level={4} />
+    <Title title="Inside a flex column" level={4} />
     <Container>
-      <DxcStack gutter="medium" divider>
+      <DxcFlex direction="column" gap="1rem">
         <Placeholder></Placeholder>
-        <DxcInset top="xxsmall" right="medium" bottom="large" left="xxlarge">
+        <DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
           <Placeholder></Placeholder>
         </DxcInset>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
   </>
 );
@@ -225,5 +225,6 @@ const Placeholder = styled.div`
   min-height: 40px;
   min-width: 120px;
   border: 1px solid #a46ede;
+  border-radius: 0.5rem;
   background-color: #e5d5f6;
 `;

package/inset/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type Spacing = "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+declare type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
 declare type Props = {
     /**
      * Applies the spacing scale to all sides.

package/layout/ApplicationLayout.d.ts

@@ -1,11 +1,20 @@
-/// <reference types="react" />
-import AppLayoutPropsType, { AppLayoutSidenavPropsType, AppLayoutFooterPropsType, AppLayoutMainPropsType, AppLayoutHeaderPropsType } from "./types";
+import React from "react";
+import AppLayoutPropsType, { AppLayoutMainPropsType } from "./types";
 declare const DxcApplicationLayout: {
-    ({ visibilityToggleLabel, children }: AppLayoutPropsType): JSX.Element;
-    Header: ({ children }: AppLayoutHeaderPropsType) => JSX.Element;
+    ({ visibilityToggleLabel, header, sidenav, footer, children, }: AppLayoutPropsType): JSX.Element;
+    Header: {
+        ({ underlined, content, responsiveContent, onClick, margin, padding, tabIndex, }: import("../header/types").default): JSX.Element;
+        Dropdown: (props: import("../dropdown/types").default) => JSX.Element;
+    };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Footer: ({ children }: AppLayoutFooterPropsType) => JSX.Element;
-    SideNav: ({ ...childProps }: AppLayoutSidenavPropsType) => JSX.Element;
+    Footer: ({ socialLinks, bottomLinks, copyright, children, padding, margin, tabIndex, }: import("../footer/types").default) => JSX.Element;
+    SideNav: {
+        ({ title, children }: import("../sidenav/types").default): JSX.Element;
+        Section: ({ children }: import("../sidenav/types").SidenavSectionPropsType) => JSX.Element;
+        Group: ({ title, collapsable, icon, children }: import("../sidenav/types").SidenavGroupPropsType) => JSX.Element;
+        Link: React.ForwardRefExoticComponent<import("../sidenav/types").SidenavLinkPropsType & React.RefAttributes<HTMLAnchorElement>>;
+        Title: ({ children }: import("../sidenav/types").SidenavTitlePropsType) => JSX.Element;
+    };
     useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
 };
 export default DxcApplicationLayout;

package/layout/ApplicationLayout.js

@@ -13,8 +13,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _Header = _interopRequireDefault(require("../header/Header"));
@@ -25,17 +23,15 @@ var _Sidenav = _interopRequireDefault(require("../sidenav/Sidenav"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _Icons = require("./Icons");
 
-var _uuid = require("uuid");
-
 var _SidenavContext = require("./SidenavContext");
 
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -43,24 +39,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var year = new Date().getFullYear();
 
-var Header = function Header(_ref) {
+var Main = function Main(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
 };
 
-var Main = function Main(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
-};
-
-var Footer = function Footer(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
-};
-
-var Sidenav = function Sidenav(_ref4) {
-  var childProps = (0, _extends2["default"])({}, _ref4);
-  return /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], childProps, childProps.children);
+var defaultHeader = function defaultHeader() {
+  return /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+    underlined: true
+  });
 };
 
 var defaultFooter = function defaultFooter() {
@@ -89,47 +76,37 @@ var defaultFooter = function defaultFooter() {
   });
 };
 
-var defaultHeader = function defaultHeader() {
-  return /*#__PURE__*/_react["default"].createElement(_Header["default"], {
-    underlined: true
-  });
-};
-
 var childTypeExists = function childTypeExists(children, childType) {
   return children.find(function (child) {
     return (child === null || child === void 0 ? void 0 : child.type) === childType;
   });
 };
 
-var DxcApplicationLayout = function DxcApplicationLayout(_ref5) {
-  var _ref5$visibilityToggl = _ref5.visibilityToggleLabel,
-      visibilityToggleLabel = _ref5$visibilityToggl === void 0 ? "" : _ref5$visibilityToggl,
-      children = _ref5.children;
-
-  var _useState = (0, _react.useState)("appLayout-".concat((0, _uuid.v4)())),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      appLayoutId = _useState2[0];
+var DxcApplicationLayout = function DxcApplicationLayout(_ref2) {
+  var _ref2$visibilityToggl = _ref2.visibilityToggleLabel,
+      visibilityToggleLabel = _ref2$visibilityToggl === void 0 ? "" : _ref2$visibilityToggl,
+      header = _ref2.header,
+      sidenav = _ref2.sidenav,
+      footer = _ref2.footer,
+      children = _ref2.children;
 
-  var visibilityToggleLabelId = "label-".concat(appLayoutId);
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isSidenavVisibleResponsive = _useState2[0],
+      setIsSidenavVisibleResponsive = _useState2[1];
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isSidenavVisibleResponsive = _useState4[0],
-      setIsSidenavVisibleResponsive = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isResponsive = _useState6[0],
-      setIsResponsive = _useState6[1];
+      isResponsive = _useState4[0],
+      setIsResponsive = _useState4[1];
 
   var ref = (0, _react.useRef)(null);
   var translatedLabels = (0, _useTranslatedLabels["default"])();
 
   var childrenArray = _react["default"].Children.toArray(children);
 
-  var header = childTypeExists(childrenArray, _Header["default"]) || childTypeExists(childrenArray, Header) || defaultHeader();
-  var footer = childTypeExists(childrenArray, _Footer["default"]) || childTypeExists(childrenArray, Footer) || defaultFooter();
-  var sidenav = childTypeExists(childrenArray, Sidenav);
+  var headerContent = header || defaultHeader();
+  var footerContent = footer || defaultFooter();
   var main = childTypeExists(childrenArray, Main);
 
   var handleResize = function handleResize() {
@@ -142,58 +119,53 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref5) {
     });
   };
 
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     handleResize();
     window.addEventListener("resize", handleResize);
     return function () {
       window.removeEventListener("resize", handleResize);
     };
-  }, [setIsResponsive]);
+  }, []);
   (0, _react.useEffect)(function () {
     !isResponsive && setIsSidenavVisibleResponsive(false);
-  }, [isResponsive, setIsSidenavVisibleResponsive]);
+  }, [isResponsive]);
   return /*#__PURE__*/_react["default"].createElement(ApplicationLayoutContainer, {
     hasSidenav: sidenav ? true : false,
     isSidenavVisible: isSidenavVisibleResponsive,
     ref: ref
-  }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, header), sidenav && isResponsive && /*#__PURE__*/_react["default"].createElement(VisibilityToggle, null, /*#__PURE__*/_react["default"].createElement(HamburgerTrigger, {
+  }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, headerContent), sidenav && isResponsive && /*#__PURE__*/_react["default"].createElement(VisibilityToggle, null, /*#__PURE__*/_react["default"].createElement(HamburgerTrigger, {
     onClick: handleSidenavVisibility,
-    "aria-labelledby": visibilityToggleLabel ? visibilityToggleLabelId : undefined,
     "aria-label": visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle,
     title: translatedLabels.applicationLayout.visibilityToggleTitle
-  }, _Icons.hamburgerIcon), visibilityToggleLabel && /*#__PURE__*/_react["default"].createElement(VisibilityToggleLabel, {
-    id: visibilityToggleLabelId
-  }, visibilityToggleLabel)), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(_SidenavContext.SidenavContextProvider, {
+  }, _Icons.hamburgerIcon, visibilityToggleLabel)), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(_SidenavContext.SidenavContextProvider, {
     value: setIsSidenavVisibleResponsive
-  }, sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /*#__PURE__*/_react["default"].createElement(SidenavContainer, null, sidenav)), /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(MainContentContainer, null, main), footer)));
+  }, sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /*#__PURE__*/_react["default"].createElement(SidenavContainer, null, sidenav)), /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(MainContentContainer, null, main), footerContent)));
 };
 
 var ApplicationLayoutContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 64px;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  @media (max-width: ", "rem) {\n    ", ";\n    ", "\n  }\n"])), _variables.responsiveSizes.medium, function (props) {
-  return props.hasSidenav && "top: 112px";
+  return props.hasSidenav && "top: 116px";
 }, function (props) {
   return props.isSidenavVisible && "overflow: hidden;";
 });
 
 var HeaderContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 3;\n"])));
 
-var VisibilityToggle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 64px;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  gap: 10px;\n  width: 100%;\n  background-color: #f2f2f2;\n  user-select: none;\n  z-index: 2;\n"])));
-
-var HamburgerTrigger = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  border: 0px solid transparent;\n  border-radius: 2px;\n  padding: 3px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  cursor: pointer;\n\n  :hover {\n    background-color: #e6e6e6;\n  }\n  :active {\n    background-color: #cccccc;\n  }\n  :focus,\n  :focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  & > svg {\n    height: 20px;\n    width: 20px;\n  }\n"])));
+var VisibilityToggle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 64px;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 4px 16px;\n  width: 100%;\n  background-color: #f2f2f2;\n  user-select: none;\n  z-index: 2;\n"])));
 
-var VisibilityToggleLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: Open Sans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n"])));
+var HamburgerTrigger = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  border: 0px solid transparent;\n  border-radius: 2px;\n  padding: 12px 4px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  font-family: Open Sans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n  color: #000;\n  cursor: pointer;\n  :active {\n    background-color: #cccccc;\n  }\n  :focus,\n  :focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  & > svg {\n    height: 20px;\n    width: 20px;\n  }\n"])));
 
-var BodyContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n"])));
+var BodyContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n"])));
 
-var SidenavContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  position: sticky;\n  top: 64px;\n  display: flex;\n  height: calc(100vh - 64px);\n  z-index: 1;\n\n  @media (max-width: ", "rem) {\n    position: fixed;\n    top: 112px;\n  }\n"])), _variables.responsiveSizes.medium);
+var SidenavContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: sticky;\n  top: 64px;\n  display: flex;\n  height: calc(100vh - 64px);\n  z-index: 1;\n\n  @media (max-width: ", "rem) {\n    position: absolute;\n    top: 0px;\n    height: 100%;\n  }\n"])), _variables.responsiveSizes.medium);
 
-var MainContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
+var MainContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
 
-var MainContentContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n"])));
+var MainContentContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n"])));
 
-DxcApplicationLayout.Header = Header;
+DxcApplicationLayout.Header = _Header["default"];
 DxcApplicationLayout.Main = Main;
-DxcApplicationLayout.Footer = Footer;
-DxcApplicationLayout.SideNav = Sidenav;
+DxcApplicationLayout.Footer = _Footer["default"];
+DxcApplicationLayout.SideNav = _Sidenav["default"];
 DxcApplicationLayout.useResponsiveSidenavVisibility = _SidenavContext.useResponsiveSidenavVisibility;
 var _default = DxcApplicationLayout;
 exports["default"] = _default;