@memberstack/dom 1.9.4 → 1.9.7

package/lib/methods/dom/main-dom.js

@@ -68,9 +68,21 @@ var __spread = (this && this.__spread) || function () {
     for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
     return ar;
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 function noop() { }
+var identity = function (x) { return x; };
 function run(fn) {
     return fn();
 }
@@ -86,9 +98,64 @@ function is_function(thing) {
 function safe_not_equal(a, b) {
     return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
+var src_url_equal_anchor;
+function src_url_equal(element_src, url) {
+    if (!src_url_equal_anchor) {
+        src_url_equal_anchor = document.createElement('a');
+    }
+    src_url_equal_anchor.href = url;
+    return element_src === src_url_equal_anchor.href;
+}
 function is_empty(obj) {
     return Object.keys(obj).length === 0;
 }
+function subscribe(store) {
+    var callbacks = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        callbacks[_i - 1] = arguments[_i];
+    }
+    if (store == null) {
+        return noop;
+    }
+    var unsub = store.subscribe.apply(store, __spread(callbacks));
+    return unsub.unsubscribe ? function () { return unsub.unsubscribe(); } : unsub;
+}
+function component_subscribe(component, store, callback) {
+    component.$$.on_destroy.push(subscribe(store, callback));
+}
+var is_client = typeof window !== 'undefined';
+var now = is_client
+    ? function () { return window.performance.now(); }
+    : function () { return Date.now(); };
+var raf = is_client ? function (cb) { return requestAnimationFrame(cb); } : noop;
+var tasks = new Set();
+function run_tasks(now) {
+    tasks.forEach(function (task) {
+        if (!task.c(now)) {
+            tasks.delete(task);
+            task.f();
+        }
+    });
+    if (tasks.size !== 0)
+        raf(run_tasks);
+}
+/**
+ * Creates a new task that runs on each raf frame
+ * until it returns a falsy value or is aborted
+ */
+function loop(callback) {
+    var task;
+    if (tasks.size === 0)
+        raf(run_tasks);
+    return {
+        promise: new Promise(function (fulfill) {
+            tasks.add(task = { c: callback, f: fulfill });
+        }),
+        abort: function () {
+            tasks.delete(task);
+        }
+    };
+}
 function append(target, node) {
     target.appendChild(node);
 }
@@ -110,6 +177,11 @@ function get_root_for_style(node) {
     }
     return node.ownerDocument;
 }
+function append_empty_stylesheet(node) {
+    var style_element = element('style');
+    append_stylesheet(get_root_for_style(node), style_element);
+    return style_element.sheet;
+}
 function append_stylesheet(node, style) {
     append(node.head || node, style);
 }
@@ -137,6 +209,9 @@ function text(data) {
 function space() {
     return text(' ');
 }
+function empty() {
+    return text('');
+}
 function listen(node, event, handler, options) {
     node.addEventListener(event, handler, options);
     return function () { return node.removeEventListener(event, handler, options); };
@@ -169,6 +244,9 @@ function set_data(text, data) {
     if (text.wholeText !== data)
         text.data = data;
 }
+function set_input_value(input, value) {
+    input.value = value == null ? '' : value;
+}
 function set_style(node, key, value, important) {
     if (value === null) {
         node.style.removeProperty(key);
@@ -180,6 +258,78 @@ function set_style(node, key, value, important) {
 function toggle_class(element, name, toggle) {
     element.classList[toggle ? 'add' : 'remove'](name);
 }
+function custom_event(type, detail, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.bubbles, bubbles = _c === void 0 ? false : _c, _d = _b.cancelable, cancelable = _d === void 0 ? false : _d;
+    var e = document.createEvent('CustomEvent');
+    e.initCustomEvent(type, bubbles, cancelable, detail);
+    return e;
+}
+// we need to store the information for multiple documents because a Svelte application could also contain iframes
+// https://github.com/sveltejs/svelte/issues/3624
+var managed_styles = new Map();
+var active = 0;
+// https://github.com/darkskyapp/string-hash/blob/master/index.js
+function hash(str) {
+    var hash = 5381;
+    var i = str.length;
+    while (i--)
+        hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
+    return hash >>> 0;
+}
+function create_style_information(doc, node) {
+    var info = { stylesheet: append_empty_stylesheet(node), rules: {} };
+    managed_styles.set(doc, info);
+    return info;
+}
+function create_rule(node, a, b, duration, delay, ease, fn, uid) {
+    if (uid === void 0) { uid = 0; }
+    var step = 16.666 / duration;
+    var keyframes = '{\n';
+    for (var p = 0; p <= 1; p += step) {
+        var t = a + (b - a) * ease(p);
+        keyframes += p * 100 + ("%{" + fn(t, 1 - t) + "}\n");
+    }
+    var rule = keyframes + ("100% {" + fn(b, 1 - b) + "}\n}");
+    var name = "__svelte_" + hash(rule) + "_" + uid;
+    var doc = get_root_for_style(node);
+    var _a = managed_styles.get(doc) || create_style_information(doc, node), stylesheet = _a.stylesheet, rules = _a.rules;
+    if (!rules[name]) {
+        rules[name] = true;
+        stylesheet.insertRule("@keyframes " + name + " " + rule, stylesheet.cssRules.length);
+    }
+    var animation = node.style.animation || '';
+    node.style.animation = "" + (animation ? animation + ", " : '') + name + " " + duration + "ms linear " + delay + "ms 1 both";
+    active += 1;
+    return name;
+}
+function delete_rule(node, name) {
+    var previous = (node.style.animation || '').split(', ');
+    var next = previous.filter(name
+        ? function (anim) { return anim.indexOf(name) < 0; } // remove specific animation
+        : function (anim) { return anim.indexOf('__svelte') === -1; } // remove all Svelte animations
+    );
+    var deleted = previous.length - next.length;
+    if (deleted) {
+        node.style.animation = next.join(', ');
+        active -= deleted;
+        if (!active)
+            clear_rules();
+    }
+}
+function clear_rules() {
+    raf(function () {
+        if (active)
+            return;
+        managed_styles.forEach(function (info) {
+            var stylesheet = info.stylesheet;
+            var i = stylesheet.cssRules.length;
+            while (i--)
+                stylesheet.deleteRule(i);
+            info.rules = {};
+        });
+        managed_styles.clear();
+    });
+}
 var current_component;
 function set_current_component(component) {
     current_component = component;
@@ -192,6 +342,9 @@ function get_current_component() {
 function onMount(fn) {
     get_current_component().$$.on_mount.push(fn);
 }
+function onDestroy(fn) {
+    get_current_component().$$.on_destroy.push(fn);
+}
 var dirty_components = [];
 var binding_callbacks = [];
 var render_callbacks = [];
@@ -276,6 +429,19 @@ function update($$) {
         $$.after_update.forEach(add_render_callback);
     }
 }
+var promise;
+function wait() {
+    if (!promise) {
+        promise = Promise.resolve();
+        promise.then(function () {
+            promise = null;
+        });
+    }
+    return promise;
+}
+function dispatch(node, direction, kind) {
+    node.dispatchEvent(custom_event("" + (direction ? 'intro' : 'outro') + kind));
+}
 var outroing = new Set();
 var outros;
 function group_outros() {
@@ -313,6 +479,112 @@ function transition_out(block, local, detach, callback) {
         block.o(local);
     }
 }
+var null_transition = { duration: 0 };
+function create_bidirectional_transition(node, fn, params, intro) {
+    var config = fn(node, params);
+    var t = intro ? 0 : 1;
+    var running_program = null;
+    var pending_program = null;
+    var animation_name = null;
+    function clear_animation() {
+        if (animation_name)
+            delete_rule(node, animation_name);
+    }
+    function init(program, duration) {
+        var d = (program.b - t);
+        duration *= Math.abs(d);
+        return {
+            a: t,
+            b: program.b,
+            d: d,
+            duration: duration,
+            start: program.start,
+            end: program.start + duration,
+            group: program.group
+        };
+    }
+    function go(b) {
+        var _a = config || null_transition, _b = _a.delay, delay = _b === void 0 ? 0 : _b, _c = _a.duration, duration = _c === void 0 ? 300 : _c, _d = _a.easing, easing = _d === void 0 ? identity : _d, _e = _a.tick, tick = _e === void 0 ? noop : _e, css = _a.css;
+        var program = {
+            start: now() + delay,
+            b: b
+        };
+        if (!b) {
+            // @ts-ignore todo: improve typings
+            program.group = outros;
+            outros.r += 1;
+        }
+        if (running_program || pending_program) {
+            pending_program = program;
+        }
+        else {
+            // if this is an intro, and there's a delay, we need to do
+            // an initial tick and/or apply CSS animation immediately
+            if (css) {
+                clear_animation();
+                animation_name = create_rule(node, t, b, duration, delay, easing, css);
+            }
+            if (b)
+                tick(0, 1);
+            running_program = init(program, duration);
+            add_render_callback(function () { return dispatch(node, b, 'start'); });
+            loop(function (now) {
+                if (pending_program && now > pending_program.start) {
+                    running_program = init(pending_program, duration);
+                    pending_program = null;
+                    dispatch(node, running_program.b, 'start');
+                    if (css) {
+                        clear_animation();
+                        animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css);
+                    }
+                }
+                if (running_program) {
+                    if (now >= running_program.end) {
+                        tick(t = running_program.b, 1 - t);
+                        dispatch(node, running_program.b, 'end');
+                        if (!pending_program) {
+                            // we're done
+                            if (running_program.b) {
+                                // intro — we can tidy up immediately
+                                clear_animation();
+                            }
+                            else {
+                                // outro — needs to be coordinated
+                                if (!--running_program.group.r)
+                                    run_all(running_program.group.c);
+                            }
+                        }
+                        running_program = null;
+                    }
+                    else if (now >= running_program.start) {
+                        var p = now - running_program.start;
+                        t = running_program.a + running_program.d * easing(p / running_program.duration);
+                        tick(t, 1 - t);
+                    }
+                }
+                return !!(running_program || pending_program);
+            });
+        }
+    }
+    return {
+        run: function (b) {
+            if (is_function(config)) {
+                wait().then(function () {
+                    // @ts-ignore
+                    config = config();
+                    go(b);
+                });
+            }
+            else {
+                go(b);
+            }
+        },
+        end: function () {
+            clear_animation();
+            running_program = pending_program = null;
+        }
+    };
+}
 function bind(component, name, callback) {
     var index = component.$$.props[name];
     if (index !== undefined) {
@@ -456,8 +728,78 @@ var SvelteComponent = /** @class */ (function () {
     };
     return SvelteComponent;
 }());
+var subscriber_queue = [];
+/**
+ * Create a `Writable` store that allows both updating and reading by subscription.
+ * @param {*=}value initial value
+ * @param {StartStopNotifier=}start start and stop notifications for subscriptions
+ */
+function writable(value, start) {
+    if (start === void 0) { start = noop; }
+    var stop;
+    var subscribers = new Set();
+    function set(new_value) {
+        var e_1, _a;
+        if (safe_not_equal(value, new_value)) {
+            value = new_value;
+            if (stop) { // store is ready
+                var run_queue = !subscriber_queue.length;
+                try {
+                    for (var subscribers_1 = __values(subscribers), subscribers_1_1 = subscribers_1.next(); !subscribers_1_1.done; subscribers_1_1 = subscribers_1.next()) {
+                        var subscriber = subscribers_1_1.value;
+                        subscriber[1]();
+                        subscriber_queue.push(subscriber, value);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (subscribers_1_1 && !subscribers_1_1.done && (_a = subscribers_1.return)) _a.call(subscribers_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                if (run_queue) {
+                    for (var i = 0; i < subscriber_queue.length; i += 2) {
+                        subscriber_queue[i][0](subscriber_queue[i + 1]);
+                    }
+                    subscriber_queue.length = 0;
+                }
+            }
+        }
+    }
+    function update(fn) {
+        set(fn(value));
+    }
+    function subscribe(run, invalidate) {
+        if (invalidate === void 0) { invalidate = noop; }
+        var subscriber = [run, invalidate];
+        subscribers.add(subscriber);
+        if (subscribers.size === 1) {
+            stop = start(set) || noop;
+        }
+        run(value);
+        return function () {
+            subscribers.delete(subscriber);
+            if (subscribers.size === 0) {
+                stop();
+                stop = null;
+            }
+        };
+    }
+    return { set: set, update: update, subscribe: subscribe };
+}
+var AppStore = writable({
+    initialValue: true,
+    customFields: [],
+    branding: {
+        logo: "",
+        colors: {
+            lightMode: {},
+        }
+    },
+});
 /* src/icons/LoadingIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$t(ctx) {
+function create_fragment$v(ctx) {
     var svg;
     var path;
     var animateTransform;
@@ -502,13 +844,13 @@ var LoadingIcon = /** @class */ (function (_super) {
     __extends(LoadingIcon, _super);
     function LoadingIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$t, safe_not_equal, {});
+        init(_this, options, null, create_fragment$v, safe_not_equal, {});
         return _this;
     }
     return LoadingIcon;
 }(SvelteComponent));
 /* src/components/Loader.svelte generated by Svelte v3.48.0 */
-function create_fragment$s(ctx) {
+function create_fragment$u(ctx) {
     var div;
     var loadingicon;
     var current;
@@ -546,13 +888,13 @@ var Loader = /** @class */ (function (_super) {
     __extends(Loader, _super);
     function Loader(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$s, safe_not_equal, {});
+        init(_this, options, null, create_fragment$u, safe_not_equal, {});
         return _this;
     }
     return Loader;
 }(SvelteComponent));
 /* src/icons/CloseIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$r(ctx) {
+function create_fragment$t(ctx) {
     var svg;
     var path;
     return {
@@ -584,13 +926,13 @@ var CloseIcon = /** @class */ (function (_super) {
     __extends(CloseIcon, _super);
     function CloseIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$r, safe_not_equal, {});
+        init(_this, options, null, create_fragment$t, safe_not_equal, {});
         return _this;
     }
     return CloseIcon;
 }(SvelteComponent));
 /* src/components/CloseButton.svelte generated by Svelte v3.48.0 */
-function create_fragment$q(ctx) {
+function create_fragment$s(ctx) {
     var div;
     var button;
     var closeicon;
@@ -641,7 +983,7 @@ function create_fragment$q(ctx) {
         }
     };
 }
-function instance$d($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
     var closeModal = $$props.closeModal;
     $$self.$$set = function ($$props) {
         if ('closeModal' in $$props)
@@ -653,13 +995,13 @@ var CloseButton = /** @class */ (function (_super) {
     __extends(CloseButton, _super);
     function CloseButton(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$d, create_fragment$q, safe_not_equal, { closeModal: 0 });
+        init(_this, options, instance$f, create_fragment$s, safe_not_equal, { closeModal: 0 });
         return _this;
     }
     return CloseButton;
 }(SvelteComponent));
 /* src/icons/MemberstackIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$p(ctx) {
+function create_fragment$r(ctx) {
     var svg;
     var path0;
     var path1;
@@ -713,26 +1055,22 @@ var MemberstackIcon = /** @class */ (function (_super) {
     __extends(MemberstackIcon, _super);
     function MemberstackIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$p, safe_not_equal, {});
+        init(_this, options, null, create_fragment$r, safe_not_equal, {});
         return _this;
     }
     return MemberstackIcon;
 }(SvelteComponent));
 /* src/components/FigureElement.svelte generated by Svelte v3.48.0 */
-function create_fragment$o(ctx) {
-    var figure;
+function create_else_block$3(ctx) {
     var memberstackicon;
     var current;
     memberstackicon = new MemberstackIcon({});
     return {
         c: function () {
-            figure = element("figure");
             create_component(memberstackicon.$$.fragment);
-            attr(figure, "class", "ms-modal__figure");
         },
         m: function (target, anchor) {
-            insert(target, figure, anchor);
-            mount_component(memberstackicon, figure, null);
+            mount_component(memberstackicon, target, anchor);
             current = true;
         },
         p: noop,
@@ -746,24 +1084,128 @@ function create_fragment$o(ctx) {
             transition_out(memberstackicon.$$.fragment, local);
             current = false;
         },
+        d: function (detaching) {
+            destroy_component(memberstackicon, detaching);
+        }
+    };
+}
+// (13:2) {#if app.branding.logo}
+function create_if_block$a(ctx) {
+    var img;
+    var img_src_value;
+    var img_alt_value;
+    return {
+        c: function () {
+            img = element("img");
+            if (!src_url_equal(img.src, img_src_value = /*app*/ ctx[0].branding.logo))
+                attr(img, "src", img_src_value);
+            attr(img, "alt", img_alt_value = /*app*/ ctx[0].name);
+            attr(img, "data-cy", "logo");
+        },
+        m: function (target, anchor) {
+            insert(target, img, anchor);
+        },
+        p: function (ctx, dirty) {
+            if (dirty & /*app*/ 1 && !src_url_equal(img.src, img_src_value = /*app*/ ctx[0].branding.logo)) {
+                attr(img, "src", img_src_value);
+            }
+            if (dirty & /*app*/ 1 && img_alt_value !== (img_alt_value = /*app*/ ctx[0].name)) {
+                attr(img, "alt", img_alt_value);
+            }
+        },
+        i: noop,
+        o: noop,
+        d: function (detaching) {
+            if (detaching)
+                detach(img);
+        }
+    };
+}
+function create_fragment$q(ctx) {
+    var figure;
+    var current_block_type_index;
+    var if_block;
+    var current;
+    var if_block_creators = [create_if_block$a, create_else_block$3];
+    var if_blocks = [];
+    function select_block_type(ctx, dirty) {
+        if ( /*app*/ctx[0].branding.logo)
+            return 0;
+        return 1;
+    }
+    current_block_type_index = select_block_type(ctx);
+    if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    return {
+        c: function () {
+            figure = element("figure");
+            if_block.c();
+            attr(figure, "class", "ms-modal__figure");
+        },
+        m: function (target, anchor) {
+            insert(target, figure, anchor);
+            if_blocks[current_block_type_index].m(figure, null);
+            current = true;
+        },
+        p: function (ctx, _a) {
+            var _b = __read(_a, 1), dirty = _b[0];
+            var previous_block_index = current_block_type_index;
+            current_block_type_index = select_block_type(ctx);
+            if (current_block_type_index === previous_block_index) {
+                if_blocks[current_block_type_index].p(ctx, dirty);
+            }
+            else {
+                group_outros();
+                transition_out(if_blocks[previous_block_index], 1, 1, function () {
+                    if_blocks[previous_block_index] = null;
+                });
+                check_outros();
+                if_block = if_blocks[current_block_type_index];
+                if (!if_block) {
+                    if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+                    if_block.c();
+                }
+                else {
+                    if_block.p(ctx, dirty);
+                }
+                transition_in(if_block, 1);
+                if_block.m(figure, null);
+            }
+        },
+        i: function (local) {
+            if (current)
+                return;
+            transition_in(if_block);
+            current = true;
+        },
+        o: function (local) {
+            transition_out(if_block);
+            current = false;
+        },
         d: function (detaching) {
             if (detaching)
                 detach(figure);
-            destroy_component(memberstackicon);
+            if_blocks[current_block_type_index].d();
         }
     };
 }
+function instance$e($$self, $$props, $$invalidate) {
+    var app = {};
+    AppStore.subscribe(function (data) {
+        $$invalidate(0, app = data);
+    });
+    return [app];
+}
 var FigureElement = /** @class */ (function (_super) {
     __extends(FigureElement, _super);
     function FigureElement(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$o, safe_not_equal, {});
+        init(_this, options, instance$e, create_fragment$q, safe_not_equal, {});
         return _this;
     }
     return FigureElement;
 }(SvelteComponent));
 /* src/components/SubmitButton.svelte generated by Svelte v3.48.0 */
-function create_else_block$1(ctx) {
+function create_else_block$2(ctx) {
     var button;
     var loadingicon;
     var current;
@@ -774,6 +1216,7 @@ function create_else_block$1(ctx) {
             create_component(loadingicon.$$.fragment);
             attr(button, "class", "ms-form__button");
             attr(button, "type", "button");
+            set_style(button, "background-color", /*buttonColor*/ ctx[2]);
             button.disabled = true;
         },
         m: function (target, anchor) {
@@ -781,7 +1224,11 @@ function create_else_block$1(ctx) {
             mount_component(loadingicon, button, null);
             current = true;
         },
-        p: noop,
+        p: function (ctx, dirty) {
+            if (!current || dirty & /*buttonColor*/ 4) {
+                set_style(button, "background-color", /*buttonColor*/ ctx[2]);
+            }
+        },
         i: function (local) {
             if (current)
                 return;
@@ -799,8 +1246,8 @@ function create_else_block$1(ctx) {
         }
     };
 }
-// (8:2) {#if !isLoading}
-function create_if_block$6(ctx) {
+// (15:2) {#if !isLoading}
+function create_if_block$9(ctx) {
     var button;
     var t;
     return {
@@ -809,6 +1256,7 @@ function create_if_block$6(ctx) {
             t = text(/*buttonText*/ ctx[0]);
             attr(button, "class", "ms-form__button");
             attr(button, "type", "submit");
+            set_style(button, "background-color", /*buttonColor*/ ctx[2]);
         },
         m: function (target, anchor) {
             insert(target, button, anchor);
@@ -817,6 +1265,9 @@ function create_if_block$6(ctx) {
         p: function (ctx, dirty) {
             if (dirty & /*buttonText*/ 1)
                 set_data(t, /*buttonText*/ ctx[0]);
+            if (dirty & /*buttonColor*/ 4) {
+                set_style(button, "background-color", /*buttonColor*/ ctx[2]);
+            }
         },
         i: noop,
         o: noop,
@@ -826,12 +1277,12 @@ function create_if_block$6(ctx) {
         }
     };
 }
-function create_fragment$n(ctx) {
+function create_fragment$p(ctx) {
     var div;
     var current_block_type_index;
     var if_block;
     var current;
-    var if_block_creators = [create_if_block$6, create_else_block$1];
+    var if_block_creators = [create_if_block$9, create_else_block$2];
     var if_blocks = [];
     function select_block_type(ctx, dirty) {
         if (!ctx[1])
@@ -892,28 +1343,34 @@ function create_fragment$n(ctx) {
         }
     };
 }
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
+    var $app;
+    component_subscribe($$self, AppStore, function ($$value) { return $$invalidate(3, $app = $$value); });
     var _a = $$props.buttonText, buttonText = _a === void 0 ? "Submit" : _a;
     var _b = $$props.isLoading, isLoading = _b === void 0 ? false : _b;
+    var buttonColor = "rgb(41, 98, 255)";
+    if ($app.branding.colors.lightMode.primaryButton) {
+        buttonColor = $app.branding.colors.lightMode.primaryButton;
+    }
     $$self.$$set = function ($$props) {
         if ('buttonText' in $$props)
             $$invalidate(0, buttonText = $$props.buttonText);
         if ('isLoading' in $$props)
             $$invalidate(1, isLoading = $$props.isLoading);
     };
-    return [buttonText, isLoading];
+    return [buttonText, isLoading, buttonColor];
 }
 var SubmitButton = /** @class */ (function (_super) {
     __extends(SubmitButton, _super);
     function SubmitButton(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$c, create_fragment$n, safe_not_equal, { buttonText: 0, isLoading: 1 });
+        init(_this, options, instance$d, create_fragment$p, safe_not_equal, { buttonText: 0, isLoading: 1 });
         return _this;
     }
     return SubmitButton;
 }(SvelteComponent));
 /* src/icons/ErrorIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$m(ctx) {
+function create_fragment$o(ctx) {
     var svg;
     var path;
     return {
@@ -943,13 +1400,13 @@ var ErrorIcon = /** @class */ (function (_super) {
     __extends(ErrorIcon, _super);
     function ErrorIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$m, safe_not_equal, {});
+        init(_this, options, null, create_fragment$o, safe_not_equal, {});
         return _this;
     }
     return ErrorIcon;
 }(SvelteComponent));
 /* src/components/EmailInput.svelte generated by Svelte v3.48.0 */
-function create_if_block$5(ctx) {
+function create_if_block$8(ctx) {
     var div;
     var erroricon;
     var t0;
@@ -989,7 +1446,7 @@ function create_if_block$5(ctx) {
         }
     };
 }
-function create_fragment$l(ctx) {
+function create_fragment$n(ctx) {
     var div;
     var label;
     var t1;
@@ -998,7 +1455,7 @@ function create_fragment$l(ctx) {
     var current;
     var mounted;
     var dispose;
-    var if_block = /*inputError*/ ctx[0] && create_if_block$5();
+    var if_block = /*inputError*/ ctx[1] && create_if_block$8();
     return {
         c: function () {
             div = element("div");
@@ -1023,26 +1480,33 @@ function create_fragment$l(ctx) {
             append(div, label);
             append(div, t1);
             append(div, input);
+            set_input_value(input, /*emailValue*/ ctx[0]);
             append(div, t2);
             if (if_block)
                 if_block.m(div, null);
             current = true;
             if (!mounted) {
-                dispose = listen(input, "blur", /*validateField*/ ctx[1]);
+                dispose = [
+                    listen(input, "blur", /*validateField*/ ctx[2]),
+                    listen(input, "input", /*input_input_handler*/ ctx[4])
+                ];
                 mounted = true;
             }
         },
         p: function (ctx, _a) {
             var _b = __read(_a, 1), dirty = _b[0];
-            if ( /*inputError*/ctx[0]) {
+            if (dirty & /*emailValue*/ 1 && input.value !== /*emailValue*/ ctx[0]) {
+                set_input_value(input, /*emailValue*/ ctx[0]);
+            }
+            if ( /*inputError*/ctx[1]) {
                 if (if_block) {
                     if_block.p(ctx, dirty);
-                    if (dirty & /*inputError*/ 1) {
+                    if (dirty & /*inputError*/ 2) {
                         transition_in(if_block, 1);
                     }
                 }
                 else {
-                    if_block = create_if_block$5();
+                    if_block = create_if_block$8();
                     if_block.c();
                     transition_in(if_block, 1);
                     if_block.m(div, null);
@@ -1072,46 +1536,51 @@ function create_fragment$l(ctx) {
             if (if_block)
                 if_block.d();
             mounted = false;
-            dispose();
+            run_all(dispose);
         }
     };
 }
 var emailLabel = "Email Address";
 var errorMessage$1 = "Please enter a valid email address";
-function instance$b($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
     var _a = $$props.emailInputValid, emailInputValid = _a === void 0 ? false : _a;
+    var emailValue = $$props.emailValue;
     var inputError = false;
     var validateField = function (e) {
         var emailInput = e.target;
-        var hasValidEmail = (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(emailInput.value)
-            ? true
-            : false;
+        var hasValidEmail = (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/).test(emailInput.value);
         if (!hasValidEmail && e.target.value.length > 0) {
-            $$invalidate(2, emailInputValid = false);
-            $$invalidate(0, inputError = true);
+            $$invalidate(3, emailInputValid = false);
+            $$invalidate(1, inputError = true);
         }
         else {
-            $$invalidate(2, emailInputValid = true);
-            $$invalidate(0, inputError = false);
+            $$invalidate(3, emailInputValid = true);
+            $$invalidate(1, inputError = false);
         }
     };
+    function input_input_handler() {
+        emailValue = this.value;
+        $$invalidate(0, emailValue);
+    }
     $$self.$$set = function ($$props) {
         if ('emailInputValid' in $$props)
-            $$invalidate(2, emailInputValid = $$props.emailInputValid);
+            $$invalidate(3, emailInputValid = $$props.emailInputValid);
+        if ('emailValue' in $$props)
+            $$invalidate(0, emailValue = $$props.emailValue);
     };
-    return [inputError, validateField, emailInputValid];
+    return [emailValue, inputError, validateField, emailInputValid, input_input_handler];
 }
 var EmailInput = /** @class */ (function (_super) {
     __extends(EmailInput, _super);
     function EmailInput(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$b, create_fragment$l, safe_not_equal, { emailInputValid: 2 });
+        init(_this, options, instance$c, create_fragment$n, safe_not_equal, { emailInputValid: 3, emailValue: 0 });
         return _this;
     }
     return EmailInput;
 }(SvelteComponent));
 /* src/icons/EyeIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$k(ctx) {
+function create_fragment$m(ctx) {
     var svg;
     var path;
     return {
@@ -1142,13 +1611,13 @@ var EyeIcon = /** @class */ (function (_super) {
     __extends(EyeIcon, _super);
     function EyeIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$k, safe_not_equal, {});
+        init(_this, options, null, create_fragment$m, safe_not_equal, {});
         return _this;
     }
     return EyeIcon;
 }(SvelteComponent));
 /* src/icons/EyeSlashIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$j(ctx) {
+function create_fragment$l(ctx) {
     var svg;
     var path;
     return {
@@ -1179,7 +1648,7 @@ var EyeSlashIcon = /** @class */ (function (_super) {
     __extends(EyeSlashIcon, _super);
     function EyeSlashIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$j, safe_not_equal, {});
+        init(_this, options, null, create_fragment$l, safe_not_equal, {});
         return _this;
     }
     return EyeSlashIcon;
@@ -1205,7 +1674,7 @@ function create_if_block_2$2(ctx) {
             insert(target, div, anchor);
             append(div, button);
             if (!mounted) {
-                dispose = listen(button, "click", /*click_handler*/ ctx[10]);
+                dispose = listen(button, "click", /*click_handler*/ ctx[12]);
                 mounted = true;
             }
         },
@@ -1218,8 +1687,8 @@ function create_if_block_2$2(ctx) {
         }
     };
 }
-// (51:6) {:else}
-function create_else_block(ctx) {
+// (57:6) {:else}
+function create_else_block$1(ctx) {
     var eyeslashicon;
     var current;
     eyeslashicon = new EyeSlashIcon({});
@@ -1246,8 +1715,8 @@ function create_else_block(ctx) {
         }
     };
 }
-// (49:6) {#if !passwordVisible}
-function create_if_block_1$2(ctx) {
+// (55:6) {#if !passwordVisible}
+function create_if_block_1$3(ctx) {
     var eyeicon;
     var current;
     eyeicon = new EyeIcon({});
@@ -1274,8 +1743,8 @@ function create_if_block_1$2(ctx) {
         }
     };
 }
-// (56:2) {#if inputError}
-function create_if_block$4(ctx) {
+// (62:2) {#if inputError}
+function create_if_block$7(ctx) {
     var div;
     var erroricon;
     var t0;
@@ -1315,7 +1784,7 @@ function create_if_block$4(ctx) {
         }
     };
 }
-function create_fragment$i(ctx) {
+function create_fragment$k(ctx) {
     var div3;
     var div0;
     var label;
@@ -1324,6 +1793,7 @@ function create_fragment$i(ctx) {
     var t2;
     var div2;
     var input;
+    var input_value_value;
     var t3;
     var div1;
     var current_block_type_index;
@@ -1332,23 +1802,23 @@ function create_fragment$i(ctx) {
     var current;
     var mounted;
     var dispose;
-    var if_block0 = /*showForgotPasswordLabel*/ ctx[1] && create_if_block_2$2(ctx);
-    var if_block_creators = [create_if_block_1$2, create_else_block];
+    var if_block0 = /*showForgotPasswordLabel*/ ctx[2] && create_if_block_2$2(ctx);
+    var if_block_creators = [create_if_block_1$3, create_else_block$1];
     var if_blocks = [];
     function select_block_type(ctx, dirty) {
-        if (!ctx[4])
+        if (!ctx[5])
             return 0;
         return 1;
     }
     current_block_type_index = select_block_type(ctx);
     if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-    var if_block2 = /*inputError*/ ctx[5] && create_if_block$4();
+    var if_block2 = /*inputError*/ ctx[6] && create_if_block$7();
     return {
         c: function () {
             div3 = element("div");
             div0 = element("div");
             label = element("label");
-            t0 = text(/*passwordLabel*/ ctx[2]);
+            t0 = text(/*passwordLabel*/ ctx[3]);
             t1 = space();
             if (if_block0)
                 if_block0.c();
@@ -1365,8 +1835,9 @@ function create_fragment$i(ctx) {
             attr(label, "for", "psw");
             attr(div0, "class", "ms-form__flex");
             attr(input, "class", "ms-form__input ms-form__input--password");
-            attr(input, "type", /*type*/ ctx[6]);
-            attr(input, "placeholder", /*passwordPlaceholder*/ ctx[3]);
+            attr(input, "type", /*type*/ ctx[7]);
+            attr(input, "placeholder", /*passwordPlaceholder*/ ctx[4]);
+            input.value = input_value_value = /*passwordValue*/ ctx[0] || "";
             attr(input, "name", "psw");
             attr(input, "autocomplete", "off");
             input.required = true;
@@ -1395,17 +1866,18 @@ function create_fragment$i(ctx) {
             current = true;
             if (!mounted) {
                 dispose = [
-                    listen(input, "blur", /*validateField*/ ctx[8]),
-                    listen(div1, "click", /*togglePassword*/ ctx[7])
+                    listen(input, "input", /*handleInput*/ ctx[9]),
+                    listen(input, "blur", /*validateField*/ ctx[10]),
+                    listen(div1, "click", /*togglePassword*/ ctx[8])
                 ];
                 mounted = true;
             }
         },
         p: function (ctx, _a) {
             var _b = __read(_a, 1), dirty = _b[0];
-            if (!current || dirty & /*passwordLabel*/ 4)
-                set_data(t0, /*passwordLabel*/ ctx[2]);
-            if ( /*showForgotPasswordLabel*/ctx[1]) {
+            if (!current || dirty & /*passwordLabel*/ 8)
+                set_data(t0, /*passwordLabel*/ ctx[3]);
+            if ( /*showForgotPasswordLabel*/ctx[2]) {
                 if (if_block0) {
                     if_block0.p(ctx, dirty);
                 }
@@ -1419,11 +1891,14 @@ function create_fragment$i(ctx) {
                 if_block0.d(1);
                 if_block0 = null;
             }
-            if (!current || dirty & /*type*/ 64) {
-                attr(input, "type", /*type*/ ctx[6]);
+            if (!current || dirty & /*type*/ 128) {
+                attr(input, "type", /*type*/ ctx[7]);
+            }
+            if (!current || dirty & /*passwordPlaceholder*/ 16) {
+                attr(input, "placeholder", /*passwordPlaceholder*/ ctx[4]);
             }
-            if (!current || dirty & /*passwordPlaceholder*/ 8) {
-                attr(input, "placeholder", /*passwordPlaceholder*/ ctx[3]);
+            if (!current || dirty & /*passwordValue*/ 1 && input_value_value !== (input_value_value = /*passwordValue*/ ctx[0] || "") && input.value !== input_value_value) {
+                input.value = input_value_value;
             }
             var previous_block_index = current_block_type_index;
             current_block_type_index = select_block_type(ctx);
@@ -1441,15 +1916,15 @@ function create_fragment$i(ctx) {
                 transition_in(if_block1, 1);
                 if_block1.m(div1, null);
             }
-            if ( /*inputError*/ctx[5]) {
+            if ( /*inputError*/ctx[6]) {
                 if (if_block2) {
                     if_block2.p(ctx, dirty);
-                    if (dirty & /*inputError*/ 32) {
+                    if (dirty & /*inputError*/ 64) {
                         transition_in(if_block2, 1);
                     }
                 }
                 else {
-                    if_block2 = create_if_block$4();
+                    if_block2 = create_if_block$7();
                     if_block2.c();
                     transition_in(if_block2, 1);
                     if_block2.m(div3, null);
@@ -1489,48 +1964,55 @@ function create_fragment$i(ctx) {
     };
 }
 var errorMessage = "Minimum 8 characters required";
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
     var type;
     var _a = $$props.showForgotPasswordLabel, showForgotPasswordLabel = _a === void 0 ? false : _a;
     var _b = $$props.passwordInputValid, passwordInputValid = _b === void 0 ? false : _b;
     var _c = $$props.passwordLabel, passwordLabel = _c === void 0 ? "Password" : _c;
     var _d = $$props.passwordPlaceholder, passwordPlaceholder = _d === void 0 ? "Enter Password" : _d;
+    var passwordValue = $$props.passwordValue;
     var display = $$props.display;
     var inputError = false;
     var passwordVisible = false;
     function togglePassword() {
-        $$invalidate(4, passwordVisible = !passwordVisible);
+        $$invalidate(5, passwordVisible = !passwordVisible);
+    }
+    function handleInput(e) {
+        $$invalidate(0, passwordValue = e.target.value);
     }
     var validateField = function (e) {
         var hasValidPassword = e.target.value.length >= 8 ? true : false;
         if (!hasValidPassword) {
-            $$invalidate(9, passwordInputValid = false);
-            $$invalidate(5, inputError = true);
+            $$invalidate(11, passwordInputValid = false);
+            $$invalidate(6, inputError = true);
         }
         else {
-            $$invalidate(9, passwordInputValid = true);
-            $$invalidate(5, inputError = false);
+            $$invalidate(11, passwordInputValid = true);
+            $$invalidate(6, inputError = false);
         }
     };
-    var click_handler = function () { return $$invalidate(0, display = "forgot_password"); };
+    var click_handler = function () { return $$invalidate(1, display = "forgot_password"); };
     $$self.$$set = function ($$props) {
         if ('showForgotPasswordLabel' in $$props)
-            $$invalidate(1, showForgotPasswordLabel = $$props.showForgotPasswordLabel);
+            $$invalidate(2, showForgotPasswordLabel = $$props.showForgotPasswordLabel);
         if ('passwordInputValid' in $$props)
-            $$invalidate(9, passwordInputValid = $$props.passwordInputValid);
+            $$invalidate(11, passwordInputValid = $$props.passwordInputValid);
         if ('passwordLabel' in $$props)
-            $$invalidate(2, passwordLabel = $$props.passwordLabel);
+            $$invalidate(3, passwordLabel = $$props.passwordLabel);
         if ('passwordPlaceholder' in $$props)
-            $$invalidate(3, passwordPlaceholder = $$props.passwordPlaceholder);
+            $$invalidate(4, passwordPlaceholder = $$props.passwordPlaceholder);
+        if ('passwordValue' in $$props)
+            $$invalidate(0, passwordValue = $$props.passwordValue);
         if ('display' in $$props)
-            $$invalidate(0, display = $$props.display);
+            $$invalidate(1, display = $$props.display);
     };
     $$self.$$.update = function () {
-        if ($$self.$$.dirty & /*passwordVisible*/ 16) {
-            $$invalidate(6, type = passwordVisible ? "text" : "password");
+        if ($$self.$$.dirty & /*passwordVisible*/ 32) {
+            $$invalidate(7, type = passwordVisible ? "text" : "password");
         }
     };
     return [
+        passwordValue,
         display,
         showForgotPasswordLabel,
         passwordLabel,
@@ -1539,6 +2021,7 @@ function instance$a($$self, $$props, $$invalidate) {
         inputError,
         type,
         togglePassword,
+        handleInput,
         validateField,
         passwordInputValid,
         click_handler
@@ -1548,19 +2031,20 @@ var PasswordInput = /** @class */ (function (_super) {
     __extends(PasswordInput, _super);
     function PasswordInput(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$a, create_fragment$i, safe_not_equal, {
-            showForgotPasswordLabel: 1,
-            passwordInputValid: 9,
-            passwordLabel: 2,
-            passwordPlaceholder: 3,
-            display: 0
+        init(_this, options, instance$b, create_fragment$k, safe_not_equal, {
+            showForgotPasswordLabel: 2,
+            passwordInputValid: 11,
+            passwordLabel: 3,
+            passwordPlaceholder: 4,
+            passwordValue: 0,
+            display: 1
         });
         return _this;
     }
     return PasswordInput;
 }(SvelteComponent));
 /* src/icons/SecuredIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$h(ctx) {
+function create_fragment$j(ctx) {
     var svg;
     var path;
     return {
@@ -1591,13 +2075,13 @@ var SecuredIcon = /** @class */ (function (_super) {
     __extends(SecuredIcon, _super);
     function SecuredIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$h, safe_not_equal, {});
+        init(_this, options, null, create_fragment$j, safe_not_equal, {});
         return _this;
     }
     return SecuredIcon;
 }(SvelteComponent));
 /* src/components/ModalFooter.svelte generated by Svelte v3.48.0 */
-function create_fragment$g(ctx) {
+function create_fragment$i(ctx) {
     var div;
     var a;
     var securedicon;
@@ -1643,13 +2127,13 @@ var ModalFooter = /** @class */ (function (_super) {
     __extends(ModalFooter, _super);
     function ModalFooter(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$g, safe_not_equal, {});
+        init(_this, options, null, create_fragment$i, safe_not_equal, {});
         return _this;
     }
     return ModalFooter;
 }(SvelteComponent));
 /* src/modals/LoginModal.svelte generated by Svelte v3.48.0 */
-function create_if_block$3(ctx) {
+function create_if_block$6(ctx) {
     var div;
     var button;
     var mounted;
@@ -1680,7 +2164,7 @@ function create_if_block$3(ctx) {
         }
     };
 }
-function create_fragment$f(ctx) {
+function create_fragment$h(ctx) {
     var div1;
     var closebutton;
     var t0;
@@ -1739,7 +2223,7 @@ function create_fragment$f(ctx) {
             isLoading: /*showLoader*/ ctx[3]
         }
     });
-    var if_block = /*params*/ ctx[2] && /*params*/ ctx[2].signup && /*params*/ ctx[2].signup.plans && create_if_block$3(ctx);
+    var if_block = /*params*/ ctx[2] && /*params*/ ctx[2].signup && /*params*/ ctx[2].signup.plans && create_if_block$6(ctx);
     modalfooter = new ModalFooter({});
     return {
         c: function () {
@@ -1832,7 +2316,7 @@ function create_fragment$f(ctx) {
                     if_block.p(ctx, dirty);
                 }
                 else {
-                    if_block = create_if_block$3(ctx);
+                    if_block = create_if_block$6(ctx);
                     if_block.c();
                     if_block.m(form, null);
                 }
@@ -1878,7 +2362,7 @@ function create_fragment$f(ctx) {
         }
     };
 }
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
     var closeModal = $$props.closeModal;
     var display = $$props.display;
     var onSuccessLogin = $$props.onSuccessLogin;
@@ -1961,7 +2445,7 @@ var LoginModal = /** @class */ (function (_super) {
     __extends(LoginModal, _super);
     function LoginModal(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$9, create_fragment$f, safe_not_equal, {
+        init(_this, options, instance$a, create_fragment$h, safe_not_equal, {
             closeModal: 1,
             display: 0,
             onSuccessLogin: 7,
@@ -1972,27 +2456,130 @@ var LoginModal = /** @class */ (function (_super) {
     return LoginModal;
 }(SvelteComponent));
 /* src/modals/SignupModal.svelte generated by Svelte v3.48.0 */
-function create_fragment$e(ctx) {
-    var div2;
-    var closebutton;
-    var t0;
+function get_each_context$1(ctx, list, i) {
+    var child_ctx = ctx.slice();
+    child_ctx[12] = list[i];
+    child_ctx[14] = i;
+    return child_ctx;
+}
+// (76:6) {#if customField.hidden !== true}
+function create_if_block$5(ctx) {
     var div1;
-    var figureelement;
+    var div0;
+    var label;
+    var t0_value = /*customField*/ ctx[12].label + "";
+    var t0;
+    var label_for_value;
     var t1;
-    var h2;
-    var t3;
-    var form;
-    var emailinput;
-    var updating_emailInputValid;
+    var input;
+    var input_placeholder_value;
+    var input_name_value;
+    return {
+        c: function () {
+            div1 = element("div");
+            div0 = element("div");
+            label = element("label");
+            t0 = text(t0_value);
+            t1 = space();
+            input = element("input");
+            attr(label, "class", "ms-form__label");
+            attr(label, "for", label_for_value = /*customField*/ ctx[12].key);
+            attr(input, "class", "ms-form__input");
+            attr(input, "data-ms-custom-field", "");
+            attr(input, "type", "text");
+            attr(input, "placeholder", input_placeholder_value = /*customField*/ ctx[12].label);
+            attr(input, "name", input_name_value = /*customField*/ ctx[12].key);
+            attr(div0, "class", "ms-form__group");
+            attr(div1, "class", "ms-modal__custom-field-container");
+        },
+        m: function (target, anchor) {
+            insert(target, div1, anchor);
+            append(div1, div0);
+            append(div0, label);
+            append(label, t0);
+            append(div0, t1);
+            append(div0, input);
+        },
+        p: function (ctx, dirty) {
+            if (dirty & /*$app*/ 32 && t0_value !== (t0_value = /*customField*/ ctx[12].label + ""))
+                set_data(t0, t0_value);
+            if (dirty & /*$app*/ 32 && label_for_value !== (label_for_value = /*customField*/ ctx[12].key)) {
+                attr(label, "for", label_for_value);
+            }
+            if (dirty & /*$app*/ 32 && input_placeholder_value !== (input_placeholder_value = /*customField*/ ctx[12].label)) {
+                attr(input, "placeholder", input_placeholder_value);
+            }
+            if (dirty & /*$app*/ 32 && input_name_value !== (input_name_value = /*customField*/ ctx[12].key)) {
+                attr(input, "name", input_name_value);
+            }
+        },
+        d: function (detaching) {
+            if (detaching)
+                detach(div1);
+        }
+    };
+}
+// (75:6) {#each $app.customFields as customField, i}
+function create_each_block$1(ctx) {
+    var if_block_anchor;
+    var if_block = /*customField*/ ctx[12].hidden !== true && create_if_block$5(ctx);
+    return {
+        c: function () {
+            if (if_block)
+                if_block.c();
+            if_block_anchor = empty();
+        },
+        m: function (target, anchor) {
+            if (if_block)
+                if_block.m(target, anchor);
+            insert(target, if_block_anchor, anchor);
+        },
+        p: function (ctx, dirty) {
+            if ( /*customField*/ctx[12].hidden !== true) {
+                if (if_block) {
+                    if_block.p(ctx, dirty);
+                }
+                else {
+                    if_block = create_if_block$5(ctx);
+                    if_block.c();
+                    if_block.m(if_block_anchor.parentNode, if_block_anchor);
+                }
+            }
+            else if (if_block) {
+                if_block.d(1);
+                if_block = null;
+            }
+        },
+        d: function (detaching) {
+            if (if_block)
+                if_block.d(detaching);
+            if (detaching)
+                detach(if_block_anchor);
+        }
+    };
+}
+function create_fragment$g(ctx) {
+    var div2;
+    var closebutton;
+    var t0;
+    var div1;
+    var figureelement;
+    var t1;
+    var h2;
+    var t3;
+    var form;
     var t4;
+    var emailinput;
+    var updating_emailInputValid;
+    var t5;
     var passwordinput;
     var updating_passwordInputValid;
-    var t5;
-    var submitbutton;
     var t6;
+    var submitbutton;
+    var t7;
     var div0;
     var button;
-    var t8;
+    var t9;
     var modalfooter;
     var current;
     var mounted;
@@ -2001,8 +2588,13 @@ function create_fragment$e(ctx) {
         props: { closeModal: /*closeModal*/ ctx[1] }
     });
     figureelement = new FigureElement({});
+    var each_value = /*$app*/ ctx[5].customFields;
+    var each_blocks = [];
+    for (var i = 0; i < each_value.length; i += 1) {
+        each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
+    }
     function emailinput_emailInputValid_binding(value) {
-        /*emailinput_emailInputValid_binding*/ ctx[8](value);
+        /*emailinput_emailInputValid_binding*/ ctx[9](value);
     }
     var emailinput_props = {};
     if ( /*emailInputValid*/ctx[3] !== void 0) {
@@ -2011,7 +2603,7 @@ function create_fragment$e(ctx) {
     emailinput = new EmailInput({ props: emailinput_props });
     binding_callbacks.push(function () { return bind(emailinput, 'emailInputValid', emailinput_emailInputValid_binding); });
     function passwordinput_passwordInputValid_binding(value) {
-        /*passwordinput_passwordInputValid_binding*/ ctx[9](value);
+        /*passwordinput_passwordInputValid_binding*/ ctx[10](value);
     }
     var passwordinput_props = {};
     if ( /*passwordInputValid*/ctx[4] !== void 0) {
@@ -2038,16 +2630,20 @@ function create_fragment$e(ctx) {
             h2.textContent = "Create an account";
             t3 = space();
             form = element("form");
-            create_component(emailinput.$$.fragment);
+            for (var i = 0; i < each_blocks.length; i += 1) {
+                each_blocks[i].c();
+            }
             t4 = space();
-            create_component(passwordinput.$$.fragment);
+            create_component(emailinput.$$.fragment);
             t5 = space();
-            create_component(submitbutton.$$.fragment);
+            create_component(passwordinput.$$.fragment);
             t6 = space();
+            create_component(submitbutton.$$.fragment);
+            t7 = space();
             div0 = element("div");
             button = element("button");
             button.textContent = "Already have an account?";
-            t8 = space();
+            t9 = space();
             create_component(modalfooter.$$.fragment);
             attr(h2, "class", "ms-modal__title");
             attr(button, "class", "ms-form__button ms-form__button--text");
@@ -2070,21 +2666,25 @@ function create_fragment$e(ctx) {
             append(div1, h2);
             append(div1, t3);
             append(div1, form);
-            mount_component(emailinput, form, null);
+            for (var i = 0; i < each_blocks.length; i += 1) {
+                each_blocks[i].m(form, null);
+            }
             append(form, t4);
-            mount_component(passwordinput, form, null);
+            mount_component(emailinput, form, null);
             append(form, t5);
-            mount_component(submitbutton, form, null);
+            mount_component(passwordinput, form, null);
             append(form, t6);
+            mount_component(submitbutton, form, null);
+            append(form, t7);
             append(form, div0);
             append(div0, button);
-            append(div2, t8);
+            append(div2, t9);
             mount_component(modalfooter, div2, null);
             current = true;
             if (!mounted) {
                 dispose = [
-                    listen(button, "click", /*click_handler*/ ctx[10]),
-                    listen(form, "submit", stop_propagation(prevent_default(/*submitSignup*/ ctx[5])))
+                    listen(button, "click", /*click_handler*/ ctx[11]),
+                    listen(form, "submit", stop_propagation(prevent_default(/*submitSignup*/ ctx[6])))
                 ];
                 mounted = true;
             }
@@ -2095,6 +2695,25 @@ function create_fragment$e(ctx) {
             if (dirty & /*closeModal*/ 2)
                 closebutton_changes.closeModal = /*closeModal*/ ctx[1];
             closebutton.$set(closebutton_changes);
+            if (dirty & /*$app*/ 32) {
+                each_value = /*$app*/ ctx[5].customFields;
+                var i = void 0;
+                for (i = 0; i < each_value.length; i += 1) {
+                    var child_ctx = get_each_context$1(ctx, each_value, i);
+                    if (each_blocks[i]) {
+                        each_blocks[i].p(child_ctx, dirty);
+                    }
+                    else {
+                        each_blocks[i] = create_each_block$1(child_ctx);
+                        each_blocks[i].c();
+                        each_blocks[i].m(form, t4);
+                    }
+                }
+                for (; i < each_blocks.length; i += 1) {
+                    each_blocks[i].d(1);
+                }
+                each_blocks.length = each_value.length;
+            }
             var emailinput_changes = {};
             if (!updating_emailInputValid && dirty & /*emailInputValid*/ 8) {
                 updating_emailInputValid = true;
@@ -2139,6 +2758,7 @@ function create_fragment$e(ctx) {
                 detach(div2);
             destroy_component(closebutton);
             destroy_component(figureelement);
+            destroy_each(each_blocks, detaching);
             destroy_component(emailinput);
             destroy_component(passwordinput);
             destroy_component(submitbutton);
@@ -2148,7 +2768,9 @@ function create_fragment$e(ctx) {
         }
     };
 }
-function instance$8($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
+    var $app;
+    component_subscribe($$self, AppStore, function ($$value) { return $$invalidate(5, $app = $$value); });
     var closeModal = $$props.closeModal;
     var display = $$props.display;
     var onSuccessSignup = $$props.onSuccessSignup;
@@ -2159,12 +2781,17 @@ function instance$8($$self, $$props, $$invalidate) {
     function submitSignup(e) {
         var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var emailInput, passwordInput, plans, data, err_2;
+            var emailInput, passwordInput, customFields, customFieldInputs, plans, data, err_2;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        emailInput = e.target[0];
-                        passwordInput = e.target[1];
+                        emailInput = e.target.querySelector("[type=email]");
+                        passwordInput = e.target.querySelector("[type=password]");
+                        customFields = {};
+                        customFieldInputs = Array.from(e.target.querySelectorAll("[data-ms-custom-field]"));
+                        customFieldInputs.map(function (input) {
+                            customFields[input.getAttribute("name")] = input.value;
+                        }).length;
                         if (!emailInputValid || !passwordInputValid)
                             return [2 /*return*/];
                         $$invalidate(2, showLoader = true);
@@ -2177,7 +2804,8 @@ function instance$8($$self, $$props, $$invalidate) {
                         return [4 /*yield*/, window.$memberstackDom.signupMemberEmailPassword({
                                 email: emailInput.value,
                                 password: passwordInput.value,
-                                plans: plans
+                                plans: plans,
+                                customFields: customFields
                             })];
                     case 2:
                         data = (_b.sent()).data;
@@ -2209,9 +2837,9 @@ function instance$8($$self, $$props, $$invalidate) {
         if ('display' in $$props)
             $$invalidate(0, display = $$props.display);
         if ('onSuccessSignup' in $$props)
-            $$invalidate(6, onSuccessSignup = $$props.onSuccessSignup);
+            $$invalidate(7, onSuccessSignup = $$props.onSuccessSignup);
         if ('params' in $$props)
-            $$invalidate(7, params = $$props.params);
+            $$invalidate(8, params = $$props.params);
     };
     return [
         display,
@@ -2219,6 +2847,7 @@ function instance$8($$self, $$props, $$invalidate) {
         showLoader,
         emailInputValid,
         passwordInputValid,
+        $app,
         submitSignup,
         onSuccessSignup,
         params,
@@ -2231,18 +2860,18 @@ var SignupModal = /** @class */ (function (_super) {
     __extends(SignupModal, _super);
     function SignupModal(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$8, create_fragment$e, safe_not_equal, {
+        init(_this, options, instance$9, create_fragment$g, safe_not_equal, {
             closeModal: 1,
             display: 0,
-            onSuccessSignup: 6,
-            params: 7
+            onSuccessSignup: 7,
+            params: 8
         });
         return _this;
     }
     return SignupModal;
 }(SvelteComponent));
 /* src/icons/BackIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$d(ctx) {
+function create_fragment$f(ctx) {
     var svg;
     var path;
     return {
@@ -2272,13 +2901,13 @@ var BackIcon = /** @class */ (function (_super) {
     __extends(BackIcon, _super);
     function BackIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$d, safe_not_equal, {});
+        init(_this, options, null, create_fragment$f, safe_not_equal, {});
         return _this;
     }
     return BackIcon;
 }(SvelteComponent));
 /* src/modals/PassResetModal.svelte generated by Svelte v3.48.0 */
-function create_fragment$c(ctx) {
+function create_fragment$e(ctx) {
     var div3;
     var div0;
     var button;
@@ -2450,7 +3079,7 @@ function create_fragment$c(ctx) {
         }
     };
 }
-function instance$7($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
     var closeModal = $$props.closeModal;
     var display = $$props.display;
     var emailInputValid = false;
@@ -2511,13 +3140,13 @@ var PassResetModal = /** @class */ (function (_super) {
     __extends(PassResetModal, _super);
     function PassResetModal(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$7, create_fragment$c, safe_not_equal, { closeModal: 1, display: 0 });
+        init(_this, options, instance$8, create_fragment$e, safe_not_equal, { closeModal: 1, display: 0 });
         return _this;
     }
     return PassResetModal;
 }(SvelteComponent));
 /* src/modals/PassTokenModal.svelte generated by Svelte v3.48.0 */
-function create_if_block$2(ctx) {
+function create_if_block$4(ctx) {
     var div;
     var erroricon;
     var t;
@@ -2553,7 +3182,7 @@ function create_if_block$2(ctx) {
         }
     };
 }
-function create_fragment$b(ctx) {
+function create_fragment$d(ctx) {
     var div4;
     var div0;
     var button;
@@ -2589,7 +3218,7 @@ function create_fragment$b(ctx) {
         props: { closeModal: /*closeModal*/ ctx[1] }
     });
     figureelement = new FigureElement({});
-    var if_block = !ctx[3] && create_if_block$2();
+    var if_block = !ctx[3] && create_if_block$4();
     function passwordinput_passwordInputValid_binding(value) {
         /*passwordinput_passwordInputValid_binding*/ ctx[8](value);
     }
@@ -2707,7 +3336,7 @@ function create_fragment$b(ctx) {
                     }
                 }
                 else {
-                    if_block = create_if_block$2();
+                    if_block = create_if_block$4();
                     if_block.c();
                     transition_in(if_block, 1);
                     if_block.m(div1, null);
@@ -2770,7 +3399,7 @@ function create_fragment$b(ctx) {
         }
     };
 }
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
     var closeModal = $$props.closeModal;
     var display = $$props.display;
     var onSuccessPasswordReset = $$props.onSuccessPasswordReset;
@@ -2840,6 +3469,7 @@ function instance$6($$self, $$props, $$invalidate) {
                         window.$memberstackDom._showMessage("Password successfully reset", false);
                         onSuccessPasswordReset({ type: "PASSWORD_RESET", data: data });
                         $$invalidate(2, showLoader = false);
+                        $$invalidate(0, display = "reset_password_success");
                         return [3 /*break*/, 4];
                     case 3:
                         err_4 = _a.sent();
@@ -2883,7 +3513,7 @@ var PassTokenModal = /** @class */ (function (_super) {
     __extends(PassTokenModal, _super);
     function PassTokenModal(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$6, create_fragment$b, safe_not_equal, {
+        init(_this, options, instance$7, create_fragment$d, safe_not_equal, {
             closeModal: 1,
             display: 0,
             onSuccessPasswordReset: 6
@@ -2892,8 +3522,117 @@ var PassTokenModal = /** @class */ (function (_super) {
     }
     return PassTokenModal;
 }(SvelteComponent));
+/* src/modals/PassSuccessModal.svelte generated by Svelte v3.48.0 */
+function create_fragment$c(ctx) {
+    var div2;
+    var div0;
+    var t0;
+    var closebutton;
+    var t1;
+    var div1;
+    var figureelement;
+    var t2;
+    var h2;
+    var t4;
+    var p;
+    var t7;
+    var modalfooter;
+    var current;
+    closebutton = new CloseButton({
+        props: { closeModal: /*closeModal*/ ctx[0] }
+    });
+    figureelement = new FigureElement({});
+    modalfooter = new ModalFooter({});
+    return {
+        c: function () {
+            div2 = element("div");
+            div0 = element("div");
+            t0 = space();
+            create_component(closebutton.$$.fragment);
+            t1 = space();
+            div1 = element("div");
+            create_component(figureelement.$$.fragment);
+            t2 = space();
+            h2 = element("h2");
+            h2.textContent = "Success!";
+            t4 = space();
+            p = element("p");
+            p.innerHTML = "Your password has been reset. <br/>\n      Please login with your new credentials.";
+            t7 = space();
+            create_component(modalfooter.$$.fragment);
+            attr(div0, "data-cy", "back-btn");
+            attr(div0, "class", "ms-modal__back");
+            attr(h2, "class", "ms-modal__title ms-modal__title--sub-text");
+            attr(p, "class", "ms-modal__text");
+            attr(div1, "class", "ms-modal__content");
+            attr(div2, "class", "ms-modal");
+            attr(div2, "id", "PasswordSuccessModal");
+        },
+        m: function (target, anchor) {
+            insert(target, div2, anchor);
+            append(div2, div0);
+            append(div2, t0);
+            mount_component(closebutton, div2, null);
+            append(div2, t1);
+            append(div2, div1);
+            mount_component(figureelement, div1, null);
+            append(div1, t2);
+            append(div1, h2);
+            append(div1, t4);
+            append(div1, p);
+            append(div2, t7);
+            mount_component(modalfooter, div2, null);
+            current = true;
+        },
+        p: function (ctx, _a) {
+            var _b = __read(_a, 1), dirty = _b[0];
+            var closebutton_changes = {};
+            if (dirty & /*closeModal*/ 1)
+                closebutton_changes.closeModal = /*closeModal*/ ctx[0];
+            closebutton.$set(closebutton_changes);
+        },
+        i: function (local) {
+            if (current)
+                return;
+            transition_in(closebutton.$$.fragment, local);
+            transition_in(figureelement.$$.fragment, local);
+            transition_in(modalfooter.$$.fragment, local);
+            current = true;
+        },
+        o: function (local) {
+            transition_out(closebutton.$$.fragment, local);
+            transition_out(figureelement.$$.fragment, local);
+            transition_out(modalfooter.$$.fragment, local);
+            current = false;
+        },
+        d: function (detaching) {
+            if (detaching)
+                detach(div2);
+            destroy_component(closebutton);
+            destroy_component(figureelement);
+            destroy_component(modalfooter);
+        }
+    };
+}
+function instance$6($$self, $$props, $$invalidate) {
+    var closeModal = $$props.closeModal;
+    $$self.$$set = function ($$props) {
+        if ('closeModal' in $$props)
+            $$invalidate(0, closeModal = $$props.closeModal);
+    };
+    return [closeModal];
+}
+var PassSuccessModal = /** @class */ (function (_super) {
+    __extends(PassSuccessModal, _super);
+    function PassSuccessModal(options) {
+        var _this = _super.call(this) || this;
+        init(_this, options, instance$6, create_fragment$c, safe_not_equal, { closeModal: 0 });
+        return _this;
+    }
+    return PassSuccessModal;
+}(SvelteComponent));
 /* src/icons/ProfileIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
     var svg;
     var path;
     return {
@@ -2923,13 +3662,13 @@ var ProfileIcon = /** @class */ (function (_super) {
     __extends(ProfileIcon, _super);
     function ProfileIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$a, safe_not_equal, {});
+        init(_this, options, null, create_fragment$b, safe_not_equal, {});
         return _this;
     }
     return ProfileIcon;
 }(SvelteComponent));
 /* src/icons/SecurityIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$9(ctx) {
+function create_fragment$a(ctx) {
     var svg;
     var path;
     return {
@@ -2959,13 +3698,13 @@ var SecurityIcon = /** @class */ (function (_super) {
     __extends(SecurityIcon, _super);
     function SecurityIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$9, safe_not_equal, {});
+        init(_this, options, null, create_fragment$a, safe_not_equal, {});
         return _this;
     }
     return SecurityIcon;
 }(SvelteComponent));
 /* src/icons/LinkOutIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$8(ctx) {
+function create_fragment$9(ctx) {
     var svg;
     var path;
     return {
@@ -2995,13 +3734,13 @@ var LinkOutIcon = /** @class */ (function (_super) {
     __extends(LinkOutIcon, _super);
     function LinkOutIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$8, safe_not_equal, {});
+        init(_this, options, null, create_fragment$9, safe_not_equal, {});
         return _this;
     }
     return LinkOutIcon;
 }(SvelteComponent));
 /* src/icons/LogoutIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$7(ctx) {
+function create_fragment$8(ctx) {
     var svg;
     var path;
     return {
@@ -3033,132 +3772,247 @@ var LogoutIcon = /** @class */ (function (_super) {
     __extends(LogoutIcon, _super);
     function LogoutIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$7, safe_not_equal, {});
+        init(_this, options, null, create_fragment$8, safe_not_equal, {});
         return _this;
     }
     return LogoutIcon;
 }(SvelteComponent));
 /* src/components/ProfileModalNav.svelte generated by Svelte v3.48.0 */
-function create_fragment$6(ctx) {
-    var button0;
+function create_if_block_1$2(ctx) {
+    var button;
     var profileicon;
-    var t0;
-    var t1;
-    var button1;
-    var securityicon;
-    var t2;
-    var t3;
-    var button2;
-    var linkouticon;
-    var t4;
-    var t5;
-    var button3;
-    var logouticon;
-    var t6;
+    var t;
     var current;
     var mounted;
     var dispose;
     profileicon = new ProfileIcon({});
-    securityicon = new SecurityIcon({});
+    return {
+        c: function () {
+            button = element("button");
+            create_component(profileicon.$$.fragment);
+            t = text(" Profile");
+            attr(button, "class", "ms-modal__profile-option");
+            toggle_class(button, "ms-modal__profile-option--active", /*displayProfile*/ ctx[0] === "profile");
+        },
+        m: function (target, anchor) {
+            insert(target, button, anchor);
+            mount_component(profileicon, button, null);
+            append(button, t);
+            current = true;
+            if (!mounted) {
+                dispose = listen(button, "click", /*click_handler*/ ctx[7]);
+                mounted = true;
+            }
+        },
+        p: function (ctx, dirty) {
+            if (dirty & /*displayProfile*/ 1) {
+                toggle_class(button, "ms-modal__profile-option--active", /*displayProfile*/ ctx[0] === "profile");
+            }
+        },
+        i: function (local) {
+            if (current)
+                return;
+            transition_in(profileicon.$$.fragment, local);
+            current = true;
+        },
+        o: function (local) {
+            transition_out(profileicon.$$.fragment, local);
+            current = false;
+        },
+        d: function (detaching) {
+            if (detaching)
+                detach(button);
+            destroy_component(profileicon);
+            mounted = false;
+            dispose();
+        }
+    };
+}
+// (63:0) {#if member.stripeCustomerId}
+function create_if_block$3(ctx) {
+    var button;
+    var linkouticon;
+    var t;
+    var current;
+    var mounted;
+    var dispose;
     linkouticon = new LinkOutIcon({});
+    return {
+        c: function () {
+            button = element("button");
+            create_component(linkouticon.$$.fragment);
+            t = text(" Billing Portal");
+            attr(button, "class", "ms-modal__profile-option");
+        },
+        m: function (target, anchor) {
+            insert(target, button, anchor);
+            mount_component(linkouticon, button, null);
+            append(button, t);
+            current = true;
+            if (!mounted) {
+                dispose = listen(button, "click", /*launchPortal*/ ctx[4]);
+                mounted = true;
+            }
+        },
+        p: noop,
+        i: function (local) {
+            if (current)
+                return;
+            transition_in(linkouticon.$$.fragment, local);
+            current = true;
+        },
+        o: function (local) {
+            transition_out(linkouticon.$$.fragment, local);
+            current = false;
+        },
+        d: function (detaching) {
+            if (detaching)
+                detach(button);
+            destroy_component(linkouticon);
+            mounted = false;
+            dispose();
+        }
+    };
+}
+function create_fragment$7(ctx) {
+    var t0;
+    var button0;
+    var securityicon;
+    var t1;
+    var t2;
+    var t3;
+    var button1;
+    var logouticon;
+    var t4;
+    var current;
+    var mounted;
+    var dispose;
+    var if_block0 = !ctx[2] && create_if_block_1$2(ctx);
+    securityicon = new SecurityIcon({});
+    var if_block1 = /*member*/ ctx[1].stripeCustomerId && create_if_block$3(ctx);
     logouticon = new LogoutIcon({});
     return {
         c: function () {
+            if (if_block0)
+                if_block0.c();
+            t0 = space();
             button0 = element("button");
-            create_component(profileicon.$$.fragment);
-            t0 = text(" Profile");
-            t1 = space();
-            button1 = element("button");
             create_component(securityicon.$$.fragment);
-            t2 = text(" Security");
+            t1 = text(" Security");
+            t2 = space();
+            if (if_block1)
+                if_block1.c();
             t3 = space();
-            button2 = element("button");
-            create_component(linkouticon.$$.fragment);
-            t4 = text(" Billing Portal");
-            t5 = space();
-            button3 = element("button");
+            button1 = element("button");
             create_component(logouticon.$$.fragment);
-            t6 = text(" Logout");
+            t4 = text(" Logout");
             attr(button0, "class", "ms-modal__profile-option");
-            toggle_class(button0, "ms-modal__profile-option--active", /*displayProfile*/ ctx[0] === "profile");
+            toggle_class(button0, "ms-modal__profile-option--active", /*displayProfile*/ ctx[0] === "security" || /*displayProfile*/ ctx[0] === "changePassword");
             attr(button1, "class", "ms-modal__profile-option");
-            toggle_class(button1, "ms-modal__profile-option--active", /*displayProfile*/ ctx[0] === "security" || /*displayProfile*/ ctx[0] === "changePassword");
-            attr(button2, "class", "ms-modal__profile-option");
-            attr(button3, "class", "ms-modal__profile-option");
         },
         m: function (target, anchor) {
+            if (if_block0)
+                if_block0.m(target, anchor);
+            insert(target, t0, anchor);
             insert(target, button0, anchor);
-            mount_component(profileicon, button0, null);
-            append(button0, t0);
-            insert(target, t1, anchor);
-            insert(target, button1, anchor);
-            mount_component(securityicon, button1, null);
-            append(button1, t2);
+            mount_component(securityicon, button0, null);
+            append(button0, t1);
+            insert(target, t2, anchor);
+            if (if_block1)
+                if_block1.m(target, anchor);
             insert(target, t3, anchor);
-            insert(target, button2, anchor);
-            mount_component(linkouticon, button2, null);
-            append(button2, t4);
-            insert(target, t5, anchor);
-            insert(target, button3, anchor);
-            mount_component(logouticon, button3, null);
-            append(button3, t6);
+            insert(target, button1, anchor);
+            mount_component(logouticon, button1, null);
+            append(button1, t4);
             current = true;
             if (!mounted) {
                 dispose = [
-                    listen(button0, "click", /*click_handler*/ ctx[2]),
-                    listen(button1, "click", /*click_handler_1*/ ctx[3]),
-                    listen(button2, "click", function () {
-                        if (is_function(/*displayBilling*/ ctx[1])) /*displayBilling*/
-                            ctx[1].apply(this, arguments);
-                    })
+                    listen(button0, "click", /*click_handler_1*/ ctx[8]),
+                    listen(button1, "click", /*logout*/ ctx[3])
                 ];
                 mounted = true;
             }
         },
-        p: function (new_ctx, _a) {
+        p: function (ctx, _a) {
             var _b = __read(_a, 1), dirty = _b[0];
-            ctx = new_ctx;
-            if (dirty & /*displayProfile*/ 1) {
-                toggle_class(button0, "ms-modal__profile-option--active", /*displayProfile*/ ctx[0] === "profile");
+            if (!ctx[2]) {
+                if (if_block0) {
+                    if_block0.p(ctx, dirty);
+                    if (dirty & /*hideProfileSection*/ 4) {
+                        transition_in(if_block0, 1);
+                    }
+                }
+                else {
+                    if_block0 = create_if_block_1$2(ctx);
+                    if_block0.c();
+                    transition_in(if_block0, 1);
+                    if_block0.m(t0.parentNode, t0);
+                }
+            }
+            else if (if_block0) {
+                group_outros();
+                transition_out(if_block0, 1, 1, function () {
+                    if_block0 = null;
+                });
+                check_outros();
             }
             if (dirty & /*displayProfile*/ 1) {
-                toggle_class(button1, "ms-modal__profile-option--active", /*displayProfile*/ ctx[0] === "security" || /*displayProfile*/ ctx[0] === "changePassword");
+                toggle_class(button0, "ms-modal__profile-option--active", /*displayProfile*/ ctx[0] === "security" || /*displayProfile*/ ctx[0] === "changePassword");
+            }
+            if ( /*member*/ctx[1].stripeCustomerId) {
+                if (if_block1) {
+                    if_block1.p(ctx, dirty);
+                    if (dirty & /*member*/ 2) {
+                        transition_in(if_block1, 1);
+                    }
+                }
+                else {
+                    if_block1 = create_if_block$3(ctx);
+                    if_block1.c();
+                    transition_in(if_block1, 1);
+                    if_block1.m(t3.parentNode, t3);
+                }
+            }
+            else if (if_block1) {
+                group_outros();
+                transition_out(if_block1, 1, 1, function () {
+                    if_block1 = null;
+                });
+                check_outros();
             }
         },
         i: function (local) {
             if (current)
                 return;
-            transition_in(profileicon.$$.fragment, local);
+            transition_in(if_block0);
             transition_in(securityicon.$$.fragment, local);
-            transition_in(linkouticon.$$.fragment, local);
+            transition_in(if_block1);
             transition_in(logouticon.$$.fragment, local);
             current = true;
         },
         o: function (local) {
-            transition_out(profileicon.$$.fragment, local);
+            transition_out(if_block0);
             transition_out(securityicon.$$.fragment, local);
-            transition_out(linkouticon.$$.fragment, local);
+            transition_out(if_block1);
             transition_out(logouticon.$$.fragment, local);
             current = false;
         },
         d: function (detaching) {
+            if (if_block0)
+                if_block0.d(detaching);
             if (detaching)
-                detach(button0);
-            destroy_component(profileicon);
-            if (detaching)
-                detach(t1);
+                detach(t0);
             if (detaching)
-                detach(button1);
+                detach(button0);
             destroy_component(securityicon);
             if (detaching)
-                detach(t3);
-            if (detaching)
-                detach(button2);
-            destroy_component(linkouticon);
+                detach(t2);
+            if (if_block1)
+                if_block1.d(detaching);
             if (detaching)
-                detach(t5);
+                detach(t3);
             if (detaching)
-                detach(button3);
+                detach(button1);
             destroy_component(logouticon);
             mounted = false;
             run_all(dispose);
@@ -3166,48 +4020,127 @@ function create_fragment$6(ctx) {
     };
 }
 function instance$5($$self, $$props, $$invalidate) {
+    var member = $$props.member;
+    var onSuccessLogout = $$props.onSuccessLogout;
     var displayProfile = $$props.displayProfile;
-    var displayBilling = $$props.displayBilling;
+    var profileLoader = $$props.profileLoader;
+    var hideProfileSection = $$props.hideProfileSection;
+    var unsubscribe = AppStore.subscribe(function (data) {
+        if (!data.initialValue) {
+            var container = document.getElementById("msOverlay");
+            var css = document.createElement("style");
+            var color = data.branding.colors.lightMode.primaryButton;
+            var fullCSS = ".ms-modal__profile-option:hover { color: " + color + ";} .ms-modal__profile-option--active { color: " + color + ";} .ms-modal__save-button { background: " + color + ";} .ms-modal__save-button:disabled { background: " + color + ";}";
+            css.appendChild(document.createTextNode(fullCSS));
+            container.appendChild(css);
+        }
+    });
+    onDestroy(function () {
+        unsubscribe();
+    });
+    function logout(e) {
+        return __awaiter(this, void 0, void 0, function () {
+            var data, err_5;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, window.$memberstackDom.logout()];
+                    case 1:
+                        data = (_a.sent()).data;
+                        window.$memberstackDom._showMessage("Logout successful", false);
+                        onSuccessLogout({ type: "LOGOUT", data: data });
+                        return [3 /*break*/, 3];
+                    case 2:
+                        err_5 = _a.sent();
+                        window.$memberstackDom._showMessage(err_5.message, true);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function launchPortal(e) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        $$invalidate(5, profileLoader = true);
+                        return [4 /*yield*/, window.$memberstackDom.launchStripeCustomerPortal({ priceIds: [], autoRedirect: true })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
     var click_handler = function () { return $$invalidate(0, displayProfile = "profile"); };
     var click_handler_1 = function () { return $$invalidate(0, displayProfile = "security"); };
     $$self.$$set = function ($$props) {
+        if ('member' in $$props)
+            $$invalidate(1, member = $$props.member);
+        if ('onSuccessLogout' in $$props)
+            $$invalidate(6, onSuccessLogout = $$props.onSuccessLogout);
         if ('displayProfile' in $$props)
             $$invalidate(0, displayProfile = $$props.displayProfile);
-        if ('displayBilling' in $$props)
-            $$invalidate(1, displayBilling = $$props.displayBilling);
+        if ('profileLoader' in $$props)
+            $$invalidate(5, profileLoader = $$props.profileLoader);
+        if ('hideProfileSection' in $$props)
+            $$invalidate(2, hideProfileSection = $$props.hideProfileSection);
     };
-    return [displayProfile, displayBilling, click_handler, click_handler_1];
+    return [
+        displayProfile,
+        member,
+        hideProfileSection,
+        logout,
+        launchPortal,
+        profileLoader,
+        onSuccessLogout,
+        click_handler,
+        click_handler_1
+    ];
 }
 var ProfileModalNav = /** @class */ (function (_super) {
     __extends(ProfileModalNav, _super);
     function ProfileModalNav(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$5, create_fragment$6, safe_not_equal, { displayProfile: 0, displayBilling: 1 });
+        init(_this, options, instance$5, create_fragment$7, safe_not_equal, {
+            member: 1,
+            onSuccessLogout: 6,
+            displayProfile: 0,
+            profileLoader: 5,
+            hideProfileSection: 2
+        });
         return _this;
     }
     return ProfileModalNav;
 }(SvelteComponent));
-/* src/components/ProfieInfoContent.svelte generated by Svelte v3.48.0 */
+/* src/components/ProfileInfoContent.svelte generated by Svelte v3.48.0 */
 function get_each_context(ctx, list, i) {
     var child_ctx = ctx.slice();
-    child_ctx[1] = list[i];
-    child_ctx[3] = i;
+    child_ctx[5] = list[i];
+    child_ctx[6] = list;
+    child_ctx[7] = i;
     return child_ctx;
 }
-// (32:1) {#each customFields as customField, i}
-function create_each_block(ctx) {
+// (26:2) {#if customField.hidden !== true}
+function create_if_block$2(ctx) {
     var div1;
     var div0;
     var label;
-    var t0_value = /*customField*/ ctx[1].label + "";
+    var t0_value = /*customField*/ ctx[5].label + "";
     var t0;
     var label_for_value;
     var t1;
     var input;
     var input_placeholder_value;
     var input_name_value;
-    var input_value_value;
     var t2;
+    var mounted;
+    var dispose;
+    function input_input_handler() {
+        /*input_input_handler*/ ctx[4].call(input, /*customField*/ ctx[5]);
+    }
     return {
         c: function () {
             div1 = element("div");
@@ -3218,12 +4151,11 @@ function create_each_block(ctx) {
             input = element("input");
             t2 = space();
             attr(label, "class", "ms-form__label");
-            attr(label, "for", label_for_value = /*customField*/ ctx[1].id);
+            attr(label, "for", label_for_value = /*customField*/ ctx[5].key);
             attr(input, "class", "ms-form__input");
             attr(input, "type", "text");
-            attr(input, "placeholder", input_placeholder_value = /*customField*/ ctx[1].value);
-            attr(input, "name", input_name_value = /*customField*/ ctx[1].id);
-            input.value = input_value_value = /*customField*/ ctx[1].value;
+            attr(input, "placeholder", input_placeholder_value = /*customField*/ ctx[5].label);
+            attr(input, "name", input_name_value = /*customField*/ ctx[5].key);
             attr(div0, "class", "ms-form__group");
             attr(div1, "class", "ms-modal__custom-field-container");
         },
@@ -3234,22 +4166,88 @@ function create_each_block(ctx) {
             append(label, t0);
             append(div0, t1);
             append(div0, input);
+            set_input_value(input, /*member*/ ctx[0].customFields[ /*customField*/ctx[5].key]);
             append(div1, t2);
+            if (!mounted) {
+                dispose = listen(input, "input", input_input_handler);
+                mounted = true;
+            }
+        },
+        p: function (new_ctx, dirty) {
+            ctx = new_ctx;
+            if (dirty & /*customFields*/ 2 && t0_value !== (t0_value = /*customField*/ ctx[5].label + ""))
+                set_data(t0, t0_value);
+            if (dirty & /*customFields*/ 2 && label_for_value !== (label_for_value = /*customField*/ ctx[5].key)) {
+                attr(label, "for", label_for_value);
+            }
+            if (dirty & /*customFields*/ 2 && input_placeholder_value !== (input_placeholder_value = /*customField*/ ctx[5].label)) {
+                attr(input, "placeholder", input_placeholder_value);
+            }
+            if (dirty & /*customFields*/ 2 && input_name_value !== (input_name_value = /*customField*/ ctx[5].key)) {
+                attr(input, "name", input_name_value);
+            }
+            if (dirty & /*member, customFields*/ 3 && input.value !== /*member*/ ctx[0].customFields[ /*customField*/ctx[5].key]) {
+                set_input_value(input, /*member*/ ctx[0].customFields[ /*customField*/ctx[5].key]);
+            }
         },
-        p: noop,
         d: function (detaching) {
             if (detaching)
                 detach(div1);
+            mounted = false;
+            dispose();
         }
     };
 }
-function create_fragment$5(ctx) {
+// (25:1) {#each customFields as customField, i}
+function create_each_block(ctx) {
+    var if_block_anchor;
+    var if_block = /*customField*/ ctx[5].hidden !== true && create_if_block$2(ctx);
+    return {
+        c: function () {
+            if (if_block)
+                if_block.c();
+            if_block_anchor = empty();
+        },
+        m: function (target, anchor) {
+            if (if_block)
+                if_block.m(target, anchor);
+            insert(target, if_block_anchor, anchor);
+        },
+        p: function (ctx, dirty) {
+            if ( /*customField*/ctx[5].hidden !== true) {
+                if (if_block) {
+                    if_block.p(ctx, dirty);
+                }
+                else {
+                    if_block = create_if_block$2(ctx);
+                    if_block.c();
+                    if_block.m(if_block_anchor.parentNode, if_block_anchor);
+                }
+            }
+            else if (if_block) {
+                if_block.d(1);
+                if_block = null;
+            }
+        },
+        d: function (detaching) {
+            if (if_block)
+                if_block.d(detaching);
+            if (detaching)
+                detach(if_block_anchor);
+        }
+    };
+}
+function create_fragment$6(ctx) {
     var div1;
-    var t5;
+    var h2;
+    var t1;
+    var div0;
+    var button;
+    var t3;
     var form;
     var mounted;
     var dispose;
-    var each_value = /*customFields*/ ctx[0];
+    var each_value = /*customFields*/ ctx[1];
     var each_blocks = [];
     for (var i = 0; i < each_value.length; i += 1) {
         each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
@@ -3257,12 +4255,20 @@ function create_fragment$5(ctx) {
     return {
         c: function () {
             div1 = element("div");
-            div1.innerHTML = "<h2 class=\"ms-modal__title ms-modal__title--profile\">Profile Information</h2> \n <div class=\"ms-modal__action-container\"><button class=\"ms-modal__cancel-button\">Cancel</button> \n   <button class=\"ms-modal__save-button\">Save</button></div>";
-            t5 = space();
+            h2 = element("h2");
+            h2.textContent = "Profile Information";
+            t1 = space();
+            div0 = element("div");
+            button = element("button");
+            button.textContent = "Save";
+            t3 = space();
             form = element("form");
             for (var i = 0; i < each_blocks.length; i += 1) {
                 each_blocks[i].c();
             }
+            attr(h2, "class", "ms-modal__title ms-modal__title--profile");
+            attr(button, "class", "ms-modal__save-button");
+            attr(div0, "class", "ms-modal__action-container");
             attr(div1, "class", "ms-modal__title-container");
             attr(form, "class", "ms-form");
             attr(form, "action", "");
@@ -3271,20 +4277,27 @@ function create_fragment$5(ctx) {
         },
         m: function (target, anchor) {
             insert(target, div1, anchor);
-            insert(target, t5, anchor);
+            append(div1, h2);
+            append(div1, t1);
+            append(div1, div0);
+            append(div0, button);
+            insert(target, t3, anchor);
             insert(target, form, anchor);
             for (var i = 0; i < each_blocks.length; i += 1) {
                 each_blocks[i].m(form, null);
             }
             if (!mounted) {
-                dispose = listen(form, "submit", stop_propagation(prevent_default(submitProfile)));
+                dispose = [
+                    listen(button, "click", /*saveProfile*/ ctx[2]),
+                    listen(form, "submit", stop_propagation(prevent_default(/*saveProfile*/ ctx[2])))
+                ];
                 mounted = true;
             }
         },
         p: function (ctx, _a) {
             var _b = __read(_a, 1), dirty = _b[0];
-            if (dirty & /*customFields*/ 1) {
-                each_value = /*customFields*/ ctx[0];
+            if (dirty & /*customFields, member*/ 3) {
+                each_value = /*customFields*/ ctx[1];
                 var i = void 0;
                 for (i = 0; i < each_value.length; i += 1) {
                     var child_ctx = get_each_context(ctx, each_value, i);
@@ -3309,65 +4322,63 @@ function create_fragment$5(ctx) {
             if (detaching)
                 detach(div1);
             if (detaching)
-                detach(t5);
+                detach(t3);
             if (detaching)
                 detach(form);
             destroy_each(each_blocks, detaching);
             mounted = false;
-            dispose();
+            run_all(dispose);
         }
     };
 }
-function getMember() {
-    return __awaiter(this, void 0, void 0, function () {
-        var member;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, window.$memberstackDom.getCurrentMember()];
-                case 1:
-                    member = _a.sent();
-                    console.log(member.data);
-                    console.log(member.data.customFields);
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
-function submitProfile(e) {
-    return __awaiter(this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            console.log(e);
-            return [2 /*return*/];
+function instance$4($$self, $$props, $$invalidate) {
+    var customFields = $$props.customFields;
+    var member = $$props.member;
+    var profileLoader = $$props.profileLoader;
+    function saveProfile(e) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        $$invalidate(3, profileLoader = true);
+                        return [4 /*yield*/, window.$memberstackDom.updateMember({ customFields: member.customFields })];
+                    case 1:
+                        _a.sent();
+                        $$invalidate(3, profileLoader = false);
+                        return [2 /*return*/];
+                }
+            });
         });
-    });
-}
-function instance$4($$self) {
-    var customFields = [
-        {
-            id: "firstname",
-            label: "First Name",
-            value: "Bob"
-        },
-        {
-            id: "lastname",
-            label: "Last Name",
-            value: "Barker"
-        }
-    ];
-    getMember();
-    return [customFields];
+    }
+    function input_input_handler(customField) {
+        member.customFields[customField.key] = this.value;
+        $$invalidate(0, member);
+    }
+    $$self.$$set = function ($$props) {
+        if ('customFields' in $$props)
+            $$invalidate(1, customFields = $$props.customFields);
+        if ('member' in $$props)
+            $$invalidate(0, member = $$props.member);
+        if ('profileLoader' in $$props)
+            $$invalidate(3, profileLoader = $$props.profileLoader);
+    };
+    return [member, customFields, saveProfile, profileLoader, input_input_handler];
 }
-var ProfieInfoContent = /** @class */ (function (_super) {
-    __extends(ProfieInfoContent, _super);
-    function ProfieInfoContent(options) {
+var ProfileInfoContent = /** @class */ (function (_super) {
+    __extends(ProfileInfoContent, _super);
+    function ProfileInfoContent(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$4, create_fragment$5, safe_not_equal, {});
+        init(_this, options, instance$4, create_fragment$6, safe_not_equal, {
+            customFields: 1,
+            member: 0,
+            profileLoader: 3
+        });
         return _this;
     }
-    return ProfieInfoContent;
+    return ProfileInfoContent;
 }(SvelteComponent));
 /* src/icons/PasswordLockIcon.svelte generated by Svelte v3.48.0 */
-function create_fragment$4(ctx) {
+function create_fragment$5(ctx) {
     var svg;
     var path;
     return {
@@ -3397,42 +4408,74 @@ var PasswordLockIcon = /** @class */ (function (_super) {
     __extends(PasswordLockIcon, _super);
     function PasswordLockIcon(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, null, create_fragment$4, safe_not_equal, {});
+        init(_this, options, null, create_fragment$5, safe_not_equal, {});
         return _this;
     }
     return PasswordLockIcon;
 }(SvelteComponent));
 /* src/components/SecurityInfoContent.svelte generated by Svelte v3.48.0 */
-function create_fragment$3(ctx) {
+function create_fragment$4(ctx) {
     var div1;
-    var t5;
+    var h2;
+    var t1;
+    var div0;
+    var button0;
+    var t2;
+    var button0_disabled_value;
+    var t3;
     var form;
     var emailinput;
-    var t6;
+    var updating_emailInputValid;
+    var updating_emailValue;
+    var t4;
     var label;
-    var t8;
-    var button2;
+    var t6;
+    var button1;
     var passwordlockicon;
-    var t9;
+    var t7;
     var current;
     var mounted;
     var dispose;
-    emailinput = new EmailInput({});
+    function emailinput_emailInputValid_binding(value) {
+        /*emailinput_emailInputValid_binding*/ ctx[5](value);
+    }
+    function emailinput_emailValue_binding(value) {
+        /*emailinput_emailValue_binding*/ ctx[6](value);
+    }
+    var emailinput_props = {};
+    if ( /*emailInputValid*/ctx[2] !== void 0) {
+        emailinput_props.emailInputValid = /*emailInputValid*/ ctx[2];
+    }
+    if ( /*emailValue*/ctx[1] !== void 0) {
+        emailinput_props.emailValue = /*emailValue*/ ctx[1];
+    }
+    emailinput = new EmailInput({ props: emailinput_props });
+    binding_callbacks.push(function () { return bind(emailinput, 'emailInputValid', emailinput_emailInputValid_binding); });
+    binding_callbacks.push(function () { return bind(emailinput, 'emailValue', emailinput_emailValue_binding); });
     passwordlockicon = new PasswordLockIcon({});
     return {
         c: function () {
             div1 = element("div");
-            div1.innerHTML = "<h2 class=\"ms-modal__title ms-modal__title--profile\">Security</h2> \n  <div class=\"ms-modal__action-container\"><button class=\"ms-modal__cancel-button\">Cancel</button> \n    <button class=\"ms-modal__save-button\">Save</button></div>";
-            t5 = space();
+            h2 = element("h2");
+            h2.textContent = "Security";
+            t1 = space();
+            div0 = element("div");
+            button0 = element("button");
+            t2 = text("Save");
+            t3 = space();
             form = element("form");
             create_component(emailinput.$$.fragment);
-            t6 = space();
+            t4 = space();
             label = element("label");
             label.textContent = "Password";
-            t8 = space();
-            button2 = element("button");
+            t6 = space();
+            button1 = element("button");
             create_component(passwordlockicon.$$.fragment);
-            t9 = text(" Set Password");
+            t7 = text(" Set Password");
+            attr(h2, "class", "ms-modal__title ms-modal__title--profile");
+            attr(button0, "class", "ms-modal__save-button");
+            button0.disabled = button0_disabled_value = !ctx[2];
+            attr(div0, "class", "ms-modal__action-container");
             attr(div1, "class", "ms-modal__title-container");
             attr(form, "class", "ms-form");
             attr(form, "action", "");
@@ -3440,30 +4483,53 @@ function create_fragment$3(ctx) {
             attr(form, "autocomplete", "off");
             attr(label, "class", "ms-modal__button-label");
             attr(label, "for", "setPassword");
-            attr(button2, "class", "ms-modal__outline-button");
-            attr(button2, "name", "setPassword");
+            attr(button1, "class", "ms-modal__outline-button");
+            attr(button1, "name", "setPassword");
         },
         m: function (target, anchor) {
             insert(target, div1, anchor);
-            insert(target, t5, anchor);
+            append(div1, h2);
+            append(div1, t1);
+            append(div1, div0);
+            append(div0, button0);
+            append(button0, t2);
+            insert(target, t3, anchor);
             insert(target, form, anchor);
             mount_component(emailinput, form, null);
-            insert(target, t6, anchor);
+            insert(target, t4, anchor);
             insert(target, label, anchor);
-            insert(target, t8, anchor);
-            insert(target, button2, anchor);
-            mount_component(passwordlockicon, button2, null);
-            append(button2, t9);
+            insert(target, t6, anchor);
+            insert(target, button1, anchor);
+            mount_component(passwordlockicon, button1, null);
+            append(button1, t7);
             current = true;
             if (!mounted) {
                 dispose = [
-                    listen(form, "submit", stop_propagation(prevent_default(submitEmailChange))),
-                    listen(button2, "click", /*click_handler*/ ctx[1])
+                    listen(button0, "click", /*submitEmailChange*/ ctx[3]),
+                    listen(form, "submit", stop_propagation(prevent_default(/*submitEmailChange*/ ctx[3]))),
+                    listen(button1, "click", /*click_handler*/ ctx[7])
                 ];
                 mounted = true;
             }
         },
-        p: noop,
+        p: function (ctx, _a) {
+            var _b = __read(_a, 1), dirty = _b[0];
+            if (!current || dirty & /*emailInputValid*/ 4 && button0_disabled_value !== (button0_disabled_value = !ctx[2])) {
+                button0.disabled = button0_disabled_value;
+            }
+            var emailinput_changes = {};
+            if (!updating_emailInputValid && dirty & /*emailInputValid*/ 4) {
+                updating_emailInputValid = true;
+                emailinput_changes.emailInputValid = /*emailInputValid*/ ctx[2];
+                add_flush_callback(function () { return updating_emailInputValid = false; });
+            }
+            if (!updating_emailValue && dirty & /*emailValue*/ 2) {
+                updating_emailValue = true;
+                emailinput_changes.emailValue = /*emailValue*/ ctx[1];
+                add_flush_callback(function () { return updating_emailValue = false; });
+            }
+            emailinput.$set(emailinput_changes);
+        },
         i: function (local) {
             if (current)
                 return;
@@ -3480,52 +4546,100 @@ function create_fragment$3(ctx) {
             if (detaching)
                 detach(div1);
             if (detaching)
-                detach(t5);
+                detach(t3);
             if (detaching)
                 detach(form);
             destroy_component(emailinput);
             if (detaching)
-                detach(t6);
+                detach(t4);
             if (detaching)
                 detach(label);
             if (detaching)
-                detach(t8);
+                detach(t6);
             if (detaching)
-                detach(button2);
+                detach(button1);
             destroy_component(passwordlockicon);
             mounted = false;
             run_all(dispose);
         }
     };
 }
-function submitEmailChange(e) {
-    return __awaiter(this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            console.log(e);
-            return [2 /*return*/];
-        });
-    });
-}
 function instance$3($$self, $$props, $$invalidate) {
     var displayProfile = $$props.displayProfile;
+    var emailValue = $$props.emailValue;
+    var profileLoader = $$props.profileLoader;
+    var emailInputValid = false;
+    function submitEmailChange(e) {
+        return __awaiter(this, void 0, void 0, function () {
+            var err_6;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!emailInputValid || !emailValue)
+                            return [2 /*return*/];
+                        $$invalidate(4, profileLoader = true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, window.$memberstackDom.updateMemberAuth({ email: emailValue })];
+                    case 2:
+                        _a.sent();
+                        window.$memberstackDom._showMessage("Email successfully changed", false);
+                        $$invalidate(4, profileLoader = false);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        err_6 = _a.sent();
+                        window.$memberstackDom._showMessage(err_6.message, true);
+                        $$invalidate(4, profileLoader = false);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function emailinput_emailInputValid_binding(value) {
+        emailInputValid = value;
+        $$invalidate(2, emailInputValid);
+    }
+    function emailinput_emailValue_binding(value) {
+        emailValue = value;
+        $$invalidate(1, emailValue);
+    }
     var click_handler = function () { return $$invalidate(0, displayProfile = "changePassword"); };
     $$self.$$set = function ($$props) {
         if ('displayProfile' in $$props)
             $$invalidate(0, displayProfile = $$props.displayProfile);
+        if ('emailValue' in $$props)
+            $$invalidate(1, emailValue = $$props.emailValue);
+        if ('profileLoader' in $$props)
+            $$invalidate(4, profileLoader = $$props.profileLoader);
     };
-    return [displayProfile, click_handler];
+    return [
+        displayProfile,
+        emailValue,
+        emailInputValid,
+        submitEmailChange,
+        profileLoader,
+        emailinput_emailInputValid_binding,
+        emailinput_emailValue_binding,
+        click_handler
+    ];
 }
 var SecurityInfoContent = /** @class */ (function (_super) {
     __extends(SecurityInfoContent, _super);
     function SecurityInfoContent(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$3, create_fragment$3, safe_not_equal, { displayProfile: 0 });
+        init(_this, options, instance$3, create_fragment$4, safe_not_equal, {
+            displayProfile: 0,
+            emailValue: 1,
+            profileLoader: 4
+        });
         return _this;
     }
     return SecurityInfoContent;
 }(SvelteComponent));
 /* src/components/PasswordInfoContent.svelte generated by Svelte v3.48.0 */
-function create_fragment$2(ctx) {
+function create_fragment$3(ctx) {
     var div3;
     var div1;
     var div0;
@@ -3535,35 +4649,83 @@ function create_fragment$2(ctx) {
     var h2;
     var t2;
     var div2;
-    var t6;
+    var button1;
+    var t3;
+    var button1_disabled_value;
+    var t4;
     var form;
     var passwordinput0;
-    var t7;
+    var updating_passwordValue;
+    var updating_passwordInputValid;
+    var t5;
     var passwordinput1;
-    var t8;
+    var updating_passwordValue_1;
+    var updating_passwordInputValid_1;
+    var t6;
     var passwordinput2;
+    var updating_passwordValue_2;
+    var updating_passwordInputValid_2;
     var current;
     var mounted;
     var dispose;
     backicon = new BackIcon({});
-    passwordinput0 = new PasswordInput({
-        props: {
-            passwordLabel: "Current Password",
-            passwordPlaceholder: "Enter a strong password"
-        }
-    });
-    passwordinput1 = new PasswordInput({
-        props: {
-            passwordLabel: "New Password",
-            passwordPlaceholder: "Enter a strong password"
-        }
-    });
-    passwordinput2 = new PasswordInput({
-        props: {
-            passwordLabel: "Confirm New Password",
-            passwordPlaceholder: "Enter a strong password"
-        }
-    });
+    function passwordinput0_passwordValue_binding(value) {
+        /*passwordinput0_passwordValue_binding*/ ctx[10](value);
+    }
+    function passwordinput0_passwordInputValid_binding(value) {
+        /*passwordinput0_passwordInputValid_binding*/ ctx[11](value);
+    }
+    var passwordinput0_props = {
+        passwordLabel: "Current Password",
+        passwordPlaceholder: "Enter a strong password"
+    };
+    if ( /*currentPasswordValue*/ctx[1] !== void 0) {
+        passwordinput0_props.passwordValue = /*currentPasswordValue*/ ctx[1];
+    }
+    if ( /*currentPasswordValid*/ctx[4] !== void 0) {
+        passwordinput0_props.passwordInputValid = /*currentPasswordValid*/ ctx[4];
+    }
+    passwordinput0 = new PasswordInput({ props: passwordinput0_props });
+    binding_callbacks.push(function () { return bind(passwordinput0, 'passwordValue', passwordinput0_passwordValue_binding); });
+    binding_callbacks.push(function () { return bind(passwordinput0, 'passwordInputValid', passwordinput0_passwordInputValid_binding); });
+    function passwordinput1_passwordValue_binding(value) {
+        /*passwordinput1_passwordValue_binding*/ ctx[12](value);
+    }
+    function passwordinput1_passwordInputValid_binding(value) {
+        /*passwordinput1_passwordInputValid_binding*/ ctx[13](value);
+    }
+    var passwordinput1_props = {
+        passwordLabel: "New Password",
+        passwordPlaceholder: "Enter a strong password"
+    };
+    if ( /*newPasswordValue*/ctx[2] !== void 0) {
+        passwordinput1_props.passwordValue = /*newPasswordValue*/ ctx[2];
+    }
+    if ( /*newPasswordValid*/ctx[5] !== void 0) {
+        passwordinput1_props.passwordInputValid = /*newPasswordValid*/ ctx[5];
+    }
+    passwordinput1 = new PasswordInput({ props: passwordinput1_props });
+    binding_callbacks.push(function () { return bind(passwordinput1, 'passwordValue', passwordinput1_passwordValue_binding); });
+    binding_callbacks.push(function () { return bind(passwordinput1, 'passwordInputValid', passwordinput1_passwordInputValid_binding); });
+    function passwordinput2_passwordValue_binding(value) {
+        /*passwordinput2_passwordValue_binding*/ ctx[14](value);
+    }
+    function passwordinput2_passwordInputValid_binding(value) {
+        /*passwordinput2_passwordInputValid_binding*/ ctx[15](value);
+    }
+    var passwordinput2_props = {
+        passwordLabel: "Confirm New Password",
+        passwordPlaceholder: "Enter a strong password"
+    };
+    if ( /*confirmPasswordValue*/ctx[3] !== void 0) {
+        passwordinput2_props.passwordValue = /*confirmPasswordValue*/ ctx[3];
+    }
+    if ( /*confirmPasswordValid*/ctx[6] !== void 0) {
+        passwordinput2_props.passwordInputValid = /*confirmPasswordValid*/ ctx[6];
+    }
+    passwordinput2 = new PasswordInput({ props: passwordinput2_props });
+    binding_callbacks.push(function () { return bind(passwordinput2, 'passwordValue', passwordinput2_passwordValue_binding); });
+    binding_callbacks.push(function () { return bind(passwordinput2, 'passwordInputValid', passwordinput2_passwordInputValid_binding); });
     return {
         c: function () {
             div3 = element("div");
@@ -3576,17 +4738,20 @@ function create_fragment$2(ctx) {
             h2.textContent = "Change Password";
             t2 = space();
             div2 = element("div");
-            div2.innerHTML = "<button class=\"ms-modal__cancel-button\">Cancel</button> \n    <button class=\"ms-modal__save-button\">Save</button>";
-            t6 = space();
+            button1 = element("button");
+            t3 = text("Save");
+            t4 = space();
             form = element("form");
             create_component(passwordinput0.$$.fragment);
-            t7 = space();
+            t5 = space();
             create_component(passwordinput1.$$.fragment);
-            t8 = space();
+            t6 = space();
             create_component(passwordinput2.$$.fragment);
             attr(div0, "class", "ms-modal__profile-back");
             attr(h2, "class", "ms-modal__title ms-modal__title--profile");
             attr(div1, "class", "ms-modal__title-group");
+            attr(button1, "class", "ms-modal__save-button");
+            button1.disabled = button1_disabled_value = !ctx[4] || !ctx[5] || !ctx[6];
             attr(div2, "class", "ms-modal__action-container");
             attr(div3, "class", "ms-modal__title-container");
             attr(form, "class", "ms-form");
@@ -3604,23 +4769,67 @@ function create_fragment$2(ctx) {
             append(div1, h2);
             append(div3, t2);
             append(div3, div2);
-            insert(target, t6, anchor);
+            append(div2, button1);
+            append(button1, t3);
+            insert(target, t4, anchor);
             insert(target, form, anchor);
             mount_component(passwordinput0, form, null);
-            append(form, t7);
+            append(form, t5);
             mount_component(passwordinput1, form, null);
-            append(form, t8);
+            append(form, t6);
             mount_component(passwordinput2, form, null);
             current = true;
             if (!mounted) {
                 dispose = [
-                    listen(button0, "click", /*click_handler*/ ctx[1]),
-                    listen(form, "submit", stop_propagation(prevent_default(submitPasswordChange)))
+                    listen(button0, "click", /*click_handler*/ ctx[9]),
+                    listen(button1, "click", /*submitPasswordChange*/ ctx[7]),
+                    listen(form, "submit", stop_propagation(prevent_default(/*submitPasswordChange*/ ctx[7])))
                 ];
                 mounted = true;
             }
         },
-        p: noop,
+        p: function (ctx, _a) {
+            var _b = __read(_a, 1), dirty = _b[0];
+            if (!current || dirty & /*currentPasswordValid, newPasswordValid, confirmPasswordValid*/ 112 && button1_disabled_value !== (button1_disabled_value = !ctx[4] || !ctx[5] || !ctx[6])) {
+                button1.disabled = button1_disabled_value;
+            }
+            var passwordinput0_changes = {};
+            if (!updating_passwordValue && dirty & /*currentPasswordValue*/ 2) {
+                updating_passwordValue = true;
+                passwordinput0_changes.passwordValue = /*currentPasswordValue*/ ctx[1];
+                add_flush_callback(function () { return updating_passwordValue = false; });
+            }
+            if (!updating_passwordInputValid && dirty & /*currentPasswordValid*/ 16) {
+                updating_passwordInputValid = true;
+                passwordinput0_changes.passwordInputValid = /*currentPasswordValid*/ ctx[4];
+                add_flush_callback(function () { return updating_passwordInputValid = false; });
+            }
+            passwordinput0.$set(passwordinput0_changes);
+            var passwordinput1_changes = {};
+            if (!updating_passwordValue_1 && dirty & /*newPasswordValue*/ 4) {
+                updating_passwordValue_1 = true;
+                passwordinput1_changes.passwordValue = /*newPasswordValue*/ ctx[2];
+                add_flush_callback(function () { return updating_passwordValue_1 = false; });
+            }
+            if (!updating_passwordInputValid_1 && dirty & /*newPasswordValid*/ 32) {
+                updating_passwordInputValid_1 = true;
+                passwordinput1_changes.passwordInputValid = /*newPasswordValid*/ ctx[5];
+                add_flush_callback(function () { return updating_passwordInputValid_1 = false; });
+            }
+            passwordinput1.$set(passwordinput1_changes);
+            var passwordinput2_changes = {};
+            if (!updating_passwordValue_2 && dirty & /*confirmPasswordValue*/ 8) {
+                updating_passwordValue_2 = true;
+                passwordinput2_changes.passwordValue = /*confirmPasswordValue*/ ctx[3];
+                add_flush_callback(function () { return updating_passwordValue_2 = false; });
+            }
+            if (!updating_passwordInputValid_2 && dirty & /*confirmPasswordValid*/ 64) {
+                updating_passwordInputValid_2 = true;
+                passwordinput2_changes.passwordInputValid = /*confirmPasswordValid*/ ctx[6];
+                add_flush_callback(function () { return updating_passwordInputValid_2 = false; });
+            }
+            passwordinput2.$set(passwordinput2_changes);
+        },
         i: function (local) {
             if (current)
                 return;
@@ -3642,7 +4851,7 @@ function create_fragment$2(ctx) {
                 detach(div3);
             destroy_component(backicon);
             if (detaching)
-                detach(t6);
+                detach(t4);
             if (detaching)
                 detach(form);
             destroy_component(passwordinput0);
@@ -3653,46 +4862,287 @@ function create_fragment$2(ctx) {
         }
     };
 }
-function submitPasswordChange(e) {
-    return __awaiter(this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            console.log(e);
-            return [2 /*return*/];
-        });
-    });
-}
 function instance$2($$self, $$props, $$invalidate) {
     var displayProfile = $$props.displayProfile;
+    var profileLoader = $$props.profileLoader;
+    var currentPasswordValue = "";
+    var newPasswordValue = "";
+    var confirmPasswordValue = "";
+    var currentPasswordValid = false;
+    var newPasswordValid = false;
+    var confirmPasswordValid = false;
+    function submitPasswordChange(e) {
+        return __awaiter(this, void 0, void 0, function () {
+            var data, err_7;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!currentPasswordValid && !newPasswordValid && !confirmPasswordValid)
+                            return [2 /*return*/];
+                        if (newPasswordValue !== confirmPasswordValue) {
+                            window.$memberstackDom._showMessage("New password and confirm password do not match", true);
+                            return [2 /*return*/];
+                        }
+                        $$invalidate(8, profileLoader = true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, window.$memberstackDom.updateMemberAuth({
+                                oldPassword: currentPasswordValue,
+                                newPassword: newPasswordValue
+                            })];
+                    case 2:
+                        data = _a.sent();
+                        window.$memberstackDom._showMessage("Password successfully changed", false);
+                        $$invalidate(1, currentPasswordValue = "");
+                        $$invalidate(2, newPasswordValue = "");
+                        $$invalidate(3, confirmPasswordValue = "");
+                        $$invalidate(8, profileLoader = false);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        err_7 = _a.sent();
+                        window.$memberstackDom._showMessage(err_7.message, true);
+                        $$invalidate(8, profileLoader = false);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    }
     var click_handler = function () { return $$invalidate(0, displayProfile = "security"); };
+    function passwordinput0_passwordValue_binding(value) {
+        currentPasswordValue = value;
+        $$invalidate(1, currentPasswordValue);
+    }
+    function passwordinput0_passwordInputValid_binding(value) {
+        currentPasswordValid = value;
+        $$invalidate(4, currentPasswordValid);
+    }
+    function passwordinput1_passwordValue_binding(value) {
+        newPasswordValue = value;
+        $$invalidate(2, newPasswordValue);
+    }
+    function passwordinput1_passwordInputValid_binding(value) {
+        newPasswordValid = value;
+        $$invalidate(5, newPasswordValid);
+    }
+    function passwordinput2_passwordValue_binding(value) {
+        confirmPasswordValue = value;
+        $$invalidate(3, confirmPasswordValue);
+    }
+    function passwordinput2_passwordInputValid_binding(value) {
+        confirmPasswordValid = value;
+        $$invalidate(6, confirmPasswordValid);
+    }
     $$self.$$set = function ($$props) {
         if ('displayProfile' in $$props)
             $$invalidate(0, displayProfile = $$props.displayProfile);
+        if ('profileLoader' in $$props)
+            $$invalidate(8, profileLoader = $$props.profileLoader);
     };
-    return [displayProfile, click_handler];
+    return [
+        displayProfile,
+        currentPasswordValue,
+        newPasswordValue,
+        confirmPasswordValue,
+        currentPasswordValid,
+        newPasswordValid,
+        confirmPasswordValid,
+        submitPasswordChange,
+        profileLoader,
+        click_handler,
+        passwordinput0_passwordValue_binding,
+        passwordinput0_passwordInputValid_binding,
+        passwordinput1_passwordValue_binding,
+        passwordinput1_passwordInputValid_binding,
+        passwordinput2_passwordValue_binding,
+        passwordinput2_passwordInputValid_binding
+    ];
 }
 var PasswordInfoContent = /** @class */ (function (_super) {
     __extends(PasswordInfoContent, _super);
     function PasswordInfoContent(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$2, create_fragment$2, safe_not_equal, { displayProfile: 0 });
+        init(_this, options, instance$2, create_fragment$3, safe_not_equal, { displayProfile: 0, profileLoader: 8 });
         return _this;
     }
     return PasswordInfoContent;
 }(SvelteComponent));
+function fade(node, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.delay, delay = _c === void 0 ? 0 : _c, _d = _b.duration, duration = _d === void 0 ? 400 : _d, _e = _b.easing, easing = _e === void 0 ? identity : _e;
+    var o = +getComputedStyle(node).opacity;
+    return {
+        delay: delay,
+        duration: duration,
+        easing: easing,
+        css: function (t) { return "opacity: " + t * o; }
+    };
+}
+/* src/components/ProfileLoader.svelte generated by Svelte v3.48.0 */
+function create_fragment$2(ctx) {
+    var div;
+    var loadingicon;
+    var div_transition;
+    var current;
+    loadingicon = new LoadingIcon({});
+    return {
+        c: function () {
+            div = element("div");
+            create_component(loadingicon.$$.fragment);
+            attr(div, "class", "ms__profile__loader");
+        },
+        m: function (target, anchor) {
+            insert(target, div, anchor);
+            mount_component(loadingicon, div, null);
+            current = true;
+        },
+        p: noop,
+        i: function (local) {
+            if (current)
+                return;
+            transition_in(loadingicon.$$.fragment, local);
+            add_render_callback(function () {
+                if (!div_transition)
+                    div_transition = create_bidirectional_transition(div, fade, {}, true);
+                div_transition.run(1);
+            });
+            current = true;
+        },
+        o: function (local) {
+            transition_out(loadingicon.$$.fragment, local);
+            if (!div_transition)
+                div_transition = create_bidirectional_transition(div, fade, {}, false);
+            div_transition.run(0);
+            current = false;
+        },
+        d: function (detaching) {
+            if (detaching)
+                detach(div);
+            destroy_component(loadingicon);
+            if (detaching && div_transition)
+                div_transition.end();
+        }
+    };
+}
+var ProfileLoader = /** @class */ (function (_super) {
+    __extends(ProfileLoader, _super);
+    function ProfileLoader(options) {
+        var _this = _super.call(this) || this;
+        init(_this, options, null, create_fragment$2, safe_not_equal, {});
+        return _this;
+    }
+    return ProfileLoader;
+}(SvelteComponent));
 /* src/modals/ProfileModal.svelte generated by Svelte v3.48.0 */
+function create_else_block(ctx) {
+    var memberstackicon;
+    var current;
+    memberstackicon = new MemberstackIcon({});
+    return {
+        c: function () {
+            create_component(memberstackicon.$$.fragment);
+        },
+        m: function (target, anchor) {
+            mount_component(memberstackicon, target, anchor);
+            current = true;
+        },
+        p: noop,
+        i: function (local) {
+            if (current)
+                return;
+            transition_in(memberstackicon.$$.fragment, local);
+            current = true;
+        },
+        o: function (local) {
+            transition_out(memberstackicon.$$.fragment, local);
+            current = false;
+        },
+        d: function (detaching) {
+            destroy_component(memberstackicon, detaching);
+        }
+    };
+}
+// (32:6) {#if $app.branding.logo}
+function create_if_block_4$1(ctx) {
+    var img;
+    var img_src_value;
+    var img_alt_value;
+    return {
+        c: function () {
+            img = element("img");
+            if (!src_url_equal(img.src, img_src_value = /*$app*/ ctx[7].branding.logo))
+                attr(img, "src", img_src_value);
+            attr(img, "alt", img_alt_value = /*$app*/ ctx[7].name);
+        },
+        m: function (target, anchor) {
+            insert(target, img, anchor);
+        },
+        p: function (ctx, dirty) {
+            if (dirty & /*$app*/ 128 && !src_url_equal(img.src, img_src_value = /*$app*/ ctx[7].branding.logo)) {
+                attr(img, "src", img_src_value);
+            }
+            if (dirty & /*$app*/ 128 && img_alt_value !== (img_alt_value = /*$app*/ ctx[7].name)) {
+                attr(img, "alt", img_alt_value);
+            }
+        },
+        i: noop,
+        o: noop,
+        d: function (detaching) {
+            if (detaching)
+                detach(img);
+        }
+    };
+}
+// (54:6) {#if profileLoader}
+function create_if_block_3$1(ctx) {
+    var profileloader;
+    var current;
+    profileloader = new ProfileLoader({});
+    return {
+        c: function () {
+            create_component(profileloader.$$.fragment);
+        },
+        m: function (target, anchor) {
+            mount_component(profileloader, target, anchor);
+            current = true;
+        },
+        i: function (local) {
+            if (current)
+                return;
+            transition_in(profileloader.$$.fragment, local);
+            current = true;
+        },
+        o: function (local) {
+            transition_out(profileloader.$$.fragment, local);
+            current = false;
+        },
+        d: function (detaching) {
+            destroy_component(profileloader, detaching);
+        }
+    };
+}
+// (65:52) 
 function create_if_block_2$1(ctx) {
     var passwordinfocontent;
     var updating_displayProfile;
+    var updating_profileLoader;
     var current;
     function passwordinfocontent_displayProfile_binding(value) {
-        /*passwordinfocontent_displayProfile_binding*/ ctx[4](value);
+        /*passwordinfocontent_displayProfile_binding*/ ctx[15](value);
+    }
+    function passwordinfocontent_profileLoader_binding(value) {
+        /*passwordinfocontent_profileLoader_binding*/ ctx[16](value);
     }
     var passwordinfocontent_props = {};
     if ( /*displayProfile*/ctx[0] !== void 0) {
         passwordinfocontent_props.displayProfile = /*displayProfile*/ ctx[0];
     }
+    if ( /*profileLoader*/ctx[5] !== void 0) {
+        passwordinfocontent_props.profileLoader = /*profileLoader*/ ctx[5];
+    }
     passwordinfocontent = new PasswordInfoContent({ props: passwordinfocontent_props });
     binding_callbacks.push(function () { return bind(passwordinfocontent, 'displayProfile', passwordinfocontent_displayProfile_binding); });
+    binding_callbacks.push(function () { return bind(passwordinfocontent, 'profileLoader', passwordinfocontent_profileLoader_binding); });
     return {
         c: function () {
             create_component(passwordinfocontent.$$.fragment);
@@ -3708,6 +5158,11 @@ function create_if_block_2$1(ctx) {
                 passwordinfocontent_changes.displayProfile = /*displayProfile*/ ctx[0];
                 add_flush_callback(function () { return updating_displayProfile = false; });
             }
+            if (!updating_profileLoader && dirty & /*profileLoader*/ 32) {
+                updating_profileLoader = true;
+                passwordinfocontent_changes.profileLoader = /*profileLoader*/ ctx[5];
+                add_flush_callback(function () { return updating_profileLoader = false; });
+            }
             passwordinfocontent.$set(passwordinfocontent_changes);
         },
         i: function (local) {
@@ -3725,20 +5180,28 @@ function create_if_block_2$1(ctx) {
         }
     };
 }
-// (34:46) 
+// (63:46) 
 function create_if_block_1$1(ctx) {
     var securityinfocontent;
     var updating_displayProfile;
+    var updating_profileLoader;
     var current;
     function securityinfocontent_displayProfile_binding(value) {
-        /*securityinfocontent_displayProfile_binding*/ ctx[3](value);
+        /*securityinfocontent_displayProfile_binding*/ ctx[13](value);
+    }
+    function securityinfocontent_profileLoader_binding(value) {
+        /*securityinfocontent_profileLoader_binding*/ ctx[14](value);
     }
     var securityinfocontent_props = {};
     if ( /*displayProfile*/ctx[0] !== void 0) {
         securityinfocontent_props.displayProfile = /*displayProfile*/ ctx[0];
     }
+    if ( /*profileLoader*/ctx[5] !== void 0) {
+        securityinfocontent_props.profileLoader = /*profileLoader*/ ctx[5];
+    }
     securityinfocontent = new SecurityInfoContent({ props: securityinfocontent_props });
     binding_callbacks.push(function () { return bind(securityinfocontent, 'displayProfile', securityinfocontent_displayProfile_binding); });
+    binding_callbacks.push(function () { return bind(securityinfocontent, 'profileLoader', securityinfocontent_profileLoader_binding); });
     return {
         c: function () {
             create_component(securityinfocontent.$$.fragment);
@@ -3754,6 +5217,11 @@ function create_if_block_1$1(ctx) {
                 securityinfocontent_changes.displayProfile = /*displayProfile*/ ctx[0];
                 add_flush_callback(function () { return updating_displayProfile = false; });
             }
+            if (!updating_profileLoader && dirty & /*profileLoader*/ 32) {
+                updating_profileLoader = true;
+                securityinfocontent_changes.profileLoader = /*profileLoader*/ ctx[5];
+                add_flush_callback(function () { return updating_profileLoader = false; });
+            }
             securityinfocontent.$set(securityinfocontent_changes);
         },
         i: function (local) {
@@ -3771,11 +5239,30 @@ function create_if_block_1$1(ctx) {
         }
     };
 }
-// (32:6) {#if displayProfile === "profile"}
+// (57:6) {#if displayProfile === "profile"}
 function create_if_block$1(ctx) {
     var profileinfocontent;
+    var updating_member;
+    var updating_profileLoader;
     var current;
-    profileinfocontent = new ProfieInfoContent({});
+    function profileinfocontent_member_binding(value) {
+        /*profileinfocontent_member_binding*/ ctx[11](value);
+    }
+    function profileinfocontent_profileLoader_binding(value) {
+        /*profileinfocontent_profileLoader_binding*/ ctx[12](value);
+    }
+    var profileinfocontent_props = {
+        customFields: /*$app*/ ctx[7].customFields
+    };
+    if ( /*member*/ctx[1] !== void 0) {
+        profileinfocontent_props.member = /*member*/ ctx[1];
+    }
+    if ( /*profileLoader*/ctx[5] !== void 0) {
+        profileinfocontent_props.profileLoader = /*profileLoader*/ ctx[5];
+    }
+    profileinfocontent = new ProfileInfoContent({ props: profileinfocontent_props });
+    binding_callbacks.push(function () { return bind(profileinfocontent, 'member', profileinfocontent_member_binding); });
+    binding_callbacks.push(function () { return bind(profileinfocontent, 'profileLoader', profileinfocontent_profileLoader_binding); });
     return {
         c: function () {
             create_component(profileinfocontent.$$.fragment);
@@ -3784,7 +5271,22 @@ function create_if_block$1(ctx) {
             mount_component(profileinfocontent, target, anchor);
             current = true;
         },
-        p: noop,
+        p: function (ctx, dirty) {
+            var profileinfocontent_changes = {};
+            if (dirty & /*$app*/ 128)
+                profileinfocontent_changes.customFields = /*$app*/ ctx[7].customFields;
+            if (!updating_member && dirty & /*member*/ 2) {
+                updating_member = true;
+                profileinfocontent_changes.member = /*member*/ ctx[1];
+                add_flush_callback(function () { return updating_member = false; });
+            }
+            if (!updating_profileLoader && dirty & /*profileLoader*/ 32) {
+                updating_profileLoader = true;
+                profileinfocontent_changes.profileLoader = /*profileLoader*/ ctx[5];
+                add_flush_callback(function () { return updating_profileLoader = false; });
+            }
+            profileinfocontent.$set(profileinfocontent_changes);
+        },
         i: function (local) {
             if (current)
                 return;
@@ -3804,39 +5306,71 @@ function create_fragment$1(ctx) {
     var div5;
     var div1;
     var figure;
-    var memberstackicon;
+    var current_block_type_index;
+    var if_block0;
     var t0;
     var div0;
+    var t1_value = /*member*/ ctx[1].auth.email + "";
+    var t1;
     var t2;
     var closebutton;
     var t3;
     var div4;
     var div2;
     var profilemodalnav;
+    var updating_member;
     var updating_displayProfile;
+    var updating_profileLoader;
     var t4;
     var div3;
-    var current_block_type_index;
-    var if_block;
     var t5;
+    var current_block_type_index_1;
+    var if_block2;
+    var t6;
     var modalfooter;
     var current;
-    memberstackicon = new MemberstackIcon({});
+    var if_block_creators = [create_if_block_4$1, create_else_block];
+    var if_blocks = [];
+    function select_block_type(ctx, dirty) {
+        if ( /*$app*/ctx[7].branding.logo)
+            return 0;
+        return 1;
+    }
+    current_block_type_index = select_block_type(ctx);
+    if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
     closebutton = new CloseButton({
-        props: { closeModal: /*closeModal*/ ctx[1] }
+        props: { closeModal: /*closeModal*/ ctx[3] }
     });
+    function profilemodalnav_member_binding(value) {
+        /*profilemodalnav_member_binding*/ ctx[8](value);
+    }
     function profilemodalnav_displayProfile_binding(value) {
-        /*profilemodalnav_displayProfile_binding*/ ctx[2](value);
+        /*profilemodalnav_displayProfile_binding*/ ctx[9](value);
+    }
+    function profilemodalnav_profileLoader_binding(value) {
+        /*profilemodalnav_profileLoader_binding*/ ctx[10](value);
+    }
+    var profilemodalnav_props = {
+        onSuccessLogout: /*onSuccessLogout*/ ctx[2],
+        hideProfileSection: /*hideProfileSection*/ ctx[4]
+    };
+    if ( /*member*/ctx[1] !== void 0) {
+        profilemodalnav_props.member = /*member*/ ctx[1];
     }
-    var profilemodalnav_props = {};
     if ( /*displayProfile*/ctx[0] !== void 0) {
         profilemodalnav_props.displayProfile = /*displayProfile*/ ctx[0];
     }
+    if ( /*profileLoader*/ctx[5] !== void 0) {
+        profilemodalnav_props.profileLoader = /*profileLoader*/ ctx[5];
+    }
     profilemodalnav = new ProfileModalNav({ props: profilemodalnav_props });
+    binding_callbacks.push(function () { return bind(profilemodalnav, 'member', profilemodalnav_member_binding); });
     binding_callbacks.push(function () { return bind(profilemodalnav, 'displayProfile', profilemodalnav_displayProfile_binding); });
-    var if_block_creators = [create_if_block$1, create_if_block_1$1, create_if_block_2$1];
-    var if_blocks = [];
-    function select_block_type(ctx, dirty) {
+    binding_callbacks.push(function () { return bind(profilemodalnav, 'profileLoader', profilemodalnav_profileLoader_binding); });
+    var if_block1 = /*profileLoader*/ ctx[5] && create_if_block_3$1();
+    var if_block_creators_1 = [create_if_block$1, create_if_block_1$1, create_if_block_2$1];
+    var if_blocks_1 = [];
+    function select_block_type_1(ctx, dirty) {
         if ( /*displayProfile*/ctx[0] === "profile")
             return 0;
         if ( /*displayProfile*/ctx[0] === "security")
@@ -3845,8 +5379,8 @@ function create_fragment$1(ctx) {
             return 2;
         return -1;
     }
-    if (~(current_block_type_index = select_block_type(ctx))) {
-        if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    if (~(current_block_type_index_1 = select_block_type_1(ctx))) {
+        if_block2 = if_blocks_1[current_block_type_index_1] = if_block_creators_1[current_block_type_index_1](ctx);
     }
     modalfooter = new ModalFooter({});
     return {
@@ -3854,10 +5388,10 @@ function create_fragment$1(ctx) {
             div5 = element("div");
             div1 = element("div");
             figure = element("figure");
-            create_component(memberstackicon.$$.fragment);
+            if_block0.c();
             t0 = space();
             div0 = element("div");
-            div0.textContent = "bob@barker.com";
+            t1 = text(t1_value);
             t2 = space();
             create_component(closebutton.$$.fragment);
             t3 = space();
@@ -3866,14 +5400,18 @@ function create_fragment$1(ctx) {
             create_component(profilemodalnav.$$.fragment);
             t4 = space();
             div3 = element("div");
-            if (if_block)
-                if_block.c();
+            if (if_block1)
+                if_block1.c();
             t5 = space();
+            if (if_block2)
+                if_block2.c();
+            t6 = space();
             create_component(modalfooter.$$.fragment);
             attr(figure, "class", "ms-modal__figure ms-modal__figure--profile");
             attr(div1, "class", "ms-modal__header");
             attr(div2, "class", "ms-modal__content-left");
             attr(div3, "class", "ms-modal__content-right");
+            set_style(div3, "height", /*profileSectionHeight*/ ctx[6]);
             attr(div4, "class", "ms-modal__content ms-modal__content--profile");
             attr(div5, "class", "ms-modal ms-modal--profile");
             attr(div5, "id", "ProfileModal");
@@ -3882,9 +5420,10 @@ function create_fragment$1(ctx) {
             insert(target, div5, anchor);
             append(div5, div1);
             append(div1, figure);
-            mount_component(memberstackicon, figure, null);
+            if_blocks[current_block_type_index].m(figure, null);
             append(div1, t0);
             append(div1, div0);
+            append(div0, t1);
             append(div1, t2);
             mount_component(closebutton, div1, null);
             append(div5, t3);
@@ -3893,216 +5432,371 @@ function create_fragment$1(ctx) {
             mount_component(profilemodalnav, div2, null);
             append(div4, t4);
             append(div4, div3);
-            if (~current_block_type_index) {
-                if_blocks[current_block_type_index].m(div3, null);
+            if (if_block1)
+                if_block1.m(div3, null);
+            append(div3, t5);
+            if (~current_block_type_index_1) {
+                if_blocks_1[current_block_type_index_1].m(div3, null);
+            }
+            append(div5, t6);
+            mount_component(modalfooter, div5, null);
+            current = true;
+        },
+        p: function (ctx, _a) {
+            var _b = __read(_a, 1), dirty = _b[0];
+            var previous_block_index = current_block_type_index;
+            current_block_type_index = select_block_type(ctx);
+            if (current_block_type_index === previous_block_index) {
+                if_blocks[current_block_type_index].p(ctx, dirty);
+            }
+            else {
+                group_outros();
+                transition_out(if_blocks[previous_block_index], 1, 1, function () {
+                    if_blocks[previous_block_index] = null;
+                });
+                check_outros();
+                if_block0 = if_blocks[current_block_type_index];
+                if (!if_block0) {
+                    if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+                    if_block0.c();
+                }
+                else {
+                    if_block0.p(ctx, dirty);
+                }
+                transition_in(if_block0, 1);
+                if_block0.m(figure, null);
             }
-            append(div5, t5);
-            mount_component(modalfooter, div5, null);
-            current = true;
-        },
-        p: function (ctx, _a) {
-            var _b = __read(_a, 1), dirty = _b[0];
+            if ((!current || dirty & /*member*/ 2) && t1_value !== (t1_value = /*member*/ ctx[1].auth.email + ""))
+                set_data(t1, t1_value);
             var closebutton_changes = {};
-            if (dirty & /*closeModal*/ 2)
-                closebutton_changes.closeModal = /*closeModal*/ ctx[1];
+            if (dirty & /*closeModal*/ 8)
+                closebutton_changes.closeModal = /*closeModal*/ ctx[3];
             closebutton.$set(closebutton_changes);
             var profilemodalnav_changes = {};
+            if (dirty & /*onSuccessLogout*/ 4)
+                profilemodalnav_changes.onSuccessLogout = /*onSuccessLogout*/ ctx[2];
+            if (dirty & /*hideProfileSection*/ 16)
+                profilemodalnav_changes.hideProfileSection = /*hideProfileSection*/ ctx[4];
+            if (!updating_member && dirty & /*member*/ 2) {
+                updating_member = true;
+                profilemodalnav_changes.member = /*member*/ ctx[1];
+                add_flush_callback(function () { return updating_member = false; });
+            }
             if (!updating_displayProfile && dirty & /*displayProfile*/ 1) {
                 updating_displayProfile = true;
                 profilemodalnav_changes.displayProfile = /*displayProfile*/ ctx[0];
                 add_flush_callback(function () { return updating_displayProfile = false; });
             }
+            if (!updating_profileLoader && dirty & /*profileLoader*/ 32) {
+                updating_profileLoader = true;
+                profilemodalnav_changes.profileLoader = /*profileLoader*/ ctx[5];
+                add_flush_callback(function () { return updating_profileLoader = false; });
+            }
             profilemodalnav.$set(profilemodalnav_changes);
-            var previous_block_index = current_block_type_index;
-            current_block_type_index = select_block_type(ctx);
-            if (current_block_type_index === previous_block_index) {
-                if (~current_block_type_index) {
-                    if_blocks[current_block_type_index].p(ctx, dirty);
+            if ( /*profileLoader*/ctx[5]) {
+                if (if_block1) {
+                    if (dirty & /*profileLoader*/ 32) {
+                        transition_in(if_block1, 1);
+                    }
+                }
+                else {
+                    if_block1 = create_if_block_3$1();
+                    if_block1.c();
+                    transition_in(if_block1, 1);
+                    if_block1.m(div3, t5);
+                }
+            }
+            else if (if_block1) {
+                group_outros();
+                transition_out(if_block1, 1, 1, function () {
+                    if_block1 = null;
+                });
+                check_outros();
+            }
+            var previous_block_index_1 = current_block_type_index_1;
+            current_block_type_index_1 = select_block_type_1(ctx);
+            if (current_block_type_index_1 === previous_block_index_1) {
+                if (~current_block_type_index_1) {
+                    if_blocks_1[current_block_type_index_1].p(ctx, dirty);
                 }
             }
             else {
-                if (if_block) {
+                if (if_block2) {
                     group_outros();
-                    transition_out(if_blocks[previous_block_index], 1, 1, function () {
-                        if_blocks[previous_block_index] = null;
+                    transition_out(if_blocks_1[previous_block_index_1], 1, 1, function () {
+                        if_blocks_1[previous_block_index_1] = null;
                     });
                     check_outros();
                 }
-                if (~current_block_type_index) {
-                    if_block = if_blocks[current_block_type_index];
-                    if (!if_block) {
-                        if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-                        if_block.c();
+                if (~current_block_type_index_1) {
+                    if_block2 = if_blocks_1[current_block_type_index_1];
+                    if (!if_block2) {
+                        if_block2 = if_blocks_1[current_block_type_index_1] = if_block_creators_1[current_block_type_index_1](ctx);
+                        if_block2.c();
                     }
                     else {
-                        if_block.p(ctx, dirty);
+                        if_block2.p(ctx, dirty);
                     }
-                    transition_in(if_block, 1);
-                    if_block.m(div3, null);
+                    transition_in(if_block2, 1);
+                    if_block2.m(div3, null);
                 }
                 else {
-                    if_block = null;
+                    if_block2 = null;
                 }
             }
+            if (!current || dirty & /*profileSectionHeight*/ 64) {
+                set_style(div3, "height", /*profileSectionHeight*/ ctx[6]);
+            }
         },
         i: function (local) {
             if (current)
                 return;
-            transition_in(memberstackicon.$$.fragment, local);
+            transition_in(if_block0);
             transition_in(closebutton.$$.fragment, local);
             transition_in(profilemodalnav.$$.fragment, local);
-            transition_in(if_block);
+            transition_in(if_block1);
+            transition_in(if_block2);
             transition_in(modalfooter.$$.fragment, local);
             current = true;
         },
         o: function (local) {
-            transition_out(memberstackicon.$$.fragment, local);
+            transition_out(if_block0);
             transition_out(closebutton.$$.fragment, local);
             transition_out(profilemodalnav.$$.fragment, local);
-            transition_out(if_block);
+            transition_out(if_block1);
+            transition_out(if_block2);
             transition_out(modalfooter.$$.fragment, local);
             current = false;
         },
         d: function (detaching) {
             if (detaching)
                 detach(div5);
-            destroy_component(memberstackicon);
+            if_blocks[current_block_type_index].d();
             destroy_component(closebutton);
             destroy_component(profilemodalnav);
-            if (~current_block_type_index) {
-                if_blocks[current_block_type_index].d();
+            if (if_block1)
+                if_block1.d();
+            if (~current_block_type_index_1) {
+                if_blocks_1[current_block_type_index_1].d();
             }
             destroy_component(modalfooter);
         }
     };
 }
 function instance$1($$self, $$props, $$invalidate) {
+    var profileSectionHeight;
+    var $app;
+    component_subscribe($$self, AppStore, function ($$value) { return $$invalidate(7, $app = $$value); });
+    var onSuccessLogout = $$props.onSuccessLogout;
     var closeModal = $$props.closeModal;
     var _a = $$props.displayProfile, displayProfile = _a === void 0 ? "profile" : _a;
+    var member = $$props.member;
+    var hideProfileSection = false;
+    var profileLoader = false;
+    if (!$app.customFields.filter(function (field) { return !field.hidden; }).length) {
+        displayProfile = "security";
+        hideProfileSection = true;
+    }
+    function profilemodalnav_member_binding(value) {
+        member = value;
+        $$invalidate(1, member);
+    }
     function profilemodalnav_displayProfile_binding(value) {
         displayProfile = value;
         $$invalidate(0, displayProfile);
     }
+    function profilemodalnav_profileLoader_binding(value) {
+        profileLoader = value;
+        $$invalidate(5, profileLoader);
+    }
+    function profileinfocontent_member_binding(value) {
+        member = value;
+        $$invalidate(1, member);
+    }
+    function profileinfocontent_profileLoader_binding(value) {
+        profileLoader = value;
+        $$invalidate(5, profileLoader);
+    }
     function securityinfocontent_displayProfile_binding(value) {
         displayProfile = value;
         $$invalidate(0, displayProfile);
     }
+    function securityinfocontent_profileLoader_binding(value) {
+        profileLoader = value;
+        $$invalidate(5, profileLoader);
+    }
     function passwordinfocontent_displayProfile_binding(value) {
         displayProfile = value;
         $$invalidate(0, displayProfile);
     }
+    function passwordinfocontent_profileLoader_binding(value) {
+        profileLoader = value;
+        $$invalidate(5, profileLoader);
+    }
     $$self.$$set = function ($$props) {
+        if ('onSuccessLogout' in $$props)
+            $$invalidate(2, onSuccessLogout = $$props.onSuccessLogout);
         if ('closeModal' in $$props)
-            $$invalidate(1, closeModal = $$props.closeModal);
+            $$invalidate(3, closeModal = $$props.closeModal);
         if ('displayProfile' in $$props)
             $$invalidate(0, displayProfile = $$props.displayProfile);
+        if ('member' in $$props)
+            $$invalidate(1, member = $$props.member);
+    };
+    $$self.$$.update = function () {
+        if ($$self.$$.dirty & /*displayProfile*/ 1) {
+            $$invalidate(6, profileSectionHeight = displayProfile === "profile" ? "400px" : "300px");
+        }
     };
     return [
         displayProfile,
+        member,
+        onSuccessLogout,
         closeModal,
+        hideProfileSection,
+        profileLoader,
+        profileSectionHeight,
+        $app,
+        profilemodalnav_member_binding,
         profilemodalnav_displayProfile_binding,
+        profilemodalnav_profileLoader_binding,
+        profileinfocontent_member_binding,
+        profileinfocontent_profileLoader_binding,
         securityinfocontent_displayProfile_binding,
-        passwordinfocontent_displayProfile_binding
+        securityinfocontent_profileLoader_binding,
+        passwordinfocontent_displayProfile_binding,
+        passwordinfocontent_profileLoader_binding
     ];
 }
 var ProfileModal = /** @class */ (function (_super) {
     __extends(ProfileModal, _super);
     function ProfileModal(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance$1, create_fragment$1, safe_not_equal, { closeModal: 1, displayProfile: 0 });
+        init(_this, options, instance$1, create_fragment$1, safe_not_equal, {
+            onSuccessLogout: 2,
+            closeModal: 3,
+            displayProfile: 0,
+            member: 1
+        });
         return _this;
     }
     return ProfileModal;
 }(SvelteComponent));
 /* src/Main.svelte generated by Svelte v3.48.0 */
 function add_css(target) {
-    append_styles(target, "svelte-n5w4ub", "@import url(\"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap\");#msOverlay.svelte-n5w4ub{position:fixed;display:flex;justify-content:center;align-items:center;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.5);z-index:99999;overflow:scroll;font-family:\"Plus Jakarta Sans\", sans-serif}.--hide{display:none}.ms__loader{position:relative;z-index:10000000}#msLoader path{fill:#007ace}.ms-modal{box-sizing:border-box;margin:auto;min-width:0;position:relative;outline:none;background:white;border-radius:16px;box-shadow:2px 2px 12px rgb(0 0 0 / 10%);width:360px;color:rgb(10, 10, 10)}.ms-modal--profile{width:700px}.ms-modal__close{box-sizing:border-box;margin:0;min-width:0;position:absolute;top:16px;right:16px;z-index:10;line-height:0}.ms-modal__close button{appearance:none;padding:0;outline:none;width:12px;border:0;background:transparent;cursor:pointer;color:#5c5c5c}.ms-modal__close button:hover{color:#0a0a0a}.ms-modal__back{box-sizing:border-box;margin:0;min-width:0;position:absolute;top:16px;left:16px;z-index:10;line-height:0}.ms-modal__back button{appearance:none;padding:0;outline:none;width:12px;border:0;background:transparent;cursor:pointer;color:#5c5c5c}.ms-modal__back button:hover, .ms-modal__profile-back button:hover{color:#0a0a0a}.ms-modal__back svg{height:12px}.ms-modal__profile-back button{appearance:none;padding:5px;margin-right:6px;outline:none;width:25px;height:25px;border:0;background:transparent;cursor:pointer;color:#5c5c5c;display:flex;align-items:stretch;justify-content:center}.ms-modal__header{display:flex;align-items:center;padding:12px}.ms-modal__content{padding:28px 28px 20px;width:100%;box-sizing:border-box;margin:0 auto}.ms-modal__content--profile{padding:0;display:flex;flex-wrap:wrap;align-content:stretch;align-items:stretch;border-top:1px solid #DDDDDD}.ms-modal__content-left{display:flex;flex-direction:column;align-items:flex-start;padding:20px;border-right:1px solid #DDDDDD;min-width:160px}.ms-modal__content-right{padding:20px;flex-grow:1;min-height:300px;max-height:400px;overflow-y:auto}.ms-modal__figure{box-sizing:border-box;margin:8px auto;display:flex;width:44px;height:44px;border-radius:100%;border:1px solid rgb(235, 235, 235);box-shadow:rgb(0 0 0 / 4%) 0px 2px 2px 0px;padding:7px}.ms-modal__figure--profile{width:24px;height:24px;padding:3px;margin:0px 8px 0px 0px}.ms-modal__title-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.ms-modal__title{margin-bottom:36px;margin-top:0;text-align:center;font-size:24px;line-height:32px;font-weight:500}.ms-modal__title--profile{margin-bottom:0px}.ms-modal__title-group{display:flex;align-items:center}.ms-modal__title--sub-text{margin-bottom:8px}.ms-modal__text{font-weight:500;font-size:16px;line-height:28px;text-align:center;margin:0 0 20px 0}.ms-form{width:100%}.ms-form__group{margin-bottom:20px}.ms-form__flex{display:flex;justify-content:space-between;align-content:center}.ms-form__flex--centered{justify-content:center}.ms-form__label{margin-bottom:4px;margin-top:0px;font-size:14px;line-height:28px;font-weight:500}.ms-form__fieldset{display:flex;justify-content:space-between;padding:0;border:none}.ms-form__input{box-sizing:border-box;margin:0px;border:1px solid rgb(201, 201, 201);border-radius:6px;font-size:16px;font-weight:400;padding:15px;width:100%}.ms-form__password-container{display:flex;justify-content:space-between;align-content:center;box-sizing:border-box;margin:0px;border:1px solid rgb(201, 201, 201);border-radius:6px;width:100%}.ms-form__password-container:focus-within{border:1px solid rgb(0, 68, 252);outline:rgb(0, 68, 252) solid 1px}.ms-form__password-container:focus-within input{outline:none;border-color:rgb(201, 201, 201);box-shadow:none}.ms-form__input--password{border:none}.ms-form__input--token{font-weight:500;font-size:24.19px;line-height:32px;text-align:center;color:#000000;padding:9px;max-width:42px}.ms-form__show-toggle{cursor:pointer;background:transparent;border-radius:0px 6px 6px 0px;padding:0px 8px;display:flex;align-items:center}.ms-form__eye{display:block;width:22px}.ms-form__eye-slash{display:block;width:22px}.ms-form__error{font-weight:500;font-size:12px;line-height:16px;color:#e40023;margin-top:4px;display:flex;align-items:baseline}.ms-form__error svg{width:10px;height:10px;margin-right:5px}.ms-form__label--right a{color:rgb(10, 10, 10) !important;text-decoration:none;font-weight:400}.ms-form__button{border-radius:6px;font-weight:700;font-size:16px;padding-left:22px;padding-right:22px;height:52px;border:none;display:block;width:100%;background-color:rgb(41, 98, 255);color:#fff;transition:background-color 0.5s ease;cursor:pointer}.ms-form__button:hover{background-color:#0745ff}.ms-form__button:disabled{background-color:#96C0FE;color:#fff;pointer-events:none;display:flex;justify-content:center;align-items:center}.ms-form__button--text{background-color:transparent;padding:0px;height:auto;margin-bottom:0px;margin-top:0px;font-size:14px;line-height:28px;font-weight:500;color:rgb(10, 10, 10)}.ms-form__button--text:hover{background-color:transparent}#msFormLoader path{fill:#fff}a.ms-form__link{margin-top:8px;font-weight:500;font-size:14px;line-height:24px;color:rgb(10, 10, 10) !important;text-decoration:none}.ms-modal__cancel-button{background:#F6F6F6;color:#828282;padding:8px;margin-right:8px;border-radius:4px;border:none;font-weight:700;font-size:14px;line-height:16px;cursor:pointer}.ms-modal__save-button{background:#2962FF;color:#fff;padding:8px;border-radius:4px;border:none;font-weight:700;font-size:14px;line-height:16px;cursor:pointer}.ms-modal__outline-button{background:#fff;color:#0A0A0A;font-weight:700;font-size:14px;line-height:16px;padding:12px;margin-right:8px;border-radius:4px;border:1px solid #DDDDDD;cursor:pointer}.ms-modal__outline-button svg{height:14px;margin-right:6px}.ms-modal__button-label{margin-bottom:4px;margin-top:0px;font-size:14px;line-height:28px;font-weight:500}.ms-modal__profile-option{cursor:pointer;margin-bottom:20px;font-weight:500;font-size:16px;line-height:28px;background:transparent;border:none;padding:0px}.ms-modal__profile-option svg{height:14px;margin-right:8px}.ms-modal__profile-option:hover{color:#2962FF}.ms-modal__profile-option--active{color:#2962FF}.ms-modal__social-divider{display:flex;align-items:center;margin:20px 0px}.ms-modal__divider-line{text-align:center;background:#dddddd;height:1px;width:100%}.ms-modal__divider-text{padding:0px 4px}.ms-modal__footer{text-align:center;width:100%;box-sizing:border-box;margin:0;min-width:0;background:#f6f6f6;padding-top:10px;padding-bottom:10px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;border-top:1px solid;border-top-color:#dddddd;font-size:12px;line-height:16px;font-weight:500}.ms-modal__footer a{color:rgb(10, 10, 10);text-decoration:none;display:flex;justify-content:center;align-items:center}.ms-modal__footer svg{height:12px;width:12px}");
+    append_styles(target, "svelte-1fq6c9b", "@import url(\"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap\");#msOverlay.svelte-1fq6c9b{position:fixed;display:flex;justify-content:center;align-items:center;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.5);z-index:99999;overflow:scroll;font-family:\"Plus Jakarta Sans\", sans-serif}.--hide{display:none}.ms__loader{position:relative;z-index:10000000}#msLoader path{fill:#007ace}.ms__profile__loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:rgb(255 255 255 / 75%)}.ms-modal{box-sizing:border-box;margin:auto;min-width:0;position:relative;outline:none;background:white;border-radius:16px;box-shadow:2px 2px 12px rgb(0 0 0 / 10%);width:360px;color:rgb(10, 10, 10)}.ms-modal--profile{width:700px}.ms-modal__close{box-sizing:border-box;margin:0;min-width:0;position:absolute;top:16px;right:16px;z-index:10;line-height:0}.ms-modal__close button{appearance:none;padding:0;outline:none;width:12px;border:0;background:transparent;cursor:pointer;color:#5c5c5c}.ms-modal__close button:hover{color:#0a0a0a}.ms-modal__back{box-sizing:border-box;margin:0;min-width:0;position:absolute;top:16px;left:16px;z-index:10;line-height:0}.ms-modal__back button{appearance:none;padding:0;outline:none;width:12px;border:0;background:transparent;cursor:pointer;color:#5c5c5c}.ms-modal__back button:hover, .ms-modal__profile-back button:hover{color:#0a0a0a}.ms-modal__back svg{height:12px}.ms-modal__profile-back button{appearance:none;padding:5px;margin-right:6px;outline:none;width:25px;height:25px;border:0;background:transparent;cursor:pointer;color:#5c5c5c;display:flex;align-items:stretch;justify-content:center}.ms-modal__header{display:flex;align-items:center;padding:12px}.ms-modal__content{padding:28px 28px 20px;width:100%;box-sizing:border-box;margin:0 auto}.ms-modal__content--profile{padding:0;display:flex;flex-wrap:wrap;align-content:stretch;align-items:stretch;border-top:1px solid #DDDDDD}.ms-modal__content-left{display:flex;flex-direction:column;align-items:flex-start;padding:20px;border-right:1px solid #DDDDDD;min-width:160px}.ms-modal__content-right{padding:20px;flex-grow:1;height:100%;min-height:300px;max-height:400px;overflow-y:auto;position:relative;transition:height 0.3s ease-in-out}.ms-modal__figure{box-sizing:border-box;margin:8px auto;width:44px;height:44px;border-style:solid;border-width:1px;border-color:rgb(235, 235, 235);box-shadow:rgb(0 0 0 / 4%) 0px 2px 2px 0px;display:flex;position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;flex-shrink:0;line-height:1;border-radius:50%;overflow:hidden}.ms-modal__figure--profile{width:24px;height:24px;padding:0px;margin:0px 8px 0px 0px}.ms-modal__figure img{width:100%;height:100%;text-align:center;object-fit:cover;color:transparent;text-indent:10000px}.ms-modal__title-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.ms-modal__title{margin-bottom:36px;margin-top:0;text-align:center;font-size:24px;line-height:32px;font-weight:700}.ms-modal__title--profile{margin-bottom:0px}.ms-modal__title-group{display:flex;align-items:center}.ms-modal__title--sub-text{margin-bottom:8px}.ms-modal__text{font-weight:500;font-size:16px;line-height:28px;text-align:center;margin:0 0 20px 0}.ms-form{width:100%}.ms-form__group{margin-bottom:20px}.ms-form__flex{display:flex;justify-content:space-between;align-content:center}.ms-form__flex--centered{justify-content:center}.ms-form__label{margin-bottom:4px;margin-top:0px;font-size:14px;line-height:24px;font-weight:700}.ms-form__fieldset{display:flex;justify-content:space-between;padding:0;border:none}.ms-form__input{box-sizing:border-box;margin:0px;border:1px solid rgb(201, 201, 201);border-radius:6px;font-size:16px;font-weight:400;padding:15px;width:100%}.ms-form__password-container{display:flex;justify-content:space-between;align-content:center;box-sizing:border-box;margin:0px;border:1px solid rgb(201, 201, 201);border-radius:6px;width:100%}.ms-form__password-container:focus-within{border:1px solid rgb(0, 68, 252);outline:rgb(0, 68, 252) solid 1px}.ms-form__password-container:focus-within input{outline:none;border-color:rgb(201, 201, 201);box-shadow:none}.ms-form__input--password{border:none}.ms-form__input--token{font-weight:500;font-size:24.19px;line-height:32px;text-align:center;color:#000000;padding:9px;max-width:42px}.ms-form__show-toggle{cursor:pointer;background:transparent;border-radius:0px 6px 6px 0px;padding:0px 8px;display:flex;align-items:center}.ms-form__eye{display:block;width:22px}.ms-form__eye-slash{display:block;width:22px}.ms-form__error{font-weight:500;font-size:12px;line-height:16px;color:#e40023;margin-top:4px;display:flex;align-items:baseline}.ms-form__error svg{width:10px;height:10px;margin-right:5px}.ms-form__label--right a{color:rgb(10, 10, 10) !important;text-decoration:none;font-weight:400}.ms-form__button{border-radius:6px;font-weight:700;font-size:16px;padding-left:22px;padding-right:22px;height:52px;border:none;display:block;width:100%;background-color:rgb(41, 98, 255);color:#fff;transition:background-color 0.5s ease;cursor:pointer}.ms-form__button:hover{background-color:#0745ff}.ms-form__button:disabled{background-color:#96C0FE;color:#fff;pointer-events:none;display:flex;justify-content:center;align-items:center}.ms-form__button--text{background-color:transparent;padding:0px;height:auto;margin-bottom:0px;margin-top:0px;font-size:14px;line-height:28px;font-weight:500;color:#0A0A0A;opacity:0.8}.ms-form__button--text:hover{background-color:transparent}#msFormLoader path{fill:#fff}a.ms-form__link{margin-top:8px;font-weight:500;font-size:14px;line-height:24px;color:rgb(10, 10, 10) !important;text-decoration:none;opacity:0.8}.ms-modal__cancel-button{background:#F6F6F6;color:#828282;padding:8px;margin-right:8px;border-radius:4px;border:none;font-weight:700;font-size:14px;line-height:16px;cursor:pointer}.ms-modal__save-button{background:#2962FF;color:#fff;padding:8px;border-radius:4px;border:none;font-weight:700;font-size:14px;line-height:16px;cursor:pointer}.ms-modal__save-button:disabled{background:#80a1fc;color:#fff;cursor:default}.ms-modal__outline-button{background:#fff;color:#0A0A0A;font-weight:700;font-size:14px;line-height:16px;padding:12px;margin-right:8px;border-radius:4px;border:1px solid #DDDDDD;cursor:pointer}.ms-modal__outline-button svg{height:14px;margin-right:6px}.ms-modal__button-label{margin-bottom:4px;margin-top:0px;font-size:14px;line-height:28px;font-weight:500}.ms-modal__profile-option{cursor:pointer;margin-bottom:20px;font-weight:500;font-size:16px;line-height:28px;background:transparent;border:none;padding:0px}.ms-modal__profile-option svg{height:14px;margin-right:8px}.ms-modal__profile-option:hover{color:#2962FF}.ms-modal__profile-option--active{color:#2962FF}.ms-modal__social-divider{display:flex;align-items:center;margin:20px 0px}.ms-modal__divider-line{text-align:center;background:#dddddd;height:1px;width:100%}.ms-modal__divider-text{padding:0px 4px}.ms-modal__footer{text-align:center;width:100%;box-sizing:border-box;margin:0;min-width:0;background:#f6f6f6;padding-top:10px;padding-bottom:10px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;border-top:1px solid;border-top-color:#dddddd;font-size:12px;line-height:16px;font-weight:500}.ms-modal__footer a{color:rgb(10, 10, 10);text-decoration:none;display:flex;justify-content:center;align-items:center}.ms-modal__footer svg{height:12px;width:12px;margin-right:5.5px}");
 }
-// (23:2) {#if showLoader}
-function create_if_block_5(ctx) {
-    var loader;
+// (86:36) 
+function create_if_block_6(ctx) {
+    var profilemodal;
+    var updating_display;
     var current;
-    loader = new Loader({});
+    function profilemodal_display_binding(value) {
+        /*profilemodal_display_binding*/ ctx[15](value);
+    }
+    var profilemodal_props = {
+        closeModal: /*closeModal*/ ctx[5],
+        onSuccessLogout: /*onSuccess*/ ctx[2],
+        member: /*member*/ ctx[3]
+    };
+    if ( /*display*/ctx[0] !== void 0) {
+        profilemodal_props.display = /*display*/ ctx[0];
+    }
+    profilemodal = new ProfileModal({ props: profilemodal_props });
+    binding_callbacks.push(function () { return bind(profilemodal, 'display', profilemodal_display_binding); });
     return {
         c: function () {
-            create_component(loader.$$.fragment);
+            create_component(profilemodal.$$.fragment);
         },
         m: function (target, anchor) {
-            mount_component(loader, target, anchor);
+            mount_component(profilemodal, target, anchor);
             current = true;
         },
+        p: function (ctx, dirty) {
+            var profilemodal_changes = {};
+            if (dirty & /*onSuccess*/ 4)
+                profilemodal_changes.onSuccessLogout = /*onSuccess*/ ctx[2];
+            if (dirty & /*member*/ 8)
+                profilemodal_changes.member = /*member*/ ctx[3];
+            if (!updating_display && dirty & /*display*/ 1) {
+                updating_display = true;
+                profilemodal_changes.display = /*display*/ ctx[0];
+                add_flush_callback(function () { return updating_display = false; });
+            }
+            profilemodal.$set(profilemodal_changes);
+        },
         i: function (local) {
             if (current)
                 return;
-            transition_in(loader.$$.fragment, local);
+            transition_in(profilemodal.$$.fragment, local);
             current = true;
         },
         o: function (local) {
-            transition_out(loader.$$.fragment, local);
+            transition_out(profilemodal.$$.fragment, local);
             current = false;
         },
         d: function (detaching) {
-            destroy_component(loader, detaching);
+            destroy_component(profilemodal, detaching);
         }
     };
 }
-// (35:34) 
-function create_if_block_4(ctx) {
-    var profilemodal;
+// (84:51) 
+function create_if_block_5(ctx) {
+    var passwordsuccessmodal;
     var updating_display;
     var current;
-    function profilemodal_display_binding(value) {
-        /*profilemodal_display_binding*/ ctx[11](value);
+    function passwordsuccessmodal_display_binding(value) {
+        /*passwordsuccessmodal_display_binding*/ ctx[14](value);
     }
-    var profilemodal_props = { closeModal: /*closeModal*/ ctx[4] };
+    var passwordsuccessmodal_props = { closeModal: /*closeModal*/ ctx[5] };
     if ( /*display*/ctx[0] !== void 0) {
-        profilemodal_props.display = /*display*/ ctx[0];
+        passwordsuccessmodal_props.display = /*display*/ ctx[0];
     }
-    profilemodal = new ProfileModal({ props: profilemodal_props });
-    binding_callbacks.push(function () { return bind(profilemodal, 'display', profilemodal_display_binding); });
+    passwordsuccessmodal = new PassSuccessModal({ props: passwordsuccessmodal_props });
+    binding_callbacks.push(function () { return bind(passwordsuccessmodal, 'display', passwordsuccessmodal_display_binding); });
     return {
         c: function () {
-            create_component(profilemodal.$$.fragment);
+            create_component(passwordsuccessmodal.$$.fragment);
         },
         m: function (target, anchor) {
-            mount_component(profilemodal, target, anchor);
+            mount_component(passwordsuccessmodal, target, anchor);
             current = true;
         },
         p: function (ctx, dirty) {
-            var profilemodal_changes = {};
+            var passwordsuccessmodal_changes = {};
             if (!updating_display && dirty & /*display*/ 1) {
                 updating_display = true;
-                profilemodal_changes.display = /*display*/ ctx[0];
+                passwordsuccessmodal_changes.display = /*display*/ ctx[0];
                 add_flush_callback(function () { return updating_display = false; });
             }
-            profilemodal.$set(profilemodal_changes);
+            passwordsuccessmodal.$set(passwordsuccessmodal_changes);
         },
         i: function (local) {
             if (current)
                 return;
-            transition_in(profilemodal.$$.fragment, local);
+            transition_in(passwordsuccessmodal.$$.fragment, local);
             current = true;
         },
         o: function (local) {
-            transition_out(profilemodal.$$.fragment, local);
+            transition_out(passwordsuccessmodal.$$.fragment, local);
             current = false;
         },
         d: function (detaching) {
-            destroy_component(profilemodal, detaching);
+            destroy_component(passwordsuccessmodal, detaching);
         }
     };
 }
-// (33:41) 
-function create_if_block_3(ctx) {
+// (82:43) 
+function create_if_block_4(ctx) {
     var passwordtokenmodal;
     var updating_display;
     var current;
     function passwordtokenmodal_display_binding(value) {
-        /*passwordtokenmodal_display_binding*/ ctx[10](value);
+        /*passwordtokenmodal_display_binding*/ ctx[13](value);
     }
     var passwordtokenmodal_props = {
-        closeModal: /*closeModal*/ ctx[4],
-        onSuccessPasswordReset: /*onSuccess*/ ctx[3]
+        closeModal: /*closeModal*/ ctx[5],
+        onSuccessPasswordReset: /*onSuccess*/ ctx[2]
     };
     if ( /*display*/ctx[0] !== void 0) {
         passwordtokenmodal_props.display = /*display*/ ctx[0];
@@ -4119,8 +5813,8 @@ function create_if_block_3(ctx) {
         },
         p: function (ctx, dirty) {
             var passwordtokenmodal_changes = {};
-            if (dirty & /*onSuccess*/ 8)
-                passwordtokenmodal_changes.onSuccessPasswordReset = /*onSuccess*/ ctx[3];
+            if (dirty & /*onSuccess*/ 4)
+                passwordtokenmodal_changes.onSuccessPasswordReset = /*onSuccess*/ ctx[2];
             if (!updating_display && dirty & /*display*/ 1) {
                 updating_display = true;
                 passwordtokenmodal_changes.display = /*display*/ ctx[0];
@@ -4143,15 +5837,15 @@ function create_if_block_3(ctx) {
         }
     };
 }
-// (31:42) 
-function create_if_block_2(ctx) {
+// (80:44) 
+function create_if_block_3(ctx) {
     var passwordresetmodal;
     var updating_display;
     var current;
     function passwordresetmodal_display_binding(value) {
-        /*passwordresetmodal_display_binding*/ ctx[9](value);
+        /*passwordresetmodal_display_binding*/ ctx[12](value);
     }
-    var passwordresetmodal_props = { closeModal: /*closeModal*/ ctx[4] };
+    var passwordresetmodal_props = { closeModal: /*closeModal*/ ctx[5] };
     if ( /*display*/ctx[0] !== void 0) {
         passwordresetmodal_props.display = /*display*/ ctx[0];
     }
@@ -4189,21 +5883,21 @@ function create_if_block_2(ctx) {
         }
     };
 }
-// (29:33) 
-function create_if_block_1(ctx) {
+// (78:35) 
+function create_if_block_2(ctx) {
     var signupmodal;
     var updating_display;
     var updating_params;
     var current;
     function signupmodal_display_binding(value) {
-        /*signupmodal_display_binding*/ ctx[7](value);
+        /*signupmodal_display_binding*/ ctx[10](value);
     }
     function signupmodal_params_binding(value) {
-        /*signupmodal_params_binding*/ ctx[8](value);
+        /*signupmodal_params_binding*/ ctx[11](value);
     }
     var signupmodal_props = {
-        closeModal: /*closeModal*/ ctx[4],
-        onSuccessSignup: /*onSuccess*/ ctx[3]
+        closeModal: /*closeModal*/ ctx[5],
+        onSuccessSignup: /*onSuccess*/ ctx[2]
     };
     if ( /*display*/ctx[0] !== void 0) {
         signupmodal_props.display = /*display*/ ctx[0];
@@ -4224,8 +5918,8 @@ function create_if_block_1(ctx) {
         },
         p: function (ctx, dirty) {
             var signupmodal_changes = {};
-            if (dirty & /*onSuccess*/ 8)
-                signupmodal_changes.onSuccessSignup = /*onSuccess*/ ctx[3];
+            if (dirty & /*onSuccess*/ 4)
+                signupmodal_changes.onSuccessSignup = /*onSuccess*/ ctx[2];
             if (!updating_display && dirty & /*display*/ 1) {
                 updating_display = true;
                 signupmodal_changes.display = /*display*/ ctx[0];
@@ -4253,21 +5947,21 @@ function create_if_block_1(ctx) {
         }
     };
 }
-// (27:2) {#if display === "login"}
-function create_if_block(ctx) {
+// (76:4) {#if display === "login"}
+function create_if_block_1(ctx) {
     var loginmodal;
     var updating_display;
     var updating_params;
     var current;
     function loginmodal_display_binding(value) {
-        /*loginmodal_display_binding*/ ctx[5](value);
+        /*loginmodal_display_binding*/ ctx[8](value);
     }
     function loginmodal_params_binding(value) {
-        /*loginmodal_params_binding*/ ctx[6](value);
+        /*loginmodal_params_binding*/ ctx[9](value);
     }
     var loginmodal_props = {
-        closeModal: /*closeModal*/ ctx[4],
-        onSuccessLogin: /*onSuccess*/ ctx[3]
+        closeModal: /*closeModal*/ ctx[5],
+        onSuccessLogin: /*onSuccess*/ ctx[2]
     };
     if ( /*display*/ctx[0] !== void 0) {
         loginmodal_props.display = /*display*/ ctx[0];
@@ -4288,8 +5982,8 @@ function create_if_block(ctx) {
         },
         p: function (ctx, dirty) {
             var loginmodal_changes = {};
-            if (dirty & /*onSuccess*/ 8)
-                loginmodal_changes.onSuccessLogin = /*onSuccess*/ ctx[3];
+            if (dirty & /*onSuccess*/ 4)
+                loginmodal_changes.onSuccessLogin = /*onSuccess*/ ctx[2];
             if (!updating_display && dirty & /*display*/ 1) {
                 updating_display = true;
                 loginmodal_changes.display = /*display*/ ctx[0];
@@ -4317,53 +6011,80 @@ function create_if_block(ctx) {
         }
     };
 }
+// (73:2) {#if showLoader}
+function create_if_block(ctx) {
+    var loader;
+    var current;
+    loader = new Loader({});
+    return {
+        c: function () {
+            create_component(loader.$$.fragment);
+        },
+        m: function (target, anchor) {
+            mount_component(loader, target, anchor);
+            current = true;
+        },
+        p: noop,
+        i: function (local) {
+            if (current)
+                return;
+            transition_in(loader.$$.fragment, local);
+            current = true;
+        },
+        o: function (local) {
+            transition_out(loader.$$.fragment, local);
+            current = false;
+        },
+        d: function (detaching) {
+            destroy_component(loader, detaching);
+        }
+    };
+}
 function create_fragment(ctx) {
     var main;
-    var t;
     var current_block_type_index;
-    var if_block1;
+    var if_block;
     var current;
-    var if_block0 = /*showLoader*/ ctx[2] && create_if_block_5();
     var if_block_creators = [
         create_if_block,
         create_if_block_1,
         create_if_block_2,
         create_if_block_3,
-        create_if_block_4
+        create_if_block_4,
+        create_if_block_5,
+        create_if_block_6
     ];
     var if_blocks = [];
     function select_block_type(ctx, dirty) {
-        if ( /*display*/ctx[0] === "login")
+        if ( /*showLoader*/ctx[4])
             return 0;
-        if ( /*display*/ctx[0] === "signup")
+        if ( /*display*/ctx[0] === "login")
             return 1;
-        if ( /*display*/ctx[0] === "forgot_password")
+        if ( /*display*/ctx[0] === "signup")
             return 2;
-        if ( /*display*/ctx[0] === "reset_password")
+        if ( /*display*/ctx[0] === "forgot_password")
             return 3;
-        if ( /*display*/ctx[0] === "profile")
+        if ( /*display*/ctx[0] === "reset_password")
             return 4;
+        if ( /*display*/ctx[0] === "reset_password_success")
+            return 5;
+        if ( /*display*/ctx[0] === "profile")
+            return 6;
         return -1;
     }
     if (~(current_block_type_index = select_block_type(ctx))) {
-        if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+        if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
     }
     return {
         c: function () {
             main = element("main");
-            if (if_block0)
-                if_block0.c();
-            t = space();
-            if (if_block1)
-                if_block1.c();
+            if (if_block)
+                if_block.c();
             attr(main, "id", "msOverlay");
-            attr(main, "class", "svelte-n5w4ub");
+            attr(main, "class", "svelte-1fq6c9b");
         },
         m: function (target, anchor) {
             insert(target, main, anchor);
-            if (if_block0)
-                if_block0.m(main, null);
-            append(main, t);
             if (~current_block_type_index) {
                 if_blocks[current_block_type_index].m(main, null);
             }
@@ -4371,26 +6092,6 @@ function create_fragment(ctx) {
         },
         p: function (ctx, _a) {
             var _b = __read(_a, 1), dirty = _b[0];
-            if ( /*showLoader*/ctx[2]) {
-                if (if_block0) {
-                    if (dirty & /*showLoader*/ 4) {
-                        transition_in(if_block0, 1);
-                    }
-                }
-                else {
-                    if_block0 = create_if_block_5();
-                    if_block0.c();
-                    transition_in(if_block0, 1);
-                    if_block0.m(main, t);
-                }
-            }
-            else if (if_block0) {
-                group_outros();
-                transition_out(if_block0, 1, 1, function () {
-                    if_block0 = null;
-                });
-                check_outros();
-            }
             var previous_block_index = current_block_type_index;
             current_block_type_index = select_block_type(ctx);
             if (current_block_type_index === previous_block_index) {
@@ -4399,7 +6100,7 @@ function create_fragment(ctx) {
                 }
             }
             else {
-                if (if_block1) {
+                if (if_block) {
                     group_outros();
                     transition_out(if_blocks[previous_block_index], 1, 1, function () {
                         if_blocks[previous_block_index] = null;
@@ -4407,39 +6108,35 @@ function create_fragment(ctx) {
                     check_outros();
                 }
                 if (~current_block_type_index) {
-                    if_block1 = if_blocks[current_block_type_index];
-                    if (!if_block1) {
-                        if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-                        if_block1.c();
+                    if_block = if_blocks[current_block_type_index];
+                    if (!if_block) {
+                        if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+                        if_block.c();
                     }
                     else {
-                        if_block1.p(ctx, dirty);
+                        if_block.p(ctx, dirty);
                     }
-                    transition_in(if_block1, 1);
-                    if_block1.m(main, null);
+                    transition_in(if_block, 1);
+                    if_block.m(main, null);
                 }
                 else {
-                    if_block1 = null;
+                    if_block = null;
                 }
             }
         },
         i: function (local) {
             if (current)
                 return;
-            transition_in(if_block0);
-            transition_in(if_block1);
+            transition_in(if_block);
             current = true;
         },
         o: function (local) {
-            transition_out(if_block0);
-            transition_out(if_block1);
+            transition_out(if_block);
             current = false;
         },
         d: function (detaching) {
             if (detaching)
                 detach(main);
-            if (if_block0)
-                if_block0.d();
             if (~current_block_type_index) {
                 if_blocks[current_block_type_index].d();
             }
@@ -4447,14 +6144,80 @@ function create_fragment(ctx) {
     };
 }
 function instance($$self, $$props, $$invalidate) {
-    var _a = $$props.showLoader, showLoader = _a === void 0 ? false : _a;
-    var _b = $$props.display, display = _b === void 0 ? "login" : _b; // or "signup", "forgot_password", "reset_password", and "profile"
+    var _this = this;
+    var showLoader;
+    var _a = $$props.display, display = _a === void 0 ? "login" : _a; // or "signup", "forgot_password", "reset_password", "reset_password_success", and "profile"
     var onSuccess = $$props.onSuccess;
     var params = $$props.params;
+    var appLoading = true;
+    var memberLoading = display === "profile" ? true : false;
+    var member;
+    function setAppStore(data) {
+        AppStore.update(function () { return data; });
+    }
     function closeModal() {
+        // hacky way to remove all components prior to removing overlay
+        $$invalidate(6, appLoading = true);
         onSuccess({ type: "CLOSED" });
         document.querySelector("#msOverlay").remove();
     }
+    var getApp = function () { return __awaiter(_this, void 0, void 0, function () {
+        var data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, window.$memberstackDom.getApp()];
+                case 1:
+                    data = (_a.sent()).data;
+                    setAppStore(data);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    function checkApp() {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(params && params.app)) return [3 /*break*/, 1];
+                        setAppStore(params.app);
+                        return [3 /*break*/, 3];
+                    case 1:
+                        console.log("No app specified - request it");
+                        return [4 /*yield*/, getApp()];
+                    case 2:
+                        _a.sent();
+                        _a.label = 3;
+                    case 3:
+                        $$invalidate(6, appLoading = false);
+                        $$invalidate(4, showLoader = false);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    var getMember = function () { return __awaiter(_this, void 0, void 0, function () {
+        var data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, window.$memberstackDom.getCurrentMember()];
+                case 1:
+                    data = (_a.sent()).data;
+                    $$invalidate(7, memberLoading = false);
+                    $$invalidate(3, member = data);
+                    if (display === "profile" && !data) {
+                        closeModal();
+                        throw new Error("Member not logged in");
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    onMount(function () {
+        checkApp();
+        if (display === "profile") {
+            getMember();
+        }
+    });
     function loginmodal_display_binding(value) {
         display = value;
         $$invalidate(0, display);
@@ -4479,32 +6242,43 @@ function instance($$self, $$props, $$invalidate) {
         display = value;
         $$invalidate(0, display);
     }
+    function passwordsuccessmodal_display_binding(value) {
+        display = value;
+        $$invalidate(0, display);
+    }
     function profilemodal_display_binding(value) {
         display = value;
         $$invalidate(0, display);
     }
     $$self.$$set = function ($$props) {
-        if ('showLoader' in $$props)
-            $$invalidate(2, showLoader = $$props.showLoader);
         if ('display' in $$props)
             $$invalidate(0, display = $$props.display);
         if ('onSuccess' in $$props)
-            $$invalidate(3, onSuccess = $$props.onSuccess);
+            $$invalidate(2, onSuccess = $$props.onSuccess);
         if ('params' in $$props)
             $$invalidate(1, params = $$props.params);
     };
+    $$self.$$.update = function () {
+        if ($$self.$$.dirty & /*appLoading, memberLoading*/ 192) {
+            $$invalidate(4, showLoader = appLoading || memberLoading);
+        }
+    };
     return [
         display,
         params,
-        showLoader,
         onSuccess,
+        member,
+        showLoader,
         closeModal,
+        appLoading,
+        memberLoading,
         loginmodal_display_binding,
         loginmodal_params_binding,
         signupmodal_display_binding,
         signupmodal_params_binding,
         passwordresetmodal_display_binding,
         passwordtokenmodal_display_binding,
+        passwordsuccessmodal_display_binding,
         profilemodal_display_binding
     ];
 }
@@ -4512,12 +6286,7 @@ var Main = /** @class */ (function (_super) {
     __extends(Main, _super);
     function Main(options) {
         var _this = _super.call(this) || this;
-        init(_this, options, instance, create_fragment, safe_not_equal, {
-            showLoader: 2,
-            display: 0,
-            onSuccess: 3,
-            params: 1
-        }, add_css);
+        init(_this, options, instance, create_fragment, safe_not_equal, { display: 0, onSuccess: 2, params: 1 }, add_css);
         return _this;
     }
     return Main;