From 9314c5ed0e1ef71bd69211778ce84b5450354cc9 Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Thu, 17 Oct 2024 11:39:32 -0400
Subject: [PATCH 01/12] Remote remote-ui references from Admin surface

Add version string into registration call
---
 package.json                                  |  1 +
 packages/ui-extensions-react/package.json     |  9 ++-
 .../src/surfaces/admin/render.tsx             | 12 ++--
 packages/ui-extensions/loom.config.ts         | 20 +++++-
 .../src/surfaces/admin/extension.ts           |  8 ++-
 .../src/surfaces/admin/globals.ts             |  3 +-
 .../src/surfaces/admin/registration.ts        | 69 +++++++++++++++++++
 yarn.lock                                     | 43 +++++++++++-
 8 files changed, 151 insertions(+), 14 deletions(-)
 create mode 100644 packages/ui-extensions/src/surfaces/admin/registration.ts

diff --git a/package.json b/package.json
index 89a4d1322d..e9b9703f6c 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@shopify/loom-plugin-eslint": "^2.0.0",
     "@shopify/loom-plugin-prettier": "^2.0.0",
     "@shopify/typescript-configs": "^5.1.0",
+    "@rollup/plugin-replace": "^6.0.1",
     "eslint": "^8.28.0",
     "nodemon": "^2.0.4",
     "prettier": "^2.8.0",
diff --git a/packages/ui-extensions-react/package.json b/packages/ui-extensions-react/package.json
index d7523dc844..331dbce19d 100644
--- a/packages/ui-extensions-react/package.json
+++ b/packages/ui-extensions-react/package.json
@@ -63,11 +63,13 @@
   "dependencies": {
     "@remote-ui/async-subscription": "^2.1.12",
     "@remote-ui/react": "^5.0.2",
-    "@types/react": ">=18.2.67"
+    "@types/react": ">=18.2.67",
+    "@types/react-dom": ">=18.2.67"
   },
   "peerDependencies": {
     "@shopify/ui-extensions": "0.0.0-unstable",
-    "react": ">=18.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "peerDependenciesMeta": {
     "@shopify/ui-extensions": {
@@ -75,6 +77,9 @@
     },
     "react": {
       "optional": false
+    },
+    "react-dom": {
+      "optional": false
     }
   },
   "devDependencies": {
diff --git a/packages/ui-extensions-react/src/surfaces/admin/render.tsx b/packages/ui-extensions-react/src/surfaces/admin/render.tsx
index 6984900d3b..eaf0b365c0 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/render.tsx
+++ b/packages/ui-extensions-react/src/surfaces/admin/render.tsx
@@ -1,5 +1,5 @@
 import type {ReactElement} from 'react';
-import {render as remoteRender} from '@remote-ui/react';
+import {createRoot} from 'react-dom/client';
 
 import {extension} from '@shopify/ui-extensions/admin';
 import type {
@@ -36,17 +36,15 @@ export function reactExtension<ExtensionTarget extends RenderExtensionTarget>(
   return extension<'Playground'>(target as any, async (root, api) => {
     const element = await render(api as ApiForRenderExtension<ExtensionTarget>);
 
-    await new Promise<void>((resolve, reject) => {
+    await new Promise<() => void>((resolve, reject) => {
       try {
-        remoteRender(
+        const reactRoot = createRoot(root);
+        reactRoot.render(
           <ExtensionApiContext.Provider value={api}>
             {element}
           </ExtensionApiContext.Provider>,
-          root,
-          () => {
-            resolve();
-          },
         );
+        resolve(() => reactRoot.unmount());
       } catch (error) {
         // Workaround for https://github.com/Shopify/ui-extensions/issues/325
         // eslint-disable-next-line no-console
diff --git a/packages/ui-extensions/loom.config.ts b/packages/ui-extensions/loom.config.ts
index e86417c32a..49eced95f0 100644
--- a/packages/ui-extensions/loom.config.ts
+++ b/packages/ui-extensions/loom.config.ts
@@ -1,6 +1,14 @@
 import {createPackage} from '@shopify/loom';
+import {readFileSync} from 'fs';
+import {resolve} from 'path';
 
 import {defaultProjectPlugin} from '../../config/loom';
+import {rollupPlugins} from '@shopify/loom-plugin-build-library';
+import replace from '@rollup/plugin-replace';
+
+const packageJSON = JSON.parse(
+  readFileSync(resolve(__dirname, './package.json')).toString(),
+);
 
 export default createPackage((pkg) => {
   pkg.entry({root: './src/index.ts'});
@@ -11,5 +19,15 @@ export default createPackage((pkg) => {
     name: 'customer-account',
     root: './src/surfaces/customer-account.ts',
   });
-  pkg.use(defaultProjectPlugin());
+  pkg.use(
+    defaultProjectPlugin(),
+    rollupPlugins([
+      replace({
+        values: {
+          __UI_EXTENSION_VERSION__: (packageJSON as any).version,
+        },
+        preventAssignment: true,
+      }),
+    ]),
+  );
 });
diff --git a/packages/ui-extensions/src/surfaces/admin/extension.ts b/packages/ui-extensions/src/surfaces/admin/extension.ts
index f93c50cedc..f874b5860f 100644
--- a/packages/ui-extensions/src/surfaces/admin/extension.ts
+++ b/packages/ui-extensions/src/surfaces/admin/extension.ts
@@ -1,8 +1,12 @@
-import {createExtensionRegistrationFunction} from '../../utilities/registration';
+import {createExtensionRegistrationFunction} from './registration';
 
 import type {ExtensionTargets} from './extension-targets';
 
-export * from '../../extension';
+export type {
+  RenderExtension,
+  RenderExtensionWithRoot,
+  ExtensionRegistrationFunctionWithRoot,
+} from './registration';
 
 export const extension =
   createExtensionRegistrationFunction<ExtensionTargets>();
diff --git a/packages/ui-extensions/src/surfaces/admin/globals.ts b/packages/ui-extensions/src/surfaces/admin/globals.ts
index f4c61dc51f..7a765222c5 100644
--- a/packages/ui-extensions/src/surfaces/admin/globals.ts
+++ b/packages/ui-extensions/src/surfaces/admin/globals.ts
@@ -2,7 +2,8 @@ import type {ExtensionTargets} from './extension-targets';
 
 export interface ShopifyGlobal {
   extend<ExtensionTarget extends keyof ExtensionTargets>(
-    extension: ExtensionTarget,
+    target: ExtensionTarget,
     extend: ExtensionTargets[ExtensionTarget],
+    version?: string,
   ): void;
 }
diff --git a/packages/ui-extensions/src/surfaces/admin/registration.ts b/packages/ui-extensions/src/surfaces/admin/registration.ts
new file mode 100644
index 0000000000..3013d134ed
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/registration.ts
@@ -0,0 +1,69 @@
+export interface RenderExtension<Api> {
+  (root: HTMLElement, api: Api): void | Promise<void>;
+}
+
+export interface RenderExtensionWithRoot<Api> {
+  (root: HTMLElement, api: Api): () => void | Promise<() => void>;
+}
+
+export interface RunnableExtension<Api, Output> {
+  (api: Api): Output | Promise<Output>;
+}
+
+export interface ExtensionRegistrationFunction<ExtensionTargets> {
+  <Target extends keyof ExtensionTargets>(
+    target: Target,
+    implementation: ExtensionTargets[Target],
+  ): ExtensionTargets[Target];
+}
+
+export interface ExtensionRegistrationFunctionWithRoot<ExtensionTargets> {
+  <Target extends keyof ExtensionTargets>(
+    target: Target,
+    implementation: ExtensionTargets[Target] extends RenderExtension<infer Api>
+      ? RenderExtensionWithRoot<Api>
+      : ExtensionTargets[Target],
+  ): ExtensionTargets[Target];
+}
+
+/**
+ * This function returns a type-safe registration function for rendering and non-rendering extensions.
+ */
+export function createExtensionRegistrationFunction<
+  ExtensionTargets,
+>(): ExtensionRegistrationFunctionWithRoot<ExtensionTargets> {
+  const extensionWrapper: ExtensionRegistrationFunctionWithRoot<
+    ExtensionTargets
+  > = (target, implementation) => {
+    async function extension(...args: any[]) {
+      if (args.length === 1) {
+        return (implementation as any)(...args);
+      }
+
+      const [root, api] = args as [HTMLElement, any];
+
+      // Rendering extensions have two arguments and return a clean up function.
+      let renderResult = (implementation as any)(root, api);
+
+      if (
+        typeof renderResult === 'object' &&
+        renderResult != null &&
+        'then' in renderResult
+      ) {
+        renderResult = await renderResult;
+      }
+      // Return a noop if no clean up function was returned
+      return typeof renderResult === 'function' ? renderResult : () => {};
+    }
+
+    (globalThis as any).shopify?.extend(
+      target,
+      extension,
+      '@ui_extension_version:__UI_EXTENSION_VERSION__@',
+    );
+
+    return extension as any;
+  };
+
+  return extensionWrapper;
+}
diff --git a/yarn.lock b/yarn.lock
index f33e6be4a9..5ca1799edf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1710,6 +1710,11 @@
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
+"@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
 "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
   version "0.3.25"
   resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz"
@@ -1844,6 +1849,14 @@
     is-module "^1.0.0"
     resolve "^1.19.0"
 
+"@rollup/plugin-replace@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-6.0.1.tgz#547e238f7db994ebe63dd5329ec46ffccf696029"
+  integrity sha512-2sPh9b73dj5IxuMmDAsQWVFT7mR+yoHweBaXG2W/R8vQ+IWZlnaI7BR7J6EguVQUp1hd8Z7XuozpDjEKQAAC2Q==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    magic-string "^0.30.3"
+
 "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz"
@@ -1853,6 +1866,15 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^5.0.1":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.2.tgz#d3bc9f0fea4fd4086aaac6aa102f3fa587ce8bd9"
+  integrity sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
 "@shopify/babel-preset@^24.1.0", "@shopify/babel-preset@^24.1.4":
   version "24.1.5"
   resolved "https://registry.npmjs.org/@shopify/babel-preset/-/babel-preset-24.1.5.tgz"
@@ -2081,6 +2103,11 @@
   resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/estree@^1.0.0":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
 "@types/fs-extra@^9.0.0":
   version "9.0.13"
   resolved "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz"
@@ -2170,6 +2197,13 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz"
   integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
 
+"@types/react-dom@>=18.2.67":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.1.tgz#1e4654c08a9cdcfb6594c780ac59b55aad42fe07"
+  integrity sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-reconciler@>=0.26.0 <0.30.0":
   version "0.28.8"
   resolved "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.8.tgz"
@@ -3762,7 +3796,7 @@ estree-walker@^1.0.1:
   resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
-estree-walker@^2.0.1:
+estree-walker@^2.0.1, estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -5368,6 +5402,13 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
+magic-string@^0.30.3:
+  version "0.30.12"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.12.tgz#9eb11c9d072b9bcb4940a5b2c2e1a217e4ee1a60"
+  integrity sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz"

From e0cb8edbf9fc9c9e0c36634c6c22da7455a2430c Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Thu, 17 Oct 2024 13:59:55 -0400
Subject: [PATCH 02/12] Refactor components

---
 .changeset/pretty-terms-switch.md             |   6 +
 .../components/AdminAction/AdminAction.ts     |  14 +-
 .../admin/components/AdminBlock/AdminBlock.ts |  12 +-
 .../AdminPrintAction/AdminPrintAction.ts      |  13 +-
 .../surfaces/admin/components/Badge/Badge.ts  |   7 +-
 .../admin/components/Banner/Banner.ts         |  12 +-
 .../admin/components/BlockStack/BlockStack.ts |  10 +-
 .../src/surfaces/admin/components/Box/Box.ts  |   7 +-
 .../admin/components/Button/Button.ts         |   9 +-
 .../admin/components/Checkbox/Checkbox.ts     |   9 +-
 .../admin/components/ChoiceList/ChoiceList.ts |  10 +-
 .../components/ColorPicker/ColorPicker.ts     |  10 +-
 .../CustomerSegmentTemplate.ts                |  10 +-
 .../admin/components/DateField/DateField.ts   |   6 +-
 .../admin/components/DatePicker/DatePicker.ts |   6 +-
 .../admin/components/Divider/Divider.ts       |   6 +-
 .../admin/components/EmailField/EmailField.ts |   6 +-
 .../surfaces/admin/components/Form/Form.ts    |   6 +-
 .../FunctionSettings/FunctionSettings.ts      |   7 +-
 .../admin/components/Heading/Heading.ts       |   6 +-
 .../components/HeadingGroup/HeadingGroup.ts   |   6 +-
 .../surfaces/admin/components/Icon/Icon.ts    |   6 +-
 .../surfaces/admin/components/Image/Image.ts  |   7 +-
 .../components/InlineStack/InlineStack.ts     |  10 +-
 .../InternalCustomerSegmentTemplate.ts        |  10 +-
 .../InternalLocationList.ts                   |  10 +-
 .../surfaces/admin/components/Link/Link.ts    |   6 +-
 .../admin/components/MoneyField/MoneyField.ts |   6 +-
 .../components/NumberField/NumberField.ts     |   6 +-
 .../admin/components/Paragraph/Paragraph.ts   |   6 +-
 .../components/PasswordField/PasswordField.ts |   6 +-
 .../admin/components/Pressable/Pressable.ts   |  10 +-
 .../ProgressIndicator/ProgressIndicator.ts    |  10 +-
 .../admin/components/Section/Section.ts       |   6 +-
 .../admin/components/Select/Select.ts         |  10 +-
 .../surfaces/admin/components/Text/Text.ts    |   6 +-
 .../admin/components/TextArea/TextArea.ts     |   9 +-
 .../admin/components/TextField/TextField.ts   |   6 +-
 .../admin/components/URLField/URLField.ts     |   6 +-
 .../src/surfaces/admin/components/util.ts     |  39 ++++
 .../src/surfaces/admin/render.tsx             |   2 +-
 .../src/surfaces/admin/components.ts          |  38 ----
 .../components/AdminAction/AdminAction.ts     |   8 -
 .../admin/components/AdminBlock/AdminBlock.ts |   6 -
 .../AdminPrintAction/AdminPrintAction.ts      |  10 -
 .../surfaces/admin/components/Badge/Badge.ts  |   3 -
 .../admin/components/Banner/Banner.ts         |   4 +-
 .../admin/components/BlockStack/BlockStack.ts |   6 -
 .../src/surfaces/admin/components/Box/Box.ts  |   3 -
 .../admin/components/Button/Button.ts         |   3 -
 .../admin/components/Checkbox/Checkbox.ts     |   5 -
 .../admin/components/ChoiceList/ChoiceList.ts |   5 -
 .../components/ColorPicker/ColorPicker.ts     |   7 -
 .../CustomerSegmentTemplate.ts                |  10 -
 .../admin/components/DateField/DateField.ts   |   5 -
 .../admin/components/DatePicker/DatePicker.ts |   7 -
 .../admin/components/Divider/Divider.ts       |   6 -
 .../admin/components/EmailField/EmailField.ts |   5 -
 .../surfaces/admin/components/Form/Form.ts    |   4 -
 .../FunctionSettings/FunctionSettings.ts      |   7 -
 .../admin/components/Heading/Heading.ts       |   6 -
 .../components/HeadingGroup/HeadingGroup.ts   |   7 -
 .../surfaces/admin/components/Icon/Icon.ts    |   3 -
 .../surfaces/admin/components/Image/Image.ts  |   3 -
 .../components/InlineStack/InlineStack.ts     |   7 -
 .../InternalCustomerSegmentTemplate.ts        |  10 -
 .../InternalLocationList.ts                   |   7 -
 .../surfaces/admin/components/Link/Link.ts    |   3 -
 .../admin/components/MoneyField/MoneyField.ts |   5 -
 .../components/NumberField/NumberField.ts     |   6 -
 .../admin/components/Paragraph/Paragraph.ts   |   5 -
 .../components/PasswordField/PasswordField.ts |   6 -
 .../admin/components/Pressable/Pressable.ts   |   5 -
 .../ProgressIndicator/ProgressIndicator.ts    |   6 -
 .../admin/components/Section/Section.ts       |   6 -
 .../admin/components/Select/Select.ts         |   4 -
 .../surfaces/admin/components/Text/Text.ts    |   3 -
 .../admin/components/TextArea/TextArea.ts     |   6 -
 .../admin/components/TextField/TextField.ts   |   5 -
 .../admin/components/URLField/URLField.ts     |   5 -
 .../src/surfaces/admin/extension-targets.ts   | 204 +++++-------------
 .../src/surfaces/admin/extension.ts           |   1 -
 .../src/surfaces/admin/registration.ts        |  10 +-
 83 files changed, 221 insertions(+), 599 deletions(-)
 create mode 100644 .changeset/pretty-terms-switch.md
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/util.ts

diff --git a/.changeset/pretty-terms-switch.md b/.changeset/pretty-terms-switch.md
new file mode 100644
index 0000000000..a79f1505cf
--- /dev/null
+++ b/.changeset/pretty-terms-switch.md
@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions-react': minor
+'@shopify/ui-extensions': minor
+---
+
+Support remote-dom for Admin surface
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts
index b2c2d76c21..7134a86e09 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts
@@ -1,13 +1,5 @@
-import {AdminAction as BaseAdminAction} from '@shopify/ui-extensions/admin';
-import {
-  createRemoteReactComponent,
-  ReactPropsFromRemoteComponentType,
-} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const AdminAction = createRemoteReactComponent(BaseAdminAction, {
-  fragmentProps: ['primaryAction', 'secondaryAction'],
-});
+export type {AdminActionProps} from '@shopify/ui-extensions/admin';
 
-export type AdminActionProps = ReactPropsFromRemoteComponentType<
-  typeof BaseAdminAction
->;
+export const AdminAction = createRemoteComponent('ui-admin-action');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
index a77456e099..69e548e094 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
@@ -1,11 +1,5 @@
-import {AdminBlock as BaseAdminBlock} from '@shopify/ui-extensions/admin';
-import {
-  createRemoteReactComponent,
-  ReactPropsFromRemoteComponentType,
-} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const AdminBlock = createRemoteReactComponent(BaseAdminBlock);
+export type {AdminBlockProps} from '@shopify/ui-extensions/admin';
 
-export type AdminBlockProps = ReactPropsFromRemoteComponentType<
-  typeof BaseAdminBlock
->;
+export const AdminBlock = createRemoteComponent('ui-admin-block');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
index 2a68dad70b..cfbd27f3ea 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
@@ -1,12 +1,5 @@
-import {AdminPrintAction as BaseAdminPrintAction} from '@shopify/ui-extensions/admin';
-import {
-  createRemoteReactComponent,
-  ReactPropsFromRemoteComponentType,
-} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const AdminPrintAction =
-  createRemoteReactComponent(BaseAdminPrintAction);
+export type {AdminPrintActionProps} from '@shopify/ui-extensions/admin';
 
-export type AdminPrintActionProps = ReactPropsFromRemoteComponentType<
-  typeof BaseAdminPrintAction
->;
+export const AdminPrintAction = createRemoteComponent('ui-admin-print-action');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts
index 26ac638e51..051fc1ed8c 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts
@@ -1,6 +1,5 @@
-import {Badge as BaseBadge} from '@shopify/ui-extensions/admin';
-import type {BadgeProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Badge = createRemoteReactComponent<'Badge', BadgeProps>(BaseBadge);
 export type {BadgeProps} from '@shopify/ui-extensions/admin';
+
+export const Badge = createRemoteComponent('ui-badge');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts
index 4ecdc31030..728a34947a 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts
@@ -1,11 +1,5 @@
-import {Banner as BaseBanner} from '@shopify/ui-extensions/admin';
-import {
-  createRemoteReactComponent,
-  ReactPropsFromRemoteComponentType,
-} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Banner = createRemoteReactComponent(BaseBanner, {
-  fragmentProps: ['primaryAction', 'secondaryAction'],
-});
+export type {BannerProps} from '@shopify/ui-extensions/admin';
 
-export type BannerProps = ReactPropsFromRemoteComponentType<typeof BaseBanner>;
+export const Banner = createRemoteComponent('ui-banner');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts b/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts
index dd606c36cc..fb4d04559b 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts
@@ -1,9 +1,5 @@
-import {BlockStack as BaseBlockStack} from '@shopify/ui-extensions/admin';
-import type {BlockStackProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const BlockStack = createRemoteReactComponent<
-  'BlockStack',
-  BlockStackProps
->(BaseBlockStack);
 export type {BlockStackProps} from '@shopify/ui-extensions/admin';
+
+export const BlockStack = createRemoteComponent('ui-block-stack');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts
index 05a4ca92ed..b5a8afb606 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts
@@ -1,6 +1,5 @@
-import {Box as BaseBox} from '@shopify/ui-extensions/admin';
-import type {BoxProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Box = createRemoteReactComponent<'Box', BoxProps>(BaseBox);
 export type {BoxProps} from '@shopify/ui-extensions/admin';
+
+export const Box = createRemoteComponent('ui-box');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts
index 31376f27e9..931634df80 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts
@@ -1,8 +1,5 @@
-import {Button as BaseButton} from '@shopify/ui-extensions/admin';
-import type {ButtonProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Button = createRemoteReactComponent<'Button', ButtonProps>(
-  BaseButton,
-);
 export type {ButtonProps} from '@shopify/ui-extensions/admin';
+
+export const Button = createRemoteComponent('ui-button');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts
index 75ddfa2a82..0fc14909ac 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts
@@ -1,8 +1,5 @@
-import {Checkbox as BaseCheckbox} from '@shopify/ui-extensions/admin';
-import type {CheckboxProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Checkbox = createRemoteReactComponent<'Checkbox', CheckboxProps>(
-  BaseCheckbox,
-);
 export type {CheckboxProps} from '@shopify/ui-extensions/admin';
+
+export const Checkbox = createRemoteComponent('ui-checkbox');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
index bc750e7cd9..4aa60d67b4 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
@@ -1,9 +1,5 @@
-import {ChoiceList as BaseChoiceList} from '@shopify/ui-extensions/admin';
-import type {ChoiceListProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const ChoiceList = createRemoteReactComponent<
-  'ChoiceList',
-  ChoiceListProps
->(BaseChoiceList);
 export type {ChoiceListProps} from '@shopify/ui-extensions/admin';
+
+export const ChoiceList = createRemoteComponent('ui-choice-list');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
index 06217b89b1..375de0137a 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
@@ -1,9 +1,5 @@
-import {ColorPicker as BaseColorPicker} from '@shopify/ui-extensions/admin';
-import type {ColorPickerProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const ColorPicker = createRemoteReactComponent<
-  'ColorPicker',
-  ColorPickerProps
->(BaseColorPicker);
 export type {ColorPickerProps} from '@shopify/ui-extensions/admin';
+
+export const ColorPicker = createRemoteComponent('ui-color-picker');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts b/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
index 71ec0058b4..8110f65782 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
@@ -1,7 +1,7 @@
-import {CustomerSegmentTemplate as BaseCustomerSegmentTemplate} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const CustomerSegmentTemplate = createRemoteReactComponent(
-  BaseCustomerSegmentTemplate,
-);
 export type {CustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin';
+
+export const CustomerSegmentTemplate = createRemoteComponent(
+  'ui-customer-segment-template',
+);
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts
index 9c2cbf3134..c56494551d 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts
@@ -1,5 +1,5 @@
-import {DateField as BaseDateField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const DateField = createRemoteReactComponent(BaseDateField);
 export type {DateFieldProps} from '@shopify/ui-extensions/admin';
+
+export const DateField = createRemoteComponent('ui-date-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts
index 54923a8ad5..21f3cdbfeb 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts
@@ -1,5 +1,5 @@
-import {DatePicker as BaseDatePicker} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const DatePicker = createRemoteReactComponent(BaseDatePicker);
 export type {DatePickerProps} from '@shopify/ui-extensions/admin';
+
+export const DatePicker = createRemoteComponent('ui-date-picker');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts
index 0b2a3a535e..a26fac0e38 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts
@@ -1,5 +1,5 @@
-import {Divider as BaseDivider} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Divider = createRemoteReactComponent(BaseDivider);
 export type {DividerProps} from '@shopify/ui-extensions/admin';
+
+export const Divider = createRemoteComponent('ui-divider');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts
index fb96dc2f8e..6c3b7de33c 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts
@@ -1,5 +1,5 @@
-import {EmailField as BaseEmailField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const EmailField = createRemoteReactComponent(BaseEmailField);
 export type {EmailFieldProps} from '@shopify/ui-extensions/admin';
+
+export const EmailField = createRemoteComponent('ui-email-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts
index 68e3f4c308..d62ad110e5 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts
@@ -1,5 +1,5 @@
-import {Form as BaseForm} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Form = createRemoteReactComponent(BaseForm);
 export type {FormProps} from '@shopify/ui-extensions/admin';
+
+export const Form = createRemoteComponent('ui-form');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts b/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
index a656e3fd0e..4aadb0e056 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
@@ -1,9 +1,8 @@
-import {FunctionSettings as BaseFunctionSettings} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const FunctionSettings =
-  createRemoteReactComponent(BaseFunctionSettings);
 export type {
   FunctionSettingsProps,
   FunctionSettingsError,
 } from '@shopify/ui-extensions/admin';
+
+export const FunctionSettings = createRemoteComponent('ui-functipo');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts
index 771b352bea..b6e6d73b61 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts
@@ -1,5 +1,5 @@
-import {Heading as BaseHeading} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Heading = createRemoteReactComponent(BaseHeading);
 export type {HeadingProps} from '@shopify/ui-extensions/admin';
+
+export const Heading = createRemoteComponent('ui-heading');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts b/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
index 32f411f5da..7f6f45c247 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
@@ -1,5 +1,5 @@
-import {HeadingGroup as BaseHeadingGroup} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const HeadingGroup = createRemoteReactComponent(BaseHeadingGroup);
 export type {HeadingGroupProps} from '@shopify/ui-extensions/admin';
+
+export const HeadingGroup = createRemoteComponent('ui-heading-group');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts
index 45aaa47154..c50233a7c3 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts
@@ -1,5 +1,5 @@
-import {Icon as BaseIcon} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Icon = createRemoteReactComponent(BaseIcon);
 export type {IconProps} from '@shopify/ui-extensions/admin';
+
+export const Icon = createRemoteComponent('ui-icon');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts
index 4440a48eb1..82b47d2918 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts
@@ -1,6 +1,5 @@
-import {Image as BaseImage} from '@shopify/ui-extensions/admin';
-import type {ImageProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Image = createRemoteReactComponent<'Image', ImageProps>(BaseImage);
 export type {ImageProps} from '@shopify/ui-extensions/admin';
+
+export const Image = createRemoteComponent('ui-image');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts
index 7b8eba3454..140cc12bf6 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts
@@ -1,9 +1,5 @@
-import {InlineStack as BaseInlineStack} from '@shopify/ui-extensions/admin';
-import type {InlineStackProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const InlineStack = createRemoteReactComponent<
-  'InlineStack',
-  InlineStackProps
->(BaseInlineStack);
 export type {InlineStackProps} from '@shopify/ui-extensions/admin';
+
+export const InlineStack = createRemoteComponent('ui-inline-stack');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
index d41489cfbe..74b94026cd 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
@@ -1,7 +1,7 @@
-import {InternalCustomerSegmentTemplate as BaseInternalCustomerSegmentTemplate} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const InternalCustomerSegmentTemplate = createRemoteReactComponent(
-  BaseInternalCustomerSegmentTemplate,
-);
 export type {InternalCustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin';
+
+export const InternalCustomerSegmentTemplate = createRemoteComponent(
+  'ui-internal-customer-segment-template',
+);
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
index 72e392ed18..557356e83e 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
@@ -1,7 +1,7 @@
-import {InternalLocationList as BaseInternalLocationList} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const InternalLocationList = createRemoteReactComponent(
-  BaseInternalLocationList,
-);
 export type {InternalLocationListProps} from '@shopify/ui-extensions/admin';
+
+export const InternalLocationList = createRemoteComponent(
+  'ui-internal-location-list',
+);
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts
index 7839408e6f..bda27989cb 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts
@@ -1,5 +1,5 @@
-import {Link as BaseLink} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Link = createRemoteReactComponent(BaseLink);
 export type {LinkProps} from '@shopify/ui-extensions/admin';
+
+export const Link = createRemoteComponent('ui-link');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts
index d2f04f946b..f176a02a64 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts
@@ -1,5 +1,5 @@
-import {MoneyField as BaseMoneyField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const MoneyField = createRemoteReactComponent(BaseMoneyField);
 export type {MoneyFieldProps} from '@shopify/ui-extensions/admin';
+
+export const MoneyField = createRemoteComponent('ui-money-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts
index dff37fc7ad..3f44e86e6c 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts
@@ -1,5 +1,5 @@
-import {NumberField as BaseNumberField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const NumberField = createRemoteReactComponent(BaseNumberField);
 export type {NumberFieldProps} from '@shopify/ui-extensions/admin';
+
+export const NumberField = createRemoteComponent('ui-number-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts
index 0a3ada05d5..d727b8839a 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts
@@ -1,5 +1,5 @@
-import {Paragraph as BaseParagraph} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Paragraph = createRemoteReactComponent(BaseParagraph);
 export type {ParagraphProps} from '@shopify/ui-extensions/admin';
+
+export const Paragraph = createRemoteComponent('ui-paragraph');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts
index 42d1785e28..68f167a407 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts
@@ -1,5 +1,5 @@
-import {PasswordField as BasePasswordField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const PasswordField = createRemoteReactComponent(BasePasswordField);
 export type {PasswordFieldProps} from '@shopify/ui-extensions/admin';
+
+export const PasswordField = createRemoteComponent('ui-password-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts
index bac20a88a4..fcca37defb 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts
@@ -1,9 +1,5 @@
-import {Pressable as BasePressable} from '@shopify/ui-extensions/admin';
-import type {PressableProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Pressable = createRemoteReactComponent<
-  'Pressable',
-  PressableProps
->(BasePressable);
 export type {PressableProps} from '@shopify/ui-extensions/admin';
+
+export const Pressable = createRemoteComponent('ui-pressable');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
index 655e9ab99d..b10c177190 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
@@ -1,9 +1,5 @@
-import {ProgressIndicator as BaseProgressIndicator} from '@shopify/ui-extensions/admin';
-import type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const ProgressIndicator = createRemoteReactComponent<
-  'ProgressIndicator',
-  ProgressIndicatorProps
->(BaseProgressIndicator);
 export type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin';
+
+export const ProgressIndicator = createRemoteComponent('ui-progress-indicator');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts
index d4413c2db0..6cc484c553 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts
@@ -1,5 +1,5 @@
-import {Section as BaseSection} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Section = createRemoteReactComponent(BaseSection);
 export type {SectionProps} from '@shopify/ui-extensions/admin';
+
+export const Section = createRemoteComponent('ui-section');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts
index 92bfcc35a4..9f0b79f156 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts
@@ -1,11 +1,11 @@
-import {Select as BaseSelect} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Select = createRemoteReactComponent(BaseSelect);
 export type {
   SelectProps,
-  OptionProps,
-  OptionGroupProps,
   OptionDescription,
   OptionGroupDescription,
+  OptionGroupProps,
+  OptionProps,
 } from '@shopify/ui-extensions/admin';
+
+export const Select = createRemoteComponent('ui-select');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts
index da9044c131..8f040b4fce 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts
@@ -1,5 +1,5 @@
-import {Text as BaseText} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const Text = createRemoteReactComponent(BaseText);
 export type {TextProps} from '@shopify/ui-extensions/admin';
+
+export const Text = createRemoteComponent('ui-text');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts b/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts
index e0e88fe373..a9f53e617f 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts
@@ -1,8 +1,5 @@
-import {TextArea as BaseTextArea} from '@shopify/ui-extensions/admin';
-import type {TextAreaProps} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const TextArea = createRemoteReactComponent<'TextArea', TextAreaProps>(
-  BaseTextArea,
-);
 export type {TextAreaProps} from '@shopify/ui-extensions/admin';
+
+export const TextArea = createRemoteComponent('ui-text-area');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts
index 1442cb606d..624fb6eed5 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts
@@ -1,5 +1,5 @@
-import {TextField as BaseTextField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const TextField = createRemoteReactComponent(BaseTextField);
 export type {TextFieldProps} from '@shopify/ui-extensions/admin';
+
+export const TextField = createRemoteComponent('ui-text-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts
index f6c2d0d074..1811e45fdd 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts
@@ -1,5 +1,5 @@
-import {URLField as BaseURLField} from '@shopify/ui-extensions/admin';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {createRemoteComponent} from '../util';
 
-export const URLField = createRemoteReactComponent(BaseURLField);
 export type {URLFieldProps} from '@shopify/ui-extensions/admin';
+
+export const URLField = createRemoteComponent('ui-url-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/util.ts b/packages/ui-extensions-react/src/surfaces/admin/components/util.ts
new file mode 100644
index 0000000000..f011fda1c5
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/util.ts
@@ -0,0 +1,39 @@
+import {
+  createElement,
+  useRef,
+  useLayoutEffect,
+  useCallback,
+  forwardRef,
+  ComponentType,
+} from 'react';
+
+// These are the pieces of the passed-in copy of `react` we use:
+export interface InjectedReact {
+  createElement: typeof createElement;
+  useRef: typeof useRef;
+  useLayoutEffect: typeof useLayoutEffect;
+  useCallback: typeof useCallback;
+  forwardRef: typeof forwardRef;
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace shopify {
+    const _createReactRemoteComponent: (
+      methods: InjectedReact,
+      name: string,
+    ) => ComponentType;
+  }
+}
+
+export const createRemoteComponent = (name: string) =>
+  shopify._createReactRemoteComponent(
+    {
+      createElement,
+      useRef,
+      useLayoutEffect,
+      useCallback,
+      forwardRef,
+    },
+    name,
+  );
diff --git a/packages/ui-extensions-react/src/surfaces/admin/render.tsx b/packages/ui-extensions-react/src/surfaces/admin/render.tsx
index eaf0b365c0..047603fe6d 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/render.tsx
+++ b/packages/ui-extensions-react/src/surfaces/admin/render.tsx
@@ -36,7 +36,7 @@ export function reactExtension<ExtensionTarget extends RenderExtensionTarget>(
   return extension<'Playground'>(target as any, async (root, api) => {
     const element = await render(api as ApiForRenderExtension<ExtensionTarget>);
 
-    await new Promise<() => void>((resolve, reject) => {
+    return new Promise<() => void>((resolve, reject) => {
       try {
         const reactRoot = createRoot(root);
         reactRoot.render(
diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts
index 2308539de5..555a77ce12 100644
--- a/packages/ui-extensions/src/surfaces/admin/components.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components.ts
@@ -1,75 +1,42 @@
-export {AdminAction} from './components/AdminAction/AdminAction';
 export type {AdminActionProps} from './components/AdminAction/AdminAction';
-export {AdminPrintAction} from './components/AdminPrintAction/AdminPrintAction';
 export type {AdminPrintActionProps} from './components/AdminPrintAction/AdminPrintAction';
-export {AdminBlock} from './components/AdminBlock/AdminBlock';
 export type {AdminBlockProps} from './components/AdminBlock/AdminBlock';
-export {Badge} from './components/Badge/Badge';
 export type {BadgeProps} from './components/Badge/Badge';
-export {Banner} from './components/Banner/Banner';
 export type {BannerProps} from './components/Banner/Banner';
-export {BlockStack} from './components/BlockStack/BlockStack';
 export type {BlockStackProps} from './components/BlockStack/BlockStack';
-export {Box} from './components/Box/Box';
 export type {BoxProps} from './components/Box/Box';
-export {Button} from './components/Button/Button';
 export type {ButtonProps} from './components/Button/Button';
-export {Checkbox} from './components/Checkbox/Checkbox';
 export type {CheckboxProps} from './components/Checkbox/Checkbox';
-export {ChoiceList} from './components/ChoiceList/ChoiceList';
 export type {ChoiceListProps} from './components/ChoiceList/ChoiceList';
-export {ColorPicker} from './components/ColorPicker/ColorPicker';
 export type {ColorPickerProps} from './components/ColorPicker/ColorPicker';
-export {CustomerSegmentTemplate} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
 export type {CustomerSegmentTemplateProps} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
-export {DateField} from './components/DateField/DateField';
 export type {DateFieldProps} from './components/DateField/DateField';
-export {DatePicker} from './components/DatePicker/DatePicker';
 export type {DatePickerProps} from './components/DatePicker/DatePicker';
-export {Divider} from './components/Divider/Divider';
 export type {DividerProps} from './components/Divider/Divider';
-export {EmailField} from './components/EmailField/EmailField';
 export type {EmailFieldProps} from './components/EmailField/EmailField';
-export {Form} from './components/Form/Form';
 export type {FormProps} from './components/Form/Form';
-export {FunctionSettings} from './components/FunctionSettings/FunctionSettings';
 export type {
   FunctionSettingsProps,
   FunctionSettingsError,
 } from './components/FunctionSettings/FunctionSettings';
-export {Heading} from './components/Heading/Heading';
 export type {HeadingProps} from './components/Heading/Heading';
-export {HeadingGroup} from './components/HeadingGroup/HeadingGroup';
 export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup';
-export {Icon} from './components/Icon/Icon';
 export type {IconProps} from './components/Icon/Icon';
-export {InlineStack} from './components/InlineStack/InlineStack';
 export type {InlineStackProps} from './components/InlineStack/InlineStack';
-export {InternalCustomerSegmentTemplate} from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate';
 export type {
   InternalCustomerSegmentTemplateProps,
   CustomerSegmentTemplateIcon,
   CustomerSegmentTemplateCategory,
 } from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate';
-export {Image} from './components/Image/Image';
 export type {ImageProps} from './components/Image/Image';
-export {Link} from './components/Link/Link';
 export type {LinkProps} from './components/Link/Link';
-export {MoneyField} from './components/MoneyField/MoneyField';
 export type {MoneyFieldProps} from './components/MoneyField/MoneyField';
-export {NumberField} from './components/NumberField/NumberField';
 export type {NumberFieldProps} from './components/NumberField/NumberField';
-export {Paragraph} from './components/Paragraph/Paragraph';
 export type {ParagraphProps} from './components/Paragraph/Paragraph';
-export {PasswordField} from './components/PasswordField/PasswordField';
 export type {PasswordFieldProps} from './components/PasswordField/PasswordField';
-export {Pressable} from './components/Pressable/Pressable';
 export type {PressableProps} from './components/Pressable/Pressable';
-export {ProgressIndicator} from './components/ProgressIndicator/ProgressIndicator';
 export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator';
-export {Section} from './components/Section/Section';
 export type {SectionProps} from './components/Section/Section';
-export {Select} from './components/Select/Select';
 export type {
   OptionDescription,
   OptionGroupDescription,
@@ -77,13 +44,8 @@ export type {
   OptionProps,
   SelectProps,
 } from './components/Select/Select';
-export {Text} from './components/Text/Text';
 export type {TextProps} from './components/Text/Text';
-export {TextArea} from './components/TextArea/TextArea';
 export type {TextAreaProps} from './components/TextArea/TextArea';
-export {TextField} from './components/TextField/TextField';
 export type {TextFieldProps} from './components/TextField/TextField';
-export {URLField} from './components/URLField/URLField';
 export type {URLFieldProps} from './components/URLField/URLField';
-export {InternalLocationList} from './components/InternalLocationList/InternalLocationList';
 export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList';
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts
index 63503ffa95..15e022a93a 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import type {RemoteFragment} from '@remote-ui/core';
 
 export interface AdminActionProps {
@@ -22,10 +21,3 @@ export interface AdminActionProps {
    */
   loading?: boolean;
 }
-/**
- * AdminAction is a component used by Admin Action extensions to configure a primary and secondary action and title.
- */
-export const AdminAction = createRemoteComponent<
-  'AdminAction',
-  AdminActionProps
->('AdminAction');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
index dffca8a604..846dd6a762 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export interface AdminBlockProps {
   /**
    * The title to display at the top of the app block. If not provided, the name of the extension will be used. Titles longer than 40 characters will be truncated.
@@ -13,7 +11,3 @@ export interface AdminBlockProps {
    */
   summary?: string;
 }
-
-export const AdminBlock = createRemoteComponent<'AdminBlock', AdminBlockProps>(
-  'AdminBlock',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
index 012892e6b5..1f759cec94 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export interface AdminPrintActionProps {
   /**
    * Sets the src URL of the preview and the document to print.
@@ -8,11 +6,3 @@ export interface AdminPrintActionProps {
    */
   src?: string;
 }
-
-/**
- * AdminPrintAction is a component used by Admin Print Action extensions to configure a src document to preview and print.
- */
-export const AdminPrintAction = createRemoteComponent<
-  'AdminPrintAction',
-  AdminPrintActionProps
->('AdminPrintAction');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts b/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts
index 079f7f2efc..26a478c85c 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import type {AccessibilityLabelProps, SizeScale, Tone} from '../shared';
 import {IconName} from '../Icon/IconName';
 
@@ -32,5 +31,3 @@ interface BadgeNoIconProps {
 }
 
 export type BadgeProps = BadgeBaseProps & (BadgeIconProps | BadgeNoIconProps);
-
-export const Badge = createRemoteComponent<'Badge', BadgeProps>('Badge');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts b/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts
index 8a80cef026..94f6bef550 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts
@@ -1,4 +1,4 @@
-import {RemoteFragment, createRemoteComponent} from '@remote-ui/core';
+import {RemoteFragment} from '@remote-ui/core';
 import {GlobalProps, Tone} from '../shared';
 
 export interface BannerProps extends GlobalProps {
@@ -29,5 +29,3 @@ export interface BannerProps extends GlobalProps {
    */
   secondaryAction?: RemoteFragment;
 }
-
-export const Banner = createRemoteComponent<'Banner', BannerProps>('Banner');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts b/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts
index 7f2772c607..08fb962c96 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 import {
   AccessibilityRoleProps,
   GlobalProps,
@@ -34,7 +32,3 @@ export interface BlockStackProps
    */
   blockAlignment?: MainAxisAlignment;
 }
-
-export const BlockStack = createRemoteComponent<'BlockStack', BlockStackProps>(
-  'BlockStack',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts b/packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts
index 007fc85818..b2873a14a5 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import type {
   AccessibilityRoleProps,
   PaddingProps,
@@ -11,5 +10,3 @@ export interface BoxProps
     SizingProps,
     PaddingProps,
     DisplayProps {}
-
-export const Box = createRemoteComponent<'Box', BoxProps>('Box');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts b/packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts
index e9537b20a0..5ded050f7a 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import type {AccessibilityRole, AnchorProps} from '../shared';
 
 export type ButtonProps = ButtonBaseProps | ButtonAnchorProps;
@@ -115,5 +114,3 @@ interface ButtonAnchorProps extends CommonProps {
    */
   onPress?: AnchorProps['onClick'];
 }
-
-export const Button = createRemoteComponent<'Button', ButtonProps>('Button');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts
index a3c8255468..673f9a8022 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import {AccessibilityLabelProps} from '../shared';
 
 export interface CheckboxProps extends AccessibilityLabelProps {
@@ -52,7 +51,3 @@ export interface CheckboxProps extends AccessibilityLabelProps {
    */
   value?: boolean;
 }
-
-export const Checkbox = createRemoteComponent<'Checkbox', CheckboxProps>(
-  'Checkbox',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts b/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
index ec8fb2c07c..ad35c01457 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import {AccessibilityLabelProps, InputProps} from '../shared';
 
 export interface ChoiceProps
@@ -30,7 +29,3 @@ export interface ChoiceListProps
    */
   multiple?: boolean;
 }
-
-export const ChoiceList = createRemoteComponent<'ChoiceList', ChoiceListProps>(
-  'ChoiceList',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts b/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
index affe50ac8d..b44222a013 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export interface ColorPickerProps {
   /** ID for the element. */
   id?: string;
@@ -36,8 +34,3 @@ export interface ColorPickerProps {
    */
   value?: string;
 }
-
-export const ColorPicker = createRemoteComponent<
-  'ColorPicker',
-  ColorPickerProps
->('ColorPicker');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts b/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
index 8259c4b069..b1eafced79 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 /**
  * Reserved namespace and key for the customer standard metafield used in the template's query.
  * More info - https://shopify.dev/docs/apps/custom-data/metafields/definitions/standard
@@ -35,11 +33,3 @@ export interface CustomerSegmentTemplateProps {
    */
   createdOn?: string;
 }
-
-/**
- * Customer segmentation templates are used to give merchants a starting point to create segments.
- */
-export const CustomerSegmentTemplate = createRemoteComponent<
-  'CustomerSegmentTemplate',
-  CustomerSegmentTemplateProps
->('CustomerSegmentTemplate');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts b/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts
index 724367980f..0a9a6485a7 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import type {DatePickerProps} from '../DatePicker/DatePicker';
 import type {TextFieldProps} from '../TextField/TextField';
 
@@ -20,7 +19,3 @@ export interface DateFieldProps
       DatePickerProps<string>,
       'yearMonth' | 'defaultYearMonth' | 'disabled' | 'onYearMonthChange'
     > {}
-
-export const DateField = createRemoteComponent<'DateField', DateFieldProps>(
-  'DateField',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts
index d01060c492..c54d03986c 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export interface DatePickerProps<T extends Selected> {
   /**
    * [Controlled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display.
@@ -93,8 +91,3 @@ export interface Range {
    */
   end?: DateString;
 }
-
-export const DatePicker = createRemoteComponent<
-  'DatePicker',
-  DatePickerProps<Selected>
->('DatePicker');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts b/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts
index 586fd4f886..9ac3ea593e 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export interface DividerProps {
   /**
    * Specify the direction of the divider.
@@ -9,7 +7,3 @@ export interface DividerProps {
    */
   direction?: 'inline' | 'block';
 }
-
-export const Divider = createRemoteComponent<'Divider', DividerProps>(
-  'Divider',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts b/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts
index ebaa5a067c..f98253529a 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import {
   AutocompleteProps,
   AnyAutocompleteField,
@@ -16,7 +15,3 @@ export type EmailAutocompleteField = Extract<
   AnyAutocompleteField,
   'email' | `${AutocompleteAddressGroup} email`
 >;
-
-export const EmailField = createRemoteComponent<'EmailField', EmailFieldProps>(
-  'EmailField',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts b/packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts
index b5a846bdc0..16aa8ad110 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export interface FormProps {
   /**
    * A unique identifier for the form.
@@ -16,5 +14,3 @@ export interface FormProps {
    */
   onReset(): void | Promise<void>;
 }
-
-export const Form = createRemoteComponent<'Form', FormProps>('Form');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts b/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
index 6c65f51218..729f9e26e8 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export interface FunctionSettingsProps {
   /**
    * A unique identifier for the form.
@@ -45,8 +43,3 @@ export interface FunctionSettingsError {
    */
   message: string;
 }
-
-export const FunctionSettings = createRemoteComponent<
-  'FunctionSettings',
-  FunctionSettingsProps
->('FunctionSettings');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts b/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts
index f4d25bd234..ea373ad81b 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 type Level = 1 | 2 | 3 | 4 | 5 | 6;
 
 export interface HeadingProps {
@@ -14,7 +12,3 @@ export interface HeadingProps {
    */
   size?: Level;
 }
-
-export const Heading = createRemoteComponent<'Heading', HeadingProps>(
-  'Heading',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts b/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
index 5e6df3cd94..0560c41736 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
@@ -1,8 +1 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export interface HeadingGroupProps {}
-
-export const HeadingGroup = createRemoteComponent<
-  'HeadingGroup',
-  HeadingGroupProps
->('HeadingGroup');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts
index be16b92184..ff5db53b21 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import {IconName} from './IconName';
 import {AccessibilityLabelProps} from '../shared';
 
@@ -34,5 +33,3 @@ export interface IconProps extends AccessibilityLabelProps {
   name: IconName;
 }
 export type {IconName};
-
-export const Icon = createRemoteComponent<'Icon', IconProps>('Icon');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts b/packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts
index fb23c40f57..31423f39b4 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import type {AccessibilityRole} from '../shared';
 
 export type ImageProps = (ImageAccessibilityLabelProp | ImageAltProp) &
@@ -119,5 +118,3 @@ interface ImageSourceProp {
   source: string;
   src?: never;
 }
-
-export const Image = createRemoteComponent<'Image', ImageProps>('Image');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts b/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts
index d46b9d610c..49801cf83c 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 import {
   AccessibilityRoleProps,
   GlobalProps,
@@ -32,8 +30,3 @@ export interface InlineStackProps
    */
   blockAlignment?: CrossAxisAlignment;
 }
-
-export const InlineStack = createRemoteComponent<
-  'InlineStack',
-  InlineStackProps
->('InlineStack');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts b/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
index b092089e7d..e2d2f7d6b4 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export type CustomerSegmentTemplateIcon =
   | 'categoriesMajor'
   | 'firstVisitMajor'
@@ -58,11 +56,3 @@ export interface InternalCustomerSegmentTemplateProps {
   /* The category in which the template will be visible. The template will show in its respective category and aggregate sections. */
   category: CustomerSegmentTemplateCategory;
 }
-
-/**
- * Customer segment templates are used to give merchants a starting point to create segments.
- */
-export const InternalCustomerSegmentTemplate = createRemoteComponent<
-  'InternalCustomerSegmentTemplate',
-  InternalCustomerSegmentTemplateProps
->('InternalCustomerSegmentTemplate');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts b/packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
index 2bfd67d97f..e01cf7c44a 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export interface Location {
   /**
    * A unique identifier for the location.
@@ -69,8 +67,3 @@ export interface InternalLocationListProps {
    */
   onCreateGroup: (id: string) => void;
 }
-
-export const InternalLocationList = createRemoteComponent<
-  'InternalLocationList',
-  InternalLocationListProps
->('InternalLocationList');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts
index 52aa75188f..3a33f8fa0c 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import {AccessibilityLabelProps} from '../shared';
 
 export interface LinkProps extends AccessibilityLabelProps {
@@ -59,5 +58,3 @@ export interface LinkProps extends AccessibilityLabelProps {
    */
   target?: '_blank' | '_self';
 }
-
-export const Link = createRemoteComponent<'Link', LinkProps>('Link');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts
index aa9f9a8c35..f208b09c1c 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import type {
   AutocompleteProps,
   AnyAutocompleteField,
@@ -19,10 +18,6 @@ export type MoneyAutocompleteField = Extract<
   'transaction-amount'
 >;
 
-export const MoneyField = createRemoteComponent<'MoneyField', MoneyFieldProps>(
-  'MoneyField',
-);
-
 /**
  * Supported monetary currencies from ISO 4217.
  *
diff --git a/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts b/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts
index 0690bc86a4..d106a8c977 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import {
   AutocompleteProps,
   AnyAutocompleteField,
@@ -28,8 +27,3 @@ export type NumberAutocompleteField = Extract<
   | `${AutocompleteFieldCreditCardAlias}-number`
   | `${AutocompleteFieldCreditCardAlias}-${AutocompleteFieldSecurityCodeAlias}`
 >;
-
-export const NumberField = createRemoteComponent<
-  'NumberField',
-  NumberFieldProps
->('NumberField');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts
index 1acc8cdeb6..419f14d4a3 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts
@@ -1,10 +1,5 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import type {BaseTypographyProps, GlobalProps} from '../shared';
 
 export interface ParagraphProps extends BaseTypographyProps, GlobalProps {
   children?: any;
 }
-
-export const Paragraph = createRemoteComponent<'Paragraph', ParagraphProps>(
-  'Paragraph',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts
index d7aa8d59a7..69b7748351 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import {
   AutocompleteProps,
   AnyAutocompleteField,
@@ -15,8 +14,3 @@ export type PasswordAutocompleteField = Extract<
   AnyAutocompleteField,
   'new-password' | 'current-password'
 >;
-
-export const PasswordField = createRemoteComponent<
-  'PasswordField',
-  PasswordFieldProps
->('PasswordField');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts b/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts
index 9d356131df..3e36467635 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts
@@ -1,9 +1,4 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import type {LinkProps} from '../Link/Link';
 import type {BoxProps} from '../Box/Box';
 
 export interface PressableProps extends BoxProps, LinkProps {}
-
-export const Pressable = createRemoteComponent<'Pressable', PressableProps>(
-  'Pressable',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
index a077bac6ba..d4c25706a5 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import {GlobalProps, SizeScale, AccessibilityLabelProps} from '../shared';
 
 export interface ProgressIndicatorProps
@@ -25,8 +24,3 @@ export interface ProgressIndicatorProps
    */
   variant?: 'spinner';
 }
-
-export const ProgressIndicator = createRemoteComponent<
-  'ProgressIndicator',
-  ProgressIndicatorProps
->('ProgressIndicator');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts b/packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts
index a650a703bb..c0151b7a88 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export interface SectionProps {
   /**
    * A label used to describe the section that will be announced by assistive technologies.
@@ -29,7 +27,3 @@ export interface SectionProps {
    */
   padding?: 'base' | 'none';
 }
-
-export const Section = createRemoteComponent<'Section', SectionProps>(
-  'Section',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts b/packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts
index 0b86aa7084..0703a70b91 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 export interface SelectProps {
   /**
    * Whether the select can be changed.
@@ -143,5 +141,3 @@ export interface OptionGroupDescription {
    */
   options?: OptionDescription[];
 }
-
-export const Select = createRemoteComponent<'Select', SelectProps>('Select');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts b/packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts
index 93b0ae9f5c..42b19d273c 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import type {
   FontWeight,
   TextOverflow,
@@ -41,5 +40,3 @@ export interface TextProps {
    */
   accessibilityRole?: TextAccessibilityRole;
 }
-
-export const Text = createRemoteComponent<'Text', TextProps>('Text');
diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts b/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts
index 48fc725e93..f0456fe434 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts
@@ -1,5 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
-
 import {
   AutocompleteProps,
   TextAutocompleteField,
@@ -18,7 +16,3 @@ export interface TextAreaProps
    */
   rows?: number;
 }
-
-export const TextArea = createRemoteComponent<'TextArea', TextAreaProps>(
-  'TextArea',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts b/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts
index 0e3e8610ac..802dcfa714 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import {
   AutocompleteProps,
   TextAutocompleteField,
@@ -12,7 +11,3 @@ export interface TextFieldProps
     MinMaxLengthProps,
     AutocompleteProps<TextAutocompleteField>,
     FieldDecorationProps {}
-
-export const TextField = createRemoteComponent<'TextField', TextFieldProps>(
-  'TextField',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts b/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts
index ba3e063473..8c4939e522 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts
@@ -1,4 +1,3 @@
-import {createRemoteComponent} from '@remote-ui/core';
 import {
   AnyAutocompleteField,
   AutocompleteProps,
@@ -20,7 +19,3 @@ export type URLAutocompleteField = Extract<
   | `${AutocompleteFieldInstantMessageAlias}`
   | `${AutocompleteAddressGroup} ${AutocompleteFieldInstantMessageAlias}`
 >;
-
-export const URLField = createRemoteComponent<'URLField', URLFieldProps>(
-  'URLField',
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts
index f86c527428..d2c8cfd0e9 100644
--- a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts
+++ b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts
@@ -1,6 +1,5 @@
-import type {RenderExtension} from '../../extension';
+import type {RenderExtension} from './extension';
 
-import type {Components} from './shared';
 import type {
   StandardApi,
   CustomerSegmentTemplateApi,
@@ -12,59 +11,18 @@ import type {
   OrderRoutingRuleApi,
   ValidationSettingsApi,
 } from './api';
-import {AnyComponentBuilder} from '../../shared';
-
-type CustomerSegmentTemplateComponent = AnyComponentBuilder<
-  Pick<
-    Components,
-    'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate'
-  >
->;
-
-type ProductConfigurationComponents = AnyComponentBuilder<
-  Pick<
-    Components,
-    | 'Box'
-    | 'InlineStack'
-    | 'BlockStack'
-    | 'Divider'
-    | 'HeadingGroup'
-    | 'Heading'
-    | 'Text'
-    | 'Link'
-    | 'Image'
-    | 'Icon'
-  >
->;
-
-type OrderRoutingComponents = AnyComponentBuilder<
-  Pick<Components, 'InternalLocationList'>
->;
-
-/**
- * See the [list of available components](/docs/api/admin-extensions/components).
- */
-type AllComponents = AnyComponentBuilder<
-  Omit<
-    Components,
-    | 'CustomerSegmentTemplate'
-    | 'InternalCustomerSegmentTemplate'
-    | 'InternalLocationList'
-  >
->;
 
 export interface ExtensionTargets {
   /**
    * @private
    */
-  Playground: RenderExtension<StandardApi<'Playground'>, AllComponents>;
+  Playground: RenderExtension<StandardApi<'Playground'>>;
 
   /**
    * Renders a [`CustomerSegmentTemplate`](/docs/api/admin-extensions/components/customersegmenttemplate) in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments).
    */
   'admin.customers.segmentation-templates.render': RenderExtension<
-    CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.render'>,
-    CustomerSegmentTemplateComponent
+    CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.render'>
   >;
 
   // Blocks
@@ -74,8 +32,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.product-details.block.render': RenderExtension<
-    BlockExtensionApi<'admin.product-details.block.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.product-details.block.render'>
   >;
 
   /**
@@ -84,8 +41,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.order-details.block.render': RenderExtension<
-    BlockExtensionApi<'admin.order-details.block.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.order-details.block.render'>
   >;
 
   /**
@@ -94,8 +50,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.discount-details.function-settings.render': RenderExtension<
-    BlockExtensionApi<'admin.discount-details.function-settings.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.discount-details.function-settings.render'>
   >;
 
   /**
@@ -104,8 +59,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.customer-details.block.render': RenderExtension<
-    BlockExtensionApi<'admin.customer-details.block.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.customer-details.block.render'>
   >;
 
   /**
@@ -114,8 +68,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.collection-details.block.render': RenderExtension<
-    BlockExtensionApi<'admin.collection-details.block.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.collection-details.block.render'>
   >;
 
   /**
@@ -124,8 +77,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.draft-order-details.block.render': RenderExtension<
-    BlockExtensionApi<'admin.draft-order-details.block.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.draft-order-details.block.render'>
   >;
 
   /**
@@ -134,8 +86,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.abandoned-checkout-details.block.render': RenderExtension<
-    BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>
   >;
 
   /**
@@ -144,8 +95,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.catalog-details.block.render': RenderExtension<
-    BlockExtensionApi<'admin.catalog-details.block.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.catalog-details.block.render'>
   >;
 
   /**
@@ -154,8 +104,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.company-details.block.render': RenderExtension<
-    BlockExtensionApi<'admin.company-details.block.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.company-details.block.render'>
   >;
 
   /**
@@ -164,8 +113,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.company-location-details.block.render': RenderExtension<
-    BlockExtensionApi<'admin.company-location-details.block.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.company-location-details.block.render'>
   >;
 
   /**
@@ -174,8 +122,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.gift-card-details.block.render': RenderExtension<
-    BlockExtensionApi<'admin.gift-card-details.block.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.gift-card-details.block.render'>
   >;
 
   /**
@@ -184,8 +131,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.product-variant-details.block.render': RenderExtension<
-    BlockExtensionApi<'admin.product-variant-details.block.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.product-variant-details.block.render'>
   >;
 
   /**
@@ -194,8 +140,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.product-details.reorder.render': RenderExtension<
-    BlockExtensionApi<'admin.product-details.reorder.render'>,
-    AllComponents
+    BlockExtensionApi<'admin.product-details.reorder.render'>
   >;
 
   // Actions
@@ -205,8 +150,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.product-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.product-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.product-details.action.render'>
   >;
 
   /**
@@ -215,8 +159,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.catalog-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.catalog-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.catalog-details.action.render'>
   >;
 
   /**
@@ -225,8 +168,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.company-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.company-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.company-details.action.render'>
   >;
 
   /**
@@ -235,8 +177,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.gift-card-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.gift-card-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.gift-card-details.action.render'>
   >;
 
   /**
@@ -245,8 +186,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.order-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.order-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.order-details.action.render'>
   >;
 
   /**
@@ -255,8 +195,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.customer-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.customer-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.customer-details.action.render'>
   >;
 
   /**
@@ -265,8 +204,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.customer-segment-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.customer-segment-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.customer-segment-details.action.render'>
   >;
 
   /**
@@ -275,8 +213,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.product-index.action.render': RenderExtension<
-    ActionExtensionApi<'admin.product-index.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.product-index.action.render'>
   >;
 
   /**
@@ -285,8 +222,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.order-index.action.render': RenderExtension<
-    ActionExtensionApi<'admin.order-index.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.order-index.action.render'>
   >;
 
   /**
@@ -295,8 +231,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.customer-index.action.render': RenderExtension<
-    ActionExtensionApi<'admin.customer-index.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.customer-index.action.render'>
   >;
 
   /**
@@ -305,8 +240,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.discount-index.action.render': RenderExtension<
-    ActionExtensionApi<'admin.discount-index.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.discount-index.action.render'>
   >;
 
   /**
@@ -315,8 +249,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.collection-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.collection-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.collection-details.action.render'>
   >;
 
   /**
@@ -325,8 +258,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.collection-index.action.render': RenderExtension<
-    ActionExtensionApi<'admin.collection-index.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.collection-index.action.render'>
   >;
 
   /**
@@ -335,8 +267,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.abandoned-checkout-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>
   >;
 
   /**
@@ -345,8 +276,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.product-variant-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.product-variant-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.product-variant-details.action.render'>
   >;
 
   /**
@@ -355,8 +285,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.draft-order-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.draft-order-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.draft-order-details.action.render'>
   >;
 
   /**
@@ -365,8 +294,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.draft-order-index.action.render': RenderExtension<
-    ActionExtensionApi<'admin.draft-order-index.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.draft-order-index.action.render'>
   >;
 
   /**
@@ -375,8 +303,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.discount-details.action.render': RenderExtension<
-    ActionExtensionApi<'admin.discount-details.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.discount-details.action.render'>
   >;
 
   /**
@@ -386,8 +313,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.order-fulfilled-card.action.render': RenderExtension<
-    ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.order-fulfilled-card.action.render'>
   >;
 
   // Bulk Actions
@@ -398,8 +324,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.product-index.selection-action.render': RenderExtension<
-    ActionExtensionApi<'admin.product-index.selection-action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.product-index.selection-action.render'>
   >;
 
   /**
@@ -408,8 +333,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.order-index.selection-action.render': RenderExtension<
-    ActionExtensionApi<'admin.order-index.selection-action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.order-index.selection-action.render'>
   >;
 
   /**
@@ -418,8 +342,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.customer-index.selection-action.render': RenderExtension<
-    ActionExtensionApi<'admin.customer-index.selection-action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.customer-index.selection-action.render'>
   >;
 
   /**
@@ -428,8 +351,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.draft-order-index.selection-action.render': RenderExtension<
-    ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,
-    AllComponents
+    ActionExtensionApi<'admin.draft-order-index.selection-action.render'>
   >;
 
   // Print actions and bulk print actions
@@ -440,8 +362,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.order-details.print-action.render': RenderExtension<
-    PrintActionExtensionApi<'admin.order-details.print-action.render'>,
-    AllComponents
+    PrintActionExtensionApi<'admin.order-details.print-action.render'>
   >;
 
   /**
@@ -450,8 +371,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.product-details.print-action.render': RenderExtension<
-    PrintActionExtensionApi<'admin.product-details.print-action.render'>,
-    AllComponents
+    PrintActionExtensionApi<'admin.product-details.print-action.render'>
   >;
 
   /**
@@ -460,8 +380,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.order-index.selection-print-action.render': RenderExtension<
-    PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,
-    AllComponents
+    PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>
   >;
 
   /**
@@ -470,8 +389,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.product-index.selection-print-action.render': RenderExtension<
-    PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,
-    AllComponents
+    PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>
   >;
 
   // Other
@@ -482,8 +400,7 @@ export interface ExtensionTargets {
    * See the [tutorial](/docs/apps/selling-strategies/bundles/product-config) for more information
    */
   'admin.product-details.configuration.render': RenderExtension<
-    ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,
-    ProductConfigurationComponents
+    ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>
   >;
 
   /**
@@ -492,8 +409,7 @@ export interface ExtensionTargets {
    * See the [tutorial](/docs/apps/selling-strategies/bundles/product-config) for more information
    */
   'admin.product-variant-details.configuration.render': RenderExtension<
-    ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,
-    ProductConfigurationComponents
+    ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>
   >;
 
   /**
@@ -502,12 +418,10 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.settings.internal-order-routing-rule.render': RenderExtension<
-    OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,
-    AllComponents | OrderRoutingComponents
+    OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>
   >;
   'admin.settings.order-routing-rule.render': RenderExtension<
-    OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,
-    AllComponents
+    OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>
   >;
 
   /**
@@ -516,8 +430,7 @@ export interface ExtensionTargets {
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
   'admin.settings.validation.render': RenderExtension<
-    ValidationSettingsApi<'admin.settings.validation.render'>,
-    AllComponents
+    ValidationSettingsApi<'admin.settings.validation.render'>
   >;
 }
 
@@ -547,10 +460,7 @@ export type ArgumentsForExtension<ID extends keyof ExtensionTargets> =
  * UI.
  */
 export type RenderExtensionTarget = {
-  [ID in keyof ExtensionTargets]: ExtensionTargets[ID] extends RenderExtension<
-    any,
-    any
-  >
+  [ID in keyof ExtensionTargets]: ExtensionTargets[ID] extends RenderExtension<any>
     ? ID
     : never;
 }[keyof ExtensionTargets];
@@ -562,16 +472,10 @@ export type RenderExtensions = {
   [ID in RenderExtensionTarget]: ExtensionTargets[ID];
 };
 
-type ExtractedApiFromRenderExtension<T> = T extends RenderExtension<
-  infer Api,
-  any
->
+type ExtractedApiFromRenderExtension<T> = T extends RenderExtension<infer Api>
   ? Api
   : never;
 
-type ExtractedAllowedComponentsFromRenderExtension<T> =
-  T extends RenderExtension<any, infer Components> ? Components : never;
-
 /**
  * For a given rendering extension target, returns the type of the API that the
  * extension will receive at runtime. This API type is the second argument to
@@ -580,11 +484,3 @@ type ExtractedAllowedComponentsFromRenderExtension<T> =
  */
 export type ApiForRenderExtension<ID extends keyof RenderExtensions> =
   ExtractedApiFromRenderExtension<RenderExtensions[ID]>;
-
-/**
- * For a given rendering extension target, returns the UI components that the
- * extension target supports.
- */
-export type AllowedComponentsForRenderExtension<
-  ID extends keyof RenderExtensions,
-> = ExtractedAllowedComponentsFromRenderExtension<RenderExtensions[ID]>;
diff --git a/packages/ui-extensions/src/surfaces/admin/extension.ts b/packages/ui-extensions/src/surfaces/admin/extension.ts
index f874b5860f..dc693c4e50 100644
--- a/packages/ui-extensions/src/surfaces/admin/extension.ts
+++ b/packages/ui-extensions/src/surfaces/admin/extension.ts
@@ -4,7 +4,6 @@ import type {ExtensionTargets} from './extension-targets';
 
 export type {
   RenderExtension,
-  RenderExtensionWithRoot,
   ExtensionRegistrationFunctionWithRoot,
 } from './registration';
 
diff --git a/packages/ui-extensions/src/surfaces/admin/registration.ts b/packages/ui-extensions/src/surfaces/admin/registration.ts
index 3013d134ed..5cb55190a5 100644
--- a/packages/ui-extensions/src/surfaces/admin/registration.ts
+++ b/packages/ui-extensions/src/surfaces/admin/registration.ts
@@ -1,9 +1,5 @@
 export interface RenderExtension<Api> {
-  (root: HTMLElement, api: Api): void | Promise<void>;
-}
-
-export interface RenderExtensionWithRoot<Api> {
-  (root: HTMLElement, api: Api): () => void | Promise<() => void>;
+  (root: HTMLElement, api: Api): Promise<() => void>;
 }
 
 export interface RunnableExtension<Api, Output> {
@@ -20,9 +16,7 @@ export interface ExtensionRegistrationFunction<ExtensionTargets> {
 export interface ExtensionRegistrationFunctionWithRoot<ExtensionTargets> {
   <Target extends keyof ExtensionTargets>(
     target: Target,
-    implementation: ExtensionTargets[Target] extends RenderExtension<infer Api>
-      ? RenderExtensionWithRoot<Api>
-      : ExtensionTargets[Target],
+    implementation: ExtensionTargets[Target],
   ): ExtensionTargets[Target];
 }
 

From 82991cd94f022cf7e898979aa8c23e22c32f22d3 Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Thu, 24 Oct 2024 12:14:52 -0400
Subject: [PATCH 03/12] Fix render extension return type Remove
 RunnableExtension type from Admin surface since it is unused

---
 .changeset/unlucky-cycles-invite.md                       | 6 ++++++
 packages/ui-extensions/src/surfaces/admin/registration.ts | 6 +-----
 2 files changed, 7 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/unlucky-cycles-invite.md

diff --git a/.changeset/unlucky-cycles-invite.md b/.changeset/unlucky-cycles-invite.md
new file mode 100644
index 0000000000..9e54cc9dd1
--- /dev/null
+++ b/.changeset/unlucky-cycles-invite.md
@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': patch
+---
+
+Fix return type for RenderExtension to optionally return a clean up function
+Remove unused RunnableExtension interface for Admin
diff --git a/packages/ui-extensions/src/surfaces/admin/registration.ts b/packages/ui-extensions/src/surfaces/admin/registration.ts
index 5cb55190a5..4860319bae 100644
--- a/packages/ui-extensions/src/surfaces/admin/registration.ts
+++ b/packages/ui-extensions/src/surfaces/admin/registration.ts
@@ -1,9 +1,5 @@
 export interface RenderExtension<Api> {
-  (root: HTMLElement, api: Api): Promise<() => void>;
-}
-
-export interface RunnableExtension<Api, Output> {
-  (api: Api): Output | Promise<Output>;
+  (root: HTMLElement, api: Api): Promise<void | (() => void)>;
 }
 
 export interface ExtensionRegistrationFunction<ExtensionTargets> {

From 27fc2238be489d1a6035ec74ca6a55e54fccb210 Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Wed, 13 Nov 2024 18:18:22 -0500
Subject: [PATCH 04/12] Add new remote-dom components for Admin

---
 .gitignore                                    |    2 +-
 config/typescript/tsconfig.base.json          |    1 +
 packages/data-extensions/package.json         |    2 +-
 .../ui-extensions-react/src/surfaces/admin.ts |    1 -
 .../src/surfaces/admin/components.ts          |   85 --
 .../components/AdminAction/AdminAction.ts     |    5 -
 .../examples/basic-adminaction.example.tsx    |   30 -
 .../admin/components/AdminBlock/AdminBlock.ts |    5 -
 .../examples/basic-adminblock.example.tsx     |   12 -
 .../AdminPrintAction/AdminPrintAction.ts      |    5 -
 .../basic-adminprintaction.example.tsx        |   19 -
 .../surfaces/admin/components/Badge/Badge.ts  |    5 -
 .../Badge/examples/basic-badge.example.tsx    |   13 -
 .../admin/components/Banner/Banner.ts         |    5 -
 .../Banner/examples/basic-banner.example.tsx  |   16 -
 .../admin/components/BlockStack/BlockStack.ts |    5 -
 .../examples/basic-blockstack.example.tsx     |   18 -
 .../src/surfaces/admin/components/Box/Box.ts  |    5 -
 .../Box/examples/basic-box.example.tsx        |   11 -
 .../admin/components/Button/Button.ts         |    5 -
 .../Button/examples/basic-button.example.tsx  |   15 -
 .../admin/components/Checkbox/Checkbox.ts     |    5 -
 .../examples/basic-checkbox.example.tsx       |   11 -
 .../admin/components/ChoiceList/ChoiceList.ts |    5 -
 .../examples/basic-choicelist.example.tsx     |   16 -
 .../components/ColorPicker/ColorPicker.ts     |    5 -
 .../examples/basic-colorpicker.example.tsx    |   17 -
 .../CustomerSegmentTemplate.ts                |    7 -
 .../customersegmenttemplate.example.tsx       |   15 -
 .../admin/components/DateField/DateField.ts   |    5 -
 .../examples/basic-datefield.example.tsx      |   15 -
 .../examples/multiple-datefield.example.tsx   |   16 -
 .../examples/range-datefield.example.tsx      |   16 -
 .../admin/components/DatePicker/DatePicker.ts |    5 -
 .../examples/basic-datepicker.example.tsx     |   15 -
 .../examples/multiple-datepicker.example.tsx  |   17 -
 .../examples/range-datepicker.example.tsx     |   16 -
 .../admin/components/Divider/Divider.ts       |    5 -
 .../examples/basic-divider.example.tsx        |   18 -
 .../admin/components/EmailField/EmailField.ts |    5 -
 .../examples/basic-emailfield.example.tsx     |    7 -
 .../surfaces/admin/components/Form/Form.ts    |    5 -
 .../Form/examples/basic-form.example.tsx      |   51 -
 .../FunctionSettings/FunctionSettings.ts      |    8 -
 .../basic-functionsettings.example.tsx        |   55 -
 .../admin/components/Heading/Heading.ts       |    5 -
 .../examples/basic-heading.example.tsx        |    7 -
 .../components/HeadingGroup/HeadingGroup.ts   |    5 -
 .../examples/basic-headinggroup.example.tsx   |   23 -
 .../surfaces/admin/components/Icon/Icon.ts    |    5 -
 .../Icon/examples/basic-icon.example.tsx      |    7 -
 .../surfaces/admin/components/Image/Image.ts  |    5 -
 .../Image/examples/basic-image.example.tsx    |    9 -
 .../components/InlineStack/InlineStack.ts     |    5 -
 .../examples/basic-inlinestack.example.tsx    |   18 -
 .../InternalCustomerSegmentTemplate.ts        |    7 -
 ...nternalcustomersegmenttemplate.example.tsx |   38 -
 .../InternalLocationList.ts                   |    7 -
 .../surfaces/admin/components/Link/Link.ts    |    5 -
 .../Link/examples/app-link.example.tsx        |   16 -
 .../Link/examples/external-link.example.tsx   |   16 -
 .../Link/examples/relative-link.example.tsx   |   16 -
 .../examples/shopify-section-link.example.tsx |   16 -
 .../admin/components/MoneyField/MoneyField.ts |    5 -
 .../examples/basic-moneyfield.example.tsx     |   10 -
 .../components/NumberField/NumberField.ts     |    5 -
 .../examples/basic-numberfield.example.tsx    |    7 -
 .../admin/components/Paragraph/Paragraph.ts   |    5 -
 .../examples/basic-paragraph.example.tsx      |   16 -
 .../components/PasswordField/PasswordField.ts |    5 -
 .../examples/basic-passwordfield.example.tsx  |   17 -
 .../admin/components/Pressable/Pressable.ts   |    5 -
 .../examples/basic-pressable.example.tsx      |   20 -
 .../ProgressIndicator/ProgressIndicator.ts    |    5 -
 .../basic-progressindicator.example.tsx       |   12 -
 .../admin/components/Section/Section.ts       |    5 -
 .../examples/basic-Section.example.tsx        |   16 -
 .../admin/components/Select/Select.ts         |   11 -
 .../Select/examples/basic-select.example.tsx  |   45 -
 .../surfaces/admin/components/Text/Text.ts    |    5 -
 .../Text/examples/basic-text.example.tsx      |   12 -
 .../admin/components/TextArea/TextArea.ts     |    5 -
 .../examples/basic-textarea.example.tsx       |    7 -
 .../admin/components/TextField/TextField.ts   |    5 -
 .../examples/basic-textfield.example.tsx      |    7 -
 .../admin/components/URLField/URLField.ts     |    5 -
 .../examples/basic-urlfield.example.tsx       |    7 -
 .../src/surfaces/admin/components/util.ts     |   39 -
 .../customer-account/hooks/live-navigation.ts |    4 +-
 packages/ui-extensions-react/tsconfig.json    |    3 +-
 packages/ui-extensions/package.json           |   55 +-
 packages/ui-extensions/src/surfaces/admin.ts  |    1 -
 .../src/surfaces/admin/components.ts          |  367 +++++-
 .../components/AdminAction/AdminAction.doc.ts |   47 -
 .../components/AdminAction/AdminAction.ts     |   23 -
 .../examples/basic-adminaction.example.ts     |   22 -
 .../components/AdminBlock/AdminBlock.doc.ts   |   47 -
 .../admin/components/AdminBlock/AdminBlock.ts |   13 -
 .../examples/basic-adminblock.example.ts      |   10 -
 .../AdminPrintAction/AdminPrintAction.doc.ts  |   52 -
 .../AdminPrintAction/AdminPrintAction.ts      |    8 -
 .../basic-adminprintaction.example.ts         |   14 -
 .../admin/components/Badge/Badge.doc.ts       |   42 -
 .../surfaces/admin/components/Badge/Badge.ts  |   33 -
 .../Badge/examples/basic-badge.example.ts     |   11 -
 .../admin/components/Banner/Banner.doc.ts     |   42 -
 .../admin/components/Banner/Banner.ts         |   31 -
 .../Banner/examples/basic-banner.example.ts   |   11 -
 .../components/BlockStack/BlockStack.doc.ts   |   48 -
 .../admin/components/BlockStack/BlockStack.ts |   34 -
 .../examples/basic-blockstack.example.ts      |   24 -
 .../surfaces/admin/components/Box/Box.doc.ts  |   42 -
 .../src/surfaces/admin/components/Box/Box.ts  |   12 -
 .../Box/examples/basic-box.example.ts         |   11 -
 .../admin/components/Button/Button.doc.ts     |   52 -
 .../admin/components/Button/Button.ts         |  116 --
 .../admin/components/Button/README.md         |    3 -
 .../Button/examples/basic-button.example.ts   |   11 -
 .../admin/components/Checkbox/Checkbox.doc.ts |   42 -
 .../admin/components/Checkbox/Checkbox.ts     |   53 -
 .../examples/basic-checkbox.example.ts        |   11 -
 .../components/ChoiceList/ChoiceList.doc.ts   |   48 -
 .../admin/components/ChoiceList/ChoiceList.ts |   31 -
 .../examples/basic-choicelist.example.ts      |   23 -
 .../components/ColorPicker/ColorPicker.doc.ts |   47 -
 .../components/ColorPicker/ColorPicker.ts     |   36 -
 .../examples/basic-colorpicker.example.ts     |   19 -
 .../CustomerSegmentTemplate.doc.ts            |   42 -
 .../CustomerSegmentTemplate.ts                |   35 -
 .../customersegmenttemplate.example.ts        |   17 -
 .../components/DateField/DateField.doc.ts     |   83 --
 .../admin/components/DateField/DateField.ts   |   21 -
 .../examples/basic-datefield.example.ts       |   11 -
 .../examples/multiple-datefield.example.ts    |   11 -
 .../examples/range-datefield.example.ts       |   11 -
 .../components/DatePicker/DatePicker.doc.ts   |   83 --
 .../admin/components/DatePicker/DatePicker.ts |   93 --
 .../examples/basic-datepicker.example.ts      |   11 -
 .../examples/multiple-datepicker.example.ts   |   11 -
 .../examples/range-datepicker.example.ts      |   11 -
 .../admin/components/Divider/Divider.doc.ts   |   42 -
 .../admin/components/Divider/Divider.ts       |    9 -
 .../admin/components/Divider/README.md        |    7 -
 .../Divider/examples/basic-divider.example.ts |   17 -
 .../components/EmailField/EmailField.doc.ts   |   51 -
 .../admin/components/EmailField/EmailField.ts |   17 -
 .../admin/components/EmailField/README.md     |    7 -
 .../examples/basic-emailfield.example.ts      |    9 -
 .../admin/components/Form/Form.doc.ts         |   57 -
 .../surfaces/admin/components/Form/Form.ts    |   16 -
 .../Form/examples/basic-form.example.ts       |   43 -
 .../FunctionSettings/FunctionSettings.doc.ts  |   57 -
 .../FunctionSettings/FunctionSettings.ts      |   45 -
 .../basic-functionsettings.example.ts         |   47 -
 .../admin/components/Heading/Heading.doc.ts   |   53 -
 .../admin/components/Heading/Heading.ts       |   14 -
 .../admin/components/Heading/README.md        |    9 -
 .../Heading/examples/basic-heading.example.ts |    7 -
 .../HeadingGroup/HeadingGroup.doc.ts          |   41 -
 .../components/HeadingGroup/HeadingGroup.ts   |    1 -
 .../admin/components/HeadingGroup/README.md   |    5 -
 .../examples/basic-headinggroup.example.ts    |   20 -
 .../admin/components/Icon/Icon.doc.ts         |   68 --
 .../surfaces/admin/components/Icon/Icon.ts    |   35 -
 .../admin/components/Icon/IconName.ts         |  567 ---------
 .../surfaces/admin/components/Icon/README.md  |    3 -
 .../Icon/examples/basic-icon.example.ts       |    7 -
 .../admin/components/Image/Image.doc.ts       |   47 -
 .../surfaces/admin/components/Image/Image.ts  |  120 --
 .../surfaces/admin/components/Image/README.md |   20 -
 .../Image/examples/basic-image.example.ts     |   10 -
 .../components/InlineStack/InlineStack.doc.ts |   47 -
 .../components/InlineStack/InlineStack.ts     |   32 -
 .../examples/basic-inlinestack.example.ts     |   18 -
 .../InternalCustomerSegmentTemplate.ts        |   59 -
 ...internalcustomersegmenttemplate.example.ts |   45 -
 .../InternalLocationList.ts                   |   69 --
 .../admin/components/Link/Link.doc.ts         |  109 --
 .../surfaces/admin/components/Link/Link.ts    |   60 -
 .../surfaces/admin/components/Link/README.md  |   11 -
 .../Link/examples/app-link.example.ts         |   17 -
 .../Link/examples/external-link.example.ts    |   17 -
 .../Link/examples/relative-link.example.ts    |   17 -
 .../examples/shopify-section-link.example.ts  |   17 -
 .../components/MoneyField/MoneyField.doc.ts   |   47 -
 .../admin/components/MoneyField/MoneyField.ts |  187 ---
 .../admin/components/MoneyField/README.md     |    3 -
 .../examples/basic-moneyfield.example.ts      |    9 -
 .../components/NumberField/NumberField.doc.ts |   48 -
 .../components/NumberField/NumberField.ts     |   29 -
 .../admin/components/NumberField/README.md    |    7 -
 .../examples/basic-numberfield.example.ts     |    9 -
 .../components/Paragraph/Paragraph.doc.ts     |   48 -
 .../admin/components/Paragraph/Paragraph.ts   |    5 -
 .../admin/components/Paragraph/README.md      |    7 -
 .../examples/basic-paragraph.example.ts       |   10 -
 .../PasswordField/PasswordField.doc.ts        |   53 -
 .../components/PasswordField/PasswordField.ts |   16 -
 .../admin/components/PasswordField/README.md  |    7 -
 .../examples/basic-passwordfield.example.ts   |   14 -
 .../components/Pressable/Pressable.doc.ts     |   48 -
 .../admin/components/Pressable/Pressable.ts   |    4 -
 .../examples/basic-pressable.example.ts       |   25 -
 .../ProgressIndicator.doc.ts                  |   48 -
 .../ProgressIndicator/ProgressIndicator.ts    |   26 -
 .../basic-progressindicator.example.ts        |   18 -
 .../admin/components/Section/README.md        |   95 --
 .../admin/components/Section/Section.doc.ts   |   41 -
 .../admin/components/Section/Section.ts       |   29 -
 .../Section/examples/basic-Section.example.ts |   19 -
 .../admin/components/Select/README.md         |   99 --
 .../admin/components/Select/Select.doc.ts     |   42 -
 .../admin/components/Select/Select.ts         |  143 ---
 .../Select/examples/basic-select.example.ts   |   47 -
 .../surfaces/admin/components/Text/README.md  |    7 -
 .../admin/components/Text/Text.doc.ts         |   48 -
 .../surfaces/admin/components/Text/Text.ts    |   42 -
 .../Text/examples/basic-text.example.ts       |   10 -
 .../admin/components/TextArea/TextArea.doc.ts |   48 -
 .../admin/components/TextArea/TextArea.ts     |   18 -
 .../examples/basic-textarea.example.ts        |   10 -
 .../admin/components/TextField/README.md      |    7 -
 .../components/TextField/TextField.doc.ts     |   58 -
 .../admin/components/TextField/TextField.ts   |   13 -
 .../examples/basic-textfield.example.ts       |    9 -
 .../admin/components/URLField/README.md       |    7 -
 .../admin/components/URLField/URLField.doc.ts |   46 -
 .../admin/components/URLField/URLField.ts     |   21 -
 .../examples/basic-urlfield.example.ts        |    9 -
 .../admin/components/shared/display.ts        |    7 -
 .../surfaces/admin/components/shared/index.ts | 1029 -----------------
 .../src/surfaces/admin/shared.ts              |    6 -
 packages/ui-extensions/tsconfig.json          |    4 +-
 packages/ui-extensions/vite.config.ts         |   41 +
 packages/ui-extensions/yarn.lock              |  233 ++++
 yarn.lock                                     |  736 +++++++++++-
 236 files changed, 1346 insertions(+), 7250 deletions(-)
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/basic-datefield.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/range-datefield.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/internalcustomersegmenttemplate.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/TextField/examples/basic-textfield.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.tsx
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/util.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Badge/examples/basic-badge.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Banner/examples/basic-banner.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Box/examples/basic-box.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Button/Button.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Button/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DateField/examples/basic-datefield.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DateField/examples/range-datefield.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Divider/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Divider/examples/basic-divider.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/EmailField/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Form/Form.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Form/examples/basic-form.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Heading/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Heading/examples/basic-heading.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Icon/IconName.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Icon/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Icon/examples/basic-icon.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Image/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Image/examples/basic-image.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/internalcustomersegmenttemplate.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/app-link.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-link.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/relative-link.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/shopify-section-link.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/MoneyField/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/NumberField/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Paragraph/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/PasswordField/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Section/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Section/examples/basic-Section.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Select/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Select/Select.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Select/examples/basic-select.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Text/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-text.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/TextField/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/TextField/examples/basic-textfield.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/URLField/README.md
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.doc.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/shared/display.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/shared/index.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/shared.ts
 create mode 100644 packages/ui-extensions/vite.config.ts
 create mode 100644 packages/ui-extensions/yarn.lock

diff --git a/.gitignore b/.gitignore
index d25751c339..593976877c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,7 +12,7 @@ packages/*/bin
 !packages/*/.eslintrc.js
 *.log
 packages/ui-extensions/docs/**/generated
-
+dist
 # IntelliJ IDE ignore
 .idea
 
diff --git a/config/typescript/tsconfig.base.json b/config/typescript/tsconfig.base.json
index 4a8d721c69..5a5adc25b2 100644
--- a/config/typescript/tsconfig.base.json
+++ b/config/typescript/tsconfig.base.json
@@ -1,6 +1,7 @@
 {
   "extends": "@shopify/typescript-configs/library.json",
   "compilerOptions": {
+    "moduleResolution": "Bundler",
     "strict": true,
     "composite": true,
     "isolatedModules": true,
diff --git a/packages/data-extensions/package.json b/packages/data-extensions/package.json
index a8fc64878e..9f868c337b 100644
--- a/packages/data-extensions/package.json
+++ b/packages/data-extensions/package.json
@@ -29,7 +29,7 @@
   "license": "MIT",
   "sideEffects": false,
   "devDependencies": {
-    "typescript": "^4.9.0"
+    "typescript": "^5.6.3"
   },
   "publishConfig": {
     "access": "public",
diff --git a/packages/ui-extensions-react/src/surfaces/admin.ts b/packages/ui-extensions-react/src/surfaces/admin.ts
index 669f012748..4de9bdd9f3 100644
--- a/packages/ui-extensions-react/src/surfaces/admin.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin.ts
@@ -1,5 +1,4 @@
 export {extend, extension} from '@shopify/ui-extensions/admin';
 
-export * from './admin/components';
 export * from './admin/hooks';
 export {render, reactExtension} from './admin/render';
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components.ts b/packages/ui-extensions-react/src/surfaces/admin/components.ts
deleted file mode 100644
index 258fbdddc4..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-export {AdminAction} from './components/AdminAction/AdminAction';
-export type {AdminActionProps} from './components/AdminAction/AdminAction';
-export {AdminPrintAction} from './components/AdminPrintAction/AdminPrintAction';
-export type {AdminPrintActionProps} from './components/AdminPrintAction/AdminPrintAction';
-export {AdminBlock} from './components/AdminBlock/AdminBlock';
-export type {AdminBlockProps} from './components/AdminBlock/AdminBlock';
-export {Badge} from './components/Badge/Badge';
-export type {BadgeProps} from './components/Badge/Badge';
-export {Banner} from './components/Banner/Banner';
-export type {BannerProps} from './components/Banner/Banner';
-export {BlockStack} from './components/BlockStack/BlockStack';
-export type {BlockStackProps} from './components/BlockStack/BlockStack';
-export {Box} from './components/Box/Box';
-export type {BoxProps} from './components/Box/Box';
-export {Button} from './components/Button/Button';
-export type {ButtonProps} from './components/Button/Button';
-export {Checkbox} from './components/Checkbox/Checkbox';
-export type {CheckboxProps} from './components/Checkbox/Checkbox';
-export {ChoiceList} from './components/ChoiceList/ChoiceList';
-export type {ChoiceListProps} from './components/ChoiceList/ChoiceList';
-export {ColorPicker} from './components/ColorPicker/ColorPicker';
-export type {ColorPickerProps} from './components/ColorPicker/ColorPicker';
-export {CustomerSegmentTemplate} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
-export type {CustomerSegmentTemplateProps} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
-export {DatePicker} from './components/DatePicker/DatePicker';
-export type {DatePickerProps} from './components/DatePicker/DatePicker';
-export {DateField} from './components/DateField/DateField';
-export type {DateFieldProps} from './components/DateField/DateField';
-export {Divider} from './components/Divider/Divider';
-export type {DividerProps} from './components/Divider/Divider';
-export {EmailField} from './components/EmailField/EmailField';
-export type {EmailFieldProps} from './components/EmailField/EmailField';
-export {Form} from './components/Form/Form';
-export type {FormProps} from './components/Form/Form';
-export {FunctionSettings} from './components/FunctionSettings/FunctionSettings';
-export type {
-  FunctionSettingsProps,
-  FunctionSettingsError,
-} from './components/FunctionSettings/FunctionSettings';
-export {Heading} from './components/Heading/Heading';
-export type {HeadingProps} from './components/Heading/Heading';
-export {HeadingGroup} from './components/HeadingGroup/HeadingGroup';
-export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup';
-export {Icon} from './components/Icon/Icon';
-export type {IconProps} from './components/Icon/Icon';
-export {Image} from './components/Image/Image';
-export type {ImageProps} from './components/Image/Image';
-export {InlineStack} from './components/InlineStack/InlineStack';
-export type {InlineStackProps} from './components/InlineStack/InlineStack';
-export {InternalCustomerSegmentTemplate} from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate';
-export type {InternalCustomerSegmentTemplateProps} from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate';
-export {Link} from './components/Link/Link';
-export type {LinkProps} from './components/Link/Link';
-export {MoneyField} from './components/MoneyField/MoneyField';
-export type {MoneyFieldProps} from './components/MoneyField/MoneyField';
-export {NumberField} from './components/NumberField/NumberField';
-export type {NumberFieldProps} from './components/NumberField/NumberField';
-export {Paragraph} from './components/Paragraph/Paragraph';
-export type {ParagraphProps} from './components/Paragraph/Paragraph';
-export {PasswordField} from './components/PasswordField/PasswordField';
-export type {PasswordFieldProps} from './components/PasswordField/PasswordField';
-export {Pressable} from './components/Pressable/Pressable';
-export type {PressableProps} from './components/Pressable/Pressable';
-export {ProgressIndicator} from './components/ProgressIndicator/ProgressIndicator';
-export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator';
-export {Section} from './components/Section/Section';
-export type {SectionProps} from './components/Section/Section';
-export {Select} from './components/Select/Select';
-export type {
-  OptionDescription,
-  OptionGroupDescription,
-  OptionGroupProps,
-  OptionProps,
-  SelectProps,
-} from './components/Select/Select';
-export {Text} from './components/Text/Text';
-export type {TextProps} from './components/Text/Text';
-export {TextArea} from './components/TextArea/TextArea';
-export type {TextAreaProps} from './components/TextArea/TextArea';
-export {TextField} from './components/TextField/TextField';
-export type {TextFieldProps} from './components/TextField/TextField';
-export {URLField} from './components/URLField/URLField';
-export type {URLFieldProps} from './components/URLField/URLField';
-export {InternalLocationList} from './components/InternalLocationList/InternalLocationList';
-export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList';
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts
deleted file mode 100644
index 7134a86e09..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {AdminActionProps} from '@shopify/ui-extensions/admin';
-
-export const AdminAction = createRemoteComponent('ui-admin-action');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx
deleted file mode 100644
index 3d59b1f3e0..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import {
-  reactExtension,
-  AdminAction,
-  Button,
-  Text,
-} from '@shopify/ui-extensions-react/admin';
-
-function App() {
-  return (
-    <AdminAction
-      title="My App Action"
-      primaryAction={
-        <Button onPress={() => {}}>Action</Button>
-      }
-      secondaryAction={
-        <Button onPress={() => {}}>
-          Secondary
-        </Button>
-      }
-    >
-      <Text>Modal content</Text>
-    </AdminAction>
-  );
-}
-
-export default reactExtension(
-  'Playground',
-  () => <App />,
-);
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
deleted file mode 100644
index 69e548e094..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {AdminBlockProps} from '@shopify/ui-extensions/admin';
-
-export const AdminBlock = createRemoteComponent('ui-admin-block');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.tsx
deleted file mode 100644
index a7d3c00da0..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import {reactExtension, AdminBlock} from '@shopify/ui-extensions-react/admin';
-
-function App() {
-  return (
-    <AdminBlock title="My App Block">
-      Block content
-    </AdminBlock>
-  );
-}
-
-export default reactExtension('Playground', () => <App />);
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
deleted file mode 100644
index cfbd27f3ea..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {AdminPrintActionProps} from '@shopify/ui-extensions/admin';
-
-export const AdminPrintAction = createRemoteComponent('ui-admin-print-action');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx
deleted file mode 100644
index 601ed5454d..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import {
-  reactExtension,
-  AdminPrintAction,
-  Text,
-} from '@shopify/ui-extensions-react/admin';
-
-function App() {
-  return (
-    <AdminPrintAction src="https://example.com">
-      <Text>Modal content</Text>
-    </AdminPrintAction>
-  );
-}
-
-export default reactExtension(
-  'Playground',
-  () => <App />,
-);
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts
deleted file mode 100644
index 051fc1ed8c..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {BadgeProps} from '@shopify/ui-extensions/admin';
-
-export const Badge = createRemoteComponent('ui-badge');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx
deleted file mode 100644
index 33dfa4e89d..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {render, Badge} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <Badge
-      tone="info"
-    >
-      Fulfilled
-    </Badge>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts
deleted file mode 100644
index 728a34947a..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {BannerProps} from '@shopify/ui-extensions/admin';
-
-export const Banner = createRemoteComponent('ui-banner');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx
deleted file mode 100644
index 8db34382e4..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  render,
-  Banner,
-  Paragraph,
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <Banner title="Shipping rates changed" dismissible onDismiss={() => console.log('dismissed banner')}>
-      <Paragraph>Your store may be affected</Paragraph>
-    </Banner>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts b/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts
deleted file mode 100644
index fb4d04559b..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {BlockStackProps} from '@shopify/ui-extensions/admin';
-
-export const BlockStack = createRemoteComponent('ui-block-stack');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.tsx
deleted file mode 100644
index b2c2a1dab7..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import {
-  render,
-  BlockStack,
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <BlockStack gap>
-      <>Child 1</>
-      <>Child 2</>
-      <>Child 3</>
-      <>Child 4</>
-    </BlockStack>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts
deleted file mode 100644
index b5a8afb606..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {BoxProps} from '@shopify/ui-extensions/admin';
-
-export const Box = createRemoteComponent('ui-box');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx
deleted file mode 100644
index 30be051844..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import {render, Box} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <Box padding="base">
-      Box
-    </Box>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts
deleted file mode 100644
index 931634df80..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {ButtonProps} from '@shopify/ui-extensions/admin';
-
-export const Button = createRemoteComponent('ui-button');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx
deleted file mode 100644
index 93fcdd8f25..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {render, Button} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <Button
-      onPress={() => {
-        console.log('onPress event');
-      }}
-    >
-      Click here
-    </Button>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts
deleted file mode 100644
index 0fc14909ac..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {CheckboxProps} from '@shopify/ui-extensions/admin';
-
-export const Checkbox = createRemoteComponent('ui-checkbox');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx
deleted file mode 100644
index 40644d7324..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import {render, Checkbox} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <Checkbox id="checkbox" name="checkbox">
-      Save this information for next time
-    </Checkbox>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
deleted file mode 100644
index 4aa60d67b4..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {ChoiceListProps} from '@shopify/ui-extensions/admin';
-
-export const ChoiceList = createRemoteComponent('ui-choice-list');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.tsx
deleted file mode 100644
index f34899efed..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {render, ChoiceList} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <ChoiceList
-      name="Company name"
-      choices={[
-        {label: 'Hidden', id: '1'},
-        {label: 'Optional', id: '2'},
-        {label: 'Required', id: '3'},
-      ]}
-    />
-  );
-}
\ No newline at end of file
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
deleted file mode 100644
index 375de0137a..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {ColorPickerProps} from '@shopify/ui-extensions/admin';
-
-export const ColorPicker = createRemoteComponent('ui-color-picker');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.tsx
deleted file mode 100644
index bddc087269..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-  render,
-  ColorPicker,
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <ColorPicker
-      value="rgba(255 0 0 / 0.5)"
-      onChange={(value) => {
-        console.log({value});
-      }}
-    />
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts b/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
deleted file mode 100644
index 8110f65782..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {CustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin';
-
-export const CustomerSegmentTemplate = createRemoteComponent(
-  'ui-customer-segment-template',
-);
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.tsx
deleted file mode 100644
index c4b5afd10f..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import {reactExtension, CustomerSegmentTemplate} from '@shopify/ui-extensions/admin';
-
-function App() {
-  return (
-    <CustomerSegmentTemplate
-        title="My Customer Segment Template"
-        description="Description of the segment"
-        query="number_of_orders > 0"
-        createdOn={new Date('2023-01-15').toISOString()}
-    />
-  );
-}
-
-export default reactExtension('Playground', () => <App />);
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts
deleted file mode 100644
index c56494551d..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {DateFieldProps} from '@shopify/ui-extensions/admin';
-
-export const DateField = createRemoteComponent('ui-date-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/basic-datefield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/basic-datefield.example.tsx
deleted file mode 100644
index 13542e0195..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/basic-datefield.example.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { useState } from 'react';
-import {
-  render,
-  DateField,
-  type Selected
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  const [selected, setSelected] = useState<Selected>('2023-11-08')
-  return (
-    <DateField selected={selected} onChange={setSelected} />
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.tsx
deleted file mode 100644
index 3e2914e80d..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  render,
-  DateField,
-  type Selected,
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  const [selected, setSelected] = React.useState<Selected>(['2023-11-08']);
-  
-  return (
-    <DateField selected={selected} onChange={setSelected} />
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/range-datefield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/range-datefield.example.tsx
deleted file mode 100644
index 8519b66dbb..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/range-datefield.example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  render,
-  DateField,
-  type Selected
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  const [selected, setSelected] = React.useState<Selected>({start: '2023-11-08', end: '2023-11-10' });
-
-  return (
-    <DateField selected={selected} onChange={setSelected} />
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts
deleted file mode 100644
index 21f3cdbfeb..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {DatePickerProps} from '@shopify/ui-extensions/admin';
-
-export const DatePicker = createRemoteComponent('ui-date-picker');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.tsx
deleted file mode 100644
index 4f36fd9329..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { useState } from 'react';
-import {
-  render,
-  DatePicker,
-  type Selected
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  const [selected, setSelected] = useState<Selected>('2023-11-08')
-  return (
-    <DatePicker selected={selected} onChange={setSelected} />
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.tsx
deleted file mode 100644
index c5dbf58921..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import {
-  render,
-  DatePicker,
-  type Selected,
-} from '@shopify/ui-extensions-react/admin';
-
-
-render('Playground', () => <App />);
-
-function App() {
-  const [selected, setSelected] = React.useState<Selected>(['2023-11-08']);
-  
-  return (
-    <DatePicker selected={selected} onChange={setSelected} />
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.tsx
deleted file mode 100644
index 209fe39f68..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  render,
-  DatePicker,
-  type Selected
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  const [selected, setSelected] = React.useState<Selected>({start: '2023-11-08', end: '2023-11-10' });
-
-  return (
-    <DatePicker selected={selected} onChange={setSelected} />
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts
deleted file mode 100644
index a26fac0e38..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {DividerProps} from '@shopify/ui-extensions/admin';
-
-export const Divider = createRemoteComponent('ui-divider');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx
deleted file mode 100644
index 902ab9478f..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import {
-  render,
-  Divider,
-  BlockStack,
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <BlockStack gap>
-      <>First text</>
-      <Divider />
-      <>Second Text</>
-    </BlockStack>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts
deleted file mode 100644
index 6c3b7de33c..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {EmailFieldProps} from '@shopify/ui-extensions/admin';
-
-export const EmailField = createRemoteComponent('ui-email-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx
deleted file mode 100644
index 2b4cdff6bf..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import {render, EmailField} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return <EmailField label="Enter your email address" />;
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts
deleted file mode 100644
index d62ad110e5..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {FormProps} from '@shopify/ui-extensions/admin';
-
-export const Form = createRemoteComponent('ui-form');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx
deleted file mode 100644
index c6d445ed83..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import {
-  reactExtension,
-  Form,
-  TextField,
-} from '@shopify/ui-extensions-react/admin';
-
-export default reactExtension("admin.product-details.block.render", () => <App />);
-
-function App() {
-  const [value, setValue] = useState("");
-  const [error, setError] = useState('');
-
-  const onSubmit = useCallback(
-    async () => {
-      // API call to save the values
-      const res = await fetch('/save', {method:'POST', body: JSON.stringify({name: value})});
-      if (!res.ok) {
-        const json = await res.json();
-        const errors = json.errors.join(',');
-        setError(errors);
-      }
-    },
-    [value]
-  );
-
-  const onReset = useCallback(async () => {
-     // Reset to initial value
-     setValue('')
-     // Clear errors
-     setError('')
-  }, []);
-
-  const onInput = useCallback((nameValue) => {
-    if (!nameValue) {
-      setError("Please enter a name.");
-    }
-  }, [])
-
-  // Field values can only be updated on change when using Remote UI.
-  const onChange = useCallback((nameValue) => {
-    setValue(nameValue);
-  }, [])
-
-
-  return (
-    <Form id="form" onSubmit={onSubmit} onReset={onReset}>
-      <TextField label="name" value={value} onInput={onInput} onChange={onChange} error={error} />
-    </Form>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts b/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
deleted file mode 100644
index 4aadb0e056..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {
-  FunctionSettingsProps,
-  FunctionSettingsError,
-} from '@shopify/ui-extensions/admin';
-
-export const FunctionSettings = createRemoteComponent('ui-functipo');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.tsx
deleted file mode 100644
index f986411219..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
-  reactExtension,
-  useApi,
-  FunctionSettings,
-  TextField,
-  Section,
-} from '@shopify/ui-extensions-react/admin';
-
-export default reactExtension(
-  'admin.settings.validation.render',
-  async (api) => {
-    // Use Direct API access to fetch initial
-    // metafields from the server if we are
-    // rendering against a pre-existing `Validation`
-    const initialSettings = api.data.validation
-      ? await fetchSettings(api.data.validation.id)
-      : {};
-
-    return <App settings={initialSettings} />;
-});
-
-function App({settings}) {
-  const [value, setValue] = useState(settings);
-  const [error, setError] = useState();
-
-  const {applyMetafieldsChange} = useApi();
-
-  return (
-    <FunctionSettings
-      onError={(errors) => {
-        setError(errors[0]?.message);
-      }}
-    >
-      <Section heading="Settings">
-        <TextField
-          label="Name"
-          name="name"
-          value={value}
-          error={error}
-          onChange={(value) => {
-            setValue(value);
-            setError(undefined);
-            applyMetafieldsChange({
-              type: 'updateMetafield',
-              namespace: '$app:my_namespace',
-              key: 'name',
-              value,
-              valueType: 'single_line_text_field',
-            });
-          }}
-        />
-      </Section>
-    </FunctionSettings>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts
deleted file mode 100644
index b6e6d73b61..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {HeadingProps} from '@shopify/ui-extensions/admin';
-
-export const Heading = createRemoteComponent('ui-heading');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx
deleted file mode 100644
index b03a114e76..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import {render, Heading} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return <Heading>Store name</Heading>;
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts b/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
deleted file mode 100644
index 7f6f45c247..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {HeadingGroupProps} from '@shopify/ui-extensions/admin';
-
-export const HeadingGroup = createRemoteComponent('ui-heading-group');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx
deleted file mode 100644
index 7bcaef3901..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-    render,
-    HeadingGroup,
-    Heading,
-  } from '@shopify/ui-extensions-react/admin';
-
-  render('Playground', () => <App />);
-
-  function App() {
-    return (
-      <>
-        <Heading>Heading &lt;h1&gt;</Heading>
-
-        <HeadingGroup>
-          <Heading>Heading &lt;h2&gt;</Heading>
-
-          <HeadingGroup>
-            <Heading>Heading &lt;h3&gt;</Heading>
-          </HeadingGroup>
-        </HeadingGroup>
-      </>
-    );
-  }
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts
deleted file mode 100644
index c50233a7c3..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {IconProps} from '@shopify/ui-extensions/admin';
-
-export const Icon = createRemoteComponent('ui-icon');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx
deleted file mode 100644
index a3e8089a44..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import {render, Icon} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return <Icon name="AppsMajor" />;
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts
deleted file mode 100644
index 82b47d2918..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {ImageProps} from '@shopify/ui-extensions/admin';
-
-export const Image = createRemoteComponent('ui-image');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx
deleted file mode 100644
index 43dc6f5ea5..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {render, Image} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <Image alt="Pickaxe" source="https://shopify.dev/assets/icons/64/pickaxe-1.png" />
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts
deleted file mode 100644
index 140cc12bf6..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {InlineStackProps} from '@shopify/ui-extensions/admin';
-
-export const InlineStack = createRemoteComponent('ui-inline-stack');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx
deleted file mode 100644
index d9fb203f83..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import {
-  render,
-  InlineStack,
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <InlineStack gap>
-      <>Child 1</>
-      <>Child 2</>
-      <>Child 3</>
-      <>Child 4</>
-    </InlineStack>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
deleted file mode 100644
index 74b94026cd..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {InternalCustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin';
-
-export const InternalCustomerSegmentTemplate = createRemoteComponent(
-  'ui-internal-customer-segment-template',
-);
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/internalcustomersegmenttemplate.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/internalcustomersegmenttemplate.example.tsx
deleted file mode 100644
index a85de408d8..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/internalcustomersegmenttemplate.example.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import {
-  reactExtension,
-  InternalCustomerSegmentTemplate,
-} from '@shopify/ui-extensions-react/admin';
-
-function App({i18n, enabledFeatures}) {
-    const productsPurchasedOnTagsEnabled = enabledFeatures.includes('productsPurchasedByTags');
-    const query = productsPurchasedOnTagsEnabled
-      ? 'products_purchased(tag: (product_tag)) = true'
-      : 'products_purchased(id: (product_id)) = true';
-    const queryToInsert = productsPurchasedOnTagsEnabled
-      ? 'products_purchased(tag:'
-      : 'products_purchased(id:';
-
-    return (
-      <>
-        <InternalCustomerSegmentTemplate
-          title={i18n.translate('product.title')}
-          description={i18n.translate('product.description')}
-          icon='productsMajor'
-          query={query}
-          queryToInsert={queryToInsert}
-          createdOn={new Date('2023-01-15').toISOString()}
-          category="reEngageCustomers"
-        />
-         <InternalCustomerSegmentTemplate
-          title={i18n.translate('location.title')}
-          description={[i18n.translate('location.firstParagraph'), i18n.translate('location.secondParagraph')]}
-          icon='locationMajor'
-          query="customer_cities CONTAINS 'US-NY-NewYorkCity'"
-          category='location'
-        />
-      </>
-    );
-}
-
-reactExtension('admin.customers.segmentation-templates.render', ({i18n, __enabledFeatures}) => <App i18n={i18n} enabledFeatures={__enabledFeatures} />);
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
deleted file mode 100644
index 557356e83e..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {InternalLocationListProps} from '@shopify/ui-extensions/admin';
-
-export const InternalLocationList = createRemoteComponent(
-  'ui-internal-location-list',
-);
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts
deleted file mode 100644
index bda27989cb..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {LinkProps} from '@shopify/ui-extensions/admin';
-
-export const Link = createRemoteComponent('ui-link');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx
deleted file mode 100644
index 73b437853c..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  render,
-  Link,
-} from '@shopify/ui-extensions-react/admin';
-
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <Link href="app:bar">
-      Link to app path
-    </Link>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx
deleted file mode 100644
index 0f4c6af283..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  render,
-  Link,
-} from '@shopify/ui-extensions-react/admin';
-
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <Link href="https://www.shopify.ca/climate/sustainability-fund">
-      Sustainability fund
-    </Link>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx
deleted file mode 100644
index 822ae7bdc9..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  render,
-  Link,
-} from '@shopify/ui-extensions-react/admin';
-
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <Link href="/baz">
-      Link relative to current path
-    </Link>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx
deleted file mode 100644
index f10a0e5ade..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  render,
-  Link,
-} from '@shopify/ui-extensions-react/admin';
-
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <Link href="shopify://admin/orders">
-      Shop's orders
-    </Link>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts
deleted file mode 100644
index f176a02a64..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {MoneyFieldProps} from '@shopify/ui-extensions/admin';
-
-export const MoneyField = createRemoteComponent('ui-money-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx
deleted file mode 100644
index bdd46cdcde..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import {render, MoneyField} from '@shopify/ui-extensions-react/admin';
-import {useState} from 'react';
-
-render('Playground', () => <App />);
-
-function App() {
-  const [value, setValue] = useState({ amount: 100, currencyCode: 'USD' });
-
-  return <MoneyField label="Enter an amount" value={value} onChange={setValue} />;
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts
deleted file mode 100644
index 3f44e86e6c..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {NumberFieldProps} from '@shopify/ui-extensions/admin';
-
-export const NumberField = createRemoteComponent('ui-number-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx
deleted file mode 100644
index 65dd16ea34..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import {render, NumberField} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return <NumberField label="Enter a discount amount" />;
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts
deleted file mode 100644
index d727b8839a..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {ParagraphProps} from '@shopify/ui-extensions/admin';
-
-export const Paragraph = createRemoteComponent('ui-paragraph');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx
deleted file mode 100644
index 022b4c2db6..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {
-    render,
-    BlockStack,
-    Paragraph,
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-    return (
-        <BlockStack inlineAlignment='center' gap>
-            <Paragraph fontWeight='bold'>Name:</Paragraph>
-            <Paragraph>Jane Doe</Paragraph>
-        </BlockStack>
-    )
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts
deleted file mode 100644
index 68f167a407..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {PasswordFieldProps} from '@shopify/ui-extensions/admin';
-
-export const PasswordField = createRemoteComponent('ui-password-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx
deleted file mode 100644
index a2ca1d62e7..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-  render,
-  BlockStack,
-  TextField,
-  PasswordField
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <BlockStack>
-      <TextField label="Enter some text" />
-      <PasswordField label="Enter some text" />
-    </BlockStack>
-  )
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts
deleted file mode 100644
index fcca37defb..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {PressableProps} from '@shopify/ui-extensions/admin';
-
-export const Pressable = createRemoteComponent('ui-pressable');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.tsx
deleted file mode 100644
index 67efde16b8..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {
-  reactExtension,
-  Icon,
-  InlineStack,
-  Pressable,
-  Text,
-} from '@shopify/ui-extensions-react/admin';
-
-reactExtension('Playground', () => <Extension />);
-
-function Extension() {
-  return (
-    <Pressable padding="base">
-      <InlineStack>
-        <Text>Go to Apps Dashboard</Text>
-        <Icon name="AppsMajor" />
-      </InlineStack>
-    </Pressable>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
deleted file mode 100644
index b10c177190..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin';
-
-export const ProgressIndicator = createRemoteComponent('ui-progress-indicator');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx
deleted file mode 100644
index 8b4968f5e9..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
-  reactExtension,
-  ProgressIndicator,
-} from '@shopify/ui-extensions-react/admin';
-
-reactExtension('Playground', () => <App />);
-
-function App() {
-  return (
-    <ProgressIndicator size="small-200" />
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts
deleted file mode 100644
index 6cc484c553..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {SectionProps} from '@shopify/ui-extensions/admin';
-
-export const Section = createRemoteComponent('ui-section');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx
deleted file mode 100644
index 45538063f5..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  render,
-  Section,
-} from '@shopify/ui-extensions-react/admin';
-
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <Section heading="Section heading">
-      Section content
-    </Section>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts
deleted file mode 100644
index 9f0b79f156..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {
-  SelectProps,
-  OptionDescription,
-  OptionGroupDescription,
-  OptionGroupProps,
-  OptionProps,
-} from '@shopify/ui-extensions/admin';
-
-export const Select = createRemoteComponent('ui-select');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx
deleted file mode 100644
index f9cec98b9a..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import {
-  render,
-  Select,
-} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  const [value, setValue] = React.useState('2');
-
-  return (
-    <Select
-      label="Country"
-      value={value}
-      onChange={setValue}
-      options={[
-        {
-          value: '1',
-          label: 'Australia',
-        },
-        {
-          value: '2',
-          label: 'Canada',
-        },
-        {
-          value: '3',
-          label: 'France',
-        },
-        {
-          value: '4',
-          label: 'Japan',
-        },
-        {
-          value: '5',
-          label: 'Nigeria',
-        },
-        {
-          value: '6',
-          label: 'United States',
-        },
-      ]}
-    />
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts
deleted file mode 100644
index 8f040b4fce..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {TextProps} from '@shopify/ui-extensions/admin';
-
-export const Text = createRemoteComponent('ui-text');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx
deleted file mode 100644
index eee51ee386..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {render, Text, BlockStack} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return (
-    <BlockStack inlineAlignment="center" gap>
-      <Text fontWeight="bold">Name:</Text>
-      <Text>Jane Doe</Text>
-    </BlockStack>
-  );
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts b/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts
deleted file mode 100644
index a9f53e617f..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {TextAreaProps} from '@shopify/ui-extensions/admin';
-
-export const TextArea = createRemoteComponent('ui-text-area');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx
deleted file mode 100644
index d135155076..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import {render, TextArea} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return <TextArea label="Enter a scheduled social media posting" rows={4} />;
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts
deleted file mode 100644
index 624fb6eed5..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/TextField/TextField.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {TextFieldProps} from '@shopify/ui-extensions/admin';
-
-export const TextField = createRemoteComponent('ui-text-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextField/examples/basic-textfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/TextField/examples/basic-textfield.example.tsx
deleted file mode 100644
index 63b73c505f..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/TextField/examples/basic-textfield.example.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import {render, TextField} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return <TextField label="Enter some text" />;
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts
deleted file mode 100644
index 1811e45fdd..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/URLField/URLField.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createRemoteComponent} from '../util';
-
-export type {URLFieldProps} from '@shopify/ui-extensions/admin';
-
-export const URLField = createRemoteComponent('ui-url-field');
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.tsx
deleted file mode 100644
index 8cde0bdf9e..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import {render, URLField} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
-
-function App() {
-  return <URLField label="Enter store url" />;
-}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/util.ts b/packages/ui-extensions-react/src/surfaces/admin/components/util.ts
deleted file mode 100644
index f011fda1c5..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components/util.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import {
-  createElement,
-  useRef,
-  useLayoutEffect,
-  useCallback,
-  forwardRef,
-  ComponentType,
-} from 'react';
-
-// These are the pieces of the passed-in copy of `react` we use:
-export interface InjectedReact {
-  createElement: typeof createElement;
-  useRef: typeof useRef;
-  useLayoutEffect: typeof useLayoutEffect;
-  useCallback: typeof useCallback;
-  forwardRef: typeof forwardRef;
-}
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace shopify {
-    const _createReactRemoteComponent: (
-      methods: InjectedReact,
-      name: string,
-    ) => ComponentType;
-  }
-}
-
-export const createRemoteComponent = (name: string) =>
-  shopify._createReactRemoteComponent(
-    {
-      createElement,
-      useRef,
-      useLayoutEffect,
-      useCallback,
-      forwardRef,
-    },
-    name,
-  );
diff --git a/packages/ui-extensions-react/src/surfaces/customer-account/hooks/live-navigation.ts b/packages/ui-extensions-react/src/surfaces/customer-account/hooks/live-navigation.ts
index bedd669387..9f1c6a5515 100644
--- a/packages/ui-extensions-react/src/surfaces/customer-account/hooks/live-navigation.ts
+++ b/packages/ui-extensions-react/src/surfaces/customer-account/hooks/live-navigation.ts
@@ -1,7 +1,7 @@
-import {
+import type {
   NavigationHistoryEntry,
   RenderCustomerAccountFullPageExtensionTarget,
-} from '@shopify/ui-extensions/src/surfaces/customer-account';
+} from '@shopify/ui-extensions/customer-account';
 import {useApi} from './api';
 import {useEffect, useReducer} from 'react';
 
diff --git a/packages/ui-extensions-react/tsconfig.json b/packages/ui-extensions-react/tsconfig.json
index bac9bf6844..ac1324ecd2 100644
--- a/packages/ui-extensions-react/tsconfig.json
+++ b/packages/ui-extensions-react/tsconfig.json
@@ -4,7 +4,8 @@
     "outDir": "build/ts",
     "rootDir": "src",
     "jsx": "react-jsx",
-    "stripInternal": true
+    "stripInternal": true,
+    "experimentalDecorators": true
   },
   "include": ["config/typescript/faker.d.ts", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["src/**/*.example.tsx", "src/**/tests/**"],
diff --git a/packages/ui-extensions/package.json b/packages/ui-extensions/package.json
index 85ca86f744..e54dd3be90 100644
--- a/packages/ui-extensions/package.json
+++ b/packages/ui-extensions/package.json
@@ -2,62 +2,46 @@
   "name": "@shopify/ui-extensions",
   "version": "0.0.0-unstable",
   "scripts": {
+    "build": "vite build",
     "docs:admin": "bash ./docs/surfaces/admin/build-docs.sh",
     "gen-docs:admin": "bash ./docs/surfaces/admin/create-doc-files.sh \"admin\"",
     "docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",
     "docs:point-of-sale": "bash ./docs/surfaces/point-of-sale/build-docs.sh",
     "docs:customer-account": "bash ./docs/surfaces/customer-account/build-docs.sh"
   },
-  "main": "index.js",
-  "module": "index.mjs",
-  "esnext": "index.esnext",
-  "types": "./build/ts/index.d.ts",
+  "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
       "admin": [
-        "./build/ts/surfaces/admin.d.ts"
+        "./dist/surfaces/admin.d.ts"
       ],
       "checkout": [
-        "./build/ts/surfaces/checkout.d.ts"
+        "./dist/surfaces/checkout.d.ts"
       ],
       "customer-account": [
-        "./build/ts/surfaces/customer-account.d.ts"
+        "./dist/surfaces/customer-account.d.ts"
       ],
       "point-of-sale": [
-        "./build/ts/surfaces/point-of-sale.d.ts"
+        "./dist/surfaces/point-of-sale.d.ts"
       ]
     }
   },
   "exports": {
-    ".": {
-      "types": "./build/ts/index.d.ts",
-      "esnext": "./index.esnext",
-      "import": "./index.mjs",
-      "require": "./index.js"
-    },
     "./admin": {
-      "types": "./build/ts/surfaces/admin.d.ts",
-      "esnext": "./build/esnext/surfaces/admin.esnext",
-      "import": "./build/esm/surfaces/admin.mjs",
-      "require": "./build/cjs/surfaces/admin.js"
+      "types": "./dist/surfaces/admin.d.ts",
+      "default": "./build/admin.mjs"
     },
     "./checkout": {
-      "types": "./build/ts/surfaces/checkout.d.ts",
-      "esnext": "./build/esnext/surfaces/checkout.esnext",
-      "import": "./build/esm/surfaces/checkout.mjs",
-      "require": "./build/cjs/surfaces/checkout.js"
+      "types": "./dist/surfaces/checkout.d.ts",
+      "default": "./build/checkout.mjs"
     },
     "./customer-account": {
-      "types": "./build/ts/surfaces/customer-account.d.ts",
-      "esnext": "./build/esnext/surfaces/customer-account.esnext",
-      "import": "./build/esm/surfaces/customer-account.mjs",
-      "require": "./build/cjs/surfaces/customer-account.js"
+      "types": "./dist/surfaces/customer-account.d.ts",
+      "default": "./dist/customer-account.mjs"
     },
     "./point-of-sale": {
-      "types": "./build/ts/surfaces/point-of-sale.d.ts",
-      "esnext": "./build/esnext/surfaces/point-of-sale.esnext",
-      "import": "./build/esm/surfaces/point-of-sale.mjs",
-      "require": "./build/cjs/surfaces/point-of-sale.js"
+      "types": "./dist/surfaces/point-of-sale.d.ts",
+      "default": "./dist/point-of-sale.mjs"
     }
   },
   "license": "MIT",
@@ -68,17 +52,18 @@
   },
   "devDependencies": {
     "@shopify/generate-docs": "0.16.4",
-    "typescript": "^4.9.0"
+    "@shopify/admin-ui-icons": "^0.12.0",
+    "@shopify/ui-api-design": "^0.18.0",
+    "typescript": "^5.6.3",
+    "vite-plugin-dts": "^4.3.0",
+    "vite": "^5.4.11"
   },
   "publishConfig": {
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org/"
   },
   "files": [
-    "build",
-    "src",
-    "index.*",
-    "checkout.*",
+    "dist",
     "README.md"
   ],
   "eslintConfig": {
diff --git a/packages/ui-extensions/src/surfaces/admin.ts b/packages/ui-extensions/src/surfaces/admin.ts
index 9e68597775..b826ce834e 100644
--- a/packages/ui-extensions/src/surfaces/admin.ts
+++ b/packages/ui-extensions/src/surfaces/admin.ts
@@ -2,5 +2,4 @@ export * from './admin/api';
 export * from './admin/components';
 export * from './admin/extension-targets';
 export * from './admin/extension';
-export * from './admin/shared';
 export * from './admin/globals';
diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts
index 555a77ce12..51e2c961a8 100644
--- a/packages/ui-extensions/src/surfaces/admin/components.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components.ts
@@ -1,51 +1,316 @@
-export type {AdminActionProps} from './components/AdminAction/AdminAction';
-export type {AdminPrintActionProps} from './components/AdminPrintAction/AdminPrintAction';
-export type {AdminBlockProps} from './components/AdminBlock/AdminBlock';
-export type {BadgeProps} from './components/Badge/Badge';
-export type {BannerProps} from './components/Banner/Banner';
-export type {BlockStackProps} from './components/BlockStack/BlockStack';
-export type {BoxProps} from './components/Box/Box';
-export type {ButtonProps} from './components/Button/Button';
-export type {CheckboxProps} from './components/Checkbox/Checkbox';
-export type {ChoiceListProps} from './components/ChoiceList/ChoiceList';
-export type {ColorPickerProps} from './components/ColorPicker/ColorPicker';
-export type {CustomerSegmentTemplateProps} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
-export type {DateFieldProps} from './components/DateField/DateField';
-export type {DatePickerProps} from './components/DatePicker/DatePicker';
-export type {DividerProps} from './components/Divider/Divider';
-export type {EmailFieldProps} from './components/EmailField/EmailField';
-export type {FormProps} from './components/Form/Form';
-export type {
-  FunctionSettingsProps,
-  FunctionSettingsError,
-} from './components/FunctionSettings/FunctionSettings';
-export type {HeadingProps} from './components/Heading/Heading';
-export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup';
-export type {IconProps} from './components/Icon/Icon';
-export type {InlineStackProps} from './components/InlineStack/InlineStack';
-export type {
-  InternalCustomerSegmentTemplateProps,
-  CustomerSegmentTemplateIcon,
-  CustomerSegmentTemplateCategory,
-} from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate';
-export type {ImageProps} from './components/Image/Image';
-export type {LinkProps} from './components/Link/Link';
-export type {MoneyFieldProps} from './components/MoneyField/MoneyField';
-export type {NumberFieldProps} from './components/NumberField/NumberField';
-export type {ParagraphProps} from './components/Paragraph/Paragraph';
-export type {PasswordFieldProps} from './components/PasswordField/PasswordField';
-export type {PressableProps} from './components/Pressable/Pressable';
-export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator';
-export type {SectionProps} from './components/Section/Section';
-export type {
-  OptionDescription,
-  OptionGroupDescription,
-  OptionGroupProps,
-  OptionProps,
-  SelectProps,
-} from './components/Select/Select';
-export type {TextProps} from './components/Text/Text';
-export type {TextAreaProps} from './components/TextArea/TextArea';
-export type {TextFieldProps} from './components/TextField/TextField';
-export type {URLFieldProps} from './components/URLField/URLField';
-export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList';
+import type {
+  IconProps as IconProps$1,
+  BadgeProps as BadgeProps$1,
+  BoxProps as BoxProps$1,
+  DividerProps as DividerProps$1,
+  HeadingProps as HeadingProps$1,
+  LinkProps as LinkProps$1,
+  StackProps as StackProps$1,
+  TextProps as TextProps$1,
+} from '@shopify/ui-api-design';
+// import type {IconType} from '@shopify/admin-ui-icons';
+import type {MaybeAllValuesShorthandProperty} from '@shopify/ui-api-design/dist/shared/utils';
+
+export interface IconProps {
+  // type: IconType;
+  tone: Extract<
+    IconProps$1['tone'],
+    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
+  >;
+  color: Extract<IconProps$1['color'], 'base' | 'subdued'>;
+  size: Extract<IconProps$1['size'], 'small' | 'base'>;
+}
+
+export interface BadgeProps {
+  accessibilityLabel: NonNullable<BadgeProps$1['accessibilityLabel']>;
+  color: Extract<BadgeProps$1['color'], 'base' | 'strong'>;
+  // icon: IconProps['type'] | '';
+  size: Extract<BadgeProps$1['size'], 'base' | 'large' | 'large-100'>;
+  tone: Extract<
+    BadgeProps$1['tone'],
+    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
+  >;
+}
+
+declare const tagName$7 = 'shopify-badge';
+
+export interface ActivationEventEsque {
+  shiftKey: boolean;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  button: number;
+}
+export interface ClickOptions {
+  /**
+   * The event you want to influence the synthetic click.
+   */
+  sourceEvent?: ActivationEventEsque;
+}
+/**
+ * Base class for creating custom elements with Preact.
+ * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
+ */
+declare const BaseClass: typeof globalThis.HTMLElement;
+declare abstract class PreactCustomElement extends BaseClass {
+  #private;
+  static get observedAttributes(): string[];
+  attributeChangedCallback(name: string): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /**
+   * Queue a run of the render function.
+   * You shouldn't need to call this manually - it should be handled by changes to @property values.
+   */
+  queueRender(): void;
+  /**
+   * Internal function to add styles for legacy browsers.
+   *
+   * @private
+   */
+  _addLegacyStyleComponent(style: string): void;
+  /**
+   * Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.
+   *
+   * For example, if the `sourceEvent` was a middle click, or has particular keys held down,
+   * components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
+   *
+   * @param options
+   */
+  click({sourceEvent}?: ClickOptions): void;
+}
+
+declare class Badge extends PreactCustomElement implements BadgeProps {
+  accessor accessibilityLabel: BadgeProps['accessibilityLabel'];
+  accessor color: BadgeProps['color'];
+  // accessor icon: BadgeProps['icon'];
+  accessor size: BadgeProps['size'];
+  accessor tone: BadgeProps['tone'];
+}
+declare global {
+  export interface HTMLElementTagNameMap {
+    [tagName$7]: Badge;
+  }
+}
+
+export type MakeResponsive<T> = T | `@media${string}`;
+
+export type AlignedBox = Required<BoxProps$1>;
+export interface BoxProps {
+  accessibilityRole: AlignedBox['accessibilityRole'];
+  background: Extract<
+    AlignedBox['background'],
+    'transparent' | 'base' | 'subdued' | 'strong'
+  >;
+  blockSize: AlignedBox['blockSize'];
+  minBlockSize: AlignedBox['minBlockSize'];
+  maxBlockSize: AlignedBox['maxBlockSize'];
+  inlineSize: AlignedBox['inlineSize'];
+  minInlineSize: AlignedBox['minInlineSize'];
+  maxInlineSize: AlignedBox['maxInlineSize'];
+  padding: MakeResponsive<AlignedBox['padding']>;
+  paddingBlock: MakeResponsive<AlignedBox['paddingBlock']>;
+  paddingBlockStart: MakeResponsive<AlignedBox['paddingBlockStart']>;
+  paddingBlockEnd: MakeResponsive<AlignedBox['paddingBlockEnd']>;
+  paddingInline: MakeResponsive<AlignedBox['paddingInline']>;
+  paddingInlineStart: MakeResponsive<AlignedBox['paddingInlineStart']>;
+  paddingInlineEnd: MakeResponsive<AlignedBox['paddingInlineEnd']>;
+  borderWidth: MaybeAllValuesShorthandProperty<
+    Extract<
+      AlignedBox['borderWidth'],
+      'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200'
+    >
+  >;
+  borderStyle: MaybeAllValuesShorthandProperty<
+    Extract<AlignedBox['borderStyle'], 'none' | 'solid' | 'dashed'>
+  >;
+  borderRadius: MaybeAllValuesShorthandProperty<
+    Extract<
+      AlignedBox['borderRadius'],
+      | 'none'
+      | 'small-200'
+      | 'small-100'
+      | 'small'
+      | 'base'
+      | 'large'
+      | 'large-100'
+      | 'large-200'
+    >
+  >;
+  borderColor: Extract<
+    AlignedBox['borderColor'],
+    'subdued' | 'base' | 'strong'
+  >;
+  accessibilityLabel: AlignedBox['accessibilityLabel'];
+  accessibilityVisibility: AlignedBox['accessibilityVisibility'];
+  display: AlignedBox['display'];
+}
+
+declare const tagName$6 = 'shopify-box';
+
+declare class BoxElement extends PreactCustomElement implements BoxProps {
+  accessor accessibilityRole: BoxProps['accessibilityRole'];
+  accessor background: BoxProps['background'];
+  accessor blockSize: BoxProps['blockSize'];
+  accessor minBlockSize: BoxProps['minBlockSize'];
+  accessor maxBlockSize: BoxProps['maxBlockSize'];
+  accessor inlineSize: BoxProps['inlineSize'];
+  accessor minInlineSize: BoxProps['minInlineSize'];
+  accessor maxInlineSize: BoxProps['maxInlineSize'];
+  accessor padding: BoxProps['padding'];
+  accessor paddingBlock: BoxProps['paddingBlock'];
+  accessor paddingBlockStart: BoxProps['paddingBlockStart'];
+  accessor paddingBlockEnd: BoxProps['paddingBlockEnd'];
+  accessor paddingInline: BoxProps['paddingInline'];
+  accessor paddingInlineStart: BoxProps['paddingInlineStart'];
+  accessor paddingInlineEnd: BoxProps['paddingInlineEnd'];
+  accessor borderWidth: BoxProps['borderWidth'];
+  accessor borderStyle: BoxProps['borderStyle'];
+  accessor borderRadius: BoxProps['borderRadius'];
+  accessor borderColor: BoxProps['borderColor'];
+  accessor accessibilityLabel: BoxProps['accessibilityLabel'];
+  accessor accessibilityVisibility: BoxProps['accessibilityVisibility'];
+  accessor display: BoxProps['display'];
+}
+
+declare class Box extends BoxElement implements BoxProps {}
+declare global {
+  export interface HTMLElementTagNameMap {
+    [tagName$6]: Box;
+  }
+}
+
+export interface DividerProps {
+  direction: Extract<DividerProps$1['direction'], 'inline' | 'block'>;
+  color: Extract<DividerProps$1['color'], 'subdued' | 'base' | 'strong'>;
+}
+
+declare const tagName$5 = 'shopify-divider';
+
+declare class Divider extends PreactCustomElement implements DividerProps {
+  direction: DividerProps['direction'];
+  color: DividerProps['color'];
+}
+declare global {
+  export interface HTMLElementTagNameMap {
+    [tagName$5]: Divider;
+  }
+}
+
+export type RequiredHeadingProps = Required<HeadingProps$1>;
+export interface HeadingProps {
+  accessibilityRole: RequiredHeadingProps['accessibilityRole'];
+  accessibilityVisibility: RequiredHeadingProps['accessibilityVisibility'];
+  lineClamp: RequiredHeadingProps['lineClamp'];
+}
+
+declare const tagName$4 = 'shopify-heading';
+
+declare class Heading extends PreactCustomElement implements HeadingProps {
+  accessor accessibilityRole: HeadingProps['accessibilityRole'];
+  accessor lineClamp: HeadingProps['lineClamp'];
+  accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];
+}
+declare global {
+  export interface HTMLElementTagNameMap {
+    [tagName$4]: Heading;
+  }
+}
+
+declare const tagName$3 = 'shopify-icon';
+
+declare class Icon extends PreactCustomElement implements IconProps {
+  accessor color: IconProps['color'];
+  accessor tone: IconProps['tone'];
+  accessor type: IconProps['type'];
+  accessor size: IconProps['size'];
+}
+declare global {
+  export interface HTMLElementTagNameMap {
+    [tagName$3]: Icon;
+  }
+}
+
+export type RequiredLinkProps = Required<LinkProps$1>;
+export interface LinkProps {
+  tone: Extract<RequiredLinkProps['tone'], 'auto' | 'neutral' | 'critical'>;
+  accessibilityLabel: RequiredLinkProps['accessibilityLabel'];
+  href: RequiredLinkProps['href'];
+  target: RequiredLinkProps['target'];
+}
+
+declare const tagName$2 = 'shopify-link';
+
+declare class Link extends PreactCustomElement implements LinkProps {
+  accessor tone: LinkProps['tone'];
+  accessor accessibilityLabel: LinkProps['accessibilityLabel'];
+  accessor href: LinkProps['href'];
+  accessor target: LinkProps['target'];
+}
+declare global {
+  export interface HTMLElementTagNameMap {
+    [tagName$2]: Link;
+  }
+}
+
+export type AlignedStackProps = Required<StackProps$1>;
+export interface StackProps extends BoxProps {
+  justifyContent: AlignedStackProps['justifyContent'];
+  alignItems: AlignedStackProps['alignItems'];
+  alignContent: AlignedStackProps['alignContent'];
+  gap: MakeResponsive<AlignedStackProps['gap']>;
+  rowGap: MakeResponsive<AlignedStackProps['rowGap']>;
+  columnGap: MakeResponsive<AlignedStackProps['columnGap']>;
+  direction: MakeResponsive<AlignedStackProps['direction']>;
+}
+
+declare const tagName$1 = 'shopify-stack';
+
+declare class Stack extends BoxElement implements StackProps {
+  accessor direction: StackProps['direction'];
+  accessor justifyContent: StackProps['justifyContent'];
+  accessor alignItems: StackProps['alignItems'];
+  accessor alignContent: StackProps['alignContent'];
+  accessor gap: StackProps['gap'];
+  accessor rowGap: StackProps['rowGap'];
+  accessor columnGap: StackProps['columnGap'];
+}
+declare global {
+  export interface HTMLElementTagNameMap {
+    [tagName$1]: Stack;
+  }
+}
+
+export interface TextProps
+  extends Required<Pick<TextProps$1, 'display' | 'accessibilityVisibility'>> {
+  color: Extract<TextProps$1['color'], 'base' | 'subdued'>;
+  type: Extract<
+    TextProps$1['type'],
+    'address' | 'redundant' | 'strong' | 'generic' | 'emphasis'
+  >;
+  tone: Extract<
+    TextProps$1['tone'],
+    'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'caution'
+  >;
+  fontVariantNumeric: Extract<
+    TextProps$1['fontVariantNumeric'],
+    'auto' | 'normal' | 'tabular-nums'
+  >;
+}
+
+declare const tagName = 'shopify-text';
+
+declare class Text extends PreactCustomElement implements TextProps {
+  display: TextProps['display'];
+  fontVariantNumeric: TextProps['fontVariantNumeric'];
+  color: TextProps['color'];
+  tone: TextProps['tone'];
+  type: TextProps['type'];
+  accessibilityVisibility: TextProps['accessibilityVisibility'];
+}
+declare global {
+  export interface HTMLElementTagNameMap {
+    [tagName]: Text;
+  }
+}
+
+export {Badge, Box, Divider, Heading, Icon, Link, Stack, Text};
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts
deleted file mode 100644
index 9b8393837f..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'AdminAction',
-  description:
-    'AdminAction is a component used by Admin action extensions to configure a primary and secondary action and title. Use of this component is required in order to use Admin action extensions.',
-  requires: '',
-  thumbnail: 'adminaction-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'AdminActionProps',
-      description: '',
-      type: 'AdminActionProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Other',
-  defaultExample: {
-    image: 'adminaction-default.png',
-    codeblock: {
-      title: 'Set the primary and secondary action of the Action modal.',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-adminaction.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [
-    {
-      type: 'component',
-      name: 'AdminBlock',
-      url: '/docs/api/admin-extensions/components/other/adminblock',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts
deleted file mode 100644
index 15e022a93a..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type {RemoteFragment} from '@remote-ui/core';
-
-export interface AdminActionProps {
-  /**
-   * Sets the title of the Action container. If not provided, the name of the extension will be used. Titles longer than 40 characters will be truncated.
-   */
-  title?: string;
-
-  /**
-   * Sets the Primary action button of the container. This component must be a button component.
-   */
-  primaryAction?: RemoteFragment;
-
-  /**
-   * Sets the Secondary action button of the container. This component must be a button component.
-   */
-  secondaryAction?: RemoteFragment;
-
-  /**
-   * Sets the loading state of the action modal
-   */
-  loading?: boolean;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.ts
deleted file mode 100644
index ac455a3efa..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {extension, AdminAction, Button} from '@shopify/ui-extensions/admin';
-
-export default extension('Playground', (root) => {
-  const primaryAction = root.createFragment();
-  const secondaryAction = root.createFragment();
-
-  primaryAction.appendChild(
-    root.createComponent(Button, {onPress: () => {}}, 'Action')
-  );
-  secondaryAction.appendChild(
-    root.createComponent(Button, {onPress: () => {}}, 'Secondary')
-  );
-
-  const adminAction = root.createComponent(AdminAction, {
-    title: 'My App Action',
-    primaryAction,
-    secondaryAction,
-  }, 'Modal content');
-
-  root.appendChild(adminAction);
-  root.mount();
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts
deleted file mode 100644
index 0ae1e07b86..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'AdminBlock',
-  description:
-    'This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into. However, this only applies to Block Extensions which render inline on a resource page.',
-  requires: '',
-  thumbnail: 'adminblock-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'AdminBlockProps',
-      description: '',
-      type: 'AdminBlockProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Other',
-  defaultExample: {
-    image: 'adminblock-default.png',
-    codeblock: {
-      title: 'Simple AdminBlock implementation',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-adminblock.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [
-    {
-      type: 'component',
-      name: 'Adminaction',
-      url: '/docs/api/admin-extensions/components/other/adminaction',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
deleted file mode 100644
index 846dd6a762..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface AdminBlockProps {
-  /**
-   * The title to display at the top of the app block. If not provided, the name of the extension will be used. Titles longer than 40 characters will be truncated.
-   */
-  title?: string;
-
-  /**
-   * The summary to display when the app block is collapsed.
-   *
-   * @deprecated App blocks no longer have a collapsed state, so this prop is no longer supported.
-   */
-  summary?: string;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.ts
deleted file mode 100644
index 44844e64bd..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {extension, AdminBlock, Button} from '@shopify/ui-extensions/admin';
-
-export default extension('Playground', (root) => {
-  const adminBlock = root.createComponent(AdminBlock, {
-    title: 'My App Block',
-  }, '5 items active');
-
-  root.appendChild(adminBlock);
-  root.mount();
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts
deleted file mode 100644
index 7242f61180..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'AdminPrintAction',
-  description:
-    'AdminPrintAction is a component used by admin print action extensions to denote a URL to print. Admin print action extensions require the use of this component.',
-  requires: '',
-  thumbnail: 'adminprintaction-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'AdminPrintActionProps',
-      description: '',
-      type: 'AdminPrintActionProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Other',
-  defaultExample: {
-    image: 'adminprintaction-default.png',
-    codeblock: {
-      title: 'Set the source URL of the print action extension.',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-adminprintaction.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [
-    {
-      type: 'component',
-      name: 'AdminAction',
-      url: '/docs/api/admin-extensions/components/other/adminaction',
-    },
-    {
-      type: 'component',
-      name: 'AdminBlock',
-      url: '/docs/api/admin-extensions/components/other/adminblock',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
deleted file mode 100644
index 1f759cec94..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface AdminPrintActionProps {
-  /**
-   * Sets the src URL of the preview and the document to print.
-   * If not provided, the preview will show an empty state and the print button will be disabled.
-   * HTML, PDFs and images are supported.
-   */
-  src?: string;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.ts b/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.ts
deleted file mode 100644
index 4d944ef678..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {extension, AdminPrintAction, Text} from '@shopify/ui-extensions/admin';
-
-export default extension('Playground', (root) => {
-  const adminPrintAction = root.createComponent(
-    AdminPrintAction,
-    {
-      src: 'https://example.com',
-    },
-    root.createComponent(Text, {fontWeight: 'bold'}, 'Modal content'),
-  );
-
-  root.append(adminPrintAction);
-  root.mount();
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts
deleted file mode 100644
index 689eb27cea..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Badge',
-  description:
-    'Use this component to inform merchants of the status of an object or of an action that’s been taken.',
-  requires: '',
-  thumbnail: 'badge-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'BadgeProps',
-      description: '',
-      type: 'BadgeProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Titles and text',
-  defaultExample: {
-    image: 'badge-default.png',
-    codeblock: {
-      title: 'Simple Badge example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-badge.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts b/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts
deleted file mode 100644
index 26a478c85c..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type {AccessibilityLabelProps, SizeScale, Tone} from '../shared';
-import {IconName} from '../Icon/IconName';
-
-interface BadgeBaseProps extends AccessibilityLabelProps {
-  /**
-   * Adjusts the color of the badge.
-   */
-  tone?: Tone;
-  /**
-   * Adjusts the size of the badge.
-   */
-  size?: Extract<SizeScale, 'small-100' | 'base'>;
-}
-
-interface BadgeIconProps {
-  /**
-   * Adds an icon to the badge.
-   */
-  icon: IconName;
-  /**
-   * Adjusts the position of the icon within the badge. Requires `icon` to be set.
-   *
-   * @defaultValue 'start'
-   */
-  iconPosition?: 'start' | 'end';
-}
-
-interface BadgeNoIconProps {
-  icon?: never;
-  iconPosition?: never;
-}
-
-export type BadgeProps = BadgeBaseProps & (BadgeIconProps | BadgeNoIconProps);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Badge/examples/basic-badge.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Badge/examples/basic-badge.example.ts
deleted file mode 100644
index 12225aa62d..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Badge/examples/basic-badge.example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {extend, Badge} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const badge = root.createComponent(
-    Badge,
-    {tone: 'info'},
-    'Fulfilled',
-  );
-
-  root.appendChild(badge);
-});
\ No newline at end of file
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts
deleted file mode 100644
index e5869574fb..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Banner',
-  description:
-    'Use this component if you need to communicate to merchants in a prominent way.',
-  requires: '',
-  thumbnail: 'banner-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'BannerProps',
-      description: '',
-      type: 'BannerProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Titles and text',
-  defaultExample: {
-    image: 'banner-default.png',
-    codeblock: {
-      title: 'Simple Banner example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-banner.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts b/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts
deleted file mode 100644
index 94f6bef550..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {RemoteFragment} from '@remote-ui/core';
-import {GlobalProps, Tone} from '../shared';
-
-export interface BannerProps extends GlobalProps {
-  /**
-   * Message to display inside the banner
-   */
-  title?: string;
-  /**
-   * Adjusts the color and icon of the banner
-   */
-  tone?: Tone;
-  /**
-   * Whether or not the banner can be dismissed
-   */
-  dismissible?: boolean;
-  /**
-   * Function invoked when the banner is dismissed
-   */
-  onDismiss?: () => void;
-
-  /**
-   * Sets the Primary action button of the container. This component must be a button component.
-   */
-  primaryAction?: RemoteFragment;
-
-  /**
-   * Sets the Secondary action button of the container. This component must be a button component.
-   */
-  secondaryAction?: RemoteFragment;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Banner/examples/basic-banner.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Banner/examples/basic-banner.example.ts
deleted file mode 100644
index 6928da3055..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Banner/examples/basic-banner.example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {extend, Banner} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const banner = root.createComponent(Banner, {
-    title: 'Shipping rates changed',
-    dismissible: true,
-    onDismiss: () => console.log('dismissed banner')
-  }, 'Your store may be affected');
-
-  root.appendChild(banner);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts
deleted file mode 100644
index 5ced85aea6..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'BlockStack',
-  description:
-    "This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.",
-  requires: '',
-  thumbnail: 'blockstack-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'BlockStackProps',
-      description: '',
-      type: 'BlockStackProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Structure',
-  defaultExample: {
-    image: 'blockstack-default.png',
-    codeblock: {
-      title: 'Laying out elements in a column',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-blockstack.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'InlineStack',
-      url: '/docs/api/admin-extensions/components/structure/Stack',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts b/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts
deleted file mode 100644
index 08fb962c96..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {
-  AccessibilityRoleProps,
-  GlobalProps,
-  SizingProps,
-  PaddingProps,
-  GapProps,
-  CrossAxisAlignment,
-  MainAxisAlignment,
-  AccessibilityLabelProps,
-} from '../shared';
-
-export interface BlockStackProps
-  extends AccessibilityRoleProps,
-    AccessibilityLabelProps,
-    Pick<GapProps, 'gap' | 'blockGap' | 'rowGap'>,
-    GlobalProps,
-    SizingProps,
-    PaddingProps {
-  /**
-
-  /**
-   * Position children along the main axis
-   *
-   * @defaultValue 'start'
-   */
-  inlineAlignment?: CrossAxisAlignment;
-
-  /**
-   * Position children along the cross axis
-   *
-   * @defaultValue 'start'
-   */
-  blockAlignment?: MainAxisAlignment;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.ts b/packages/ui-extensions/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.ts
deleted file mode 100644
index 6dbc3e5eed..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
-  extension,
-  BlockStack,
-} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'Playground',
-  (root) => {
-    const blockStack = root.createComponent(
-      BlockStack,
-      {
-        gap: true,
-      },
-      [
-        root.createText('Child 1'),
-        root.createText('Child 2'),
-        root.createText('Child 3'),
-        root.createText('Child 4'),
-      ],
-    );
-
-    root.appendChild(blockStack);
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts
deleted file mode 100644
index 7a9fc9b274..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Box',
-  description:
-    'This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.',
-  requires: '',
-  thumbnail: 'box-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'BoxProps',
-      description: '',
-      type: 'BoxProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Structure',
-  defaultExample: {
-    image: 'box-default.png',
-    codeblock: {
-      title: 'Use Box to build your layout',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-box.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts b/packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts
deleted file mode 100644
index b2873a14a5..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type {
-  AccessibilityRoleProps,
-  PaddingProps,
-  SizingProps,
-} from '../shared';
-import {DisplayProps} from '../shared/display';
-
-export interface BoxProps
-  extends AccessibilityRoleProps,
-    SizingProps,
-    PaddingProps,
-    DisplayProps {}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Box/examples/basic-box.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Box/examples/basic-box.example.ts
deleted file mode 100644
index 02b807d866..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Box/examples/basic-box.example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {extend, Box} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const box = root.createComponent(
-    Box,
-    {padding: 'base'},
-    'Box',
-  );
-
-  root.appendChild(box);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Button/Button.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Button/Button.doc.ts
deleted file mode 100644
index f48e6a338a..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Button/Button.doc.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Button',
-  description:
-    'Use this component when you want to provide users the ability to perform specific actions, like saving data.',
-  requires: '',
-  thumbnail: 'button-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'ButtonProps',
-      description: '',
-      type: 'ButtonProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Actions',
-  defaultExample: {
-    image: 'button-default.png',
-    codeblock: {
-      title: 'Add a simple button to your app.',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-button.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [
-    {
-      type: 'component',
-      name: 'Pressable',
-      url: '/docs/api/admin-extensions/components/actions/pressable',
-    },
-    {
-      type: 'component',
-      name: 'Link',
-      url: '/docs/api/admin-extensions/components/actions/link',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts b/packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts
deleted file mode 100644
index 5ded050f7a..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import type {AccessibilityRole, AnchorProps} from '../shared';
-
-export type ButtonProps = ButtonBaseProps | ButtonAnchorProps;
-
-interface CommonProps {
-  /**
-   * A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.
-   *
-   * Use this when using only an icon or the button text is not enough context
-   * for users using assistive technologies.
-   */
-  accessibilityLabel?: string;
-
-  /**
-   * A unique identifier for the button.
-   */
-  id?: string;
-
-  /**
-   * Disables the button, disallowing any interaction.
-   */
-  disabled?: boolean;
-
-  /**
-   * Changes the visual appearance of the Button.
-   */
-  variant?: 'primary' | 'secondary' | 'tertiary';
-
-  /**
-   * Sets the color treatment of the Button.
-   */
-  tone?: 'default' | 'critical';
-
-  /**
-   * Indicate the text language. Useful when the text is in a different language than the rest of the page.
-   * It will allow assistive technologies such as screen readers to invoke the correct pronunciation.
-   * [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)
-   */
-  language?: string;
-
-  /**
-   * Alias for `language`
-   */
-  lang?: string;
-
-  /**
-   * Callback when a link is pressed. If `href` is set,
-   * it will execute the callback and then navigate to the location specified by `href`.
-   */
-  onClick?(): void;
-
-  /**
-   * Alias for `onClick`
-   * Callback when a button is pressed. If `href` is set,
-   * it will execute the callback and then navigate to the location specified by `href`.
-   */
-  onPress?(): void;
-
-  /**
-   * Callback when focus is removed.
-   */
-  onBlur?(): void;
-
-  /**
-   * Callback when input is focused.
-   */
-  onFocus?(): void;
-}
-
-interface ButtonBaseProps extends CommonProps {
-  /**
-   * Sets the semantic meaning of the component’s content. When set,
-   * the role will be used by assistive technologies to help users
-   * navigate the page.
-   */
-  accessibilityRole?: Extract<AccessibilityRole, 'submit' | 'button' | 'reset'>;
-}
-
-interface ButtonAnchorProps extends CommonProps {
-  /**
-   * The URL to link to.
-   * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
-   */
-  href: AnchorProps['href'];
-
-  /**
-   * Alias for `href`
-   * If set, it will navigate to the location specified by `to` after executing the `onClick` callback.
-   */
-  to?: AnchorProps['href'];
-
-  /**
-   * Tells browsers to download the linked resource instead of navigating to it.
-   * Optionally accepts filename value to rename file.
-   */
-  download?: boolean | string;
-
-  /**
-   * Specifies where to display the linked URL
-   * @default '_self'
-   */
-  target?: '_blank' | '_self';
-
-  /**
-   * Callback when a link is pressed. If `href` is set,
-   * it will execute the callback and then navigate to the location specified by `href`.
-   */
-  onClick?: AnchorProps['onClick'];
-
-  /**
-   * Alias for `onClick`
-   * Callback when a link is pressed. If `href` is set,
-   * it will execute the callback and then navigate to the location specified by `href`.
-   */
-  onPress?: AnchorProps['onClick'];
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Button/README.md b/packages/ui-extensions/src/surfaces/admin/components/Button/README.md
deleted file mode 100644
index 98f440a762..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Button/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Button
-
-Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.ts
deleted file mode 100644
index 47231d6f0d..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {extend, Button} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const button = root.createComponent(
-    Button,
-    {onPress: () => console.log('onPress event')},
-    'Click here',
-  );
-
-  root.appendChild(button);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts
deleted file mode 100644
index a58071cacb..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Checkbox',
-  description:
-    'Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.',
-  requires: '',
-  thumbnail: 'checkbox-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'CheckboxProps',
-      description: '',
-      type: 'CheckboxProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'checkbox-default.png',
-    codeblock: {
-      title: 'Add a simple Checkbox',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-checkbox.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts
deleted file mode 100644
index 673f9a8022..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import {AccessibilityLabelProps} from '../shared';
-
-export interface CheckboxProps extends AccessibilityLabelProps {
-  /**
-   * Whether the checkbox is active.
-   */
-  checked?: boolean;
-
-  /**
-   * Whether the checkbox can be changed.
-   */
-  disabled?: boolean;
-
-  /**
-   * Indicate an error to the user. The field will be given a specific stylistic treatment
-   * to communicate problems that have to be resolved immediately.
-   */
-  error?: string;
-
-  /**
-   * A unique identifier for the field. When no `id` is set,
-   * a globally unique value will be used instead.
-   */
-  id?: string;
-
-  /**
-   * Visual content to use as the checkbox label.
-   */
-  label?: string;
-
-  /**
-   * An identifier for the checkbox that is unique within the nearest
-   * containing `Form` component.
-   */
-  name?: string;
-
-  /**
-   * A callback that is run whenever the checkbox is changed. This callback
-   * is called with a boolean indicating whether the checkbox should now be
-   * active or inactive. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components),
-   * so you must store this value in state and reflect it back in the
-   * `checked` or `value` props.
-   */
-  onChange?: (value: boolean) => void;
-
-  /**
-   * Whether the checkbox is active. This prop is an alias for `checked`,
-   * and can be useful in form libraries that provide a normalized API for
-   * dealing with both `boolean` and `string` values. If both `value` and
-   * `checked` are set, `checked` takes precedence.
-   */
-  value?: boolean;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.ts
deleted file mode 100644
index 3c60e9cb44..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {extend, Checkbox} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const checkbox = root.createComponent(
-    Checkbox,
-    {id: 'checkbox', name: 'checkbox'},
-    'Save this information for next time',
-  );
-
-  root.appendChild(checkbox);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts
deleted file mode 100644
index def82a5388..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'ChoiceList',
-  description:
-    'Use this component if you need to group together a related list of interactive choices as radio buttons or checkboxes.',
-  requires: '',
-  thumbnail: 'choicelist-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'ChoiceListProps',
-      description: '',
-      type: 'ChoiceListProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'choicelist-default.png',
-    codeblock: {
-      title: 'Simple ChoiceList example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-choicelist.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'Select',
-      url: '/docs/api/admin-extensions/components/forms/select',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts b/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
deleted file mode 100644
index ad35c01457..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {AccessibilityLabelProps, InputProps} from '../shared';
-
-export interface ChoiceProps
-  extends AccessibilityLabelProps,
-    Pick<
-      InputProps<string>,
-      'disabled' | 'label' | 'id' | 'readOnly' | 'error'
-    > {
-  /**
-   * Whether the choice is checked or not
-   */
-  checked?: boolean;
-}
-
-export interface ChoiceListProps
-  extends Pick<
-    InputProps<string | string[]>,
-    | 'value'
-    | 'name'
-    | 'onChange'
-    | 'disabled'
-    | 'error'
-    | 'readOnly'
-    | 'defaultValue'
-  > {
-  choices?: ChoiceProps[];
-  /**
-   * Whether to allow selection of multiple choices
-   */
-  multiple?: boolean;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.ts b/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.ts
deleted file mode 100644
index 43b998eef4..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-  extension,
-  ChoiceList,
-} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'Playground',
-  (root) => {
-    const blockStack = root.createComponent(
-      ChoiceList,
-      {
-        name: 'Company name',
-        choices: [
-            {label: 'Hidden', id: '1'},
-            {label: 'Optional', id: '2'},
-            {label: 'Required', id: '3'},
-        ]
-      },
-    );
-
-    root.appendChild(blockStack);
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.doc.ts
deleted file mode 100644
index 162f819e47..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.doc.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'ColorPicker',
-  description: 'Use this component if you need to select a color.',
-  requires: '',
-  thumbnail: 'colorpicker-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'ColorPickerProps',
-      description: '',
-      type: 'ColorPickerProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'colorpicker-default.png',
-    codeblock: {
-      title: 'Simple ColorPicker example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-colorpicker.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'Select',
-      url: '/docs/api/admin-extensions/components/forms/select',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts b/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
deleted file mode 100644
index b44222a013..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export interface ColorPickerProps {
-  /** ID for the element. */
-  id?: string;
-
-  /**
-   * Allow user to select an alpha value.
-   * @default false
-   */
-  allowAlpha?: boolean;
-
-  /**
-   * The `onChange` handler will emit the value in hex.
-   * If the `allowAlpha` prop is `true`, `onChange` will emit an 8-value hex (#RRGGBBAA).
-   * If the `allowAlpha` prop is `false`, `onChange` will emit a 6-value hex (#RRGGBB).
-   */
-  onChange?(value: string): void;
-
-  /**
-   * The currently selected color.
-   *
-   * Supported formats include:
-   * - RGB @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
-   * - RGBA @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
-   * - Hex (3-value, 4-value, 6-value, 8-value) @see https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
-   *
-   * For RGB and RGBA, both the legacy syntax (comma-separated) and modern syntax (space-separate) are supported.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
-   *
-   * If the value is invalid, the component will select rgb(0, 0, 0).
-   *
-   * The `onChange` handler will emit the value in hex.
-   * If the `allowAlpha` prop is `true`, `onChange` will emit an 8-value hex (#RRGGBBAA).
-   * If the `allowAlpha` prop is `false`, `onChange` will emit a 6-value hex (#RRGGBB).
-   */
-  value?: string;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.ts b/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.ts
deleted file mode 100644
index 30e4ce8537..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
-  extension,
-  ColorPicker,
-} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'Playground',
-  (root) => {
-    const blockStack = root.createComponent(
-      ColorPicker,
-      {
-        value: "rgba(255 0 0 / 0.5)",
-        label: ""
-      },
-    );
-
-    root.appendChild(blockStack);
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts
deleted file mode 100644
index 69a04a39a8..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'CustomerSegmentTemplate',
-  description:
-    'CustomerSegmentTemplate is used to configure a template rendered in the **Customers** section of the Shopify admin. Templates can be applied in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments) and used to create segments.',
-  requires:
-    'use of the [admin.customers.segmentation-templates.render](/docs/api/admin-extensions/api/extension-targets#extensiontargets-propertydetail-admincustomerssegmentationtemplatesrender) target.',
-  isVisualComponent: true,
-  thumbnail: 'customersegmenttemplate-thumbnail.png',
-  type: '',
-  definitions: [
-    {
-      title: 'CustomerSegmentTemplateProps',
-      description: '',
-      type: 'CustomerSegmentTemplateProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Other',
-  defaultExample: {
-    image: 'customersegmenttemplate-default',
-    codeblock: {
-      title: 'Simple CustomerSegmentTemplate implementation',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/customersegmenttemplate.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts b/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
deleted file mode 100644
index b1eafced79..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Reserved namespace and key for the customer standard metafield used in the template's query.
- * More info - https://shopify.dev/docs/apps/custom-data/metafields/definitions/standard
- */
-type CustomerStandardMetafieldDependency = 'facts.birth_date';
-
-export interface CustomerSegmentTemplateProps {
-  /**
-   * The localized title of the template.
-   */
-  title: string;
-  /**
-   * The localized description of the template. An array can be used for multiple paragraphs.
-   */
-  description: string | string[];
-  /**
-   * The code snippet to render in the template with syntax highlighting. The `query` is not validated in the template.
-   */
-  query: string;
-  /**
-   * The code snippet to insert in the segment editor. If missing, `query` will be used. The `queryToInsert` is not validated in the template.
-   */
-  queryToInsert?: string;
-  /**
-   * The list of customer standard metafields or custom metafields used in the template's query.
-   */
-  dependencies?: {
-    standardMetafields?: CustomerStandardMetafieldDependency[];
-    customMetafields?: string[];
-  };
-  /**
-   * ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month.
-   */
-  createdOn?: string;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.ts b/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.ts
deleted file mode 100644
index f7d7448f2e..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {extension, CustomerSegmentTemplate} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'admin.customers.segmentation-templates.render',
-  (root, {i18n}) => {
-    const template = root.createComponent(CustomerSegmentTemplate, {
-      title: i18n.translate('template.title'),
-      description: i18n.translate('template.description'),
-      query: "number_of_orders > 0'",
-      createdOn: new Date('2023-01-15').toISOString(),
-    });
-
-    root.appendChild(template);
-
-    root.mount();
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.doc.ts
deleted file mode 100644
index b50231596c..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.doc.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'DateField',
-  description:
-    'This is a form field that lets users select a date using the DatePicker component.',
-  requires: '',
-  thumbnail: 'datefield-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'DatePickerProps',
-      description: '',
-      type: 'DatePickerProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'datefield-default.png',
-    codeblock: {
-      title: 'Add a single-date DateField',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/DateField/examples/basic-datefield.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-datefield.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  examples: {
-    description: '',
-    examples: [
-      {
-        description: 'Use this when users need to select multiple dates.',
-        codeblock: {
-          title: 'Add a multi-date DateField',
-          tabs: [
-            {
-              title: 'React',
-              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.tsx',
-              language: 'tsx',
-            },
-            {
-              title: 'JS',
-              code: './examples/multiple-datefield.example.ts',
-              language: 'js',
-            },
-          ],
-        },
-      },
-      {
-        description: 'Use this when users need to select a range of dates.',
-        codeblock: {
-          title: 'Add a range DateField',
-          tabs: [
-            {
-              title: 'React',
-              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/DateField/examples/range-datefield.example.tsx',
-              language: 'tsx',
-            },
-            {
-              title: 'JS',
-              code: './examples/range-datefield.example.ts',
-              language: 'js',
-            },
-          ],
-        },
-      },
-    ],
-  },
-
-  related: [],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts b/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts
deleted file mode 100644
index 0a9a6485a7..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type {DatePickerProps} from '../DatePicker/DatePicker';
-import type {TextFieldProps} from '../TextField/TextField';
-
-export interface DateFieldProps
-  extends Pick<
-      TextFieldProps,
-      | 'label'
-      | 'name'
-      | 'id'
-      | 'readOnly'
-      | 'onFocus'
-      | 'onInput'
-      | 'onBlur'
-      | 'onChange'
-      | 'error'
-      | 'value'
-    >,
-    Pick<
-      DatePickerProps<string>,
-      'yearMonth' | 'defaultYearMonth' | 'disabled' | 'onYearMonthChange'
-    > {}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DateField/examples/basic-datefield.example.ts b/packages/ui-extensions/src/surfaces/admin/components/DateField/examples/basic-datefield.example.ts
deleted file mode 100644
index 34ffcb94e9..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/DateField/examples/basic-datefield.example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {extend, DateField} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const dateField = root.createComponent(
-    DateField,
-    {},
-    'DateField',
-  );
-
-  root.appendChild(dateField);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.ts b/packages/ui-extensions/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.ts
deleted file mode 100644
index 41347e0f29..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {extend, DateField} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const dateField = root.createComponent(
-    DateField,
-    { selected: ['2023-11-08'] },
-    'DateField',
-  );
-
-  root.appendChild(dateField);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DateField/examples/range-datefield.example.ts b/packages/ui-extensions/src/surfaces/admin/components/DateField/examples/range-datefield.example.ts
deleted file mode 100644
index 4bda796774..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/DateField/examples/range-datefield.example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {extend, DateField} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const dateField = root.createComponent(
-    DateField,
-    { selected: {start: '2023-11-08', end: '2023-11-10' } },
-    'DateField',
-  );
-
-  root.appendChild(dateField);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.doc.ts
deleted file mode 100644
index 9457fef828..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.doc.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'DatePicker',
-  description:
-    'Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.    ',
-  requires: '',
-  thumbnail: 'datepicker-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'DatePickerProps',
-      description: '',
-      type: 'DatePickerProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'datepicker-default.png',
-    codeblock: {
-      title: 'Add a single-date DatePicker',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-datepicker.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  examples: {
-    description: '',
-    examples: [
-      {
-        description: 'Use this when merchants need to select multiple dates.',
-        codeblock: {
-          title: 'Add a multi-date DatePicker',
-          tabs: [
-            {
-              title: 'React',
-              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.tsx',
-              language: 'tsx',
-            },
-            {
-              title: 'JS',
-              code: './examples/multiple-datepicker.example.ts',
-              language: 'js',
-            },
-          ],
-        },
-      },
-      {
-        description: 'Use this when merchants need to select a range of dates.',
-        codeblock: {
-          title: 'Add a range DatePicker',
-          tabs: [
-            {
-              title: 'React',
-              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.tsx',
-              language: 'tsx',
-            },
-            {
-              title: 'JS',
-              code: './examples/range-datepicker.example.ts',
-              language: 'js',
-            },
-          ],
-        },
-      },
-    ],
-  },
-
-  related: [],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts
deleted file mode 100644
index c54d03986c..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-export interface DatePickerProps<T extends Selected> {
-  /**
-   * [Controlled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display.
-   * Use in combination with `onYearMonthChange`.
-   * Makes year/month navigation [controlled](https://reactjs.org/docs/forms.html#controlled-components).
-   */
-  yearMonth?: {year: Year; month: Month} | YearMonthString;
-
-  /**
-   * Default [uncontrolled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display.
-   * Ignored when year/month navigation is [controlled](https://reactjs.org/docs/forms.html#controlled-components).
-   */
-  defaultYearMonth?: {year: Year; month: Month} | YearMonthString;
-
-  /**
-   * Disabled dates, days, and/or ranges, or the date picker.
-   * Unbound range disables all dates either from `start` date or to `end` date.
-   * `true` disables the date picker.
-   */
-  disabled?: Disabled | Disabled[] | boolean;
-
-  /**
-   * Whether the date picker is read-only.
-   */
-  readOnly?: boolean;
-
-  /**
-   * A date, an array of dates, or a range object with `start` and/or `end` keys indicating the selected dates.
-   * When a range is set, dates between the boundaries will be selected.
-   * Passed `undefined` or `string` allows user to select a single date,
-   * an empty array or an array of dates allows selecting multiple dates,
-   * an empty object or a Range object allows selecting a range of dates.
-   */
-  selected?: T;
-
-  /**
-   * A callback that is run whenever a date is selected or unselected. This callback
-   * is called with a string, an array of strings or a range object representing the selected dates.
-   * This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components),
-   * so you must store these values in state and reflect it back in the
-   * `selected` props.
-   */
-  onChange?(selected: T): void;
-
-  /**
-   * A callback that is run whenever the month is changed. This callback
-   * is called with an object indicating the year/month the UI should change to.
-   * When year/month navigation is controlled you must store these values in state and
-   * reflect it back in the `yearMonth` prop.
-   */
-  onYearMonthChange?(yearMonth: {year: Year; month: Month}): void;
-}
-
-/**
- * A date string using the simplified ISO 8601 format (`YYYY-MM-DD`)
- */
-export type DateString = string;
-
-/**
- * A year/month string using the simplified ISO 8601 format (`YYYY-MM`)
- */
-export type YearMonthString = string;
-
-/**
- * Month in 1-12 range
- */
-export type Month = number;
-
-export type Year = number;
-
-export type Day =
-  | 'Sunday'
-  | 'Monday'
-  | 'Tuesday'
-  | 'Wednesday'
-  | 'Thursday'
-  | 'Friday'
-  | 'Saturday';
-
-export type Selected = DateString | DateString[] | Range;
-export type Disabled = DateString | Range | Day;
-
-export interface Range {
-  /**
-   * First day (inclusive) of the selected range
-   */
-  start?: DateString;
-
-  /**
-   * Last day (inclusive) of the selected range
-   */
-  end?: DateString;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.ts b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.ts
deleted file mode 100644
index 5b1d43db75..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {extend, DatePicker} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const datePicker = root.createComponent(
-    DatePicker,
-    {},
-    'DatePicker',
-  );
-
-  root.appendChild(datePicker);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.ts b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.ts
deleted file mode 100644
index 0a5a62eda2..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {extend, DatePicker} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const datePicker = root.createComponent(
-    DatePicker,
-    { selected: ['2023-11-08'] },
-    'DatePicker',
-  );
-
-  root.appendChild(datePicker);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.ts b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.ts
deleted file mode 100644
index 224910473b..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {extend, DatePicker} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const datePicker = root.createComponent(
-    DatePicker,
-    { selected: {start: '2023-11-08', end: '2023-11-10' } },
-    'DatePicker',
-  );
-
-  root.appendChild(datePicker);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts
deleted file mode 100644
index d6d1c4292d..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Divider',
-  description:
-    'Use this to create a clear visual separation between different elements in your user interface.',
-  requires: '',
-  thumbnail: 'divider-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'DividerProps',
-      description: '',
-      type: 'DividerProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Structure',
-  defaultExample: {
-    image: 'divider-default.png',
-    codeblock: {
-      title: 'Simple Divider example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-divider.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts b/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts
deleted file mode 100644
index 9ac3ea593e..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface DividerProps {
-  /**
-   * Specify the direction of the divider.
-   *
-   * @defaultValue 'inline'
-   * @defaultValue 'inline'
-   */
-  direction?: 'inline' | 'block';
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Divider/README.md b/packages/ui-extensions/src/surfaces/admin/components/Divider/README.md
deleted file mode 100644
index 4d967bc833..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Divider/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Divider
-
-The Divider component is used to separate or group content and represents a thematic break between elements.
-
-## Expected HTML in Web host
-
-`<hr />`
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Divider/examples/basic-divider.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Divider/examples/basic-divider.example.ts
deleted file mode 100644
index 7d8b8019b4..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Divider/examples/basic-divider.example.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-    extension,
-    Divider,
-  } from '@shopify/ui-extensions/admin';
-
-  export default extension(
-    'Playground',
-    (root) => {
-      const divier = root.createComponent(Divider);
-      const firstText = root.createText('First Text');
-      const secondText = root.createText('Second Text');
-
-      root.appendChild(firstText);
-      root.appendChild(divier);
-      root.appendChild(secondText);
-    },
-  );
diff --git a/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.doc.ts
deleted file mode 100644
index aa48757fac..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.doc.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'EmailField',
-  description: 'Use this when you need users to provide their email addresses.',
-  requires: '',
-  thumbnail: 'emailfield-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'EmailFieldProps',
-      description: '',
-      type: 'EmailFieldProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'emailfield-default.png',
-    codeblock: {
-      title: 'Simple EmailField example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-emailfield.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: '/docs/api/admin-extensions/components/forms/textfield',
-    },
-    {
-      type: 'component',
-      name: 'NumberField',
-      url: '/docs/api/admin-extensions/components/forms/numberfield',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts b/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts
deleted file mode 100644
index f98253529a..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-  AutocompleteProps,
-  AnyAutocompleteField,
-  AutocompleteAddressGroup,
-  InputProps,
-  MinMaxLengthProps,
-} from '../shared';
-
-export interface EmailFieldProps
-  extends InputProps<string>,
-    MinMaxLengthProps,
-    AutocompleteProps<EmailAutocompleteField> {}
-
-export type EmailAutocompleteField = Extract<
-  AnyAutocompleteField,
-  'email' | `${AutocompleteAddressGroup} email`
->;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/EmailField/README.md b/packages/ui-extensions/src/surfaces/admin/components/EmailField/README.md
deleted file mode 100644
index 1b27f40aae..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/EmailField/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# EmailField
-
-Use a EmailField to let the user enter an email address.
-
-## Expected HTML in Web host
-
-`<input type="email" />`
diff --git a/packages/ui-extensions/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.ts b/packages/ui-extensions/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.ts
deleted file mode 100644
index 8124a9621d..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {extend, EmailField} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const emailField = root.createComponent(EmailField, {
-    label: 'Enter your email address',
-  });
-
-  root.appendChild(emailField);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Form/Form.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Form/Form.doc.ts
deleted file mode 100644
index c2ffc38a00..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Form/Form.doc.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Form',
-  description:
-    'Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.',
-  requires: '',
-  thumbnail: 'form-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'FormProps',
-      description: '',
-      type: 'FormProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'form-default.png',
-    codeblock: {
-      title: 'Simple form implementation',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-form.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: '/docs/api/admin-extensions/components/forms/textfield',
-    },
-    {
-      type: 'component',
-      name: 'NumberField',
-      url: '/docs/api/admin-extensions/components/forms/numberfield',
-    },
-    {
-      type: 'component',
-      name: 'EmailField',
-      url: '/docs/api/admin-extensions/components/forms/emailfield',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts b/packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts
deleted file mode 100644
index 16aa8ad110..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Form/Form.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export interface FormProps {
-  /**
-   * A unique identifier for the form.
-   */
-  id?: string;
-
-  /**
-   * A callback that is run when the form is submitted.
-   */
-  onSubmit(): void | Promise<void>;
-
-  /**
-   * A callback that is run when the form is reset.
-   */
-  onReset(): void | Promise<void>;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Form/examples/basic-form.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Form/examples/basic-form.example.ts
deleted file mode 100644
index a8b0ec215e..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Form/examples/basic-form.example.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {
-  extend,
-  Form,
-  TextField,
-} from '@shopify/ui-extensions/admin';
-
-extend('admin.product-details.block.render', (root) => {
-  let name = '';
-
-  const textField = root.createComponent(
-    TextField,
-    {
-      label: 'name',
-      value: name,
-      onChange: (value) => {
-        textField.updateProps({value});
-        name = value;
-      },
-    }
-  );
-
-  const onSubmit = async () => {
-    // API call to save the values
-    const res = await fetch('/save', {method:'POST', body: JSON.stringify({name})});
-    if (!res.ok) {
-      const json = await res.json();
-      // The Host can catch these errors and do something with them.
-      throw Error(`There were errors: ${json.errors.join(',')}`);
-    }
-  };
-
-  const onReset = async () => {
-    name = '';
-  };
-
-  const form = root.createComponent(
-    Form,
-    {onSubmit, onReset}
-  );
-
-  form.appendChild(textField);
-  root.appendChild(form);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.doc.ts
deleted file mode 100644
index 797e910439..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.doc.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'FunctionSettings',
-  description:
-    'FunctionSettings should be used when configuring the metafield configuration of a Shopify Function. It provides a structure for various input fields and controls, such as text fields, checkboxes, and selections. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.',
-  requires: '',
-  thumbnail: 'form-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'FunctionSettingsProps',
-      description: '',
-      type: 'FunctionSettingsProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'form-default.png',
-    codeblock: {
-      title: 'Simple function settings form implementation',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-functionsettings.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: '/docs/api/admin-extensions/components/forms/textfield',
-    },
-    {
-      type: 'component',
-      name: 'NumberField',
-      url: '/docs/api/admin-extensions/components/forms/numberfield',
-    },
-    {
-      type: 'component',
-      name: 'ChoiceList',
-      url: '/docs/api/admin-extensions/components/forms/choicelist',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts b/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
deleted file mode 100644
index 729f9e26e8..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-export interface FunctionSettingsProps {
-  /**
-   * A unique identifier for the form.
-   */
-  id?: string;
-
-  /**
-   * An optional callback function that will be run by the admin when the user
-   * commits their changes in the admin-rendered part of the function settings
-   * experience. If this function returns a promise, the admin will wait for the
-   * promise to resolve before committing any changes to Shopify’s servers. If
-   * the promise rejects, the admin will abort the changes and display an error,
-   * using the `message` property of the error you reject with.
-   */
-  onSave?(): void | Promise<void>;
-
-  /**
-   * An optional callback function that will be run by the admin when the
-   * committing the changes to Shopify’s servers fails. The errors you receive
-   * in the `errors` argument will only be those that were caused by data your
-   * extension provided; network errors and user errors that are out of your
-   * control will not be reported here.
-   *
-   * In the `onError` callback, you should update your extension’s UI to
-   * highlight the fields that caused the errors, and display the error messages
-   * to the user.
-   */
-  onError?(errors: FunctionSettingsError[]): void;
-}
-
-export interface FunctionSettingsError {
-  /**
-   * A unique identifier describing the “class” of error. These will match
-   * the GraphQL error codes as closely as possible. For example the enums
-   * returned by the `metafieldsSet` mutation
-   *
-   * @see https://shopify.dev/docs/api/admin-graphql/latest/enums/MetafieldsSetUserErrorCode
-   */
-  code: string;
-
-  /**
-   * A translated message describing the error.
-   */
-  message: string;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.ts b/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.ts
deleted file mode 100644
index 1c8570d709..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {
-  extension,
-  FunctionSettings,
-  TextField,
-  Section,
-} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'admin.settings.validation.render',
-  async (root, api) => {
-    // Use Direct API access to fetch initial
-    // metafields from the server if we are
-    // rendering against a pre-existing `Validation`
-    const initialSettings = api.data.validation
-      ? await fetchSettings(api.data.validation.id)
-      : {};
-
-    const textField = root.createComponent(TextField, {
-      value: initialSettings.name,
-      label: 'Name',
-      name: 'name',
-      onChange(value) {
-        textField.updateProps({value, error: undefined});
-        api.applyMetafieldsChange({
-          type: 'updateMetafield',
-          namespace: '$app:my_namespace',
-          key: 'name',
-          value,
-          valueType: 'single_line_text_field',
-        });
-      },
-    });
-
-    const section = root.createComponent(Section, {
-      heading: 'Settings',
-    });
-
-    const settings = root.createComponent(FunctionSettings, {
-      onError(errors) {
-        textField.updateProps({error: errors[0]?.message});
-      },
-    });
-
-    section.append(textField);
-    settings.append(section);
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts
deleted file mode 100644
index b22f231f01..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Heading',
-  description:
-    "Use this to display a title. It's similar to the h1-h6 tags in HTML",
-  requires: '',
-  thumbnail: 'heading-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'HeadingProps',
-      description: '',
-      type: 'HeadingProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Titles and text',
-  defaultExample: {
-    image: 'heading-default.png',
-    codeblock: {
-      title: 'Simple Heading example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-heading.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'Text',
-      url: '/docs/api/admin-extensions/components/titles-and-text/text',
-    },
-    {
-      type: 'component',
-      name: 'HeadingGroup',
-      url: '/docs/api/admin-extensions/components/titles-and-text/headinggroup',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts b/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts
deleted file mode 100644
index ea373ad81b..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-type Level = 1 | 2 | 3 | 4 | 5 | 6;
-
-export interface HeadingProps {
-  /** A unique identifier for the field. */
-  id?: string;
-
-  /**
-   * The visual size of the heading.
-   *
-   * There are no guarantee that the level set will render the same level in the HTML `<h*>` element.
-   * The heading level that gets rendered is determined by the parent `HeadingGroup` or `Section` component.
-   */
-  size?: Level;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Heading/README.md b/packages/ui-extensions/src/surfaces/admin/components/Heading/README.md
deleted file mode 100644
index f904659a06..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Heading/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Heading
-
-Headings communicate the organization of the content on the page.
-
-## Note
-
-:exclamation: The `level` affects the visual level, but not the actual semantic heading HTML element (`<h1>`,`<h2>`, etc) that gets rendered by the browser. :exclamation:
-
-The specific heading element that gets rendered will be dynamically determined by the `HeadingGroup` component.
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Heading/examples/basic-heading.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Heading/examples/basic-heading.example.ts
deleted file mode 100644
index 8ff17ef67e..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Heading/examples/basic-heading.example.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {extend, Heading} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const heading = root.createComponent(Heading, undefined, 'Headings are cool');
-
-  root.appendChild(heading);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts
deleted file mode 100644
index 6b2129e22c..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'HeadingGroup',
-  description:
-    'This groups headings together, much like the hgroup element in HTML.',
-  requires: '',
-  thumbnail: 'headinggroup-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  category: 'Components',
-  subCategory: 'Titles and text',
-  defaultExample: {
-    image: 'headinggroup-default.png',
-    codeblock: {
-      title: 'Simple HeadingGroup example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-headinggroup.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'Heading',
-      url: '/docs/api/admin-extensions/components/titles-and-text/heading',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts b/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
deleted file mode 100644
index 0560c41736..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts
+++ /dev/null
@@ -1 +0,0 @@
-export interface HeadingGroupProps {}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/README.md b/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/README.md
deleted file mode 100644
index 0cde8de451..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# HeadingGroup
-
-Heading group controls the heading level of headings nested within it, like H1, H2, H3.
-
-Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group.
diff --git a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.ts b/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.ts
deleted file mode 100644
index 4562ad415a..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {
-    extend,
-    HeadingGroup,
-    Heading,
-    BlockStack,
-  } from '@shopify/ui-extensions/admin';
-
-  extend('Playground', (root) => {
-    const headingGroup = root.createComponent(BlockStack, undefined, [
-      root.createComponent(Heading, undefined, 'Heading <h1>'),
-      root.createComponent(HeadingGroup, undefined, [
-        root.createComponent(Heading, undefined, 'Heading <h2>'),
-        root.createComponent(HeadingGroup, undefined, [
-          root.createComponent(Heading, undefined, 'Heading <h3>'),
-        ]),
-      ]),
-    ]);
-
-    root.appendChild(headingGroup);
-  });
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts
deleted file mode 100644
index a4e93b6352..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Icon',
-  description:
-    'This component renders an icon from a predefined list. Choose the one that suits your needs.',
-  requires: '',
-  thumbnail: 'icon-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'IconProps',
-      description: '',
-      type: 'IconProps',
-    },
-    {
-      title: 'IconName',
-      description: 'List of available Icons for the Icon component',
-      type: 'IconName',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Media',
-  defaultExample: {
-    image: 'icon-default.png',
-    codeblock: {
-      title: 'Simple Icon example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-icon.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  subSections: [
-    {
-      type: 'Generic',
-      title: 'Available Icons',
-      anchorLink: 'availableIcons',
-      sectionContent:
-        'The available Icons are a 1:1 map of what Icons are available in Polaris. You can find the full list of Icons in the [Polaris Icons documentation](https://polaris.shopify.com/icons).',
-      sectionCard: [
-        {
-          type: 'information',
-          name: 'Polaris Icons',
-          url: 'https://polaris.shopify.com/icons',
-        },
-      ],
-    },
-  ],
-  related: [
-    {
-      type: 'component',
-      name: 'Image',
-      url: '/docs/api/admin-extensions/components/media/image',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts
deleted file mode 100644
index ff5db53b21..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {IconName} from './IconName';
-import {AccessibilityLabelProps} from '../shared';
-
-export interface IconProps extends AccessibilityLabelProps {
-  /**
-   * Set the color of the icon.
-   *
-   * - `inherit` will take the color value from its parent,
-   * giving the link a monochrome appearance.
-   *
-   * @defaultValue 'inherit'
-   */
-  tone?: 'inherit' | 'critical';
-
-  /** A unique identifier for the icon. */
-  id?: string;
-
-  /**
-   * Adjusts the size of the icon.
-   *
-   * @defaultValue 'base'
-   */
-  size?:
-    | 'base'
-    /**
-     * `fill` will take the space available in the container and keep the icon's proportion.
-     */
-    | 'fill';
-
-  /**
-   * Specifies the name of the icon that will be displayed.
-   */
-  name: IconName;
-}
-export type {IconName};
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/IconName.ts b/packages/ui-extensions/src/surfaces/admin/components/Icon/IconName.ts
deleted file mode 100644
index 462d39f0a8..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Icon/IconName.ts
+++ /dev/null
@@ -1,567 +0,0 @@
-export type IconName =
-  | 'AbandonedCartFilledMajor'
-  | 'AbandonedCartMajor'
-  | 'AccessibilityMajor'
-  | 'ActivitiesMajor'
-  | 'AddCodeMajor'
-  | 'AddImageMajor'
-  | 'AddMajor'
-  | 'AddNoteMajor'
-  | 'AddProductMajor'
-  | 'AdjustMinor'
-  | 'AffiliateMajor'
-  | 'AlertMinor'
-  | 'AnalyticsBarHorizontalMinor'
-  | 'AnalyticsBarStackedMinor'
-  | 'AnalyticsCohortMinor'
-  | 'AnalyticsDonutMinor'
-  | 'AnalyticsFilledMinor'
-  | 'AnalyticsFunnelMinor'
-  | 'AnalyticsLineMinor'
-  | 'AnalyticsMajor'
-  | 'AnalyticsMinor'
-  | 'AnalyticsTableMinor'
-  | 'AnyClickModelMinor'
-  | 'AppExtensionMinor'
-  | 'AppsFilledMajor'
-  | 'AppsMajor'
-  | 'AppsMinor'
-  | 'ArchiveMajor'
-  | 'ArchiveMinor'
-  | 'ArrowDownMinor'
-  | 'ArrowLeftMinor'
-  | 'ArrowRightMinor'
-  | 'ArrowUpMinor'
-  | 'AttachmentFilledMajor'
-  | 'AttachmentMajor'
-  | 'AutomationFilledMajor'
-  | 'AutomationMajor'
-  | 'BackspaceMajor'
-  | 'BalanceFilledMajor'
-  | 'BalanceMajor'
-  | 'BankFilledMajor'
-  | 'BankMajor'
-  | 'BarcodeMajor'
-  | 'BehaviorFilledMajor'
-  | 'BehaviorMajor'
-  | 'BehaviorMinor'
-  | 'BillingStatementDollarFilledMajor'
-  | 'BillingStatementDollarMajor'
-  | 'BillingStatementEuroFilledMajor'
-  | 'BillingStatementEuroMajor'
-  | 'BillingStatementPoundFilledMajor'
-  | 'BillingStatementPoundMajor'
-  | 'BillingStatementRupeeFilledMajor'
-  | 'BillingStatementRupeeMajor'
-  | 'BillingStatementYenFilledMajor'
-  | 'BillingStatementYenMajor'
-  | 'BlockMinor'
-  | 'BlockquoteMajor'
-  | 'BlogMajor'
-  | 'BoldMajor'
-  | 'BoldMinor'
-  | 'BugMajor'
-  | 'ButtonCornerPillMajor'
-  | 'ButtonCornerRoundedMajor'
-  | 'ButtonCornerSquareMajor'
-  | 'ButtonMinor'
-  | 'BuyButtonButtonLayoutMajor'
-  | 'BuyButtonHorizontalLayoutMajor'
-  | 'BuyButtonMajor'
-  | 'BuyButtonVerticalLayoutMajor'
-  | 'CalendarMajor'
-  | 'CalendarMinor'
-  | 'CalendarTickMajor'
-  | 'CalendarTimeMinor'
-  | 'CameraMajor'
-  | 'CancelMajor'
-  | 'CancelMinor'
-  | 'CancelSmallMinor'
-  | 'CapitalFilledMajor'
-  | 'CapitalMajor'
-  | 'CapturePaymentMinor'
-  | 'CardReaderChipMajor'
-  | 'CardReaderMajor'
-  | 'CardReaderTapMajor'
-  | 'CaretDownMinor'
-  | 'CaretUpMinor'
-  | 'CartDownFilledMajor'
-  | 'CartDownMajor'
-  | 'CartFilledMajor'
-  | 'CartMajor'
-  | 'CartUpMajor'
-  | 'CashDollarFilledMajor'
-  | 'CashDollarMajor'
-  | 'CashDollarMinor'
-  | 'CashEuroMajor'
-  | 'CashPoundMajor'
-  | 'CashRupeeMajor'
-  | 'CashYenMajor'
-  | 'CategoriesMajor'
-  | 'ChannelsMajor'
-  | 'ChatMajor'
-  | 'ChecklistAlternateMajor'
-  | 'ChecklistMajor'
-  | 'CheckoutMajor'
-  | 'ChevronDownMinor'
-  | 'ChevronLeftMinor'
-  | 'ChevronRightMinor'
-  | 'ChevronUpMinor'
-  | 'CircleAlertMajor'
-  | 'CircleCancelMajor'
-  | 'CircleCancelMinor'
-  | 'CircleChevronDownMinor'
-  | 'CircleChevronLeftMinor'
-  | 'CircleChevronRightMinor'
-  | 'CircleChevronUpMinor'
-  | 'CircleDisableMinor'
-  | 'CircleDisabledMajor'
-  | 'CircleDotsMajor'
-  | 'CircleDownMajor'
-  | 'CircleInformationMajor'
-  | 'CircleLeftMajor'
-  | 'CircleMinusMajor'
-  | 'CircleMinusMinor'
-  | 'CircleMinusOutlineMinor'
-  | 'CirclePlusMajor'
-  | 'CirclePlusMinor'
-  | 'CirclePlusOutlineMinor'
-  | 'CircleRightMajor'
-  | 'CircleTickMajor'
-  | 'CircleTickMinor'
-  | 'CircleTickOutlineMinor'
-  | 'CircleUpMajor'
-  | 'ClipboardMinor'
-  | 'ClockMajor'
-  | 'ClockMinor'
-  | 'CodeMajor'
-  | 'CodeMinor'
-  | 'CollectionReferenceMinor'
-  | 'CollectionsFilledMajor'
-  | 'CollectionsMajor'
-  | 'ColorNoneMinor'
-  | 'ColorsMajor'
-  | 'Column1Major'
-  | 'ColumnWithTextMajor'
-  | 'Columns2Major'
-  | 'Columns3Major'
-  | 'Columns3Minor'
-  | 'ComposeMajor'
-  | 'ConfettiMajor'
-  | 'ConnectMinor'
-  | 'ContentFilledMinor'
-  | 'ContentMinor'
-  | 'ConversationMinor'
-  | 'CreditCardCancelMajor'
-  | 'CreditCardMajor'
-  | 'CreditCardPercentMajor'
-  | 'CreditCardSecureMajor'
-  | 'CurrencyConvertMinor'
-  | 'CustomerMinusMajor'
-  | 'CustomerPlusMajor'
-  | 'CustomersFilledMinor'
-  | 'CustomersMajor'
-  | 'CustomersMinor'
-  | 'DataDrivenModelMinor'
-  | 'DataVisualizationMajor'
-  | 'DecimalMinor'
-  | 'DeleteMajor'
-  | 'DeleteMinor'
-  | 'DesktopMajor'
-  | 'DetailedPopUpMajor'
-  | 'DiamondAlertMajor'
-  | 'DiamondAlertMinor'
-  | 'DigitalMediaReceiverMajor'
-  | 'DiscountAutomaticMajor'
-  | 'DiscountCodeMajor'
-  | 'DiscountsFilledMinor'
-  | 'DiscountsMajor'
-  | 'DiscountsMinor'
-  | 'DisputeMinor'
-  | 'DnsSettingsMajor'
-  | 'DockFloatingMajor'
-  | 'DockSideMajor'
-  | 'DomainNewMajor'
-  | 'DomainRedirectMinor'
-  | 'DomainsFilledMajor'
-  | 'DomainsMajor'
-  | 'DraftOrdersFilledMajor'
-  | 'DraftOrdersMajor'
-  | 'DragDropMajor'
-  | 'DragHandleMinor'
-  | 'DropdownMinor'
-  | 'DuplicateMinor'
-  | 'DynamicSourceMajor'
-  | 'DynamicSourceMinor'
-  | 'EditMajor'
-  | 'EditMinor'
-  | 'EmailMajor'
-  | 'EmailNewsletterMajor'
-  | 'EmbedMinor'
-  | 'EnableSelectionMinor'
-  | 'EnterMajor'
-  | 'EnvelopeMajor'
-  | 'ExchangeMajor'
-  | 'ExistingInventoryMajor'
-  | 'ExitMajor'
-  | 'ExploreImagesMajor'
-  | 'ExportMinor'
-  | 'ExtendMajor'
-  | 'ExtendMinor'
-  | 'ExternalMinor'
-  | 'ExternalSmallMinor'
-  | 'EyeDropperMinor'
-  | 'FaviconMajor'
-  | 'FavoriteMajor'
-  | 'FeaturedCollectionMajor'
-  | 'FeaturedContentMajor'
-  | 'FileFilledMinor'
-  | 'FileMinor'
-  | 'FilterMajor'
-  | 'FilterMinor'
-  | 'FinancesMajor'
-  | 'FinancesMinor'
-  | 'FirstClickModelMinor'
-  | 'FirstOrderMajor'
-  | 'FirstVisitMajor'
-  | 'FlagMajor'
-  | 'FlipCameraMajor'
-  | 'FolderDownMajor'
-  | 'FolderMajor'
-  | 'FolderMinusMajor'
-  | 'FolderPlusMajor'
-  | 'FolderUpMajor'
-  | 'FollowUpEmailMajor'
-  | 'FoodMajor'
-  | 'FooterMajor'
-  | 'FormsMajor'
-  | 'FraudProtectMajor'
-  | 'FraudProtectMinor'
-  | 'FraudProtectPendingMajor'
-  | 'FraudProtectPendingMinor'
-  | 'FraudProtectUnprotectedMajor'
-  | 'FraudProtectUnprotectedMinor'
-  | 'FulfillmentFulfilledMajor'
-  | 'FulfillmentOnHoldMajor'
-  | 'GamesConsoleMajor'
-  | 'GaugeMajor'
-  | 'GaugeMinor'
-  | 'GiftCardFilledMinor'
-  | 'GiftCardMajor'
-  | 'GiftCardMinor'
-  | 'GlobeMajor'
-  | 'GlobeMinor'
-  | 'GrammarMajor'
-  | 'HashtagMajor'
-  | 'HashtagMinor'
-  | 'HeaderMajor'
-  | 'HeartMajor'
-  | 'HideKeyboardMajor'
-  | 'HideMinor'
-  | 'HintMajor'
-  | 'HomeFilledMinor'
-  | 'HomeMajor'
-  | 'HomeMinor'
-  | 'HorizontalDotsMinor'
-  | 'IconNameSet'
-  | 'IconsFilledMajor'
-  | 'IconsMajor'
-  | 'IdentityCardFilledMajor'
-  | 'IdentityCardMajor'
-  | 'IllustrationMajor'
-  | 'ImageAltMajor'
-  | 'ImageAltMinor'
-  | 'ImageMajor'
-  | 'ImageWithTextMajor'
-  | 'ImageWithTextOverlayMajor'
-  | 'ImagesMajor'
-  | 'ImportMinor'
-  | 'ImportStoreMajor'
-  | 'InactiveLocationMajor'
-  | 'InactiveLocationMinor'
-  | 'IncomingMajor'
-  | 'IndentMajor'
-  | 'IndentMinor'
-  | 'InfoMinor'
-  | 'InsertDynamicSourceMajor'
-  | 'InsertDynamicSourceMinor'
-  | 'InstallMinor'
-  | 'InventoryFilledMajor'
-  | 'InventoryMajor'
-  | 'InviteMinor'
-  | 'IqMajor'
-  | 'ItalicMajor'
-  | 'ItalicMinor'
-  | 'JobsFilledMajor'
-  | 'JobsMajor'
-  | 'KeyMajor'
-  | 'KeyboardMajor'
-  | 'KeyboardMinor'
-  | 'LabelPrinterMajor'
-  | 'LandingPageMajor'
-  | 'LanguageFilledMinor'
-  | 'LanguageMinor'
-  | 'LastClickModelMinor'
-  | 'LastNonDirectClickModelMinor'
-  | 'LegalFilledMajor'
-  | 'LegalMajor'
-  | 'LinearModelMinor'
-  | 'LinkMinor'
-  | 'ListFilledMajor'
-  | 'ListMajor'
-  | 'ListMinor'
-  | 'LiveViewFilledMajor'
-  | 'LiveViewMajor'
-  | 'LocationFilledMajor'
-  | 'LocationMajor'
-  | 'LocationsMinor'
-  | 'LockFilledMajor'
-  | 'LockMajor'
-  | 'LockMinor'
-  | 'LogOutMinor'
-  | 'LogoBlockMajor'
-  | 'MagicMajor'
-  | 'MagicMinor'
-  | 'ManagedStoreMajor'
-  | 'MarkFulfilledMinor'
-  | 'MarkPaidMinor'
-  | 'MarketingFilledMinor'
-  | 'MarketingMajor'
-  | 'MarketingMinor'
-  | 'MarketsFilledMajor'
-  | 'MarketsMajor'
-  | 'MaximizeMajor'
-  | 'MaximizeMinor'
-  | 'MeasurementMinor'
-  | 'MentionMajor'
-  | 'MergeMinor'
-  | 'MetafieldsFilledMinor'
-  | 'MetafieldsMajor'
-  | 'MetafieldsMinor'
-  | 'MetaobjectMinor'
-  | 'MetaobjectReferenceMinor'
-  | 'MicrophoneMajor'
-  | 'MinimizeMajor'
-  | 'MinimizeMinor'
-  | 'MinusMajor'
-  | 'MinusMinor'
-  | 'MobileAcceptMajor'
-  | 'MobileBackArrowMajor'
-  | 'MobileCancelMajor'
-  | 'MobileChevronMajor'
-  | 'MobileHamburgerMajor'
-  | 'MobileHorizontalDotsMajor'
-  | 'MobileMajor'
-  | 'MobilePlusMajor'
-  | 'MobileVerticalDotsMajor'
-  | 'MonerisMajor'
-  | 'MoneyFilledMinor'
-  | 'MoneyMinor'
-  | 'NatureMajor'
-  | 'NavigationMajor'
-  | 'NoteMajor'
-  | 'NoteMinor'
-  | 'NotificationFilledMajor'
-  | 'NotificationMajor'
-  | 'OnlineStoreMajor'
-  | 'OnlineStoreMinor'
-  | 'OrderStatusMinor'
-  | 'OrderedListMajor'
-  | 'OrderedListMinor'
-  | 'OrdersFilledMinor'
-  | 'OrdersMajor'
-  | 'OrdersMinor'
-  | 'OrganizationMajor'
-  | 'OutdentMajor'
-  | 'OutdentMinor'
-  | 'OutgoingMajor'
-  | 'PackageFilledMajor'
-  | 'PackageMajor'
-  | 'PageDownMajor'
-  | 'PageMajor'
-  | 'PageMinusMajor'
-  | 'PagePlusMajor'
-  | 'PageReferenceMinor'
-  | 'PageUpMajor'
-  | 'PaginationEndMinor'
-  | 'PaginationStartMinor'
-  | 'PaintBrushMajor'
-  | 'PaperCheckMajor'
-  | 'PaperCheckMinor'
-  | 'PasskeyFilledMinor'
-  | 'PasskeyMajor'
-  | 'PasskeyMinor'
-  | 'PauseCircleMajor'
-  | 'PauseMajor'
-  | 'PauseMinor'
-  | 'PaymentsFilledMajor'
-  | 'PaymentsMajor'
-  | 'PersonalizedTextMajor'
-  | 'PhoneInMajor'
-  | 'PhoneMajor'
-  | 'PhoneOutMajor'
-  | 'PinMajor'
-  | 'PinMinor'
-  | 'PinUnfilledMajor'
-  | 'PinUnfilledMinor'
-  | 'PlanFilledMinor'
-  | 'PlanMajor'
-  | 'PlanMinor'
-  | 'PlayCircleMajor'
-  | 'PlayMajor'
-  | 'PlayMinor'
-  | 'PlusMinor'
-  | 'PointOfSaleMajor'
-  | 'PopularMajor'
-  | 'PositionBasedModelMinor'
-  | 'PriceLookupMinor'
-  | 'PrintMajor'
-  | 'PrintMinor'
-  | 'ProductCostMajor'
-  | 'ProductReferenceMinor'
-  | 'ProductReturnsMinor'
-  | 'ProductsFilledMinor'
-  | 'ProductsMajor'
-  | 'ProductsMinor'
-  | 'ProfileMajor'
-  | 'ProfileMinor'
-  | 'PromoteFilledMinor'
-  | 'PromoteMinor'
-  | 'QuestionMarkInverseMajor'
-  | 'QuestionMarkInverseMinor'
-  | 'QuestionMarkMajor'
-  | 'QuestionMarkMinor'
-  | 'QuickSaleMajor'
-  | 'ReadTimeMinor'
-  | 'ReceiptMajor'
-  | 'RecentSearchesMajor'
-  | 'RedoMajor'
-  | 'ReferralCodeMajor'
-  | 'ReferralMajor'
-  | 'RefreshMajor'
-  | 'RefreshMinor'
-  | 'RefundMajor'
-  | 'RefundMinor'
-  | 'RemoveProductMajor'
-  | 'RepeatOrderMajor'
-  | 'ReplaceMajor'
-  | 'ReplayMinor'
-  | 'ReportFilledMinor'
-  | 'ReportMinor'
-  | 'ReportsMajor'
-  | 'ResetMinor'
-  | 'ResourcesMajor'
-  | 'ReturnMinor'
-  | 'ReturnsMajor'
-  | 'RichTextMinor'
-  | 'RiskMajor'
-  | 'RiskMinor'
-  | 'Rows2Major'
-  | 'SandboxMajor'
-  | 'SaveMinor'
-  | 'SearchMajor'
-  | 'SearchMinor'
-  | 'SectionMajor'
-  | 'SecureMajor'
-  | 'SelectMinor'
-  | 'SendMajor'
-  | 'SettingsFilledMinor'
-  | 'SettingsMajor'
-  | 'SettingsMinor'
-  | 'ShareIosMinor'
-  | 'ShareMinor'
-  | 'ShipmentFilledMajor'
-  | 'ShipmentMajor'
-  | 'ShopcodesMajor'
-  | 'SidebarLeftMajor'
-  | 'SidebarRightMajor'
-  | 'SimplifyMajor'
-  | 'SimplifyMinor'
-  | 'SlideshowMajor'
-  | 'SmileyHappyMajor'
-  | 'SmileyJoyMajor'
-  | 'SmileyNeutralMajor'
-  | 'SmileySadMajor'
-  | 'SocialAdMajor'
-  | 'SocialPostMajor'
-  | 'SoftPackMajor'
-  | 'SortAscendingMajor'
-  | 'SortDescendingMajor'
-  | 'SortMinor'
-  | 'SoundMajor'
-  | 'StarFilledMinor'
-  | 'StarOutlineMinor'
-  | 'StatusActiveMajor'
-  | 'StopMajor'
-  | 'StoreDetailsFilledMinor'
-  | 'StoreDetailsMinor'
-  | 'StoreFilledMinor'
-  | 'StoreMajor'
-  | 'StoreMinor'
-  | 'StoreStatusMajor'
-  | 'TabletMajor'
-  | 'TapChipMajor'
-  | 'TaxFilledMajor'
-  | 'TaxMajor'
-  | 'TeamMajor'
-  | 'TemplateMajor'
-  | 'TemplateMinor'
-  | 'TextAlignmentCenterMajor'
-  | 'TextAlignmentLeftMajor'
-  | 'TextAlignmentRightMajor'
-  | 'TextBlockMajor'
-  | 'TextColorMajor'
-  | 'TextColorMinor'
-  | 'TextMajor'
-  | 'ThemeEditMajor'
-  | 'ThemeStoreMajor'
-  | 'ThemesMajor'
-  | 'ThumbsDownMajor'
-  | 'ThumbsDownMinor'
-  | 'ThumbsUpMajor'
-  | 'ThumbsUpMinor'
-  | 'TickMinor'
-  | 'TickSmallMinor'
-  | 'TimeDecayModelMinor'
-  | 'TimelineAttachmentMajor'
-  | 'TipsMajor'
-  | 'TitleMinor'
-  | 'ToggleMinor'
-  | 'ToolsMajor'
-  | 'TransactionFeeDollarMajor'
-  | 'TransactionFeeEuroMajor'
-  | 'TransactionFeePoundMajor'
-  | 'TransactionFeeRupeeMajor'
-  | 'TransactionFeeYenMajor'
-  | 'TransactionMajor'
-  | 'TransferFilledMajor'
-  | 'TransferInMajor'
-  | 'TransferMajor'
-  | 'TransferOutMajor'
-  | 'TransferWithinShopifyMajor'
-  | 'TransportMajor'
-  | 'TroubleshootMajor'
-  | 'TypeMajor'
-  | 'TypeMinor'
-  | 'UnderlineMajor'
-  | 'UnderlineMinor'
-  | 'UndoMajor'
-  | 'UnfulfilledMajor'
-  | 'UnknownDeviceMajor'
-  | 'UpdateInventoryMajor'
-  | 'UploadMajor'
-  | 'VariantMajor'
-  | 'ViewMajor'
-  | 'ViewMinor'
-  | 'ViewportNarrowMajor'
-  | 'ViewportShortMajor'
-  | 'ViewportTallMajor'
-  | 'ViewportWideMajor'
-  | 'VocabularyMajor'
-  | 'VolumeMinor'
-  | 'WandMajor'
-  | 'WandMinor'
-  | 'WearableMajor'
-  | 'WeightMinor'
-  | 'WholesaleMajor'
-  | 'WifiMajor';
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/README.md b/packages/ui-extensions/src/surfaces/admin/components/Icon/README.md
deleted file mode 100644
index 4b3ae69436..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Icon/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Icon
-
-The Icon component is used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help users more easily understand where they are in the product, and common interaction patterns that are available.
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/examples/basic-icon.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Icon/examples/basic-icon.example.ts
deleted file mode 100644
index fd6ef09f2a..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Icon/examples/basic-icon.example.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {extend, Icon} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const icon = root.createComponent(Icon, {name: 'AppsMajor'});
-
-  root.appendChild(icon);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts
deleted file mode 100644
index 825ad9f1b4..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Image',
-  description: 'Use this when you want to display an image.',
-  requires: '',
-  thumbnail: 'image-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'ImageProps',
-      description: '',
-      type: 'ImageProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Media',
-  defaultExample: {
-    image: 'image-default.png',
-    codeblock: {
-      title: 'Simple Image example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-image.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'Icon',
-      url: '/docs/api/admin-extensions/components/media/icon',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts b/packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts
deleted file mode 100644
index 31423f39b4..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Image/Image.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import type {AccessibilityRole} from '../shared';
-
-export type ImageProps = (ImageAccessibilityLabelProp | ImageAltProp) &
-  (ImageSourceProp | ImageSrcProp) &
-  ImageBaseProps;
-
-interface ImageBaseProps {
-  /**
-   * Sets the semantic meaning of the component’s content. When set,
-   * the role will be used by assistive technologies to help users
-   * navigate the page.
-   */
-  accessibilityRole?: Extract<AccessibilityRole, 'decorative'>;
-
-  /**
-   * Defines a unique identifier which must be unique in the whole document.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-   */
-  id?: string;
-
-  /**
-   * Determines the loading behavior of the image:
-   * - `eager`: Immediately loads the image, irrespective of its position within the visible viewport.
-   * - `lazy`: Delays loading the image until it approaches a specified distance from the viewport.
-   *
-   * @defaultValue `eager`
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
-   */
-  loading?: 'eager' | 'lazy';
-
-  /**
-   * Invoked when load completes successfully.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
-   */
-  onLoad?(): void;
-
-  /**
-   * Invoked on load error.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
-   */
-  onError?(): void;
-}
-
-interface ImageAccessibilityLabelProp {
-  /**
-   * An alternative text description that describe the image for the reader to
-   * understand what it is about. It is extremely useful for both users using
-   * assistive technology and sighted users. A well written `description`
-   * provides people with visual impairments the ability to participate in
-   * consuming non-text content. When a screen readers encounters an `Image`,
-   * the description is read and announced aloud. If an image fails to load,
-   * potentially due to a poor connection, the `description` is displayed on
-   * screen instead. This has the benefit of letting a sighted user know an
-   * image was meant to load here, but as an alternative, they’re still able to
-   * consume the text content. Read
-   * [considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204)
-   * to learn more.
-   *
-   * An `alt` property is available as an alias for this for compatibility with the HTML
-   * specification. When both are specified, `accessibilityLabel` takes precedence.
-   *
-   * @defaultValue `''`
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt
-   */
-  accessibilityLabel: string;
-  alt?: never;
-}
-
-interface ImageAltProp {
-  /**
-   * An alternative text description that describe the image for the reader to
-   * understand what it is about. It is extremely useful for both users using
-   * assistive technology and sighted users. A well written `description`
-   * provides people with visual impairments the ability to participate in
-   * consuming non-text content. When a screen readers encounters an `Image`,
-   * the description is read and announced aloud. If an image fails to load,
-   * potentially due to a poor connection, the `description` is displayed on
-   * screen instead. This has the benefit of letting a sighted user know an
-   * image was meant to load here, but as an alternative, they’re still able to
-   * consume the text content. Read
-   * [considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204)
-   * to learn more.
-   *
-   * This property is an alias for `accessibilityLabel` for compatibility with the HTML
-   * specification. When both are specified `accessibilityLabel` takes precedence.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt
-   */
-  alt: string;
-  accessibilityLabel?: never;
-}
-
-interface ImageSrcProp {
-  /**
-   * The image source (either a remote URL or a local file resource; blob URLs are not currently supported).
-   *
-   * This property is available as an alias for `source` for compatibility with the HTML
-   * specification. When both are specified, `source` takes precedence.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src
-   */
-  src: string;
-  source?: never;
-}
-
-interface ImageSourceProp {
-  /**
-   * The image source (either a remote URL or a local file resource; blob URLs are not currently supported).
-   *
-   * A `src` property is available as an alias for this for compatibility with the HTML
-   * specification. When both are specified, `source` takes precedence.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src
-   */
-  source: string;
-  src?: never;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Image/README.md b/packages/ui-extensions/src/surfaces/admin/components/Image/README.md
deleted file mode 100644
index dc575e89c6..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Image/README.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Image
-
-The Image component is used to embed an image into the document and control its presentation. It should be used for large format, responsive images.
-
-## Examples
-
-### Basic usage
-
-```tsx
-export function MyComponent() {
-  return (
-    <Image
-      // or accessibilityLabel
-      alt="A red shirt"
-      // or source
-      src="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg"
-    />
-  );
-}
-```
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Image/examples/basic-image.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Image/examples/basic-image.example.ts
deleted file mode 100644
index ce0aadba07..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Image/examples/basic-image.example.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {extend, Image} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const image = root.createComponent(Image, {
-    alt: 'Pickaxe',
-    source: 'https://shopify.dev/assets/icons/64/pickaxe-1.png',
-  });
-
-  root.appendChild(image);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.doc.ts
deleted file mode 100644
index 5f1bb76694..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.doc.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'InlineStack',
-  description:
-    "Use this to organize layout elements along the horizontal axis of the page. It's great for horizontal alignment.",
-  requires: '',
-  thumbnail: 'inlinestack-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'InlineStackProps',
-      description: '',
-      type: 'InlineStackProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Structure',
-  defaultExample: {
-    image: 'inlinestack-default.png',
-    codeblock: {
-      title: 'Laying out elements in a row',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-inlinestack.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [
-    {
-      type: 'component',
-      name: 'BlockStack',
-      url: '/docs/api/admin-extensions/components/structure/BlockStack',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts b/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts
deleted file mode 100644
index 49801cf83c..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/InlineStack.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-  AccessibilityRoleProps,
-  GlobalProps,
-  SizingProps,
-  PaddingProps,
-  GapProps,
-  CrossAxisAlignment,
-  MainAxisAlignment,
-  AccessibilityLabelProps,
-} from '../shared';
-
-export interface InlineStackProps
-  extends AccessibilityRoleProps,
-    AccessibilityLabelProps,
-    GapProps,
-    GlobalProps,
-    SizingProps,
-    PaddingProps {
-  /**
-   * Position children along the main axis
-   *
-   * @defaultValue 'start'
-   */
-  inlineAlignment?: MainAxisAlignment;
-
-  /**
-   * Position children along the cross axis
-   *
-   * @defaultValue 'start'
-   */
-  blockAlignment?: CrossAxisAlignment;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.ts b/packages/ui-extensions/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.ts
deleted file mode 100644
index 5d719d8f0d..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {extension, InlineStack} from '@shopify/ui-extensions/admin';
-
-export default extension('Playground', (root) => {
-  const inlineStack = root.createComponent(
-    InlineStack,
-    {
-      gap: true,
-    },
-    [
-      root.createText('Child 1'),
-      root.createText('Child 2'),
-      root.createText('Child 3'),
-      root.createText('Child 4'),
-    ],
-  );
-
-  root.appendChild(inlineStack);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts b/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
deleted file mode 100644
index 66297d13f8..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export type CustomerSegmentTemplateIcon =
-  | 'categoriesMajor'
-  | 'firstVisitMajor'
-  | 'heartMajor'
-  | 'marketingMajor'
-  | 'checkoutMajor'
-  | 'ordersMajor'
-  | 'locationMajor'
-  | 'emailNewsletterMajor'
-  | 'firstOrderMajor'
-  | 'billingStatementDollarMajor'
-  | 'diamondAlertMajor'
-  | 'abandonedCartMajor'
-  | 'calendarMajor'
-  | 'productsMajor'
-  | 'globeMajor'
-  | 'flagMajor'
-  | 'uploadMajor'
-  | 'buyButtonMajor'
-  | 'followUpEmailMajor'
-  | 'confettiMajor'
-  | 'walletMajor'
-  | 'viewMajor';
-
-export type CustomerSegmentTemplateCategory =
-  | 'firstTimeBuyers'
-  | 'highValueCustomers'
-  | 'reEngageCustomers'
-  | 'abandonedCheckout'
-  | 'purchaseBehaviour'
-  | 'location';
-
-/**
- * Reserved namespace and key for the customer standard metafield used in the template's query.
- * More info - https://shopify.dev/docs/apps/custom-data/metafields/definitions/standard
- */
-type CustomerStandardMetafieldDependency = 'facts.birth_date';
-
-export interface InternalCustomerSegmentTemplateProps {
-  /* Localized title of the template. */
-  title: string;
-  /* Localized description(s) of the template. */
-  description: string | string[];
-  /* Icon identifier for the template. */
-  icon: CustomerSegmentTemplateIcon;
-  /* Code snippet to render in the template with syntax highlighting. */
-  query: string;
-  /* Code snippet to insert in the segment editor. If missing, `query` will be used. */
-  queryToInsert?: string;
-  /* List of customer standard metafields or custom metafields used in the template's query. */
-  dependencies?: {
-    standardMetafields?: CustomerStandardMetafieldDependency[];
-    customMetafields?: string[];
-  };
-  /* ISO 8601-encoded date and time string. A "New" badge will be rendered for recently introduced templates. */
-  createdOn?: string;
-  /* The category in which the template will be visible. The template will show in its respective category and aggregate sections. */
-  category: CustomerSegmentTemplateCategory;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/internalcustomersegmenttemplate.example.ts b/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/internalcustomersegmenttemplate.example.ts
deleted file mode 100644
index bc264120d4..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/internalcustomersegmenttemplate.example.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
-  extension,
-  InternalCustomerSegmentTemplate,
-} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'admin.customers.segmentation-templates.render',
-  (root, {i18n, __enabledFeatures}) => {
-    const b2bEnabled =
-      __enabledFeatures.includes('b2bEnabled');
-    const companiesTemplate = root.createComponent(
-      InternalCustomerSegmentTemplate,
-      {
-        title: i18n.translate('companies.title'),
-        description: i18n.translate('companies.description'),
-        icon: 'buyButtonMajor',
-        query: 'companies IS NOT NULL',
-        dateAdded: new Date('2023-01-15').toISOString(),
-        category: 'reEngageCustomers',
-      },
-    );
-
-    const locationTemplate = root.createComponent(
-      InternalCustomerSegmentTemplate,
-      {
-        title: i18n.translate('location.title'),
-        description: [
-          i18n.translate('location.firstParagraph'),
-          i18n.translate('location.secondParagraph'),
-        ],
-        icon: 'locationMajor',
-        query: "customer_cities CONTAINS 'US-NY-NewYorkCity'",
-        category: 'location',
-      },
-    );
-
-    if (b2bEnabled) {
-      root.appendChild(companiesTemplate);
-    }
-
-    root.appendChild(locationTemplate);
-
-    root.mount();
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts b/packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
deleted file mode 100644
index e01cf7c44a..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-export interface Location {
-  /**
-   * A unique identifier for the location.
-   */
-  id: string;
-
-  /**
-   * The name of the location.
-   */
-  name: string;
-}
-
-export interface LocationGroup {
-  /**
-   * An array of locations within the group.
-   */
-  locations: Location[];
-
-  /**
-   * The label for the location group.
-   */
-  label: string;
-
-  /**
-   * A unique identifier for the location group.
-   */
-  id: string;
-}
-
-export interface InternalLocationListProps {
-  /**
-   * An array of location groups.
-   */
-  locationGroups: LocationGroup[];
-
-  /**
-   * Callback when a location group is moved.
-   * It receives the old index and the new index as parameters.
-   */
-  onMoveGroup: (oldIndex: number, newIndex: number) => void;
-
-  /**
-   * Callback when a location group is renamed.
-   * It receives the id of the group and the new name as parameters.
-   */
-  onRenameGroup: (id: string, name: string) => void;
-
-  /**
-   * Callback when a location group is deleted.
-   * It receives the id of the group as a parameter.
-   */
-  onDeleteGroup: (id: string) => void;
-
-  /**
-   * Callback when a tag is moved from one group to another.
-   * It receives the id of the tag, the old group index, and the new group index as parameters.
-   */
-  onMoveTag: (
-    tagId: number,
-    oldGroupIndex: number,
-    newGroupIndex: number,
-  ) => void;
-
-  /**
-   * Callback when a new group is created.
-   * It receives the id of the new group as a parameter.
-   */
-  onCreateGroup: (id: string) => void;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts
deleted file mode 100644
index d79d4723f9..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Link',
-  description:
-    'This is an interactive component that directs users to a specified URL. It even supports custom protocols.',
-  requires: '',
-  thumbnail: 'link-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'LinkProps',
-      description: '',
-      type: 'LinkProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Actions',
-  defaultExample: {
-    image: 'link-default.png',
-    codeblock: {
-      title: 'Link to an app page',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/app-link.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  examples: {
-    description: '',
-    examples: [
-      {
-        description: 'Link to an external URL',
-        image: 'external-link.png',
-        codeblock: {
-          tabs: [
-            {
-              title: 'React',
-              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx',
-              language: 'typescript',
-            },
-            {
-              title: 'JS',
-              code: './examples/external-link.example.ts',
-              language: 'typescript',
-            },
-          ],
-          title: 'External Link',
-        },
-      },
-      {
-        description: 'Link to a relative URL',
-        image: 'relative-link.png',
-        codeblock: {
-          tabs: [
-            {
-              title: 'React',
-              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx',
-              language: 'typescript',
-            },
-            {
-              title: 'JS',
-              code: './examples/relative-link.example.ts',
-              language: 'typescript',
-            },
-          ],
-          title: 'Relative Link',
-        },
-      },
-      {
-        description: 'Link to a Shopify admin page',
-        image: 'shopify-section-link.png',
-        codeblock: {
-          tabs: [
-            {
-              title: 'React',
-              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx',
-              language: 'typescript',
-            },
-            {
-              title: 'JS',
-              code: './examples/shopify-section-link.example.ts',
-              language: 'typescript',
-            },
-          ],
-          title: 'Shopify Section Link',
-        },
-      },
-    ],
-  },
-  related: [
-    {
-      type: 'component',
-      name: 'Button',
-      url: '/docs/api/admin-extensions/components/actions/button',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts
deleted file mode 100644
index 3a33f8fa0c..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import {AccessibilityLabelProps} from '../shared';
-
-export interface LinkProps extends AccessibilityLabelProps {
-  /**
-   * A unique identifier for the link.
-   */
-  id?: string;
-
-  /**
-   * The URL to link to.
-   * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
-   */
-  href?: string;
-
-  /**
-   * Alias for `href`
-   * If set, it will navigate to the location specified by `to` after executing the `onClick` callback.
-   */
-  to?: string;
-
-  /**
-   * Sets the link color.
-   *
-   * - `inherit` will take the color value from its parent,
-   * giving the link a monochrome appearance. In some cases,
-   * its important to pair this property with another stylistic treatment,
-   * like an underline, to differentiate the link from a normal text.
-   */
-  tone?: 'default' | 'inherit' | 'critical';
-
-  /**
-   * Callback when a link is pressed. If `href` is set,
-   * it will execute the callback and then navigate to the location specified by `href`.
-   */
-  onClick?(): void;
-
-  /**
-   * Alias for `onClick`
-   * Callback when a link is pressed. If `href` is set,
-   * it will execute the callback and then navigate to the location specified by `href`.
-   */
-  onPress?(): void;
-
-  /**
-   * Indicate the text language. Useful when the text is in a different language than the rest of the page.
-   * It will allow assistive technologies such as screen readers to invoke the correct pronunciation.
-   * [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)
-   */
-  language?: string;
-
-  /**
-   * Alias for `language`
-   */
-  lang?: string;
-  /**
-   * Specifies where to display the linked URL
-   * @default '_self'
-   */
-  target?: '_blank' | '_self';
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/README.md b/packages/ui-extensions/src/surfaces/admin/components/Link/README.md
deleted file mode 100644
index aa4f0653af..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Link/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Link
-
-Link makes text interactive so users can perform an action, such as navigating to another location.
-
-## Expected HTML in Web host
-
-When `href` is set the expected HTML element is an anchor element
-`<a href="#">View email settings</a>`
-
-When `onPress` or `onClick` are set, the expected HTML element is a button element
-`<button type="button">Edit</button>`
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/app-link.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/app-link.example.ts
deleted file mode 100644
index 58b9f2dad6..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/app-link.example.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-  extension,
-  Link,
-} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'Playground',
-  (root) => {
-    const link = root.createComponent(
-      Link,
-      {href: 'app://baz'},
-      'Link to app path',
-    );
-
-    root.appendChild(link);
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-link.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-link.example.ts
deleted file mode 100644
index c1d371c3d1..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-link.example.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-  extension,
-  Link,
-} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'Playground',
-  (root) => {
-    const link = root.createComponent(
-      Link,
-      {href: 'https://www.shopify.ca/climate/sustainability-fund'},
-      'Sustainability fund',
-    );
-
-    root.appendChild(link);
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/relative-link.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/relative-link.example.ts
deleted file mode 100644
index 00add09f6f..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/relative-link.example.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-  extension,
-  Link,
-} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'Playground',
-  (root) => {
-    const link = root.createComponent(
-      Link,
-      {href: '/baz'},
-      'Link relative to current path',
-    );
-
-    root.appendChild(link);
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/shopify-section-link.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/shopify-section-link.example.ts
deleted file mode 100644
index ce1fba5bd3..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/shopify-section-link.example.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-  extension,
-  Link,
-} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'Playground',
-  (root) => {
-    const link = root.createComponent(
-      Link,
-      {href: 'shopify://admin/orders'},
-      "Shop's orders",
-    );
-
-    root.appendChild(link);
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts
deleted file mode 100644
index 2b43f070bc..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'MoneyField',
-  description:
-    'This is the right component for letting users enter Money digits.',
-  requires: '',
-  thumbnail: 'moneyfield-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'MoneyFieldProps',
-      description: '',
-      type: 'MoneyFieldProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'moneyfield-default.png',
-    codeblock: {
-      title: 'Simple MoneyField example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-moneyfield.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [
-    {
-      type: 'component',
-      name: 'NumberField',
-      url: '/docs/api/admin-extensions/components/forms/numberfield',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts
deleted file mode 100644
index f208b09c1c..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.ts
+++ /dev/null
@@ -1,187 +0,0 @@
-import type {
-  AutocompleteProps,
-  AnyAutocompleteField,
-  InputProps,
-  NumberConstraintsProps,
-  Money,
-} from '../shared';
-
-export interface MoneyFieldProps
-  extends InputProps<number | Money>,
-    NumberConstraintsProps,
-    AutocompleteProps<MoneyAutocompleteField> {
-  currencyCode?: CurrencyCode;
-}
-
-export type MoneyAutocompleteField = Extract<
-  AnyAutocompleteField,
-  'transaction-amount'
->;
-
-/**
- * Supported monetary currencies from ISO 4217.
- *
- * @see https://www.iso.org/iso-4217-currency-codes.html
- */
-export type CurrencyCode =
-  | 'USD'
-  | 'EUR'
-  | 'GBP'
-  | 'CAD'
-  | 'AFN'
-  | 'ALL'
-  | 'DZD'
-  | 'AOA'
-  | 'ARS'
-  | 'AMD'
-  | 'AWG'
-  | 'AUD'
-  | 'BBD'
-  | 'AZN'
-  | 'BDT'
-  | 'BSD'
-  | 'BHD'
-  | 'BIF'
-  | 'BZD'
-  | 'BMD'
-  | 'BTN'
-  | 'BAM'
-  | 'BRL'
-  | 'BOB'
-  | 'BWP'
-  | 'BND'
-  | 'BGN'
-  | 'MMK'
-  | 'KHR'
-  | 'CVE'
-  | 'KYD'
-  | 'XAF'
-  | 'CLP'
-  | 'CNY'
-  | 'COP'
-  | 'KMF'
-  | 'CDF'
-  | 'CRC'
-  | 'HRK'
-  | 'CZK'
-  | 'DKK'
-  | 'DOP'
-  | 'XCD'
-  | 'EGP'
-  | 'ETB'
-  | 'XPF'
-  | 'FJD'
-  | 'GMD'
-  | 'GHS'
-  | 'GTQ'
-  | 'GYD'
-  | 'GEL'
-  | 'HTG'
-  | 'HNL'
-  | 'HKD'
-  | 'HUF'
-  | 'ISK'
-  | 'INR'
-  | 'IDR'
-  | 'ILS'
-  | 'IQD'
-  | 'JMD'
-  | 'JPY'
-  | 'JEP'
-  | 'JOD'
-  | 'KZT'
-  | 'KES'
-  | 'KWD'
-  | 'KGS'
-  | 'LAK'
-  | 'LVL'
-  | 'LBP'
-  | 'LSL'
-  | 'LRD'
-  | 'LTL'
-  | 'MGA'
-  | 'MKD'
-  | 'MOP'
-  | 'MWK'
-  | 'MVR'
-  | 'MXN'
-  | 'MYR'
-  | 'MUR'
-  | 'MDL'
-  | 'MAD'
-  | 'MNT'
-  | 'MZN'
-  | 'NAD'
-  | 'NPR'
-  | 'ANG'
-  | 'NZD'
-  | 'NIO'
-  | 'NGN'
-  | 'NOK'
-  | 'OMR'
-  | 'PAB'
-  | 'PKR'
-  | 'PGK'
-  | 'PYG'
-  | 'PEN'
-  | 'PHP'
-  | 'PLN'
-  | 'QAR'
-  | 'RON'
-  | 'RUB'
-  | 'RWF'
-  | 'WST'
-  | 'SAR'
-  | 'RSD'
-  | 'SCR'
-  | 'SGD'
-  | 'SDG'
-  | 'SYP'
-  | 'ZAR'
-  | 'KRW'
-  | 'SSP'
-  | 'SBD'
-  | 'LKR'
-  | 'SRD'
-  | 'SZL'
-  | 'SEK'
-  | 'CHF'
-  | 'TWD'
-  | 'THB'
-  | 'TZS'
-  | 'TTD'
-  | 'TND'
-  | 'TRY'
-  | 'TMT'
-  | 'UGX'
-  | 'UAH'
-  | 'AED'
-  | 'UYU'
-  | 'UZS'
-  | 'VUV'
-  | 'VND'
-  | 'XOF'
-  | 'YER'
-  | 'ZMW'
-  | 'BYN'
-  | 'BYR'
-  | 'DJF'
-  | 'ERN'
-  | 'FKP'
-  | 'GIP'
-  | 'GNF'
-  | 'IRR'
-  | 'KID'
-  | 'LYD'
-  | 'MRU'
-  | 'SLL'
-  | 'SHP'
-  | 'SOS'
-  | 'STD'
-  | 'STN'
-  | 'TJS'
-  | 'TOP'
-  | 'VED'
-  | 'VEF'
-  | 'VES'
-  | 'XXX';
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/README.md b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/README.md
deleted file mode 100644
index ea03969fc5..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# MoneyField
-
-Use a MoneyField to let the user enter a Money amount.
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.ts b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.ts
deleted file mode 100644
index be54d842ae..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {extend, MoneyFIeld} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const urlField = root.createComponent(MoneyFIeld, {
-    label: 'Enter amount',
-  });
-
-  root.appendChild(urlField);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.doc.ts
deleted file mode 100644
index 55152727d2..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.doc.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'NumberField',
-  description:
-    'This component is specifically designed for numeric data entry.',
-  requires: '',
-  thumbnail: 'numberfield-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'NumberFieldProps',
-      description: '',
-      type: 'NumberFieldProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'numberfield-default.png',
-    codeblock: {
-      title: 'Simple NumberField example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-numberfield.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: '/docs/api/admin-extensions/components/forms/textfield',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts b/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts
deleted file mode 100644
index d106a8c977..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-  AutocompleteProps,
-  AnyAutocompleteField,
-  AutocompleteFieldCreditCardAlias,
-  AutocompleteFieldSecurityCodeAlias,
-  InputProps,
-  NumberConstraintsProps,
-  FieldDecorationProps,
-} from '../shared';
-
-export interface NumberFieldProps
-  extends InputProps<number>,
-    NumberConstraintsProps,
-    AutocompleteProps<NumberAutocompleteField>,
-    FieldDecorationProps {
-  /**
-   * Sets the virtual keyboard.
-   *
-   * @defaultValue 'decimal'
-   */
-  inputMode?: 'decimal' | 'numeric';
-}
-
-export type NumberAutocompleteField = Extract<
-  AnyAutocompleteField,
-  | 'one-time-code'
-  | `${AutocompleteFieldCreditCardAlias}-number`
-  | `${AutocompleteFieldCreditCardAlias}-${AutocompleteFieldSecurityCodeAlias}`
->;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/NumberField/README.md b/packages/ui-extensions/src/surfaces/admin/components/NumberField/README.md
deleted file mode 100644
index b39336c965..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/NumberField/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# NumberField
-
-Use a NumberField to let the user enter a number. Only numerical values are accepted.
-
-## Expected HTML in Web host
-
-`<input type="number" inputmode="decimal" />`
diff --git a/packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.ts b/packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.ts
deleted file mode 100644
index 1cbceaacf8..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {extend, NumberField} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const discountField = root.createComponent(NumberField, {
-    label: 'Enter the discount amount',
-  });
-
-  root.appendChild(discountField);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts
deleted file mode 100644
index 55c96e9edc..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Paragraph',
-  description:
-    'Use this to display a block of text similar to the `<p>` tag in HTML.',
-  requires: '',
-  thumbnail: 'paragraph-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'ParagraphProps',
-      description: '',
-      type: 'ParagraphProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Titles and text',
-  defaultExample: {
-    image: 'paragraph-default.png',
-    codeblock: {
-      title: 'Simple Paragraph example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-paragraph.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'Heading',
-      url: '/docs/api/admin-extensions/components/titles-and-text/heading',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts
deleted file mode 100644
index 419f14d4a3..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type {BaseTypographyProps, GlobalProps} from '../shared';
-
-export interface ParagraphProps extends BaseTypographyProps, GlobalProps {
-  children?: any;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/README.md b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/README.md
deleted file mode 100644
index 58f1225db7..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Paragraph
-
-Use this to display a block of text similar to the <p> tag in HTML.
-
-## Expected HTML in Web host
-
-`<p>Hello, World!</p>`
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.ts
deleted file mode 100644
index 757de5782b..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {extend, Paragraph, BlockStack} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const paragraph = root.createComponent(BlockStack, {inlineAlignment: 'center', gap: true}, [
-    root.createComponent(Paragraph, {fontWeight: 'bold'}, 'Name:'),
-    root.createComponent(Paragraph, {}, 'Jane Doe'),
-  ]);
-
-  root.appendChild(paragraph);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts
deleted file mode 100644
index d7efaa2633..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'PasswordField',
-  description:
-    'This component is for secure input, it obfuscates any text that users enter.',
-  requires: '',
-  thumbnail: 'passwordfield-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'PasswordFieldProps',
-      description: '',
-      type: 'PasswordFieldProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'passwordfield-default.png',
-    codeblock: {
-      title: 'Simple PasswordField example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-passwordfield.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'EmailField',
-      url: '/docs/api/admin-extensions/components/forms/emailfield',
-    },
-    {
-      type: 'component',
-      name: 'TextField',
-      url: '/docs/api/admin-extensions/components/forms/textfield',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts
deleted file mode 100644
index 69b7748351..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {
-  AutocompleteProps,
-  AnyAutocompleteField,
-  InputProps,
-  MinMaxLengthProps,
-} from '../shared';
-
-export interface PasswordFieldProps
-  extends InputProps<string>,
-    MinMaxLengthProps,
-    AutocompleteProps<PasswordAutocompleteField> {}
-
-export type PasswordAutocompleteField = Extract<
-  AnyAutocompleteField,
-  'new-password' | 'current-password'
->;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/README.md b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/README.md
deleted file mode 100644
index d02cb52390..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# PasswordField
-
-Use a PasswordField to let the user enter a password.
-
-## Expected HTML in Web host
-
-`<input type="password" />`
diff --git a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.ts b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.ts
deleted file mode 100644
index 787e4e478a..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {extend, TextField, PasswordField, BlockStack} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const blockStack = root.createComponent(BlockStack, {}, [
-    root.createComponent(TextField, {
-      label: 'Username',
-    }),
-    root.createComponent(PasswordField, {
-      label: 'Password',
-    }),
-  ]);
-
-  root.appendChild(blockStack);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.doc.ts
deleted file mode 100644
index 3669cbd9b5..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.doc.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Pressable',
-  description:
-    'Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.',
-  requires: '',
-  thumbnail: 'pressable-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'PressableProps',
-      description: '',
-      type: 'PressableProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Actions',
-  defaultExample: {
-    image: 'pressable-default.png',
-    codeblock: {
-      title: 'Simple pressable example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-pressable.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'Button',
-      url: '/docs/api/admin-extensions/components/actions/button',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts b/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts
deleted file mode 100644
index 3e36467635..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Pressable/Pressable.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type {LinkProps} from '../Link/Link';
-import type {BoxProps} from '../Box/Box';
-
-export interface PressableProps extends BoxProps, LinkProps {}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.ts
deleted file mode 100644
index 8b6f67c8d5..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {
-  extension,
-  Icon,
-  InlineStack,
-  Pressable,
-  Text,
-} from '@shopify/ui-extensions/admin';
-
-extension('Playground', (root) => {
-  const pressable = root.createComponent(
-    Pressable,
-    {
-      padding: 'base',
-      onPress: () => console.log('onPress event'),
-    },
-    [
-      root.createComponent(InlineStack, {}, [
-        root.createComponent(Text, {}, 'Go to App Dashboard'),
-        root.createComponent(Icon, {name: 'AppsMajor'}),
-      ]),
-    ],
-  );
-
-  root.appendChild(pressable);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts
deleted file mode 100644
index 84305047a6..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'ProgressIndicator',
-  description:
-    'Use this component to notify merchants that their action is being processed or loaded.',
-  requires: '',
-  thumbnail: 'progressindicator-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'ProgressIndicatorProps',
-      description: '',
-      type: 'ProgressIndicatorProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Media',
-  defaultExample: {
-    image: 'progressindicator-default.png',
-    codeblock: {
-      title: 'Simple spinner example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-progressindicator.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'Button',
-      url: '/docs/api/admin-extensions/components/actions/button',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
deleted file mode 100644
index d4c25706a5..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {GlobalProps, SizeScale, AccessibilityLabelProps} from '../shared';
-
-export interface ProgressIndicatorProps
-  extends GlobalProps,
-    AccessibilityLabelProps {
-  /**
-   * The size of the component.
-   */
-  size: SizeScale;
-
-  /**
-   * Set the color of the progress indicator.
-   *
-   * - `inherit` will take the color value from its parent,
-   * giving the progress indicator a monochrome appearance.
-   *
-   * @defaultValue 'default'
-   */
-  tone?: 'inherit' | 'default';
-
-  /**
-   * Style of the progress indicator
-   * @default 'spinner'
-   */
-  variant?: 'spinner';
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.ts b/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.ts
deleted file mode 100644
index 1c5b343f39..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {
-  extension,
-  ProgressIndicator,
-} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'Playground',
-  (root) => {
-    const progressIndicator = root.createComponent(
-      ProgressIndicator,
-      {
-        size: 'small-200',
-      },
-    );
-
-    root.appendChild(progressIndicator);
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Section/README.md b/packages/ui-extensions/src/surfaces/admin/components/Section/README.md
deleted file mode 100644
index 78d64634e6..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Section/README.md
+++ /dev/null
@@ -1,95 +0,0 @@
-# Section
-
-`Section` is a structural component that allows thematic grouping of content. Its visual style is contextual and controlled by Shopify, so a `Section` may look different depending on the component it is nested inside.
-
-`Section` also automatically increases the heading level for its content to ensure a semantically correct heading structure in the document. To further increase the heading level inside the `Section`, consider nesting new `Section`s.
-
-## Expected HTML in Web host
-
-Note that the rendered heading level in the examples are assuming that the `Section` is nested within the root of the HTML document. The document itself is a "section", therefore its children `Heading` will be level 1. Sibling `Section`s will start their heading level at 2.
-
-<table>
-<tr>
-<th width="50%">React</th>
-<th width="50%">Expected HTML</th>
-</tr>
-<tr>
-<td valign="top">
-
-```jsx
-<Section heading="Provinces of Canada" />
-```
-
-</td>
-<td valign="top">
-
-```html
-<section>
-  <h2>Provinces of Canada</h2>
-</section>
-```
-
-</td>
-</tr>
-
-<tr>
-<td valign="top">
-
-```jsx
-<Section>
-  <Heading>Provinces of Canada</Heading>
-</Section>
-```
-
-</td>
-<td valign="top">
-
-```html
-<section>
-  <h2>Provinces of Canada</h2>
-</section>
-```
-
-</td>
-</tr>
-
-<tr>
-<td valign="top">
-
-```jsx
-<Section heading="Some provinces of Canada">
-    <Section>
-        <Heading>Quebec</Heading>
-        <Text>Most of its residents are in eastern time.<Text>
-
-        <Heading>Ontario</Heading>
-        <Text>Most of its residents are in eastern time.</Text>
-
-        <Heading>British Columbia</Heading>
-        <Text>Most of its residents are in pacific time.</Text>
-    </Section>
-</Section>
-```
-
-</td>
-<td valign="top">
-
-```html
-<section>
-    <h2>Some provinces of Canada</h2>
-    <section>
-        <h3>Quebec</h3>
-        <span>Most of its residents are in eastern time.<span>
-
-        <h3>Ontario</h3>
-        <span>Most of its residents are in eastern time.</span>
-
-        <h3>British Columbia</h3>
-        <span>Most of its residents are in pacific time.</span>
-    </section>
-</section>
-```
-
-</td>
-</tr>
-</table>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts
deleted file mode 100644
index 7f14d0a68a..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Section',
-  description:
-    '`Section` is a structural component that allows thematic grouping of content. Its visual style is contextual and controlled by Shopify, so a `Section` may look different depending on the component it is nested inside.\n\n`Section` also automatically increases the heading level for its content to ensure a semantically correct heading structure in the document. To further increase the heading level inside the `Section`, consider nesting new `Section`s.',
-  requires: '',
-  thumbnail: 'section-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'SectionProps',
-      description: '',
-      type: 'SectionProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Structure',
-  defaultExample: {
-    image: 'section-default.png',
-    codeblock: {
-      title: 'Section to an app page',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-Section.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts b/packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts
deleted file mode 100644
index c0151b7a88..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Section/Section.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export interface SectionProps {
-  /**
-   * A label used to describe the section that will be announced by assistive technologies.
-   *
-   * When no `heading` property is provided or included as a children of the Section, you **must** provide an
-   * `accessibilityLabel` to describe the Section. This is important as it allows assistive technologies to provide
-   * the right context to users.
-   */
-  accessibilityLabel?: string;
-
-  /**
-   * A title that describes the content of the section.
-   */
-  heading?: string;
-
-  /**
-   * Adjust the padding of all edges.
-   *
-   * `base`: applies padding that is appropriate for the element. Note that it may result in no padding if Shopify
-   * believes this is the right design decision in a particular context.
-   *
-   * `none`: removes all padding from the element. This can be useful when elements inside the Section need to span
-   * to the edge of the Section. For example, a full-width image. In this case, rely on `Box` or any other layout
-   * element to bring back the desired padding for the rest of the content.
-   *
-   * @default: "base"
-   */
-  padding?: 'base' | 'none';
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Section/examples/basic-Section.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Section/examples/basic-Section.example.ts
deleted file mode 100644
index 199f00ef82..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Section/examples/basic-Section.example.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
-  extend,
-  Section,
-} from '@shopify/ui-extensions/admin';
-
-export default extend(
-  'Playground',
-  (root) => {
-    const section = root.createComponent(
-      Section,
-      {
-        heading: 'Section heading',
-      },
-      'Section content'
-    );
-
-    root.appendChild(section);
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Select/README.md b/packages/ui-extensions/src/surfaces/admin/components/Select/README.md
deleted file mode 100644
index c7f060e000..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Select/README.md
+++ /dev/null
@@ -1,99 +0,0 @@
-# Select, Option and OptionGroup
-
-Selects let users choose one option from an options menu. Consider select
-when you have 4 or more options, to avoid cluttering the interface.
-
-## Notes
-
-`<OptGroup>` can be used as an alias to `<OptionGroup>`
-
-## Examples
-
-### Default
-
-```jsx
-<Select label="Cats and dogs">
-  <Option value="british-shorthair">Bristish shorthair</Option>
-  <Option value="maine-coon">Maine coon</Option>
-  <Option value="persian">Persian</Option>
-  <Option value="germa-shepherd">German Shepherd</Option>
-  <Option value="bulldog">Bulldog</Option>
-  <Option value="labrador-retriever">Labrador Retriever</Option>
-</Select>
-```
-
-or
-
-```jsx
-const selectOptions = [
-  {value: 'british-shorthair', label: 'Bristish shorthair'},
-  {value: 'maine-coon', label: 'Maine coon'},
-  {value: 'persian', label: 'Persian'},
-  {value: 'germa-shepherd', label: 'German Shepherd'},
-  {value: 'bulldog', label: 'Bulldog'},
-  {value: 'labrador-retriever', label: 'Labrador Retriever'},
-];
-
-<Select label="Cats and dogs" options={selectOptions} />;
-```
-
-### Groups of options
-
-```jsx
-<Select label="Cats and dogs">
-  <OptionGroup label="Cats">
-    <Option value="british-shorthair">Bristish shorthair</Option>
-    <Option value="maine-coon">Maine coon</Option>
-    <Option value="persian">Persian</Option>
-  </OptionGroup>
-
-  <OptionGroup label="Dogs">
-    <Option value="germa-shepherd">German Shepherd</Option>
-    <Option value="bulldog">Bulldog</Option>
-    <Option value="labrador-retriever">Labrador Retriever</Option>
-  </OptionGroup>
-</Select>
-```
-
-or with alias
-
-```jsx
-<Select label="Cats and dogs">
-  <OptGroup label="Cats">
-    <Option value="british-shorthair">Bristish shorthair</Option>
-    <Option value="maine-coon">Maine coon</Option>
-    <Option value="persian">Persian</Option>
-  </OptGroup>
-
-  <OptGroup label="Dogs">
-    <Option value="germa-shepherd">German Shepherd</Option>
-    <Option value="bulldog">Bulldog</Option>
-    <Option value="labrador-retriever">Labrador Retriever</Option>
-  </OptGroup>
-</Select>
-```
-
-or
-
-```jsx
-const selectOptions = [
-  {
-    label: 'Cats',
-    options: [
-      {value: 'british-shorthair', label: 'Bristish shorthair'},
-      {value: 'maine-coon', label: 'Maine coon'},
-      {value: 'persian', label: 'Persian'},
-    ],
-  },
-  {
-    label: 'Dogs',
-    options: [
-      {value: 'germa-shepherd', label: 'German Shepherd'},
-      {value: 'bulldog', label: 'Bulldog'},
-      {value: 'labrador-retriever', label: 'Labrador Retriever'},
-    ],
-  },
-];
-
-<Select label="Cats and dogs" options={selectOptions} />;
-```
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Select/Select.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Select/Select.doc.ts
deleted file mode 100644
index 6c46d2c97d..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Select/Select.doc.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Select',
-  description:
-    'Use this when you want to give users a predefined list of options to choose from.',
-  requires: '',
-  thumbnail: 'select-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'SelectProps',
-      description: '',
-      type: 'SelectProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'select-default.png',
-    codeblock: {
-      title: 'Simple Select example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-select.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts b/packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts
deleted file mode 100644
index 0703a70b91..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-export interface SelectProps {
-  /**
-   * Whether the select can be changed.
-   */
-  disabled?: boolean;
-
-  /**
-   * Indicate an error to the user. The field will be given a specific stylistic treatment
-   * to communicate problems that have to be resolved immediately.
-   */
-  error?: string;
-
-  /**
-   * A unique identifier for the field. When no `id` is set,
-   * a globally unique value will be used instead.
-   */
-  id?: string;
-
-  /**
-   * Content to use as the field label.
-   */
-  label: string;
-
-  /**
-   * An identifier for the field that is unique within the nearest
-   * containing `Form` component.
-   */
-  name?: string;
-
-  /**
-   * Callback when focus is removed.
-   */
-  onBlur?(): void;
-
-  /**
-   * A callback that is run whenever the selected option changes. This callback
-   * is called with the string `value` of the selected `option`. This component
-   * is [controlled](https://reactjs.org/docs/forms.html#controlled-components),
-   * so you must store this value in state and reflect it back in the `value`
-   * prop of the select.
-   */
-  onChange?(value: string): void;
-
-  /**
-   * Callback when input is focused.
-   */
-  onFocus?(): void;
-
-  /**
-   * The options a user can select from.
-   *
-   * When both `options` and children `Option` or `OptionGroup` are provided,
-   * the options will be merged together, with the `options` property
-   * taking precedence.
-   */
-  options: (OptionDescription | OptionGroupDescription)[];
-
-  /**
-   * A short hint that describes the expected value of the field.
-   */
-  placeholder?: string;
-
-  /**
-   * Whether the field is read-only.
-   */
-  readOnly?: boolean;
-
-  /**
-   * Whether the field needs a value. This requirement adds semantic value
-   * to the field, but it will not cause an error to appear automatically.
-   * If you want to present an error when this field is empty, you can do
-   * so with the `error` prop.
-   */
-  required?: boolean;
-
-  /**
-   * The active option for the select. This should match to one of the
-   * `value` properties in the `options` property or one of the `<Option>`.
-   * When not set, the value will default to an empty string,
-   * which will show the `placeholder` text as the "selected value".
-   */
-  value?: string;
-}
-
-export interface OptionProps {
-  /**
-   * Whether this option can be selected or not.
-   */
-  disabled?: boolean;
-
-  /**
-   * The value that will be passed to the select’s `onChange` callback
-   * when this option is selected.
-   */
-  value: string;
-}
-
-export interface OptionGroupProps {
-  /**
-   * Whether the options within this group can be selected or not.
-   */
-  disabled?: boolean;
-
-  /**
-   * The user-facing label for this group of options.
-   */
-  label: string;
-}
-
-export interface OptionDescription {
-  /**
-   * Whether this option can be selected or not.
-   */
-  disabled?: boolean;
-
-  /**
-   * The user-facing label for this option.
-   */
-  label: string;
-
-  /**
-   * The value that will be passed to the select’s `onChange` callback
-   * when this option is selected.
-   */
-  value: string;
-}
-
-export interface OptionGroupDescription {
-  /**
-   * Whether the options within this group can be selected or not.
-   */
-  disabled?: boolean;
-
-  /**
-   * The user-facing label for this group of options.
-   */
-  label: string;
-
-  /**
-   * The options a user can select from.
-   */
-  options?: OptionDescription[];
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Select/examples/basic-select.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Select/examples/basic-select.example.ts
deleted file mode 100644
index 9edf4ecedb..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Select/examples/basic-select.example.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {
-  extension,
-  Select,
-} from '@shopify/ui-extensions/admin';
-
-export default extension(
-  'Playground',
-  (root) => {
-    let value = '2';
-    const select = root.createComponent(Select, {
-      value,
-      label: 'Country',
-      onChange(nextValue) {
-        value = nextValue;
-        select.updateProps({value});
-      },
-      options: [
-        {
-          value: '1',
-          label: 'Australia',
-        },
-        {
-          value: '2',
-          label: 'Canada',
-        },
-        {
-          value: '3',
-          label: 'France',
-        },
-        {
-          value: '4',
-          label: 'Japan',
-        },
-        {
-          value: '5',
-          label: 'Nigeria',
-        },
-        {
-          value: '6',
-          label: 'United States',
-        },
-      ],
-    });
-
-    root.appendChild(select);
-  },
-);
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/README.md b/packages/ui-extensions/src/surfaces/admin/components/Text/README.md
deleted file mode 100644
index e7d3ee0cc8..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Text/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Text
-
-The Text component is used to render text, and has optional properties to control the size, font, alignment, overflow, work break, and accessibility role.
-
-## Expected HTML in Web host
-
-`<span>Hello, World!</span>`
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts
deleted file mode 100644
index 29bd0d15b4..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Text',
-  description:
-    'This component renders text. Remember, you can also add your own styling.',
-  requires: '',
-  thumbnail: 'text-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'TextProps',
-      description: '',
-      type: 'TextProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Titles and text',
-  defaultExample: {
-    image: 'text-default.png',
-    codeblock: {
-      title: 'Simple Text example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-text.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'Heading',
-      url: '/docs/api/admin-extensions/components/titles-and-text/heading',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts b/packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts
deleted file mode 100644
index 42b19d273c..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type {
-  FontWeight,
-  TextOverflow,
-  FontVariantOptions,
-  FontStyle,
-  TextAccessibilityRole,
-} from '../shared';
-
-export interface TextProps {
-  /** A unique identifier for the field. */
-  id?: string;
-
-  /**
-   * Sets the weight (or boldness) of the font.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
-   * */
-  fontWeight?: FontWeight;
-
-  /**
-   * Set how hidden overflow content is signaled to users.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
-   * */
-  textOverflow?: TextOverflow;
-
-  /**
-   * Set all the variants for a font with a shorthand property.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
-   */
-  fontVariant?: FontVariantOptions | FontVariantOptions[];
-
-  /**
-   *  Use to emphasize a word or a group of words.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
-   */
-  fontStyle?: FontStyle;
-
-  /**
-   * Provide semantic meaning to content and improve support for assistive technologies.
-   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
-   */
-  accessibilityRole?: TextAccessibilityRole;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-text.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-text.example.ts
deleted file mode 100644
index 10d42c5f4f..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-text.example.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {extend, Text, BlockStack} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const text = root.createComponent(BlockStack, {inlineAlignment: 'center', gap: true}, [
-    root.createComponent(Text, {fontWeight: 'bold'}, 'Name:'),
-    root.createComponent(Text, {}, 'Jane Doe'),
-  ]);
-
-  root.appendChild(text);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.doc.ts
deleted file mode 100644
index 97306b9951..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.doc.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'TextArea',
-  description:
-    'This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.',
-  requires: '',
-  thumbnail: 'textarea-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'TextAreaProps',
-      description: '',
-      type: 'TextAreaProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'textarea-default.png',
-    codeblock: {
-      title: 'Simple TextArea example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-textarea.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: '/docs/api/admin-extensions/components/forms/textfield',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts b/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts
deleted file mode 100644
index f0456fe434..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {
-  AutocompleteProps,
-  TextAutocompleteField,
-  InputProps,
-  MinMaxLengthProps,
-} from '../shared';
-
-export interface TextAreaProps
-  extends InputProps<string>,
-    MinMaxLengthProps,
-    AutocompleteProps<TextAutocompleteField> {
-  /**
-   * A number of visible text lines.
-   *
-   * @defaultValue 2
-   */
-  rows?: number;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.ts b/packages/ui-extensions/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.ts
deleted file mode 100644
index bfc088eabb..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {extend, TextArea} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const textArea = root.createComponent(TextArea, {
-    label: 'Enter a scheduled social media posting',
-    rows: 5,
-  });
-
-  root.appendChild(textArea);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextField/README.md b/packages/ui-extensions/src/surfaces/admin/components/TextField/README.md
deleted file mode 100644
index 650fc1ca0e..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/TextField/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# TextField
-
-Use a TextField to get text input from a user.
-
-## Expected HTML in Web host
-
-`<input type="text" />`
diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.doc.ts
deleted file mode 100644
index b4adbf8e3a..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.doc.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'TextField',
-  description:
-    'This is your go-to component when you need to let users input textual information.',
-  requires: '',
-  thumbnail: 'textfield-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'TextFieldProps',
-      description: '',
-      type: 'TextFieldProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'textfield-default.png',
-    codeblock: {
-      title: 'Simple TextField example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/TextField/examples/basic-textfield.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-textfield.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      type: 'component',
-      name: 'EmailField',
-      url: '/docs/api/admin-extensions/components/forms/emailfield',
-    },
-    {
-      type: 'component',
-      name: 'NumberField',
-      url: '/docs/api/admin-extensions/components/forms/numberfield',
-    },
-    {
-      type: 'component',
-      name: 'Form',
-      url: '/docs/api/admin-extensions/components/forms/form',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts b/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts
deleted file mode 100644
index 802dcfa714..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {
-  AutocompleteProps,
-  TextAutocompleteField,
-  InputProps,
-  MinMaxLengthProps,
-  FieldDecorationProps,
-} from '../shared';
-
-export interface TextFieldProps
-  extends InputProps<string>,
-    MinMaxLengthProps,
-    AutocompleteProps<TextAutocompleteField>,
-    FieldDecorationProps {}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextField/examples/basic-textfield.example.ts b/packages/ui-extensions/src/surfaces/admin/components/TextField/examples/basic-textfield.example.ts
deleted file mode 100644
index 9c704be93e..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/TextField/examples/basic-textfield.example.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {extend, TextField} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const textfield = root.createComponent(TextField, {
-    label: 'Enter some text',
-  });
-
-  root.appendChild(textfield);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/URLField/README.md b/packages/ui-extensions/src/surfaces/admin/components/URLField/README.md
deleted file mode 100644
index c1b3abcf23..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/URLField/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# URLField
-
-Use a URLField to let the user enter a URL.
-
-## Expected HTML in Web host
-
-`<input type="url" />`
diff --git a/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.doc.ts
deleted file mode 100644
index d5b34658a2..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.doc.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'URLField',
-  description: 'This is the right component for letting users enter a URL.',
-  requires: '',
-  thumbnail: 'urlfield-thumbnail.png',
-  isVisualComponent: true,
-  type: '',
-  definitions: [
-    {
-      title: 'URLFieldProps',
-      description: '',
-      type: 'URLFieldProps',
-    },
-  ],
-  category: 'Components',
-  subCategory: 'Forms',
-  defaultExample: {
-    image: 'urlfield-default.png',
-    codeblock: {
-      title: 'Simple URLField example',
-      tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.tsx',
-          language: 'tsx',
-        },
-        {
-          title: 'JS',
-          code: './examples/basic-urlfield.example.ts',
-          language: 'js',
-        },
-      ],
-    },
-  },
-  related: [
-    {
-      type: 'component',
-      name: 'EmailField',
-      url: '/docs/api/admin-extensions/components/forms/emailfield',
-    },
-  ],
-};
-
-export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts b/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts
deleted file mode 100644
index 8c4939e522..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {
-  AnyAutocompleteField,
-  AutocompleteProps,
-  AutocompleteAddressGroup,
-  AutocompleteFieldInstantMessageAlias,
-  InputProps,
-  MinMaxLengthProps,
-} from '../shared';
-
-export interface URLFieldProps
-  extends InputProps<string>,
-    MinMaxLengthProps,
-    AutocompleteProps<URLAutocompleteField> {}
-
-export type URLAutocompleteField = Extract<
-  AnyAutocompleteField,
-  | 'url'
-  | 'photo'
-  | `${AutocompleteFieldInstantMessageAlias}`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldInstantMessageAlias}`
->;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.ts b/packages/ui-extensions/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.ts
deleted file mode 100644
index 248571bce4..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {extend, URLField} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const urlField = root.createComponent(URLField, {
-    label: 'Enter store url',
-  });
-
-  root.appendChild(urlField);
-});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/shared/display.ts b/packages/ui-extensions/src/surfaces/admin/components/shared/display.ts
deleted file mode 100644
index 41e4412f86..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/shared/display.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface DisplayProps {
-  /**
-   * The display property sets the display behavior of an element.
-   * @defaultValue 'auto'
-   */
-  display?: 'auto' | 'none';
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/components/shared/index.ts b/packages/ui-extensions/src/surfaces/admin/components/shared/index.ts
deleted file mode 100644
index 54d3a6e58c..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/shared/index.ts
+++ /dev/null
@@ -1,1029 +0,0 @@
-export interface GlobalProps {
-  /**
-   * A unique identifier for the element.
-   */
-  id?: string;
-}
-
-export interface InputProps<T> {
-  /**
-   * Whether the field can be modified.
-   */
-  disabled?: boolean;
-
-  /**
-   * Indicate an error to the user. The field will be given a specific stylistic treatment
-   * to communicate problems that have to be resolved immediately.
-   */
-  error?: string;
-
-  /**
-   * A unique identifier for the field.
-   */
-  id?: string;
-
-  /**
-   * Content to use as the field label.
-   */
-  label: string;
-
-  /**
-   * An identifier for the field that is unique within the nearest
-   * containing `Form` component.
-   */
-  name?: string;
-
-  /**
-   * Callback when focus is removed.
-   */
-  onBlur?(): void;
-
-  /**
-   * Callback when the user has **finished editing** a field. Unlike `onChange`
-   * callbacks you may be familiar with from React component libraries,
-   * this callback is **not** run on every change to the input. Text fields are
-   * “partially controlled” components, which means that while the user edits the
-   * field, its state is controlled by the component. Once the user has signalled that
-   * they have finished editing the field (typically, by blurring the field), `onChange`
-   * is called if the input actually changed from the most recent `value` property. At
-   * that point, you are expected to store this “committed value” in state, and reflect
-   * it in the text field’s `value` property.
-   *
-   * This state management model is important given how UI Extensions are rendered. UI Extension components
-   * run on a separate thread from the UI, so they can’t respond to input synchronously.
-   * A pattern popularized by [controlled React components](https://reactjs.org/docs/forms.html#controlled-components)
-   * is to have the component be the source of truth for the input `value`, and update
-   * the `value` on every user input. The delay in responding to events from a UI
-   * extension is only a few milliseconds, but attempting to strictly store state with
-   * this delay can cause issues if a user types quickly, or if the user is using a
-   * lower-powered device. Having the UI thread take ownership for “in progress” input,
-   * and only synchronizing when the user is finished with a field, avoids this risk.
-   *
-   * It can still sometimes be useful to be notified when the user makes any input in
-   * the field. If you need this capability, you can use the `onInput` prop. However,
-   * never use that property to create tightly controlled state for the `value`.
-   *
-   * This callback is called with the current value of the field. If the value of a field
-   * is the same as the current `value` prop provided to the field, the `onChange` callback
-   * will not be run.
-   */
-  onChange?(value: T): void;
-
-  /**
-   * Callback when input is focused.
-   */
-  onFocus?(): void;
-
-  /**
-   * Callback when the user makes any changes in the field. As noted in the documentation
-   * for `onChange`, you **must not** use this to update `value` — use the `onChange`
-   * callback for that purpose. Use the `onInput` prop when you need to do something
-   * as soon as the user makes a change, like clearing validation errors that apply to
-   * the field as soon as the user begins making the necessary adjustments.
-   *
-   * This callback is called with the current value of the field.
-   */
-  onInput?(value: T): void;
-
-  /**
-   * A short hint that describes the expected value of the field.
-   */
-  placeholder?: string;
-
-  /**
-   * Whether the field is read-only.
-   */
-  readOnly?: boolean;
-
-  /**
-   * A default value to populate for uncontrolled components.
-   */
-  defaultValue?: string | string[];
-
-  /**
-   * Whether the field needs a value. This requirement adds semantic value
-   * to the field, but it will not cause an error to appear automatically.
-   * If you want to present an error when this field is empty, you can do
-   * so with the `error` prop.
-   */
-  required?: boolean;
-
-  /**
-   * The current value for the field. If omitted, the field will be empty. You should
-   * update this value in response to the `onChange` callback.
-   */
-  value?: T;
-}
-
-export interface FieldDecorationProps {
-  /**
-   * A value to be displayed immediately after the editable portion of the field.
-   *
-   * This is useful for displaying an implied part of the value, such as "@shopify.com", or "%".
-   *
-   * This cannot be edited by the user, and it isn't included in the value of the field.
-   *
-   * It may not be displayed until the user has interacted with the input.
-   * For example, an inline label may take the place of the suffix until the user focuses the input.
-   *
-   * @default ''
-   */
-  suffix?: string;
-}
-
-export interface MinMaxLengthProps {
-  /**
-   * Specifies the maximum number of characters allowed.
-   */
-  maxLength?: number;
-
-  /**
-   * Specifies the min number of characters allowed.
-   */
-  minLength?: number;
-}
-
-export interface AccessibilityLabelProps {
-  /**
-   * A label that describes the purpose or contents of the element. When set, it will be announced
-   * to users using assistive technologies and will provide them with more context. When set, any
-   * children or `label` supplied will not be announced to screen readers.
-   */
-  accessibilityLabel?: string;
-}
-
-export interface AccessibilityRoleProps {
-  /**
-   * Sets the semantic meaning of the component’s content. When set,
-   * the role will be used by assistive technologies to help users
-   * navigate the page.
-   *
-   * @defaultValue 'generic'
-   */
-  accessibilityRole?: AccessibilityRole;
-}
-
-export type AccessibilityRole =
-  /**
-   * Used to indicate the primary content.
-   *
-   * In an HTML host, `main` will render a `<main>` element.
-   * Learn more about the [`<main>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs.
-   */
-  | 'main'
-
-  /**
-   * Used to indicate the component is a header.
-   *
-   * In an HTML host `header` will render a `<header>` element.
-   * Learn more about the [`<header>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs.
-   */
-  | 'header'
-
-  /**
-   * Used to display information such as copyright information, navigation links, and privacy statements.
-   *
-   * In an HTML host `footer` will render a `<footer>` element.
-   * Learn more about the [`<footer>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) in the MDN web docs.
-   */
-  | 'footer'
-
-  /**
-   * Used to indicate a generic section.
-   * Sections should always have a `Heading` or an accessible name provided in the `accessibilityLabel` property.
-   *
-   * In an HTML host `section` will render a `<section>` element.
-   * Learn more about the [`<section>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role) in the MDN web docs.
-   *
-   */
-  | 'section'
-
-  /**
-   * Used to designate a supporting section that relates to the main content.
-   *
-   * In an HTML host `aside` will render an `<aside>` element.
-   * Learn more about the [`<aside>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role) in the MDN web docs.
-   */
-  | 'aside'
-
-  /**
-   * Used to identify major groups of links used for navigating.
-   *
-   * In an HTML host `navigation` will render a `<nav>` element.
-   * Learn more about the [`<nav>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role) in the MDN web docs.
-   */
-  | 'navigation'
-
-  /**
-   * Used to identify a list of ordered items.
-   *
-   * In an HTML host `ordered-list` will render a `<ol>` element.
-   * Learn more about the [`<ol>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role) in the MDN web docs.
-   */
-  | 'ordered-list'
-
-  /**
-   * Used to identify an item inside a list of items.
-   *
-   * In an HTML host `list-item` will render a `<li>` element.
-   * Learn more about the [`<li>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role) in the MDN web docs.
-   */
-  | 'list-item'
-
-  /**
-   * Used to indicates the component acts as a divider that separates and distinguishes sections of content in a list of items.
-   *
-   * In an HTML host `list-item-separator` will render as `<li role="separator">`.
-   * Learn more about the [`<li>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and the [`separator` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) in the MDN web docs.
-   */
-  | 'list-item-separator'
-
-  /**
-   * Used to identify a list of unordered items.
-   *
-   * In an HTML host `unordered-list` will render a `<ul>` element.
-   * Learn more about the [`<ul>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role) in the MDN web docs.
-   */
-  | 'unordered-list'
-
-  /**
-   * Used to indicates the component acts as a divider that separates and distinguishes sections of content.
-   *
-   * In an HTML host `separator` will render as `<div role="separator">`.
-   * Learn more about the [`separator` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) in the MDN web docs.
-   */
-  | 'separator'
-
-  /**
-   * Used to define a live region containing advisory information for the user that is not important enough to be an alert.
-   *
-   * In an HTML host `status` will render as `<div role="status">`.
-   * Learn more about the [`status` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) in the MDN web docs.
-   */
-  | 'status'
-
-  /**
-   * Used for important, and usually time-sensitive, information.
-   *
-   * In an HTML host `alert` will render as `<div role="alert">`.
-   * Learn more about the [`alert` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) in the MDN web docs.
-   */
-  | 'alert'
-
-  /**
-   * Used to create a nameless container element which has no semantic meaning on its own.
-   *
-   * In an HTML host `generic'` will render a `<div>` element.
-   * Learn more about the [`generic` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role) in the MDN web docs.
-   */
-  | 'generic';
-
-export type SpacingKeyword = 'none' | 'small' | 'base' | 'large';
-
-export interface SizingProps {
-  /**
-   * Adjust the block size.
-   *
-   * - `number`: size in pixels.
-   * - `` `${number}%` ``: size in percentages of the available space.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size
-   */
-  blockSize?: number | `${number}%`;
-
-  /**
-   * Adjust the minimum block size.
-   *
-   * - `number`: size in pixels.
-   * - `` `${number}%` ``: size in percentages of the available space.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size
-   */
-  minBlockSize?: number | `${number}%`;
-
-  /**
-   * Adjust the maximum block size.
-   *
-   * - `number`: size in pixels.
-   * - `` `${number}%` ``: size in percentages of the available space.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size
-   */
-  maxBlockSize?: number | `${number}%`;
-
-  /**
-   * Adjust the inline size.
-   *
-   * - `number`: size in pixels.
-   * - `` `${number}%` ``: size in percentages of the available space.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
-   */
-  inlineSize?: number | `${number}%`;
-
-  /**
-   * Adjust the minimum inline size.
-   *
-   * - `number`: size in pixels.
-   * - `` `${number}%` ``: size in percentages of the available space.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size
-   */
-  minInlineSize?: number | `${number}%`;
-
-  /**
-   * Adjust the maximum inline size.
-   *
-   * - `number`: size in pixels.
-   * - `` `${number}%` ``: size in percentages of the available space.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size
-   */
-  maxInlineSize?: number | `${number}%`;
-}
-
-export interface PaddingProps {
-  /**
-   * Adjust the padding.
-   *
-   * To shorten the code, it is possible to specify all the padding for all edges of the box in one property.
-   *
-   * - `base` means block-start, inline-end, block-end and inline-start paddings are `base`.
-   * - `base none` means block-start and block-end paddings are `base`, inline-start and inline-end paddings are `none`.
-   * - `base none large` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
-   * - `base none large small` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
-   * - `true` applies a default padding that is appropriate for the component.
-   *
-   * Learn more about the 1-to-4-value syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box
-   */
-  padding?: MaybeAllBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
-
-  /**
-   * Adjust the block-padding.
-   *
-   * - `base none` means block-start padding is `base`, block-end padding is `none`.
-   */
-  paddingBlock?: MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
-
-  /**
-   * Adjust the block-start padding.
-   */
-  paddingBlockStart?: SpacingKeyword | boolean;
-
-  /**
-   * Adjust the block-end padding.
-   */
-  paddingBlockEnd?: SpacingKeyword | boolean;
-
-  /**
-   * Adjust the inline padding.
-   *
-   * - `base none` means inline-start padding is `base`, inline-end padding is `none`.
-   */
-  paddingInline?: MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
-
-  /**
-   * Adjust the inline-start padding.
-   */
-  paddingInlineStart?: SpacingKeyword | boolean;
-
-  /**
-   * Adjust the inline-end padding.
-   */
-  paddingInlineEnd?: SpacingKeyword | boolean;
-}
-
-export type MaybeAllBoxEdgesShorthandProperty<
-  T extends SpacingKeyword | boolean,
-> = T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`;
-
-export type MaybeTwoBoxEdgesShorthandProperty<
-  T extends SpacingKeyword | boolean,
-> = T | `${T} ${T}`;
-
-export interface AutocompleteProps<
-  AutocompleteField extends AnyAutocompleteField,
-> {
-  /**
-   * A hint as to the intended content of the field.
-   *
-   * When set to `true`, this property indicates that the field should support
-   * autofill, but you do not have any more semantic information on the intended
-   * contents.
-   *
-   * When set to `false`, you are indicating that this field contains sensitive
-   * information, or contents that are never saved, like one-time codes.
-   *
-   * Alternatively, you can provide value which describes the
-   * specific data you would like to be entered into this field during autofill.
-   *
-   * @see Learn more about the set of {@link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens|autocomplete values} supported in browsers.
-   */
-  autocomplete?:
-    | AutocompleteField
-    | `${AutocompleteSection} ${AutocompleteField}`
-    | `${AutocompleteGroup} ${AutocompleteField}`
-    | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}`
-    | boolean;
-}
-
-/**
- * The “section” scopes the autocomplete data that should be inserted
- * to a specific area of the page.
- *
- * Commonly used when there are multiple fields with the same autocomplete needs
- * in the same page. For example: 2 shipping address forms in the same page.
- */
-export type AutocompleteSection = `section-${string}`;
-
-/**
- * The contact information group the autocomplete data should be sourced from.
- */
-export type AutocompleteGroup = 'shipping' | 'billing';
-
-/**
- * The contact information subgroup the autocomplete data should be sourced from.
- */
-export type AutocompleteAddressGroup = 'fax' | 'home' | 'mobile' | 'pager';
-
-export type AutocompleteFieldTelephoneAlias = 'tel' | 'telephone';
-export type AutocompleteFieldBirthdayAlias = 'bday' | 'birthday';
-export type AutocompleteFieldCreditCardAlias = 'cc' | 'credit-card';
-export type AutocompleteFieldInstantMessageAlias = 'impp' | 'instant-message';
-export type AutocompleteFieldSecurityCodeAlias = 'csc' | 'security-code';
-
-export type AnyAutocompleteField =
-  | 'additional-name'
-  | 'address-level1'
-  | 'address-level2'
-  | 'address-level3'
-  | 'address-level4'
-  | 'address-line1'
-  | 'address-line2'
-  | 'address-line3'
-  | 'country-name'
-  | 'country'
-  | 'current-password'
-  | 'email'
-  | 'family-name'
-  | 'given-name'
-  | 'honorific-prefix'
-  | 'honorific-suffix'
-  | 'language'
-  | 'name'
-  | 'new-password'
-  | 'nickname'
-  | 'one-time-code'
-  | 'organization-title'
-  | 'organization'
-  | 'photo'
-  | 'postal-code'
-  | 'sex'
-  | 'street-address'
-  | 'transaction-amount'
-  | 'transaction-currency'
-  | 'url'
-  | 'username'
-  | `${AutocompleteFieldBirthdayAlias}-day`
-  | `${AutocompleteFieldBirthdayAlias}-month`
-  | `${AutocompleteFieldBirthdayAlias}-year`
-  | `${AutocompleteFieldBirthdayAlias}`
-  | `${AutocompleteFieldCreditCardAlias}-additional-name`
-  | `${AutocompleteFieldCreditCardAlias}-expiry-month`
-  | `${AutocompleteFieldCreditCardAlias}-expiry-year`
-  | `${AutocompleteFieldCreditCardAlias}-expiry`
-  | `${AutocompleteFieldCreditCardAlias}-family-name`
-  | `${AutocompleteFieldCreditCardAlias}-given-name`
-  | `${AutocompleteFieldCreditCardAlias}-name`
-  | `${AutocompleteFieldCreditCardAlias}-number`
-  | `${AutocompleteFieldCreditCardAlias}-${AutocompleteFieldSecurityCodeAlias}`
-  | `${AutocompleteFieldCreditCardAlias}-type`
-  | `${AutocompleteAddressGroup} email`
-  | `${AutocompleteFieldInstantMessageAlias}`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldInstantMessageAlias}`
-  | `${AutocompleteFieldTelephoneAlias}`
-  | `${AutocompleteFieldTelephoneAlias}-area-code`
-  | `${AutocompleteFieldTelephoneAlias}-country-code`
-  | `${AutocompleteFieldTelephoneAlias}-extension`
-  | `${AutocompleteFieldTelephoneAlias}-local-prefix`
-  | `${AutocompleteFieldTelephoneAlias}-local-suffix`
-  | `${AutocompleteFieldTelephoneAlias}-local`
-  | `${AutocompleteFieldTelephoneAlias}-national`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-area-code`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-country-code`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-extension`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-prefix`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-suffix`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-national`;
-
-export type TextAutocompleteField = Extract<
-  AnyAutocompleteField,
-  | 'additional-name'
-  | 'address-level1'
-  | 'address-level2'
-  | 'address-level3'
-  | 'address-level4'
-  | 'address-line1'
-  | 'address-line2'
-  | 'address-line3'
-  | 'country-name'
-  | 'country'
-  | 'family-name'
-  | 'given-name'
-  | 'honorific-prefix'
-  | 'honorific-suffix'
-  | 'language'
-  | 'name'
-  | 'nickname'
-  | 'one-time-code'
-  | 'organization-title'
-  | 'organization'
-  | 'postal-code'
-  | 'sex'
-  | 'street-address'
-  | 'transaction-currency'
-  | 'username'
-  | `${AutocompleteFieldCreditCardAlias}-name`
-  | `${AutocompleteFieldCreditCardAlias}-given-name`
-  | `${AutocompleteFieldCreditCardAlias}-additional-name`
-  | `${AutocompleteFieldCreditCardAlias}-family-name`
-  | `${AutocompleteFieldCreditCardAlias}-type`
->;
-
-/**
- * TODO:
- * Move these to their respective fields when they are implemented.
- */
-export type MoneyAutocomplete = Extract<
-  AnyAutocompleteField,
-  'transaction-amount'
->;
-
-export type DateAutocomplete = Extract<
-  AnyAutocompleteField,
-  | `${AutocompleteFieldBirthdayAlias}`
-  | `${AutocompleteFieldBirthdayAlias}-day`
-  | `${AutocompleteFieldBirthdayAlias}-month`
-  | `${AutocompleteFieldBirthdayAlias}-year`
-  | `${AutocompleteFieldCreditCardAlias}-expiry`
-  | `${AutocompleteFieldCreditCardAlias}-expiry-month`
-  | `${AutocompleteFieldCreditCardAlias}-expiry-year`
->;
-
-export type PhoneAutocompleteField = Extract<
-  AnyAutocompleteField,
-  | `${AutocompleteFieldTelephoneAlias}`
-  | `${AutocompleteFieldTelephoneAlias}-area-code`
-  | `${AutocompleteFieldTelephoneAlias}-country-code`
-  | `${AutocompleteFieldTelephoneAlias}-extension`
-  | `${AutocompleteFieldTelephoneAlias}-local-prefix`
-  | `${AutocompleteFieldTelephoneAlias}-local-suffix`
-  | `${AutocompleteFieldTelephoneAlias}-local`
-  | `${AutocompleteFieldTelephoneAlias}-national`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-area-code`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-country-code`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-extension`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-prefix`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-suffix`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-national`
->;
-
-export interface GapProps {
-  /**
-   * Adjust spacing between children
-   */
-  gap?: MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
-
-  /**
-   * Adjust spacing between elements in the block axis.
-   *
-   * Alias for `rowGap`
-   */
-  blockGap?: SpacingKeyword | boolean;
-
-  /**
-   * Adjust spacing between elements in the inline axis.
-   *
-   * Alias for `columnGap`
-   */
-  inlineGap?: SpacingKeyword | boolean;
-
-  /**
-   * Adjust spacing between children in the block axis
-   */
-  rowGap?: SpacingKeyword | boolean;
-
-  /**
-   * Adjust spacing between children in the inline axis
-   */
-  columnGap?: SpacingKeyword | boolean;
-}
-
-export type CrossAxisAlignment =
-  /** Items are positioned at the beginning of the container's cross axis */
-  | 'start'
-  /** Items are positioned at the center of the container’s cross axis */
-  | 'center'
-  /**	Items are positioned at the end of the container's cross axis */
-  | 'end'
-  /** Items are positioned at the baseline of the container's cross axis */
-  | 'baseline';
-
-export type MainAxisAlignment =
-  /** Align items at the start of the container's main axis */
-  | 'start'
-  /** Align items to the center of the container's main axis */
-  | 'center'
-  /** Align items at the end of the container's main axis */
-  | 'end'
-  /** Distribute items evenly across the container's main axis, where the first item is flush with the start, the last is flush with the end */
-  | 'space-between'
-  /** Distribute items evenly across the container's main axis, with a half-size space on either end of the items */
-  | 'space-around'
-  /** Distribute items evenly across the container's main axis, with items having equal space around them */
-  | 'space-evenly';
-
-export type SpaceScale =
-  | '0'
-  | '025'
-  | '05'
-  | '1'
-  | '2'
-  | '3'
-  | '4'
-  | '5'
-  | '6'
-  | '8'
-  | '10'
-  | '12'
-  | '16'
-  | '20'
-  | '24'
-  | '28'
-  | '32';
-
-export type SizeScale =
-  | 'small-300'
-  | 'small-200'
-  | 'small-100'
-  | 'base'
-  | 'large-100'
-  | 'large-200'
-  | 'large-300';
-
-export type Tone = 'info' | 'success' | 'warning' | 'critical' | 'default';
-
-export interface AnchorProps {
-  /**
-   * The URL to link to.
-   * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
-   */
-  href?: string;
-
-  /**
-   * Alias for `href`
-   * If set, it will navigate to the location specified by `to` after executing the `onClick` callback.
-   */
-  to?: string;
-
-  /**
-   * Callback when a link is pressed. If `href` is set,
-   * it will execute the callback and then navigate to the location specified by `href`.
-   */
-  onClick?(): void;
-
-  /**
-   * Alias for `onClick`
-   * Callback when a link is pressed. If `href` is set,
-   * it will execute the callback and then navigate to the location specified by `href`.
-   */
-  onPress?(): void;
-}
-
-export type BackgroundColorKeyword = 'transparent' | 'base' | 'subdued';
-
-export interface BackgroundProps {
-  /**
-   * Adjust the background of the element.
-   *
-   * @default: 'transparent'
-   */
-  background?: BackgroundColorKeyword;
-}
-
-export interface NumberConstraintsProps {
-  /**
-   * The highest decimal or integer to be accepted for the field.
-   * When used with `step` the value will round down to the max number.
-   *
-   * Note: a user will still be able to use the keyboard to input a number higher than
-   * the max. It is up to the developer to add appropriate validation.
-   */
-  max?: number;
-
-  /**
-   * The lowest decimal or integer to be accepted for the field.
-   * When used with `step` the value will round up to the min number.
-   *
-   * Note: a user will still be able to use the keyboard to input a number lower than
-   * the min. It is up to the developer to add appropriate validation.
-   *
-   * @defaultValue 0
-   */
-  min?: number;
-
-  /**
-   * The amount the value can increase or decrease by. This can be an integer or decimal.
-   * If a `max` or `min` is specified with `step` when increasing/decreasing the value
-   * via the buttons, the final value will always round to the `max` or `min`
-   * rather than the closest valid amount.
-   *
-   * @defaultValue 1
-   */
-  step?: number;
-}
-
-export interface Money {
-  /**
-   * A decimal money amount.
-   */
-  amount: number;
-
-  /**
-   * A currency.
-   */
-  currencyCode: CurrencyCode;
-}
-
-export type CurrencyCode =
-  | 'USD'
-  | 'EUR'
-  | 'GBP'
-  | 'CAD'
-  | 'AFN'
-  | 'ALL'
-  | 'DZD'
-  | 'AOA'
-  | 'ARS'
-  | 'AMD'
-  | 'AWG'
-  | 'AUD'
-  | 'BBD'
-  | 'AZN'
-  | 'BDT'
-  | 'BSD'
-  | 'BHD'
-  | 'BIF'
-  | 'BZD'
-  | 'BMD'
-  | 'BTN'
-  | 'BAM'
-  | 'BRL'
-  | 'BOB'
-  | 'BWP'
-  | 'BND'
-  | 'BGN'
-  | 'MMK'
-  | 'KHR'
-  | 'CVE'
-  | 'KYD'
-  | 'XAF'
-  | 'CLP'
-  | 'CNY'
-  | 'COP'
-  | 'KMF'
-  | 'CDF'
-  | 'CRC'
-  | 'HRK'
-  | 'CZK'
-  | 'DKK'
-  | 'DOP'
-  | 'XCD'
-  | 'EGP'
-  | 'ETB'
-  | 'XPF'
-  | 'FJD'
-  | 'GMD'
-  | 'GHS'
-  | 'GTQ'
-  | 'GYD'
-  | 'GEL'
-  | 'HTG'
-  | 'HNL'
-  | 'HKD'
-  | 'HUF'
-  | 'ISK'
-  | 'INR'
-  | 'IDR'
-  | 'ILS'
-  | 'IQD'
-  | 'JMD'
-  | 'JPY'
-  | 'JEP'
-  | 'JOD'
-  | 'KZT'
-  | 'KES'
-  | 'KWD'
-  | 'KGS'
-  | 'LAK'
-  | 'LVL'
-  | 'LBP'
-  | 'LSL'
-  | 'LRD'
-  | 'LTL'
-  | 'MGA'
-  | 'MKD'
-  | 'MOP'
-  | 'MWK'
-  | 'MVR'
-  | 'MXN'
-  | 'MYR'
-  | 'MUR'
-  | 'MDL'
-  | 'MAD'
-  | 'MNT'
-  | 'MZN'
-  | 'NAD'
-  | 'NPR'
-  | 'ANG'
-  | 'NZD'
-  | 'NIO'
-  | 'NGN'
-  | 'NOK'
-  | 'OMR'
-  | 'PAB'
-  | 'PKR'
-  | 'PGK'
-  | 'PYG'
-  | 'PEN'
-  | 'PHP'
-  | 'PLN'
-  | 'QAR'
-  | 'RON'
-  | 'RUB'
-  | 'RWF'
-  | 'WST'
-  | 'SAR'
-  | 'RSD'
-  | 'SCR'
-  | 'SGD'
-  | 'SDG'
-  | 'SYP'
-  | 'ZAR'
-  | 'KRW'
-  | 'SSP'
-  | 'SBD'
-  | 'LKR'
-  | 'SRD'
-  | 'SZL'
-  | 'SEK'
-  | 'CHF'
-  | 'TWD'
-  | 'THB'
-  | 'TZS'
-  | 'TTD'
-  | 'TND'
-  | 'TRY'
-  | 'TMT'
-  | 'UGX'
-  | 'UAH'
-  | 'AED'
-  | 'UYU'
-  | 'UZS'
-  | 'VUV'
-  | 'VND'
-  | 'XOF'
-  | 'YER'
-  | 'ZMW'
-  | 'BYN'
-  | 'BYR'
-  | 'DJF'
-  | 'ERN'
-  | 'FKP'
-  | 'GIP'
-  | 'GNF'
-  | 'IRR'
-  | 'KID'
-  | 'LYD'
-  | 'MRU'
-  | 'SLL'
-  | 'SHP'
-  | 'SOS'
-  | 'STD'
-  | 'STN'
-  | 'TJS'
-  | 'TOP'
-  | 'VED'
-  | 'VEF'
-  | 'VES'
-  | 'XXX';
-
-export type TextOverflow = 'ellipsis';
-
-export type FontStyle = 'italic' | 'normal';
-
-export type TextAccessibilityRole =
-  /**
-   * Indicate the text is contact information. Typically used for addresses.
-   */
-  | 'address'
-
-  /**
-   * Indicate the text has been deleted. Typically used for discounted prices.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
-   */
-  | 'deletion'
-
-  /**
-   * Indicate the text is marked or highlighted and relevant to the buyer’s current action.
-   * Typically used to indicate the characters that matched a search query.
-   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/mark_role
-   */
-  | 'mark'
-
-  /**
-   * Indicate emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.
-   *
-   * In an HTML host, the text will be rendered in a `<em>` tag.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
-   */
-  | 'emphasis'
-
-  /**
-   * Indicate an offset from the normal prose of the text. Typically used to indicate
-   * a foreign word, fictional character thoughts, or when the text refers to the definition of a word
-   * instead of representing its semantic meaning.
-   *
-   * In an HTML host, the text will be rendered in a `<i>` tag.
-   */
-  | 'offset'
-
-  /**
-   * Indicate strong importance, seriousness, or urgency.
-   *
-   * In an HTML host, the text will be rendered in a `<strong>` tag.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
-   */
-  | 'strong';
-
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
- */
-export type FontVariantOptions =
-  /**
-   * The `font-variant-numeric` CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
-   */
-  | 'numeric'
-  /**
-   * The `font-variant-caps` CSS property controls the use of alternate glyphs for capital letters.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps
-   */
-  | 'all-small-caps'
-  /**
-   * Sets the value of the `font-variant-ligatures` as `none`,
-   * and the values of the other longhand properties as `normal`, their initial value.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant#values
-   */
-  | 'none';
-
-export type FontWeight =
-  | 'light-300'
-  | 'light-200'
-  | 'light-100'
-  // alias to light-100
-  | 'light'
-  | 'base'
-  // alias to base
-  | 'normal'
-  // alias to bold-100
-  | 'bold'
-  | 'bold-100'
-  | 'bold-200'
-  | 'bold-300';
-export interface BaseTypographyProps {
-  /** Size of the typography's font. */
-  fontSize?: SizeScale;
-
-  /**
-   * Sets the weight of the font.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
-   * */
-  fontWeight?: FontWeight;
-
-  /**
-   * Set how hidden overflow content is signaled to users.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
-   * */
-  textOverflow?: TextOverflow;
-
-  /**
-   *  Use to emphasize a word or a group of words.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
-   */
-  fontStyle?: FontStyle;
-}
diff --git a/packages/ui-extensions/src/surfaces/admin/shared.ts b/packages/ui-extensions/src/surfaces/admin/shared.ts
deleted file mode 100644
index b878012747..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/shared.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type {ComponentsBuilder, AnyComponentBuilder} from '../../shared';
-
-type ComponentTypes = typeof import('./components');
-
-export type Components = ComponentsBuilder<ComponentTypes>;
-export type AnyComponent = AnyComponentBuilder<ComponentTypes>;
diff --git a/packages/ui-extensions/tsconfig.json b/packages/ui-extensions/tsconfig.json
index 707d3d8df3..9e919e61c7 100644
--- a/packages/ui-extensions/tsconfig.json
+++ b/packages/ui-extensions/tsconfig.json
@@ -3,7 +3,9 @@
   "compilerOptions": {
     "rootDir": "src",
     "outDir": "build/ts",
-    "stripInternal": true
+    "stripInternal": true,
+    "lib": ["DOM"],
+    "importsNotUsedAsValues": "remove"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["src/**/*.example.*", "src/**/tests/**"]
diff --git a/packages/ui-extensions/vite.config.ts b/packages/ui-extensions/vite.config.ts
new file mode 100644
index 0000000000..99ee835228
--- /dev/null
+++ b/packages/ui-extensions/vite.config.ts
@@ -0,0 +1,41 @@
+import {defineConfig} from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig(({mode}) => ({
+  plugins: [
+    dts({
+      entryRoot: './src',
+    }),
+  ],
+
+  build: {
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: [
+        {
+          dir: './dist',
+          format: 'es',
+          // preserveModules: true,
+        },
+      ],
+      treeshake: false,
+    },
+    emptyOutDir: true,
+    sourcemap: mode === 'development',
+    lib: {
+      entry: {
+        admin: new URL('./src/surfaces/admin.ts', import.meta.url).pathname,
+        'customer-account': new URL(
+          './src/surfaces/customer-account.ts',
+          import.meta.url,
+        ).pathname,
+        checkout: new URL('./src/surfaces/checkout.ts', import.meta.url)
+          .pathname,
+        'point-of-sale': new URL(
+          './src/surfaces/point-of-sale.ts',
+          import.meta.url,
+        ).pathname,
+      },
+    },
+  },
+}));
diff --git a/packages/ui-extensions/yarn.lock b/packages/ui-extensions/yarn.lock
new file mode 100644
index 0000000000..6102cdb4e4
--- /dev/null
+++ b/packages/ui-extensions/yarn.lock
@@ -0,0 +1,233 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@remote-ui/async-subscription@^2.1.12":
+  version "2.1.15"
+  resolved "https://registry.yarnpkg.com/@remote-ui/async-subscription/-/async-subscription-2.1.15.tgz#ab8753770630baa2bc2224e0b5c0ee15c09f5026"
+  integrity sha512-SdPfO4ExDOVyOPAoCqT9+Tk0UeU97EMplkxlr5qiv3W7c1yRsxgtbETicoBh9l/P49bLzVjiJG6CQIu1au3Vhw==
+  dependencies:
+    "@remote-ui/rpc" "^1.4.5"
+
+"@remote-ui/core@^2.2.4":
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/@remote-ui/core/-/core-2.2.4.tgz#56b174b6f041c57d5950811e6f93cfcffb0fbc1a"
+  integrity sha512-7ahrsI5GqYvAGcWTcysbKFKbzbhB/mDgIJr9VurF34gor2IqRCrmrPYemLQuOCQhWqPb3AOEUxWFYNLiB5i6kA==
+  dependencies:
+    "@remote-ui/rpc" "^1.4.5"
+    "@remote-ui/types" "^1.1.3"
+
+"@remote-ui/rpc@^1.4.5":
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/@remote-ui/rpc/-/rpc-1.4.5.tgz#20328970c314374d96fdaae1cf93aca4b47fefee"
+  integrity sha512-Cr+06niG/vmE4A9YsmaKngRuuVSWKMY42NMwtZfy+gctRWGu6Wj9BWuMJg5CEp+JTkRBPToqT5rqnrg1G/Wvow==
+
+"@remote-ui/types@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@remote-ui/types/-/types-1.1.3.tgz#b2a790d5be50fb82d89d4abea9883f87f83a5a25"
+  integrity sha512-P1kN1F3p0oMgnLN8Of1Ie9am3sLvJ7nhqHH1pvzkrxqjVwhhyPVZNcwOHyUNZPKp62izhDavdrcnqrdXzVJqGA==
+
+"@shopify/admin-ui-icons@^0.12.0":
+  version "0.12.0"
+  resolved "https://npm.shopify.io/node/@shopify/admin-ui-icons/-/0.12.0/admin-ui-icons-0.12.0.tgz#5d61899904b3a68056b048df419f9355056d832c"
+  integrity sha512-78s4H1BICz0W53U0ChH1l7woiXUUYbnPrJbasCJUsw7FoUvct9e9/kdUVC1q+qIf42bfYzccSRX+Oz581leBzw==
+
+"@shopify/generate-docs@0.16.4":
+  version "0.16.4"
+  resolved "https://registry.yarnpkg.com/@shopify/generate-docs/-/generate-docs-0.16.4.tgz#4e9c6348f080217e59be34ca6fbde850769eccef"
+  integrity sha512-lYtnB2gPPSBf73YvbrNM9u6p1cm/qbg1uEqkMW9sG4/dORb5tBPDDC/KkckaCaMF7soHg9PsinNXHAa0/Hlf4g==
+  dependencies:
+    "@types/react" "^18.0.21"
+    globby "^11.1.0"
+    typescript "^4.8.3 || ^5.0.0"
+
+"@shopify/ui-api-design@^0.18.0":
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/@shopify/ui-api-design/-/ui-api-design-0.18.0.tgz#af3affb7b12f0f3debd747c6ed0ab1c1712abcef"
+  integrity sha512-5GxssVe7s2W+p+yPHLImDGZnGdSLS9G5vhvAM0zswOW+6sWKCe7gKvIF/GWJvyjlTTSbDxiuYsexMPUxnsSRVg==
+
+"@types/prop-types@*":
+  version "15.7.13"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
+  integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
+
+"@types/react@^18.0.21":
+  version "18.3.12"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.12.tgz#99419f182ccd69151813b7ee24b792fe08774f60"
+  integrity sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+fast-glob@^3.2.9:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fastq@^1.6.0:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
+  integrity sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
+  dependencies:
+    reusify "^1.0.4"
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+glob-parent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+ignore@^5.2.0:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-glob@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+"typescript@^4.8.3 || ^5.0.0":
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
+  integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
+
+typescript@^4.9.0:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
diff --git a/yarn.lock b/yarn.lock
index 5ca1799edf..81d04e0bf7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1404,6 +1404,121 @@
     human-id "^1.0.2"
     prettier "^2.7.1"
 
+"@esbuild/aix-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
+  integrity sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==
+
+"@esbuild/android-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz#09d9b4357780da9ea3a7dfb833a1f1ff439b4052"
+  integrity sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==
+
+"@esbuild/android-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz#9b04384fb771926dfa6d7ad04324ecb2ab9b2e28"
+  integrity sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==
+
+"@esbuild/android-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz#29918ec2db754cedcb6c1b04de8cd6547af6461e"
+  integrity sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==
+
+"@esbuild/darwin-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz#e495b539660e51690f3928af50a76fb0a6ccff2a"
+  integrity sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==
+
+"@esbuild/darwin-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz#c13838fa57372839abdddc91d71542ceea2e1e22"
+  integrity sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==
+
+"@esbuild/freebsd-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz#646b989aa20bf89fd071dd5dbfad69a3542e550e"
+  integrity sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==
+
+"@esbuild/freebsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz#aa615cfc80af954d3458906e38ca22c18cf5c261"
+  integrity sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==
+
+"@esbuild/linux-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz#70ac6fa14f5cb7e1f7f887bcffb680ad09922b5b"
+  integrity sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==
+
+"@esbuild/linux-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz#fc6fd11a8aca56c1f6f3894f2bea0479f8f626b9"
+  integrity sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==
+
+"@esbuild/linux-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz#3271f53b3f93e3d093d518d1649d6d68d346ede2"
+  integrity sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==
+
+"@esbuild/linux-loong64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz#ed62e04238c57026aea831c5a130b73c0f9f26df"
+  integrity sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==
+
+"@esbuild/linux-mips64el@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz#e79b8eb48bf3b106fadec1ac8240fb97b4e64cbe"
+  integrity sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==
+
+"@esbuild/linux-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz#5f2203860a143b9919d383ef7573521fb154c3e4"
+  integrity sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==
+
+"@esbuild/linux-riscv64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz#07bcafd99322d5af62f618cb9e6a9b7f4bb825dc"
+  integrity sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==
+
+"@esbuild/linux-s390x@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz#b7ccf686751d6a3e44b8627ababc8be3ef62d8de"
+  integrity sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==
+
+"@esbuild/linux-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz#6d8f0c768e070e64309af8004bb94e68ab2bb3b0"
+  integrity sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==
+
+"@esbuild/netbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz#bbe430f60d378ecb88decb219c602667387a6047"
+  integrity sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==
+
+"@esbuild/openbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz#99d1cf2937279560d2104821f5ccce220cb2af70"
+  integrity sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==
+
+"@esbuild/sunos-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz#08741512c10d529566baba837b4fe052c8f3487b"
+  integrity sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==
+
+"@esbuild/win32-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz#675b7385398411240735016144ab2e99a60fc75d"
+  integrity sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==
+
+"@esbuild/win32-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz#1bfc3ce98aa6ca9a0969e4d2af72144c59c1193b"
+  integrity sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==
+
+"@esbuild/win32-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c"
+  integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
+
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
@@ -1745,6 +1860,49 @@
     globby "^11.0.0"
     read-yaml-file "^1.1.0"
 
+"@microsoft/api-extractor-model@7.29.8":
+  version "7.29.8"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.29.8.tgz#fa6d0c48374f1105c0637f0882cfe2044d88520a"
+  integrity sha512-t3Z/xcO6TRbMcnKGVMs4uMzv/gd5j0NhMiJIGjD4cJMeFJ1Hf8wnLSx37vxlRlL0GWlGJhnFgxvnaL6JlS+73g==
+  dependencies:
+    "@microsoft/tsdoc" "~0.15.0"
+    "@microsoft/tsdoc-config" "~0.17.0"
+    "@rushstack/node-core-library" "5.9.0"
+
+"@microsoft/api-extractor@^7.47.11":
+  version "7.47.11"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.47.11.tgz#00450fb4f4c30f76c18d36110aa4cae1cdc2191c"
+  integrity sha512-lrudfbPub5wzBhymfFtgZKuBvXxoSIAdrvS2UbHjoMT2TjIEddq6Z13pcve7A03BAouw0x8sW8G4txdgfiSwpQ==
+  dependencies:
+    "@microsoft/api-extractor-model" "7.29.8"
+    "@microsoft/tsdoc" "~0.15.0"
+    "@microsoft/tsdoc-config" "~0.17.0"
+    "@rushstack/node-core-library" "5.9.0"
+    "@rushstack/rig-package" "0.5.3"
+    "@rushstack/terminal" "0.14.2"
+    "@rushstack/ts-command-line" "4.23.0"
+    lodash "~4.17.15"
+    minimatch "~3.0.3"
+    resolve "~1.22.1"
+    semver "~7.5.4"
+    source-map "~0.6.1"
+    typescript "5.4.2"
+
+"@microsoft/tsdoc-config@~0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/tsdoc-config/-/tsdoc-config-0.17.0.tgz#82605152b3c1d3f5cd4a11697bc298437484d55d"
+  integrity sha512-v/EYRXnCAIHxOHW+Plb6OWuUoMotxTN0GLatnpOb1xq0KuTNw/WI3pamJx/UbsoJP5k9MCw1QxvvhPcF9pH3Zg==
+  dependencies:
+    "@microsoft/tsdoc" "0.15.0"
+    ajv "~8.12.0"
+    jju "~1.4.0"
+    resolve "~1.22.2"
+
+"@microsoft/tsdoc@0.15.0", "@microsoft/tsdoc@~0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.15.0.tgz#f29a55df17cb6e87cfbabce33ff6a14a9f85076d"
+  integrity sha512-HZpPoABogPvjeJOdzCOSJsXeL/SMCBgBZMVC3X3d7YYp2gf31MfxhUoYUNwf1ERPJOnQc0wkFn9trqI6ZEdZuA==
+
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
   resolved "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz"
@@ -1875,6 +2033,150 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@rollup/pluginutils@^5.1.0":
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz#3001bf1a03f3ad24457591f2c259c8e514e0dbdf"
+  integrity sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^4.0.2"
+
+"@rollup/rollup-android-arm-eabi@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.26.0.tgz#f221c519a6efb5d3652bff32351522e0fb98e392"
+  integrity sha512-gJNwtPDGEaOEgejbaseY6xMFu+CPltsc8/T+diUTTbOQLqD+bnrJq9ulH6WD69TqwqWmrfRAtUv30cCFZlbGTQ==
+
+"@rollup/rollup-android-arm64@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.26.0.tgz#196a2379d81011422fe1128e512a8811605ede16"
+  integrity sha512-YJa5Gy8mEZgz5JquFruhJODMq3lTHWLm1fOy+HIANquLzfIOzE9RA5ie3JjCdVb9r46qfAQY/l947V0zfGJ0OQ==
+
+"@rollup/rollup-darwin-arm64@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.26.0.tgz#0c83e5f25adae7f0543ac29a0ebd485a0e7cd3e4"
+  integrity sha512-ErTASs8YKbqTBoPLp/kA1B1Um5YSom8QAc4rKhg7b9tyyVqDBlQxy7Bf2wW7yIlPGPg2UODDQcbkTlruPzDosw==
+
+"@rollup/rollup-darwin-x64@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.26.0.tgz#8131b174ca8cec04e2041e42eb8382afe31095c8"
+  integrity sha512-wbgkYDHcdWW+NqP2mnf2NOuEbOLzDblalrOWcPyY6+BRbVhliavon15UploG7PpBRQ2bZJnbmh8o3yLoBvDIHA==
+
+"@rollup/rollup-freebsd-arm64@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.26.0.tgz#550a0ebf5bea6ceee79dc2f75a0bcef7d660de2c"
+  integrity sha512-Y9vpjfp9CDkAG4q/uwuhZk96LP11fBz/bYdyg9oaHYhtGZp7NrbkQrj/66DYMMP2Yo/QPAsVHkV891KyO52fhg==
+
+"@rollup/rollup-freebsd-x64@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.26.0.tgz#51ca2e6d9ce72e63d5201607651732e5300a6f81"
+  integrity sha512-A/jvfCZ55EYPsqeaAt/yDAG4q5tt1ZboWMHEvKAH9Zl92DWvMIbnZe/f/eOXze65aJaaKbL+YeM0Hz4kLQvdwg==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.26.0.tgz#ae71d6aa81e702c4efb72c1a67a6a4e790267a1b"
+  integrity sha512-paHF1bMXKDuizaMODm2bBTjRiHxESWiIyIdMugKeLnjuS1TCS54MF5+Y5Dx8Ui/1RBPVRE09i5OUlaLnv8OGnA==
+
+"@rollup/rollup-linux-arm-musleabihf@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.26.0.tgz#6aa7baa5c39c095fa5f9804e283e126697e0342a"
+  integrity sha512-cwxiHZU1GAs+TMxvgPfUDtVZjdBdTsQwVnNlzRXC5QzIJ6nhfB4I1ahKoe9yPmoaA/Vhf7m9dB1chGPpDRdGXg==
+
+"@rollup/rollup-linux-arm64-gnu@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.26.0.tgz#2b06e147ca68c7729ca38e5c7a514d1b00f4d151"
+  integrity sha512-4daeEUQutGRCW/9zEo8JtdAgtJ1q2g5oHaoQaZbMSKaIWKDQwQ3Yx0/3jJNmpzrsScIPtx/V+1AfibLisb3AMQ==
+
+"@rollup/rollup-linux-arm64-musl@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.26.0.tgz#70f8cacb255800e4cad41bdbe447432354288909"
+  integrity sha512-eGkX7zzkNxvvS05ROzJ/cO/AKqNvR/7t1jA3VZDi2vRniLKwAWxUr85fH3NsvtxU5vnUUKFHKh8flIBdlo2b3Q==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.26.0.tgz#21aed3ef42518b7fe33f4037a14b0939a071cf75"
+  integrity sha512-Odp/lgHbW/mAqw/pU21goo5ruWsytP7/HCC/liOt0zcGG0llYWKrd10k9Fj0pdj3prQ63N5yQLCLiE7HTX+MYw==
+
+"@rollup/rollup-linux-riscv64-gnu@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.26.0.tgz#fe27eb8cbd3a6e0706459781c2463b624f785696"
+  integrity sha512-MBR2ZhCTzUgVD0OJdTzNeF4+zsVogIR1U/FsyuFerwcqjZGvg2nYe24SAHp8O5sN8ZkRVbHwlYeHqcSQ8tcYew==
+
+"@rollup/rollup-linux-s390x-gnu@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.26.0.tgz#80289a528dd333b0e277efd93bfa8e2cdd27e5eb"
+  integrity sha512-YYcg8MkbN17fMbRMZuxwmxWqsmQufh3ZJFxFGoHjrE7bv0X+T6l3glcdzd7IKLiwhT+PZOJCblpnNlz1/C3kGQ==
+
+"@rollup/rollup-linux-x64-gnu@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.26.0.tgz#9909570be5cb738c23858c94308d37dde363eb7e"
+  integrity sha512-ZuwpfjCwjPkAOxpjAEjabg6LRSfL7cAJb6gSQGZYjGhadlzKKywDkCUnJ+KEfrNY1jH5EEoSIKLCb572jSiglA==
+
+"@rollup/rollup-linux-x64-musl@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.26.0.tgz#371315e032497f7a46f64b4ebcd207313b7f6669"
+  integrity sha512-+HJD2lFS86qkeF8kNu0kALtifMpPCZU80HvwztIKnYwym3KnA1os6nsX4BGSTLtS2QVAGG1P3guRgsYyMA0Yhg==
+
+"@rollup/rollup-win32-arm64-msvc@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.26.0.tgz#f4b4e0747710ba287eb2e2a011538ee2ed7f74d3"
+  integrity sha512-WUQzVFWPSw2uJzX4j6YEbMAiLbs0BUysgysh8s817doAYhR5ybqTI1wtKARQKo6cGop3pHnrUJPFCsXdoFaimQ==
+
+"@rollup/rollup-win32-ia32-msvc@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.26.0.tgz#2eeabbc99342dafe04613a76c441be4ebcca49c3"
+  integrity sha512-D4CxkazFKBfN1akAIY6ieyOqzoOoBV1OICxgUblWxff/pSjCA2khXlASUx7mK6W1oP4McqhgcCsu6QaLj3WMWg==
+
+"@rollup/rollup-win32-x64-msvc@4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.26.0.tgz#a3ae3da434a4ba0785312e963ae4c1239470403a"
+  integrity sha512-2x8MO1rm4PGEP0xWbubJW5RtbNLk3puzAMaLQd3B3JHVw4KcHlmXcO+Wewx9zCoo7EUFiMlu/aZbCJ7VjMzAag==
+
+"@rushstack/node-core-library@5.9.0":
+  version "5.9.0"
+  resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-5.9.0.tgz#097213d518b29a9c28b46db9c2cc7968c67168f8"
+  integrity sha512-MMsshEWkTbXqxqFxD4gcIUWQOCeBChlGczdZbHfqmNZQFLHB3yWxDFSMHFUdu2/OB9NUk7Awn5qRL+rws4HQNg==
+  dependencies:
+    ajv "~8.13.0"
+    ajv-draft-04 "~1.0.0"
+    ajv-formats "~3.0.1"
+    fs-extra "~7.0.1"
+    import-lazy "~4.0.0"
+    jju "~1.4.0"
+    resolve "~1.22.1"
+    semver "~7.5.4"
+
+"@rushstack/rig-package@0.5.3":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@rushstack/rig-package/-/rig-package-0.5.3.tgz#ea4d8a3458540b1295500149c04e645f23134e5d"
+  integrity sha512-olzSSjYrvCNxUFZowevC3uz8gvKr3WTpHQ7BkpjtRpA3wK+T0ybep/SRUMfr195gBzJm5gaXw0ZMgjIyHqJUow==
+  dependencies:
+    resolve "~1.22.1"
+    strip-json-comments "~3.1.1"
+
+"@rushstack/terminal@0.14.2":
+  version "0.14.2"
+  resolved "https://registry.yarnpkg.com/@rushstack/terminal/-/terminal-0.14.2.tgz#cc34654990500e9413265e9fc03839fa3419c4c9"
+  integrity sha512-2fC1wqu1VCExKC0/L+0noVcFQEXEnoBOtCIex1TOjBzEDWcw8KzJjjj7aTP6mLxepG0XIyn9OufeFb6SFsa+sg==
+  dependencies:
+    "@rushstack/node-core-library" "5.9.0"
+    supports-color "~8.1.1"
+
+"@rushstack/ts-command-line@4.23.0":
+  version "4.23.0"
+  resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.23.0.tgz#d2517f9da17a2f7b8967cdb417c39edc25b432ba"
+  integrity sha512-jYREBtsxduPV6ptNq8jOKp9+yx0ld1Tb/Tkdnlj8gTjazl1sF3DwX2VbluyYrNd0meWIL0bNeer7WDf5tKFjaQ==
+  dependencies:
+    "@rushstack/terminal" "0.14.2"
+    "@types/argparse" "1.0.38"
+    argparse "~1.0.9"
+    string-argv "~0.3.1"
+
+"@shopify/admin-ui-icons@^0.12.0":
+  version "0.12.0"
+  resolved "https://npm.shopify.io/node/@shopify/admin-ui-icons/-/0.12.0/admin-ui-icons-0.12.0.tgz#5d61899904b3a68056b048df419f9355056d832c"
+  integrity sha512-78s4H1BICz0W53U0ChH1l7woiXUUYbnPrJbasCJUsw7FoUvct9e9/kdUVC1q+qIf42bfYzccSRX+Oz581leBzw==
+
 "@shopify/babel-preset@^24.1.0", "@shopify/babel-preset@^24.1.4":
   version "24.1.5"
   resolved "https://registry.npmjs.org/@shopify/babel-preset/-/babel-preset-24.1.5.tgz"
@@ -2041,6 +2343,11 @@
   resolved "https://registry.npmjs.org/@shopify/typescript-configs/-/typescript-configs-5.1.0.tgz"
   integrity sha512-RywGBTR+nQyJLxcrUcihPkHPIG3pIQI6i0YwMrM5rs9nWJ0+9A5HKEcboyGPLH+8V08EXGfFQ6H820O9ajyk4A==
 
+"@shopify/ui-api-design@^0.18.0":
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/@shopify/ui-api-design/-/ui-api-design-0.18.0.tgz#af3affb7b12f0f3debd747c6ed0ab1c1712abcef"
+  integrity sha512-5GxssVe7s2W+p+yPHLImDGZnGdSLS9G5vhvAM0zswOW+6sWKCe7gKvIF/GWJvyjlTTSbDxiuYsexMPUxnsSRVg==
+
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz"
@@ -2065,6 +2372,11 @@
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@types/argparse@1.0.38":
+  version "1.0.38"
+  resolved "https://registry.yarnpkg.com/@types/argparse/-/argparse-1.0.38.tgz#a81fd8606d481f873a3800c6ebae4f1d768a56a9"
+  integrity sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14", "@types/babel__core@^7.1.7":
   version "7.20.5"
   resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz"
@@ -2103,7 +2415,7 @@
   resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/estree@^1.0.0":
+"@types/estree@1.0.6", "@types/estree@^1.0.0":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
   integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
@@ -2356,6 +2668,73 @@
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@volar/language-core@2.4.10", "@volar/language-core@~2.4.1":
+  version "2.4.10"
+  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-2.4.10.tgz#7d57c29d27f7bce2fa7eb9f3a1fc053a3e28e53f"
+  integrity sha512-hG3Z13+nJmGaT+fnQzAkS0hjJRa2FCeqZt6Bd+oGNhUkQ+mTFsDETg5rqUTxyzIh5pSOGY7FHCWUS8G82AzLCA==
+  dependencies:
+    "@volar/source-map" "2.4.10"
+
+"@volar/source-map@2.4.10":
+  version "2.4.10"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-2.4.10.tgz#08cc505613f8e5d39af740e96cec5eb4553576d4"
+  integrity sha512-OCV+b5ihV0RF3A7vEvNyHPi4G4kFa6ukPmyVocmqm5QzOd8r5yAtiNvaPEjl8dNvgC/lj4JPryeeHLdXd62rWA==
+
+"@volar/typescript@^2.4.4":
+  version "2.4.10"
+  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-2.4.10.tgz#5d0d6476c98a3e0820731f5be36e859d48ed135f"
+  integrity sha512-F8ZtBMhSXyYKuBfGpYwqA5rsONnOwAVvjyE7KPYJ7wgZqo2roASqNWUnianOomJX5u1cxeRooHV59N0PhvEOgw==
+  dependencies:
+    "@volar/language-core" "2.4.10"
+    path-browserify "^1.0.1"
+    vscode-uri "^3.0.8"
+
+"@vue/compiler-core@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.12.tgz#bd70b7dabd12b0b6f31bc53418ba3da77994c437"
+  integrity sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==
+  dependencies:
+    "@babel/parser" "^7.25.3"
+    "@vue/shared" "3.5.12"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.0"
+
+"@vue/compiler-dom@^3.4.0":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz#456d631d11102535b7ee6fd954cf2c93158d0354"
+  integrity sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==
+  dependencies:
+    "@vue/compiler-core" "3.5.12"
+    "@vue/shared" "3.5.12"
+
+"@vue/compiler-vue2@^2.7.16":
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz#2ba837cbd3f1b33c2bc865fbe1a3b53fb611e249"
+  integrity sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
+"@vue/language-core@2.1.6":
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-2.1.6.tgz#b48186bdb9b3ef2b83e1f76d5b1ac357b3a7ed94"
+  integrity sha512-MW569cSky9R/ooKMh6xa2g1D0AtRKbL56k83dzus/bx//RDJk24RHWkMzbAlXjMdDNyxAaagKPRquBIxkxlCkg==
+  dependencies:
+    "@volar/language-core" "~2.4.1"
+    "@vue/compiler-dom" "^3.4.0"
+    "@vue/compiler-vue2" "^2.7.16"
+    "@vue/shared" "^3.4.0"
+    computeds "^0.0.1"
+    minimatch "^9.0.3"
+    muggle-string "^0.4.1"
+    path-browserify "^1.0.1"
+
+"@vue/shared@3.5.12", "@vue/shared@^3.4.0":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.12.tgz#f9e45b7f63f2c3f40d84237b1194b7f67de192e3"
+  integrity sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.6"
   resolved "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz"
@@ -2384,6 +2763,11 @@ acorn@^7.1.1:
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
+acorn@^8.14.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
 acorn@^8.2.4, acorn@^8.9.0:
   version "8.11.3"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz"
@@ -2396,6 +2780,18 @@ agent-base@6:
   dependencies:
     debug "4"
 
+ajv-draft-04@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ajv-draft-04/-/ajv-draft-04-1.0.0.tgz#3b64761b268ba0b9e668f0b41ba53fce0ad77fc8"
+  integrity sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==
+
+ajv-formats@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-3.0.1.tgz#3d5dc762bca17679c3c2ea7e90ad6b7532309578"
+  integrity sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==
+  dependencies:
+    ajv "^8.0.0"
+
 ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
@@ -2406,6 +2802,36 @@ ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^8.0.0:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
+  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    fast-uri "^3.0.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+
+ajv@~8.12.0:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
+  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
+ajv@~8.13.0:
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.13.0.tgz#a3939eaec9fb80d217ddf0c3376948c023f28c91"
+  integrity sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.4.1"
+
 ansi-colors@^4.1.1, ansi-colors@^4.1.3:
   version "4.1.3"
   resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz"
@@ -2455,7 +2881,7 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-argparse@^1.0.7:
+argparse@^1.0.7, argparse@~1.0.9:
   version "1.0.10"
   resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
@@ -2750,6 +3176,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^3.0.3, braces@~3.0.2:
   version "3.0.3"
   resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz"
@@ -3030,11 +3463,26 @@ commondir@^1.0.1:
   resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz"
   integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
+compare-versions@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-6.1.1.tgz#7af3cc1099ba37d244b3145a9af5201b629148a9"
+  integrity sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==
+
+computeds@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/computeds/-/computeds-0.0.1.tgz#215b08a4ba3e08a11ff6eee5d6d8d7166a97ce2e"
+  integrity sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+confbox@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.1.8.tgz#820d73d3b3c82d9bd910652c5d4d599ef8ff8b06"
+  integrity sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==
+
 constant-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz"
@@ -3177,6 +3625,11 @@ dataloader@^1.4.0:
   resolved "https://registry.npmjs.org/dataloader/-/dataloader-1.4.0.tgz"
   integrity sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==
 
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
+
 debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.5"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz"
@@ -3191,6 +3644,13 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@^4.3.6:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+  dependencies:
+    ms "^2.1.3"
+
 decamelize-keys@^1.1.0:
   version "1.1.1"
   resolved "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz"
@@ -3355,6 +3815,11 @@ enquirer@^2.3.0:
     ansi-colors "^4.1.1"
     strip-ansi "^6.0.1"
 
+entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
@@ -3483,6 +3948,35 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+esbuild@^0.21.3:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
+  integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==
+  optionalDependencies:
+    "@esbuild/aix-ppc64" "0.21.5"
+    "@esbuild/android-arm" "0.21.5"
+    "@esbuild/android-arm64" "0.21.5"
+    "@esbuild/android-x64" "0.21.5"
+    "@esbuild/darwin-arm64" "0.21.5"
+    "@esbuild/darwin-x64" "0.21.5"
+    "@esbuild/freebsd-arm64" "0.21.5"
+    "@esbuild/freebsd-x64" "0.21.5"
+    "@esbuild/linux-arm" "0.21.5"
+    "@esbuild/linux-arm64" "0.21.5"
+    "@esbuild/linux-ia32" "0.21.5"
+    "@esbuild/linux-loong64" "0.21.5"
+    "@esbuild/linux-mips64el" "0.21.5"
+    "@esbuild/linux-ppc64" "0.21.5"
+    "@esbuild/linux-riscv64" "0.21.5"
+    "@esbuild/linux-s390x" "0.21.5"
+    "@esbuild/linux-x64" "0.21.5"
+    "@esbuild/netbsd-x64" "0.21.5"
+    "@esbuild/openbsd-x64" "0.21.5"
+    "@esbuild/sunos-x64" "0.21.5"
+    "@esbuild/win32-arm64" "0.21.5"
+    "@esbuild/win32-ia32" "0.21.5"
+    "@esbuild/win32-x64" "0.21.5"
+
 escalade@^3.1.1, escalade@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz"
@@ -3896,6 +4390,11 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
+fast-uri@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.3.tgz#892a1c91802d5d7860de728f18608a0573142241"
+  integrity sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==
+
 fastq@^1.6.0:
   version "1.17.1"
   resolved "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz"
@@ -3994,7 +4493,7 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-fs-extra@^7.0.1:
+fs-extra@^7.0.1, fs-extra@~7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz"
   integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
@@ -4027,7 +4526,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
+fsevents@^2.3.2, fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
@@ -4230,6 +4729,11 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
 header-case@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz"
@@ -4319,6 +4823,11 @@ import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
+import-lazy@~4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
+  integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
+
 import-local@^3.0.2:
   version "3.1.0"
   resolved "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz"
@@ -5141,6 +5650,11 @@ jest@^27.2.4:
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
+jju@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/jju/-/jju-1.4.0.tgz#a3abe2718af241a2b2904f84a625970f389ae32a"
+  integrity sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -5219,6 +5733,11 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
@@ -5284,6 +5803,11 @@ kleur@^4.1.5:
   resolved "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
+kolorist@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
+  integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
+
 language-subtag-registry@^0.3.20:
   version "0.3.23"
   resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz"
@@ -5324,6 +5848,14 @@ load-yaml-file@^0.2.0:
     pify "^4.0.1"
     strip-bom "^3.0.0"
 
+local-pkg@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.5.0.tgz#093d25a346bae59a99f80e75f6e9d36d7e8c925c"
+  integrity sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==
+  dependencies:
+    mlly "^1.4.2"
+    pkg-types "^1.0.3"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz"
@@ -5361,7 +5893,7 @@ lodash.startcase@^4.4.0:
   resolved "https://registry.npmjs.org/lodash.startcase/-/lodash.startcase-4.4.0.tgz"
   integrity sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==
 
-lodash@^4.7.0:
+lodash@^4.7.0, lodash@~4.17.15:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5395,6 +5927,13 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
 magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz"
@@ -5402,7 +5941,7 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
-magic-string@^0.30.3:
+magic-string@^0.30.11, magic-string@^0.30.3:
   version "0.30.12"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.12.tgz#9eb11c9d072b9bcb4940a5b2c2e1a217e4ee1a60"
   integrity sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==
@@ -5505,6 +6044,20 @@ minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^9.0.3:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@~3.0.3:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.8.tgz#5e6a59bd11e2ab0de1cfb843eb2d82e546c321c1"
+  integrity sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==
+  dependencies:
+    brace-expansion "^1.1.7"
+
 minimist-options@^4.0.2:
   version "4.1.0"
   resolved "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz"
@@ -5524,11 +6077,36 @@ mixme@^0.5.1:
   resolved "https://registry.npmjs.org/mixme/-/mixme-0.5.10.tgz"
   integrity sha512-5H76ANWinB1H3twpJ6JY8uvAtpmFvHNArpilJAjXRKXSDDLPIMoZArw5SH0q9z+lLs8IrMw7Q2VWpWimFKFT1Q==
 
+mlly@^1.4.2, mlly@^1.7.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.7.3.tgz#d86c0fcd8ad8e16395eb764a5f4b831590cee48c"
+  integrity sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==
+  dependencies:
+    acorn "^8.14.0"
+    pathe "^1.1.2"
+    pkg-types "^1.2.1"
+    ufo "^1.5.4"
+
 ms@2.1.2, ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+muggle-string@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.4.1.tgz#3b366bd43b32f809dc20659534dd30e7c8a0d328"
+  integrity sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==
+
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
 natural-compare-lite@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz"
@@ -5830,6 +6408,11 @@ pascal-case@^3.1.2:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
+path-browserify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
+
 path-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz"
@@ -5868,16 +6451,31 @@ path-type@^4.0.0:
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+pathe@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
+  integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
+
 picocolors@^1.0.0, picocolors@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+picomatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
+
 pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz"
@@ -5909,6 +6507,15 @@ pkg-dir@^5.0.0:
   dependencies:
     find-up "^5.0.0"
 
+pkg-types@^1.0.3, pkg-types@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.2.1.tgz#6ac4e455a5bb4b9a6185c1c79abd544c901db2e5"
+  integrity sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==
+  dependencies:
+    confbox "^0.1.8"
+    mlly "^1.7.2"
+    pathe "^1.1.2"
+
 pluralize@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz"
@@ -5919,6 +6526,15 @@ possible-typed-array-names@^1.0.0:
   resolved "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz"
   integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
 
+postcss@^8.4.43:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 preferred-pm@^3.0.0:
   version "3.1.3"
   resolved "https://registry.npmjs.org/preferred-pm/-/preferred-pm-3.1.3.tgz"
@@ -6192,6 +6808,11 @@ require-directory@^2.1.1:
   resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz"
   integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
 
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz"
@@ -6224,7 +6845,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz"
   integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==
 
-resolve@^1.10.0, resolve@^1.10.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.4:
+resolve@^1.10.0, resolve@^1.10.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.4, resolve@~1.22.1, resolve@~1.22.2:
   version "1.22.8"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -6268,6 +6889,33 @@ rollup@^2.60.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@^4.20.0:
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.26.0.tgz#a3e5fb29d50953633a2fd4506da6448d93268944"
+  integrity sha512-ilcl12hnWonG8f+NxU6BlgysVA0gvY2l8N0R84S1HcINbW20bvwuCngJkkInV6LXhwRpucsW5k1ovDwEdBVrNg==
+  dependencies:
+    "@types/estree" "1.0.6"
+  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.26.0"
+    "@rollup/rollup-android-arm64" "4.26.0"
+    "@rollup/rollup-darwin-arm64" "4.26.0"
+    "@rollup/rollup-darwin-x64" "4.26.0"
+    "@rollup/rollup-freebsd-arm64" "4.26.0"
+    "@rollup/rollup-freebsd-x64" "4.26.0"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.26.0"
+    "@rollup/rollup-linux-arm-musleabihf" "4.26.0"
+    "@rollup/rollup-linux-arm64-gnu" "4.26.0"
+    "@rollup/rollup-linux-arm64-musl" "4.26.0"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.26.0"
+    "@rollup/rollup-linux-riscv64-gnu" "4.26.0"
+    "@rollup/rollup-linux-s390x-gnu" "4.26.0"
+    "@rollup/rollup-linux-x64-gnu" "4.26.0"
+    "@rollup/rollup-linux-x64-musl" "4.26.0"
+    "@rollup/rollup-win32-arm64-msvc" "4.26.0"
+    "@rollup/rollup-win32-ia32-msvc" "4.26.0"
+    "@rollup/rollup-win32-x64-msvc" "4.26.0"
+    fsevents "~2.3.2"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
@@ -6333,6 +6981,13 @@ semver@~7.0.0:
   resolved "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
+semver@~7.5.4:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
 sentence-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz"
@@ -6457,6 +7112,11 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
+source-map-js@^1.2.0, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-support@^0.5.16, source-map-support@^0.5.6:
   version "0.5.21"
   resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz"
@@ -6533,6 +7193,11 @@ stream-transform@^2.1.3:
   dependencies:
     mixme "^0.5.1"
 
+string-argv@~0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
+  integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz"
@@ -6640,7 +7305,7 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-strip-json-comments@^3.1.1:
+strip-json-comments@^3.1.1, strip-json-comments@~3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -6659,7 +7324,7 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0:
+supports-color@^8.0.0, supports-color@~8.1.1:
   version "8.1.1"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz"
   integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
@@ -6900,11 +7565,26 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
+typescript@5.4.2:
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372"
+  integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==
+
 typescript@^4.3.5, "typescript@^4.8.3 || ^5.0.0", typescript@^4.9.0:
   version "4.9.5"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
+typescript@^5.6.3:
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
+  integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
+
+ufo@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.5.4.tgz#16d6949674ca0c9e0fbbae1fa20a71d7b1ded754"
+  integrity sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"
@@ -6980,7 +7660,7 @@ upper-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
-uri-js@^4.2.2:
+uri-js@^4.2.2, uri-js@^4.4.1:
   version "4.4.1"
   resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
   integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
@@ -7019,6 +7699,37 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vite-plugin-dts@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-dts/-/vite-plugin-dts-4.3.0.tgz#f7365e4969f018ee47e6dda55adf051aa47083a7"
+  integrity sha512-LkBJh9IbLwL6/rxh0C1/bOurDrIEmRE7joC+jFdOEEciAFPbpEKOLSAr5nNh5R7CJ45cMbksTrFfy52szzC5eA==
+  dependencies:
+    "@microsoft/api-extractor" "^7.47.11"
+    "@rollup/pluginutils" "^5.1.0"
+    "@volar/typescript" "^2.4.4"
+    "@vue/language-core" "2.1.6"
+    compare-versions "^6.1.1"
+    debug "^4.3.6"
+    kolorist "^1.8.0"
+    local-pkg "^0.5.0"
+    magic-string "^0.30.11"
+
+vite@^5.4.11:
+  version "5.4.11"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.11.tgz#3b415cd4aed781a356c1de5a9ebafb837715f6e5"
+  integrity sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==
+  dependencies:
+    esbuild "^0.21.3"
+    postcss "^8.4.43"
+    rollup "^4.20.0"
+  optionalDependencies:
+    fsevents "~2.3.3"
+
+vscode-uri@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.8.tgz#1770938d3e72588659a172d0fd4642780083ff9f"
+  integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz"
@@ -7241,6 +7952,11 @@ yallist@^3.0.2:
   resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
 yargs-parser@^18.1.2, yargs-parser@^18.1.3:
   version "18.1.3"
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz"

From b288c1cae47c0198023d219aefefc6ce56ea46a6 Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Fri, 15 Nov 2024 11:19:29 -0500
Subject: [PATCH 05/12] Fix RenderExtension interface to support synchronous
 renders and make the clean up function optional

---
 packages/ui-extensions/src/surfaces/admin/components.ts   | 2 +-
 packages/ui-extensions/src/surfaces/admin/registration.ts | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts
index 51e2c961a8..221ca8523c 100644
--- a/packages/ui-extensions/src/surfaces/admin/components.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components.ts
@@ -12,7 +12,7 @@ import type {
 import type {MaybeAllValuesShorthandProperty} from '@shopify/ui-api-design/dist/shared/utils';
 
 export interface IconProps {
-  // type: IconType;
+  type: string;
   tone: Extract<
     IconProps$1['tone'],
     'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
diff --git a/packages/ui-extensions/src/surfaces/admin/registration.ts b/packages/ui-extensions/src/surfaces/admin/registration.ts
index 4860319bae..8e8f7edde7 100644
--- a/packages/ui-extensions/src/surfaces/admin/registration.ts
+++ b/packages/ui-extensions/src/surfaces/admin/registration.ts
@@ -1,5 +1,7 @@
 export interface RenderExtension<Api> {
-  (root: HTMLElement, api: Api): Promise<void | (() => void)>;
+  (root: HTMLElement, api: Api):
+    | (void | (() => void))
+    | Promise<void | (() => void)>;
 }
 
 export interface ExtensionRegistrationFunction<ExtensionTargets> {

From 70880959ca6b36ac90bef8d7807f4476c94b463c Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Tue, 19 Nov 2024 18:33:33 +0000
Subject: [PATCH 06/12] Update docs

---
 .../Badge/examples/basic-badge.example.tsx    |  10 +
 .../Box/examples/basic-box.example.tsx        |  10 +
 .../examples/basic-divider.example.tsx        |  18 +
 .../examples/basic-heading.example.tsx        |  10 +
 .../Icon/examples/basic-icon.example.tsx      |  10 +
 .../Text/examples/basic-text.example.tsx      |  20 +
 .../docs/surfaces/admin/create-doc-files.sh   |  12 +-
 .../src/surfaces/admin/components.ts          | 518 ++++++++++++++++--
 .../admin/components/Badge/Badge.doc.ts       |  42 ++
 .../Badge/examples/basic-badge.example.ts     |  10 +
 .../surfaces/admin/components/Box/Box.doc.ts  |  42 ++
 .../Box/examples/basic-box.example.ts         |   9 +
 .../admin/components/Divider/Divider.doc.ts   |  42 ++
 .../Divider/examples/basic-divider.example.ts |   5 +
 .../admin/components/Heading/Heading.doc.ts   |  42 ++
 .../admin/components/Heading/README.md        |   3 +
 .../Heading/examples/basic-heading.example.ts |   5 +
 .../admin/components/Icon/Icon.doc.ts         |  42 ++
 .../Icon/examples/basic-icon.example.ts       |   9 +
 .../admin/components/Text/Text.doc.ts         |  42 ++
 .../Text/examples/basic-text.example.ts       |   6 +
 21 files changed, 851 insertions(+), 56 deletions(-)
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Badge/examples/basic-badge.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Box/examples/basic-box.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Divider/examples/basic-divider.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Heading/README.md
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Heading/examples/basic-heading.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Icon/examples/basic-icon.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-text.example.ts

diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx
new file mode 100644
index 0000000000..319af1dfac
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx
@@ -0,0 +1,10 @@
+import {
+  reactExtension,
+  Badge,
+} from '@shopify/ui-extensions-react/admin';
+
+reactExtension('Playground', () => <App />);
+
+function App() {
+  return <Badge tone="info">Fulfilled</Badge>;
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx
new file mode 100644
index 0000000000..18ee89ba8b
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx
@@ -0,0 +1,10 @@
+import {
+  reactExtension,
+  Box,
+} from '@shopify/ui-extensions-react/admin';
+
+reactExtension('Playground', () => <App />);
+
+function App() {
+  return <Box padding="base">Box</Box>;
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx
new file mode 100644
index 0000000000..331b1b0eda
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  render,
+  Divider,
+  Stack,
+} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Stack direction="block" gap>
+      <>First text</>
+      <Divider />
+      <>Second Text</>
+    </Stack>
+  );
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx
new file mode 100644
index 0000000000..67f1979fc1
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx
@@ -0,0 +1,10 @@
+import {
+  reactExtension,
+  Heading,
+} from '@shopify/ui-extensions-react/admin';
+
+reactExtension('Playground', () => <App />);
+
+function App() {
+  return <Heading>Store name</Heading>;
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx
new file mode 100644
index 0000000000..7ec7d6114b
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx
@@ -0,0 +1,10 @@
+import {
+  reactExtension,
+  Icon,
+} from '@shopify/ui-extensions-react/admin';
+
+reactExtension('Playground', () => <App />);
+
+function App() {
+  return <Icon type="apps" />;
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx
new file mode 100644
index 0000000000..71aa4abfd3
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx
@@ -0,0 +1,20 @@
+import {
+  reactExtension,
+  Text,
+  Stack,
+} from '@shopify/ui-extensions-react/admin';
+
+reactExtension('Playground', () => <App />);
+
+function App() {
+  return (
+    <Stack
+      direction="block"
+      alignment="center"
+      gap
+    >
+      <Text fontWeight="bold">Name:</Text>
+      <Text>Jane Doe</Text>
+    </Stack>
+  );
+}
diff --git a/packages/ui-extensions/docs/surfaces/admin/create-doc-files.sh b/packages/ui-extensions/docs/surfaces/admin/create-doc-files.sh
index bd2cc105eb..5d49ef6edf 100755
--- a/packages/ui-extensions/docs/surfaces/admin/create-doc-files.sh
+++ b/packages/ui-extensions/docs/surfaces/admin/create-doc-files.sh
@@ -34,7 +34,7 @@ constructed_string="examples: {
     examples: [
 "
       for example_file in "${examples[@]}"; do
-        example_name=$(basename "$example_file" ".example.ts")
+        example_name=$(basename "$example_file" ".example.tsx")
         # Skip files starting with "basic-"
         if [[ $example_name == basic-* ]]; then
           continue
@@ -68,7 +68,7 @@ for folder in "$components_dir"/*; do
         componentName=$(basename "$folder")
         docs_file="${folder}/${componentName}.doc.ts"
 
-        if [ ! -f "$docs_file" ]; then
+                if [ ! -f "$docs_file" ]; then
           lowercaseComponentName=$(echo "$componentName" | tr '[:upper:]' '[:lower:]')
           cat > "$docs_file" << EOF
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
@@ -82,9 +82,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: '${componentName}Props',
+      title: '${componentName}',
       description: '',
-      type: '${componentName}Props',
+      type: '${componentName}',
     },
   ],
   category: 'Components',
@@ -96,12 +96,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/${componentName}/examples/basic-${componentName}.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/${componentName}/examples/basic-${lowercaseComponentName}.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-${componentName}.example.ts',
+          code: './examples/basic-${lowercaseComponentName}.example.ts',
           language: 'js',
         },
       ],
diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts
index 221ca8523c..fce616aeaf 100644
--- a/packages/ui-extensions/src/surfaces/admin/components.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components.ts
@@ -8,11 +8,456 @@ import type {
   StackProps as StackProps$1,
   TextProps as TextProps$1,
 } from '@shopify/ui-api-design';
-// import type {IconType} from '@shopify/admin-ui-icons';
 import type {MaybeAllValuesShorthandProperty} from '@shopify/ui-api-design/dist/shared/utils';
 
+type IconType =
+  | 'wrench'
+  | 'viewport-tall'
+  | 'viewport-short'
+  | 'viewport-narrow'
+  | 'wifi'
+  | 'work'
+  | 'watch'
+  | 'wallet'
+  | 'wand'
+  | 'upload'
+  | 'undo'
+  | 'viewport-wide'
+  | 'unknown-device'
+  | 'transaction'
+  | 'transfer-internal'
+  | 'transfer-in'
+  | 'transfer-out'
+  | 'transaction-fee-euro'
+  | 'transaction-fee-yen'
+  | 'transaction-fee-rupee'
+  | 'transaction-fee-dollar'
+  | 'transaction-fee-pound'
+  | 'thumbs-up'
+  | 'transfer'
+  | 'tip-jar'
+  | 'theme-template'
+  | 'thumbs-down'
+  | 'theme-store'
+  | 'theme'
+  | 'theme-edit'
+  | 'text-with-image'
+  | 'text'
+  | 'toggle-off'
+  | 'text-underline'
+  | 'text-title'
+  | 'text-in-columns'
+  | 'text-indent'
+  | 'text-italic'
+  | 'text-font'
+  | 'text-font-list'
+  | 'text-grammar'
+  | 'text-color'
+  | 'text-block'
+  | 'text-bold'
+  | 'toggle-on'
+  | 'text-align-right'
+  | 'text-align-center'
+  | 'text-align-left'
+  | 'tablet'
+  | 'team'
+  | 'store'
+  | 'tax'
+  | 'sun'
+  | 'store-online'
+  | 'store-import'
+  | 'stop-circle'
+  | 'target'
+  | 'store-managed'
+  | 'star-filled'
+  | 'status'
+  | 'sort-descending'
+  | 'text-in-rows'
+  | 'sort-ascending'
+  | 'sound'
+  | 'social-ad'
+  | 'smiley-neutral'
+  | 'status-active'
+  | 'sports'
+  | 'social-post'
+  | 'smiley-joy'
+  | 'smiley-happy'
+  | 'slideshow'
+  | 'shipping-label'
+  | 'shield-none'
+  | 'shield-person'
+  | 'smiley-sad'
+  | 'shield-check-mark'
+  | 'shopcodes'
+  | 'settings'
+  | 'share'
+  | 'send'
+  | 'search-resource'
+  | 'search-list'
+  | 'search'
+  | 'save'
+  | 'rotate-left'
+  | 'text-quote'
+  | 'search-recent'
+  | 'sandbox'
+  | 'replay'
+  | 'shield-pending'
+  | 'reward'
+  | 'remove-background'
+  | 'replace'
+  | 'return'
+  | 'receipt'
+  | 'receipt-yen'
+  | 'receipt-refund'
+  | 'receipt-rupee'
+  | 'reset'
+  | 'receipt-euro'
+  | 'refresh'
+  | 'redo'
+  | 'receipt-paid'
+  | 'question-circle'
+  | 'receipt-dollar'
+  | 'product-unavailable'
+  | 'receipt-pound'
+  | 'profile'
+  | 'product-return'
+  | 'product-add'
+  | 'print'
+  | 'product-list'
+  | 'product-reference'
+  | 'product-remove'
+  | 'price-list'
+  | 'product-cost'
+  | 'play'
+  | 'play-circle'
+  | 'point-of-sale'
+  | 'phone-out'
+  | 'pin'
+  | 'plan'
+  | 'phone-in'
+  | 'person-segment'
+  | 'personalized-text'
+  | 'payout-yen'
+  | 'person-remove'
+  | 'person-exit'
+  | 'payout'
+  | 'payout-pound'
+  | 'payout-dollar'
+  | 'person-lock'
+  | 'passkey'
+  | 'payout-euro'
+  | 'paint-brush-round'
+  | 'payout-rupee'
+  | 'payment-capture'
+  | 'paper-check'
+  | 'pagination-end'
+  | 'pause-circle'
+  | 'paint-brush-flat'
+  | 'page-reference'
+  | 'page-up'
+  | 'person-add'
+  | 'page-attachment'
+  | 'page-clock'
+  | 'page-down'
+  | 'package-returned'
+  | 'page-add'
+  | 'package'
+  | 'pagination-start'
+  | 'package-fulfilled'
+  | 'organization'
+  | 'page-heart'
+  | 'outdent'
+  | 'outgoing'
+  | 'order-repeat'
+  | 'package-on-hold'
+  | 'page-remove'
+  | 'order-draft'
+  | 'note'
+  | 'order-first'
+  | 'note-add'
+  | 'notification'
+  | 'moon'
+  | 'money'
+  | 'minimize'
+  | 'nature'
+  | 'metaobject-reference'
+  | 'menu'
+  | 'metaobject'
+  | 'metafields'
+  | 'metaobject-list'
+  | 'menu-vertical'
+  | 'mention'
+  | 'money-none'
+  | 'megaphone'
+  | 'orders-status'
+  | 'referral-code'
+  | 'measurement-volume'
+  | 'markets'
+  | 'markets-yen'
+  | 'measurement-size'
+  | 'markets-rupee'
+  | 'maximize'
+  | 'markets-euro'
+  | 'lock'
+  | 'location-none'
+  | 'live'
+  | 'list-numbered'
+  | 'link'
+  | 'layout-sidebar-right'
+  | 'list-bulleted'
+  | 'measurement-weight'
+  | 'layout-sidebar-left'
+  | 'media-receiver'
+  | 'layout-popup'
+  | 'layout-section'
+  | 'layout-footer'
+  | 'layout-rows-2'
+  | 'layout-columns-2'
+  | 'layout-column-1'
+  | 'layout-columns-3'
+  | 'layout-buy-button'
+  | 'layout-buy-button-vertical'
+  | 'layout-block'
+  | 'layout-buy-button-horizontal'
+  | 'language-translate'
+  | 'label-printer'
+  | 'keyboard-hide'
+  | 'keyboard'
+  | 'iq'
+  | 'inventory'
+  | 'key'
+  | 'layout-header'
+  | 'layout-logo-block'
+  | 'incentive'
+  | 'images'
+  | 'image'
+  | 'incoming'
+  | 'image-explore'
+  | 'image-with-text-overlay'
+  | 'image-none'
+  | 'image-add'
+  | 'import'
+  | 'image-alt'
+  | 'icons'
+  | 'identity-card'
+  | 'hashtag'
+  | 'globe-europe'
+  | 'heart'
+  | 'inventory-updated'
+  | 'hashtag-decimal'
+  | 'gift-card'
+  | 'gauge'
+  | 'globe-asia'
+  | 'games'
+  | 'forms'
+  | 'image-magic'
+  | 'food'
+  | 'forklift'
+  | 'folder'
+  | 'folder-up'
+  | 'folder-down'
+  | 'folder-remove'
+  | 'home'
+  | 'flip-vertical'
+  | 'folder-add'
+  | 'flag'
+  | 'file'
+  | 'flower'
+  | 'flip-horizontal'
+  | 'favicon'
+  | 'eyeglasses'
+  | 'eye-check-mark'
+  | 'filter'
+  | 'eye-first'
+  | 'export'
+  | 'exchange'
+  | 'eye-dropper'
+  | 'envelope-soft-pack'
+  | 'envelope'
+  | 'exit'
+  | 'enter'
+  | 'email-newsletter'
+  | 'email-follow-up'
+  | 'duplicate'
+  | 'drag-drop'
+  | 'domain-new'
+  | 'drag-handle'
+  | 'domain'
+  | 'dock-floating'
+  | 'discount-code'
+  | 'discount'
+  | 'dock-side'
+  | 'domain-redirect'
+  | 'dns-settings'
+  | 'delete'
+  | 'desktop'
+  | 'database-add'
+  | 'data-table'
+  | 'database-connect'
+  | 'domain-landing-page'
+  | 'cursor-option'
+  | 'cursor'
+  | 'data-presentation'
+  | 'crop'
+  | 'currency-convert'
+  | 'cursor-banner'
+  | 'credit-card-tap-chip'
+  | 'credit-card-reader-tap'
+  | 'credit-card'
+  | 'credit-card-secure'
+  | 'credit-card-reader-chip'
+  | 'credit-card-cancel'
+  | 'credit-card-reader'
+  | 'database'
+  | 'credit-card-percent'
+  | 'corner-pill'
+  | 'corner-round'
+  | 'content'
+  | 'connect'
+  | 'contract'
+  | 'confetti'
+  | 'rotate-right'
+  | 'menu-horizontal'
+  | 'color-none'
+  | 'collection-list'
+  | 'code'
+  | 'collection-featured'
+  | 'compass'
+  | 'compose'
+  | 'corner-square'
+  | 'code-add'
+  | 'clipboard'
+  | 'color'
+  | 'clipboard-check'
+  | 'chevron-right'
+  | 'chevron-up-circle'
+  | 'chevron-right-circle'
+  | 'chevron-down-circle'
+  | 'circle'
+  | 'clipboard-checklist'
+  | 'chevron-left'
+  | 'checkbox'
+  | 'chat'
+  | 'collection-reference'
+  | 'chevron-left-circle'
+  | 'chart-vertical'
+  | 'chat-referral'
+  | 'chart-stacked'
+  | 'chart-line'
+  | 'chart-horizontal'
+  | 'chart-popular'
+  | 'chart-histogram-second-last'
+  | 'chart-histogram-last'
+  | 'chart-histogram-flat'
+  | 'chart-funnel'
+  | 'chart-histogram-full'
+  | 'chart-histogram-first'
+  | 'chart-cohort'
+  | 'chart-histogram-growth'
+  | 'categories'
+  | 'chart-histogram-first-last'
+  | 'channels'
+  | 'cash-pound'
+  | 'chart-donut'
+  | 'cash-yen'
+  | 'cash-dollar'
+  | 'catalog-product'
+  | 'cart-up'
+  | 'cart-discount'
+  | 'cart-sale'
+  | 'cash-rupee'
+  | 'cart'
+  | 'cart-down'
+  | 'cart-abandoned'
+  | 'caret-down'
+  | 'camera'
+  | 'camera-flip'
+  | 'caret-up'
+  | 'calendar-time'
+  | 'calculator'
+  | 'button'
+  | 'bullet'
+  | 'button-press'
+  | 'bug'
+  | 'book'
+  | 'book-open'
+  | 'cash-euro'
+  | 'blog'
+  | 'bank'
+  | 'automation'
+  | 'arrows-out-horizontal'
+  | 'backspace'
+  | 'bill'
+  | 'arrow-up'
+  | 'arrow-right'
+  | 'arrow-right-circle'
+  | 'barcode'
+  | 'arrow-up-circle'
+  | 'arrow-left'
+  | 'arrow-left-circle'
+  | 'arrow-down-circle'
+  | 'app-extension'
+  | 'alert-diamond'
+  | 'arrow-down'
+  | 'alert-location'
+  | 'airplane'
+  | 'affiliate'
+  | 'adjust'
+  | 'arrows-in-horizontal'
+  | 'x'
+  | 'x-circle'
+  | 'variant'
+  | 'view'
+  | 'star'
+  | 'sort'
+  | 'select'
+  | 'product'
+  | 'plus-circle'
+  | 'plus'
+  | 'phone'
+  | 'person'
+  | 'payment'
+  | 'page'
+  | 'order'
+  | 'order-unfulfilled'
+  | 'order-fulfilled'
+  | 'mobile'
+  | 'microphone'
+  | 'minus'
+  | 'minus-circle'
+  | 'location'
+  | 'lightbulb'
+  | 'language'
+  | 'incomplete'
+  | 'info'
+  | 'in-progress'
+  | 'hide'
+  | 'globe'
+  | 'external'
+  | 'email'
+  | 'edit'
+  | 'enabled'
+  | 'disabled'
+  | 'delivery'
+  | 'collection'
+  | 'clock'
+  | 'chevron-up'
+  | 'check'
+  | 'check-circle'
+  | 'chevron-down'
+  | 'calendar-check'
+  | 'calendar'
+  | 'blank'
+  | 'archive'
+  | 'alert-triangle'
+  | 'alert-circle'
+  | 'alert-bubble'
+  | 'attachment'
+  | 'merge'
+  | 'arrow-up-right'
+  | 'apps';
 export interface IconProps {
-  type: string;
+  type: IconType;
   tone: Extract<
     IconProps$1['tone'],
     'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
@@ -24,7 +469,7 @@ export interface IconProps {
 export interface BadgeProps {
   accessibilityLabel: NonNullable<BadgeProps$1['accessibilityLabel']>;
   color: Extract<BadgeProps$1['color'], 'base' | 'strong'>;
-  // icon: IconProps['type'] | '';
+  icon: IconProps['type'] | '';
   size: Extract<BadgeProps$1['size'], 'base' | 'large' | 'large-100'>;
   tone: Extract<
     BadgeProps$1['tone'],
@@ -34,55 +479,28 @@ export interface BadgeProps {
 
 declare const tagName$7 = 'shopify-badge';
 
-export interface ActivationEventEsque {
-  shiftKey: boolean;
-  metaKey: boolean;
-  ctrlKey: boolean;
-  button: number;
-}
-export interface ClickOptions {
-  /**
-   * The event you want to influence the synthetic click.
-   */
-  sourceEvent?: ActivationEventEsque;
-}
 /**
  * Base class for creating custom elements with Preact.
  * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
  */
 declare const BaseClass: typeof globalThis.HTMLElement;
-declare abstract class PreactCustomElement extends BaseClass {
-  #private;
-  static get observedAttributes(): string[];
-  attributeChangedCallback(name: string): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  /**
-   * Queue a run of the render function.
-   * You shouldn't need to call this manually - it should be handled by changes to @property values.
-   */
-  queueRender(): void;
-  /**
-   * Internal function to add styles for legacy browsers.
-   *
-   * @private
-   */
-  _addLegacyStyleComponent(style: string): void;
-  /**
-   * Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.
-   *
-   * For example, if the `sourceEvent` was a middle click, or has particular keys held down,
-   * components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
-   *
-   * @param options
-   */
-  click({sourceEvent}?: ClickOptions): void;
-}
 
-declare class Badge extends PreactCustomElement implements BadgeProps {
+declare abstract class CustomElement extends BaseClass {}
+
+interface CustomElement
+  extends Pick<
+    globalThis.HTMLElement,
+    | 'addEventListener'
+    | 'removeEventListener'
+    | 'onclick'
+    | 'onfocus'
+    | 'onblur'
+  > {}
+
+declare class Badge extends CustomElement implements BadgeProps {
   accessor accessibilityLabel: BadgeProps['accessibilityLabel'];
   accessor color: BadgeProps['color'];
-  // accessor icon: BadgeProps['icon'];
+  accessor icon: BadgeProps['icon'];
   accessor size: BadgeProps['size'];
   accessor tone: BadgeProps['tone'];
 }
@@ -147,7 +565,7 @@ export interface BoxProps {
 
 declare const tagName$6 = 'shopify-box';
 
-declare class BoxElement extends PreactCustomElement implements BoxProps {
+declare class BoxElement extends CustomElement implements BoxProps {
   accessor accessibilityRole: BoxProps['accessibilityRole'];
   accessor background: BoxProps['background'];
   accessor blockSize: BoxProps['blockSize'];
@@ -186,7 +604,7 @@ export interface DividerProps {
 
 declare const tagName$5 = 'shopify-divider';
 
-declare class Divider extends PreactCustomElement implements DividerProps {
+declare class Divider extends CustomElement implements DividerProps {
   direction: DividerProps['direction'];
   color: DividerProps['color'];
 }
@@ -205,7 +623,7 @@ export interface HeadingProps {
 
 declare const tagName$4 = 'shopify-heading';
 
-declare class Heading extends PreactCustomElement implements HeadingProps {
+declare class Heading extends CustomElement implements HeadingProps {
   accessor accessibilityRole: HeadingProps['accessibilityRole'];
   accessor lineClamp: HeadingProps['lineClamp'];
   accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];
@@ -218,7 +636,7 @@ declare global {
 
 declare const tagName$3 = 'shopify-icon';
 
-declare class Icon extends PreactCustomElement implements IconProps {
+declare class Icon extends CustomElement implements IconProps {
   accessor color: IconProps['color'];
   accessor tone: IconProps['tone'];
   accessor type: IconProps['type'];
@@ -240,7 +658,7 @@ export interface LinkProps {
 
 declare const tagName$2 = 'shopify-link';
 
-declare class Link extends PreactCustomElement implements LinkProps {
+declare class Link extends CustomElement implements LinkProps {
   accessor tone: LinkProps['tone'];
   accessor accessibilityLabel: LinkProps['accessibilityLabel'];
   accessor href: LinkProps['href'];
@@ -299,7 +717,7 @@ export interface TextProps
 
 declare const tagName = 'shopify-text';
 
-declare class Text extends PreactCustomElement implements TextProps {
+declare class Text extends CustomElement implements TextProps {
   display: TextProps['display'];
   fontVariantNumeric: TextProps['fontVariantNumeric'];
   color: TextProps['color'];
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts
new file mode 100644
index 0000000000..ac24c4b1b4
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts
@@ -0,0 +1,42 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Badge',
+  description: 'Badge is used to ...',
+  requires: '',
+  thumbnail: 'badge-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'Badge',
+      description:
+        'Use this component to inform merchants of the status of an object or of an action that’s been taken.',
+      type: 'Badge',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Feedback',
+  defaultExample: {
+    image: 'badge-default.png',
+    codeblock: {
+      title: 'TODO: add example title',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-badge.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [],
+};
+
+export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Badge/examples/basic-badge.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Badge/examples/basic-badge.example.ts
new file mode 100644
index 0000000000..fe6d962d4c
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Badge/examples/basic-badge.example.ts
@@ -0,0 +1,10 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+extension('Playground', (root) => {
+  const badge = document.createElement('shopify-badge');
+
+  badge.tone = 'info';
+  badge.textContent = 'Fulfilled';
+
+  root.appendChild(badge);
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts
new file mode 100644
index 0000000000..24ed100169
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts
@@ -0,0 +1,42 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Box',
+  description:
+    'This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.',
+  requires: '',
+  thumbnail: 'box-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'Box',
+      description: '',
+      type: 'Box',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Feedback',
+  defaultExample: {
+    image: 'box-default.png',
+    codeblock: {
+      title: 'TODO: add example title',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-box.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [],
+};
+
+export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Box/examples/basic-box.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Box/examples/basic-box.example.ts
new file mode 100644
index 0000000000..207f1fdb9b
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Box/examples/basic-box.example.ts
@@ -0,0 +1,9 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+extension('Playground', (root) => {
+  const box = document.createElement('shopify-box');
+
+  box.padding = 'base';
+
+  root.appendChild(box);
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts
new file mode 100644
index 0000000000..5a262ab7e7
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts
@@ -0,0 +1,42 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Divider',
+  description:
+    'Use this to create a clear visual separation between different elements in your user interface.',
+  requires: '',
+  thumbnail: 'divider-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'Divider',
+      description: '',
+      type: 'Divider',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Feedback',
+  defaultExample: {
+    image: 'divider-default.png',
+    codeblock: {
+      title: 'TODO: add example title',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-divider.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [],
+};
+
+export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Divider/examples/basic-divider.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Divider/examples/basic-divider.example.ts
new file mode 100644
index 0000000000..e906fe20f2
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Divider/examples/basic-divider.example.ts
@@ -0,0 +1,5 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+extension('Playground', (root) => {
+  root.innerHTML = 'First Text<shopify-divider/>Second Text';
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts
new file mode 100644
index 0000000000..faa11e157a
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts
@@ -0,0 +1,42 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Heading',
+  description:
+    "Use this to display a title. It's similar to the h1-h6 tags in HTML",
+  requires: '',
+  thumbnail: 'heading-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'Heading',
+      description: '',
+      type: 'Heading',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Feedback',
+  defaultExample: {
+    image: 'heading-default.png',
+    codeblock: {
+      title: 'TODO: add example title',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-heading.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [],
+};
+
+export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Heading/README.md b/packages/ui-extensions/src/surfaces/admin/components/Heading/README.md
new file mode 100644
index 0000000000..d6f45174c7
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Heading/README.md
@@ -0,0 +1,3 @@
+# Heading
+
+Headings communicate the organization of the content on the page.
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Heading/examples/basic-heading.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Heading/examples/basic-heading.example.ts
new file mode 100644
index 0000000000..41dcdc1d63
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Heading/examples/basic-heading.example.ts
@@ -0,0 +1,5 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+extension('Playground', (root) => {
+  root.innerHTML = '<shopify-heading>Headings are cool</shopify-heading>';
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts
new file mode 100644
index 0000000000..a6542dfdb1
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts
@@ -0,0 +1,42 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Icon',
+  description:
+    'This component renders an icon from a predefined list. Choose the one that suits your needs.',
+  requires: '',
+  thumbnail: 'icon-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'Icon',
+      description: '',
+      type: 'Icon',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Feedback',
+  defaultExample: {
+    image: 'icon-default.png',
+    codeblock: {
+      title: 'TODO: add example title',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-icon.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [],
+};
+
+export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/examples/basic-icon.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Icon/examples/basic-icon.example.ts
new file mode 100644
index 0000000000..cf62fd8550
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Icon/examples/basic-icon.example.ts
@@ -0,0 +1,9 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+extension('Playground', (root) => {
+  const icon = document.createElement('shopify-icon');
+
+  icon.type = 'apps';
+
+  root.appendChild(icon);
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts
new file mode 100644
index 0000000000..d5f24d04bf
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts
@@ -0,0 +1,42 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Text',
+  description:
+    'This component renders text. Remember, you can also add your own styling.',
+  requires: '',
+  thumbnail: 'text-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'Text',
+      description: '',
+      type: 'Text',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Feedback',
+  defaultExample: {
+    image: 'text-default.png',
+    codeblock: {
+      title: 'TODO: add example title',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-text.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [],
+};
+
+export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-text.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-text.example.ts
new file mode 100644
index 0000000000..6b864053c3
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-text.example.ts
@@ -0,0 +1,6 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+extension('Playground', (root) => {
+  root.innerHTML =
+    '<shopify-stack direction="block" gap alignment="center"><shopify-text type="strong">Name:</shopify-text><shopify-text>Jane Doe</shopify-text></shopify-stack>';
+});

From 4d884708a760a33263e23b80b9f9f4a3673fc05a Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Tue, 19 Nov 2024 15:03:56 -0500
Subject: [PATCH 07/12] wip

---
 .../src/surfaces/admin/components.ts          | 452 +++++++++++++++---
 1 file changed, 390 insertions(+), 62 deletions(-)

diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts
index fce616aeaf..67c8204d4d 100644
--- a/packages/ui-extensions/src/surfaces/admin/components.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components.ts
@@ -2,15 +2,26 @@ import type {
   IconProps as IconProps$1,
   BadgeProps as BadgeProps$1,
   BoxProps as BoxProps$1,
+  ButtonProps as ButtonProps$1,
+  TextFieldProps,
+  CheckboxProps as CheckboxProps$1,
   DividerProps as DividerProps$1,
   HeadingProps as HeadingProps$1,
+  ImageProps as ImageProps$1,
   LinkProps as LinkProps$1,
+  OptionProps,
+  OptionGroupProps,
+  ParagraphProps as ParagraphProps$1,
+  SectionProps as SectionProps$1,
+  SelectProps,
+  SpinnerProps as SpinnerProps$1,
   StackProps as StackProps$1,
   TextProps as TextProps$1,
 } from '@shopify/ui-api-design';
 import type {MaybeAllValuesShorthandProperty} from '@shopify/ui-api-design/dist/shared/utils';
+import type {InteractionProps} from '@shopify/ui-api-design/dist/shared/pressable';
 
-type IconType =
+export type IconType =
   | 'wrench'
   | 'viewport-tall'
   | 'viewport-short'
@@ -456,8 +467,17 @@ type IconType =
   | 'merge'
   | 'arrow-up-right'
   | 'apps';
+
+/**
+ * Base class for creating custom elements with Preact.
+ * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
+ * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
+ */
+declare const BaseClass: typeof globalThis.HTMLElement;
+declare abstract class PreactCustomElement extends BaseClass {}
+
 export interface IconProps {
-  type: IconType;
+  type: '' | IconType;
   tone: Extract<
     IconProps$1['tone'],
     'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
@@ -477,27 +497,9 @@ export interface BadgeProps {
   >;
 }
 
-declare const tagName$7 = 'shopify-badge';
-
-/**
- * Base class for creating custom elements with Preact.
- * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
- */
-declare const BaseClass: typeof globalThis.HTMLElement;
-
-declare abstract class CustomElement extends BaseClass {}
-
-interface CustomElement
-  extends Pick<
-    globalThis.HTMLElement,
-    | 'addEventListener'
-    | 'removeEventListener'
-    | 'onclick'
-    | 'onfocus'
-    | 'onblur'
-  > {}
+declare const tagName$g = 'shopify-badge';
 
-declare class Badge extends CustomElement implements BadgeProps {
+declare class Badge extends PreactCustomElement implements BadgeProps {
   accessor accessibilityLabel: BadgeProps['accessibilityLabel'];
   accessor color: BadgeProps['color'];
   accessor icon: BadgeProps['icon'];
@@ -505,14 +507,14 @@ declare class Badge extends CustomElement implements BadgeProps {
   accessor tone: BadgeProps['tone'];
 }
 declare global {
-  export interface HTMLElementTagNameMap {
-    [tagName$7]: Badge;
+  interface HTMLElementTagNameMap {
+    [tagName$g]: Badge;
   }
 }
 
-export type MakeResponsive<T> = T | `@media${string}`;
+type MakeResponsive<T> = T | `@media${string}`;
 
-export type AlignedBox = Required<BoxProps$1>;
+type AlignedBox = Required<BoxProps$1>;
 export interface BoxProps {
   accessibilityRole: AlignedBox['accessibilityRole'];
   background: Extract<
@@ -563,9 +565,7 @@ export interface BoxProps {
   display: AlignedBox['display'];
 }
 
-declare const tagName$6 = 'shopify-box';
-
-declare class BoxElement extends CustomElement implements BoxProps {
+declare class BoxElement extends PreactCustomElement implements BoxProps {
   accessor accessibilityRole: BoxProps['accessibilityRole'];
   accessor background: BoxProps['background'];
   accessor blockSize: BoxProps['blockSize'];
@@ -590,10 +590,167 @@ declare class BoxElement extends CustomElement implements BoxProps {
   accessor display: BoxProps['display'];
 }
 
+declare const tagName$f = 'shopify-box';
+
 declare class Box extends BoxElement implements BoxProps {}
 declare global {
-  export interface HTMLElementTagNameMap {
-    [tagName$6]: Box;
+  interface HTMLElementTagNameMap {
+    [tagName$f]: Box;
+  }
+}
+
+type ButtonOnlyProps = Extract<
+  ButtonProps$1,
+  {
+    type?: unknown;
+  }
+>;
+type ButtonBaseProps = Required<
+  Pick<
+    ButtonOnlyProps,
+    | 'accessibilityLabel'
+    | 'disabled'
+    | 'activateAction'
+    | 'activateTarget'
+    | 'lang'
+    | 'loading'
+    | 'type'
+    | 'variant'
+    | 'target'
+    | 'href'
+    | 'download'
+  >
+>;
+export interface ButtonProps extends ButtonBaseProps {
+  tone: Extract<ButtonProps$1['tone'], 'neutral' | 'critical' | 'auto'>;
+  icon: IconProps['type'];
+}
+
+declare const tagName$e = 'shopify-button';
+
+export interface SharedProps$3
+  extends Required<Pick<InteractionProps, 'activateTarget'>> {
+  activateAction: Extract<
+    InteractionProps['activateAction'],
+    'show' | 'hide' | 'toggle' | 'auto'
+  >;
+}
+declare class PreactOverlayControl
+  extends PreactCustomElement
+  implements SharedProps$3
+{
+  accessor activateTarget: SharedProps$3['activateTarget'];
+  accessor activateAction: SharedProps$3['activateAction'];
+}
+
+declare class Button extends PreactOverlayControl implements ButtonProps {
+  accessor disabled: ButtonProps['disabled'];
+  accessor icon: ButtonProps['icon'];
+  accessor loading: ButtonProps['loading'];
+  accessor variant: ButtonProps['variant'];
+  accessor tone: ButtonProps['tone'];
+  accessor lang: ButtonProps['lang'];
+  accessor target: ButtonProps['target'];
+  accessor href: ButtonProps['href'];
+  accessor download: ButtonProps['download'];
+  accessor onclick: EventListener | null;
+  accessor onblur: EventListener | null;
+  accessor onfocus: EventListener | null;
+  accessor type: ButtonProps['type'];
+  accessor accessibilityLabel: ButtonProps['accessibilityLabel'];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$e]: Button;
+  }
+}
+
+type InputBaseProps = Required<
+  Pick<
+    TextFieldProps,
+    | 'disabled'
+    | 'error'
+    | 'label'
+    | 'name'
+    | 'placeholder'
+    | 'readOnly'
+    | 'required'
+    | 'value'
+    | 'id'
+  >
+> & {
+  defaultValue: string;
+};
+type InputReactProps = Pick<
+  TextFieldProps,
+  'onChange' | 'onFocus' | 'onInput' | 'onBlur'
+>;
+
+declare const internals: unique symbol;
+declare class PreactInputElement
+  extends PreactCustomElement
+  implements
+    Pick<
+      InputBaseProps,
+      | 'defaultValue'
+      | 'disabled'
+      | 'error'
+      | 'label'
+      | 'name'
+      | 'required'
+      | 'value'
+    >
+{
+  #private;
+  static formAssociated: boolean;
+  [internals]: ElementInternals;
+  accessor onchange: EventListener | null;
+  accessor oninput: EventListener | null;
+  accessor onfocus: EventListener | null;
+  accessor onblur: EventListener | null;
+  accessor name: InputBaseProps['name'];
+  accessor label: InputBaseProps['label'];
+  accessor error: InputBaseProps['error'];
+  accessor defaultValue: InputBaseProps['defaultValue'];
+  get value(): InputBaseProps['value'];
+  set value(value: InputBaseProps['value']);
+  accessor disabled: InputBaseProps['disabled'];
+  accessor required: InputBaseProps['required'];
+}
+
+export interface CheckboxProps
+  extends Required<
+    Pick<
+      CheckboxProps$1,
+      | 'accessibilityLabel'
+      | 'checked'
+      | 'details'
+      | 'disabled'
+      | 'error'
+      | 'id'
+      | 'indeterminate'
+      | 'label'
+      | 'name'
+      | 'required'
+      | 'value'
+    >
+  > {}
+
+declare const tagName$d = 'shopify-checkbox';
+
+declare class Checkbox extends PreactInputElement implements CheckboxProps {
+  #private;
+  accessor indeterminate: CheckboxProps['indeterminate'];
+  get checked(): boolean;
+  set checked(checked: CheckboxProps['checked']);
+  accessor details: CheckboxProps['details'];
+  accessor accessibilityLabel: CheckboxProps['accessibilityLabel'];
+  get value(): string;
+  set value(value: string);
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$d]: Checkbox;
   }
 }
 
@@ -602,15 +759,15 @@ export interface DividerProps {
   color: Extract<DividerProps$1['color'], 'subdued' | 'base' | 'strong'>;
 }
 
-declare const tagName$5 = 'shopify-divider';
+declare const tagName$c = 'shopify-divider';
 
-declare class Divider extends CustomElement implements DividerProps {
-  direction: DividerProps['direction'];
-  color: DividerProps['color'];
+declare class Divider extends PreactCustomElement implements DividerProps {
+  accessor direction: DividerProps['direction'];
+  accessor color: DividerProps['color'];
 }
 declare global {
-  export interface HTMLElementTagNameMap {
-    [tagName$5]: Divider;
+  interface HTMLElementTagNameMap {
+    [tagName$c]: Divider;
   }
 }
 
@@ -621,34 +778,58 @@ export interface HeadingProps {
   lineClamp: RequiredHeadingProps['lineClamp'];
 }
 
-declare const tagName$4 = 'shopify-heading';
+declare const tagName$b = 'shopify-heading';
 
-declare class Heading extends CustomElement implements HeadingProps {
+declare class Heading extends PreactCustomElement implements HeadingProps {
   accessor accessibilityRole: HeadingProps['accessibilityRole'];
   accessor lineClamp: HeadingProps['lineClamp'];
   accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];
 }
 declare global {
-  export interface HTMLElementTagNameMap {
-    [tagName$4]: Heading;
+  interface HTMLElementTagNameMap {
+    [tagName$b]: Heading;
   }
 }
 
-declare const tagName$3 = 'shopify-icon';
+declare const tagName$a = 'shopify-icon';
 
-declare class Icon extends CustomElement implements IconProps {
+declare class Icon extends PreactCustomElement implements IconProps {
   accessor color: IconProps['color'];
   accessor tone: IconProps['tone'];
   accessor type: IconProps['type'];
   accessor size: IconProps['size'];
 }
 declare global {
-  export interface HTMLElementTagNameMap {
-    [tagName$3]: Icon;
+  interface HTMLElementTagNameMap {
+    [tagName$a]: Icon;
   }
 }
 
-export type RequiredLinkProps = Required<LinkProps$1>;
+export interface ImageProps {
+  accessibilityRole: Extract<
+    ImageProps$1['accessibilityRole'],
+    'img' | 'presentation' | 'none'
+  >;
+  alt: NonNullable<ImageProps$1['alt']>;
+  loading: Extract<ImageProps$1['loading'], 'eager' | 'lazy'>;
+  src: NonNullable<ImageProps$1['src']>;
+}
+
+declare const tagName$9 = 'shopify-image';
+
+declare class Image extends PreactCustomElement implements ImageProps {
+  accessor src: ImageProps['src'];
+  accessor alt: ImageProps['alt'];
+  accessor loading: ImageProps['loading'];
+  accessor accessibilityRole: ImageProps['accessibilityRole'];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$9]: Image;
+  }
+}
+
+type RequiredLinkProps = Required<LinkProps$1>;
 export interface LinkProps {
   tone: Extract<RequiredLinkProps['tone'], 'auto' | 'neutral' | 'critical'>;
   accessibilityLabel: RequiredLinkProps['accessibilityLabel'];
@@ -656,21 +837,150 @@ export interface LinkProps {
   target: RequiredLinkProps['target'];
 }
 
-declare const tagName$2 = 'shopify-link';
+declare const tagName$8 = 'shopify-link';
 
-declare class Link extends CustomElement implements LinkProps {
+declare class Link extends PreactCustomElement implements LinkProps {
   accessor tone: LinkProps['tone'];
   accessor accessibilityLabel: LinkProps['accessibilityLabel'];
   accessor href: LinkProps['href'];
   accessor target: LinkProps['target'];
 }
 declare global {
-  export interface HTMLElementTagNameMap {
-    [tagName$2]: Link;
+  interface HTMLElementTagNameMap {
+    [tagName$8]: Link;
+  }
+}
+
+declare const tagName$7 = 'shopify-option';
+
+export interface SharedProps$2
+  extends Required<Pick<OptionProps, 'disabled' | 'value'>> {}
+declare class Option extends PreactCustomElement implements SharedProps$2 {
+  accessor value: SharedProps$2['value'];
+  accessor disabled: SharedProps$2['disabled'];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$7]: Option;
+  }
+}
+
+declare const tagName$6 = 'shopify-option-group';
+
+interface SharedProps$1
+  extends Required<Pick<OptionGroupProps, 'disabled' | 'label'>> {}
+declare class OptionGroup extends PreactCustomElement implements SharedProps$1 {
+  accessor disabled: SharedProps$1['disabled'];
+  accessor label: SharedProps$1['label'];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$6]: OptionGroup;
+  }
+}
+
+interface ParagraphProps
+  extends Required<
+    Pick<
+      ParagraphProps$1,
+      'lineClamp' | 'accessibilityVisibility' | 'fontVariantNumeric' | 'tone'
+    >
+  > {
+  color: Extract<ParagraphProps$1['color'], 'base' | 'subdued'>;
+}
+
+declare const tagName$5 = 'shopify-paragraph';
+
+declare class Paragraph extends PreactCustomElement implements ParagraphProps {
+  accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];
+  accessor lineClamp: ParagraphProps['lineClamp'];
+  accessor tone: ParagraphProps['tone'];
+  accessor color: ParagraphProps['color'];
+  accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$5]: Paragraph;
+  }
+}
+
+type RequiredSectionProps = Required<SectionProps$1>;
+export interface SectionProps {
+  accessibilityLabel: RequiredSectionProps['accessibilityLabel'];
+  heading: RequiredSectionProps['heading'];
+  padding: RequiredSectionProps['padding'];
+}
+
+declare const tagName$4 = 'shopify-section';
+
+declare class Section extends PreactCustomElement implements SectionProps {
+  #private;
+  connectedCallback(): void;
+  accessor accessibilityLabel: SectionProps['accessibilityLabel'];
+  accessor heading: SectionProps['heading'];
+  accessor padding: SectionProps['padding'];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$4]: Section;
+  }
+}
+
+declare const tagName$3 = 'shopify-select';
+
+declare class PreactInputFieldElement
+  extends PreactInputElement
+  implements InputBaseProps
+{
+  accessor placeholder: InputBaseProps['placeholder'];
+  accessor readOnly: InputBaseProps['readOnly'];
+}
+
+export interface SharedProps
+  extends Pick<
+    SelectProps,
+    | 'disabled'
+    | 'error'
+    | 'label'
+    | 'name'
+    | 'placeholder'
+    | 'required'
+    | 'value'
+  > {}
+declare class Select extends PreactInputFieldElement implements SharedProps {
+  #private;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$3]: Select;
+  }
+}
+
+interface SpinnerProps
+  extends Required<Pick<SpinnerProps$1, 'accessibilityLabel'>> {
+  /**
+   * The size of the component.
+   *
+   * @default 'base'
+   */
+  size: Extract<SpinnerProps$1['size'], 'large' | 'large-100' | 'base'>;
+}
+
+declare const tagName$2 = 'shopify-spinner';
+
+declare class Spinner extends PreactCustomElement implements SpinnerProps {
+  accessor accessibilityLabel: string;
+  accessor size: SpinnerProps['size'];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$2]: Spinner;
   }
 }
 
-export type AlignedStackProps = Required<StackProps$1>;
+type AlignedStackProps = Required<StackProps$1>;
 export interface StackProps extends BoxProps {
   justifyContent: AlignedStackProps['justifyContent'];
   alignItems: AlignedStackProps['alignItems'];
@@ -693,12 +1003,12 @@ declare class Stack extends BoxElement implements StackProps {
   accessor columnGap: StackProps['columnGap'];
 }
 declare global {
-  export interface HTMLElementTagNameMap {
+  interface HTMLElementTagNameMap {
     [tagName$1]: Stack;
   }
 }
 
-export interface TextProps
+interface TextProps
   extends Required<Pick<TextProps$1, 'display' | 'accessibilityVisibility'>> {
   color: Extract<TextProps$1['color'], 'base' | 'subdued'>;
   type: Extract<
@@ -717,18 +1027,36 @@ export interface TextProps
 
 declare const tagName = 'shopify-text';
 
-declare class Text extends CustomElement implements TextProps {
-  display: TextProps['display'];
-  fontVariantNumeric: TextProps['fontVariantNumeric'];
-  color: TextProps['color'];
-  tone: TextProps['tone'];
-  type: TextProps['type'];
-  accessibilityVisibility: TextProps['accessibilityVisibility'];
+declare class Text extends PreactCustomElement implements TextProps {
+  accessor display: TextProps['display'];
+  accessor fontVariantNumeric: TextProps['fontVariantNumeric'];
+  accessor color: TextProps['color'];
+  accessor tone: TextProps['tone'];
+  accessor type: TextProps['type'];
+  accessor accessibilityVisibility: TextProps['accessibilityVisibility'];
 }
 declare global {
-  export interface HTMLElementTagNameMap {
+  interface HTMLElementTagNameMap {
     [tagName]: Text;
   }
 }
 
-export {Badge, Box, Divider, Heading, Icon, Link, Stack, Text};
+export {
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  Heading,
+  Icon,
+  Image,
+  Link,
+  Option,
+  OptionGroup,
+  Paragraph,
+  Section,
+  Select,
+  Spinner,
+  Stack,
+  Text,
+};

From 7fd875409f87b23a01ba68a0b355c0f03652b282 Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Tue, 19 Nov 2024 22:17:00 +0000
Subject: [PATCH 08/12] Add new components

---
 .../Button/examples/basic-button.example.tsx  |  15 +++
 .../Image/examples/basic-image.example.tsx    |   9 ++
 .../Link/examples/app-link.example.tsx        |  16 +++
 .../Link/examples/external-link.example.tsx   |  16 +++
 .../Link/examples/relative-link.example.tsx   |  16 +++
 .../examples/shopify-section-link.example.tsx |  16 +++
 .../examples/basic-paragraph.example.tsx      |  23 ++++
 .../Select/examples/basic-select.example.tsx  |  45 ++++++++
 .../examples/basic-blockstack.example.tsx     |  18 +++
 .../src/surfaces/admin/components/util.ts     |  39 +++++++
 .../admin/components/Button/README.md         |   3 +
 .../Button/examples/basic-button.example.ts   |   8 ++
 .../examples/basic-checkbox.example.ts        |  13 +++
 .../surfaces/admin/components/Image/README.md |  20 ++++
 .../Image/examples/basic-image.example.ts     |   6 +
 .../admin/components/Link/Link.doc.ts         | 109 ++++++++++++++++++
 .../surfaces/admin/components/Link/README.md  |  11 ++
 .../Link/examples/app-link.example.ts         |   6 +
 .../Link/examples/external-link.example.ts    |   6 +
 .../Link/examples/relative-link.example.ts    |   6 +
 .../examples/shopify-section-link.example.ts  |   6 +
 .../admin/components/Paragraph/README.md      |   7 ++
 .../examples/basic-paragraph.example.ts       |  12 ++
 .../admin/components/Section/README.md        |  95 +++++++++++++++
 .../Section/examples/basic-section.example.ts |   6 +
 .../admin/components/Select/README.md         |  99 ++++++++++++++++
 .../Select/examples/basic-select.example.ts   |  49 ++++++++
 .../Stack/examples/basic-stack.example.ts     |  13 +++
 28 files changed, 688 insertions(+)
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-blockstack.example.tsx
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/util.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Button/README.md
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Image/README.md
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Image/examples/basic-image.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/README.md
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/app-link.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-link.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/relative-link.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/examples/shopify-section-link.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Paragraph/README.md
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Section/README.md
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Section/examples/basic-section.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Select/README.md
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Select/examples/basic-select.example.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Stack/examples/basic-stack.example.ts

diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx
new file mode 100644
index 0000000000..93fcdd8f25
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx
@@ -0,0 +1,15 @@
+import {render, Button} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Button
+      onPress={() => {
+        console.log('onPress event');
+      }}
+    >
+      Click here
+    </Button>
+  );
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx
new file mode 100644
index 0000000000..43dc6f5ea5
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx
@@ -0,0 +1,9 @@
+import {render, Image} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Image alt="Pickaxe" source="https://shopify.dev/assets/icons/64/pickaxe-1.png" />
+  );
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx
new file mode 100644
index 0000000000..73b437853c
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  render,
+  Link,
+} from '@shopify/ui-extensions-react/admin';
+
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Link href="app:bar">
+      Link to app path
+    </Link>
+  );
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx
new file mode 100644
index 0000000000..0f4c6af283
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  render,
+  Link,
+} from '@shopify/ui-extensions-react/admin';
+
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Link href="https://www.shopify.ca/climate/sustainability-fund">
+      Sustainability fund
+    </Link>
+  );
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx
new file mode 100644
index 0000000000..822ae7bdc9
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  render,
+  Link,
+} from '@shopify/ui-extensions-react/admin';
+
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Link href="/baz">
+      Link relative to current path
+    </Link>
+  );
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx
new file mode 100644
index 0000000000..f10a0e5ade
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  render,
+  Link,
+} from '@shopify/ui-extensions-react/admin';
+
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Link href="shopify://admin/orders">
+      Shop's orders
+    </Link>
+  );
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx
new file mode 100644
index 0000000000..2863f74333
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx
@@ -0,0 +1,23 @@
+import {
+  render,
+  Paragraph,
+  Stack,
+  Text,
+} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Stack
+      direction="block"
+      alignment="center"
+      gap
+    >
+      <Paragraph>
+        <Text type="strong">Name:</Text>
+        <Text>Jane Doe</Text>
+      </Paragraph>
+    </Stack>
+  );
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx
new file mode 100644
index 0000000000..f9cec98b9a
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  render,
+  Select,
+} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  const [value, setValue] = React.useState('2');
+
+  return (
+    <Select
+      label="Country"
+      value={value}
+      onChange={setValue}
+      options={[
+        {
+          value: '1',
+          label: 'Australia',
+        },
+        {
+          value: '2',
+          label: 'Canada',
+        },
+        {
+          value: '3',
+          label: 'France',
+        },
+        {
+          value: '4',
+          label: 'Japan',
+        },
+        {
+          value: '5',
+          label: 'Nigeria',
+        },
+        {
+          value: '6',
+          label: 'United States',
+        },
+      ]}
+    />
+  );
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-blockstack.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-blockstack.example.tsx
new file mode 100644
index 0000000000..aa32498050
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-blockstack.example.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  render,
+  Stack,
+} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Stack gap>
+      <>Child 1</>
+      <>Child 2</>
+      <>Child 3</>
+      <>Child 4</>
+    </Stack>
+  );
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/util.ts b/packages/ui-extensions-react/src/surfaces/admin/components/util.ts
new file mode 100644
index 0000000000..f011fda1c5
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/util.ts
@@ -0,0 +1,39 @@
+import {
+  createElement,
+  useRef,
+  useLayoutEffect,
+  useCallback,
+  forwardRef,
+  ComponentType,
+} from 'react';
+
+// These are the pieces of the passed-in copy of `react` we use:
+export interface InjectedReact {
+  createElement: typeof createElement;
+  useRef: typeof useRef;
+  useLayoutEffect: typeof useLayoutEffect;
+  useCallback: typeof useCallback;
+  forwardRef: typeof forwardRef;
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace shopify {
+    const _createReactRemoteComponent: (
+      methods: InjectedReact,
+      name: string,
+    ) => ComponentType;
+  }
+}
+
+export const createRemoteComponent = (name: string) =>
+  shopify._createReactRemoteComponent(
+    {
+      createElement,
+      useRef,
+      useLayoutEffect,
+      useCallback,
+      forwardRef,
+    },
+    name,
+  );
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Button/README.md b/packages/ui-extensions/src/surfaces/admin/components/Button/README.md
new file mode 100644
index 0000000000..98f440a762
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Button/README.md
@@ -0,0 +1,3 @@
+# Button
+
+Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.ts
new file mode 100644
index 0000000000..0f2e716580
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.ts
@@ -0,0 +1,8 @@
+import {extend, Button} from '@shopify/ui-extensions/admin';
+
+extend('Playground', (root) => {
+  const button = document.createElement('shopify-button');
+  button.onpress = () => console.log('onPress event');
+  button.textContent = 'Click here';
+  root.appendChild(button);
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.ts
new file mode 100644
index 0000000000..494baacd94
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.ts
@@ -0,0 +1,13 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+extension('Playground', (root) => {
+  const checkbox = document.createElement('shopify-checkbox');
+  checkbox.id = 'checkbox';
+  checkbox.name = 'checkbox';
+  checkbox.onchange = (event) => {
+    console.log('checked: ', event.target.checked);
+  };
+
+  root.innerHTML =
+    '<shopify-checkbox id="checkbox" name="checkbox">Save this information for next time</shopify-checkbox>';
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Image/README.md b/packages/ui-extensions/src/surfaces/admin/components/Image/README.md
new file mode 100644
index 0000000000..dc575e89c6
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Image/README.md
@@ -0,0 +1,20 @@
+# Image
+
+The Image component is used to embed an image into the document and control its presentation. It should be used for large format, responsive images.
+
+## Examples
+
+### Basic usage
+
+```tsx
+export function MyComponent() {
+  return (
+    <Image
+      // or accessibilityLabel
+      alt="A red shirt"
+      // or source
+      src="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg"
+    />
+  );
+}
+```
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Image/examples/basic-image.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Image/examples/basic-image.example.ts
new file mode 100644
index 0000000000..c5bc299b2b
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Image/examples/basic-image.example.ts
@@ -0,0 +1,6 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+extension('Playground', (root) => {
+  root.innerHTML =
+    '<shopify-image alt="Pickaxe" source="https://shopify.dev/assets/icons/64/pickaxe-1.png"></shopify-image>';
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts
new file mode 100644
index 0000000000..5d362f9f8c
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts
@@ -0,0 +1,109 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Link',
+  description:
+    'This is an interactive component that directs users to a specified URL. It even supports custom protocols.',
+  requires: '',
+  thumbnail: 'link-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'Link',
+      description: '',
+      type: 'Link',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Actions',
+  defaultExample: {
+    image: 'link-default.png',
+    codeblock: {
+      title: 'Link to an app page',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/app-link.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  examples: {
+    description: '',
+    examples: [
+      {
+        description: 'Link to an external URL',
+        image: 'external-link.png',
+        codeblock: {
+          tabs: [
+            {
+              title: 'React',
+              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx',
+              language: 'typescript',
+            },
+            {
+              title: 'JS',
+              code: './examples/external-link.example.ts',
+              language: 'typescript',
+            },
+          ],
+          title: 'External Link',
+        },
+      },
+      {
+        description: 'Link to a relative URL',
+        image: 'relative-link.png',
+        codeblock: {
+          tabs: [
+            {
+              title: 'React',
+              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx',
+              language: 'typescript',
+            },
+            {
+              title: 'JS',
+              code: './examples/relative-link.example.ts',
+              language: 'typescript',
+            },
+          ],
+          title: 'Relative Link',
+        },
+      },
+      {
+        description: 'Link to a Shopify admin page',
+        image: 'shopify-section-link.png',
+        codeblock: {
+          tabs: [
+            {
+              title: 'React',
+              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx',
+              language: 'typescript',
+            },
+            {
+              title: 'JS',
+              code: './examples/shopify-section-link.example.ts',
+              language: 'typescript',
+            },
+          ],
+          title: 'Shopify Section Link',
+        },
+      },
+    ],
+  },
+  related: [
+    {
+      type: 'component',
+      name: 'Button',
+      url: '/docs/api/admin-extensions/components/actions/button',
+    },
+  ],
+};
+
+export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/README.md b/packages/ui-extensions/src/surfaces/admin/components/Link/README.md
new file mode 100644
index 0000000000..aa4f0653af
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Link/README.md
@@ -0,0 +1,11 @@
+# Link
+
+Link makes text interactive so users can perform an action, such as navigating to another location.
+
+## Expected HTML in Web host
+
+When `href` is set the expected HTML element is an anchor element
+`<a href="#">View email settings</a>`
+
+When `onPress` or `onClick` are set, the expected HTML element is a button element
+`<button type="button">Edit</button>`
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/app-link.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/app-link.example.ts
new file mode 100644
index 0000000000..fc73319edb
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/app-link.example.ts
@@ -0,0 +1,6 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  root.innerHTML =
+    '<shopify-link href="app://baz">Link to app path</shopify-link>';
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-link.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-link.example.ts
new file mode 100644
index 0000000000..6e5f2c0b14
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/external-link.example.ts
@@ -0,0 +1,6 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  root.innerHTML =
+    '<shopify-link href="https://www.shopify.ca/climate/sustainability-fund">Sustainability fund</shopify-link>';
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/relative-link.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/relative-link.example.ts
new file mode 100644
index 0000000000..975fe5aeb7
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/relative-link.example.ts
@@ -0,0 +1,6 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  root.innerHTML =
+    '<shopify-link href="/baz">Link relative to current path</shopify-link>';
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Link/examples/shopify-section-link.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/shopify-section-link.example.ts
new file mode 100644
index 0000000000..ef5f6fb8f5
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/shopify-section-link.example.ts
@@ -0,0 +1,6 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  root.innerHTML =
+    '<shopify-link href="shopify://admin/orders">Shop\'s orders</shopify-link>';
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/README.md b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/README.md
new file mode 100644
index 0000000000..58f1225db7
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/README.md
@@ -0,0 +1,7 @@
+# Paragraph
+
+Use this to display a block of text similar to the <p> tag in HTML.
+
+## Expected HTML in Web host
+
+`<p>Hello, World!</p>`
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.ts
new file mode 100644
index 0000000000..9f51cfa91c
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.ts
@@ -0,0 +1,12 @@
+import {extend} from '@shopify/ui-extensions/admin';
+
+extend('Playground', (root) => {
+  const stack = document.createElement('shopify-stack');
+  stack.direction = 'block';
+  stack.alignment = 'center';
+  stack.gap = 'true';
+  stack.innerHTML =
+    '<shopify-paragraph><shopify-text type="strong">Name:</shopify-text>Jane Doe</shopify-paragraph>';
+
+  root.appendChild(stack);
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Section/README.md b/packages/ui-extensions/src/surfaces/admin/components/Section/README.md
new file mode 100644
index 0000000000..78d64634e6
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Section/README.md
@@ -0,0 +1,95 @@
+# Section
+
+`Section` is a structural component that allows thematic grouping of content. Its visual style is contextual and controlled by Shopify, so a `Section` may look different depending on the component it is nested inside.
+
+`Section` also automatically increases the heading level for its content to ensure a semantically correct heading structure in the document. To further increase the heading level inside the `Section`, consider nesting new `Section`s.
+
+## Expected HTML in Web host
+
+Note that the rendered heading level in the examples are assuming that the `Section` is nested within the root of the HTML document. The document itself is a "section", therefore its children `Heading` will be level 1. Sibling `Section`s will start their heading level at 2.
+
+<table>
+<tr>
+<th width="50%">React</th>
+<th width="50%">Expected HTML</th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<Section heading="Provinces of Canada" />
+```
+
+</td>
+<td valign="top">
+
+```html
+<section>
+  <h2>Provinces of Canada</h2>
+</section>
+```
+
+</td>
+</tr>
+
+<tr>
+<td valign="top">
+
+```jsx
+<Section>
+  <Heading>Provinces of Canada</Heading>
+</Section>
+```
+
+</td>
+<td valign="top">
+
+```html
+<section>
+  <h2>Provinces of Canada</h2>
+</section>
+```
+
+</td>
+</tr>
+
+<tr>
+<td valign="top">
+
+```jsx
+<Section heading="Some provinces of Canada">
+    <Section>
+        <Heading>Quebec</Heading>
+        <Text>Most of its residents are in eastern time.<Text>
+
+        <Heading>Ontario</Heading>
+        <Text>Most of its residents are in eastern time.</Text>
+
+        <Heading>British Columbia</Heading>
+        <Text>Most of its residents are in pacific time.</Text>
+    </Section>
+</Section>
+```
+
+</td>
+<td valign="top">
+
+```html
+<section>
+    <h2>Some provinces of Canada</h2>
+    <section>
+        <h3>Quebec</h3>
+        <span>Most of its residents are in eastern time.<span>
+
+        <h3>Ontario</h3>
+        <span>Most of its residents are in eastern time.</span>
+
+        <h3>British Columbia</h3>
+        <span>Most of its residents are in pacific time.</span>
+    </section>
+</section>
+```
+
+</td>
+</tr>
+</table>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Section/examples/basic-section.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Section/examples/basic-section.example.ts
new file mode 100644
index 0000000000..cb98f0d9ba
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Section/examples/basic-section.example.ts
@@ -0,0 +1,6 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  root.innerHTML =
+    '<shopify-section heading="Section heading">Section content</shopify-section>';
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Select/README.md b/packages/ui-extensions/src/surfaces/admin/components/Select/README.md
new file mode 100644
index 0000000000..c7f060e000
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Select/README.md
@@ -0,0 +1,99 @@
+# Select, Option and OptionGroup
+
+Selects let users choose one option from an options menu. Consider select
+when you have 4 or more options, to avoid cluttering the interface.
+
+## Notes
+
+`<OptGroup>` can be used as an alias to `<OptionGroup>`
+
+## Examples
+
+### Default
+
+```jsx
+<Select label="Cats and dogs">
+  <Option value="british-shorthair">Bristish shorthair</Option>
+  <Option value="maine-coon">Maine coon</Option>
+  <Option value="persian">Persian</Option>
+  <Option value="germa-shepherd">German Shepherd</Option>
+  <Option value="bulldog">Bulldog</Option>
+  <Option value="labrador-retriever">Labrador Retriever</Option>
+</Select>
+```
+
+or
+
+```jsx
+const selectOptions = [
+  {value: 'british-shorthair', label: 'Bristish shorthair'},
+  {value: 'maine-coon', label: 'Maine coon'},
+  {value: 'persian', label: 'Persian'},
+  {value: 'germa-shepherd', label: 'German Shepherd'},
+  {value: 'bulldog', label: 'Bulldog'},
+  {value: 'labrador-retriever', label: 'Labrador Retriever'},
+];
+
+<Select label="Cats and dogs" options={selectOptions} />;
+```
+
+### Groups of options
+
+```jsx
+<Select label="Cats and dogs">
+  <OptionGroup label="Cats">
+    <Option value="british-shorthair">Bristish shorthair</Option>
+    <Option value="maine-coon">Maine coon</Option>
+    <Option value="persian">Persian</Option>
+  </OptionGroup>
+
+  <OptionGroup label="Dogs">
+    <Option value="germa-shepherd">German Shepherd</Option>
+    <Option value="bulldog">Bulldog</Option>
+    <Option value="labrador-retriever">Labrador Retriever</Option>
+  </OptionGroup>
+</Select>
+```
+
+or with alias
+
+```jsx
+<Select label="Cats and dogs">
+  <OptGroup label="Cats">
+    <Option value="british-shorthair">Bristish shorthair</Option>
+    <Option value="maine-coon">Maine coon</Option>
+    <Option value="persian">Persian</Option>
+  </OptGroup>
+
+  <OptGroup label="Dogs">
+    <Option value="germa-shepherd">German Shepherd</Option>
+    <Option value="bulldog">Bulldog</Option>
+    <Option value="labrador-retriever">Labrador Retriever</Option>
+  </OptGroup>
+</Select>
+```
+
+or
+
+```jsx
+const selectOptions = [
+  {
+    label: 'Cats',
+    options: [
+      {value: 'british-shorthair', label: 'Bristish shorthair'},
+      {value: 'maine-coon', label: 'Maine coon'},
+      {value: 'persian', label: 'Persian'},
+    ],
+  },
+  {
+    label: 'Dogs',
+    options: [
+      {value: 'germa-shepherd', label: 'German Shepherd'},
+      {value: 'bulldog', label: 'Bulldog'},
+      {value: 'labrador-retriever', label: 'Labrador Retriever'},
+    ],
+  },
+];
+
+<Select label="Cats and dogs" options={selectOptions} />;
+```
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Select/examples/basic-select.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Select/examples/basic-select.example.ts
new file mode 100644
index 0000000000..53aa35ae2c
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Select/examples/basic-select.example.ts
@@ -0,0 +1,49 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  let value = '2';
+
+  const select = document.createElement('shopify-select');
+  select.value = 'value';
+  select.label = 'Country';
+  select.onchange = (event) => {
+    console.log('new value', event.target.value);
+    value = event.target.value;
+  };
+  root.appendChild(select);
+
+  const selectOptions = [
+    {
+      value: '1',
+      label: 'Australia',
+    },
+    {
+      value: '2',
+      label: 'Canada',
+    },
+    {
+      value: '3',
+      label: 'France',
+    },
+    {
+      value: '4',
+      label: 'Japan',
+    },
+    {
+      value: '5',
+      label: 'Nigeria',
+    },
+    {
+      value: '6',
+      label: 'United States',
+    },
+  ];
+
+  const options = selectOptions.map((opt) => {
+    const optionElem = document.createElement('shopify-option');
+    optionElem.value = opt.value;
+    optionElem.textContent = opt.label;
+    return optionElem;
+  });
+  select.append(...options);
+});
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Stack/examples/basic-stack.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Stack/examples/basic-stack.example.ts
new file mode 100644
index 0000000000..aaf1b67e3b
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Stack/examples/basic-stack.example.ts
@@ -0,0 +1,13 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  const stack = document.createElement('shopify-stack');
+
+  stack.direction = 'block';
+  stack.gap = true;
+
+  stack.innerHTML =
+    '<shopify-text>Child 1</shopify-text><shopify-text>Child 2</shopify-text><shopify-text>Child 3</shopify-text><shopify-text>Child 4</shopify-text>';
+
+  root.appendChild(stack);
+});

From d4c7276238e66c0c6a2c6f32dbc8de1ae97c7dda Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Tue, 19 Nov 2024 19:30:15 -0500
Subject: [PATCH 09/12] Add React components

---
 config/typescript/tsconfig.base.json          |   5 +-
 package.json                                  |  10 +-
 packages/ui-extensions-react/package.json     |  43 +-
 .../ui-extensions-react/src/surfaces/admin.ts |   1 +
 .../src/surfaces/admin/components.ts          | 875 ++++++++++++++++++
 packages/ui-extensions-react/tsconfig.json    |   4 +-
 packages/ui-extensions-react/vite.config.ts   |  45 +
 packages/ui-extensions/package.json           |   4 +-
 .../src/surfaces/admin/components.ts          |   4 -
 packages/ui-extensions/tsconfig.json          |   2 -
 packages/ui-extensions/vite.config.ts         |   2 -
 tsconfig.repo.json                            |   1 -
 12 files changed, 949 insertions(+), 47 deletions(-)
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components.ts
 create mode 100644 packages/ui-extensions-react/vite.config.ts

diff --git a/config/typescript/tsconfig.base.json b/config/typescript/tsconfig.base.json
index 5a5adc25b2..854b4a34bf 100644
--- a/config/typescript/tsconfig.base.json
+++ b/config/typescript/tsconfig.base.json
@@ -1,11 +1,10 @@
 {
   "extends": "@shopify/typescript-configs/library.json",
   "compilerOptions": {
-    "moduleResolution": "Bundler",
     "strict": true,
     "composite": true,
     "isolatedModules": true,
-    "emitDeclarationOnly": true,
+    "emitDeclarationOnly": false,
     "lib": [
       "es2015",
       "es2016",
@@ -13,7 +12,7 @@
       "es2018",
       "esnext",
       "esnext.asynciterable",
-      "WebWorker"
+      "DOM"
     ]
   }
 }
diff --git a/package.json b/package.json
index e9b9703f6c..ac7c5ab980 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,9 @@
     "./packages/*"
   ],
   "scripts": {
-    "build": "loom build",
-    "build-consumer": "loom build && ./scripts/build-consumer.sh",
-    "build-consumer-spin": "loom build && ./scripts/build-consumer-spin.sh",
+    "build": "yarn workspace @shopify/ui-extensions build; yarn workspace @shopify/ui-extensions-react build",
+    "build-consumer": "yarn build && ./scripts/build-consumer.sh",
+    "build-consumer-spin": "yarn build && ./scripts/build-consumer-spin.sh",
     "generate-definition": "node ./scripts/generator.js",
     "clean": "git clean -xdf ./packages; rm -rf ./build",
     "predeploy": "yarn build",
@@ -52,7 +52,9 @@
     "nodemon": "^2.0.4",
     "prettier": "^2.8.0",
     "react": ">=18.0.0",
-    "typescript": "^4.9.0"
+    "typescript": "^4.9.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vite": "^5.4.11"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/packages/ui-extensions-react/package.json b/packages/ui-extensions-react/package.json
index 331dbce19d..39acb951d9 100644
--- a/packages/ui-extensions-react/package.json
+++ b/packages/ui-extensions-react/package.json
@@ -1,6 +1,9 @@
 {
   "name": "@shopify/ui-extensions-react",
   "version": "0.0.0-unstable",
+  "scripts": {
+    "build": "vite build"
+  },
   "description": "React bindings for @shopify/ui-extensions",
   "publishConfig": {
     "access": "public",
@@ -11,53 +14,39 @@
   "main": "index.js",
   "module": "index.mjs",
   "esnext": "index.esnext",
-  "types": "./build/ts/index.d.ts",
+  "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
       "admin": [
-        "./build/ts/surfaces/admin.d.ts"
+        "./dist/surfaces/admin.d.ts"
       ],
       "checkout": [
-        "./build/ts/surfaces/checkout.d.ts"
+        "./dist/surfaces/checkout.d.ts"
       ],
       "customer-account": [
-        "./build/ts/surfaces/customer-account.d.ts"
+        "./dist/surfaces/customer-account.d.ts"
       ],
       "point-of-sale": [
-        "./build/ts/surfaces/point-of-sale.d.ts"
+        "./dist/surfaces/point-of-sale.d.ts"
       ]
     }
   },
   "exports": {
-    ".": {
-      "types": "./build/ts/index.d.ts",
-      "esnext": "./index.esnext",
-      "import": "./index.mjs",
-      "require": "./index.js"
-    },
     "./admin": {
-      "types": "./build/ts/surfaces/admin.d.ts",
-      "esnext": "./build/esnext/surfaces/admin.esnext",
-      "import": "./build/esm/surfaces/admin.mjs",
-      "require": "./build/cjs/surfaces/admin.js"
+      "types": "./dist/surfaces/admin.d.ts",
+      "default": "./dist/admin.mjs"
     },
     "./checkout": {
-      "types": "./build/ts/surfaces/checkout.d.ts",
-      "esnext": "./build/esnext/surfaces/checkout.esnext",
-      "import": "./build/esm/surfaces/checkout.mjs",
-      "require": "./build/cjs/surfaces/checkout.js"
+      "types": "./dist/surfaces/checkout.d.ts",
+      "default": "./dist/checkout.mjs"
     },
     "./customer-account": {
-      "types": "./build/ts/surfaces/customer-account.d.ts",
-      "esnext": "./build/esnext/surfaces/customer-account.esnext",
-      "import": "./build/esm/surfaces/customer-account.mjs",
-      "require": "./build/cjs/surfaces/customer-account.js"
+      "types": "./dist/surfaces/customer-account.d.ts",
+      "default": "./dist/customer-account.mjs"
     },
     "./point-of-sale": {
-      "types": "./build/ts/surfaces/point-of-sale.d.ts",
-      "esnext": "./build/esnext/surfaces/point-of-sale.esnext",
-      "import": "./build/esm/surfaces/point-of-sale.mjs",
-      "require": "./build/cjs/surfaces/point-of-sale.js"
+      "types": "./dist/surfaces/point-of-sale.d.ts",
+      "default": "./dist/point-of-sale.mjs"
     }
   },
   "dependencies": {
diff --git a/packages/ui-extensions-react/src/surfaces/admin.ts b/packages/ui-extensions-react/src/surfaces/admin.ts
index 4de9bdd9f3..cf45895ab9 100644
--- a/packages/ui-extensions-react/src/surfaces/admin.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin.ts
@@ -1,4 +1,5 @@
 export {extend, extension} from '@shopify/ui-extensions/admin';
 
 export * from './admin/hooks';
+export * from './admin/components';
 export {render, reactExtension} from './admin/render';
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components.ts b/packages/ui-extensions-react/src/surfaces/admin/components.ts
new file mode 100644
index 0000000000..4342897b67
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components.ts
@@ -0,0 +1,875 @@
+import type {
+  TextProps as TextProps$2,
+  BoxProps as BoxProps$2,
+  StackProps as StackProps$2,
+  SpinnerProps as SpinnerProps$2,
+  TextFieldProps,
+  SelectProps as SelectProps$1,
+  SectionProps as SectionProps$2,
+  ParagraphProps as ParagraphProps$2,
+  OptionGroupProps as OptionGroupProps$1,
+  OptionProps as OptionProps$1,
+  LinkProps as LinkProps$2,
+  ImageProps as ImageProps$2,
+  IconProps as IconProps$2,
+  HeadingProps as HeadingProps$2,
+  DividerProps as DividerProps$2,
+  CheckboxProps as CheckboxProps$2,
+  ButtonProps as ButtonProps$2,
+  BadgeProps as BadgeProps$2,
+} from '@shopify/ui-api-design';
+import type {MaybeAllValuesShorthandProperty} from '@shopify/ui-api-design/dist/shared/utils';
+import * as React from 'react';
+
+export type IconType =
+  | 'wrench'
+  | 'viewport-tall'
+  | 'viewport-short'
+  | 'viewport-narrow'
+  | 'wifi'
+  | 'work'
+  | 'watch'
+  | 'wallet'
+  | 'wand'
+  | 'upload'
+  | 'undo'
+  | 'viewport-wide'
+  | 'unknown-device'
+  | 'transaction'
+  | 'transfer-internal'
+  | 'transfer-in'
+  | 'transfer-out'
+  | 'transaction-fee-euro'
+  | 'transaction-fee-yen'
+  | 'transaction-fee-rupee'
+  | 'transaction-fee-dollar'
+  | 'transaction-fee-pound'
+  | 'thumbs-up'
+  | 'transfer'
+  | 'tip-jar'
+  | 'theme-template'
+  | 'thumbs-down'
+  | 'theme-store'
+  | 'theme'
+  | 'theme-edit'
+  | 'text-with-image'
+  | 'text'
+  | 'toggle-off'
+  | 'text-underline'
+  | 'text-title'
+  | 'text-in-columns'
+  | 'text-indent'
+  | 'text-italic'
+  | 'text-font'
+  | 'text-font-list'
+  | 'text-grammar'
+  | 'text-color'
+  | 'text-block'
+  | 'text-bold'
+  | 'toggle-on'
+  | 'text-align-right'
+  | 'text-align-center'
+  | 'text-align-left'
+  | 'tablet'
+  | 'team'
+  | 'store'
+  | 'tax'
+  | 'sun'
+  | 'store-online'
+  | 'store-import'
+  | 'stop-circle'
+  | 'target'
+  | 'store-managed'
+  | 'star-filled'
+  | 'status'
+  | 'sort-descending'
+  | 'text-in-rows'
+  | 'sort-ascending'
+  | 'sound'
+  | 'social-ad'
+  | 'smiley-neutral'
+  | 'status-active'
+  | 'sports'
+  | 'social-post'
+  | 'smiley-joy'
+  | 'smiley-happy'
+  | 'slideshow'
+  | 'shipping-label'
+  | 'shield-none'
+  | 'shield-person'
+  | 'smiley-sad'
+  | 'shield-check-mark'
+  | 'shopcodes'
+  | 'settings'
+  | 'share'
+  | 'send'
+  | 'search-resource'
+  | 'search-list'
+  | 'search'
+  | 'save'
+  | 'rotate-left'
+  | 'text-quote'
+  | 'search-recent'
+  | 'sandbox'
+  | 'replay'
+  | 'shield-pending'
+  | 'reward'
+  | 'remove-background'
+  | 'replace'
+  | 'return'
+  | 'receipt'
+  | 'receipt-yen'
+  | 'receipt-refund'
+  | 'receipt-rupee'
+  | 'reset'
+  | 'receipt-euro'
+  | 'refresh'
+  | 'redo'
+  | 'receipt-paid'
+  | 'question-circle'
+  | 'receipt-dollar'
+  | 'product-unavailable'
+  | 'receipt-pound'
+  | 'profile'
+  | 'product-return'
+  | 'product-add'
+  | 'print'
+  | 'product-list'
+  | 'product-reference'
+  | 'product-remove'
+  | 'price-list'
+  | 'product-cost'
+  | 'play'
+  | 'play-circle'
+  | 'point-of-sale'
+  | 'phone-out'
+  | 'pin'
+  | 'plan'
+  | 'phone-in'
+  | 'person-segment'
+  | 'personalized-text'
+  | 'payout-yen'
+  | 'person-remove'
+  | 'person-exit'
+  | 'payout'
+  | 'payout-pound'
+  | 'payout-dollar'
+  | 'person-lock'
+  | 'passkey'
+  | 'payout-euro'
+  | 'paint-brush-round'
+  | 'payout-rupee'
+  | 'payment-capture'
+  | 'paper-check'
+  | 'pagination-end'
+  | 'pause-circle'
+  | 'paint-brush-flat'
+  | 'page-reference'
+  | 'page-up'
+  | 'person-add'
+  | 'page-attachment'
+  | 'page-clock'
+  | 'page-down'
+  | 'package-returned'
+  | 'page-add'
+  | 'package'
+  | 'pagination-start'
+  | 'package-fulfilled'
+  | 'organization'
+  | 'page-heart'
+  | 'outdent'
+  | 'outgoing'
+  | 'order-repeat'
+  | 'package-on-hold'
+  | 'page-remove'
+  | 'order-draft'
+  | 'note'
+  | 'order-first'
+  | 'note-add'
+  | 'notification'
+  | 'moon'
+  | 'money'
+  | 'minimize'
+  | 'nature'
+  | 'metaobject-reference'
+  | 'menu'
+  | 'metaobject'
+  | 'metafields'
+  | 'metaobject-list'
+  | 'menu-vertical'
+  | 'mention'
+  | 'money-none'
+  | 'megaphone'
+  | 'orders-status'
+  | 'referral-code'
+  | 'measurement-volume'
+  | 'markets'
+  | 'markets-yen'
+  | 'measurement-size'
+  | 'markets-rupee'
+  | 'maximize'
+  | 'markets-euro'
+  | 'lock'
+  | 'location-none'
+  | 'live'
+  | 'list-numbered'
+  | 'link'
+  | 'layout-sidebar-right'
+  | 'list-bulleted'
+  | 'measurement-weight'
+  | 'layout-sidebar-left'
+  | 'media-receiver'
+  | 'layout-popup'
+  | 'layout-section'
+  | 'layout-footer'
+  | 'layout-rows-2'
+  | 'layout-columns-2'
+  | 'layout-column-1'
+  | 'layout-columns-3'
+  | 'layout-buy-button'
+  | 'layout-buy-button-vertical'
+  | 'layout-block'
+  | 'layout-buy-button-horizontal'
+  | 'language-translate'
+  | 'label-printer'
+  | 'keyboard-hide'
+  | 'keyboard'
+  | 'iq'
+  | 'inventory'
+  | 'key'
+  | 'layout-header'
+  | 'layout-logo-block'
+  | 'incentive'
+  | 'images'
+  | 'image'
+  | 'incoming'
+  | 'image-explore'
+  | 'image-with-text-overlay'
+  | 'image-none'
+  | 'image-add'
+  | 'import'
+  | 'image-alt'
+  | 'icons'
+  | 'identity-card'
+  | 'hashtag'
+  | 'globe-europe'
+  | 'heart'
+  | 'inventory-updated'
+  | 'hashtag-decimal'
+  | 'gift-card'
+  | 'gauge'
+  | 'globe-asia'
+  | 'games'
+  | 'forms'
+  | 'image-magic'
+  | 'food'
+  | 'forklift'
+  | 'folder'
+  | 'folder-up'
+  | 'folder-down'
+  | 'folder-remove'
+  | 'home'
+  | 'flip-vertical'
+  | 'folder-add'
+  | 'flag'
+  | 'file'
+  | 'flower'
+  | 'flip-horizontal'
+  | 'favicon'
+  | 'eyeglasses'
+  | 'eye-check-mark'
+  | 'filter'
+  | 'eye-first'
+  | 'export'
+  | 'exchange'
+  | 'eye-dropper'
+  | 'envelope-soft-pack'
+  | 'envelope'
+  | 'exit'
+  | 'enter'
+  | 'email-newsletter'
+  | 'email-follow-up'
+  | 'duplicate'
+  | 'drag-drop'
+  | 'domain-new'
+  | 'drag-handle'
+  | 'domain'
+  | 'dock-floating'
+  | 'discount-code'
+  | 'discount'
+  | 'dock-side'
+  | 'domain-redirect'
+  | 'dns-settings'
+  | 'delete'
+  | 'desktop'
+  | 'database-add'
+  | 'data-table'
+  | 'database-connect'
+  | 'domain-landing-page'
+  | 'cursor-option'
+  | 'cursor'
+  | 'data-presentation'
+  | 'crop'
+  | 'currency-convert'
+  | 'cursor-banner'
+  | 'credit-card-tap-chip'
+  | 'credit-card-reader-tap'
+  | 'credit-card'
+  | 'credit-card-secure'
+  | 'credit-card-reader-chip'
+  | 'credit-card-cancel'
+  | 'credit-card-reader'
+  | 'database'
+  | 'credit-card-percent'
+  | 'corner-pill'
+  | 'corner-round'
+  | 'content'
+  | 'connect'
+  | 'contract'
+  | 'confetti'
+  | 'rotate-right'
+  | 'menu-horizontal'
+  | 'color-none'
+  | 'collection-list'
+  | 'code'
+  | 'collection-featured'
+  | 'compass'
+  | 'compose'
+  | 'corner-square'
+  | 'code-add'
+  | 'clipboard'
+  | 'color'
+  | 'clipboard-check'
+  | 'chevron-right'
+  | 'chevron-up-circle'
+  | 'chevron-right-circle'
+  | 'chevron-down-circle'
+  | 'circle'
+  | 'clipboard-checklist'
+  | 'chevron-left'
+  | 'checkbox'
+  | 'chat'
+  | 'collection-reference'
+  | 'chevron-left-circle'
+  | 'chart-vertical'
+  | 'chat-referral'
+  | 'chart-stacked'
+  | 'chart-line'
+  | 'chart-horizontal'
+  | 'chart-popular'
+  | 'chart-histogram-second-last'
+  | 'chart-histogram-last'
+  | 'chart-histogram-flat'
+  | 'chart-funnel'
+  | 'chart-histogram-full'
+  | 'chart-histogram-first'
+  | 'chart-cohort'
+  | 'chart-histogram-growth'
+  | 'categories'
+  | 'chart-histogram-first-last'
+  | 'channels'
+  | 'cash-pound'
+  | 'chart-donut'
+  | 'cash-yen'
+  | 'cash-dollar'
+  | 'catalog-product'
+  | 'cart-up'
+  | 'cart-discount'
+  | 'cart-sale'
+  | 'cash-rupee'
+  | 'cart'
+  | 'cart-down'
+  | 'cart-abandoned'
+  | 'caret-down'
+  | 'camera'
+  | 'camera-flip'
+  | 'caret-up'
+  | 'calendar-time'
+  | 'calculator'
+  | 'button'
+  | 'bullet'
+  | 'button-press'
+  | 'bug'
+  | 'book'
+  | 'book-open'
+  | 'cash-euro'
+  | 'blog'
+  | 'bank'
+  | 'automation'
+  | 'arrows-out-horizontal'
+  | 'backspace'
+  | 'bill'
+  | 'arrow-up'
+  | 'arrow-right'
+  | 'arrow-right-circle'
+  | 'barcode'
+  | 'arrow-up-circle'
+  | 'arrow-left'
+  | 'arrow-left-circle'
+  | 'arrow-down-circle'
+  | 'app-extension'
+  | 'alert-diamond'
+  | 'arrow-down'
+  | 'alert-location'
+  | 'airplane'
+  | 'affiliate'
+  | 'adjust'
+  | 'arrows-in-horizontal'
+  | 'x'
+  | 'x-circle'
+  | 'variant'
+  | 'view'
+  | 'star'
+  | 'sort'
+  | 'select'
+  | 'product'
+  | 'plus-circle'
+  | 'plus'
+  | 'phone'
+  | 'person'
+  | 'payment'
+  | 'page'
+  | 'order'
+  | 'order-unfulfilled'
+  | 'order-fulfilled'
+  | 'mobile'
+  | 'microphone'
+  | 'minus'
+  | 'minus-circle'
+  | 'location'
+  | 'lightbulb'
+  | 'language'
+  | 'incomplete'
+  | 'info'
+  | 'in-progress'
+  | 'hide'
+  | 'globe'
+  | 'external'
+  | 'email'
+  | 'edit'
+  | 'enabled'
+  | 'disabled'
+  | 'delivery'
+  | 'collection'
+  | 'clock'
+  | 'chevron-up'
+  | 'check'
+  | 'check-circle'
+  | 'chevron-down'
+  | 'calendar-check'
+  | 'calendar'
+  | 'blank'
+  | 'archive'
+  | 'alert-triangle'
+  | 'alert-circle'
+  | 'alert-bubble'
+  | 'attachment'
+  | 'merge'
+  | 'arrow-up-right'
+  | 'apps';
+
+interface TextProps$1
+  extends Required<Pick<TextProps$2, 'display' | 'accessibilityVisibility'>> {
+  color: Extract<TextProps$2['color'], 'base' | 'subdued'>;
+  type: Extract<
+    TextProps$2['type'],
+    'address' | 'redundant' | 'strong' | 'generic' | 'emphasis'
+  >;
+  tone: Extract<
+    TextProps$2['tone'],
+    'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'caution'
+  >;
+  fontVariantNumeric: Extract<
+    TextProps$2['fontVariantNumeric'],
+    'auto' | 'normal' | 'tabular-nums'
+  >;
+}
+
+interface ReactProps$g extends Partial<TextProps$1>, Pick<TextProps$2, 'id'> {}
+
+type MakeResponsive<T> = T | `@media${string}`;
+
+type AlignedBox = Required<BoxProps$2>;
+interface BoxProps$1 {
+  accessibilityRole: AlignedBox['accessibilityRole'];
+  background: Extract<
+    AlignedBox['background'],
+    'transparent' | 'base' | 'subdued' | 'strong'
+  >;
+  blockSize: AlignedBox['blockSize'];
+  minBlockSize: AlignedBox['minBlockSize'];
+  maxBlockSize: AlignedBox['maxBlockSize'];
+  inlineSize: AlignedBox['inlineSize'];
+  minInlineSize: AlignedBox['minInlineSize'];
+  maxInlineSize: AlignedBox['maxInlineSize'];
+  padding: MakeResponsive<AlignedBox['padding']>;
+  paddingBlock: MakeResponsive<AlignedBox['paddingBlock']>;
+  paddingBlockStart: MakeResponsive<AlignedBox['paddingBlockStart']>;
+  paddingBlockEnd: MakeResponsive<AlignedBox['paddingBlockEnd']>;
+  paddingInline: MakeResponsive<AlignedBox['paddingInline']>;
+  paddingInlineStart: MakeResponsive<AlignedBox['paddingInlineStart']>;
+  paddingInlineEnd: MakeResponsive<AlignedBox['paddingInlineEnd']>;
+  borderWidth: MaybeAllValuesShorthandProperty<
+    Extract<
+      AlignedBox['borderWidth'],
+      'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200'
+    >
+  >;
+  borderStyle: MaybeAllValuesShorthandProperty<
+    Extract<AlignedBox['borderStyle'], 'none' | 'solid' | 'dashed'>
+  >;
+  borderRadius: MaybeAllValuesShorthandProperty<
+    Extract<
+      AlignedBox['borderRadius'],
+      | 'none'
+      | 'small-200'
+      | 'small-100'
+      | 'small'
+      | 'base'
+      | 'large'
+      | 'large-100'
+      | 'large-200'
+    >
+  >;
+  borderColor: Extract<
+    AlignedBox['borderColor'],
+    'subdued' | 'base' | 'strong'
+  >;
+  accessibilityLabel: AlignedBox['accessibilityLabel'];
+  accessibilityVisibility: AlignedBox['accessibilityVisibility'];
+  display: AlignedBox['display'];
+}
+
+type AlignedStackProps = Required<StackProps$2>;
+interface StackProps$1 extends BoxProps$1 {
+  justifyContent: AlignedStackProps['justifyContent'];
+  alignItems: AlignedStackProps['alignItems'];
+  alignContent: AlignedStackProps['alignContent'];
+  gap: MakeResponsive<AlignedStackProps['gap']>;
+  rowGap: MakeResponsive<AlignedStackProps['rowGap']>;
+  columnGap: MakeResponsive<AlignedStackProps['columnGap']>;
+  direction: MakeResponsive<AlignedStackProps['direction']>;
+}
+
+interface ReactProps$f
+  extends Partial<StackProps$1>,
+    Pick<StackProps$2, 'id'> {}
+
+interface SpinnerProps$1
+  extends Required<Pick<SpinnerProps$2, 'accessibilityLabel'>> {
+  /**
+   * The size of the component.
+   *
+   * @default 'base'
+   */
+  size: Extract<SpinnerProps$2['size'], 'large' | 'large-100' | 'base'>;
+}
+
+interface ReactProps$e
+  extends Partial<SpinnerProps$1>,
+    Pick<SpinnerProps$2, 'id'> {}
+
+type InputReactProps = Pick<
+  TextFieldProps,
+  'onChange' | 'onFocus' | 'onInput' | 'onBlur'
+>;
+
+interface SharedProps$3
+  extends Pick<
+    SelectProps$1,
+    | 'disabled'
+    | 'error'
+    | 'label'
+    | 'name'
+    | 'placeholder'
+    | 'required'
+    | 'value'
+  > {}
+
+interface ReactProps$d extends Partial<SharedProps$3 & InputReactProps> {}
+
+type RequiredSectionProps = Required<SectionProps$2>;
+interface SectionProps$1 {
+  accessibilityLabel: RequiredSectionProps['accessibilityLabel'];
+  heading: RequiredSectionProps['heading'];
+  padding: RequiredSectionProps['padding'];
+}
+
+interface ReactProps$c
+  extends Partial<SectionProps$1>,
+    Pick<SectionProps$2, 'id'> {}
+
+interface ParagraphProps$1
+  extends Required<
+    Pick<
+      ParagraphProps$2,
+      'lineClamp' | 'accessibilityVisibility' | 'fontVariantNumeric' | 'tone'
+    >
+  > {
+  color: Extract<ParagraphProps$2['color'], 'base' | 'subdued'>;
+}
+
+interface ReactProps$b
+  extends Partial<ParagraphProps$1>,
+    Pick<ParagraphProps$2, 'id'> {}
+
+interface SharedProps$2
+  extends Required<Pick<OptionGroupProps$1, 'disabled' | 'label'>> {}
+
+interface ReactProps$a extends Partial<SharedProps$2> {}
+
+interface SharedProps$1
+  extends Required<Pick<OptionProps$1, 'disabled' | 'value'>> {}
+
+interface ReactProps$9 extends Partial<SharedProps$1> {}
+
+type RequiredLinkProps = Required<LinkProps$2>;
+interface LinkProps$1 {
+  tone: Extract<RequiredLinkProps['tone'], 'auto' | 'neutral' | 'critical'>;
+  accessibilityLabel: RequiredLinkProps['accessibilityLabel'];
+  href: RequiredLinkProps['href'];
+  target: RequiredLinkProps['target'];
+}
+
+interface ReactProps$8
+  extends Partial<LinkProps$1>,
+    Pick<LinkProps$2, 'onClick' | 'id' | 'lang'> {}
+
+interface ImageProps$1 {
+  accessibilityRole: Extract<
+    ImageProps$2['accessibilityRole'],
+    'img' | 'presentation' | 'none'
+  >;
+  alt: NonNullable<ImageProps$2['alt']>;
+  loading: Extract<ImageProps$2['loading'], 'eager' | 'lazy'>;
+  src: NonNullable<ImageProps$2['src']>;
+}
+
+interface ReactProps$7
+  extends Partial<ImageProps$1>,
+    Pick<ImageProps$2, 'onError' | 'onLoad' | 'id'> {}
+
+interface IconProps$1 {
+  type: '' | IconType;
+  tone: Extract<
+    IconProps$2['tone'],
+    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
+  >;
+  color: Extract<IconProps$2['color'], 'base' | 'subdued'>;
+  size: Extract<IconProps$2['size'], 'small' | 'base'>;
+}
+
+interface ReactProps$6 extends Partial<IconProps$1>, Pick<IconProps$2, 'id'> {}
+
+type RequiredHeadingProps = Required<HeadingProps$2>;
+interface HeadingProps$1 {
+  accessibilityRole: RequiredHeadingProps['accessibilityRole'];
+  accessibilityVisibility: RequiredHeadingProps['accessibilityVisibility'];
+  lineClamp: RequiredHeadingProps['lineClamp'];
+}
+
+interface ReactProps$5
+  extends Partial<HeadingProps$1>,
+    Pick<HeadingProps$2, 'id'> {}
+
+interface DividerProps$1 {
+  direction: Extract<DividerProps$2['direction'], 'inline' | 'block'>;
+  color: Extract<DividerProps$2['color'], 'subdued' | 'base' | 'strong'>;
+}
+
+interface ReactProps$4
+  extends Partial<DividerProps$1>,
+    Pick<DividerProps$2, 'id'> {}
+
+interface CheckboxProps$1
+  extends Required<
+    Pick<
+      CheckboxProps$2,
+      | 'accessibilityLabel'
+      | 'checked'
+      | 'details'
+      | 'disabled'
+      | 'error'
+      | 'id'
+      | 'indeterminate'
+      | 'label'
+      | 'name'
+      | 'required'
+      | 'value'
+    >
+  > {}
+
+interface ReactProps$3
+  extends Partial<CheckboxProps$1>,
+    Pick<CheckboxProps$2, 'id' | 'onChange'> {}
+
+type ButtonOnlyProps = Extract<
+  ButtonProps$2,
+  {
+    type?: unknown;
+  }
+>;
+type ButtonBaseProps = Required<
+  Pick<
+    ButtonOnlyProps,
+    | 'accessibilityLabel'
+    | 'disabled'
+    | 'activateAction'
+    | 'activateTarget'
+    | 'lang'
+    | 'loading'
+    | 'type'
+    | 'variant'
+    | 'target'
+    | 'href'
+    | 'download'
+  >
+>;
+interface ButtonProps$1 extends ButtonBaseProps {
+  tone: Extract<ButtonProps$2['tone'], 'neutral' | 'critical' | 'auto'>;
+  icon: IconProps$1['type'];
+}
+
+interface ReactProps$2
+  extends Partial<ButtonProps$1>,
+    Pick<ButtonProps$2, 'onClick' | 'onFocus' | 'onBlur' | 'id'> {}
+
+interface ReactProps$1 extends Partial<BoxProps$1>, Pick<BoxProps$2, 'id'> {}
+
+interface BadgeProps$1 {
+  accessibilityLabel: NonNullable<BadgeProps$2['accessibilityLabel']>;
+  color: Extract<BadgeProps$2['color'], 'base' | 'strong'>;
+  icon: IconProps$1['type'] | '';
+  size: Extract<BadgeProps$2['size'], 'base' | 'large' | 'large-100'>;
+  tone: Extract<
+    BadgeProps$2['tone'],
+    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
+  >;
+}
+
+interface ReactProps extends Partial<BadgeProps$1>, Pick<BadgeProps$2, 'id'> {}
+
+type BadgeProps = ReactProps;
+
+type BoxProps = ReactProps$1;
+
+type ButtonProps = ReactProps$2;
+
+type CheckboxProps = ReactProps$3;
+
+type DividerProps = ReactProps$4;
+
+type HeadingProps = ReactProps$5;
+
+type IconProps = ReactProps$6;
+
+type ImageProps = ReactProps$7;
+
+type LinkProps = ReactProps$8;
+
+type OptionProps = ReactProps$9;
+
+type OptionGroupProps = ReactProps$a;
+
+type ParagraphProps = ReactProps$b;
+
+type SectionProps = ReactProps$c;
+
+type SelectProps = ReactProps$d;
+
+type SpinnerProps = ReactProps$e;
+
+type StackProps = ReactProps$f;
+
+type TextProps = ReactProps$g;
+
+declare const Badge: React.ComponentType<React.PropsWithChildren<ReactProps>>;
+
+declare const Box: React.ComponentType<React.PropsWithChildren<ReactProps$1>>;
+
+declare const Button: React.ComponentType<
+  React.PropsWithChildren<ReactProps$2>
+>;
+
+declare const Checkbox: React.ComponentType<
+  React.PropsWithChildren<ReactProps$3>
+>;
+
+declare const Divider: React.ComponentType<
+  React.PropsWithChildren<ReactProps$4>
+>;
+
+declare const Heading: React.ComponentType<
+  React.PropsWithChildren<ReactProps$5>
+>;
+
+declare const Icon: React.ComponentType<React.PropsWithChildren<ReactProps$6>>;
+
+declare const Image: React.ComponentType<React.PropsWithChildren<ReactProps$7>>;
+
+declare const Link: React.ComponentType<React.PropsWithChildren<ReactProps$8>>;
+
+declare const Option: React.ComponentType<
+  React.PropsWithChildren<ReactProps$9>
+>;
+
+declare const OptionGroup: React.ComponentType<
+  React.PropsWithChildren<ReactProps$a>
+>;
+
+declare const Paragraph: React.ComponentType<
+  React.PropsWithChildren<ReactProps$b>
+>;
+
+declare const Section: React.ComponentType<
+  React.PropsWithChildren<ReactProps$c>
+>;
+
+declare const Select: React.ComponentType<
+  React.PropsWithChildren<ReactProps$d>
+>;
+
+declare const Spinner: React.ComponentType<
+  React.PropsWithChildren<ReactProps$e>
+>;
+
+declare const Stack: React.ComponentType<React.PropsWithChildren<ReactProps$f>>;
+
+declare const Text: React.ComponentType<React.PropsWithChildren<ReactProps$g>>;
+
+export {
+  Badge,
+  type BadgeProps,
+  Box,
+  type BoxProps,
+  Button,
+  type ButtonProps,
+  Checkbox,
+  type CheckboxProps,
+  Divider,
+  type DividerProps,
+  Heading,
+  type HeadingProps,
+  Icon,
+  type IconProps,
+  Image,
+  type ImageProps,
+  Link,
+  type LinkProps,
+  Option,
+  OptionGroup,
+  type OptionGroupProps,
+  type OptionProps,
+  Paragraph,
+  type ParagraphProps,
+  Section,
+  type SectionProps,
+  Select,
+  type SelectProps,
+  Spinner,
+  type SpinnerProps,
+  Stack,
+  type StackProps,
+  Text,
+  type TextProps,
+};
diff --git a/packages/ui-extensions-react/tsconfig.json b/packages/ui-extensions-react/tsconfig.json
index ac1324ecd2..a0a0f09ff2 100644
--- a/packages/ui-extensions-react/tsconfig.json
+++ b/packages/ui-extensions-react/tsconfig.json
@@ -1,11 +1,11 @@
 {
   "extends": "../../config/typescript/tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "build/ts",
     "rootDir": "src",
     "jsx": "react-jsx",
     "stripInternal": true,
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "importsNotUsedAsValues": "remove"
   },
   "include": ["config/typescript/faker.d.ts", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["src/**/*.example.tsx", "src/**/tests/**"],
diff --git a/packages/ui-extensions-react/vite.config.ts b/packages/ui-extensions-react/vite.config.ts
new file mode 100644
index 0000000000..d5864713c8
--- /dev/null
+++ b/packages/ui-extensions-react/vite.config.ts
@@ -0,0 +1,45 @@
+import {defineConfig} from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig(({mode}) => ({
+  plugins: [
+    dts({
+      entryRoot: './src',
+    }),
+  ],
+
+  build: {
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        /react-dom\/.*/,
+        /@shopify\/ui-extensions\/.*/,
+      ],
+      output: [
+        {
+          dir: './dist',
+          format: 'es',
+        },
+      ],
+      treeshake: false,
+    },
+    emptyOutDir: true,
+    sourcemap: mode === 'development',
+    lib: {
+      entry: {
+        admin: new URL('./src/surfaces/admin.ts', import.meta.url).pathname,
+        'customer-account': new URL(
+          './src/surfaces/customer-account.ts',
+          import.meta.url,
+        ).pathname,
+        checkout: new URL('./src/surfaces/checkout.ts', import.meta.url)
+          .pathname,
+        'point-of-sale': new URL(
+          './src/surfaces/point-of-sale.ts',
+          import.meta.url,
+        ).pathname,
+      },
+    },
+  },
+}));
diff --git a/packages/ui-extensions/package.json b/packages/ui-extensions/package.json
index e54dd3be90..e3d8c30614 100644
--- a/packages/ui-extensions/package.json
+++ b/packages/ui-extensions/package.json
@@ -29,11 +29,11 @@
   "exports": {
     "./admin": {
       "types": "./dist/surfaces/admin.d.ts",
-      "default": "./build/admin.mjs"
+      "default": "./dist/admin.mjs"
     },
     "./checkout": {
       "types": "./dist/surfaces/checkout.d.ts",
-      "default": "./build/checkout.mjs"
+      "default": "./dist/checkout.mjs"
     },
     "./customer-account": {
       "types": "./dist/surfaces/customer-account.d.ts",
diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts
index 67c8204d4d..5a40f0cfdd 100644
--- a/packages/ui-extensions/src/surfaces/admin/components.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components.ts
@@ -681,10 +681,6 @@ type InputBaseProps = Required<
 > & {
   defaultValue: string;
 };
-type InputReactProps = Pick<
-  TextFieldProps,
-  'onChange' | 'onFocus' | 'onInput' | 'onBlur'
->;
 
 declare const internals: unique symbol;
 declare class PreactInputElement
diff --git a/packages/ui-extensions/tsconfig.json b/packages/ui-extensions/tsconfig.json
index 9e919e61c7..a281bf31e1 100644
--- a/packages/ui-extensions/tsconfig.json
+++ b/packages/ui-extensions/tsconfig.json
@@ -2,9 +2,7 @@
   "extends": "../../config/typescript/tsconfig.base.json",
   "compilerOptions": {
     "rootDir": "src",
-    "outDir": "build/ts",
     "stripInternal": true,
-    "lib": ["DOM"],
     "importsNotUsedAsValues": "remove"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
diff --git a/packages/ui-extensions/vite.config.ts b/packages/ui-extensions/vite.config.ts
index 99ee835228..937381f162 100644
--- a/packages/ui-extensions/vite.config.ts
+++ b/packages/ui-extensions/vite.config.ts
@@ -10,12 +10,10 @@ export default defineConfig(({mode}) => ({
 
   build: {
     rollupOptions: {
-      external: ['react', 'react-dom'],
       output: [
         {
           dir: './dist',
           format: 'es',
-          // preserveModules: true,
         },
       ],
       treeshake: false,
diff --git a/tsconfig.repo.json b/tsconfig.repo.json
index 64ecf747df..98d4807673 100644
--- a/tsconfig.repo.json
+++ b/tsconfig.repo.json
@@ -1,7 +1,6 @@
 {
   "extends": "./config/typescript/tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "build/ts",
     "baseUrl": ".",
     "rootDir": "."
   },

From d9e78569c5422c78798f1ff23dcf0cc510bf08f0 Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Wed, 20 Nov 2024 10:05:15 -0500
Subject: [PATCH 10/12] Improve component types

---
 .../src/surfaces/admin/components.ts          | 2947 ++++++++++++++---
 1 file changed, 2413 insertions(+), 534 deletions(-)

diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts
index 5a40f0cfdd..9893f1be31 100644
--- a/packages/ui-extensions/src/surfaces/admin/components.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components.ts
@@ -1,521 +1,2440 @@
-import type {
-  IconProps as IconProps$1,
-  BadgeProps as BadgeProps$1,
-  BoxProps as BoxProps$1,
-  ButtonProps as ButtonProps$1,
-  TextFieldProps,
-  CheckboxProps as CheckboxProps$1,
-  DividerProps as DividerProps$1,
-  HeadingProps as HeadingProps$1,
-  ImageProps as ImageProps$1,
-  LinkProps as LinkProps$1,
-  OptionProps,
-  OptionGroupProps,
-  ParagraphProps as ParagraphProps$1,
-  SectionProps as SectionProps$1,
-  SelectProps,
-  SpinnerProps as SpinnerProps$1,
-  StackProps as StackProps$1,
-  TextProps as TextProps$1,
-} from '@shopify/ui-api-design';
-import type {MaybeAllValuesShorthandProperty} from '@shopify/ui-api-design/dist/shared/utils';
-import type {InteractionProps} from '@shopify/ui-api-design/dist/shared/pressable';
-
+declare const BaseClass: typeof globalThis.HTMLElement;
+declare abstract class PreactCustomElement extends BaseClass {}
+export type SizeKeyword =
+  | 'small-500'
+  | 'small-400'
+  | 'small-300'
+  | 'small-200'
+  | 'small-100'
+  | 'small'
+  | 'base'
+  | 'large'
+  | 'large-100'
+  | 'large-200'
+  | 'large-300'
+  | 'large-400'
+  | 'large-500';
+export type ColorKeyword = 'subdued' | 'base' | 'strong';
+export interface GlobalProps {
+  /**
+   * A unique identifier for the element.
+   */
+  id?: string;
+}
+export type BackgroundColorKeyword = 'transparent' | ColorKeyword;
+export interface BackgroundProps {
+  /**
+   * Adjust the background of the element.
+   *
+   * @default: 'transparent'
+   */
+  background?: BackgroundColorKeyword;
+}
+/**
+ * Tone is a property for defining the color treatment of a component.
+ *
+ * A tone can apply a grouping of colors to a component. For example,
+ * critical may have a specific text color and background color.
+ *
+ * In some cases, like for Banner, the tone may also affect the semantic and accessibility treatment of the component.
+ *
+ * @default 'auto'
+ */
+export type ToneKeyword =
+  | 'auto'
+  | 'neutral'
+  | 'info'
+  | 'success'
+  | 'caution'
+  | 'warning'
+  | 'critical';
+/**
+ * TODO: Update `any` type here after this is resolved
+ * https://github.com/Shopify/ui-api-design/issues/139
+ */
+export type ComponentChildren = any;
 export type IconType =
+  | 'adjust'
+  | 'affiliate'
+  | 'airplane'
+  | 'alert-bubble'
+  | 'alert-circle'
+  | 'alert-diamond'
+  | 'alert-location'
+  | 'alert-triangle'
+  | 'app-extension'
+  | 'apps'
+  | 'archive'
+  | 'arrow-down-circle'
+  | 'arrow-down-right'
+  | 'arrow-down'
+  | 'arrow-left-circle'
+  | 'arrow-left'
+  | 'arrow-right-circle'
+  | 'arrow-right'
+  | 'arrow-up-circle'
+  | 'arrow-up-right'
+  | 'arrow-up'
+  | 'arrows-in-horizontal'
+  | 'arrows-out-horizontal'
+  | 'attachment'
+  | 'automation'
+  | 'backspace'
+  | 'bag'
+  | 'bank'
+  | 'barcode'
+  | 'bill'
+  | 'blank'
+  | 'blog'
+  | 'book-open'
+  | 'book'
+  | 'bug'
+  | 'bullet'
+  | 'button-press'
+  | 'button'
+  | 'calculator'
+  | 'calendar-check'
+  | 'calendar-time'
+  | 'calendar'
+  | 'camera-flip'
+  | 'camera'
+  | 'caret-down'
+  | 'caret-up'
+  | 'cart-abandoned'
+  | 'cart-discount'
+  | 'cart-down'
+  | 'cart-sale'
+  | 'cart-up'
+  | 'cart'
+  | 'cash-dollar'
+  | 'cash-euro'
+  | 'cash-pound'
+  | 'cash-rupee'
+  | 'cash-yen'
+  | 'catalog-product'
+  | 'categories'
+  | 'channels'
+  | 'chart-cohort'
+  | 'chart-donut'
+  | 'chart-funnel'
+  | 'chart-histogram-first-last'
+  | 'chart-histogram-first'
+  | 'chart-histogram-flat'
+  | 'chart-histogram-full'
+  | 'chart-histogram-growth'
+  | 'chart-histogram-last'
+  | 'chart-histogram-second-last'
+  | 'chart-horizontal'
+  | 'chart-line'
+  | 'chart-popular'
+  | 'chart-stacked'
+  | 'chart-vertical'
+  | 'chat-referral'
+  | 'chat'
+  | 'check-circle'
+  | 'check'
+  | 'checkbox'
+  | 'chevron-down-circle'
+  | 'chevron-down'
+  | 'chevron-left-circle'
+  | 'chevron-left'
+  | 'chevron-right-circle'
+  | 'chevron-right'
+  | 'chevron-up-circle'
+  | 'chevron-up'
+  | 'circle'
+  | 'clipboard-check'
+  | 'clipboard-checklist'
+  | 'clipboard'
+  | 'clock'
+  | 'code-add'
+  | 'code'
+  | 'collection-featured'
+  | 'collection-list'
+  | 'collection-reference'
+  | 'collection'
+  | 'color-none'
+  | 'color'
+  | 'compass'
+  | 'complete'
+  | 'compose'
+  | 'confetti'
+  | 'connect'
+  | 'content'
+  | 'contract'
+  | 'corner-pill'
+  | 'corner-round'
+  | 'corner-square'
+  | 'credit-card-cancel'
+  | 'credit-card-percent'
+  | 'credit-card-reader-chip'
+  | 'credit-card-reader-tap'
+  | 'credit-card-reader'
+  | 'credit-card-secure'
+  | 'credit-card-tap-chip'
+  | 'credit-card'
+  | 'crop'
+  | 'currency-convert'
+  | 'cursor-banner'
+  | 'cursor-option'
+  | 'cursor'
+  | 'data-presentation'
+  | 'data-table'
+  | 'database-add'
+  | 'database-connect'
+  | 'database'
+  | 'delete'
+  | 'delivered'
+  | 'delivery'
+  | 'desktop'
+  | 'disabled'
+  | 'discount-code'
+  | 'discount'
+  | 'dns-settings'
+  | 'dock-floating'
+  | 'dock-side'
+  | 'domain-landing-page'
+  | 'domain-new'
+  | 'domain-redirect'
+  | 'domain'
+  | 'drag-drop'
+  | 'drag-handle'
+  | 'duplicate'
+  | 'edit'
+  | 'email-follow-up'
+  | 'email-newsletter'
+  | 'email'
+  | 'enabled'
+  | 'enter'
+  | 'envelope-soft-pack'
+  | 'envelope'
+  | 'exchange'
+  | 'exit'
+  | 'export'
+  | 'external'
+  | 'eye-check-mark'
+  | 'eye-dropper'
+  | 'eye-first'
+  | 'eyeglasses'
+  | 'fav'
+  | 'favicon'
+  | 'file'
+  | 'filter'
+  | 'flag'
+  | 'flip-horizontal'
+  | 'flip-vertical'
+  | 'flower'
+  | 'folder-add'
+  | 'folder-down'
+  | 'folder-remove'
+  | 'folder-up'
+  | 'folder'
+  | 'food'
+  | 'forklift'
+  | 'forms'
+  | 'games'
+  | 'gauge'
+  | 'geolocation'
+  | 'gift-card'
+  | 'gift'
+  | 'globe-asia'
+  | 'globe-europe'
+  | 'globe'
+  | 'grid'
+  | 'hashtag-decimal'
+  | 'hashtag'
+  | 'heart'
+  | 'hide'
+  | 'hollow-circle'
+  | 'home'
+  | 'icons'
+  | 'identity-card'
+  | 'image-add'
+  | 'image-alt'
+  | 'image-explore'
+  | 'image-magic'
+  | 'image-none'
+  | 'image-with-text-overlay'
+  | 'image'
+  | 'images'
+  | 'import'
+  | 'in-progress'
+  | 'incentive'
+  | 'incoming'
+  | 'incomplete'
+  | 'info'
+  | 'inventory-updated'
+  | 'inventory'
+  | 'iq'
+  | 'key'
+  | 'keyboard-hide'
+  | 'keyboard'
+  | 'label-printer'
+  | 'language-translate'
+  | 'language'
+  | 'layout-block'
+  | 'layout-buy-button-horizontal'
+  | 'layout-buy-button-vertical'
+  | 'layout-buy-button'
+  | 'layout-column-1'
+  | 'layout-columns-2'
+  | 'layout-columns-3'
+  | 'layout-footer'
+  | 'layout-header'
+  | 'layout-logo-block'
+  | 'layout-popup'
+  | 'layout-rows-2'
+  | 'layout-section'
+  | 'layout-sidebar-left'
+  | 'layout-sidebar-right'
+  | 'lightbulb'
+  | 'link'
+  | 'list-bulleted'
+  | 'list-numbered'
+  | 'live'
+  | 'location-none'
+  | 'location'
+  | 'lock'
+  | 'map'
+  | 'markets-euro'
+  | 'markets-rupee'
+  | 'markets-yen'
+  | 'markets'
+  | 'maximize'
+  | 'measurement-size'
+  | 'measurement-volume'
+  | 'measurement-weight'
+  | 'media-receiver'
+  | 'megaphone'
+  | 'mention'
+  | 'menu-horizontal'
+  | 'menu-vertical'
+  | 'menu'
+  | 'merge'
+  | 'metafields'
+  | 'metaobject-list'
+  | 'metaobject-reference'
+  | 'metaobject'
+  | 'microphone'
+  | 'minimize'
+  | 'minus-circle'
+  | 'minus'
+  | 'mobile'
+  | 'money-none'
+  | 'money'
+  | 'moon'
+  | 'nature'
+  | 'note-add'
+  | 'note'
+  | 'notification'
+  | 'order-draft'
+  | 'order-first'
+  | 'order-fulfilled'
+  | 'order-repeat'
+  | 'order-unfulfilled'
+  | 'order'
+  | 'orders-status'
+  | 'organization'
+  | 'outdent'
+  | 'outgoing'
+  | 'package-fulfilled'
+  | 'package-on-hold'
+  | 'package-returned'
+  | 'package'
+  | 'page-add'
+  | 'page-attachment'
+  | 'page-clock'
+  | 'page-down'
+  | 'page-heart'
+  | 'page-reference'
+  | 'page-remove'
+  | 'page-up'
+  | 'page'
+  | 'pagination-end'
+  | 'pagination-start'
+  | 'paint-brush-flat'
+  | 'paint-brush-round'
+  | 'paper-check'
+  | 'partially-complete'
+  | 'passkey'
+  | 'pause-circle'
+  | 'payment-capture'
+  | 'payment'
+  | 'payout-dollar'
+  | 'payout-euro'
+  | 'payout-pound'
+  | 'payout-rupee'
+  | 'payout-yen'
+  | 'payout'
+  | 'person-add'
+  | 'person-exit'
+  | 'person-lock'
+  | 'person-remove'
+  | 'person-segment'
+  | 'person'
+  | 'personalized-text'
+  | 'phone-in'
+  | 'phone-out'
+  | 'phone'
+  | 'pin'
+  | 'plan'
+  | 'play-circle'
+  | 'play'
+  | 'plus-circle'
+  | 'plus'
+  | 'point-of-sale'
+  | 'price-list'
+  | 'print'
+  | 'product-add'
+  | 'product-cost'
+  | 'product-list'
+  | 'product-reference'
+  | 'product-remove'
+  | 'product-return'
+  | 'product-unavailable'
+  | 'product'
+  | 'profile'
+  | 'question-circle'
+  | 'receipt-dollar'
+  | 'receipt-euro'
+  | 'receipt-folded'
+  | 'receipt-paid'
+  | 'receipt-pound'
+  | 'receipt-refund'
+  | 'receipt-rupee'
+  | 'receipt-yen'
+  | 'receipt'
+  | 'redo'
+  | 'referral-code'
+  | 'refresh'
+  | 'remove-background'
+  | 'reorder'
+  | 'replace'
+  | 'replay'
+  | 'reset'
+  | 'return'
+  | 'reward'
+  | 'rotate-left'
+  | 'rotate-right'
+  | 'sandbox'
+  | 'save'
+  | 'savings'
+  | 'search-list'
+  | 'search-recent'
+  | 'search-resource'
+  | 'search'
+  | 'select'
+  | 'send'
+  | 'settings'
+  | 'share'
+  | 'shield-check-mark'
+  | 'shield-none'
+  | 'shield-pending'
+  | 'shield-person'
+  | 'shipping-label'
+  | 'shopcodes'
+  | 'slideshow'
+  | 'smiley-happy'
+  | 'smiley-joy'
+  | 'smiley-neutral'
+  | 'smiley-sad'
+  | 'social-ad'
+  | 'social-post'
+  | 'sort-ascending'
+  | 'sort-descending'
+  | 'sort'
+  | 'sound'
+  | 'sports'
+  | 'star-filled'
+  | 'star'
+  | 'status-active'
+  | 'status'
+  | 'stop-circle'
+  | 'store-import'
+  | 'store-managed'
+  | 'store-online'
+  | 'store'
+  | 'sun'
+  | 'tablet'
+  | 'target'
+  | 'tax'
+  | 'team'
+  | 'text-align-center'
+  | 'text-align-left'
+  | 'text-align-right'
+  | 'text-block'
+  | 'text-bold'
+  | 'text-color'
+  | 'text-font-list'
+  | 'text-font'
+  | 'text-grammar'
+  | 'text-in-columns'
+  | 'text-in-rows'
+  | 'text-indent-remove'
+  | 'text-indent'
+  | 'text-italic'
+  | 'text-quote'
+  | 'text-title'
+  | 'text-underline'
+  | 'text-with-image'
+  | 'text'
+  | 'theme-edit'
+  | 'theme-store'
+  | 'theme-template'
+  | 'theme'
+  | 'thumbs-down'
+  | 'thumbs-up'
+  | 'tip-jar'
+  | 'toggle-off'
+  | 'toggle-on'
+  | 'transaction-fee-dollar'
+  | 'transaction-fee-euro'
+  | 'transaction-fee-pound'
+  | 'transaction-fee-rupee'
+  | 'transaction-fee-yen'
+  | 'transaction'
+  | 'transfer-in'
+  | 'transfer-internal'
+  | 'transfer-out'
+  | 'transfer'
+  | 'truck'
+  | 'undo'
+  | 'unknown-device'
+  | 'unlock'
+  | 'upload'
+  | 'variant'
+  | 'view'
+  | 'viewport-narrow'
+  | 'viewport-short'
+  | 'viewport-tall'
+  | 'viewport-wide'
+  | 'wallet'
+  | 'wand'
+  | 'watch'
+  | 'wifi'
+  | 'work'
+  | 'wrench'
+  | 'x-circle'
+  | 'x';
+export interface BadgeProps extends GlobalProps {
+  /**
+   * The content of the Badge.
+   */
+  children?: ComponentChildren;
+  /**
+   * Sets the tone of the Badge, based on the intention of the information being conveyed.
+   *
+   * @default 'auto'
+   */
+  tone?: ToneKeyword;
+  /**
+   * Modify the color to be more or less intense.
+   *
+   * @default 'base'
+   */
+  color?: ColorKeyword;
+  /**
+   * The type of icon to be displayed in the badge.
+   */
+  icon?: IconType;
+  /**
+   * The position of the icon in relation to the text.
+   */
+  iconPosition?: 'start' | 'end';
+  /**
+   * A label that describes the purpose or contents of the Badge. When set,
+   * it will be announced to users using assistive technologies and will
+   * provide them with more context.
+   *
+   * Use this when the badge text is not enough context for users using assistive technologies.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Adjusts the size.
+   *
+   * @default 'base'
+   */
+  size?: SizeKeyword;
+}
+/**
+ * Like `Extract`, but ensures that the extracted type is a strict subtype of the input type.
+ */
+export type ExtractStrict<T, U extends T> = Extract<T, U>;
+export type MaybeAllValuesShorthandProperty<T extends string> =
+  | T
+  | `${T} ${T}`
+  | `${T} ${T} ${T}`
+  | `${T} ${T} ${T} ${T}`;
+export type MaybeTwoValuesShorthandProperty<T extends string> = T | `${T} ${T}`;
+/**
+ * Prevents widening string literal types in a union to `string`.
+ * @example
+ * type PropName = 'foo' | 'bar' | string
+ * //   ^? string
+ * type PropName = 'foo' | 'bar' | (string & {})
+ * //   ^? 'foo' | 'bar' | (string & {})
+ */
+export type AnyString = string & {};
+export interface DisplayProps {
+  /**
+   * Sets the outer display type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).
+   *
+   * - `auto` the component's initial value. The actual value depends on the component and context.
+   * - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   * @default 'auto'
+   */
+  display?: 'auto' | 'none';
+}
+export interface AccessibilityRoleProps {
+  /**
+   * Sets the semantic meaning of the component’s content. When set,
+   * the role will be used by assistive technologies to help users
+   * navigate the page.
+   *
+   * Although, in HTML hosts, this property changes the element used,
+   * changing this property must not impact the visual styling of inside or outside of the box.
+   *
+   * @default 'generic'
+   */
+  accessibilityRole?: AccessibilityRole;
+}
+export type AccessibilityRole =
+  /**
+   * Used to indicate the primary content.
+   *
+   * In an HTML host, `main` will render a `<main>` element.
+   * Learn more about the [`<main>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs.
+   */
+  | 'main'
+  /**
+   * Used to indicate the component is a header.
+   *
+   * In an HTML host `header` will render a `<header>` element.
+   * Learn more about the [`<header>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs.
+   */
+  | 'header'
+  /**
+   * Used to display information such as copyright information, navigation links, and privacy statements.
+   *
+   * In an HTML host `footer` will render a `<footer>` element.
+   * Learn more about the [`<footer>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) in the MDN web docs.
+   */
+  | 'footer'
+  /**
+   * Used to indicate a generic section.
+   * Sections should always have a `Heading` or an accessible name provided in the `accessibilityLabel` property.
+   *
+   * In an HTML host `section` will render a `<section>` element.
+   * Learn more about the [`<section>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role) in the MDN web docs.
+   *
+   */
+  | 'section'
+  /**
+   * Used to designate a supporting section that relates to the main content.
+   *
+   * In an HTML host `aside` will render an `<aside>` element.
+   * Learn more about the [`<aside>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role) in the MDN web docs.
+   */
+  | 'aside'
+  /**
+   * Used to identify major groups of links used for navigating.
+   *
+   * In an HTML host `navigation` will render a `<nav>` element.
+   * Learn more about the [`<nav>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role) in the MDN web docs.
+   */
+  | 'navigation'
+  /**
+   * Used to identify a list of ordered items.
+   *
+   * In an HTML host `ordered-list` will render a `<ol>` element.
+   * Learn more about the [`<ol>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role) in the MDN web docs.
+   */
+  | 'ordered-list'
+  /**
+   * Used to identify an item inside a list of items.
+   *
+   * In an HTML host `list-item` will render a `<li>` element.
+   * Learn more about the [`<li>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role) in the MDN web docs.
+   */
+  | 'list-item'
+  /**
+   * Used to indicates the component acts as a divider that separates and distinguishes sections of content in a list of items.
+   *
+   * In an HTML host `list-item-separator` will render as `<li role="separator">`.
+   * Learn more about the [`<li>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and the [`separator` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) in the MDN web docs.
+   */
+  | 'list-item-separator'
+  /**
+   * Used to identify a list of unordered items.
+   *
+   * In an HTML host `unordered-list` will render a `<ul>` element.
+   * Learn more about the [`<ul>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role) in the MDN web docs.
+   */
+  | 'unordered-list'
+  /**
+   * Used to indicates the component acts as a divider that separates and distinguishes sections of content.
+   *
+   * In an HTML host `separator` will render as `<div role="separator">`.
+   * Learn more about the [`separator` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) in the MDN web docs.
+   */
+  | 'separator'
+  /**
+   * Used to define a live region containing advisory information for the user that is not important enough to be an alert.
+   *
+   * In an HTML host `status` will render as `<div role="status">`.
+   * Learn more about the [`status` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) in the MDN web docs.
+   */
+  | 'status'
+  /**
+   * Used for important, and usually time-sensitive, information.
+   *
+   * In an HTML host `alert` will render as `<div role="alert">`.
+   * Learn more about the [`alert` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) in the MDN web docs.
+   */
+  | 'alert'
+  /**
+   * Used to create a nameless container element which has no semantic meaning on its own.
+   *
+   * In an HTML host `generic'` will render a `<div>` element.
+   * Learn more about the [`generic` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role) in the MDN web docs.
+   */
+  | 'generic'
+  /**
+   * Used to strip the semantic meaning of an element, but leave the visual styling intact.
+   *
+   * Synonym for `none`
+   * Learn more about the [`presentation` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role) in the MDN web docs.
+   */
+  | 'presentation'
+  /**
+   * Used to strip the semantic meaning of an element, but leave the visual styling intact.
+   *
+   * Synonym for `presentation`
+   * Learn more about the [`none` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role) in the MDN web docs.
+   */
+  | 'none';
+export interface AccessibilityVisibilityProps {
+  /**
+   * Changes the visibility of the element.
+   *
+   * - `visible`: the element is visible to all users.
+   * - `hidden`: the element is removed from the accessibility tree but remains visible.
+   * - `exclusive`: the element is visually hidden but remains in the accessibility tree.
+   *
+   * @default 'visible'
+   */
+  accessibilityVisibility?: 'visible' | 'hidden' | 'exclusive';
+}
+export type PaddingKeyword = SizeKeyword | 'none';
+export interface PaddingProps {
+  /**
+   * Adjust the padding of all edges.
+   *
+   * 1-to-4-value syntax (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
+   * supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
+   *
+   * - 4 values: `block-start inline-end block-end inline-start`
+   * - 3 values: `block-start inline block-end`
+   * - 2 values: `block inline`
+   *
+   * For example:
+   * - `large` means block-start, inline-end, block-end and inline-start paddings are `large`.
+   * - `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.
+   * - `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
+   * - `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
+   *
+   * A padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.
+   *
+   * @default 'none'
+   */
+  padding?: MaybeAllValuesShorthandProperty<PaddingKeyword>;
+  /**
+   * Adjust the block-padding.
+   *
+   * - `large none` means block-start padding is `large`, block-end padding is `none`.
+   *
+   * This overrides the block value of `padding`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
+  /**
+   * Adjust the block-start padding.
+   *
+   * This overrides the block-start value of `paddingBlock`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingBlockStart?: PaddingKeyword | '';
+  /**
+   * Adjust the block-end padding.
+   *
+   * This overrides the block-end value of `paddingBlock`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingBlockEnd?: PaddingKeyword | '';
+  /**
+   * Adjust the inline padding.
+   *
+   * - `large none` means inline-start padding is `large`, inline-end padding is `none`.
+   *
+   * This overrides the inline value of `padding`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
+  /**
+   * Adjust the inline-start padding.
+   *
+   * This overrides the inline-start value of `paddingInline`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingInlineStart?: PaddingKeyword | '';
+  /**
+   * Adjust the inline-end padding.
+   *
+   * This overrides the inline-end value of `paddingInline`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingInlineEnd?: PaddingKeyword | '';
+}
+export type SizeUnits = `${number}px` | `${number}%` | `0`;
+export type SizeUnitsOrAuto = SizeUnits | 'auto';
+export type SizeUnitsOrNone = SizeUnits | 'none';
+export interface SizingProps {
+  /**
+   * Adjust the block size.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size
+   *
+   * @default 'auto'
+   */
+  blockSize?: SizeUnitsOrAuto;
+  /**
+   * Adjust the minimum block size.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size
+   *
+   * @default '0'
+   */
+  minBlockSize?: SizeUnits;
+  /**
+   * Adjust the maximum block size.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size
+   *
+   * @default 'none'
+   */
+  maxBlockSize?: SizeUnitsOrNone;
+  /**
+   * Adjust the inline size.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
+   *
+   * @default 'auto'
+   */
+  inlineSize?: SizeUnitsOrAuto;
+  /**
+   * Adjust the minimum inline size.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size
+   *
+   * @default '0'
+   */
+  minInlineSize?: SizeUnits;
+  /**
+   * Adjust the maximum inline size.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size
+   *
+   * @default 'none'
+   */
+  maxInlineSize?: SizeUnitsOrNone;
+}
+export type BorderStyleKeyword =
+  | 'none'
+  | 'solid'
+  | 'dashed'
+  | 'dotted'
+  | 'auto';
+export type BorderRadiusKeyword = SizeKeyword | 'none';
+/**
+ * Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.
+ */
+export type BorderShorthand =
+  | SizeKeyword
+  | `${SizeKeyword} ${ColorKeyword}`
+  | `${SizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`;
+export interface BorderProps {
+  /**
+   * Set the border via the shorthand property.
+   *
+   * This can be a size, optionally followed by a color, optionally followed by a style.
+   *
+   * If the color is not specified, it will be `base`.
+   *
+   * If the style is not specified, it will be `auto`.
+   *
+   * Values can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.
+   *
+   * @example
+   * // The following are equivalent:
+   * <Box border="large-100 strong dashed" />
+   * <Box borderWidth="large-100" borderColor="strong" borderStyle="dashed" />
+   *
+   * @default 'none' - equivalent to `none base auto`.
+   */
+  border?: BorderShorthand;
+  /**
+   * Set the width of the border.
+   *
+   * If set, it takes precedence over the `border` property's width.
+   *
+   * Like CSS, up to 4 values can be specified.
+   *
+   * If one value is specified, it applies to all sides.
+   *
+   * If two values are specified, they apply to the block sides and inline sides respectively.
+   *
+   * If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.
+   *
+   * If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
+   *
+   * @default '' - meaning no override
+   */
+  borderWidth?: MaybeAllValuesShorthandProperty<SizeKeyword> | '';
+  /**
+   * Set the style of the border.
+   *
+   * If set, it takes precedence over the `border` property's style.
+   *
+   * Like CSS, up to 4 values can be specified.
+   *
+   * If one value is specified, it applies to all sides.
+   *
+   * If two values are specified, they apply to the block sides and inline sides respectively.
+   *
+   * If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.
+   *
+   * If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
+   *
+   * @default '' - meaning no override
+   */
+  borderStyle?: MaybeAllValuesShorthandProperty<BorderStyleKeyword> | '';
+  /**
+   * Set the color of the border.
+   *
+   * If set, it takes precedence over the `border` property's color.
+   *
+   * @default '' - meaning no override
+   */
+  borderColor?: ColorKeyword | '';
+  /**
+   * Set the radius of the border.
+   *
+   * 1-to-4-value syntax (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
+   * supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
+   *
+   * - 4 values: `start-start start-end end-end end-start`
+   * - 3 values: `start-start (start-end & end-start) start-end`
+   * - 2 values: `(start-start & end-end) (start-end & end-start)`
+   *
+   * For example:
+   * - `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.
+   * - `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.
+   * - `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.
+   * - `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.
+   *
+   * @defaultValue 'none'
+   */
+  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
+}
+export interface BaseBoxProps
+  extends GlobalProps,
+    AccessibilityVisibilityProps,
+    BackgroundProps,
+    DisplayProps,
+    SizingProps,
+    PaddingProps,
+    BorderProps {
+  /**
+   * The content of the Box.
+   */
+  children?: ComponentChildren;
+  /**
+   * A label that describes the purpose or contents of the element.
+   * When set, it will be announced to users using assistive technologies and will provide them with more context.
+   *
+   * Only use this when the element's content is not enough context for users using assistive technologies.
+   */
+  accessibilityLabel?: string;
+}
+export interface BaseBoxPropsWithRole
+  extends BaseBoxProps,
+    AccessibilityRoleProps {}
+export interface BoxProps extends BaseBoxPropsWithRole {}
+export interface FocusEventProps {
+  /**
+   * Callback when the element loses focus.
+   */
+  onBlur?: () => void;
+  /**
+   * Callback when the element receives focus.
+   */
+  onFocus?: () => void;
+}
+export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
+  /**
+   * The behavior of the button.
+   *
+   * 'submit' - Used to indicate the component acts as a submit button, meaning it submits the closest form.
+   * 'button' - Used to indicate the component acts as a button, meaning it has no default action.
+   * 'reset' - Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).
+   *
+   * This property is ignored if the component supports `href` and it's set.
+   *
+   * @default 'button'
+   */
+  type?: 'submit' | 'button' | 'reset';
+  /**
+   * Callback when the button is activated.
+   * This will be called before the action indicated by `type`.
+   */
+  onClick?: () => void;
+  /**
+   * Disables the button, meaning it cannot be clicked or receive focus.
+   */
+  disabled?: boolean;
+  /**
+   * Replaces content with a loading indicator while a background action is being performed.
+   *
+   * This also disables the button.
+   */
+  loading?: boolean;
+}
+export interface LinkBehaviorProps extends FocusEventProps {
+  /**
+   * The URL to link to.
+   * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
+   */
+  href?: string;
+  /**
+   * Specifies where to display the linked URL
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
+   */
+  target?: string;
+  /**
+   * Causes the browser to treat the linked URL as a download. Download only works for same-origin URLs, or the blob: and data: schemes.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
+   */
+  download?: boolean;
+  /**
+   * Callback when the link is activated.
+   * This will be called before navigating to the location specified by `href`.
+   */
+  onClick?: () => void;
+}
+export interface InteractionProps {
+  /**
+   * ID of a component that should respond to activations (e.g. clicks) on this pressable.
+   *
+   * See `activateAction` for how to control the behavior of the target.
+   */
+  activateTarget?: string;
+  /**
+   * Sets the action the `activateTarget` should take when this pressable is activated.
+   *
+   * See the documentation of particular components for the actions they support.
+   *
+   * @default 'auto' - a default action for the target component.
+   */
+  activateAction?: 'auto' | 'show' | 'hide' | 'toggle' | 'copy';
+}
+export interface BasePressableProps
+  extends ButtonBehaviorProps,
+    LinkBehaviorProps {}
+export interface ButtonProps extends GlobalProps, BasePressableProps {
+  /**
+   * A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.
+   *
+   * Use this when using only an icon or the button text is not enough context
+   * for users using assistive technologies.
+   */
+  accessibilityLabel?: string;
+  /**
+   * The content of the Button.
+   */
+  children?: ComponentChildren;
+  /**
+   * The type of icon to be displayed in the button.
+   */
+  icon?: IconType;
+  /**
+   * Changes the visual appearance of the Button.
+   *
+   * @default 'auto' - the variant is automatically determined by the Button's context
+   */
+  variant?: 'auto' | 'primary' | 'secondary' | 'tertiary';
+  /**
+   * Sets the tone of the Button, based on the intention of the information being conveyed.
+   *
+   * @default 'auto'
+   */
+  tone?: ToneKeyword;
+  /**
+   * Indicate the text language. Useful when the text is in a different language than the rest of the page.
+   * It will allow assistive technologies such as screen readers to invoke the correct pronunciation.
+   * [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)
+   */
+  lang?: string;
+}
+export interface BaseInputProps {
+  /**
+   * An identifier for the field that is unique within the nearest
+   * containing `Form` component.
+   */
+  name?: string;
+  /**
+   * Disables the field, disallowing any interaction.
+   */
+  disabled?: boolean;
+}
+export interface InputProps extends BaseInputProps {
+  /**
+   * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+   */
+  onChange?: (newValue: string) => void;
+  /**
+   * Callback when the user makes any changes in the field.
+   */
+  onInput?: (newValue: string) => void;
+  /**
+   * The current value for the field. If omitted, the field will be empty.
+   */
+  value?: string;
+  /**
+   * The default value for the field.
+   */
+  defaultValue?: string;
+}
+export interface FieldErrorProps {
+  /**
+   * Indicate an error to the user. The field will be given a specific stylistic treatment
+   * to communicate problems that have to be resolved immediately.
+   */
+  error?: string;
+}
+export interface BasicFieldProps extends FieldErrorProps {
+  /**
+   * Whether the field needs a value. This requirement adds semantic value
+   * to the field, but it will not cause an error to appear automatically.
+   * If you want to present an error when this field is empty, you can do
+   * so with the `error` prop.
+   */
+  required?: boolean;
+  /**
+   * Content to use as the field label.
+   */
+  label?: string;
+}
+export interface FieldDetailsProps {
+  /**
+   * Additional text to provide context or guidance for the field.
+   * This text is displayed along with the field and its label
+   * to offer more information or instructions to the user.
+   *
+   * This will also be exposed to screen reader users.
+   */
+  details?: string;
+}
+export interface FieldProps
+  extends BasicFieldProps,
+    InputProps,
+    FocusEventProps,
+    FieldDetailsProps {
+  /**
+   * A short hint that describes the expected value of the field.
+   */
+  placeholder?: string;
+}
+export interface BaseTextFieldProps extends FieldProps {
+  /**
+   * The field cannot be edited by the user. It is focusable will be announced by screen readers.
+   */
+  readOnly?: boolean;
+}
+export interface FieldDecorationProps {
+  /**
+   * A value to be displayed immediately after the editable portion of the field.
+   *
+   * This is useful for displaying an implied part of the value, such as "@shopify.com", or "%".
+   *
+   * This cannot be edited by the user, and it isn't included in the value of the field.
+   *
+   * It may not be displayed until the user has interacted with the input.
+   * For example, an inline label may take the place of the suffix until the user focuses the input.
+   *
+   * @default ''
+   */
+  suffix?: string;
+  /**
+   * A value to be displayed immediately before the editable portion of the field.
+   *
+   * This is useful for displaying an implied part of the value, such as "https://" or "+353".
+   *
+   * This cannot be edited by the user, and it isn't included in the value of the field.
+   *
+   * It may not be displayed until the user has interacted with the input.
+   * For example, an inline label may take the place of the prefix until the user focuses the input.
+   *
+   * @default ''
+   */
+  prefix?: string;
+  /**
+   * The type of icon to be displayed in the field.
+   */
+  icon?: IconType;
+  /**
+   * Additional content to be displayed in the field.
+   * Commonly used to display an icon that activates a tooltip providing more information.
+   */
+  accessory?: ComponentChildren;
+}
+export interface MinMaxLengthProps {
+  /**
+   * Specifies the maximum number of characters allowed.
+   */
+  maxLength?: number;
+  /**
+   * Specifies the min number of characters allowed.
+   */
+  minLength?: number;
+}
+export interface BaseSelectableProps {
+  /**
+   * A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced.
+   * This can also be used to display a control without a visual label, while still providing context to users using screen readers.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Disables the control, disallowing any interaction.
+   */
+  disabled?: boolean;
+  /**
+   * The value used in form data when the control is checked.
+   */
+  value?: string;
+}
+export interface BaseOptionProps extends BaseSelectableProps {
+  /**
+   * Whether the control is active.
+   */
+  selected?: boolean;
+  /**
+   * Whether the control is active by default.
+   */
+  defaultSelected?: boolean;
+  /**
+   * The content to use as the label.
+   */
+  children?: ComponentChildren;
+}
+export interface BaseCheckableProps extends BaseSelectableProps {
+  /**
+   * Visual content to use as the control label.
+   */
+  label?: string;
+  /**
+   * Whether the control is active.
+   */
+  checked?: boolean;
+  /**
+   * Whether the control is active by default.
+   */
+  defaultChecked?: boolean;
+  /**
+   * An identifier for the control that is unique within the nearest
+   * containing `Form` component.
+   */
+  name?: string;
+  /**
+   * A callback that is run whenever the control is changed.
+   */
+  onChange?: (checked: boolean) => void;
+  /**
+   * A callback that is run whenever the control is changed.
+   */
+  onInput?: (checked: boolean) => void;
+}
+export interface CheckboxProps extends GlobalProps, BaseCheckableProps {
+  /**
+   * Indicate an error to the user. The field will be given a specific stylistic treatment
+   * to communicate problems that have to be resolved immediately.
+   */
+  error?: string;
+  /**
+   * Additional text to provide context or guidance for the input.
+   * This text is displayed along with the input and its label
+   * to offer more information or instructions to the user.
+   */
+  details?: string;
+  /**
+   * Whether to display the checkbox in an indeterminate state (neither checked or unchecked).
+   *
+   * In terms of appearance, this takes priority over the `checked` prop.
+   * But this is purely a visual change.
+   * Whether the value is submitted along with a form is still down to the `checked` prop.
+   */
+  indeterminate?: boolean;
+  /**
+   * Whether the field needs a value. This requirement adds semantic value
+   * to the field, but it will not cause an error to appear automatically.
+   * If you want to present an error when this field is empty, you can do
+   * so with the `error` prop.
+   */
+  required?: boolean;
+}
+export interface AutocompleteProps<
+  AutocompleteField extends AnyAutocompleteField,
+> {
+  /**
+   * A hint as to the intended content of the field.
+   *
+   * When set to `true`, this property indicates that the field should support
+   * autofill, but you do not have any more semantic information on the intended
+   * contents.
+   *
+   * When set to `false`, you are indicating that this field contains sensitive
+   * information, or contents that are never saved, like one-time codes.
+   *
+   * Alternatively, you can provide value which describes the
+   * specific data you would like to be entered into this field during autofill.
+   *
+   * @see Learn more about the set of {@link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens|autocomplete values} supported in browsers.
+   */
+  autocomplete?:
+    | AutocompleteField
+    | `${AutocompleteSection} ${AutocompleteField}`
+    | `${AutocompleteGroup} ${AutocompleteField}`
+    | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}`
+    | boolean;
+}
+/**
+ * The “section” scopes the autocomplete data that should be inserted
+ * to a specific area of the page.
+ *
+ * Commonly used when there are multiple fields with the same autocomplete needs
+ * in the same page. For example: 2 shipping address forms in the same page.
+ */
+export type AutocompleteSection = `section-${string}`;
+/**
+ * The contact information group the autocomplete data should be sourced from.
+ */
+export type AutocompleteGroup = 'shipping' | 'billing';
+/**
+ * The contact information subgroup the autocomplete data should be sourced from.
+ */
+export type AutocompleteAddressGroup = 'fax' | 'home' | 'mobile' | 'pager';
+export type AutocompleteFieldTelephoneAlias = 'tel' | 'telephone';
+export type AutocompleteFieldBirthdayAlias = 'bday' | 'birthday';
+export type AutocompleteFieldCreditCardAlias = 'cc' | 'credit-card';
+export type AutocompleteFieldInstantMessageAlias = 'impp' | 'instant-message';
+export type AutocompleteFieldSecurityCodeAlias = 'csc' | 'security-code';
+export type AnyAutocompleteField =
+  | 'additional-name'
+  | 'address-level1'
+  | 'address-level2'
+  | 'address-level3'
+  | 'address-level4'
+  | 'address-line1'
+  | 'address-line2'
+  | 'address-line3'
+  | 'country-name'
+  | 'country'
+  | 'current-password'
+  | 'email'
+  | 'family-name'
+  | 'given-name'
+  | 'honorific-prefix'
+  | 'honorific-suffix'
+  | 'language'
+  | 'name'
+  | 'new-password'
+  | 'nickname'
+  | 'one-time-code'
+  | 'organization-title'
+  | 'organization'
+  | 'photo'
+  | 'postal-code'
+  | 'sex'
+  | 'street-address'
+  | 'transaction-amount'
+  | 'transaction-currency'
+  | 'url'
+  | 'username'
+  | `${AutocompleteFieldBirthdayAlias}-day`
+  | `${AutocompleteFieldBirthdayAlias}-month`
+  | `${AutocompleteFieldBirthdayAlias}-year`
+  | `${AutocompleteFieldBirthdayAlias}`
+  | `${AutocompleteFieldCreditCardAlias}-additional-name`
+  | `${AutocompleteFieldCreditCardAlias}-expiry-month`
+  | `${AutocompleteFieldCreditCardAlias}-expiry-year`
+  | `${AutocompleteFieldCreditCardAlias}-expiry`
+  | `${AutocompleteFieldCreditCardAlias}-family-name`
+  | `${AutocompleteFieldCreditCardAlias}-given-name`
+  | `${AutocompleteFieldCreditCardAlias}-name`
+  | `${AutocompleteFieldCreditCardAlias}-number`
+  | `${AutocompleteFieldCreditCardAlias}-${AutocompleteFieldSecurityCodeAlias}`
+  | `${AutocompleteFieldCreditCardAlias}-type`
+  | `${AutocompleteAddressGroup} email`
+  | `${AutocompleteFieldInstantMessageAlias}`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldInstantMessageAlias}`
+  | `${AutocompleteFieldTelephoneAlias}`
+  | `${AutocompleteFieldTelephoneAlias}-area-code`
+  | `${AutocompleteFieldTelephoneAlias}-country-code`
+  | `${AutocompleteFieldTelephoneAlias}-extension`
+  | `${AutocompleteFieldTelephoneAlias}-local-prefix`
+  | `${AutocompleteFieldTelephoneAlias}-local-suffix`
+  | `${AutocompleteFieldTelephoneAlias}-local`
+  | `${AutocompleteFieldTelephoneAlias}-national`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-area-code`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-country-code`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-extension`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-prefix`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-suffix`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-national`;
+export type TextAutocompleteField = ExtractStrict<
+  AnyAutocompleteField,
+  | 'additional-name'
+  | 'address-level1'
+  | 'address-level2'
+  | 'address-level3'
+  | 'address-level4'
+  | 'address-line1'
+  | 'address-line2'
+  | 'address-line3'
+  | 'country-name'
+  | 'country'
+  | 'family-name'
+  | 'given-name'
+  | 'honorific-prefix'
+  | 'honorific-suffix'
+  | 'language'
+  | 'name'
+  | 'nickname'
+  | 'one-time-code'
+  | 'organization-title'
+  | 'organization'
+  | 'postal-code'
+  | 'sex'
+  | 'street-address'
+  | 'transaction-currency'
+  | 'username'
+  | `${AutocompleteFieldCreditCardAlias}-name`
+  | `${AutocompleteFieldCreditCardAlias}-given-name`
+  | `${AutocompleteFieldCreditCardAlias}-additional-name`
+  | `${AutocompleteFieldCreditCardAlias}-family-name`
+  | `${AutocompleteFieldCreditCardAlias}-type`
+>;
+export interface DividerProps extends GlobalProps {
+  /**
+   * Specify the direction of the divider.
+   *
+   * An 'inline' divider separates blocks of content.
+   * In a left-to-right or right-to-left writing mode, this would typically be a horizontal line.
+   *
+   * A 'block' divider separates items within the current line of content.
+   * In a left-to-right or right-to-left writing mode, this would typically be a vertical line.
+   *
+   * @default 'inline'
+   */
+  direction?: 'inline' | 'block';
+  /**
+   * Modify the color to be more or less intense.
+   *
+   * @default 'base'
+   */
+  color?: ColorKeyword;
+}
+export type SpacingKeyword = SizeKeyword | 'none';
+export interface GapProps {
+  /**
+   * Adjust spacing between elements.
+   *
+   * A single value applies to both axes.
+   * A pair of values (eg `large-100 large-500`) can be used to set the inline and block axes respectively.
+   *
+   * @default 'auto'
+   */
+  gap?: MaybeTwoValuesShorthandProperty<SpacingKeyword>;
+  /**
+   * Adjust spacing between elements in the block axis.
+   *
+   * This overrides the row value of `gap`.
+   *
+   * @default '' - meaning no override
+   */
+  rowGap?: SpacingKeyword | '';
+  /**
+   * Adjust spacing between elements in the inline axis.
+   *
+   * This overrides the column value of `gap`.
+   *
+   * @default '' - meaning no override
+   */
+  columnGap?: SpacingKeyword | '';
+}
+export type BaselinePosition = 'baseline' | 'first baseline' | 'last baseline';
+export type ContentDistribution =
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+  | 'stretch';
+export type ContentPosition = 'center' | 'start' | 'end';
+export type OverflowPosition =
+  | `unsafe ${ContentPosition}`
+  | `safe ${ContentPosition}`;
+/**
+ * Align items sets the align-self value on all direct children as a group.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+ */
+export type AlignItemsKeyword =
+  | 'normal'
+  | 'stretch'
+  | BaselinePosition
+  | OverflowPosition
+  | ContentPosition;
+/**
+ * Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+ */
+export type JustifyContentKeyword =
+  | 'normal'
+  | ContentDistribution
+  | OverflowPosition
+  | ContentPosition;
+/**
+ *Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+ */
+export type AlignContentKeyword =
+  | 'normal'
+  | BaselinePosition
+  | ContentDistribution
+  | OverflowPosition
+  | ContentPosition;
+export interface HeadingProps
+  extends GlobalProps,
+    AccessibilityVisibilityProps {
+  /** A unique identifier for the field. */
+  id?: string;
+  /**
+   * The content of the Heading.
+   */
+  children?: ComponentChildren;
+  /**
+   * Sets the semantic meaning of the component’s content. When set,
+   * the role will be used by assistive technologies to help users
+   * navigate the page.
+   *
+   * @default 'heading'
+   *
+   * - `heading` defines the element as a heading to a page or section.
+   * - `presentation` means the heading level will be stripped,
+   * and will prevent the element’s implicit ARIA semantics from
+   * being exposed to the accessibility tree.
+   * - `none` is a synonym for the `presentation` role.
+   */
+  accessibilityRole?:
+    | 'heading'
+    | ExtractStrict<AccessibilityRole, 'presentation' | 'none'>;
+  /**
+   * Truncates the text content to the specified number of lines.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
+   *
+   * @default 'none'
+   */
+  lineClamp?: number | 'none';
+}
+export interface IconProps extends GlobalProps {
+  /**
+   * Sets the tone of the Icon, based on the intention of the information being conveyed.
+   *
+   * @default 'auto'
+   */
+  tone?: ToneKeyword;
+  /**
+   * Modify the color to be more or less intense.
+   *
+   * @default 'base'
+   */
+  color?: ColorKeyword;
+  /**
+   * Adjusts the size of the icon.
+   *
+   * @default 'base'
+   */
+  size?: SizeKeyword | 'fill';
+  type?: IconType | AnyString;
+}
+export interface BaseImageProps {
+  /**
+   * An alternative text description that describe the image for the reader to
+   * understand what it is about. It is extremely useful for both users using
+   * assistive technology and sighted users. A well written `description`
+   * provides people with visual impairments the ability to participate in
+   * consuming non-text content. When a screen readers encounters an `Image`,
+   * the description is read and announced aloud. If an image fails to load,
+   * potentially due to a poor connection, the `description` is displayed on
+   * screen instead. This has the benefit of letting a sighted buyer know an
+   * image was meant to load here, but as an alternative, they’re still able to
+   * consume the text content. Read
+   * [considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204)
+   * to learn more.
+   *
+   * @default `''`
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt
+   */
+  alt?: string;
+  /**
+   * A set of media conditions and their corresponding sizes.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes
+   */
+  sizes?: string;
+  /**
+   * The image source (either a remote URL or a local file resource).
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src
+   */
+  src?: string;
+  /**
+   * A set of image sources and their width or pixel density descriptors.
+   *
+   * This overrides the `src` property.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset
+   */
+  srcSet?: string;
+}
+export type optionalSpace = '' | ' ';
+export interface ImageProps extends GlobalProps, BaseImageProps {
+  /**
+   * Sets the semantic meaning of the component’s content. When set,
+   * the role will be used by assistive technologies to help users
+   * navigate the page.
+   *
+   * @default 'img'. Note that the 'img' role doesn't need to be applied if
+   * the host applies it for you; for example, an HTML host rendering
+   * an <img> element should NOT apply the `img` role.
+   */
+  accessibilityRole?:
+    | 'img'
+    | ExtractStrict<AccessibilityRole, 'presentation' | 'none'>;
+  /**
+   *
+   * The displayed inline width of the image.
+   *
+   * `fill`: the image will takes up 100% of the available inline-size.
+   * `auto`: the image will be displayed at its natural size.
+   *
+   * @default 'fill'
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width
+   */
+  inlineSize?: 'fill' | 'auto';
+  /**
+   *
+   * The aspect ratio of the image.
+   * This will be respected even if the image hasn’t loaded yet.
+   *
+   * @default ''
+   */
+  aspectRatio?: `${number}${optionalSpace}/${optionalSpace}${number}` | number;
+  /**
+   * Determines the loading behavior of the image:
+   * - `eager`: Immediately loads the image, irrespective of its position within the visible viewport.
+   * - `lazy`: Delays loading the image until it approaches a specified distance from the viewport.
+   *
+   * @default `eager`
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
+   */
+  loading?: 'eager' | 'lazy';
+  /**
+   * Invoked when load completes successfully.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+   */
+  onLoad?: () => void;
+  /**
+   * Invoked on load error.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+   */
+  onError?: () => void;
+}
+export interface LinkProps extends GlobalProps, LinkBehaviorProps {
+  /**
+   * The content of the Link.
+   */
+  children?: ComponentChildren;
+  /**
+   * Sets the tone of the Link, based on the intention of the information being conveyed.
+   *
+   * @default 'auto'
+   */
+  tone?: ToneKeyword;
+  /**
+   * A label that describes the purpose or contents of the Link. It will be read to users using assistive technologies such as screen readers.
+   *
+   * Use this when using only an icon or the content of the link is not enough context
+   * for users using assistive technologies.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Indicate the text language. Useful when the text is in a different language than the rest of the page.
+   * It will allow assistive technologies such as screen readers to invoke the correct pronunciation.
+   * [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)
+   */
+  lang?: string;
+}
+export interface BaseTypographyProps {
+  /**
+   * Sets the color of the Typography component, based on the intention of the information being conveyed.
+   *
+   * @default 'base'
+   */
+  color?: ColorKeyword;
+  /**
+   * Sets the tone of the Typography component, based on the intention of the information being conveyed.
+   *
+   * @default 'auto'
+   */
+  tone?: ToneKeyword;
+  /**
+   * Set the numeric properties of the font
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
+   *
+   * @default 'auto' - inherit from the parent element
+   */
+  fontVariantNumeric?: 'auto' | 'normal' | 'tabular-nums';
+}
+export interface ParagraphProps
+  extends GlobalProps,
+    BaseTypographyProps,
+    AccessibilityVisibilityProps {
+  /**
+   * Truncates the text content to the specified number of lines.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
+   *
+   * @default 'none' - no truncation is applied
+   */
+  lineClamp?: number | 'none';
+}
+export interface SectionProps extends GlobalProps {
+  /**
+   * The content of the Section.
+   */
+  children?: ComponentChildren;
+  /**
+   * A label used to describe the section that will be announced by assistive technologies.
+   *
+   * When no `heading` property is provided or included as a children of the Section, you **must** provide an
+   * `accessibilityLabel` to describe the Section. This is important as it allows assistive technologies to provide
+   * the right context to users.
+   */
+  accessibilityLabel?: string;
+  /**
+   * A title that describes the content of the section.
+   */
+  heading?: string;
+  /**
+   * Adjust the padding of all edges.
+   *
+   * `auto`: applies padding that is appropriate for the element. Note that it may result in no padding if Shopify
+   * believes this is the right design decision in a particular context.
+   *
+   * `none`: removes all padding from the element. This can be useful when elements inside the Section need to span
+   * to the edge of the Section. For example, a full-width image. In this case, rely on `Box` with a padding of 'base'
+   * to bring back the desired padding for the rest of the content.
+   *
+   * @default: "auto"
+   */
+  padding?: 'auto' | 'none';
+}
+export interface SelectProps
+  extends GlobalProps,
+    FieldProps,
+    AutocompleteProps<AnyAutocompleteField>,
+    FocusEventProps {
+  /**
+   * The options a user can select from.
+   *
+   * Accepts `Option` and `OptionGroup` components.
+   */
+  children?: ComponentChildren;
+}
+export interface OptionProps extends GlobalProps, BaseOptionProps {}
+export interface OptionGroupProps extends GlobalProps {
+  /**
+   * Whether the options within this group can be selected or not.
+   */
+  disabled?: boolean;
+  /**
+   * The user-facing label for this group of options.
+   */
+  label?: string;
+  /**
+   * The options a user can select from.
+   *
+   * Accepts `Option` components.
+   */
+  children?: ComponentChildren;
+}
+export interface SpinnerProps extends GlobalProps {
+  /**
+   * Adjusts the size of the spinner icon.
+   *
+   * @default 'base'
+   */
+  size?:
+    | SizeKeyword
+    /**
+     * `fill` will cause the spinner icon to take up 100% of the available inline space, and maintain a 1:1 aspect ratio.
+     */
+    | 'fill';
+  /**
+   * A label that describes the purpose of the progress. When set,
+   * it will be announced to users using assistive technologies and will
+   * provide them with more context.
+   *
+   * Use it to provide context of what is loading.
+   *
+   * @default 'Loading...'
+   */
+  accessibilityLabel?: string;
+}
+export interface StackProps extends BaseBoxPropsWithRole, GapProps {
+  /**
+   * The content of the Stack.
+   */
+  children?: ComponentChildren;
+  /**
+   * Sets how the Stack's children are placed within the Stack.
+   *
+   * @default 'inline'
+   */
+  direction?: 'inline' | 'block';
+  /**
+   * Aligns the Stack along the main axis.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+   * @default 'normal'
+   */
+  justifyContent: JustifyContentKeyword;
+  /**
+   * Aligns the Stack's children along the cross axis.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+   * @default 'normal'
+   */
+  alignItems: AlignItemsKeyword;
+  /**
+   * Aligns the Stack along the cross axis.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+   * @default 'normal'
+   */
+  alignContent: AlignContentKeyword;
+}
+export interface TextProps
+  extends GlobalProps,
+    AccessibilityVisibilityProps,
+    BaseTypographyProps,
+    DisplayProps {
+  /**
+   * The content of the Text.
+   */
+  children?: ComponentChildren;
+  /**
+   * Use to emphasize a word or a group of words.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
+   * Provide semantic meaning and default styling to the text.
+   *
+   * Other presentation properties on `<Text>` override the default styling.
+   *
+   * @default 'generic'
+   */
+  type?: TextType;
+}
+export type TextType =
+  /**
+   * Indicate the text is contact information. Typically used for addresses.
+   *
+   * This must have `inline` layout (despite the default being `block` in HTML hosts).
+   *
+   * Surfaces may apply styling to this type.
+   *
+   * In an HTML host, the text will be rendered in an `<address>` element.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address
+   */
+  | 'address'
+  /**
+   * Indicate the text is no longer accurate or no longer relevant. One such use-case is discounted prices.
+   *
+   * Surfaces should apply styling to this type to suggest its content no longer applies.
+   *
+   * In an HTML host, the text will be rendered in a `<s>` element.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
+   */
+  | 'redundant'
+  /**
+   * Indicate the text is marked or highlighted and relevant to the user’s current action.
+   * One such use-case is to indicate the characters that matched a search query.
+   *
+   * Surfaces should apply styling to this type to draw attention to the content.
+   *
+   * In an HTML host, the text will be rendered in a `<mark>` element.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
+   */
+  | 'mark'
+  /**
+   * Indicate emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.
+   *
+   * Surfaces should apply styling to this type to distinguish it from surrounding text. Italicization is a common choice, but not required.
+   *
+   * In an HTML host, the text will be rendered in an `<em>` element.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
+   */
+  | 'emphasis'
+  /**
+   * Indicate an offset from the normal prose of the text. Typically used to indicate
+   * a foreign word, fictional character thoughts, or when the text refers to the definition of a word
+   * instead of representing its semantic meaning.
+   *
+   * Surfaces should italicize this content by default.
+   *
+   * In an HTML host, the text will be rendered in a `<i>` tag.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
+   */
+  | 'offset'
+  /**
+   * Indicate strong importance, seriousness, or urgency.
+   *
+   * Surfaces should render this content bold by default.
+   *
+   * In an HTML host, the text will be rendered in a `<strong>` tag.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
+   */
+  | 'strong'
+  /**
+   * No additional semantics or styling is applied.
+   *
+   * Surfaces must not apply any default styling to this type.
+   *
+   * In an HTML host, the text will be rendered in a `<span>` tag.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
+   */
+  | 'generic';
+export interface TextFieldProps
+  extends GlobalProps,
+    BaseTextFieldProps,
+    MinMaxLengthProps,
+    AutocompleteProps<TextAutocompleteField>,
+    FieldDecorationProps {}
+type IconType$1 =
   | 'wrench'
-  | 'viewport-tall'
-  | 'viewport-short'
-  | 'viewport-narrow'
-  | 'wifi'
-  | 'work'
   | 'watch'
+  | 'wifi'
   | 'wallet'
-  | 'wand'
-  | 'upload'
-  | 'undo'
+  | 'viewport-short'
   | 'viewport-wide'
+  | 'work'
+  | 'viewport-narrow'
+  | 'upload'
   | 'unknown-device'
+  | 'viewport-tall'
+  | 'undo'
   | 'transaction'
-  | 'transfer-internal'
   | 'transfer-in'
-  | 'transfer-out'
-  | 'transaction-fee-euro'
   | 'transaction-fee-yen'
+  | 'transfer-internal'
   | 'transaction-fee-rupee'
-  | 'transaction-fee-dollar'
+  | 'transfer-out'
   | 'transaction-fee-pound'
-  | 'thumbs-up'
   | 'transfer'
-  | 'tip-jar'
-  | 'theme-template'
-  | 'thumbs-down'
-  | 'theme-store'
+  | 'transaction-fee-euro'
+  | 'toggle-on'
+  | 'wand'
+  | 'toggle-off'
   | 'theme'
+  | 'thumbs-down'
+  | 'theme-template'
   | 'theme-edit'
+  | 'thumbs-up'
+  | 'tip-jar'
+  | 'theme-store'
   | 'text-with-image'
+  | 'text-quote'
   | 'text'
-  | 'toggle-off'
   | 'text-underline'
-  | 'text-title'
-  | 'text-in-columns'
-  | 'text-indent'
   | 'text-italic'
+  | 'text-in-columns'
+  | 'transaction-fee-dollar'
+  | 'text-title'
   | 'text-font'
-  | 'text-font-list'
   | 'text-grammar'
+  | 'text-in-rows'
   | 'text-color'
+  | 'text-font-list'
   | 'text-block'
-  | 'text-bold'
-  | 'toggle-on'
   | 'text-align-right'
-  | 'text-align-center'
+  | 'text-bold'
   | 'text-align-left'
-  | 'tablet'
   | 'team'
-  | 'store'
   | 'tax'
-  | 'sun'
+  | 'text-align-center'
+  | 'tablet'
+  | 'store-managed'
+  | 'store'
+  | 'target'
   | 'store-online'
-  | 'store-import'
   | 'stop-circle'
-  | 'target'
-  | 'store-managed'
-  | 'star-filled'
   | 'status'
+  | 'status-active'
+  | 'sun'
+  | 'star-filled'
+  | 'sound'
   | 'sort-descending'
-  | 'text-in-rows'
+  | 'social-post'
   | 'sort-ascending'
-  | 'sound'
   | 'social-ad'
+  | 'smiley-sad'
   | 'smiley-neutral'
-  | 'status-active'
-  | 'sports'
-  | 'social-post'
-  | 'smiley-joy'
   | 'smiley-happy'
+  | 'smiley-joy'
+  | 'shopcodes'
   | 'slideshow'
   | 'shipping-label'
-  | 'shield-none'
+  | 'shield-pending'
   | 'shield-person'
-  | 'smiley-sad'
-  | 'shield-check-mark'
-  | 'shopcodes'
-  | 'settings'
+  | 'shield-none'
   | 'share'
   | 'send'
-  | 'search-resource'
-  | 'search-list'
+  | 'settings'
+  | 'shield-check-mark'
   | 'search'
+  | 'search-recent'
+  | 'search-list'
+  | 'search-resource'
   | 'save'
   | 'rotate-left'
-  | 'text-quote'
-  | 'search-recent'
-  | 'sandbox'
-  | 'replay'
-  | 'shield-pending'
   | 'reward'
-  | 'remove-background'
-  | 'replace'
   | 'return'
+  | 'replay'
+  | 'text-indent'
+  | 'reset'
+  | 'sandbox'
+  | 'replace'
+  | 'remove-background'
+  | 'referral-code'
+  | 'redo'
   | 'receipt'
   | 'receipt-yen'
-  | 'receipt-refund'
-  | 'receipt-rupee'
-  | 'reset'
-  | 'receipt-euro'
   | 'refresh'
-  | 'redo'
+  | 'receipt-rupee'
+  | 'receipt-refund'
+  | 'rotate-right'
+  | 'receipt-pound'
   | 'receipt-paid'
-  | 'question-circle'
+  | 'receipt-euro'
   | 'receipt-dollar'
-  | 'product-unavailable'
-  | 'receipt-pound'
+  | 'question-circle'
   | 'profile'
   | 'product-return'
-  | 'product-add'
-  | 'print'
-  | 'product-list'
-  | 'product-reference'
+  | 'product-unavailable'
   | 'product-remove'
-  | 'price-list'
+  | 'product-reference'
+  | 'product-list'
   | 'product-cost'
-  | 'play'
-  | 'play-circle'
+  | 'product-add'
+  | 'price-list'
   | 'point-of-sale'
-  | 'phone-out'
-  | 'pin'
+  | 'print'
+  | 'play-circle'
+  | 'play'
   | 'plan'
+  | 'pin'
+  | 'phone-out'
   | 'phone-in'
-  | 'person-segment'
   | 'personalized-text'
+  | 'person-lock'
+  | 'person-segment'
+  | 'store-import'
   | 'payout-yen'
-  | 'person-remove'
-  | 'person-exit'
   | 'payout'
+  | 'payout-rupee'
+  | 'person-add'
+  | 'person-remove'
   | 'payout-pound'
+  | 'person-exit'
   | 'payout-dollar'
-  | 'person-lock'
   | 'passkey'
   | 'payout-euro'
   | 'paint-brush-round'
-  | 'payout-rupee'
   | 'payment-capture'
   | 'paper-check'
-  | 'pagination-end'
-  | 'pause-circle'
   | 'paint-brush-flat'
-  | 'page-reference'
   | 'page-up'
-  | 'person-add'
-  | 'page-attachment'
+  | 'pagination-end'
+  | 'page-remove'
+  | 'pagination-start'
+  | 'page-reference'
+  | 'page-heart'
   | 'page-clock'
-  | 'page-down'
-  | 'package-returned'
+  | 'page-attachment'
   | 'page-add'
+  | 'page-down'
   | 'package'
-  | 'pagination-start'
-  | 'package-fulfilled'
+  | 'package-on-hold'
+  | 'outgoing'
+  | 'package-returned'
   | 'organization'
-  | 'page-heart'
+  | 'orders-status'
   | 'outdent'
-  | 'outgoing'
+  | 'order-first'
   | 'order-repeat'
-  | 'package-on-hold'
-  | 'page-remove'
   | 'order-draft'
-  | 'note'
-  | 'order-first'
-  | 'note-add'
   | 'notification'
-  | 'moon'
+  | 'nature'
   | 'money'
+  | 'money-none'
+  | 'note'
+  | 'package-fulfilled'
+  | 'moon'
+  | 'metaobject'
+  | 'note-add'
   | 'minimize'
-  | 'nature'
+  | 'metaobject-list'
   | 'metaobject-reference'
   | 'menu'
-  | 'metaobject'
-  | 'metafields'
-  | 'metaobject-list'
-  | 'menu-vertical'
+  | 'menu-horizontal'
   | 'mention'
-  | 'money-none'
   | 'megaphone'
-  | 'orders-status'
-  | 'referral-code'
-  | 'measurement-volume'
-  | 'markets'
-  | 'markets-yen'
-  | 'measurement-size'
-  | 'markets-rupee'
+  | 'media-receiver'
+  | 'menu-vertical'
+  | 'measurement-weight'
   | 'maximize'
+  | 'measurement-size'
+  | 'markets-yen'
   | 'markets-euro'
+  | 'measurement-volume'
   | 'lock'
   | 'location-none'
   | 'live'
-  | 'list-numbered'
-  | 'link'
-  | 'layout-sidebar-right'
+  | 'markets'
   | 'list-bulleted'
-  | 'measurement-weight'
-  | 'layout-sidebar-left'
-  | 'media-receiver'
+  | 'markets-rupee'
+  | 'layout-sidebar-right'
+  | 'layout-rows-2'
   | 'layout-popup'
+  | 'layout-logo-block'
   | 'layout-section'
-  | 'layout-footer'
-  | 'layout-rows-2'
-  | 'layout-columns-2'
-  | 'layout-column-1'
+  | 'layout-header'
   | 'layout-columns-3'
+  | 'layout-columns-2'
+  | 'pause-circle'
   | 'layout-buy-button'
+  | 'link'
   | 'layout-buy-button-vertical'
+  | 'layout-column-1'
   | 'layout-block'
-  | 'layout-buy-button-horizontal'
+  | 'list-numbered'
+  | 'key'
+  | 'keyboard'
   | 'language-translate'
+  | 'layout-buy-button-horizontal'
+  | 'layout-footer'
   | 'label-printer'
-  | 'keyboard-hide'
-  | 'keyboard'
+  | 'inventory-updated'
+  | 'incoming'
+  | 'incentive'
   | 'iq'
   | 'inventory'
-  | 'key'
-  | 'layout-header'
-  | 'layout-logo-block'
-  | 'incentive'
-  | 'images'
-  | 'image'
-  | 'incoming'
-  | 'image-explore'
   | 'image-with-text-overlay'
   | 'image-none'
-  | 'image-add'
+  | 'image-magic'
+  | 'image'
   | 'import'
+  | 'images'
+  | 'image-explore'
+  | 'image-add'
+  | 'keyboard-hide'
   | 'image-alt'
-  | 'icons'
   | 'identity-card'
-  | 'hashtag'
-  | 'globe-europe'
+  | 'icons'
+  | 'sports'
+  | 'metafields'
   | 'heart'
-  | 'inventory-updated'
+  | 'hashtag'
   | 'hashtag-decimal'
-  | 'gift-card'
+  | 'globe-europe'
   | 'gauge'
-  | 'globe-asia'
-  | 'games'
-  | 'forms'
-  | 'image-magic'
+  | 'layout-sidebar-left'
   | 'food'
   | 'forklift'
-  | 'folder'
-  | 'folder-up'
+  | 'games'
   | 'folder-down'
+  | 'folder-up'
   | 'folder-remove'
-  | 'home'
-  | 'flip-vertical'
+  | 'forms'
   | 'folder-add'
-  | 'flag'
-  | 'file'
+  | 'folder'
   | 'flower'
-  | 'flip-horizontal'
-  | 'favicon'
-  | 'eyeglasses'
-  | 'eye-check-mark'
+  | 'gift-card'
+  | 'flip-vertical'
+  | 'flag'
+  | 'home'
+  | 'globe-asia'
   | 'filter'
-  | 'eye-first'
+  | 'file'
   | 'export'
-  | 'exchange'
+  | 'eyeglasses'
+  | 'exit'
+  | 'favicon'
   | 'eye-dropper'
   | 'envelope-soft-pack'
   | 'envelope'
-  | 'exit'
-  | 'enter'
   | 'email-newsletter'
+  | 'enter'
+  | 'exchange'
   | 'email-follow-up'
+  | 'eye-first'
+  | 'domain'
   | 'duplicate'
+  | 'domain-redirect'
   | 'drag-drop'
   | 'domain-new'
-  | 'drag-handle'
-  | 'domain'
-  | 'dock-floating'
-  | 'discount-code'
-  | 'discount'
+  | 'domain-landing-page'
   | 'dock-side'
-  | 'domain-redirect'
   | 'dns-settings'
-  | 'delete'
-  | 'desktop'
+  | 'drag-handle'
+  | 'discount'
+  | 'discount-code'
+  | 'dock-floating'
+  | 'database'
   | 'database-add'
+  | 'desktop'
   | 'data-table'
   | 'database-connect'
-  | 'domain-landing-page'
-  | 'cursor-option'
-  | 'cursor'
   | 'data-presentation'
-  | 'crop'
   | 'currency-convert'
+  | 'crop'
   | 'cursor-banner'
   | 'credit-card-tap-chip'
-  | 'credit-card-reader-tap'
+  | 'cursor-option'
   | 'credit-card'
   | 'credit-card-secure'
-  | 'credit-card-reader-chip'
+  | 'credit-card-reader-tap'
+  | 'corner-square'
   | 'credit-card-cancel'
   | 'credit-card-reader'
-  | 'database'
-  | 'credit-card-percent'
-  | 'corner-pill'
+  | 'credit-card-reader-chip'
+  | 'cursor'
   | 'corner-round'
-  | 'content'
   | 'connect'
+  | 'corner-pill'
   | 'contract'
   | 'confetti'
-  | 'rotate-right'
-  | 'menu-horizontal'
-  | 'color-none'
-  | 'collection-list'
-  | 'code'
+  | 'color'
+  | 'content'
+  | 'credit-card-percent'
   | 'collection-featured'
+  | 'collection-reference'
+  | 'collection-list'
   | 'compass'
-  | 'compose'
-  | 'corner-square'
-  | 'code-add'
+  | 'code'
+  | 'color-none'
   | 'clipboard'
-  | 'color'
-  | 'clipboard-check'
-  | 'chevron-right'
   | 'chevron-up-circle'
-  | 'chevron-right-circle'
-  | 'chevron-down-circle'
+  | 'clipboard-check'
   | 'circle'
   | 'clipboard-checklist'
+  | 'chevron-right-circle'
+  | 'chevron-right'
   | 'chevron-left'
+  | 'code-add'
   | 'checkbox'
+  | 'compose'
   | 'chat'
-  | 'collection-reference'
-  | 'chevron-left-circle'
+  | 'chevron-down-circle'
+  | 'chart-popular'
   | 'chart-vertical'
-  | 'chat-referral'
   | 'chart-stacked'
-  | 'chart-line'
-  | 'chart-horizontal'
-  | 'chart-popular'
+  | 'chevron-left-circle'
+  | 'chat-referral'
   | 'chart-histogram-second-last'
+  | 'chart-histogram-first'
   | 'chart-histogram-last'
   | 'chart-histogram-flat'
+  | 'chart-horizontal'
+  | 'chart-histogram-first-last'
   | 'chart-funnel'
   | 'chart-histogram-full'
-  | 'chart-histogram-first'
-  | 'chart-cohort'
   | 'chart-histogram-growth'
+  | 'cash-yen'
   | 'categories'
-  | 'chart-histogram-first-last'
+  | 'chart-line'
+  | 'catalog-product'
+  | 'chart-donut'
   | 'channels'
+  | 'cart-sale'
   | 'cash-pound'
-  | 'chart-donut'
-  | 'cash-yen'
-  | 'cash-dollar'
-  | 'catalog-product'
+  | 'chart-cohort'
+  | 'cash-euro'
+  | 'cart-down'
+  | 'cart'
   | 'cart-up'
-  | 'cart-discount'
-  | 'cart-sale'
+  | 'cash-dollar'
+  | 'caret-up'
   | 'cash-rupee'
-  | 'cart'
-  | 'cart-down'
-  | 'cart-abandoned'
+  | 'cart-discount'
   | 'caret-down'
   | 'camera'
   | 'camera-flip'
-  | 'caret-up'
-  | 'calendar-time'
-  | 'calculator'
   | 'button'
+  | 'cart-abandoned'
   | 'bullet'
-  | 'button-press'
-  | 'bug'
+  | 'calculator'
   | 'book'
-  | 'book-open'
-  | 'cash-euro'
   | 'blog'
+  | 'button-press'
+  | 'book-open'
+  | 'bug'
   | 'bank'
-  | 'automation'
-  | 'arrows-out-horizontal'
+  | 'barcode'
   | 'backspace'
+  | 'automation'
   | 'bill'
-  | 'arrow-up'
+  | 'arrows-out-horizontal'
   | 'arrow-right'
-  | 'arrow-right-circle'
-  | 'barcode'
+  | 'calendar-time'
+  | 'arrows-in-horizontal'
+  | 'arrow-up'
   | 'arrow-up-circle'
+  | 'arrow-right-circle'
   | 'arrow-left'
-  | 'arrow-left-circle'
   | 'arrow-down-circle'
+  | 'arrow-left-circle'
+  | 'eye-check-mark'
   | 'app-extension'
+  | 'delete'
   | 'alert-diamond'
   | 'arrow-down'
-  | 'alert-location'
   | 'airplane'
+  | 'alert-location'
   | 'affiliate'
+  | 'flip-horizontal'
   | 'adjust'
-  | 'arrows-in-horizontal'
-  | 'x'
   | 'x-circle'
-  | 'variant'
-  | 'view'
+  | 'x'
   | 'star'
   | 'sort'
+  | 'view'
   | 'select'
+  | 'variant'
   | 'product'
-  | 'plus-circle'
-  | 'plus'
   | 'phone'
   | 'person'
+  | 'plus'
+  | 'plus-circle'
   | 'payment'
   | 'page'
   | 'order'
   | 'order-unfulfilled'
-  | 'order-fulfilled'
   | 'mobile'
-  | 'microphone'
   | 'minus'
+  | 'microphone'
+  | 'order-fulfilled'
   | 'minus-circle'
-  | 'location'
+  | 'merge'
   | 'lightbulb'
+  | 'location'
+  | 'in-progress'
   | 'language'
   | 'incomplete'
   | 'info'
-  | 'in-progress'
-  | 'hide'
   | 'globe'
+  | 'hide'
   | 'external'
-  | 'email'
-  | 'edit'
   | 'enabled'
+  | 'email'
   | 'disabled'
+  | 'clock'
   | 'delivery'
   | 'collection'
-  | 'clock'
+  | 'edit'
   | 'chevron-up'
+  | 'chevron-down'
   | 'check'
   | 'check-circle'
-  | 'chevron-down'
-  | 'calendar-check'
   | 'calendar'
+  | 'calendar-check'
   | 'blank'
-  | 'archive'
-  | 'alert-triangle'
-  | 'alert-circle'
-  | 'alert-bubble'
   | 'attachment'
-  | 'merge'
+  | 'archive'
   | 'arrow-up-right'
-  | 'apps';
-
-/**
- * Base class for creating custom elements with Preact.
- * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
- * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
- */
-declare const BaseClass: typeof globalThis.HTMLElement;
-declare abstract class PreactCustomElement extends BaseClass {}
-
-export interface IconProps {
-  type: '' | IconType;
+  | 'alert-bubble'
+  | 'alert-triangle'
+  | 'apps'
+  | 'alert-circle';
+interface IconProps$1 {
+  type: '' | IconType$1;
   tone: Extract<
-    IconProps$1['tone'],
+    IconProps['tone'],
     'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
   >;
-  color: Extract<IconProps$1['color'], 'base' | 'subdued'>;
-  size: Extract<IconProps$1['size'], 'small' | 'base'>;
+  color: Extract<IconProps['color'], 'base' | 'subdued'>;
+  size: Extract<IconProps['size'], 'small' | 'base'>;
 }
-
-export interface BadgeProps {
-  accessibilityLabel: NonNullable<BadgeProps$1['accessibilityLabel']>;
-  color: Extract<BadgeProps$1['color'], 'base' | 'strong'>;
-  icon: IconProps['type'] | '';
-  size: Extract<BadgeProps$1['size'], 'base' | 'large' | 'large-100'>;
+interface BadgeProps$1 {
+  accessibilityLabel: NonNullable<BadgeProps['accessibilityLabel']>;
+  color: Extract<BadgeProps['color'], 'base' | 'strong'>;
+  icon: IconProps$1['type'] | '';
+  size: Extract<BadgeProps['size'], 'base' | 'large' | 'large-100'>;
   tone: Extract<
-    BadgeProps$1['tone'],
+    BadgeProps['tone'],
     'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
   >;
 }
-
-declare const tagName$g = 'shopify-badge';
-
-declare class Badge extends PreactCustomElement implements BadgeProps {
-  accessor accessibilityLabel: BadgeProps['accessibilityLabel'];
-  accessor color: BadgeProps['color'];
-  accessor icon: BadgeProps['icon'];
-  accessor size: BadgeProps['size'];
-  accessor tone: BadgeProps['tone'];
+declare const tagName = 'shopify-badge';
+export declare class Badge extends PreactCustomElement implements BadgeProps$1 {
+  accessor accessibilityLabel: BadgeProps$1['accessibilityLabel'];
+  accessor color: BadgeProps$1['color'];
+  accessor icon: BadgeProps$1['icon'];
+  accessor size: BadgeProps$1['size'];
+  accessor tone: BadgeProps$1['tone'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$g]: Badge;
+    [tagName]: Badge;
   }
 }
-
-type MakeResponsive<T> = T | `@media${string}`;
-
-type AlignedBox = Required<BoxProps$1>;
-export interface BoxProps {
+export type MakeResponsive<T> = T | `@media${string}`;
+export type AlignedBox = Required<BoxProps>;
+interface BoxProps$1 {
   accessibilityRole: AlignedBox['accessibilityRole'];
   background: Extract<
     AlignedBox['background'],
@@ -564,48 +2483,44 @@ export interface BoxProps {
   accessibilityVisibility: AlignedBox['accessibilityVisibility'];
   display: AlignedBox['display'];
 }
-
-declare class BoxElement extends PreactCustomElement implements BoxProps {
-  accessor accessibilityRole: BoxProps['accessibilityRole'];
-  accessor background: BoxProps['background'];
-  accessor blockSize: BoxProps['blockSize'];
-  accessor minBlockSize: BoxProps['minBlockSize'];
-  accessor maxBlockSize: BoxProps['maxBlockSize'];
-  accessor inlineSize: BoxProps['inlineSize'];
-  accessor minInlineSize: BoxProps['minInlineSize'];
-  accessor maxInlineSize: BoxProps['maxInlineSize'];
-  accessor padding: BoxProps['padding'];
-  accessor paddingBlock: BoxProps['paddingBlock'];
-  accessor paddingBlockStart: BoxProps['paddingBlockStart'];
-  accessor paddingBlockEnd: BoxProps['paddingBlockEnd'];
-  accessor paddingInline: BoxProps['paddingInline'];
-  accessor paddingInlineStart: BoxProps['paddingInlineStart'];
-  accessor paddingInlineEnd: BoxProps['paddingInlineEnd'];
-  accessor borderWidth: BoxProps['borderWidth'];
-  accessor borderStyle: BoxProps['borderStyle'];
-  accessor borderRadius: BoxProps['borderRadius'];
-  accessor borderColor: BoxProps['borderColor'];
-  accessor accessibilityLabel: BoxProps['accessibilityLabel'];
-  accessor accessibilityVisibility: BoxProps['accessibilityVisibility'];
-  accessor display: BoxProps['display'];
+declare class BoxElement extends PreactCustomElement implements BoxProps$1 {
+  accessor accessibilityRole: BoxProps$1['accessibilityRole'];
+  accessor background: BoxProps$1['background'];
+  accessor blockSize: BoxProps$1['blockSize'];
+  accessor minBlockSize: BoxProps$1['minBlockSize'];
+  accessor maxBlockSize: BoxProps$1['maxBlockSize'];
+  accessor inlineSize: BoxProps$1['inlineSize'];
+  accessor minInlineSize: BoxProps$1['minInlineSize'];
+  accessor maxInlineSize: BoxProps$1['maxInlineSize'];
+  accessor padding: BoxProps$1['padding'];
+  accessor paddingBlock: BoxProps$1['paddingBlock'];
+  accessor paddingBlockStart: BoxProps$1['paddingBlockStart'];
+  accessor paddingBlockEnd: BoxProps$1['paddingBlockEnd'];
+  accessor paddingInline: BoxProps$1['paddingInline'];
+  accessor paddingInlineStart: BoxProps$1['paddingInlineStart'];
+  accessor paddingInlineEnd: BoxProps$1['paddingInlineEnd'];
+  accessor borderWidth: BoxProps$1['borderWidth'];
+  accessor borderStyle: BoxProps$1['borderStyle'];
+  accessor borderRadius: BoxProps$1['borderRadius'];
+  accessor borderColor: BoxProps$1['borderColor'];
+  accessor accessibilityLabel: BoxProps$1['accessibilityLabel'];
+  accessor accessibilityVisibility: BoxProps$1['accessibilityVisibility'];
+  accessor display: BoxProps$1['display'];
 }
-
-declare const tagName$f = 'shopify-box';
-
-declare class Box extends BoxElement implements BoxProps {}
+declare const tagName$1 = 'shopify-box';
+export declare class Box extends BoxElement implements BoxProps$1 {}
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$f]: Box;
+    [tagName$1]: Box;
   }
 }
-
-type ButtonOnlyProps = Extract<
-  ButtonProps$1,
+export type ButtonOnlyProps = Extract<
+  ButtonProps,
   {
     type?: unknown;
   }
 >;
-type ButtonBaseProps = Required<
+export type ButtonBaseProps = Required<
   Pick<
     ButtonOnlyProps,
     | 'accessibilityLabel'
@@ -621,14 +2536,12 @@ type ButtonBaseProps = Required<
     | 'download'
   >
 >;
-export interface ButtonProps extends ButtonBaseProps {
-  tone: Extract<ButtonProps$1['tone'], 'neutral' | 'critical' | 'auto'>;
-  icon: IconProps['type'];
+interface ButtonProps$1 extends ButtonBaseProps {
+  tone: Extract<ButtonProps['tone'], 'neutral' | 'critical' | 'auto'>;
+  icon: IconProps$1['type'];
 }
-
-declare const tagName$e = 'shopify-button';
-
-export interface SharedProps$3
+declare const tagName$2 = 'shopify-button';
+export interface SharedProps
   extends Required<Pick<InteractionProps, 'activateTarget'>> {
   activateAction: Extract<
     InteractionProps['activateAction'],
@@ -637,35 +2550,36 @@ export interface SharedProps$3
 }
 declare class PreactOverlayControl
   extends PreactCustomElement
-  implements SharedProps$3
+  implements SharedProps
 {
-  accessor activateTarget: SharedProps$3['activateTarget'];
-  accessor activateAction: SharedProps$3['activateAction'];
+  accessor activateTarget: SharedProps['activateTarget'];
+  accessor activateAction: SharedProps['activateAction'];
 }
-
-declare class Button extends PreactOverlayControl implements ButtonProps {
-  accessor disabled: ButtonProps['disabled'];
-  accessor icon: ButtonProps['icon'];
-  accessor loading: ButtonProps['loading'];
-  accessor variant: ButtonProps['variant'];
-  accessor tone: ButtonProps['tone'];
-  accessor lang: ButtonProps['lang'];
-  accessor target: ButtonProps['target'];
-  accessor href: ButtonProps['href'];
-  accessor download: ButtonProps['download'];
+export declare class Button
+  extends PreactOverlayControl
+  implements ButtonProps$1
+{
+  accessor disabled: ButtonProps$1['disabled'];
+  accessor icon: ButtonProps$1['icon'];
+  accessor loading: ButtonProps$1['loading'];
+  accessor variant: ButtonProps$1['variant'];
+  accessor tone: ButtonProps$1['tone'];
+  accessor lang: ButtonProps$1['lang'];
+  accessor target: ButtonProps$1['target'];
+  accessor href: ButtonProps$1['href'];
+  accessor download: ButtonProps$1['download'];
   accessor onclick: EventListener | null;
   accessor onblur: EventListener | null;
   accessor onfocus: EventListener | null;
-  accessor type: ButtonProps['type'];
-  accessor accessibilityLabel: ButtonProps['accessibilityLabel'];
+  accessor type: ButtonProps$1['type'];
+  accessor accessibilityLabel: ButtonProps$1['accessibilityLabel'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$e]: Button;
+    [tagName$2]: Button;
   }
 }
-
-type InputBaseProps = Required<
+export type InputBaseProps = Required<
   Pick<
     TextFieldProps,
     | 'disabled'
@@ -681,7 +2595,6 @@ type InputBaseProps = Required<
 > & {
   defaultValue: string;
 };
-
 declare const internals: unique symbol;
 declare class PreactInputElement
   extends PreactCustomElement
@@ -697,9 +2610,6 @@ declare class PreactInputElement
       | 'value'
     >
 {
-  #private;
-  static formAssociated: boolean;
-  [internals]: ElementInternals;
   accessor onchange: EventListener | null;
   accessor oninput: EventListener | null;
   accessor onfocus: EventListener | null;
@@ -713,11 +2623,10 @@ declare class PreactInputElement
   accessor disabled: InputBaseProps['disabled'];
   accessor required: InputBaseProps['required'];
 }
-
-export interface CheckboxProps
+interface CheckboxProps$1
   extends Required<
     Pick<
-      CheckboxProps$1,
+      CheckboxProps,
       | 'accessibilityLabel'
       | 'checked'
       | 'details'
@@ -731,199 +2640,189 @@ export interface CheckboxProps
       | 'value'
     >
   > {}
-
-declare const tagName$d = 'shopify-checkbox';
-
-declare class Checkbox extends PreactInputElement implements CheckboxProps {
+declare const tagName$3 = 'shopify-checkbox';
+export declare class Checkbox
+  extends PreactInputElement
+  implements CheckboxProps$1
+{
   #private;
-  accessor indeterminate: CheckboxProps['indeterminate'];
+  accessor indeterminate: CheckboxProps$1['indeterminate'];
   get checked(): boolean;
-  set checked(checked: CheckboxProps['checked']);
-  accessor details: CheckboxProps['details'];
-  accessor accessibilityLabel: CheckboxProps['accessibilityLabel'];
+  set checked(checked: CheckboxProps$1['checked']);
+  accessor details: CheckboxProps$1['details'];
+  accessor accessibilityLabel: CheckboxProps$1['accessibilityLabel'];
   get value(): string;
   set value(value: string);
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$d]: Checkbox;
+    [tagName$3]: Checkbox;
   }
 }
-
-export interface DividerProps {
-  direction: Extract<DividerProps$1['direction'], 'inline' | 'block'>;
-  color: Extract<DividerProps$1['color'], 'subdued' | 'base' | 'strong'>;
+interface DividerProps$1 {
+  direction: Extract<DividerProps['direction'], 'inline' | 'block'>;
+  color: Extract<DividerProps['color'], 'subdued' | 'base' | 'strong'>;
 }
-
-declare const tagName$c = 'shopify-divider';
-
-declare class Divider extends PreactCustomElement implements DividerProps {
-  accessor direction: DividerProps['direction'];
-  accessor color: DividerProps['color'];
+declare const tagName$4 = 'shopify-divider';
+export declare class Divider
+  extends PreactCustomElement
+  implements DividerProps$1
+{
+  accessor direction: DividerProps$1['direction'];
+  accessor color: DividerProps$1['color'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$c]: Divider;
+    [tagName$4]: Divider;
   }
 }
-
-export type RequiredHeadingProps = Required<HeadingProps$1>;
-export interface HeadingProps {
+export type RequiredHeadingProps = Required<HeadingProps>;
+interface HeadingProps$1 {
   accessibilityRole: RequiredHeadingProps['accessibilityRole'];
   accessibilityVisibility: RequiredHeadingProps['accessibilityVisibility'];
   lineClamp: RequiredHeadingProps['lineClamp'];
 }
-
-declare const tagName$b = 'shopify-heading';
-
-declare class Heading extends PreactCustomElement implements HeadingProps {
-  accessor accessibilityRole: HeadingProps['accessibilityRole'];
-  accessor lineClamp: HeadingProps['lineClamp'];
-  accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];
+declare const tagName$5 = 'shopify-heading';
+export declare class Heading
+  extends PreactCustomElement
+  implements HeadingProps$1
+{
+  accessor accessibilityRole: HeadingProps$1['accessibilityRole'];
+  accessor lineClamp: HeadingProps$1['lineClamp'];
+  accessor accessibilityVisibility: HeadingProps$1['accessibilityVisibility'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$b]: Heading;
+    [tagName$5]: Heading;
   }
 }
-
-declare const tagName$a = 'shopify-icon';
-
-declare class Icon extends PreactCustomElement implements IconProps {
-  accessor color: IconProps['color'];
-  accessor tone: IconProps['tone'];
-  accessor type: IconProps['type'];
-  accessor size: IconProps['size'];
+declare const tagName$6 = 'shopify-icon';
+export declare class Icon extends PreactCustomElement implements IconProps$1 {
+  accessor color: IconProps$1['color'];
+  accessor tone: IconProps$1['tone'];
+  accessor type: IconProps$1['type'];
+  accessor size: IconProps$1['size'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$a]: Icon;
+    [tagName$6]: Icon;
   }
 }
-
-export interface ImageProps {
+interface ImageProps$1 {
   accessibilityRole: Extract<
-    ImageProps$1['accessibilityRole'],
+    ImageProps['accessibilityRole'],
     'img' | 'presentation' | 'none'
   >;
-  alt: NonNullable<ImageProps$1['alt']>;
-  loading: Extract<ImageProps$1['loading'], 'eager' | 'lazy'>;
-  src: NonNullable<ImageProps$1['src']>;
+  alt: NonNullable<ImageProps['alt']>;
+  loading: Extract<ImageProps['loading'], 'eager' | 'lazy'>;
+  src: NonNullable<ImageProps['src']>;
 }
-
-declare const tagName$9 = 'shopify-image';
-
-declare class Image extends PreactCustomElement implements ImageProps {
-  accessor src: ImageProps['src'];
-  accessor alt: ImageProps['alt'];
-  accessor loading: ImageProps['loading'];
-  accessor accessibilityRole: ImageProps['accessibilityRole'];
+declare const tagName$7 = 'shopify-image';
+declare class Image$1 extends PreactCustomElement implements ImageProps$1 {
+  accessor src: ImageProps$1['src'];
+  accessor alt: ImageProps$1['alt'];
+  accessor loading: ImageProps$1['loading'];
+  accessor accessibilityRole: ImageProps$1['accessibilityRole'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$9]: Image;
+    [tagName$7]: Image$1;
   }
 }
-
-type RequiredLinkProps = Required<LinkProps$1>;
-export interface LinkProps {
+export type RequiredLinkProps = Required<LinkProps>;
+interface LinkProps$1 {
   tone: Extract<RequiredLinkProps['tone'], 'auto' | 'neutral' | 'critical'>;
   accessibilityLabel: RequiredLinkProps['accessibilityLabel'];
   href: RequiredLinkProps['href'];
   target: RequiredLinkProps['target'];
 }
-
 declare const tagName$8 = 'shopify-link';
-
-declare class Link extends PreactCustomElement implements LinkProps {
-  accessor tone: LinkProps['tone'];
-  accessor accessibilityLabel: LinkProps['accessibilityLabel'];
-  accessor href: LinkProps['href'];
-  accessor target: LinkProps['target'];
+export declare class Link extends PreactCustomElement implements LinkProps$1 {
+  accessor tone: LinkProps$1['tone'];
+  accessor accessibilityLabel: LinkProps$1['accessibilityLabel'];
+  accessor href: LinkProps$1['href'];
+  accessor target: LinkProps$1['target'];
 }
 declare global {
   interface HTMLElementTagNameMap {
     [tagName$8]: Link;
   }
 }
-
-declare const tagName$7 = 'shopify-option';
-
-export interface SharedProps$2
+declare const tagName$9 = 'shopify-option';
+interface SharedProps$1
   extends Required<Pick<OptionProps, 'disabled' | 'value'>> {}
-declare class Option extends PreactCustomElement implements SharedProps$2 {
-  accessor value: SharedProps$2['value'];
-  accessor disabled: SharedProps$2['disabled'];
+declare class Option$1 extends PreactCustomElement implements SharedProps$1 {
+  accessor value: SharedProps$1['value'];
+  accessor disabled: SharedProps$1['disabled'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$7]: Option;
+    [tagName$9]: Option$1;
   }
 }
-
-declare const tagName$6 = 'shopify-option-group';
-
-interface SharedProps$1
+declare const tagName$10 = 'shopify-option-group';
+interface SharedProps$2
   extends Required<Pick<OptionGroupProps, 'disabled' | 'label'>> {}
-declare class OptionGroup extends PreactCustomElement implements SharedProps$1 {
-  accessor disabled: SharedProps$1['disabled'];
-  accessor label: SharedProps$1['label'];
+export declare class OptionGroup
+  extends PreactCustomElement
+  implements SharedProps$2
+{
+  accessor disabled: SharedProps$2['disabled'];
+  accessor label: SharedProps$2['label'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$6]: OptionGroup;
+    [tagName$10]: OptionGroup;
   }
 }
-
-interface ParagraphProps
+interface ParagraphProps$1
   extends Required<
     Pick<
-      ParagraphProps$1,
+      ParagraphProps,
       'lineClamp' | 'accessibilityVisibility' | 'fontVariantNumeric' | 'tone'
     >
   > {
-  color: Extract<ParagraphProps$1['color'], 'base' | 'subdued'>;
+  color: Extract<ParagraphProps['color'], 'base' | 'subdued'>;
 }
-
-declare const tagName$5 = 'shopify-paragraph';
-
-declare class Paragraph extends PreactCustomElement implements ParagraphProps {
-  accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];
-  accessor lineClamp: ParagraphProps['lineClamp'];
-  accessor tone: ParagraphProps['tone'];
-  accessor color: ParagraphProps['color'];
-  accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];
+declare const tagName$11 = 'shopify-paragraph';
+export declare class Paragraph
+  extends PreactCustomElement
+  implements ParagraphProps$1
+{
+  accessor fontVariantNumeric: ParagraphProps$1['fontVariantNumeric'];
+  accessor lineClamp: ParagraphProps$1['lineClamp'];
+  accessor tone: ParagraphProps$1['tone'];
+  accessor color: ParagraphProps$1['color'];
+  accessor accessibilityVisibility: ParagraphProps$1['accessibilityVisibility'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$5]: Paragraph;
+    [tagName$11]: Paragraph;
   }
 }
-
-type RequiredSectionProps = Required<SectionProps$1>;
-export interface SectionProps {
+export type RequiredSectionProps = Required<SectionProps>;
+interface SectionProps$1 {
   accessibilityLabel: RequiredSectionProps['accessibilityLabel'];
   heading: RequiredSectionProps['heading'];
   padding: RequiredSectionProps['padding'];
 }
-
-declare const tagName$4 = 'shopify-section';
-
-declare class Section extends PreactCustomElement implements SectionProps {
+declare const tagName$12 = 'shopify-section';
+export declare class Section
+  extends PreactCustomElement
+  implements SectionProps$1
+{
   #private;
   connectedCallback(): void;
-  accessor accessibilityLabel: SectionProps['accessibilityLabel'];
-  accessor heading: SectionProps['heading'];
-  accessor padding: SectionProps['padding'];
+  accessor accessibilityLabel: SectionProps$1['accessibilityLabel'];
+  accessor heading: SectionProps$1['heading'];
+  accessor padding: SectionProps$1['padding'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$4]: Section;
+    [tagName$12]: Section;
   }
 }
-
-declare const tagName$3 = 'shopify-select';
-
+declare const tagName$13 = 'shopify-select';
 declare class PreactInputFieldElement
   extends PreactInputElement
   implements InputBaseProps
@@ -931,8 +2830,7 @@ declare class PreactInputFieldElement
   accessor placeholder: InputBaseProps['placeholder'];
   accessor readOnly: InputBaseProps['readOnly'];
 }
-
-export interface SharedProps
+interface SharedProps$3
   extends Pick<
     SelectProps,
     | 'disabled'
@@ -943,41 +2841,43 @@ export interface SharedProps
     | 'required'
     | 'value'
   > {}
-declare class Select extends PreactInputFieldElement implements SharedProps {
+export declare class Select
+  extends PreactInputFieldElement
+  implements SharedProps$3
+{
   #private;
   connectedCallback(): void;
   disconnectedCallback(): void;
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$3]: Select;
+    [tagName$13]: Select;
   }
 }
-
-interface SpinnerProps
-  extends Required<Pick<SpinnerProps$1, 'accessibilityLabel'>> {
+interface SpinnerProps$1
+  extends Required<Pick<SpinnerProps, 'accessibilityLabel'>> {
   /**
    * The size of the component.
    *
    * @default 'base'
    */
-  size: Extract<SpinnerProps$1['size'], 'large' | 'large-100' | 'base'>;
+  size: Extract<SpinnerProps['size'], 'large' | 'large-100' | 'base'>;
 }
-
-declare const tagName$2 = 'shopify-spinner';
-
-declare class Spinner extends PreactCustomElement implements SpinnerProps {
+declare const tagName$14 = 'shopify-spinner';
+export declare class Spinner
+  extends PreactCustomElement
+  implements SpinnerProps$1
+{
   accessor accessibilityLabel: string;
-  accessor size: SpinnerProps['size'];
+  accessor size: SpinnerProps$1['size'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$2]: Spinner;
+    [tagName$14]: Spinner;
   }
 }
-
-type AlignedStackProps = Required<StackProps$1>;
-export interface StackProps extends BoxProps {
+export type AlignedStackProps = Required<StackProps>;
+interface StackProps$1 extends BoxProps$1 {
   justifyContent: AlignedStackProps['justifyContent'];
   alignItems: AlignedStackProps['alignItems'];
   alignContent: AlignedStackProps['alignContent'];
@@ -986,73 +2886,52 @@ export interface StackProps extends BoxProps {
   columnGap: MakeResponsive<AlignedStackProps['columnGap']>;
   direction: MakeResponsive<AlignedStackProps['direction']>;
 }
-
-declare const tagName$1 = 'shopify-stack';
-
-declare class Stack extends BoxElement implements StackProps {
-  accessor direction: StackProps['direction'];
-  accessor justifyContent: StackProps['justifyContent'];
-  accessor alignItems: StackProps['alignItems'];
-  accessor alignContent: StackProps['alignContent'];
-  accessor gap: StackProps['gap'];
-  accessor rowGap: StackProps['rowGap'];
-  accessor columnGap: StackProps['columnGap'];
+declare const tagName$15 = 'shopify-stack';
+export declare class Stack extends BoxElement implements StackProps$1 {
+  accessor direction: StackProps$1['direction'];
+  accessor justifyContent: StackProps$1['justifyContent'];
+  accessor alignItems: StackProps$1['alignItems'];
+  accessor alignContent: StackProps$1['alignContent'];
+  accessor gap: StackProps$1['gap'];
+  accessor rowGap: StackProps$1['rowGap'];
+  accessor columnGap: StackProps$1['columnGap'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName$1]: Stack;
+    [tagName$15]: Stack;
   }
 }
-
-interface TextProps
-  extends Required<Pick<TextProps$1, 'display' | 'accessibilityVisibility'>> {
-  color: Extract<TextProps$1['color'], 'base' | 'subdued'>;
+interface TextProps$1
+  extends Required<Pick<TextProps, 'display' | 'accessibilityVisibility'>> {
+  color: Extract<TextProps['color'], 'base' | 'subdued'>;
   type: Extract<
-    TextProps$1['type'],
+    TextProps['type'],
     'address' | 'redundant' | 'strong' | 'generic' | 'emphasis'
   >;
   tone: Extract<
-    TextProps$1['tone'],
+    TextProps['tone'],
     'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'caution'
   >;
   fontVariantNumeric: Extract<
-    TextProps$1['fontVariantNumeric'],
+    TextProps['fontVariantNumeric'],
     'auto' | 'normal' | 'tabular-nums'
   >;
 }
-
-declare const tagName = 'shopify-text';
-
-declare class Text extends PreactCustomElement implements TextProps {
-  accessor display: TextProps['display'];
-  accessor fontVariantNumeric: TextProps['fontVariantNumeric'];
-  accessor color: TextProps['color'];
-  accessor tone: TextProps['tone'];
-  accessor type: TextProps['type'];
-  accessor accessibilityVisibility: TextProps['accessibilityVisibility'];
+declare const tagName$16 = 'shopify-text';
+declare class Text$1 extends PreactCustomElement implements TextProps$1 {
+  accessor display: TextProps$1['display'];
+  accessor fontVariantNumeric: TextProps$1['fontVariantNumeric'];
+  accessor color: TextProps$1['color'];
+  accessor tone: TextProps$1['tone'];
+  accessor type: TextProps$1['type'];
+  accessor accessibilityVisibility: TextProps$1['accessibilityVisibility'];
 }
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName]: Text;
+    [tagName$16]: Text$1;
   }
 }
 
-export {
-  Badge,
-  Box,
-  Button,
-  Checkbox,
-  Divider,
-  Heading,
-  Icon,
-  Image,
-  Link,
-  Option,
-  OptionGroup,
-  Paragraph,
-  Section,
-  Select,
-  Spinner,
-  Stack,
-  Text,
-};
+export {Image$1 as Image, Option$1 as Option, Text$1 as Text};
+
+export {};

From 82cc750e6adf6b97e092cc98a1f3a2f6afa4bb19 Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Tue, 26 Nov 2024 14:16:27 -0500
Subject: [PATCH 11/12] Manually add components.d.ts content into admin.d.ts

---
 .../ui-extensions-react/src/surfaces/admin.ts |    2 +-
 .../src/surfaces/admin/components.d.ts        |  737 +++++
 .../src/surfaces/admin/components.ts          |  875 -----
 packages/ui-extensions/src/surfaces/admin.ts  |    1 -
 .../src/surfaces/admin/components.d.ts        |  684 ++++
 .../src/surfaces/admin/components.ts          | 2937 -----------------
 6 files changed, 1422 insertions(+), 3814 deletions(-)
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components.d.ts
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components.d.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components.ts

diff --git a/packages/ui-extensions-react/src/surfaces/admin.ts b/packages/ui-extensions-react/src/surfaces/admin.ts
index cf45895ab9..b0df557577 100644
--- a/packages/ui-extensions-react/src/surfaces/admin.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin.ts
@@ -1,5 +1,5 @@
 export {extend, extension} from '@shopify/ui-extensions/admin';
 
 export * from './admin/hooks';
-export * from './admin/components';
+// export type * from './admin/components';
 export {render, reactExtension} from './admin/render';
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components.d.ts b/packages/ui-extensions-react/src/surfaces/admin/components.d.ts
new file mode 100644
index 0000000000..1984b41e1b
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components.d.ts
@@ -0,0 +1,737 @@
+import { TextProps as TextProps$2, BoxProps as BoxProps$2, StackProps as StackProps$2, SpinnerProps as SpinnerProps$2, TextFieldProps, SelectProps as SelectProps$1, SectionProps as SectionProps$2, ParagraphProps as ParagraphProps$2, OptionGroupProps as OptionGroupProps$1, OptionProps as OptionProps$1, LinkProps as LinkProps$2, ImageProps as ImageProps$2, IconProps as IconProps$2, HeadingProps as HeadingProps$2, DividerProps as DividerProps$2, CheckboxProps as CheckboxProps$2, ButtonProps as ButtonProps$2, BadgeProps as BadgeProps$2 } from '@shopify/ui-api-design';
+import { ComponentChild } from 'preact';
+import { MaybeAllValuesShorthandProperty } from '@shopify/ui-api-design/dist/shared/utils';
+import { IconType } from '@shopify/admin-ui-icons';
+import { InteractionProps } from '@shopify/ui-api-design/dist/shared/pressable';
+import * as React from 'react';
+
+interface TextProps$1 extends Required<Pick<TextProps$2, 'display' | 'accessibilityVisibility'>> {
+    color: Extract<TextProps$2['color'], 'base' | 'subdued'>;
+    type: Extract<TextProps$2['type'], 'address' | 'redundant' | 'strong' | 'generic' | 'emphasis'>;
+    tone: Extract<TextProps$2['tone'], 'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'caution'>;
+    fontVariantNumeric: Extract<TextProps$2['fontVariantNumeric'], 'auto' | 'normal' | 'tabular-nums'>;
+}
+
+type Style = string | CSSStyleSheet;
+type Styles = Style[] | Style;
+type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
+    ShadowRoot: (element: any) => ComponentChild;
+    styles?: Styles;
+};
+interface ActivationEventEsque {
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    button: number;
+}
+interface ClickOptions {
+    /**
+     * The event you want to influence the synthetic click.
+     */
+    sourceEvent?: ActivationEventEsque;
+}
+/**
+ * Base class for creating custom elements with Preact.
+ * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
+ * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
+ */
+declare const BaseClass: typeof globalThis.HTMLElement;
+declare abstract class PreactCustomElement extends BaseClass {
+    #private;
+    static get observedAttributes(): string[];
+    constructor({ styles, ShadowRoot: renderFunction, delegatesFocus, ...options }: RenderImpl);
+    attributeChangedCallback(name: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Queue a run of the render function.
+     * You shouldn't need to call this manually - it should be handled by changes to @property values.
+     */
+    queueRender(): void;
+    /**
+     * Internal function to add styles for legacy browsers.
+     *
+     * @private
+     */
+    _addLegacyStyleComponent(style: string): void;
+    /**
+     * Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.
+     *
+     * For example, if the `sourceEvent` was a middle click, or has particular keys held down,
+     * components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
+     *
+     * @param options
+     */
+    click({ sourceEvent }?: ClickOptions): void;
+}
+
+declare class Text$1 extends PreactCustomElement implements TextProps$1 {
+    accessor display: TextProps$1['display'];
+    accessor fontVariantNumeric: TextProps$1['fontVariantNumeric'];
+    accessor color: TextProps$1['color'];
+    accessor tone: TextProps$1['tone'];
+    accessor type: TextProps$1['type'];
+    accessor accessibilityVisibility: TextProps$1['accessibilityVisibility'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$g]: Text$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$g]: HTMLAttributes<HTMLElement> & ReactProps$g;
+        }
+    }
+}
+
+declare const tagName$g = "shopify-text";
+interface ReactProps$g extends Partial<TextProps$1>, Pick<TextProps$2, 'id'> {
+}
+
+type MakeResponsive<T> = T | `@media${string}`;
+
+type AlignedBox = Required<BoxProps$2>;
+interface BoxProps$1 {
+    accessibilityRole: AlignedBox['accessibilityRole'];
+    background: Extract<AlignedBox['background'], 'transparent' | 'base' | 'subdued' | 'strong'>;
+    blockSize: AlignedBox['blockSize'];
+    minBlockSize: AlignedBox['minBlockSize'];
+    maxBlockSize: AlignedBox['maxBlockSize'];
+    inlineSize: AlignedBox['inlineSize'];
+    minInlineSize: AlignedBox['minInlineSize'];
+    maxInlineSize: AlignedBox['maxInlineSize'];
+    padding: MakeResponsive<AlignedBox['padding']>;
+    paddingBlock: MakeResponsive<AlignedBox['paddingBlock']>;
+    paddingBlockStart: MakeResponsive<AlignedBox['paddingBlockStart']>;
+    paddingBlockEnd: MakeResponsive<AlignedBox['paddingBlockEnd']>;
+    paddingInline: MakeResponsive<AlignedBox['paddingInline']>;
+    paddingInlineStart: MakeResponsive<AlignedBox['paddingInlineStart']>;
+    paddingInlineEnd: MakeResponsive<AlignedBox['paddingInlineEnd']>;
+    borderWidth: MaybeAllValuesShorthandProperty<Extract<AlignedBox['borderWidth'], 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200'>>;
+    borderStyle: MaybeAllValuesShorthandProperty<Extract<AlignedBox['borderStyle'], 'none' | 'solid' | 'dashed'>>;
+    borderRadius: MaybeAllValuesShorthandProperty<Extract<AlignedBox['borderRadius'], 'none' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200'>>;
+    borderColor: Extract<AlignedBox['borderColor'], 'subdued' | 'base' | 'strong'>;
+    accessibilityLabel: AlignedBox['accessibilityLabel'];
+    accessibilityVisibility: AlignedBox['accessibilityVisibility'];
+    display: AlignedBox['display'];
+}
+
+type AlignedStackProps = Required<StackProps$2>;
+interface StackProps$1 extends BoxProps$1 {
+    justifyContent: AlignedStackProps['justifyContent'];
+    alignItems: AlignedStackProps['alignItems'];
+    alignContent: AlignedStackProps['alignContent'];
+    gap: MakeResponsive<AlignedStackProps['gap']>;
+    rowGap: MakeResponsive<AlignedStackProps['rowGap']>;
+    columnGap: MakeResponsive<AlignedStackProps['columnGap']>;
+    direction: MakeResponsive<AlignedStackProps['direction']>;
+}
+
+declare class BoxElement extends PreactCustomElement implements BoxProps$1 {
+    constructor(renderImpl: RenderImpl);
+    accessor accessibilityRole: BoxProps$1['accessibilityRole'];
+    accessor background: BoxProps$1['background'];
+    accessor blockSize: BoxProps$1['blockSize'];
+    accessor minBlockSize: BoxProps$1['minBlockSize'];
+    accessor maxBlockSize: BoxProps$1['maxBlockSize'];
+    accessor inlineSize: BoxProps$1['inlineSize'];
+    accessor minInlineSize: BoxProps$1['minInlineSize'];
+    accessor maxInlineSize: BoxProps$1['maxInlineSize'];
+    accessor padding: BoxProps$1['padding'];
+    accessor paddingBlock: BoxProps$1['paddingBlock'];
+    accessor paddingBlockStart: BoxProps$1['paddingBlockStart'];
+    accessor paddingBlockEnd: BoxProps$1['paddingBlockEnd'];
+    accessor paddingInline: BoxProps$1['paddingInline'];
+    accessor paddingInlineStart: BoxProps$1['paddingInlineStart'];
+    accessor paddingInlineEnd: BoxProps$1['paddingInlineEnd'];
+    accessor borderWidth: BoxProps$1['borderWidth'];
+    accessor borderStyle: BoxProps$1['borderStyle'];
+    accessor borderRadius: BoxProps$1['borderRadius'];
+    accessor borderColor: BoxProps$1['borderColor'];
+    accessor accessibilityLabel: BoxProps$1['accessibilityLabel'];
+    accessor accessibilityVisibility: BoxProps$1['accessibilityVisibility'];
+    accessor display: BoxProps$1['display'];
+}
+
+declare class Stack$1 extends BoxElement implements StackProps$1 {
+    constructor();
+    accessor direction: StackProps$1['direction'];
+    accessor justifyContent: StackProps$1['justifyContent'];
+    accessor alignItems: StackProps$1['alignItems'];
+    accessor alignContent: StackProps$1['alignContent'];
+    accessor gap: StackProps$1['gap'];
+    accessor rowGap: StackProps$1['rowGap'];
+    accessor columnGap: StackProps$1['columnGap'];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$f]: Stack$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$f]: HTMLAttributes<HTMLElement> & ReactProps$f;
+        }
+    }
+}
+
+declare const tagName$f = "shopify-stack";
+interface ReactProps$f extends Partial<StackProps$1>, Pick<StackProps$2, 'id'> {
+}
+
+interface SpinnerProps$1 extends Required<Pick<SpinnerProps$2, 'accessibilityLabel'>> {
+    /**
+     * The size of the component.
+     *
+     * @default 'base'
+     */
+    size: Extract<SpinnerProps$2['size'], 'large' | 'large-100' | 'base'>;
+}
+
+declare class Spinner$1 extends PreactCustomElement implements SpinnerProps$1 {
+    accessor accessibilityLabel: string;
+    accessor size: SpinnerProps$1['size'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$e]: Spinner$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$e]: HTMLAttributes<HTMLElement> & ReactProps$e;
+        }
+    }
+}
+
+declare const tagName$e = "shopify-spinner";
+interface ReactProps$e extends Partial<SpinnerProps$1>, Pick<SpinnerProps$2, 'id'> {
+}
+
+type InputBaseProps = Required<Pick<TextFieldProps, 'disabled' | 'error' | 'label' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'id'>> & {
+    defaultValue: string;
+};
+type InputReactProps = Pick<TextFieldProps, 'onChange' | 'onFocus' | 'onInput' | 'onBlur'>;
+
+declare const internals: unique symbol;
+declare class PreactInputElement extends PreactCustomElement implements Pick<InputBaseProps, 'defaultValue' | 'disabled' | 'error' | 'label' | 'name' | 'required' | 'value'> {
+    #private;
+    static formAssociated: boolean;
+    [internals]: ElementInternals;
+    accessor onchange: EventListener | null;
+    accessor oninput: EventListener | null;
+    accessor onfocus: EventListener | null;
+    accessor onblur: EventListener | null;
+    accessor name: InputBaseProps['name'];
+    accessor label: InputBaseProps['label'];
+    accessor error: InputBaseProps['error'];
+    accessor defaultValue: InputBaseProps['defaultValue'];
+    get value(): InputBaseProps['value'];
+    set value(value: InputBaseProps['value']);
+    accessor disabled: InputBaseProps['disabled'];
+    accessor required: InputBaseProps['required'];
+    constructor(renderImpl: RenderImpl);
+}
+
+declare class PreactInputFieldElement extends PreactInputElement implements InputBaseProps {
+    accessor placeholder: InputBaseProps['placeholder'];
+    accessor readOnly: InputBaseProps['readOnly'];
+    constructor(renderImpl: RenderImpl);
+}
+
+interface SharedProps$3 extends Pick<SelectProps$1, 'disabled' | 'error' | 'label' | 'name' | 'placeholder' | 'required' | 'value'> {
+}
+declare class Select$1 extends PreactInputFieldElement implements SharedProps$3 {
+    #private;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$d]: Select$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$d]: HTMLAttributes<HTMLElement> & ReactProps$d;
+        }
+    }
+}
+
+declare const tagName$d = "shopify-select";
+interface ReactProps$d extends Partial<SharedProps$3 & InputReactProps> {
+}
+
+type RequiredSectionProps = Required<SectionProps$2>;
+interface SectionProps$1 {
+    accessibilityLabel: RequiredSectionProps['accessibilityLabel'];
+    heading: RequiredSectionProps['heading'];
+    padding: RequiredSectionProps['padding'];
+}
+
+declare class Section$1 extends PreactCustomElement implements SectionProps$1 {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    accessor accessibilityLabel: SectionProps$1['accessibilityLabel'];
+    accessor heading: SectionProps$1['heading'];
+    accessor padding: SectionProps$1['padding'];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$c]: Section$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$c]: HTMLAttributes<HTMLElement> & ReactProps$c;
+        }
+    }
+}
+
+declare const tagName$c = "shopify-section";
+interface ReactProps$c extends Partial<SectionProps$1>, Pick<SectionProps$2, 'id'> {
+}
+
+interface ParagraphProps$1 extends Required<Pick<ParagraphProps$2, 'lineClamp' | 'accessibilityVisibility' | 'fontVariantNumeric' | 'tone'>> {
+    color: Extract<ParagraphProps$2['color'], 'base' | 'subdued'>;
+}
+
+declare class Paragraph$1 extends PreactCustomElement implements ParagraphProps$1 {
+    accessor fontVariantNumeric: ParagraphProps$1['fontVariantNumeric'];
+    accessor lineClamp: ParagraphProps$1['lineClamp'];
+    accessor tone: ParagraphProps$1['tone'];
+    accessor color: ParagraphProps$1['color'];
+    accessor accessibilityVisibility: ParagraphProps$1['accessibilityVisibility'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$b]: Paragraph$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$b]: HTMLAttributes<HTMLElement> & ReactProps$b;
+        }
+    }
+}
+
+declare const tagName$b = "shopify-paragraph";
+interface ReactProps$b extends Partial<ParagraphProps$1>, Pick<ParagraphProps$2, 'id'> {
+}
+
+interface SharedProps$2 extends Required<Pick<OptionGroupProps$1, 'disabled' | 'label'>> {
+}
+declare class OptionGroup$1 extends PreactCustomElement implements SharedProps$2 {
+    accessor disabled: SharedProps$2['disabled'];
+    accessor label: SharedProps$2['label'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$a]: OptionGroup$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$a]: HTMLAttributes<HTMLElement> & ReactProps$a;
+        }
+    }
+}
+
+declare const tagName$a = "shopify-option-group";
+interface ReactProps$a extends Partial<SharedProps$2> {
+}
+
+interface SharedProps$1 extends Required<Pick<OptionProps$1, 'disabled' | 'value'>> {
+}
+declare class Option$1 extends PreactCustomElement implements SharedProps$1 {
+    accessor value: SharedProps$1['value'];
+    accessor disabled: SharedProps$1['disabled'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$9]: Option$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$9]: HTMLAttributes<HTMLElement> & ReactProps$9;
+        }
+    }
+}
+
+declare const tagName$9 = "shopify-option";
+interface ReactProps$9 extends Partial<SharedProps$1> {
+}
+
+type RequiredLinkProps = Required<LinkProps$2>;
+interface LinkProps$1 {
+    tone: Extract<RequiredLinkProps['tone'], 'auto' | 'neutral' | 'critical'>;
+    accessibilityLabel: RequiredLinkProps['accessibilityLabel'];
+    href: RequiredLinkProps['href'];
+    target: RequiredLinkProps['target'];
+}
+
+declare class Link$1 extends PreactCustomElement implements LinkProps$1 {
+    accessor tone: LinkProps$1['tone'];
+    accessor accessibilityLabel: LinkProps$1['accessibilityLabel'];
+    accessor href: LinkProps$1['href'];
+    accessor target: LinkProps$1['target'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$8]: Link$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$8]: HTMLAttributes<HTMLElement> & ReactProps$8;
+        }
+    }
+}
+
+declare const tagName$8 = "shopify-link";
+interface ReactProps$8 extends Partial<LinkProps$1>, Pick<LinkProps$2, 'onClick' | 'id' | 'lang'> {
+}
+
+interface ImageProps$1 {
+    accessibilityRole: Extract<ImageProps$2['accessibilityRole'], 'img' | 'presentation' | 'none'>;
+    alt: NonNullable<ImageProps$2['alt']>;
+    loading: Extract<ImageProps$2['loading'], 'eager' | 'lazy'>;
+    src: NonNullable<ImageProps$2['src']>;
+}
+
+declare class Image$1 extends PreactCustomElement implements ImageProps$1 {
+    accessor src: ImageProps$1['src'];
+    accessor alt: ImageProps$1['alt'];
+    accessor loading: ImageProps$1['loading'];
+    accessor accessibilityRole: ImageProps$1['accessibilityRole'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$7]: Image$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$7]: HTMLAttributes<HTMLElement> & ReactProps$7;
+        }
+    }
+}
+
+declare const tagName$7 = "shopify-image";
+interface ReactProps$7 extends Partial<ImageProps$1>, Pick<ImageProps$2, 'onError' | 'onLoad' | 'id'> {
+}
+
+interface IconProps$1 {
+    type: '' | IconType;
+    tone: Extract<IconProps$2['tone'], 'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'>;
+    color: Extract<IconProps$2['color'], 'base' | 'subdued'>;
+    size: Extract<IconProps$2['size'], 'small' | 'base'>;
+}
+
+declare class Icon$1 extends PreactCustomElement implements IconProps$1 {
+    accessor color: IconProps$1['color'];
+    accessor tone: IconProps$1['tone'];
+    accessor type: IconProps$1['type'];
+    accessor size: IconProps$1['size'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$6]: Icon$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$6]: Omit<HTMLAttributes<HTMLElement>, 'size'> & ReactProps$6;
+        }
+    }
+}
+
+declare const tagName$6 = "shopify-icon";
+interface ReactProps$6 extends Partial<IconProps$1>, Pick<IconProps$2, 'id'> {
+}
+
+type RequiredHeadingProps = Required<HeadingProps$2>;
+interface HeadingProps$1 {
+    accessibilityRole: RequiredHeadingProps['accessibilityRole'];
+    accessibilityVisibility: RequiredHeadingProps['accessibilityVisibility'];
+    lineClamp: RequiredHeadingProps['lineClamp'];
+}
+
+declare class Heading$1 extends PreactCustomElement implements HeadingProps$1 {
+    accessor accessibilityRole: HeadingProps$1['accessibilityRole'];
+    accessor lineClamp: HeadingProps$1['lineClamp'];
+    accessor accessibilityVisibility: HeadingProps$1['accessibilityVisibility'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$5]: Heading$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$5]: HTMLAttributes<HTMLElement> & ReactProps$5;
+        }
+    }
+}
+
+declare const tagName$5 = "shopify-heading";
+interface ReactProps$5 extends Partial<HeadingProps$1>, Pick<HeadingProps$2, 'id'> {
+}
+
+interface DividerProps$1 {
+    direction: Extract<DividerProps$2['direction'], 'inline' | 'block'>;
+    color: Extract<DividerProps$2['color'], 'subdued' | 'base' | 'strong'>;
+}
+
+declare class Divider$1 extends PreactCustomElement implements DividerProps$1 {
+    accessor direction: DividerProps$1['direction'];
+    accessor color: DividerProps$1['color'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$4]: Divider$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$4]: HTMLAttributes<HTMLElement> & ReactProps$4;
+        }
+    }
+}
+
+declare const tagName$4 = "shopify-divider";
+interface ReactProps$4 extends Partial<DividerProps$1>, Pick<DividerProps$2, 'id'> {
+}
+
+interface CheckboxProps$1 extends Required<Pick<CheckboxProps$2, 'accessibilityLabel' | 'checked' | 'details' | 'disabled' | 'error' | 'id' | 'indeterminate' | 'label' | 'name' | 'required' | 'value'>> {
+}
+
+declare class Checkbox$1 extends PreactInputElement implements CheckboxProps$1 {
+    #private;
+    accessor indeterminate: CheckboxProps$1['indeterminate'];
+    get checked(): boolean;
+    set checked(checked: CheckboxProps$1['checked']);
+    accessor details: CheckboxProps$1['details'];
+    accessor accessibilityLabel: CheckboxProps$1['accessibilityLabel'];
+    get value(): string;
+    set value(value: string);
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$3]: Checkbox$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$3]: HTMLAttributes<HTMLElement> & ReactProps$3;
+        }
+    }
+}
+
+declare const tagName$3 = "shopify-checkbox";
+interface ReactProps$3 extends Partial<CheckboxProps$1>, Pick<CheckboxProps$2, 'id' | 'onChange'> {
+}
+
+type ButtonOnlyProps = Extract<ButtonProps$2, {
+    type?: unknown;
+}>;
+type ButtonBaseProps = Required<Pick<ButtonOnlyProps, 'accessibilityLabel' | 'disabled' | 'activateAction' | 'activateTarget' | 'lang' | 'loading' | 'type' | 'variant' | 'target' | 'href' | 'download'>>;
+interface ButtonProps$1 extends ButtonBaseProps {
+    tone: Extract<ButtonProps$2['tone'], 'neutral' | 'critical' | 'auto'>;
+    icon: IconProps$1['type'];
+}
+
+interface SharedProps extends Required<Pick<InteractionProps, 'activateTarget'>> {
+    activateAction: Extract<InteractionProps['activateAction'], 'show' | 'hide' | 'toggle' | 'auto'>;
+}
+declare class PreactOverlayControl extends PreactCustomElement implements SharedProps {
+    accessor activateTarget: SharedProps['activateTarget'];
+    accessor activateAction: SharedProps['activateAction'];
+    constructor(renderImpl: RenderImpl);
+}
+
+declare class Button$1 extends PreactOverlayControl implements ButtonProps$1 {
+    accessor disabled: ButtonProps$1['disabled'];
+    accessor icon: ButtonProps$1['icon'];
+    accessor loading: ButtonProps$1['loading'];
+    accessor variant: ButtonProps$1['variant'];
+    accessor tone: ButtonProps$1['tone'];
+    accessor lang: ButtonProps$1['lang'];
+    accessor target: ButtonProps$1['target'];
+    accessor href: ButtonProps$1['href'];
+    accessor download: ButtonProps$1['download'];
+    accessor onclick: EventListener | null;
+    accessor onblur: EventListener | null;
+    accessor onfocus: EventListener | null;
+    accessor type: ButtonProps$1['type'];
+    accessor accessibilityLabel: ButtonProps$1['accessibilityLabel'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$2]: Button$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$2]: HTMLAttributes<HTMLElement> & ReactProps$2;
+        }
+    }
+}
+
+declare const tagName$2 = "shopify-button";
+interface ReactProps$2 extends Partial<ButtonProps$1>, Pick<ButtonProps$2, 'onClick' | 'onFocus' | 'onBlur' | 'id'> {
+}
+
+declare class Box$1 extends BoxElement implements BoxProps$1 {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$1]: Box$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$1]: HTMLAttributes<HTMLElement> & ReactProps$1;
+        }
+    }
+}
+
+declare const tagName$1 = "shopify-box";
+interface ReactProps$1 extends Partial<BoxProps$1>, Pick<BoxProps$2, 'id'> {
+}
+
+interface BadgeProps$1 {
+    accessibilityLabel: NonNullable<BadgeProps$2['accessibilityLabel']>;
+    color: Extract<BadgeProps$2['color'], 'base' | 'strong'>;
+    icon: IconProps$1['type'] | '';
+    size: Extract<BadgeProps$2['size'], 'base' | 'large' | 'large-100'>;
+    tone: Extract<BadgeProps$2['tone'], 'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'>;
+}
+
+declare class Badge$1 extends PreactCustomElement implements BadgeProps$1 {
+    accessor accessibilityLabel: BadgeProps$1['accessibilityLabel'];
+    accessor color: BadgeProps$1['color'];
+    accessor icon: BadgeProps$1['icon'];
+    accessor size: BadgeProps$1['size'];
+    accessor tone: BadgeProps$1['tone'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: Badge$1;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: HTMLAttributes<HTMLElement> & ReactProps;
+        }
+    }
+}
+
+declare const tagName = "shopify-badge";
+interface ReactProps extends Partial<BadgeProps$1>, Pick<BadgeProps$2, 'id'> {
+}
+
+type BadgeProps = ReactProps;
+
+type BoxProps = ReactProps$1;
+
+type ButtonProps = ReactProps$2;
+
+type CheckboxProps = ReactProps$3;
+
+type DividerProps = ReactProps$4;
+
+type HeadingProps = ReactProps$5;
+
+type IconProps = ReactProps$6;
+
+type ImageProps = ReactProps$7;
+
+type LinkProps = ReactProps$8;
+
+type OptionProps = ReactProps$9;
+
+type OptionGroupProps = ReactProps$a;
+
+type ParagraphProps = ReactProps$b;
+
+type SectionProps = ReactProps$c;
+
+type SelectProps = ReactProps$d;
+
+type SpinnerProps = ReactProps$e;
+
+type StackProps = ReactProps$f;
+
+type TextProps = ReactProps$g;
+
+declare const Badge: React.ComponentType<React.PropsWithChildren<ReactProps>>;
+
+declare const Box: React.ComponentType<React.PropsWithChildren<ReactProps$1>>;
+
+declare const Button: React.ComponentType<React.PropsWithChildren<ReactProps$2>>;
+
+declare const Checkbox: React.ComponentType<React.PropsWithChildren<ReactProps$3>>;
+
+declare const Divider: React.ComponentType<React.PropsWithChildren<ReactProps$4>>;
+
+declare const Heading: React.ComponentType<React.PropsWithChildren<ReactProps$5>>;
+
+declare const Icon: React.ComponentType<React.PropsWithChildren<ReactProps$6>>;
+
+declare const Image: React.ComponentType<React.PropsWithChildren<ReactProps$7>>;
+
+declare const Link: React.ComponentType<React.PropsWithChildren<ReactProps$8>>;
+
+declare const Option: React.ComponentType<React.PropsWithChildren<ReactProps$9>>;
+
+declare const OptionGroup: React.ComponentType<React.PropsWithChildren<ReactProps$a>>;
+
+declare const Paragraph: React.ComponentType<React.PropsWithChildren<ReactProps$b>>;
+
+declare const Section: React.ComponentType<React.PropsWithChildren<ReactProps$c>>;
+
+declare const Select: React.ComponentType<React.PropsWithChildren<ReactProps$d>>;
+
+declare const Spinner: React.ComponentType<React.PropsWithChildren<ReactProps$e>>;
+
+declare const Stack: React.ComponentType<React.PropsWithChildren<ReactProps$f>>;
+
+declare const Text: React.ComponentType<React.PropsWithChildren<ReactProps$g>>;
+
+export { Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Divider, type DividerProps, Heading, type HeadingProps, Icon, type IconProps, Image, type ImageProps, Link, type LinkProps, Option, OptionGroup, type OptionGroupProps, type OptionProps, Paragraph, type ParagraphProps, Section, type SectionProps, Select, type SelectProps, Spinner, type SpinnerProps, Stack, type StackProps, Text, type TextProps };
diff --git a/packages/ui-extensions-react/src/surfaces/admin/components.ts b/packages/ui-extensions-react/src/surfaces/admin/components.ts
deleted file mode 100644
index 4342897b67..0000000000
--- a/packages/ui-extensions-react/src/surfaces/admin/components.ts
+++ /dev/null
@@ -1,875 +0,0 @@
-import type {
-  TextProps as TextProps$2,
-  BoxProps as BoxProps$2,
-  StackProps as StackProps$2,
-  SpinnerProps as SpinnerProps$2,
-  TextFieldProps,
-  SelectProps as SelectProps$1,
-  SectionProps as SectionProps$2,
-  ParagraphProps as ParagraphProps$2,
-  OptionGroupProps as OptionGroupProps$1,
-  OptionProps as OptionProps$1,
-  LinkProps as LinkProps$2,
-  ImageProps as ImageProps$2,
-  IconProps as IconProps$2,
-  HeadingProps as HeadingProps$2,
-  DividerProps as DividerProps$2,
-  CheckboxProps as CheckboxProps$2,
-  ButtonProps as ButtonProps$2,
-  BadgeProps as BadgeProps$2,
-} from '@shopify/ui-api-design';
-import type {MaybeAllValuesShorthandProperty} from '@shopify/ui-api-design/dist/shared/utils';
-import * as React from 'react';
-
-export type IconType =
-  | 'wrench'
-  | 'viewport-tall'
-  | 'viewport-short'
-  | 'viewport-narrow'
-  | 'wifi'
-  | 'work'
-  | 'watch'
-  | 'wallet'
-  | 'wand'
-  | 'upload'
-  | 'undo'
-  | 'viewport-wide'
-  | 'unknown-device'
-  | 'transaction'
-  | 'transfer-internal'
-  | 'transfer-in'
-  | 'transfer-out'
-  | 'transaction-fee-euro'
-  | 'transaction-fee-yen'
-  | 'transaction-fee-rupee'
-  | 'transaction-fee-dollar'
-  | 'transaction-fee-pound'
-  | 'thumbs-up'
-  | 'transfer'
-  | 'tip-jar'
-  | 'theme-template'
-  | 'thumbs-down'
-  | 'theme-store'
-  | 'theme'
-  | 'theme-edit'
-  | 'text-with-image'
-  | 'text'
-  | 'toggle-off'
-  | 'text-underline'
-  | 'text-title'
-  | 'text-in-columns'
-  | 'text-indent'
-  | 'text-italic'
-  | 'text-font'
-  | 'text-font-list'
-  | 'text-grammar'
-  | 'text-color'
-  | 'text-block'
-  | 'text-bold'
-  | 'toggle-on'
-  | 'text-align-right'
-  | 'text-align-center'
-  | 'text-align-left'
-  | 'tablet'
-  | 'team'
-  | 'store'
-  | 'tax'
-  | 'sun'
-  | 'store-online'
-  | 'store-import'
-  | 'stop-circle'
-  | 'target'
-  | 'store-managed'
-  | 'star-filled'
-  | 'status'
-  | 'sort-descending'
-  | 'text-in-rows'
-  | 'sort-ascending'
-  | 'sound'
-  | 'social-ad'
-  | 'smiley-neutral'
-  | 'status-active'
-  | 'sports'
-  | 'social-post'
-  | 'smiley-joy'
-  | 'smiley-happy'
-  | 'slideshow'
-  | 'shipping-label'
-  | 'shield-none'
-  | 'shield-person'
-  | 'smiley-sad'
-  | 'shield-check-mark'
-  | 'shopcodes'
-  | 'settings'
-  | 'share'
-  | 'send'
-  | 'search-resource'
-  | 'search-list'
-  | 'search'
-  | 'save'
-  | 'rotate-left'
-  | 'text-quote'
-  | 'search-recent'
-  | 'sandbox'
-  | 'replay'
-  | 'shield-pending'
-  | 'reward'
-  | 'remove-background'
-  | 'replace'
-  | 'return'
-  | 'receipt'
-  | 'receipt-yen'
-  | 'receipt-refund'
-  | 'receipt-rupee'
-  | 'reset'
-  | 'receipt-euro'
-  | 'refresh'
-  | 'redo'
-  | 'receipt-paid'
-  | 'question-circle'
-  | 'receipt-dollar'
-  | 'product-unavailable'
-  | 'receipt-pound'
-  | 'profile'
-  | 'product-return'
-  | 'product-add'
-  | 'print'
-  | 'product-list'
-  | 'product-reference'
-  | 'product-remove'
-  | 'price-list'
-  | 'product-cost'
-  | 'play'
-  | 'play-circle'
-  | 'point-of-sale'
-  | 'phone-out'
-  | 'pin'
-  | 'plan'
-  | 'phone-in'
-  | 'person-segment'
-  | 'personalized-text'
-  | 'payout-yen'
-  | 'person-remove'
-  | 'person-exit'
-  | 'payout'
-  | 'payout-pound'
-  | 'payout-dollar'
-  | 'person-lock'
-  | 'passkey'
-  | 'payout-euro'
-  | 'paint-brush-round'
-  | 'payout-rupee'
-  | 'payment-capture'
-  | 'paper-check'
-  | 'pagination-end'
-  | 'pause-circle'
-  | 'paint-brush-flat'
-  | 'page-reference'
-  | 'page-up'
-  | 'person-add'
-  | 'page-attachment'
-  | 'page-clock'
-  | 'page-down'
-  | 'package-returned'
-  | 'page-add'
-  | 'package'
-  | 'pagination-start'
-  | 'package-fulfilled'
-  | 'organization'
-  | 'page-heart'
-  | 'outdent'
-  | 'outgoing'
-  | 'order-repeat'
-  | 'package-on-hold'
-  | 'page-remove'
-  | 'order-draft'
-  | 'note'
-  | 'order-first'
-  | 'note-add'
-  | 'notification'
-  | 'moon'
-  | 'money'
-  | 'minimize'
-  | 'nature'
-  | 'metaobject-reference'
-  | 'menu'
-  | 'metaobject'
-  | 'metafields'
-  | 'metaobject-list'
-  | 'menu-vertical'
-  | 'mention'
-  | 'money-none'
-  | 'megaphone'
-  | 'orders-status'
-  | 'referral-code'
-  | 'measurement-volume'
-  | 'markets'
-  | 'markets-yen'
-  | 'measurement-size'
-  | 'markets-rupee'
-  | 'maximize'
-  | 'markets-euro'
-  | 'lock'
-  | 'location-none'
-  | 'live'
-  | 'list-numbered'
-  | 'link'
-  | 'layout-sidebar-right'
-  | 'list-bulleted'
-  | 'measurement-weight'
-  | 'layout-sidebar-left'
-  | 'media-receiver'
-  | 'layout-popup'
-  | 'layout-section'
-  | 'layout-footer'
-  | 'layout-rows-2'
-  | 'layout-columns-2'
-  | 'layout-column-1'
-  | 'layout-columns-3'
-  | 'layout-buy-button'
-  | 'layout-buy-button-vertical'
-  | 'layout-block'
-  | 'layout-buy-button-horizontal'
-  | 'language-translate'
-  | 'label-printer'
-  | 'keyboard-hide'
-  | 'keyboard'
-  | 'iq'
-  | 'inventory'
-  | 'key'
-  | 'layout-header'
-  | 'layout-logo-block'
-  | 'incentive'
-  | 'images'
-  | 'image'
-  | 'incoming'
-  | 'image-explore'
-  | 'image-with-text-overlay'
-  | 'image-none'
-  | 'image-add'
-  | 'import'
-  | 'image-alt'
-  | 'icons'
-  | 'identity-card'
-  | 'hashtag'
-  | 'globe-europe'
-  | 'heart'
-  | 'inventory-updated'
-  | 'hashtag-decimal'
-  | 'gift-card'
-  | 'gauge'
-  | 'globe-asia'
-  | 'games'
-  | 'forms'
-  | 'image-magic'
-  | 'food'
-  | 'forklift'
-  | 'folder'
-  | 'folder-up'
-  | 'folder-down'
-  | 'folder-remove'
-  | 'home'
-  | 'flip-vertical'
-  | 'folder-add'
-  | 'flag'
-  | 'file'
-  | 'flower'
-  | 'flip-horizontal'
-  | 'favicon'
-  | 'eyeglasses'
-  | 'eye-check-mark'
-  | 'filter'
-  | 'eye-first'
-  | 'export'
-  | 'exchange'
-  | 'eye-dropper'
-  | 'envelope-soft-pack'
-  | 'envelope'
-  | 'exit'
-  | 'enter'
-  | 'email-newsletter'
-  | 'email-follow-up'
-  | 'duplicate'
-  | 'drag-drop'
-  | 'domain-new'
-  | 'drag-handle'
-  | 'domain'
-  | 'dock-floating'
-  | 'discount-code'
-  | 'discount'
-  | 'dock-side'
-  | 'domain-redirect'
-  | 'dns-settings'
-  | 'delete'
-  | 'desktop'
-  | 'database-add'
-  | 'data-table'
-  | 'database-connect'
-  | 'domain-landing-page'
-  | 'cursor-option'
-  | 'cursor'
-  | 'data-presentation'
-  | 'crop'
-  | 'currency-convert'
-  | 'cursor-banner'
-  | 'credit-card-tap-chip'
-  | 'credit-card-reader-tap'
-  | 'credit-card'
-  | 'credit-card-secure'
-  | 'credit-card-reader-chip'
-  | 'credit-card-cancel'
-  | 'credit-card-reader'
-  | 'database'
-  | 'credit-card-percent'
-  | 'corner-pill'
-  | 'corner-round'
-  | 'content'
-  | 'connect'
-  | 'contract'
-  | 'confetti'
-  | 'rotate-right'
-  | 'menu-horizontal'
-  | 'color-none'
-  | 'collection-list'
-  | 'code'
-  | 'collection-featured'
-  | 'compass'
-  | 'compose'
-  | 'corner-square'
-  | 'code-add'
-  | 'clipboard'
-  | 'color'
-  | 'clipboard-check'
-  | 'chevron-right'
-  | 'chevron-up-circle'
-  | 'chevron-right-circle'
-  | 'chevron-down-circle'
-  | 'circle'
-  | 'clipboard-checklist'
-  | 'chevron-left'
-  | 'checkbox'
-  | 'chat'
-  | 'collection-reference'
-  | 'chevron-left-circle'
-  | 'chart-vertical'
-  | 'chat-referral'
-  | 'chart-stacked'
-  | 'chart-line'
-  | 'chart-horizontal'
-  | 'chart-popular'
-  | 'chart-histogram-second-last'
-  | 'chart-histogram-last'
-  | 'chart-histogram-flat'
-  | 'chart-funnel'
-  | 'chart-histogram-full'
-  | 'chart-histogram-first'
-  | 'chart-cohort'
-  | 'chart-histogram-growth'
-  | 'categories'
-  | 'chart-histogram-first-last'
-  | 'channels'
-  | 'cash-pound'
-  | 'chart-donut'
-  | 'cash-yen'
-  | 'cash-dollar'
-  | 'catalog-product'
-  | 'cart-up'
-  | 'cart-discount'
-  | 'cart-sale'
-  | 'cash-rupee'
-  | 'cart'
-  | 'cart-down'
-  | 'cart-abandoned'
-  | 'caret-down'
-  | 'camera'
-  | 'camera-flip'
-  | 'caret-up'
-  | 'calendar-time'
-  | 'calculator'
-  | 'button'
-  | 'bullet'
-  | 'button-press'
-  | 'bug'
-  | 'book'
-  | 'book-open'
-  | 'cash-euro'
-  | 'blog'
-  | 'bank'
-  | 'automation'
-  | 'arrows-out-horizontal'
-  | 'backspace'
-  | 'bill'
-  | 'arrow-up'
-  | 'arrow-right'
-  | 'arrow-right-circle'
-  | 'barcode'
-  | 'arrow-up-circle'
-  | 'arrow-left'
-  | 'arrow-left-circle'
-  | 'arrow-down-circle'
-  | 'app-extension'
-  | 'alert-diamond'
-  | 'arrow-down'
-  | 'alert-location'
-  | 'airplane'
-  | 'affiliate'
-  | 'adjust'
-  | 'arrows-in-horizontal'
-  | 'x'
-  | 'x-circle'
-  | 'variant'
-  | 'view'
-  | 'star'
-  | 'sort'
-  | 'select'
-  | 'product'
-  | 'plus-circle'
-  | 'plus'
-  | 'phone'
-  | 'person'
-  | 'payment'
-  | 'page'
-  | 'order'
-  | 'order-unfulfilled'
-  | 'order-fulfilled'
-  | 'mobile'
-  | 'microphone'
-  | 'minus'
-  | 'minus-circle'
-  | 'location'
-  | 'lightbulb'
-  | 'language'
-  | 'incomplete'
-  | 'info'
-  | 'in-progress'
-  | 'hide'
-  | 'globe'
-  | 'external'
-  | 'email'
-  | 'edit'
-  | 'enabled'
-  | 'disabled'
-  | 'delivery'
-  | 'collection'
-  | 'clock'
-  | 'chevron-up'
-  | 'check'
-  | 'check-circle'
-  | 'chevron-down'
-  | 'calendar-check'
-  | 'calendar'
-  | 'blank'
-  | 'archive'
-  | 'alert-triangle'
-  | 'alert-circle'
-  | 'alert-bubble'
-  | 'attachment'
-  | 'merge'
-  | 'arrow-up-right'
-  | 'apps';
-
-interface TextProps$1
-  extends Required<Pick<TextProps$2, 'display' | 'accessibilityVisibility'>> {
-  color: Extract<TextProps$2['color'], 'base' | 'subdued'>;
-  type: Extract<
-    TextProps$2['type'],
-    'address' | 'redundant' | 'strong' | 'generic' | 'emphasis'
-  >;
-  tone: Extract<
-    TextProps$2['tone'],
-    'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'caution'
-  >;
-  fontVariantNumeric: Extract<
-    TextProps$2['fontVariantNumeric'],
-    'auto' | 'normal' | 'tabular-nums'
-  >;
-}
-
-interface ReactProps$g extends Partial<TextProps$1>, Pick<TextProps$2, 'id'> {}
-
-type MakeResponsive<T> = T | `@media${string}`;
-
-type AlignedBox = Required<BoxProps$2>;
-interface BoxProps$1 {
-  accessibilityRole: AlignedBox['accessibilityRole'];
-  background: Extract<
-    AlignedBox['background'],
-    'transparent' | 'base' | 'subdued' | 'strong'
-  >;
-  blockSize: AlignedBox['blockSize'];
-  minBlockSize: AlignedBox['minBlockSize'];
-  maxBlockSize: AlignedBox['maxBlockSize'];
-  inlineSize: AlignedBox['inlineSize'];
-  minInlineSize: AlignedBox['minInlineSize'];
-  maxInlineSize: AlignedBox['maxInlineSize'];
-  padding: MakeResponsive<AlignedBox['padding']>;
-  paddingBlock: MakeResponsive<AlignedBox['paddingBlock']>;
-  paddingBlockStart: MakeResponsive<AlignedBox['paddingBlockStart']>;
-  paddingBlockEnd: MakeResponsive<AlignedBox['paddingBlockEnd']>;
-  paddingInline: MakeResponsive<AlignedBox['paddingInline']>;
-  paddingInlineStart: MakeResponsive<AlignedBox['paddingInlineStart']>;
-  paddingInlineEnd: MakeResponsive<AlignedBox['paddingInlineEnd']>;
-  borderWidth: MaybeAllValuesShorthandProperty<
-    Extract<
-      AlignedBox['borderWidth'],
-      'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200'
-    >
-  >;
-  borderStyle: MaybeAllValuesShorthandProperty<
-    Extract<AlignedBox['borderStyle'], 'none' | 'solid' | 'dashed'>
-  >;
-  borderRadius: MaybeAllValuesShorthandProperty<
-    Extract<
-      AlignedBox['borderRadius'],
-      | 'none'
-      | 'small-200'
-      | 'small-100'
-      | 'small'
-      | 'base'
-      | 'large'
-      | 'large-100'
-      | 'large-200'
-    >
-  >;
-  borderColor: Extract<
-    AlignedBox['borderColor'],
-    'subdued' | 'base' | 'strong'
-  >;
-  accessibilityLabel: AlignedBox['accessibilityLabel'];
-  accessibilityVisibility: AlignedBox['accessibilityVisibility'];
-  display: AlignedBox['display'];
-}
-
-type AlignedStackProps = Required<StackProps$2>;
-interface StackProps$1 extends BoxProps$1 {
-  justifyContent: AlignedStackProps['justifyContent'];
-  alignItems: AlignedStackProps['alignItems'];
-  alignContent: AlignedStackProps['alignContent'];
-  gap: MakeResponsive<AlignedStackProps['gap']>;
-  rowGap: MakeResponsive<AlignedStackProps['rowGap']>;
-  columnGap: MakeResponsive<AlignedStackProps['columnGap']>;
-  direction: MakeResponsive<AlignedStackProps['direction']>;
-}
-
-interface ReactProps$f
-  extends Partial<StackProps$1>,
-    Pick<StackProps$2, 'id'> {}
-
-interface SpinnerProps$1
-  extends Required<Pick<SpinnerProps$2, 'accessibilityLabel'>> {
-  /**
-   * The size of the component.
-   *
-   * @default 'base'
-   */
-  size: Extract<SpinnerProps$2['size'], 'large' | 'large-100' | 'base'>;
-}
-
-interface ReactProps$e
-  extends Partial<SpinnerProps$1>,
-    Pick<SpinnerProps$2, 'id'> {}
-
-type InputReactProps = Pick<
-  TextFieldProps,
-  'onChange' | 'onFocus' | 'onInput' | 'onBlur'
->;
-
-interface SharedProps$3
-  extends Pick<
-    SelectProps$1,
-    | 'disabled'
-    | 'error'
-    | 'label'
-    | 'name'
-    | 'placeholder'
-    | 'required'
-    | 'value'
-  > {}
-
-interface ReactProps$d extends Partial<SharedProps$3 & InputReactProps> {}
-
-type RequiredSectionProps = Required<SectionProps$2>;
-interface SectionProps$1 {
-  accessibilityLabel: RequiredSectionProps['accessibilityLabel'];
-  heading: RequiredSectionProps['heading'];
-  padding: RequiredSectionProps['padding'];
-}
-
-interface ReactProps$c
-  extends Partial<SectionProps$1>,
-    Pick<SectionProps$2, 'id'> {}
-
-interface ParagraphProps$1
-  extends Required<
-    Pick<
-      ParagraphProps$2,
-      'lineClamp' | 'accessibilityVisibility' | 'fontVariantNumeric' | 'tone'
-    >
-  > {
-  color: Extract<ParagraphProps$2['color'], 'base' | 'subdued'>;
-}
-
-interface ReactProps$b
-  extends Partial<ParagraphProps$1>,
-    Pick<ParagraphProps$2, 'id'> {}
-
-interface SharedProps$2
-  extends Required<Pick<OptionGroupProps$1, 'disabled' | 'label'>> {}
-
-interface ReactProps$a extends Partial<SharedProps$2> {}
-
-interface SharedProps$1
-  extends Required<Pick<OptionProps$1, 'disabled' | 'value'>> {}
-
-interface ReactProps$9 extends Partial<SharedProps$1> {}
-
-type RequiredLinkProps = Required<LinkProps$2>;
-interface LinkProps$1 {
-  tone: Extract<RequiredLinkProps['tone'], 'auto' | 'neutral' | 'critical'>;
-  accessibilityLabel: RequiredLinkProps['accessibilityLabel'];
-  href: RequiredLinkProps['href'];
-  target: RequiredLinkProps['target'];
-}
-
-interface ReactProps$8
-  extends Partial<LinkProps$1>,
-    Pick<LinkProps$2, 'onClick' | 'id' | 'lang'> {}
-
-interface ImageProps$1 {
-  accessibilityRole: Extract<
-    ImageProps$2['accessibilityRole'],
-    'img' | 'presentation' | 'none'
-  >;
-  alt: NonNullable<ImageProps$2['alt']>;
-  loading: Extract<ImageProps$2['loading'], 'eager' | 'lazy'>;
-  src: NonNullable<ImageProps$2['src']>;
-}
-
-interface ReactProps$7
-  extends Partial<ImageProps$1>,
-    Pick<ImageProps$2, 'onError' | 'onLoad' | 'id'> {}
-
-interface IconProps$1 {
-  type: '' | IconType;
-  tone: Extract<
-    IconProps$2['tone'],
-    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
-  >;
-  color: Extract<IconProps$2['color'], 'base' | 'subdued'>;
-  size: Extract<IconProps$2['size'], 'small' | 'base'>;
-}
-
-interface ReactProps$6 extends Partial<IconProps$1>, Pick<IconProps$2, 'id'> {}
-
-type RequiredHeadingProps = Required<HeadingProps$2>;
-interface HeadingProps$1 {
-  accessibilityRole: RequiredHeadingProps['accessibilityRole'];
-  accessibilityVisibility: RequiredHeadingProps['accessibilityVisibility'];
-  lineClamp: RequiredHeadingProps['lineClamp'];
-}
-
-interface ReactProps$5
-  extends Partial<HeadingProps$1>,
-    Pick<HeadingProps$2, 'id'> {}
-
-interface DividerProps$1 {
-  direction: Extract<DividerProps$2['direction'], 'inline' | 'block'>;
-  color: Extract<DividerProps$2['color'], 'subdued' | 'base' | 'strong'>;
-}
-
-interface ReactProps$4
-  extends Partial<DividerProps$1>,
-    Pick<DividerProps$2, 'id'> {}
-
-interface CheckboxProps$1
-  extends Required<
-    Pick<
-      CheckboxProps$2,
-      | 'accessibilityLabel'
-      | 'checked'
-      | 'details'
-      | 'disabled'
-      | 'error'
-      | 'id'
-      | 'indeterminate'
-      | 'label'
-      | 'name'
-      | 'required'
-      | 'value'
-    >
-  > {}
-
-interface ReactProps$3
-  extends Partial<CheckboxProps$1>,
-    Pick<CheckboxProps$2, 'id' | 'onChange'> {}
-
-type ButtonOnlyProps = Extract<
-  ButtonProps$2,
-  {
-    type?: unknown;
-  }
->;
-type ButtonBaseProps = Required<
-  Pick<
-    ButtonOnlyProps,
-    | 'accessibilityLabel'
-    | 'disabled'
-    | 'activateAction'
-    | 'activateTarget'
-    | 'lang'
-    | 'loading'
-    | 'type'
-    | 'variant'
-    | 'target'
-    | 'href'
-    | 'download'
-  >
->;
-interface ButtonProps$1 extends ButtonBaseProps {
-  tone: Extract<ButtonProps$2['tone'], 'neutral' | 'critical' | 'auto'>;
-  icon: IconProps$1['type'];
-}
-
-interface ReactProps$2
-  extends Partial<ButtonProps$1>,
-    Pick<ButtonProps$2, 'onClick' | 'onFocus' | 'onBlur' | 'id'> {}
-
-interface ReactProps$1 extends Partial<BoxProps$1>, Pick<BoxProps$2, 'id'> {}
-
-interface BadgeProps$1 {
-  accessibilityLabel: NonNullable<BadgeProps$2['accessibilityLabel']>;
-  color: Extract<BadgeProps$2['color'], 'base' | 'strong'>;
-  icon: IconProps$1['type'] | '';
-  size: Extract<BadgeProps$2['size'], 'base' | 'large' | 'large-100'>;
-  tone: Extract<
-    BadgeProps$2['tone'],
-    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
-  >;
-}
-
-interface ReactProps extends Partial<BadgeProps$1>, Pick<BadgeProps$2, 'id'> {}
-
-type BadgeProps = ReactProps;
-
-type BoxProps = ReactProps$1;
-
-type ButtonProps = ReactProps$2;
-
-type CheckboxProps = ReactProps$3;
-
-type DividerProps = ReactProps$4;
-
-type HeadingProps = ReactProps$5;
-
-type IconProps = ReactProps$6;
-
-type ImageProps = ReactProps$7;
-
-type LinkProps = ReactProps$8;
-
-type OptionProps = ReactProps$9;
-
-type OptionGroupProps = ReactProps$a;
-
-type ParagraphProps = ReactProps$b;
-
-type SectionProps = ReactProps$c;
-
-type SelectProps = ReactProps$d;
-
-type SpinnerProps = ReactProps$e;
-
-type StackProps = ReactProps$f;
-
-type TextProps = ReactProps$g;
-
-declare const Badge: React.ComponentType<React.PropsWithChildren<ReactProps>>;
-
-declare const Box: React.ComponentType<React.PropsWithChildren<ReactProps$1>>;
-
-declare const Button: React.ComponentType<
-  React.PropsWithChildren<ReactProps$2>
->;
-
-declare const Checkbox: React.ComponentType<
-  React.PropsWithChildren<ReactProps$3>
->;
-
-declare const Divider: React.ComponentType<
-  React.PropsWithChildren<ReactProps$4>
->;
-
-declare const Heading: React.ComponentType<
-  React.PropsWithChildren<ReactProps$5>
->;
-
-declare const Icon: React.ComponentType<React.PropsWithChildren<ReactProps$6>>;
-
-declare const Image: React.ComponentType<React.PropsWithChildren<ReactProps$7>>;
-
-declare const Link: React.ComponentType<React.PropsWithChildren<ReactProps$8>>;
-
-declare const Option: React.ComponentType<
-  React.PropsWithChildren<ReactProps$9>
->;
-
-declare const OptionGroup: React.ComponentType<
-  React.PropsWithChildren<ReactProps$a>
->;
-
-declare const Paragraph: React.ComponentType<
-  React.PropsWithChildren<ReactProps$b>
->;
-
-declare const Section: React.ComponentType<
-  React.PropsWithChildren<ReactProps$c>
->;
-
-declare const Select: React.ComponentType<
-  React.PropsWithChildren<ReactProps$d>
->;
-
-declare const Spinner: React.ComponentType<
-  React.PropsWithChildren<ReactProps$e>
->;
-
-declare const Stack: React.ComponentType<React.PropsWithChildren<ReactProps$f>>;
-
-declare const Text: React.ComponentType<React.PropsWithChildren<ReactProps$g>>;
-
-export {
-  Badge,
-  type BadgeProps,
-  Box,
-  type BoxProps,
-  Button,
-  type ButtonProps,
-  Checkbox,
-  type CheckboxProps,
-  Divider,
-  type DividerProps,
-  Heading,
-  type HeadingProps,
-  Icon,
-  type IconProps,
-  Image,
-  type ImageProps,
-  Link,
-  type LinkProps,
-  Option,
-  OptionGroup,
-  type OptionGroupProps,
-  type OptionProps,
-  Paragraph,
-  type ParagraphProps,
-  Section,
-  type SectionProps,
-  Select,
-  type SelectProps,
-  Spinner,
-  type SpinnerProps,
-  Stack,
-  type StackProps,
-  Text,
-  type TextProps,
-};
diff --git a/packages/ui-extensions/src/surfaces/admin.ts b/packages/ui-extensions/src/surfaces/admin.ts
index b826ce834e..515707768e 100644
--- a/packages/ui-extensions/src/surfaces/admin.ts
+++ b/packages/ui-extensions/src/surfaces/admin.ts
@@ -1,5 +1,4 @@
 export * from './admin/api';
-export * from './admin/components';
 export * from './admin/extension-targets';
 export * from './admin/extension';
 export * from './admin/globals';
diff --git a/packages/ui-extensions/src/surfaces/admin/components.d.ts b/packages/ui-extensions/src/surfaces/admin/components.d.ts
new file mode 100644
index 0000000000..83c47d65e8
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components.d.ts
@@ -0,0 +1,684 @@
+export type MaybeAllValuesShorthandProperty<T extends string> = T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`;
+export interface InteractionProps {
+	/**
+	 * ID of a component that should respond to activations (e.g. clicks) on this pressable.
+	 *
+	 * See `activateAction` for how to control the behavior of the target.
+	 */
+	activateTarget?: string;
+	/**
+	 * Sets the action the `activateTarget` should take when this pressable is activated.
+	 *
+	 * See the documentation of particular components for the actions they support.
+	 *
+	 * @default 'auto' - a default action for the target component.
+	 */
+	activateAction?: "auto" | "show" | "hide" | "toggle" | "copy";
+}
+export type IconType = "wifi" | "work" | "watch" | "wand" | "viewport-wide" | "wallet" | "viewport-short" | "viewport-tall" | "viewport-narrow" | "upload" | "unknown-device" | "undo" | "transfer" | "wrench" | "transfer-in" | "transaction-fee-rupee" | "transaction-fee-yen" | "transaction-fee-pound" | "transfer-internal" | "transaction-fee-euro" | "transaction" | "thumbs-up" | "transfer-out" | "transaction-fee-dollar" | "toggle-on" | "thumbs-down" | "theme-template" | "theme-store" | "text" | "text-with-image" | "theme-edit" | "text-title" | "text-underline" | "text-quote" | "tip-jar" | "text-indent" | "text-in-columns" | "text-italic" | "text-in-rows" | "text-color" | "text-grammar" | "text-font-list" | "theme" | "text-align-left" | "text-align-right" | "text-font" | "text-align-center" | "text-block" | "toggle-off" | "target" | "team" | "tax" | "text-bold" | "store-online" | "tablet" | "sun" | "store-import" | "stop-circle" | "store-managed" | "status-active" | "status" | "sports" | "store" | "star-filled" | "sound" | "sort-descending" | "sort-ascending" | "social-post" | "smiley-neutral" | "social-ad" | "slideshow" | "smiley-happy" | "smiley-sad" | "smiley-joy" | "shopcodes" | "shipping-label" | "shield-person" | "shield-check-mark" | "shield-none" | "shield-pending" | "share" | "settings" | "search-recent" | "search-resource" | "search" | "search-list" | "send" | "save" | "rotate-left" | "rotate-right" | "reward" | "sandbox" | "return" | "replay" | "remove-background" | "refresh" | "referral-code" | "reset" | "receipt-refund" | "receipt" | "receipt-rupee" | "receipt-paid" | "receipt-euro" | "receipt-dollar" | "receipt-pound" | "question-circle" | "profile" | "receipt-yen" | "product-remove" | "product-reference" | "product-list" | "product-unavailable" | "product-return" | "product-add" | "print" | "price-list" | "play" | "point-of-sale" | "plan" | "play-circle" | "pin" | "phone-out" | "phone-in" | "personalized-text" | "product-cost" | "person-segment" | "person-remove" | "person-add" | "redo" | "person-lock" | "payout-rupee" | "payout-pound" | "payout" | "replace" | "payout-yen" | "pause-circle" | "payout-euro" | "passkey" | "person-exit" | "payment-capture" | "paint-brush-round" | "pagination-start" | "paper-check" | "paint-brush-flat" | "pagination-end" | "page-remove" | "payout-dollar" | "page-attachment" | "page-reference" | "page-clock" | "page-up" | "page-add" | "package-returned" | "package" | "page-heart" | "package-on-hold" | "outdent" | "package-fulfilled" | "orders-status" | "outgoing" | "page-down" | "order-repeat" | "order-draft" | "organization" | "notification" | "note" | "note-add" | "nature" | "money" | "order-first" | "metaobject-reference" | "money-none" | "metaobject" | "metaobject-list" | "minimize" | "menu" | "megaphone" | "menu-vertical" | "media-receiver" | "menu-horizontal" | "moon" | "measurement-volume" | "measurement-weight" | "measurement-size" | "markets-yen" | "maximize" | "markets-rupee" | "markets-euro" | "location-none" | "live" | "markets" | "list-numbered" | "lock" | "list-bulleted" | "link" | "layout-sidebar-left" | "layout-sidebar-right" | "layout-section" | "layout-logo-block" | "layout-rows-2" | "layout-popup" | "layout-header" | "layout-columns-2" | "layout-columns-3" | "layout-buy-button" | "layout-buy-button-horizontal" | "layout-buy-button-vertical" | "layout-column-1" | "keyboard" | "layout-footer" | "layout-block" | "label-printer" | "keyboard-hide" | "key" | "inventory-updated" | "iq" | "language-translate" | "incoming" | "incentive" | "inventory" | "image-with-text-overlay" | "image" | "image-none" | "image-magic" | "mention" | "image-explore" | "import" | "image-alt" | "home" | "icons" | "identity-card" | "image-add" | "metafields" | "images" | "gauge" | "globe-europe" | "gift-card" | "hashtag" | "food" | "forms" | "forklift" | "folder-remove" | "globe-asia" | "folder-add" | "heart" | "folder-up" | "flip-vertical" | "flower" | "flip-horizontal" | "flag" | "folder-down" | "favicon" | "filter" | "file" | "eye-check-mark" | "eye-dropper" | "eye-first" | "eyeglasses" | "hashtag-decimal" | "exit" | "folder" | "export" | "games" | "envelope-soft-pack" | "email-newsletter" | "email-follow-up" | "exchange" | "enter" | "domain-new" | "domain" | "drag-handle" | "domain-redirect" | "duplicate" | "domain-landing-page" | "dns-settings" | "dock-floating" | "discount" | "envelope" | "dock-side" | "drag-drop" | "delete" | "data-table" | "database-add" | "database-connect" | "currency-convert" | "data-presentation" | "database" | "cursor-option" | "crop" | "credit-card" | "cursor" | "credit-card-reader" | "desktop" | "credit-card-percent" | "credit-card-reader-chip" | "credit-card-secure" | "credit-card-cancel" | "corner-round" | "corner-square" | "credit-card-reader-tap" | "corner-pill" | "contract" | "content" | "compass" | "connect" | "compose" | "discount-code" | "confetti" | "collection-featured" | "color-none" | "collection-reference" | "color" | "code-add" | "code" | "clipboard-checklist" | "circle" | "clipboard-check" | "collection-list" | "clipboard" | "chevron-up-circle" | "chevron-right" | "chevron-right-circle" | "chevron-down-circle" | "checkbox" | "chat-referral" | "credit-card-tap-chip" | "chat" | "chart-popular" | "chart-histogram-second-last" | "chart-stacked" | "chart-horizontal" | "chart-line" | "chart-histogram-last" | "chart-histogram-full" | "chart-histogram-flat" | "chart-histogram-growth" | "chart-histogram-first" | "chart-vertical" | "channels" | "chart-donut" | "chart-histogram-first-last" | "chart-funnel" | "catalog-product" | "categories" | "cash-yen" | "chart-cohort" | "cash-pound" | "cash-rupee" | "cash-dollar" | "cart-down" | "cart-sale" | "cash-euro" | "cart-abandoned" | "caret-down" | "caret-up" | "cart-discount" | "camera-flip" | "camera" | "cart" | "calculator" | "cart-up" | "calendar-time" | "chevron-left-circle" | "button" | "button-press" | "chevron-left" | "book" | "blog" | "book-open" | "bank" | "bug" | "backspace" | "barcode" | "arrows-in-horizontal" | "bill" | "arrows-out-horizontal" | "bullet" | "arrow-up" | "automation" | "arrow-left-circle" | "arrow-down" | "arrow-right" | "arrow-up-circle" | "arrow-right-circle" | "arrow-down-circle" | "alert-location" | "arrow-left" | "alert-diamond" | "app-extension" | "cursor-banner" | "airplane" | "affiliate" | "adjust" | "x" | "x-circle" | "variant" | "star" | "sort" | "select" | "plus" | "product" | "phone" | "plus-circle" | "person" | "page" | "payment" | "order-unfulfilled" | "order" | "order-fulfilled" | "mobile" | "merge" | "microphone" | "location" | "lightbulb" | "minus-circle" | "language" | "in-progress" | "incomplete" | "info" | "hide" | "external" | "email" | "enabled" | "edit" | "globe" | "collection" | "disabled" | "chevron-up" | "delivery" | "chevron-down" | "clock" | "check" | "view" | "calendar" | "blank" | "check-circle" | "arrow-up-right" | "minus" | "alert-circle" | "alert-bubble" | "attachment" | "archive" | "calendar-check" | "apps" | "alert-triangle";
+
+import { IconProps as IconProps$1, BadgeProps as BadgeProps$1, BoxProps as BoxProps$1, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, TextFieldProps, DividerProps as DividerProps$1, HeadingProps as HeadingProps$1, ImageProps as ImageProps$1, LinkProps as LinkProps$1, OptionProps, OptionGroupProps, ParagraphProps as ParagraphProps$1, SectionProps as SectionProps$1, SelectProps, SpinnerProps as SpinnerProps$1, StackProps as StackProps$1, TextProps as TextProps$1 } from '@shopify/ui-api-design';
+import { ComponentChild } from 'preact';
+
+interface IconProps {
+    type: '' | IconType;
+    tone: Extract<IconProps$1['tone'], 'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'>;
+    color: Extract<IconProps$1['color'], 'base' | 'subdued'>;
+    size: Extract<IconProps$1['size'], 'small' | 'base'>;
+}
+
+interface BadgeProps {
+    accessibilityLabel: NonNullable<BadgeProps$1['accessibilityLabel']>;
+    color: Extract<BadgeProps$1['color'], 'base' | 'strong'>;
+    icon: IconProps['type'] | '';
+    size: Extract<BadgeProps$1['size'], 'base' | 'large' | 'large-100'>;
+    tone: Extract<BadgeProps$1['tone'], 'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'>;
+}
+
+declare const tagName$g = "shopify-badge";
+interface ReactProps$g extends Partial<BadgeProps>, Pick<BadgeProps$1, 'id'> {
+}
+
+type Style = string | CSSStyleSheet;
+type Styles = Style[] | Style;
+type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
+    ShadowRoot: (element: any) => ComponentChild;
+    styles?: Styles;
+};
+interface ActivationEventEsque {
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    button: number;
+}
+interface ClickOptions {
+    /**
+     * The event you want to influence the synthetic click.
+     */
+    sourceEvent?: ActivationEventEsque;
+}
+/**
+ * Base class for creating custom elements with Preact.
+ * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
+ * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
+ */
+declare const BaseClass: typeof globalThis.HTMLElement;
+declare abstract class PreactCustomElement extends BaseClass {
+    #private;
+    static get observedAttributes(): string[];
+    constructor({ styles, ShadowRoot: renderFunction, delegatesFocus, ...options }: RenderImpl);
+    attributeChangedCallback(name: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Queue a run of the render function.
+     * You shouldn't need to call this manually - it should be handled by changes to @property values.
+     */
+    queueRender(): void;
+    /**
+     * Internal function to add styles for legacy browsers.
+     *
+     * @private
+     */
+    _addLegacyStyleComponent(style: string): void;
+    /**
+     * Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.
+     *
+     * For example, if the `sourceEvent` was a middle click, or has particular keys held down,
+     * components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
+     *
+     * @param options
+     */
+    click({ sourceEvent }?: ClickOptions): void;
+}
+
+declare class Badge extends PreactCustomElement implements BadgeProps {
+    accessor accessibilityLabel: BadgeProps['accessibilityLabel'];
+    accessor color: BadgeProps['color'];
+    accessor icon: BadgeProps['icon'];
+    accessor size: BadgeProps['size'];
+    accessor tone: BadgeProps['tone'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$g]: Badge;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$g]: HTMLAttributes<HTMLElement> & ReactProps$g;
+        }
+    }
+}
+
+type MakeResponsive<T> = T | `@media${string}`;
+
+type AlignedBox = Required<BoxProps$1>;
+interface BoxProps {
+    accessibilityRole: AlignedBox['accessibilityRole'];
+    background: Extract<AlignedBox['background'], 'transparent' | 'base' | 'subdued' | 'strong'>;
+    blockSize: AlignedBox['blockSize'];
+    minBlockSize: AlignedBox['minBlockSize'];
+    maxBlockSize: AlignedBox['maxBlockSize'];
+    inlineSize: AlignedBox['inlineSize'];
+    minInlineSize: AlignedBox['minInlineSize'];
+    maxInlineSize: AlignedBox['maxInlineSize'];
+    padding: MakeResponsive<AlignedBox['padding']>;
+    paddingBlock: MakeResponsive<AlignedBox['paddingBlock']>;
+    paddingBlockStart: MakeResponsive<AlignedBox['paddingBlockStart']>;
+    paddingBlockEnd: MakeResponsive<AlignedBox['paddingBlockEnd']>;
+    paddingInline: MakeResponsive<AlignedBox['paddingInline']>;
+    paddingInlineStart: MakeResponsive<AlignedBox['paddingInlineStart']>;
+    paddingInlineEnd: MakeResponsive<AlignedBox['paddingInlineEnd']>;
+    borderWidth: MaybeAllValuesShorthandProperty<Extract<AlignedBox['borderWidth'], 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200'>>;
+    borderStyle: MaybeAllValuesShorthandProperty<Extract<AlignedBox['borderStyle'], 'none' | 'solid' | 'dashed'>>;
+    borderRadius: MaybeAllValuesShorthandProperty<Extract<AlignedBox['borderRadius'], 'none' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200'>>;
+    borderColor: Extract<AlignedBox['borderColor'], 'subdued' | 'base' | 'strong'>;
+    accessibilityLabel: AlignedBox['accessibilityLabel'];
+    accessibilityVisibility: AlignedBox['accessibilityVisibility'];
+    display: AlignedBox['display'];
+}
+
+declare const tagName$f = "shopify-box";
+interface ReactProps$f extends Partial<BoxProps>, Pick<BoxProps$1, 'id'> {
+}
+
+declare class BoxElement extends PreactCustomElement implements BoxProps {
+    constructor(renderImpl: RenderImpl);
+    accessor accessibilityRole: BoxProps['accessibilityRole'];
+    accessor background: BoxProps['background'];
+    accessor blockSize: BoxProps['blockSize'];
+    accessor minBlockSize: BoxProps['minBlockSize'];
+    accessor maxBlockSize: BoxProps['maxBlockSize'];
+    accessor inlineSize: BoxProps['inlineSize'];
+    accessor minInlineSize: BoxProps['minInlineSize'];
+    accessor maxInlineSize: BoxProps['maxInlineSize'];
+    accessor padding: BoxProps['padding'];
+    accessor paddingBlock: BoxProps['paddingBlock'];
+    accessor paddingBlockStart: BoxProps['paddingBlockStart'];
+    accessor paddingBlockEnd: BoxProps['paddingBlockEnd'];
+    accessor paddingInline: BoxProps['paddingInline'];
+    accessor paddingInlineStart: BoxProps['paddingInlineStart'];
+    accessor paddingInlineEnd: BoxProps['paddingInlineEnd'];
+    accessor borderWidth: BoxProps['borderWidth'];
+    accessor borderStyle: BoxProps['borderStyle'];
+    accessor borderRadius: BoxProps['borderRadius'];
+    accessor borderColor: BoxProps['borderColor'];
+    accessor accessibilityLabel: BoxProps['accessibilityLabel'];
+    accessor accessibilityVisibility: BoxProps['accessibilityVisibility'];
+    accessor display: BoxProps['display'];
+}
+
+declare class Box extends BoxElement implements BoxProps {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$f]: Box;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$f]: HTMLAttributes<HTMLElement> & ReactProps$f;
+        }
+    }
+}
+
+type ButtonOnlyProps = Extract<ButtonProps$1, {
+    type?: unknown;
+}>;
+type ButtonBaseProps = Required<Pick<ButtonOnlyProps, 'accessibilityLabel' | 'disabled' | 'activateAction' | 'activateTarget' | 'lang' | 'loading' | 'type' | 'variant' | 'target' | 'href' | 'download'>>;
+interface ButtonProps extends ButtonBaseProps {
+    tone: Extract<ButtonProps$1['tone'], 'neutral' | 'critical' | 'auto'>;
+    icon: IconProps['type'];
+}
+
+declare const tagName$e = "shopify-button";
+interface ReactProps$e extends Partial<ButtonProps>, Pick<ButtonProps$1, 'onClick' | 'onFocus' | 'onBlur' | 'id'> {
+}
+
+interface SharedProps$3 extends Required<Pick<InteractionProps, 'activateTarget'>> {
+    activateAction: Extract<InteractionProps['activateAction'], 'show' | 'hide' | 'toggle' | 'auto'>;
+}
+declare class PreactOverlayControl extends PreactCustomElement implements SharedProps$3 {
+    accessor activateTarget: SharedProps$3['activateTarget'];
+    accessor activateAction: SharedProps$3['activateAction'];
+    constructor(renderImpl: RenderImpl);
+}
+
+declare class Button extends PreactOverlayControl implements ButtonProps {
+    accessor disabled: ButtonProps['disabled'];
+    accessor icon: ButtonProps['icon'];
+    accessor loading: ButtonProps['loading'];
+    accessor variant: ButtonProps['variant'];
+    accessor tone: ButtonProps['tone'];
+    accessor lang: ButtonProps['lang'];
+    accessor target: ButtonProps['target'];
+    accessor href: ButtonProps['href'];
+    accessor download: ButtonProps['download'];
+    accessor onclick: EventListener | null;
+    accessor onblur: EventListener | null;
+    accessor onfocus: EventListener | null;
+    accessor type: ButtonProps['type'];
+    accessor accessibilityLabel: ButtonProps['accessibilityLabel'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$e]: Button;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$e]: HTMLAttributes<HTMLElement> & ReactProps$e;
+        }
+    }
+}
+
+interface CheckboxProps extends Required<Pick<CheckboxProps$1, 'accessibilityLabel' | 'checked' | 'details' | 'disabled' | 'error' | 'id' | 'indeterminate' | 'label' | 'name' | 'required' | 'value'>> {
+}
+
+declare const tagName$d = "shopify-checkbox";
+interface ReactProps$d extends Partial<CheckboxProps>, Pick<CheckboxProps$1, 'id' | 'onChange'> {
+}
+
+type InputBaseProps = Required<Pick<TextFieldProps, 'disabled' | 'error' | 'label' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'id'>> & {
+    defaultValue: string;
+};
+type InputReactProps = Pick<TextFieldProps, 'onChange' | 'onFocus' | 'onInput' | 'onBlur'>;
+
+declare const internals: unique symbol;
+declare class PreactInputElement extends PreactCustomElement implements Pick<InputBaseProps, 'defaultValue' | 'disabled' | 'error' | 'label' | 'name' | 'required' | 'value'> {
+    #private;
+    static formAssociated: boolean;
+    [internals]: ElementInternals;
+    accessor onchange: EventListener | null;
+    accessor oninput: EventListener | null;
+    accessor onfocus: EventListener | null;
+    accessor onblur: EventListener | null;
+    accessor name: InputBaseProps['name'];
+    accessor label: InputBaseProps['label'];
+    accessor error: InputBaseProps['error'];
+    accessor defaultValue: InputBaseProps['defaultValue'];
+    get value(): InputBaseProps['value'];
+    set value(value: InputBaseProps['value']);
+    accessor disabled: InputBaseProps['disabled'];
+    accessor required: InputBaseProps['required'];
+    constructor(renderImpl: RenderImpl);
+}
+
+declare class Checkbox extends PreactInputElement implements CheckboxProps {
+    #private;
+    accessor indeterminate: CheckboxProps['indeterminate'];
+    get checked(): boolean;
+    set checked(checked: CheckboxProps['checked']);
+    accessor details: CheckboxProps['details'];
+    accessor accessibilityLabel: CheckboxProps['accessibilityLabel'];
+    get value(): string;
+    set value(value: string);
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$d]: Checkbox;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$d]: HTMLAttributes<HTMLElement> & ReactProps$d;
+        }
+    }
+}
+
+interface DividerProps {
+    direction: Extract<DividerProps$1['direction'], 'inline' | 'block'>;
+    color: Extract<DividerProps$1['color'], 'subdued' | 'base' | 'strong'>;
+}
+
+declare const tagName$c = "shopify-divider";
+interface ReactProps$c extends Partial<DividerProps>, Pick<DividerProps$1, 'id'> {
+}
+
+declare class Divider extends PreactCustomElement implements DividerProps {
+    accessor direction: DividerProps['direction'];
+    accessor color: DividerProps['color'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$c]: Divider;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$c]: HTMLAttributes<HTMLElement> & ReactProps$c;
+        }
+    }
+}
+
+type RequiredHeadingProps = Required<HeadingProps$1>;
+interface HeadingProps {
+    accessibilityRole: RequiredHeadingProps['accessibilityRole'];
+    accessibilityVisibility: RequiredHeadingProps['accessibilityVisibility'];
+    lineClamp: RequiredHeadingProps['lineClamp'];
+}
+
+declare const tagName$b = "shopify-heading";
+interface ReactProps$b extends Partial<HeadingProps>, Pick<HeadingProps$1, 'id'> {
+}
+
+declare class Heading extends PreactCustomElement implements HeadingProps {
+    accessor accessibilityRole: HeadingProps['accessibilityRole'];
+    accessor lineClamp: HeadingProps['lineClamp'];
+    accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$b]: Heading;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$b]: HTMLAttributes<HTMLElement> & ReactProps$b;
+        }
+    }
+}
+
+declare const tagName$a = "shopify-icon";
+interface ReactProps$a extends Partial<IconProps>, Pick<IconProps$1, 'id'> {
+}
+
+declare class Icon extends PreactCustomElement implements IconProps {
+    accessor color: IconProps['color'];
+    accessor tone: IconProps['tone'];
+    accessor type: IconProps['type'];
+    accessor size: IconProps['size'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$a]: Icon;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$a]: Omit<HTMLAttributes<HTMLElement>, 'size'> & ReactProps$a;
+        }
+    }
+}
+
+interface ImageProps {
+    accessibilityRole: Extract<ImageProps$1['accessibilityRole'], 'img' | 'presentation' | 'none'>;
+    alt: NonNullable<ImageProps$1['alt']>;
+    loading: Extract<ImageProps$1['loading'], 'eager' | 'lazy'>;
+    src: NonNullable<ImageProps$1['src']>;
+}
+
+declare const tagName$9 = "shopify-image";
+interface ReactProps$9 extends Partial<ImageProps>, Pick<ImageProps$1, 'onError' | 'onLoad' | 'id'> {
+}
+
+declare class Image extends PreactCustomElement implements ImageProps {
+    accessor src: ImageProps['src'];
+    accessor alt: ImageProps['alt'];
+    accessor loading: ImageProps['loading'];
+    accessor accessibilityRole: ImageProps['accessibilityRole'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$9]: Image;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$9]: HTMLAttributes<HTMLElement> & ReactProps$9;
+        }
+    }
+}
+
+type RequiredLinkProps = Required<LinkProps$1>;
+interface LinkProps {
+    tone: Extract<RequiredLinkProps['tone'], 'auto' | 'neutral' | 'critical'>;
+    accessibilityLabel: RequiredLinkProps['accessibilityLabel'];
+    href: RequiredLinkProps['href'];
+    target: RequiredLinkProps['target'];
+}
+
+declare const tagName$8 = "shopify-link";
+interface ReactProps$8 extends Partial<LinkProps>, Pick<LinkProps$1, 'onClick' | 'id' | 'lang'> {
+}
+
+declare class Link extends PreactCustomElement implements LinkProps {
+    accessor tone: LinkProps['tone'];
+    accessor accessibilityLabel: LinkProps['accessibilityLabel'];
+    accessor href: LinkProps['href'];
+    accessor target: LinkProps['target'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$8]: Link;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$8]: HTMLAttributes<HTMLElement> & ReactProps$8;
+        }
+    }
+}
+
+declare const tagName$7 = "shopify-option";
+interface ReactProps$7 extends Partial<SharedProps$2> {
+}
+
+interface SharedProps$2 extends Required<Pick<OptionProps, 'disabled' | 'value'>> {
+}
+declare class Option extends PreactCustomElement implements SharedProps$2 {
+    accessor value: SharedProps$2['value'];
+    accessor disabled: SharedProps$2['disabled'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$7]: Option;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$7]: HTMLAttributes<HTMLElement> & ReactProps$7;
+        }
+    }
+}
+
+declare const tagName$6 = "shopify-option-group";
+interface ReactProps$6 extends Partial<SharedProps$1> {
+}
+
+interface SharedProps$1 extends Required<Pick<OptionGroupProps, 'disabled' | 'label'>> {
+}
+declare class OptionGroup extends PreactCustomElement implements SharedProps$1 {
+    accessor disabled: SharedProps$1['disabled'];
+    accessor label: SharedProps$1['label'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$6]: OptionGroup;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$6]: HTMLAttributes<HTMLElement> & ReactProps$6;
+        }
+    }
+}
+
+interface ParagraphProps extends Required<Pick<ParagraphProps$1, 'lineClamp' | 'accessibilityVisibility' | 'fontVariantNumeric' | 'tone'>> {
+    color: Extract<ParagraphProps$1['color'], 'base' | 'subdued'>;
+}
+
+declare const tagName$5 = "shopify-paragraph";
+interface ReactProps$5 extends Partial<ParagraphProps>, Pick<ParagraphProps$1, 'id'> {
+}
+
+declare class Paragraph extends PreactCustomElement implements ParagraphProps {
+    accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];
+    accessor lineClamp: ParagraphProps['lineClamp'];
+    accessor tone: ParagraphProps['tone'];
+    accessor color: ParagraphProps['color'];
+    accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$5]: Paragraph;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$5]: HTMLAttributes<HTMLElement> & ReactProps$5;
+        }
+    }
+}
+
+type RequiredSectionProps = Required<SectionProps$1>;
+interface SectionProps {
+    accessibilityLabel: RequiredSectionProps['accessibilityLabel'];
+    heading: RequiredSectionProps['heading'];
+    padding: RequiredSectionProps['padding'];
+}
+
+declare const tagName$4 = "shopify-section";
+interface ReactProps$4 extends Partial<SectionProps>, Pick<SectionProps$1, 'id'> {
+}
+
+declare class Section extends PreactCustomElement implements SectionProps {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    accessor accessibilityLabel: SectionProps['accessibilityLabel'];
+    accessor heading: SectionProps['heading'];
+    accessor padding: SectionProps['padding'];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$4]: Section;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$4]: HTMLAttributes<HTMLElement> & ReactProps$4;
+        }
+    }
+}
+
+declare const tagName$3 = "shopify-select";
+interface ReactProps$3 extends Partial<SharedProps & InputReactProps> {
+}
+
+declare class PreactInputFieldElement extends PreactInputElement implements InputBaseProps {
+    accessor placeholder: InputBaseProps['placeholder'];
+    accessor readOnly: InputBaseProps['readOnly'];
+    constructor(renderImpl: RenderImpl);
+}
+
+interface SharedProps extends Pick<SelectProps, 'disabled' | 'error' | 'label' | 'name' | 'placeholder' | 'required' | 'value'> {
+}
+declare class Select extends PreactInputFieldElement implements SharedProps {
+    #private;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$3]: Select;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$3]: HTMLAttributes<HTMLElement> & ReactProps$3;
+        }
+    }
+}
+
+interface SpinnerProps extends Required<Pick<SpinnerProps$1, 'accessibilityLabel'>> {
+    /**
+     * The size of the component.
+     *
+     * @default 'base'
+     */
+    size: Extract<SpinnerProps$1['size'], 'large' | 'large-100' | 'base'>;
+}
+
+declare const tagName$2 = "shopify-spinner";
+interface ReactProps$2 extends Partial<SpinnerProps>, Pick<SpinnerProps$1, 'id'> {
+}
+
+declare class Spinner extends PreactCustomElement implements SpinnerProps {
+    accessor accessibilityLabel: string;
+    accessor size: SpinnerProps['size'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$2]: Spinner;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$2]: HTMLAttributes<HTMLElement> & ReactProps$2;
+        }
+    }
+}
+
+type AlignedStackProps = Required<StackProps$1>;
+interface StackProps extends BoxProps {
+    justifyContent: AlignedStackProps['justifyContent'];
+    alignItems: AlignedStackProps['alignItems'];
+    alignContent: AlignedStackProps['alignContent'];
+    gap: MakeResponsive<AlignedStackProps['gap']>;
+    rowGap: MakeResponsive<AlignedStackProps['rowGap']>;
+    columnGap: MakeResponsive<AlignedStackProps['columnGap']>;
+    direction: MakeResponsive<AlignedStackProps['direction']>;
+}
+
+declare const tagName$1 = "shopify-stack";
+interface ReactProps$1 extends Partial<StackProps>, Pick<StackProps$1, 'id'> {
+}
+
+declare class Stack extends BoxElement implements StackProps {
+    constructor();
+    accessor direction: StackProps['direction'];
+    accessor justifyContent: StackProps['justifyContent'];
+    accessor alignItems: StackProps['alignItems'];
+    accessor alignContent: StackProps['alignContent'];
+    accessor gap: StackProps['gap'];
+    accessor rowGap: StackProps['rowGap'];
+    accessor columnGap: StackProps['columnGap'];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$1]: Stack;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$1]: HTMLAttributes<HTMLElement> & ReactProps$1;
+        }
+    }
+}
+
+interface TextProps extends Required<Pick<TextProps$1, 'display' | 'accessibilityVisibility'>> {
+    color: Extract<TextProps$1['color'], 'base' | 'subdued'>;
+    type: Extract<TextProps$1['type'], 'address' | 'redundant' | 'strong' | 'generic' | 'emphasis'>;
+    tone: Extract<TextProps$1['tone'], 'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'caution'>;
+    fontVariantNumeric: Extract<TextProps$1['fontVariantNumeric'], 'auto' | 'normal' | 'tabular-nums'>;
+}
+
+declare const tagName = "shopify-text";
+interface ReactProps extends Partial<TextProps>, Pick<TextProps$1, 'id'> {
+}
+
+declare class Text extends PreactCustomElement implements TextProps {
+    accessor display: TextProps['display'];
+    accessor fontVariantNumeric: TextProps['fontVariantNumeric'];
+    accessor color: TextProps['color'];
+    accessor tone: TextProps['tone'];
+    accessor type: TextProps['type'];
+    accessor accessibilityVisibility: TextProps['accessibilityVisibility'];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: Text;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: HTMLAttributes<HTMLElement> & ReactProps;
+        }
+    }
+}
+
+export { Badge, Box, Button, Checkbox, Divider, Heading, Icon, Image, Link, Option, OptionGroup, Paragraph, Section, Select, Spinner, Stack, Text };
diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts
deleted file mode 100644
index 9893f1be31..0000000000
--- a/packages/ui-extensions/src/surfaces/admin/components.ts
+++ /dev/null
@@ -1,2937 +0,0 @@
-declare const BaseClass: typeof globalThis.HTMLElement;
-declare abstract class PreactCustomElement extends BaseClass {}
-export type SizeKeyword =
-  | 'small-500'
-  | 'small-400'
-  | 'small-300'
-  | 'small-200'
-  | 'small-100'
-  | 'small'
-  | 'base'
-  | 'large'
-  | 'large-100'
-  | 'large-200'
-  | 'large-300'
-  | 'large-400'
-  | 'large-500';
-export type ColorKeyword = 'subdued' | 'base' | 'strong';
-export interface GlobalProps {
-  /**
-   * A unique identifier for the element.
-   */
-  id?: string;
-}
-export type BackgroundColorKeyword = 'transparent' | ColorKeyword;
-export interface BackgroundProps {
-  /**
-   * Adjust the background of the element.
-   *
-   * @default: 'transparent'
-   */
-  background?: BackgroundColorKeyword;
-}
-/**
- * Tone is a property for defining the color treatment of a component.
- *
- * A tone can apply a grouping of colors to a component. For example,
- * critical may have a specific text color and background color.
- *
- * In some cases, like for Banner, the tone may also affect the semantic and accessibility treatment of the component.
- *
- * @default 'auto'
- */
-export type ToneKeyword =
-  | 'auto'
-  | 'neutral'
-  | 'info'
-  | 'success'
-  | 'caution'
-  | 'warning'
-  | 'critical';
-/**
- * TODO: Update `any` type here after this is resolved
- * https://github.com/Shopify/ui-api-design/issues/139
- */
-export type ComponentChildren = any;
-export type IconType =
-  | 'adjust'
-  | 'affiliate'
-  | 'airplane'
-  | 'alert-bubble'
-  | 'alert-circle'
-  | 'alert-diamond'
-  | 'alert-location'
-  | 'alert-triangle'
-  | 'app-extension'
-  | 'apps'
-  | 'archive'
-  | 'arrow-down-circle'
-  | 'arrow-down-right'
-  | 'arrow-down'
-  | 'arrow-left-circle'
-  | 'arrow-left'
-  | 'arrow-right-circle'
-  | 'arrow-right'
-  | 'arrow-up-circle'
-  | 'arrow-up-right'
-  | 'arrow-up'
-  | 'arrows-in-horizontal'
-  | 'arrows-out-horizontal'
-  | 'attachment'
-  | 'automation'
-  | 'backspace'
-  | 'bag'
-  | 'bank'
-  | 'barcode'
-  | 'bill'
-  | 'blank'
-  | 'blog'
-  | 'book-open'
-  | 'book'
-  | 'bug'
-  | 'bullet'
-  | 'button-press'
-  | 'button'
-  | 'calculator'
-  | 'calendar-check'
-  | 'calendar-time'
-  | 'calendar'
-  | 'camera-flip'
-  | 'camera'
-  | 'caret-down'
-  | 'caret-up'
-  | 'cart-abandoned'
-  | 'cart-discount'
-  | 'cart-down'
-  | 'cart-sale'
-  | 'cart-up'
-  | 'cart'
-  | 'cash-dollar'
-  | 'cash-euro'
-  | 'cash-pound'
-  | 'cash-rupee'
-  | 'cash-yen'
-  | 'catalog-product'
-  | 'categories'
-  | 'channels'
-  | 'chart-cohort'
-  | 'chart-donut'
-  | 'chart-funnel'
-  | 'chart-histogram-first-last'
-  | 'chart-histogram-first'
-  | 'chart-histogram-flat'
-  | 'chart-histogram-full'
-  | 'chart-histogram-growth'
-  | 'chart-histogram-last'
-  | 'chart-histogram-second-last'
-  | 'chart-horizontal'
-  | 'chart-line'
-  | 'chart-popular'
-  | 'chart-stacked'
-  | 'chart-vertical'
-  | 'chat-referral'
-  | 'chat'
-  | 'check-circle'
-  | 'check'
-  | 'checkbox'
-  | 'chevron-down-circle'
-  | 'chevron-down'
-  | 'chevron-left-circle'
-  | 'chevron-left'
-  | 'chevron-right-circle'
-  | 'chevron-right'
-  | 'chevron-up-circle'
-  | 'chevron-up'
-  | 'circle'
-  | 'clipboard-check'
-  | 'clipboard-checklist'
-  | 'clipboard'
-  | 'clock'
-  | 'code-add'
-  | 'code'
-  | 'collection-featured'
-  | 'collection-list'
-  | 'collection-reference'
-  | 'collection'
-  | 'color-none'
-  | 'color'
-  | 'compass'
-  | 'complete'
-  | 'compose'
-  | 'confetti'
-  | 'connect'
-  | 'content'
-  | 'contract'
-  | 'corner-pill'
-  | 'corner-round'
-  | 'corner-square'
-  | 'credit-card-cancel'
-  | 'credit-card-percent'
-  | 'credit-card-reader-chip'
-  | 'credit-card-reader-tap'
-  | 'credit-card-reader'
-  | 'credit-card-secure'
-  | 'credit-card-tap-chip'
-  | 'credit-card'
-  | 'crop'
-  | 'currency-convert'
-  | 'cursor-banner'
-  | 'cursor-option'
-  | 'cursor'
-  | 'data-presentation'
-  | 'data-table'
-  | 'database-add'
-  | 'database-connect'
-  | 'database'
-  | 'delete'
-  | 'delivered'
-  | 'delivery'
-  | 'desktop'
-  | 'disabled'
-  | 'discount-code'
-  | 'discount'
-  | 'dns-settings'
-  | 'dock-floating'
-  | 'dock-side'
-  | 'domain-landing-page'
-  | 'domain-new'
-  | 'domain-redirect'
-  | 'domain'
-  | 'drag-drop'
-  | 'drag-handle'
-  | 'duplicate'
-  | 'edit'
-  | 'email-follow-up'
-  | 'email-newsletter'
-  | 'email'
-  | 'enabled'
-  | 'enter'
-  | 'envelope-soft-pack'
-  | 'envelope'
-  | 'exchange'
-  | 'exit'
-  | 'export'
-  | 'external'
-  | 'eye-check-mark'
-  | 'eye-dropper'
-  | 'eye-first'
-  | 'eyeglasses'
-  | 'fav'
-  | 'favicon'
-  | 'file'
-  | 'filter'
-  | 'flag'
-  | 'flip-horizontal'
-  | 'flip-vertical'
-  | 'flower'
-  | 'folder-add'
-  | 'folder-down'
-  | 'folder-remove'
-  | 'folder-up'
-  | 'folder'
-  | 'food'
-  | 'forklift'
-  | 'forms'
-  | 'games'
-  | 'gauge'
-  | 'geolocation'
-  | 'gift-card'
-  | 'gift'
-  | 'globe-asia'
-  | 'globe-europe'
-  | 'globe'
-  | 'grid'
-  | 'hashtag-decimal'
-  | 'hashtag'
-  | 'heart'
-  | 'hide'
-  | 'hollow-circle'
-  | 'home'
-  | 'icons'
-  | 'identity-card'
-  | 'image-add'
-  | 'image-alt'
-  | 'image-explore'
-  | 'image-magic'
-  | 'image-none'
-  | 'image-with-text-overlay'
-  | 'image'
-  | 'images'
-  | 'import'
-  | 'in-progress'
-  | 'incentive'
-  | 'incoming'
-  | 'incomplete'
-  | 'info'
-  | 'inventory-updated'
-  | 'inventory'
-  | 'iq'
-  | 'key'
-  | 'keyboard-hide'
-  | 'keyboard'
-  | 'label-printer'
-  | 'language-translate'
-  | 'language'
-  | 'layout-block'
-  | 'layout-buy-button-horizontal'
-  | 'layout-buy-button-vertical'
-  | 'layout-buy-button'
-  | 'layout-column-1'
-  | 'layout-columns-2'
-  | 'layout-columns-3'
-  | 'layout-footer'
-  | 'layout-header'
-  | 'layout-logo-block'
-  | 'layout-popup'
-  | 'layout-rows-2'
-  | 'layout-section'
-  | 'layout-sidebar-left'
-  | 'layout-sidebar-right'
-  | 'lightbulb'
-  | 'link'
-  | 'list-bulleted'
-  | 'list-numbered'
-  | 'live'
-  | 'location-none'
-  | 'location'
-  | 'lock'
-  | 'map'
-  | 'markets-euro'
-  | 'markets-rupee'
-  | 'markets-yen'
-  | 'markets'
-  | 'maximize'
-  | 'measurement-size'
-  | 'measurement-volume'
-  | 'measurement-weight'
-  | 'media-receiver'
-  | 'megaphone'
-  | 'mention'
-  | 'menu-horizontal'
-  | 'menu-vertical'
-  | 'menu'
-  | 'merge'
-  | 'metafields'
-  | 'metaobject-list'
-  | 'metaobject-reference'
-  | 'metaobject'
-  | 'microphone'
-  | 'minimize'
-  | 'minus-circle'
-  | 'minus'
-  | 'mobile'
-  | 'money-none'
-  | 'money'
-  | 'moon'
-  | 'nature'
-  | 'note-add'
-  | 'note'
-  | 'notification'
-  | 'order-draft'
-  | 'order-first'
-  | 'order-fulfilled'
-  | 'order-repeat'
-  | 'order-unfulfilled'
-  | 'order'
-  | 'orders-status'
-  | 'organization'
-  | 'outdent'
-  | 'outgoing'
-  | 'package-fulfilled'
-  | 'package-on-hold'
-  | 'package-returned'
-  | 'package'
-  | 'page-add'
-  | 'page-attachment'
-  | 'page-clock'
-  | 'page-down'
-  | 'page-heart'
-  | 'page-reference'
-  | 'page-remove'
-  | 'page-up'
-  | 'page'
-  | 'pagination-end'
-  | 'pagination-start'
-  | 'paint-brush-flat'
-  | 'paint-brush-round'
-  | 'paper-check'
-  | 'partially-complete'
-  | 'passkey'
-  | 'pause-circle'
-  | 'payment-capture'
-  | 'payment'
-  | 'payout-dollar'
-  | 'payout-euro'
-  | 'payout-pound'
-  | 'payout-rupee'
-  | 'payout-yen'
-  | 'payout'
-  | 'person-add'
-  | 'person-exit'
-  | 'person-lock'
-  | 'person-remove'
-  | 'person-segment'
-  | 'person'
-  | 'personalized-text'
-  | 'phone-in'
-  | 'phone-out'
-  | 'phone'
-  | 'pin'
-  | 'plan'
-  | 'play-circle'
-  | 'play'
-  | 'plus-circle'
-  | 'plus'
-  | 'point-of-sale'
-  | 'price-list'
-  | 'print'
-  | 'product-add'
-  | 'product-cost'
-  | 'product-list'
-  | 'product-reference'
-  | 'product-remove'
-  | 'product-return'
-  | 'product-unavailable'
-  | 'product'
-  | 'profile'
-  | 'question-circle'
-  | 'receipt-dollar'
-  | 'receipt-euro'
-  | 'receipt-folded'
-  | 'receipt-paid'
-  | 'receipt-pound'
-  | 'receipt-refund'
-  | 'receipt-rupee'
-  | 'receipt-yen'
-  | 'receipt'
-  | 'redo'
-  | 'referral-code'
-  | 'refresh'
-  | 'remove-background'
-  | 'reorder'
-  | 'replace'
-  | 'replay'
-  | 'reset'
-  | 'return'
-  | 'reward'
-  | 'rotate-left'
-  | 'rotate-right'
-  | 'sandbox'
-  | 'save'
-  | 'savings'
-  | 'search-list'
-  | 'search-recent'
-  | 'search-resource'
-  | 'search'
-  | 'select'
-  | 'send'
-  | 'settings'
-  | 'share'
-  | 'shield-check-mark'
-  | 'shield-none'
-  | 'shield-pending'
-  | 'shield-person'
-  | 'shipping-label'
-  | 'shopcodes'
-  | 'slideshow'
-  | 'smiley-happy'
-  | 'smiley-joy'
-  | 'smiley-neutral'
-  | 'smiley-sad'
-  | 'social-ad'
-  | 'social-post'
-  | 'sort-ascending'
-  | 'sort-descending'
-  | 'sort'
-  | 'sound'
-  | 'sports'
-  | 'star-filled'
-  | 'star'
-  | 'status-active'
-  | 'status'
-  | 'stop-circle'
-  | 'store-import'
-  | 'store-managed'
-  | 'store-online'
-  | 'store'
-  | 'sun'
-  | 'tablet'
-  | 'target'
-  | 'tax'
-  | 'team'
-  | 'text-align-center'
-  | 'text-align-left'
-  | 'text-align-right'
-  | 'text-block'
-  | 'text-bold'
-  | 'text-color'
-  | 'text-font-list'
-  | 'text-font'
-  | 'text-grammar'
-  | 'text-in-columns'
-  | 'text-in-rows'
-  | 'text-indent-remove'
-  | 'text-indent'
-  | 'text-italic'
-  | 'text-quote'
-  | 'text-title'
-  | 'text-underline'
-  | 'text-with-image'
-  | 'text'
-  | 'theme-edit'
-  | 'theme-store'
-  | 'theme-template'
-  | 'theme'
-  | 'thumbs-down'
-  | 'thumbs-up'
-  | 'tip-jar'
-  | 'toggle-off'
-  | 'toggle-on'
-  | 'transaction-fee-dollar'
-  | 'transaction-fee-euro'
-  | 'transaction-fee-pound'
-  | 'transaction-fee-rupee'
-  | 'transaction-fee-yen'
-  | 'transaction'
-  | 'transfer-in'
-  | 'transfer-internal'
-  | 'transfer-out'
-  | 'transfer'
-  | 'truck'
-  | 'undo'
-  | 'unknown-device'
-  | 'unlock'
-  | 'upload'
-  | 'variant'
-  | 'view'
-  | 'viewport-narrow'
-  | 'viewport-short'
-  | 'viewport-tall'
-  | 'viewport-wide'
-  | 'wallet'
-  | 'wand'
-  | 'watch'
-  | 'wifi'
-  | 'work'
-  | 'wrench'
-  | 'x-circle'
-  | 'x';
-export interface BadgeProps extends GlobalProps {
-  /**
-   * The content of the Badge.
-   */
-  children?: ComponentChildren;
-  /**
-   * Sets the tone of the Badge, based on the intention of the information being conveyed.
-   *
-   * @default 'auto'
-   */
-  tone?: ToneKeyword;
-  /**
-   * Modify the color to be more or less intense.
-   *
-   * @default 'base'
-   */
-  color?: ColorKeyword;
-  /**
-   * The type of icon to be displayed in the badge.
-   */
-  icon?: IconType;
-  /**
-   * The position of the icon in relation to the text.
-   */
-  iconPosition?: 'start' | 'end';
-  /**
-   * A label that describes the purpose or contents of the Badge. When set,
-   * it will be announced to users using assistive technologies and will
-   * provide them with more context.
-   *
-   * Use this when the badge text is not enough context for users using assistive technologies.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Adjusts the size.
-   *
-   * @default 'base'
-   */
-  size?: SizeKeyword;
-}
-/**
- * Like `Extract`, but ensures that the extracted type is a strict subtype of the input type.
- */
-export type ExtractStrict<T, U extends T> = Extract<T, U>;
-export type MaybeAllValuesShorthandProperty<T extends string> =
-  | T
-  | `${T} ${T}`
-  | `${T} ${T} ${T}`
-  | `${T} ${T} ${T} ${T}`;
-export type MaybeTwoValuesShorthandProperty<T extends string> = T | `${T} ${T}`;
-/**
- * Prevents widening string literal types in a union to `string`.
- * @example
- * type PropName = 'foo' | 'bar' | string
- * //   ^? string
- * type PropName = 'foo' | 'bar' | (string & {})
- * //   ^? 'foo' | 'bar' | (string & {})
- */
-export type AnyString = string & {};
-export interface DisplayProps {
-  /**
-   * Sets the outer display type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).
-   *
-   * - `auto` the component's initial value. The actual value depends on the component and context.
-   * - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
-   * @default 'auto'
-   */
-  display?: 'auto' | 'none';
-}
-export interface AccessibilityRoleProps {
-  /**
-   * Sets the semantic meaning of the component’s content. When set,
-   * the role will be used by assistive technologies to help users
-   * navigate the page.
-   *
-   * Although, in HTML hosts, this property changes the element used,
-   * changing this property must not impact the visual styling of inside or outside of the box.
-   *
-   * @default 'generic'
-   */
-  accessibilityRole?: AccessibilityRole;
-}
-export type AccessibilityRole =
-  /**
-   * Used to indicate the primary content.
-   *
-   * In an HTML host, `main` will render a `<main>` element.
-   * Learn more about the [`<main>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs.
-   */
-  | 'main'
-  /**
-   * Used to indicate the component is a header.
-   *
-   * In an HTML host `header` will render a `<header>` element.
-   * Learn more about the [`<header>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs.
-   */
-  | 'header'
-  /**
-   * Used to display information such as copyright information, navigation links, and privacy statements.
-   *
-   * In an HTML host `footer` will render a `<footer>` element.
-   * Learn more about the [`<footer>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) in the MDN web docs.
-   */
-  | 'footer'
-  /**
-   * Used to indicate a generic section.
-   * Sections should always have a `Heading` or an accessible name provided in the `accessibilityLabel` property.
-   *
-   * In an HTML host `section` will render a `<section>` element.
-   * Learn more about the [`<section>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role) in the MDN web docs.
-   *
-   */
-  | 'section'
-  /**
-   * Used to designate a supporting section that relates to the main content.
-   *
-   * In an HTML host `aside` will render an `<aside>` element.
-   * Learn more about the [`<aside>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role) in the MDN web docs.
-   */
-  | 'aside'
-  /**
-   * Used to identify major groups of links used for navigating.
-   *
-   * In an HTML host `navigation` will render a `<nav>` element.
-   * Learn more about the [`<nav>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role) in the MDN web docs.
-   */
-  | 'navigation'
-  /**
-   * Used to identify a list of ordered items.
-   *
-   * In an HTML host `ordered-list` will render a `<ol>` element.
-   * Learn more about the [`<ol>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role) in the MDN web docs.
-   */
-  | 'ordered-list'
-  /**
-   * Used to identify an item inside a list of items.
-   *
-   * In an HTML host `list-item` will render a `<li>` element.
-   * Learn more about the [`<li>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role) in the MDN web docs.
-   */
-  | 'list-item'
-  /**
-   * Used to indicates the component acts as a divider that separates and distinguishes sections of content in a list of items.
-   *
-   * In an HTML host `list-item-separator` will render as `<li role="separator">`.
-   * Learn more about the [`<li>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and the [`separator` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) in the MDN web docs.
-   */
-  | 'list-item-separator'
-  /**
-   * Used to identify a list of unordered items.
-   *
-   * In an HTML host `unordered-list` will render a `<ul>` element.
-   * Learn more about the [`<ul>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role) in the MDN web docs.
-   */
-  | 'unordered-list'
-  /**
-   * Used to indicates the component acts as a divider that separates and distinguishes sections of content.
-   *
-   * In an HTML host `separator` will render as `<div role="separator">`.
-   * Learn more about the [`separator` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) in the MDN web docs.
-   */
-  | 'separator'
-  /**
-   * Used to define a live region containing advisory information for the user that is not important enough to be an alert.
-   *
-   * In an HTML host `status` will render as `<div role="status">`.
-   * Learn more about the [`status` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) in the MDN web docs.
-   */
-  | 'status'
-  /**
-   * Used for important, and usually time-sensitive, information.
-   *
-   * In an HTML host `alert` will render as `<div role="alert">`.
-   * Learn more about the [`alert` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) in the MDN web docs.
-   */
-  | 'alert'
-  /**
-   * Used to create a nameless container element which has no semantic meaning on its own.
-   *
-   * In an HTML host `generic'` will render a `<div>` element.
-   * Learn more about the [`generic` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role) in the MDN web docs.
-   */
-  | 'generic'
-  /**
-   * Used to strip the semantic meaning of an element, but leave the visual styling intact.
-   *
-   * Synonym for `none`
-   * Learn more about the [`presentation` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role) in the MDN web docs.
-   */
-  | 'presentation'
-  /**
-   * Used to strip the semantic meaning of an element, but leave the visual styling intact.
-   *
-   * Synonym for `presentation`
-   * Learn more about the [`none` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role) in the MDN web docs.
-   */
-  | 'none';
-export interface AccessibilityVisibilityProps {
-  /**
-   * Changes the visibility of the element.
-   *
-   * - `visible`: the element is visible to all users.
-   * - `hidden`: the element is removed from the accessibility tree but remains visible.
-   * - `exclusive`: the element is visually hidden but remains in the accessibility tree.
-   *
-   * @default 'visible'
-   */
-  accessibilityVisibility?: 'visible' | 'hidden' | 'exclusive';
-}
-export type PaddingKeyword = SizeKeyword | 'none';
-export interface PaddingProps {
-  /**
-   * Adjust the padding of all edges.
-   *
-   * 1-to-4-value syntax (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
-   * supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
-   *
-   * - 4 values: `block-start inline-end block-end inline-start`
-   * - 3 values: `block-start inline block-end`
-   * - 2 values: `block inline`
-   *
-   * For example:
-   * - `large` means block-start, inline-end, block-end and inline-start paddings are `large`.
-   * - `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.
-   * - `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
-   * - `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
-   *
-   * A padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.
-   *
-   * @default 'none'
-   */
-  padding?: MaybeAllValuesShorthandProperty<PaddingKeyword>;
-  /**
-   * Adjust the block-padding.
-   *
-   * - `large none` means block-start padding is `large`, block-end padding is `none`.
-   *
-   * This overrides the block value of `padding`.
-   *
-   * @default '' - meaning no override
-   */
-  paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
-  /**
-   * Adjust the block-start padding.
-   *
-   * This overrides the block-start value of `paddingBlock`.
-   *
-   * @default '' - meaning no override
-   */
-  paddingBlockStart?: PaddingKeyword | '';
-  /**
-   * Adjust the block-end padding.
-   *
-   * This overrides the block-end value of `paddingBlock`.
-   *
-   * @default '' - meaning no override
-   */
-  paddingBlockEnd?: PaddingKeyword | '';
-  /**
-   * Adjust the inline padding.
-   *
-   * - `large none` means inline-start padding is `large`, inline-end padding is `none`.
-   *
-   * This overrides the inline value of `padding`.
-   *
-   * @default '' - meaning no override
-   */
-  paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
-  /**
-   * Adjust the inline-start padding.
-   *
-   * This overrides the inline-start value of `paddingInline`.
-   *
-   * @default '' - meaning no override
-   */
-  paddingInlineStart?: PaddingKeyword | '';
-  /**
-   * Adjust the inline-end padding.
-   *
-   * This overrides the inline-end value of `paddingInline`.
-   *
-   * @default '' - meaning no override
-   */
-  paddingInlineEnd?: PaddingKeyword | '';
-}
-export type SizeUnits = `${number}px` | `${number}%` | `0`;
-export type SizeUnitsOrAuto = SizeUnits | 'auto';
-export type SizeUnitsOrNone = SizeUnits | 'none';
-export interface SizingProps {
-  /**
-   * Adjust the block size.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size
-   *
-   * @default 'auto'
-   */
-  blockSize?: SizeUnitsOrAuto;
-  /**
-   * Adjust the minimum block size.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size
-   *
-   * @default '0'
-   */
-  minBlockSize?: SizeUnits;
-  /**
-   * Adjust the maximum block size.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size
-   *
-   * @default 'none'
-   */
-  maxBlockSize?: SizeUnitsOrNone;
-  /**
-   * Adjust the inline size.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
-   *
-   * @default 'auto'
-   */
-  inlineSize?: SizeUnitsOrAuto;
-  /**
-   * Adjust the minimum inline size.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size
-   *
-   * @default '0'
-   */
-  minInlineSize?: SizeUnits;
-  /**
-   * Adjust the maximum inline size.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size
-   *
-   * @default 'none'
-   */
-  maxInlineSize?: SizeUnitsOrNone;
-}
-export type BorderStyleKeyword =
-  | 'none'
-  | 'solid'
-  | 'dashed'
-  | 'dotted'
-  | 'auto';
-export type BorderRadiusKeyword = SizeKeyword | 'none';
-/**
- * Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.
- */
-export type BorderShorthand =
-  | SizeKeyword
-  | `${SizeKeyword} ${ColorKeyword}`
-  | `${SizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`;
-export interface BorderProps {
-  /**
-   * Set the border via the shorthand property.
-   *
-   * This can be a size, optionally followed by a color, optionally followed by a style.
-   *
-   * If the color is not specified, it will be `base`.
-   *
-   * If the style is not specified, it will be `auto`.
-   *
-   * Values can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.
-   *
-   * @example
-   * // The following are equivalent:
-   * <Box border="large-100 strong dashed" />
-   * <Box borderWidth="large-100" borderColor="strong" borderStyle="dashed" />
-   *
-   * @default 'none' - equivalent to `none base auto`.
-   */
-  border?: BorderShorthand;
-  /**
-   * Set the width of the border.
-   *
-   * If set, it takes precedence over the `border` property's width.
-   *
-   * Like CSS, up to 4 values can be specified.
-   *
-   * If one value is specified, it applies to all sides.
-   *
-   * If two values are specified, they apply to the block sides and inline sides respectively.
-   *
-   * If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.
-   *
-   * If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
-   *
-   * @default '' - meaning no override
-   */
-  borderWidth?: MaybeAllValuesShorthandProperty<SizeKeyword> | '';
-  /**
-   * Set the style of the border.
-   *
-   * If set, it takes precedence over the `border` property's style.
-   *
-   * Like CSS, up to 4 values can be specified.
-   *
-   * If one value is specified, it applies to all sides.
-   *
-   * If two values are specified, they apply to the block sides and inline sides respectively.
-   *
-   * If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.
-   *
-   * If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
-   *
-   * @default '' - meaning no override
-   */
-  borderStyle?: MaybeAllValuesShorthandProperty<BorderStyleKeyword> | '';
-  /**
-   * Set the color of the border.
-   *
-   * If set, it takes precedence over the `border` property's color.
-   *
-   * @default '' - meaning no override
-   */
-  borderColor?: ColorKeyword | '';
-  /**
-   * Set the radius of the border.
-   *
-   * 1-to-4-value syntax (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
-   * supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
-   *
-   * - 4 values: `start-start start-end end-end end-start`
-   * - 3 values: `start-start (start-end & end-start) start-end`
-   * - 2 values: `(start-start & end-end) (start-end & end-start)`
-   *
-   * For example:
-   * - `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.
-   * - `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.
-   * - `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.
-   * - `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.
-   *
-   * @defaultValue 'none'
-   */
-  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
-}
-export interface BaseBoxProps
-  extends GlobalProps,
-    AccessibilityVisibilityProps,
-    BackgroundProps,
-    DisplayProps,
-    SizingProps,
-    PaddingProps,
-    BorderProps {
-  /**
-   * The content of the Box.
-   */
-  children?: ComponentChildren;
-  /**
-   * A label that describes the purpose or contents of the element.
-   * When set, it will be announced to users using assistive technologies and will provide them with more context.
-   *
-   * Only use this when the element's content is not enough context for users using assistive technologies.
-   */
-  accessibilityLabel?: string;
-}
-export interface BaseBoxPropsWithRole
-  extends BaseBoxProps,
-    AccessibilityRoleProps {}
-export interface BoxProps extends BaseBoxPropsWithRole {}
-export interface FocusEventProps {
-  /**
-   * Callback when the element loses focus.
-   */
-  onBlur?: () => void;
-  /**
-   * Callback when the element receives focus.
-   */
-  onFocus?: () => void;
-}
-export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
-  /**
-   * The behavior of the button.
-   *
-   * 'submit' - Used to indicate the component acts as a submit button, meaning it submits the closest form.
-   * 'button' - Used to indicate the component acts as a button, meaning it has no default action.
-   * 'reset' - Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).
-   *
-   * This property is ignored if the component supports `href` and it's set.
-   *
-   * @default 'button'
-   */
-  type?: 'submit' | 'button' | 'reset';
-  /**
-   * Callback when the button is activated.
-   * This will be called before the action indicated by `type`.
-   */
-  onClick?: () => void;
-  /**
-   * Disables the button, meaning it cannot be clicked or receive focus.
-   */
-  disabled?: boolean;
-  /**
-   * Replaces content with a loading indicator while a background action is being performed.
-   *
-   * This also disables the button.
-   */
-  loading?: boolean;
-}
-export interface LinkBehaviorProps extends FocusEventProps {
-  /**
-   * The URL to link to.
-   * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
-   */
-  href?: string;
-  /**
-   * Specifies where to display the linked URL
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
-   */
-  target?: string;
-  /**
-   * Causes the browser to treat the linked URL as a download. Download only works for same-origin URLs, or the blob: and data: schemes.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
-   */
-  download?: boolean;
-  /**
-   * Callback when the link is activated.
-   * This will be called before navigating to the location specified by `href`.
-   */
-  onClick?: () => void;
-}
-export interface InteractionProps {
-  /**
-   * ID of a component that should respond to activations (e.g. clicks) on this pressable.
-   *
-   * See `activateAction` for how to control the behavior of the target.
-   */
-  activateTarget?: string;
-  /**
-   * Sets the action the `activateTarget` should take when this pressable is activated.
-   *
-   * See the documentation of particular components for the actions they support.
-   *
-   * @default 'auto' - a default action for the target component.
-   */
-  activateAction?: 'auto' | 'show' | 'hide' | 'toggle' | 'copy';
-}
-export interface BasePressableProps
-  extends ButtonBehaviorProps,
-    LinkBehaviorProps {}
-export interface ButtonProps extends GlobalProps, BasePressableProps {
-  /**
-   * A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.
-   *
-   * Use this when using only an icon or the button text is not enough context
-   * for users using assistive technologies.
-   */
-  accessibilityLabel?: string;
-  /**
-   * The content of the Button.
-   */
-  children?: ComponentChildren;
-  /**
-   * The type of icon to be displayed in the button.
-   */
-  icon?: IconType;
-  /**
-   * Changes the visual appearance of the Button.
-   *
-   * @default 'auto' - the variant is automatically determined by the Button's context
-   */
-  variant?: 'auto' | 'primary' | 'secondary' | 'tertiary';
-  /**
-   * Sets the tone of the Button, based on the intention of the information being conveyed.
-   *
-   * @default 'auto'
-   */
-  tone?: ToneKeyword;
-  /**
-   * Indicate the text language. Useful when the text is in a different language than the rest of the page.
-   * It will allow assistive technologies such as screen readers to invoke the correct pronunciation.
-   * [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)
-   */
-  lang?: string;
-}
-export interface BaseInputProps {
-  /**
-   * An identifier for the field that is unique within the nearest
-   * containing `Form` component.
-   */
-  name?: string;
-  /**
-   * Disables the field, disallowing any interaction.
-   */
-  disabled?: boolean;
-}
-export interface InputProps extends BaseInputProps {
-  /**
-   * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
-   */
-  onChange?: (newValue: string) => void;
-  /**
-   * Callback when the user makes any changes in the field.
-   */
-  onInput?: (newValue: string) => void;
-  /**
-   * The current value for the field. If omitted, the field will be empty.
-   */
-  value?: string;
-  /**
-   * The default value for the field.
-   */
-  defaultValue?: string;
-}
-export interface FieldErrorProps {
-  /**
-   * Indicate an error to the user. The field will be given a specific stylistic treatment
-   * to communicate problems that have to be resolved immediately.
-   */
-  error?: string;
-}
-export interface BasicFieldProps extends FieldErrorProps {
-  /**
-   * Whether the field needs a value. This requirement adds semantic value
-   * to the field, but it will not cause an error to appear automatically.
-   * If you want to present an error when this field is empty, you can do
-   * so with the `error` prop.
-   */
-  required?: boolean;
-  /**
-   * Content to use as the field label.
-   */
-  label?: string;
-}
-export interface FieldDetailsProps {
-  /**
-   * Additional text to provide context or guidance for the field.
-   * This text is displayed along with the field and its label
-   * to offer more information or instructions to the user.
-   *
-   * This will also be exposed to screen reader users.
-   */
-  details?: string;
-}
-export interface FieldProps
-  extends BasicFieldProps,
-    InputProps,
-    FocusEventProps,
-    FieldDetailsProps {
-  /**
-   * A short hint that describes the expected value of the field.
-   */
-  placeholder?: string;
-}
-export interface BaseTextFieldProps extends FieldProps {
-  /**
-   * The field cannot be edited by the user. It is focusable will be announced by screen readers.
-   */
-  readOnly?: boolean;
-}
-export interface FieldDecorationProps {
-  /**
-   * A value to be displayed immediately after the editable portion of the field.
-   *
-   * This is useful for displaying an implied part of the value, such as "@shopify.com", or "%".
-   *
-   * This cannot be edited by the user, and it isn't included in the value of the field.
-   *
-   * It may not be displayed until the user has interacted with the input.
-   * For example, an inline label may take the place of the suffix until the user focuses the input.
-   *
-   * @default ''
-   */
-  suffix?: string;
-  /**
-   * A value to be displayed immediately before the editable portion of the field.
-   *
-   * This is useful for displaying an implied part of the value, such as "https://" or "+353".
-   *
-   * This cannot be edited by the user, and it isn't included in the value of the field.
-   *
-   * It may not be displayed until the user has interacted with the input.
-   * For example, an inline label may take the place of the prefix until the user focuses the input.
-   *
-   * @default ''
-   */
-  prefix?: string;
-  /**
-   * The type of icon to be displayed in the field.
-   */
-  icon?: IconType;
-  /**
-   * Additional content to be displayed in the field.
-   * Commonly used to display an icon that activates a tooltip providing more information.
-   */
-  accessory?: ComponentChildren;
-}
-export interface MinMaxLengthProps {
-  /**
-   * Specifies the maximum number of characters allowed.
-   */
-  maxLength?: number;
-  /**
-   * Specifies the min number of characters allowed.
-   */
-  minLength?: number;
-}
-export interface BaseSelectableProps {
-  /**
-   * A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced.
-   * This can also be used to display a control without a visual label, while still providing context to users using screen readers.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Disables the control, disallowing any interaction.
-   */
-  disabled?: boolean;
-  /**
-   * The value used in form data when the control is checked.
-   */
-  value?: string;
-}
-export interface BaseOptionProps extends BaseSelectableProps {
-  /**
-   * Whether the control is active.
-   */
-  selected?: boolean;
-  /**
-   * Whether the control is active by default.
-   */
-  defaultSelected?: boolean;
-  /**
-   * The content to use as the label.
-   */
-  children?: ComponentChildren;
-}
-export interface BaseCheckableProps extends BaseSelectableProps {
-  /**
-   * Visual content to use as the control label.
-   */
-  label?: string;
-  /**
-   * Whether the control is active.
-   */
-  checked?: boolean;
-  /**
-   * Whether the control is active by default.
-   */
-  defaultChecked?: boolean;
-  /**
-   * An identifier for the control that is unique within the nearest
-   * containing `Form` component.
-   */
-  name?: string;
-  /**
-   * A callback that is run whenever the control is changed.
-   */
-  onChange?: (checked: boolean) => void;
-  /**
-   * A callback that is run whenever the control is changed.
-   */
-  onInput?: (checked: boolean) => void;
-}
-export interface CheckboxProps extends GlobalProps, BaseCheckableProps {
-  /**
-   * Indicate an error to the user. The field will be given a specific stylistic treatment
-   * to communicate problems that have to be resolved immediately.
-   */
-  error?: string;
-  /**
-   * Additional text to provide context or guidance for the input.
-   * This text is displayed along with the input and its label
-   * to offer more information or instructions to the user.
-   */
-  details?: string;
-  /**
-   * Whether to display the checkbox in an indeterminate state (neither checked or unchecked).
-   *
-   * In terms of appearance, this takes priority over the `checked` prop.
-   * But this is purely a visual change.
-   * Whether the value is submitted along with a form is still down to the `checked` prop.
-   */
-  indeterminate?: boolean;
-  /**
-   * Whether the field needs a value. This requirement adds semantic value
-   * to the field, but it will not cause an error to appear automatically.
-   * If you want to present an error when this field is empty, you can do
-   * so with the `error` prop.
-   */
-  required?: boolean;
-}
-export interface AutocompleteProps<
-  AutocompleteField extends AnyAutocompleteField,
-> {
-  /**
-   * A hint as to the intended content of the field.
-   *
-   * When set to `true`, this property indicates that the field should support
-   * autofill, but you do not have any more semantic information on the intended
-   * contents.
-   *
-   * When set to `false`, you are indicating that this field contains sensitive
-   * information, or contents that are never saved, like one-time codes.
-   *
-   * Alternatively, you can provide value which describes the
-   * specific data you would like to be entered into this field during autofill.
-   *
-   * @see Learn more about the set of {@link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens|autocomplete values} supported in browsers.
-   */
-  autocomplete?:
-    | AutocompleteField
-    | `${AutocompleteSection} ${AutocompleteField}`
-    | `${AutocompleteGroup} ${AutocompleteField}`
-    | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}`
-    | boolean;
-}
-/**
- * The “section” scopes the autocomplete data that should be inserted
- * to a specific area of the page.
- *
- * Commonly used when there are multiple fields with the same autocomplete needs
- * in the same page. For example: 2 shipping address forms in the same page.
- */
-export type AutocompleteSection = `section-${string}`;
-/**
- * The contact information group the autocomplete data should be sourced from.
- */
-export type AutocompleteGroup = 'shipping' | 'billing';
-/**
- * The contact information subgroup the autocomplete data should be sourced from.
- */
-export type AutocompleteAddressGroup = 'fax' | 'home' | 'mobile' | 'pager';
-export type AutocompleteFieldTelephoneAlias = 'tel' | 'telephone';
-export type AutocompleteFieldBirthdayAlias = 'bday' | 'birthday';
-export type AutocompleteFieldCreditCardAlias = 'cc' | 'credit-card';
-export type AutocompleteFieldInstantMessageAlias = 'impp' | 'instant-message';
-export type AutocompleteFieldSecurityCodeAlias = 'csc' | 'security-code';
-export type AnyAutocompleteField =
-  | 'additional-name'
-  | 'address-level1'
-  | 'address-level2'
-  | 'address-level3'
-  | 'address-level4'
-  | 'address-line1'
-  | 'address-line2'
-  | 'address-line3'
-  | 'country-name'
-  | 'country'
-  | 'current-password'
-  | 'email'
-  | 'family-name'
-  | 'given-name'
-  | 'honorific-prefix'
-  | 'honorific-suffix'
-  | 'language'
-  | 'name'
-  | 'new-password'
-  | 'nickname'
-  | 'one-time-code'
-  | 'organization-title'
-  | 'organization'
-  | 'photo'
-  | 'postal-code'
-  | 'sex'
-  | 'street-address'
-  | 'transaction-amount'
-  | 'transaction-currency'
-  | 'url'
-  | 'username'
-  | `${AutocompleteFieldBirthdayAlias}-day`
-  | `${AutocompleteFieldBirthdayAlias}-month`
-  | `${AutocompleteFieldBirthdayAlias}-year`
-  | `${AutocompleteFieldBirthdayAlias}`
-  | `${AutocompleteFieldCreditCardAlias}-additional-name`
-  | `${AutocompleteFieldCreditCardAlias}-expiry-month`
-  | `${AutocompleteFieldCreditCardAlias}-expiry-year`
-  | `${AutocompleteFieldCreditCardAlias}-expiry`
-  | `${AutocompleteFieldCreditCardAlias}-family-name`
-  | `${AutocompleteFieldCreditCardAlias}-given-name`
-  | `${AutocompleteFieldCreditCardAlias}-name`
-  | `${AutocompleteFieldCreditCardAlias}-number`
-  | `${AutocompleteFieldCreditCardAlias}-${AutocompleteFieldSecurityCodeAlias}`
-  | `${AutocompleteFieldCreditCardAlias}-type`
-  | `${AutocompleteAddressGroup} email`
-  | `${AutocompleteFieldInstantMessageAlias}`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldInstantMessageAlias}`
-  | `${AutocompleteFieldTelephoneAlias}`
-  | `${AutocompleteFieldTelephoneAlias}-area-code`
-  | `${AutocompleteFieldTelephoneAlias}-country-code`
-  | `${AutocompleteFieldTelephoneAlias}-extension`
-  | `${AutocompleteFieldTelephoneAlias}-local-prefix`
-  | `${AutocompleteFieldTelephoneAlias}-local-suffix`
-  | `${AutocompleteFieldTelephoneAlias}-local`
-  | `${AutocompleteFieldTelephoneAlias}-national`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-area-code`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-country-code`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-extension`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-prefix`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-suffix`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local`
-  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-national`;
-export type TextAutocompleteField = ExtractStrict<
-  AnyAutocompleteField,
-  | 'additional-name'
-  | 'address-level1'
-  | 'address-level2'
-  | 'address-level3'
-  | 'address-level4'
-  | 'address-line1'
-  | 'address-line2'
-  | 'address-line3'
-  | 'country-name'
-  | 'country'
-  | 'family-name'
-  | 'given-name'
-  | 'honorific-prefix'
-  | 'honorific-suffix'
-  | 'language'
-  | 'name'
-  | 'nickname'
-  | 'one-time-code'
-  | 'organization-title'
-  | 'organization'
-  | 'postal-code'
-  | 'sex'
-  | 'street-address'
-  | 'transaction-currency'
-  | 'username'
-  | `${AutocompleteFieldCreditCardAlias}-name`
-  | `${AutocompleteFieldCreditCardAlias}-given-name`
-  | `${AutocompleteFieldCreditCardAlias}-additional-name`
-  | `${AutocompleteFieldCreditCardAlias}-family-name`
-  | `${AutocompleteFieldCreditCardAlias}-type`
->;
-export interface DividerProps extends GlobalProps {
-  /**
-   * Specify the direction of the divider.
-   *
-   * An 'inline' divider separates blocks of content.
-   * In a left-to-right or right-to-left writing mode, this would typically be a horizontal line.
-   *
-   * A 'block' divider separates items within the current line of content.
-   * In a left-to-right or right-to-left writing mode, this would typically be a vertical line.
-   *
-   * @default 'inline'
-   */
-  direction?: 'inline' | 'block';
-  /**
-   * Modify the color to be more or less intense.
-   *
-   * @default 'base'
-   */
-  color?: ColorKeyword;
-}
-export type SpacingKeyword = SizeKeyword | 'none';
-export interface GapProps {
-  /**
-   * Adjust spacing between elements.
-   *
-   * A single value applies to both axes.
-   * A pair of values (eg `large-100 large-500`) can be used to set the inline and block axes respectively.
-   *
-   * @default 'auto'
-   */
-  gap?: MaybeTwoValuesShorthandProperty<SpacingKeyword>;
-  /**
-   * Adjust spacing between elements in the block axis.
-   *
-   * This overrides the row value of `gap`.
-   *
-   * @default '' - meaning no override
-   */
-  rowGap?: SpacingKeyword | '';
-  /**
-   * Adjust spacing between elements in the inline axis.
-   *
-   * This overrides the column value of `gap`.
-   *
-   * @default '' - meaning no override
-   */
-  columnGap?: SpacingKeyword | '';
-}
-export type BaselinePosition = 'baseline' | 'first baseline' | 'last baseline';
-export type ContentDistribution =
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
-  | 'stretch';
-export type ContentPosition = 'center' | 'start' | 'end';
-export type OverflowPosition =
-  | `unsafe ${ContentPosition}`
-  | `safe ${ContentPosition}`;
-/**
- * Align items sets the align-self value on all direct children as a group.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
- */
-export type AlignItemsKeyword =
-  | 'normal'
-  | 'stretch'
-  | BaselinePosition
-  | OverflowPosition
-  | ContentPosition;
-/**
- * Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
- */
-export type JustifyContentKeyword =
-  | 'normal'
-  | ContentDistribution
-  | OverflowPosition
-  | ContentPosition;
-/**
- *Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
- */
-export type AlignContentKeyword =
-  | 'normal'
-  | BaselinePosition
-  | ContentDistribution
-  | OverflowPosition
-  | ContentPosition;
-export interface HeadingProps
-  extends GlobalProps,
-    AccessibilityVisibilityProps {
-  /** A unique identifier for the field. */
-  id?: string;
-  /**
-   * The content of the Heading.
-   */
-  children?: ComponentChildren;
-  /**
-   * Sets the semantic meaning of the component’s content. When set,
-   * the role will be used by assistive technologies to help users
-   * navigate the page.
-   *
-   * @default 'heading'
-   *
-   * - `heading` defines the element as a heading to a page or section.
-   * - `presentation` means the heading level will be stripped,
-   * and will prevent the element’s implicit ARIA semantics from
-   * being exposed to the accessibility tree.
-   * - `none` is a synonym for the `presentation` role.
-   */
-  accessibilityRole?:
-    | 'heading'
-    | ExtractStrict<AccessibilityRole, 'presentation' | 'none'>;
-  /**
-   * Truncates the text content to the specified number of lines.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
-   *
-   * @default 'none'
-   */
-  lineClamp?: number | 'none';
-}
-export interface IconProps extends GlobalProps {
-  /**
-   * Sets the tone of the Icon, based on the intention of the information being conveyed.
-   *
-   * @default 'auto'
-   */
-  tone?: ToneKeyword;
-  /**
-   * Modify the color to be more or less intense.
-   *
-   * @default 'base'
-   */
-  color?: ColorKeyword;
-  /**
-   * Adjusts the size of the icon.
-   *
-   * @default 'base'
-   */
-  size?: SizeKeyword | 'fill';
-  type?: IconType | AnyString;
-}
-export interface BaseImageProps {
-  /**
-   * An alternative text description that describe the image for the reader to
-   * understand what it is about. It is extremely useful for both users using
-   * assistive technology and sighted users. A well written `description`
-   * provides people with visual impairments the ability to participate in
-   * consuming non-text content. When a screen readers encounters an `Image`,
-   * the description is read and announced aloud. If an image fails to load,
-   * potentially due to a poor connection, the `description` is displayed on
-   * screen instead. This has the benefit of letting a sighted buyer know an
-   * image was meant to load here, but as an alternative, they’re still able to
-   * consume the text content. Read
-   * [considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204)
-   * to learn more.
-   *
-   * @default `''`
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt
-   */
-  alt?: string;
-  /**
-   * A set of media conditions and their corresponding sizes.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes
-   */
-  sizes?: string;
-  /**
-   * The image source (either a remote URL or a local file resource).
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src
-   */
-  src?: string;
-  /**
-   * A set of image sources and their width or pixel density descriptors.
-   *
-   * This overrides the `src` property.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset
-   */
-  srcSet?: string;
-}
-export type optionalSpace = '' | ' ';
-export interface ImageProps extends GlobalProps, BaseImageProps {
-  /**
-   * Sets the semantic meaning of the component’s content. When set,
-   * the role will be used by assistive technologies to help users
-   * navigate the page.
-   *
-   * @default 'img'. Note that the 'img' role doesn't need to be applied if
-   * the host applies it for you; for example, an HTML host rendering
-   * an <img> element should NOT apply the `img` role.
-   */
-  accessibilityRole?:
-    | 'img'
-    | ExtractStrict<AccessibilityRole, 'presentation' | 'none'>;
-  /**
-   *
-   * The displayed inline width of the image.
-   *
-   * `fill`: the image will takes up 100% of the available inline-size.
-   * `auto`: the image will be displayed at its natural size.
-   *
-   * @default 'fill'
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width
-   */
-  inlineSize?: 'fill' | 'auto';
-  /**
-   *
-   * The aspect ratio of the image.
-   * This will be respected even if the image hasn’t loaded yet.
-   *
-   * @default ''
-   */
-  aspectRatio?: `${number}${optionalSpace}/${optionalSpace}${number}` | number;
-  /**
-   * Determines the loading behavior of the image:
-   * - `eager`: Immediately loads the image, irrespective of its position within the visible viewport.
-   * - `lazy`: Delays loading the image until it approaches a specified distance from the viewport.
-   *
-   * @default `eager`
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
-   */
-  loading?: 'eager' | 'lazy';
-  /**
-   * Invoked when load completes successfully.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
-   */
-  onLoad?: () => void;
-  /**
-   * Invoked on load error.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
-   */
-  onError?: () => void;
-}
-export interface LinkProps extends GlobalProps, LinkBehaviorProps {
-  /**
-   * The content of the Link.
-   */
-  children?: ComponentChildren;
-  /**
-   * Sets the tone of the Link, based on the intention of the information being conveyed.
-   *
-   * @default 'auto'
-   */
-  tone?: ToneKeyword;
-  /**
-   * A label that describes the purpose or contents of the Link. It will be read to users using assistive technologies such as screen readers.
-   *
-   * Use this when using only an icon or the content of the link is not enough context
-   * for users using assistive technologies.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Indicate the text language. Useful when the text is in a different language than the rest of the page.
-   * It will allow assistive technologies such as screen readers to invoke the correct pronunciation.
-   * [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)
-   */
-  lang?: string;
-}
-export interface BaseTypographyProps {
-  /**
-   * Sets the color of the Typography component, based on the intention of the information being conveyed.
-   *
-   * @default 'base'
-   */
-  color?: ColorKeyword;
-  /**
-   * Sets the tone of the Typography component, based on the intention of the information being conveyed.
-   *
-   * @default 'auto'
-   */
-  tone?: ToneKeyword;
-  /**
-   * Set the numeric properties of the font
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
-   *
-   * @default 'auto' - inherit from the parent element
-   */
-  fontVariantNumeric?: 'auto' | 'normal' | 'tabular-nums';
-}
-export interface ParagraphProps
-  extends GlobalProps,
-    BaseTypographyProps,
-    AccessibilityVisibilityProps {
-  /**
-   * Truncates the text content to the specified number of lines.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
-   *
-   * @default 'none' - no truncation is applied
-   */
-  lineClamp?: number | 'none';
-}
-export interface SectionProps extends GlobalProps {
-  /**
-   * The content of the Section.
-   */
-  children?: ComponentChildren;
-  /**
-   * A label used to describe the section that will be announced by assistive technologies.
-   *
-   * When no `heading` property is provided or included as a children of the Section, you **must** provide an
-   * `accessibilityLabel` to describe the Section. This is important as it allows assistive technologies to provide
-   * the right context to users.
-   */
-  accessibilityLabel?: string;
-  /**
-   * A title that describes the content of the section.
-   */
-  heading?: string;
-  /**
-   * Adjust the padding of all edges.
-   *
-   * `auto`: applies padding that is appropriate for the element. Note that it may result in no padding if Shopify
-   * believes this is the right design decision in a particular context.
-   *
-   * `none`: removes all padding from the element. This can be useful when elements inside the Section need to span
-   * to the edge of the Section. For example, a full-width image. In this case, rely on `Box` with a padding of 'base'
-   * to bring back the desired padding for the rest of the content.
-   *
-   * @default: "auto"
-   */
-  padding?: 'auto' | 'none';
-}
-export interface SelectProps
-  extends GlobalProps,
-    FieldProps,
-    AutocompleteProps<AnyAutocompleteField>,
-    FocusEventProps {
-  /**
-   * The options a user can select from.
-   *
-   * Accepts `Option` and `OptionGroup` components.
-   */
-  children?: ComponentChildren;
-}
-export interface OptionProps extends GlobalProps, BaseOptionProps {}
-export interface OptionGroupProps extends GlobalProps {
-  /**
-   * Whether the options within this group can be selected or not.
-   */
-  disabled?: boolean;
-  /**
-   * The user-facing label for this group of options.
-   */
-  label?: string;
-  /**
-   * The options a user can select from.
-   *
-   * Accepts `Option` components.
-   */
-  children?: ComponentChildren;
-}
-export interface SpinnerProps extends GlobalProps {
-  /**
-   * Adjusts the size of the spinner icon.
-   *
-   * @default 'base'
-   */
-  size?:
-    | SizeKeyword
-    /**
-     * `fill` will cause the spinner icon to take up 100% of the available inline space, and maintain a 1:1 aspect ratio.
-     */
-    | 'fill';
-  /**
-   * A label that describes the purpose of the progress. When set,
-   * it will be announced to users using assistive technologies and will
-   * provide them with more context.
-   *
-   * Use it to provide context of what is loading.
-   *
-   * @default 'Loading...'
-   */
-  accessibilityLabel?: string;
-}
-export interface StackProps extends BaseBoxPropsWithRole, GapProps {
-  /**
-   * The content of the Stack.
-   */
-  children?: ComponentChildren;
-  /**
-   * Sets how the Stack's children are placed within the Stack.
-   *
-   * @default 'inline'
-   */
-  direction?: 'inline' | 'block';
-  /**
-   * Aligns the Stack along the main axis.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
-   * @default 'normal'
-   */
-  justifyContent: JustifyContentKeyword;
-  /**
-   * Aligns the Stack's children along the cross axis.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
-   * @default 'normal'
-   */
-  alignItems: AlignItemsKeyword;
-  /**
-   * Aligns the Stack along the cross axis.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
-   * @default 'normal'
-   */
-  alignContent: AlignContentKeyword;
-}
-export interface TextProps
-  extends GlobalProps,
-    AccessibilityVisibilityProps,
-    BaseTypographyProps,
-    DisplayProps {
-  /**
-   * The content of the Text.
-   */
-  children?: ComponentChildren;
-  /**
-   * Use to emphasize a word or a group of words.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
-   * Provide semantic meaning and default styling to the text.
-   *
-   * Other presentation properties on `<Text>` override the default styling.
-   *
-   * @default 'generic'
-   */
-  type?: TextType;
-}
-export type TextType =
-  /**
-   * Indicate the text is contact information. Typically used for addresses.
-   *
-   * This must have `inline` layout (despite the default being `block` in HTML hosts).
-   *
-   * Surfaces may apply styling to this type.
-   *
-   * In an HTML host, the text will be rendered in an `<address>` element.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address
-   */
-  | 'address'
-  /**
-   * Indicate the text is no longer accurate or no longer relevant. One such use-case is discounted prices.
-   *
-   * Surfaces should apply styling to this type to suggest its content no longer applies.
-   *
-   * In an HTML host, the text will be rendered in a `<s>` element.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
-   */
-  | 'redundant'
-  /**
-   * Indicate the text is marked or highlighted and relevant to the user’s current action.
-   * One such use-case is to indicate the characters that matched a search query.
-   *
-   * Surfaces should apply styling to this type to draw attention to the content.
-   *
-   * In an HTML host, the text will be rendered in a `<mark>` element.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
-   */
-  | 'mark'
-  /**
-   * Indicate emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.
-   *
-   * Surfaces should apply styling to this type to distinguish it from surrounding text. Italicization is a common choice, but not required.
-   *
-   * In an HTML host, the text will be rendered in an `<em>` element.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
-   */
-  | 'emphasis'
-  /**
-   * Indicate an offset from the normal prose of the text. Typically used to indicate
-   * a foreign word, fictional character thoughts, or when the text refers to the definition of a word
-   * instead of representing its semantic meaning.
-   *
-   * Surfaces should italicize this content by default.
-   *
-   * In an HTML host, the text will be rendered in a `<i>` tag.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
-   */
-  | 'offset'
-  /**
-   * Indicate strong importance, seriousness, or urgency.
-   *
-   * Surfaces should render this content bold by default.
-   *
-   * In an HTML host, the text will be rendered in a `<strong>` tag.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
-   */
-  | 'strong'
-  /**
-   * No additional semantics or styling is applied.
-   *
-   * Surfaces must not apply any default styling to this type.
-   *
-   * In an HTML host, the text will be rendered in a `<span>` tag.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
-   */
-  | 'generic';
-export interface TextFieldProps
-  extends GlobalProps,
-    BaseTextFieldProps,
-    MinMaxLengthProps,
-    AutocompleteProps<TextAutocompleteField>,
-    FieldDecorationProps {}
-type IconType$1 =
-  | 'wrench'
-  | 'watch'
-  | 'wifi'
-  | 'wallet'
-  | 'viewport-short'
-  | 'viewport-wide'
-  | 'work'
-  | 'viewport-narrow'
-  | 'upload'
-  | 'unknown-device'
-  | 'viewport-tall'
-  | 'undo'
-  | 'transaction'
-  | 'transfer-in'
-  | 'transaction-fee-yen'
-  | 'transfer-internal'
-  | 'transaction-fee-rupee'
-  | 'transfer-out'
-  | 'transaction-fee-pound'
-  | 'transfer'
-  | 'transaction-fee-euro'
-  | 'toggle-on'
-  | 'wand'
-  | 'toggle-off'
-  | 'theme'
-  | 'thumbs-down'
-  | 'theme-template'
-  | 'theme-edit'
-  | 'thumbs-up'
-  | 'tip-jar'
-  | 'theme-store'
-  | 'text-with-image'
-  | 'text-quote'
-  | 'text'
-  | 'text-underline'
-  | 'text-italic'
-  | 'text-in-columns'
-  | 'transaction-fee-dollar'
-  | 'text-title'
-  | 'text-font'
-  | 'text-grammar'
-  | 'text-in-rows'
-  | 'text-color'
-  | 'text-font-list'
-  | 'text-block'
-  | 'text-align-right'
-  | 'text-bold'
-  | 'text-align-left'
-  | 'team'
-  | 'tax'
-  | 'text-align-center'
-  | 'tablet'
-  | 'store-managed'
-  | 'store'
-  | 'target'
-  | 'store-online'
-  | 'stop-circle'
-  | 'status'
-  | 'status-active'
-  | 'sun'
-  | 'star-filled'
-  | 'sound'
-  | 'sort-descending'
-  | 'social-post'
-  | 'sort-ascending'
-  | 'social-ad'
-  | 'smiley-sad'
-  | 'smiley-neutral'
-  | 'smiley-happy'
-  | 'smiley-joy'
-  | 'shopcodes'
-  | 'slideshow'
-  | 'shipping-label'
-  | 'shield-pending'
-  | 'shield-person'
-  | 'shield-none'
-  | 'share'
-  | 'send'
-  | 'settings'
-  | 'shield-check-mark'
-  | 'search'
-  | 'search-recent'
-  | 'search-list'
-  | 'search-resource'
-  | 'save'
-  | 'rotate-left'
-  | 'reward'
-  | 'return'
-  | 'replay'
-  | 'text-indent'
-  | 'reset'
-  | 'sandbox'
-  | 'replace'
-  | 'remove-background'
-  | 'referral-code'
-  | 'redo'
-  | 'receipt'
-  | 'receipt-yen'
-  | 'refresh'
-  | 'receipt-rupee'
-  | 'receipt-refund'
-  | 'rotate-right'
-  | 'receipt-pound'
-  | 'receipt-paid'
-  | 'receipt-euro'
-  | 'receipt-dollar'
-  | 'question-circle'
-  | 'profile'
-  | 'product-return'
-  | 'product-unavailable'
-  | 'product-remove'
-  | 'product-reference'
-  | 'product-list'
-  | 'product-cost'
-  | 'product-add'
-  | 'price-list'
-  | 'point-of-sale'
-  | 'print'
-  | 'play-circle'
-  | 'play'
-  | 'plan'
-  | 'pin'
-  | 'phone-out'
-  | 'phone-in'
-  | 'personalized-text'
-  | 'person-lock'
-  | 'person-segment'
-  | 'store-import'
-  | 'payout-yen'
-  | 'payout'
-  | 'payout-rupee'
-  | 'person-add'
-  | 'person-remove'
-  | 'payout-pound'
-  | 'person-exit'
-  | 'payout-dollar'
-  | 'passkey'
-  | 'payout-euro'
-  | 'paint-brush-round'
-  | 'payment-capture'
-  | 'paper-check'
-  | 'paint-brush-flat'
-  | 'page-up'
-  | 'pagination-end'
-  | 'page-remove'
-  | 'pagination-start'
-  | 'page-reference'
-  | 'page-heart'
-  | 'page-clock'
-  | 'page-attachment'
-  | 'page-add'
-  | 'page-down'
-  | 'package'
-  | 'package-on-hold'
-  | 'outgoing'
-  | 'package-returned'
-  | 'organization'
-  | 'orders-status'
-  | 'outdent'
-  | 'order-first'
-  | 'order-repeat'
-  | 'order-draft'
-  | 'notification'
-  | 'nature'
-  | 'money'
-  | 'money-none'
-  | 'note'
-  | 'package-fulfilled'
-  | 'moon'
-  | 'metaobject'
-  | 'note-add'
-  | 'minimize'
-  | 'metaobject-list'
-  | 'metaobject-reference'
-  | 'menu'
-  | 'menu-horizontal'
-  | 'mention'
-  | 'megaphone'
-  | 'media-receiver'
-  | 'menu-vertical'
-  | 'measurement-weight'
-  | 'maximize'
-  | 'measurement-size'
-  | 'markets-yen'
-  | 'markets-euro'
-  | 'measurement-volume'
-  | 'lock'
-  | 'location-none'
-  | 'live'
-  | 'markets'
-  | 'list-bulleted'
-  | 'markets-rupee'
-  | 'layout-sidebar-right'
-  | 'layout-rows-2'
-  | 'layout-popup'
-  | 'layout-logo-block'
-  | 'layout-section'
-  | 'layout-header'
-  | 'layout-columns-3'
-  | 'layout-columns-2'
-  | 'pause-circle'
-  | 'layout-buy-button'
-  | 'link'
-  | 'layout-buy-button-vertical'
-  | 'layout-column-1'
-  | 'layout-block'
-  | 'list-numbered'
-  | 'key'
-  | 'keyboard'
-  | 'language-translate'
-  | 'layout-buy-button-horizontal'
-  | 'layout-footer'
-  | 'label-printer'
-  | 'inventory-updated'
-  | 'incoming'
-  | 'incentive'
-  | 'iq'
-  | 'inventory'
-  | 'image-with-text-overlay'
-  | 'image-none'
-  | 'image-magic'
-  | 'image'
-  | 'import'
-  | 'images'
-  | 'image-explore'
-  | 'image-add'
-  | 'keyboard-hide'
-  | 'image-alt'
-  | 'identity-card'
-  | 'icons'
-  | 'sports'
-  | 'metafields'
-  | 'heart'
-  | 'hashtag'
-  | 'hashtag-decimal'
-  | 'globe-europe'
-  | 'gauge'
-  | 'layout-sidebar-left'
-  | 'food'
-  | 'forklift'
-  | 'games'
-  | 'folder-down'
-  | 'folder-up'
-  | 'folder-remove'
-  | 'forms'
-  | 'folder-add'
-  | 'folder'
-  | 'flower'
-  | 'gift-card'
-  | 'flip-vertical'
-  | 'flag'
-  | 'home'
-  | 'globe-asia'
-  | 'filter'
-  | 'file'
-  | 'export'
-  | 'eyeglasses'
-  | 'exit'
-  | 'favicon'
-  | 'eye-dropper'
-  | 'envelope-soft-pack'
-  | 'envelope'
-  | 'email-newsletter'
-  | 'enter'
-  | 'exchange'
-  | 'email-follow-up'
-  | 'eye-first'
-  | 'domain'
-  | 'duplicate'
-  | 'domain-redirect'
-  | 'drag-drop'
-  | 'domain-new'
-  | 'domain-landing-page'
-  | 'dock-side'
-  | 'dns-settings'
-  | 'drag-handle'
-  | 'discount'
-  | 'discount-code'
-  | 'dock-floating'
-  | 'database'
-  | 'database-add'
-  | 'desktop'
-  | 'data-table'
-  | 'database-connect'
-  | 'data-presentation'
-  | 'currency-convert'
-  | 'crop'
-  | 'cursor-banner'
-  | 'credit-card-tap-chip'
-  | 'cursor-option'
-  | 'credit-card'
-  | 'credit-card-secure'
-  | 'credit-card-reader-tap'
-  | 'corner-square'
-  | 'credit-card-cancel'
-  | 'credit-card-reader'
-  | 'credit-card-reader-chip'
-  | 'cursor'
-  | 'corner-round'
-  | 'connect'
-  | 'corner-pill'
-  | 'contract'
-  | 'confetti'
-  | 'color'
-  | 'content'
-  | 'credit-card-percent'
-  | 'collection-featured'
-  | 'collection-reference'
-  | 'collection-list'
-  | 'compass'
-  | 'code'
-  | 'color-none'
-  | 'clipboard'
-  | 'chevron-up-circle'
-  | 'clipboard-check'
-  | 'circle'
-  | 'clipboard-checklist'
-  | 'chevron-right-circle'
-  | 'chevron-right'
-  | 'chevron-left'
-  | 'code-add'
-  | 'checkbox'
-  | 'compose'
-  | 'chat'
-  | 'chevron-down-circle'
-  | 'chart-popular'
-  | 'chart-vertical'
-  | 'chart-stacked'
-  | 'chevron-left-circle'
-  | 'chat-referral'
-  | 'chart-histogram-second-last'
-  | 'chart-histogram-first'
-  | 'chart-histogram-last'
-  | 'chart-histogram-flat'
-  | 'chart-horizontal'
-  | 'chart-histogram-first-last'
-  | 'chart-funnel'
-  | 'chart-histogram-full'
-  | 'chart-histogram-growth'
-  | 'cash-yen'
-  | 'categories'
-  | 'chart-line'
-  | 'catalog-product'
-  | 'chart-donut'
-  | 'channels'
-  | 'cart-sale'
-  | 'cash-pound'
-  | 'chart-cohort'
-  | 'cash-euro'
-  | 'cart-down'
-  | 'cart'
-  | 'cart-up'
-  | 'cash-dollar'
-  | 'caret-up'
-  | 'cash-rupee'
-  | 'cart-discount'
-  | 'caret-down'
-  | 'camera'
-  | 'camera-flip'
-  | 'button'
-  | 'cart-abandoned'
-  | 'bullet'
-  | 'calculator'
-  | 'book'
-  | 'blog'
-  | 'button-press'
-  | 'book-open'
-  | 'bug'
-  | 'bank'
-  | 'barcode'
-  | 'backspace'
-  | 'automation'
-  | 'bill'
-  | 'arrows-out-horizontal'
-  | 'arrow-right'
-  | 'calendar-time'
-  | 'arrows-in-horizontal'
-  | 'arrow-up'
-  | 'arrow-up-circle'
-  | 'arrow-right-circle'
-  | 'arrow-left'
-  | 'arrow-down-circle'
-  | 'arrow-left-circle'
-  | 'eye-check-mark'
-  | 'app-extension'
-  | 'delete'
-  | 'alert-diamond'
-  | 'arrow-down'
-  | 'airplane'
-  | 'alert-location'
-  | 'affiliate'
-  | 'flip-horizontal'
-  | 'adjust'
-  | 'x-circle'
-  | 'x'
-  | 'star'
-  | 'sort'
-  | 'view'
-  | 'select'
-  | 'variant'
-  | 'product'
-  | 'phone'
-  | 'person'
-  | 'plus'
-  | 'plus-circle'
-  | 'payment'
-  | 'page'
-  | 'order'
-  | 'order-unfulfilled'
-  | 'mobile'
-  | 'minus'
-  | 'microphone'
-  | 'order-fulfilled'
-  | 'minus-circle'
-  | 'merge'
-  | 'lightbulb'
-  | 'location'
-  | 'in-progress'
-  | 'language'
-  | 'incomplete'
-  | 'info'
-  | 'globe'
-  | 'hide'
-  | 'external'
-  | 'enabled'
-  | 'email'
-  | 'disabled'
-  | 'clock'
-  | 'delivery'
-  | 'collection'
-  | 'edit'
-  | 'chevron-up'
-  | 'chevron-down'
-  | 'check'
-  | 'check-circle'
-  | 'calendar'
-  | 'calendar-check'
-  | 'blank'
-  | 'attachment'
-  | 'archive'
-  | 'arrow-up-right'
-  | 'alert-bubble'
-  | 'alert-triangle'
-  | 'apps'
-  | 'alert-circle';
-interface IconProps$1 {
-  type: '' | IconType$1;
-  tone: Extract<
-    IconProps['tone'],
-    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
-  >;
-  color: Extract<IconProps['color'], 'base' | 'subdued'>;
-  size: Extract<IconProps['size'], 'small' | 'base'>;
-}
-interface BadgeProps$1 {
-  accessibilityLabel: NonNullable<BadgeProps['accessibilityLabel']>;
-  color: Extract<BadgeProps['color'], 'base' | 'strong'>;
-  icon: IconProps$1['type'] | '';
-  size: Extract<BadgeProps['size'], 'base' | 'large' | 'large-100'>;
-  tone: Extract<
-    BadgeProps['tone'],
-    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
-  >;
-}
-declare const tagName = 'shopify-badge';
-export declare class Badge extends PreactCustomElement implements BadgeProps$1 {
-  accessor accessibilityLabel: BadgeProps$1['accessibilityLabel'];
-  accessor color: BadgeProps$1['color'];
-  accessor icon: BadgeProps$1['icon'];
-  accessor size: BadgeProps$1['size'];
-  accessor tone: BadgeProps$1['tone'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName]: Badge;
-  }
-}
-export type MakeResponsive<T> = T | `@media${string}`;
-export type AlignedBox = Required<BoxProps>;
-interface BoxProps$1 {
-  accessibilityRole: AlignedBox['accessibilityRole'];
-  background: Extract<
-    AlignedBox['background'],
-    'transparent' | 'base' | 'subdued' | 'strong'
-  >;
-  blockSize: AlignedBox['blockSize'];
-  minBlockSize: AlignedBox['minBlockSize'];
-  maxBlockSize: AlignedBox['maxBlockSize'];
-  inlineSize: AlignedBox['inlineSize'];
-  minInlineSize: AlignedBox['minInlineSize'];
-  maxInlineSize: AlignedBox['maxInlineSize'];
-  padding: MakeResponsive<AlignedBox['padding']>;
-  paddingBlock: MakeResponsive<AlignedBox['paddingBlock']>;
-  paddingBlockStart: MakeResponsive<AlignedBox['paddingBlockStart']>;
-  paddingBlockEnd: MakeResponsive<AlignedBox['paddingBlockEnd']>;
-  paddingInline: MakeResponsive<AlignedBox['paddingInline']>;
-  paddingInlineStart: MakeResponsive<AlignedBox['paddingInlineStart']>;
-  paddingInlineEnd: MakeResponsive<AlignedBox['paddingInlineEnd']>;
-  borderWidth: MaybeAllValuesShorthandProperty<
-    Extract<
-      AlignedBox['borderWidth'],
-      'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200'
-    >
-  >;
-  borderStyle: MaybeAllValuesShorthandProperty<
-    Extract<AlignedBox['borderStyle'], 'none' | 'solid' | 'dashed'>
-  >;
-  borderRadius: MaybeAllValuesShorthandProperty<
-    Extract<
-      AlignedBox['borderRadius'],
-      | 'none'
-      | 'small-200'
-      | 'small-100'
-      | 'small'
-      | 'base'
-      | 'large'
-      | 'large-100'
-      | 'large-200'
-    >
-  >;
-  borderColor: Extract<
-    AlignedBox['borderColor'],
-    'subdued' | 'base' | 'strong'
-  >;
-  accessibilityLabel: AlignedBox['accessibilityLabel'];
-  accessibilityVisibility: AlignedBox['accessibilityVisibility'];
-  display: AlignedBox['display'];
-}
-declare class BoxElement extends PreactCustomElement implements BoxProps$1 {
-  accessor accessibilityRole: BoxProps$1['accessibilityRole'];
-  accessor background: BoxProps$1['background'];
-  accessor blockSize: BoxProps$1['blockSize'];
-  accessor minBlockSize: BoxProps$1['minBlockSize'];
-  accessor maxBlockSize: BoxProps$1['maxBlockSize'];
-  accessor inlineSize: BoxProps$1['inlineSize'];
-  accessor minInlineSize: BoxProps$1['minInlineSize'];
-  accessor maxInlineSize: BoxProps$1['maxInlineSize'];
-  accessor padding: BoxProps$1['padding'];
-  accessor paddingBlock: BoxProps$1['paddingBlock'];
-  accessor paddingBlockStart: BoxProps$1['paddingBlockStart'];
-  accessor paddingBlockEnd: BoxProps$1['paddingBlockEnd'];
-  accessor paddingInline: BoxProps$1['paddingInline'];
-  accessor paddingInlineStart: BoxProps$1['paddingInlineStart'];
-  accessor paddingInlineEnd: BoxProps$1['paddingInlineEnd'];
-  accessor borderWidth: BoxProps$1['borderWidth'];
-  accessor borderStyle: BoxProps$1['borderStyle'];
-  accessor borderRadius: BoxProps$1['borderRadius'];
-  accessor borderColor: BoxProps$1['borderColor'];
-  accessor accessibilityLabel: BoxProps$1['accessibilityLabel'];
-  accessor accessibilityVisibility: BoxProps$1['accessibilityVisibility'];
-  accessor display: BoxProps$1['display'];
-}
-declare const tagName$1 = 'shopify-box';
-export declare class Box extends BoxElement implements BoxProps$1 {}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$1]: Box;
-  }
-}
-export type ButtonOnlyProps = Extract<
-  ButtonProps,
-  {
-    type?: unknown;
-  }
->;
-export type ButtonBaseProps = Required<
-  Pick<
-    ButtonOnlyProps,
-    | 'accessibilityLabel'
-    | 'disabled'
-    | 'activateAction'
-    | 'activateTarget'
-    | 'lang'
-    | 'loading'
-    | 'type'
-    | 'variant'
-    | 'target'
-    | 'href'
-    | 'download'
-  >
->;
-interface ButtonProps$1 extends ButtonBaseProps {
-  tone: Extract<ButtonProps['tone'], 'neutral' | 'critical' | 'auto'>;
-  icon: IconProps$1['type'];
-}
-declare const tagName$2 = 'shopify-button';
-export interface SharedProps
-  extends Required<Pick<InteractionProps, 'activateTarget'>> {
-  activateAction: Extract<
-    InteractionProps['activateAction'],
-    'show' | 'hide' | 'toggle' | 'auto'
-  >;
-}
-declare class PreactOverlayControl
-  extends PreactCustomElement
-  implements SharedProps
-{
-  accessor activateTarget: SharedProps['activateTarget'];
-  accessor activateAction: SharedProps['activateAction'];
-}
-export declare class Button
-  extends PreactOverlayControl
-  implements ButtonProps$1
-{
-  accessor disabled: ButtonProps$1['disabled'];
-  accessor icon: ButtonProps$1['icon'];
-  accessor loading: ButtonProps$1['loading'];
-  accessor variant: ButtonProps$1['variant'];
-  accessor tone: ButtonProps$1['tone'];
-  accessor lang: ButtonProps$1['lang'];
-  accessor target: ButtonProps$1['target'];
-  accessor href: ButtonProps$1['href'];
-  accessor download: ButtonProps$1['download'];
-  accessor onclick: EventListener | null;
-  accessor onblur: EventListener | null;
-  accessor onfocus: EventListener | null;
-  accessor type: ButtonProps$1['type'];
-  accessor accessibilityLabel: ButtonProps$1['accessibilityLabel'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$2]: Button;
-  }
-}
-export type InputBaseProps = Required<
-  Pick<
-    TextFieldProps,
-    | 'disabled'
-    | 'error'
-    | 'label'
-    | 'name'
-    | 'placeholder'
-    | 'readOnly'
-    | 'required'
-    | 'value'
-    | 'id'
-  >
-> & {
-  defaultValue: string;
-};
-declare const internals: unique symbol;
-declare class PreactInputElement
-  extends PreactCustomElement
-  implements
-    Pick<
-      InputBaseProps,
-      | 'defaultValue'
-      | 'disabled'
-      | 'error'
-      | 'label'
-      | 'name'
-      | 'required'
-      | 'value'
-    >
-{
-  accessor onchange: EventListener | null;
-  accessor oninput: EventListener | null;
-  accessor onfocus: EventListener | null;
-  accessor onblur: EventListener | null;
-  accessor name: InputBaseProps['name'];
-  accessor label: InputBaseProps['label'];
-  accessor error: InputBaseProps['error'];
-  accessor defaultValue: InputBaseProps['defaultValue'];
-  get value(): InputBaseProps['value'];
-  set value(value: InputBaseProps['value']);
-  accessor disabled: InputBaseProps['disabled'];
-  accessor required: InputBaseProps['required'];
-}
-interface CheckboxProps$1
-  extends Required<
-    Pick<
-      CheckboxProps,
-      | 'accessibilityLabel'
-      | 'checked'
-      | 'details'
-      | 'disabled'
-      | 'error'
-      | 'id'
-      | 'indeterminate'
-      | 'label'
-      | 'name'
-      | 'required'
-      | 'value'
-    >
-  > {}
-declare const tagName$3 = 'shopify-checkbox';
-export declare class Checkbox
-  extends PreactInputElement
-  implements CheckboxProps$1
-{
-  #private;
-  accessor indeterminate: CheckboxProps$1['indeterminate'];
-  get checked(): boolean;
-  set checked(checked: CheckboxProps$1['checked']);
-  accessor details: CheckboxProps$1['details'];
-  accessor accessibilityLabel: CheckboxProps$1['accessibilityLabel'];
-  get value(): string;
-  set value(value: string);
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$3]: Checkbox;
-  }
-}
-interface DividerProps$1 {
-  direction: Extract<DividerProps['direction'], 'inline' | 'block'>;
-  color: Extract<DividerProps['color'], 'subdued' | 'base' | 'strong'>;
-}
-declare const tagName$4 = 'shopify-divider';
-export declare class Divider
-  extends PreactCustomElement
-  implements DividerProps$1
-{
-  accessor direction: DividerProps$1['direction'];
-  accessor color: DividerProps$1['color'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$4]: Divider;
-  }
-}
-export type RequiredHeadingProps = Required<HeadingProps>;
-interface HeadingProps$1 {
-  accessibilityRole: RequiredHeadingProps['accessibilityRole'];
-  accessibilityVisibility: RequiredHeadingProps['accessibilityVisibility'];
-  lineClamp: RequiredHeadingProps['lineClamp'];
-}
-declare const tagName$5 = 'shopify-heading';
-export declare class Heading
-  extends PreactCustomElement
-  implements HeadingProps$1
-{
-  accessor accessibilityRole: HeadingProps$1['accessibilityRole'];
-  accessor lineClamp: HeadingProps$1['lineClamp'];
-  accessor accessibilityVisibility: HeadingProps$1['accessibilityVisibility'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$5]: Heading;
-  }
-}
-declare const tagName$6 = 'shopify-icon';
-export declare class Icon extends PreactCustomElement implements IconProps$1 {
-  accessor color: IconProps$1['color'];
-  accessor tone: IconProps$1['tone'];
-  accessor type: IconProps$1['type'];
-  accessor size: IconProps$1['size'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$6]: Icon;
-  }
-}
-interface ImageProps$1 {
-  accessibilityRole: Extract<
-    ImageProps['accessibilityRole'],
-    'img' | 'presentation' | 'none'
-  >;
-  alt: NonNullable<ImageProps['alt']>;
-  loading: Extract<ImageProps['loading'], 'eager' | 'lazy'>;
-  src: NonNullable<ImageProps['src']>;
-}
-declare const tagName$7 = 'shopify-image';
-declare class Image$1 extends PreactCustomElement implements ImageProps$1 {
-  accessor src: ImageProps$1['src'];
-  accessor alt: ImageProps$1['alt'];
-  accessor loading: ImageProps$1['loading'];
-  accessor accessibilityRole: ImageProps$1['accessibilityRole'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$7]: Image$1;
-  }
-}
-export type RequiredLinkProps = Required<LinkProps>;
-interface LinkProps$1 {
-  tone: Extract<RequiredLinkProps['tone'], 'auto' | 'neutral' | 'critical'>;
-  accessibilityLabel: RequiredLinkProps['accessibilityLabel'];
-  href: RequiredLinkProps['href'];
-  target: RequiredLinkProps['target'];
-}
-declare const tagName$8 = 'shopify-link';
-export declare class Link extends PreactCustomElement implements LinkProps$1 {
-  accessor tone: LinkProps$1['tone'];
-  accessor accessibilityLabel: LinkProps$1['accessibilityLabel'];
-  accessor href: LinkProps$1['href'];
-  accessor target: LinkProps$1['target'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$8]: Link;
-  }
-}
-declare const tagName$9 = 'shopify-option';
-interface SharedProps$1
-  extends Required<Pick<OptionProps, 'disabled' | 'value'>> {}
-declare class Option$1 extends PreactCustomElement implements SharedProps$1 {
-  accessor value: SharedProps$1['value'];
-  accessor disabled: SharedProps$1['disabled'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$9]: Option$1;
-  }
-}
-declare const tagName$10 = 'shopify-option-group';
-interface SharedProps$2
-  extends Required<Pick<OptionGroupProps, 'disabled' | 'label'>> {}
-export declare class OptionGroup
-  extends PreactCustomElement
-  implements SharedProps$2
-{
-  accessor disabled: SharedProps$2['disabled'];
-  accessor label: SharedProps$2['label'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$10]: OptionGroup;
-  }
-}
-interface ParagraphProps$1
-  extends Required<
-    Pick<
-      ParagraphProps,
-      'lineClamp' | 'accessibilityVisibility' | 'fontVariantNumeric' | 'tone'
-    >
-  > {
-  color: Extract<ParagraphProps['color'], 'base' | 'subdued'>;
-}
-declare const tagName$11 = 'shopify-paragraph';
-export declare class Paragraph
-  extends PreactCustomElement
-  implements ParagraphProps$1
-{
-  accessor fontVariantNumeric: ParagraphProps$1['fontVariantNumeric'];
-  accessor lineClamp: ParagraphProps$1['lineClamp'];
-  accessor tone: ParagraphProps$1['tone'];
-  accessor color: ParagraphProps$1['color'];
-  accessor accessibilityVisibility: ParagraphProps$1['accessibilityVisibility'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$11]: Paragraph;
-  }
-}
-export type RequiredSectionProps = Required<SectionProps>;
-interface SectionProps$1 {
-  accessibilityLabel: RequiredSectionProps['accessibilityLabel'];
-  heading: RequiredSectionProps['heading'];
-  padding: RequiredSectionProps['padding'];
-}
-declare const tagName$12 = 'shopify-section';
-export declare class Section
-  extends PreactCustomElement
-  implements SectionProps$1
-{
-  #private;
-  connectedCallback(): void;
-  accessor accessibilityLabel: SectionProps$1['accessibilityLabel'];
-  accessor heading: SectionProps$1['heading'];
-  accessor padding: SectionProps$1['padding'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$12]: Section;
-  }
-}
-declare const tagName$13 = 'shopify-select';
-declare class PreactInputFieldElement
-  extends PreactInputElement
-  implements InputBaseProps
-{
-  accessor placeholder: InputBaseProps['placeholder'];
-  accessor readOnly: InputBaseProps['readOnly'];
-}
-interface SharedProps$3
-  extends Pick<
-    SelectProps,
-    | 'disabled'
-    | 'error'
-    | 'label'
-    | 'name'
-    | 'placeholder'
-    | 'required'
-    | 'value'
-  > {}
-export declare class Select
-  extends PreactInputFieldElement
-  implements SharedProps$3
-{
-  #private;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$13]: Select;
-  }
-}
-interface SpinnerProps$1
-  extends Required<Pick<SpinnerProps, 'accessibilityLabel'>> {
-  /**
-   * The size of the component.
-   *
-   * @default 'base'
-   */
-  size: Extract<SpinnerProps['size'], 'large' | 'large-100' | 'base'>;
-}
-declare const tagName$14 = 'shopify-spinner';
-export declare class Spinner
-  extends PreactCustomElement
-  implements SpinnerProps$1
-{
-  accessor accessibilityLabel: string;
-  accessor size: SpinnerProps$1['size'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$14]: Spinner;
-  }
-}
-export type AlignedStackProps = Required<StackProps>;
-interface StackProps$1 extends BoxProps$1 {
-  justifyContent: AlignedStackProps['justifyContent'];
-  alignItems: AlignedStackProps['alignItems'];
-  alignContent: AlignedStackProps['alignContent'];
-  gap: MakeResponsive<AlignedStackProps['gap']>;
-  rowGap: MakeResponsive<AlignedStackProps['rowGap']>;
-  columnGap: MakeResponsive<AlignedStackProps['columnGap']>;
-  direction: MakeResponsive<AlignedStackProps['direction']>;
-}
-declare const tagName$15 = 'shopify-stack';
-export declare class Stack extends BoxElement implements StackProps$1 {
-  accessor direction: StackProps$1['direction'];
-  accessor justifyContent: StackProps$1['justifyContent'];
-  accessor alignItems: StackProps$1['alignItems'];
-  accessor alignContent: StackProps$1['alignContent'];
-  accessor gap: StackProps$1['gap'];
-  accessor rowGap: StackProps$1['rowGap'];
-  accessor columnGap: StackProps$1['columnGap'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$15]: Stack;
-  }
-}
-interface TextProps$1
-  extends Required<Pick<TextProps, 'display' | 'accessibilityVisibility'>> {
-  color: Extract<TextProps['color'], 'base' | 'subdued'>;
-  type: Extract<
-    TextProps['type'],
-    'address' | 'redundant' | 'strong' | 'generic' | 'emphasis'
-  >;
-  tone: Extract<
-    TextProps['tone'],
-    'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'caution'
-  >;
-  fontVariantNumeric: Extract<
-    TextProps['fontVariantNumeric'],
-    'auto' | 'normal' | 'tabular-nums'
-  >;
-}
-declare const tagName$16 = 'shopify-text';
-declare class Text$1 extends PreactCustomElement implements TextProps$1 {
-  accessor display: TextProps$1['display'];
-  accessor fontVariantNumeric: TextProps$1['fontVariantNumeric'];
-  accessor color: TextProps$1['color'];
-  accessor tone: TextProps$1['tone'];
-  accessor type: TextProps$1['type'];
-  accessor accessibilityVisibility: TextProps$1['accessibilityVisibility'];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName$16]: Text$1;
-  }
-}
-
-export {Image$1 as Image, Option$1 as Option, Text$1 as Text};
-
-export {};

From ca8cc526f53f5ec6d296c9e481e6a310663045f5 Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Tue, 26 Nov 2024 17:48:40 -0500
Subject: [PATCH 12/12] Remove unnecessary dependencies

---
 packages/ui-extensions/package.json | 1 -
 yarn.lock                           | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/packages/ui-extensions/package.json b/packages/ui-extensions/package.json
index e3d8c30614..cd36a92539 100644
--- a/packages/ui-extensions/package.json
+++ b/packages/ui-extensions/package.json
@@ -52,7 +52,6 @@
   },
   "devDependencies": {
     "@shopify/generate-docs": "0.16.4",
-    "@shopify/admin-ui-icons": "^0.12.0",
     "@shopify/ui-api-design": "^0.18.0",
     "typescript": "^5.6.3",
     "vite-plugin-dts": "^4.3.0",
diff --git a/yarn.lock b/yarn.lock
index 81d04e0bf7..5f90ecbc0a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2172,11 +2172,6 @@
     argparse "~1.0.9"
     string-argv "~0.3.1"
 
-"@shopify/admin-ui-icons@^0.12.0":
-  version "0.12.0"
-  resolved "https://npm.shopify.io/node/@shopify/admin-ui-icons/-/0.12.0/admin-ui-icons-0.12.0.tgz#5d61899904b3a68056b048df419f9355056d832c"
-  integrity sha512-78s4H1BICz0W53U0ChH1l7woiXUUYbnPrJbasCJUsw7FoUvct9e9/kdUVC1q+qIf42bfYzccSRX+Oz581leBzw==
-
 "@shopify/babel-preset@^24.1.0", "@shopify/babel-preset@^24.1.4":
   version "24.1.5"
   resolved "https://registry.npmjs.org/@shopify/babel-preset/-/babel-preset-24.1.5.tgz"