@digigov/react-core 1.0.0-002c630d → 1.0.0-480e3d97

package/esm/FooterInfoSection/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FooterInfoSection with grow=false 1`] = `
+<ForwardRef(FooterInfoSection)
+  grow={false}
+>
+  <ForwardRef(Base)
+    as="section"
+    className="govgr-footer__info-section"
+  >
+    <section
+      className="govgr-footer__info-section"
+    >
+      hello
+    </section>
+  </ForwardRef(Base)>
+</ForwardRef(FooterInfoSection)>
+`;
+
+exports[`renders the FooterInfoSection with grow=true 1`] = `
+<ForwardRef(FooterInfoSection)
+  grow={true}
+>
+  <ForwardRef(Base)
+    as="section"
+    className="govgr-footer__info-section govgr-footer__info-section--grow"
+  >
+    <section
+      className="govgr-footer__info-section govgr-footer__info-section--grow"
+    >
+      hello
+    </section>
+  </ForwardRef(Base)>
+</ForwardRef(FooterInfoSection)>
+`;
+
+exports[`renders the FooterInfoSection with no props 1`] = `
+<ForwardRef(FooterInfoSection)>
+  <ForwardRef(Base)
+    as="section"
+    className="govgr-footer__info-section"
+  >
+    <section
+      className="govgr-footer__info-section"
+    >
+      hello
+    </section>
+  </ForwardRef(Base)>
+</ForwardRef(FooterInfoSection)>
+`;

package/esm/{FooterMetaItem → FooterInfoSection}/index.js

@@ -6,18 +6,18 @@ import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
 
 /**
- * FooterMetaItem is inside the FooterMeta component.
+ * FooterInfoSection is inside the FooterInfo component.
  */
-export var FooterMetaItem = /*#__PURE__*/React.forwardRef(function FooterMetaItem(_ref, ref) {
+export var FooterInfoSection = /*#__PURE__*/React.forwardRef(function FooterInfoSection(_ref, ref) {
   var grow = _ref.grow,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "div",
+    as: "section",
     ref: ref,
-    className: clsx(className, true && 'govgr-footer__meta-item', grow && 'govgr-footer__meta-item--grow')
+    className: clsx(className, true && 'govgr-footer__info-section', grow && 'govgr-footer__info-section--grow')
   }, props), children);
 });
-export default FooterMetaItem;
+export default FooterInfoSection;

package/esm/FooterInfoSection/index.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import FooterInfoSection from '@digigov/react-core/FooterInfoSection';
+
+var _ref = /*#__PURE__*/React.createElement(FooterInfoSection, null, "hello");
+
+it('renders the FooterInfoSection with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(FooterInfoSection, {
+  grow: true
+}, "hello");
+
+it('renders the FooterInfoSection with grow=true', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(FooterInfoSection, {
+  grow: false
+}, "hello");
+
+it('renders the FooterInfoSection with grow=false', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});

package/esm/FooterList/index.js

@@ -1,16 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["columns", "className", "children"];
+var _excluded = ["columns", "layout", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
 
 /**
- * FooterList is used inside the FooterSection.
+ * FooterList is used inside the FooterNavigationSection.
  * This component takes a list of FooterListItem component as its children.
  */
 export var FooterList = /*#__PURE__*/React.forwardRef(function FooterList(_ref, ref) {
   var columns = _ref.columns,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? 'vertical' : _ref$layout,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -18,7 +20,7 @@ export var FooterList = /*#__PURE__*/React.forwardRef(function FooterList(_ref,
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "ul",
     ref: ref,
-    className: clsx(className, columns === 2 && 'govgr-footer__list--columns-2', true && 'govgr-footer__list')
+    className: clsx(className, layout === 'horizontal' && 'govgr-footer__list--horizontal', layout === 'vertical' && columns === 2 && 'govgr-footer__list--columns-2', true && 'govgr-footer__list')
   }, props), children);
 });
 export default FooterList;

package/esm/FooterNavigation/index.js

@@ -7,7 +7,7 @@ import Base from '@digigov/react-core/Base';
 
 /**
  * FooterNavigation is optional. This components must be included in the FooterContainer.
- * Inside this component we place one or more of the component FooterSection.
+ * Inside this component we place one or more of the component FooterNavigationSection.
  * This component has no props.
  */
 export var FooterNavigation = /*#__PURE__*/React.forwardRef(function FooterNavigation(_ref, ref) {

package/esm/FooterNavigationSection/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FooterNavigationSection with no props 1`] = `
+<ForwardRef(FooterNavigationSection)
+  aria-label="footer navigation section"
+>
+  <ForwardRef(Base)
+    aria-label="footer navigation section"
+    as="section"
+    className="govgr-footer__navigation-section"
+  >
+    <section
+      aria-label="footer navigation section"
+      className="govgr-footer__navigation-section"
+    >
+      hello
+    </section>
+  </ForwardRef(Base)>
+</ForwardRef(FooterNavigationSection)>
+`;

