@digigov/ui 0.30.0-navlist.alpha.2 → 0.30.0

package/esm/layouts/Basic/__snapshots__/index.spec.tsx.snap

@@ -2,53 +2,88 @@
 
 exports[`renders the BasicLayout with Top, Content, Bottom, Main and Side children  1`] = `
 <ForwardRef(Layout)>
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
   >
-    <withDeprecationComponent>
+    <div
+      className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+    >
       <ForwardRef(Top)>
-        <div
+        <ForwardRef(Base)
+          as="div"
           className="govgr-top"
-        >
-          Header content
-        </div>
-      </ForwardRef(Top)>
-    </withDeprecationComponent>
-    <withDeprecationComponent>
-      <ForwardRef(Container)>
-        <div
-          className="govgr-width-container"
         >
           <div
-            className="govgr-main-wrapper"
+            className="govgr-top"
+          >
+            Header content
+          </div>
+        </ForwardRef(Base)>
+      </ForwardRef(Top)>
+      <withDeprecationComponent>
+        <ForwardRef(Container)>
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-width-container"
           >
-            <ForwardRef(Main)>
-              <main
-                className="govgr-grid-column-two-thirds"
+            <div
+              className="govgr-width-container"
+            >
+              <ForwardRef(Base)
+                as="div"
+                className="govgr-main-wrapper"
               >
-                Main content
-              </main>
-            </ForwardRef(Main)>
-            <withDeprecationComponent>
-              <ForwardRef(Aside)>
-                <aside
-                  className="govgr-grid-column-one-third"
+                <div
+                  className="govgr-main-wrapper"
                 >
-                  Side content
-                </aside>
-              </ForwardRef(Aside)>
-            </withDeprecationComponent>
+                  <ForwardRef(Main)>
+                    <ForwardRef(Base)
+                      as="main"
+                      className="govgr-grid-column-two-thirds"
+                      id="main-content"
+                    >
+                      <main
+                        className="govgr-grid-column-two-thirds"
+                        id="main-content"
+                      >
+                        Main content
+                      </main>
+                    </ForwardRef(Base)>
+                  </ForwardRef(Main)>
+                  <withDeprecationComponent>
+                    <ForwardRef(Aside)>
+                      <ForwardRef(Base)
+                        as="aside"
+                        className="govgr-grid-column-one-third"
+                      >
+                        <aside
+                          className="govgr-grid-column-one-third"
+                        >
+                          Side content
+                        </aside>
+                      </ForwardRef(Base)>
+                    </ForwardRef(Aside)>
+                  </withDeprecationComponent>
+                </div>
+              </ForwardRef(Base)>
+            </div>
+          </ForwardRef(Base)>
+        </ForwardRef(Container)>
+      </withDeprecationComponent>
+      <ForwardRef(Bottom)>
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-bottom"
+        >
+          <div
+            className="govgr-bottom"
+          >
+            Bottom content
           </div>
-        </div>
-      </ForwardRef(Container)>
-    </withDeprecationComponent>
-    <ForwardRef(Bottom)>
-      <div
-        className="govgr-bottom"
-      >
-        Bottom content
-      </div>
-    </ForwardRef(Bottom)>
-  </div>
+        </ForwardRef(Base)>
+      </ForwardRef(Bottom)>
+    </div>
+  </ForwardRef(Base)>
 </ForwardRef(Layout)>
 `;

package/esm/registry.js

@@ -31,6 +31,8 @@ import * as _digigov_ui_api_useResourceAction from '@digigov/ui/api/useResourceA
 import * as _digigov_ui_api_useResourceQuery from '@digigov/ui/api/useResourceQuery';
 import * as _digigov_ui_api_utils from '@digigov/ui/api/utils';
 import * as _digigov_ui_app_App from '@digigov/ui/app/App';
+import * as _digigov_ui_app_BottomInfoContainer from '@digigov/ui/app/BottomInfoContainer';
+import * as _digigov_ui_app_BottomInfoContent from '@digigov/ui/app/BottomInfoContent';
 import * as _digigov_ui_app_Confirmation from '@digigov/ui/app/Confirmation';
 import * as _digigov_ui_app_Footer from '@digigov/ui/app/Footer';
 import * as _digigov_ui_app_Header_HeaderContent from '@digigov/ui/app/Header/HeaderContent';
