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

package/index.cjs

@@ -706,6 +706,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
@@ -719,9 +723,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') {
@@ -743,6 +757,10 @@ const componentApi = () => {
                 };
             });
         },
+        /**
+         * Subscribe to modal events
+         * returns the latest value from the event
+         */
         subscribe,
     };
 };
@@ -10877,6 +10895,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.';
@@ -14925,12 +14948,18 @@ 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);
 }
 
-const journeyConfigItemSchema = z.object({
+const journeyConfigItemSchema = z
+    .object({
     journey: z.string().optional(),
     match: z
         .string()
@@ -14938,7 +14967,8 @@ const journeyConfigItemSchema = z.object({
         message: 'HREF string must start with `?journey` or `#/service`',
     })
         .array(),
-});
+})
+    .optional();
 const journeyConfigSchema = z.object({
     forgotPassword: journeyConfigItemSchema,
     forgotUsername: journeyConfigItemSchema,
@@ -14955,8 +14985,8 @@ const defaultJourneys = {
         match: ['#/service/ForgottenUsername', '?journey=ForgottenUsername'],
     },
     login: {
-        journey: undefined,
-        match: ['#/service/Login', '?journey'],
+        journey: 'Login',
+        match: ['#/service/Login', '?journey', '?journey=Login'],
     },
     register: {
         journey: 'Registration',
@@ -14970,12 +15000,24 @@ 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
         journeyConfigSchema.parse(customJourneys);
-        configuredJourneysStore.set(Object.keys(customJourneys).map((key) => ({
-            ...customJourneys[key],
+        // Merge the two journey configs, dev's overwriting the default
+        const mergedJourneyObjects = {
+            ...defaultJourneys,
+            ...customJourneys,
+        };
+        const customJourneyKeys = Object.keys(mergedJourneyObjects);
+        configuredJourneysStore.set(customJourneyKeys.map((key) => ({
+            ...mergedJourneyObjects[key],
             key,
         })));
     }
@@ -16722,6 +16764,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.";
@@ -16754,6 +16798,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";
@@ -16767,7 +16814,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";
@@ -16778,6 +16829,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:";
@@ -16791,6 +16843,8 @@ var fallback = {
 	backToLogin: backToLogin,
 	dontHaveAnAccount: dontHaveAnAccount,
 	closeModal: closeModal,
+	charactersCannotRepeatMoreThan: charactersCannotRepeatMoreThan,
+	charactersCannotRepeatMoreThanCaseInsensitive: charactersCannotRepeatMoreThanCaseInsensitive,
 	chooseDifferentUsername: chooseDifferentUsername,
 	confirmPassword: confirmPassword,
 	constraintViolationForPassword: constraintViolationForPassword,
@@ -16823,6 +16877,9 @@ var fallback = {
 	notToExceedMaximumCharacterLength: notToExceedMaximumCharacterLength,
 	noLessThanMinimumCharacterLength: noLessThanMinimumCharacterLength,
 	passwordCallback: passwordCallback,
+	passwordCannotContainCommonPasswords: passwordCannotContainCommonPasswords,
+	passwordCannotContainCommonPasswordsOrBeReversible: passwordCannotContainCommonPasswordsOrBeReversible,
+	passwordCannotContainCommonPasswordsOrBeReversibleStringsLessThan: passwordCannotContainCommonPasswordsOrBeReversibleStringsLessThan,
 	passwordRequirements: passwordRequirements,
 	pleaseCheckValue: pleaseCheckValue,
 	pleaseConfirm: pleaseConfirm,
@@ -16837,6 +16894,10 @@ var fallback = {
 	securityAnswer: securityAnswer,
 	securityQuestions: securityQuestions,
 	securityQuestionsPrompt: securityQuestionsPrompt,
+	shouldContainANumber: shouldContainANumber,
+	shouldContainAnUppercase: shouldContainAnUppercase,
+	shouldContainALowercase: shouldContainALowercase,
+	shouldContainASymbol: shouldContainASymbol,
 	showPassword: showPassword,
 	sn: sn,
 	submitButton: submitButton,
@@ -16847,6 +16908,7 @@ var fallback = {
 	twoFactorAuthentication: twoFactorAuthentication,
 	useValidEmail: useValidEmail,
 	unrecoverableError: unrecoverableError,
+	unknownLoginError: unknownLoginError,
 	unknownNetworkError: unknownNetworkError,
 	userName: userName,
 	usernameRequirements: usernameRequirements,
@@ -16863,6 +16925,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(),
@@ -16895,6 +16959,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(),
@@ -16909,6 +16976,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(),
@@ -16919,6 +16990,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(),
@@ -16932,6 +17004,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) {
         /**
@@ -16951,6 +17029,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.
@@ -17022,6 +17108,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');
@@ -17163,7 +17274,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;
@@ -17172,6 +17285,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;
@@ -17181,6 +17299,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()];
@@ -17208,9 +17331,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) {
@@ -17226,6 +17349,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
@@ -17242,7 +17381,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) {
@@ -17321,11 +17460,25 @@ 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);
     // Assign to exported variable (see bottom of file)
     stack = {
+        latest: async () => {
+            return new Promise((resolve) => {
+                // subscribe, grab the current value and unsubscribe
+                subscribe((current) => {
+                    const lastItem = current[current.length - 1];
+                    resolve(lastItem);
+                })();
+            });
+        },
         pop: async () => {
             return new Promise((resolve) => {
                 update((current) => {
@@ -17375,9 +17528,13 @@ 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 restartOptions;
     let stepNumber = 0;
     async function next(prevStep = null, nextOptions, resumeUrl) {
         if (!Config.get().serverConfig?.baseUrl) {
@@ -17391,14 +17548,6 @@ function initialize$4(initOptions) {
             ...initOptions,
             ...nextOptions,
         };
-        // These options are reserved only for restarting a journey after failure
-        if (initOptions || nextOptions) {
-            restartOptions = {
-                // Prioritize next options over initialize options
-                ...initOptions,
-                ...nextOptions,
-            };
-        }
         /**
          * Save previous step information just in case we have a total
          * form failure due to 400 response from ForgeRock.
@@ -17485,6 +17634,7 @@ function initialize$4(initOptions) {
             /**
              * SUCCESSFUL COMPLETION BLOCK
              */
+            stack.reset();
             // Set final state
             journeyStore.set({
                 completed: true,
@@ -17502,12 +17652,13 @@ 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 {
                 /**
                  * Restart tree to get fresh step
                  */
+                const restartOptions = await stack.latest();
                 restartedStep = await FRAuth$1.next(undefined, restartOptions);
             }
             catch (err) {
@@ -17584,8 +17735,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,
@@ -17615,8 +17765,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,
@@ -17643,6 +17792,18 @@ function initialize$4(initOptions) {
         await next(undefined, resumeOptions, url);
     }
     async function start(startOptions) {
+        const configTree = Config.get().tree;
+        // If no tree is passed in, but there's a configured default tree, use that
+        if (!startOptions?.tree && configTree) {
+            if (startOptions) {
+                startOptions.tree = configTree;
+            }
+            else {
+                startOptions = {
+                    tree: configTree,
+                };
+            }
+        }
         await stack.push(startOptions);
         await next(undefined, startOptions);
     }
@@ -17676,6 +17837,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) {
@@ -17698,7 +17865,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
@@ -17766,7 +17945,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
@@ -17853,11 +18043,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);
@@ -17869,6 +18065,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;
@@ -17885,8 +18092,6 @@ function widgetApiFactory(componentApi) {
         journeyStore.reset();
         oauthStore.reset();
         userStore.reset();
-        // Fetch fresh journey step
-        journey().start();
     }
     const configuration = (options) => {
         if (options?.forgerock) {
@@ -17919,6 +18124,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({
@@ -18040,6 +18249,11 @@ function widgetApiFactory(componentApi) {
         return { change, start, subscribe };
     };
     const user = {
+        /**
+         * User Info
+         * @param: void
+         * @returns: UserStore
+         */
         info() {
             if (!journeyStore || !oauthStore || !userStore) {
                 logErrorAndThrow('missingStores');
@@ -18062,6 +18276,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');
@@ -18090,6 +18310,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');
@@ -18118,7 +18343,7 @@ function widgetApiFactory(componentApi) {
         configuration,
         getStores,
         journey,
-        request: _default$2.request,
+        request: _default$2.request.bind(_default$2),
         user,
     };
 }
@@ -18508,7 +18733,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) {
@@ -18551,7 +18776,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);
 			}
@@ -20572,6 +20797,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') {
@@ -20589,13 +20819,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 = [];
@@ -20615,6 +20879,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 [
             {
@@ -20643,6 +20927,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': {
@@ -20657,18 +20946,36 @@ function getValidationMessageString(policy) {
         }
         case 'cannot-contain-characters': {
             const params = policy?.params;
-            const chars = params?.forbiddenChars.reduce((prev, curr) => {
-                prev = `${prev ? `${prev}, ` : `${prev}`} ${curr}`;
-                return prev;
-            }, '');
+            let chars = '';
+            if (typeof params !== 'object') {
+                return '';
+            }
+            if (Array.isArray(params.forbiddenChars)) {
+                chars = params.forbiddenChars.reduce((prev, curr) => {
+                    prev = `${prev ? `${prev}, ` : `${prev}`} ${curr}`;
+                    return prev;
+                }, '');
+            }
+            else if (typeof params.forbiddenChars === 'string') {
+                chars = params.forbiddenChars;
+            }
             return interpolate('fieldCanNotContainFollowingCharacters', { chars });
         }
         case 'cannot-contain-others': {
             const params = policy?.params;
-            const fields = params?.disallowedFields?.reduce((prev, curr) => {
-                prev = `${prev ? `${prev}, ` : `${prev}`} ${interpolate(curr)}`;
-                return prev;
-            }, '');
+            let fields = '';
+            if (typeof params !== 'object') {
+                return '';
+            }
+            if (Array.isArray(params.disallowedFields)) {
+                fields = params.disallowedFields?.reduce((prev, curr) => {
+                    prev = `${prev ? `${prev}, ` : `${prev}`} ${interpolate(curr)}`;
+                    return prev;
+                }, '');
+            }
+            else if (typeof params.disallowedFields === 'string') {
+                fields = params.disallowedFields;
+            }
             return interpolate('fieldCanNotContainFollowingValues', { fields });
         }
         case 'maximum-length': {
@@ -20708,6 +21015,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);
@@ -20719,6 +21032,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 [];
@@ -20737,6 +21055,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;
@@ -20748,46 +21071,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') {
@@ -20803,8 +21173,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
@@ -21803,13 +22175,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);
 	}
 
@@ -22749,7 +23114,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;
@@ -22797,7 +23162,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;
 
@@ -22817,7 +23182,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 + "";
@@ -22858,7 +23223,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;
@@ -22911,7 +23276,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;
 
@@ -23150,8 +23515,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);
 	}
@@ -23578,7 +23941,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;
@@ -23733,13 +24096,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));
 	}
 
@@ -23752,13 +24108,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
@@ -23923,7 +24272,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;
@@ -23993,7 +24342,7 @@ function create_if_block$e(ctx) {
 	};
 }
 
-// (117:2) {:else}
+// (103:2) {:else}
 function create_else_block_1(ctx) {
 	let grid;
 	let current;
@@ -24039,7 +24388,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;
@@ -24109,7 +24458,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;
@@ -24134,7 +24483,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;
@@ -24195,7 +24544,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;
@@ -24279,7 +24628,7 @@ function create_default_slot_1$a(ctx) {
 	};
 }
 
-// (106:4) {:else}
+// (92:4) {:else}
 function create_else_block$5(ctx) {
 	let checkbox;
 	let current;
@@ -24330,7 +24679,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;
@@ -24377,7 +24726,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;
@@ -24489,13 +24838,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));
 	}
 
@@ -24504,13 +24846,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) {
@@ -24875,7 +25210,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;
@@ -24955,7 +25290,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;
@@ -25275,8 +25610,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);
@@ -25373,7 +25708,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);
 				}
@@ -25386,7 +25721,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);
 				}
@@ -26522,15 +26857,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;
@@ -26558,13 +26885,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);
 	}
 
@@ -26581,14 +26901,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);
 		}
 	}
