@forgerock/login-widget 1.2.0-beta.9 → 1.2.1

package/index.cjs

@@ -1,13 +1,13 @@
 /**
  * @forgerock/login-widget
  *
- * Copyright (c) 2023 ForgeRock. All rights reserved.
+ * Copyright (c) 2024 ForgeRock. All rights reserved.
  * This software may be modified and distributed under the terms
  * of the MIT license.
  *
  * MIT License
  *
- * Copyright (c) 2023
+ * Copyright (c) 2024
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -69,14 +69,6 @@ function is_function(thing) {
 function safe_not_equal(a, b) {
     return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
-let src_url_equal_anchor;
-function src_url_equal(element_src, url) {
-    if (!src_url_equal_anchor) {
-        src_url_equal_anchor = document.createElement('a');
-    }
-    src_url_equal_anchor.href = url;
-    return element_src === src_url_equal_anchor.href;
-}
 function is_empty(obj) {
     return Object.keys(obj).length === 0;
 }
@@ -11944,6 +11936,7 @@ const journeyStore = writable({
     step: null,
     successful: false,
     response: null,
+    recaptchaAction: null,
 });
 /**
  * @function initialize - Initializes the journey store
@@ -11953,7 +11946,7 @@ const journeyStore = writable({
 function initialize$4(initOptions) {
     const stack = initializeStack();
     let stepNumber = 0;
-    async function next(prevStep = null, nextOptions, resumeUrl) {
+    async function next(prevStep, nextOptions, resumeUrl) {
         if (!Config.get().serverConfig?.baseUrl) {
             logErrorAndThrow('missingBaseUrl');
         }
@@ -11983,6 +11976,7 @@ function initialize$4(initOptions) {
             step: prevStep,
             successful: false,
             response: null,
+            recaptchaAction: nextOptions?.recaptchaAction,
         });
         try {
             if (resumeUrl) {
@@ -12045,6 +12039,7 @@ function initialize$4(initOptions) {
                 step: nextStep,
                 successful: false,
                 response: null,
+                recaptchaAction: nextOptions?.recaptchaAction,
             });
         }
         else if (nextStep.type === StepType.LoginSuccess) {
@@ -12061,6 +12056,7 @@ function initialize$4(initOptions) {
                 step: null,
                 successful: true,
                 response: nextStep.payload,
+                recaptchaAction: nextOptions?.recaptchaAction,
             });
         }
         else if (nextStep.type === StepType.LoginFailure) {
@@ -12163,6 +12159,7 @@ function initialize$4(initOptions) {
                     step: restartedStep,
                     successful: false,
                     response: null,
+                    recaptchaAction: null,
                 });
             }
             else if (restartedStep.type === StepType.LoginSuccess) {
@@ -12174,6 +12171,7 @@ function initialize$4(initOptions) {
                     step: null,
                     successful: true,
                     response: restartedStep.payload,
+                    recaptchaAction: null,
                 });
             }
             else {
@@ -12190,6 +12188,7 @@ function initialize$4(initOptions) {
                     step: null,
                     successful: false,
                     response: restartedStep.payload,
+                    recaptchaAction: null,
                 });
             }
         }
@@ -12221,6 +12220,9 @@ function initialize$4(initOptions) {
                 };
             }
         }
+        if (!startOptions?.recaptchaAction && startOptions?.tree) {
+            startOptions.recaptchaAction = startOptions.tree;
+        }
         await stack.push(startOptions);
         await next(undefined, startOptions);
     }
@@ -12233,6 +12235,7 @@ function initialize$4(initOptions) {
             step: null,
             successful: false,
             response: null,
+            recaptchaAction: null,
         });
     }
     return {
@@ -12455,6 +12458,7 @@ const styleSchema = z
     .object({
     checksAndRadios: z.union([z.literal('animated'), z.literal('standard')]).optional(),
     labels: z.union([z.literal('floating').optional(), z.literal('stacked')]).optional(),
+    showPassword: z.union([z.literal('none'), z.literal('button'), z.literal('checkbox')]).optional(),
     logo: logoSchema.optional(),
     sections: z
         .object({
@@ -12474,6 +12478,7 @@ styleSchema.partial();
 const fallbackStyles = {
     checksAndRadios: 'animated',
     labels: 'floating',
+    showPassword: 'button',
     logo: undefined,
     sections: undefined,
     stage: undefined,
@@ -12487,8 +12492,19 @@ const styleStore = writable(fallbackStyles);
  */
 function initialize(customStyle) {
     if (customStyle) {
-        styleSchema.parse(customStyle);
-        styleStore.set(customStyle);
+        /*
+          Helper function to safely assign keys to strict object
+         */
+        const accessStrictType = (str) => {
+            return customStyle[str];
+        };
+        const newStyleConfig = Object.keys(customStyle).reduce((acc, key) => {
+            if (accessStrictType(key) === undefined || accessStrictType(key) === null) {
+                return acc;
+            }
+            return { ...acc, [key]: accessStrictType(key) };
+        }, fallbackStyles);
+        styleStore.set(newStyleConfig);
     }
     else {
         styleStore.set(fallbackStyles);
@@ -12650,6 +12666,7 @@ function widgetApiFactory(componentApi) {
             }
             else {
                 journeyStore.start({
+                    recaptchaAction: startOptions?.recaptchaAction,
                     ...startOptions?.forgerock,
                     // Only include a `tree` property if the `journey` options prop is truthy
                     ...(startOptions?.journey && { tree: startOptions?.journey }),
@@ -12837,7 +12854,7 @@ function create_else_block$d(ctx) {
 }
 
 // (11:0) {#if html}
-function create_if_block$v(ctx) {
+function create_if_block$w(ctx) {
 	let current;
 	const default_slot_template = /*#slots*/ ctx[5].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[4], null);
@@ -12939,7 +12956,7 @@ function create_fragment$18(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$v, create_else_block$d];
+	const if_block_creators = [create_if_block$w, create_else_block$d];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -13154,7 +13171,7 @@ function create_else_block$c(ctx) {
 			}
 		});
 
-	let if_block = /*$styleStore*/ ctx[5]?.logo && create_if_block_1$f(ctx);
+	let if_block = /*$styleStore*/ ctx[5]?.logo && create_if_block_1$h(ctx);
 
 	return {
 		c() {
@@ -13200,7 +13217,7 @@ function create_else_block$c(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_1$f(ctx);
+					if_block = create_if_block_1$h(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -13235,7 +13252,7 @@ function create_else_block$c(ctx) {
 }
 
 // (39:2) {#if withHeader}
-function create_if_block$u(ctx) {
+function create_if_block$v(ctx) {
 	let div1;
 	let div0;
 	let div0_style_value;
@@ -13357,7 +13374,7 @@ function create_default_slot_1$i(ctx) {
 }
 
 // (77:6) {#if $styleStore?.logo}
-function create_if_block_1$f(ctx) {
+function create_if_block_1$h(ctx) {
 	let div;
 	let div_style_value;
 
@@ -13419,7 +13436,7 @@ function create_fragment$16(ctx) {
 	let div;
 	let dialog_class_value;
 	let current;
-	const if_block_creators = [create_if_block$u, create_else_block$c];
+	const if_block_creators = [create_if_block$v, create_else_block$c];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -13947,7 +13964,7 @@ function create_else_block$b(ctx) {
 }
 
 // (44:33) 
-function create_if_block_1$e(ctx) {
+function create_if_block_1$g(ctx) {
 	let warningicon;
 	let current;
 	warningicon = new Warning_icon({});
@@ -13976,7 +13993,7 @@ function create_if_block_1$e(ctx) {
 }
 
 // (42:4) {#if type === 'error'}
-function create_if_block$t(ctx) {
+function create_if_block$u(ctx) {
 	let alerticon;
 	let current;
 	alerticon = new Alert_icon({});
@@ -14014,7 +14031,7 @@ function create_fragment$12(ctx) {
 	let div_class_value;
 	let div_role_value;
 	let current;
-	const if_block_creators = [create_if_block$t, create_if_block_1$e, create_else_block$b];
+	const if_block_creators = [create_if_block$u, create_if_block_1$g, create_else_block$b];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -14254,7 +14271,7 @@ class Spinner extends SvelteComponent {
 
 /* src/lib/components/primitives/button/button.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$s(ctx) {
+function create_if_block$t(ctx) {
 	let spinner;
 	let current;
 
@@ -14312,7 +14329,7 @@ function create_fragment$10(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = /*busy*/ ctx[0] && create_if_block$s();
+	let if_block = /*busy*/ ctx[0] && create_if_block$t();
 	const default_slot_template = /*#slots*/ ctx[7].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
 	const default_slot_or_fallback = default_slot || fallback_block$1();
@@ -14354,7 +14371,7 @@ function create_fragment$10(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$s();
+					if_block = create_if_block$t();
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(button, t);
@@ -14757,7 +14774,7 @@ function create_else_block$a(ctx) {
 }
 
 // (10:0) {#if html}
-function create_if_block$r(ctx) {
+function create_if_block$s(ctx) {
 	let current;
 	const default_slot_template = /*#slots*/ ctx[4].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[3], null);
@@ -14859,7 +14876,7 @@ function create_fragment$_(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$r, create_else_block$a];
+	const if_block_creators = [create_if_block$s, create_else_block$a];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -15054,7 +15071,7 @@ class Shield_icon extends SvelteComponent {
 
 /* src/lib/journey/stages/_utilities/back-to.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$q(ctx) {
+function create_if_block$r(ctx) {
 	let p;
 	let button;
 	let t_value = interpolate(/*string*/ ctx[1]) + "";
@@ -15092,7 +15109,7 @@ function create_if_block$q(ctx) {
 
 function create_fragment$Y(ctx) {
 	let if_block_anchor;
-	let if_block = /*$stack*/ ctx[2].length > 1 && create_if_block$q(ctx);
+	let if_block = /*$stack*/ ctx[2].length > 1 && create_if_block$r(ctx);
 
 	return {
 		c() {
@@ -15108,7 +15125,7 @@ function create_fragment$Y(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$q(ctx);
+					if_block = create_if_block$r(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -15631,7 +15648,7 @@ function getAttributeValidationFailureText(callback) {
 
 /* src/lib/components/primitives/message/input-message.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$p(ctx) {
+function create_if_block$q(ctx) {
 	let p;
 	let p_class_value;
 	let p_id_value;
@@ -15664,7 +15681,7 @@ function create_if_block$p(ctx) {
 
 function create_fragment$X(ctx) {
 	let if_block_anchor;
-	let if_block = /*dirtyMessage*/ ctx[1] && create_if_block$p(ctx);
+	let if_block = /*dirtyMessage*/ ctx[1] && create_if_block$q(ctx);
 
 	return {
 		c() {
@@ -15680,7 +15697,7 @@ function create_fragment$X(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$p(ctx);
+					if_block = create_if_block$q(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -17588,7 +17605,7 @@ function get_each_context$a(ctx, list, i) {
 }
 
 // (39:0) {#if labelOrder === 'first'}
-function create_if_block_1$d(ctx) {
+function create_if_block_1$f(ctx) {
 	let label_1;
 	let current;
 
@@ -17697,7 +17714,7 @@ function create_each_block$a(ctx) {
 }
 
 // (61:0) {#if labelOrder === 'last'}
-function create_if_block$o(ctx) {
+function create_if_block$p(ctx) {
 	let label_1;
 	let current;
 
@@ -17779,7 +17796,7 @@ function create_fragment$O(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block0 = /*labelOrder*/ ctx[7] === 'first' && create_if_block_1$d(ctx);
+	let if_block0 = /*labelOrder*/ ctx[7] === 'first' && create_if_block_1$f(ctx);
 	let each_value = /*options*/ ctx[8];
 	let each_blocks = [];
 
@@ -17787,7 +17804,7 @@ function create_fragment$O(ctx) {
 		each_blocks[i] = create_each_block$a(get_each_context$a(ctx, each_value, i));
 	}
 
-	let if_block1 = /*labelOrder*/ ctx[7] === 'last' && create_if_block$o(ctx);
+	let if_block1 = /*labelOrder*/ ctx[7] === 'last' && create_if_block$p(ctx);
 
 	return {
 		c() {
@@ -17843,7 +17860,7 @@ function create_fragment$O(ctx) {
 						transition_in(if_block0, 1);
 					}
 				} else {
-					if_block0 = create_if_block_1$d(ctx);
+					if_block0 = create_if_block_1$f(ctx);
 					if_block0.c();
 					transition_in(if_block0, 1);
 					if_block0.m(t0.parentNode, t0);
@@ -17911,7 +17928,7 @@ function create_fragment$O(ctx) {
 						transition_in(if_block1, 1);
 					}
 				} else {
-					if_block1 = create_if_block$o(ctx);
+					if_block1 = create_if_block$p(ctx);
 					if_block1.c();
 					transition_in(if_block1, 1);
 					if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
@@ -18417,7 +18434,7 @@ function create_else_block$9(ctx) {
 }
 
 // (52:0) {#if callbackMetadata?.platform?.displayType === 'radio'}
-function create_if_block$n(ctx) {
+function create_if_block$o(ctx) {
 	let radio;
 	let current;
 
@@ -18472,7 +18489,7 @@ function create_fragment$L(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$n, create_else_block$9];
+	const if_block_creators = [create_if_block$o, create_else_block$9];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -18794,12 +18811,12 @@ function create_else_block_1(ctx) {
 }
 
 // (80:0) {#if !stepMetadata?.derived.isStepSelfSubmittable()}
-function create_if_block$m(ctx) {
+function create_if_block$n(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block_1$c, create_else_block$8];
+	const if_block_creators = [create_if_block_1$e, create_else_block$8];
 	const if_blocks = [];
 
 	function select_block_type_1(ctx, dirty) {
@@ -18864,7 +18881,7 @@ function create_if_block$m(ctx) {
 }
 
 // (104:6) <Button         style={options.length > 1 && defaultChoice === Number(opt.value) ? 'primary' : buttonStyle}         type="button"         width="auto"         onClick={() => setBtnValue(Number(opt.value))}       >
-function create_default_slot_2$6(ctx) {
+function create_default_slot_2$8(ctx) {
 	let t0_value = /*opt*/ ctx[15].text + "";
 	let t0;
 	let t1;
@@ -18905,7 +18922,7 @@ function create_each_block$9(ctx) {
 				type: "button",
 				width: "auto",
 				onClick: func,
-				$$slots: { default: [create_default_slot_2$6] },
+				$$slots: { default: [create_default_slot_2$8] },
 				$$scope: { ctx }
 			}
 		});
@@ -19087,7 +19104,7 @@ function create_else_block$8(ctx) {
 }
 
 // (81:2) {#if options.length > 1}
-function create_if_block_1$c(ctx) {
+function create_if_block_1$e(ctx) {
 	let select;
 	let current;
 
@@ -19160,7 +19177,7 @@ function create_fragment$J(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$m, create_else_block_1];
+	const if_block_creators = [create_if_block$n, create_else_block_1];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -19794,7 +19811,7 @@ function create_if_block_3$8(ctx) {
 }
 
 // (97:0) {#if type === 'phone'}
-function create_if_block_2$9(ctx) {
+function create_if_block_2$a(ctx) {
 	let input;
 	let input_aria_describedby_value;
 	let input_class_value;
@@ -19874,7 +19891,7 @@ function create_if_block_2$9(ctx) {
 }
 
 // (113:0) {#if type === 'text'}
-function create_if_block_1$b(ctx) {
+function create_if_block_1$d(ctx) {
 	let input;
 	let input_aria_describedby_value;
 	let input_class_value;
@@ -19954,7 +19971,7 @@ function create_if_block_1$b(ctx) {
 }
 
 // (129:0) {#if labelOrder === 'last'}
-function create_if_block$l(ctx) {
+function create_if_block$m(ctx) {
 	let label_1;
 	let current;
 
@@ -20036,9 +20053,9 @@ function create_fragment$I(ctx) {
 	let if_block2 = /*type*/ ctx[11] === 'email' && create_if_block_5$2(ctx);
 	let if_block3 = /*type*/ ctx[11] === 'number' && create_if_block_4$5(ctx);
 	let if_block4 = /*type*/ ctx[11] === 'password' && create_if_block_3$8(ctx);
-	let if_block5 = /*type*/ ctx[11] === 'phone' && create_if_block_2$9(ctx);
-	let if_block6 = /*type*/ ctx[11] === 'text' && create_if_block_1$b(ctx);
-	let if_block7 = /*labelOrder*/ ctx[6] === 'last' && create_if_block$l(ctx);
+	let if_block5 = /*type*/ ctx[11] === 'phone' && create_if_block_2$a(ctx);
+	let if_block6 = /*type*/ ctx[11] === 'text' && create_if_block_1$d(ctx);
+	let if_block7 = /*labelOrder*/ ctx[6] === 'last' && create_if_block$m(ctx);
 
 	return {
 		c() {
@@ -20158,7 +20175,7 @@ function create_fragment$I(ctx) {
 				if (if_block5) {
 					if_block5.p(ctx, dirty);
 				} else {
-					if_block5 = create_if_block_2$9(ctx);
+					if_block5 = create_if_block_2$a(ctx);
 					if_block5.c();
 					if_block5.m(t5.parentNode, t5);
 				}
@@ -20171,7 +20188,7 @@ function create_fragment$I(ctx) {
 				if (if_block6) {
 					if_block6.p(ctx, dirty);
 				} else {
-					if_block6 = create_if_block_1$b(ctx);
+					if_block6 = create_if_block_1$d(ctx);
 					if_block6.c();
 					if_block6.m(t6.parentNode, t6);
 				}
@@ -20188,7 +20205,7 @@ function create_fragment$I(ctx) {
 						transition_in(if_block7, 1);
 					}
 				} else {
-					if_block7 = create_if_block$l(ctx);
+					if_block7 = create_if_block$m(ctx);
 					if_block7.c();
 					transition_in(if_block7, 1);
 					if_block7.m(if_block7_anchor.parentNode, if_block7_anchor);
@@ -21047,7 +21064,7 @@ class Lock_icon extends SvelteComponent {
 
 /* src/lib/journey/callbacks/kba/kba-create.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$k(ctx) {
+function create_if_block$l(ctx) {
 	let input;
 	let current;
 
@@ -21128,7 +21145,7 @@ function create_fragment$E(ctx) {
 			}
 		});
 
-	let if_block = /*displayCustomQuestionInput*/ ctx[3] && create_if_block$k(ctx);
+	let if_block = /*displayCustomQuestionInput*/ ctx[3] && create_if_block$l(ctx);
 
 	function input_value_binding(value) {
 		/*input_value_binding*/ ctx[21](value);
@@ -21207,7 +21224,7 @@ function create_fragment$E(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$k(ctx);
+					if_block = create_if_block$l(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(fieldset, t6);
@@ -21693,7 +21710,7 @@ function create_else_block$7(ctx) {
 }
 
 // (6:0) {#if !visible}
-function create_if_block$j(ctx) {
+function create_if_block$k(ctx) {
 	let svg;
 	let path0;
 	let path1;
@@ -21779,7 +21796,7 @@ function create_fragment$C(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$j, create_else_block$7];
+	const if_block_creators = [create_if_block$k, create_else_block$7];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -21868,10 +21885,10 @@ class Eye_icon extends SvelteComponent {
 
 /* src/lib/journey/callbacks/password/confirm-input.svelte generated by Svelte v3.59.2 */
 
-function create_default_slot_1$e(ctx) {
+function create_default_slot_2$7(ctx) {
 	let current;
-	const default_slot_template = /*#slots*/ ctx[15].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[16], null);
+	const default_slot_template = /*#slots*/ ctx[17].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[18], null);
 
 	return {
 		c() {
@@ -21886,15 +21903,15 @@ function create_default_slot_1$e(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 65536)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 262144)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[16],
+						/*$$scope*/ ctx[18],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[16])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[16], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[18])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[18], dirty, null),
 						null
 					);
 				}
@@ -21915,8 +21932,70 @@ function create_default_slot_1$e(ctx) {
 	};
 }
 
-// (69:4) <EyeIcon classes="tw_password-icon dark:tw_password-icon_dark" visible={isVisible}>
-function create_default_slot$k(ctx) {
+// (66:6) {#if showPassword === "button"}
+function create_if_block_1$c(ctx) {
+	let button;
+	let eyeicon;
+	let current;
+	let mounted;
+	let dispose;
+
+	eyeicon = new Eye_icon({
+			props: {
+				classes: "tw_password-icon dark:tw_password-icon_dark",
+				visible: /*isVisible*/ ctx[8],
+				$$slots: { default: [create_default_slot_1$e] },
+				$$scope: { ctx }
+			}
+		});
+
+	return {
+		c() {
+			button = element("button");
+			create_component(eyeicon.$$.fragment);
+			attr(button, "class", `tw_password-button dark:tw_password-button_dark tw_focusable-element tw_input-base dark:tw_input-base_dark`);
+			attr(button, "type", "button");
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+			mount_component(eyeicon, button, null);
+			current = true;
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*toggleVisibility*/ ctx[14]);
+				mounted = true;
+			}
+		},
+		p(ctx, dirty) {
+			const eyeicon_changes = {};
+			if (dirty & /*isVisible*/ 256) eyeicon_changes.visible = /*isVisible*/ ctx[8];
+
+			if (dirty & /*$$scope*/ 262144) {
+				eyeicon_changes.$$scope = { dirty, ctx };
+			}
+
+			eyeicon.$set(eyeicon_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(eyeicon.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(eyeicon.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(button);
+			destroy_component(eyeicon);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+// (72:10) <EyeIcon classes="tw_password-icon dark:tw_password-icon_dark" visible={isVisible}>
+function create_default_slot_1$e(ctx) {
 	let t;
 	let current;
 	t = new Locale_strings({ props: { key: "showPassword" } });
@@ -21945,18 +22024,54 @@ function create_default_slot$k(ctx) {
 	};
 }
 
-// (63:2) 
+// (65:1) <svelte:fragment slot="input-button">
 function create_input_button_slot$1(ctx) {
-	let button;
-	let eyeicon;
+	let if_block_anchor;
 	let current;
-	let mounted;
-	let dispose;
+	let if_block = /*showPassword*/ ctx[12] === "button" && create_if_block_1$c(ctx);
 
-	eyeicon = new Eye_icon({
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (/*showPassword*/ ctx[12] === "button") if_block.p(ctx, dirty);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+// (80:0) {#if showPassword === "checkbox"}
+function create_if_block$j(ctx) {
+	let div;
+	let checkbox;
+	let current;
+
+	checkbox = new Checkbox({
 			props: {
-				classes: "tw_password-icon dark:tw_password-icon_dark",
-				visible: /*isVisible*/ ctx[6],
+				isFirstInvalidInput: /*isFirstInvalidInput*/ ctx[5],
+				isInvalid: false,
+				key: /*key*/ ctx[3] + /*style*/ ctx[4].showPassword,
+				onChange: /*toggleVisibility*/ ctx[14],
+				value: false,
 				$$slots: { default: [create_default_slot$k] },
 				$$scope: { ctx }
 			}
@@ -21964,117 +22079,149 @@ function create_input_button_slot$1(ctx) {
 
 	return {
 		c() {
-			button = element("button");
-			create_component(eyeicon.$$.fragment);
-			attr(button, "class", `tw_password-button dark:tw_password-button_dark tw_focusable-element tw_input-base dark:tw_input-base_dark`);
-			attr(button, "slot", "input-button");
-			attr(button, "type", "button");
+			div = element("div");
+			create_component(checkbox.$$.fragment);
+			attr(div, "class", "tw_w-full tw_input-spacing");
 		},
 		m(target, anchor) {
-			insert(target, button, anchor);
-			mount_component(eyeicon, button, null);
+			insert(target, div, anchor);
+			mount_component(checkbox, div, null);
 			current = true;
-
-			if (!mounted) {
-				dispose = listen(button, "click", /*toggleVisibility*/ ctx[11]);
-				mounted = true;
-			}
 		},
 		p(ctx, dirty) {
-			const eyeicon_changes = {};
-			if (dirty & /*isVisible*/ 64) eyeicon_changes.visible = /*isVisible*/ ctx[6];
+			const checkbox_changes = {};
+			if (dirty & /*isFirstInvalidInput*/ 32) checkbox_changes.isFirstInvalidInput = /*isFirstInvalidInput*/ ctx[5];
+			if (dirty & /*key, style*/ 24) checkbox_changes.key = /*key*/ ctx[3] + /*style*/ ctx[4].showPassword;
 
-			if (dirty & /*$$scope*/ 65536) {
-				eyeicon_changes.$$scope = { dirty, ctx };
+			if (dirty & /*$$scope*/ 262144) {
+				checkbox_changes.$$scope = { dirty, ctx };
 			}
 
-			eyeicon.$set(eyeicon_changes);
+			checkbox.$set(checkbox_changes);
 		},
 		i(local) {
 			if (current) return;
-			transition_in(eyeicon.$$.fragment, local);
+			transition_in(checkbox.$$.fragment, local);
 			current = true;
 		},
 		o(local) {
-			transition_out(eyeicon.$$.fragment, local);
+			transition_out(checkbox.$$.fragment, local);
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(button);
-			destroy_component(eyeicon);
-			mounted = false;
-			dispose();
+			if (detaching) detach(div);
+			destroy_component(checkbox);
+		}
+	};
+}
+
+// (82:6) <Checkbox          {isFirstInvalidInput}         isInvalid={false}         key = {key + style.showPassword}         onChange={toggleVisibility}         value={false}       >
+function create_default_slot$k(ctx) {
+	let t;
+
+	return {
+		c() {
+			t = text("Show Password");
+		},
+		m(target, anchor) {
+			insert(target, t, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(t);
 		}
 	};
 }
 
 function create_fragment$B(ctx) {
 	let input;
+	let t;
+	let if_block_anchor;
 	let current;
 
-	input = new /*Input*/ ctx[9]({
+	input = new /*Input*/ ctx[11]({
 			props: {
 				forceValidityFailure: /*forceValidityFailure*/ ctx[0],
 				isFirstInvalidInput: false,
-				hasRightIcon: true,
+				hasRightIcon: /*style*/ ctx[4].showPassword === 'button'
+				? true
+				: false,
 				key: `${/*key*/ ctx[3]}-confirm`,
 				label: interpolate('confirmPassword', null, 'Confirm Password'),
-				message: /*message*/ ctx[8],
-				onChange: /*onChangeWrapper*/ ctx[10],
+				message: /*message*/ ctx[10],
+				onChange: /*onChangeWrapper*/ ctx[13],
 				isInvalid: /*passwordsDoNotMatch*/ ctx[1],
 				isRequired: /*isRequired*/ ctx[2],
-				showMessage: /*showMessage*/ ctx[4],
-				type: /*type*/ ctx[7],
-				value: typeof /*value*/ ctx[5] === 'string'
-				? /*value*/ ctx[5]
+				showMessage: /*showMessage*/ ctx[6],
+				type: /*type*/ ctx[9],
+				value: typeof /*value*/ ctx[7] === 'string'
+				? /*value*/ ctx[7]
 				: '',
 				$$slots: {
 					"input-button": [create_input_button_slot$1],
-					default: [create_default_slot_1$e]
+					default: [create_default_slot_2$7]
 				},
 				$$scope: { ctx }
 			}
 		});
 
+	let if_block = /*showPassword*/ ctx[12] === "checkbox" && create_if_block$j(ctx);
+
 	return {
 		c() {
 			create_component(input.$$.fragment);
+			t = space();
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
 		},
 		m(target, anchor) {
 			mount_component(input, target, anchor);
+			insert(target, t, anchor);
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
 			current = true;
 		},
 		p(ctx, [dirty]) {
 			const input_changes = {};
 			if (dirty & /*forceValidityFailure*/ 1) input_changes.forceValidityFailure = /*forceValidityFailure*/ ctx[0];
+
+			if (dirty & /*style*/ 16) input_changes.hasRightIcon = /*style*/ ctx[4].showPassword === 'button'
+			? true
+			: false;
+
 			if (dirty & /*key*/ 8) input_changes.key = `${/*key*/ ctx[3]}-confirm`;
-			if (dirty & /*message*/ 256) input_changes.message = /*message*/ ctx[8];
+			if (dirty & /*message*/ 1024) input_changes.message = /*message*/ ctx[10];
 			if (dirty & /*passwordsDoNotMatch*/ 2) input_changes.isInvalid = /*passwordsDoNotMatch*/ ctx[1];
 			if (dirty & /*isRequired*/ 4) input_changes.isRequired = /*isRequired*/ ctx[2];
-			if (dirty & /*showMessage*/ 16) input_changes.showMessage = /*showMessage*/ ctx[4];
-			if (dirty & /*type*/ 128) input_changes.type = /*type*/ ctx[7];
+			if (dirty & /*showMessage*/ 64) input_changes.showMessage = /*showMessage*/ ctx[6];
+			if (dirty & /*type*/ 512) input_changes.type = /*type*/ ctx[9];
 
-			if (dirty & /*value*/ 32) input_changes.value = typeof /*value*/ ctx[5] === 'string'
-			? /*value*/ ctx[5]
+			if (dirty & /*value*/ 128) input_changes.value = typeof /*value*/ ctx[7] === 'string'
+			? /*value*/ ctx[7]
 			: '';
 
-			if (dirty & /*$$scope, isVisible*/ 65600) {
+			if (dirty & /*$$scope, isVisible*/ 262400) {
 				input_changes.$$scope = { dirty, ctx };
 			}
 
 			input.$set(input_changes);
+			if (/*showPassword*/ ctx[12] === "checkbox") if_block.p(ctx, dirty);
 		},
 		i(local) {
 			if (current) return;
 			transition_in(input.$$.fragment, local);
+			transition_in(if_block);
 			current = true;
 		},
 		o(local) {
 			transition_out(input.$$.fragment, local);
+			transition_out(if_block);
 			current = false;
 		},
 		d(detaching) {
 			destroy_component(input, detaching);
+			if (detaching) detach(t);
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
 		}
 	};
 }
@@ -22088,7 +22235,9 @@ function instance$C($$self, $$props, $$invalidate) {
 	let { onChange } = $$props;
 	let { resetValue } = $$props;
 	let { style = {} } = $$props;
+	let { isFirstInvalidInput } = $$props;
 	const Input = style.labels === 'stacked' ? Stacked_label : Floating_label;
+	const showPassword = style.showPassword;
 	let { showMessage = undefined } = $$props;
 	let isVisible = false;
 	let type = 'password';
@@ -22096,7 +22245,7 @@ function instance$C($$self, $$props, $$invalidate) {
 	let message = '';
 
 	function onChangeWrapper(event) {
-		$$invalidate(5, value = event.target?.value);
+		$$invalidate(7, value = event.target?.value);
 
 		// TODO: revisit this logic to avoid unnecessary ternary
 		onChange(typeof value === 'string' ? value : undefined);
@@ -22106,8 +22255,8 @@ function instance$C($$self, $$props, $$invalidate) {
  * @function toggleVisibility - toggles the password from masked to plaintext
  */
 	function toggleVisibility() {
-		$$invalidate(6, isVisible = !isVisible);
-		$$invalidate(7, type = isVisible ? 'text' : 'password');
+		$$invalidate(8, isVisible = !isVisible);
+		$$invalidate(9, type = isVisible ? 'text' : 'password');
 	}
 
 	$$self.$$set = $$props => {
@@ -22115,27 +22264,28 @@ function instance$C($$self, $$props, $$invalidate) {
 		if ('passwordsDoNotMatch' in $$props) $$invalidate(1, passwordsDoNotMatch = $$props.passwordsDoNotMatch);
 		if ('isRequired' in $$props) $$invalidate(2, isRequired = $$props.isRequired);
 		if ('key' in $$props) $$invalidate(3, key = $$props.key);
-		if ('onChange' in $$props) $$invalidate(12, onChange = $$props.onChange);
-		if ('resetValue' in $$props) $$invalidate(13, resetValue = $$props.resetValue);
-		if ('style' in $$props) $$invalidate(14, style = $$props.style);
-		if ('showMessage' in $$props) $$invalidate(4, showMessage = $$props.showMessage);
-		if ('$$scope' in $$props) $$invalidate(16, $$scope = $$props.$$scope);
+		if ('onChange' in $$props) $$invalidate(15, onChange = $$props.onChange);
+		if ('resetValue' in $$props) $$invalidate(16, resetValue = $$props.resetValue);
+		if ('style' in $$props) $$invalidate(4, style = $$props.style);
+		if ('isFirstInvalidInput' in $$props) $$invalidate(5, isFirstInvalidInput = $$props.isFirstInvalidInput);
+		if ('showMessage' in $$props) $$invalidate(6, showMessage = $$props.showMessage);
+		if ('$$scope' in $$props) $$invalidate(18, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*resetValue, onChange, value, passwordsDoNotMatch, isRequired*/ 12326) {
+		if ($$self.$$.dirty & /*resetValue, onChange, value, passwordsDoNotMatch, isRequired*/ 98438) {
 			{
 				if (resetValue) {
-					$$invalidate(5, value = undefined);
+					$$invalidate(7, value = undefined);
 					onChange(value);
 				}
 
 				if (passwordsDoNotMatch) {
-					$$invalidate(8, message = interpolate('passwordConfirmationError', null, 'Passwords do not match'));
+					$$invalidate(10, message = interpolate('passwordConfirmationError', null, 'Passwords do not match'));
 				} else if (isRequired) {
-					$$invalidate(8, message = interpolate('requiredField', null, 'This field is required'));
+					$$invalidate(10, message = interpolate('requiredField', null, 'This field is required'));
 				} else {
-					$$invalidate(8, message = '');
+					$$invalidate(10, message = '');
 				}
 			}
 		}
@@ -22146,17 +22296,19 @@ function instance$C($$self, $$props, $$invalidate) {
 		passwordsDoNotMatch,
 		isRequired,
 		key,
+		style,
+		isFirstInvalidInput,
 		showMessage,
 		value,
 		isVisible,
 		type,
 		message,
 		Input,
+		showPassword,
 		onChangeWrapper,
 		toggleVisibility,
 		onChange,
 		resetValue,
-		style,
 		slots,
 		$$scope
 	];
@@ -22171,20 +22323,21 @@ class Confirm_input extends SvelteComponent {
 			passwordsDoNotMatch: 1,
 			isRequired: 2,
 			key: 3,
-			onChange: 12,
-			resetValue: 13,
-			style: 14,
-			showMessage: 4
+			onChange: 15,
+			resetValue: 16,
+			style: 4,
+			isFirstInvalidInput: 5,
+			showMessage: 6
 		});
 	}
 }
 
 /* src/lib/journey/callbacks/password/base.svelte generated by Svelte v3.59.2 */
 
-function create_default_slot_1$d(ctx) {
+function create_default_slot_2$6(ctx) {
 	let current;
-	const default_slot_template = /*#slots*/ ctx[21].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[22], null);
+	const default_slot_template = /*#slots*/ ctx[22].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[23], null);
 
 	return {
 		c() {
@@ -22199,15 +22352,15 @@ function create_default_slot_1$d(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 4194304)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 8388608)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[22],
+						/*$$scope*/ ctx[23],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[22])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[22], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[23])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[23], dirty, null),
 						null
 					);
 				}
@@ -22228,15 +22381,77 @@ function create_default_slot_1$d(ctx) {
 	};
 }
 
-// (95:6) <EyeIcon classes="tw_password-icon dark:tw_password-icon_dark" visible={isVisible}>
-function create_default_slot$j(ctx) {
-	let t;
+// (92:6) {#if showPassword === "button"}
+function create_if_block_2$9(ctx) {
+	let button;
+	let eyeicon;
 	let current;
-	t = new Locale_strings({ props: { key: "showPassword" } });
+	let mounted;
+	let dispose;
+
+	eyeicon = new Eye_icon({
+			props: {
+				classes: "tw_password-icon dark:tw_password-icon_dark",
+				visible: /*isVisible*/ ctx[11],
+				$$slots: { default: [create_default_slot_1$d] },
+				$$scope: { ctx }
+			}
+		});
 
 	return {
 		c() {
-			create_component(t.$$.fragment);
+			button = element("button");
+			create_component(eyeicon.$$.fragment);
+			attr(button, "class", `tw_password-button dark:tw_password-button_dark tw_focusable-element tw_input-base dark:tw_input-base_dark`);
+			attr(button, "type", "button");
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+			mount_component(eyeicon, button, null);
+			current = true;
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*toggleVisibility*/ ctx[19]);
+				mounted = true;
+			}
+		},
+		p(ctx, dirty) {
+			const eyeicon_changes = {};
+			if (dirty & /*isVisible*/ 2048) eyeicon_changes.visible = /*isVisible*/ ctx[11];
+
+			if (dirty & /*$$scope*/ 8388608) {
+				eyeicon_changes.$$scope = { dirty, ctx };
+			}
+
+			eyeicon.$set(eyeicon_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(eyeicon.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(eyeicon.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(button);
+			destroy_component(eyeicon);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+// (98:10) <EyeIcon classes="tw_password-icon dark:tw_password-icon_dark" visible={isVisible}>
+function create_default_slot_1$d(ctx) {
+	let t;
+	let current;
+	t = new Locale_strings({ props: { key: "showPassword" } });
+
+	return {
+		c() {
+			create_component(t.$$.fragment);
 		},
 		m(target, anchor) {
 			mount_component(t, target, anchor);
@@ -22258,18 +22473,54 @@ function create_default_slot$j(ctx) {
 	};
 }
 
-// (89:4) 
+// (91:4) <svelte:fragment slot="input-button">
 function create_input_button_slot(ctx) {
-	let button;
-	let eyeicon;
+	let if_block_anchor;
 	let current;
-	let mounted;
-	let dispose;
+	let if_block = /*showPassword*/ ctx[16] === "button" && create_if_block_2$9(ctx);
 
-	eyeicon = new Eye_icon({
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (/*showPassword*/ ctx[16] === "button") if_block.p(ctx, dirty);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+// (107:2) {#if showPassword === "checkbox"}
+function create_if_block_1$b(ctx) {
+	let div;
+	let checkbox;
+	let current;
+
+	checkbox = new Checkbox({
 			props: {
-				classes: "tw_password-icon dark:tw_password-icon_dark",
-				visible: /*isVisible*/ ctx[11],
+				isFirstInvalidInput: /*callbackMetadata*/ ctx[2]?.derived.isFirstInvalidInput || false,
+				isInvalid: false,
+				key: /*key*/ ctx[0] + /*style*/ ctx[5].showPassword,
+				onChange: /*toggleVisibility*/ ctx[19],
+				value: false,
 				$$slots: { default: [create_default_slot$j] },
 				$$scope: { ctx }
 			}
@@ -22277,51 +22528,60 @@ function create_input_button_slot(ctx) {
 
 	return {
 		c() {
-			button = element("button");
-			create_component(eyeicon.$$.fragment);
-			attr(button, "class", `tw_password-button dark:tw_password-button_dark tw_focusable-element tw_input-base dark:tw_input-base_dark`);
-			attr(button, "slot", "input-button");
-			attr(button, "type", "button");
+			div = element("div");
+			create_component(checkbox.$$.fragment);
+			attr(div, "class", "tw_w-full tw_input-spacing");
 		},
 		m(target, anchor) {
-			insert(target, button, anchor);
-			mount_component(eyeicon, button, null);
+			insert(target, div, anchor);
+			mount_component(checkbox, div, null);
 			current = true;
-
-			if (!mounted) {
-				dispose = listen(button, "click", /*toggleVisibility*/ ctx[18]);
-				mounted = true;
-			}
 		},
 		p(ctx, dirty) {
-			const eyeicon_changes = {};
-			if (dirty & /*isVisible*/ 2048) eyeicon_changes.visible = /*isVisible*/ ctx[11];
+			const checkbox_changes = {};
+			if (dirty & /*callbackMetadata*/ 4) checkbox_changes.isFirstInvalidInput = /*callbackMetadata*/ ctx[2]?.derived.isFirstInvalidInput || false;
+			if (dirty & /*key, style*/ 33) checkbox_changes.key = /*key*/ ctx[0] + /*style*/ ctx[5].showPassword;
 
-			if (dirty & /*$$scope*/ 4194304) {
-				eyeicon_changes.$$scope = { dirty, ctx };
+			if (dirty & /*$$scope*/ 8388608) {
+				checkbox_changes.$$scope = { dirty, ctx };
 			}
 
-			eyeicon.$set(eyeicon_changes);
+			checkbox.$set(checkbox_changes);
 		},
 		i(local) {
 			if (current) return;
-			transition_in(eyeicon.$$.fragment, local);
+			transition_in(checkbox.$$.fragment, local);
 			current = true;
 		},
 		o(local) {
-			transition_out(eyeicon.$$.fragment, local);
+			transition_out(checkbox.$$.fragment, local);
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(button);
-			destroy_component(eyeicon);
-			mounted = false;
-			dispose();
+			if (detaching) detach(div);
+			destroy_component(checkbox);
 		}
 	};
 }
 
-// (102:2) {#if callbackMetadata?.platform?.confirmPassword}
+// (109:6) <Checkbox isFirstInvalidInput={callbackMetadata?.derived.isFirstInvalidInput || false}         isInvalid={false}         key = {key + style.showPassword}         onChange={toggleVisibility}         value={false}       >
+function create_default_slot$j(ctx) {
+	let t;
+
+	return {
+		c() {
+			t = text("Show Password");
+		},
+		m(target, anchor) {
+			insert(target, t, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(t);
+		}
+	};
+}
+
+// (119:2) {#if callbackMetadata?.platform?.confirmPassword}
 function create_if_block$i(ctx) {
 	let confirminput;
 	let current;
@@ -22332,10 +22592,11 @@ function create_if_block$i(ctx) {
 				passwordsDoNotMatch: /*doPasswordsMatch*/ ctx[10] === false,
 				key: /*key*/ ctx[0],
 				isRequired: /*value*/ ctx[8].length > 0,
-				onChange: /*confirmInput*/ ctx[16],
+				onChange: /*confirmInput*/ ctx[17],
 				resetValue: /*resetValue*/ ctx[12],
 				showMessage: /*doPasswordsMatch*/ ctx[10] === false,
-				style: /*style*/ ctx[5]
+				style: /*style*/ ctx[5],
+				isFirstInvalidInput: /*callbackMetadata*/ ctx[2]?.derived.isFirstInvalidInput || false
 			}
 		});
 
@@ -22356,6 +22617,7 @@ function create_if_block$i(ctx) {
 			if (dirty & /*resetValue*/ 4096) confirminput_changes.resetValue = /*resetValue*/ ctx[12];
 			if (dirty & /*doPasswordsMatch*/ 1024) confirminput_changes.showMessage = /*doPasswordsMatch*/ ctx[10] === false;
 			if (dirty & /*style*/ 32) confirminput_changes.style = /*style*/ ctx[5];
+			if (dirty & /*callbackMetadata*/ 4) confirminput_changes.isFirstInvalidInput = /*callbackMetadata*/ ctx[2]?.derived.isFirstInvalidInput || false;
 			confirminput.$set(confirminput_changes);
 		},
 		i(local) {
@@ -22373,23 +22635,26 @@ function create_if_block$i(ctx) {
 	};
 }
 
-// (75:0) {#key callback}
+// (77:0) {#key callback}
 function create_key_block$3(ctx) {
 	let input;
-	let t;
-	let if_block_anchor;
+	let t0;
+	let t1;
+	let if_block1_anchor;
 	let current;
 
 	input = new /*Input*/ ctx[15]({
 			props: {
 				isFirstInvalidInput: /*callbackMetadata*/ ctx[2]?.derived.isFirstInvalidInput || false,
-				hasRightIcon: true,
+				hasRightIcon: /*style*/ ctx[5].showPassword === 'button'
+				? true
+				: false,
 				key: /*key*/ ctx[0],
 				label: interpolate(textToKey(/*callbackType*/ ctx[9]), null, /*textInputLabel*/ ctx[13]),
 				message: /*validationFailure*/ ctx[7] || (/*isRequired*/ ctx[4]
 				? interpolate('inputRequiredError')
 				: undefined),
-				onChange: /*setValue*/ ctx[17],
+				onChange: /*setValue*/ ctx[18],
 				isInvalid: /*isInvalid*/ ctx[3],
 				isRequired: /*isRequired*/ ctx[4],
 				showMessage: /*showMessage*/ ctx[6],
@@ -22399,31 +22664,41 @@ function create_key_block$3(ctx) {
 				: '',
 				$$slots: {
 					"input-button": [create_input_button_slot],
-					default: [create_default_slot_1$d]
+					default: [create_default_slot_2$6]
 				},
 				$$scope: { ctx }
 			}
 		});
 
-	let if_block = /*callbackMetadata*/ ctx[2]?.platform?.confirmPassword && create_if_block$i(ctx);
+	let if_block0 = /*showPassword*/ ctx[16] === "checkbox" && create_if_block_1$b(ctx);
+	let if_block1 = /*callbackMetadata*/ ctx[2]?.platform?.confirmPassword && create_if_block$i(ctx);
 
 	return {
 		c() {
 			create_component(input.$$.fragment);
-			t = space();
-			if (if_block) if_block.c();
-			if_block_anchor = empty();
+			t0 = space();
+			if (if_block0) if_block0.c();
+			t1 = space();
+			if (if_block1) if_block1.c();
+			if_block1_anchor = empty();
 		},
 		m(target, anchor) {
 			mount_component(input, target, anchor);
-			insert(target, t, anchor);
-			if (if_block) if_block.m(target, anchor);
-			insert(target, if_block_anchor, anchor);
+			insert(target, t0, anchor);
+			if (if_block0) if_block0.m(target, anchor);
+			insert(target, t1, anchor);
+			if (if_block1) if_block1.m(target, anchor);
+			insert(target, if_block1_anchor, anchor);
 			current = true;
 		},
 		p(ctx, dirty) {
 			const input_changes = {};
 			if (dirty & /*callbackMetadata*/ 4) input_changes.isFirstInvalidInput = /*callbackMetadata*/ ctx[2]?.derived.isFirstInvalidInput || false;
+
+			if (dirty & /*style*/ 32) input_changes.hasRightIcon = /*style*/ ctx[5].showPassword === 'button'
+			? true
+			: false;
+
 			if (dirty & /*key*/ 1) input_changes.key = /*key*/ ctx[0];
 			if (dirty & /*callbackType, textInputLabel*/ 8704) input_changes.label = interpolate(textToKey(/*callbackType*/ ctx[9]), null, /*textInputLabel*/ ctx[13]);
 
@@ -22440,30 +22715,31 @@ function create_key_block$3(ctx) {
 			? /*value*/ ctx[8]
 			: '';
 
-			if (dirty & /*$$scope, isVisible*/ 4196352) {
+			if (dirty & /*$$scope, isVisible*/ 8390656) {
 				input_changes.$$scope = { dirty, ctx };
 			}
 
 			input.$set(input_changes);
+			if (/*showPassword*/ ctx[16] === "checkbox") if_block0.p(ctx, dirty);
 
 			if (/*callbackMetadata*/ ctx[2]?.platform?.confirmPassword) {
-				if (if_block) {
-					if_block.p(ctx, dirty);
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
 
 					if (dirty & /*callbackMetadata*/ 4) {
-						transition_in(if_block, 1);
+						transition_in(if_block1, 1);
 					}
 				} else {
-					if_block = create_if_block$i(ctx);
-					if_block.c();
-					transition_in(if_block, 1);
-					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+					if_block1 = create_if_block$i(ctx);
+					if_block1.c();
+					transition_in(if_block1, 1);
+					if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
 				}
-			} else if (if_block) {
+			} else if (if_block1) {
 				group_outros();
 
-				transition_out(if_block, 1, 1, () => {
-					if_block = null;
+				transition_out(if_block1, 1, 1, () => {
+					if_block1 = null;
 				});
 
 				check_outros();
@@ -22472,19 +22748,23 @@ function create_key_block$3(ctx) {
 		i(local) {
 			if (current) return;
 			transition_in(input.$$.fragment, local);
-			transition_in(if_block);
+			transition_in(if_block0);
+			transition_in(if_block1);
 			current = true;
 		},
 		o(local) {
 			transition_out(input.$$.fragment, local);
-			transition_out(if_block);
+			transition_out(if_block0);
+			transition_out(if_block1);
 			current = false;
 		},
 		d(detaching) {
 			destroy_component(input, detaching);
-			if (detaching) detach(t);
-			if (if_block) if_block.d(detaching);
-			if (detaching) detach(if_block_anchor);
+			if (detaching) detach(t0);
+			if (if_block0) if_block0.d(detaching);
+			if (detaching) detach(t1);
+			if (if_block1) if_block1.d(detaching);
+			if (detaching) detach(if_block1_anchor);
 		}
 	};
 }
@@ -22543,6 +22823,7 @@ function instance$B($$self, $$props, $$invalidate) {
 	let { isRequired = false } = $$props;
 	let { style = {} } = $$props;
 	const Input = style.labels === 'stacked' ? Stacked_label : Floating_label;
+	const showPassword = style.showPassword;
 	let { showMessage = undefined } = $$props;
 	let { validationFailure = '' } = $$props;
 	let confirmValue;
@@ -22560,7 +22841,7 @@ function instance$B($$self, $$props, $$invalidate) {
  * @param event
  */
 	function confirmInput(val) {
-		$$invalidate(19, confirmValue = val);
+		$$invalidate(20, confirmValue = val);
 	}
 
 	/**
@@ -22579,7 +22860,7 @@ function instance$B($$self, $$props, $$invalidate) {
  *********************************************************************** */
 		callback.setInputValue(value);
 
-		$$invalidate(20, savedValue = String(value));
+		$$invalidate(21, savedValue = String(value));
 	}
 
 	/**
@@ -22599,11 +22880,11 @@ function instance$B($$self, $$props, $$invalidate) {
 		if ('style' in $$props) $$invalidate(5, style = $$props.style);
 		if ('showMessage' in $$props) $$invalidate(6, showMessage = $$props.showMessage);
 		if ('validationFailure' in $$props) $$invalidate(7, validationFailure = $$props.validationFailure);
-		if ('$$scope' in $$props) $$invalidate(22, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(23, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*callback, callbackMetadata, savedValue, value, confirmValue*/ 1573126) {
+		if ($$self.$$.dirty & /*callback, callbackMetadata, savedValue, value, confirmValue*/ 3145990) {
 			{
 				$$invalidate(9, callbackType = callback.getType());
 				$$invalidate(0, key = callback?.payload?.input?.[0].name || `password-${callbackMetadata?.idx}`);
@@ -22645,6 +22926,7 @@ function instance$B($$self, $$props, $$invalidate) {
 		textInputLabel,
 		type,
 		Input,
+		showPassword,
 		confirmInput,
 		setValue,
 		toggleVisibility,
@@ -26318,61 +26600,96 @@ class Device_profile extends SvelteComponent {
 	}
 }
 
+/*
+ * Because hcaptch and grecaptcha would
+ * both be loaded on the page, we need to just leverage
+ * the classnames to determine which one is being rendered.
+ * This is retrieved from the step
+ */
+function checkForHCaptcha(captchaClassname) {
+    return captchaClassname.match('h-captcha');
+}
+function renderCaptcha({ nameOfCaptcha, siteKey, }) {
+    if (nameOfCaptcha === 'hcaptcha' && window.hcaptcha) {
+        return window.hcaptcha.render('fr-recaptcha', {
+            sitekey: siteKey,
+            callback: 'frHandleCaptcha',
+            'expired-callback': 'frHandleExpiredCallback',
+            'chalexpired-callback': 'frHandleExpiredCallback',
+            'error-callback': 'frHandleErrorCallback',
+        });
+    }
+    if (nameOfCaptcha === 'grecaptcha' && window.grecaptcha) {
+        return window.grecaptcha.render('fr-recaptcha', {
+            sitekey: siteKey,
+            callback: window.frHandleCaptcha,
+            'expired-callback': window.frHandleExpiredCallback,
+        });
+    }
+}
+function handleCaptchaError(callback) {
+    const siteKey = callback?.getSiteKey() ?? '';
+    const className = callback?.getOutputByName('captchaDivClass', 'h-captcha') ?? 'h-captcha';
+    if (checkForHCaptcha(className)) {
+        return () => renderCaptcha({ nameOfCaptcha: 'hcaptcha', siteKey });
+    }
+    else {
+        return () => renderCaptcha({ nameOfCaptcha: 'grecaptcha', siteKey });
+    }
+}
+function handleCaptchaToken(callback) {
+    return (token) => {
+        callback?.setResult(token);
+    };
+}
+
 /* src/lib/journey/callbacks/recaptcha/recaptcha.svelte generated by Svelte v3.59.2 */
 
 function create_if_block$b(ctx) {
-	let script;
-	let script_src_value;
+	let div;
 
 	return {
 		c() {
-			script = element("script");
-			if (!src_url_equal(script.src, script_src_value = /*recaptchaApi*/ ctx[1])) attr(script, "src", script_src_value);
-			script.async = true;
-			script.defer = true;
+			div = element("div");
+			attr(div, "id", "fr-recaptcha");
+			attr(div, "class", `${/*recaptchaClass*/ ctx[2]} tw_flex-1 tw_w-full tw_input-spacing`);
+			attr(div, "data-sitekey", /*siteKey*/ ctx[0]);
+			attr(div, "data-expired-callback", "frHandleExpiredCallback");
+			attr(div, "data-chalexpired-callback", "frHandleExpiredCallback");
+			attr(div, "data-error-callback", "frHandleErrorCallback");
+			attr(div, "data-callback", "frHandleCaptcha");
 		},
 		m(target, anchor) {
-			insert(target, script, anchor);
+			insert(target, div, anchor);
 		},
 		p: noop,
 		d(detaching) {
-			if (detaching) detach(script);
+			if (detaching) detach(div);
 		}
 	};
 }
 
 function create_fragment$i(ctx) {
-	let t;
-	let div;
-	let if_block = /*recaptchaApi*/ ctx[1].length && create_if_block$b(ctx);
+	let if_block_anchor;
+	let if_block = /*isV3*/ ctx[1] === false && create_if_block$b(ctx);
 
 	return {
 		c() {
 			if (if_block) if_block.c();
-			t = space();
-			div = element("div");
-			attr(div, "id", "fr-recaptcha");
-			attr(div, "class", `${/*recaptchaClass*/ ctx[2]} tw_flex-1 tw_w-full tw_input-spacing`);
-			attr(div, "data-sitekey", /*siteKey*/ ctx[0]);
-			attr(div, "data-expired-callback", "frHandleExpiredCallback");
-			attr(div, "data-chalexpired-callback", "frHandleExpiredCallback");
-			attr(div, "data-error-callback", "frHandleErrorCallback");
-			attr(div, "data-callback", "frHandleCaptcha");
+			if_block_anchor = empty();
 		},
 		m(target, anchor) {
 			if (if_block) if_block.m(target, anchor);
-			insert(target, t, anchor);
-			insert(target, div, anchor);
+			insert(target, if_block_anchor, anchor);
 		},
 		p(ctx, [dirty]) {
-			if (/*recaptchaApi*/ ctx[1].length) if_block.p(ctx, dirty);
+			if (/*isV3*/ ctx[1] === false) if_block.p(ctx, dirty);
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
 			if (if_block) if_block.d(detaching);
-			if (detaching) detach(t);
-			if (detaching) detach(div);
+			if (detaching) detach(if_block_anchor);
 		}
 	};
 }
@@ -26382,8 +26699,19 @@ function instance$j($$self, $$props, $$invalidate) {
 	const selfSubmitFunction = null;
 	const stepMetadata = null;
 	const style = {};
+
+	/**
+ * This is a component level variable that is set from the journey store
+ * If it isn't passed in via journey.start, we
+ * default to the journey.tree value. However, journey.tree won't
+ * necessarily be set on mount. It is async, so we
+ * have to wait for it to resolve. Therefore, defaulting to
+ * an empty string so its falsey.
+ */
+	let recaptchaAction = '';
+
 	const siteKey = callback?.getSiteKey() ?? '';
-	let recaptchaApi = `${callback?.getOutputByName('captchaApiUri', '') ?? ''}`;
+	let isV3 = callback?.getOutputByName('reCaptchaV3', false);
 
 	/**
  * AM defaults the class name to g-captcha which is wrong
@@ -26393,63 +26721,71 @@ function instance$j($$self, $$props, $$invalidate) {
 	const recaptchaClass = callback?.getOutputByName('captchaDivClass', 'h-captcha') ?? 'h-captcha';
 
 	onMount(() => {
-		window.frHandleCaptchaError = function handleCaptchaError() {
-			callback?.setResult('');
-
-			if (recaptchaClass.startsWith('h')) {
-				window.hcaptcha.render(recaptchaClass, {
-					sitekey: siteKey,
-					callback: 'frHandleCaptcha',
-					'expired-callback': 'frHandleExpiredCallback',
-					'chalexpired-callback': 'frHandleExpiredCallback',
-					'error-callback': 'frHandleErrorCallback'
-				});
-			} else {
-				window.grecaptcha.render(recaptchaClass, {
-					sitekey: siteKey,
-					callback: window.frHandleCaptcha,
-					'expired-callback': window.frHandleExpiredCallback
-				});
-			}
-		};
+		if (isV3) {
+			// If ReCaptcha v3, do nothing and return early
+			return;
+		}
 
-		window.frHandleCaptcha = function handleCaptchaToken(token) {
-			callback?.setResult(token);
-		};
+		if (callback) {
+			window.frHandleCaptchaError = handleCaptchaError(callback);
+			window.frHandleCaptcha = handleCaptchaToken(callback);
 
-		window.frHandleExpiredCallback = function handleExpiredCallback() {
-			callback?.setResult('');
+			window.frHandleExpiredCallback = function handleExpiredCallback() {
+				callback?.setResult('');
+				renderCaptcha({ nameOfCaptcha: 'hcaptcha', siteKey });
+			};
 
-			if (recaptchaClass.startsWith('h')) {
-				window.hcaptcha.render(recaptchaClass, {
-					sitekey: siteKey,
-					callback: 'frHandleCaptcha',
-					'expired-callback': 'frHandleExpiredCallback',
-					'chalexpired-callback': 'frHandleExpiredCallback',
-					'error-callback': 'frHandleErrorCallback'
-				});
-			} else {
-				window.grecaptcha.render(recaptchaClass, {
-					sitekey: siteKey,
-					callback: window.frHandleCaptcha,
-					'expired-callback': window.frHandleExpiredCallback
+			renderCaptcha({
+				nameOfCaptcha: recaptchaClass === 'g-recaptcha'
+				? 'grecaptcha'
+				: 'hcaptcha',
+				siteKey
+			});
+		}
+	});
+
+	// defining this outside of the reactive block and guarding it with a isV3 check so it only runs when v3
+	// is defined as true and we have a recaptcha action to assign.
+	function executeV3Captcha() {
+		if (isV3 && recaptchaAction.length) {
+			try {
+				window.grecaptcha.ready(async function () {
+					const value = await window.grecaptcha.execute(siteKey, { action: recaptchaAction });
+					callback?.setResult(value);
 				});
+			} catch(err) {
+				throw new Error(`Error executing recaptcha. Please make sure you have passed a siteKey and you have loaded the google recaptcha script in your app prior to this Error: ${err}`);
 			}
-		};
+		}
+	}
+
+	journeyStore.subscribe(value => {
+		$$invalidate(7, recaptchaAction = value?.recaptchaAction ?? '');
 	});
 
 	$$self.$$set = $$props => {
 		if ('callback' in $$props) $$invalidate(3, callback = $$props.callback);
 	};
 
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*recaptchaAction*/ 128) {
+			{
+				if (recaptchaAction.length) {
+					executeV3Captcha();
+				}
+			}
+		}
+	};
+
 	return [
 		siteKey,
-		recaptchaApi,
+		isV3,
 		recaptchaClass,
 		callback,
 		selfSubmitFunction,
 		stepMetadata,
-		style
+		style,
+		recaptchaAction
 	];
 }
 
@@ -29791,7 +30127,7 @@ function get_each_context$4(ctx, list, i) {
 	return child_ctx;
 }
 
-// (50:2) {#if componentStyle !== 'inline'}
+// (45:2) {#if componentStyle !== 'inline'}
 function create_if_block_2$4(ctx) {
 	let t0;
 	let h1;
@@ -29878,7 +30214,7 @@ function create_if_block_2$4(ctx) {
 	};
 }
 
-// (51:4) {#if form?.icon}
+// (46:4) {#if form?.icon}
 function create_if_block_3$3(ctx) {
 	let div;
 	let newusericon;
@@ -29918,7 +30254,7 @@ function create_if_block_3$3(ctx) {
 	};
 }
 
-// (67:2) {#if form.message}
+// (62:2) {#if form.message}
 function create_if_block_1$5(ctx) {
 	let alert;
 	let current;
@@ -29966,7 +30302,7 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-// (68:4) <Alert id="formFailureMessageAlert" needsFocus={alertNeedsFocus} type="error">
+// (63:4) <Alert id="formFailureMessageAlert" needsFocus={alertNeedsFocus} type="error">
 function create_default_slot_2$2(ctx) {
 	let t_value = interpolate(/*formMessageKey*/ ctx[7], null, /*form*/ ctx[2]?.message) + "";
 	let t;
@@ -29987,7 +30323,7 @@ function create_default_slot_2$2(ctx) {
 	};
 }
 
-// (73:2) {#each step?.callbacks as callback, idx}
+// (68:2) {#each step?.callbacks as callback, idx}
 function create_each_block$4(ctx) {
 	let callbackmapper;
 	let current;
@@ -30040,7 +30376,7 @@ function create_each_block$4(ctx) {
 	};
 }
 
-// (85:2) {#if metadata?.step?.derived.isUserInputOptional || !metadata?.step?.derived.isStepSelfSubmittable()}
+// (80:2) {#if metadata?.step?.derived.isUserInputOptional || !metadata?.step?.derived.isStepSelfSubmittable()}
 function create_if_block$7(ctx) {
 	let button;
 	let current;
@@ -30089,7 +30425,7 @@ function create_if_block$7(ctx) {
 	};
 }
 
-// (86:4) <Button busy={journey?.loading} style="primary" type="submit" width="full">
+// (81:4) <Button busy={journey?.loading} style="primary" type="submit" width="full">
 function create_default_slot_1$6(ctx) {
 	let t;
 	let current;
@@ -30119,7 +30455,7 @@ function create_default_slot_1$6(ctx) {
 	};
 }
 
-// (49:0) <Form bind:formEl ariaDescribedBy="formFailureMessageAlert" onSubmitWhenValid={form?.submit}>
+// (44:0) <Form bind:formEl ariaDescribedBy="formFailureMessageAlert" onSubmitWhenValid={form?.submit}>
 function create_default_slot$7(ctx) {
 	let t0;
 	let t1;
@@ -30404,12 +30740,6 @@ function instance$c($$self, $$props, $$invalidate) {
 		}
 	});
 
-	onMount(() => {
-		if (componentStyle === 'modal') {
-			captureLinks(linkWrapper, journey);
-		}
-	});
-
 	function p_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			linkWrapper = $$value;