@digigov/react-core 1.0.0-480e3d97 → 1.0.0-60addd4a

package/es/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/es/AdminContainer/index.js

@@ -3,21 +3,22 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "children"];
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Container from '@digigov/react-core/Container';
 
 /**
  * AdminContainer is a wrapper for the content of the page
- * Use AdminContainer isnide AdminLayout component
+ * Use AdminContainer inside AdminLayout component
  */
 export var AdminContainer = /*#__PURE__*/React.forwardRef(function AdminContainer(_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "div",
+  return /*#__PURE__*/React.createElement(Container, _extends({
     ref: ref,
-    className: clsx(className, true && 'govgr-admin-width-container')
+    fullWidth: true,
+    grid: false,
+    className: className
   }, props), /*#__PURE__*/React.createElement("div", {
     className: clsx(true && 'govgr-admin-main-wrapper')
   }, children));

package/es/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/es/Aside/index.js

@@ -3,21 +3,25 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "children"];
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Grid from '@digigov/react-core/Grid';
 
 /**
- * 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 var Aside = /*#__PURE__*/React.forwardRef(function Aside(_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Grid, _extends({
+    item: true,
+    xs: 12,
+    md: 4,
+    spacing: 4,
     as: "aside",
     ref: ref,
-    className: clsx(className, true && ['govgr-aside', 'govgr-grid-column-one-third'])
+    className: clsx(className, true && 'govgr-aside')
   }, props), children);
 });
 export default Aside;

