diff --git a/.github/dependency-review/config.yml b/.github/dependency-review/config.yml
index b59b76ca223..2820a4e0768 100644
--- a/.github/dependency-review/config.yml
+++ b/.github/dependency-review/config.yml
@@ -1,6 +1,7 @@
 allow-licenses:
   - '0BSD'
   - 'Apache-2.0'
+  - 'BlueOak-1.0.0'
   - 'BSL-1.0'
   - 'BSD-1-Clause'
   - 'BSD-2-Clause-FreeBSD'
diff --git a/build-system-tests/scripts/install-with-retries.sh b/build-system-tests/scripts/install-with-retries.sh
new file mode 100644
index 00000000000..bd902f58850
--- /dev/null
+++ b/build-system-tests/scripts/install-with-retries.sh
@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Runs `npm` or `yarn` install with retries
+# Takes 2 parameters: the package manager and the dependencies to be installed
+# Usage:  install_with_retries npm "$DEPENDENCIES" or  install_with_retries yarn "$DEPENDENCIES"
+install_with_retries() {
+    local retries=3
+    local attempt=1
+    while [ $attempt -le $retries ]; do
+        echo "Attempt $attempt/$retries"
+        echo "$1 install $2"
+        "$1" install $2
+        if [ $? -eq 0 ]; then
+            echo "$1 install successful."
+            break
+        fi
+        attempt=$((attempt + 1))
+        if [ $attempt -le $retries ]; then
+            echo "$1 install failed. Retrying in 5 seconds..."
+            sleep 5
+        else
+            echo "$1 install failed after $retries attempts."
+            exit 1
+        fi
+    done
+}
diff --git a/build-system-tests/scripts/mega-app-install.sh b/build-system-tests/scripts/mega-app-install.sh
index bca95debc27..0fe633e54e0 100755
--- a/build-system-tests/scripts/mega-app-install.sh
+++ b/build-system-tests/scripts/mega-app-install.sh
@@ -10,6 +10,9 @@ FRAMEWORK_VERSION="latest"
 PKG_MANAGER="npm"
 PKG_MANAGER_VERSION="latest"
 
+# Import install function
+source "./scripts/install-with-retries.sh"
+
 # Options
 # e.g.
 # $ ./mega-app-install.sh --build-tool react --build-tool-version latest --language typescript --name react-latest-cra-latest-node-18-ts --framework cra --framework-version latest --pkg-manager npm --pkg-manager-version latest
@@ -122,8 +125,7 @@ else
     if [[ "$BUILD_TOOL" == 'cra' && "$LANGUAGE" == 'ts' ]]; then
         # If not testing the latest React, we need to download its types.
         # CRA is the only framework that we test React 16.
-        echo "npm install $DEP_TYPES"
-        npm install $DEP_TYPES
+        install_with_retries npm "$DEP_TYPES"
     fi
 
     if [[ "$BUILD_TOOL" == 'next' && "$BUILD_TOOL_VERSION" == '11' ]]; then
@@ -141,8 +143,7 @@ else
             npx expo install --fix # fix the dependencies that are incompatible with the installed expo versio
         fi
     else
-        echo "npm install $DEPENDENCIES"
-        npm install $DEPENDENCIES
+        install_with_retries npm "$DEPENDENCIES"
     fi
 fi
 
diff --git a/docs/README.md b/docs/README.md
index 2e0a11fc847..23fb770c0cb 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -21,7 +21,7 @@ Note: to set up local environment
 cp ./docs/.env.example ./docs/.env
 ```
 
-Then set values to the variables.
+Then set values to the variables in the `./docs/.env` file. The values don't matter for local testing. They only matter if you are actually trying to make the Search work.
 
 Note, if you're not using `nvm`, you'll need to set the environment variable: `export NODE_OPTIONS=--openssl-legacy-provider`
 
diff --git a/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap b/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap
index 36e985ea929..c1f28f203ce 100644
--- a/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap
+++ b/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap
@@ -4506,6 +4506,38 @@ exports[`CSS Variables Table 1`] = `
         \\"variable\\": \\"--amplify-components-searchfield-color\\",
         \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\"
     },
+    {
+        \\"variable\\": \\"--amplify-components-select-background-color\\",
+        \\"value\\": \\"var(--amplify-colors-background-primary)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-color\\",
+        \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-disabled-background-color\\",
+        \\"value\\": \\"var(--amplify-colors-background-disabled)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-disabled-color\\",
+        \\"value\\": \\"var(--amplify-colors-font-disabled)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-option-padding-block\\",
+        \\"value\\": \\"var(--amplify-space-xs)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-option-padding-inline\\",
+        \\"value\\": \\"var(--amplify-space-small)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-padding-block\\",
+        \\"value\\": \\"var(--amplify-space-xs)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-padding-inline\\",
+        \\"value\\": \\"var(--amplify-space-small)\\"
+    },
     {
         \\"variable\\": \\"--amplify-components-select-icon-wrapper-align-items\\",
         \\"value\\": \\"center\\"
@@ -4552,12 +4584,16 @@ exports[`CSS Variables Table 1`] = `
     },
     {
         \\"variable\\": \\"--amplify-components-select-option-background-color\\",
-        \\"value\\": \\"var(--amplify-colors-background-primary)\\"
+        \\"value\\": \\"transparent\\"
     },
     {
         \\"variable\\": \\"--amplify-components-select-option-color\\",
         \\"value\\": \\"var(--amplify-colors-font-primary)\\"
     },
+    {
+        \\"variable\\": \\"--amplify-components-select-option-disabled-background-color\\",
+        \\"value\\": \\"transparent\\"
+    },
     {
         \\"variable\\": \\"--amplify-components-select-option-disabled-color\\",
         \\"value\\": \\"var(--amplify-colors-font-disabled)\\"
diff --git a/docs/__tests__/__snapshots__/props-table.test.ts.snap b/docs/__tests__/__snapshots__/props-table.test.ts.snap
index 1b4622299bf..3ea65f135d0 100644
--- a/docs/__tests__/__snapshots__/props-table.test.ts.snap
+++ b/docs/__tests__/__snapshots__/props-table.test.ts.snap
@@ -9742,6 +9742,20 @@ exports[`Props Table 1`] = `
                         \\"category\\": \\"BaseSelectProps\\",
                         \\"isOptional\\": true
                     },
