From b82774f5250ad69ad12ef39eee9d2c96b120bff0 Mon Sep 17 00:00:00 2001
From: Trish Ta <trish.ta@shopify.com>
Date: Fri, 29 Nov 2024 17:17:18 -0500
Subject: [PATCH] Add remote-dom components for Admin

---
 .changeset/wet-laws-explain.md                |    6 +
 .../ui-extensions-react/src/surfaces/admin.ts |    1 -
 .../src/surfaces/admin/components.ts          |   85 -
 .../components/AdminAction/AdminAction.ts     |    5 -
 .../admin/components/AdminBlock/AdminBlock.ts |    5 -
 .../AdminPrintAction/AdminPrintAction.ts      |    5 -
 .../surfaces/admin/components/Badge/Badge.ts  |    5 -
 .../Badge/examples/basic-badge.example.tsx    |   15 +-
 .../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        |   13 +-
 .../admin/components/Button/Button.ts         |    5 -
 .../Button/examples/basic-button.example.tsx  |   12 +-
 .../admin/components/Checkbox/Checkbox.ts     |    5 -
 .../examples/basic-checkbox.example.tsx       |    7 +-
 .../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 -
 .../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        |   16 +-
 .../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 -
 .../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      |    9 +-
 .../surfaces/admin/components/Image/Image.ts  |    5 -
 .../Image/examples/basic-image.example.tsx    |   17 +-
 .../components/InlineStack/InlineStack.ts     |    5 -
 .../InternalCustomerSegmentTemplate.ts        |    7 -
 .../InternalLocationList.ts                   |    7 -
 .../surfaces/admin/components/Link/Link.ts    |    5 -
 .../Link/examples/app-link.example.tsx        |   14 +-
 .../Link/examples/external-link.example.tsx   |   10 +-
 .../Link/examples/relative-link.example.tsx   |   10 +-
 .../examples/shopify-section-link.example.tsx |   10 +-
 .../admin/components/MoneyField/MoneyField.ts |    5 -
 .../examples/basic-moneyfield.example.tsx     |   10 -
 .../components/NumberField/NumberField.ts     |    5 -
 .../examples/basic-numberfield.example.tsx    |    7 -
 .../Option/examples/basic-option.example.tsx  |   57 +
 .../admin/components/Paragraph/Paragraph.ts   |    5 -
 .../examples/basic-paragraph.example.tsx      |   32 +-
 .../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 -
 ....example.tsx => basic-section.example.tsx} |   10 +-
 .../admin/components/Select/Select.ts         |   11 -
 .../Select/examples/basic-select.example.tsx  |   71 +-
 .../examples/basic-stack.example.tsx}         |   15 +-
 .../surfaces/admin/components/Text/Text.ts    |    5 -
 .../Text/examples/basic-text.example.tsx      |   16 +-
 .../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     |   22 +-
 .../src/surfaces/admin/props.ts               | 3544 ++++++++++++++++
 .../customer-account/hooks/live-navigation.ts |    4 +-
 .../docs/surfaces/admin/build-docs.sh         |    9 +
 .../docs/surfaces/admin/create-doc-files.sh   |   20 +-
 packages/ui-extensions/loom.config.ts         |   25 +-
 packages/ui-extensions/src/surfaces/admin.ts  |    2 -
 .../src/surfaces/admin/components.d.ts        | 3591 +++++++++++++++++
 .../src/surfaces/admin/components.ts          |   51 -
 .../components/AdminAction/AdminAction.doc.ts |   10 +-
 .../components/AdminAction/AdminAction.ts     |   23 -
 .../examples/basic-adminaction.example.ts     |   31 +-
 .../components/AdminBlock/AdminBlock.doc.ts   |   10 +-
 .../admin/components/AdminBlock/AdminBlock.ts |   11 -
 .../examples/basic-adminblock.example.ts      |   10 +-
 .../AdminPrintAction/AdminPrintAction.doc.ts  |   10 +-
 .../AdminPrintAction/AdminPrintAction.ts      |    8 -
 .../basic-adminprintaction.example.ts         |   15 +-
 .../admin/components/Badge/Badge.doc.ts       |   14 +-
 .../surfaces/admin/components/Badge/Badge.ts  |   33 -
 .../Badge/examples/basic-badge.example.ts     |   15 +-
 .../admin/components/Banner/Banner.ts         |   31 -
 .../Banner/examples/basic-banner.example.ts   |   11 -
 .../admin/components/BlockStack/BlockStack.ts |   34 -
 .../examples/basic-blockstack.example.ts      |   24 -
 .../surfaces/admin/components/Box/Box.doc.ts  |   14 +-
 .../src/surfaces/admin/components/Box/Box.ts  |   12 -
 .../Box/examples/basic-box.example.ts         |   12 +-
 .../admin/components/Button/Button.doc.ts     |   14 +-
 .../admin/components/Button/Button.ts         |  116 -
 .../Button/examples/basic-button.example.ts   |   13 +-
 .../admin/components/Checkbox/Checkbox.doc.ts |   14 +-
 .../admin/components/Checkbox/Checkbox.ts     |   53 -
 .../examples/basic-checkbox.example.ts        |   15 +-
 .../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            |   10 +-
 .../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   |   16 +-
 .../admin/components/Divider/Divider.ts       |    9 -
 .../admin/components/Divider/README.md        |    7 -
 .../Divider/examples/basic-divider.example.ts |   20 +-
 .../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  |   10 +-
 .../FunctionSettings/FunctionSettings.ts      |   45 -
 .../basic-functionsettings.example.ts         |   53 +-
 .../admin/components/Heading/Heading.doc.ts   |   19 +-
 .../admin/components/Heading/Heading.ts       |   14 -
 .../admin/components/Heading/README.md        |    6 -
 .../Heading/examples/basic-heading.example.ts |    8 +-
 .../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         |   33 +-
 .../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       |    8 +-
 .../admin/components/Image/Image.doc.ts       |   14 +-
 .../surfaces/admin/components/Image/Image.ts  |  120 -
 .../Image/examples/basic-image.example.ts     |   11 +-
 .../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         |   38 +-
 .../surfaces/admin/components/Link/Link.ts    |   60 -
 .../Link/examples/app-link.example.ts         |   22 +-
 .../Link/examples/external-link.example.ts    |   22 +-
 .../Link/examples/relative-link.example.ts    |   22 +-
 .../examples/shopify-section-link.example.ts  |   22 +-
 .../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 -
 .../Banner.doc.ts => Option/Option.doc.ts}    |   28 +-
 .../admin/components/Option/README.md         |   94 +
 .../Option/examples/basic-option.example.ts   |   56 +
 .../components/Paragraph/Paragraph.doc.ts     |   14 +-
 .../admin/components/Paragraph/Paragraph.ts   |    5 -
 .../examples/basic-paragraph.example.ts       |   27 +-
 .../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/Section.doc.ts   |   16 +-
 .../admin/components/Section/Section.ts       |   29 -
 .../Section/examples/basic-Section.example.ts |   19 -
 .../Section/examples/basic-section.example.ts |    9 +
 .../admin/components/Select/Select.doc.ts     |   14 +-
 .../admin/components/Select/Select.ts         |  143 -
 .../Select/examples/basic-select.example.ts   |   92 +-
 .../BlockStack.doc.ts => Stack/Stack.doc.ts}  |   32 +-
 .../Stack/examples/basic-stack.example.ts     |   10 +
 .../admin/components/Text/Text.doc.ts         |   14 +-
 .../surfaces/admin/components/Text/Text.ts    |   42 -
 .../Text/examples/basic-text.example.ts       |   22 +-
 .../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 -
 225 files changed, 7966 insertions(+), 5708 deletions(-)
 create mode 100644 .changeset/wet-laws-explain.md
 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/AdminBlock/AdminBlock.ts
 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/Badge/Badge.ts
 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/Button/Button.ts
 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/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/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/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/Heading/Heading.ts
 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/Image/Image.ts
 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/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
 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/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
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Option/examples/basic-option.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/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
 rename packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/{basic-Section.example.tsx => basic-section.example.tsx} (70%)
 delete mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts
 rename packages/ui-extensions-react/src/surfaces/admin/components/{InlineStack/examples/basic-inlinestack.example.tsx => Stack/examples/basic-stack.example.tsx} (61%)
 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/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
 create mode 100644 packages/ui-extensions-react/src/surfaces/admin/props.ts
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components.d.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.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.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.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Button/Button.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.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.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.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Divider/README.md
 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.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.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.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/Image/Image.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.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
 rename packages/ui-extensions/src/surfaces/admin/components/{Banner/Banner.doc.ts => Option/Option.doc.ts} (58%)
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Option/README.md
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Option/examples/basic-option.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.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/Section.ts
 delete 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/Section/examples/basic-section.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Select/Select.ts
 rename packages/ui-extensions/src/surfaces/admin/components/{BlockStack/BlockStack.doc.ts => Stack/Stack.doc.ts} (59%)
 create mode 100644 packages/ui-extensions/src/surfaces/admin/components/Stack/examples/basic-stack.example.ts
 delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Text/Text.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

diff --git a/.changeset/wet-laws-explain.md b/.changeset/wet-laws-explain.md
new file mode 100644
index 000000000..11413feed
--- /dev/null
+++ b/.changeset/wet-laws-explain.md
@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions-react': patch
+'@shopify/ui-extensions': patch
+---
+
+Add new remote-dom components for Admin
diff --git a/packages/ui-extensions-react/src/surfaces/admin.ts b/packages/ui-extensions-react/src/surfaces/admin.ts
index 669f01274..4de9bdd9f 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 258fbdddc..000000000
--- 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 7134a86e0..000000000
--- 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/AdminBlock/AdminBlock.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
deleted file mode 100644
index 69e548e09..000000000
--- 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/AdminPrintAction/AdminPrintAction.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts
deleted file mode 100644
index cfbd27f3e..000000000
--- 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/Badge/Badge.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts
deleted file mode 100644
index 051fc1ed8..000000000
--- 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
index 33dfa4e89..319af1dfa 100644
--- 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
@@ -1,13 +1,10 @@
-import {render, Badge} from '@shopify/ui-extensions-react/admin';
+import {
+  reactExtension,
+  Badge,
+} from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
+reactExtension('Playground', () => <App />);
 
 function App() {
-  return (
-    <Badge
-      tone="info"
-    >
-      Fulfilled
-    </Badge>
-  );
+  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 728a34947..000000000
--- 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 8db34382e..000000000
--- 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 fb4d04559..000000000
--- 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 b2c2a1dab..000000000
--- 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 b5a8afb60..000000000
--- 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
index 30be05184..18ee89ba8 100644
--- 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
@@ -1,11 +1,10 @@
-import {render, Box} from '@shopify/ui-extensions-react/admin';
+import {
+  reactExtension,
+  Box,
+} from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
+reactExtension('Playground', () => <App />);
 
 function App() {
-  return (
-    <Box padding="base">
-      Box
-    </Box>
-  );
+  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 931634df8..000000000
--- 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
index 93fcdd8f2..68b88bf04 100644
--- 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
@@ -1,6 +1,7 @@
-import {render, Button} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
+import {
+  reactExtension,
+  Button,
+} from '@shopify/ui-extensions-react/admin';
 
 function App() {
   return (
@@ -13,3 +14,8 @@ function App() {
     </Button>
   );
 }
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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 0fc14909a..000000000
--- 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
index 40644d732..e068d6339 100644
--- 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
@@ -1,6 +1,9 @@
-import {render, Checkbox} from '@shopify/ui-extensions-react/admin';
+import {
+  reactExtension,
+  Checkbox,
+} from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
+reactExtension('Playground', () => <App />);
 
 function App() {
   return (
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 4aa60d67b..000000000
--- 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 f34899efe..000000000
--- 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 375de0137..000000000
--- 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 bddc08726..000000000
--- 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 8110f6578..000000000
--- 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/DateField/DateField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts
deleted file mode 100644
index c56494551..000000000
--- 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 13542e019..000000000
--- 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 3e2914e80..000000000
--- 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 8519b66db..000000000
--- 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 21f3cdbfe..000000000
--- 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 4f36fd932..000000000
--- 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 c5dbf5892..000000000
--- 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 209fe39f6..000000000
--- 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 a26fac0e3..000000000
--- 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
index 902ab9478..dc5fe92ab 100644
--- 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
@@ -1,18 +1,22 @@
 import React from 'react';
 import {
-  render,
+  reactExtension,
   Divider,
-  BlockStack,
+  Stack,
+  reactExtension,
 } from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
-
 function App() {
   return (
-    <BlockStack gap>
+    <Stack direction="block" gap>
       <>First text</>
       <Divider />
       <>Second Text</>
-    </BlockStack>
+    </Stack>
   );
 }
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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 6c3b7de33..000000000
--- 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 2b4cdff6b..000000000
--- 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 d62ad110e..000000000
--- 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 c6d445ed8..000000000
--- 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 4aadb0e05..000000000
--- 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/Heading/Heading.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts
deleted file mode 100644
index b6e6d73b6..000000000
--- 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
index b03a114e7..67f1979fc 100644
--- 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
@@ -1,6 +1,9 @@
-import {render, Heading} from '@shopify/ui-extensions-react/admin';
+import {
+  reactExtension,
+  Heading,
+} from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
+reactExtension('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 7f6f45c24..000000000
--- 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 7bcaef390..000000000
--- 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 c50233a7c..000000000
--- 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
index a3e8089a4..7ec7d6114 100644
--- 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
@@ -1,7 +1,10 @@
-import {render, Icon} from '@shopify/ui-extensions-react/admin';
+import {
+  reactExtension,
+  Icon,
+} from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
+reactExtension('Playground', () => <App />);
 
 function App() {
-  return <Icon name="AppsMajor" />;
+  return <Icon type="apps" />;
 }
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 82b47d291..000000000
--- 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
index 43dc6f5ea..bfea056f1 100644
--- 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
@@ -1,9 +1,18 @@
-import {render, Image} from '@shopify/ui-extensions-react/admin';
-
-render('Playground', () => <App />);
+import {
+  reactExtension,
+  Image,
+} from '@shopify/ui-extensions-react/admin';
 
 function App() {
   return (
-    <Image alt="Pickaxe" source="https://shopify.dev/assets/icons/64/pickaxe-1.png" />
+    <Image
+      alt="Pickaxe"
+      source="https://shopify.dev/assets/icons/64/pickaxe-1.png"
+    />
   );
 }
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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 140cc12bf..000000000
--- 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/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
deleted file mode 100644
index 74b94026c..000000000
--- 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/InternalLocationList/InternalLocationList.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts
deleted file mode 100644
index 557356e83..000000000
--- 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 bda27989c..000000000
--- 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
index 73b437853..6bc65d3e1 100644
--- 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
@@ -1,16 +1,16 @@
 import React from 'react';
 import {
-  render,
+  reactExtension,
   Link,
 } from '@shopify/ui-extensions-react/admin';
 
-
-render('Playground', () => <App />);
-
 function App() {
   return (
-    <Link href="app:bar">
-      Link to app path
-    </Link>
+    <Link href="app:bar">Link to app path</Link>
   );
 }
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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
index 0f4c6af28..764c09d70 100644
--- 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
@@ -1,12 +1,9 @@
 import React from 'react';
 import {
-  render,
+  reactExtension,
   Link,
 } from '@shopify/ui-extensions-react/admin';
 
-
-render('Playground', () => <App />);
-
 function App() {
   return (
     <Link href="https://www.shopify.ca/climate/sustainability-fund">
@@ -14,3 +11,8 @@ function App() {
     </Link>
   );
 }
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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
index 822ae7bdc..4b74a2750 100644
--- 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
@@ -1,12 +1,9 @@
 import React from 'react';
 import {
-  render,
+  reactExtension,
   Link,
 } from '@shopify/ui-extensions-react/admin';
 
-
-render('Playground', () => <App />);
-
 function App() {
   return (
     <Link href="/baz">
@@ -14,3 +11,8 @@ function App() {
     </Link>
   );
 }
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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
index f10a0e5ad..f73b37296 100644
--- 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
@@ -1,12 +1,9 @@
 import React from 'react';
 import {
-  render,
+  reactExtension,
   Link,
 } from '@shopify/ui-extensions-react/admin';
 
-
-render('Playground', () => <App />);
-
 function App() {
   return (
     <Link href="shopify://admin/orders">
@@ -14,3 +11,8 @@ function App() {
     </Link>
   );
 }
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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 f176a02a6..000000000
--- 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 bdd46cdcd..000000000
--- 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 3f44e86e6..000000000
--- 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 65dd16ea3..000000000
--- 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/Option/examples/basic-option.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Option/examples/basic-option.example.tsx
new file mode 100644
index 000000000..aaefd39e5
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Option/examples/basic-option.example.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  reactExtension,
+  Option,
+  Select,
+} from '@shopify/ui-extensions-react/admin';
+
+const 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',
+  },
+];
+
+function App() {
+  const [value, setValue] = React.useState('2');
+  return (
+    <Select
+      label="Country"
+      value={value}
+      onChange={setValue}
+    >
+      {options.map((option) => (
+        <Option
+          key={option.value}
+          value={option.value}
+          label={option.label}
+        />
+      ))}
+    </Select>
+  );
+}
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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 d727b8839..000000000
--- 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
index 022b4c2db..4a3c2c962 100644
--- 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
@@ -1,16 +1,26 @@
 import {
-    render,
-    BlockStack,
-    Paragraph,
+  reactExtension,
+  Paragraph,
+  Stack,
+  Text,
 } 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>
-    )
+  return (
+    <Stack
+      direction="block"
+      alignment="center"
+      gap
+    >
+      <Paragraph>
+        <Text type="strong">Name:</Text>
+        <Text>Jane Doe</Text>
+      </Paragraph>
+    </Stack>
+  );
 }
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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 68f167a40..000000000
--- 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 a2ca1d62e..000000000
--- 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 fcca37def..000000000
--- 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 67efde16b..000000000
--- 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 b10c17719..000000000
--- 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 8b4968f5e..000000000
--- 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 6cc484c55..000000000
--- 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
similarity index 70%
rename from packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx
rename to packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-section.example.tsx
index 45538063f..9030c1e16 100644
--- 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
@@ -1,12 +1,9 @@
 import React from 'react';
 import {
-  render,
+  reactExtension,
   Section,
 } from '@shopify/ui-extensions-react/admin';
 
-
-render('Playground', () => <App />);
-
 function App() {
   return (
     <Section heading="Section heading">
@@ -14,3 +11,8 @@ function App() {
     </Section>
   );
 }
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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 9f0b79f15..000000000
--- 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
index f9cec98b9..d28013aa6 100644
--- 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
@@ -1,45 +1,56 @@
 import React from 'react';
 import {
-  render,
+  reactExtension,
+  Option,
   Select,
 } from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
+const 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',
+  },
+];
 
 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',
-        },
-      ]}
-    />
+    >
+      {options.map((option) => (
+        <Option
+          key={option.value}
+          value={option.value}
+          label={option.label}
+        />
+      ))}
+    </Select>
   );
 }
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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/Stack/examples/basic-stack.example.tsx
similarity index 61%
rename from packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx
rename to packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-stack.example.tsx
index d9fb203f8..e606b4cd8 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-stack.example.tsx
@@ -1,18 +1,21 @@
 import React from 'react';
 import {
-  render,
-  InlineStack,
+  reactExtension,
+  Stack,
 } from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
