@forgerock/login-widget 1.0.0-beta.9 → 1.0.0

package/index.js

@@ -702,6 +702,10 @@ function closeComponent(args, shouldCloseDialog) {
         };
     });
 }
+/**
+ * @function componentApi - this is a widget external API
+ * @returns {object} - the public component API
+ */
 const componentApi = () => {
     const { update } = componentStore;
     // Create derived store to minimize what's exposed to the dev
@@ -715,9 +719,19 @@ const componentApi = () => {
         });
     });
     return {
+        /**
+         * Close a modal
+         * @param {object} args - object containing  the reason for closing component
+         * @returns {void}
+         */
         close: (args) => {
             closeComponent(args, true);
         },
+        /**
+         * Open a modal
+         * @param: void
+         * @returns: void
+         */
         open: () => {
             update((state) => {
                 if (state.type === 'inline') {
@@ -739,6 +753,10 @@ const componentApi = () => {
                 };
             });
         },
+        /**
+         * Subscribe to modal events
+         * returns the latest value from the event
+         */
         subscribe,
     };
 };
@@ -10873,6 +10891,11 @@ var HttpClient = /** @class */ (function (_super) {
 }(event_1.default));
 var _default$2 = httpClient.default = HttpClient;
 
+/**
+ * @function logErrorAndThrow - Logs an error message and throws an error.
+ * @param {string} type - The type of error. This will be used to determine what error message to log.
+ * @throws {Error} - An error with a message that depends on the value of `type`.
+ */
 function logErrorAndThrow(type) {
     if (type === 'missingStores') {
         const errorMessage = 'Error: missing configuration.';
@@ -14921,6 +14944,11 @@ const configSchema = z
 })
     .strict();
 configSchema.partial();