package/es/Base/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "printHidden", "printVisible", "xsUpHidden", "smUpHidden", "mdUpHidden", "lgUpHidden", "xlUpHidden", "xsHidden", "smHidden", "mdHidden", "lgHidden", "xlHidden", "children", "className"];
+var _excluded = ["as", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "printHidden", "printVisible", "hidden", "xsUpHidden", "smUpHidden", "mdUpHidden", "lgUpHidden", "xlUpHidden", "xsHidden", "smHidden", "mdHidden", "lgHidden", "xlHidden", "children", "className"];
 import React from 'react';
 import clsx from 'clsx';
 export var Base = /*#__PURE__*/React.forwardRef(function Base(_ref, ref) {
@@ -17,6 +17,7 @@ export var Base = /*#__PURE__*/React.forwardRef(function Base(_ref, ref) {
       paddingRight = _ref.paddingRight,
       printHidden = _ref.printHidden,
       printVisible = _ref.printVisible,
+      hidden = _ref.hidden,
       xsUpHidden = _ref.xsUpHidden,
       smUpHidden = _ref.smUpHidden,
       mdUpHidden = _ref.mdUpHidden,
@@ -33,7 +34,7 @@ export var Base = /*#__PURE__*/React.forwardRef(function Base(_ref, ref) {
 
   var Component = as || 'span';
   return /*#__PURE__*/React.createElement(Component, _extends({
-    className: clsx(className, (paddingBottom !== undefined ? true : undefined) && "govgr-pb-".concat(paddingBottom), (marginBottom !== undefined ? true : undefined) && "govgr-mb-".concat(marginBottom), (paddingRight !== undefined ? true : undefined) && "govgr-pr-".concat(paddingRight), (marginRight !== undefined ? true : undefined) && "govgr-mr-".concat(marginRight), (paddingLeft !== undefined ? true : undefined) && "govgr-pl-".concat(paddingLeft), (marginLeft !== undefined ? true : undefined) && "govgr-ml-".concat(marginLeft), (paddingTop !== undefined ? true : undefined) && "govgr-pt-".concat(paddingTop), (marginTop !== undefined ? true : undefined) && "govgr-mt-".concat(marginTop), (padding !== undefined ? true : undefined) && "govgr-p-".concat(padding), (margin !== undefined ? true : undefined) && "govgr-m-".concat(margin), printVisible === 'inline' && 'govgr-print-visible-inline', printVisible === 'block' && 'govgr-print-visible-block', !!printHidden && 'govgr-print-hidden', !!xsUpHidden && 'govgr-hidden-xs--up', !!smUpHidden && 'govgr-hidden-sm--up', !!mdUpHidden && 'govgr-hidden-md--up', !!lgUpHidden && 'govgr-hidden-lg--up', !!xlUpHidden && 'govgr-hidden-xl--up', !!xsHidden && 'govgr-hidden-xs', !!smHidden && 'govgr-hidden-sm', !!mdHidden && 'govgr-hidden-md', !!lgHidden && 'govgr-hidden-lg', !!xlHidden && 'govgr-hidden-xl'),
+    className: clsx(className, (paddingBottom !== undefined ? true : undefined) && "govgr-pb-".concat(paddingBottom), (marginBottom !== undefined ? true : undefined) && "govgr-mb-".concat(marginBottom), (paddingRight !== undefined ? true : undefined) && "govgr-pr-".concat(paddingRight), (marginRight !== undefined ? true : undefined) && "govgr-mr-".concat(marginRight), (paddingLeft !== undefined ? true : undefined) && "govgr-pl-".concat(paddingLeft), (marginLeft !== undefined ? true : undefined) && "govgr-ml-".concat(marginLeft), (paddingTop !== undefined ? true : undefined) && "govgr-pt-".concat(paddingTop), (marginTop !== undefined ? true : undefined) && "govgr-mt-".concat(marginTop), (padding !== undefined ? true : undefined) && "govgr-p-".concat(padding), (margin !== undefined ? true : undefined) && "govgr-m-".concat(margin), printVisible === 'inline' && 'govgr-print-visible-inline', printVisible === 'block' && 'govgr-print-visible-block', !!printHidden && 'govgr-print-hidden', !!xsUpHidden && 'govgr-hidden-xs--up', !!smUpHidden && 'govgr-hidden-sm--up', !!mdUpHidden && 'govgr-hidden-md--up', !!lgUpHidden && 'govgr-hidden-lg--up', !!xlUpHidden && 'govgr-hidden-xl--up', !!xsHidden && 'govgr-hidden-xs', !!smHidden && 'govgr-hidden-sm', !!mdHidden && 'govgr-hidden-md', !!lgHidden && 'govgr-hidden-lg', !!xlHidden && 'govgr-hidden-xl', !!hidden && 'govgr-hidden'),
     ref: ref
   }, props), children);
 });

package/es/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/es/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/es/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>

package/es/BottomInfoContent/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "xs", "md", "lg", "xl", "children"];
+var _excluded = ["className", "xs", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Grid from '@digigov/react-core/Grid';
@@ -11,22 +11,13 @@ import Grid from '@digigov/react-core/Grid';
 export var BottomInfoContent = /*#__PURE__*/React.forwardRef(function BottomInfoContent(_ref, ref) {
   var className = _ref.className,
       _ref$xs = _ref.xs,
-      xs = _ref$xs === void 0 ? 3 : _ref$xs,
-      _ref$md = _ref.md,
-      md = _ref$md === void 0 ? 3 : _ref$md,
-      _ref$lg = _ref.lg,
-      lg = _ref$lg === void 0 ? 3 : _ref$lg,
-      _ref$xl = _ref.xl,
-      xl = _ref$xl === void 0 ? 3 : _ref$xl,
+      xs = _ref$xs === void 0 ? 12 : _ref$xs,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Grid, _extends({
     item: true,
     xs: xs,
-    md: md,
-    lg: lg,
-    xl: xl,
     ref: ref,
     className: clsx(className, true && 'govgr-bottom-info__content')
   }, props), children);

package/es/ChipHeading/__snapshots__/index.test.tsx.snap

@@ -6,16 +6,21 @@ exports[`renders the ChipHeading with no props 1`] = `
     element="h2"
     size="xs"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-heading-xs"
     >
-      <h2
+      <ForwardRef(Base)
+        as="h2"
         className="govgr-heading-xs"
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-heading-xs"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(ChipHeading)>
 `;

package/es/CircularProgress/__snapshots__/index.test.tsx.snap

@@ -16,11 +16,11 @@ exports[`renders the CircularProgress 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -47,11 +47,11 @@ exports[`renders the CircularProgress with color=secondary and size lg props 1`]
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -78,11 +78,11 @@ exports[`renders the CircularProgress with color=secondary and size sm props 1`]
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -108,11 +108,11 @@ exports[`renders the CircularProgress with color=secondary prop 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -138,11 +138,11 @@ exports[`renders the CircularProgress with size lg 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -168,11 +168,11 @@ exports[`renders the CircularProgress with size sm 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>

package/es/CircularProgress/index.js

@@ -6,12 +6,12 @@ import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
 
 var _ref2 = /*#__PURE__*/React.createElement("path", {
-  className: "govgr-loader__circle govgr-loader__circle--1",
+  className: "govgr-circular-progress__circle govgr-circular-progress__circle--1",
   d: "M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
 });
 
 var _ref3 = /*#__PURE__*/React.createElement("path", {
-  className: "govgr-loader__circle govgr-loader__circle--2",
+  className: "govgr-circular-progress__circle govgr-circular-progress__circle--2",
   d: "M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
 });
 

package/es/Container/__snapshots__/index.test.tsx.snap

@@ -5,25 +5,21 @@ exports[`renders the Container with cols={false} prop 1`] = `
   fullWidth={true}
   grid={false}
 >
-  <ForwardRef(Base)
-    as="div"
+  <ForwardRef(Grid)
     className="govgr-container--full-width govgr-container"
+    container={false}
   >
-    <div
+    <ForwardRef(Base)
+      as="div"
       className="govgr-container--full-width govgr-container"
     >
-      <ForwardRef(Base)
-        as="div"
-        className=""
+      <div
+        className="govgr-container--full-width govgr-container"
       >
-        <div
-          className=""
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;
 
@@ -31,48 +27,40 @@ exports[`renders the Container with fullWidth prop 1`] = `
 <ForwardRef(Container)
   fullWidth={true}
 >
-  <ForwardRef(Base)
-    as="div"
+  <ForwardRef(Grid)
     className="govgr-container--full-width govgr-container"
+    container={true}
   >
-    <div
-      className="govgr-container--full-width govgr-container"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-container--full-width govgr-container govgr-grid"
     >
-      <ForwardRef(Base)
-        as="div"
-        className="govgr-main-wrapper"
+      <div
+        className="govgr-container--full-width govgr-container govgr-grid"
       >
-        <div
-          className="govgr-main-wrapper"
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;
 
 exports[`renders the Container with no props 1`] = `
 <ForwardRef(Container)>
-  <ForwardRef(Base)
-    as="div"
+  <ForwardRef(Grid)
     className="govgr-container"
+    container={true}
   >
-    <div
-      className="govgr-container"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-container govgr-grid"
     >
-      <ForwardRef(Base)
-        as="div"
-        className="govgr-main-wrapper"
+      <div
+        className="govgr-container govgr-grid"
       >
-        <div
-          className="govgr-main-wrapper"
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;

package/es/Container/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["grid", "fullWidth", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Grid from '@digigov/react-core/Grid';
 
 /**
  * Use Container as a wrapper.
@@ -17,13 +17,13 @@ export var Container = /*#__PURE__*/React.forwardRef(function Container(_ref, re
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "div",
+  return /*#__PURE__*/React.createElement(Grid, _extends({
+    container: grid,
+    spacing: grid ? {
+      sm: 12
+    } : undefined,
     ref: ref,
     className: clsx(className, fullWidth && 'govgr-container--full-width', true && 'govgr-container')
-  }, props), /*#__PURE__*/React.createElement(Base, {
-    as: "div",
-    className: clsx(grid && 'govgr-main-wrapper')
-  }, children));
+  }, props), children);
 });
 export default Container;

package/es/Drawer/__snapshots__/index.test.tsx.snap

@@ -14,16 +14,21 @@ exports[`renders the Drawer with \`open=true\` \`left=true\` props 1`] = `
     >
       <div>
         <ForwardRef(Heading)>
-          <ForwardRef(Base)
+          <ForwardRef(Typography)
             as="h1"
             className="govgr-heading-xl"
           >
-            <h1
+            <ForwardRef(Base)
+              as="h1"
               className="govgr-heading-xl"
             >
-              Menu
-            </h1>
-          </ForwardRef(Base)>
+              <h1
+                className="govgr-heading-xl"
+              >
+                Menu
+              </h1>
+            </ForwardRef(Base)>
+          </ForwardRef(Typography)>
         </ForwardRef(Heading)>
         <CloseIcon
           className="govgr--drawer__close-icon"

package/es/DropdownContent/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the DropdownContent with no props 1`] = `
 <ForwardRef(DropdownContent)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-dropdown__content"
+    className="govgr-dropdown__content--full-width govgr-dropdown__content"
   >
     <div
-      className="govgr-dropdown__content"
+      className="govgr-dropdown__content--full-width govgr-dropdown__content"
     >
       hello
     </div>

package/es/FooterContainer/__snapshots__/index.test.tsx.snap

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