-
 function App() {
   return (
-    <InlineStack gap>
+    <Stack gap>
       <>Child 1</>
       <>Child 2</>
       <>Child 3</>
       <>Child 4</>
-    </InlineStack>
+    </Stack>
   );
 }
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);
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 8f040b4fc..000000000
--- 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
index eee51ee38..71aa4abfd 100644
--- 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
@@ -1,12 +1,20 @@
-import {render, Text, BlockStack} from '@shopify/ui-extensions-react/admin';
+import {
+  reactExtension,
+  Text,
+  Stack,
+} from '@shopify/ui-extensions-react/admin';
 
-render('Playground', () => <App />);
+reactExtension('Playground', () => <App />);
 
 function App() {
   return (
-    <BlockStack inlineAlignment="center" gap>
+    <Stack
+      direction="block"
+      alignment="center"
+      gap
+    >
       <Text fontWeight="bold">Name:</Text>
       <Text>Jane Doe</Text>
-    </BlockStack>
+    </Stack>
   );
 }
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 a9f53e617..000000000
--- 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 d13515507..000000000
--- 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 624fb6eed..000000000
--- 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 63b73c505..000000000
--- 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 1811e45fd..000000000
--- 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 8cde0bdf9..000000000
--- 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
index 36a0f531e..b094b7f06 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/components/util.ts
+++ b/packages/ui-extensions-react/src/surfaces/admin/components/util.ts
@@ -6,8 +6,21 @@ import {
   forwardRef,
 } from 'react';
 
