diff --git a/package-lock.json b/package-lock.json
index 051c0eb2b..abb0d757c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ebury/chameleon-components",
-      "version": "2.0.0",
+      "version": "2.0.1",
       "license": "MIT",
       "dependencies": {
         "@vue/compat": "3.2.37",
@@ -25,19 +25,19 @@
         "@babel/eslint-parser": "7.18.9",
         "@fullhuman/postcss-purgecss": "4.0.3",
         "@sinonjs/fake-timers": "9.1.2",
-        "@storybook/addon-a11y": "6.5.9",
-        "@storybook/addon-actions": "6.5.9",
+        "@storybook/addon-a11y": "6.5.10",
+        "@storybook/addon-actions": "6.5.10",
         "@storybook/addon-cssresources": "6.2.9",
-        "@storybook/addon-essentials": "6.5.9",
-        "@storybook/addon-links": "6.5.9",
+        "@storybook/addon-essentials": "6.5.10",
+        "@storybook/addon-links": "6.5.10",
         "@storybook/addon-postcss": "2.0.0",
-        "@storybook/addon-viewport": "6.5.9",
-        "@storybook/addons": "6.5.9",
-        "@storybook/builder-webpack5": "6.5.9",
-        "@storybook/manager-webpack5": "6.5.9",
-        "@storybook/source-loader": "6.5.9",
-        "@storybook/theming": "6.5.9",
-        "@storybook/vue3": "6.5.9",
+        "@storybook/addon-viewport": "6.5.10",
+        "@storybook/addons": "6.5.10",
+        "@storybook/builder-webpack5": "6.5.10",
+        "@storybook/manager-webpack5": "6.5.10",
+        "@storybook/source-loader": "6.5.10",
+        "@storybook/theming": "6.5.10",
+        "@storybook/vue3": "6.5.10",
         "@testing-library/jest-dom": "5.16.5",
         "@vue/cli-plugin-babel": "5.0.8",
         "@vue/cli-plugin-eslint": "5.0.8",
@@ -51,19 +51,19 @@
         "babel-jest": "27.5.1",
         "babel-preset-vue": "2.0.2",
         "color": "4.2.3",
-        "css-tree": "2.1.0",
+        "css-tree": "2.2.0",
         "cypress": "9.7.0",
         "cypress-image-snapshot": "4.0.1",
         "eslint": "8.21.0",
         "eslint-plugin-cypress": "2.12.1",
-        "eslint-plugin-jest": "26.7.0",
+        "eslint-plugin-jest": "26.8.2",
         "eslint-plugin-simple-import-sort": "7.0.0",
         "eslint-plugin-vue": "9.3.0",
         "eslint-plugin-vuejs-accessibility": "1.2.0",
         "intl": "1.2.5",
         "jest": "27.5.1",
         "lint-staged": "13.0.3",
-        "postcss": "8.4.14",
+        "postcss": "8.4.16",
         "postcss-html": "1.4.1",
         "postcss-import": "14.1.0",
         "postcss-mixins": "9.0.3",
@@ -72,9 +72,9 @@
         "purgecss-from-html": "4.0.3",
         "snapshot-diff": "0.9.0",
         "storybook-vue3-router": "2.3.1",
-        "stylelint": "14.9.1",
+        "stylelint": "14.10.0",
         "stylelint-config-recommended-vue": "1.4.0",
-        "stylelint-config-standard": "26.0.0",
+        "stylelint-config-standard": "27.0.0",
         "stylelint-config-standard-scss": "5.0.0",
         "stylelint-webpack-plugin": "3.3.0",
         "svg-sprite-loader": "6.0.11",
@@ -419,9 +419,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz",
-      "integrity": "sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz",
+      "integrity": "sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -695,12 +695,12 @@
       }
     },
     "node_modules/@babel/plugin-proposal-export-default-from": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.18.6.tgz",
-      "integrity": "sha512-oTvzWB16T9cB4j5kX8c8DuUHo/4QtR2P9vnUNKed9xqFP8Jos/IRniz1FiIryn6luDYoltDJSYF7RCpbm2doMg==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.18.10.tgz",
+      "integrity": "sha512-5H2N3R2aQFxkV4PIBUR/i7PUSwgTZjouJKzI8eKswfIjT0PhvzkPn0t0wIS5zn6maQuvtT0t1oHtMUz61LOuow==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.9",
         "@babel/plugin-syntax-export-default-from": "^7.18.6"
       },
       "engines": {
@@ -4448,19 +4448,19 @@
       "dev": true
     },
     "node_modules/@storybook/addon-a11y": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.9.tgz",
-      "integrity": "sha512-jRiuJ2xlN8quVq2lOqpxqyuwAj8xLcgVBPy+Mf220u7AZmmbS/0sONyHKROfEBjJoHQAQYqn2vSAeuQZuTWyVA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.10.tgz",
+      "integrity": "sha512-BnDbLg7YEAX1aEyiB+gDFYMXIbiSFH/M0CdwPCq7T7o8cqULKOHtQkndMja1soMxsqHAVH8AGvVVZ8VlaxaJ3Q==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/theming": "6.5.9",
+        "@storybook/theming": "6.5.10",
         "axe-core": "^4.2.0",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
@@ -4488,18 +4488,18 @@
       }
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.9.tgz",
-      "integrity": "sha512-wDYm3M1bN+zcYZV3Q24M03b/P8DDpvj1oSoY6VLlxDAi56h8qZB/voeIS2I6vWXOB79C5tbwljYNQO0GsufS0g==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.10.tgz",
+      "integrity": "sha512-vpCnEu81fmtYzOf0QsRYoDuf9wXgVVl2VysE1dWRebRhIUDU0JurrthTnw322e38D4FzaoNGqZE7wnBYBohzZA==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/theming": "6.5.9",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "fast-deep-equal": "^3.1.3",
         "global": "^4.4.0",
@@ -4531,18 +4531,18 @@
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.9.tgz",
-      "integrity": "sha512-9k+GiY5aiANLOct34ar29jqgdi5ZpCqpZ86zPH0GsEC6ifH6nzP4trLU0vFUe260XDCvB4g8YaI7JZKPhozERg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.10.tgz",
+      "integrity": "sha512-5uzQda3dh891h7BL8e9Ymk7BI+QgkkzDJXuA4mHjOXfIiD3S3efhJI8amXuBC2ZpIr6zmVit0MqZVyoVve46cQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/theming": "6.5.9",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
         "memoizerific": "^1.11.3",
@@ -4568,20 +4568,20 @@
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.5.9.tgz",
-      "integrity": "sha512-VvjkgK32bGURKyWU2No6Q2B0RQZjLZk8D3neVNCnrWxwrl1G82StegxjRPn/UZm9+MZVPvTvI46nj1VdgOktnw==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.5.10.tgz",
+      "integrity": "sha512-lC2y3XcolmQAJwFurIyGrynAHPWmfNtTCdu3rQBTVGwyxCoNwdOOeC2jV0BRqX2+CW6OHzJr9frNWXPSaZ8c4w==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-common": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-common": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/store": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/store": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "lodash": "^4.17.21",
         "ts-dedent": "^2.0.0"
@@ -4865,29 +4865,29 @@
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.5.9.tgz",
-      "integrity": "sha512-9lwOZyiOJFUgGd9ADVfcgpels5o0XOXqGMeVLuzT1160nopbZjNjo/3+YLJ0pyHRPpMJ4rmq2+vxRQR6PVRgPg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.5.10.tgz",
+      "integrity": "sha512-1kgjo3f0vL6GN8fTwLL05M/q/kDdzvuqwhxPY/v5hubFb3aQZGr2yk9pRBaLAbs4bez0yG0ASXcwhYnrEZUppg==",
       "dev": true,
       "dependencies": {
         "@babel/plugin-transform-react-jsx": "^7.12.12",
         "@babel/preset-env": "^7.12.11",
         "@jest/transform": "^26.6.2",
         "@mdx-js/react": "^1.6.22",
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/docs-tools": "6.5.9",
+        "@storybook/docs-tools": "6.5.10",
         "@storybook/mdx1-csf": "^0.0.1",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/postinstall": "6.5.9",
-        "@storybook/preview-web": "6.5.9",
-        "@storybook/source-loader": "6.5.9",
-        "@storybook/store": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/postinstall": "6.5.10",
+        "@storybook/preview-web": "6.5.10",
+        "@storybook/source-loader": "6.5.10",
+        "@storybook/store": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "babel-loader": "^8.0.0",
         "core-js": "^3.8.2",
         "fast-deep-equal": "^3.1.3",
@@ -4921,23 +4921,23 @@
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.5.9.tgz",
-      "integrity": "sha512-V9ThjKQsde4A2Es20pLFBsn0MWx2KCJuoTcTsANP4JDcbvEmj8UjbDWbs8jAU+yzJT5r+CI6NoWmQudv12ZOgw==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/addon-actions": "6.5.9",
-        "@storybook/addon-backgrounds": "6.5.9",
-        "@storybook/addon-controls": "6.5.9",
-        "@storybook/addon-docs": "6.5.9",
-        "@storybook/addon-measure": "6.5.9",
-        "@storybook/addon-outline": "6.5.9",
-        "@storybook/addon-toolbars": "6.5.9",
-        "@storybook/addon-viewport": "6.5.9",
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.5.10.tgz",
+      "integrity": "sha512-PT2aiR4vgAyB0pl3HNBUa4/a7NDRxASxAazz7zt9ZDirkipDKfxwdcLeRoJzwSngVDWEhuz5/paN5x4eNp4Hww==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addon-actions": "6.5.10",
+        "@storybook/addon-backgrounds": "6.5.10",
+        "@storybook/addon-controls": "6.5.10",
+        "@storybook/addon-docs": "6.5.10",
+        "@storybook/addon-measure": "6.5.10",
+        "@storybook/addon-outline": "6.5.10",
+        "@storybook/addon-toolbars": "6.5.10",
+        "@storybook/addon-viewport": "6.5.10",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
         "core-js": "^3.8.2",
         "regenerator-runtime": "^0.13.7",
         "ts-dedent": "^2.0.0"
@@ -5004,16 +5004,16 @@
       }
     },
     "node_modules/@storybook/addon-links": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.5.9.tgz",
-      "integrity": "sha512-4BYC7pkxL3NLRnEgTA9jpIkObQKril+XFj1WtmY/lngF90vvK0Kc/TtvTA2/5tSgrHfxEuPevIdxMIyLJ4ejWQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.5.10.tgz",
+      "integrity": "sha512-r3WzYIPz7WjHiaPObC2Tg6bHuZRBb/Kt/X+Eitw+jTqBel7ksvkO36tn81q8Eyj61qIdNQmUWAaX/0aewT0kLA==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/router": "6.5.9",
+        "@storybook/router": "6.5.10",
         "@types/qs": "^6.9.5",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
@@ -5040,16 +5040,16 @@
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-6.5.9.tgz",
-      "integrity": "sha512-0aA22wD0CIEUccsEbWkckCOXOwr4VffofMH1ToVCOeqBoyLOMB0gxFubESeprqM54CWsYh2DN1uujgD6508cwA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-6.5.10.tgz",
+      "integrity": "sha512-ss7L1H5K5hXygDIoVwj+QyVXbve5V67x7CofLiLCgQYuJzfO16+sPGjiTGWMpTb4ijox2uKWnTkpilt5bCjXgw==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
         "core-js": "^3.8.2",
         "global": "^4.4.0"
@@ -5072,16 +5072,16 @@
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-6.5.9.tgz",
-      "integrity": "sha512-oJ1DK3BDJr6aTlZc9axfOxV1oDkZO7hOohgUQDaKO1RZrSpyQsx2ViK2X6p/W7JhFJHKh7rv+nGCaVlLz3YIZA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-6.5.10.tgz",
+      "integrity": "sha512-AjdaeQ+/iBKmGrAqRW4niwMB6AkgGnYmSzVs5Cf6F/Sb4Dp+vzgLNOwLABD9qs8Ri8dvHl5J4QpVwQKUhYZaOQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
@@ -5146,16 +5146,16 @@
       }
     },
     "node_modules/@storybook/addon-toolbars": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.9.tgz",
-      "integrity": "sha512-6JFQNHYVZUwp17p5rppc+iQJ2QOIWPTF+ni1GMMThjc84mzXs2+899Sf1aPFTvrFJTklmT+bPX6x4aUTouVa1w==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.10.tgz",
+      "integrity": "sha512-S0Ljc6Wv+bPbx2e0iTveJ6bBDqjsemu+FZD4qDLsHreoI7DAcqyrF5Def1l8xNohixIVpx8dQpYXRtyzNlXekg==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "regenerator-runtime": "^0.13.7"
       },
@@ -5177,17 +5177,17 @@
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.5.9.tgz",
-      "integrity": "sha512-thKS+iw6M7ueDQQ7M66STZ5rgtJKliAcIX6UCopo0Ffh4RaRYmX6MCjqtvBKk8joyXUvm9SpWQemJD9uBQrjgw==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.5.10.tgz",
+      "integrity": "sha512-RFMd+4kZljyuJjR9OJ2bFXHrSG7VTi5FDZYWEU+4W1sBxzC+JhnVnUP+HJH3gUxEFIRQC5neRzwWRE9RUUoALQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
         "memoizerific": "^1.11.3",
@@ -5212,18 +5212,18 @@
       }
     },
     "node_modules/@storybook/addons": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.9.tgz",
-      "integrity": "sha512-adwdiXg+mntfPocLc1KXjZXyLgGk7Aac699Fwe+OUYPEC5tW347Rm/kFatcE556d42o5czcRiq3ZSIGWnm9ieQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.10.tgz",
+      "integrity": "sha512-VD4tBCQ23PkSeDoxuHcKy0RfhIs3oMYjBacOZx7d0bvOzK9WjPyvE2ysDAh7r/ceqnwmWHAScIpE+I1RU7gl+g==",
       "dev": true,
       "dependencies": {
-        "@storybook/api": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/api": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/router": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/router": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "@types/webpack-env": "^1.16.0",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
@@ -5239,18 +5239,18 @@
       }
     },
     "node_modules/@storybook/api": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.9.tgz",
-      "integrity": "sha512-9ylztnty4Y+ALU/ehW3BML9czjCAFsWvrwuCi6UgcwNjswwjSX3VRLhfD1KT3pl16ho//95LgZ0LnSwROCcPOA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.10.tgz",
+      "integrity": "sha512-AkmgSPNEGdKp4oZA4KQ+RJsacw7GwfvjsVDnCkcXqS9zmSr/RNL0fhpcd60KKkmx/hGKPTDFpK3ZayxDrJ/h4A==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/router": "6.5.9",
+        "@storybook/router": "6.5.10",
         "@storybook/semver": "^7.3.2",
-        "@storybook/theming": "6.5.9",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "fast-deep-equal": "^3.1.3",
         "global": "^4.4.0",
@@ -5272,28 +5272,28 @@
       }
     },
     "node_modules/@storybook/builder-webpack4": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.5.9.tgz",
-      "integrity": "sha512-YOeA4++9uRZ8Hog1wC60yjaxBOiI1FRQNtax7b9E7g+kP8UlSCPCGcv4gls9hFmzbzTOPfQTWnToA9Oa6jzRVw==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.5.10.tgz",
+      "integrity": "sha512-AoKjsCNoQQoZXYwBDxO8s+yVEd5FjBJAaysEuUTHq2fb81jwLrGcEOo6hjw4jqfugZQIzYUEjPazlvubS78zpw==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.12.10",
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/channel-postmessage": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/core-events": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/preview-web": "6.5.9",
-        "@storybook/router": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/channel-postmessage": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/core-events": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/preview-web": "6.5.10",
+        "@storybook/router": "6.5.10",
         "@storybook/semver": "^7.3.2",
-        "@storybook/store": "6.5.9",
-        "@storybook/theming": "6.5.9",
-        "@storybook/ui": "6.5.9",
+        "@storybook/store": "6.5.10",
+        "@storybook/theming": "6.5.10",
+        "@storybook/ui": "6.5.10",
         "@types/node": "^14.0.10 || ^16.0.0",
         "@types/webpack": "^4.41.26",
         "autoprefixer": "^9.8.6",
@@ -5346,9 +5346,9 @@
       "dev": true
     },
     "node_modules/@storybook/builder-webpack4/node_modules/@types/node": {
-      "version": "16.11.43",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.43.tgz",
-      "integrity": "sha512-GqWykok+3uocgfAJM8imbozrqLnPyTrpFlrryURQlw1EesPUCx5XxTiucWDSFF9/NUEXDuD4bnvHm8xfVGWTpQ==",
+      "version": "16.11.48",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.48.tgz",
+      "integrity": "sha512-Z9r9UWlNeNkYnxybm+1fc0jxUNjZqRekTAr1pG0qdXe9apT9yCiqk1c4VvKQJsFpnchU4+fLl25MabSLA2wxIw==",
       "dev": true
     },
     "node_modules/@storybook/builder-webpack4/node_modules/@webassemblyjs/ast": {
@@ -6554,27 +6554,27 @@
       "dev": true
     },
     "node_modules/@storybook/builder-webpack5": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-6.5.9.tgz",
-      "integrity": "sha512-NUVZ4Qci6HWPuoH8U/zQkdBO5soGgu7QYrGC/LWU0tRfmmZxkjr7IUU14ppDpGPYgx3r7jkaQI1J/E1YEmSCWQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-6.5.10.tgz",
+      "integrity": "sha512-Hcsm/TzGRXHndgQCftt+pzI7GQJRqAv8A8ie5b3aFcodhJfK0qzZsQD4Y4ZWxXh1I/xe5t74Kl2qUJ40PX+geA==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.12.10",
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/channel-postmessage": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/core-events": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/preview-web": "6.5.9",
-        "@storybook/router": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/channel-postmessage": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/core-events": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/preview-web": "6.5.10",
+        "@storybook/router": "6.5.10",
         "@storybook/semver": "^7.3.2",
-        "@storybook/store": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/store": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "@types/node": "^14.0.10 || ^16.0.0",
         "babel-loader": "^8.0.0",
         "babel-plugin-named-exports-order": "^0.0.2",
@@ -6771,14 +6771,14 @@
       }
     },
     "node_modules/@storybook/channel-postmessage": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.5.9.tgz",
-      "integrity": "sha512-pX/0R8UW7ezBhCrafRaL20OvMRcmESYvQQCDgjqSzJyHkcG51GOhsd6Ge93eJ6QvRMm9+w0Zs93N2VKjVtz0Qw==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.5.10.tgz",
+      "integrity": "sha512-t9PTA0UzFvYa3IlOfpBOolfrRMPTjUMIeCQ6FNyM0aj5GqLKSvoQzP8NeoRpIrvyf6ljFKKdaMaZ3fiCvh45ag==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
         "qs": "^6.10.0",
@@ -6790,13 +6790,13 @@
       }
     },
     "node_modules/@storybook/channel-websocket": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-6.5.9.tgz",
-      "integrity": "sha512-xtHvSNwuOhkgALwVshKWsoFhDmuvcosdYfxcfFGEiYKXIu46tRS5ZXmpmgEC/0JAVkVoFj5nL8bV7IY5np6oaA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-6.5.10.tgz",
+      "integrity": "sha512-RTXMZbMWCS3xU+4GVIdfnUXsKcwg/WTozy88/5OxaKjGw6KgRedqLAQJKJ6Y5XlnwIcWelirkHj/COwTTXhbPg==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
         "telejson": "^6.0.8"
@@ -6807,9 +6807,9 @@
       }
     },
     "node_modules/@storybook/channels": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.9.tgz",
-      "integrity": "sha512-FvGA35nV38UPXWOl9ERapFTJaxwSTamQ339s2Ev7E9riyRG+GRkgTWzf5kECJgS1PAYKd/7m/RqKJT9BVv6A5g==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.10.tgz",
+      "integrity": "sha512-lo26YZ6kWpHXLhuHJF4P/bICY7jD/rXEZqReKtGOSk1Lv99/xvG6pqmcy3hWLf3v3Dy/8otjRPSR7izFVIIZgQ==",
       "dev": true,
       "dependencies": {
         "core-js": "^3.8.2",
@@ -6822,18 +6822,18 @@
       }
     },
     "node_modules/@storybook/client-api": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.5.9.tgz",