@@ -53,6 +55,7 @@ import * as _digigov_ui_app_QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 import * as _digigov_ui_app_QrCodeViewer_qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
 import * as _digigov_ui_app_QrCodeViewer_types from '@digigov/ui/app/QrCodeViewer/types';
 import * as _digigov_ui_app_QrCodeViewer_utils from '@digigov/ui/app/QrCodeViewer/utils';
+import * as _digigov_ui_app_ThemeSelectorOptions from '@digigov/ui/app/ThemeSelectorOptions';
 import * as _digigov_ui_core_Accordion from '@digigov/ui/core/Accordion';
 import * as _digigov_ui_core_BackLink from '@digigov/ui/core/BackLink';
 import * as _digigov_ui_core_Base from '@digigov/ui/core/Base';
@@ -88,16 +91,16 @@ import * as _digigov_ui_core_List_ListItemText from '@digigov/ui/core/List/ListI
 import * as _digigov_ui_core_List_ListItemTitle from '@digigov/ui/core/List/ListItemTitle';
 import * as _digigov_ui_core_Masthead from '@digigov/ui/core/Masthead';
 import * as _digigov_ui_core_NavList from '@digigov/ui/core/NavList';
-import * as _digigov_ui_core_NavList_NavHorizontal from '@digigov/ui/core/NavList/NavHorizontal';
-import * as _digigov_ui_core_NavList_NavHorizontalList from '@digigov/ui/core/NavList/NavHorizontalList';
-import * as _digigov_ui_core_NavList_NavHorizontalListItem from '@digigov/ui/core/NavList/NavHorizontalListItem';
-import * as _digigov_ui_core_NavList_NavHorizontalListItemButton from '@digigov/ui/core/NavList/NavHorizontalListItemButton';
-import * as _digigov_ui_core_NavList_NavHorizontalListItemLink from '@digigov/ui/core/NavList/NavHorizontalListItemLink';
+import * as _digigov_ui_core_NavList_Nav from '@digigov/ui/core/NavList/Nav';
 import * as _digigov_ui_core_NavList_NavList from '@digigov/ui/core/NavList/NavList';
+import * as _digigov_ui_core_NavList_NavListAuto from '@digigov/ui/core/NavList/NavListAuto';
 import * as _digigov_ui_core_NavList_NavListBase from '@digigov/ui/core/NavList/NavListBase';
 import * as _digigov_ui_core_NavList_NavListContext from '@digigov/ui/core/NavList/NavListContext';
 import * as _digigov_ui_core_NavList_NavListItem from '@digigov/ui/core/NavList/NavListItem';
+import * as _digigov_ui_core_NavList_NavListItemAuto from '@digigov/ui/core/NavList/NavListItemAuto';
 import * as _digigov_ui_core_NavList_NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
+import * as _digigov_ui_core_NavList_NavListItemButton from '@digigov/ui/core/NavList/NavListItemButton';
+import * as _digigov_ui_core_NavList_NavListItemLink from '@digigov/ui/core/NavList/NavListItemLink';
 import * as _digigov_ui_core_NavList_NavListSubMenu from '@digigov/ui/core/NavList/NavListSubMenu';
 import * as _digigov_ui_core_NavList_NavMenu from '@digigov/ui/core/NavList/NavMenu';
 import * as _digigov_ui_core_NavList_NavMenuContainer from '@digigov/ui/core/NavList/NavMenuContainer';
@@ -144,8 +147,10 @@ import * as _digigov_ui_govgr from '@digigov/ui/govgr';
 import * as _digigov_ui_hooks_useDebounce from '@digigov/ui/hooks/useDebounce';
 import * as _digigov_ui_hooks_useKeypress from '@digigov/ui/hooks/useKeypress';
 import * as _digigov_ui_hooks_useLatest from '@digigov/ui/hooks/useLatest';
+import * as _digigov_ui_hooks_useNavList from '@digigov/ui/hooks/useNavList';
 import * as _digigov_ui_hooks_useOutdatedBrowserCheck from '@digigov/ui/hooks/useOutdatedBrowserCheck';
 import * as _digigov_ui_hooks_useSearch from '@digigov/ui/hooks/useSearch';