-export const createRemoteComponent = (name: string) =>
-  (shopify as any)._createReactRemoteComponent(
+// Add `children` prop, but only if it wasn't already defined:
+type PropsWithChildren<T> = T extends {children: React.ReactNode}
+  ? T
+  : React.PropsWithChildren<T>;
+
+export function createRemoteComponent<
+  Props extends object,
+  ElementType extends HTMLElement,
+>(
+  tagName: string,
+): React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<PropsWithChildren<Props>> &
+    React.RefAttributes<ElementType>
+> {
+  return (shopify as any)._createReactRemoteComponent(
     {
       createElement,
       useRef,
@@ -15,5 +28,6 @@ export const createRemoteComponent = (name: string) =>
       useCallback,
       forwardRef,
     },
-    name,
-  );
+    tagName,
+  ) as any;
+}
diff --git a/packages/ui-extensions-react/src/surfaces/admin/props.ts b/packages/ui-extensions-react/src/surfaces/admin/props.ts
new file mode 100644
index 000000000..5c1c3a44e
--- /dev/null
+++ b/packages/ui-extensions-react/src/surfaces/admin/props.ts
@@ -0,0 +1,3544 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+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';
+type ColorKeyword = 'subdued' | 'base' | 'strong';
+interface GlobalProps {
+  /**
+   * A unique identifier for the element.
+   */
+  id?: string;
+}
+type BackgroundColorKeyword = 'transparent' | ColorKeyword;
+interface BackgroundProps {
+  /**
+   * Adjust the background of the element.
+   *
+   * @default: 'transparent'
+   */
+  background?: BackgroundColorKeyword;
+}
+type ToneKeyword =
+  | 'auto'
+  | 'neutral'
+  | 'info'
+  | 'success'
+  | 'caution'
+  | 'warning'
+  | 'critical';
+type ComponentChildren = any;
+type IconType =
+  | '3d-environment'
+  | '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-revert'
+  | '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'
+  | 'dashed-circle'
+  | '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'
+  | 'download'
+  | 'drag-drop'
+  | 'drag-handle'
+  | 'duplicate'
+  | 'edit'
+  | 'email-follow-up'
+  | 'email-newsletter'
+  | 'email'
+  | 'empty'
+  | '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'
+  | 'foreground'
+  | 'forklift'
+  | 'forms'
+  | 'games'
+  | 'gauge'
+  | 'geolocation'
+  | 'gift-card'
+  | 'gift'
+  | 'git-branch'
+  | 'git-commit'
+  | 'git-repository'
+  | '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'
+  | 'receivables'
+  | 'redo'
+  | 'referral-code'
+  | 'refresh'
+  | 'remove-background'
+  | 'reorder'
+  | 'replace'
+  | 'replay'
+  | 'reset'
+  | 'return'
+  | 'reward'
+  | 'rocket'
+  | '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';
+interface BadgeProps$2 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.
+   *
+   * @default ''
+   */
+  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;
+}
+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}`;
+type MaybeTwoValuesShorthandProperty<T extends string> = T | `${T} ${T}`;
+type AnyString = string & {};
+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';
+}
+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;
+}
+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';
+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';
+}
+type PaddingKeyword = SizeKeyword | 'none';
+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 | '';
+}
+type SizeUnits = `${number}px` | `${number}%` | `0`;
+type SizeUnitsOrAuto = SizeUnits | 'auto';
+type SizeUnitsOrNone = SizeUnits | 'none';
+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;
+}
+type BorderStyleKeyword = 'none' | 'solid' | 'dashed' | 'dotted' | 'auto';
+type BorderSizeKeyword = SizeKeyword | 'none';
+type BorderRadiusKeyword = SizeKeyword | 'none';
+type BorderShorthand =
+  | BorderSizeKeyword
+  | `${BorderSizeKeyword} ${ColorKeyword}`
+  | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`;
+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<BorderSizeKeyword> | '';
+  /**
+   * 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>;
+}
+interface OverflowProps {
+  /**
+   * Sets the overflow behavior of the element.
+   *
+   * `hidden`: clips the content when it is larger than the element’s container.
+   * The element will not be scrollable and the users will not be able
+   * to access the clipped content by dragging or using a scroll wheel on a mouse.
+   *
+   * `visible`: the content that extends beyond the element’s container is visible.
+   *
+   * @default 'visible'
+   */
+  overflow?: 'hidden' | 'visible';
+}
+interface BaseBoxProps$2
+  extends GlobalProps,
+    AccessibilityVisibilityProps,
+    BackgroundProps,
+    DisplayProps,
+    SizingProps,
+    PaddingProps,
+    BorderProps,
+    OverflowProps {
+  /**
+   * 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;
+}
+interface BaseBoxProps$2WithRole
+  extends BaseBoxProps$2,
+    AccessibilityRoleProps {}
+interface BoxProps$2 extends BaseBoxProps$2WithRole {}
+interface FocusEventProps {
+  /**
+   * Callback when the element loses focus.
+   */
+  onBlur?: () => void;
+  /**
+   * Callback when the element receives focus.
+   */
+  onFocus?: () => void;
+}
+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;
+}
+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
+   *
+   * 'auto' - The target is automatically determined based on the origin of the URL. Surfaces can set specific rules on how they handle each URL.
+   * It’s expected that the behavior of `auto` is as `_self` except in specific cases.
+   * For example, a surface could decide to open cross-origin URLs in a new window (as `_blank`).
+   *
+   * @default 'auto'
+   */
+  target?: 'auto' | '_blank' | '_self' | '_parent' | '_top' | 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';
+}
+interface BasePressableProps extends ButtonBehaviorProps, LinkBehaviorProps {}
+interface ButtonProps$2 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.
+   *
+   * @default ''
+   */
+  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;
+}
+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;
+}
+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;
+}
+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;
+}
+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;
+}
+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;
+}
+interface FieldProps
+  extends BasicFieldProps,
+    InputProps,
+    FocusEventProps,
+    FieldDetailsProps {
+  /**
+   * A short hint that describes the expected value of the field.
+   */
+  placeholder?: string;
+}
+interface BaseTextFieldProps extends FieldProps {
+  /**
+   * The field cannot be edited by the user. It is focusable will be announced by screen readers.
+   */
+  readOnly?: boolean;
+}
+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.
+   *
+   * @default ''
+   */
+  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;
+}
+interface MinMaxLengthProps {
+  /**
+   * Specifies the maximum number of characters allowed.
+   */
+  maxLength?: number;
+  /**
+   * Specifies the min number of characters allowed.
+   */
+  minLength?: number;
+}
+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;
+}
+interface BaseOptionProps$1 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;
+}
+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;
+}
+interface CheckboxProps$2 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;
+}
+interface AutocompleteProps<AutocompleteField extends AnyAutocompleteField> {
+  /**
+   * A hint as to the intended content of the field.
+   *
+   * When set to `on` (the default), 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 `off`, 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.
+   *
+   * @default 'on'
+   */
+  autocomplete?:
+    | AutocompleteField
+    | `${AutocompleteSection} ${AutocompleteField}`
+    | `${AutocompleteGroup} ${AutocompleteField}`
+    | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}`
+    | 'on'
+    | 'off';
+}
+type AutocompleteSection = `section-${string}`;
+type AutocompleteGroup = 'shipping' | 'billing';
+type AutocompleteAddressGroup = 'fax' | 'home' | 'mobile' | 'pager';
+type AutocompleteFieldTelephoneAlias = 'tel' | 'telephone';
+type AutocompleteFieldBirthdayAlias = 'bday' | 'birthday';
+type AutocompleteFieldCreditCardAlias = 'cc' | 'credit-card';
+type AutocompleteFieldInstantMessageAlias = 'impp' | 'instant-message';
+type AutocompleteFieldSecurityCodeAlias = 'csc' | 'security-code';
+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`;
+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`
+>;
+interface DividerProps$2 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;
+}
+type SpacingKeyword = SizeKeyword | 'none';
+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 | '';
+}
+type BaselinePosition = 'baseline' | 'first baseline' | 'last baseline';
+type ContentDistribution =
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+  | 'stretch';
+type ContentPosition = 'center' | 'start' | 'end';
+type OverflowPosition = `unsafe ${ContentPosition}` | `safe ${ContentPosition}`;
+type AlignItemsKeyword =
+  | 'normal'
+  | 'stretch'
+  | BaselinePosition
+  | OverflowPosition
+  | ContentPosition;
+type JustifyContentKeyword =
+  | 'normal'
+  | ContentDistribution
+  | OverflowPosition
+  | ContentPosition;
+type AlignContentKeyword =
+  | 'normal'
+  | BaselinePosition
+  | ContentDistribution
+  | OverflowPosition
+  | ContentPosition;
+interface HeadingProps$2 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';
+}
+interface IconProps$2 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;
+}
+interface BaseImageProps$2 {
+  /**
+   * 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;
+}
+type optionalSpace = '' | ' ';
+interface ImageProps$2 extends GlobalProps, BaseImageProps$2 {
+  /**
+   * 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.
+   *
+   * Getters for this value should return `auto` or the ratio in `number / number` form. Input fractions should not be 'simplified'.
+   * For example, if the value is set as `50 /    100`, the getter returns `50 / 100`.
+   * If the value is set as `0.5`, the getter returns `0.5 / 1`.
+   *
+   * @default 'auto'
+   */
+  aspectRatio?:
+    | `${number}${optionalSpace}/${optionalSpace}${number}`
+    | `${number}`
+    | 'auto';
+  /**
+   * 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;
+}
+interface LinkProps$2 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;
+}
+interface OptionProps$1 extends GlobalProps, BaseOptionProps$1 {}
+interface OptionGroupProps$1 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;
+}
+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';
+  /**
+   * 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)
+   *
+   * @default ''
+   */
+  lang?: string;
+}
+interface ParagraphProps$2
+  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';
+}
+interface SectionProps$2 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';
+}
+interface SelectProps$1
+  extends GlobalProps,
+    FieldProps,
+    AutocompleteProps<AnyAutocompleteField>,
+    FocusEventProps {
+  /**
+   * The options a user can select from.
+   *
+   * Accepts `Option` and `OptionGroup` components.
+   */
+  children?: ComponentChildren;
+}
+interface SpinnerProps$2 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;
+}
+interface StackProps$2 extends BaseBoxProps$2WithRole, 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;
+}
+interface TextProps$2
+  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;
+}
+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'
+  | 'wand'
+  | 'work'
+  | 'wifi'
+  | 'viewport-short'
+  | 'viewport-tall'
+  | 'viewport-wide'
+  | 'unknown-device'
+  | 'unlock'
+  | 'undo'
+  | 'transfer-out'
+  | 'viewport-narrow'
+  | 'transfer'
+  | 'transaction-fee-yen'
+  | 'transaction-fee-rupee'
+  | 'upload'
+  | 'transfer-in'
+  | 'transaction'
+  | 'transaction-fee-euro'
+  | 'wallet'
+  | 'transaction-fee-dollar'
+  | 'transfer-internal'
+  | 'thumbs-up'
+  | 'toggle-off'
+  | 'thumbs-down'
+  | 'transaction-fee-pound'
+  | 'theme'
+  | 'tip-jar'
+  | 'theme-template'
+  | 'text-with-image'
+  | 'theme-store'
+  | 'text-underline'
+  | 'theme-edit'
+  | 'text'
+  | 'text-quote'
+  | 'toggle-on'
+  | 'text-title'
+  | 'text-in-rows'
+  | 'text-indent'
+  | 'text-italic'
+  | 'text-in-columns'
+  | 'text-bold'
+  | 'text-grammar'
+  | 'text-block'
+  | 'text-font'
+  | 'text-align-center'
+  | 'text-align-right'
+  | 'target'
+  | 'team'
+  | 'text-font-list'
+  | 'tablet'
+  | 'store-online'
+  | 'sun'
+  | 'text-color'
+  | 'stop-circle'
+  | 'store-import'
+  | 'store-managed'
+  | 'status'
+  | 'tax'
+  | 'store'
+  | 'star-filled'
+  | 'status-active'
+  | 'sports'
+  | 'sound'
+  | 'sort-descending'
+  | 'social-post'
+  | 'sort-ascending'
+  | 'social-ad'
+  | 'smiley-joy'
+  | 'smiley-neutral'
+  | 'smiley-sad'
+  | 'slideshow'
+  | 'smiley-happy'
+  | 'shopcodes'
+  | 'shield-pending'
+  | 'shipping-label'
+  | 'shield-check-mark'
+  | 'send'
+  | 'search-resource'
+  | 'search-recent'
+  | 'save'
+  | 'share'
+  | 'rotate-left'
+  | 'sandbox'
+  | 'search'
+  | 'search-list'
+  | 'reward'
+  | 'return'
+  | 'reset'
+  | 'rotate-right'
+  | 'rocket'
+  | 'replace'
+  | 'remove-background'
+  | 'refresh'
+  | 'replay'
+  | 'redo'
+  | 'receipt-rupee'
+  | 'receipt-yen'
+  | 'referral-code'
+  | 'receipt-pound'
+  | 'receipt-paid'
+  | 'receivables'
+  | 'receipt-dollar'
+  | 'receipt-euro'
+  | 'product-unavailable'
+  | 'profile'
+  | 'question-circle'
+  | 'product-return'
+  | 'product-remove'
+  | 'receipt'
+  | 'shield-person'
+  | 'product-cost'
+  | 'product-reference'
+  | 'product-add'
+  | 'text-align-left'
+  | 'point-of-sale'
+  | 'product-list'
+  | 'receipt-refund'
+  | 'play'
+  | 'plan'
+  | 'pin'
+  | 'play-circle'
+  | 'phone-out'
+  | 'phone-in'
+  | 'personalized-text'
+  | 'shield-none'
+  | 'person-segment'
+  | 'person-lock'
+  | 'person-remove'
+  | 'settings'
+  | 'person-add'
+  | 'payout'
+  | 'person-exit'
+  | 'payout-euro'
+  | 'payout-rupee'
+  | 'payout-dollar'
+  | 'payout-pound'
+  | 'passkey'
+  | 'paint-brush-round'
+  | 'pause-circle'
+  | 'paper-check'
+  | 'payment-capture'
+  | 'pagination-end'
+  | 'pagination-start'
+  | 'payout-yen'
+  | 'page-up'
+  | 'page-reference'
+  | 'page-down'
+  | 'page-clock'
+  | 'price-list'
+  | 'page-attachment'
+  | 'package-returned'
+  | 'print'
+  | 'page-heart'
+  | 'package-on-hold'
+  | 'outgoing'
+  | 'package-fulfilled'
+  | 'outdent'
+  | 'order-repeat'
+  | 'paint-brush-flat'
+  | 'page-add'
+  | 'order-draft'
+  | 'organization'
+  | 'notification'
+  | 'orders-status'
+  | 'note'
+  | 'nature'
+  | 'money'
+  | 'moon'
+  | 'order-first'
+  | 'minimize'
+  | 'page-remove'
+  | 'money-none'
+  | 'package'
+  | 'metaobject'
+  | 'metaobject-reference'
+  | 'metafields'
+  | 'megaphone'
+  | 'metaobject-list'
+  | 'menu'
+  | 'mention'
+  | 'media-receiver'
+  | 'menu-vertical'
+  | 'markets'
+  | 'measurement-size'
+  | 'markets-rupee'
+  | 'menu-horizontal'
+  | 'markets-yen'
+  | 'measurement-weight'
+  | 'measurement-volume'
+  | 'markets-euro'
+  | 'lock'
+  | 'location-none'
+  | 'list-bulleted'
+  | 'layout-sidebar-left'
+  | 'live'
+  | 'layout-rows-2'
+  | 'list-numbered'
+  | 'layout-section'
+  | 'layout-footer'
+  | 'note-add'
+  | 'layout-columns-3'
+  | 'layout-sidebar-right'
+  | 'layout-buy-button-horizontal'
+  | 'layout-header'
+  | 'layout-block'
+  | 'maximize'
+  | 'layout-buy-button-vertical'
+  | 'link'
+  | 'label-printer'
+  | 'layout-buy-button'
+  | 'keyboard'
+  | 'layout-column-1'
+  | 'layout-columns-2'
+  | 'layout-logo-block'
+  | 'inventory'
+  | 'language-translate'
+  | 'inventory-updated'
+  | 'incentive'
+  | 'incoming'
+  | 'keyboard-hide'
+  | 'image'
+  | 'import'
+  | 'key'
+  | 'image-none'
+  | 'image-with-text-overlay'
+  | 'identity-card'
+  | 'iq'
+  | 'image-explore'
+  | 'image-add'
+  | 'heart'
+  | 'image-magic'
+  | 'icons'
+  | 'layout-popup'
+  | 'image-alt'
+  | 'home'
+  | 'globe-asia'
+  | 'hashtag'
+  | 'gauge'
+  | 'git-repository'
+  | 'git-commit'
+  | 'git-branch'
+  | 'food'
+  | 'foreground'
+  | 'globe-europe'
+  | 'gift-card'
+  | 'games'
+  | 'hashtag-decimal'
+  | 'folder-up'
+  | 'images'
+  | 'folder-remove'
+  | 'forklift'
+  | 'flip-vertical'
+  | 'flower'
+  | 'folder-down'
+  | 'file'
+  | 'favicon'
+  | 'flag'
+  | 'forms'
+  | 'eye-dropper'
+  | 'eyeglasses'
+  | 'eye-check-mark'
+  | 'envelope'
+  | 'export'
+  | 'exchange'
+  | 'eye-first'
+  | 'exit'
+  | 'envelope-soft-pack'
+  | 'enter'
+  | 'email-newsletter'
+  | 'drag-handle'
+  | 'duplicate'
+  | 'domain'
+  | 'domain-redirect'
+  | 'filter'
+  | 'domain-landing-page'
+  | 'dock-side'
+  | 'domain-new'
+  | 'flip-horizontal'
+  | 'folder'
+  | 'download'
+  | 'dock-floating'
+  | 'folder-add'
+  | 'drag-drop'
+  | 'dns-settings'
+  | 'email-follow-up'
+  | 'delete'
+  | 'discount'
+  | 'data-table'
+  | 'database-add'
+  | 'desktop'
+  | 'database'
+  | 'crop'
+  | 'cursor'
+  | 'currency-convert'
+  | 'dashed-circle'
+  | 'credit-card-tap-chip'
+  | 'credit-card'
+  | 'credit-card-secure'
+  | 'credit-card-reader'
+  | 'cursor-option'
+  | 'credit-card-reader-chip'
+  | 'database-connect'
+  | 'discount-code'
+  | 'corner-square'
+  | 'credit-card-reader-tap'
+  | 'credit-card-percent'
+  | 'corner-pill'
+  | 'contract'
+  | 'connect'
+  | 'content'
+  | 'cursor-banner'
+  | 'data-presentation'
+  | 'credit-card-cancel'
+  | 'confetti'
+  | 'color'
+  | 'compose'
+  | 'collection-list'
+  | 'corner-round'
+  | 'color-none'
+  | 'collection-reference'
+  | 'code'
+  | 'collection-featured'
+  | 'compass'
+  | 'clipboard-checklist'
+  | 'clipboard-check'
+  | 'clipboard'
+  | 'circle'
+  | 'chevron-right'
+  | 'chevron-right-circle'
+  | 'chevron-left'
+  | 'chevron-left-circle'
+  | 'checkbox'
+  | 'code-add'
+  | 'chat-referral'
+  | 'chart-stacked'
+  | 'chart-popular'
+  | 'chart-line'
+  | 'chart-histogram-last'
+  | 'chart-histogram-growth'
+  | 'chart-histogram-full'
+  | 'chevron-up-circle'
+  | 'chart-histogram-flat'
+  | 'chart-histogram-second-last'
+  | 'chevron-down-circle'
+  | 'chart-histogram-first'
+  | 'chart-funnel'
+  | 'chart-donut'
+  | 'channels'
+  | 'clock-revert'
+  | 'categories'
+  | 'chart-cohort'
+  | 'catalog-product'
+  | 'chart-histogram-first-last'
+  | 'cash-euro'
+  | 'cash-pound'
+  | 'cart'
+  | 'cart-up'
+  | 'chart-vertical'
+  | 'cart-abandoned'
+  | 'chart-horizontal'
+  | 'cash-yen'
+  | 'cart-down'
+  | 'cart-discount'
+  | 'camera'
+  | 'cash-rupee'
+  | 'cash-dollar'
+  | 'camera-flip'
+  | 'caret-up'
+  | 'cart-sale'
+  | 'calculator'
+  | 'button'
+  | 'button-press'
+  | 'calendar-time'
+  | 'bullet'
+  | 'caret-down'
+  | 'bill'
+  | 'blog'
+  | 'backspace'
+  | 'bank'
+  | 'barcode'
+  | 'chat'
+  | 'bag'
+  | 'book-open'
+  | 'automation'
+  | 'book'
+  | 'arrows-in-horizontal'
+  | 'arrow-up'
+  | 'arrows-out-horizontal'
+  | 'arrow-left'
+  | 'arrow-right'
+  | 'arrow-down'
+  | 'arrow-right-circle'
+  | 'arrow-up-circle'
+  | 'arrow-down-circle'
+  | 'arrow-left-circle'
+  | 'bug'
+  | 'airplane'
+  | 'alert-location'
+  | 'affiliate'
+  | 'adjust'
+  | 'alert-diamond'
+  | '3d-environment'
+  | 'app-extension'
+  | 'x-circle'
+  | 'x'
+  | 'view'
+  | 'variant'
+  | 'star'
+  | 'sort'
+  | 'select'
+  | 'phone'
+  | 'product'
+  | 'person'
+  | 'page'
+  | 'plus'
+  | 'order-unfulfilled'
+  | 'order-fulfilled'
+  | 'plus-circle'
+  | 'mobile'
+  | 'microphone'
+  | 'minus'
+  | 'merge'
+  | 'minus-circle'
+  | 'order'
+  | 'lightbulb'
+  | 'location'
+  | 'info'
+  | 'incomplete'
+  | 'language'
+  | 'globe'
+  | 'in-progress'
+  | 'hide'
+  | 'external'
+  | 'enabled'
+  | 'edit'
+  | 'email'
+  | 'delivery'
+  | 'disabled'
+  | 'check'
+  | 'chevron-up'
+  | 'check-circle'
+  | 'chevron-down'
+  | 'collection'
+  | 'calendar-check'
+  | 'calendar'
+  | 'blank'
+  | 'arrow-up-right'
+  | 'attachment'
+  | 'alert-circle'
+  | 'alert-triangle'
+  | 'alert-bubble'
+  | 'archive'
+  | 'apps'
+  | 'payment'
+  | 'clock';
+interface VNode<P = {}> {
+  type: ComponentType<P> | string;
+  props: P & {
+    children: ComponentChildren$1;
+  };
+  key: Key;
+  /**
+   * ref is not guaranteed by React.ReactElement, for compatibility reasons
+   * with popular react libs we define it as optional too
+   */
+  ref?: Ref<any> | null;
+  /**
+   * The time this `vnode` started rendering. Will only be set when
+   * the devtools are attached.
+   * Default value: `0`
+   */
+  startTime?: number;
+  /**
+   * The time that the rendering of this `vnode` was completed. Will only be
+   * set when the devtools are attached.
+   * Default value: `-1`
+   */
+  endTime?: number;
+}
+type Key = string | number | any;
+interface RefObject<T> {
+  current: T | null;
+}
+type RefCallback<T> = (instance: T | null) => void;
+type Ref<T> = RefObject<T> | RefCallback<T> | null;
+export type ComponentChild =
+  | VNode<any>
+  | object
+  | string
+  | number
+  | bigint
+  | boolean
+  | null
+  | undefined;
+type ComponentChildren$1 = ComponentChild[] | ComponentChild;
+interface Attributes {
+  key?: Key | undefined;
+  jsx?: boolean | undefined;
+}
+interface ErrorInfo {
+  componentStack?: string;
+}
+type RenderableProps<P, RefType = any> = P &
+  Readonly<
+    Attributes & {
+      children?: ComponentChildren$1;
+      ref?: Ref<RefType>;
+    }
+  >;
+type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
+interface FunctionComponent<P = {}> {
+  (props: RenderableProps<P>, context?: any): VNode<any> | null;
+  displayName?: string;
+  defaultProps?: Partial<P> | undefined;
+}
+interface ComponentClass<P = {}, S = {}> {
+  new (props: P, context?: any): Component<P, S>;
+  displayName?: string;
+  defaultProps?: Partial<P>;
+  contextType?: Context<any>;
+  getDerivedStateFromProps?(
+    props: Readonly<P>,
+    state: Readonly<S>,
+  ): Partial<S> | null;
+  getDerivedStateFromError?(error: any): Partial<S> | null;
+}
+interface Component<P = {}, S = {}> {
+  componentWillMount?(): void;
+  componentDidMount?(): void;
+  componentWillUnmount?(): void;
+  getChildContext?(): object;
+  componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+  shouldComponentUpdate?(
+    nextProps: Readonly<P>,
+    nextState: Readonly<S>,
+    nextContext: any,
+  ): boolean;
+  componentWillUpdate?(
+    nextProps: Readonly<P>,
+    nextState: Readonly<S>,
+    nextContext: any,
+  ): void;
+  getSnapshotBeforeUpdate?(oldProps: Readonly<P>, oldState: Readonly<S>): any;
+  componentDidUpdate?(
+    previousProps: Readonly<P>,
+    previousState: Readonly<S>,
+    snapshot: any,
+  ): void;
+  componentDidCatch?(error: any, errorInfo: ErrorInfo): void;
+}
+declare abstract class Component<P, S> {
+  constructor(props?: P, context?: any);
+  static displayName?: string;
+  static defaultProps?: any;
+  static contextType?: Context<any>;
+  // Static members cannot reference class type parameters. This is not
+  // supported in TypeScript. Reusing the same type arguments from `Component`
+  // will lead to an impossible state where one cannot satisfy the type
+  // constraint under no circumstances, see #1356.In general type arguments
+  // seem to be a bit buggy and not supported well at the time of this
+  // writing with TS 3.3.3333.
+  static getDerivedStateFromProps?(
+    props: Readonly<object>,
+    state: Readonly<object>,
+  ): object | null;
+
+  static getDerivedStateFromError?(error: any): object | null;
+  state: Readonly<S>;
+  props: RenderableProps<P>;
+  context: any;
+  base?: Element | Text;
+  // From https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e836acc75a78cf0655b5dfdbe81d69fdd4d8a252/types/react/index.d.ts#L402
+  // // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
+  // // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
+  setState<K extends keyof S>(
+    state:
+      | ((
+          prevState: Readonly<S>,
+          props: Readonly<P>,
+        ) => Pick<S, K> | Partial<S> | null)
+      | (Pick<S, K> | Partial<S> | null),
+    callback?: () => void,
+  ): void;
+
+  forceUpdate(callback?: () => void): void;
+  abstract render(
+    props?: RenderableProps<P>,
+    state?: Readonly<S>,
+    context?: any,
+  ): ComponentChild;
+}
+interface Consumer<T>
+  extends FunctionComponent<{
+    children: (value: T) => ComponentChildren$1;
+  }> {}
+interface Provider<T>
+  extends FunctionComponent<{
+    value: T;
+    children?: ComponentChildren$1;
+  }> {}
+interface Context<T> {
+  Consumer: Consumer<T>;
+  Provider: Provider<T>;
+  displayName?: string;
+}
+
+export 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'>;
+}
+
+export 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 const tagName$l = 'shopify-badge';
+export interface ReactProps$g
+  extends Partial<BadgeProps$1>,
+    Pick<BadgeProps$2, 'id'> {}
+
+export type Style = string | CSSStyleSheet;
+export type Styles = Style[] | Style;
+export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
+  ShadowRoot: (element: any) => ComponentChild;
+  styles?: Styles;
+};
+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.
+ * 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();
+  /** @private */
+  attributeChangedCallback(name: string): void;
+  /** @private */
+  connectedCallback(): void;
+  /** @private */
+  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.
+   * @private
+   */
+  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.
+   * @private
+   * @param options
+   */
+  click({sourceEvent}?: ClickOptions): void;
+}
+
+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'];
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$l]: React.HTMLAttributes<HTMLElement> & ReactProps$g;
+    }
+  }
+}
+
+export type BadgeProps = ReactProps$g;
+
+export type MakeResponsive<T> = T | `@media${string}`;
+
+export type AlignedBox = Required<BoxProps$2>;
+export 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']>;
+  border: AlignedBox['border'] | 'none';
+  borderWidth: MaybeAllValuesShorthandProperty<
+    Extract<
+      AlignedBox['borderWidth'],
+      | 'small-100'
+      | 'small'
+      | 'base'
+      | 'large'
+      | 'large-100'
+      | 'large-200'
+      | 'none'
+      | ''
+    >
+  >;
+  borderStyle: MaybeAllValuesShorthandProperty<
+    Extract<AlignedBox['borderStyle'], 'none' | 'solid' | 'dashed' | ''>
+  >;
+  borderColor: Extract<
+    AlignedBox['borderColor'],
+    'subdued' | 'base' | 'strong' | ''
+  >;
+  borderRadius: MaybeAllValuesShorthandProperty<
+    Extract<
+      AlignedBox['borderRadius'],
+      | 'none'
+      | 'small-200'
+      | 'small-100'
+      | 'small'
+      | 'base'
+      | 'large'
+      | 'large-100'
+      | 'large-200'
+    >
+  >;
+  accessibilityLabel: AlignedBox['accessibilityLabel'];
+  accessibilityVisibility: AlignedBox['accessibilityVisibility'];
+  display: AlignedBox['display'];
+}
+
+declare const tagName$k = 'shopify-box';
+export interface ReactProps$f
+  extends Partial<BoxProps$1>,
+    Pick<BoxProps$2, 'id'> {}
+
+declare class BoxElement extends PreactCustomElement implements BoxProps$1 {
+  constructor();
+  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 border: BoxProps$1['border'];
+  accessor borderWidth: BoxProps$1['borderWidth'];
+  accessor borderStyle: BoxProps$1['borderStyle'];
+  accessor borderColor: BoxProps$1['borderColor'];
+  accessor borderRadius: BoxProps$1['borderRadius'];
+  accessor accessibilityLabel: BoxProps$1['accessibilityLabel'];
+  accessor accessibilityVisibility: BoxProps$1['accessibilityVisibility'];
+  accessor display: BoxProps$1['display'];
+}
+
+declare class Box extends BoxElement implements BoxProps$1 {
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$k]: React.HTMLAttributes<HTMLElement> & ReactProps$f;
+    }
+  }
+}
+
+export type BoxProps = ReactProps$f;
+
+export type ButtonOnlyProps = Extract<
+  ButtonProps$2,
+  {
+    type?: unknown;
+  }
+>;
+export type ButtonBaseProps = Required<
+  Pick<
+    ButtonOnlyProps,
+    | 'accessibilityLabel'
+    | 'disabled'
+    | 'activateAction'
+    | 'activateTarget'
+    | 'lang'
+    | 'loading'
+    | 'type'
+    | 'variant'
+    | 'target'
+    | 'href'
+    | 'download'
+  >
+>;
+export interface ButtonProps$1 extends ButtonBaseProps {
+  tone: Extract<ButtonProps$2['tone'], 'neutral' | 'critical' | 'auto'>;
+  icon: IconProps$1['type'];
+}
+
+declare const tagName$j = 'shopify-button';
+export interface ReactProps$e
+  extends Partial<ButtonProps$1>,
+    Pick<ButtonProps$2, 'onClick' | 'onFocus' | 'onBlur' | 'id'> {}
+
+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'];
+  constructor();
+}
+
+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'];
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$j]: React.HTMLAttributes<HTMLElement> & ReactProps$e;
+    }
+  }
+}
+
+export type ButtonProps = ReactProps$e;
+
+declare const internals: unique symbol;
+export type PreactInputProps = Required<
+  Pick<TextFieldProps, 'disabled' | 'id' | 'name' | 'value'>
+>;
+declare class PreactInputElement
+  extends PreactCustomElement
+  implements PreactInputProps
+{
+  static formAssociated: boolean;
+  /** @private */
+  [internals]: ElementInternals;
+  protected getDefaultValue(): string;
+  accessor onchange: EventListener | null;
+  accessor oninput: EventListener | null;
+  accessor disabled: PreactInputProps['disabled'];
+  accessor id: PreactInputProps['id'];
+  accessor name: PreactInputProps['name'];
+  get value(): PreactInputProps['value'];
+  set value(value: PreactInputProps['value']);
+  constructor();
+}
+
+export type CheckboxProps$1 = PreactInputProps &
+  Required<
+    Pick<
+      CheckboxProps$2,
+      | 'accessibilityLabel'
+      | 'checked'
+      | 'details'
+      | 'error'
+      | 'indeterminate'
+      | 'label'
+      | 'required'
+    >
+  >;
+
+declare const tagName$i = 'shopify-checkbox';
+export interface ReactProps$d
+  extends Partial<CheckboxProps$1>,
+    Pick<CheckboxProps$2, 'onChange' | 'onInput'> {}
+
+declare class Checkbox extends PreactInputElement implements CheckboxProps$1 {
+  get checked(): boolean;
+  set checked(checked: CheckboxProps$1['checked']);
+  get value(): string;
+  set value(value: string);
+  accessor accessibilityLabel: CheckboxProps$1['accessibilityLabel'];
+  accessor details: CheckboxProps$1['details'];
+  accessor error: CheckboxProps$1['error'];
+  accessor indeterminate: CheckboxProps$1['indeterminate'];
+  accessor label: CheckboxProps$1['label'];
+  accessor required: CheckboxProps$1['required'];
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$i]: React.HTMLAttributes<HTMLElement> & ReactProps$d;
+    }
+  }
+}
+
+export type CheckboxProps = ReactProps$d;
+
+export interface DividerProps$1 {
+  direction: Extract<DividerProps$2['direction'], 'inline' | 'block'>;
+  color: Extract<DividerProps$2['color'], 'subdued' | 'base' | 'strong'>;
+}
+
+declare const tagName$h = 'shopify-divider';
+export interface ReactProps$c
+  extends Partial<DividerProps$1>,
+    Pick<DividerProps$2, 'id'> {}
+
+declare class Divider extends PreactCustomElement implements DividerProps$1 {
+  accessor direction: DividerProps$1['direction'];
+  accessor color: DividerProps$1['color'];
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$h]: React.HTMLAttributes<HTMLElement> & ReactProps$c;
+    }
+  }
+}
+
+export type DividerProps = ReactProps$c;
+
+export type RequiredHeadingProps = Required<HeadingProps$2>;
+export interface HeadingProps$1 {
+  accessibilityRole: RequiredHeadingProps['accessibilityRole'];
+  accessibilityVisibility: RequiredHeadingProps['accessibilityVisibility'];
+  lineClamp: RequiredHeadingProps['lineClamp'];
+}
+
+declare const tagName$g = 'shopify-heading';
+export interface ReactProps$b
+  extends Partial<HeadingProps$1>,
+    Pick<HeadingProps$2, 'id'> {}
+
+declare class Heading extends PreactCustomElement implements HeadingProps$1 {
+  accessor accessibilityRole: HeadingProps$1['accessibilityRole'];
+  accessor lineClamp: HeadingProps$1['lineClamp'];
+  accessor accessibilityVisibility: HeadingProps$1['accessibilityVisibility'];
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$g]: React.HTMLAttributes<HTMLElement> & ReactProps$b;
+    }
+  }
+}
+
+export type HeadingProps = ReactProps$b;
+
+declare const tagName$f = 'shopify-icon';
+export interface ReactProps$a
+  extends Partial<IconProps$1>,
+    Pick<IconProps$2, 'id'> {}
+
+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'];
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$f]: React.HTMLAttributes<HTMLElement> & ReactProps$a;
+    }
+  }
+}
+
+export type IconProps = ReactProps$a;
+
+export 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']>;
+  srcSet: NonNullable<ImageProps$2['srcSet']>;
+  sizes: NonNullable<ImageProps$2['sizes']>;
+  inlineSize: NonNullable<ImageProps$2['inlineSize']>;
+  aspectRatio: string;
+}
+
+declare const tagName$e = 'shopify-image';
+export interface ReactProps$9
+  extends Partial<ImageProps$1>,
+    Pick<ImageProps$2, 'onError' | 'onLoad' | 'id'> {}
+
+declare class Image extends PreactCustomElement implements ImageProps$1 {
+  accessor src: ImageProps$1['src'];
+  accessor srcSet: ImageProps$1['srcSet'];
+  accessor sizes: ImageProps$1['sizes'];
+  accessor alt: ImageProps$1['alt'];
+  accessor aspectRatio: ImageProps$1['aspectRatio'];
+  accessor loading: ImageProps$1['loading'];
+  accessor accessibilityRole: ImageProps$1['accessibilityRole'];
+  accessor inlineSize: ImageProps$1['inlineSize'];
+  accessor onload: EventListener | null;
+  accessor onerror: OnErrorEventHandler;
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$e]: React.HTMLAttributes<HTMLElement> & ReactProps$9;
+    }
+  }
+}
+
+export type ImageProps = ReactProps$9;
+
+export type RequiredLinkProps = Required<LinkProps$2>;
+export interface LinkProps$1 {
+  tone: Extract<RequiredLinkProps['tone'], 'auto' | 'neutral' | 'critical'>;
+  accessibilityLabel: RequiredLinkProps['accessibilityLabel'];
+  href: RequiredLinkProps['href'];
+  target: RequiredLinkProps['target'];
+}
+
+declare const tagName$d = 'shopify-link';
+export interface ReactProps$8
+  extends Partial<LinkProps$1>,
+    Pick<LinkProps$2, 'onClick' | 'id' | 'lang'> {}
+
+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'];
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$d]: React.HTMLAttributes<HTMLElement> & ReactProps$8;
+    }
+  }
+}
+
+export type LinkProps = ReactProps$8;
+
+declare const tagName$c = 'shopify-option';
+export interface ReactProps$7 extends Partial<SharedProps$2> {}
+
+export interface SharedProps$2
+  extends Required<Pick<OptionProps$1, 'disabled' | 'value'>> {}
+declare class Option extends PreactCustomElement implements SharedProps$2 {
+  accessor value: SharedProps$2['value'];
+  accessor disabled: SharedProps$2['disabled'];
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$c]: React.HTMLAttributes<HTMLElement> & ReactProps$7;
+    }
+  }
+}
+
+export type OptionProps = ReactProps$7;
+
+declare const tagName$b = 'shopify-option-group';
+export interface ReactProps$6 extends Partial<SharedProps$1> {}
+
+export interface SharedProps$1
+  extends Required<Pick<OptionGroupProps$1, 'disabled' | 'label'>> {}
+declare class OptionGroup extends PreactCustomElement implements SharedProps$1 {
+  accessor disabled: SharedProps$1['disabled'];
+  accessor label: SharedProps$1['label'];
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$b]: React.HTMLAttributes<HTMLElement> & ReactProps$6;
+    }
+  }
+}
+
+export type OptionGroupProps = ReactProps$6;
+
+export interface ParagraphProps$1
+  extends Required<
+    Pick<
+      ParagraphProps$2,
+      'lineClamp' | 'accessibilityVisibility' | 'fontVariantNumeric' | 'tone'
+    >
+  > {
+  color: Extract<ParagraphProps$2['color'], 'base' | 'subdued'>;
+}
+
+declare const tagName$a = 'shopify-paragraph';
+export interface ReactProps$5
+  extends Partial<ParagraphProps$1>,
+    Pick<ParagraphProps$2, 'id'> {}
+
+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'];
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$a]: React.HTMLAttributes<HTMLElement> & ReactProps$5;
+    }
+  }
+}
+
+export type ParagraphProps = ReactProps$5;
+
+export type RequiredSectionProps = Required<SectionProps$2>;
+export interface SectionProps$1 {
+  accessibilityLabel: RequiredSectionProps['accessibilityLabel'];
+  heading: RequiredSectionProps['heading'];
+  padding: RequiredSectionProps['padding'];
+}
+
+declare const tagName$9 = 'shopify-section';
+export interface ReactProps$4
+  extends Partial<SectionProps$1>,
+    Pick<SectionProps$2, 'id'> {}
+
+declare class Section extends PreactCustomElement implements SectionProps$1 {
+  constructor();
+  /** @private */
+  connectedCallback(): void;
+  accessor accessibilityLabel: SectionProps$1['accessibilityLabel'];
+  accessor heading: SectionProps$1['heading'];
+  accessor padding: SectionProps$1['padding'];
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$9]: React.HTMLAttributes<HTMLElement> & ReactProps$4;
+    }
+  }
+}
+
+export type SectionProps = ReactProps$4;
+
+export type FieldReactProps = Pick<
+  TextFieldProps,
+  'onChange' | 'onFocus' | 'onInput' | 'onBlur'
+>;
+
+declare const tagName$8 = 'shopify-select';
+export interface ReactProps$3 extends Partial<SharedProps & FieldReactProps> {}
+
+export type PreactFieldProps<Autocomplete extends string = string> =
+  PreactInputProps &
+    Required<
+      Pick<
+        TextFieldProps,
+        | 'defaultValue'
+        | 'details'
+        | 'error'
+        | 'label'
+        | 'placeholder'
+        | 'readOnly'
+        | 'required'
+      >
+    > & {
+      autocomplete: Autocomplete;
+    };
+declare class PreactFieldElement<Autocomplete extends string = string>
+  extends PreactInputElement
+  implements PreactFieldProps<Autocomplete>
+{
+  accessor onblur: EventListener | null;
+  accessor onfocus: EventListener | null;
+  accessor autocomplete: PreactFieldProps<Autocomplete>['autocomplete'];
+  accessor defaultValue: PreactFieldProps['defaultValue'];
+  accessor details: PreactFieldProps['details'];
+  accessor error: PreactFieldProps['error'];
+  accessor label: PreactFieldProps['label'];
+  accessor placeholder: PreactFieldProps['placeholder'];
+  accessor readOnly: PreactFieldProps['readOnly'];
+  accessor required: PreactFieldProps['required'];
+  protected getDefaultValue(): string;
+  constructor();
+}
+
+export interface SharedProps
+  extends Pick<
+    SelectProps$1,
+    | 'disabled'
+    | 'error'
+    | 'label'
+    | 'name'
+    | 'placeholder'
+    | 'required'
+    | 'value'
+  > {}
+declare class Select extends PreactFieldElement implements SharedProps {
+  /** @private */
+  connectedCallback(): void;
+  /** @private */
+  disconnectedCallback(): void;
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$8]: React.HTMLAttributes<HTMLElement> & ReactProps$3;
+    }
+  }
+}
+
+export type SelectProps = ReactProps$3;
+
+export 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 const tagName$7 = 'shopify-spinner';
+export interface ReactProps$2
+  extends Partial<SpinnerProps$1>,
+    Pick<SpinnerProps$2, 'id'> {}
+
+declare class Spinner extends PreactCustomElement implements SpinnerProps$1 {
+  accessor accessibilityLabel: string;
+  accessor size: SpinnerProps$1['size'];
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$7]: React.HTMLAttributes<HTMLElement> & ReactProps$2;
+    }
+  }
+}
+
+export type SpinnerProps = ReactProps$2;
+
+export type AlignedStackProps = Required<StackProps$2>;
+export 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$6 = 'shopify-stack';
+export interface ReactProps$1
+  extends Partial<StackProps$1>,
+    Pick<StackProps$2, 'id'> {}
+
+declare class Stack 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 module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$6]: React.HTMLAttributes<HTMLElement> & ReactProps$1;
+    }
+  }
+}
+
+export type StackProps = ReactProps$1;
+
+export 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'
+  >;
+  tone: Extract<
+    TextProps$2['tone'],
+    'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'caution'
+  >;
+  fontVariantNumeric: Extract<
+    TextProps$2['fontVariantNumeric'],
+    'auto' | 'normal' | 'tabular-nums'
+  >;
+}
+
+declare const tagName$5 = 'shopify-text';
+export interface ReactProps
+  extends Partial<TextProps$1>,
+    Pick<TextProps$2, 'id'> {}
+
+declare class Text 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 module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$5]: React.HTMLAttributes<HTMLElement> & ReactProps;
+    }
+  }
+}
+
+export type TextProps = ReactProps;
+
+declare const tagName$4 = 'shopify-admin-action';
+export interface AdminActionProps$1 {
+  /**
+   * 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 loading state of the action modal
+   */
+  loading?: boolean;
+}
+declare class AdminAction
+  extends PreactCustomElement
+  implements AdminActionProps$1
+{
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$4]: React.HTMLAttributes<HTMLElement> & AdminActionProps$1;
+    }
+  }
+}
+
+export interface AdminActionProps extends Partial<AdminActionProps$1> {
+  /**
+   * Sets the Primary action button of the container. This component must be a button component.
+   */
+  primaryAction?: React.ReactNode;
+  /**
+   * Sets the Secondary action button of the container. This component must be a button component.
+   */
+  secondaryAction?: React.ReactNode;
+}
+
+declare const tagName$3 = 'shopify-admin-block';
+export interface AdminBlockProps$1 {
+  /**
+   * 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.
+   */
+  collapsedSummary: string;
+}
+declare class AdminBlock
+  extends PreactCustomElement
+  implements AdminBlockProps$1
+{
+  constructor();
+  title: string;
+  collapsedSummary: string;
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$3]: React.HTMLAttributes<HTMLElement> & AdminBlockProps$1;
+    }
+  }
+}
+
+export interface AdminBlockProps extends Partial<AdminBlockProps$1> {}
+
+declare const tagName$2 = 'shopify-admin-print-action';
+export interface AdminPrintActionProps$1 {
+  /**
+   * 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;
+}
+declare class AdminPrintAction
+  extends PreactCustomElement
+  implements AdminPrintActionProps$1
+{
+  src: string;
+  constructor();
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$2]: React.HTMLAttributes<HTMLElement> & AdminPrintActionProps$1;
+    }
+  }
+}
+
+export interface AdminPrintActionProps
+  extends Partial<AdminPrintActionProps$1> {}
+
+declare const tagName$1 = 'shopify-customer-segment-template';
+/**
+ * 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
+ */
+export type CustomerStandardMetafieldDependency = 'facts.birth_date';
+export interface CustomerSegmentTemplateProps$1 {
+  /**
+   * 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;
+}
+declare class CustomerSegmentTemplate
+  extends PreactCustomElement
+  implements CustomerSegmentTemplateProps$1
+{
+  constructor();
+  description: string | string[];
+  query: string;
+  queryToInsert: string;
+  createdOn: string;
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName$1]: React.HTMLAttributes<HTMLElement> &
+        CustomerSegmentTemplateProps$1;
+    }
+  }
+}
+
+export interface CustomerSegmentTemplateProps
+  extends Partial<CustomerSegmentTemplateProps$1> {}
+
+declare const tagName = 'shopify-function-settings';
+export interface FunctionSettingsProps$1 {
+  /**
+   * A unique identifier for the form.
+   */
+  id?: string;
+}
+declare class FunctionSettings
+  extends PreactCustomElement
+  implements FunctionSettingsProps$1
+{
+  constructor();
+  accessor onsave: EventListener | null;
+  accessor onerror: OnErrorEventHandler;
+}
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: React.HTMLAttributes<HTMLElement> & FunctionSettingsProps$1;
+    }
+  }
+}
+
+export interface FunctionSettingsProps
+  extends Partial<FunctionSettingsProps$1> {
+  /**
+   * 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-react/src/surfaces/customer-account/hooks/live-navigation.ts b/packages/ui-extensions-react/src/surfaces/customer-account/hooks/live-navigation.ts
index bedd66938..9f1c6a551 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/docs/surfaces/admin/build-docs.sh b/packages/ui-extensions/docs/surfaces/admin/build-docs.sh
index e696e43ba..0245bcb1c 100755
--- a/packages/ui-extensions/docs/surfaces/admin/build-docs.sh
+++ b/packages/ui-extensions/docs/surfaces/admin/build-docs.sh
@@ -3,6 +3,8 @@
 API_VERSION=$1
 DOCS_PATH=docs/surfaces/admin
 SRC_PATH=src/surfaces/admin
+COMPONENTS_DEFINITIONS=src/surfaces/admin/components.d.ts
+COMPONENTS_TS=src/surfaces/admin/components.ts
 SHOPIFY_DEV_PATH="../../../shopify-dev"
 
 fail_and_exit() {
@@ -38,11 +40,18 @@ fi
 COMPILE_DOCS="yarn tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node  --target esNext  --module CommonJS && yarn generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH ../ui-extensions-react/$SRC_PATH --output ./$DOCS_PATH/generated"
 COMPILE_STATIC_PAGES="yarn tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node  --target esNext  --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated"
 
+# Rename components.d.ts to components.ts so it can be picked up be the compiler
+cp $COMPONENTS_DEFINITIONS $COMPONENTS_TS
+# Remove references to HTMLElement
+run_sed "s/typeof globalThis.HTMLElement/any/" $COMPONENTS_TS
+
 eval $COMPILE_DOCS && eval $COMPILE_STATIC_PAGES
 build_exit=$?
 
 # Remove .doc.js files
 find ./ -name '*.doc*.js' -exec rm -r {} \;
+# Remove components.ts as it's no longer needed
+rm $COMPONENTS_TS
 
 if [ $build_exit -ne 0 ]; then
   fail_and_exit $build_exit
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 bd2cc105e..bdd0fd4a5 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',
@@ -94,16 +94,16 @@ const data: ReferenceEntityTemplateSchema = {
     codeblock: {
       title: 'TODO: add example title',
       tabs: [
-        {
-          title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/${componentName}/examples/basic-${componentName}.example.tsx',
-          language: 'tsx',
-        },
         {
           title: 'JS',
-          code: './examples/basic-${componentName}.example.ts',
+          code: './examples/basic-${lowercaseComponentName}.example.ts',
           language: 'js',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/${componentName}/examples/basic-${lowercaseComponentName}.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
diff --git a/packages/ui-extensions/loom.config.ts b/packages/ui-extensions/loom.config.ts
index 49eced95f..ad01e770f 100644
--- a/packages/ui-extensions/loom.config.ts
+++ b/packages/ui-extensions/loom.config.ts
@@ -1,6 +1,6 @@
 import {createPackage} from '@shopify/loom';
-import {readFileSync} from 'fs';
-import {resolve} from 'path';
+import {existsSync, readFileSync, writeFileSync} from 'fs';
+import {join, resolve} from 'path';
 
 import {defaultProjectPlugin} from '../../config/loom';
 import {rollupPlugins} from '@shopify/loom-plugin-build-library';
@@ -28,6 +28,27 @@ export default createPackage((pkg) => {
         },
         preventAssignment: true,
       }),
+      {
+        name: 'add-components-types',
+        closeBundle: async () => {
+          const mainTypesPath = join(__dirname, 'build/ts/surfaces/admin.d.ts');
+          const componentsTypes = join(
+            __dirname,
+            'src/surfaces/admin/components.d.ts',
+          );
+          if (existsSync(mainTypesPath) && existsSync(componentsTypes)) {
+            const mainTypesContent = readFileSync(mainTypesPath).toString();
+            const componentsTypesContent = readFileSync(componentsTypes)
+              .toString()
+              .replaceAll(/\/\*.*$/g, '');
+
+            writeFileSync(
+              mainTypesPath,
+              componentsTypesContent.concat(mainTypesContent),
+            );
+          }
+        },
+      },
     ]),
   );
 });
diff --git a/packages/ui-extensions/src/surfaces/admin.ts b/packages/ui-extensions/src/surfaces/admin.ts
index 9e6859777..515707768 100644
--- a/packages/ui-extensions/src/surfaces/admin.ts
+++ b/packages/ui-extensions/src/surfaces/admin.ts
@@ -1,6 +1,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.d.ts b/packages/ui-extensions/src/surfaces/admin/components.d.ts
new file mode 100644
index 000000000..3e435a9fd
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components.d.ts
@@ -0,0 +1,3591 @@
+/** VERSION: 0.25.0 **/
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+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';
+type ColorKeyword = 'subdued' | 'base' | 'strong';
+interface GlobalProps {
+  /**
+   * A unique identifier for the element.
+   */
+  id?: string;
+}
+type BackgroundColorKeyword = 'transparent' | ColorKeyword;
+interface BackgroundProps {
+  /**
+   * Adjust the background of the element.
+   *
+   * @default: 'transparent'
+   */
+  background?: BackgroundColorKeyword;
+}
+type ToneKeyword =
+  | 'auto'
+  | 'neutral'
+  | 'info'
+  | 'success'
+  | 'caution'
+  | 'warning'
+  | 'critical';
+type ComponentChildren = any;
+type IconType =
+  | '3d-environment'
+  | '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-revert'
+  | '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'
+  | 'dashed-circle'
+  | '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'
+  | 'download'
+  | 'drag-drop'
+  | 'drag-handle'
+  | 'duplicate'
+  | 'edit'
+  | 'email-follow-up'
+  | 'email-newsletter'
+  | 'email'
+  | 'empty'
+  | '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'
+  | 'foreground'
+  | 'forklift'
+  | 'forms'
+  | 'games'
+  | 'gauge'
+  | 'geolocation'
+  | 'gift-card'
+  | 'gift'
+  | 'git-branch'
+  | 'git-commit'
+  | 'git-repository'
+  | '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'
+  | 'receivables'
+  | 'redo'
+  | 'referral-code'
+  | 'refresh'
+  | 'remove-background'
+  | 'reorder'
+  | 'replace'
+  | 'replay'
+  | 'reset'
+  | 'return'
+  | 'reward'
+  | 'rocket'
+  | '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';
+interface BadgeProps$1 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.
+   *
+   * @default ''
+   */
+  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;
+}
+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}`;
+type MaybeTwoValuesShorthandProperty<T extends string> = T | `${T} ${T}`;
+type AnyString = string & {};
+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';
+}
+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;
+}
+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';
+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';
+}
+type PaddingKeyword = SizeKeyword | 'none';
+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 | '';
+}
+type SizeUnits = `${number}px` | `${number}%` | `0`;
+type SizeUnitsOrAuto = SizeUnits | 'auto';
+type SizeUnitsOrNone = SizeUnits | 'none';
+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;
+}
+type BorderStyleKeyword = 'none' | 'solid' | 'dashed' | 'dotted' | 'auto';
+type BorderSizeKeyword = SizeKeyword | 'none';
+type BorderRadiusKeyword = SizeKeyword | 'none';
+type BorderShorthand =
+  | BorderSizeKeyword
+  | `${BorderSizeKeyword} ${ColorKeyword}`
+  | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`;
+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<BorderSizeKeyword> | '';
+  /**
+   * 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>;
+}
+interface OverflowProps {
+  /**
+   * Sets the overflow behavior of the element.
+   *
+   * `hidden`: clips the content when it is larger than the element’s container.
+   * The element will not be scrollable and the users will not be able
+   * to access the clipped content by dragging or using a scroll wheel on a mouse.
+   *
+   * `visible`: the content that extends beyond the element’s container is visible.
+   *
+   * @default 'visible'
+   */
+  overflow?: 'hidden' | 'visible';
+}
+interface BaseBoxProps$1
+  extends GlobalProps,
+    AccessibilityVisibilityProps,
+    BackgroundProps,
+    DisplayProps,
+    SizingProps,
+    PaddingProps,
+    BorderProps,
+    OverflowProps {
+  /**
+   * 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;
+}
+interface BaseBoxProps$1WithRole
+  extends BaseBoxProps$1,
+    AccessibilityRoleProps {}
+interface BoxProps$1 extends BaseBoxProps$1WithRole {}
+interface FocusEventProps {
+  /**
+   * Callback when the element loses focus.
+   */
+  onBlur?: () => void;
+  /**
+   * Callback when the element receives focus.
+   */
+  onFocus?: () => void;
+}
+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;
+}
+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
+   *
+   * 'auto' - The target is automatically determined based on the origin of the URL. Surfaces can set specific rules on how they handle each URL.
+   * It’s expected that the behavior of `auto` is as `_self` except in specific cases.
+   * For example, a surface could decide to open cross-origin URLs in a new window (as `_blank`).
+   *
+   * @default 'auto'
+   */
+  target?: 'auto' | '_blank' | '_self' | '_parent' | '_top' | 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';
+}
+interface BasePressableProps extends ButtonBehaviorProps, LinkBehaviorProps {}
+interface ButtonProps$1 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.
+   *
+   * @default ''
+   */
+  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;
+}
+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;
+}
+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;
+}
+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;
+}
+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;
+}
+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;
+}
+interface FieldProps
+  extends BasicFieldProps,
+    InputProps,
+    FocusEventProps,
+    FieldDetailsProps {
+  /**
+   * A short hint that describes the expected value of the field.
+   */
+  placeholder?: string;
+}
+interface BaseTextFieldProps extends FieldProps {
+  /**
+   * The field cannot be edited by the user. It is focusable will be announced by screen readers.
+   */
+  readOnly?: boolean;
+}
+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.
+   *
+   * @default ''
+   */
+  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;
+}
+interface MinMaxLengthProps {
+  /**
+   * Specifies the maximum number of characters allowed.
+   */
+  maxLength?: number;
+  /**
+   * Specifies the min number of characters allowed.
+   */
+  minLength?: number;
+}
+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;
+}
+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;
+}
+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;
+}
+interface CheckboxProps$1 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;
+}
+interface AutocompleteProps<AutocompleteField extends AnyAutocompleteField> {
+  /**
+   * A hint as to the intended content of the field.
+   *
+   * When set to `on` (the default), 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 `off`, 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.
+   *
+   * @default 'on'
+   */
+  autocomplete?:
+    | AutocompleteField
+    | `${AutocompleteSection} ${AutocompleteField}`
+    | `${AutocompleteGroup} ${AutocompleteField}`
+    | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}`
+    | 'on'
+    | 'off';
+}
+type AutocompleteSection = `section-${string}`;
+type AutocompleteGroup = 'shipping' | 'billing';
+type AutocompleteAddressGroup = 'fax' | 'home' | 'mobile' | 'pager';
+type AutocompleteFieldTelephoneAlias = 'tel' | 'telephone';
+type AutocompleteFieldBirthdayAlias = 'bday' | 'birthday';
+type AutocompleteFieldCreditCardAlias = 'cc' | 'credit-card';
+type AutocompleteFieldInstantMessageAlias = 'impp' | 'instant-message';
+type AutocompleteFieldSecurityCodeAlias = 'csc' | 'security-code';
+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`;
+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`
+>;
+interface DividerProps$1 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;
+}
+type SpacingKeyword = SizeKeyword | 'none';
+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 | '';
+}
+type BaselinePosition = 'baseline' | 'first baseline' | 'last baseline';
+type ContentDistribution =
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+  | 'stretch';
+type ContentPosition = 'center' | 'start' | 'end';
+type OverflowPosition = `unsafe ${ContentPosition}` | `safe ${ContentPosition}`;
+type AlignItemsKeyword =
+  | 'normal'
+  | 'stretch'
+  | BaselinePosition
+  | OverflowPosition
+  | ContentPosition;
+type JustifyContentKeyword =
+  | 'normal'
+  | ContentDistribution
+  | OverflowPosition
+  | ContentPosition;
+type AlignContentKeyword =
+  | 'normal'
+  | BaselinePosition
+  | ContentDistribution
+  | OverflowPosition
+  | ContentPosition;
+interface HeadingProps$1 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';
+}
+interface IconProps$1 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;
+}
+interface BaseImageProps$1 {
+  /**
+   * 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;
+}
+type optionalSpace = '' | ' ';
+interface ImageProps$1 extends GlobalProps, BaseImageProps$1 {
+  /**
+   * 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.
+   *
+   * Getters for this value should return `auto` or the ratio in `number / number` form. Input fractions should not be 'simplified'.
+   * For example, if the value is set as `50 /    100`, the getter returns `50 / 100`.
+   * If the value is set as `0.5`, the getter returns `0.5 / 1`.
+   *
+   * @default 'auto'
+   */
+  aspectRatio?:
+    | `${number}${optionalSpace}/${optionalSpace}${number}`
+    | `${number}`
+    | 'auto';
+  /**
+   * 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;
+}
+interface LinkProps$1 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 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;
+}
+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';
+  /**
+   * 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)
+   *
+   * @default ''
+   */
+  lang?: string;
+}
+interface ParagraphProps$1
+  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';
+}
+interface SectionProps$1 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;
+}
+interface SpinnerProps$1 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;
+}
+interface StackProps$1 extends BaseBoxProps$1WithRole, 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;
+}
+interface TextProps$1
+  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;
+}
+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 =
+  | 'watch'
+  | 'wrench'
+  | 'wallet'
+  | 'wand'
+  | 'viewport-short'
+  | 'work'
+  | 'upload'
+  | 'viewport-tall'
+  | 'transfer'
+  | 'unlock'
+  | 'unknown-device'
+  | 'transfer-out'
+  | 'transfer-in'
+  | 'undo'
+  | 'wifi'
+  | 'transaction-fee-rupee'
+  | 'transaction-fee-pound'
+  | 'transaction-fee-euro'
+  | 'transaction'
+  | 'transfer-internal'
+  | 'transaction-fee-yen'
+  | 'toggle-off'
+  | 'toggle-on'
+  | 'viewport-wide'
+  | 'tip-jar'
+  | 'thumbs-down'
+  | 'theme'
+  | 'theme-template'
+  | 'thumbs-up'
+  | 'theme-edit'
+  | 'text-title'
+  | 'text-quote'
+  | 'theme-store'
+  | 'text'
+  | 'viewport-narrow'
+  | 'text-with-image'
+  | 'text-in-rows'
+  | 'text-italic'
+  | 'text-underline'
+  | 'text-color'
+  | 'text-in-columns'
+  | 'text-indent'
+  | 'text-font-list'
+  | 'text-block'
+  | 'text-grammar'
+  | 'text-align-center'
+  | 'text-align-right'
+  | 'text-align-left'
+  | 'team'
+  | 'target'
+  | 'transaction-fee-dollar'
+  | 'tax'
+  | 'tablet'
+  | 'sun'
+  | 'store'
+  | 'stop-circle'
+  | 'store-import'
+  | 'store-online'
+  | 'store-managed'
+  | 'status'
+  | 'status-active'
+  | 'text-font'
+  | 'star-filled'
+  | 'sports'
+  | 'sound'
+  | 'sort-descending'
+  | 'sort-ascending'
+  | 'social-ad'
+  | 'social-post'
+  | 'smiley-sad'
+  | 'smiley-happy'
+  | 'slideshow'
+  | 'smiley-joy'
+  | 'shipping-label'
+  | 'shield-pending'
+  | 'shopcodes'
+  | 'shield-none'
+  | 'smiley-neutral'
+  | 'shield-person'
+  | 'share'
+  | 'shield-check-mark'
+  | 'search'
+  | 'settings'
+  | 'send'
+  | 'search-recent'
+  | 'text-bold'
+  | 'search-list'
+  | 'save'
+  | 'rocket'
+  | 'rotate-right'
+  | 'rotate-left'
+  | 'sandbox'
+  | 'return'
+  | 'reset'
+  | 'replace'
+  | 'reward'
+  | 'replay'
+  | 'search-resource'
+  | 'receivables'
+  | 'remove-background'
+  | 'receipt-yen'
+  | 'referral-code'
+  | 'receipt-rupee'
+  | 'receipt-refund'
+  | 'receipt-paid'
+  | 'receipt'
+  | 'receipt-euro'
+  | 'receipt-dollar'
+  | 'question-circle'
+  | 'receipt-pound'
+  | 'product-remove'
+  | 'product-list'
+  | 'product-add'
+  | 'product-cost'
+  | 'refresh'
+  | 'print'
+  | 'redo'
+  | 'point-of-sale'
+  | 'price-list'
+  | 'play'
+  | 'product-return'
+  | 'plan'
+  | 'profile'
+  | 'pin'
+  | 'phone-in'
+  | 'personalized-text'
+  | 'phone-out'
+  | 'payout'
+  | 'play-circle'
+  | 'person-exit'
+  | 'payout-rupee'
+  | 'person-remove'
+  | 'person-lock'
+  | 'person-segment'
+  | 'payout-yen'
+  | 'payment-capture'
+  | 'passkey'
+  | 'pause-circle'
+  | 'payout-pound'
+  | 'paper-check'
+  | 'paint-brush-round'
+  | 'product-reference'
+  | 'product-unavailable'
+  | 'payout-dollar'
+  | 'pagination-end'
+  | 'page-reference'
+  | 'page-up'
+  | 'page-down'
+  | 'page-attachment'
+  | 'pagination-start'
+  | 'page-heart'
+  | 'package'
+  | 'person-add'
+  | 'package-on-hold'
+  | 'organization'
+  | 'outdent'
+  | 'orders-status'
+  | 'page-clock'
+  | 'package-returned'
+  | 'note'
+  | 'order-repeat'
+  | 'notification'
+  | 'note-add'
+  | 'page-add'
+  | 'order-first'
+  | 'moon'
+  | 'nature'
+  | 'page-remove'
+  | 'order-draft'
+  | 'minimize'
+  | 'money-none'
+  | 'metaobject'
+  | 'metaobject-list'
+  | 'metaobject-reference'
+  | 'metafields'
+  | 'package-fulfilled'
+  | 'megaphone'
+  | 'menu-horizontal'
+  | 'menu'
+  | 'menu-vertical'
+  | 'media-receiver'
+  | 'measurement-size'
+  | 'measurement-weight'
+  | 'maximize'
+  | 'markets-yen'
+  | 'markets-rupee'
+  | 'markets'
+  | 'lock'
+  | 'measurement-volume'
+  | 'live'
+  | 'list-bulleted'
+  | 'link'
+  | 'list-numbered'
+  | 'layout-sidebar-right'
+  | 'layout-sidebar-left'
+  | 'layout-popup'
+  | 'layout-rows-2'
+  | 'layout-section'
+  | 'layout-logo-block'
+  | 'layout-columns-2'
+  | 'layout-footer'
+  | 'layout-columns-3'
+  | 'layout-header'
+  | 'layout-buy-button-horizontal'
+  | 'layout-buy-button'
+  | 'layout-column-1'
+  | 'layout-buy-button-vertical'
+  | 'label-printer'
+  | 'layout-block'
+  | 'language-translate'
+  | 'location-none'
+  | 'keyboard-hide'
+  | 'key'
+  | 'inventory-updated'
+  | 'iq'
+  | 'incoming'
+  | 'inventory'
+  | 'incentive'
+  | 'paint-brush-flat'
+  | 'import'
+  | 'image-none'
+  | 'image-with-text-overlay'
+  | 'images'
+  | 'image'
+  | 'image-explore'
+  | 'outgoing'
+  | 'image-magic'
+  | 'home'
+  | 'image-add'
+  | 'image-alt'
+  | 'hashtag'
+  | 'identity-card'
+  | 'heart'
+  | 'hashtag-decimal'
+  | 'icons'
+  | 'globe-europe'
+  | 'git-commit'
+  | 'globe-asia'
+  | 'games'
+  | 'git-branch'
+  | 'gift-card'
+  | 'gauge'
+  | 'forms'
+  | 'forklift'
+  | 'folder'
+  | 'mention'
+  | 'foreground'
+  | 'folder-down'
+  | 'git-repository'
+  | 'food'
+  | 'folder-add'
+  | 'folder-remove'
+  | 'flower'
+  | 'payout-euro'
+  | 'flip-vertical'
+  | 'flag'
+  | 'flip-horizontal'
+  | 'eyeglasses'
+  | 'file'
+  | 'folder-up'
+  | 'money'
+  | 'eye-dropper'
+  | 'export'
+  | 'eye-check-mark'
+  | 'exit'
+  | 'exchange'
+  | 'enter'
+  | 'envelope'
+  | 'filter'
+  | 'email-newsletter'
+  | 'email-follow-up'
+  | 'eye-first'
+  | 'drag-drop'
+  | 'drag-handle'
+  | 'domain'
+  | 'duplicate'
+  | 'domain-redirect'
+  | 'download'
+  | 'domain-landing-page'
+  | 'dns-settings'
+  | 'discount'
+  | 'discount-code'
+  | 'dock-floating'
+  | 'dock-side'
+  | 'keyboard'
+  | 'desktop'
+  | 'database-connect'
+  | 'delete'
+  | 'favicon'
+  | 'dashed-circle'
+  | 'data-table'
+  | 'data-presentation'
+  | 'database-add'
+  | 'currency-convert'
+  | 'cursor-option'
+  | 'cursor'
+  | 'cursor-banner'
+  | 'credit-card'
+  | 'envelope-soft-pack'
+  | 'credit-card-reader-tap'
+  | 'credit-card-tap-chip'
+  | 'crop'
+  | 'credit-card-reader-chip'
+  | 'markets-euro'
+  | 'domain-new'
+  | 'credit-card-secure'
+  | 'corner-round'
+  | 'credit-card-percent'
+  | 'credit-card-reader'
+  | 'database'
+  | 'corner-pill'
+  | 'credit-card-cancel'
+  | 'contract'
+  | 'compass'
+  | 'content'
+  | 'connect'
+  | 'color'
+  | 'compose'
+  | 'code'
+  | 'code-add'
+  | 'collection-reference'
+  | 'color-none'
+  | 'collection-featured'
+  | 'corner-square'
+  | 'clipboard'
+  | 'confetti'
+  | 'clipboard-checklist'
+  | 'circle'
+  | 'clipboard-check'
+  | 'chevron-up-circle'
+  | 'clock-revert'
+  | 'chevron-right-circle'
+  | 'chevron-left'
+  | 'chevron-left-circle'
+  | 'chevron-right'
+  | 'checkbox'
+  | 'chat-referral'
+  | 'chart-vertical'
+  | 'chat'
+  | 'chart-stacked'
+  | 'chart-popular'
+  | 'chart-horizontal'
+  | 'chevron-down-circle'
+  | 'chart-histogram-last'
+  | 'chart-histogram-flat'
+  | 'chart-histogram-first'
+  | 'chart-histogram-second-last'
+  | 'chart-histogram-full'
+  | 'chart-donut'
+  | 'chart-funnel'
+  | 'chart-line'
+  | 'chart-cohort'
+  | 'channels'
+  | 'cash-yen'
+  | 'categories'
+  | 'collection-list'
+  | 'chart-histogram-first-last'
+  | 'catalog-product'
+  | 'chart-histogram-growth'
+  | 'cash-pound'
+  | 'cash-dollar'
+  | 'cash-euro'
+  | 'cash-rupee'
+  | 'cart-up'
+  | 'cart-sale'
+  | 'cart-down'
+  | 'caret-down'
+  | 'cart-abandoned'
+  | 'camera-flip'
+  | 'cart-discount'
+  | 'button-press'
+  | 'calendar-time'
+  | 'calculator'
+  | 'bullet'
+  | 'caret-up'
+  | 'bug'
+  | 'button'
+  | 'blog'
+  | 'book'
+  | 'book-open'
+  | 'barcode'
+  | 'bank'
+  | 'bill'
+  | 'backspace'
+  | 'automation'
+  | 'arrow-up'
+  | 'arrows-out-horizontal'
+  | 'camera'
+  | 'arrow-down'
+  | 'arrow-left'
+  | 'arrow-up-circle'
+  | 'arrow-right-circle'
+  | 'arrow-down-circle'
+  | 'app-extension'
+  | 'alert-location'
+  | 'bag'
+  | 'airplane'
+  | 'alert-diamond'
+  | 'arrows-in-horizontal'
+  | 'adjust'
+  | 'arrow-right'
+  | 'affiliate'
+  | '3d-environment'
+  | 'cart'
+  | 'arrow-left-circle'
+  | 'x-circle'
+  | 'x'
+  | 'variant'
+  | 'view'
+  | 'star'
+  | 'sort'
+  | 'plus'
+  | 'phone'
+  | 'plus-circle'
+  | 'person'
+  | 'select'
+  | 'payment'
+  | 'page'
+  | 'order'
+  | 'order-unfulfilled'
+  | 'order-fulfilled'
+  | 'mobile'
+  | 'microphone'
+  | 'merge'
+  | 'location'
+  | 'minus'
+  | 'lightbulb'
+  | 'info'
+  | 'language'
+  | 'in-progress'
+  | 'incomplete'
+  | 'hide'
+  | 'globe'
+  | 'external'
+  | 'enabled'
+  | 'edit'
+  | 'email'
+  | 'disabled'
+  | 'delivery'
+  | 'minus-circle'
+  | 'collection'
+  | 'chevron-down'
+  | 'chevron-up'
+  | 'check'
+  | 'calendar'
+  | 'calendar-check'
+  | 'blank'
+  | 'arrow-up-right'
+  | 'check-circle'
+  | 'alert-triangle'
+  | 'alert-bubble'
+  | 'archive'
+  | 'product'
+  | 'clock'
+  | 'apps'
+  | 'alert-circle'
+  | 'attachment';
+interface VNode<P = {}> {
+  type: ComponentType<P> | string;
+  props: P & {
+    children: ComponentChildren$1;
+  };
+  key: Key;
+  /**
+   * ref is not guaranteed by React.ReactElement, for compatibility reasons
+   * with popular react libs we define it as optional too
+   */
+  ref?: Ref<any> | null;
+  /**
+   * The time this `vnode` started rendering. Will only be set when
+   * the devtools are attached.
+   * Default value: `0`
+   */
+  startTime?: number;
+  /**
+   * The time that the rendering of this `vnode` was completed. Will only be
+   * set when the devtools are attached.
+   * Default value: `-1`
+   */
+  endTime?: number;
+}
+type Key = string | number | any;
+interface RefObject<T> {
+  current: T | null;
+}
+type RefCallback<T> = (instance: T | null) => void;
+type Ref<T> = RefObject<T> | RefCallback<T> | null;
+export type ComponentChild =
+  | VNode<any>
+  | object
+  | string
+  | number
+  | bigint
+  | boolean
+  | null
+  | undefined;
+type ComponentChildren$1 = ComponentChild[] | ComponentChild;
+interface Attributes {
+  key?: Key | undefined;
+  jsx?: boolean | undefined;
+}
+interface ErrorInfo {
+  componentStack?: string;
+}
+type RenderableProps<P, RefType = any> = P &
+  Readonly<
+    Attributes & {
+      children?: ComponentChildren$1;
+      ref?: Ref<RefType>;
+    }
+  >;
+type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
+interface FunctionComponent<P = {}> {
+  (props: RenderableProps<P>, context?: any): VNode<any> | null;
+  displayName?: string;
+  defaultProps?: Partial<P> | undefined;
+}
+interface ComponentClass<P = {}, S = {}> {
+  new (props: P, context?: any): Component<P, S>;
+  displayName?: string;
+  defaultProps?: Partial<P>;
+  contextType?: Context<any>;
+  getDerivedStateFromProps?(
+    props: Readonly<P>,
+    state: Readonly<S>,
+  ): Partial<S> | null;
+  getDerivedStateFromError?(error: any): Partial<S> | null;
+}
+interface Component<P = {}, S = {}> {
+  componentWillMount?(): void;
+  componentDidMount?(): void;
+  componentWillUnmount?(): void;
+  getChildContext?(): object;
+  componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+  shouldComponentUpdate?(
+    nextProps: Readonly<P>,
+    nextState: Readonly<S>,
+    nextContext: any,
+  ): boolean;
+  componentWillUpdate?(
+    nextProps: Readonly<P>,
+    nextState: Readonly<S>,
+    nextContext: any,
+  ): void;
+  getSnapshotBeforeUpdate?(oldProps: Readonly<P>, oldState: Readonly<S>): any;
+  componentDidUpdate?(
+    previousProps: Readonly<P>,
+    previousState: Readonly<S>,
+    snapshot: any,
+  ): void;
+  componentDidCatch?(error: any, errorInfo: ErrorInfo): void;
+}
+declare abstract class Component<P, S> {
+  constructor(props?: P, context?: any);
+  static displayName?: string;
+  static defaultProps?: any;
+  static contextType?: Context<any>;
+  // Static members cannot reference class type parameters. This is not
+  // supported in TypeScript. Reusing the same type arguments from `Component`
+  // will lead to an impossible state where one cannot satisfy the type
+  // constraint under no circumstances, see #1356.In general type arguments
+  // seem to be a bit buggy and not supported well at the time of this
+  // writing with TS 3.3.3333.
+  static getDerivedStateFromProps?(
+    props: Readonly<object>,
+    state: Readonly<object>,
+  ): object | null;
+
+  static getDerivedStateFromError?(error: any): object | null;
+  state: Readonly<S>;
+  props: RenderableProps<P>;
+  context: any;
+  base?: Element | Text;
+  // From https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e836acc75a78cf0655b5dfdbe81d69fdd4d8a252/types/react/index.d.ts#L402
+  // // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
+  // // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
+  setState<K extends keyof S>(
+    state:
+      | ((
+          prevState: Readonly<S>,
+          props: Readonly<P>,
+        ) => Pick<S, K> | Partial<S> | null)
+      | (Pick<S, K> | Partial<S> | null),
+    callback?: () => void,
+  ): void;
+
+  forceUpdate(callback?: () => void): void;
+  abstract render(
+    props?: RenderableProps<P>,
+    state?: Readonly<S>,
+    context?: any,
+  ): ComponentChild;
+}
+interface Consumer<T>
+  extends FunctionComponent<{
+    children: (value: T) => ComponentChildren$1;
+  }> {}
+interface Provider<T>
+  extends FunctionComponent<{
+    value: T;
+    children?: ComponentChildren$1;
+  }> {}
+interface Context<T> {
+  Consumer: Consumer<T>;
+  Provider: Provider<T>;
+  displayName?: string;
+}
+
+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$l = 'shopify-badge';
+export interface ReactProps$l
+  extends Partial<BadgeProps>,
+    Pick<BadgeProps$1, 'id'> {}
+
+export type Style = string | CSSStyleSheet;
+export type Styles = Style[] | Style;
+export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
+  ShadowRoot: (element: any) => ComponentChild;
+  styles?: Styles;
+};
+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.
+ * 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);
+
+  /** @private */
+  attributeChangedCallback(name: string): void;
+  /** @private */
+  connectedCallback(): void;
+  /** @private */
+  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.
+   * @private
+   */
+  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.
+   * @private
+   * @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$l]: Badge;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$l]: HTMLAttributes<HTMLElement> & ReactProps$l;
+    }
+  }
+}
+
+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']>;
+  border: AlignedBox['border'] | 'none';
+  borderWidth: MaybeAllValuesShorthandProperty<
+    Extract<
+      AlignedBox['borderWidth'],
+      | 'small-100'
+      | 'small'
+      | 'base'
+      | 'large'
+      | 'large-100'
+      | 'large-200'
+      | 'none'
+      | ''
+    >
+  >;
+  borderStyle: MaybeAllValuesShorthandProperty<
+    Extract<AlignedBox['borderStyle'], 'none' | 'solid' | 'dashed' | ''>
+  >;
+  borderColor: Extract<
+    AlignedBox['borderColor'],
+    'subdued' | 'base' | 'strong' | ''
+  >;
+  borderRadius: MaybeAllValuesShorthandProperty<
+    Extract<
+      AlignedBox['borderRadius'],
+      | 'none'
+      | 'small-200'
+      | 'small-100'
+      | 'small'
+      | 'base'
+      | 'large'
+      | 'large-100'
+      | 'large-200'
+    >
+  >;
+  accessibilityLabel: AlignedBox['accessibilityLabel'];
+  accessibilityVisibility: AlignedBox['accessibilityVisibility'];
+  display: AlignedBox['display'];
+}
+
+declare const tagName$k = 'shopify-box';
+export interface ReactProps$k
+  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 border: BoxProps['border'];
+  accessor borderWidth: BoxProps['borderWidth'];
+  accessor borderStyle: BoxProps['borderStyle'];
+  accessor borderColor: BoxProps['borderColor'];
+  accessor borderRadius: BoxProps['borderRadius'];
+  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$k]: Box;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$k]: HTMLAttributes<HTMLElement> & ReactProps$k;
+    }
+  }
+}
+
+export type ButtonOnlyProps = Extract<
+  ButtonProps$1,
+  {
+    type?: unknown;
+  }
+>;
+export 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$j = 'shopify-button';
+export interface ReactProps$j
+  extends Partial<ButtonProps>,
+    Pick<ButtonProps$1, 'onClick' | 'onFocus' | 'onBlur' | 'id'> {}
+
+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'];
+  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$j]: Button;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$j]: HTMLAttributes<HTMLElement> & ReactProps$j;
+    }
+  }
+}
+
+declare const internals: unique symbol;
+export type InputProps = Required<
+  Pick<TextFieldProps, 'disabled' | 'id' | 'name' | 'value'>
+>;
+declare class PreactInputElement
+  extends PreactCustomElement
+  implements InputProps
+{
+  static formAssociated: boolean;
+  /** @private */
+  [internals]: ElementInternals;
+  protected getDefaultValue(): string;
+  accessor onchange: EventListener | null;
+  accessor oninput: EventListener | null;
+  accessor disabled: InputProps['disabled'];
+  accessor id: InputProps['id'];
+  accessor name: InputProps['name'];
+  get value(): InputProps['value'];
+  set value(value: InputProps['value']);
+  constructor(renderImpl: RenderImpl);
+}
+
+export type CheckboxProps = InputProps &
+  Required<
+    Pick<
+      CheckboxProps$1,
+      | 'accessibilityLabel'
+      | 'checked'
+      | 'details'
+      | 'error'
+      | 'indeterminate'
+      | 'label'
+      | 'required'
+    >
+  >;
+
+declare const tagName$i = 'shopify-checkbox';
+export interface ReactProps$i
+  extends Partial<CheckboxProps>,
+    Pick<CheckboxProps$1, 'onChange' | 'onInput'> {}
+
+declare class Checkbox extends PreactInputElement implements CheckboxProps {
+  get checked(): boolean;
+  set checked(checked: CheckboxProps['checked']);
+  get value(): string;
+  set value(value: string);
+  accessor accessibilityLabel: CheckboxProps['accessibilityLabel'];
+  accessor details: CheckboxProps['details'];
+  accessor error: CheckboxProps['error'];
+  accessor indeterminate: CheckboxProps['indeterminate'];
+  accessor label: CheckboxProps['label'];
+  accessor required: CheckboxProps['required'];
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$i]: Checkbox;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$i]: HTMLAttributes<HTMLElement> & ReactProps$i;
+    }
+  }
+}
+
+export interface DividerProps {
+  direction: Extract<DividerProps$1['direction'], 'inline' | 'block'>;
+  color: Extract<DividerProps$1['color'], 'subdued' | 'base' | 'strong'>;
+}
+
+declare const tagName$h = 'shopify-divider';
+export interface ReactProps$h
+  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$h]: Divider;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$h]: HTMLAttributes<HTMLElement> & ReactProps$h;
+    }
+  }
+}
+
+export type RequiredHeadingProps = Required<HeadingProps$1>;
+export interface HeadingProps {
+  accessibilityRole: RequiredHeadingProps['accessibilityRole'];
+  accessibilityVisibility: RequiredHeadingProps['accessibilityVisibility'];
+  lineClamp: RequiredHeadingProps['lineClamp'];
+}
+
+declare const tagName$g = 'shopify-heading';
+export interface ReactProps$g
+  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$g]: Heading;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$g]: HTMLAttributes<HTMLElement> & ReactProps$g;
+    }
+  }
+}
+
+declare const tagName$f = 'shopify-icon';
+export interface ReactProps$f
+  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$f]: Icon;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$f]: Omit<HTMLAttributes<HTMLElement>, 'size'> & ReactProps$f;
+    }
+  }
+}
+
+export interface ImageProps
+  extends Required<
+    Pick<
+      ImageProps$1,
+      | 'alt'
+      | 'loading'
+      | 'src'
+      | 'accessibilityRole'
+      | 'inlineSize'
+      | 'srcSet'
+      | 'sizes'
+      | 'aspectRatio'
+    >
+  > {}
+
+declare const tagName$e = 'shopify-image';
+export interface ReactProps$e
+  extends Partial<ImageProps>,
+    Pick<ImageProps$1, 'onError' | 'onLoad' | 'id'> {}
+
+declare class Image extends PreactCustomElement implements ImageProps {
+  accessor src: ImageProps['src'];
+  accessor srcSet: ImageProps['srcSet'];
+  accessor sizes: ImageProps['sizes'];
+  accessor alt: ImageProps['alt'];
+  accessor aspectRatio: ImageProps['aspectRatio'];
+  accessor loading: ImageProps['loading'];
+  accessor accessibilityRole: ImageProps['accessibilityRole'];
+  accessor inlineSize: ImageProps['inlineSize'];
+  accessor onload: EventListener | null;
+  accessor onerror: OnErrorEventHandler;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$e]: Image;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$e]: HTMLAttributes<HTMLElement> & ReactProps$e;
+    }
+  }
+}
+
+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$d = 'shopify-link';
+export interface ReactProps$d
+  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$d]: Link;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$d]: HTMLAttributes<HTMLElement> & ReactProps$d;
+    }
+  }
+}
+
+declare const tagName$c = 'shopify-option';
+export interface ReactProps$c extends Partial<SharedProps$2> {}
+
+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'];
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$c]: Option;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$c]: HTMLAttributes<HTMLElement> & ReactProps$c;
+    }
+  }
+}
+
+declare const tagName$b = 'shopify-option-group';
+export interface ReactProps$b extends Partial<SharedProps$1> {}
+
+export 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$b]: OptionGroup;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$b]: HTMLAttributes<HTMLElement> & ReactProps$b;
+    }
+  }
+}
+
+export interface ParagraphProps
+  extends Required<
+    Pick<
+      ParagraphProps$1,
+      'lineClamp' | 'accessibilityVisibility' | 'fontVariantNumeric' | 'tone'
+    >
+  > {
+  color: Extract<ParagraphProps$1['color'], 'base' | 'subdued'>;
+}
+
+declare const tagName$a = 'shopify-paragraph';
+export interface ReactProps$a
+  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$a]: Paragraph;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$a]: HTMLAttributes<HTMLElement> & ReactProps$a;
+    }
+  }
+}
+
+export type RequiredSectionProps = Required<SectionProps$1>;
+export interface SectionProps {
+  accessibilityLabel: RequiredSectionProps['accessibilityLabel'];
+  heading: RequiredSectionProps['heading'];
+  padding: RequiredSectionProps['padding'];
+}
+
+declare const tagName$9 = 'shopify-section';
+export interface ReactProps$9
+  extends Partial<SectionProps>,
+    Pick<SectionProps$1, 'id'> {}
+
+declare class Section extends PreactCustomElement implements SectionProps {
+  constructor();
+  connectedCallback(): void;
+  accessor accessibilityLabel: SectionProps['accessibilityLabel'];
+  accessor heading: SectionProps['heading'];
+  accessor padding: SectionProps['padding'];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$9]: Section;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$9]: HTMLAttributes<HTMLElement> & ReactProps$9;
+    }
+  }
+}
+
+export type FieldReactProps = Pick<
+  TextFieldProps,
+  'onChange' | 'onFocus' | 'onInput' | 'onBlur'
+>;
+
+declare const tagName$8 = 'shopify-select';
+export interface ReactProps$8 extends Partial<SharedProps & FieldReactProps> {}
+
+export type FieldProps<Autocomplete extends string = string> = InputProps &
+  Required<
+    Pick<
+      TextFieldProps,
+      | 'defaultValue'
+      | 'details'
+      | 'error'
+      | 'label'
+      | 'placeholder'
+      | 'readOnly'
+      | 'required'
+    >
+  > & {
+    autocomplete: Autocomplete;
+  };
+declare class PreactFieldElement<Autocomplete extends string = string>
+  extends PreactInputElement
+  implements FieldProps<Autocomplete>
+{
+  accessor onblur: EventListener | null;
+  accessor onfocus: EventListener | null;
+  accessor autocomplete: FieldProps<Autocomplete>['autocomplete'];
+  accessor defaultValue: FieldProps['defaultValue'];
+  accessor details: FieldProps['details'];
+  accessor error: FieldProps['error'];
+  accessor label: FieldProps['label'];
+  accessor placeholder: FieldProps['placeholder'];
+  accessor readOnly: FieldProps['readOnly'];
+  accessor required: FieldProps['required'];
+  protected getDefaultValue(): string;
+  constructor(renderImpl: RenderImpl);
+}
+
+export interface SharedProps
+  extends Pick<
+    SelectProps,
+    | 'disabled'
+    | 'error'
+    | 'label'
+    | 'name'
+    | 'placeholder'
+    | 'required'
+    | 'value'
+  > {}
+declare class Select extends PreactFieldElement implements SharedProps {
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$8]: Select;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$8]: HTMLAttributes<HTMLElement> & ReactProps$8;
+    }
+  }
+}
+
+export 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$7 = 'shopify-spinner';
+export interface ReactProps$7
+  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$7]: Spinner;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$7]: HTMLAttributes<HTMLElement> & ReactProps$7;
+    }
+  }
+}
+
+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$6 = 'shopify-stack';
+export interface ReactProps$6
+  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$6]: Stack;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$6]: HTMLAttributes<HTMLElement> & ReactProps$6;
+    }
+  }
+}
+
+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'
+  >;
+  tone: Extract<
+    TextProps$1['tone'],
+    'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'caution'
+  >;
+  fontVariantNumeric: Extract<
+    TextProps$1['fontVariantNumeric'],
+    'auto' | 'normal' | 'tabular-nums'
+  >;
+}
+
+declare const tagName$5 = 'shopify-text';
+export interface ReactProps$5
+  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$5]: Text;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$5]: HTMLAttributes<HTMLElement> & ReactProps$5;
+    }
+  }
+}
+
+declare const tagName$4 = 'shopify-admin-action';
+export interface AdminActionProps {
+  /**
+   * Sets the title of the Action container. If empty, the name of the extension will be used. Titles longer than 40 characters will be truncated.
+   */
+  title: string;
+  /**
+   * Sets the loading state of the action modal
+   */
+  loading?: boolean;
+}
+declare class AdminAction
+  extends PreactCustomElement
+  implements AdminActionProps
+{
+  title: string;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$4]: AdminAction;
+  }
+}
+export interface ReactProps$4 extends Partial<AdminActionProps> {}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$4]: HTMLAttributes<HTMLElement> & ReactProps$4;
+    }
+  }
+}
+
+declare const tagName$3 = 'shopify-admin-block';
+export interface AdminBlockProps {
+  /**
+   * The title to display at the top of the app block. If empty, 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.
+   */
+  collapsedSummary: string;
+}
+declare class AdminBlock
+  extends PreactCustomElement
+  implements AdminBlockProps
+{
+  constructor();
+  title: string;
+  collapsedSummary: string;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$3]: AdminBlock;
+  }
+}
+export interface ReactProps$3 extends Partial<AdminBlockProps> {}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$3]: HTMLAttributes<HTMLElement> & ReactProps$3;
+    }
+  }
+}
+
+declare const tagName$2 = 'shopify-admin-print-action';
+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;
+}
+declare class AdminPrintAction
+  extends PreactCustomElement
+  implements AdminPrintActionProps
+{
+  src: string;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$2]: AdminPrintAction;
+  }
+}
+export interface ReactProps$2 extends Partial<AdminPrintActionProps> {}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$2]: HTMLAttributes<HTMLElement> & ReactProps$2;
+    }
+  }
+}
+
+declare const tagName$1 = 'shopify-customer-segment-template';
+/**
+ * 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
+ */
+export 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;
+}
+declare class CustomerSegmentTemplate
+  extends PreactCustomElement
+  implements CustomerSegmentTemplateProps
+{
+  constructor();
+  description: string | string[];
+  query: string;
+  queryToInsert: string;
+  createdOn: string;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName$1]: CustomerSegmentTemplate;
+  }
+}
+export interface ReactProps$1 extends Partial<CustomerSegmentTemplateProps> {}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName$1]: HTMLAttributes<HTMLElement> & ReactProps$1;
+    }
+  }
+}
+
+declare const tagName = 'shopify-function-settings';
+export interface FunctionSettingsProps {
+  /**
+   * A unique identifier for the form.
+   */
+  id?: string;
+}
+declare class FunctionSettings
+  extends PreactCustomElement
+  implements FunctionSettingsProps
+{
+  constructor();
+  accessor onsave: EventListener | null;
+  accessor onerror: OnErrorEventHandler;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: FunctionSettings;
+  }
+}
+export interface ReactProps extends Partial<FunctionSettingsProps> {}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName]: HTMLAttributes<HTMLElement> & ReactProps;
+    }
+  }
+}
+
+export {
+  AdminAction,
+  AdminBlock,
+  AdminPrintAction,
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  CustomerSegmentTemplate,
+  Divider,
+  FunctionSettings,
+  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 555a77ce1..000000000
--- a/packages/ui-extensions/src/surfaces/admin/components.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-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';
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
index 9b8393837..347b7130d 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 15e022a93..000000000
--- 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
index ac455a3ef..632a6f7e9 100644
--- 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
@@ -1,22 +1,21 @@
-import {extension, AdminAction, Button} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
 export default extension('Playground', (root) => {
-  const primaryAction = root.createFragment();
-  const secondaryAction = root.createFragment();
+  const adminAction = document.createElement('shopify-admin-action');
+  adminAction.title = 'My App Action';
+  adminAction.textContent = 'Modal content';
+  root.appendChild(adminAction);
 
-  primaryAction.appendChild(
-    root.createComponent(Button, {onPress: () => {}}, 'Action')
-  );
-  secondaryAction.appendChild(
-    root.createComponent(Button, {onPress: () => {}}, 'Secondary')
-  );
+  const primaryAction = document.createElement('shopify-button');
 
-  const adminAction = root.createComponent(AdminAction, {
-    title: 'My App Action',
-    primaryAction,
-    secondaryAction,
-  }, 'Modal content');
+  primaryAction.slot = 'primaryAction';
+  primaryAction.onpress = () => console.log('pressed primary action');
+  primaryAction.textContent = 'Primary';
+  adminAction.appendChild(primaryAction);
 
-  root.appendChild(adminAction);
-  root.mount();
+  const secondaryAction = document.createElement('shopify-button');
+  secondaryAction.slot = 'secondaryAction';
+  secondaryAction.onpress = () => console.log('pressed secondary action');
+  secondaryAction.textContent = 'Secondary';
+  adminAction.appendChild(secondaryAction);
 });
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
index 0ae1e07b8..22d3fd66a 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 549c15bfe..000000000
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ts
+++ /dev/null
@@ -1,11 +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. Summary longer than 30 characters will be truncated.
-   */
-  collapsedSummary?: 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
index 44844e64b..fc51a02f3 100644
--- 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
@@ -1,10 +1,8 @@
-import {extension, AdminBlock, Button} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
 export default extension('Playground', (root) => {
-  const adminBlock = root.createComponent(AdminBlock, {
-    title: 'My App Block',
-  }, '5 items active');
-
+  const adminBlock = document.createElement('shopify-admin-block');
+  adminBlock.title = 'My App Block';
+  adminBlock.textContent = '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
index 7242f6118..e3cda2941 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 1f759cec9..000000000
--- 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
index 4d944ef67..96a6f01c4 100644
--- 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
@@ -1,14 +1,7 @@
-import {extension, AdminPrintAction, Text} from '@shopify/ui-extensions/admin';
+import {extension} 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();
+  const adminPrintAction = document.createElement('shopify-admin-print-action');
+  adminPrintAction.src = 'https://example.com';
+  root.appendChild(adminPrintAction);
 });
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
index 689eb27ce..92c7795f1 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts
@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'BadgeProps',
+      title: 'Badge',
       description: '',
-      type: 'BadgeProps',
+      type: 'Badge',
     },
   ],
   category: 'Components',
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 26a478c85..000000000
--- 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
index 12225aa62..fe6d962d4 100644
--- 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
@@ -1,11 +1,10 @@
-import {extend, Badge} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
-extend('Playground', (root) => {
-  const badge = root.createComponent(
-    Badge,
-    {tone: 'info'},
-    'Fulfilled',
-  );
+extension('Playground', (root) => {
+  const badge = document.createElement('shopify-badge');
+
+  badge.tone = 'info';
+  badge.textContent = 'Fulfilled';
 
   root.appendChild(badge);
-});
\ No newline at end of file
+});
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 94f6bef55..000000000
--- 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 6928da305..000000000
--- 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.ts b/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.ts
deleted file mode 100644
index 08fb962c9..000000000
--- 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 6dbc3e5ee..000000000
--- 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
index 7a9fc9b27..eb4b8c3c4 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts
@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'BoxProps',
+      title: 'Box',
       description: '',