-      "integrity": "sha512-pc7JKJoWLesixUKvG2nV36HukUuYoGRyAgD3PpIV7qSBS4JixqZ3VAHFUtqV1UzfOSQTovLSl4a0rIRnpie6gA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.5.10.tgz",
+      "integrity": "sha512-3wBWZl3NvMFgMovgEh+euiARAT2FXzpvTF4Q1gerGMNNDlrGxHnFvSuy4FHg/irtOGLa4yLz43ULFbYtpKw0Lg==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/channel-postmessage": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/channel-postmessage": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/store": "6.5.9",
+        "@storybook/store": "6.5.10",
         "@types/qs": "^6.9.5",
         "@types/webpack-env": "^1.16.0",
         "core-js": "^3.8.2",
@@ -6858,9 +6858,9 @@
       }
     },
     "node_modules/@storybook/client-logger": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.9.tgz",
-      "integrity": "sha512-DOHL6p0uiDd3gV/Sb2FR+Vh6OiPrrf8BrA06uvXWsMRIIvEEvnparxv9EvPg7FlmUX0T3nq7d3juwjx4F8Wbcg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.10.tgz",
+      "integrity": "sha512-/xA0MHOevXev68hyLMQw8Qo8KczSIdXOxliAgrycMTkDmw5eKeA8TP7B8zP3wGuq/e3MrdD9/8MWhb/IQBNC3w==",
       "dev": true,
       "dependencies": {
         "core-js": "^3.8.2",
@@ -6872,19 +6872,17 @@
       }
     },
     "node_modules/@storybook/components": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.9.tgz",
-      "integrity": "sha512-BhfX980O9zn/1J4FNMeDo8ZvL1m5Ml3T4HRpfYmEBnf8oW5b5BeF6S2K2cwFStZRjWqm1feUcwNpZxCBVMkQnQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.10.tgz",
+      "integrity": "sha512-9OhgB8YQfGwOKjo/N96N5mrtJ6qDVVoEM1zuhea32tJUd2eYf0aSWpryA9VnOM0V1q/8DAoCg5rPBMYWMBU5uw==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "6.5.9",
+        "@storybook/client-logger": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/theming": "6.5.9",
-        "@types/react-syntax-highlighter": "11.0.5",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "memoizerific": "^1.11.3",
         "qs": "^6.10.0",
-        "react-syntax-highlighter": "^15.4.5",
         "regenerator-runtime": "^0.13.7",
         "util-deprecate": "^1.0.2"
       },
@@ -6898,13 +6896,13 @@
       }
     },
     "node_modules/@storybook/core": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.5.9.tgz",
-      "integrity": "sha512-Mt3TTQnjQt2/pa60A+bqDsAOrYpohapdtt4DDZEbS8h0V6u11KyYYh3w7FCySlL+sPEyogj63l5Ec76Jah3l2w==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.5.10.tgz",
+      "integrity": "sha512-K86yYa0tYlMxADlwQTculYvPROokQau09SCVqpsLg3wJCTvYFL4+SIqcYoyBSbFmHOdnYbJgPydjN33MYLiOZQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/core-client": "6.5.9",
-        "@storybook/core-server": "6.5.9"
+        "@storybook/core-client": "6.5.10",
+        "@storybook/core-server": "6.5.10"
       },
       "funding": {
         "type": "opencollective",
@@ -6928,21 +6926,21 @@
       }
     },
     "node_modules/@storybook/core-client": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.5.9.tgz",
-      "integrity": "sha512-LY0QbhShowO+PQx3gao3wdVjpKMH1AaSLmuI95FrcjoMmSXGf96jVLKQp9mJRGeHIsAa93EQBYuCihZycM3Kbg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.5.10.tgz",
+      "integrity": "sha512-THsIjNrOrampTl0Lgfjvfjk1JnktKb4CQLOM80KpQb4cjDqorBjJmErzUkUQ2y3fXvrDmQ/kUREkShET4XEdtA==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/channel-postmessage": "6.5.9",
-        "@storybook/channel-websocket": "6.5.9",
-        "@storybook/client-api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/channel-postmessage": "6.5.10",
+        "@storybook/channel-websocket": "6.5.10",
+        "@storybook/client-api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/preview-web": "6.5.9",
-        "@storybook/store": "6.5.9",
-        "@storybook/ui": "6.5.9",
+        "@storybook/preview-web": "6.5.10",
+        "@storybook/store": "6.5.10",
+        "@storybook/ui": "6.5.10",
         "airbnb-js-shims": "^2.2.1",
         "ansi-to-html": "^0.6.11",
         "core-js": "^3.8.2",
@@ -6970,9 +6968,9 @@
       }
     },
     "node_modules/@storybook/core-common": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.5.9.tgz",
-      "integrity": "sha512-NxOK0mrOCo0TWZ7Npc5HU66EKoRHlrtg18/ZixblLDWQMIqY9XCck8K1kJ8QYpYCHla+aHIsYUArFe2vhlEfZA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.5.10.tgz",
+      "integrity": "sha512-Bx+VKkfWdrAmD8T51Sjq/mMhRaiapBHcpG4cU5bc3DMbg+LF2/yrgqv/cjVu+m5gHAzYCac5D7gqzBgvG7Myww==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.12.10",
@@ -6997,7 +6995,7 @@
         "@babel/preset-react": "^7.12.10",
         "@babel/preset-typescript": "^7.12.7",
         "@babel/register": "^7.12.1",
-        "@storybook/node-logger": "6.5.9",
+        "@storybook/node-logger": "6.5.10",
         "@storybook/semver": "^7.3.2",
         "@types/node": "^14.0.10 || ^16.0.0",
         "@types/pretty-hrtime": "^1.0.0",
@@ -7060,9 +7058,9 @@
       }
     },
     "node_modules/@storybook/core-common/node_modules/@types/node": {
-      "version": "16.11.43",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.43.tgz",
-      "integrity": "sha512-GqWykok+3uocgfAJM8imbozrqLnPyTrpFlrryURQlw1EesPUCx5XxTiucWDSFF9/NUEXDuD4bnvHm8xfVGWTpQ==",
+      "version": "16.11.48",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.48.tgz",
+      "integrity": "sha512-Z9r9UWlNeNkYnxybm+1fc0jxUNjZqRekTAr1pG0qdXe9apT9yCiqk1c4VvKQJsFpnchU4+fLl25MabSLA2wxIw==",
       "dev": true
     },
     "node_modules/@storybook/core-common/node_modules/@webassemblyjs/ast": {
@@ -7775,9 +7773,9 @@
       "dev": true
     },
     "node_modules/@storybook/core-events": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.9.tgz",
-      "integrity": "sha512-tXt7a3ZvJOCeEKpNa/B5rQM5VI7UJLlOh3IHOImWn4HqoBRrZvbourmac+PRZAtXpos0h3c6554Hjapj/Sny5Q==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.10.tgz",
+      "integrity": "sha512-EVb1gO1172klVIAABLOoigFMx0V88uctY0K/qVCO8n6v+wd2+0Ccn63kl+gTxsAC3WZ8XhXh9q2w5ImHklVECw==",
       "dev": true,
       "dependencies": {
         "core-js": "^3.8.2"
@@ -7788,23 +7786,23 @@
       }
     },
     "node_modules/@storybook/core-server": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.5.9.tgz",
-      "integrity": "sha512-YeePGUrd5fQPvGzMhowh124KrcZURFpFXg1VB0Op3ESqCIsInoMZeObci4Gc+binMXC7vcv7aw3EwSLU37qJzQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.5.10.tgz",
+      "integrity": "sha512-jqwpA0ccA8X5ck4esWBid04+cEIVqirdAcqJeNb9IZAD+bRreO4Im8ilzr7jc5AmQ9fkqHs2NByFKh9TITp8NQ==",
       "dev": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.3",
-        "@storybook/builder-webpack4": "6.5.9",
-        "@storybook/core-client": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/builder-webpack4": "6.5.10",
+        "@storybook/core-client": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/csf-tools": "6.5.9",
-        "@storybook/manager-webpack4": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
+        "@storybook/csf-tools": "6.5.10",
+        "@storybook/manager-webpack4": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
         "@storybook/semver": "^7.3.2",
-        "@storybook/store": "6.5.9",
-        "@storybook/telemetry": "6.5.9",
+        "@storybook/store": "6.5.10",
+        "@storybook/telemetry": "6.5.10",
         "@types/node": "^14.0.10 || ^16.0.0",
         "@types/node-fetch": "^2.5.7",
         "@types/pretty-hrtime": "^1.0.0",
@@ -7860,9 +7858,9 @@
       }
     },
     "node_modules/@storybook/core-server/node_modules/@types/node": {
-      "version": "16.11.43",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.43.tgz",
-      "integrity": "sha512-GqWykok+3uocgfAJM8imbozrqLnPyTrpFlrryURQlw1EesPUCx5XxTiucWDSFF9/NUEXDuD4bnvHm8xfVGWTpQ==",
+      "version": "16.11.48",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.48.tgz",
+      "integrity": "sha512-Z9r9UWlNeNkYnxybm+1fc0jxUNjZqRekTAr1pG0qdXe9apT9yCiqk1c4VvKQJsFpnchU4+fLl25MabSLA2wxIw==",
       "dev": true
     },
     "node_modules/@storybook/core-server/node_modules/@webassemblyjs/ast": {
@@ -8571,9 +8569,9 @@
       }
     },
     "node_modules/@storybook/csf-tools": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.5.9.tgz",
-      "integrity": "sha512-RAdhsO2XmEDyWy0qNQvdKMLeIZAuyfD+tYlUwBHRU6DbByDucvwgMOGy5dF97YNJFmyo93EUYJzXjUrJs3U1LQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.5.10.tgz",
+      "integrity": "sha512-H77kZQEisu7+skzeIbNZwmE09OqLjwJTeFhLN1pcjxKVa30LEI3pBHcNBxVKqgxl+Yg3KkB7W/ArLO2N+i2ohw==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.12.10",
@@ -8605,14 +8603,14 @@
       }
     },
     "node_modules/@storybook/docs-tools": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-6.5.9.tgz",
-      "integrity": "sha512-UoTaXLvec8x+q+4oYIk/t8DBju9C3ZTGklqOxDIt+0kS3TFAqEgI3JhKXqQOXgN5zDcvLVSxi8dbVAeSxk2ktA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-6.5.10.tgz",
+      "integrity": "sha512-/bvYgOO+CxMEcHifkjJg0A60OTGOhcjGxnsB1h0gJuxMrqA/7Qwc108bFmPiX0eiD1BovFkZLJV4O6OY7zP5Vw==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.12.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/store": "6.5.9",
+        "@storybook/store": "6.5.10",
         "core-js": "^3.8.2",
         "doctrine": "^3.0.0",
         "lodash": "^4.17.21",
@@ -8624,20 +8622,20 @@
       }
     },
     "node_modules/@storybook/manager-webpack4": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.5.9.tgz",
-      "integrity": "sha512-49LZlHqWc7zj9tQfOOANixPYmLxqWTTZceA6DSXnKd9xDiO2Gl23Y+l/CSPXNZGDB8QFAwpimwqyKJj/NLH45A==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.5.10.tgz",
+      "integrity": "sha512-N/TlNDhuhARuFipR/ZJ/xEVESz23iIbCsZ4VNehLHm8PpiGlQUehk+jMjWmz5XV0bJItwjRclY+CU3GjZKblfQ==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.12.10",
         "@babel/plugin-transform-template-literals": "^7.12.1",
         "@babel/preset-react": "^7.12.10",
-        "@storybook/addons": "6.5.9",
-        "@storybook/core-client": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/theming": "6.5.9",
-        "@storybook/ui": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/core-client": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/theming": "6.5.10",
+        "@storybook/ui": "6.5.10",
         "@types/node": "^14.0.10 || ^16.0.0",
         "@types/webpack": "^4.41.26",
         "babel-loader": "^8.0.0",
@@ -8686,9 +8684,9 @@
       "dev": true
     },
     "node_modules/@storybook/manager-webpack4/node_modules/@types/node": {
-      "version": "16.11.43",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.43.tgz",
-      "integrity": "sha512-GqWykok+3uocgfAJM8imbozrqLnPyTrpFlrryURQlw1EesPUCx5XxTiucWDSFF9/NUEXDuD4bnvHm8xfVGWTpQ==",
+      "version": "16.11.48",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.48.tgz",
+      "integrity": "sha512-Z9r9UWlNeNkYnxybm+1fc0jxUNjZqRekTAr1pG0qdXe9apT9yCiqk1c4VvKQJsFpnchU4+fLl25MabSLA2wxIw==",
       "dev": true
     },
     "node_modules/@storybook/manager-webpack4/node_modules/@webassemblyjs/ast": {
@@ -9870,20 +9868,20 @@
       "dev": true
     },
     "node_modules/@storybook/manager-webpack5": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-webpack5/-/manager-webpack5-6.5.9.tgz",
-      "integrity": "sha512-J1GamphSsaZLNBEhn1awgxzOS8KfvzrHtVlAm2VHwW7j1E1DItROFJhGCgduYYuBiN9eqm+KIYrxcr6cRuoolQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-webpack5/-/manager-webpack5-6.5.10.tgz",
+      "integrity": "sha512-uRo+6e5MiVOtyFVMYIKVqvpDveCjHyzXBfetSYR7rKEZoaDMEnLLiuF7DIH12lzxwmzCJ1gIc4lf5HFiTMNkgw==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.12.10",
         "@babel/plugin-transform-template-literals": "^7.12.1",
         "@babel/preset-react": "^7.12.10",
-        "@storybook/addons": "6.5.9",
-        "@storybook/core-client": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/theming": "6.5.9",
-        "@storybook/ui": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/core-client": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/theming": "6.5.10",
+        "@storybook/ui": "6.5.10",
         "@types/node": "^14.0.10 || ^16.0.0",
         "babel-loader": "^8.0.0",
         "case-sensitive-paths-webpack-plugin": "^2.3.0",
@@ -10170,9 +10168,9 @@
       }
     },
     "node_modules/@storybook/node-logger": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.9.tgz",
-      "integrity": "sha512-nZZNZG2Wtwv6Trxi3FrnIqUmB55xO+X/WQGPT5iKlqNjdRIu/T72mE7addcp4rbuWCQfZUhcDDGpBOwKtBxaGg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.10.tgz",
+      "integrity": "sha512-bYswXIKV7Stru8vYfkjUMNN8UhF7Qg7NRsUvG5Djt5lLIae1XmUIgnH40mU/nW4X4BSfcR9MKxsSsngvn2WmQg==",
       "dev": true,
       "dependencies": {
         "@types/npmlog": "^4.1.2",
@@ -10257,9 +10255,9 @@
       }
     },
     "node_modules/@storybook/postinstall": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.5.9.tgz",
-      "integrity": "sha512-KQBupK+FMRrtSt8IL0MzCZ/w9qbd25Yxxp/+ajfWgZTRgsWgVFOqcDyMhS16eNbBp5qKIBCBDXfEF+/mK8HwQQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.5.10.tgz",
+      "integrity": "sha512-xqUdpnFHYkn8MgtV+QztvIsRWa6jQUk7QT1Mu17Y0S7PbslNGsuskRPHenHhACXBJF+TM86R+4BaAhnVYTmElw==",
       "dev": true,
       "dependencies": {
         "core-js": "^3.8.2"
@@ -10270,17 +10268,17 @@
       }
     },
     "node_modules/@storybook/preview-web": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.5.9.tgz",
-      "integrity": "sha512-4eMrO2HJyZUYyL/j+gUaDvry6iGedshwT5MQqe7J9FaA+Q2pNARQRB1X53f410w7S4sObRmYIAIluWPYdWym9w==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.5.10.tgz",
+      "integrity": "sha512-sTC/o5gkvALOtcNgtApGKGN9EavvSxRHBeBh+5BQjV2qQ8ap+26RsfUizNBECAa2Jrn4osaDYn9HRhJLFL69WA==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/channel-postmessage": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/channel-postmessage": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/store": "6.5.9",
+        "@storybook/store": "6.5.10",
         "ansi-to-html": "^0.6.11",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
@@ -10302,12 +10300,12 @@
       }
     },
     "node_modules/@storybook/router": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.9.tgz",
-      "integrity": "sha512-G2Xp/2r8vU2O34eelE+G5VbEEVFDeHcCURrVJEROh6dq2asFJAPbzslVXSeCqgOTNLSpRDJ2NcN5BckkNqmqJg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.10.tgz",
+      "integrity": "sha512-O+vNW/eEpYFF8eCg5jZjNQ6q2DKQVxqDRPCy9pJdEbvavMDZn6AFYgVK+VJe5F4211WW2yncOu922xObCxXJYg==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "6.5.9",
+        "@storybook/client-logger": "6.5.10",
         "core-js": "^3.8.2",
         "memoizerific": "^1.11.3",
         "qs": "^6.10.0",
@@ -10391,13 +10389,13 @@
       }
     },
     "node_modules/@storybook/source-loader": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.9.tgz",
-      "integrity": "sha512-H03nFKaP6borfWMTTa9igBA+Jm2ph+FoVJImWC/X+LAmLSJYYSXuqSgmiZ/DZvbjxS4k8vccE2HXogne1IvaRA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.10.tgz",
+      "integrity": "sha512-1RxxRumpjs8VUUwES9LId+cuNQnixhZAcwCxd6jaKkTZbjiQCtAhXX6DBTjJGV1u/JnCsqEp5b1wB8j/EioNHw==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
         "core-js": "^3.8.2",
         "estraverse": "^5.2.0",
@@ -10417,14 +10415,14 @@
       }
     },
     "node_modules/@storybook/store": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/store/-/store-6.5.9.tgz",
-      "integrity": "sha512-80pcDTcCwK6wUA63aWOp13urI77jfipIVee9mpVvbNyfrNN8kGv1BS0z/JHDxuV6rC4g7LG1fb+BurR0yki7BA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/store/-/store-6.5.10.tgz",
+      "integrity": "sha512-RswrSYh2IiKkytFPxP9AvP+hekjrvHK2ILvyDk2ZgduCN4n5ivsekOb+N3M2t+dq1eLuW9or5n2T4OWwAwjxxQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
         "core-js": "^3.8.2",
         "fast-deep-equal": "^3.1.3",
@@ -10448,13 +10446,13 @@
       }
     },
     "node_modules/@storybook/telemetry": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-6.5.9.tgz",
-      "integrity": "sha512-JluoHCRhHAr4X0eUNVBSBi1JIBA92404Tu1TPdbN7x6gCZxHXXPTSUTAnspXp/21cTdMhY2x+kfZQ8fmlGK4MQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-6.5.10.tgz",
+      "integrity": "sha512-+M5HILDFS8nDumLxeSeAwi1MTzIuV6UWzV4yB2wcsEXOBTdplcl9oYqFKtlst78oOIdGtpPYxYfivDlqxC2K4g==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-common": "6.5.9",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-common": "6.5.10",
         "chalk": "^4.1.0",
         "core-js": "^3.8.2",
         "detect-package-manager": "^2.0.1",
@@ -10542,12 +10540,12 @@
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.9.tgz",
-      "integrity": "sha512-KM0AMP5jMQPAdaO8tlbFCYqx9uYM/hZXGSVUhznhLYu7bhNAIK7ZVmXxyE/z/khM++8eUHzRoZGiO/cwCkg9Xw==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.10.tgz",
+      "integrity": "sha512-BvTQBBcSEwKKcsVmF+Ol6v0RIQUr+bxP7gb10wtfBd23mZTEFA0C1N5FnZr/dDeiBKG1pvf1UKvoYA731y0BsA==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "6.5.9",
+        "@storybook/client-logger": "6.5.10",
         "core-js": "^3.8.2",
         "memoizerific": "^1.11.3",
         "regenerator-runtime": "^0.13.7"
@@ -10562,20 +10560,20 @@
       }
     },
     "node_modules/@storybook/ui": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.5.9.tgz",
-      "integrity": "sha512-ryuPxJgtbb0gPXKGgGAUC+Z185xGAd1IvQ0jM5fJ0SisHXI8jteG3RaWhntOehi9qCg+64Vv6eH/cj9QYNHt1Q==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
-        "@storybook/router": "6.5.9",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.5.10.tgz",
+      "integrity": "sha512-6iaoaRAiTqB1inTw35vao+5hjcDE0Qa0A3a9ZIeNa6yHvpB1k0lO/N/0PMrRdVvySYpXVD1iry4z4QYdo1rU+w==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
+        "@storybook/router": "6.5.10",
         "@storybook/semver": "^7.3.2",
-        "@storybook/theming": "6.5.9",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "memoizerific": "^1.11.3",
         "qs": "^6.10.0",
@@ -10592,17 +10590,17 @@
       }
     },
     "node_modules/@storybook/vue3": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/vue3/-/vue3-6.5.9.tgz",
-      "integrity": "sha512-e8vD6lLqJ32xb1uD+D3yElKZYqpMYxJGVKWK5bqyEdlEdAwVwbBSI2n1PHaYXzflNSkAUW6z+Eg19wJzOFycVA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/vue3/-/vue3-6.5.10.tgz",
+      "integrity": "sha512-pIPiEeKrBLlJkkruzcLCmz1Mbku9wFEsNMlQaw0gPB/GuhZOf2xcoWxogfC2Yw2raUHZMQ5jO2rXAimtbrzq5g==",
       "dev": true,
       "dependencies": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/core": "6.5.9",
-        "@storybook/core-common": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/core": "6.5.10",
+        "@storybook/core-common": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/docs-tools": "6.5.9",
-        "@storybook/store": "6.5.9",
+        "@storybook/docs-tools": "6.5.10",
+        "@storybook/store": "6.5.10",
         "@types/node": "^14.14.20 || ^16.0.0",
         "@types/webpack-env": "^1.16.0",
         "core-js": "^3.8.2",
@@ -15856,18 +15854,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/clone-regexp": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz",
-      "integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==",
-      "dev": true,
-      "dependencies": {
-        "is-regexp": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -17069,12 +17055,12 @@
       }
     },
     "node_modules/css-tree": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.1.0.tgz",
-      "integrity": "sha512-PcysZRzToBbrpoUrZ9qfblRIRf8zbEAkU0AIpQFtgkFK0vSbzOmBCvdSAx2Zg7Xx5wiYJKUKk0NMP7kxevie/A==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.0.tgz",
+      "integrity": "sha512-7y32czN0VBL8WkevhC/mrHnoHOmQaJ1Wvp8sjRuTz6/n9cjL83jQaUru2MvP7kzjpGVwrSy5CE4XyQObWGIHQQ==",
       "dev": true,
       "dependencies": {
-        "mdn-data": "2.0.27",
+        "mdn-data": "2.0.28",
         "source-map-js": "^1.0.1"
       },
       "engines": {
@@ -19342,9 +19328,9 @@
       "dev": true
     },
     "node_modules/eslint-plugin-jest": {
-      "version": "26.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-26.7.0.tgz",
-      "integrity": "sha512-/YNitdfG3o3cC6juZziAdkk6nfJt01jXVfj4AgaYVLs7bupHzRDL5K+eipdzhDXtQsiqaX1TzfwSuRlEgeln1A==",
+      "version": "26.8.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-26.8.2.tgz",
+      "integrity": "sha512-67oh0FKaku9y48OpLzL3uK9ckrgLb83Sp5gxxTbtOGDw9lq6D8jw/Psj/9CipkbK406I2M7mvx1q+pv/MdbvxA==",
       "dev": true,
       "dependencies": {
         "@typescript-eslint/utils": "^5.10.0"
@@ -19951,18 +19937,6 @@
         "which": "bin/which"
       }
     },
-    "node_modules/execall": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/execall/-/execall-2.0.0.tgz",
-      "integrity": "sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==",
-      "dev": true,
-      "dependencies": {
-        "clone-regexp": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/executable": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
@@ -20517,10 +20491,13 @@
       "dev": true
     },
     "node_modules/fastest-levenshtein": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
-      "dev": true
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.9.1"
+      }
     },
     "node_modules/fastq": {
       "version": "1.13.0",
@@ -23281,15 +23258,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-regexp": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-2.1.0.tgz",
-      "integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/is-set": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
@@ -29240,9 +29208,9 @@
       }
     },
     "node_modules/mdn-data": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.27.tgz",
-      "integrity": "sha512-kwqO0I0jtWr25KcfLm9pia8vLZ8qoAKhWZuZMbneJq3jjBD3gl5nZs8l8Tu3ZBlBAHVQtDur9rdDGyvtfVraHQ==",
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
       "dev": true
     },
     "node_modules/mdurl": {
@@ -31310,9 +31278,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.16",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -33229,22 +33197,6 @@
         "throttle-debounce": "^3.0.1"
       }
     },
-    "node_modules/react-syntax-highlighter": {
-      "version": "15.5.0",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
-      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "highlight.js": "^10.4.1",
-        "lowlight": "^1.17.0",
-        "prismjs": "^1.27.0",
-        "refractor": "^3.6.0"
-      },
-      "peerDependencies": {
-        "react": ">= 0.14.0"
-      }
-    },
     "node_modules/react-textarea-autosize": {
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz",
@@ -35853,22 +35805,20 @@
       }
     },
     "node_modules/stylelint": {
-      "version": "14.9.1",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.9.1.tgz",
-      "integrity": "sha512-RdAkJdPiLqHawCSnu21nE27MjNXaVd4WcOHA4vK5GtIGjScfhNnaOuWR2wWdfKFAvcWQPOYe311iveiVKSmwsA==",
+      "version": "14.10.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.10.0.tgz",
+      "integrity": "sha512-VAmyKrEK+wNFh9R8mNqoxEFzaa4gsHGhcT4xgkQDuOA5cjF6CaNS8loYV7gpi4tIZBPUyXesotPXzJAMN8VLOQ==",
       "dev": true,
       "dependencies": {
-        "@csstools/selector-specificity": "^2.0.1",
+        "@csstools/selector-specificity": "^2.0.2",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.2",
         "cosmiconfig": "^7.0.1",
         "css-functions-list": "^3.1.0",
         "debug": "^4.3.4",
-        "execall": "^2.0.0",
         "fast-glob": "^3.2.11",
-        "fastest-levenshtein": "^1.0.12",
+        "fastest-levenshtein": "^1.0.16",
         "file-entry-cache": "^6.0.1",
-        "get-stdin": "^8.0.0",
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
@@ -35883,7 +35833,7 @@
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
+        "postcss": "^8.4.16",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
@@ -35986,15 +35936,15 @@
       }
     },
     "node_modules/stylelint-config-standard": {
-      "version": "26.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-26.0.0.tgz",
-      "integrity": "sha512-hUuB7LaaqM8abvkOO84wh5oYSkpXgTzHu2Zza6e7mY+aOmpNTjoFBRxSLlzY0uAOMWEFx0OMKzr+reG1BUtcqQ==",
+      "version": "27.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-27.0.0.tgz",
+      "integrity": "sha512-J+wxyODWQCW2kgdhVzj51a4cFcJkglkMQrjPU/1Jo8w2oKSKK5ZRqHvDDWxEmjYWIYbMhhIMS5dOgVpGUMIACw==",
       "dev": true,
       "dependencies": {
-        "stylelint-config-recommended": "^8.0.0"
+        "stylelint-config-recommended": "^9.0.0"
       },
       "peerDependencies": {
-        "stylelint": "^14.9.0"
+        "stylelint": "^14.10.0"
       }
     },
     "node_modules/stylelint-config-standard-scss": {
@@ -36010,6 +35960,27 @@
         "stylelint": "^14.9.0"
       }
     },
+    "node_modules/stylelint-config-standard-scss/node_modules/stylelint-config-standard": {
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-26.0.0.tgz",
+      "integrity": "sha512-hUuB7LaaqM8abvkOO84wh5oYSkpXgTzHu2Zza6e7mY+aOmpNTjoFBRxSLlzY0uAOMWEFx0OMKzr+reG1BUtcqQ==",
+      "dev": true,
+      "dependencies": {
+        "stylelint-config-recommended": "^8.0.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^14.9.0"
+      }
+    },
+    "node_modules/stylelint-config-standard/node_modules/stylelint-config-recommended": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz",
+      "integrity": "sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==",
+      "dev": true,
+      "peerDependencies": {
+        "stylelint": "^14.10.0"
+      }
+    },
     "node_modules/stylelint-scss": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.3.0.tgz",
@@ -36147,18 +36118,6 @@
       "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
       "dev": true
     },
-    "node_modules/stylelint/node_modules/get-stdin": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
-      "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/stylelint/node_modules/is-plain-object": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
@@ -37924,9 +37883,9 @@
       }
     },
     "node_modules/uglify-js": {
-      "version": "3.16.2",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.16.2.tgz",
-      "integrity": "sha512-AaQNokTNgExWrkEYA24BTNMSjyqEXPSfhqoS0AxmHkCJ4U+Dyy5AvbGV/sqxuxficEfGGoX3zWw9R7QpLFfEsg==",
+      "version": "3.16.3",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.16.3.tgz",
+      "integrity": "sha512-uVbFqx9vvLhQg0iBaau9Z75AxWJ8tqM9AV890dIZCLApF4rTcyHwmAvLeEdYRs+BzYWu8Iw81F79ah0EfTXbaw==",
       "dev": true,
       "optional": true,
       "bin": {
@@ -40761,9 +40720,9 @@
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz",
-      "integrity": "sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz",
+      "integrity": "sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==",
       "dev": true
     },
     "@babel/helper-remap-async-to-generator": {
@@ -40950,12 +40909,12 @@
       }
     },
     "@babel/plugin-proposal-export-default-from": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.18.6.tgz",
-      "integrity": "sha512-oTvzWB16T9cB4j5kX8c8DuUHo/4QtR2P9vnUNKed9xqFP8Jos/IRniz1FiIryn6luDYoltDJSYF7RCpbm2doMg==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.18.10.tgz",
+      "integrity": "sha512-5H2N3R2aQFxkV4PIBUR/i7PUSwgTZjouJKzI8eKswfIjT0PhvzkPn0t0wIS5zn6maQuvtT0t1oHtMUz61LOuow==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.9",
         "@babel/plugin-syntax-export-default-from": "^7.18.6"
       }
     },
@@ -43767,19 +43726,19 @@
       "dev": true
     },
     "@storybook/addon-a11y": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.9.tgz",
-      "integrity": "sha512-jRiuJ2xlN8quVq2lOqpxqyuwAj8xLcgVBPy+Mf220u7AZmmbS/0sONyHKROfEBjJoHQAQYqn2vSAeuQZuTWyVA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.10.tgz",
+      "integrity": "sha512-BnDbLg7YEAX1aEyiB+gDFYMXIbiSFH/M0CdwPCq7T7o8cqULKOHtQkndMja1soMxsqHAVH8AGvVVZ8VlaxaJ3Q==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/theming": "6.5.9",
+        "@storybook/theming": "6.5.10",
         "axe-core": "^4.2.0",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
@@ -43791,18 +43750,18 @@
       }
     },
     "@storybook/addon-actions": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.9.tgz",
-      "integrity": "sha512-wDYm3M1bN+zcYZV3Q24M03b/P8DDpvj1oSoY6VLlxDAi56h8qZB/voeIS2I6vWXOB79C5tbwljYNQO0GsufS0g==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.10.tgz",
+      "integrity": "sha512-vpCnEu81fmtYzOf0QsRYoDuf9wXgVVl2VysE1dWRebRhIUDU0JurrthTnw322e38D4FzaoNGqZE7wnBYBohzZA==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/theming": "6.5.9",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "fast-deep-equal": "^3.1.3",
         "global": "^4.4.0",
@@ -43818,18 +43777,18 @@
       }
     },
     "@storybook/addon-backgrounds": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.9.tgz",
-      "integrity": "sha512-9k+GiY5aiANLOct34ar29jqgdi5ZpCqpZ86zPH0GsEC6ifH6nzP4trLU0vFUe260XDCvB4g8YaI7JZKPhozERg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.10.tgz",
+      "integrity": "sha512-5uzQda3dh891h7BL8e9Ymk7BI+QgkkzDJXuA4mHjOXfIiD3S3efhJI8amXuBC2ZpIr6zmVit0MqZVyoVve46cQ==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/theming": "6.5.9",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
         "memoizerific": "^1.11.3",
@@ -43839,20 +43798,20 @@
       }
     },
     "@storybook/addon-controls": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.5.9.tgz",
-      "integrity": "sha512-VvjkgK32bGURKyWU2No6Q2B0RQZjLZk8D3neVNCnrWxwrl1G82StegxjRPn/UZm9+MZVPvTvI46nj1VdgOktnw==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.5.10.tgz",
+      "integrity": "sha512-lC2y3XcolmQAJwFurIyGrynAHPWmfNtTCdu3rQBTVGwyxCoNwdOOeC2jV0BRqX2+CW6OHzJr9frNWXPSaZ8c4w==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-common": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-common": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/store": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/store": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "lodash": "^4.17.21",
         "ts-dedent": "^2.0.0"
@@ -44081,29 +44040,29 @@
       }
     },
     "@storybook/addon-docs": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.5.9.tgz",
-      "integrity": "sha512-9lwOZyiOJFUgGd9ADVfcgpels5o0XOXqGMeVLuzT1160nopbZjNjo/3+YLJ0pyHRPpMJ4rmq2+vxRQR6PVRgPg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.5.10.tgz",
+      "integrity": "sha512-1kgjo3f0vL6GN8fTwLL05M/q/kDdzvuqwhxPY/v5hubFb3aQZGr2yk9pRBaLAbs4bez0yG0ASXcwhYnrEZUppg==",
       "dev": true,
       "requires": {
         "@babel/plugin-transform-react-jsx": "^7.12.12",
         "@babel/preset-env": "^7.12.11",
         "@jest/transform": "^26.6.2",
         "@mdx-js/react": "^1.6.22",
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/docs-tools": "6.5.9",
+        "@storybook/docs-tools": "6.5.10",
         "@storybook/mdx1-csf": "^0.0.1",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/postinstall": "6.5.9",
-        "@storybook/preview-web": "6.5.9",
-        "@storybook/source-loader": "6.5.9",
-        "@storybook/store": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/postinstall": "6.5.10",
+        "@storybook/preview-web": "6.5.10",
+        "@storybook/source-loader": "6.5.10",
+        "@storybook/store": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "babel-loader": "^8.0.0",
         "core-js": "^3.8.2",
         "fast-deep-equal": "^3.1.3",
@@ -44117,39 +44076,39 @@
       }
     },
     "@storybook/addon-essentials": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.5.9.tgz",
-      "integrity": "sha512-V9ThjKQsde4A2Es20pLFBsn0MWx2KCJuoTcTsANP4JDcbvEmj8UjbDWbs8jAU+yzJT5r+CI6NoWmQudv12ZOgw==",
-      "dev": true,
-      "requires": {
-        "@storybook/addon-actions": "6.5.9",
-        "@storybook/addon-backgrounds": "6.5.9",
-        "@storybook/addon-controls": "6.5.9",
-        "@storybook/addon-docs": "6.5.9",
-        "@storybook/addon-measure": "6.5.9",
-        "@storybook/addon-outline": "6.5.9",
-        "@storybook/addon-toolbars": "6.5.9",
-        "@storybook/addon-viewport": "6.5.9",
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.5.10.tgz",
+      "integrity": "sha512-PT2aiR4vgAyB0pl3HNBUa4/a7NDRxASxAazz7zt9ZDirkipDKfxwdcLeRoJzwSngVDWEhuz5/paN5x4eNp4Hww==",
+      "dev": true,
+      "requires": {
+        "@storybook/addon-actions": "6.5.10",
+        "@storybook/addon-backgrounds": "6.5.10",
+        "@storybook/addon-controls": "6.5.10",
+        "@storybook/addon-docs": "6.5.10",
+        "@storybook/addon-measure": "6.5.10",
+        "@storybook/addon-outline": "6.5.10",
+        "@storybook/addon-toolbars": "6.5.10",
+        "@storybook/addon-viewport": "6.5.10",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
         "core-js": "^3.8.2",
         "regenerator-runtime": "^0.13.7",
         "ts-dedent": "^2.0.0"
       }
     },
     "@storybook/addon-links": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.5.9.tgz",
-      "integrity": "sha512-4BYC7pkxL3NLRnEgTA9jpIkObQKril+XFj1WtmY/lngF90vvK0Kc/TtvTA2/5tSgrHfxEuPevIdxMIyLJ4ejWQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.5.10.tgz",
+      "integrity": "sha512-r3WzYIPz7WjHiaPObC2Tg6bHuZRBb/Kt/X+Eitw+jTqBel7ksvkO36tn81q8Eyj61qIdNQmUWAaX/0aewT0kLA==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/router": "6.5.9",
+        "@storybook/router": "6.5.10",
         "@types/qs": "^6.9.5",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
@@ -44160,32 +44119,32 @@
       }
     },
     "@storybook/addon-measure": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-6.5.9.tgz",
-      "integrity": "sha512-0aA22wD0CIEUccsEbWkckCOXOwr4VffofMH1ToVCOeqBoyLOMB0gxFubESeprqM54CWsYh2DN1uujgD6508cwA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-6.5.10.tgz",
+      "integrity": "sha512-ss7L1H5K5hXygDIoVwj+QyVXbve5V67x7CofLiLCgQYuJzfO16+sPGjiTGWMpTb4ijox2uKWnTkpilt5bCjXgw==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
         "core-js": "^3.8.2",
         "global": "^4.4.0"
       }
     },
     "@storybook/addon-outline": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-6.5.9.tgz",
-      "integrity": "sha512-oJ1DK3BDJr6aTlZc9axfOxV1oDkZO7hOohgUQDaKO1RZrSpyQsx2ViK2X6p/W7JhFJHKh7rv+nGCaVlLz3YIZA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-6.5.10.tgz",
+      "integrity": "sha512-AjdaeQ+/iBKmGrAqRW4niwMB6AkgGnYmSzVs5Cf6F/Sb4Dp+vzgLNOwLABD9qs8Ri8dvHl5J4QpVwQKUhYZaOQ==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
@@ -44225,32 +44184,32 @@
       }
     },
     "@storybook/addon-toolbars": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.9.tgz",
-      "integrity": "sha512-6JFQNHYVZUwp17p5rppc+iQJ2QOIWPTF+ni1GMMThjc84mzXs2+899Sf1aPFTvrFJTklmT+bPX6x4aUTouVa1w==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.10.tgz",
+      "integrity": "sha512-S0Ljc6Wv+bPbx2e0iTveJ6bBDqjsemu+FZD4qDLsHreoI7DAcqyrF5Def1l8xNohixIVpx8dQpYXRtyzNlXekg==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "regenerator-runtime": "^0.13.7"
       }
     },
     "@storybook/addon-viewport": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.5.9.tgz",
-      "integrity": "sha512-thKS+iw6M7ueDQQ7M66STZ5rgtJKliAcIX6UCopo0Ffh4RaRYmX6MCjqtvBKk8joyXUvm9SpWQemJD9uBQrjgw==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.5.10.tgz",
+      "integrity": "sha512-RFMd+4kZljyuJjR9OJ2bFXHrSG7VTi5FDZYWEU+4W1sBxzC+JhnVnUP+HJH3gUxEFIRQC5neRzwWRE9RUUoALQ==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
         "memoizerific": "^1.11.3",
@@ -44259,18 +44218,18 @@
       }
     },
     "@storybook/addons": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.9.tgz",
