@digigov/react-core 1.0.0-480e3d97 → 1.0.0-55e4210c

package/index.d.ts

@@ -76,17 +76,16 @@ export * from '@digigov/react-core/Masthead';
 export * from '@digigov/react-core/MastheadBody';
 export * from '@digigov/react-core/Nav';
 export * from '@digigov/react-core/NavList';
-export * from '@digigov/react-core/NavListItem';
+export * from '@digigov/react-core/NavListItemAction';
+export * from '@digigov/react-core/NavListItemActionContainer';
 export * from '@digigov/react-core/NavListItemLink';
 export * from '@digigov/react-core/NavListItemButton';
-export * from '@digigov/react-core/NavMenu';
 export * from '@digigov/react-core/NavMenuContainer';
-export * from '@digigov/react-core/NavMenuContainerContent';
-export * from '@digigov/react-core/NavMenuContainerContentList';
-export * from '@digigov/react-core/NavMenuContainerContentListItem';
-export * from '@digigov/react-core/NavMenuContainerTitle';
-export * from '@digigov/react-core/NavVertical';
-export * from '@digigov/react-core/NavVerticalItem';
+export * from '@digigov/react-core/NavMenuContent';
+export * from '@digigov/react-core/NavMenuContentListBase';
+export * from '@digigov/react-core/NavMenuContentListItem';
+export * from '@digigov/react-core/NavMenuTitle';
+export * from '@digigov/react-core/NavListItemAction';
 export * from '@digigov/react-core/NormalText';
 export * from '@digigov/react-core/NotificationBannerContainer';
 export * from '@digigov/react-core/NotificationBannerContent';
@@ -118,7 +117,6 @@ export * from '@digigov/react-core/SummaryListItemAction';
 export * from '@digigov/react-core/SummaryListItemKey';
 export * from '@digigov/react-core/SummaryListItemValue';
 export * from '@digigov/react-core/SvgIcon';
-export * from '@digigov/react-core/Icon';
 export * from '@digigov/react-core/Table';
 export * from '@digigov/react-core/TableBody';
 export * from '@digigov/react-core/TableCaption';

package/index.js

@@ -1005,54 +1005,54 @@ Object.keys(_NavList).forEach(function (key) {
   });
 });
 
-var _NavListItem = require("@digigov/react-core/NavListItem");
+var _NavListItemAction = require("@digigov/react-core/NavListItemAction");
 
-Object.keys(_NavListItem).forEach(function (key) {
+Object.keys(_NavListItemAction).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NavListItem[key]) return;
+  if (key in exports && exports[key] === _NavListItemAction[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavListItem[key];
+      return _NavListItemAction[key];
     }
   });
 });
 
-var _NavListItemLink = require("@digigov/react-core/NavListItemLink");
+var _NavListItemActionContainer = require("@digigov/react-core/NavListItemActionContainer");
 
-Object.keys(_NavListItemLink).forEach(function (key) {
+Object.keys(_NavListItemActionContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NavListItemLink[key]) return;
+  if (key in exports && exports[key] === _NavListItemActionContainer[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavListItemLink[key];
+      return _NavListItemActionContainer[key];
     }
   });
 });
 
-var _NavListItemButton = require("@digigov/react-core/NavListItemButton");
+var _NavListItemLink = require("@digigov/react-core/NavListItemLink");
 
-Object.keys(_NavListItemButton).forEach(function (key) {
+Object.keys(_NavListItemLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NavListItemButton[key]) return;
+  if (key in exports && exports[key] === _NavListItemLink[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavListItemButton[key];
+      return _NavListItemLink[key];
     }
   });
 });
 
-var _NavMenu = require("@digigov/react-core/NavMenu");
+var _NavListItemButton = require("@digigov/react-core/NavListItemButton");
 
-Object.keys(_NavMenu).forEach(function (key) {
+Object.keys(_NavListItemButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NavMenu[key]) return;
+  if (key in exports && exports[key] === _NavListItemButton[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavMenu[key];
+      return _NavListItemButton[key];
     }
   });
 });