@@ -26599,14 +26911,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);
 	}
 
@@ -27097,8 +27401,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() {
@@ -27113,15 +27417,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
 					);
 				}
@@ -27142,7 +27446,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;
@@ -27172,7 +27476,7 @@ function create_default_slot$f(ctx) {
 	};
 }
 
-// (41:2) 
+// (63:2) 
 function create_input_button_slot$1(ctx) {
 	let button;
 	let eyeicon;
@@ -27203,7 +27507,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;
 			}
 		},
@@ -27211,7 +27515,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 };
 			}
 
@@ -27239,23 +27543,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],
@@ -27276,19 +27578,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 };
 			}
 
@@ -27312,16 +27613,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
@@ -27333,27 +27643,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
@@ -27366,12 +27699,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
 		});
 	}
 }
@@ -27380,8 +27714,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() {
@@ -27396,15 +27730,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
 					);
 				}
@@ -27425,7 +27759,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;
@@ -27455,7 +27789,7 @@ function create_default_slot$e(ctx) {
 	};
 }
 
-// (76:2) 
+// (88:2) 
 function create_input_button_slot(ctx) {
 	let button;
 	let eyeicon;
@@ -27486,7 +27820,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;
 			}
 		},
@@ -27494,7 +27828,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 };
 			}
 
