@forgerock/login-widget 1.2.0-beta.12 → 1.2.0-beta.13

package/index.js

@@ -12454,6 +12454,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({
@@ -12473,6 +12474,7 @@ styleSchema.partial();
 const fallbackStyles = {
     checksAndRadios: 'animated',
     labels: 'floating',
+    showPassword: 'button',
     logo: undefined,
     sections: undefined,
     stage: undefined,
@@ -12486,8 +12488,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);
@@ -12837,7 +12850,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 +12952,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 +13167,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 +13213,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 +13248,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 +13370,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 +13432,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 +13960,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 +13989,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 +14027,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 +14267,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 +14325,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 +14367,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 +14770,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 +14872,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 +15067,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 +15105,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 +15121,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 +15644,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 +15677,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 +15693,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 +17601,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 +17710,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 +17792,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 +17800,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 +17856,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 +17924,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 +18430,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 +18485,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 +18807,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 +18877,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 +18918,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 +19100,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 +19173,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 +19807,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 +19887,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 +19967,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 +20049,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 +20171,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 +20184,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 +20201,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 +21060,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 +21141,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 +21220,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 +21706,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 +21792,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 +21881,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 +21899,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 +21928,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 +22020,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 +22075,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 +22231,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 +22241,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 +22251,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 +22260,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 +22292,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 +22319,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 +22348,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,8 +22377,70 @@ 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) {
+// (92:6) {#if showPassword === "button"}
+function create_if_block_2$9(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[11],
+				$$slots: { default: [create_default_slot_1$d] },
+				$$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[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" } });
@@ -22258,18 +22469,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 +22524,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 +22588,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 +22613,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 +22631,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 +22660,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 +22711,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 +22744,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 +22819,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 +22837,7 @@ function instance$B($$self, $$props, $$invalidate) {
  * @param event
  */
 	function confirmInput(val) {
-		$$invalidate(19, confirmValue = val);
+		$$invalidate(20, confirmValue = val);
 	}
 
 	/**
@@ -22579,7 +22856,7 @@ function instance$B($$self, $$props, $$invalidate) {
  *********************************************************************** */
 		callback.setInputValue(value);
 
-		$$invalidate(20, savedValue = String(value));
+		$$invalidate(21, savedValue = String(value));
 	}
 
 	/**
@@ -22599,11 +22876,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 +22922,7 @@ function instance$B($$self, $$props, $$invalidate) {
 		textInputLabel,
 		type,
 		Input,
+		showPassword,
 		confirmInput,
 		setValue,
 		toggleVisibility,