@@ -1070,80 +1070,54 @@ Object.keys(_NavMenuContainer).forEach(function (key) {
   });
 });
 
-var _NavMenuContainerContent = require("@digigov/react-core/NavMenuContainerContent");
+var _NavMenuContent = require("@digigov/react-core/NavMenuContent");
 
-Object.keys(_NavMenuContainerContent).forEach(function (key) {
+Object.keys(_NavMenuContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NavMenuContainerContent[key]) return;
+  if (key in exports && exports[key] === _NavMenuContent[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavMenuContainerContent[key];
+      return _NavMenuContent[key];
     }
   });
 });
 
-var _NavMenuContainerContentList = require("@digigov/react-core/NavMenuContainerContentList");
+var _NavMenuContentListBase = require("@digigov/react-core/NavMenuContentListBase");
 
-Object.keys(_NavMenuContainerContentList).forEach(function (key) {
+Object.keys(_NavMenuContentListBase).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NavMenuContainerContentList[key]) return;
+  if (key in exports && exports[key] === _NavMenuContentListBase[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavMenuContainerContentList[key];
+      return _NavMenuContentListBase[key];
     }
   });
 });
 
-var _NavMenuContainerContentListItem = require("@digigov/react-core/NavMenuContainerContentListItem");
+var _NavMenuContentListItem = require("@digigov/react-core/NavMenuContentListItem");
 
-Object.keys(_NavMenuContainerContentListItem).forEach(function (key) {
+Object.keys(_NavMenuContentListItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NavMenuContainerContentListItem[key]) return;
+  if (key in exports && exports[key] === _NavMenuContentListItem[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavMenuContainerContentListItem[key];
+      return _NavMenuContentListItem[key];
     }
   });
 });
 
-var _NavMenuContainerTitle = require("@digigov/react-core/NavMenuContainerTitle");
+var _NavMenuTitle = require("@digigov/react-core/NavMenuTitle");
 
-Object.keys(_NavMenuContainerTitle).forEach(function (key) {
+Object.keys(_NavMenuTitle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NavMenuContainerTitle[key]) return;
+  if (key in exports && exports[key] === _NavMenuTitle[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavMenuContainerTitle[key];
-    }
-  });
-});
-
-var _NavVertical = require("@digigov/react-core/NavVertical");
-
-Object.keys(_NavVertical).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NavVertical[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _NavVertical[key];
-    }
-  });
-});
-
-var _NavVerticalItem = require("@digigov/react-core/NavVerticalItem");
-
-Object.keys(_NavVerticalItem).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NavVerticalItem[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _NavVerticalItem[key];
+      return _NavMenuTitle[key];
     }
   });
 });
@@ -1551,19 +1525,6 @@ Object.keys(_SvgIcon).forEach(function (key) {
   });
 });
 
-var _Icon = require("@digigov/react-core/Icon");
-
-Object.keys(_Icon).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Icon[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Icon[key];
-    }
-  });
-});
-
 var _Table = require("@digigov/react-core/Table");
 
 Object.keys(_Table).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/react-core",