-      type: 'BoxProps',
+      type: 'Box',
     },
   ],
   category: 'Components',
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 b2873a14a..000000000
--- 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
index 02b807d86..48f315e43 100644
--- 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
@@ -1,11 +1,9 @@
-import {extend, Box} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
-extend('Playground', (root) => {
-  const box = root.createComponent(
-    Box,
-    {padding: 'base'},
-    'Box',
-  );
+export default extension('Playground', (root) => {
+  const box = document.createElement('shopify-box');
 
+  box.padding = 'base';
+  box.textContent = '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
index f48e6a338..fcec3cf76 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Button/Button.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Button/Button.doc.ts
@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'ButtonProps',
+      title: 'Button',
       description: '',
-      type: 'ButtonProps',
+      type: 'Button',
     },
   ],
   category: 'Components',
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 5ded050f7..000000000
--- 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/examples/basic-button.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Button/examples/basic-button.example.ts
index 47231d6f0..f363a8379 100644
--- 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
@@ -1,11 +1,8 @@
-import {extend, Button} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const button = root.createComponent(
-    Button,
-    {onPress: () => console.log('onPress event')},
-    'Click here',
-  );
+import {extension} from '@shopify/ui-extensions/admin';
 
+extension('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/Checkbox.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts
index a58071cac..9edae490b 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts
@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'CheckboxProps',
+      title: 'Checkbox',
       description: '',
-      type: 'CheckboxProps',
+      type: 'Checkbox',
     },
   ],
   category: 'Components',
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 673f9a802..000000000
--- 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
index 3c60e9cb4..35e8aa2b4 100644
--- 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
@@ -1,11 +1,10 @@
-import {extend, Checkbox} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
-extend('Playground', (root) => {
-  const checkbox = root.createComponent(
-    Checkbox,
-    {id: 'checkbox', name: 'checkbox'},
-    'Save this information for next time',
-  );
+export default extension('Playground', (root) => {
+  const checkbox = document.createElement('shopify-checkout');
 
-  root.appendChild(checkbox);
+  checkbox.id = 'checkbox';
+  checkbox.name = 'checkbox';
+  (checkbox.textContent = '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 def82a538..000000000
--- 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 ad35c0145..000000000
--- 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 43b998eef..000000000
--- 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 162f819e4..000000000
--- 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 b44222a01..000000000
--- 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 30e4ce853..000000000
--- 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
index 69a04a39a..0dcc5116c 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts
@@ -23,16 +23,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/examples/customersegmenttemplate.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 b1eafced7..000000000
--- 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
index f7d7448f2..4a61bb34f 100644
--- 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
@@ -1,17 +1,16 @@
-import {extension, CustomerSegmentTemplate} from '@shopify/ui-extensions/admin';
+import {extension} 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(),
-    });
+    const template = document.createElement(
+      'shopify-customer-segment-template',
+    );
+    template.title = i18n.translate('template.title');
+    template.description = i18n.translate('template.description');
+    template.query = 'number_of_orders > 0';
+    template.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 b50231596..000000000
--- 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 0a9a6485a..000000000
--- 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 34ffcb94e..000000000
--- 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 41347e0f2..000000000
--- 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 4bda79677..000000000
--- 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 9457fef82..000000000
--- 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 c54d03986..000000000
--- 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 5b1d43db7..000000000
--- 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 0a5a62eda..000000000
--- 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 224910473..000000000
--- 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
index d6d1c4292..deddbf76e 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts
@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'DividerProps',
+      title: 'Divider',
       description: '',
-      type: 'DividerProps',
+      type: 'Divider',
     },
   ],
   category: 'Components',
@@ -20,18 +20,18 @@ const data: ReferenceEntityTemplateSchema = {
   defaultExample: {
     image: 'divider-default.png',
     codeblock: {
-      title: 'Simple Divider example',
+      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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 9ac3ea593..000000000
--- 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 4d967bc83..000000000
--- 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
index 7d8b8019b..e266a63ca 100644
--- 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
@@ -1,17 +1,7 @@
-import {
-    extension,
-    Divider,
-  } from '@shopify/ui-extensions/admin';
+import {extension} 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');
+export default extension('Playground', (root) => {
+  const divider = document.createElement('shopify-divider');
 
-      root.appendChild(firstText);
-      root.appendChild(divier);
-      root.appendChild(secondText);
-    },
-  );
+  root.append('First Text', divider, 'Second Text');
+});
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 aa48757fa..000000000
--- 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 f98253529..000000000
--- 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 1b27f40aa..000000000
--- 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 8124a9621..000000000
--- 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 c2ffc38a0..000000000
--- 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 16aa8ad11..000000000
--- 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 a8b0ec215..000000000
--- 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
index 797e91043..fccf4443b 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.doc.ts
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/FunctionSettings/examples/basic-functionsettings.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 729f9e26e..000000000
--- 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
index 1c8570d70..82feab52d 100644
--- 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
@@ -1,9 +1,4 @@
-import {
-  extension,
-  FunctionSettings,
-  TextField,
-  Section,
-} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
 export default extension(
   'admin.settings.validation.render',
@@ -15,33 +10,31 @@ export default extension(
       ? 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 settings = document.createElement('shopify-function-settings');
+    settings.onerror = (errors) => {
+      textField.error = errors[0]?.message;
+    };
 
-    const section = root.createComponent(Section, {
-      heading: 'Settings',
-    });
+    root.append(settings);
 
-    const settings = root.createComponent(FunctionSettings, {
-      onError(errors) {
-        textField.updateProps({error: errors[0]?.message});
-      },
-    });
+    const section = document.createElement('shopify-section');
+    section.heading = 'Settings';
+    settings.append(section);
 
+    const textField = document.createElement('shopify-text-field');
+    textField.value = initialSettings.name;
+    textField.label = 'Name';
+    textField.name = 'name';
+    textField.onchange = (value) => {
+      textField.updateProps({value, error: undefined});
+      api.applyMetafieldsChange({
+        type: 'updateMetafield',
+        namespace: '$app:my_namespace',
+        key: 'name',
+        value,
+        valueType: 'single_line_text_field',
+      });
+    };
     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
index b22f231f0..ea97aa6bc 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts
@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'HeadingProps',
+      title: 'Heading',
       description: '',
-      type: 'HeadingProps',
+      type: 'Heading',
     },
   ],
   category: 'Components',
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
@@ -42,11 +42,6 @@ const data: ReferenceEntityTemplateSchema = {
       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',
-    },
   ],
 };
 
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 ea373ad81..000000000
--- 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
index f904659a0..d6f45174c 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Heading/README.md
+++ b/packages/ui-extensions/src/surfaces/admin/components/Heading/README.md
@@ -1,9 +1,3 @@
 # 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
index 8ff17ef67..df2b6cbc9 100644
--- 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
@@ -1,7 +1,7 @@
-import {extend, Heading} from '@shopify/ui-extensions/admin';
-
-extend('Playground', (root) => {
-  const heading = root.createComponent(Heading, undefined, 'Headings are cool');
+import {extension} from '@shopify/ui-extensions/admin';
 
+export default extension('Playground', (root) => {
+  const heading = document.createElement('shopify-heading');
+  heading.textContent = '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 6b2129e22..000000000
--- 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 0560c4173..000000000
--- 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 0cde8de45..000000000
--- 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 4562ad415..000000000
--- 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
index a4e93b635..cd4403173 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts
@@ -10,14 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'IconProps',
+      title: 'Icon',
       description: '',
-      type: 'IconProps',
-    },
-    {
-      title: 'IconName',
-      description: 'List of available Icons for the Icon component',
-      type: 'IconName',
+      type: 'Icon',
     },
   ],
   category: 'Components',
@@ -27,35 +22,19 @@ const data: ReferenceEntityTemplateSchema = {
     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',
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx',
+          language: 'tsx',
         },
       ],
     },
-  ],
+  },
   related: [
     {
       type: 'component',
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 ff5db53b2..000000000
--- 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 462d39f0a..000000000
--- 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 4b3ae6943..000000000
--- 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
index fd6ef09f2..cf62fd855 100644
--- 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
@@ -1,7 +1,9 @@
-import {extend, Icon} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
-extend('Playground', (root) => {
-  const icon = root.createComponent(Icon, {name: 'AppsMajor'});
+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/Image/Image.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts
index 825ad9f1b..d5753eb9e 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts
@@ -9,9 +9,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'ImageProps',
+      title: 'Image',
       description: '',
-      type: 'ImageProps',
+      type: 'Image',
     },
   ],
   category: 'Components',
@@ -21,16 +21,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 31423f39b..000000000
--- 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/examples/basic-image.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Image/examples/basic-image.example.ts
index ce0aadba0..f47ff6337 100644
--- 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
@@ -1,10 +1,9 @@
-import {extend, Image} from '@shopify/ui-extensions/admin';
+import {extension} 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',
-  });
+export default extension('Playground', (root) => {
+  const image = document.createElement('shopify-image');
+  image.alt = 'Pickaxe';
+  image.src = '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 5f1bb7669..000000000
--- 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 49801cf83..000000000
--- 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 5d719d8f0..000000000
--- 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 66297d13f..000000000
--- 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 bc264120d..000000000
--- 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 e01cf7c44..000000000
--- 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
index d79d4723f..938b3fd67 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts
@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'LinkProps',
+      title: 'Link',
       description: '',
-      type: 'LinkProps',
+      type: 'Link',
     },
   ],
   category: 'Components',
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
@@ -44,13 +44,13 @@ const data: ReferenceEntityTemplateSchema = {
         codeblock: {
           tabs: [
             {
-              title: 'React',
-              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx',
+              title: 'JS',
+              code: './examples/external-link.example.ts',
               language: 'typescript',
             },
             {
-              title: 'JS',
-              code: './examples/external-link.example.ts',
+              title: 'React',
+              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx',
               language: 'typescript',
             },
           ],
@@ -63,13 +63,13 @@ const data: ReferenceEntityTemplateSchema = {
         codeblock: {
           tabs: [
             {
-              title: 'React',
-              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx',
+              title: 'JS',
+              code: './examples/relative-link.example.ts',
               language: 'typescript',
             },
             {
-              title: 'JS',
-              code: './examples/relative-link.example.ts',
+              title: 'React',
+              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx',
               language: 'typescript',
             },
           ],
@@ -82,13 +82,13 @@ const data: ReferenceEntityTemplateSchema = {
         codeblock: {
           tabs: [
             {
-              title: 'React',
-              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx',
+              title: 'JS',
+              code: './examples/shopify-section-link.example.ts',
               language: 'typescript',
             },
             {
-              title: 'JS',
-              code: './examples/shopify-section-link.example.ts',
+              title: 'React',
+              code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx',
               language: 'typescript',
             },
           ],
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 3a33f8fa0..000000000
--- 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/examples/app-link.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Link/examples/app-link.example.ts
index 58b9f2dad..411bf97cf 100644
--- 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
@@ -1,17 +1,9 @@
-import {
-  extension,
-  Link,
-} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
-export default extension(
-  'Playground',
-  (root) => {
-    const link = root.createComponent(
-      Link,
-      {href: 'app://baz'},
-      'Link to app path',
-    );
+export default extension('Playground', (root) => {
+  const link = document.createElement('shopify-link');
+  link.href = 'app://baz';
+  link.textContent = 'Link to app path';
 
-    root.appendChild(link);
-  },
-);
+  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
index c1d371c3d..5150b2ec0 100644
--- 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
@@ -1,17 +1,9 @@
-import {
-  extension,
-  Link,
-} from '@shopify/ui-extensions/admin';
+import {extension} 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',
-    );
+export default extension('Playground', (root) => {
+  const link = document.createElement('shopify-link');
+  link.href = 'https://www.shopify.ca/climate/sustainability-fund';
+  link.textContent = 'Sustainability fund';
 
-    root.appendChild(link);
-  },
-);
+  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
index 00add09f6..47baed6f1 100644
--- 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
@@ -1,17 +1,9 @@
-import {
-  extension,
-  Link,
-} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
-export default extension(
-  'Playground',
-  (root) => {
-    const link = root.createComponent(
-      Link,
-      {href: '/baz'},
-      'Link relative to current path',
-    );
+export default extension('Playground', (root) => {
+  const link = document.createElement('shopify-link');
+  link.href = '/baz';
+  link.textContent = 'Link relative to current path';
 
-    root.appendChild(link);
-  },
-);
+  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
index ce1fba5bd..d875a766f 100644
--- 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
@@ -1,17 +1,9 @@
-import {
-  extension,
-  Link,
-} from '@shopify/ui-extensions/admin';
+import {extension} from '@shopify/ui-extensions/admin';
 
-export default extension(
-  'Playground',
-  (root) => {
-    const link = root.createComponent(
-      Link,
-      {href: 'shopify://admin/orders'},
-      "Shop's orders",
-    );
+export default extension('Playground', (root) => {
+  const link = document.createElement('shopify-link');
+  link.href = 'shopify://admin/orders';
+  link.textContent = "Shop's orders";
 
-    root.appendChild(link);
-  },
-);
+  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 2b43f070b..000000000
--- 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 f208b09c1..000000000
--- 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 ea03969fc..000000000
--- 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 be54d842a..000000000
--- 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 55152727d..000000000
--- 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 d106a8c97..000000000
--- 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 b39336c96..000000000
--- 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 1cbceaacf..000000000
--- 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/Banner/Banner.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Option/Option.doc.ts
similarity index 58%
rename from packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts
rename to packages/ui-extensions/src/surfaces/admin/components/Option/Option.doc.ts
index e5869574f..b33e72a6d 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Option/Option.doc.ts
@@ -1,37 +1,37 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
-  name: 'Banner',
+  name: 'Option',
   description:
-    'Use this component if you need to communicate to merchants in a prominent way.',
+    'Use this when you want to give users a predefined list of options to choose from.',
   requires: '',
-  thumbnail: 'banner-thumbnail.png',
+  thumbnail: 'select-thumbnail.png',
   isVisualComponent: true,
   type: '',
   definitions: [
     {
-      title: 'BannerProps',
+      title: 'Option',
       description: '',
-      type: 'BannerProps',
+      type: 'Option',
     },
   ],
   category: 'Components',
-  subCategory: 'Titles and text',
+  subCategory: 'Forms',
   defaultExample: {
-    image: 'banner-default.png',
+    image: 'select-default.png',
     codeblock: {
-      title: 'Simple Banner example',
+      title: 'Simple Option 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',
+          code: './examples/basic-option.example.ts',
           language: 'js',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Option/examples/basic-option.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Option/README.md b/packages/ui-extensions/src/surfaces/admin/components/Option/README.md
new file mode 100644
index 000000000..120b3ae94
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Option/README.md
@@ -0,0 +1,94 @@
+# Option
+
+Option provides the choices users can choose from in a Select menu.
+
+## 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/Option/examples/basic-option.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Option/examples/basic-option.example.ts
new file mode 100644
index 000000000..0cd24d8ae
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Option/examples/basic-option.example.ts
@@ -0,0 +1,56 @@
+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(
+    selectOptions.map((opt) => {
+      const optionElem = document.createElement('shopify-option');
+      optionElem.value = opt.value;
+      optionElem.textContent = opt.label;
+      return optionElem;
+    }),
+  );
+});
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
index 55c96e9ed..f366c4733 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts
@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'ParagraphProps',
+      title: 'Paragraph',
       description: '',
-      type: 'ParagraphProps',
+      type: 'Paragraph',
     },
   ],
   category: 'Components',
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 419f14d4a..000000000
--- 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/examples/basic-paragraph.example.ts b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.ts
index 757de5782..255442077 100644
--- 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
@@ -1,10 +1,23 @@
-import {extend, Paragraph, BlockStack} from '@shopify/ui-extensions/admin';
+import {extension} 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'),
-  ]);
+export default extension('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);
 
-  root.appendChild(paragraph);
+  const paragraph = document.createElement('shopify-paragraph');
+  stack.appendChild(paragraph);
+
+  const label = document.createElement('shopify-text');
+  label.type = 'strong';
+  label.textContent = 'Name:';
+  paragraph.appendChild(label);
+
+  const name = document.createElement('shopify-text');
+  name.textContent = 'Jane Doe';
+  paragraph.appendChild(name);
 });
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 d7efaa263..000000000
--- 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 69b774835..000000000
--- 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 d02cb5239..000000000
--- 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 787e4e478..000000000
--- 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 3669cbd9b..000000000
--- 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 3e3646763..000000000
--- 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 8b6f67c8d..000000000
--- 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 84305047a..000000000
--- 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 d4c25706a..000000000
--- 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 1c5b343f3..000000000
--- 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/Section.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts
index 7f14d0a68..4e0af0985 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts
@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'SectionProps',
+      title: 'Section',
       description: '',
-      type: 'SectionProps',
+      type: 'Section',
     },
   ],
   category: 'Components',
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
+          code: './examples/basic-section.example.ts',
           language: 'js',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-section.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 c0151b7a8..000000000
--- 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 199f00ef8..000000000
--- 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/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 000000000..9bcd4359a
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Section/examples/basic-section.example.ts
@@ -0,0 +1,9 @@
+import {extension} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  const section = document.createElement('shopify-section');
+  section.heading = 'Section heading';
+  section.textContent = 'Section content';
+
+  root.appendChild(section);
+});
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
index 6c46d2c97..9d9a43ed1 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Select/Select.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Select/Select.doc.ts
@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'SelectProps',
+      title: 'Select',
       description: '',
-      type: 'SelectProps',
+      type: 'Select',
     },
   ],
   category: 'Components',
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 0703a70b9..000000000
--- 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
index 9edf4eced..53aa35ae2 100644
--- 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
@@ -1,47 +1,49 @@
-import {
-  extension,
-  Select,
-} from '@shopify/ui-extensions/admin';
+import {extension} 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',
-        },
-      ],
-    });
+export default extension('Playground', (root) => {
+  let value = '2';
 
-    root.appendChild(select);
-  },
-);
+  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/BlockStack/BlockStack.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Stack/Stack.doc.ts
similarity index 59%
rename from packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts
rename to packages/ui-extensions/src/surfaces/admin/components/Stack/Stack.doc.ts
index 5ced85aea..5cbda468f 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Stack/Stack.doc.ts
@@ -1,48 +1,42 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
-  name: 'BlockStack',
+  name: 'Stack',
   description:
     "This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.",
   requires: '',