@@ -27518,7 +27852,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;
@@ -27526,9 +27860,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]
 			}
@@ -27545,8 +27881,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);
@@ -27572,20 +27910,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]
 				: '',
@@ -27617,7 +27955,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')
@@ -27626,13 +27964,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 };
 			}
 
@@ -27696,6 +28034,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;
@@ -27704,8 +28044,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);
 	}
 
 	/**
@@ -27723,6 +28063,8 @@ function instance$p($$self, $$props, $$invalidate) {
  * for writing values to the callbacks received from AM
  *********************************************************************** */
 		callback.setInputValue(value);
+
+		$$invalidate(20, savedValue = String(value));
 	}
 
 	/**
@@ -27730,11 +28072,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);
@@ -27742,18 +28084,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);
@@ -27773,6 +28125,7 @@ function instance$p($$self, $$props, $$invalidate) {
 		callbackType,
 		doPasswordsMatch,
 		isVisible,
+		resetValue,
 		textInputLabel,
 		type,
 		Input,
@@ -27781,6 +28134,7 @@ function instance$p($$self, $$props, $$invalidate) {
 		toggleVisibility,
 		callback,
 		confirmValue,
+		savedValue,
 		slots,
 		$$scope
 	];
@@ -27791,7 +28145,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,
@@ -28483,7 +28837,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;
 
@@ -28827,7 +29181,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) {
@@ -29218,17 +29572,17 @@ class Select_idp extends SvelteComponent {
 
 function get_each_context_1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[10] = list[i];
+	child_ctx[11] = list[i];
 	return child_ctx;
 }
 
 function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[7] = list[i];
+	child_ctx[8] = list[i];
 	return child_ctx;
 }
 
-// (34:33) 
+// (35:51) 
 function create_if_block_1$6(ctx) {
 	let div;
 	let p;
@@ -29238,7 +29592,7 @@ function create_if_block_1$6(ctx) {
 	let div_id_value;
 	let current;
 	t0 = new Locale_strings({ props: { key: /*messageKey*/ ctx[1] } });
