feat(ui): add SelectProviderStep boilerplate as the first wizard step

Adds the Select Provider step at the top of the ConfigureSSO wizard
tree. The step is structurally a regular wizard step — same Step
chrome, same goNext / goPrev mechanics, same per-step descriptor —
but ConfigureSSOHeader filters it out of the breadcrumb by id so it
doesn't appear in the Stepper. When the user is on Select Provider,
no breadcrumb bullet is highlighted (currentIndex resolves to -1
against the filtered list, all items render muted) — matches the
design intent.

The step body is placeholder UI for now. The provider tile selection,
the FlowProvider integration, and the initial-step derivation all
land separately when we actually build the Select Provider screen.

Author: iagodahlem

packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx

@@ -13,7 +13,7 @@ import { ConfigureSSOHeader } from './ConfigureSSOHeader';
 import { ConfigureSSONavbar } from './ConfigureSSONavbar';
 import { ConfigureSSOSkeleton } from './ConfigureSSOSkeleton';
 import { Wizard } from './elements/Wizard';
-import { ConfigureStep, ConfirmationStep, TestConfigurationStep, VerifyDomainStep } from './steps';
+import { ConfigureStep, ConfirmationStep, SelectProviderStep, TestConfigurationStep, VerifyDomainStep } from './steps';
 
 const ConfigureSSOInternal = () => {
   return (
@@ -81,6 +81,10 @@ const ConfigureSSOCardContent = () => {
 const ConfigureSSOSteps = () => {
   return (
     <>
+      <Wizard.Step id='select-provider'>
+        <SelectProviderStep />
+      </Wizard.Step>
+
       <Wizard.Step
         id='verify-domain'
         label='Verify domain'

packages/ui/src/components/ConfigureSSO/ConfigureSSOHeader.tsx

@@ -7,12 +7,17 @@ import { useWizard } from './elements/Wizard';
 
 export const ConfigureSSOHeader = (): JSX.Element => {
   const { activeSteps, currentStep, goToStep } = useWizard();
-  const currentIndex = activeSteps.findIndex(s => s.id === currentStep?.id);
+  // Select Provider isn't part of the visual breadcrumb per the design —
+  // filter it out here. The wizard still tracks it as the first step
+  // for navigation (goNext from it advances to verify-domain, Previous
+  // is naturally disabled because isFirstStep is true).
+  const visibleSteps = activeSteps.filter(step => step.id !== 'select-provider');
+  const currentIndex = visibleSteps.findIndex(step => step.id === currentStep?.id);
 
   return (
     <ProfileCardHeader>
       <Stepper>
-        {activeSteps.map((step, index) => {
+        {visibleSteps.map((step, index) => {
           const isCurrent = index === currentIndex;
           const isCompleted = step.isCompleted ?? index < currentIndex;
           const isReachable = isCompleted || index <= currentIndex;

packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx

@@ -0,0 +1,39 @@
+import { descriptors, Flow, Text } from '@/customizables';
+
+import { Step } from '../elements/Step';
+import { useWizard } from '../elements/Wizard';
+
+export const SelectProviderStep = (): JSX.Element => {
+  const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
+
+  return (
+    <Flow.Part part='selectProvider'>
+      <Step
+        elementDescriptor={descriptors.configureSSOWizardBody}
+        elementId={descriptors.configureSSOWizardBody.setId('select-provider')}
+      >
+        <Step.Header
+          title='Select provider'
+          description='Select the provider you are going to setup SSO for.'
+        />
+
+        <Step.Body>
+          <Step.Section>
+            <Text>UI goes here</Text>
+          </Step.Section>
+        </Step.Body>
+
+        <Step.Footer>
+          <Step.Footer.Previous
+            onClick={() => goPrev()}
+            isDisabled={isFirstStep}
+          />
+          <Step.Footer.Continue
+            onClick={() => goNext()}
+            isDisabled={isLastStep}
+          />
+        </Step.Footer>
+      </Step>
+    </Flow.Part>
+  );
+};

packages/ui/src/components/ConfigureSSO/steps/index.ts

@@ -1,4 +1,5 @@
 export { ConfigureStep } from './ConfigureStep';
 export { ConfirmationStep } from './ConfirmationStep';
+export { SelectProviderStep } from './SelectProviderStep';
 export { TestConfigurationStep } from './TestConfigurationStep';
 export { VerifyDomainStep } from './VerifyDomainStep';

packages/ui/src/elements/contexts/index.tsx

@@ -135,6 +135,7 @@ export type FlowMetadata = {
     | 'organizationCreationDisabled'
     | 'methodSelectionMFA'
     | 'provideEmail'
+    | 'selectProvider'
     | 'verifyDomain'
     | 'configureCreateApp'
     | 'configureMapAttributes'