package/esm/{FooterSection → FooterNavigationSection}/index.js

@@ -6,19 +6,19 @@ import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
 
 /**
- * FooterSection must be inside the FooterNavigation.
+ * FooterNavigationSection must be inside the FooterNavigation.
  * Inside this component should be placed the FooterHeading (optional) and the FooterList.
  * This component has no props.
  */
-export var FooterSection = /*#__PURE__*/React.forwardRef(function FooterSection(_ref, ref) {
+export var FooterNavigationSection = /*#__PURE__*/React.forwardRef(function FooterNavigationSection(_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "div",
+    as: "section",
     ref: ref,
-    className: clsx(className, true && 'govgr-footer__section')
+    className: clsx(className, true && 'govgr-footer__navigation-section')
   }, props), children);
 });
-export default FooterSection;
+export default FooterNavigationSection;

package/esm/FooterNavigationSection/index.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import FooterNavigationSection from '@digigov/react-core/FooterNavigationSection';
+
+var _ref = /*#__PURE__*/React.createElement(FooterNavigationSection, {
+  "aria-label": "footer navigation section"
+}, "hello");
+
+it('renders the FooterNavigationSection with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/esm/Grid/index.js

@@ -28,7 +28,7 @@ export var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: as || 'div',
     ref: ref,
-    className: clsx(className, container && [spacing === 10 && "govgr-grid__gap-10", spacing === 12 && "govgr-grid__gap-12", spacing === 1 && "govgr-grid__gap-1", spacing === 2 && "govgr-grid__gap-2", spacing === 4 && "govgr-grid__gap-4", spacing === 6 && "govgr-grid__gap-6", spacing === 8 && "govgr-grid__gap-8", inline && 'govgr-grid-inline', 'govgr-grid'], item && [xs === 'auto' && "xs:govgr-grid__col-auto", sm === 'auto' && "sm:govgr-grid__col-auto", md === 'auto' && "md:govgr-grid__col-auto", lg === 'auto' && "lg:govgr-grid__col-auto", xl === 'auto' && "xl:govgr-grid__col-auto", xs === 10 && "xs:govgr-grid__col-span-10", xs === 11 && "xs:govgr-grid__col-span-11", xs === 12 && "xs:govgr-grid__col-span-12", sm === 10 && "sm:govgr-grid__col-span-10", sm === 11 && "sm:govgr-grid__col-span-11", sm === 12 && "sm:govgr-grid__col-span-12", md === 10 && "md:govgr-grid__col-span-10", md === 11 && "md:govgr-grid__col-span-11", md === 12 && "md:govgr-grid__col-span-12", lg === 10 && "lg:govgr-grid__col-span-10", lg === 11 && "lg:govgr-grid__col-span-11", lg === 12 && "lg:govgr-grid__col-span-12", xl === 10 && "xl:govgr-grid__col-span-10", xl === 11 && "xl:govgr-grid__col-span-11", xl === 12 && "xl:govgr-grid__col-span-12", xs === 1 && "xs:govgr-grid__col-span-1", xs === 2 && "xs:govgr-grid__col-span-2", xs === 3 && "xs:govgr-grid__col-span-3", xs === 4 && "xs:govgr-grid__col-span-4", xs === 5 && "xs:govgr-grid__col-span-5", xs === 6 && "xs:govgr-grid__col-span-6", xs === 7 && "xs:govgr-grid__col-span-7", xs === 8 && "xs:govgr-grid__col-span-8", xs === 9 && "xs:govgr-grid__col-span-9", sm === 1 && "sm:govgr-grid__col-span-1", sm === 2 && "sm:govgr-grid__col-span-2", sm === 3 && "sm:govgr-grid__col-span-3", sm === 4 && "sm:govgr-grid__col-span-4", sm === 5 && "sm:govgr-grid__col-span-5", sm === 6 && "sm:govgr-grid__col-span-6", sm === 7 && "sm:govgr-grid__col-span-7", sm === 8 && "sm:govgr-grid__col-span-8", sm === 9 && "sm:govgr-grid__col-span-9", md === 1 && "md:govgr-grid__col-span-1", md === 2 && "md:govgr-grid__col-span-2", md === 3 && "md:govgr-grid__col-span-3", md === 4 && "md:govgr-grid__col-span-4", md === 5 && "md:govgr-grid__col-span-5", md === 6 && "md:govgr-grid__col-span-6", md === 7 && "md:govgr-grid__col-span-7", md === 8 && "md:govgr-grid__col-span-8", md === 9 && "md:govgr-grid__col-span-9", lg === 1 && "lg:govgr-grid__col-span-1", lg === 2 && "lg:govgr-grid__col-span-2", lg === 3 && "lg:govgr-grid__col-span-3", lg === 4 && "lg:govgr-grid__col-span-4", lg === 5 && "lg:govgr-grid__col-span-5", lg === 6 && "lg:govgr-grid__col-span-6", lg === 7 && "lg:govgr-grid__col-span-7", lg === 8 && "lg:govgr-grid__col-span-8", lg === 9 && "lg:govgr-grid__col-span-9", xl === 1 && "xl:govgr-grid__col-span-1", xl === 2 && "xl:govgr-grid__col-span-2", xl === 3 && "xl:govgr-grid__col-span-3", xl === 4 && "xl:govgr-grid__col-span-4", xl === 5 && "xl:govgr-grid__col-span-5", xl === 6 && "xl:govgr-grid__col-span-6", xl === 7 && "xl:govgr-grid__col-span-7", xl === 8 && "xl:govgr-grid__col-span-8", xl === 9 && "xl:govgr-grid__col-span-9"])
+    className: clsx(className, container && [spacing !== undefined && "govgr-gap-".concat(spacing), inline && 'govgr-grid-inline', 'govgr-grid'], item && [xs !== undefined && "xs:govgr-grid__col-span-".concat(xs), sm !== undefined && "sm:govgr-grid__col-span-".concat(sm), md !== undefined && "md:govgr-grid__col-span-".concat(md), lg !== undefined && "lg:govgr-grid__col-span-".concat(lg), xl !== undefined && "xl:govgr-grid__col-span-".concat(xl)])
   }, props), children);
 });
 export default Grid;

package/esm/HeaderSection/__snapshots__/index.test.tsx.snap

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

package/esm/HeaderSection/index.js

@@ -16,7 +16,7 @@ export var HeaderSection = /*#__PURE__*/React.forwardRef(function HeaderSection(
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, true && 'govgr-header__container')
+    className: clsx(className, true && 'govgr-header__section')
   }, props), children);
 });
 export default HeaderSection;

package/esm/Heading/__snapshots__/index.test.tsx.snap

@@ -15,23 +15,6 @@ exports[`renders the Heading with no props 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=l 1`] = `
-<ForwardRef(Heading)
-  size="lg"
->
-  <ForwardRef(Base)
-    as="h2"
-    className="govgr-heading-lg"
-  >
-    <h2
-      className="govgr-heading-lg"
-    >
-      hello
-    </h2>
-  </ForwardRef(Base)>
-</ForwardRef(Heading)>
-`;
-
 exports[`renders the Heading with size=l and element h2 1`] = `
 <ForwardRef(Heading)
   element="h2"
@@ -86,19 +69,19 @@ exports[`renders the Heading with size=l and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=m 1`] = `
+exports[`renders the Heading with size=lg 1`] = `
 <ForwardRef(Heading)
-  size="md"
+  size="lg"
 >
   <ForwardRef(Base)
-    as="h3"
-    className="govgr-heading-md"
+    as="h2"
+    className="govgr-heading-lg"
   >
-    <h3
-      className="govgr-heading-md"
+    <h2
+      className="govgr-heading-lg"
     >
       hello
-    </h3>
+    </h2>
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
@@ -157,19 +140,19 @@ exports[`renders the Heading with size=m and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=s 1`] = `
+exports[`renders the Heading with size=md 1`] = `
 <ForwardRef(Heading)
-  size="sm"
+  size="md"
 >
   <ForwardRef(Base)
-    as="h4"
-    className="govgr-heading-sm"
+    as="h3"
+    className="govgr-heading-md"
   >
-    <h4
-      className="govgr-heading-sm"
+    <h3
+      className="govgr-heading-md"
     >
       hello
-    </h4>
+    </h3>
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
@@ -228,6 +211,23 @@ exports[`renders the Heading with size=s and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
+exports[`renders the Heading with size=sm 1`] = `
+<ForwardRef(Heading)
+  size="sm"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-sm"
+  >
+    <h4
+      className="govgr-heading-sm"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
 exports[`renders the Heading with size=xl 1`] = `
 <ForwardRef(Heading)
   size="xl"
@@ -298,3 +298,38 @@ exports[`renders the Heading with size=xl and element h4 1`] = `
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
+
+exports[`renders the Heading with size=xs 1`] = `
+<ForwardRef(Heading)
+  size="xs"
+>
+  <ForwardRef(Base)
+    as="h5"
+    className="govgr-heading-xs"
+  >
+    <h5
+      className="govgr-heading-xs"
+    >
+      hello
+    </h5>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=xs and element h4 1`] = `
+<ForwardRef(Heading)
+  element="h4"
+  size="xs"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-xs"
+  >
+    <h4
+      className="govgr-heading-xs"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;

package/esm/Heading/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["size", "element", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Typography from '@digigov/react-core/Typography';
 
 var getComponentBySize = function getComponentBySize(size) {
   switch (size) {
@@ -19,13 +19,16 @@ var getComponentBySize = function getComponentBySize(size) {
     case 'sm':
       return 'h4';
 
+    case 'xs':
+      return 'h5';
+
     default:
       return 'h1';
   }
 };
 /**
  * Heading component is used to place a title in a the page.
- * Heading component must be wraped inside Main component.
+ * Heading component must be wrapped inside Main component.
  */
 
 
@@ -38,10 +41,10 @@ export var Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var Component = element ? element : getComponentBySize(size);
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Typography, _extends({
     as: Component,
     ref: ref,
-    className: clsx(className, size === 'xl' && 'govgr-heading-xl', size === 'lg' && 'govgr-heading-lg', size === 'md' && 'govgr-heading-md', size === 'sm' && 'govgr-heading-sm')
+    className: clsx(className, size !== undefined && "govgr-heading-".concat(size))
   }, props), children);
 });
 export default Heading;

package/esm/Heading/index.test.js

@@ -20,7 +20,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Heading, {
   size: 'lg'
 }, "hello");
 