-  thumbnail: 'blockstack-thumbnail.png',
+  thumbnail: 'stack-thumbnail.png',
   isVisualComponent: true,
   type: '',
   definitions: [
     {
-      title: 'BlockStackProps',
+      title: 'Stack',
       description: '',
-      type: 'BlockStackProps',
+      type: 'Stack',
     },
   ],
   category: 'Components',
   subCategory: 'Structure',
   defaultExample: {
-    image: 'blockstack-default.png',
+    image: 'stack-default.png',
     codeblock: {
-      title: 'Laying out elements in a column',
+      title: 'TODO: add example title',
       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',
+          code: './examples/basic-stack.example.ts',
           language: 'js',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-stack.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
 
-  related: [
-    {
-      type: 'component',
-      name: 'InlineStack',
-      url: '/docs/api/admin-extensions/components/structure/Stack',
-    },
-  ],
+  related: [],
 };
 
 export default data;
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 000000000..4dea6ad52
--- /dev/null
+++ b/packages/ui-extensions/src/surfaces/admin/components/Stack/examples/basic-stack.example.ts
@@ -0,0 +1,10 @@
+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.append('Child 1', 'Child 2', 'Child 3', 'Child 4');
+
+  root.appendChild(stack);
+});
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
index 29bd0d15b..66811909c 100644
--- a/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts
+++ b/packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts
@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   type: '',
   definitions: [
     {
-      title: 'TextProps',
+      title: 'Text',
       description: '',
-      type: 'TextProps',
+      type: 'Text',
     },
   ],
   category: 'Components',
