diff --git a/.postcssrc.js b/.postcssrc.js
index da13a99d..9d3e32b9 100644
--- a/.postcssrc.js
+++ b/.postcssrc.js
@@ -10,7 +10,7 @@ module.exports = {
       generateScopedName: classConfig,
       getJSON: (cssFileName, json) => {
         /* Ignore generate common polaris tokens style file */
-        if (cssFileName.indexOf('@shopify/polaris-tokens') !== -1 || cssFileName.indexOf('CustomProperties') !== -1) {
+        if (cssFileName.indexOf('@shopify/polaris-tokens') !== -1) {
           return;
         }
 
diff --git a/.storybook/stories/GetStarted.stories.mdx b/.storybook/stories/GetStarted.stories.mdx
index 12a615f4..88c62655 100644
--- a/.storybook/stories/GetStarted.stories.mdx
+++ b/.storybook/stories/GetStarted.stories.mdx
@@ -24,7 +24,7 @@ import { Meta } from '@storybook/addon-docs';
 
 Polaris Vue by Ownego is a component library for [Vue 3](https://vuejs.org/) based on [Shopify Polaris style guide](https://polaris.shopify.com/). We try to keep the package light-weight and easy to use (mostly similar with original Polaris Library).
 
-**Follow Polaris React version:** [9.23.1](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%409.23.1) - Migrated date: *Aug 18th, 2022*.
+**Follow Polaris React version:** [10.0.0](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%4010.0.0) - Migrated date: *Aug 27th, 2022*.
 
 <a href="https://github.com/ownego/polaris-vue"><img src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" alt="Github"/></a>
 
diff --git a/README.md b/README.md
index 80b3ba6d..8776f0ee 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ Polaris Vue by Ownego only supports **Vue 3.0+**.
 Polaris Vue based on [Shopify Polaris style guide](https://polaris.shopify.com/), built especially for Vue 3.
 We're trying to make it mostly close with Shopify style guide and get a better performance.
 
-**Follow Polaris React version:** [9.23.1](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%409.23.1) - Migrated date: *Aug 18th, 2022*.
+**Follow Polaris React version:** [10.0.0](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%4010.0.0) - Migrated date: *Aug 27th, 2022*.
 
 <br/>
 
diff --git a/build/namespaced-classname.js b/build/namespaced-classname.js
index 9da55f8b..d6574d58 100644
--- a/build/namespaced-classname.js
+++ b/build/namespaced-classname.js
@@ -11,7 +11,7 @@ const NESTED_COMPONENT_PATH_REGEX = /.*\/components\/(.*)\/components/;
 const scopedHashes = {};
 
 module.exports = function generateScopedName(name, filename, css) {
-  if (filename.includes('@shopify/polaris-tokens') || filename.includes('CustomProperties')) {
+  if (filename.includes('@shopify/polaris-tokens')) {
     return name;
   }
 
diff --git a/package.json b/package.json
index 49b1cc1a..6ca03ede 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ownego/polaris-vue",
-  "version": "1.0.6",
-  "polaris_version": "9.23.1",
+  "version": "1.1.0",
+  "polaris_version": "10.0.0",
   "description": "Shopify Polaris UI library for Vue 3",
   "author": "Ownego Team",
   "keywords": [
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@babel/core": "^7.17.5",
     "@rushstack/eslint-patch": "^1.1.0",
-    "@shopify/polaris-tokens": "^5.5.1",
+    "@shopify/polaris-tokens": "^6.0.0",
     "@shopify/typescript-configs": "^5.1.0",
     "@storybook/addon-a11y": "^6.5.5",
     "@storybook/addon-actions": "^6.5.5",
diff --git a/src/classes/IndexTable.json b/src/classes/IndexTable.json
index f8421328..94c01123 100644
--- a/src/classes/IndexTable.json
+++ b/src/classes/IndexTable.json
@@ -1 +1 @@
-{"IndexTable":"Polaris-IndexTable","LoadingContainer-enter":"Polaris-IndexTable__LoadingContainer--enter","LoadingContainer-enter-active":"Polaris-IndexTable--loadingContainerEnterActive","LoadingContainer-exit":"Polaris-IndexTable__LoadingContainer--exit","LoadingContainer-exit-active":"Polaris-IndexTable--loadingContainerExitActive","LoadingPanel":"Polaris-IndexTable__LoadingPanel","LoadingPanelRow":"Polaris-IndexTable__LoadingPanelRow","LoadingPanelText":"Polaris-IndexTable__LoadingPanelText","Table":"Polaris-IndexTable__Table","Table-scrolling":"Polaris-IndexTable__Table--scrolling","TableCell-first":"Polaris-IndexTable__TableCell--first","TableCell":"Polaris-IndexTable__TableCell","TableHeading-first":"Polaris-IndexTable__TableHeading--first","TableHeading-second":"Polaris-IndexTable__TableHeading--second","Table-unselectable":"Polaris-IndexTable__Table--unselectable","TableRow":"Polaris-IndexTable__TableRow","TableRow-unclickable":"Polaris-IndexTable__TableRow--unclickable","statusSuccess":"Polaris-IndexTable--statusSuccess","statusSubdued":"Polaris-IndexTable--statusSubdued","TableRow-hovered":"Polaris-IndexTable__TableRow--hovered","TableRow-selected":"Polaris-IndexTable__TableRow--selected","TableRow-subdued":"Polaris-IndexTable__TableRow--subdued","TableRow-disabled":"Polaris-IndexTable__TableRow--disabled","TableHeading":"Polaris-IndexTable__TableHeading","TableHeading-flush":"Polaris-IndexTable__TableHeading--flush","ColumnHeaderCheckboxWrapper":"Polaris-IndexTable__ColumnHeaderCheckboxWrapper","FirstStickyHeaderElement":"Polaris-IndexTable__FirstStickyHeaderElement","TableHeading-unselectable":"Polaris-IndexTable__TableHeading--unselectable","TableCell-flush":"Polaris-IndexTable__TableCell--flush","Table-sticky-scrolling":"Polaris-IndexTable--tableStickyScrolling","TableHeading-last":"Polaris-IndexTable__TableHeading--last","Table-sticky-last":"Polaris-IndexTable--tableStickyLast","StickyTable":"Polaris-IndexTable__StickyTable","StickyTableHeader":"Polaris-IndexTable__StickyTableHeader","StickyTableHeader-isSticky":"Polaris-IndexTable__StickyTableHeader--isSticky","StickyTableColumnHeader":"Polaris-IndexTable__StickyTableColumnHeader","StickyTableColumnHeader-isScrolling":"Polaris-IndexTable__StickyTableColumnHeader--isScrolling","StickyTableHeadings":"Polaris-IndexTable__StickyTableHeadings","StickyTableHeading-second":"Polaris-IndexTable__StickyTableHeading--second","unselectable":"Polaris-IndexTable--unselectable","StickyTableHeading-second-scrolling":"Polaris-IndexTable--stickyTableHeadingSecondScrolling","ScrollLeft":"Polaris-IndexTable__ScrollLeft","ScrollRight":"Polaris-IndexTable__ScrollRight","ScrollRight-onboarding":"Polaris-IndexTable__ScrollRight--onboarding","BulkActionsWrapper":"Polaris-IndexTable__BulkActionsWrapper","ScrollBarContainer":"Polaris-IndexTable__ScrollBarContainer","scrollBarContainerCondensed":"Polaris-IndexTable--scrollBarContainerCondensed","scrollBarContainerHidden":"Polaris-IndexTable--scrollBarContainerHidden","ScrollBar":"Polaris-IndexTable__ScrollBar","disableTextSelection":"Polaris-IndexTable--disableTextSelection","selectMode":"Polaris-IndexTable--selectMode","EmptySearchResultWrapper":"Polaris-IndexTable__EmptySearchResultWrapper","condensedRow":"Polaris-IndexTable--condensedRow","CondensedList":"Polaris-IndexTable__CondensedList","HeaderWrapper":"Polaris-IndexTable__HeaderWrapper","StickyTable-condensed":"Polaris-IndexTable__StickyTable--condensed","StickyTableHeader-condensed":"Polaris-IndexTable__StickyTableHeader--condensed","ScrollBarContent":"Polaris-IndexTable__ScrollBarContent"}
\ No newline at end of file
+{"IndexTable":"Polaris-IndexTable","LoadingContainer-enter":"Polaris-IndexTable__LoadingContainer--enter","LoadingContainer-enter-active":"Polaris-IndexTable--loadingContainerEnterActive","LoadingContainer-exit":"Polaris-IndexTable__LoadingContainer--exit","LoadingContainer-exit-active":"Polaris-IndexTable--loadingContainerExitActive","LoadingPanel":"Polaris-IndexTable__LoadingPanel","LoadingPanelRow":"Polaris-IndexTable__LoadingPanelRow","LoadingPanelText":"Polaris-IndexTable__LoadingPanelText","Table":"Polaris-IndexTable__Table","Table-scrolling":"Polaris-IndexTable__Table--scrolling","TableCell-first":"Polaris-IndexTable__TableCell--first","TableCell":"Polaris-IndexTable__TableCell","TableHeading-first":"Polaris-IndexTable__TableHeading--first","TableHeading-second":"Polaris-IndexTable__TableHeading--second","Table-unselectable":"Polaris-IndexTable__Table--unselectable","TableRow":"Polaris-IndexTable__TableRow","TableRow-unclickable":"Polaris-IndexTable__TableRow--unclickable","statusSuccess":"Polaris-IndexTable--statusSuccess","statusSubdued":"Polaris-IndexTable--statusSubdued","TableRow-hovered":"Polaris-IndexTable__TableRow--hovered","TableRow-selected":"Polaris-IndexTable__TableRow--selected","TableRow-subdued":"Polaris-IndexTable__TableRow--subdued","TableRow-disabled":"Polaris-IndexTable__TableRow--disabled","TableHeading":"Polaris-IndexTable__TableHeading","TableHeading-sortable":"Polaris-IndexTable__TableHeading--sortable","TableHeading-flush":"Polaris-IndexTable__TableHeading--flush","TableHeadingSortButton":"Polaris-IndexTable__TableHeadingSortButton","TableHeadingSortIcon":"Polaris-IndexTable__TableHeadingSortIcon","TableHeadingSortIcon-visible":"Polaris-IndexTable__TableHeadingSortIcon--visible","ColumnHeaderCheckboxWrapper":"Polaris-IndexTable__ColumnHeaderCheckboxWrapper","FirstStickyHeaderElement":"Polaris-IndexTable__FirstStickyHeaderElement","TableHeading-unselectable":"Polaris-IndexTable__TableHeading--unselectable","TableCell-flush":"Polaris-IndexTable__TableCell--flush","Table-sticky-scrolling":"Polaris-IndexTable--tableStickyScrolling","TableHeading-last":"Polaris-IndexTable__TableHeading--last","Table-sticky-last":"Polaris-IndexTable--tableStickyLast","StickyTable":"Polaris-IndexTable__StickyTable","StickyTableHeader":"Polaris-IndexTable__StickyTableHeader","StickyTableHeader-isSticky":"Polaris-IndexTable__StickyTableHeader--isSticky","StickyTableColumnHeader":"Polaris-IndexTable__StickyTableColumnHeader","StickyTableColumnHeader-isScrolling":"Polaris-IndexTable__StickyTableColumnHeader--isScrolling","StickyTableHeadings":"Polaris-IndexTable__StickyTableHeadings","StickyTableHeading-second":"Polaris-IndexTable__StickyTableHeading--second","unselectable":"Polaris-IndexTable--unselectable","StickyTableHeading-second-scrolling":"Polaris-IndexTable--stickyTableHeadingSecondScrolling","ScrollLeft":"Polaris-IndexTable__ScrollLeft","ScrollRight":"Polaris-IndexTable__ScrollRight","ScrollRight-onboarding":"Polaris-IndexTable__ScrollRight--onboarding","BulkActionsWrapper":"Polaris-IndexTable__BulkActionsWrapper","ScrollBarContainer":"Polaris-IndexTable__ScrollBarContainer","scrollBarContainerCondensed":"Polaris-IndexTable--scrollBarContainerCondensed","scrollBarContainerHidden":"Polaris-IndexTable--scrollBarContainerHidden","ScrollBar":"Polaris-IndexTable__ScrollBar","disableTextSelection":"Polaris-IndexTable--disableTextSelection","selectMode":"Polaris-IndexTable--selectMode","EmptySearchResultWrapper":"Polaris-IndexTable__EmptySearchResultWrapper","condensedRow":"Polaris-IndexTable--condensedRow","CondensedList":"Polaris-IndexTable__CondensedList","HeaderWrapper":"Polaris-IndexTable__HeaderWrapper","StickyTable-condensed":"Polaris-IndexTable__StickyTable--condensed","StickyTableHeader-condensed":"Polaris-IndexTable__StickyTableHeader--condensed","ScrollBarContent":"Polaris-IndexTable__ScrollBarContent"}
\ No newline at end of file
diff --git a/src/classes/InlineCode.json b/src/classes/InlineCode.json
new file mode 100644
index 00000000..40d0cb24
--- /dev/null
+++ b/src/classes/InlineCode.json
@@ -0,0 +1 @@
+{"Code":"Polaris-InlineCode__Code"}
\ No newline at end of file
diff --git a/src/classes/Text.json b/src/classes/Text.json
new file mode 100644
index 00000000..02170fc2
--- /dev/null
+++ b/src/classes/Text.json
@@ -0,0 +1 @@
+{"root":"Polaris-Text--root","block":"Polaris-Text--block","truncate":"Polaris-Text--truncate","visuallyHidden":"Polaris-Text--visuallyHidden","start":"Polaris-Text--start","center":"Polaris-Text--center","end":"Polaris-Text--end","justify":"Polaris-Text--justify","success":"Polaris-Text--success","critical":"Polaris-Text--critical","warning":"Polaris-Text--warning","subdued":"Polaris-Text--subdued","regular":"Polaris-Text--regular","medium":"Polaris-Text--medium","semibold":"Polaris-Text--semibold","bold":"Polaris-Text--bold","headingXs":"Polaris-Text--headingXs","headingSm":"Polaris-Text--headingSm","headingMd":"Polaris-Text--headingMd","headingLg":"Polaris-Text--headingLg","headingXl":"Polaris-Text--headingXl","heading2xl":"Polaris-Text--heading2xl","heading3xl":"Polaris-Text--heading3xl","heading4xl":"Polaris-Text--heading4xl","bodySm":"Polaris-Text--bodySm","bodyMd":"Polaris-Text--bodyMd","bodyLg":"Polaris-Text--bodyLg"}
\ No newline at end of file
diff --git a/src/components/AppProvider/AppProvider.vue b/src/components/AppProvider/AppProvider.vue
index 17f01f93..cf943e59 100644
--- a/src/components/AppProvider/AppProvider.vue
+++ b/src/components/AppProvider/AppProvider.vue
@@ -1,31 +1,24 @@
 <template lang="pug">
-CustomProperties(:color-scheme="colorScheme")
+.polaris-app-provider
   EventListener(event="resize", :handler="handleResize")
   slot
   #PolarisPortalsContainer
+  component(is="style") {{ style }}
 </template>
 
 <script setup lang="ts">
-import { provide, ref, onMounted, watch } from 'vue';
+import { provide, ref, onMounted } from 'vue';
 import { debounce } from 'polaris/polaris-react/src/utilities/debounce';
 import { ScrollLockManager } from 'polaris/polaris-react/src/utilities/scroll-lock-manager/scroll-lock-manager';
 import { UniqueIdFactory, globalIdGeneratorFactory } from 'polaris/polaris-react/src/utilities/unique-id/unique-id-factory';
 import { navigationBarCollapsed } from '@/utilities/breakpoints';
 import { I18n } from '@/utilities/i18n';
 import lang from 'polaris/polaris-react/locales/en.json';
-import { EventListener, CustomProperties } from '@/components';
+import { EventListener } from '@/components';
 import { PortalManager } from '@/utilities/portal-manager';
 import { FocusManager } from '@/utilities/focus-manager';
 import { StickyManager } from '@/utilities/sticky-manager';
-import type { CustomPropertiesProps } from '../CustomProperties/utils';
-import { DEFAULT_COLOR_SCHEME } from '../CustomProperties/utils';
-
-const props = defineProps({
-  colorScheme: {
-    type: String as () => CustomPropertiesProps['colorScheme'],
-    default: DEFAULT_COLOR_SCHEME,
-  },
-});
+import style from '@shopify/polaris-tokens/css/styles.css?raw';
 
 const stickyManager = new StickyManager();
 
@@ -42,7 +35,6 @@ const isNavigationCollapsed = ref(navigationBarCollapsed().matches);
 const setBodyStyles = () => {
   // Inlining the following custom properties to maintain backward
   // compatibility with the legacy ThemeProvider implementation.
-  document.body.setAttribute('p-color-scheme', props.colorScheme || DEFAULT_COLOR_SCHEME);
   document.body.style.backgroundColor = 'var(--p-background)';
   document.body.style.color = 'var(--p-text)';
 };
@@ -57,15 +49,6 @@ const handleResize = debounce(
   {trailing: true, leading: true, maxWait: 40},
 );
 
-watch(
-  () => props.colorScheme,
-  (newColorScheme: CustomPropertiesProps['colorScheme'], oldColorScheme: CustomPropertiesProps['colorScheme']) => {
-    if (newColorScheme !== oldColorScheme) {
-      setBodyStyles();
-    }
-  },
-);
-
 onMounted(() => {
   if (document !== null) {
     setBodyStyles();
diff --git a/src/components/Autocomplete/Autocomplete.vue b/src/components/Autocomplete/Autocomplete.vue
index 36e0d6eb..299a1874 100644
--- a/src/components/Autocomplete/Autocomplete.vue
+++ b/src/components/Autocomplete/Autocomplete.vue
@@ -171,6 +171,11 @@ const isShowEmptyState = computed(() => {
 });
 
 const updateSelection = (newSelection: string) => {
+  if (props.actionBefore && newSelection === props.actionBefore.content) {
+    props.actionBefore.onAction && props.actionBefore.onAction();
+    return;
+  }
+
   if (props.allowMultiple) {
     if (props.modelValue.includes(newSelection)) {
       emits('select', props.modelValue.filter((option) => option !== newSelection));
diff --git a/src/components/ChoiceList/ChoiceList.vue b/src/components/ChoiceList/ChoiceList.vue
index b9e735e2..5829fc4b 100644
--- a/src/components/ChoiceList/ChoiceList.vue
+++ b/src/components/ChoiceList/ChoiceList.vue
@@ -15,6 +15,7 @@ fieldset(
       component(
         :is="allowMultiple ? Checkbox : RadioButton",
         :name="finalName",
+        :id="id",
         :value="choice.value",
         :checked="isChoiceSelected(choice)",
         :disabled="choice.disabled || disabled",
@@ -72,6 +73,8 @@ interface Props {
   titleHidden?: boolean;
   /** Display an error message */
   error?: ErrorType;
+  /** A unique identifier for the choice */
+  id?: string;
   /** Disable all choices */
   disabled?: boolean;
 }
diff --git a/src/components/Combobox/Combobox.vue b/src/components/Combobox/Combobox.vue
index 0f1867ae..1442256c 100644
--- a/src/components/Combobox/Combobox.vue
+++ b/src/components/Combobox/Combobox.vue
@@ -47,7 +47,6 @@ const activeOptionId = ref('');
 const textFieldLabelId = ref('');
 const listboxId = ref('');
 const textFieldFocused = ref(false);
-const disableCloseOnSelect = ref(false);
 const popoverRef = ref(null);
 
 const slots = useSlots();
@@ -58,10 +57,8 @@ const shouldOpen = computed(() => !popoverActive.value && defaultSlot);
 const willLoadMoreOptions = computed(() => props.willLoadMoreOptions);
 
 const handleClose = (): void =>  {
-  if (!disableCloseOnSelect.value) {
-    popoverActive.value = false;
-    emits('close');
-  }
+  popoverActive.value = false;
+  emits('close');
 
   activeOptionId.value = '';
 };
@@ -76,8 +73,6 @@ const onOptionSelected = (): void => {
     handleClose();
     activeOptionId.value = '';
     return;
-  } else {
-    disableCloseOnSelect.value = true;
   }
 
   // TODO: waiting for forceUpdatePosition method in Popover
@@ -97,8 +92,6 @@ const handleChange = (): void => {
 };
 
 const handleBlur = (): void => {
-  disableCloseOnSelect.value = false;
-
   if (popoverActive.value) {
     handleClose();
   }
diff --git a/src/components/CustomProperties/CustomProperties.vue b/src/components/CustomProperties/CustomProperties.vue
deleted file mode 100644
index 76781d9a..00000000
--- a/src/components/CustomProperties/CustomProperties.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template lang="pug">
-component(
-  v-bind="$attrs",
-  :is="as",
-  :p-color-scheme="colorScheme",
-  :style="styles",
-)
-  slot
-</template>
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { ColorScheme } from '@shopify/polaris-tokens';
-import { DEFAULT_COLOR_SCHEME } from './utils';
-
-interface CustomPropertiesProps {
-  /** Determines what color scheme is applied to child content. */
-  colorScheme?: ColorScheme;
-  /** Element used for the root node. */
-  as?: string;
-  /** Inline styles applied to the root element. */
-  style?: Record<string, string>;
-}
-
-const props = withDefaults(defineProps<CustomPropertiesProps>(), {
-  colorScheme: DEFAULT_COLOR_SCHEME,
-  as: 'div',
-});
-
-const styles = computed(() => ({
-  color: 'var(--p-text)',
-  ...props.style,
-}));
-</script>
-
-<style lang="scss">
-@import '@shopify/polaris-tokens/scss/styles.scss';
-</style>
diff --git a/src/components/CustomProperties/README.stories.mdx b/src/components/CustomProperties/README.stories.mdx
deleted file mode 100644
index 87cc9dd6..00000000
--- a/src/components/CustomProperties/README.stories.mdx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { CustomProperties, AppProvider, Card, TextContainer, CardSection, List, ListItem } from '@/polaris-vue';
-import dedent from 'ts-dedent';
-import { ref } from 'vue';
-
-<Meta
-  title="Components / Structure / CustomProperties"
-  component={ CustomProperties }
-  argTypes={{
-    default: { table: { disable: true } },
-    as: {
-      description: 'Element used for the root node.',
-      table: {
-        type: { summary: 'string' },
-      },
-      control: { type: 'text' }
-    },
-    colorScheme: {
-      description: 'Determines what color scheme is applied to child content.',
-      table: {
-        type: { summary: 'light | dark' },
-        defaultValue: { summary: 'light' },
-      },
-      control: { type: 'select', options: ['light', 'dark'] },
-    }
-  }}
-/>
-
-export const Template = (args) => ({
-  components: { AppProvider, CustomProperties, Card, TextContainer, CardSection, List, ListItem },
-  setup() {
-    return { args };
-  },
-  template: dedent`
-  <AppProvider>
-    <TextContainer>
-      <Card
-        title="Shipment 1234"
-        :secondaryFooterActions="[{content: 'Edit shipment'}]"
-        :primaryFooterAction="{content: 'Add tracking number'}"
-      >
-        <CardSection title="Items">
-          <List>
-            <ListItem>1 &times; Oasis Glass, 4-Pack</ListItem>
-            <ListItem>1 &times; Anubis Cup, 2-Pack</ListItem>
-          </List>
-        </CardSection>
-      </Card>
-      <CustomProperties color-scheme="dark">
-        <Card
-          title="Shipment 1234"
-          :secondaryFooterActions="[{content: 'Edit shipment'}]"
-          :primaryFooterAction="{content: 'Add tracking number'}"
-        >
-          <CardSection title="Items">
-            <List>
-              <ListItem>1 &times; Oasis Glass, 4-Pack</ListItem>
-              <ListItem>1 &times; Anubis Cup, 2-Pack</ListItem>
-            </List>
-          </CardSection>
-        </Card>
-      </CustomProperties>
-    </TextContainer>
-  </AppProvider>
-  `,
-});
-
-# CustomProperties
-
-Use the custom properties component to share global theme settings throughout the hierarchy of your application. Custom properties is included by default as a child of the [app provider component](./?path=/docs/components-structure-app-provider) but can be used independently to apply a base color scheme to its children.
-
-<Canvas>
-  <Story
-    name="CustomProperties"
-    height="500px"
-    inline={false}
-    parameters={{
-      docs: {
-        source: {
-          code: dedent`
-          <AppProvider>
-            <TextContainer>
-              <Card
-                title="Shipment 1234"
-                :secondaryFooterActions="[{content: 'Edit shipment'}]"
-                :primaryFooterAction="{content: 'Add tracking number'}"
-              >
-                <CardSection title="Items">
-                  <List>
-                    <ListItem>1 &times; Oasis Glass, 4-Pack</ListItem>
-                    <ListItem>1 &times; Anubis Cup, 2-Pack</ListItem>
-                  </List>
-                </CardSection>
-              </Card>
-              <CustomProperties color-scheme="dark">
-                <Card
-                  title="Shipment 1234"
-                  :secondaryFooterActions="[{content: 'Edit shipment'}]"
-                  :primaryFooterAction="{content: 'Add tracking number'}"
-                >
-                  <CardSection title="Items">
-                    <List>
-                      <ListItem>1 &times; Oasis Glass, 4-Pack</ListItem>
-                      <ListItem>1 &times; Anubis Cup, 2-Pack</ListItem>
-                    </List>
-                  </CardSection>
-                </Card>
-              </CustomProperties>
-            </TextContainer>
-          </AppProvider>
-            `,
-        },
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="CustomProperties" />
-
diff --git a/src/components/CustomProperties/index.ts b/src/components/CustomProperties/index.ts
deleted file mode 100644
index 964ea421..00000000
--- a/src/components/CustomProperties/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as CustomProperties } from './CustomProperties.vue';
diff --git a/src/components/CustomProperties/utils.ts b/src/components/CustomProperties/utils.ts
deleted file mode 100644
index de355e21..00000000
--- a/src/components/CustomProperties/utils.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { ColorScheme } from '@shopify/polaris-tokens';
-
-export const DEFAULT_COLOR_SCHEME: ColorScheme = 'light';
-
-export interface CustomPropertiesProps {
-  /** Determines what color scheme is applied to child content. */
-  colorScheme?: ColorScheme;
-  /** Element used for the root node. */
-  as?: string;
-}
diff --git a/src/components/FormLayout/components/Item/Item.vue b/src/components/FormLayout/components/Item/Item.vue
index 8d8c759a..1a104bd2 100644
--- a/src/components/FormLayout/components/Item/Item.vue
+++ b/src/components/FormLayout/components/Item/Item.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-div(:class="styles.Item")
+div(v-if="$slots.default", :class="styles.Item")
   slot
 </template>
 
diff --git a/src/components/Frame/Frame.vue b/src/components/Frame/Frame.vue
index 4acb7109..47eb91dd 100644
--- a/src/components/Frame/Frame.vue
+++ b/src/components/Frame/Frame.vue
@@ -107,7 +107,7 @@ import { computed, onMounted, provide, ref, useSlots, watch } from 'vue';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import { dataPolarisTopBar, layer } from 'polaris/polaris-react/src/components/shared';
 import { setRootProperty } from 'polaris/polaris-react/src/utilities/set-root-property';
-import { tokens } from '@shopify/polaris-tokens';
+import { motion } from '@shopify/polaris-tokens';
 import { UseI18n } from '@/use';
 import styles from '@/classes/Frame.json';
 import MobileCancelMajor from '@icons/MobileCancelMajor.svg';
@@ -149,8 +149,8 @@ const APP_FRAME_NAV = 'AppFrameNav';
 const APP_FRAME_TOP_BAR = 'AppFrameTopBar';
 const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar';
 
-const CONTEXTUALSAVEBAR_FADE_DURATION = parseInt(tokens.motion['duration-400'].value, 10);
-const NAVIGATION_ANIMATION_DURATION = parseInt(tokens.motion['duration-300'].value, 10);
+const CONTEXTUALSAVEBAR_FADE_DURATION = parseInt(motion['duration-400'], 10);
+const NAVIGATION_ANIMATION_DURATION = parseInt(motion['duration-300'], 10);
 
 const props = defineProps<FrameProps>();
 
diff --git a/src/components/Frame/README.stories.mdx b/src/components/Frame/README.stories.mdx
index 7df0e20c..5c25736d 100644
--- a/src/components/Frame/README.stories.mdx
+++ b/src/components/Frame/README.stories.mdx
@@ -77,10 +77,6 @@ export const Template = (args) => ({
       isLoading: false,
       isDirty: false,
       toastActive: false,
-      userMenuAction: [
-        { items: [{ content: 'Back to Shopify', icon: ArrowLeftMinor }] },
-        { items: [{ content: 'Community forums' }] },
-      ],
       userMenuMessage: {
         title: 'Another Message',
         description:'This is a description of message',
@@ -129,10 +125,14 @@ export const Template = (args) => ({
       topBarSource: 'https://github.com/ownego/polaris-vue/raw/dev/public/images/logo.png',
       contextualSaveBarSource: 'https://github.com/ownego/polaris-vue/raw/dev/public/images/logo.png',
     }
+    const userMenuAction = [
+      { items: [{ content: 'Back to Shopify', icon: ArrowLeftMinor }] },
+      { items: [{ content: 'Community forums' }] },
+    ];
     const navItems = [
       { label: 'Back to Shopify', icon: ArrowLeftMinor },
     ];
-    return { logo, navItems, QuestionMarkMajor, CirclePlusOutlineMinor };
+    return { userMenuAction, logo, navItems, QuestionMarkMajor, CirclePlusOutlineMinor };
   },
   template: `
     <Frame
diff --git a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.vue b/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.vue
index df365554..59b777b8 100644
--- a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.vue
+++ b/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.vue
@@ -1,52 +1,51 @@
 <template lang="pug">
-CustomProperties(color-scheme="dark")
-  div(:class="styles.ContextualSaveBar")
-    div(
-      v-if="slots.contextControl",
-      :class="styles.ContextControl",
+div(:class="styles.ContextualSaveBar")
+  div(
+    v-if="slots.contextControl",
+    :class="styles.ContextControl",
+  )
+    slot(name="contextControl")
+  div(
+    v-if="!alignContentFlush && !slots.contextControl",
+    :class="styles.LogoContainer",
+    :style="width",
+  )
+    Image(
+      v-if="logo",
+      :style="{ width }",
+      :source="logo.contextualSaveBarSource || ''",
+      alt="",
     )
-      slot(name="contextControl")
-    div(
-      v-if="!alignContentFlush && !slots.contextControl",
-      :class="styles.LogoContainer",
-      :style="width",
-    )
-      Image(
-        v-if="logo",
-        :style="{ width }",
-        :source="logo.contextualSaveBarSource || ''",
-        alt="",
+  div(:class="contentsClassName")
+    h2(:class="styles.Message") {{ message }}
+    div(:class="styles.ActionContainer")
+      Stack(
+        spacing="tight",
+        :wrap="false",
       )
-    div(:class="contentsClassName")
-      h2(:class="styles.Message") {{ message }}
-      div(:class="styles.ActionContainer")
-        Stack(
-          spacing="tight",
-          :wrap="false",
+        slot(name="secondaryMenu")
+          span &nbsp;
+        Button(
+          v-if="discardAction",
+          :url="discardAction.url",
+          :loading="discardAction.loading",
+          :disabled="discardAction.disabled",
+          :accessibilityLabel="discardAction.content",
+          @click="discardActionHandler",
+        )
+          template(v-if="discardAction.content") {{ discardAction.content }}
+          template(v-else) {{ discardLang }}
+        Button(
+          v-if="saveAction",
+          primary,
+          :url="saveAction.url",
+          :loading="saveAction.loading",
+          :disabled="saveAction.disabled",
+          :accessibilityLabel="saveAction.content",
+          @click="handleSaveAction",
         )
-          slot(name="secondaryMenu")
-            span &nbsp;
-          Button(
-            v-if="discardAction",
-            :url="discardAction.url",
-            :loading="discardAction.loading",
-            :disabled="discardAction.disabled",
-            :accessibilityLabel="discardAction.content",
-            @click="discardActionHandler",
-          )
-            template(v-if="discardAction.content") {{ discardAction.content }}
-            template(v-else) {{ discardLang }}
-          Button(
-            v-if="saveAction",
-            primary,
-            :url="saveAction.url",
-            :loading="saveAction.loading",
-            :disabled="saveAction.disabled",
-            :accessibilityLabel="saveAction.content",
-            @click="saveAction.onAction",
-          )
-            template(v-if="saveAction.content") {{ saveAction.content }}
-            template(v-else) {{ saveLang }}
+          template(v-if="saveAction.content") {{ saveAction.content }}
+          template(v-else) {{ saveLang }}
 DiscardConfirmationModal(
   v-if="discardAction && discardAction.onAction && discardAction.discardConfirmationModal",
   :open="discardConfirmationModalVisible",
@@ -59,7 +58,7 @@ DiscardConfirmationModal(
 import { computed, ref, useSlots } from 'vue';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import { getWidth } from 'polaris/polaris-react/src/utilities/get-width';
-import { CustomProperties, Stack, Image, Button } from '@/components';
+import { Stack, Image, Button } from '@/components';
 import styles from '@/classes/Frame-ContextualSaveBar.json';
 import type { ContextualSaveBarAction, ContextualSaveBarCombinedActionProps } from '@/utilities/frame/types';
 import { UseFrame } from '@/utilities/frame';
@@ -103,6 +102,10 @@ const width = getWidth(logo, 104);
 
 const discardConfirmationModalVisible = ref(false);
 
+const handleSaveAction = (e: Event) => {
+  props.saveAction?.onAction && props.saveAction.onAction();
+};
+
 const toggleDiscardConfirmationModal = () => {
   discardConfirmationModalVisible.value = !discardConfirmationModalVisible.value;
 };
diff --git a/src/components/Frame/components/Toast/Toast.vue b/src/components/Frame/components/Toast/Toast.vue
index 2451d45a..14430dca 100644
--- a/src/components/Frame/components/Toast/Toast.vue
+++ b/src/components/Frame/components/Toast/Toast.vue
@@ -1,35 +1,34 @@
 <template lang="pug">
-CustomProperties(color-scheme="dark")
-  div(:class="className")
-    KeypressListener(
-      :keyCode="Key.Escape",
-      :handler="onDismiss",
+div(:class="className")
+  KeypressListener(
+    :keyCode="Key.Escape",
+    :handler="onDismiss",
+  )
+  | {{ content }}
+  slot
+  div(
+    v-if="action",
+    :class="styles.Action",
+  )
+    PButton(
+      plain,
+      monochrome,
+      @click="handleAction",
     )
-    | {{ content }}
-    slot
-    div(
-      v-if="action",
-      :class="styles.Action",
-    )
-      PButton(
-        plain,
-        monochrome,
-        @click="action.onAction",
-      )
-        | {{ action.content }}
-    button(
-      type="button",
-      :class="styles.CloseButton",
-      @click="onDismiss",
-    )
-      Icon(:source="MobileCancelMajor")
+      | {{ action.content }}
+  button(
+    type="button",
+    :class="styles.CloseButton",
+    @click="onDismiss",
+  )
+    Icon(:source="MobileCancelMajor")
 </template>
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import styles from '@/classes/Frame-Toast.json';
-import { KeypressListener, Button as PButton, CustomProperties, Icon } from '@/components';
+import { KeypressListener, Button as PButton, Icon } from '@/components';
 import type { Action } from '@/utilities/type';
 import { Key } from '@/components/KeypressListener/utils';
 import MobileCancelMajor from '@icons/MobileCancelMajor.svg';
@@ -88,6 +87,10 @@ onBeforeUnmount(() => {
 const onDismiss = () => {
   emits('dismiss');
 };
+
+const handleAction = (e: Event) => {
+  props.action?.onAction && props.action.onAction();
+};
 </script>
 
 <style lang="scss">
diff --git a/src/components/IndexTable/IndexTable.vue b/src/components/IndexTable/IndexTable.vue
index fbb110ad..d2ee7e41 100644
--- a/src/components/IndexTable/IndexTable.vue
+++ b/src/components/IndexTable/IndexTable.vue
@@ -11,6 +11,7 @@ IndexProvider(
 )
   IndexTableBase(
     v-bind="indexTableBaseProps",
+    @sort="onSort",
   )
     slot
     template(v-if="hasSlot(slots.sort)", #sort)
@@ -21,13 +22,11 @@ IndexProvider(
 
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
-import type {
-  SelectionType,
-} from '@/utilities/index-provider';
+import type { SelectionType } from '@/utilities/index-provider';
 import { IndexProvider } from '@/components';
 import { hasSlot } from '@/utilities/has-slot';
 import IndexTableBase from './IndexTableBase.vue';
-import type { IndexTableHeading } from './utils';
+import type { IndexTableHeading, IndexTableSortDirection } from './utils';
 import type { BulkActionsProps } from '@/components/BulkActions/utils';
 
 type Range = [number, number];
@@ -60,6 +59,19 @@ interface IndexTableProps {
   paginatedSelectAllActionText?: string;
   /** Sticky the last column on horizontal scrolling */
   lastColumnSticky?: boolean;
+  /** List of booleans, which maps to whether sorting is enabled or not for each column. Defaults to false for all columns.  */
+  sortable?: boolean[];
+  /**
+   * The direction to sort the table rows on first click or keypress of a sortable column heading. Defaults to ascending.
+   * @default 'descending'
+   */
+  defaultSortDirection?: IndexTableSortDirection;
+  /** The current sorting direction. */
+  sortDirection?: IndexTableSortDirection;
+  /**
+   * The index of the heading that the table rows are sorted by.
+   */
+  sortColumnIndex?: number;
 }
 
 interface IndexTableBaseProps {
@@ -68,6 +80,10 @@ interface IndexTableBaseProps {
   bulkActions?: BulkActionsProps['actions'];
   paginatedSelectAllActionText?: string;
   lastColumnSticky?: boolean;
+  sortable?: boolean[];
+  defaultSortDirection?: IndexTableSortDirection;
+  sortDirection?: IndexTableSortDirection;
+  sortColumnIndex?: number;
 }
 
 const props = withDefaults(defineProps<IndexTableProps>(), {
@@ -84,6 +100,8 @@ const emits = defineEmits<{
     toggleType: boolean,
     selection?: string | Range,
   ): void;
+  /** Callback fired on click or keypress of a sortable column heading. */
+  (e: 'sort', index: number, direction: IndexTableSortDirection): void;
 }>();
 
 const slots = useSlots();
@@ -96,6 +114,10 @@ const onSelectionChange = (
   emits('selection-change', selectionType, toggleType, selection);
 }
 
+const onSort = (index: number, direction: IndexTableSortDirection) => {
+  emits('sort', index, direction);
+};
+
 const indexTableBaseProps = computed<IndexTableBaseProps>(() => {
   return {
     headings: props.headings,
@@ -103,6 +125,10 @@ const indexTableBaseProps = computed<IndexTableBaseProps>(() => {
     bulkActions: props.bulkActions,
     paginatedSelectAllActionText: props.paginatedSelectAllActionText,
     lastColumnSticky: props.lastColumnSticky,
+    sortable: props.sortable,
+    defaultSortDirection: props.defaultSortDirection,
+    sortDirection: props.sortDirection,
+    sortColumnIndex: props.sortColumnIndex,
   };
 });
 </script>
diff --git a/src/components/IndexTable/IndexTableBase.vue b/src/components/IndexTable/IndexTableBase.vue
index da7c80f3..0e8bb903 100644
--- a/src/components/IndexTable/IndexTableBase.vue
+++ b/src/components/IndexTable/IndexTableBase.vue
@@ -143,31 +143,29 @@ div(:class="styles.IndexTable")
                           template(#label) {{ checkboxLabel }}
                   StackItem(v-if="selectable")
                     div(:class="styles['StickyTableHeading-second-scrolling']")
-                      Stack(
-                        v-if="headings[0].new",
-                        :wrap="false",
-                        alignment="center"
+                      HeadingContentWrapper(
+                        :heading="headings[0]",
+                        :index="0",
+                        :sortable="sortable",
+                        :defaultSortDirection="defaultSortDirection",
+                        :sortDirection="sortDirection",
+                        :sortColumnIndex="sortColumnIndex",
+                        @sort="handleSort",
                       )
-                        span {{ headings[0].title }}
-                        Badge(status="new")
-                          | {{ i18n.translate('Polaris.IndexTable.onboardingBadgeText') }}
-                      VisuallyHidden(v-else-if="headings[0].hidden") {{ headings[0].title }}
-                      template(v-else) {{ headings[0].title }}
                   StackItem(v-if="!selectable")
                     div(
                       :class="styles.FirstStickyHeaderElement",
                       ref="firstStickyHeaderElement",
                     )
-                      Stack(
-                        v-if="headings[0].new",
-                        :wrap="false",
-                        alignment="center"
+                      HeadingContentWrapper(
+                        :heading="headings[0]",
+                        :index="0",
+                        :sortable="sortable",
+                        :defaultSortDirection="defaultSortDirection",
+                        :sortDirection="sortDirection",
+                        :sortColumnIndex="sortColumnIndex",
+                        @sort="handleSort",
                       )
-                        span {{ headings[0].title }}
-                        Badge(status="new")
-                          | {{ i18n.translate('Polaris.IndexTable.onboardingBadgeText') }}
-                      VisuallyHidden(v-else-if="headings[0].hidden") {{ headings[0].title }}
-                      template(v-else) {{ headings[0].title }}
 
             div(
               :class="styles.StickyTableHeadings",
@@ -181,16 +179,15 @@ div(:class="styles.IndexTable")
                 :style="renderStickyHeading(index)",
                 data-index-table-sticky-heading="true",
               )
-                Stack(
-                  v-if="heading.new",
-                  :wrap="false",
-                  alignment="center"
+                HeadingContentWrapper(
+                  :heading="heading",
+                  :index="index",
+                  :sortable="sortable",
+                  :defaultSortDirection="defaultSortDirection",
+                  :sortDirection="sortDirection",
+                  :sortColumnIndex="sortColumnIndex",
+                  @sort="handleSort",
                 )
-                  span {{ heading.title }}
-                  Badge(status="new")
-                    | {{ i18n.translate('Polaris.IndexTable.onboardingBadgeText') }}
-                VisuallyHidden(v-else-if="heading.hidden") {{ heading.title }}
-                template(v-else) {{ heading.title }}
     ul(
       v-if="condensed",
       :data-selectmode="Boolean(selectMode || isSmallScreenSelectable)",
@@ -227,16 +224,15 @@ div(:class="styles.IndexTable")
                 :style="stickyPositioningStyle(index)",
                 data-index-table-heading="true",
               )
-                Stack(
-                  v-if="heading.new",
-                  :wrap="false",
-                  alignment="center"
+                HeadingContentWrapper(
+                  :heading="heading",
+                  :index="index",
+                  :sortable="sortable",
+                  :defaultSortDirection="defaultSortDirection",
+                  :sortDirection="sortDirection",
+                  :sortColumnIndex="sortColumnIndex",
+                  @sort="handleSort",
                 )
-                  span {{ heading.title }}
-                  Badge(status="new")
-                    | {{ i18n.translate('Polaris.IndexTable.onboardingBadgeText') }}
-                VisuallyHidden(v-else-if="heading.hidden") {{ heading.title }}
-                template(v-else) {{ heading.title }}
 
         tbody(ref="tableBodyRef")
           slot
@@ -271,11 +267,12 @@ import { ref, computed, onMounted, watch, useSlots } from 'vue';
 import { debounce } from 'polaris/polaris-react/src/utilities/debounce';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import EnableSelectionMinor from '@icons/EnableSelectionMinor.svg';
-import { tokens } from '@shopify/polaris-tokens';
+import { tokens, motion, toPx } from '@shopify/polaris-tokens';
 import { UseI18n } from '@/use';
 import { hasSlot } from '@/utilities/has-slot';
 import {
-  Badge,
+  BulkActions,
+  Button,
   Checkbox,
   EmptySearchResult,
   EventListener,
@@ -283,9 +280,6 @@ import {
   StackItem,
   Sticky,
   Spinner,
-  VisuallyHidden,
-  Button,
-  BulkActions,
 } from '@/components';
 import {
   useIndexValue,
@@ -294,8 +288,9 @@ import {
 } from '@/utilities/index-provider';
 import type { BulkActionsProps } from '../BulkActions/utils';
 import { ScrollContainer } from './components';
+import { HeadingContentWrapper } from './children';
 import { getTableHeadingsBySelector } from './utils';
-import type { IndexTableHeading } from './utils';
+import type { IndexTableHeading, IndexTableSortDirection } from './utils';
 import styles from '@/classes/IndexTable.json';
 
 interface IndexTableBaseProps {
@@ -304,6 +299,10 @@ interface IndexTableBaseProps {
   bulkActions?: BulkActionsProps['actions'];
   paginatedSelectAllActionText?: string;
   lastColumnSticky?: boolean;
+  sortable?: boolean[];
+  defaultSortDirection?: IndexTableSortDirection;
+  sortDirection?: IndexTableSortDirection;
+  sortColumnIndex?: number;
 }
 
 interface TableHeadingRect {
@@ -314,12 +313,16 @@ interface TableHeadingRect {
 const SCROLL_BAR_PADDING = 4;
 const SIXTY_FPS = 1000 / 60;
 const SCROLL_BAR_DEBOUNCE_PERIOD = 300;
-const SMALL_SCREEN_WIDTH = 458;
 
 const props = withDefaults(defineProps<IndexTableBaseProps>(), {
+  defaultSortDirection: 'descending',
   lastColumnSticky: false,
 });
 
+const emits = defineEmits<{
+  (e: 'sort', index: number, direction: IndexTableSortDirection): void;
+}>();
+
 const slots = useSlots();
 
 const {
@@ -345,10 +348,10 @@ const toggleHasMoreLeftColumns = () => {
   hasMoreLeftColumns.value = !hasMoreLeftColumns.value;
 };
 
-const isSmallScreen = () => {
+const isBreakpointsXS = () => {
   return typeof window === 'undefined'
     ? false
-    : window.innerWidth < SMALL_SCREEN_WIDTH;
+    : window.innerWidth < parseFloat(toPx(tokens.breakpoints['breakpoints-sm']) ?? '');
 };
 
 const tablePosition = ref({ top: 0, left: 0 });
@@ -362,7 +365,7 @@ const tableInitialized = ref(false);
 const isSmallScreenSelectable = ref(false);
 const stickyWrapper = ref<HTMLElement | null>(null);
 const hideScrollContainer = ref(false);
-const smallScreen = ref(isSmallScreen());
+const smallScreen = ref(isBreakpointsXS());
 
 const tableHeadings = ref<HTMLElement[]>([]);
 const stickyTableHeadings = ref<HTMLElement[]>([]);
@@ -449,7 +452,7 @@ const resizeTableHeadings = debounce(
     // update sticky header min-widths
     stickyTableHeadings.value.forEach((heading, index) => {
       let minWidth = 0;
-      if (index === 0 && (!isSmallScreen() || !selectable?.value)) {
+      if (index === 0 && (!isBreakpointsXS() || !selectable?.value)) {
         minWidth = calculateFirstHeaderOffset();
       } else if (selectable?.value && tableHeadingRects.value.length > index) {
         minWidth = tableHeadingRects.value[index]?.offsetWidth || 0;
@@ -756,6 +759,7 @@ const isLast = (index: number) => index === props.headings.length - 1;
 const headingContentClassName = (heading: IndexTableHeading, index: number) => {
   return classNames(
     styles.TableHeading,
+    props.sortable?.some((value) => value === true) && styles['TableHeading-sortable'],
     isSecond(index) && styles['TableHeading-second'],
     isLast(index) && !heading.hidden && styles['TableHeading-last'],
     !selectable?.value && styles['TableHeading-unselectable'],
@@ -785,6 +789,10 @@ const handleSelectPage = (event: Event) => {
   handleSelectionChange('page', target.checked || false);
 }
 
+const handleSort = (headingIndex: number, direction: IndexTableSortDirection) => {
+  emits('sort', headingIndex, direction);
+};
+
 const renderStickyHeading = (index: number) => {
   return tableHeadingRects.value && tableHeadingRects.value.length > (index + 1)
     ? { minWidth: `${tableHeadingRects.value[index + 1].offsetWidth}px` }
@@ -831,7 +839,7 @@ const onTransitionLeave = (el: Element, done) => {
   el.classList.add(loadingTransitionClassNames.exitActive);
   setTimeout(() => {
     done();
-  }, parseInt(tokens.motion['duration-100'].value, 10));
+  }, parseInt(motion['duration-100'], 10));
 };
 
 const onTransitionAfterLeave = (el: Element) => {
diff --git a/src/components/IndexTable/README.stories.mdx b/src/components/IndexTable/README.stories.mdx
index c24869ed..b2a754e4 100644
--- a/src/components/IndexTable/README.stories.mdx
+++ b/src/components/IndexTable/README.stories.mdx
@@ -40,6 +40,14 @@ import { ref, computed } from 'vue';
         type: { summary: '(selectionType: SelectionType, toggleType: boolean, selection?: string | Range): void' },
       },
     },
+    eventSort: {
+      control: { disable: true },
+      description: 'Callback fired on click or keypress of a sortable column heading.',
+      table: {
+        category: 'events',
+        type: { summary: '(index: number, direction: ascending | descending): void' },
+      },
+    },
     emptyState: {
       description: 'The markup to display when no resources exist yet. Renders when set and items is empty.',
       control: { disable: true },
@@ -54,6 +62,24 @@ import { ref, computed } from 'vue';
         type: { summary: null },
       },
     },
+    sortDirection: {
+      control: {
+        type: 'select',
+        options: ['ascending', 'descending'],
+      },
+      table: {
+        type: { summary: 'ascending | descending' },
+      },
+    },
+    defaultSortDirection: {
+      control: {
+        type: 'select',
+        options: ['ascending', 'descending'],
+      },
+      table: {
+        type: { summary: 'ascending | descending' },
+      },
+    },
   }}
 />
 
diff --git a/src/components/IndexTable/children/HeadingContent.vue b/src/components/IndexTable/children/HeadingContent.vue
new file mode 100644
index 00000000..8f5ff7d4
--- /dev/null
+++ b/src/components/IndexTable/children/HeadingContent.vue
@@ -0,0 +1,21 @@
+<template lang="pug">
+Stack(v-if="heading.new", :wrap="false", alignment="center")
+  span {{ heading.title }}
+  Badge(status="new")
+    | {{ i18n.translate('Polaris.IndexTable.onboardingBadgeText') }}
+VisuallyHidden(v-else-if="heading.hidden") {{ heading.title }}
+template(v-else) {{ heading.title }}
+</template>
+<script setup lang="ts">
+import { UseI18n } from '@/use';
+import { Stack, Badge, VisuallyHidden } from '@/components';
+import type { IndexTableHeading } from '../utils';
+
+interface Props {
+  heading: IndexTableHeading,
+}
+
+defineProps<Props>();
+
+const i18n = UseI18n();
+</script>
diff --git a/src/components/IndexTable/children/HeadingContentWrapper.vue b/src/components/IndexTable/children/HeadingContentWrapper.vue
new file mode 100644
index 00000000..ef474370
--- /dev/null
+++ b/src/components/IndexTable/children/HeadingContentWrapper.vue
@@ -0,0 +1,78 @@
+<template lang="pug">
+UnstyledButton(
+  v-if="sortable && sortable[index]",
+  :class="styles.TableHeadingSortButton",
+  @click="() => handleSortHeadingClick(index, newDirection)",
+)
+  span(:class="className")
+    Icon(:source="source", :accessibility-label="sortAccessibilityLabel")
+  HeadingContent(:heading="heading")
+HeadingContent(v-else, :heading="heading")
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { classNames } from 'polaris/polaris-react/src/utilities/css';
+import SortAscendingMajor from '@icons/SortAscendingMajor.svg';
+import SortDescendingMajor from '@icons/SortDescendingMajor.svg';
+import { UseI18n } from '@/use';
+import { UnstyledButton, Icon } from '@/components';
+import styles from '@/classes/IndexTable.json';
+import HeadingContent from './HeadingContent.vue';
+import type { IndexTableSortDirection, IndexTableHeading } from '../utils';
+
+interface Props {
+  heading: IndexTableHeading,
+  index: number,
+  sortable?: boolean[];
+  defaultSortDirection?: IndexTableSortDirection;
+  sortDirection?: IndexTableSortDirection;
+  sortColumnIndex?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultSortDirection: 'descending',
+});
+
+const emits = defineEmits<{
+  (e: 'sort', sortColumnIndex: number, sortDirection: IndexTableSortDirection): void;
+}>();
+
+const i18n = UseI18n();
+
+const isCurrentlySorted = computed(() => props.index === props.sortColumnIndex);
+const isAscending = computed(() => props.sortDirection === 'ascending');
+const newDirection = computed(() => {
+  if (isCurrentlySorted.value) {
+    return isAscending.value ? 'descending' : 'ascending';
+  }
+  return props.defaultSortDirection;
+});
+const source = computed(() => {
+  if (isCurrentlySorted.value) {
+    return props.sortDirection === 'ascending'
+      ? SortAscendingMajor
+      : SortDescendingMajor;
+  }
+
+  return props.defaultSortDirection === 'ascending'
+    ? SortAscendingMajor
+    : SortDescendingMajor;
+});
+
+const sortAccessibilityLabel = computed(() => i18n.translate(
+  'Polaris.IndexTable.sortAccessibilityLabel',
+  { direction: newDirection.value  },
+));
+
+const className = computed(() => classNames(
+  styles.TableHeadingSortIcon,
+  isCurrentlySorted.value && styles['TableHeadingSortIcon-visible'],
+));
+
+const handleSortHeadingClick = (
+  index: number,
+  direction: IndexTableSortDirection,
+) => {
+  emits('sort', index, direction);
+}
+</script>
diff --git a/src/components/IndexTable/children/index.ts b/src/components/IndexTable/children/index.ts
new file mode 100644
index 00000000..0f055fec
--- /dev/null
+++ b/src/components/IndexTable/children/index.ts
@@ -0,0 +1,2 @@
+export { default as HeadingContent } from './HeadingContent.vue';
+export { default as HeadingContentWrapper } from './HeadingContentWrapper.vue';
diff --git a/src/components/IndexTable/utils.ts b/src/components/IndexTable/utils.ts
index 1d5268cc..9f54c58d 100644
--- a/src/components/IndexTable/utils.ts
+++ b/src/components/IndexTable/utils.ts
@@ -1,3 +1,5 @@
+export type IndexTableSortDirection = 'ascending' | 'descending';
+
 export function getTableHeadingsBySelector(
   wrapperElement: HTMLElement | null,
   selector: string,
@@ -6,10 +8,10 @@ export function getTableHeadingsBySelector(
     ? Array.from(wrapperElement.querySelectorAll<HTMLElement>(selector))
     : [];
 }
-
 export interface IndexTableHeading {
   title: string;
   flush?: boolean;
+  id?: string;
   new?: boolean;
   hidden?: boolean;
 }
diff --git a/src/components/InlineCode/InlineCode.vue b/src/components/InlineCode/InlineCode.vue
new file mode 100644
index 00000000..67e7b036
--- /dev/null
+++ b/src/components/InlineCode/InlineCode.vue
@@ -0,0 +1,12 @@
+<template lang="pug">
+code(:class="styles.Code")
+  slot
+</template>
+
+<script setup lang="ts">
+import styles from '@/classes/InlineCode.json';
+</script>
+
+<style lang="scss">
+@import 'polaris/polaris-react/src/components/InlineCode/InlineCode.scss';
+</style>
diff --git a/src/components/InlineCode/index.ts b/src/components/InlineCode/index.ts
new file mode 100644
index 00000000..b5a36175
--- /dev/null
+++ b/src/components/InlineCode/index.ts
@@ -0,0 +1 @@
+export { default as InlineCode } from './InlineCode.vue';
diff --git a/src/components/Layout/README.stories.mdx b/src/components/Layout/README.stories.mdx
index 193703e0..e0a82b7d 100644
--- a/src/components/Layout/README.stories.mdx
+++ b/src/components/Layout/README.stories.mdx
@@ -70,7 +70,7 @@ export const OneColLayout = (args) => ({
   template: `
   <Layout>
     <LayoutSection>
-      <TextField>
+      <TextField autoComplete="off">
         <template #label>Text field</template>
       </TextField>
     </LayoutSection>
@@ -87,7 +87,7 @@ export const OneColLayout = (args) => ({
           code: dedent`
           <Layout>
             <LayoutSection>
-              <TextField>
+              <TextField autoComplete="off">
                 <template #label>Text field</template>
               </TextField>
             </LayoutSection>
@@ -112,12 +112,12 @@ export const TwoColLayoutDW = (args) => ({
   template: `
   <Layout>
     <LayoutSection>
-      <TextField>
+      <TextField autoComplete="off">
         <template #label>Text field</template>
       </TextField>
     </LayoutSection>
-    <LayoutSection secondary="true">
-      <TextField>
+    <LayoutSection :secondary="true">
+      <TextField autoComplete="off">
         <template #label>Text field</template>
       </TextField>
     </LayoutSection>
@@ -135,12 +135,12 @@ export const TwoColLayoutDW = (args) => ({
           code: dedent`
             <Layout>
               <LayoutSection>
-                <TextField>
+                <TextField autoComplete="off">
                   <template #label>Text field</template>
                 </TextField>
               </LayoutSection>
-              <LayoutSection secondary="true">
-                <TextField>
+              <LayoutSection :secondary="true">
+                <TextField autoComplete="off">
                   <template #label>Text field</template>
                 </TextField>
               </LayoutSection>
@@ -164,13 +164,13 @@ export const TwoColLayoutSW = (args) => ({
   components: { Layout, LayoutSection, AnnotatedSection, TextField },
   template: `
   <Layout>
-    <LayoutSection oneHalf="true">
-      <TextField>
+    <LayoutSection :oneHalf="true">
+      <TextField autoComplete="off">
         <template #label>Text field</template>
       </TextField>
     </LayoutSection>
-    <LayoutSection oneHalf="true">
-      <TextField>
+    <LayoutSection :oneHalf="true">
+      <TextField autoComplete="off">
         <template #label>Text field</template>
       </TextField>
     </LayoutSection>
@@ -187,13 +187,13 @@ export const TwoColLayoutSW = (args) => ({
           state: 'close',
           code: dedent`
           <Layout>
-            <LayoutSection oneHalf="true">
-              <TextField>
+            <LayoutSection :oneHalf="true">
+              <TextField autoComplete="off">
                 <template #label>Text field</template>
               </TextField>
             </LayoutSection>
-            <LayoutSection oneHalf="true">
-              <TextField>
+            <LayoutSection :oneHalf="true">
+              <TextField autoComplete="off">
                 <template #label>Text field</template>
               </TextField>
             </LayoutSection>
@@ -217,18 +217,18 @@ export const ThreeColLayoutSW = (args) => ({
   components: { Layout, LayoutSection, AnnotatedSection, TextField },
   template: `
   <Layout>
-    <LayoutSection oneThird="true">
-      <TextField>
+    <LayoutSection :oneThird="true">
+      <TextField autoComplete="off">
         <template #label>Text field</template>
       </TextField>
     </LayoutSection>
-    <LayoutSection oneThird="true">
-      <TextField>
+    <LayoutSection :oneThird="true">
+      <TextField autoComplete="off">
         <template #label>Text field</template>
       </TextField>
     </LayoutSection>
-    <LayoutSection oneThird="true">
-      <TextField>
+    <LayoutSection :oneThird="true">
+      <TextField autoComplete="off">
         <template #label>Text field</template>
       </TextField>
     </LayoutSection>
@@ -245,18 +245,18 @@ export const ThreeColLayoutSW = (args) => ({
           state: 'close',
           code: dedent`
           <Layout>
-            <LayoutSection oneThird="true">
-              <TextField>
+            <LayoutSection :oneThird="true">
+              <TextField autoComplete="off">
                 <template #label>Text field</template>
               </TextField>
             </LayoutSection>
-            <LayoutSection oneThird="true">
-              <TextField>
+            <LayoutSection :oneThird="true">
+              <TextField autoComplete="off">
                 <template #label>Text field</template>
               </TextField>
             </LayoutSection>
-            <LayoutSection oneThird="true">
-              <TextField>
+            <LayoutSection :oneThird="true">
+              <TextField autoComplete="off">
                 <template #label>Text field</template>
               </TextField>
             </LayoutSection>
@@ -414,7 +414,7 @@ export const Example = (args) => ({
   template: `
   <Layout v-bind="args">
     <LayoutSection>
-      <TextField>
+      <TextField autoComplete="off">
         <template #label>Text field</template>
       </TextField>
     </LayoutSection>
@@ -432,7 +432,7 @@ export const Example = (args) => ({
           code: dedent`
             <Layout>
               <LayoutSection>
-                <TextField>
+                <TextField autoComplete="off">
                   <template #label>Text field</template>
                 </TextField>
               </LayoutSection>
diff --git a/src/components/Listbox/components/Option/Option.vue b/src/components/Listbox/components/Option/Option.vue
index 1f45ea78..3613b904 100644
--- a/src/components/Listbox/components/Option/Option.vue
+++ b/src/components/Listbox/components/Option/Option.vue
@@ -112,6 +112,7 @@ const className = computed(() => classNames(
 
 const handleOptionSelect = (event: MouseEvent | KeyboardEvent): void => {
   event.preventDefault();
+  event.stopPropagation();
   onAction && onAction();
 
   if (listItemRef.value && !onAction) {
diff --git a/src/components/Modal/README.stories.mdx b/src/components/Modal/README.stories.mdx
index f0f79543..38bc7cd9 100644
--- a/src/components/Modal/README.stories.mdx
+++ b/src/components/Modal/README.stories.mdx
@@ -14,11 +14,6 @@ import {
   title="Components / Overlays / Modal"
   component={Modal}
   argTypes={{
-    colorScheme: {
-      table: {
-        disable: true,
-      },
-    },
     close: {
       description: "Callback when modal is closed",
       control: { disable: true },
@@ -363,9 +358,6 @@ Modals are overlays that require merchants to take an action before they can con
     name="Modal"
     inline={false}
     height="500px"
-    args={{
-      colorScheme: "light",
-    }}
     parameters={{
       docs: {
         source: {
diff --git a/src/components/Popover/Popover.vue b/src/components/Popover/Popover.vue
index cefbd17f..9f06214d 100644
--- a/src/components/Popover/Popover.vue
+++ b/src/components/Popover/Popover.vue
@@ -18,7 +18,6 @@ component(
       :zIndexOverride="zIndexOverride",
       :autofocusTarget="autofocusTarget",
       :sectioned="sectioned",
-      :colorScheme="colorScheme",
       @close="handleClose",
       @scrolled-to-bottom="emit('scrolled-to-bottom')",
     )
@@ -80,8 +79,6 @@ interface PopoverProps {
   ariaHaspopup?: string;
   /** Allow the popover overlay to be hidden when printing */
   hideOnPrint?: boolean;
-  /** Accepts a color scheme for the contents of the popover */
-  colorScheme?: PopoverOverlayProps['colorScheme'];
   /**
    * The preferred auto focus target defaulting to the popover container
    * @default 'container'
@@ -94,7 +91,6 @@ const props = withDefaults(defineProps<PopoverProps>(), {
   preferredAlignment: undefined,
   zIndexOverride: undefined,
   ariaHaspopup: undefined,
-  colorScheme: undefined,
   activatorWrapper: 'div',
   preferInputActivator: true,
   autofocusTarget: 'container',
diff --git a/src/components/Popover/README.stories.mdx b/src/components/Popover/README.stories.mdx
index fcafdb41..bef21cbd 100644
--- a/src/components/Popover/README.stories.mdx
+++ b/src/components/Popover/README.stories.mdx
@@ -59,18 +59,6 @@ import {
         },
       },
     },
-    colorScheme: {
-      options: ["light", "dark"],
-      control: { type: "select" },
-      table: {
-        defaultValue: {
-          summary: "light",
-        },
-        type: {
-          summary: "dark | light",
-        },
-      },
-    },
     close: {
       name: "close",
       description: "Callback when popover is closed",
@@ -149,7 +137,6 @@ export const Template = (args, { argTypes }) => ({
       :active="active"
       autofocusTarget="first-node"
       @close="toggleActive"
-      :colorScheme="'${args.colorScheme}'"
     >
       <template #activator>
         <Button :disclosure="true" @click="toggleActive"> More actions </Button>
@@ -366,9 +353,6 @@ For ActionList usages, use the [ActionList component.](/docs/components-actions-
     name="Popover"
     inline={false}
     height="300px"
-    args={{
-      colorScheme: "light",
-    }}
     parameters={{
       docs: {
         source: {
diff --git a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.vue b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.vue
index 0670f6e0..fa07ac84 100644
--- a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.vue
+++ b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.vue
@@ -14,28 +14,27 @@ PositionedOverlay(
   @change-content-styles="changeContentStyles",
 )
   div(:class="styles.FocusTracker", tabIndex="0", @focus="handleFocusFirstItem")
-  CustomProperties(:color-scheme="colorScheme")
-    div(:class="styles.Wrapper")
-      div(
-        :id="id",
-        :tabIndex="autofocusTarget === 'none' ? undefined : -1",
-        :style="contentStyles",
-        :class="contentClassNames",
-        ref="contentRef",
+  div(:class="styles.Wrapper")
+    div(
+      :id="id",
+      :tabIndex="autofocusTarget === 'none' ? undefined : -1",
+      :style="contentStyles",
+      :class="contentClassNames",
+      ref="contentRef",
+    )
+      slot(name="extra-content")
+      Pane(
+        :sectioned="sectioned",
+        :fixed="fixed",
+        @scrolled-to-bottom="$emit('scrolled-to-bottom')",
       )
-        slot(name="extra-content")
-        Pane(
-          :sectioned="sectioned",
-          :fixed="fixed",
-          @scrolled-to-bottom="$emit('scrolled-to-bottom')",
+        slot(
+          name="overlay",
         )
-          slot(
-            name="overlay",
-          )
-    div(:class="styles.FocusTracker", tabIndex="0", @focus="handleFocusLastItem")
-    EventListener(event="click", :handler="handleClick")
-    EventListener(event="touchstart", :handler="handleClick")
-    KeypressListener(:keyCode="Key.Escape", :handler="handleEscape")
+  div(:class="styles.FocusTracker", tabIndex="0", @focus="handleFocusLastItem")
+  EventListener(event="click", :handler="handleClick")
+  EventListener(event="touchstart", :handler="handleClick")
+  KeypressListener(:keyCode="Key.Escape", :handler="handleEscape")
 </template>
 
 <script lang="ts">
@@ -47,14 +46,12 @@ export default {
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
-import { tokens } from '@shopify/polaris-tokens';
+import { motion } from '@shopify/polaris-tokens';
 import { findFirstKeyboardFocusableNode } from '@/utilities/focus';
 import { PositionedOverlay } from '@/components/PositionedOverlay';
 import { EventListener } from '@/components/EventListener';
 import { KeypressListener } from '@/components/KeypressListener';
 import { Key } from '@/components/KeypressListener/utils';
-import { CustomProperties } from '@/components/CustomProperties';
-import type { CustomPropertiesProps } from '@/components/CustomProperties/utils';
 import styles from '@/classes/Popover.json';
 import type { PositionedOverlayProps } from '@/components/PositionedOverlay/utils';
 import { PopoverCloseSource, nodeContainsDescendant, TransitionStatus } from '../../utils';
@@ -75,7 +72,6 @@ export interface PopoverOverlayProps {
   sectioned?: boolean;
   fixed?: boolean;
   hideOnPrint?: boolean;
-  colorScheme?: CustomPropertiesProps['colorScheme'];
   autofocusTarget?: PopoverAutofocusTarget;
 }
 
@@ -85,7 +81,6 @@ const props = withDefaults(defineProps<PopoverOverlayProps>(), {
   preferInputActivator: true,
   autofocusTarget: 'container',
   zIndexOverride: undefined,
-  colorScheme: undefined,
 });
 
 const emit = defineEmits<{ (event: 'close', source: PopoverCloseSource): void; (event: 'scrolled-to-bottom'): void }>();
@@ -122,7 +117,7 @@ watch(
     clearTransitionTimeout();
     const timer = window.setTimeout(() => {
       transitionStatus.value = afterStatus;
-    }, parseInt(tokens.motion['duration-100'].value, 10));
+    }, parseInt(motion['duration-100'], 10));
 
     if (props.active) {
       enteringTimer.value = timer;
diff --git a/src/components/Popover/utils.ts b/src/components/Popover/utils.ts
index 1b4c1108..b1d093dd 100644
--- a/src/components/Popover/utils.ts
+++ b/src/components/Popover/utils.ts
@@ -1,6 +1,5 @@
 /* eslint-disable max-len */
 import type { PositionedOverlayProps } from '../PositionedOverlay/utils';
-import type { CustomPropertiesProps } from '../CustomProperties/utils';
 
 export enum PopoverCloseSource {
   Click,
@@ -77,7 +76,6 @@ export interface PopoverOverlayProps {
   sectioned?: boolean;
   fixed?: boolean;
   hideOnPrint?: boolean;
-  colorScheme?: CustomPropertiesProps['colorScheme'];
   autofocusTarget?: PopoverAutofocusTarget;
 }
 
@@ -117,7 +115,6 @@ export interface PopoverProps {
   /** Allow the popover overlay to be hidden when printing */
   hideOnPrint?: boolean;
   /** Accepts a color scheme for the contents of the popover */
-  colorScheme?: PopoverOverlayProps['colorScheme'];
   /**
    * The preferred auto focus target defaulting to the popover container
    * @default 'container'
diff --git a/src/components/ProgressBar/ProgressBar.vue b/src/components/ProgressBar/ProgressBar.vue
index 938f3da5..7945b945 100644
--- a/src/components/ProgressBar/ProgressBar.vue
+++ b/src/components/ProgressBar/ProgressBar.vue
@@ -20,7 +20,7 @@ div(:class="className")
 <script setup lang="ts">
 import { computed } from 'vue';
 import { classNames, variationName } from 'polaris/polaris-react/src/utilities/css';
-import { tokens } from '@shopify/polaris-tokens';
+import { motion } from '@shopify/polaris-tokens';
 import { UseI18n } from '@/use';
 import styles from '@/classes/ProgressBar.json';
 
@@ -90,8 +90,8 @@ const parseProgress = (progress: number, message: string) => {
 }
 
 const progressBarDuration = computed(() => props.animated
-  ? tokens.motion['duration-500'].value
-  : tokens.motion['duration-0'].value,
+  ? motion['duration-500']
+  : motion['duration-0'],
 );
 
 const indicatorStyles = computed(() => {
diff --git a/src/components/ResourceList/ResourceList.vue b/src/components/ResourceList/ResourceList.vue
index ab19ab05..6d9552fc 100644
--- a/src/components/ResourceList/ResourceList.vue
+++ b/src/components/ResourceList/ResourceList.vue
@@ -90,6 +90,7 @@ import type { CheckboxHandles } from '@/utilities/interface';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import { UseI18n } from '@/use';
 import { hasSlot } from '@/utilities/has-slot';
+import { tokens, toPx } from '@shopify/polaris-tokens';
 import { Button, EventListener, Sticky, Spinner, Select, EmptySearchResult, BulkActions, CheckableButton } from '@/components';
 import { SELECT_ALL_ITEMS } from '../../utilities/resource-list';
 import type { CheckableButtonKey, CheckableButtons, ResourceListSelectedItems } from '../../utilities/resource-list';
@@ -99,7 +100,6 @@ import type { BulkActionsProps } from '../BulkActions/utils';
 import EnableSelectionMinor from '@icons/EnableSelectionMinor.svg';
 import styles from '@/classes/ResourceList.json';
 
-const SMALL_SCREEN_WIDTH = 458;
 const SMALL_SPINNER_HEIGHT = 28;
 const LARGE_SPINNER_HEIGHT = 45;
 
@@ -112,10 +112,11 @@ function getAllItemsOnPage<TItemType>(
   });
 }
 
-const isSmallScreen = () => {
+const isBreakpointsXS = () => {
   return typeof window === 'undefined'
     ? false
-    : window.innerWidth < SMALL_SCREEN_WIDTH;
+    : window.innerWidth <
+        parseFloat(toPx(tokens.breakpoints['breakpoints-sm']) ?? '');
 };
 
 const defaultIdForItem = (
@@ -184,7 +185,7 @@ const emits = defineEmits<{
 const selectMode = ref<boolean>(Boolean(props.selectedItems && props.selectedItems.length > 0));
 const loadingPosition = ref(0);
 const lastSelected = ref<number | undefined>();
-const smallScreen = ref(isSmallScreen());
+const smallScreen = ref(isBreakpointsXS());
 const checkableButtons = ref<CheckableButtons>(new Map());
 const isSticky = ref(false);
 
@@ -444,7 +445,7 @@ watch(
       if (newSelectedItems && (newSelectedItems as string[]).length > 0 && !newSelectMode) {
         selectMode.value = true;
       }
-      if ((!newSelectedItems || (newSelectedItems as string[]).length === 0) && !isSmallScreen()) {
+      if ((!newSelectedItems || (newSelectedItems as string[]).length === 0) && !isBreakpointsXS()) {
         selectMode.value = false;
       }
     }
@@ -487,7 +488,7 @@ const handleSelectMode = (tmpSelectMode: boolean) => {
 
 const handleResize = debounce(
   () => {
-    const newSmallScreen = isSmallScreen();
+    const newSmallScreen = isBreakpointsXS();
 
     if (
       props.selectedItems &&
@@ -596,7 +597,7 @@ const handleSelectionChange = (
     }
   }
 
-  if (newlySelectedItems.length === 0 && !isSmallScreen()) {
+  if (newlySelectedItems.length === 0 && !isBreakpointsXS()) {
     handleSelectMode(false);
   } else if (newlySelectedItems.length > 0) {
     handleSelectMode(true);
@@ -624,7 +625,7 @@ const handleToggleAll = () => {
     });
   }
 
-  if (newlySelectedItems.length === 0 && !isSmallScreen()) {
+  if (newlySelectedItems.length === 0 && !isBreakpointsXS()) {
     handleSelectMode(false);
   } else if (newlySelectedItems.length > 0) {
     handleSelectMode(true);
@@ -632,7 +633,7 @@ const handleToggleAll = () => {
 
   let checkbox: CheckboxHandles | undefined;
 
-  if (isSmallScreen()) {
+  if (isBreakpointsXS()) {
     checkbox = checkableButtons.value.get('bulkSm');
   } else if (newlySelectedItems.length === 0) {
     checkbox = checkableButtons.value.get('plain');
diff --git a/src/components/Sheet/Sheet.vue b/src/components/Sheet/Sheet.vue
index b5e4d413..a790574c 100644
--- a/src/components/Sheet/Sheet.vue
+++ b/src/components/Sheet/Sheet.vue
@@ -36,9 +36,9 @@ Portal(v-if="isMounted", idPrefix="sheet")
   )
 </template>
 <script setup lang="ts">
-import { computed, ref, inject, useSlots, onMounted } from 'vue';
+import { ref, useSlots, onMounted } from 'vue';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
-import { tokens } from '@shopify/polaris-tokens';
+import { motion } from '@shopify/polaris-tokens';
 import { focusFirstFocusableNode } from '@/utilities/focus';
 import { UseMediaQuery } from '@/utilities/media-query';
 import { hasSlot } from '@/utilities/has-slot';
@@ -105,7 +105,7 @@ const onTransitionEnter = (el: Element, done) => {
   el.classList.remove(transitionClasses.enter);
   el.classList.add(transitionClasses.enterDone);
 
-  setTimeout(done, parseInt(tokens.motion['duration-300'].value, 10));
+  setTimeout(done, parseInt(motion['duration-300'], 10));
 };
 
 const onTransitionAfterEnter = (el: Element) => {
@@ -122,7 +122,7 @@ const onTransitionLeave = (el: Element, done) => {
   el.classList.add(transitionClasses.exit);
 
   emits('exit');
-  setTimeout(done, parseInt(tokens.motion['duration-300'].value, 10));
+  setTimeout(done, parseInt(motion['duration-300'], 10));
 };
 </script>
 <style lang="scss">
diff --git a/src/components/Text/README.stories.mdx b/src/components/Text/README.stories.mdx
new file mode 100644
index 00000000..db2b642e
--- /dev/null
+++ b/src/components/Text/README.stories.mdx
@@ -0,0 +1,161 @@
+import dedent from 'ts-dedent';
+import { Meta, Story, Canvas, ArgsTable, Source, Preview } from '@storybook/addon-docs';
+
+import { Text, Stack } from '@/polaris-vue';
+
+<Meta
+  title="Components / Titles and text / Text"
+  component={ Text }
+  argTypes={{
+    variant: {
+      control: {
+        type: 'select',
+        options: ['headingXs', 'headingSm', 'headingMd', 'headingLg', 'headingXl', 'heading2xl', 'heading3xl', 'heading4xl', 'bodySm', 'bodyMd', 'bodyLg'],
+      },
+      table: {
+        type: {
+          summary: 'headingXs | headingSm | headingMd | headingLg | headingXl | heading2xl | heading3xl | heading4xl | bodySm | bodyMd | bodyLg',
+        },
+      },
+    },
+    as: {
+      control: {
+        type: 'select',
+        options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+      },
+      table: {
+        type: {
+          summary: 'p | h1 | h2 | h3 | h4 | h5 | h6 | span',
+        },
+      },
+    },
+    fontWeight: {
+      control: {
+        type: 'select',
+        options: ['regular', 'medium', 'semibold', 'bold'],
+      },
+      table: {
+        type: {
+          summary: 'regular | medium | semibold | bold',
+        },
+      },
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: ['success', 'critical', 'warning', 'subdued'],
+      },
+      table: {
+        type: {
+          summary: 'success | critical | warning | subdued',
+        },
+      },
+    },
+    alignment: {
+      control: {
+        type: 'select',
+        options: ['start', 'center', 'end', 'justify'],
+      },
+      table: {
+        type: {
+          summary: 'start | center | end | justify',
+        },
+      },
+    },
+    default: {
+      table: {
+        disable: 'true',
+      }
+    },
+  }}
+/>
+
+# Text
+
+Typography helps establish hierarchy and communicate important content by creating clear visual patterns.
+
+export const Template = (args) => ({
+  components: { Text, Stack },
+  setup() { return {args}; },
+  template: `
+    <Stack vertical>
+      <Text v-bind="args">
+        Example Text
+      </Text>
+      <Text variant="heading4xl" as="h1">
+        Online store dashboard
+      </Text>
+      <Text variant="heading3xl" as="h2">
+        Online store dashboard
+      </Text>
+      <Text variant="heading2xl" as="h3">
+        Online store dashboard
+      </Text>
+      <Text variant="headingXl" as="h4">
+        Online store dashboard
+      </Text>
+      <Text variant="headingLg" as="h5">
+        Online store dashboard
+      </Text>
+      <Text variant="headingMd" as="h6">
+        Online store dashboard
+      </Text>
+      <Text variant="headingSm" as="h6">
+        Online store dashboard
+      </Text>
+      <Text variant="headingXs" as="h6">
+        Online store dashboard
+      </Text>
+    </Stack>
+  `
+});
+Template.args = {
+  variant: 'headingMd',
+  as: 'h3',
+  fontWeight: 'semibold',
+  color: 'success',
+  alignment: 'center',
+};
+Template.parameters = {
+  docs: {
+    source: {
+      code: dedent`
+        <Stack vertical>
+          <Text as="h3" alignment="center" color="success" font-weight="semibold" variant="headingMd">
+            Example Text
+          </Text>
+          <Text variant="heading4xl" as="h1">
+            Online store dashboard
+          </Text>
+          <Text variant="heading3xl" as="h2">
+            Online store dashboard
+          </Text>
+          <Text variant="heading2xl" as="h3">
+            Online store dashboard
+          </Text>
+          <Text variant="headingXl" as="h4">
+            Online store dashboard
+          </Text>
+          <Text variant="headingLg" as="h5">
+            Online store dashboard
+          </Text>
+          <Text variant="headingMd" as="h6">
+            Online store dashboard
+          </Text>
+          <Text variant="headingSm" as="h6">
+            Online store dashboard
+          </Text>
+          <Text variant="headingXs" as="h6">
+            Online store dashboard
+          </Text>
+        </Stack>
+      `,
+    },
+  },
+};
+
+<Canvas>
+  <Story story={Template} name="Text"></Story>
+</Canvas>
+
+<ArgsTable story="Text" />
diff --git a/src/components/Text/Text.vue b/src/components/Text/Text.vue
new file mode 100644
index 00000000..de5e5991
--- /dev/null
+++ b/src/components/Text/Text.vue
@@ -0,0 +1,86 @@
+<template lang="pug">
+component(
+  :is="componentName",
+  :class="className",
+)
+  slot
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { classNames } from 'polaris/polaris-react/src/utilities/css';
+import styles from '@/classes/Text.json';
+
+type Element = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+
+type Variant =
+  | 'headingXs'
+  | 'headingSm'
+  | 'headingMd'
+  | 'headingLg'
+  | 'headingXl'
+  | 'heading2xl'
+  | 'heading3xl'
+  | 'heading4xl'
+  | 'bodySm'
+  | 'bodyMd'
+  | 'bodyLg';
+
+type Alignment = 'start' | 'center' | 'end' | 'justify';
+
+type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+
+type Color = 'success' | 'critical' | 'warning' | 'subdued';
+
+const VariantFontWeightMapping: {[V in Variant]: FontWeight} = {
+  headingXs: 'bold',
+  headingSm: 'semibold',
+  headingMd: 'semibold',
+  headingLg: 'semibold',
+  headingXl: 'semibold',
+  heading2xl: 'semibold',
+  heading3xl: 'semibold',
+  heading4xl: 'bold',
+  bodySm: 'regular',
+  bodyMd: 'regular',
+  bodyLg: 'regular',
+};
+
+interface TextProps {
+  /** Adjust horizontal alignment of text */
+  alignment?: Alignment;
+  /** The element type */
+  as: Element;
+  /** Adjust color of text */
+  color?: Color;
+  /** Adjust weight of text */
+  fontWeight?: FontWeight;
+  /** Truncate text overflow with ellipsis */
+  truncate?: boolean;
+  /** Typographic style of text */
+  variant: Variant;
+  /** Visually hide the text */
+  visuallyHidden?: boolean;
+}
+
+const props = withDefaults(defineProps<TextProps>(), {
+  truncate: false,
+  visuallyHidden: false,
+});
+
+const componentName = computed(() => props.as || (props.visuallyHidden ? 'span' : 'p'));
+
+const className = classNames(
+  styles.root,
+  styles[props.variant],
+  props.fontWeight ? styles[props.fontWeight] : styles[VariantFontWeightMapping[props.variant]],
+  (props.alignment || props.truncate) && styles.block,
+  props.alignment && styles[props.alignment],
+  props.color && styles[props.color],
+  props.truncate && styles.truncate,
+  props.visuallyHidden && styles.visuallyHidden,
+);
+</script>
+
+<style lang="scss">
+@import 'polaris/polaris-react/src/components/Text/Text.scss';
+</style>
diff --git a/src/components/Text/index.ts b/src/components/Text/index.ts
new file mode 100644
index 00000000..f6db9bf1
--- /dev/null
+++ b/src/components/Text/index.ts
@@ -0,0 +1 @@
+export { default as Text } from './Text.vue';
diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index fd6a42f3..201736f8 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -330,11 +330,12 @@ const spinnerRef = ref<InstanceType<typeof TextFieldSpinner> | null>(null);
 watch(
   () => props.focused,
   () => {
-    if (!inputRef.value || props.focused === undefined) {
+    const input = props.multiline ? textAreaRef.value : inputRef.value;
+    if (!input || props.focused === undefined) {
       return;
     }
 
-    props.focused ? inputRef.value.focus() : inputRef.value.blur();
+    props.focused ? input.focus() : input.blur();
   },
 );
 
diff --git a/src/components/TopBar/README.stories.mdx b/src/components/TopBar/README.stories.mdx
index 9e3bda53..1d471dea 100644
--- a/src/components/TopBar/README.stories.mdx
+++ b/src/components/TopBar/README.stories.mdx
@@ -96,7 +96,7 @@ import QuestionMarkMajor from '@icons/QuestionMarkMajor.svg';
 />
 
 export const Template = (args) => ({
-  components: { Frame, TopBar, TopBarUserMenu, TopBarMenu, Icon, VisuallyHidden, TopBarSearchField, ActionList },
+  components: { ArrowLeftMinor, Frame, TopBar, TopBarUserMenu, TopBarMenu, Icon, VisuallyHidden, TopBarSearchField, ActionList },
   setup() {
     const logo = {
       width: 30,
@@ -120,10 +120,10 @@ export const Template = (args) => ({
     const toggleIsSecondaryMenuOpen = () => {
       isSecondaryMenuOpen.value = !isSecondaryMenuOpen.value;
     };
-    const userMenuAction = ref([
+    const userMenuAction = [
       { items: [{ content: 'Back to Shopify', icon: ArrowLeftMinor }] },
-      { items: [{ content: 'Community forums' }] }]
-    );
+      { items: [{ content: 'Community forums' }]},
+    ];
     const clickHandle = () => { alert('clicked'); };
     const userMenuMessage = ref({
       title: 'Another Message',
diff --git a/src/components/TopBar/components/Menu/Menu.vue b/src/components/TopBar/components/Menu/Menu.vue
index 8d217b01..80b16531 100644
--- a/src/components/TopBar/components/Menu/Menu.vue
+++ b/src/components/TopBar/components/Menu/Menu.vue
@@ -3,8 +3,7 @@ Popover(
   fixed,
   :active="open",
   :full-height="isFullHeight",
-  preferredAlignment="right",
-  :color-scheme="colorScheme",
+  preferred-alignment="right",
   @close="$emit('close')",
 )
   template(#activator)
@@ -41,7 +40,6 @@ export default {
 import { computed } from 'vue';
 import styles from '@/classes/TopBar-Menu.json';
 import type { ActionListProps } from '@/components/ActionList/utils';
-import type { PopoverProps } from '@/components/Popover/utils';
 import type { MessageProps } from './components/Message/utils';
 import { Popover, ActionList } from '@/components';
 import { Message } from './components';
@@ -53,8 +51,6 @@ interface MenuProps {
   message?: MessageProps;
   /** A boolean property indicating whether the menu is currently open */
   open: boolean;
-  /** Accepts a color scheme for the contents of the menu */
-  colorScheme?: PopoverProps['colorScheme'];
   /** A string that provides the accessibility labeling */
   accessibilityLabel?: string;
 }
diff --git a/src/components/TopBar/components/Menu/utils.ts b/src/components/TopBar/components/Menu/utils.ts
index ceadfc82..c7756ee7 100644
--- a/src/components/TopBar/components/Menu/utils.ts
+++ b/src/components/TopBar/components/Menu/utils.ts
@@ -1,5 +1,4 @@
 import type { ActionListProps } from '@/components/ActionList/utils';
-import type { PopoverProps } from '@/components/Popover/utils';
 import type { MessageProps } from './components/Message/utils';
 
 export interface MenuProps {
@@ -9,8 +8,6 @@ export interface MenuProps {
   message?: MessageProps;
   /** A boolean property indicating whether the menu is currently open */
   open: boolean;
-  /** Accepts a color scheme for the contents of the menu */
-  colorScheme?: PopoverProps['colorScheme'];
   /** A string that provides the accessibility labeling */
   accessibilityLabel?: string;
 }
diff --git a/src/components/TopBar/components/Search/Search.vue b/src/components/TopBar/components/Search/Search.vue
index 7641de8e..dbedc4ca 100644
--- a/src/components/TopBar/components/Search/Search.vue
+++ b/src/components/TopBar/components/Search/Search.vue
@@ -8,18 +8,15 @@ div(
   v-if="slots.default",
   :class="className",
 )
-  //- TODO: Fix this - add `color-scheme="dark"` to CustomProperties component
-  CustomProperties()
-    div(:class="styles.SearchContent")
-      div(:class="styles.Results")
-        slot
+  div(:class="styles.SearchContent")
+    div(:class="styles.Results")
+      slot
 </template>
 
 <script setup lang="ts">
 import { useSlots, computed } from 'vue';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import styles from '@/classes/TopBar-Search.json';
-import { CustomProperties } from '@/components';
 import { SearchDismissOverlay } from '../SearchDismissOverlay';
 
 interface SearchProps {
diff --git a/src/components/TopBar/components/UserMenu/UserMenu.vue b/src/components/TopBar/components/UserMenu/UserMenu.vue
index 7d4b6dd7..33e340e9 100644
--- a/src/components/TopBar/components/UserMenu/UserMenu.vue
+++ b/src/components/TopBar/components/UserMenu/UserMenu.vue
@@ -3,7 +3,6 @@ Menu(
   :open="open",
   :actions="actions",
   :message="message",
-  :color-scheme="colorScheme",
   :accessibilityLabel="accessibilityLabel",
   @open="$emit('toggle')",
   @close="$emit('toggle')",
@@ -46,8 +45,6 @@ interface UserMenuProps {
   avatar?: AvatarProps['source'];
   /** A boolean property indicating whether the user menu is currently open */
   open: boolean;
-  /** Accepts a color scheme for the contents of the user menu */
-  colorScheme?: MenuProps['colorScheme'];
 }
 
 const props = defineProps<UserMenuProps>();
diff --git a/src/components/TopBar/components/UserMenu/utils.ts b/src/components/TopBar/components/UserMenu/utils.ts
index c7291f9f..3147bf94 100644
--- a/src/components/TopBar/components/UserMenu/utils.ts
+++ b/src/components/TopBar/components/UserMenu/utils.ts
@@ -19,6 +19,4 @@ export interface UserMenuProps {
   avatar?: AvatarProps['source'];
   /** A boolean property indicating whether the user menu is currently open */
   open: boolean;
-  /** Accepts a color scheme for the contents of the user menu */
-  colorScheme?: MenuProps['colorScheme'];
 }
diff --git a/src/components/index.ts b/src/components/index.ts
index 3e97516e..26bfc065 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -23,7 +23,6 @@ export * from './ColorPicker';
 export * from './Combobox';
 export * from './Connected';
 export * from './ContextualSaveBar';
-export * from './CustomProperties';
 export * from './DataTable';
 export * from './DatePicker';
 export * from './DescriptionList';
@@ -46,6 +45,7 @@ export * from './Icon';
 export * from './Image';
 export * from './IndexProvider';
 export * from './IndexTable';
+export * from './InlineCode';
 export * from './Indicator';
 export * from './InlineError';
 export * from './KeyboardKey';
@@ -92,6 +92,7 @@ export * from './Tabs';
 export * from './Toast';
 export * from './Tooltip';
 export * from './Tag';
+export * from './Text';
 export * from './TextContainer';
 export * from './TextField';
 export * from './TextStyle';
diff --git a/src/utilities/breakpoints.ts b/src/utilities/breakpoints.ts
index 169ce81e..3ada5205 100644
--- a/src/utilities/breakpoints.ts
+++ b/src/utilities/breakpoints.ts
@@ -6,14 +6,14 @@ import type {
 
 import {
   getMediaConditions,
-  tokens,
+  breakpoints,
 } from '@shopify/polaris-tokens';
 
 import {isServer} from 'polaris/polaris-react/src/utilities/target';
 
 const Breakpoints = {
-  navigationBarCollapsed: '768px',
-  stackedContent: '1043px',
+  navigationBarCollapsed: '767.95px',
+  stackedContent: '1039.95px',
 };
 
 const noWindowMatches: MediaQueryList = {
@@ -56,7 +56,7 @@ type BreakpointsMatches = {
   [DirectionAlias in BreakpointsDirectionAlias]: boolean;
 };
 
-const breakpointsQueryEntries = getBreakpointsQueryEntries(tokens.breakpoints);
+const breakpointsQueryEntries = getBreakpointsQueryEntries(breakpoints);
 
 function getMatches(defaults?: UseBreakpointsOptions['defaults']) {
   if (!isServer) {
@@ -151,8 +151,8 @@ export interface UseBreakpointsOptions {
  *   // etc.
  * ]
  */
-export function getBreakpointsQueryEntries(breakpoints: BreakpointsTokenGroup) {
-  const mediaConditionEntries = Object.entries(getMediaConditions(breakpoints));
+export function getBreakpointsQueryEntries(breakpointsValue: BreakpointsTokenGroup) {
+  const mediaConditionEntries = Object.entries(getMediaConditions(breakpointsValue));
 
   return mediaConditionEntries
     .map(([breakpointsToken, mediaConditions]) =>
diff --git a/src/utilities/sticky-manager.ts b/src/utilities/sticky-manager.ts
index da233d59..a1a65862 100644
--- a/src/utilities/sticky-manager.ts
+++ b/src/utilities/sticky-manager.ts
@@ -1,5 +1,5 @@
 import { debounce } from 'polaris/polaris-react/src/utilities/debounce';
-import { tokens } from '@shopify/polaris-tokens';
+import { spacing } from '@shopify/polaris-tokens';
 import { dataPolarisTopBar, scrollable } from 'polaris/polaris-react/src/components/shared';
 import { stackedContent } from '@/utilities/breakpoints';
 import { getRectForNode, Rect } from './geometry';
@@ -136,7 +136,7 @@ export class StickyManager {
     }
 
     const stickyOffset = offset
-      ? this.getOffset(stickyNode) + parseInt(tokens.spacing['space-5'].value, 10)
+      ? this.getOffset(stickyNode) + parseInt(spacing['space-5'], 10)
       : this.getOffset(stickyNode);
 
     const scrollPosition = scrollTop + stickyOffset;
diff --git a/types/vue.d.ts b/types/vue.d.ts
index cd7d7fbb..2e1de453 100644
--- a/types/vue.d.ts
+++ b/types/vue.d.ts
@@ -1,6 +1,5 @@
 declare module '*.vue' {
   import { defineComponent } from 'vue';
-  import type { CustomProperties } from 'vue';
 
   const Component: ReturnType<typeof defineComponent>;
 
diff --git a/yarn.lock b/yarn.lock
index 3636a595..bbf0a767 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1734,10 +1734,10 @@
   resolved "https://registry.yarnpkg.com/@shopify/polaris-icons/-/polaris-icons-5.4.0.tgz#99a11fa48d38657aaa63d2cc3306a4d56911d6b8"
   integrity sha512-RzVSdwJuObO/4hS+DUCzY0jEQE0d6WFH5yFjTYqotMUGxe3tCUVdbuxxk/G1QbLVGQXYHmAvDXKbt+xSHwf+ow==
 
-"@shopify/polaris-tokens@^5.5.1":
-  version "5.5.1"
-  resolved "https://registry.yarnpkg.com/@shopify/polaris-tokens/-/polaris-tokens-5.5.1.tgz#e2a97d5e6e85898bee3fd6d596a4e0d7afb8ade5"
-  integrity sha512-N7nEsVos0Y+CxOJo5E2xBuAjw5oI/gebZZtoLN9sHH5NetoRBqXuADLOv3tfxEAQLwYLo38OecV097AUSzZ1/A==
+"@shopify/polaris-tokens@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@shopify/polaris-tokens/-/polaris-tokens-6.0.0.tgz#e6c88c2d8d283d2eca2d285ae2e08b9e76e4a0d5"
+  integrity sha512-Mh4vqMvXHFynGz/ZuoABQpuAWXexpIJrq5q75rYuzuRIV6R26cNZY/JCjVU29TjLSGaPipc2qGmYmEnz23KSAA==
 
 "@shopify/typescript-configs@^5.1.0":
   version "5.1.0"
@@ -9108,8 +9108,8 @@ pnp-webpack-plugin@1.6.4:
     ts-pnp "^1.1.6"
 
 "polaris@https://github.com/juzser/polaris.git":
-  version "9.23.1"
-  resolved "https://github.com/juzser/polaris.git#42398978b0edc1deeb1be3392012ee9f15752c72"
+  version "10.0.0"
+  resolved "https://github.com/juzser/polaris.git#afc77b3c8dae0a6561f0d225fbb2e5a7b01468ec"
 
 polished@^4.2.2:
   version "4.2.2"