Refactor EmbeddedFlowActionVariant: replace 'SOCIAL' with 'OUTLINED' for clarity; update SubmitButton and AuthOptionFactory to support new variant; add ArrowRightLeft icon component and register it in flowIconRegistry

Author: brionmario

packages/javascript/src/models/v2/embedded-flow-v2.ts

@@ -102,8 +102,8 @@ export enum EmbeddedFlowActionVariant {
   /** Secondary action button with moderate visual emphasis */
   Secondary = 'SECONDARY',
 
-  /** Social media action button (e.g., Google, Facebook) */
-  Social = 'SOCIAL',
+  /** Outlined action button for secondary emphasis */
+  Outlined = 'OUTLINED',
 
   /** Success action button for positive confirmations */
   Success = 'SUCCESS',

packages/react/src/components/adapters/SubmitButton.tsx

@@ -47,6 +47,7 @@ const ButtonComponent: FC<AdapterProps> = ({
       case 'TEXT':
         return {color: 'primary' as const, variant: 'text' as const};
       case 'SOCIAL':
+      case 'OUTLINED':
         return {color: 'primary' as const, variant: 'outline' as const};
       default:
         return {color: 'primary' as const, variant: 'solid' as const};

packages/react/src/components/presentation/auth/AuthOptionFactory.tsx

@@ -143,6 +143,7 @@ const createAuthComponentFromFlow = (
   options: {
     buttonClassName?: string;
     inputClassName?: string;
+    inStack?: boolean;
     key?: string | number;
     /** Flow metadata for resolving {{meta(...)}} expressions at render time */
     meta?: FlowMetadataResponse | null;
@@ -355,16 +356,18 @@ const createAuthComponentFromFlow = (
     }
 
     case EmbeddedFlowComponentType.Image: {
+      const explicitHeight: string = resolve(component.height?.toString());
+      const explicitWidth: string = resolve(component.width?.toString());
       return (
         <ImageComponent
           key={key}
           component={
             {
               config: {
                 alt: resolve(component.alt) || resolve(component.label) || 'Image',
-                height: resolve(component.height.toString()) || 'auto',
+                height: explicitHeight || (options.inStack ? '50' : 'auto'),
                 src: resolve(component.src),
-                width: resolve(component.width.toString()) || '100%',
+                width: explicitWidth || (options.inStack ? '50' : '100%'),
               },
             } as any
           }
@@ -418,6 +421,7 @@ const createAuthComponentFromFlow = (
               authType,
               {
                 ...options,
+                inStack: true,
                 key: childComponent.id || `${component.id}_${index}`,
               },
             ),

packages/react/src/components/primitives/Icons/ArrowRightLeft.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC} from 'react';
+
+export interface ArrowRightLeftProps {
+  /** Color of the icon stroke */
+  color?: string;
+  /** Icon size in pixels */
+  size?: number;
+}
+
+/**
+ * ArrowRightLeft Icon component (lucide-compatible).
+ */
+const ArrowRightLeft: FC<ArrowRightLeftProps> = ({color = 'currentColor', size = 24}: ArrowRightLeftProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="m16 3 4 4-4 4" />
+    <path d="M20 7H4" />
+    <path d="m8 21-4-4 4-4" />
+    <path d="M4 17h16" />
+  </svg>
+);
+
+ArrowRightLeft.displayName = 'ArrowRightLeft';
+
+export default ArrowRightLeft;

packages/react/src/components/primitives/Icons/flowIconRegistry.tsx

@@ -18,6 +18,7 @@
 
 import {FC} from 'react';
 import ArrowLeftRight from './ArrowLeftRight';
+import ArrowRightLeft from './ArrowRightLeft';
 
 export interface FlowIconProps {
   color?: string;
@@ -30,6 +31,7 @@ export interface FlowIconProps {
  */
 const flowIconRegistry: Record<string, FC<FlowIconProps>> = {
   ArrowLeftRight,
+  ArrowRightLeft,
 };
 
 export default flowIconRegistry;