refactor(ui): simplify Stepper.Item API

Stepper.Item now takes the label as children and a bullet number as
a primitive prop (rather than a ReactNode the caller had to pre-build).
The check-icon-vs-number switch moves inside Item, driven by the
isCompleted prop — callers no longer pick which symbol to render in
the bullet slot.

ConfigureSSOHeader simplifies accordingly: it computes the bullet
number from the index, resolves the step label via useLocalizations,
and passes the rest as plain props. No more inline ternary picking
between an Icon and a Text node for the bullet.

Author: iagodahlem

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

@@ -1,12 +1,12 @@
-import { Icon, Text } from '@/customizables';
-import { Check } from '@/icons';
+import { useLocalizations } from '@/customizables';
 
 import { ProfileCardHeader } from './elements/ProfileCard';
 import { Stepper } from './elements/Stepper';
 import { useWizard } from './elements/Wizard';
 
 export const ConfigureSSOHeader = (): JSX.Element => {
   const { activeSteps, currentStep, goToStep } = useWizard();
+  const { t } = useLocalizations();
   // 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
@@ -21,31 +21,12 @@ export const ConfigureSSOHeader = (): JSX.Element => {
           const isCurrent = index === currentIndex;
           const isCompleted = step.isCompleted ?? index < currentIndex;
           const isReachable = isCompleted || index <= currentIndex;
-          const showCheck = isCompleted && !isCurrent;
+          const labelText = step.label ? (typeof step.label === 'string' ? step.label : t(step.label)) : '';
 
           return (
             <Stepper.Item
               key={step.id}
-              label={step.label}
-              bullet={
-                showCheck ? (
-                  <Icon
-                    icon={Check}
-                    sx={theme => ({ width: theme.sizes.$2, height: theme.sizes.$2, color: theme.colors.$white })}
-                  />
-                ) : (
-                  <Text
-                    as='span'
-                    sx={theme => ({
-                      fontSize: theme.fontSizes.$xs,
-                      fontWeight: theme.fontWeights.$semibold,
-                      color: theme.colors.$colorBackground,
-                    })}
-                  >
-                    {index + 1}
-                  </Text>
-                )
-              }
+              bullet={index + 1}
               isCurrent={isCurrent}
               isCompleted={isCompleted}
               isReachable={isReachable}
@@ -54,7 +35,9 @@ export const ConfigureSSOHeader = (): JSX.Element => {
                   void goToStep(step.id);
                 }
               }}
-            />
+            >
+              {labelText}
+            </Stepper.Item>
           );
         })}
       </Stepper>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Box, Button, descriptors, Flex, Icon, Text, useLocalizations } from '@/customizables';
-import { CaretRight } from '@/icons';
+import { Box, Button, descriptors, Flex, Icon, Text } from '@/customizables';
+import { CaretRight, Check } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -36,16 +36,13 @@ const Root = ({ children }: StepperProps): JSX.Element => {
 };
 
 const Item = ({
-  label,
   bullet,
   isCurrent,
   isCompleted,
   isReachable = true,
   onClick,
+  children,
 }: StepperItemProps): JSX.Element => {
-  const { t } = useLocalizations();
-  const labelText = label ? (typeof label === 'string' ? label : t(label)) : '';
-
   return (
     <Button
       elementDescriptor={descriptors.configureSSOStepperItem}
@@ -75,15 +72,31 @@ const Item = ({
               : theme.colors.$neutralAlpha400,
         })}
       >
-        {bullet}
+        {isCompleted && !isCurrent ? (
+          <Icon
+            icon={Check}
+            sx={theme => ({ width: theme.sizes.$2, height: theme.sizes.$2, color: theme.colors.$white })}
+          />
+        ) : (
+          <Text
+            as='span'
+            sx={theme => ({
+              fontSize: theme.fontSizes.$xs,
+              fontWeight: theme.fontWeights.$semibold,
+              color: theme.colors.$colorBackground,
+            })}
+          >
+            {bullet}
+          </Text>
+        )}
       </Flex>
       <Text
         elementDescriptor={descriptors.configureSSOStepperItemLabel}
         as='span'
         variant='body'
         sx={{ fontWeight: 'inherit', color: 'inherit' }}
       >
-        {labelText}
+        {children}
       </Text>
     </Button>
   );

packages/ui/src/components/ConfigureSSO/elements/Stepper/types.ts

@@ -1,20 +1,18 @@
 import type React from 'react';
 
-import type { LocalizationKey } from '@/customizables';
-
 export interface StepperItemProps {
-  /** Display label. Resolved by the caller before passing in. */
-  label?: LocalizationKey | string;
-  /** Content to render inside the bullet circle (typically a number or a check icon). Caller decides what to show. */
-  bullet?: React.ReactNode;
+  /** The number shown in the bullet — typically the 1-indexed position. Replaced by a check icon when `isCompleted && !isCurrent`. */
+  bullet: number;
   /** Whether this is the active item. Bullet renders in foreground color. */
   isCurrent?: boolean;
-  /** Whether this item is past/done. Bullet renders in success color, label in foreground color. */
+  /** Whether this item is past/done. Bullet renders the check icon in success color, label in foreground color. */
   isCompleted?: boolean;
   /** Whether the user can click this item to jump to it. When false, the button is `isDisabled`. Defaults to true. */
   isReachable?: boolean;
-  /** Click handler. Called regardless of `isReachable` — caller can no-op when not reachable, but the button itself just dispatches. */
+  /** Click handler. */
   onClick?: () => void;
+  /** Label content rendered next to the bullet. Caller is responsible for any localization. */
+  children: React.ReactNode;
 }
 
 export interface StepperProps {