Merge branch 'main' into include-declarative-definition

Author: shauns

app/routes/app._index.tsx

@@ -112,12 +112,10 @@ export default function Index() {
   const generateProduct = () => fetcher.submit({}, { method: "POST" });
 
   return (
-    <s-page>
-      <ui-title-bar title="React Router app template">
-        <button variant="primary" onClick={generateProduct}>
-          Generate a product
-        </button>
-      </ui-title-bar>
+    <s-page heading="React Router app template">
+      <s-button slot="primary-action" onClick={generateProduct}>
+        Generate a product
+      </s-button>
 
       <s-section heading="Congrats on creating a new Shopify app 🎉">
         <s-paragraph>

app/routes/app.additional.tsx

@@ -1,7 +1,6 @@
 export default function AdditionalPage() {
   return (
-    <s-page>
-      <ui-title-bar title="Additional page"></ui-title-bar>
+    <s-page heading="Additional page">
       <s-section heading="Multiple pages">
         <s-paragraph>
           The app template comes with an additional page which demonstrates how

app/routes/app.tsx

@@ -1,5 +1,5 @@
 import type { HeadersFunction, LoaderFunctionArgs } from "react-router";
-import { Link, Outlet, useLoaderData, useRouteError } from "react-router";
+import { Outlet, useLoaderData, useRouteError } from "react-router";
 import { boundary } from "@shopify/shopify-app-react-router/server";
 import { AppProvider } from "@shopify/shopify-app-react-router/react";
 
@@ -17,12 +17,10 @@ export default function App() {
 
   return (
     <AppProvider embedded apiKey={apiKey}>
-      <ui-nav-menu>
-        <Link to="/app" rel="home">
-          Home
-        </Link>
-        <Link to="/app/additional">Additional page</Link>
-      </ui-nav-menu>
+      <s-app-nav>
+        <s-link href="/app">Home</s-link>
+        <s-link href="/app/additional">Additional page</s-link>
+      </s-app-nav>
       <Outlet />
     </AppProvider>
   );