+                    \\"isMultiple\\": {
+                        \\"name\\": \\"isMultiple\\",
+                        \\"type\\": \\"boolean | undefined\\",
+                        \\"description\\": \\"A Boolean attribute indicating that multiple options can be selected at once\\",
+                        \\"category\\": \\"BaseSelectProps\\",
+                        \\"isOptional\\": true
+                    },
+                    \\"selectSize\\": {
+                        \\"name\\": \\"selectSize\\",
+                        \\"type\\": \\"number | undefined\\",
+                        \\"description\\": \\"Sets the number of visible options in a drop-down list\\",
+                        \\"category\\": \\"BaseSelectProps\\",
+                        \\"isOptional\\": true
+                    },
                     \\"isRequired\\": {
                         \\"name\\": \\"isRequired\\",
                         \\"type\\": \\"boolean | undefined\\",
diff --git a/docs/package.json b/docs/package.json
index 59f6c578433..19f0347c0ad 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -23,8 +23,8 @@
     "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "5.3.0",
-    "@aws-amplify/ui-react-storage": "2.3.0",
+    "@aws-amplify/ui-react": "5.3.1",
+    "@aws-amplify/ui-react-storage": "2.3.1",
     "@cucumber/gherkin": "^19.0.3",
     "@cucumber/messages": "^16.0.1",
     "@docsearch/react": "3",
diff --git a/docs/src/pages/[platform]/components/breadcrumbs/examples/BreadcrumbsStyleExample.tsx b/docs/src/pages/[platform]/components/breadcrumbs/examples/BreadcrumbsStyleExample.tsx
index 70a66edc07e..23edbe410c1 100644
--- a/docs/src/pages/[platform]/components/breadcrumbs/examples/BreadcrumbsStyleExample.tsx
+++ b/docs/src/pages/[platform]/components/breadcrumbs/examples/BreadcrumbsStyleExample.tsx
@@ -22,8 +22,8 @@ export default function BreadcrumbsStyleExample() {
       borderRadius="medium"
       padding="medium"
     >
-      {breadcrumbs.map(({ href, text, isCurrent }) => (
-        <Breadcrumbs.Item key={href}>
+      {breadcrumbs.map(({ href, text, isCurrent }, idx) => (
+        <Breadcrumbs.Item key={`${href}${idx}`}>
           <Breadcrumbs.Link
             fontWeight="bold"
             textDecoration="underline"
diff --git a/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx b/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx
index 8e38df3df50..0ddbd6ad9e4 100644
--- a/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx
@@ -29,6 +29,12 @@ export interface SelectFieldPropControlsProps extends SelectFieldProps {
   setVariation: (
     value: React.SetStateAction<SelectFieldProps['variation']>
   ) => void;
+  setIsMultiple: (
+    value: React.SetStateAction<SelectFieldProps['isMultiple']>
+  ) => void;
+  setSelectSize: (
+    value: React.SetStateAction<SelectFieldProps['selectSize']>
+  ) => void;
 }
 
 interface SelectFieldPropControlsInterface {
@@ -44,6 +50,8 @@ export const SelectFieldPropControls: SelectFieldPropControlsInterface = ({
   labelHidden,
   size,
   variation,
+  isMultiple,
+  selectSize,
   setDescriptiveText,
   setErrorMessage,
   setHasError,
@@ -52,6 +60,8 @@ export const SelectFieldPropControls: SelectFieldPropControlsInterface = ({
   setLabelHidden,
   setSize,
   setVariation,
+  setIsMultiple,
+  setSelectSize,
 }) => {
   return (
     <Flex direction="column">
@@ -114,6 +124,24 @@ export const SelectFieldPropControls: SelectFieldPropControlsInterface = ({
         }
       />
 
+      <SelectField
+        label="selectSize"
+        name="selectSize"
+        value={String(selectSize)}
+        onChange={(event) => {
+          setSelectSize(
+            parseInt(event.target.value) as SelectFieldProps['selectSize']
+          );
+        }}
+      >
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+        <option value="6">6</option>
+      </SelectField>
+
       <CheckboxField
         name="labelHidden"
         value="yes"
@@ -149,6 +177,18 @@ export const SelectFieldPropControls: SelectFieldPropControlsInterface = ({
         }}
         label="isDisabled"
       />
+
+      <CheckboxField
+        name="isMultiple"
+        value="yes"
+        checked={isMultiple}
+        onChange={(event) => {
+          setIsMultiple(
+            Boolean(event.target.checked) as SelectFieldProps['isMultiple']
+          );
+        }}
+        label="isMultiple"
+      />
     </Flex>
   );
 };
diff --git a/docs/src/pages/[platform]/components/selectfield/demo.tsx b/docs/src/pages/[platform]/components/selectfield/demo.tsx
index 27465a3d34f..3c8f3ec07f5 100644
--- a/docs/src/pages/[platform]/components/selectfield/demo.tsx
+++ b/docs/src/pages/[platform]/components/selectfield/demo.tsx
@@ -33,10 +33,16 @@ const propsToCode = (selectFieldProps) => {
     (selectFieldProps.isDisabled
       ? `\n  isDisabled={${JSON.stringify(selectFieldProps.isDisabled)}}`
       : '') +
+    (selectFieldProps.isMultiple
+      ? `\n  isMultiple={${JSON.stringify(selectFieldProps.isMultiple)}}`
+      : '') +
     `\n>` +
-    `\n  <option value="apple">Apple</option>
-  <option value="banana">Banana</option>
-  <option value="orange">Orange</option>` +
+    `\n    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="orange" disabled>Orange</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="kiwi">Kiwi</option>
+    <option value="tangerine">Tangerine</option>` +
     `\n</SelectField>`
   );
 };
@@ -46,6 +52,7 @@ const defaultSelectFieldProps = {
   hasError: false,
   label: 'Fruit',
   labelHidden: false,
+  isMultiple: false,
 };
 
 export const SelectFieldDemo = () => {
@@ -70,10 +77,17 @@ export const SelectFieldDemo = () => {
         placeholder="Please select a fruit"
         size={selectFieldProps.size}
         variation={selectFieldProps.variation}
+        isMultiple={selectFieldProps.isMultiple}
+        selectSize={selectFieldProps.selectSize}
       >
         <option value="apple">Apple</option>
         <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="orange" disabled>
+          Orange
+        </option>
+        <option value="pineapple">Pineapple</option>
+        <option value="kiwi">Kiwi</option>
+        <option value="tangerine">Tangerine</option>
       </SelectField>
     </Demo>
   );
diff --git a/docs/src/pages/[platform]/components/selectfield/examples/SelectFieldMultipleStateExample.tsx b/docs/src/pages/[platform]/components/selectfield/examples/SelectFieldMultipleStateExample.tsx
new file mode 100644
index 00000000000..293a18a6046
--- /dev/null
+++ b/docs/src/pages/[platform]/components/selectfield/examples/SelectFieldMultipleStateExample.tsx
@@ -0,0 +1,16 @@
+import { SelectField } from '@aws-amplify/ui-react';
+
+export const SelectFieldMultipleStateExample = () => (
+  <SelectField
+    label="Fruit"
+    descriptiveText="What's your favorite fruit?"
+    isMultiple={true}
+  >
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="orange">Orange</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="kiwi">Kiwi</option>
+    <option value="tangerine">Tangerine</option>
+  </SelectField>
+);
diff --git a/docs/src/pages/[platform]/components/selectfield/examples/SelectFieldSelectSizeExample.tsx b/docs/src/pages/[platform]/components/selectfield/examples/SelectFieldSelectSizeExample.tsx
new file mode 100644
index 00000000000..e6a760b847d
--- /dev/null
+++ b/docs/src/pages/[platform]/components/selectfield/examples/SelectFieldSelectSizeExample.tsx
@@ -0,0 +1,16 @@
+import { SelectField } from '@aws-amplify/ui-react';
+
+export const SelectFieldSelectSizeExample = () => (
+  <SelectField
+    label="Fruit"
+    descriptiveText="What's your favorite fruit?"
+    selectSize={3}
+  >
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="orange">Orange</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="kiwi">Kiwi</option>
+    <option value="tangerine">Tangerine</option>
+  </SelectField>
+);
diff --git a/docs/src/pages/[platform]/components/selectfield/examples/index.ts b/docs/src/pages/[platform]/components/selectfield/examples/index.ts
index 16fb41e8b98..1bf05afc417 100644
--- a/docs/src/pages/[platform]/components/selectfield/examples/index.ts
+++ b/docs/src/pages/[platform]/components/selectfield/examples/index.ts
@@ -12,3 +12,5 @@ export { SelectFieldOptionsExample } from './SelectFieldOptionsExample';
 export { SelectFieldThemeExample } from './SelectFieldThemeExample';
 export { SelectFieldStylePropsExample } from './SelectFieldStylePropsExample';
 export { SelectFieldIconProviderExample } from './SelectFieldIconProviderExample';
+export { SelectFieldMultipleStateExample } from './SelectFieldMultipleStateExample';
+export { SelectFieldSelectSizeExample } from './SelectFieldSelectSizeExample';
diff --git a/docs/src/pages/[platform]/components/selectfield/react.mdx b/docs/src/pages/[platform]/components/selectfield/react.mdx
index 922a9fc63f9..8bed3df6aae 100644
--- a/docs/src/pages/[platform]/components/selectfield/react.mdx
+++ b/docs/src/pages/[platform]/components/selectfield/react.mdx
@@ -21,6 +21,8 @@ import {
   SelectFieldThemeExample,
   SelectFieldStylePropsExample,
   SelectFieldIconProviderExample,
+  SelectFieldMultipleStateExample,
+  SelectFieldSelectSizeExample,
 } from './examples';
 
 ## Demo
@@ -175,6 +177,40 @@ A disabled field will not be focusable or mutable, and it will not be submitted
   </ExampleCode>
 </Example>
 
+### Multiple selections
+
+Use the `isMultiple` prop to specify that multiple options can be selected at once.
+* For Mac: Hold down the command button to select multiple options
+* For Windows: Hold down the control button to select multiple options
+
+<Example>
+  <SelectFieldMultipleStateExample />
+  
+  <ExampleCode>
+
+```jsx file=./examples/SelectFieldMultipleStateExample.tsx
+
+```
+
+  </ExampleCode>
+</Example>
+
+### Select size
+
+ Use the `selectSize` prop to set the number of visible options in a drop-down list. If the value of the `selectSize` attribute is greater than 1, but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view.
+
+<Example>
+  <SelectFieldSelectSizeExample />
+  
+  <ExampleCode>
+
+```jsx file=./examples/SelectFieldSelectSizeExample.tsx
+
+```
+
+  </ExampleCode>
+</Example>
+
 ### Validation error
 
 Use the `hasError` and `errorMessage` props to mark a SelectField as having a validation error.
diff --git a/docs/src/pages/[platform]/components/selectfield/useSelectFieldProps.tsx b/docs/src/pages/[platform]/components/selectfield/useSelectFieldProps.tsx
index c95ead54788..730edfb34f1 100644
--- a/docs/src/pages/[platform]/components/selectfield/useSelectFieldProps.tsx
+++ b/docs/src/pages/[platform]/components/selectfield/useSelectFieldProps.tsx
@@ -33,6 +33,12 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
   const [variation, setVariation] = React.useState<
     SelectFieldProps['variation']
   >(initialValues.variation);
+  const [isMultiple, setIsMultiple] = React.useState<
+    SelectFieldProps['isMultiple']
+  >(initialValues.isMultiple);
+  const [selectSize, setSelectSize] = React.useState<
+    SelectFieldProps['selectSize']
+  >(initialValues.selectSize);
 
   React.useEffect(() => {
     demoState.set(SelectField.displayName, {
@@ -44,6 +50,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
       labelHidden,
       size,
       variation,
+      isMultiple,
+      selectSize,
     });
   }, [
     descriptiveText,
@@ -54,6 +62,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
     labelHidden,
     size,
     variation,
+    isMultiple,
+    selectSize,
   ]);
 
   return React.useMemo(
@@ -66,6 +76,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
       size,
       variation,
       isDisabled,
+      isMultiple,
+      selectSize,
       setDescriptiveText,
       setErrorMessage,
       setHasError,
@@ -74,6 +86,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
       setLabelHidden,
       setSize,
       setVariation,
+      setIsMultiple,
+      setSelectSize,
     }),
     [
       descriptiveText,
@@ -84,6 +98,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
       size,
       variation,
       isDisabled,
+      isMultiple,
+      selectSize,
       setDescriptiveText,
       setErrorMessage,
       setHasError,
@@ -92,6 +108,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
       setLabelHidden,
       setSize,
       setVariation,
+      setIsMultiple,
+      setSelectSize,
     ]
   );
 };
diff --git a/examples/angular/package.json b/examples/angular/package.json
index 08f83ba5264..7d981031ed8 100644
--- a/examples/angular/package.json
+++ b/examples/angular/package.json
@@ -20,7 +20,7 @@
     "@angular/platform-browser": "^14.3.0",
     "@angular/platform-browser-dynamic": "^14.3.0",
     "@angular/router": "^14.3.0",
-    "@aws-amplify/ui-angular": "^4.0.8",
+    "@aws-amplify/ui-angular": "^4.0.9",
     "aws-amplify": "latest",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
diff --git a/examples/next/package.json b/examples/next/package.json
index ba255b24ff6..203a596ed92 100644
--- a/examples/next/package.json
+++ b/examples/next/package.json
@@ -10,10 +10,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "^5.3.0",
-    "@aws-amplify/ui-react-liveness": "^2.0.7",
-    "@aws-amplify/ui-react-storage": "^2.3.0",
-    "@aws-amplify/ui-react-notifications": "^1.0.12",
+    "@aws-amplify/ui-react": "^5.3.1",
+    "@aws-amplify/ui-react-liveness": "^2.0.8",
+    "@aws-amplify/ui-react-storage": "^2.3.1",
+    "@aws-amplify/ui-react-notifications": "^1.0.13",
     "@aws-amplify/ui-react-geo": "^1.0.2",
     "@aws-sdk/credential-providers": "^3.370.0",
     "aws-amplify": "latest",
diff --git a/examples/vue/package.json b/examples/vue/package.json
index 2ec0594fd05..a4b0da88ab6 100644
--- a/examples/vue/package.json
+++ b/examples/vue/package.json
@@ -10,7 +10,7 @@
     "start": "vite preview --port 3000"
   },
   "dependencies": {
-    "@aws-amplify/ui-vue": "^3.1.27",
+    "@aws-amplify/ui-vue": "^3.1.28",
     "aws-amplify": "latest",
     "vue": "^3.0.5",
     "vue-router": "4"
diff --git a/packages/angular/projects/ui-angular/CHANGELOG.md b/packages/angular/projects/ui-angular/CHANGELOG.md
index b5bffcca13b..b584e8a9bb3 100644
--- a/packages/angular/projects/ui-angular/CHANGELOG.md
+++ b/packages/angular/projects/ui-angular/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @aws-amplify/ui-angular
 
+## 4.0.9
+
+### Patch Changes
+
+- Updated dependencies [[`d570694c7`](https://github.com/aws-amplify/amplify-ui/commit/d570694c7e0d9d112449d3aade2d567773555926), [`6a5a4d79c`](https://github.com/aws-amplify/amplify-ui/commit/6a5a4d79ce60124fba2dc00d86b9e1a9b5f21c39)]:
+  - @aws-amplify/ui@5.8.1
+
 ## 4.0.8
 
 ### Patch Changes
diff --git a/packages/angular/projects/ui-angular/package.json b/packages/angular/projects/ui-angular/package.json
index 811c00202bd..336895e2794 100644
--- a/packages/angular/projects/ui-angular/package.json
+++ b/packages/angular/projects/ui-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-angular",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "scripts": {
     "build": "yarn --cwd ../../ build",
     "dev": "yarn --cwd ../../ dev",
@@ -19,7 +19,7 @@
     "aws-amplify": "^5.0.1"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.8.0",
+    "@aws-amplify/ui": "5.8.1",
     "classnames": "2.3.1",
     "nanoid": "3.1.31",
     "qrcode": "1.5.0",
diff --git a/packages/angular/projects/ui-angular/src/version.ts b/packages/angular/projects/ui-angular/src/version.ts
index d92c42eb3fa..bd0ec96554d 100644
--- a/packages/angular/projects/ui-angular/src/version.ts
+++ b/packages/angular/projects/ui-angular/src/version.ts
@@ -1 +1 @@
-export const VERSION = '4.0.8';
+export const VERSION = '4.0.9';
diff --git a/packages/e2e/package.json b/packages/e2e/package.json
index 3bcac07c3f0..9841124ed8f 100644
--- a/packages/e2e/package.json
+++ b/packages/e2e/package.json
@@ -30,7 +30,7 @@
     ]
   },
   "devDependencies": {
-    "@aws-amplify/ui": "^5.8.0",
+    "@aws-amplify/ui": "^5.8.1",
     "@badeball/cypress-cucumber-preprocessor": "^16.0.3",
     "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
     "@cucumber/cucumber": "^9.3.0",
diff --git a/packages/react-core-notifications/CHANGELOG.md b/packages/react-core-notifications/CHANGELOG.md
index a9ac6cd7a7f..742cad80d8c 100644
--- a/packages/react-core-notifications/CHANGELOG.md
+++ b/packages/react-core-notifications/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @aws-amplify/ui-react-core-notifications
 
+## 1.0.10
+
+### Patch Changes
+
+- Updated dependencies [[`d570694c7`](https://github.com/aws-amplify/amplify-ui/commit/d570694c7e0d9d112449d3aade2d567773555926), [`6a5a4d79c`](https://github.com/aws-amplify/amplify-ui/commit/6a5a4d79ce60124fba2dc00d86b9e1a9b5f21c39)]:
+  - @aws-amplify/ui@5.8.1
+  - @aws-amplify/ui-react-core@2.1.33
+
 ## 1.0.9
 
 ### Patch Changes
diff --git a/packages/react-core-notifications/package.json b/packages/react-core-notifications/package.json
index a802454a04a..f992913f35a 100644
--- a/packages/react-core-notifications/package.json
+++ b/packages/react-core-notifications/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-core-notifications",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -36,8 +36,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.8.0",
-    "@aws-amplify/ui-react-core": "2.1.32"
+    "@aws-amplify/ui": "5.8.1",
+    "@aws-amplify/ui-react-core": "2.1.33"
   },
   "peerDependencies": {
     "aws-amplify": "^5.0.1",
diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md
index 7d70a6a6982..c4013d95617 100644
--- a/packages/react-core/CHANGELOG.md
+++ b/packages/react-core/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @aws-amplify/ui-react-core
 
+## 2.1.33
+
+### Patch Changes
+
+- Updated dependencies [[`d570694c7`](https://github.com/aws-amplify/amplify-ui/commit/d570694c7e0d9d112449d3aade2d567773555926), [`6a5a4d79c`](https://github.com/aws-amplify/amplify-ui/commit/6a5a4d79ce60124fba2dc00d86b9e1a9b5f21c39)]:
+  - @aws-amplify/ui@5.8.1
+
 ## 2.1.32
 
 ### Patch Changes
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 38e956eec4f..d872d236e25 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-core",
-  "version": "2.1.32",
+  "version": "2.1.33",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "react-native": "dist/index.js",
@@ -31,7 +31,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.8.0",
+    "@aws-amplify/ui": "5.8.1",
     "@xstate/react": "3.0.1",
     "lodash": "4.17.21",
     "xstate": "^4.33.6"
diff --git a/packages/react-liveness/CHANGELOG.md b/packages/react-liveness/CHANGELOG.md
index 36d2aa1701c..1bfc44cb6a4 100644
--- a/packages/react-liveness/CHANGELOG.md
+++ b/packages/react-liveness/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @aws-amplify/ui-react-liveness
 
+## 2.0.8
+
+### Patch Changes
+
+- [#4441](https://github.com/aws-amplify/amplify-ui/pull/4441) [`717b00955`](https://github.com/aws-amplify/amplify-ui/commit/717b0095573eb0fc44ef47441eb27e1c3122f6f9) Thanks [@thaddmt](https://github.com/thaddmt)! - chore(liveness): remove predictions super class
+
+- [#4446](https://github.com/aws-amplify/amplify-ui/pull/4446) [`ac3cfa8aa`](https://github.com/aws-amplify/amplify-ui/commit/ac3cfa8aaa430df2b73e51a6b6f0916f1f6f6382) Thanks [@thaddmt](https://github.com/thaddmt)! - fix(liveness): add missing liveness dependencies
+
+- [#4450](https://github.com/aws-amplify/amplify-ui/pull/4450) [`8ca045036`](https://github.com/aws-amplify/amplify-ui/commit/8ca0450363a194016fe7d1e5c4fc8359e2f4dba2) Thanks [@thaddmt](https://github.com/thaddmt)! - chore(liveness): export error types
+
+- Updated dependencies [[`d570694c7`](https://github.com/aws-amplify/amplify-ui/commit/d570694c7e0d9d112449d3aade2d567773555926), [`6a5a4d79c`](https://github.com/aws-amplify/amplify-ui/commit/6a5a4d79ce60124fba2dc00d86b9e1a9b5f21c39), [`c393b74af`](https://github.com/aws-amplify/amplify-ui/commit/c393b74af6574593b2e7a5c9f00d27b052966a12), [`7e11a3b7e`](https://github.com/aws-amplify/amplify-ui/commit/7e11a3b7e4761a39a973ecd9a632a619660e18dd)]:
+  - @aws-amplify/ui-react@5.3.1
+  - @aws-amplify/ui@5.8.1
+
 ## 2.0.7
 
 ### Patch Changes
diff --git a/packages/react-liveness/jest.config.js b/packages/react-liveness/jest.config.js
index 8650d5500eb..956feb60541 100644
--- a/packages/react-liveness/jest.config.js
+++ b/packages/react-liveness/jest.config.js
@@ -10,7 +10,7 @@ module.exports = {
   coverageThreshold: {
     global: {
       branches: 80,
-      functions: 83,
+      functions: 82,
       lines: 89,
       statements: 89,
     },
diff --git a/packages/react-liveness/package.json b/packages/react-liveness/package.json
index 1da5651c876..ca10cf179ac 100644
--- a/packages/react-liveness/package.json
+++ b/packages/react-liveness/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-liveness",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -48,10 +48,13 @@
     "react-dom": ">= 16.14.0"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.8.0",
-    "@aws-amplify/ui-react": "5.3.0",
+    "@aws-amplify/ui": "5.8.1",
+    "@aws-amplify/ui-react": "5.3.1",
     "@aws-sdk/client-rekognitionstreaming": "3.398.0",
+    "@aws-sdk/util-format-url": "^3.410.0",
     "@smithy/eventstream-serde-browser": "^2.0.4",
+    "@smithy/fetch-http-handler": "^2.1.3",
+    "@smithy/protocol-http": "^3.0.3",
     "@tensorflow-models/blazeface": "0.0.7",
     "@tensorflow/tfjs-backend-cpu": "3.11.0",
     "@tensorflow/tfjs-backend-wasm": "3.11.0",
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/index.ts b/packages/react-liveness/src/components/FaceLivenessDetector/index.ts
index dc80d2c5909..4960329df3c 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/index.ts
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/index.ts
@@ -10,4 +10,5 @@ export {
   AwsCredentialProvider,
   AwsTemporaryCredentials,
   AwsCredentials,
+  ErrorState,
 } from './service';
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts b/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts
index 4f8a42cc86f..f2b8f26fbe3 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts
@@ -19,6 +19,7 @@ import {
   IlluminationState,
   StreamActorCallback,
   LivenessError,
+  ErrorState,
 } from '../types';
 import {
   BlazeFaceFaceDetection,
@@ -717,7 +718,7 @@ export const livenessMachine = createMachine<LivenessContext, LivenessEvent>(
       // callbacks
       callUserPermissionDeniedCallback: assign({
         errorState: (context, event) => {
-          let errorState: LivenessErrorState;
+          let errorState: ErrorState;
 
           if ((event.data!.message as string).includes('15 fps')) {
             errorState = LivenessErrorState.CAMERA_FRAMERATE_ERROR;
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/service/types/error.ts b/packages/react-liveness/src/components/FaceLivenessDetector/service/types/error.ts
index 91abd091706..db742249c30 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/service/types/error.ts
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/service/types/error.ts
@@ -2,14 +2,16 @@
  * The liveness error states
  */
 
-export enum LivenessErrorState {
-  TIMEOUT = 'TIMEOUT',
-  RUNTIME_ERROR = 'RUNTIME_ERROR',
-  FRESHNESS_TIMEOUT = 'FRESHNESS_TIMEOUT',
-  SERVER_ERROR = 'SERVER_ERROR',
-  CAMERA_FRAMERATE_ERROR = 'CAMERA_FRAMERATE_ERROR',
-  CAMERA_ACCESS_ERROR = 'CAMERA_ACCESS_ERROR',
-  FACE_DISTANCE_ERROR = 'FACE_DISTANCE_ERROR',
-  MOBILE_LANDSCAPE_ERROR = 'MOBILE_LANDSCAPE_ERROR',
-  MULTIPLE_FACES_ERROR = 'MULTIPLE_FACES_ERROR',
-}
+export const LivenessErrorState = {
+  TIMEOUT: 'TIMEOUT',
+  RUNTIME_ERROR: 'RUNTIME_ERROR',
+  FRESHNESS_TIMEOUT: 'FRESHNESS_TIMEOUT',
+  SERVER_ERROR: 'SERVER_ERROR',
+  CAMERA_FRAMERATE_ERROR: 'CAMERA_FRAMERATE_ERROR',
+  CAMERA_ACCESS_ERROR: 'CAMERA_ACCESS_ERROR',
+  FACE_DISTANCE_ERROR: 'FACE_DISTANCE_ERROR',
+  MOBILE_LANDSCAPE_ERROR: 'MOBILE_LANDSCAPE_ERROR',
+  MULTIPLE_FACES_ERROR: 'MULTIPLE_FACES_ERROR',
+} as const;
+
+export type ErrorState = keyof typeof LivenessErrorState;
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/service/types/liveness.ts b/packages/react-liveness/src/components/FaceLivenessDetector/service/types/liveness.ts
index e04e85f5362..5fe1a94df9a 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/service/types/liveness.ts
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/service/types/liveness.ts
@@ -1,5 +1,5 @@
 import { AwsCredentialProvider } from './credentials';
-import { LivenessErrorState } from './error';
+import { ErrorState } from './error';
 
 /**
  * The props for the FaceLivenessDetectorCore which allows for full configuration of auth
@@ -124,6 +124,6 @@ export enum FaceMatchState {
 }
 
 export interface LivenessError {
-  state: LivenessErrorState;
+  state: ErrorState;
   error: Error;
 }
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/service/types/machine.ts b/packages/react-liveness/src/components/FaceLivenessDetector/service/types/machine.ts
index 23fe128ecb4..924e17e71bc 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/service/types/machine.ts
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/service/types/machine.ts
@@ -13,7 +13,7 @@ import {
   LivenessOvalDetails,
   IlluminationState,
 } from './liveness';
-import { LivenessErrorState } from './error';
+import { ErrorState } from './error';
 import {
   VideoRecorder,
   LivenessStreamProvider,
@@ -67,7 +67,7 @@ export interface HydratedLivenessContext {
   ovalAssociatedParams: OvalAssociatedParams;
   faceMatchAssociatedParams: FaceMatchAssociatedParams;
   freshnessColorAssociatedParams: FreshnessColorAssociatedParams;
-  errorState: LivenessErrorState;
+  errorState: ErrorState;
   livenessStreamProvider: LivenessStreamProvider;
   responseStreamActorRef: ActorRef<any>;
   shouldDisconnect: boolean;
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts b/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts
index 5e3bc6db18b..bdb3262da58 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts
@@ -6,6 +6,7 @@ import {
   FaceMatchState,
   BoundingBox,
   LivenessErrorState,
+  ErrorState,
 } from '../types';
 import { FaceDetection } from '../types/faceDetection';
 import { ClientFreshnessColorSequence } from '../types/service';
@@ -459,7 +460,7 @@ export function isCameraDeviceVirtual(device: MediaDeviceInfo): boolean {
   return device.label.toLowerCase().includes('virtual');
 }
 
-export const LivenessErrorStateStringMap: Record<LivenessErrorState, string> = {
+export const LivenessErrorStateStringMap = {
   [LivenessErrorState.RUNTIME_ERROR]: 'RUNTIME_ERROR',
   [LivenessErrorState.SERVER_ERROR]: 'SERVER_ERROR',
   [LivenessErrorState.TIMEOUT]: 'TIMEOUT',
@@ -741,18 +742,13 @@ export async function isFaceDistanceBelowThreshold({
   isMobile?: boolean;
 }): Promise<{
   isDistanceBelowThreshold: boolean;
-  error?:
-    | LivenessErrorState.FACE_DISTANCE_ERROR
-    | LivenessErrorState.MULTIPLE_FACES_ERROR;
+  error?: ErrorState;
 }> {
   const detectedFaces = await faceDetector.detectFaces(videoEl);
   let detectedFace: Face;
 
   let isDistanceBelowThreshold = false;
-  let error:
-    | LivenessErrorState.FACE_DISTANCE_ERROR
-    | LivenessErrorState.MULTIPLE_FACES_ERROR
-    | undefined;
+  let error: ErrorState | undefined;
 
   switch (detectedFaces.length) {
     case 0: {
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/streamProvider.ts b/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/streamProvider.ts
index 1324a04b9c8..0924f602e51 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/streamProvider.ts
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/streamProvider.ts
@@ -2,7 +2,6 @@ import {
   Credentials as AmplifyCredentials,
   getAmplifyUserAgent,
 } from '@aws-amplify/core';
-import { AmazonAIInterpretPredictionsProvider } from '@aws-amplify/predictions';
 import {
   ClientSessionInformationEvent,
   LivenessResponseStream,
@@ -59,7 +58,7 @@ function isEndStreamWithCodeEvent(obj: unknown): obj is EndStreamWithCodeEvent {
   return (obj as EndStreamWithCodeEvent).code !== undefined;
 }
 
-export class LivenessStreamProvider extends AmazonAIInterpretPredictionsProvider {
+export class LivenessStreamProvider {
   public sessionId: string;
   public region: string;
   public videoRecorder: VideoRecorder;
@@ -79,7 +78,6 @@ export class LivenessStreamProvider extends AmazonAIInterpretPredictionsProvider
     videoEl,
     credentialProvider,
   }: StreamProviderArgs) {
-    super();
     this.sessionId = sessionId;
     this.region = region;
     this._stream = stream;
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
index 5380151a7d7..47fcf11e337 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Flex, Button, Text } from '@aws-amplify/ui-react';
 import { AlertIcon } from '@aws-amplify/ui-react/internal';
 
-import { LivenessErrorState } from '../service';
+import { LivenessErrorState, ErrorState } from '../service';
 
 import { Toast } from './Toast';
 import { Overlay } from './Overlay';
@@ -21,7 +21,7 @@ export interface FaceLivenessErrorModalProps {
 }
 
 const renderToastErrorModal = (props: {
-  error: LivenessErrorState;
+  error: ErrorState;
   displayText: Required<ErrorDisplayText>;
 }) => {
   const { error: errorState, displayText } = props;
@@ -80,7 +80,7 @@ export const renderErrorModal = ({
   errorState,
   overrideErrorDisplayText,
 }: {
-  errorState: LivenessErrorState;
+  errorState: ErrorState;
   overrideErrorDisplayText?: ErrorDisplayText;
 }): JSX.Element | null => {
   const displayText: Required<ErrorDisplayText> = {
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/FaceLivenessErrorModal.test.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/FaceLivenessErrorModal.test.tsx
index 6a98f0b8427..ea14ae4d0a0 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/FaceLivenessErrorModal.test.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/FaceLivenessErrorModal.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 
-import { LivenessErrorState } from '../../service';
+import { LivenessErrorState, ErrorState } from '../../service';
 import {
   FaceLivenessErrorModal,
   renderErrorModal,
@@ -60,7 +60,7 @@ describe('FaceLivenessErrorModal', () => {
     render(
       <FaceLivenessErrorModal onRetry={() => {}}>
         {renderErrorModal({
-          errorState: errorState as unknown as LivenessErrorState,
+          errorState: errorState as unknown as ErrorState,
         })}
       </FaceLivenessErrorModal>
     );
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/Hint.test.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/Hint.test.tsx
index e15d1b3a45d..2de757918f9 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/Hint.test.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/Hint.test.tsx
@@ -6,6 +6,7 @@ import {
   IlluminationState,
   FaceMatchState,
   LivenessErrorState,
+  ErrorState,
 } from '../../service';
 
 import {
@@ -33,7 +34,7 @@ describe('Hint', () => {
   };
   const mockActorSend = jest.fn();
 
-  let errorState: LivenessErrorState | null = null;
+  let errorState: ErrorState | null = null;
   let faceMatchState: FaceMatchState | null = null;
   let illuminationState: IlluminationState | null = null;
   let faceMatchStateBeforeStart: FaceMatchState | null = null;
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/LandscapeErrorModal.test.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/LandscapeErrorModal.test.tsx
index 6a98f0b8427..14b51d41ad4 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/LandscapeErrorModal.test.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/LandscapeErrorModal.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 
-import { LivenessErrorState } from '../../service';
+import { ErrorState, LivenessErrorState } from '../../service';
 import {
   FaceLivenessErrorModal,
   renderErrorModal,
@@ -60,7 +60,7 @@ describe('FaceLivenessErrorModal', () => {
     render(
       <FaceLivenessErrorModal onRetry={() => {}}>
         {renderErrorModal({
-          errorState: errorState as unknown as LivenessErrorState,
+          errorState: errorState as unknown as ErrorState,
         })}
       </FaceLivenessErrorModal>
     );
diff --git a/packages/react-liveness/src/index.ts b/packages/react-liveness/src/index.ts
index 8b2997eb5fa..41aa4c4dace 100644
--- a/packages/react-liveness/src/index.ts
+++ b/packages/react-liveness/src/index.ts
@@ -6,4 +6,5 @@ export {
   AwsCredentialProvider,
   AwsCredentials,
   AwsTemporaryCredentials,
+  ErrorState,
 } from './components';
diff --git a/packages/react-liveness/src/version.ts b/packages/react-liveness/src/version.ts
index ba4798a1e46..ecba926dc3b 100644
--- a/packages/react-liveness/src/version.ts
+++ b/packages/react-liveness/src/version.ts
@@ -1 +1 @@
-export const VERSION = '2.0.7';
+export const VERSION = '2.0.8';
diff --git a/packages/react-native/CHANGELOG.md b/packages/react-native/CHANGELOG.md
index d178474e10b..69ca2f7c45d 100644
--- a/packages/react-native/CHANGELOG.md
+++ b/packages/react-native/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @aws-amplify/ui-react-native
 
+## 1.2.28
+
+### Patch Changes
+
+- Updated dependencies [[`d570694c7`](https://github.com/aws-amplify/amplify-ui/commit/d570694c7e0d9d112449d3aade2d567773555926), [`6a5a4d79c`](https://github.com/aws-amplify/amplify-ui/commit/6a5a4d79ce60124fba2dc00d86b9e1a9b5f21c39)]:
+  - @aws-amplify/ui@5.8.1
+  - @aws-amplify/ui-react-core@2.1.33
+  - @aws-amplify/ui-react-core-notifications@1.0.10
+
 ## 1.2.27
 
 ### Patch Changes
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
index 45414e806f3..0c40025840a 100644
--- a/packages/react-native/package.json
+++ b/packages/react-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.2.27",
+  "version": "1.2.28",
   "main": "lib/index.js",
   "module": "dist/index.js",
   "react-native": "src/index.ts",
@@ -40,9 +40,9 @@
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.8.0",
-    "@aws-amplify/ui-react-core": "2.1.32",
-    "@aws-amplify/ui-react-core-notifications": "1.0.9"
+    "@aws-amplify/ui": "5.8.1",
+    "@aws-amplify/ui-react-core": "2.1.33",
+    "@aws-amplify/ui-react-core-notifications": "1.0.10"
   },
   "peerDependencies": {
     "aws-amplify": "^5.0.1",
diff --git a/packages/react-native/src/version.ts b/packages/react-native/src/version.ts
index ef3681800dc..fc8f6b0417b 100644
--- a/packages/react-native/src/version.ts
+++ b/packages/react-native/src/version.ts
@@ -1 +1 @@
-export const VERSION = '1.2.27';
+export const VERSION = '1.2.28';
diff --git a/packages/react-notifications/CHANGELOG.md b/packages/react-notifications/CHANGELOG.md
index ed01259e2fc..b4184fbf4b9 100644
--- a/packages/react-notifications/CHANGELOG.md
+++ b/packages/react-notifications/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @aws-amplify/ui-react-notifications
 
+## 1.0.13
+
+### Patch Changes
+
+- Updated dependencies [[`d570694c7`](https://github.com/aws-amplify/amplify-ui/commit/d570694c7e0d9d112449d3aade2d567773555926), [`6a5a4d79c`](https://github.com/aws-amplify/amplify-ui/commit/6a5a4d79ce60124fba2dc00d86b9e1a9b5f21c39), [`c393b74af`](https://github.com/aws-amplify/amplify-ui/commit/c393b74af6574593b2e7a5c9f00d27b052966a12), [`7e11a3b7e`](https://github.com/aws-amplify/amplify-ui/commit/7e11a3b7e4761a39a973ecd9a632a619660e18dd)]:
+  - @aws-amplify/ui-react@5.3.1
+  - @aws-amplify/ui@5.8.1
+  - @aws-amplify/ui-react-core-notifications@1.0.10
+
 ## 1.0.12
 
 ### Patch Changes
diff --git a/packages/react-notifications/package.json b/packages/react-notifications/package.json
index eedb8d0342b..5a9af0b70a1 100644
--- a/packages/react-notifications/package.json
+++ b/packages/react-notifications/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-notifications",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -40,9 +40,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.8.0",
-    "@aws-amplify/ui-react": "5.3.0",
-    "@aws-amplify/ui-react-core-notifications": "1.0.9",
+    "@aws-amplify/ui": "5.8.1",
+    "@aws-amplify/ui-react": "5.3.1",
+    "@aws-amplify/ui-react-core-notifications": "1.0.10",
     "classnames": "2.3.1",
     "tinycolor2": "1.4.2"
   },
diff --git a/packages/react-storage/CHANGELOG.md b/packages/react-storage/CHANGELOG.md
index 080f09027d5..7bd740cefb4 100644
--- a/packages/react-storage/CHANGELOG.md
+++ b/packages/react-storage/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @aws-amplify/ui-react-storage
 
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`d570694c7`](https://github.com/aws-amplify/amplify-ui/commit/d570694c7e0d9d112449d3aade2d567773555926), [`6a5a4d79c`](https://github.com/aws-amplify/amplify-ui/commit/6a5a4d79ce60124fba2dc00d86b9e1a9b5f21c39), [`c393b74af`](https://github.com/aws-amplify/amplify-ui/commit/c393b74af6574593b2e7a5c9f00d27b052966a12), [`7e11a3b7e`](https://github.com/aws-amplify/amplify-ui/commit/7e11a3b7e4761a39a973ecd9a632a619660e18dd)]:
+  - @aws-amplify/ui-react@5.3.1
+  - @aws-amplify/ui@5.8.1
+  - @aws-amplify/ui-react-core@2.1.33
+
 ## 2.3.0
 
 ### Minor Changes
diff --git a/packages/react-storage/package.json b/packages/react-storage/package.json
index ab1718c9cd5..6023fdcd4fe 100644
--- a/packages/react-storage/package.json
+++ b/packages/react-storage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-storage",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -40,9 +40,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.8.0",
-    "@aws-amplify/ui-react": "5.3.0",
-    "@aws-amplify/ui-react-core": "2.1.32",
+    "@aws-amplify/ui": "5.8.1",
+    "@aws-amplify/ui-react": "5.3.1",
+    "@aws-amplify/ui-react-core": "2.1.33",
     "classnames": "2.3.1",
     "lodash": "4.17.21",
     "tslib": "2.4.1"
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index a93e2c7c808..64617537d69 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,37 @@
 # @aws-amplify/ui-react
 
+## 5.3.1
+
+### Patch Changes
+
+- [#4414](https://github.com/aws-amplify/amplify-ui/pull/4414) [`d570694c7`](https://github.com/aws-amplify/amplify-ui/commit/d570694c7e0d9d112449d3aade2d567773555926) Thanks [@lavr001](https://github.com/lavr001)! - added new `isMultiple` and `selectSize` props for the `SelectField` component
+
+  Example:
+
+  ```
+    <SelectField
+      label="Fruit"
+      descriptiveText="What's your favorite fruit?"
+      selectSize={3}
+      isMultiple={true}
+    >
+      <option value="apple">Apple</option>
+      <option value="banana">Banana</option>
+      <option value="orange">Orange</option>
+      <option value="pineapple">Pineapple</option>
+      <option value="kiwi">Kiwi</option>
+      <option value="tangerine">Tangerine</option>
+    </SelectField>
+  ```
+
+- [#4432](https://github.com/aws-amplify/amplify-ui/pull/4432) [`c393b74af`](https://github.com/aws-amplify/amplify-ui/commit/c393b74af6574593b2e7a5c9f00d27b052966a12) Thanks [@calebpollman](https://github.com/calebpollman)! - fix(ui-react): update ButtonGroup to respect child props and allow optional children
+
+- [#4442](https://github.com/aws-amplify/amplify-ui/pull/4442) [`7e11a3b7e`](https://github.com/aws-amplify/amplify-ui/commit/7e11a3b7e4761a39a973ecd9a632a619660e18dd) Thanks [@calebpollman](https://github.com/calebpollman)! - fix(ui-react): use guaranteed value for BreadCrumbs key
+
+- Updated dependencies [[`d570694c7`](https://github.com/aws-amplify/amplify-ui/commit/d570694c7e0d9d112449d3aade2d567773555926), [`6a5a4d79c`](https://github.com/aws-amplify/amplify-ui/commit/6a5a4d79ce60124fba2dc00d86b9e1a9b5f21c39)]:
+  - @aws-amplify/ui@5.8.1
+  - @aws-amplify/ui-react-core@2.1.33
+
 ## 5.3.0
 
 ### Minor Changes
diff --git a/packages/react/__tests__/__snapshots__/exports.ts.snap b/packages/react/__tests__/__snapshots__/exports.ts.snap
index 958a4f005b9..de09aef37a8 100644
--- a/packages/react/__tests__/__snapshots__/exports.ts.snap
+++ b/packages/react/__tests__/__snapshots__/exports.ts.snap
@@ -11592,6 +11592,9 @@ Object {
       "isDisabled": Object {
         "type": "boolean",
       },
+      "isMultiple": Object {
+        "type": "boolean",
+      },
       "isRequired": Object {
         "type": "boolean",
       },
@@ -11730,6 +11733,9 @@ Object {
       "rowStart": Object {
         "type": "string",
       },
+      "selectSize": Object {
+        "type": "number",
+      },
       "shrink": Object {
         "type": "string",
       },
diff --git a/packages/react/package.json b/packages/react/package.json
index a6614c5f019..7fc416eee62 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -47,8 +47,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.8.0",
-    "@aws-amplify/ui-react-core": "2.1.32",
+    "@aws-amplify/ui": "5.8.1",
+    "@aws-amplify/ui-react-core": "2.1.33",
     "@radix-ui/react-accordion": "1.0.0",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
diff --git a/packages/react/src/primitives/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/primitives/Breadcrumbs/Breadcrumbs.tsx
index 66874da7ac6..9a6ff96bec4 100644
--- a/packages/react/src/primitives/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/primitives/Breadcrumbs/Breadcrumbs.tsx
@@ -28,7 +28,7 @@ const BreadcrumbsPrimitive: Primitive<BreadcrumbsProps, 'nav'> = (
       {items?.map(({ href, label }, idx) => {
         const isCurrent = items.length - 1 === idx;
         return (
-          <BreadcrumbItem key={href}>
+          <BreadcrumbItem key={`${href}${idx}`}>
             <BreadcrumbLink href={href} isCurrent={isCurrent}>
               {label}
             </BreadcrumbLink>
diff --git a/packages/react/src/primitives/ButtonGroup/ButtonGroup.tsx b/packages/react/src/primitives/ButtonGroup/ButtonGroup.tsx
index d355e406cc8..28d6f9a7d38 100644
--- a/packages/react/src/primitives/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/primitives/ButtonGroup/ButtonGroup.tsx
@@ -12,7 +12,14 @@ import { ComponentClassNames } from '../shared/constants';
 import { Flex } from '../Flex';
 
 const ButtonGroupPrimitive: Primitive<ButtonGroupProps, 'div'> = (
-  { className, children, role = 'group', size, variation, ...rest },
+  {
+    className,
+    children,
+    role = 'group',
+    size: _size,
+    variation: _variation,
+    ...rest
+  },
   ref
 ) => (
   <Flex
@@ -23,6 +30,7 @@ const ButtonGroupPrimitive: Primitive<ButtonGroupProps, 'div'> = (
   >
     {React.Children.map(children, (child) => {
       if (React.isValidElement<ButtonProps>(child)) {
+        const { size = _size, variation = _variation } = child.props;
         return React.cloneElement(child, { size, variation });
       }
       return child;
diff --git a/packages/react/src/primitives/ButtonGroup/__tests__/ButtonGroup.test.tsx b/packages/react/src/primitives/ButtonGroup/__tests__/ButtonGroup.test.tsx
index 7b89d6795e2..0ed0cdec94e 100644
--- a/packages/react/src/primitives/ButtonGroup/__tests__/ButtonGroup.test.tsx
+++ b/packages/react/src/primitives/ButtonGroup/__tests__/ButtonGroup.test.tsx
@@ -10,35 +10,37 @@ import {
   expectFlexContainerStyleProps,
 } from '../../Flex/__tests__/Flex.test';
 
-describe('ButtonGroup:', () => {
-  const getButtonGroup = (
-    props: Partial<PrimitiveProps<ButtonGroupProps, 'div'>>
-  ) => {
-    return (
-      <ButtonGroup {...props}>
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
-      </ButtonGroup>
-    );
-  };
+const ButtonGroupWithChildren = React.forwardRef<
+  HTMLDivElement,
+  ButtonGroupProps
+>((props, ref) => {
+  return (
+    <ButtonGroup {...props} ref={ref}>
+      <Button>Button 1</Button>
+      <Button>Button 2</Button>
+      <Button>Button 3</Button>
+    </ButtonGroup>
+  );
+});
+
+describe('ButtonGroup', () => {
   it('should render classname and custom classname', async () => {
     const className = 'class-test';
-    render(getButtonGroup({ className }));
+    render(<ButtonGroupWithChildren className={className} />);
 
     const buttonGroup = await screen.findByRole('group');
     expect(buttonGroup).toHaveClass(ComponentClassNames.ButtonGroup, className);
   });
 
   it('should render all flex style props', async () => {
-    render(getButtonGroup(testFlexProps));
+    render(<ButtonGroupWithChildren {...testFlexProps} />);
     const buttonGroup = await screen.findByRole('group');
     expectFlexContainerStyleProps(buttonGroup);
   });
 
   it('should set size for each child button correctly', async () => {
     const size = 'large';
-    render(getButtonGroup({ size }));
+    render(<ButtonGroupWithChildren size={size} />);
 
     const buttons = await screen.findAllByRole('button');
     expect(buttons[0]).toHaveAttribute('data-size', size);
@@ -46,9 +48,9 @@ describe('ButtonGroup:', () => {
     expect(buttons[2]).toHaveAttribute('data-size', size);
   });
 
-  it('should set variation for each child button correctly', async () => {
+  it('sets variation for each child button correctly', async () => {
     const variation = 'primary';
-    render(getButtonGroup({ variation }));
+    render(<ButtonGroupWithChildren variation={variation} />);
 
     const buttons = await screen.findAllByRole('button');
     expect(buttons[0]).toHaveAttribute('data-variation', variation);
@@ -56,9 +58,34 @@ describe('ButtonGroup:', () => {
     expect(buttons[2]).toHaveAttribute('data-variation', variation);
   });
 
+  it('respects child button size and variation props', async () => {
+    const size = 'large';
+    const variation = 'primary';
+    render(
+      <ButtonGroup size={size} variation={variation}>
+        <Button size="small">Button 1</Button>
+        <Button>Button 2</Button>
+        <Button variation="link">Button 3</Button>
+      </ButtonGroup>
+    );
+    const [first, second, third] = await screen.findAllByRole('button');
+
+    // override size prop
+    expect(first).toHaveAttribute('data-size', 'small');
+    expect(first).toHaveAttribute('data-variation', variation);
+
+    // inherit parent props
+    expect(second).toHaveAttribute('data-size', size);
+    expect(second).toHaveAttribute('data-variation', variation);
+
+    // override size prop
+    expect(second).toHaveAttribute('data-size', size);
+    expect(third).toHaveAttribute('data-variation', 'link');
+  });
+
   it('should forward ref to DOM element', async () => {
     const ref = React.createRef<HTMLDivElement>();
-    render(getButtonGroup({ ref }));
+    render(<ButtonGroupWithChildren ref={ref} />);
 
     await screen.findAllByRole('group');
     expect(ref.current?.nodeName).toBe('DIV');
diff --git a/packages/react/src/primitives/Select/Select.tsx b/packages/react/src/primitives/Select/Select.tsx
index 720fd78d33f..b5de0932cf3 100644
--- a/packages/react/src/primitives/Select/Select.tsx
+++ b/packages/react/src/primitives/Select/Select.tsx
@@ -25,6 +25,8 @@ const SelectPrimitive: Primitive<SelectProps, 'select'> = (
     placeholder,
     isDisabled,
     isRequired,
+    isMultiple = false,
+    selectSize = 1,
     ...rest
   },
   ref
@@ -33,12 +35,16 @@ const SelectPrimitive: Primitive<SelectProps, 'select'> = (
   // value === undefined is to make sure that component is used in uncontrolled way so that setting defaultValue is valid
   const shouldSetDefaultPlaceholderValue =
     value === undefined && defaultValue === undefined && placeholder;
+
+  const isExpanded = isMultiple || selectSize > 1;
+
   const componentClasses = classNames(
     ComponentClassNames.Select,
     ComponentClassNames.FieldGroupControl,
     classNameModifier(ComponentClassNames.Select, size),
     classNameModifier(ComponentClassNames.Select, variation),
     classNameModifierByFlag(ComponentClassNames.Select, 'error', hasError),
+    classNameModifierByFlag(ComponentClassNames.Select, 'expanded', isExpanded),
     className
   );
   const icons = useIcons('select');
@@ -57,6 +63,8 @@ const SelectPrimitive: Primitive<SelectProps, 'select'> = (
             : defaultValue
         }
         isDisabled={isFieldsetDisabled ? isFieldsetDisabled : isDisabled}
+        multiple={isMultiple}
+        size={selectSize}
         required={isRequired}
         data-size={size}
         data-variation={variation}
@@ -67,15 +75,17 @@ const SelectPrimitive: Primitive<SelectProps, 'select'> = (
         {placeholder && <option value="">{placeholder}</option>}
         {children}
       </View>
-      <Flex
-        className={classNames(
-          ComponentClassNames.SelectIconWrapper,
-          classNameModifier(ComponentClassNames.SelectIconWrapper, size)
-        )}
-        color={iconColor}
-      >
-        {icon ?? icons?.expand ?? <IconExpandMore />}
-      </Flex>
+      {isExpanded ? null : (
+        <Flex
+          className={classNames(
+            ComponentClassNames.SelectIconWrapper,
+            classNameModifier(ComponentClassNames.SelectIconWrapper, size)
+          )}
+          color={iconColor}
+        >
+          {icon ?? icons?.expand ?? <IconExpandMore />}
+        </Flex>
+      )}
     </View>
   );
 };
diff --git a/packages/react/src/primitives/Select/__tests__/Select.test.tsx b/packages/react/src/primitives/Select/__tests__/Select.test.tsx
index 42c8de13dfe..cae2762901c 100644
--- a/packages/react/src/primitives/Select/__tests__/Select.test.tsx
+++ b/packages/react/src/primitives/Select/__tests__/Select.test.tsx
@@ -39,6 +39,7 @@ describe('Select primitive test suite', () => {
         variation={variation}
         isDisabled={false}
         isRequired={false}
+        isMultiple={false}
       >
         <option value="1">1</option>
         <option value="2">2</option>
@@ -126,6 +127,32 @@ describe('Select primitive test suite', () => {
     expect(select).toBeRequired();
   });
 
+  it('should render the multiple attribute', async () => {
+    render(
+      <Select testId={testId} isMultiple>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+      </Select>
+    );
+
+    const select = await screen.findByTestId('test-select');
+    expect(select).toHaveAttribute('multiple');
+  });
+
+  it('should render the size attribute', async () => {
+    render(
+      <Select testId={testId} selectSize={2}>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+      </Select>
+    );
+
+    const select = await screen.findByTestId('test-select');
+    expect(select).toHaveAttribute('size', '2');
+  });
+
   it('should always be disabled if parent Fieldset isDisabled', async () => {
     render(
       <Fieldset legend="legend" isDisabled>
diff --git a/packages/react/src/primitives/SelectField/__tests__/SelectField.test.tsx b/packages/react/src/primitives/SelectField/__tests__/SelectField.test.tsx
index 1828e07b168..28ab019c246 100644
--- a/packages/react/src/primitives/SelectField/__tests__/SelectField.test.tsx
+++ b/packages/react/src/primitives/SelectField/__tests__/SelectField.test.tsx
@@ -157,6 +157,32 @@ describe('SelectField', () => {
     expect(select).toBeRequired();
   });
 
+  it('should render the multiple attribute', async () => {
+    render(
+      <SelectField label={label} className={className} isMultiple>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+      </SelectField>
+    );
+
+    const select = await screen.findByRole('listbox');
+    expect(select).toHaveAttribute('multiple');
+  });
+
+  it('should render the size attribute', async () => {
+    render(
+      <SelectField label={label} className={className} selectSize={2}>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+      </SelectField>
+    );
+
+    const select = await screen.findByRole('listbox');
+    expect(select).toHaveAttribute('size', '2');
+  });
+
   it('should set size and variation data attributes', async () => {
     render(
       <SelectField label={label} testId={testId} size="small" variation="quiet">
diff --git a/packages/react/src/primitives/types/buttonGroup.ts b/packages/react/src/primitives/types/buttonGroup.ts
index c3e7945786b..41c5203d315 100644
--- a/packages/react/src/primitives/types/buttonGroup.ts
+++ b/packages/react/src/primitives/types/buttonGroup.ts
@@ -12,7 +12,7 @@ export interface BaseButtonGroupProps
     BaseStyleProps,
     BaseFlexProps,
     Pick<BaseButtonProps, 'size' | 'variation'> {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 export type ButtonGroupProps<Element extends ElementType = 'div'> =
diff --git a/packages/react/src/primitives/types/select.ts b/packages/react/src/primitives/types/select.ts
index 120d9b952ec..d78cd9d8116 100644
--- a/packages/react/src/primitives/types/select.ts
+++ b/packages/react/src/primitives/types/select.ts
@@ -73,6 +73,18 @@ export interface BaseSelectProps extends BaseViewProps {
    */
   isDisabled?: boolean;
 
+  /**
+   * @description
+   * A Boolean attribute indicating that multiple options can be selected at once
+   */
+  isMultiple?: boolean;
+
+  /**
+   * @description
+   * Sets the number of visible options in a drop-down list
+   */
+  selectSize?: number;
+
   /**
    * @description
    * A Boolean attribute indicating that an option with a non-empty string value must be selected
diff --git a/packages/react/src/version.ts b/packages/react/src/version.ts
index 1c1586937a9..07fdf7bdceb 100644
--- a/packages/react/src/version.ts
+++ b/packages/react/src/version.ts
@@ -1 +1 @@
-export const VERSION = '5.3.0';
+export const VERSION = '5.3.1';
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 73c23992df7..78e7a0b9167 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,31 @@
 # @aws-amplify/ui
 
+## 5.8.1
+
+### Patch Changes
+
+- [#4414](https://github.com/aws-amplify/amplify-ui/pull/4414) [`d570694c7`](https://github.com/aws-amplify/amplify-ui/commit/d570694c7e0d9d112449d3aade2d567773555926) Thanks [@lavr001](https://github.com/lavr001)! - added new `isMultiple` and `selectSize` props for the `SelectField` component
+
+  Example:
+
+  ```
+    <SelectField
+      label="Fruit"
+      descriptiveText="What's your favorite fruit?"
+      selectSize={3}
+      isMultiple={true}
+    >
+      <option value="apple">Apple</option>
+      <option value="banana">Banana</option>
+      <option value="orange">Orange</option>
+      <option value="pineapple">Pineapple</option>
+      <option value="kiwi">Kiwi</option>
+      <option value="tangerine">Tangerine</option>
+    </SelectField>
+  ```
+
+- [#4457](https://github.com/aws-amplify/amplify-ui/pull/4457) [`6a5a4d79c`](https://github.com/aws-amplify/amplify-ui/commit/6a5a4d79ce60124fba2dc00d86b9e1a9b5f21c39) Thanks [@esauerbo](https://github.com/esauerbo)! - fix(ui): remove error border from disabled and quiet primitive fields
+
 ## 5.8.0
 
 ### Minor Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 41dc1a0f9b0..cd2d2c9f5cb 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "5.8.0",
+  "version": "5.8.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
diff --git a/packages/ui/src/theme/__tests__/defaultTheme.test.ts b/packages/ui/src/theme/__tests__/defaultTheme.test.ts
index cd08367b1b6..cf2c6a0a7e1 100644
--- a/packages/ui/src/theme/__tests__/defaultTheme.test.ts
+++ b/packages/ui/src/theme/__tests__/defaultTheme.test.ts
@@ -1019,7 +1019,11 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
         --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
         --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
+        --amplify-components-select-color: var(--amplify-components-fieldcontrol-color);
+        --amplify-components-select-background-color: var(--amplify-colors-background-primary);
         --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
+        --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled);
+        --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled);
         --amplify-components-select-wrapper-flex: 1;
         --amplify-components-select-wrapper-display: block;
         --amplify-components-select-wrapper-position: relative;
@@ -1032,15 +1036,20 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-select-icon-wrapper-pointer-events: none;
         --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
         --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
-        --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
+        --amplify-components-select-option-background-color: transparent;
         --amplify-components-select-option-color: var(--amplify-colors-font-primary);
         --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
+        --amplify-components-select-option-disabled-background-color: transparent;
         --amplify-components-select-white-space: nowrap;
         --amplify-components-select-min-width: 6.5rem;
         --amplify-components-select-small-min-width: 5.5rem;
         --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
         --amplify-components-select-large-min-width: 7.5rem;
         --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
+        --amplify-components-select-expanded-padding-block: var(--amplify-space-xs);
+        --amplify-components-select-expanded-padding-inline: var(--amplify-space-small);
+        --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs);
+        --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small);
         --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
         --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
         --amplify-components-selectfield-flex-direction: column;
diff --git a/packages/ui/src/theme/__tests__/overrides.test.ts b/packages/ui/src/theme/__tests__/overrides.test.ts
index 129ab079556..9fa30735de9 100644
--- a/packages/ui/src/theme/__tests__/overrides.test.ts
+++ b/packages/ui/src/theme/__tests__/overrides.test.ts
@@ -1053,7 +1053,11 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
         --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
         --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
+        --amplify-components-select-color: var(--amplify-components-fieldcontrol-color);
+        --amplify-components-select-background-color: var(--amplify-colors-background-primary);
         --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
+        --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled);
+        --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled);
         --amplify-components-select-wrapper-flex: 1;
         --amplify-components-select-wrapper-display: block;
         --amplify-components-select-wrapper-position: relative;
@@ -1066,15 +1070,20 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-select-icon-wrapper-pointer-events: none;
         --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
         --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
-        --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
+        --amplify-components-select-option-background-color: transparent;
         --amplify-components-select-option-color: var(--amplify-colors-font-primary);
         --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
+        --amplify-components-select-option-disabled-background-color: transparent;
         --amplify-components-select-white-space: nowrap;
         --amplify-components-select-min-width: 6.5rem;
         --amplify-components-select-small-min-width: 5.5rem;
         --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
         --amplify-components-select-large-min-width: 7.5rem;
         --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
+        --amplify-components-select-expanded-padding-block: var(--amplify-space-xs);
+        --amplify-components-select-expanded-padding-inline: var(--amplify-space-small);
+        --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs);
+        --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small);
         --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
         --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
         --amplify-components-selectfield-flex-direction: column;
diff --git a/packages/ui/src/theme/css/component/_fieldControl.scss b/packages/ui/src/theme/css/component/_fieldControl.scss
index 577c08bee28..50393f577b9 100644
--- a/packages/ui/src/theme/css/component/_fieldControl.scss
+++ b/packages/ui/src/theme/css/component/_fieldControl.scss
@@ -71,16 +71,6 @@
     }
   }
 
-  // for disabled styles
-  &[disabled] {
-    color: var(--amplify-components-fieldcontrol-disabled-color);
-    cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
-    border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
-    background-color: var(
-      --amplify-components-fieldcontrol-disabled-background-color
-    );
-  }
-
   // variation styles
   &--quiet {
     border-block-start: var(
@@ -110,4 +100,14 @@
       }
     }
   }
+
+  // for disabled styles
+  &[disabled] {
+    color: var(--amplify-components-fieldcontrol-disabled-color);
+    cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+    border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+    background-color: var(
+      --amplify-components-fieldcontrol-disabled-background-color
+    );
+  }
 }
diff --git a/packages/ui/src/theme/css/component/select.scss b/packages/ui/src/theme/css/component/select.scss
index e4892c311bf..5e7722de090 100644
--- a/packages/ui/src/theme/css/component/select.scss
+++ b/packages/ui/src/theme/css/component/select.scss
@@ -14,9 +14,11 @@
   right: var(--amplify-components-select-icon-wrapper-right);
   transform: var(--amplify-components-select-icon-wrapper-transform);
   pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
+
   &--small {
     right: var(--amplify-components-select-icon-wrapper-small-right);
   }
+
   &--large {
     right: var(--amplify-components-select-icon-wrapper-large-right);
   }
@@ -25,26 +27,30 @@
 .amplify-select {
   @include amplify-field-control;
   // default styles
+  background-color: var(--amplify-components-select-background-color);
+  color: var(--amplify-components-select-color);
   min-width: var(--amplify-components-select-min-width);
   padding-inline-end: var(--amplify-components-select-padding-inline-end);
   white-space: var(--amplify-components-select-white-space);
-
-  // For Chrome on Windows, fixes darkmode text color
   option {
-    color: initial;
-
+    background-color: var(--amplify-components-select-option-background-color);
+    color: var(--amplify-components-select-option-color);
     &[disabled=''] {
+      background-color: var(
+        --amplify-components-select-option-disabled-background-color
+      );
       color: var(--amplify-components-select-option-disabled-color);
+      cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
     }
   }
-
-  // for Firefox only, to fix background color in darkmode
-  @-moz-document url-prefix() {
+  &[disabled] {
+    background-color: var(
+      --amplify-components-select-disabled-background-color
+    );
+    color: var(--amplify-components-select-disabled-color);
     option {
-      background-color: var(
-        --amplify-components-select-option-background-color
-      );
-      color: var(--amplify-components-select-option-color);
+      color: inherit;
+      background-color: inherit;
     }
   }
 
@@ -61,4 +67,15 @@
       --amplify-components-select-large-padding-inline-end
     );
   }
+
+  &--expanded {
+    overflow: auto;
+    padding: var(--amplify-components-select-expanded-padding-block)
+      var(--amplify-components-select-expanded-padding-inline);
+
+    option {
+      padding: var(--amplify-components-select-expanded-option-padding-block)
+        var(--amplify-components-select-expanded-option-padding-inline);
+    }
+  }
 }
diff --git a/packages/ui/src/theme/tokens/components/select.ts b/packages/ui/src/theme/tokens/components/select.ts
index a88ce5ffc31..f5665b31149 100644
--- a/packages/ui/src/theme/tokens/components/select.ts
+++ b/packages/ui/src/theme/tokens/components/select.ts
@@ -15,7 +15,11 @@ type SelectIconWrapperTokens<Output> = DesignTokenProperties<
 
 export type SelectTokens<Output extends OutputVariantKey> =
   DesignTokenProperties<
-    'paddingInlineEnd' | 'whiteSpace' | 'minWidth',
+    | 'backgroundColor'
+    | 'color'
+    | 'paddingInlineEnd'
+    | 'whiteSpace'
+    | 'minWidth',
     Output
   > & {
     wrapper?: DesignTokenProperties<
@@ -24,14 +28,27 @@ export type SelectTokens<Output extends OutputVariantKey> =
     >;
     iconWrapper?: SelectIconWrapperTokens<Output>;
     option?: DesignTokenProperties<'backgroundColor' | 'color', Output> & {
-      _disabled?: DesignTokenProperties<'color', Output>;
+      _disabled?: DesignTokenProperties<'color' | 'backgroundColor', Output>;
     };
     small?: SelectSizeTokens<Output>;
     large?: SelectSizeTokens<Output>;
+    expanded?: DesignTokenProperties<
+      'paddingBlock' | 'paddingInline',
+      Output
+    > & {
+      option?: DesignTokenProperties<'paddingBlock' | 'paddingInline', Output>;
+    };
+    _disabled?: DesignTokenProperties<'backgroundColor' | 'color', Output>;
   };
 
 export const select: Required<SelectTokens<'default'>> = {
+  color: { value: '{components.fieldcontrol.color}' },
+  backgroundColor: { value: '{colors.background.primary.value}' },
   paddingInlineEnd: { value: '{space.xxl.value}' },
+  _disabled: {
+    color: { value: '{colors.font.disabled.value}' },
+    backgroundColor: { value: '{colors.background.disabled.value}' },
+  },
   // wrappers
   wrapper: {
     flex: { value: '1' },
@@ -53,12 +70,17 @@ export const select: Required<SelectTokens<'default'>> = {
       right: { value: '{space.medium.value}' },
     },
   },
-  // for Firefox only, to fix background color in darkmode
+  // It's important to test these option values on Chrome/FireFox/Edge 
+  // on Windows because they allow styling of the option element. 
+  // Chrome/Safari/Firefox on Mac uses the system ui.
   option: {
-    backgroundColor: { value: '{colors.background.primary.value}' },
+    backgroundColor: { value: 'transparent' },
     color: { value: '{colors.font.primary.value}' },
     _disabled: {
       color: { value: '{colors.font.disabled.value}' },
+      backgroundColor: {
+        value: 'transparent',
+      },
     },
   },
   whiteSpace: { value: 'nowrap' },
@@ -71,4 +93,12 @@ export const select: Required<SelectTokens<'default'>> = {
     minWidth: { value: '7.5rem' },
     paddingInlineEnd: { value: '{space.xxl.value}' },
   },
+  expanded: {
+    paddingBlock: { value: '{space.xs.value}' },
+    paddingInline: { value: '{space.small.value}' },
+    option: {
+      paddingBlock: { value: '{space.xs.value}' },
+      paddingInline: { value: '{space.small.value}' },
+    },
+  },
 };
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 4f6b2ee6c5e..7e52892e5d0 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @aws-amplify/ui-vue
 
+## 3.1.28
+
+### Patch Changes
+
+- Updated dependencies [[`d570694c7`](https://github.com/aws-amplify/amplify-ui/commit/d570694c7e0d9d112449d3aade2d567773555926), [`6a5a4d79c`](https://github.com/aws-amplify/amplify-ui/commit/6a5a4d79ce60124fba2dc00d86b9e1a9b5f21c39)]:
+  - @aws-amplify/ui@5.8.1
+
 ## 3.1.27
 
 ### Patch Changes
diff --git a/packages/vue/package.json b/packages/vue/package.json
index a8ac10baa81..a3418fc637e 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-vue",
-  "version": "3.1.27",
+  "version": "3.1.28",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -37,7 +37,7 @@
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.8.0",
+    "@aws-amplify/ui": "5.8.1",
     "@vue/tsconfig": "^0.1.3",
     "@vueuse/core": "7.5.5",
     "@xstate/vue": "0.8.1",
diff --git a/packages/vue/src/version.ts b/packages/vue/src/version.ts
index b288c18f3f8..2fbc8d78cdf 100644
--- a/packages/vue/src/version.ts
+++ b/packages/vue/src/version.ts
@@ -1 +1 @@
-export const VERSION = '3.1.27';
+export const VERSION = '3.1.28';
diff --git a/yarn.lock b/yarn.lock
index ffb9db130d9..e6c44b6369a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2913,6 +2913,14 @@
     "@smithy/types" "^2.2.2"
     tslib "^2.5.0"
 
+"@aws-sdk/types@3.410.0":
+  version "3.410.0"
+  resolved "https://registry.npmjs.org/@aws-sdk/types/-/types-3.410.0.tgz#8c293e3763acb64c68f5752359523c3a40e5eb88"
+  integrity sha512-D7iaUCszv/v04NDaZUmCmekamy6VD/lKozm/3gS9+dkfU6cC2CsNoUfPV8BlV6dPdw0oWgF91am3I1stdvfVrQ==
+  dependencies:
+    "@smithy/types" "^2.3.0"
+    tslib "^2.5.0"
+
 "@aws-sdk/types@3.6.1":
   version "3.6.1"
   resolved "https://registry.npmjs.org/@aws-sdk/types/-/types-3.6.1.tgz#00686db69e998b521fcd4a5f81ef0960980f80c4"
@@ -3108,6 +3116,16 @@
     "@aws-sdk/types" "3.6.1"
     tslib "^1.8.0"
 
+"@aws-sdk/util-format-url@^3.410.0":
+  version "3.410.0"
+  resolved "https://registry.npmjs.org/@aws-sdk/util-format-url/-/util-format-url-3.410.0.tgz#80600d2c8c17c21c01879d1d74cc7092e1b60199"
+  integrity sha512-ftxPYq7RBxJMQrOCJARx8+sQccmG+6y7mm9JzfXOHOfS1aWnYQizTitJ7PMA8p90xrUAFQ2CmjT0jaEGWg5VGQ==
+  dependencies:
+    "@aws-sdk/types" "3.410.0"
+    "@smithy/querystring-builder" "^2.0.6"
+    "@smithy/types" "^2.3.0"
+    tslib "^2.5.0"
+
 "@aws-sdk/util-hex-encoding@3.186.0":
   version "3.186.0"
   resolved "https://registry.npmjs.org/@aws-sdk/util-hex-encoding/-/util-hex-encoding-3.186.0.tgz#7ed58b923997c6265f4dce60c8704237edb98895"
@@ -5434,9 +5452,9 @@
   integrity sha512-chTnjxV3vryL75N90wJIMdMafXmZoO2JgNJLYpsfcALL2/IQrRiny3vM9DgD5RDCSt1LNloMtb7rGey9YWxCsA==
 
 "@cypress/request@^2.88.11", "@cypress/request@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/@cypress/request/-/request-3.0.0.tgz#7f58dfda087615ed4e6aab1b25fffe7630d6dd85"
-  integrity sha512-GKFCqwZwMYmL3IBoNeR2MM1SnxRIGERsQOTWeQKoYBt2JLqcqiy7JXqO894FLrpjZYqGxW92MNwRH2BN56obdQ==
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz#72d7d5425236a2413bd3d8bb66d02d9dc3168960"
+  integrity sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -5451,7 +5469,7 @@
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.19"
     performance-now "^2.1.0"
-    qs "~6.10.3"
+    qs "6.10.4"
     safe-buffer "^5.1.2"
     tough-cookie "^4.1.3"
     tunnel-agent "^0.6.0"
@@ -7855,6 +7873,17 @@
     "@smithy/util-base64" "^2.0.0"
     tslib "^2.5.0"
 
+"@smithy/fetch-http-handler@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/@smithy/fetch-http-handler/-/fetch-http-handler-2.1.3.tgz#574a40085aef25edb60607dcdd6873549bd9e4c2"
+  integrity sha512-kUg+Ey4mJeR/3+Ponuhb1rsmsfZRwjCLvC+WcPgeI+ittretEzuWAPN+9anD0HJEoApVjHpndzxPtlncbCUJDQ==
+  dependencies:
+    "@smithy/protocol-http" "^3.0.3"
+    "@smithy/querystring-builder" "^2.0.7"
+    "@smithy/types" "^2.3.1"
+    "@smithy/util-base64" "^2.0.0"
+    tslib "^2.5.0"
+
 "@smithy/hash-node@^1.0.1":
   version "1.0.2"
   resolved "https://registry.npmjs.org/@smithy/hash-node/-/hash-node-1.0.2.tgz#dc65203a348d29e45c493ead3e772e4f7dfb5bc0"
@@ -8075,6 +8104,14 @@
     "@smithy/types" "^2.2.2"
     tslib "^2.5.0"
 
+"@smithy/protocol-http@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/@smithy/protocol-http/-/protocol-http-3.0.3.tgz#4f79cd1354db860b98d1c4f5d6ab180cefe0132d"
+  integrity sha512-UGfmQNdijlFV+UzgdRyfe05S5vLDdcdkvNcxhGvQ+Er7TjUkZSxjukQB9VXtT8oTHztgOMX74DDlPBsVzZR5Pg==
+  dependencies:
+    "@smithy/types" "^2.3.1"
+    tslib "^2.5.0"
+
 "@smithy/querystring-builder@^1.0.2":
   version "1.0.2"
   resolved "https://registry.npmjs.org/@smithy/querystring-builder/-/querystring-builder-1.0.2.tgz#ce861f6cbd14792c83aa19b4967a19923bd0706e"
@@ -8093,6 +8130,15 @@
     "@smithy/util-uri-escape" "^2.0.0"
     tslib "^2.5.0"
 
+"@smithy/querystring-builder@^2.0.6", "@smithy/querystring-builder@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.npmjs.org/@smithy/querystring-builder/-/querystring-builder-2.0.7.tgz#576d0a9fa5a2ae4305cbc38bb6facbcf4243acdc"
+  integrity sha512-RPHnqt4iH1Kwp1Zbf4gJI88hZiynEZjE5hEWJNBmKqCe1Q6v7HBLtaovTaiuYaMEmPyb2KxOi3lISAdT6uuPqw==
+  dependencies:
+    "@smithy/types" "^2.3.1"
+    "@smithy/util-uri-escape" "^2.0.0"
+    tslib "^2.5.0"
+
 "@smithy/querystring-parser@^1.0.2":
   version "1.0.2"
   resolved "https://registry.npmjs.org/@smithy/querystring-parser/-/querystring-parser-1.0.2.tgz#559d09c46b21e6fbda71e95deda4bcd8a46bdecc"
@@ -8197,6 +8243,13 @@
   dependencies:
     tslib "^2.5.0"
 
+"@smithy/types@^2.3.0", "@smithy/types@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/@smithy/types/-/types-2.3.1.tgz#25e8c353ee7a8611488a2cd41811c5a32a9dbcdc"
+  integrity sha512-cS48e4Yawb6pGakj7DBJUIPFIkqnUWyXTe2ndPRNagD73b6kEJqTc8bhTyfUve0A+sijK256UKE0J1juAfCeDA==
+  dependencies:
+    tslib "^2.5.0"
+
 "@smithy/url-parser@^1.0.1", "@smithy/url-parser@^1.0.2":
   version "1.0.2"
   resolved "https://registry.npmjs.org/@smithy/url-parser/-/url-parser-1.0.2.tgz#fb59be6f2283399443d9e7afe08ebf63b3c266bb"
@@ -13106,9 +13159,9 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001228, can
   integrity sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw==
 
 caniuse-lite@^1.0.30001314:
-  version "1.0.30001524"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001524.tgz#1e14bce4f43c41a7deaeb5ebfe86664fe8dadb80"
-  integrity sha512-Jj917pJtYg9HSJBF95HVX3Cdr89JUyLT4IZ8SvM5aDRni95swKgYi3TgYLH5hnGfPE/U1dg6IfZ50UsIlLkwSA==
+  version "1.0.30001534"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz#f24a9b2a6d39630bac5c132b5dff89b39a12e7dd"
+  integrity sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==
 
 caniuse-lite@^1.0.30001517:
   version "1.0.30001521"
@@ -26230,6 +26283,13 @@ qrcode@1.5.0:
     pngjs "^5.0.0"
     yargs "^15.3.1"
 
+qs@6.10.4:
+  version "6.10.4"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz#6a3003755add91c0ec9eacdc5f878b034e73f9e7"
+  integrity sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@6.11.0:
   version "6.11.0"
   resolved "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
@@ -26244,13 +26304,6 @@ qs@^6.6.0:
   dependencies:
     side-channel "^1.0.4"
 
-qs@~6.10.3:
-  version "6.10.5"
-  resolved "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz#974715920a80ff6a262264acd2c7e6c2a53282b4"
-  integrity sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==
-  dependencies:
-    side-channel "^1.0.4"
-
 query-string@^7.1.0:
   version "7.1.3"
   resolved "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328"
@@ -28015,7 +28068,7 @@ semver@7.3.8, semver@7.5.4, semver@7.x, semver@^7.0.0, semver@^7.1.1, semver@^7.
 
 semver@7.5.3:
   version "7.5.3"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
   integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
   dependencies:
     lru-cache "^6.0.0"