refactor(ui): scope ConfigureSSO Configure locales by provider and adopt inline rich-text markup

Restructures localization keys under configureSSO.configureStep so future
SAML providers (Custom SAML) and OIDC can drop in alongside Okta without
duplicating shared copy:

- spFields and attributeMapping live at the top level since their labels,
  table content, badges, and the "These are the defaults..." paragraph
  read the same regardless of provider.
- samlOkta now owns provider-specific copy: title, subtitle, createApp
  walkthrough, serviceProvider narrative, completeSamlIntegration steps,
  configureAttributes pairs, metadataUrl. When Custom SAML lands, a
  sibling samlCustom namespace mirrors this shape.

Replaces the InstructionStep and InstructionStepWithCode helpers (which
required 3 or 5 separate keys per sentence) with a single RichText
component that parses inline <strong>...</strong> and <code>...</code>
markup in a localized string. One key per sentence, translators see the
whole context, emphasis stays themable through Text spans.

ConfigureAttributesSubStep redesigned to match Figma 8032:14794:
- Claim names in the attribute mapping table are now user.email,
  user.firstName, user.lastName (corrects user.profile.email).
- The verify-mappings list collapses from 9 separate numbered steps to 2,
  with a nested bulleted sub-list of the name/expression pairs the user
  enters in Okta.
- Table rows render from an ATTRIBUTE_ROWS constant so the row markup
  isn't duplicated three times.
- Verify-mappings pairs render from an ATTRIBUTE_PAIRS constant for the
  same reason.

Sweeps remaining sx={{ color: $colorMutedForeground }} call sites in the
Configure sub-steps over to Text colorScheme='secondary' to match the
pattern used elsewhere in the file.

Author: iagodahlem

packages/localizations/src/en-US.ts

