Update/use newfold UI container component

composer.json

@@ -65,15 +65,15 @@
     "newfold-labs/wp-module-global-ctb": "^1.0.9",
     "newfold-labs/wp-module-help-center": "1.0.21",
     "newfold-labs/wp-module-loader": "^1.0.10",
-    "newfold-labs/wp-module-marketplace": "^2.1.0",
+    "newfold-labs/wp-module-marketplace": "^2.2.0",
     "newfold-labs/wp-module-notifications": "^1.2.1",
     "newfold-labs/wp-module-onboarding": "^1.11.10",
     "newfold-labs/wp-module-patterns": "^0.1.10",
-    "newfold-labs/wp-module-performance": "^1.2.2",
+    "newfold-labs/wp-module-performance": "^1.3.0",
     "newfold-labs/wp-module-runtime": "^1.0.7",
     "newfold-labs/wp-module-secure-passwords": "^1.1",
     "newfold-labs/wp-module-sso": "^1.0.4",
-    "newfold-labs/wp-module-staging": "^1.1.1",
+    "newfold-labs/wp-module-staging": "^1.2.2",
     "wp-forge/wp-update-handler": "^1.0",
     "wp-forge/wp-upgrade-handler": "^1.0"
   }

package.json

@@ -26,7 +26,7 @@
         "@heroicons/react": "^2.0.18",
         "@newfold-labs/wp-module-ecommerce": "^1.3.14",
         "@newfold-labs/wp-module-runtime": "^1.0.7",
-        "@newfold/ui-component-library": "^1.0.0",
+        "@newfold/ui-component-library": "^1.0.1",
         "@reduxjs/toolkit": "^1.9.6",
         "@wordpress/compose": "^6.24.0",
         "@wordpress/dom-ready": "^3.47.0",

src/app/components/webinars-banner/index.js

@@ -1,12 +1,11 @@
 import { useState, useEffect } from '@wordpress/element';
-import { Button, Title } from '@newfold/ui-component-library';
+import { Button, Container, Title } from '@newfold/ui-component-library';
 import {
 	ArrowRightIcon,
 	CalendarIcon,
 	ClockIcon,
 } from '@heroicons/react/24/outline';
 import { ReactComponent as WebinarsVector } from 'App/images/webinars-vector.svg';
-import { SectionContainer, SectionContent } from 'App/components/section';
 
 /**
  * A component that displays the next monthly webinar.
@@ -106,8 +105,8 @@ const WebinarsBanner = () => {
 	}
 
 	return (
-		<SectionContainer className="wppbh-webinars-banner-section nfd-bg-[#E5F6FE]">
-			<SectionContent>
+		<Container className="wppbh-webinars-banner-section nfd-bg-[#E5F6FE]">
+			<Container.Block>
 				<div className="nfd-flex nfd-flex-col nfd-gap-8 xl:nfd-flex-row xl:nfd-items-center">
 					<div className="max-[1378px]:nfd-hidden">
 						<WebinarsVector />
@@ -173,8 +172,8 @@ const WebinarsBanner = () => {
 						</Button>
 					</div>
 				</div>
-			</SectionContent>
-		</SectionContainer>
+			</Container.Block>
+		</Container>
 	);
 };
 

src/app/pages/ecommerce/page.js

@@ -1,11 +1,11 @@
 import './styles.scss';
 import { useContext } from '@wordpress/element';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { Page } from '@newfold/ui-component-library';
 import { NewfoldECommerce } from '@newfold-labs/wp-module-ecommerce';
 import '@newfold-labs/wp-module-ecommerce/bluehost.css';
 import AppStore from 'App/data/store';
 import { bluehostSettingsApiFetch } from 'App/util/helpers';
-import { Page } from 'App/components/page';
 import { useNotification } from 'App/components/notifications';
 
 const ECommerce = () => {