+import * as _digigov_ui_hooks_useTheme from '@digigov/ui/hooks/useTheme';
 import * as _digigov_ui_hooks_useTogglableSections from '@digigov/ui/hooks/useTogglableSections';
 import * as _digigov_ui from '@digigov/ui';
 import * as _digigov_ui_layouts_Basic_Aside from '@digigov/ui/layouts/Basic/Aside';
@@ -226,6 +231,8 @@ export default {
   '@digigov/ui/api/useResourceQuery': lazyImport(_digigov_ui_api_useResourceQuery),
   '@digigov/ui/api/utils': lazyImport(_digigov_ui_api_utils),
   '@digigov/ui/app/App': lazyImport(_digigov_ui_app_App),
+  '@digigov/ui/app/BottomInfoContainer': lazyImport(_digigov_ui_app_BottomInfoContainer),
+  '@digigov/ui/app/BottomInfoContent': lazyImport(_digigov_ui_app_BottomInfoContent),
   '@digigov/ui/app/Confirmation': lazyImport(_digigov_ui_app_Confirmation),
   '@digigov/ui/app/Footer': lazyImport(_digigov_ui_app_Footer),
   '@digigov/ui/app/Header/HeaderContent': lazyImport(_digigov_ui_app_Header_HeaderContent),
@@ -248,6 +255,7 @@ export default {
   '@digigov/ui/app/QrCodeViewer/qrcodegen': lazyImport(_digigov_ui_app_QrCodeViewer_qrcodegen),
   '@digigov/ui/app/QrCodeViewer/types': lazyImport(_digigov_ui_app_QrCodeViewer_types),
   '@digigov/ui/app/QrCodeViewer/utils': lazyImport(_digigov_ui_app_QrCodeViewer_utils),
+  '@digigov/ui/app/ThemeSelectorOptions': lazyImport(_digigov_ui_app_ThemeSelectorOptions),
   '@digigov/ui/core/Accordion': lazyImport(_digigov_ui_core_Accordion),
   '@digigov/ui/core/BackLink': lazyImport(_digigov_ui_core_BackLink),
   '@digigov/ui/core/Base': lazyImport(_digigov_ui_core_Base),
@@ -283,16 +291,16 @@ export default {
   '@digigov/ui/core/List/ListItemTitle': lazyImport(_digigov_ui_core_List_ListItemTitle),
   '@digigov/ui/core/Masthead': lazyImport(_digigov_ui_core_Masthead),
   '@digigov/ui/core/NavList': lazyImport(_digigov_ui_core_NavList),
-  '@digigov/ui/core/NavList/NavHorizontal': lazyImport(_digigov_ui_core_NavList_NavHorizontal),
-  '@digigov/ui/core/NavList/NavHorizontalList': lazyImport(_digigov_ui_core_NavList_NavHorizontalList),
-  '@digigov/ui/core/NavList/NavHorizontalListItem': lazyImport(_digigov_ui_core_NavList_NavHorizontalListItem),
-  '@digigov/ui/core/NavList/NavHorizontalListItemButton': lazyImport(_digigov_ui_core_NavList_NavHorizontalListItemButton),
-  '@digigov/ui/core/NavList/NavHorizontalListItemLink': lazyImport(_digigov_ui_core_NavList_NavHorizontalListItemLink),
+  '@digigov/ui/core/NavList/Nav': lazyImport(_digigov_ui_core_NavList_Nav),
   '@digigov/ui/core/NavList/NavList': lazyImport(_digigov_ui_core_NavList_NavList),
+  '@digigov/ui/core/NavList/NavListAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto),
   '@digigov/ui/core/NavList/NavListBase': lazyImport(_digigov_ui_core_NavList_NavListBase),
   '@digigov/ui/core/NavList/NavListContext': lazyImport(_digigov_ui_core_NavList_NavListContext),
   '@digigov/ui/core/NavList/NavListItem': lazyImport(_digigov_ui_core_NavList_NavListItem),
+  '@digigov/ui/core/NavList/NavListItemAuto': lazyImport(_digigov_ui_core_NavList_NavListItemAuto),
   '@digigov/ui/core/NavList/NavListItemBase': lazyImport(_digigov_ui_core_NavList_NavListItemBase),
+  '@digigov/ui/core/NavList/NavListItemButton': lazyImport(_digigov_ui_core_NavList_NavListItemButton),
+  '@digigov/ui/core/NavList/NavListItemLink': lazyImport(_digigov_ui_core_NavList_NavListItemLink),
   '@digigov/ui/core/NavList/NavListSubMenu': lazyImport(_digigov_ui_core_NavList_NavListSubMenu),
   '@digigov/ui/core/NavList/NavMenu': lazyImport(_digigov_ui_core_NavList_NavMenu),
   '@digigov/ui/core/NavList/NavMenuContainer': lazyImport(_digigov_ui_core_NavList_NavMenuContainer),
@@ -339,8 +347,10 @@ export default {
   '@digigov/ui/hooks/useDebounce': lazyImport(_digigov_ui_hooks_useDebounce),
   '@digigov/ui/hooks/useKeypress': lazyImport(_digigov_ui_hooks_useKeypress),
   '@digigov/ui/hooks/useLatest': lazyImport(_digigov_ui_hooks_useLatest),
+  '@digigov/ui/hooks/useNavList': lazyImport(_digigov_ui_hooks_useNavList),
   '@digigov/ui/hooks/useOutdatedBrowserCheck': lazyImport(_digigov_ui_hooks_useOutdatedBrowserCheck),
   '@digigov/ui/hooks/useSearch': lazyImport(_digigov_ui_hooks_useSearch),
+  '@digigov/ui/hooks/useTheme': lazyImport(_digigov_ui_hooks_useTheme),
   '@digigov/ui/hooks/useTogglableSections': lazyImport(_digigov_ui_hooks_useTogglableSections),
   '@digigov/ui': lazyImport(_digigov_ui),
   '@digigov/ui/layouts/Basic/Aside': lazyImport(_digigov_ui_layouts_Basic_Aside),

package/govgr/Footer/Copyright.js

@@ -14,6 +14,8 @@ Object.defineProperty(exports, "CopyrightContainer", {
 });
 exports.getCopyright = exports["default"] = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _CopyrightContainer = _interopRequireDefault(require("@digigov/react-core/CopyrightContainer"));
@@ -22,6 +24,8 @@ var _app = require("@digigov/ui/app");
 
 var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
 
+var _excluded = ["copyright", "createdBy", "minDigitalCopyright", "children"];
+
 var getCopyright = function getCopyright() {
   var year = new Date().getFullYear();
   return "\xA9 Copyright ".concat(year, " - ");
@@ -33,7 +37,8 @@ var Copyright = function Copyright(_ref) {
   var copyright = _ref.copyright,
       createdBy = _ref.createdBy,
       minDigitalCopyright = _ref.minDigitalCopyright,
-      children = _ref.children;
+      children = _ref.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
   var _useTranslation = (0, _app.useTranslation)(),
       t = _useTranslation.t;
@@ -45,7 +50,7 @@ var Copyright = function Copyright(_ref) {
     url: 'https://grnet.gr',
     label: t('footer.grnet')
   };
-  return /*#__PURE__*/_react["default"].createElement(_CopyrightContainer["default"], null, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, copyright, createdBy || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, t('footer.created_by'), ' ', /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_CopyrightContainer["default"], props, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, copyright, createdBy || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, t('footer.created_by'), ' ', /*#__PURE__*/_react["default"].createElement(_Link["default"], {
     href: copyrightInfo.url,
     target: "_blank",
     rel: "noopener noreferrer"

package/hooks/useNavList.d.ts

@@ -0,0 +1,8 @@
+import { UseTogglableSectionsReturn } from '@digigov/ui/hooks/useTogglableSections';
+export interface UseNavListReturn extends UseTogglableSectionsReturn {
+    container: (key: string) => {
+        active: boolean;
+        id: string;
+    };
+}
+export declare const useNavList: () => UseNavListReturn;

package/hooks/useNavList.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavList = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("react");
+
+var _useTogglableSections2 = require("@digigov/ui/hooks/useTogglableSections");
+
+var _excluded = ["register", "opened"];
+
+var useNavList = function useNavList() {
+  var registeredContainers = (0, _react.useRef)({});
+
+  var _useTogglableSections = (0, _useTogglableSections2.useTogglableSections)({
+    singleOpen: true,
+    toggleOpenClose: true,
+    toggleProperty: 'active',
+    onToggleProperty: 'onClick',
+    ariaNavigation: true
+  }),
+      register = _useTogglableSections.register,
+      opened = _useTogglableSections.opened,
+      rest = (0, _objectWithoutProperties2["default"])(_useTogglableSections, _excluded);
+
+  var container = (0, _react.useCallback)(function (key) {
+    return {
+      ref: function ref(el) {
+        if (el && !registeredContainers.current[el.id]) {
+          registeredContainers.current[el.id] = el;
+        }
+      },
+      active: opened[key],
+      id: key
+    };
+  }, [opened]);
+  return (0, _extends2["default"])({
+    register: register,
+    opened: opened,
+    container: container
+  }, rest);
+};
+
+exports.useNavList = useNavList;

package/hooks/useTheme.d.ts

@@ -0,0 +1,8 @@
+export declare type ThemeSelectOptions = 'light' | 'dark' | 'auto';
+export declare type StoredThemeOptions = ThemeSelectOptions | null;
+export interface UseThemeResult {
+    theme: ThemeSelectOptions;
+    changeTheme: (selectedTheme: ThemeSelectOptions) => void;
+}
+export declare const useTheme: () => UseThemeResult;
+export default useTheme;

package/hooks/useTheme.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTheme = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+;
+
+var useTheme = function useTheme() {
+  var prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  var storedTheme = localStorage.getItem('theme');
+
+  var _useState = (0, _react.useState)(storedTheme || 'auto'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      theme = _useState2[0],
+      changeTheme = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (theme === 'auto') {
+      document.documentElement.className = prefersDarkScheme ? 'dark' : 'light';
+    } else {
+      document.documentElement.className = theme;
+    }
+
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+  (0, _react.useEffect)(function () {
+    var beforePrintListener = function beforePrintListener() {
+      document.documentElement.className = 'light';
+    };
+
+    var afterPrintListener = function afterPrintListener() {
+      document.documentElement.className = localStorage.getItem('theme') || theme;
+    };
+
+    window.addEventListener('beforeprint', beforePrintListener);
+    window.addEventListener('afterprint', afterPrintListener);
+    return function () {
+      window.removeEventListener('beforeprint', beforePrintListener);
+      window.removeEventListener('afterprint', afterPrintListener);
+    };
+  }, []);
+  return {
+    theme: theme,
+    changeTheme: changeTheme
+  };
+};
+
+exports.useTheme = useTheme;
+var _default = useTheme;
+exports["default"] = _default;

package/hooks/useTogglableSections.d.ts

@@ -1,7 +1,7 @@
 export interface UseTogglableSectionsInterface {
     toggleProperty: string;
     singleOpen?: boolean;
-    reOpen?: boolean;
+    toggleOpenClose?: boolean;
     onToggleProperty: string;
     initial?: Record<string, boolean>;
     firstOpen?: boolean;
@@ -17,4 +17,4 @@ export interface UseTogglableSectionsReturn {
     toggle: (id: string) => void;
     setOpened: (opened: ((curOpened: Record<string, boolean>) => Record<string, boolean>) | Record<string, boolean>) => void;
 }
-export declare function useTogglableSections({ toggleProperty, singleOpen, reOpen, onToggleProperty, initial, firstOpen, ariaNavigation, toggleHook, }: UseTogglableSectionsInterface): UseTogglableSectionsReturn;
+export declare function useTogglableSections({ toggleProperty, singleOpen, toggleOpenClose, onToggleProperty, initial, firstOpen, ariaNavigation, toggleHook, }: UseTogglableSectionsInterface): UseTogglableSectionsReturn;

package/hooks/useTogglableSections.js

@@ -19,7 +19,7 @@ var _react = require("react");
 function useTogglableSections(_ref) {
   var toggleProperty = _ref.toggleProperty,
       singleOpen = _ref.singleOpen,
-      reOpen = _ref.reOpen,
+      toggleOpenClose = _ref.toggleOpenClose,
       onToggleProperty = _ref.onToggleProperty,
       initial = _ref.initial,
       firstOpen = _ref.firstOpen,
@@ -55,7 +55,7 @@ function useTogglableSections(_ref) {
     e.preventDefault();
 
     if (singleOpen) {
-      if (reOpen) {
+      if (toggleOpenClose) {
         setOpened((0, _defineProperty2["default"])({}, key, !selected));
       } else {
         setOpened((0, _defineProperty2["default"])({}, key, true));

package/layouts/Basic/Content/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import Container from '@digigov/react-core/Container';
-export declare const Content: import("react").ForwardRefExoticComponent<Pick<import("@digigov/react-core/Container").ContainerProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "cols" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "fullWidth"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Content: import("react").ForwardRefExoticComponent<Pick<import("@digigov/react-core/Container").ContainerProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "cols" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "fullWidth"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Content;
 export { Container };

package/layouts/Basic/Side/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import Aside from '@digigov/react-core/Aside';
-export declare const Side: import("react").ForwardRefExoticComponent<Pick<import("@digigov/react-core/Aside").AsideProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden"> & import("react").RefAttributes<HTMLElement>>;
+export declare const Side: import("react").ForwardRefExoticComponent<Pick<import("@digigov/react-core/Aside").AsideProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden"> & import("react").RefAttributes<HTMLElement>>;
 export default Side;
 export { Aside };

package/layouts/Basic/__snapshots__/index.spec.tsx.snap

@@ -2,53 +2,88 @@
 
 exports[`renders the BasicLayout with Top, Content, Bottom, Main and Side children  1`] = `
 <ForwardRef(Layout)>
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
   >
-    <withDeprecationComponent>
+    <div
+      className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+    >
       <ForwardRef(Top)>
-        <div
+        <ForwardRef(Base)
+          as="div"
           className="govgr-top"
-        >
-          Header content
-        </div>
-      </ForwardRef(Top)>
-    </withDeprecationComponent>
-    <withDeprecationComponent>
-      <ForwardRef(Container)>
-        <div
-          className="govgr-width-container"
         >
           <div
-            className="govgr-main-wrapper"
+            className="govgr-top"
+          >
+            Header content
+          </div>
+        </ForwardRef(Base)>
+      </ForwardRef(Top)>
+      <withDeprecationComponent>
+        <ForwardRef(Container)>
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-width-container"
           >
-            <ForwardRef(Main)>
-              <main
-                className="govgr-grid-column-two-thirds"
+            <div
+              className="govgr-width-container"
+            >
+              <ForwardRef(Base)
+                as="div"
+                className="govgr-main-wrapper"
               >
-                Main content
-              </main>
-            </ForwardRef(Main)>
-            <withDeprecationComponent>
-              <ForwardRef(Aside)>
-                <aside
-                  className="govgr-grid-column-one-third"
+                <div
+                  className="govgr-main-wrapper"
                 >
-                  Side content
-                </aside>
-              </ForwardRef(Aside)>
-            </withDeprecationComponent>
+                  <ForwardRef(Main)>
+                    <ForwardRef(Base)
+                      as="main"
+                      className="govgr-grid-column-two-thirds"
+                      id="main-content"
+                    >
+                      <main
+                        className="govgr-grid-column-two-thirds"
+                        id="main-content"
+                      >
+                        Main content
+                      </main>
+                    </ForwardRef(Base)>
+                  </ForwardRef(Main)>
+                  <withDeprecationComponent>
+                    <ForwardRef(Aside)>
+                      <ForwardRef(Base)
+                        as="aside"
+                        className="govgr-grid-column-one-third"
+                      >
+                        <aside
+                          className="govgr-grid-column-one-third"
+                        >
+                          Side content
+                        </aside>
+                      </ForwardRef(Base)>
+                    </ForwardRef(Aside)>
+                  </withDeprecationComponent>
+                </div>
+              </ForwardRef(Base)>
+            </div>
+          </ForwardRef(Base)>
+        </ForwardRef(Container)>
+      </withDeprecationComponent>
+      <ForwardRef(Bottom)>
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-bottom"
+        >
+          <div
+            className="govgr-bottom"
+          >
+            Bottom content
           </div>
-        </div>
-      </ForwardRef(Container)>
-    </withDeprecationComponent>
-    <ForwardRef(Bottom)>
-      <div
-        className="govgr-bottom"
-      >
-        Bottom content
-      </div>
-    </ForwardRef(Bottom)>
-  </div>
+        </ForwardRef(Base)>
+      </ForwardRef(Bottom)>
+    </div>
+  </ForwardRef(Base)>
 </ForwardRef(Layout)>
 `;