@@ -224,157 +224,80 @@ export const enUS: LocalizationResource = {
       warning: 'Once a provider is selected you cannot change again until the configuration is over',
     },
     configureStep: {
-      title: 'Configure Okta Workforce',
-      subtitle: 'Create a new enterprise application in your Okta Dashboard',
-      createApp: {
-        createApp: {
-          title: 'Create a new enterprise application in Okta',
-          step1: {
-            prefix: 'Sign in to Okta and go to ',
-            bold: 'Admin → Applications',
-            suffix: '.',
-          },
-          step2: {
-            prefix: 'Click ',
-            bold: 'Create App Integration',
-            suffix: '.',
-          },
-          step3: {
-            prefix: 'Select ',
-            bold: 'SAML 2.0',
-            suffix: '.',
+      spFields: {
+        acsUrl: {
+          label: 'Single sign-on URL',
+        },
+        spEntityId: {
+          label: 'Audience URI',
+        },
+      },
+      attributeMapping: {
+        title: 'We expect your SAML responses to have the following specific attributes:',
+        paragraph:
+          "These are the defaults and probably won't need you to change them. However, many SAML configuration errors are due to incorrect attribute mappings, so it's worth double-checking. Here's how:",
+        columns: {
+          attribute: 'Attribute',
+          claimName: 'Claim Name',
+        },
+        badges: {
+          required: 'Required',
+          optional: 'Optional',
+        },
+        rows: {
+          email: {
+            attribute: 'Email address',
+            claim: 'user.email',
           },
-          step4: {
-            prefix: 'Fill in the ',
-            bold: 'General Settings',
-            suffix: ' (App name is required).',
+          firstName: {
+            attribute: 'First Name',
+            claim: 'user.firstName',
           },
-          step5: {
-            prefix: 'Click ',
-            bold: 'Next',
-            suffix: ' to complete creating the application.',
+          lastName: {
+            attribute: 'Last Name',
+            claim: 'user.lastName',
           },
         },
+      },
+      samlOkta: {
+        title: 'Configure Okta Workforce',
+        subtitle: 'Create a new enterprise application in your Okta Dashboard',
+        createApp: {
+          title: 'Create a new enterprise application in Okta',
+          step1: 'Sign in to Okta and go to <strong>Admin → Applications</strong>.',
+          step2: 'Click <strong>Create App Integration</strong>.',
+          step3: 'Select <strong>SAML 2.0</strong>.',
+          step4: 'Fill in the <strong>General Settings</strong> (App name is required).',
+          step5: 'Click <strong>Next</strong> to complete creating the application.',
+        },
         serviceProvider: {
           title: 'Configure service provider',
           paragraph1:
             'Once you have moved forward from the General Settings instructions, you will be presented with the Configure SAML page.',
           paragraph2:
             'To configure your service provider (Clerk), you must add these two fields to your Okta application:',
-          acsUrl: {
-            label: 'Single sign-on URL',
-          },
-          spEntityId: {
-            label: 'Audience URI',
-          },
         },
         completeSamlIntegration: {
           title: 'Complete SAML integration',
-          step1: {
-            prefix: 'Select ',
-            bold: 'This is an internal app that we have created',
-            suffix: ' from the options menu.',
-          },
-          step2: {
-            prefix: 'Complete the form with any comments and select ',
-            bold: '"Finish"',
-            suffix: '.',
-          },
+          step1: 'Select <strong>This is an internal app that we have created</strong> from the options menu.',
+          step2: 'Complete the form with any comments and select <strong>"Finish"</strong>.',
         },
-      },
-      configureAttributes: {
-        attributeMapping: {
-          title: 'We expect your SAML responses to have the following specific attributes:',
-          columns: {
-            attribute: 'Attribute',
-            claimName: 'Claim Name',
-          },
-          badges: {
-            required: 'Required',
-            optional: 'Optional',
-          },
-          rows: {
-            email: {
-              attribute: 'Email address',
-              claim: 'user.profile.email',
-            },
-            firstName: {
-              attribute: 'First Name',
-              claim: 'user.firstName',
-            },
-            lastName: {
-              attribute: 'Last Name',
-              claim: 'user.lastName',
-            },
+        configureAttributes: {
+          step1: 'In the Okta dashboard, find the <strong>Attribute Statements</strong> section.',
+          step2:
+            'Select <strong>Add Expression</strong> for each attribute, and enter the following name and expression pairs:',
+          pairs: {
+            email: '<code>mail</code> and <code>user.profile.mail</code>',
+            firstName: '<code>firstName</code> and <code>user.profile.firstName</code>',
+            lastName: '<code>lastName</code> and <code>user.profile.lastName</code>',
           },
         },
-        verifyMappings: {
-          paragraph:
-            "These are the defaults and probably won't need you to change them. However, many SAML configuration errors are due to incorrect attribute mappings, so it's worth double-checking. Here's how:",
-          step1: {
-            prefix: 'In the Okta dashboard, find the ',
-            bold: 'Attribute Statements',
-            suffix: ' section.',
-          },
-          step2: {
-            prefix: 'For the ',
-            bold: 'Name',
-            middle: ' field, enter ',
-            code: 'mail',
-            suffix: '',
-          },
-          step3: {
-            prefix: 'For the ',
-            bold: 'Value',
-            middle: ' field, choose ',
-            code: 'user.profile.mail',
-            suffix: ' from the dropdown.',
-          },
-          step4: {
-            prefix: 'Select the ',
-            bold: 'Add Another',
-            suffix: ' button to add another attribute.',
-          },
-          step5: {
-            prefix: 'For the ',
-            bold: 'Name',
-            middle: ' field, enter ',
-            code: 'firstName',
-            suffix: '',
-          },
-          step6: {
-            prefix: 'For the ',
-            bold: 'Value',
-            middle: ' field, choose ',
-            code: 'user.firstName',
-            suffix: ' from the dropdown.',
-          },
-          step7: {
-            prefix: 'Select the ',
-            bold: 'Add Another',
-            suffix: ' button to add another attribute.',
-          },
-          step8: {
-            prefix: 'For the ',
-            bold: 'Name',
-            middle: ' field, enter ',
-            code: 'lastName',
-            suffix: '',
-          },
-          step9: {
-            prefix: 'For the ',
-            bold: 'Value',
-            middle: ' field, choose ',
-            code: 'user.lastName',
-            suffix: ' from the dropdown.',
-          },
+        metadataUrl: {
+          label: 'Metadata URL',
+          placeholder: 'Paste URL here...',
+          description: 'In your Okta SAML app, go to the Sign On tab and retrieve the metadata URL. Paste it below.',
         },
       },
-      metadataUrl: {
-        label: 'Metadata URL',
-        placeholder: 'Paste URL here...',
-        description: 'In your Okta SAML app, go to the Sign On tab and retrieve the metadata URL. Paste it below.',
-      },
     },
   },
   createOrganization: {