-	let each_value_1 = /*validationRules*/ ctx[2];
+	let each_value_1 = /*validationRules*/ ctx[3];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value_1.length; i += 1) {
@@ -29280,8 +29634,8 @@ function create_if_block_1$6(ctx) {
 			if (dirty & /*messageKey*/ 2) t0_changes.key = /*messageKey*/ ctx[1];
 			t0.$set(t0_changes);
 
-			if (dirty & /*validationRules*/ 4) {
-				each_value_1 = /*validationRules*/ ctx[2];
+			if (dirty & /*validationRules*/ 8) {
+				each_value_1 = /*validationRules*/ ctx[3];
 				let i;
 
 				for (i = 0; i < each_value_1.length; i += 1) {
@@ -29324,7 +29678,7 @@ function create_if_block_1$6(ctx) {
 	};
 }
 
-// (23:0) {#if simplifiedFailures.length}
+// (24:0) {#if simplifiedFailures.length}
 function create_if_block$8(ctx) {
 	let div;
 	let p;
@@ -29334,7 +29688,7 @@ function create_if_block$8(ctx) {
 	let div_id_value;
 	let current;
 	t0 = new Locale_strings({ props: { key: /*messageKey*/ ctx[1] } });
-	let each_value = /*simplifiedFailures*/ ctx[3];
+	let each_value = /*simplifiedFailures*/ ctx[4];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -29376,8 +29730,8 @@ function create_if_block$8(ctx) {
 			if (dirty & /*messageKey*/ 2) t0_changes.key = /*messageKey*/ ctx[1];
 			t0.$set(t0_changes);
 
-			if (dirty & /*simplifiedFailures*/ 8) {
-				each_value = /*simplifiedFailures*/ ctx[3];
+			if (dirty & /*simplifiedFailures*/ 16) {
+				each_value = /*simplifiedFailures*/ ctx[4];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -29420,10 +29774,10 @@ function create_if_block$8(ctx) {
 	};
 }
 
-// (40:6) {#each validationRules as rule}
+// (41:6) {#each validationRules as rule}
 function create_each_block_1(ctx) {
 	let li;
-	let t_value = /*rule*/ ctx[10].message + "";
+	let t_value = /*rule*/ ctx[11].message + "";
 	let t;
 
 	return {
@@ -29437,7 +29791,7 @@ function create_each_block_1(ctx) {
 			append(li, t);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*validationRules*/ 4 && t_value !== (t_value = /*rule*/ ctx[10].message + "")) set_data(t, t_value);
+			if (dirty & /*validationRules*/ 8 && t_value !== (t_value = /*rule*/ ctx[11].message + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(li);
@@ -29445,10 +29799,10 @@ function create_each_block_1(ctx) {
 	};
 }
 
-// (29:6) {#each simplifiedFailures as failure}
+// (30:6) {#each simplifiedFailures as failure}
 function create_each_block$4(ctx) {
 	let li;
-	let t_value = /*failure*/ ctx[7].message + "";
+	let t_value = /*failure*/ ctx[8].message + "";
 	let t;
 
 	return {
@@ -29462,7 +29816,7 @@ function create_each_block$4(ctx) {
 			append(li, t);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*simplifiedFailures*/ 8 && t_value !== (t_value = /*failure*/ ctx[7].message + "")) set_data(t, t_value);
+			if (dirty & /*simplifiedFailures*/ 16 && t_value !== (t_value = /*failure*/ ctx[8].message + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(li);
@@ -29479,8 +29833,8 @@ function create_fragment$g(ctx) {
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
-		if (/*simplifiedFailures*/ ctx[3].length) return 0;
-		if (/*validationRules*/ ctx[2].length) return 1;
+		if (/*simplifiedFailures*/ ctx[4].length) return 0;
+		if (/*showPolicies*/ ctx[2] && /*validationRules*/ ctx[3].length) return 1;
 		return -1;
 	}
 
@@ -29561,6 +29915,7 @@ function instance$g($$self, $$props, $$invalidate) {
 	let { key = undefined } = $$props;
 	let { label } = $$props;
 	let { messageKey } = $$props;
+	let { showPolicies = false } = $$props;
 	let validationFailures = getValidationFailures(callback, label);
 	let validationRules = getValidationPolicies(callback.getPolicies());
 
@@ -29573,19 +29928,20 @@ function instance$g($$self, $$props, $$invalidate) {
 	);
 
 	$$self.$$set = $$props => {
-		if ('callback' in $$props) $$invalidate(4, callback = $$props.callback);
+		if ('callback' in $$props) $$invalidate(5, callback = $$props.callback);
 		if ('key' in $$props) $$invalidate(0, key = $$props.key);
-		if ('label' in $$props) $$invalidate(5, label = $$props.label);
+		if ('label' in $$props) $$invalidate(6, label = $$props.label);
 		if ('messageKey' in $$props) $$invalidate(1, messageKey = $$props.messageKey);
+		if ('showPolicies' in $$props) $$invalidate(2, showPolicies = $$props.showPolicies);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*callback, label, validationFailures*/ 112) {
+		if ($$self.$$.dirty & /*callback, label, validationFailures*/ 224) {
 			{
-				$$invalidate(6, validationFailures = getValidationFailures(callback, label));
-				$$invalidate(2, validationRules = getValidationPolicies(callback.getPolicies()));
+				$$invalidate(7, validationFailures = getValidationFailures(callback, label));
+				$$invalidate(3, validationRules = getValidationPolicies(callback.getPolicies()));
 
-				$$invalidate(3, simplifiedFailures = validationFailures.reduce(
+				$$invalidate(4, simplifiedFailures = validationFailures.reduce(
 					(prev, curr) => {
 						prev = prev.concat(curr.restructured);
 						return prev;
@@ -29599,6 +29955,7 @@ function instance$g($$self, $$props, $$invalidate) {
 	return [
 		key,
 		messageKey,
+		showPolicies,
 		validationRules,
 		simplifiedFailures,
 		callback,
@@ -29612,10 +29969,11 @@ class Policies extends SvelteComponent {
 		super();
 
 		init(this, options, instance$g, create_fragment$g, safe_not_equal, {
-			callback: 4,
+			callback: 5,
 			key: 0,
-			label: 5,
-			messageKey: 1
+			label: 6,
+			messageKey: 1,
+			showPolicies: 2
 		});
 	}
 }
@@ -29755,13 +30113,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);
 	}
 
@@ -29950,7 +30301,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;
@@ -30028,7 +30379,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;
@@ -30047,7 +30398,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;
@@ -30155,13 +30506,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;
@@ -30173,13 +30517,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);
 	}
 
@@ -30443,7 +30780,8 @@ function create_default_slot$7(ctx) {
 			props: {
 				callback: /*callback*/ ctx[0],
 				label: /*prompt*/ ctx[3],
-				messageKey: "passwordRequirements"
+				messageKey: "passwordRequirements",
+				showPolicies: true
 			}
 		});
 
@@ -30737,13 +31075,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);
 	}
 
@@ -31530,7 +31861,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]];
@@ -31573,7 +31904,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]];
@@ -31754,8 +32085,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,
@@ -31988,12 +32319,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;
@@ -32041,7 +32372,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 }
@@ -32058,9 +32389,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 };
 			}
 
@@ -32083,7 +32414,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 {
@@ -32094,7 +32425,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);
@@ -32110,11 +32441,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]
 				}
 			}
 		});
@@ -32130,12 +32461,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);
@@ -32162,7 +32493,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",
@@ -32181,9 +32512,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 };
 			}
 
@@ -32249,24 +32580,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) {
@@ -32277,8 +32608,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() {
@@ -32315,7 +32646,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);
@@ -32331,9 +32662,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 {
@@ -32353,17 +32684,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 {
@@ -32382,8 +32713,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) {
@@ -32409,11 +32740,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 {
@@ -32433,7 +32764,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) {
@@ -32472,7 +32803,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);
@@ -32491,14 +32822,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 }
 	};
@@ -32520,10 +32851,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 };
 			}
 
@@ -32556,7 +32887,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;
@@ -32578,20 +32910,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);
 		}
 	});
 
