@digigov/react-core 1.0.0-002c630d → 1.0.0-6b93ebf2

package/esm/ErrorSummary/index.js

@@ -2,21 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children"];
 import React from 'react';
-import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import NotificationBannerContainer from '@digigov/react-core/NotificationBannerContainer';
+import NotificationBannerContent from '@digigov/react-core/NotificationBannerContent';
 
 /**
- * Use this component at the top of a page to summarise any errors a user has made.
+ * Use this component at the top of a page to summarize any errors a user has made.
  */
 export var ErrorSummary = /*#__PURE__*/React.forwardRef(function ErrorSummary(_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "div",
-    ref: ref,
-    className: clsx(className, true && 'govgr-error-summary')
-  }, props), children);
+  return /*#__PURE__*/React.createElement(NotificationBannerContainer, _extends({
+    variant: 'error',
+    className: className,
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement(NotificationBannerContent, null, children));
 });
 export default ErrorSummary;

package/esm/FieldsetLegend/index.js

@@ -17,13 +17,13 @@ export var FieldsetLegend = /*#__PURE__*/React.forwardRef(function FieldsetLegen
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Base, _extends({
     as: "legend",
     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', true && 'govgr-fieldset__legend')
   }, heading && {
     role: 'heading',
     'aria-level': 1
-  }, props), children));
+  }, props), children);
 });
 export default FieldsetLegend;

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

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

package/esm/FooterContainer/index.js

@@ -18,7 +18,7 @@ export var FooterContainer = /*#__PURE__*/React.forwardRef(function FooterContai
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, fullWidth === false && 'govgr-width-container', fullWidth && 'govgr-full-width-container')
+    className: clsx(className, fullWidth && 'govgr-container--full-width', true && 'govgr-container')
   }, props), children);
 });
 export default FooterContainer;

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

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Hidden with \`lgUp\` props 1`] = `
+<ForwardRef(Hidden)
+  lgUp={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-hidden-lg--up"
+  >
+    <div
+      className="govgr-hidden-lg--up"
+    >
+      <div>
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Hidden)>
+`;
+
+exports[`renders the Hidden with \`mdUp\` props 1`] = `
+<ForwardRef(Hidden)
+  mdUp={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-hidden-md--up"
+  >
+    <div
+      className="govgr-hidden-md--up"
+    >
+      <div>
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Hidden)>
+`;
+
+exports[`renders the Hidden with \`smUp\` props 1`] = `
+<ForwardRef(Hidden)
+  smUp={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-hidden-sm--up"
+  >
+    <div
+      className="govgr-hidden-sm--up"
+    >
+      <div>
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Hidden)>
+`;
+
+exports[`renders the Hidden with \`xlUp\` props 1`] = `
+<ForwardRef(Hidden)
+  xlUp={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-hidden-xl--up"
+  >
+    <div
+      className="govgr-hidden-xl--up"
+    >
+      <div>
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Hidden)>
+`;
+
+exports[`renders the Hidden with \`xsUp\` props 1`] = `
+<ForwardRef(Hidden)
+  xsUp={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-hidden-xs--up"
+  >
+    <div
+      className="govgr-hidden-xs--up"
+    >
+      <div>
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Hidden)>
+`;

package/esm/Hidden/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "lgUp", "mdUp", "smUp", "xlUp", "xsUp"];
+var _excluded = ["className", "children", "xsUp", "smUp", "mdUp", "lgUp", "xlUp"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -13,16 +13,12 @@ import Base from '@digigov/react-core/Base';
 export var Hidden = /*#__PURE__*/React.forwardRef(function Hidden(_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
-      _ref$lgUp = _ref.lgUp,
-      lgUp = _ref$lgUp === void 0 ? false : _ref$lgUp,
-      _ref$mdUp = _ref.mdUp,
-      mdUp = _ref$mdUp === void 0 ? false : _ref$mdUp,
-      _ref$smUp = _ref.smUp,
-      smUp = _ref$smUp === void 0 ? false : _ref$smUp,
-      _ref$xlUp = _ref.xlUp,
-      xlUp = _ref$xlUp === void 0 ? false : _ref$xlUp,
       _ref$xsUp = _ref.xsUp,
       xsUp = _ref$xsUp === void 0 ? false : _ref$xsUp,
+      smUp = _ref.smUp,
+      mdUp = _ref.mdUp,
+      lgUp = _ref.lgUp,
+      xlUp = _ref.xlUp,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({

package/esm/LinkBase/index.js

@@ -9,7 +9,8 @@ import Base from '@digigov/react-core/Base';
  * This component defines a hyperlink, which is used to link from one page to another.
  */
 export var LinkBase = /*#__PURE__*/React.forwardRef(function LinkBase(_ref, ref) {
-  var underline = _ref.underline,
+  var _ref$underline = _ref.underline,
+      underline = _ref$underline === void 0 ? true : _ref$underline,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -17,7 +18,7 @@ export var LinkBase = /*#__PURE__*/React.forwardRef(function LinkBase(_ref, ref)
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "a",
     ref: ref,
-    className: clsx(className, underline === false && 'govgr-link--no-underline', true && 'govgr-link')
+    className: clsx(className, !underline && 'govgr-link--no-underline', true && 'govgr-link')
   }, props), children);
 });
 export default LinkBase;

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

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

package/esm/LoaderContainer/index.js

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

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

@@ -3,14 +3,14 @@
 exports[`renders the Masthead with no props 1`] = `
 <ForwardRef(Masthead)>
   <ForwardRef(Base)
-    as="div"
+    as="section"
     className="govgr-background-dark govgr-masthead--primary govgr-masthead"
   >
-    <div
+    <section
       className="govgr-background-dark govgr-masthead--primary govgr-masthead"
     >
       hello
-    </div>
+    </section>
   </ForwardRef(Base)>
 </ForwardRef(Masthead)>
 `;

package/esm/Masthead/index.js

@@ -16,7 +16,7 @@ export var Masthead = /*#__PURE__*/React.forwardRef(function Masthead(_ref, ref)
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "div",
+    as: "section",
     ref: ref,
     className: clsx(className, color === 'secondary' && 'govgr-masthead--secondary', color === 'primary' && ['govgr-background-dark', 'govgr-masthead--primary'], true && 'govgr-masthead')
   }, props), children);

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the MastheadLogo with no props 1`] = `
+<ForwardRef(MastheadLogo)>
+  <ForwardRef(Base)
+    alt="masthead logo"
+    as="img"
+    className="govgr-masthead__logo"
+  >
+    <img
+      alt="masthead logo"
+      className="govgr-masthead__logo"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(MastheadLogo)>
+`;

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

@@ -7,10 +7,10 @@ exports[`renders the NavMenuContainer with no props 1`] = `
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-width-container"
+      className="govgr-container"
     >
       <div
-        className="govgr-width-container"
+        className="govgr-container"
       >
         <ForwardRef(Base)
           as="div"

package/esm/NavMenuContainer/index.js

@@ -16,7 +16,7 @@ export var NavMenuContainer = /*#__PURE__*/React.forwardRef(function NavMenuCont
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Container, _extends({
-    cols: layout === 'horizontal',
+    grid: layout === 'horizontal',
     ref: ref,
     className: className
   }, props), children);

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

@@ -5,13 +5,13 @@ exports[`renders the NotificationBannerContainer with no props 1`] = `
   <ForwardRef(Base)
     aria-labelledby="govgr-notification-banner-title"
     as="div"
-    className="govgr-notification-banner"
+    className="govgr-notification-banner--info govgr-notification-banner"
     data-module="govgr-notification-banner"
     role="region"
   >
     <div
       aria-labelledby="govgr-notification-banner-title"
-      className="govgr-notification-banner"
+      className="govgr-notification-banner--info govgr-notification-banner"
       data-module="govgr-notification-banner"
       role="region"
     >
@@ -21,32 +21,9 @@ exports[`renders the NotificationBannerContainer with no props 1`] = `
 </ForwardRef(NotificationBannerContainer)>
 `;
 
-exports[`renders the NotificationBannerContainer with success=false 1`] = `
+exports[`renders the NotificationBannerContainer with variant=success 1`] = `
 <ForwardRef(NotificationBannerContainer)
-  success={false}
->
-  <ForwardRef(Base)
-    aria-labelledby="govgr-notification-banner-title"
-    as="div"
-    className="govgr-notification-banner"
-    data-module="govgr-notification-banner"
-    role="region"
-  >
-    <div
-      aria-labelledby="govgr-notification-banner-title"
-      className="govgr-notification-banner"
-      data-module="govgr-notification-banner"
-      role="region"
-    >
-      hello
-    </div>
-  </ForwardRef(Base)>
-</ForwardRef(NotificationBannerContainer)>
-`;
-
-exports[`renders the NotificationBannerContainer with success=true 1`] = `
-<ForwardRef(NotificationBannerContainer)
-  success={true}
+  variant="success"
 >
   <ForwardRef(Base)
     aria-labelledby="govgr-notification-banner-title"

package/esm/NotificationBannerContainer/index.js

@@ -1,19 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["success", "className", "children"];
+var _excluded = ["variant", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
 
 /**
  * Details for the NotificationBannerContainer.
- * NotificationBannerContainer componenent informs users about something they need to know about
- * NotificationBannerContainer componenent must be placed at the top of the page.
+ * NotificationBannerContainer component informs users about something they need to know about
+ * NotificationBannerContainer component must be placed at the top of the page.
  * NotificationBannerContainer wraps NotificationBannerContainerHeader, NotificationBannerContainerContent,NotificationBannerContainerHeading
  * and NotificationBannerContainerLink components as children
  */
 export var NotificationBannerContainer = /*#__PURE__*/React.forwardRef(function NotificationBannerContainer(_ref, ref) {
-  var success = _ref.success,
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'info' : _ref$variant,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -24,7 +25,7 @@ export var NotificationBannerContainer = /*#__PURE__*/React.forwardRef(function
     "aria-labelledby": "govgr-notification-banner-title",
     "data-module": "govgr-notification-banner",
     ref: ref,
-    className: clsx(className, success && 'govgr-notification-banner--success', true && 'govgr-notification-banner')
+    className: clsx(className, variant !== undefined && "govgr-notification-banner--".concat(variant), true && 'govgr-notification-banner')
   }, props), children);
 });
 export default NotificationBannerContainer;

package/esm/NotificationBannerContainer/index.test.js

@@ -9,17 +9,9 @@ it('renders the NotificationBannerContainer with no props', function () {
 });
 
 var _ref2 = /*#__PURE__*/React.createElement(NotificationBannerContainer, {
-  success: true
+  variant: 'success'
 }, "hello");
 
-it('renders the NotificationBannerContainer with success=true', function () {
+it('renders the NotificationBannerContainer with variant=success', function () {
   expect(mount(_ref2)).toMatchSnapshot();
-});
-
-var _ref3 = /*#__PURE__*/React.createElement(NotificationBannerContainer, {
-  success: false
-}, "hello");
-
-it('renders the NotificationBannerContainer with success=false', function () {
-  expect(mount(_ref3)).toMatchSnapshot();
 });

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

@@ -9,11 +9,24 @@ exports[`renders the NotificationBannerHeader with no props 1`] = `
     <div
       className="govgr-notification-banner__header"
     >
-      <h2
+      <ForwardRef(Heading)
         className="govgr-notification-banner__title"
+        element="h2"
+        marginBottom={0}
+        size="sm"
       >
-        hello
-      </h2>
+        <ForwardRef(Base)
+          as="h2"
+          className="govgr-notification-banner__title govgr-heading-sm"
+          marginBottom={0}
+        >
+          <h2
+            className="govgr-notification-banner__title govgr-heading-sm govgr-mb-0"
+          >
+            hello
+          </h2>
+        </ForwardRef(Base)>
+      </ForwardRef(Heading)>
     </div>
   </ForwardRef(Base)>
 </ForwardRef(NotificationBannerHeader)>

package/esm/NotificationBannerHeader/index.js

@@ -4,6 +4,7 @@ var _excluded = ["className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
+import Heading from '@digigov/react-core/Heading';
 
 /**
  * Details for the NotificationBannerHeader.
@@ -19,7 +20,10 @@ export var NotificationBannerHeader = /*#__PURE__*/React.forwardRef(function Not
     as: "div",
     ref: ref,
     className: clsx(className, true && 'govgr-notification-banner__header')
-  }, props), /*#__PURE__*/React.createElement("h2", {
+  }, props), /*#__PURE__*/React.createElement(Heading, {
+    element: "h2",
+    size: "sm",
+    marginBottom: 0,
     className: clsx(true && 'govgr-notification-banner__title')
   }, children));
 });

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

@@ -2,15 +2,21 @@
 
 exports[`renders the NotificationBannerHeading with no props 1`] = `
 <ForwardRef(NotificationBannerHeading)>
-  <ForwardRef(Base)
-    as="h3"
+  <ForwardRef(Heading)
     className="govgr-notification-banner__heading"
+    element="h3"
+    size="md"
   >
-    <h3
-      className="govgr-notification-banner__heading"
+    <ForwardRef(Base)
+      as="h3"
+      className="govgr-notification-banner__heading govgr-heading-md"
     >
-      hello
-    </h3>
-  </ForwardRef(Base)>
+      <h3
+        className="govgr-notification-banner__heading govgr-heading-md"
+      >
+        hello
+      </h3>
+    </ForwardRef(Base)>
+  </ForwardRef(Heading)>
 </ForwardRef(NotificationBannerHeading)>
 `;

package/esm/NotificationBannerHeading/index.js

@@ -3,7 +3,7 @@ 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 Heading from '@digigov/react-core/Heading';
 
 /**
  * Details for the NotificationBannerHeading.
@@ -15,8 +15,9 @@ export var NotificationBannerHeading = /*#__PURE__*/React.forwardRef(function No
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "h3",
+  return /*#__PURE__*/React.createElement(Heading, _extends({
+    element: "h3",
+    size: "md",
     ref: ref,
     className: clsx(className, true && 'govgr-notification-banner__heading')
   }, props), children);

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

@@ -4,34 +4,41 @@ exports[`renders the NotificationBannerLink with href prop props 1`] = `
 <ForwardRef(NotificationBannerLink)
   href="https://www.w3schools.com/html/html_links.asp"
 >
-  <ForwardRef(Base)
-    as="a"
+  <ForwardRef(LinkBase)
     className="govgr-notification-banner__link"
     href="https://www.w3schools.com/html/html_links.asp"
   >
-    <a
-      className="govgr-notification-banner__link"
+    <ForwardRef(Base)
+      as="a"
+      className="govgr-notification-banner__link govgr-link"
       href="https://www.w3schools.com/html/html_links.asp"
     >
-      hello
-    </a>
-  </ForwardRef(Base)>
+      <a
+        className="govgr-notification-banner__link govgr-link"
+        href="https://www.w3schools.com/html/html_links.asp"
+      >
+        hello
+      </a>
+    </ForwardRef(Base)>
+  </ForwardRef(LinkBase)>
 </ForwardRef(NotificationBannerLink)>
 `;
 
 exports[`renders the NotificationBannerLink with no props 1`] = `
 <ForwardRef(NotificationBannerLink)>
-  <ForwardRef(Base)
-    as="a"
+  <ForwardRef(LinkBase)
     className="govgr-notification-banner__link"
-    href="#"
   >
-    <a
-      className="govgr-notification-banner__link"
-      href="#"
+    <ForwardRef(Base)
+      as="a"
+      className="govgr-notification-banner__link govgr-link"
     >
-      hello
-    </a>
-  </ForwardRef(Base)>
+      <a
+        className="govgr-notification-banner__link govgr-link"
+      >
+        hello
+      </a>
+    </ForwardRef(Base)>
+  </ForwardRef(LinkBase)>
 </ForwardRef(NotificationBannerLink)>
 `;

package/esm/NotificationBannerLink/index.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "href", "children"];
+var _excluded = ["className", "children"];
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import LinkBase from '@digigov/react-core/LinkBase';
 
 /**
  * Details for the NotificationBannerLink.
@@ -12,15 +12,11 @@ import Base from '@digigov/react-core/Base';
  */
 export var NotificationBannerLink = /*#__PURE__*/React.forwardRef(function NotificationBannerLink(_ref, ref) {
   var className = _ref.className,
-      _ref$href = _ref.href,
-      href = _ref$href === void 0 ? '#' : _ref$href,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "a",
+  return /*#__PURE__*/React.createElement(LinkBase, _extends({
     ref: ref,
-    href: href,
     className: clsx(className, true && 'govgr-notification-banner__link')
   }, props), children);
 });

package/esm/PageTitleHeading/index.js

@@ -2,23 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "className", "children"];
 import React from 'react';
-import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Heading from '@digigov/react-core/Heading';
 
 /**
  * Details for the PageTitleHeading.
+ * Use PageTitleHeading for the main page title.
  */
 export var PageTitleHeading = /*#__PURE__*/React.forwardRef(function PageTitleHeading(_ref, ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'xl' : _ref$size,
+  var size = _ref.size,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "h1",
-    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')
+  return /*#__PURE__*/React.createElement(Heading, _extends({
+    size: size,
+    className: className,
+    ref: ref
   }, props), children);
 });
 export default PageTitleHeading;

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Panel with no props 1`] = `
+<ForwardRef(Panel)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-panel--success govgr-panel"
+  >
+    <div
+      className="govgr-panel--success govgr-panel"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Panel)>
+`;