+/**
+ * @function - Sets the configuration for the SDK
+ * @param {object} config - The configuration object
+ * @returns {void}
+ */
 function configure (config) {
     configSchema.parse(config);
     Config.set(config);
@@ -14968,6 +14996,12 @@ const fallbackJourneyConfig = Object.keys(defaultJourneys).map((key) => ({
     key,
 }));
 const configuredJourneysStore = writable(fallbackJourneyConfig);
+/**
+ * @function initialize - Initialize the configured journeys store
+ * @param {object} customJourneys - An object of custom journeys to merge with the default
+ * @returns {object} - The configured journeys store
+ * @example initialize({ login: { journey: 'Login', match: ['?journey=Login'] } })
+ */
 function initialize$6(customJourneys) {
     if (customJourneys) {
         // Provide developer feedback if customized
@@ -16726,6 +16760,8 @@ var backToDefault = "Back to Sign In";
 var backToLogin = "Back to Sign In";
 var dontHaveAnAccount = "No account? <a href='?journey=Registration'>Register here!</a>";
 var closeModal = "Close";
+var charactersCannotRepeatMoreThan = "Character cannot repeat more than {max} times";
+var charactersCannotRepeatMoreThanCaseInsensitive = "Character cannot repeat more than {max} times (case insensitive)";
 var chooseDifferentUsername = "Please choose a different username.";
 var confirmPassword = "Confirm password";
 var constraintViolationForPassword = "Password does not meet the requirements.";
@@ -16758,6 +16794,9 @@ var nextButton = "Next";
 var notToExceedMaximumCharacterLength = "No more than {max} characters";
 var noLessThanMinimumCharacterLength = "At least {min} character(s)";
 var passwordCallback = "Password";
+var passwordCannotContainCommonPasswords = "Password cannot contain common passwords";
+var passwordCannotContainCommonPasswordsOrBeReversible = "Password cannot contain common passwords or reversible text";
+var passwordCannotContainCommonPasswordsOrBeReversibleStringsLessThan = "Password cannot contain common passwords or reversible text less than {min} characters";
 var passwordRequirements = "Password requirements:";
 var pleaseCheckValue = "Please check this value";
 var pleaseConfirm = "Please confirm";
@@ -16771,7 +16810,11 @@ var registerSuccess = "Registration successful!";
 var requiredField = "Value is required";
 var securityAnswer = "Security answer";
 var securityQuestions = "Security question(s)";
-var securityQuestionsPrompt = "Provide custom security question(s) and answer(s):";
+var securityQuestionsPrompt = "Provide security question(s) and answer(s):";
+var shouldContainANumber = "Should contain a number";
+var shouldContainAnUppercase = "Should contain an uppercase letter";
+var shouldContainALowercase = "Should contain a lowercase letter";
+var shouldContainASymbol = "Should contain a symbol";
 var showPassword = "Show password";
 var sn = "Last name";
 var submitButton = "Submit";
@@ -16782,6 +16825,7 @@ var tryAgain = "Please try again";
 var twoFactorAuthentication = "Two factor authentication";
 var useValidEmail = "Please use a valid email address.";
 var unrecoverableError = "There was an error in the form submission.";
+var unknownLoginError = "Unknown login failure has occurred.";
 var unknownNetworkError = "Unknown network request failure has occurred.";
 var userName = "Username";
 var usernameRequirements = "Username requirements:";
@@ -16795,6 +16839,8 @@ var fallback = {
 	backToLogin: backToLogin,
 	dontHaveAnAccount: dontHaveAnAccount,
 	closeModal: closeModal,
+	charactersCannotRepeatMoreThan: charactersCannotRepeatMoreThan,
+	charactersCannotRepeatMoreThanCaseInsensitive: charactersCannotRepeatMoreThanCaseInsensitive,
 	chooseDifferentUsername: chooseDifferentUsername,
 	confirmPassword: confirmPassword,
 	constraintViolationForPassword: constraintViolationForPassword,
@@ -16827,6 +16873,9 @@ var fallback = {
 	notToExceedMaximumCharacterLength: notToExceedMaximumCharacterLength,
 	noLessThanMinimumCharacterLength: noLessThanMinimumCharacterLength,
 	passwordCallback: passwordCallback,
+	passwordCannotContainCommonPasswords: passwordCannotContainCommonPasswords,
+	passwordCannotContainCommonPasswordsOrBeReversible: passwordCannotContainCommonPasswordsOrBeReversible,
+	passwordCannotContainCommonPasswordsOrBeReversibleStringsLessThan: passwordCannotContainCommonPasswordsOrBeReversibleStringsLessThan,
 	passwordRequirements: passwordRequirements,
 	pleaseCheckValue: pleaseCheckValue,
 	pleaseConfirm: pleaseConfirm,
@@ -16841,6 +16890,10 @@ var fallback = {
 	securityAnswer: securityAnswer,
 	securityQuestions: securityQuestions,
 	securityQuestionsPrompt: securityQuestionsPrompt,
+	shouldContainANumber: shouldContainANumber,
+	shouldContainAnUppercase: shouldContainAnUppercase,
+	shouldContainALowercase: shouldContainALowercase,
+	shouldContainASymbol: shouldContainASymbol,
 	showPassword: showPassword,
 	sn: sn,
 	submitButton: submitButton,
@@ -16851,6 +16904,7 @@ var fallback = {
 	twoFactorAuthentication: twoFactorAuthentication,
 	useValidEmail: useValidEmail,
 	unrecoverableError: unrecoverableError,
+	unknownLoginError: unknownLoginError,
 	unknownNetworkError: unknownNetworkError,
 	userName: userName,
 	usernameRequirements: usernameRequirements,
@@ -16867,6 +16921,8 @@ const stringsSchema = z
     backToLogin: z.string(),
     dontHaveAnAccount: z.string(),
     closeModal: z.string(),
+    charactersCannotRepeatMoreThan: z.string(),
+    charactersCannotRepeatMoreThanCaseInsensitive: z.string(),
     chooseDifferentUsername: z.string(),
     confirmPassword: z.string(),
     constraintViolationForPassword: z.string(),
@@ -16899,6 +16955,9 @@ const stringsSchema = z
     notToExceedMaximumCharacterLength: z.string(),
     noLessThanMinimumCharacterLength: z.string(),
     passwordCallback: z.string(),
+    passwordCannotContainCommonPasswords: z.string(),
+    passwordCannotContainCommonPasswordsOrBeReversible: z.string(),
+    passwordCannotContainCommonPasswordsOrBeReversibleStringsLessThan: z.string(),
     passwordRequirements: z.string(),
     pleaseCheckValue: z.string(),
     pleaseConfirm: z.string(),
@@ -16913,6 +16972,10 @@ const stringsSchema = z
     securityAnswer: z.string(),
     securityQuestions: z.string(),
     securityQuestionsPrompt: z.string(),
+    shouldContainANumber: z.string(),
+    shouldContainAnUppercase: z.string(),
+    shouldContainALowercase: z.string(),
+    shouldContainASymbol: z.string(),
     showPassword: z.string(),
     sn: z.string(),
     submitButton: z.string(),
@@ -16923,6 +16986,7 @@ const stringsSchema = z
     twoFactorAuthentication: z.string(),
     useValidEmail: z.string(),
     unrecoverableError: z.string(),
+    unknownLoginError: z.string(),
     unknownNetworkError: z.string(),
     userName: z.string(),
     usernameRequirements: z.string(),
@@ -16936,6 +17000,12 @@ stringsSchema.partial();
 // Ensure fallback follows schema
 stringsSchema.parse(fallback);
 const stringsStore = writable(null);
+/**
+ * @function initialize - Initialize the locale store
+ * @param {object} userLocale - An object of custom locale strings to merge with the default
+ * @returns {object} - The locale store
+ * @example initialize({ loginHeader: 'Welcome to the login page' });
+ */
 function initialize$5(userLocale) {
     if (userLocale) {
         /**
@@ -16955,6 +17025,14 @@ function initialize$5(userLocale) {
  * Demo: https://regex101.com/r/Mw9vTB/1
  */
 const valueSchema = z.record(z.string().regex(/^[^<>]*$/)).optional();
+/**
+ * @function interpolate - Get a translation string
+ * Interpolate a string that contains variables
+ *
+ * @param {string} key - The key to lookup in the translation strings
+ * @param {object} values - An object of values to interpolate into the string
+ * @param {string} externalText - A string to use if no translation is found
+ */
 function interpolate(key, values, externalText) {
     // Let's throw some errors if we're trying to use keys/locales that don't exist.
     // We could improve this by using Typescript and/or fallback values.
@@ -17026,6 +17104,31 @@ function interpolate(key, values, externalText) {
     });
     return messageClean;
 }
+/**
+ * @function textToKey - Takes a human readable string and returns a key from it.
+ * This key is used to look up the string in the translation files.
+ *
+ * If the item is a number, it will be converted to a string and then
+ * processed as if it were a string.
+ *
+ * If the item is a string that contains word characters (`\w`) mixed with
+ * non-word characters (`\W`), the non-word characters will be removed and
+ * the resulting string will be converted to camelCase.
+ *
+ * @param {string} text - The text that will be converted to a key.
+ * @returns {string} A key that is unique to the given text.
+ *
+ * Examples:
+ * textToKey('hello world') => 'helloWorld'
+ * textToKey('HELLO WORLD') => 'helloWorld'
+ * textToKey('HELLO WORLD!!!') => 'helloWorld'
+ * textToKey('HELLO WORLD!!!') => 'helloWorld'
+ * textToKey('helloWorld') => 'helloWorld'
+ * textToKey('helloWorld123') => 'helloWorld123'
+ * textToKey('hello_world') => 'helloWorld'
+ * textToKey('hello-world') => 'helloWorld'
+ * textToKey('hello.world') => 'helloWorld'
+ */
 function textToKey(text) {
     if (typeof text !== 'string' && typeof text !== 'number') {
         throw new Error('Parameter for textToKey function needs to be of type string or number');
@@ -17167,7 +17270,9 @@ const userInputCallbacks = [
     CallbackType$1.ValidatedCreatePasswordCallback,
     CallbackType$1.ValidatedCreateUsernameCallback,
 ];
-// This eventually will be overridable by user of framework
+/**
+ * @function forceUserInputOptionalityCallbacks - Determines if a callback should be forced to be optional
+ */
 const forceUserInputOptionalityCallbacks = {
     SelectIdPCallback: (callback) => {
         const selectIdpCb = callback;
@@ -17176,6 +17281,11 @@ const forceUserInputOptionalityCallbacks = {
             .find((provider) => provider.provider === 'localAuthentication');
     },
 };
+/**
+ * @function isCbReadyByDefault - Determines if a callback is ready to be submitted by default
+ * @param {object} callback - Generic FRCallback from JavaScript SDK
+ * @returns {boolean}
+ */
 function isCbReadyByDefault(callback) {
     if (callback.getType() === CallbackType$1.ConfirmationCallback) {
         const cb = callback;
@@ -17185,6 +17295,11 @@ function isCbReadyByDefault(callback) {
     }
     return false;
 }
+/**
+ * @function canForceUserInputOptionality
+ * @param {object} callback - generic FRCallback from JavaScript SDK
+ * @returns
+ */
 function canForceUserInputOptionality(callback) {
     // See if a callback function exists within this collection
     const fn = forceUserInputOptionalityCallbacks[callback.getType()];
@@ -17212,9 +17327,9 @@ function isStepSelfSubmittable(callbacks, userInputOptional) {
     return !unsubmittableCallbacks.length;
 }
 /**
- *
+ * @function requiresUserInput - Determines if a callback requires user input
  * @param  {object} callback - Generic callback provided by JavaScript SDK
- * @returns
+ * @returns {boolean}
  */
 function requiresUserInput(callback) {
     if (callback.getType() === CallbackType$1.SelectIdPCallback) {
@@ -17230,6 +17345,22 @@ function requiresUserInput(callback) {
 }
 // Notice this function can take a user provided argument function to
 // override behavior (this doesn't have to be well defined)
+/**
+ * @function isUserInputOptional - Determines if user input is optional
+ * Notice this function can take a user provided argument function to
+ * override behavior (this doesn't have to be well defined)
+ * @param {array} callbackMetadataArray - array of callback metadata
+ * @param  {number} numOfUserInputCbs - number of user input requiring callbacks
+ * @param {function} fn - optional function to override default behavior
+ * @returns {boolean} - true if user input is optional
+ * @example isUserInputOptional(callbackMetadataArray, numOfUserInputCbs, (prev, curr) => {
+ *   if (curr.derived.canForceUserInputOptionality && numOfUserInputCbs > 0) {
+ *     prev = true;
+ *   }
+ *   return prev;
+ * })
+ * @example isUserInputOptional(callbackMetadataArray, numOfUserInputCbs);
+ */
 function isUserInputOptional(callbackMetadataArray, numOfUserInputCbs, fn) {
     // default reducer function to check if both overriding callback exists
     // along with user input required callbacks
@@ -17246,7 +17377,7 @@ function isUserInputOptional(callbackMetadataArray, numOfUserInputCbs, fn) {
 /**
  * @function buildCallbackMetadata - Constructs an array of callback metadata that matches to original callback array
  * @param {object} step - The modified Widget step object
- * @param checkValidation - function that checks if current callback is the first invalid callback
+ * @param {function} checkValidation - function that checks if current callback is the first invalid callback
  * @returns {array}
  */
 function buildCallbackMetadata(step, checkValidation, stageJson) {
@@ -17325,6 +17456,11 @@ function buildStepMetadata(callbackMetadataArray, stageJson, stageName) {
     };
 }
 
+/**
+ * @function initializeJourney - Initializes the journey stack for tracking journey switches
+ * @param {object} initOptions - The initial options to set
+ * @returns {object} - The journey stack store with stack methods
+ */
 function initializeStack(initOptions) {
     const initialValue = initOptions ? [initOptions] : [];
     const { update, set, subscribe } = writable(initialValue);
@@ -17388,6 +17524,11 @@ const journeyStore = writable({
     successful: false,
     response: null,
 });
+/**
+ * @function initialize - Initializes the journey store
+ * @param {object} initOptions - The initial options to set
+ * @returns {object} - The journey store
+ */
 function initialize$4(initOptions) {
     const stack = initializeStack();
     let stepNumber = 0;
@@ -17507,7 +17648,7 @@ function initialize$4(initOptions) {
              *
              * Grab failure message, which may contain encoded HTML
              */
-            const failureMessageStr = htmlDecode(nextStep.payload.message || '');
+            const failureMessageStr = htmlDecode(nextStep.payload.message || 'Unknown login error');
             let restartedStep = null;
             try {
                 /**
@@ -17590,8 +17731,7 @@ function initialize$4(initOptions) {
                     error: {
                         code: nextStep.getCode(),
                         message: failureMessageStr,
-                        // TODO: Should we remove the callbacks for PII info?
-                        step: prevStep?.payload,
+                        stage: prevStep?.payload?.stage,
                         troubleshoot: null,
                     },
                     loading: false,
@@ -17621,8 +17761,7 @@ function initialize$4(initOptions) {
                     error: {
                         code: nextStep.getCode(),
                         message: failureMessageStr,
-                        // TODO: Should we remove the callbacks for PII info?
-                        step: prevStep?.payload,
+                        stage: prevStep?.payload?.stage,
                         troubleshoot: null,
                     },
                     loading: false,
@@ -17694,6 +17833,12 @@ const linksSchema = z
     .strict();
 linksSchema.partial();
 const linksStore = writable();
+/**
+ * @function initialize - Initialize the links store
+ * @param {object} customLinks - An object of custom links to merge with the default
+ * @returns {object} - The links store
+ * @example initialize({ termsAndConditions: 'https://example.com/terms' });
+ */
 function initialize$3(customLinks) {
     // If customLinks is provided, provide feedback for object
     if (customLinks) {
@@ -17716,7 +17861,19 @@ const oauthStore = writable({
     successful: false,
     response: null,
 });
+/**
+ * @function initialize - Initializes the OAuth store with a get function and a reset function
+ * @param {object} initOptions - The options to pass to the TokenManager.getTokens function
+ * @returns {object} - The OAuth store
+ * @example initialize({ query: { prompt: 'none' } });
+ */
 function initialize$2(initOptions) {
+    /**
+     * Get tokens from the server
+     * new tokens are available in the subscribe method
+     * @params: getOptions?: GetTokensOptions
+     * @returns: Promise<void>
+     */
     async function get(getOptions) {
         /**
          * Create an options object with getOptions overriding anything from initOptions
@@ -17784,7 +17941,18 @@ const userStore = writable({
     successful: false,
     response: null,
 });
+/**
+ * @function initialize - Initializes the user store with a get function and a reset function
+ * @param {object} initOptions - The options to pass to the UserManager.getCurrentUser function
+ * @returns {object} - The user store
+ */
 function initialize$1(initOptions) {
+    /**
+     * Get user info from the server
+     * New state is returned in your `userEvents.subscribe` callback function
+     * @params: getOptions?: ConfigOptions
+     * @returns: Promise<void>
+     */
     async function get(getOptions) {
         /**
          * Create an options object with getOptions overriding anything from initOptions
@@ -17871,11 +18039,17 @@ styleSchema.partial();
 const fallbackStyles = {
     checksAndRadios: 'animated',
     labels: 'floating',
-    logo: {},
-    sections: {},
-    stage: {},
+    logo: undefined,
+    sections: undefined,
+    stage: undefined,
 };
 const styleStore = writable(fallbackStyles);
+/**
+ * @function initialize - Initialize the style store
+ * @param {object} customStyle - An object of custom styles to merge with the default
+ * @returns {object} - The style store
+ * @example initialize({ checksAndRadios: 'standard' });
+ */
 function initialize(customStyle) {
     if (customStyle) {
         styleSchema.parse(customStyle);
@@ -17887,6 +18061,17 @@ function initialize(customStyle) {
     return styleStore;
 }
 
+/**
+ * @function widgetApiFactory - Creates the widget API
+ * @param {object} componentApi - The component API
+ * @returns {object} - The widget API
+ * @property {object} componentApi - The component API for either inline or modal
+ * @property {object} configuration - Sets the configuration for the widget
+ * @property {function} getStores - Returns the stores: journeyStore, oauthStore, userStore
+ * @property {object} journey - the journey API
+ * @property {function} request - The HttpClient.request function from the SDK
+ * @property {object} user - the user API
+ */
 function widgetApiFactory(componentApi) {
     let journeyStore;
     let oauthStore;
@@ -17935,6 +18120,10 @@ function widgetApiFactory(componentApi) {
         initialize$3(options?.links);
         initialize(options?.style);
         return {
+            /** Set the Login Widget's Configuration
+             * @param {WidgetConfigOptions} options - The configuration options for the Login Widget
+             * @returns {void}
+             **/
             set(setOptions) {
                 if (setOptions?.forgerock) {
                     configure({
@@ -18056,6 +18245,11 @@ function widgetApiFactory(componentApi) {
         return { change, start, subscribe };
     };
     const user = {
+        /**
+         * User Info
+         * @param: void
+         * @returns: UserStore
+         */
         info() {
             if (!journeyStore || !oauthStore || !userStore) {
                 logErrorAndThrow('missingStores');
@@ -18078,6 +18272,12 @@ function widgetApiFactory(componentApi) {
             }
             return { get: wrappedGet, subscribe };
         },
+        /**
+         * Logout a user from an AM Session
+         * @async
+         * @param: void
+         * @returns: Promise<void>
+         **/
         async logout() {
             if (!journeyStore || !oauthStore || !userStore) {
                 logErrorAndThrow('missingStores');
@@ -18106,6 +18306,11 @@ function widgetApiFactory(componentApi) {
             // Return undefined as there's no response information to share
             return;
         },
+        /**
+         * Returns the widget's Tokens object
+         * @param void;
+         * @returns OAuthStore
+         */
         tokens() {
             if (!journeyStore || !oauthStore || !userStore) {
                 logErrorAndThrow('missingStores');
@@ -18134,7 +18339,7 @@ function widgetApiFactory(componentApi) {
         configuration,
         getStores,
         journey,
-        request: _default$2.request,
+        request: _default$2.request.bind(_default$2),
         user,
     };
 }
@@ -18524,7 +18729,7 @@ function create_else_block$9(ctx) {
 			attr(button, "aria-controls", /*dialogId*/ ctx[1]);
 
 			attr(div, "class", div_class_value = `tw_pt-10 md:tw_pt-10 tw_text-right ${(/*$styleStore*/ ctx[5]?.logo)
-			? 'tw_h-32 md:tw_h-36  tw_pb-6'
+			? 'tw_h-32 md:tw_h-36 tw_pb-6'
 			: ''}`);
 		},
 		m(target, anchor) {
@@ -18567,7 +18772,7 @@ function create_else_block$9(ctx) {
 			}
 
 			if (!current || dirty & /*$styleStore*/ 32 && div_class_value !== (div_class_value = `tw_pt-10 md:tw_pt-10 tw_text-right ${(/*$styleStore*/ ctx[5]?.logo)
-			? 'tw_h-32 md:tw_h-36  tw_pb-6'
+			? 'tw_h-32 md:tw_h-36 tw_pb-6'
 			: ''}`)) {
 				attr(div, "class", div_class_value);
 			}
@@ -20588,6 +20793,11 @@ function matchJourneyAndDecideAction(href, journeys, stack) {
 /** *********************************************
  * NEW "NORMALIZED" METHODS
  */
+/**
+ * @function getInputTypeFromPolicies - Determines the type of input to use based on the policies object
+ * @param {object} policies - The policies object from the callback
+ * @returns {string} - The type of input to use
+ */
 function getInputTypeFromPolicies(policies) {
     const value = policies?.value;
     if (typeof value !== 'object') {
@@ -20605,13 +20815,47 @@ function getInputTypeFromPolicies(policies) {
     }
     return 'text';
 }
+/**
+ * @function getValidationFailureParams - Gets the validation failure params from the failed policy object
+ * @param {object} failedPolicy - The failed policy object from the callback
+ * @returns {array} - An array of objects containing the length, message, and rule
+ */
 function getValidationFailureParams(failedPolicy) {
-    if (failedPolicy?.policyRequirement === 'CHARACTER_SET') {
-        const params = failedPolicy?.params;
+    if (failedPolicy?.policyRequirement === 'DICTIONARY') {
+        const params = failedPolicy.params;
+        const min = params?.['min-substring-length'] || 0;
+        const arr = [];
+        if (params?.['check-substrings'] && params?.['test-reversed-password']) {
+            arr.push({
+                length: min,
+                message: interpolate('passwordCannotContainCommonPasswordsOrBeReversibleStringsLessThan', {
+                    min: String(min),
+                }),
+                rule: 'reversibleSubstrings',
+            });
+        }
+        else if (params?.['test-reversed-password']) {
+            arr.push({
+                length: null,
+                message: interpolate('passwordCannotContainCommonPasswordsOrBeReversible'),
+                rule: 'reversibleSubstrings',
+            });
+        }
+        else {
+            arr.push({
+                length: null,
+                message: interpolate('passwordCannotContainCommonPasswords'),
+                rule: 'reversibleSubstrings',
+            });
+        }
+        return arr;
+    }
+    else if (failedPolicy?.policyRequirement === 'CHARACTER_SET') {
+        const params = failedPolicy.params;
         return params?.['character-sets'].map(convertCharacterSetToRuleObj);
     }
     else if (failedPolicy?.policyRequirement === 'LENGTH_BASED') {
-        const params = failedPolicy?.params;
+        const params = failedPolicy.params;
         const min = params?.['min-password-length'] || 0;
         const max = params?.['max-password-length'] || null;
         const arr = [];
@@ -20631,6 +20875,26 @@ function getValidationFailureParams(failedPolicy) {
         }
         return arr;
     }
+    else if (failedPolicy?.policyRequirement === 'REPEATED_CHARACTERS') {
+        const params = failedPolicy.params;
+        const max = params['max-consecutive-length'] || 0;
+        const arr = [];
+        if (!params['case-sensitive-validation']) {
+            arr.push({
+                length: max,
+                message: interpolate('charactersCannotRepeatMoreThanCaseInsensitive', { max: String(max) }),
+                rule: 'repeatedCharactersCaseInsensitive',
+            });
+        }
+        else {
+            arr.push({
+                length: max,
+                message: interpolate('charactersCannotRepeatMoreThan', { max: String(max) }),
+                rule: 'repeatedCharacters',
+            });
+        }
+        return arr;
+    }
     else if (failedPolicy?.policyRequirement === 'VALID_USERNAME') {
         return [
             {
@@ -20659,6 +20923,11 @@ function getValidationFailureParams(failedPolicy) {
         ];
     }
 }
+/**
+ * @function getValidationMessageString - Gets the validation message string from the policy object
+ * @param {object} policy - The policy object from the callback
+ * @returns {string} - The validation message string
+ */
 function getValidationMessageString(policy) {
     switch (policy?.policyId) {
         case 'at-least-X-capitals': {
@@ -20742,6 +21011,12 @@ function getValidationMessageString(policy) {
             return '';
     }
 }
+/**
+ * @function getValidationFailures - Gets the validation failures from the callback object
+ * @param {object} callback - The callback object from the server
+ * @param {string} label - The label of the field
+ * @returns {array} - An array of failed policies
+ */
 function getValidationFailures(callback, label) {
     const failedPolicies = callback.getFailedPolicies && callback.getFailedPolicies();
     const parsedPolicies = parseFailedPolicies(failedPolicies, label);
@@ -20753,6 +21028,11 @@ function getValidationFailures(callback, label) {
         };
     });
 }
+/**
+ * @function getValidationPolicies - Gets the validation policies from the callback object
+ * @param {object} policies - The policies object from the callback
+ * @returns {array} - An array of policies
+ */
 function getValidationPolicies(policies) {
     if (typeof policies !== 'object' && !policies) {
         return [];
@@ -20771,6 +21051,11 @@ function getValidationPolicies(policies) {
     })
         .filter((policy) => !!policy.message);
 }
+/**
+ * @function isInputRequired - Checks if the input is required
+ * @param {object} callback - The callback object from the server
+ * @returns {boolean} - Whether the input is required
+ */
 function isInputRequired(callback) {
     const policies = callback.getPolicies && callback.getPolicies();
     let isRequired = false;
@@ -20782,46 +21067,93 @@ function isInputRequired(callback) {
     }
     return isRequired;
 }
+/**
+ * @function convertCharacterSetToRuleObj - Converts a character set to a rule object
+ * @param {string} set - The character set to convert
+ * @returns {object} - The rule object
+ */
 function convertCharacterSetToRuleObj(set) {
     const arr = set.split(':');
     const num = arr[0];
     const type = arr[1];
     if (type === '0123456789') {
-        return {
-            length: Number(num),
-            message: interpolate('minimumNumberOfNumbers', { num: String(num) }),
-            rule: 'numbers',
-        };
+        if (num === '0') {
+            return {
+                length: null,
+                message: interpolate('shouldContainANumber'),
+                rule: 'numbers',
+            };
+        }
+        else {
+            return {
+                length: Number(num),
+                message: interpolate('minimumNumberOfNumbers', { num: String(num) }),
+                rule: 'numbers',
+            };
+        }
     }
     else if (type === 'ABCDEFGHIJKLMNOPQRSTUVWXYZ') {
-        return {
-            length: Number(num),
-            message: interpolate('minimumNumberOfUppercase', { num: String(num) }),
-            rule: 'uppercase',
-        };
+        if (num === '0') {
+            return {
+                length: null,
+                message: interpolate('shouldContainAnUppercase'),
+                rule: 'uppercase',
+            };
+        }
+        else {
+            return {
+                length: Number(num),
+                message: interpolate('minimumNumberOfUppercase', { num: String(num) }),
+                rule: 'uppercase',
+            };
+        }
     }
     else if (type === 'abcdefghijklmnopqrstuvwxyz') {
-        return {
-            length: Number(num),
-            message: interpolate('minimumNumberOfLowercase', { num: String(num) }),
-            rule: 'lowercase',
-        };
+        if (num === '0') {
+            return {
+                length: null,
+                message: interpolate('shouldContainALowercase'),
+                rule: 'lowercase',
+            };
+        }
+        else {
+            return {
+                length: Number(num),
+                message: interpolate('minimumNumberOfLowercase', { num: String(num) }),
+                rule: 'lowercase',
+            };
+        }
     }
     else if (type.includes('@') || type.includes('!') || type.includes('*') || type.includes('#')) {
-        return {
-            length: Number(num),
-            message: interpolate('minimumNumberOfSymbols', { num: String(num) }),
-            rule: 'symbols',
-        };
+        if (num === '0') {
+            return {
+                length: null,
+                message: interpolate('shouldContainASymbol'),
+                rule: 'symbols',
+            };
+        }
+        else {
+            return {
+                length: Number(num),
+                message: interpolate('minimumNumberOfSymbols', { num: String(num) }),
+                rule: 'symbols',
+            };
+        }
     }
     else {
         return {
-            length: Number(num),
+            length: null,
             message: interpolate('pleaseCheckValue'),
             rule: 'unknown',
         };
     }
 }
+/**
+ * @function parseFailedPolicies - Parses the failed policies from the callback object
+ * @param {array} policies - The policies array from the callback
+ * @param {string} label - The label of the field
+ * @returns {array} - An array of failed policies
+ */
 function parseFailedPolicies(policies, label) {
     return policies.map((policy) => {
         if (typeof policy === 'string') {
@@ -20837,8 +21169,10 @@ function parseFailedPolicies(policies, label) {
         }
     });
 }
-/** *********************************************
- * OLD METHODS
+/**
+ * @function getAttributeValidationFailureText - Gets the validation failure text from the callback object
+ * @param {object} callback - The callback object from the server
+ * @returns {string} - The validation failure text
  */
 function getAttributeValidationFailureText(callback) {
     // TODO: Mature this utility for better parsing and display
@@ -21837,13 +22171,6 @@ function instance$I($$self, $$props, $$invalidate) {
 	let validationFailure;
 
 	function setValue(event) {
-		/** ***********************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for setting values
- * ------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for writing values to the callbacks received from AM
- *********************************************************************** */
 		callback.setInputValue(event.target.checked);
 	}
 
@@ -22783,7 +23110,7 @@ function get_each_context$7(ctx, list, i) {
 	return child_ctx;
 }
 
-// (40:0) {#if labelOrder === 'first'}
+// (39:0) {#if labelOrder === 'first'}
 function create_if_block_1$a(ctx) {
 	let label_1;
 	let current;
@@ -22831,7 +23158,7 @@ function create_if_block_1$a(ctx) {
 	};
 }
 
-// (41:2) <Label {key} classes={`${labelClasses}`}>
+// (40:2) <Label {key} classes={`${labelClasses}`}>
 function create_default_slot_1$b(ctx) {
 	let t;
 
@@ -22851,7 +23178,7 @@ function create_default_slot_1$b(ctx) {
 	};
 }
 
-// (55:2) {#each options as option}
+// (54:2) {#each options as option}
 function create_each_block$7(ctx) {
 	let option;
 	let t0_value = /*option*/ ctx[15].text + "";
@@ -22892,7 +23219,7 @@ function create_each_block$7(ctx) {
 	};
 }
 
-// (62:0) {#if labelOrder === 'last'}
+// (61:0) {#if labelOrder === 'last'}
 function create_if_block$g(ctx) {
 	let label_1;
 	let current;
@@ -22945,7 +23272,7 @@ function create_if_block$g(ctx) {
 	};
 }
 
-// (63:2) <Label {key} classes={`${shouldDisplayOption ? labelClasses : 'tw_sr-only'}`}>
+// (62:2) <Label {key} classes={`${shouldDisplayOption ? labelClasses : 'tw_sr-only'}`}>
 function create_default_slot$i(ctx) {
 	let t;
 
@@ -23184,8 +23511,6 @@ function instance$E($$self, $$props, $$invalidate) {
 		// Check if text is same as label
 		$$invalidate(10, shouldDisplayOption = !(label === selectedOption?.text));
 
-		console.log(shouldDisplayOption);
-
 		// Continue with calling onChange parameter
 		onChange(event);
 	}
@@ -23612,7 +23937,7 @@ function create_else_block$6(ctx) {
 	};
 }
 
-// (66:0) {#if callbackMetadata?.platform?.displayType === 'radio'}
+// (52:0) {#if callbackMetadata?.platform?.displayType === 'radio'}
 function create_if_block$f(ctx) {
 	let radio;
 	let current;
@@ -23767,13 +24092,6 @@ function instance$B($$self, $$props, $$invalidate) {
  * @param {Object} event
  */
 	function setValue(event) {
-		/** ***********************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for setting values
- * ------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for writing values to the callbacks received from AM
- *********************************************************************** */
 		callback.setChoiceIndex(Number(event.target.value));
 	}
 
@@ -23786,13 +24104,6 @@ function instance$B($$self, $$props, $$invalidate) {
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*callback, callbackMetadata, prompt*/ 2051) {
 			{
-				/** *************************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for getting values
- * --------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for accessing values from the callbacks received from AM
- ************************************************************************* */
 				$$invalidate(2, choiceOptions = callback.getChoices()?.map((text, idx) => ({
 					/**
  * Since locale content keys for the choice component are built off of the
@@ -23957,7 +24268,7 @@ function get_each_context$6(ctx, list, i) {
 	return child_ctx;
 }
 
-// (95:0) {#if stepMetadata?.platform?.stageName !== 'OneTimePassword'}
+// (81:0) {#if stepMetadata?.platform?.stageName !== 'OneTimePassword'}
 function create_if_block$e(ctx) {
 	let current_block_type_index;
 	let if_block;
@@ -24027,7 +24338,7 @@ function create_if_block$e(ctx) {
 	};
 }
 
-// (117:2) {:else}
+// (103:2) {:else}
 function create_else_block_1(ctx) {
 	let grid;
 	let current;
@@ -24073,7 +24384,7 @@ function create_else_block_1(ctx) {
 	};
 }
 
-// (96:2) {#if !stepMetadata?.derived.isStepSelfSubmittable}
+// (82:2) {#if !stepMetadata?.derived.isStepSelfSubmittable}
 function create_if_block_1$9(ctx) {
 	let current_block_type_index;
 	let if_block;
@@ -24143,7 +24454,7 @@ function create_if_block_1$9(ctx) {
 	};
 }
 
-// (120:8) <Button           style={options.length > 1 && defaultChoice === Number(opt.value) ? 'primary' : buttonStyle}           type="button"           width="auto"           onClick={() => setBtnValue(Number(opt.value))}         >
+// (106:8) <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$5(ctx) {
 	let t0_value = /*opt*/ ctx[15].text + "";
 	let t0;
@@ -24168,7 +24479,7 @@ function create_default_slot_2$5(ctx) {
 	};
 }
 
-// (119:6) {#each options as opt}
+// (105:6) {#each options as opt}
 function create_each_block$6(ctx) {
 	let button;
 	let current;
@@ -24229,7 +24540,7 @@ function create_each_block$6(ctx) {
 	};
 }
 
-// (118:4) <Grid num={options.length}>
+// (104:4) <Grid num={options.length}>
 function create_default_slot_1$a(ctx) {
 	let each_1_anchor;
 	let current;
@@ -24313,7 +24624,7 @@ function create_default_slot_1$a(ctx) {
 	};
 }
 
-// (106:4) {:else}
+// (92:4) {:else}
 function create_else_block$5(ctx) {
 	let checkbox;
 	let current;
@@ -24364,7 +24675,7 @@ function create_else_block$5(ctx) {
 	};
 }
 
-// (97:4) {#if options.length > 1}
+// (83:4) {#if options.length > 1}
 function create_if_block_2$8(ctx) {
 	let select;
 	let current;
@@ -24411,7 +24722,7 @@ function create_if_block_2$8(ctx) {
 	};
 }
 
-// (107:6) <Checkbox         isFirstInvalidInput={callbackMetadata?.derived.isFirstInvalidInput || false}         isInvalid={false}         key={inputName}         onChange={setCheckboxValue}         value={false}       >
+// (93:6) <Checkbox         isFirstInvalidInput={callbackMetadata?.derived.isFirstInvalidInput || false}         isInvalid={false}         key={inputName}         onChange={setCheckboxValue}         value={false}       >
 function create_default_slot$h(ctx) {
 	let t_value = /*options*/ ctx[3][0].text + "";
 	let t;
@@ -24523,13 +24834,6 @@ function instance$z($$self, $$props, $$invalidate) {
  * @param {Object} event
  */
 	function setOptionValue(event) {
-		/** ***********************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for setting values
- * ------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for writing values to the callbacks received from AM
- *********************************************************************** */
 		callback.setOptionIndex(Number(event.target.value));
 	}
 
@@ -24538,13 +24842,6 @@ function instance$z($$self, $$props, $$invalidate) {
  * @param {Object} event
  */
 	function setCheckboxValue(event) {
-		/** ***********************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for setting values
- * ------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for writing values to the callbacks received from AM
- *********************************************************************** */
 		const value = event.target.checked;
 
 		if (value) {
@@ -24909,7 +25206,7 @@ function create_if_block_5$1(ctx) {
 }
 
 // (65:0) {#if type === 'number'}
-function create_if_block_4$1(ctx) {
+function create_if_block_4$2(ctx) {
 	let input;
 	let input_aria_describedby_value;
 	let input_class_value;
@@ -24989,7 +25286,7 @@ function create_if_block_4$1(ctx) {
 }
 
 // (81:0) {#if type === 'password'}
-function create_if_block_3$3(ctx) {
+function create_if_block_3$6(ctx) {
 	let input;
 	let input_aria_describedby_value;
 	let input_class_value;
@@ -25309,8 +25606,8 @@ function create_fragment$x(ctx) {
 	let if_block0 = /*labelOrder*/ ctx[6] === 'first' && create_if_block_7$1(ctx);
 	let if_block1 = /*type*/ ctx[11] === 'date' && create_if_block_6$1(ctx);
 	let if_block2 = /*type*/ ctx[11] === 'email' && create_if_block_5$1(ctx);
-	let if_block3 = /*type*/ ctx[11] === 'number' && create_if_block_4$1(ctx);
-	let if_block4 = /*type*/ ctx[11] === 'password' && create_if_block_3$3(ctx);
+	let if_block3 = /*type*/ ctx[11] === 'number' && create_if_block_4$2(ctx);
+	let if_block4 = /*type*/ ctx[11] === 'password' && create_if_block_3$6(ctx);
 	let if_block5 = /*type*/ ctx[11] === 'phone' && create_if_block_2$7(ctx);
 	let if_block6 = /*type*/ ctx[11] === 'text' && create_if_block_1$8(ctx);
 	let if_block7 = /*labelOrder*/ ctx[6] === 'last' && create_if_block$d(ctx);
@@ -25407,7 +25704,7 @@ function create_fragment$x(ctx) {
 				if (if_block3) {
 					if_block3.p(ctx, dirty);
 				} else {
-					if_block3 = create_if_block_4$1(ctx);
+					if_block3 = create_if_block_4$2(ctx);
 					if_block3.c();
 					if_block3.m(t3.parentNode, t3);
 				}
@@ -25420,7 +25717,7 @@ function create_fragment$x(ctx) {
 				if (if_block4) {
 					if_block4.p(ctx, dirty);
 				} else {
-					if_block4 = create_if_block_3$3(ctx);
+					if_block4 = create_if_block_3$6(ctx);
 					if_block4.c();
 					if_block4.m(t4.parentNode, t4);
 				}
@@ -26556,15 +26853,7 @@ function instance$t($$self, $$props, $$invalidate) {
 	? Stacked_label$1
 	: Floating_label$1;
 
-	/** *************************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for getting values
- * --------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for accessing values from the callbacks received from AM
- ************************************************************************* */
 	let customQuestionIndex = null;
-
 	let displayCustomQuestionInput = false;
 	let inputArr;
 	let inputName;
@@ -26592,13 +26881,6 @@ function instance$t($$self, $$props, $$invalidate) {
  * @param {Object} event
  */
 	function setAnswer(event) {
-		/** ***********************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for setting values
- * ------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for writing values to the callbacks received from AM
- *********************************************************************** */
 		callback.setAnswer(event.target.value);
 	}
 
@@ -26615,14 +26897,6 @@ function instance$t($$self, $$props, $$invalidate) {
 			callback.setAnswer('');
 		} else {
 			$$invalidate(3, displayCustomQuestionInput = false);
-
-			/** ***********************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for setting values
- * ------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for writing values to the callbacks received from AM
- *********************************************************************** */
 			callback.setQuestion(selectValue);
 		}
 	}
@@ -26633,14 +26907,6 @@ function instance$t($$self, $$props, $$invalidate) {
  */
 	function setQuestion(event) {
 		const inputValue = event.target.value;
-
-		/** ***********************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for setting values
- * ------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for writing values to the callbacks received from AM
- *********************************************************************** */
 		callback.setQuestion(inputValue);
 	}
 
@@ -27131,8 +27397,8 @@ class Eye_icon extends SvelteComponent {
 
 function create_default_slot_1$8(ctx) {
 	let current;
-	const default_slot_template = /*#slots*/ ctx[12].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[13], null);
+	const default_slot_template = /*#slots*/ ctx[15].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[16], null);
 
 	return {
 		c() {
@@ -27147,15 +27413,15 @@ function create_default_slot_1$8(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 8192)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 65536)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[13],
+						/*$$scope*/ ctx[16],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[13])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[13], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[16])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[16], dirty, null),
 						null
 					);
 				}
@@ -27176,7 +27442,7 @@ function create_default_slot_1$8(ctx) {
 	};
 }
 
-// (47:4) <EyeIcon classes="tw_password-icon dark:tw_password-icon_dark" visible={isVisible}       >
+// (69:4) <EyeIcon classes="tw_password-icon dark:tw_password-icon_dark" visible={isVisible}>
 function create_default_slot$f(ctx) {
 	let t;
 	let current;
@@ -27206,7 +27472,7 @@ function create_default_slot$f(ctx) {
 	};
 }
 
-// (41:2) 
+// (63:2) 
 function create_input_button_slot$1(ctx) {
 	let button;
 	let eyeicon;
@@ -27237,7 +27503,7 @@ function create_input_button_slot$1(ctx) {
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(button, "click", /*toggleVisibility*/ ctx[10]);
+				dispose = listen(button, "click", /*toggleVisibility*/ ctx[11]);
 				mounted = true;
 			}
 		},
@@ -27245,7 +27511,7 @@ function create_input_button_slot$1(ctx) {
 			const eyeicon_changes = {};
 			if (dirty & /*isVisible*/ 64) eyeicon_changes.visible = /*isVisible*/ ctx[6];
 
-			if (dirty & /*$$scope*/ 8192) {
+			if (dirty & /*$$scope*/ 65536) {
 				eyeicon_changes.$$scope = { dirty, ctx };
 			}
 
@@ -27273,23 +27539,21 @@ function create_fragment$q(ctx) {
 	let input;
 	let current;
 
-	input = new /*Input*/ ctx[8]({
+	input = new /*Input*/ ctx[9]({
 			props: {
 				forceValidityFailure: /*forceValidityFailure*/ ctx[0],
 				isFirstInvalidInput: false,
 				hasRightIcon: true,
-				key: `${/*key*/ ctx[1]}-confirm`,
+				key: `${/*key*/ ctx[3]}-confirm`,
 				label: interpolate('confirmPassword', null, 'Confirm Password'),
-				message: /*isInvalid*/ ctx[3]
-				? interpolate('passwordConfirmationError', null, 'Passwords do not match')
-				: undefined,
-				onChange: /*onChange*/ ctx[2],
-				isInvalid: /*isInvalid*/ ctx[3],
-				isRequired: /*isRequired*/ ctx[4],
-				showMessage: /*showMessage*/ ctx[5],
+				message: /*message*/ ctx[8],
+				onChange: /*onChangeWrapper*/ ctx[10],
+				isInvalid: /*passwordsDoNotMatch*/ ctx[1],
+				isRequired: /*isRequired*/ ctx[2],
+				showMessage: /*showMessage*/ ctx[4],
 				type: /*type*/ ctx[7],
-				value: typeof /*value*/ ctx[9] === 'string'
-				? /*value*/ ctx[9]
+				value: typeof /*value*/ ctx[5] === 'string'
+				? /*value*/ ctx[5]
 				: '',
 				$$slots: {
 					"input-button": [create_input_button_slot$1],
@@ -27310,19 +27574,18 @@ function create_fragment$q(ctx) {
 		p(ctx, [dirty]) {
 			const input_changes = {};
 			if (dirty & /*forceValidityFailure*/ 1) input_changes.forceValidityFailure = /*forceValidityFailure*/ ctx[0];
-			if (dirty & /*key*/ 2) input_changes.key = `${/*key*/ ctx[1]}-confirm`;
-
-			if (dirty & /*isInvalid*/ 8) input_changes.message = /*isInvalid*/ ctx[3]
-			? interpolate('passwordConfirmationError', null, 'Passwords do not match')
-			: undefined;
-
-			if (dirty & /*onChange*/ 4) input_changes.onChange = /*onChange*/ ctx[2];
-			if (dirty & /*isInvalid*/ 8) input_changes.isInvalid = /*isInvalid*/ ctx[3];
-			if (dirty & /*isRequired*/ 16) input_changes.isRequired = /*isRequired*/ ctx[4];
-			if (dirty & /*showMessage*/ 32) input_changes.showMessage = /*showMessage*/ ctx[5];
+			if (dirty & /*key*/ 8) input_changes.key = `${/*key*/ ctx[3]}-confirm`;
+			if (dirty & /*message*/ 256) input_changes.message = /*message*/ ctx[8];
+			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 & /*$$scope, isVisible*/ 8256) {
+			if (dirty & /*value*/ 32) input_changes.value = typeof /*value*/ ctx[5] === 'string'
+			? /*value*/ ctx[5]
+			: '';
+
+			if (dirty & /*$$scope, isVisible*/ 65600) {
 				input_changes.$$scope = { dirty, ctx };
 			}
 
@@ -27346,16 +27609,25 @@ function create_fragment$q(ctx) {
 function instance$q($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { forceValidityFailure = false } = $$props;
+	let { passwordsDoNotMatch = false } = $$props;
+	let { isRequired = false } = $$props;
 	let { key } = $$props;
 	let { onChange } = $$props;
-	let { isInvalid = false } = $$props;
-	let { isRequired = true } = $$props;
+	let { resetValue } = $$props;
 	let { style = {} } = $$props;
 	const Input = style.labels === 'stacked' ? Stacked_label : Floating_label;
 	let { showMessage = undefined } = $$props;
 	let isVisible = false;
 	let type = 'password';
 	let value;
+	let message = '';
+
+	function onChangeWrapper(event) {
+		$$invalidate(5, value = event.target?.value);
+
+		// TODO: revisit this logic to avoid unnecessary ternary
+		onChange(typeof value === 'string' ? value : undefined);
+	}
 
 	/**
  * @function toggleVisibility - toggles the password from masked to plaintext
@@ -27367,27 +27639,50 @@ function instance$q($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('forceValidityFailure' in $$props) $$invalidate(0, forceValidityFailure = $$props.forceValidityFailure);
-		if ('key' in $$props) $$invalidate(1, key = $$props.key);
-		if ('onChange' in $$props) $$invalidate(2, onChange = $$props.onChange);
-		if ('isInvalid' in $$props) $$invalidate(3, isInvalid = $$props.isInvalid);
-		if ('isRequired' in $$props) $$invalidate(4, isRequired = $$props.isRequired);
-		if ('style' in $$props) $$invalidate(11, style = $$props.style);
-		if ('showMessage' in $$props) $$invalidate(5, showMessage = $$props.showMessage);
-		if ('$$scope' in $$props) $$invalidate(13, $$scope = $$props.$$scope);
+		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);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*resetValue, onChange, value, passwordsDoNotMatch, isRequired*/ 12326) {
+			{
+				if (resetValue) {
+					$$invalidate(5, value = undefined);
+					onChange(value);
+				}
+
+				if (passwordsDoNotMatch) {
+					$$invalidate(8, message = interpolate('passwordConfirmationError', null, 'Passwords do not match'));
+				} else if (isRequired) {
+					$$invalidate(8, message = interpolate('requiredField', null, 'This field is required'));
+				} else {
+					$$invalidate(8, message = '');
+				}
+			}
+		}
 	};
 
 	return [
 		forceValidityFailure,
-		key,
-		onChange,
-		isInvalid,
+		passwordsDoNotMatch,
 		isRequired,
+		key,
 		showMessage,
+		value,
 		isVisible,
 		type,
+		message,
 		Input,
-		value,
+		onChangeWrapper,
 		toggleVisibility,
+		onChange,
+		resetValue,
 		style,
 		slots,
 		$$scope
@@ -27400,12 +27695,13 @@ class Confirm_input extends SvelteComponent {
 
 		init(this, options, instance$q, create_fragment$q, safe_not_equal, {
 			forceValidityFailure: 0,
-			key: 1,
-			onChange: 2,
-			isInvalid: 3,
-			isRequired: 4,
-			style: 11,
-			showMessage: 5
+			passwordsDoNotMatch: 1,
+			isRequired: 2,
+			key: 3,
+			onChange: 12,
+			resetValue: 13,
+			style: 14,
+			showMessage: 4
 		});
 	}
 }
@@ -27414,8 +27710,8 @@ class Confirm_input extends SvelteComponent {
 
 function create_default_slot_1$7(ctx) {
 	let current;
-	const default_slot_template = /*#slots*/ ctx[19].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[20], null);
+	const default_slot_template = /*#slots*/ ctx[21].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[22], null);
 
 	return {
 		c() {
@@ -27430,15 +27726,15 @@ function create_default_slot_1$7(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 1048576)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 4194304)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[20],
+						/*$$scope*/ ctx[22],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[20], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[22])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[22], dirty, null),
 						null
 					);
 				}
@@ -27459,7 +27755,7 @@ function create_default_slot_1$7(ctx) {
 	};
 }
 
-// (82:4) <EyeIcon classes="tw_password-icon dark:tw_password-icon_dark" visible={isVisible}       >
+// (94:4) <EyeIcon classes="tw_password-icon dark:tw_password-icon_dark" visible={isVisible}>
 function create_default_slot$e(ctx) {
 	let t;
 	let current;
@@ -27489,7 +27785,7 @@ function create_default_slot$e(ctx) {
 	};
 }
 
-// (76:2) 
+// (88:2) 
 function create_input_button_slot(ctx) {
 	let button;
 	let eyeicon;
@@ -27520,7 +27816,7 @@ function create_input_button_slot(ctx) {
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(button, "click", /*toggleVisibility*/ ctx[16]);
+				dispose = listen(button, "click", /*toggleVisibility*/ ctx[17]);
 				mounted = true;
 			}
 		},
@@ -27528,7 +27824,7 @@ function create_input_button_slot(ctx) {
 			const eyeicon_changes = {};
 			if (dirty & /*isVisible*/ 1024) eyeicon_changes.visible = /*isVisible*/ ctx[10];
 
-			if (dirty & /*$$scope*/ 1048576) {
+			if (dirty & /*$$scope*/ 4194304) {
 				eyeicon_changes.$$scope = { dirty, ctx };
 			}
 
@@ -27552,7 +27848,7 @@ function create_input_button_slot(ctx) {
 	};
 }
 
-// (89:0) {#if callbackMetadata?.platform?.confirmPassword}
+// (101:0) {#if callbackMetadata?.platform?.confirmPassword}
 function create_if_block$a(ctx) {
 	let confirminput;
 	let current;
@@ -27560,9 +27856,11 @@ function create_if_block$a(ctx) {
 	confirminput = new Confirm_input({
 			props: {
 				forceValidityFailure: /*doPasswordsMatch*/ ctx[9] === false,
-				isInvalid: /*doPasswordsMatch*/ ctx[9] === false,
+				passwordsDoNotMatch: /*doPasswordsMatch*/ ctx[9] === false,
 				key: /*key*/ ctx[0],
-				onChange: /*confirmInput*/ ctx[14],
+				isRequired: /*value*/ ctx[7].length > 0,
+				onChange: /*confirmInput*/ ctx[15],
+				resetValue: /*resetValue*/ ctx[11],
 				showMessage: /*doPasswordsMatch*/ ctx[9] === false,
 				style: /*style*/ ctx[4]
 			}
@@ -27579,8 +27877,10 @@ function create_if_block$a(ctx) {
 		p(ctx, dirty) {
 			const confirminput_changes = {};
 			if (dirty & /*doPasswordsMatch*/ 512) confirminput_changes.forceValidityFailure = /*doPasswordsMatch*/ ctx[9] === false;
-			if (dirty & /*doPasswordsMatch*/ 512) confirminput_changes.isInvalid = /*doPasswordsMatch*/ ctx[9] === false;
+			if (dirty & /*doPasswordsMatch*/ 512) confirminput_changes.passwordsDoNotMatch = /*doPasswordsMatch*/ ctx[9] === false;
 			if (dirty & /*key*/ 1) confirminput_changes.key = /*key*/ ctx[0];
+			if (dirty & /*value*/ 128) confirminput_changes.isRequired = /*value*/ ctx[7].length > 0;
+			if (dirty & /*resetValue*/ 2048) confirminput_changes.resetValue = /*resetValue*/ ctx[11];
 			if (dirty & /*doPasswordsMatch*/ 512) confirminput_changes.showMessage = /*doPasswordsMatch*/ ctx[9] === false;
 			if (dirty & /*style*/ 16) confirminput_changes.style = /*style*/ ctx[4];
 			confirminput.$set(confirminput_changes);
@@ -27606,20 +27906,20 @@ function create_fragment$p(ctx) {
 	let if_block_anchor;
 	let current;
 
-	input = new /*Input*/ ctx[13]({
+	input = new /*Input*/ ctx[14]({
 			props: {
 				isFirstInvalidInput: /*callbackMetadata*/ ctx[1]?.derived.isFirstInvalidInput || false,
 				hasRightIcon: true,
 				key: /*key*/ ctx[0],
-				label: interpolate(textToKey(/*callbackType*/ ctx[8]), null, /*textInputLabel*/ ctx[11]),
+				label: interpolate(textToKey(/*callbackType*/ ctx[8]), null, /*textInputLabel*/ ctx[12]),
 				message: /*validationFailure*/ ctx[6] || (/*isRequired*/ ctx[3]
 				? interpolate('inputRequiredError')
 				: undefined),
-				onChange: /*setValue*/ ctx[15],
+				onChange: /*setValue*/ ctx[16],
 				isInvalid: /*isInvalid*/ ctx[2],
 				isRequired: /*isRequired*/ ctx[3],
 				showMessage: /*showMessage*/ ctx[5],
-				type: /*type*/ ctx[12],
+				type: /*type*/ ctx[13],
 				value: typeof /*value*/ ctx[7] === 'string'
 				? /*value*/ ctx[7]
 				: '',
@@ -27651,7 +27951,7 @@ function create_fragment$p(ctx) {
 			const input_changes = {};
 			if (dirty & /*callbackMetadata*/ 2) input_changes.isFirstInvalidInput = /*callbackMetadata*/ ctx[1]?.derived.isFirstInvalidInput || false;
 			if (dirty & /*key*/ 1) input_changes.key = /*key*/ ctx[0];
-			if (dirty & /*callbackType, textInputLabel*/ 2304) input_changes.label = interpolate(textToKey(/*callbackType*/ ctx[8]), null, /*textInputLabel*/ ctx[11]);
+			if (dirty & /*callbackType, textInputLabel*/ 4352) input_changes.label = interpolate(textToKey(/*callbackType*/ ctx[8]), null, /*textInputLabel*/ ctx[12]);
 
 			if (dirty & /*validationFailure, isRequired*/ 72) input_changes.message = /*validationFailure*/ ctx[6] || (/*isRequired*/ ctx[3]
 			? interpolate('inputRequiredError')
@@ -27660,13 +27960,13 @@ function create_fragment$p(ctx) {
 			if (dirty & /*isInvalid*/ 4) input_changes.isInvalid = /*isInvalid*/ ctx[2];
 			if (dirty & /*isRequired*/ 8) input_changes.isRequired = /*isRequired*/ ctx[3];
 			if (dirty & /*showMessage*/ 32) input_changes.showMessage = /*showMessage*/ ctx[5];
-			if (dirty & /*type*/ 4096) input_changes.type = /*type*/ ctx[12];
+			if (dirty & /*type*/ 8192) input_changes.type = /*type*/ ctx[13];
 
 			if (dirty & /*value*/ 128) input_changes.value = typeof /*value*/ ctx[7] === 'string'
 			? /*value*/ ctx[7]
 			: '';
 
-			if (dirty & /*$$scope, isVisible*/ 1049600) {
+			if (dirty & /*$$scope, isVisible*/ 4195328) {
 				input_changes.$$scope = { dirty, ctx };
 			}
 
@@ -27730,6 +28030,8 @@ function instance$p($$self, $$props, $$invalidate) {
 	let callbackType;
 	let doPasswordsMatch;
 	let isVisible = false;
+	let resetValue = false;
+	let savedValue = '';
 	let textInputLabel;
 	let type = 'password';
 	let value;
@@ -27738,8 +28040,8 @@ function instance$p($$self, $$props, $$invalidate) {
  * @function confirmInput - ensures the second password input matches the first
  * @param event
  */
-	function confirmInput(event) {
-		$$invalidate(18, confirmValue = event.target?.value);
+	function confirmInput(val) {
+		$$invalidate(19, confirmValue = val);
 	}
 
 	/**
@@ -27757,6 +28059,8 @@ function instance$p($$self, $$props, $$invalidate) {
  * for writing values to the callbacks received from AM
  *********************************************************************** */
 		callback.setInputValue(value);
+
+		$$invalidate(20, savedValue = String(value));
 	}
 
 	/**
@@ -27764,11 +28068,11 @@ function instance$p($$self, $$props, $$invalidate) {
  */
 	function toggleVisibility() {
 		$$invalidate(10, isVisible = !isVisible);
-		$$invalidate(12, type = isVisible ? 'text' : 'password');
+		$$invalidate(13, type = isVisible ? 'text' : 'password');
 	}
 
 	$$self.$$set = $$props => {
-		if ('callback' in $$props) $$invalidate(17, callback = $$props.callback);
+		if ('callback' in $$props) $$invalidate(18, callback = $$props.callback);
 		if ('callbackMetadata' in $$props) $$invalidate(1, callbackMetadata = $$props.callbackMetadata);
 		if ('key' in $$props) $$invalidate(0, key = $$props.key);
 		if ('isInvalid' in $$props) $$invalidate(2, isInvalid = $$props.isInvalid);
@@ -27776,18 +28080,28 @@ function instance$p($$self, $$props, $$invalidate) {
 		if ('style' in $$props) $$invalidate(4, style = $$props.style);
 		if ('showMessage' in $$props) $$invalidate(5, showMessage = $$props.showMessage);
 		if ('validationFailure' in $$props) $$invalidate(6, validationFailure = $$props.validationFailure);
-		if ('$$scope' in $$props) $$invalidate(20, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(22, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*callback, callbackMetadata, confirmValue, value*/ 393346) {
+		if ($$self.$$.dirty & /*callback, callbackMetadata, savedValue, value, confirmValue*/ 1835138) {
 			{
 				$$invalidate(8, callbackType = callback.getType());
 				$$invalidate(0, key = callback?.payload?.input?.[0].name || `password-${callbackMetadata?.idx}`);
-				$$invalidate(11, textInputLabel = callback.getPrompt());
+				$$invalidate(12, textInputLabel = callback.getPrompt());
 				$$invalidate(7, value = callback?.getInputValue());
 
-				// Only assign a boolean if the confirm input has an actual value
+				/**
+ * `savedValue` represents what the user set after blur (local component state)
+ * `value` represents what's in the callback (empties from AM response)
+ *
+ * This unique combination is what produces the most reliable reset flag
+ */
+				$$invalidate(11, resetValue = !!savedValue && value === '');
+
+				/**
+ * Only assign a boolean if the confirm input has an actual value.
+ */
 				$$invalidate(9, doPasswordsMatch = confirmValue !== undefined
 				? confirmValue === value
 				: undefined);
@@ -27807,6 +28121,7 @@ function instance$p($$self, $$props, $$invalidate) {
 		callbackType,
 		doPasswordsMatch,
 		isVisible,
+		resetValue,
 		textInputLabel,
 		type,
 		Input,
@@ -27815,6 +28130,7 @@ function instance$p($$self, $$props, $$invalidate) {
 		toggleVisibility,
 		callback,
 		confirmValue,
+		savedValue,
 		slots,
 		$$scope
 	];
@@ -27825,7 +28141,7 @@ class Base extends SvelteComponent {
 		super();
 
 		init(this, options, instance$p, create_fragment$p, safe_not_equal, {
-			callback: 17,
+			callback: 18,
 			callbackMetadata: 1,
 			key: 0,
 			isInvalid: 2,
@@ -28517,7 +28833,7 @@ function get_each_context$5(ctx, list, i) {
 }
 
 // (66:56) 
-function create_if_block_3$2(ctx) {
+function create_if_block_3$5(ctx) {
 	let button;
 	let current;
 
@@ -28861,7 +29177,7 @@ function create_default_slot_1$6(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block_1$7, create_if_block_2$6, create_if_block_3$2];
+	const if_block_creators = [create_if_block_1$7, create_if_block_2$6, create_if_block_3$5];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -29793,13 +30109,6 @@ function instance$f($$self, $$props, $$invalidate) {
  * @param {Object} event
  */
 	function setValue(event) {
-		/** ***********************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for setting values
- * ------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for writing values to the callbacks received from AM
- *********************************************************************** */
 		callback.setInputValue(event.target.value);
 	}
 
@@ -29988,7 +30297,7 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (41:0) {#if $linksStore?.termsAndConditions}
+// (27:0) {#if $linksStore?.termsAndConditions}
 function create_if_block$7(ctx) {
 	let link;
 	let t;
@@ -30066,7 +30375,7 @@ function create_if_block$7(ctx) {
 	};
 }
 
-// (42:2) <Link classes="tw_block tw_mb-4" href={$linksStore?.termsAndConditions} target="_blank">
+// (28:2) <Link classes="tw_block tw_mb-4" href={$linksStore?.termsAndConditions} target="_blank">
 function create_default_slot_1$5(ctx) {
 	let t_value = interpolate('termsAndConditionsLinkText') + "";
 	let t;
@@ -30085,7 +30394,7 @@ function create_default_slot_1$5(ctx) {
 	};
 }
 
-// (45:2) <Checkbox     isFirstInvalidInput={callbackMetadata?.derived.isFirstInvalidInput || false}     key={inputName}     onChange={setValue}     value={false}   >
+// (31:2) <Checkbox     isFirstInvalidInput={callbackMetadata?.derived.isFirstInvalidInput || false}     key={inputName}     onChange={setValue}     value={false}   >
 function create_default_slot$9(ctx) {
 	let t;
 	let current;
@@ -30193,13 +30502,6 @@ function instance$d($$self, $$props, $$invalidate) {
 	let { callback } = $$props;
 	let { callbackMetadata } = $$props;
 
-	/** *************************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for getting values
- * --------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for accessing values from the callbacks received from AM
- ************************************************************************* */
 	const Checkbox = style.checksAndRadios === 'standard'
 	? Standard$1
 	: Animated$1;
@@ -30211,13 +30513,6 @@ function instance$d($$self, $$props, $$invalidate) {
  * @param {Object} event
  */
 	function setValue(event) {
-		/** ***********************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for setting values
- * ------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for writing values to the callbacks received from AM
- *********************************************************************** */
 		callback.setAccepted(event.target.checked);
 	}
 
@@ -30776,13 +31071,6 @@ function instance$9($$self, $$props, $$invalidate) {
  * @param {Object} event
  */
 	function setValue(event) {
-		/** ***********************************************************************
- * SDK INTEGRATION POINT
- * Summary: SDK callback methods for setting values
- * ------------------------------------------------------------------------
- * Details: Each callback is wrapped by the SDK to provide helper methods
- * for writing values to the callbacks received from AM
- *********************************************************************** */
 		callback.setInputValue(event.target.value);
 	}
 
@@ -31569,7 +31857,7 @@ function create_if_block_5(ctx) {
 }
 
 // (126:52) 
-function create_if_block_4(ctx) {
+function create_if_block_4$1(ctx) {
 	let kbacreate;
 	let current;
 	const kbacreate_spread_levels = [/*newProps*/ ctx[19]];
@@ -31612,7 +31900,7 @@ function create_if_block_4(ctx) {
 }
 
 // (120:54) 
-function create_if_block_3$1(ctx) {
+function create_if_block_3$4(ctx) {
 	let hiddenvalue;
 	let current;
 	const hiddenvalue_spread_levels = [/*newProps*/ ctx[19]];
@@ -31793,8 +32081,8 @@ function create_fragment$8(ctx) {
 		create_if_block$6,
 		create_if_block_1$5,
 		create_if_block_2$5,
-		create_if_block_3$1,
-		create_if_block_4,
+		create_if_block_3$4,
+		create_if_block_4$1,
 		create_if_block_5,
 		create_if_block_6,
 		create_if_block_7,
@@ -32027,12 +32315,12 @@ class Callback_mapper extends SvelteComponent {
 
 function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[15] = list[i];
-	child_ctx[17] = i;
+	child_ctx[16] = list[i];
+	child_ctx[18] = i;
 	return child_ctx;
 }
 
-// (70:2) {#if form?.icon}
+// (70:2) {#if form?.icon && componentStyle !== 'inline'}
 function create_if_block_2$4(ctx) {
 	let div;
 	let shieldicon;
@@ -32080,7 +32368,7 @@ function create_if_block_1$4(ctx) {
 	alert = new Alert({
 			props: {
 				id: formFailureMessageId,
-				needsFocus: /*alertNeedsFocus*/ ctx[5],
+				needsFocus: /*alertNeedsFocus*/ ctx[6],
 				type: "error",
 				$$slots: { default: [create_default_slot_2$3] },
 				$$scope: { ctx }
@@ -32097,9 +32385,9 @@ function create_if_block_1$4(ctx) {
 		},
 		p(ctx, dirty) {
 			const alert_changes = {};
-			if (dirty & /*alertNeedsFocus*/ 32) alert_changes.needsFocus = /*alertNeedsFocus*/ ctx[5];
+			if (dirty & /*alertNeedsFocus*/ 64) alert_changes.needsFocus = /*alertNeedsFocus*/ ctx[6];
 
-			if (dirty & /*$$scope, formMessageKey, form*/ 262210) {
+			if (dirty & /*$$scope, formMessageKey, form*/ 524420) {
 				alert_changes.$$scope = { dirty, ctx };
 			}
 
@@ -32122,7 +32410,7 @@ function create_if_block_1$4(ctx) {
 
 // (87:4) <Alert id={formFailureMessageId} needsFocus={alertNeedsFocus} type="error">
 function create_default_slot_2$3(ctx) {
-	let t_value = interpolate(/*formMessageKey*/ ctx[6], null, /*form*/ ctx[1]?.message) + "";
+	let t_value = interpolate(/*formMessageKey*/ ctx[7], null, /*form*/ ctx[2]?.message) + "";
 	let t;
 
 	return {
@@ -32133,7 +32421,7 @@ function create_default_slot_2$3(ctx) {
 			insert(target, t, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*formMessageKey, form*/ 66 && t_value !== (t_value = interpolate(/*formMessageKey*/ ctx[6], null, /*form*/ ctx[1]?.message) + "")) set_data(t, t_value);
+			if (dirty & /*formMessageKey, form*/ 132 && t_value !== (t_value = interpolate(/*formMessageKey*/ ctx[7], null, /*form*/ ctx[2]?.message) + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(t);
@@ -32149,11 +32437,11 @@ function create_each_block$3(ctx) {
 	callbackmapper = new Callback_mapper({
 			props: {
 				props: {
-					callback: /*callback*/ ctx[15],
-					callbackMetadata: /*metadata*/ ctx[3]?.callbacks[/*idx*/ ctx[17]],
-					selfSubmitFunction: /*determineSubmission*/ ctx[11],
-					stepMetadata: /*metadata*/ ctx[3]?.step && { .../*metadata*/ ctx[3].step },
-					style: /*$styleStore*/ ctx[10]
+					callback: /*callback*/ ctx[16],
+					callbackMetadata: /*metadata*/ ctx[4]?.callbacks[/*idx*/ ctx[18]],
+					selfSubmitFunction: /*determineSubmission*/ ctx[12],
+					stepMetadata: /*metadata*/ ctx[4]?.step && { .../*metadata*/ ctx[4].step },
+					style: /*$styleStore*/ ctx[11]
 				}
 			}
 		});
@@ -32169,12 +32457,12 @@ function create_each_block$3(ctx) {
 		p(ctx, dirty) {
 			const callbackmapper_changes = {};
 
-			if (dirty & /*step, metadata, $styleStore*/ 1048) callbackmapper_changes.props = {
-				callback: /*callback*/ ctx[15],
-				callbackMetadata: /*metadata*/ ctx[3]?.callbacks[/*idx*/ ctx[17]],
-				selfSubmitFunction: /*determineSubmission*/ ctx[11],
-				stepMetadata: /*metadata*/ ctx[3]?.step && { .../*metadata*/ ctx[3].step },
-				style: /*$styleStore*/ ctx[10]
+			if (dirty & /*step, metadata, $styleStore*/ 2096) callbackmapper_changes.props = {
+				callback: /*callback*/ ctx[16],
+				callbackMetadata: /*metadata*/ ctx[4]?.callbacks[/*idx*/ ctx[18]],
+				selfSubmitFunction: /*determineSubmission*/ ctx[12],
+				stepMetadata: /*metadata*/ ctx[4]?.step && { .../*metadata*/ ctx[4].step },
+				style: /*$styleStore*/ ctx[11]
 			};
 
 			callbackmapper.$set(callbackmapper_changes);
@@ -32201,7 +32489,7 @@ function create_if_block$5(ctx) {
 
 	button = new Button({
 			props: {
-				busy: /*journey*/ ctx[2]?.loading,
+				busy: /*journey*/ ctx[3]?.loading,
 				style: "primary",
 				type: "submit",
 				width: "full",
@@ -32220,9 +32508,9 @@ function create_if_block$5(ctx) {
 		},
 		p(ctx, dirty) {
 			const button_changes = {};
-			if (dirty & /*journey*/ 4) button_changes.busy = /*journey*/ ctx[2]?.loading;
+			if (dirty & /*journey*/ 8) button_changes.busy = /*journey*/ ctx[3]?.loading;
 
-			if (dirty & /*$$scope*/ 262144) {
+			if (dirty & /*$$scope*/ 524288) {
 				button_changes.$$scope = { dirty, ctx };
 			}
 
@@ -32288,24 +32576,24 @@ function create_default_slot$5(ctx) {
 	let t5;
 	let backto;
 	let current;
-	let if_block0 = /*form*/ ctx[1]?.icon && create_if_block_2$4();
+	let if_block0 = /*form*/ ctx[2]?.icon && /*componentStyle*/ ctx[1] !== 'inline' && create_if_block_2$4();
 
 	sanitize0 = new Server_strings({
 			props: {
 				html: true,
-				string: /*step*/ ctx[4]?.getHeader() || ''
+				string: /*step*/ ctx[5]?.getHeader() || ''
 			}
 		});
 
 	sanitize1 = new Server_strings({
 			props: {
 				html: true,
-				string: /*step*/ ctx[4]?.getDescription() || ''
+				string: /*step*/ ctx[5]?.getDescription() || ''
 			}
 		});
 
-	let if_block1 = /*form*/ ctx[1]?.message && create_if_block_1$4(ctx);
-	let each_value = /*step*/ ctx[4]?.callbacks;
+	let if_block1 = /*form*/ ctx[2]?.message && create_if_block_1$4(ctx);
+	let each_value = /*step*/ ctx[5]?.callbacks;
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -32316,8 +32604,8 @@ function create_default_slot$5(ctx) {
 		each_blocks[i] = null;
 	});
 
-	let if_block2 = (/*metadata*/ ctx[3]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[3]?.step?.derived.isStepSelfSubmittable) && create_if_block$5(ctx);
-	backto = new Back_to({ props: { journey: /*journey*/ ctx[2] } });
+	let if_block2 = (/*metadata*/ ctx[4]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[4]?.step?.derived.isStepSelfSubmittable) && create_if_block$5(ctx);
+	backto = new Back_to({ props: { journey: /*journey*/ ctx[3] } });
 
 	return {
 		c() {
@@ -32354,7 +32642,7 @@ function create_default_slot$5(ctx) {
 			append(header, t1);
 			append(header, p);
 			mount_component(sanitize1, p, null);
-			/*header_binding*/ ctx[13](header);
+			/*header_binding*/ ctx[14](header);
 			insert(target, t2, anchor);
 			if (if_block1) if_block1.m(target, anchor);
 			insert(target, t3, anchor);
@@ -32370,9 +32658,9 @@ function create_default_slot$5(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (/*form*/ ctx[1]?.icon) {
+			if (/*form*/ ctx[2]?.icon && /*componentStyle*/ ctx[1] !== 'inline') {
 				if (if_block0) {
-					if (dirty & /*form*/ 2) {
+					if (dirty & /*form, componentStyle*/ 6) {
 						transition_in(if_block0, 1);
 					}
 				} else {
@@ -32392,17 +32680,17 @@ function create_default_slot$5(ctx) {
 			}
 
 			const sanitize0_changes = {};
-			if (dirty & /*step*/ 16) sanitize0_changes.string = /*step*/ ctx[4]?.getHeader() || '';
+			if (dirty & /*step*/ 32) sanitize0_changes.string = /*step*/ ctx[5]?.getHeader() || '';
 			sanitize0.$set(sanitize0_changes);
 			const sanitize1_changes = {};
-			if (dirty & /*step*/ 16) sanitize1_changes.string = /*step*/ ctx[4]?.getDescription() || '';
+			if (dirty & /*step*/ 32) sanitize1_changes.string = /*step*/ ctx[5]?.getDescription() || '';
 			sanitize1.$set(sanitize1_changes);
 
-			if (/*form*/ ctx[1]?.message) {
+			if (/*form*/ ctx[2]?.message) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 
-					if (dirty & /*form*/ 2) {
+					if (dirty & /*form*/ 4) {
 						transition_in(if_block1, 1);
 					}
 				} else {
@@ -32421,8 +32709,8 @@ function create_default_slot$5(ctx) {
 				check_outros();
 			}
 
-			if (dirty & /*step, metadata, determineSubmission, $styleStore*/ 3096) {
-				each_value = /*step*/ ctx[4]?.callbacks;
+			if (dirty & /*step, metadata, determineSubmission, $styleStore*/ 6192) {
+				each_value = /*step*/ ctx[5]?.callbacks;
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -32448,11 +32736,11 @@ function create_default_slot$5(ctx) {
 				check_outros();
 			}
 
-			if (/*metadata*/ ctx[3]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[3]?.step?.derived.isStepSelfSubmittable) {
+			if (/*metadata*/ ctx[4]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[4]?.step?.derived.isStepSelfSubmittable) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 
-					if (dirty & /*metadata*/ 8) {
+					if (dirty & /*metadata*/ 16) {
 						transition_in(if_block2, 1);
 					}
 				} else {
@@ -32472,7 +32760,7 @@ function create_default_slot$5(ctx) {
 			}
 
 			const backto_changes = {};
-			if (dirty & /*journey*/ 4) backto_changes.journey = /*journey*/ ctx[2];
+			if (dirty & /*journey*/ 8) backto_changes.journey = /*journey*/ ctx[3];
 			backto.$set(backto_changes);
 		},
 		i(local) {
@@ -32511,7 +32799,7 @@ function create_default_slot$5(ctx) {
 			if (detaching) detach(header);
 			destroy_component(sanitize0);
 			destroy_component(sanitize1);
-			/*header_binding*/ ctx[13](null);
+			/*header_binding*/ ctx[14](null);
 			if (detaching) detach(t2);
 			if (if_block1) if_block1.d(detaching);
 			if (detaching) detach(t3);
@@ -32530,14 +32818,14 @@ function create_fragment$7(ctx) {
 	let current;
 
 	function form_1_formEl_binding(value) {
-		/*form_1_formEl_binding*/ ctx[14](value);
+		/*form_1_formEl_binding*/ ctx[15](value);
 	}
 
 	let form_1_props = {
-		ariaDescribedBy: /*formAriaDescriptor*/ ctx[7],
+		ariaDescribedBy: /*formAriaDescriptor*/ ctx[8],
 		id: formElementId,
-		needsFocus: /*formNeedsFocus*/ ctx[8],
-		onSubmitWhenValid: /*submitFormWrapper*/ ctx[12],
+		needsFocus: /*formNeedsFocus*/ ctx[9],
+		onSubmitWhenValid: /*submitFormWrapper*/ ctx[13],
 		$$slots: { default: [create_default_slot$5] },
 		$$scope: { ctx }
 	};
@@ -32559,10 +32847,10 @@ function create_fragment$7(ctx) {
 		},
 		p(ctx, [dirty]) {
 			const form_1_changes = {};
-			if (dirty & /*formAriaDescriptor*/ 128) form_1_changes.ariaDescribedBy = /*formAriaDescriptor*/ ctx[7];
-			if (dirty & /*formNeedsFocus*/ 256) form_1_changes.needsFocus = /*formNeedsFocus*/ ctx[8];
+			if (dirty & /*formAriaDescriptor*/ 256) form_1_changes.ariaDescribedBy = /*formAriaDescriptor*/ ctx[8];
+			if (dirty & /*formNeedsFocus*/ 512) form_1_changes.needsFocus = /*formNeedsFocus*/ ctx[9];
 
-			if (dirty & /*$$scope, journey, metadata, step, $styleStore, alertNeedsFocus, formMessageKey, form, linkWrapper*/ 263806) {
+			if (dirty & /*$$scope, journey, metadata, step, $styleStore, alertNeedsFocus, formMessageKey, form, linkWrapper, componentStyle*/ 527614) {
 				form_1_changes.$$scope = { dirty, ctx };
 			}
 
@@ -32595,7 +32883,8 @@ const formElementId = 'genericStepForm';
 
 function instance$7($$self, $$props, $$invalidate) {
 	let $styleStore;
-	component_subscribe($$self, styleStore, $$value => $$invalidate(10, $styleStore = $$value));
+	component_subscribe($$self, styleStore, $$value => $$invalidate(11, $styleStore = $$value));
+	let { componentStyle } = $$props;
 	let { form } = $$props;
 	let { formEl = null } = $$props;
 	let { journey } = $$props;
@@ -32617,20 +32906,20 @@ function instance$7($$self, $$props, $$invalidate) {
 	}
 
 	function submitFormWrapper() {
-		$$invalidate(5, alertNeedsFocus = false);
-		$$invalidate(8, formNeedsFocus = false);
+		$$invalidate(6, alertNeedsFocus = false);
+		$$invalidate(9, formNeedsFocus = false);
 		form?.submit();
 	}
 
 	afterUpdate(() => {
 		if (form?.message) {
-			$$invalidate(7, formAriaDescriptor = formFailureMessageId);
-			$$invalidate(5, alertNeedsFocus = true);
-			$$invalidate(8, formNeedsFocus = false);
+			$$invalidate(8, formAriaDescriptor = formFailureMessageId);
+			$$invalidate(6, alertNeedsFocus = true);
+			$$invalidate(9, formNeedsFocus = false);
 		} else {
-			$$invalidate(7, formAriaDescriptor = formHeaderId);
-			$$invalidate(5, alertNeedsFocus = false);
-			$$invalidate(8, formNeedsFocus = true);
+			$$invalidate(8, formAriaDescriptor = formHeaderId);
+			$$invalidate(6, alertNeedsFocus = false);
+			$$invalidate(9, formNeedsFocus = true);
 		}
 	});
 
@@ -32639,7 +32928,7 @@ function instance$7($$self, $$props, $$invalidate) {
 	function header_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			linkWrapper = $$value;
-			$$invalidate(9, linkWrapper);
+			$$invalidate(10, linkWrapper);
 		});
 	}
 
@@ -32649,24 +32938,26 @@ function instance$7($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('form' in $$props) $$invalidate(1, form = $$props.form);
+		if ('componentStyle' in $$props) $$invalidate(1, componentStyle = $$props.componentStyle);
+		if ('form' in $$props) $$invalidate(2, form = $$props.form);
 		if ('formEl' in $$props) $$invalidate(0, formEl = $$props.formEl);
-		if ('journey' in $$props) $$invalidate(2, journey = $$props.journey);
-		if ('metadata' in $$props) $$invalidate(3, metadata = $$props.metadata);
-		if ('step' in $$props) $$invalidate(4, step = $$props.step);
+		if ('journey' in $$props) $$invalidate(3, journey = $$props.journey);
+		if ('metadata' in $$props) $$invalidate(4, metadata = $$props.metadata);
+		if ('step' in $$props) $$invalidate(5, step = $$props.step);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*step, form*/ 18) {
+		if ($$self.$$.dirty & /*step, form*/ 36) {
 			{
 				shouldRedirectFromStep(step) && FRAuth$1.redirect(step);
-				$$invalidate(6, formMessageKey = convertStringToKey(form?.message));
+				$$invalidate(7, formMessageKey = convertStringToKey(form?.message));
 			}
 		}
 	};
 
 	return [
 		formEl,
+		componentStyle,
 		form,
 		journey,
 		metadata,
@@ -32689,11 +32980,12 @@ class Generic extends SvelteComponent {
 		super();
 
 		init(this, options, instance$7, create_fragment$7, safe_not_equal, {
-			form: 1,
+			componentStyle: 1,
+			form: 2,
 			formEl: 0,
-			journey: 2,
-			metadata: 3,
-			step: 4
+			journey: 3,
+			metadata: 4,
+			step: 5
 		});
 	}
 }
@@ -32806,13 +33098,101 @@ class Key_icon extends SvelteComponent {
 
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[10] = list[i];
-	child_ctx[12] = i;
+	child_ctx[11] = list[i];
+	child_ctx[13] = i;
 	return child_ctx;
 }
 
-// (39:2) {#if form?.icon}
+// (38:2) {#if componentStyle !== 'inline'}
 function create_if_block_2$3(ctx) {
+	let t0;
+	let h1;
+	let t1;
+	let t2;
+	let p;
+	let t3;
+	let current;
+	let if_block = /*form*/ ctx[2]?.icon && create_if_block_3$3();
+
+	t1 = new Locale_strings({
+			props: { key: "twoFactorAuthentication" }
+		});
+
+	t3 = new Locale_strings({
+			props: { key: "useTheAuthenticatorAppOnYourPhone" }
+		});
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			t0 = space();
+			h1 = element("h1");
+			create_component(t1.$$.fragment);
+			t2 = space();
+			p = element("p");
+			create_component(t3.$$.fragment);
+			attr(h1, "class", "tw_primary-header dark:tw_primary-header_dark");
+			attr(p, "class", "tw_text-center tw_text-sm tw_-mt-5 tw_mb-2 tw_py-4 tw_text-secondary-dark dark:tw_text-secondary-light");
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, t0, anchor);
+			insert(target, h1, anchor);
+			mount_component(t1, h1, null);
+			insert(target, t2, anchor);
+			insert(target, p, anchor);
+			mount_component(t3, p, null);
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (/*form*/ ctx[2]?.icon) {
+				if (if_block) {
+					if (dirty & /*form*/ 4) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block_3$3();
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(t0.parentNode, t0);
+				}
+			} else if (if_block) {
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			transition_in(t1.$$.fragment, local);
+			transition_in(t3.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			transition_out(t1.$$.fragment, local);
+			transition_out(t3.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(t0);
+			if (detaching) detach(h1);
+			destroy_component(t1);
+			if (detaching) detach(t2);
+			if (detaching) detach(p);
+			destroy_component(t3);
+		}
+	};
+}
+
+// (39:4) {#if form?.icon}
+function create_if_block_3$3(ctx) {
 	let div;
 	let keyicon;
 	let current;
@@ -32851,7 +33231,7 @@ function create_if_block_2$3(ctx) {
 	};
 }
 
-// (53:2) {#if form?.message}
+// (54:2) {#if form?.message}
 function create_if_block_1$3(ctx) {
 	let alert;
 	let current;
@@ -32859,7 +33239,7 @@ function create_if_block_1$3(ctx) {
 	alert = new Alert({
 			props: {
 				id: "formFailureMessageAlert",
-				needsFocus: /*alertNeedsFocus*/ ctx[5],
+				needsFocus: /*alertNeedsFocus*/ ctx[6],
 				type: "error",
 				$$slots: { default: [create_default_slot_2$2] },
 				$$scope: { ctx }
@@ -32876,9 +33256,9 @@ function create_if_block_1$3(ctx) {
 		},
 		p(ctx, dirty) {
 			const alert_changes = {};
-			if (dirty & /*alertNeedsFocus*/ 32) alert_changes.needsFocus = /*alertNeedsFocus*/ ctx[5];
+			if (dirty & /*alertNeedsFocus*/ 64) alert_changes.needsFocus = /*alertNeedsFocus*/ ctx[6];
 
-			if (dirty & /*$$scope, formMessageKey, form*/ 8258) {
+			if (dirty & /*$$scope, formMessageKey, form*/ 16516) {
 				alert_changes.$$scope = { dirty, ctx };
 			}
 
@@ -32899,9 +33279,9 @@ function create_if_block_1$3(ctx) {
 	};
 }
 
-// (54:4) <Alert id="formFailureMessageAlert" needsFocus={alertNeedsFocus} type="error">
+// (55:4) <Alert id="formFailureMessageAlert" needsFocus={alertNeedsFocus} type="error">
 function create_default_slot_2$2(ctx) {
-	let t_value = interpolate(/*formMessageKey*/ ctx[6], null, /*form*/ ctx[1]?.message) + "";
+	let t_value = interpolate(/*formMessageKey*/ ctx[7], null, /*form*/ ctx[2]?.message) + "";
 	let t;
 
 	return {
@@ -32912,7 +33292,7 @@ function create_default_slot_2$2(ctx) {
 			insert(target, t, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*formMessageKey, form*/ 66 && t_value !== (t_value = interpolate(/*formMessageKey*/ ctx[6], null, /*form*/ ctx[1]?.message) + "")) set_data(t, t_value);
+			if (dirty & /*formMessageKey, form*/ 132 && t_value !== (t_value = interpolate(/*formMessageKey*/ ctx[7], null, /*form*/ ctx[2]?.message) + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(t);
@@ -32920,7 +33300,7 @@ function create_default_slot_2$2(ctx) {
 	};
 }
 
-// (59:2) {#each step?.callbacks as callback, idx}
+// (60:2) {#each step?.callbacks as callback, idx}
 function create_each_block$2(ctx) {
 	let callbackmapper;
 	let current;
@@ -32928,11 +33308,11 @@ function create_each_block$2(ctx) {
 	callbackmapper = new Callback_mapper({
 			props: {
 				props: {
-					callback: /*callback*/ ctx[10],
-					callbackMetadata: /*metadata*/ ctx[3]?.callbacks[/*idx*/ ctx[12]],
-					selfSubmitFunction: /*determineSubmission*/ ctx[8],
-					stepMetadata: /*metadata*/ ctx[3]?.step && { .../*metadata*/ ctx[3].step },
-					style: /*$style*/ ctx[7]
+					callback: /*callback*/ ctx[11],
+					callbackMetadata: /*metadata*/ ctx[4]?.callbacks[/*idx*/ ctx[13]],
+					selfSubmitFunction: /*determineSubmission*/ ctx[9],
+					stepMetadata: /*metadata*/ ctx[4]?.step && { .../*metadata*/ ctx[4].step },
+					style: /*$style*/ ctx[8]
 				}
 			}
 		});
@@ -32948,12 +33328,12 @@ function create_each_block$2(ctx) {
 		p(ctx, dirty) {
 			const callbackmapper_changes = {};
 
-			if (dirty & /*step, metadata, $style*/ 152) callbackmapper_changes.props = {
-				callback: /*callback*/ ctx[10],
-				callbackMetadata: /*metadata*/ ctx[3]?.callbacks[/*idx*/ ctx[12]],
-				selfSubmitFunction: /*determineSubmission*/ ctx[8],
-				stepMetadata: /*metadata*/ ctx[3]?.step && { .../*metadata*/ ctx[3].step },
-				style: /*$style*/ ctx[7]
+			if (dirty & /*step, metadata, $style*/ 304) callbackmapper_changes.props = {
+				callback: /*callback*/ ctx[11],
+				callbackMetadata: /*metadata*/ ctx[4]?.callbacks[/*idx*/ ctx[13]],
+				selfSubmitFunction: /*determineSubmission*/ ctx[9],
+				stepMetadata: /*metadata*/ ctx[4]?.step && { .../*metadata*/ ctx[4].step },
+				style: /*$style*/ ctx[8]
 			};
 
 			callbackmapper.$set(callbackmapper_changes);
@@ -32973,14 +33353,14 @@ function create_each_block$2(ctx) {
 	};
 }
 
-// (71:2) {#if metadata?.step?.derived.isUserInputOptional || !metadata?.step?.derived.isStepSelfSubmittable}
+// (72:2) {#if metadata?.step?.derived.isUserInputOptional || !metadata?.step?.derived.isStepSelfSubmittable}
 function create_if_block$4(ctx) {
 	let button;
 	let current;
 
 	button = new Button({
 			props: {
-				busy: /*journey*/ ctx[2]?.loading,
+				busy: /*journey*/ ctx[3]?.loading,
 				style: "primary",
 				type: "submit",
 				width: "full",
@@ -32999,9 +33379,9 @@ function create_if_block$4(ctx) {
 		},
 		p(ctx, dirty) {
 			const button_changes = {};
-			if (dirty & /*journey*/ 4) button_changes.busy = /*journey*/ ctx[2]?.loading;
+			if (dirty & /*journey*/ 8) button_changes.busy = /*journey*/ ctx[3]?.loading;
 
-			if (dirty & /*$$scope*/ 8192) {
+			if (dirty & /*$$scope*/ 16384) {
 				button_changes.$$scope = { dirty, ctx };
 			}
 
@@ -33022,7 +33402,7 @@ function create_if_block$4(ctx) {
 	};
 }
 
-// (72:4) <Button busy={journey?.loading} style="primary" type="submit" width="full">
+// (73:4) <Button busy={journey?.loading} style="primary" type="submit" width="full">
 function create_default_slot_1$3(ctx) {
 	let t;
 	let current;
@@ -33052,31 +33432,16 @@ function create_default_slot_1$3(ctx) {
 	};
 }
 
-// (38:0) <Form bind:formEl ariaDescribedBy="formFailureMessageAlert" onSubmitWhenValid={form?.submit}>
+// (37:0) <Form bind:formEl ariaDescribedBy="formFailureMessageAlert" onSubmitWhenValid={form?.submit}>
 function create_default_slot$4(ctx) {
 	let t0;
-	let h1;
 	let t1;
 	let t2;
-	let p;
-	let t3;
-	let t4;
-	let t5;
-	let t6;
 	let if_block2_anchor;
 	let current;
-	let if_block0 = /*form*/ ctx[1]?.icon && create_if_block_2$3();
-
-	t1 = new Locale_strings({
-			props: { key: "twoFactorAuthentication" }
-		});
-
-	t3 = new Locale_strings({
-			props: { key: "useTheAuthenticatorAppOnYourPhone" }
-		});
-
-	let if_block1 = /*form*/ ctx[1]?.message && create_if_block_1$3(ctx);
-	let each_value = /*step*/ ctx[4]?.callbacks;
+	let if_block0 = /*componentStyle*/ ctx[1] !== 'inline' && create_if_block_2$3(ctx);
+	let if_block1 = /*form*/ ctx[2]?.message && create_if_block_1$3(ctx);
+	let each_value = /*step*/ ctx[5]?.callbacks;
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -33087,60 +33452,48 @@ function create_default_slot$4(ctx) {
 		each_blocks[i] = null;
 	});
 
-	let if_block2 = (/*metadata*/ ctx[3]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[3]?.step?.derived.isStepSelfSubmittable) && create_if_block$4(ctx);
+	let if_block2 = (/*metadata*/ ctx[4]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[4]?.step?.derived.isStepSelfSubmittable) && create_if_block$4(ctx);
 
 	return {
 		c() {
 			if (if_block0) if_block0.c();
 			t0 = space();
-			h1 = element("h1");
-			create_component(t1.$$.fragment);
-			t2 = space();
-			p = element("p");
-			create_component(t3.$$.fragment);
-			t4 = space();
 			if (if_block1) if_block1.c();
-			t5 = space();
+			t1 = space();
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
-			t6 = space();
+			t2 = space();
 			if (if_block2) if_block2.c();
 			if_block2_anchor = empty();
-			attr(h1, "class", "tw_primary-header dark:tw_primary-header_dark");
-			attr(p, "class", "tw_text-center tw_text-sm tw_-mt-5 tw_mb-2 tw_py-4 tw_text-secondary-dark dark:tw_text-secondary-light");
 		},
 		m(target, anchor) {
 			if (if_block0) if_block0.m(target, anchor);
 			insert(target, t0, anchor);
-			insert(target, h1, anchor);
-			mount_component(t1, h1, null);
-			insert(target, t2, anchor);
-			insert(target, p, anchor);
-			mount_component(t3, p, null);
-			insert(target, t4, anchor);
 			if (if_block1) if_block1.m(target, anchor);
-			insert(target, t5, anchor);
+			insert(target, t1, anchor);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(target, anchor);
 			}
 
-			insert(target, t6, anchor);
+			insert(target, t2, anchor);
 			if (if_block2) if_block2.m(target, anchor);
 			insert(target, if_block2_anchor, anchor);
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (/*form*/ ctx[1]?.icon) {
+			if (/*componentStyle*/ ctx[1] !== 'inline') {
 				if (if_block0) {
-					if (dirty & /*form*/ 2) {
+					if_block0.p(ctx, dirty);
+
+					if (dirty & /*componentStyle*/ 2) {
 						transition_in(if_block0, 1);
 					}
 				} else {
-					if_block0 = create_if_block_2$3();
+					if_block0 = create_if_block_2$3(ctx);
 					if_block0.c();
 					transition_in(if_block0, 1);
 					if_block0.m(t0.parentNode, t0);
@@ -33155,18 +33508,18 @@ function create_default_slot$4(ctx) {
 				check_outros();
 			}
 
-			if (/*form*/ ctx[1]?.message) {
+			if (/*form*/ ctx[2]?.message) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 
-					if (dirty & /*form*/ 2) {
+					if (dirty & /*form*/ 4) {
 						transition_in(if_block1, 1);
 					}
 				} else {
 					if_block1 = create_if_block_1$3(ctx);
 					if_block1.c();
 					transition_in(if_block1, 1);
-					if_block1.m(t5.parentNode, t5);
+					if_block1.m(t1.parentNode, t1);
 				}
 			} else if (if_block1) {
 				group_outros();
@@ -33178,8 +33531,8 @@ function create_default_slot$4(ctx) {
 				check_outros();
 			}
 
-			if (dirty & /*step, metadata, determineSubmission, $style*/ 408) {
-				each_value = /*step*/ ctx[4]?.callbacks;
+			if (dirty & /*step, metadata, determineSubmission, $style*/ 816) {
+				each_value = /*step*/ ctx[5]?.callbacks;
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -33192,7 +33545,7 @@ function create_default_slot$4(ctx) {
 						each_blocks[i] = create_each_block$2(child_ctx);
 						each_blocks[i].c();
 						transition_in(each_blocks[i], 1);
-						each_blocks[i].m(t6.parentNode, t6);
+						each_blocks[i].m(t2.parentNode, t2);
 					}
 				}
 
@@ -33205,11 +33558,11 @@ function create_default_slot$4(ctx) {
 				check_outros();
 			}
 
-			if (/*metadata*/ ctx[3]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[3]?.step?.derived.isStepSelfSubmittable) {
+			if (/*metadata*/ ctx[4]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[4]?.step?.derived.isStepSelfSubmittable) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 
-					if (dirty & /*metadata*/ 8) {
+					if (dirty & /*metadata*/ 16) {
 						transition_in(if_block2, 1);
 					}
 				} else {
@@ -33231,8 +33584,6 @@ function create_default_slot$4(ctx) {
 		i(local) {
 			if (current) return;
 			transition_in(if_block0);
-			transition_in(t1.$$.fragment, local);
-			transition_in(t3.$$.fragment, local);
 			transition_in(if_block1);
 
 			for (let i = 0; i < each_value.length; i += 1) {
@@ -33244,8 +33595,6 @@ function create_default_slot$4(ctx) {
 		},
 		o(local) {
 			transition_out(if_block0);
-			transition_out(t1.$$.fragment, local);
-			transition_out(t3.$$.fragment, local);
 			transition_out(if_block1);
 			each_blocks = each_blocks.filter(Boolean);
 
@@ -33259,16 +33608,10 @@ function create_default_slot$4(ctx) {
 		d(detaching) {
 			if (if_block0) if_block0.d(detaching);
 			if (detaching) detach(t0);
-			if (detaching) detach(h1);
-			destroy_component(t1);
-			if (detaching) detach(t2);
-			if (detaching) detach(p);
-			destroy_component(t3);
-			if (detaching) detach(t4);
 			if (if_block1) if_block1.d(detaching);
-			if (detaching) detach(t5);
+			if (detaching) detach(t1);
 			destroy_each(each_blocks, detaching);
-			if (detaching) detach(t6);
+			if (detaching) detach(t2);
 			if (if_block2) if_block2.d(detaching);
 			if (detaching) detach(if_block2_anchor);
 		}
@@ -33281,12 +33624,12 @@ function create_fragment$5(ctx) {
 	let current;
 
 	function form_1_formEl_binding(value) {
-		/*form_1_formEl_binding*/ ctx[9](value);
+		/*form_1_formEl_binding*/ ctx[10](value);
 	}
 
 	let form_1_props = {
 		ariaDescribedBy: "formFailureMessageAlert",
-		onSubmitWhenValid: /*form*/ ctx[1]?.submit,
+		onSubmitWhenValid: /*form*/ ctx[2]?.submit,
 		$$slots: { default: [create_default_slot$4] },
 		$$scope: { ctx }
 	};
@@ -33308,9 +33651,9 @@ function create_fragment$5(ctx) {
 		},
 		p(ctx, [dirty]) {
 			const form_1_changes = {};
-			if (dirty & /*form*/ 2) form_1_changes.onSubmitWhenValid = /*form*/ ctx[1]?.submit;
+			if (dirty & /*form*/ 4) form_1_changes.onSubmitWhenValid = /*form*/ ctx[2]?.submit;
 
-			if (dirty & /*$$scope, journey, metadata, step, $style, alertNeedsFocus, formMessageKey, form*/ 8446) {
+			if (dirty & /*$$scope, journey, metadata, step, $style, alertNeedsFocus, formMessageKey, form, componentStyle*/ 16894) {
 				form_1_changes.$$scope = { dirty, ctx };
 			}
 
@@ -33339,7 +33682,8 @@ function create_fragment$5(ctx) {
 
 function instance$5($$self, $$props, $$invalidate) {
 	let $style;
-	component_subscribe($$self, styleStore, $$value => $$invalidate(7, $style = $$value));
+	component_subscribe($$self, styleStore, $$value => $$invalidate(8, $style = $$value));
+	let { componentStyle } = $$props;
 	let { form } = $$props;
 	let { formEl = null } = $$props;
 	let { journey } = $$props;
@@ -33358,7 +33702,7 @@ function instance$5($$self, $$props, $$invalidate) {
 	}
 
 	afterUpdate(() => {
-		$$invalidate(5, alertNeedsFocus = !!form?.message);
+		$$invalidate(6, alertNeedsFocus = !!form?.message);
 	});
 
 	function form_1_formEl_binding(value) {
@@ -33367,23 +33711,25 @@ function instance$5($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('form' in $$props) $$invalidate(1, form = $$props.form);
+		if ('componentStyle' in $$props) $$invalidate(1, componentStyle = $$props.componentStyle);
+		if ('form' in $$props) $$invalidate(2, form = $$props.form);
 		if ('formEl' in $$props) $$invalidate(0, formEl = $$props.formEl);
-		if ('journey' in $$props) $$invalidate(2, journey = $$props.journey);
-		if ('metadata' in $$props) $$invalidate(3, metadata = $$props.metadata);
-		if ('step' in $$props) $$invalidate(4, step = $$props.step);
+		if ('journey' in $$props) $$invalidate(3, journey = $$props.journey);
+		if ('metadata' in $$props) $$invalidate(4, metadata = $$props.metadata);
+		if ('step' in $$props) $$invalidate(5, step = $$props.step);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*form*/ 2) {
+		if ($$self.$$.dirty & /*form*/ 4) {
 			{
-				$$invalidate(6, formMessageKey = convertStringToKey(form?.message));
+				$$invalidate(7, formMessageKey = convertStringToKey(form?.message));
 			}
 		}
 	};
 
 	return [
 		formEl,
+		componentStyle,
 		form,
 		journey,
 		metadata,
@@ -33401,11 +33747,12 @@ class One_time_password extends SvelteComponent {
 		super();
 
 		init(this, options, instance$5, create_fragment$5, safe_not_equal, {
-			form: 1,
+			componentStyle: 1,
+			form: 2,
 			formEl: 0,
-			journey: 2,
-			metadata: 3,
-			step: 4
+			journey: 3,
+			metadata: 4,
+			step: 5
 		});
 	}
 }
@@ -33518,13 +33865,100 @@ class New_user_icon extends SvelteComponent {
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[12] = list[i];
-	child_ctx[14] = i;
+	child_ctx[13] = list[i];
+	child_ctx[15] = i;
 	return child_ctx;
 }
 
-// (41:2) {#if form?.icon}
+// (50:2) {#if componentStyle !== 'inline'}
 function create_if_block_2$2(ctx) {
+	let t0;
+	let h1;
+	let t1;
+	let t2;
+	let p;
+	let t3;
+	let current;
+	let if_block = /*form*/ ctx[2]?.icon && create_if_block_3$2();
+	t1 = new Locale_strings({ props: { key: "registerHeader" } });
+
+	t3 = new Locale_strings({
+			props: { key: "alreadyHaveAnAccount", html: true }
+		});
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			t0 = space();
+			h1 = element("h1");
+			create_component(t1.$$.fragment);
+			t2 = space();
+			p = element("p");
+			create_component(t3.$$.fragment);
+			attr(h1, "class", "tw_primary-header dark:tw_primary-header_dark");
+			attr(p, "class", "tw_text-base tw_text-center tw_-mt-5 tw_mb-2 tw_py-4 tw_text-secondary-dark dark:tw_text-secondary-light");
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, t0, anchor);
+			insert(target, h1, anchor);
+			mount_component(t1, h1, null);
+			insert(target, t2, anchor);
+			insert(target, p, anchor);
+			mount_component(t3, p, null);
+			/*p_binding*/ ctx[11](p);
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (/*form*/ ctx[2]?.icon) {
+				if (if_block) {
+					if (dirty & /*form*/ 4) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block_3$2();
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(t0.parentNode, t0);
+				}
+			} else if (if_block) {
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			transition_in(t1.$$.fragment, local);
+			transition_in(t3.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			transition_out(t1.$$.fragment, local);
+			transition_out(t3.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(t0);
+			if (detaching) detach(h1);
+			destroy_component(t1);
+			if (detaching) detach(t2);
+			if (detaching) detach(p);
+			destroy_component(t3);
+			/*p_binding*/ ctx[11](null);
+		}
+	};
+}
+
+// (51:4) {#if form?.icon}
+function create_if_block_3$2(ctx) {
 	let div;
 	let newusericon;
 	let current;
@@ -33563,7 +33997,7 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-// (56:2) {#if form.message}
+// (67:2) {#if form.message}
 function create_if_block_1$2(ctx) {
 	let alert;
 	let current;
@@ -33571,7 +34005,7 @@ function create_if_block_1$2(ctx) {
 	alert = new Alert({
 			props: {
 				id: "formFailureMessageAlert",
-				needsFocus: /*alertNeedsFocus*/ ctx[5],
+				needsFocus: /*alertNeedsFocus*/ ctx[6],
 				type: "error",
 				$$slots: { default: [create_default_slot_2$1] },
 				$$scope: { ctx }
@@ -33588,9 +34022,9 @@ function create_if_block_1$2(ctx) {
 		},
 		p(ctx, dirty) {
 			const alert_changes = {};
-			if (dirty & /*alertNeedsFocus*/ 32) alert_changes.needsFocus = /*alertNeedsFocus*/ ctx[5];
+			if (dirty & /*alertNeedsFocus*/ 64) alert_changes.needsFocus = /*alertNeedsFocus*/ ctx[6];
 
-			if (dirty & /*$$scope, formMessageKey, form*/ 32834) {
+			if (dirty & /*$$scope, formMessageKey, form*/ 65668) {
 				alert_changes.$$scope = { dirty, ctx };
 			}
 
@@ -33611,9 +34045,9 @@ function create_if_block_1$2(ctx) {
 	};
 }
 
-// (57:4) <Alert id="formFailureMessageAlert" needsFocus={alertNeedsFocus} type="error">
+// (68:4) <Alert id="formFailureMessageAlert" needsFocus={alertNeedsFocus} type="error">
 function create_default_slot_2$1(ctx) {
-	let t_value = interpolate(/*formMessageKey*/ ctx[6], null, /*form*/ ctx[1]?.message) + "";
+	let t_value = interpolate(/*formMessageKey*/ ctx[7], null, /*form*/ ctx[2]?.message) + "";
 	let t;
 
 	return {
@@ -33624,7 +34058,7 @@ function create_default_slot_2$1(ctx) {
 			insert(target, t, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*formMessageKey, form*/ 66 && t_value !== (t_value = interpolate(/*formMessageKey*/ ctx[6], null, /*form*/ ctx[1]?.message) + "")) set_data(t, t_value);
+			if (dirty & /*formMessageKey, form*/ 132 && t_value !== (t_value = interpolate(/*formMessageKey*/ ctx[7], null, /*form*/ ctx[2]?.message) + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(t);
@@ -33632,7 +34066,7 @@ function create_default_slot_2$1(ctx) {
 	};
 }
 
-// (62:2) {#each step?.callbacks as callback, idx}
+// (73:2) {#each step?.callbacks as callback, idx}
 function create_each_block$1(ctx) {
 	let callbackmapper;
 	let current;
@@ -33640,11 +34074,11 @@ function create_each_block$1(ctx) {
 	callbackmapper = new Callback_mapper({
 			props: {
 				props: {
-					callback: /*callback*/ ctx[12],
-					callbackMetadata: /*metadata*/ ctx[3]?.callbacks[/*idx*/ ctx[14]],
-					selfSubmitFunction: /*determineSubmission*/ ctx[9],
-					stepMetadata: /*metadata*/ ctx[3]?.step && { .../*metadata*/ ctx[3].step },
-					style: /*$styleStore*/ ctx[8]
+					callback: /*callback*/ ctx[13],
+					callbackMetadata: /*metadata*/ ctx[4]?.callbacks[/*idx*/ ctx[15]],
+					selfSubmitFunction: /*determineSubmission*/ ctx[10],
+					stepMetadata: /*metadata*/ ctx[4]?.step && { .../*metadata*/ ctx[4].step },
+					style: /*$styleStore*/ ctx[9]
 				}
 			}
 		});
@@ -33660,12 +34094,12 @@ function create_each_block$1(ctx) {
 		p(ctx, dirty) {
 			const callbackmapper_changes = {};
 
-			if (dirty & /*step, metadata, $styleStore*/ 280) callbackmapper_changes.props = {
-				callback: /*callback*/ ctx[12],
-				callbackMetadata: /*metadata*/ ctx[3]?.callbacks[/*idx*/ ctx[14]],
-				selfSubmitFunction: /*determineSubmission*/ ctx[9],
-				stepMetadata: /*metadata*/ ctx[3]?.step && { .../*metadata*/ ctx[3].step },
-				style: /*$styleStore*/ ctx[8]
+			if (dirty & /*step, metadata, $styleStore*/ 560) callbackmapper_changes.props = {
+				callback: /*callback*/ ctx[13],
+				callbackMetadata: /*metadata*/ ctx[4]?.callbacks[/*idx*/ ctx[15]],
+				selfSubmitFunction: /*determineSubmission*/ ctx[10],
+				stepMetadata: /*metadata*/ ctx[4]?.step && { .../*metadata*/ ctx[4].step },
+				style: /*$styleStore*/ ctx[9]
 			};
 
 			callbackmapper.$set(callbackmapper_changes);
@@ -33685,14 +34119,14 @@ function create_each_block$1(ctx) {
 	};
 }
 
-// (74:2) {#if metadata?.step?.derived.isUserInputOptional || !metadata?.step?.derived.isStepSelfSubmittable}
+// (85:2) {#if metadata?.step?.derived.isUserInputOptional || !metadata?.step?.derived.isStepSelfSubmittable}
 function create_if_block$3(ctx) {
 	let button;
 	let current;
 
 	button = new Button({
 			props: {
-				busy: /*journey*/ ctx[2]?.loading,
+				busy: /*journey*/ ctx[3]?.loading,
 				style: "primary",
 				type: "submit",
 				width: "full",
@@ -33711,9 +34145,9 @@ function create_if_block$3(ctx) {
 		},
 		p(ctx, dirty) {
 			const button_changes = {};
-			if (dirty & /*journey*/ 4) button_changes.busy = /*journey*/ ctx[2]?.loading;
+			if (dirty & /*journey*/ 8) button_changes.busy = /*journey*/ ctx[3]?.loading;
 
-			if (dirty & /*$$scope*/ 32768) {
+			if (dirty & /*$$scope*/ 65536) {
 				button_changes.$$scope = { dirty, ctx };
 			}
 
@@ -33734,7 +34168,7 @@ function create_if_block$3(ctx) {
 	};
 }
 
-// (75:4) <Button busy={journey?.loading} style="primary" type="submit" width="full">
+// (86:4) <Button busy={journey?.loading} style="primary" type="submit" width="full">
 function create_default_slot_1$2(ctx) {
 	let t;
 	let current;
@@ -33764,28 +34198,16 @@ function create_default_slot_1$2(ctx) {
 	};
 }
 
-// (40:0) <Form bind:formEl ariaDescribedBy="formFailureMessageAlert" onSubmitWhenValid={form?.submit}>
+// (49:0) <Form bind:formEl ariaDescribedBy="formFailureMessageAlert" onSubmitWhenValid={form?.submit}>
 function create_default_slot$3(ctx) {
 	let t0;
-	let h1;
 	let t1;
 	let t2;
-	let p;
-	let t3;
-	let t4;
-	let t5;
-	let t6;
 	let if_block2_anchor;
 	let current;
-	let if_block0 = /*form*/ ctx[1]?.icon && create_if_block_2$2();
-	t1 = new Locale_strings({ props: { key: "registerHeader" } });
-
-	t3 = new Locale_strings({
-			props: { key: "alreadyHaveAnAccount", html: true }
-		});
-
-	let if_block1 = /*form*/ ctx[1].message && create_if_block_1$2(ctx);
-	let each_value = /*step*/ ctx[4]?.callbacks;
+	let if_block0 = /*componentStyle*/ ctx[1] !== 'inline' && create_if_block_2$2(ctx);
+	let if_block1 = /*form*/ ctx[2].message && create_if_block_1$2(ctx);
+	let each_value = /*step*/ ctx[5]?.callbacks;
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -33796,61 +34218,48 @@ function create_default_slot$3(ctx) {
 		each_blocks[i] = null;
 	});
 
-	let if_block2 = (/*metadata*/ ctx[3]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[3]?.step?.derived.isStepSelfSubmittable) && create_if_block$3(ctx);
+	let if_block2 = (/*metadata*/ ctx[4]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[4]?.step?.derived.isStepSelfSubmittable) && create_if_block$3(ctx);
 
 	return {
 		c() {
 			if (if_block0) if_block0.c();
 			t0 = space();
-			h1 = element("h1");
-			create_component(t1.$$.fragment);
-			t2 = space();
-			p = element("p");
-			create_component(t3.$$.fragment);
-			t4 = space();
 			if (if_block1) if_block1.c();
-			t5 = space();
+			t1 = space();
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
-			t6 = space();
+			t2 = space();
 			if (if_block2) if_block2.c();
 			if_block2_anchor = empty();
-			attr(h1, "class", "tw_primary-header dark:tw_primary-header_dark");
-			attr(p, "class", "tw_text-base tw_text-center tw_-mt-5 tw_mb-2 tw_py-4 tw_text-secondary-dark dark:tw_text-secondary-light");
 		},
 		m(target, anchor) {
 			if (if_block0) if_block0.m(target, anchor);
 			insert(target, t0, anchor);
-			insert(target, h1, anchor);
-			mount_component(t1, h1, null);
-			insert(target, t2, anchor);
-			insert(target, p, anchor);
-			mount_component(t3, p, null);
-			/*p_binding*/ ctx[10](p);
-			insert(target, t4, anchor);
 			if (if_block1) if_block1.m(target, anchor);
-			insert(target, t5, anchor);
+			insert(target, t1, anchor);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(target, anchor);
 			}
 
-			insert(target, t6, anchor);
+			insert(target, t2, anchor);
 			if (if_block2) if_block2.m(target, anchor);
 			insert(target, if_block2_anchor, anchor);
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (/*form*/ ctx[1]?.icon) {
+			if (/*componentStyle*/ ctx[1] !== 'inline') {
 				if (if_block0) {
-					if (dirty & /*form*/ 2) {
+					if_block0.p(ctx, dirty);
+
+					if (dirty & /*componentStyle*/ 2) {
 						transition_in(if_block0, 1);
 					}
 				} else {
-					if_block0 = create_if_block_2$2();
+					if_block0 = create_if_block_2$2(ctx);
 					if_block0.c();
 					transition_in(if_block0, 1);
 					if_block0.m(t0.parentNode, t0);
@@ -33865,18 +34274,18 @@ function create_default_slot$3(ctx) {
 				check_outros();
 			}
 
-			if (/*form*/ ctx[1].message) {
+			if (/*form*/ ctx[2].message) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 
-					if (dirty & /*form*/ 2) {
+					if (dirty & /*form*/ 4) {
 						transition_in(if_block1, 1);
 					}
 				} else {
 					if_block1 = create_if_block_1$2(ctx);
 					if_block1.c();
 					transition_in(if_block1, 1);
-					if_block1.m(t5.parentNode, t5);
+					if_block1.m(t1.parentNode, t1);
 				}
 			} else if (if_block1) {
 				group_outros();
@@ -33888,8 +34297,8 @@ function create_default_slot$3(ctx) {
 				check_outros();
 			}
 
-			if (dirty & /*step, metadata, determineSubmission, $styleStore*/ 792) {
-				each_value = /*step*/ ctx[4]?.callbacks;
+			if (dirty & /*step, metadata, determineSubmission, $styleStore*/ 1584) {
+				each_value = /*step*/ ctx[5]?.callbacks;
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -33902,7 +34311,7 @@ function create_default_slot$3(ctx) {
 						each_blocks[i] = create_each_block$1(child_ctx);
 						each_blocks[i].c();
 						transition_in(each_blocks[i], 1);
-						each_blocks[i].m(t6.parentNode, t6);
+						each_blocks[i].m(t2.parentNode, t2);
 					}
 				}
 
@@ -33915,11 +34324,11 @@ function create_default_slot$3(ctx) {
 				check_outros();
 			}
 
-			if (/*metadata*/ ctx[3]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[3]?.step?.derived.isStepSelfSubmittable) {
+			if (/*metadata*/ ctx[4]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[4]?.step?.derived.isStepSelfSubmittable) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 
-					if (dirty & /*metadata*/ 8) {
+					if (dirty & /*metadata*/ 16) {
 						transition_in(if_block2, 1);
 					}
 				} else {
@@ -33941,8 +34350,6 @@ function create_default_slot$3(ctx) {
 		i(local) {
 			if (current) return;
 			transition_in(if_block0);
-			transition_in(t1.$$.fragment, local);
-			transition_in(t3.$$.fragment, local);
 			transition_in(if_block1);
 
 			for (let i = 0; i < each_value.length; i += 1) {
@@ -33954,8 +34361,6 @@ function create_default_slot$3(ctx) {
 		},
 		o(local) {
 			transition_out(if_block0);
-			transition_out(t1.$$.fragment, local);
-			transition_out(t3.$$.fragment, local);
 			transition_out(if_block1);
 			each_blocks = each_blocks.filter(Boolean);
 
@@ -33969,17 +34374,10 @@ function create_default_slot$3(ctx) {
 		d(detaching) {
 			if (if_block0) if_block0.d(detaching);
 			if (detaching) detach(t0);
-			if (detaching) detach(h1);
-			destroy_component(t1);
-			if (detaching) detach(t2);
-			if (detaching) detach(p);
-			destroy_component(t3);
-			/*p_binding*/ ctx[10](null);
-			if (detaching) detach(t4);
 			if (if_block1) if_block1.d(detaching);
-			if (detaching) detach(t5);
+			if (detaching) detach(t1);
 			destroy_each(each_blocks, detaching);
-			if (detaching) detach(t6);
+			if (detaching) detach(t2);
 			if (if_block2) if_block2.d(detaching);
 			if (detaching) detach(if_block2_anchor);
 		}
@@ -33992,12 +34390,12 @@ function create_fragment$3(ctx) {
 	let current;
 
 	function form_1_formEl_binding(value) {
-		/*form_1_formEl_binding*/ ctx[11](value);
+		/*form_1_formEl_binding*/ ctx[12](value);
 	}
 
 	let form_1_props = {
 		ariaDescribedBy: "formFailureMessageAlert",
-		onSubmitWhenValid: /*form*/ ctx[1]?.submit,
+		onSubmitWhenValid: /*form*/ ctx[2]?.submit,
 		$$slots: { default: [create_default_slot$3] },
 		$$scope: { ctx }
 	};
@@ -34019,9 +34417,9 @@ function create_fragment$3(ctx) {
 		},
 		p(ctx, [dirty]) {
 			const form_1_changes = {};
-			if (dirty & /*form*/ 2) form_1_changes.onSubmitWhenValid = /*form*/ ctx[1]?.submit;
+			if (dirty & /*form*/ 4) form_1_changes.onSubmitWhenValid = /*form*/ ctx[2]?.submit;
 
-			if (dirty & /*$$scope, journey, metadata, step, $styleStore, alertNeedsFocus, formMessageKey, form, linkWrapper*/ 33278) {
+			if (dirty & /*$$scope, journey, metadata, step, $styleStore, alertNeedsFocus, formMessageKey, form, linkWrapper, componentStyle*/ 66558) {
 				form_1_changes.$$scope = { dirty, ctx };
 			}
 
@@ -34050,7 +34448,8 @@ function create_fragment$3(ctx) {
 
 function instance$3($$self, $$props, $$invalidate) {
 	let $styleStore;
-	component_subscribe($$self, styleStore, $$value => $$invalidate(8, $styleStore = $$value));
+	component_subscribe($$self, styleStore, $$value => $$invalidate(9, $styleStore = $$value));
+	let { componentStyle } = $$props;
 	let { form } = $$props;
 	let { formEl = null } = $$props;
 	let { journey } = $$props;
@@ -34070,15 +34469,25 @@ function instance$3($$self, $$props, $$invalidate) {
 	}
 
 	afterUpdate(() => {
-		$$invalidate(5, alertNeedsFocus = !!form?.message);
+		$$invalidate(6, alertNeedsFocus = !!form?.message);
 	});
 
-	onMount(() => captureLinks(linkWrapper, journey));
+	onMount(() => {
+		if (componentStyle === 'modal') {
+			captureLinks(linkWrapper, journey);
+		}
+	});
+
+	onMount(() => {
+		if (componentStyle === 'modal') {
+			captureLinks(linkWrapper, journey);
+		}
+	});
 
 	function p_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			linkWrapper = $$value;
-			$$invalidate(7, linkWrapper);
+			$$invalidate(8, linkWrapper);
 		});
 	}
 
@@ -34088,23 +34497,25 @@ function instance$3($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('form' in $$props) $$invalidate(1, form = $$props.form);
+		if ('componentStyle' in $$props) $$invalidate(1, componentStyle = $$props.componentStyle);
+		if ('form' in $$props) $$invalidate(2, form = $$props.form);
 		if ('formEl' in $$props) $$invalidate(0, formEl = $$props.formEl);
-		if ('journey' in $$props) $$invalidate(2, journey = $$props.journey);
-		if ('metadata' in $$props) $$invalidate(3, metadata = $$props.metadata);
-		if ('step' in $$props) $$invalidate(4, step = $$props.step);
+		if ('journey' in $$props) $$invalidate(3, journey = $$props.journey);
+		if ('metadata' in $$props) $$invalidate(4, metadata = $$props.metadata);
+		if ('step' in $$props) $$invalidate(5, step = $$props.step);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*form*/ 2) {
+		if ($$self.$$.dirty & /*form*/ 4) {
 			{
-				$$invalidate(6, formMessageKey = convertStringToKey(form?.message));
+				$$invalidate(7, formMessageKey = convertStringToKey(form?.message));
 			}
 		}
 	};
 
 	return [
 		formEl,
+		componentStyle,
 		form,
 		journey,
 		metadata,
@@ -34124,11 +34535,12 @@ class Registration extends SvelteComponent {
 		super();
 
 		init(this, options, instance$3, create_fragment$3, safe_not_equal, {
-			form: 1,
+			componentStyle: 1,
+			form: 2,
 			formEl: 0,
-			journey: 2,
-			metadata: 3,
-			step: 4
+			journey: 3,
+			metadata: 4,
+			step: 5
 		});
 	}
 }
@@ -34137,13 +34549,79 @@ class Registration extends SvelteComponent {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[14] = list[i];
-	child_ctx[16] = i;
+	child_ctx[15] = list[i];
+	child_ctx[17] = i;
 	return child_ctx;
 }
 
-// (41:2) {#if form?.icon}
-function create_if_block_2$1(ctx) {
+// (45:2) {#if componentStyle !== 'inline'}
+function create_if_block_3$1(ctx) {
+	let t0;
+	let h1;
+	let t1;
+	let current;
+	let if_block = /*form*/ ctx[2]?.icon && create_if_block_4();
+	t1 = new Locale_strings({ props: { key: "loginHeader" } });
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			t0 = space();
+			h1 = element("h1");
+			create_component(t1.$$.fragment);
+			attr(h1, "class", "tw_primary-header dark:tw_primary-header_dark");
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, t0, anchor);
+			insert(target, h1, anchor);
+			mount_component(t1, h1, null);
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (/*form*/ ctx[2]?.icon) {
+				if (if_block) {
+					if (dirty & /*form*/ 4) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block_4();
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(t0.parentNode, t0);
+				}
+			} else if (if_block) {
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			transition_in(t1.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			transition_out(t1.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(t0);
+			if (detaching) detach(h1);
+			destroy_component(t1);
+		}
+	};
+}
+
+// (46:4) {#if form?.icon}
+function create_if_block_4(ctx) {
 	let div;
 	let keyicon;
 	let current;
@@ -34182,15 +34660,15 @@ function create_if_block_2$1(ctx) {
 	};
 }
 
-// (50:2) {#if form?.message}
-function create_if_block_1$1(ctx) {
+// (56:2) {#if form?.message}
+function create_if_block_2$1(ctx) {
 	let alert;
 	let current;
 
 	alert = new Alert({
 			props: {
 				id: "formFailureMessageAlert",
-				needsFocus: /*alertNeedsFocus*/ ctx[5],
+				needsFocus: /*alertNeedsFocus*/ ctx[6],
 				type: "error",
 				$$slots: { default: [create_default_slot_2] },
 				$$scope: { ctx }
@@ -34207,9 +34685,9 @@ function create_if_block_1$1(ctx) {
 		},
 		p(ctx, dirty) {
 			const alert_changes = {};
-			if (dirty & /*alertNeedsFocus*/ 32) alert_changes.needsFocus = /*alertNeedsFocus*/ ctx[5];
+			if (dirty & /*alertNeedsFocus*/ 64) alert_changes.needsFocus = /*alertNeedsFocus*/ ctx[6];
 
-			if (dirty & /*$$scope, formMessageKey, form*/ 131138) {
+			if (dirty & /*$$scope, formMessageKey, form*/ 262276) {
 				alert_changes.$$scope = { dirty, ctx };
 			}
 
@@ -34230,9 +34708,9 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (51:4) <Alert id="formFailureMessageAlert" needsFocus={alertNeedsFocus} type="error">
+// (57:4) <Alert id="formFailureMessageAlert" needsFocus={alertNeedsFocus} type="error">
 function create_default_slot_2(ctx) {
-	let t_value = interpolate(/*formMessageKey*/ ctx[6], null, /*form*/ ctx[1]?.message) + "";
+	let t_value = interpolate(/*formMessageKey*/ ctx[7], null, /*form*/ ctx[2]?.message) + "";
 	let t;
 
 	return {
@@ -34243,7 +34721,7 @@ function create_default_slot_2(ctx) {
 			insert(target, t, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*formMessageKey, form*/ 66 && t_value !== (t_value = interpolate(/*formMessageKey*/ ctx[6], null, /*form*/ ctx[1]?.message) + "")) set_data(t, t_value);
+			if (dirty & /*formMessageKey, form*/ 132 && t_value !== (t_value = interpolate(/*formMessageKey*/ ctx[7], null, /*form*/ ctx[2]?.message) + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(t);
@@ -34251,7 +34729,7 @@ function create_default_slot_2(ctx) {
 	};
 }
 
-// (56:2) {#each step?.callbacks as callback, idx}
+// (62:2) {#each step?.callbacks as callback, idx}
 function create_each_block(ctx) {
 	let callbackmapper;
 	let current;
@@ -34259,11 +34737,11 @@ function create_each_block(ctx) {
 	callbackmapper = new Callback_mapper({
 			props: {
 				props: {
-					callback: /*callback*/ ctx[14],
-					callbackMetadata: /*metadata*/ ctx[3]?.callbacks[/*idx*/ ctx[16]],
-					selfSubmitFunction: /*determineSubmission*/ ctx[9],
-					stepMetadata: /*metadata*/ ctx[3]?.step && { .../*metadata*/ ctx[3].step },
-					style: /*$styleStore*/ ctx[8]
+					callback: /*callback*/ ctx[15],
+					callbackMetadata: /*metadata*/ ctx[4]?.callbacks[/*idx*/ ctx[17]],
+					selfSubmitFunction: /*determineSubmission*/ ctx[10],
+					stepMetadata: /*metadata*/ ctx[4]?.step && { .../*metadata*/ ctx[4].step },
+					style: /*$styleStore*/ ctx[9]
 				}
 			}
 		});
@@ -34279,12 +34757,12 @@ function create_each_block(ctx) {
 		p(ctx, dirty) {
 			const callbackmapper_changes = {};
 
-			if (dirty & /*step, metadata, $styleStore*/ 280) callbackmapper_changes.props = {
-				callback: /*callback*/ ctx[14],
-				callbackMetadata: /*metadata*/ ctx[3]?.callbacks[/*idx*/ ctx[16]],
-				selfSubmitFunction: /*determineSubmission*/ ctx[9],
-				stepMetadata: /*metadata*/ ctx[3]?.step && { .../*metadata*/ ctx[3].step },
-				style: /*$styleStore*/ ctx[8]
+			if (dirty & /*step, metadata, $styleStore*/ 560) callbackmapper_changes.props = {
+				callback: /*callback*/ ctx[15],
+				callbackMetadata: /*metadata*/ ctx[4]?.callbacks[/*idx*/ ctx[17]],
+				selfSubmitFunction: /*determineSubmission*/ ctx[10],
+				stepMetadata: /*metadata*/ ctx[4]?.step && { .../*metadata*/ ctx[4].step },
+				style: /*$styleStore*/ ctx[9]
 			};
 
 			callbackmapper.$set(callbackmapper_changes);
@@ -34304,14 +34782,14 @@ function create_each_block(ctx) {
 	};
 }
 
-// (68:2) {#if metadata?.step?.derived.isUserInputOptional || !metadata?.step?.derived.isStepSelfSubmittable}
-function create_if_block$2(ctx) {
+// (74:2) {#if metadata?.step?.derived.isUserInputOptional || !metadata?.step?.derived.isStepSelfSubmittable}
+function create_if_block_1$1(ctx) {
 	let button;
 	let current;
 
 	button = new Button({
 			props: {
-				busy: /*journey*/ ctx[2]?.loading,
+				busy: /*journey*/ ctx[3]?.loading,
 				style: "primary",
 				type: "submit",
 				width: "full",
@@ -34330,9 +34808,9 @@ function create_if_block$2(ctx) {
 		},
 		p(ctx, dirty) {
 			const button_changes = {};
-			if (dirty & /*journey*/ 4) button_changes.busy = /*journey*/ ctx[2]?.loading;
+			if (dirty & /*journey*/ 8) button_changes.busy = /*journey*/ ctx[3]?.loading;
 
-			if (dirty & /*$$scope*/ 131072) {
+			if (dirty & /*$$scope*/ 262144) {
 				button_changes.$$scope = { dirty, ctx };
 			}
 
@@ -34353,7 +34831,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-// (69:4) <Button busy={journey?.loading} style="primary" type="submit" width="full">
+// (75:4) <Button busy={journey?.loading} style="primary" type="submit" width="full">
 function create_default_slot_1$1(ctx) {
 	let t;
 	let current;
@@ -34383,31 +34861,99 @@ function create_default_slot_1$1(ctx) {
 	};
 }
 
-// (40:0) <Form bind:formEl ariaDescribedBy="formFailureMessageAlert" onSubmitWhenValid={form?.submit}>
-function create_default_slot$2(ctx) {
-	let t0;
-	let h1;
-	let t1;
-	let t2;
-	let t3;
-	let t4;
-	let t5;
+// (80:2) {#if componentStyle !== 'inline'}
+function create_if_block$2(ctx) {
 	let p0;
 	let button0;
-	let t7;
+	let t1;
 	let button1;
-	let t9;
+	let t3;
 	let hr;
-	let t10;
+	let t4;
 	let p1;
-	let t11;
+	let t5;
 	let current;
 	let mounted;
 	let dispose;
-	let if_block0 = /*form*/ ctx[1]?.icon && create_if_block_2$1();
-	t1 = new Locale_strings({ props: { key: "loginHeader" } });
-	let if_block1 = /*form*/ ctx[1]?.message && create_if_block_1$1(ctx);
-	let each_value = /*step*/ ctx[4]?.callbacks;
+
+	t5 = new Locale_strings({
+			props: { key: "dontHaveAnAccount", html: true }
+		});
+
+	return {
+		c() {
+			p0 = element("p");
+			button0 = element("button");
+			button0.textContent = `${interpolate('forgotPassword', null, 'Forgot Password?')}`;
+			t1 = text("\n       \n      ");
+			button1 = element("button");
+			button1.textContent = `${interpolate('forgotUsername', null, 'Forgot Username?')}`;
+			t3 = space();
+			hr = element("hr");
+			t4 = space();
+			p1 = element("p");
+			create_component(t5.$$.fragment);
+			attr(p0, "class", "tw_my-4 tw_text-base tw_text-center tw_text-link-dark dark:tw_text-link-light");
+			attr(hr, "class", "tw_border-0 tw_border-b tw_border-secondary-light dark:tw_border-secondary-dark");
+			attr(p1, "class", "tw_text-base tw_text-center tw_py-4 tw_text-secondary-dark dark:tw_text-secondary-light");
+		},
+		m(target, anchor) {
+			insert(target, p0, anchor);
+			append(p0, button0);
+			append(p0, t1);
+			append(p0, button1);
+			insert(target, t3, anchor);
+			insert(target, hr, anchor);
+			insert(target, t4, anchor);
+			insert(target, p1, anchor);
+			mount_component(t5, p1, null);
+			/*p1_binding*/ ctx[13](p1);
+			current = true;
+
+			if (!mounted) {
+				dispose = [
+					listen(button0, "click", prevent_default(/*click_handler*/ ctx[11])),
+					listen(button1, "click", prevent_default(/*click_handler_1*/ ctx[12]))
+				];
+
+				mounted = true;
+			}
+		},
+		p: noop,
+		i(local) {
+			if (current) return;
+			transition_in(t5.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(t5.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(p0);
+			if (detaching) detach(t3);
+			if (detaching) detach(hr);
+			if (detaching) detach(t4);
+			if (detaching) detach(p1);
+			destroy_component(t5);
+			/*p1_binding*/ ctx[13](null);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+// (44:0) <Form bind:formEl ariaDescribedBy="formFailureMessageAlert" onSubmitWhenValid={form?.submit}>
+function create_default_slot$2(ctx) {
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+	let if_block3_anchor;
+	let current;
+	let if_block0 = /*componentStyle*/ ctx[1] !== 'inline' && create_if_block_3$1(ctx);
+	let if_block1 = /*form*/ ctx[2]?.message && create_if_block_2$1(ctx);
+	let each_value = /*step*/ ctx[5]?.callbacks;
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -34418,90 +34964,53 @@ function create_default_slot$2(ctx) {
 		each_blocks[i] = null;
 	});
 
-	let if_block2 = (/*metadata*/ ctx[3]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[3]?.step?.derived.isStepSelfSubmittable) && create_if_block$2(ctx);
-
-	t11 = new Locale_strings({
-			props: { key: "dontHaveAnAccount", html: true }
-		});
+	let if_block2 = (/*metadata*/ ctx[4]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[4]?.step?.derived.isStepSelfSubmittable) && create_if_block_1$1(ctx);
+	let if_block3 = /*componentStyle*/ ctx[1] !== 'inline' && create_if_block$2(ctx);
 
 	return {
 		c() {
 			if (if_block0) if_block0.c();
 			t0 = space();
-			h1 = element("h1");
-			create_component(t1.$$.fragment);
-			t2 = space();
 			if (if_block1) if_block1.c();
-			t3 = space();
+			t1 = space();
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
-			t4 = space();
+			t2 = space();
 			if (if_block2) if_block2.c();
-			t5 = space();
-			p0 = element("p");
-			button0 = element("button");
-			button0.textContent = `${interpolate('forgotPassword', null, 'Forgot Password?')}`;
-			t7 = text("\n     \n    ");
-			button1 = element("button");
-			button1.textContent = `${interpolate('forgotUsername', null, 'Forgot Username?')}`;
-			t9 = space();
-			hr = element("hr");
-			t10 = space();
-			p1 = element("p");
-			create_component(t11.$$.fragment);
-			attr(h1, "class", "tw_primary-header dark:tw_primary-header_dark");
-			attr(p0, "class", "tw_my-4 tw_text-base tw_text-center tw_text-link-dark dark:tw_text-link-light");
-			attr(hr, "class", "tw_border-0 tw_border-b tw_border-secondary-light dark:tw_border-secondary-dark");
-			attr(p1, "class", "tw_text-base tw_text-center tw_py-4 tw_text-secondary-dark dark:tw_text-secondary-light");
+			t3 = space();
+			if (if_block3) if_block3.c();
+			if_block3_anchor = empty();
 		},
 		m(target, anchor) {
 			if (if_block0) if_block0.m(target, anchor);
 			insert(target, t0, anchor);
-			insert(target, h1, anchor);
-			mount_component(t1, h1, null);
-			insert(target, t2, anchor);
 			if (if_block1) if_block1.m(target, anchor);
-			insert(target, t3, anchor);
+			insert(target, t1, anchor);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(target, anchor);
 			}
 
-			insert(target, t4, anchor);
+			insert(target, t2, anchor);
 			if (if_block2) if_block2.m(target, anchor);
-			insert(target, t5, anchor);
-			insert(target, p0, anchor);
-			append(p0, button0);
-			append(p0, t7);
-			append(p0, button1);
-			insert(target, t9, anchor);
-			insert(target, hr, anchor);
-			insert(target, t10, anchor);
-			insert(target, p1, anchor);
-			mount_component(t11, p1, null);
-			/*p1_binding*/ ctx[12](p1);
+			insert(target, t3, anchor);
+			if (if_block3) if_block3.m(target, anchor);
+			insert(target, if_block3_anchor, anchor);
 			current = true;
-
-			if (!mounted) {
-				dispose = [
-					listen(button0, "click", prevent_default(/*click_handler*/ ctx[10])),
-					listen(button1, "click", prevent_default(/*click_handler_1*/ ctx[11]))
-				];
-
-				mounted = true;
-			}
 		},
 		p(ctx, dirty) {
-			if (/*form*/ ctx[1]?.icon) {
+			if (/*componentStyle*/ ctx[1] !== 'inline') {
 				if (if_block0) {
-					if (dirty & /*form*/ 2) {
+					if_block0.p(ctx, dirty);
+
+					if (dirty & /*componentStyle*/ 2) {
 						transition_in(if_block0, 1);
 					}
 				} else {
-					if_block0 = create_if_block_2$1();
+					if_block0 = create_if_block_3$1(ctx);
 					if_block0.c();
 					transition_in(if_block0, 1);
 					if_block0.m(t0.parentNode, t0);
@@ -34516,18 +35025,18 @@ function create_default_slot$2(ctx) {
 				check_outros();
 			}
 
-			if (/*form*/ ctx[1]?.message) {
+			if (/*form*/ ctx[2]?.message) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 
-					if (dirty & /*form*/ 2) {
+					if (dirty & /*form*/ 4) {
 						transition_in(if_block1, 1);
 					}
 				} else {
-					if_block1 = create_if_block_1$1(ctx);
+					if_block1 = create_if_block_2$1(ctx);
 					if_block1.c();
 					transition_in(if_block1, 1);
-					if_block1.m(t3.parentNode, t3);
+					if_block1.m(t1.parentNode, t1);
 				}
 			} else if (if_block1) {
 				group_outros();
@@ -34539,8 +35048,8 @@ function create_default_slot$2(ctx) {
 				check_outros();
 			}
 
-			if (dirty & /*step, metadata, determineSubmission, $styleStore*/ 792) {
-				each_value = /*step*/ ctx[4]?.callbacks;
+			if (dirty & /*step, metadata, determineSubmission, $styleStore*/ 1584) {
+				each_value = /*step*/ ctx[5]?.callbacks;
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -34553,7 +35062,7 @@ function create_default_slot$2(ctx) {
 						each_blocks[i] = create_each_block(child_ctx);
 						each_blocks[i].c();
 						transition_in(each_blocks[i], 1);
-						each_blocks[i].m(t4.parentNode, t4);
+						each_blocks[i].m(t2.parentNode, t2);
 					}
 				}
 
@@ -34566,18 +35075,18 @@ function create_default_slot$2(ctx) {
 				check_outros();
 			}
 
-			if (/*metadata*/ ctx[3]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[3]?.step?.derived.isStepSelfSubmittable) {
+			if (/*metadata*/ ctx[4]?.step?.derived.isUserInputOptional || !/*metadata*/ ctx[4]?.step?.derived.isStepSelfSubmittable) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 
-					if (dirty & /*metadata*/ 8) {
+					if (dirty & /*metadata*/ 16) {
 						transition_in(if_block2, 1);
 					}
 				} else {
-					if_block2 = create_if_block$2(ctx);
+					if_block2 = create_if_block_1$1(ctx);
 					if_block2.c();
 					transition_in(if_block2, 1);
-					if_block2.m(t5.parentNode, t5);
+					if_block2.m(t3.parentNode, t3);
 				}
 			} else if (if_block2) {
 				group_outros();
@@ -34588,11 +35097,33 @@ function create_default_slot$2(ctx) {
 
 				check_outros();
 			}
+
+			if (/*componentStyle*/ ctx[1] !== 'inline') {
+				if (if_block3) {
+					if_block3.p(ctx, dirty);
+
+					if (dirty & /*componentStyle*/ 2) {
+						transition_in(if_block3, 1);
+					}
+				} else {
+					if_block3 = create_if_block$2(ctx);
+					if_block3.c();
+					transition_in(if_block3, 1);
+					if_block3.m(if_block3_anchor.parentNode, if_block3_anchor);
+				}
+			} else if (if_block3) {
+				group_outros();
+
+				transition_out(if_block3, 1, 1, () => {
+					if_block3 = null;
+				});
+
+				check_outros();
+			}
 		},
 		i(local) {
 			if (current) return;
 			transition_in(if_block0);
-			transition_in(t1.$$.fragment, local);
 			transition_in(if_block1);
 
 			for (let i = 0; i < each_value.length; i += 1) {
@@ -34600,12 +35131,11 @@ function create_default_slot$2(ctx) {
 			}
 
 			transition_in(if_block2);
-			transition_in(t11.$$.fragment, local);
+			transition_in(if_block3);
 			current = true;
 		},
 		o(local) {
 			transition_out(if_block0);
-			transition_out(t1.$$.fragment, local);
 			transition_out(if_block1);
 			each_blocks = each_blocks.filter(Boolean);
 
@@ -34614,30 +35144,20 @@ function create_default_slot$2(ctx) {
 			}
 
 			transition_out(if_block2);
-			transition_out(t11.$$.fragment, local);
+			transition_out(if_block3);
 			current = false;
 		},
 		d(detaching) {
 			if (if_block0) if_block0.d(detaching);
 			if (detaching) detach(t0);
-			if (detaching) detach(h1);
-			destroy_component(t1);
-			if (detaching) detach(t2);
 			if (if_block1) if_block1.d(detaching);
-			if (detaching) detach(t3);
+			if (detaching) detach(t1);
 			destroy_each(each_blocks, detaching);
-			if (detaching) detach(t4);
+			if (detaching) detach(t2);
 			if (if_block2) if_block2.d(detaching);
-			if (detaching) detach(t5);
-			if (detaching) detach(p0);
-			if (detaching) detach(t9);
-			if (detaching) detach(hr);
-			if (detaching) detach(t10);
-			if (detaching) detach(p1);
-			destroy_component(t11);
-			/*p1_binding*/ ctx[12](null);
-			mounted = false;
-			run_all(dispose);
+			if (detaching) detach(t3);
+			if (if_block3) if_block3.d(detaching);
+			if (detaching) detach(if_block3_anchor);
 		}
 	};
 }
@@ -34648,12 +35168,12 @@ function create_fragment$2(ctx) {
 	let current;
 
 	function form_1_formEl_binding(value) {
-		/*form_1_formEl_binding*/ ctx[13](value);
+		/*form_1_formEl_binding*/ ctx[14](value);
 	}
 
 	let form_1_props = {
 		ariaDescribedBy: "formFailureMessageAlert",
-		onSubmitWhenValid: /*form*/ ctx[1]?.submit,
+		onSubmitWhenValid: /*form*/ ctx[2]?.submit,
 		$$slots: { default: [create_default_slot$2] },
 		$$scope: { ctx }
 	};
@@ -34675,9 +35195,9 @@ function create_fragment$2(ctx) {
 		},
 		p(ctx, [dirty]) {
 			const form_1_changes = {};
-			if (dirty & /*form*/ 2) form_1_changes.onSubmitWhenValid = /*form*/ ctx[1]?.submit;
+			if (dirty & /*form*/ 4) form_1_changes.onSubmitWhenValid = /*form*/ ctx[2]?.submit;
 
-			if (dirty & /*$$scope, linkWrapper, journey, metadata, step, $styleStore, alertNeedsFocus, formMessageKey, form*/ 131582) {
+			if (dirty & /*$$scope, linkWrapper, journey, componentStyle, metadata, step, $styleStore, alertNeedsFocus, formMessageKey, form*/ 263166) {
 				form_1_changes.$$scope = { dirty, ctx };
 			}
 
@@ -34706,7 +35226,8 @@ function create_fragment$2(ctx) {
 
 function instance$2($$self, $$props, $$invalidate) {
 	let $styleStore;
-	component_subscribe($$self, styleStore, $$value => $$invalidate(8, $styleStore = $$value));
+	component_subscribe($$self, styleStore, $$value => $$invalidate(9, $styleStore = $$value));
+	let { componentStyle } = $$props;
 	let { form } = $$props;
 	let { formEl = null } = $$props;
 	let { journey } = $$props;
@@ -34726,10 +35247,14 @@ function instance$2($$self, $$props, $$invalidate) {
 	}
 
 	afterUpdate(() => {
-		$$invalidate(5, alertNeedsFocus = !!form?.message);
+		$$invalidate(6, alertNeedsFocus = !!form?.message);
 	});
 
-	onMount(() => captureLinks(linkWrapper, journey));
+	onMount(() => {
+		if (componentStyle === 'modal') {
+			captureLinks(linkWrapper, journey);
+		}
+	});
 
 	const click_handler = () => {
 		journey.push({ tree: 'ResetPassword' });
@@ -34742,7 +35267,7 @@ function instance$2($$self, $$props, $$invalidate) {
 	function p1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			linkWrapper = $$value;
-			$$invalidate(7, linkWrapper);
+			$$invalidate(8, linkWrapper);
 		});
 	}
 
@@ -34752,23 +35277,25 @@ function instance$2($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('form' in $$props) $$invalidate(1, form = $$props.form);
+		if ('componentStyle' in $$props) $$invalidate(1, componentStyle = $$props.componentStyle);
+		if ('form' in $$props) $$invalidate(2, form = $$props.form);
 		if ('formEl' in $$props) $$invalidate(0, formEl = $$props.formEl);
-		if ('journey' in $$props) $$invalidate(2, journey = $$props.journey);
-		if ('metadata' in $$props) $$invalidate(3, metadata = $$props.metadata);
-		if ('step' in $$props) $$invalidate(4, step = $$props.step);
+		if ('journey' in $$props) $$invalidate(3, journey = $$props.journey);
+		if ('metadata' in $$props) $$invalidate(4, metadata = $$props.metadata);
+		if ('step' in $$props) $$invalidate(5, step = $$props.step);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*form*/ 2) {
+		if ($$self.$$.dirty & /*form*/ 4) {
 			{
-				$$invalidate(6, formMessageKey = convertStringToKey(form?.message));
+				$$invalidate(7, formMessageKey = convertStringToKey(form?.message));
 			}
 		}
 	};
 
 	return [
 		formEl,
+		componentStyle,
 		form,
 		journey,
 		metadata,
@@ -34790,23 +35317,22 @@ class Login extends SvelteComponent {
 		super();
 
 		init(this, options, instance$2, create_fragment$2, safe_not_equal, {
-			form: 1,
+			componentStyle: 1,
+			form: 2,
 			formEl: 0,
-			journey: 2,
-			metadata: 3,
-			step: 4
+			journey: 3,
+			metadata: 4,
+			step: 5
 		});
 	}
 }
 
+/**
+ * @function mapStepToStage - Maps the current step to the proper stage component.
+ * @param {object} currentStep - The current step to check
+ * @returns {object} - The stage Svelte component
+ */
 function mapStepToStage(currentStep) {
-    /** *********************************************************************
-     * SDK INTEGRATION POINT
-     * Summary:SDK step method for getting the stage value
-     * ----------------------------------------------------------------------
-     * Details: This method is helpful in quickly identifying the stage
-     * when you want to provide special layout or handling of the form
-     ********************************************************************* */
     if (!currentStep || currentStep.type !== 'Step') {
         return Generic;
     }
@@ -34833,7 +35359,7 @@ function create_else_block$1(ctx) {
 	alert = new Alert({
 			props: {
 				id: "unrecoverableStepError",
-				needsFocus: /*alertNeedsFocus*/ ctx[3],
+				needsFocus: /*alertNeedsFocus*/ ctx[4],
 				type: "error",
 				$$slots: { default: [create_default_slot_1] },
 				$$scope: { ctx }
@@ -34843,7 +35369,7 @@ function create_else_block$1(ctx) {
 	button = new Button({
 			props: {
 				style: "secondary",
-				onClick: /*tryAgain*/ ctx[6],
+				onClick: /*tryAgain*/ ctx[7],
 				$$slots: { default: [create_default_slot$1] },
 				$$scope: { ctx }
 			}
@@ -34863,16 +35389,16 @@ function create_else_block$1(ctx) {
 		},
 		p(ctx, dirty) {
 			const alert_changes = {};
-			if (dirty & /*alertNeedsFocus*/ 8) alert_changes.needsFocus = /*alertNeedsFocus*/ ctx[3];
+			if (dirty & /*alertNeedsFocus*/ 16) alert_changes.needsFocus = /*alertNeedsFocus*/ ctx[4];
 
-			if (dirty & /*$$scope*/ 256) {
+			if (dirty & /*$$scope*/ 512) {
 				alert_changes.$$scope = { dirty, ctx };
 			}
 
 			alert.$set(alert_changes);
 			const button_changes = {};
 
-			if (dirty & /*$$scope*/ 256) {
+			if (dirty & /*$$scope*/ 512) {
 				button_changes.$$scope = { dirty, ctx };
 			}
 
@@ -34897,7 +35423,7 @@ function create_else_block$1(ctx) {
 	};
 }
 
-// (51:36) 
+// (56:52) 
 function create_if_block_3(ctx) {
 	let div;
 	let spinner;
@@ -34938,7 +35464,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (26:0) {#if !$journeyStore?.completed}
+// (30:0) {#if $journeyStore && !$journeyStore.completed}
 function create_if_block$1(ctx) {
 	let current_block_type_index;
 	let if_block;
@@ -34948,8 +35474,8 @@ function create_if_block$1(ctx) {
 	const if_blocks = [];
 
 	function select_block_type_1(ctx, dirty) {
-		if (!/*$journeyStore*/ ctx[4].step) return 0;
-		if (/*$journeyStore*/ ctx[4].step.type === StepType$1.Step) return 1;
+		if (/*$journeyStore*/ ctx[5] && !/*$journeyStore*/ ctx[5].step) return 0;
+		if (/*$journeyStore*/ ctx[5].step?.type === StepType$1.Step) return 1;
 		return -1;
 	}
 
@@ -35025,7 +35551,7 @@ function create_if_block$1(ctx) {
 	};
 }
 
-// (56:2) <Alert id="unrecoverableStepError" needsFocus={alertNeedsFocus} type="error">
+// (61:2) <Alert id="unrecoverableStepError" needsFocus={alertNeedsFocus} type="error">
 function create_default_slot_1(ctx) {
 	let t;
 	let current;
@@ -35058,7 +35584,7 @@ function create_default_slot_1(ctx) {
 	};
 }
 
-// (59:2) <Button style="secondary" onClick={tryAgain}>
+// (64:2) <Button style="secondary" onClick={tryAgain}>
 function create_default_slot$1(ctx) {
 	let t;
 	let current;
@@ -35088,7 +35614,7 @@ function create_default_slot$1(ctx) {
 	};
 }
 
-// (31:54) 
+// (35:55) 
 function create_if_block_2(ctx) {
 	let switch_instance;
 	let updating_formEl;
@@ -35096,27 +35622,28 @@ function create_if_block_2(ctx) {
 	let current;
 
 	function switch_instance_formEl_binding(value) {
-		/*switch_instance_formEl_binding*/ ctx[7](value);
+		/*switch_instance_formEl_binding*/ ctx[8](value);
 	}
 
-	var switch_value = mapStepToStage(/*$journeyStore*/ ctx[4].step);
+	var switch_value = mapStepToStage(/*$journeyStore*/ ctx[5].step);
 
 	function switch_props(ctx) {
 		let switch_instance_props = {
+			componentStyle: /*componentStyle*/ ctx[1],
 			form: {
-				icon: /*displayIcon*/ ctx[1],
-				message: /*$journeyStore*/ ctx[4].error?.message || '',
-				status: (/*$journeyStore*/ ctx[4].error?.code) ? 'error' : 'ok',
-				submit: /*submitForm*/ ctx[5]
+				icon: /*displayIcon*/ ctx[2],
+				message: /*$journeyStore*/ ctx[5].error?.message || '',
+				status: (/*$journeyStore*/ ctx[5].error?.code) ? 'error' : 'ok',
+				submit: /*submitForm*/ ctx[6]
 			},
 			journey: {
-				loading: /*$journeyStore*/ ctx[4].loading,
-				pop: /*journeyStore*/ ctx[2].pop,
-				push: /*journeyStore*/ ctx[2].push,
+				loading: /*$journeyStore*/ ctx[5].loading,
+				pop: /*journeyStore*/ ctx[3].pop,
+				push: /*journeyStore*/ ctx[3].push,
 				stack
 			},
-			metadata: /*$journeyStore*/ ctx[4].metadata,
-			step: /*$journeyStore*/ ctx[4].step
+			metadata: /*$journeyStore*/ ctx[5].metadata,
+			step: /*$journeyStore*/ ctx[5].step
 		};
 
 		if (/*formEl*/ ctx[0] !== void 0) {
@@ -35143,23 +35670,24 @@ function create_if_block_2(ctx) {
 		},
 		p(ctx, dirty) {
 			const switch_instance_changes = {};
+			if (dirty & /*componentStyle*/ 2) switch_instance_changes.componentStyle = /*componentStyle*/ ctx[1];
 
-			if (dirty & /*displayIcon, $journeyStore*/ 18) switch_instance_changes.form = {
-				icon: /*displayIcon*/ ctx[1],
-				message: /*$journeyStore*/ ctx[4].error?.message || '',
-				status: (/*$journeyStore*/ ctx[4].error?.code) ? 'error' : 'ok',
-				submit: /*submitForm*/ ctx[5]
+			if (dirty & /*displayIcon, $journeyStore*/ 36) switch_instance_changes.form = {
+				icon: /*displayIcon*/ ctx[2],
+				message: /*$journeyStore*/ ctx[5].error?.message || '',
+				status: (/*$journeyStore*/ ctx[5].error?.code) ? 'error' : 'ok',
+				submit: /*submitForm*/ ctx[6]
 			};
 
-			if (dirty & /*$journeyStore, journeyStore*/ 20) switch_instance_changes.journey = {
-				loading: /*$journeyStore*/ ctx[4].loading,
-				pop: /*journeyStore*/ ctx[2].pop,
-				push: /*journeyStore*/ ctx[2].push,
+			if (dirty & /*$journeyStore, journeyStore*/ 40) switch_instance_changes.journey = {
+				loading: /*$journeyStore*/ ctx[5].loading,
+				pop: /*journeyStore*/ ctx[3].pop,
+				push: /*journeyStore*/ ctx[3].push,
 				stack
 			};
 
-			if (dirty & /*$journeyStore*/ 16) switch_instance_changes.metadata = /*$journeyStore*/ ctx[4].metadata;
-			if (dirty & /*$journeyStore*/ 16) switch_instance_changes.step = /*$journeyStore*/ ctx[4].step;
+			if (dirty & /*$journeyStore*/ 32) switch_instance_changes.metadata = /*$journeyStore*/ ctx[5].metadata;
+			if (dirty & /*$journeyStore*/ 32) switch_instance_changes.step = /*$journeyStore*/ ctx[5].step;
 
 			if (!updating_formEl && dirty & /*formEl*/ 1) {
 				updating_formEl = true;
@@ -35167,7 +35695,7 @@ function create_if_block_2(ctx) {
 				add_flush_callback(() => updating_formEl = false);
 			}
 
-			if (switch_value !== (switch_value = mapStepToStage(/*$journeyStore*/ ctx[4].step))) {
+			if (switch_value !== (switch_value = mapStepToStage(/*$journeyStore*/ ctx[5].step))) {
 				if (switch_instance) {
 					group_outros();
 					const old_component = switch_instance;
@@ -35208,7 +35736,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (27:2) {#if !$journeyStore.step}
+// (31:2) {#if $journeyStore && !$journeyStore.step}
 function create_if_block_1(ctx) {
 	let div;
 	let spinner;
@@ -35258,8 +35786,8 @@ function create_fragment$1(ctx) {
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
-		if (!/*$journeyStore*/ ctx[4]?.completed) return 0;
-		if (/*$journeyStore*/ ctx[4]?.successful) return 1;
+		if (/*$journeyStore*/ ctx[5] && !/*$journeyStore*/ ctx[5].completed) return 0;
+		if (/*$journeyStore*/ ctx[5] && /*$journeyStore*/ ctx[5].successful) return 1;
 		return 2;
 	}
 
@@ -35322,13 +35850,19 @@ function create_fragment$1(ctx) {
 function instance$1($$self, $$props, $$invalidate) {
 	let $journeyStore,
 		$$unsubscribe_journeyStore = noop,
-		$$subscribe_journeyStore = () => ($$unsubscribe_journeyStore(), $$unsubscribe_journeyStore = subscribe(journeyStore, $$value => $$invalidate(4, $journeyStore = $$value)), journeyStore);
+		$$subscribe_journeyStore = () => ($$unsubscribe_journeyStore(), $$unsubscribe_journeyStore = subscribe(journeyStore, $$value => $$invalidate(5, $journeyStore = $$value)), journeyStore);
 
 	$$self.$$.on_destroy.push(() => $$unsubscribe_journeyStore());
+	let { componentStyle } = $$props;
 	let { displayIcon } = $$props;
 	let { formEl = null } = $$props;
 	let { journeyStore } = $$props;
 	$$subscribe_journeyStore();
+
+	if (!$journeyStore) {
+		console.error('Widget missing configuration. Import and call `configuration()`, then use `set()` to configure.');
+	}
+
 	let alertNeedsFocus = false;
 
 	function submitForm() {
@@ -35342,7 +35876,7 @@ function instance$1($$self, $$props, $$invalidate) {
 	}
 
 	afterUpdate(() => {
-		$$invalidate(3, alertNeedsFocus = !$journeyStore.successful);
+		$$invalidate(4, alertNeedsFocus = $journeyStore && !$journeyStore.successful);
 	});
 
 	function switch_instance_formEl_binding(value) {
@@ -35351,13 +35885,15 @@ function instance$1($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('displayIcon' in $$props) $$invalidate(1, displayIcon = $$props.displayIcon);
+		if ('componentStyle' in $$props) $$invalidate(1, componentStyle = $$props.componentStyle);
+		if ('displayIcon' in $$props) $$invalidate(2, displayIcon = $$props.displayIcon);
 		if ('formEl' in $$props) $$invalidate(0, formEl = $$props.formEl);
-		if ('journeyStore' in $$props) $$subscribe_journeyStore($$invalidate(2, journeyStore = $$props.journeyStore));
+		if ('journeyStore' in $$props) $$subscribe_journeyStore($$invalidate(3, journeyStore = $$props.journeyStore));
 	};
 
 	return [
 		formEl,
+		componentStyle,
 		displayIcon,
 		journeyStore,
 		alertNeedsFocus,
@@ -35373,9 +35909,10 @@ class Journey extends SvelteComponent {
 		super();
 
 		init(this, options, instance$1, create_fragment$1, safe_not_equal, {
-			displayIcon: 1,
+			componentStyle: 1,
+			displayIcon: 2,
 			formEl: 0,
-			journeyStore: 2
+			journeyStore: 3
 		});
 	}
 }
@@ -35393,6 +35930,7 @@ function create_else_block(ctx) {
 	}
 
 	let journey_1_props = {
+		componentStyle: "inline",
 		displayIcon: /*$styleStore*/ ctx[4]?.stage?.icon ?? true,
 		journeyStore: /*journeyStore*/ ctx[5]
 	};
@@ -35524,6 +36062,7 @@ function create_default_slot(ctx) {
 	}
 
 	let journey_1_props = {
+		componentStyle: "modal",
 		displayIcon: /*$styleStore*/ ctx[4]?.stage?.icon ?? !/*$styleStore*/ ctx[4]?.logo,
 		journeyStore: /*journeyStore*/ ctx[5]
 	};