@@ -32600,7 +32932,7 @@ function instance$7($$self, $$props, $$invalidate) {
 	function header_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			linkWrapper = $$value;
-			$$invalidate(9, linkWrapper);
+			$$invalidate(10, linkWrapper);
 		});
 	}
 
@@ -32610,24 +32942,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,
@@ -32650,11 +32984,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
 		});
 	}
 }
@@ -32767,13 +33102,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;
@@ -32812,7 +33235,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;
@@ -32820,7 +33243,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 }
@@ -32837,9 +33260,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 };
 			}
 
@@ -32860,9 +33283,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 {
@@ -32873,7 +33296,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);
@@ -32881,7 +33304,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;
@@ -32889,11 +33312,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]
 				}
 			}
 		});
@@ -32909,12 +33332,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);
@@ -32934,14 +33357,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",
@@ -32960,9 +33383,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 };
 			}
 
@@ -32983,7 +33406,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;
@@ -33013,31 +33436,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) {
@@ -33048,60 +33456,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);
@@ -33116,18 +33512,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();
@@ -33139,8 +33535,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) {
@@ -33153,7 +33549,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);
 					}
 				}
 
@@ -33166,11 +33562,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 {
@@ -33192,8 +33588,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) {
@@ -33205,8 +33599,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);
 
@@ -33220,16 +33612,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);
 		}
@@ -33242,12 +33628,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 }
 	};
@@ -33269,9 +33655,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 };
 			}
 
@@ -33300,7 +33686,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;
@@ -33319,7 +33706,7 @@ function instance$5($$self, $$props, $$invalidate) {
 	}
 
 	afterUpdate(() => {
-		$$invalidate(5, alertNeedsFocus = !!form?.message);
+		$$invalidate(6, alertNeedsFocus = !!form?.message);
 	});
 
 	function form_1_formEl_binding(value) {
@@ -33328,23 +33715,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,
@@ -33362,11 +33751,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
 		});
 	}
 }
@@ -33479,13 +33869,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;
 }
 
-// (44: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;
@@ -33524,7 +34001,7 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-// (59:2) {#if form.message}
+// (67:2) {#if form.message}
 function create_if_block_1$2(ctx) {
 	let alert;
 	let current;
@@ -33532,7 +34009,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 }
@@ -33549,9 +34026,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 };
 			}
 
@@ -33572,9 +34049,9 @@ function create_if_block_1$2(ctx) {
 	};
 }
 
-// (60: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 {
@@ -33585,7 +34062,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);
@@ -33593,7 +34070,7 @@ function create_default_slot_2$1(ctx) {
 	};
 }
 