@@ -22,16 +22,16 @@ const data: ReferenceEntityTemplateSchema = {
     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',
         },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx',
+          language: 'tsx',
+        },
       ],
     },
   },
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 42b19d273..000000000
--- 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
index 10d42c5f4..3d2eef191 100644
--- 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
@@ -1,10 +1,18 @@
-import {extend, Text, BlockStack} from '@shopify/ui-extensions/admin';
+import {extension} 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'),
-  ]);
+export default extension('Playground', (root) => {
+  const stack = document.createElement('shopify-text');
+  stack.direction = 'block';
+  stack.alignment = 'center';
+  stack.gap = true;
+  root.appendChild(stack);
 
-  root.appendChild(text);
+  const label = document.createElement('shopify-text');
+  label.type = 'strong';
+  label.textContent = 'Name:';
+  stack.appendChild(label);
+
+  const name = document.createElement('shopify-text');
+  name.textContent = 'Jane Doe';
+  stack.appendChild(name);
 });
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 97306b995..000000000
--- 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 f0456fe43..000000000
--- 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 bfc088eab..000000000
--- 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 650fc1ca0..000000000
--- 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 b4adbf8e3..000000000
--- 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 802dcfa71..000000000
--- 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 9c704be93..000000000
--- 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 c1b3abcf2..000000000
--- 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 d5b34658a..000000000
--- 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 8c4939e52..000000000
--- 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 248571bce..000000000
--- 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 41e4412f8..000000000
--- 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 54d3a6e58..000000000
--- 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 b87801274..000000000
--- 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>;