@stigmer/react 3.9.0 → 3.11.0

package/src/identity-provider/IdentityProviderDetailPanel.tsx

@@ -177,26 +177,26 @@ export function IdentityProviderDetailPanel({
   const updatedAt = identityProvider.status?.audit?.specAudit?.updatedAt;
 
   return (
-    <div className={cn("space-y-4", className)}>
+    <div className={cn("stg:space-y-4", className)}>
       {/* Header */}
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:min-w-0">
           {onBack && (
             <button
               type="button"
               onClick={onBack}
-              className="text-muted-foreground hover:text-foreground mb-1 flex items-center gap-1 text-xs transition-colors"
+              className="stg:text-muted-foreground stg:hover:text-foreground stg:mb-1 stg:flex stg:items-center stg:gap-1 stg:text-xs stg:transition-colors"
             >
               <ArrowLeftIcon />
               Back to list
             </button>
           )}
-          <h3 className="text-foreground truncate text-sm font-semibold">
+          <h3 className="stg:text-foreground stg:truncate stg:text-sm stg:font-semibold">
             {spec?.displayName || meta?.name || "Identity Provider"}
           </h3>
-          <div className="flex items-center gap-2">
+          <div className="stg:flex stg:items-center stg:gap-2">
             {meta?.slug && (
-              <span className="text-muted-foreground font-mono text-xs">
+              <span className="stg:text-muted-foreground stg:font-mono stg:text-xs">
                 {meta.slug}
               </span>
             )}
@@ -209,9 +209,9 @@ export function IdentityProviderDetailPanel({
             type="button"
             onClick={enterEdit}
             className={cn(
-              "shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "transition-colors",
+              "stg:shrink-0 stg:rounded-md stg:px-2.5 stg:py-1.5 stg:text-xs stg:font-medium",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:transition-colors",
             )}
           >
             Edit
@@ -228,7 +228,7 @@ export function IdentityProviderDetailPanel({
           updatedAt={updatedAt}
         />
       ) : (
-        <form onSubmit={handleSave} className="space-y-3">
+        <form onSubmit={handleSave} className="stg:space-y-3">
           <FieldInput
             id="stgm-idp-edit-name"
             label="Display name"
@@ -277,7 +277,7 @@ export function IdentityProviderDetailPanel({
           />
 
           {/* SSO toggle */}
-          <div className="flex items-center gap-2">
+          <div className="stg:flex stg:items-center stg:gap-2">
             <button
               type="button"
               role="switch"
@@ -285,19 +285,19 @@ export function IdentityProviderDetailPanel({
               onClick={() => setIsSso((v) => !v)}
               disabled={isUpdating}
               className={cn(
-                "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors",
-                isSso ? "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",
+                isSso ? "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",
-                  isSso ? "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",
+                  isSso ? "stg:translate-x-4" : "stg:translate-x-0",
                 )}
               />
             </button>
-            <span className="text-xs font-medium text-foreground">
+            <span className="stg:text-xs stg:font-medium stg:text-foreground">
               SSO provider
             </span>
           </div>
@@ -330,19 +330,19 @@ export function IdentityProviderDetailPanel({
           />
 
           {error && (
-            <p className="text-destructive text-[0.65rem]" role="alert">
+            <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
               {getUserMessage(error)}
             </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={!canSave}
               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",
               )}
             >
               {isUpdating && <SpinnerIcon />}
@@ -353,9 +353,9 @@ export function IdentityProviderDetailPanel({
               onClick={cancelEdit}
               disabled={isUpdating}
               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",
               )}
             >
               Cancel
@@ -383,7 +383,7 @@ function ViewMode({
   updatedAt?: Timestamp;
 }) {
   return (
-    <dl className="space-y-2.5">
+    <dl className="stg:space-y-2.5">
       <Field label="JWKS URI" value={spec?.jwksUri} mono />
       <Field
         label="Allowed issuers"
@@ -414,7 +414,7 @@ function ViewMode({
       {/* JIT provisioning fields */}
       {!spec?.isSsoProvider && spec?.autoProvisionAccounts && (
         <>
-          <hr className="border-border-muted" />
+          <hr className="stg:border-border-muted" />
           <Field
             label="Auto-provision accounts"
             value={spec.autoProvisionAccounts ? "Enabled" : "Disabled"}
@@ -439,7 +439,7 @@ function ViewMode({
         </>
       )}
 
-      <div className="flex gap-6">
+      <div className="stg:flex stg:gap-6">
         {createdAt && (
           <Field
             label="Created"
@@ -469,13 +469,13 @@ function Field({
   if (!value) return null;
   return (
     <div>
-      <dt className="text-muted-foreground text-[0.65rem] font-medium">
+      <dt className="stg:text-muted-foreground stg:text-[0.65rem] stg:font-medium">
         {label}
       </dt>
       <dd
         className={cn(
-          "text-foreground mt-0.5 break-all text-xs",
-          mono && "font-mono",
+          "stg:text-foreground stg:mt-0.5 stg:break-all stg:text-xs",
+          mono && "stg:font-mono",
         )}
       >
         {value}
@@ -521,14 +521,14 @@ function CopyableField({
 
   return (
     <div>
-      <dt className="text-muted-foreground text-[0.65rem] font-medium">
+      <dt className="stg:text-muted-foreground stg:text-[0.65rem] stg:font-medium">
         {label}
       </dt>
-      <dd className="mt-0.5">
-        <div className="flex items-center gap-2">
+      <dd className="stg:mt-0.5">
+        <div className="stg:flex stg:items-center stg:gap-2">
           <span
             id={valueId}
-            className="text-foreground break-all font-mono text-xs select-all"
+            className="stg:text-foreground stg:break-all stg:font-mono stg:text-xs stg:select-all"
           >
             {value}
           </span>
@@ -536,9 +536,9 @@ function CopyableField({
             type="button"
             onClick={handleCopy}
             className={cn(
-              "shrink-0 rounded px-1.5 py-0.5 text-[0.6rem]",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "transition-colors",
+              "stg:shrink-0 stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem]",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:transition-colors",
             )}
             aria-label={`Copy ${label}`}
           >
@@ -546,7 +546,7 @@ function CopyableField({
           </button>
         </div>
         {hint && (
-          <p className="text-muted-foreground mt-0.5 text-[0.65rem]">
+          <p className="stg:text-muted-foreground stg:mt-0.5 stg:text-[0.65rem]">
             {hint}
           </p>
         )}
@@ -554,7 +554,7 @@ function CopyableField({
           role="status"
           aria-live="polite"
           aria-atomic="true"
-          className="sr-only"
+          className="stg:sr-only"
         >
           {copied && "SSO login URL copied to clipboard"}
         </div>
@@ -587,8 +587,8 @@ function FieldInput({
   required?: boolean;
 }) {
   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>
       <input
@@ -600,14 +600,14 @@ 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>
   );
@@ -620,14 +620,14 @@ function FieldInput({
 function ProvisioningModeBadge({ spec }: { spec: IdentityProvider["spec"] }) {
   if (spec?.isSsoProvider) {
     return (
-      <span className="inline-flex items-center rounded-full border border-primary/30 bg-primary-subtle px-2 py-0.5 text-[0.65rem] font-medium text-primary">
+      <span className="stg:inline-flex stg:items-center stg:rounded-full stg:border stg:border-primary/30 stg:bg-primary-subtle stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-primary">
         SSO
       </span>
     );
   }
   if (spec?.autoProvisionAccounts) {
     return (
-      <span className="inline-flex items-center rounded-full border border-primary/30 bg-primary-subtle px-2 py-0.5 text-[0.65rem] font-medium text-primary">
+      <span className="stg:inline-flex stg:items-center stg:rounded-full stg:border stg:border-primary/30 stg:bg-primary-subtle stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-primary">
         JIT
       </span>
     );
@@ -671,10 +671,10 @@ function JitEditSection({
 }) {
   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>
@@ -682,12 +682,12 @@ function JitEditSection({
   }
 
   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>
@@ -710,10 +710,10 @@ function JitEditSection({
 
       {autoGrant && (
         <>
-          <div className="space-y-1">
+          <div className="stg:space-y-1">
             <label
               htmlFor="stgm-idp-edit-grant-role"
-              className="text-xs font-medium text-foreground"
+              className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Auto-grant role
             </label>
@@ -723,9 +723,9 @@ function JitEditSection({
               onChange={(e) => onAutoGrantRoleChange(Number(e.target.value) as IamRole)}
               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",
               )}
             >
               {JIT_ROLE_OPTIONS.map((opt) => (
@@ -734,7 +734,7 @@ function JitEditSection({
                 </option>
               ))}
             </select>
-            <p className="text-[0.65rem] text-muted-foreground">
+            <p className="stg:text-[0.65rem] stg:text-muted-foreground">
               Role granted automatically — org admins can upgrade later
             </p>
           </div>
@@ -772,8 +772,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"
@@ -781,22 +781,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>
   );
@@ -856,7 +856,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/IdentityProviderListPanel.tsx

@@ -64,14 +64,14 @@ export function IdentityProviderListPanel({
   if (isLoading) {
     return (
       <div
-        className={cn("space-y-2", className)}
+        className={cn("stg:space-y-2", className)}
         aria-busy="true"
         aria-label="Loading identity providers"
       >
         {Array.from({ length: 2 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted-subtle h-14 animate-pulse rounded-lg"
+            className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg"
           />
         ))}
       </div>
@@ -80,7 +80,7 @@ export function IdentityProviderListPanel({
 
   if (error) {
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
         {getUserMessage(error)}
       </p>
     );
@@ -90,7 +90,7 @@ export function IdentityProviderListPanel({
     return (
       <p
         className={cn(
-          "text-muted-foreground py-4 text-center text-xs",
+          "stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs",
           className,
         )}
       >
@@ -101,7 +101,7 @@ export function IdentityProviderListPanel({
 
   return (
     <div
-      className={cn("space-y-2", className)}
+      className={cn("stg:space-y-2", className)}
       role="list"
       aria-label="Identity providers"
     >
@@ -172,28 +172,28 @@ function IdpRow({
     return (
       <div
         role="listitem"
-        className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive-subtle px-3 py-2.5"
+        className="stg:flex stg:items-center stg:justify-between stg:rounded-lg stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:px-3 stg:py-2.5"
       >
-        <div className="min-w-0 flex-1">
-          <p className="text-xs text-foreground">
-            Delete <span className="font-medium">{name}</span>?
+        <div className="stg:min-w-0 stg:flex-1">
+          <p className="stg:text-xs stg:text-foreground">
+            Delete <span className="stg:font-medium">{name}</span>?
           </p>
           {error && (
-            <p className="mt-0.5 text-[0.65rem] text-destructive">
+            <p className="stg:mt-0.5 stg:text-[0.65rem] stg:text-destructive">
               {getUserMessage(error)}
             </p>
           )}
         </div>
 
-        <div className="flex shrink-0 items-center gap-1.5">
+        <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1.5">
           <button
             type="button"
             onClick={handleDelete}
             disabled={isDeleting}
             className={cn(
-              "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-              "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+              "stg:bg-destructive stg:text-destructive-foreground stg:hover:bg-destructive-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             {isDeleting && <SpinnerIcon />}
@@ -204,9 +204,9 @@ function IdpRow({
             onClick={onCancelDelete}
             disabled={isDeleting}
             className={cn(
-              "rounded-md px-2.5 py-1 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 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",
             )}
           >
             Cancel
@@ -219,29 +219,29 @@ function IdpRow({
   return (
     <div
       role="listitem"
-      className="flex items-center gap-3 rounded-lg border border-border-muted px-3 py-2.5 hover:border-border transition-colors"
+      className="stg:flex stg:items-center stg:gap-3 stg:rounded-lg stg:border stg:border-border-muted stg:px-3 stg:py-2.5 stg:hover:border-border stg:transition-colors"
     >
       <ShieldIcon />
 
-      <div className="min-w-0 flex-1">
-        <span className="block truncate text-sm font-medium text-foreground">
+      <div className="stg:min-w-0 stg:flex-1">
+        <span className="stg:block stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
           {name}
         </span>
         {slug && (
-          <span className="block text-xs text-muted-foreground font-mono">
+          <span className="stg:block stg:text-xs stg:text-muted-foreground stg:font-mono">
             {slug}
           </span>
         )}
       </div>
 
-      <div className="hidden sm:flex shrink-0 items-center gap-3 text-xs text-muted-foreground">
+      <div className="stg:hidden stg:sm:flex stg:shrink-0 stg:items-center stg:gap-3 stg:text-xs stg:text-muted-foreground">
         {isSso && (
-          <span className="inline-flex items-center rounded-full border border-primary/30 bg-primary-subtle px-2 py-0.5 text-[0.65rem] font-medium text-primary">
+          <span className="stg:inline-flex stg:items-center stg:rounded-full stg:border stg:border-primary/30 stg:bg-primary-subtle stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-primary">
             SSO
           </span>
         )}
         {isJit && (
-          <span className="inline-flex items-center rounded-full border border-primary/30 bg-primary-subtle px-2 py-0.5 text-[0.65rem] font-medium text-primary">
+          <span className="stg:inline-flex stg:items-center stg:rounded-full stg:border stg:border-primary/30 stg:bg-primary-subtle stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-primary">
             JIT
           </span>
         )}
@@ -252,16 +252,16 @@ function IdpRow({
         )}
       </div>
 
-      <div className="flex shrink-0 items-center gap-1">
+      <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1">
         {onEdit && (
           <button
             type="button"
             onClick={onEdit}
             aria-label={`Edit ${name}`}
             className={cn(
-              "shrink-0 rounded p-1",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "transition-colors",
+              "stg:shrink-0 stg:rounded stg:p-1",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:transition-colors",
             )}
           >
             <PencilIcon />
@@ -272,9 +272,9 @@ function IdpRow({
           onClick={onConfirmDelete}
           aria-label={`Delete ${name}`}
           className={cn(
-            "shrink-0 rounded p-1",
-            "text-muted-foreground hover:text-destructive hover:bg-destructive-subtle",
-            "transition-colors",
+            "stg:shrink-0 stg:rounded stg:p-1",
+            "stg:text-muted-foreground stg:hover:text-destructive stg:hover:bg-destructive-subtle",
+            "stg:transition-colors",
           )}
         >
           <TrashIcon />
@@ -312,7 +312,7 @@ function ShieldIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
     >
       <path d="M8 1.5L2 4v4c0 3.5 2.5 5.5 6 7 3.5-1.5 6-3.5 6-7V4L8 1.5z" />
     </svg>
@@ -368,7 +368,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" />