-// (65: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;
@@ -33601,11 +34078,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]
 				}
 			}
 		});
@@ -33621,12 +34098,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);
@@ -33646,14 +34123,14 @@ function create_each_block$1(ctx) {
 	};
 }
 
-// (77: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",
@@ -33672,9 +34149,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 };
 			}
 
@@ -33695,7 +34172,7 @@ function create_if_block$3(ctx) {
 	};
 }
 
-// (78: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;
@@ -33725,28 +34202,16 @@ function create_default_slot_1$2(ctx) {
 	};
 }
 
-// (43: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) {
@@ -33757,61 +34222,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);
@@ -33826,18 +34278,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();
@@ -33849,8 +34301,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) {
@@ -33863,7 +34315,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);
 					}
 				}
 
@@ -33876,11 +34328,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 {
@@ -33902,8 +34354,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) {
@@ -33915,8 +34365,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);
 
@@ -33930,17 +34378,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);
 		}
@@ -33953,12 +34394,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 }
 	};
@@ -33980,9 +34421,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 };
 			}
 
@@ -34011,7 +34452,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;
@@ -34031,15 +34473,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);
 		});
 	}
 
@@ -34049,23 +34501,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,
@@ -34085,26 +34539,93 @@ 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
 		});
 	}
 }
 
-/* src/lib/journey/stages/username-password.svelte generated by Svelte v3.55.1 */
+/* src/lib/journey/stages/login.svelte generated by Svelte v3.55.1 */
 
 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;
 }
 
-// (44: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;
@@ -34143,15 +34664,15 @@ function create_if_block_2$1(ctx) {
 	};
 }
 