-      "integrity": "sha512-adwdiXg+mntfPocLc1KXjZXyLgGk7Aac699Fwe+OUYPEC5tW347Rm/kFatcE556d42o5czcRiq3ZSIGWnm9ieQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.10.tgz",
+      "integrity": "sha512-VD4tBCQ23PkSeDoxuHcKy0RfhIs3oMYjBacOZx7d0bvOzK9WjPyvE2ysDAh7r/ceqnwmWHAScIpE+I1RU7gl+g==",
       "dev": true,
       "requires": {
-        "@storybook/api": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/api": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/router": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/router": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "@types/webpack-env": "^1.16.0",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
@@ -44278,18 +44237,18 @@
       }
     },
     "@storybook/api": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.9.tgz",
-      "integrity": "sha512-9ylztnty4Y+ALU/ehW3BML9czjCAFsWvrwuCi6UgcwNjswwjSX3VRLhfD1KT3pl16ho//95LgZ0LnSwROCcPOA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.10.tgz",
+      "integrity": "sha512-AkmgSPNEGdKp4oZA4KQ+RJsacw7GwfvjsVDnCkcXqS9zmSr/RNL0fhpcd60KKkmx/hGKPTDFpK3ZayxDrJ/h4A==",
       "dev": true,
       "requires": {
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/router": "6.5.9",
+        "@storybook/router": "6.5.10",
         "@storybook/semver": "^7.3.2",
-        "@storybook/theming": "6.5.9",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "fast-deep-equal": "^3.1.3",
         "global": "^4.4.0",
@@ -44303,28 +44262,28 @@
       }
     },
     "@storybook/builder-webpack4": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.5.9.tgz",
-      "integrity": "sha512-YOeA4++9uRZ8Hog1wC60yjaxBOiI1FRQNtax7b9E7g+kP8UlSCPCGcv4gls9hFmzbzTOPfQTWnToA9Oa6jzRVw==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.5.10.tgz",
+      "integrity": "sha512-AoKjsCNoQQoZXYwBDxO8s+yVEd5FjBJAaysEuUTHq2fb81jwLrGcEOo6hjw4jqfugZQIzYUEjPazlvubS78zpw==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.12.10",
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/channel-postmessage": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/core-events": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/preview-web": "6.5.9",
-        "@storybook/router": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/channel-postmessage": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/core-events": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/preview-web": "6.5.10",
+        "@storybook/router": "6.5.10",
         "@storybook/semver": "^7.3.2",
-        "@storybook/store": "6.5.9",
-        "@storybook/theming": "6.5.9",
-        "@storybook/ui": "6.5.9",
+        "@storybook/store": "6.5.10",
+        "@storybook/theming": "6.5.10",
+        "@storybook/ui": "6.5.10",
         "@types/node": "^14.0.10 || ^16.0.0",
         "@types/webpack": "^4.41.26",
         "autoprefixer": "^9.8.6",
@@ -44364,9 +44323,9 @@
           "dev": true
         },
         "@types/node": {
-          "version": "16.11.43",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.43.tgz",
-          "integrity": "sha512-GqWykok+3uocgfAJM8imbozrqLnPyTrpFlrryURQlw1EesPUCx5XxTiucWDSFF9/NUEXDuD4bnvHm8xfVGWTpQ==",
+          "version": "16.11.48",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.48.tgz",
+          "integrity": "sha512-Z9r9UWlNeNkYnxybm+1fc0jxUNjZqRekTAr1pG0qdXe9apT9yCiqk1c4VvKQJsFpnchU4+fLl25MabSLA2wxIw==",
           "dev": true
         },
         "@webassemblyjs/ast": {
@@ -45338,27 +45297,27 @@
       }
     },
     "@storybook/builder-webpack5": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-6.5.9.tgz",
-      "integrity": "sha512-NUVZ4Qci6HWPuoH8U/zQkdBO5soGgu7QYrGC/LWU0tRfmmZxkjr7IUU14ppDpGPYgx3r7jkaQI1J/E1YEmSCWQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-6.5.10.tgz",
+      "integrity": "sha512-Hcsm/TzGRXHndgQCftt+pzI7GQJRqAv8A8ie5b3aFcodhJfK0qzZsQD4Y4ZWxXh1I/xe5t74Kl2qUJ40PX+geA==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.12.10",
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/channel-postmessage": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/core-events": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/preview-web": "6.5.9",
-        "@storybook/router": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/channel-postmessage": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/core-events": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/preview-web": "6.5.10",
+        "@storybook/router": "6.5.10",
         "@storybook/semver": "^7.3.2",
-        "@storybook/store": "6.5.9",
-        "@storybook/theming": "6.5.9",
+        "@storybook/store": "6.5.10",
+        "@storybook/theming": "6.5.10",
         "@types/node": "^14.0.10 || ^16.0.0",
         "babel-loader": "^8.0.0",
         "babel-plugin-named-exports-order": "^0.0.2",
@@ -45481,14 +45440,14 @@
       }
     },
     "@storybook/channel-postmessage": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.5.9.tgz",
-      "integrity": "sha512-pX/0R8UW7ezBhCrafRaL20OvMRcmESYvQQCDgjqSzJyHkcG51GOhsd6Ge93eJ6QvRMm9+w0Zs93N2VKjVtz0Qw==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.5.10.tgz",
+      "integrity": "sha512-t9PTA0UzFvYa3IlOfpBOolfrRMPTjUMIeCQ6FNyM0aj5GqLKSvoQzP8NeoRpIrvyf6ljFKKdaMaZ3fiCvh45ag==",
       "dev": true,
       "requires": {
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
         "qs": "^6.10.0",
@@ -45496,22 +45455,22 @@
       }
     },
     "@storybook/channel-websocket": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-6.5.9.tgz",
-      "integrity": "sha512-xtHvSNwuOhkgALwVshKWsoFhDmuvcosdYfxcfFGEiYKXIu46tRS5ZXmpmgEC/0JAVkVoFj5nL8bV7IY5np6oaA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-6.5.10.tgz",
+      "integrity": "sha512-RTXMZbMWCS3xU+4GVIdfnUXsKcwg/WTozy88/5OxaKjGw6KgRedqLAQJKJ6Y5XlnwIcWelirkHj/COwTTXhbPg==",
       "dev": true,
       "requires": {
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
         "telejson": "^6.0.8"
       }
     },
     "@storybook/channels": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.9.tgz",
-      "integrity": "sha512-FvGA35nV38UPXWOl9ERapFTJaxwSTamQ339s2Ev7E9riyRG+GRkgTWzf5kECJgS1PAYKd/7m/RqKJT9BVv6A5g==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.10.tgz",
+      "integrity": "sha512-lo26YZ6kWpHXLhuHJF4P/bICY7jD/rXEZqReKtGOSk1Lv99/xvG6pqmcy3hWLf3v3Dy/8otjRPSR7izFVIIZgQ==",
       "dev": true,
       "requires": {
         "core-js": "^3.8.2",
@@ -45520,18 +45479,18 @@
       }
     },
     "@storybook/client-api": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.5.9.tgz",
-      "integrity": "sha512-pc7JKJoWLesixUKvG2nV36HukUuYoGRyAgD3PpIV7qSBS4JixqZ3VAHFUtqV1UzfOSQTovLSl4a0rIRnpie6gA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.5.10.tgz",
+      "integrity": "sha512-3wBWZl3NvMFgMovgEh+euiARAT2FXzpvTF4Q1gerGMNNDlrGxHnFvSuy4FHg/irtOGLa4yLz43ULFbYtpKw0Lg==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/channel-postmessage": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/channel-postmessage": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/store": "6.5.9",
+        "@storybook/store": "6.5.10",
         "@types/qs": "^6.9.5",
         "@types/webpack-env": "^1.16.0",
         "core-js": "^3.8.2",
@@ -45548,9 +45507,9 @@
       }
     },
     "@storybook/client-logger": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.9.tgz",
-      "integrity": "sha512-DOHL6p0uiDd3gV/Sb2FR+Vh6OiPrrf8BrA06uvXWsMRIIvEEvnparxv9EvPg7FlmUX0T3nq7d3juwjx4F8Wbcg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.10.tgz",
+      "integrity": "sha512-/xA0MHOevXev68hyLMQw8Qo8KczSIdXOxliAgrycMTkDmw5eKeA8TP7B8zP3wGuq/e3MrdD9/8MWhb/IQBNC3w==",
       "dev": true,
       "requires": {
         "core-js": "^3.8.2",
@@ -45558,49 +45517,47 @@
       }
     },
     "@storybook/components": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.9.tgz",
-      "integrity": "sha512-BhfX980O9zn/1J4FNMeDo8ZvL1m5Ml3T4HRpfYmEBnf8oW5b5BeF6S2K2cwFStZRjWqm1feUcwNpZxCBVMkQnQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.10.tgz",
+      "integrity": "sha512-9OhgB8YQfGwOKjo/N96N5mrtJ6qDVVoEM1zuhea32tJUd2eYf0aSWpryA9VnOM0V1q/8DAoCg5rPBMYWMBU5uw==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "6.5.9",
+        "@storybook/client-logger": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/theming": "6.5.9",
-        "@types/react-syntax-highlighter": "11.0.5",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "memoizerific": "^1.11.3",
         "qs": "^6.10.0",
-        "react-syntax-highlighter": "^15.4.5",
         "regenerator-runtime": "^0.13.7",
         "util-deprecate": "^1.0.2"
       }
     },
     "@storybook/core": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.5.9.tgz",
-      "integrity": "sha512-Mt3TTQnjQt2/pa60A+bqDsAOrYpohapdtt4DDZEbS8h0V6u11KyYYh3w7FCySlL+sPEyogj63l5Ec76Jah3l2w==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.5.10.tgz",
+      "integrity": "sha512-K86yYa0tYlMxADlwQTculYvPROokQau09SCVqpsLg3wJCTvYFL4+SIqcYoyBSbFmHOdnYbJgPydjN33MYLiOZQ==",
       "dev": true,
       "requires": {
-        "@storybook/core-client": "6.5.9",
-        "@storybook/core-server": "6.5.9"
+        "@storybook/core-client": "6.5.10",
+        "@storybook/core-server": "6.5.10"
       }
     },
     "@storybook/core-client": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.5.9.tgz",
-      "integrity": "sha512-LY0QbhShowO+PQx3gao3wdVjpKMH1AaSLmuI95FrcjoMmSXGf96jVLKQp9mJRGeHIsAa93EQBYuCihZycM3Kbg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.5.10.tgz",
+      "integrity": "sha512-THsIjNrOrampTl0Lgfjvfjk1JnktKb4CQLOM80KpQb4cjDqorBjJmErzUkUQ2y3fXvrDmQ/kUREkShET4XEdtA==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/channel-postmessage": "6.5.9",
-        "@storybook/channel-websocket": "6.5.9",
-        "@storybook/client-api": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/channel-postmessage": "6.5.10",
+        "@storybook/channel-websocket": "6.5.10",
+        "@storybook/client-api": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/preview-web": "6.5.9",
-        "@storybook/store": "6.5.9",
-        "@storybook/ui": "6.5.9",
+        "@storybook/preview-web": "6.5.10",
+        "@storybook/store": "6.5.10",
+        "@storybook/ui": "6.5.10",
         "airbnb-js-shims": "^2.2.1",
         "ansi-to-html": "^0.6.11",
         "core-js": "^3.8.2",
@@ -45614,9 +45571,9 @@
       }
     },
     "@storybook/core-common": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.5.9.tgz",
-      "integrity": "sha512-NxOK0mrOCo0TWZ7Npc5HU66EKoRHlrtg18/ZixblLDWQMIqY9XCck8K1kJ8QYpYCHla+aHIsYUArFe2vhlEfZA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.5.10.tgz",
+      "integrity": "sha512-Bx+VKkfWdrAmD8T51Sjq/mMhRaiapBHcpG4cU5bc3DMbg+LF2/yrgqv/cjVu+m5gHAzYCac5D7gqzBgvG7Myww==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.12.10",
@@ -45641,7 +45598,7 @@
         "@babel/preset-react": "^7.12.10",
         "@babel/preset-typescript": "^7.12.7",
         "@babel/register": "^7.12.1",
-        "@storybook/node-logger": "6.5.9",
+        "@storybook/node-logger": "6.5.10",
         "@storybook/semver": "^7.3.2",
         "@types/node": "^14.0.10 || ^16.0.0",
         "@types/pretty-hrtime": "^1.0.0",
@@ -45688,9 +45645,9 @@
           }
         },
         "@types/node": {
-          "version": "16.11.43",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.43.tgz",
-          "integrity": "sha512-GqWykok+3uocgfAJM8imbozrqLnPyTrpFlrryURQlw1EesPUCx5XxTiucWDSFF9/NUEXDuD4bnvHm8xfVGWTpQ==",
+          "version": "16.11.48",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.48.tgz",
+          "integrity": "sha512-Z9r9UWlNeNkYnxybm+1fc0jxUNjZqRekTAr1pG0qdXe9apT9yCiqk1c4VvKQJsFpnchU4+fLl25MabSLA2wxIw==",
           "dev": true
         },
         "@webassemblyjs/ast": {
@@ -46294,32 +46251,32 @@
       }
     },
     "@storybook/core-events": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.9.tgz",
-      "integrity": "sha512-tXt7a3ZvJOCeEKpNa/B5rQM5VI7UJLlOh3IHOImWn4HqoBRrZvbourmac+PRZAtXpos0h3c6554Hjapj/Sny5Q==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.10.tgz",
+      "integrity": "sha512-EVb1gO1172klVIAABLOoigFMx0V88uctY0K/qVCO8n6v+wd2+0Ccn63kl+gTxsAC3WZ8XhXh9q2w5ImHklVECw==",
       "dev": true,
       "requires": {
         "core-js": "^3.8.2"
       }
     },
     "@storybook/core-server": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.5.9.tgz",
-      "integrity": "sha512-YeePGUrd5fQPvGzMhowh124KrcZURFpFXg1VB0Op3ESqCIsInoMZeObci4Gc+binMXC7vcv7aw3EwSLU37qJzQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.5.10.tgz",
+      "integrity": "sha512-jqwpA0ccA8X5ck4esWBid04+cEIVqirdAcqJeNb9IZAD+bRreO4Im8ilzr7jc5AmQ9fkqHs2NByFKh9TITp8NQ==",
       "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.3",
-        "@storybook/builder-webpack4": "6.5.9",
-        "@storybook/core-client": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/builder-webpack4": "6.5.10",
+        "@storybook/core-client": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/csf-tools": "6.5.9",
-        "@storybook/manager-webpack4": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
+        "@storybook/csf-tools": "6.5.10",
+        "@storybook/manager-webpack4": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
         "@storybook/semver": "^7.3.2",
-        "@storybook/store": "6.5.9",
-        "@storybook/telemetry": "6.5.9",
+        "@storybook/store": "6.5.10",
+        "@storybook/telemetry": "6.5.10",
         "@types/node": "^14.0.10 || ^16.0.0",
         "@types/node-fetch": "^2.5.7",
         "@types/pretty-hrtime": "^1.0.0",
@@ -46356,9 +46313,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "16.11.43",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.43.tgz",
-          "integrity": "sha512-GqWykok+3uocgfAJM8imbozrqLnPyTrpFlrryURQlw1EesPUCx5XxTiucWDSFF9/NUEXDuD4bnvHm8xfVGWTpQ==",
+          "version": "16.11.48",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.48.tgz",
+          "integrity": "sha512-Z9r9UWlNeNkYnxybm+1fc0jxUNjZqRekTAr1pG0qdXe9apT9yCiqk1c4VvKQJsFpnchU4+fLl25MabSLA2wxIw==",
           "dev": true
         },
         "@webassemblyjs/ast": {
@@ -46963,9 +46920,9 @@
       }
     },
     "@storybook/csf-tools": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.5.9.tgz",
-      "integrity": "sha512-RAdhsO2XmEDyWy0qNQvdKMLeIZAuyfD+tYlUwBHRU6DbByDucvwgMOGy5dF97YNJFmyo93EUYJzXjUrJs3U1LQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.5.10.tgz",
+      "integrity": "sha512-H77kZQEisu7+skzeIbNZwmE09OqLjwJTeFhLN1pcjxKVa30LEI3pBHcNBxVKqgxl+Yg3KkB7W/ArLO2N+i2ohw==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.12.10",
@@ -46985,14 +46942,14 @@
       }
     },
     "@storybook/docs-tools": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-6.5.9.tgz",
-      "integrity": "sha512-UoTaXLvec8x+q+4oYIk/t8DBju9C3ZTGklqOxDIt+0kS3TFAqEgI3JhKXqQOXgN5zDcvLVSxi8dbVAeSxk2ktA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-6.5.10.tgz",
+      "integrity": "sha512-/bvYgOO+CxMEcHifkjJg0A60OTGOhcjGxnsB1h0gJuxMrqA/7Qwc108bFmPiX0eiD1BovFkZLJV4O6OY7zP5Vw==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.12.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/store": "6.5.9",
+        "@storybook/store": "6.5.10",
         "core-js": "^3.8.2",
         "doctrine": "^3.0.0",
         "lodash": "^4.17.21",
@@ -47000,20 +46957,20 @@
       }
     },
     "@storybook/manager-webpack4": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.5.9.tgz",
-      "integrity": "sha512-49LZlHqWc7zj9tQfOOANixPYmLxqWTTZceA6DSXnKd9xDiO2Gl23Y+l/CSPXNZGDB8QFAwpimwqyKJj/NLH45A==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.5.10.tgz",
+      "integrity": "sha512-N/TlNDhuhARuFipR/ZJ/xEVESz23iIbCsZ4VNehLHm8PpiGlQUehk+jMjWmz5XV0bJItwjRclY+CU3GjZKblfQ==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.12.10",
         "@babel/plugin-transform-template-literals": "^7.12.1",
         "@babel/preset-react": "^7.12.10",
-        "@storybook/addons": "6.5.9",
-        "@storybook/core-client": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/theming": "6.5.9",
-        "@storybook/ui": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/core-client": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/theming": "6.5.10",
+        "@storybook/ui": "6.5.10",
         "@types/node": "^14.0.10 || ^16.0.0",
         "@types/webpack": "^4.41.26",
         "babel-loader": "^8.0.0",
@@ -47049,9 +47006,9 @@
           "dev": true
         },
         "@types/node": {
-          "version": "16.11.43",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.43.tgz",
-          "integrity": "sha512-GqWykok+3uocgfAJM8imbozrqLnPyTrpFlrryURQlw1EesPUCx5XxTiucWDSFF9/NUEXDuD4bnvHm8xfVGWTpQ==",
+          "version": "16.11.48",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.48.tgz",
+          "integrity": "sha512-Z9r9UWlNeNkYnxybm+1fc0jxUNjZqRekTAr1pG0qdXe9apT9yCiqk1c4VvKQJsFpnchU4+fLl25MabSLA2wxIw==",
           "dev": true
         },
         "@webassemblyjs/ast": {
@@ -48003,20 +47960,20 @@
       }
     },
     "@storybook/manager-webpack5": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-webpack5/-/manager-webpack5-6.5.9.tgz",
-      "integrity": "sha512-J1GamphSsaZLNBEhn1awgxzOS8KfvzrHtVlAm2VHwW7j1E1DItROFJhGCgduYYuBiN9eqm+KIYrxcr6cRuoolQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-webpack5/-/manager-webpack5-6.5.10.tgz",
+      "integrity": "sha512-uRo+6e5MiVOtyFVMYIKVqvpDveCjHyzXBfetSYR7rKEZoaDMEnLLiuF7DIH12lzxwmzCJ1gIc4lf5HFiTMNkgw==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.12.10",
         "@babel/plugin-transform-template-literals": "^7.12.1",
         "@babel/preset-react": "^7.12.10",
-        "@storybook/addons": "6.5.9",
-        "@storybook/core-client": "6.5.9",
-        "@storybook/core-common": "6.5.9",
-        "@storybook/node-logger": "6.5.9",
-        "@storybook/theming": "6.5.9",
-        "@storybook/ui": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/core-client": "6.5.10",
+        "@storybook/core-common": "6.5.10",
+        "@storybook/node-logger": "6.5.10",
+        "@storybook/theming": "6.5.10",
+        "@storybook/ui": "6.5.10",
         "@types/node": "^14.0.10 || ^16.0.0",
         "babel-loader": "^8.0.0",
         "case-sensitive-paths-webpack-plugin": "^2.3.0",
