@stigmer/react 3.9.0 → 3.11.0

package/src/identity-provider/IdentityProviderWizard.tsx

@@ -205,19 +205,19 @@ export function IdentityProviderWizard({
   // -- Render ----------------------------------------------------------
 
   return (
-    <div className={cn("space-y-4", className)}>
+    <div className={cn("stg:space-y-4", className)}>
       {/* Step indicator */}
       <StepIndicator current={step} />
 
       {step === "pick" && (
         <>
-          <p className="text-muted-foreground text-xs">
+          <p className="stg:text-muted-foreground stg:text-xs">
             Choose your identity provider to get started. Known providers
             will have their OIDC configuration auto-populated.
           </p>
           <ProviderPicker onSelect={handlePickProvider} />
           {onCancel && (
-            <div className="pt-1">
+            <div className="stg:pt-1">
               <CancelButton onClick={onCancel} />
             </div>
           )}
@@ -301,28 +301,28 @@ const STEPS: { key: WizardStep; label: string }[] = [
 function StepIndicator({ current }: { current: WizardStep }) {
   const currentIdx = STEPS.findIndex((s) => s.key === current);
   return (
-    <nav aria-label="Wizard progress" className="flex items-center gap-1.5">
+    <nav aria-label="Wizard progress" className="stg:flex stg:items-center stg:gap-1.5">
       {STEPS.map((s, i) => {
         const state =
           i < currentIdx ? "done" : i === currentIdx ? "active" : "upcoming";
         return (
-          <span key={s.key} className="flex items-center gap-1.5">
+          <span key={s.key} className="stg:flex stg:items-center stg:gap-1.5">
             {i > 0 && (
               <span
                 className={cn(
-                  "h-px w-4",
-                  state === "upcoming" ? "bg-border" : "bg-primary-subtle",
+                  "stg:h-px stg:w-4",
+                  state === "upcoming" ? "stg:bg-border" : "stg:bg-primary-subtle",
                 )}
               />
             )}
             <span
               className={cn(
-                "text-[0.65rem] font-medium",
+                "stg:text-[0.65rem] stg:font-medium",
                 state === "active"
-                  ? "text-primary"
+                  ? "stg:text-primary"
                   : state === "done"
-                    ? "text-muted-foreground"
-                    : "text-muted-foreground-faint",
+                    ? "stg:text-muted-foreground"
+                    : "stg:text-muted-foreground-faint",
               )}
             >
               {s.label}
@@ -375,8 +375,8 @@ function ConfigureStep({
     !isLoading;
 
   return (
-    <div className="space-y-3">
-      <p className="text-muted-foreground text-xs">
+    <div className="stg:space-y-3">
+      <p className="stg:text-muted-foreground stg:text-xs">
         {preset.variables.length > 0
           ? `Enter your ${preset.label} details to auto-populate the OIDC configuration.`
           : `${preset.label} configuration is fully automatic — just provide a name and audience.`}
@@ -398,7 +398,7 @@ function ConfigureStep({
         />
       ))}
 
-      <hr className="border-border-muted" />
+      <hr className="stg:border-border-muted" />
 
       {/* Common fields */}
       <FieldInput
@@ -422,20 +422,20 @@ function ConfigureStep({
       />
 
       {discoveryError && (
-        <p className="text-destructive text-[0.65rem]" role="alert">
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(discoveryError)}
         </p>
       )}
 
-      <div className="flex items-center gap-2 pt-1">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:pt-1">
         <button
           type="button"
           onClick={onContinue}
           disabled={!canContinue}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isLoading && <SpinnerIcon />}
@@ -514,10 +514,10 @@ function ReviewStep({
     !isCreating;
 
   return (
-    <form onSubmit={onSubmit} className="space-y-3">
+    <form onSubmit={onSubmit} className="stg:space-y-3">
       {discoveryFailed && (
         <div
-          className="rounded-md border border-warning/30 bg-warning/5 px-3 py-2 text-xs text-warning-foreground"
+          className="stg:rounded-md stg:border stg:border-warning/30 stg:bg-warning/5 stg:px-3 stg:py-2 stg:text-xs stg:text-warning-foreground"
           role="alert"
         >
           Auto-discovery could not reach the provider. Enter the
@@ -525,7 +525,7 @@ function ReviewStep({
         </div>
       )}
 
-      <p className="text-muted-foreground text-xs">
+      <p className="stg:text-muted-foreground stg:text-xs">
         Review the OIDC configuration. All fields are editable.
       </p>
 
@@ -596,19 +596,19 @@ function ReviewStep({
       />
 
       {createError && (
-        <p className="text-destructive text-[0.65rem]" role="alert">
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(createError)}
         </p>
       )}
 
-      <div className="flex items-center gap-2 pt-1">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:pt-1">
         <button
           type="submit"
           disabled={!canSubmit}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isCreating && <SpinnerIcon />}
@@ -657,47 +657,47 @@ function SuccessStep({
       : "viewer";
 
   return (
-    <div className="space-y-4">
-      <div className="rounded-md border border-primary/30 bg-primary-subtle px-3 py-2.5">
-        <p className="text-xs font-medium text-foreground">
+    <div className="stg:space-y-4">
+      <div className="stg:rounded-md stg:border stg:border-primary/30 stg:bg-primary-subtle stg:px-3 stg:py-2.5">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">
           {displayName} created successfully
         </p>
       </div>
 
-      <div className="space-y-2">
-        <p className="text-xs font-medium text-foreground">What happens next</p>
+      <div className="stg:space-y-2">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">What happens next</p>
 
         {isSso ? (
-          <p className="text-[0.65rem] text-muted-foreground">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             Users can sign in via SSO at{" "}
-            <span className="font-mono text-foreground">
+            <span className="stg:font-mono stg:text-foreground">
               /login?org={org}
             </span>
             . Accounts are auto-provisioned and granted the{" "}
-            <span className="font-medium text-foreground">viewer</span> role on
+            <span className="stg:font-medium stg:text-foreground">viewer</span> role on
             this organization.
           </p>
         ) : autoProvision && autoGrant ? (
-          <p className="text-[0.65rem] text-muted-foreground">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             Users authenticating with JWTs from this provider will be
             automatically provisioned and granted the{" "}
-            <span className="font-medium text-foreground">{roleName}</span> role
+            <span className="stg:font-medium stg:text-foreground">{roleName}</span> role
             on this organization. No additional setup is required.
           </p>
         ) : autoProvision ? (
-          <p className="text-[0.65rem] text-muted-foreground">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             Accounts are auto-provisioned on first authentication, but no
             organization role is granted automatically. Use the Members page to
             grant access.
           </p>
         ) : (
-          <p className="text-[0.65rem] text-muted-foreground">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             The trust relationship is configured. Accounts must be created
             manually before users can authenticate.
           </p>
         )}
 
-        <p className="text-[0.65rem] text-muted-foreground">
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
           To verify the setup, have a user authenticate with a JWT from this
           provider and confirm they can access the organization&apos;s resources.
         </p>
@@ -707,8 +707,8 @@ function SuccessStep({
         type="button"
         onClick={onDone}
         className={cn(
-          "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-          "bg-primary text-primary-foreground hover:bg-primary-hover",
+          "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+          "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
         )}
       >
         Done
@@ -745,8 +745,8 @@ function FieldInput({
   options?: readonly { readonly value: string; readonly label: string }[];
 }) {
   return (
-    <div className="space-y-1">
-      <label htmlFor={id} className="text-xs font-medium text-foreground">
+    <div className="stg:space-y-1">
+      <label htmlFor={id} className="stg:text-xs stg:font-medium stg:text-foreground">
         {label}
       </label>
       {type === "select" && options ? (
@@ -756,9 +756,9 @@ function FieldInput({
           onChange={(e) => onChange(e.target.value)}
           disabled={disabled}
           className={cn(
-            "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           {options.map((opt) => (
@@ -777,15 +777,15 @@ function FieldInput({
           disabled={disabled}
           required={required}
           className={cn(
-            "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+            "stg:placeholder:text-muted-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         />
       )}
       {hint && (
-        <p className="text-[0.65rem] text-muted-foreground">{hint}</p>
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">{hint}</p>
       )}
     </div>
   );
@@ -827,10 +827,10 @@ function JitProvisioningSection({
 }) {
   if (isSso) {
     return (
-      <div className="rounded-md border border-border-muted bg-muted-faint px-3 py-2">
-        <p className="text-[0.65rem] text-muted-foreground">
+      <div className="stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:px-3 stg:py-2">
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
           SSO providers automatically provision accounts and grant the{" "}
-          <span className="font-medium text-foreground">viewer</span> role on
+          <span className="stg:font-medium stg:text-foreground">viewer</span> role on
           the owning organization. JIT provisioning settings are not applicable.
         </p>
       </div>
@@ -838,12 +838,12 @@ function JitProvisioningSection({
   }
 
   return (
-    <fieldset className="space-y-2.5" disabled={disabled}>
-      <hr className="border-border-muted" />
-      <legend className="text-xs font-medium text-foreground">
+    <fieldset className="stg:space-y-2.5" disabled={disabled}>
+      <hr className="stg:border-border-muted" />
+      <legend className="stg:text-xs stg:font-medium stg:text-foreground">
         JIT provisioning
       </legend>
-      <p className="text-[0.65rem] text-muted-foreground">
+      <p className="stg:text-[0.65rem] stg:text-muted-foreground">
         Configure automatic account creation and role assignment for users
         authenticating with this provider.
       </p>
@@ -911,8 +911,8 @@ function ToggleSwitch({
   disabled?: boolean;
 }) {
   return (
-    <div className="space-y-0.5">
-      <div className="flex items-center gap-2">
+    <div className="stg:space-y-0.5">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="button"
           role="switch"
@@ -920,22 +920,22 @@ function ToggleSwitch({
           onClick={() => onChange(!checked)}
           disabled={disabled}
           className={cn(
-            "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors",
-            checked ? "bg-primary" : "bg-muted",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:relative stg:inline-flex stg:h-5 stg:w-9 stg:shrink-0 stg:cursor-pointer stg:rounded-full stg:border-2 stg:border-transparent stg:transition-colors",
+            checked ? "stg:bg-primary" : "stg:bg-muted",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           <span
             className={cn(
-              "pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-sm ring-0 transition-transform",
-              checked ? "translate-x-4" : "translate-x-0",
+              "stg:pointer-events-none stg:inline-block stg:h-4 stg:w-4 stg:rounded-full stg:bg-background stg:shadow-sm stg:ring-0 stg:transition-transform",
+              checked ? "stg:translate-x-4" : "stg:translate-x-0",
             )}
           />
         </button>
-        <span className="text-xs font-medium text-foreground">{label}</span>
+        <span className="stg:text-xs stg:font-medium stg:text-foreground">{label}</span>
       </div>
       {hint && (
-        <p className="pl-11 text-[0.65rem] text-muted-foreground">{hint}</p>
+        <p className="stg:pl-11 stg:text-[0.65rem] stg:text-muted-foreground">{hint}</p>
       )}
     </div>
   );
@@ -956,9 +956,9 @@ function TextButton({
       onClick={onClick}
       disabled={disabled}
       className={cn(
-        "rounded-md px-2.5 py-1.5 text-xs",
-        "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-        "disabled:pointer-events-none disabled:opacity-50",
+        "stg:rounded-md stg:px-2.5 stg:py-1.5 stg:text-xs",
+        "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
       )}
     >
       {children}
@@ -990,7 +990,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/identity-provider/ProviderPicker.tsx

@@ -32,7 +32,7 @@ export interface ProviderPickerProps {
 export function ProviderPicker({ onSelect, className }: ProviderPickerProps) {
   return (
     <div
-      className={cn("grid grid-cols-2 gap-2 sm:grid-cols-3", className)}
+      className={cn("stg:grid stg:grid-cols-2 stg:gap-2 stg:sm:grid-cols-3", className)}
       role="listbox"
       aria-label="Choose an identity provider"
     >
@@ -44,20 +44,20 @@ export function ProviderPicker({ onSelect, className }: ProviderPickerProps) {
           aria-selected={false}
           onClick={() => onSelect(preset)}
           className={cn(
-            "flex flex-col items-start gap-2 rounded-lg px-3 py-3 text-left transition-colors",
-            "border hover:border-primary/60 hover:bg-accent-hover",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            "stg:flex stg:flex-col stg:items-start stg:gap-2 stg:rounded-lg stg:px-3 stg:py-3 stg:text-left stg:transition-colors",
+            "stg:border stg:hover:border-primary/60 stg:hover:bg-accent-hover",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
             preset.id === "custom"
-              ? "border-dashed border-border"
-              : "border-border-muted",
+              ? "stg:border-dashed stg:border-border"
+              : "stg:border-border-muted",
           )}
         >
           <ProviderIcon presetId={preset.id} />
-          <div className="min-w-0">
-            <span className="block text-sm font-medium text-foreground">
+          <div className="stg:min-w-0">
+            <span className="stg:block stg:text-sm stg:font-medium stg:text-foreground">
               {preset.label}
             </span>
-            <span className="block text-[0.65rem] leading-tight text-muted-foreground">
+            <span className="stg:block stg:text-[0.65rem] stg:leading-tight stg:text-muted-foreground">
               {preset.description}
             </span>
           </div>
@@ -74,7 +74,7 @@ export function ProviderPicker({ onSelect, className }: ProviderPickerProps) {
 function ProviderIcon({ presetId }: { presetId: string }) {
   const Icon = ICON_MAP[presetId] ?? DefaultIcon;
   return (
-    <span className="flex size-8 items-center justify-center rounded-lg bg-muted">
+    <span className="stg:flex stg:size-8 stg:items-center stg:justify-center stg:rounded-lg stg:bg-muted">
       <Icon />
     </span>
   );
@@ -91,7 +91,7 @@ const ICON_MAP: Record<string, React.ComponentType> = {
 
 function LockIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <rect x="3.5" y="7" width="9" height="7" rx="1.5" />
       <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
     </svg>
@@ -100,7 +100,7 @@ function LockIcon() {
 
 function KeyIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <circle cx="5.5" cy="10" r="3" />
       <path d="M8 8l5.5-5.5M11 5l2-0.5L13.5 2.5" />
     </svg>
@@ -109,7 +109,7 @@ function KeyIcon() {
 
 function GlobeIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <circle cx="8" cy="8" r="6" />
       <path d="M2 8h12M8 2c2 2 2.5 4 2.5 6S10 14 8 14c-2-2-2.5-4-2.5-6S6 2 8 2z" />
     </svg>
@@ -118,7 +118,7 @@ function GlobeIcon() {
 
 function CloudIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <path d="M4 12.5h8.5a3 3 0 0 0 0-6 .5.5 0 0 1-.5-.4A4.5 4.5 0 0 0 3.5 8v.5a3 3 0 0 0 .5 6z" />
     </svg>
   );
@@ -126,7 +126,7 @@ function CloudIcon() {
 
 function UsersIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <circle cx="6" cy="5" r="2.5" />
       <path d="M1.5 14c0-2.5 2-4.5 4.5-4.5S10.5 11.5 10.5 14" />
       <circle cx="11.5" cy="5.5" r="1.5" />
@@ -137,7 +137,7 @@ function UsersIcon() {
 
 function CodeIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <path d="M5 4.5L1.5 8 5 11.5M11 4.5l3.5 3.5-3.5 3.5M9 2.5l-2 11" />
     </svg>
   );
@@ -145,7 +145,7 @@ function CodeIcon() {
 
 function DefaultIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <circle cx="8" cy="8" r="6" />
     </svg>
   );

package/src/identity-provider/SsoLoginPrompt.tsx

@@ -125,7 +125,7 @@ export function SsoLoginPrompt({
 
   return (
     <div
-      className={cn("w-full", className)}
+      className={cn("stg:w-full", className)}
       role="region"
       aria-label="SSO sign-in"
     >
@@ -195,10 +195,10 @@ interface OrgInputFormProps {
 const OrgInputForm = forwardRef<HTMLInputElement, OrgInputFormProps>(
   function OrgInputForm({ value, onChange, onSubmit }, ref) {
     return (
-      <form onSubmit={onSubmit} className="space-y-3">
+      <form onSubmit={onSubmit} className="stg:space-y-3">
         <label
           htmlFor="sso-org-input"
-          className="block text-sm font-medium text-foreground"
+          className="stg:block stg:text-sm stg:font-medium stg:text-foreground"
         >
           Organization
         </label>
@@ -212,22 +212,22 @@ const OrgInputForm = forwardRef<HTMLInputElement, OrgInputFormProps>(
           autoComplete="organization"
           spellCheck={false}
           className={cn(
-            "block w-full rounded-md border border-input bg-background px-3 py-2",
-            "text-sm text-foreground placeholder:text-muted-foreground",
-            "focus:outline-none focus:ring-2 focus:ring-ring",
-            "transition-colors",
+            "stg:block stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-3 stg:py-2",
+            "stg:text-sm stg:text-foreground stg:placeholder:text-muted-foreground",
+            "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
+            "stg:transition-colors",
           )}
         />
         <button
           type="submit"
           disabled={!value.trim()}
           className={cn(
-            "w-full rounded-md px-4 py-2 text-sm font-medium",
-            "bg-primary text-primary-foreground",
-            "hover:bg-primary-hover",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
-            "transition-colors",
+            "stg:w-full stg:rounded-md stg:px-4 stg:py-2 stg:text-sm stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground",
+            "stg:hover:bg-primary-hover",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+            "stg:transition-colors",
           )}
         >
           Continue
@@ -240,13 +240,13 @@ const OrgInputForm = forwardRef<HTMLInputElement, OrgInputFormProps>(
 function LoadingState({ org }: { org: string }) {
   return (
     <div
-      className="flex flex-col items-center gap-3 py-4"
+      className="stg:flex stg:flex-col stg:items-center stg:gap-3 stg:py-4"
       aria-busy="true"
       aria-label={`Looking up SSO provider for ${org}`}
     >
       <SpinnerIcon />
-      <p className="text-sm text-muted-foreground">
-        Looking up <span className="font-medium text-foreground">{org}</span>&hellip;
+      <p className="stg:text-sm stg:text-muted-foreground">
+        Looking up <span className="stg:font-medium stg:text-foreground">{org}</span>&hellip;
       </p>
     </div>
   );
@@ -266,11 +266,11 @@ function FoundState({
   onChangeOrg: () => void;
 }) {
   return (
-    <div className="space-y-4">
-      <div className="text-center">
-        <p className="text-xs text-muted-foreground">
+    <div className="stg:space-y-4">
+      <div className="stg:text-center">
+        <p className="stg:text-xs stg:text-muted-foreground">
           Signing in to{" "}
-          <span className="font-medium text-foreground">{org}</span>
+          <span className="stg:font-medium stg:text-foreground">{org}</span>
         </p>
       </div>
 
@@ -279,12 +279,12 @@ function FoundState({
         onClick={onClick}
         onKeyDown={onKeyDown}
         className={cn(
-          "flex w-full items-center justify-center gap-2 rounded-md px-4 py-2.5",
-          "text-sm font-medium",
-          "bg-primary text-primary-foreground",
-          "hover:bg-primary-hover",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          "transition-colors",
+          "stg:flex stg:w-full stg:items-center stg:justify-center stg:gap-2 stg:rounded-md stg:px-4 stg:py-2.5",
+          "stg:text-sm stg:font-medium",
+          "stg:bg-primary stg:text-primary-foreground",
+          "stg:hover:bg-primary-hover",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          "stg:transition-colors",
         )}
       >
         <SsoShieldIcon />
@@ -294,7 +294,7 @@ function FoundState({
       <button
         type="button"
         onClick={onChangeOrg}
-        className="block w-full text-center text-xs text-muted-foreground hover:text-foreground transition-colors"
+        className="stg:block stg:w-full stg:text-center stg:text-xs stg:text-muted-foreground stg:hover:text-foreground stg:transition-colors"
       >
         Not your organization? Change
       </button>
@@ -310,15 +310,15 @@ function NotFoundState({
   onBack: () => void;
 }) {
   return (
-    <div className="space-y-3 text-center">
-      <p className="text-sm text-muted-foreground">
+    <div className="stg:space-y-3 stg:text-center">
+      <p className="stg:text-sm stg:text-muted-foreground">
         No SSO provider configured for{" "}
-        <span className="font-medium text-foreground">{org}</span>.
+        <span className="stg:font-medium stg:text-foreground">{org}</span>.
       </p>
       <button
         type="button"
         onClick={onBack}
-        className="text-xs text-primary hover:text-primary-hover transition-colors"
+        className="stg:text-xs stg:text-primary stg:hover:text-primary-hover stg:transition-colors"
       >
         Try a different organization
       </button>
@@ -336,16 +336,16 @@ function ErrorState({
   onBack: () => void;
 }) {
   return (
-    <div className="space-y-3 text-center" role="alert">
-      <p className="text-sm text-destructive">{getUserMessage(error)}</p>
-      <div className="flex items-center justify-center gap-3">
+    <div className="stg:space-y-3 stg:text-center" role="alert">
+      <p className="stg:text-sm stg:text-destructive">{getUserMessage(error)}</p>
+      <div className="stg:flex stg:items-center stg:justify-center stg:gap-3">
         <button
           type="button"
           onClick={onRetry}
           className={cn(
-            "rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "transition-colors",
+            "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:transition-colors",
           )}
         >
           Retry
@@ -353,7 +353,7 @@ function ErrorState({
         <button
           type="button"
           onClick={onBack}
-          className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+          className="stg:text-xs stg:text-muted-foreground stg:hover:text-foreground stg:transition-colors"
         >
           Back
         </button>
@@ -376,7 +376,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin text-muted-foreground"
+      className="stg:animate-spin stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />