feat(mfa): opt-in MFA setup UI (TOTP fix + recovery download, passkey enrollment, method hub)

.github/workflows/size.yml

@@ -6,7 +6,10 @@ jobs:
     env:
       CI_JOB_NUMBER: 1
     steps:
-      - uses: actions/checkout@v1
-      - uses: andresz1/size-limit-action@v1
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: andresz1/size-limit-action@v1.8.0
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -5,4 +5,5 @@ node_modules
 dist
 .parcel-cache
 .yalc
-*storybook.log
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -9,30 +9,51 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/addon-styling-webpack',
-    '@storybook/preset-scss'
+    '@storybook/preset-scss',
   ],
   framework: {
     name: '@storybook/react-webpack5',
     options: {
       strictMode: true,
     },
   },
+  // Match the automatic JSX runtime used by tsconfig ("jsx": "react-jsx") so
+  // story files don't need an explicit `import React`.
+  swc: (swcConfig) => ({
+    ...swcConfig,
+    jsc: {
+      ...swcConfig.jsc,
+      transform: {
+        ...swcConfig.jsc?.transform,
+        react: {
+          ...swcConfig.jsc?.transform?.react,
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
   webpackFinal: async (currentConfig: WebpackConfiguration, { configType }) => {
     // get index of css rule
     const ruleCssIndex = currentConfig.module.rules.findIndex(
-      (rule) => rule.test?.toString() === "/\\.css$/"
+      (rule) => rule.test?.toString() === '/\\.css$/'
     );
 
     // map over the 'use' array of the css rule and set the 'module' option to true
     currentConfig.module.rules[ruleCssIndex].use.map((item) => {
-      if (item.loader && item.loader.includes("/css-loader/")) {
+      if (item.loader && item.loader.includes('/css-loader/')) {
         item.options.modules = {
-          mode: "local",
+          // The library ships default.css as a plain global stylesheet
+          // (consumers import it directly), so its class names must NOT be
+          // scoped/hashed or component className strings won't match. Keep
+          // everything else as local CSS modules.
+          mode: (resourcePath: string) =>
+            resourcePath.replace(/\\/g, '/').endsWith('styles/default.css')
+              ? 'global'
+              : 'local',
           localIdentName:
-            configType === "PRODUCTION"
-              ? "[local]__[hash:base64:5]"
-              : "[name]__[local]__[hash:base64:5]",
+            configType === 'PRODUCTION'
+              ? '[local]__[hash:base64:5]'
+              : '[name]__[local]__[hash:base64:5]',
         };
       }