-// (53: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 }
@@ -34168,9 +34689,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 };
 			}
 
@@ -34191,9 +34712,9 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (54: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 {
@@ -34204,7 +34725,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);
@@ -34212,7 +34733,7 @@ function create_default_slot_2(ctx) {
 	};
 }
 
-// (59:2) {#each step?.callbacks as callback, idx}
+// (62:2) {#each step?.callbacks as callback, idx}
 function create_each_block(ctx) {
 	let callbackmapper;
 	let current;
@@ -34220,11 +34741,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]
 				}
 			}
 		});
@@ -34240,12 +34761,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);
@@ -34265,14 +34786,14 @@ function create_each_block(ctx) {
 	};
 }
 
-// (71: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",
@@ -34291,9 +34812,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 };
 			}
 
@@ -34314,7 +34835,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-// (72: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;
@@ -34344,31 +34865,99 @@ function create_default_slot_1$1(ctx) {
 	};
 }
 
-// (43: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) {
@@ -34379,90 +34968,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);
@@ -34477,18 +35029,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();
@@ -34500,8 +35052,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) {
@@ -34514,7 +35066,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);
 					}
 				}
 
@@ -34527,18 +35079,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();
@@ -34549,11 +35101,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) {
@@ -34561,12 +35135,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);
 
@@ -34575,30 +35148,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);
 		}
 	};
 }
@@ -34609,12 +35172,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 }
 	};
@@ -34636,9 +35199,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 };
 			}
 
@@ -34667,7 +35230,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;
@@ -34687,10 +35251,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' });
@@ -34703,7 +35271,7 @@ function instance$2($$self, $$props, $$invalidate) {
 	function p1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			linkWrapper = $$value;
-			$$invalidate(7, linkWrapper);
+			$$invalidate(8, linkWrapper);
 		});
 	}
 
@@ -34713,23 +35281,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,
@@ -34746,38 +35316,37 @@ function instance$2($$self, $$props, $$invalidate) {
 	];
 }
 
-class Username_password extends SvelteComponent {
+class Login extends SvelteComponent {
 	constructor(options) {
 		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;
     }
     switch (currentStep?.getStage && currentStep.getStage()) {
         case 'OneTimePassword':
             return One_time_password;
-        case 'Registration':
+        case 'DefaultRegistration':
             return Registration;
-        case 'UsernamePassword':
-            return Username_password;
+        case 'DefaultLogin':
+            return Login;
         default:
             return Generic;
     }
@@ -34794,7 +35363,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 }
@@ -34804,7 +35373,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 }
 			}
@@ -34824,16 +35393,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 };
 			}
 
@@ -34858,7 +35427,7 @@ function create_else_block$1(ctx) {
 	};
 }
 
-// (51:36) 
+// (56:52) 
 function create_if_block_3(ctx) {
 	let div;
 	let spinner;
@@ -34899,7 +35468,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;
@@ -34909,8 +35478,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;
 	}
 
@@ -34986,7 +35555,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;
@@ -35019,7 +35588,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;
@@ -35049,7 +35618,7 @@ function create_default_slot$1(ctx) {
 	};
 }
 
-// (31:54) 
+// (35:55) 
 function create_if_block_2(ctx) {
 	let switch_instance;
 	let updating_formEl;
@@ -35057,27 +35626,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) {
@@ -35104,23 +35674,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;
@@ -35128,7 +35699,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;
@@ -35169,7 +35740,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;
@@ -35219,8 +35790,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;
 	}
 
@@ -35283,13 +35854,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() {
@@ -35303,7 +35880,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) {
@@ -35312,13 +35889,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,
@@ -35334,9 +35913,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
 		});
 	}
 }
@@ -35354,6 +35934,7 @@ function create_else_block(ctx) {
 	}
 
 	let journey_1_props = {
+		componentStyle: "inline",
 		displayIcon: /*$styleStore*/ ctx[4]?.stage?.icon ?? true,
 		journeyStore: /*journeyStore*/ ctx[5]
 	};
@@ -35485,6 +36066,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]
 	};