-it('renders the Heading with size=l', function () {
+it('renders the Heading with size=lg', function () {
   expect(mount(_ref3)).toMatchSnapshot();
 });
 
@@ -28,7 +28,7 @@ var _ref4 = /*#__PURE__*/React.createElement(Heading, {
   size: 'md'
 }, "hello");
 
-it('renders the Heading with size=m', function () {
+it('renders the Heading with size=md', function () {
   expect(mount(_ref4)).toMatchSnapshot();
 });
 
@@ -36,114 +36,131 @@ var _ref5 = /*#__PURE__*/React.createElement(Heading, {
   size: 'sm'
 }, "hello");
 
-it('renders the Heading with size=s', function () {
+it('renders the Heading with size=sm', function () {
   expect(mount(_ref5)).toMatchSnapshot();
 });
 
 var _ref6 = /*#__PURE__*/React.createElement(Heading, {
+  size: 'xs'
+}, "hello");
+
+it('renders the Heading with size=xs', function () {
+  expect(mount(_ref6)).toMatchSnapshot();
+});
+
+var _ref7 = /*#__PURE__*/React.createElement(Heading, {
   size: 'sm',
   element: "h2"
 }, "hello");
 
 it('renders the Heading with size=s and element h2', function () {
-  expect(mount(_ref6)).toMatchSnapshot();
+  expect(mount(_ref7)).toMatchSnapshot();
 });
 
-var _ref7 = /*#__PURE__*/React.createElement(Heading, {
+var _ref8 = /*#__PURE__*/React.createElement(Heading, {
   size: 'sm',
   element: "h3"
 }, "hello");
 
 it('renders the Heading with size=s and element h3', function () {
-  expect(mount(_ref7)).toMatchSnapshot();
+  expect(mount(_ref8)).toMatchSnapshot();
 });
 
-var _ref8 = /*#__PURE__*/React.createElement(Heading, {
+var _ref9 = /*#__PURE__*/React.createElement(Heading, {
   size: 'sm',
   element: "h4"
 }, "hello");
 
 it('renders the Heading with size=s and element h4', function () {
-  expect(mount(_ref8)).toMatchSnapshot();
+  expect(mount(_ref9)).toMatchSnapshot();
 });
 
-var _ref9 = /*#__PURE__*/React.createElement(Heading, {
+var _ref10 = /*#__PURE__*/React.createElement(Heading, {
   size: 'md',
   element: "h2"
 }, "hello");
 
 it('renders the Heading with size=m and element h2', function () {
-  expect(mount(_ref9)).toMatchSnapshot();
+  expect(mount(_ref10)).toMatchSnapshot();
 });
 
-var _ref10 = /*#__PURE__*/React.createElement(Heading, {
+var _ref11 = /*#__PURE__*/React.createElement(Heading, {
   size: 'md',
   element: "h3"
 }, "hello");
 
 it('renders the Heading with size=m and element h3', function () {
-  expect(mount(_ref10)).toMatchSnapshot();
+  expect(mount(_ref11)).toMatchSnapshot();
 });
 
-var _ref11 = /*#__PURE__*/React.createElement(Heading, {
+var _ref12 = /*#__PURE__*/React.createElement(Heading, {
   size: 'md',
   element: "h4"
 }, "hello");
 
 it('renders the Heading with size=m and element h4', function () {
-  expect(mount(_ref11)).toMatchSnapshot();
+  expect(mount(_ref12)).toMatchSnapshot();
 });
 
-var _ref12 = /*#__PURE__*/React.createElement(Heading, {
+var _ref13 = /*#__PURE__*/React.createElement(Heading, {
   size: 'lg',
   element: "h2"
 }, "hello");
 
 it('renders the Heading with size=l and element h2', function () {
-  expect(mount(_ref12)).toMatchSnapshot();
+  expect(mount(_ref13)).toMatchSnapshot();
 });
 
-var _ref13 = /*#__PURE__*/React.createElement(Heading, {
+var _ref14 = /*#__PURE__*/React.createElement(Heading, {
   size: 'lg',
   element: "h3"
 }, "hello");
 
 it('renders the Heading with size=l and element h3', function () {
-  expect(mount(_ref13)).toMatchSnapshot();
+  expect(mount(_ref14)).toMatchSnapshot();
 });
 
-var _ref14 = /*#__PURE__*/React.createElement(Heading, {
+var _ref15 = /*#__PURE__*/React.createElement(Heading, {
   size: 'lg',
   element: "h4"
 }, "hello");
 
 it('renders the Heading with size=l and element h4', function () {
-  expect(mount(_ref14)).toMatchSnapshot();
+  expect(mount(_ref15)).toMatchSnapshot();
 });
 
-var _ref15 = /*#__PURE__*/React.createElement(Heading, {
+var _ref16 = /*#__PURE__*/React.createElement(Heading, {
   size: 'xl',
   element: "h2"
 }, "hello");
 
 it('renders the Heading with size=xl and element h2', function () {
-  expect(mount(_ref15)).toMatchSnapshot();
+  expect(mount(_ref16)).toMatchSnapshot();
 });
 
-var _ref16 = /*#__PURE__*/React.createElement(Heading, {
+var _ref17 = /*#__PURE__*/React.createElement(Heading, {
   size: 'xl',
   element: "h3"
 }, "hello");
 
 it('renders the Heading with size=xl and element h3', function () {
-  expect(mount(_ref16)).toMatchSnapshot();
+  expect(mount(_ref17)).toMatchSnapshot();
 });
 
-var _ref17 = /*#__PURE__*/React.createElement(Heading, {
+var _ref18 = /*#__PURE__*/React.createElement(Heading, {
   size: 'xl',
   element: "h4"
 }, "hello");
 
 it('renders the Heading with size=xl and element h4', function () {
-  expect(mount(_ref17)).toMatchSnapshot();
+  expect(mount(_ref18)).toMatchSnapshot();
+});
+
+var _ref19 = /*#__PURE__*/React.createElement(Heading, {
+  size: 'xs',
+  element: "h4"
+}, "hello");
+
+it('renders the Heading with size=xs and element h4', function () {
+  expect(mount(_ref19)).toMatchSnapshot();
 });

package/esm/HeadingCaption/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["size", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Typography from '@digigov/react-core/Typography';
 
 /**
  * Sometimes you may need to make it clear that a page is part of a larger section or group.
@@ -16,10 +16,10 @@ export var HeadingCaption = /*#__PURE__*/React.forwardRef(function HeadingCaptio
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Typography, _extends({
     as: "span",
     ref: ref,
-    className: clsx(className, size === 'xl' && 'govgr-caption-xl', size === 'lg' && 'govgr-caption-lg', size === 'md' && 'govgr-caption-md')
+    className: clsx(className, size !== undefined && "govgr-caption-".concat(size))
   }, props), children);
 });
 export default HeadingCaption;