-  "version": "1.0.0-480e3d97",
+  "version": "1.0.0-55e4210c",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -11,8 +11,8 @@
     "directory": "dist"
   },
   "peerDependencies": {
-    "@digigov/css": "1.0.0-480e3d97",
-    "@digigov/react-icons": "1.0.0-480e3d97",
+    "@digigov/css": "1.0.0-55e4210c",
+    "@digigov/react-icons": "1.0.0-55e4210c",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/registry.d.ts

@@ -122,7 +122,6 @@ declare var _default: {
     '@digigov/react-core/HellenicRepublicLogo/logo-inverted-en': {};
     '@digigov/react-core/Hidden': {};
     '@digigov/react-core/Hint': {};
-    '@digigov/react-core/Icon': {};
     '@digigov/react-core': {};
     '@digigov/react-core/KitchenSinkAllComponents': {};
     '@digigov/react-core/KitchenSinkCard': {};
@@ -150,17 +149,15 @@ declare var _default: {
     '@digigov/react-core/ModalHeading': {};
     '@digigov/react-core/Nav': {};
     '@digigov/react-core/NavList': {};
-    '@digigov/react-core/NavListItem': {};
+    '@digigov/react-core/NavListItemAction': {};
+    '@digigov/react-core/NavListItemActionContainer': {};
     '@digigov/react-core/NavListItemButton': {};
     '@digigov/react-core/NavListItemLink': {};
-    '@digigov/react-core/NavMenu': {};
     '@digigov/react-core/NavMenuContainer': {};
-    '@digigov/react-core/NavMenuContainerContent': {};
-    '@digigov/react-core/NavMenuContainerContentList': {};
-    '@digigov/react-core/NavMenuContainerContentListItem': {};
-    '@digigov/react-core/NavMenuContainerTitle': {};
-    '@digigov/react-core/NavVertical': {};
-    '@digigov/react-core/NavVerticalItem': {};
+    '@digigov/react-core/NavMenuContent': {};
+    '@digigov/react-core/NavMenuContentListBase': {};
+    '@digigov/react-core/NavMenuContentListItem': {};
+    '@digigov/react-core/NavMenuTitle': {};
     '@digigov/react-core/NormalText': {};
     '@digigov/react-core/NotificationBannerContainer': {};
     '@digigov/react-core/NotificationBannerContent': {};

package/registry.js

@@ -253,8 +253,6 @@ var _digigov_react_core_Hidden = _interopRequireWildcard(require("@digigov/react
 
 var _digigov_react_core_Hint = _interopRequireWildcard(require("@digigov/react-core/Hint"));
 
-var _digigov_react_core_Icon = _interopRequireWildcard(require("@digigov/react-core/Icon"));
-
 var _digigov_react_core = _interopRequireWildcard(require("@digigov/react-core"));
 
 var _digigov_react_core_KitchenSinkAllComponents = _interopRequireWildcard(require("@digigov/react-core/KitchenSinkAllComponents"));
@@ -309,27 +307,23 @@ var _digigov_react_core_Nav = _interopRequireWildcard(require("@digigov/react-co
 
 var _digigov_react_core_NavList = _interopRequireWildcard(require("@digigov/react-core/NavList"));
 
-var _digigov_react_core_NavListItem = _interopRequireWildcard(require("@digigov/react-core/NavListItem"));
+var _digigov_react_core_NavListItemAction = _interopRequireWildcard(require("@digigov/react-core/NavListItemAction"));
+
+var _digigov_react_core_NavListItemActionContainer = _interopRequireWildcard(require("@digigov/react-core/NavListItemActionContainer"));
 
 var _digigov_react_core_NavListItemButton = _interopRequireWildcard(require("@digigov/react-core/NavListItemButton"));
 
 var _digigov_react_core_NavListItemLink = _interopRequireWildcard(require("@digigov/react-core/NavListItemLink"));
 
-var _digigov_react_core_NavMenu = _interopRequireWildcard(require("@digigov/react-core/NavMenu"));
-
 var _digigov_react_core_NavMenuContainer = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainer"));
 
-var _digigov_react_core_NavMenuContainerContent = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainerContent"));
-
-var _digigov_react_core_NavMenuContainerContentList = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainerContentList"));
-
-var _digigov_react_core_NavMenuContainerContentListItem = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainerContentListItem"));
+var _digigov_react_core_NavMenuContent = _interopRequireWildcard(require("@digigov/react-core/NavMenuContent"));
 
-var _digigov_react_core_NavMenuContainerTitle = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainerTitle"));
+var _digigov_react_core_NavMenuContentListBase = _interopRequireWildcard(require("@digigov/react-core/NavMenuContentListBase"));
 
-var _digigov_react_core_NavVertical = _interopRequireWildcard(require("@digigov/react-core/NavVertical"));
+var _digigov_react_core_NavMenuContentListItem = _interopRequireWildcard(require("@digigov/react-core/NavMenuContentListItem"));
 
-var _digigov_react_core_NavVerticalItem = _interopRequireWildcard(require("@digigov/react-core/NavVerticalItem"));
+var _digigov_react_core_NavMenuTitle = _interopRequireWildcard(require("@digigov/react-core/NavMenuTitle"));
 
 var _digigov_react_core_NormalText = _interopRequireWildcard(require("@digigov/react-core/NormalText"));
 
@@ -648,7 +642,6 @@ var _default = {
   '@digigov/react-core/HellenicRepublicLogo/logo-inverted-en': lazyImport(_digigov_react_core_HellenicRepublicLogo_logo_inverted_en),
   '@digigov/react-core/Hidden': lazyImport(_digigov_react_core_Hidden),
   '@digigov/react-core/Hint': lazyImport(_digigov_react_core_Hint),
-  '@digigov/react-core/Icon': lazyImport(_digigov_react_core_Icon),
   '@digigov/react-core': lazyImport(_digigov_react_core),
   '@digigov/react-core/KitchenSinkAllComponents': lazyImport(_digigov_react_core_KitchenSinkAllComponents),
   '@digigov/react-core/KitchenSinkCard': lazyImport(_digigov_react_core_KitchenSinkCard),
@@ -676,17 +669,15 @@ var _default = {
   '@digigov/react-core/ModalHeading': lazyImport(_digigov_react_core_ModalHeading),
   '@digigov/react-core/Nav': lazyImport(_digigov_react_core_Nav),
   '@digigov/react-core/NavList': lazyImport(_digigov_react_core_NavList),
-  '@digigov/react-core/NavListItem': lazyImport(_digigov_react_core_NavListItem),
+  '@digigov/react-core/NavListItemAction': lazyImport(_digigov_react_core_NavListItemAction),
+  '@digigov/react-core/NavListItemActionContainer': lazyImport(_digigov_react_core_NavListItemActionContainer),
   '@digigov/react-core/NavListItemButton': lazyImport(_digigov_react_core_NavListItemButton),
   '@digigov/react-core/NavListItemLink': lazyImport(_digigov_react_core_NavListItemLink),
-  '@digigov/react-core/NavMenu': lazyImport(_digigov_react_core_NavMenu),
   '@digigov/react-core/NavMenuContainer': lazyImport(_digigov_react_core_NavMenuContainer),
-  '@digigov/react-core/NavMenuContainerContent': lazyImport(_digigov_react_core_NavMenuContainerContent),
-  '@digigov/react-core/NavMenuContainerContentList': lazyImport(_digigov_react_core_NavMenuContainerContentList),
-  '@digigov/react-core/NavMenuContainerContentListItem': lazyImport(_digigov_react_core_NavMenuContainerContentListItem),
-  '@digigov/react-core/NavMenuContainerTitle': lazyImport(_digigov_react_core_NavMenuContainerTitle),
-  '@digigov/react-core/NavVertical': lazyImport(_digigov_react_core_NavVertical),
-  '@digigov/react-core/NavVerticalItem': lazyImport(_digigov_react_core_NavVerticalItem),
+  '@digigov/react-core/NavMenuContent': lazyImport(_digigov_react_core_NavMenuContent),
+  '@digigov/react-core/NavMenuContentListBase': lazyImport(_digigov_react_core_NavMenuContentListBase),
+  '@digigov/react-core/NavMenuContentListItem': lazyImport(_digigov_react_core_NavMenuContentListItem),
+  '@digigov/react-core/NavMenuTitle': lazyImport(_digigov_react_core_NavMenuTitle),
   '@digigov/react-core/NormalText': lazyImport(_digigov_react_core_NormalText),
   '@digigov/react-core/NotificationBannerContainer': lazyImport(_digigov_react_core_NotificationBannerContainer),
   '@digigov/react-core/NotificationBannerContent': lazyImport(_digigov_react_core_NotificationBannerContent),

package/src/Accordion/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the Accordion with no props 1`] = `
 <ForwardRef(Accordion)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-accordion"
+    className="govgr-accordion--border-top govgr-accordion"
   >
     <div
-      className="govgr-accordion"
+      className="govgr-accordion--border-top govgr-accordion"
     >
       hello
     </div>

package/src/AdminContainer/__snapshots__/index.test.tsx.snap

@@ -2,19 +2,29 @@
 
 exports[`renders the AdminContainer with no props 1`] = `
 <ForwardRef(AdminContainer)>
-  <ForwardRef(Base)
-    as="div"
-    className="govgr-admin-width-container"
+  <ForwardRef(Container)
+    fullWidth={true}
+    grid={false}
   >
-    <div
-      className="govgr-admin-width-container"
+    <ForwardRef(Grid)
+      className="govgr-container--full-width govgr-container"
+      container={false}
     >
-      <div
-        className="govgr-admin-main-wrapper"
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-container--full-width govgr-container"
       >
-        hello
-      </div>
-    </div>
-  </ForwardRef(Base)>
+        <div
+          className="govgr-container--full-width govgr-container"
+        >
+          <div
+            className="govgr-admin-main-wrapper"
+          >
+            hello
+          </div>
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
+  </ForwardRef(Container)>
 </ForwardRef(AdminContainer)>
 `;

package/src/AdminContainer/index.tsx

@@ -1,23 +1,22 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface AdminContainerProps extends BaseProps<'div'> {}
+export interface AdminContainerProps extends Omit<ContainerProps, 'grid'> { }
 /**
  * AdminContainer is a wrapper for the content of the page
- * Use AdminContainer isnide AdminLayout component
+ * Use AdminContainer inside AdminLayout component
  */
 export const AdminContainer = React.forwardRef<
   HTMLDivElement,
   AdminContainerProps
 >(function AdminContainer({ className, children, ...props }, ref) {
   return (
-    <Base
-      as="div"
+    <Container
       ref={ref}
-      className={clsx(className, {
-        'govgr-admin-width-container': true,
-      })}
+      fullWidth={true}
+      grid={false}
+      className={className}
       {...props}
     >
       <div
@@ -27,8 +26,8 @@ export const AdminContainer = React.forwardRef<
       >
         {children}
       </div>
-    </Base>
+    </Container>
   );
 });
 
-export default AdminContainer;
+export default AdminContainer;

package/src/Aside/__snapshots__/index.test.tsx.snap

@@ -2,15 +2,24 @@
 
 exports[`renders the Aside with no props 1`] = `
 <ForwardRef(Aside)>
-  <ForwardRef(Base)
+  <ForwardRef(Grid)
     as="aside"
-    className="govgr-aside govgr-grid-column-one-third"
+    className="govgr-aside"
+    item={true}
+    md={4}
+    spacing={4}
+    xs={12}
   >
-    <aside
-      className="govgr-aside govgr-grid-column-one-third"
+    <ForwardRef(Base)
+      as="aside"
+      className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
     >
-      hello
-    </aside>
-  </ForwardRef(Base)>
+      <aside
+        className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
+      >
+        hello
+      </aside>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Aside)>
 `;

package/src/Aside/index.tsx

@@ -1,28 +1,31 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface AsideProps extends BaseProps<'aside'> {}
+export interface AsideProps extends GridProps {}
 /**
- * Use this inside the Content component for additional content
- * that will be shown on the left one third of the page
+ * Use this inside the Container component for additional content.
+ * that will be shown on the left one third of the page.
  */
 export const Aside = React.forwardRef<HTMLElement, AsideProps>(function Aside(
   { className, children, ...props },
   ref
 ) {
   return (
-    <Base
+    <Grid
+      item
+      xs={12}
+      md={4}
+      spacing={4}
       as="aside"
       ref={ref}
       className={clsx(className, {
         'govgr-aside': true,
-        'govgr-grid-column-one-third': true,
       })}
       {...props}
     >
       {children}
-    </Base>
+    </Grid>
   );
 });
 

package/src/Base/index.tsx

@@ -57,6 +57,8 @@ export type BaseProps<
     printHidden?: boolean;
     /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
     printVisible?: 'block' | 'inline';
+    /** Components will be hidden at all screen sizes. */
+    hidden?: boolean;
     /** Components will be hidden from 'xs' screen size and up. */
     xsUpHidden?: boolean;
     /** Components will be hidden from 'sm' screen size and up. */
@@ -104,6 +106,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
     paddingRight,
     printHidden,
     printVisible,
+    hidden,
     xsUpHidden,
     smUpHidden,
     mdUpHidden,
@@ -143,6 +146,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
         'govgr-print-hidden': !!printHidden,
         'govgr-print-visible-block': printVisible === 'block',
         'govgr-print-visible-inline': printVisible === 'inline',
+        'govgr-hidden': !!hidden,
         'govgr-hidden-xs--up': !!xsUpHidden,
         'govgr-hidden-sm--up': !!smUpHidden,
         'govgr-hidden-md--up': !!mdUpHidden,

package/src/BottomInfo/__snapshots__/index.test.tsx.snap

@@ -5,25 +5,21 @@ exports[`renders the BottomInfo with no props 1`] = `
   <ForwardRef(Container)
     className="govgr-bottom-info"
   >
-    <ForwardRef(Base)
-      as="div"
+    <ForwardRef(Grid)
       className="govgr-bottom-info govgr-container"
+      container={true}
     >
-      <div
-        className="govgr-bottom-info govgr-container"
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-bottom-info govgr-container govgr-grid"
       >
-        <ForwardRef(Base)
-          as="div"
-          className="govgr-main-wrapper"
+        <div
+          className="govgr-bottom-info govgr-container govgr-grid"
         >
-          <div
-            className="govgr-main-wrapper"
-          >
-            hello
-          </div>
-        </ForwardRef(Base)>
-      </div>
-    </ForwardRef(Base)>
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
   </ForwardRef(Container)>
 </ForwardRef(BottomInfo)>
 `;

package/src/BottomInfoContainer/__snapshots__/index.test.tsx.snap

@@ -5,25 +5,21 @@ exports[`renders the BottomInfoContainer with no props 1`] = `
   <ForwardRef(Container)
     className="govgr-bottom-info__container"
   >
-    <ForwardRef(Base)
-      as="div"
+    <ForwardRef(Grid)
       className="govgr-bottom-info__container govgr-container"
+      container={true}
     >
-      <div
-        className="govgr-bottom-info__container govgr-container"
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-bottom-info__container govgr-container govgr-grid"
       >
-        <ForwardRef(Base)
-          as="div"
-          className="govgr-main-wrapper"
+        <div
+          className="govgr-bottom-info__container govgr-container govgr-grid"
         >
-          <div
-            className="govgr-main-wrapper"
-          >
-            hello
-          </div>
-        </ForwardRef(Base)>
-      </div>
-    </ForwardRef(Base)>
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
   </ForwardRef(Container)>
 </ForwardRef(BottomInfoContainer)>
 `;

package/src/BottomInfoContent/__snapshots__/index.test.tsx.snap

@@ -5,17 +5,14 @@ exports[`renders the BottomInfoContent with no props 1`] = `
   <ForwardRef(Grid)
     className="govgr-bottom-info__content"
     item={true}
-    lg={3}
-    md={3}
-    xl={3}
-    xs={3}
+    xs={12}
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-bottom-info__content xs:govgr-grid__col-span-3 md:govgr-grid__col-span-3 lg:govgr-grid__col-span-3 xl:govgr-grid__col-span-3"
+      className="govgr-bottom-info__content xs:govgr-grid__col-span-12"
     >
       <div
-        className="govgr-bottom-info__content xs:govgr-grid__col-span-3 md:govgr-grid__col-span-3 lg:govgr-grid__col-span-3 xl:govgr-grid__col-span-3"
+        className="govgr-bottom-info__content xs:govgr-grid__col-span-12"
       >
         hello
       </div>