@@ -48208,9 +48165,9 @@
       }
     },
     "@storybook/node-logger": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.9.tgz",
-      "integrity": "sha512-nZZNZG2Wtwv6Trxi3FrnIqUmB55xO+X/WQGPT5iKlqNjdRIu/T72mE7addcp4rbuWCQfZUhcDDGpBOwKtBxaGg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.10.tgz",
+      "integrity": "sha512-bYswXIKV7Stru8vYfkjUMNN8UhF7Qg7NRsUvG5Djt5lLIae1XmUIgnH40mU/nW4X4BSfcR9MKxsSsngvn2WmQg==",
       "dev": true,
       "requires": {
         "@types/npmlog": "^4.1.2",
@@ -48272,26 +48229,26 @@
       }
     },
     "@storybook/postinstall": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.5.9.tgz",
-      "integrity": "sha512-KQBupK+FMRrtSt8IL0MzCZ/w9qbd25Yxxp/+ajfWgZTRgsWgVFOqcDyMhS16eNbBp5qKIBCBDXfEF+/mK8HwQQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.5.10.tgz",
+      "integrity": "sha512-xqUdpnFHYkn8MgtV+QztvIsRWa6jQUk7QT1Mu17Y0S7PbslNGsuskRPHenHhACXBJF+TM86R+4BaAhnVYTmElw==",
       "dev": true,
       "requires": {
         "core-js": "^3.8.2"
       }
     },
     "@storybook/preview-web": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.5.9.tgz",
-      "integrity": "sha512-4eMrO2HJyZUYyL/j+gUaDvry6iGedshwT5MQqe7J9FaA+Q2pNARQRB1X53f410w7S4sObRmYIAIluWPYdWym9w==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.5.10.tgz",
+      "integrity": "sha512-sTC/o5gkvALOtcNgtApGKGN9EavvSxRHBeBh+5BQjV2qQ8ap+26RsfUizNBECAa2Jrn4osaDYn9HRhJLFL69WA==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/channel-postmessage": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/channel-postmessage": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/store": "6.5.9",
+        "@storybook/store": "6.5.10",
         "ansi-to-html": "^0.6.11",
         "core-js": "^3.8.2",
         "global": "^4.4.0",
@@ -48305,12 +48262,12 @@
       }
     },
     "@storybook/router": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.9.tgz",
-      "integrity": "sha512-G2Xp/2r8vU2O34eelE+G5VbEEVFDeHcCURrVJEROh6dq2asFJAPbzslVXSeCqgOTNLSpRDJ2NcN5BckkNqmqJg==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.10.tgz",
+      "integrity": "sha512-O+vNW/eEpYFF8eCg5jZjNQ6q2DKQVxqDRPCy9pJdEbvavMDZn6AFYgVK+VJe5F4211WW2yncOu922xObCxXJYg==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "6.5.9",
+        "@storybook/client-logger": "6.5.10",
         "core-js": "^3.8.2",
         "memoizerific": "^1.11.3",
         "qs": "^6.10.0",
@@ -48367,13 +48324,13 @@
       }
     },
     "@storybook/source-loader": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.9.tgz",
-      "integrity": "sha512-H03nFKaP6borfWMTTa9igBA+Jm2ph+FoVJImWC/X+LAmLSJYYSXuqSgmiZ/DZvbjxS4k8vccE2HXogne1IvaRA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.10.tgz",
+      "integrity": "sha512-1RxxRumpjs8VUUwES9LId+cuNQnixhZAcwCxd6jaKkTZbjiQCtAhXX6DBTjJGV1u/JnCsqEp5b1wB8j/EioNHw==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
         "core-js": "^3.8.2",
         "estraverse": "^5.2.0",
@@ -48385,14 +48342,14 @@
       }
     },
     "@storybook/store": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/store/-/store-6.5.9.tgz",
-      "integrity": "sha512-80pcDTcCwK6wUA63aWOp13urI77jfipIVee9mpVvbNyfrNN8kGv1BS0z/JHDxuV6rC4g7LG1fb+BurR0yki7BA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/store/-/store-6.5.10.tgz",
+      "integrity": "sha512-RswrSYh2IiKkytFPxP9AvP+hekjrvHK2ILvyDk2ZgduCN4n5ivsekOb+N3M2t+dq1eLuW9or5n2T4OWwAwjxxQ==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-events": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-events": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
         "core-js": "^3.8.2",
         "fast-deep-equal": "^3.1.3",
@@ -48408,13 +48365,13 @@
       }
     },
     "@storybook/telemetry": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-6.5.9.tgz",
-      "integrity": "sha512-JluoHCRhHAr4X0eUNVBSBi1JIBA92404Tu1TPdbN7x6gCZxHXXPTSUTAnspXp/21cTdMhY2x+kfZQ8fmlGK4MQ==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-6.5.10.tgz",
+      "integrity": "sha512-+M5HILDFS8nDumLxeSeAwi1MTzIuV6UWzV4yB2wcsEXOBTdplcl9oYqFKtlst78oOIdGtpPYxYfivDlqxC2K4g==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/core-common": "6.5.9",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/core-common": "6.5.10",
         "chalk": "^4.1.0",
         "core-js": "^3.8.2",
         "detect-package-manager": "^2.0.1",
@@ -48479,32 +48436,32 @@
       }
     },
     "@storybook/theming": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.9.tgz",
-      "integrity": "sha512-KM0AMP5jMQPAdaO8tlbFCYqx9uYM/hZXGSVUhznhLYu7bhNAIK7ZVmXxyE/z/khM++8eUHzRoZGiO/cwCkg9Xw==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.10.tgz",
+      "integrity": "sha512-BvTQBBcSEwKKcsVmF+Ol6v0RIQUr+bxP7gb10wtfBd23mZTEFA0C1N5FnZr/dDeiBKG1pvf1UKvoYA731y0BsA==",
       "dev": true,
       "requires": {
-        "@storybook/client-logger": "6.5.9",
+        "@storybook/client-logger": "6.5.10",
         "core-js": "^3.8.2",
         "memoizerific": "^1.11.3",
         "regenerator-runtime": "^0.13.7"
       }
     },
     "@storybook/ui": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.5.9.tgz",
-      "integrity": "sha512-ryuPxJgtbb0gPXKGgGAUC+Z185xGAd1IvQ0jM5fJ0SisHXI8jteG3RaWhntOehi9qCg+64Vv6eH/cj9QYNHt1Q==",
-      "dev": true,
-      "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/api": "6.5.9",
-        "@storybook/channels": "6.5.9",
-        "@storybook/client-logger": "6.5.9",
-        "@storybook/components": "6.5.9",
-        "@storybook/core-events": "6.5.9",
-        "@storybook/router": "6.5.9",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.5.10.tgz",
+      "integrity": "sha512-6iaoaRAiTqB1inTw35vao+5hjcDE0Qa0A3a9ZIeNa6yHvpB1k0lO/N/0PMrRdVvySYpXVD1iry4z4QYdo1rU+w==",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "6.5.10",
+        "@storybook/api": "6.5.10",
+        "@storybook/channels": "6.5.10",
+        "@storybook/client-logger": "6.5.10",
+        "@storybook/components": "6.5.10",
+        "@storybook/core-events": "6.5.10",
+        "@storybook/router": "6.5.10",
         "@storybook/semver": "^7.3.2",
-        "@storybook/theming": "6.5.9",
+        "@storybook/theming": "6.5.10",
         "core-js": "^3.8.2",
         "memoizerific": "^1.11.3",
         "qs": "^6.10.0",
@@ -48513,17 +48470,17 @@
       }
     },
     "@storybook/vue3": {
-      "version": "6.5.9",
-      "resolved": "https://registry.npmjs.org/@storybook/vue3/-/vue3-6.5.9.tgz",
-      "integrity": "sha512-e8vD6lLqJ32xb1uD+D3yElKZYqpMYxJGVKWK5bqyEdlEdAwVwbBSI2n1PHaYXzflNSkAUW6z+Eg19wJzOFycVA==",
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@storybook/vue3/-/vue3-6.5.10.tgz",
+      "integrity": "sha512-pIPiEeKrBLlJkkruzcLCmz1Mbku9wFEsNMlQaw0gPB/GuhZOf2xcoWxogfC2Yw2raUHZMQ5jO2rXAimtbrzq5g==",
       "dev": true,
       "requires": {
-        "@storybook/addons": "6.5.9",
-        "@storybook/core": "6.5.9",
-        "@storybook/core-common": "6.5.9",
+        "@storybook/addons": "6.5.10",
+        "@storybook/core": "6.5.10",
+        "@storybook/core-common": "6.5.10",
         "@storybook/csf": "0.0.2--canary.4566f4d.1",
-        "@storybook/docs-tools": "6.5.9",
-        "@storybook/store": "6.5.9",
+        "@storybook/docs-tools": "6.5.10",
+        "@storybook/store": "6.5.10",
         "@types/node": "^14.14.20 || ^16.0.0",
         "@types/webpack-env": "^1.16.0",
         "core-js": "^3.8.2",
@@ -52662,15 +52619,6 @@
         "shallow-clone": "^3.0.0"
       }
     },
-    "clone-regexp": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz",
-      "integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==",
-      "dev": true,
-      "requires": {
-        "is-regexp": "^2.0.0"
-      }
-    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -53632,12 +53580,12 @@
       }
     },
     "css-tree": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.1.0.tgz",
-      "integrity": "sha512-PcysZRzToBbrpoUrZ9qfblRIRf8zbEAkU0AIpQFtgkFK0vSbzOmBCvdSAx2Zg7Xx5wiYJKUKk0NMP7kxevie/A==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.0.tgz",
+      "integrity": "sha512-7y32czN0VBL8WkevhC/mrHnoHOmQaJ1Wvp8sjRuTz6/n9cjL83jQaUru2MvP7kzjpGVwrSy5CE4XyQObWGIHQQ==",
       "dev": true,
       "requires": {
-        "mdn-data": "2.0.27",
+        "mdn-data": "2.0.28",
         "source-map-js": "^1.0.1"
       }
     },
@@ -55522,9 +55470,9 @@
       }
     },
     "eslint-plugin-jest": {
-      "version": "26.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-26.7.0.tgz",
-      "integrity": "sha512-/YNitdfG3o3cC6juZziAdkk6nfJt01jXVfj4AgaYVLs7bupHzRDL5K+eipdzhDXtQsiqaX1TzfwSuRlEgeln1A==",
+      "version": "26.8.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-26.8.2.tgz",
+      "integrity": "sha512-67oh0FKaku9y48OpLzL3uK9ckrgLb83Sp5gxxTbtOGDw9lq6D8jw/Psj/9CipkbK406I2M7mvx1q+pv/MdbvxA==",
       "dev": true,
       "requires": {
         "@typescript-eslint/utils": "^5.10.0"
@@ -55858,15 +55806,6 @@
         }
       }
     },
-    "execall": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/execall/-/execall-2.0.0.tgz",
-      "integrity": "sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==",
-      "dev": true,
-      "requires": {
-        "clone-regexp": "^2.1.0"
-      }
-    },
     "executable": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
@@ -56309,9 +56248,9 @@
       "dev": true
     },
     "fastest-levenshtein": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
       "dev": true
     },
     "fastq": {
@@ -58389,12 +58328,6 @@
         "has-tostringtag": "^1.0.0"
       }
     },
-    "is-regexp": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-2.1.0.tgz",
-      "integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==",
-      "dev": true
-    },
     "is-set": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
@@ -62928,9 +62861,9 @@
       "dev": true
     },
     "mdn-data": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.27.tgz",
-      "integrity": "sha512-kwqO0I0jtWr25KcfLm9pia8vLZ8qoAKhWZuZMbneJq3jjBD3gl5nZs8l8Tu3ZBlBAHVQtDur9rdDGyvtfVraHQ==",
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
       "dev": true
     },
     "mdurl": {
@@ -64575,9 +64508,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.16",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
       "requires": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -65983,19 +65916,6 @@
         "throttle-debounce": "^3.0.1"
       }
     },
-    "react-syntax-highlighter": {
-      "version": "15.5.0",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
-      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "highlight.js": "^10.4.1",
-        "lowlight": "^1.17.0",
-        "prismjs": "^1.27.0",
-        "refractor": "^3.6.0"
-      }
-    },
     "react-textarea-autosize": {
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz",
@@ -68099,22 +68019,20 @@
       }
     },
     "stylelint": {
-      "version": "14.9.1",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.9.1.tgz",
-      "integrity": "sha512-RdAkJdPiLqHawCSnu21nE27MjNXaVd4WcOHA4vK5GtIGjScfhNnaOuWR2wWdfKFAvcWQPOYe311iveiVKSmwsA==",
+      "version": "14.10.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.10.0.tgz",
+      "integrity": "sha512-VAmyKrEK+wNFh9R8mNqoxEFzaa4gsHGhcT4xgkQDuOA5cjF6CaNS8loYV7gpi4tIZBPUyXesotPXzJAMN8VLOQ==",
       "dev": true,
       "requires": {
-        "@csstools/selector-specificity": "^2.0.1",
+        "@csstools/selector-specificity": "^2.0.2",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.2",
         "cosmiconfig": "^7.0.1",
         "css-functions-list": "^3.1.0",
         "debug": "^4.3.4",
-        "execall": "^2.0.0",
         "fast-glob": "^3.2.11",
-        "fastest-levenshtein": "^1.0.12",
+        "fastest-levenshtein": "^1.0.16",
         "file-entry-cache": "^6.0.1",
-        "get-stdin": "^8.0.0",
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
@@ -68129,7 +68047,7 @@
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
+        "postcss": "^8.4.16",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
@@ -68152,12 +68070,6 @@
           "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
           "dev": true
         },
-        "get-stdin": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
-          "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
-          "dev": true
-        },
         "is-plain-object": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
@@ -68222,12 +68134,20 @@
       }
     },
     "stylelint-config-standard": {
-      "version": "26.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-26.0.0.tgz",
-      "integrity": "sha512-hUuB7LaaqM8abvkOO84wh5oYSkpXgTzHu2Zza6e7mY+aOmpNTjoFBRxSLlzY0uAOMWEFx0OMKzr+reG1BUtcqQ==",
+      "version": "27.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-27.0.0.tgz",
+      "integrity": "sha512-J+wxyODWQCW2kgdhVzj51a4cFcJkglkMQrjPU/1Jo8w2oKSKK5ZRqHvDDWxEmjYWIYbMhhIMS5dOgVpGUMIACw==",
       "dev": true,
       "requires": {
-        "stylelint-config-recommended": "^8.0.0"
+        "stylelint-config-recommended": "^9.0.0"
+      },
+      "dependencies": {
+        "stylelint-config-recommended": {
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz",
+          "integrity": "sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==",
+          "dev": true
+        }
       }
     },
     "stylelint-config-standard-scss": {
@@ -68238,6 +68158,17 @@
       "requires": {
         "stylelint-config-recommended-scss": "^7.0.0",
         "stylelint-config-standard": "^26.0.0"
+      },
+      "dependencies": {
+        "stylelint-config-standard": {
+          "version": "26.0.0",
+          "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-26.0.0.tgz",
+          "integrity": "sha512-hUuB7LaaqM8abvkOO84wh5oYSkpXgTzHu2Zza6e7mY+aOmpNTjoFBRxSLlzY0uAOMWEFx0OMKzr+reG1BUtcqQ==",
+          "dev": true,
+          "requires": {
+            "stylelint-config-recommended": "^8.0.0"
+          }
+        }
       }
     },
     "stylelint-scss": {
@@ -69695,9 +69626,9 @@
       }
     },
     "uglify-js": {
-      "version": "3.16.2",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.16.2.tgz",
-      "integrity": "sha512-AaQNokTNgExWrkEYA24BTNMSjyqEXPSfhqoS0AxmHkCJ4U+Dyy5AvbGV/sqxuxficEfGGoX3zWw9R7QpLFfEsg==",
+      "version": "3.16.3",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.16.3.tgz",
+      "integrity": "sha512-uVbFqx9vvLhQg0iBaau9Z75AxWJ8tqM9AV890dIZCLApF4rTcyHwmAvLeEdYRs+BzYWu8Iw81F79ah0EfTXbaw==",
       "dev": true,
       "optional": true
     },
diff --git a/package.json b/package.json
index d19b46e84..8aa611902 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",
@@ -50,19 +50,19 @@
     "@babel/eslint-parser": "7.18.9",
     "@fullhuman/postcss-purgecss": "4.0.3",
     "@sinonjs/fake-timers": "9.1.2",
-    "@storybook/addon-a11y": "6.5.9",
-    "@storybook/addon-actions": "6.5.9",
+    "@storybook/addon-a11y": "6.5.10",
+    "@storybook/addon-actions": "6.5.10",
     "@storybook/addon-cssresources": "6.2.9",
-    "@storybook/addon-essentials": "6.5.9",
-    "@storybook/addon-links": "6.5.9",
+    "@storybook/addon-essentials": "6.5.10",
+    "@storybook/addon-links": "6.5.10",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-viewport": "6.5.9",
-    "@storybook/addons": "6.5.9",
-    "@storybook/builder-webpack5": "6.5.9",
-    "@storybook/manager-webpack5": "6.5.9",
-    "@storybook/source-loader": "6.5.9",
-    "@storybook/theming": "6.5.9",
-    "@storybook/vue3": "6.5.9",
+    "@storybook/addon-viewport": "6.5.10",
+    "@storybook/addons": "6.5.10",
+    "@storybook/builder-webpack5": "6.5.10",
+    "@storybook/manager-webpack5": "6.5.10",
+    "@storybook/source-loader": "6.5.10",
+    "@storybook/theming": "6.5.10",
+    "@storybook/vue3": "6.5.10",
     "@testing-library/jest-dom": "5.16.5",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
@@ -76,19 +76,19 @@
     "babel-jest": "27.5.1",
     "babel-preset-vue": "2.0.2",
     "color": "4.2.3",
-    "css-tree": "2.1.0",
+    "css-tree": "2.2.0",
     "cypress": "9.7.0",
     "cypress-image-snapshot": "4.0.1",
     "eslint": "8.21.0",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-jest": "26.7.0",
+    "eslint-plugin-jest": "26.8.2",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "eslint-plugin-vue": "9.3.0",
     "eslint-plugin-vuejs-accessibility": "1.2.0",
     "intl": "1.2.5",
     "jest": "27.5.1",
     "lint-staged": "13.0.3",
-    "postcss": "8.4.14",
+    "postcss": "8.4.16",
     "postcss-html": "1.4.1",
     "postcss-import": "14.1.0",
     "postcss-mixins": "9.0.3",
@@ -97,9 +97,9 @@
     "purgecss-from-html": "4.0.3",
     "snapshot-diff": "0.9.0",
     "storybook-vue3-router": "2.3.1",
-    "stylelint": "14.9.1",
+    "stylelint": "14.10.0",
     "stylelint-config-recommended-vue": "1.4.0",
-    "stylelint-config-standard": "26.0.0",
+    "stylelint-config-standard": "27.0.0",
     "stylelint-config-standard-scss": "5.0.0",
     "stylelint-webpack-plugin": "3.3.0",
     "svg-sprite-loader": "6.0.11",
