diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx
new file mode 100644
index 00000000000..3b4d4a89f6e
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+// import { useStoreCart } from '@woocommerce/base-context/hooks';
+// import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+
+type EmptyMiniCartContentsBlockProps = {
+	children: JSX.Element | JSX.Element[];
+	className: string;
+};
+
+const EmptyMiniCartContentsBlock = ( {
+	children,
+	className,
+}: EmptyMiniCartContentsBlockProps ): JSX.Element | null => {
+	// const { cartItems, cartIsLoading } = useStoreCart();
+
+	// const elementRef = useRef< HTMLDivElement >( null );
+
+	// useEffect( () => {
+	// 	if ( cartItems.length === 0 && ! cartIsLoading ) {
+	// 		elementRef.current?.focus();
+	// 	}
+	// }, [ cartItems, cartIsLoading ] );
+
+	// if ( cartIsLoading || cartItems.length > 0 ) {
+	// 	return null;
+	// }
+
+	return (
+		<div tabIndex={ -1 } ref={ elementRef } className={ className }>
+			<div className="wc-block-mini-cart__empty-cart-wrapper">
+				{ children }
+			</div>
+		</div>
+	);
+};
+
+export default EmptyMiniCartContentsBlock;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
new file mode 100644
index 00000000000..60011a24f88
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+// import { StoreNoticesContainer } from '@woocommerce/blocks-components';
+// import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+type FilledMiniCartContentsBlockProps = {
+	children: JSX.Element;
+	className: string;
+};
+
+const FilledMiniCartContentsBlock = ( {
+	children,
+	className,
+}: FilledMiniCartContentsBlockProps ): JSX.Element | null => {
+	// const { cartItems } = useStoreCart();
+
+	// if ( cartItems.length === 0 ) {
+	// 	return null;
+	// }
+
+	return (
+		<div className={ className }>
+			<StoreNoticesContainer context="wc/cart" />
+			{ children }
+		</div>
+	);
+};
+
+export default FilledMiniCartContentsBlock;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/frontend.tsx
new file mode 100644
index 00000000000..9b9455eb653
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/frontend.tsx
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { CART_URL } from '@woocommerce/block-settings';
+import Button from '@woocommerce/base-components/button';
+import clsx from 'clsx';
+import { __ } from '@wordpress/i18n';
+// import { useStyleProps } from '@woocommerce/base-hooks';
+
+/**
+ * Internal dependencies
+ */
+import { getVariant } from '../utils';
+
+const defaultCartButtonLabel = __( 'View my cart', 'woocommerce' );
+
+type MiniCartCartButtonBlockProps = {
+	cartButtonLabel?: string;
+	className?: string;
+	style?: string;
+};
+
+const Block = ( {
+	className,
+	cartButtonLabel,
+	style,
+}: MiniCartCartButtonBlockProps ): JSX.Element | null => {
+	// const styleProps = useStyleProps( { style } );
+
+	if ( ! CART_URL ) {
+		return null;
+	}
+
+	return (
+		<Button
+			className={ clsx(
+				className,
+				// styleProps.className,
+				'wc-block-mini-cart__footer-cart'
+			) }
+			href={ CART_URL }
+			variant={ getVariant( className, 'outlined' ) }
+		>
+			{ cartButtonLabel || defaultCartButtonLabel }
+		</Button>
+	);
+};
+
+export default Block;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/frontend.tsx
new file mode 100644
index 00000000000..d454d2440b2
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/frontend.tsx
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import { CHECKOUT_URL } from '@woocommerce/block-settings';
+import Button from '@woocommerce/base-components/button';
+import clsx from 'clsx';
+// import { useStyleProps } from '@woocommerce/base-hooks';
+// import {
+// 	isErrorResponse,
+// 	useCartEventsContext,
+// } from '@woocommerce/base-context';
+
+/**
+ * Internal dependencies
+ */
+import { defaultCheckoutButtonLabel } from './constants';
+import { getVariant } from '../utils';
+
+type MiniCartCheckoutButtonBlockProps = {
+	checkoutButtonLabel?: string;
+	className?: string;
+	style?: string;
+};
+
+const Block = ( {
+	className,
+	checkoutButtonLabel,
+	style,
+}: MiniCartCheckoutButtonBlockProps ): JSX.Element | null => {
+	// const styleProps = useStyleProps( { style } );
+	// const { dispatchOnProceedToCheckout } = useCartEventsContext();
+
+	if ( ! CHECKOUT_URL ) {
+		return null;
+	}
+
+	return (
+		<Button
+			className={ clsx(
+				className,
+				// styleProps.className,
+				'wc-block-mini-cart__footer-checkout'
+			) }
+			variant={ getVariant( className, 'contained' ) }
+			// style={ styleProps.style }
+			href={ CHECKOUT_URL }
+			onClick={ ( e ) => {
+				// dispatchOnProceedToCheckout().then( ( observerResponses ) => {
+				// 	if ( observerResponses.some( isErrorResponse ) ) {
+				// 		e.preventDefault();
+				// 	}
+				// } );
+			} }
+		>
+			{ checkoutButtonLabel || defaultCheckoutButtonLabel }
+		</Button>
+	);
+};
+
+export default Block;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-footer-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-footer-block/frontend.tsx
new file mode 100644
index 00000000000..ab5161d6a57
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-footer-block/frontend.tsx
@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { TotalsItem } from '@woocommerce/blocks-components';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
+import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
+import { PaymentEventsProvider } from '@woocommerce/base-context';
+import clsx from 'clsx';
+// import {
+// 	usePaymentMethods,
+// 	useStoreCart,
+// } from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import CartButton from '../mini-cart-cart-button-block/frontend';
+import CheckoutButton from '../mini-cart-checkout-button-block/frontend';
+import { hasChildren } from '../utils';
+
+const PaymentMethodIconsElement = (): JSX.Element => {
+	// const { paymentMethods } = usePaymentMethods();
+
+	return <PaymentMethodIcons icons={ getIconsFromPaymentMethods( {} ) } />;
+};
+
+interface Props {
+	children: JSX.Element | JSX.Element[];
+	className?: string;
+	cartButtonLabel: string;
+	checkoutButtonLabel: string;
+}
+
+const Block = ( {
+	children,
+	className,
+	cartButtonLabel,
+	checkoutButtonLabel,
+}: Props ): JSX.Element => {
+	// const { cartTotals } = useStoreCart();
+	// const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
+	// 	? parseInt( cartTotals.total_items, 10 ) +
+	// 	  parseInt( cartTotals.total_items_tax, 10 )
+	// 	: parseInt( cartTotals.total_items, 10 );
+
+	const subTotal = 0;
+	const cartTotals = {};
+
+	// The `Cart` and `Checkout` buttons were converted to inner blocks, but we still need to render the buttons
+	// for themes that have the old `mini-cart.html` template. So we check if there are any inner blocks (buttons) and
+	// if not, render the buttons.
+	const hasButtons = hasChildren( children );
+
+	return (
+		<div className={ clsx( className, 'wc-block-mini-cart__footer' ) }>
+			<TotalsItem
+				className="wc-block-mini-cart__footer-subtotal"
+				currency={ getCurrencyFromPriceResponse( cartTotals ) }
+				label={ __( 'Subtotal', 'woocommerce' ) }
+				value={ subTotal }
+				description={ __(
+					'Shipping, taxes, and discounts calculated at checkout.',
+					'woocommerce'
+				) }
+			/>
+			<div className="wc-block-mini-cart__footer-actions">
+				{ hasButtons ? (
+					children
+				) : (
+					<>
+						<CartButton cartButtonLabel={ cartButtonLabel } />
+						<CheckoutButton
+							checkoutButtonLabel={ checkoutButtonLabel }
+						/>
+					</>
+				) }
+			</div>
+			<PaymentEventsProvider>
+				<PaymentMethodIconsElement />
+			</PaymentEventsProvider>
+		</div>
+	);
+};
+
+export default Block;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-items-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-items-block/frontend.tsx
new file mode 100644
index 00000000000..0fe3344c948
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-items-block/frontend.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+type MiniCartItemsBlockProps = {
+	children: JSX.Element;
+	className: string;
+};
+
+const Block = ( {
+	children,
+	className,
+}: MiniCartItemsBlockProps ): JSX.Element => {
+	return (
+		<div
+			className={ clsx( className, 'wc-block-mini-cart__items' ) }
+			tabIndex={ -1 }
+		>
+			{ children }
+		</div>
+	);
+};
+
+export default Block;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-products-table-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-products-table-block/frontend.tsx
new file mode 100644
index 00000000000..420ae2a89cf
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-products-table-block/frontend.tsx
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { CartLineItemsTable } from '@woocommerce/base-components/cart-checkout';
+import clsx from 'clsx';
+import { CartItem } from '../../../../../types';
+
+type MiniCartProductsTableBlockProps = {
+	className: string;
+};
+
+const Block = ( {
+	className,
+}: MiniCartProductsTableBlockProps ): JSX.Element => {
+	// const { cartItems, cartIsLoading } = useStoreCart();
+
+	const cartIsLoading = false;
+	const cartItems: CartItem[] = [];
+	return (
+		<div
+			className={ clsx(
+				className,
+				'wc-block-mini-cart__products-table'
+			) }
+		>
+			<CartLineItemsTable
+				lineItems={ cartItems }
+				isLoading={ cartIsLoading }
+				className="wc-block-mini-cart-items"
+			/>
+		</div>
+	);
+};
+
+export default Block;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/frontend.tsx
new file mode 100644
index 00000000000..c8d20748f7f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/frontend.tsx
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { SHOP_URL } from '@woocommerce/block-settings';
+import Button from '@woocommerce/base-components/button';
+import clsx from 'clsx';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getVariant } from '../utils';
+
+const defaultStartShoppingButtonLabel = __( 'Start shopping', 'woocommerce' );
+
+type MiniCartShoppingButtonBlockProps = {
+	className: string;
+	startShoppingButtonLabel: string;
+};
+
+const Block = ( {
+	className,
+	startShoppingButtonLabel,
+}: MiniCartShoppingButtonBlockProps ): JSX.Element | null => {
+	if ( ! SHOP_URL ) {
+		return null;
+	}
+
+	return (
+		<div className="wp-block-button has-text-align-center">
+			<Button
+				className={ clsx(
+					className,
+					'wp-block-button__link',
+					'wc-block-mini-cart__shopping-button'
+				) }
+				variant={ getVariant( className, 'contained' ) }
+				href={ SHOP_URL }
+			>
+				{ startShoppingButtonLabel || defaultStartShoppingButtonLabel }
+			</Button>
+		</div>
+	);
+};
+
+export default Block;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-title-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-title-block/frontend.tsx
new file mode 100644
index 00000000000..f515ce97afc
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-title-block/frontend.tsx
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+// import { useStoreCart } from '@woocommerce/base-context/hooks';
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import TitleItemsCounter from '../mini-cart-title-items-counter-block/frontend';
+import TitleYourCart from '../mini-cart-title-label-block/frontend';
+import { hasChildren } from '../utils';
+
+type MiniCartTitleBlockProps = {
+	className: string;
+	children: JSX.Element;
+};
+
+const Block = ( {
+	children,
+	className,
+}: MiniCartTitleBlockProps ): JSX.Element | null => {
+	// const { cartIsLoading } = useStoreCart();
+	// if ( cartIsLoading ) {
+	// 	return null;
+	// }
+
+	// The `Mini-Cart Title` was converted to two inner blocks, but we still need to render the old title for
+	// themes that have the old `mini-cart.html` template. So we check if there are any inner blocks and if
+	// not, render the title blocks.
+	const hasTitleInnerBlocks = hasChildren( children );
+
+	return (
+		<h2 className={ clsx( className, 'wc-block-mini-cart__title' ) }>
+			{ hasTitleInnerBlocks ? (
+				children
+			) : (
+				<>
+					<TitleYourCart />
+					<TitleItemsCounter />
+				</>
+			) }
+		</h2>
+	);
+};
+
+export default Block;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/frontend.tsx
new file mode 100644
index 00000000000..8f5bd40745b
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/frontend.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import { _n, sprintf } from '@wordpress/i18n';
+// import { useStoreCart } from '@woocommerce/base-context';
+// import { useStyleProps } from '@woocommerce/base-hooks';
+
+type Props = {
+	className?: string;
+};
+
+const Block = ( props: Props ): JSX.Element => {
+	// const { cartItemsCount } = useStoreCart();
+	// const styleProps = useStyleProps( props );
+
+	const cartItemsCount = 0;
+
+	return (
+		<span className={ clsx( props.className ) }>
+			{ sprintf(
+				/* translators: %d is the count of items in the cart. */
+				_n( '(%d item)', '(%d items)', cartItemsCount, 'woocommerce' ),
+				cartItemsCount
+			) }
+		</span>
+	);
+};
+
+export default Block;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-title-label-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-title-label-block/frontend.tsx
new file mode 100644
index 00000000000..92466e7e366
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/mini-cart-title-label-block/frontend.tsx
@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { useStyleProps } from '@woocommerce/base-hooks';
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+const defaultYourCartLabel = __( 'Your cart', 'woocommerce' );
+
+type Props = {
+	label?: string;
+	className?: string;
+};
+
+const Block = ( props: Props ): JSX.Element => {
+	const styleProps = useStyleProps( props );
+
+	return (
+		<span
+			className={ clsx( props.className, styleProps.className ) }
+			style={ styleProps.style }
+		>
+			{ props.label || defaultYourCartLabel }
+		</span>
+	);
+};
+
+export default Block;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/utils.ts b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/utils.ts
new file mode 100644
index 00000000000..52f28d60f93
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/mini-cart-contents/inner-blocks/utils.ts
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { isObject } from '@woocommerce/types';
+
+type Variant = 'text' | 'contained' | 'outlined';
+
+export const getVariant = (
+	className = '',
+	defaultVariant: Variant
+): Variant => {
+	if ( className.includes( 'is-style-outline' ) ) {
+		return 'outlined';
+	}
+
+	if ( className.includes( 'is-style-fill' ) ) {
+		return 'contained';
+	}
+
+	return defaultVariant;
+};
+
+/**
+ * Checks if there are any children that are blocks.
+ */
+export const hasChildren = ( children ): boolean => {
+	return children.some( ( child ) => {
+		if ( Array.isArray( child ) ) {
+			return hasChildren( child );
+		}
+		return isObject( child ) && child.key !== null;
+	} );
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1548e3cacd2..386ddeec749 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16139,7 +16139,7 @@ packages:
     resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==}
     engines: {node: '>= 4.0'}
     os: [darwin]
-    deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
+    deprecated: Upgrade to fsevents v2 to mitigate potential security issues
 
   fsevents@2.1.3:
     resolution: {integrity: sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==}