diff --git a/src/components/ec-amount-filter-input/__snapshots__/ec-amount-filter-input.spec.js.snap b/src/components/ec-amount-filter-input/__snapshots__/ec-amount-filter-input.spec.js.snap
index 908626e74..3dddedce4 100644
--- a/src/components/ec-amount-filter-input/__snapshots__/ec-amount-filter-input.spec.js.snap
+++ b/src/components/ec-amount-filter-input/__snapshots__/ec-amount-filter-input.spec.js.snap
@@ -98,7 +98,7 @@ exports[`EcAmountFilterInput :props should render with a sensitive class when is
     class="ec-amount-filter-input__inputs-group"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-amount-filter-input__comparison-symbol-selector"
+      class="ec-amount-filter-input__comparison-symbol-selector ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
@@ -241,7 +241,7 @@ exports[`EcAmountFilterInput should render properly 1`] = `
     class="ec-amount-filter-input__inputs-group"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-amount-filter-input__comparison-symbol-selector"
+      class="ec-amount-filter-input__comparison-symbol-selector ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
diff --git a/src/components/ec-currency-filter/__snapshots__/ec-currency-filter.spec.js.snap b/src/components/ec-currency-filter/__snapshots__/ec-currency-filter.spec.js.snap
index 917c90644..60007119a 100644
--- a/src/components/ec-currency-filter/__snapshots__/ec-currency-filter.spec.js.snap
+++ b/src/components/ec-currency-filter/__snapshots__/ec-currency-filter.spec.js.snap
@@ -122,7 +122,7 @@ exports[`EcCurrencyFilter should pass down props required by ec-amount-filter-in
     class="ec-amount-filter-input__inputs-group"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-amount-filter-input__comparison-symbol-selector"
+      class="ec-amount-filter-input__comparison-symbol-selector ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
@@ -562,7 +562,7 @@ exports[`EcCurrencyFilter should preselect given filters from the value prop 2`]
       class="ec-amount-filter-input__inputs-group"
     >
       <div
-        class="ec-dropdown-search ec-dropdown ec-amount-filter-input__comparison-symbol-selector"
+        class="ec-amount-filter-input__comparison-symbol-selector ec-dropdown ec-dropdown-search"
         data-test="ec-dropdown ec-dropdown-search"
       >
         <ec-stub
@@ -1159,7 +1159,7 @@ exports[`EcCurrencyFilter should render correctly 1`] = `
                 class="ec-amount-filter-input__inputs-group"
               >
                 <div
-                  class="ec-dropdown-search ec-dropdown ec-amount-filter-input__comparison-symbol-selector"
+                  class="ec-amount-filter-input__comparison-symbol-selector ec-dropdown ec-dropdown-search"
                   data-test="ec-dropdown ec-dropdown-search"
                 >
                   <ec-stub
@@ -1395,7 +1395,7 @@ exports[`EcCurrencyFilter v-model should clear the amount and comparison symbol
       class="ec-amount-filter-input__inputs-group"
     >
       <div
-        class="ec-dropdown-search ec-dropdown ec-amount-filter-input__comparison-symbol-selector"
+        class="ec-amount-filter-input__comparison-symbol-selector ec-dropdown ec-dropdown-search"
         data-test="ec-dropdown ec-dropdown-search"
       >
         <ec-stub
diff --git a/src/components/ec-currency-input/__snapshots__/ec-currency-input.spec.js.snap b/src/components/ec-currency-input/__snapshots__/ec-currency-input.spec.js.snap
index e269c78ab..542440367 100644
--- a/src/components/ec-currency-input/__snapshots__/ec-currency-input.spec.js.snap
+++ b/src/components/ec-currency-input/__snapshots__/ec-currency-input.spec.js.snap
@@ -73,7 +73,7 @@ exports[`EcCurrencyInput $attrs should use data-test attribute to prefix all dat
     class="ec-currency-input__input-group"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-currency-input__currencies"
+      class="ec-currency-input__currencies ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
@@ -220,7 +220,7 @@ exports[`EcCurrencyInput $attrs should use data-test attribute with multiple val
     class="ec-currency-input__input-group"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-currency-input__currencies"
+      class="ec-currency-input__currencies ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
@@ -551,7 +551,7 @@ exports[`EcCurrencyInput :props should render the searching field with the place
 
 exports[`EcCurrencyInput :props should render without any currencies if the currencies prop is empty 1`] = `
 <div
-  class="ec-dropdown-search ec-dropdown ec-currency-input__currencies"
+  class="ec-currency-input__currencies ec-dropdown ec-dropdown-search"
   data-test="ec-dropdown ec-dropdown-search"
 >
   <ec-stub
@@ -649,7 +649,7 @@ exports[`EcCurrencyInput should render properly 1`] = `
     class="ec-currency-input__input-group"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-currency-input__currencies"
+      class="ec-currency-input__currencies ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
@@ -795,7 +795,7 @@ exports[`EcCurrencyInput should render with a sensitive class when isSensitive p
     class="ec-currency-input__input-group"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-currency-input__currencies"
+      class="ec-currency-input__currencies ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
diff --git a/src/components/ec-dropdown-search/__snapshots__/ec-dropdown-search.spec.js.snap b/src/components/ec-dropdown-search/__snapshots__/ec-dropdown-search.spec.js.snap
index 0ddec0662..92bd98250 100644
--- a/src/components/ec-dropdown-search/__snapshots__/ec-dropdown-search.spec.js.snap
+++ b/src/components/ec-dropdown-search/__snapshots__/ec-dropdown-search.spec.js.snap
@@ -757,6 +757,66 @@ exports[`EcDropdownSearch should render given cta slot with a tooltip 1`] = `
 </div>
 `;
 
+exports[`EcDropdownSearch should render given custom attributes 1`] = `
+<div
+  class="my-custom-class ec-dropdown-search"
+  data-test="my-data-test ec-dropdown-search"
+  id="my-id"
+>
+  <ec-stub
+    autosize="true"
+    class="ec-dropdown-search__trigger"
+    data-test="ec-popover-dropdown-search ec-stub ec-popover-stub"
+    disabled="false"
+    distance="8"
+    placement="bottom-start"
+    popperclass="ec-dropdown-search__popover"
+    shift="false"
+    shown="false"
+  >
+    
+    
+    
+    <div>
+      <ul
+        class="ec-dropdown-search__item-list"
+        data-test="ec-dropdown-search__item-list"
+      >
+        <li
+          class="ec-dropdown-search__search-area"
+          data-test="ec-dropdown-search__search-area"
+        >
+          <svg
+            class="ec-icon ec-dropdown-search__search-icon"
+          >
+            <use
+              xlink:href="#ec-simple-search"
+            />
+          </svg>
+          <input
+            autocomplete="off"
+            class="ec-dropdown-search__search-input"
+            data-test="ec-dropdown-search__search-input"
+            placeholder="Search..."
+          />
+        </li>
+        <!--v-if-->
+        
+        <li
+          class="ec-dropdown-search__no-items"
+          data-test="ec-dropdown-search__no-items"
+          title="No results found"
+        >
+          No results found
+        </li>
+        
+      </ul>
+    </div>
+    
+  </ec-stub>
+</div>
+`;
+
 exports[`EcDropdownSearch should render given default slot 1`] = `
 <div
   class="ec-dropdown-search"
@@ -1153,6 +1213,42 @@ exports[`EcDropdownSearch should render given popover style when it is a functio
 </div>
 `;
 
+exports[`EcDropdownSearch should render sensitive class 1`] = `
+<ul
+  class="ec-dropdown-search__item-list my-sensitive-content-test-class"
+  data-test="ec-dropdown-search__item-list"
+>
+  <li
+    class="ec-dropdown-search__search-area"
+    data-test="ec-dropdown-search__search-area"
+  >
+    <svg
+      class="ec-icon ec-dropdown-search__search-icon"
+    >
+      <use
+        xlink:href="#ec-simple-search"
+      />
+    </svg>
+    <input
+      autocomplete="off"
+      class="ec-dropdown-search__search-input"
+      data-test="ec-dropdown-search__search-input"
+      placeholder="Search..."
+    />
+  </li>
+  <!--v-if-->
+  
+  <li
+    class="ec-dropdown-search__no-items"
+    data-test="ec-dropdown-search__no-items"
+    title="No results found"
+  >
+    No results found
+  </li>
+  
+</ul>
+`;
+
 exports[`EcDropdownSearch should render the search by default 1`] = `
 <li
   class="ec-dropdown-search__search-area"
diff --git a/src/components/ec-dropdown-search/ec-dropdown-search.keyboard-navigation.spec.js b/src/components/ec-dropdown-search/ec-dropdown-search.keyboard-navigation.spec.js
index 1c1f17045..4584b198e 100644
--- a/src/components/ec-dropdown-search/ec-dropdown-search.keyboard-navigation.spec.js
+++ b/src/components/ec-dropdown-search/ec-dropdown-search.keyboard-navigation.spec.js
@@ -18,6 +18,7 @@ describe('EcDropdownSearch - Keyboard navigation', () => {
     document.activeElement.blur();
     // We need to clean the activeElement because of the jsdom bug.
     // jsdom preserves activeElement between tests even if the element has already been removed from the body
+    document.body.innerHTML = '';
   });
 
   describe('when dropdown is closed and the arrow down key is pressed', () => {
@@ -334,7 +335,6 @@ describe('EcDropdownSearch - Keyboard navigation', () => {
 
       expect(document.activeElement).toBe(document.body);
       await openDropdown(wrapper);
-      await waitOnAfterOpenFocus();
 
       expect(document.activeElement).toBe(wrapper.findByDataTest('ec-dropdown-search__search-input').element);
 
@@ -352,14 +352,9 @@ describe('EcDropdownSearch - Keyboard navigation', () => {
 
       expect(document.activeElement).toBe(document.body);
       await openDropdown(wrapper);
-      await waitOnAfterOpenFocus();
 
       expect(document.activeElement).toBe(wrapper.findByDataTest('ec-dropdown-search__search-input').element);
       await wrapper.findByDataTest('ec-dropdown-search').trigger('keydown.down');
-      expect(document.activeElement).toBe(document.body);
-
-      await wrapper.findByDataTest('ec-dropdown-search').trigger('keydown.tab');
-
       expect(document.activeElement).toBe(wrapper.findByDataTest('ec-dropdown-search__search-input').element);
     });
 
@@ -376,7 +371,6 @@ describe('EcDropdownSearch - Keyboard navigation', () => {
 
       expect(document.activeElement).toBe(document.body);
       await openDropdown(wrapper);
-      await waitOnAfterOpenFocus();
 
       expect(document.activeElement).toBe(wrapper.findByDataTest('ec-dropdown-search__search-input').element);
       await wrapper.findByDataTest('ec-dropdown-search').trigger('keydown.tab');
@@ -397,7 +391,6 @@ describe('EcDropdownSearch - Keyboard navigation', () => {
 
       expect(document.activeElement).toBe(document.body);
       await openDropdown(wrapper);
-      await waitOnAfterOpenFocus();
 
       expect(document.activeElement).toBe(wrapper.findByDataTest('ec-dropdown-search__search-input').element);
 
@@ -421,14 +414,9 @@ describe('EcDropdownSearch - Keyboard navigation', () => {
 
       expect(document.activeElement).toBe(document.body);
       await openDropdown(wrapper);
-      await waitOnAfterOpenFocus();
 
       expect(document.activeElement).toBe(wrapper.findByDataTest('ec-dropdown-search__search-input').element);
       await wrapper.findByDataTest('ec-dropdown-search').trigger('keydown.down');
-      expect(document.activeElement).toBe(document.body);
-
-      await wrapper.findByDataTest('ec-dropdown-search').trigger('keydown.tab');
-
       expect(document.activeElement).toBe(wrapper.findByDataTest('ec-dropdown-search__search-input').element);
     });
 
@@ -462,7 +450,6 @@ describe('EcDropdownSearch - Keyboard navigation', () => {
 
       expect(document.activeElement).toBe(document.body);
       await openDropdown(wrapper);
-      await waitOnAfterOpenFocus();
 
       expect(document.activeElement).toBe(wrapper.findByDataTest('ec-dropdown-search__search-input').element);
       await wrapper.findByDataTest('ec-dropdown-search').trigger('keydown.tab');
@@ -662,31 +649,19 @@ function mockElementOffsetTop(wrapper, index, value) {
   jest.spyOn(wrapper.findByDataTest(`ec-dropdown-search__item--${index}`).element, 'offsetTop', 'get').mockReturnValueOnce(value);
 }
 
-// TODO: ONL-XXXX this pollutes global state and never cleans it up
 function mockHtmlElementPosition(options) {
-  Object.defineProperties(global.HTMLElement.prototype, {
-    clientHeight: {
-      configurable: true,
-      get() {
-        if (this.className.includes('ec-dropdown-search__item-list')) {
-          return (options && options.containerClientHeight) || 200;
-        }
-        return (options && options.clientHeight) || 50;
-      },
-    },
-    offsetHeight: {
-      configurable: true,
-      get() { return (options && options.offsetHeight) || 50; },
-    },
-    offsetTop: {
-      configurable: true,
-      get() { return (options && options.offsetTop) || 0; },
-    },
-    scrollHeight: {
-      configurable: true,
-      get() { return (options && options.scrollHeight) || 400; },
-    },
+  jest.spyOn(global.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function mockClientHeight() {
+    if (this.className.includes('ec-dropdown-search__item-list')) {
+      return (options && options.containerClientHeight) || 200;
+    }
+    return (options && options.clientHeight) || 50;
   });
+
+  jest.spyOn(global.HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(() => (options && options.offsetHeight) || 50);
+
+  jest.spyOn(global.HTMLElement.prototype, 'offsetTop', 'get').mockImplementation(() => (options && options.offsetTop) || 0);
+
+  jest.spyOn(global.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => (options && options.scrollHeight) || 400);
 }
 
 async function openDropdown(wrapper) {
@@ -694,6 +669,7 @@ async function openDropdown(wrapper) {
   await wrapper.findByDataTest('ec-dropdown-search').trigger('keydown.enter');
   await wrapper.findComponentByDataTest('ec-popover-stub').vm.$emit('apply-show');
   expect(wrapper.emitted('open').length).toBeGreaterThan(0);
+  await waitOnAfterOpenFocus();
 }
 
 async function waitOnAfterOpenFocus() {
diff --git a/src/components/ec-dropdown-search/ec-dropdown-search.spec.js b/src/components/ec-dropdown-search/ec-dropdown-search.spec.js
index 1bf292622..579a252cd 100644
--- a/src/components/ec-dropdown-search/ec-dropdown-search.spec.js
+++ b/src/components/ec-dropdown-search/ec-dropdown-search.spec.js
@@ -61,6 +61,22 @@ describe('EcDropdownSearch', () => {
     }
   });
 
+  it('should render given custom attributes', () => {
+    const wrapper = mountDropdownSearch({}, {
+      attrs: {
+        'data-test': 'my-data-test',
+        id: 'my-id',
+        class: 'my-custom-class',
+      },
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should render sensitive class', () => {
+    const wrapper = mountDropdownSearch({ isSensitive: true });
+    expect(wrapper.findByDataTest('ec-dropdown-search__item-list').element).toMatchSnapshot();
+  });
+
   it('should render given default slot', () => {
     const wrapper = mountDropdownSearch({}, {
       slots: {
diff --git a/src/components/ec-dropdown-search/ec-dropdown-search.story.js b/src/components/ec-dropdown-search/ec-dropdown-search.story.js
index 0c1a303f2..38e3a2dd1 100644
--- a/src/components/ec-dropdown-search/ec-dropdown-search.story.js
+++ b/src/components/ec-dropdown-search/ec-dropdown-search.story.js
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
 
 import EcIcon from '../ec-icon';
 import EcDropdownSearch from './ec-dropdown-search.vue';
@@ -21,54 +22,52 @@ const items = [
 export const all = ({ paragraphText, ...args }) => ({
   components: { EcDropdownSearch, EcIcon },
   setup() {
+    const selectedItem = ref(null);
+
+    const dropdowns = [
+      {
+        title: 'Basic',
+        style: {},
+        instructions: '',
+      },
+      {
+        title: 'In a container with a dynamic width',
+        style: {
+          width: '300px',
+          overflow: 'auto',
+          resize: 'horizontal',
+          border: '1px solid #ccc',
+          backgroundColor: '#fafafa',
+        },
+        instructions: 'This is a block wrapper around the dropdown search. You can resize it and check how dropdown adapts.',
+        hasParagraph: true,
+      },
+      {
+        title: 'With custom item template',
+        style: {},
+        instructions: '',
+        hasParagraph: true,
+        hasCustomTemplate: true,
+      },
+    ];
+
     return {
+      dropdowns,
+      selectedItem,
       paragraphText,
       args,
+      onChange: action('change'),
     };
   },
-  data() {
-    return {
-      selectedItem: null,
-      list: [
-        {
-          title: 'Basic',
-          style: {},
-          instructions: '',
-        },
-        {
-          title: 'In container with a dynamic width',
-          style: {
-            width: '300px',
-            overflow: 'auto',
-            resize: 'horizontal',
-            border: '1px solid #ccc',
-            backgroundColor: '#fafafa',
-          },
-          instructions: 'This is a block wrapper around the dropdown search. You can resize it and check how dropdown adapts.',
-          hasParagraph: true,
-        },
-        {
-          title: 'With custom item template',
-          style: {},
-          instructions: '',
-          hasParagraph: true,
-          hasCustomTemplate: true,
-        },
-      ],
-    };
-  },
-  methods: {
-    onChange: action('change'),
-  },
   template: `
     <div class="tw-grid-container">
       <div class="tw-grid">
         <div class="tw-col-12" >
           <p v-if="selectedItem">Selected item: {{ selectedItem.text }}</p>
           <p v-else>Selected item: None</p>
-          <div v-for="(dropdownSearch, index) in list" :key="index" class="tw-my-20">
+          <div v-for="(dropdownSearch, index) in dropdowns" :key="index" class="tw-my-20">
             <h3>{{ dropdownSearch.title }}</h3>
-            <div :style="dropdownSearch.style" :id="'dropdown-boundary-' + index">
+            <div :style="dropdownSearch.style">
               <p class="tw-mb-8"><strong>{{ dropdownSearch.instructions }}</strong></p>
               <ec-dropdown-search
                 v-bind="args"
@@ -77,7 +76,7 @@ export const all = ({ paragraphText, ...args }) => ({
                 v-on="{ change: onChange }">
                 <a href="#" @click.prevent>
                   <span>Open</span>
-                  <ec-icon name="simple-arrow-drop-down" :size="16" fill="currentColor" />
+                  <ec-icon name="simple-arrow-drop-down" :size="16" class="tw-fill-current" />
                 </a>
                 <template v-if="dropdownSearch.hasCustomTemplate" #item="{ item, index, isSelected }">
                   <div>{{ index + 1 }}. {{ item.text }}</div>
diff --git a/src/components/ec-dropdown-search/ec-dropdown-search.vue b/src/components/ec-dropdown-search/ec-dropdown-search.vue
index 3b38963b7..dcd3b7adb 100644
--- a/src/components/ec-dropdown-search/ec-dropdown-search.vue
+++ b/src/components/ec-dropdown-search/ec-dropdown-search.vue
@@ -25,20 +25,23 @@
         level: level,
         ...popoverOptions,
       }"
-      ref="popover"
+      ref="popoverRef"
       class="ec-dropdown-search__trigger"
       data-test="ec-popover-dropdown-search"
       @hide="hide"
       @show="show"
       @apply-show="afterShow"
-      @apply-hide="afterHide"
+      @apply-hide="emit('after-close')"
     >
       <slot />
       <template #popper>
         <div :style="getPopoverStyle()">
           <ul
             ref="itemsOverflowContainer"
-            :class="listClasses"
+            :class="{
+              'ec-dropdown-search__item-list': true,
+              [config.sensitiveClass]: isSensitive,
+            }"
             :data-test="`ec-dropdown-search__item-list ${$attrs['list-data-test'] || ''}`.trim()"
             @keydown.tab="onTabKeyDown"
             @keydown.up.prevent="onArrowUpKeyDown"
@@ -46,7 +49,7 @@
             @keydown.esc="closeViaKeyboardNavigation"
           >
             <li
-              ref="searchArea"
+              ref="searchAreaWrapper"
               v-if="isSearchEnabled"
               class="ec-dropdown-search__search-area"
               data-test="ec-dropdown-search__search-area"
@@ -68,11 +71,11 @@
               >
             </li>
             <li
-              ref="ctaArea"
+              ref="ctaAreaWrapper"
               v-if="hasCta()"
               v-ec-tooltip.left="{ content: !!tooltipCta ? tooltipCta : null }"
-              class="ec-dropdown-search__cta-area"
               :class="{
+                'ec-dropdown-search__cta-area': true,
                 'ec-dropdown-search__cta-area--is-focused': isCtaAreaFocused,
               }"
               data-test="ec-dropdown-search__cta-area"
@@ -121,9 +124,9 @@
                   ...item.tooltip,
                 }"
                 :title="item.text"
-                class="ec-dropdown-search__item"
                 :data-test="`ec-dropdown-search__item ec-dropdown-search__item--${index}`"
                 :class="{
+                  'ec-dropdown-search__item': true,
                   'ec-dropdown-search__item--is-selected': isItemSelected(item),
                   'ec-dropdown-search__item--is-disabled': item.disabled,
                 }"
@@ -140,348 +143,366 @@
   </div>
 </template>
 
-<script>
-import { toRaw } from 'vue';
+<script setup>
+import {
+  computed,
+  nextTick,
+  ref,
+  toRaw,
+  useSlots,
+} from 'vue';
 
 import config from '../../config';
-import EcTooltip from '../../directives/ec-tooltip';
+import VEcTooltip from '../../directives/ec-tooltip';
 import { ARROW_DOWN, ARROW_UP } from '../../enums/key-code';
 import { removeDiacritics } from '../../utils/diacritics';
 import EcIcon from '../ec-icon';
 import EcLoading from '../ec-loading';
 import EcPopover from '../ec-popover';
 
-export default {
-  name: 'EcDropdownSearch',
-  compatConfig: {
-    COMPONENT_V_MODEL: false,
+const emit = defineEmits(['update:modelValue', 'change', 'close', 'open', 'after-close', 'after-open']);
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: 'Search...',
   },
-  components: { EcPopover, EcIcon, EcLoading },
-  directives: { EcTooltip },
-  inheritAttrs: false,
-  props: {
-    placeholder: {
-      type: String,
-      default: 'Search...',
-    },
-    level: {
-      type: String,
-      validator(value) {
-        return ['notification', 'modal', 'tooltip', 'level-1', 'level-2', 'level-3'].includes(value);
-      },
-    },
-    isSearchEnabled: {
-      type: Boolean,
-      default: true,
-    },
-    isSensitive: {
-      type: Boolean,
-      default: false,
-    },
-    items: {
-      type: Array,
-      default: () => ([]),
-    },
-    modelValue: {
-      type: [Object, Array],
-      default: null,
-    },
-    popoverOptions: {
-      type: Object,
-      default: null,
-    },
-    popoverStyle: {
-      type: [Object, Function],
-      default: null,
-    },
-    tooltipOptions: {
-      type: Object,
-      default: null,
-    },
-    maxVisibleItems: {
-      type: Number,
-      default: 4,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    noResultsText: {
-      type: String,
-      default: 'No results found',
-    },
-    tooltipCta: {
-      type: String,
-      default: '',
+  level: {
+    type: String,
+    validator(value) {
+      return ['notification', 'modal', 'tooltip', 'level-1', 'level-2', 'level-3'].includes(value);
     },
   },
-  emits: ['update:modelValue', 'change', 'close', 'open', 'after-close', 'after-open'],
-  data() {
-    return {
-      isOpen: false,
-      filterText: '',
-      initialFocusedElement: null,
-      isSearchInputFocused: false,
-      isCtaAreaFocused: false,
-    };
+  isSearchEnabled: {
+    type: Boolean,
+    default: true,
+  },
+  isSensitive: {
+    type: Boolean,
+    default: false,
+  },
+  items: {
+    type: Array,
+    default: () => ([]),
   },
-  computed: {
-    listClasses() {
-      const classes = ['ec-dropdown-search__item-list'];
+  modelValue: {
+    type: [Object, Array],
+    default: null,
+  },
+  popoverOptions: {
+    type: Object,
+    default: null,
+  },
+  popoverStyle: {
+    type: [Object, Function],
+    default: null,
+  },
+  tooltipOptions: {
+    type: Object,
+    default: null,
+  },
+  maxVisibleItems: {
+    type: Number,
+    default: 4,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  noResultsText: {
+    type: String,
+    default: 'No results found',
+  },
+  tooltipCta: {
+    type: String,
+    default: '',
+  },
+});
 
-      if (this.isSensitive) {
-        classes.push(config.sensitiveClass);
-      }
+// popover styles
+function getPopoverStyle() {
+  if (typeof props.popoverStyle === 'function') {
+    return props.popoverStyle();
+  }
 
-      return classes;
-    },
-    filteredItems() {
-      const filterText = removeDiacritics(this.filterText.toLowerCase());
-      if (!filterText) {
-        return this.items;
-      }
+  return props.popoverStyle;
+}
 
-      return this.items.filter((item) => {
-        const itemText = removeDiacritics(item.text.trim().toLowerCase());
-        return itemText.includes(filterText);
-      });
-    },
-    isEmpty() {
-      return this.isSearchEnabled && this.filteredItems.length === 0;
-    },
-    isFirstItemSelectable() {
-      return this.isSearchEnabled || this.hasCta();
-    },
-  },
-  methods: {
-    hide() {
-      if (this.isOpen) {
-        this.isOpen = false;
-        this.$emit('close');
-      }
-    },
-    show() {
-      /* istanbul ignore else */
-      if (!this.isOpen) {
-        // necessary to regain the focus after tab/enter keyboard event if search feature is active
-        this.initialFocusedElement = this.$refs.popoverWrapper.querySelector(':focus');
-        this.blurCta();
-        this.isOpen = true;
-        this.$emit('open');
-      }
-    },
-    getPopoverStyle() {
-      if (typeof this.popoverStyle === 'function') {
-        return this.popoverStyle();
-      }
+// slots
+const slots = useSlots();
 
-      return this.popoverStyle;
-    },
-    setOverflowHeight() {
-      const overflowContainer = this.$refs.itemsOverflowContainer;
-      if (!overflowContainer) {
-        return;
-      }
-      const items = this.$refs.itemElements;
-      if (items && items.length > this.maxVisibleItems) {
-        let finalHeight = 0;
-        if (this.$refs.searchArea) {
-          finalHeight += this.$refs.searchArea.offsetHeight;
-        }
-        if (this.$refs.ctaArea) {
-          finalHeight += this.$refs.ctaArea.offsetHeight;
-        }
-
-        const visibleItems = Array.prototype.slice.call(items, 0, this.maxVisibleItems);
-        finalHeight = visibleItems.reduce((sum, curr) => sum + curr.offsetHeight, finalHeight);
-        overflowContainer.style.maxHeight = `${finalHeight}px`;
-      } else {
-        overflowContainer.style.maxHeight = 'auto';
-      }
-    },
-    focusSearch() {
-      if (this.isOpen && this.isSearchEnabled && this.$refs.searchInput) {
-        this.$refs.searchInput.focus();
-      }
-    },
-    async afterShow() {
-      this.setOverflowHeight();
-      this.updateScroll();
-
-      this.$emit('after-open');
-
-      if (this.isSearchEnabled) {
-        // hack:
-        // we'd like to focus the search input after the dropdown is open, but ...
-        //
-        // Problem:
-        // Popover focus itself after gets open, we need to first wait on popover to gain its focus and then take it.
-        // see https://github.com/Akryum/floating-vue/blob/971beb5a4d1468bc09e09528d07c7af26aa71d0a/packages/floating-vue/src/components/Popper.ts#L776
-        //
-        // according to the nextFrame() function from popover's source, popover waits 2x RAFs before focusing its
-        // root element. So we need to wait 3 RAFs so we can do the same later ...
-        //
-        // A stupid situation requires stupid solutions:
-        await new Promise((resolve) => {
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              requestAnimationFrame(resolve);
-            });
-          });
-        });
+function hasCta() {
+  return !!slots.cta;
+}
 
-        this.focusSearch();
-      }
-    },
-    afterHide() {
-      this.$emit('after-close');
-    },
-    select(item, options) {
-      this.$emit('update:modelValue', item);
-      this.$emit('change', item);
-      if (!options || !options.keyboardNavigation) {
-        this.hide();
-      } else {
-        this.$nextTick(() => {
-          // we need to give Vue chance to update all props and data after emitting change even to parent
-          // e.g. this.modelValue is still the old one by the time the $nextTick is registered.
-          this.updateScroll();
+// toggling
+const isOpen = ref(false);
+const popoverWrapper = ref(null);
+const initialFocusedElement = ref(null);
+
+function hide() {
+  if (isOpen.value) {
+    isOpen.value = false;
+    emit('close');
+  }
+}
+
+function show() {
+  if (!isOpen.value) {
+    initialFocusedElement.value = popoverWrapper.value.querySelector(':focus');
+    blurCta();
+    isOpen.value = true;
+    emit('open');
+  }
+}
+
+async function afterShow() {
+  setOverflowHeight();
+
+  emit('after-open');
+
+  if (props.isSearchEnabled) {
+    await new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(resolve);
         });
-        // selecting an item might affect the position of the popover,
-        // e.g. new item moves the trigger down
-        this.$refs.popover.update();
-      }
-    },
-    isItemSelected(item) {
-      return toRaw(item) === toRaw(this.modelValue);
-    },
-    hasCta() {
-      return !!this.$slots.cta;
-    },
-    onArrowKey(key) {
-      const selectedItemIndex = this.filteredItems.indexOf(toRaw(this.modelValue));
-      let nextItem;
-
-      if (selectedItemIndex >= 0) {
-        if (key === ARROW_DOWN) {
-          nextItem = this.filteredItems.find((item, i) => !item.disabled && i > selectedItemIndex);
-        } else {
-          const reversedItems = this.filteredItems.slice(0, selectedItemIndex).reverse();
-          nextItem = reversedItems.find(item => !item.disabled);
-        }
-      } else {
-        nextItem = this.filteredItems.find(item => !item.disabled);
-      }
+      });
+    });
 
-      if (nextItem) {
-        this.select(nextItem, { keyboardNavigation: true });
-      }
+    focusSearch();
+  }
 
-      this.loseFocus();
-    },
-    blurCta() {
-      if (this.hasCta() && this.isCtaAreaFocused) {
-        this.isCtaAreaFocused = false;
-      }
-    },
-    focusCta() {
-      this.isCtaAreaFocused = true;
-    },
-    canFocusCta() {
-      return this.hasCta() && !this.isCtaAreaFocused;
-    },
-    canFocusSearch() {
-      return this.isSearchEnabled && !this.isSearchInputFocused && !this.isCtaAreaFocused;
-    },
-    onTabKeyDown(event) {
-      if (this.isOpen) {
-        if (this.canFocusSearch()) {
-          event.preventDefault();
-          this.focusSearch();
-          this.blurCta();
-        } else if (this.canFocusCta()) {
-          event.preventDefault();
-          const ctaAreaElementFocusable = this.$refs.ctaArea.querySelector(
-            'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
-          );
-          if (ctaAreaElementFocusable) {
-            ctaAreaElementFocusable.focus();
-            this.focusCta();
-          } else {
-            this.closeViaKeyboardNavigation();
-          }
-        } else {
-          this.closeViaKeyboardNavigation();
-        }
+  updateScroll();
+}
+
+// search
+const filterText = ref('');
+const isSearchInputFocused = ref(false);
+const searchInput = ref(null);
+
+const filteredItems = computed(() => {
+  const sanitisedText = removeDiacritics(filterText.value.toLowerCase());
+  if (!sanitisedText) {
+    return props.items;
+  }
+
+  return props.items.filter((item) => {
+    const itemText = removeDiacritics(item.text.trim().toLowerCase());
+    return itemText.includes(sanitisedText);
+  });
+});
+
+const isEmpty = computed(() => props.isSearchEnabled && filteredItems.value.length === 0);
+
+function canFocusSearch() {
+  return props.isSearchEnabled && !isSearchInputFocused.value && !isCtaAreaFocused.value;
+}
+
+function focusSearch() {
+  if (isOpen.value && props.isSearchEnabled && searchInput.value) {
+    searchInput.value.focus();
+  }
+}
+
+// selecting items
+const popoverRef = ref(null);
+
+function select(item, options) {
+  emit('update:modelValue', item);
+  emit('change', item);
+  if (!options || !options.keyboardNavigation) {
+    hide();
+  } else {
+    nextTick(() => {
+      updateScroll();
+    });
+    // selecting an item might affect the position of the popover,
+    // e.g. new item moves the trigger down
+    popoverRef.value.update();
+  }
+}
+
+function isItemSelected(item) {
+  return toRaw(item) === toRaw(props.modelValue);
+}
+
+const selectedItemIndex = computed(() => filteredItems.value.indexOf(toRaw(props.modelValue)));
+
+// CTA
+const isCtaAreaFocused = ref(false);
+
+function blurCta() {
+  if (hasCta() && isCtaAreaFocused.value) {
+    isCtaAreaFocused.value = false;
+  }
+}
+
+function focusCta() {
+  isCtaAreaFocused.value = true;
+}
+
+function canFocusCta() {
+  return hasCta() && !isCtaAreaFocused.value;
+}
+
+// popover overflow (max-height and scroll position)
+const itemsOverflowContainer = ref(null);
+const itemElements = ref([]);
+const searchAreaWrapper = ref(null);
+const ctaAreaWrapper = ref(null);
+const isFirstItemSelectable = computed(() => props.isSearchEnabled || hasCta());
+
+function updateScroll() {
+  const overflowContainer = itemsOverflowContainer.value;
+  if (!overflowContainer) {
+    return;
+  }
+
+  const containerHeight = overflowContainer.clientHeight;
+  const containerScrollHeight = overflowContainer.scrollHeight;
+
+  if (containerHeight < containerScrollHeight) {
+    if (itemElements.value && itemElements.value.length && selectedItemIndex.value >= 0) {
+      const itemTopEdge = itemElements.value[selectedItemIndex.value].offsetTop;
+      const itemBottomEdge = itemTopEdge + itemElements.value[selectedItemIndex.value].clientHeight;
+      const containerTopEdge = overflowContainer.scrollTop;
+      const containerBottomEdge = containerTopEdge + containerHeight;
+
+      if (itemBottomEdge > containerBottomEdge) {
+        overflowContainer.scrollTop = itemBottomEdge - containerHeight;
+      } else if (isFirstItemSelectable.value && selectedItemIndex.value === 0) {
+        overflowContainer.scrollTop = 0;
+      } else if (itemTopEdge < containerTopEdge) {
+        overflowContainer.scrollTop = itemTopEdge;
       }
-    },
-    onArrowUpKeyDown() {
-      this.onArrowKey(ARROW_UP);
-    },
-    onArrowDownKeyDown() {
-      this.onArrowKey(ARROW_DOWN);
-    },
-    onEnterOrSpaceKeyDown() {
-      if (this.isOpen) {
-        this.closeViaKeyboardNavigation();
+    }
+  }
+}
+
+function setOverflowHeight() {
+  const overflowContainer = itemsOverflowContainer.value;
+  if (!overflowContainer) {
+    return;
+  }
+  const items = itemElements.value;
+  if (items && items.length > props.maxVisibleItems) {
+    let finalHeight = 0;
+    if (searchAreaWrapper.value) {
+      finalHeight += searchAreaWrapper.value.offsetHeight;
+    }
+    if (ctaAreaWrapper.value) {
+      finalHeight += ctaAreaWrapper.value.offsetHeight;
+    }
+
+    const visibleItems = Array.prototype.slice.call(items, 0, props.maxVisibleItems);
+    finalHeight = visibleItems.reduce((sum, curr) => sum + curr.offsetHeight, finalHeight);
+    overflowContainer.style.maxHeight = `${finalHeight}px`;
+  } else {
+    overflowContainer.style.maxHeight = 'auto';
+  }
+}
+
+// keyboard navigation (UP, DOWN arrows)
+function onArrowUpKeyDown() {
+  onArrowKey(ARROW_UP);
+}
+
+function onArrowDownKeyDown() {
+  onArrowKey(ARROW_DOWN);
+}
+
+function onArrowKey(key) {
+  let nextItem;
+
+  if (selectedItemIndex.value >= 0) {
+    if (key === ARROW_DOWN) {
+      nextItem = filteredItems.value.find((item, i) => !item.disabled && i > selectedItemIndex.value);
+    } else {
+      const reversedItems = filteredItems.value.slice(0, selectedItemIndex.value).reverse();
+      nextItem = reversedItems.find(item => !item.disabled);
+    }
+  } else {
+    nextItem = filteredItems.value.find(item => !item.disabled);
+  }
+
+  if (nextItem) {
+    select(nextItem, { keyboardNavigation: true });
+  }
+}
+
+// keyboard navigation (tabbing)
+function onTabKeyDown(event) {
+  if (isOpen.value) {
+    if (canFocusSearch()) {
+      event.preventDefault();
+      focusSearch();
+      blurCta();
+    } else if (canFocusCta()) {
+      event.preventDefault();
+      const ctaAreaElementFocusable = ctaAreaWrapper.value.querySelector(
+        'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
+      );
+      if (ctaAreaElementFocusable) {
+        ctaAreaElementFocusable.focus();
+        focusCta();
       } else {
-        this.show();
-      }
-    },
-    closeViaKeyboardNavigation() {
-      if (this.isOpen) {
-        this.hide();
-        this.loseFocus();
-        if (this.isSearchEnabled) {
-          // if the search is active the focus is lost from the trigger, then it must regain the focus
-          if (this.initialFocusedElement && typeof this.initialFocusedElement.focus === 'function') {
-            this.initialFocusedElement.focus();
-            this.initialFocusedElement = null;
-          }
-        }
-      }
-    },
-    updateScroll() {
-      const containerHeight = this.$refs.itemsOverflowContainer.clientHeight;
-      const containerScrollHeight = this.$refs.itemsOverflowContainer.scrollHeight;
-
-      if (containerHeight < containerScrollHeight) {
-        const selectedItemIndex = this.filteredItems.indexOf(toRaw(this.modelValue));
-        const $elItems = this.$refs.itemElements;
-
-        if ($elItems && $elItems.length && selectedItemIndex >= 0) {
-          const itemTopEdge = $elItems[selectedItemIndex].offsetTop;
-          const itemBottomEdge = itemTopEdge + $elItems[selectedItemIndex].clientHeight;
-          const containerTopEdge = this.$refs.itemsOverflowContainer.scrollTop;
-          const containerBottomEdge = containerTopEdge + containerHeight;
-
-          if (itemBottomEdge > containerBottomEdge) {
-            this.$refs.itemsOverflowContainer.scrollTop = itemBottomEdge - containerHeight;
-          } else if (this.isFirstItemSelectable && selectedItemIndex === 0) {
-            this.$refs.itemsOverflowContainer.scrollTop = 0;
-          } else if (itemTopEdge < containerTopEdge) {
-            this.$refs.itemsOverflowContainer.scrollTop = itemTopEdge;
-          }
-        }
+        closeViaKeyboardNavigation();
       }
-    },
-    loseFocus() {
-      if (this.isSearchInputFocused) {
-        // if the search is active the focus is lost from the trigger, then it must regain the focus
-        this.$refs.searchInput.blur();
-      } else if (this.isCtaAreaFocused) {
-        this.blurCta();
-        const ctaAreaElementFocusable = this.$refs.ctaArea.querySelector(
-          'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
-        );
-        ctaAreaElementFocusable.blur();
+    } else {
+      closeViaKeyboardNavigation();
+    }
+  }
+}
+
+// keyboard navigation (ESC or space bar)
+function onEnterOrSpaceKeyDown() {
+  if (isOpen.value) {
+    closeViaKeyboardNavigation();
+  } else {
+    show();
+  }
+}
+
+function closeViaKeyboardNavigation() {
+  if (isOpen.value) {
+    hide();
+    loseFocus();
+    if (props.isSearchEnabled) {
+      const elementToFocus = initialFocusedElement.value;
+      if (elementToFocus && typeof elementToFocus.focus === 'function') {
+        elementToFocus.focus();
+        initialFocusedElement.value = null;
       }
-    },
+    }
+  }
+}
+
+function loseFocus() {
+  if (isSearchInputFocused.value) {
+    // if the search is active the focus is lost from the trigger, then it must regain the focus
+    searchInput.value.blur();
+  } else if (isCtaAreaFocused.value) {
+    blurCta();
+    const ctaAreaElementFocusable = ctaAreaWrapper.value.querySelector(
+      'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
+    );
+    ctaAreaElementFocusable.blur();
+  }
+}
+</script>
+
+<script>
+export default {
+  name: 'EcDropdownSearch',
+  compatConfig: {
+    MODE: 3,
   },
+  inheritAttrs: false,
 };
 </script>
 
diff --git a/src/components/ec-dropdown/__snapshots__/ec-dropdown.spec.js.snap b/src/components/ec-dropdown/__snapshots__/ec-dropdown.spec.js.snap
index c4aeb6074..a2daf49cb 100644
--- a/src/components/ec-dropdown/__snapshots__/ec-dropdown.spec.js.snap
+++ b/src/components/ec-dropdown/__snapshots__/ec-dropdown.spec.js.snap
@@ -135,7 +135,7 @@ exports[`EcDropdown :props should enable search when isSearchEnabled is set to t
 
 exports[`EcDropdown :props should get disabled when disabled prop is set 1`] = `
 <div
-  class="ec-dropdown-search ec-dropdown"
+  class="ec-dropdown ec-dropdown-search"
   data-test="ec-dropdown ec-dropdown-search"
 >
   <ec-stub
@@ -205,7 +205,7 @@ exports[`EcDropdown :props should get disabled when disabled prop is set 1`] = `
 
 exports[`EcDropdown :props should not show the items when the loading is set to true 1`] = `
 <div
-  class="ec-dropdown-search ec-dropdown"
+  class="ec-dropdown ec-dropdown-search"
   data-test="ec-dropdown ec-dropdown-search"
 >
   <ec-stub
@@ -330,7 +330,7 @@ exports[`EcDropdown :props should pass label prop to the triggering input 1`] =
 
 exports[`EcDropdown :props should render given popover style 1`] = `
 <div
-  class="ec-dropdown-search ec-dropdown"
+  class="ec-dropdown ec-dropdown-search"
   data-test="ec-dropdown ec-dropdown-search"
 >
   <ec-stub
@@ -401,7 +401,7 @@ exports[`EcDropdown :props should render given popover style 1`] = `
 
 exports[`EcDropdown :props should render given popover style when it is a function 1`] = `
 <div
-  class="ec-dropdown-search ec-dropdown"
+  class="ec-dropdown ec-dropdown-search"
   data-test="ec-dropdown ec-dropdown-search"
 >
   <ec-stub
@@ -472,7 +472,7 @@ exports[`EcDropdown :props should render given popover style when it is a functi
 
 exports[`EcDropdown :props should render properly when the labelTooltip prop is set 1`] = `
 <div
-  class="ec-dropdown-search ec-dropdown"
+  class="ec-dropdown ec-dropdown-search"
   data-test="ec-dropdown ec-dropdown-search"
 >
   <ec-stub
@@ -541,7 +541,7 @@ exports[`EcDropdown :props should render properly when the labelTooltip prop is
 
 exports[`EcDropdown :props should render with a sensitive class when isSensitive prop is set to true 1`] = `
 <div
-  class="ec-dropdown-search ec-dropdown"
+  class="ec-dropdown ec-dropdown-search"
   data-test="ec-dropdown ec-dropdown-search"
 >
   <ec-stub
@@ -642,7 +642,7 @@ exports[`EcDropdown :props should use searchPlaceholder prop if search is enable
 
 exports[`EcDropdown should render as expected 1`] = `
 <div
-  class="ec-dropdown-search ec-dropdown"
+  class="ec-dropdown ec-dropdown-search"
   data-test="ec-dropdown ec-dropdown-search"
 >
   <ec-stub
@@ -720,6 +720,75 @@ exports[`EcDropdown should render readonly input as a trigger 1`] = `
 />
 `;
 
+exports[`EcDropdown should use custom attributes 1`] = `
+<div
+  class="my-class ec-dropdown ec-dropdown-search"
+  data-test="ec-dropdown ec-dropdown-search"
+>
+  <ec-stub
+    autosize="true"
+    class="ec-dropdown-search__trigger"
+    data-test="ec-popover-dropdown-search ec-stub ec-popover-stub"
+    disabled="false"
+    distance="8"
+    placement="bottom-start"
+    popperclass="ec-dropdown-search__popover"
+    shift="false"
+    shown="false"
+  >
+    
+    
+    <div
+      class="ec-input-field"
+      data-test="ec-input-field"
+    >
+      <!--v-if-->
+      <input
+        class="ec-input-field__input ec-input-field__input--has-icon"
+        data-test="my-data-test ec-dropdown__input ec-input-field__input"
+        id="my-id"
+        placeholder=""
+        readonly=""
+        type="text"
+      />
+      <div
+        class="ec-input-field__icon-wrapper"
+        data-test="ec-input-field__icon-wrapper"
+      >
+        <svg
+          class="ec-icon ec-input-field__icon"
+          data-test="ec-input-field__icon"
+          height="24"
+          width="24"
+        >
+          <use
+            xlink:href="#ec-simple-arrow-drop-down"
+          />
+        </svg>
+      </div>
+      <!--v-if-->
+    </div>
+    
+    
+    
+    <div>
+      <ul
+        class="ec-dropdown-search__item-list"
+        data-test="ec-dropdown-search__item-list"
+      >
+        <!--v-if-->
+        <!--v-if-->
+        
+        
+        
+        
+      </ul>
+    </div>
+    
+  </ec-stub>
+</div>
+`;
+
 exports[`EcDropdown should use given list-data-test attribute 1`] = `
 <ul
   class="ec-dropdown-search__item-list"
diff --git a/src/components/ec-dropdown/ec-dropdown.spec.js b/src/components/ec-dropdown/ec-dropdown.spec.js
index 27f9ee933..51c7d60eb 100644
--- a/src/components/ec-dropdown/ec-dropdown.spec.js
+++ b/src/components/ec-dropdown/ec-dropdown.spec.js
@@ -50,6 +50,17 @@ describe('EcDropdown', () => {
     expect(wrapper.findByDataTest('ec-dropdown-search__search-area').exists()).toBe(false);
   });
 
+  it('should use custom attributes', () => {
+    const wrapper = mountDropdown({}, {
+      attrs: {
+        'data-test': 'my-data-test',
+        id: 'my-id',
+        class: 'my-class',
+      },
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
   it('should use given list-data-test attribute', () => {
     const wrapper = mountDropdown({ items }, {
       attrs: {
@@ -196,6 +207,7 @@ describe('EcDropdown', () => {
         },
       );
 
+      await openDropdown(wrapper);
       expect(wrapper.vm.selected).toEqual(null);
       await selectItem(wrapper, 0);
       expect(wrapper.vm.selected).toEqual(items[0]);
@@ -220,8 +232,34 @@ describe('EcDropdown', () => {
   });
 
   describe('@events', () => {
+    it('should emit a focus event when opened', async () => {
+      const wrapper = mountDropdown({ items });
+      await openDropdown(wrapper);
+      expect(wrapper.emitted('focus').length).toEqual(1);
+    });
+
+    it('should emit a blur event when blurred', async () => {
+      const wrapper = mountDropdown({ items });
+      await openDropdown(wrapper);
+      await wrapper.findByDataTest('ec-dropdown__input').trigger('blur');
+      expect(wrapper.emitted('blur').length).toEqual(1);
+    });
+
+    it('should propagate an after-open event', () => {
+      const wrapper = mountDropdown({ items });
+      wrapper.findComponentByDataTest('ec-popover-dropdown-search').vm.$emit('apply-show');
+      expect(wrapper.emitted('after-open').length).toEqual(1);
+    });
+
+    it('should propagate an after-close event', () => {
+      const wrapper = mountDropdown({ items });
+      wrapper.findComponentByDataTest('ec-popover-dropdown-search').vm.$emit('apply-hide');
+      expect(wrapper.emitted('after-close').length).toEqual(1);
+    });
+
     it('should emit change event when an item is selected', async () => {
       const wrapper = mountDropdown({ items });
+      await openDropdown(wrapper);
       await selectItem(wrapper, 1);
 
       expect(wrapper.emitted('change').length).toEqual(1);
@@ -246,20 +284,32 @@ describe('EcDropdown', () => {
     });
 
     it('should not return focus back to readonly input if it already has it', async () => {
-      const wrapper = mountDropdown({ items });
-      const focusSpy = jest.spyOn(wrapper.findComponent({ ref: 'trigger' }).element, 'querySelector')
-        .mockImplementation(() => true);
-      await selectItem(wrapper, 1);
+      const focusSpy = jest.fn();
 
+      const wrapper = mountDropdown({ items }, {
+        attrs: {
+          onFocus: focusSpy,
+        },
+      });
+      await openDropdown(wrapper);
+      expect(focusSpy).toHaveBeenCalledTimes(1);
+      await selectItem(wrapper, 1);
       expect(focusSpy).toHaveBeenCalledTimes(1);
       expect(wrapper.emitted('change')[0]).toEqual([items[1]]);
-      focusSpy.mockRestore();
+
+      await selectItem(wrapper, 2);
+      expect(focusSpy).toHaveBeenCalledTimes(1);
+      expect(wrapper.emitted('change')[1]).toEqual([items[2]]);
     });
   });
 });
 
-async function selectItem(wrapper, index) {
+async function openDropdown(wrapper) {
   await wrapper.findByDataTest('ec-dropdown__input').trigger('mousedown');
   await wrapper.findByDataTest('ec-dropdown__input').trigger('click');
+  await wrapper.findByDataTest('ec-dropdown__input').trigger('focus');
+}
+
+async function selectItem(wrapper, index) {
   await wrapper.findByDataTest(`ec-dropdown-search__item--${index}`).trigger('click');
 }
diff --git a/src/components/ec-dropdown/ec-dropdown.story.js b/src/components/ec-dropdown/ec-dropdown.story.js
index a2b110620..9dd85d401 100644
--- a/src/components/ec-dropdown/ec-dropdown.story.js
+++ b/src/components/ec-dropdown/ec-dropdown.story.js
@@ -6,6 +6,16 @@ import EcDropdown from './ec-dropdown.vue';
 export default {
   title: 'Dropdown',
   component: EcDropdown,
+  argTypes: {
+    level: {
+      options: ['notification', 'modal', 'tooltip', 'level-1', 'level-2', 'level-3'],
+      control: { type: 'select' },
+    },
+    isInGroup: {
+      options: ['left', 'right'],
+      control: { type: 'select' },
+    },
+  },
 };
 
 const defaultItems = [
@@ -18,16 +28,19 @@ const defaultItems = [
   { text: 'Item 7' },
 ];
 
-const Template = args => ({
+const Template = ({ modelValue, ...args }) => ({
   components: { EcDropdown },
   setup() {
-    const model = ref(args.selected);
+    const model = ref(modelValue);
 
     return {
       args,
       model,
       onCta: action('cta'),
       onChange: action('change'),
+      onFocus: action('focus'),
+      onOpen: action('open'),
+      onClose: action('close'),
     };
   },
   template: `
@@ -39,7 +52,10 @@ const Template = args => ({
           v-bind="args"
           v-model="model"
           v-on="{
-            change: onChange
+            change: onChange,
+            focus: onFocus,
+            open: onOpen,
+            close: onClose,
           }">
           <template #cta>
             <a href="#" @click.prevent="onCta" class="tw-block tw-py-8 tw-px-16">Do something</a>
diff --git a/src/components/ec-dropdown/ec-dropdown.vue b/src/components/ec-dropdown/ec-dropdown.vue
index d1e0c9ae7..b847ee9a7 100644
--- a/src/components/ec-dropdown/ec-dropdown.vue
+++ b/src/components/ec-dropdown/ec-dropdown.vue
@@ -22,7 +22,7 @@
   >
     <ec-input-field
       :id="id"
-      ref="trigger"
+      ref="triggerRef"
       :error-id="errorId"
       :model-value="selectedTextValue"
       :label="label"
@@ -42,7 +42,7 @@
 
     <template
       #item="{ item, index, isSelected }"
-      v-if="hasItemSlot()"
+      v-if="hasSlot('item')"
     >
       <slot
         name="item"
@@ -55,157 +55,161 @@
     </template>
     <template
       #cta
-      v-if="hasCtaSlot()"
+      v-if="hasSlot('cta')"
     >
       <slot name="cta" />
     </template>
   </ec-dropdown-search>
 </template>
 
-<script>
+<script setup>
+import { computed, ref, useSlots } from 'vue';
+
 import EcDropdownSearch from '../ec-dropdown-search';
 import EcInputField from '../ec-input-field';
 
-export default {
-  name: 'EcDropdown',
-  compatConfig: {
-    COMPONENT_V_MODEL: false,
+const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus', 'open', 'close', 'after-open', 'after-close']);
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => ([]),
   },
-  components: {
-    EcDropdownSearch, EcInputField,
+  modelValue: {
+    type: [Object, Array],
+    default: null,
   },
-  inheritAttrs: false,
-  props: {
-    items: {
-      type: Array,
-      default: () => ([]),
-    },
-    modelValue: {
-      type: [Object, Array],
-      default: null,
-    },
-    selectedText: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    labelTooltip: {
-      type: String,
-      default: '',
-    },
-    level: {
-      type: String,
-      validator(value) {
-        return ['notification', 'modal', 'tooltip', 'level-1', 'level-2', 'level-3'].includes(value);
-      },
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    searchPlaceholder: {
-      type: String,
-      default: 'Search...',
-    },
-    isSearchEnabled: {
-      type: Boolean,
-      default: false,
-    },
-    noResultsText: {
-      type: String,
-      default: 'No results found',
-    },
-    isInGroup: {
-      type: String,
-    },
-    isSensitive: {
-      type: Boolean,
-      default: false,
-    },
-    id: {
-      type: String,
-    },
-    errorId: {
-      type: String,
-    },
-    popoverOptions: {
-      type: Object,
-      default: null,
-    },
-    popoverStyle: {
-      type: [Object, Function],
-      default: null,
-    },
-    tooltipCta: {
-      type: String,
-      default: '',
-    },
+  selectedText: {
+    type: String,
+    default: '',
   },
-  emits: ['update:modelValue', 'change', 'blur', 'focus', 'open', 'close', 'after-open', 'after-close'],
-  data() {
-    return {
-      shouldEmitFocus: true,
-    };
-  },
-  computed: {
-    selectedModel: {
-      get() {
-        return this.modelValue;
-      },
-      set(selectedItem) {
-        this.$emit('update:modelValue', selectedItem);
-        this.$emit('change', selectedItem);
-      },
-    },
-    selectedTextValue() {
-      if (this.selectedText) {
-        return this.selectedText;
-      }
-      if (this.modelValue) {
-        return this.modelValue.text;
-      }
-      return '';
-    },
+  label: {
+    type: String,
+    default: '',
   },
-  methods: {
-    onFocus() {
-      // when an item has been selected the readonly input will regain the focus.
-      // The `focus` event should not be emitted in this scenario
-      if (this.shouldEmitFocus) {
-        this.$emit('focus');
-      } else {
-        this.shouldEmitFocus = true;
-      }
-    },
-    onSelected() {
-      // return focus back to readonly input
-      if (!this.$refs.trigger.$el.querySelector('input:focus')) {
-        this.shouldEmitFocus = false;
-        this.$refs.trigger.$el.querySelector('input').focus();
-      }
-    },
-    hasCtaSlot() {
-      return !!this.$slots.cta;
-    },
-    hasItemSlot() {
-      return !!this.$slots.item;
+  labelTooltip: {
+    type: String,
+    default: '',
+  },
+  level: {
+    type: String,
+    validator(value) {
+      return ['notification', 'modal', 'tooltip', 'level-1', 'level-2', 'level-3'].includes(value);
     },
   },
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  searchPlaceholder: {
+    type: String,
+    default: 'Search...',
+  },
+  isSearchEnabled: {
+    type: Boolean,
+    default: false,
+  },
+  noResultsText: {
+    type: String,
+    default: 'No results found',
+  },
+  isInGroup: {
+    type: String,
+  },
+  isSensitive: {
+    type: Boolean,
+    default: false,
+  },
+  id: {
+    type: String,
+  },
+  errorId: {
+    type: String,
+  },
+  popoverOptions: {
+    type: Object,
+    default: null,
+  },
+  popoverStyle: {
+    type: [Object, Function],
+    default: null,
+  },
+  tooltipCta: {
+    type: String,
+    default: '',
+  },
+});
+
+// selected value
+const selectedModel = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(selectedItem) {
+    emit('update:modelValue', selectedItem);
+    emit('change', selectedItem);
+  },
+});
+
+const selectedTextValue = computed(() => {
+  if (props.selectedText) {
+    return props.selectedText;
+  }
+  if (props.modelValue) {
+    return props.modelValue.text;
+  }
+  return '';
+});
+
+// maintaining focus
+const shouldEmitFocus = ref(true);
+const triggerRef = ref(null);
+
+function onSelected(args) {
+  // return focus back to the readonly input
+  if (triggerRef.value && triggerRef.value.inputRef !== document.activeElement) {
+    shouldEmitFocus.value = false;
+    triggerRef.value.focus();
+  }
+}
+
+function onFocus() {
+  // when an item has been selected the readonly input will regain the focus.
+  // The `focus` event should not be emitted in this scenario
+  if (shouldEmitFocus.value) {
+    emit('focus');
+  } else {
+    shouldEmitFocus.value = true;
+  }
+}
+
+// slots
+const slots = useSlots();
+
+function hasSlot(name) {
+  return name in slots;
+}
+</script>
+
+<script>
+export default {
+  name: 'EcDropdown',
+  compatConfig: {
+    MODE: 3,
+  },
+  inheritAttrs: false,
 };
 </script>
 
diff --git a/src/components/ec-phone-number-input/__snapshots__/ec-phone-number-input.spec.js.snap b/src/components/ec-phone-number-input/__snapshots__/ec-phone-number-input.spec.js.snap
index 77888c0cc..da56875f7 100644
--- a/src/components/ec-phone-number-input/__snapshots__/ec-phone-number-input.spec.js.snap
+++ b/src/components/ec-phone-number-input/__snapshots__/ec-phone-number-input.spec.js.snap
@@ -56,7 +56,7 @@ exports[`EcPhoneNumberInput :props should render in a disabled state 1`] = `
     data-test="ec-phone-number-input__input-group ec-mock ec-tooltip-mock"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-phone-number-input__countries"
+      class="ec-phone-number-input__countries ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
@@ -444,7 +444,7 @@ exports[`EcPhoneNumberInput :props should render with a disabled tooltip message
     data-test="ec-phone-number-input__input-group ec-mock ec-tooltip-mock"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-phone-number-input__countries"
+      class="ec-phone-number-input__countries ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
@@ -720,7 +720,7 @@ exports[`EcPhoneNumberInput :props should render with a label 1`] = `
     data-test="ec-phone-number-input__input-group ec-mock ec-tooltip-mock"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-phone-number-input__countries"
+      class="ec-phone-number-input__countries ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
@@ -994,7 +994,7 @@ exports[`EcPhoneNumberInput :props should render with a note 1`] = `
     data-test="ec-phone-number-input__input-group ec-mock ec-tooltip-mock"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-phone-number-input__countries"
+      class="ec-phone-number-input__countries ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
@@ -1266,7 +1266,7 @@ exports[`EcPhoneNumberInput :props should render with a sensitive class when isS
     data-test="ec-phone-number-input__input-group ec-mock ec-tooltip-mock"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-phone-number-input__countries"
+      class="ec-phone-number-input__countries ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
@@ -1563,7 +1563,7 @@ exports[`EcPhoneNumberInput :props should render with an error message 1`] = `
     data-test="ec-phone-number-input__input-group ec-mock ec-tooltip-mock"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-phone-number-input__countries"
+      class="ec-phone-number-input__countries ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub
@@ -1837,7 +1837,7 @@ exports[`EcPhoneNumberInput should render properly 1`] = `
     data-test="ec-phone-number-input__input-group ec-mock ec-tooltip-mock"
   >
     <div
-      class="ec-dropdown-search ec-dropdown ec-phone-number-input__countries"
+      class="ec-phone-number-input__countries ec-dropdown ec-dropdown-search"
       data-test="ec-dropdown ec-dropdown-search"
     >
       <ec-stub